@blocklet/ui-react 2.9.22 → 2.9.24

package/es/Footer/index.js

@@ -5,6 +5,8 @@ import { styled } from "@arcblock/ux/lib/Theme";
 import { withErrorBoundary } from "react-error-boundary";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import { ErrorFallback } from "@arcblock/ux/lib/ErrorBoundary";
+import { temp as colors } from "@arcblock/ux/lib/Colors";
+import omit from "lodash/omit";
 import OverridableThemeProvider from "../common/overridable-theme-provider.js";
 import InternalFooter from "./internal-footer.js";
 import { mapRecursive } from "../utils.js";
@@ -49,7 +51,15 @@ function Footer({ meta, theme: themeOverrides, ...rest }) {
     socialMedia: localized.socialMedia,
     links: localized.links.map((item) => ({ ...item, label: item.title }))
   };
-  return /* @__PURE__ */ jsx(OverridableThemeProvider, { theme: themeOverrides, children: /* @__PURE__ */ jsx(StyledInternalFooter, { ...props, ...rest, $bgcolor: theme?.background?.footer }) });
+  return /* @__PURE__ */ jsx(OverridableThemeProvider, { theme: themeOverrides, children: /* @__PURE__ */ jsx(
+    StyledInternalFooter,
+    {
+      ...props,
+      ...omit(rest, ["bordered"]),
+      $bordered: rest?.bordered,
+      $bgcolor: theme?.background?.footer
+    }
+  ) });
 }
 Footer.propTypes = {
   meta: blockletMetaProps,
@@ -61,7 +71,7 @@ Footer.defaultProps = {
   theme: null
 };
 const StyledInternalFooter = styled(InternalFooter)`
-  border-top: 1px solid #eee;
+  ${({ $bordered }) => `border-top: 1px solid ${$bordered ? colors.strokeSep : "#eee"};`}
   color: ${(props) => props.theme.palette.grey[600]};
   ${({ $bgcolor }) => $bgcolor && `background-color: ${$bgcolor};`}
   font-family: Inter, Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,

package/es/Header/index.js

@@ -7,6 +7,8 @@ import { styled } from "@arcblock/ux/lib/Theme";
 import { ResponsiveHeader } from "@arcblock/ux/lib/Header";
 import NavMenu from "@arcblock/ux/lib/NavMenu";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { temp as colors } from "@arcblock/ux/lib/Colors";
+import omit from "lodash/omit";
 import Icon from "../Icon/index.js";
 import OverridableThemeProvider from "../common/overridable-theme-provider.js";
 import { blockletMetaProps, sessionManagerProps } from "../types.js";
@@ -75,7 +77,8 @@ function Header({ meta, addons, sessionManagerProps: sessionManagerProps2, homeL
       homeLink,
       logo: /* @__PURE__ */ jsx("img", { src: appLogoRect || appLogo, alt: "logo" }),
       addons: headerAddons,
-      ...rest,
+      ...omit(rest, ["bordered"]),
+      $bordered: rest?.bordered,
       $bgcolor: theme?.background?.header,
       children: !navItems?.length ? null : ({ isMobile }) => /* @__PURE__ */ jsx(
         NavMenu,
@@ -118,6 +121,7 @@ const StyledUxHeader = styled(ResponsiveHeader)`
   .header-logo {
     min-width: 44px;
   }
+  ${({ $bordered }) => $bordered ? `border-bottom: 1px solid ${colors.strokeSep};` : ""}
   ${(props) => props.theme.breakpoints.down("md")} {
     .header-logo {
       min-width: 32px;

package/es/UserCenter/components/passport.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import type { StackProps } from '@mui/material';
+import type { BoxProps } from '@mui/material';
 import type { User } from '../../@types';
 export default function Passport({ user, ...rest }: {
     user: User;
-} & StackProps): import("react").JSX.Element;
+} & BoxProps): import("react").JSX.Element;

package/es/UserCenter/components/passport.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { Stack } from "@mui/material";
+import { Box } from "@mui/material";
 import Empty from "@arcblock/ux/lib/Empty";
 import { useTheme } from "@arcblock/ux/lib/Theme";
 import { temp as colors } from "@arcblock/ux/lib/Colors";
@@ -39,36 +39,51 @@ export default function Passport({ user, ...rest }) {
     return theme?.palette?.primary?.main || colors.textBase;
   }, [theme?.palette?.primary?.main]);
   if (passports.length === 0) {
-    return /* @__PURE__ */ jsx(Empty, { children: t("noPassport") });
+    return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Empty, { children: t("noPassport") }) });
   }
