@xaypay/tui 0.2.25 → 0.2.27

package/dist/index.js

@@ -1,5 +1,7 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var React = require('react');
 var PropTypes = require('prop-types');
 var classnames = require('classnames');
@@ -7,7 +9,10 @@ var _ = require('lodash');
 var styled = require('styled-components');
 var ReactDOM = require('react-dom/client');
 
-function _interopNamespaceDefault(e) {
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
   var n = Object.create(null);
   if (e) {
     Object.keys(e).forEach(function (k) {
@@ -20,11 +25,17 @@ function _interopNamespaceDefault(e) {
       }
     });
   }
-  n.default = e;
+  n["default"] = e;
   return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 
 // Unique ID creation requires a high quality random # generator. In the browser we therefore
 // require the crypto API and do not support built-in fallback to lower quality random number
@@ -68,7 +79,7 @@ var native = {
 };
 
 function v4(options, buf, offset) {
-  if (native.randomUUID && true && !options) {
+  if (native.randomUUID && !buf && !options) {
     return native.randomUUID();
   }
 
@@ -78,6 +89,16 @@ 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);
 }
 
@@ -290,7 +311,7 @@ const SvgListItemDelete = ({
 }));
 
 // eslint-disable-next-line react/display-name
-const FileItem = /*#__PURE__*/React.memo(({
+const FileItem = /*#__PURE__*/React__default["default"].memo(({
   size,
   name,
   uuid,
@@ -377,7 +398,7 @@ const FileItem = /*#__PURE__*/React.memo(({
       }, timeForRemoveError));
     }
   }, [check]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       width: '100%',
       display: 'flex',
@@ -392,11 +413,11 @@ const FileItem = /*#__PURE__*/React.memo(({
       border: check !== '' ? `1px solid ${listItemErrorColor}` : '',
       backgroundColor: check !== '' ? listItemBackgroundErrorColor : listItemBackgroundColor
     }
-  }, check !== '' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+  }, check !== '' ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       width: '32px'
     }
-  }, iconWrong ? iconWrong : /*#__PURE__*/React.createElement(SvgWrong, null)), /*#__PURE__*/React.createElement("div", {
+  }, iconWrong ? iconWrong : /*#__PURE__*/React__default["default"].createElement(SvgWrong, null)), /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       position: 'relative',
       display: 'flex',
@@ -405,7 +426,7 @@ const FileItem = /*#__PURE__*/React.memo(({
       alignItems: 'flex-end',
       width: 'calc(100% - 40px)'
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       width: '100%',
       height: '100%',
@@ -419,7 +440,7 @@ const FileItem = /*#__PURE__*/React.memo(({
       fontWeight: listItemErrorWeight,
       fontFamily: listItemErrorFamily
     }
-  }, /*#__PURE__*/React.createElement("p", {
+  }, /*#__PURE__*/React__default["default"].createElement("p", {
     style: {
       margin: '0px',
       overflow: 'hidden',
@@ -428,7 +449,7 @@ const FileItem = /*#__PURE__*/React.memo(({
       width: '100%',
       maxWidth: '100%'
     }
-  }, name), /*#__PURE__*/React.createElement("p", {
+  }, name), /*#__PURE__*/React__default["default"].createElement("p", {
     style: {
       margin: '0px',
       overflow: 'hidden',
@@ -438,11 +459,11 @@ const FileItem = /*#__PURE__*/React.memo(({
       maxWidth: '100%',
       color: listItemErrorColor
     }
-  }, check ? check : '')))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+  }, check ? check : '')))) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       width: '32px'
     }
-  }, fileFormat === 'svg+xml' ? iconSvg ? iconSvg : /*#__PURE__*/React.createElement(SvgListItemSvg, null) : fileFormat === 'pdf' ? iconPdf ? iconPdf : /*#__PURE__*/React.createElement(SvgListItemPdf, null) : fileFormat === 'jpg' ? iconJpg ? iconJpg : /*#__PURE__*/React.createElement(SvgListItemJpg, null) : fileFormat === 'png' ? iconPng ? iconPng : /*#__PURE__*/React.createElement(SvgListItemPng, null) : fileFormat === 'jpeg' ? iconJpeg ? iconJpeg : /*#__PURE__*/React.createElement(SvgListItemJpeg, null) : fileFormat === 'heic' || fileFormat === 'heif' ? iconHeic ? iconHeic : /*#__PURE__*/React.createElement(SvgHeic, null) : fileFormat === 'msword' ? iconDoc ? iconDoc : /*#__PURE__*/React.createElement(SvgDocIcon, null) : fileFormat === 'vnd.openxmlformats-officedocument.wordprocessingml.document' ? iconDocx ? iconDocx : /*#__PURE__*/React.createElement(SvgDocIcon, null) : ''), /*#__PURE__*/React.createElement("div", {
+  }, fileFormat === 'svg+xml' ? iconSvg ? iconSvg : /*#__PURE__*/React__default["default"].createElement(SvgListItemSvg, null) : fileFormat === 'pdf' ? iconPdf ? iconPdf : /*#__PURE__*/React__default["default"].createElement(SvgListItemPdf, null) : fileFormat === 'jpg' ? iconJpg ? iconJpg : /*#__PURE__*/React__default["default"].createElement(SvgListItemJpg, null) : fileFormat === 'png' ? iconPng ? iconPng : /*#__PURE__*/React__default["default"].createElement(SvgListItemPng, null) : fileFormat === 'jpeg' ? iconJpeg ? iconJpeg : /*#__PURE__*/React__default["default"].createElement(SvgListItemJpeg, null) : fileFormat === 'heic' || fileFormat === 'heif' ? iconHeic ? iconHeic : /*#__PURE__*/React__default["default"].createElement(SvgHeic, null) : fileFormat === 'msword' ? iconDoc ? iconDoc : /*#__PURE__*/React__default["default"].createElement(SvgDocIcon, null) : fileFormat === 'vnd.openxmlformats-officedocument.wordprocessingml.document' ? iconDocx ? iconDocx : /*#__PURE__*/React__default["default"].createElement(SvgDocIcon, null) : ''), /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       position: 'relative',
       display: 'flex',
@@ -451,7 +472,7 @@ const FileItem = /*#__PURE__*/React.memo(({
       alignItems: 'flex-end',
       width: 'calc(100% - 82px)'
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       width: '100%',
       height: '100%',
@@ -466,7 +487,7 @@ const FileItem = /*#__PURE__*/React.memo(({
       fontFamily: progressFontFamily,
       justifyContent: 'space-between'
     }
-  }, /*#__PURE__*/React.createElement("p", {
+  }, /*#__PURE__*/React__default["default"].createElement("p", {
     style: {
       margin: '0px',
       overflow: 'hidden',
@@ -474,7 +495,7 @@ const FileItem = /*#__PURE__*/React.memo(({
       textOverflow: 'ellipsis',
       maxWidth: 'calc(100% - 56px)'
     }
-  }, name), /*#__PURE__*/React.createElement("span", null, progress, " %")), /*#__PURE__*/React.createElement("div", {
+  }, name), /*#__PURE__*/React__default["default"].createElement("span", null, progress, " %")), /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       position: 'absolute',
       left: '0px',
@@ -484,20 +505,20 @@ const FileItem = /*#__PURE__*/React.memo(({
       borderRadius: '10px',
       backgroundColor: progressTrackColor
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       height: '100%',
       borderRadius: '10px',
       width: status === 'failed' ? '100%' : progress + '%',
       backgroundColor: status === 'success' ? progressSuccessColor : status === 'failed' ? progressFailedColor : progressLoadingColor
     }
-  }))), /*#__PURE__*/React.createElement("div", {
+  }))), /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       width: '22px',
       cursor: 'pointer'
     },
     onClick: () => handleRemoveItem(uuid)
-  }, iconDelItem ? iconDelItem : /*#__PURE__*/React.createElement(SvgListItemDelete, null))));
+  }, iconDelItem ? iconDelItem : /*#__PURE__*/React__default["default"].createElement(SvgListItemDelete, null))));
 });
 
 var img$4 = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg clip-path='url(%23clip0_18850_5919)'%3e%3cpath d='M13.4695 11.9505L20.7595 4.66046C20.9234 4.46916 21.009 4.22308 20.9993 3.9714C20.9895 3.71973 20.8852 3.48099 20.7071 3.30289C20.529 3.1248 20.2903 3.02047 20.0386 3.01075C19.7869 3.00102 19.5408 3.08663 19.3495 3.25046L12.0595 10.5405L4.76954 3.24046C4.57824 3.07663 4.33217 2.99102 4.08049 3.00075C3.82881 3.01047 3.59008 3.1148 3.41198 3.29289C3.23389 3.47099 3.12955 3.70973 3.11983 3.9614C3.11011 4.21308 3.19572 4.45915 3.35954 4.65046L10.6495 11.9505L3.34954 19.2405C3.24486 19.3301 3.15984 19.4404 3.09982 19.5645C3.0398 19.6886 3.00606 19.8237 3.00075 19.9614C2.99543 20.0991 3.01863 20.2365 3.06891 20.3648C3.11918 20.4931 3.19544 20.6097 3.29289 20.7071C3.39035 20.8046 3.5069 20.8808 3.63522 20.9311C3.76355 20.9814 3.90088 21.0046 4.0386 20.9993C4.17632 20.9939 4.31145 20.9602 4.43551 20.9002C4.55958 20.8402 4.6699 20.7551 4.75954 20.6505L12.0595 13.3605L19.3495 20.6505C19.5408 20.8143 19.7869 20.8999 20.0386 20.8902C20.2903 20.8804 20.529 20.7761 20.7071 20.598C20.8852 20.4199 20.9895 20.1812 20.9993 19.9295C21.009 19.6778 20.9234 19.4318 20.7595 19.2405L13.4695 11.9505Z' fill='%231C212D'/%3e%3c/g%3e%3cdefs%3e%3cclipPath id='clip0_18850_5919'%3e%3crect width='24' height='24' fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e";
