@arcblock/ux 1.1.27 → 1.6.59

package/LICENSE

@@ -1,4 +1,4 @@
-Copyright 2018-2019 ArcBlock
+Copyright 2018-2022 ArcBlock
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.

package/README.md

@@ -16,59 +16,3 @@ import ClickToCopy from '@arcblock/ux/lib/ClickToCopy';
 import Icon from '@arcblock/ux/lib/Icon';
 import ActivityIndicator from '@arcblock/ux/lib/ActivityIndicator';
 ```
-
-## FAQ
-
-### How to use `GraphQLPlayground` comonent in SSR env such as gatsby?
-
-Because `graphiql` and `graphiql-code-exporter` uses browser globals such as `window`, we need to mock them both during building time for gatsby.
-
-First we need to create an mock for `graphqil`, `src/mocks/graphiql`:
-
-```javascript
-function graphiql() {
-  return null;
-}
-
-graphiql.Logo = () => null;
-graphiql.Toolbar = () => null;
-graphiql.QueryEditor = () => null;
-graphiql.VariableEditor = () => null;
-graphiql.ResultViewer = () => null;
-graphiql.Button = () => null;
-graphiql.ToolbarButton = () => null;
-graphiql.Group = () => null;
-graphiql.Menu = () => null;
-graphiql.MenuItem = () => null;
-graphiql.Select = () => null;
-graphiql.SelectOption = () => null;
-graphiql.Footer = () => null;
-
-module.exports = graphiql;
-```
-
-Then, in `gatsby-node.js`, use the mocks:
-
-```javascript
-const path = require('path');
-
-exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
-  if (stage === 'build-html') {
-    actions.setWebpackConfig({
-      resolve: {
-        alias: {
-          graphiql: path.resolve(__dirname, './src/mocks/graphiql.js'),
-        },
-      },
-      module: {
-        rules: [
-          {
-            test: /node_modules\/codemirror\//,
-            use: loaders.null(),
-          },
-        ],
-      },
-    });
-  }
-};
-```

package/lib/ActionButton/index.js

@@ -13,6 +13,8 @@ var _Button = _interopRequireDefault(require("../Button"));
 
 var _Util = require("../Util");
 
+const _excluded = ["href", "icon", "size", "color", "theme", "variant", "gradient", "children", "text"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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; }
@@ -33,7 +35,7 @@ const ActionButton = props => {
     children,
     text
   } = newProps,
-        rest = _objectWithoutProperties(newProps, ["href", "icon", "size", "color", "theme", "variant", "gradient", "children", "text"]);
+        rest = _objectWithoutProperties(newProps, _excluded);
 
   const styles = {};
 
@@ -48,7 +50,7 @@ const ActionButton = props => {
       styles[x] = newProps[x];
     }
   });
-  return _react.default.createElement(_Button.default, Object.assign({
+  return /*#__PURE__*/_react.default.createElement(_Button.default, Object.assign({
     color: theme,
     href: href,
     target: "_blank",
@@ -56,7 +58,7 @@ const ActionButton = props => {
     style: styles,
     size: size,
     className: "action-button"
-  }, rest), !!icon && _react.default.createElement("i", {
+  }, rest), !!icon && /*#__PURE__*/_react.default.createElement("i", {
     className: icon
   }), text || children);
 };

package/lib/ActivityIndicator/index.js

@@ -11,15 +11,22 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+var _green = _interopRequireDefault(require("@material-ui/core/colors/green"));
+
+var _blue = _interopRequireDefault(require("@material-ui/core/colors/blue"));
+
 var _Logo = _interopRequireDefault(require("../Logo"));
 
-var _Theme = require("../Theme");
+var _Colors = _interopRequireDefault(require("../Colors"));
+
+const _excluded = ["messages", "interval"],
+      _excluded2 = ["size", "orbitColor", "atomColor", "duration"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+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) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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 _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 _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; }
 
@@ -31,7 +38,7 @@ function ActivityIndicator(_ref) {
     messages,
     interval
   } = _ref,
-      rest = _objectWithoutProperties(_ref, ["messages", "interval"]);
+      rest = _objectWithoutProperties(_ref, _excluded);
 
   const [index, setIndex] = (0, _react.useState)(0);
   (0, _react.useEffect)(() => {
@@ -42,30 +49,32 @@ function ActivityIndicator(_ref) {
       clearTimeout(timer);
     };
   });
-  return _react.default.createElement(Div, rest, _react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement(Div, rest, /*#__PURE__*/_react.default.createElement("div", {
     className: "pm-loader-container"
-  }, _react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: "pm-loader-text"
-  }, _react.default.createElement("p", null, messages[index])), _react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("p", null, messages[index])), /*#__PURE__*/_react.default.createElement("div", {
     className: "pm-loader-atoms"
-  }, _react.default.createElement(_Logo.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Logo.default, {
     style: {
       transform: 'scale(0.6)'
     },
     showText: false
-  }), _react.default.createElement("div", {
-    className: "pm-loader-orbit-1"
-  }, _react.default.createElement("div", {
-    className: "pm-loader-atom-1"
-  })), _react.default.createElement("div", {
-    className: "pm-loader-orbit-2"
-  }, _react.default.createElement("div", {
-    className: "pm-loader-atom-2"
-  })), _react.default.createElement("div", {
-    className: "pm-loader-orbit-3"
-  }, _react.default.createElement("div", {
-    className: "pm-loader-atom-3"
-  })))));
+  }), /*#__PURE__*/_react.default.createElement(Orbit, {
+    size: 56,
+    orbitColor: _green.default[500],
+    atomColor: _green.default[500],
+    duration: 1
+  }), /*#__PURE__*/_react.default.createElement(Orbit, {
+    size: 80,
+    orbitColor: _blue.default[800],
+    atomColor: _blue.default[800],
+    duration: 1.5
+  }), /*#__PURE__*/_react.default.createElement(Orbit, {
+    size: 100,
+    orbitColor: _Colors.default.grey[900],
+    atomColor: _Colors.default.grey[900]
+  }))));
 }
 
 ActivityIndicator.propTypes = {
@@ -79,5 +88,48 @@ ActivityIndicator.defaultProps = {
 
 const Div = _styledComponents.default.div.withConfig({
   displayName: "ActivityIndicator__Div",
-  componentId: "rsk6jb-0"
-})(["&&{padding:20px;width:100%;height:100%;min-height:360px;z-index:100;transition:opacity 0.5s linear;display:flex;align-items:center;flex-direction:column;justify-content:center;}@keyframes orbit{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}.pm-loader-text{color:", ";font-size:14px;text-align:center;position:relative;height:70px;-webkit-user-select:none;}.pm-loader-container{width:100%;height:100%;display:flex;align-items:center;flex-direction:column;justify-content:center;flex:1;}.pm-loader-atoms{width:100px;height:100px;display:flex;position:relative;align-items:center;justify-content:center;}.pm-loader-center-atom{top:32px;left:32px;width:32px;height:32px;position:absolute;border-radius:50%;}.pm-loader-orbit-1{top:20px;left:20px;width:56px;height:56px;position:absolute;border-radius:50%;border:1px solid ", ";}.pm-loader-orbit-2{top:8px;left:8px;width:80px;height:80px;border-radius:50%;position:absolute;border:1px solid ", ";}.pm-loader-orbit-3{top:-4px;left:-4px;width:104px;height:104px;position:absolute;border-radius:50%;border:1px solid ", ";}.pm-loader-atom-1{width:7px;height:7px;margin-top:4px;margin-left:4px;border-radius:50%;background-color:", ";transform-origin:24px 24px;animation:orbit 1s infinite;animation-timing-function:linear;-webkit-transform-origin:24px 24px;}.pm-loader-atom-2{width:7px;height:7px;margin-top:8px;margin-left:8px;border-radius:50%;background-color:", ";transform-origin:32px 32px;animation:orbit 2s infinite;animation-timing-function:linear;-webkit-transform-origin:32px 32px;}.pm-loader-atom-3{width:7px;height:7px;margin-top:11px;margin-left:11px;border-radius:50%;background-color:", ";transform-origin:41px 41px;animation:orbit 3s infinite;animation-timing-function:linear;-webkit-transform-origin:41px 41px;}"], _Theme.colors.primary, _Theme.colors.green, _Theme.colors.blue, _Theme.colors.primary, _Theme.colors.green, _Theme.colors.blue, _Theme.colors.primary);
+  componentId: "sc-rsk6jb-0"
+})(["&&{box-sizing:border-box;padding:20px;width:100%;height:100%;min-height:360px;z-index:100;transition:opacity 0.5s linear;display:flex;align-items:center;flex-direction:column;justify-content:center;}.pm-loader-text{color:", ";font-size:14px;text-align:center;position:relative;height:70px;-webkit-user-select:none;}.pm-loader-container{width:100%;height:100%;display:flex;align-items:center;flex-direction:column;justify-content:center;flex:1;}.pm-loader-atoms{width:100px;height:100px;display:flex;position:relative;align-items:center;justify-content:center;}"], _Colors.default.grey[900]);
+
+const Orbit = _ref2 => {
+  let {
+    size,
+    orbitColor,
+    atomColor,
+    duration
+  } = _ref2,
+      rest = _objectWithoutProperties(_ref2, _excluded2);
+
+  return /*#__PURE__*/_react.default.createElement(OrbitRoot, Object.assign({
+    $duration: duration,
+    style: {
+      width: size,
+      height: size,
+      border: "1px solid ".concat(orbitColor)
+    }
+  }, rest), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      background: atomColor
+    }
+  }));
+};
+
+Orbit.propTypes = {
+  size: _propTypes.default.number.isRequired,
+  orbitColor: _propTypes.default.string.isRequired,
+  atomColor: _propTypes.default.string.isRequired,
+  duration: _propTypes.default.number
+};
+Orbit.defaultProps = {
+  duration: 2
+};
+
+const OrbitRoot = _styledComponents.default.div.withConfig({
+  displayName: "ActivityIndicator__OrbitRoot",
+  componentId: "sc-rsk6jb-1"
+})(["@keyframes orbit{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}position:absolute;border-radius:50%;animation:orbit ", "s infinite;animation-timing-function:linear;transform-origin:center;> div{position:absolute;top:50%;width:6px;height:6px;transform:translateX(-50%);border-radius:50%;}"], _ref3 => {
+  let {
+    $duration
+  } = _ref3;
+  return $duration;
+});

package/lib/Alert/index.js

@@ -13,12 +13,16 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
 
-var _Icon = _interopRequireDefault(require("../Icon"));
+var _blueGrey = _interopRequireDefault(require("@material-ui/core/colors/blueGrey"));
 
-var _Theme = require("../Theme");
+var _Icon = _interopRequireDefault(require("../Icon"));
 
 var _Util = require("../Util");
 
+var _Colors = _interopRequireDefault(require("../Colors"));
+
+const _excluded = ["type", "children", "style", "className", "variant"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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; }
@@ -28,25 +32,25 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 const types = {
   error: {
     icon: 'exclamation-circle',
-    color: _Theme.colors.red,
+    color: _Colors.default.error.main,
     borderColor: '#e35b54',
     backgroundColor: 'rgba(227, 91, 84, 0.2)'
   },
   warning: {
     icon: 'exclamation-triangle',
-    color: _Theme.colors.yellow,
+    color: _Colors.default.warning.main,
     borderColor: '#f7d040',
     backgroundColor: 'rgba(247, 208, 64, 0.2)'
   },
   success: {
     icon: 'check-circle',
-    color: _Theme.colors.green,
+    color: _Colors.default.success.main,
     borderColor: '#89ddd9',
     backgroundColor: 'rgba(137, 221, 217, 0.2)'
   },
   tip: {
     icon: 'info-circle',
-    color: _Theme.colors.minor,
+    color: _Colors.default.grey[500],
     borderColor: '#222222',
     backgroundColor: '#EEEEEE'
   }
@@ -62,7 +66,7 @@ const Alert = props => {
     className,
     variant
   } = newProps,
-        rest = _objectWithoutProperties(newProps, ["type", "children", "style", "className", "variant"]);
+        rest = _objectWithoutProperties(newProps, _excluded);
 
   const {
     icon,
@@ -71,21 +75,21 @@ const Alert = props => {
     borderColor
   } = types[type] || types.success;
   const styles = Object.assign({
-    color: _Theme.colors.dark,
+    color: _blueGrey.default[500],
     backgroundColor: variant === 'border' ? backgroundColor : 'transparent',
     borderLeft: variant === 'border' ? "5px solid ".concat(borderColor) : 'none'
   }, style);
-  return _react.default.createElement(Container, Object.assign({}, rest, {
+  return /*#__PURE__*/_react.default.createElement(Container, Object.assign({}, rest, {
     className: "alert alert--".concat(type, " alert--").concat(variant, " ").concat(className).trim(),
     style: styles
-  }), variant === 'icon' && _react.default.createElement(_Icon.default, {
+  }), variant === 'icon' && /*#__PURE__*/_react.default.createElement(_Icon.default, {
     className: "alert-icon",
     name: icon,
     size: 24,
     style: {
       color
     }
-  }), _react.default.createElement(_Typography.default, {
+  }), /*#__PURE__*/_react.default.createElement(_Typography.default, {
     component: "div",
     className: "alert-content"
   }, children));

package/lib/Async/index.js

@@ -43,7 +43,7 @@ function LoadAsyncComponent(importComponent) {
       } // eslint-disable-next-line no-nested-ternary
 
 
-      return Component ? _react.default.createElement(Component, this.props) : showProgress ? _react.default.createElement(_CircularProgress.default, {
+      return Component ? /*#__PURE__*/_react.default.createElement(Component, this.props) : showProgress ? /*#__PURE__*/_react.default.createElement(_CircularProgress.default, {
         color: "primary"
       }) : null;
     }

package/lib/Badge/index.js

@@ -13,10 +13,12 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
 
-var _Theme = require("../Theme");
+var _Colors = _interopRequireDefault(require("../Colors"));
 
 var _Util = require("../Util");
 
+const _excluded = ["type", "content", "children", "style", "className", "forwardedRef"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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; }
@@ -25,24 +27,24 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 const types = {
   error: {
-    color: _Theme.colors.white,
-    backgroundColor: _Theme.colors.red
+    color: _Colors.default.common.white,
+    backgroundColor: _Colors.default.error.main
   },
   warning: {
-    color: _Theme.colors.white,
-    backgroundColor: _Theme.colors.yellow
+    color: _Colors.default.common.white,
+    backgroundColor: _Colors.default.warning.main
   },
   success: {
-    color: _Theme.colors.white,
-    backgroundColor: _Theme.colors.green
+    color: _Colors.default.common.white,
+    backgroundColor: _Colors.default.success.main
   },
   primary: {
-    color: _Theme.colors.white,
-    backgroundColor: _Theme.colors.blue
+    color: _Colors.default.common.white,
+    backgroundColor: _Colors.default.primary.main
   },
   reverse: {
-    color: _Theme.colors.white,
-    backgroundColor: _Theme.colors.primary
+    color: _Colors.default.common.white,
+    backgroundColor: _Colors.default.grey[900]
   }
 };
 
@@ -57,10 +59,10 @@ function Badge(props) {
     className,
     forwardedRef
   } = newProps,
-        rest = _objectWithoutProperties(newProps, ["type", "content", "children", "style", "className", "forwardedRef"]);
+        rest = _objectWithoutProperties(newProps, _excluded);
 
   const styles = Object.assign(types[type] || types.primary, style);
-  return _react.default.createElement(Span, Object.assign({
+  return /*#__PURE__*/_react.default.createElement(Span, Object.assign({
     ref: forwardedRef,
     component: "span",
     className: className,
@@ -82,7 +84,7 @@ Badge.defaultProps = {
   style: '{}'
 };
 
-var _default = _react.default.forwardRef((props, ref) => _react.default.createElement(Badge, Object.assign({}, props, {
+var _default = /*#__PURE__*/_react.default.forwardRef((props, ref) => /*#__PURE__*/_react.default.createElement(Badge, Object.assign({}, props, {
   forwardedRef: ref
 })));
 

package/lib/Blocklet/index.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.ActionButton = void 0;
 exports.default = Blocklet;
 
 var _react = _interopRequireWildcard(require("react"));
@@ -21,17 +22,21 @@ var _useMediaQuery = _interopRequireDefault(require("@material-ui/core/useMediaQ
 
 var _useTheme = _interopRequireDefault(require("@material-ui/core/styles/useTheme"));
 
+var _Avatar = _interopRequireDefault(require("@arcblock/did-connect/lib/Avatar"));
+
 var _Icon = _interopRequireDefault(require("../Icon"));
 
 var _Button = _interopRequireDefault(require("../Button"));
 
 var _Img = _interopRequireDefault(require("../Img"));
 
+const _excluded = ["title", "did", "description", "cover", "type", "size", "addons", "button", "buttonText", "buttonDisabled", "buttonLoading", "isStickyButton", "onButtonClick", "onMainClick", "onTagClick", "className", "scaleClickZone"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+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) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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 _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 _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; }
 
@@ -40,13 +45,20 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 const Div = _styledComponents.default.div.withConfig({
   displayName: "Blocklet__Div",
   componentId: "sc-3dga5l-0"
-})(["&.arcblock-blocklet{border:1px solid #f2f2f2;padding:0 16px;border-radius:12px;background:#fff;overflow:hidden;&:hover{filter:drop-shadow(0px 4px 12px rgba(92,92,92,0.04));}}.arcblock-blocklet__content{padding:16px 0;}.arcblock-blocklet__content--main{display:flex;align-items:flex-start;cursor:pointer;}.arcblock-blocklet__addons{padding:16px 0;border-top:1px solid #f2f2f2;}.arcblock-blocklet__cover{width:100px;height:100px;margin-right:16px;overflow:hidden;border-radius:12px;}.arcblock-blocklet__info{flex:1;overflow:hidden;.arcblock-blocklet__button{margin-top:16px;display:inline-block;}}.arcblock-blocklet__button{& > *{position:relative;&::before{content:'';position:absolute;display:block;left:50%;top:50%;height:", "%;width:", "%;transform:translate(-50%,-50%);}}& > *:not(.Mui-disabled){background-color:rgba(79,106,246,0.06);color:", ";}}.arcblock-blocklet__title{margin:0;font-size:18px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.arcblock-blocklet__describe{margin:0;color:#999;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;height:2.86em;}.arcblock-blocklet__addons{display:flex;justify-content:space-between;color:#999;font-size:14px;position:relative;}.arcblock-blocklet__addons--item{white-space:nowrap;}&.arcblock-blocklet--size-md{&:hover{position:relative;}.arcblock-blocklet__title{margin-bottom:3px;}.arcblock-blocklet__describe{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}.arcblock-blocklet__button{margin-top:5px;}}&.arcblock-blocklet--size-sm,&.arcblock-blocklet--size-xs{.arcblock-blocklet__content{padding:12px 0;}.arcblock-blocklet__content--main{align-items:center;}.arcblock-blocklet__cover{width:48px;height:48px;}.arcblock-blocklet__addons{padding:8px 0;.arcblock-blocklet__addons--item{font-size:12px;}}}&.arcblock-blocklet--size-xs{.arcblock-blocklet__addons{display:none !important;}}"], props => props.scaleClickZone * 100, props => props.scaleClickZone * 100, props => props.theme.palette.primary.main);
+})(["&.arcblock-blocklet{padding:0 16px;background:", ";overflow:hidden;box-shadow:0px 0px 8px #f0f0f0;&:hover{box-shadow:0px 2px 12px #f0f0f0;}}.arcblock-blocklet__content{padding:16px 0 0 0;}.arcblock-blocklet__content--main{display:flex;align-items:center;cursor:pointer;}.arcblock-blocklet__content--body{overflow:hidden;flex:1;display:flex;align-items:flex-start;}.arcblock-blocklet__addons{padding:16px 0;}.arcblock-blocklet__cover{width:80px;height:80px;margin-right:12px;overflow:hidden;border-radius:12px;transform:translateZ(0);}.arcblock-blocklet__info{flex:1;overflow:hidden;.arcblock-blocklet__button{margin-top:16px;display:inline-block;}}.arcblock-blocklet__button--hover{&:not(.Mui-disabled){position:relative;z-index:1;&::before{content:'';position:absolute;height:100%;width:100%;left:0;top:0;transition:opacity 0.3s;}&:hover::before{opacity:0;}&::after{content:'';position:absolute;height:100%;width:100%;background-color:", ";transform:scale(0.1);opacity:0;z-index:-1;transition:transform 0.3s,opacity 0.3s,background-color 0.3s;}&:hover::after{opacity:1;transform-origin:center;transform:scale(1);}}&:not(.Mui-disabled){background-color:transparent !important;color:", ";}&:not(.Mui-disabled){&:hover{color:", ";}}}.arcblock-blocklet__title{margin:0;font-size:18px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.arcblock-blocklet__describe{margin:0 0 2px 0;color:#999;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.arcblock-blocklet__addons{display:flex;justify-content:space-between;color:#999;font-size:14px;position:relative;}.arcblock-blocklet__addons--item{white-space:nowrap;}&.arcblock-blocklet--size-md{&:hover{position:relative;}.arcblock-blocklet__title{height:2.3em;margin-bottom:3px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-overflow:initial;white-space:initial;word-break:break-all;}.arcblock-blocklet__describe{white-space:normal;height:2.86em;}.arcblock-blocklet__button{margin-top:5px;}}&.arcblock-blocklet--size-sm,&.arcblock-blocklet--size-xs{.arcblock-blocklet__cover{width:40px;height:40px;border-radius:6px;}.arcblock-blocklet__content{padding:16px 0;}.arcblock-blocklet__addons{padding:8px 0;.arcblock-blocklet__addons--item{font-size:12px;}}}&.arcblock-blocklet--size-xs{.arcblock-blocklet__addons{display:none !important;}}"], props => props.theme.palette.common.white, props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.theme.palette.common.white);
+
+const ActionButton = _styledComponents.default.div.withConfig({
+  displayName: "Blocklet__ActionButton",
+  componentId: "sc-3dga5l-1"
+})(["background-color:transparent !important;& >:not(.Mui-disabled){position:relative;z-index:1;&::before{content:'';position:absolute;height:100%;width:100%;left:0;top:0;transition:opacity 0.3s;}&:hover::before{opacity:0;}&::after{content:'';position:absolute;height:100%;width:100%;background-color:", ";transform:scale(0.1);opacity:0;z-index:-1;transition:transform 0.3s,opacity 0.3s,background-color 0.3s;}&:hover::after{opacity:1;transform-origin:center;transform:scale(1);}}& >:not(.Mui-disabled){background-color:transparent !important;color:", "!important;}& >:not(.Mui-disabled){&:hover{color:", "!important;}}"], props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.theme.palette.common.white);
+
+exports.ActionButton = ActionButton;
 
 function BlockletIcon(_ref) {
   let {
     name
   } = _ref;
-  return _react.default.createElement(_Icon.default, {
+  return /*#__PURE__*/_react.default.createElement(_Icon.default, {
     name: name,
     color: "inherit",
     size: 15,
@@ -76,6 +88,7 @@ function prettySize(_size) {
 function Blocklet(_ref2) {
   let {
     title,
+    did,
     description,
     cover,
     type,
@@ -92,7 +105,7 @@ function Blocklet(_ref2) {
     className,
     scaleClickZone
   } = _ref2,
-      rest = _objectWithoutProperties(_ref2, ["title", "description", "cover", "type", "size", "addons", "button", "buttonText", "buttonDisabled", "buttonLoading", "isStickyButton", "onButtonClick", "onMainClick", "onTagClick", "className", "scaleClickZone"]);
+      rest = _objectWithoutProperties(_ref2, _excluded);
 
   const wrapHandler = function wrapHandler(handler) {
     let stopFn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : () => false;
@@ -126,48 +139,58 @@ function Blocklet(_ref2) {
 
   const theme = (0, _useTheme.default)();
   const isDownSm = (0, _useMediaQuery.default)(theme.breakpoints.down('sm'));
-  const isDownMd = (0, _useMediaQuery.default)(theme.breakpoints.down('md')); // If size is auto, need calculate actual size according to screen size
+  const isDownMd = (0, _useMediaQuery.default)(theme.breakpoints.down('md'));
+  const isUPLg = (0, _useMediaQuery.default)(theme.breakpoints.up('lg')); // If size is auto, need calculate actual size according to screen size
   // eslint-disable-next-line no-nested-ternary
 
-  const actualSize = size === 'auto' ? isDownSm ? 'xs' : isDownMd ? 'sm' : 'md' : size;
+  const actualSize = size === 'auto' ? isDownSm ? 'xs' : isDownMd ? 'sm' : 'md' : size; // eslint-disable-next-line no-nested-ternary
+
+  const didAvatarSize = size === 'auto' ? isUPLg ? 80 : 40 : size === 'md' ? 80 : 40;
   const container = (0, _react.useRef)(null);
-  return _react.default.createElement(Div, Object.assign({}, rest, {
+  return /*#__PURE__*/_react.default.createElement(Div, Object.assign({}, rest, {
     scaleClickZone: scaleClickZone,
     className: "".concat(className, " arcblock-blocklet arcblock-blocklet--size-").concat(actualSize)
-  }), _react.default.createElement("div", {
+  }), /*#__PURE__*/_react.default.createElement("div", {
     className: "arcblock-blocklet__content"
-  }, _react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: "arcblock-blocklet__content--main",
     onClick: _onMainClick,
     ref: container
-  }, cover && _react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "arcblock-blocklet__content--body"
+  }, cover ? /*#__PURE__*/_react.default.createElement("div", {
     className: "arcblock-blocklet__cover"
-  }, _react.default.createElement(_Img.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Img.default, {
     src: cover
-  })), _react.default.createElement("div", {
+  })) : did && /*#__PURE__*/_react.default.createElement("div", {
+    className: "arcblock-blocklet__cover"
+  }, /*#__PURE__*/_react.default.createElement(_Avatar.default, {
+    did: did,
+    size: didAvatarSize
+  })), /*#__PURE__*/_react.default.createElement("div", {
     className: "arcblock-blocklet__info"
-  }, _react.default.createElement(_Typography.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
     component: "h3",
     variant: "h3",
     className: "arcblock-blocklet__title",
     title: title
-  }, title), description && _react.default.createElement(_Typography.default, {
+  }, title), description && /*#__PURE__*/_react.default.createElement(_Typography.default, {
     component: "div",
     variant: "body2",
     className: "arcblock-blocklet__describe",
     title: description
-  }, description), ['md', 'sm', 'xs'].includes(actualSize) && _react.default.createElement(_Portal.default, {
+  }, description), ['md', 'sm', 'xs'].includes(actualSize) && /*#__PURE__*/_react.default.createElement(_Portal.default, {
     container: container.current,
     disablePortal: actualSize === 'md'
-  }, _react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: "arcblock-blocklet__button",
     onClick: _onButtonClick,
     style: {
       display: isStickyButton ? 'block' : ''
     }
-  }, button || onButtonClick && _react.default.createElement(_Button.default, {
-    rounded: true,
-    variant: "contained",
+  }, button || onButtonClick && /*#__PURE__*/_react.default.createElement(_Button.default, {
+    className: "arcblock-blocklet__button--hover",
+    variant: "outlined",
     color: "primary",
     size: "small",
     disabled: buttonDisabled || buttonLoading,
@@ -179,27 +202,29 @@ function Blocklet(_ref2) {
       minWidth: '54px',
       fontSize: '13px'
     }
-  }, buttonLoading && _react.default.createElement(_CircularProgress.default, {
+  }, buttonLoading && /*#__PURE__*/_react.default.createElement(_CircularProgress.default, {
     size: actualSize === 'md' ? 15 : 13,
     style: {
       marginRight: 3,
       color: 'inherit'
     }
-  }), buttonText)))))), _react.default.createElement("div", {
+  }), buttonText))))))), /*#__PURE__*/_react.default.createElement("div", {
     className: "arcblock-blocklet__addons"
-  }, addons.map((item, index) => _react.default.createElement(_Typography.default, {
+  }, addons.map((item, index) => /*#__PURE__*/_react.default.createElement(_Typography.default, {
     component: "span",
     variant: "caption",
     className: "arcblock-blocklet__addons--item" // eslint-disable-next-line react/no-array-index-key
     ,
-    key: index
-  }, item.empty ? null : _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(BlockletIcon, {
+    key: index,
+    title: item.title
+  }, item.empty ? null : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(BlockletIcon, {
     name: item.icon
   }), item.pretty ? prettySize(item.value) : item.value)))));
 }
 
 Blocklet.propTypes = {
   title: _propTypes.default.string.isRequired,
+  did: _propTypes.default.string,
   isStickyButton: _propTypes.default.bool,
   description: _propTypes.default.string,
   cover: _propTypes.default.string,
@@ -219,6 +244,7 @@ Blocklet.propTypes = {
 Blocklet.defaultProps = {
   description: null,
   cover: null,
+  did: null,
   isStickyButton: false,
   buttonText: 'Install',
   buttonDisabled: false,