@xaypay/tui 0.0.53 → 0.0.54

package/dist/index.es.js

@@ -1,26 +1,7 @@
-import React, { useState, useEffect, createRef, useMemo, useRef } from 'react';
+import React, { useState, useEffect, useRef, createRef, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-const _ = require('lodash');
-const compereConfigs = () => {
-  let projectConfig = {};
-  let packageConfig = {};
-  try {
-    packageConfig = require('../tui.config.js');
-  } catch (error) {
-    // console.log(error, 'Package: tui.config.js file is not define');
-  }
-  try {
-    projectConfig = require('../../../../tui.config.js');
-  } catch (error) {
-    projectConfig = {};
-    // console.log(error, 'Project: if you want to use custom styles, create tui.config.js file in your project root');
-  }
-
-  return _.merge(packageConfig, projectConfig);
-};
-
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
   var insertAt = ref.insertAt;
@@ -48,90 +29,139 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$c = ".tooltip-module_tooltip__emM6A{padding:10px;position:absolute;z-index:1}.tooltip-module_tooltip-rel__to9gq{align-items:center;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;display:flex;height:auto;justify-content:center;min-height:20px;min-width:50px;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$b = {"tooltip":"tooltip-module_tooltip__emM6A","tooltip-rel":"tooltip-module_tooltip-rel__to9gq","tooltip-decor":"tooltip-module_tooltip-decor__qvt7t"};
+var css_248z$c = ".file-module_file-form__l13d5{align-items:center;background:#fbfbfb;border:2px dashed;border-radius:6px;cursor:pointer;display:flex;flex-direction:column;height:190px;justify-content:space-between;overflow:hidden;padding:4px 0;position:relative;width:100%}.file-module_file-form-wrap__qY--B:before{background:rgba(60,57,62,.4);border-radius:6px;content:\"\";height:100%;left:0;opacity:0;pointer-events:none;position:absolute;top:0;transition:opacity .24s;width:100%;z-index:1}.file-module_file-form-wrap__qY--B.file-module_active__L1gPt:hover:before{opacity:1;pointer-events:unset}.file-module_file-form-wrap__qY--B.file-module_active__L1gPt:hover .file-module_delete-upload-icon__PWN66{opacity:1}.file-module_file-form-inner-upload__tq3Dn{align-items:center;display:flex;flex-direction:column;justify-content:space-between;padding-bottom:16px;padding-top:48px}.file-module_file-form-inner-upload__tq3Dn>img{display:block;margin-bottom:14px}.file-module_upload-info__a8GFs{margin-bottom:40px;max-width:150px;text-align:center}.file-module_upload-info-txt__l11uN{color:#0da574}.file-module_file-form__l13d5.file-module_default__t7KU0{border-color:#d1d1d1}.file-module_file-form__l13d5.file-module_error__H-M4Z{border-color:#e00!important}.file-module_file-form__l13d5.file-module_accept__WTW6V{border-color:#00236a}.file-module_delete-upload-icon__PWN66{align-items:center;background:#fff;border-radius:6px;cursor:pointer;display:flex;height:26px;justify-content:center;opacity:0;position:absolute;right:10px;top:10px;transition:opacity .24s;width:26px;z-index:11}.file-module_delete-upload-icon__PWN66>i{color:#00236a;font-size:16px}.file-module_upload-file-content__QHMjn{align-items:center;display:flex;height:100%;justify-content:center;max-height:190px;overflow:hidden;position:relative;width:100%}.file-module_upload-file-content__QHMjn>img{bottom:0;display:block;height:190px;left:0;margin:auto;max-height:190px;position:absolute;right:0;top:0;width:auto}.file-module_file-form-title__zWTSB{margin-bottom:10px;max-width:390px;word-break:break-all}.file-module_file-form-wrap__qY--B{position:relative;transform:translateZ(0)}";
+var styles$b = {"file-form-wrap":"file-module_file-form-wrap__qY--B","file-form":"file-module_file-form__l13d5","active":"file-module_active__L1gPt","delete-upload-icon":"file-module_delete-upload-icon__PWN66","file-form-inner-upload":"file-module_file-form-inner-upload__tq3Dn","upload-info":"file-module_upload-info__a8GFs","upload-info-txt":"file-module_upload-info-txt__l11uN","default":"file-module_default__t7KU0","error":"file-module_error__H-M4Z","accept":"file-module_accept__WTW6V","upload-file-content":"file-module_upload-file-content__QHMjn","file-form-title":"file-module_file-form-title__zWTSB"};
 styleInject(css_248z$c);
 
-const Tooltip = ({
-  type,
-  text,
-  width,
-  color,
-  height,
-  bgColor,
-  fontSize,
-  tBgColor,
+var css_248z$b = "";
+styleInject(css_248z$b);
+
+const File = ({
+  name,
+  label,
+  maxSize,
+  required,
+  disabled,
+  onChange,
   className,
-  fontFamily,
-  borderRadius,
-  tBorderRadius
+  defaultData,
+  errorMesage,
+  fileExtensions,
+  ...props
 }) => {
-  const tooltipRef = /*#__PURE__*/createRef(null);
-  const [tooltipWidth, setTooltipWidth] = useState(0);
-  const [tooltipHeight, setTooltipHeight] = useState(0);
-  useState(false);
-  const configStyles = compereConfigs();
-  const classProps = classnames(styles$b['tooltip'], className);
-  useEffect(_ => {
-    if (!type && !text) {
-      alert('Add type and text on tooltip');
-    } else if (!type) {
-      alert('Add type on tooltip');
-    } else if (!text) {
-      alert('Add text on tooltip');
-    }
-    tooltipRef.current && tooltipRef.current.clientWidth && tooltipRef.current.clientWidth > 0 && setTooltipWidth(tooltipRef.current.clientWidth);
-    tooltipRef.current && tooltipRef.current.clientHeight && tooltipRef.current.clientHeight > 0 && setTooltipHeight(tooltipRef.current.clientHeight);
-  }, [type, text, tooltipWidth, tooltipRef]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: `${styles$b['tooltip-block']}`,
-    style: {
-      width: width ? width : configStyles.TOOLTIP.width,
-      height: height ? height : configStyles.TOOLTIP.height,
-      backgroundColor: bgColor ? bgColor : configStyles.TOOLTIP.bgColor
+  const pdfImageName = 'https://play-lh.googleusercontent.com/kIwlXqs28otssKK_9AKwdkB6gouex_U2WmtLshTACnwIJuvOqVvJEzewpzuYBXwXQQ';
+  const [image, setImage] = useState(defaultData ? defaultData.type != 'application/pdf' ? defaultData.url : pdfImageName : null);
+  const [error, setError] = useState('');
+  const [fileName, setFileName] = useState('no selected file');
+  const handleCheckFile = e => {
+    const file = e.target.files;
+    if (file[0]) {
+      if (file[0].size <= maxSize * Math.pow(2, 20)) {
+        if (fileExtensions.includes(file[0].type.split('/')[1])) {
+          if (file[0].type === 'application/pdf') {
+            setError('');
+            onChange({
+              file
+            });
+            setImage(pdfImageName);
+          } else {
+            setError('');
+            onChange({
+              file
+            });
+            setFileName(file[0].name);
+            setImage(URL.createObjectURL(file[0]));
+          }
+        } else {
+          setImage(null);
+          setError('ֆայլի սխալ ֆորմատ');
+          setFileName('no selected file');
+        }
+      } else {
+        setImage(null);
+        setError('առավելագույն ծավալ');
+        setFileName('no selected file');
+      }
+    } else {
+      setImage(null);
+      setError('Ֆայլը ընտրված չէ');
+      setFileName('no selected file');
     }
-  }, /*#__PURE__*/React.createElement("div", {
-    ref: tooltipRef,
-    className: classProps,
+  };
+  const handleRemoveFile = () => {
+    setImage(null);
+    onChange({
+      target: null
+    });
+    setFileName('no selected file');
+    document.querySelector(`.${name}`).value = "";
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", {
+    className: `${styles$b['file-form-title']} ile-form-title-rem`
+  }, label, " ", required && /*#__PURE__*/React.createElement("sup", {
     style: {
-      backgroundColor: tBgColor ? tBgColor : configStyles.TOOLTIP.tBgColor,
-      borderRadius: tBorderRadius ? tBorderRadius : configStyles.TOOLTIP.tBorderRadius,
-      top: type === 'top' ? `calc(-${tooltipHeight + 7}px)` : type === 'bottom' ? 'calc(100% + 7px)' : type === 'left' || type === 'right' ? `calc(50% - ${tooltipHeight / 2}px)` : '0px',
-      left: type === 'top' || type === 'bottom' ? `calc(50% - ${tooltipWidth / 2}px)` : type === 'left' ? `-${tooltipWidth + 7}px` : type === 'right' ? 'calc(100% + 7px)' : '0px'
+      color: "#ee0000"
     }
+  }, "*")), /*#__PURE__*/React.createElement("div", {
+    className: classnames(`${styles$b['file-form-wrap']} file-form-wrap-rem`, image ? styles$b['active'] : '')
   }, /*#__PURE__*/React.createElement("div", {
-    className: `${styles$b['tooltip-rel']}`
-  }, /*#__PURE__*/React.createElement("div", {
-    className: `${styles$b['tooltip-decor']}`,
-    style: {
-      backgroundColor: tBgColor ? tBgColor : configStyles.TOOLTIP.bgColor,
-      left: type === 'top' || type === 'bottom' ? 'calc(50% - 5px)' : type === 'right' ? '-15px' : type === 'left' ? 'calc(100% + 5px)' : '0px',
-      top: type === 'top' ? 'calc(100% + 5px)' : type === 'bottom' ? '-15px' : type === 'right' || type === 'left' ? 'calc(50% - 5px)' : '0px'
-    }
-  }), /*#__PURE__*/React.createElement("p", {
+    onChange: e => console.log(e),
+    className: `${styles$b['file-form']} file-form-rem ${errorMesage ? styles$b['error'] : ''}`,
+    onClick: () => document.querySelector(`.${name}`).click()
+  }, /*#__PURE__*/React.createElement("input", {
+    hidden: true,
+    type: "file",
+    className: name,
+    disabled: disabled,
+    onChange: e => handleCheckFile(e)
+  }), image ? /*#__PURE__*/React.createElement("div", {
+    className: `${styles$b['upload-file-content']} upload-file-content-rem`
+  }, /*#__PURE__*/React.createElement("img", {
+    src: image,
+    alt: fileName
+  })) : /*#__PURE__*/React.createElement("div", {
+    className: `${styles$b['file-form-inner-upload']} ile-form-inner-upload-rem`
+  }, /*#__PURE__*/React.createElement("img", {
+    src: "../../assets/upload.svg",
+    alt: ""
+  }), /*#__PURE__*/React.createElement("span", {
+    className: `${styles$b['upload-info']} upload-info-rem`
+  }, /*#__PURE__*/React.createElement("span", {
+    className: `${styles$b['upload-info-txt']} upload-info-txt-rem`
+  }, "\u0532\u0565\u057C\u0576\u0565\u056C")), /*#__PURE__*/React.createElement("span", {
+    className: `${styles$b['upload-info-size']} upload-info-size-rem`
+  }, "\u0531\u057C\u0561\u057E\u0565\u056C\u0561\u0563\u0578\u0582\u0575\u0576\u0568 ", maxSize, "\u0544\u0532 ( ", fileExtensions.toString().split(',').join(', '), " )"))), /*#__PURE__*/React.createElement("div", {
+    className: `${styles$b['delete-upload-icon']} delete-upload-icon-rem`,
+    onClick: handleRemoveFile
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "icon-delete"
+  })), errorMesage || error ? /*#__PURE__*/React.createElement("span", {
     style: {
-      color: color ? color : configStyles.TOOLTIP.color,
-      fontSize: fontSize ? fontSize : configStyles.TOOLTIP.fontSize,
-      lineHeight: fontSize ? fontSize : configStyles.TOOLTIP.fontSize,
-      fontFamily: fontFamily ? fontFamily : configStyles.TOOLTIP.fontFamily
+      color: 'red'
     }
-  }, text))));
+  }, errorMesage || error) : null));
 };
