@abtnode/ux 1.15.17 → 1.16.0-beta-b16cb035

package/lib/monitor/cpu.js

@@ -0,0 +1,109 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = CpuMonitor;
+var _react = require("react");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _ahooks = require("ahooks");
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _Sparkline = _interopRequireDefault(require("@arcblock/ux/lib/Sparkline"));
+var _card = _interopRequireDefault(require("./card"));
+var _util = require("../util");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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); }
+const formatNumber = x => "".concat(x, "%");
+function CpuMonitor(_ref) {
+  let {
+    cpus,
+    currentLoad,
+    history,
+    hideDescription
+  } = _ref;
+  const {
+    t
+  } = (0, _react.useContext)(_context.LocaleContext);
+  const svgRef = (0, _react.useRef)(null);
+  const tooltipRef = (0, _react.useRef)(null);
+  const tooltipState = (0, _ahooks.useReactive)({
+    style: {
+      top: 0,
+      left: 0
+    },
+    hidden: true,
+    textContent: ''
+  });
+  const [cpuDom, setCpuDom] = (0, _react.useState)();
+  const size = (0, _ahooks.useSize)(cpuDom) || {};
+  const sparklineOptions = {
+    onmousemove(event, dataPoint) {
+      const date = (0, _util.formatTime)(dataPoint.date, 'HH:mm');
+      const left = '80px';
+      tooltipState.textContent = "".concat(date, ": ").concat(formatNumber(dataPoint.value));
+      tooltipState.style.top = '-30px';
+      tooltipState.style.left = left;
+      tooltipState.hidden = false;
+    },
+    onmouseout() {
+      tooltipState.hidden = true;
+    }
+  };
+  (0, _react.useEffect)(() => {
+    // if (!loading) {
+    //   // see: https://github.com/alibaba/hooks/issues/838
+    // }
+    setTimeout(() => {
+      setCpuDom(document.querySelector('.cpu-sparkline'));
+      setTimeout(() => {
+        if (svgRef.current) {
+          // sparkline(svgRef.current, downloads, sparklineOptions);
+          (0, _Sparkline.default)(svgRef.current, history || [], sparklineOptions);
+        }
+      }, 400);
+    });
+  }, [history]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_card.default, {
+    title: t('common.cpu'),
+    value: "".concat(Math.floor(currentLoad || 0), "%"),
+    graph: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "card-sparkline cpu-sparkline",
+      style: {
+        marginTop: 16
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+        ref: svgRef,
+        className: "sparkline",
+        width: size.width || 100,
+        height: 30,
+        strokeWidth: "2"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "tooltip",
+        ref: tooltipRef,
+        hidden: tooltipState.hidden,
+        style: _objectSpread({}, tooltipState.style),
+        children: tooltipState.textContent
+      })]
+    }),
+    description: "".concat(t('system.cores'), ": ").concat((cpus === null || cpus === void 0 ? void 0 : cpus.length) || 0),
+    hideDescription: hideDescription
+  });
+}
+CpuMonitor.propTypes = {
+  cpus: _propTypes.default.array,
+  currentLoad: _propTypes.default.number,
+  history: _propTypes.default.array,
+  hideDescription: _propTypes.default.bool
+};
+CpuMonitor.defaultProps = {
+  cpus: [],
+  currentLoad: 0,
+  history: [],
+  hideDescription: false
+};

package/lib/monitor/disk.js

