@abtnode/ux 1.8.0 → 1.8.1

package/lib/nav-logo.js

@@ -5,17 +5,23 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = LogoContainer;
 
-var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 const _excluded = ["logo", "name", "subname", "previousData"],
       _excluded2 = ["logo"];
 
 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) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 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; }
@@ -29,56 +35,72 @@ function LogoContainer(_ref) {
   } = _ref,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  let logoEle = /*#__PURE__*/_react.default.createElement(LogoImg, {
+  let logoEle = /*#__PURE__*/(0, _jsxRuntime.jsx)(LogoImg, {
     logo: logo
   });
-
   let nameEle = name;
   let subnameEle = subname;
 
   if (previousData.logo) {
-    logoEle = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(LogoImg, {
-      logo: logo,
-      className: "left-fade-in-ele"
-    }), /*#__PURE__*/_react.default.createElement(LogoImg, {
-      logo: previousData.logo,
-      className: "postion-abs left-fade-out-ele"
-    }));
+    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__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
-      className: "right-fade-in-ele",
-      style: {
-        display: 'inline-block'
-      }
-    }, name), /*#__PURE__*/_react.default.createElement("span", {
-      className: "postion-abs right-fade-out-ele"
-    }, previousData.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__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
-      className: "right-fade-in-ele",
-      style: {
-        display: 'inline-block'
-      }
-    }, subname), /*#__PURE__*/_react.default.createElement("span", {
-      className: "postion-abs right-fade-out-ele"
-    }, previousData.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__*/_react.default.createElement(Container, rest, /*#__PURE__*/_react.default.createElement("div", {
-    className: "logo-inner"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "logo-img-content"
-  }, logoEle), /*#__PURE__*/_react.default.createElement("div", {
-    className: "logo-info ".concat(!name && !subname ? 'zero-left' : '')
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "logo-name"
-  }, nameEle), /*#__PURE__*/_react.default.createElement("div", {
-    className: "logo-subname"
-  }, subnameEle))));
+  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 = {
@@ -103,7 +125,9 @@ function LogoImg(_ref2) {
   } = _ref2,
       rest = _objectWithoutProperties(_ref2, _excluded2);
 
-  return /*#__PURE__*/_react.default.createElement(LogoImgDiv, rest, logo);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(LogoImgDiv, _objectSpread(_objectSpread({}, rest), {}, {
+    children: logo
+  }));
 }
 
 const LogoImgDiv = _styledComponents.default.div.withConfig({

package/lib/schema-form/color-input.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = ColorInput;
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
 
@@ -17,11 +17,9 @@ var _context = require("@arcblock/ux/lib/Locale/context");
 
 var _commonPropTypes = _interopRequireDefault(require("./common-prop-types"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-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); }
+var _jsxRuntime = require("react/jsx-runtime");
 
-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; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function ColorInput(_ref) {
   let {
@@ -60,62 +58,65 @@ function ColorInput(_ref) {
     onChange(colorValue.current);
   };
 
-  const ReadView = /*#__PURE__*/_react.default.createElement(_Box.default, {
+  const ReadView = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
     className: "form-item-input slot",
-    px: 1
-  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
-    display: "flex",
-    alignItems: "center"
-  }, value, value !== 'auto' && /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      marginLeft: 4,
-      backgroundColor: value,
-      width: '1em',
-      height: '1em',
-      borderRadius: '0.2em'
-    }
-  })));
-
-  const EditView = /*#__PURE__*/_react.default.createElement(_Box.default, {
+    px: 1,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+      display: "flex",
+      alignItems: "center",
+      children: [value, value !== 'auto' && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          marginLeft: 4,
+          backgroundColor: value,
+          width: '1em',
+          height: '1em',
+          borderRadius: '0.2em'
+        }
+      })]
+    })
+  });
+  const EditView = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
     display: "flex",
     flexGrow: 1,
     alignItems: "center",
     height: "40px",
