@abtnode/ux 1.15.17 → 1.16.0-beta-8ee536d7

package/lib/lost-passport.js

@@ -4,62 +4,42 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
+var _react = require("react");
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _reactRouterDom = require("react-router-dom");
-
-var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
-
-var _Container = _interopRequireDefault(require("@material-ui/core/Container"));
-
-var _CheckCircle = _interopRequireDefault(require("@material-ui/icons/CheckCircle"));
-
-var _Box = _interopRequireDefault(require("@material-ui/core/Box"));
-
-var _Radio = _interopRequireDefault(require("@material-ui/core/Radio"));
-
-var _RadioGroup = _interopRequireDefault(require("@material-ui/core/RadioGroup"));
-
-var _FormControlLabel = _interopRequireDefault(require("@material-ui/core/FormControlLabel"));
-
-var _FormControl = _interopRequireDefault(require("@material-ui/core/FormControl"));
-
-var _Stepper = _interopRequireDefault(require("@material-ui/core/Stepper"));
-
-var _Step = _interopRequireDefault(require("@material-ui/core/Step"));
-
-var _StepLabel = _interopRequireDefault(require("@material-ui/core/StepLabel"));
-
-var _ViewList = _interopRequireDefault(require("@material-ui/icons/ViewList"));
-
-var _GetApp = _interopRequireDefault(require("@material-ui/icons/GetApp"));
-
-var _Done = _interopRequireDefault(require("@material-ui/icons/Done"));
-
-var _Avatar = _interopRequireDefault(require("@material-ui/core/Avatar"));
-
-var _Grid = _interopRequireDefault(require("@material-ui/core/Grid"));
-
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _Container = _interopRequireDefault(require("@mui/material/Container"));
+var _CheckCircle = _interopRequireDefault(require("@mui/icons-material/CheckCircle"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _Stepper = _interopRequireDefault(require("@mui/material/Stepper"));
+var _Step = _interopRequireDefault(require("@mui/material/Step"));
+var _StepLabel = _interopRequireDefault(require("@mui/material/StepLabel"));
+var _ViewList = _interopRequireDefault(require("@mui/icons-material/ViewList"));
+var _GetApp = _interopRequireDefault(require("@mui/icons-material/GetApp"));
+var _Done = _interopRequireDefault(require("@mui/icons-material/Done"));
+var _Avatar = _interopRequireDefault(require("@mui/material/Avatar"));
 var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
-
 var _Address = _interopRequireDefault(require("@arcblock/did-connect/lib/Address"));
-
 var _context = require("@arcblock/ux/lib/Locale/context");
-
+var _useBrowser = _interopRequireDefault(require("@arcblock/react-hooks/lib/useBrowser"));
 var _Connect = _interopRequireDefault(require("@arcblock/did-connect/lib/Connect"));
-
+var _constant = require("@abtnode/constant");
+var _cardSelector = _interopRequireDefault(require("./card-selector"));
 var _wrapLocale = _interopRequireDefault(require("./wrap-locale"));
-
+var _usePassportId = _interopRequireDefault(require("./hooks/use-passport-id"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const isFromWallet = () => {
+  const {
+    searchParams
+  } = new URL(window.location.href);
+  return searchParams.get('fromWallet') === '1';
+};
 
-/* eslint-disable react/jsx-one-expression-per-line */
 // eslint-disable-next-line react/prop-types
 function ColorStepIcon(_ref) {
   let {
@@ -68,37 +48,36 @@ function ColorStepIcon(_ref) {
     completed
   } = _ref;
   const icons = {
-    1: /*#__PURE__*/_react.default.createElement(_ViewList.default, {
+    1: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ViewList.default, {
       className: "step-icon"
     }),
-    2: /*#__PURE__*/_react.default.createElement(_GetApp.default, {
+    2: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GetApp.default, {
       className: "step-icon"
     }),
-    3: /*#__PURE__*/_react.default.createElement(_Done.default, {
+    3: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Done.default, {
       className: "step-icon"
     })
   };
   const classNames = ['step-icon-w'];
-
   if (active) {
     classNames.push('step-icon-w--active');
   }
-
   if (completed) {
     classNames.push('step-icon-w--completed');
   }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: classNames.join(' '),
+    children: icons[String(icon)]
+  });
+}
 
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: classNames.join(' ')
-  }, icons[String(icon)]);
-} // eslint-disable-next-line react/prop-types
-
-
+// eslint-disable-next-line react/prop-types
 function LostPassport(_ref2) {
   let {
     SessionContext,
     webWalletUrl,
-    createPassportSvg
+    createPassportSvg,
+    passportColor
   } = _ref2;
   const {
     api,
@@ -111,52 +90,82 @@ function LostPassport(_ref2) {
   const [user, setUser] = (0, _react.useState)(false);
   const [passport, setPassport] = (0, _react.useState)(false);
   const [success, setSuccess] = (0, _react.useState)(false);
-  const history = (0, _reactRouterDom.useHistory)();
+  const navigate = (0, _reactRouterDom.useNavigate)();
   const [activeStep, setActiveStep] = (0, _react.useState)(0);
+  const {
+    setPassportId
+  } = (0, _usePassportId.default)();
+  const {
+    wallet: isWalletWebview
+  } = (0, _useBrowser.default)();
 
+  // eslint-disable-next-line no-undef
+  const {
+    searchParams
+  } = new URL(window.location.href);
   const onNext = () => {
     setActiveStep(activeStep + 1);
   };
-
   const onGetUser = result => {
     setUser(result.user);
   };
-
   const onSelectPassport = () => {
     onNext();
   };
-
-  const onSuccess = () => {
+  const onReceivePassport = result => {
+    if (result !== null && result !== void 0 && result.passportId) {
+      setPassportId(result.passportId);
+    }
     setSuccess(true);
     onNext();
   };
-
-  const onLogin = () => {
+  const onUsePassport = () => {
+    var _window$env;
+    if (isWalletWebview && isFromWallet()) {
+      Promise.resolve().then(() => _interopRequireWildcard(require('dsbridge'))).then(jsBridge => {
+        jsBridge.call('arcClosePage');
+      });
+      return;
+    }
     try {
       session.logout();
-    } catch (err) {// Do nothing
+    } catch (err) {
+      // Do nothing
     }
-
-    history.replace('/');
+    const redirect = searchParams.get('redirect');
+    if (redirect) {
+      navigate(redirect, {
+        replace: true
+      });
+      return;
+    }
+    if ((((_window$env = window.env) === null || _window$env === void 0 ? void 0 : _window$env.apiPrefix) || '').startsWith(_constant.WELLKNOWN_SERVICE_PATH_PREFIX)) {
+      navigate("".concat(_constant.WELLKNOWN_SERVICE_PATH_PREFIX, "/login"), {
+        replace: true
+      });
+      return;
+    }
+    navigate('/', {
+      replace: true
+    });
   };
-
   const handleChange = event => {
     setPassport(event.target.value);
   };
-
   const steps = [{
     label: t('lostPassport.selectPassport'),
     content: () => {
       if (!user) {
-        return /*#__PURE__*/_react.default.createElement(_Connect.default, {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Connect.default, {
           popup: true,
           open: true,
           hideCloseButton: true,
           className: "connect",
           action: "lost-passport-list",
+          forceConnected: false,
+          autoConnect: false,
           checkFn: api.get,
           checkTimeout: 10 * 60 * 1000,
-          socketUrl: api.socketUrl,
           webWalletUrl: webWalletUrl,
           onSuccess: onGetUser,
           locale: locale,
@@ -167,68 +176,70 @@ function LostPassport(_ref2) {
           }
         });
       }
-
-      return /*#__PURE__*/_react.default.createElement(_Box.default, {
-        className: "select-passport"
-      }, /*#__PURE__*/_react.default.createElement(_Box.default, {
-        my: 1,
-        display: "flex",
-        alignItems: "center",
-        className: "user-info"
-      }, /*#__PURE__*/_react.default.createElement(_Avatar.default, {
-        src: user.avatar,
-        style: {
-          width: 48,
-          height: 48,
-          backgroundColor: 'transparent',
-          marginRight: 16
-        }
-      }), /*#__PURE__*/_react.default.createElement(_Box.default, null, /*#__PURE__*/_react.default.createElement(_Box.default, {
-        className: "name"
-      }, user.fullName), /*#__PURE__*/_react.default.createElement(_Box.default, {
-        className: "did",
-        mt: 1
-      }, /*#__PURE__*/_react.default.createElement(_Address.default, null, user.did)))), /*#__PURE__*/_react.default.createElement(_Box.default, {
-        my: 3
-      }, /*#__PURE__*/_react.default.createElement(_FormControl.default, {
-        style: {
-          width: '100%'
-        }
-      }, /*#__PURE__*/_react.default.createElement(_RadioGroup.default, {
-        "aria-label": "gender",
-        name: "gender1",
-        value: passport,
-        onChange: handleChange
-      }, /*#__PURE__*/_react.default.createElement(_Grid.default, {
-        container: true,
-        spacing: 3
-      }, user.passportTypes.map(x => /*#__PURE__*/_react.default.createElement(_Grid.default, {
-        item: true,
-        xs: 12,
-        sm: 6
-      }, /*#__PURE__*/_react.default.createElement(_FormControlLabel.default, {
-        value: x.name,
-        control: /*#__PURE__*/_react.default.createElement(_Radio.default, null),
-        label: /*#__PURE__*/_react.default.createElement("img", {
-          src: createPassportSvg({
-            issuer: x.issuer.name,
-            title: x.title,
-            issuerDid: x.issuer.id
-          }),
-          alt: "",
-          style: {
-            width: '100%'
-          }
-        })
-      }))))))), /*#__PURE__*/_react.default.createElement(_Box.default, {
-        textAlign: "center"
-      }, /*#__PURE__*/_react.default.createElement(_Button.default, {
-        rounded: true,
-        variant: "contained",
-        color: "primary",
-        onClick: () => onSelectPassport(),
-        disabled: !passport
-      }, t('common.next'))));
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+        className: "select-passport",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+          my: 1,
+          display: "flex",
+          alignItems: "center",
+          className: "user-info",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+            src: user.avatar,
+            style: {
+              width: 48,
+              height: 48,
+              backgroundColor: 'transparent',
+              marginRight: 16
+            }
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+              className: "name",
+              children: user.fullName
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+              className: "did",
+              mt: 1,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Address.default, {
+                children: user.did
+              })
+            })]
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_cardSelector.default, {
+            width: 230,
+            height: 306,
+            cardSpace: 24,
+            list: user.passportTypes.map(x => {
+              return {
+                src: createPassportSvg({
+                  title: x.title,
+                  issuer: x.issuer.name,
+                  issuerDid: x.issuer.id,
+                  ownerName: user.fullName,
+                  ownerAvatarUrl: user.avatar,
+                  isDataUrl: true,
+                  preferredColor: passportColor || 'auto'
+                }),
+                name: x.title
+              };
+            }),
+            onSelect: index => handleChange({
+              target: {
+                value: user.passportTypes[index].name
+              }
+            }),
+            defaultIndex: 0
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+          textAlign: "center",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+            variant: "contained",
+            color: "primary",
+            onClick: () => onSelectPassport(),
+            disabled: !passport,
+            children: t('common.next')
+          })
+        })]
+      });
     }
   }, {
     label: t('lostPassport.receivePassport'),
@@ -237,7 +248,7 @@ function LostPassport(_ref2) {
         receiverDid: user.did,
         passportName: passport
       };
-      return /*#__PURE__*/_react.default.createElement(_Connect.default, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Connect.default, {
         popup: true,
         open: true,
         hideCloseButton: true,
@@ -245,9 +256,8 @@ function LostPassport(_ref2) {
         action: "lost-passport-issue",
         checkFn: api.get,
         checkTimeout: 10 * 60 * 1000,
-        socketUrl: api.socketUrl,
         webWalletUrl: webWalletUrl,
-        onSuccess: onSuccess,
+        onSuccess: onReceivePassport,
         locale: locale,
         messages: {
           scan: t('lostPassport.dialog.scan'),
@@ -259,62 +269,67 @@ function LostPassport(_ref2) {
     }
   }, {
     label: t('common.complete'),
-    content: () => /*#__PURE__*/_react.default.createElement(_Box.default, {
-      textAlign: "center"
-    }, /*#__PURE__*/_react.default.createElement(_Box.default, {
-      mb: 3,
-      color: "success.main"
-    }, /*#__PURE__*/_react.default.createElement(_CheckCircle.default, {
-      style: {
-        fontSize: 60
-      }
-    })), /*#__PURE__*/_react.default.createElement(_Typography.default, {
-      component: "p",
-      variant: "body1",
-      className: "subheader"
-    }, t('issuePassport.dialog.success')), /*#__PURE__*/_react.default.createElement(_Button.default, {
-      style: {
-        marginTop: 40
-      },
-      rounded: true,
-      variant: "contained",
-      color: "primary",
-      onClick: onLogin
-    }, t('issuePassport.dialog.loginWithPassport')))
+    content: () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+      textAlign: "center",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+        mb: 3,
+        color: "success.main",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckCircle.default, {
+          style: {
+            fontSize: 60
+          }
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+        component: "p",
+        variant: "body1",
+        className: "subheader",
+        children: t('issuePassport.dialog.success')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        style: {
+          marginTop: 40
+        },
+        variant: "contained",
+        color: "primary",
+        onClick: onUsePassport,
+        children: t('issuePassport.dialog.loginWithPassport')
+      })]
+    })
   }];