@@ -507,22 +528,19 @@ 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'
@@ -1090,6 +1108,7 @@ var packageResult = {
     timeForRemoveError: 4000,
     extentionsRowMarginTop: '40px',
     extentionsTextColor: 'black',
+    extentionsTextDots: false,
     border: {
       width: '2px',
       style: 'dashed',
@@ -1103,7 +1122,9 @@ var packageResult = {
       backgroundHidden: 'rgba(60, 57, 62, 0.4)'
     },
     label: {
+      showMore: false,
       useTooltip: false,
+      showMoreTextColor: '#2C46C1',
       color: '#4A4A4D',
       font: {
         ...fontObject
@@ -1198,6 +1219,7 @@ var packageResult = {
     maxHeight: '95vh',
     minHeight: '200px',
     radius: '14px',
+    noScroll: false,
     padding: '20px 20px 20px',
     className: '',
     alignItems: 'center',
@@ -1252,6 +1274,7 @@ var packageResult = {
   SWIPEMODAL: {
     width: '300px',
     height: '100vh',
+    noScroll: false,
     titleStyle: {
       color: '#1C212D',
       textAlign: 'left',
@@ -1503,7 +1526,7 @@ async function getPProps() {
   const projectPath = `../../../../tui.config.js`;
   async function loadComponent(componentName) {
     try {
-      const Component = await import(/* @vite-ignore */componentName);
+      const Component = await (function (t) { return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(t)); }); })(/* @vite-ignore */componentName);
       return Component.default;
     } catch (err) {
       console.error(`Error loading component: ${componentName}`);
@@ -1523,7 +1546,7 @@ async function getProps() {
   let props;
   try {
     const newProps = await getPProps();
-    props = _.merge(newProps.packageResult, newProps.projectResult);
+    props = ___default["default"].merge(newProps.packageResult, newProps.projectResult);
   } catch (error) {
     console.error('Error in getProps:', error);
   }
@@ -1581,14 +1604,14 @@ const Button = ({
     setIsHover(false);
   };
   React.useEffect(() => {
-    className && setClassProps(() => classnames(className ?? configStyles.BUTTON.className));
+    className && setClassProps(() => classnames__default["default"](className ?? configStyles.BUTTON.className));
   }, [className]);
   React.useEffect(() => {
     if (!label && !icon) {
       alert('Add icon or label props on Button component');
     }
     configStylesPromise.then(data => {
-      setClassProps(() => classnames(className ?? data.BUTTON.className));
+      setClassProps(() => classnames__default["default"](className ?? data.BUTTON.className));
       setConfigStyles(() => {
         return {
           ...data
@@ -1598,7 +1621,7 @@ const Button = ({
       console.error(error);
     });
   }, []);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, configStyles.BUTTON && /*#__PURE__*/React.createElement("button", _extends({
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, configStyles.BUTTON && /*#__PURE__*/React__default["default"].createElement("button", _extends({
     style: {
       display: 'flex',
       outline: 'none',
@@ -1628,7 +1651,7 @@ const Button = ({
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,
     className: classProps
-  }, props), !iconRightSide ? isHover && hoverIcon ? hoverIcon : icon ?? null : ' ', ' ', label && /*#__PURE__*/React.createElement("span", {
+  }, props), !iconRightSide ? isHover && hoverIcon ? hoverIcon : icon ?? null : ' ', ' ', label && /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
       marginLeft: icon && !iconRightSide ? btnIconMarginRight ? btnIconMarginRight : configStyles.BUTTON.icon.marginRight : '0px',
       marginRight: icon && iconRightSide ? btnIconMarginLeft ? btnIconMarginLeft : configStyles.BUTTON.icon.marginLeft : '0px'
@@ -1636,42 +1659,42 @@ const Button = ({
   }, label), ' ', iconRightSide ? isHover && hoverIcon ? hoverIcon : icon ?? null : ' ', !icon && !label && 'Add icon or label prop on Button component'));
 };
 Button.propTypes = {
-  type: PropTypes.string,
-  size: PropTypes.string,
-  style: PropTypes.string,
-  font: PropTypes.string,
-  icon: PropTypes.element,
-  color: PropTypes.string,
-  width: PropTypes.string,
-  outline: PropTypes.bool,
-  onClick: PropTypes.func,
-  label: PropTypes.string,
-  weight: PropTypes.string,
-  height: PropTypes.string,
-  cursor: PropTypes.string,
-  border: PropTypes.string,
-  disabled: PropTypes.bool,
-  radius: PropTypes.string,
-  padding: PropTypes.string,
-  opacity: PropTypes.number,
-  boxSizing: PropTypes.string,
-  className: PropTypes.string,
-  hoverIcon: PropTypes.element,
-  hoverColor: PropTypes.string,
-  transition: PropTypes.string,
-  contentWidth: PropTypes.bool,
-  iconRightSide: PropTypes.bool,
-  withoutStyling: PropTypes.bool,
-  textTransform: PropTypes.string,
-  disabledColor: PropTypes.string,
-  backgroundColor: PropTypes.string,
-  disabledLineColor: PropTypes.string,
-  btnIconMarginLeft: PropTypes.string,
-  btnIconMarginRight: PropTypes.string,
-  withoutStylingColor: PropTypes.string,
-  backgroundHoverColor: PropTypes.string,
-  disabledBackgroundColor: PropTypes.string,
-  withoutStylingHoverColor: PropTypes.string
+  type: PropTypes__default["default"].string,
+  size: PropTypes__default["default"].string,
+  style: PropTypes__default["default"].string,
+  font: PropTypes__default["default"].string,
+  icon: PropTypes__default["default"].element,
+  color: PropTypes__default["default"].string,
+  width: PropTypes__default["default"].string,
+  outline: PropTypes__default["default"].bool,
+  onClick: PropTypes__default["default"].func,
+  label: PropTypes__default["default"].string,
+  weight: PropTypes__default["default"].string,
+  height: PropTypes__default["default"].string,
+  cursor: PropTypes__default["default"].string,
+  border: PropTypes__default["default"].string,
+  disabled: PropTypes__default["default"].bool,
+  radius: PropTypes__default["default"].string,
+  padding: PropTypes__default["default"].string,
+  opacity: PropTypes__default["default"].number,
+  boxSizing: PropTypes__default["default"].string,
+  className: PropTypes__default["default"].string,
+  hoverIcon: PropTypes__default["default"].element,
+  hoverColor: PropTypes__default["default"].string,
+  transition: PropTypes__default["default"].string,
+  contentWidth: PropTypes__default["default"].bool,
+  iconRightSide: PropTypes__default["default"].bool,
+  withoutStyling: PropTypes__default["default"].bool,
+  textTransform: PropTypes__default["default"].string,
+  disabledColor: PropTypes__default["default"].string,
+  backgroundColor: PropTypes__default["default"].string,
+  disabledLineColor: PropTypes__default["default"].string,
+  btnIconMarginLeft: PropTypes__default["default"].string,
+  btnIconMarginRight: PropTypes__default["default"].string,
+  withoutStylingColor: PropTypes__default["default"].string,
+  backgroundHoverColor: PropTypes__default["default"].string,
+  disabledBackgroundColor: PropTypes__default["default"].string,
+  withoutStylingHoverColor: PropTypes__default["default"].string
 };
 
 const SvgSvg = ({
@@ -1830,8 +1853,8 @@ function styleInject(css, ref) {
   }
 }
 
-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"};
+var css_248z$c = ".file-module_small-file-component__nlpcW>svg{max-height:77%!important}.file-module_show-more-text__WIGLx{align-self:self-end;cursor:pointer}";
+var styles$b = {"small-file-component":"file-module_small-file-component__nlpcW","show-more-text":"file-module_show-more-text__WIGLx"};
 styleInject(css_248z$c);
 
 // eslint-disable-next-line react/display-name
@@ -1865,6 +1888,10 @@ const File = /*#__PURE__*/React.forwardRef(({
   labelStyle,
   labelWeight,
   labelFamily,
+  lableShowMore,
+  labelShowLessText,
+  labelShowMoreText,
+  showMoreTextColor,
   useLabelTooltip,
   labelTooltipColor,
   labelTooltipPadding,
@@ -1943,6 +1970,7 @@ const File = /*#__PURE__*/React.forwardRef(({
   maxCHoosenLengthErrorHideTime,
   textAlignLeftInSmallComponent,
   showPreviewIconInSmallComponent,
+  extentionsTextDots,
   extentionsTextColor,
   maxSize = 10,
   preview = true,
@@ -1956,6 +1984,7 @@ const File = /*#__PURE__*/React.forwardRef(({
   const [error, setError] = React.useState('');
   const [removeID, setRemoveID] = React.useState('');
   const [isHover, setIsHover] = React.useState(false);
+  const [showMore, setShowMore] = React.useState(false);
   const [classProps, setClassProps] = React.useState({});
   const [singleFile, setSingleFile] = React.useState(null);
   const [configStyles, setConfigStyles] = React.useState({});
@@ -2311,6 +2340,21 @@ const File = /*#__PURE__*/React.forwardRef(({
     }
     setRemoveID(() => '');
   };
+  const handleCheckTextWidth = () => {
+    if (labelRef.current) {
+      const rect = labelRef.current.getBoundingClientRect();
+      const elementWidth = rect.width;
+      const textWidth = getRenderedTextWidth(labelRef.current);
+      if (textWidth > Math.ceil(elementWidth)) {
+        return 'more';
+      } else {
+        return 'less';
+      }
+    }
+  };
+  const handleChangeShowMore = () => {
+    setShowMore(() => !showMore);
+  };
   React.useImperativeHandle(ref, () => ({
     handleReset() {
       setError('');
@@ -2364,11 +2408,20 @@ const File = /*#__PURE__*/React.forwardRef(({
     }
   }, [change]);
   React.useEffect(() => {
-    className && setClassProps(() => classnames(className ?? configStyles.FILE.className));
+    className && setClassProps(() => classnames__default["default"](className ?? configStyles.FILE.className));
   }, [className]);
+  React.useEffect(() => {
+    if ((useLabelTooltip || configStyles.FILE?.label?.useTooltip) && (lableShowMore || configStyles.FILE?.label?.showMore)) {
+      alert(`
+                        Please use one of this props or config,
+                        use ( useLabelTooltip / configStyles.FILE.label.useTooltip )
+                        or ( lableShowMore / configStyles.FILE.label.showMore )
+                    `);
+    }
+  }, [lableShowMore, useLabelTooltip, configStyles.FILE?.label?.useTooltip, configStyles.FILE?.label?.showMore]);
   React.useEffect(() => {
     configStylesPromise.then(data => {
-      setClassProps(() => classnames(className ?? data.FILE.className));
+      setClassProps(() => classnames__default["default"](className ?? data.FILE.className));
       setConfigStyles(() => {
         return {
           ...data
@@ -2383,29 +2436,30 @@ const File = /*#__PURE__*/React.forwardRef(({
       }
     };
   }, []);
-  return configStyles.FILE && /*#__PURE__*/React.createElement("div", {
+  return configStyles.FILE && /*#__PURE__*/React__default["default"].createElement("div", {
     ref: parentRef,
     style: {
       width: '100%',
       maxWidth: maxWidth ?? configStyles.FILE.maxWidth
     },
     className: classProps
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       display: 'flex',
       marginBottom: '6px',
       alignItems: 'center',
-      justifyContent: label ? 'space-between' : 'flex-end'
+      justifyContent: label ? 'space-between' : 'flex-end',
+      width: deleteComponent && useLabelTooltip && handleCheckTextWidth() === 'more' ? 'calc(100% - 26px)' : '100%'
     }
-  }, label && /*#__PURE__*/React.createElement("div", {
+  }, label && /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       display: 'flex',
       maxWidth: '100%',
-      width: 'fit-content',
       columnGap: '4px',
+      width: 'fit-content',
       justifyContent: 'flex-start'
     }
-  }, /*#__PURE__*/React.createElement("label", {
+  }, /*#__PURE__*/React__default["default"].createElement("label", {
     ref: labelRef,
     style: {
       width: '100%',
@@ -2414,18 +2468,28 @@ const File = /*#__PURE__*/React.forwardRef(({
       fontStyle: labelStyle ?? configStyles.FILE.label.font.style,
       fontWeight: labelWeight ?? configStyles.FILE.label.font.weight,
       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' : ''
+      whiteSpace: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.FILE.label.useTooltip) || (lableShowMore ? lableShowMore : (lableShowMore === null || lableShowMore === undefined) && configStyles.FILE.label.showMore) && !showMore ? 'nowrap' : 'normal',
+      overflow: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.FILE.label.useTooltip) || (lableShowMore ? lableShowMore : (lableShowMore === null || lableShowMore === undefined) && configStyles.FILE.label.showMore) && !showMore ? 'hidden' : 'visible',
+      textOverflow: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.FILE.label.useTooltip) || (lableShowMore ? lableShowMore : (lableShowMore === null || lableShowMore === undefined) && configStyles.FILE.label.showMore) && !showMore ? 'ellipsis' : ''
     },
-    onMouseEnter: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.FILE.label.useTooltip) ? handleLabelMouseEnter : _ => _,
-    onMouseLeave: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.FILE.label.useTooltip) ? handleLabelMouseLeave : _ => _
-  }, label), required && /*#__PURE__*/React.createElement("sup", null, iconRequired ? iconRequired : configStyles.FILE.icon.required ? configStyles.FILE.icon.required : /*#__PURE__*/React.createElement(SvgRequired, null))), deleteComponent && /*#__PURE__*/React.createElement("span", {
+    onMouseEnter: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.FILE.label.useTooltip) && !lableShowMore && !configStyles.FILE.label.showMore ? handleLabelMouseEnter : _ => _,
+    onMouseLeave: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.FILE.label.useTooltip) && !lableShowMore && !configStyles.FILE.label.showMore ? handleLabelMouseLeave : _ => _
+  }, label), required && /*#__PURE__*/React__default["default"].createElement("sup", null, iconRequired ? iconRequired : configStyles.FILE.icon.required ? configStyles.FILE.icon.required : /*#__PURE__*/React__default["default"].createElement(SvgRequired, null)), lableShowMore || configStyles.FILE.label.showMore ? /*#__PURE__*/React__default["default"].createElement("span", {
+    className: styles$b['show-more-text'],
+    style: {
+      fontSize: labelSize ?? configStyles.FILE.label.font.size,
+      fontStyle: labelStyle ?? configStyles.FILE.label.font.style,
+      fontWeight: labelWeight ?? configStyles.FILE.label.font.weight,
+      fontFamily: labelFamily ?? configStyles.FILE.label.font.family,
+      color: showMoreTextColor ?? configStyles.FILE.label.showMoreTextColor
+    },
+    onClick: handleChangeShowMore
+  }, showMore ? labelShowLessText ? labelShowLessText : '' : labelShowMoreText ? labelShowMoreText : '') : ''), deleteComponent && /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
       cursor: 'pointer'
     },
     onClick: handleRemoveComponent
-  }, iconDeleteComponent ? iconDeleteComponent : configStyles.FILE.icon.deleteComponent ? configStyles.FILE.icon.deleteComponent : /*#__PURE__*/React.createElement(SvgDeleteComponent, null))), /*#__PURE__*/React.createElement("div", {
+  }, iconDeleteComponent ? iconDeleteComponent : configStyles.FILE.icon.deleteComponent ? configStyles.FILE.icon.deleteComponent : /*#__PURE__*/React__default["default"].createElement(SvgDeleteComponent, null))), /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       width: '100%',
       display: 'flex',
@@ -2446,7 +2510,7 @@ const File = /*#__PURE__*/React.forwardRef(({
     onDragOver: handleDragOver,
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave
-  }, /*#__PURE__*/React.createElement("input", {
+  }, /*#__PURE__*/React__default["default"].createElement("input", {
     hidden: true,
     name: name,
     type: "file",
@@ -2454,7 +2518,7 @@ const File = /*#__PURE__*/React.forwardRef(({
     disabled: disabled,
     multiple: multiple,
     onChange: handleChange
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       width: '100%',
       height: '100%',
@@ -2469,7 +2533,7 @@ const File = /*#__PURE__*/React.forwardRef(({
       fontFamily: family ?? configStyles.FILE.font.family,
       fontWeight: weight ?? configStyles.FILE.font.weight
     }
-  }, !multiple && image && preview ? image === 'svg' ? iconSvg ? iconSvg : configStyles.FILE.icon.svg ? configStyles.FILE.icon.svg : /*#__PURE__*/React.createElement(SvgSvg, null) : image === 'pdf' ? iconPdf ? iconPdf : configStyles.FILE.icon.pdf ? configStyles.FILE.icon.pdf : /*#__PURE__*/React.createElement(SvgPdf, null) : image === 'heif' || image === 'heic' ? iconHeic ? iconHeic : configStyles.FILE.icon.heic ? configStyles.FILE.icon.heic : /*#__PURE__*/React.createElement(SvgHeic, null) : image === 'doc' ? iconDoc ? iconDoc : configStyles.FILE.icon.doc ? configStyles.FILE.icon.doc : /*#__PURE__*/React.createElement(SvgDocIcon, null) : image === 'docx' ? iconDocx ? iconDocx : configStyles.FILE.icon.docx ? configStyles.FILE.icon.docx : /*#__PURE__*/React.createElement(SvgDocIcon, null) : /*#__PURE__*/React.createElement("img", {
+  }, !multiple && image && preview ? image === 'svg' ? iconSvg ? iconSvg : configStyles.FILE.icon.svg ? configStyles.FILE.icon.svg : /*#__PURE__*/React__default["default"].createElement(SvgSvg, null) : image === 'pdf' ? iconPdf ? iconPdf : configStyles.FILE.icon.pdf ? configStyles.FILE.icon.pdf : /*#__PURE__*/React__default["default"].createElement(SvgPdf, null) : image === 'heif' || image === 'heic' ? iconHeic ? iconHeic : configStyles.FILE.icon.heic ? configStyles.FILE.icon.heic : /*#__PURE__*/React__default["default"].createElement(SvgHeic, null) : image === 'doc' ? iconDoc ? iconDoc : configStyles.FILE.icon.doc ? configStyles.FILE.icon.doc : /*#__PURE__*/React__default["default"].createElement(SvgDocIcon, null) : image === 'docx' ? iconDocx ? iconDocx : configStyles.FILE.icon.docx ? configStyles.FILE.icon.docx : /*#__PURE__*/React__default["default"].createElement(SvgDocIcon, null) : /*#__PURE__*/React__default["default"].createElement("img", {
     src: image,
     style: {
       display: 'block',
@@ -2480,25 +2544,33 @@ const File = /*#__PURE__*/React.forwardRef(({
       height: fileAreaImageHeight ?? configStyles.FILE.fileAreaImageHeight
     },
     alt: "file preview"
-  }) : preview ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, iconUpload ? iconUpload : configStyles.FILE.icon.upload ? configStyles.FILE.icon.upload : /*#__PURE__*/React.createElement(SvgUpload, null)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", {
+  }) : preview ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", null, iconUpload ? iconUpload : configStyles.FILE.icon.upload ? configStyles.FILE.icon.upload : /*#__PURE__*/React__default["default"].createElement(SvgUpload, null)), /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("p", {
     style: {
       margin: '0px'
     }
-  }, putFileHere ?? configStyles.FILE.putFileHere, /*#__PURE__*/React.createElement("br", null), or ? or : configStyles.FILE.or, ' ', /*#__PURE__*/React.createElement("span", {
+  }, putFileHere ?? configStyles.FILE.putFileHere, /*#__PURE__*/React__default["default"].createElement("br", null), or ? or : configStyles.FILE.or, ' ', /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
       color: uploadColor ?? configStyles.FILE.uploadColor
     }
-  }, upload ?? configStyles.FILE.upload))), /*#__PURE__*/React.createElement("div", {
+  }, upload ?? configStyles.FILE.upload))), /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
+      maxWidth: '100%',
       marginTop: extentionsRowMarginTop ?? configStyles.FILE.extentionsRowMarginTop
     }
-  }, /*#__PURE__*/React.createElement("p", {
+  }, /*#__PURE__*/React__default["default"].createElement("p", {
     style: {
       margin: '0px',
       padding: '0px 10px',
+      color: color ?? configStyles.FILE.color,
+      whiteSpace: extentionsTextDots || configStyles.FILE.extentionsTextDots ? 'nowrap' : 'normal',
+      overflow: extentionsTextDots || configStyles.FILE.extentionsTextDots ? 'hidden' : 'visible',
+      textOverflow: extentionsTextDots || configStyles.FILE.extentionsTextDots ? 'ellipsis' : ''
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, fileSizeText ?? configStyles.FILE.sizeText, " ", maxSize, " \u0544\u0532", /*#__PURE__*/React__default["default"].createElement("span", {
+    style: {
       color: extentionsTextColor ?? configStyles.FILE.extentionsTextColor
     }
-  }, fileSizeText ?? configStyles.FILE.sizeText, " ", maxSize, " \u0544\u0532 (", ' ', fileExtensions.toString().split(',').join(', '), " )"))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+  }, "(", ' ', " ", fileExtensions.toString().split(',').join(', '), ")"))))) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles$b['small-file-component'],
     style: {
       width: '100%',
@@ -2508,7 +2580,7 @@ const File = /*#__PURE__*/React.forwardRef(({
       boxSizing: 'border-box',
       justifyContent: textAlignLeftInSmallComponent ? 'flex-start' : 'space-between'
     }
-  }, showPreviewIconInSmallComponent ? !image ? /*#__PURE__*/React.createElement(Button, {
+  }, showPreviewIconInSmallComponent ? !image ? /*#__PURE__*/React__default["default"].createElement(Button, {
     contentWidth: true,
     onClick: _ => _,
     font: uploadBtnFont ?? configStyles.FILE.uploadBtn.font.family,
@@ -2521,7 +2593,7 @@ const File = /*#__PURE__*/React.forwardRef(({
     hoverColor: uploadBtnHoverColor ?? configStyles.FILE.uploadBtn.colors.hover,
     backgroundColor: uploadBtnBackgroundColor ?? configStyles.FILE.uploadBtn.colors.background,
     backgroundHoverColor: uploadBtnBackgroundColorHover ?? configStyles.FILE.uploadBtn.colors.backgroundHover
-  }) : image === 'svg' ? iconSvg ? iconSvg : configStyles.FILE.icon.svg ? configStyles.FILE.icon.svg : /*#__PURE__*/React.createElement(SvgSvg, null) : image === 'pdf' ? iconPdf ? iconPdf : configStyles.FILE.icon.pdf ? configStyles.FILE.icon.pdf : /*#__PURE__*/React.createElement(SvgPdf, null) : image === 'heif' || image === 'heic' ? iconHeic ? iconHeic : configStyles.FILE.icon.heic ? configStyles.FILE.icon.heic : /*#__PURE__*/React.createElement(SvgHeic, null) : image === 'doc' ? iconDoc ? iconDoc : configStyles.FILE.icon.doc ? configStyles.FILE.icon.doc : /*#__PURE__*/React.createElement(SvgDocIcon, null) : image === 'docx' ? iconDocx ? iconDocx : configStyles.FILE.icon.docx ? configStyles.FILE.icon.docx : /*#__PURE__*/React.createElement(SvgDocIcon, null) : singleFile[0].type === 'image/jpeg' ? iconJpeg ? iconJpeg : configStyles.FILE.icon.jpeg ? configStyles.FILE.icon.jpeg : /*#__PURE__*/React.createElement(SvgListItemJpeg, null) : singleFile[0].type === 'image/png' ? iconPng ? iconPng : configStyles.FILE.icon.png ? configStyles.FILE.icon.png : /*#__PURE__*/React.createElement(SvgListItemPng, null) : singleFile[0].type === 'image/jpg' ? iconJpeg ? iconJpg : configStyles.FILE.icon.jpg ? configStyles.FILE.icon.jpg : /*#__PURE__*/React.createElement(SvgListItemJpg, null) : '' : /*#__PURE__*/React.createElement(Button, {
+  }) : image === 'svg' ? iconSvg ? iconSvg : configStyles.FILE.icon.svg ? configStyles.FILE.icon.svg : /*#__PURE__*/React__default["default"].createElement(SvgSvg, null) : image === 'pdf' ? iconPdf ? iconPdf : configStyles.FILE.icon.pdf ? configStyles.FILE.icon.pdf : /*#__PURE__*/React__default["default"].createElement(SvgPdf, null) : image === 'heif' || image === 'heic' ? iconHeic ? iconHeic : configStyles.FILE.icon.heic ? configStyles.FILE.icon.heic : /*#__PURE__*/React__default["default"].createElement(SvgHeic, null) : image === 'doc' ? iconDoc ? iconDoc : configStyles.FILE.icon.doc ? configStyles.FILE.icon.doc : /*#__PURE__*/React__default["default"].createElement(SvgDocIcon, null) : image === 'docx' ? iconDocx ? iconDocx : configStyles.FILE.icon.docx ? configStyles.FILE.icon.docx : /*#__PURE__*/React__default["default"].createElement(SvgDocIcon, null) : singleFile[0].type === 'image/jpeg' ? iconJpeg ? iconJpeg : configStyles.FILE.icon.jpeg ? configStyles.FILE.icon.jpeg : /*#__PURE__*/React__default["default"].createElement(SvgListItemJpeg, null) : singleFile[0].type === 'image/png' ? iconPng ? iconPng : configStyles.FILE.icon.png ? configStyles.FILE.icon.png : /*#__PURE__*/React__default["default"].createElement(SvgListItemPng, null) : singleFile[0].type === 'image/jpg' ? iconJpeg ? iconJpg : configStyles.FILE.icon.jpg ? configStyles.FILE.icon.jpg : /*#__PURE__*/React__default["default"].createElement(SvgListItemJpg, null) : '' : /*#__PURE__*/React__default["default"].createElement(Button, {
     contentWidth: true,
     onClick: _ => _,
     font: uploadBtnFont ?? configStyles.FILE.uploadBtn.font.family,
@@ -2534,17 +2606,20 @@ const File = /*#__PURE__*/React.forwardRef(({
     hoverColor: uploadBtnHoverColor ?? configStyles.FILE.uploadBtn.colors.hover,
     backgroundColor: uploadBtnBackgroundColor ?? configStyles.FILE.uploadBtn.colors.background,
     backgroundHoverColor: uploadBtnBackgroundColorHover ?? configStyles.FILE.uploadBtn.colors.backgroundHover
-  }), /*#__PURE__*/React.createElement("p", {
+  }), /*#__PURE__*/React__default["default"].createElement("p", {
     style: {
       margin: '0px',
       padding: '0px 10px',
-      color: extentionsTextColor ?? configStyles.FILE.extentionsTextColor
+      color: color ?? configStyles.FILE.color,
+      whiteSpace: extentionsTextDots || configStyles.FILE.extentionsTextDots ? 'nowrap' : 'normal',
+      overflow: extentionsTextDots || configStyles.FILE.extentionsTextDots ? 'hidden' : 'visible',
+      textOverflow: extentionsTextDots || configStyles.FILE.extentionsTextDots ? 'ellipsis' : ''
     }
-  }, singleFile && singleFile[`${0}`] ? singleFile[`${0}`].name : /*#__PURE__*/React.createElement("span", {
+  }, singleFile && singleFile[`${0}`] ? singleFile[`${0}`].name : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, fileSizeText ?? configStyles.FILE.sizeText, " ", maxSize, " \u0544\u0532", /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
-      color: color ?? configStyles.FILE.color
+      color: extentionsTextColor ?? configStyles.FILE.extentionsTextColor
     }
-  }, fileSizeText ?? configStyles.FILE.sizeText, " ", maxSize, " \u0544\u0532 (", ' ', fileExtensions.toString().split(',').join(', '), " )"))))), /*#__PURE__*/React.createElement("div", {
+  }, "(", ' ', " ", fileExtensions.toString().split(',').join(', '), ")")))))), /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       position: 'absolute',
       top: '0px',
@@ -2562,12 +2637,12 @@ const File = /*#__PURE__*/React.forwardRef(({
       backgroundColor: hiddenBackgroundColor ?? configStyles.FILE.colors.backgroundHidden
     },
     onClick: handleStopPropagation
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       cursor: 'pointer'
     },
     onClick: handleRemoveFile
-  }, iconRemoveFile ? iconRemoveFile : configStyles.FILE.icon.removeFile ? configStyles.FILE.icon.removeFile : /*#__PURE__*/React.createElement(SvgRemoveFile, null)))), error ? /*#__PURE__*/React.createElement("span", {
+  }, iconRemoveFile ? iconRemoveFile : configStyles.FILE.icon.removeFile ? configStyles.FILE.icon.removeFile : /*#__PURE__*/React__default["default"].createElement(SvgRemoveFile, null)))), error ? /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
       marginTop: '6px',
       color: errorColor ?? configStyles.FILE.error.color,
@@ -2580,7 +2655,7 @@ const File = /*#__PURE__*/React.forwardRef(({
       display: errorIconShow && (errorIcon || configStyles.FILE.error?.icon) ? 'inline-flex' : 'inline-block'
     }
   }, errorIconShow ? errorIcon ? errorIcon : configStyles.FILE.error?.icon ? configStyles.FILE.error?.icon : '' : '', error) : '', multiple && memoizedItems && memoizedItems.length > 0 && memoizedItems.map(item => {
-    return /*#__PURE__*/React.createElement(FileItem, {
+    return /*#__PURE__*/React__default["default"].createElement(FileItem, {
       key: item.uuid,
       uuid: item.uuid,
       check: item.check,
@@ -2623,115 +2698,120 @@ const File = /*#__PURE__*/React.forwardRef(({
   }));
 });
 File.propTypes = {
-  or: PropTypes.string,
-  size: PropTypes.string,
-  preview: PropTypes.bool,
-  label: PropTypes.string,
-  color: PropTypes.string,
-  height: PropTypes.string,
-  disabled: PropTypes.bool,
-  radius: PropTypes.string,
-  borderWidth: PropTypes.string,
-  borderStyle: PropTypes.string,
-  borderColor: PropTypes.string,
-  required: PropTypes.bool,
-  upload: PropTypes.string,
-  weight: PropTypes.number,
-  style: PropTypes.string,
-  family: PropTypes.string,
-  maxSize: PropTypes.number,
-  maxWidth: PropTypes.string,
-  removeFile: PropTypes.func,
-  className: PropTypes.string,
-  errorSize: PropTypes.string,
-  errorStyle: PropTypes.string,
-  errorWeight: PropTypes.string,
-  errorFamily: PropTypes.string,
-  labelSize: PropTypes.string,
-  labelStyle: PropTypes.string,
-  labelWeight: PropTypes.string,
-  labelFamily: PropTypes.string,
-  labelColor: 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,
-  errorColor: PropTypes.string,
-  formatError: PropTypes.string,
-  putFileHere: PropTypes.string,
-  uploadColor: PropTypes.string,
-  defaultData: PropTypes.object,
-  componentId: PropTypes.number,
-  maxSizeError: PropTypes.string,
-  errorIcon: PropTypes.element,
-  errorIconShow: PropTypes.bool,
-  errorMessage: PropTypes.string,
-  fileSizeText: PropTypes.string,
-  noChoosenFile: PropTypes.string,
-  progressColor: PropTypes.string,
-  deleteComponent: PropTypes.bool,
-  removeComponent: PropTypes.func,
-  iconSvg: PropTypes.element,
-  iconPdf: PropTypes.element,
-  iconDoc: PropTypes.element,
-  iconPng: PropTypes.element,
-  iconJpg: PropTypes.element,
-  iconDocx: PropTypes.element,
-  iconJpeg: PropTypes.element,
-  iconHeic: PropTypes.element,
-  iconWrong: PropTypes.element,
-  iconUpload: PropTypes.element,
-  iconRequired: PropTypes.element,
-  iconDeleteItem: PropTypes.element,
-  iconRemoveFile: PropTypes.element,
-  iconDeleteComponent: PropTypes.element,
-  uploadBtnFont: PropTypes.string,
-  uploadBtnSize: PropTypes.string,
-  uploadBtnStyle: PropTypes.string,
-  uploadBtnWeight: PropTypes.string,
-  uploadBtnLabel: PropTypes.string,
-  uploadBtnColor: PropTypes.string,
-  uploadBtnHeight: PropTypes.string,
-  uploadBtnBackgroundColor: PropTypes.string,
-  uploadBtnBackgroundColorHover: PropTypes.string,
-  listItemHeight: PropTypes.string,
-  backgroundColor: PropTypes.string,
-  change: PropTypes.func.isRequired,
-  listItemPadding: PropTypes.string,
-  maxCHoosenLength: PropTypes.number,
-  progressFontSize: PropTypes.string,
-  progressFontStyle: PropTypes.string,
-  progressFontWeight: PropTypes.string,
-  progressFontFamily: PropTypes.string,
-  borderHoverColor: PropTypes.string,
-  listItemErrorSize: PropTypes.string,
-  listItemErrorStyle: PropTypes.string,
-  listItemErrorWeight: PropTypes.string,
-  listItemErrorFamily: PropTypes.string,
-  timeForRemoveError: PropTypes.number,
-  progressTrackColor: PropTypes.string,
-  fileAreaImageWidth: PropTypes.string,
-  listItemErrorColor: PropTypes.string,
-  fileAreaImageHeight: PropTypes.string,
-  progressFailedColor: PropTypes.string,
-  progressSuccessColor: PropTypes.string,
-  progressLoadingColor: PropTypes.string,
-  hiddenBackgroundColor: PropTypes.string,
-  maxCHoosenLengthError: PropTypes.string,
-  extentionsRowMarginTop: PropTypes.string,
-  listItemBackgroundColor: PropTypes.string,
-  listItemBackgroundErrorColor: PropTypes.string,
-  maxCHoosenLengthErrorHideTime: PropTypes.number,
-  filesArray: PropTypes.arrayOf(PropTypes.object),
-  textAlignLeftInSmallComponent: PropTypes.bool,
-  showPreviewIconInSmallComponent: PropTypes.bool,
-  fileExtensions: PropTypes.arrayOf(PropTypes.string),
-  extentionsTextColor: PropTypes.string
+  or: PropTypes__default["default"].string,
+  size: PropTypes__default["default"].string,
+  preview: PropTypes__default["default"].bool,
+  label: PropTypes__default["default"].string,
+  color: PropTypes__default["default"].string,
+  height: PropTypes__default["default"].string,
+  disabled: PropTypes__default["default"].bool,
+  radius: PropTypes__default["default"].string,
+  borderWidth: PropTypes__default["default"].string,
+  borderStyle: PropTypes__default["default"].string,
+  borderColor: PropTypes__default["default"].string,
+  required: PropTypes__default["default"].bool,
+  upload: PropTypes__default["default"].string,
+  weight: PropTypes__default["default"].number,
+  style: PropTypes__default["default"].string,
+  family: PropTypes__default["default"].string,
+  maxSize: PropTypes__default["default"].number,
+  maxWidth: PropTypes__default["default"].string,
+  removeFile: PropTypes__default["default"].func,
+  className: PropTypes__default["default"].string,
+  errorSize: PropTypes__default["default"].string,
+  errorStyle: PropTypes__default["default"].string,
+  errorWeight: PropTypes__default["default"].string,
+  errorFamily: PropTypes__default["default"].string,
+  labelSize: PropTypes__default["default"].string,
+  labelStyle: PropTypes__default["default"].string,
+  labelWeight: PropTypes__default["default"].string,
+  labelFamily: PropTypes__default["default"].string,
+  labelColor: PropTypes__default["default"].string,
+  lableShowMore: PropTypes__default["default"].bool,
+  labelShowLessText: PropTypes__default["default"].string,
+  labelShowMoreText: PropTypes__default["default"].string,
+  showMoreTextColor: PropTypes__default["default"].string,
+  useLabelTooltip: PropTypes__default["default"].bool,
+  labelTooltipColor: PropTypes__default["default"].string,
+  labelTooltipPadding: PropTypes__default["default"].string,
+  labelTooltipFontSize: PropTypes__default["default"].string,
+  labelTooltipFontStyle: PropTypes__default["default"].string,
+  labelTooltipFontFamily: PropTypes__default["default"].string,
+  labelTooltipFontWeight: PropTypes__default["default"].string,
+  labelTooltipBorderRadius: PropTypes__default["default"].string,
+  labelTooltipBackgroundColor: PropTypes__default["default"].string,
+  errorColor: PropTypes__default["default"].string,
+  formatError: PropTypes__default["default"].string,
+  putFileHere: PropTypes__default["default"].string,
+  uploadColor: PropTypes__default["default"].string,
+  defaultData: PropTypes__default["default"].object,
+  componentId: PropTypes__default["default"].number,
+  maxSizeError: PropTypes__default["default"].string,
+  errorIcon: PropTypes__default["default"].element,
+  errorIconShow: PropTypes__default["default"].bool,
+  errorMessage: PropTypes__default["default"].string,
+  fileSizeText: PropTypes__default["default"].string,
+  noChoosenFile: PropTypes__default["default"].string,
+  progressColor: PropTypes__default["default"].string,
+  deleteComponent: PropTypes__default["default"].bool,
+  removeComponent: PropTypes__default["default"].func,
+  iconSvg: PropTypes__default["default"].element,
+  iconPdf: PropTypes__default["default"].element,
+  iconDoc: PropTypes__default["default"].element,
+  iconPng: PropTypes__default["default"].element,
+  iconJpg: PropTypes__default["default"].element,
+  iconDocx: PropTypes__default["default"].element,
+  iconJpeg: PropTypes__default["default"].element,
+  iconHeic: PropTypes__default["default"].element,
+  iconWrong: PropTypes__default["default"].element,
+  iconUpload: PropTypes__default["default"].element,
+  iconRequired: PropTypes__default["default"].element,
+  iconDeleteItem: PropTypes__default["default"].element,
+  iconRemoveFile: PropTypes__default["default"].element,
+  iconDeleteComponent: PropTypes__default["default"].element,
+  uploadBtnFont: PropTypes__default["default"].string,
+  uploadBtnSize: PropTypes__default["default"].string,
+  uploadBtnStyle: PropTypes__default["default"].string,
+  uploadBtnWeight: PropTypes__default["default"].string,
+  uploadBtnLabel: PropTypes__default["default"].string,
+  uploadBtnColor: PropTypes__default["default"].string,
+  uploadBtnHeight: PropTypes__default["default"].string,
+  uploadBtnBackgroundColor: PropTypes__default["default"].string,
+  uploadBtnBackgroundColorHover: PropTypes__default["default"].string,
+  listItemHeight: PropTypes__default["default"].string,
+  backgroundColor: PropTypes__default["default"].string,
+  change: PropTypes__default["default"].func.isRequired,
+  listItemPadding: PropTypes__default["default"].string,
+  maxCHoosenLength: PropTypes__default["default"].number,
+  progressFontSize: PropTypes__default["default"].string,
+  progressFontStyle: PropTypes__default["default"].string,
+  progressFontWeight: PropTypes__default["default"].string,
+  progressFontFamily: PropTypes__default["default"].string,
+  borderHoverColor: PropTypes__default["default"].string,
+  listItemErrorSize: PropTypes__default["default"].string,
+  listItemErrorStyle: PropTypes__default["default"].string,
+  listItemErrorWeight: PropTypes__default["default"].string,
+  listItemErrorFamily: PropTypes__default["default"].string,
+  timeForRemoveError: PropTypes__default["default"].number,
+  progressTrackColor: PropTypes__default["default"].string,
+  fileAreaImageWidth: PropTypes__default["default"].string,
+  listItemErrorColor: PropTypes__default["default"].string,
+  fileAreaImageHeight: PropTypes__default["default"].string,
+  progressFailedColor: PropTypes__default["default"].string,
+  progressSuccessColor: PropTypes__default["default"].string,
+  progressLoadingColor: PropTypes__default["default"].string,
+  hiddenBackgroundColor: PropTypes__default["default"].string,
+  maxCHoosenLengthError: PropTypes__default["default"].string,
+  extentionsRowMarginTop: PropTypes__default["default"].string,
+  listItemBackgroundColor: PropTypes__default["default"].string,
+  listItemBackgroundErrorColor: PropTypes__default["default"].string,
+  maxCHoosenLengthErrorHideTime: PropTypes__default["default"].number,
+  filesArray: PropTypes__default["default"].arrayOf(PropTypes__default["default"].object),
+  textAlignLeftInSmallComponent: PropTypes__default["default"].bool,
+  showPreviewIconInSmallComponent: PropTypes__default["default"].bool,
+  fileExtensions: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
+  extentionsTextDots: PropTypes__default["default"].bool,
+  extentionsTextColor: PropTypes__default["default"].string
 };
 
 const hasOwnerProperty = (object, property) => {
@@ -2768,7 +2848,11 @@ 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('.')) {
@@ -2905,7 +2989,7 @@ const Checkbox$1 = ({
       alert('Please set index value as valid number');
     }
   }, [innerIndex]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       width: label ? 'fit-content' : '16px',
       height: '16px',
@@ -2915,11 +2999,11 @@ const Checkbox$1 = ({
       ...styles
     },
     onClick: !innerDisabled && handleChecked ? handleClick : _ => _
-  }, innerChecked && (ignoreDisabledForChecked ?? !innerDisabled) ? checkedIcon ? checkedIcon : /*#__PURE__*/React.createElement(SvgCheckboxChecked, {
+  }, innerChecked && (ignoreDisabledForChecked ?? !innerDisabled) ? checkedIcon ? checkedIcon : /*#__PURE__*/React__default["default"].createElement(SvgCheckboxChecked, {
     fillColor: checkedColor
-  }) : unCheckedIcon ? unCheckedIcon : /*#__PURE__*/React.createElement(SvgCheckboxUnchecked, {
+  }) : unCheckedIcon ? unCheckedIcon : /*#__PURE__*/React__default["default"].createElement(SvgCheckboxUnchecked, {
     fillColor: unCheckedColor
-  }), label && /*#__PURE__*/React.createElement("span", {
+  }), label && /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
       marginLeft: labelMarginLeft
     }
@@ -2958,7 +3042,7 @@ const SingleCheckbox = ({
       console.error(error);
     });
   }, []);
-  return configStyles.CHECKBOX && /*#__PURE__*/React.createElement(Checkbox$1, {
+  return configStyles.CHECKBOX && /*#__PURE__*/React__default["default"].createElement(Checkbox$1, {
     index: index,
     label: label,
     styles: styles,
@@ -2976,19 +3060,19 @@ const SingleCheckbox = ({
   });
 };
 SingleCheckbox.propTypes = {
-  data: PropTypes.object,
-  label: PropTypes.string,
-  onClick: PropTypes.func,
-  index: PropTypes.number,
-  styles: PropTypes.object,
-  disabled: PropTypes.bool,
-  innerIndex: PropTypes.number,
-  checkedColor: PropTypes.string,
-  checkedIcon: PropTypes.element,
-  unCheckedIcon: PropTypes.element,
-  unCheckedColor: PropTypes.string,
-  labelMarginLeft: PropTypes.string,
-  ignoreDisabledForChecked: PropTypes.bool
+  data: PropTypes__default["default"].object,
+  label: PropTypes__default["default"].string,
+  onClick: PropTypes__default["default"].func,
+  index: PropTypes__default["default"].number,
+  styles: PropTypes__default["default"].object,
+  disabled: PropTypes__default["default"].bool,
+  innerIndex: PropTypes__default["default"].number,
+  checkedColor: PropTypes__default["default"].string,
+  checkedIcon: PropTypes__default["default"].element,
+  unCheckedIcon: PropTypes__default["default"].element,
+  unCheckedColor: PropTypes__default["default"].string,
+  labelMarginLeft: PropTypes__default["default"].string,
+  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%}";
@@ -3018,7 +3102,7 @@ const TH = ({
       handleCheckArrowActionHeader(e, object);
     }
   };
-  return /*#__PURE__*/React.createElement("th", {
+  return /*#__PURE__*/React__default["default"].createElement("th", {
     style: {
       width: 'auto',
       cursor: 'pointer',
@@ -3036,20 +3120,20 @@ const TH = ({
     },
     onClick: handleHeaderItemClick,
     className: `${hasOwnerProperty(item, 'sortingArrows') ? item.sortingArrows === true ? styles$a['sorting-arrows'] : '' : ''}`
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       display: 'flex',
       alignItems: 'flex-start',
       justifyContent: hasOwnerProperty(item, 'checkBox') ? 'space-between' : tHeadTextAlign ? tHeadTextAlign === 'left' ? 'flex-start' : tHeadTextAlign === 'right' ? 'flex-end' : 'center' : 'center'
     }
-  }, hasOwnerProperty(item, 'checkBox') ? /*#__PURE__*/React.createElement(SingleCheckbox, {
+  }, hasOwnerProperty(item, 'checkBox') ? /*#__PURE__*/React__default["default"].createElement(SingleCheckbox, {
     data: item,
     checked: item.checkBox.checked,
     disabled: item.checkBox.disabled,
     handleChecked: !item.checkBox.disabled ? handleCheckedHeader : _ => _,
     checkedColor: item.checkBox.checkedColor ? item.checkBox.checkedColor : '',
     unCheckedColor: item.checkBox.unCheckedColor ? item.checkBox.unCheckedColor : ''
-  }) : '', /*#__PURE__*/React.createElement("p", {
+  }) : '', /*#__PURE__*/React__default["default"].createElement("p", {
     style: {
       margin: '0px',
       whiteSpace: 'nowrap'
@@ -3163,7 +3247,7 @@ const TD = ({
       };
     });
   };
-  return /*#__PURE__*/React.createElement("td", {
+  return /*#__PURE__*/React__default["default"].createElement("td", {
     style: {
       width: 'auto',
       color: tBodyColor,
@@ -3187,7 +3271,7 @@ const TD = ({
     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.createElement("span", {
+      return /*#__PURE__*/React__default["default"].createElement("span", {
         style: {
           width: '32px',
           height: '32px',
@@ -3203,7 +3287,7 @@ const TD = ({
         onMouseLeave: () => handleMouseLeave()
       }, newItem.content === 0 ? newItem.content.toString() : newItem.contentHover && actionHover.id === newItem.id && actionHover.type === newItem.type && actionHover.index === newIndex ? newItem.contentHover : newItem.content ? newItem.content : '');
     } else if (newItem && Array.isArray(newItem)) {
-      return /*#__PURE__*/React.createElement("span", {
+      return /*#__PURE__*/React__default["default"].createElement("span", {
         key: `${newItem.id}_${newIndex}`,
         style: {
           display: 'inline-block',
@@ -3211,7 +3295,7 @@ const TD = ({
           borderRight: newIndex !== item.length - 1 ? '1px solid rgb(238, 238, 238)' : 'none'
         }
       }, item[newIndex].map((iT, iN) => {
-        return /*#__PURE__*/React.createElement("span", {
+        return /*#__PURE__*/React__default["default"].createElement("span", {
           style: {
             width: '32px',
             height: '32px',
@@ -3228,17 +3312,17 @@ const TD = ({
         }, iT.content === 0 ? iT.content.toString() : iT.contentHover && actionHover.id === iT.id && actionHover.type === iT.type && actionHover.index === iN ? iT.contentHover : iT.content ? iT.content : '');
       }));
     } else {
-      return /*#__PURE__*/React.createElement("span", {
+      return /*#__PURE__*/React__default["default"].createElement("span", {
         key: `${newItem.id}_${newIndex}`
       }, newItem);
     }
-  }) : /*#__PURE__*/React.createElement(React.Fragment, null) : item !== null && !Array.isArray(item) && typeof item === 'object' ? /*#__PURE__*/React.createElement("div", {
+  }) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null) : item !== null && !Array.isArray(item) && typeof item === 'object' ? /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       display: 'flex',
       alignItems: 'flex-start',
       justifyContent: hasOwnerProperty(item, 'checkBox') ? 'space-between' : tBodyTextAlign ? tBodyTextAlign === 'left' ? 'flex-start' : tBodyTextAlign === 'right' ? 'flex-end' : 'center' : 'center'
     }
-  }, !hasOwnerProperty(item, 'hideArrow') && item.hideArrow !== false && (!hasOwnerProperty(item, 'rightArrow') || item.rightArrow !== true) ? hasOwnerProperty(item, 'contentList') && (hasOwnerProperty(item, 'closeArrow') || hasOwnerProperty(item, 'openArrow')) && /*#__PURE__*/React.createElement("div", {
+  }, !hasOwnerProperty(item, 'hideArrow') && item.hideArrow !== false && (!hasOwnerProperty(item, 'rightArrow') || item.rightArrow !== true) ? hasOwnerProperty(item, 'contentList') && (hasOwnerProperty(item, 'closeArrow') || hasOwnerProperty(item, 'openArrow')) && /*#__PURE__*/React__default["default"].createElement("div", {
     id: item.id,
     style: {
       width: '21px',
@@ -3247,7 +3331,7 @@ const TD = ({
     },
     onClick: () => handleOpenCloseRowSingleArrow(index, innerIndex, item),
     className: styles$a['td-span']
-  }, hasOwnerProperty(item, 'status') && item.status === 'close' ? item.closeArrow : item.openArrow) : '', hasOwnerProperty(item, 'draggableIcon') && /*#__PURE__*/React.createElement("div", {
+  }, hasOwnerProperty(item, 'status') && item.status === 'close' ? item.closeArrow : item.openArrow) : '', hasOwnerProperty(item, 'draggableIcon') && /*#__PURE__*/React__default["default"].createElement("div", {
     draggable: true,
     style: {
       width: '24px',
@@ -3257,10 +3341,10 @@ const TD = ({
     onDrag: dragged,
     onDragEnd: dragEnd,
     onDragStart: e => dragStart(e, index, row)
-  }, /*#__PURE__*/React.createElement("img", {
+  }, /*#__PURE__*/React__default["default"].createElement("img", {
     src: img$1,
     alt: "drag"
-  })), hasOwnerProperty(item, 'draggable') && /*#__PURE__*/React.createElement("p", {
+  })), hasOwnerProperty(item, 'draggable') && /*#__PURE__*/React__default["default"].createElement("p", {
     style: {
       color: orderColor,
       fontSize: orderFontSize,
@@ -3268,7 +3352,7 @@ const TD = ({
       fontFamily: orderFontFamily,
       fontWeight: orderFontWeight
     }
-  }, item.order), hasOwnerProperty(item, 'checkBox') && /*#__PURE__*/React.createElement(SingleCheckbox, {
+  }, item.order), hasOwnerProperty(item, 'checkBox') && /*#__PURE__*/React__default["default"].createElement(SingleCheckbox, {
     data: item,
     index: index,
     innerIndex: innerIndex,
@@ -3277,13 +3361,13 @@ const TD = ({
     disabled: item.checkBox.disabled,
     checkedColor: item.checkBox.checkedColor,
     unCheckedColor: item.checkBox.unCheckedColor
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       flexShrink: 11,
       marginLeft: hasOwnerProperty(item, 'contentList') && (!hasOwnerProperty(item, 'hideArrow') || item.hideArrow !== true) ? hasOwnerProperty(item, 'rightArrow') ? item.rightArrow === true ? '0px' : '11px' : hasOwnerProperty(item, 'closeArrow') || hasOwnerProperty(item, 'openArrow') ? '11px' : '0px' : '0px',
       marginRight: hasOwnerProperty(item, 'contentList') && (!hasOwnerProperty(item, 'hideArrow') || item.hideArrow !== true) ? hasOwnerProperty(item, 'rightArrow') ? item.rightArrow === true ? '11px' : '0px' : '0px' : '0px'
     }
-  }, /*#__PURE__*/React.createElement("p", {
+  }, /*#__PURE__*/React__default["default"].createElement("p", {
     style: {
       textAlign: tBodyTextAlign,
       margin: '0px',
@@ -3291,12 +3375,12 @@ const TD = ({
       ...item.props
     },
     onClick: hasOwnerProperty(item, 'arrowComponent') ? () => handleCheckArrowAction(item, collapseFullRow ? index : item.checkIndex) : hasOwnerProperty(item, 'dots') ? e => handleCheckDots(e, item, index, innerIndex) : _ => _
-  }, item.content === 0 ? item.content.toString() : item.content ? item.content : hasOwnerProperty(item, 'arrowComponent') ? item.status === 'close' ? item.closeArrow : item.openArrow : hasOwnerProperty(item, 'dots') ? /*#__PURE__*/React.createElement("span", {
+  }, item.content === 0 ? item.content.toString() : item.content ? item.content : hasOwnerProperty(item, 'arrowComponent') ? item.status === 'close' ? item.closeArrow : item.openArrow : hasOwnerProperty(item, 'dots') ? /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
       display: 'block',
       position: 'relative'
     }
-  }, item.dotsStatus === 'deActive' ? item.deActiveIcon : item.activeIcon, /*#__PURE__*/React.createElement("span", {
+  }, item.dotsStatus === 'deActive' ? item.deActiveIcon : item.activeIcon, /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
       position: 'absolute',
       display: item.dotsStatus === 'deActive' ? 'none' : 'block',
@@ -3313,7 +3397,7 @@ const TD = ({
       boxShadow: '0px 0px 20px 0px #3C393E4D'
     }
   }, hasOwnerProperty(item, 'options') && item.options.map((optionItem, optionIndex) => {
-    return /*#__PURE__*/React.createElement("span", {
+    return /*#__PURE__*/React__default["default"].createElement("span", {
       key: `${optionItem.content}_${optionIndex}`,
       className: styles$a['dots-option-item'],
       style: {
@@ -3322,11 +3406,11 @@ const TD = ({
         fontFamily: 'Noto Sans Armenian'
       },
       onClick: () => handleMoreOptions(item, index, optionItem, innerIndex, optionIndex, item.options)
-    }, /*#__PURE__*/React.createElement("span", {
+    }, /*#__PURE__*/React__default["default"].createElement("span", {
       style: {
         marginRight: '10px'
       }
-    }, optionItem.icon), /*#__PURE__*/React.createElement("span", {
+    }, optionItem.icon), /*#__PURE__*/React__default["default"].createElement("span", {
       style: {
         width: 'calc(100% - 36px)',
         textAlign: 'left',
@@ -3337,7 +3421,7 @@ const TD = ({
       },
       title: optionItem.content
     }, optionItem.content === 0 ? optionItem.content.toString() : optionItem.content ? optionItem.content : ''));
-  }))) : ''), hasOwnerProperty(item, 'contentList') && !collapseFullRow && /*#__PURE__*/React.createElement("div", {
+  }))) : ''), hasOwnerProperty(item, 'contentList') && !collapseFullRow && /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       overflow: 'auto',
       marginTop: '10px',
@@ -3347,7 +3431,7 @@ const TD = ({
     }
   }, item.contentList.map((innerItem, innerItemIndex) => {
     if (Array.isArray(innerItem.content)) {
-      return /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React__default["default"].createElement("div", {
         key: `__${innerItemIndex}__`,
         style: {
           display: 'flex',
@@ -3355,7 +3439,7 @@ const TD = ({
           marginTop: innerItemIndex === 0 ? '28px' : '0px'
         }
       }, innerItem.content.map((contInnerItem, contInnerIndex) => {
-        return /*#__PURE__*/React.createElement("p", {
+        return /*#__PURE__*/React__default["default"].createElement("p", {
           key: `${contInnerItem}_${contInnerIndex}`,
           className: styles$a['list-text'],
           style: {
@@ -3372,7 +3456,7 @@ const TD = ({
         }, contInnerItem.content === 0 ? contInnerItem.content.toString() : contInnerItem.content ? contInnerItem.content : '');
       }));
     } else {
-      return /*#__PURE__*/React.createElement("p", {
+      return /*#__PURE__*/React__default["default"].createElement("p", {
         key: `${innerItem}_${innerItemIndex}`,
         className: styles$a['list-text'],
         style: {
@@ -3387,7 +3471,7 @@ const TD = ({
         onClick: e => handleContentList(e, item, index, innerIndex, innerItem.id, innerItem.content, innerItemIndex)
       }, innerItem.content === 0 ? innerItem.content.toString() : innerItem.content ? innerItem.content : '');
     }
-  }))), !hasOwnerProperty(item, 'hideArrow') && item.hideArrow !== false && hasOwnerProperty(item, 'rightArrow') && item.rightArrow === true ? hasOwnerProperty(item, 'contentList') && (hasOwnerProperty(item, 'closeArrow') || hasOwnerProperty(item, 'openArrow')) && /*#__PURE__*/React.createElement("div", {
+  }))), !hasOwnerProperty(item, 'hideArrow') && item.hideArrow !== false && hasOwnerProperty(item, 'rightArrow') && item.rightArrow === true ? hasOwnerProperty(item, 'contentList') && (hasOwnerProperty(item, 'closeArrow') || hasOwnerProperty(item, 'openArrow')) && /*#__PURE__*/React__default["default"].createElement("div", {
     id: item.id,
     style: {
       width: '21px',
@@ -3638,8 +3722,8 @@ const Table = ({
       status: 'close',
       checkIndex: null,
       arrowComponent: true,
-      openArrow: openArrow ? openArrow : configStyles.TABLE?.openArrow ? configStyles.TABLE?.openArrow : /*#__PURE__*/React.createElement(SvgUpArrow, null),
-      closeArrow: closeArrow ? closeArrow : configStyles.TABLE?.closeArrow ? configStyles.TABLE?.closeArrow : /*#__PURE__*/React.createElement(SvgDownArrow, null)
+      openArrow: openArrow ? openArrow : configStyles.TABLE?.openArrow ? configStyles.TABLE?.openArrow : /*#__PURE__*/React__default["default"].createElement(SvgUpArrow, null),
+      closeArrow: closeArrow ? closeArrow : configStyles.TABLE?.closeArrow ? configStyles.TABLE?.closeArrow : /*#__PURE__*/React__default["default"].createElement(SvgDownArrow, null)
     };
     if (type === 'body') {
       return data.map((item, index) => {
@@ -4220,11 +4304,11 @@ const Table = ({
     }
   }, [dataHeader, arrowColumn, arrowShow, disableArr, draggable]);
   React.useEffect(() => {
-    className && setClassProps(() => classnames(className ?? configStyles.TABLE.className));
+    className && setClassProps(() => classnames__default["default"](className ?? configStyles.TABLE.className));
   }, [className]);
   React.useEffect(() => {
     configStylesPromise.then(data => {
-      setClassProps(() => classnames(className ?? data.TABLE.className));
+      setClassProps(() => classnames__default["default"](className ?? data.TABLE.className));
       setConfigStyles(() => {
         return {
           ...data
@@ -4234,7 +4318,7 @@ const Table = ({
       console.error(error);
     });
   }, []);
-  return configStyles.TABLE && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("table", {
+  return configStyles.TABLE && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("table", {
     style: {
       width: '100%',
       borderRadius: tHeadBorderRadius ?? configStyles.TABLE.head.radius,
@@ -4245,16 +4329,16 @@ const Table = ({
     },
     onClick: handleTableClick,
     className: classProps
-  }, header && header.length > 0 && /*#__PURE__*/React.createElement("thead", {
+  }, header && header.length > 0 && /*#__PURE__*/React__default["default"].createElement("thead", {
     ref: headerRef
-  }, /*#__PURE__*/React.createElement("tr", {
+  }, /*#__PURE__*/React__default["default"].createElement("tr", {
     style: {
       color: tHeadColor ?? configStyles.TABLE.head.color,
       backgroundColor: tHeadBackgroundColor ?? configStyles.TABLE.head.colors.background,
       borderColor: hideBorder ? 'transparent' : tableBorderColor ?? configStyles.TABLE.borderColor
     }
   }, header.map((item, index) => {
-    return /*#__PURE__*/React.createElement(TH, {
+    return /*#__PURE__*/React__default["default"].createElement(TH, {
       item: item,
       hideBorder: hideBorder,
       key: `${item}_${index}`,
@@ -4272,14 +4356,14 @@ const Table = ({
       tableColumnMinWidth: tableColumnMinWidth ?? configStyles.TABLE.column.minWidth,
       tableColumnMaxWidth: tableColumnMaxWidth ?? configStyles.TABLE.column.maxWidth
     });
-  }))), body && body.length > 0 ? /*#__PURE__*/React.createElement("tbody", {
+  }))), body && body.length > 0 ? /*#__PURE__*/React__default["default"].createElement("tbody", {
     style: {
       boxShadow: tBodyBoxShadow ?? configStyles.TABLE.body.box.shadow
     }
   }, body.map((item, index) => {
-    return /*#__PURE__*/React.createElement("tr", {
+    return /*#__PURE__*/React__default["default"].createElement("tr", {
       onDragOver: e => e.preventDefault(),
-      onDrop: e => handleDrop(e, index),
+      onDrop: draggable ? e => handleDrop(e, index) : _ => _,
       key: `${item}_${index}`,
       style: {
         backgroundColor: tableRowBGColor ?? configStyles.TABLE.body.row.colors.background,
@@ -4289,15 +4373,15 @@ const Table = ({
       },
       ref: el => setRef(index, el)
     }, Object.values(item).map((innerItem, innerIndex) => {
-      return /*#__PURE__*/React.createElement(TD, {
+      return /*#__PURE__*/React__default["default"].createElement(TD, {
         index: index,
         item: innerItem,
-        dragged: handleDrag,
+        dragged: draggable ? handleDrag : _ => _,
         hideBorder: hideBorder,
         innerIndex: innerIndex,
-        dragEnd: handleDragEnd,
+        dragEnd: draggable ? handleDragEnd : _ => _,
         row: Object.values(item),
-        dragStart: handleDragStart,
+        dragStart: draggable ? handleDragStart : _ => _,
         id: item.id ? item.id : '',
         handleCheckDots: handleCheckDots,
         key: `${innerItem}_${index}_${innerIndex}`,
@@ -4333,7 +4417,7 @@ const Table = ({
         collapseFullRow: collapseFullRow
       });
     }));
-  })) : '', body && body.length > 0 && draggable && dragging && draggedItem && /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", {
+  })) : '', body && body.length > 0 && draggable && dragging && draggedItem && /*#__PURE__*/React__default["default"].createElement("tbody", null, /*#__PURE__*/React__default["default"].createElement("tr", {
     style: {
       position: 'fixed',
       top: `${position.y - 30}px`,
@@ -4347,13 +4431,13 @@ const Table = ({
       backgroundColor: draggableItemBackgroundColor ?? configStyles.TABLE.draggable.color.background
     }
   }, draggedItem.map((innerItem, innerIndex) => {
-    return /*#__PURE__*/React.createElement(TD, {
+    return /*#__PURE__*/React__default["default"].createElement(TD, {
       item: innerItem,
-      dragged: handleDrag,
+      dragged: draggable ? handleDrag : _ => _,
       hideBorder: hideBorder,
       innerIndex: innerIndex,
       row: Object.values(draggedItem),
-      dragStart: handleDragStart,
+      dragStart: draggable ? handleDragStart : _ => _,
       handleCheckDots: handleCheckDots,
       key: `${innerItem}__${innerIndex}`,
       openListColor: openListColor ?? configStyles.TABLE.openList.color,
@@ -4379,60 +4463,60 @@ const Table = ({
       borderRight: innerIndex === Object.values(draggedItem).length - 1 ? 'none' : configStyles.TABLE.body.row.border,
       borderRightColor: innerIndex === Object.values(draggedItem).length - 1 ? 'transparent' : configStyles.TABLE.body.row.borderColor
     });
-  })))), !body.length && /*#__PURE__*/React.createElement("div", {
+  })))), !body.length && /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles$a['no-tabel-data']
-  }, /*#__PURE__*/React.createElement("p", null, "\u054F\u057E\u0575\u0561\u056C\u0576\u0565\u0580 \u0579\u056F\u0561\u0576")));
+  }, /*#__PURE__*/React__default["default"].createElement("p", null, "\u054F\u057E\u0575\u0561\u056C\u0576\u0565\u0580 \u0579\u056F\u0561\u0576")));
 };
 Table.propTypes = {
-  getData: PropTypes.func,
-  getDraggableData: PropTypes.func,
-  draggable: PropTypes.bool,
-  showOrder: PropTypes.bool,
-  dataBody: PropTypes.array,
-  arrowShow: PropTypes.bool,
-  dataHeader: PropTypes.array,
-  arrowColumn: PropTypes.number,
-  tableRowItem: PropTypes.bool,
-  tableRowRadius: PropTypes.string,
-  tableRowBGColor: PropTypes.string,
-  tableRowBoxShadow: PropTypes.string,
-  tableColumnMaxWidth: PropTypes.string,
-  tableColumnMinWidth: PropTypes.string,
-  tHeadColor: PropTypes.string,
-  tHeadFamily: PropTypes.string,
-  tHeadPadding: PropTypes.string,
-  tHeadFontSize: PropTypes.string,
-  tHeadFontStyle: PropTypes.string,
-  tHeadTextAlign: PropTypes.string,
-  tHeadFontWeight: PropTypes.number,
-  tHeadBorderRadius: PropTypes.string,
-  tHeadBackgroundColor: PropTypes.string,
-  tBodyColor: PropTypes.string,
-  tBodyPadding: PropTypes.string,
-  tBodyFontSize: PropTypes.string,
-  tBodyBoxShadow: PropTypes.string,
-  tBodyTextAlign: PropTypes.string,
-  tBodyFontWeight: PropTypes.string,
-  tBodyFontFamily: PropTypes.string,
-  tBodyRowMarginTop: PropTypes.string,
-  className: PropTypes.string,
-  tBodyRowBorder: PropTypes.string,
-  openListColor: PropTypes.string,
-  openListFontSize: PropTypes.string,
-  openListFontStyle: PropTypes.string,
-  openListFontWeight: PropTypes.string,
-  openListFontFamily: PropTypes.string,
-  hideBorder: PropTypes.bool,
-  collapseFullRow: PropTypes.bool,
-  tableBorder: PropTypes.string,
-  tableBorderColor: PropTypes.string,
-  openArrow: PropTypes.element,
-  closeArrow: PropTypes.element,
-  clickableRowColumnTd: PropTypes.bool
+  getData: PropTypes__default["default"].func,
+  getDraggableData: PropTypes__default["default"].func,
+  draggable: PropTypes__default["default"].bool,
+  showOrder: PropTypes__default["default"].bool,
+  dataBody: PropTypes__default["default"].array,
+  arrowShow: PropTypes__default["default"].bool,
+  dataHeader: PropTypes__default["default"].array,
+  arrowColumn: PropTypes__default["default"].number,
+  tableRowItem: PropTypes__default["default"].bool,
+  tableRowRadius: PropTypes__default["default"].string,
+  tableRowBGColor: PropTypes__default["default"].string,
+  tableRowBoxShadow: PropTypes__default["default"].string,
+  tableColumnMaxWidth: PropTypes__default["default"].string,
+  tableColumnMinWidth: PropTypes__default["default"].string,
+  tHeadColor: PropTypes__default["default"].string,
+  tHeadFamily: PropTypes__default["default"].string,
+  tHeadPadding: PropTypes__default["default"].string,
+  tHeadFontSize: PropTypes__default["default"].string,
+  tHeadFontStyle: PropTypes__default["default"].string,
+  tHeadTextAlign: PropTypes__default["default"].string,
+  tHeadFontWeight: PropTypes__default["default"].number,
+  tHeadBorderRadius: PropTypes__default["default"].string,
+  tHeadBackgroundColor: PropTypes__default["default"].string,
+  tBodyColor: PropTypes__default["default"].string,
+  tBodyPadding: PropTypes__default["default"].string,
+  tBodyFontSize: PropTypes__default["default"].string,
+  tBodyBoxShadow: PropTypes__default["default"].string,
+  tBodyTextAlign: PropTypes__default["default"].string,
+  tBodyFontWeight: PropTypes__default["default"].string,
+  tBodyFontFamily: PropTypes__default["default"].string,
+  tBodyRowMarginTop: PropTypes__default["default"].string,
+  className: PropTypes__default["default"].string,
+  tBodyRowBorder: PropTypes__default["default"].string,
+  openListColor: PropTypes__default["default"].string,
+  openListFontSize: PropTypes__default["default"].string,
+  openListFontStyle: PropTypes__default["default"].string,
+  openListFontWeight: PropTypes__default["default"].string,
+  openListFontFamily: PropTypes__default["default"].string,
+  hideBorder: PropTypes__default["default"].bool,
+  collapseFullRow: PropTypes__default["default"].bool,
+  tableBorder: PropTypes__default["default"].string,
+  tableBorderColor: PropTypes__default["default"].string,
+  openArrow: PropTypes__default["default"].element,
+  closeArrow: PropTypes__default["default"].element,
+  clickableRowColumnTd: PropTypes__default["default"].bool
 };
 
-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"};
+var css_248z$a = "body.modal-module_tui-no-srcoll-class__gZjNK,html.modal-module_tui-no-srcoll-class__gZjNK{height:100%;overflow:hidden!important}.modal-module_animation__modal__3mt48{animation:modal-module_show-popup__WrH7a .15s;-webkit-animation:modal-module_show-popup__WrH7a .15s}@keyframes modal-module_show-popup__WrH7a{0%{transform:translate3d(0,-50%,0);-webkit-transform:translate3d(0,-50%,0);-moz-transform:translate3d(0,-50%,0);-ms-transform:translate3d(0,-50%,0);-o-transform:translate3d(0,-50%,0)}to{opacity:1;transform:translateZ(0);-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0)}}";
+var styles$9 = {"tui-no-srcoll-class":"modal-module_tui-no-srcoll-class__gZjNK","animation__modal":"modal-module_animation__modal__3mt48","show-popup":"modal-module_show-popup__WrH7a"};
 styleInject(css_248z$a);
 
 const SvgNext = ({
@@ -4678,15 +4762,26 @@ const Modal = ({
     }
   }, [selected]);
   React.useEffect(() => {
-    className && setClassProps(() => classnames(className ?? configStyles.MODAL.className));
+    className && setClassProps(() => classnames__default["default"](className ?? configStyles.MODAL.className));
   }, [className]);
   React.useEffect(() => {
+    let newConfigStyles = {};
+    const style = document.createElement('style');
     document.addEventListener('keydown', e => {
       handleESC(e);
       handleNavigateArrow(e);
     }, false);
     configStylesPromise.then(data => {
-      setClassProps(() => classnames(className ?? data.MODAL.className));
+      newConfigStyles = {
+        ...data
+      };
+      if (newConfigStyles.MODAL && hasOwnerProperty(newConfigStyles.MODAL, 'noScroll') && newConfigStyles.MODAL.noScroll) {
+        style.textContent = `.tui-no-srcoll-class{overflow:hidden!important;}`;
+        document.head.appendChild(style);
+        document.body.classList.add('tui-no-srcoll-class');
+        document.documentElement.classList.add('tui-no-srcoll-class');
+      }
+      setClassProps(() => classnames__default["default"](className ?? data.MODAL.className));
       setConfigStyles(() => {
         return {
           ...data
@@ -4698,13 +4793,21 @@ const Modal = ({
     return () => {
       setSelect(0);
       setInnerData([]);
+      if (newConfigStyles.MODAL && hasOwnerProperty(newConfigStyles.MODAL, 'noScroll') && newConfigStyles.MODAL.noScroll) {
+        const noScrllable = document.getElementsByClassName('tui-no-srcoll-class');
+        if (noScrllable) {
+          style.remove();
+          document.body.classList.remove('tui-no-srcoll-class');
+          document.documentElement.classList.remove('tui-no-srcoll-class');
+        }
+      }
       document.removeEventListener('keydown', e => {
         handleESC(e);
         handleNavigateArrow(e);
       }, false);
     };
   }, []);
-  return configStyles.MODAL && /*#__PURE__*/React.createElement("div", {
+  return configStyles.MODAL && /*#__PURE__*/React__default["default"].createElement("div", {
     className: classProps,
     onClick: handleCloseModal,
     style: {
@@ -4716,7 +4819,7 @@ const Modal = ({
       position: 'fixed',
       backgroundColor: layerBackgroundColor ?? configStyles.MODAL.colors.backgroundLayer
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       position: 'relative',
       display: 'flex',
@@ -4725,25 +4828,25 @@ const Modal = ({
       alignItems: alignItems ?? configStyles.MODAL.alignItems,
       justifyContent: justifyContent ?? configStyles.MODAL.justifyContent
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${styles$9['animation__modal']}`,
     onClick: handleStopClosing,
     style: {
       position: 'relative',
       boxSizing: 'border-box',
-      display: type === 'content' ? 'grid' : 'block',
       width: width ?? configStyles.MODAL.width,
-      overflow: type === 'content' ? 'auto' : 'hidden',
       height: height ?? configStyles.MODAL.height,
-      gridTemplateRows: type === 'content' ? 'auto 10fr' : '',
+      display: type === 'content' ? 'grid' : 'block',
+      overflow: type === 'content' ? 'auto' : 'hidden',
       borderRadius: radius ?? configStyles.MODAL.radius,
       maxWidth: mMaxWidth ?? configStyles.MODAL.maxWidth,
       maxHeight: mMaxHeight ?? configStyles.MODAL.maxHeight,
+      gridTemplateRows: type === 'content' ? 'auto 10fr' : '',
       minWidth: type === 'content' ? minWidth ?? configStyles.MODAL.minWidth : '',
       backgroundColor: backgroundColor ?? configStyles.MODAL.colors.background,
       minHeight: type === 'content' ? minHeight ?? configStyles.MODAL.minHeight : ''
     }
-  }, type === 'content' && /*#__PURE__*/React.createElement("div", {
+  }, type === 'content' && /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       position: closeIconFix ? 'relative' : 'unset',
       width: '100%',
@@ -4756,7 +4859,7 @@ const Modal = ({
       justifyContent: headerText && type === 'content' ? 'space-between' : 'flex-end',
       backgroundColor: closeAreaBackgroundColor ?? configStyles.MODAL.closeAreaBackgroundColor
     }
-  }, headerIcon && type === 'content' && /*#__PURE__*/React.createElement("div", {
+  }, headerIcon && type === 'content' && /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       display: 'flex',
       width: 'fit-content',
@@ -4767,7 +4870,7 @@ const Modal = ({
       maxHeight: headerIconMaxHeight ?? configStyles.MODAL.header.icon.maxHeight,
       marginRight: headerIconMarginRight ?? configStyles.MODAL.header.icon.marginRight
     }
-  }, headerIcon), headerText && type === 'content' && /*#__PURE__*/React.createElement("p", {
+  }, headerIcon), headerText && type === 'content' && /*#__PURE__*/React__default["default"].createElement("p", {
     style: {
       flex: '1',
       overflow: 'hidden',
@@ -4781,7 +4884,7 @@ const Modal = ({
       fontFamily: headerFamily ?? configStyles.MODAL.header.font.family,
       fontWeight: headerWeight ?? configStyles.MODAL.header.font.weight
     }
-  }, headerText), showCloseIcon ? /*#__PURE__*/React.createElement("div", {
+  }, headerText), showCloseIcon ? /*#__PURE__*/React__default["default"].createElement("div", {
     onClick: () => setShow(false),
     style: {
       position: closeIconFix ? 'absolute' : 'unset',
@@ -4798,7 +4901,7 @@ const Modal = ({
       justifyContent: 'center'
     },
     className: closeIconClass ? closeIconClass : configStyles.MODAL.icon.className
-  }, closeIcon ? closeIcon : configStyles.MODAL.icon.close ? configStyles.MODAL.icon.close : /*#__PURE__*/React.createElement(SvgCloseIcon, null)) : ''), /*#__PURE__*/React.createElement("div", {
+  }, closeIcon ? closeIcon : configStyles.MODAL.icon.close ? configStyles.MODAL.icon.close : /*#__PURE__*/React__default["default"].createElement(SvgCloseIcon, null)) : ''), /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       display: 'flex',
       width: '100%',
@@ -4814,7 +4917,7 @@ const Modal = ({
     },
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave
-  }, type === 'content' ? children ? children : '' : /*#__PURE__*/React.createElement(React.Fragment, null, innerData.length <= 0 && /*#__PURE__*/React.createElement("div", {
+  }, type === 'content' ? children ? children : '' : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, innerData.length <= 0 && /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       position: 'absolute',
       display: 'flex',
@@ -4826,10 +4929,10 @@ const Modal = ({
       justifyContent: 'center',
       backgroundColor: 'rgba(60, 57, 62, 0.5)'
     }
-  }, loader ? loader : /*#__PURE__*/React.createElement("img", {
+  }, loader ? loader : /*#__PURE__*/React__default["default"].createElement("img", {
     src: img,
     alt: "loader"
-  })), /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       position: 'absolute',
       top: '0px',
@@ -4840,7 +4943,7 @@ const Modal = ({
       height: grayDecorHeight ?? configStyles.MODAL.grayDecorHeight,
       background: closeAreaBackgroundColor ?? configStyles.MODAL.closeAreaBackgroundColor
     }
-  }, /*#__PURE__*/React.createElement("button", {
+  }, /*#__PURE__*/React__default["default"].createElement("button", {
     onClick: () => setShow(false),
     style: {
       position: 'absolute',
@@ -4855,7 +4958,7 @@ const Modal = ({
       cursor: 'pointer',
       backgroundColor: 'transparent'
     }
-  }, closeSlideIcon ? closeSlideIcon : configStyles.MODAL.icon.closeSlide ? configStyles.MODAL.icon.closeSlide : /*#__PURE__*/React.createElement(SvgCloseSlide, null))), /*#__PURE__*/React.createElement("div", {
+  }, closeSlideIcon ? closeSlideIcon : configStyles.MODAL.icon.closeSlide ? configStyles.MODAL.icon.closeSlide : /*#__PURE__*/React__default["default"].createElement(SvgCloseSlide, null))), /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       height: imageWrapHeight ?? configStyles.MODAL.image.wrapHeight
     }
@@ -4864,9 +4967,9 @@ const Modal = ({
       if (!hasOwnerProperty(item, 'url')) {
         alert('Please add url property in data prop on each element');
       } else {
-        return /*#__PURE__*/React.createElement("span", {
+        return /*#__PURE__*/React__default["default"].createElement("span", {
           key: `${item.url}_${item.id ? item.id : '007'}_${index}`
-        }, /*#__PURE__*/React.createElement("img", {
+        }, /*#__PURE__*/React__default["default"].createElement("img", {
           style: {
             display: 'block',
             objectFit: 'contain',
@@ -4876,7 +4979,7 @@ const Modal = ({
             height: imageHeight ?? configStyles.MODAL.image.height
           },
           src: item.url
-        }), isHover && showZoomIcon ? /*#__PURE__*/React.createElement("div", {
+        }), isHover && showZoomIcon ? /*#__PURE__*/React__default["default"].createElement("div", {
           style: {
             top: '0px',
             left: '0px',
@@ -4894,10 +4997,10 @@ const Modal = ({
             justifyContent: 'center'
           },
           onClick: () => handleUtilsOpenInNewTab(item.url)
-        }, zoomIcon ? zoomIcon : configStyles.MODAL.icon.zoom ? configStyles.MODAL.icon.zoom : /*#__PURE__*/React.createElement(SvgZoom, null)) : '');
+        }, zoomIcon ? zoomIcon : configStyles.MODAL.icon.zoom ? configStyles.MODAL.icon.zoom : /*#__PURE__*/React__default["default"].createElement(SvgZoom, null)) : '');
       }
     }
-  }), innerData && innerData.length > 1 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
+  }), innerData && innerData.length > 1 && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("button", {
     ref: leftBtnRef,
     onClick: () => handleGoTo('prev'),
     style: {
@@ -4912,7 +5015,7 @@ const Modal = ({
       top: 'calc(50% - 12px)',
       backgroundColor: 'transparent'
     }
-  }, prevIcon ? prevIcon : configStyles.MODAL.icon.prev ? configStyles.MODAL.icon.prev : /*#__PURE__*/React.createElement(SvgPrev, null)), /*#__PURE__*/React.createElement("button", {
+  }, prevIcon ? prevIcon : configStyles.MODAL.icon.prev ? configStyles.MODAL.icon.prev : /*#__PURE__*/React__default["default"].createElement(SvgPrev, null)), /*#__PURE__*/React__default["default"].createElement("button", {
     ref: rightBtnRef,
     onClick: () => handleGoTo('next'),
     style: {
@@ -4927,58 +5030,58 @@ const Modal = ({
       top: 'calc(50% - 12px)',
       backgroundColor: 'transparent'
     }
-  }, nextIcon ? nextIcon : configStyles.MODAL.icon.next ? configStyles.MODAL.icon.next : /*#__PURE__*/React.createElement(SvgNext, null)))))))));
+  }, nextIcon ? nextIcon : configStyles.MODAL.icon.next ? configStyles.MODAL.icon.next : /*#__PURE__*/React__default["default"].createElement(SvgNext, null)))))))));
 };
 Modal.propTypes = {
-  data: PropTypes.array,
-  type: PropTypes.string,
-  setShow: PropTypes.func,
-  width: PropTypes.string,
-  radius: PropTypes.string,
-  height: PropTypes.string,
-  padding: PropTypes.string,
-  selected: PropTypes.number,
-  minWidth: PropTypes.string,
-  mMaxWidth: PropTypes.string,
-  minHeight: PropTypes.string,
-  className: PropTypes.string,
-  zoomIcon: PropTypes.element,
-  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,
-  headerIcon: PropTypes.element,
-  headerFamily: PropTypes.string,
-  headerTextAlign: PropTypes.string,
-  headerIconMaxWidth: PropTypes.string,
-  headerIconMaxHeight: PropTypes.string,
-  headerIconMarginRight: PropTypes.string,
-  alignItems: PropTypes.string,
-  mMaxHeight: PropTypes.string,
-  imageWidth: PropTypes.string,
-  outsideClose: PropTypes.bool,
-  showZoomIcon: PropTypes.bool,
-  imageMargin: PropTypes.string,
-  borderStyle: PropTypes.string,
-  borderWidth: PropTypes.string,
-  headerColor: PropTypes.string,
-  imageHeight: PropTypes.string,
-  headerWeight: PropTypes.string,
-  headerHeight: PropTypes.string,
-  justifyContent: PropTypes.string,
-  backgroundColor: PropTypes.string,
-  grayDecorHeight: PropTypes.string,
-  imageWrapHeight: PropTypes.string,
-  layerBackgroundColor: PropTypes.string,
-  closeAreaBackgroundColor: PropTypes.string
+  data: PropTypes__default["default"].array,
+  type: PropTypes__default["default"].string,
+  setShow: PropTypes__default["default"].func,
+  width: PropTypes__default["default"].string,
+  radius: PropTypes__default["default"].string,
+  height: PropTypes__default["default"].string,
+  padding: PropTypes__default["default"].string,
+  selected: PropTypes__default["default"].number,
+  minWidth: PropTypes__default["default"].string,
+  mMaxWidth: PropTypes__default["default"].string,
+  minHeight: PropTypes__default["default"].string,
+  className: PropTypes__default["default"].string,
+  zoomIcon: PropTypes__default["default"].element,
+  prevIcon: PropTypes__default["default"].element,
+  nextIcon: PropTypes__default["default"].element,
+  closeIcon: PropTypes__default["default"].element,
+  closeIconFix: PropTypes__default["default"].bool,
+  showCloseIcon: PropTypes__default["default"].bool,
+  closeIconClass: PropTypes__default["default"].string,
+  closeSlideIcon: PropTypes__default["default"].element,
+  closeIconTopPosition: PropTypes__default["default"].string,
+  closeIconRightPosition: PropTypes__default["default"].string,
+  headerText: PropTypes__default["default"].string,
+  headerSize: PropTypes__default["default"].string,
+  headerStyle: PropTypes__default["default"].string,
+  headerIcon: PropTypes__default["default"].element,
+  headerFamily: PropTypes__default["default"].string,
+  headerTextAlign: PropTypes__default["default"].string,
+  headerIconMaxWidth: PropTypes__default["default"].string,
+  headerIconMaxHeight: PropTypes__default["default"].string,
+  headerIconMarginRight: PropTypes__default["default"].string,
+  alignItems: PropTypes__default["default"].string,
+  mMaxHeight: PropTypes__default["default"].string,
+  imageWidth: PropTypes__default["default"].string,
+  outsideClose: PropTypes__default["default"].bool,
+  showZoomIcon: PropTypes__default["default"].bool,
+  imageMargin: PropTypes__default["default"].string,
+  borderStyle: PropTypes__default["default"].string,
+  borderWidth: PropTypes__default["default"].string,
+  headerColor: PropTypes__default["default"].string,
+  imageHeight: PropTypes__default["default"].string,
+  headerWeight: PropTypes__default["default"].string,
+  headerHeight: PropTypes__default["default"].string,
+  justifyContent: PropTypes__default["default"].string,
+  backgroundColor: PropTypes__default["default"].string,
+  grayDecorHeight: PropTypes__default["default"].string,
+  imageWrapHeight: PropTypes__default["default"].string,
+  layerBackgroundColor: PropTypes__default["default"].string,
+  closeAreaBackgroundColor: PropTypes__default["default"].string
 };
 
 const TelInput = ({
@@ -5018,7 +5121,7 @@ const TelInput = ({
     }
     setInnerValue(() => newValue);
   }, [value]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
     className: telClass,
     style: {
       ...inpStyles,
@@ -5032,7 +5135,7 @@ const TelInput = ({
       borderRight: `${telBorderRightWidth} ${telBorderRightStyle}`,
       borderColor: innerErrorMessage ? errorColor : isHover ? telBorderRightColorHover : telBorderRightColor
     }
-  }, "+374"), /*#__PURE__*/React.createElement("input", {
+  }, "+374"), /*#__PURE__*/React__default["default"].createElement("input", {
     type: type,
     value: innerValue,
     disabled: disabled,
@@ -5085,7 +5188,7 @@ const TextInput = ({
     }
     setInnerValue(() => ssn ? newValue.replace(/[^a-zA-ZԱ-Ֆա-ֆА-Яа-яЁё0-9\s]/g, '') : newValue);
   }, [value]);
-  return /*#__PURE__*/React.createElement("input", {
+  return /*#__PURE__*/React__default["default"].createElement("input", {
     type: "text",
     value: innerValue,
     disabled: disabled,
@@ -5144,7 +5247,7 @@ const PassInput = ({
   React.useEffect(() => {
     setInnerShow(show);
   }, [show]);
-  return /*#__PURE__*/React.createElement("input", {
+  return /*#__PURE__*/React__default["default"].createElement("input", {
     type: innerShow ? 'text' : 'password',
     value: innerValue,
     disabled: disabled,
@@ -5284,7 +5387,7 @@ const NumberInput = ({
       setInnerValue(() => newValue);
     }
   }, [dots, value, float, cardNumber, maxNumSize, minNumSize, numberMaxLength]);
-  return /*#__PURE__*/React.createElement("input", {
+  return /*#__PURE__*/React__default["default"].createElement("input", {
     type: "text",
     inputMode: "decimal",
     value: innerValue,
@@ -5310,7 +5413,7 @@ 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","inp-num":"input-module_inp-num__vH7HL"};
+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);
 
 const InputTypes = {
@@ -5323,7 +5426,7 @@ const IconSides = {
   LEFT: 'left',
   RIGHT: 'right'
 };
-const P = styled.span`
+const P = styled__default["default"].span`
     animation: ${true};
 `;
 const Input = ({
@@ -5564,7 +5667,7 @@ const Input = ({
     setInnerValue(() => val);
   }, [value]);
   React.useEffect(() => {
-    className && setClassProps(() => classnames(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$8['inp-num'] : '', styles$8['input-wrap']));
   }, [className]);
   React.useEffect(() => {
     setInnerErrorIcon(() => errorIcon);
@@ -5584,7 +5687,7 @@ const Input = ({
   }, [labelIconSide]);
   React.useEffect(() => {
     configStylesPromise.then(data => {
-      setClassProps(() => classnames(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$8['inp-num'] : '', styles$8['input-wrap']));
       setConfigStyles(() => {
         return {
           ...data
@@ -5594,12 +5697,12 @@ const Input = ({
       console.error(error);
     });
   }, []);
-  return configStyles.INPUT && /*#__PURE__*/React.createElement("div", {
+  return configStyles.INPUT && /*#__PURE__*/React__default["default"].createElement("div", {
     ref: parentRef,
     className: classProps
-  }, /*#__PURE__*/React.createElement("style", null, `.tui-color-placeholder::placeholder {
+  }, /*#__PURE__*/React__default["default"].createElement("style", null, `.tui-color-placeholder::placeholder {
                             color: ${placeholderColor ?? configStyles.INPUT.colors.placeholder};
-                        }`), label && /*#__PURE__*/React.createElement("div", {
+                        }`), label && /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       display: 'flex',
       maxWidth: '100%',
@@ -5607,7 +5710,7 @@ const Input = ({
       columnGap: '4px',
       justifyContent: 'flex-start'
     }
-  }, showLabelIcon && innerLabelIcon && innerLabelIconSide === 'left' ? /*#__PURE__*/React.createElement("img", {
+  }, showLabelIcon && innerLabelIcon && innerLabelIconSide === 'left' ? /*#__PURE__*/React__default["default"].createElement("img", {
     alt: "label icon",
     src: innerLabelIcon,
     style: {
@@ -5617,7 +5720,7 @@ const Input = ({
       marginRight: labelIconMargin ?? configStyles.INPUT.label.iconMargin
     },
     onClick: labelAction ? () => labelAction() : _ => _
-  }) : '', /*#__PURE__*/React.createElement("label", {
+  }) : '', /*#__PURE__*/React__default["default"].createElement("label", {
     ref: labelRef,
     style: {
       color: labelColor ?? configStyles.INPUT.label.color,
@@ -5634,7 +5737,7 @@ const Input = ({
     },
     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.createElement("sup", null, iconRequired ? iconRequired : configStyles.INPUT.icon.required ? configStyles.INPUT.icon.required : /*#__PURE__*/React.createElement(SvgRequired, null)), showLabelIcon && innerLabelIcon && innerLabelIconSide === 'right' ? /*#__PURE__*/React.createElement("img", {
+  }, label), required && /*#__PURE__*/React__default["default"].createElement("sup", null, iconRequired ? iconRequired : configStyles.INPUT.icon.required ? configStyles.INPUT.icon.required : /*#__PURE__*/React__default["default"].createElement(SvgRequired, null)), showLabelIcon && innerLabelIcon && innerLabelIconSide === 'right' ? /*#__PURE__*/React__default["default"].createElement("img", {
     alt: "label icon",
     src: innerLabelIcon,
     style: {
@@ -5644,7 +5747,7 @@ const Input = ({
       marginLeft: labelIconMargin ?? configStyles.INPUT.label.iconMargin
     },
     onClick: labelAction ? () => labelAction() : _ => _
-  }) : ''), /*#__PURE__*/React.createElement("div", {
+  }) : ''), /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${styles$8['input-content']}`,
     style: {
       width: width ?? configStyles.INPUT.width,
@@ -5653,7 +5756,7 @@ const Input = ({
     },
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave
-  }, leftIcon && leftIcon.length > 0 && type != 'tel' ? /*#__PURE__*/React.createElement("div", {
+  }, leftIcon && leftIcon.length > 0 && type != 'tel' ? /*#__PURE__*/React__default["default"].createElement("div", {
     onClick: type === 'password' ? handleShowPass : _ => _,
     style: {
       display: 'flex',
@@ -5668,7 +5771,7 @@ const Input = ({
       borderBottomLeftRadius: radius ?? configStyles.INPUT.radius,
       backgroundColor: disabled ? backgroundDisableColor ? backgroundDisableColor : configStyles.INPUT.colors.backgroundDisable : backgroundColor ? backgroundColor : configStyles.INPUT.colors.background
     }
-  }, type === 'password' ? show ? leftIcon[1] : leftIcon[0] : leftIcon[0]) : '', type === 'tel' ? /*#__PURE__*/React.createElement(TelInput, {
+  }, type === 'password' ? show ? leftIcon[1] : leftIcon[0] : leftIcon[0]) : '', type === 'tel' ? /*#__PURE__*/React__default["default"].createElement(TelInput, {
     type: type,
     value: innerValue,
     inputChange: change,
@@ -5685,7 +5788,7 @@ const Input = ({
     telBorderRightStyle: telBorderRightStyle ?? configStyles.INPUT.tel.borderRight.style,
     telBorderRightColor: telBorderRightColor ?? configStyles.INPUT.tel.borderRight.color,
     telBorderRightColorHover: telBorderRightColorHover ?? configStyles.INPUT.tel.borderRight.colors.hover
-  }) : type === 'number' ? /*#__PURE__*/React.createElement(NumberInput, {
+  }) : type === 'number' ? /*#__PURE__*/React__default["default"].createElement(NumberInput, {
     dots: withoutDot,
     value: innerValue,
     float: floatToFix,
@@ -5704,7 +5807,7 @@ const Input = ({
     radius: radius ?? configStyles.INPUT.radius,
     checkLeftIcon: leftIcon && leftIcon.length > 0 ? true : false,
     checkRightIcon: rightIcon && rightIcon.length > 0 ? true : false
-  }) : type === 'password' ? /*#__PURE__*/React.createElement(PassInput, {
+  }) : type === 'password' ? /*#__PURE__*/React__default["default"].createElement(PassInput, {
     show: show,
     type: type,
     value: innerValue,
@@ -5716,7 +5819,7 @@ const Input = ({
     maxLength: maxLength ?? configStyles.INPUT.maxLength,
     checkLeftIcon: leftIcon && leftIcon.length > 0 ? true : false,
     checkRightIcon: rightIcon && rightIcon.length > 0 ? true : false
-  }) : /*#__PURE__*/React.createElement(TextInput, {
+  }) : /*#__PURE__*/React__default["default"].createElement(TextInput, {
     ssn: ssn,
     value: innerValue,
     disabled: disabled,
@@ -5727,7 +5830,7 @@ const Input = ({
     maxLength: maxLength ?? configStyles.INPUT.maxLength,
     checkLeftIcon: leftIcon && leftIcon.length > 0 ? true : false,
     checkRightIcon: rightIcon && rightIcon.length > 0 ? true : false
-  }), rightIcon && rightIcon.length > 0 ? /*#__PURE__*/React.createElement("div", {
+  }), rightIcon && rightIcon.length > 0 ? /*#__PURE__*/React__default["default"].createElement("div", {
     onClick: type === 'password' ? handleShowPass : _ => _,
     style: {
       display: 'flex',
@@ -5742,7 +5845,7 @@ const Input = ({
       borderBottomRightRadius: radius ?? configStyles.INPUT.radius,
       backgroundColor: disabled ? backgroundDisableColor ? backgroundDisableColor : configStyles.INPUT.colors.backgroundDisable : backgroundColor ? backgroundColor : configStyles.INPUT.colors.background
     }
-  }, type === 'password' ? show ? rightIcon[1] : rightIcon[0] : rightIcon[0]) : ''), innerErrorMessage ? /*#__PURE__*/React.createElement(P
+  }, type === 'password' ? show ? rightIcon[1] : rightIcon[0] : rightIcon[0]) : ''), innerErrorMessage ? /*#__PURE__*/React__default["default"].createElement(P
   // animation={animation}
   , {
     style: {
@@ -5763,7 +5866,7 @@ const Input = ({
       transform: 'scale3d(1,1,1)'
     },
     className: errorClassName ?? configStyles.INPUT.error.className
-  }, showErrorIcon && innerErrorIcon && innerErrorIconSide === 'left' ? /*#__PURE__*/React.createElement("img", {
+  }, showErrorIcon && innerErrorIcon && innerErrorIconSide === 'left' ? /*#__PURE__*/React__default["default"].createElement("img", {
     alt: "error icon",
     src: innerErrorIcon,
     style: {
@@ -5773,7 +5876,7 @@ const Input = ({
       marginRight: errorIconMargin ?? configStyles.INPUT.error.iconMargin
     },
     onClick: errorAction ? () => errorAction() : _ => _
-  }) : '', /*#__PURE__*/React.createElement("span", {
+  }) : '', /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
       display: 'inline-block',
       whiteSpace: (errorDots ? errorDots : configStyles.INPUT.error.dots) ? 'nowrap' : 'normal',
@@ -5781,7 +5884,7 @@ const Input = ({
       textOverflow: (errorDots ? errorDots : configStyles.INPUT.error.dots) ? 'ellipsis' : '',
       maxWidth: `calc(100% - ${(errorIconMargin ? Number(errorIconMargin.match(/\d+/)[0]) : Number(configStyles.INPUT.error.iconMargin.match(/\d+/)[0])) + 14}px)`
     }
-  }, innerErrorMessage), showErrorIcon && innerErrorIcon && innerErrorIconSide === 'right' && /*#__PURE__*/React.createElement("img", {
+  }, innerErrorMessage), showErrorIcon && innerErrorIcon && innerErrorIconSide === 'right' && /*#__PURE__*/React__default["default"].createElement("img", {
     alt: "error icon",
     src: innerErrorIcon,
     style: {
@@ -5794,98 +5897,98 @@ const Input = ({
   })) : '');
 };
 Input.propTypes = {
-  ssn: PropTypes.bool,
-  size: PropTypes.string,
-  name: PropTypes.string,
-  change: PropTypes.func,
-  style: PropTypes.string,
-  color: PropTypes.string,
-  width: PropTypes.string,
-  withZero: PropTypes.bool,
-  weight: PropTypes.string,
-  family: PropTypes.string,
-  required: PropTypes.bool,
-  disabled: PropTypes.bool,
-  height: PropTypes.string,
-  radius: PropTypes.string,
-  padding: PropTypes.string,
-  cardNumber: PropTypes.bool,
-  withoutDot: PropTypes.bool,
-  className: PropTypes.string,
-  iconWidth: PropTypes.string,
-  iconPadding: PropTypes.string,
-  maxLength: PropTypes.number,
-  floatToFix: PropTypes.number,
-  minNumSize: PropTypes.number,
-  maxNumSize: PropTypes.number,
-  borderRight: PropTypes.string,
-  placeholder: PropTypes.string,
-  placeholderColor: PropTypes.string,
-  phoneDisplay: PropTypes.string,
-  autoComplete: PropTypes.string,
-  errorDots: PropTypes.bool,
-  errorLeft: PropTypes.string,
-  errorSize: PropTypes.string,
-  errorIcon: PropTypes.string,
-  errorAction: PropTypes.func,
-  errorColor: PropTypes.string,
-  errorStyle: PropTypes.string,
-  showErrorIcon: PropTypes.bool,
-  errorWeight: PropTypes.string,
-  errorFamily: PropTypes.string,
-  errorZindex: PropTypes.string,
-  errorIconSide: PropTypes.oneOf(Object.values(IconSides)),
-  errorMessage: PropTypes.string,
-  errorPosition: PropTypes.string,
-  errorMarginTop: PropTypes.string,
-  errorClassName: PropTypes.string,
-  errorIconMargin: PropTypes.string,
-  errorLineHeight: PropTypes.string,
-  boxSizing: PropTypes.string,
-  boxShadow: PropTypes.string,
-  errorBoxShadow: PropTypes.string,
-  boxShadowHover: PropTypes.string,
-  phoneAlignItems: PropTypes.string,
-  numberMaxLength: PropTypes.number,
-  regexpErrorMessage: PropTypes.string,
-  regexp: PropTypes.instanceOf(RegExp),
-  fireInputInsideError: PropTypes.func,
-  telClass: PropTypes.string,
-  telBorderRightWidth: PropTypes.string,
-  telBorderRightStyle: PropTypes.string,
-  telBorderRightColor: PropTypes.string,
-  phoneJustifyContent: PropTypes.string,
-  backgroundColor: PropTypes.string,
-  backgroundDisableColor: PropTypes.string,
-  telBorderRightColorHover: PropTypes.string,
-  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]),
-  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
+  ssn: PropTypes__default["default"].bool,
+  size: PropTypes__default["default"].string,
+  name: PropTypes__default["default"].string,
+  change: PropTypes__default["default"].func,
+  style: PropTypes__default["default"].string,
+  color: PropTypes__default["default"].string,
+  width: PropTypes__default["default"].string,
+  withZero: PropTypes__default["default"].bool,
+  weight: PropTypes__default["default"].string,
+  family: PropTypes__default["default"].string,
+  required: PropTypes__default["default"].bool,
+  disabled: PropTypes__default["default"].bool,
+  height: PropTypes__default["default"].string,
+  radius: PropTypes__default["default"].string,
+  padding: PropTypes__default["default"].string,
+  cardNumber: PropTypes__default["default"].bool,
+  withoutDot: PropTypes__default["default"].bool,
+  className: PropTypes__default["default"].string,
+  iconWidth: PropTypes__default["default"].string,
+  iconPadding: PropTypes__default["default"].string,
+  maxLength: PropTypes__default["default"].number,
+  floatToFix: PropTypes__default["default"].number,
+  minNumSize: PropTypes__default["default"].number,
+  maxNumSize: PropTypes__default["default"].number,
+  borderRight: PropTypes__default["default"].string,
+  placeholder: PropTypes__default["default"].string,
+  placeholderColor: PropTypes__default["default"].string,
+  phoneDisplay: PropTypes__default["default"].string,
+  autoComplete: PropTypes__default["default"].string,
+  errorDots: PropTypes__default["default"].bool,
+  errorLeft: PropTypes__default["default"].string,
+  errorSize: PropTypes__default["default"].string,
+  errorIcon: PropTypes__default["default"].string,
+  errorAction: PropTypes__default["default"].func,
+  errorColor: PropTypes__default["default"].string,
+  errorStyle: PropTypes__default["default"].string,
+  showErrorIcon: PropTypes__default["default"].bool,
+  errorWeight: PropTypes__default["default"].string,
+  errorFamily: PropTypes__default["default"].string,
+  errorZindex: PropTypes__default["default"].string,
+  errorIconSide: PropTypes__default["default"].oneOf(Object.values(IconSides)),
+  errorMessage: PropTypes__default["default"].string,
+  errorPosition: PropTypes__default["default"].string,
+  errorMarginTop: PropTypes__default["default"].string,
+  errorClassName: PropTypes__default["default"].string,
+  errorIconMargin: PropTypes__default["default"].string,
+  errorLineHeight: PropTypes__default["default"].string,
+  boxSizing: PropTypes__default["default"].string,
+  boxShadow: PropTypes__default["default"].string,
+  errorBoxShadow: PropTypes__default["default"].string,
+  boxShadowHover: PropTypes__default["default"].string,
+  phoneAlignItems: PropTypes__default["default"].string,
+  numberMaxLength: PropTypes__default["default"].number,
+  regexpErrorMessage: PropTypes__default["default"].string,
+  regexp: PropTypes__default["default"].instanceOf(RegExp),
+  fireInputInsideError: PropTypes__default["default"].func,
+  telClass: PropTypes__default["default"].string,
+  telBorderRightWidth: PropTypes__default["default"].string,
+  telBorderRightStyle: PropTypes__default["default"].string,
+  telBorderRightColor: PropTypes__default["default"].string,
+  phoneJustifyContent: PropTypes__default["default"].string,
+  backgroundColor: PropTypes__default["default"].string,
+  backgroundDisableColor: PropTypes__default["default"].string,
+  telBorderRightColorHover: PropTypes__default["default"].string,
+  leftIcon: PropTypes__default["default"].arrayOf(PropTypes__default["default"].element),
+  rightIcon: PropTypes__default["default"].arrayOf(PropTypes__default["default"].element),
+  type: PropTypes__default["default"].oneOf(Object.values(InputTypes)),
+  value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number, PropTypes__default["default"].object]),
+  iconRequired: PropTypes__default["default"].element,
+  label: PropTypes__default["default"].string,
+  labelAction: PropTypes__default["default"].func,
+  labelIcon: PropTypes__default["default"].string,
+  labelSize: PropTypes__default["default"].string,
+  labelColor: PropTypes__default["default"].string,
+  labelStyle: PropTypes__default["default"].string,
+  showLabelIcon: PropTypes__default["default"].bool,
+  labelWeight: PropTypes__default["default"].string,
+  labelDisplay: PropTypes__default["default"].string,
+  labelIconSide: PropTypes__default["default"].oneOf(Object.values(IconSides)),
+  labelLineHeight: PropTypes__default["default"].string,
+  labelFontFamily: PropTypes__default["default"].string,
+  labelIconMargin: PropTypes__default["default"].string,
+  labelMarginBottom: PropTypes__default["default"].string,
+  useLabelTooltip: PropTypes__default["default"].bool,
+  labelTooltipColor: PropTypes__default["default"].string,
+  labelTooltipPadding: PropTypes__default["default"].string,
+  labelTooltipFontSize: PropTypes__default["default"].string,
+  labelTooltipFontStyle: PropTypes__default["default"].string,
+  labelTooltipFontFamily: PropTypes__default["default"].string,
+  labelTooltipFontWeight: PropTypes__default["default"].string,
+  labelTooltipBorderRadius: PropTypes__default["default"].string,
+  labelTooltipBackgroundColor: PropTypes__default["default"].string
 };
 
 const RadioDirectionMode = {
@@ -5986,11 +6089,11 @@ const Radio = ({
     }
   }, [keyNames]);
   React.useEffect(() => {
-    className && setClassProps(() => classnames(className ?? configStyles.RADIO.className));
+    className && setClassProps(() => classnames__default["default"](className ?? configStyles.RADIO.className));
   }, [className]);
   React.useEffect(() => {
     configStylesPromise.then(data => {
-      setClassProps(() => classnames(className ?? data.RADIO.className));
+      setClassProps(() => classnames__default["default"](className ?? data.RADIO.className));
       setConfigStyles(() => {
         return {
           ...data
@@ -6000,7 +6103,7 @@ const Radio = ({
       console.error(error);
     });
   }, []);
-  return configStyles.RADIO && /*#__PURE__*/React.createElement("div", {
+  return configStyles.RADIO && /*#__PURE__*/React__default["default"].createElement("div", {
     className: classProps,
     style: {
       display: 'flex',
@@ -6008,7 +6111,7 @@ const Radio = ({
     }
   }, innerData && innerData.length > 0 && innerData.map((item, index) => {
     const elemId = `TUI_${index}_radio_inner` + v4();
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React__default["default"].createElement("div", {
       key: `TUI_${index}_radio`,
       style: {
         display: 'flex',
@@ -6021,7 +6124,7 @@ const Radio = ({
       onClick: item[innerKeyNames.disabled] ? _ => _ : () => handleChecked(item),
       onMouseEnter: () => handleMouseEnter(item[innerKeyNames.id], elemId),
       onMouseLeave: () => handleMouseLeave(item[innerKeyNames.id], elemId)
-    }, /*#__PURE__*/React.createElement("div", {
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
       style: {
         display: 'flex',
         alignItems: 'center',
@@ -6033,7 +6136,7 @@ const Radio = ({
         border: `${borderSize ?? configStyles.RADIO.border.width} ${borderStyle ? borderStyle : configStyles.RADIO.border.style}`,
         borderColor: item[innerKeyNames.id] === innerSelectedData.id ? borderActiveColor ? borderActiveColor : configStyles.RADIO.border.activeColor : borderColor ? borderColor : configStyles.RADIO.border.color
       }
-    }, /*#__PURE__*/React.createElement("div", {
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
       id: elemId,
       style: {
         borderRadius: '100%',
@@ -6041,7 +6144,7 @@ const Radio = ({
         height: radioInnerSize + radioInnerFormat,
         backgroundColor: item[innerKeyNames.id] === innerSelectedData.id ? borderActiveColor ? borderActiveColor : configStyles.RADIO.border.activeColor : 'transparent'
       }
-    })), item[innerKeyNames.label] ? /*#__PURE__*/React.createElement("span", {
+    })), item[innerKeyNames.label] ? /*#__PURE__*/React__default["default"].createElement("span", {
       style: {
         color: item[innerKeyNames.id] === innerSelectedData.id ? labelActiveColor ?? configStyles.RADIO.label.activeColor : labelColor ?? configStyles.RADIO.label.color,
         fontSize: labelFontSize ?? configStyles.RADIO.label.font.size,
@@ -6054,28 +6157,28 @@ const Radio = ({
   }));
 };
 Radio.propTypes = {
-  size: PropTypes.string,
-  selected: PropTypes.object,
-  keyNames: PropTypes.object,
-  className: PropTypes.string,
-  borderSize: PropTypes.string,
-  labelColor: PropTypes.string,
-  borderColor: PropTypes.string,
-  borderStyle: PropTypes.string,
-  labelFontSize: PropTypes.string,
-  labelFontStyle: PropTypes.string,
-  labelActiveColor: PropTypes.string,
-  labelFontFamily: PropTypes.string,
-  labelFontWeight: PropTypes.string,
-  labelLineHeight: PropTypes.string,
-  radioMarginRight: PropTypes.string,
-  getData: PropTypes.func.isRequired,
-  borderHoverColor: PropTypes.string,
-  borderActiveColor: PropTypes.string,
-  radioItemMarginRight: PropTypes.string,
-  radioItemMarginBottom: PropTypes.string,
-  diraction: PropTypes.oneOf(Object.values(RadioDirectionMode)),
-  data: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object])
+  size: PropTypes__default["default"].string,
+  selected: PropTypes__default["default"].object,
+  keyNames: PropTypes__default["default"].object,
+  className: PropTypes__default["default"].string,
+  borderSize: PropTypes__default["default"].string,
+  labelColor: PropTypes__default["default"].string,
+  borderColor: PropTypes__default["default"].string,
+  borderStyle: PropTypes__default["default"].string,
+  labelFontSize: PropTypes__default["default"].string,
+  labelFontStyle: PropTypes__default["default"].string,
+  labelActiveColor: PropTypes__default["default"].string,
+  labelFontFamily: PropTypes__default["default"].string,
+  labelFontWeight: PropTypes__default["default"].string,
+  labelLineHeight: PropTypes__default["default"].string,
+  radioMarginRight: PropTypes__default["default"].string,
+  getData: PropTypes__default["default"].func.isRequired,
+  borderHoverColor: PropTypes__default["default"].string,
+  borderActiveColor: PropTypes__default["default"].string,
+  radioItemMarginRight: PropTypes__default["default"].string,
+  radioItemMarginBottom: PropTypes__default["default"].string,
+  diraction: PropTypes__default["default"].oneOf(Object.values(RadioDirectionMode)),
+  data: PropTypes__default["default"].oneOfType([PropTypes__default["default"].arrayOf(PropTypes__default["default"].object), PropTypes__default["default"].object])
 };
 
 const SvgArrow = ({
@@ -6098,7 +6201,7 @@ const SvgArrow = ({
 }));
 
 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"};
+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);
 
 const Select = ({
@@ -6371,11 +6474,11 @@ const Select = ({
     }
   }, [options, multiple, selected, selected?.length]);
   React.useEffect(() => {
-    className && setClassProps(() => classnames(className ?? configStyles.SELECT.className));
+    className && setClassProps(() => classnames__default["default"](className ?? configStyles.SELECT.className));
   }, [className]);
   React.useEffect(() => {
     configStylesPromise.then(data => {
-      setClassProps(() => classnames(className ?? data.SELECT.className));
+      setClassProps(() => classnames__default["default"](className ?? data.SELECT.className));
       setConfigStyles(() => {
         return {
           ...data
@@ -6385,14 +6488,14 @@ const Select = ({
       console.error(error);
     });
   }, []);
-  return configStyles.SELECT && /*#__PURE__*/React.createElement("div", {
+  return configStyles.SELECT && /*#__PURE__*/React__default["default"].createElement("div", {
     ref: parentRef,
     className: classProps,
     style: {
       position: 'relative',
       width: '100%'
     }
-  }, label && /*#__PURE__*/React.createElement("div", {
+  }, label && /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       display: 'flex',
       maxWidth: '100%',
@@ -6400,7 +6503,7 @@ const Select = ({
       columnGap: '4px',
       justifyContent: 'flex-start'
     }
-  }, /*#__PURE__*/React.createElement("label", {
+  }, /*#__PURE__*/React__default["default"].createElement("label", {
     ref: labelRef,
     style: {
       color: labelColor ?? configStyles.SELECT.label.color,
@@ -6418,11 +6521,11 @@ const Select = ({
     },
     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.createElement("sup", null, iconRequired ? iconRequired : configStyles.SELECT.icon.required ? configStyles.SELECT.icon.required : /*#__PURE__*/React.createElement(SvgRequired, null))), /*#__PURE__*/React.createElement("div", {
+  }, label), required && /*#__PURE__*/React__default["default"].createElement("sup", null, iconRequired ? iconRequired : configStyles.SELECT.icon.required ? configStyles.SELECT.icon.required : /*#__PURE__*/React__default["default"].createElement(SvgRequired, null))), /*#__PURE__*/React__default["default"].createElement("div", {
     ref: ref
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles$7['select-content']
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${styles$7['select-content-top']}`,
     style: {
       cursor: disabled ? 'not-allowed' : cursor ? cursor : configStyles.SELECT.selected.cursor,
@@ -6443,7 +6546,7 @@ const Select = ({
     onClick: disabled ? _ => _ : () => handleOpenClose(),
     onMouseEnter: disabled ? _ => _ : () => handleMouseEnter(),
     onMouseLeave: disabled ? _ => _ : () => handleMouseLeave()
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "select-content-top-text",
     style: {
       whiteSpace: disabled ? 'pre-wrap' : 'nowrap',
@@ -6459,24 +6562,24 @@ const Select = ({
         return newSelected[index][keyNames.name];
       }
     }
-  }) : defaultOption ? defaultOption : ''), /*#__PURE__*/React.createElement("div", {
+  }) : defaultOption ? defaultOption : ''), /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${styles$7['select-content-top-icon']}`,
     style: {
       padding: lang ? '0px' : insidePagination ? '0px 5px' : '0 5px 0 20px'
     }
-  }, !disabled && multiple && newSelected.length > 1 && /*#__PURE__*/React.createElement("span", null, newSelected.length), (showCloseIcon === true || showCloseIcon === false ? showCloseIcon : configStyles.SELECT.showCloseIcon) && !disabled && newSelected && newSelected.length > 0 && /*#__PURE__*/React.createElement("div", {
+  }, !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']}`,
     onClick: disabled ? _ => _ : handleClearSelect,
     style: {
       marginLeft: multiple && newSelected.length > 1 ? '17px' : '0px'
     }
-  }, closeIcon ? closeIcon : configStyles.SELECT.closeIcon ? configStyles.SELECT.closeIcon : /*#__PURE__*/React.createElement(SvgCloseIcon, null)), !disabled ? /*#__PURE__*/React.createElement("div", {
+  }, 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']}`,
     style: {
       marginLeft: lang ? '0px' : '9px',
       transform: arrowNoRotate || configStyles.SELECT.arrowNoRotate ? 'rotate(0deg)' : opened ? 'rotate(180deg)' : 'rotate(0deg)'
     }
-  }, arrowIcon ? arrowIcon : configStyles.SELECT.arrowIcon ? configStyles.SELECT.arrowIcon : /*#__PURE__*/React.createElement(SvgArrow, null)) : '')), opened && existOptions && existOptions.length > 0 && !disabled ? /*#__PURE__*/React.createElement("div", {
+  }, arrowIcon ? arrowIcon : configStyles.SELECT.arrowIcon ? configStyles.SELECT.arrowIcon : /*#__PURE__*/React__default["default"].createElement(SvgArrow, null)) : '')), opened && existOptions && existOptions.length > 0 && !disabled ? /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       boxShadow: optionsBoxShadow ?? configStyles.SELECT.options.box.shadow,
       borderRadius: optionsBorderRadius ?? configStyles.SELECT.options.radius,
@@ -6484,10 +6587,10 @@ const Select = ({
       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']}`
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${styles$7['select-content-bottom-inner']}`
   }, existOptions && existOptions.length > 0 && existOptions.map((option, i) => {
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React__default["default"].createElement("div", {
       key: i,
       disabled: true,
       defaultValue: option[keyNames.id],
@@ -6511,10 +6614,10 @@ const Select = ({
         backgroundColor: optionItemBackgroudColor ?? configStyles.SELECT.options.item.colors.backgroud,
         justifyContent: lang ? 'center' : 'flex-start'
       }
-    }, multiple && multipleCheckbox ? /*#__PURE__*/React.createElement(SingleCheckbox, {
+    }, multiple && multipleCheckbox ? /*#__PURE__*/React__default["default"].createElement(SingleCheckbox, {
       checked: option.checked
     }) : '', option[keyNames.name]);
-  }))) : null)), errorMessage ? /*#__PURE__*/React.createElement("span", {
+  }))) : null)), errorMessage ? /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
       position: 'absolute',
       columnGap: '4px',
@@ -6530,85 +6633,85 @@ const Select = ({
   }, showErrorIcon ? errorIcon ? errorIcon : configStyles.SELECT.error?.icon ? configStyles.SELECT.error?.icon : '' : '', errorMessage) : '');
 };
 Select.propTypes = {
-  dots: PropTypes.bool,
-  lang: PropTypes.bool,
-  options: PropTypes.array,
-  multiple: PropTypes.bool,
-  onChange: PropTypes.func,
-  required: PropTypes.bool,
-  disabled: PropTypes.bool,
-  selected: PropTypes.array,
-  keyNames: PropTypes.object,
-  marginTop: PropTypes.string,
-  className: PropTypes.string,
-  arrowIcon: PropTypes.element,
-  closeIcon: PropTypes.element,
-  arrowNoRotate: PropTypes.bool,
-  showCloseIcon: PropTypes.bool,
-  errorZindex: PropTypes.number,
-  errorMessage: PropTypes.string,
-  defaultOption: PropTypes.string,
-  multipleCheckbox: PropTypes.bool,
-  label: PropTypes.string,
-  labelColor: PropTypes.string,
-  labelWeight: PropTypes.string,
-  labelDisplay: PropTypes.string,
-  labelFontSize: PropTypes.string,
-  labelFontStyle: PropTypes.string,
-  labelLineHeight: PropTypes.string,
-  labelFontFamily: PropTypes.string,
-  labelMarginBottom: PropTypes.string,
-  labelTextTransform: PropTypes.string,
-  cursor: PropTypes.string,
-  errorSize: PropTypes.string,
-  errorColor: PropTypes.string,
-  errorIcon: PropTypes.element,
-  showErrorIcon: PropTypes.bool,
-  selectedColor: PropTypes.string,
-  selectedRadius: PropTypes.string,
-  selectedMinHeight: PropTypes.string,
-  selectedPadding: PropTypes.string,
-  selectedFontSize: PropTypes.string,
-  selectedFontStyle: PropTypes.string,
-  selectedBoxSizing: PropTypes.string,
-  selectedFontFamily: PropTypes.string,
-  selectedHoverColor: PropTypes.string,
-  selectedFontWeight: PropTypes.string,
-  selectedLineHeight: PropTypes.string,
-  selectedTransition: PropTypes.string,
-  selectedBackgroundColor: PropTypes.string,
-  selectedDisableBackgroundColor: PropTypes.string,
-  optionsBoxShadow: PropTypes.string,
-  optionsBorderRadius: PropTypes.string,
-  optionsBackgroundColor: PropTypes.string,
-  optionItemColor: PropTypes.string,
-  optionItemCursor: PropTypes.string,
-  optionItemPadding: PropTypes.string,
-  optionItemFontSize: PropTypes.string,
-  optionItemFontStyle: PropTypes.string,
-  optionItemFontFamily: PropTypes.string,
-  optionItemMinHeight: PropTypes.string,
-  optionItemBoxSizing: PropTypes.string,
-  optionItemFontWeight: PropTypes.string,
-  optionItemColorHover: PropTypes.string,
-  optionItemLineHeight: PropTypes.string,
-  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,
-  placeholderColor: PropTypes.string
+  dots: PropTypes__default["default"].bool,
+  lang: PropTypes__default["default"].bool,
+  options: PropTypes__default["default"].array,
+  multiple: PropTypes__default["default"].bool,
+  onChange: PropTypes__default["default"].func,
+  required: PropTypes__default["default"].bool,
+  disabled: PropTypes__default["default"].bool,
+  selected: PropTypes__default["default"].array,
+  keyNames: PropTypes__default["default"].object,
+  marginTop: PropTypes__default["default"].string,
+  className: PropTypes__default["default"].string,
+  arrowIcon: PropTypes__default["default"].element,
+  closeIcon: PropTypes__default["default"].element,
+  arrowNoRotate: PropTypes__default["default"].bool,
+  showCloseIcon: PropTypes__default["default"].bool,
+  errorZindex: PropTypes__default["default"].number,
+  errorMessage: PropTypes__default["default"].string,
+  defaultOption: PropTypes__default["default"].string,
+  multipleCheckbox: PropTypes__default["default"].bool,
+  label: PropTypes__default["default"].string,
+  labelColor: PropTypes__default["default"].string,
+  labelWeight: PropTypes__default["default"].string,
+  labelDisplay: PropTypes__default["default"].string,
+  labelFontSize: PropTypes__default["default"].string,
+  labelFontStyle: PropTypes__default["default"].string,
+  labelLineHeight: PropTypes__default["default"].string,
+  labelFontFamily: PropTypes__default["default"].string,
+  labelMarginBottom: PropTypes__default["default"].string,
+  labelTextTransform: PropTypes__default["default"].string,
+  cursor: PropTypes__default["default"].string,
+  errorSize: PropTypes__default["default"].string,
+  errorColor: PropTypes__default["default"].string,
+  errorIcon: PropTypes__default["default"].element,
+  showErrorIcon: PropTypes__default["default"].bool,
+  selectedColor: PropTypes__default["default"].string,
+  selectedRadius: PropTypes__default["default"].string,
+  selectedMinHeight: PropTypes__default["default"].string,
+  selectedPadding: PropTypes__default["default"].string,
+  selectedFontSize: PropTypes__default["default"].string,
+  selectedFontStyle: PropTypes__default["default"].string,
+  selectedBoxSizing: PropTypes__default["default"].string,
+  selectedFontFamily: PropTypes__default["default"].string,
+  selectedHoverColor: PropTypes__default["default"].string,
+  selectedFontWeight: PropTypes__default["default"].string,
+  selectedLineHeight: PropTypes__default["default"].string,
+  selectedTransition: PropTypes__default["default"].string,
+  selectedBackgroundColor: PropTypes__default["default"].string,
+  selectedDisableBackgroundColor: PropTypes__default["default"].string,
+  optionsBoxShadow: PropTypes__default["default"].string,
+  optionsBorderRadius: PropTypes__default["default"].string,
+  optionsBackgroundColor: PropTypes__default["default"].string,
+  optionItemColor: PropTypes__default["default"].string,
+  optionItemCursor: PropTypes__default["default"].string,
+  optionItemPadding: PropTypes__default["default"].string,
+  optionItemFontSize: PropTypes__default["default"].string,
+  optionItemFontStyle: PropTypes__default["default"].string,
+  optionItemFontFamily: PropTypes__default["default"].string,
+  optionItemMinHeight: PropTypes__default["default"].string,
+  optionItemBoxSizing: PropTypes__default["default"].string,
+  optionItemFontWeight: PropTypes__default["default"].string,
+  optionItemColorHover: PropTypes__default["default"].string,
+  optionItemLineHeight: PropTypes__default["default"].string,
+  optionItemMarginBottom: PropTypes__default["default"].string,
+  optionItemBackgroudColor: PropTypes__default["default"].string,
+  optionItemBackgroudColorHover: PropTypes__default["default"].string,
+  iconRequired: PropTypes__default["default"].element,
+  useLabelTooltip: PropTypes__default["default"].bool,
+  labelTooltipColor: PropTypes__default["default"].string,
+  labelTooltipPadding: PropTypes__default["default"].string,
+  labelTooltipFontSize: PropTypes__default["default"].string,
+  labelTooltipFontStyle: PropTypes__default["default"].string,
+  labelTooltipFontFamily: PropTypes__default["default"].string,
+  labelTooltipFontWeight: PropTypes__default["default"].string,
+  labelTooltipBorderRadius: PropTypes__default["default"].string,
+  labelTooltipBackgroundColor: PropTypes__default["default"].string,
+  boxShadow: PropTypes__default["default"].string,
+  boxShadowHover: PropTypes__default["default"].string,
+  insidePagination: PropTypes__default["default"].bool,
+  placeholderColor: PropTypes__default["default"].string
 };
 
 const SvgToasterInfo = ({
@@ -6787,7 +6890,7 @@ const Toast = ({
       clearTimeout(timeoutClick);
     };
   }, []);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default["default"].createElement("div", {
     ref: ref,
     onClick: handleToasterClick,
     style: {
@@ -6802,7 +6905,7 @@ const Toast = ({
                 ${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'] : ''}
             `
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       display: 'flex',
       height: `calc(${propStyles.height} - 28px)`,
@@ -6813,7 +6916,7 @@ const Toast = ({
       alignItems: 'center',
       justifyContent: 'center'
     }
-  }, type === 'info' ? icons.info ? /*#__PURE__*/React.createElement("img", {
+  }, type === 'info' ? icons.info ? /*#__PURE__*/React__default["default"].createElement("img", {
     src: icons.info,
     alt: "icons",
     style: {
@@ -6822,7 +6925,7 @@ const Toast = ({
       objectFit: 'cover',
       objectPosition: 'center'
     }
-  }) : /*#__PURE__*/React.createElement(SvgToasterInfo, null) : type === 'warn' ? icons.warn ? /*#__PURE__*/React.createElement("img", {
+  }) : /*#__PURE__*/React__default["default"].createElement(SvgToasterInfo, null) : type === 'warn' ? icons.warn ? /*#__PURE__*/React__default["default"].createElement("img", {
     src: icons.warn,
     alt: "icons",
     style: {
@@ -6831,7 +6934,7 @@ const Toast = ({
       objectFit: 'cover',
       objectPosition: 'center'
     }
-  }) : /*#__PURE__*/React.createElement(SvgToasterWarning, null) : type === 'error' ? icons.error ? /*#__PURE__*/React.createElement("img", {
+  }) : /*#__PURE__*/React__default["default"].createElement(SvgToasterWarning, null) : type === 'error' ? icons.error ? /*#__PURE__*/React__default["default"].createElement("img", {
     src: icons.error,
     alt: "icons",
     style: {
@@ -6840,7 +6943,7 @@ const Toast = ({
       objectFit: 'cover',
       objectPosition: 'center'
     }
-  }) : /*#__PURE__*/React.createElement(SvgToasterError, null) : type === 'success' ? icons.success ? /*#__PURE__*/React.createElement("img", {
+  }) : /*#__PURE__*/React__default["default"].createElement(SvgToasterError, null) : type === 'success' ? icons.success ? /*#__PURE__*/React__default["default"].createElement("img", {
     src: icons.success,
     alt: "icons",
     style: {
@@ -6849,14 +6952,14 @@ const Toast = ({
       objectFit: 'cover',
       objectPosition: 'center'
     }
-  }) : /*#__PURE__*/React.createElement(SvgToasterSuccess, null) : ''), /*#__PURE__*/React.createElement("div", {
+  }) : /*#__PURE__*/React__default["default"].createElement(SvgToasterSuccess, null) : ''), /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       height: '100%',
       width: `calc(100% - ${finalCheck})`,
       minWidth: '50%',
       maxWidth: 'calc(100% - 90px)'
     }
-  }, title && /*#__PURE__*/React.createElement("p", {
+  }, title && /*#__PURE__*/React__default["default"].createElement("p", {
     style: {
       margin: '0px',
       color: titleStyles.color,
@@ -6868,7 +6971,7 @@ const Toast = ({
       ...titleStyles.props
     },
     className: styles$6['notify-title']
-  }, title), description && /*#__PURE__*/React.createElement("span", {
+  }, title), description && /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
       color: descriptionStyles.color,
       fontSize: descriptionStyles.font.size,
@@ -6879,7 +6982,7 @@ const Toast = ({
       ...descriptionStyles.props
     },
     className: styles$6['notify-desc']
-  }, description)), /*#__PURE__*/React.createElement("div", {
+  }, description)), /*#__PURE__*/React__default["default"].createElement("div", {
     onClick: () => handleCloseToaster(ref),
     style: {
       width: `calc(${propStyles.height} - 65px)`,
@@ -6888,7 +6991,7 @@ const Toast = ({
       minHeight: '18px',
       cursor: 'pointer'
     }
-  }, icons.close ? /*#__PURE__*/React.createElement("img", {
+  }, icons.close ? /*#__PURE__*/React__default["default"].createElement("img", {
     src: icons.close,
     alt: "icons",
     style: {
@@ -6897,15 +7000,15 @@ const Toast = ({
       objectFit: 'cover',
       objectPosition: 'center'
     }
-  }) : /*#__PURE__*/React.createElement(SvgToasterClose, null)));
+  }) : /*#__PURE__*/React__default["default"].createElement(SvgToasterClose, null)));
 };
 Toast.propTypes = {
-  timer: PropTypes.number,
-  title: PropTypes.string,
-  description: PropTypes.string,
-  removeToast: PropTypes.func.isRequired,
-  position: PropTypes.oneOf(Object.values(ToasterPosition)),
-  type: PropTypes.oneOf(Object.values(ToasterType)).isRequired
+  timer: PropTypes__default["default"].number,
+  title: PropTypes__default["default"].string,
+  description: PropTypes__default["default"].string,
+  removeToast: PropTypes__default["default"].func.isRequired,
+  position: PropTypes__default["default"].oneOf(Object.values(ToasterPosition)),
+  type: PropTypes__default["default"].oneOf(Object.values(ToasterType)).isRequired
 };
 
 let toastify = document.getElementById('toastify');
@@ -6928,21 +7031,21 @@ const removeToast = ref => {
 const createElem$1 = (type, timer, title, position, styleProps, toastBlock, description, innerConfigStyles) => {
   const projectTitleStyle = styleProps?.title;
   const packageTitleStyle = innerConfigStyles?.TOASTER?.title;
-  const compareTitleStyles = _.merge({
+  const compareTitleStyles = ___default["default"].merge({
     ...packageTitleStyle
   }, {
     ...projectTitleStyle
   });
   const projectDescStyle = styleProps?.description;
   const packageDescStyle = innerConfigStyles?.TOASTER?.description;
-  const compareDescStyles = _.merge({
+  const compareDescStyles = ___default["default"].merge({
     ...packageDescStyle
   }, {
     ...projectDescStyle
   });
   const projectIcons = styleProps?.icons;
   const packageIcons = innerConfigStyles?.TOASTER?.icons;
-  const icons = _.merge({
+  const icons = ___default["default"].merge({
     ...packageIcons
   }, {
     ...projectIcons
@@ -6952,7 +7055,7 @@ const createElem$1 = (type, timer, title, position, styleProps, toastBlock, desc
   toastBlock.style.width = styleProps?.width ?? innerConfigStyles?.TOASTER?.width;
   toastBlock.style.height = styleProps?.height ?? innerConfigStyles?.TOASTER?.height;
   toastBlock.style.marginBottom = styleProps?.marginBottom ?? innerConfigStyles?.TOASTER?.marginBottom;
-  const newElem = /*#__PURE__*/React.createElement(Toast, {
+  const newElem = /*#__PURE__*/React__default["default"].createElement(Toast, {
     type,
     icons,
     timer,
@@ -6973,7 +7076,7 @@ const createElem$1 = (type, timer, title, position, styleProps, toastBlock, desc
     titleStyles: compareTitleStyles,
     descriptionStyles: compareDescStyles
   });
-  const root = ReactDOM.createRoot(toastBlock);
+  const root = ReactDOM__default["default"].createRoot(toastBlock);
   root.render(newElem);
 };
 const createToast = ({
@@ -7107,7 +7210,7 @@ const Toaster = () => {
       console.error(error);
     });
   }, []);
-  return configStyles.TOASTER && /*#__PURE__*/React.createElement("div", {
+  return configStyles.TOASTER && /*#__PURE__*/React__default["default"].createElement("div", {
     onClick: handleToasterClick,
     id: "toastify"
   });
@@ -7206,7 +7309,7 @@ const Tooltip = ({
     iconBlockRef.current && iconBlockRef.current.clientHeight && iconBlockRef.current.clientHeight > 0 && setTooltipIconBlockHeight(iconBlockRef.current.clientHeight);
   }, [iconBlockRef, tooltipIconParentWidth, tooltipIconParentHeight]);
   React.useEffect(() => {
-    className && setClassProps(() => classnames(className ?? configStyles.TOOLTIP.className));
+    className && setClassProps(() => classnames__default["default"](className ?? configStyles.TOOLTIP.className));
   }, [className]);
   React.useEffect(() => {
     document.addEventListener('click', () => {
@@ -7222,7 +7325,7 @@ const Tooltip = ({
   }, [showTooltip]);
   React.useEffect(() => {
     configStylesPromise.then(data => {
-      setClassProps(() => classnames(styles$5['tooltip-block'], className ?? data.TOOLTIP.className));
+      setClassProps(() => classnames__default["default"](styles$5['tooltip-block'], className ?? data.TOOLTIP.className));
       setConfigStyles(() => {
         return {
           ...data
@@ -7232,7 +7335,7 @@ const Tooltip = ({
       console.error(error);
     });
   }, []);
-  return configStyles.TOOLTIP && /*#__PURE__*/React.createElement("div", {
+  return configStyles.TOOLTIP && /*#__PURE__*/React__default["default"].createElement("div", {
     ref: tooltipIconParentRef,
     className: classProps,
     style: {
@@ -7242,7 +7345,7 @@ const Tooltip = ({
       backgroundColor: backgroundColor ?? configStyles.TOOLTIP.parent.colors.background
     },
     onClick: e => e.stopPropagation()
-  }, showTooltip ? /*#__PURE__*/React.createElement("div", {
+  }, showTooltip ? /*#__PURE__*/React__default["default"].createElement("div", {
     ref: tooltipRef,
     className: `${styles$5['tooltip']}`,
     style: {
@@ -7252,16 +7355,16 @@ const Tooltip = ({
       top: direction === 'top' || direction === 'top-left' || direction === 'top-right' ? `calc(-${checkTooltipHeight + 7}px)` : direction === 'bottom' || direction === 'bottom-left' || direction === 'bottom-right' ? 'calc(100% + 7px)' : direction === 'left' || direction === 'right' ? `calc(50% - ${checkTooltipHeight / 2}px)` : direction === 'left-top' || direction === 'right-top' ? '0px' : direction === 'left-bottom' || direction === 'right-bottom' ? `calc(-${checkTooltipHeight - tooltipIconParentHeight}px)` : '0px',
       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.createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${styles$5['tooltip-rel']}`
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${styles$5['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',
       top: direction === 'top' || direction === 'top-left' || direction === 'top-right' ? 'calc(100% + 5px)' : direction === 'bottom' || direction === 'bottom-left' || direction === 'bottom-right' ? '-15px' : direction === 'right' || direction === 'left' ? 'calc(50% - 5px)' : direction === 'left-top' || direction === 'right-top' ? `${tooltipIconParentHeight / 2 - tooltipIconBlockHeight}px` : direction === 'left-bottom' || direction === 'right-bottom' ? `calc(100% - ${tooltipIconParentHeight / 2 - tooltipIconBlockHeight / 2}px` : '0px'
     }
-  }), /*#__PURE__*/React.createElement("p", {
+  }), /*#__PURE__*/React__default["default"].createElement("p", {
     style: {
       color: color ?? configStyles.TOOLTIP.color,
       fontSize: fontSize ?? configStyles.TOOLTIP.font.size,
@@ -7269,7 +7372,7 @@ const Tooltip = ({
       fontFamily: fontFamily ?? configStyles.TOOLTIP.font.family,
       fontWeight: fontWeight ?? configStyles.TOOLTIP.font.weight
     }
-  }, text))) : '', /*#__PURE__*/React.createElement("div", {
+  }, text))) : '', /*#__PURE__*/React__default["default"].createElement("div", {
     ref: iconBlockRef,
     onClick: hoverOpen ? _ => _ : handleShow,
     style: {
@@ -7278,26 +7381,26 @@ const Tooltip = ({
     },
     onMouseEnter: hoverOpen ? handleMouseEnter : _ => _,
     onMouseLeave: hoverOpen ? handleMouseLeave : _ => _
-  }, tooltipIcon ? tooltipIcon : configStyles.TOOLTIP.icon ? configStyles.TOOLTIP.icon : /*#__PURE__*/React.createElement(SvgTooltip, null)));
+  }, tooltipIcon ? tooltipIcon : configStyles.TOOLTIP.icon ? configStyles.TOOLTIP.icon : /*#__PURE__*/React__default["default"].createElement(SvgTooltip, null)));
 };
 Tooltip.propTypes = {
-  width: PropTypes.string,
-  color: PropTypes.string,
-  height: PropTypes.string,
-  radius: PropTypes.string,
-  hoverOpen: PropTypes.bool,
-  fontSize: PropTypes.string,
-  fontStyle: PropTypes.string,
-  className: PropTypes.string,
-  fontFamily: PropTypes.string,
-  fontWeight: PropTypes.string,
-  tooltipWidth: PropTypes.string,
-  tooltipIcon: PropTypes.element,
-  tooltipRadius: PropTypes.string,
-  text: PropTypes.string.isRequired,
-  backgroundColor: PropTypes.string,
-  tooltipBackgroundColor: PropTypes.string,
-  direction: PropTypes.oneOf(Object.values(TooltipDirections))
+  width: PropTypes__default["default"].string,
+  color: PropTypes__default["default"].string,
+  height: PropTypes__default["default"].string,
+  radius: PropTypes__default["default"].string,
+  hoverOpen: PropTypes__default["default"].bool,
+  fontSize: PropTypes__default["default"].string,
+  fontStyle: PropTypes__default["default"].string,
+  className: PropTypes__default["default"].string,
+  fontFamily: PropTypes__default["default"].string,
+  fontWeight: PropTypes__default["default"].string,
+  tooltipWidth: PropTypes__default["default"].string,
+  tooltipIcon: PropTypes__default["default"].element,
+  tooltipRadius: PropTypes__default["default"].string,
+  text: PropTypes__default["default"].string.isRequired,
+  backgroundColor: PropTypes__default["default"].string,
+  tooltipBackgroundColor: PropTypes__default["default"].string,
+  direction: PropTypes__default["default"].oneOf(Object.values(TooltipDirections))
 };
 
 const SvgCaptchaArrowUp = ({
@@ -7379,11 +7482,11 @@ const Captcha = ({
     }
   }, [range, getRange]);
   React.useEffect(() => {
-    className && setClassProps(() => classnames(className ?? configStyles.CAPTCHA.className));
+    className && setClassProps(() => classnames__default["default"](className ?? configStyles.CAPTCHA.className));
   }, [className]);
   React.useEffect(() => {
     configStylesPromise.then(data => {
-      setClassProps(() => classnames(className ?? data.CAPTCHA.className));
+      setClassProps(() => classnames__default["default"](className ?? data.CAPTCHA.className));
       setConfigStyles(() => {
         return {
           ...data
@@ -7393,9 +7496,9 @@ const Captcha = ({
       console.error(error);
     });
   }, []);
-  return configStyles.CAPTCHA && /*#__PURE__*/React.createElement("div", {
+  return configStyles.CAPTCHA && /*#__PURE__*/React__default["default"].createElement("div", {
     className: classProps
-  }, label && /*#__PURE__*/React.createElement("p", {
+  }, label && /*#__PURE__*/React__default["default"].createElement("p", {
     style: {
       color: color ?? configStyles.CAPTCHA.label.color,
       fontSize: fontSize ?? configStyles.CAPTCHA.label.font.size,
@@ -7403,21 +7506,21 @@ const Captcha = ({
       fontFamily: fontFamily ?? configStyles.CAPTCHA.label.font.family,
       fontWeight: fontWeight ?? configStyles.CAPTCHA.label.font.weight
     }
-  }, label), /*#__PURE__*/React.createElement("div", {
+  }, label), /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       width: '100%',
       height: '76px',
       maxWidth: '400px',
       position: 'relative'
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       position: 'absolute',
       top: '0px',
       height: '15px',
       left: `calc(${rangeNumber}% - 6px)`
     }
-  }, /*#__PURE__*/React.createElement(SvgCaptchaArrowDown, null)), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement(SvgCaptchaArrowDown, null)), /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       position: 'absolute',
       display: 'flex',
@@ -7429,7 +7532,7 @@ const Captcha = ({
       zIndex: 1
     },
     className: styles$4['start-point']
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       position: 'absolute',
       top: '13px',
@@ -7440,7 +7543,7 @@ const Captcha = ({
       borderRadius: '10px',
       zIndex: -2
     }
-  }), /*#__PURE__*/React.createElement("input", {
+  }), /*#__PURE__*/React__default["default"].createElement("input", {
     min: 0,
     step: 5,
     max: 100,
@@ -7458,7 +7561,7 @@ const Captcha = ({
                             ${+rangeProgress === rangeNumber ? styles$4['range-success'] : +rangeProgress !== rangeNumber && +rangeProgress > 0 ? styles$4['range-error'] : styles$4['range-default']}
                         `,
     onInput: handleRange
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       position: 'absolute',
       top: '13px',
@@ -7469,7 +7572,7 @@ const Captcha = ({
       backgroundColor: +rangeProgress === rangeNumber ? '#0DA574' : +rangeProgress !== rangeNumber && +rangeProgress > 0 ? '#EE0000' : 'transparent',
       zIndex: -1
     }
-  })), /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       position: 'absolute',
       bottom: '0px',
@@ -7477,12 +7580,12 @@ const Captcha = ({
       left: `calc(${rangeNumber}% - 6px)`,
       transform: 'translate(-50% -50%)'
     }
-  }, /*#__PURE__*/React.createElement(SvgCaptchaArrowUp, null))));
+  }, /*#__PURE__*/React__default["default"].createElement(SvgCaptchaArrowUp, null))));
 };
 Captcha.propTypes = {
-  label: PropTypes.string,
-  range: PropTypes.number.isRequired,
-  getRange: PropTypes.func.isRequired
+  label: PropTypes__default["default"].string,
+  range: PropTypes__default["default"].number.isRequired,
+  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}";
@@ -7497,11 +7600,11 @@ const Stepper = ({
   const [classProps, setClassProps] = React.useState({});
   const [configStyles, setConfigStyles] = React.useState({});
   React.useEffect(() => {
-    className && setClassProps(() => classnames(className ?? configStyles.STEPPER.className, `${styles$3['stepper-container']} stepper-container-rem`));
+    className && setClassProps(() => classnames__default["default"](className ?? configStyles.STEPPER.className, `${styles$3['stepper-container']} stepper-container-rem`));
   }, [className]);
   React.useEffect(() => {
     configStylesPromise.then(data => {
-      setClassProps(() => classnames(className ?? data.STEPPER.className, `${styles$3['stepper-container']} stepper-container-rem`));
+      setClassProps(() => classnames__default["default"](className ?? data.STEPPER.className, `${styles$3['stepper-container']} stepper-container-rem`));
       setConfigStyles(() => {
         return {
           ...data
@@ -7511,26 +7614,26 @@ const Stepper = ({
       console.error(error);
     });
   }, []);
-  return configStyles.STEPPER && /*#__PURE__*/React.createElement("div", {
+  return configStyles.STEPPER && /*#__PURE__*/React__default["default"].createElement("div", {
     className: classProps
   }, (() => {
     let steppers = [];
     for (let step = 1; step <= stepLength; step++) {
-      steppers.push(/*#__PURE__*/React.createElement("div", {
-        className: classnames(`${step <= activeSteps ? styles$3.activeRing : styles$3.bigRing}`),
+      steppers.push(/*#__PURE__*/React__default["default"].createElement("div", {
+        className: classnames__default["default"](`${step <= activeSteps ? styles$3.activeRing : styles$3.bigRing}`),
         key: step
-      }, /*#__PURE__*/React.createElement("div", {
-        className: classnames(`${step <= activeSteps ? styles$3.smallActiveRing : styles$3.smallRing}`)
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: classnames__default["default"](`${step <= activeSteps ? styles$3.smallActiveRing : styles$3.smallRing}`)
       }, step <= activeSteps ? step : '')));
     }
     return steppers;
   })());
 };
 Stepper.propTypes = {
-  className: PropTypes.string,
-  onChange: PropTypes.func,
-  stepLength: PropTypes.number,
-  activeSteps: PropTypes.number
+  className: PropTypes__default["default"].string,
+  onChange: PropTypes__default["default"].func,
+  stepLength: PropTypes__default["default"].number,
+  activeSteps: PropTypes__default["default"].number
 };
 
 const DirectionMode = {
@@ -7593,11 +7696,11 @@ const Checkbox = ({
     }
   }, [keyNames]);
   React.useEffect(() => {
-    className && setClassProps(() => classnames(className ?? configStyles.CHECKBOX.className));
+    className && setClassProps(() => classnames__default["default"](className ?? configStyles.CHECKBOX.className));
   }, [className]);
   React.useEffect(() => {
     configStylesPromise.then(data => {
-      setClassProps(() => classnames(className ?? data.CHECKBOX.className));
+      setClassProps(() => classnames__default["default"](className ?? data.CHECKBOX.className));
       setConfigStyles(() => {
         return {
           ...data
@@ -7607,7 +7710,7 @@ const Checkbox = ({
       console.error(error);
     });
   }, []);
-  return configStyles.CHECKBOX && /*#__PURE__*/React.createElement("div", {
+  return configStyles.CHECKBOX && /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       width: '100%',
       display: 'flex',
@@ -7615,13 +7718,13 @@ const Checkbox = ({
     },
     className: classProps
   }, innerData && innerData.length > 0 && innerData.map((item, index) => {
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React__default["default"].createElement("div", {
       key: `TUI_${index}_checkbox`,
       style: {
         width: 'fit-content',
         marginBottom: direction === 'vertical' ? checkBoxMarginBottom ?? configStyles.CHECKBOX.marginBottom : '0px'
       }
-    }, /*#__PURE__*/React.createElement(SingleCheckbox, {
+    }, /*#__PURE__*/React__default["default"].createElement(SingleCheckbox, {
       data: item,
       index: index,
       handleChecked: handleSendData,
@@ -7638,16 +7741,16 @@ const Checkbox = ({
   }));
 };
 Checkbox.propTypes = {
-  getData: PropTypes.func,
-  keyNames: PropTypes.object,
-  checkedIcon: PropTypes.element,
-  unCheckedIcon: PropTypes.element,
-  labelMarginLeft: PropTypes.string,
-  checkedColor: PropTypes.string,
-  unCheckedColor: PropTypes.string,
-  checkBoxMarginBottom: PropTypes.string,
-  direction: PropTypes.oneOf(Object.values(DirectionMode)),
-  data: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object])
+  getData: PropTypes__default["default"].func,
+  keyNames: PropTypes__default["default"].object,
+  checkedIcon: PropTypes__default["default"].element,
+  unCheckedIcon: PropTypes__default["default"].element,
+  labelMarginLeft: PropTypes__default["default"].string,
+  checkedColor: PropTypes__default["default"].string,
+  unCheckedColor: PropTypes__default["default"].string,
+  checkBoxMarginBottom: PropTypes__default["default"].string,
+  direction: PropTypes__default["default"].oneOf(Object.values(DirectionMode)),
+  data: PropTypes__default["default"].oneOfType([PropTypes__default["default"].arrayOf(PropTypes__default["default"].object), PropTypes__default["default"].object])
 };
 
 const PositionSide = {
@@ -7837,11 +7940,11 @@ const Textarea = ({
     setInnerValue(() => value);
   }, [value, errorMessage]);
   React.useEffect(() => {
-    className && setClassProps(() => classnames(className ?? configStyles.TEXTAREA.className));
+    className && setClassProps(() => classnames__default["default"](className ?? configStyles.TEXTAREA.className));
   }, [className]);
   React.useEffect(() => {
     configStylesPromise.then(data => {
-      setClassProps(() => classnames(className ?? data.TEXTAREA.className));
+      setClassProps(() => classnames__default["default"](className ?? data.TEXTAREA.className));
       setConfigStyles(() => {
         return {
           ...data
@@ -7851,13 +7954,13 @@ const Textarea = ({
       console.error(error);
     });
   }, []);
-  return configStyles.TEXTAREA && /*#__PURE__*/React.createElement("div", {
+  return configStyles.TEXTAREA && /*#__PURE__*/React__default["default"].createElement("div", {
     ref: parentRef,
     style: {
       width: width ?? configStyles.TEXTAREA.width
     },
     className: classProps
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       display: 'flex',
       alignItems: 'center',
@@ -7868,7 +7971,7 @@ const Textarea = ({
       fontWeight: labelWeight ?? configStyles.TEXTAREA.label.font.weight,
       marginBottom: labelMarginBottom ?? configStyles.TEXTAREA.label.marginBottom
     }
-  }, label && /*#__PURE__*/React.createElement("div", {
+  }, label && /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       display: 'flex',
       maxWidth: '100%',
@@ -7876,7 +7979,7 @@ const Textarea = ({
       justifyContent: 'flex-start',
       width: showCharacterCount && maxLength && characterCountPosition === 'top' ? 'calc(100% - 80px)' : '100%'
     }
-  }, /*#__PURE__*/React.createElement("label", {
+  }, /*#__PURE__*/React__default["default"].createElement("label", {
     ref: labelRef,
     style: {
       display: labelDisplay ?? configStyles.TEXTAREA.label.display,
@@ -7886,12 +7989,12 @@ const Textarea = ({
     },
     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.createElement("sup", null, iconRequired ? iconRequired : configStyles.TEXTAREA.icon.required ? configStyles.TEXTAREA.icon.required : /*#__PURE__*/React.createElement(SvgRequired, null))), showCharacterCount && maxLength && characterCountPosition === 'top' && /*#__PURE__*/React.createElement("span", {
+  }, label), required && /*#__PURE__*/React__default["default"].createElement("sup", null, iconRequired ? iconRequired : configStyles.TEXTAREA.icon.required ? configStyles.TEXTAREA.icon.required : /*#__PURE__*/React__default["default"].createElement(SvgRequired, null))), showCharacterCount && maxLength && characterCountPosition === 'top' && /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
       width: 'fit-content',
       flexShrink: 0
     }
-  }, maxLength - innerValue.length, " \u0576\u056B\u0577")), /*#__PURE__*/React.createElement("textarea", {
+  }, maxLength - innerValue.length, " \u0576\u056B\u0577")), /*#__PURE__*/React__default["default"].createElement("textarea", {
     style: {
       width: '100%',
       border: 'none',
@@ -7923,24 +8026,24 @@ const Textarea = ({
     placeholder: placeholder,
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave
-  }), showCharacterCount && maxLength && characterCountPosition === 'bottom' && /*#__PURE__*/React.createElement("div", {
+  }), showCharacterCount && maxLength && characterCountPosition === 'bottom' && /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       float: 'right'
     }
-  }, /*#__PURE__*/React.createElement("span", {
+  }, /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
       color: labelColor ?? configStyles.TEXTAREA.label.color,
       fontSize: labelSize ?? configStyles.TEXTAREA.label.font.size,
       fontWeight: labelWeight ?? configStyles.TEXTAREA.label.font.weight,
       fontFamily: labelFontFamily ?? configStyles.TEXTAREA.label.font.family
     }
-  }, maxLength - value.length, " \u0576\u056B\u0577")), error ? /*#__PURE__*/React.createElement("div", {
+  }, maxLength - value.length, " \u0576\u056B\u0577")), error ? /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       clear: 'both',
       wordBreak: 'break-all',
       maxWidth: width ?? configStyles.TEXTAREA.width
     }
-  }, /*#__PURE__*/React.createElement("span", {
+  }, /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
       display: 'inline-block',
       color: errorColor ?? configStyles.TEXTAREA.error.color,
@@ -7953,58 +8056,58 @@ const Textarea = ({
   }, error)) : '');
 };
 Textarea.propTypes = {
-  size: PropTypes.string,
-  name: PropTypes.string,
-  style: PropTypes.string,
-  family: PropTypes.string,
-  weight: PropTypes.string,
-  width: PropTypes.string,
-  height: PropTypes.string,
-  resize: PropTypes.string,
-  radius: PropTypes.string,
-  required: PropTypes.bool,
-  disabled: PropTypes.bool,
-  onChange: PropTypes.func,
-  padding: PropTypes.string,
-  minWidth: PropTypes.string,
-  maxWidth: PropTypes.string,
-  boxShadow: PropTypes.string,
-  marginTop: PropTypes.string,
-  boxSizing: PropTypes.string,
-  minHeight: PropTypes.string,
-  maxHeight: PropTypes.string,
-  maxLength: PropTypes.number,
-  errorSize: PropTypes.string,
-  errorStyle: PropTypes.string,
-  errorWeight: PropTypes.string,
-  errorFamily: PropTypes.string,
-  className: PropTypes.string,
-  errorColor: PropTypes.string,
-  placeholder: PropTypes.string,
-  errorMessage: 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))
+  size: PropTypes__default["default"].string,
+  name: PropTypes__default["default"].string,
+  style: PropTypes__default["default"].string,
+  family: PropTypes__default["default"].string,
+  weight: PropTypes__default["default"].string,
+  width: PropTypes__default["default"].string,
+  height: PropTypes__default["default"].string,
+  resize: PropTypes__default["default"].string,
+  radius: PropTypes__default["default"].string,
+  required: PropTypes__default["default"].bool,
+  disabled: PropTypes__default["default"].bool,
+  onChange: PropTypes__default["default"].func,
+  padding: PropTypes__default["default"].string,
+  minWidth: PropTypes__default["default"].string,
+  maxWidth: PropTypes__default["default"].string,
+  boxShadow: PropTypes__default["default"].string,
+  marginTop: PropTypes__default["default"].string,
+  boxSizing: PropTypes__default["default"].string,
+  minHeight: PropTypes__default["default"].string,
+  maxHeight: PropTypes__default["default"].string,
+  maxLength: PropTypes__default["default"].number,
+  errorSize: PropTypes__default["default"].string,
+  errorStyle: PropTypes__default["default"].string,
+  errorWeight: PropTypes__default["default"].string,
+  errorFamily: PropTypes__default["default"].string,
+  className: PropTypes__default["default"].string,
+  errorColor: PropTypes__default["default"].string,
+  placeholder: PropTypes__default["default"].string,
+  errorMessage: PropTypes__default["default"].string,
+  backgroundColor: PropTypes__default["default"].string,
+  showCharacterCount: PropTypes__default["default"].bool,
+  value: PropTypes__default["default"].string.isRequired,
+  borderFocusColor: PropTypes__default["default"].string,
+  borderHoverColor: PropTypes__default["default"].string,
+  label: PropTypes__default["default"].string,
+  labelSize: PropTypes__default["default"].string,
+  labelColor: PropTypes__default["default"].string,
+  labelWeight: PropTypes__default["default"].string,
+  labelDisplay: PropTypes__default["default"].string,
+  labelFontFamily: PropTypes__default["default"].string,
+  labelMarginBottom: PropTypes__default["default"].string,
+  iconRequired: PropTypes__default["default"].element,
+  useLabelTooltip: PropTypes__default["default"].bool,
+  labelTooltipColor: PropTypes__default["default"].string,
+  labelTooltipPadding: PropTypes__default["default"].string,
+  labelTooltipFontSize: PropTypes__default["default"].string,
+  labelTooltipFontStyle: PropTypes__default["default"].string,
+  labelTooltipFontFamily: PropTypes__default["default"].string,
+  labelTooltipFontWeight: PropTypes__default["default"].string,
+  labelTooltipBorderRadius: PropTypes__default["default"].string,
+  labelTooltipBackgroundColor: PropTypes__default["default"].string,
+  characterCountPosition: PropTypes__default["default"].oneOf(Object.values(PositionSide))
 };
 
 const AccordionItem = ({
@@ -8054,12 +8157,12 @@ const AccordionItem = ({
   React.useEffect(() => {
     setIsOpen(() => open);
   }, [open]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default["default"].createElement("div", {
     className: className,
     style: {
       marginBottom: marginBottom ? marginBottom : '0px'
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
     onClick: handleClick,
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,
@@ -8076,7 +8179,7 @@ const AccordionItem = ({
       justifyContent: showIcons ? 'space-between' : 'flex-start',
       backgroundColor: isHover ? backgroundHoverColor : backgroundColor
     }
-  }, item.title && /*#__PURE__*/React.createElement("p", {
+  }, item.title && /*#__PURE__*/React__default["default"].createElement("p", {
     style: {
       width: '90%',
       margin: '0px',
@@ -8090,7 +8193,7 @@ const AccordionItem = ({
       textAlign: titleAlign ? titleAlign : 'left',
       color: isOpen ? hoverColor : isHover ? hoverColor : color
     }
-  }, item.title), showIcons && /*#__PURE__*/React.createElement("div", {
+  }, item.title), showIcons && /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       display: 'flex',
       width: 'fit-content',
@@ -8100,7 +8203,7 @@ const AccordionItem = ({
       alignItems: 'center',
       justifyContent: 'center'
     }
-  }, isOpen ? isHover ? closeHoverIcon : closeIcon : isHover ? openHoverIcon : openIcon)), /*#__PURE__*/React.createElement("div", {
+  }, isOpen ? isHover ? closeHoverIcon : closeIcon : isHover ? openHoverIcon : openIcon)), /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       overflow: 'hidden',
       height: isOpen ? 'auto' : '0px'
@@ -8108,7 +8211,7 @@ const AccordionItem = ({
   }, item.content ? item.content : ''));
 };
 AccordionItem.propTypes = {
-  open: PropTypes.bool
+  open: PropTypes__default["default"].bool
 };
 
 const SvgGreenplus = ({
@@ -8198,11 +8301,11 @@ const Accordion = ({
     }
   };
   React.useEffect(() => {
-    className && setClassProps(() => classnames(className ?? configStyles.BUTTON.className));
+    className && setClassProps(() => classnames__default["default"](className ?? configStyles.BUTTON.className));
   }, [className]);
   React.useEffect(() => {
     configStylesPromise.then(data => {
-      setClassProps(() => classnames(className ?? data.BUTTON.className));
+      setClassProps(() => classnames__default["default"](className ?? data.BUTTON.className));
       setConfigStyles(() => {
         return {
           ...data
@@ -8212,12 +8315,12 @@ const Accordion = ({
       console.error(error);
     });
   }, []);
-  return configStyles.ACCORDION && /*#__PURE__*/React.createElement("div", {
+  return configStyles.ACCORDION && /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       width: '100%'
     }
   }, data && data.length ? data.map((item, index) => {
-    return /*#__PURE__*/React.createElement(AccordionItem, {
+    return /*#__PURE__*/React__default["default"].createElement(AccordionItem, {
       item: item,
       index: index,
       onClick: handleClick,
@@ -8226,34 +8329,34 @@ const Accordion = ({
       key: `${item.title}__TUI__${index}`,
       open: openIndex === index ? true : false,
       showIcons: showIcons ?? configStyles.ACCORDION.showIcons,
-      openIcon: openIcon ? /*#__PURE__*/React.createElement("img", {
+      openIcon: openIcon ? /*#__PURE__*/React__default["default"].createElement("img", {
         src: openIcon,
         alt: "open icon"
-      }) : configStyles.ACCORDION.icon.open ? /*#__PURE__*/React.createElement("img", {
+      }) : configStyles.ACCORDION.icon.open ? /*#__PURE__*/React__default["default"].createElement("img", {
         src: configStyles.ACCORDION.icon.open,
         alt: "open icon"
-      }) : /*#__PURE__*/React.createElement(SvgGreenplus, null),
-      openHoverIcon: openHoverIcon ? /*#__PURE__*/React.createElement("img", {
+      }) : /*#__PURE__*/React__default["default"].createElement(SvgGreenplus, null),
+      openHoverIcon: openHoverIcon ? /*#__PURE__*/React__default["default"].createElement("img", {
         src: openHoverIcon,
         alt: "open icon"
-      }) : configStyles.ACCORDION.icon.openHover ? /*#__PURE__*/React.createElement("img", {
+      }) : configStyles.ACCORDION.icon.openHover ? /*#__PURE__*/React__default["default"].createElement("img", {
         src: configStyles.ACCORDION.icon.openHover,
         alt: "open icon"
-      }) : /*#__PURE__*/React.createElement(SvgGreenplus, null),
-      closeIcon: closeIcon ? /*#__PURE__*/React.createElement("img", {
+      }) : /*#__PURE__*/React__default["default"].createElement(SvgGreenplus, null),
+      closeIcon: closeIcon ? /*#__PURE__*/React__default["default"].createElement("img", {
         src: closeIcon,
         alt: "close icon"
-      }) : configStyles.ACCORDION.icon.close ? /*#__PURE__*/React.createElement("img", {
+      }) : configStyles.ACCORDION.icon.close ? /*#__PURE__*/React__default["default"].createElement("img", {
         src: configStyles.ACCORDION.icon.close,
         alt: "close icon"
-      }) : /*#__PURE__*/React.createElement(SvgGreenminus, null),
-      closeHoverIcon: closeHoverIcon ? /*#__PURE__*/React.createElement("img", {
+      }) : /*#__PURE__*/React__default["default"].createElement(SvgGreenminus, null),
+      closeHoverIcon: closeHoverIcon ? /*#__PURE__*/React__default["default"].createElement("img", {
         src: closeHoverIcon,
         alt: "close icon"
-      }) : configStyles.ACCORDION.icon.closeHover ? /*#__PURE__*/React.createElement("img", {
+      }) : configStyles.ACCORDION.icon.closeHover ? /*#__PURE__*/React__default["default"].createElement("img", {
         src: configStyles.ACCORDION.icon.closeHover,
         alt: "close icon"
-      }) : /*#__PURE__*/React.createElement(SvgGreenminus, null),
+      }) : /*#__PURE__*/React__default["default"].createElement(SvgGreenminus, null),
       className: classProps,
       color: color ?? configStyles.ACCORDION.color,
       padding: padding ?? configStyles.ACCORDION.padding,
@@ -8279,41 +8382,40 @@ const Accordion = ({
   }) : '');
 };
 Accordion.propTypes = {
-  data: PropTypes.arrayOf(PropTypes.shape({
-    title: PropTypes.string,
-    content: PropTypes.element
+  data: PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({
+    title: PropTypes__default["default"].string,
+    content: PropTypes__default["default"].element
   })),
-  click: PropTypes.func,
-  showIcons: PropTypes.bool,
-  multipleOpen: PropTypes.bool,
-  color: PropTypes.string,
-  hoverColor: PropTypes.string,
-  backgroundColor: PropTypes.string,
-  backgroundHoverColor: PropTypes.string,
-  titleAlign: PropTypes.oneOf(['left', 'center', 'right']),
-  padding: PropTypes.string,
-  openIcon: PropTypes.string,
-  className: PropTypes.string,
-  closeIcon: PropTypes.string,
-  marginBottom: PropTypes.string,
-  openHoverIcon: PropTypes.string,
-  closeHoverIcon: PropTypes.string,
-  borderTop: PropTypes.bool,
-  borderLeft: PropTypes.bool,
-  borderRight: PropTypes.bool,
-  borderBottom: PropTypes.bool,
-  borderColor: PropTypes.string,
-  borderWidth: PropTypes.string,
-  borderStyle: PropTypes.string,
-  borderRadius: PropTypes.string,
-  fontSize: PropTypes.string,
-  fontStyle: PropTypes.string,
-  fontWeight: PropTypes.number,
-  fontFamily: PropTypes.string
+  click: PropTypes__default["default"].func,
+  showIcons: PropTypes__default["default"].bool,
+  multipleOpen: PropTypes__default["default"].bool,
+  color: PropTypes__default["default"].string,
+  hoverColor: PropTypes__default["default"].string,
+  backgroundColor: PropTypes__default["default"].string,
+  backgroundHoverColor: PropTypes__default["default"].string,
+  titleAlign: PropTypes__default["default"].oneOf(['left', 'center', 'right']),
+  padding: PropTypes__default["default"].string,
+  openIcon: PropTypes__default["default"].string,
+  className: PropTypes__default["default"].string,
+  closeIcon: PropTypes__default["default"].string,
+  marginBottom: PropTypes__default["default"].string,
+  openHoverIcon: PropTypes__default["default"].string,
+  closeHoverIcon: PropTypes__default["default"].string,
+  borderTop: PropTypes__default["default"].bool,
+  borderLeft: PropTypes__default["default"].bool,
+  borderRight: PropTypes__default["default"].bool,
+  borderBottom: PropTypes__default["default"].bool,
+  borderColor: PropTypes__default["default"].string,
+  borderWidth: PropTypes__default["default"].string,
+  borderStyle: PropTypes__default["default"].string,
+  borderRadius: PropTypes__default["default"].string,
+  fontSize: PropTypes__default["default"].string,
+  fontStyle: PropTypes__default["default"].string,
+  fontWeight: PropTypes__default["default"].number,
+  fontFamily: PropTypes__default["default"].string
 };
 
 // import React from 'react';
-
 const Swipe = ({
   id,
   title,
@@ -8333,12 +8435,12 @@ const Swipe = ({
     callClose,
     showCloseIcon
   } = props || {};
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       width: position === 'left' || position === 'right' ? width ?? SWIPEMODAL.width : '100%',
       height: position === 'top' || position === 'bottom' ? height ?? SWIPEMODAL.height : '100vh'
     }
-  }, (title || showCloseIcon) && /*#__PURE__*/React.createElement("div", {
+  }, (title || showCloseIcon) && /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       width: '100%',
       display: 'flex',
@@ -8349,7 +8451,7 @@ const Swipe = ({
       padding: titleStyle?.padding ?? SWIPEMODAL.titleStyle.padding,
       maxHeight: titleStyle?.maxHeight ?? SWIPEMODAL.titleStyle.maxHeight
     }
-  }, title && /*#__PURE__*/React.createElement("h1", {
+  }, title && /*#__PURE__*/React__default["default"].createElement("h1", {
     style: {
       color: titleStyle?.color ?? SWIPEMODAL.titleStyle.color,
       fontSize: titleStyle?.fontSize ?? SWIPEMODAL.titleStyle.font.size,
@@ -8358,7 +8460,7 @@ const Swipe = ({
       fontWeight: titleStyle?.fontWeight ?? SWIPEMODAL.titleStyle.font.weight,
       fontFamily: titleStyle?.fontFamily ?? SWIPEMODAL.titleStyle.font.family
     }
-  }, title), showCloseIcon && /*#__PURE__*/React.createElement("div", {
+  }, title), showCloseIcon && /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       width: '24px',
       height: '24px',
@@ -8367,7 +8469,7 @@ const Swipe = ({
       cursor: 'pointer'
     },
     onClick: hasOwnerProperty(props, 'callClose') && {}.toString.call(callClose) === '[object Function]' ? () => callClose(id) : _ => _
-  }, /*#__PURE__*/React.createElement("img", {
+  }, /*#__PURE__*/React__default["default"].createElement("img", {
     alt: "close",
     src: hasOwnerProperty(props, 'closeIcon') && typeof props.closeIcon === 'string' ? props.closeIcon : SWIPEMODAL.closeIcon,
     style: {
@@ -8376,7 +8478,7 @@ const Swipe = ({
       objectFit: 'contain',
       objectPosition: 'center'
     }
-  }))), child && /*#__PURE__*/React.createElement("div", {
+  }))), child && /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       width: '100%',
       height: '100%',
@@ -8391,14 +8493,11 @@ const Swipe = ({
   }, child));
 };
 
-var css_248z$2 = ".swipe-module_to-top__lrHfG{bottom:0}.swipe-module_to-left__kgLsE{right:0}.swipe-module_to-right__Xu3Ul{left:0}.swipe-module_to-bottom__94M7H{top:0}.swipe-module_visible__---aC{visibility:visible!important}.swipe-module_swipe-block__Yv1B3{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.swipe-module_move-top__m6t2O{-webkit-animation-name:swipe-module_slideTop__-Bbap;animation-name:swipe-module_slideTop__-Bbap}.swipe-module_move-left__4TDLs{-webkit-animation-name:swipe-module_slideLeft__i24cS;animation-name:swipe-module_slideLeft__i24cS}.swipe-module_move-right__FrYo0{-webkit-animation-name:swipe-module_slideRight__swgSY;animation-name:swipe-module_slideRight__swgSY}.swipe-module_move-bottom__eYDx6{-webkit-animation-name:swipe-module_slideBottom__TBoZo;animation-name:swipe-module_slideBottom__TBoZo}.swipe-module_back-top__gJZv0{-webkit-animation-name:swipe-module_backTop__32loc;animation-name:swipe-module_backTop__32loc}.swipe-module_back-left__Wd3aY{-webkit-animation-name:swipe-module_backLeft__q89ub;animation-name:swipe-module_backLeft__q89ub}.swipe-module_back-right__Lgwz7{-webkit-animation-name:swipe-module_backRight__8t5Dm;animation-name:swipe-module_backRight__8t5Dm}.swipe-module_back-bottom__JRN-7{-webkit-animation-name:swipe-module_backBottom__lwR8B;animation-name:swipe-module_backBottom__lwR8B}@keyframes swipe-module_slideTop__-Bbap{0%{bottom:-100%}to{bottom:0}}@keyframes swipe-module_slideLeft__i24cS{0%{right:-100%}to{right:0}}@keyframes swipe-module_slideRight__swgSY{0%{left:-100%}to{left:0}}@keyframes swipe-module_slideBottom__TBoZo{0%{top:-100%}to{top:0}}@keyframes swipe-module_backTop__32loc{0%{bottom:0}to{bottom:-100%}}@keyframes swipe-module_backLeft__q89ub{0%{right:0}to{right:-100%}}@keyframes swipe-module_backRight__8t5Dm{0%{left:0}to{left:-100%}}@keyframes swipe-module_backBottom__lwR8B{0%{top:0}to{top:-100%}}";
-var styles$2 = {"to-top":"swipe-module_to-top__lrHfG","to-left":"swipe-module_to-left__kgLsE","to-right":"swipe-module_to-right__Xu3Ul","to-bottom":"swipe-module_to-bottom__94M7H","visible":"swipe-module_visible__---aC","swipe-block":"swipe-module_swipe-block__Yv1B3","move-top":"swipe-module_move-top__m6t2O","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"};
+var css_248z$2 = "body.swipe-module_tui-no-srcoll-class__YS9cI,html.swipe-module_tui-no-srcoll-class__YS9cI{height:100%;overflow:hidden!important}.swipe-module_to-top__lrHfG{bottom:0}.swipe-module_to-left__kgLsE{right:0}.swipe-module_to-right__Xu3Ul{left:0}.swipe-module_to-bottom__94M7H{top:0}.swipe-module_visible__---aC{visibility:visible!important}.swipe-module_swipe-block__Yv1B3{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.swipe-module_move-top__m6t2O{-webkit-animation-name:swipe-module_slideTop__-Bbap;animation-name:swipe-module_slideTop__-Bbap}.swipe-module_move-left__4TDLs{-webkit-animation-name:swipe-module_slideLeft__i24cS;animation-name:swipe-module_slideLeft__i24cS}.swipe-module_move-right__FrYo0{-webkit-animation-name:swipe-module_slideRight__swgSY;animation-name:swipe-module_slideRight__swgSY}.swipe-module_move-bottom__eYDx6{-webkit-animation-name:swipe-module_slideBottom__TBoZo;animation-name:swipe-module_slideBottom__TBoZo}.swipe-module_back-top__gJZv0{-webkit-animation-name:swipe-module_backTop__32loc;animation-name:swipe-module_backTop__32loc}.swipe-module_back-left__Wd3aY{-webkit-animation-name:swipe-module_backLeft__q89ub;animation-name:swipe-module_backLeft__q89ub}.swipe-module_back-right__Lgwz7{-webkit-animation-name:swipe-module_backRight__8t5Dm;animation-name:swipe-module_backRight__8t5Dm}.swipe-module_back-bottom__JRN-7{-webkit-animation-name:swipe-module_backBottom__lwR8B;animation-name:swipe-module_backBottom__lwR8B}@keyframes swipe-module_slideTop__-Bbap{0%{bottom:-100%}to{bottom:0}}@keyframes swipe-module_slideLeft__i24cS{0%{right:-100%}to{right:0}}@keyframes swipe-module_slideRight__swgSY{0%{left:-100%}to{left:0}}@keyframes swipe-module_slideBottom__TBoZo{0%{top:-100%}to{top:0}}@keyframes swipe-module_backTop__32loc{0%{bottom:0}to{bottom:-100%}}@keyframes swipe-module_backLeft__q89ub{0%{right:0}to{right:-100%}}@keyframes swipe-module_backRight__8t5Dm{0%{left:0}to{left:-100%}}@keyframes swipe-module_backBottom__lwR8B{0%{top:0}to{top:-100%}}";
+var styles$2 = {"tui-no-srcoll-class":"swipe-module_tui-no-srcoll-class__YS9cI","to-top":"swipe-module_to-top__lrHfG","to-left":"swipe-module_to-left__kgLsE","to-right":"swipe-module_to-right__Xu3Ul","to-bottom":"swipe-module_to-bottom__94M7H","visible":"swipe-module_visible__---aC","swipe-block":"swipe-module_swipe-block__Yv1B3","move-top":"swipe-module_move-top__m6t2O","slideTop":"swipe-module_slideTop__-Bbap","move-left":"swipe-module_move-left__4TDLs","slideLeft":"swipe-module_slideLeft__i24cS","move-right":"swipe-module_move-right__FrYo0","slideRight":"swipe-module_slideRight__swgSY","move-bottom":"swipe-module_move-bottom__eYDx6","slideBottom":"swipe-module_slideBottom__TBoZo","back-top":"swipe-module_back-top__gJZv0","backTop":"swipe-module_backTop__32loc","back-left":"swipe-module_back-left__Wd3aY","backLeft":"swipe-module_backLeft__q89ub","back-right":"swipe-module_back-right__Lgwz7","backRight":"swipe-module_backRight__8t5Dm","back-bottom":"swipe-module_back-bottom__JRN-7","backBottom":"swipe-module_backBottom__lwR8B"};
 styleInject(css_248z$2);
 
 // import React, { useEffect, useRef } from 'react';
-// import ReactDOM from 'react-dom/client';
-// import PropTypes from 'prop-types';
-
 let swipeCount = 0;
 const createElem = (id, title, child, props, swipeBlock, innerConfigStyles) => {
   const {
@@ -8425,14 +8524,14 @@ const createElem = (id, title, child, props, swipeBlock, innerConfigStyles) => {
     swipeBlock.setAttribute('anime', animation);
     swipeBlock.classList.add(position === 'top' ? `${hasOwnerProperty(props, 'animation') && animation === true ? styles$2['move-top'] : ''}` : position === 'bottom' ? `${hasOwnerProperty(props, 'animation') && animation === true ? styles$2['move-bottom'] : ''}` : position === 'left' ? `${hasOwnerProperty(props, 'animation') && animation === true ? styles$2['move-left'] : ''}` : `${hasOwnerProperty(props, 'animation') && props.animation === true ? styles$2['move-right'] : ''}`);
   }
-  const newElem = /*#__PURE__*/React.createElement(Swipe, {
+  const newElem = /*#__PURE__*/React__default["default"].createElement(Swipe, {
     id,
     title,
     child,
     props,
     innerConfigStyles
   });
-  const root = ReactDOM.createRoot(swipeBlock);
+  const root = ReactDOM__default["default"].createRoot(swipeBlock);
   root.render(newElem);
 };
 const createSwipe = (id, title, child, props, swipable) => {
@@ -8497,22 +8596,45 @@ const handleNavigationChange = () => {
     return result;
   };
 })(window.history);
+const style = document.createElement('style');
 const swipe = {
   open: (title = '', id, child, props) => {
-    if (id === undefined || id === null && (typeof id !== 'string' || typeof id !== 'number')) {
-      alert('Please pass valid id prop (string / number)  when call swipe.open function');
-      return;
-    }
-    if (swipeCount === 0) {
-      window.addEventListener('popstate', handleNavigationChange);
-      window.addEventListener('navigationchange', handleNavigationChange);
-    }
-    let swipable = document.getElementById('swipable');
-    swipeCount += 1;
-    createSwipe(id, title, child, props, swipable);
-    return Promise.resolve(id);
+    let newConfigStyles = {};
+    configStylesPromise.then(data => {
+      newConfigStyles = {
+        ...data
+      };
+      if (id === undefined || id === null && (typeof id !== 'string' || typeof id !== 'number')) {
+        alert('Please pass valid id prop (string / number)  when call swipe.open function');
+        return;
+      }
+      if (swipeCount === 0) {
+        if (newConfigStyles.SWIPEMODAL && hasOwnerProperty(newConfigStyles.SWIPEMODAL, 'noScroll') && newConfigStyles.SWIPEMODAL.noScroll) {
+          style.textContent = `.tui-no-srcoll-class{overflow:hidden!important;}`;
+          document.head.appendChild(style);
+          document.body.classList.add('tui-no-srcoll-class');
+          document.documentElement.classList.add('tui-no-srcoll-class');
+        }
+        window.addEventListener('popstate', handleNavigationChange);
+        window.addEventListener('navigationchange', handleNavigationChange);
+      }
+      let swipable = document.getElementById('swipable');
+      swipeCount += 1;
+      createSwipe(id, title, child, props, swipable);
+      return Promise.resolve(id);
+    }, error => {
+      console.error(error);
+    });
   },
   close: id => {
+    let newConfigStyles = {};
+    configStylesPromise.then(data => {
+      newConfigStyles = {
+        ...data
+      };
+    }, error => {
+      console.error(error);
+    });
     if (id === undefined || id === null && (typeof id !== 'string' || typeof id !== 'number')) {
       alert('Please pass valid id prop (string / number)  when call swipe.close function');
       return;
@@ -8531,6 +8653,14 @@ const swipe = {
             window.removeEventListener('popstate', handleNavigationChange);
             window.removeEventListener('navigationchange', handleNavigationChange);
             document.body.removeChild(swipable);
+            if (newConfigStyles.SWIPEMODAL && hasOwnerProperty(newConfigStyles.SWIPEMODAL, 'noScroll') && newConfigStyles.SWIPEMODAL.noScroll) {
+              const noScrllable = document.getElementsByClassName('tui-no-srcoll-class');
+              if (noScrllable) {
+                style.remove();
+                document.body.classList.remove('tui-no-srcoll-class');
+                document.documentElement.classList.remove('tui-no-srcoll-class');
+              }
+            }
           }
         }, 200);
       } else {
@@ -8539,13 +8669,32 @@ const swipe = {
           window.removeEventListener('popstate', handleNavigationChange);
           window.removeEventListener('navigationchange', handleNavigationChange);
           document.body.removeChild(swipable);
+          if (newConfigStyles.SWIPEMODAL && hasOwnerProperty(newConfigStyles.SWIPEMODAL, 'noScroll') && newConfigStyles.SWIPEMODAL.noScroll) {
+            const noScrllable = document.getElementsByClassName('tui-no-srcoll-class');
+            if (noScrllable) {
+              style.remove();
+              document.body.classList.remove('tui-no-srcoll-class');
+              document.documentElement.classList.remove('tui-no-srcoll-class');
+            }
+          }
+        }
+      }
+    }
+  },
+  updateTitle: (title, id) => {
+    const elem = document.getElementById(id);
+    const titleElem = elem.querySelector('h1');
+    if (elem) {
+      if (titleElem) {
+        if (title) {
+          titleElem.innerText = title;
         }
       }
     }
   }
 };
 const SwipeModal = () => {
-  return /*#__PURE__*/React.createElement(React.Fragment, null);
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null);
 };
 
 const TypographyType = {
@@ -8590,7 +8739,7 @@ const Typography = ({
   const handleMouseLeave = () => {
     setIsHover(false);
   };
-  const tagT = configStyles.TYPOGRAPHY && /*#__PURE__*/React.createElement(variant, {
+  const tagT = configStyles.TYPOGRAPHY && /*#__PURE__*/React__default["default"].createElement(variant, {
     style: {
       border: border ?? configStyles.TYPOGRAPHY.border,
       cursor: cursor ?? configStyles.TYPOGRAPHY.cursor,
@@ -8619,11 +8768,11 @@ const Typography = ({
     }
   }, [variant]);
   React.useEffect(() => {
-    className && setClassProps(() => classnames(className ?? configStyles.TYPOGRAPHY.className));
+    className && setClassProps(() => classnames__default["default"](className ?? configStyles.TYPOGRAPHY.className));
   }, [className]);
   React.useEffect(() => {
     configStylesPromise.then(data => {
-      setClassProps(() => classnames(className ?? data.TYPOGRAPHY.className));
+      setClassProps(() => classnames__default["default"](className ?? data.TYPOGRAPHY.className));
       setConfigStyles(() => {
         return {
           ...data
@@ -8636,24 +8785,24 @@ const Typography = ({
   return validVariant ? 'Please set Typography valid variant' : tagT;
 };
 Typography.propTypes = {
-  color: PropTypes.string,
-  onClick: PropTypes.func,
-  weight: PropTypes.string,
-  border: PropTypes.string,
-  cursor: PropTypes.string,
-  radius: PropTypes.string,
-  textAlign: PropTypes.string,
-  className: PropTypes.string,
-  fontStyle: PropTypes.string,
-  lineHeight: PropTypes.string,
-  textShadow: PropTypes.string,
-  fontFamily: PropTypes.string,
-  colorHover: PropTypes.string,
-  textTransform: PropTypes.string,
-  textDecoration: PropTypes.string,
-  backgroundColor: PropTypes.string,
-  variant: PropTypes.oneOf(Object.values(TypographyType)),
-  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  color: PropTypes__default["default"].string,
+  onClick: PropTypes__default["default"].func,
+  weight: PropTypes__default["default"].string,
+  border: PropTypes__default["default"].string,
+  cursor: PropTypes__default["default"].string,
+  radius: PropTypes__default["default"].string,
+  textAlign: PropTypes__default["default"].string,
+  className: PropTypes__default["default"].string,
+  fontStyle: PropTypes__default["default"].string,
+  lineHeight: PropTypes__default["default"].string,
+  textShadow: PropTypes__default["default"].string,
+  fontFamily: PropTypes__default["default"].string,
+  colorHover: PropTypes__default["default"].string,
+  textTransform: PropTypes__default["default"].string,
+  textDecoration: PropTypes__default["default"].string,
+  backgroundColor: PropTypes__default["default"].string,
+  variant: PropTypes__default["default"].oneOf(Object.values(TypographyType)),
+  size: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])
 };
 
 const Dots = '...';
@@ -8736,7 +8885,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 = {"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"};
+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"};
 styleInject(css_248z$1);
 
 const Pagination = ({
@@ -8852,7 +9001,7 @@ const Pagination = ({
   let lastPage = paginationRange[paginationRange.length - 1];
   React.useEffect(() => {
     configStylesPromise.then(data => {
-      setClassProps(() => classnames(
+      setClassProps(() => classnames__default["default"](
       // TODO: check and remove pagination-bar-rem class
       styles$1.list, className ?? data.PAGINATION.className, `${styles$1['pagination-bar']} pagination-bar-rem`));
       setConfigStyles(() => {
@@ -8889,7 +9038,7 @@ const Pagination = ({
     }
   }, [offsetCounts, showOffset]);
   React.useEffect(() => {
-    className && setClassProps(() => classnames(
+    className && setClassProps(() => classnames__default["default"](
     // TODO: check and remove pagination-bar-rem class
     styles$1.list, className ?? configStyles.PAGINATION.className, `${styles$1['pagination-bar']} pagination-bar-rem`));
   }, [className]);
@@ -8903,7 +9052,7 @@ const Pagination = ({
   React.useEffect(() => {
     onChange(currentPageNumber);
   }, [currentPageNumber]);
-  return configStyles.PAGINATION && /*#__PURE__*/React.createElement("div", {
+  return configStyles.PAGINATION && /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       display: 'flex',
       margin: '0 auto',
@@ -8911,7 +9060,7 @@ const Pagination = ({
       justifyContent: 'center'
     },
     className: classProps
-  }, /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("button", {
+  }, /*#__PURE__*/React__default["default"].createElement("ul", null, /*#__PURE__*/React__default["default"].createElement("button", {
     style: {
       width: width ?? configStyles.PAGINATION.width,
       height: height ?? configStyles.PAGINATION.height,
@@ -8932,12 +9081,12 @@ const Pagination = ({
     onClick: onPrevious,
     disabled: currentPageNumber === 1 ? true : false,
     className: `${styles$1['pagination-btn']} pagination-btn-rem`
-  }, /*#__PURE__*/React.createElement(SvgNextarrow, null)), paginationRange.map((pageNumber, id) => {
+  }, /*#__PURE__*/React__default["default"].createElement(SvgNextarrow, null)), paginationRange.map((pageNumber, id) => {
     if (pageNumber === Dots) {
       let currentPageIndex = paginationRange.indexOf(currentPageNumber);
-      return /*#__PURE__*/React.createElement("li", {
+      return /*#__PURE__*/React__default["default"].createElement("li", {
         key: id,
-        className: classnames(`${styles$1['pagination-jump-next']} pagination-jump-next-rem`),
+        className: classnames__default["default"](`${styles$1['pagination-jump-next']} pagination-jump-next-rem`),
         style: {
           width: width ?? configStyles.PAGINATION.width,
           height: height ?? configStyles.PAGINATION.height,
@@ -8950,23 +9099,23 @@ const Pagination = ({
         },
         onClick: id < currentPageIndex ? onPreviousFive : onNextFive,
         disabled: currentPageIndex === 0 ? true : false
-      }, id < currentPageIndex ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+      }, id < currentPageIndex ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
         className: `${styles$1['pagination-jump-next-txt']} pagination-jump-next-txt-rem`
-      }, /*#__PURE__*/React.createElement(SvgDots, null)), /*#__PURE__*/React.createElement("span", {
+      }, /*#__PURE__*/React__default["default"].createElement(SvgDots, null)), /*#__PURE__*/React__default["default"].createElement("span", {
         className: `${styles$1['pagination-jump-next-arrow']} pagination-jump-next-arrow-rem`,
         style: {
           transform: 'rotate(180deg)'
         }
-      }, /*#__PURE__*/React.createElement(SvgNextarrow, null))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+      }, /*#__PURE__*/React__default["default"].createElement(SvgNextarrow, null))) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
         className: `${styles$1['pagination-jump-next-txt']} pagination-jump-next-txt-rem`
-      }, /*#__PURE__*/React.createElement(SvgDots, null)), /*#__PURE__*/React.createElement("span", {
+      }, /*#__PURE__*/React__default["default"].createElement(SvgDots, null)), /*#__PURE__*/React__default["default"].createElement("span", {
         className: `${styles$1['pagination-jump-next-arrow']} pagination-jump-next-arrow-rem`
-      }, /*#__PURE__*/React.createElement(SvgNextarrow, null))));
+      }, /*#__PURE__*/React__default["default"].createElement(SvgNextarrow, null))));
     }
-    return /*#__PURE__*/React.createElement("li", {
+    return /*#__PURE__*/React__default["default"].createElement("li", {
       onClick: () => onPageChange(pageNumber),
       key: id,
-      className: classnames(`${styles$1['pagination-item']} pagination-item-rem`),
+      className: classnames__default["default"](`${styles$1['pagination-item']} pagination-item-rem`),
       onMouseEnter: () => handleMouseEnter(id),
       onMouseLeave: () => handleMouseLeave(),
       style: {
@@ -8991,7 +9140,7 @@ const Pagination = ({
         borderRadius: borderRadius ?? configStyles.PAGINATION.border.radius
       }
     }, pageNumber);
-  }), /*#__PURE__*/React.createElement("button", {
+  }), /*#__PURE__*/React__default["default"].createElement("button", {
     onClick: onNext,
     disabled: currentPageNumber === lastPage ? true : false,
     className: `${styles$1['pagination-btn']} pagination-btn-rem`,
@@ -9011,7 +9160,7 @@ const Pagination = ({
                             `,
       borderRadius: borderRadius ?? configStyles.PAGINATION.border.radius
     }
-  }, /*#__PURE__*/React.createElement(SvgNextarrow, null))), innerShowOffset && /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement(SvgNextarrow, null))), innerShowOffset && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "show-offset-block",
     style: {
       width: '91px',
@@ -9019,7 +9168,7 @@ const Pagination = ({
       marginLeft: '10px',
       marginRight: '3px'
     }
-  }, /*#__PURE__*/React.createElement(Select, _extends({
+  }, /*#__PURE__*/React__default["default"].createElement(Select, _extends({
     insidePagination: true,
     selectedMinHeight: "34px",
     boxShadow: `
@@ -9042,7 +9191,7 @@ const Pagination = ({
     optionItemLineHeight: lineHeight ?? configStyles.PAGINATION.lineHeight,
     optionItemFontFamily: fontWeight ?? configStyles.PAGINATION.font.weight,
     optionItemFontWeight: fontFamily ?? configStyles.PAGINATION.font.family
-  }, offsetArgs))), goTo && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("input", {
+  }, offsetArgs))), goTo && /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("input", {
     onKeyDown: handleKeyDown,
     onInput: handleChangeInput,
     type: "number",
@@ -9068,7 +9217,7 @@ const Pagination = ({
       borderRadius: borderRadius ?? configStyles.PAGINATION.border.radius
     },
     value: inpVal
-  }), /*#__PURE__*/React.createElement("span", {
+  }), /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
       color: color ?? configStyles.PAGINATION.color,
       fontSize: fontSize ?? configStyles.PAGINATION.font.size,
@@ -9080,30 +9229,30 @@ const Pagination = ({
   }, "\u0537\u057B")));
 };
 Pagination.propTypes = {
-  goTo: PropTypes.bool,
-  offset: PropTypes.number,
-  getOffset: PropTypes.func,
-  showOffset: PropTypes.bool,
-  className: PropTypes.string,
-  totalCount: PropTypes.number,
-  currentPage: PropTypes.number,
-  offsetCounts: PropTypes.arrayOf(PropTypes.number),
-  color: PropTypes.string,
-  width: PropTypes.string,
-  height: PropTypes.string,
-  fontSize: PropTypes.string,
-  fontWeight: PropTypes.string,
-  fontFamily: PropTypes.string,
-  fontStyle: PropTypes.string,
-  lineHeight: PropTypes.string,
-  activeColor: PropTypes.string,
-  hoverColor: PropTypes.string,
-  backgroundColor: PropTypes.string,
-  hoverBackgroundColor: PropTypes.string,
-  activeBackgroundColor: PropTypes.string,
-  borderColor: PropTypes.string,
-  borderWidth: PropTypes.string,
-  borderRadius: PropTypes.string
+  goTo: PropTypes__default["default"].bool,
+  offset: PropTypes__default["default"].number,
+  getOffset: PropTypes__default["default"].func,
+  showOffset: PropTypes__default["default"].bool,
+  className: PropTypes__default["default"].string,
+  totalCount: PropTypes__default["default"].number,
+  currentPage: PropTypes__default["default"].number,
+  offsetCounts: PropTypes__default["default"].arrayOf(PropTypes__default["default"].number),
+  color: PropTypes__default["default"].string,
+  width: PropTypes__default["default"].string,
+  height: PropTypes__default["default"].string,
+  fontSize: PropTypes__default["default"].string,
+  fontWeight: PropTypes__default["default"].string,
+  fontFamily: PropTypes__default["default"].string,
+  fontStyle: PropTypes__default["default"].string,
+  lineHeight: PropTypes__default["default"].string,
+  activeColor: PropTypes__default["default"].string,
+  hoverColor: PropTypes__default["default"].string,
+  backgroundColor: PropTypes__default["default"].string,
+  hoverBackgroundColor: PropTypes__default["default"].string,
+  activeBackgroundColor: PropTypes__default["default"].string,
+  borderColor: PropTypes__default["default"].string,
+  borderWidth: PropTypes__default["default"].string,
+  borderRadius: PropTypes__default["default"].string
 };
 
 var css_248z = ".autocomplete-module_auto-complete__oUOv9{appearance:none!important;-webkit-appearance:none!important}";
@@ -9271,7 +9420,7 @@ const Autocomplete = ({
     setInnerValue(selectedValue[keyNames.name]);
     getItem(selectedValue);
   };
-  const optionList = /*#__PURE__*/React.createElement("div", null, show && innerOptions && !disabled ? innerOptions.length > 0 && innerValue.length >= searchCount ? /*#__PURE__*/React.createElement("div", {
+  const optionList = /*#__PURE__*/React__default["default"].createElement("div", null, show && innerOptions && !disabled ? innerOptions.length > 0 && innerValue.length >= searchCount ? /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       left: contentBottomLeft ?? configStyles.AUTOCOMPLETE.contentBottom.left,
       width: contentBottomWidth ?? configStyles.AUTOCOMPLETE.contentBottom.width,
@@ -9286,7 +9435,7 @@ const Autocomplete = ({
       top: contentTopHeight ? contentTopHeight.includes('rem') ? parseFloat(contentTopHeight.substr(0, contentTopHeight.length - 3)) + 0.6 + 'rem' : parseFloat(contentTopHeight.substr(0, contentTopHeight.length - 2)) + 6 + 'px' : configStyles.AUTOCOMPLETE.height.includes('rem') ? parseFloat(configStyles.AUTOCOMPLETE.height.substr(0, configStyles.AUTOCOMPLETE.height.length - 3)) + 0.6 + 'rem' : parseFloat(configStyles.AUTOCOMPLETE.height.substr(0, configStyles.AUTOCOMPLETE.height.length - 2)) + 6 + 'px',
       animation
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       display: contentBottomInnerDisplay ? contentBottomInnerDisplay : configStyles.AUTOCOMPLETE.contentBottom.inner.display,
       overflowY: contentBottomInnerOverflowY ? contentBottomInnerOverflowY : configStyles.AUTOCOMPLETE.contentBottom.inner.overflowY,
@@ -9295,7 +9444,7 @@ const Autocomplete = ({
       flexDirection: contentBottomInnerDirection ? contentBottomInnerDirection : configStyles.AUTOCOMPLETE.contentBottom.inner.direction
     }
   }, innerOptions.map(item => {
-    return /*#__PURE__*/React.createElement("p", {
+    return /*#__PURE__*/React__default["default"].createElement("p", {
       key: item.id,
       onMouseEnter: handleRowMouseEnter,
       onMouseLeave: handleRowMouseLeave,
@@ -9317,7 +9466,7 @@ const Autocomplete = ({
         backgroundColor: contentBottomRowBackgroundColor ? contentBottomRowBackgroundColor : configStyles.AUTOCOMPLETE.contentBottom.row.colors.background
       }
     }, item[keyNames.name]);
-  }))) : innerError ? '' : innerValue.length <= 0 ? '' : /*#__PURE__*/React.createElement("span", {
+  }))) : innerError ? '' : innerValue.length <= 0 ? '' : /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
       position: 'absolute',
       zIndex: '1',
@@ -9438,11 +9587,11 @@ const Autocomplete = ({
     setInnerError(errorMessage);
   }, [errorMessage]);
   React.useEffect(() => {
-    className && setClassProps(() => classnames(className ?? configStyles.AUTOCOMPLETE.className, styles['auto-complete']));
+    className && setClassProps(() => classnames__default["default"](className ?? configStyles.AUTOCOMPLETE.className, styles['auto-complete']));
   }, [className]);
   React.useEffect(() => {
     configStylesPromise.then(data => {
-      setClassProps(() => classnames(className ?? data.AUTOCOMPLETE.className, styles['auto-complete']));
+      setClassProps(() => classnames__default["default"](className ?? data.AUTOCOMPLETE.className, styles['auto-complete']));
       setConfigStyles(() => {
         return {
           ...data
@@ -9452,13 +9601,13 @@ const Autocomplete = ({
       console.error(error);
     });
   }, []);
-  return configStyles.AUTOCOMPLETE && /*#__PURE__*/React.createElement("div", {
+  return configStyles.AUTOCOMPLETE && /*#__PURE__*/React__default["default"].createElement("div", {
     ref: parentRef,
     className: classProps,
     style: {
       width: contentTopMaxWidth ?? configStyles.AUTOCOMPLETE.maxWidth
     }
-  }, label && /*#__PURE__*/React.createElement("div", {
+  }, label && /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       display: 'flex',
       maxWidth: '100%',
@@ -9466,7 +9615,7 @@ const Autocomplete = ({
       columnGap: '4px',
       justifyContent: 'flex-start'
     }
-  }, /*#__PURE__*/React.createElement("label", {
+  }, /*#__PURE__*/React__default["default"].createElement("label", {
     ref: labelRef,
     style: {
       color: labelColor ?? configStyles.AUTOCOMPLETE.label.color,
@@ -9484,14 +9633,14 @@ const Autocomplete = ({
     },
     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.createElement("sup", null, iconRequired ? iconRequired : configStyles.FILE.icon.required ? configStyles.FILE.icon.required : /*#__PURE__*/React.createElement(SvgRequired, null))), /*#__PURE__*/React.createElement("div", {
+  }, label), required && /*#__PURE__*/React__default["default"].createElement("sup", null, iconRequired ? iconRequired : configStyles.FILE.icon.required ? configStyles.FILE.icon.required : /*#__PURE__*/React__default["default"].createElement(SvgRequired, null))), /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       display: contentDisplay ?? configStyles.AUTOCOMPLETE.parent.display,
       position: contentPosition ?? configStyles.AUTOCOMPLETE.parent.position,
       width: '100%',
       flexDirection: contentDirection ?? configStyles.AUTOCOMPLETE.parent.direction
     }
-  }, /*#__PURE__*/React.createElement("input", _extends({
+  }, /*#__PURE__*/React__default["default"].createElement("input", _extends({
     id: id,
     type: "text",
     value: innerValue,
@@ -9524,7 +9673,7 @@ const Autocomplete = ({
       flexDirection: contentTopDirection ?? configStyles.AUTOCOMPLETE.direction,
       boxShadow: errorMessage ? errorColor ? `0 0 0 2px ${errorColor}` : configStyles.AUTOCOMPLETE.error.box.shadow : isFocus ? contentTopBorderActive ? contentTopBorderActive : configStyles.AUTOCOMPLETE.box.shadowActive : isHover ? contentTopBorderHover ? contentTopBorderHover : configStyles.AUTOCOMPLETE.box.shadowHover : contentTopBorder ? contentTopBorder : configStyles.AUTOCOMPLETE.box.shadow
     }
-  }, props)), innerError ? /*#__PURE__*/React.createElement("span", {
+  }, props)), innerError ? /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
       left: '0px',
       position: 'absolute',
@@ -9539,97 +9688,97 @@ const Autocomplete = ({
   }, innerError) : '', optionList));
 };
 Autocomplete.propTypes = {
-  label: PropTypes.string,
-  required: PropTypes.bool,
-  disabled: PropTypes.bool,
-  keyNames: PropTypes.object,
-  selected: PropTypes.object,
-  className: PropTypes.string,
-  errorSize: PropTypes.string,
-  errorStyle: PropTypes.string,
-  errorWeight: PropTypes.string,
-  errorFamily: PropTypes.string,
-  marginTop: PropTypes.string,
-  labelSize: PropTypes.string,
-  labelStyle: PropTypes.string,
-  errorColor: PropTypes.string,
-  labelColor: PropTypes.string,
-  searchCount: PropTypes.number,
-  placeHolder: PropTypes.string,
-  labelWeight: PropTypes.number,
-  errorMessage: PropTypes.string,
-  labelDisplay: PropTypes.string,
-  autoComplete: PropTypes.string,
-  iconRequired: PropTypes.element,
-  contentDisplay: PropTypes.string,
-  contentTopSize: PropTypes.string,
-  contentTopStyle: PropTypes.string,
-  contentTopFamily: PropTypes.string,
-  contentPosition: PropTypes.string,
-  labelLineHeight: PropTypes.string,
-  contentTopColor: PropTypes.string,
-  change: PropTypes.func.isRequired,
-  labelFontFamily: PropTypes.string,
-  contentDirection: PropTypes.string,
-  contentTopWeight: PropTypes.number,
-  contentTopRadius: PropTypes.string,
-  contentTopHeight: PropTypes.string,
-  contentTopBorder: PropTypes.string,
-  getItem: PropTypes.func.isRequired,
-  contentTopDisplay: PropTypes.string,
-  contentTopPadding: PropTypes.string,
-  contentBottomLeft: PropTypes.string,
-  options: PropTypes.array.isRequired,
-  labelMarginBottom: PropTypes.string,
-  innerErrorPadding: PropTypes.string,
-  labelTextTransform: PropTypes.string,
-  showOptionDuration: PropTypes.string,
-  contentTopMaxWidth: PropTypes.string,
-  contentBottomWidth: PropTypes.string,
-  contentTopDirection: PropTypes.string,
-  contentTopBoxSizing: PropTypes.string,
-  contentBottomZindex: PropTypes.number,
-  contentBottomRadius: PropTypes.string,
-  contentTopLineHeight: PropTypes.string,
-  contentTopBorderHover: PropTypes.string,
-  contentBottomRowColor: PropTypes.string,
-  contentBottomMaxWidth: PropTypes.string,
-  contentBottomOverflow: PropTypes.string,
-  contentBottomPosition: PropTypes.string,
-  contentBottomMinHeight: PropTypes.string,
-  contentBottomBoxShadow: PropTypes.string,
-  contentBottomRowHeight: PropTypes.string,
-  contentBottomRowCursor: PropTypes.string,
-  contentTopBorderActive: PropTypes.string,
-  contentBottomRowDisplay: PropTypes.string,
-  contentBottomRowPadding: PropTypes.string,
-  contentBottomRowFontSize: PropTypes.string,
-  contentBottomRowBoxSizing: PropTypes.string,
-  innerErrorBackgroundColor: PropTypes.string,
-  contentBottomInnerDisplay: PropTypes.string,
-  contentBottomRowFontWeight: PropTypes.number,
-  contentBottomRowLineHeight: PropTypes.string,
-  contentBottomRowAlignItems: PropTypes.string,
-  contentBottomRowTransition: PropTypes.string,
-  contentBottomRowHoverColor: PropTypes.string,
-  contentBottomInnerOverflowY: PropTypes.string,
-  contentBottomInnerOverflowX: PropTypes.string,
-  contentBottomInnerMaxHeight: PropTypes.string,
-  contentBottomInnerDirection: PropTypes.string,
-  contentBottomRowMarginBottom: PropTypes.string,
-  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
+  label: PropTypes__default["default"].string,
+  required: PropTypes__default["default"].bool,
+  disabled: PropTypes__default["default"].bool,
+  keyNames: PropTypes__default["default"].object,
+  selected: PropTypes__default["default"].object,
+  className: PropTypes__default["default"].string,
+  errorSize: PropTypes__default["default"].string,
+  errorStyle: PropTypes__default["default"].string,
+  errorWeight: PropTypes__default["default"].string,
+  errorFamily: PropTypes__default["default"].string,
+  marginTop: PropTypes__default["default"].string,
+  labelSize: PropTypes__default["default"].string,
+  labelStyle: PropTypes__default["default"].string,
+  errorColor: PropTypes__default["default"].string,
+  labelColor: PropTypes__default["default"].string,
+  searchCount: PropTypes__default["default"].number,
+  placeHolder: PropTypes__default["default"].string,
+  labelWeight: PropTypes__default["default"].number,
+  errorMessage: PropTypes__default["default"].string,
+  labelDisplay: PropTypes__default["default"].string,
+  autoComplete: PropTypes__default["default"].string,
+  iconRequired: PropTypes__default["default"].element,
+  contentDisplay: PropTypes__default["default"].string,
+  contentTopSize: PropTypes__default["default"].string,
+  contentTopStyle: PropTypes__default["default"].string,
+  contentTopFamily: PropTypes__default["default"].string,
+  contentPosition: PropTypes__default["default"].string,
+  labelLineHeight: PropTypes__default["default"].string,
+  contentTopColor: PropTypes__default["default"].string,
+  change: PropTypes__default["default"].func.isRequired,
+  labelFontFamily: PropTypes__default["default"].string,
+  contentDirection: PropTypes__default["default"].string,
+  contentTopWeight: PropTypes__default["default"].number,
+  contentTopRadius: PropTypes__default["default"].string,
+  contentTopHeight: PropTypes__default["default"].string,
+  contentTopBorder: PropTypes__default["default"].string,
+  getItem: PropTypes__default["default"].func.isRequired,
+  contentTopDisplay: PropTypes__default["default"].string,
+  contentTopPadding: PropTypes__default["default"].string,
+  contentBottomLeft: PropTypes__default["default"].string,
+  options: PropTypes__default["default"].array.isRequired,
+  labelMarginBottom: PropTypes__default["default"].string,
+  innerErrorPadding: PropTypes__default["default"].string,
+  labelTextTransform: PropTypes__default["default"].string,
+  showOptionDuration: PropTypes__default["default"].string,
+  contentTopMaxWidth: PropTypes__default["default"].string,
+  contentBottomWidth: PropTypes__default["default"].string,
+  contentTopDirection: PropTypes__default["default"].string,
+  contentTopBoxSizing: PropTypes__default["default"].string,
+  contentBottomZindex: PropTypes__default["default"].number,
+  contentBottomRadius: PropTypes__default["default"].string,
+  contentTopLineHeight: PropTypes__default["default"].string,
+  contentTopBorderHover: PropTypes__default["default"].string,
+  contentBottomRowColor: PropTypes__default["default"].string,
+  contentBottomMaxWidth: PropTypes__default["default"].string,
+  contentBottomOverflow: PropTypes__default["default"].string,
+  contentBottomPosition: PropTypes__default["default"].string,
+  contentBottomMinHeight: PropTypes__default["default"].string,
+  contentBottomBoxShadow: PropTypes__default["default"].string,
+  contentBottomRowHeight: PropTypes__default["default"].string,
+  contentBottomRowCursor: PropTypes__default["default"].string,
+  contentTopBorderActive: PropTypes__default["default"].string,
+  contentBottomRowDisplay: PropTypes__default["default"].string,
+  contentBottomRowPadding: PropTypes__default["default"].string,
+  contentBottomRowFontSize: PropTypes__default["default"].string,
+  contentBottomRowBoxSizing: PropTypes__default["default"].string,
+  innerErrorBackgroundColor: PropTypes__default["default"].string,
+  contentBottomInnerDisplay: PropTypes__default["default"].string,
+  contentBottomRowFontWeight: PropTypes__default["default"].number,
+  contentBottomRowLineHeight: PropTypes__default["default"].string,
+  contentBottomRowAlignItems: PropTypes__default["default"].string,
+  contentBottomRowTransition: PropTypes__default["default"].string,
+  contentBottomRowHoverColor: PropTypes__default["default"].string,
+  contentBottomInnerOverflowY: PropTypes__default["default"].string,
+  contentBottomInnerOverflowX: PropTypes__default["default"].string,
+  contentBottomInnerMaxHeight: PropTypes__default["default"].string,
+  contentBottomInnerDirection: PropTypes__default["default"].string,
+  contentBottomRowMarginBottom: PropTypes__default["default"].string,
+  contentBottomBackgroundColor: PropTypes__default["default"].string,
+  contentBottomRowBackgroundColor: PropTypes__default["default"].string,
+  contentBottomRowHoverBackgroundColor: PropTypes__default["default"].string,
+  useLabelTooltip: PropTypes__default["default"].bool,
+  labelTooltipColor: PropTypes__default["default"].string,
+  labelTooltipPadding: PropTypes__default["default"].string,
+  labelTooltipFontSize: PropTypes__default["default"].string,
+  labelTooltipFontStyle: PropTypes__default["default"].string,
+  labelTooltipFontFamily: PropTypes__default["default"].string,
+  labelTooltipFontWeight: PropTypes__default["default"].string,
+  labelTooltipBorderRadius: PropTypes__default["default"].string,
+  labelTooltipBackgroundColor: PropTypes__default["default"].string,
+  backgroundDisableColor: PropTypes__default["default"].string
 };
 
 exports.Accordion = Accordion;