@abtnode/ux 1.16.18-beta-aa01bd8e → 1.16.18-beta-bb4ebacc

package/lib/blocklet/logo-uploader.js

@@ -0,0 +1,112 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = LogoUploader;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _urlJoin = _interopRequireDefault(require("url-join"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _noop = _interopRequireDefault(require("lodash/noop"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _context = require("@arcblock/ux/lib/Locale/context");
+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; } // eslint-disable-next-line import/no-unresolved
+const Uploader = /*#__PURE__*/(0, _react.lazy)(() => Promise.resolve().then(() => _interopRequireWildcard(require('@blocklet/uploader/react'))).then(res => ({
+  default: res.Uploader
+})));
+const uploadPrefix = '/blocklet/logo/upload';
+function LogoUploader(_ref) {
+  let {
+    url,
+    height,
+    width,
+    enabled,
+    type,
+    did,
+    prefix,
+    headers,
+    onUploaded
+  } = _ref;
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const uploaderRef = (0, _react.useRef)(null);
+  const onOpen = () => {
+    var _uploaderRef$current;
+    (_uploaderRef$current = uploaderRef.current) === null || _uploaderRef$current === void 0 ? void 0 : _uploaderRef$current.open();
+  };
+  const onFinish = () => {
+    var _uploaderRef$current2;
+    onUploaded();
+    (_uploaderRef$current2 = uploaderRef.current) === null || _uploaderRef$current2 === void 0 ? void 0 : _uploaderRef$current2.close();
+  };
+  const uploaderStyle = {
+    cursor: enabled ? 'pointer' : 'default',
+    '&::after': {
+      content: "\"".concat(t('common.switch'), "\"")
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Div, {
+    id: "uploader-".concat(did, "-").concat(type),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Uploader, {
+      ref: uploaderRef,
+      popup: true,
+      onUploadFinish: onFinish,
+      plugins: ['ImageEditor'],
+      apiPathProps: {
+        uploader: (0, _urlJoin.default)(prefix, uploadPrefix, type, did),
+        disableMediaKitPrefix: true
+      },
+      coreProps: {
+        restrictions: {
+          allowedFileTypes: ['image/*', '.jpg', '.jpeg', '.png', '.gif', '.svg'],
+          maxFileSize: 1024 * 1024 * 10,
+          maxNumberOfFiles: 1
+        }
+      },
+      tusProps: {
+        headers
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      className: (0, _classnames.default)('uploader-wrapper', enabled && 'enabled'),
+      sx: uploaderStyle,
+      onClick: onOpen,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+        alt: "Logo",
+        src: url,
+        style: {
+          height,
+          width
+        }
+      })
+    })]
+  }, "uploader-".concat(did, "-").concat(type));
+}
+
+// infer props for Uploader
+LogoUploader.propTypes = {
+  url: _propTypes.default.string.isRequired,
+  type: _propTypes.default.oneOf(['square', 'rect', 'favicon']).isRequired,
+  did: _propTypes.default.string.isRequired,
+  prefix: _propTypes.default.string.isRequired,
+  headers: _propTypes.default.func,
+  onUploaded: _propTypes.default.func,
+  height: _propTypes.default.number,
+  width: _propTypes.default.any,
+  enabled: _propTypes.default.bool
+};
+LogoUploader.defaultProps = {
+  height: 80,
+  width: 'auto',
+  enabled: true,
+  headers: () => ({}),
+  onUploaded: _noop.default
+};
+const Div = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .uploader-wrapper {\n    display: inline-flex;\n    position: relative;\n    font-size: 0px;\n    &.enabled {\n      cursor: pointer;\n    }\n    &::after {\n      display: none;\n    }\n    &.enabled::after {\n      display: block;\n      opacity: 0;\n      position: absolute;\n      bottom: 0;\n      background: rgba(0, 0, 0, 0.2);\n      left: 0;\n      right: 0;\n      height: 2.2em;\n      color: white;\n      text-align: center;\n      font-size: 12px;\n      line-height: 2em;\n      transition: opacity 0.3s ease;\n    }\n    &:hover::after {\n      opacity: 1;\n    }\n  }\n"])));

package/lib/blocklet/oauth/federated-site-list.js

@@ -216,7 +216,7 @@ function FederatedSiteList(_ref) {
       });
     }
     return list;