@@ -0,0 +1,122 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = DiskMonitor;
+var _react = require("react");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("@mui/styles");
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _LinearProgress = _interopRequireDefault(require("@mui/material/LinearProgress"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _card = _interopRequireDefault(require("./card"));
+var _index = require("../util/index");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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); }
+const BorderLinearProgress = (0, _styles.withStyles)(theme => ({
+  root: {
+    height: 10
+  },
+  colorPrimary: {
+    backgroundColor: theme.palette.grey[theme.palette.mode === 'light' ? 200 : 700]
+  },
+  bar: {
+    backgroundColor: theme.palette.secondary.main
+  }
+}))(_LinearProgress.default);
+function LinearProgressWithLabel(props) {
+  const {
+    value
+  } = props;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+    display: "flex",
+    alignItems: "center",
+    mt: 2,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      width: "100%",
+      style: {
+        overflow: 'hidden'
+      },
+      mr: 1,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(BorderLinearProgress, _objectSpread({
+        variant: "determinate"
+      }, props))
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      minWidth: 35,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+        variant: "body2",
+        color: "textSecondary",
+        children: "".concat(Math.round(value), "%")
+      })
+    })]
+  });
+}
+LinearProgressWithLabel.propTypes = {
+  value: _propTypes.default.number.isRequired
+};
+function DiskMonitor(_ref) {
+  let {
+    disk,
+    platform
+  } = _ref;
+  const {
+    t
+  } = (0, _react.useContext)(_context.LocaleContext);
+  const metrics = [{
+    id: 1,
+    className: 'used',
+    title: t('system.used'),
+    metric: (0, _index.formatDiskSize)(disk.used, platform)
+  }, {
+    id: 2,
+    className: 'free',
+    title: t('system.free'),
+    metric: (0, _index.formatDiskSize)(disk.free, platform)
+  }, {
+    id: 3,
+    className: 'total',
+    title: t('system.total'),
+    metric: (0, _index.formatDiskSize)(disk.total, platform)
+  }];
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_card.default, {
+    title: "".concat(t('common.disk'), " (").concat(disk.device, ")"),
+    value: (0, _index.formatDiskSize)(disk.used, platform),
+    graph: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      mt: 3,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(LinearProgressWithLabel, {
+        value: disk.used / disk.total * 100
+      })
+    }),
+    description: metrics.map((x, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+      sx: {
+        marginLeft: index === 0 ? 0 : 2
+      },
+      children: [x.title, ": ", x.metric]
+    }, x.title))
+  });
+}
+DiskMonitor.propTypes = {
+  disk: _propTypes.default.shape({
+    used: _propTypes.default.number,
+    free: _propTypes.default.number,
+    total: _propTypes.default.number,
+    device: _propTypes.default.string
+  }),
+  platform: _propTypes.default.string
+};
+DiskMonitor.defaultProps = {
+  disk: {
+    used: 0,
+    free: 0,
+    total: 1,
+    device: ''
+  },
+  platform: ''
+};

package/lib/monitor/memory.js

@@ -0,0 +1,144 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = MemoryMonitor;
+var _react = require("react");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _filesize = _interopRequireDefault(require("filesize"));
+var _ahooks = require("ahooks");
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _Sparkline = _interopRequireDefault(require("@arcblock/ux/lib/Sparkline"));
+var _card = _interopRequireDefault(require("./card"));
+var _util = require("../util");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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); }
+const formatNumber = x => (0, _filesize.default)(x);
+function MemoryMonitor(_ref) {
+  let {
+    instanceCount,
+    title,
+    total,
+    used,
+    history,
+    hideDescription
+  } = _ref;
+  const {
+    t
+  } = (0, _react.useContext)(_context.LocaleContext);
+  const svgRef = (0, _react.useRef)(null);
+  const tooltipRef = (0, _react.useRef)(null);
+  const tooltipState = (0, _ahooks.useReactive)({
+    style: {
+      top: 0,
+      left: 0
+    },
+    hidden: true,
+    textContent: ''
+  });
+  const [dom, setDom] = (0, _react.useState)();
+  const size = (0, _ahooks.useSize)(dom) || {};
+  const showPercent = !!total;
+  const available = total - used;
+  const memoryPercent = showPercent ? "(".concat(Math.floor(used / total * 100), "%)") : '';
+  const memoryList = [];
+  if (instanceCount) {
+    memoryList.push({
+      title: t('system.instances'),
+      metric: instanceCount
+    });
+  }
+  memoryList.push({
+    title: t('system.used'),
+    metric: (0, _filesize.default)(used)
+  });
+  if (showPercent) {
+    memoryList.push({
+      title: t('system.free'),
+      metric: (0, _filesize.default)(available)
+    }, {
+      title: t('system.total'),
+      metric: (0, _filesize.default)(total)
+    });
+  }
+  const sparklineOptions = {
+    onmousemove(event, dataPoint) {
+      const date = (0, _util.formatTime)(dataPoint.date, 'HH:mm');
+      const left = '80px';
+      tooltipState.textContent = "".concat(date, ": ").concat(formatNumber(dataPoint.value));
+      tooltipState.style.top = '-30px';
+      tooltipState.style.left = left;
+      tooltipState.hidden = false;
+    },
+    onmouseout() {
+      tooltipState.hidden = true;
+    }
+  };
+  (0, _react.useEffect)(() => {
+    // if (!loading) {
+    //   // see: https://github.com/alibaba/hooks/issues/838
+    // }
+    setTimeout(() => {
+      setDom(document.querySelector('.mem-sparkline'));
+      setTimeout(() => {
+        if (svgRef.current) {
+          (0, _Sparkline.default)(svgRef.current, history, sparklineOptions);
+        }
+      }, 400);
+    });
+  }, [history]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_card.default, {
+    title: title || t('common.memory'),
+    value: "".concat((0, _filesize.default)(Math.floor(used || 0)), " ").concat(memoryPercent),
+    graph: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "card-sparkline mem-sparkline",
+      style: {
+        marginTop: 16
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+        ref: svgRef,
+        className: "sparkline",
+        width: size.width || 100,
+        height: 30,
+        strokeWidth: "2"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "tooltip",
+        ref: tooltipRef,
+        hidden: tooltipState.hidden,
+        style: _objectSpread({}, tooltipState.style),
+        children: tooltipState.textContent
+      })]
+    }),
+    description: memoryList.map((x, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+      sx: {
+        marginLeft: index === 0 ? 0 : 2
+      },
+      children: [x.title, ": ", x.metric]
+    }, x.title)),
+    hideDescription: hideDescription
+  });
+}
+MemoryMonitor.propTypes = {
+  title: _propTypes.default.string,
+  instanceCount: _propTypes.default.number,
+  total: _propTypes.default.number,
+  used: _propTypes.default.number,
+  history: _propTypes.default.array,
+  hideDescription: _propTypes.default.bool
+};
+MemoryMonitor.defaultProps = {
+  title: '',
+  instanceCount: null,
+  total: null,
+  used: null,
+  history: [],
+  hideDescription: false
+};

