@blocklet/ui-react 2.9.17 → 2.9.19

package/lib/UserCenter/components/storage/item.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { BoxProps } from '@mui/material';
+import { SpaceGateway } from '../../../contexts/config-user-space';
+declare function SpaceItem({ spaceGateway, connected, onDisconnect, ...rest }: {
+    spaceGateway: SpaceGateway;
+    connected: boolean;
+    onDisconnect: Function;
+} & BoxProps): import("react").JSX.Element;
+export default SpaceItem;

package/lib/UserCenter/components/storage/item.js

@@ -0,0 +1,179 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _jsxRuntime = require("react/jsx-runtime");
+var _material = require("@mui/material");
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
+var _Check = _interopRequireDefault(require("@mui/icons-material/Check"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _spaceConnected = _interopRequireDefault(require("./icons/space-connected.svg?react"));
+var _DID = _interopRequireDefault(require("@arcblock/ux/lib/DID"));
+var _previewNft = _interopRequireDefault(require("./preview-nft"));
+var _useMobile = _interopRequireDefault(require("../../../hooks/use-mobile"));
+var _spaces = require("../../../libs/spaces");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function SpaceItem({
+  spaceGateway,
+  connected,
+  onDisconnect,
+  ...rest
+}) {
+  const isMobile = (0, _useMobile.default)({});
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const handleOnDisconnect = async () => {
+    try {
+      await onDisconnect();
+      _Toast.default.success(t("storage.spaces.gateway.delete.succeeded", {
+        name: spaceGateway.name
+      }));
+    } catch (error) {
+      console.error(error);
+      _Toast.default.error(error.message);
+    }
+  };
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(BoxContainer, {
+    style: {
+      position: "relative"
+    },
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+      sx: {
+        backgroundColor: connected ? "#F0FDFF" : "inherit",
+        "&:hover": {
+          backgroundColor: connected ? "#F0FDFF" : "#FBFBFB"
+        },
+        borderRadius: "8px"
+      },
+      display: "flex",
+      padding: "12px 20px",
+      ...rest,
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+        display: "flex",
+        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_previewNft.default, {
+          alt: spaceGateway.did,
+          src: (0, _spaces.getSpaceNftDisplayUrlFromEndpoint)(spaceGateway.endpoint)
+        })
+      }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+        className: "spaces-info",
+        display: "flex",
+        flexGrow: 1,
+        flexDirection: "column",
+        sx: {
+          marginLeft: "20px",
+          padding: "0px 0px"
+        },
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+          className: "spaces-info",
+          display: "flex",
+          maxWidth: "360px",
+          alignItems: "center",
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+            color: connected ? "primary" : "inherit",
+            fontSize: "1rem",
+            fontWeight: "bold",
+            children: spaceGateway.name
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Chip, {
+            label: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+              children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_spaceConnected.default, {
+                style: {
+                  marginRight: "4px"
+                }
+              }), t("storage.spaces.connected.tag")]
+            }),
+            variant: "outlined",
+            size: "small",
+            style: {
+              marginLeft: isMobile ? void 0 : "20px",
+              fontWeight: "bold"
+            }
+          })]
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+          className: "spaces-address",
+          display: "flex",
+          color: "#9397A1",
+          marginTop: "8px",
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+            sx: {
+              display: "inline-flex",
+              alignItems: "center",
+              fontSize: "14px"
+            },
+            color: "#9397A1",
+            children: spaceGateway.did && /* @__PURE__ */(0, _jsxRuntime.jsx)(_DID.default, {
+              copyable: false,
+              size: 14,
+              compact: true,
+              responsive: false,
+              did: spaceGateway.did
+            })
+          })
+        })]
+      })]
+    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+      className: "selected-container selected",
+      children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_Check.default, {
+        className: "selected-icon"
+      })
+    })]
+  });
+}
+const BoxContainer = (0, _styled.default)(_material.Box)`
+  .selected-container {
+    position: absolute;
+    right: 0px;
+    bottom: 0px;
+    display: flex;
+    -webkit-box-pack: end;
+    justify-content: flex-end;
+    align-items: flex-end;
+    width: 32px;
+    height: 32px;
+    border-radius: 0px 0px 8px;
+    color: rgb(255, 255, 255);
+    overflow: hidden;
+    transition: all 0.4s ease 0s;
+
+    &::after {
+      position: absolute;
+      z-index: 0;
+      left: 60px;
+      top: 60px;
+      display: block;
+      width: 0px;
+      height: 0px;
+      border-width: 16px;
+      border-style: solid;
+      border-color: transparent #1dc1c7 #1dc1c7 transparent;
+      transition: all 0.1s ease 0s;
+      content: '';
+    }
+
+    .selected-icon {
+      visibility: hidden;
+      width: 60%;
+      height: 60%;
+      position: relative;
+      z-index: 2;
+      margin: 0px 1px 1px 0px;
+      font-size: 16px;
+      transition: all 0.2s ease 0s;
+    }
+  }
+
+  .selected-container.selected {
+    &::after {
+      left: 0px;
+      top: 0px;
+    }
+
+    .selected-icon {
+      visibility: visible;
+    }
+  }
+`;
+module.exports = SpaceItem;

