@blocklet/ui-react 2.10.90 → 2.11.0

package/lib/@types/index.d.ts

@@ -62,6 +62,7 @@ export type UserCenterTab = {
     url: string;
     protected: boolean;
     icon?: string;
+    isPrivate?: boolean;
 };
 export type Session = {
     loading: boolean;

package/lib/UserCenter/components/config-profile.js

@@ -61,7 +61,7 @@ export default function ConfigProfile({ user, onSave }) {
               }
             }
           ),
-          /* @__PURE__ */ jsx(Select, { fullWidth: true, value: currentState.locale, onChange: handleChange, size: "small", children: (window.blocklet.languages || languages).map((x) => /* @__PURE__ */ jsx(MenuItem, { value: x.code, children: x.name })) })
+          /* @__PURE__ */ jsx(Select, { fullWidth: true, value: currentState.locale, onChange: handleChange, size: "small", children: (window.blocklet.languages || languages).map((x) => /* @__PURE__ */ jsx(MenuItem, { value: x.code, children: x.name }, x.code)) })
         ] })
       ]
     }

package/lib/UserCenter/components/notification.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Alert, Box, CircularProgress, Divider, Stack, Typography } from "@mui/material";
+import { Alert, Box, CircularProgress, Stack, Typography } from "@mui/material";
 import { useCreation, useMemoizedFn, useReactive, useRequest } from "ahooks";
 import { Icon } from "@iconify/react";
 import AddRoundedIcon from "@iconify-icons/material-symbols/add-rounded";
@@ -201,7 +201,6 @@ export default function Notification({ user }) {
         ]
       }
     ),
-    /* @__PURE__ */ jsx(Divider, {}),
     /* @__PURE__ */ jsxs(Stack, { spacing: 1.5, useFlexGap: true, direction: "column", alignItems: "start", children: [
       webhooks.map((item, index) => /* @__PURE__ */ jsx(
         WebhookItem,

package/lib/UserCenter/components/privacy.d.ts

@@ -2,6 +2,7 @@ type PrivacyConfig = {
     key: string;
     name: string;
     value: boolean;
+    isPrivate?: boolean;
 };
 export default function Privacy({ configList, onSave, }: {
     configList: PrivacyConfig[];

package/lib/UserCenter/components/privacy.js

@@ -73,6 +73,9 @@ export default function Privacy({
         }
       },
       children: dataList.map((item) => {
+        if (item.isPrivate) {
+          return null;
+        }
         return /* @__PURE__ */ jsx(
           Switch,
           {

package/lib/UserCenter/components/settings.d.ts

@@ -6,4 +6,4 @@ export default function Settings({ user, settings, onSave, ...rest }: {
     settings: {
         userCenterTabs: UserCenterTab[];
     };
-} & BoxProps): any;
+} & BoxProps): import("react").JSX.Element;

package/lib/UserCenter/components/settings.js

@@ -1,9 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import Tabs from "@arcblock/ux/lib/Tabs";
-import { Box } from "@mui/material";
-import { useCreation, useMemoizedFn, useReactive } from "ahooks";
+import { Box, Divider, Typography } from "@mui/material";
+import { useCreation, useMemoizedFn } from "ahooks";
 import { translate } from "@arcblock/ux/lib/Locale/util";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import colors from "@arcblock/ux/lib/Colors/themes/temp";
 import { ConfigUserSpaceProvider } from "../../contexts/config-user-space.js";
 import { translations } from "../libs/locales.js";
 import Notification from "./notification.js";
@@ -28,7 +28,8 @@ export default function Settings({
       return {
         key: item.value,
         name: item.label,
-        value: item.protected
+        value: item.protected,
+        isPrivate: item.isPrivate
       };
     });
   }, [settings?.userCenterTabs]);
@@ -69,16 +70,7 @@ export default function Settings({
       }
     ].filter(Boolean);
   }, [user, privacyConfigList]);
-  const currentState = useReactive({
-    tab: tabs[0].value
-  });
-  const currentTab = useCreation(() => {
-    return tabs.find((x) => x.value === currentState.tab);
-  }, [currentState.tab, tabs]);
-  const handleChangeTab = useMemoizedFn((value) => {
-    currentState.tab = value;
-  });
-  return currentTab && /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     Box,
     {
       ...rest,
@@ -89,10 +81,20 @@ export default function Settings({
         },
         maxWidth: "100%"
       },
-      children: [
-        /* @__PURE__ */ jsx(Tabs, { variant: "card", tabs, current: currentTab.value, onChange: handleChangeTab }),
-        /* @__PURE__ */ jsx(Box, { mt: 2.5, children: currentTab.content })
-      ]
+      children: tabs.map((tab, index) => /* @__PURE__ */ jsxs(Box, { children: [
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            sx: {
+              color: colors.foregroundsFgBase,
+              fontWeight: 600
+            },
+            children: tab.label
+          }
+        ),
+        /* @__PURE__ */ jsx(Box, { mt: 2.5, children: tab.content }),
+        index < tabs.length - 1 ? /* @__PURE__ */ jsx(Divider, { sx: { mt: 2.5, mb: 2.5 } }) : null
+      ] }, tab.value))
     }
   );
 }

package/lib/UserCenter/components/third-party-login/index.js

@@ -1,10 +1,11 @@
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx } from "react/jsx-runtime";
 import { useContext, useState } from "react";
 import { Box } from "@mui/material";
 import { useAsyncEffect, useCreation } from "ahooks";
 import { getConnectedAccounts, getSourceProvider } from "@arcblock/ux/lib/SessionUser/libs/utils";
 import { LOGIN_PROVIDER } from "@arcblock/ux/lib/Util/constant";
 import { SessionContext } from "@arcblock/did-connect/lib/Session";