-  return /* @__PURE__ */ jsx(Stack, { direction: "row", spacing: 3, flexWrap: "wrap", useFlexGap: true, ...rest, children: passports.map((x) => /* @__PURE__ */ jsx(
-    PassportItem,
+  return /* @__PURE__ */ jsx(
+    Box,
     {
-      passport: x,
-      user,
-      width: 200,
-      color: window.blocklet.passportColor,
-      createPassportSvg,
-      title: currentRole && currentRole.role === x.role ? t("currentPassport") : "",
+      ...rest,
       sx: {
-        flexDirection: "column",
-        alignItems: "center",
-        gap: 1,
-        ".passport-item__display": {
-          width: 166,
-          height: 166,
-          borderRadius: 2,
-          px: 2,
-          display: "flex",
-          justifyContent: "center",
-          backgroundColor: "white",
-          boxShadow: currentRole && currentRole.role === x.role ? `0px 2px 4px 0px ${activeColor}, 0px 1px 2px -1px ${activeColor}, 0px 0px 0px 1px ${activeColor} !important` : "0px 2px 4px 0px rgba(2, 7, 19, 0.04), 0px 1px 2px -1px rgba(2, 7, 19, 0.08), 0px 0px 0px 1px rgba(2, 7, 19, 0.08) !important"
+        display: "grid",
+        gridTemplateColumns: {
+          xs: "repeat(2, 1fr)",
+          sm: "repeat(3, 1fr)",
+          md: "repeat(2, 1fr)"
         },
-        ".passport-item__body": {
-          marginLeft: "0 !important"
-        }
-      }
-    },
-    x.id
-  )) });
+        gap: 2.5,
+        ...rest.sx
+      },
+      children: passports.map((x) => /* @__PURE__ */ jsx(
+        PassportItem,
+        {
+          passport: x,
+          user,
+          color: window.blocklet.passportColor,
+          createPassportSvg,
+          title: currentRole && currentRole.role === x.role ? t("currentPassport") : "",
+          sx: {
+            flexDirection: "column",
+            alignItems: "center",
+            gap: 1,
+            ".passport-item__display": {
+              width: 166,
+              height: 166,
+              borderRadius: 2,
+              px: 2,
+              display: "flex",
+              justifyContent: "center",
+              backgroundColor: colors.backgroundsBgComponent,
+              boxShadow: currentRole && currentRole.role === x.role ? `0px 2px 4px 0px ${activeColor}, 0px 1px 2px -1px ${activeColor}, 0px 0px 0px 1px ${activeColor} !important` : "unset"
+            },
+            ".passport-item__body": {
+              marginLeft: "0 !important"
+            }
+          }
+        },
+        x.id
+      ))
+    }
+  );
 }

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

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

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

