@abtnode/ux 1.8.35 → 1.8.37

package/lib/blocklet/component/configuration.js

@@ -30,7 +30,7 @@ function ComponentConfiguration(_ref) {
   const [showDialog, setShowDialog] = (0, _react.useState)('');
   const {
     t
-  } = (0, _react.useContext)(_context.LocaleContext);
+  } = (0, _context.useLocaleContext)();
   const isRoot = !ancestors.map(x => x.meta.did)[0];
   const isDynamic = blocklet.dynamic;
   const [tab, setTab] = (0, _react.useState)('settings');

package/lib/blocklet/component/environment.js

@@ -232,7 +232,7 @@ function ComponentEnvironment(_ref) {
       severity: "info",
       children: t('blocklet.config.environment.tip')
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_permission.default, {
-      permission: inService ? '' : 'mutate_blockets',
+      permission: inService ? '' : 'mutate_blocklets',
       role: inService ? _util2.BlockletAdminRoles : [],
       children: hasPermission => /*#__PURE__*/(0, _jsxRuntime.jsx)(_table.default, {
         className: (0, _util2.isBlockletDev)(blocklet) ? 'readonly-block config-table' : 'config-table',

package/lib/blocklet/component/index.js

@@ -48,10 +48,11 @@ var _mode = _interopRequireDefault(require("../mode"));
 var _configuration = _interopRequireDefault(require("./configuration"));
 var _delete = _interopRequireDefault(require("./delete"));
 var _line = _interopRequireDefault(require("./line"));
+var _add = _interopRequireDefault(require("./add"));
 var _addRule = _interopRequireDefault(require("../router/action/add-rule"));
 var _ruleList = _interopRequireDefault(require("../router/rule-list"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["blocklet", "onUpdate", "getComponentUrl", "AddComponent"];
+const _excluded = ["blocklet", "onUpdate", "getComponentUrl"];
 var _templateObject, _templateObject2;
 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; }
@@ -407,8 +408,7 @@ function BlockletComponent(_ref4) {
   let {
       blocklet,
       onUpdate,
-      getComponentUrl,
-      AddComponent
+      getComponentUrl
     } = _ref4,
     rest = _objectWithoutProperties(_ref4, _excluded);
   const {
@@ -538,7 +538,7 @@ function BlockletComponent(_ref4) {
       input = {
         did: blocklet.meta.did,
         version: updateConfirm.params.version,
-        registryUrl: updateConfirm.params.registryUrl || ''
+        storeUrl: updateConfirm.params.registryUrl || ''
       };
     } else {
       fn = api.upgradeComponents.bind(api);
@@ -586,7 +586,7 @@ function BlockletComponent(_ref4) {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "title",
         children: [t('common.components'), /*#__PURE__*/(0, _jsxRuntime.jsx)(_permission.default, {
-          permission: inService ? '' : 'mutate_blockets',
+          permission: inService ? '' : 'mutate_blocklets',
           role: inService ? _util2.BlockletAdminRoles : [],
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledBadge, {
             top: 1.2,
@@ -617,7 +617,7 @@ function BlockletComponent(_ref4) {
           })
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_permission.default, {
-        permission: inService ? '' : 'mutate_blockets',
+        permission: inService ? '' : 'mutate_blocklets',
         role: inService ? _util2.BlockletAdminRoles : [],
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
           display: "flex",
@@ -641,7 +641,7 @@ function BlockletComponent(_ref4) {
                 }), t('router.rule.add.title')]
               });
             }
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(AddComponent, {
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_add.default, {
             blocklet: blocklet,
             children: _ref7 => {
               let {
@@ -761,12 +761,10 @@ function BlockletComponent(_ref4) {
 BlockletComponent.propTypes = {
   blocklet: _propTypes.default.object.isRequired,
   onUpdate: _propTypes.default.func,
-  getComponentUrl: _propTypes.default.func,
-  AddComponent: _propTypes.default.element
+  getComponentUrl: _propTypes.default.func
 };
 BlockletComponent.defaultProps = {
   onUpdate: () => {},
-  getComponentUrl: () => window.location.origin,
-  AddComponent: () => {}
+  getComponentUrl: () => window.location.origin
 };
 const Div = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .title {\n    font-size: 1.2rem;\n    font-weight: bold;\n    margin-bottom: ", ";\n  }\n\n  @keyframes showDelay {\n    0% {\n      opacity: 0;\n    }\n\n    100% {\n      opacity: 1;\n    }\n  }\n\n  .component-item {\n    animation: showDelay 0.75s ease 1;\n  }\n"])), props => props.theme.spacing(1));

package/lib/blocklet/component/select-store.js

@@ -0,0 +1,151 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = SelectStore;
+var _react = require("react");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
+var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
+var _ArrowDropDown = _interopRequireDefault(require("@mui/icons-material/ArrowDropDown"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _useLocalStorage = _interopRequireDefault(require("react-use/lib/useLocalStorage"));
+var _constants = require("../../util/constants");
+var _node = require("../../contexts/node");
+var _blocklet = require("../../contexts/blocklet");
+var _add = _interopRequireDefault(require("../../store/add"));
+var _item = _interopRequireDefault(require("../../store/item"));
+var _util = require("../../util");
+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 SelectStore(_ref) {
+  let {
+    onChange: _onChange,
+    loading,
+    children,
+    extra
+  } = _ref;
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const {
+    info: nodeInfo,
+    inService
+  } = (0, _node.useNodeContext)();
+  const {
+    blocklet
+  } = (0, _blocklet.useBlockletContext)();
+  const [open, setOpen] = (0, _react.useState)(false);
+  const storeSelectRef = (0, _react.useRef)(null);
+  const storageKey = inService ? _constants.STORAGE_KEY_STORE_BLOCKLET : _constants.STORAGE_KEY_STORE_SERVER;
+  const [storeUrl, setStoreUrl] = (0, _useLocalStorage.default)(storageKey);
+  const {
+    storeList,
+    teamDid
+  } = (0, _util.getStoreList)({
+    fromBlocklet: inService,
+    blocklet,
+    nodeInfo
+  });
+  const currentRegistry = storeUrl && storeList.find(x => storeUrl === x.url) || storeList[0];
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(SelectStoreTitle, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        ref: storeSelectRef,
+        color: "secondary",
+        "data-cy": "add-component-select-store",
+        endIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ArrowDropDown.default, {
+          color: "secondary"
+        }),
+        onClick: () => {
+          setOpen(true);
+        },
+        style: {
+          padding: '0 2px'
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+          color: "secondary",
+          children: currentRegistry.name
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+        color: "secondary",
+        children: extra
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_TextField.default, {
+      id: "mui-registry-select",
+      select: true,
+      autoComplete: "off",
+      variant: "outlined",
+      name: "did",
+      helperText: t('blocklet.component.selectRegistryTip'),
+      "data-cy": "component-registry-select",
+      fullWidth: true,
+      value: currentRegistry,
+      autoFocus: true,
+      onChange: e => {
+        const newRegistry = e.target.value;
+        setStoreUrl(newRegistry.url);
+        _onChange(newRegistry);
+      },
+      SelectProps: {
+        open,
+        MenuProps: {
+          anchorEl: storeSelectRef.current
+        },
+        renderValue: item => {
+          return item === null || item === void 0 ? void 0 : item.name;
+        },
+        onClose: () => {
+          setOpen(false);
+        }
+      },
+      style: {
+        display: 'none'
+      },
+      margin: "normal",
+      children: [storeList === null || storeList === void 0 ? void 0 : storeList.map(x => {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
+          value: x,
+          "data-cy": x.url,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.default, {
+            teamDid: teamDid,
+            store: x,
+            onDelete: () => {
+              if (storeUrl === x.url) {
+                var _storeList$;
+                setStoreUrl((_storeList$ = storeList[0]) === null || _storeList$ === void 0 ? void 0 : _storeList$.url);
+              }
+            }
+          })
+        }, x.url);
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_add.default, {
+        disabled: loading,
+        storeList: storeList,
+        teamDid: teamDid,
+        onAdd: url => {
+          setStoreUrl(url);
+        }
+      })]
+    }), children({
+      currentRegistry
+    })]
+  });
+}
+SelectStore.propTypes = {
+  onChange: _propTypes.default.func,
+  loading: _propTypes.default.bool,
+  children: _propTypes.default.any.isRequired,
+  extra: _propTypes.default.node
+};
+SelectStore.defaultProps = {
+  onChange: () => {},
+  loading: false,
+  extra: ''
+};
+const SelectStoreTitle = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 16px;\n\n  span {\n    font-size: 16px;\n    color: ", ";\n    // font-weight: bold;\n  }\n"])), props => props.theme.palette.common.black);

package/lib/blocklet/component/setting.js

@@ -112,7 +112,7 @@ function ComponentSetting(_ref) {
     })
   }));
 }
-const ComponentSettingInDaemon = (0, _permission.withPermission)(ComponentSetting, 'mutate_blockets');
+const ComponentSettingInDaemon = (0, _permission.withPermission)(ComponentSetting, 'mutate_blocklets');
 const ComponentSettingInService = (0, _permission.withPermission)(ComponentSetting, '', _util.BlockletAdminRoles);
 function ComponentSettingWithPermission(props) {
   const {

package/lib/blocklet/component/store-blocklet-list.js

@@ -0,0 +1,203 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = BlockletList;
+var _react = require("react");
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _urlJoin = _interopRequireDefault(require("url-join"));
+var _Link = _interopRequireDefault(require("@mui/material/Link"));
+var _ErrorBoundary = require("@arcblock/ux/lib/ErrorBoundary");
+var _reactErrorBoundary = require("react-error-boundary");
+var _list = _interopRequireDefault(require("@blocklet/list"));
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _Blocklet = _interopRequireWildcard(require("@arcblock/ux/lib/Blocklet"));
+var _Spinner = _interopRequireDefault(require("@arcblock/ux/lib/Spinner"));
+var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
+var _util = require("@blocklet/meta/lib/util");
+var _toast = _interopRequireDefault(require("../../toast"));
+var _util2 = require("../../util");
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject;
+const _excluded = ["handleButtonClick", "handleSearchSelect", "storeUrl", "handleBlockletRender", "extraFilter"];
+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 _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 _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; }
+const getStoreDetail = (meta, endpoint) => {
+  return (0, _urlJoin.default)(endpoint, "/blocklets/".concat(meta.did));
+};
+const displayAttributes = _ref => {
+  let {
+    blocklet,
+    attribute,
+    value
+  } = _ref;
+  if (blocklet._formatted) {
+    return blocklet._formatted[attribute];
+  }
+  return value;
+};
+const requirePurchase = meta => meta.inStore && (0, _util.isFreeBlocklet)(meta) === false;
+function BlockletItem(_ref2) {
+  let {
+    blocklet,
+    blocklets,
+    handleButtonClick,
+    endpoint
+  } = _ref2;
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const logoUrl = (0, _urlJoin.default)(endpoint, (0, _util2.formatRegistryLogoPath)(blocklet.did, blocklet.logo || ''));
+  const [loading, setLoading] = (0, _react.useState)(false);
+  const onClickLink = e => {
+    if (!e.currentTarget.contains(e.target)) {
+      e.preventDefault();
+      return false;
+    }
+    return true;
+  };
+  const btnTxt = requirePurchase(blocklet) ? t('common.purchase') : t('blocklet.component.choose');
+  const onAction = async e => {
+    e.preventDefault();
+    e.stopPropagation();
+    try {
+      setLoading(true);
+      await handleButtonClick({
+        meta: blocklet,
+        registryUrl: endpoint,
+        blocklets
+      });
+    } catch (err) {
+      _toast.default.error(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.default, {
+    href: getStoreDetail(blocklet, endpoint),
+    style: {
+      color: 'initial',
+      textDecoration: 'none'
+    },
+    onClick: onClickLink,
+    target: "_blank",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledBlocklet, {
+      title: displayAttributes({
+        blocklet,
+        attribute: 'title',
+        value: blocklet.title || blocklet.name
+      }),
+      did: blocklet.did,
+      description: displayAttributes({
+        blocklet,
+        attribute: 'description',
+        value: blocklet.description
+      }),
+      cover: blocklet.logo ? logoUrl : '',
+      version: blocklet.version,
+      button: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          display: 'flex',
+          alignItems: 'center'
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Blocklet.ActionButton, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+            onClick: onAction,
+            size: "small",
+            disabled: loading,
+            variant: "outlined",
+            color: "primary",
+            "data-cy": "install-blocklet",
+            children: loading ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {
+                size: [16, 10],
+                style: {
+                  marginRight: 3
+                }
+              }), btnTxt]
+            }) : btnTxt
+          }, blocklet.did)
+        })
+      })
+    })
+  });
+}
+BlockletItem.propTypes = {
+  blocklet: _propTypes.default.object.isRequired,
+  blocklets: _propTypes.default.array,
+  handleButtonClick: _propTypes.default.func,
+  endpoint: _propTypes.default.string
+};
+BlockletItem.defaultProps = {
+  handleButtonClick: null,
+  endpoint: '',
+  blocklets: []
+};
+function BlockletList(_ref3) {
+  let {
+      handleButtonClick,
+      handleSearchSelect,
+      storeUrl,
+      handleBlockletRender,
+      extraFilter
+    } = _ref3,
+    rest = _objectWithoutProperties(_ref3, _excluded);
+  const {
+    locale
+  } = (0, _context.useLocaleContext)();
+  const [filters, setFilters] = (0, _react.useState)({});
+  const handleChange = changeData => {
+    setFilters(changeData);
+  };
+  const endpoint = storeUrl;
+  (0, _react.useEffect)(() => {
+    setFilters({});
+  }, [endpoint]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactErrorBoundary.ErrorBoundary, {
+    FallbackComponent: _ErrorBoundary.ErrorFallback,
+    resetKeys: [endpoint],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, rest), {}, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_list.default, {
+        blockletRender: blockletRenderProps => {
+          const defaultProps = _objectSpread(_objectSpread({}, blockletRenderProps), {}, {
+            handleButtonClick,
+            endpoint
+          });
+          return handleBlockletRender(_objectSpread(_objectSpread({}, blockletRenderProps), {}, {
+            defaultRender: /*#__PURE__*/(0, _jsxRuntime.jsx)(BlockletItem, _objectSpread({}, defaultProps))
+          }));
+        },
+        baseSearch: true,
+        endpoint: endpoint,
+        locale: locale,
+        onFilterChange: handleChange,
+        onSearchSelect: handleSearchSelect,
+        filters: filters,
+        extraFilter: extraFilter
+      })
+    }))
+  });
+}
+BlockletList.propTypes = {
+  storeUrl: _propTypes.default.string.isRequired,
+  handleButtonClick: _propTypes.default.func,
+  handleSearchSelect: _propTypes.default.func,
+  handleBlockletRender: _propTypes.default.func,
+  extraFilter: _propTypes.default.func
+};
+BlockletList.defaultProps = {
+  handleButtonClick: null,
+  handleSearchSelect: null,
+  handleBlockletRender: null,
+  extraFilter: undefined
+};
+const StyledBlocklet = (0, _styled.default)(_Blocklet.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ms-highlight {\n    color: ", ";\n  }\n"])), props => props.theme.palette.primary.main);

package/lib/blocklet/configuration.js

@@ -611,7 +611,7 @@ function BlockletEnvironment(_ref) {
     })]
   }));
 }