-  }, [federatedConfig.appId, federatedSites, isMaster]);
+  }, [federatedConfig.appId, federatedSites, isMaster, t]);
   const tableOptions = (0, _ahooks.useCreation)(() => {
     return {
       sort: true,

package/lib/blocklet/publish/create-release.js

@@ -581,7 +581,7 @@ function CreateRelease(_ref2) {
             });
             uploaderLogoRef.current.close();
           },
-          plugins: [],
+          plugins: ['ImageEditor'],
           apiPathProps: {
             uploader: uploadLogoPrefix,
             disableMediaKitPrefix: true
@@ -606,7 +606,7 @@ function CreateRelease(_ref2) {
             });
             uploaderScreenshotRef.current.close();
           },
-          plugins: [],
+          plugins: ['ImageEditor'],
           apiPathProps: {
             uploader: uploadScreenshotPrefix,
             disableMediaKitPrefix: true

package/lib/hooks/use-passport-id.js

@@ -4,15 +4,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = usePassportId;
-var _useLocalStorage = _interopRequireDefault(require("react-use/lib/useLocalStorage"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function usePassportId() {
-  const [passportId, setPassportId, clearPassportId] = (0, _useLocalStorage.default)('passportId', '');
+  const clearPassportId = () => {
+    localStorage.removeItem('passportId');
+  };
+  const setPassportId = value => {
+    localStorage.setItem('passportId', value);
+  };
   const getPassportId = () => {
-    setTimeout(() => {
-      clearPassportId();
-    }, 0);
-    return passportId || '';
+    const passportId = localStorage.getItem('passportId') || '';
+    clearPassportId();
+    return passportId;
   };
   return {
     getPassportId,

package/lib/locales/en.js

@@ -83,6 +83,7 @@ module.exports = {
     instances: 'Number of instances'
   },
   common: {
+    invalid: 'Invalid',
     about: 'About',
     access: 'Access',
     accessKey: 'Access Keys',
@@ -102,6 +103,7 @@ module.exports = {
     back: 'Back',
     basic: 'Basic',
     basicInfo: 'Basic Information',
+    profile: 'Profile',
     bind: 'Bind',
     blocklet: 'Blocklet',
     blocklets: 'Blocklets',
@@ -155,6 +157,7 @@ module.exports = {
     downloading: 'Downloading',
     edit: 'Edit',
     email: 'Email',
+    phone: 'Phone',
     empty: 'Empty',
     emptyData: 'No results found',
     enable: 'Enable',
@@ -396,9 +399,9 @@ module.exports = {
       securityError: 'SecurityError: Can not open the admin url from accessing a cross-origin frame'
     },
     config: {
-      name: 'Blocklet Name',
-      description: 'Blocklet Description',
-      sk: 'Secret key for the blocklet wallet',
+      name: 'App Name',
+      description: 'App Description',
+      sk: 'Secret key for the app wallet',
       logoSquare: 'App Logo',
       logoRect: 'Rect logo',
       logoRectDesc: 'Usually displayed at the top of the page, default to app logo',
@@ -419,7 +422,7 @@ module.exports = {
       languages: 'Supported Languages',
       selectLanguagesTip: 'Adjust the order by removing and re-adding',
       passportColor: 'Passport Color',
-      appUrl: 'Blocklet URL',
+      appUrl: 'App URL',
       access: {
         title: 'Who Can Access',
         description: 'Who can access the blocklet',
@@ -1109,7 +1112,24 @@ module.exports = {
         passportEmpty: 'Passport should not be empty'
       },
       connectedAccounts: 'Connected Accounts',
-      federated: 'Federated'
+      connections: 'Connections',
+      federated: 'Federated',
+      switch: {
+        did: 'Switch DID',
+        profile: 'Switch Profile',
+        passport: 'Switch Passport'
+      },
+      settings: {
+        notification: 'Notifications',
+        email: 'Send email to me when some events happen',
+        wallet: 'Send notification to my wallet when some events happen',
+        phone: 'Send text message to me when some events happen',
+        webhook: 'Webhooks',
+        add: 'Add new webhook',
+        url: 'Custom URL',
+        slack: 'Slack Webhook',
+        tested: 'Test message sent'
+      }
     },
     transferNode: {
       name: 'Transfer Ownership',

package/lib/locales/zh.js

@@ -86,6 +86,7 @@ module.exports = {
     instances: '实例数'
   },
   common: {
+    invalid: '无效',
     about: '关于',
     access: '访问',
     accessKey: '访问秘钥',
@@ -105,6 +106,7 @@ module.exports = {
     back: '返回',
     basic: '基础',
     basicInfo: '基础信息',
+    profile: '信息',
     bind: '绑定',
     blocklet: '基石程序',
     blocklets: '基石程序',
@@ -159,6 +161,7 @@ module.exports = {
     downloading: '下载中',
     edit: '编辑',
     email: '邮箱',
+    phone: '电话',
     empty: '暂无',
     emptyData: '未找到结果',
     enable: '启用',
@@ -1112,7 +1115,24 @@ module.exports = {
         passportEmpty: '通行证不能为空'
       },
       connectedAccounts: '已连接账号',
-      federated: '统一登录'
+      connections: '账号绑定',
+      federated: '统一登录',
+      switch: {
+        did: '添加账户',
+        profile: '更新身份',
+        passport: '切换通行证'
+      },
+      settings: {
+        notification: '通知设置',
+        email: '当有动态时给我发送邮件',
+        wallet: '当有动态时给我发送钱包通知',
+        phone: '当有动态时给我发送短信',
+        webhook: '外部钩子',
+        add: '添加新钩子',
+        url: '自定义 URL',
+        slack: 'Slack 通知',
+        tested: '测试消息已经发送'
+      }
     },
     transferNode: {
       name: '转移所有者',

package/lib/logs/log-terminal.js

@@ -52,7 +52,8 @@ function LogTerminalGroup(_ref) {
     error: 'Error',
     access: 'Access',
     stdout: 'stdout',
-    stderr: 'stderr'
+    stderr: 'stderr',
+    pm2: 'PM2'
   };
   const isMobile = (0, _useMediaQuery.default)(theme => theme.breakpoints.down('md'));
   const [currentType, setCurrentType] = (0, _react.useState)(types[defaultTypeIndex || 0]);

package/lib/schema-form/index.js

@@ -18,6 +18,7 @@ var _textInput = _interopRequireDefault(require("./text-input"));
 var _passportInput = _interopRequireDefault(require("./passport-input"));
 var _required = _interopRequireDefault(require("../form/required"));
 var _formWrapper = _interopRequireDefault(require("../form/form-wrapper"));
+var _logoUploader = _interopRequireDefault(require("../blocklet/logo-uploader"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -48,7 +49,8 @@ function getComponent(item, _ref) {
   const componentMap = {
     input: _textInput.default,
     color: _colorInput.default,
-    passport: _passportInput.default
+    passport: _passportInput.default,
+    uploader: props => /*#__PURE__*/(0, _jsxRuntime.jsx)(_logoUploader.default, _objectSpread({}, props.componentProps))
   };
   return componentMap[componentType === null || componentType === void 0 ? void 0 : componentType.toLowerCase()];
 }
@@ -132,6 +134,7 @@ function SchemaForm(_ref2) {
         key,
         description,
         required,
+        solo = false,
         hidden = false,
         componentProps = {}
       } = x;
@@ -162,7 +165,7 @@ function SchemaForm(_ref2) {
       };
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
         className: "form-item",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+        children: [!solo && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
           className: "form-item-label",
           style: {
             color: required && !currentValue ? '#ff0000' : '#333'
@@ -172,8 +175,11 @@ function SchemaForm(_ref2) {
           className: "form-item-body",
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
             className: "form-item-input",
+            sx: {
+              textAlign: solo ? 'center' : 'left'
+            },
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CurrentComponent, _objectSpread({}, renderComponentProps))
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+          }), !solo && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
             className: "form-item-action",
             children: editing ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {

package/lib/team/members/connections.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = UserConnections;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _InfoRow = _interopRequireDefault(require("@arcblock/ux/lib/InfoRow"));
+var _didAddress = _interopRequireDefault(require("../../did-address"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function UserConnections(_ref) {
+  let {
+    user
+  } = _ref;
+  const connectedAccounts = user.connectedAccounts || [];
+  return connectedAccounts.map(account => {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InfoRow.default, {
+      style: {
+        alignItems: 'flex-start'
+      },
+      valueComponent: "div",
+      nameWidth: 120,
+      name: account.provider,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_didAddress.default, {
+        did: account.did
+      })
+    }, account.did);
+  });
+}
+UserConnections.propTypes = {
+  user: _propTypes.default.object.isRequired
+};
+UserConnections.defaultProps = {};

package/lib/team/members/member.js

@@ -31,6 +31,7 @@ var _passportIssuances = _interopRequireDefault(require("./passport-issuances"))
 var _passports = _interopRequireDefault(require("./passports"));
 var _toggleUserApproval = _interopRequireDefault(require("./toggle-user-approval"));
 var _util2 = require("./util");
+var _connections = _interopRequireDefault(require("./connections"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject, _templateObject2, _templateObject3;
 const _excluded = ["name"];
@@ -63,40 +64,14 @@ function LinkUser(_ref) {
 LinkUser.propTypes = {
   name: _propTypes.default.string.isRequired
 };
-function TabOAuth(_ref2) {
-  let {
-    user
-  } = _ref2;
-  const connectedAccounts = user.connectedAccounts || [];
-  return connectedAccounts.map(account => {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InfoRow.default, {
-      style: {
-        alignItems: 'flex-start'
-      },
-      valueComponent: "div",
-      nameWidth: 120,
-      name: account.provider,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_didAddress.default, {
-        did: account.did
-      })
-    }, account.did);
-  });
-}
-TabOAuth.propTypes = {
-  user: _propTypes.default.object.isRequired,
-  onChangeUser: _propTypes.default.func
-};
-TabOAuth.defaultProps = {
-  onChangeUser: () => {}
-};
 const defaultTab = 'info';
-function Member(_ref3) {
+function Member(_ref2) {
   let {
     userDid,
     onCancel,
     initTab,
     createPassportSvg
-  } = _ref3;
+  } = _ref2;
   const {
     api,
     ws: {
@@ -251,7 +226,7 @@ function Member(_ref3) {
     oauth: {
       label: t('team.member.connectedAccounts'),
       value: 'oauth',
-      component: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(TabOAuth, {
+      component: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_connections.default, {
         user: pageState.user,
         onChangeUser: handleChangeUser
       })
@@ -288,11 +263,11 @@ function Member(_ref3) {
       })
     }
   };
-  const tabs = Object.values(tabConfigs).map(_ref4 => {
+  const tabs = Object.values(tabConfigs).map(_ref3 => {
     let {
       label,
       value
-    } = _ref4;
+    } = _ref3;
     return {
       label,
       value
@@ -331,10 +306,10 @@ function Member(_ref3) {
       role: inService ? _util.BlockletAdminRoles : [],
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_toggleUserApproval.default, {
         user: pageState.user,
-        children: _ref5 => {
+        children: _ref4 => {
           let {
             open
-          } = _ref5;
+          } = _ref4;
           return /*#__PURE__*/(0, _jsxRuntime.jsxs)(BlockButton, {
             onClick: open,
             children: [pageState.user.approved ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ForbidLoginIcon.default, {

package/lib/team/members/passport-item.js

@@ -0,0 +1,95 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = PassportItem;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _upperFirst = _interopRequireDefault(require("lodash/upperFirst"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _RevokeIcon = _interopRequireDefault(require("@arcblock/icons/lib/RevokeIcon"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject;
+const _excluded = ["passport", "user", "color", "width", "icon", "children", "createPassportSvg"];
+/* eslint-disable prettier/prettier */
+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 PassportItem(_ref) {
+  let {
+      passport,
+      user,
+      color,
+      width,
+      icon,
+      children,
+      createPassportSvg
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, _objectSpread(_objectSpread({
+    display: "flex",
+    alignItems: "center"
+  }, rest), {}, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML: {
+        __html: createPassportSvg({
+          title: passport.title || passport.name,
+          issuer: passport.issuer && passport.issuer.name,
+          issuerDid: passport.issuer && passport.issuer.id,
+          ownerName: user.fullName,
+          ownerDid: user.did,
+          ownerAvatarUrl: user.avatar,
+          revoked: passport.revoked,
+          preferredColor: color,
+          width
+        })
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "body",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+        className: "title",
+        display: "flex",
+        alignItems: "center",
+        children: [(0, _upperFirst.default)(passport.title), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "status-icons",
+          children: [icon, passport.revoked && /*#__PURE__*/(0, _jsxRuntime.jsx)(_RevokeIcon.default, {})]
+        })]
+      }), passport.expirationDate && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+        className: "title",
+        display: "flex",
+        alignItems: "center",
+        children: t('team.passport.validUntil', {
+          date: passport.expirationDate
+        })
+      }), children]
+    })]
+  }));
+}
+PassportItem.propTypes = {
+  passport: _propTypes.default.any.isRequired,
+  user: _propTypes.default.any.isRequired,
+  color: _propTypes.default.string.isRequired,
+  createPassportSvg: _propTypes.default.func.isRequired,
+  icon: _propTypes.default.any,
+  children: _propTypes.default.any,
+  width: _propTypes.default.number
+};
+PassportItem.defaultProps = {
+  icon: null,
+  children: null,
+  width: 150
+};
+const Root = (0, _styled.default)(_Box.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .body {\n    padding: 0;\n    margin-left: 24px;\n    margin-top: 0;\n  }\n  .title {\n    font-weight: 400;\n    font-size: 16px;\n    line-height: 19px;\n    color: #222222;\n  }\n  .tip {\n    display: flex;\n    align-items: center;\n    font-size: 14px;\n    margin-top: 6px;\n    color: #bbb;\n  }\n  .status-icons {\n    svg {\n      fill: #bfbfbf;\n      height: 1.2em;\n      margin-left: 0.4em;\n    }\n  }\n"])));