package/lib/nav-logo.js

@@ -0,0 +1,120 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = LogoContainer;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2;
+const _excluded = ["logo", "name", "subname", "previousData"],
+  _excluded2 = ["logo"];
+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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function LogoContainer(_ref) {
+  let {
+      logo,
+      name,
+      subname,
+      previousData
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  let logoEle = /*#__PURE__*/(0, _jsxRuntime.jsx)(LogoImg, {
+    logo: logo
+  });
+  let nameEle = name;
+  let subnameEle = subname;
+  if (previousData.logo) {
+    logoEle = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(LogoImg, {
+        logo: logo,
+        className: "left-fade-in-ele"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(LogoImg, {
+        logo: previousData.logo,
+        className: "postion-abs left-fade-out-ele"
+      })]
+    });
+  }
+  if (previousData.name && previousData.name !== name) {
+    nameEle = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "right-fade-in-ele",
+        style: {
+          display: 'inline-block'
+        },
+        children: name
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "postion-abs right-fade-out-ele",
+        children: previousData.name
+      })]
+    });
+  }
+  if (previousData.subname && previousData.subname !== subname) {
+    subnameEle = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "right-fade-in-ele",
+        style: {
+          display: 'inline-block'
+        },
+        children: subname
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "postion-abs right-fade-out-ele",
+        children: previousData.subname
+      })]
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, _objectSpread(_objectSpread({}, rest), {}, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "logo-inner",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "logo-img-content",
+        children: logoEle
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "logo-info ".concat(!name && !subname ? 'zero-left' : ''),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "logo-name",
+          children: nameEle
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "logo-subname",
+          children: subnameEle
+        })]
+      })]
+    })
+  }));
+}
+LogoContainer.propTypes = {
+  logo: _propTypes.default.element.isRequired,
+  name: _propTypes.default.string,
+  subname: _propTypes.default.string,
+  previousData: _propTypes.default.object
+};
+LogoContainer.defaultProps = {
+  name: '',
+  subname: '',
+  previousData: {
+    logo: '',
+    name: '',
+    subname: ''
+  }
+};
+
+// eslint-disable-next-line react/prop-types
+function LogoImg(_ref2) {
+  let {
+      logo
+    } = _ref2,
+    rest = _objectWithoutProperties(_ref2, _excluded2);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(LogoImgDiv, _objectSpread(_objectSpread({}, rest), {}, {
+    children: logo
+  }));
+}
+const LogoImgDiv = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: block;\n  > * {\n    display: block;\n  }\n"])));
+const Container = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n  display: block;\n\n  .logo-inner {\n    display: flex;\n    align-items: center;\n    height: 100%;\n    .logo-img-content {\n      position: relative;\n      display: block;\n    }\n    .logo-info {\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      margin-left: 10px;\n      letter-spacing: 0.1px;\n      &.zero-left {\n        margin-left: 0%;\n      }\n      .logo-name {\n        position: relative;\n        line-height: 16px;\n        font-size: 16px;\n        color: #121319;\n      }\n      .logo-subname {\n        position: relative;\n        line-height: 13px;\n        font-size: 13px;\n        color: #7d8085;\n      }\n    }\n  }\n\n  .postion-abs {\n    position: absolute;\n    left: 0;\n    top: 0;\n    height: 100%;\n  }\n\n  .right-fade-out-ele {\n    animation: right-fade-out ease 0.5s;\n    animation-delay: 2s;\n    animation-fill-mode: forwards;\n  }\n\n  .right-fade-in-ele {\n    animation: right-fade-in ease 0.5s;\n    animation-delay: 2s;\n    animation-fill-mode: both;\n  }\n\n  @keyframes right-fade-out {\n    0% {\n      opacity: 1;\n      transform: translate(0, 0);\n    }\n    100% {\n      opacity: 0;\n      transform: translate(8px, 0);\n    }\n  }\n\n  @keyframes right-fade-in {\n    0% {\n      opacity: 0;\n      transform: translate(8px, 0);\n    }\n    100% {\n      opacity: 1;\n      transform: translate(0, 0);\n    }\n  }\n\n  .left-fade-out-ele {\n    animation: left-fade-out ease 0.5s;\n    animation-delay: 2s;\n    animation-fill-mode: forwards;\n  }\n\n  .left-fade-in-ele {\n    animation: left-fade-in ease 0.5s;\n    animation-delay: 2s;\n    animation-fill-mode: both;\n  }\n\n  @keyframes left-fade-out {\n    0% {\n      opacity: 1;\n      transform: translate(0, 0);\n    }\n    100% {\n      opacity: 0;\n      transform: translate(-8px, 0);\n    }\n  }\n\n  @keyframes left-fade-in {\n    0% {\n      opacity: 0;\n      transform: translate(-8px, 0);\n    }\n    100% {\n      opacity: 1;\n      transform: translate(0, 0);\n    }\n  }\n"])));

package/lib/passport-tag.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = PassportTag;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject;
+const _excluded = ["passport", "onDelete"];
+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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function PassportTag(props) {
+  const {
+      passport,
+      onDelete
+    } = props,
+    rest = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Tag, _objectSpread(_objectSpread({}, rest), {}, {
+    children: [passport.title || passport.name, ' ', !!onDelete && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Close.default, {
+      "data-cy": "delete-issuance",
+      className: "delete",
+      onClick: onDelete
+    })]
+  }));
+}
+PassportTag.propTypes = {
+  passport: _propTypes.default.object.isRequired,
+  onDelete: _propTypes.default.func
+};
+PassportTag.defaultProps = {
+  onDelete: null
+};
+const Tag = _styled.default.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  padding: 2px 8px;\n  background: ", ";\n  border-radius: 100vw;\n  font-weight: 400;\n  font-size: 12px;\n  line-height: 22px;\n  color: #fff;\n  align-items: center;\n  .delete {\n    font-size: 1em;\n    margin-left: 6px;\n    cursor: pointer;\n  }\n"])), props => props.theme.palette.primary.main);

package/lib/permission.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Permission;
+exports.withPermission = withPermission;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _session = require("./contexts/session");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 Permission(_ref) {
+  let {
+    permission,
+    role,
+    component,
+    children
+  } = _ref;
+  const {
+    session
+  } = (0, _session.useSessionContext)();
+  let can = true;
+  const permissions = [].concat(permission).filter(Boolean);
+  const roles = [].concat(role).filter(Boolean);
+  if (permissions.length) {
+    const userPermissions = session.user && session.user.permissions || [];
+    can = permissions.some(p => userPermissions.includes(p));
+  }
+  if (can && roles.length) {
+    can = roles.includes(session.user.role);
+  }
+  if (typeof component === 'function') {
+    return component(can);
+  }
+  if (typeof children === 'function') {
+    return children(can);
+  }
+  if (can) {
+    return component || children || null;
+  }
+  return null;
+}
+function withPermission(Component, permissionName, role) {
+  return function WithPermission(props) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Permission, {
+      permission: permissionName,
+      role: role,
+      children: hasPermission => /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, _objectSpread(_objectSpread({}, props), {}, {
+        hasPermission: hasPermission
+      }))
+    });
+  };
+}
+Permission.propTypes = {
+  permission: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
+  role: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
+  component: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
+  children: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node])
+};
+Permission.defaultProps = {
+  permission: '',
+  role: '',
+  component: null,
+  children: null
+};