+import Empty from "@arcblock/ux/lib/Empty";
 import ThirdPartyItem from "./third-party-item.js";
 export default function ThirdPartyLogin({ user }) {
   const { session } = useContext(SessionContext);
@@ -102,9 +103,9 @@ export default function ThirdPartyLogin({ user }) {
         display: "grid",
         gridTemplateColumns: "1fr min-content"
       },
-      children: normalizedAccounts.map((account) => {
+      children: !normalizedAccounts.length ? /* @__PURE__ */ jsx(Empty, {}) : /* @__PURE__ */ jsx(Fragment, { children: normalizedAccounts.map((account) => {
         return /* @__PURE__ */ jsx(ThirdPartyItem, { item: account }, account?.provider);
-      })
+      }) })
     }
   );
 }

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

@@ -1,5 +1,5 @@
 import type { BoxProps } from '@mui/material';
-export default function UserCenter({ children, notLoginContent, currentTab, contentProps, disableAutoRedirect, autoPopupSetting, hideFooter, headerProps, footerProps, userDid, stickySidebar, }: {
+export default function UserCenter({ children, notLoginContent, currentTab, contentProps, disableAutoRedirect, hideFooter, headerProps, footerProps, userDid, stickySidebar, }: {
     readonly children: any;
     readonly notLoginContent: any;
     readonly currentTab: string;

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

@@ -1,7 +1,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useContext } from "react";
-import { Box, CircularProgress, Typography } from "@mui/material";
-import { useCreation, useMemoizedFn, useMount, useRequest, useUpdateEffect } from "ahooks";
+import { Box, CircularProgress, Divider, Typography } from "@mui/material";
+import { useCreation, useMemoizedFn, useRequest } from "ahooks";
 import pWaitFor from "p-wait-for";
 import { SessionContext } from "@arcblock/did-connect/lib/Session";
 import Tabs from "@arcblock/ux/lib/Tabs";
@@ -14,11 +14,12 @@ import { translate } from "@arcblock/ux/lib/Locale/util";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import { ErrorFallback } from "@arcblock/ux/lib/ErrorBoundary";
 import cloneDeep from "lodash/cloneDeep";
-import { getQuery, withQuery } from "ufo";
+import { getQuery, withQuery, joinURL } from "ufo";
+import { PROFILE_URL } from "@arcblock/ux/lib/Util/constant";
 import Footer from "../../Footer/index.js";
 import Header from "../../Header/index.js";
 import { translations } from "../libs/locales.js";
-import { UserInfo, UserBasicInfo } from "./user-info/index.js";
+import { UserInfo, UserBasicInfo, SwitchRole } from "./user-info/index.js";
 import { formatBlockletInfo, getLocalizedNavigation } from "../../blocklets.js";
 import Passport from "./passport.js";
 import Settings from "./settings.js";
@@ -30,7 +31,6 @@ export default function UserCenter({
   currentTab,
   contentProps = {},
   disableAutoRedirect = false,
-  autoPopupSetting = false,
   hideFooter = false,
   headerProps = {},
   footerProps = {},
@@ -92,7 +92,7 @@ export default function UserCenter({
       loadingDelay: 300
     }
   );
-  const { confirmHolder, confirmApi } = useConfirm({
+  const { confirmHolder } = useConfirm({
     fullScreen: isMobile,
     sx: {
       ".MuiDialog-paper": {
@@ -122,20 +122,40 @@ export default function UserCenter({
       return blocklet;
     }
   }, []);
+  const defaultTabs = useCreation(() => {
+    const tabs = [
+      {
+        label: t("common.profile"),
+        protected: false,
+        url: joinURL(PROFILE_URL, "/profile")
+      }
+    ];
+    if (isMyself) {
+      tabs.push({
+        label: t("common.setting"),
+        protected: true,
+        isPrivate: true,
+        url: joinURL(PROFILE_URL, "/settings")
+      });
+    }
+    return tabs;
+  }, [isMyself]);
   const userCenterTabs = useCreation(() => {
     const menus = formattedBlocklet?.navigation?.userCenter || [];
     const localizedMenus = getLocalizedNavigation(menus, locale) || [];
-    return localizedMenus.map((x) => {
-      const value = x._rawLink ?? x.link;
+    const allMenus = localizedMenus.concat(defaultTabs);
+    return allMenus.map((x) => {
+      const value = x._rawLink ?? x.link ?? x.url;
       return {
         value,
-        label: x.title,
-        url: x.link,
-        protected: privacyState?.data?.[value] ?? false
+        label: x.title || x.label,
+        url: x.link || x.url,
+        protected: privacyState?.data?.[value] ?? false,
+        isPrivate: x.isPrivate
         // icon: x.icon,
       };
-    });
-  }, [formattedBlocklet, userState.data, privacyState?.data, locale]);
+    }).filter((x) => isMyself || !x.isPrivate);
+  }, [formattedBlocklet, userState.data, privacyState?.data, locale, defaultTabs, isMyself]);
   const currentActiveTab = useCreation(() => {
     return userCenterTabs.find((x) => x.value === currentTab);
   }, [userCenterTabs]);
@@ -166,25 +186,61 @@ export default function UserCenter({
       }
     );
   }, [userState.data, userCenterTabs, privacyState.data, privacyState.runAsync]);
-  const openSettings = useMemoizedFn(() => {
-    confirmApi.open({
-      title: t("settings"),
-      content: settingContent,
-      showCancelButton: false,
-      confirmButtonText: t("done"),
-      onConfirm: confirmApi.close
-    });
-  });
-  useUpdateEffect(() => {
-    confirmApi.update({
-      content: settingContent
-    });
-  }, [settingContent]);
-  useMount(() => {
-    if (autoPopupSetting) {
-      openSettings();
+  const isSettingTab = useCreation(() => {
+    return currentActiveTab && currentActiveTab?.value === joinURL(PROFILE_URL, "/settings");
+  }, [currentActiveTab]);
+  const isProfileTab = useCreation(() => {
+    return currentActiveTab && currentActiveTab?.value === joinURL(PROFILE_URL, "/profile");
+  }, [currentActiveTab]);
+  const renderDefaultTab = useCreation(() => {
+    if (isProfileTab) {
+      return /* @__PURE__ */ jsx(
+        Box,
+        {
+          sx: {
+            width: {
+              sx: "100%",
+              md: 420
+            },
+            maxWidth: "100%",
+            position: "relative"
+          },
+          children: /* @__PURE__ */ jsxs(
+            Box,
+            {
+              sx: {
+                display: "flex",
+                flexDirection: "column",
+                gap: 2.5,
+                position: {
+                  xs: "static",
+                  md: stickySidebar ? "sticky" : "static"
+                },
+                top: (theme) => stickySidebar ? theme.spacing(3) : "unset"
+              },
+              children: [
+                /* @__PURE__ */ jsxs(Box, { children: [
+                  /* @__PURE__ */ jsxs(Box, { display: "flex", justifyContent: "space-between", children: [
+                    /* @__PURE__ */ jsx(Typography, { sx: { fontWeight: 600, mb: 1.5 }, children: isMyself ? t("myInfo") : t("hisInfo") }),
+                    isMyself ? /* @__PURE__ */ jsx(SwitchRole, { user: userState.data, switchPassport: session.switchPassport }) : null
+                  ] }),
+                  /* @__PURE__ */ jsx(UserInfo, { user: userState.data, isMySelf: isMyself })
+                ] }),
+                isMyself ? /* @__PURE__ */ jsxs(Box, { children: [
+                  /* @__PURE__ */ jsx(Typography, { sx: { fontWeight: 600, mb: 1.5 }, children: t("passport") }),
+                  /* @__PURE__ */ jsx(Passport, { user: userState.data })
+                ] }) : null
+              ]
+            }
+          )
+        }
+      );
     }
-  });
+    if (isSettingTab && isMyself) {
+      return settingContent;
+    }
+    return null;
+  }, [isSettingTab, isProfileTab, userState, isMyself, stickySidebar, settingContent]);
   const content = useCreation(() => {
     if (userState.loading || session.loading) {
       return null;
@@ -221,185 +277,127 @@ export default function UserCenter({
         }
       ) });
     }
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs(
-        Box,
-        {
-          sx: [
-            {
-              flex: {
-                xs: "revert",
-                md: 1
-              },
-              overflow: "hidden"
-            }
-          ],
-          children: [
-            userState?.data?.fullName ? /* @__PURE__ */ jsx(
-              Typography,
-              {
-                variant: "h4",
-                sx: {
-                  py: 1.5,
-                  fontSize: "18px !important",
-                  fontWeight: 700,
-                  lineHeight: 1.5,
-                  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"
-                  },
-                  mb: 1.5
-                }
-              }
-            ),
-            userCenterTabs.length > 0 && currentTab ? /* @__PURE__ */ jsxs(
-              Box,
-              {
-                sx: {
-                  overflow: "auto",
-                  padding: "1px"
-                },
-                children: [
-                  /* @__PURE__ */ jsx(
-                    Tabs,
-                    {
-                      variant: "line",
-                      tabs: userCenterTabs,
-                      current: currentTab,
-                      onChange: handleChangeTab,
-                      sx: { mb: 1.5 }
-                    }
-                  ),
-                  !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 } })
-                    }
-                  ) : (
-                    // eslint-disable-next-line react/jsx-no-useless-fragment
-                    /* @__PURE__ */ jsx(Fragment, { children: currentActiveTab?.protected && !isMyself ? /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Empty, { children: t("underProtected") }) }) : (
-                      // eslint-disable-next-line react/jsx-no-useless-fragment
-                      /* @__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"
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        sx: [
+          {
+            flex: {
+              xs: "revert",
+              md: 1
             },
-            width: "1px",
-            my: -3,
-            backgroundColor: colors.strokeSep
+            overflow: "hidden"
           }
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        Box,
-        {
-          sx: {
-            width: {
-              sx: "100%",
-              md: 420
-            },
-            maxWidth: "100%",
-            position: "relative"
-          },
-          children: /* @__PURE__ */ jsxs(
-            Box,
+        ],
+        children: [
+          /* @__PURE__ */ jsx(
+            UserBasicInfo,
             {
+              isMyself,
+              switchPassport: session.switchPassport,
+              switchProfile: session.switchProfile,
+              user: userState.data,
+              showFullDid: false,
               sx: {
                 display: "flex",
-                flexDirection: "column",
-                gap: 2.5,
-                position: {
-                  xs: "static",
-                  md: stickySidebar ? "sticky" : "static"
-                },
-                top: (theme) => stickySidebar ? theme.spacing(3) : "unset"
+                gap: 3,
+                mt: 2
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(Divider, { sx: { mt: 3, mb: 3 } }),
+          userCenterTabs.length > 0 && currentTab ? /* @__PURE__ */ jsxs(
+            Box,
+            {
+              display: isMobile ? "block" : "flex",
+              gap: 2,
+              sx: {
+                overflow: "auto",
+                padding: "1px"
               },
               children: [
                 /* @__PURE__ */ jsx(
-                  UserBasicInfo,
+                  Tabs,
                   {
-                    isMyself,
-                    switchPassport: session.switchPassport,
-                    switchProfile: session.switchProfile,
-                    openSettings,
-                    user: userState.data,
+                    orientation: isMobile ? "horizontal" : "vertical",
+                    variant: "line",
+                    tabs: userCenterTabs,
+                    current: currentTab,
+                    onChange: handleChangeTab,
                     sx: {
-                      display: {
-                        xs: "none",
-                        md: "block"
+                      width: isMobile ? "100%" : 180,
+                      ".MuiTabs-flexContainer": {
+                        gap: 1.5,
+                        ".MuiButtonBase-root": {
+                          fontSize: 16
+                        },
+                        ".MuiTab-root": {
+                          display: "block",
+                          textAlign: "left"
+                        }
                       }
                     }
                   }
                 ),
-                /* @__PURE__ */ jsxs(Box, { children: [
-                  /* @__PURE__ */ jsx(Typography, { sx: { fontWeight: 600, mb: 1.5 }, children: isMyself ? t("myInfo") : t("hisInfo") }),
-                  /* @__PURE__ */ jsx(UserInfo, { user: userState.data, isMySelf: isMyself })
-                ] }),
-                isMyself ? /* @__PURE__ */ jsxs(Box, { children: [
-                  /* @__PURE__ */ jsx(Typography, { sx: { fontWeight: 600, mb: 1.5 }, children: t("passport") }),
-                  /* @__PURE__ */ jsx(Passport, { user: userState.data })
-                ] }) : null
+                !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 } })
+                  }
+                ) : (
+                  // eslint-disable-next-line react/jsx-no-useless-fragment
+                  /* @__PURE__ */ jsx(Box, { sx: { flex: 1 }, children: currentActiveTab?.protected && !isMyself ? /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Empty, { children: t("underProtected") }) }) : (
+                    // eslint-disable-next-line react/jsx-no-useless-fragment
+                    /* @__PURE__ */ jsx(Fragment, { children: children ? /* @__PURE__ */ jsx(Box, { ...contentProps, children }) : /* @__PURE__ */ jsx(Fragment, { children: renderDefaultTab }) })
+                  ) })
+                )
               ]
             }
-          )
-        }
-      )
-    ] });
-  }, [userState, userCenterTabs, isMyself, currentActiveTab, privacyState, currentTab, stickySidebar]);
-  if (!disableAutoRedirect && !currentTab && formattedBlocklet?.navigation?.userCenter?.length > 0) {
+          ) : 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
+        ]
+      }
+    );
+  }, [
+    userState,
+    userCenterTabs,
+    isMyself,
+    currentActiveTab,
+    privacyState,
+    currentTab,
+    stickySidebar,
+    renderDefaultTab
+  ]);
+  const isPrivateActive = useCreation(() => {
+    if (isMyself) {
+      return false;
+    }
+    return currentActiveTab?.isPrivate;
+  }, [isMyself, currentActiveTab]);
+  if (!disableAutoRedirect && !currentTab && formattedBlocklet?.navigation?.userCenter?.length > 0 || !currentActiveTab || isPrivateActive) {
     const firstUserCenterUrl = formattedBlocklet?.navigation?.userCenter[0]?.link;
-    if (firstUserCenterUrl) {
+    const firstTab = userCenterTabs.find((x) => x.value === firstUserCenterUrl);
+    if (firstUserCenterUrl && !firstTab?.isPrivate) {
       window.location.replace(
         withQuery(firstUserCenterUrl, {
           did: isMyself ? void 0 : currentDid
@@ -412,13 +410,12 @@ export default function UserCenter({
     Box,
     {
       sx: {
-        backgroundColor: colors.backgroundsBgSubtitle,
         minHeight: "100vh",
         display: "flex",
         flexDirection: "column"
       },
       children: [
-        /* @__PURE__ */ jsx(Header, { bordered: true, ...headerProps }),
+        /* @__PURE__ */ jsx(Header, { bordered: true, ...headerProps, maxWidth: "100%" }),
         /* @__PURE__ */ jsxs(
           Box,
           {

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

@@ -1,3 +1,4 @@
 export { default as UserBasicInfo } from './user-basic-info';
 export { default as UserInfoItem } from './user-info-item';
 export { default as UserInfo } from './user-info';
+export { default as SwitchRole } from './switch-role';

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

@@ -1,3 +1,4 @@
 export { default as UserBasicInfo } from "./user-basic-info.js";
 export { default as UserInfoItem } from "./user-info-item.js";
 export { default as UserInfo } from "./user-info.js";
+export { default as SwitchRole } from "./switch-role.js";

package/lib/UserCenter/components/user-info/switch-role.d.ts

@@ -0,0 +1,7 @@
+import type { User } from '../../../@types';
+declare function SwitchRole({ user, switchPassport }: {
+    user: User;
+    switchPassport: () => void;
+}): import("react").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof SwitchRole>;
+export default _default;