-Tooltip.propTypes = {
-  width: PropTypes.string,
-  color: PropTypes.string,
-  height: PropTypes.string,
-  bgColor: PropTypes.string,
-  tBgColor: PropTypes.string,
-  fontSize: PropTypes.string,
+File.propTypes = {
+  label: PropTypes.string,
+  required: PropTypes.bool,
+  disabled: PropTypes.bool,
+  onChange: PropTypes.func,
+  maxSize: PropTypes.number,
   className: PropTypes.string,
-  fontFamily: PropTypes.string,
-  borderRadius: PropTypes.string,
-  tBorderRadius: PropTypes.string,
-  type: PropTypes.string.isRequired,
-  text: PropTypes.string.isRequired
+  errorMesage: PropTypes.string,
+  defaultData: PropTypes.object,
+  fileExtensions: PropTypes.arrayOf(PropTypes.string)
+};
+File.defaultProps = {
+  maxSize: 5,
+  required: false,
+  fileExtensions: ['jpg', 'jpeg', 'png', 'pdf']
 };
 
+var css_248z$a = ".table-module_table-wrap__KKAnM{background:#fff;border-radius:14px 14px 0 0;box-shadow:0 10px 30px rgba(0,35,106,.06);overflow:hidden;width:100%}.table-module_table-wrap__KKAnM:not(:first-child){margin-top:30px}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:first-child,.table-module_table-top__tfEKM .table-module_table-items__UpFg2:first-child{flex:0 0 auto;width:60px}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:nth-child(2),.table-module_table-top__tfEKM .table-module_table-items__UpFg2:nth-child(2){flex:0 0 auto;width:120px}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:nth-child(3),.table-module_table-top__tfEKM .table-module_table-items__UpFg2:nth-child(3){flex:0 0 auto;width:170px}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:nth-child(4),.table-module_table-top__tfEKM .table-module_table-items__UpFg2:nth-child(4){flex:0 0 auto;width:126px}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:nth-child(5),.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:nth-child(6),.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:nth-child(8),.table-module_table-top__tfEKM .table-module_table-items__UpFg2:nth-child(5),.table-module_table-top__tfEKM .table-module_table-items__UpFg2:nth-child(6),.table-module_table-top__tfEKM .table-module_table-items__UpFg2:nth-child(8){flex:0 0 auto;width:100px}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:last-child,.table-module_table-top__tfEKM .table-module_table-items__UpFg2:last-child{flex:0 0 auto;width:104px}.table-module_table-top__tfEKM{background:#00236a;height:44px;width:100%}.table-module_table-top__tfEKM .table-module_table-items__UpFg2{align-items:center;color:#fff;display:flex;flex:1 1;font-size:15px;justify-content:center;line-height:17px;text-align:center}.table-module_table-bottom-inner__0Pus0{background:#fff;min-height:40px;width:100%}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2{align-items:center;border-bottom:1px solid #eee;display:flex;flex:1 1;font-size:14px;justify-content:center;line-height:16px;padding:4px;text-align:center}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:not(:last-child){border-right:1px solid #eee}";
+var styles$a = {"table-wrap":"table-module_table-wrap__KKAnM","table-bottom-inner":"table-module_table-bottom-inner__0Pus0","table-items":"table-module_table-items__UpFg2","table-top":"table-module_table-top__tfEKM"};
+styleInject(css_248z$a);
+
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -147,89 +177,203 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
-const Button = ({
-  type,
-  color,
-  label,
-  width,
-  height,
-  cursor,
-  border,
-  outline,
-  padding,
-  onClick,
-  fontSize,
+var css_248z$9 = ".checkbox-module_checkbox-wrap__Xrg-m{align-items:center;cursor:pointer;display:inline-flex;flex-direction:row;flex-wrap:nowrap;margin:0 6px;padding-left:24px;position:relative}.checkbox-module_checkbox-wrap__Xrg-m>input{height:0;opacity:0;position:absolute;width:0}.checkbox-module_checkbox-wrap__Xrg-m .checkbox-module_checkmark__M8DY6{border:1px solid #d9d9d9;border-radius:3px;bottom:0;display:inline-block;height:14px;left:0;margin:auto 4px auto auto;position:absolute;top:0;transition:border-color .24s;vertical-align:top;width:14px}.checkbox-module_checkbox-wrap__Xrg-m>.checkbox-module_checkmark__M8DY6:after{border:solid #1890ff;border-width:0 2px 2px 0;content:\"\";display:block;height:8px;left:4px;opacity:0;position:absolute;top:1px;transform:rotate(45deg);transition:opacity .24s;width:4px}.checkbox-module_checkbox-wrap__Xrg-m input:checked~.checkbox-module_checkmark__M8DY6:after{opacity:1}.checkbox-module_checkbox-wrap__Xrg-m input:checked~.checkbox-module_checkmark__M8DY6,.checkbox-module_checkbox-wrap__Xrg-m:hover input~.checkbox-module_checkmark__M8DY6{border-color:#1890ff}";
+var styles$9 = {"checkbox-wrap":"checkbox-module_checkbox-wrap__Xrg-m","checkmark":"checkbox-module_checkmark__M8DY6"};
+styleInject(css_248z$9);
+
+const Checkbox = ({
   disabled,
+  required,
   className,
-  boxSizing,
-  transition,
-  contentWidth,
-  borderRadius,
-  backgroundColor,
-  disabledThemeColor,
-  disabledThemeBgColor,
-  disabledThemeLineColor,
+  name,
+  value,
+  jsonData,
+  onChange,
+  label,
+  keyNames,
+  onClick,
   ...props
 }) => {
-  const [isHover, setIsHover] = useState(false);
+  const classProps = classnames(styles$9.checkbox, className, 'checkbox-input-rem');
+  const parseData = jsonData.length !== 0 ? JSON.parse(jsonData) : [];
+  const [data, setData] = useState(parseData);
   useEffect(() => {
-    if (!label) {
-      alert('Button component: label prop is required, please add it!!!');
-    }
-  }, []);
-  const configStyles = compereConfigs();
-  const classProps = classnames(className);
-  const handleMouseEnter = () => {
-    setIsHover(true);
-  };
-  const handleMouseLeave = () => {
-    setIsHover(false);
+    const parseData = jsonData.length !== 0 ? JSON.parse(jsonData) : [];
+    setData(parseData);
+  }, [jsonData]);
+  useEffect(() => {
+    onChange ? onChange(data.filter(d => d.checked)) : '';
+  }, [data]);
+  const handleChange = e => {
+    let id;
+    data.forEach((value, key) => {
+      if (value[keyNames.value] === e.target.value) {
+        id = key;
+      }
+    });
+    let items = [...data];
+    let item = {
+      ...items[id]
+    };
+    item.checked = !item.checked;
+    items[id] = item;
+    setData(items);
   };
-  return /*#__PURE__*/React.createElement("button", _extends({
-    style: {
-      height: height ? height : configStyles.BUTTON.height,
-      padding: padding ? padding : configStyles.BUTTON.padding,
-      fontSize: fontSize ? fontSize : configStyles.BUTTON.fontSize,
-      boxSizing: boxSizing ? boxSizing : configStyles.BUTTON.boxSizing,
-      transition: transition ? transition : configStyles.BUTTON.transition,
-      border: outline ? 'none' : border ? border : configStyles.BUTTON.border,
-      width: contentWidth ? 'auto' : width ? width : configStyles.BUTTON.width,
-      borderRadius: borderRadius ? borderRadius : configStyles.BUTTON.borderRadius,
-      cursor: disabled ? 'not-allowed' : cursor ? cursor : configStyles.BUTTON.cursor,
-      backgroundColor: (outline || !outline) && disabled ? disabledThemeBgColor ? disabledThemeBgColor : configStyles.BUTTON.disabledThemeBgColor : outline && !disabled ? isHover ? backgroundColor ? backgroundColor : configStyles.BUTTON.bgColor : '#ffffff' : backgroundColor ? backgroundColor : configStyles.BUTTON.bgColor,
-      boxShadow: outline ? disabled ? `inset 0 0 0 2px ${disabledThemeLineColor ? disabledThemeLineColor : configStyles.BUTTON.disabledThemeLineColor}` : `inset 0 0 0 2px ${backgroundColor ? backgroundColor : configStyles.BUTTON.bgColor}` : 'none',
-      color: (outline || !outline) && disabled ? disabledThemeColor ? disabledThemeColor : configStyles.BUTTON.disabledThemeColor : outline && !disabled ? isHover ? color ? color : configStyles.BUTTON.color : backgroundColor ? backgroundColor : configStyles.BUTTON.bgColor : color ? color : configStyles.BUTTON.color
-    },
-    type: type ? type : configStyles.BUTTON.type,
-    disabled: disabled ? disabled : configStyles.BUTTON.disabled,
-    onClick: disabled ? _ => _ : type !== 'submit' ? onClick ? onClick : _ => alert('Add click event handler on Button component') : _ => _,
-    onMouseEnter: handleMouseEnter,
-    onMouseLeave: handleMouseLeave,
-    className: classProps
-  }, props), label);
+  !keyNames ? keyNames = {
+    id: 'id',
+    name: 'name',
+    value: 'value',
+    label: 'label'
+  } : '';
+  return /*#__PURE__*/React.createElement(React.Fragment, null, data.map(element => {
+    return /*#__PURE__*/React.createElement("label", {
+      className: `${styles$9["checkbox-wrap"]} checkbox-wrap-rem`,
+      key: element.value
+    }, /*#__PURE__*/React.createElement("input", _extends({
+      type: "checkbox",
+      className: classProps,
+      disabled: disabled,
+      required: required,
+      value: keyNames.value ? element[keyNames.value] : '',
+      name: keyNames.name ? element[keyNames.name] : '',
+      id: keyNames.id ? element[keyNames.id] : '',
+      onChange: handleChange,
+      onClick: onClick ? onClick : () => {},
+      defaultChecked: element.checked
+    }, props)), /*#__PURE__*/React.createElement("span", {
+      className: `${styles$9["checkmark"]} checkmark-rem`
+    }), element[keyNames.label] ? /*#__PURE__*/React.createElement("label", {
+      className: styles$9.labelCheckbox,
+      for: element[keyNames.id]
+    }, element[keyNames.label]) : "");
+  }));
 };
-Button.propTypes = {
-  type: PropTypes.string,
-  color: PropTypes.string,
-  width: PropTypes.string,
-  outline: PropTypes.bool,
+Checkbox.propTypes = {
+  className: PropTypes.string,
+  onChange: PropTypes.func,
   onClick: PropTypes.func,
-  height: PropTypes.string,
-  cursor: PropTypes.string,
-  border: PropTypes.string,
+  required: PropTypes.bool,
   disabled: PropTypes.bool,
-  padding: PropTypes.string,
-  fontSize: PropTypes.string,
-  boxSizing: PropTypes.string,
+  name: PropTypes.string,
+  value: PropTypes.string,
+  jsonData: PropTypes.string,
+  label: PropTypes.string,
+  keyNames: PropTypes.object
+};
+Checkbox.defaultProps = {
+  onChange: undefined,
+  jsonData: '[{"value":"email", "name":"contact1", "label":"Email", "id":"contactChoice1"}, {"value":"phone", "name":"contact2", "label":"Phone", "id":"contactChoice2"}]'
+};
+
+const Table = ({
+  className,
+  onChange,
+  config,
+  jsonData,
+  hearderData,
+  keyNames,
+  actions,
+  ...props
+}) => {
+  classnames(className);
+  let tbodyData = jsonData.length ? JSON.parse(jsonData) : [];
+  useEffect(() => {
+    tbodyData = jsonData.length ? JSON.parse(jsonData) : [];
+  }, [jsonData]);
+  const [checked, setChecked] = useState(config.isCheckbox && config.isCheckbox.checked ? config.isCheckbox.checked : []);
+  config.isCheckbox && config.isCheckbox.showCheckbox == undefined ? config.isCheckbox.showCheckbox = () => {
+    return true;
+  } : "";
+  return /*#__PURE__*/React.createElement("div", {
+    className: `${styles$a["table-wrap"]} table-wrap-rem`
+  }, config.isHeader && hearderData.map((header, key) => {
+    return /*#__PURE__*/React.createElement("div", {
+      className: `${styles$a["table-top"]} table-top-rem`,
+      key: key
+    }, /*#__PURE__*/React.createElement("div", {
+      className: `${styles$a["table-items"]} table-items-rem`
+    }, header));
+  }), /*#__PURE__*/React.createElement("div", {
+    className: `${styles$a["table-bottom"]} table-bottom-rem`
+  }, tbodyData.map((item, key) => {
+    return /*#__PURE__*/React.createElement("div", {
+      className: `${styles$a["table-bottom-inner"]} table-bottom-inner-rem`,
+      key: key
+    }, keyNames.map((keyName, keyNameKey) => {
+      return /*#__PURE__*/React.createElement("div", {
+        className: `${styles$a["table-items"]} table-items-rem`,
+        key: keyNameKey
+      }, config.isCheckbox && config.isCheckbox.showCheckbox && config.isCheckbox.showCheckbox(item) && keyNameKey == 0 && /*#__PURE__*/React.createElement(Checkbox, {
+        onClick: e => {
+          const id = e.target.id;
+          const checkedValue = e.target.checked;
+          let ch = [...checked];
+          checkedValue ? ch.push(Number(id)) : ch.splice(ch.indexOf(id), 1);
+          setChecked(ch);
+          config.isCheckbox.onChange(ch);
+        },
+        jsonData: `[{"value":"", "name":"", "label":"", "id":${item.id}, "checked":${checked.indexOf(item.id) > -1 ? true : false}}]`
+      }), typeof keyName === "string" ? item[keyName] : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("i", {
+        className: keyName.icon
+      }), item[keyName.name]));
+    }), actions && /*#__PURE__*/React.createElement("div", {
+      className: `${styles$a["table-items"]} table-items-rem`
+    }, actions.filter(a => a.show && a.show(item) || a.show === undefined).map((action, key) => {
+      return /*#__PURE__*/React.createElement("div", {
+        key: key
+      }, /*#__PURE__*/React.createElement("i", {
+        className: action.icon,
+        onClick: action.click ? action.click : () => {}
+      }, action.icon));
+    })));
+  })));
+};
+Table.propTypes = {
   className: PropTypes.string,
-  transition: PropTypes.string,
-  contentWidth: PropTypes.bool,
-  borderRadius: PropTypes.string,
-  backgroundColor: PropTypes.string,
-  label: PropTypes.string.isRequired,
-  disabledThemeColor: PropTypes.string,
-  disabledThemeBgColor: PropTypes.string,
-  disabledThemeLineColor: PropTypes.string
+  onChange: PropTypes.func,
+  config: PropTypes.object,
+  actions: PropTypes.arrayOf(PropTypes.object),
+  jsonData: PropTypes.string,
+  keyNames: PropTypes.arrayOf(PropTypes.oneOf([PropTypes.string, PropTypes.object])),
+  hearderData: PropTypes.array
+};
+Table.defaultProps = {
+  className: "",
+  onChange: undefined,
+  errorMesage: "",
+  config: {
+    isHeader: true,
+    isCheckbox: {
+      checked: []
+    }
+  },
+  actions: [],
+  jsonData: "",
+  keyNames: [],
+  hearderData: []
+};
+
+var css_248z$8 = ".modal-module_modal-wrap__IsXXf{background:rgba(0,0,0,.4);height:100%;left:0;position:fixed;top:0;width:100%;z-index:9}.modal-module_modal-top__ntDBi{background:#fbfbfb;box-sizing:border-box;display:flex;flex-direction:row;height:44px;padding:4px 10px 4px 0;width:100%}.modal-module_modal-title__r-WKl{align-items:center;color:#3c393e;display:flex;flex:1 1;font-size:20px;font-weight:500;line-height:24px;padding-right:20px}.modal-module_close-btn__Qf2UD{cursor:pointer;flex:0 0 auto;width:24px}.modal-module_close-btn__Qf2UD,.modal-module_modal-section__Bp8jN{align-items:center;display:flex;height:100%;justify-content:center}.modal-module_modal-section__Bp8jN{flex:1 1;padding:10px 0;width:100%}.modal-module_modal-content__1F-uE{align-items:center;animation:modal-module_show-popup__WrH7a .24s;background:#fff;border-radius:8px;display:flex;flex-direction:column;height:auto;left:0;margin:auto;min-height:130px;overflow:hidden;padding:10px;position:absolute;right:0;top:110px;width:fit-content}@keyframes modal-module_show-popup__WrH7a{0%{transform:translate3d(0,-30%,0)}to{opacity:1;transform:translateZ(0)}}";
+var styles$8 = {"modal-wrap":"modal-module_modal-wrap__IsXXf","modal-top":"modal-module_modal-top__ntDBi","modal-title":"modal-module_modal-title__r-WKl","close-btn":"modal-module_close-btn__Qf2UD","modal-section":"modal-module_modal-section__Bp8jN","modal-content":"modal-module_modal-content__1F-uE","show-popup":"modal-module_show-popup__WrH7a"};
+styleInject(css_248z$8);
+
+const _ = require('lodash');
+const compereConfigs = () => {
+  let projectConfig = {};
+  let packageConfig = {};
+  try {
+    packageConfig = require('../tui.config.js');
+  } catch (error) {
+    // console.log(error, 'Package: tui.config.js file is not define');
+  }
+  try {
+    projectConfig = require('../../../../tui.config.js');
+  } catch (error) {
+    projectConfig = {};
+    // console.log(error, 'Project: if you want to use custom styles, create tui.config.js file in your project root');
+  }
+
+  return _.merge(packageConfig, projectConfig);
 };
 
 const TypographyType = {
@@ -244,6 +388,7 @@ const TypographyType = {
 };
 const Typography = ({
   size,
+  color,
   weight,
   onClick,
   variant,
@@ -251,256 +396,118 @@ const Typography = ({
   className,
   ...props
 }) => {
-  const [validVariant, setValidVariant] = useState(false);
   const configStyles = compereConfigs();
   const classProps = classnames(className);
+  const [validVariant, setValidVariant] = useState(false);
+  const [style, setStyle] = useState({
+    fontSize: size ? size : configStyles.TYPOGRAPHY['fSize' + variant],
+    fontWeight: weight ? weight : configStyles.TYPOGRAPHY['fWeight' + variant]
+  });
   useEffect(() => {
     if (!Object.values(TypographyType).includes(variant)) {
       setValidVariant(true);
     }
   }, [variant]);
+  useEffect(() => {
+    if (color) {
+      setStyle(prev => {
+        return {
+          ...prev,
+          color: color
+        };
+      });
+    }
+  }, [color]);
   const tagT = /*#__PURE__*/React.createElement(variant, {
+    style,
     ...props,
     className: classProps,
-    style: {
-      fontSize: size ? size : configStyles.TYPOGRAPHY['fSize' + variant],
-      fontWeight: weight ? weight : configStyles.TYPOGRAPHY['fWeight' + variant]
-    },
     onClick: onClick ? onClick : _ => _
   }, [children]);
   return validVariant ? 'Please set Typography valid variant' : tagT;
 };
 Typography.propTypes = {
   size: PropTypes.string,
+  color: PropTypes.string,
   weight: PropTypes.string,
   onClick: PropTypes.func,
   className: PropTypes.string,
   variant: PropTypes.oneOf(Object.values(TypographyType)).isRequired
 };
 
-var css_248z$b = ".autocomplate-module_autocomplate-content__UbIUT{display:flex;flex-direction:column;position:relative}.autocomplate-module_autocomplate-content-top__FVgCp{border:2px solid #d1d1d1;border-radius:6px;box-sizing:border-box;color:#3c393e;cursor:pointer;display:flex;flex-direction:row;font-size:16px;font-weight:500;height:46px;line-height:22px;max-width:400px;padding:0 15px;transition:border-color .24s}.autocomplate-module_autocomplate-content-top__FVgCp.autocomplate-module_active__40fdV{border-color:#00236a}.autocomplate-module_autocomplate-content-top__FVgCp:hover{border-color:#3c393e}.autocomplate-module_autocomplate-content-bottom__yk0zP{animation:autocomplate-module_select-show__7Uap4 .64s linear forwards;background:#fbfbfb;border-radius:6px;box-shadow:0 0 10px rgba(60,57,62,.08);left:0;max-height:0;max-width:400px;overflow:hidden;position:absolute;top:52px;width:100%;z-index:1}.autocomplate-module_autocomplate-content-bottom-inner__rF5IF{display:flex;flex-direction:column;max-height:234px;overflow-x:hidden;overflow-y:auto}@keyframes autocomplate-module_select-show__7Uap4{to{max-height:400px}}.autocomplate-module_autocomplate-content-bottom-row__dRsZa{align-items:center;background:#fff;box-sizing:border-box;color:#3c393e;cursor:pointer;display:flex;font-size:16px;font-weight:500;height:46px;line-height:22px;margin-bottom:2px;padding:0 15px;transition:background .24s,color .24s}.autocomplate-module_autocomplate-content-bottom-row__dRsZa .autocomplate-module_no-option__xv0-E{color:red}.autocomplate-module_autocomplate-content-bottom-row__dRsZa:hover{background:unset;color:#00236a}.autocomplate-module_option-active__WuH4I .autocomplate-module_autocomplate-content-bottom-row__dRsZa{color:#00236a}.autocomplate-module_autocomplate-title__3Qxqz{color:#3c393e;display:block;font-size:16px;font-weight:500;line-height:22px;margin-bottom:6px;text-transform:none}.autocomplate-module_errorBorder__LV-nb{border:2px solid #e00!important}.autocomplate-module_errorMessage__Gchpc{color:#e00!important}";
-var styles$a = {"autocomplate-content":"autocomplate-module_autocomplate-content__UbIUT","autocomplate-content-top":"autocomplate-module_autocomplate-content-top__FVgCp","active":"autocomplate-module_active__40fdV","autocomplate-content-bottom":"autocomplate-module_autocomplate-content-bottom__yk0zP","select-show":"autocomplate-module_select-show__7Uap4","autocomplate-content-bottom-inner":"autocomplate-module_autocomplate-content-bottom-inner__rF5IF","autocomplate-content-bottom-row":"autocomplate-module_autocomplate-content-bottom-row__dRsZa","no-option":"autocomplate-module_no-option__xv0-E","option-active":"autocomplate-module_option-active__WuH4I","autocomplate-title":"autocomplate-module_autocomplate-title__3Qxqz","errorBorder":"autocomplate-module_errorBorder__LV-nb","errorMessage":"autocomplate-module_errorMessage__Gchpc"};
-styleInject(css_248z$b);
-
-const Autocomplate = ({
+const Modal = ({
+  setShow,
+  headerText,
   className,
-  label,
-  required,
-  disabled,
-  jsonOptionsData,
-  jsonSelectedOptionsData,
-  onChange,
-  value,
-  searchCount,
-  placeHolder,
-  keyNames,
-  errorMesage,
-  ...props
+  type,
+  data,
+  selected,
+  children
 }) => {
-  classnames(styles$a.searchBox, className);
-  const parseSelectedOptionsData = jsonSelectedOptionsData ? JSON.parse(jsonSelectedOptionsData) : {
-    name: '',
-    id: ''
-  };
-  const [inputValue, setInputValue] = useState(parseSelectedOptionsData[keyNames.name]);
-  const [inputId, setInputId] = useState(parseSelectedOptionsData[keyNames.id]);
-  const [activeOption, setActiveOption] = useState(0);
-  const [showOptions, setShowOptions] = useState(false);
-  const parseOptionsData = jsonOptionsData ? JSON.parse(jsonOptionsData) : [];
-  useEffect(() => {
-    setInputValue(JSON.parse(jsonSelectedOptionsData)[keyNames.name]);
-    setInputId(JSON.parse(jsonSelectedOptionsData)[keyNames.id]);
-  }, [JSON.parse(jsonSelectedOptionsData)[keyNames.id]]);
-  const handleChange = e => {
-    const currentInputValue = e.currentTarget.value;
-    setInputId(null);
-    setInputValue(currentInputValue);
-    setInputId('');
-    setActiveOption(0);
-    setShowOptions(true);
-    onChange({
-      name: currentInputValue,
-      id: e.target.id
-    });
-  };
-  const handleClick = e => {
-    setActiveOption(0);
-    setShowOptions(false);
-    setInputValue(e.target.innerText);
-    setInputId(e.target.id);
-    onChange({
-      name: e.target.innerText,
-      id: e.target.id
-    });
-  };
-  let optionList;
-  if (showOptions && inputValue) {
-    if (parseOptionsData.length && inputValue.length >= searchCount) {
-      optionList = /*#__PURE__*/React.createElement("div", {
-        className: `${styles$a['autocomplate-content-bottom']} autocomplate-content-bottom-rem`
-      }, /*#__PURE__*/React.createElement("div", {
-        className: `${styles$a['autocomplate-content-bottom-inner']} autocomplate-content-bottom-inner-rem`
-      }, parseOptionsData.map((optionName, index) => {
-        let className;
-        if (index === activeOption) {
-          className = "option-active";
-        }
-        return /*#__PURE__*/React.createElement("div", {
-          className: `${styles$a[className]} autocomplate-content-click-rem`,
-          key: optionName[keyNames.id],
-          onClick: handleClick
-        }, /*#__PURE__*/React.createElement("div", {
-          id: optionName[keyNames.id],
-          className: `${styles$a['autocomplate-content-bottom-row']} autocomplate-content-bottom-row-rem`
-        }, optionName[keyNames.name]));
-      })));
-    } else {
-      optionList = /*#__PURE__*/React.createElement("div", {
-        className: `${styles$a['autocomplate-content-bottom']} autocomplate-content-bottom-rem`
-      }, /*#__PURE__*/React.createElement("div", {
-        className: `${styles$a['autocomplate-content-bottom-inner']} autocomplate-content-bottom-inner-rem`
-      }, /*#__PURE__*/React.createElement("div", {
-        className: `${styles$a['autocomplate-content-bottom-row']} autocomplate-content-bottom-row-rem`
-      }, /*#__PURE__*/React.createElement("div", {
-        className: `${styles$a['no-option']} autocomplate-no-option`
-      }, inputValue.length < searchCount ? `Լրացնել առնվազն ${searchCount} նիշ` : 'Նման տվյալ առկա չէ'))));
+  classnames(styles$8.modal, className);
+  const [select, setSelect] = useState(selected);
+  return /*#__PURE__*/React.createElement("div", {
+    className: `${styles$8["modal-wrap"]} modal-wrap-rem`,
+    onClick: () => setShow(false)
+  }, type == "content" ? /*#__PURE__*/React.createElement("div", {
+    className: `${styles$8["modal-content"]} modal-content-rem`,
+    onClick: e => {
+      e.stopPropagation();
     }
-  }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, label ? /*#__PURE__*/React.createElement("label", {
-    className: `${styles$a['autocomplate-title']} autocomplate-title-rem`
-  }, label, " ", required && /*#__PURE__*/React.createElement("sup", {
-    style: {
-      color: "#ee0000"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${styles$8["modal-top"]} modal-top-rem`
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${styles$8["modal-title"]} modal-title-rem`
+  }, /*#__PURE__*/React.createElement(Typography, {
+    variant: TypographyType.p,
+    color: "#00236A"
+  }, headerText)), /*#__PURE__*/React.createElement("div", {
+    className: `${styles$8["close-btn"]} close-btn-rem`,
+    onClick: () => setShow(false)
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "icon-close"
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: `${styles$8["modal-section"]} modal-section-rem`
+  }, children)) : type == "images" ? /*#__PURE__*/React.createElement("div", {
+    className: `${styles$8["modal-content"]} modal-content-rem`,
+    onClick: e => {
+      e.stopPropagation();
     }
-  }, "*")) : "", /*#__PURE__*/React.createElement("div", {
-    className: `${styles$a['autocomplate-content']} autocomplate-content-rem`
-  }, /*#__PURE__*/React.createElement("input", _extends({
-    id: inputId,
-    type: "text",
-    className: `${styles$a['autocomplate-content-top']} autocomplate-content-top-rem ${errorMesage ? styles$a.errorBorder : ''}`,
-    disabled: disabled,
-    onChange: handleChange,
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${styles$8["close-btn"]} close-btn-rem`,
+    onClick: () => setShow(false)
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "icon-close"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: `${styles$8["modal-section"]} modal-section-rem`
+  }, /*#__PURE__*/React.createElement("div", null, select > 1 ? /*#__PURE__*/React.createElement("h1", {
+    onClick: () => setSelect(select - 1)
+  }, "-") : null, data.map(elem => {
+    if (select == elem.id) {
+      return /*#__PURE__*/React.createElement("img", {
+        width: "600px",
+        key: elem.id,
+        src: elem.url
+      });
+    }
+  }), select < data.length ? /*#__PURE__*/React.createElement("h1", {
     onClick: () => {
-      setShowOptions(!showOptions);
-    },
-    value: inputValue,
-    placeholder: placeHolder
-  }, props)), errorMesage ? /*#__PURE__*/React.createElement("span", {
-    className: styles$a.errorMessage
-  }, errorMesage) : null, optionList));
-};
-Autocomplate.propTypes = {
-  className: PropTypes.string,
-  label: PropTypes.string,
-  placeHolder: PropTypes.string,
-  required: PropTypes.bool,
-  disabled: PropTypes.bool,
-  jsonOptionsData: PropTypes.string,
-  jsonSelectedOptionsData: PropTypes.string,
-  onChange: PropTypes.func,
-  value: PropTypes.string,
-  searchCount: PropTypes.number,
-  keyNames: PropTypes.object,
-  errorMesage: PropTypes.string
-};
-Autocomplate.defaultProps = {
-  required: false
-};
-
-var css_248z$a = ".checkbox-module_checkbox-wrap__Xrg-m{align-items:center;cursor:pointer;display:inline-flex;flex-direction:row;flex-wrap:nowrap;margin:0 6px;padding-left:24px;position:relative}.checkbox-module_checkbox-wrap__Xrg-m>input{height:0;opacity:0;position:absolute;width:0}.checkbox-module_checkbox-wrap__Xrg-m .checkbox-module_checkmark__M8DY6{border:1px solid #d9d9d9;border-radius:3px;bottom:0;display:inline-block;height:14px;left:0;margin:auto 4px auto auto;position:absolute;top:0;transition:border-color .24s;vertical-align:top;width:14px}.checkbox-module_checkbox-wrap__Xrg-m>.checkbox-module_checkmark__M8DY6:after{border:solid #1890ff;border-width:0 2px 2px 0;content:\"\";display:block;height:8px;left:4px;opacity:0;position:absolute;top:1px;transform:rotate(45deg);transition:opacity .24s;width:4px}.checkbox-module_checkbox-wrap__Xrg-m input:checked~.checkbox-module_checkmark__M8DY6:after{opacity:1}.checkbox-module_checkbox-wrap__Xrg-m input:checked~.checkbox-module_checkmark__M8DY6,.checkbox-module_checkbox-wrap__Xrg-m:hover input~.checkbox-module_checkmark__M8DY6{border-color:#1890ff}";
-var styles$9 = {"checkbox-wrap":"checkbox-module_checkbox-wrap__Xrg-m","checkmark":"checkbox-module_checkmark__M8DY6"};
-styleInject(css_248z$a);
-
-const Checkbox = ({
-  disabled,
-  required,
-  className,
-  name,
-  value,
-  jsonData,
-  onChange,
-  label,
-  keyNames,
-  onClick,
-  ...props
-}) => {
-  const classProps = classnames(styles$9.checkbox, className, 'checkbox-input-rem');
-  const parseData = jsonData.length !== 0 ? JSON.parse(jsonData) : [];
-  const [data, setData] = useState(parseData);
-  useEffect(() => {
-    const parseData = jsonData.length !== 0 ? JSON.parse(jsonData) : [];
-    setData(parseData);
-  }, [jsonData]);
-  useEffect(() => {
-    onChange ? onChange(data.filter(d => d.checked)) : '';
-  }, [data]);
-  const handleChange = e => {
-    let id;
-    data.forEach((value, key) => {
-      if (value[keyNames.value] === e.target.value) {
-        id = key;
-      }
-    });
-    let items = [...data];
-    let item = {
-      ...items[id]
-    };
-    item.checked = !item.checked;
-    items[id] = item;
-    setData(items);
-  };
-  !keyNames ? keyNames = {
-    id: 'id',
-    name: 'name',
-    value: 'value',
-    label: 'label'
-  } : '';
-  return /*#__PURE__*/React.createElement(React.Fragment, null, data.map(element => {
-    return /*#__PURE__*/React.createElement("label", {
-      className: `${styles$9["checkbox-wrap"]} checkbox-wrap-rem`,
-      key: element.value
-    }, /*#__PURE__*/React.createElement("input", _extends({
-      type: "checkbox",
-      className: classProps,
-      disabled: disabled,
-      required: required,
-      value: keyNames.value ? element[keyNames.value] : '',
-      name: keyNames.name ? element[keyNames.name] : '',
-      id: keyNames.id ? element[keyNames.id] : '',
-      onChange: handleChange,
-      onClick: onClick ? onClick : () => {},
-      defaultChecked: element.checked
-    }, props)), /*#__PURE__*/React.createElement("span", {
-      className: `${styles$9["checkmark"]} checkmark-rem`
-    }), element[keyNames.label] ? /*#__PURE__*/React.createElement("label", {
-      className: styles$9.labelCheckbox,
-      for: element[keyNames.id]
-    }, element[keyNames.label]) : "");
-  }));
+      setSelect(select + 1);
+    }
+  }, "+") : null))) : null);
 };
-Checkbox.propTypes = {
+Modal.propTypes = {
+  setShow: PropTypes.func,
+  headerText: PropTypes.string,
   className: PropTypes.string,
-  onChange: PropTypes.func,
-  onClick: PropTypes.func,
-  required: PropTypes.bool,
-  disabled: PropTypes.bool,
-  name: PropTypes.string,
-  value: PropTypes.string,
-  jsonData: PropTypes.string,
-  label: PropTypes.string,
-  keyNames: PropTypes.object
-};
-Checkbox.defaultProps = {
-  onChange: undefined,
-  jsonData: '[{"value":"email", "name":"contact1", "label":"Email", "id":"contactChoice1"}, {"value":"phone", "name":"contact2", "label":"Phone", "id":"contactChoice2"}]'
+  type: PropTypes.string,
+  selected: PropTypes.string,
+  data: PropTypes.array
 };
 
-var css_248z$9 = "";
-styleInject(css_248z$9);
-
-var css_248z$8 = ".input-module_input-wrap__NunrE{width:100%}.input-module_input-content__kP7lZ{display:flex;width:100%}.input-module_input-title__giCsY{color:#3c393e;display:block;font-size:16px;font-weight:500;line-height:22px;margin-bottom:6px}.input-module_inputErrorMessages__hx490{color:#e00;font-size:14px;line-height:19px}input:-webkit-autofill,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover{background-color:inherit!important}";
-var styles$8 = {"input-wrap":"input-module_input-wrap__NunrE","input-content":"input-module_input-content__kP7lZ","input-title":"input-module_input-title__giCsY","inputErrorMessages":"input-module_inputErrorMessages__hx490"};
-styleInject(css_248z$8);
+var css_248z$7 = ".input-module_input-wrap__NunrE{width:100%}.input-module_input-content__kP7lZ{display:flex;width:100%}.input-module_input-title__giCsY{color:#3c393e;display:block;font-size:16px;font-weight:500;line-height:22px;margin-bottom:6px}.input-module_inputErrorMessages__hx490{color:#e00;font-size:14px;line-height:19px}input:-webkit-autofill,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover{background-color:inherit!important}";
+var styles$7 = {"input-wrap":"input-module_input-wrap__NunrE","input-content":"input-module_input-content__kP7lZ","input-title":"input-module_input-title__giCsY","inputErrorMessages":"input-module_inputErrorMessages__hx490"};
+styleInject(css_248z$7);
 
 const InputTypes = {
   TEXT: "text",
@@ -552,15 +559,15 @@ const Input = ({
     setIsHover(false);
   };
   return /*#__PURE__*/React.createElement("div", {
-    className: `${styles$8["input-wrap"]}`
+    className: `${styles$7["input-wrap"]}`
   }, label ? /*#__PURE__*/React.createElement("label", {
-    className: `${styles$8["input-title"]}`
+    className: `${styles$7["input-title"]}`
   }, label, " ", required && /*#__PURE__*/React.createElement("sup", {
     style: {
       color: "#ee0000"
     }
   }, "*")) : '', /*#__PURE__*/React.createElement("div", {
-    className: `${styles$8["input-content"]}`,
+    className: `${styles$7["input-content"]}`,
     style: {
       borderRadius: radius ? radius : configStyles.INPUT.radius,
       boxShadow: isHover ? boxShadowHover ? boxShadowHover : configStyles.INPUT.boxShadowHover : boxShadow ? boxShadow : configStyles.INPUT.boxShadow
@@ -622,7 +629,7 @@ const Input = ({
     variant: "p",
     onClick: () => setTooltipStatus(!tooltipStatus)
   }, "\u24D8") : null, tooltipStatus ? /*#__PURE__*/React.createElement("p", null, tooltip) : null, errorMesage ? /*#__PURE__*/React.createElement("span", {
-    className: styles$8.inputErrorMessages
+    className: styles$7.inputErrorMessages
   }, errorMesage) : "");
 };
 Input.propTypes = {
@@ -655,325 +662,148 @@ Input.defaultProps = {
   type: "text"
 };
 
-var css_248z$7 = ".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{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}";
-var styles$7 = {"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$7);
-
-// import styles from "./pagination.module.scss";
+var css_248z$6 = ".radio-module_radio-wrap__-lO7V{align-items:center;cursor:pointer;display:inline-flex;flex-direction:row;flex-wrap:nowrap;margin:0 6px;padding-left:24px;position:relative}.radio-module_radio-wrap__-lO7V>input{height:0;opacity:0;position:absolute;width:0}.radio-module_radio-wrap__-lO7V .radio-module_radio-checkmark__Kvol0{border:1px solid #d9d9d9;border-radius:50%;display:inline-block;height:14px;left:0;margin-right:4px;position:absolute;top:0;transition:border-color .24s;vertical-align:top;width:14px}.radio-module_radio-wrap__-lO7V>.radio-module_radio-checkmark__Kvol0:after{background-color:#d9d9d9;border-radius:50%;bottom:0;content:\"\";height:8px;left:0;margin:auto;opacity:0;position:absolute;right:0;top:0;transition:opacity .24s,background-color .24s;width:8px}.radio-module_radio-wrap__-lO7V input:checked~.radio-module_radio-checkmark__Kvol0:after{background-color:#1890ff;opacity:1}.radio-module_radio-wrap__-lO7V:hover input~.radio-module_radio-checkmark__Kvol0:after{opacity:1}.radio-module_radio-wrap__-lO7V input:checked~.radio-module_radio-checkmark__Kvol0{border-color:#1890ff}";
+var styles$6 = {"radio-wrap":"radio-module_radio-wrap__-lO7V","radio-checkmark":"radio-module_radio-checkmark__Kvol0"};
+styleInject(css_248z$6);
 
-const Dots = "...";
-const range = (start, end) => {
-  const length = end - start + 1;
-  return Array.from({
-    length
-  }, (_, idx) => idx + start);
-};
-const PaginationRange = ({
-  currentTotalCount,
-  offset,
-  siblingCountNumber,
-  currentPageNumber
+const Radio = ({
+  disabled,
+  defaultChecked,
+  required,
+  className,
+  name,
+  value,
+  jsonData,
+  label,
+  keyNames,
+  ...props
 }) => {
-  const paginationRange = useMemo(() => {
-    const totalPageCount = Math.ceil(currentTotalCount / offset);
+  const classProps = classnames(styles$6.checkbox, className);
+  const parseData = jsonData.length !== 0 ? JSON.parse(jsonData) : [];
+  return /*#__PURE__*/React.createElement(React.Fragment, null, parseData.map((element, id) => {
+    return /*#__PURE__*/React.createElement("label", {
+      className: `${styles$6["radio-wrap"]} radio-wrap-rem`,
+      key: element.value
+    }, /*#__PURE__*/React.createElement("input", _extends({
+      type: "radio",
+      className: classProps,
+      disabled: disabled,
+      required: required,
+      defaultChecked: id === 0 ? defaultChecked : "",
+      value: value ? value : element.value,
+      name: name ? name : element.name
+    }, props)), /*#__PURE__*/React.createElement("span", {
+      className: `${styles$6["radio-checkmark"]} radio-checkmark-rem`
+    }), element.label ? /*#__PURE__*/React.createElement("span", {
+      className: styles$6.labelRadio
+    }, label ? label : element.label) : "");
+  }));
+};
+Radio.propTypes = {
+  className: PropTypes.string,
+  onChange: PropTypes.func,
+  required: PropTypes.bool,
+  defaultChecked: PropTypes.bool,
+  disabled: PropTypes.bool,
+  name: PropTypes.string,
+  value: PropTypes.string,
+  jsonData: PropTypes.string,
+  label: PropTypes.string,
+  keyNames: PropTypes.object
+};
+Radio.defaultProps = {
+  onChange: undefined,
+  jsonData: '[{"value":"email", "name":"contact", "label":"Email", "id":"contactChoice1"}, {"value":"phone", "name":"contact", "label":"Phone", "id":"contactChoice2"}]'
+};
 
-    //currentPage + 2*Dots + start + end = 5
-    const totalPageNumber = siblingCountNumber + 5;
-    if (totalPageNumber >= totalPageCount) {
-      return range(1, totalPageCount);
-    }
-    const rightSiblingIndex = Math.min(currentPageNumber + siblingCountNumber, totalPageCount);
-    const leftSiblingIndex = Math.max(currentPageNumber - siblingCountNumber, 1);
-    const shouldShowLeftDots = leftSiblingIndex > 2;
-    const shouldShowRightDots = rightSiblingIndex < totalPageCount - 2;
-    const firstPageIndex = 1;
-    const lastPageIndex = totalPageCount;
-    if (!shouldShowLeftDots && shouldShowRightDots) {
-      let leftItemCount = currentPageNumber === 4 && lastPageIndex > 7 ? 4 + siblingCountNumber : 3 + siblingCountNumber;
-      let leftRange = range(1, leftItemCount);
-      return [...leftRange, Dots, totalPageCount];
-    }
-    if (shouldShowLeftDots && !shouldShowRightDots) {
-      let rightItemCount = 0;
-      currentPageNumber === lastPageIndex - 3 && lastPageIndex > 7 ? rightItemCount = 4 + siblingCountNumber : rightItemCount = 3 + siblingCountNumber;
-      let rightRange = range(totalPageCount - rightItemCount + 1, totalPageCount);
-      return [firstPageIndex, Dots, ...rightRange];
-    }
-    if (shouldShowLeftDots && shouldShowRightDots) {
-      let middleRange = range(leftSiblingIndex, rightSiblingIndex);
-      return [firstPageIndex, Dots, ...middleRange, Dots, lastPageIndex];
-    }
-  }, [currentTotalCount, offset, siblingCountNumber, currentPageNumber]);
-  return paginationRange;
-};
-
-const Pagination = ({
-  onChange,
-  totalCount,
-  siblingCount,
-  currentPage,
-  offset,
-  className
+const Button = ({
+  type,
+  color,
+  label,
+  width,
+  height,
+  cursor,
+  border,
+  outline,
+  padding,
+  onClick,
+  fontSize,
+  disabled,
+  className,
+  boxSizing,
+  transition,
+  contentWidth,
+  borderRadius,
+  backgroundColor,
+  disabledThemeColor,
+  disabledThemeBgColor,
+  disabledThemeLineColor,
+  ...props
 }) => {
-  const [siblingCountNumber, setSibilingCountNumber] = useState(siblingCount);
-  const [currentPageNumber, setCurrentPage] = useState(currentPage);
-  const [currentTotalCount, setcurrentTotalCount] = useState(totalCount);
-  useEffect(() => {
-    setcurrentTotalCount(totalCount);
-  }, [totalCount]);
-  useEffect(() => {
-    setSibilingCountNumber(siblingCount);
-  }, [siblingCount]);
+  const [isHover, setIsHover] = useState(false);
   useEffect(() => {
-    setCurrentPage(currentPage);
-  }, [currentPage]);
-  const onPageChange = page => {
-    if (page > 0) {
-      setCurrentPage(page);
+    if (!label) {
+      alert('Button component: label prop is required, please add it!!!');
     }
+  }, []);
+  const configStyles = compereConfigs();
+  const classProps = classnames(className);
+  const handleMouseEnter = () => {
+    setIsHover(true);
   };
-  useEffect(() => {
-    onChange(currentPageNumber);
-  }, [currentPageNumber]);
-  const paginationRange = PaginationRange({
-    currentPageNumber,
-    currentTotalCount,
-    siblingCountNumber,
-    offset
-  });
-  if (currentPageNumber === 0 || paginationRange.length < 2) {
-    return null;
-  }
-  const classProps = classnames(styles$7.list, className ? className : `${styles$7["pagination-bar"]} pagination-bar-rem`);
-  const onNext = () => {
-    onPageChange(currentPageNumber + 1);
-  };
-  const onPrevious = () => {
-    onPageChange(currentPageNumber - 1);
-  };
-  const onNextFive = () => {
-    currentPageNumber !== lastPage - 4 ? onPageChange(currentPageNumber + 5) : onPageChange(currentPageNumber + 4);
-  };
-  const onPreviousFive = e => {
-    currentPageNumber !== 5 ? onPageChange(currentPageNumber - 5) : onPageChange(currentPageNumber - 4);
+  const handleMouseLeave = () => {
+    setIsHover(false);
   };
-  let lastPage = paginationRange[paginationRange.length - 1];
-  return /*#__PURE__*/React.createElement("ul", {
+  return /*#__PURE__*/React.createElement("button", _extends({
+    style: {
+      height: height ? height : configStyles.BUTTON.height,
+      padding: padding ? padding : configStyles.BUTTON.padding,
+      fontSize: fontSize ? fontSize : configStyles.BUTTON.fontSize,
+      boxSizing: boxSizing ? boxSizing : configStyles.BUTTON.boxSizing,
+      transition: transition ? transition : configStyles.BUTTON.transition,
+      border: outline ? 'none' : border ? border : configStyles.BUTTON.border,
+      width: contentWidth ? 'auto' : width ? width : configStyles.BUTTON.width,
+      borderRadius: borderRadius ? borderRadius : configStyles.BUTTON.borderRadius,
+      cursor: disabled ? 'not-allowed' : cursor ? cursor : configStyles.BUTTON.cursor,
+      backgroundColor: (outline || !outline) && disabled ? disabledThemeBgColor ? disabledThemeBgColor : configStyles.BUTTON.disabledThemeBgColor : outline && !disabled ? isHover ? backgroundColor ? backgroundColor : configStyles.BUTTON.bgColor : '#ffffff' : backgroundColor ? backgroundColor : configStyles.BUTTON.bgColor,
+      boxShadow: outline ? disabled ? `inset 0 0 0 2px ${disabledThemeLineColor ? disabledThemeLineColor : configStyles.BUTTON.disabledThemeLineColor}` : `inset 0 0 0 2px ${backgroundColor ? backgroundColor : configStyles.BUTTON.bgColor}` : 'none',
+      color: (outline || !outline) && disabled ? disabledThemeColor ? disabledThemeColor : configStyles.BUTTON.disabledThemeColor : outline && !disabled ? isHover ? color ? color : configStyles.BUTTON.color : backgroundColor ? backgroundColor : configStyles.BUTTON.bgColor : color ? color : configStyles.BUTTON.color
+    },
+    type: type ? type : configStyles.BUTTON.type,
+    disabled: disabled ? disabled : configStyles.BUTTON.disabled,
+    onClick: disabled ? _ => _ : type !== 'submit' ? onClick ? onClick : _ => alert('Add click event handler on Button component') : _ => _,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
     className: classProps
-  }, /*#__PURE__*/React.createElement("button", {
-    className: `${styles$7["pagination-btn"]} pagination-btn-rem`,
-    onClick: onPrevious,
-    disabled: currentPage === 1 ? true : false
-  }, /*#__PURE__*/React.createElement("i", {
-    className: "icon-arrow-back"
-  })), paginationRange.map((pageNumber, id) => {
-    if (pageNumber === Dots) {
-      let currentPageIndex = paginationRange.indexOf(currentPageNumber);
-      return /*#__PURE__*/React.createElement("li", {
-        key: id,
-        className: classnames(`${styles$7["pagination-jump-next"]} pagination-jump-next-rem`, styles$7.listItem),
-        onClick: id < currentPageIndex ? onPreviousFive : onNextFive,
-        disabled: currentPageIndex === 0 ? true : false
-      }, id < currentPageIndex ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-        className: `${styles$7["pagination-jump-next-txt"]} pagination-jump-next-txt-rem`
-      }, /*#__PURE__*/React.createElement("i", {
-        className: "icon-text"
-      })), /*#__PURE__*/React.createElement("span", {
-        className: `${styles$7["pagination-jump-next-arrow"]} pagination-jump-next-arrow-rem`
-      }, /*#__PURE__*/React.createElement("i", {
-        className: "icon-arrow-jump-back"
-      }))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-        className: `${styles$7["pagination-jump-next-txt"]} pagination-jump-next-txt-rem`
-      }, /*#__PURE__*/React.createElement("i", {
-        className: "icon-text"
-      })), /*#__PURE__*/React.createElement("span", {
-        className: `${styles$7["pagination-jump-next-arrow"]} pagination-jump-next-arrow-rem`
-      }, /*#__PURE__*/React.createElement("i", {
-        className: "icon-arrow-jump-next"
-      }))));
-    }
-    return /*#__PURE__*/React.createElement("li", {
-      onClick: () => onPageChange(pageNumber),
-      key: id,
-      className: classnames(`${pageNumber === currentPageNumber ? styles$7.selected : styles$7.listItem}`, `${styles$7["pagination-item"]} pagination-item-rem`)
-    }, pageNumber);
-  }), /*#__PURE__*/React.createElement("button", {
-    onClick: onNext,
-    className: `${styles$7["pagination-btn"]} pagination-btn-rem`,
-    disabled: currentPageNumber === lastPage ? true : false
-  }, /*#__PURE__*/React.createElement("i", {
-    className: "icon-arrow"
-  })));
-};
-Pagination.propTypes = {
-  offset: PropTypes.number,
-  totalCount: PropTypes.number,
-  className: PropTypes.string,
-  siblingCount: PropTypes.number,
-  currentPage: PropTypes.number
-};
-Pagination.defaultProps = {
-  offset: 2,
-  siblingCount: 2
-};
-
-var css_248z$6 = ".radio-module_radio-wrap__-lO7V{align-items:center;cursor:pointer;display:inline-flex;flex-direction:row;flex-wrap:nowrap;margin:0 6px;padding-left:24px;position:relative}.radio-module_radio-wrap__-lO7V>input{height:0;opacity:0;position:absolute;width:0}.radio-module_radio-wrap__-lO7V .radio-module_radio-checkmark__Kvol0{border:1px solid #d9d9d9;border-radius:50%;display:inline-block;height:14px;left:0;margin-right:4px;position:absolute;top:0;transition:border-color .24s;vertical-align:top;width:14px}.radio-module_radio-wrap__-lO7V>.radio-module_radio-checkmark__Kvol0:after{background-color:#d9d9d9;border-radius:50%;bottom:0;content:\"\";height:8px;left:0;margin:auto;opacity:0;position:absolute;right:0;top:0;transition:opacity .24s,background-color .24s;width:8px}.radio-module_radio-wrap__-lO7V input:checked~.radio-module_radio-checkmark__Kvol0:after{background-color:#1890ff;opacity:1}.radio-module_radio-wrap__-lO7V:hover input~.radio-module_radio-checkmark__Kvol0:after{opacity:1}.radio-module_radio-wrap__-lO7V input:checked~.radio-module_radio-checkmark__Kvol0{border-color:#1890ff}";
-var styles$6 = {"radio-wrap":"radio-module_radio-wrap__-lO7V","radio-checkmark":"radio-module_radio-checkmark__Kvol0"};
-styleInject(css_248z$6);
-
-const Radio = ({
-  disabled,
-  defaultChecked,
-  required,
-  className,
-  name,
-  value,
-  jsonData,
-  label,
-  keyNames,
-  ...props
-}) => {
-  const classProps = classnames(styles$6.checkbox, className);
-  const parseData = jsonData.length !== 0 ? JSON.parse(jsonData) : [];
-  return /*#__PURE__*/React.createElement(React.Fragment, null, parseData.map((element, id) => {
-    return /*#__PURE__*/React.createElement("label", {
-      className: `${styles$6["radio-wrap"]} radio-wrap-rem`,
-      key: element.value
-    }, /*#__PURE__*/React.createElement("input", _extends({
-      type: "radio",
-      className: classProps,
-      disabled: disabled,
-      required: required,
-      defaultChecked: id === 0 ? defaultChecked : "",
-      value: value ? value : element.value,
-      name: name ? name : element.name
-    }, props)), /*#__PURE__*/React.createElement("span", {
-      className: `${styles$6["radio-checkmark"]} radio-checkmark-rem`
-    }), element.label ? /*#__PURE__*/React.createElement("span", {
-      className: styles$6.labelRadio
-    }, label ? label : element.label) : "");
-  }));
+  }, props), label);
 };
-Radio.propTypes = {
-  className: PropTypes.string,
-  onChange: PropTypes.func,
-  required: PropTypes.bool,
-  defaultChecked: PropTypes.bool,
+Button.propTypes = {
+  type: PropTypes.string,
+  color: PropTypes.string,
+  width: PropTypes.string,
+  outline: PropTypes.bool,
+  onClick: PropTypes.func,
+  height: PropTypes.string,
+  cursor: PropTypes.string,
+  border: PropTypes.string,
   disabled: PropTypes.bool,
-  name: PropTypes.string,
-  value: PropTypes.string,
-  jsonData: PropTypes.string,
-  label: PropTypes.string,
-  keyNames: PropTypes.object
-};
-Radio.defaultProps = {
-  onChange: undefined,
-  jsonData: '[{"value":"email", "name":"contact", "label":"Email", "id":"contactChoice1"}, {"value":"phone", "name":"contact", "label":"Phone", "id":"contactChoice2"}]'
-};
-
-var css_248z$5 = "*{margin:0;padding:0}.captcha-module_main__Ys3EH{height:74px;max-width:400px;position:relative;width:100%}.captcha-module_slider__KLYny{-webkit-appearance:none;background:#eee;border-radius:2px;bottom:0;height:4px;left:0;margin:auto 0;outline:none;position:absolute;top:0;width:100%}.captcha-module_slider__KLYny::-webkit-slider-thumb{-webkit-appearance:none;height:30px;position:relative;width:30px;z-index:3}.captcha-module_selector__JFhb4{left:0;z-index:2}.captcha-module_selectBtn__GP1iH,.captcha-module_selector__JFhb4{bottom:0;height:30px;margin:auto 0;position:absolute;top:0;width:30px}.captcha-module_selectBtn__GP1iH{background:#00236a;border:2px solid #fff;border-radius:50%;box-shadow:1px 0 6px rgba(60,57,62,.15);cursor:pointer}.captcha-module_progressBar__mhdtM{background:red;bottom:0;height:4px;left:0;margin:auto 0;position:absolute;top:0;width:auto}.captcha-module_range__k24I2{color:blue;margin-bottom:15px;margin-top:15px}";
-var styles$5 = {"main":"captcha-module_main__Ys3EH","slider":"captcha-module_slider__KLYny","selector":"captcha-module_selector__JFhb4","selectBtn":"captcha-module_selectBtn__GP1iH","progressBar":"captcha-module_progressBar__mhdtM","range":"captcha-module_range__k24I2"};
-styleInject(css_248z$5);
-
-const Captcha = ({
-  onclick,
-  rangeCount
-}) => {
-  const [data, setData] = useState("");
-  const [right, setRight] = useState(false);
-  let range = rangeCount <= 100 ? rangeCount : 0;
-  let rangeElement = document.getElementsByClassName(styles$5.range);
-  useEffect(() => {
-    for (let element of rangeElement) {
-      element.style.marginLeft = `${range + 60}%`;
-      element.style.color = data;
-    }
-  }, [range, data]);
-  function sliderInput(event) {
-    setData(rangeCount == event.target.value ? 'green' : 'indianred');
-    let selector = document.getElementsByClassName(styles$5.selector);
-    let selectBtn = document.getElementsByClassName(styles$5.selectBtn);
-    let progressBar = document.getElementsByClassName(styles$5.progressBar);
-    selector[0].style.left = event.target.value + '%';
-    progressBar[0].style.width = event.target.value + '%';
-    if (rangeCount == event.target.value) {
-      selectBtn[0].style.background = "pink";
-    } else {
-      selectBtn[0].style.background = "red";
-    }
-  }
-  function sliderChange(e) {
-    setRight(rangeCount == e.target.value ? true : false);
-  }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: styles$5.main
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$5.range
-  }, /*#__PURE__*/React.createElement("i", {
-    className: "icon-vector-down"
-  })), /*#__PURE__*/React.createElement("input", {
-    type: "range",
-    className: styles$5.slider,
-    onClick: right ? onclick : null,
-    onInput: sliderInput,
-    onMouseUp: sliderChange
-  }), /*#__PURE__*/React.createElement("div", {
-    className: styles$5.selector
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$5.selectBtn
-  })), /*#__PURE__*/React.createElement("div", {
-    className: styles$5.progressBar
-  }), /*#__PURE__*/React.createElement("div", {
-    className: styles$5.range
-  }, /*#__PURE__*/React.createElement("i", {
-    className: "icon-vector-up"
-  }))));
-};
-Captcha.propTypes = {
-  onclick: PropTypes.func,
-  className: PropTypes.string,
-  rangeCount: PropTypes.number
-};
-Captcha.defaultProps = {
-  onclick: undefined
-};
-
-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%;cursor:pointer;height:36px;margin-bottom:36px;position:relative;width:36px}.stepper-module_bigRing__5GBm0{box-shadow:0 0 0 2px #d1d1d1}.stepper-module_bigRing__5GBm0:before{background:#d1d1d1}.stepper-module_activeRing__Lzvh1{box-shadow:0 0 0 2px #00236a}.stepper-module_activeRing__Lzvh1:before{background:#00236a}.stepper-module_activeRing__Lzvh1:before,.stepper-module_bigRing__5GBm0:before{border-radius:20px;bottom:-32px;content:\"\";height:28px;left:0;margin:auto;overflow:hidden;position:absolute;right:0;width:2px}.stepper-module_smallActiveRing__im-XG,.stepper-module_smallRing__u-5a8{border-radius:50%;bottom:0;left:0;margin:auto;position:absolute;right:0;top:0}.stepper-module_smallRing__u-5a8{background-color:#d1d1d1;height:14px;width:14px}.stepper-module_smallActiveRing__im-XG{align-items:center;background-color:#00236a;color:#fff;display:flex;height:28px;justify-content:center;width:28px}";
-var styles$4 = {"stepper-container":"stepper-module_stepper-container__-OVGy","bigRing":"stepper-module_bigRing__5GBm0","activeRing":"stepper-module_activeRing__Lzvh1","smallRing":"stepper-module_smallRing__u-5a8","smallActiveRing":"stepper-module_smallActiveRing__im-XG"};
-styleInject(css_248z$4);
-
-const Stepper = ({
-  className,
-  onChange,
-  stepLength,
-  activeSteps
-}) => {
-  classnames(className, 'stepper-inner-rem');
-  return /*#__PURE__*/React.createElement("div", {
-    className: `${styles$4['stepper-container']} stepper-container-rem`
-  }, (() => {
-    let steppers = [];
-    for (let step = 1; step <= stepLength; step++) {
-      steppers.push( /*#__PURE__*/React.createElement("div", {
-        className: classnames(`${step <= activeSteps ? styles$4.activeRing : styles$4.bigRing}`),
-        key: step
-      }, /*#__PURE__*/React.createElement("div", {
-        className: classnames(`${step <= activeSteps ? styles$4.smallActiveRing : styles$4.smallRing}`)
-      }, step <= activeSteps ? step : "")));
-    }
-    return steppers;
-  })());
-};
-Stepper.propTypes = {
+  padding: PropTypes.string,
+  fontSize: PropTypes.string,
+  boxSizing: PropTypes.string,
   className: PropTypes.string,
-  onChange: PropTypes.func,
-  stepLength: PropTypes.number,
-  activeSteps: PropTypes.number
+  transition: PropTypes.string,
+  contentWidth: PropTypes.bool,
+  borderRadius: PropTypes.string,
+  backgroundColor: PropTypes.string,
+  label: PropTypes.string.isRequired,
+  disabledThemeColor: PropTypes.string,
+  disabledThemeBgColor: PropTypes.string,
+  disabledThemeLineColor: PropTypes.string
 };
 
-var css_248z$3 = ".select-module_select-title__c8bR7{color:#3c393e;display:block;font-size:16px;font-weight:500;line-height:22px;margin-bottom:6px;text-transform:none}.select-module_select-content__GCMDX{display:flex;flex-direction:column;position:relative}.select-module_select-content-top__Aw-fB{border:2px solid #d1d1d1;border-radius:6px;box-sizing:border-box;color:#3c393e;cursor:pointer;display:flex;flex-direction:row;font-size:16px;font-weight:500;height:46px;line-height:22px;max-width:400px;padding:0 15px;transition:border-color .24s}.select-module_select-content-top__Aw-fB.select-module_active__v2Dce{border-color:#00236a}.select-module_select-content-top__Aw-fB:hover{border-color:#3c393e}.select-module_select-content-bottom__ueZCR{animation:select-module_select-show__391hQ .64s linear forwards;background:#fbfbfb;border-radius:6px;box-shadow:0 0 10px rgba(60,57,62,.08);left:0;max-height:0;max-width:400px;overflow:hidden;position:absolute;top:52px;width:100%;z-index:1}.select-module_select-content-bottom-inner__NWy2X{display:flex;flex-direction:column;max-height:234px;overflow-x:hidden;overflow-y:auto}@keyframes select-module_select-show__391hQ{to{max-height:400px}}.select-module_select-content-top-text__euajq{align-items:center;display:flex;flex:1;flex-direction:row;flex-wrap:nowrap}.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>i{color:#3c393e;font-size:12px!important}.select-module_select-content-top-icon__MBrGK>i:not(:last-child){align-items:center;border-right:1px solid #eee;display:flex;height:22px;margin-right:8px;padding:0 8px}.select-module_select-content-bottom-row__eKq5L{align-items:center;background:#fff;box-sizing:border-box;color:#3c393e;cursor:pointer;display:flex;font-size:16px;font-weight:500;line-height:22px;margin-bottom:2px;min-height:46px;padding:0 15px;transition:background .24s,color .24s}.select-module_select-content-bottom-row__eKq5L:last-child{margin-bottom:0}.select-module_select-content-bottom-row__eKq5L:hover{background:unset;color:#00236a}.select-module_error-message__-ac6X{border:2px solid #e00!important}.select-module_eMessage__Mm-F7{color:#e00}";
-var styles$3 = {"select-title":"select-module_select-title__c8bR7","select-content":"select-module_select-content__GCMDX","select-content-top":"select-module_select-content-top__Aw-fB","active":"select-module_active__v2Dce","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-text":"select-module_select-content-top-text__euajq","select-content-top-icon":"select-module_select-content-top-icon__MBrGK","select-content-bottom-row":"select-module_select-content-bottom-row__eKq5L","error-message":"select-module_error-message__-ac6X","eMessage":"select-module_eMessage__Mm-F7"};
-styleInject(css_248z$3);
+var css_248z$5 = ".select-module_select-title__c8bR7{color:#3c393e;display:block;font-size:16px;font-weight:500;line-height:22px;margin-bottom:6px;text-transform:none}.select-module_select-content__GCMDX{display:flex;flex-direction:column;position:relative}.select-module_select-content-top__Aw-fB{border:2px solid #d1d1d1;border-radius:6px;box-sizing:border-box;color:#3c393e;cursor:pointer;display:flex;flex-direction:row;font-size:16px;font-weight:500;height:46px;line-height:22px;max-width:400px;padding:0 15px;transition:border-color .24s}.select-module_select-content-top__Aw-fB.select-module_active__v2Dce{border-color:#00236a}.select-module_select-content-top__Aw-fB:hover{border-color:#3c393e}.select-module_select-content-bottom__ueZCR{animation:select-module_select-show__391hQ .64s linear forwards;background:#fbfbfb;border-radius:6px;box-shadow:0 0 10px rgba(60,57,62,.08);left:0;max-height:0;max-width:400px;overflow:hidden;position:absolute;top:52px;width:100%;z-index:1}.select-module_select-content-bottom-inner__NWy2X{display:flex;flex-direction:column;max-height:234px;overflow-x:hidden;overflow-y:auto}@keyframes select-module_select-show__391hQ{to{max-height:400px}}.select-module_select-content-top-text__euajq{align-items:center;display:flex;flex:1;flex-direction:row;flex-wrap:nowrap}.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>i{color:#3c393e;font-size:12px!important}.select-module_select-content-top-icon__MBrGK>i:not(:last-child){align-items:center;border-right:1px solid #eee;display:flex;height:22px;margin-right:8px;padding:0 8px}.select-module_select-content-bottom-row__eKq5L{align-items:center;background:#fff;box-sizing:border-box;color:#3c393e;cursor:pointer;display:flex;font-size:16px;font-weight:500;line-height:22px;margin-bottom:2px;min-height:46px;padding:0 15px;transition:background .24s,color .24s}.select-module_select-content-bottom-row__eKq5L:last-child{margin-bottom:0}.select-module_select-content-bottom-row__eKq5L:hover{background:unset;color:#00236a}.select-module_error-message__-ac6X{border:2px solid #e00!important}.select-module_eMessage__Mm-F7{color:#e00}";
+var styles$5 = {"select-title":"select-module_select-title__c8bR7","select-content":"select-module_select-content__GCMDX","select-content-top":"select-module_select-content-top__Aw-fB","active":"select-module_active__v2Dce","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-text":"select-module_select-content-top-text__euajq","select-content-top-icon":"select-module_select-content-top-icon__MBrGK","select-content-bottom-row":"select-module_select-content-bottom-row__eKq5L","error-message":"select-module_error-message__-ac6X","eMessage":"select-module_eMessage__Mm-F7"};
+styleInject(css_248z$5);
 
 const SelectTheme = {
   DEFAULT: 'select-default',
@@ -1024,31 +854,31 @@ const Select = ({
       };
     }
   }, [opened]);
-  classnames(styles$3[theme], styles$3[size], {
-    [styles$3.disabled]: disabled,
-    [styles$3.required]: required
+  classnames(styles$5[theme], styles$5[size], {
+    [styles$5.disabled]: disabled,
+    [styles$5.required]: required
   }, className);
   return /*#__PURE__*/React.createElement("div", null, label ? /*#__PURE__*/React.createElement("label", {
-    className: `${styles$3['select-title']} select-title-rem`
+    className: `${styles$5['select-title']} select-title-rem`
   }, label, " ", required && /*#__PURE__*/React.createElement("sup", {
     style: {
       color: "#ee0000"
     }
   }, "*")) : "", /*#__PURE__*/React.createElement("div", {
-    className: `${styles$3['select-wrap']} select-wrap-rem`,
+    className: `${styles$5['select-wrap']} select-wrap-rem`,
     ref: ref
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$3['select-content'],
-    id: styles$3.selector
+    className: styles$5['select-content'],
+    id: styles$5.selector
   }, /*#__PURE__*/React.createElement("div", {
-    className: `${styles$3['select-content-top']} select-content-top-rem ${eMessage ? styles$3['error-message'] : ''}`,
+    className: `${styles$5['select-content-top']} select-content-top-rem ${eMessage ? styles$5['error-message'] : ''}`,
     onClick: () => {
       setOpened(!opened);
     }
   }, /*#__PURE__*/React.createElement("div", {
-    className: `${styles$3['select-content-top-text']} select-content-top-text-rem`
+    className: `${styles$5['select-content-top-text']} select-content-top-text-rem`
   }, newSelected && newSelected[keyNames.name] ? newSelected[keyNames.name] : defaultOption), /*#__PURE__*/React.createElement("div", {
-    className: `${styles$3['select-content-top-icon']} select-content-top-icon-rem`
+    className: `${styles$5['select-content-top-icon']} select-content-top-icon-rem`
   }, Object.keys(newSelected).length > 0 && /*#__PURE__*/React.createElement("i", {
     className: "icon-close",
     onClick: e => {
@@ -1059,13 +889,13 @@ const Select = ({
   }), /*#__PURE__*/React.createElement("i", {
     className: opened ? 'icon-icon-up' : 'icon-icon-down'
   }))), opened && !disabled ? /*#__PURE__*/React.createElement("div", {
-    className: `${styles$3['select-content-bottom']} select-content-bottom-rem`
+    className: `${styles$5['select-content-bottom']} select-content-bottom-rem`
   }, /*#__PURE__*/React.createElement("div", {
-    className: `${styles$3['select-content-bottom-inner']} select-content-bottom-inner-rem`
+    className: `${styles$5['select-content-bottom-inner']} select-content-bottom-inner-rem`
   }, options.map((option, i) => {
     return /*#__PURE__*/React.createElement("div", {
       key: i,
-      className: `${styles$3['select-content-bottom-row']} select-content-bottom-row-rem`,
+      className: `${styles$5['select-content-bottom-row']} select-content-bottom-row-rem`,
       disabled: true,
       onClick: () => {
         setNewSelected(option);
@@ -1075,318 +905,511 @@ const Select = ({
       defaultValue: option[keyNames.id]
     }, option[keyNames.name]);
   }))) : null)), eMessage ? /*#__PURE__*/React.createElement("span", {
-    className: styles$3.eMessage
+    className: styles$5.eMessage
   }, eMessage) : null);
 };
-Select.propTypes = {
-  theme: PropTypes.oneOf(Object.values(SelectTheme)),
-  size: PropTypes.oneOf(Object.values(SelectSize)),
-  label: PropTypes.string,
-  eMessage: PropTypes.string,
-  defaultOption: PropTypes.string,
-  onChange: PropTypes.func,
-  required: PropTypes.bool,
-  disabled: PropTypes.bool,
+Select.propTypes = {
+  theme: PropTypes.oneOf(Object.values(SelectTheme)),
+  size: PropTypes.oneOf(Object.values(SelectSize)),
+  label: PropTypes.string,
+  eMessage: PropTypes.string,
+  defaultOption: PropTypes.string,
+  onChange: PropTypes.func,
+  required: PropTypes.bool,
+  disabled: PropTypes.bool,
+  className: PropTypes.string,
+  selected: PropTypes.string,
+  jsonData: PropTypes.string,
+  keyNames: PropTypes.object
+};
+Select.defaultProps = {
+  size: 'medium',
+  required: false
+};
+
+var css_248z$4 = ".tooltip-module_tooltip-block__v8U9u{align-items:center;display:flex;justify-content:center;position:relative}.tooltip-module_tooltip__emM6A{padding:10px;position:absolute;z-index:1}.tooltip-module_tooltip-rel__to9gq{align-items:center;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;display:flex;height:auto;justify-content:center;min-height:20px;min-width:50px;position:relative;width:auto}.tooltip-module_tooltip-decor__qvt7t{border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;height:10px;position:absolute;transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);width:10px;z-index:-1}";
+var styles$4 = {"tooltip-block":"tooltip-module_tooltip-block__v8U9u","tooltip":"tooltip-module_tooltip__emM6A","tooltip-rel":"tooltip-module_tooltip-rel__to9gq","tooltip-decor":"tooltip-module_tooltip-decor__qvt7t"};
+styleInject(css_248z$4);
+
+const Tooltip = ({
+  type,
+  text,
+  width,
+  color,
+  tIcon,
+  height,
+  bgColor,
+  fontSize,
+  tBgColor,
+  className,
+  fontFamily,
+  borderRadius,
+  tBorderRadius
+}) => {
+  const tooltipRef = /*#__PURE__*/createRef(null);
+  const [tooltipWidth, setTooltipWidth] = useState(0);
+  const [tooltipHeight, setTooltipHeight] = useState(0);
+  const [showTooltip, setShowTooltip] = useState(false);
+  const configStyles = compereConfigs();
+  const classProps = classnames(styles$4['tooltip'], className);
+  useEffect(_ => {
+    if (!type && !text) {
+      alert('Add type and text on tooltip');
+    } else if (!type) {
+      alert('Add type on tooltip');
+    } else if (!text) {
+      alert('Add text on tooltip');
+    }
+    tooltipRef.current && tooltipRef.current.clientWidth && tooltipRef.current.clientWidth > 0 && setTooltipWidth(tooltipRef.current.clientWidth);
+    tooltipRef.current && tooltipRef.current.clientHeight && tooltipRef.current.clientHeight > 0 && setTooltipHeight(tooltipRef.current.clientHeight);
+  }, [type, text, tooltipWidth, tooltipRef]);
+  const handleShow = () => {
+    setShowTooltip(!showTooltip);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: `${styles$4['tooltip-block']}`,
+    style: {
+      width: width ? width : configStyles.TOOLTIP.width,
+      height: height ? height : configStyles.TOOLTIP.height,
+      backgroundColor: bgColor ? bgColor : configStyles.TOOLTIP.bgColor
+    }
+  }, showTooltip ? /*#__PURE__*/React.createElement("div", {
+    ref: tooltipRef,
+    className: classProps,
+    style: {
+      backgroundColor: tBgColor ? tBgColor : configStyles.TOOLTIP.tBgColor,
+      borderRadius: tBorderRadius ? tBorderRadius : configStyles.TOOLTIP.tBorderRadius,
+      top: type === 'top' ? `calc(-${tooltipHeight + 7}px)` : type === 'bottom' ? 'calc(100% + 7px)' : type === 'left' || type === 'right' ? `calc(50% - ${tooltipHeight / 2}px)` : '0px',
+      left: type === 'top' || type === 'bottom' ? `calc(50% - ${tooltipWidth / 2}px)` : type === 'left' ? `-${tooltipWidth + 7}px` : type === 'right' ? 'calc(100% + 7px)' : '0px'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${styles$4['tooltip-rel']}`
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${styles$4['tooltip-decor']}`,
+    style: {
+      backgroundColor: tBgColor ? tBgColor : configStyles.TOOLTIP.bgColor,
+      left: type === 'top' || type === 'bottom' ? 'calc(50% - 5px)' : type === 'right' ? '-15px' : type === 'left' ? 'calc(100% + 5px)' : '0px',
+      top: type === 'top' ? 'calc(100% + 5px)' : type === 'bottom' ? '-15px' : type === 'right' || type === 'left' ? 'calc(50% - 5px)' : '0px'
+    }
+  }), /*#__PURE__*/React.createElement("p", {
+    style: {
+      color: color ? color : configStyles.TOOLTIP.color,
+      fontSize: fontSize ? fontSize : configStyles.TOOLTIP.fontSize,
+      lineHeight: fontSize ? fontSize : configStyles.TOOLTIP.fontSize,
+      fontFamily: fontFamily ? fontFamily : configStyles.TOOLTIP.fontFamily
+    }
+  }, text))) : '', /*#__PURE__*/React.createElement("div", {
+    style: {
+      cursor: 'pointer'
+    },
+    onClick: handleShow
+  }));
+};
+Tooltip.propTypes = {
+  width: PropTypes.string,
+  color: PropTypes.string,
+  tIcon: PropTypes.element,
+  height: PropTypes.string,
+  bgColor: PropTypes.string,
+  tBgColor: PropTypes.string,
+  fontSize: PropTypes.string,
+  className: PropTypes.string,
+  fontFamily: PropTypes.string,
+  borderRadius: PropTypes.string,
+  tBorderRadius: PropTypes.string,
+  type: PropTypes.string.isRequired,
+  text: PropTypes.string.isRequired
+};
+
+var css_248z$3 = "*{margin:0;padding:0}.captcha-module_main__Ys3EH{height:74px;max-width:400px;position:relative;width:100%}.captcha-module_slider__KLYny{-webkit-appearance:none;background:#eee;border-radius:2px;bottom:0;height:4px;left:0;margin:auto 0;outline:none;position:absolute;top:0;width:100%}.captcha-module_slider__KLYny::-webkit-slider-thumb{-webkit-appearance:none;height:30px;position:relative;width:30px;z-index:3}.captcha-module_selector__JFhb4{left:0;z-index:2}.captcha-module_selectBtn__GP1iH,.captcha-module_selector__JFhb4{bottom:0;height:30px;margin:auto 0;position:absolute;top:0;width:30px}.captcha-module_selectBtn__GP1iH{background:#00236a;border:2px solid #fff;border-radius:50%;box-shadow:1px 0 6px rgba(60,57,62,.15);cursor:pointer}.captcha-module_progressBar__mhdtM{background:red;bottom:0;height:4px;left:0;margin:auto 0;position:absolute;top:0;width:auto}.captcha-module_range__k24I2{color:blue;margin-bottom:15px;margin-top:15px}";
+var styles$3 = {"main":"captcha-module_main__Ys3EH","slider":"captcha-module_slider__KLYny","selector":"captcha-module_selector__JFhb4","selectBtn":"captcha-module_selectBtn__GP1iH","progressBar":"captcha-module_progressBar__mhdtM","range":"captcha-module_range__k24I2"};
+styleInject(css_248z$3);
+
+const Captcha = ({
+  onclick,
+  rangeCount
+}) => {
+  const [data, setData] = useState("");
+  const [right, setRight] = useState(false);
+  let range = rangeCount <= 100 ? rangeCount : 0;
+  let rangeElement = document.getElementsByClassName(styles$3.range);
+  useEffect(() => {
+    for (let element of rangeElement) {
+      element.style.marginLeft = `${range + 60}%`;
+      element.style.color = data;
+    }
+  }, [range, data]);
+  function sliderInput(event) {
+    setData(rangeCount == event.target.value ? 'green' : 'indianred');
+    let selector = document.getElementsByClassName(styles$3.selector);
+    let selectBtn = document.getElementsByClassName(styles$3.selectBtn);
+    let progressBar = document.getElementsByClassName(styles$3.progressBar);
+    selector[0].style.left = event.target.value + '%';
+    progressBar[0].style.width = event.target.value + '%';
+    if (rangeCount == event.target.value) {
+      selectBtn[0].style.background = "pink";
+    } else {
+      selectBtn[0].style.background = "red";
+    }
+  }
+  function sliderChange(e) {
+    setRight(rangeCount == e.target.value ? true : false);
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: styles$3.main
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$3.range
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "icon-vector-down"
+  })), /*#__PURE__*/React.createElement("input", {
+    type: "range",
+    className: styles$3.slider,
+    onClick: right ? onclick : null,
+    onInput: sliderInput,
+    onMouseUp: sliderChange
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styles$3.selector
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$3.selectBtn
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles$3.progressBar
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styles$3.range
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "icon-vector-up"
+  }))));
+};
+Captcha.propTypes = {
+  onclick: PropTypes.func,
   className: PropTypes.string,
-  selected: PropTypes.string,
-  jsonData: PropTypes.string,
-  keyNames: PropTypes.object
+  rangeCount: PropTypes.number
 };
-Select.defaultProps = {
-  size: 'medium',
-  required: false
+Captcha.defaultProps = {
+  onclick: undefined
 };
 
-var css_248z$2 = ".file-module_file-form__l13d5{align-items:center;background:#fbfbfb;border:2px dashed;border-radius:6px;cursor:pointer;display:flex;flex-direction:column;height:190px;justify-content:space-between;overflow:hidden;padding:4px 0;position:relative;width:100%}.file-module_file-form-wrap__qY--B:before{background:rgba(60,57,62,.4);border-radius:6px;content:\"\";height:100%;left:0;opacity:0;pointer-events:none;position:absolute;top:0;transition:opacity .24s;width:100%;z-index:1}.file-module_file-form-wrap__qY--B.file-module_active__L1gPt:hover:before{opacity:1;pointer-events:unset}.file-module_file-form-wrap__qY--B.file-module_active__L1gPt:hover .file-module_delete-upload-icon__PWN66{opacity:1}.file-module_file-form-inner-upload__tq3Dn{align-items:center;display:flex;flex-direction:column;justify-content:space-between;padding-bottom:16px;padding-top:48px}.file-module_file-form-inner-upload__tq3Dn>img{display:block;margin-bottom:14px}.file-module_upload-info__a8GFs{margin-bottom:40px;max-width:150px;text-align:center}.file-module_upload-info-txt__l11uN{color:#0da574}.file-module_file-form__l13d5.file-module_default__t7KU0{border-color:#d1d1d1}.file-module_file-form__l13d5.file-module_error__H-M4Z{border-color:#e00!important}.file-module_file-form__l13d5.file-module_accept__WTW6V{border-color:#00236a}.file-module_delete-upload-icon__PWN66{align-items:center;background:#fff;border-radius:6px;cursor:pointer;display:flex;height:26px;justify-content:center;opacity:0;position:absolute;right:10px;top:10px;transition:opacity .24s;width:26px;z-index:11}.file-module_delete-upload-icon__PWN66>i{color:#00236a;font-size:16px}.file-module_upload-file-content__QHMjn{align-items:center;display:flex;height:100%;justify-content:center;max-height:190px;overflow:hidden;position:relative;width:100%}.file-module_upload-file-content__QHMjn>img{bottom:0;display:block;height:190px;left:0;margin:auto;max-height:190px;position:absolute;right:0;top:0;width:auto}.file-module_file-form-title__zWTSB{margin-bottom:10px;max-width:390px;word-break:break-all}.file-module_file-form-wrap__qY--B{position:relative;transform:translateZ(0)}";
-var styles$2 = {"file-form-wrap":"file-module_file-form-wrap__qY--B","file-form":"file-module_file-form__l13d5","active":"file-module_active__L1gPt","delete-upload-icon":"file-module_delete-upload-icon__PWN66","file-form-inner-upload":"file-module_file-form-inner-upload__tq3Dn","upload-info":"file-module_upload-info__a8GFs","upload-info-txt":"file-module_upload-info-txt__l11uN","default":"file-module_default__t7KU0","error":"file-module_error__H-M4Z","accept":"file-module_accept__WTW6V","upload-file-content":"file-module_upload-file-content__QHMjn","file-form-title":"file-module_file-form-title__zWTSB"};
+var css_248z$2 = ".stepper-module_stepper-container__-OVGy>div:last-child:before{display:none}.stepper-module_activeRing__Lzvh1,.stepper-module_bigRing__5GBm0{border-radius:50%;cursor:pointer;height:36px;margin-bottom:36px;position:relative;width:36px}.stepper-module_bigRing__5GBm0{box-shadow:0 0 0 2px #d1d1d1}.stepper-module_bigRing__5GBm0:before{background:#d1d1d1}.stepper-module_activeRing__Lzvh1{box-shadow:0 0 0 2px #00236a}.stepper-module_activeRing__Lzvh1:before{background:#00236a}.stepper-module_activeRing__Lzvh1:before,.stepper-module_bigRing__5GBm0:before{border-radius:20px;bottom:-32px;content:\"\";height:28px;left:0;margin:auto;overflow:hidden;position:absolute;right:0;width:2px}.stepper-module_smallActiveRing__im-XG,.stepper-module_smallRing__u-5a8{border-radius:50%;bottom:0;left:0;margin:auto;position:absolute;right:0;top:0}.stepper-module_smallRing__u-5a8{background-color:#d1d1d1;height:14px;width:14px}.stepper-module_smallActiveRing__im-XG{align-items:center;background-color:#00236a;color:#fff;display:flex;height:28px;justify-content:center;width:28px}";
+var styles$2 = {"stepper-container":"stepper-module_stepper-container__-OVGy","bigRing":"stepper-module_bigRing__5GBm0","activeRing":"stepper-module_activeRing__Lzvh1","smallRing":"stepper-module_smallRing__u-5a8","smallActiveRing":"stepper-module_smallActiveRing__im-XG"};
 styleInject(css_248z$2);
 
-const File = ({
-  name,
-  label,
-  maxSize,
-  required,
-  disabled,
-  onChange,
+const Stepper = ({
   className,
-  defaultData,
-  errorMesage,
-  fileExtensions,
-  ...props
+  onChange,
+  stepLength,
+  activeSteps
 }) => {
-  const pdfImageName = 'https://play-lh.googleusercontent.com/kIwlXqs28otssKK_9AKwdkB6gouex_U2WmtLshTACnwIJuvOqVvJEzewpzuYBXwXQQ';
-  const [image, setImage] = useState(defaultData ? defaultData.type != 'application/pdf' ? defaultData.url : pdfImageName : null);
-  const [error, setError] = useState('');
-  const [fileName, setFileName] = useState('no selected file');
-  const handleCheckFile = e => {
-    const file = e.target.files;
-    if (file[0]) {
-      if (file[0].size <= maxSize * Math.pow(2, 20)) {
-        if (fileExtensions.includes(file[0].type.split('/')[1])) {
-          if (file[0].type === 'application/pdf') {
-            setError('');
-            onChange({
-              file
-            });
-            setImage(pdfImageName);
-          } else {
-            setError('');
-            onChange({
-              file
-            });
-            setFileName(file[0].name);
-            setImage(URL.createObjectURL(file[0]));
-          }
-        } else {
-          setImage(null);
-          setError('ֆայլի սխալ ֆորմատ');
-          setFileName('no selected file');
-        }
-      } else {
-        setImage(null);
-        setError('առավելագույն ծավալ');
-        setFileName('no selected file');
-      }
-    } else {
-      setImage(null);
-      setError('Ֆայլը ընտրված չէ');
-      setFileName('no selected file');
-    }
-  };
-  const handleRemoveFile = () => {
-    setImage(null);
-    onChange({
-      target: null
-    });
-    setFileName('no selected file');
-    document.querySelector(`.${name}`).value = "";
-  };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", {
-    className: `${styles$2['file-form-title']} ile-form-title-rem`
-  }, label, " ", required && /*#__PURE__*/React.createElement("sup", {
-    style: {
-      color: "#ee0000"
-    }
-  }, "*")), /*#__PURE__*/React.createElement("div", {
-    className: classnames(`${styles$2['file-form-wrap']} file-form-wrap-rem`, image ? styles$2['active'] : '')
-  }, /*#__PURE__*/React.createElement("div", {
-    onChange: e => console.log(e),
-    className: `${styles$2['file-form']} file-form-rem ${errorMesage ? styles$2['error'] : ''}`,
-    onClick: () => document.querySelector(`.${name}`).click()
-  }, /*#__PURE__*/React.createElement("input", {
-    hidden: true,
-    type: "file",
-    className: name,
-    disabled: disabled,
-    onChange: e => handleCheckFile(e)
-  }), image ? /*#__PURE__*/React.createElement("div", {
-    className: `${styles$2['upload-file-content']} upload-file-content-rem`
-  }, /*#__PURE__*/React.createElement("img", {
-    src: image,
-    alt: fileName
-  })) : /*#__PURE__*/React.createElement("div", {
-    className: `${styles$2['file-form-inner-upload']} ile-form-inner-upload-rem`
-  }, /*#__PURE__*/React.createElement("img", {
-    src: "../../assets/upload.svg",
-    alt: ""
-  }), /*#__PURE__*/React.createElement("span", {
-    className: `${styles$2['upload-info']} upload-info-rem`
-  }, /*#__PURE__*/React.createElement("span", {
-    className: `${styles$2['upload-info-txt']} upload-info-txt-rem`
-  }, "\u0532\u0565\u057C\u0576\u0565\u056C")), /*#__PURE__*/React.createElement("span", {
-    className: `${styles$2['upload-info-size']} upload-info-size-rem`
-  }, "\u0531\u057C\u0561\u057E\u0565\u056C\u0561\u0563\u0578\u0582\u0575\u0576\u0568 ", maxSize, "\u0544\u0532 ( ", fileExtensions.toString().split(',').join(', '), " )"))), /*#__PURE__*/React.createElement("div", {
-    className: `${styles$2['delete-upload-icon']} delete-upload-icon-rem`,
-    onClick: handleRemoveFile
-  }, /*#__PURE__*/React.createElement("i", {
-    className: "icon-delete"
-  })), errorMesage || error ? /*#__PURE__*/React.createElement("span", {
-    style: {
-      color: 'red'
+  classnames(className, 'stepper-inner-rem');
+  return /*#__PURE__*/React.createElement("div", {
+    className: `${styles$2['stepper-container']} stepper-container-rem`
+  }, (() => {
+    let steppers = [];
+    for (let step = 1; step <= stepLength; step++) {
+      steppers.push( /*#__PURE__*/React.createElement("div", {
+        className: classnames(`${step <= activeSteps ? styles$2.activeRing : styles$2.bigRing}`),
+        key: step
+      }, /*#__PURE__*/React.createElement("div", {
+        className: classnames(`${step <= activeSteps ? styles$2.smallActiveRing : styles$2.smallRing}`)
+      }, step <= activeSteps ? step : "")));
     }
-  }, errorMesage || error) : null));
+    return steppers;
+  })());
 };
-File.propTypes = {
-  label: PropTypes.string,
-  required: PropTypes.bool,
-  disabled: PropTypes.bool,
-  onChange: PropTypes.func,
-  maxSize: PropTypes.number,
+Stepper.propTypes = {
   className: PropTypes.string,
-  errorMesage: PropTypes.string,
-  defaultData: PropTypes.object,
-  fileExtensions: PropTypes.arrayOf(PropTypes.string)
-};
-File.defaultProps = {
-  maxSize: 5,
-  required: false,
-  fileExtensions: ['jpg', 'jpeg', 'png', 'pdf']
+  onChange: PropTypes.func,
+  stepLength: PropTypes.number,
+  activeSteps: PropTypes.number
 };
 
-var css_248z$1 = ".modal-module_modal-wrap__IsXXf{background:rgba(0,0,0,.4);height:100%;left:0;position:fixed;top:0;width:100%;z-index:9}.modal-module_modal-top__ntDBi{background:#fbfbfb;box-sizing:border-box;display:flex;flex-direction:row;height:44px;padding:4px 10px 4px 0;width:100%}.modal-module_modal-title__r-WKl{align-items:center;color:#3c393e;display:flex;flex:1 1;font-size:20px;font-weight:500;line-height:24px;padding-right:20px}.modal-module_close-btn__Qf2UD{cursor:pointer;flex:0 0 auto;width:24px}.modal-module_close-btn__Qf2UD,.modal-module_modal-section__Bp8jN{align-items:center;display:flex;height:100%;justify-content:center}.modal-module_modal-section__Bp8jN{flex:1 1;padding:10px 0;width:100%}.modal-module_modal-content__1F-uE{align-items:center;animation:modal-module_show-popup__WrH7a .24s;background:#fff;border-radius:8px;display:flex;flex-direction:column;height:auto;left:0;margin:auto;min-height:130px;overflow:hidden;padding:10px;position:absolute;right:0;top:110px;width:fit-content}@keyframes modal-module_show-popup__WrH7a{0%{transform:translate3d(0,-30%,0)}to{opacity:1;transform:translateZ(0)}}";
-var styles$1 = {"modal-wrap":"modal-module_modal-wrap__IsXXf","modal-top":"modal-module_modal-top__ntDBi","modal-title":"modal-module_modal-title__r-WKl","close-btn":"modal-module_close-btn__Qf2UD","modal-section":"modal-module_modal-section__Bp8jN","modal-content":"modal-module_modal-content__1F-uE","show-popup":"modal-module_show-popup__WrH7a"};
+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{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}";
+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 Modal = ({
-  setShow,
-  headerText,
-  className,
-  type,
-  data,
-  selected,
-  children
+// import styles from "./pagination.module.scss";
+
+const Dots = "...";
+const range = (start, end) => {
+  const length = end - start + 1;
+  return Array.from({
+    length
+  }, (_, idx) => idx + start);
+};
+const PaginationRange = ({
+  currentTotalCount,
+  offset,
+  siblingCountNumber,
+  currentPageNumber
 }) => {
-  classnames(styles$1.modal, className);
-  const [select, setSelect] = useState(selected);
-  return /*#__PURE__*/React.createElement("div", {
-    className: `${styles$1["modal-wrap"]} modal-wrap-rem`,
-    onClick: () => setShow(false)
-  }, type == "content" ? /*#__PURE__*/React.createElement("div", {
-    className: `${styles$1["modal-content"]} modal-content-rem`,
-    onClick: e => {
-      e.stopPropagation();
+  const paginationRange = useMemo(() => {
+    const totalPageCount = Math.ceil(currentTotalCount / offset);
+
+    //currentPage + 2*Dots + start + end = 5
+    const totalPageNumber = siblingCountNumber + 5;
+    if (totalPageNumber >= totalPageCount) {
+      return range(1, totalPageCount);
     }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: `${styles$1["modal-top"]} modal-top-rem`
-  }, /*#__PURE__*/React.createElement("div", {
-    className: `${styles$1["modal-title"]} modal-title-rem`
-  }, /*#__PURE__*/React.createElement(Typography, {
-    variant: TypographyType.p,
-    color: "#00236A"
-  }, headerText)), /*#__PURE__*/React.createElement("div", {
-    className: `${styles$1["close-btn"]} close-btn-rem`,
-    onClick: () => setShow(false)
+    const rightSiblingIndex = Math.min(currentPageNumber + siblingCountNumber, totalPageCount);
+    const leftSiblingIndex = Math.max(currentPageNumber - siblingCountNumber, 1);
+    const shouldShowLeftDots = leftSiblingIndex > 2;
+    const shouldShowRightDots = rightSiblingIndex < totalPageCount - 2;
+    const firstPageIndex = 1;
+    const lastPageIndex = totalPageCount;
+    if (!shouldShowLeftDots && shouldShowRightDots) {
+      let leftItemCount = currentPageNumber === 4 && lastPageIndex > 7 ? 4 + siblingCountNumber : 3 + siblingCountNumber;
+      let leftRange = range(1, leftItemCount);
+      return [...leftRange, Dots, totalPageCount];
+    }
+    if (shouldShowLeftDots && !shouldShowRightDots) {
+      let rightItemCount = 0;
+      currentPageNumber === lastPageIndex - 3 && lastPageIndex > 7 ? rightItemCount = 4 + siblingCountNumber : rightItemCount = 3 + siblingCountNumber;
+      let rightRange = range(totalPageCount - rightItemCount + 1, totalPageCount);
+      return [firstPageIndex, Dots, ...rightRange];
+    }
+    if (shouldShowLeftDots && shouldShowRightDots) {
+      let middleRange = range(leftSiblingIndex, rightSiblingIndex);
+      return [firstPageIndex, Dots, ...middleRange, Dots, lastPageIndex];
+    }
+  }, [currentTotalCount, offset, siblingCountNumber, currentPageNumber]);
+  return paginationRange;
+};
+
+const Pagination = ({
+  onChange,
+  totalCount,
+  siblingCount,
+  currentPage,
+  offset,
+  className
+}) => {
+  const [siblingCountNumber, setSibilingCountNumber] = useState(siblingCount);
+  const [currentPageNumber, setCurrentPage] = useState(currentPage);
+  const [currentTotalCount, setcurrentTotalCount] = useState(totalCount);
+  useEffect(() => {
+    setcurrentTotalCount(totalCount);
+  }, [totalCount]);
+  useEffect(() => {
+    setSibilingCountNumber(siblingCount);
+  }, [siblingCount]);
+  useEffect(() => {
+    setCurrentPage(currentPage);
+  }, [currentPage]);
+  const onPageChange = page => {
+    if (page > 0) {
+      setCurrentPage(page);
+    }
+  };
+  useEffect(() => {
+    onChange(currentPageNumber);
+  }, [currentPageNumber]);
+  const paginationRange = PaginationRange({
+    currentPageNumber,
+    currentTotalCount,
+    siblingCountNumber,
+    offset
+  });
+  if (currentPageNumber === 0 || paginationRange.length < 2) {
+    return null;
+  }
+  const classProps = classnames(styles$1.list, className ? className : `${styles$1["pagination-bar"]} pagination-bar-rem`);
+  const onNext = () => {
+    onPageChange(currentPageNumber + 1);
+  };
+  const onPrevious = () => {
+    onPageChange(currentPageNumber - 1);
+  };
+  const onNextFive = () => {
+    currentPageNumber !== lastPage - 4 ? onPageChange(currentPageNumber + 5) : onPageChange(currentPageNumber + 4);
+  };
+  const onPreviousFive = e => {
+    currentPageNumber !== 5 ? onPageChange(currentPageNumber - 5) : onPageChange(currentPageNumber - 4);
+  };
+  let lastPage = paginationRange[paginationRange.length - 1];
+  return /*#__PURE__*/React.createElement("ul", {
+    className: classProps
+  }, /*#__PURE__*/React.createElement("button", {
+    className: `${styles$1["pagination-btn"]} pagination-btn-rem`,
+    onClick: onPrevious,
+    disabled: currentPage === 1 ? true : false
   }, /*#__PURE__*/React.createElement("i", {
-    className: "icon-close"
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: `${styles$1["modal-section"]} modal-section-rem`
-  }, children)) : type == "images" ? /*#__PURE__*/React.createElement("div", {
-    className: `${styles$1["modal-content"]} modal-content-rem`,
-    onClick: e => {
-      e.stopPropagation();
+    className: "icon-arrow-back"
+  })), paginationRange.map((pageNumber, id) => {
+    if (pageNumber === Dots) {
+      let currentPageIndex = paginationRange.indexOf(currentPageNumber);
+      return /*#__PURE__*/React.createElement("li", {
+        key: id,
+        className: classnames(`${styles$1["pagination-jump-next"]} pagination-jump-next-rem`, styles$1.listItem),
+        onClick: id < currentPageIndex ? onPreviousFive : onNextFive,
+        disabled: currentPageIndex === 0 ? true : false
+      }, id < currentPageIndex ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+        className: `${styles$1["pagination-jump-next-txt"]} pagination-jump-next-txt-rem`
+      }, /*#__PURE__*/React.createElement("i", {
+        className: "icon-text"
+      })), /*#__PURE__*/React.createElement("span", {
+        className: `${styles$1["pagination-jump-next-arrow"]} pagination-jump-next-arrow-rem`
+      }, /*#__PURE__*/React.createElement("i", {
+        className: "icon-arrow-jump-back"
+      }))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+        className: `${styles$1["pagination-jump-next-txt"]} pagination-jump-next-txt-rem`
+      }, /*#__PURE__*/React.createElement("i", {
+        className: "icon-text"
+      })), /*#__PURE__*/React.createElement("span", {
+        className: `${styles$1["pagination-jump-next-arrow"]} pagination-jump-next-arrow-rem`
+      }, /*#__PURE__*/React.createElement("i", {
+        className: "icon-arrow-jump-next"
+      }))));
     }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: `${styles$1["close-btn"]} close-btn-rem`,
-    onClick: () => setShow(false)
+    return /*#__PURE__*/React.createElement("li", {
+      onClick: () => onPageChange(pageNumber),
+      key: id,
+      className: classnames(`${pageNumber === currentPageNumber ? styles$1.selected : styles$1.listItem}`, `${styles$1["pagination-item"]} pagination-item-rem`)
+    }, pageNumber);
+  }), /*#__PURE__*/React.createElement("button", {
+    onClick: onNext,
+    className: `${styles$1["pagination-btn"]} pagination-btn-rem`,
+    disabled: currentPageNumber === lastPage ? true : false
   }, /*#__PURE__*/React.createElement("i", {
-    className: "icon-close"
-  })), /*#__PURE__*/React.createElement("div", {
-    className: `${styles$1["modal-section"]} modal-section-rem`
-  }, /*#__PURE__*/React.createElement("div", null, select > 1 ? /*#__PURE__*/React.createElement("h1", {
-    onClick: () => setSelect(select - 1)
-  }, "-") : null, data.map(elem => {
-    if (select == elem.id) {
-      return /*#__PURE__*/React.createElement("img", {
-        width: "600px",
-        key: elem.id,
-        src: elem.url
-      });
-    }
-  }), select < data.length ? /*#__PURE__*/React.createElement("h1", {
-    onClick: () => {
-      setSelect(select + 1);
-    }
-  }, "+") : null))) : null);
+    className: "icon-arrow"
+  })));
 };
-Modal.propTypes = {
-  setShow: PropTypes.func,
-  headerText: PropTypes.string,
+Pagination.propTypes = {
+  offset: PropTypes.number,
+  totalCount: PropTypes.number,
   className: PropTypes.string,
-  type: PropTypes.string,
-  selected: PropTypes.string,
-  data: PropTypes.array
+  siblingCount: PropTypes.number,
+  currentPage: PropTypes.number
+};
+Pagination.defaultProps = {
+  offset: 2,
+  siblingCount: 2
 };
 
-var css_248z = ".table-module_table-wrap__KKAnM{background:#fff;border-radius:14px 14px 0 0;box-shadow:0 10px 30px rgba(0,35,106,.06);overflow:hidden;width:100%}.table-module_table-wrap__KKAnM:not(:first-child){margin-top:30px}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:first-child,.table-module_table-top__tfEKM .table-module_table-items__UpFg2:first-child{flex:0 0 auto;width:60px}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:nth-child(2),.table-module_table-top__tfEKM .table-module_table-items__UpFg2:nth-child(2){flex:0 0 auto;width:120px}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:nth-child(3),.table-module_table-top__tfEKM .table-module_table-items__UpFg2:nth-child(3){flex:0 0 auto;width:170px}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:nth-child(4),.table-module_table-top__tfEKM .table-module_table-items__UpFg2:nth-child(4){flex:0 0 auto;width:126px}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:nth-child(5),.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:nth-child(6),.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:nth-child(8),.table-module_table-top__tfEKM .table-module_table-items__UpFg2:nth-child(5),.table-module_table-top__tfEKM .table-module_table-items__UpFg2:nth-child(6),.table-module_table-top__tfEKM .table-module_table-items__UpFg2:nth-child(8){flex:0 0 auto;width:100px}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:last-child,.table-module_table-top__tfEKM .table-module_table-items__UpFg2:last-child{flex:0 0 auto;width:104px}.table-module_table-top__tfEKM{background:#00236a;height:44px;width:100%}.table-module_table-top__tfEKM .table-module_table-items__UpFg2{align-items:center;color:#fff;display:flex;flex:1 1;font-size:15px;justify-content:center;line-height:17px;text-align:center}.table-module_table-bottom-inner__0Pus0{background:#fff;min-height:40px;width:100%}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2{align-items:center;border-bottom:1px solid #eee;display:flex;flex:1 1;font-size:14px;justify-content:center;line-height:16px;padding:4px;text-align:center}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:not(:last-child){border-right:1px solid #eee}";
-var styles = {"table-wrap":"table-module_table-wrap__KKAnM","table-bottom-inner":"table-module_table-bottom-inner__0Pus0","table-items":"table-module_table-items__UpFg2","table-top":"table-module_table-top__tfEKM"};
+var css_248z = ".autocomplate-module_autocomplate-content__UbIUT{display:flex;flex-direction:column;position:relative}.autocomplate-module_autocomplate-content-top__FVgCp{border:2px solid #d1d1d1;border-radius:6px;box-sizing:border-box;color:#3c393e;cursor:pointer;display:flex;flex-direction:row;font-size:16px;font-weight:500;height:46px;line-height:22px;max-width:400px;padding:0 15px;transition:border-color .24s}.autocomplate-module_autocomplate-content-top__FVgCp.autocomplate-module_active__40fdV{border-color:#00236a}.autocomplate-module_autocomplate-content-top__FVgCp:hover{border-color:#3c393e}.autocomplate-module_autocomplate-content-bottom__yk0zP{animation:autocomplate-module_select-show__7Uap4 .64s linear forwards;background:#fbfbfb;border-radius:6px;box-shadow:0 0 10px rgba(60,57,62,.08);left:0;max-height:0;max-width:400px;overflow:hidden;position:absolute;top:52px;width:100%;z-index:1}.autocomplate-module_autocomplate-content-bottom-inner__rF5IF{display:flex;flex-direction:column;max-height:234px;overflow-x:hidden;overflow-y:auto}@keyframes autocomplate-module_select-show__7Uap4{to{max-height:400px}}.autocomplate-module_autocomplate-content-bottom-row__dRsZa{align-items:center;background:#fff;box-sizing:border-box;color:#3c393e;cursor:pointer;display:flex;font-size:16px;font-weight:500;height:46px;line-height:22px;margin-bottom:2px;padding:0 15px;transition:background .24s,color .24s}.autocomplate-module_autocomplate-content-bottom-row__dRsZa .autocomplate-module_no-option__xv0-E{color:red}.autocomplate-module_autocomplate-content-bottom-row__dRsZa:hover{background:unset;color:#00236a}.autocomplate-module_option-active__WuH4I .autocomplate-module_autocomplate-content-bottom-row__dRsZa{color:#00236a}.autocomplate-module_autocomplate-title__3Qxqz{color:#3c393e;display:block;font-size:16px;font-weight:500;line-height:22px;margin-bottom:6px;text-transform:none}.autocomplate-module_errorBorder__LV-nb{border:2px solid #e00!important}.autocomplate-module_errorMessage__Gchpc{color:#e00!important}";
+var styles = {"autocomplate-content":"autocomplate-module_autocomplate-content__UbIUT","autocomplate-content-top":"autocomplate-module_autocomplate-content-top__FVgCp","active":"autocomplate-module_active__40fdV","autocomplate-content-bottom":"autocomplate-module_autocomplate-content-bottom__yk0zP","select-show":"autocomplate-module_select-show__7Uap4","autocomplate-content-bottom-inner":"autocomplate-module_autocomplate-content-bottom-inner__rF5IF","autocomplate-content-bottom-row":"autocomplate-module_autocomplate-content-bottom-row__dRsZa","no-option":"autocomplate-module_no-option__xv0-E","option-active":"autocomplate-module_option-active__WuH4I","autocomplate-title":"autocomplate-module_autocomplate-title__3Qxqz","errorBorder":"autocomplate-module_errorBorder__LV-nb","errorMessage":"autocomplate-module_errorMessage__Gchpc"};
 styleInject(css_248z);
 
-const Table = ({
+const Autocomplate = ({
   className,
+  label,
+  required,
+  disabled,
+  jsonOptionsData,
+  jsonSelectedOptionsData,
   onChange,
-  config,
-  jsonData,
-  hearderData,
+  value,
+  searchCount,
+  placeHolder,
   keyNames,
-  actions,
+  errorMesage,
   ...props
 }) => {
-  classnames(className);
-  let tbodyData = jsonData.length ? JSON.parse(jsonData) : [];
+  classnames(styles.searchBox, className);
+  const parseSelectedOptionsData = jsonSelectedOptionsData ? JSON.parse(jsonSelectedOptionsData) : {
+    name: '',
+    id: ''
+  };
+  const [inputValue, setInputValue] = useState(parseSelectedOptionsData[keyNames.name]);
+  const [inputId, setInputId] = useState(parseSelectedOptionsData[keyNames.id]);
+  const [activeOption, setActiveOption] = useState(0);
+  const [showOptions, setShowOptions] = useState(false);
+  const parseOptionsData = jsonOptionsData ? JSON.parse(jsonOptionsData) : [];
   useEffect(() => {
-    tbodyData = jsonData.length ? JSON.parse(jsonData) : [];
-  }, [jsonData]);
-  const [checked, setChecked] = useState(config.isCheckbox && config.isCheckbox.checked ? config.isCheckbox.checked : []);
-  config.isCheckbox && config.isCheckbox.showCheckbox == undefined ? config.isCheckbox.showCheckbox = () => {
-    return true;
-  } : "";
-  return /*#__PURE__*/React.createElement("div", {
-    className: `${styles["table-wrap"]} table-wrap-rem`
-  }, config.isHeader && hearderData.map((header, key) => {
-    return /*#__PURE__*/React.createElement("div", {
-      className: `${styles["table-top"]} table-top-rem`,
-      key: key
-    }, /*#__PURE__*/React.createElement("div", {
-      className: `${styles["table-items"]} table-items-rem`
-    }, header));
-  }), /*#__PURE__*/React.createElement("div", {
-    className: `${styles["table-bottom"]} table-bottom-rem`
-  }, tbodyData.map((item, key) => {
-    return /*#__PURE__*/React.createElement("div", {
-      className: `${styles["table-bottom-inner"]} table-bottom-inner-rem`,
-      key: key
-    }, keyNames.map((keyName, keyNameKey) => {
-      return /*#__PURE__*/React.createElement("div", {
-        className: `${styles["table-items"]} table-items-rem`,
-        key: keyNameKey
-      }, config.isCheckbox && config.isCheckbox.showCheckbox && config.isCheckbox.showCheckbox(item) && keyNameKey == 0 && /*#__PURE__*/React.createElement(Checkbox, {
-        onClick: e => {
-          const id = e.target.id;
-          const checkedValue = e.target.checked;
-          let ch = [...checked];
-          checkedValue ? ch.push(Number(id)) : ch.splice(ch.indexOf(id), 1);
-          setChecked(ch);
-          config.isCheckbox.onChange(ch);
-        },
-        jsonData: `[{"value":"", "name":"", "label":"", "id":${item.id}, "checked":${checked.indexOf(item.id) > -1 ? true : false}}]`
-      }), typeof keyName === "string" ? item[keyName] : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("i", {
-        className: keyName.icon
-      }), item[keyName.name]));
-    }), actions && /*#__PURE__*/React.createElement("div", {
-      className: `${styles["table-items"]} table-items-rem`
-    }, actions.filter(a => a.show && a.show(item) || a.show === undefined).map((action, key) => {
-      return /*#__PURE__*/React.createElement("div", {
-        key: key
-      }, /*#__PURE__*/React.createElement("i", {
-        className: action.icon,
-        onClick: action.click ? action.click : () => {}
-      }, action.icon));
-    })));
-  })));
+    setInputValue(JSON.parse(jsonSelectedOptionsData)[keyNames.name]);
+    setInputId(JSON.parse(jsonSelectedOptionsData)[keyNames.id]);
+  }, [JSON.parse(jsonSelectedOptionsData)[keyNames.id]]);
+  const handleChange = e => {
+    const currentInputValue = e.currentTarget.value;
+    setInputId(null);
+    setInputValue(currentInputValue);
+    setInputId('');
+    setActiveOption(0);
+    setShowOptions(true);
+    onChange({
+      name: currentInputValue,
+      id: e.target.id
+    });
+  };
+  const handleClick = e => {
+    setActiveOption(0);
+    setShowOptions(false);
+    setInputValue(e.target.innerText);
+    setInputId(e.target.id);
+    onChange({
+      name: e.target.innerText,
+      id: e.target.id
+    });
+  };
+  let optionList;
+  if (showOptions && inputValue) {
+    if (parseOptionsData.length && inputValue.length >= searchCount) {
+      optionList = /*#__PURE__*/React.createElement("div", {
+        className: `${styles['autocomplate-content-bottom']} autocomplate-content-bottom-rem`
+      }, /*#__PURE__*/React.createElement("div", {
+        className: `${styles['autocomplate-content-bottom-inner']} autocomplate-content-bottom-inner-rem`
+      }, parseOptionsData.map((optionName, index) => {
+        let className;
+        if (index === activeOption) {
+          className = "option-active";
+        }
+        return /*#__PURE__*/React.createElement("div", {
+          className: `${styles[className]} autocomplate-content-click-rem`,
+          key: optionName[keyNames.id],
+          onClick: handleClick
+        }, /*#__PURE__*/React.createElement("div", {
+          id: optionName[keyNames.id],
+          className: `${styles['autocomplate-content-bottom-row']} autocomplate-content-bottom-row-rem`
+        }, optionName[keyNames.name]));
+      })));
+    } else {
+      optionList = /*#__PURE__*/React.createElement("div", {
+        className: `${styles['autocomplate-content-bottom']} autocomplate-content-bottom-rem`
+      }, /*#__PURE__*/React.createElement("div", {
+        className: `${styles['autocomplate-content-bottom-inner']} autocomplate-content-bottom-inner-rem`
+      }, /*#__PURE__*/React.createElement("div", {
+        className: `${styles['autocomplate-content-bottom-row']} autocomplate-content-bottom-row-rem`
+      }, /*#__PURE__*/React.createElement("div", {
+        className: `${styles['no-option']} autocomplate-no-option`
+      }, inputValue.length < searchCount ? `Լրացնել առնվազն ${searchCount} նիշ` : 'Նման տվյալ առկա չէ'))));
+    }
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, label ? /*#__PURE__*/React.createElement("label", {
+    className: `${styles['autocomplate-title']} autocomplate-title-rem`
+  }, label, " ", required && /*#__PURE__*/React.createElement("sup", {
+    style: {
+      color: "#ee0000"
+    }
+  }, "*")) : "", /*#__PURE__*/React.createElement("div", {
+    className: `${styles['autocomplate-content']} autocomplate-content-rem`
+  }, /*#__PURE__*/React.createElement("input", _extends({
+    id: inputId,
+    type: "text",
+    className: `${styles['autocomplate-content-top']} autocomplate-content-top-rem ${errorMesage ? styles.errorBorder : ''}`,
+    disabled: disabled,
+    onChange: handleChange,
+    onClick: () => {
+      setShowOptions(!showOptions);
+    },
+    value: inputValue,
+    placeholder: placeHolder
+  }, props)), errorMesage ? /*#__PURE__*/React.createElement("span", {
+    className: styles.errorMessage
+  }, errorMesage) : null, optionList));
 };
-Table.propTypes = {
+Autocomplate.propTypes = {
   className: PropTypes.string,
+  label: PropTypes.string,
+  placeHolder: PropTypes.string,
+  required: PropTypes.bool,
+  disabled: PropTypes.bool,
+  jsonOptionsData: PropTypes.string,
+  jsonSelectedOptionsData: PropTypes.string,
   onChange: PropTypes.func,
-  config: PropTypes.object,
-  actions: PropTypes.arrayOf(PropTypes.object),
-  jsonData: PropTypes.string,
-  keyNames: PropTypes.arrayOf(PropTypes.oneOf([PropTypes.string, PropTypes.object])),
-  hearderData: PropTypes.array
+  value: PropTypes.string,
+  searchCount: PropTypes.number,
+  keyNames: PropTypes.object,
+  errorMesage: PropTypes.string
 };
-Table.defaultProps = {
-  className: "",
-  onChange: undefined,
-  errorMesage: "",
-  config: {
-    isHeader: true,
-    isCheckbox: {
-      checked: []
-    }
-  },
-  actions: [],
-  jsonData: "",
-  keyNames: [],
-  hearderData: []
+Autocomplate.defaultProps = {
+  required: false
 };
 
 export { Autocomplate, Button, Captcha, Checkbox, File, Input, InputTypes, Modal, Pagination, Radio, Select, SelectSize, SelectTheme, Stepper, Table, Tooltip, Typography, TypographyType };