-    onKeyDown: handleEnterKeyDown
-  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
-    display: "flex",
-    alignItems: "center",
-    onClick: () => setOpen(true)
-  }, t('config.customColor'), /*#__PURE__*/_react.default.createElement("div", {
-    ref: colorElm,
-    style: {
-      flexShrink: 0,
-      marginLeft: '8px',
-      backgroundColor: value,
-      width: '32px',
-      height: '32px',
-      boxSizing: 'border-box',
-      borderRadius: '8px',
-      border: '1px solid #eee',
-      cursor: value === 'auto' ? 'default' : 'pointer'
-    }
-  })), /*#__PURE__*/_react.default.createElement(_Popover.default, {
-    open: open,
-    anchorEl: colorElm.current,
-    onClose: () => setOpen(false),
-    anchorOrigin: {
-      vertical: 'bottom',
-      horizontal: 'center'
-    },
-    transformOrigin: {
-      vertical: 'top',
-      horizontal: 'center'
-    }
-  }, /*#__PURE__*/_react.default.createElement(_reactColor.ChromePicker, {
-    color: value,
-    onChange: c => onColorChange(c.hex)
-  })));
-
+    onKeyDown: handleEnterKeyDown,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+      display: "flex",
+      alignItems: "center",
+      onClick: () => setOpen(true),
+      children: [t('config.customColor'), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        ref: colorElm,
+        style: {
+          flexShrink: 0,
+          marginLeft: '8px',
+          backgroundColor: value,
+          width: '32px',
+          height: '32px',
+          boxSizing: 'border-box',
+          borderRadius: '8px',
+          border: '1px solid #eee',
+          cursor: value === 'auto' ? 'default' : 'pointer'
+        }
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popover.default, {
+      open: open,
+      anchorEl: colorElm.current,
+      onClose: () => setOpen(false),
+      anchorOrigin: {
+        vertical: 'bottom',
+        horizontal: 'center'
+      },
+      transformOrigin: {
+        vertical: 'top',
+        horizontal: 'center'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactColor.ChromePicker, {
+        color: value,
+        onChange: c => onColorChange(c.hex)
+      })
+    })]
+  });
   return editing ? EditView : ReadView;
 }
 

package/lib/schema-form/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = SchemaForm;
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -31,14 +31,12 @@ var _passportInput = _interopRequireDefault(require("./passport-input"));
 
 var _required = _interopRequireDefault(require("./required"));
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var _templateObject;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-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; }
-
 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; }
@@ -143,77 +141,93 @@ function SchemaForm(_ref2) {
     return currentValue;
   }
 
