@xaypay/tui 0.0.22 → 0.0.24

package/dist/index.es.js

@@ -45,9 +45,9 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$a = ".button-module_btn__ffRtT{border:none;border-radius:6px;box-sizing:border-box;cursor:pointer;font-size:16px;line-height:20px;min-height:46px;outline:none;overflow:hidden;padding:12px 20px;text-transform:capitalize;transition:background-color .24s,color .24s}.button-module_btn__ffRtT.button-module_full-size__vmV2E{width:100%}.button-module_btn__ffRtT.button-module_content-size__f7JSE{width:auto}.button-module_btn__ffRtT.button-module_type-filled__BiyVo{background-color:#00236a;color:#fff}.button-module_btn__ffRtT.button-module_type-filled__BiyVo:hover{background-color:#001745}.button-module_btn__ffRtT.button-module_type-filled__BiyVo:disabled{background-color:#eee;color:#3c393e;pointer-events:none}.button-module_btn__ffRtT.button-module_type-outline__RpZ2V{background-color:#fff;box-shadow:inset 0 0 0 2px #00236a}.button-module_btn__ffRtT.button-module_type-outline__RpZ2V:hover{background-color:#001745;color:#fff}.button-module_btn__ffRtT.button-module_type-outline__RpZ2V:disabled{box-shadow:inset 0 0 0 2px #eee;color:#3c393e;pointer-events:none}";
-var styles$8 = {"btn":"button-module_btn__ffRtT","full-size":"button-module_full-size__vmV2E","content-size":"button-module_content-size__f7JSE","size-default":"button-module_size-default__ydEgl","type-filled":"button-module_type-filled__BiyVo","with-icon":"button-module_with-icon__mfKU-","type-outline":"button-module_type-outline__RpZ2V"};
-styleInject(css_248z$a);
+var css_248z$b = ".button-module_btn__ffRtT{border:none;border-radius:6px;box-sizing:border-box;cursor:pointer;font-size:16px;line-height:20px;min-height:46px;outline:none;overflow:hidden;padding:12px 20px;text-transform:none;transition:background-color .24s,color .24s}.button-module_btn__ffRtT.button-module_full-size__vmV2E{width:100%}.button-module_btn__ffRtT.button-module_content-size__f7JSE{width:auto}.button-module_btn__ffRtT.button-module_type-filled__BiyVo{background-color:#00236a;color:#fff}.button-module_btn__ffRtT.button-module_type-filled__BiyVo:hover{background-color:#001745}.button-module_btn__ffRtT.button-module_type-filled__BiyVo:disabled{background-color:#eee;color:#3c393e;pointer-events:none}.button-module_btn__ffRtT.button-module_type-outline__RpZ2V{background-color:#fff;box-shadow:inset 0 0 0 2px #00236a}.button-module_btn__ffRtT.button-module_type-outline__RpZ2V:hover{background-color:#001745;color:#fff}.button-module_btn__ffRtT.button-module_type-outline__RpZ2V:disabled{box-shadow:inset 0 0 0 2px #eee;color:#3c393e;pointer-events:none}";
+var styles$9 = {"btn":"button-module_btn__ffRtT","full-size":"button-module_full-size__vmV2E","content-size":"button-module_content-size__f7JSE","size-default":"button-module_size-default__ydEgl","type-filled":"button-module_type-filled__BiyVo","with-icon":"button-module_with-icon__mfKU-","type-outline":"button-module_type-outline__RpZ2V"};
+styleInject(css_248z$b);
 
 /**
  * Primary UI component for user interaction
@@ -83,7 +83,7 @@ const Button = ({
   outline,
   ...props
 }) => {
-  const classProps = classnames(styles$8.btn, styles$8[theme], styles$8[size], outline ? styles$8['type-outline'] : styles$8['type-filled'], className);
+  const classProps = classnames(styles$9.btn, styles$9[theme], styles$9[size], outline ? styles$9['type-outline'] : styles$9['type-filled'], className);
   // className='btn type-outline size-default' 
   return /*#__PURE__*/React.createElement("button", _extends({
     type: "button",
@@ -129,8 +129,8 @@ Button.defaultProps = {
   outline: false
 };
 
-var css_248z$9 = "h1{font-size:70px;line-height:70px}h1,h2{font-weight:400;text-transform:uppercase}h2{font-size:50px;line-height:50px}h3{font-size:38px;font-weight:400;line-height:38px}h3,h4{text-transform:uppercase}h4{font-size:24px;font-weight:600;line-height:24px}h5{font-size:20px;font-size:16px;line-height:20px;line-height:22px;text-transform:uppercase}h5,p{font-weight:600;text-transform:capitalize}p{font-size:14px;line-height:20px}span{font-size:12px;font-weight:500;line-height:16px;text-transform:capitalize}i{font-family:icomoon;font-style:inherit}";
-styleInject(css_248z$9);
+var css_248z$a = "h1{font-size:70px;line-height:70px}h1,h2{font-weight:400;text-transform:uppercase}h2{font-size:50px;line-height:50px}h3{font-size:38px;font-weight:400;line-height:38px}h3,h4{text-transform:uppercase}h4{font-size:24px;font-weight:600;line-height:24px}h5{font-size:20px;font-size:16px;line-height:20px;line-height:22px;text-transform:uppercase}h5,p{font-weight:600;text-transform:none}p{font-size:14px;line-height:20px}span{font-size:12px;font-weight:500;line-height:16px;text-transform:none}i{font-family:icomoon;font-style:inherit}";
+styleInject(css_248z$a);
 
 const TypographyType = {
   h1: 'h1',
@@ -181,9 +181,9 @@ Typography.defaultProps = {
   variant: 'h1'
 };
 
-var css_248z$8 = ".autocomplate-module_autocomplate-content__UbIUT{display:flex;flex-direction:column}.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);max-height:0;max-width:400px;overflow:hidden;position:relative;top:6px}.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}";
-var styles$7 = {"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"};
-styleInject(css_248z$8);
+var css_248z$9 = ".autocomplate-module_autocomplate-content__UbIUT{display:flex;flex-direction:column}.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);max-height:0;max-width:400px;overflow:hidden;position:relative;top:6px}.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}";
+var styles$8 = {"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"};
+styleInject(css_248z$9);
 
 const Autocomplate = ({
   className,
@@ -195,88 +195,104 @@ const Autocomplate = ({
   onChange,
   value,
   searchCount,
+  placeHolder,
   keyNames,
+  errorMesage,
   ...props
 }) => {
-  classnames(styles$7.searchBox, className);
-  const [inputValue, setInputValue] = useState(null);
-  const [inputId, setInputId] = useState(null);
+  classnames(styles$8.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 [filteredOptions, setFilteredOptions] = useState([]);
   const [showOptions, setShowOptions] = useState(false);
-  const parseOptionsData = jsonOptionsData ? JSON.parse(jsonOptionsData).sort() : [];
-  const parseSelectedOptionsData = jsonSelectedOptionsData ? JSON.parse(jsonSelectedOptionsData) : {};
+  const parseOptionsData = jsonOptionsData ? JSON.parse(jsonOptionsData) : [];
+  useEffect(() => {
+    setInputValue(JSON.parse(jsonSelectedOptionsData)[keyNames.name]);
+    setInputId(JSON.parse(jsonSelectedOptionsData)[keyNames.id]);
+  }, [jsonSelectedOptionsData]);
   const handleChange = e => {
     const currentInputValue = e.currentTarget.value;
     setInputId(null);
-    const filteredOptions = parseOptionsData.filter(optionName => optionName[keyNames.name].toLowerCase().indexOf(currentInputValue.toLowerCase()) > -1);
     setInputValue(currentInputValue);
+    setInputId('');
     setActiveOption(0);
-    setFilteredOptions(filteredOptions);
     setShowOptions(true);
+    onChange({
+      name: currentInputValue,
+      id: e.target.id
+    });
   };
   const handleClick = e => {
-    setInputValue(e.currentTarget.innerText);
-    setInputId(e.target.id);
     setActiveOption(0);
-    setFilteredOptions([]);
     setShowOptions(false);
+    setInputValue(e.target.innerText);
+    setInputId(e.target.id);
     onChange({
-      name: e.currentTarget.innerText,
+      name: e.target.innerText,
       id: e.target.id
     });
   };
   let optionList;
   if (showOptions && inputValue) {
-    if (filteredOptions.length && inputValue.length >= searchCount) {
+    if (parseOptionsData.length && inputValue.length >= searchCount) {
       optionList = /*#__PURE__*/React.createElement("div", {
-        className: styles$7['autocomplate-content-bottom']
+        className: styles$8['autocomplate-content-bottom']
       }, /*#__PURE__*/React.createElement("div", {
-        className: styles$7['autocomplate-content-bottom-inner']
-      }, filteredOptions.map((optionName, index) => {
+        className: styles$8['autocomplate-content-bottom-inner']
+      }, parseOptionsData.map((optionName, index) => {
         let className;
         if (index === activeOption) {
           className = "option-active";
         }
         return /*#__PURE__*/React.createElement("div", {
-          className: styles$7[className],
+          className: styles$8[className],
           key: optionName[keyNames.id],
           onClick: handleClick
         }, /*#__PURE__*/React.createElement("div", {
           id: optionName[keyNames.id],
-          className: styles$7['autocomplate-content-bottom-row']
+          className: styles$8['autocomplate-content-bottom-row']
         }, optionName[keyNames.name]));
       })));
     } else {
       optionList = /*#__PURE__*/React.createElement("div", {
-        className: styles$7['autocomplate-content-bottom']
+        className: styles$8['autocomplate-content-bottom']
       }, /*#__PURE__*/React.createElement("div", {
-        className: styles$7['autocomplate-content-bottom-inner']
+        className: styles$8['autocomplate-content-bottom-inner']
       }, /*#__PURE__*/React.createElement("div", {
-        className: styles$7['autocomplate-content-bottom-row']
+        className: styles$8['autocomplate-content-bottom-row']
       }, /*#__PURE__*/React.createElement("div", {
-        className: styles$7['no-option']
+        className: styles$8['no-option']
       }, "No Option!"))));
     }
   }
   return /*#__PURE__*/React.createElement(React.Fragment, null, label ? /*#__PURE__*/React.createElement("label", {
-    className: styles$7.labelInput
+    className: styles$8.labelInput
   }, label) : "", /*#__PURE__*/React.createElement("div", {
-    className: styles$7['autocomplate-content']
+    className: styles$8['autocomplate-content']
   }, /*#__PURE__*/React.createElement("input", _extends({
     id: inputId,
     type: "text",
-    className: styles$7['autocomplate-content-top'],
+    className: styles$8['autocomplate-content-top'],
     required: required,
     disabled: disabled,
     onChange: handleChange,
-    value: inputValue != null ? inputValue : parseSelectedOptionsData[keyNames.name],
-    placeholder: !parseSelectedOptionsData[keyNames.name] ? " Write..." : ''
-  }, props)), optionList));
+    onClick: () => {
+      setShowOptions(!showOptions);
+    },
+    value: inputValue,
+    placeholder: placeHolder
+  }, props)), errorMesage ? /*#__PURE__*/React.createElement("span", {
+    className: styles$8.errorMessage
+  }, errorMesage) : null, optionList));
 };
 Autocomplate.propTypes = {
   className: PropTypes.string,
   label: PropTypes.string,
+  placeHolder: PropTypes.string,
   required: PropTypes.bool,
   disabled: PropTypes.bool,
   jsonOptionsData: PropTypes.string,
@@ -284,12 +300,13 @@ Autocomplate.propTypes = {
   onChange: PropTypes.func,
   value: PropTypes.string,
   searchCount: PropTypes.number,
-  keyNames: PropTypes.object
+  keyNames: PropTypes.object,
+  errorMesage: PropTypes.string
 };
 
-var css_248z$7 = ".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;display:inline-block;height:14px;left:0;margin-right:4px;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$6 = {"checkbox-wrap":"checkbox-module_checkbox-wrap__Xrg-m","checkmark":"checkbox-module_checkmark__M8DY6"};
-styleInject(css_248z$7);
+var css_248z$8 = ".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;display:inline-block;height:14px;left:0;margin-right:4px;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$7 = {"checkbox-wrap":"checkbox-module_checkbox-wrap__Xrg-m","checkmark":"checkbox-module_checkmark__M8DY6"};
+styleInject(css_248z$8);
 
 const Checkbox = ({
   disabled,
@@ -304,7 +321,7 @@ const Checkbox = ({
   onClick,
   ...props
 }) => {
-  const classProps = classnames(styles$6.checkbox, className);
+  const classProps = classnames(styles$7.checkbox, className);
   const parseData = jsonData.length !== 0 ? JSON.parse(jsonData) : [];
   const [data, setData] = useState(parseData);
   const handleClick = e => {
@@ -329,7 +346,7 @@ const Checkbox = ({
   };
   return /*#__PURE__*/React.createElement(React.Fragment, null, data.map(element => {
     return /*#__PURE__*/React.createElement("label", {
-      className: styles$6["checkbox-wrap"],
+      className: styles$7["checkbox-wrap"],
       key: element.value
     }, /*#__PURE__*/React.createElement("input", _extends({
       type: "checkbox",
@@ -341,9 +358,9 @@ const Checkbox = ({
       onChange: handleChange,
       onClick: handleClick
     }, props)), /*#__PURE__*/React.createElement("span", {
-      className: styles$6["checkmark"]
+      className: styles$7["checkmark"]
     }), element.label ? /*#__PURE__*/React.createElement("span", {
-      className: styles$6.labelRadio
+      className: styles$7.labelRadio
     }, label ? label : element.label) : "");
   }));
 };
@@ -364,21 +381,21 @@ Checkbox.defaultProps = {
   jsonData: '[{"value":"email", "name":"contact1", "label":"Email", "id":"contactChoice1"}, {"value":"phone", "name":"contact2", "label":"Phone", "id":"contactChoice2"}]'
 };
 
-var css_248z$6 = "@font-face{font-display:block;font-family:icomoon;font-style:normal;font-weight:400;src:url(fonts/icomoon.eot?r3pd9w);src:url(fonts/icomoon.eot?r3pd9w#iefix) format(\"embedded-opentype\"),url(fonts/icomoon.ttf?r3pd9w) format(\"truetype\"),url(fonts/icomoon.woff?r3pd9w) format(\"woff\"),url(fonts/icomoon.svg?r3pd9w#icomoon) format(\"svg\")}[class*=\" icon-\"],[class^=icon-]{speak:never;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:icomoon!important;font-style:normal;font-variant:normal;font-weight:400;line-height:1;text-transform:none}.icon-vector-up:before{content:\"\\e908\"}.icon-vector-down:before{content:\"\\e909\"}.icon-close:before{content:\"\\e907\"}.icon-icon-arrow-top:before{content:\"\\e905\"}.icon-icon-arrow-bottom:before{content:\"\\e906\"}.icon-arrow:before{content:\"\\e900\"}.icon-arrow-jump-next:before{content:\"\\e901\"}.icon-arrow-jump-back:before{content:\"\\e902\"}.icon-text:before{content:\"\\e903\"}.icon-arrow-back:before{content:\"\\e904\"}";
-styleInject(css_248z$6);
+var css_248z$7 = "@font-face{font-display:block;font-family:icomoon;font-style:normal;font-weight:400;src:url(fonts/icomoon.eot?r3pd9w);src:url(fonts/icomoon.eot?r3pd9w#iefix) format(\"embedded-opentype\"),url(fonts/icomoon.ttf?r3pd9w) format(\"truetype\"),url(fonts/icomoon.woff?r3pd9w) format(\"woff\"),url(fonts/icomoon.svg?r3pd9w#icomoon) format(\"svg\")}[class*=\" icon-\"],[class^=icon-]{speak:never;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:icomoon!important;font-style:normal;font-variant:normal;font-weight:400;line-height:1;text-transform:none}.icon-vector-up:before{content:\"\\e908\"}.icon-vector-down:before{content:\"\\e909\"}.icon-close:before{content:\"\\e907\"}.icon-icon-arrow-top:before{content:\"\\e905\"}.icon-icon-arrow-bottom:before{content:\"\\e906\"}.icon-arrow:before{content:\"\\e900\"}.icon-arrow-jump-next:before{content:\"\\e901\"}.icon-arrow-jump-back:before{content:\"\\e902\"}.icon-text:before{content:\"\\e903\"}.icon-arrow-back:before{content:\"\\e904\"}";
+styleInject(css_248z$7);
 
 /**
  * Created by aleksanyan.tigran on 10/7/2022.
  */
 const Icon = props => {
   return /*#__PURE__*/React.createElement("i", {
-    className: css_248z$6[props.className]
+    className: css_248z$7[props.className]
   });
 };
 
-var css_248z$5 = ".input-module_input-wrap__NunrE{position:relative}.input-module_input__-ipHD{border:none;border-radius:6px;box-shadow:inset 0 0 0 2px #d1d1d1;box-sizing:border-box;color:#3c393e;cursor:pointer;font-size:16px;line-height:20px;outline:none;overflow:hidden;text-transform:capitalize;transition:background-color .24s,color .24s}.input-module_input__-ipHD.input-module_full-size__38YG7{width:100%}.input-module_input__-ipHD.input-module_content-size__rZ5EA{width:auto}.input-module_input__-ipHD.input-module_size-medium__frTDq{min-height:46px;padding:12px 15px}.input-module_input__-ipHD:hover{box-shadow:inset 0 0 0 2px #3c393e}.input-module_input__-ipHD:active{box-shadow:inset 0 0 0 2px #00236a}.input-module_inputErrorMessages__hx490{animation:input-module_error-message-show__OrVSo .24s forwards;bottom:0;color:#e00;font-size:14px;left:0;line-height:19px;position:absolute;transform:scale3d(0,0,0);z-index:1}.input-module_labelInput__sUMKQ{color:#000}.input-module_input__-ipHD.input-module_state-disabled__402v0{background-color:#fbfbfb;pointer-events:none}.input-module_input__-ipHD.input-module_error-message__7NphF{box-shadow:inset 0 0 0 2px #e00}@keyframes input-module_error-message-show__OrVSo{to{bottom:-20px;transform:scaleX(1)}}";
-var styles$5 = {"input-wrap":"input-module_input-wrap__NunrE","input":"input-module_input__-ipHD","full-size":"input-module_full-size__38YG7","content-size":"input-module_content-size__rZ5EA","size-medium":"input-module_size-medium__frTDq","with-icon":"input-module_with-icon__w3jTW","inputErrorMessages":"input-module_inputErrorMessages__hx490","error-message-show":"input-module_error-message-show__OrVSo","labelInput":"input-module_labelInput__sUMKQ","state-disabled":"input-module_state-disabled__402v0","error-message":"input-module_error-message__7NphF"};
-styleInject(css_248z$5);
+var css_248z$6 = ".input-module_input-wrap__NunrE{position:relative}.input-module_input__-ipHD{border:none;border-radius:6px;box-shadow:inset 0 0 0 2px #d1d1d1;box-sizing:border-box;color:#3c393e;cursor:pointer;font-size:16px;line-height:20px;outline:none;overflow:hidden;text-transform:none;transition:background-color .24s,color .24s}.input-module_input__-ipHD.input-module_full-size__38YG7{width:100%}.input-module_input__-ipHD.input-module_content-size__rZ5EA{width:auto}.input-module_input__-ipHD.input-module_size-medium__frTDq{min-height:46px;padding:12px 15px}.input-module_input__-ipHD:hover{box-shadow:inset 0 0 0 2px #3c393e}.input-module_input__-ipHD:active{box-shadow:inset 0 0 0 2px #00236a}.input-module_inputErrorMessages__hx490{animation:input-module_error-message-show__OrVSo .24s forwards;bottom:0;color:#e00;font-size:14px;left:0;line-height:19px;position:absolute;transform:scale3d(0,0,0);z-index:1}.input-module_labelInput__sUMKQ{color:#000}.input-module_input__-ipHD.input-module_state-disabled__402v0{background-color:#fbfbfb;pointer-events:none}.input-module_input__-ipHD.input-module_error-message__7NphF{box-shadow:inset 0 0 0 2px #e00}@keyframes input-module_error-message-show__OrVSo{to{bottom:-20px;transform:scaleX(1)}}";
+var styles$6 = {"input-wrap":"input-module_input-wrap__NunrE","input":"input-module_input__-ipHD","full-size":"input-module_full-size__38YG7","content-size":"input-module_content-size__rZ5EA","size-medium":"input-module_size-medium__frTDq","with-icon":"input-module_with-icon__w3jTW","inputErrorMessages":"input-module_inputErrorMessages__hx490","error-message-show":"input-module_error-message-show__OrVSo","labelInput":"input-module_labelInput__sUMKQ","state-disabled":"input-module_state-disabled__402v0","error-message":"input-module_error-message__7NphF"};
+styleInject(css_248z$6);
 
 const InputTypes = {
   TEXT: "text",
@@ -422,11 +439,11 @@ const Input = ({
     const regex = new RegExp(regexp);
     eMessage = regex.test(inputValue) ? "" : regexpError;
   }
-  const classProps = classnames(styles$5.input, styles$5[size], eMessage != '' ? styles$5['error-message'] : "", className);
+  const classProps = classnames(styles$6.input, styles$6[size], eMessage != '' ? styles$6['error-message'] : "", className);
   return /*#__PURE__*/React.createElement("div", {
-    className: styles$5['input-wrap']
+    className: styles$6['input-wrap']
   }, label ? /*#__PURE__*/React.createElement("label", {
-    className: styles$5.labelInput
+    className: styles$6.labelInput
   }, label) : "", /*#__PURE__*/React.createElement("input", _extends({}, props, {
     type: type,
     className: classProps,
@@ -437,7 +454,7 @@ const Input = ({
     onChange: handleChange,
     value: inputValue
   })), eMessage ? /*#__PURE__*/React.createElement("span", {
-    className: styles$5.inputErrorMessages
+    className: styles$6.inputErrorMessages
   }, eMessage) : "");
 };
 Input.propTypes = {
@@ -465,9 +482,9 @@ Input.defaultProps = {
   value: ""
 };
 
-var css_248z$4 = ".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}.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:16px;line-height:22px;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$4 = {"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$4);
+var css_248z$5 = ".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}.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:16px;line-height:22px;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$5 = {"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$5);
 
 // import styles from "./pagination.module.scss";
 
@@ -504,7 +521,8 @@ const PaginationRange = ({
       return [...leftRange, Dots, totalPageCount];
     }
     if (shouldShowLeftDots && !shouldShowRightDots) {
-      let rightItemCount = currentPageNumber === lastPageIndex - 3 && lastPageIndex > 7 ? rightItemCount = 4 + siblingCountNumber : rightItemCount = 3 + siblingCountNumber;
+      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];
     }
@@ -551,7 +569,7 @@ const Pagination = ({
   if (currentPageNumber === 0 || paginationRange.length < 2) {
     return null;
   }
-  const classProps = classnames(styles$4.list, className ? className : styles$4["pagination-bar"]);
+  const classProps = classnames(styles$5.list, className ? className : styles$5["pagination-bar"]);
   const onNext = () => {
     onPageChange(currentPageNumber + 1);
   };
@@ -568,7 +586,7 @@ const Pagination = ({
   return /*#__PURE__*/React.createElement("ul", {
     className: classProps
   }, /*#__PURE__*/React.createElement("button", {
-    className: styles$4["pagination-btn"],
+    className: styles$5["pagination-btn"],
     onClick: onPrevious,
     disabled: currentPage === 1 ? true : false
   }, /*#__PURE__*/React.createElement("i", {
@@ -578,13 +596,13 @@ const Pagination = ({
       let currentPageIndex = paginationRange.indexOf(currentPageNumber);
       return /*#__PURE__*/React.createElement("li", {
         key: id,
-        className: classnames(styles$4['pagination-jump-next'], styles$4.listItem),
+        className: classnames(styles$5['pagination-jump-next'], styles$5.listItem),
         onClick: id < currentPageIndex ? onPreviousFive : onNextFive,
         disabled: currentPageIndex === 0 ? true : false
       }, /*#__PURE__*/React.createElement("span", {
-        className: styles$4['pagination-jump-next-txt']
+        className: styles$5['pagination-jump-next-txt']
       }, "..."), /*#__PURE__*/React.createElement("span", {
-        className: styles$4['pagination-jump-next-arrow']
+        className: styles$5['pagination-jump-next-arrow']
       }, /*#__PURE__*/React.createElement("i", {
         className: "icon-arrow-jump-next"
       })));
@@ -592,11 +610,11 @@ const Pagination = ({
     return /*#__PURE__*/React.createElement("li", {
       onClick: () => onPageChange(pageNumber),
       key: id,
-      className: classnames(`${pageNumber === currentPageNumber ? styles$4.selected : styles$4.listItem}`, styles$4['pagination-item'])
+      className: classnames(`${pageNumber === currentPageNumber ? styles$5.selected : styles$5.listItem}`, styles$5['pagination-item'])
     }, pageNumber);
   }), /*#__PURE__*/React.createElement("button", {
     onClick: onNext,
-    className: styles$4["pagination-btn"],
+    className: styles$5["pagination-btn"],
     disabled: currentPageNumber === lastPage ? true : false
   }, /*#__PURE__*/React.createElement("i", {
     className: "icon-arrow"
@@ -614,9 +632,9 @@ Pagination.defaultProps = {
   siblingCount: 2
 };
 
-var css_248z$3 = ".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$3 = {"radio-wrap":"radio-module_radio-wrap__-lO7V","radio-checkmark":"radio-module_radio-checkmark__Kvol0"};
-styleInject(css_248z$3);
+var css_248z$4 = ".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$4 = {"radio-wrap":"radio-module_radio-wrap__-lO7V","radio-checkmark":"radio-module_radio-checkmark__Kvol0"};
+styleInject(css_248z$4);
 
 const Radio = ({
   disabled,
@@ -630,11 +648,11 @@ const Radio = ({
   keyNames,
   ...props
 }) => {
-  const classProps = classnames(styles$3.checkbox, className);
+  const classProps = classnames(styles$4.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$3["radio-wrap"],
+      className: styles$4["radio-wrap"],
       key: element.value
     }, /*#__PURE__*/React.createElement("input", _extends({
       type: "radio",
@@ -645,9 +663,9 @@ const Radio = ({
       value: value ? value : element.value,
       name: name ? name : element.name
     }, props)), /*#__PURE__*/React.createElement("span", {
-      className: styles$3["radio-checkmark"]
+      className: styles$4["radio-checkmark"]
     }), element.label ? /*#__PURE__*/React.createElement("span", {
-      className: styles$3.labelRadio
+      className: styles$4.labelRadio
     }, label ? label : element.label) : "");
   }));
 };
@@ -668,9 +686,9 @@ Radio.defaultProps = {
   jsonData: '[{"value":"email", "name":"contact", "label":"Email", "id":"contactChoice1"}, {"value":"phone", "name":"contact", "label":"Phone", "id":"contactChoice2"}]'
 };
 
-var css_248z$2 = "*{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$2 = {"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$2);
+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,
@@ -679,7 +697,7 @@ const Captcha = ({
   const [data, setData] = useState("");
   const [right, setRight] = useState(false);
   let range = rangeCount <= 100 ? rangeCount : 0;
-  let rangeElement = document.getElementsByClassName(styles$2.range);
+  let rangeElement = document.getElementsByClassName(styles$3.range);
   useEffect(() => {
     for (let element of rangeElement) {
       element.style.marginLeft = `${range + 60}%`;
@@ -688,9 +706,9 @@ const Captcha = ({
   }, [range, data]);
   function sliderInput(event) {
     setData(rangeCount == event.target.value ? 'green' : 'indianred');
-    let selector = document.getElementsByClassName(styles$2.selector);
-    let selectBtn = document.getElementsByClassName(styles$2.selectBtn);
-    let progressBar = document.getElementsByClassName(styles$2.progressBar);
+    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) {
@@ -703,25 +721,25 @@ const Captcha = ({
     setRight(rangeCount == e.target.value ? true : false);
   }
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: styles$2.main
+    className: styles$3.main
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$2.range
+    className: styles$3.range
   }, /*#__PURE__*/React.createElement(Icon, {
     className: "icon-vector-down"
   })), /*#__PURE__*/React.createElement("input", {
     type: "range",
-    className: styles$2.slider,
+    className: styles$3.slider,
     onClick: right ? onclick : null,
     onInput: sliderInput,
     onMouseUp: sliderChange
   }), /*#__PURE__*/React.createElement("div", {
-    className: styles$2.selector
+    className: styles$3.selector
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$2.selectBtn
+    className: styles$3.selectBtn
   })), /*#__PURE__*/React.createElement("div", {
-    className: styles$2.progressBar
+    className: styles$3.progressBar
   }), /*#__PURE__*/React.createElement("div", {
-    className: styles$2.range
+    className: styles$3.range
   }, /*#__PURE__*/React.createElement(Icon, {
     className: "icon-vector-up"
   }))));
@@ -735,9 +753,9 @@ Captcha.defaultProps = {
   onclick: undefined
 };
 
-var css_248z$1 = ".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$1 = {"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$1);
+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 Stepper = ({
   className,
@@ -747,15 +765,15 @@ const Stepper = ({
 }) => {
   classnames(className);
   return /*#__PURE__*/React.createElement("div", {
-    className: styles$1['stepper-container']
+    className: styles$2['stepper-container']
   }, (() => {
     let steppers = [];
     for (let step = 1; step <= stepLength; step++) {
       steppers.push( /*#__PURE__*/React.createElement("div", {
-        className: classnames(`${step <= activeSteps ? styles$1.activeRing : styles$1.bigRing}`),
+        className: classnames(`${step <= activeSteps ? styles$2.activeRing : styles$2.bigRing}`),
         key: step
       }, /*#__PURE__*/React.createElement("div", {
-        className: classnames(`${step <= activeSteps ? styles$1.smallActiveRing : styles$1.smallRing}`)
+        className: classnames(`${step <= activeSteps ? styles$2.smallActiveRing : styles$2.smallRing}`)
       }, step <= activeSteps ? step : "")));
     }
     return steppers;
@@ -768,9 +786,9 @@ Stepper.propTypes = {
   activeSteps: PropTypes.number
 };
 
-var css_248z = ".select-module_select-title__c8bR7{color:#3c393e;display:block;font-size:16px;font-weight:500;line-height:22px;margin-bottom:6px;text-transform:capitalize}.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%}.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: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;height:46px;line-height:22px;margin-bottom:2px;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}";
-var styles = {"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"};
-styleInject(css_248z);
+var css_248z$1 = ".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%}.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: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;height:46px;line-height:22px;margin-bottom:2px;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}";
+var styles$1 = {"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"};
+styleInject(css_248z$1);
 
 const SelectTheme = {
   DEFAULT: 'select-default',
@@ -807,34 +825,34 @@ const Select = ({
     const parseSelectedData = selected.length !== 0 ? JSON.parse(selected) : {};
     setNewSelected(parseSelectedData);
   }, [selected]);
-  classnames(styles[theme], styles[size], {
-    [styles.disabled]: disabled,
-    [styles.required]: required
+  classnames(styles$1[theme], styles$1[size], {
+    [styles$1.disabled]: disabled,
+    [styles$1.required]: required
   }, className);
   return /*#__PURE__*/React.createElement("div", null, label ? /*#__PURE__*/React.createElement("label", {
-    className: styles['select-title']
+    className: styles$1['select-title']
   }, label) : "", /*#__PURE__*/React.createElement("div", {
-    className: styles['select-wrap']
+    className: styles$1['select-wrap']
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles['select-content'],
-    id: styles.selector
+    className: styles$1['select-content'],
+    id: styles$1.selector
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles['select-content-top'],
+    className: styles$1['select-content-top'],
     onClick: () => {
       setOpened(!opened);
     }
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles['select-content-top-text']
+    className: styles$1['select-content-top-text']
   }, newSelected && newSelected[keyNames.name] ? newSelected[keyNames.name] : defaultOption), /*#__PURE__*/React.createElement("div", {
-    className: styles['select-content-top-icon']
+    className: styles$1['select-content-top-icon']
   }, /*#__PURE__*/React.createElement(Icon, {
     className: opened ? 'icon-arrow-up' : 'icon-arrow-down'
   }))), opened && !disabled ? /*#__PURE__*/React.createElement("div", {
-    className: styles['select-content-bottom']
+    className: styles$1['select-content-bottom']
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles['select-content-bottom-inner']
+    className: styles$1['select-content-bottom-inner']
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles['select-content-bottom-row'],
+    className: styles$1['select-content-bottom-row'],
     onClick: () => {
       if (!required && !selected) {
         setNewSelected(defaultOption);
@@ -845,7 +863,7 @@ const Select = ({
   }, defaultOption), options.map((option, i) => {
     return /*#__PURE__*/React.createElement("div", {
       key: i,
-      className: styles['select-content-bottom-row'],
+      className: styles$1['select-content-bottom-row'],
       disabled: true,
       onClick: () => {
         setNewSelected(option);
@@ -855,7 +873,7 @@ const Select = ({
       defaultValue: option[keyNames.id]
     }, option[keyNames.name]);
   }))) : null)), eMessage ? /*#__PURE__*/React.createElement("span", {
-    className: styles.eMessage
+    className: styles$1.eMessage
   }, eMessage) : null);
 };
 Select.propTypes = {
@@ -876,4 +894,101 @@ Select.defaultProps = {
   size: 'medium'
 };
 
-export { Autocomplate, Button, ButtonSize, ButtonTheme, ButtonType, Captcha, Checkbox, Input, InputSizes, InputTypes, Pagination, Radio, Select, SelectSize, SelectTheme, Stepper, Typography, TypographyType };
+var css_248z = ".file-module_file-Form__G2sbx{align-items:center;border:3px dashed #a1a0a0;border-radius:5px;cursor:pointer;display:flex;flex-direction:column;height:200px;justify-content:center;width:300px}";
+var styles = {"file-Form":"file-module_file-Form__G2sbx"};
+styleInject(css_248z);
+
+const File = ({
+  className,
+  label,
+  required,
+  disabled,
+  onChange,
+  defaultData,
+  errorMesage,
+  name,
+  ...props
+}) => {
+  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(errorMesage);
+  const [fileName, setFileName] = useState('no selected file');
+  function fileType(file) {
+    if (file.size <= 5000000) {
+      if (file.type === 'image/jpeg' || file.type === 'image/png') {
+        setImage(URL.createObjectURL(file));
+        setError('');
+      } else if (file.type === 'application/pdf') {
+        setImage(pdfImageName);
+        setError('');
+      } else {
+        setImage(null);
+        setFileName('no selected file');
+        setError('ֆայլի սխալ ֆորմատ');
+      }
+    } else {
+      setImage(null);
+      setFileName('no selected file');
+      setError('առավելագույն ծավալ');
+    }
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("label", null, label), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: styles['file-Form'],
+    onChange: e => {
+      console.log(e);
+    },
+    style: error ? {
+      borderColor: 'red'
+    } : {},
+    onClick: () => {
+      document.querySelector(`.${name}`).click();
+    }
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "file",
+    className: name,
+    hidden: true,
+    disabled: disabled,
+    onChange: ({
+      target: {
+        files
+      }
+    }) => {
+      onChange({
+        target: {
+          files
+        }
+      });
+      files[0] && setFileName(files[0].name);
+      if (files[0]) {
+        fileType(files[0]);
+      }
+    }
+  }), image ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    onClick: () => {
+      setFileName('no selected file');
+      setImage(null);
+    }
+  }, "x"), /*#__PURE__*/React.createElement("img", {
+    src: image,
+    height: 120,
+    alt: fileName
+  })) : /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("img", {
+    src: "https://uxwing.com/wp-content/themes/uxwing/download/web-app-development/cloud-upload-icon.png",
+    width: 100
+  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, "\u054F\u0565\u0572\u0561\u0564\u0580\u0565\u056C \u0586\u0561\u0575\u056C\u0568 \u0561\u0575\u057D\u057F\u0565\u0572 \u056F\u0561\u0574 \u0532\u0565\u057C\u0576\u0565\u056C")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, "\u0531\u057C\u0561\u057E\u0565\u056C\u0561\u0563\u0578\u0582\u0575\u0576\u0568 5\u0544\u0532 ( jpg, jpeg, png, pdf)"))))), error ? /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: 'red'
+    }
+  }, error) : null);
+};
+File.propTypes = {
+  className: PropTypes.string,
+  label: PropTypes.string,
+  required: PropTypes.bool,
+  disabled: PropTypes.bool,
+  onChange: PropTypes.func,
+  errorMesage: PropTypes.string,
+  defaultData: PropTypes.object
+};
+
+export { Autocomplate, Button, ButtonSize, ButtonTheme, ButtonType, Captcha, Checkbox, File, Input, InputSizes, InputTypes, Pagination, Radio, Select, SelectSize, SelectTheme, Stepper, Typography, TypographyType };