package/lib/UserCenter/components/storage/preview-nft.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare function PreviewSpaceNft({ src, alt }: {
+    src: string;
+    alt: string;
+}): import("react").JSX.Element;
+export default PreviewSpaceNft;

package/lib/UserCenter/components/storage/preview-nft.js

@@ -0,0 +1,88 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
+var _reactPlaceholder = _interopRequireDefault(require("react-placeholder"));
+var _material = require("@mui/material");
+var _CloseOutlined = _interopRequireDefault(require("@mui/icons-material/CloseOutlined"));
+var _emptySpacesNft = _interopRequireDefault(require("./icons/empty-spaces-nft.svg?react"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function PreviewSpaceNft({
+  src,
+  alt
+}) {
+  const [showEmptySpaceNFT, setShowEmptySpaceNFT] = (0, _react.useState)(false);
+  const [open, setOpen] = (0, _react.useState)(false);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_reactPlaceholder.default, {
+      ready: showEmptySpaceNFT,
+      customPlaceholder:
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+      /* @__PURE__ */
+      (0, _jsxRuntime.jsx)("img", {
+        style: {
+          cursor: "pointer"
+        },
+        alt,
+        src,
+        width: "58px",
+        height: "58px",
+        onError: () => setShowEmptySpaceNFT(true),
+        onClick: handleOpen
+      }),
+      children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_emptySpacesNft.default, {
+        style: {
+          cursor: "pointer",
+          width: "58px",
+          height: "58px"
+        },
+        onClick: handleOpen
+      })
+    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Dialog, {
+      open,
+      onClose: handleClose,
+      "aria-labelledby": "preview-space-nft-display",
+      "aria-describedby": "preview space nft display",
+      fullWidth: true,
+      maxWidth: "md",
+      children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.DialogContent, {
+        style: {
+          padding: "8px 8px",
+          backgroundColor: "rgba(0,0,0,0.8)"
+        },
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.IconButton, {
+          color: "inherit",
+          onClick: handleClose,
+          "aria-label": "close",
+          style: {
+            position: "absolute",
+            top: 8,
+            right: 8,
+            color: "white"
+          },
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_CloseOutlined.default, {})
+        }), showEmptySpaceNFT ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_emptySpacesNft.default, {
+          style: {
+            width: "100%",
+            height: "75vh"
+          }
+        }) : /* @__PURE__ */(0, _jsxRuntime.jsx)("img", {
+          src,
+          alt: "",
+          style: {
+            width: "100%",
+            height: "75vh",
+            objectFit: "contain"
+          }
+        })]
+      })
+    })]
+  });
+}
+module.exports = PreviewSpaceNft;

package/lib/UserCenter/components/user-basic-info.d.ts

@@ -1,8 +1,10 @@
 /// <reference types="react" />
 import type { BoxProps } from '@mui/material';
 import type { User } from '../../@types';