@@ -15,6 +15,7 @@ import { translations } from "../libs/locales.js";
 export default function UserBasicInfo({
   user,
   isMyself = true,
+  showFullDid = true,
   switchPassport,
   switchProfile,
   openSettings,
@@ -52,6 +53,7 @@ export default function UserBasicInfo({
               backgroundColor: "#fff",
               position: "relative",
               overflow: "hidden",
+              mb: 1.5,
               ...isMyself ? {
                 cursor: "pointer",
                 "&:hover": {
@@ -80,7 +82,7 @@ export default function UserBasicInfo({
         /* @__PURE__ */ jsxs(
           Typography,
           {
-            variant: "h5",
+            variant: "h6",
             sx: {
               fontWeight: "bold",
               display: "flex",
@@ -102,7 +104,7 @@ export default function UserBasicInfo({
                     fontSize: "12px",
                     color: colors.textBase,
                     borderColor: colors.strokeBorderStrong,
-                    backgroundColor: "white",
+                    backgroundColor: "transparent",
                     textTransform: "capitalize",
                     pr: 1,
                     pl: 0.5,
@@ -122,7 +124,7 @@ export default function UserBasicInfo({
             ]
           }
         ),
-        /* @__PURE__ */ jsx(DID, { did: user.did, copyable: false }),
+        /* @__PURE__ */ jsx(DID, { did: user.did, copyable: false, compact: !showFullDid, responsive: !showFullDid }),
         isMyself ? /* @__PURE__ */ jsx(
           IconButton,
           {
@@ -132,14 +134,7 @@ export default function UserBasicInfo({
               backgroundColor: "white",
               border: `1px solid ${colors.strokeBorderBase}`,
               position: "absolute",
-              bottom: {
-                xs: "unset",
-                md: 0
-              },
-              top: {
-                xs: 0,
-                md: "unset"
-              },
+              top: 0,
               right: 0
             },
             disableFocusRipple: true,

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

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

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

@@ -1,6 +1,6 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useContext } from "react";
-import { Box, CircularProgress, Paper, Typography } from "@mui/material";
+import { Box, CircularProgress, Typography } from "@mui/material";
 import { useCreation, useMemoizedFn, useMount, useRequest } from "ahooks";
 import { SessionContext } from "@arcblock/did-connect/lib/Session";
 import Tabs from "@arcblock/ux/lib/Tabs";
@@ -147,7 +147,6 @@ export default function UserCenter({
           settings: {
             userCenterTabs
           },
-          sx: { mt: -2 },
           onSave: async () => {
             await privacyState.runAsync();
             return privacyState.data;
@@ -175,106 +174,148 @@ export default function UserCenter({
       };
       return /* @__PURE__ */ jsx(ErrorFallback, { error: formatError });
     }
-    return /* @__PURE__ */ jsxs(
-      Box,
-      {
-        sx: {
-          maxWidth: 880,
-          margin: "0 auto",
-          p: 3,
-          display: "flex",
-          gap: 2.5,
-          flexDirection: "column"
-        },
-        children: [
-          /* @__PURE__ */ jsx(
-            UserBasicInfo,
-            {
-              isMyself,
-              switchPassport: session.switchPassport,
-              switchProfile: session.switchProfile,
-              openSettings,
-              user: userState.data
-            }
-          ),
-          userCenterTabs.length > 0 && currentTab ? /* @__PURE__ */ jsxs(
-            Box,
-            {
-              sx: {
-                gridArea: "tabs",
-                overflow: "auto",
-                padding: "1px"
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(Box, { sx: { flex: 1 }, children: [
+        userState?.data?.fullName ? /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: "h4",
+            sx: {
+              py: 1.5,
+              fontWeight: 700,
+              display: {
+                xs: "none",
+                md: "block"
+              }
+            },
+            children: userState.data.fullName
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(
+          UserBasicInfo,
+          {
+            isMyself,
+            switchPassport: session.switchPassport,
+            switchProfile: session.switchProfile,
+            openSettings,
+            user: userState.data,
+            showFullDid: false,
+            sx: {
+              display: {
+                md: "none",
+                xs: "block"
               },
-              children: [
-                /* @__PURE__ */ jsx(Tabs, { variant: "card", tabs: userCenterTabs, current: currentTab, onChange: handleChangeTab }),
-                !privacyState.data || privacyState.loading ? /* @__PURE__ */ jsx(
-                  Box,
-                  {
-                    sx: {
-                      height: "100%",
-                      minWidth: "160px",
-                      minHeight: "160px",
-                      display: "flex",
-                      justifyContent: "center",
-                      alignItems: "center"
-                    },
-                    children: /* @__PURE__ */ jsx(CircularProgress, { sx: { color: colors.primary100 } })
-                  }
-                ) : /* @__PURE__ */ jsx(Fragment, { children: currentActiveTab?.protected && !isMyself ? /* @__PURE__ */ jsx(Paper, { variant: "outlined", sx: { mt: 2, borderRadius: 2, p: 2 }, children: /* @__PURE__ */ jsx(Empty, { children: t("underProtected") }) }) : /* @__PURE__ */ jsx(Fragment, { children: children && /* @__PURE__ */ jsx(
-                  Paper,
-                  {
-                    ...contentProps,
-                    variant: "outlined",
-                    sx: { mt: 2, borderRadius: 2, p: 2, ...contentProps?.sx },
-                    children
-                  }
-                ) }) })
-              ]
+              mb: 1.5
             }
-          ) : null,
-          !isMyself && userCenterTabs.length === 0 ? /* @__PURE__ */ jsx(
-            Box,
-            {
-              sx: {
-                gridArea: "tabs",
-                overflow: "auto",
-                padding: "1px"
-              },
-              children: /* @__PURE__ */ jsx(
-                Paper,
+          }
+        ),
+        userCenterTabs.length > 0 && currentTab ? /* @__PURE__ */ jsxs(
+          Box,
+          {
+            sx: {
+              overflow: "auto",
+              padding: "1px"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                Tabs,
                 {
-                  variant: "outlined",
-                  sx: {
-                    borderRadius: 2,
-                    p: 2
-                  },
-                  children: /* @__PURE__ */ jsx(Empty, { children: t("emptyContent") })
+                  variant: "line",
+                  tabs: userCenterTabs,
+                  current: currentTab,
+                  onChange: handleChangeTab,
+                  sx: { mb: 1.5 }
                 }
-              )
-            }
-          ) : null,
-          isMyself ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsxs(Box, { children: [
-              /* @__PURE__ */ jsx(Typography, { variant: "h6", sx: { fontWeight: 600, mb: 1.5 }, children: t("passport") }),
-              /* @__PURE__ */ jsx(Passport, { user: userState.data })
-            ] }),
-            /* @__PURE__ */ jsxs(Box, { children: [
-              /* @__PURE__ */ jsx(Typography, { variant: "h6", sx: { fontWeight: 600, mb: 1.5 }, children: t("userInfo") }),
-              /* @__PURE__ */ jsx(
-                UserInfo,
+              ),
+              !privacyState.data || privacyState.loading ? /* @__PURE__ */ jsx(
+                Box,
                 {
-                  user: userState.data,
                   sx: {
-                    padding: 3,
-                    borderRadius: 3
+                    height: "100%",
+                    minWidth: "160px",
+                    minHeight: "160px",
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center"
+                  },
+                  children: /* @__PURE__ */ jsx(CircularProgress, { sx: { color: colors.primary100 } })
+                }
+              ) : /* @__PURE__ */ jsx(Fragment, { children: currentActiveTab?.protected && !isMyself ? /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Empty, { children: t("underProtected") }) }) : /* @__PURE__ */ jsx(Fragment, { children: children && /* @__PURE__ */ jsx(Box, { ...contentProps, children }) }) })
+            ]
+          }
+        ) : null,
+        userCenterTabs.length === 0 ? /* @__PURE__ */ jsx(
+          Box,
+          {
+            sx: {
+              display: {
+                xs: isMyself ? "none" : "block",
+                md: "block"
+              },
+              py: 3
+            },
+            children: /* @__PURE__ */ jsx(Empty, { children: t("emptyContent") })
+          }
+        ) : null
+      ] }),
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          sx: {
+            display: {
+              xs: "none",
+              md: "block"
+            },
+            width: "1px",
+            my: -3,
+            backgroundColor: colors.strokeSep
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        Box,
+        {
+          sx: {
+            width: {
+              sx: "100%",
+              md: 400
+            },
+            maxWidth: "100%",
+            display: "flex",
+            flexDirection: "column",
+            gap: 2.5
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              UserBasicInfo,
+              {
+                isMyself,
+                switchPassport: session.switchPassport,
+                switchProfile: session.switchProfile,
+                openSettings,
+                user: userState.data,
+                sx: {
+                  display: {
+                    xs: "none",
+                    md: "block"
                   }
                 }
-              )
-            ] })
-          ] }) : null
-        ]
-      }
-    );
+              }
+            ),
+            isMyself ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs(Box, { children: [
+                /* @__PURE__ */ jsx(Typography, { sx: { fontWeight: 600, mb: 1.5 }, children: t("myInfo") }),
+                /* @__PURE__ */ jsx(UserInfo, { user: userState.data })
+              ] }),
+              /* @__PURE__ */ jsxs(Box, { children: [
+                /* @__PURE__ */ jsx(Typography, { sx: { fontWeight: 600, mb: 1.5 }, children: t("passport") }),
+                /* @__PURE__ */ jsx(Passport, { user: userState.data })
+              ] })
+            ] }) : null
+          ]
+        }
+      )
+    ] });
   }, [userState, userCenterTabs]);
   if (!disableAutoRedirect && !currentTab && formattedBlocklet?.navigation?.userCenter?.length > 0) {
     window.location.replace(formattedBlocklet?.navigation?.userCenter[0]?.link);
@@ -290,12 +331,31 @@ export default function UserCenter({
         flexDirection: "column"
       },
       children: [
-        /* @__PURE__ */ jsx(Header, { ...headerProps }),
-        /* @__PURE__ */ jsxs(Box, { flex: 1, children: [
-          content,
-          confirmHolder
-        ] }),
-        hideFooter ? null : /* @__PURE__ */ jsx(Footer, { ...footerProps })
+        /* @__PURE__ */ jsx(Header, { bordered: true, ...headerProps }),
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            flex: 1,
+            sx: {
+              width: "100%",
+              maxWidth: 1200,
+              margin: "0 auto",
+              p: 3,
+              display: "flex",
+              alignItems: "stretch",
+              flexDirection: {
+                xs: "column",
+                md: "row"
+              },
+              gap: 2.5
+            },
+            children: [
+              content,
+              confirmHolder
+            ]
+          }
+        ),
+        hideFooter ? null : /* @__PURE__ */ jsx(Footer, { bordered: true, ...footerProps })
       ]
     }
   );

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

@@ -7,35 +7,27 @@ export default function UserInfoItem({ data, ...rest }) {
     {
       ...rest,
       sx: {
-        display: "grid",
-        gridTemplateColumns: "auto 1fr",
-        gridTemplateAreas: `"icon title" ". content"`,
+        display: "flex",
         alignItems: "center",
-        rowGap: 0.75,
-        columnGap: 1,
+        justifyContent: "space-between",
         ...rest.sx
       },
       children: [
-        /* @__PURE__ */ jsx(
-          Box,
-          {
-            sx: {
-              gridArea: "icon",
-              display: "flex",
-              alignItems: "center"
-            },
-            children: data.icon
-          }
-        ),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs(
           Typography,
           {
             sx: {
+              display: "flex",
+              alignItems: "center",
               color: colors.textBase,
-              gridArea: "title",
-              fontSize: "14px"
+              fontSize: "14px",
+              gap: 1,
+              fontWeight: 500
             },
-            children: data.title
+            children: [
+              data.icon,
+              data.title
+            ]
           }
         ),
         /* @__PURE__ */ jsx(
@@ -44,7 +36,6 @@ export default function UserInfoItem({ data, ...rest }) {
             sx: {
               color: colors.textSubtitle,
               whiteSpace: "pre-wrap",
-              gridArea: "content",
               fontSize: "14px"
             },
             children: data.content

package/es/UserCenter/components/user-info.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import type { PaperProps } from '@mui/material';
+import type { BoxProps } from '@mui/material';
 import type { User } from '../../@types';
 export default function UserInfo({ user, ...rest }: {
     user: User;
-} & PaperProps): import("react").JSX.Element;
+} & BoxProps): import("react").JSX.Element;

package/es/UserCenter/components/user-info.js

@@ -1,11 +1,12 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Paper } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+import { Box } from "@mui/material";
 import { Icon } from "@iconify/react";
 import { useMemoizedFn, useCreation } from "ahooks";
 import MailOutlineRoundedIcon from "@iconify-icons/material-symbols/mail-outline-rounded";
 import ScheduleOutlineRoundedIcon from "@iconify-icons/material-symbols/schedule-outline-rounded";
 import MoreTimeRoundedIcon from "@iconify-icons/material-symbols/more-time-rounded";
 import CaptivePortalRoundedIcon from "@iconify-icons/material-symbols/captive-portal-rounded";
+import SettingsInputAntennaRoundedIcon from "@iconify-icons/material-symbols/settings-input-antenna-rounded";
 import RelativeTime from "@arcblock/ux/lib/RelativeTime";
 import { translate } from "@arcblock/ux/lib/Locale/util";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
@@ -34,12 +35,13 @@ export default function UserInfo({
   });
   userInfoListData.push({
     icon: /* @__PURE__ */ jsx(Icon, { fontSize: 16, icon: ScheduleOutlineRoundedIcon }),
-    title: t("lastLogin"),
-    content: /* @__PURE__ */ jsx(Fragment, { children: user?.lastLoginAt || user?.lastLoginIp ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      user?.lastLoginAt ? /* @__PURE__ */ jsx(RelativeTime, { locale, value: user?.lastLoginAt }) : null,
-      user?.lastLoginAt && user?.lastLoginIp ? /* @__PURE__ */ jsx("br", {}) : null,
-      user?.lastLoginIp
-    ] }) : t("unknown") })
+    title: t("lastLoginAt"),
+    content: user?.lastLoginAt ? /* @__PURE__ */ jsx(RelativeTime, { locale, value: user?.lastLoginAt, relativeRange: 3 * 86400 * 1e3 }) : t("unknown")
+  });
+  userInfoListData.push({
+    icon: /* @__PURE__ */ jsx(Icon, { fontSize: 16, icon: SettingsInputAntennaRoundedIcon }),
+    title: t("lastLoginIp"),
+    content: user?.lastLoginIp || t("unknown")
   });
   userInfoListData.push({
     icon: /* @__PURE__ */ jsx(Icon, { fontSize: 16, icon: MoreTimeRoundedIcon }),
@@ -52,18 +54,13 @@ export default function UserInfo({
     content: readableProvider
   });
   return /* @__PURE__ */ jsx(
-    Paper,
+    Box,
     {
-      variant: "outlined",
       ...rest,
       sx: {
         display: "flex",
-        flexDirection: {
-          xs: "column",
-          md: "row"
-        },
-        alignItems: "flex-start",
-        gap: 3,
+        flexDirection: "column",
+        gap: 1.5,
         ...rest?.sx
       },
       children: userInfoListData.map((item) => /* @__PURE__ */ jsx(UserInfoItem, { data: item, sx: { flex: 1 } }, item.title))