@xaypay/tui 0.2.14 → 0.2.16

package/dist/index.js

@@ -152,6 +152,39 @@ const SvgWrong = ({
   fill: "#051942"
 }));
 
+const SvgDocIcon = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "1em",
+  height: "1em",
+  fill: "none",
+  viewBox: "0 0 32 32",
+  "aria-labelledby": titleId
+}, props), title ? /*#__PURE__*/React__namespace.createElement("title", {
+  id: titleId
+}, title) : null, /*#__PURE__*/React__namespace.createElement("path", {
+  stroke: "#D0D5DD",
+  strokeWidth: 1.2,
+  d: "M6.2 3.2A2.6 2.6 0 0 1 8.8.6h12.8c.097 0 .19.039.258.107l8.635 8.634a.37.37 0 0 1 .107.259v19.2a2.6 2.6 0 0 1-2.6 2.6H8.8a2.6 2.6 0 0 1-2.6-2.6z"
+}), /*#__PURE__*/React__namespace.createElement("path", {
+  stroke: "#D0D5DD",
+  strokeWidth: 1.2,
+  d: "M21.6.4v6a3.2 3.2 0 0 0 3.2 3.2h6"
+}), /*#__PURE__*/React__namespace.createElement("rect", {
+  width: 23.8,
+  height: 13.2,
+  x: 0.5,
+  y: 14.2,
+  fill: "#3C68FF",
+  rx: 1.6
+}), /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "#fff",
+  d: "M5.922 23.8H3.859v-5.818h2.08q.878 0 1.511.35.633.346.975.996.343.651.343 1.557 0 .909-.343 1.563-.341.653-.98 1.003-.637.349-1.523.349m-.833-1.054h.782q.546 0 .917-.193.375-.196.563-.605.19-.413.19-1.063 0-.645-.19-1.054a1.23 1.23 0 0 0-.56-.602q-.372-.193-.918-.193H5.09zm9.937-1.855q0 .951-.36 1.62a2.5 2.5 0 0 1-.978 1.02q-.616.348-1.386.349-.776 0-1.392-.353a2.5 2.5 0 0 1-.975-1.02q-.357-.668-.358-1.616 0-.952.358-1.62.359-.667.975-1.017a2.76 2.76 0 0 1 1.392-.352q.77 0 1.386.352.62.35.977 1.018.36.667.361 1.619m-1.247 0q0-.617-.185-1.04a1.4 1.4 0 0 0-.514-.642 1.4 1.4 0 0 0-.778-.219q-.447 0-.779.22-.332.218-.517.641-.182.423-.182 1.04 0 .616.182 1.04.185.423.517.642.332.218.779.218.445 0 .778-.218.333-.219.514-.642.185-.425.185-1.04m7.292-.872h-1.245a1.2 1.2 0 0 0-.139-.43 1.1 1.1 0 0 0-.27-.323 1.2 1.2 0 0 0-.38-.205 1.5 1.5 0 0 0-.463-.07 1.4 1.4 0 0 0-.787.224 1.43 1.43 0 0 0-.52.648q-.185.423-.185 1.028 0 .622.185 1.045.188.423.523.64.335.215.775.215.247 0 .457-.065.215-.065.378-.19.165-.128.273-.31.11-.182.154-.415l1.244.006a2.323 2.323 0 0 1-.756 1.435 2.4 2.4 0 0 1-.767.46q-.443.168-1.003.168-.778 0-1.392-.353a2.5 2.5 0 0 1-.966-1.02q-.352-.668-.352-1.616 0-.952.358-1.62.358-.667.972-1.017.614-.352 1.38-.352.506 0 .938.142.434.142.77.415.335.27.545.662.213.391.273.898"
+}));
+
 const SvgListItemPdf = ({
   title,
   titleId,
@@ -263,9 +296,11 @@ const FileItem = /*#__PURE__*/React__default["default"].memo(({
   check,
   radius,
   status,
+  iconDoc,
   iconPdf,
   iconPng,
   iconJpg,
+  iconDocx,
   iconJpeg,
   iconHeic,
   iconWrong,
@@ -405,7 +440,7 @@ const FileItem = /*#__PURE__*/React__default["default"].memo(({
     style: {
       width: '32px'
     }
-  }, fileFormat === 'pdf' ? iconPdf ? iconPdf : /*#__PURE__*/React__default["default"].createElement(SvgListItemPdf, null) : fileFormat === 'jpg' ? iconJpg ? iconJpg : /*#__PURE__*/React__default["default"].createElement(SvgListItemJpg, null) : fileFormat === 'png' ? iconPng ? iconPng : /*#__PURE__*/React__default["default"].createElement(SvgListItemPng, null) : fileFormat === 'jpeg' ? iconJpeg ? iconJpeg : /*#__PURE__*/React__default["default"].createElement(SvgListItemJpeg, null) : fileFormat === 'heic' || fileFormat === 'heif' ? iconHeic ? iconHeic : /*#__PURE__*/React__default["default"].createElement(SvgHeic, null) : ''), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, fileFormat === 'pdf' ? iconPdf ? iconPdf : /*#__PURE__*/React__default["default"].createElement(SvgListItemPdf, null) : fileFormat === 'jpg' ? iconJpg ? iconJpg : /*#__PURE__*/React__default["default"].createElement(SvgListItemJpg, null) : fileFormat === 'png' ? iconPng ? iconPng : /*#__PURE__*/React__default["default"].createElement(SvgListItemPng, null) : fileFormat === 'jpeg' ? iconJpeg ? iconJpeg : /*#__PURE__*/React__default["default"].createElement(SvgListItemJpeg, null) : fileFormat === 'heic' || fileFormat === 'heif' ? iconHeic ? iconHeic : /*#__PURE__*/React__default["default"].createElement(SvgHeic, null) : fileFormat === 'msword' ? iconDoc ? iconDoc : /*#__PURE__*/React__default["default"].createElement(SvgDocIcon, null) : fileFormat === 'vnd.openxmlformats-officedocument.wordprocessingml.document' ? iconDocx ? iconDocx : /*#__PURE__*/React__default["default"].createElement(SvgDocIcon, null) : ''), /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       position: 'relative',
       display: 'flex',
@@ -463,6 +498,13 @@ const FileItem = /*#__PURE__*/React__default["default"].memo(({
   }, iconDelItem ? iconDelItem : /*#__PURE__*/React__default["default"].createElement(SvgListItemDelete, null))));
 });
 
+var img$4 = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg clip-path='url(%23clip0_18850_5919)'%3e%3cpath d='M13.4695 11.9505L20.7595 4.66046C20.9234 4.46916 21.009 4.22308 20.9993 3.9714C20.9895 3.71973 20.8852 3.48099 20.7071 3.30289C20.529 3.1248 20.2903 3.02047 20.0386 3.01075C19.7869 3.00102 19.5408 3.08663 19.3495 3.25046L12.0595 10.5405L4.76954 3.24046C4.57824 3.07663 4.33217 2.99102 4.08049 3.00075C3.82881 3.01047 3.59008 3.1148 3.41198 3.29289C3.23389 3.47099 3.12955 3.70973 3.11983 3.9614C3.11011 4.21308 3.19572 4.45915 3.35954 4.65046L10.6495 11.9505L3.34954 19.2405C3.24486 19.3301 3.15984 19.4404 3.09982 19.5645C3.0398 19.6886 3.00606 19.8237 3.00075 19.9614C2.99543 20.0991 3.01863 20.2365 3.06891 20.3648C3.11918 20.4931 3.19544 20.6097 3.29289 20.7071C3.39035 20.8046 3.5069 20.8808 3.63522 20.9311C3.76355 20.9814 3.90088 21.0046 4.0386 20.9993C4.17632 20.9939 4.31145 20.9602 4.43551 20.9002C4.55958 20.8402 4.6699 20.7551 4.75954 20.6505L12.0595 13.3605L19.3495 20.6505C19.5408 20.8143 19.7869 20.8999 20.0386 20.8902C20.2903 20.8804 20.529 20.7761 20.7071 20.598C20.8852 20.4199 20.9895 20.1812 20.9993 19.9295C21.009 19.6778 20.9234 19.4318 20.7595 19.2405L13.4695 11.9505Z' fill='%231C212D'/%3e%3c/g%3e%3cdefs%3e%3cclipPath id='clip0_18850_5919'%3e%3crect width='24' height='24' fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e";
+
+var img$3 = "data:image/svg+xml,%3csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 1V15M1 8H15' stroke='%23009B8B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e";
+
+var img$2 = "data:image/svg+xml,%3csvg width='16' height='2' viewBox='0 0 16 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1 1H15' stroke='%23009B8B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e";
+
+// import React from 'react'
 const boxSizing = 'border-box';
 const fontStyle = 'normal';
 const fontFamily = 'Arial';
@@ -489,17 +531,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 +552,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 +568,10 @@ var packageResult = {
       }
     },
     icon: {
+      marginLeft: '10px',
       marginRight: '10px'
-    }
+    },
+    withoutStyling: false
   },
   // default properties for <Input /> component
   INPUT: {
@@ -537,6 +586,7 @@ var packageResult = {
     className: '',
     maxLength: 255,
     iconWidth: '64px',
+    iconPadding: '10px',
     autoComplete: 'off',
     box: {
       sizing: boxSizing,
@@ -556,6 +606,7 @@ var packageResult = {
       color: presetColors.dark,
       display: 'block',
       lineHeight: '22px',
+      iconMargin: '10px',
       marginBottom: '6px',
       font: {
         ...fontObject
@@ -567,7 +618,11 @@ var packageResult = {
       zIndex: '1',
       className: '',
       marginTop: '10px',
+      iconMargin: '10px',
       lineHeight: '19px',
+      box: {
+        shadow: '0 0 0 1px #F20918'
+      },
       font: {
         ...fontObject
       }
@@ -715,6 +770,7 @@ var packageResult = {
   SELECT: {
     dots: false,
     className: '',
+    arrowNoRotate: false,
     showCloseIcon: true,
     // arrowIcon: React.createElement(SvgChecked, { fill: 'green' }),
     // closeIcon: React.createElement(SvgChecked, { fill: 'green' }),
@@ -1091,8 +1147,14 @@ var packageResult = {
     header: {
       color: presetColors.primarySecond,
       height: '30px',
+      align: 'left',
       font: {
         ...fontObject
+      },
+      icon: {
+        maxWidth: '60px',
+        maxHeight: '60px',
+        marginRight: '20px'
       }
     },
     image: {
@@ -1112,6 +1174,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$4
+  },
   // default properties for <Checkbox /> component
   CHECKBOX: {
     className: '',
@@ -1190,17 +1282,76 @@ var packageResult = {
   },
   // default properties for <Pagination /> component
   PAGINATION: {
-    className: '' // for pagination class
+    width: '34px',
+    height: '34px',
+    lineHeight: '16px',
+    className: '',
+    // for pagination class
+    color: '#000000',
+    font: {
+      size: '13px',
+      style: '',
+      weight: '',
+      family: ''
+    },
+    colors: {
+      hover: '#000000',
+      active: '#ffffff',
+      background: '#ffffff',
+      activeHover: '#ffffff',
+      hoverBackground: '#dddddd',
+      activeBackground: '#00236a'
+    },
+    border: {
+      width: '1px',
+      color: 'rgba(238,238,238, 1)',
+      radius: '6px'
+    }
   },
   // 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
@@ -1220,10 +1371,12 @@ var packageResult = {
       width: '2px',
       style: 'solid',
       color: '#E7E7E7',
+      hoverColor: '#E7E7E7',
       activeColor: '#3C3D46'
     },
     label: {
       color: '#3C3D46',
+      activeColor: '#3C3D46',
       lineHeight: '21px',
       font: {
         ...fontObject
@@ -1233,6 +1386,39 @@ var packageResult = {
   // default properties for <Form /> component
   FORM: {
     className: ''
+  },
+  // default properties for <Accordion /> component
+  ACCORDION: {
+    className: '',
+    padding: '15px',
+    color: '#121212',
+    marginBottom: '0px',
+    colors: {
+      hover: '#009B8B',
+      background: '#E5E7EA',
+      backgroundHover: '#CBCED5'
+    },
+    border: {
+      color: '#A8ADB9',
+      width: '1px',
+      style: 'solid',
+      radius: '0px',
+      top: false,
+      left: false,
+      right: false,
+      bottom: true
+    },
+    font: {
+      size: '14px',
+      style: 'normal',
+      weight: 700,
+      family: 'Noto Sans Armenian'
+    },
+    icon: {
+      open: img$3,
+      close: img$2,
+      openHover: img$3
+    }
   }
 };
 
@@ -1286,6 +1472,7 @@ const Button = ({
   radius,
   outline,
   padding,
+  opacity,
   onClick,
   disabled,
   className,
@@ -1294,13 +1481,18 @@ const Button = ({
   hoverColor,
   transition,
   contentWidth,
+  iconRightSide,
   disabledColor,
   textTransform,
+  withoutStyling,
   backgroundColor,
   disabledLineColor,
+  btnIconMarginLeft,
   btnIconMarginRight,
+  withoutStylingColor,
   backgroundHoverColor,
   disabledBackgroundColor,
+  withoutStylingHoverColor,
   ...props
 }) => {
   const [classProps, setClassProps] = React.useState({});
@@ -1336,22 +1528,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,
@@ -1359,43 +1552,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 = ({
@@ -1554,8 +1754,10 @@ const File = /*#__PURE__*/React.forwardRef(({
   progressColor,
   noChoosenFile,
   iconPdf,
+  iconDoc,
   iconPng,
   iconJpg,
+  iconDocx,
   iconJpeg,
   iconHeic,
   iconWrong,
@@ -1659,8 +1861,26 @@ const File = /*#__PURE__*/React.forwardRef(({
         for (let ix = 0; ix < file.length; ix++) {
           if (file[ix]) {
             if (file[ix].size <= maxSize * Math.pow(2, 20)) {
-              if (fileExtensions.includes(file[ix].type.split('/')[1]) || file[ix].name.toLowerCase().endsWith('.heic') || file[ix].name.toLowerCase().endsWith('.heif')) {
-                if ((fileExtensions.includes('heic') || fileExtensions.includes('heif')) && (file[ix].name.toLowerCase().endsWith('.heic') || file[ix].name.toLowerCase().endsWith('.heif'))) {
+              if (fileExtensions.includes(file[ix].type.split('/')[1]) || file[ix].name.toLowerCase().endsWith('.heic') || file[ix].name.toLowerCase().endsWith('.heif') || (fileExtensions.includes('doc') || fileExtensions.includes('docx')) && (file[ix].type.split('/')[1] === 'vnd.openxmlformats-officedocument.wordprocessingml.document' || file[ix].type.split('/')[1] === 'msword')) {
+                if (file[ix].type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') {
+                  change({
+                    id: '',
+                    check: '',
+                    status: '',
+                    file: file[ix],
+                    uuid: v4()
+                  });
+                  setImage('docx');
+                } else if (file[ix].type === 'application/msword') {
+                  change({
+                    id: '',
+                    check: '',
+                    status: '',
+                    file: file[ix],
+                    uuid: v4()
+                  });
+                  setImage('doc');
+                } else if ((fileExtensions.includes('heic') || fileExtensions.includes('heif')) && (file[ix].name.toLowerCase().endsWith('.heic') || file[ix].name.toLowerCase().endsWith('.heif'))) {
                   handleCheckHeicFormat(file[ix]).then(() => {
                     change({
                       id: '',
@@ -1707,8 +1927,26 @@ const File = /*#__PURE__*/React.forwardRef(({
       for (let ix = 0; ix < file.length; ix++) {
         if (file[ix]) {
           if (file[ix].size <= maxSize * Math.pow(2, 20)) {
-            if (fileExtensions.includes(file[ix].type.split('/')[1]) || file[ix].name.toLowerCase().endsWith('.heic') || file[ix].name.toLowerCase().endsWith('.heif')) {
-              if ((fileExtensions.includes('heic') || fileExtensions.includes('heif')) && (file[ix].name.toLowerCase().endsWith('.heic') || file[ix].name.toLowerCase().endsWith('.heif'))) {
+            if (fileExtensions.includes(file[ix].type.split('/')[1]) || file[ix].name.toLowerCase().endsWith('.heic') || file[ix].name.toLowerCase().endsWith('.heif') || (fileExtensions.includes('doc') || fileExtensions.includes('docx')) && (file[ix].type.split('/')[1] === 'vnd.openxmlformats-officedocument.wordprocessingml.document' || file[ix].type.split('/')[1] === 'msword')) {
+              if (file[ix].type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') {
+                change({
+                  id: '',
+                  check: '',
+                  status: '',
+                  file: file[ix],
+                  uuid: v4()
+                });
+                setImage('docx');
+              } else if (file[ix].type === 'application/msword') {
+                change({
+                  id: '',
+                  check: '',
+                  status: '',
+                  file: file[ix],
+                  uuid: v4()
+                });
+                setImage('doc');
+              } else if ((fileExtensions.includes('heic') || fileExtensions.includes('heif')) && (file[ix].name.toLowerCase().endsWith('.heic') || file[ix].name.toLowerCase().endsWith('.heif'))) {
                 handleCheckHeicFormat(file[ix]).then(() => {
                   change({
                     id: '',
@@ -1764,9 +2002,17 @@ const File = /*#__PURE__*/React.forwardRef(({
     } else {
       if (file[0]) {
         if (file[0].size <= maxSize * Math.pow(2, 20)) {
-          if (fileExtensions.includes(file[0].type.split('/')[1]) || (fileExtensions.includes('heic') || fileExtensions.includes('heif')) && (file[0].type === 'image/heif' || file[0].type === 'image/heic' || file[0].name.toLowerCase().endsWith('.heic') || file[0].name.toLowerCase().endsWith('.heif'))) {
+          if (fileExtensions.includes(file[0].type.split('/')[1]) || (fileExtensions.includes('heic') || fileExtensions.includes('heif')) && (file[0].type === 'image/heif' || file[0].type === 'image/heic' || file[0].name.toLowerCase().endsWith('.heic') || file[0].name.toLowerCase().endsWith('.heif')) || (fileExtensions.includes('doc') || fileExtensions.includes('docx')) && (file[0].type.split('/')[1] === 'vnd.openxmlformats-officedocument.wordprocessingml.document' || file[0].type.split('/')[1] === 'msword')) {
             setError('');
-            if (file[0].type === 'application/pdf') {
+            if (file[0].type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') {
+              setImage('docx');
+              change(file);
+              setSingleFile(file);
+            } else if (file[0].type === 'application/msword') {
+              setImage('doc');
+              change(file);
+              setSingleFile(file);
+            } else if (file[0].type === 'application/pdf') {
               setImage('pdf');
               change(file);
               setSingleFile(file);
@@ -1781,6 +2027,7 @@ const File = /*#__PURE__*/React.forwardRef(({
               });
             } else {
               change(file);
+              setSingleFile(file);
               setImage(URL.createObjectURL(file[0]));
             }
           } else {
@@ -1801,8 +2048,12 @@ const File = /*#__PURE__*/React.forwardRef(({
   const handleClick = () => {
     inpRef.current.files = null;
     inpRef.current.value = null;
-    if (!image) {
+    if (multiple) {
       inpRef.current.click();
+    } else {
+      if (!image) {
+        inpRef.current.click();
+      }
     }
   };
   const handleDrop = e => {
@@ -1966,7 +2217,7 @@ const File = /*#__PURE__*/React.forwardRef(({
       fontFamily: family ?? configStyles.FILE.font.family,
       fontWeight: weight ?? configStyles.FILE.font.weight
     }
-  }, !multiple && image && preview ? image === 'pdf' ? iconPdf ? iconPdf : configStyles.FILE.icon.pdf ? configStyles.FILE.icon.pdf : /*#__PURE__*/React__default["default"].createElement(SvgPdf, null) : image === 'heif' || image === 'heic' ? iconHeic ? iconHeic : configStyles.FILE.icon.heic ? configStyles.FILE.icon.heic : /*#__PURE__*/React__default["default"].createElement(SvgHeic, null) : /*#__PURE__*/React__default["default"].createElement("img", {
+  }, !multiple && image && preview ? image === 'pdf' ? iconPdf ? iconPdf : configStyles.FILE.icon.pdf ? configStyles.FILE.icon.pdf : /*#__PURE__*/React__default["default"].createElement(SvgPdf, null) : image === 'heif' || image === 'heic' ? iconHeic ? iconHeic : configStyles.FILE.icon.heic ? configStyles.FILE.icon.heic : /*#__PURE__*/React__default["default"].createElement(SvgHeic, null) : image === 'doc' ? iconDoc ? iconDoc : configStyles.FILE.icon.doc ? configStyles.FILE.icon.doc : /*#__PURE__*/React__default["default"].createElement(SvgDocIcon, null) : image === 'docx' ? iconDocx ? iconDocx : configStyles.FILE.icon.docx ? configStyles.FILE.icon.docx : /*#__PURE__*/React__default["default"].createElement(SvgDocIcon, null) : /*#__PURE__*/React__default["default"].createElement("img", {
     src: image,
     style: {
       display: 'block',
@@ -1991,7 +2242,8 @@ const File = /*#__PURE__*/React.forwardRef(({
     }
   }, /*#__PURE__*/React__default["default"].createElement("p", {
     style: {
-      margin: '0px'
+      margin: '0px',
+      padding: '0px 10px'
     }
   }, fileSizeText ?? configStyles.FILE.sizeText, " ", maxSize, " \u0544\u0532 (", ' ', fileExtensions.toString().split(',').join(', '), " )"))) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
@@ -2023,7 +2275,7 @@ const File = /*#__PURE__*/React.forwardRef(({
       whiteSpace: 'nowrap',
       textOverflow: 'ellipsis'
     }
-  }, singleFile ? singleFile[0].name : /*#__PURE__*/React__default["default"].createElement("span", null, fileSizeText ?? configStyles.FILE.sizeText, " ", maxSize, " \u0544\u0532 (", ' ', fileExtensions.toString().split(',').join(', '), " )"))))), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, singleFile ? singleFile.name : /*#__PURE__*/React__default["default"].createElement("span", null, fileSizeText ?? configStyles.FILE.sizeText, " ", maxSize, " \u0544\u0532 (", ' ', fileExtensions.toString().split(',').join(', '), " )"))))), /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       position: 'absolute',
       top: '0px',
@@ -2062,11 +2314,13 @@ const File = /*#__PURE__*/React.forwardRef(({
       uuid: item.uuid,
       check: item.check,
       status: item.status,
-      size: item.file.size,
-      name: item.file.name,
+      size: item?.file?.size,
+      name: item?.file?.name,
       iconPdf: iconPdf ?? configStyles.FILE.icon.pdf,
+      iconDoc: iconDoc ?? configStyles.FILE.icon.doc,
       iconPng: iconPng ?? configStyles.FILE.icon.png,
       iconJpg: iconJpg ?? configStyles.FILE.icon.jpg,
+      iconDocx: iconDocx ?? configStyles.FILE.icon.docx,
       iconJpeg: iconJpeg ?? configStyles.FILE.icon.jpeg,
       iconHeic: iconHeic ?? configStyles.FILE.icon.heic,
       iconWrong: iconWrong ?? configStyles.FILE.icon.wrong,
@@ -2074,7 +2328,7 @@ const File = /*#__PURE__*/React.forwardRef(({
       timeForRemoveError: timeForRemoveError,
       removeFile: removeFile ? removeFile : _ => _,
       radius: radius ?? configStyles.FILE.radius,
-      fileFormat: item.file.type.split('/')[1]?.toLowerCase(),
+      fileFormat: item?.file?.type.split('/')[1]?.toLowerCase(),
       progressColor: progressColor ?? configStyles.FILE.progress.color,
       listItemHeight: listItemHeight ?? configStyles.FILE.listItem.height,
       listItemPadding: listItemPadding ?? configStyles.FILE.listItem.padding,
@@ -2140,8 +2394,10 @@ File.propTypes = {
   deleteComponent: PropTypes__default["default"].bool,
   removeComponent: PropTypes__default["default"].func,
   iconPdf: PropTypes__default["default"].element,
+  iconDoc: PropTypes__default["default"].element,
   iconPng: PropTypes__default["default"].element,
   iconJpg: PropTypes__default["default"].element,
+  iconDocx: PropTypes__default["default"].element,
   iconJpeg: PropTypes__default["default"].element,
   iconHeic: PropTypes__default["default"].element,
   iconWrong: PropTypes__default["default"].element,
@@ -2389,15 +2645,21 @@ const handleUtilsCheckTypeTel = (val, prevVal) => {
   }
   return val;
 };
-const handleUtilsCheckTypeNumber = (val, prevVal, maxLength, floatToFix, maxNumSize, withoutDot, innerMinNumSize, numberMaxLength) => {
+const handleUtilsCheckTypeNumber = (val, prevVal, maxLength, floatToFix, maxNumSize, withoutDot, innerMinNumSize, numberMaxLength, cardNumber) => {
   if (maxLength && maxLength > 0) {
     if (val.length > maxLength) {
       val = val.substr(0, maxLength);
     }
   } else {
     const regNum = floatToFix && floatToFix >= 0 ? /^\d+(\.|\․|\.|\,)?(\d+)?$/ : /^\d+$/;
-    if (val.length > 16 && !val.includes('.')) {
-      val = val.substr(0, 16);
+    if (cardNumber) {
+      if (val.length > 19 && !val.includes('.')) {
+        val = val.substr(0, 19);
+      }
+    } else {
+      if (val.length > 16 && !val.includes('.')) {
+        val = val.substr(0, 16);
+      }
     }
     if (numberMaxLength && numberMaxLength > 0 && !val.includes('.')) {
       val = val.substr(0, numberMaxLength);
@@ -2473,9 +2735,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$c = ".table-module_sorting-arrows__BaN-G:after{content:\"▲\";font-size:11px;position:absolute;right:0;top:calc(50% - 12px)}.table-module_sorting-arrows__BaN-G:before{bottom:calc(50% - 12px);content:\"▼\";font-size:11px;position:absolute;right:0}.table-module_td-span__XHo6k{display:inline-block;position:relative}.table-module_td-span__XHo6k>svg{left:0;position:absolute;top:0;z-index:-1}.table-module_list-text__kmKIq{align-items:center;cursor:pointer;display:flex;margin:0 0 8px;min-height:38px;white-space:wrap}.table-module_dots-option-item__jNOxO{box-sizing:border-box;cursor:pointer;display:flex;height:39px;margin-bottom:2px;padding:10px;position:relative;width:100%}.table-module_dots-option-item__jNOxO:after{background-color:#eee;border-radius:1px;-webkit-border-radius:1px;-moz-border-radius:1px;-ms-border-radius:1px;-o-border-radius:1px;content:\"\";height:2px;left:10px;position:absolute;top:calc(100% - 2px);width:calc(100% - 20px)}.table-module_dots-option-item__jNOxO:last-child:after{display:none}.table-module_no-tabel-data__6xp3N{align-items:center;display:flex;height:200px;justify-content:center;width:100%}";
+var styles$a = {"sorting-arrows":"table-module_sorting-arrows__BaN-G","td-span":"table-module_td-span__XHo6k","list-text":"table-module_list-text__kmKIq","dots-option-item":"table-module_dots-option-item__jNOxO","no-tabel-data":"table-module_no-tabel-data__6xp3N"};
+styleInject(css_248z$c);
 
 /* eslint-disable no-prototype-builtins */
 const TH = ({
@@ -2517,7 +2779,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',
@@ -2533,7 +2795,8 @@ const TH = ({
     unCheckedColor: item.checkBox.unCheckedColor ? item.checkBox.unCheckedColor : ''
   }) : '', /*#__PURE__*/React__default["default"].createElement("p", {
     style: {
-      margin: '0px'
+      margin: '0px',
+      whiteSpace: 'nowrap'
     },
     onClick: e => handleCheckArrowAction(e, item, 'arrowComponent')
   }, item.type === 'show' ? item.content : hasOwnerProperty(item, 'arrowComponent') ? item.status === 'close' ? item.closeArrow : item.openArrow : '')));
@@ -2651,7 +2914,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 : '');
@@ -2673,7 +2936,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 : '');
@@ -2697,7 +2960,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: {
@@ -2766,7 +3029,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',
@@ -2808,7 +3071,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,
@@ -2825,7 +3088,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,
@@ -2846,7 +3109,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) : '') : '');
 };
 
@@ -3103,7 +3366,6 @@ const Table = ({
     }
   };
   const handleCheckedHeader = (data, e) => {
-    console.log('ok - - - - - - - ');
     e.stopPropagation();
     let removeItemIndex;
     let checkableItemBool;
@@ -3214,9 +3476,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;
@@ -3281,7 +3552,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 {
@@ -3391,7 +3662,12 @@ const Table = ({
     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);
@@ -3413,8 +3689,18 @@ const Table = ({
       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) => {
+    const draggableArray = body && body.length > 0 ? body.map((item, index) => {
       if (showOrder) {
         Object.values(item).map((innerItem, innerIndex) => {
           if (innerIndex === 1) {
@@ -3424,20 +3710,24 @@ const Table = ({
         });
       }
       return item;
-    });
+    }) : [];
     getDraggableData && getDraggableData(draggableArray);
     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 = [];
       let checkedItems = [];
       const disabledArray = [];
-      const checkBodyForChackedItems = dataBody.slice().map(item => Object.values(item));
+      const checkBodyForChackedItems = dataBody && dataBody.length > 0 ? 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) => {
@@ -3456,29 +3746,10 @@ 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) => {
+        insert = checkBodyForChackedItems && checkBodyForChackedItems.length > 0 ? checkBodyForChackedItems.map((item, index) => {
           item.map((innerItem, innerIndex) => {
             if (hasOwnerProperty(innerItem, 'checkBox')) {
               if (hasOwnerProperty(innerItem.checkBox, 'disabled')) {
@@ -3494,70 +3765,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 && dataBody && dataBody.length > 0) {
+        newArray = insert && insert.length > 0 ? 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);
     }
   }, [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(() => {
@@ -3575,7 +3838,7 @@ const Table = ({
       console.error(error);
     });
   }, []);
-  return configStyles.TABLE && /*#__PURE__*/React__default["default"].createElement("table", {
+  return configStyles.TABLE && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("table", {
     style: {
       width: '100%',
       borderCollapse: tableRowItem ?? configStyles.TABLE.body.row.asItem ? 'separate' : 'collapse',
@@ -3610,7 +3873,7 @@ const Table = ({
       tableColumnMinWidth: tableColumnMinWidth ?? configStyles.TABLE.column.minWidth,
       tableColumnMaxWidth: tableColumnMaxWidth ?? configStyles.TABLE.column.maxWidth
     });
-  }))), body && body.length > 0 && /*#__PURE__*/React__default["default"].createElement("tbody", {
+  }))), body && body.length > 0 ? /*#__PURE__*/React__default["default"].createElement("tbody", {
     style: {
       boxShadow: tBodyBoxShadow ?? configStyles.TABLE.body.box.shadow
     }
@@ -3622,7 +3885,7 @@ const Table = ({
       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,
+        borderColor: hideBorder || index === body.length - 1 ? '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)
@@ -3669,7 +3932,7 @@ const Table = ({
         handleOpenCloseRowSingleArrow: handleOpenCloseRowSingleArrow
       });
     }));
-  })), draggable && dragging && draggedItem && /*#__PURE__*/React__default["default"].createElement("div", {
+  })) : '', body && body.length > 0 && draggable && dragging && draggedItem && /*#__PURE__*/React__default["default"].createElement("tbody", null, /*#__PURE__*/React__default["default"].createElement("tr", {
     style: {
       position: 'fixed',
       top: `${position.y - 30}px`,
@@ -3715,10 +3978,15 @@ const Table = ({
       borderRight: innerIndex === Object.values(draggedItem).length - 1 ? 'none' : configStyles.TABLE.body.row.border,
       borderRightColor: innerIndex === Object.values(draggedItem).length - 1 ? 'transparent' : configStyles.TABLE.body.row.borderColor
     });
-  })));
+  })))), !body.length && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: styles$a['no-tabel-data']
+  }, /*#__PURE__*/React__default["default"].createElement("p", null, "\u054F\u057E\u0575\u0561\u056C\u0576\u0565\u0580 \u0579\u056F\u0561\u0576")));
 };
 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,
@@ -3756,9 +4024,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$b = ".modal-module_animation__modal__3mt48{animation:modal-module_show-popup__WrH7a .15s;-webkit-animation:modal-module_show-popup__WrH7a .15s}@keyframes modal-module_show-popup__WrH7a{0%{transform:translate3d(0,-50%,0);-webkit-transform:translate3d(0,-50%,0);-moz-transform:translate3d(0,-50%,0);-ms-transform:translate3d(0,-50%,0);-o-transform:translate3d(0,-50%,0)}to{opacity:1;transform:translateZ(0);-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0)}}";
+var styles$9 = {"animation__modal":"modal-module_animation__modal__3mt48","show-popup":"modal-module_show-popup__WrH7a"};
+styleInject(css_248z$b);
 
 const SvgNext = ({
   title,
@@ -3878,6 +4146,7 @@ const Modal = ({
   prevIcon,
   nextIcon,
   closeIcon,
+  showCloseIcon,
   closeSlideIcon,
   selected,
   children,
@@ -3890,6 +4159,7 @@ const Modal = ({
   headerText,
   imageWidth,
   headerSize,
+  headerIcon,
   headerStyle,
   headerFamily,
   imageHeight,
@@ -3903,10 +4173,14 @@ const Modal = ({
   headerWeight,
   headerHeight,
   justifyContent,
+  headerTextAlign,
   backgroundColor,
   imageWrapHeight,
   grayDecorHeight,
+  headerIconMaxWidth,
+  headerIconMaxHeight,
   layerBackgroundColor,
+  headerIconMarginRight,
   closeAreaBackgroundColor,
   type = 'content'
 }) => {
@@ -3918,7 +4192,15 @@ const Modal = ({
   const [classProps, setClassProps] = React.useState({});
   const [configStyles, setConfigStyles] = React.useState({});
   const handleCloseModal = () => {
-    setShow(false);
+    if (outsideClose !== undefined) {
+      if (outsideClose) {
+        setShow(false);
+      }
+    } else {
+      if (configStyles.MODAL.outsideClose) {
+        setShow(false);
+      }
+    }
   };
   const handleStopClosing = e => {
     e.stopPropagation();
@@ -4013,7 +4295,7 @@ const Modal = ({
   }, []);
   return configStyles.MODAL && /*#__PURE__*/React__default["default"].createElement("div", {
     className: classProps,
-    onClick: outsideClose || configStyles.MODAL.outsideClose ? handleCloseModal : _ => _,
+    onClick: handleCloseModal,
     style: {
       top: '0px',
       left: '0px',
@@ -4033,7 +4315,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',
@@ -4062,7 +4344,18 @@ const Modal = ({
       justifyContent: headerText && type === 'content' ? 'space-between' : 'flex-end',
       backgroundColor: closeAreaBackgroundColor ?? configStyles.MODAL.closeAreaBackgroundColor
     }
-  }, headerText && type === 'content' && /*#__PURE__*/React__default["default"].createElement("p", {
+  }, headerIcon && type === 'content' && /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      display: 'flex',
+      width: 'fit-content',
+      alignItems: 'center',
+      height: 'fit-content',
+      justifyContent: 'center',
+      maxWidth: headerIconMaxWidth ?? configStyles.MODAL.header.icon.maxWidth,
+      maxHeight: headerIconMaxHeight ?? configStyles.MODAL.header.icon.maxHeight,
+      marginRight: headerIconMarginRight ?? configStyles.MODAL.header.icon.marginRight
+    }
+  }, headerIcon), headerText && type === 'content' && /*#__PURE__*/React__default["default"].createElement("p", {
     style: {
       flex: '1',
       overflow: 'hidden',
@@ -4071,18 +4364,25 @@ const Modal = ({
       margin: '0px 16px 0px 0px',
       color: headerColor ?? configStyles.MODAL.header.color,
       fontSize: headerSize ?? configStyles.MODAL.header.font.size,
+      textAlign: headerTextAlign ?? configStyles.MODAL.header.align,
       fontStyle: headerStyle ?? configStyles.MODAL.header.font.style,
       fontFamily: headerFamily ?? configStyles.MODAL.header.font.family,
       fontWeight: headerWeight ?? configStyles.MODAL.header.font.weight
     }
-  }, headerText), /*#__PURE__*/React__default["default"].createElement("div", {
-    onClick: handleCloseModal,
+  }, headerText), showCloseIcon ? /*#__PURE__*/React__default["default"].createElement("div", {
+    onClick: () => setShow(false),
     style: {
-      width: '14px',
-      height: '14px',
-      cursor: 'pointer'
+      display: 'flex',
+      minWidth: '14px',
+      minHeight: '14px',
+      cursor: 'pointer',
+      width: 'fit-content',
+      alignItems: 'center',
+      alignSelf: 'flex-end',
+      height: 'fit-content',
+      justifyContent: 'center'
     }
-  }, closeIcon ? closeIcon : configStyles.MODAL.icon.close ? configStyles.MODAL.icon.close : /*#__PURE__*/React__default["default"].createElement(SvgCloseIcon, null))), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, closeIcon ? closeIcon : configStyles.MODAL.icon.close ? configStyles.MODAL.icon.close : /*#__PURE__*/React__default["default"].createElement(SvgCloseIcon, null)) : ''), /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       display: 'flex',
       width: '100%',
@@ -4125,7 +4425,7 @@ const Modal = ({
       background: closeAreaBackgroundColor ?? configStyles.MODAL.closeAreaBackgroundColor
     }
   }, /*#__PURE__*/React__default["default"].createElement("button", {
-    onClick: handleCloseModal,
+    onClick: () => setShow(false),
     style: {
       position: 'absolute',
       zIndex: '1',
@@ -4230,14 +4530,20 @@ Modal.propTypes = {
   prevIcon: PropTypes__default["default"].element,
   nextIcon: PropTypes__default["default"].element,
   closeIcon: PropTypes__default["default"].element,
+  showCloseIcon: PropTypes__default["default"].bool,
   closeSlideIcon: PropTypes__default["default"].element,
-  alignItems: PropTypes__default["default"].string,
-  mMaxHeight: PropTypes__default["default"].string,
   headerText: PropTypes__default["default"].string,
-  imageWidth: PropTypes__default["default"].string,
   headerSize: PropTypes__default["default"].string,
   headerStyle: PropTypes__default["default"].string,
+  headerIcon: PropTypes__default["default"].element,
   headerFamily: PropTypes__default["default"].string,
+  headerTextAlign: PropTypes__default["default"].string,
+  headerIconMaxWidth: PropTypes__default["default"].string,
+  headerIconMaxHeight: PropTypes__default["default"].string,
+  headerIconMarginRight: PropTypes__default["default"].string,
+  alignItems: PropTypes__default["default"].string,
+  mMaxHeight: PropTypes__default["default"].string,
+  imageWidth: PropTypes__default["default"].string,
   outsideClose: PropTypes__default["default"].bool,
   showZoomIcon: PropTypes__default["default"].bool,
   imageMargin: PropTypes__default["default"].string,
@@ -4316,19 +4622,23 @@ const TelInput = ({
       ...inpStyles,
       border: 'none',
       outline: 'none',
-      borderRadius: radius
+      borderTopRightRadius: radius,
+      borderBottomRightRadius: radius
     }
   }));
 };
 
 const TextInput = ({
+  ssn,
   value,
   radius,
-  inputChange,
+  disabled,
   maxLength,
   inpStyles,
-  disabled,
-  inpAttributes
+  inputChange,
+  inpAttributes,
+  checkLeftIcon,
+  checkRightIcon
 }) => {
   const [innerValue, setInnerValue] = React.useState('');
   const handleChange = event => {
@@ -4337,9 +4647,9 @@ const TextInput = ({
     if (maxLength && currentValue.length > maxLength) {
       currentValue = currentValue.substr(0, maxLength);
     }
-    setInnerValue(() => currentValue);
+    setInnerValue(() => ssn ? currentValue.replace(/[^a-zA-ZԱ-Ֆա-ֆА-Яа-яЁё0-9\s]/g, '') : currentValue);
     if (inputChange && currentValue !== prevValue) {
-      inputChange(currentValue);
+      inputChange(ssn ? currentValue.replace(/[^a-zA-ZԱ-Ֆա-ֆА-Яа-яЁё0-9\s]/g, '') : currentValue);
     }
   };
   React.useEffect(() => {
@@ -4350,7 +4660,7 @@ const TextInput = ({
         newValue = value.substr(0, maxLength);
       }
     }
-    setInnerValue(() => newValue);
+    setInnerValue(() => ssn ? newValue.replace(/[^a-zA-ZԱ-Ֆա-ֆА-Яа-яЁё0-9\s]/g, '') : newValue);
   }, [value]);
   return /*#__PURE__*/React__default["default"].createElement("input", {
     type: "text",
@@ -4364,7 +4674,10 @@ const TextInput = ({
       ...inpStyles,
       border: 'none',
       outline: 'none',
-      borderRadius: radius
+      borderTopLeftRadius: checkLeftIcon ? '0px' : radius,
+      borderTopRightRadius: checkRightIcon ? '0px' : radius,
+      borderBottomLeftRadius: checkLeftIcon ? '0px' : radius,
+      borderBottomRightRadius: checkRightIcon ? '0px' : radius
     }
   });
 };
@@ -4373,11 +4686,13 @@ const PassInput = ({
   show,
   value,
   radius,
-  inputChange,
+  disabled,
   maxLength,
+  inpStyles,
+  inputChange,
   inpAttributes,
-  disabled,
-  inpStyles
+  checkLeftIcon,
+  checkRightIcon
 }) => {
   const [innerShow, setInnerShow] = React.useState('');
   const [innerValue, setInnerValue] = React.useState('');
@@ -4417,7 +4732,10 @@ const PassInput = ({
       ...inpStyles,
       border: 'none',
       outline: 'none',
-      borderRadius: radius
+      borderTopLeftRadius: checkLeftIcon ? '0px' : radius,
+      borderTopRightRadius: checkRightIcon ? '0px' : radius,
+      borderBottomLeftRadius: checkLeftIcon ? '0px' : radius,
+      borderBottomRightRadius: checkRightIcon ? '0px' : radius
     }
   });
 };
@@ -4430,11 +4748,15 @@ const NumberInput = ({
   withZero,
   disabled,
   inpStyles,
+  cardNumber,
   minNumSize,
   maxNumSize,
   insideError,
   inputChange,
+  errorMessage,
+  checkLeftIcon,
   inpAttributes,
+  checkRightIcon,
   numberMaxLength,
   setInnerErrorMessage
 }) => {
@@ -4443,32 +4765,51 @@ const NumberInput = ({
   const handleChange = event => {
     let prevValue = innerValue;
     let currentValue = event.target.value.replace(/\.|․|\.|,/g, '.');
-    currentValue = handleUtilsCheckTypeNumber(currentValue, prevValue, null, float, maxNumSize, dots, innerMinNumSize, numberMaxLength);
-    setInnerValue(() => currentValue);
+    currentValue = handleUtilsCheckTypeNumber(currentValue, prevValue, null, float, maxNumSize, dots, innerMinNumSize, numberMaxLength, cardNumber);
+    setInnerValue(() => cardNumber ? currentValue.replace(/(\d{4})(?=\d)/g, '$1-') : currentValue);
     if (inputChange && currentValue !== prevValue) {
       if (currentValue < Number.MIN_SAFE_INTEGER || currentValue > Number.MAX_SAFE_INTEGER) {
-        if (currentValue === '') {
-          setInnerErrorMessage(() => '');
+        if (!cardNumber) {
+          if (currentValue === '') {
+            setInnerErrorMessage(() => '');
+          } else {
+            insideError && insideError();
+            setInnerErrorMessage(() => `Լրացված դաշտի արժեքը պետք է լինի ${Number.MIN_SAFE_INTEGER} - ${Number.MAX_SAFE_INTEGER} թվերի միջակայքում`);
+          }
         } else {
-          insideError && insideError();
-          setInnerErrorMessage(() => `Լրացված դաշտի արժեքը պետք է լինի ${Number.MIN_SAFE_INTEGER} - ${Number.MAX_SAFE_INTEGER} թվերի միջակայքում`);
+          inputChange(currentValue.replaceAll('-', ''));
+          if (errorMessage) {
+            setInnerErrorMessage(() => errorMessage);
+          } else {
+            setInnerErrorMessage(() => '');
+          }
         }
       } else if (innerMinNumSize && currentValue < innerMinNumSize || maxNumSize && currentValue > maxNumSize) {
         if (currentValue === '') {
           setInnerErrorMessage(() => '');
         } else {
-          insideError && insideError();
-          if (innerMinNumSize && !maxNumSize) {
-            setInnerErrorMessage(() => `Լրացված դաշտի արժեքը պետք է լինի ոչ պակաս ${innerMinNumSize} - ից`);
-          } else if (!innerMinNumSize && maxNumSize) {
-            setInnerErrorMessage(() => `Լրացված դաշտի արժեքը պետք է լինի ոչ մեծ ${maxNumSize} ֊ ից`);
-          } else if (innerMinNumSize && maxNumSize) {
-            setInnerErrorMessage(() => `Լրացված դաշտի արժեքը պետք է լինի ${innerMinNumSize} - ${maxNumSize} թվերի միջակայքում`);
+          if (!cardNumber) {
+            insideError && insideError();
+            if (innerMinNumSize && !maxNumSize) {
+              setInnerErrorMessage(() => `Լրացված դաշտի արժեքը պետք է լինի ոչ պակաս ${innerMinNumSize} - ից`);
+            } else if (!innerMinNumSize && maxNumSize) {
+              setInnerErrorMessage(() => `Լրացված դաշտի արժեքը պետք է լինի ոչ մեծ ${maxNumSize} ֊ ից`);
+            } else if (innerMinNumSize && maxNumSize) {
+              setInnerErrorMessage(() => `Լրացված դաշտի արժեքը պետք է լինի ${innerMinNumSize} - ${maxNumSize} թվերի միջակայքում`);
+            }
           }
         }
       } else if (currentValue >= Number.MIN_SAFE_INTEGER || currentValue <= Number.MAX_SAFE_INTEGER || innerMinNumSize && currentValue >= innerMinNumSize || maxNumSize && currentValue <= maxNumSize) {
-        inputChange(currentValue);
-        setInnerErrorMessage(() => '');
+        inputChange(cardNumber ? currentValue.replaceAll('-', '') : currentValue);
+        if (cardNumber) {
+          if (errorMessage) {
+            setInnerErrorMessage(() => errorMessage);
+          } else {
+            setInnerErrorMessage(() => '');
+          }
+        } else {
+          setInnerErrorMessage(() => '');
+        }
       }
     }
   };
@@ -4478,7 +4819,7 @@ const NumberInput = ({
       if (parseFloat(newVal) === 0) {
         inputChange('');
       } else {
-        inputChange(newVal);
+        inputChange(cardNumber ? newVal.replaceAll('-', '') : newVal);
       }
     }
   };
@@ -4496,10 +4837,11 @@ const NumberInput = ({
   React.useEffect(() => {
     let newValue = '';
     if (value !== undefined && value !== null) {
-      newValue = handleUtilsCheckTypeNumber(value, newValue, null, float, maxNumSize, dots, innerMinNumSize, numberMaxLength);
+      newValue = handleUtilsCheckTypeNumber(value, newValue, null, float, maxNumSize, dots, innerMinNumSize, numberMaxLength, cardNumber);
     }
-    setInnerValue(() => newValue);
-  }, [dots, value, float, maxNumSize, minNumSize, numberMaxLength]);
+    setInnerValue(() => cardNumber ? newValue.replace(/(\d{4})(?=\d)/g, '$1-') : newValue);
+    // inputChange(cardNumber ? newValue.replaceAll('-', '') : newValue);
+  }, [dots, value, float, cardNumber, maxNumSize, minNumSize, numberMaxLength]);
   return /*#__PURE__*/React__default["default"].createElement("input", {
     type: "text",
     value: innerValue,
@@ -4511,7 +4853,10 @@ const NumberInput = ({
       ...inpStyles,
       border: 'none',
       outline: 'none',
-      borderRadius: radius
+      borderTopLeftRadius: checkLeftIcon ? '0px' : radius,
+      borderTopRightRadius: checkRightIcon ? '0px' : radius,
+      borderBottomLeftRadius: checkLeftIcon ? '0px' : radius,
+      borderBottomRightRadius: checkRightIcon ? '0px' : radius
     },
     min: minNumSize,
     max: maxNumSize,
@@ -4520,9 +4865,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$a = ".input-module_input-wrap__NunrE{position:relative;width:100%}.input-module_input-content__kP7lZ{appearance:none!important;-webkit-appearance:none!important;display:flex;width:100%}input:-webkit-autofill,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover{background-color:inherit!important}input::-ms-clear,input::-ms-reveal{display:none}.input-module_error-message-show__OrVSo{animation-fill-mode:forwards;animation-name:input-module_error-show__9MP6k}.input-module_inp-num__vH7HL::-webkit-inner-spin-button,.input-module_inp-num__vH7HL::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input-module_inp-num__vH7HL[type=number]{-moz-appearance:textfield}@keyframes input-module_error-show__9MP6k{to{bottom:-20px;transform:scaleX(1);-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);-o-transform:scaleX(1)}}";
+var styles$8 = {"input-wrap":"input-module_input-wrap__NunrE","input-content":"input-module_input-content__kP7lZ","error-message-show":"input-module_error-message-show__OrVSo","error-show":"input-module_error-show__9MP6k","inp-num":"input-module_inp-num__vH7HL"};
+styleInject(css_248z$a);
 
 const InputTypes = {
   TEL: 'tel',
@@ -4530,10 +4875,15 @@ const InputTypes = {
   NUMBER: 'number',
   PASSWORD: 'password'
 };
+const IconSides = {
+  LEFT: 'left',
+  RIGHT: 'right'
+};
 const P = styled__default["default"].span`
     animation: ${true};
 `;
 const Input = ({
+  ssn,
   size,
   name,
   style,
@@ -4552,6 +4902,8 @@ const Input = ({
   leftIcon,
   required,
   disabled,
+  errorDots,
+  errorIcon,
   labelDots,
   iconWidth,
   rightIcon,
@@ -4562,6 +4914,7 @@ const Input = ({
   errorSize,
   labelSize,
   maxLength,
+  labelIcon,
   labelStyle,
   floatToFix,
   minNumSize,
@@ -4570,6 +4923,9 @@ const Input = ({
   errorColor,
   withoutDot,
   errorStyle,
+  iconPadding,
+  labelAction,
+  errorAction,
   placeholder,
   errorZindex,
   labelWeight,
@@ -4579,15 +4935,22 @@ const Input = ({
   errorMessage,
   autoComplete,
   labelDisplay,
+  labelIconSide,
+  showLabelIcon,
+  errorIconSide,
+  showErrorIcon,
   errorMarginTop,
+  errorBoxShadow,
   boxShadowHover,
   errorClassName,
+  labelIconMargin,
   labelFontFamily,
   phoneAlignItems,
   errorLineHeight,
   labelLineHeight,
   numberMaxLength,
   backgroundColor,
+  errorIconMargin,
   withZero = false,
   labelMarginBottom,
   regexpErrorMessage,
@@ -4598,6 +4961,7 @@ const Input = ({
   fireInputInsideError,
   backgroundDisableColor,
   telBorderRightColorHover,
+  cardNumber,
   type = 'text'
 }) => {
   const [show, setShow] = React.useState(false);
@@ -4605,7 +4969,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',
@@ -4625,19 +4993,22 @@ const Input = ({
     iName: name ? name : `tui_${uuid}_tui`,
     autoComplete: autoComplete ?? configStyles.INPUT.autoComplete
   };
-  const errorShow = styled.keyframes`
-        100% {
-            bottom: '-20px';
-            transform: scale3d(1,1,1);
-            -webkit-transform: scale3d(1,1,1);
-            -moz-transform: scale3d(1,1,1);
-            -ms-transform: scale3d(1,1,1);
-            -o-transform: scale3d(1,1,1);
-        }
-    `;
-  const animation = () => styled.css`
-        ${errorShow} 240ms forwards
-    `;
+
+  // const errorShow = keyframes`
+  //     100% {
+  //         bottom: '-20px';
+  //         transform: scale3d(1,1,1);
+  //         -webkit-transform: scale3d(1,1,1);
+  //         -moz-transform: scale3d(1,1,1);
+  //         -ms-transform: scale3d(1,1,1);
+  //         -o-transform: scale3d(1,1,1);
+  //     }
+  // `
+
+  // const animation = () => css`
+  //     ${errorShow} 240ms forwards
+  // `
+
   const handleMouseEnter = () => {
     setIsHover(true);
   };
@@ -4662,11 +5033,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
@@ -4694,12 +5081,32 @@ const Input = ({
       textOverflow: (labelDots ? labelDots : configStyles.INPUT.label.dots) ? 'ellipsis' : ''
     },
     title: label
-  }, 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']}`,
+  }, 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,
-      boxShadow: innerErrorMessage ? errorColor ? `0 0 0 2px ${errorColor}` : `0 0 0 2px ${configStyles.INPUT.error.color}` : isHover && !disabled ? boxShadowHover ? boxShadowHover : configStyles.INPUT.box.shadowHover : boxShadow ? boxShadow : configStyles.INPUT.box.shadow
+      boxShadow: innerErrorMessage ? errorBoxShadow ? errorBoxShadow : configStyles.INPUT.error.box.shadow : isHover && !disabled ? boxShadowHover ? boxShadowHover : configStyles.INPUT.box.shadowHover : boxShadow ? boxShadow : configStyles.INPUT.box.shadow
     },
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave
@@ -4711,9 +5118,9 @@ const Input = ({
       justifyContent: 'center',
       cursor: type === 'password' ? 'pointer' : 'default',
       height: height ?? configStyles.INPUT.height,
-      padding: padding ?? configStyles.INPUT.padding,
       width: iconWidth ?? configStyles.INPUT.iconWidth,
       boxSizing: boxSizing ?? configStyles.INPUT.box.sizing,
+      padding: iconPadding ?? configStyles.INPUT.iconPadding,
       borderTopLeftRadius: radius ?? configStyles.INPUT.radius,
       borderBottomLeftRadius: radius ?? configStyles.INPUT.radius,
       backgroundColor: disabled ? backgroundDisableColor ? backgroundDisableColor : configStyles.INPUT.colors.backgroundDisable : backgroundColor ? backgroundColor : configStyles.INPUT.colors.background
@@ -4742,13 +5149,17 @@ const Input = ({
     withZero: withZero,
     inputChange: change,
     inpStyles: inpStyles,
+    cardNumber: cardNumber,
+    errorMessage: errorMessage,
     inpAttributes: inpAttributes,
     numberMaxLength: numberMaxLength,
     insideError: fireInputInsideError,
     minNumSize: minNumSize ? minNumSize : '',
     maxNumSize: maxNumSize ? maxNumSize : '',
     setInnerErrorMessage: setInnerErrorMessage,
-    radius: radius ?? configStyles.INPUT.radius
+    radius: radius ?? configStyles.INPUT.radius,
+    checkLeftIcon: leftIcon && leftIcon.length > 0 ? true : false,
+    checkRightIcon: rightIcon && rightIcon.length > 0 ? true : false
   }) : type === 'password' ? /*#__PURE__*/React__default["default"].createElement(PassInput, {
     show: show,
     type: type,
@@ -4758,15 +5169,20 @@ const Input = ({
     inpStyles: inpStyles,
     inpAttributes: inpAttributes,
     radius: radius ?? configStyles.INPUT.radius,
-    maxLength: maxLength ?? configStyles.INPUT.maxLength
+    maxLength: maxLength ?? configStyles.INPUT.maxLength,
+    checkLeftIcon: leftIcon && leftIcon.length > 0 ? true : false,
+    checkRightIcon: rightIcon && rightIcon.length > 0 ? true : false
   }) : /*#__PURE__*/React__default["default"].createElement(TextInput, {
+    ssn: ssn,
     value: innerValue,
     disabled: disabled,
     inputChange: change,
     inpStyles: inpStyles,
     inpAttributes: inpAttributes,
     radius: radius ?? configStyles.INPUT.radius,
-    maxLength: maxLength ?? configStyles.INPUT.maxLength
+    maxLength: maxLength ?? configStyles.INPUT.maxLength,
+    checkLeftIcon: leftIcon && leftIcon.length > 0 ? true : false,
+    checkRightIcon: rightIcon && rightIcon.length > 0 ? true : false
   }), rightIcon && rightIcon.length > 0 ? /*#__PURE__*/React__default["default"].createElement("div", {
     onClick: type === 'password' ? handleShowPass : _ => _,
     style: {
@@ -4775,41 +5191,72 @@ const Input = ({
       justifyContent: 'center',
       cursor: type === 'password' ? 'pointer' : 'default',
       height: height ?? configStyles.INPUT.height,
-      padding: padding ?? configStyles.INPUT.padding,
       width: iconWidth ?? configStyles.INPUT.iconWidth,
       boxSizing: boxSizing ?? configStyles.INPUT.box.sizing,
+      padding: iconPadding ?? configStyles.INPUT.iconPadding,
       borderTopRightRadius: radius ?? configStyles.INPUT.radius,
       borderBottomRightRadius: radius ?? configStyles.INPUT.radius,
       backgroundColor: disabled ? backgroundDisableColor ? backgroundDisableColor : configStyles.INPUT.colors.backgroundDisable : backgroundColor ? backgroundColor : configStyles.INPUT.colors.background
     }
-  }, type === 'password' ? show ? rightIcon[1] : rightIcon[0] : rightIcon[0]) : ''), tooltip ? tooltip : '', innerErrorMessage ? /*#__PURE__*/React__default["default"].createElement(P, {
-    animation: animation,
+  }, type === 'password' ? show ? rightIcon[1] : rightIcon[0] : rightIcon[0]) : ''), tooltip ? tooltip : '', innerErrorMessage ? /*#__PURE__*/React__default["default"].createElement(P
+  // 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 = {
+  ssn: PropTypes__default["default"].bool,
   size: PropTypes__default["default"].string,
   name: PropTypes__default["default"].string,
   change: PropTypes__default["default"].func,
   style: PropTypes__default["default"].string,
   color: PropTypes__default["default"].string,
   width: PropTypes__default["default"].string,
-  label: PropTypes__default["default"].string,
   withZero: PropTypes__default["default"].bool,
   weight: PropTypes__default["default"].string,
   family: PropTypes__default["default"].string,
@@ -4818,45 +5265,59 @@ Input.propTypes = {
   height: PropTypes__default["default"].string,
   radius: PropTypes__default["default"].string,
   padding: PropTypes__default["default"].string,
-  labelDots: PropTypes__default["default"].bool,
+  cardNumber: PropTypes__default["default"].bool,
   tooltip: PropTypes__default["default"].element,
   withoutDot: PropTypes__default["default"].bool,
   className: PropTypes__default["default"].string,
   iconWidth: PropTypes__default["default"].string,
-  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,
+  iconPadding: PropTypes__default["default"].string,
   maxLength: PropTypes__default["default"].number,
   floatToFix: PropTypes__default["default"].number,
   minNumSize: PropTypes__default["default"].number,
   maxNumSize: PropTypes__default["default"].number,
-  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,
+  boxSizing: PropTypes__default["default"].string,
+  boxShadow: PropTypes__default["default"].string,
+  errorBoxShadow: PropTypes__default["default"].string,
+  boxShadowHover: PropTypes__default["default"].string,
+  phoneAlignItems: PropTypes__default["default"].string,
   numberMaxLength: PropTypes__default["default"].number,
-  labelMarginBottom: PropTypes__default["default"].string,
   regexpErrorMessage: PropTypes__default["default"].string,
   regexp: PropTypes__default["default"].instanceOf(RegExp),
   fireInputInsideError: PropTypes__default["default"].func,
@@ -4864,6 +5325,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),
@@ -4889,10 +5351,12 @@ const Radio = ({
   borderStyle,
   labelFontSize,
   labelFontStyle,
+  labelActiveColor,
   labelFontFamily,
   labelFontWeight,
   labelLineHeight,
   radioMarginRight,
+  borderHoverColor,
   borderActiveColor,
   radioItemMarginRight,
   radioItemMarginBottom,
@@ -4911,22 +5375,14 @@ const Radio = ({
   });
   const handleMouseEnter = (id, elemID) => {
     const elem = document.querySelector(`#${elemID}`);
-    // const newStyles = {
-    //     backgroundColor:
-    //     id === innerSelectedData?.id
-    //         ? borderActiveColor
-    //             ? borderActiveColor
-    //             : configStyles.RADIO.border.activeColor
-    //         : borderColor
-    //           ? borderColor
-    //           : configStyles.RADIO.border.color
-    // }
-    // handleUtilsMouseEnterLeave(e, newStyles);
-
-    elem.style.backgroundColor = id === innerSelectedData?.id ? borderActiveColor ? borderActiveColor : configStyles.RADIO.border.activeColor : borderColor ? borderColor : configStyles.RADIO.border.color;
+    const borderStyle = elem.parentElement;
+    borderStyle.style.borderColor = id === innerSelectedData?.id ? borderActiveColor ? borderActiveColor : configStyles.RADIO.border.activeColor : borderHoverColor ? borderHoverColor : configStyles.RADIO.border.hoverColor;
+    elem.style.backgroundColor = id === innerSelectedData?.id ? borderActiveColor ? borderActiveColor : configStyles.RADIO.border.activeColor : borderHoverColor ? borderHoverColor : configStyles.RADIO.border.hoverColor;
   };
   const handleMouseLeave = (id, elemID) => {
     const elem = document.querySelector(`#${elemID}`);
+    const borderStyle = elem.parentElement;
+    borderStyle.style.borderColor = id === innerSelectedData?.id ? borderActiveColor ? borderActiveColor : configStyles.RADIO.border.activeColor : borderColor ? borderColor : configStyles.RADIO.border.color;
     elem.style.backgroundColor = id === innerSelectedData?.id ? borderActiveColor ? borderActiveColor : configStyles.RADIO.border.activeColor : 'transparent';
   };
   const handleChecked = selItem => {
@@ -5033,15 +5489,13 @@ const Radio = ({
       }
     })), item[innerKeyNames.label] ? /*#__PURE__*/React__default["default"].createElement("span", {
       style: {
-        color: labelColor ?? configStyles.RADIO.label.color,
+        color: item[innerKeyNames.id] === innerSelectedData.id ? labelActiveColor ?? configStyles.RADIO.label.activeColor : labelColor ?? configStyles.RADIO.label.color,
         fontSize: labelFontSize ?? configStyles.RADIO.label.font.size,
         fontStyle: labelFontStyle ?? configStyles.RADIO.label.font.style,
         fontFamily: labelFontFamily ?? configStyles.RADIO.label.font.family,
         fontWeight: labelFontWeight ?? configStyles.RADIO.label.font.weight,
         lineHeight: labelLineHeight ?? configStyles.RADIO.label.lineHeight
-      },
-      onMouseEnter: () => handleMouseEnter(item[innerKeyNames.id], elemId),
-      onMouseLeave: () => handleMouseLeave(item[innerKeyNames.id], elemId)
+      }
     }, item[innerKeyNames.label]) : '');
   }));
 };
@@ -5056,11 +5510,13 @@ Radio.propTypes = {
   borderStyle: PropTypes__default["default"].string,
   labelFontSize: PropTypes__default["default"].string,
   labelFontStyle: PropTypes__default["default"].string,
+  labelActiveColor: PropTypes__default["default"].string,
   labelFontFamily: PropTypes__default["default"].string,
   labelFontWeight: PropTypes__default["default"].string,
   labelLineHeight: PropTypes__default["default"].string,
   radioMarginRight: PropTypes__default["default"].string,
   getData: PropTypes__default["default"].func.isRequired,
+  borderHoverColor: PropTypes__default["default"].string,
   borderActiveColor: PropTypes__default["default"].string,
   radioItemMarginRight: PropTypes__default["default"].string,
   radioItemMarginBottom: PropTypes__default["default"].string,
@@ -5087,12 +5543,13 @@ 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$9 = ".select-module_select-content__GCMDX{-webkit-appearance:none;display:flex;flex-direction:column;position:relative}.select-module_select-content-top__Aw-fB{align-items:center;-webkit-appearance:none;display:flex;flex-direction:row;flex-wrap:nowrap}.select-module_select-content-bottom__ueZCR{animation:select-module_select-show__391hQ .64s linear forwards;-webkit-animation:select-module_select-show__391hQ .64s linear forwards;left:0;max-height:0;overflow:hidden;position:absolute;width:100%;z-index:99999999999}.select-module_select-content-bottom-inner__NWy2X{display:flex;flex-direction:column;max-height:234px;overflow-x:hidden;overflow-y:auto}.select-module_select-content-top-icon__MBrGK{align-items:center;box-sizing:border-box;display:flex;flex:0 0 auto}.select-module_select-content-top-icon__MBrGK>div{align-items:center;display:flex;height:fit-content;justify-content:center;max-height:30px;max-width:30px;min-height:14px;min-width:14px;width:fit-content}.select-module_close-icon__SFNaJ{border-right:1px solid #eee;box-sizing:content-box;padding-right:9px}.select-module_arrow-icon__rjHt-{margin-left:9px;transform-origin:center;transition:all .64s ease;-webkit-transition:all .64s ease;-moz-transition:all .64s ease;-ms-transition:all .64s ease;-o-transition:all .64s ease}.select-module_select-content-bottom-row__eKq5L{align-items:center;display:flex;transition:background-color .24s,color .24s;-webkit-transition:background-color .24s,color .24s;-moz-transition:background-color .24s,color .24s;-ms-transition:background-color .24s,color .24s;-o-transition:background-color .24s,color .24s}.select-module_select-content-bottom-row__eKq5L:last-child{margin-bottom:0}.select-module_ellipsis__uNgol{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@keyframes select-module_select-show__391hQ{to{max-height:234px}}";
+var styles$7 = {"select-content":"select-module_select-content__GCMDX","select-content-top":"select-module_select-content-top__Aw-fB","select-content-bottom":"select-module_select-content-bottom__ueZCR","select-show":"select-module_select-show__391hQ","select-content-bottom-inner":"select-module_select-content-bottom-inner__NWy2X","select-content-top-icon":"select-module_select-content-top-icon__MBrGK","close-icon":"select-module_close-icon__SFNaJ","arrow-icon":"select-module_arrow-icon__rjHt-","select-content-bottom-row":"select-module_select-content-bottom-row__eKq5L","ellipsis":"select-module_ellipsis__uNgol"};
+styleInject(css_248z$9);
 
 const Select = ({
   dots,
+  lang,
   options,
   multiple,
   disabled,
@@ -5106,6 +5563,7 @@ const Select = ({
   closeIcon,
   errorZindex,
   errorMessage,
+  arrowNoRotate,
   showCloseIcon,
   defaultOption,
   multipleCheckbox,
@@ -5146,6 +5604,8 @@ const Select = ({
   optionItemCursor,
   optionItemPadding,
   optionItemFontSize,
+  optionItemFontStyle,
+  optionItemFontFamily,
   optionItemMinHeight,
   optionItemBoxSizing,
   optionItemFontWeight,
@@ -5155,7 +5615,8 @@ const Select = ({
   optionItemBackgroudColor,
   optionItemBackgroudColorHover,
   boxShadow,
-  boxShadowHover
+  boxShadowHover,
+  insidePagination
 }) => {
   const ref = React.useRef();
   const [opened, setOpened] = React.useState(false);
@@ -5301,12 +5762,12 @@ 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", {
+    className: `${styles$7['select-content-top']}`,
     style: {
       cursor: disabled ? 'not-allowed' : cursor ? cursor : configStyles.SELECT.selected.cursor,
       minHeight: selectedMinHeight ?? configStyles.SELECT.selected.minHeight,
-      padding: selectedPadding ?? configStyles.SELECT.selected.padding,
       borderRadius: selectedRadius ?? configStyles.SELECT.selected.radius,
       fontSize: selectedFontSize ?? configStyles.SELECT.selected.font.size,
       fontStyle: selectedFontStyle ?? configStyles.SELECT.selected.font.style,
@@ -5315,19 +5776,20 @@ const Select = ({
       fontWeight: selectedFontWeight ?? configStyles.SELECT.selected.font.weight,
       lineHeight: selectedLineHeight ?? configStyles.SELECT.selected.lineHeight,
       transition: selectedTransition ?? configStyles.SELECT.selected.transition,
+      padding: insidePagination ? '0px 2px' : selectedPadding ?? configStyles.SELECT.selected.padding,
+      justifyContent: insidePagination ? 'center' : 'space-between',
       backgroundColor: disabled ? selectedDisableBackgroundColor ? selectedDisableBackgroundColor : configStyles.SELECT.selected.colors.backgroundDisable : selectedBackgroundColor ? selectedBackgroundColor : configStyles.SELECT.selected.colors.background,
       boxShadow: errorMessage ? errorColor ? `0 0 0 2px ${errorColor}` : configStyles.SELECT.error.box.shadow : isHover ? boxShadowHover ? boxShadowHover : configStyles.SELECT.box.shadowHover : boxShadow ? boxShadow : configStyles.SELECT.box.shadow
     },
     onClick: disabled ? _ => _ : () => handleOpenClose(),
     onMouseEnter: disabled ? _ => _ : () => handleMouseEnter(),
-    onMouseLeave: disabled ? _ => _ : () => handleMouseLeave(),
-    className: `${styles$6['select-content-top']}`
+    onMouseLeave: disabled ? _ => _ : () => handleMouseLeave()
   }, /*#__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',
-      textOverflow: 'ellipsis',
+      overflow: insidePagination ? 'visible' : 'hidden',
+      textOverflow: insidePagination ? 'initial' : 'ellipsis',
       color: isHover ? selectedHoverColor ? selectedHoverColor : configStyles.SELECT.selected.colors.hover : selectedColor ? selectedColor : configStyles.SELECT.selected.color
     }
   }, !multiple && newSelected && newSelected[0] && newSelected[0][keyNames.name] ? newSelected[0][keyNames.name] : newSelected && newSelected.length > 0 ? newSelected.map((_, index) => {
@@ -5339,18 +5801,22 @@ const Select = ({
       }
     }
   }) : defaultOption ? defaultOption : ''), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${styles$6['select-content-top-icon']}`
+    className: `${styles$7['select-content-top-icon']}`,
+    style: {
+      padding: lang ? '0px' : insidePagination ? '0px 5px' : '0 5px 0 20px'
+    }
   }, !disabled && multiple && newSelected.length > 1 && /*#__PURE__*/React__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'
     }
   }, closeIcon ? closeIcon : configStyles.SELECT.closeIcon ? configStyles.SELECT.closeIcon : /*#__PURE__*/React__default["default"].createElement(SvgCloseIcon, null)), !disabled ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${styles$7['arrow-icon']}`,
     style: {
-      transform: opened ? 'rotate(180deg)' : 'rotate(0deg)'
-    },
-    className: `${styles$6['arrow-icon']}`
+      marginLeft: lang ? '0px' : '9px',
+      transform: arrowNoRotate || configStyles.SELECT.arrowNoRotate ? 'rotate(0deg)' : opened ? 'rotate(180deg)' : 'rotate(0deg)'
+    }
   }, arrowIcon ? arrowIcon : configStyles.SELECT.arrowIcon ? configStyles.SELECT.arrowIcon : /*#__PURE__*/React__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,
@@ -5358,9 +5824,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,
@@ -5369,19 +5835,22 @@ 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,
         cursor: optionItemCursor ?? configStyles.SELECT.options.item.cursor,
         padding: optionItemPadding ?? configStyles.SELECT.options.item.padding,
         fontSize: optionItemFontSize ?? configStyles.SELECT.options.item.font.size,
+        fontStyle: optionItemFontStyle ?? configStyles.SELECT.options.item.font.style,
+        fontFamily: optionItemFontFamily ?? configStyles.SELECT.options.item.font.family,
         boxSizing: optionItemBoxSizing ?? configStyles.SELECT.options.item.box.sizing,
         minHeight: optionItemMinHeight ?? configStyles.SELECT.options.item.minHeight,
         fontWeight: optionItemFontWeight ?? configStyles.SELECT.options.item.font.weight,
         lineHeight: dots || configStyles.SELECT.dots ? '46px' : optionItemLineHeight ? optionItemLineHeight : configStyles.SELECT.options.item.lineHeight,
         marginBottom: optionItemMarginBottom ?? configStyles.SELECT.options.item.marginBottom,
-        backgroundColor: optionItemBackgroudColor ?? configStyles.SELECT.options.item.colors.backgroud
+        backgroundColor: optionItemBackgroudColor ?? configStyles.SELECT.options.item.colors.backgroud,
+        justifyContent: lang ? 'center' : 'flex-start'
       }
     }, multiple && multipleCheckbox ? /*#__PURE__*/React__default["default"].createElement(SingleCheckbox, {
       checked: option.checked
@@ -5401,6 +5870,7 @@ const Select = ({
 };
 Select.propTypes = {
   dots: PropTypes__default["default"].bool,
+  lang: PropTypes__default["default"].bool,
   options: PropTypes__default["default"].array,
   multiple: PropTypes__default["default"].bool,
   onChange: PropTypes__default["default"].func,
@@ -5412,6 +5882,7 @@ Select.propTypes = {
   className: PropTypes__default["default"].string,
   arrowIcon: PropTypes__default["default"].element,
   closeIcon: PropTypes__default["default"].element,
+  arrowNoRotate: PropTypes__default["default"].bool,
   showCloseIcon: PropTypes__default["default"].bool,
   errorZindex: PropTypes__default["default"].number,
   errorMessage: PropTypes__default["default"].string,
@@ -5451,6 +5922,8 @@ Select.propTypes = {
   optionItemCursor: PropTypes__default["default"].string,
   optionItemPadding: PropTypes__default["default"].string,
   optionItemFontSize: PropTypes__default["default"].string,
+  optionItemFontStyle: PropTypes__default["default"].string,
+  optionItemFontFamily: PropTypes__default["default"].string,
   optionItemMinHeight: PropTypes__default["default"].string,
   optionItemBoxSizing: PropTypes__default["default"].string,
   optionItemFontWeight: PropTypes__default["default"].string,
@@ -5460,7 +5933,8 @@ Select.propTypes = {
   optionItemBackgroudColor: PropTypes__default["default"].string,
   optionItemBackgroudColorHover: PropTypes__default["default"].string,
   boxShadow: PropTypes__default["default"].string,
-  boxShadowHover: PropTypes__default["default"].string
+  boxShadowHover: PropTypes__default["default"].string,
+  insidePagination: PropTypes__default["default"].bool
 };
 
 const SvgToasterInfo = ({
@@ -5582,11 +6056,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$8 = "#toaster-module_top-left__q0LcN{left:0;top:1em}#toaster-module_top-right__f-AFL{right:0;top:1em}#toaster-module_top-center__eVRbc{left:50%;top:1em;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%)}#toaster-module_bottom-left__b-YHI{bottom:1em;left:0}#toaster-module_bottom-right__g9ACP{bottom:1em;right:0}#toaster-module_bottom-center__4KcFe{bottom:1em;left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%)}.toaster-module_top-left__q0LcN{left:0;top:1em}.toaster-module_top-right__f-AFL{right:0;top:1em}.toaster-module_top-center__eVRbc{left:50%;top:1em;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%)}.toaster-module_bottom-left__b-YHI{bottom:1em;left:0}.toaster-module_bottom-right__g9ACP{bottom:1em;right:0}.toaster-module_bottom-center__4KcFe{bottom:1em;left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%)}.toaster-module_notify-block__pRnEB{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.toaster-module_bounce-in-right__shR2D{-webkit-animation-name:toaster-module_bounceInRight__rSk5p;animation-name:toaster-module_bounceInRight__rSk5p}.toaster-module_bounce-out-right__48pyA{-webkit-animation-name:toaster-module_bounceOutRight__bmFGS;animation-name:toaster-module_bounceOutRight__bmFGS}.toaster-module_notify-desc__bcWe2,.toaster-module_notify-title__8lFLy{overflow:hidden;text-overflow:ellipsis}.toaster-module_notify-desc__bcWe2{-webkit-box-orient:vertical;-webkit-line-clamp:2;display:-webkit-box}@keyframes toaster-module_bounceInRight__rSk5p{0%{opacity:0;right:-100%}60%{opacity:1;right:40px}75%{right:0}90%{right:30px}to{right:20px}}@keyframes toaster-module_bounceOutRight__bmFGS{0%{opacity:1;right:20px}60%{opacity:1;right:60px}to{opacity:0;right:-100%}}.toaster-module_bounce-in-left__xoF-M{-webkit-animation-name:toaster-module_bounceInLeft__to59v;animation-name:toaster-module_bounceInLeft__to59v}.toaster-module_bounce-out-left__fDOZw{-webkit-animation-name:toaster-module_bounceOutLeft__k5QgO;animation-name:toaster-module_bounceOutLeft__k5QgO}@keyframes toaster-module_bounceInLeft__to59v{0%{left:-100%;opacity:0}60%{left:40px;opacity:1}75%{left:0}90%{left:30px}to{left:20px}}@keyframes toaster-module_bounceInLeftMobile__CA2dc{0%{left:-100%;opacity:0}60%{left:40px;opacity:1}75%{left:0}90%{left:30px}to{left:0}}@keyframes toaster-module_bounceOutLeft__k5QgO{0%{left:20px;opacity:1}60%{left:60px;opacity:1}to{left:-100%;opacity:0}}@media(max-width:480px){.toaster-module_bounce-in-left__xoF-M{-webkit-animation-name:toaster-module_bounceInLeftMobile__CA2dc;animation-name:toaster-module_bounceInLeftMobile__CA2dc}}";
+var styles$6 = {"top-left":"toaster-module_top-left__q0LcN","top-right":"toaster-module_top-right__f-AFL","top-center":"toaster-module_top-center__eVRbc","bottom-left":"toaster-module_bottom-left__b-YHI","bottom-right":"toaster-module_bottom-right__g9ACP","bottom-center":"toaster-module_bottom-center__4KcFe","notify-block":"toaster-module_notify-block__pRnEB","bounce-in-right":"toaster-module_bounce-in-right__shR2D","bounceInRight":"toaster-module_bounceInRight__rSk5p","bounce-out-right":"toaster-module_bounce-out-right__48pyA","bounceOutRight":"toaster-module_bounceOutRight__bmFGS","notify-title":"toaster-module_notify-title__8lFLy","notify-desc":"toaster-module_notify-desc__bcWe2","bounce-in-left":"toaster-module_bounce-in-left__xoF-M","bounceInLeft":"toaster-module_bounceInLeft__to59v","bounce-out-left":"toaster-module_bounce-out-left__fDOZw","bounceOutLeft":"toaster-module_bounceOutLeft__k5QgO","bounceInLeftMobile":"toaster-module_bounceInLeftMobile__CA2dc"};
+styleInject(css_248z$8);
 
-let wWidth$1 = window.innerWidth;
 const ToasterType = {
   info: 'info',
   warn: 'warn',
@@ -5603,16 +6076,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 => {
@@ -5641,63 +6119,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,
@@ -5710,7 +6236,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;
@@ -5726,15 +6251,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');
@@ -5742,42 +6318,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({
@@ -5785,16 +6352,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({
@@ -5802,16 +6368,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({
@@ -5819,16 +6384,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({
@@ -5836,16 +6400,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) {
@@ -5862,12 +6422,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
@@ -5879,7 +6435,6 @@ const Toaster = ({
   }, []);
   return configStyles.TOASTER && /*#__PURE__*/React__default["default"].createElement("div", {
     onClick: handleToasterClick,
-    className: classProps,
     id: "toastify"
   });
 };
@@ -5903,10 +6458,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$7 = ".tooltip-module_tooltip-block__v8U9u{align-items:center;display:flex;justify-content:center;position:relative}.tooltip-module_tooltip__emM6A{box-sizing:border-box;padding:10px;position:absolute;z-index:1}.tooltip-module_tooltip-rel__to9gq{align-items:center;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;display:flex;height:auto;justify-content:center;min-height:10px;min-width:30px;position:relative;width:auto}.tooltip-module_tooltip-decor__qvt7t{border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;height:10px;position:absolute;transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);width:10px;z-index:-1}";
+var styles$5 = {"tooltip-block":"tooltip-module_tooltip-block__v8U9u","tooltip":"tooltip-module_tooltip__emM6A","tooltip-rel":"tooltip-module_tooltip-rel__to9gq","tooltip-decor":"tooltip-module_tooltip-decor__qvt7t"};
+styleInject(css_248z$7);
 
+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,
@@ -5914,6 +6483,7 @@ const Tooltip = ({
   height,
   radius,
   fontSize,
+  hoverOpen,
   className,
   fontStyle,
   fontFamily,
@@ -5923,16 +6493,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) {
@@ -5941,12 +6523,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
@@ -5957,31 +6559,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: {
@@ -5992,18 +6596,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,
@@ -6014,7 +6622,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 = ({
@@ -6055,9 +6664,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$6 = ".captcha-module_start-point__LkOqy:after{background-color:#d1d1d1;border:2px solid #fff;border-radius:6px;-webkit-border-radius:6px;-moz-border-radius:6px;-ms-border-radius:6px;-o-border-radius:6px;content:\"\";height:10px;left:0;position:absolute;top:7.5px;width:10px;z-index:-1}.captcha-module_range__k24I2{-webkit-appearance:none;margin:0}.captcha-module_range__k24I2::-webkit-slider-runnable-track{-webkit-appearance:none;width:100%}.captcha-module_range-default__-O0QD::-webkit-slider-thumb{background-image:url(../../assets/range-arrow-default.svg)}.captcha-module_range-default__-O0QD::-webkit-slider-thumb,.captcha-module_range-error__FKMfG::-webkit-slider-thumb{-webkit-appearance:none;background-position:-5px;background-repeat:no-repeat;background-size:46px 46px;border-radius:17px;-webkit-border-radius:17px;-moz-border-radius:17px;-ms-border-radius:17px;-o-border-radius:17px;cursor:ew-resize;height:34px;width:34px}.captcha-module_range-error__FKMfG::-webkit-slider-thumb{background-image:url(../../assets/range-arrow-error.svg)}.captcha-module_range-success__VzLPq::-webkit-slider-thumb{-webkit-appearance:none;background-image:url(../../assets/range-arrow-success.svg);background-position:-5px;background-repeat:no-repeat;background-size:46px 46px;border-radius:17px;-webkit-border-radius:17px;-moz-border-radius:17px;-ms-border-radius:17px;-o-border-radius:17px;cursor:ew-resize;height:34px;width:34px}";
+var styles$4 = {"start-point":"captcha-module_start-point__LkOqy","range":"captcha-module_range__k24I2","range-default":"captcha-module_range-default__-O0QD","range-error":"captcha-module_range-error__FKMfG","range-success":"captcha-module_range-success__VzLPq"};
+styleInject(css_248z$6);
 
 const Captcha = ({
   color,
@@ -6145,7 +6754,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',
@@ -6171,8 +6780,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", {
@@ -6202,9 +6811,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$5 = ".stepper-module_stepper-container__-OVGy>div:last-child:before{display:none}.stepper-module_activeRing__Lzvh1,.stepper-module_bigRing__5GBm0{border-radius:50%;height:36px;margin-bottom:36px;position:relative;width:36px}.stepper-module_bigRing__5GBm0{box-shadow:0 0 0 2px #d1d1d1}.stepper-module_bigRing__5GBm0:before{background:#d1d1d1}.stepper-module_activeRing__Lzvh1{box-shadow:0 0 0 2px #00236a}.stepper-module_activeRing__Lzvh1:before{background:#00236a}.stepper-module_activeRing__Lzvh1:before,.stepper-module_bigRing__5GBm0:before{border-radius:20px;bottom:-32px;content:\"\";height:28px;left:0;margin:auto;overflow:hidden;position:absolute;right:0;width:2px}.stepper-module_smallActiveRing__im-XG,.stepper-module_smallRing__u-5a8{border-radius:50%;bottom:0;left:0;margin:auto;position:absolute;right:0;top:0}.stepper-module_smallRing__u-5a8{background-color:#d1d1d1;height:14px;width:14px}.stepper-module_smallActiveRing__im-XG{align-items:center;background-color:#00236a;color:#fff;display:flex;height:28px;justify-content:center;width:28px}";
+var styles$3 = {"stepper-container":"stepper-module_stepper-container__-OVGy","bigRing":"stepper-module_bigRing__5GBm0","activeRing":"stepper-module_activeRing__Lzvh1","smallRing":"stepper-module_smallRing__u-5a8","smallActiveRing":"stepper-module_smallActiveRing__im-XG"};
+styleInject(css_248z$5);
 
 const Stepper = ({
   stepLength,
@@ -6214,11 +6823,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
@@ -6234,10 +6843,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;
@@ -6367,8 +6976,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$4 = "textarea{-webkit-appearance:none}textarea::-webkit-scrollbar{width:6px}textarea::-webkit-scrollbar-track{background:#eee}textarea::-webkit-scrollbar-thumb,textarea::-webkit-scrollbar-track{border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px}textarea::-webkit-scrollbar-thumb{background:#d1d1d1}";
+styleInject(css_248z$4);
 
 const PositionSide = {
   TOP: 'top',
@@ -6376,6 +6985,7 @@ const PositionSide = {
 };
 const Textarea = ({
   size,
+  name,
   style,
   family,
   weight,
@@ -6437,23 +7047,26 @@ const Textarea = ({
   };
   const handleChange = e => {
     const value = e.target.value;
-    onChange(value);
+    if (onChange) {
+      onChange(value);
+    }
     setInnerValue(() => value);
     if (maxLength) {
       if (value.length > maxLength) {
-        onChange(value.substr(0, maxLength));
+        if (onChange) {
+          onChange(value.substr(0, maxLength));
+        }
+        setInnerValue(() => value.substr(0, maxLength));
       }
     } else {
       if (value.length > configStyles.TEXTAREA.maxLength) {
-        onChange(value.substr(0, configStyles.TEXTAREA.maxLength));
+        if (onChange) {
+          onChange(value.substr(0, configStyles.TEXTAREA.maxLength));
+        }
+        setInnerValue(() => value.substr(0, configStyles.TEXTAREA.maxLength));
       }
     }
   };
-  React.useEffect(() => {
-    if (!onChange) {
-      alert('Please add onChange function on Textarea component');
-    }
-  }, [onChange]);
   React.useEffect(() => {
     if (value === undefined) {
       alert('Please add value prop on Textarea component');
@@ -6500,7 +7113,7 @@ const Textarea = ({
     style: {
       display: labelDisplay ?? configStyles.TEXTAREA.label.display
     }
-  }, label, required && /*#__PURE__*/React__default["default"].createElement("sup", null, /*#__PURE__*/React__default["default"].createElement(SvgRequired, null))) : '', showCharacterCount && maxLength && characterCountPosition === 'top' && /*#__PURE__*/React__default["default"].createElement("span", null, maxLength - value.length, " \u0576\u056B\u0577")), /*#__PURE__*/React__default["default"].createElement("textarea", {
+  }, label, required && /*#__PURE__*/React__default["default"].createElement("sup", null, /*#__PURE__*/React__default["default"].createElement(SvgRequired, null))) : '', showCharacterCount && maxLength && characterCountPosition === 'top' && /*#__PURE__*/React__default["default"].createElement("span", null, maxLength - innerValue.length, " \u0576\u056B\u0577")), /*#__PURE__*/React__default["default"].createElement("textarea", {
     style: {
       width: '100%',
       border: 'none',
@@ -6523,6 +7136,7 @@ const Textarea = ({
       boxShadow: error ? errorColor ? `0 0 0 2px ${errorColor}` : configStyles.TEXTAREA.error.box.shadow : isFocus ? borderFocusColor ? `0 0 0 2px ${borderFocusColor}` : configStyles.TEXTAREA.box.colors.focus : isHover ? borderHoverColor ? `0 0 0 2px ${borderHoverColor}` : configStyles.TEXTAREA.box.colors.hover : boxShadow ? boxShadow : configStyles.INPUT.box.shadow,
       resize: resize ? resize : configStyles.TEXTAREA.resize
     },
+    name: name,
     value: innerValue,
     disabled: disabled,
     onBlur: handleBlur,
@@ -6562,6 +7176,7 @@ const Textarea = ({
 };
 Textarea.propTypes = {
   size: PropTypes__default["default"].string,
+  name: PropTypes__default["default"].string,
   style: PropTypes__default["default"].string,
   family: PropTypes__default["default"].string,
   weight: PropTypes__default["default"].string,
@@ -6572,6 +7187,7 @@ Textarea.propTypes = {
   radius: PropTypes__default["default"].string,
   required: PropTypes__default["default"].bool,
   disabled: PropTypes__default["default"].bool,
+  onChange: PropTypes__default["default"].func,
   padding: PropTypes__default["default"].string,
   minWidth: PropTypes__default["default"].string,
   maxWidth: PropTypes__default["default"].string,
@@ -6600,65 +7216,611 @@ Textarea.propTypes = {
   borderFocusColor: PropTypes__default["default"].string,
   borderHoverColor: PropTypes__default["default"].string,
   labelMarginBottom: PropTypes__default["default"].string,
-  onChange: PropTypes__default["default"].func.isRequired,
   characterCountPosition: PropTypes__default["default"].oneOf(Object.values(PositionSide))
 };
 
-const TypographyType = {
-  p: 'p',
-  h1: 'h1',
-  h2: 'h2',
-  h3: 'h3',
-  h4: 'h4',
-  h5: 'h5',
-  h6: 'h6',
-  span: 'span'
-};
-const Typography = ({
-  size,
+const AccordionItem = ({
+  item,
+  open,
+  index,
+  onClick,
+  openIcon,
+  closeIcon,
+  showIcons,
+  className,
+  titleAlign,
+  multipleOpen,
+  openHoverIcon,
   color,
-  weight,
-  radius,
   border,
-  cursor,
-  onClick,
-  children,
-  textAlign,
+  padding,
+  fontSize,
   fontStyle,
-  className,
-  textShadow,
-  lineHeight,
-  colorHover,
+  fontWeight,
   fontFamily,
-  textTransform,
-  textDecoration,
+  borderTop,
+  borderLeft,
+  hoverColor,
+  borderRight,
+  borderRadius,
+  borderBottom,
+  marginBottom,
   backgroundColor,
-  variant = 'p',
-  ...props
+  backgroundHoverColor
 }) => {
+  const [isOpen, setIsOpen] = React.useState(false);
   const [isHover, setIsHover] = React.useState(false);
-  const [classProps, setClassProps] = React.useState({});
-  const [configStyles, setConfigStyles] = React.useState({});
-  const [validVariant, setValidVariant] = React.useState(false);
+  const handleClick = () => {
+    onClick(item, index);
+    if (multipleOpen) {
+      setIsOpen(() => !isOpen);
+    }
+  };
   const handleMouseEnter = () => {
-    setIsHover(true);
+    setIsHover(() => true);
   };
   const handleMouseLeave = () => {
-    setIsHover(false);
+    setIsHover(() => false);
   };
-  const tagT = configStyles.TYPOGRAPHY && /*#__PURE__*/React__default["default"].createElement(variant, {
+  React.useEffect(() => {
+    setIsOpen(() => open);
+  }, [open]);
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: className,
     style: {
-      border: border ?? configStyles.TYPOGRAPHY.border,
-      cursor: cursor ?? configStyles.TYPOGRAPHY.cursor,
-      borderRadius: radius ?? configStyles.TYPOGRAPHY.radius,
-      fontSize: size ?? configStyles.TYPOGRAPHY.font['size' + variant],
-      fontWeight: weight ?? configStyles.TYPOGRAPHY.font['weight' + variant],
-      textShadow: textShadow ?? configStyles.TYPOGRAPHY.text['shadow' + variant],
-      textAlign: textAlign ?? configStyles.TYPOGRAPHY.text['align' + variant],
-      fontStyle: fontStyle ?? configStyles.TYPOGRAPHY.font['style' + variant],
-      lineHeight: lineHeight ?? configStyles.TYPOGRAPHY.text['lineHeight' + variant],
-      fontFamily: fontFamily ?? configStyles.TYPOGRAPHY.font['family' + variant],
-      textTransform: textTransform ?? configStyles.TYPOGRAPHY.text['transform' + variant],
+      marginBottom: marginBottom ? marginBottom : '0px'
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    onClick: handleClick,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    style: {
+      display: 'flex',
+      cursor: 'pointer',
+      padding: padding,
+      alignItems: 'center',
+      borderRadius: borderRadius,
+      borderTop: borderTop ? border : 'none',
+      borderLeft: borderLeft ? border : 'none',
+      borderRight: borderRight ? border : 'none',
+      borderBottom: borderBottom ? border : 'none',
+      justifyContent: showIcons ? 'space-between' : 'flex-start',
+      backgroundColor: isHover ? backgroundHoverColor : backgroundColor
+    }
+  }, item.title && /*#__PURE__*/React__default["default"].createElement("p", {
+    style: {
+      width: '90%',
+      margin: '0px',
+      fontSize: fontSize,
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      fontStyle: fontStyle,
+      fontWeight: fontWeight,
+      fontFamily: fontFamily,
+      textOverflow: 'ellipsis',
+      textAlign: titleAlign ? titleAlign : 'left',
+      color: isOpen ? hoverColor : isHover ? hoverColor : color
+    }
+  }, item.title), showIcons && /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      display: 'flex',
+      width: 'fit-content',
+      height: 'fit-content',
+      minWidth: '14px',
+      minHeight: '14px',
+      alignItems: 'center',
+      justifyContent: 'center'
+    }
+  }, isOpen ? closeIcon : isHover ? openHoverIcon ? openHoverIcon : openIcon : openIcon)), /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      overflow: 'hidden',
+      height: isOpen ? 'auto' : '0px'
+    }
+  }, item.content ? item.content : ''));
+};
+AccordionItem.propTypes = {
+  open: PropTypes__default["default"].bool
+};
+
+const SvgGreenplus = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "1em",
+  height: "1em",
+  fill: "none",
+  viewBox: "0 0 16 16",
+  "aria-labelledby": titleId
+}, props), title ? /*#__PURE__*/React__namespace.createElement("title", {
+  id: titleId
+}, title) : null, /*#__PURE__*/React__namespace.createElement("path", {
+  stroke: "#009B8B",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  strokeWidth: 1.6,
+  d: "M8 1v14M1 8h14"
+}));
+
+const SvgGreenminus = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "1em",
+  height: "1em",
+  fill: "none",
+  viewBox: "0 0 16 2",
+  "aria-labelledby": titleId
+}, props), title ? /*#__PURE__*/React__namespace.createElement("title", {
+  id: titleId
+}, title) : null, /*#__PURE__*/React__namespace.createElement("path", {
+  stroke: "#009B8B",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  strokeWidth: 1.6,
+  d: "M1 1h14"
+}));
+
+var css_248z$3 = "";
+styleInject(css_248z$3);
+
+const Accordion = ({
+  data,
+  click,
+  openIcon,
+  closeIcon,
+  className,
+  showIcons,
+  titleAlign,
+  multipleOpen,
+  openHoverIcon,
+  borderTop,
+  borderLeft,
+  borderRight,
+  borderColor,
+  borderWidth,
+  borderStyle,
+  borderBottom,
+  borderRadius,
+  fontSize,
+  fontStyle,
+  fontWeight,
+  fontFamily,
+  color,
+  padding,
+  hoverColor,
+  marginBottom,
+  backgroundColor,
+  backgroundHoverColor
+}) => {
+  const [openIndex, setOpenIndex] = React.useState(-1);
+  const [classProps, setClassProps] = React.useState({});
+  const [configStyles, setConfigStyles] = React.useState({});
+  const handleClick = (item, index) => {
+    if (click) {
+      click(item);
+    }
+    if (!multipleOpen) {
+      setOpenIndex(() => openIndex === index ? -1 : index);
+    }
+  };
+  React.useEffect(() => {
+    className && setClassProps(() => classnames__default["default"](className ?? configStyles.BUTTON.className));
+  }, [className]);
+  React.useEffect(() => {
+    configStylesPromise.then(data => {
+      setClassProps(() => classnames__default["default"](className ?? data.BUTTON.className));
+      setConfigStyles(() => {
+        return {
+          ...data
+        };
+      });
+    }, error => {
+      console.error(error);
+    });
+  }, []);
+  return configStyles.ACCORDION && /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      width: '100%'
+    }
+  }, data && data.length ? data.map((item, index) => {
+    return /*#__PURE__*/React__default["default"].createElement(AccordionItem, {
+      item: item,
+      index: index,
+      onClick: handleClick,
+      titleAlign: titleAlign,
+      multipleOpen: multipleOpen,
+      key: `${item.title}__TUI__${index}`,
+      open: openIndex === index ? true : false,
+      showIcons: showIcons ?? configStyles.ACCORDION.showIcons,
+      openIcon: openIcon ? /*#__PURE__*/React__default["default"].createElement("img", {
+        src: openIcon,
+        alt: "open icon"
+      }) : configStyles.ACCORDION.icon.open ? /*#__PURE__*/React__default["default"].createElement("img", {
+        src: configStyles.ACCORDION.icon.open,
+        alt: "open icon"
+      }) : /*#__PURE__*/React__default["default"].createElement(SvgGreenplus, null),
+      openHoverIcon: openHoverIcon ? /*#__PURE__*/React__default["default"].createElement("img", {
+        src: openHoverIcon,
+        alt: "open icon"
+      }) : configStyles.ACCORDION.icon.openHover ? /*#__PURE__*/React__default["default"].createElement("img", {
+        src: configStyles.ACCORDION.icon.openHover,
+        alt: "open icon"
+      }) : /*#__PURE__*/React__default["default"].createElement(SvgGreenplus, null),
+      closeIcon: closeIcon ? /*#__PURE__*/React__default["default"].createElement("img", {
+        src: closeIcon,
+        alt: "close icon"
+      }) : configStyles.ACCORDION.icon.close ? /*#__PURE__*/React__default["default"].createElement("img", {
+        src: configStyles.ACCORDION.icon.close,
+        alt: "close icon"
+      }) : /*#__PURE__*/React__default["default"].createElement(SvgGreenminus, null),
+      className: classProps,
+      color: color ?? configStyles.ACCORDION.color,
+      padding: padding ?? configStyles.ACCORDION.padding,
+      fontSize: fontSize ?? configStyles.ACCORDION.font.size,
+      fontStyle: fontStyle ?? configStyles.ACCORDION.font.style,
+      fontWeight: fontWeight ?? configStyles.ACCORDION.font.weight,
+      fontFamily: fontFamily ?? configStyles.ACCORDION.font.family,
+      hoverColor: hoverColor ?? configStyles.ACCORDION.colors.hover,
+      marginBottom: marginBottom ?? configStyles.ACCORDION.marginBottom,
+      border: `
+                ${borderWidth ?? configStyles.ACCORDION.border.width}
+                ${borderStyle ?? configStyles.ACCORDION.border.style}
+                ${openIndex === index ? 'transparent' : borderColor ?? configStyles.ACCORDION.border.color}
+              `,
+      borderTop: borderTop ?? configStyles.ACCORDION.border.top,
+      borderLeft: borderLeft ?? configStyles.ACCORDION.border.left,
+      borderRight: borderRight ?? configStyles.ACCORDION.border.right,
+      borderBottom: borderBottom ?? configStyles.ACCORDION.border.bottom,
+      borderRadius: borderRadius ?? configStyles.ACCORDION.border.radius,
+      backgroundColor: backgroundColor ?? configStyles.ACCORDION.colors.background,
+      backgroundHoverColor: backgroundHoverColor ?? configStyles.ACCORDION.colors.backgroundHover
+    });
+  }) : '');
+};
+Accordion.propTypes = {
+  data: PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({
+    title: PropTypes__default["default"].string,
+    content: PropTypes__default["default"].element
+  })),
+  click: PropTypes__default["default"].func,
+  showIcons: PropTypes__default["default"].bool,
+  multipleOpen: PropTypes__default["default"].bool,
+  color: PropTypes__default["default"].string,
+  hoverColor: PropTypes__default["default"].string,
+  backgroundColor: PropTypes__default["default"].string,
+  backgroundHoverColor: PropTypes__default["default"].string,
+  titleAlign: PropTypes__default["default"].oneOf(['left', 'center', 'right']),
+  padding: PropTypes__default["default"].string,
+  openIcon: PropTypes__default["default"].string,
+  className: PropTypes__default["default"].string,
+  closeIcon: PropTypes__default["default"].string,
+  marginBottom: PropTypes__default["default"].string,
+  openHoverIcon: PropTypes__default["default"].string,
+  borderTop: PropTypes__default["default"].bool,
+  borderLeft: PropTypes__default["default"].bool,
+  borderRight: PropTypes__default["default"].bool,
+  borderBottom: PropTypes__default["default"].bool,
+  borderColor: PropTypes__default["default"].string,
+  borderWidth: PropTypes__default["default"].string,
+  borderStyle: PropTypes__default["default"].string,
+  borderRadius: PropTypes__default["default"].string,
+  fontSize: PropTypes__default["default"].string,
+  fontStyle: PropTypes__default["default"].string,
+  fontWeight: PropTypes__default["default"].number,
+  fontFamily: PropTypes__default["default"].string
+};
+
+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: '100%',
+      height: '100%'
+    }
+  }, (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 = 'absolute';
+  swipeBlock.style.zIndex = swipeCount;
+  swipeBlock.style.backgroundColor = backgroundColor ?? innerConfigStyles.SWIPEMODAL.colors.background;
+  swipeBlock.style.width = position === 'left' || position === 'right' ? width ?? innerConfigStyles.SWIPEMODAL.width : '100%';
+  swipeBlock.style.height = position === 'top' || position === 'bottom' ? height ?? innerConfigStyles.SWIPEMODAL.height : '100%';
+  swipeBlock.style.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) {
+      swipable = document.createElement('div');
+      swipable.setAttribute('id', 'swipable');
+      swipable.style.position = 'absolute';
+      swipable.style.top = '0px';
+      swipable.style.left = '0px';
+      swipable.style.zIndex = 99999;
+      swipable.style.maxWidth = '100%';
+      swipable.style.maxHeight = '100vh';
+      swipable.style.width = '100%';
+      swipable.style.height = '100%';
+      swipable.style.backgroundColor = props?.parent?.backgroundColor ?? innerConfigStyles.SWIPEMODAL.parent.colors.background;
+      if (props.outSideClose || innerConfigStyles.SWIPEMODAL.outSideClose) {
+        swipable.addEventListener('click', function () {
+          hasOwnerProperty(props, 'callClose') && {}.toString.call(props.callClose) === '[object Function]' ? props.callClose() : '';
+        });
+      }
+      const SwipifyBlock = document.getElementById('swipify_tui');
+      SwipifyBlock.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');
+    }
+    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);
+            const SwipifyBlock = document.getElementById('swipify_tui');
+            SwipifyBlock.removeChild(swipable);
+          }
+        }, 200);
+      } else {
+        swipable.removeChild(removable);
+        if (swipeCount === 0 && swipable) {
+          window.removeEventListener('popstate', handleNavigationChange);
+          window.removeEventListener('navigationchange', handleNavigationChange);
+          const SwipifyBlock = document.getElementById('swipify_tui');
+          SwipifyBlock.removeChild(swipable);
+        }
+      }
+    } else {
+      if (swipeCount === 0 && swipable) {
+        const SwipifyBlock = document.getElementById('swipify_tui');
+        SwipifyBlock.removeChild(swipable);
+      }
+    }
+  }
+};
+const SwipeModal = () => {
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    const parentSize = ref.current.parentNode.style.height;
+    if (Number(parentSize.replace(/\D/g, '')) > 0) {
+      ref.current.style.height = '100%';
+    } else {
+      ref.current.style.height = '100vh';
+    }
+  }, [ref]);
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    ref: ref,
+    id: "swipify_tui",
+    style: {
+      position: 'relative',
+      width: '100%',
+      overflow: 'hidden',
+      zIndex: 1
+    }
+  });
+};
+
+const TypographyType = {
+  p: 'p',
+  h1: 'h1',
+  h2: 'h2',
+  h3: 'h3',
+  h4: 'h4',
+  h5: 'h5',
+  h6: 'h6',
+  span: 'span'
+};
+const Typography = ({
+  size,
+  color,
+  weight,
+  radius,
+  border,
+  cursor,
+  onClick,
+  children,
+  textAlign,
+  fontStyle,
+  className,
+  textShadow,
+  lineHeight,
+  colorHover,
+  fontFamily,
+  textTransform,
+  textDecoration,
+  backgroundColor,
+  variant = 'p',
+  ...props
+}) => {
+  const [isHover, setIsHover] = React.useState(false);
+  const [classProps, setClassProps] = React.useState({});
+  const [configStyles, setConfigStyles] = React.useState({});
+  const [validVariant, setValidVariant] = React.useState(false);
+  const handleMouseEnter = () => {
+    setIsHover(true);
+  };
+  const handleMouseLeave = () => {
+    setIsHover(false);
+  };
+  const tagT = configStyles.TYPOGRAPHY && /*#__PURE__*/React__default["default"].createElement(variant, {
+    style: {
+      border: border ?? configStyles.TYPOGRAPHY.border,
+      cursor: cursor ?? configStyles.TYPOGRAPHY.cursor,
+      borderRadius: radius ?? configStyles.TYPOGRAPHY.radius,
+      fontSize: size ?? configStyles.TYPOGRAPHY.font['size' + variant],
+      fontWeight: weight ?? configStyles.TYPOGRAPHY.font['weight' + variant],
+      textShadow: textShadow ?? configStyles.TYPOGRAPHY.text['shadow' + variant],
+      textAlign: textAlign ?? configStyles.TYPOGRAPHY.text['align' + variant],
+      fontStyle: fontStyle ?? configStyles.TYPOGRAPHY.font['style' + variant],
+      lineHeight: lineHeight ?? configStyles.TYPOGRAPHY.text['lineHeight' + variant],
+      fontFamily: fontFamily ?? configStyles.TYPOGRAPHY.font['family' + variant],
+      textTransform: textTransform ?? configStyles.TYPOGRAPHY.text['transform' + variant],
       textDecoration: textDecoration ?? configStyles.TYPOGRAPHY.text['decoration' + variant],
       backgroundColor: backgroundColor ?? configStyles.TYPOGRAPHY.colors['background' + variant],
       color: isHover ? colorHover ? colorHover : color ? color : configStyles.TYPOGRAPHY.colors[variant] : color ? color : configStyles.TYPOGRAPHY.colors[variant]
@@ -6720,13 +7882,13 @@ const range = (start, end) => {
   }, (_, idx) => idx + start);
 };
 const PaginationRange = ({
-  offset,
+  innerOffset,
   currentTotalCount,
   currentPageNumber
 }) => {
   const paginationRange = React.useMemo(() => {
     const firstPageIndex = 1;
-    const totalPageCount = Math.ceil(currentTotalCount / offset);
+    const totalPageCount = Math.ceil(currentTotalCount / innerOffset);
     const lastPageIndex = totalPageCount;
     if (7 >= totalPageCount) {
       return range(1, totalPageCount);
@@ -6749,14 +7911,10 @@ const PaginationRange = ({
     } else {
       return range(firstPageIndex, totalPageCount);
     }
-  }, [currentTotalCount, offset, currentPageNumber]);
+  }, [currentTotalCount, innerOffset, currentPageNumber]);
   return paginationRange;
 };
 
-var css_248z$1 = ".pagination-module_listItem__b1-WN:focus{background-color:#4caf50;color:#fff}.pagination-module_listItem__b1-WN:hover:not(.pagination-module_active__KwBDp){background-color:#ddd}.pagination-module_pagination-bar__MrtYT>ul{display:flex;flex-direction:row;flex-wrap:nowrap;gap:8px;justify-content:center}.pagination-module_pagination-btn__w8Yh8{border:none;border-radius:6px;outline:none}.pagination-module_pagination-btn__w8Yh8,.pagination-module_pagination-item__t3emS,.pagination-module_pagination-jump-next__LAb9Z{align-items:center;background-color:#fff;box-shadow:0 0 0 1px #eee;cursor:pointer;display:flex;height:34px;justify-content:center;width:34px}.pagination-module_pagination-item__t3emS,.pagination-module_pagination-jump-next__LAb9Z{border-radius:6px;flex:0 0 auto;font-size:13px;line-height:16px;position:relative;transition:background-color .24s}.pagination-module_pagination-item__t3emS:hover{background-color:#eee}.pagination-module_pagination-item__t3emS.pagination-module_selected__EXzCA{background-color:#00236a;color:#fff}.pagination-module_pagination-jump-next-arrow__aEVD8,.pagination-module_pagination-jump-next-txt__e7nFj{align-items:center;bottom:0;display:flex;font-size:12px;justify-content:center;left:0;line-height:14px;margin:auto;position:absolute;right:0;top:0;transition:opacity .24s,color .24s}.pagination-module_pagination-jump-next-arrow__aEVD8{opacity:0}.pagination-module_pagination-jump-next__LAb9Z:hover .pagination-module_pagination-jump-next-arrow__aEVD8{opacity:1}.pagination-module_pagination-jump-next__LAb9Z:hover .pagination-module_pagination-jump-next-txt__e7nFj{opacity:0}i{color:#3c393e;font-size:12px;line-height:12px}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}";
-var styles$1 = {"listItem":"pagination-module_listItem__b1-WN","active":"pagination-module_active__KwBDp","pagination-bar":"pagination-module_pagination-bar__MrtYT","pagination-btn":"pagination-module_pagination-btn__w8Yh8","pagination-item":"pagination-module_pagination-item__t3emS","pagination-jump-next":"pagination-module_pagination-jump-next__LAb9Z","selected":"pagination-module_selected__EXzCA","pagination-jump-next-txt":"pagination-module_pagination-jump-next-txt__e7nFj","pagination-jump-next-arrow":"pagination-module_pagination-jump-next-arrow__aEVD8"};
-styleInject(css_248z$1);
-
 const SvgDots = ({
   title,
   titleId,
@@ -6795,57 +7953,51 @@ const SvgNextarrow = ({
   fill: fillColor ? fillColor : '#3C393E'
 }));
 
+var css_248z$1 = ".pagination-module_listItem__b1-WN:focus{background-color:#4caf50;color:#fff}.pagination-module_listItem__b1-WN:hover:not(.pagination-module_active__KwBDp){background-color:#ddd}.pagination-module_pagination-bar__MrtYT>ul{display:flex;flex-direction:row;flex-wrap:nowrap;gap:8px;justify-content:center}.pagination-module_pagination-btn__w8Yh8{align-items:center;border:none;cursor:pointer;display:flex;justify-content:center;outline:none}.pagination-module_pagination-item__t3emS,.pagination-module_pagination-jump-next__LAb9Z{align-items:center;cursor:pointer;display:flex;flex:0 0 auto;justify-content:center;position:relative;transition:background-color .24s}.pagination-module_pagination-item__t3emS:hover{background-color:#eee}.pagination-module_pagination-item__t3emS.pagination-module_selected__EXzCA{background-color:#00236a;color:#fff}.pagination-module_pagination-jump-next-arrow__aEVD8,.pagination-module_pagination-jump-next-txt__e7nFj{align-items:center;bottom:0;display:flex;font-size:12px;justify-content:center;left:0;line-height:14px;margin:auto;position:absolute;right:0;top:0;transition:opacity .24s,color .24s}.pagination-module_pagination-jump-next-arrow__aEVD8{opacity:0}.pagination-module_pagination-jump-next__LAb9Z:hover .pagination-module_pagination-jump-next-arrow__aEVD8{opacity:1}.pagination-module_pagination-jump-next__LAb9Z:hover .pagination-module_pagination-jump-next-txt__e7nFj{opacity:0}.pagination-module_show-offset-block__ksPGm{height:34px;margin-left:10px!important;margin-right:4px!important;width:91px}i{color:#3c393e;font-size:12px;line-height:12px}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}";
+var styles$1 = {"listItem":"pagination-module_listItem__b1-WN","active":"pagination-module_active__KwBDp","pagination-bar":"pagination-module_pagination-bar__MrtYT","pagination-btn":"pagination-module_pagination-btn__w8Yh8","pagination-item":"pagination-module_pagination-item__t3emS","pagination-jump-next":"pagination-module_pagination-jump-next__LAb9Z","selected":"pagination-module_selected__EXzCA","pagination-jump-next-txt":"pagination-module_pagination-jump-next-txt__e7nFj","pagination-jump-next-arrow":"pagination-module_pagination-jump-next-arrow__aEVD8","show-offset-block":"pagination-module_show-offset-block__ksPGm"};
+styleInject(css_248z$1);
+
 const Pagination = ({
   goTo,
-  offset = 2,
+  offset,
   onChange,
   className,
+  getOffset,
   totalCount,
-  currentPage
+  showOffset,
+  currentPage,
+  offsetCounts,
+  color,
+  width,
+  height,
+  fontSize,
+  fontStyle,
+  fontWeight,
+  fontFamily,
+  lineHeight,
+  activeColor,
+  hoverColor,
+  backgroundColor,
+  hoverBackgroundColor,
+  activeBackgroundColor,
+  borderColor,
+  borderWidth,
+  borderRadius
 }) => {
   const [inpVal, setInpVal] = React.useState('');
   const [error, setError] = React.useState(false);
+  const [isHover, setIsHover] = React.useState(false);
   const [classProps, setClassProps] = React.useState({});
+  const [offsetArgs, setOffsetArgs] = React.useState({});
+  const [innerOffset, setInnerOffset] = React.useState(2);
   const [configStyles, setConfigStyles] = React.useState({});
+  const [innerShowOffset, setInnerShowOffset] = React.useState(false);
   const [currentPageNumber, setCurrentPage] = React.useState(currentPage);
   const [currentTotalCount, setcurrentTotalCount] = React.useState(totalCount);
-  React.useEffect(() => {
-    configStylesPromise.then(data => {
-      setClassProps(() => classnames__default["default"](
-      // TODO: check and remove pagination-bar-rem class
-      styles$1.list, className ?? data.PAGINATION.className, `${styles$1['pagination-bar']} pagination-bar-rem`));
-      setConfigStyles(() => {
-        return {
-          ...data
-        };
-      });
-    }, error => {
-      console.error(error);
-    });
-  }, []);
-  React.useEffect(() => {
-    className && setClassProps(() => classnames__default["default"](
-    // TODO: check and remove pagination-bar-rem class
-    styles$1.list, className ?? configStyles.PAGINATION.className, `${styles$1['pagination-bar']} pagination-bar-rem`));
-  }, [className]);
-  React.useEffect(() => {
-    setcurrentTotalCount(totalCount);
-  }, [totalCount]);
-  React.useEffect(() => {
-    setCurrentPage(currentPage);
-  }, [currentPage]);
-  const onPageChange = page => {
-    if (page > 0) {
-      setCurrentPage(page);
-    }
-  };
-  React.useEffect(() => {
-    onChange(currentPageNumber);
-  }, [currentPageNumber]);
   const paginationRange = PaginationRange({
     currentPageNumber,
     currentTotalCount,
-    offset
+    innerOffset
   });
   if (currentPageNumber === 0 || paginationRange?.length < 2) {
     return null;
@@ -6887,16 +8039,88 @@ const Pagination = ({
         if (inpVal <= 1) {
           setInpVal(1);
           onPageChange(1);
-        } else if (inpVal >= totalCount / offset) {
-          setInpVal(Math.ceil(totalCount / offset));
-          onPageChange(Math.ceil(totalCount / offset));
+        } else if (inpVal >= totalCount / innerOffset) {
+          setInpVal(Math.ceil(totalCount / innerOffset));
+          onPageChange(Math.ceil(totalCount / innerOffset));
         } else {
           onPageChange(inpVal);
         }
       }
     }
   };
+  const handleChangeSelect = e => {
+    setInnerOffset(() => {
+      return parseInt(e.value.split('/')[0].trim());
+    });
+    if (getOffset) {
+      getOffset(parseInt(e.value.split('/')[0].trim()));
+    }
+  };
+  const handleMouseEnter = hoverIndex => {
+    setIsHover(hoverIndex);
+  };
+  const handleMouseLeave = () => {
+    setIsHover(false);
+  };
+  const onPageChange = page => {
+    if (page > 0) {
+      setCurrentPage(page);
+    }
+  };
   let lastPage = paginationRange[paginationRange.length - 1];
+  React.useEffect(() => {
+    configStylesPromise.then(data => {
+      setClassProps(() => classnames__default["default"](
+      // TODO: check and remove pagination-bar-rem class
+      styles$1.list, className ?? data.PAGINATION.className, `${styles$1['pagination-bar']} pagination-bar-rem`));
+      setConfigStyles(() => {
+        return {
+          ...data
+        };
+      });
+    }, error => {
+      console.error(error);
+    });
+  }, []);
+  React.useEffect(() => {
+    setInnerShowOffset(() => showOffset);
+    if (showOffset && offsetCounts && offsetCounts.length) {
+      const newOptions = offsetCounts.map((innerItem, innerIndex) => {
+        return {
+          item: innerIndex,
+          value: `${innerItem} / Էջ `
+        };
+      });
+      setOffsetArgs(() => {
+        return {
+          showCloseIcon: false,
+          options: newOptions,
+          onChange: handleChangeSelect,
+          defaultOption: `${newOptions[0].value}`,
+          keyNames: {
+            name: 'value',
+            id: 'item'
+          }
+        };
+      });
+      setInnerOffset(() => offsetCounts[0]);
+    }
+  }, [offsetCounts, showOffset]);
+  React.useEffect(() => {
+    className && setClassProps(() => classnames__default["default"](
+    // TODO: check and remove pagination-bar-rem class
+    styles$1.list, className ?? configStyles.PAGINATION.className, `${styles$1['pagination-bar']} pagination-bar-rem`));
+  }, [className]);
+  React.useEffect(() => {
+    setcurrentTotalCount(totalCount);
+    setInnerOffset(() => offset > totalCount ? totalCount : offset);
+  }, [totalCount, offset]);
+  React.useEffect(() => {
+    setCurrentPage(currentPage);
+  }, [currentPage]);
+  React.useEffect(() => {
+    onChange(currentPageNumber);
+  }, [currentPageNumber]);
   return configStyles.PAGINATION && /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       display: 'flex',
@@ -6907,6 +8131,20 @@ const Pagination = ({
     className: classProps
   }, /*#__PURE__*/React__default["default"].createElement("ul", null, /*#__PURE__*/React__default["default"].createElement("button", {
     style: {
+      width: width ?? configStyles.PAGINATION.width,
+      height: height ?? configStyles.PAGINATION.height,
+      fontSize: fontSize ?? configStyles.PAGINATION.font.size,
+      fontStyle: fontStyle ?? configStyles.PAGINATION.font.style,
+      fontWeight: fontWeight ?? configStyles.PAGINATION.font.weight,
+      fontFamily: fontFamily ?? configStyles.PAGINATION.font.family,
+      lineHeight: lineHeight ?? configStyles.PAGINATION.lineHeight,
+      backgroundColor: backgroundColor ?? configStyles.PAGINATION.backgroundColor,
+      boxShadow: `
+                                0 0 0
+                                ${borderWidth ?? configStyles.PAGINATION.border.width}
+                                ${borderColor ?? configStyles.PAGINATION.border.color}
+                            `,
+      borderRadius: borderRadius ?? configStyles.PAGINATION.border.radius,
       transform: 'rotate(180deg)'
     },
     onClick: onPrevious,
@@ -6917,7 +8155,17 @@ const Pagination = ({
       let currentPageIndex = paginationRange.indexOf(currentPageNumber);
       return /*#__PURE__*/React__default["default"].createElement("li", {
         key: id,
-        className: classnames__default["default"](`${styles$1['pagination-jump-next']} pagination-jump-next-rem`, styles$1.listItem),
+        className: classnames__default["default"](`${styles$1['pagination-jump-next']} pagination-jump-next-rem`),
+        style: {
+          width: width ?? configStyles.PAGINATION.width,
+          height: height ?? configStyles.PAGINATION.height,
+          boxShadow: `
+                                            0 0 0
+                                            ${borderWidth ?? configStyles.PAGINATION.border.width}
+                                            ${borderColor ?? configStyles.PAGINATION.border.color}
+                                        `,
+          borderRadius: borderRadius ?? configStyles.PAGINATION.border.radius
+        },
         onClick: id < currentPageIndex ? onPreviousFive : onNextFive,
         disabled: currentPageIndex === 0 ? true : false
       }, id < currentPageIndex ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
@@ -6936,43 +8184,144 @@ const Pagination = ({
     return /*#__PURE__*/React__default["default"].createElement("li", {
       onClick: () => onPageChange(pageNumber),
       key: id,
-      className: classnames__default["default"](`${pageNumber === currentPageNumber ? styles$1.selected : styles$1.listItem}`, `${styles$1['pagination-item']} pagination-item-rem`)
+      className: classnames__default["default"](`${styles$1['pagination-item']} pagination-item-rem`),
+      onMouseEnter: () => handleMouseEnter(id),
+      onMouseLeave: () => handleMouseLeave(),
+      style: {
+        width: width ?? configStyles.PAGINATION.width,
+        height: height ?? configStyles.PAGINATION.height,
+        fontSize: fontSize ?? configStyles.PAGINATION.font.size,
+        fontStyle: fontStyle ?? configStyles.PAGINATION.font.style,
+        fontWeight: fontWeight ?? configStyles.PAGINATION.font.weight,
+        fontFamily: fontFamily ?? configStyles.PAGINATION.font.family,
+        lineHeight: lineHeight ?? configStyles.PAGINATION.lineHeight,
+        color: `
+                                        ${pageNumber === currentPageNumber ? activeColor ?? configStyles.PAGINATION.colors.active : isHover === id ? hoverColor ?? configStyles.PAGINATION.colors.hover : color ?? configStyles.PAGINATION.color}
+                                    `,
+        backgroundColor: `
+                                        ${pageNumber === currentPageNumber ? activeBackgroundColor ?? configStyles.PAGINATION.colors.activeBackground : isHover === id ? hoverBackgroundColor ?? configStyles.PAGINATION.colors.hoverBackground : backgroundColor ?? configStyles.PAGINATION.colors.background}
+                                    `,
+        boxShadow: `
+                                        0 0 0
+                                        ${borderWidth ?? configStyles.PAGINATION.border.width}
+                                        ${borderColor ?? configStyles.PAGINATION.border.color}
+                                    `,
+        borderRadius: borderRadius ?? configStyles.PAGINATION.border.radius
+      }
     }, pageNumber);
   }), /*#__PURE__*/React__default["default"].createElement("button", {
     onClick: onNext,
     disabled: currentPageNumber === lastPage ? true : false,
-    className: `${styles$1['pagination-btn']} pagination-btn-rem`
-  }, /*#__PURE__*/React__default["default"].createElement(SvgNextarrow, null))), goTo && /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("input", {
+    className: `${styles$1['pagination-btn']} pagination-btn-rem`,
+    style: {
+      width: width ?? configStyles.PAGINATION.width,
+      height: height ?? configStyles.PAGINATION.height,
+      fontSize: fontSize ?? configStyles.PAGINATION.font.size,
+      fontStyle: fontStyle ?? configStyles.PAGINATION.font.style,
+      fontWeight: fontWeight ?? configStyles.PAGINATION.font.weight,
+      fontFamily: fontFamily ?? configStyles.PAGINATION.font.family,
+      lineHeight: lineHeight ?? configStyles.PAGINATION.lineHeight,
+      backgroundColor: backgroundColor ?? configStyles.PAGINATION.backgroundColor,
+      boxShadow: `
+                                0 0 0
+                                ${borderWidth ?? configStyles.PAGINATION.border.width}
+                                ${borderColor ?? configStyles.PAGINATION.border.color}
+                            `,
+      borderRadius: borderRadius ?? configStyles.PAGINATION.border.radius
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(SvgNextarrow, null))), innerShowOffset && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "show-offset-block",
+    style: {
+      width: '91px',
+      height: '34px',
+      marginLeft: '10px',
+      marginRight: '3px'
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(Select, _extends({
+    insidePagination: true,
+    selectedMinHeight: "34px",
+    boxShadow: `
+                                    0 0 0
+                                    ${borderWidth ?? configStyles.PAGINATION.border.width}
+                                    ${borderColor ?? configStyles.PAGINATION.border.color}
+                                `,
+    boxShadowHover: `
+                                    0 0 0
+                                    ${borderWidth ?? configStyles.PAGINATION.border.width}
+                                    ${borderColor ?? configStyles.PAGINATION.border.color}
+                                `,
+    selectedFontSize: fontSize ?? configStyles.PAGINATION.font.size,
+    selectedFontStyle: fontStyle ?? configStyles.PAGINATION.font.style,
+    selectedLineHeight: lineHeight ?? configStyles.PAGINATION.lineHeight,
+    selectedFontFamily: fontWeight ?? configStyles.PAGINATION.font.weight,
+    selectedFontWeight: fontFamily ?? configStyles.PAGINATION.font.family,
+    optionItemFontSize: fontSize ?? configStyles.PAGINATION.font.size,
+    optionItemFontStyle: fontStyle ?? configStyles.PAGINATION.font.style,
+    optionItemLineHeight: lineHeight ?? configStyles.PAGINATION.lineHeight,
+    optionItemFontFamily: fontWeight ?? configStyles.PAGINATION.font.weight,
+    optionItemFontWeight: fontFamily ?? configStyles.PAGINATION.font.family
+  }, offsetArgs))), goTo && /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("input", {
     onKeyDown: handleKeyDown,
     onInput: handleChangeInput,
     type: "number",
     style: {
-      width: '53px',
-      height: '30px',
+      width: '55px',
+      border: 'none',
       outline: 'none',
-      color: '#3C393E',
-      fontSize: '13px',
       margin: '0px 6px',
-      fontWeight: '500',
       textAlign: 'center',
-      border: '1px solid',
-      borderRadius: '6px',
-      borderColor: error ? 'red' : '#00236a'
+      color: color ?? configStyles.PAGINATION.color,
+      height: height ?? configStyles.PAGINATION.height,
+      fontSize: fontSize ?? configStyles.PAGINATION.font.size,
+      fontStyle: fontStyle ?? configStyles.PAGINATION.font.style,
+      fontWeight: fontWeight ?? configStyles.PAGINATION.font.weight,
+      fontFamily: fontFamily ?? configStyles.PAGINATION.font.family,
+      lineHeight: lineHeight ?? configStyles.PAGINATION.lineHeight,
+      backgroundColor: backgroundColor ?? configStyles.PAGINATION.backgroundColor,
+      boxShadow: `
+                                    0 0 0
+                                    ${borderWidth ?? configStyles.PAGINATION.border.width}
+                                    ${borderColor ?? configStyles.PAGINATION.border.color}
+                                `,
+      borderRadius: borderRadius ?? configStyles.PAGINATION.border.radius
     },
     value: inpVal
   }), /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
-      color: '#3C393E',
-      fontSize: '13px'
+      color: color ?? configStyles.PAGINATION.color,
+      fontSize: fontSize ?? configStyles.PAGINATION.font.size,
+      fontStyle: fontStyle ?? configStyles.PAGINATION.font.style,
+      fontWeight: fontWeight ?? configStyles.PAGINATION.font.weight,
+      fontFamily: fontFamily ?? configStyles.PAGINATION.font.family,
+      lineHeight: lineHeight ?? configStyles.PAGINATION.lineHeight
     }
   }, "\u0537\u057B")));
 };
 Pagination.propTypes = {
   goTo: PropTypes__default["default"].bool,
   offset: PropTypes__default["default"].number,
-  totalCount: PropTypes__default["default"].number,
+  getOffset: PropTypes__default["default"].func,
+  showOffset: PropTypes__default["default"].bool,
   className: PropTypes__default["default"].string,
-  currentPage: PropTypes__default["default"].number
+  totalCount: PropTypes__default["default"].number,
+  currentPage: PropTypes__default["default"].number,
+  offsetCounts: PropTypes__default["default"].arrayOf(PropTypes__default["default"].number),
+  color: PropTypes__default["default"].string,
+  width: PropTypes__default["default"].string,
+  height: PropTypes__default["default"].string,
+  fontSize: PropTypes__default["default"].string,
+  fontWeight: PropTypes__default["default"].string,
+  fontFamily: PropTypes__default["default"].string,
+  fontStyle: PropTypes__default["default"].string,
+  lineHeight: PropTypes__default["default"].string,
+  activeColor: PropTypes__default["default"].string,
+  hoverColor: PropTypes__default["default"].string,
+  backgroundColor: PropTypes__default["default"].string,
+  hoverBackgroundColor: PropTypes__default["default"].string,
+  activeBackgroundColor: PropTypes__default["default"].string,
+  borderColor: PropTypes__default["default"].string,
+  borderWidth: PropTypes__default["default"].string,
+  borderRadius: PropTypes__default["default"].string
 };
 
 var css_248z = ".autocomplete-module_auto-complete__oUOv9{appearance:none!important;-webkit-appearance:none!important}";
@@ -7390,12 +8739,14 @@ Autocomplete.propTypes = {
   backgroundDisableColor: PropTypes__default["default"].string
 };
 
+exports.Accordion = Accordion;
 exports.Autocomplete = Autocomplete;
 exports.Button = Button;
 exports.Captcha = Captcha;
 exports.Checkbox = Checkbox;
 exports.DirectionMode = DirectionMode;
 exports.File = File;
+exports.IconSides = IconSides;
 exports.Input = Input;
 exports.InputTypes = InputTypes;
 exports.Modal = Modal;
@@ -7405,10 +8756,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;