-export default function UserBasicInfo({ user, isMyself, switchPassport, ...rest }: {
+export default function UserBasicInfo({ user, isMyself, switchPassport, switchProfile, openSettings, ...rest }: {
     user: User;
     isMyself: boolean;
     switchPassport: () => void;
+    switchProfile: () => void;
+    openSettings: () => void;
 } & BoxProps): import("react").JSX.Element;

package/lib/UserCenter/components/user-basic-info.js

@@ -8,27 +8,82 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _material = require("@mui/material");
 var _react = require("@iconify/react");
 var _swapHorizRounded = _interopRequireDefault(require("@iconify-icons/material-symbols/swap-horiz-rounded"));
+var _settingsOutlineRounded = _interopRequireDefault(require("@iconify-icons/material-symbols/settings-outline-rounded"));
+var _Avatar = _interopRequireDefault(require("@arcblock/ux/lib/Avatar"));
 var _Colors = require("@arcblock/ux/lib/Colors");
+var _Theme = require("@arcblock/ux/lib/Theme");
 var _DID = _interopRequireDefault(require("@arcblock/ux/lib/DID"));
 var _ahooks = require("ahooks");
+var _util = require("@arcblock/ux/lib/Locale/util");
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _noop = _interopRequireDefault(require("lodash/noop"));
+var _locales = require("../libs/locales");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function UserBasicInfo({
   user,
   isMyself = true,
   switchPassport,
+  switchProfile,
+  openSettings,
   ...rest
 }) {
+  const {
+    locale
+  } = (0, _context.useLocaleContext)();
+  const t = (0, _ahooks.useMemoizedFn)((key, data = {}) => {
+    return (0, _util.translate)(_locales.translations, key, locale, "en", data);
+  });
   const currentRole = (0, _ahooks.useCreation)(() => (user?.passports || [])?.find(item => item.name === user.role), [user?.passports, user?.role]);
+  const theme = (0, _Theme.useTheme)();
+  const isSmallView = theme.breakpoints.down("md");
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
     ...rest,
-    children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
-      variant: "h4",
+    sx: {
+      position: "relative",
+      ...rest.sx
+    },
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_Avatar.default, {
+      src: user?.avatar,
+      did: user?.did,
+      size: isSmallView ? 64 : 80,
+      variant: "circle",
+      shape: "circle",
+      sx: {
+        borderRadius: "100%",
+        backgroundColor: "#fff",
+        position: "relative",
+        overflow: "hidden",
+        ...(isMyself ? {
+          cursor: "pointer",
+          "&:hover": {
+            "&::after": {
+              content: `"${t("switchProfile")}"`
+            }
+          },
+          "&::after": {
+            color: "white",
+            position: "absolute",
+            fontSize: "12px",
+            bottom: 0,
+            left: 0,
+            right: 0,
+            height: "50%",
+            backgroundColor: "rgba(0, 0, 0, 0.3)",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center"
+          }
+        } : {})
+      },
+      onClick: isMyself ? switchProfile : _noop.default
+    }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+      variant: "h5",
       sx: {
         fontWeight: "bold",
         display: "flex",
         alignItems: "center",
         gap: 1,
-        mb: 1
+        fontSize: "24px !important"
       },
       children: [user?.fullName, isMyself ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Chip, {
         label: currentRole?.title || user?.role || "Guest",
@@ -62,6 +117,28 @@ function UserBasicInfo({
     }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_DID.default, {
       did: user.did,
       copyable: false
-    })]
+    }), isMyself ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.IconButton, {
+      sx: {
+        borderRadius: 2,
+        color: _Colors.temp.textBase,
+        backgroundColor: "white",
+        border: `1px solid ${_Colors.temp.strokeBorderBase}`,
+        position: "absolute",
+        bottom: {
+          xs: "unset",
+          md: 0
+        },
+        top: {
+          xs: 0,
+          md: "unset"
+        },
+        right: 0
+      },
+      disableFocusRipple: true,
+      onClick: openSettings,
+      children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_react.Icon, {
+        icon: _settingsOutlineRounded.default
+      })
+    }) : null]
   });
 }

package/lib/UserCenter/components/user-center.d.ts

@@ -1,9 +1,12 @@
 /// <reference types="react" />
 import type { PaperProps } from '@mui/material';