-  return /*#__PURE__*/_react.default.createElement(Div, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "stepper"
-  }, /*#__PURE__*/_react.default.createElement(_Stepper.default, {
-    className: "stepper-progress",
-    alternativeLabel: true,
-    activeStep: activeStep
-  }, steps.map(_ref3 => {
-    let {
-      label
-    } = _ref3;
-    return /*#__PURE__*/_react.default.createElement(_Step.default, {
-      key: label
-    }, /*#__PURE__*/_react.default.createElement(_StepLabel.default, {
-      StepIconComponent: ColorStepIcon
-    }, label));
-  })), /*#__PURE__*/_react.default.createElement("div", {
-    className: "stepper-content"
-  }, steps[activeStep].content()), !success && /*#__PURE__*/_react.default.createElement(_Box.default, {
-    textAlign: "center",
-    fontSize: 12
-  }, /*#__PURE__*/_react.default.createElement(_reactRouterDom.Link, {
-    to: "/",
-    style: {
-      color: '#4598FA'
-    }
-  }, t('lostPassport.return')))));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Div, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "stepper",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Stepper.default, {
+        className: "stepper-progress",
+        alternativeLabel: true,
+        activeStep: activeStep,
+        children: steps.map(_ref3 => {
+          let {
+            label
+          } = _ref3;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Step.default, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StepLabel.default, {
+              StepIconComponent: ColorStepIcon,
+              children: label
+            })
+          }, label);
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "stepper-content",
+        children: steps[activeStep].content()
+      }), !success && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+        textAlign: "center",
+        fontSize: 12,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.Link, {
+          to: "/",
+          style: {
+            color: '#4598FA'
+          },
+          children: t('lostPassport.return')
+        })
+      })]
+    })
+  });
 }
