@blocklet/discuss-kit-ux 1.6.224 → 1.6.225

package/dist/{index-BYwPg7XF.mjs → index-7-SJaHOi.mjs}

@@ -10,7 +10,7 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useTheme, ThemeProvider, styled } from "@mui/material/styles";
 import { create as create$1, styled as styled$1 } from "@arcblock/ux/lib/Theme";
 import { useEffect, useRef, lazy, useState, createElement, useContext, useMemo, isValidElement, Suspense, createContext, Fragment as Fragment$1, forwardRef, useCallback } from "react";
-import Box from "@mui/material/Box";
+import { Box, useTheme as useTheme$1, useMediaQuery, Tooltip as Tooltip$1, Chip as Chip$1, alpha, ClickAwayListener, Dialog as Dialog$1, DialogTitle, DialogContent, DialogActions, DialogContentText, Button as Button$1, Divider, Skeleton, IconButton as IconButton$2, InputBase, tooltipClasses as tooltipClasses$1, Autocomplete, Typography as Typography$1, TextField as TextField$1, InputAdornment, Backdrop, Badge as Badge$1, Paper, ToggleButtonGroup, ToggleButton } from "@mui/material";
 import isNil from "lodash/isNil";
 import { useEditorConfig, EditorConfigProvider } from "@blocklet/editor/lib/config";
 import { $getRoot, $createParagraphNode, $createTextNode, KEY_ENTER_COMMAND, COMMAND_PRIORITY_LOW, $getSelection } from "lexical";
@@ -20,6 +20,7 @@ import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext
 import { ImageNode } from "@blocklet/editor/lib/main/nodes/ImageNode";
 import { VideoNode } from "@blocklet/editor/lib/ext/VideoPlugin/VideoNode";
 import { useSize, useInViewport, useSetState, useRequest, useGetState, useReactive } from "ahooks";
+import Box$1 from "@mui/material/Box";
 import LoadingButton from "@mui/lab/LoadingButton";
 import { Send, Save, ChatBubbleOutlineOutlined, MoreVert, NavigateNext, DeleteOutlineOutlined, ContentCopy, ArrowUpward, ArrowDownward, ArrowBackIos, Add, BorderColorOutlined } from "@mui/icons-material";
 import { LocaleContext, useLocaleContext } from "@arcblock/ux/lib/Locale/context";
@@ -45,7 +46,6 @@ import BrokenImageIcon from "@mui/icons-material/BrokenImage";
 import { Icon } from "@iconify/react";
 import Empty$3 from "@arcblock/ux/lib/Empty";
 import { SessionContext } from "@arcblock/did-connect/lib/Session";
-import { useTheme as useTheme$1, useMediaQuery, Box as Box$1, Tooltip as Tooltip$1, Chip as Chip$1, alpha, ClickAwayListener, Dialog as Dialog$1, DialogTitle, DialogContent, DialogActions, DialogContentText, Button as Button$1, Divider, Skeleton, IconButton as IconButton$2, InputBase, tooltipClasses as tooltipClasses$1, Autocomplete, Typography as Typography$1, TextField as TextField$1, InputAdornment, Backdrop, Badge as Badge$1, Paper, ToggleButtonGroup, ToggleButton } from "@mui/material";
 import NotificationsActiveOutlinedIcon from "@mui/icons-material/NotificationsActiveOutlined";
 import CheckboxPlugin from "@blocklet/editor/lib/ext/CheckboxPlugin";
 import DIDAddress from "@arcblock/did-connect/lib/Address";