-export default function UserCenter({ children, currentTab, contentProps, disableAutoRedirect, autoPopupSetting, }: {
-    children: any;
-    currentTab: string;
-    contentProps?: PaperProps;
-    disableAutoRedirect?: boolean;
-    autoPopupSetting?: boolean;
+export default function UserCenter({ children, currentTab, contentProps, disableAutoRedirect, autoPopupSetting, hideFooter, headerProps, footerProps, }: {
+    readonly children: any;
+    readonly currentTab: string;
+    readonly contentProps?: PaperProps;
+    readonly disableAutoRedirect?: boolean;
+    readonly autoPopupSetting?: boolean;
+    readonly hideFooter?: boolean;
+    readonly headerProps?: object;
+    readonly footerProps?: object;
 }): import("react").JSX.Element | null;

package/lib/UserCenter/components/user-center.js

@@ -8,10 +8,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _react = require("react");
 var _material = require("@mui/material");
 var _ahooks = require("ahooks");
-var _react2 = require("@iconify/react");
-var _settingsOutlineRounded = _interopRequireDefault(require("@iconify-icons/material-symbols/settings-outline-rounded"));
 var _Session = require("@arcblock/did-connect/lib/Session");
-var _Avatar = _interopRequireDefault(require("@arcblock/ux/lib/Avatar"));
 var _Tabs = _interopRequireDefault(require("@arcblock/ux/lib/Tabs"));
 var _Empty = _interopRequireDefault(require("@arcblock/ux/lib/Empty"));
 var _Colors = require("@arcblock/ux/lib/Colors");
@@ -21,9 +18,8 @@ var _context = require("@arcblock/ux/lib/Locale/context");
 var _ErrorBoundary = require("@arcblock/ux/lib/ErrorBoundary");
 var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
 var _ufo = require("ufo");
-var _Header = _interopRequireDefault(require("../../Header"));
+var _ = require("../../");
 var _locales = require("../libs/locales");
-var _banner = _interopRequireDefault(require("../assets/banner.png"));
 var _userInfo = _interopRequireDefault(require("./user-info"));
 var _userBasicInfo = _interopRequireDefault(require("./user-basic-info"));
 var _blocklets = require("../../blocklets");
@@ -36,7 +32,10 @@ function UserCenter({
   currentTab,
   contentProps = {},
   disableAutoRedirect = false,
-  autoPopupSetting = false
+  autoPopupSetting = false,
+  hideFooter = false,
+  headerProps = {},
+  footerProps = {}
 }) {
   const {
     locale
@@ -144,15 +143,6 @@ function UserCenter({
       });
     }
   });
-  const xsGridTemplateAreas = (0, _ahooks.useCreation)(() => {
-    return ['"avatar settings"', '"basicInfo basicInfo"', userCenterTabs.length > 0 || !isMyself ? '"tabs tabs"' : null, isMyself ? '"passport passport"' : null, isMyself ? '"extraInfo extraInfo"' : null];
-  }, [userCenterTabs, isMyself]);
-  const mdGridTemplateAreas = (0, _ahooks.useCreation)(() => {
-    if (!isMyself) {
-      return ['"avatar"', '"basicInfo"', '"tabs"'];
-    }
-    return ['"avatar settings"', '"basicInfo extraInfo"', userCenterTabs.length > 0 ? '"tabs extraInfo"' : null, '"passport extraInfo"'];
-  }, [userCenterTabs, isMyself]);
   const openSettings = (0, _ahooks.useMemoizedFn)(() => {
     confirmApi.open({
       title: t("settings"),
@@ -194,67 +184,19 @@ function UserCenter({
     }
     return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
       sx: {
-        maxWidth: 1200,
+        maxWidth: 880,
         margin: "0 auto",
-        px: 3,
-        pb: 3,
-        display: "grid",
+        p: 3,
+        display: "flex",
         gap: 2.5,
-        gridTemplateAreas: {
-          xs: xsGridTemplateAreas.filter(Boolean).join(" "),
-          md: mdGridTemplateAreas.filter(Boolean).join(" ")
-        },
-        gridTemplateRows: {
-          xs: "64px auto auto auto",
-          md: "64px auto 1fr"
-        },
-        gridTemplateColumns: {
-          xs: "1fr",
-          md: isMyself ? "1fr 300px" : "1fr"
-        }
+        flexDirection: "column"
       },
-      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_Avatar.default, {
-          src: userState.data?.avatar,
-          did: userState.data?.did,
-          size: 120,
-          variant: "circle",
-          shape: "circle",
-          style: {
-            border: "4px solid #fff",
-            transform: "translateY(-50%)",
-            borderRadius: "100%",
-            gridArea: "avatar",
-            backgroundColor: "#fff"
-          }
-        })
-      }), isMyself ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-        sx: {
-          gridArea: "settings",
-          display: "flex",
-          justifyContent: "flex-end",
-          alignItems: "center"
-        },
-        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.IconButton, {
-          sx: {
-            borderRadius: 2,
-            color: _Colors.temp.textBase,
-            backgroundColor: "white",
-            border: `1px solid ${_Colors.temp.strokeBorderBase}`
-          },
-          disableFocusRipple: true,
-          onClick: openSettings,
-          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_react2.Icon, {
-            icon: _settingsOutlineRounded.default
-          })
-        })
-      }) : null, /* @__PURE__ */(0, _jsxRuntime.jsx)(_userBasicInfo.default, {
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_userBasicInfo.default, {
         isMyself,
         switchPassport: session.switchPassport,
-        user: userState.data,
-        sx: {
-          gridArea: "basicInfo"
-        }
+        switchProfile: session.switchProfile,
+        openSettings,
+        user: userState.data
       }), userCenterTabs.length > 0 && currentTab ? /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
         sx: {
           gridArea: "tabs",
@@ -323,34 +265,35 @@ function UserCenter({
         })
       }) : null, isMyself ? /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