-
-const Div = (0, _styledComponents.default)(_Container.default).withConfig({
-  displayName: "lost-passport__Div",
-  componentId: "sc-1ov2rpb-0"
-})(["padding-top:46px;padding-bottom:46px;height:100%;overflow:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;@media (max-width:", "px){display:block;}.header{text-align:center;margin-bottom:24px;}.stepper{padding:24px;height:auto;width:100%;min-height:640px;display:flex;flex-direction:column;.stepper-progress{background:#fbfbfb;padding:0;flex:0;margin-bottom:24px;.MuiStepLabel-label.MuiStepLabel-alternativeLabel{margin-top:8px;}.MuiStepConnector-alternativeLabel{top:24px;}.MuiStepConnector-lineHorizontal{height:3px;border:none;background-color:#eaeaf0;border-radius:1px;}.step-icon-w{background-color:", ";z-index:1;color:", ";width:50px;height:50px;display:flex;border-radius:50%;justify-content:center;align-items:center;.step-icon{font-size:30px;}}.step-icon-w--active{background-color:", ";}.step-icon-w--completed{background-color:", ";}}.stepper-content{padding:0 64px;flex:1;display:flex;justify-content:center;align-items:center;margin-bottom:24px;.stepper-icon{margin-left:40px;}.stepper-auth{padding:0;.auth-title{margin-bottom:16px;}}.stepper-tip{text-align:center;margin-bottom:16px;}@media (max-width:", "px){padding:0;}}.stepper-actions{flex:0;text-align:right;padding:0 64px;display:none;.step-button{margin-right:8px;}}.select-passport{width:80%;@media (max-width:", "px){width:100%;}}.user-info{.name{font-weight:500;font-size:18px;line-height:25px;color:#222222;}}}.connect{background:#fafafa;}"], props => props.theme.breakpoints.values.sm, props => props.theme.colors.minor, props => props.theme.colors.white, props => props.theme.colors.blue, props => props.theme.colors.secondary, props => props.theme.breakpoints.values.sm, props => props.theme.breakpoints.values.sm);
-
+const Div = (0, _styled.default)(_Container.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding-top: 46px;\n  padding-bottom: 46px;\n  height: 100%;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  @media (max-width: ", "px) {\n    display: block;\n  }\n  .header {\n    text-align: center;\n    margin-bottom: 24px;\n  }\n\n  .stepper {\n    padding: 24px;\n    height: auto;\n    width: 100%;\n    min-height: 640px;\n    display: flex;\n    flex-direction: column;\n\n    .stepper-progress {\n      padding: 0;\n      flex: 0;\n      margin-bottom: 24px;\n\n      .MuiStepLabel-label.MuiStepLabel-alternativeLabel {\n        margin-top: 8px;\n      }\n\n      .MuiStepConnector-alternativeLabel {\n        top: 24px;\n      }\n\n      .MuiStepConnector-lineHorizontal {\n        height: 3px;\n        border: none;\n        background-color: #eaeaf0;\n        border-radius: 1px;\n      }\n\n      .step-icon-w {\n        background-color: ", ";\n        z-index: 1;\n        color: ", ";\n        width: 50px;\n        height: 50px;\n        display: flex;\n        border-radius: 50%;\n        justify-content: center;\n        align-items: center;\n        .step-icon {\n          font-size: 30px;\n        }\n      }\n\n      .step-icon-w--active {\n        background-color: ", ";\n      }\n\n      .step-icon-w--completed {\n        background-color: ", ";\n      }\n    }\n\n    .stepper-content {\n      padding: 0 64px;\n      flex: 1;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      margin-bottom: 24px;\n\n      .stepper-icon {\n        margin-left: 40px;\n      }\n\n      .stepper-auth {\n        padding: 0;\n\n        .auth-title {\n          margin-bottom: 16px;\n        }\n      }\n\n      .stepper-tip {\n        text-align: center;\n        margin-bottom: 16px;\n      }\n      @media (max-width: ", "px) {\n        padding: 0;\n      }\n    }\n\n    .stepper-actions {\n      flex: 0;\n      text-align: right;\n      padding: 0 64px;\n      display: none;\n      .step-button {\n        margin-right: 8px;\n      }\n    }\n\n    .select-passport {\n      width: 80%;\n      @media (max-width: ", "px) {\n        width: 100%;\n      }\n    }\n\n    .user-info {\n      .name {\n        font-weight: 500;\n        font-size: 18px;\n        line-height: 25px;\n        color: #222222;\n      }\n    }\n  }\n\n  .connect {\n    background: #fafafa;\n  }\n"])), props => props.theme.breakpoints.values.sm, props => props.theme.palette.grey[500], props => props.theme.palette.common.white, props => props.theme.palette.primary.main, props => props.theme.palette.secondary.main, props => props.theme.breakpoints.values.sm, props => props.theme.breakpoints.values.sm);
 var _default = (0, _wrapLocale.default)(LostPassport);
-
 exports.default = _default;

package/lib/monitor/card.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = MonitCard;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _Card = _interopRequireDefault(require("@mui/material/Card"));
+var _CardContent = _interopRequireDefault(require("@mui/material/CardContent"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function MonitCard(_ref) {
+  let {
+    style,
+    title,
+    value,
+    graph,
+    description,
+    hideDescription
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledCard, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CardContent.default, {
+      style: _objectSpread({}, style),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+        sx: {
+          fontSize: 14
+        },
+        color: "text.secondary",
+        children: title
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+        variant: "h5",
+        component: "div",
+        mt: 1,
+        children: value
+      }), graph, !hideDescription && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+        display: "flex",
+        sx: {
+          fontSize: 12,
+          marginTop: 3
+        },
+        color: "text.secondary",
+        children: description
+      })]
+    })
+  });
+}
+MonitCard.propTypes = {
+  style: _propTypes.default.object,
+  title: _propTypes.default.node,
+  value: _propTypes.default.node,
+  graph: _propTypes.default.node,
+  description: _propTypes.default.node,
+  hideDescription: _propTypes.default.bool
+};
+MonitCard.defaultProps = {
+  style: {},
+  title: null,
+  value: null,
+  graph: null,
+  description: null,
+  hideDescription: false
+};
+const StyledCard = (0, _styled.default)(_Card.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .card-content {\n    height: 150px;\n  }\n\n  .card-sparkline {\n    flex: 2;\n    display: flex;\n    position: relative;\n    *[hidden] {\n      display: none;\n    }\n  }\n  .sparkline {\n    stroke: ", ";\n    fill: ", "1A;\n  }\n  .tooltip {\n    position: absolute;\n    background: rgba(0, 0, 0, 0.7);\n    color: #fff;\n    padding: 2px 5px;\n    font-size: 12px;\n    white-space: nowrap;\n    z-index: 9999;\n  }\n  .sparkline--cursor {\n    stroke: orange;\n  }\n\n  .sparkline--spot {\n    fill: red;\n    stroke: red;\n  }\n"])), props => props.theme.palette.primary.main, props => props.theme.palette.primary.main);