@abtnode/ux 1.7.26 → 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

@@ -0,0 +1,123 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ColorInput;
+
+var _react = require("react");
+
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+
+var _Popover = _interopRequireDefault(require("@mui/material/Popover"));
+
+var _reactColor = require("react-color");
+
+var _context = require("@arcblock/ux/lib/Locale/context");
+
+var _commonPropTypes = _interopRequireDefault(require("./common-prop-types"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ColorInput(_ref) {
+  let {
+    editing,
+    value,
+    onChange
+  } = _ref;
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const [open, setOpen] = (0, _react.useState)(false);
+  const colorElm = (0, _react.useRef)();
+  const colorValue = (0, _react.useRef)(value); // auto open color picker when editing, should wait the useRef to be ready
+
+  (0, _react.useEffect)(() => {
+    let timer = null;
+
+    if (editing) {
+      timer = setTimeout(() => {
+        setOpen(true);
+      }, 50);
+    }
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [editing]);
+
+  const onColorChange = color => {
+    colorValue.current = color;
+    onChange(color);
+  };
+
+  const handleEnterKeyDown = () => {
+    setOpen(false);
+    onChange(colorValue.current);
+  };
+
+  const ReadView = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+    className: "form-item-input slot",
+    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,
+    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;
+}
+
+ColorInput.propTypes = _commonPropTypes.default;

package/lib/schema-form/common-prop-types.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  description: _propTypes.default.string,
+  editing: _propTypes.default.bool,
+  onChange: _propTypes.default.func,
+  required: _propTypes.default.bool,
+  // eslint-disable-next-line react/no-unused-prop-types
+  value: _propTypes.default.any,
+  // eslint-disable-next-line react/no-unused-prop-types
+  componentProps: _propTypes.default.object,
+  render: _propTypes.default.func,
+  renderFormItem: _propTypes.default.func
+};
+exports.default = _default;

package/lib/schema-form/index.js

@@ -0,0 +1,247 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = SchemaForm;
+
+var _react = require("react");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+
+var _EditIcon = _interopRequireDefault(require("@arcblock/icons/lib/EditIcon"));
+
+var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
+
+var _Done = _interopRequireDefault(require("@mui/icons-material/Done"));
+
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+
+var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
+
+var _colorInput = _interopRequireDefault(require("./color-input"));
+
+var _textInput = _interopRequireDefault(require("./text-input"));
+
+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 _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) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function getComponent(item, _ref) {
+  let {
+    editing = false
+  } = _ref;
+  const {
+    componentType = 'input',
+    render,
+    renderFormItem
+  } = item; // if provided renderItem and editing is true, use it
+
+  if (editing && renderFormItem) {
+    return renderFormItem;
+  } // if provided render and editing is false, use it
+
+
+  if (!editing && render) {
+    return render;
+  }
+
+  const componentMap = {
+    input: _textInput.default,
+    color: _colorInput.default,
+    passport: _passportInput.default
+  };
+  return componentMap[componentType === null || componentType === void 0 ? void 0 : componentType.toLowerCase()];
+}
+
+function SchemaForm(_ref2) {
+  let {
+    schema,
+    loading,
+    value,
+    defaultValue,
+    onChange,
+    style
+  } = _ref2;
+  const isControlled = Object.prototype.toString.call(value) === '[object Object]';
+  const [editingItem, setEditingItem] = (0, _react.useState)(null);
+  const [formValues, setFormValues] = (0, _react.useState)(isControlled ? value : defaultValue);
+  const editingItemInitialValue = (0, _react.useRef)();
+
+  function onFormItemChange(item, changeValue, action) {
+    const {
+      key
+    } = item;
+    const oldValue = formValues[key];
+    const isChanged = oldValue !== changeValue;
+
+    const newValues = _objectSpread(_objectSpread({}, formValues), {}, {
+      [key]: changeValue
+    });
+
+    if (isChanged) {
+      setFormValues(newValues);
+    }
+
+    onChange({
+      [key]: changeValue
+    }, {
+      allValues: newValues,
+      action,
+      currentItem: item
+    });
+  }
+
+  function onItemEditingStatusChange(item) {
+    if (item) {
+      editingItemInitialValue.current = formValues[item.key];
+      setEditingItem(item);
+      return;
+    }
+
+    editingItemInitialValue.current = null;
+    setEditingItem(null);
+  }
+
+  function getValue(item, _ref3) {
+    let {
+      editing = false
+    } = _ref3;
+    const {
+      key
+    } = item;
+    const currentValue = isControlled ? value[key] : formValues[key];
+
+    if (currentValue === '__encrypted__') {
+      if (!editing) {
+        return '******';
+      }
+
+      return '';
+    }
+
+    return currentValue;
+  }
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(FormWrapper, {
+    className: "form",
+    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;
+      }
+
+      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 = {
+  schema: _propTypes.default.array.isRequired,
+  loading: _propTypes.default.bool,
+  onChange: _propTypes.default.func.isRequired,
+  value: _propTypes.default.object,
+  defaultValue: _propTypes.default.object,
+  style: _propTypes.default.object
+};
+SchemaForm.defaultProps = {
+  loading: false,
+  value: undefined,
+  defaultValue: {},
+  style: {}
+};
+const FormWrapper = (0, _styled.default)(_Box.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 80%;\n  flex-grow: 1;\n  overflow-y: auto;\n  ", " {\n    width: 100%;\n    flex-shrink: 0;\n    padding: 0 24px;\n    transform: translate(0, 0);\n    max-height: 60vh;\n  }\n\n  .form-item {\n    width: 100%;\n    margin-bottom: 24px;\n    position: relative;\n    ", " {\n      flex-wrap: wrap;\n      justify-content: space-between;\n      width: 100%;\n      flex-shrink: 0;\n    }\n  }\n\n  .form-item-body {\n    display: flex;\n    align-items: center;\n    width: 100%;\n    margin-top: 4px;\n  }\n\n  .form-item-label {\n    line-height: 1.2;\n    font-size: 14px;\n    color: #888;\n\n    ", " {\n      text-align: left;\n      width: auto;\n      flex-grow: 1;\n    }\n  }\n\n  .form-item-input {\n    flex-grow: 1;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n\n    &.slot {\n      height: 40px;\n      line-height: 40px;\n      background: #f8f8f8;\n      font-size: 16px;\n    }\n  }\n\n  .form-item-action {\n    width: 100px;\n    text-align: left;\n    margin-left: 12px;\n    flex-shrink: 0;\n    ", " {\n      width: auto;\n      margin-left: 0px;\n    }\n    .MuiIconButton-root {\n      padding: 8px;\n      svg {\n        fill: #888;\n      }\n      &.Mui-disabled {\n        opacity: 0.4;\n      }\n    }\n  }\n"])), props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.down('md'));

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

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = PassportInput;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+
+var _createPassportSvg = _interopRequireDefault(require("@abtnode/auth/lib/util/create-passport-svg"));
+
+var _passportColor = require("@abtnode/auth/lib/util/passport-color");
+
+var _util = require("@blocklet/meta/lib/util");
+
+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 }; }
+
+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; }
+
+function PassportInput(_ref) {
+  let {
+    editing,
+    value,
+    onChange,
+    componentProps
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  const {
+    blocklet
+  } = componentProps;
+  const color = value === 'auto' ? (0, _passportColor.getPassportColorFromDid)(blocklet.appDid) : value;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+    display: "flex",
+    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), {}, {
+  componentProps: _propTypes.default.shape({
+    blocklet: _propTypes.default.object.isRequired
+  }).isRequired
+});
+PassportInput.defaultProps = {};

package/lib/schema-form/required.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+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) } })); }
+
+const Required = _styled.default.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  &::before {\n    content: '*';\n  }\n"])), props => props.theme.palette.error.main);
+
+var _default = Required;
+exports.default = _default;