@@ -691,7 +691,7 @@ function CommentInput({
       render: ({ submit, content, loading, error, inSmallView }) => {
         return /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsxs(
-            Box,
+            Box$1,
             {
               position: "absolute",
               bottom: 0,
@@ -703,7 +703,7 @@ function CommentInput({
               alignItems: "end",
               children: [
                 /* @__PURE__ */ jsxs(
-                  Box,
+                  Box$1,
                   {
                     component: "a",
                     href: "https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax",
@@ -718,12 +718,12 @@ function CommentInput({
                       "&:hover": { color: "text.secondary" }
                     },
                     children: [
-                      /* @__PURE__ */ jsx(Box, { component: "span", sx: { display: "inline-flex", alignItems: "center", mr: 0.5, lineHeight: 1 }, children: /* @__PURE__ */ jsx(mdiLanguageMarkdown, { style: { fontSize: 16 } }) }),
+                      /* @__PURE__ */ jsx(Box$1, { component: "span", sx: { display: "inline-flex", alignItems: "center", mr: 0.5, lineHeight: 1 }, children: /* @__PURE__ */ jsx(mdiLanguageMarkdown, { style: { fontSize: 16 } }) }),
                       /* @__PURE__ */ jsx("span", { children: "Styling with Markdown is supported" })
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsx(Box, { display: "flex", gap: 1, alignItems: "center", children: /* @__PURE__ */ jsx(
+                /* @__PURE__ */ jsx(Box$1, { display: "flex", gap: 1, alignItems: "center", children: /* @__PURE__ */ jsx(
                   LoadingButton,
                   {
                     disabled: isBoolean(disabledSend) ? disabledSend : !content,
@@ -735,9 +735,9 @@ function CommentInput({
                     title: "⌘ Enter",
                     onClick: submit,
                     className: "editor-submit-button",
-                    children: /* @__PURE__ */ jsxs(Box, { component: "span", sx: { display: "inline-flex", gap: 0.5, fontSize: 12 }, children: [
+                    children: /* @__PURE__ */ jsxs(Box$1, { component: "span", sx: { display: "inline-flex", gap: 0.5, fontSize: 12 }, children: [
                       /* @__PURE__ */ jsx("span", { children: sendText || t("sendComment") }),
-                      /* @__PURE__ */ jsx(Box, { component: "span", sx: { display: inSmallView ? "none" : "inline" }, children: "(⌘ Enter)" })
+                      /* @__PURE__ */ jsx(Box$1, { component: "span", sx: { display: inSmallView ? "none" : "inline" }, children: "(⌘ Enter)" })
                     ] })
                   }
                 ) })
@@ -759,7 +759,7 @@ function PostEdit({ content, send, onCancel, onSuccess, ...rest }) {
       send,
       onSuccess,
       ...rest,
-      render: ({ submit, content: content2, loading }) => /* @__PURE__ */ jsxs(Box, { display: "flex", justifyContent: "end", alignItems: "end", gap: 1, mt: 1, children: [
+      render: ({ submit, content: content2, loading }) => /* @__PURE__ */ jsxs(Box$1, { display: "flex", justifyContent: "end", alignItems: "end", gap: 1, mt: 1, children: [
         /* @__PURE__ */ jsx(Button, { variant: "text", color: "primary", onClick: onCancel, children: t("cancel") }),
         /* @__PURE__ */ jsx(
           LoadingButton,
@@ -779,7 +779,7 @@ function PostEdit({ content, send, onCancel, onSuccess, ...rest }) {
     }
   );
 }
-const Root$4 = styled$1(Box)`
+const Root$4 = styled$1(Box$1)`
   height: 100%;
   .be-editable {
     overflow-y: auto;
@@ -839,7 +839,7 @@ const Root$3 = styled$1(AvatarGroup)`
 `;
 function Avatars({ users, variant = "circle", ...restProps }) {
   return /* @__PURE__ */ jsx(Root$3, { sx: { ".avatars-item + .avatars-item .image": { boxShadow: "0 0 0 2px #fff" } }, max: 999, ...restProps, children: users.map((user, index) => {
-    return /* @__PURE__ */ jsx(Box, { className: "avatars-item", sx: { position: "relative", zIndex: index + 1 }, children: /* @__PURE__ */ jsx(Avatar, { did: user.did, src: user.avatar, size: 24, shape: "circle", variant }) }, index);
+    return /* @__PURE__ */ jsx(Box$1, { className: "avatars-item", sx: { position: "relative", zIndex: index + 1 }, children: /* @__PURE__ */ jsx(Avatar, { did: user.did, src: user.avatar, size: 24, shape: "circle", variant }) }, index);
   }) });
 }
 function RelativeTime({ value, ...rest }) {
@@ -849,7 +849,7 @@ function RelativeTime({ value, ...rest }) {
 function EmptyStatus() {
   const { t } = useLocaleContext();
   return /* @__PURE__ */ jsx(
-    Box,
+    Box$1,
     {
       sx: { height: "50vh", width: "100%" },
       display: "flex",
@@ -1112,7 +1112,7 @@ function ProfileCard({ user, click, ...rest }) {
     chatUrl = "";
   }
   return /* @__PURE__ */ jsxs(
-    Box,
+    Box$1,
     {
       sx: {
         boxSizing: "border-box",
@@ -1127,11 +1127,11 @@ function ProfileCard({ user, click, ...rest }) {
       },
       ...rest,
       children: [
-        /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 2, cursor: "pointer" }, onClick: click, children: [
+        /* @__PURE__ */ jsxs(Box$1, { sx: { display: "flex", alignItems: "center", gap: 2, cursor: "pointer" }, onClick: click, children: [
           /* @__PURE__ */ jsx(Avatar, { did: user.did, src: user.avatar, size: 44, shape: "circle", variant: "circle" }),
-          /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", flex: 1 }, children: [
+          /* @__PURE__ */ jsxs(Box$1, { sx: { display: "flex", flexDirection: "column", flex: 1 }, children: [
             /* @__PURE__ */ jsxs(
-              Box,
+              Box$1,
               {
                 component: "span",
                 sx: {
@@ -1141,9 +1141,9 @@ function ProfileCard({ user, click, ...rest }) {
                   lineHeight: 1.3
                 },
                 children: [
-                  /* @__PURE__ */ jsx(Box, { sx: { fontWeight: "bold" }, children: user.fullName }),
+                  /* @__PURE__ */ jsx(Box$1, { sx: { fontWeight: "bold" }, children: user.fullName }),
                   user.role && /* @__PURE__ */ jsx(
-                    Box,
+                    Box$1,
                     {
                       sx: {
                         px: 1.25,
@@ -1173,8 +1173,8 @@ function ProfileCard({ user, click, ...rest }) {
           ] })
         ] }),
         chatUrl && ((_b2 = session == null ? void 0 : session.user) == null ? void 0 : _b2.did) && ((_c = session == null ? void 0 : session.user) == null ? void 0 : _c.did) !== user.did && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Box, { sx: { my: 2, borderTop: "1px solid #eee" } }),
-          /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(Box$1, { sx: { my: 2, borderTop: "1px solid #eee" } }),
+          /* @__PURE__ */ jsx(Box$1, { children: /* @__PURE__ */ jsx(
             Button,
             {
               component: Link,
@@ -1240,7 +1240,7 @@ function AuthorInfo({
       return createdAt;
     }
     createdAt = typeof createdAt === "string" ? new Date(createdAt) : createdAt;
-    return /* @__PURE__ */ jsx(Box, { component: RelativeTime, sx: { color: "text.secondary" }, value: createdAt });
+    return /* @__PURE__ */ jsx(Box$1, { component: RelativeTime, sx: { color: "text.secondary" }, value: createdAt });
   };
   const click = (e) => {
     var _a2, _b2;
@@ -1263,7 +1263,7 @@ function AuthorInfo({
           onClose: () => setOpen(false),
           onOpen: () => setOpen(true),
           title: /* @__PURE__ */ jsx(ProfileCard, { user, click }),
-          children: /* @__PURE__ */ jsx(Box, { sx: { display: "flex", cursor: "pointer", width: avatarSize, height: avatarSize }, onClick: click, children: /* @__PURE__ */ jsx(
+          children: /* @__PURE__ */ jsx(Box$1, { sx: { display: "flex", cursor: "pointer", width: avatarSize, height: avatarSize }, onClick: click, children: /* @__PURE__ */ jsx(
             Avatar,
             {
               did: user == null ? void 0 : user.did,
@@ -1280,7 +1280,7 @@ function AuthorInfo({
         }
       );
     }
-    return /* @__PURE__ */ jsx(Box, { sx: { display: "flex", cursor: "pointer", width: avatarSize, height: avatarSize }, onClick: click, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(Box$1, { sx: { display: "flex", cursor: "pointer", width: avatarSize, height: avatarSize }, onClick: click, children: /* @__PURE__ */ jsx(
       Avatar,
       {
         did: user == null ? void 0 : user.did,
@@ -1298,17 +1298,17 @@ function AuthorInfo({
   const BadgeRender = /* @__PURE__ */ jsx(
     Badge,
     {
-      startComponent: !downMd && /* @__PURE__ */ jsx(Box, { component: "span", display: "inline-block", mx: 0.5 }, "dot"),
+      startComponent: !downMd && /* @__PURE__ */ jsx(Box$1, { component: "span", display: "inline-block", mx: 0.5 }, "dot"),
       passports: (user == null ? void 0 : user.passports) || [],
       pointInfo: (user == null ? void 0 : user.pointInfo) || {},
       did: user == null ? void 0 : user.did
     }
   );
-  return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1, fontSize }, ...rest, children: [
+  return /* @__PURE__ */ jsxs(Box$1, { sx: { display: "flex", alignItems: "center", gap: 1, fontSize }, ...rest, children: [
     renderAvatar(),
-    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", flex: 1 }, children: [
+    /* @__PURE__ */ jsxs(Box$1, { sx: { display: "flex", flexDirection: "column", flex: 1 }, children: [
       /* @__PURE__ */ jsxs(
-        Box,
+        Box$1,
         {
           className: "author-info-title",
           sx: { display: "flex", alignItems: "center", minHeight: 20, flexWrap: "wrap", lineHeight: 1.5 },
@@ -1316,7 +1316,7 @@ function AuthorInfo({
           children: [
             /* @__PURE__ */ jsx("span", { className: "user-fullname", children: newTitle || (user == null ? void 0 : user.fullName) }),
             createdAt && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(Box, { component: "span", display: "inline-block", mx: 0.5, children: "·" }),
+              /* @__PURE__ */ jsx(Box$1, { component: "span", display: "inline-block", mx: 0.5, children: "·" }),
               renderTime()
             ] }),
             append,
@@ -1324,9 +1324,9 @@ function AuthorInfo({
           ]
         }
       ),
-      showBadge && downMd && /* @__PURE__ */ jsx(Box, { mt: 0.5, children: BadgeRender }),
+      showBadge && downMd && /* @__PURE__ */ jsx(Box$1, { mt: 0.5, children: BadgeRender }),
       showDID && !(responsive && downMd) && /* @__PURE__ */ jsx(DID, { style: { lineHeight: 1.5, minHeight: 20, maxWidth: 250 }, size: 14, did: user == null ? void 0 : user.did }),
-      children && /* @__PURE__ */ jsx(Box, { children })
+      children && /* @__PURE__ */ jsx(Box$1, { children })
     ] })
   ] });
 }
@@ -1340,9 +1340,9 @@ function SystemUser({
 }) {
   const sm = size === "sm";
   const iconSize = sm ? 40 : 48;
-  return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1, fontSize: 14 }, ...rest, children: [
+  return /* @__PURE__ */ jsxs(Box$1, { sx: { display: "flex", alignItems: "center", gap: 1, fontSize: 14 }, ...rest, children: [
     showIcon && /* @__PURE__ */ jsx(
-      Box,
+      Box$1,
       {
         sx: {
           display: "flex",
@@ -1358,8 +1358,8 @@ function SystemUser({
         children: icon || /* @__PURE__ */ jsx(NotificationsActiveOutlinedIcon, { sx: { fontSize: size === "sm" ? 16 : 18 } })
       }
     ),
-    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column" }, children: [
-      /* @__PURE__ */ jsx(Box, { sx: { display: "flex", alignItems: "center" }, lineHeight: 1.5, children: /* @__PURE__ */ jsx(Box, { component: "span", sx: { fontWeight: "bold" }, children: name }) }),
+    /* @__PURE__ */ jsxs(Box$1, { sx: { display: "flex", flexDirection: "column" }, children: [
+      /* @__PURE__ */ jsx(Box$1, { sx: { display: "flex", alignItems: "center" }, lineHeight: 1.5, children: /* @__PURE__ */ jsx(Box$1, { component: "span", sx: { fontWeight: "bold" }, children: name }) }),
       showDidAddress && /* @__PURE__ */ jsx(
         DID,
         {
@@ -1400,7 +1400,7 @@ function ViewMore({ children, ...rest }) {
       /* @__PURE__ */ jsx("div", { className: "markdown-viewer-shadow" })
     ] }),
     _collapsed && /* @__PURE__ */ jsx(
-      Box,
+      Box$1,
       {
         onClick: () => setCollapsed(false),
         sx: {
@@ -1438,7 +1438,7 @@ function PostContent({
 }) {
   if (editing && onSubmit) {
     return /* @__PURE__ */ jsx(
-      Box,
+      Box$1,
       {
         sx: {
           ".be-editable": { maxHeight: 768, overflow: "auto", minHeight: `${Math.max(innerHeight, 200)}px !important` }
@@ -1507,7 +1507,7 @@ function Menu({ items = [], ...rest }) {
   if (!(items == null ? void 0 : items.length)) {
     return null;
   }
-  return /* @__PURE__ */ jsxs(Box, { display: "inline-block", ...rest, onClick: handleOnClick, children: [
+  return /* @__PURE__ */ jsxs(Box$1, { display: "inline-block", ...rest, onClick: handleOnClick, children: [
     /* @__PURE__ */ jsx(
       IconButton$1,
       {
@@ -1539,7 +1539,7 @@ function Menu({ items = [], ...rest }) {
   ] });
 }
 Menu.Item = MuiMenuItem;
-const Root$1 = styled(Box)`
+const Root$1 = styled(Box$1)`
   .post-highlighted {
     animation: highlighted-post-fade 3s;
     animation-timing-function: ease-out;
@@ -1606,7 +1606,7 @@ function PostComponent({
   menuItems = customMenu ? customMenu(menuItems, postContext) : menuItems;
   const renderTime = () => {
     if (allowCopyLink) {
-      return /* @__PURE__ */ jsx(Box, { component: "a", href: `#${post.id}`, sx: { color: "text.secondary", textDecoration: "none" }, children: /* @__PURE__ */ jsx(RelativeTime, { value: post.createdAt }) });
+      return /* @__PURE__ */ jsx(Box$1, { component: "a", href: `#${post.id}`, sx: { color: "text.secondary", textDecoration: "none" }, children: /* @__PURE__ */ jsx(RelativeTime, { value: post.createdAt }) });
     }
     return /* @__PURE__ */ jsx(RelativeTime, { value: post.createdAt });
   };
@@ -1623,14 +1623,14 @@ function PostComponent({
     }
   }, [inViewport]);
   return /* @__PURE__ */ jsxs(Root$1, { sx: { position: "relative", mt: 2, py: 1 }, ...rest, children: [
-    /* @__PURE__ */ jsxs(Box, { id: post.id, flex: "1", className: clsx({ "post-highlighted": isTargetPost && hasEnteredViewport }), children: [
-      /* @__PURE__ */ jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "start", children: [
+    /* @__PURE__ */ jsxs(Box$1, { id: post.id, flex: "1", className: clsx({ "post-highlighted": isTargetPost && hasEnteredViewport }), children: [
+      /* @__PURE__ */ jsxs(Box$1, { display: "flex", justifyContent: "space-between", alignItems: "start", children: [
         /* @__PURE__ */ jsx(AuthorInfo, { size: "sm", user: post.author, createdAt: renderTime(), showProfileCard }),
         /* @__PURE__ */ jsx(Menu, { items: menuItems, style: { position: "absolute", right: 0, top: 0 } })
       ] }),
-      /* @__PURE__ */ jsxs(Box, { sx: { ml: 5.5 }, children: [
+      /* @__PURE__ */ jsxs(Box$1, { sx: { ml: 5.5 }, children: [
         post.replyTo && /* @__PURE__ */ jsxs(
-          Box,
+          Box$1,
           {
             mt: 0.5,
             fontSize: 13,
@@ -1639,7 +1639,7 @@ function PostComponent({
             sx: { ".did-address-text": { color: "primary.light" } },
             children: [
               "@",
-              /* @__PURE__ */ jsx(Box, { component: "span", mr: 1, children: post.replyTo.fullName }),
+              /* @__PURE__ */ jsx(Box$1, { component: "span", mr: 1, children: post.replyTo.fullName }),
               "(",
               /* @__PURE__ */ jsx(DIDAddress, { copyable: false, responsive: false, compact: true, inline: true, children: post.replyTo.did }),
               ")"
@@ -1647,7 +1647,7 @@ function PostComponent({
           }
         ),
         showSystemTip && /* @__PURE__ */ jsx(
-          Box,
+          Box$1,
           {
             display: "inline-block",
             px: 2.5,
@@ -1660,7 +1660,7 @@ function PostComponent({
             children: systemTip
           }
         ),
-        !showSystemTip && !post.deletedAt && /* @__PURE__ */ jsx(Box, { my: 1, children: /* @__PURE__ */ jsx(
+        !showSystemTip && !post.deletedAt && /* @__PURE__ */ jsx(Box$1, { my: 1, children: /* @__PURE__ */ jsx(
           PostContent,
           {
             content: post.content,
@@ -1671,7 +1671,7 @@ function PostComponent({
           },
           editing ? "comment-content" : post.synced || 0
         ) }),
-        render && /* @__PURE__ */ jsx(Box, { sx: { mt: 1 }, children: render(postContext) })
+        render && /* @__PURE__ */ jsx(Box$1, { sx: { mt: 1 }, children: render(postContext) })
       ] })
     ] }),
     renderExtraContent && renderExtraContent(postContext)
@@ -1689,9 +1689,9 @@ const StyledDialog = styled(Dialog)`
 `;
 function RaterList({ open, onClose, value, ratings }) {
   const raters = ratings.filter((item) => item.value === value).map((item) => item.rater);
-  return /* @__PURE__ */ jsx(StyledDialog, { open, onClose, PaperProps: { style: { width: 400, minHeight: 200 } }, children: /* @__PURE__ */ jsx(Box, { children: raters.map((rater) => {
+  return /* @__PURE__ */ jsx(StyledDialog, { open, onClose, PaperProps: { style: { width: 400, minHeight: 200 } }, children: /* @__PURE__ */ jsx(Box$1, { children: raters.map((rater) => {
     return /* @__PURE__ */ jsxs(
-      Box,
+      Box$1,
       {
         sx: {
           display: "flex",
@@ -1703,7 +1703,7 @@ function RaterList({ open, onClose, value, ratings }) {
         },
         children: [
           /* @__PURE__ */ jsx(Avatar, { did: rater.did, src: rater.avatar, variant: "circle", size: 26 }),
-          /* @__PURE__ */ jsx(Box, { children: rater.fullName })
+          /* @__PURE__ */ jsx(Box$1, { children: rater.fullName })
         ]
       },
       rater.did
@@ -1829,7 +1829,7 @@ function BinaryThumb({ data = [], variant = "default", size = "sm", ...rest }) {
     }
   );
 }
-const Root = styled$1(Box)`
+const Root = styled$1(Box$1)`
   display: flex;
   .reaction-item {
     display: flex;
@@ -2002,8 +2002,8 @@ function GithubReaction({
     }
   };
   const mergedSx = [{}, ...Array.isArray(sx) ? sx : [sx]];
-  return /* @__PURE__ */ jsxs(Box$1, { ...rest, sx: mergedSx, children: [
-    Object.keys(countPerValue).length > 0 && /* @__PURE__ */ jsx(Box$1, { sx: { display: "flex", gap: 1, mb: 1 }, children: options.map((option) => {
+  return /* @__PURE__ */ jsxs(Box, { ...rest, sx: mergedSx, children: [
+    Object.keys(countPerValue).length > 0 && /* @__PURE__ */ jsx(Box, { sx: { display: "flex", gap: 1, mb: 1 }, children: options.map((option) => {
       if (!countPerValue[option.value]) {
         return null;
       }
@@ -2011,8 +2011,8 @@ function GithubReaction({
       return /* @__PURE__ */ jsx(Tooltip$1, { title: raters == null ? void 0 : raters.join(", "), children: /* @__PURE__ */ jsx(
         Chip$1,
         {
-          label: /* @__PURE__ */ jsxs(Box$1, { component: "span", sx: { display: "inline-flex", alignItems: "center", gap: 1 }, children: [
-            /* @__PURE__ */ jsx(Box$1, { component: "span", sx: emojiFont, children: option.label }),
+          label: /* @__PURE__ */ jsxs(Box, { component: "span", sx: { display: "inline-flex", alignItems: "center", gap: 1 }, children: [
+            /* @__PURE__ */ jsx(Box, { component: "span", sx: emojiFont, children: option.label }),
             /* @__PURE__ */ jsx("span", { children: countPerValue[option.value] })
           ] }),
           color: "default",
@@ -2036,9 +2036,9 @@ function GithubReaction({
         }
       ) }, option.value);
     }) }),
-    /* @__PURE__ */ jsxs(Box$1, { sx: { display: "flex", alignItems: "center", gap: 2 }, children: [
+    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 2 }, children: [
       /* @__PURE__ */ jsxs(
-        Box$1,
+        Box,
         {
           sx: {
             position: "relative",
@@ -2058,10 +2058,10 @@ function GithubReaction({
           },
           onClick: handleOpen,
           children: [
-            /* @__PURE__ */ jsx(Box$1, { className: "github-reaction-text", component: tablerMoodPlus, sx: { fontSize: 18 } }),
-            /* @__PURE__ */ jsx(Box$1, { className: "github-reaction-text", component: "span", sx: { fontSize: 13 }, children: "Sticker" }),
+            /* @__PURE__ */ jsx(Box, { className: "github-reaction-text", component: tablerMoodPlus, sx: { fontSize: 18 } }),
+            /* @__PURE__ */ jsx(Box, { className: "github-reaction-text", component: "span", sx: { fontSize: 13 }, children: "Sticker" }),
             open && /* @__PURE__ */ jsx(ClickAwayListener, { onClickAway: () => setOpen(false), children: /* @__PURE__ */ jsx(
-              Box$1,
+              Box,
               {
                 sx: {
                   display: "flex",
@@ -2079,7 +2079,7 @@ function GithubReaction({
                 children: options.map((option) => {
                   const selected = selectedValuesMap[option.value];
                   return /* @__PURE__ */ jsx(
-                    Box$1,
+                    Box,
                     {
                       onClick: () => toggleRate(option.value),
                       sx: {
@@ -2096,7 +2096,7 @@ function GithubReaction({
                           bgcolor: (theme) => alpha(theme.palette.primary.light, 0.2)
                         }
                       },
-                      children: /* @__PURE__ */ jsx(Box$1, { sx: emojiFont, children: option.label })
+                      children: /* @__PURE__ */ jsx(Box, { sx: emojiFont, children: option.label })
                     },
                     option.value
                   );
@@ -2236,14 +2236,14 @@ function Comment({
   const customMenu = (items, { isAuthor, isAdmin, post }) => {
     if ((isAdmin || isAuthor) && !post.deletedAt) {
       items.push(
-        /* @__PURE__ */ jsx(MuiMenuItem, { onClick: () => handleDelete(post), children: /* @__PURE__ */ jsx(Box, { component: "span", sx: { color: "error.main" }, children: t("delete") }) }, "delete")
+        /* @__PURE__ */ jsx(MuiMenuItem, { onClick: () => handleDelete(post), children: /* @__PURE__ */ jsx(Box$1, { component: "span", sx: { color: "error.main" }, children: t("delete") }) }, "delete")
       );
     }
     return items;
   };
   const render = ({ post, interactive }) => {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Box, { sx: { display: "flex", alignItems: "center", gap: 3, mt: 1 }, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(Box$1, { sx: { display: "flex", alignItems: "center", gap: 3, mt: 1 }, children: /* @__PURE__ */ jsx(
         GithubReaction,
         {
           data: (post == null ? void 0 : post.rating) || [],
@@ -2251,7 +2251,7 @@ function Comment({
           onUnrate: () => onUnrate(post),
           interactive,
           append: (!!(session == null ? void 0 : session.user) || preferences.displayReplyButtonForAnonymousUsers) && interactive && /* @__PURE__ */ jsxs(
-            Box,
+            Box$1,
             {
               onClick: () => protectLogin(session, () => setInputVisible(!inputVisible)),
               sx: {
@@ -2264,14 +2264,14 @@ function Comment({
                 "&:hover": { cursor: "pointer" }
               },
               children: [
-                /* @__PURE__ */ jsx(Box, { component: tablerMessageCircle, sx: { fontSize: 18, color: "text.secondary" } }),
-                /* @__PURE__ */ jsx(Box, { component: "span", children: "Reply" })
+                /* @__PURE__ */ jsx(Box$1, { component: tablerMessageCircle, sx: { fontSize: 18, color: "text.secondary" } }),
+                /* @__PURE__ */ jsx(Box$1, { component: "span", children: "Reply" })
               ]
             }
           )
         }
       ) }),
-      inputVisible && /* @__PURE__ */ jsx(Box, { my: 2, children: /* @__PURE__ */ jsx(
+      inputVisible && /* @__PURE__ */ jsx(Box$1, { my: 2, children: /* @__PURE__ */ jsx(
         CommentInput,
         {
           send: (content) => onReply(post, content),
@@ -2285,7 +2285,7 @@ function Comment({
   const renderExtraContent = ({ post }) => {
     var _a2;
     if ((_a2 = post.replies) == null ? void 0 : _a2.length) {
-      return /* @__PURE__ */ jsxs(Box, { sx: { mt: 1, ml: 5.5 }, children: [
+      return /* @__PURE__ */ jsxs(Box$1, { sx: { mt: 1, ml: 5.5 }, children: [
         post.replies.map((item) => {
           return /* @__PURE__ */ jsx(
             Comment,
@@ -2617,7 +2617,7 @@ function CommentsProvider({
   );
   return /* @__PURE__ */ jsx(CommentsContext.Provider, { value, children });
 }
-const LoadMoreButtonWrapper = styled(Box)`
+const LoadMoreButtonWrapper = styled(Box$1)`
   background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 11L8 5L16 11' stroke='%23e1e4e8' stroke-linecap='square' stroke-width='1.5' /%3E%3C/svg%3E");
   background-repeat: repeat-x;
   background-position: center;
@@ -2647,7 +2647,7 @@ function SegmentalList({ ...rest }) {
     comments.map((comment) => {
       return /* @__PURE__ */ jsxs(Fragment$1, { children: [
         comment.id === (highlighted == null ? void 0 : highlighted.id) && hiddenComments > 0 && nextCursor && /* @__PURE__ */ jsx(LoadMoreButtonWrapper, { sx: { my: 4, textAlign: "center" }, children: /* @__PURE__ */ jsxs(
-          Box,
+          Box$1,
           {
             sx: {
               display: "inline-flex",
@@ -2664,7 +2664,7 @@ function SegmentalList({ ...rest }) {
             },
             children: [
               /* @__PURE__ */ jsx(Button, { onClick: () => loadMore(nextCursor), variant: "text", color: "primary", sx: { fontSize: 13 }, children: t("loadMore") }),
-              /* @__PURE__ */ jsxs(Box, { sx: { fontSize: 12, color: "grey.500" }, children: [
+              /* @__PURE__ */ jsxs(Box$1, { sx: { fontSize: 12, color: "grey.500" }, children: [
                 hiddenComments,
                 " Comments"
               ] })
@@ -2689,7 +2689,7 @@ function SegmentalList({ ...rest }) {
         )
       ] }, comment.id);
     }),
-    highlighted.nextCursor && /* @__PURE__ */ jsx(Box, { sx: { my: 2, textAlign: "center" }, children: /* @__PURE__ */ jsx(
+    highlighted.nextCursor && /* @__PURE__ */ jsx(Box$1, { sx: { my: 2, textAlign: "center" }, children: /* @__PURE__ */ jsx(
       Button,
       {
         onClick: loadMoreForTailSection,
@@ -2738,7 +2738,7 @@ function CommentList(props) {
       },
       comment.id
     )),
-    nextCursor && /* @__PURE__ */ jsx(Box, { sx: { my: 2, textAlign: "center" }, children: /* @__PURE__ */ jsx(
+    nextCursor && /* @__PURE__ */ jsx(Box$1, { sx: { my: 2, textAlign: "center" }, children: /* @__PURE__ */ jsx(
       Button,
       {
         className: "load-more",
@@ -2800,7 +2800,7 @@ function UploaderTrigger({ onChange, children }) {
       });
     }
   };
-  return /* @__PURE__ */ jsx(Box$1, { onClick: handleOpen, children });
+  return /* @__PURE__ */ jsx(Box, { onClick: handleOpen, children });
 }
 function UploaderProvider({ children }) {
   const uploaderRef = useRef(null);
@@ -2851,7 +2851,7 @@ function CoverImage({
   const [loaded, setLoaded] = useState(false);
   const [errored, setErrored] = useState(false);
   return /* @__PURE__ */ jsxs(
-    Box$1,
+    Box,
     {
       sx: [
         {
@@ -2883,7 +2883,7 @@ function CoverImage({
           }
         ),
         !!url && // add box because img can't add :after
-        /* @__PURE__ */ jsx(Box$1, { children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
           "img",
           {
             src: url ? composeImageUrl(url, width) : "",
@@ -2905,7 +2905,7 @@ function CoverImage({
           }
         ) }),
         (!url || errored) && /* @__PURE__ */ jsx(
-          Box$1,
+          Box,
           {
             sx: {
               position: "absolute",
@@ -2922,7 +2922,7 @@ function CoverImage({
   );
 }
 function CoverImageUpload({ url, onChange, width, ...rest }) {
-  return /* @__PURE__ */ jsx(Box$1, { ...rest, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(Box, { ...rest, children: /* @__PURE__ */ jsxs(
     UploaderTrigger,
     {
       onChange: ({ response }) => {
@@ -2932,7 +2932,7 @@ function CoverImageUpload({ url, onChange, width, ...rest }) {
       },
       children: [
         /* @__PURE__ */ jsx(
-          Box$1,
+          Box,
           {
             sx: {
               display: url ? "none" : "block",
@@ -2945,7 +2945,7 @@ function CoverImageUpload({ url, onChange, width, ...rest }) {
               cursor: "pointer"
             },
             children: /* @__PURE__ */ jsx(
-              Box$1,
+              Box,
               {
                 sx: {
                   position: "absolute",
@@ -2960,7 +2960,7 @@ function CoverImageUpload({ url, onChange, width, ...rest }) {
           }
         ),
         /* @__PURE__ */ jsxs(
-          Box$1,
+          Box,
           {
             sx: {
               display: url ? "block" : "none",
@@ -2970,7 +2970,7 @@ function CoverImageUpload({ url, onChange, width, ...rest }) {
             },
             children: [
               /* @__PURE__ */ jsx(CoverImage, { url, width }),
-              /* @__PURE__ */ jsx(Box$1, { sx: { position: "absolute", top: 8, right: 8, display: "none" }, className: "cover-image-delete", children: /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx(Box, { sx: { position: "absolute", top: 8, right: 8, display: "none" }, className: "cover-image-delete", children: /* @__PURE__ */ jsx(
                 IconButton$2,
                 {
                   color: "inherit",
@@ -3056,18 +3056,18 @@ function BlogItem({
   const coverImgWidths = { xs: 84, md: 180, lg: 200 };
   const coverImgWidth = useResponsiveValue(coverImgWidths);
   if (loading) {
-    return /* @__PURE__ */ jsx(Box, { sx: { display: "block", color: "inherit", textDecoration: "none", "& + &": { mt: { xs: 2.5, md: 6 } } }, children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
-      /* @__PURE__ */ jsxs(Box, { sx: { flex: 1, pr: { xs: 2, md: 4 } }, children: [
-        hideAuthor === "1" || /* @__PURE__ */ jsxs(Box, { flex: 1, display: "flex", children: [
+    return /* @__PURE__ */ jsx(Box$1, { sx: { display: "block", color: "inherit", textDecoration: "none", "& + &": { mt: { xs: 2.5, md: 6 } } }, children: /* @__PURE__ */ jsxs(Box$1, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+      /* @__PURE__ */ jsxs(Box$1, { sx: { flex: 1, pr: { xs: 2, md: 4 } }, children: [
+        hideAuthor === "1" || /* @__PURE__ */ jsxs(Box$1, { flex: 1, display: "flex", children: [
           /* @__PURE__ */ jsx(Skeleton$1, { variant: "circular", width: 40, height: 40 }),
-          /* @__PURE__ */ jsxs(Box, { flex: 1, ml: 1, children: [
+          /* @__PURE__ */ jsxs(Box$1, { flex: 1, ml: 1, children: [
             /* @__PURE__ */ jsx(Skeleton$1, { height: 20, width: 40 }),
             /* @__PURE__ */ jsx(Skeleton$1, { height: 20, width: 100 })
           ] })
         ] }),
         /* @__PURE__ */ jsx(Skeleton$1, { height: 30 }),
         /* @__PURE__ */ jsx(
-          Box,
+          Box$1,
           {
             sx: {
               display: { xs: "inline-block", md: "none" },
@@ -3080,21 +3080,21 @@ function BlogItem({
           }
         )
       ] }),
-      /* @__PURE__ */ jsx(Box, { sx: { flex: "0 0 auto", width: { xs: 84, md: 180, lg: 200 } }, children: /* @__PURE__ */ jsx(Skeleton$1, { height: 130 }) })
+      /* @__PURE__ */ jsx(Box$1, { sx: { flex: "0 0 auto", width: { xs: 84, md: 180, lg: 200 } }, children: /* @__PURE__ */ jsx(Skeleton$1, { height: 130 }) })
     ] }) });
   }
   return /* @__PURE__ */ jsx(
-    Box,
+    Box$1,
     {
       component: Link,
       target: itemLinkTarget,
       to: getBlogLink(item),
       sx: { display: "block", color: "inherit", textDecoration: "none", "& + &": { mt: { xs: 2.5, md: 6 } } },
       className: "blog-list-item",
-      children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
-        /* @__PURE__ */ jsxs(Box, { sx: { flex: 1, minWidth: 0, pr: { xs: 2, md: 4 } }, children: [
+      children: /* @__PURE__ */ jsxs(Box$1, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+        /* @__PURE__ */ jsxs(Box$1, { sx: { flex: 1, minWidth: 0, pr: { xs: 2, md: 4 } }, children: [
           typeof prepend === "function" ? prepend(item) : prepend,
-          hideAuthor === "1" || /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(AuthorInfo, { user: item.author, createdAt: downMd ? void 0 : item.publishTime, size: "sm", responsive: true }) }),
+          hideAuthor === "1" || /* @__PURE__ */ jsx(Box$1, { children: /* @__PURE__ */ jsx(AuthorInfo, { user: item.author, createdAt: downMd ? void 0 : item.publishTime, size: "sm", responsive: true }) }),
           /* @__PURE__ */ jsx(Typography, { variant: "h4", component: "h3", sx: { ...lineClamp2, my: 0.5 }, className: "item-title", children: item.title }),
           item.excerpt && /* @__PURE__ */ jsxs(
             Typography,
@@ -3120,7 +3120,7 @@ function BlogItem({
               renderLabel: (node, element) => {
                 const { id: id2 } = node.data;
                 return /* @__PURE__ */ jsx(
-                  Box,
+                  Box$1,
                   {
                     onClick: (e) => {
                       e.preventDefault();
@@ -3135,7 +3135,7 @@ function BlogItem({
             }
           ),
           /* @__PURE__ */ jsx(
-            Box,
+            Box$1,
             {
               sx: {
                 display: { xs: "inline-block", md: "none" },
@@ -3148,7 +3148,7 @@ function BlogItem({
             }
           )
         ] }),
-        item.cover && /* @__PURE__ */ jsx(Box, { sx: { flex: "0 0 auto", width: coverImgWidths }, children: /* @__PURE__ */ jsx(CoverImage, { url: item.cover, aspectRatio: downMd ? 1 : 3 / 2, loading: "lazy", width: coverImgWidth * 2 }) })
+        item.cover && /* @__PURE__ */ jsx(Box$1, { sx: { flex: "0 0 auto", width: coverImgWidths }, children: /* @__PURE__ */ jsx(CoverImage, { url: item.cover, aspectRatio: downMd ? 1 : 3 / 2, loading: "lazy", width: coverImgWidth * 2 }) })
       ] })
     },
     item.id
@@ -3192,13 +3192,13 @@ function BlogList({
       item.id
     ));
   }
-  return /* @__PURE__ */ jsx(Box, { ...rest, children: content });
+  return /* @__PURE__ */ jsx(Box$1, { ...rest, children: content });
 }
 const BlogCard = forwardRef(
   ({ post, hideAuthor, linkTarget, compactLayout, loading = false }, ref) => {
     if (loading) {
-      return /* @__PURE__ */ jsx(Box, { sx: { display: "flex", justifyContent: "center", color: "inherit", textDecoration: "none" }, children: /* @__PURE__ */ jsxs(
-        Box,
+      return /* @__PURE__ */ jsx(Box$1, { sx: { display: "flex", justifyContent: "center", color: "inherit", textDecoration: "none" }, children: /* @__PURE__ */ jsxs(
+        Box$1,
         {
           sx: {
             display: "flex",
@@ -3210,15 +3210,15 @@ const BlogCard = forwardRef(
             boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)"
           },
           children: [
-            /* @__PURE__ */ jsx(Box, { sx: { flex: "0 0 auto" }, children: /* @__PURE__ */ jsx(Skeleton$1, { variant: "rectangular", width: "100%", height: 180 }) }),
-            /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", flex: 1, mt: 1, p: 2, pt: 0 }, children: [
+            /* @__PURE__ */ jsx(Box$1, { sx: { flex: "0 0 auto" }, children: /* @__PURE__ */ jsx(Skeleton$1, { variant: "rectangular", width: "100%", height: 180 }) }),
+            /* @__PURE__ */ jsxs(Box$1, { sx: { display: "flex", flexDirection: "column", flex: 1, mt: 1, p: 2, pt: 0 }, children: [
               /* @__PURE__ */ jsx(Skeleton$1, { width: "60%" }),
               /* @__PURE__ */ jsx(Skeleton$1, {})
             ] }),
-            compactLayout === "1" || /* @__PURE__ */ jsxs(Box, { sx: { mt: "auto", px: 2 }, children: [
+            compactLayout === "1" || /* @__PURE__ */ jsxs(Box$1, { sx: { mt: "auto", px: 2 }, children: [
               /* @__PURE__ */ jsx(Skeleton$1, { width: "30%" }),
               /* @__PURE__ */ jsxs(
-                Box,
+                Box$1,
                 {
                   sx: {
                     display: "flex",
@@ -3229,15 +3229,15 @@ const BlogCard = forwardRef(
                     borderTop: "1px solid #eee"
                   },
                   children: [
-                    hideAuthor === "1" || /* @__PURE__ */ jsxs(Box, { flex: 1, display: "flex", children: [
+                    hideAuthor === "1" || /* @__PURE__ */ jsxs(Box$1, { flex: 1, display: "flex", children: [
                       /* @__PURE__ */ jsx(Skeleton$1, { variant: "circular", width: 40, height: 40 }),
-                      /* @__PURE__ */ jsxs(Box, { flex: 1, ml: 1, children: [
+                      /* @__PURE__ */ jsxs(Box$1, { flex: 1, ml: 1, children: [
                         /* @__PURE__ */ jsx(Skeleton$1, { height: 20, width: 40 }),
                         /* @__PURE__ */ jsx(Skeleton$1, { height: 20, width: 100 })
                       ] })
                     ] }),
                     /* @__PURE__ */ jsxs(
-                      Box,
+                      Box$1,
                       {
                         sx: {
                           display: "flex",
@@ -3247,7 +3247,7 @@ const BlogCard = forwardRef(
                         },
                         children: [
                           /* @__PURE__ */ jsx(ChatBubbleOutlineOutlined, { sx: { mt: 0.25, fontSize: 18, color: "grey.600" } }),
-                          /* @__PURE__ */ jsx(Box, { component: "span", sx: { fontSize: 12 }, children: /* @__PURE__ */ jsx(Skeleton$1, { width: 20 }) })
+                          /* @__PURE__ */ jsx(Box$1, { component: "span", sx: { fontSize: 12 }, children: /* @__PURE__ */ jsx(Skeleton$1, { width: 20 }) })
                         ]
                       }
                     )
@@ -3260,7 +3260,7 @@ const BlogCard = forwardRef(
       ) });
     }
     return /* @__PURE__ */ jsx(
-      Box,
+      Box$1,
       {
         ref,
         component: Link,
@@ -3268,7 +3268,7 @@ const BlogCard = forwardRef(
         to: getBlogLink(post),
         sx: { display: "flex", justifyContent: "center", color: "inherit", textDecoration: "none" },
         children: /* @__PURE__ */ jsxs(
-          Box,
+          Box$1,
           {
             sx: {
               display: "flex",
@@ -3280,16 +3280,16 @@ const BlogCard = forwardRef(
               boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)"
             },
             children: [
-              /* @__PURE__ */ jsx(Box, { sx: { flex: "0 0 auto" }, children: /* @__PURE__ */ jsx(CoverImage, { url: post.cover, sx: { borderRadius: 0 }, loading: "lazy", width: 640 }) }),
-              /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", flex: 1, mt: 1, p: 2, pt: 0 }, children: [
+              /* @__PURE__ */ jsx(Box$1, { sx: { flex: "0 0 auto" }, children: /* @__PURE__ */ jsx(CoverImage, { url: post.cover, sx: { borderRadius: 0 }, loading: "lazy", width: 640 }) }),
+              /* @__PURE__ */ jsxs(Box$1, { sx: { display: "flex", flexDirection: "column", flex: 1, mt: 1, p: 2, pt: 0 }, children: [
                 /* @__PURE__ */ jsx(Typography, { variant: "h4", sx: { ...lineClamp2, my: 0.5 }, children: post.title }),
                 post.excerpt && /* @__PURE__ */ jsxs(Typography, { variant: "body1", sx: { ...lineClamp2, fontSize: { xs: 13, md: 14 }, color: "grey.600" }, children: [
                   post.excerpt,
                   "..."
                 ] }),
-                compactLayout === "1" || /* @__PURE__ */ jsxs(Box, { sx: { mt: "auto" }, children: [
+                compactLayout === "1" || /* @__PURE__ */ jsxs(Box$1, { sx: { mt: "auto" }, children: [
                   /* @__PURE__ */ jsxs(
-                    Box,
+                    Box$1,
                     {
                       sx: {
                         mt: 2,
@@ -3305,7 +3305,7 @@ const BlogCard = forwardRef(
                     }
                   ),
                   /* @__PURE__ */ jsxs(
-                    Box,
+                    Box$1,
                     {
                       sx: {
                         display: "flex",
@@ -3318,7 +3318,7 @@ const BlogCard = forwardRef(
                       children: [
                         hideAuthor === "1" || /* @__PURE__ */ jsx(AuthorInfo, { user: post.author, size: "sm", responsive: true }),
                         /* @__PURE__ */ jsxs(
-                          Box,
+                          Box$1,
                           {
                             sx: {
                               display: "flex",
@@ -3328,7 +3328,7 @@ const BlogCard = forwardRef(
                             },
                             children: [
                               /* @__PURE__ */ jsx(ChatBubbleOutlineOutlined, { sx: { mt: 0.25, fontSize: 18, color: "grey.600" } }),
-                              /* @__PURE__ */ jsx(Box, { component: "span", sx: { fontSize: 12 }, children: post.commentCount || 0 })
+                              /* @__PURE__ */ jsx(Box$1, { component: "span", sx: { fontSize: 12 }, children: post.commentCount || 0 })
                             ]
                           }
                         )
@@ -3393,8 +3393,8 @@ function BlogCardList({
       );
     });
   }
-  return /* @__PURE__ */ jsx(Box, { ...rest, sx: [{}, ...Array.isArray(rest.sx) ? rest.sx : [rest.sx]], children: /* @__PURE__ */ jsx(
-    Box,
+  return /* @__PURE__ */ jsx(Box$1, { ...rest, sx: [{}, ...Array.isArray(rest.sx) ? rest.sx : [rest.sx]], children: /* @__PURE__ */ jsx(
+    Box$1,
     {
       ref: containerRef,
       sx: {
@@ -3419,8 +3419,8 @@ function BlogListWrapper({
 }
 const prefix = joinUrl(window.location.origin, inferDiscussKitApiPrefix(), "blog");
 function BlogPermaLink({ slug, onChange, ...rest }) {
-  return /* @__PURE__ */ jsx(Box$1, { ...rest, className: "blog-permalink-container", children: /* @__PURE__ */ jsxs(
-    Box$1,
+  return /* @__PURE__ */ jsx(Box, { ...rest, className: "blog-permalink-container", children: /* @__PURE__ */ jsxs(
+    Box,
     {
       component: "form",
       sx: {
@@ -3432,7 +3432,7 @@ function BlogPermaLink({ slug, onChange, ...rest }) {
       },
       children: [
         /* @__PURE__ */ jsx(
-          Box$1,
+          Box,
           {
             sx: {
               display: "flex",
@@ -3443,7 +3443,7 @@ function BlogPermaLink({ slug, onChange, ...rest }) {
               bgcolor: "grey.200"
             },
             children: /* @__PURE__ */ jsx(
-              Box$1,
+              Box,
               {
                 component: "input",
                 value: prefix,
@@ -3884,9 +3884,9 @@ const tablerUsersGroup = (props) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 2
 function ChannelGroup({ size = "normal", chat, children, ...rest }) {
   const sm = size === "sm";
   const iconSize = sm ? 40 : 48;
-  return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1, fontSize: 14 }, ...rest, children: [
+  return /* @__PURE__ */ jsxs(Box$1, { sx: { display: "flex", alignItems: "center", gap: 1, fontSize: 14 }, ...rest, children: [
     /* @__PURE__ */ jsx(
-      Box,
+      Box$1,
       {
         sx: {
           display: "flex",
@@ -3899,12 +3899,12 @@ function ChannelGroup({ size = "normal", chat, children, ...rest }) {
           p: 0.8,
           borderRadius: "100%"
         },
-        children: /* @__PURE__ */ jsx(Box, { component: tablerUsersGroup, sx: { fontSize: 16, color: amber[700], width: iconSize } })
+        children: /* @__PURE__ */ jsx(Box$1, { component: tablerUsersGroup, sx: { fontSize: 16, color: amber[700], width: iconSize } })
       }
     ),
-    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", height: "100%", justifyContent: "space-between" }, children: [
-      /* @__PURE__ */ jsx(Box, { sx: { display: "flex", alignItems: "center" }, lineHeight: 1.5, children: /* @__PURE__ */ jsx(Box, { component: "span", sx: { fontWeight: "bold" }, children: chat == null ? void 0 : chat.name }) }),
-      children && /* @__PURE__ */ jsx(Box, { children })
+    /* @__PURE__ */ jsxs(Box$1, { sx: { display: "flex", flexDirection: "column", height: "100%", justifyContent: "space-between" }, children: [
+      /* @__PURE__ */ jsx(Box$1, { sx: { display: "flex", alignItems: "center" }, lineHeight: 1.5, children: /* @__PURE__ */ jsx(Box$1, { component: "span", sx: { fontWeight: "bold" }, children: chat == null ? void 0 : chat.name }) }),
+      children && /* @__PURE__ */ jsx(Box$1, { children })
     ] })
   ] });
 }
@@ -3917,7 +3917,7 @@ function ChatList({ inWallet, ...rest }) {
     }
     const latestMessageText = getLastMessageText(chat);
     const latestMessageTextContent = latestMessageText && /* @__PURE__ */ jsx(
-      Box,
+      Box$1,
       {
         className: "message-content-text",
         sx: {
@@ -3951,11 +3951,11 @@ function ChatList({ inWallet, ...rest }) {
     }
     return null;
   };
-  return /* @__PURE__ */ jsx(Box, { ...rest, children: /* @__PURE__ */ jsx(Flipper, { flipKey: orderedChats.map((x) => x.id).join(""), children: orderedChats.map((chat) => {
+  return /* @__PURE__ */ jsx(Box$1, { ...rest, children: /* @__PURE__ */ jsx(Flipper, { flipKey: orderedChats.map((x) => x.id).join(""), children: orderedChats.map((chat) => {
     const isActiveChat = activeChatId === chat.id;
     const _hasUnreadMessages = hasUnreadMessages(chat) && (chat.type !== "channel" || chat.hasJoined);
     return /* @__PURE__ */ jsx(Flipped, { flipId: chat.id, children: /* @__PURE__ */ jsxs(
-      Box,
+      Box$1,
       {
         sx: {
           position: "relative",
@@ -3998,7 +3998,7 @@ function ChatList({ inWallet, ...rest }) {
         children: [
           renderItem(chat),
           _hasUnreadMessages && /* @__PURE__ */ jsx(
-            Box,
+            Box$1,
             {
               sx: {
                 position: "absolute",
@@ -4027,7 +4027,7 @@ const Time = ({ createdAt }) => {
   const diffInMilliseconds = now.getTime() - messageTime.getTime();
   const diffInDays = diffInMilliseconds / (1e3 * 60 * 60 * 24);
   const isWithinSevenDays = diffInDays <= 3;
-  return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Box, { sx: { display: "inline-block", fontSize: 12, color: "grey.500", ml: 3 }, children: isWithinSevenDays ? /* @__PURE__ */ jsx(RelativeTime, { value: createdAt }) : dayjs(messageTime).format("YYYY-MM-DD HH:mm") }) });
+  return /* @__PURE__ */ jsx(Box$1, { children: /* @__PURE__ */ jsx(Box$1, { sx: { display: "inline-block", fontSize: 12, color: "grey.500", ml: 3 }, children: isWithinSevenDays ? /* @__PURE__ */ jsx(RelativeTime, { value: createdAt }) : dayjs(messageTime).format("YYYY-MM-DD HH:mm") }) });
 };
 const baseItemSx = {
   px: 1.25,
@@ -4053,7 +4053,7 @@ function Message({ message, prevMessage, showTime = true, ...rest }) {
     }
   };
   const renderPostContent = () => {
-    return /* @__PURE__ */ jsx(Box, { className: "author-chat-item", children: /* @__PURE__ */ jsx(PostContent, { content: message.content }) });
+    return /* @__PURE__ */ jsx(Box$1, { className: "author-chat-item", children: /* @__PURE__ */ jsx(PostContent, { content: message.content }) });
   };
   const menuItems = [];
   const isSender = message.sender.did === ((_a2 = session == null ? void 0 : session.user) == null ? void 0 : _a2.did);
@@ -4063,12 +4063,12 @@ function Message({ message, prevMessage, showTime = true, ...rest }) {
   const isSameUser = message.sender.did === ((_b2 = prevMessage == null ? void 0 : prevMessage.sender) == null ? void 0 : _b2.did);
   if (isSender || isAdmin) {
     menuItems.push(
-      /* @__PURE__ */ jsx(MuiMenuItem, { onClick: handleDeleteMessage, children: /* @__PURE__ */ jsx(Box, { component: "span", sx: { color: "error.main" }, children: t("delete") }) }, "delete")
+      /* @__PURE__ */ jsx(MuiMenuItem, { onClick: handleDeleteMessage, children: /* @__PURE__ */ jsx(Box$1, { component: "span", sx: { color: "error.main" }, children: t("delete") }) }, "delete")
     );
   }
   const compactMessage = messageInterval <= 6e4 && isSameUser;
   return /* @__PURE__ */ jsxs(
-    Box,
+    Box$1,
     {
       ...rest,
       sx: {
@@ -4138,7 +4138,7 @@ function NotificationMessage({ chat, message, prevMessage }) {
   const { t } = useLocaleContext();
   const renderQuote = ({ title, cover }) => {
     if ("post" in message) {
-      return /* @__PURE__ */ jsxs(Box, { sx: { color: 14, mt: 1 }, children: [
+      return /* @__PURE__ */ jsxs(Box$1, { sx: { color: 14, mt: 1 }, children: [
         title && /* @__PURE__ */ jsx(
           Typography,
           {
@@ -4151,8 +4151,8 @@ function NotificationMessage({ chat, message, prevMessage }) {
           }
         ),
         cover && // cover image
-        /* @__PURE__ */ jsx(Box, { sx: { maxWidth: 200, mt: 1 }, children: /* @__PURE__ */ jsx(
-          Box,
+        /* @__PURE__ */ jsx(Box$1, { sx: { maxWidth: 200, mt: 1 }, children: /* @__PURE__ */ jsx(
+          Box$1,
           {
             sx: [
               {
@@ -4187,14 +4187,14 @@ function NotificationMessage({ chat, message, prevMessage }) {
     };
     if (message.type === "post_create") {
       return /* @__PURE__ */ jsxs(
-        Box,
+        Box$1,
         {
           sx: {
             ...baseCardSx
           },
           children: [
             /* @__PURE__ */ jsxs(
-              Box,
+              Box$1,
               {
                 sx: {
                   display: "flex",
@@ -4204,9 +4204,9 @@ function NotificationMessage({ chat, message, prevMessage }) {
                   color: "primary.light"
                 },
                 children: [
-                  /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center" }, children: [
+                  /* @__PURE__ */ jsxs(Box$1, { sx: { display: "flex", alignItems: "center" }, children: [
                     /* @__PURE__ */ jsx(Icon, { icon: "tabler:news", style: { height: 15, width: 15, marginRight: 4 } }),
-                    /* @__PURE__ */ jsx(Box, { component: "span", sx: { mr: 0.5 }, children: message.sourceUser.fullName }),
+                    /* @__PURE__ */ jsx(Box$1, { component: "span", sx: { mr: 0.5 }, children: message.sourceUser.fullName }),
                     /* @__PURE__ */ jsx("span", { children: t("chat.newPost") })
                   ] }),
                   /* @__PURE__ */ jsx(Time, { createdAt: message.createdAt })
@@ -4220,14 +4220,14 @@ function NotificationMessage({ chat, message, prevMessage }) {
     }
     if (message.type === "comment") {
       return /* @__PURE__ */ jsxs(
-        Box,
+        Box$1,
         {
           sx: {
             ...baseCardSx
           },
           children: [
             /* @__PURE__ */ jsxs(
-              Box,
+              Box$1,
               {
                 sx: {
                   display: "flex",
@@ -4237,9 +4237,9 @@ function NotificationMessage({ chat, message, prevMessage }) {
                   color: "primary.light"
                 },
                 children: [
-                  /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center" }, children: [
+                  /* @__PURE__ */ jsxs(Box$1, { sx: { display: "flex", alignItems: "center" }, children: [
                     /* @__PURE__ */ jsx(Icon, { icon: "tabler:message-circle-2", style: { height: 15, width: 15, marginRight: 4 } }),
-                    /* @__PURE__ */ jsx(Box, { component: "span", sx: { mr: 0.5 }, children: message.sourceUser.fullName }),
+                    /* @__PURE__ */ jsx(Box$1, { component: "span", sx: { mr: 0.5 }, children: message.sourceUser.fullName }),
                     /* @__PURE__ */ jsx("span", { children: ((_a2 = message == null ? void 0 : message.sourceUser) == null ? void 0 : _a2.did) === ((_b2 = session == null ? void 0 : session.user) == null ? void 0 : _b2.did) ? t("chat.commentedYourPost") : t("chat.commentedPost") })
                   ] }),
                   /* @__PURE__ */ jsx(Time, { createdAt: message.createdAt })
@@ -4254,14 +4254,14 @@ function NotificationMessage({ chat, message, prevMessage }) {
     }
     if (message.type === "reply") {
       return /* @__PURE__ */ jsxs(
-        Box,
+        Box$1,
         {
           sx: {
             ...baseCardSx
           },
           children: [
             /* @__PURE__ */ jsxs(
-              Box,
+              Box$1,
               {
                 sx: {
                   display: "flex",
@@ -4271,9 +4271,9 @@ function NotificationMessage({ chat, message, prevMessage }) {
                   color: "primary.light"
                 },
                 children: [
-                  /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center" }, children: [
+                  /* @__PURE__ */ jsxs(Box$1, { sx: { display: "flex", alignItems: "center" }, children: [
                     /* @__PURE__ */ jsx(Icon, { icon: "tabler:message-circle-2", style: { height: 15, width: 15, marginRight: 4 } }),
-                    /* @__PURE__ */ jsx(Box, { component: "span", sx: { mr: 0.5 }, children: message.sourceUser.fullName }),
+                    /* @__PURE__ */ jsx(Box$1, { component: "span", sx: { mr: 0.5 }, children: message.sourceUser.fullName }),
                     /* @__PURE__ */ jsx("span", { children: (message == null ? void 0 : message.recipient) === ((_d = session == null ? void 0 : session.user) == null ? void 0 : _d.did) ? t("chat.replyYourComment") : t("chat.replyComment") })
                   ] }),
                   /* @__PURE__ */ jsx(Time, { createdAt: message.createdAt })
@@ -4288,14 +4288,14 @@ function NotificationMessage({ chat, message, prevMessage }) {
     }
     if (message.type === "mentionInComment") {
       return /* @__PURE__ */ jsxs(
-        Box,
+        Box$1,
         {
           sx: {
             ...baseCardSx
           },
           children: [
             /* @__PURE__ */ jsxs(
-              Box,
+              Box$1,
               {
                 sx: {
                   display: "flex",
@@ -4305,9 +4305,9 @@ function NotificationMessage({ chat, message, prevMessage }) {
                   color: "primary.light"
                 },
                 children: [
-                  /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center" }, children: [
+                  /* @__PURE__ */ jsxs(Box$1, { sx: { display: "flex", alignItems: "center" }, children: [
                     /* @__PURE__ */ jsx(Icon, { icon: "tabler:message-circle-2", style: { height: 15, width: 15, marginRight: 4 } }),
-                    /* @__PURE__ */ jsx(Box, { component: "span", sx: { mr: 0.5 }, children: message.sourceUser.fullName }),
+                    /* @__PURE__ */ jsx(Box$1, { component: "span", sx: { mr: 0.5 }, children: message.sourceUser.fullName }),
                     /* @__PURE__ */ jsxs("span", { children: [
                       " ",
                       t("chat.mentionInComment")
@@ -4325,14 +4325,14 @@ function NotificationMessage({ chat, message, prevMessage }) {
     }
     if (message.type === "mentionInPost") {
       return /* @__PURE__ */ jsxs(
-        Box,
+        Box$1,
         {
           sx: {
             ...baseCardSx
           },
           children: [
             /* @__PURE__ */ jsxs(
-              Box,
+              Box$1,
               {
                 sx: {
                   display: "flex",
@@ -4342,9 +4342,9 @@ function NotificationMessage({ chat, message, prevMessage }) {
                   color: "primary.light"
                 },
                 children: [
-                  /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center" }, children: [
+                  /* @__PURE__ */ jsxs(Box$1, { sx: { display: "flex", alignItems: "center" }, children: [
                     /* @__PURE__ */ jsx(Icon, { icon: "tabler:message-circle-2", style: { height: 15, width: 15, marginRight: 4 } }),
-                    /* @__PURE__ */ jsx(Box, { component: "span", sx: { mr: 0.5 }, children: message.sourceUser.fullName }),
+                    /* @__PURE__ */ jsx(Box$1, { component: "span", sx: { mr: 0.5 }, children: message.sourceUser.fullName }),
                     /* @__PURE__ */ jsx("span", { children: t("chat.mentionInPost") })
                   ] }),
                   /* @__PURE__ */ jsx(Time, { createdAt: message.createdAt })
@@ -4361,8 +4361,8 @@ function NotificationMessage({ chat, message, prevMessage }) {
       const unit = points > 1 ? t("chat.points") : t("chat.point");
       const event = eventKey ? `for ${eventKey.toLowerCase().replaceAll("-", " ")}: ` : ": ";
       const tip = t("chat.pointUp", { points, unit, event });
-      return /* @__PURE__ */ jsxs(Box, { children: [
-        /* @__PURE__ */ jsx(Box, { component: "span", sx: { color: "grey.600" }, children: tip }),
+      return /* @__PURE__ */ jsxs(Box$1, { children: [
+        /* @__PURE__ */ jsx(Box$1, { component: "span", sx: { color: "grey.600" }, children: tip }),
         comment && /* @__PURE__ */ jsx(Typography, { variant: "body1", children: comment.excerpt }),
         post && renderQuote(post)
       ] });
@@ -4375,14 +4375,14 @@ function NotificationMessage({ chat, message, prevMessage }) {
         unassign: t("chat.unassignTask")
       };
       return /* @__PURE__ */ jsxs(
-        Box,
+        Box$1,
         {
           sx: {
             ...baseCardSx
           },
           children: [
             /* @__PURE__ */ jsxs(
-              Box,
+              Box$1,
               {
                 sx: {
                   display: "flex",
@@ -4392,9 +4392,9 @@ function NotificationMessage({ chat, message, prevMessage }) {
                   color: "primary.light"
                 },
                 children: [
-                  /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center" }, children: [
+                  /* @__PURE__ */ jsxs(Box$1, { sx: { display: "flex", alignItems: "center" }, children: [
                     /* @__PURE__ */ jsx(Icon, { icon: "tabler:arrow-forward-up", style: { height: 15, width: 15, marginRight: 4 } }),
-                    /* @__PURE__ */ jsx(Box, { component: "span", sx: { mr: 0.5 }, children: message.sourceUser.fullName }),
+                    /* @__PURE__ */ jsx(Box$1, { component: "span", sx: { mr: 0.5 }, children: message.sourceUser.fullName }),
                     /* @__PURE__ */ jsx("span", { children: titles[message.subtype] })
                   ] }),
                   /* @__PURE__ */ jsx(Time, { createdAt: message.createdAt })
@@ -4408,7 +4408,7 @@ function NotificationMessage({ chat, message, prevMessage }) {
     }
     return /* @__PURE__ */ jsx(Message, { message, showTime: false });
   };
-  return /* @__PURE__ */ jsx(Box, { sx: { ...baseItemSx, fontSize: 14 }, children: render() });
+  return /* @__PURE__ */ jsx(Box$1, { sx: { ...baseItemSx, fontSize: 14 }, children: render() });
 }
 const checkIsAtBottom = (element) => {
   return element && (element.scrollHeight === 0 || element.scrollHeight - element.scrollTop < element.clientHeight + 60);
@@ -4446,9 +4446,9 @@ function MessageList({ chat, ...rest }) {
       setIsAtBottom(checkIsAtBottom(containerRef.current));
     }
   }, [isActive]);
-  return /* @__PURE__ */ jsxs(Box, { ...rest, sx: { position: "relative", height: "100%" }, children: [
+  return /* @__PURE__ */ jsxs(Box$1, { ...rest, sx: { position: "relative", height: "100%" }, children: [
     /* @__PURE__ */ jsxs(
-      Box,
+      Box$1,
       {
         sx: {
           height: "100%",
@@ -4479,7 +4479,7 @@ function MessageList({ chat, ...rest }) {
         ref: containerRef,
         children: [
           chat.nextCursor && /* @__PURE__ */ jsx(
-            Box,
+            Box$1,
             {
               id: "next-cursor",
               sx: {
@@ -4527,12 +4527,12 @@ function MessageList({ chat, ...rest }) {
           chat.type !== "notification" && ((_a2 = chat.messages) == null ? void 0 : _a2.map((message, index) => {
             var _a3;
             const prev = (_a3 = chat.messages) == null ? void 0 : _a3[index - 1];
-            return /* @__PURE__ */ jsx(Box, { className: "message-item", id: message.id, children: /* @__PURE__ */ jsx(Message, { message, prevMessage: prev }) }, message.id);
+            return /* @__PURE__ */ jsx(Box$1, { className: "message-item", id: message.id, children: /* @__PURE__ */ jsx(Message, { message, prevMessage: prev }) }, message.id);
           })),
           chat.type === "notification" && ((_b2 = chat.messages) == null ? void 0 : _b2.map((message, index) => {
             var _a3;
             const prev = (_a3 = chat.messages) == null ? void 0 : _a3[index - 1];
-            return /* @__PURE__ */ jsx(Box, { className: "message-item", id: message.id, children: /* @__PURE__ */ jsx(
+            return /* @__PURE__ */ jsx(Box$1, { className: "message-item", id: message.id, children: /* @__PURE__ */ jsx(
               NotificationMessage,
               {
                 chat,
@@ -4544,7 +4544,7 @@ function MessageList({ chat, ...rest }) {
         ]
       }
     ),
-    !isAtBottom && /* @__PURE__ */ jsx(Box, { sx: { position: "absolute", bottom: 16, right: 24 }, onClick: scrollToBottom, children: /* @__PURE__ */ jsx(Fab, { color: "inherit", sx: { width: { xs: 36, sm: 44 }, height: { xs: 36, sm: 44 } }, children: /* @__PURE__ */ jsx(ArrowDownward, {}) }) })
+    !isAtBottom && /* @__PURE__ */ jsx(Box$1, { sx: { position: "absolute", bottom: 16, right: 24 }, onClick: scrollToBottom, children: /* @__PURE__ */ jsx(Fab, { color: "inherit", sx: { width: { xs: 36, sm: 44 }, height: { xs: 36, sm: 44 } }, children: /* @__PURE__ */ jsx(ArrowDownward, {}) }) })
   ] });
 }
 const HtmlTooltip = styled(({ className, ...props }) => /* @__PURE__ */ jsx(Tooltip$1, { ...props, classes: { popper: className } }))(() => ({
@@ -4583,7 +4583,7 @@ function Participants({ users, sx, ...rest }) {
     },
     ...Array.isArray(sx) ? sx : [sx]
   ];
-  return /* @__PURE__ */ jsx(ClickAwayListener, { onClickAway: handleTooltipClose, children: /* @__PURE__ */ jsx(Box$1, { children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(ClickAwayListener, { onClickAway: handleTooltipClose, children: /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
     HtmlTooltip,
     {
       PopperProps: {
@@ -4594,10 +4594,10 @@ function Participants({ users, sx, ...rest }) {
       disableFocusListener: true,
       disableHoverListener: true,
       disableTouchListener: true,
-      title: /* @__PURE__ */ jsx(Fragment, { children: users.map((item, i) => /* @__PURE__ */ jsx(Box$1, { sx: { p: 1 }, children: /* @__PURE__ */ jsx(AuthorInfo, { user: item, size: "sm" }) }, i)) }),
+      title: /* @__PURE__ */ jsx(Fragment, { children: users.map((item, i) => /* @__PURE__ */ jsx(Box, { sx: { p: 1 }, children: /* @__PURE__ */ jsx(AuthorInfo, { user: item, size: "sm" }) }, i)) }),
       children: /* @__PURE__ */ jsxs(Button$1, { ...rest, sx: mergedSx, onClick: handleTooltipOpen, children: [
         /* @__PURE__ */ jsx(Avatars, { users: visibleUsers, max: 5 }),
-        /* @__PURE__ */ jsx(Box$1, { sx: { fontSize: 12, fontWeight: "bold", color: "grey.600" }, children: users.length })
+        /* @__PURE__ */ jsx(Box, { sx: { fontSize: 12, fontWeight: "bold", color: "grey.600" }, children: users.length })
       ] })
     }
   ) }) });
@@ -4656,7 +4656,7 @@ function getLineClamp(count) {
   };
 }
 function RoomTitle({ title }) {
-  return /* @__PURE__ */ jsx(Box, { component: "span", sx: { fontSize: 14, fontWeight: "medium" }, children: title });
+  return /* @__PURE__ */ jsx(Box$1, { component: "span", sx: { fontSize: 14, fontWeight: "medium" }, children: title });
 }
 function ChatRoom({ chat, inWallet, ...rest }) {
   var _a2;
@@ -4668,6 +4668,7 @@ function ChatRoom({ chat, inWallet, ...rest }) {
   const isActive = isActiveChat(chat.id);
   const { session, isAdmin } = useSessionContext();
   const isCreator = chat.creator.did === ((_a2 = session == null ? void 0 : session.user) == null ? void 0 : _a2.did);
+  const [input, setInput] = useState("");
   useEffect(() => {
     if (chat.isActivated) {
       initChatRoom(chat.id);
@@ -4695,31 +4696,31 @@ function ChatRoom({ chat, inWallet, ...rest }) {
       const menuItems = [];
       if (chat.hasJoined && !isCreator) {
         menuItems.push(
-          /* @__PURE__ */ jsx(Menu.Item, { onClick: () => leaveChannel(chat.id), children: /* @__PURE__ */ jsx(Box, { component: "span", sx: { color: "error.main" }, children: t("chat.leaveChannel") }) }, "leave")
+          /* @__PURE__ */ jsx(Menu.Item, { onClick: () => leaveChannel(chat.id), children: /* @__PURE__ */ jsx(Box$1, { component: "span", sx: { color: "error.main" }, children: t("chat.leaveChannel") }) }, "leave")
         );
       }
       if (isAdmin || isCreator) {
         menuItems.push(
-          /* @__PURE__ */ jsx(Menu.Item, { onClick: handleDeleteChannel, children: /* @__PURE__ */ jsx(Box, { component: "span", sx: { color: "error.main" }, children: t("chat.deleteChannel") }) }, "delete")
+          /* @__PURE__ */ jsx(Menu.Item, { onClick: handleDeleteChannel, children: /* @__PURE__ */ jsx(Box$1, { component: "span", sx: { color: "error.main" }, children: t("chat.deleteChannel") }) }, "delete")
         );
       }
-      return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center", width: 1, flex: 1 }, children: [
-        /* @__PURE__ */ jsxs(Box, { children: [
-          /* @__PURE__ */ jsx(Box, { component: "span", sx: { fontSize: 14, fontWeight: "bold", color: "grey.700", ...getLineClamp(1) }, children: chat.name }),
-          /* @__PURE__ */ jsx(Box, { sx: { fontSize: 12, color: "grey.500", ...getLineClamp(1) }, children: chat.description })
+      return /* @__PURE__ */ jsxs(Box$1, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center", width: 1, flex: 1 }, children: [
+        /* @__PURE__ */ jsxs(Box$1, { children: [
+          /* @__PURE__ */ jsx(Box$1, { component: "span", sx: { fontSize: 14, fontWeight: "bold", color: "grey.700", ...getLineClamp(1) }, children: chat.name }),
+          /* @__PURE__ */ jsx(Box$1, { sx: { fontSize: 12, color: "grey.500", ...getLineClamp(1) }, children: chat.description })
         ] }),
-        /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+        /* @__PURE__ */ jsxs(Box$1, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
           !chat.hasJoined && /* @__PURE__ */ jsx(
             Button,
             {
               variant: "contained",
               color: "primary",
               onClick: () => joinChannel(chat.id),
-              startIcon: /* @__PURE__ */ jsx(Box, { component: tablerUsersPlus, sx: { fontSize: "16px!important" } }),
+              startIcon: /* @__PURE__ */ jsx(Box$1, { component: tablerUsersPlus, sx: { fontSize: "16px!important" } }),
               children: t("chat.joinChannel")
             }
           ),
-          chat.hasJoined && /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Participants, { users: chat.participants, sx: { border: "none" } }) }),
+          chat.hasJoined && /* @__PURE__ */ jsx(Box$1, { children: /* @__PURE__ */ jsx(Participants, { users: chat.participants, sx: { border: "none" } }) }),
           /* @__PURE__ */ jsx(Menu, { items: menuItems })
         ] })
       ] });
@@ -4727,11 +4728,11 @@ function ChatRoom({ chat, inWallet, ...rest }) {
     return null;
   };
   if (chat.isActivated && !chat.ready) {
-    return /* @__PURE__ */ jsx(Box, { sx: { display: "flex", justifyContent: "center", alignItems: "center", height: 1 }, children: /* @__PURE__ */ jsx(CircularProgress, {}) });
+    return /* @__PURE__ */ jsx(Box$1, { sx: { display: "flex", justifyContent: "center", alignItems: "center", height: 1 }, children: /* @__PURE__ */ jsx(CircularProgress, {}) });
   }
-  return /* @__PURE__ */ jsxs(Box, { ...rest, sx: { display: isActive ? "flex" : "none", flexDirection: "column", height: "100%" }, children: [
+  return /* @__PURE__ */ jsxs(Box$1, { ...rest, sx: { display: isActive ? "flex" : "none", flexDirection: "column", height: "100%" }, children: [
     !inWallet && /* @__PURE__ */ jsxs(
-      Box,
+      Box$1,
       {
         sx: {
           display: "flex",
@@ -4747,9 +4748,9 @@ function ChatRoom({ chat, inWallet, ...rest }) {
         ]
       }
     ),
-    /* @__PURE__ */ jsx(Box, { sx: { flex: 1, overflow: "hidden", background: theme.palette.grey[50] }, children: /* @__PURE__ */ jsx(MessageList, { chat }) }),
+    /* @__PURE__ */ jsx(Box$1, { sx: { flex: 1, overflow: "hidden", background: theme.palette.grey[50] }, children: /* @__PURE__ */ jsx(MessageList, { chat }) }),
     /* @__PURE__ */ jsx(
-      Box,
+      Box$1,
       {
         sx: {
           flex: "0 0 auto",
@@ -4761,10 +4762,12 @@ function ChatRoom({ chat, inWallet, ...rest }) {
             borderRadius: "0px !important"
           }
         },
-        children: /* @__PURE__ */ jsxs(Box, { sx: { position: "relative" }, children: [
-          /* @__PURE__ */ jsx(
+        children: /* @__PURE__ */ jsxs(Box$1, { sx: { position: "relative" }, children: [
+          isActive && /* @__PURE__ */ jsx(
             CommentInput,
             {
+              initialContent: input,
+              onChange: (editorState) => setInput(editorState ? JSON.stringify(editorState) : ""),
               send: (content) => sendMessage(chat.id, content),
               placeholder: t("chat.typeSomething"),
               sendText: t("chat.reply"),
@@ -4772,7 +4775,7 @@ function ChatRoom({ chat, inWallet, ...rest }) {
             }
           ),
           chat.type === "channel" && !chat.hasJoined && /* @__PURE__ */ jsxs(
-            Box,
+            Box$1,
             {
               sx: {
                 position: "absolute",
@@ -4789,10 +4792,10 @@ function ChatRoom({ chat, inWallet, ...rest }) {
                 color: "#fff"
               },
               children: [
-                /* @__PURE__ */ jsx(Box, { sx: { mb: 0.5, fontSize: 18 }, children: "🚪" }),
-                /* @__PURE__ */ jsx(Box, { sx: { color: "primary.main", mb: 0.5, fontSize: 13, fontWeight: 500 }, children: t("chat.notYetJoinedTheChannel") }),
+                /* @__PURE__ */ jsx(Box$1, { sx: { mb: 0.5, fontSize: 18 }, children: "🚪" }),
+                /* @__PURE__ */ jsx(Box$1, { sx: { color: "primary.main", mb: 0.5, fontSize: 13, fontWeight: 500 }, children: t("chat.notYetJoinedTheChannel") }),
                 /* @__PURE__ */ jsx(
-                  Box,
+                  Box$1,
                   {
                     sx: { color: "secondary.main", cursor: "pointer", fontSize: 13 },
                     onClick: () => joinChannel(chat.id),
@@ -4834,7 +4837,7 @@ function NewChannelDialog({ open, onSubmit, onClose, ...rest }) {
       onClose,
       ...rest,
       children: /* @__PURE__ */ jsxs(
-        Box,
+        Box$1,
         {
           width: { xs: "100%", md: 560 },
           sx: {
@@ -4845,8 +4848,8 @@ function NewChannelDialog({ open, onSubmit, onClose, ...rest }) {
           },
           minHeight: 140,
           children: [
-            /* @__PURE__ */ jsxs(Box, { children: [
-              /* @__PURE__ */ jsx(Box, { sx: { fontSize: 14, fontWeight: "medium", mb: 0 }, children: t("chat.channelName") }),
+            /* @__PURE__ */ jsxs(Box$1, { children: [
+              /* @__PURE__ */ jsx(Box$1, { sx: { fontSize: 14, fontWeight: "medium", mb: 0 }, children: t("chat.channelName") }),
               /* @__PURE__ */ jsx(
                 TextField,
                 {
@@ -4864,8 +4867,8 @@ function NewChannelDialog({ open, onSubmit, onClose, ...rest }) {
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs(Box, { children: [
-              /* @__PURE__ */ jsx(Box, { sx: { fontSize: 14, fontWeight: "medium", mb: 0 }, children: t("chat.channelDescription") }),
+            /* @__PURE__ */ jsxs(Box$1, { children: [
+              /* @__PURE__ */ jsx(Box$1, { sx: { fontSize: 14, fontWeight: "medium", mb: 0 }, children: t("chat.channelDescription") }),
               /* @__PURE__ */ jsx(
                 TextField,
                 {
@@ -4924,7 +4927,7 @@ function UserSearch({ sx, ...rest }) {
     }
   );
   const mergedSx = mergeSx({}, sx);
-  return /* @__PURE__ */ jsxs(Box$1, { sx: mergedSx, ...rest, children: [
+  return /* @__PURE__ */ jsxs(Box, { sx: mergedSx, ...rest, children: [
     /* @__PURE__ */ jsx(
       Autocomplete,
       {
@@ -4938,10 +4941,10 @@ function UserSearch({ sx, ...rest }) {
         filterOptions: (x) => x,
         options: data || [],
         getOptionLabel: () => "",
-        renderOption: (props, option) => /* @__PURE__ */ createElement(Box$1, { component: "li", ...props, key: option.did, sx: { px: "8px!important" } }, /* @__PURE__ */ jsxs(Box$1, { sx: { display: "flex", alignItems: "center", width: 1 }, children: [
-          /* @__PURE__ */ jsx(Box$1, { sx: { mt: 0.25, lineHeight: 1 }, children: /* @__PURE__ */ jsx(Avatar, { did: option.did, src: option.avatar, size: 28, shape: "circle", variant: "circle" }) }),
+        renderOption: (props, option) => /* @__PURE__ */ createElement(Box, { component: "li", ...props, key: option.did, sx: { px: "8px!important" } }, /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", width: 1 }, children: [
+          /* @__PURE__ */ jsx(Box, { sx: { mt: 0.25, lineHeight: 1 }, children: /* @__PURE__ */ jsx(Avatar, { did: option.did, src: option.avatar, size: 28, shape: "circle", variant: "circle" }) }),
           /* @__PURE__ */ jsxs(
-            Box$1,
+            Box,
             {
               sx: {
                 flex: 1,
@@ -4965,7 +4968,7 @@ function UserSearch({ sx, ...rest }) {
                     children: option.fullName
                   }
                 ),
-                /* @__PURE__ */ jsx(Box$1, { sx: { ".span": { lineHeight: 1 } }, children: /* @__PURE__ */ jsx(DID, { did: option.did, copyable: false, compact: true, responsive: false, size: 12 }) })
+                /* @__PURE__ */ jsx(Box, { sx: { ".span": { lineHeight: 1 } }, children: /* @__PURE__ */ jsx(DID, { did: option.did, copyable: false, compact: true, responsive: false, size: 12 }) })
               ]
             }
           )
@@ -5006,7 +5009,7 @@ function UserSearch({ sx, ...rest }) {
             InputProps: {
               ...params.InputProps,
               type: "search",
-              startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(Box$1, { component: tablerSearch, sx: { fontSize: 14 } }) })
+              startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(Box, { component: tablerSearch, sx: { fontSize: 14 } }) })
             },
             sx: {
               fontSize: 12,
@@ -5039,9 +5042,9 @@ function Empty$2({ sx }) {
     },
     ...Array.isArray(sx) ? sx : [sx]
   ];
-  return /* @__PURE__ */ jsxs(Box, { sx: mergedSx, children: [
+  return /* @__PURE__ */ jsxs(Box$1, { sx: mergedSx, children: [
     /* @__PURE__ */ jsx(iconoirChatBubbleEmpty, { style: { fontSize: 32 } }),
-    /* @__PURE__ */ jsx(Box, { component: "span", sx: { fontSize: 14, fontWeight: 500 }, children: t("chat.noChats") })
+    /* @__PURE__ */ jsx(Box$1, { component: "span", sx: { fontSize: 14, fontWeight: 500 }, children: t("chat.noChats") })
   ] });
 }
 function Chat({ sx, ...rest }) {
@@ -5090,10 +5093,10 @@ function Chat({ sx, ...rest }) {
     setNewChannelVisible(false);
     setActiveChat(newChannel);
   };
-  return /* @__PURE__ */ jsxs(Box, { ...rest, sx: mergedSx, children: [
+  return /* @__PURE__ */ jsxs(Box$1, { ...rest, sx: mergedSx, children: [
     /* @__PURE__ */ jsx(Helmet, { title: getWebTitle() }),
     show.left && /* @__PURE__ */ jsxs(
-      Box,
+      Box$1,
       {
         sx: {
           display: "flex",
@@ -5103,7 +5106,7 @@ function Chat({ sx, ...rest }) {
         },
         children: [
           /* @__PURE__ */ jsxs(
-            Box,
+            Box$1,
             {
               sx: {
                 display: "flex",
@@ -5132,7 +5135,7 @@ function Chat({ sx, ...rest }) {
         ]
       }
     ),
-    show.right && /* @__PURE__ */ jsxs(Box, { sx: { flex: 1, overflow: "hidden" }, children: [
+    show.right && /* @__PURE__ */ jsxs(Box$1, { sx: { flex: 1, overflow: "hidden" }, children: [
       chats.map((chat) => {
         return /* @__PURE__ */ jsx(ChatRoom, { chat, inWallet: false }, chat.id);
       }),
@@ -5162,9 +5165,9 @@ function Empty$1({ sx }) {
     },
     ...Array.isArray(sx) ? sx : [sx]
   ];
-  return /* @__PURE__ */ jsxs(Box, { sx: mergedSx, children: [
+  return /* @__PURE__ */ jsxs(Box$1, { sx: mergedSx, children: [
     /* @__PURE__ */ jsx(iconoirChatBubbleEmpty, { style: { fontSize: 32 } }),
-    /* @__PURE__ */ jsx(Box, { component: "span", sx: { fontSize: 14, fontWeight: 500 }, children: t("chat.noChats") })
+    /* @__PURE__ */ jsx(Box$1, { component: "span", sx: { fontSize: 14, fontWeight: 500 }, children: t("chat.noChats") })
   ] });
 }
 function ChatInWallet({ sx, ...rest }) {
@@ -5189,7 +5192,7 @@ function ChatInWallet({ sx, ...rest }) {
     return /* @__PURE__ */ jsx(CircularProgress, {});
   }
   const mergedSx = [{ display: "flex", height: "100%", bgcolor: "#fff" }, ...Array.isArray(sx) ? sx : [sx]];
-  return /* @__PURE__ */ jsx(Box, { ...rest, sx: mergedSx, children: show.right && /* @__PURE__ */ jsxs(Box, { sx: { flex: 1, overflow: "hidden" }, children: [
+  return /* @__PURE__ */ jsx(Box$1, { ...rest, sx: mergedSx, children: show.right && /* @__PURE__ */ jsxs(Box$1, { sx: { flex: 1, overflow: "hidden" }, children: [
     /* @__PURE__ */ jsx(ChatRoom, { chat: activeChat, inWallet: true }),
     !activeChatId && /* @__PURE__ */ jsx(Empty$1, { sx: { height: 1 } })
   ] }) });
@@ -5207,9 +5210,9 @@ function Empty({ sx }) {
     },
     ...Array.isArray(sx) ? sx : [sx]
   ];
-  return /* @__PURE__ */ jsxs(Box, { sx: mergedSx, children: [
+  return /* @__PURE__ */ jsxs(Box$1, { sx: mergedSx, children: [
     /* @__PURE__ */ jsx(iconoirChatBubbleEmpty, { style: { fontSize: 32 } }),
-    /* @__PURE__ */ jsx(Box, { component: "span", sx: { fontSize: 14, fontWeight: 500 }, children: t("chat.noChats") })
+    /* @__PURE__ */ jsx(Box$1, { component: "span", sx: { fontSize: 14, fontWeight: 500 }, children: t("chat.noChats") })
   ] });
 }
 function ChatListInWallet({ sx, ...rest }) {
@@ -5231,8 +5234,8 @@ function ChatListInWallet({ sx, ...rest }) {
     return /* @__PURE__ */ jsx(CircularProgress, {});
   }
   const mergedSx = [{ display: "flex", height: "100%", bgcolor: "#fff" }, ...Array.isArray(sx) ? sx : [sx]];
-  return /* @__PURE__ */ jsx(Box, { ...rest, sx: mergedSx, children: show.left && /* @__PURE__ */ jsxs(
-    Box,
+  return /* @__PURE__ */ jsx(Box$1, { ...rest, sx: mergedSx, children: show.left && /* @__PURE__ */ jsxs(
+    Box$1,
     {
       sx: {
         display: "flex",
@@ -5267,7 +5270,7 @@ function SecureLabelPicker(props) {
   const addon = editable ? (
     // @ts-ignore
     /* @__PURE__ */ jsx(AccessControl, { roles: ["admin", "owner"], children: /* @__PURE__ */ jsxs(
-      Box,
+      Box$1,
       {
         className: "label-box",
         component: Link,
@@ -5361,9 +5364,9 @@ const useDefaultApiErrorHandler = (options) => {
           }
           case 409: {
             showWarning(
-              /* @__PURE__ */ jsxs(Box, { children: [
-                /* @__PURE__ */ jsx(Box, { children: t("apiError.409") }),
-                /* @__PURE__ */ jsxs(Box, { children: [
+              /* @__PURE__ */ jsxs(Box$1, { children: [
+                /* @__PURE__ */ jsx(Box$1, { children: t("apiError.409") }),
+                /* @__PURE__ */ jsxs(Box$1, { children: [
                   "(",
                   t("apiError.staleTip"),
                   ")"
@@ -5578,9 +5581,9 @@ function Pagination({
     }
   );
 }
-const Editor = lazy(() => import("./editor-xw6iQCuH.mjs"));
+const Editor = lazy(() => import("./editor-s7PBL7A3.mjs"));
 function LazyEditor(props) {
-  const fallback = /* @__PURE__ */ jsxs(Box$1, { sx: { px: 3 }, children: [
+  const fallback = /* @__PURE__ */ jsxs(Box, { sx: { px: 3 }, children: [
     /* @__PURE__ */ jsx(Skeleton, {}),
     /* @__PURE__ */ jsx(Skeleton, { width: "80%" }),
     /* @__PURE__ */ jsx(Skeleton, { width: "60%" }),
@@ -5629,8 +5632,22 @@ const useDirtyPrompt = () => {
   const { t } = useLocaleContext();
   const [dirty, setDirty, getDirty] = useGetState(false);
   const { confirm } = useConfirm();
+  const resetCallbackRef = useRef(null);
   useBeforeUnloadPrompt(dirty);
-  const reset = useCallback(() => setDirty(false), [setDirty]);
+  const reset = useCallback(
+    (callback) => {
+      resetCallbackRef.current = callback;
+      setDirty(false);
+    },
+    [setDirty]
+  );
+  useEffect(() => {
+    var _a2;
+    if (!dirty) {
+      (_a2 = resetCallbackRef.current) == null ? void 0 : _a2.call(resetCallbackRef);
+      resetCallbackRef.current = null;
+    }
+  }, [dirty]);
   const markDirty = useCallback(() => setDirty(true), [setDirty]);
   const check = useCallback(async () => {
     if (getDirty()) {
@@ -11384,7 +11401,7 @@ const usePointUpContext = () => useContext(PointUpContext);
 function PointUp({ points }) {
   const { t } = useLocaleContext();
   return /* @__PURE__ */ jsxs(
-    Box,
+    Box$1,
     {
       sx: {
         display: "inline-flex",
@@ -11405,7 +11422,7 @@ function PointUp({ points }) {
           }
         ),
         /* @__PURE__ */ jsx(
-          Box,
+          Box$1,
           {
             sx: {
               mt: 1,
@@ -11485,7 +11502,7 @@ function PointUpProvider({ children }) {
   return /* @__PURE__ */ jsxs(PointUpContext.Provider, { value, children: [
     (pointUpComponent == null ? void 0 : pointUpComponent.mountPoint) && createPortal(
       /* @__PURE__ */ jsx(
-        Box,
+        Box$1,
         {
           onClick: () => {
             window.open(joinUrl(window.location.origin, pointUpComponent.mountPoint, "my"));
@@ -11594,9 +11611,9 @@ function ButtonGroup({
   }, [selectTab, selectedArray, boardId]);
   return (
     // eslint-disable-next-line @typescript-eslint/no-use-before-define
-    /* @__PURE__ */ jsxs(Box$1, { className: Group, children: [
+    /* @__PURE__ */ jsxs(Box, { className: Group, children: [
       /* @__PURE__ */ jsxs(
-        Box$1,
+        Box,
         {
           sx: {
             bgcolor: theme === "dark" ? "#F9FAFB" : "",
@@ -11637,7 +11654,7 @@ function ButtonGroup({
                     }
                   },
                   ...rest,
-                  children: /* @__PURE__ */ jsxs(Box$1, { sx: { display: "flex", alignItems: "center" }, children: [
+                  children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center" }, children: [
                     item == null ? void 0 : item.icon,
                     " ",
                     item == null ? void 0 : item.title