@xaypay/tui 0.2.13 → 0.2.15

package/dist/index.js

@@ -463,6 +463,8 @@ const FileItem = /*#__PURE__*/React__default["default"].memo(({
   }, iconDelItem ? iconDelItem : /*#__PURE__*/React__default["default"].createElement(SvgListItemDelete, null))));
 });
 
+var img$2 = "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";
+
 const boxSizing = 'border-box';
 const fontStyle = 'normal';
 const fontFamily = 'Arial';
@@ -489,17 +491,18 @@ const fontObject = {
 var packageResult = {
   // default properties for <Button /> component
   BUTTON: {
-    type: 'button',
+    opacity: 1,
     width: '100%',
+    radius: '6px',
+    className: '',
+    type: 'button',
     height: '46px',
     color: 'white',
-    contentWidth: false,
     border: 'none',
-    radius: '6px',
+    disabled: false,
     cursor: 'pointer',
+    contentWidth: false,
     padding: '12px 20px',
-    disabled: false,
-    className: '',
     transition: 'background-color 240ms, color 240ms',
     box: {
       sizing: boxSizing
@@ -509,7 +512,11 @@ var packageResult = {
       backgroundHover: '#CB3A3A',
       disabled: 'rgba(60, 57, 62, 1)',
       disabledLine: 'rgba(60, 57, 62, 1)',
-      disabledBackground: 'rgba(238, 238, 238, 1)'
+      disabledBackground: 'rgba(238, 238, 238, 1)',
+      withoutStyling: {
+        color: '#000000',
+        hoverColor: '#121212'
+      }
     },
     font: {
       ...fontObject
@@ -521,8 +528,10 @@ var packageResult = {
       }
     },
     icon: {
+      marginLeft: '10px',
       marginRight: '10px'
-    }
+    },
+    withoutStyling: false
   },
   // default properties for <Input /> component
   INPUT: {
@@ -552,9 +561,11 @@ var packageResult = {
       ...fontObject
     },
     label: {
+      dots: false,
       color: presetColors.dark,
       display: 'block',
       lineHeight: '22px',
+      iconMargin: '10px',
       marginBottom: '6px',
       font: {
         ...fontObject
@@ -566,6 +577,7 @@ var packageResult = {
       zIndex: '1',
       className: '',
       marginTop: '10px',
+      iconMargin: '10px',
       lineHeight: '19px',
       font: {
         ...fontObject
@@ -1111,6 +1123,36 @@ var packageResult = {
     },
     closeAreaBackgroundColor: 'linear-gradient(to bottom, rgb(60, 57, 62), rgba(60, 57, 62, 0))' // for close div background color
   },
+  // default properties for <SwipeModal /> component
+  SWIPEMODAL: {
+    width: '300px',
+    height: '100vh',
+    titleStyle: {
+      color: '#1C212D',
+      textAlign: 'left',
+      maxHeight: '66px',
+      padding: '0px 20px',
+      font: {
+        ...fontObject
+      }
+    },
+    parent: {
+      width: '100%',
+      height: '100vh',
+      colors: {
+        background: 'rgba(60, 61, 70, 0.2)'
+      }
+    },
+    colors: {
+      background: 'white'
+    },
+    border: {
+      radius: '10px'
+    },
+    withParent: true,
+    outSideClose: false,
+    closeIcon: img$2
+  },
   // default properties for <Checkbox /> component
   CHECKBOX: {
     className: '',
@@ -1179,6 +1221,12 @@ var packageResult = {
       font: {
         ...fontObject
       }
+    },
+    draggable: {
+      boxShadow: '1px 1px 9px black',
+      color: {
+        background: 'white'
+      }
     }
   },
   // default properties for <Pagination /> component
@@ -1187,13 +1235,48 @@ var packageResult = {
   },
   // default properties for <Toaster /> component
   TOASTER: {
+    width: '440px',
+    height: '83px',
     className: '',
-    icon: {
-      // info: React.createElement(SvgChecked, { just: 'must' }),
-      // warn: React.createElement(SvgUnchecked, { just: 'must' }),
-      // close: React.createElement(SvgChecked, { fill: 'green' }),      
-      // error: React.createElement(SvgChecked, { fill: 'green' }),      
-      // success: React.createElement(SvgChecked, { fill: 'green' }),      
+    marginBottom: '20px',
+    backgroundColor: '#FFFFFF',
+    padding: '14px 29px 14px 12px',
+    border: {
+      width: '2px',
+      style: 'solid',
+      radius: '40px',
+      color: '#EEEEEE'
+    },
+    title: {
+      color: '#3C393E',
+      lineHeight: '22px',
+      font: {
+        size: '16px',
+        style: 'normal',
+        weight: 600,
+        family: ''
+      },
+      props: {}
+    },
+    description: {
+      color: '#3C393E',
+      lineHeight: '16px',
+      font: {
+        size: '12px',
+        style: 'normal',
+        weight: 500,
+        family: ''
+      },
+      props: {
+        opacity: 0.8
+      }
+    },
+    icons: {
+      info: '',
+      warn: '',
+      error: '',
+      close: '',
+      success: ''
     }
   },
   // default properties for <Stepper /> component
@@ -1279,6 +1362,7 @@ const Button = ({
   radius,
   outline,
   padding,
+  opacity,
   onClick,
   disabled,
   className,
@@ -1287,13 +1371,18 @@ const Button = ({
   hoverColor,
   transition,
   contentWidth,
+  iconRightSide,
   disabledColor,
   textTransform,
+  withoutStyling,
   backgroundColor,
   disabledLineColor,
+  btnIconMarginLeft,
   btnIconMarginRight,
+  withoutStylingColor,
   backgroundHoverColor,
   disabledBackgroundColor,
+  withoutStylingHoverColor,
   ...props
 }) => {
   const [classProps, setClassProps] = React.useState({});
@@ -1329,22 +1418,23 @@ const Button = ({
       outline: 'none',
       alignItems: 'center',
       justifyContent: 'center',
+      height: height ?? configStyles.BUTTON.height,
+      padding: padding ?? configStyles.BUTTON.padding,
       fontSize: size ?? configStyles.BUTTON.font.size,
+      borderRadius: radius ?? configStyles.BUTTON.radius,
       fontStyle: style ?? configStyles.BUTTON.font.style,
       fontFamily: font ?? configStyles.BUTTON.font.family,
-      height: height ?? configStyles.BUTTON.height,
       fontWeight: weight ?? configStyles.BUTTON.font.weight,
-      padding: padding ?? configStyles.BUTTON.padding,
-      borderRadius: radius ?? configStyles.BUTTON.radius,
       boxSizing: boxSizing ?? configStyles.BUTTON.box.sizing,
       transition: transition ?? configStyles.BUTTON.transition,
       border: outline ? 'none' : border ?? configStyles.BUTTON.border,
       width: contentWidth ? 'auto' : width ?? configStyles.BUTTON.width,
-      cursor: disabled ? 'not-allowed' : cursor ?? configStyles.BUTTON.cursor,
       textTransform: textTransform ?? configStyles.BUTTON.text.transform,
-      backgroundColor: (outline || !outline) && disabled ? disabledBackgroundColor ? disabledBackgroundColor : configStyles.BUTTON.colors.disabledBackground : outline && !disabled ? isHover ? backgroundColor ? backgroundColor : configStyles.BUTTON.colors.background : '#ffffff' : !outline && !disabled && isHover ? backgroundHoverColor ? backgroundHoverColor : configStyles.BUTTON.colors.backgroundHover : backgroundColor ? backgroundColor : configStyles.BUTTON.colors.background,
-      boxShadow: outline ? disabled ? `inset 0 0 0 2px ${disabledLineColor ? disabledLineColor : configStyles.BUTTON.colors.disabledLine}` : `inset 0 0 0 2px ${backgroundColor ? backgroundColor : configStyles.BUTTON.colors.background}` : 'none',
-      color: (outline || !outline) && disabled ? disabledColor ? disabledColor : configStyles.BUTTON.colors.disabled : outline && !disabled ? isHover ? color ? color : configStyles.BUTTON.color : backgroundColor ? backgroundColor : configStyles.BUTTON.colors.background : !outline && !disabled && isHover ? hoverColor ? hoverColor : configStyles.BUTTON.text.colors.hover : color ? color : configStyles.BUTTON.color
+      cursor: disabled ? 'not-allowed' : cursor ?? configStyles.BUTTON.cursor,
+      opacity: opacity ?? configStyles.BUTTON.opacity,
+      backgroundColor: withoutStyling ?? configStyles.BUTTON.withoutStyling ? 'transparent' : (outline || !outline) && disabled ? disabledBackgroundColor ? disabledBackgroundColor : configStyles.BUTTON.colors.disabledBackground : outline && !disabled ? isHover ? backgroundColor ? backgroundColor : configStyles.BUTTON.colors.background : '#ffffff' : !outline && !disabled && isHover ? backgroundHoverColor ? backgroundHoverColor : configStyles.BUTTON.colors.backgroundHover : backgroundColor ? backgroundColor : configStyles.BUTTON.colors.background,
+      boxShadow: outline && !withoutStyling && !configStyles.BUTTON.withoutStyling ? disabled ? `inset 0 0 0 2px ${disabledLineColor ? disabledLineColor : configStyles.BUTTON.colors.disabledLine}` : `inset 0 0 0 2px ${backgroundColor ? backgroundColor : configStyles.BUTTON.colors.background}` : 'none',
+      color: withoutStyling ?? configStyles.BUTTON.withoutStyling ? isHover ? withoutStylingHoverColor ?? configStyles.BUTTON.colors.withoutStyling.hoverColor : withoutStylingColor ?? configStyles.BUTTON.colors.withoutStyling.color : (outline || !outline) && disabled ? disabledColor ? disabledColor : configStyles.BUTTON.colors.disabled : outline && !disabled ? isHover ? color ? color : configStyles.BUTTON.color : backgroundColor ? backgroundColor : configStyles.BUTTON.colors.background : !outline && !disabled && isHover ? hoverColor ? hoverColor : configStyles.BUTTON.text.colors.hover : color ? color : configStyles.BUTTON.color
     },
     type: type ?? configStyles.BUTTON.type,
     disabled: disabled ?? configStyles.BUTTON.disabled,
@@ -1352,43 +1442,50 @@ const Button = ({
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,
     className: classProps
-  }, props), isHover && hoverIcon ? hoverIcon : icon ?? null, ' ', label && /*#__PURE__*/React__default["default"].createElement("span", {
+  }, props), !iconRightSide ? isHover && hoverIcon ? hoverIcon : icon ?? null : ' ', ' ', label && /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
-      marginLeft: icon ? btnIconMarginRight ? btnIconMarginRight : configStyles.BUTTON.icon.marginRight : '0px'
+      marginLeft: icon && !iconRightSide ? btnIconMarginRight ? btnIconMarginRight : configStyles.BUTTON.icon.marginRight : '0px',
+      marginRight: icon && iconRightSide ? btnIconMarginLeft ? btnIconMarginLeft : configStyles.BUTTON.icon.marginLeft : '0px'
     }
-  }, label), ' ', !icon && !label && 'Add icon or label prop on Button component'));
+  }, label), ' ', iconRightSide ? isHover && hoverIcon ? hoverIcon : icon ?? null : ' ', !icon && !label && 'Add icon or label prop on Button component'));
 };
 Button.propTypes = {
   type: PropTypes__default["default"].string,
   size: PropTypes__default["default"].string,
   style: PropTypes__default["default"].string,
-  weight: PropTypes__default["default"].string,
   font: PropTypes__default["default"].string,
   icon: PropTypes__default["default"].element,
-  hoverIcon: 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
+  disabledBackgroundColor: PropTypes__default["default"].string,
+  withoutStylingHoverColor: PropTypes__default["default"].string
 };
 
 const SvgPdf = ({
@@ -1761,19 +1858,19 @@ const File = /*#__PURE__*/React.forwardRef(({
             setError('');
             if (file[0].type === 'application/pdf') {
               setImage('pdf');
-              change(file[0]);
-              setSingleFile(file[0]);
+              change(file);
+              setSingleFile(file);
             } else if (file[0].type === 'image/heif' || file[0].type === 'image/heic' || file[0].name.toLowerCase().endsWith('.heic') || file[0].name.toLowerCase().endsWith('.heif')) {
               handleCheckHeicFormat(file[0]).then(() => {
                 setImage('heic');
-                change(file[0]);
-                setSingleFile(file[0]);
+                change(file);
+                setSingleFile(file);
               }).catch(() => {
                 setImage(null);
                 setError(formatError ?? configStyles.FILE.error.format);
               });
             } else {
-              change(file[0]);
+              change(file);
               setImage(URL.createObjectURL(file[0]));
             }
           } else {
@@ -2382,7 +2479,7 @@ const handleUtilsCheckTypeTel = (val, prevVal) => {
   }
   return val;
 };
-const handleUtilsCheckTypeNumber = (val, prevVal, maxLength, floatToFix, maxNumSize, withoutDot, innerMinNumSize) => {
+const handleUtilsCheckTypeNumber = (val, prevVal, maxLength, floatToFix, maxNumSize, withoutDot, innerMinNumSize, numberMaxLength) => {
   if (maxLength && maxLength > 0) {
     if (val.length > maxLength) {
       val = val.substr(0, maxLength);
@@ -2392,6 +2489,9 @@ const handleUtilsCheckTypeNumber = (val, prevVal, maxLength, floatToFix, maxNumS
     if (val.length > 16 && !val.includes('.')) {
       val = val.substr(0, 16);
     }
+    if (numberMaxLength && numberMaxLength > 0 && !val.includes('.')) {
+      val = val.substr(0, numberMaxLength);
+    }
     const floatNumParts = typeof val === 'string' ? val.split(/\.|\․|\.|\,/) : val;
     const int = floatNumParts[0];
     const float = floatNumParts[1];
@@ -2463,9 +2563,9 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$a = ".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}";
-var styles$9 = {"sorting-arrows":"table-module_sorting-arrows__BaN-G","td-span":"table-module_td-span__XHo6k","list-text":"table-module_list-text__kmKIq","dots-option-item":"table-module_dots-option-item__jNOxO"};
-styleInject(css_248z$a);
+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}";
+var styles$a = {"sorting-arrows":"table-module_sorting-arrows__BaN-G","td-span":"table-module_td-span__XHo6k","list-text":"table-module_list-text__kmKIq","dots-option-item":"table-module_dots-option-item__jNOxO"};
+styleInject(css_248z$b);
 
 /* eslint-disable no-prototype-builtins */
 const TH = ({
@@ -2507,7 +2607,7 @@ const TH = ({
       borderColor: hideBorder ? 'transparent' : '#eeeeee'
     },
     onClick: handleHeaderItemClick,
-    className: `${hasOwnerProperty(item, 'sortingArrows') ? item.sortingArrows === true ? styles$9['sorting-arrows'] : '' : ''}`
+    className: `${hasOwnerProperty(item, 'sortingArrows') ? item.sortingArrows === true ? styles$a['sorting-arrows'] : '' : ''}`
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       display: 'flex',
@@ -2536,16 +2636,16 @@ const TD = ({
   item,
   index,
   rowItem,
+  dragged,
+  dragEnd,
   rowRadius,
   dragStart,
-  handleMouseDown,
   hideBorder,
   innerIndex,
   tBodyColor,
   orderColor,
   borderRight,
   tBodyPadding,
-  setIsDragging,
   orderFontSize,
   tBodyFontSize,
   openListColor,
@@ -2641,7 +2741,7 @@ const TD = ({
         },
         id: newItem.id,
         type: newItem.type,
-        className: styles$9['td-span'],
+        className: styles$a['td-span'],
         key: `${newItem.id}_${newIndex}`,
         onClick: e => handleCheckActions(e, newItem, 'type', newIndex)
       }, newItem.content === 0 ? newItem.content.toString() : newItem.content ? newItem.content : '');
@@ -2663,7 +2763,7 @@ const TD = ({
           },
           id: iT.id ? iT.id : '',
           type: iT.type ? iT.type : '',
-          className: styles$9['td-span'],
+          className: styles$a['td-span'],
           onClick: e => handleCheckActions(e, iT, 'type', iN),
           key: `${iT.id || iT.content}_${iN}`
         }, iT.content === 0 ? iT.content.toString() : iT.content ? iT.content : '');
@@ -2687,7 +2787,7 @@ const TD = ({
       cursor: 'pointer'
     },
     onClick: () => handleOpenCloseRowSingleArrow(index, innerIndex, item),
-    className: styles$9['td-span']
+    className: styles$a['td-span']
   }, hasOwnerProperty(item, 'status') && item.status === 'close' ? item.closeArrow : item.openArrow) : '', hasOwnerProperty(item, 'draggableIcon') && /*#__PURE__*/React__default["default"].createElement("div", {
     draggable: true,
     style: {
@@ -2695,7 +2795,9 @@ const TD = ({
       height: '24px',
       cursor: 'grab'
     },
-    onDragStart: () => dragStart(index)
+    onDrag: dragged,
+    onDragEnd: dragEnd,
+    onDragStart: e => dragStart(e, index, row)
   }, /*#__PURE__*/React__default["default"].createElement("img", {
     src: img$1,
     alt: "drag"
@@ -2754,7 +2856,7 @@ const TD = ({
   }, hasOwnerProperty(item, 'options') && item.options.map((optionItem, optionIndex) => {
     return /*#__PURE__*/React__default["default"].createElement("span", {
       key: `${optionItem.content}_${optionIndex}`,
-      className: styles$9['dots-option-item'],
+      className: styles$a['dots-option-item'],
       style: {
         color: '#3C393E',
         fontSize: '14px',
@@ -2796,7 +2898,7 @@ const TD = ({
       }, innerItem.content.map((contInnerItem, contInnerIndex) => {
         return /*#__PURE__*/React__default["default"].createElement("p", {
           key: `${contInnerItem}_${contInnerIndex}`,
-          className: styles$9['list-text'],
+          className: styles$a['list-text'],
           style: {
             maxWidth: '100%',
             color: openListColor,
@@ -2813,7 +2915,7 @@ const TD = ({
     } else {
       return /*#__PURE__*/React__default["default"].createElement("p", {
         key: `${innerItem}_${innerItemIndex}`,
-        className: styles$9['list-text'],
+        className: styles$a['list-text'],
         style: {
           maxWidth: '100%',
           color: openListColor,
@@ -2834,7 +2936,7 @@ const TD = ({
       cursor: 'pointer'
     },
     onClick: () => handleOpenCloseRowSingleArrow(index, innerIndex, item),
-    className: styles$9['td-span']
+    className: styles$a['td-span']
   }, hasOwnerProperty(item, 'status') && item.status === 'close' ? item.closeArrow : item.openArrow) : '') : '');
 };
 
@@ -2935,8 +3037,11 @@ const Table = ({
   draggable,
   showOrder,
   draggableColor,
-  getDraggableData
+  getDraggableData,
+  draggableItemBoxShadow,
+  draggableItemBackgroundColor
 }) => {
+  const itemRefs = React.useRef({});
   const headerRef = React.useRef(null);
   const draggedRowIndex = React.useRef(null);
   const [body, setBody] = React.useState([]);
@@ -2946,8 +3051,12 @@ const Table = ({
   const [checkDrag, setCheckDrag] = React.useState(false);
   const [checkedArray, setCheckedArray] = React.useState([]);
   const [configStyles, setConfigStyles] = React.useState({});
-  React.useState(false);
-  const [draggingIndex, setDraggingIndex] = React.useState(null);
+  const [dragging, setDragging] = React.useState(false);
+  const [draggedItem, setDraggedItem] = React.useState(null);
+  const [position, setPosition] = React.useState({
+    x: 0,
+    y: 0
+  });
   const handleCheckIfArrow = (bodyData, data) => {
     let removeItemIndex;
     let headerWithoutArrow = [];
@@ -3194,9 +3303,18 @@ const Table = ({
           tempCheckedArray.push(innerItem.checked);
         });
         if (tempCheckedArray.every(i => i)) {
-          item.checkBox.checked = true;
+          if (hasOwnerProperty(item, 'checkBox')) {
+            if (hasOwnerProperty(item.checkBox, 'checked')) {
+              item.checkBox.checked = true;
+              return item;
+            }
+          }
         } else {
-          item.checkBox.checked = false;
+          if (hasOwnerProperty(item, 'checkBox')) {
+            if (hasOwnerProperty(item.checkBox, 'checked')) {
+              item.checkBox.checked = false;
+            }
+          }
         }
       }
       return item;
@@ -3261,7 +3379,7 @@ const Table = ({
   const handleCheckArrowActionHeader = (e, item) => {
     e.stopPropagation();
     const checkedOpenableAllRows = header.map((innerItem, innerIndex) => {
-      if (item.checkIndex === innerIndex) {
+      if (item.checkIndex === (draggable && !showOrder ? innerIndex - 1 : draggable && showOrder ? innerIndex - 2 : innerIndex)) {
         if (item.status === 'close') {
           innerItem.status = 'open';
         } else {
@@ -3354,24 +3472,59 @@ const Table = ({
     });
     setBody(() => checkBodyMore);
   };
-  const handleDragStart = index => {
+  const handleDragStart = (e, index, row) => {
+    setDragging(true);
+    setDraggedItem(row);
     draggedRowIndex.current = index;
-    setDraggingIndex(() => index);
+    e.dataTransfer.setDragImage(new Image(), 0, 0);
+  };
+  const handleDrag = e => {
+    setPosition({
+      x: e.clientX,
+      y: e.clientY
+    });
   };
-  const handleDrop = index => {
+  const handleDrop = (e, index) => {
     let correctData = [];
     const newRows = body;
     const [draggedRow] = newRows.splice(draggedRowIndex.current, 1);
     newRows.splice(index, 0, draggedRow);
-    newRows.map(item => {
+    newRows.map((item, newIndex) => {
+      item.map(innerItem => {
+        if (hasOwnerProperty(innerItem, 'checkIndex')) {
+          innerItem.checkIndex = newIndex;
+        }
+      });
       correctData.push([...item]);
     });
     setBody(correctData);
     getDraggableData && getDraggableData(correctData);
     setCheckDrag(prev => !prev);
     draggedRowIndex.current = null;
-    setDraggingIndex(() => null);
     correctData = null;
+    setDraggedItem(null);
+    setDragging(false);
+    e.dataTransfer.setDragImage(new Image(), 0, 0);
+  };
+  const handleDragEnd = e => {
+    setDraggedItem(null);
+    setDragging(false);
+    e.dataTransfer.setDragImage(new Image(), 0, 0);
+  };
+  const setRef = (index, element) => {
+    if (element) {
+      itemRefs.current[index] = element;
+    }
+  };
+  const handleSafeStringify = obj => {
+    const seen = new WeakSet();
+    return JSON.stringify(obj, (key, value) => {
+      if (typeof value === "object" && value !== null) {
+        if (seen.has(value)) return; // Ignore circular reference
+        seen.add(value);
+      }
+      return value;
+    });
   };
   React.useEffect(() => {
     const draggableArray = body && body.length && body.map((item, index) => {
@@ -3389,7 +3542,7 @@ const Table = ({
     setBody(() => draggableArray);
   }, [checkDrag]);
   React.useEffect(() => {
-    const isEqual = JSON.stringify(body) === JSON.stringify(dataBody);
+    const isEqual = handleSafeStringify(body) === handleSafeStringify(dataBody);
     if (!isEqual) {
       let insert = [];
       let newArray = [];
@@ -3397,7 +3550,11 @@ const Table = ({
       const disabledArray = [];
       const checkBodyForChackedItems = dataBody.slice().map(item => Object.values(item));
       if (arrowShow) {
-        const arrowColumnCount = handleSetInsertIndex(checkBodyForChackedItems[0], arrowColumn);
+        let column = arrowColumn;
+        if (draggable) {
+          column -= 1;
+        }
+        const arrowColumnCount = handleSetInsertIndex(checkBodyForChackedItems[0], column);
         const checkForInsertArrow = handleTransformDataForInsertArrow(checkBodyForChackedItems, arrowColumnCount, 'body');
         insert = checkForInsertArrow.map((item, index) => {
           item.map((innerItem, innerIndex) => {
@@ -3416,27 +3573,8 @@ const Table = ({
           });
           return item;
         });
+        newArray = insert;
         checkedItems = handleSetCheckboxArray(insert);
-        if (draggable) {
-          newArray = insert && insert.length && insert.map((item, index) => {
-            item.map(innerItem => {
-              if (hasOwnerProperty(innerItem, 'colorStatus')) {
-                innerItem.colorStatus = null;
-              }
-            });
-            if (showOrder) {
-              item.unshift({
-                content: index + 1,
-                draggable: true
-              });
-            }
-            item.unshift({
-              draggableIcon: '',
-              colorStatus: draggableColor
-            });
-            return item;
-          });
-        }
       } else {
         insert = checkBodyForChackedItems.map((item, index) => {
           item.map((innerItem, innerIndex) => {
@@ -3455,69 +3593,62 @@ const Table = ({
           });
           return item;
         });
+        newArray = insert;
         checkedItems = handleSetCheckboxArray(insert);
-        if (draggable) {
-          newArray = insert && insert.length && insert.map((item, index) => {
-            item.map(innerItem => {
-              if (hasOwnerProperty(innerItem, 'colorStatus')) {
-                innerItem.colorStatus = null;
-              }
-            });
-            if (showOrder) {
-              item.unshift({
-                content: index + 1,
-                draggable: true
-              });
+      }
+      if (draggable) {
+        newArray = insert && insert.length && insert.map((item, index) => {
+          item.map(innerItem => {
+            if (hasOwnerProperty(innerItem, 'colorStatus')) {
+              innerItem.colorStatus = null;
             }
+          });
+          if (showOrder) {
             item.unshift({
-              draggableIcon: '',
-              colorStatus: draggableColor
+              content: index + 1,
+              draggable: true
             });
-            return item;
+          }
+          item.unshift({
+            draggableIcon: '',
+            colorStatus: draggableColor
           });
-        }
+          return item;
+        });
       }
-      getDraggableData && getDraggableData(newArray && newArray.length ? newArray : insert);
-      setBody(() => newArray && newArray.length ? newArray : insert);
+      setBody(() => [...newArray]);
       setDisableArr(disabledArray);
       setCheckedArray(() => checkedItems);
+      getDraggableData && getDraggableData(newArray);
     }
   }, [dataBody, arrowColumn, arrowShow, draggable]);
   React.useEffect(() => {
-    const isEqual = JSON.stringify(header) === JSON.stringify(dataHeader);
+    const isEqual = handleSafeStringify(header) === handleSafeStringify(dataHeader);
     if (!isEqual) {
-      let insert = [];
       let newArray = [];
       if (arrowShow) {
-        const header = dataHeader.slice();
-        const arrowColumnCount = handleSetInsertIndex(header, arrowColumn);
-        const checkForInsertArrow = handleTransformDataForInsertArrow(header, arrowColumnCount, 'header');
-        insert = checkForInsertArrow;
+        let column = arrowColumn;
         if (draggable) {
-          newArray = insert;
-          newArray && newArray.length && newArray.unshift({
-            content: ''
-          });
-          if (showOrder) {
-            newArray.unshift({
-              content: ''
-            });
-          }
+          column -= 1;
         }
+        const header = dataHeader.slice();
+        const arrowColumnCount = handleSetInsertIndex(header, column);
+        const checkForInsertArrow = handleTransformDataForInsertArrow(header, arrowColumnCount, 'header');
+        newArray = checkForInsertArrow;
       } else {
-        if (draggable) {
-          newArray = dataHeader;
-          newArray && newArray.length && newArray.unshift({
+        newArray = dataHeader.slice();
+      }
+      if (draggable) {
+        newArray && newArray.length && newArray.unshift({
+          content: ''
+        });
+        if (showOrder) {
+          newArray.unshift({
             content: ''
           });
-          if (showOrder) {
-            newArray.unshift({
-              content: ''
-            });
-          }
         }
       }
-      setHeader(() => newArray && newArray.length ? newArray : insert);
+      setHeader(() => [...newArray]);
     }
   }, [dataHeader, arrowColumn, arrowShow, disableArr, draggable]);
   React.useEffect(() => {
@@ -3576,22 +3707,24 @@ const Table = ({
     }
   }, body.map((item, index) => {
     return /*#__PURE__*/React__default["default"].createElement("tr", {
-      onDragStart: () => handleDragStart(index),
       onDragOver: e => e.preventDefault(),
-      onDrop: () => handleDrop(index),
+      onDrop: e => handleDrop(e, index),
       key: `${item}_${index}`,
       style: {
         backgroundColor: tableRowBGColor ?? configStyles.TABLE.body.row.colors.background,
         borderBottom: index === body.length - 1 ? 'none' : tBodyRowBorder ? tBodyRowBorder : configStyles.TABLE.body.row.border,
         borderColor: hideBorder ? 'transparent' : configStyles.TABLE.body.row.borderColor,
         boxShadow: (tableRowItem ? tableRowItem : configStyles.TABLE.body.row.asItem) ? tableRowBoxShadow ? tableRowBoxShadow : configStyles.TABLE.body.row.box.shadow : 'none'
-      }
+      },
+      ref: el => setRef(index, el)
     }, Object.values(item).map((innerItem, innerIndex) => {
       return /*#__PURE__*/React__default["default"].createElement(TD, {
         index: index,
         item: innerItem,
+        dragged: handleDrag,
         hideBorder: hideBorder,
         innerIndex: innerIndex,
+        dragEnd: handleDragEnd,
         row: Object.values(item),
         dragStart: handleDragStart,
         id: item.id ? item.id : '',
@@ -3627,10 +3760,59 @@ const Table = ({
         handleOpenCloseRowSingleArrow: handleOpenCloseRowSingleArrow
       });
     }));
+  })), draggable && dragging && draggedItem && /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      position: 'fixed',
+      top: `${position.y - 30}px`,
+      left: `${position.x - 30}px`,
+      borderSpacing: '0px',
+      pointerEvents: 'none',
+      height: 'fit-content',
+      blockSize: 'fit-content',
+      borderRadius: tableRowItem ? tableRowRadius ?? configStyles.TABLE.body.row.radius : '0px',
+      boxShadow: draggableItemBoxShadow ?? configStyles.TABLE.draggable.boxShadow,
+      backgroundColor: draggableItemBackgroundColor ?? configStyles.TABLE.draggable.color.background
+    }
+  }, draggedItem.map((innerItem, innerIndex) => {
+    return /*#__PURE__*/React__default["default"].createElement(TD, {
+      item: innerItem,
+      dragged: handleDrag,
+      hideBorder: hideBorder,
+      innerIndex: innerIndex,
+      row: Object.values(draggedItem),
+      dragStart: handleDragStart,
+      handleCheckDots: handleCheckDots,
+      key: `${innerItem}__${innerIndex}`,
+      openListColor: openListColor ?? configStyles.TABLE.openList.color,
+      tableColumnMinWidth: tableColumnMinWidth ?? configStyles.TABLE.column.minWidth,
+      tableColumnMaxWidth: tableColumnMaxWidth ?? configStyles.TABLE.column.maxWidth,
+      openListFontSize: openListFontSize ?? configStyles.TABLE.openList.font.size,
+      openListFontStyle: openListFontStyle ?? configStyles.TABLE.openList.font.style,
+      openListFontWeight: openListFontWeight ?? configStyles.TABLE.openList.font.weight,
+      openListFontFamily: openListFontFamily ?? configStyles.TABLE.openList.font.family,
+      tBodyColor: tBodyColor ?? configStyles.TABLE.body.color,
+      orderColor: orderColor ?? configStyles.TABLE.order.color,
+      rowItem: tableRowItem ?? configStyles.TABLE.body.row.isItem,
+      tBodyPadding: tBodyPadding ?? configStyles.TABLE.body.padding,
+      tBodyTextAlign: tBodyTextAlign ?? configStyles.TABLE.textAlign,
+      rowRadius: tableRowRadius ?? configStyles.TABLE.body.row.radius,
+      tBodyFontSize: tBodyFontSize ?? configStyles.TABLE.body.font.size,
+      orderFontSize: orderFontSize ?? configStyles.TABLE.order.font.size,
+      orderFontStyle: orderFontStyle ?? configStyles.TABLE.order.font.style,
+      tBodyFontFamily: tBodyFontFamily ?? configStyles.TABLE.body.font.family,
+      tBodyFontWeight: tBodyFontWeight ?? configStyles.TABLE.body.font.weight,
+      orderFontFamily: orderFontFamily ?? configStyles.TABLE.order.font.family,
+      orderFontWeight: orderFontWeight ?? configStyles.TABLE.order.font.weight,
+      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
+    });
   })));
 };
 Table.propTypes = {
   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,
@@ -3668,9 +3850,9 @@ Table.propTypes = {
   hideBorder: PropTypes__default["default"].bool
 };
 
-var css_248z$9 = ".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$8 = {"animation__modal":"modal-module_animation__modal__3mt48","show-popup":"modal-module_show-popup__WrH7a"};
-styleInject(css_248z$9);
+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","show-popup":"modal-module_show-popup__WrH7a"};
+styleInject(css_248z$a);
 
 const SvgNext = ({
   title,
@@ -3945,7 +4127,7 @@ const Modal = ({
       justifyContent: justifyContent ?? configStyles.MODAL.justifyContent
     }
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${styles$8['animation__modal']}`,
+    className: `${styles$9['animation__modal']}`,
     onClick: handleStopClosing,
     style: {
       position: 'relative',
@@ -4339,6 +4521,7 @@ const NumberInput = ({
   value,
   float,
   radius,
+  withZero,
   disabled,
   inpStyles,
   minNumSize,
@@ -4346,6 +4529,7 @@ const NumberInput = ({
   insideError,
   inputChange,
   inpAttributes,
+  numberMaxLength,
   setInnerErrorMessage
 }) => {
   const [innerValue, setInnerValue] = React.useState('');
@@ -4353,7 +4537,7 @@ const NumberInput = ({
   const handleChange = event => {
     let prevValue = innerValue;
     let currentValue = event.target.value.replace(/\.|․|\.|,/g, '.');
-    currentValue = handleUtilsCheckTypeNumber(currentValue, prevValue, null, float, maxNumSize, dots);
+    currentValue = handleUtilsCheckTypeNumber(currentValue, prevValue, null, float, maxNumSize, dots, innerMinNumSize, numberMaxLength);
     setInnerValue(() => currentValue);
     if (inputChange && currentValue !== prevValue) {
       if (currentValue < Number.MIN_SAFE_INTEGER || currentValue > Number.MAX_SAFE_INTEGER) {
@@ -4383,11 +4567,13 @@ const NumberInput = ({
     }
   };
   const handleBlur = () => {
-    const newVal = handleRemoveLeadingZeros(innerValue);
-    if (parseFloat(newVal) === 0) {
-      inputChange('');
-    } else {
-      inputChange(newVal);
+    if (!withZero) {
+      const newVal = handleRemoveLeadingZeros(innerValue);
+      if (parseFloat(newVal) === 0) {
+        inputChange('');
+      } else {
+        inputChange(newVal);
+      }
     }
   };
   React.useEffect(() => {
@@ -4404,10 +4590,10 @@ const NumberInput = ({
   React.useEffect(() => {
     let newValue = '';
     if (value !== undefined && value !== null) {
-      newValue = handleUtilsCheckTypeNumber(value, newValue, null, float, maxNumSize, dots);
+      newValue = handleUtilsCheckTypeNumber(value, newValue, null, float, maxNumSize, dots, innerMinNumSize, numberMaxLength);
     }
     setInnerValue(() => newValue);
-  }, [dots, value, float, maxNumSize, minNumSize]);
+  }, [dots, value, float, maxNumSize, minNumSize, numberMaxLength]);
   return /*#__PURE__*/React__default["default"].createElement("input", {
     type: "text",
     value: innerValue,
@@ -4428,9 +4614,9 @@ const NumberInput = ({
   });
 };
 
-var css_248z$8 = ".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$7 = {"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$8);
+var css_248z$9 = ".input-module_input-wrap__NunrE{position:relative;width:100%}.input-module_input-content__kP7lZ{appearance:none!important;-webkit-appearance:none!important;display:flex;width:100%}input:-webkit-autofill,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover{background-color:inherit!important}input::-ms-clear,input::-ms-reveal{display:none}.input-module_error-message-show__OrVSo{animation-fill-mode:forwards;animation-name:input-module_error-show__9MP6k}.input-module_inp-num__vH7HL::-webkit-inner-spin-button,.input-module_inp-num__vH7HL::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input-module_inp-num__vH7HL[type=number]{-moz-appearance:textfield}@keyframes input-module_error-show__9MP6k{to{bottom:-20px;transform:scaleX(1);-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);-o-transform:scaleX(1)}}";
+var styles$8 = {"input-wrap":"input-module_input-wrap__NunrE","input-content":"input-module_input-content__kP7lZ","error-message-show":"input-module_error-message-show__OrVSo","error-show":"input-module_error-show__9MP6k","inp-num":"input-module_inp-num__vH7HL"};
+styleInject(css_248z$9);
 
 const InputTypes = {
   TEL: 'tel',
@@ -4438,6 +4624,10 @@ const InputTypes = {
   NUMBER: 'number',
   PASSWORD: 'password'
 };
+const IconSides = {
+  LEFT: 'left',
+  RIGHT: 'right'
+};
 const P = styled__default["default"].span`
     animation: ${true};
 `;
@@ -4460,6 +4650,9 @@ const Input = ({
   leftIcon,
   required,
   disabled,
+  errorDots,
+  errorIcon,
+  labelDots,
   iconWidth,
   rightIcon,
   className,
@@ -4469,6 +4662,7 @@ const Input = ({
   errorSize,
   labelSize,
   maxLength,
+  labelIcon,
   labelStyle,
   floatToFix,
   minNumSize,
@@ -4477,6 +4671,8 @@ const Input = ({
   errorColor,
   withoutDot,
   errorStyle,
+  labelAction,
+  errorAction,
   placeholder,
   errorZindex,
   labelWeight,
@@ -4486,14 +4682,22 @@ const Input = ({
   errorMessage,
   autoComplete,
   labelDisplay,
+  labelIconSide,
+  showLabelIcon,
+  errorIconSide,
+  showErrorIcon,
   errorMarginTop,
   boxShadowHover,
   errorClassName,
+  labelIconMargin,
   labelFontFamily,
   phoneAlignItems,
   errorLineHeight,
   labelLineHeight,
+  numberMaxLength,
   backgroundColor,
+  errorIconMargin,
+  withZero = false,
   labelMarginBottom,
   regexpErrorMessage,
   phoneJustifyContent,
@@ -4510,7 +4714,11 @@ const Input = ({
   const [classProps, setClassProps] = React.useState({});
   const [innerValue, setInnerValue] = React.useState('');
   const [configStyles, setConfigStyles] = React.useState({});
+  const [innerErrorIcon, setInnerErrorIcon] = React.useState('');
+  const [innerLabelIcon, setInnerLabelIcon] = React.useState('');
   const [innerErrorMessage, setInnerErrorMessage] = React.useState('');
+  const [innerErrorIconSide, setInnerErrorIconSide] = React.useState('left');
+  const [innerLabelIconSide, setInnerLabelIconSide] = React.useState('left');
   const inpStyles = configStyles.INPUT && {
     width: width ?? configStyles.INPUT.width,
     cursor: disabled ? 'not-allowed' : 'auto',
@@ -4567,11 +4775,27 @@ const Input = ({
     setInnerValue(() => val);
   }, [value]);
   React.useEffect(() => {
-    className && setClassProps(() => classnames__default["default"](className ?? configStyles.INPUT.className, type === 'number' ? styles$7['inp-num'] : '', styles$7['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);
+  }, [errorIcon]);
+  React.useEffect(() => {
+    if (errorIconSide) {
+      setInnerErrorIconSide(() => errorIconSide);
+    }
+  }, [errorIconSide]);
+  React.useEffect(() => {
+    setInnerLabelIcon(() => labelIcon);
+  }, [labelIcon]);
+  React.useEffect(() => {
+    if (labelIconSide) {
+      setInnerLabelIconSide(() => labelIconSide);
+    }
+  }, [labelIconSide]);
   React.useEffect(() => {
     configStylesPromise.then(data => {
-      setClassProps(() => classnames__default["default"](className ?? data.INPUT.className, type === 'number' ? styles$7['inp-num'] : '', styles$7['input-wrap']));
+      setClassProps(() => classnames__default["default"](className ?? data.INPUT.className, type === 'number' ? styles$8['inp-num'] : '', styles$8['input-wrap']));
       setConfigStyles(() => {
         return {
           ...data
@@ -4585,6 +4809,7 @@ const Input = ({
     className: classProps
   }, label ? /*#__PURE__*/React__default["default"].createElement("label", {
     style: {
+      maxWidth: '100%',
       color: labelColor ?? configStyles.INPUT.label.color,
       fontSize: labelSize ?? configStyles.INPUT.label.font.size,
       fontStyle: labelStyle ?? configStyles.INPUT.label.font.style,
@@ -4592,10 +4817,34 @@ const Input = ({
       fontWeight: labelWeight ?? configStyles.INPUT.label.font.weight,
       lineHeight: labelLineHeight ?? configStyles.INPUT.label.lineHeight,
       marginBottom: labelMarginBottom ?? configStyles.INPUT.label.marginBottom,
-      fontFamily: labelFontFamily ?? configStyles.INPUT.label.font.family
-    }
-  }, label, required && /*#__PURE__*/React__default["default"].createElement("sup", null, /*#__PURE__*/React__default["default"].createElement(SvgRequired, null))) : '', /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${styles$7['input-content']}`,
+      fontFamily: labelFontFamily ?? configStyles.INPUT.label.font.family,
+      whiteSpace: (labelDots ? labelDots : configStyles.INPUT.label.dots) ? 'nowrap' : 'normal',
+      overflow: (labelDots ? labelDots : configStyles.INPUT.label.dots) ? 'hidden' : 'visible',
+      textOverflow: (labelDots ? labelDots : configStyles.INPUT.label.dots) ? 'ellipsis' : ''
+    },
+    title: label
+  }, showLabelIcon && innerLabelIcon && innerLabelIconSide === 'left' ? /*#__PURE__*/React__default["default"].createElement("img", {
+    alt: "label icon",
+    src: innerLabelIcon,
+    style: {
+      width: '14px',
+      height: '14px',
+      cursor: labelAction ? 'pointer' : 'normal',
+      marginRight: labelIconMargin ?? configStyles.INPUT.label.iconMargin
+    },
+    onClick: labelAction ? () => labelAction() : _ => _
+  }) : '', label, required && /*#__PURE__*/React__default["default"].createElement("sup", null, /*#__PURE__*/React__default["default"].createElement(SvgRequired, null)), showLabelIcon && innerLabelIcon && innerLabelIconSide === 'right' ? /*#__PURE__*/React__default["default"].createElement("img", {
+    alt: "label icon",
+    src: innerLabelIcon,
+    style: {
+      width: '14px',
+      height: '14px',
+      cursor: labelAction ? 'pointer' : 'normal',
+      marginLeft: labelIconMargin ?? configStyles.INPUT.label.iconMargin
+    },
+    onClick: labelAction ? () => labelAction() : _ => _
+  }) : '') : '', /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${styles$8['input-content']}`,
     style: {
       width: width ?? configStyles.INPUT.width,
       borderRadius: radius ?? configStyles.INPUT.radius,
@@ -4639,9 +4888,11 @@ const Input = ({
     value: innerValue,
     float: floatToFix,
     disabled: disabled,
+    withZero: withZero,
     inputChange: change,
     inpStyles: inpStyles,
     inpAttributes: inpAttributes,
+    numberMaxLength: numberMaxLength,
     insideError: fireInputInsideError,
     minNumSize: minNumSize ? minNumSize : '',
     maxNumSize: maxNumSize ? maxNumSize : '',
@@ -4684,32 +4935,62 @@ const Input = ({
     animation: animation,
     style: {
       margin: '0px',
+      display: 'flex',
+      alignItems: 'center',
       position: 'absolute',
       width: width ?? configStyles.INPUT.width,
       left: errorLeft ?? configStyles.INPUT.error.left,
       color: errorColor ?? configStyles.INPUT.error.color,
+      zIndex: errorZindex ?? configStyles.INPUT.error.zIndex,
       fontSize: errorSize ?? configStyles.INPUT.error.font.size,
       fontStyle: errorStyle ?? configStyles.INPUT.error.font.style,
       fontFamily: errorFamily ?? configStyles.INPUT.error.font.family,
       fontWeight: errorWeight ?? configStyles.INPUT.error.font.weight,
-      zIndex: errorZindex ?? configStyles.INPUT.error.zIndex,
       lineHeight: errorLineHeight ?? configStyles.INPUT.error.lineHeight,
       top: errorMarginTop ? `calc(100% + ${errorMarginTop})` : `calc(100% + ${configStyles.INPUT.error.marginTop})`,
       transform: 'scale3d(1,1,1)'
     },
     className: errorClassName ?? configStyles.INPUT.error.className
-  }, innerErrorMessage) : '');
+  }, showErrorIcon && innerErrorIcon && innerErrorIconSide === 'left' ? /*#__PURE__*/React__default["default"].createElement("img", {
+    alt: "error icon",
+    src: innerErrorIcon,
+    style: {
+      width: '14px',
+      height: '14px',
+      cursor: errorAction ? 'pointer' : 'normal',
+      marginRight: errorIconMargin ?? configStyles.INPUT.error.iconMargin
+    },
+    onClick: errorAction ? () => errorAction() : _ => _
+  }) : '', /*#__PURE__*/React__default["default"].createElement("span", {
+    style: {
+      display: 'inline-block',
+      whiteSpace: (errorDots ? errorDots : configStyles.INPUT.error.dots) ? 'nowrap' : 'normal',
+      overflow: (errorDots ? errorDots : configStyles.INPUT.error.dots) ? 'hidden' : 'visible',
+      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__default["default"].createElement("img", {
+    alt: "error icon",
+    src: innerErrorIcon,
+    style: {
+      width: '14px',
+      height: '14px',
+      cursor: errorAction ? 'pointer' : 'normal',
+      marginLeft: errorIconMargin ?? configStyles.INPUT.error.iconMargin
+    },
+    onClick: errorAction ? () => errorAction() : _ => _
+  })) : '');
 };
 Input.propTypes = {
   size: PropTypes__default["default"].string,
   name: PropTypes__default["default"].string,
-  style: PropTypes__default["default"].string,
-  weight: PropTypes__default["default"].string,
-  family: PropTypes__default["default"].string,
   change: PropTypes__default["default"].func,
+  style: PropTypes__default["default"].string,
   color: PropTypes__default["default"].string,
   width: PropTypes__default["default"].string,
-  label: 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,
@@ -4719,39 +5000,52 @@ Input.propTypes = {
   withoutDot: PropTypes__default["default"].bool,
   className: PropTypes__default["default"].string,
   iconWidth: PropTypes__default["default"].string,
-  boxSizing: PropTypes__default["default"].string,
-  boxShadow: PropTypes__default["default"].string,
-  errorSize: PropTypes__default["default"].string,
-  errorLeft: PropTypes__default["default"].string,
-  labelSize: PropTypes__default["default"].string,
   maxLength: PropTypes__default["default"].number,
   floatToFix: PropTypes__default["default"].number,
   minNumSize: PropTypes__default["default"].number,
   maxNumSize: PropTypes__default["default"].number,
-  errorColor: PropTypes__default["default"].string,
+  label: PropTypes__default["default"].string,
+  labelDots: PropTypes__default["default"].bool,
+  labelAction: PropTypes__default["default"].func,
+  labelIcon: PropTypes__default["default"].string,
+  labelSize: PropTypes__default["default"].string,
   labelColor: PropTypes__default["default"].string,
   labelStyle: PropTypes__default["default"].string,
+  showLabelIcon: PropTypes__default["default"].bool,
+  labelWeight: PropTypes__default["default"].string,
+  labelDisplay: PropTypes__default["default"].string,
+  labelIconSide: PropTypes__default["default"].oneOf(Object.values(IconSides)),
+  labelLineHeight: PropTypes__default["default"].string,
+  labelFontFamily: PropTypes__default["default"].string,
+  labelIconMargin: PropTypes__default["default"].string,
+  labelMarginBottom: PropTypes__default["default"].string,
+  borderRight: PropTypes__default["default"].string,
+  placeholder: PropTypes__default["default"].string,
+  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,
-  borderRight: PropTypes__default["default"].string,
-  placeholder: PropTypes__default["default"].string,
   errorZindex: PropTypes__default["default"].string,
-  labelWeight: PropTypes__default["default"].string,
+  errorIconSide: PropTypes__default["default"].oneOf(Object.values(IconSides)),
   errorMessage: PropTypes__default["default"].string,
-  phoneDisplay: PropTypes__default["default"].string,
-  autoComplete: PropTypes__default["default"].string,
-  labelDisplay: PropTypes__default["default"].string,
   errorPosition: PropTypes__default["default"].string,
   errorMarginTop: PropTypes__default["default"].string,
-  boxShadowHover: PropTypes__default["default"].string,
   errorClassName: PropTypes__default["default"].string,
-  labelFontFamily: PropTypes__default["default"].string,
-  backgroundColor: PropTypes__default["default"].string,
-  phoneAlignItems: PropTypes__default["default"].string,
+  errorIconMargin: PropTypes__default["default"].string,
   errorLineHeight: PropTypes__default["default"].string,
-  labelLineHeight: PropTypes__default["default"].string,
-  labelMarginBottom: PropTypes__default["default"].string,
+  boxSizing: PropTypes__default["default"].string,
+  boxShadow: 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,
@@ -4759,6 +5053,7 @@ Input.propTypes = {
   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),
@@ -4982,9 +5277,9 @@ const SvgArrow = ({
   fill: fillColor ? fillColor : '#3C393E'
 }));
 
-var css_248z$7 = ".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;justify-content:space-between}.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;padding:0 5px 0 20px}.select-module_select-content-top-icon__MBrGK>div{align-items:center;display:flex;height:14px;justify-content:center;width:14px}.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$6 = {"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$7);
+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;justify-content:space-between}.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;padding:0 5px 0 20px}.select-module_select-content-top-icon__MBrGK>div{align-items:center;display:flex;height:14px;justify-content:center;width:14px}.select-module_close-icon__SFNaJ{border-right:1px solid #eee;box-sizing:content-box;padding-right:9px}.select-module_arrow-icon__rjHt-{margin-left:9px;transform-origin:center;transition:all .64s ease;-webkit-transition:all .64s ease;-moz-transition:all .64s ease;-ms-transition:all .64s ease;-o-transition:all .64s ease}.select-module_select-content-bottom-row__eKq5L{align-items:center;display:flex;transition:background-color .24s,color .24s;-webkit-transition:background-color .24s,color .24s;-moz-transition:background-color .24s,color .24s;-ms-transition:background-color .24s,color .24s;-o-transition:background-color .24s,color .24s}.select-module_select-content-bottom-row__eKq5L:last-child{margin-bottom:0}.select-module_ellipsis__uNgol{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@keyframes select-module_select-show__391hQ{to{max-height:234px}}";
+var styles$7 = {"select-content":"select-module_select-content__GCMDX","select-content-top":"select-module_select-content-top__Aw-fB","select-content-bottom":"select-module_select-content-bottom__ueZCR","select-show":"select-module_select-show__391hQ","select-content-bottom-inner":"select-module_select-content-bottom-inner__NWy2X","select-content-top-icon":"select-module_select-content-top-icon__MBrGK","close-icon":"select-module_close-icon__SFNaJ","arrow-icon":"select-module_arrow-icon__rjHt-","select-content-bottom-row":"select-module_select-content-bottom-row__eKq5L","ellipsis":"select-module_ellipsis__uNgol"};
+styleInject(css_248z$8);
 
 const Select = ({
   dots,
@@ -5196,7 +5491,7 @@ const Select = ({
   }, label, required && /*#__PURE__*/React__default["default"].createElement("sup", null, /*#__PURE__*/React__default["default"].createElement(SvgRequired, null))) : '', /*#__PURE__*/React__default["default"].createElement("div", {
     ref: ref
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$6['select-content']
+    className: styles$7['select-content']
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       cursor: disabled ? 'not-allowed' : cursor ? cursor : configStyles.SELECT.selected.cursor,
@@ -5216,9 +5511,9 @@ const Select = ({
     onClick: disabled ? _ => _ : () => handleOpenClose(),
     onMouseEnter: disabled ? _ => _ : () => handleMouseEnter(),
     onMouseLeave: disabled ? _ => _ : () => handleMouseLeave(),
-    className: `${styles$6['select-content-top']}`
+    className: `${styles$7['select-content-top']}`
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${styles$6['select-content-top-text']}`,
+    className: `${styles$7['select-content-top-text']}`,
     style: {
       whiteSpace: disabled ? 'pre-wrap' : 'nowrap',
       overflow: 'hidden',
@@ -5234,9 +5529,9 @@ const Select = ({
       }
     }
   }) : defaultOption ? defaultOption : ''), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${styles$6['select-content-top-icon']}`
+    className: `${styles$7['select-content-top-icon']}`
   }, !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$6['close-icon']}`,
+    className: `${styles$7['close-icon']}`,
     onClick: disabled ? _ => _ : handleClearSelect,
     style: {
       marginLeft: multiple && newSelected.length > 1 ? '17px' : '0px'
@@ -5245,7 +5540,7 @@ const Select = ({
     style: {
       transform: opened ? 'rotate(180deg)' : 'rotate(0deg)'
     },
-    className: `${styles$6['arrow-icon']}`
+    className: `${styles$7['arrow-icon']}`
   }, 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,
@@ -5253,9 +5548,9 @@ const Select = ({
       backgroundColor: optionsBackgroundColor ?? configStyles.SELECT.options.colors.background,
       top: selectedMinHeight ? selectedMinHeight.includes('rem') ? parseFloat(selectedMinHeight.substr(0, selectedMinHeight.length - 3)) + 0.6 + 'rem' : parseFloat(selectedMinHeight.substr(0, selectedMinHeight.length - 2)) + 6 + 'px' : configStyles.SELECT.selected.minHeight.includes('rem') ? parseFloat(configStyles.SELECT.selected.minHeight.substr(0, configStyles.SELECT.selected.minHeight.length - 3)) + 0.6 + 'rem' : parseFloat(configStyles.SELECT.selected.minHeight.substr(0, configStyles.SELECT.selected.minHeight.length - 2)) + 6 + 'px'
     },
-    className: `${styles$6['select-content-bottom']}`
+    className: `${styles$7['select-content-bottom']}`
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${styles$6['select-content-bottom-inner']}`
+    className: `${styles$7['select-content-bottom-inner']}`
   }, existOptions && existOptions.length > 0 && existOptions.map((option, i) => {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       key: i,
@@ -5264,7 +5559,7 @@ const Select = ({
       onClick: disabled ? _ => _ : () => handleSelectItem(option),
       onMouseEnter: disabled ? _ => _ : e => handleMouseEnterOption(e),
       onMouseLeave: disabled ? _ => _ : e => handleMouseLeaveOption(e),
-      className: `${styles$6['select-content-bottom-row']} ${dots || configStyles.SELECT.dots ? styles$6['ellipsis'] : ''}`,
+      className: `${styles$7['select-content-bottom-row']} ${dots || configStyles.SELECT.dots ? styles$7['ellipsis'] : ''}`,
       style: {
         overflowWrap: !dots && !configStyles.SELECT.dots ? 'anywhere' : 'break-word',
         color: optionItemColor ?? configStyles.SELECT.options.item.color,
@@ -5477,11 +5772,10 @@ const SvgToasterSuccess = ({
   fill: fillColor ? fillColor : '#0DA574'
 }));
 
-var css_248z$6 = "#toaster-module_top-left__q0LcN{left:0;top:1em}#toaster-module_top-right__f-AFL{right:0;top:1em}#toaster-module_top-center__eVRbc{left:50%;top:1em;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%)}#toaster-module_bottom-left__b-YHI{bottom:1em;left:0}#toaster-module_bottom-right__g9ACP{bottom:1em;right:0}#toaster-module_bottom-center__4KcFe{bottom:1em;left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%)}.toaster-module_top-left__q0LcN{left:0;top:1em}.toaster-module_top-right__f-AFL{right:0;top:1em}.toaster-module_top-center__eVRbc{left:50%;top:1em;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%)}.toaster-module_bottom-left__b-YHI{bottom:1em;left:0}.toaster-module_bottom-right__g9ACP{bottom:1em;right:0}.toaster-module_bottom-center__4KcFe{bottom:1em;left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%)}.toaster-module_notify-block__pRnEB{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.toaster-module_bounce-in-right__shR2D{-webkit-animation-name:toaster-module_bounceInRight__rSk5p;animation-name:toaster-module_bounceInRight__rSk5p}.toaster-module_bounce-out-right__48pyA{-webkit-animation-name:toaster-module_bounceOutRight__bmFGS;animation-name:toaster-module_bounceOutRight__bmFGS}.toaster-module_notify-desc__bcWe2,.toaster-module_notify-title__8lFLy{overflow:hidden;text-overflow:ellipsis}.toaster-module_notify-desc__bcWe2{-webkit-box-orient:vertical;-webkit-line-clamp:2;display:-webkit-box}@keyframes toaster-module_bounceInRight__rSk5p{0%{opacity:0;right:-100%}60%{opacity:1;right:40px}75%{right:0}90%{right:30px}to{right:20px}}@keyframes toaster-module_bounceOutRight__bmFGS{0%{opacity:1;right:20px}60%{opacity:1;right:60px}to{opacity:0;right:-100%}}.toaster-module_bounce-in-left__xoF-M{-webkit-animation-name:toaster-module_bounceInLeft__to59v;animation-name:toaster-module_bounceInLeft__to59v}.toaster-module_bounce-out-left__fDOZw{-webkit-animation-name:toaster-module_bounceOutLeft__k5QgO;animation-name:toaster-module_bounceOutLeft__k5QgO}@keyframes toaster-module_bounceInLeft__to59v{0%{left:-100%;opacity:0}60%{left:40px;opacity:1}75%{left:0}90%{left:30px}to{left:20px}}@keyframes toaster-module_bounceInLeftMobile__CA2dc{0%{left:-100%;opacity:0}60%{left:40px;opacity:1}75%{left:0}90%{left:30px}to{left:0}}@keyframes toaster-module_bounceOutLeft__k5QgO{0%{left:20px;opacity:1}60%{left:60px;opacity:1}to{left:-100%;opacity:0}}@media(max-width:480px){.toaster-module_bounce-in-left__xoF-M{-webkit-animation-name:toaster-module_bounceInLeftMobile__CA2dc;animation-name:toaster-module_bounceInLeftMobile__CA2dc}}";
-var styles$5 = {"top-left":"toaster-module_top-left__q0LcN","top-right":"toaster-module_top-right__f-AFL","top-center":"toaster-module_top-center__eVRbc","bottom-left":"toaster-module_bottom-left__b-YHI","bottom-right":"toaster-module_bottom-right__g9ACP","bottom-center":"toaster-module_bottom-center__4KcFe","notify-block":"toaster-module_notify-block__pRnEB","bounce-in-right":"toaster-module_bounce-in-right__shR2D","bounceInRight":"toaster-module_bounceInRight__rSk5p","bounce-out-right":"toaster-module_bounce-out-right__48pyA","bounceOutRight":"toaster-module_bounceOutRight__bmFGS","notify-title":"toaster-module_notify-title__8lFLy","notify-desc":"toaster-module_notify-desc__bcWe2","bounce-in-left":"toaster-module_bounce-in-left__xoF-M","bounceInLeft":"toaster-module_bounceInLeft__to59v","bounce-out-left":"toaster-module_bounce-out-left__fDOZw","bounceOutLeft":"toaster-module_bounceOutLeft__k5QgO","bounceInLeftMobile":"toaster-module_bounceInLeftMobile__CA2dc"};
-styleInject(css_248z$6);
+var css_248z$7 = "#toaster-module_top-left__q0LcN{left:0;top:1em}#toaster-module_top-right__f-AFL{right:0;top:1em}#toaster-module_top-center__eVRbc{left:50%;top:1em;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%)}#toaster-module_bottom-left__b-YHI{bottom:1em;left:0}#toaster-module_bottom-right__g9ACP{bottom:1em;right:0}#toaster-module_bottom-center__4KcFe{bottom:1em;left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%)}.toaster-module_top-left__q0LcN{left:0;top:1em}.toaster-module_top-right__f-AFL{right:0;top:1em}.toaster-module_top-center__eVRbc{left:50%;top:1em;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%)}.toaster-module_bottom-left__b-YHI{bottom:1em;left:0}.toaster-module_bottom-right__g9ACP{bottom:1em;right:0}.toaster-module_bottom-center__4KcFe{bottom:1em;left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%)}.toaster-module_notify-block__pRnEB{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.toaster-module_bounce-in-right__shR2D{-webkit-animation-name:toaster-module_bounceInRight__rSk5p;animation-name:toaster-module_bounceInRight__rSk5p}.toaster-module_bounce-out-right__48pyA{-webkit-animation-name:toaster-module_bounceOutRight__bmFGS;animation-name:toaster-module_bounceOutRight__bmFGS}.toaster-module_notify-desc__bcWe2,.toaster-module_notify-title__8lFLy{overflow:hidden;text-overflow:ellipsis}.toaster-module_notify-desc__bcWe2{-webkit-box-orient:vertical;-webkit-line-clamp:2;display:-webkit-box}@keyframes toaster-module_bounceInRight__rSk5p{0%{opacity:0;right:-100%}60%{opacity:1;right:40px}75%{right:0}90%{right:30px}to{right:20px}}@keyframes toaster-module_bounceOutRight__bmFGS{0%{opacity:1;right:20px}60%{opacity:1;right:60px}to{opacity:0;right:-100%}}.toaster-module_bounce-in-left__xoF-M{-webkit-animation-name:toaster-module_bounceInLeft__to59v;animation-name:toaster-module_bounceInLeft__to59v}.toaster-module_bounce-out-left__fDOZw{-webkit-animation-name:toaster-module_bounceOutLeft__k5QgO;animation-name:toaster-module_bounceOutLeft__k5QgO}@keyframes toaster-module_bounceInLeft__to59v{0%{left:-100%;opacity:0}60%{left:40px;opacity:1}75%{left:0}90%{left:30px}to{left:20px}}@keyframes toaster-module_bounceInLeftMobile__CA2dc{0%{left:-100%;opacity:0}60%{left:40px;opacity:1}75%{left:0}90%{left:30px}to{left:0}}@keyframes toaster-module_bounceOutLeft__k5QgO{0%{left:20px;opacity:1}60%{left:60px;opacity:1}to{left:-100%;opacity:0}}@media(max-width:480px){.toaster-module_bounce-in-left__xoF-M{-webkit-animation-name:toaster-module_bounceInLeftMobile__CA2dc;animation-name:toaster-module_bounceInLeftMobile__CA2dc}}";
+var styles$6 = {"top-left":"toaster-module_top-left__q0LcN","top-right":"toaster-module_top-right__f-AFL","top-center":"toaster-module_top-center__eVRbc","bottom-left":"toaster-module_bottom-left__b-YHI","bottom-right":"toaster-module_bottom-right__g9ACP","bottom-center":"toaster-module_bottom-center__4KcFe","notify-block":"toaster-module_notify-block__pRnEB","bounce-in-right":"toaster-module_bounce-in-right__shR2D","bounceInRight":"toaster-module_bounceInRight__rSk5p","bounce-out-right":"toaster-module_bounce-out-right__48pyA","bounceOutRight":"toaster-module_bounceOutRight__bmFGS","notify-title":"toaster-module_notify-title__8lFLy","notify-desc":"toaster-module_notify-desc__bcWe2","bounce-in-left":"toaster-module_bounce-in-left__xoF-M","bounceInLeft":"toaster-module_bounceInLeft__to59v","bounce-out-left":"toaster-module_bounce-out-left__fDOZw","bounceOutLeft":"toaster-module_bounceOutLeft__k5QgO","bounceInLeftMobile":"toaster-module_bounceInLeftMobile__CA2dc"};
+styleInject(css_248z$7);
 
-let wWidth$1 = window.innerWidth;
 const ToasterType = {
   info: 'info',
   warn: 'warn',
@@ -5498,16 +5792,21 @@ const ToasterPosition = {
 };
 const Toast = ({
   type,
-  icon,
-  closeIcon,
+  icons,
+  title,
+  timer,
+  propStyles,
   removeToast,
   description,
-  timer = 5000,
-  position = 'top-right',
-  title = 'toaster title'
+  titleStyles,
+  descriptionStyles,
+  position = 'top-right'
 }) => {
   let timeoutCall;
   let timeoutClick;
+  const firstCheck = propStyles.height.replace(/\D/g, '') - 28 < 30 ? 30 : propStyles.height.replace(/\D/g, '') - 28;
+  const secondCheck = propStyles.height.replace(/\D/g, '') - 65 < 18 ? 18 : propStyles.height.replace(/\D/g, '') - 65;
+  const finalCheck = firstCheck + secondCheck + 'px';
   const ref = React.useRef(null);
   const [showToaster, setShowToaster] = React.useState(true);
   const handleToasterClick = e => {
@@ -5536,63 +5835,111 @@ const Toast = ({
     style: {
       position: 'absolute',
       display: 'flex',
-      width: wWidth$1 > 480 ? '440px' : '300px',
-      height: '83px',
-      borderRadius: '40px',
       alignItems: 'center',
       boxSizing: 'border-box',
-      backgroundColor: '#FFFFFF',
-      border: '2px solid #EEEEEE',
-      padding: '14px 29px 14px 12px',
-      justifyContent: 'space-between'
+      justifyContent: 'space-between',
+      ...propStyles
     },
     className: `
-        ${styles$5['notify-block']}
-        ${position === 'top-left' ? showToaster ? styles$5['bounce-in-left'] : styles$5['bounce-out-left'] : position === 'top-right' ? showToaster ? styles$5['bounce-in-right'] : styles$5['bounce-out-right'] : position === 'top-center' ? showToaster ? styles$5['bounce-in-left'] : styles$5['bounce-out-left'] : position === 'bottom-left' ? showToaster ? styles$5['bounce-in-left'] : styles$5['bounce-out-left'] : position === 'bottom-right' ? showToaster ? styles$5['bounce-in-right'] : styles$5['bounce-out-right'] : position === 'bottom-center' ? showToaster ? styles$5['bounce-in-left'] : styles$5['bounce-out-left'] : ''}
-      `
+                ${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__default["default"].createElement("div", {
     style: {
       display: 'flex',
-      width: '60px',
-      height: '60px',
-      borderRadius: '30px',
+      height: `calc(${propStyles.height} - 28px)`,
+      width: `calc(${propStyles.height} - 28px)`,
+      minWidth: '30px',
+      minHeight: '30px',
+      borderRadius: '50%',
       alignItems: 'center',
       justifyContent: 'center'
     }
-  }, type === 'info' ? icon ? icon : /*#__PURE__*/React__default["default"].createElement(SvgToasterInfo, null) : type === 'warn' ? icon ? icon : /*#__PURE__*/React__default["default"].createElement(SvgToasterWarning, null) : type === 'error' ? icon ? icon : /*#__PURE__*/React__default["default"].createElement(SvgToasterError, null) : type === 'success' ? icon ? icon : /*#__PURE__*/React__default["default"].createElement(SvgToasterSuccess, null) : ''), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, type === 'info' ? icons.info ? /*#__PURE__*/React__default["default"].createElement("img", {
+    src: icons.info,
+    alt: "icons",
     style: {
+      width: '100%',
       height: '100%',
-      width: 'calc(100% - 90px)'
+      objectFit: 'cover',
+      objectPosition: 'center'
     }
-  }, /*#__PURE__*/React__default["default"].createElement("p", {
+  }) : /*#__PURE__*/React__default["default"].createElement(SvgToasterInfo, null) : type === 'warn' ? icons.warn ? /*#__PURE__*/React__default["default"].createElement("img", {
+    src: icons.warn,
+    alt: "icons",
+    style: {
+      width: '100%',
+      height: '100%',
+      objectFit: 'cover',
+      objectPosition: 'center'
+    }
+  }) : /*#__PURE__*/React__default["default"].createElement(SvgToasterWarning, null) : type === 'error' ? icons.error ? /*#__PURE__*/React__default["default"].createElement("img", {
+    src: icons.error,
+    alt: "icons",
+    style: {
+      width: '100%',
+      height: '100%',
+      objectFit: 'cover',
+      objectPosition: 'center'
+    }
+  }) : /*#__PURE__*/React__default["default"].createElement(SvgToasterError, null) : type === 'success' ? icons.success ? /*#__PURE__*/React__default["default"].createElement("img", {
+    src: icons.success,
+    alt: "icons",
+    style: {
+      width: '100%',
+      height: '100%',
+      objectFit: 'cover',
+      objectPosition: 'center'
+    }
+  }) : /*#__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__default["default"].createElement("p", {
     style: {
       margin: '0px',
-      fontWeight: 600,
-      color: '#3C393E',
-      fontSize: '16px',
-      lineHeight: '22px',
-      fontStyle: 'normal'
+      color: titleStyles.color,
+      fontSize: titleStyles.font.size,
+      fontStyle: titleStyles.font.style,
+      lineHeight: titleStyles.lineHeight,
+      fontWeight: titleStyles.font.weight,
+      fontFamily: titleStyles.font.family,
+      ...titleStyles.props
     },
-    className: styles$5['notify-title']
-  }, title ? title : ''), /*#__PURE__*/React__default["default"].createElement("span", {
+    className: styles$6['notify-title']
+  }, title), description && /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
-      fontWeight: 500,
-      color: '#3C393E',
-      fontSize: '12px',
-      lineHeight: '16px',
-      fontStyle: 'normal',
-      fontFamily: '',
-      opacity: 0.8
+      color: descriptionStyles.color,
+      fontSize: descriptionStyles.font.size,
+      fontStyle: descriptionStyles.font.style,
+      lineHeight: descriptionStyles.lineHeight,
+      fontWeight: descriptionStyles.font.weight,
+      fontFamily: descriptionStyles.font.family,
+      ...descriptionStyles.props
     },
-    className: styles$5['notify-desc']
-  }, description ? description : '')), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: styles$6['notify-desc']
+  }, description)), /*#__PURE__*/React__default["default"].createElement("div", {
     onClick: () => handleCloseToaster(ref),
     style: {
-      width: '18px',
-      height: '18px',
+      width: `calc(${propStyles.height} - 65px)`,
+      height: `calc(${propStyles.height} - 65px)`,
+      minWidth: '18px',
+      minHeight: '18px',
       cursor: 'pointer'
     }
-  }, closeIcon ? closeIcon : /*#__PURE__*/React__default["default"].createElement(SvgToasterClose, null)));
+  }, icons.close ? /*#__PURE__*/React__default["default"].createElement("img", {
+    src: icons.close,
+    alt: "icons",
+    style: {
+      width: '100%',
+      height: '100%',
+      objectFit: 'cover',
+      objectPosition: 'center'
+    }
+  }) : /*#__PURE__*/React__default["default"].createElement(SvgToasterClose, null)));
 };
 Toast.propTypes = {
   timer: PropTypes__default["default"].number,
@@ -5605,7 +5952,6 @@ Toast.propTypes = {
 
 let toastify = document.getElementById('toastify');
 let path = window.location.href;
-let wWidth = window.innerWidth;
 const removeToast = ref => {
   if (ref.current) {
     const node = ref.current;
@@ -5621,15 +5967,66 @@ 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 = ___default["default"].merge({
+    ...packageTitleStyle
+  }, {
+    ...projectTitleStyle
+  });
+  const projectDescStyle = styleProps?.description;
+  const packageDescStyle = innerConfigStyles?.TOASTER?.description;
+  const compareDescStyles = ___default["default"].merge({
+    ...packageDescStyle
+  }, {
+    ...projectDescStyle
+  });
+  const projectIcons = styleProps?.icons;
+  const packageIcons = innerConfigStyles?.TOASTER?.icons;
+  const icons = ___default["default"].merge({
+    ...packageIcons
+  }, {
+    ...projectIcons
+  });
+  toastBlock.style.position = 'relative';
+  toastBlock.style.flexShrink = 0;
+  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__default["default"].createElement(Toast, {
+    type,
+    icons,
+    timer,
+    title,
+    position,
+    description,
+    removeToast,
+    propStyles: {
+      width: styleProps?.width ?? innerConfigStyles?.TOASTER?.width,
+      height: styleProps?.height ?? innerConfigStyles?.TOASTER?.height,
+      padding: styleProps?.padding ?? innerConfigStyles?.TOASTER?.padding,
+      borderWidth: styleProps?.borderWidth ?? innerConfigStyles?.TOASTER?.border.width,
+      borderColor: styleProps?.borderColor ?? innerConfigStyles?.TOASTER?.border.color,
+      borderStyle: styleProps?.borderStyle ?? innerConfigStyles?.TOASTER?.border.style,
+      borderRadius: styleProps?.borderRadius ?? innerConfigStyles?.TOASTER?.border.radius,
+      backgroundColor: styleProps?.backgroundColor ?? innerConfigStyles?.TOASTER?.backgroundColor
+    },
+    titleStyles: compareTitleStyles,
+    descriptionStyles: compareDescStyles
+  });
+  const root = ReactDOM__default["default"].createRoot(toastBlock);
+  root.render(newElem);
+};
 const createToast = ({
   type,
-  icon,
   timer,
   title,
   position,
-  iconClose,
+  styleProps,
   description
 }) => {
+  let innerConfigStyles = {};
   let toastParentBlock;
   if (!toastify) {
     toastify = document.createElement('div');
@@ -5637,42 +6034,33 @@ const createToast = ({
     document.body.appendChild(toastify);
   }
   const toastBlock = document.createElement('div');
-  toastBlock.style.position = 'relative';
-  toastBlock.style.flexShrink = 0;
-  toastBlock.style.width = wWidth > 480 ? '440px' : '300px';
-  toastBlock.style.height = '83px';
-  toastBlock.style.marginBottom = '20px';
-  const newElem = /*#__PURE__*/React__default["default"].createElement(Toast, {
-    type,
-    icon,
-    timer,
-    title,
-    position,
-    iconClose,
-    description,
-    removeToast
+  configStylesPromise.then(data => {
+    innerConfigStyles = {
+      ...data
+    };
+    createElem$1(type, timer, title, position, styleProps, toastBlock, description, innerConfigStyles);
+  }, error => {
+    console.error(error);
   });
-  const root = ReactDOM__default["default"].createRoot(toastBlock);
-  root.render(newElem);
-  if (!document.getElementById(styles$5[position]) || document.getElementById(styles$5[position]) == null) {
+  if (!document.getElementById(styles$6[position]) || document.getElementById(styles$6[position]) == null) {
     toastParentBlock = document.createElement('div');
     toastParentBlock.style.position = 'fixed';
     toastParentBlock.style.display = 'flex';
     toastParentBlock.style.zIndex = 999999999999;
     toastParentBlock.style.flexDirection = position === 'top-left' || position === 'top-right' || position === 'top-center' ? 'column-reverse' : 'column';
-    toastParentBlock.setAttribute('id', styles$5[position]);
+    toastParentBlock.setAttribute('id', styles$6[position]);
     toastParentBlock.appendChild(toastBlock);
     toastify.appendChild(toastParentBlock);
   } else {
-    document.getElementById(styles$5[position]).appendChild(toastBlock);
+    document.getElementById(styles$6[position]).appendChild(toastBlock);
   }
 };
 const toast = {
   success: (title, props) => {
-    // const { icon, timer, position, iconClose, description } = props || {}
     const {
       timer,
       position,
+      styleProps,
       description
     } = props || {};
     createToast({
@@ -5680,16 +6068,15 @@ const toast = {
       type: 'success',
       timer: timer ?? 5000,
       position: position ?? 'top-right',
-      description: description ?? ''
-      // icon: icon ?? configStyles.TOASTER.icon.success,
-      // iconClose: iconClose ?? configStyles.TOASTER.icon.close,
+      description: description ?? '',
+      styleProps: styleProps
     });
   },
   info: (title, props) => {
-    // const { icon, timer, position, iconClose, description } = props || {}
     const {
       timer,
       position,
+      styleProps,
       description
     } = props || {};
     createToast({
@@ -5697,16 +6084,15 @@ const toast = {
       type: 'info',
       timer: timer ?? 5000,
       position: position ?? 'top-right',
-      description: description ?? ''
-      // icon: icon ?? configStyles.TOASTER.icon.info,
-      // iconClose: iconClose ?? configStyles.TOASTER.icon.close,
+      description: description ?? '',
+      styleProps: styleProps
     });
   },
   warn: (title, props) => {
-    // const { icon, timer, position, iconClose, description } = props || {}
     const {
       timer,
       position,
+      styleProps,
       description
     } = props || {};
     createToast({
@@ -5714,16 +6100,15 @@ const toast = {
       type: 'warn',
       timer: timer ?? 5000,
       position: position ?? 'top-right',
-      description: description ?? ''
-      // icon: icon ?? configStyles.TOASTER.icon.warn,
-      // iconClose: iconClose ?? configStyles.TOASTER.icon.close,
+      description: description ?? '',
+      styleProps: styleProps
     });
   },
   error: (title, props) => {
-    // const { icon, timer, position, iconClose, description } = props || {}
     const {
       timer,
       position,
+      styleProps,
       description
     } = props || {};
     createToast({
@@ -5731,16 +6116,12 @@ const toast = {
       type: 'error',
       timer: timer ?? 5000,
       position: position ?? 'top-right',
-      description: description ?? ''
-      // icon: icon ?? configStyles.TOASTER.icon.error,
-      // iconClose: iconClose ?? configStyles.TOASTER.icon.close,
+      description: description ?? '',
+      styleProps: styleProps
     });
   }
 };
-const Toaster = ({
-  className
-}) => {
-  const [classProps, setClassProps] = React.useState('');
+const Toaster = () => {
   const [configStyles, setConfigStyles] = React.useState({});
   window.addEventListener('popstate', () => {
     if (path !== window.location.href) {
@@ -5757,12 +6138,8 @@ const Toaster = ({
   const handleToasterClick = e => {
     e.stopPropagation();
   };
-  React.useEffect(() => {
-    className && setClassProps(() => classnames__default["default"](className ?? configStyles.TOASTER.className));
-  }, [className]);
   React.useEffect(() => {
     configStylesPromise.then(data => {
-      setClassProps(() => classnames__default["default"](className ?? data.TOASTER.className));
       setConfigStyles(() => {
         return {
           ...data
@@ -5774,7 +6151,6 @@ const Toaster = ({
   }, []);
   return configStyles.TOASTER && /*#__PURE__*/React__default["default"].createElement("div", {
     onClick: handleToasterClick,
-    className: classProps,
     id: "toastify"
   });
 };
@@ -5798,10 +6174,24 @@ const SvgTooltip = ({
   fill: fillColor ? fillColor : '#D1D1D1'
 }));
 
-var css_248z$5 = ".tooltip-module_tooltip-block__v8U9u{align-items:center;display:flex;justify-content:center;position:relative}.tooltip-module_tooltip__emM6A{padding:10px;position:absolute;z-index:1}.tooltip-module_tooltip-rel__to9gq{align-items:center;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;display:flex;height:auto;justify-content:center;min-height:10px;min-width:30px;position:relative;width:auto}.tooltip-module_tooltip-decor__qvt7t{border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;height:10px;position:absolute;transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);width:10px;z-index:-1}";
-var styles$4 = {"tooltip-block":"tooltip-module_tooltip-block__v8U9u","tooltip":"tooltip-module_tooltip__emM6A","tooltip-rel":"tooltip-module_tooltip-rel__to9gq","tooltip-decor":"tooltip-module_tooltip-decor__qvt7t"};
-styleInject(css_248z$5);
+var css_248z$6 = ".tooltip-module_tooltip-block__v8U9u{align-items:center;display:flex;justify-content:center;position:relative}.tooltip-module_tooltip__emM6A{box-sizing:border-box;padding:10px;position:absolute;z-index:1}.tooltip-module_tooltip-rel__to9gq{align-items:center;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;display:flex;height:auto;justify-content:center;min-height:10px;min-width:30px;position:relative;width:auto}.tooltip-module_tooltip-decor__qvt7t{border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;height:10px;position:absolute;transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);width:10px;z-index:-1}";
+var styles$5 = {"tooltip-block":"tooltip-module_tooltip-block__v8U9u","tooltip":"tooltip-module_tooltip__emM6A","tooltip-rel":"tooltip-module_tooltip-rel__to9gq","tooltip-decor":"tooltip-module_tooltip-decor__qvt7t"};
+styleInject(css_248z$6);
 
+const TooltipDirections = {
+  TOP: 'top',
+  TOP_LEFT: 'top-left',
+  TOP_RIGHT: 'top-right',
+  LEFT: 'left',
+  LEFT_TOP: 'left-top',
+  LEFT_BOTTOM: 'left-bottom',
+  RIGHT: 'right',
+  RIGHT_TOP: 'right-top',
+  RIGHT_BOTTOM: 'right-bottom',
+  BOTTOM: 'bottom',
+  BOTTOM_TOP: 'bottom-left',
+  BOTTOM_BOTTOM: 'bottom-right'
+};
 const Tooltip = ({
   text,
   width,
@@ -5809,6 +6199,7 @@ const Tooltip = ({
   height,
   radius,
   fontSize,
+  hoverOpen,
   className,
   fontStyle,
   fontFamily,
@@ -5818,16 +6209,28 @@ const Tooltip = ({
   tooltipRadius,
   backgroundColor,
   tooltipBackgroundColor,
-  type = 'top'
+  direction = 'top'
 }) => {
   const tooltipRef = /*#__PURE__*/React.createRef(null);
+  const iconBlockRef = /*#__PURE__*/React.createRef(null);
+  const tooltipIconParentRef = /*#__PURE__*/React.createRef(null);
   const [classProps, setClassProps] = React.useState({});
   const [configStyles, setConfigStyles] = React.useState({});
   const [showTooltip, setShowTooltip] = React.useState(false);
   const [checkTooltipWidth, setCheckTooltipWidth] = React.useState(0);
   const [checkTooltipHeight, setCheckTooltipHeight] = React.useState(0);
+  const [tooltipIconBlockWidth, setTooltipIconBlockWidth] = React.useState(0);
+  const [tooltipIconParentWidth, setTooltipIconParentWidth] = React.useState(0);
+  const [tooltipIconBlockHeight, setTooltipIconBlockHeight] = React.useState(0);
+  const [tooltipIconParentHeight, setTooltipIconParentHeight] = React.useState(0);
   const handleShow = () => {
-    setShowTooltip(!showTooltip);
+    setShowTooltip(() => !showTooltip);
+  };
+  const handleMouseEnter = () => {
+    setShowTooltip(() => true);
+  };
+  const handleMouseLeave = () => {
+    setShowTooltip(() => false);
   };
   React.useEffect(() => {
     if (!text) {
@@ -5836,12 +6239,32 @@ const Tooltip = ({
     tooltipRef.current && tooltipRef.current.clientWidth && tooltipRef.current.clientWidth > 0 && setCheckTooltipWidth(tooltipRef.current.clientWidth);
     tooltipRef.current && tooltipRef.current.clientHeight && tooltipRef.current.clientHeight > 0 && setCheckTooltipHeight(tooltipRef.current.clientHeight);
   }, [text, tooltipRef, checkTooltipWidth, checkTooltipHeight]);
+  React.useEffect(() => {
+    tooltipIconParentRef.current && tooltipIconParentRef.current.clientWidth && tooltipIconParentRef.current.clientWidth > 0 && setTooltipIconParentWidth(tooltipIconParentRef.current.clientWidth);
+    tooltipIconParentRef.current && tooltipIconParentRef.current.clientHeight && tooltipIconParentRef.current.clientHeight > 0 && setTooltipIconParentHeight(tooltipIconParentRef.current.clientHeight);
+  }, [tooltipIconParentRef, tooltipIconParentWidth, tooltipIconParentHeight]);
+  React.useEffect(() => {
+    iconBlockRef.current && iconBlockRef.current.clientWidth && iconBlockRef.current.clientWidth > 0 && setTooltipIconBlockWidth(iconBlockRef.current.clientWidth);
+    iconBlockRef.current && iconBlockRef.current.clientHeight && iconBlockRef.current.clientHeight > 0 && setTooltipIconBlockHeight(iconBlockRef.current.clientHeight);
+  }, [iconBlockRef, tooltipIconParentWidth, tooltipIconParentHeight]);
   React.useEffect(() => {
     className && setClassProps(() => classnames__default["default"](className ?? configStyles.TOOLTIP.className));
   }, [className]);
+  React.useEffect(() => {
+    document.addEventListener('click', () => {
+      if (showTooltip) {
+        handleShow();
+      }
+    }, false);
+    return () => {
+      document.removeEventListener('click', () => {
+        handleShow();
+      }, false);
+    };
+  }, [showTooltip]);
   React.useEffect(() => {
     configStylesPromise.then(data => {
-      setClassProps(() => classnames__default["default"](styles$4['tooltip-block'], className ?? data.TOOLTIP.className));
+      setClassProps(() => classnames__default["default"](styles$5['tooltip-block'], className ?? data.TOOLTIP.className));
       setConfigStyles(() => {
         return {
           ...data
@@ -5852,31 +6275,33 @@ const Tooltip = ({
     });
   }, []);
   return configStyles.TOOLTIP && /*#__PURE__*/React__default["default"].createElement("div", {
+    ref: tooltipIconParentRef,
     className: classProps,
     style: {
       width: width ?? configStyles.TOOLTIP.parent.width,
       height: height ?? configStyles.TOOLTIP.parent.height,
       borderRadius: radius ?? configStyles.TOOLTIP.parent.radius,
       backgroundColor: backgroundColor ?? configStyles.TOOLTIP.parent.colors.background
-    }
+    },
+    onClick: e => e.stopPropagation()
   }, showTooltip ? /*#__PURE__*/React__default["default"].createElement("div", {
     ref: tooltipRef,
-    className: `${styles$4['tooltip']}`,
+    className: `${styles$5['tooltip']}`,
     style: {
       width: tooltipWidth ?? configStyles.TOOLTIP.width,
       borderRadius: tooltipRadius ?? configStyles.TOOLTIP.radius,
       backgroundColor: tooltipBackgroundColor ?? configStyles.TOOLTIP.colors.background,
-      top: type === 'top' ? `calc(-${checkTooltipHeight + 7}px)` : type === 'bottom' ? 'calc(100% + 7px)' : type === 'left' || type === 'right' ? `calc(50% - ${checkTooltipHeight / 2}px)` : '0px',
-      left: type === 'top' || type === 'bottom' ? `calc(50% - ${checkTooltipWidth / 2}px)` : type === 'left' ? `-${checkTooltipWidth + 7}px` : type === 'right' ? 'calc(100% + 7px)' : '0px'
+      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__default["default"].createElement("div", {
-    className: `${styles$4['tooltip-rel']}`
+    className: `${styles$5['tooltip-rel']}`
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${styles$4['tooltip-decor']}`,
+    className: `${styles$5['tooltip-decor']}`,
     style: {
       backgroundColor: tooltipBackgroundColor ?? configStyles.TOOLTIP.colors.background,
-      left: type === 'top' || type === 'bottom' ? 'calc(50% - 5px)' : type === 'right' ? '-15px' : type === 'left' ? 'calc(100% + 5px)' : '0px',
-      top: type === 'top' ? 'calc(100% + 5px)' : type === 'bottom' ? '-15px' : type === 'right' || type === 'left' ? 'calc(50% - 5px)' : '0px'
+      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__default["default"].createElement("p", {
     style: {
@@ -5887,18 +6312,22 @@ const Tooltip = ({
       fontWeight: fontWeight ?? configStyles.TOOLTIP.font.weight
     }
   }, text))) : '', /*#__PURE__*/React__default["default"].createElement("div", {
+    ref: iconBlockRef,
+    onClick: hoverOpen ? _ => _ : handleShow,
     style: {
+      display: 'flex',
       cursor: 'pointer'
     },
-    onClick: handleShow
+    onMouseEnter: hoverOpen ? handleMouseEnter : _ => _,
+    onMouseLeave: hoverOpen ? handleMouseLeave : _ => _
   }, tooltipIcon ? tooltipIcon : configStyles.TOOLTIP.icon ? configStyles.TOOLTIP.icon : /*#__PURE__*/React__default["default"].createElement(SvgTooltip, null)));
 };
 Tooltip.propTypes = {
-  type: PropTypes__default["default"].string,
   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,
@@ -5909,7 +6338,8 @@ Tooltip.propTypes = {
   tooltipRadius: PropTypes__default["default"].string,
   text: PropTypes__default["default"].string.isRequired,
   backgroundColor: PropTypes__default["default"].string,
-  tooltipBackgroundColor: PropTypes__default["default"].string
+  tooltipBackgroundColor: PropTypes__default["default"].string,
+  direction: PropTypes__default["default"].oneOf(Object.values(TooltipDirections))
 };
 
 const SvgCaptchaArrowUp = ({
@@ -5950,9 +6380,9 @@ const SvgCaptchaArrowDown = ({
   fill: fillColor ? fillColor : '#00236A'
 }));
 
-var css_248z$4 = ".captcha-module_start-point__LkOqy:after{background-color:#d1d1d1;border:2px solid #fff;border-radius:6px;-webkit-border-radius:6px;-moz-border-radius:6px;-ms-border-radius:6px;-o-border-radius:6px;content:\"\";height:10px;left:0;position:absolute;top:7.5px;width:10px;z-index:-1}.captcha-module_range__k24I2{-webkit-appearance:none;margin:0}.captcha-module_range__k24I2::-webkit-slider-runnable-track{-webkit-appearance:none;width:100%}.captcha-module_range-default__-O0QD::-webkit-slider-thumb{background-image:url(../../assets/range-arrow-default.svg)}.captcha-module_range-default__-O0QD::-webkit-slider-thumb,.captcha-module_range-error__FKMfG::-webkit-slider-thumb{-webkit-appearance:none;background-position:-5px;background-repeat:no-repeat;background-size:46px 46px;border-radius:17px;-webkit-border-radius:17px;-moz-border-radius:17px;-ms-border-radius:17px;-o-border-radius:17px;cursor:ew-resize;height:34px;width:34px}.captcha-module_range-error__FKMfG::-webkit-slider-thumb{background-image:url(../../assets/range-arrow-error.svg)}.captcha-module_range-success__VzLPq::-webkit-slider-thumb{-webkit-appearance:none;background-image:url(../../assets/range-arrow-success.svg);background-position:-5px;background-repeat:no-repeat;background-size:46px 46px;border-radius:17px;-webkit-border-radius:17px;-moz-border-radius:17px;-ms-border-radius:17px;-o-border-radius:17px;cursor:ew-resize;height:34px;width:34px}";
-var styles$3 = {"start-point":"captcha-module_start-point__LkOqy","range":"captcha-module_range__k24I2","range-default":"captcha-module_range-default__-O0QD","range-error":"captcha-module_range-error__FKMfG","range-success":"captcha-module_range-success__VzLPq"};
-styleInject(css_248z$4);
+var css_248z$5 = ".captcha-module_start-point__LkOqy:after{background-color:#d1d1d1;border:2px solid #fff;border-radius:6px;-webkit-border-radius:6px;-moz-border-radius:6px;-ms-border-radius:6px;-o-border-radius:6px;content:\"\";height:10px;left:0;position:absolute;top:7.5px;width:10px;z-index:-1}.captcha-module_range__k24I2{-webkit-appearance:none;margin:0}.captcha-module_range__k24I2::-webkit-slider-runnable-track{-webkit-appearance:none;width:100%}.captcha-module_range-default__-O0QD::-webkit-slider-thumb{background-image:url(../../assets/range-arrow-default.svg)}.captcha-module_range-default__-O0QD::-webkit-slider-thumb,.captcha-module_range-error__FKMfG::-webkit-slider-thumb{-webkit-appearance:none;background-position:-5px;background-repeat:no-repeat;background-size:46px 46px;border-radius:17px;-webkit-border-radius:17px;-moz-border-radius:17px;-ms-border-radius:17px;-o-border-radius:17px;cursor:ew-resize;height:34px;width:34px}.captcha-module_range-error__FKMfG::-webkit-slider-thumb{background-image:url(../../assets/range-arrow-error.svg)}.captcha-module_range-success__VzLPq::-webkit-slider-thumb{-webkit-appearance:none;background-image:url(../../assets/range-arrow-success.svg);background-position:-5px;background-repeat:no-repeat;background-size:46px 46px;border-radius:17px;-webkit-border-radius:17px;-moz-border-radius:17px;-ms-border-radius:17px;-o-border-radius:17px;cursor:ew-resize;height:34px;width:34px}";
+var styles$4 = {"start-point":"captcha-module_start-point__LkOqy","range":"captcha-module_range__k24I2","range-default":"captcha-module_range-default__-O0QD","range-error":"captcha-module_range-error__FKMfG","range-success":"captcha-module_range-success__VzLPq"};
+styleInject(css_248z$5);
 
 const Captcha = ({
   color,
@@ -6040,7 +6470,7 @@ const Captcha = ({
       alignItems: 'center',
       zIndex: 1
     },
-    className: styles$3['start-point']
+    className: styles$4['start-point']
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       position: 'absolute',
@@ -6066,8 +6496,8 @@ const Captcha = ({
       backgroundColor: 'transparent'
     },
     className: `
-                            ${styles$3['range']}
-                            ${+rangeProgress === rangeNumber ? styles$3['range-success'] : +rangeProgress !== rangeNumber && +rangeProgress > 0 ? styles$3['range-error'] : styles$3['range-default']}
+                            ${styles$4['range']}
+                            ${+rangeProgress === rangeNumber ? styles$4['range-success'] : +rangeProgress !== rangeNumber && +rangeProgress > 0 ? styles$4['range-error'] : styles$4['range-default']}
                         `,
     onInput: handleRange
   }), /*#__PURE__*/React__default["default"].createElement("div", {
@@ -6097,9 +6527,9 @@ Captcha.propTypes = {
   getRange: PropTypes__default["default"].func.isRequired
 };
 
-var css_248z$3 = ".stepper-module_stepper-container__-OVGy>div:last-child:before{display:none}.stepper-module_activeRing__Lzvh1,.stepper-module_bigRing__5GBm0{border-radius:50%;height:36px;margin-bottom:36px;position:relative;width:36px}.stepper-module_bigRing__5GBm0{box-shadow:0 0 0 2px #d1d1d1}.stepper-module_bigRing__5GBm0:before{background:#d1d1d1}.stepper-module_activeRing__Lzvh1{box-shadow:0 0 0 2px #00236a}.stepper-module_activeRing__Lzvh1:before{background:#00236a}.stepper-module_activeRing__Lzvh1:before,.stepper-module_bigRing__5GBm0:before{border-radius:20px;bottom:-32px;content:\"\";height:28px;left:0;margin:auto;overflow:hidden;position:absolute;right:0;width:2px}.stepper-module_smallActiveRing__im-XG,.stepper-module_smallRing__u-5a8{border-radius:50%;bottom:0;left:0;margin:auto;position:absolute;right:0;top:0}.stepper-module_smallRing__u-5a8{background-color:#d1d1d1;height:14px;width:14px}.stepper-module_smallActiveRing__im-XG{align-items:center;background-color:#00236a;color:#fff;display:flex;height:28px;justify-content:center;width:28px}";
-var styles$2 = {"stepper-container":"stepper-module_stepper-container__-OVGy","bigRing":"stepper-module_bigRing__5GBm0","activeRing":"stepper-module_activeRing__Lzvh1","smallRing":"stepper-module_smallRing__u-5a8","smallActiveRing":"stepper-module_smallActiveRing__im-XG"};
-styleInject(css_248z$3);
+var css_248z$4 = ".stepper-module_stepper-container__-OVGy>div:last-child:before{display:none}.stepper-module_activeRing__Lzvh1,.stepper-module_bigRing__5GBm0{border-radius:50%;height:36px;margin-bottom:36px;position:relative;width:36px}.stepper-module_bigRing__5GBm0{box-shadow:0 0 0 2px #d1d1d1}.stepper-module_bigRing__5GBm0:before{background:#d1d1d1}.stepper-module_activeRing__Lzvh1{box-shadow:0 0 0 2px #00236a}.stepper-module_activeRing__Lzvh1:before{background:#00236a}.stepper-module_activeRing__Lzvh1:before,.stepper-module_bigRing__5GBm0:before{border-radius:20px;bottom:-32px;content:\"\";height:28px;left:0;margin:auto;overflow:hidden;position:absolute;right:0;width:2px}.stepper-module_smallActiveRing__im-XG,.stepper-module_smallRing__u-5a8{border-radius:50%;bottom:0;left:0;margin:auto;position:absolute;right:0;top:0}.stepper-module_smallRing__u-5a8{background-color:#d1d1d1;height:14px;width:14px}.stepper-module_smallActiveRing__im-XG{align-items:center;background-color:#00236a;color:#fff;display:flex;height:28px;justify-content:center;width:28px}";
+var styles$3 = {"stepper-container":"stepper-module_stepper-container__-OVGy","bigRing":"stepper-module_bigRing__5GBm0","activeRing":"stepper-module_activeRing__Lzvh1","smallRing":"stepper-module_smallRing__u-5a8","smallActiveRing":"stepper-module_smallActiveRing__im-XG"};
+styleInject(css_248z$4);
 
 const Stepper = ({
   stepLength,
@@ -6109,11 +6539,11 @@ const Stepper = ({
   const [classProps, setClassProps] = React.useState({});
   const [configStyles, setConfigStyles] = React.useState({});
   React.useEffect(() => {
-    className && setClassProps(() => classnames__default["default"](className ?? configStyles.STEPPER.className, `${styles$2['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__default["default"](className ?? data.STEPPER.className, `${styles$2['stepper-container']} stepper-container-rem`));
+      setClassProps(() => classnames__default["default"](className ?? data.STEPPER.className, `${styles$3['stepper-container']} stepper-container-rem`));
       setConfigStyles(() => {
         return {
           ...data
@@ -6129,10 +6559,10 @@ const Stepper = ({
     let steppers = [];
     for (let step = 1; step <= stepLength; step++) {
       steppers.push( /*#__PURE__*/React__default["default"].createElement("div", {
-        className: classnames__default["default"](`${step <= activeSteps ? styles$2.activeRing : styles$2.bigRing}`),
+        className: classnames__default["default"](`${step <= activeSteps ? styles$3.activeRing : styles$3.bigRing}`),
         key: step
       }, /*#__PURE__*/React__default["default"].createElement("div", {
-        className: classnames__default["default"](`${step <= activeSteps ? styles$2.smallActiveRing : styles$2.smallRing}`)
+        className: classnames__default["default"](`${step <= activeSteps ? styles$3.smallActiveRing : styles$3.smallRing}`)
       }, step <= activeSteps ? step : '')));
     }
     return steppers;
@@ -6262,8 +6692,8 @@ Checkbox.propTypes = {
   data: PropTypes__default["default"].oneOfType([PropTypes__default["default"].arrayOf(PropTypes__default["default"].object), PropTypes__default["default"].object])
 };
 
-var css_248z$2 = "textarea{-webkit-appearance:none}textarea::-webkit-scrollbar{width:6px}textarea::-webkit-scrollbar-track{background:#eee}textarea::-webkit-scrollbar-thumb,textarea::-webkit-scrollbar-track{border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px}textarea::-webkit-scrollbar-thumb{background:#d1d1d1}";
-styleInject(css_248z$2);
+var css_248z$3 = "textarea{-webkit-appearance:none}textarea::-webkit-scrollbar{width:6px}textarea::-webkit-scrollbar-track{background:#eee}textarea::-webkit-scrollbar-thumb,textarea::-webkit-scrollbar-track{border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px}textarea::-webkit-scrollbar-thumb{background:#d1d1d1}";
+styleInject(css_248z$3);
 
 const PositionSide = {
   TOP: 'top',
@@ -6337,10 +6767,12 @@ const Textarea = ({
     if (maxLength) {
       if (value.length > maxLength) {
         onChange(value.substr(0, maxLength));
+        setInnerValue(() => value.substr(0, maxLength));
       }
     } else {
       if (value.length > configStyles.TEXTAREA.maxLength) {
         onChange(value.substr(0, configStyles.TEXTAREA.maxLength));
+        setInnerValue(() => value.substr(0, configStyles.TEXTAREA.maxLength));
       }
     }
   };
@@ -6499,6 +6931,236 @@ Textarea.propTypes = {
   characterCountPosition: PropTypes__default["default"].oneOf(Object.values(PositionSide))
 };
 
+const Swipe = ({
+  id,
+  title,
+  child,
+  props,
+  innerConfigStyles
+}) => {
+  const {
+    SWIPEMODAL
+  } = innerConfigStyles || {};
+  const {
+    width,
+    height,
+    titleStyle,
+    position,
+    borderRadius,
+    callClose,
+    showCloseIcon
+  } = props || {};
+  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__default["default"].createElement("div", {
+    style: {
+      width: '100%',
+      display: 'flex',
+      minHeight: '40px',
+      alignItems: 'center',
+      boxSizing: 'border-box',
+      justifyContent: title ? 'space-between' : 'flex-end',
+      padding: titleStyle?.padding ?? SWIPEMODAL.titleStyle.padding,
+      maxHeight: titleStyle?.maxHeight ?? SWIPEMODAL.titleStyle.maxHeight
+    }
+  }, title && /*#__PURE__*/React__default["default"].createElement("h1", {
+    style: {
+      color: titleStyle?.color ?? SWIPEMODAL.titleStyle.color,
+      fontSize: titleStyle?.fontSize ?? SWIPEMODAL.titleStyle.font.size,
+      textAlign: titleStyle?.textAlign ?? SWIPEMODAL.titleStyle.textAlign,
+      fontStyle: titleStyle?.fontStyle ?? SWIPEMODAL.titleStyle.font.style,
+      fontWeight: titleStyle?.fontWeight ?? SWIPEMODAL.titleStyle.font.weight,
+      fontFamily: titleStyle?.fontFamily ?? SWIPEMODAL.titleStyle.font.family
+    }
+  }, title), showCloseIcon && /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      width: '24px',
+      height: '24px',
+      maxWidth: '24px',
+      maxHeight: '24px',
+      cursor: 'pointer'
+    },
+    onClick: hasOwnerProperty(props, 'callClose') && {}.toString.call(callClose) === '[object Function]' ? () => callClose(id) : _ => _
+  }, /*#__PURE__*/React__default["default"].createElement("img", {
+    alt: "close",
+    src: hasOwnerProperty(props, 'closeIcon') && typeof props.closeIcon === 'string' ? props.closeIcon : SWIPEMODAL.closeIcon,
+    style: {
+      width: '100%',
+      height: '100%',
+      objectFit: 'contain',
+      objectPosition: 'center'
+    }
+  }))), child && /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      width: '100%',
+      height: '100%',
+      overflowY: 'auto',
+      overflowX: 'hidden',
+      maxHeight: `calc(100% - ${titleStyle?.maxHeight ?? SWIPEMODAL.titleStyle.maxHeight})`,
+      borderTopLeftRadius: position === 'right' || position === 'bottom' ? '0px' : borderRadius ?? SWIPEMODAL.border.radius,
+      borderTopRightRadius: position === 'left' || position === 'bottom' ? '0px' : borderRadius ?? SWIPEMODAL.border.radius,
+      borderBottomLeftRadius: position === 'right' || position === 'top' ? '0px' : borderRadius ?? SWIPEMODAL.border.radius,
+      borderBottomRightRadius: position === 'left' || position === 'top' ? '0px' : borderRadius ?? SWIPEMODAL.border.radius
+    }
+  }, child));
+};
+
+var css_248z$2 = ".swipe-module_to-top__lrHfG{bottom:0}.swipe-module_to-left__kgLsE{right:0}.swipe-module_to-right__Xu3Ul{left:0}.swipe-module_to-bottom__94M7H{top:0}.swipe-module_visible__---aC{visibility:visible!important}.swipe-module_swipe-block__Yv1B3{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.swipe-module_move-top__m6t2O{-webkit-animation-name:swipe-module_slideTop__-Bbap;animation-name:swipe-module_slideTop__-Bbap}.swipe-module_move-left__4TDLs{-webkit-animation-name:swipe-module_slideLeft__i24cS;animation-name:swipe-module_slideLeft__i24cS}.swipe-module_move-right__FrYo0{-webkit-animation-name:swipe-module_slideRight__swgSY;animation-name:swipe-module_slideRight__swgSY}.swipe-module_move-bottom__eYDx6{-webkit-animation-name:swipe-module_slideBottom__TBoZo;animation-name:swipe-module_slideBottom__TBoZo}.swipe-module_back-top__gJZv0{-webkit-animation-name:swipe-module_backTop__32loc;animation-name:swipe-module_backTop__32loc}.swipe-module_back-left__Wd3aY{-webkit-animation-name:swipe-module_backLeft__q89ub;animation-name:swipe-module_backLeft__q89ub}.swipe-module_back-right__Lgwz7{-webkit-animation-name:swipe-module_backRight__8t5Dm;animation-name:swipe-module_backRight__8t5Dm}.swipe-module_back-bottom__JRN-7{-webkit-animation-name:swipe-module_backBottom__lwR8B;animation-name:swipe-module_backBottom__lwR8B}@keyframes swipe-module_slideTop__-Bbap{0%{bottom:-100%}to{bottom:0}}@keyframes swipe-module_slideLeft__i24cS{0%{right:-100%}to{right:0}}@keyframes swipe-module_slideRight__swgSY{0%{left:-100%}to{left:0}}@keyframes swipe-module_slideBottom__TBoZo{0%{top:-100%}to{top:0}}@keyframes swipe-module_backTop__32loc{0%{bottom:0}to{bottom:-100%}}@keyframes swipe-module_backLeft__q89ub{0%{right:0}to{right:-100%}}@keyframes swipe-module_backRight__8t5Dm{0%{left:0}to{left:-100%}}@keyframes swipe-module_backBottom__lwR8B{0%{top:0}to{top:-100%}}";
+var styles$2 = {"to-top":"swipe-module_to-top__lrHfG","to-left":"swipe-module_to-left__kgLsE","to-right":"swipe-module_to-right__Xu3Ul","to-bottom":"swipe-module_to-bottom__94M7H","visible":"swipe-module_visible__---aC","swipe-block":"swipe-module_swipe-block__Yv1B3","move-top":"swipe-module_move-top__m6t2O","slideTop":"swipe-module_slideTop__-Bbap","move-left":"swipe-module_move-left__4TDLs","slideLeft":"swipe-module_slideLeft__i24cS","move-right":"swipe-module_move-right__FrYo0","slideRight":"swipe-module_slideRight__swgSY","move-bottom":"swipe-module_move-bottom__eYDx6","slideBottom":"swipe-module_slideBottom__TBoZo","back-top":"swipe-module_back-top__gJZv0","backTop":"swipe-module_backTop__32loc","back-left":"swipe-module_back-left__Wd3aY","backLeft":"swipe-module_backLeft__q89ub","back-right":"swipe-module_back-right__Lgwz7","backRight":"swipe-module_backRight__8t5Dm","back-bottom":"swipe-module_back-bottom__JRN-7","backBottom":"swipe-module_backBottom__lwR8B"};
+styleInject(css_248z$2);
+
+let swipeCount = 0;
+const createElem = (id, title, child, props, swipeBlock, innerConfigStyles) => {
+  const {
+    width,
+    height,
+    position = 'left',
+    animation,
+    borderRadius,
+    backgroundColor
+  } = props || {};
+  swipeBlock.style.position = 'fixed';
+  swipeBlock.style.zIndex = swipeCount;
+  swipeBlock.style.backgroundColor = backgroundColor ?? innerConfigStyles.SWIPEMODAL.colors.background;
+  swipeBlock.style.width = position === 'left' || position === 'right' ? width ?? innerConfigStyles.SWIPEMODAL.width : '100%';
+  swipeBlock.style.height = position === 'top' || position === 'bottom' ? height ?? innerConfigStyles.SWIPEMODAL.height : '100vh';
+  swipeBlock.style.borderTopLeftRadius = position === 'right' || position === 'bottom' ? '0px' : borderRadius ?? innerConfigStyles.SWIPEMODAL.border.radius;
+  swipeBlock.style.borderTopRightRadius = position === 'left' || position === 'bottom' ? '0px' : borderRadius ?? innerConfigStyles.SWIPEMODAL.border.radius;
+  swipeBlock.style.borderBottomLeftRadius = position === 'right' || position === 'top' ? '0px' : borderRadius ?? innerConfigStyles.SWIPEMODAL.border.radius;
+  swipeBlock.style.borderBottomRightRadius = position === 'left' || position === 'top' ? '0px' : borderRadius ?? innerConfigStyles.SWIPEMODAL.border.radius;
+  swipeBlock.setAttribute('id', id);
+  swipeBlock.setAttribute('closePos', position);
+  swipeBlock.classList.add(styles$2['swipe-block'], position === 'top' ? styles$2['to-top'] : position === 'bottom' ? styles$2['to-bottom'] : position === 'left' ? styles$2['to-left'] : styles$2['to-right']);
+  if (hasOwnerProperty(props, 'animation') && animation === true) {
+    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__default["default"].createElement(Swipe, {
+    id,
+    title,
+    child,
+    props,
+    innerConfigStyles
+  });
+  const root = ReactDOM__default["default"].createRoot(swipeBlock);
+  root.render(newElem);
+};
+const createSwipe = (id, title, child, props, swipable) => {
+  let innerConfigStyles = {};
+  const swipeBlock = document.createElement('div');
+  swipeBlock.addEventListener('click', function (e) {
+    e.stopPropagation();
+  });
+  configStylesPromise.then(data => {
+    innerConfigStyles = {
+      ...data
+    };
+    createElem(id, title, child, props, swipeBlock, innerConfigStyles);
+    if (!swipable) {
+      const widthParent = hasOwnerProperty(props, 'withParent') ? props.withParent === true ? true : false : innerConfigStyles.SWIPEMODAL.withParent;
+      swipable = document.createElement('div');
+      swipable.setAttribute('id', 'swipable');
+      swipable.style.position = 'fixed';
+      swipable.style.top = '0px';
+      swipable.style.left = '0px';
+      swipable.style.zIndex = 99999;
+      swipable.style.maxWidth = '100%';
+      swipable.style.maxHeight = '100vh';
+      swipable.style.visibility = 'hidden';
+      swipable.style.width = widthParent ? '100%' : '0px';
+      swipable.style.height = widthParent ? '100vh' : '0px';
+      swipable.style.backgroundColor = props?.parent?.backgroundColor ?? innerConfigStyles.SWIPEMODAL.parent.colors.background;
+      swipable.classList.add(styles$2['visible']);
+      if (props.outSideClose || innerConfigStyles.SWIPEMODAL.outSideClose) {
+        swipable.addEventListener('click', function () {
+          hasOwnerProperty(props, 'callClose') && {}.toString.call(props.callClose) === '[object Function]' ? props.callClose() : '';
+        });
+      }
+      document.body.appendChild(swipable);
+    }
+    swipable.appendChild(swipeBlock);
+  }, error => {
+    console.error(error);
+  });
+};
+
+// Function to handle removing the element on navigation change
+const handleNavigationChange = () => {
+  let swipable = document.getElementById('swipable');
+  if (swipable) {
+    swipable.remove();
+  }
+};
+
+// Wrap history methods to detect all navigation changes
+(function (history) {
+  const pushState = history.pushState;
+  const replaceState = history.replaceState;
+  history.pushState = function (state) {
+    const result = pushState.apply(history, arguments);
+    window.dispatchEvent(new Event('navigationchange'));
+    return result;
+  };
+  history.replaceState = function (state) {
+    const result = replaceState.apply(history, arguments);
+    window.dispatchEvent(new Event('navigationchange'));
+    return result;
+  };
+})(window.history);
+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);
+  },
+  close: id => {
+    if (id === undefined || id === null && (typeof id !== 'string' || typeof id !== 'number')) {
+      alert('Please pass valid id prop (string / number)  when call swipe.close function');
+      return;
+    }
+    let swipable = document.getElementById('swipable');
+    swipeCount -= 1;
+    const removable = document.getElementById(id);
+    if (swipable && removable) {
+      const animation = removable.getAttribute('anime');
+      const position = removable.getAttribute('closePos');
+      if (animation) {
+        removable.classList.add(position === 'top' ? styles$2['back-top'] : position === 'left' ? styles$2['back-left'] : position === 'right' ? styles$2['back-right'] : styles$2['back-bottom']);
+        setTimeout(() => {
+          swipable.removeChild(removable);
+          if (swipeCount === 0 && swipable) {
+            window.removeEventListener('popstate', handleNavigationChange);
+            window.removeEventListener('navigationchange', handleNavigationChange);
+            document.body.removeChild(swipable);
+          }
+        }, 200);
+      } else {
+        swipable.removeChild(removable);
+        if (swipeCount === 0 && swipable) {
+          window.removeEventListener('popstate', handleNavigationChange);
+          window.removeEventListener('navigationchange', handleNavigationChange);
+          document.body.removeChild(swipable);
+        }
+      }
+    }
+  }
+};
+const SwipeModal = () => {
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null);
+};
+
 const TypographyType = {
   p: 'p',
   h1: 'h1',
@@ -7291,6 +7953,7 @@ exports.Captcha = Captcha;
 exports.Checkbox = Checkbox;
 exports.DirectionMode = DirectionMode;
 exports.File = File;
+exports.IconSides = IconSides;
 exports.Input = Input;
 exports.InputTypes = InputTypes;
 exports.Modal = Modal;
@@ -7300,10 +7963,13 @@ exports.Radio = Radio;
 exports.RadioDirectionMode = RadioDirectionMode;
 exports.Select = Select;
 exports.Stepper = Stepper;
+exports.SwipeModal = SwipeModal;
 exports.Table = Table;
 exports.Textarea = Textarea;
 exports.Toaster = Toaster;
 exports.Tooltip = Tooltip;
+exports.TooltipDirections = TooltipDirections;
 exports.Typography = Typography;
 exports.TypographyType = TypographyType;
+exports.swipe = swipe;
 exports.toast = toast;