-const BlockletEnvironmentInDaemon = (0, _permission.withPermission)(BlockletEnvironment, 'mutate_blockets');
+const BlockletEnvironmentInDaemon = (0, _permission.withPermission)(BlockletEnvironment, 'mutate_blocklets');
 const BlockletEnvironmentInService = (0, _permission.withPermission)(BlockletEnvironment, '', _util2.BlockletAdminRoles);
 function BlockletEnvironmentWithPermission(props) {
   const {
@@ -631,5 +631,5 @@ BlockletEnvironment.defaultProps = {
   onUpdate: () => {},
   hasPermission: false
 };
-const Div = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .config-form {\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\n  .config-item {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin: 16px 0;\n  }\n\n  .config-label {\n    font-weight: bold;\n  }\n\n  .config-desc {\n    font-weight: normal;\n    font-size: 12px;\n    color: #666;\n  }\n\n  .form-item {\n    margin-top: 0;\n  }\n"])), props => props.theme.breakpoints.down('md'));
+const Div = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .config-form {\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\n  .config-item {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin: 16px 0;\n  }\n\n  .config-label {\n    font-weight: bold;\n  }\n\n  .config-desc {\n    font-weight: normal;\n    font-size: 12px;\n    color: #666;\n  }\n\n  .form-item {\n    margin-top: 0;\n  }\n"])), props => props.theme.breakpoints.down('md'));
 const StyledMenuItem = (0, _styled.default)(_MenuItem.default)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .tip {\n    font-size: 12px;\n    color: ", ";\n  }\n"])), props => props.theme.palette.text.secondary);