@xaypay/tui 0.0.43 → 0.0.46

package/dist/index.es.js

@@ -144,6 +144,7 @@ const TypographyType = {
   i: 'i'
 };
 const Typography = ({
+  onClick,
   variant,
   className,
   color,
@@ -168,17 +169,20 @@ const Typography = ({
 		${bold ? 'font-weight: bold;' : ''}
 	`;
   return /*#__PURE__*/React.createElement(StyledTypograpy, {
-    className: classProps
+    className: classProps,
+    onClick: onClick
   }, " ", children, " ");
 };
 Typography.propTypes = {
   variant: PropTypes.oneOf(Object.values(TypographyType)),
   className: PropTypes.string,
   bold: PropTypes.bool,
-  color: PropTypes.string
+  color: PropTypes.string,
+  onClick: PropTypes.func
 };
 Typography.defaultProps = {
-  variant: 'h1'
+  variant: 'h1',
+  onClick: () => {}
 };
 
 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}";
@@ -213,7 +217,7 @@ const Autocomplate = ({
   useEffect(() => {
     setInputValue(JSON.parse(jsonSelectedOptionsData)[keyNames.name]);
     setInputId(JSON.parse(jsonSelectedOptionsData)[keyNames.id]);
-  }, [jsonSelectedOptionsData]);
+  }, [JSON.parse(jsonSelectedOptionsData)[keyNames.id]]);
   const handleChange = e => {
     const currentInputValue = e.currentTarget.value;
     setInputId(null);
@@ -281,7 +285,6 @@ const Autocomplate = ({
     id: inputId,
     type: "text",
     className: styles$a['autocomplate-content-top'],
-    required: required,
     disabled: disabled,
     onChange: handleChange,
     onClick: () => {
@@ -946,7 +949,7 @@ Select.defaultProps = {
   required: false
 };
 
-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}.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)}html{font-size:1.4vmin}@media only screen and (max-width:1279px){html{font-size:1.2vmin}}@media only screen and (max-width:980px){html{font-size:1.5vmin}}@media only screen and (max-width:600px){html{font-size:2.4vmin}}";
+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}.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"};
 styleInject(css_248z$2);
 
@@ -963,15 +966,22 @@ const File = ({
 }) => {
   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 [error, setError] = useState('');
   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));
+    if (file[0].size <= 5000000) {
+      if (file[0].type === 'image/jpeg' || file[0].type === 'image/png') {
+        setFileName(file[0].name);
+        setImage(URL.createObjectURL(file[0]));
+        onChange({
+          file
+        });
         setError('');
-      } else if (file.type === 'application/pdf') {
+      } else if (file[0].type === 'application/pdf') {
         setImage(pdfImageName);
+        onChange({
+          file
+        });
         setError('');
       } else {
         setImage(null);
@@ -997,7 +1007,7 @@ const File = ({
     onChange: e => {
       console.log(e);
     },
-    style: error ? {
+    style: error || errorMesage ? {
       borderColor: 'red'
     } : {},
     onClick: () => {
@@ -1013,14 +1023,8 @@ const File = ({
         files
       }
     }) => {
-      onChange({
-        target: {
-          files
-        }
-      });
-      files[0] && setFileName(files[0].name);
       if (files[0]) {
-        fileType(files[0]);
+        fileType(files);
       }
     }
   }), image ? /*#__PURE__*/React.createElement("div", {
@@ -1051,11 +1055,11 @@ const File = ({
     }
   }, /*#__PURE__*/React.createElement("i", {
     className: "icon-delete"
-  })), error ? /*#__PURE__*/React.createElement("span", {
+  })), errorMesage || error ? /*#__PURE__*/React.createElement("span", {
     style: {
       color: 'red'
     }
-  }, error) : null));
+  }, errorMesage || error) : null));
 };
 File.propTypes = {
   className: PropTypes.string,

package/dist/index.js

@@ -155,6 +155,7 @@ const TypographyType = {
   i: 'i'
 };
 const Typography = ({
+  onClick,
   variant,
   className,
   color,
@@ -179,17 +180,20 @@ const Typography = ({
 		${bold ? 'font-weight: bold;' : ''}
 	`;
   return /*#__PURE__*/React__default["default"].createElement(StyledTypograpy, {
-    className: classProps
+    className: classProps,
+    onClick: onClick
   }, " ", children, " ");
 };
 Typography.propTypes = {
   variant: PropTypes__default["default"].oneOf(Object.values(TypographyType)),
   className: PropTypes__default["default"].string,
   bold: PropTypes__default["default"].bool,
-  color: PropTypes__default["default"].string
+  color: PropTypes__default["default"].string,
+  onClick: PropTypes__default["default"].func
 };
 Typography.defaultProps = {
-  variant: 'h1'
+  variant: 'h1',
+  onClick: () => {}
 };
 
 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}";
@@ -224,7 +228,7 @@ const Autocomplate = ({
   React.useEffect(() => {
     setInputValue(JSON.parse(jsonSelectedOptionsData)[keyNames.name]);
     setInputId(JSON.parse(jsonSelectedOptionsData)[keyNames.id]);
-  }, [jsonSelectedOptionsData]);
+  }, [JSON.parse(jsonSelectedOptionsData)[keyNames.id]]);
   const handleChange = e => {
     const currentInputValue = e.currentTarget.value;
     setInputId(null);
@@ -292,7 +296,6 @@ const Autocomplate = ({
     id: inputId,
     type: "text",
     className: styles$a['autocomplate-content-top'],
-    required: required,
     disabled: disabled,
     onChange: handleChange,
     onClick: () => {
@@ -957,7 +960,7 @@ Select.defaultProps = {
   required: false
 };
 
-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}.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)}html{font-size:1.4vmin}@media only screen and (max-width:1279px){html{font-size:1.2vmin}}@media only screen and (max-width:980px){html{font-size:1.5vmin}}@media only screen and (max-width:600px){html{font-size:2.4vmin}}";
+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}.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"};
 styleInject(css_248z$2);
 
@@ -974,15 +977,22 @@ const File = ({
 }) => {
   const pdfImageName = 'https://play-lh.googleusercontent.com/kIwlXqs28otssKK_9AKwdkB6gouex_U2WmtLshTACnwIJuvOqVvJEzewpzuYBXwXQQ';
   const [image, setImage] = React.useState(defaultData ? defaultData.type != 'application/pdf' ? defaultData.url : pdfImageName : null);
-  const [error, setError] = React.useState(errorMesage);
+  const [error, setError] = React.useState('');
   const [fileName, setFileName] = React.useState('no selected file');
   function fileType(file) {
-    if (file.size <= 5000000) {
-      if (file.type === 'image/jpeg' || file.type === 'image/png') {
-        setImage(URL.createObjectURL(file));
+    if (file[0].size <= 5000000) {
+      if (file[0].type === 'image/jpeg' || file[0].type === 'image/png') {
+        setFileName(file[0].name);
+        setImage(URL.createObjectURL(file[0]));
+        onChange({
+          file
+        });
         setError('');
-      } else if (file.type === 'application/pdf') {
+      } else if (file[0].type === 'application/pdf') {
         setImage(pdfImageName);
+        onChange({
+          file
+        });
         setError('');
       } else {
         setImage(null);
@@ -1008,7 +1018,7 @@ const File = ({
     onChange: e => {
       console.log(e);
     },
-    style: error ? {
+    style: error || errorMesage ? {
       borderColor: 'red'
     } : {},
     onClick: () => {
@@ -1024,14 +1034,8 @@ const File = ({
         files
       }
     }) => {
-      onChange({
-        target: {
-          files
-        }
-      });
-      files[0] && setFileName(files[0].name);
       if (files[0]) {
-        fileType(files[0]);
+        fileType(files);
       }
     }
   }), image ? /*#__PURE__*/React__default["default"].createElement("div", {
@@ -1062,11 +1066,11 @@ const File = ({
     }
   }, /*#__PURE__*/React__default["default"].createElement("i", {
     className: "icon-delete"
-  })), error ? /*#__PURE__*/React__default["default"].createElement("span", {
+  })), errorMesage || error ? /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
       color: 'red'
     }
-  }, error) : null));
+  }, errorMesage || error) : null));
 };
 File.propTypes = {
   className: PropTypes__default["default"].string,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xaypay/tui",
-  "version": "0.0.43",
+  "version": "0.0.46",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.es.js",

package/src/components/autocomplate/index.js

@@ -30,7 +30,7 @@ export const Autocomplate = ({
   useEffect(() => {
     setInputValue(JSON.parse(jsonSelectedOptionsData)[keyNames.name])
     setInputId(JSON.parse(jsonSelectedOptionsData)[keyNames.id])
-  }, [jsonSelectedOptionsData])
+  }, [JSON.parse(jsonSelectedOptionsData)[keyNames.id]])
 
   const handleChange = (e) => {
     const currentInputValue = e.currentTarget.value;
@@ -97,7 +97,6 @@ export const Autocomplate = ({
           id={inputId}
           type="text"
           className={styles['autocomplate-content-top']}
-          required={required}
           disabled={disabled}
           onChange={handleChange}
           onClick={() => { setShowOptions(!showOptions) }}

package/src/components/file/file.module.css

@@ -117,22 +117,3 @@
     position: relative;
     transform: translate3d(0,0,0);
 }
-
-html {
-    font-size: 1.4vmin;
-}
-@media only screen and (max-width: 1279px) {
-    html {
-        font-size: 1.2vmin;
-    }
-}
-@media only screen and (max-width: 980px) {
-    html {
-        font-size: 1.5vmin;
-    }
-}
-@media only screen and (max-width: 600px) {
-    html {
-        font-size: 2.4vmin;
-    }
-}

package/src/components/file/index.js

@@ -19,17 +19,20 @@ export const File = ({
   const [image, setImage] = useState(defaultData ?
     defaultData.type != 'application/pdf' ?
       defaultData.url : pdfImageName : null);
-  const [error, setError] = useState(errorMesage);
+  const [error, setError] = useState('');
   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))
+    if (file[0].size <= 5000000) {
+      if (file[0].type === 'image/jpeg' || file[0].type === 'image/png') {
+        setFileName(file[0].name)
+        setImage(URL.createObjectURL(file[0]))
+        onChange({file})
         setError('')
 
       }
-      else if (file.type === 'application/pdf') {
+      else if (file[0].type === 'application/pdf') {
         setImage(pdfImageName)
+        onChange({file})
         setError('')
 
       }
@@ -53,17 +56,15 @@ export const File = ({
         <div
           className={styles['file-form']}
             onChange={(e) => { console.log(e) }}
-            style={error ? { borderColor: 'red' } : {}}
+            style={error || errorMesage ? { borderColor: 'red' } : {}}
             onClick={() => {
                 document.querySelector(`.${name}`).click()
             }}
         >
           <input type='file' className={name}  hidden disabled={disabled}
-                 onChange={({ target: { files } }) => {
-                     onChange({ target: { files } })
-                     files[0] && setFileName(files[0].name)
+                 onChange={({ target: { files } }) => {  
                      if (files[0]) {
-                         fileType(files[0])
+                         fileType(files)
                      }
                  }}
           />
@@ -92,7 +93,7 @@ export const File = ({
           <i className="icon-delete"/>
         </div>
           {
-              error ? <span style={{ color: 'red' }}>{error}</span> : null
+              errorMesage || error  ? <span style={{ color: 'red' }}>{errorMesage || error}</span> : null
           }
       </div>
       </>

package/src/components/typography/index.js

@@ -18,7 +18,7 @@ export const TypographyType = {
 
 
 
-export const Typography = ({ variant, className, color, bold, children, ...props }) => {
+export const Typography = ({onClick, variant, className, color, bold, children, ...props }) => {
 	const classProps = classnames(className,bold ? 'bold': '');
 	const CustomTag = variant;
 	
@@ -37,7 +37,7 @@ export const Typography = ({ variant, className, color, bold, children, ...props
 	`;
 
 	return (
-		<StyledTypograpy className={classProps}> {children} </StyledTypograpy>
+		<StyledTypograpy className={classProps} onClick={onClick}> {children} </StyledTypograpy>
 	);
 };
 
@@ -45,9 +45,12 @@ Typography.propTypes = {
    variant: PropTypes.oneOf(Object.values(TypographyType)),
    className: PropTypes.string,
    bold: PropTypes.bool,
-   color: PropTypes.string
+   color: PropTypes.string,
+   onClick: PropTypes.func
 };
 
 Typography.defaultProps = {
-	variant: 'h1'
+	variant: 'h1',
+	onClick: ()=> {
+	}
 };

package/src/components/typography/typography.stories.js

@@ -26,4 +26,6 @@ const Template = (args) => <>
 export const Default = Template.bind({});
 Default.args = {
     variant: 'h1',
+    onClick: ()=> {
+	}
 };