-          sx: {
-            gridArea: "passport"
-          },
           children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
             variant: "h5",
             sx: {
               fontWeight: "bold",
               mb: 1.5
             },
-            children: "Passport"
+            children: t("passport")
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_passport.default, {
             user: userState.data
           })]
-        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-          sx: {
-            gridArea: "extraInfo"
-          },
-          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_userInfo.default, {
+        }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+            variant: "h5",
+            sx: {
+              fontWeight: "bold",
+              mb: 1.5
+            },
+            children: t("userInfo")
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_userInfo.default, {
             user: userState.data,
             sx: {
               padding: 3,
               borderRadius: 3
             }
-          })
+          })]
         })]
       }) : null]
     });
-  }, [userState, userCenterTabs, mdGridTemplateAreas, xsGridTemplateAreas]);
+  }, [userState, userCenterTabs]);
   if (!disableAutoRedirect && !currentTab && formattedBlocklet?.navigation?.userCenter?.length > 0) {
     window.location.replace(formattedBlocklet?.navigation?.userCenter[0]?.link);
     return null;
@@ -358,19 +301,17 @@ function UserCenter({
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
     sx: {
       backgroundColor: _Colors.temp.backgroundsBgSubtitle,
-      minHeight: "100vh"
+      minHeight: "100vh",
+      display: "flex",
+      flexDirection: "column"
     },
-    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_Header.default, {}), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-      sx: {
-        pt: {
-          xs: `${400 / 1280 * 100}%`,
-          sm: `${300 / 1280 * 100}%`,
-          md: `${200 / 1280 * 100}%`
-        },
-        backgroundImage: `url(${_banner.default})`,
-        backgroundSize: "cover",
-        minHeight: "60px"
-      }
-    }), content, confirmHolder]
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_.Header, {
+      ...headerProps
+    }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+      flex: 1,
+      children: [content, confirmHolder]
+    }), hideFooter ? null : /* @__PURE__ */(0, _jsxRuntime.jsx)(_.Footer, {
+      ...footerProps
+    })]
   });
 }

package/lib/UserCenter/components/user-info-item.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { BoxProps } from '@mui/material';
 type TUserInfoItemProps = {
     data: {
         icon: any;
@@ -6,5 +7,5 @@ type TUserInfoItemProps = {
         content: any;
     };
 };
-export default function UserInfoItem({ data }: TUserInfoItemProps): import("react").JSX.Element;
+export default function UserInfoItem({ data, ...rest }: TUserInfoItemProps & BoxProps): import("react").JSX.Element;
 export {};

package/lib/UserCenter/components/user-info-item.js

@@ -8,16 +8,19 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _material = require("@mui/material");
 var _Colors = require("@arcblock/ux/lib/Colors");
 function UserInfoItem({
-  data
+  data,
+  ...rest
 }) {
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+    ...rest,
     sx: {
       display: "grid",
       gridTemplateColumns: "auto 1fr",
       gridTemplateAreas: `"icon title" ". content"`,
       alignItems: "center",
       rowGap: 0.75,
-      columnGap: 1
+      columnGap: 1,
+      ...rest.sx
     },
     children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
       sx: {