-  return /*#__PURE__*/_react.default.createElement(FormWrapper, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(FormWrapper, {
     className: "form",
-    style: style
-  }, schema === null || schema === void 0 ? void 0 : schema.map(x => {
-    const {
-      key,
-      description,
-      required,
-      componentProps = {}
-    } = x;
-    const editing = !!(editingItem && key === editingItem.key);
-    const currentValue = getValue(x, {
-      editing
-    }); // get component by componentType
-
-    const CurrentComponent = getComponent(x, {
-      editing
-    });
-    const renderComponentProps = {
-      inputProps: {
-        'data-cy': 'schema-form-item-component'
-      },
-      key,
-      description,
-      editing,
-      value: currentValue,
-      onChange: changeValue => onFormItemChange(x, changeValue, 'change'),
-      componentProps
-    };
-    return /*#__PURE__*/_react.default.createElement(_Box.default, {
-      className: "form-item",
-      key: key
-    }, /*#__PURE__*/_react.default.createElement(_Box.default, {
-      className: "form-item-label",
-      style: {
-        color: required && !currentValue ? '#ff0000' : '#333'
+    style: style,
+    children: schema === null || schema === void 0 ? void 0 : schema.map(x => {
+      const {
+        key,
+        description,
+        required,
+        hidden = false,
+        componentProps = {}
+      } = x;
+
+      if (hidden) {
+        return null;
       }
-    }, description, required && /*#__PURE__*/_react.default.createElement(_required.default, null)), /*#__PURE__*/_react.default.createElement(_Box.default, {
-      className: "form-item-body"
-    }, /*#__PURE__*/_react.default.createElement(_Box.default, {
-      className: "form-item-input"
-    }, /*#__PURE__*/_react.default.createElement(CurrentComponent, renderComponentProps)), /*#__PURE__*/_react.default.createElement(_Box.default, {
-      className: "form-item-action"
-    }, editing ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
-      "data-cy": "schema-form-item-confirm",
-      onClick: () => {
-        onFormItemChange(x, currentValue, 'confirm');
-        onItemEditingStatusChange(null);
-      },
-      disabled: loading,
-      size: "large"
-    }, loading ? /*#__PURE__*/_react.default.createElement(_CircularProgress.default, {
-      size: 24
-    }) : /*#__PURE__*/_react.default.createElement(_Done.default, null)), /*#__PURE__*/_react.default.createElement(_IconButton.default, {
-      "data-cy": "schema-form-item-cancel",
-      onClick: () => {
-        onFormItemChange(x, editingItemInitialValue.current, 'cancel');
-        onItemEditingStatusChange(null);
-      },
-      disabled: loading,
-      size: "large"
-    }, /*#__PURE__*/_react.default.createElement(_Close.default, null))) : /*#__PURE__*/_react.default.createElement(_IconButton.default, {
-      "data-cy": "schema-form-item-edit",
-      onClick: () => {
-        onFormItemChange(x, formValues[key], 'edit');
-        onItemEditingStatusChange(x);
-      },
-      disabled: editingItem,
-      size: "large"
-    }, /*#__PURE__*/_react.default.createElement(_EditIcon.default, null)))));
-  }));
+
+      const editing = !!(editingItem && key === editingItem.key);
+      const currentValue = getValue(x, {
+        editing
+      }); // get component by componentType
+
+      const CurrentComponent = getComponent(x, {
+        editing
+      });
+      const renderComponentProps = {
+        inputProps: {
+          'data-cy': 'schema-form-item-component'
+        },
+        key,
+        description,
+        editing,
+        value: currentValue,
+        onChange: changeValue => onFormItemChange(x, changeValue, 'change'),
+        componentProps
+      };
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+        className: "form-item",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+          className: "form-item-label",
+          style: {
+            color: required && !currentValue ? '#ff0000' : '#333'
+          },
+          children: [description, required && /*#__PURE__*/(0, _jsxRuntime.jsx)(_required.default, {})]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+          className: "form-item-body",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+            className: "form-item-input",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CurrentComponent, _objectSpread({}, renderComponentProps))
+          }), /*#__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, {
+                "data-cy": "schema-form-item-confirm",
+                onClick: () => {
+                  onFormItemChange(x, currentValue, 'confirm');
+                  onItemEditingStatusChange(null);
+                },
+                disabled: loading,
+                size: "large",
+                children: loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
+                  size: 24
+                }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Done.default, {})
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+                "data-cy": "schema-form-item-cancel",
+                onClick: () => {
+                  onFormItemChange(x, editingItemInitialValue.current, 'cancel');
+                  onItemEditingStatusChange(null);
+                },
+                disabled: loading,
+                size: "large",
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Close.default, {})
+              })]
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+              "data-cy": "schema-form-item-edit",
+              onClick: () => {
+                onFormItemChange(x, formValues[key], 'edit');
+                onItemEditingStatusChange(x);
+              },
+              disabled: editingItem,
+              size: "large",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditIcon.default, {})
+            })
+          })]
+        })]
+      }, key);
+    })
+  });
 }
 
 SchemaForm.propTypes = {

package/lib/schema-form/passport-input.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = PassportInput;
 
-var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
@@ -21,6 +19,8 @@ var _colorInput = _interopRequireDefault(require("./color-input"));
 
 var _commonPropTypes = _interopRequireDefault(require("./common-prop-types"));
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 const _excluded = ["editing", "value", "onChange", "componentProps"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -48,29 +48,30 @@ function PassportInput(_ref) {
     blocklet
   } = componentProps;
   const color = value === 'auto' ? (0, _passportColor.getPassportColorFromDid)(blocklet.appDid) : value;
-  return /*#__PURE__*/_react.default.createElement(_Box.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
     display: "flex",
-    alignItems: "center"
-  }, /*#__PURE__*/_react.default.createElement("img", {
-    style: {
-      width: 96,
-      marginRight: 12
-    },
-    alt: "",
-    src: (0, _createPassportSvg.default)({
-      title: 'Owner',
-      issuer: (0, _util.getDisplayName)(blocklet),
-      issuerDid: blocklet.appDid,
-      ownerName: 'Your Name',
-      isDataUrl: true,
-      preferredColor: value || 'auto'
-    })
-  }), /*#__PURE__*/_react.default.createElement(_colorInput.default, Object.assign({}, rest, {
-    editing: editing,
-    value: editing ? color : value,
-    onChange: onChange,
-    componentProps: componentProps
-  })));
+    alignItems: "center",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+      style: {
+        width: 96,
+        marginRight: 12
+      },
+      alt: "",
+      src: (0, _createPassportSvg.default)({
+        title: 'Owner',
+        issuer: (0, _util.getDisplayName)(blocklet),
+        issuerDid: blocklet.appDid,
+        ownerName: 'Your Name',
+        isDataUrl: true,
+        preferredColor: value || 'auto'
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_colorInput.default, _objectSpread(_objectSpread({}, rest), {}, {
+      editing: editing,
+      value: editing ? color : value,
+      onChange: onChange,
+      componentProps: componentProps
+    }))]
+  });
 }
 
 PassportInput.propTypes = _objectSpread(_objectSpread({}, _commonPropTypes.default), {}, {

package/lib/schema-form/text-input.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = TextInput;
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
 
@@ -13,13 +13,17 @@ var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
 
 var _commonPropTypes = _interopRequireDefault(require("./common-prop-types"));
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 const _excluded = ["editing", "description", "value", "onChange", "componentProps"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-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 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 _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; }
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 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; }
 
@@ -52,7 +56,7 @@ function TextInput(_ref) {
   };
 
   if (editing) {
-    return /*#__PURE__*/_react.default.createElement(_TextField.default, Object.assign({
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, _objectSpread({
       style: {
         flex: 1
       },
@@ -70,10 +74,11 @@ function TextInput(_ref) {
     }, rest));
   }
 
-  return /*#__PURE__*/_react.default.createElement(_Box.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
     px: 1,
-    className: "form-item-input slot"
-  }, value);
+    className: "form-item-input slot",
+    children: value
+  });
 }
 
 TextInput.propTypes = _commonPropTypes.default;