@xaypay/tui 0.2.15 → 0.2.16

package/dist/index.es.js

@@ -121,6 +121,39 @@ const SvgWrong = ({
   fill: "#051942"
 }));
 
+const SvgDocIcon = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/React.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.createElement("title", {
+  id: titleId
+}, title) : null, /*#__PURE__*/React.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.createElement("path", {
+  stroke: "#D0D5DD",
+  strokeWidth: 1.2,
+  d: "M21.6.4v6a3.2 3.2 0 0 0 3.2 3.2h6"
+}), /*#__PURE__*/React.createElement("rect", {
+  width: 23.8,
+  height: 13.2,
+  x: 0.5,
+  y: 14.2,
+  fill: "#3C68FF",
+  rx: 1.6
+}), /*#__PURE__*/React.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,
@@ -232,9 +265,11 @@ const FileItem = /*#__PURE__*/React__default.memo(({
   check,
   radius,
   status,
+  iconDoc,
   iconPdf,
   iconPng,
   iconJpg,
+  iconDocx,
   iconJpeg,
   iconHeic,
   iconWrong,
@@ -374,7 +409,7 @@ const FileItem = /*#__PURE__*/React__default.memo(({
     style: {
       width: '32px'
     }
-  }, fileFormat === 'pdf' ? iconPdf ? iconPdf : /*#__PURE__*/React__default.createElement(SvgListItemPdf, null) : fileFormat === 'jpg' ? iconJpg ? iconJpg : /*#__PURE__*/React__default.createElement(SvgListItemJpg, null) : fileFormat === 'png' ? iconPng ? iconPng : /*#__PURE__*/React__default.createElement(SvgListItemPng, null) : fileFormat === 'jpeg' ? iconJpeg ? iconJpeg : /*#__PURE__*/React__default.createElement(SvgListItemJpeg, null) : fileFormat === 'heic' || fileFormat === 'heif' ? iconHeic ? iconHeic : /*#__PURE__*/React__default.createElement(SvgHeic, null) : ''), /*#__PURE__*/React__default.createElement("div", {
+  }, fileFormat === 'pdf' ? iconPdf ? iconPdf : /*#__PURE__*/React__default.createElement(SvgListItemPdf, null) : fileFormat === 'jpg' ? iconJpg ? iconJpg : /*#__PURE__*/React__default.createElement(SvgListItemJpg, null) : fileFormat === 'png' ? iconPng ? iconPng : /*#__PURE__*/React__default.createElement(SvgListItemPng, null) : fileFormat === 'jpeg' ? iconJpeg ? iconJpeg : /*#__PURE__*/React__default.createElement(SvgListItemJpeg, null) : fileFormat === 'heic' || fileFormat === 'heif' ? iconHeic ? iconHeic : /*#__PURE__*/React__default.createElement(SvgHeic, null) : fileFormat === 'msword' ? iconDoc ? iconDoc : /*#__PURE__*/React__default.createElement(SvgDocIcon, null) : fileFormat === 'vnd.openxmlformats-officedocument.wordprocessingml.document' ? iconDocx ? iconDocx : /*#__PURE__*/React__default.createElement(SvgDocIcon, null) : ''), /*#__PURE__*/React__default.createElement("div", {
     style: {
       position: 'relative',
       display: 'flex',
@@ -432,8 +467,13 @@ const FileItem = /*#__PURE__*/React__default.memo(({
   }, iconDelItem ? iconDelItem : /*#__PURE__*/React__default.createElement(SvgListItemDelete, null))));
 });
 
-var img$2 = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg clip-path='url(%23clip0_18850_5919)'%3e%3cpath d='M13.4695 11.9505L20.7595 4.66046C20.9234 4.46916 21.009 4.22308 20.9993 3.9714C20.9895 3.71973 20.8852 3.48099 20.7071 3.30289C20.529 3.1248 20.2903 3.02047 20.0386 3.01075C19.7869 3.00102 19.5408 3.08663 19.3495 3.25046L12.0595 10.5405L4.76954 3.24046C4.57824 3.07663 4.33217 2.99102 4.08049 3.00075C3.82881 3.01047 3.59008 3.1148 3.41198 3.29289C3.23389 3.47099 3.12955 3.70973 3.11983 3.9614C3.11011 4.21308 3.19572 4.45915 3.35954 4.65046L10.6495 11.9505L3.34954 19.2405C3.24486 19.3301 3.15984 19.4404 3.09982 19.5645C3.0398 19.6886 3.00606 19.8237 3.00075 19.9614C2.99543 20.0991 3.01863 20.2365 3.06891 20.3648C3.11918 20.4931 3.19544 20.6097 3.29289 20.7071C3.39035 20.8046 3.5069 20.8808 3.63522 20.9311C3.76355 20.9814 3.90088 21.0046 4.0386 20.9993C4.17632 20.9939 4.31145 20.9602 4.43551 20.9002C4.55958 20.8402 4.6699 20.7551 4.75954 20.6505L12.0595 13.3605L19.3495 20.6505C19.5408 20.8143 19.7869 20.8999 20.0386 20.8902C20.2903 20.8804 20.529 20.7761 20.7071 20.598C20.8852 20.4199 20.9895 20.1812 20.9993 19.9295C21.009 19.6778 20.9234 19.4318 20.7595 19.2405L13.4695 11.9505Z' fill='%231C212D'/%3e%3c/g%3e%3cdefs%3e%3cclipPath id='clip0_18850_5919'%3e%3crect width='24' height='24' fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e";
+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';
@@ -515,6 +555,7 @@ var packageResult = {
     className: '',
     maxLength: 255,
     iconWidth: '64px',
+    iconPadding: '10px',
     autoComplete: 'off',
     box: {
       sizing: boxSizing,
@@ -548,6 +589,9 @@ var packageResult = {
       marginTop: '10px',
       iconMargin: '10px',
       lineHeight: '19px',
+      box: {
+        shadow: '0 0 0 1px #F20918'
+      },
       font: {
         ...fontObject
       }
@@ -695,6 +739,7 @@ var packageResult = {
   SELECT: {
     dots: false,
     className: '',
+    arrowNoRotate: false,
     showCloseIcon: true,
     // arrowIcon: React.createElement(SvgChecked, { fill: 'green' }),
     // closeIcon: React.createElement(SvgChecked, { fill: 'green' }),
@@ -1071,8 +1116,14 @@ var packageResult = {
     header: {
       color: presetColors.primarySecond,
       height: '30px',
+      align: 'left',
       font: {
         ...fontObject
+      },
+      icon: {
+        maxWidth: '60px',
+        maxHeight: '60px',
+        marginRight: '20px'
       }
     },
     image: {
@@ -1118,9 +1169,9 @@ var packageResult = {
     border: {
       radius: '10px'
     },
-    withParent: true,
+    // withParent: true,
     outSideClose: false,
-    closeIcon: img$2
+    closeIcon: img$4
   },
   // default properties for <Checkbox /> component
   CHECKBOX: {
@@ -1200,7 +1251,31 @@ 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: {
@@ -1265,10 +1340,12 @@ var packageResult = {
       width: '2px',
       style: 'solid',
       color: '#E7E7E7',
+      hoverColor: '#E7E7E7',
       activeColor: '#3C3D46'
     },
     label: {
       color: '#3C3D46',
+      activeColor: '#3C3D46',
       lineHeight: '21px',
       font: {
         ...fontObject
@@ -1278,6 +1355,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
+    }
   }
 };
 
@@ -1613,8 +1723,10 @@ const File = /*#__PURE__*/forwardRef(({
   progressColor,
   noChoosenFile,
   iconPdf,
+  iconDoc,
   iconPng,
   iconJpg,
+  iconDocx,
   iconJpeg,
   iconHeic,
   iconWrong,
@@ -1718,8 +1830,26 @@ const File = /*#__PURE__*/forwardRef(({
         for (let ix = 0; ix < file.length; ix++) {
           if (file[ix]) {
             if (file[ix].size <= maxSize * Math.pow(2, 20)) {
-              if (fileExtensions.includes(file[ix].type.split('/')[1]) || file[ix].name.toLowerCase().endsWith('.heic') || file[ix].name.toLowerCase().endsWith('.heif')) {
-                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: '',
@@ -1766,8 +1896,26 @@ const File = /*#__PURE__*/forwardRef(({
       for (let ix = 0; ix < file.length; ix++) {
         if (file[ix]) {
           if (file[ix].size <= maxSize * Math.pow(2, 20)) {
-            if (fileExtensions.includes(file[ix].type.split('/')[1]) || file[ix].name.toLowerCase().endsWith('.heic') || file[ix].name.toLowerCase().endsWith('.heif')) {
-              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: '',
@@ -1823,9 +1971,17 @@ const File = /*#__PURE__*/forwardRef(({
     } else {
       if (file[0]) {
         if (file[0].size <= maxSize * Math.pow(2, 20)) {
-          if (fileExtensions.includes(file[0].type.split('/')[1]) || (fileExtensions.includes('heic') || fileExtensions.includes('heif')) && (file[0].type === 'image/heif' || file[0].type === 'image/heic' || file[0].name.toLowerCase().endsWith('.heic') || file[0].name.toLowerCase().endsWith('.heif'))) {
+          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);
@@ -1840,6 +1996,7 @@ const File = /*#__PURE__*/forwardRef(({
               });
             } else {
               change(file);
+              setSingleFile(file);
               setImage(URL.createObjectURL(file[0]));
             }
           } else {
@@ -1860,8 +2017,12 @@ const File = /*#__PURE__*/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 => {
@@ -2025,7 +2186,7 @@ const File = /*#__PURE__*/forwardRef(({
       fontFamily: family ?? configStyles.FILE.font.family,
       fontWeight: weight ?? configStyles.FILE.font.weight
     }
-  }, !multiple && image && preview ? image === 'pdf' ? iconPdf ? iconPdf : configStyles.FILE.icon.pdf ? configStyles.FILE.icon.pdf : /*#__PURE__*/React__default.createElement(SvgPdf, null) : image === 'heif' || image === 'heic' ? iconHeic ? iconHeic : configStyles.FILE.icon.heic ? configStyles.FILE.icon.heic : /*#__PURE__*/React__default.createElement(SvgHeic, null) : /*#__PURE__*/React__default.createElement("img", {
+  }, !multiple && image && preview ? image === 'pdf' ? iconPdf ? iconPdf : configStyles.FILE.icon.pdf ? configStyles.FILE.icon.pdf : /*#__PURE__*/React__default.createElement(SvgPdf, null) : image === 'heif' || image === 'heic' ? iconHeic ? iconHeic : configStyles.FILE.icon.heic ? configStyles.FILE.icon.heic : /*#__PURE__*/React__default.createElement(SvgHeic, null) : image === 'doc' ? iconDoc ? iconDoc : configStyles.FILE.icon.doc ? configStyles.FILE.icon.doc : /*#__PURE__*/React__default.createElement(SvgDocIcon, null) : image === 'docx' ? iconDocx ? iconDocx : configStyles.FILE.icon.docx ? configStyles.FILE.icon.docx : /*#__PURE__*/React__default.createElement(SvgDocIcon, null) : /*#__PURE__*/React__default.createElement("img", {
     src: image,
     style: {
       display: 'block',
@@ -2050,7 +2211,8 @@ const File = /*#__PURE__*/forwardRef(({
     }
   }, /*#__PURE__*/React__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.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
     style: {
@@ -2082,7 +2244,7 @@ const File = /*#__PURE__*/forwardRef(({
       whiteSpace: 'nowrap',
       textOverflow: 'ellipsis'
     }
-  }, singleFile ? singleFile[0].name : /*#__PURE__*/React__default.createElement("span", null, fileSizeText ?? configStyles.FILE.sizeText, " ", maxSize, " \u0544\u0532 (", ' ', fileExtensions.toString().split(',').join(', '), " )"))))), /*#__PURE__*/React__default.createElement("div", {
+  }, singleFile ? singleFile.name : /*#__PURE__*/React__default.createElement("span", null, fileSizeText ?? configStyles.FILE.sizeText, " ", maxSize, " \u0544\u0532 (", ' ', fileExtensions.toString().split(',').join(', '), " )"))))), /*#__PURE__*/React__default.createElement("div", {
     style: {
       position: 'absolute',
       top: '0px',
@@ -2121,11 +2283,13 @@ const File = /*#__PURE__*/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,
@@ -2133,7 +2297,7 @@ const File = /*#__PURE__*/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,
@@ -2199,8 +2363,10 @@ File.propTypes = {
   deleteComponent: PropTypes.bool,
   removeComponent: PropTypes.func,
   iconPdf: PropTypes.element,
+  iconDoc: PropTypes.element,
   iconPng: PropTypes.element,
   iconJpg: PropTypes.element,
+  iconDocx: PropTypes.element,
   iconJpeg: PropTypes.element,
   iconHeic: PropTypes.element,
   iconWrong: PropTypes.element,
@@ -2448,15 +2614,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);
@@ -2532,9 +2704,9 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$b = ".table-module_sorting-arrows__BaN-G:after{content:\"▲\";font-size:11px;position:absolute;right:0;top:calc(50% - 12px)}.table-module_sorting-arrows__BaN-G:before{bottom:calc(50% - 12px);content:\"▼\";font-size:11px;position:absolute;right:0}.table-module_td-span__XHo6k{display:inline-block;position:relative}.table-module_td-span__XHo6k>svg{left:0;position:absolute;top:0;z-index:-1}.table-module_list-text__kmKIq{align-items:center;cursor:pointer;display:flex;margin:0 0 8px;min-height:38px;white-space:wrap}.table-module_dots-option-item__jNOxO{box-sizing:border-box;cursor:pointer;display:flex;height:39px;margin-bottom:2px;padding:10px;position:relative;width:100%}.table-module_dots-option-item__jNOxO:after{background-color:#eee;border-radius:1px;-webkit-border-radius:1px;-moz-border-radius:1px;-ms-border-radius:1px;-o-border-radius:1px;content:\"\";height:2px;left:10px;position:absolute;top:calc(100% - 2px);width:calc(100% - 20px)}.table-module_dots-option-item__jNOxO:last-child:after{display:none}";
-var styles$a = {"sorting-arrows":"table-module_sorting-arrows__BaN-G","td-span":"table-module_td-span__XHo6k","list-text":"table-module_list-text__kmKIq","dots-option-item":"table-module_dots-option-item__jNOxO"};
-styleInject(css_248z$b);
+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 = ({
@@ -2592,7 +2764,8 @@ const TH = ({
     unCheckedColor: item.checkBox.unCheckedColor ? item.checkBox.unCheckedColor : ''
   }) : '', /*#__PURE__*/React__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 : '')));
@@ -3496,7 +3669,7 @@ const Table = ({
     });
   };
   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) {
@@ -3506,7 +3679,7 @@ const Table = ({
         });
       }
       return item;
-    });
+    }) : [];
     getDraggableData && getDraggableData(draggableArray);
     setBody(() => draggableArray);
   }, [checkDrag]);
@@ -3517,7 +3690,7 @@ const Table = ({
       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) {
         let column = arrowColumn;
         if (draggable) {
@@ -3545,7 +3718,7 @@ const Table = ({
         newArray = insert;
         checkedItems = handleSetCheckboxArray(insert);
       } 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')) {
@@ -3561,12 +3734,12 @@ const Table = ({
             }
           });
           return item;
-        });
+        }) : [];
         newArray = insert;
         checkedItems = handleSetCheckboxArray(insert);
       }
-      if (draggable) {
-        newArray = insert && insert.length && insert.map((item, index) => {
+      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;
@@ -3583,12 +3756,11 @@ const Table = ({
             colorStatus: draggableColor
           });
           return item;
-        });
+        }) : [];
       }
       setBody(() => [...newArray]);
       setDisableArr(disabledArray);
       setCheckedArray(() => checkedItems);
-      getDraggableData && getDraggableData(newArray);
     }
   }, [dataBody, arrowColumn, arrowShow, draggable]);
   useEffect(() => {
@@ -3635,7 +3807,7 @@ const Table = ({
       console.error(error);
     });
   }, []);
-  return configStyles.TABLE && /*#__PURE__*/React__default.createElement("table", {
+  return configStyles.TABLE && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("table", {
     style: {
       width: '100%',
       borderCollapse: tableRowItem ?? configStyles.TABLE.body.row.asItem ? 'separate' : 'collapse',
@@ -3670,7 +3842,7 @@ const Table = ({
       tableColumnMinWidth: tableColumnMinWidth ?? configStyles.TABLE.column.minWidth,
       tableColumnMaxWidth: tableColumnMaxWidth ?? configStyles.TABLE.column.maxWidth
     });
-  }))), body && body.length > 0 && /*#__PURE__*/React__default.createElement("tbody", {
+  }))), body && body.length > 0 ? /*#__PURE__*/React__default.createElement("tbody", {
     style: {
       boxShadow: tBodyBoxShadow ?? configStyles.TABLE.body.box.shadow
     }
@@ -3682,7 +3854,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)
@@ -3729,7 +3901,7 @@ const Table = ({
         handleOpenCloseRowSingleArrow: handleOpenCloseRowSingleArrow
       });
     }));
-  })), draggable && dragging && draggedItem && /*#__PURE__*/React__default.createElement("div", {
+  })) : '', body && body.length > 0 && draggable && dragging && draggedItem && /*#__PURE__*/React__default.createElement("tbody", null, /*#__PURE__*/React__default.createElement("tr", {
     style: {
       position: 'fixed',
       top: `${position.y - 30}px`,
@@ -3775,7 +3947,9 @@ 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.createElement("div", {
+    className: styles$a['no-tabel-data']
+  }, /*#__PURE__*/React__default.createElement("p", null, "\u054F\u057E\u0575\u0561\u056C\u0576\u0565\u0580 \u0579\u056F\u0561\u0576")));
 };
 Table.propTypes = {
   getData: PropTypes.func,
@@ -3819,9 +3993,9 @@ Table.propTypes = {
   hideBorder: PropTypes.bool
 };
 
-var css_248z$a = ".modal-module_animation__modal__3mt48{animation:modal-module_show-popup__WrH7a .15s;-webkit-animation:modal-module_show-popup__WrH7a .15s}@keyframes modal-module_show-popup__WrH7a{0%{transform:translate3d(0,-50%,0);-webkit-transform:translate3d(0,-50%,0);-moz-transform:translate3d(0,-50%,0);-ms-transform:translate3d(0,-50%,0);-o-transform:translate3d(0,-50%,0)}to{opacity:1;transform:translateZ(0);-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0)}}";
+var 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$a);
+styleInject(css_248z$b);
 
 const SvgNext = ({
   title,
@@ -3941,6 +4115,7 @@ const Modal = ({
   prevIcon,
   nextIcon,
   closeIcon,
+  showCloseIcon,
   closeSlideIcon,
   selected,
   children,
@@ -3953,6 +4128,7 @@ const Modal = ({
   headerText,
   imageWidth,
   headerSize,
+  headerIcon,
   headerStyle,
   headerFamily,
   imageHeight,
@@ -3966,10 +4142,14 @@ const Modal = ({
   headerWeight,
   headerHeight,
   justifyContent,
+  headerTextAlign,
   backgroundColor,
   imageWrapHeight,
   grayDecorHeight,
+  headerIconMaxWidth,
+  headerIconMaxHeight,
   layerBackgroundColor,
+  headerIconMarginRight,
   closeAreaBackgroundColor,
   type = 'content'
 }) => {
@@ -3981,7 +4161,15 @@ const Modal = ({
   const [classProps, setClassProps] = useState({});
   const [configStyles, setConfigStyles] = useState({});
   const handleCloseModal = () => {
-    setShow(false);
+    if (outsideClose !== undefined) {
+      if (outsideClose) {
+        setShow(false);
+      }
+    } else {
+      if (configStyles.MODAL.outsideClose) {
+        setShow(false);
+      }
+    }
   };
   const handleStopClosing = e => {
     e.stopPropagation();
@@ -4076,7 +4264,7 @@ const Modal = ({
   }, []);
   return configStyles.MODAL && /*#__PURE__*/React__default.createElement("div", {
     className: classProps,
-    onClick: outsideClose || configStyles.MODAL.outsideClose ? handleCloseModal : _ => _,
+    onClick: handleCloseModal,
     style: {
       top: '0px',
       left: '0px',
@@ -4125,7 +4313,18 @@ const Modal = ({
       justifyContent: headerText && type === 'content' ? 'space-between' : 'flex-end',
       backgroundColor: closeAreaBackgroundColor ?? configStyles.MODAL.closeAreaBackgroundColor
     }
-  }, headerText && type === 'content' && /*#__PURE__*/React__default.createElement("p", {
+  }, headerIcon && type === 'content' && /*#__PURE__*/React__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.createElement("p", {
     style: {
       flex: '1',
       overflow: 'hidden',
@@ -4134,18 +4333,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.createElement("div", {
-    onClick: handleCloseModal,
+  }, headerText), showCloseIcon ? /*#__PURE__*/React__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.createElement(SvgCloseIcon, null))), /*#__PURE__*/React__default.createElement("div", {
+  }, closeIcon ? closeIcon : configStyles.MODAL.icon.close ? configStyles.MODAL.icon.close : /*#__PURE__*/React__default.createElement(SvgCloseIcon, null)) : ''), /*#__PURE__*/React__default.createElement("div", {
     style: {
       display: 'flex',
       width: '100%',
@@ -4188,7 +4394,7 @@ const Modal = ({
       background: closeAreaBackgroundColor ?? configStyles.MODAL.closeAreaBackgroundColor
     }
   }, /*#__PURE__*/React__default.createElement("button", {
-    onClick: handleCloseModal,
+    onClick: () => setShow(false),
     style: {
       position: 'absolute',
       zIndex: '1',
@@ -4293,14 +4499,20 @@ Modal.propTypes = {
   prevIcon: PropTypes.element,
   nextIcon: PropTypes.element,
   closeIcon: PropTypes.element,
+  showCloseIcon: PropTypes.bool,
   closeSlideIcon: PropTypes.element,
-  alignItems: PropTypes.string,
-  mMaxHeight: PropTypes.string,
   headerText: PropTypes.string,
-  imageWidth: PropTypes.string,
   headerSize: PropTypes.string,
   headerStyle: PropTypes.string,
+  headerIcon: PropTypes.element,
   headerFamily: PropTypes.string,
+  headerTextAlign: PropTypes.string,
+  headerIconMaxWidth: PropTypes.string,
+  headerIconMaxHeight: PropTypes.string,
+  headerIconMarginRight: PropTypes.string,
+  alignItems: PropTypes.string,
+  mMaxHeight: PropTypes.string,
+  imageWidth: PropTypes.string,
   outsideClose: PropTypes.bool,
   showZoomIcon: PropTypes.bool,
   imageMargin: PropTypes.string,
@@ -4379,19 +4591,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] = useState('');
   const handleChange = event => {
@@ -4400,9 +4616,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);
     }
   };
   useEffect(() => {
@@ -4413,7 +4629,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.createElement("input", {
     type: "text",
@@ -4427,7 +4643,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
     }
   });
 };
@@ -4436,11 +4655,13 @@ const PassInput = ({
   show,
   value,
   radius,
-  inputChange,
+  disabled,
   maxLength,
+  inpStyles,
+  inputChange,
   inpAttributes,
-  disabled,
-  inpStyles
+  checkLeftIcon,
+  checkRightIcon
 }) => {
   const [innerShow, setInnerShow] = useState('');
   const [innerValue, setInnerValue] = useState('');
@@ -4480,7 +4701,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
     }
   });
 };
@@ -4493,11 +4717,15 @@ const NumberInput = ({
   withZero,
   disabled,
   inpStyles,
+  cardNumber,
   minNumSize,
   maxNumSize,
   insideError,
   inputChange,
+  errorMessage,
+  checkLeftIcon,
   inpAttributes,
+  checkRightIcon,
   numberMaxLength,
   setInnerErrorMessage
 }) => {
@@ -4506,32 +4734,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(() => '');
+        }
       }
     }
   };
@@ -4541,7 +4788,7 @@ const NumberInput = ({
       if (parseFloat(newVal) === 0) {
         inputChange('');
       } else {
-        inputChange(newVal);
+        inputChange(cardNumber ? newVal.replaceAll('-', '') : newVal);
       }
     }
   };
@@ -4559,10 +4806,11 @@ const NumberInput = ({
   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.createElement("input", {
     type: "text",
     value: innerValue,
@@ -4574,7 +4822,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,
@@ -4583,9 +4834,9 @@ const NumberInput = ({
   });
 };
 
-var css_248z$9 = ".input-module_input-wrap__NunrE{position:relative;width:100%}.input-module_input-content__kP7lZ{appearance:none!important;-webkit-appearance:none!important;display:flex;width:100%}input:-webkit-autofill,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover{background-color:inherit!important}input::-ms-clear,input::-ms-reveal{display:none}.input-module_error-message-show__OrVSo{animation-fill-mode:forwards;animation-name:input-module_error-show__9MP6k}.input-module_inp-num__vH7HL::-webkit-inner-spin-button,.input-module_inp-num__vH7HL::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input-module_inp-num__vH7HL[type=number]{-moz-appearance:textfield}@keyframes input-module_error-show__9MP6k{to{bottom:-20px;transform:scaleX(1);-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);-o-transform:scaleX(1)}}";
+var 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$9);
+styleInject(css_248z$a);
 
 const InputTypes = {
   TEL: 'tel',
@@ -4601,6 +4852,7 @@ const P = styled.span`
     animation: ${true};
 `;
 const Input = ({
+  ssn,
   size,
   name,
   style,
@@ -4640,6 +4892,7 @@ const Input = ({
   errorColor,
   withoutDot,
   errorStyle,
+  iconPadding,
   labelAction,
   errorAction,
   placeholder,
@@ -4656,6 +4909,7 @@ const Input = ({
   errorIconSide,
   showErrorIcon,
   errorMarginTop,
+  errorBoxShadow,
   boxShadowHover,
   errorClassName,
   labelIconMargin,
@@ -4676,6 +4930,7 @@ const Input = ({
   fireInputInsideError,
   backgroundDisableColor,
   telBorderRightColorHover,
+  cardNumber,
   type = 'text'
 }) => {
   const [show, setShow] = useState(false);
@@ -4707,19 +4962,22 @@ const Input = ({
     iName: name ? name : `tui_${uuid}_tui`,
     autoComplete: autoComplete ?? configStyles.INPUT.autoComplete
   };
-  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 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);
   };
@@ -4817,7 +5075,7 @@ const Input = ({
     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
@@ -4829,9 +5087,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
@@ -4860,13 +5118,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.createElement(PassInput, {
     show: show,
     type: type,
@@ -4876,15 +5138,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.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.createElement("div", {
     onClick: type === 'password' ? handleShowPass : _ => _,
     style: {
@@ -4893,15 +5160,16 @@ 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.createElement(P, {
-    animation: animation,
+  }, type === 'password' ? show ? rightIcon[1] : rightIcon[0] : rightIcon[0]) : ''), tooltip ? tooltip : '', innerErrorMessage ? /*#__PURE__*/React__default.createElement(P
+  // animation={animation}
+  , {
     style: {
       margin: '0px',
       display: 'flex',
@@ -4951,6 +5219,7 @@ const Input = ({
   })) : '');
 };
 Input.propTypes = {
+  ssn: PropTypes.bool,
   size: PropTypes.string,
   name: PropTypes.string,
   change: PropTypes.func,
@@ -4965,10 +5234,12 @@ Input.propTypes = {
   height: PropTypes.string,
   radius: PropTypes.string,
   padding: PropTypes.string,
+  cardNumber: PropTypes.bool,
   tooltip: PropTypes.element,
   withoutDot: PropTypes.bool,
   className: PropTypes.string,
   iconWidth: PropTypes.string,
+  iconPadding: PropTypes.string,
   maxLength: PropTypes.number,
   floatToFix: PropTypes.number,
   minNumSize: PropTypes.number,
@@ -5012,6 +5283,7 @@ Input.propTypes = {
   errorLineHeight: PropTypes.string,
   boxSizing: PropTypes.string,
   boxShadow: PropTypes.string,
+  errorBoxShadow: PropTypes.string,
   boxShadowHover: PropTypes.string,
   phoneAlignItems: PropTypes.string,
   numberMaxLength: PropTypes.number,
@@ -5048,10 +5320,12 @@ const Radio = ({
   borderStyle,
   labelFontSize,
   labelFontStyle,
+  labelActiveColor,
   labelFontFamily,
   labelFontWeight,
   labelLineHeight,
   radioMarginRight,
+  borderHoverColor,
   borderActiveColor,
   radioItemMarginRight,
   radioItemMarginBottom,
@@ -5070,22 +5344,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 => {
@@ -5192,15 +5458,13 @@ const Radio = ({
       }
     })), item[innerKeyNames.label] ? /*#__PURE__*/React__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]) : '');
   }));
 };
@@ -5215,11 +5479,13 @@ Radio.propTypes = {
   borderStyle: PropTypes.string,
   labelFontSize: PropTypes.string,
   labelFontStyle: PropTypes.string,
+  labelActiveColor: PropTypes.string,
   labelFontFamily: PropTypes.string,
   labelFontWeight: PropTypes.string,
   labelLineHeight: PropTypes.string,
   radioMarginRight: PropTypes.string,
   getData: PropTypes.func.isRequired,
+  borderHoverColor: PropTypes.string,
   borderActiveColor: PropTypes.string,
   radioItemMarginRight: PropTypes.string,
   radioItemMarginBottom: PropTypes.string,
@@ -5246,12 +5512,13 @@ const SvgArrow = ({
   fill: fillColor ? fillColor : '#3C393E'
 }));
 
-var css_248z$8 = ".select-module_select-content__GCMDX{-webkit-appearance:none;display:flex;flex-direction:column;position:relative}.select-module_select-content-top__Aw-fB{align-items:center;-webkit-appearance:none;display:flex;flex-direction:row;flex-wrap:nowrap;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 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$8);
+styleInject(css_248z$9);
 
 const Select = ({
   dots,
+  lang,
   options,
   multiple,
   disabled,
@@ -5265,6 +5532,7 @@ const Select = ({
   closeIcon,
   errorZindex,
   errorMessage,
+  arrowNoRotate,
   showCloseIcon,
   defaultOption,
   multipleCheckbox,
@@ -5305,6 +5573,8 @@ const Select = ({
   optionItemCursor,
   optionItemPadding,
   optionItemFontSize,
+  optionItemFontStyle,
+  optionItemFontFamily,
   optionItemMinHeight,
   optionItemBoxSizing,
   optionItemFontWeight,
@@ -5314,7 +5584,8 @@ const Select = ({
   optionItemBackgroudColor,
   optionItemBackgroudColorHover,
   boxShadow,
-  boxShadowHover
+  boxShadowHover,
+  insidePagination
 }) => {
   const ref = useRef();
   const [opened, setOpened] = useState(false);
@@ -5462,10 +5733,10 @@ const Select = ({
   }, /*#__PURE__*/React__default.createElement("div", {
     className: styles$7['select-content']
   }, /*#__PURE__*/React__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,
@@ -5474,19 +5745,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$7['select-content-top']}`
+    onMouseLeave: disabled ? _ => _ : () => handleMouseLeave()
   }, /*#__PURE__*/React__default.createElement("div", {
     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) => {
@@ -5498,7 +5770,10 @@ const Select = ({
       }
     }
   }) : defaultOption ? defaultOption : ''), /*#__PURE__*/React__default.createElement("div", {
-    className: `${styles$7['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.createElement("span", null, newSelected.length), (showCloseIcon === true || showCloseIcon === false ? showCloseIcon : configStyles.SELECT.showCloseIcon) && !disabled && newSelected && newSelected.length > 0 && /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$7['close-icon']}`,
     onClick: disabled ? _ => _ : handleClearSelect,
@@ -5506,10 +5781,11 @@ const Select = ({
       marginLeft: multiple && newSelected.length > 1 ? '17px' : '0px'
     }
   }, closeIcon ? closeIcon : configStyles.SELECT.closeIcon ? configStyles.SELECT.closeIcon : /*#__PURE__*/React__default.createElement(SvgCloseIcon, null)), !disabled ? /*#__PURE__*/React__default.createElement("div", {
+    className: `${styles$7['arrow-icon']}`,
     style: {
-      transform: opened ? 'rotate(180deg)' : 'rotate(0deg)'
-    },
-    className: `${styles$7['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.createElement(SvgArrow, null)) : '')), opened && existOptions && existOptions.length > 0 && !disabled ? /*#__PURE__*/React__default.createElement("div", {
     style: {
       boxShadow: optionsBoxShadow ?? configStyles.SELECT.options.box.shadow,
@@ -5535,12 +5811,15 @@ const Select = ({
         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.createElement(SingleCheckbox, {
       checked: option.checked
@@ -5560,6 +5839,7 @@ const Select = ({
 };
 Select.propTypes = {
   dots: PropTypes.bool,
+  lang: PropTypes.bool,
   options: PropTypes.array,
   multiple: PropTypes.bool,
   onChange: PropTypes.func,
@@ -5571,6 +5851,7 @@ Select.propTypes = {
   className: PropTypes.string,
   arrowIcon: PropTypes.element,
   closeIcon: PropTypes.element,
+  arrowNoRotate: PropTypes.bool,
   showCloseIcon: PropTypes.bool,
   errorZindex: PropTypes.number,
   errorMessage: PropTypes.string,
@@ -5610,6 +5891,8 @@ Select.propTypes = {
   optionItemCursor: PropTypes.string,
   optionItemPadding: PropTypes.string,
   optionItemFontSize: PropTypes.string,
+  optionItemFontStyle: PropTypes.string,
+  optionItemFontFamily: PropTypes.string,
   optionItemMinHeight: PropTypes.string,
   optionItemBoxSizing: PropTypes.string,
   optionItemFontWeight: PropTypes.string,
@@ -5619,7 +5902,8 @@ Select.propTypes = {
   optionItemBackgroudColor: PropTypes.string,
   optionItemBackgroudColorHover: PropTypes.string,
   boxShadow: PropTypes.string,
-  boxShadowHover: PropTypes.string
+  boxShadowHover: PropTypes.string,
+  insidePagination: PropTypes.bool
 };
 
 const SvgToasterInfo = ({
@@ -5741,9 +6025,9 @@ const SvgToasterSuccess = ({
   fill: fillColor ? fillColor : '#0DA574'
 }));
 
-var css_248z$7 = "#toaster-module_top-left__q0LcN{left:0;top:1em}#toaster-module_top-right__f-AFL{right:0;top:1em}#toaster-module_top-center__eVRbc{left:50%;top:1em;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%)}#toaster-module_bottom-left__b-YHI{bottom:1em;left:0}#toaster-module_bottom-right__g9ACP{bottom:1em;right:0}#toaster-module_bottom-center__4KcFe{bottom:1em;left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%)}.toaster-module_top-left__q0LcN{left:0;top:1em}.toaster-module_top-right__f-AFL{right:0;top:1em}.toaster-module_top-center__eVRbc{left:50%;top:1em;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%)}.toaster-module_bottom-left__b-YHI{bottom:1em;left:0}.toaster-module_bottom-right__g9ACP{bottom:1em;right:0}.toaster-module_bottom-center__4KcFe{bottom:1em;left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%)}.toaster-module_notify-block__pRnEB{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.toaster-module_bounce-in-right__shR2D{-webkit-animation-name:toaster-module_bounceInRight__rSk5p;animation-name:toaster-module_bounceInRight__rSk5p}.toaster-module_bounce-out-right__48pyA{-webkit-animation-name:toaster-module_bounceOutRight__bmFGS;animation-name:toaster-module_bounceOutRight__bmFGS}.toaster-module_notify-desc__bcWe2,.toaster-module_notify-title__8lFLy{overflow:hidden;text-overflow:ellipsis}.toaster-module_notify-desc__bcWe2{-webkit-box-orient:vertical;-webkit-line-clamp:2;display:-webkit-box}@keyframes toaster-module_bounceInRight__rSk5p{0%{opacity:0;right:-100%}60%{opacity:1;right:40px}75%{right:0}90%{right:30px}to{right:20px}}@keyframes toaster-module_bounceOutRight__bmFGS{0%{opacity:1;right:20px}60%{opacity:1;right:60px}to{opacity:0;right:-100%}}.toaster-module_bounce-in-left__xoF-M{-webkit-animation-name:toaster-module_bounceInLeft__to59v;animation-name:toaster-module_bounceInLeft__to59v}.toaster-module_bounce-out-left__fDOZw{-webkit-animation-name:toaster-module_bounceOutLeft__k5QgO;animation-name:toaster-module_bounceOutLeft__k5QgO}@keyframes toaster-module_bounceInLeft__to59v{0%{left:-100%;opacity:0}60%{left:40px;opacity:1}75%{left:0}90%{left:30px}to{left:20px}}@keyframes toaster-module_bounceInLeftMobile__CA2dc{0%{left:-100%;opacity:0}60%{left:40px;opacity:1}75%{left:0}90%{left:30px}to{left:0}}@keyframes toaster-module_bounceOutLeft__k5QgO{0%{left:20px;opacity:1}60%{left:60px;opacity:1}to{left:-100%;opacity:0}}@media(max-width:480px){.toaster-module_bounce-in-left__xoF-M{-webkit-animation-name:toaster-module_bounceInLeftMobile__CA2dc;animation-name:toaster-module_bounceInLeftMobile__CA2dc}}";
+var 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$7);
+styleInject(css_248z$8);
 
 const ToasterType = {
   info: 'info',
@@ -6143,9 +6427,9 @@ const SvgTooltip = ({
   fill: fillColor ? fillColor : '#D1D1D1'
 }));
 
-var css_248z$6 = ".tooltip-module_tooltip-block__v8U9u{align-items:center;display:flex;justify-content:center;position:relative}.tooltip-module_tooltip__emM6A{box-sizing:border-box;padding:10px;position:absolute;z-index:1}.tooltip-module_tooltip-rel__to9gq{align-items:center;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;display:flex;height:auto;justify-content:center;min-height:10px;min-width:30px;position:relative;width:auto}.tooltip-module_tooltip-decor__qvt7t{border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;height:10px;position:absolute;transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);width:10px;z-index:-1}";
+var 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$6);
+styleInject(css_248z$7);
 
 const TooltipDirections = {
   TOP: 'top',
@@ -6349,9 +6633,9 @@ const SvgCaptchaArrowDown = ({
   fill: fillColor ? fillColor : '#00236A'
 }));
 
-var css_248z$5 = ".captcha-module_start-point__LkOqy:after{background-color:#d1d1d1;border:2px solid #fff;border-radius:6px;-webkit-border-radius:6px;-moz-border-radius:6px;-ms-border-radius:6px;-o-border-radius:6px;content:\"\";height:10px;left:0;position:absolute;top:7.5px;width:10px;z-index:-1}.captcha-module_range__k24I2{-webkit-appearance:none;margin:0}.captcha-module_range__k24I2::-webkit-slider-runnable-track{-webkit-appearance:none;width:100%}.captcha-module_range-default__-O0QD::-webkit-slider-thumb{background-image:url(../../assets/range-arrow-default.svg)}.captcha-module_range-default__-O0QD::-webkit-slider-thumb,.captcha-module_range-error__FKMfG::-webkit-slider-thumb{-webkit-appearance:none;background-position:-5px;background-repeat:no-repeat;background-size:46px 46px;border-radius:17px;-webkit-border-radius:17px;-moz-border-radius:17px;-ms-border-radius:17px;-o-border-radius:17px;cursor:ew-resize;height:34px;width:34px}.captcha-module_range-error__FKMfG::-webkit-slider-thumb{background-image:url(../../assets/range-arrow-error.svg)}.captcha-module_range-success__VzLPq::-webkit-slider-thumb{-webkit-appearance:none;background-image:url(../../assets/range-arrow-success.svg);background-position:-5px;background-repeat:no-repeat;background-size:46px 46px;border-radius:17px;-webkit-border-radius:17px;-moz-border-radius:17px;-ms-border-radius:17px;-o-border-radius:17px;cursor:ew-resize;height:34px;width:34px}";
+var 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$5);
+styleInject(css_248z$6);
 
 const Captcha = ({
   color,
@@ -6496,9 +6780,9 @@ Captcha.propTypes = {
   getRange: PropTypes.func.isRequired
 };
 
-var css_248z$4 = ".stepper-module_stepper-container__-OVGy>div:last-child:before{display:none}.stepper-module_activeRing__Lzvh1,.stepper-module_bigRing__5GBm0{border-radius:50%;height:36px;margin-bottom:36px;position:relative;width:36px}.stepper-module_bigRing__5GBm0{box-shadow:0 0 0 2px #d1d1d1}.stepper-module_bigRing__5GBm0:before{background:#d1d1d1}.stepper-module_activeRing__Lzvh1{box-shadow:0 0 0 2px #00236a}.stepper-module_activeRing__Lzvh1:before{background:#00236a}.stepper-module_activeRing__Lzvh1:before,.stepper-module_bigRing__5GBm0:before{border-radius:20px;bottom:-32px;content:\"\";height:28px;left:0;margin:auto;overflow:hidden;position:absolute;right:0;width:2px}.stepper-module_smallActiveRing__im-XG,.stepper-module_smallRing__u-5a8{border-radius:50%;bottom:0;left:0;margin:auto;position:absolute;right:0;top:0}.stepper-module_smallRing__u-5a8{background-color:#d1d1d1;height:14px;width:14px}.stepper-module_smallActiveRing__im-XG{align-items:center;background-color:#00236a;color:#fff;display:flex;height:28px;justify-content:center;width:28px}";
+var 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$4);
+styleInject(css_248z$5);
 
 const Stepper = ({
   stepLength,
@@ -6661,8 +6945,8 @@ Checkbox.propTypes = {
   data: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object])
 };
 
-var css_248z$3 = "textarea{-webkit-appearance:none}textarea::-webkit-scrollbar{width:6px}textarea::-webkit-scrollbar-track{background:#eee}textarea::-webkit-scrollbar-thumb,textarea::-webkit-scrollbar-track{border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px}textarea::-webkit-scrollbar-thumb{background:#d1d1d1}";
-styleInject(css_248z$3);
+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',
@@ -6670,6 +6954,7 @@ const PositionSide = {
 };
 const Textarea = ({
   size,
+  name,
   style,
   family,
   weight,
@@ -6731,25 +7016,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));
       }
     }
   };
-  useEffect(() => {
-    if (!onChange) {
-      alert('Please add onChange function on Textarea component');
-    }
-  }, [onChange]);
   useEffect(() => {
     if (value === undefined) {
       alert('Please add value prop on Textarea component');
@@ -6796,7 +7082,7 @@ const Textarea = ({
     style: {
       display: labelDisplay ?? configStyles.TEXTAREA.label.display
     }
-  }, label, required && /*#__PURE__*/React__default.createElement("sup", null, /*#__PURE__*/React__default.createElement(SvgRequired, null))) : '', showCharacterCount && maxLength && characterCountPosition === 'top' && /*#__PURE__*/React__default.createElement("span", null, maxLength - value.length, " \u0576\u056B\u0577")), /*#__PURE__*/React__default.createElement("textarea", {
+  }, label, required && /*#__PURE__*/React__default.createElement("sup", null, /*#__PURE__*/React__default.createElement(SvgRequired, null))) : '', showCharacterCount && maxLength && characterCountPosition === 'top' && /*#__PURE__*/React__default.createElement("span", null, maxLength - innerValue.length, " \u0576\u056B\u0577")), /*#__PURE__*/React__default.createElement("textarea", {
     style: {
       width: '100%',
       border: 'none',
@@ -6819,6 +7105,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,
@@ -6858,6 +7145,7 @@ const Textarea = ({
 };
 Textarea.propTypes = {
   size: PropTypes.string,
+  name: PropTypes.string,
   style: PropTypes.string,
   family: PropTypes.string,
   weight: PropTypes.string,
@@ -6868,6 +7156,7 @@ Textarea.propTypes = {
   radius: PropTypes.string,
   required: PropTypes.bool,
   disabled: PropTypes.bool,
+  onChange: PropTypes.func,
   padding: PropTypes.string,
   minWidth: PropTypes.string,
   maxWidth: PropTypes.string,
@@ -6896,10 +7185,304 @@ Textarea.propTypes = {
   borderFocusColor: PropTypes.string,
   borderHoverColor: PropTypes.string,
   labelMarginBottom: PropTypes.string,
-  onChange: PropTypes.func.isRequired,
   characterCountPosition: PropTypes.oneOf(Object.values(PositionSide))
 };
 
+const AccordionItem = ({
+  item,
+  open,
+  index,
+  onClick,
+  openIcon,
+  closeIcon,
+  showIcons,
+  className,
+  titleAlign,
+  multipleOpen,
+  openHoverIcon,
+  color,
+  border,
+  padding,
+  fontSize,
+  fontStyle,
+  fontWeight,
+  fontFamily,
+  borderTop,
+  borderLeft,
+  hoverColor,
+  borderRight,
+  borderRadius,
+  borderBottom,
+  marginBottom,
+  backgroundColor,
+  backgroundHoverColor
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isHover, setIsHover] = useState(false);
+  const handleClick = () => {
+    onClick(item, index);
+    if (multipleOpen) {
+      setIsOpen(() => !isOpen);
+    }
+  };
+  const handleMouseEnter = () => {
+    setIsHover(() => true);
+  };
+  const handleMouseLeave = () => {
+    setIsHover(() => false);
+  };
+  useEffect(() => {
+    setIsOpen(() => open);
+  }, [open]);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: className,
+    style: {
+      marginBottom: marginBottom ? marginBottom : '0px'
+    }
+  }, /*#__PURE__*/React__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.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.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.createElement("div", {
+    style: {
+      overflow: 'hidden',
+      height: isOpen ? 'auto' : '0px'
+    }
+  }, item.content ? item.content : ''));
+};
+AccordionItem.propTypes = {
+  open: PropTypes.bool
+};
+
+const SvgGreenplus = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/React.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.createElement("title", {
+  id: titleId
+}, title) : null, /*#__PURE__*/React.createElement("path", {
+  stroke: "#009B8B",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  strokeWidth: 1.6,
+  d: "M8 1v14M1 8h14"
+}));
+
+const SvgGreenminus = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/React.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.createElement("title", {
+  id: titleId
+}, title) : null, /*#__PURE__*/React.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] = useState(-1);
+  const [classProps, setClassProps] = useState({});
+  const [configStyles, setConfigStyles] = useState({});
+  const handleClick = (item, index) => {
+    if (click) {
+      click(item);
+    }
+    if (!multipleOpen) {
+      setOpenIndex(() => openIndex === index ? -1 : index);
+    }
+  };
+  useEffect(() => {
+    className && setClassProps(() => classnames(className ?? configStyles.BUTTON.className));
+  }, [className]);
+  useEffect(() => {
+    configStylesPromise.then(data => {
+      setClassProps(() => classnames(className ?? data.BUTTON.className));
+      setConfigStyles(() => {
+        return {
+          ...data
+        };
+      });
+    }, error => {
+      console.error(error);
+    });
+  }, []);
+  return configStyles.ACCORDION && /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      width: '100%'
+    }
+  }, data && data.length ? data.map((item, index) => {
+    return /*#__PURE__*/React__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.createElement("img", {
+        src: openIcon,
+        alt: "open icon"
+      }) : configStyles.ACCORDION.icon.open ? /*#__PURE__*/React__default.createElement("img", {
+        src: configStyles.ACCORDION.icon.open,
+        alt: "open icon"
+      }) : /*#__PURE__*/React__default.createElement(SvgGreenplus, null),
+      openHoverIcon: openHoverIcon ? /*#__PURE__*/React__default.createElement("img", {
+        src: openHoverIcon,
+        alt: "open icon"
+      }) : configStyles.ACCORDION.icon.openHover ? /*#__PURE__*/React__default.createElement("img", {
+        src: configStyles.ACCORDION.icon.openHover,
+        alt: "open icon"
+      }) : /*#__PURE__*/React__default.createElement(SvgGreenplus, null),
+      closeIcon: closeIcon ? /*#__PURE__*/React__default.createElement("img", {
+        src: closeIcon,
+        alt: "close icon"
+      }) : configStyles.ACCORDION.icon.close ? /*#__PURE__*/React__default.createElement("img", {
+        src: configStyles.ACCORDION.icon.close,
+        alt: "close icon"
+      }) : /*#__PURE__*/React__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.arrayOf(PropTypes.shape({
+    title: PropTypes.string,
+    content: PropTypes.element
+  })),
+  click: PropTypes.func,
+  showIcons: PropTypes.bool,
+  multipleOpen: PropTypes.bool,
+  color: PropTypes.string,
+  hoverColor: PropTypes.string,
+  backgroundColor: PropTypes.string,
+  backgroundHoverColor: PropTypes.string,
+  titleAlign: PropTypes.oneOf(['left', 'center', 'right']),
+  padding: PropTypes.string,
+  openIcon: PropTypes.string,
+  className: PropTypes.string,
+  closeIcon: PropTypes.string,
+  marginBottom: PropTypes.string,
+  openHoverIcon: PropTypes.string,
+  borderTop: PropTypes.bool,
+  borderLeft: PropTypes.bool,
+  borderRight: PropTypes.bool,
+  borderBottom: PropTypes.bool,
+  borderColor: PropTypes.string,
+  borderWidth: PropTypes.string,
+  borderStyle: PropTypes.string,
+  borderRadius: PropTypes.string,
+  fontSize: PropTypes.string,
+  fontStyle: PropTypes.string,
+  fontWeight: PropTypes.number,
+  fontFamily: PropTypes.string
+};
+
 const Swipe = ({
   id,
   title,
@@ -6921,8 +7504,8 @@ const Swipe = ({
   } = props || {};
   return /*#__PURE__*/React__default.createElement("div", {
     style: {
-      width: position === 'left' || position === 'right' ? width ?? SWIPEMODAL.width : '100%',
-      height: position === 'top' || position === 'bottom' ? height ?? SWIPEMODAL.height : '100vh'
+      width: '100%',
+      height: '100%'
     }
   }, (title || showCloseIcon) && /*#__PURE__*/React__default.createElement("div", {
     style: {
@@ -6991,11 +7574,11 @@ const createElem = (id, title, child, props, swipeBlock, innerConfigStyles) => {
     borderRadius,
     backgroundColor
   } = props || {};
-  swipeBlock.style.position = 'fixed';
+  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 : '100vh';
+  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;
@@ -7029,26 +7612,24 @@ const createSwipe = (id, title, child, props, swipable) => {
     };
     createElem(id, title, child, props, swipeBlock, innerConfigStyles);
     if (!swipable) {
-      const widthParent = hasOwnerProperty(props, 'withParent') ? props.withParent === true ? true : false : innerConfigStyles.SWIPEMODAL.withParent;
       swipable = document.createElement('div');
       swipable.setAttribute('id', 'swipable');
-      swipable.style.position = 'fixed';
+      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.visibility = 'hidden';
-      swipable.style.width = widthParent ? '100%' : '0px';
-      swipable.style.height = widthParent ? '100vh' : '0px';
+      swipable.style.width = '100%';
+      swipable.style.height = '100%';
       swipable.style.backgroundColor = props?.parent?.backgroundColor ?? innerConfigStyles.SWIPEMODAL.parent.colors.background;
-      swipable.classList.add(styles$2['visible']);
       if (props.outSideClose || innerConfigStyles.SWIPEMODAL.outSideClose) {
         swipable.addEventListener('click', function () {
           hasOwnerProperty(props, 'callClose') && {}.toString.call(props.callClose) === '[object Function]' ? props.callClose() : '';
         });
       }
-      document.body.appendChild(swipable);
+      const SwipifyBlock = document.getElementById('swipify_tui');
+      SwipifyBlock.appendChild(swipable);
     }
     swipable.appendChild(swipeBlock);
   }, error => {
@@ -7097,7 +7678,6 @@ const swipe = {
   close: id => {
     if (id === undefined || id === null && (typeof id !== 'string' || typeof id !== 'number')) {
       alert('Please pass valid id prop (string / number)  when call swipe.close function');
-      return;
     }
     let swipable = document.getElementById('swipable');
     swipeCount -= 1;
@@ -7112,7 +7692,8 @@ const swipe = {
           if (swipeCount === 0 && swipable) {
             window.removeEventListener('popstate', handleNavigationChange);
             window.removeEventListener('navigationchange', handleNavigationChange);
-            document.body.removeChild(swipable);
+            const SwipifyBlock = document.getElementById('swipify_tui');
+            SwipifyBlock.removeChild(swipable);
           }
         }, 200);
       } else {
@@ -7120,14 +7701,38 @@ const swipe = {
         if (swipeCount === 0 && swipable) {
           window.removeEventListener('popstate', handleNavigationChange);
           window.removeEventListener('navigationchange', handleNavigationChange);
-          document.body.removeChild(swipable);
+          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 = () => {
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
+  const ref = useRef(null);
+  useEffect(() => {
+    const parentSize = ref.current.parentNode.style.height;
+    if (Number(parentSize.replace(/\D/g, '')) > 0) {
+      ref.current.style.height = '100%';
+    } else {
+      ref.current.style.height = '100vh';
+    }
+  }, [ref]);
+  return /*#__PURE__*/React__default.createElement("div", {
+    ref: ref,
+    id: "swipify_tui",
+    style: {
+      position: 'relative',
+      width: '100%',
+      overflow: 'hidden',
+      zIndex: 1
+    }
+  });
 };
 
 const TypographyType = {
@@ -7246,13 +7851,13 @@ const range = (start, end) => {
   }, (_, idx) => idx + start);
 };
 const PaginationRange = ({
-  offset,
+  innerOffset,
   currentTotalCount,
   currentPageNumber
 }) => {
   const paginationRange = 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);
@@ -7275,14 +7880,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,
@@ -7321,57 +7922,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] = useState('');
   const [error, setError] = useState(false);
+  const [isHover, setIsHover] = useState(false);
   const [classProps, setClassProps] = useState({});
+  const [offsetArgs, setOffsetArgs] = useState({});
+  const [innerOffset, setInnerOffset] = useState(2);
   const [configStyles, setConfigStyles] = useState({});
+  const [innerShowOffset, setInnerShowOffset] = useState(false);
   const [currentPageNumber, setCurrentPage] = useState(currentPage);
   const [currentTotalCount, setcurrentTotalCount] = useState(totalCount);
-  useEffect(() => {
-    configStylesPromise.then(data => {
-      setClassProps(() => classnames(
-      // 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);
-    });
-  }, []);
-  useEffect(() => {
-    className && setClassProps(() => classnames(
-    // TODO: check and remove pagination-bar-rem class
-    styles$1.list, className ?? configStyles.PAGINATION.className, `${styles$1['pagination-bar']} pagination-bar-rem`));
-  }, [className]);
-  useEffect(() => {
-    setcurrentTotalCount(totalCount);
-  }, [totalCount]);
-  useEffect(() => {
-    setCurrentPage(currentPage);
-  }, [currentPage]);
-  const onPageChange = page => {
-    if (page > 0) {
-      setCurrentPage(page);
-    }
-  };
-  useEffect(() => {
-    onChange(currentPageNumber);
-  }, [currentPageNumber]);
   const paginationRange = PaginationRange({
     currentPageNumber,
     currentTotalCount,
-    offset
+    innerOffset
   });
   if (currentPageNumber === 0 || paginationRange?.length < 2) {
     return null;
@@ -7413,16 +8008,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];
+  useEffect(() => {
+    configStylesPromise.then(data => {
+      setClassProps(() => classnames(
+      // 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);
+    });
+  }, []);
+  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]);
+  useEffect(() => {
+    className && setClassProps(() => classnames(
+    // TODO: check and remove pagination-bar-rem class
+    styles$1.list, className ?? configStyles.PAGINATION.className, `${styles$1['pagination-bar']} pagination-bar-rem`));
+  }, [className]);
+  useEffect(() => {
+    setcurrentTotalCount(totalCount);
+    setInnerOffset(() => offset > totalCount ? totalCount : offset);
+  }, [totalCount, offset]);
+  useEffect(() => {
+    setCurrentPage(currentPage);
+  }, [currentPage]);
+  useEffect(() => {
+    onChange(currentPageNumber);
+  }, [currentPageNumber]);
   return configStyles.PAGINATION && /*#__PURE__*/React__default.createElement("div", {
     style: {
       display: 'flex',
@@ -7433,6 +8100,20 @@ const Pagination = ({
     className: classProps
   }, /*#__PURE__*/React__default.createElement("ul", null, /*#__PURE__*/React__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,
@@ -7443,7 +8124,17 @@ const Pagination = ({
       let currentPageIndex = paginationRange.indexOf(currentPageNumber);
       return /*#__PURE__*/React__default.createElement("li", {
         key: id,
-        className: classnames(`${styles$1['pagination-jump-next']} pagination-jump-next-rem`, styles$1.listItem),
+        className: classnames(`${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.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", {
@@ -7462,43 +8153,144 @@ const Pagination = ({
     return /*#__PURE__*/React__default.createElement("li", {
       onClick: () => onPageChange(pageNumber),
       key: id,
-      className: classnames(`${pageNumber === currentPageNumber ? styles$1.selected : styles$1.listItem}`, `${styles$1['pagination-item']} pagination-item-rem`)
+      className: classnames(`${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.createElement("button", {
     onClick: onNext,
     disabled: currentPageNumber === lastPage ? true : false,
-    className: `${styles$1['pagination-btn']} pagination-btn-rem`
-  }, /*#__PURE__*/React__default.createElement(SvgNextarrow, null))), goTo && /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__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.createElement(SvgNextarrow, null))), innerShowOffset && /*#__PURE__*/React__default.createElement("div", {
+    className: "show-offset-block",
+    style: {
+      width: '91px',
+      height: '34px',
+      marginLeft: '10px',
+      marginRight: '3px'
+    }
+  }, /*#__PURE__*/React__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.createElement("div", null, /*#__PURE__*/React__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.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.bool,
   offset: PropTypes.number,
-  totalCount: PropTypes.number,
+  getOffset: PropTypes.func,
+  showOffset: PropTypes.bool,
   className: PropTypes.string,
-  currentPage: PropTypes.number
+  totalCount: PropTypes.number,
+  currentPage: PropTypes.number,
+  offsetCounts: PropTypes.arrayOf(PropTypes.number),
+  color: PropTypes.string,
+  width: PropTypes.string,
+  height: PropTypes.string,
+  fontSize: PropTypes.string,
+  fontWeight: PropTypes.string,
+  fontFamily: PropTypes.string,
+  fontStyle: PropTypes.string,
+  lineHeight: PropTypes.string,
+  activeColor: PropTypes.string,
+  hoverColor: PropTypes.string,
+  backgroundColor: PropTypes.string,
+  hoverBackgroundColor: PropTypes.string,
+  activeBackgroundColor: PropTypes.string,
+  borderColor: PropTypes.string,
+  borderWidth: PropTypes.string,
+  borderRadius: PropTypes.string
 };
 
 var css_248z = ".autocomplete-module_auto-complete__oUOv9{appearance:none!important;-webkit-appearance:none!important}";
@@ -7916,4 +8708,4 @@ Autocomplete.propTypes = {
   backgroundDisableColor: PropTypes.string
 };
 
-export { Autocomplete, Button, Captcha, Checkbox, DirectionMode, File, IconSides, Input, InputTypes, Modal, Pagination, PositionSide, Radio, RadioDirectionMode, Select, Stepper, SwipeModal, Table, Textarea, Toaster, Tooltip, TooltipDirections, Typography, TypographyType, swipe, toast };
+export { Accordion, Autocomplete, Button, Captcha, Checkbox, DirectionMode, File, IconSides, Input, InputTypes, Modal, Pagination, PositionSide, Radio, RadioDirectionMode, Select, Stepper, SwipeModal, Table, Textarea, Toaster, Tooltip, TooltipDirections, Typography, TypographyType, swipe, toast };