@blocklet/list 0.16.57 → 0.16.58

package/lib/index.es.js

@@ -1,75 +1,76 @@
-import { jsx as t, jsxs as h, Fragment as F } from "react/jsx-runtime";
+import { jsx as t, jsxs as u, Fragment as F } from "react/jsx-runtime";
 import { styled as Q, useTheme as we } from "@arcblock/ux/lib/Theme";
-import et from "@mui/material/styles/createTheme";
-import tt from "@mui/material/styles/ThemeProvider";
-import { pick as rt, omitBy as ae, orderBy as ot, isEmpty as nt, merge as it } from "lodash-es";
+import tt from "@mui/material/styles/createTheme";
+import rt from "@mui/material/styles/ThemeProvider";
+import { pick as ot, omitBy as se, orderBy as nt, isEmpty as it, merge as lt } from "lodash-es";
 import { ErrorFallback as be } from "@arcblock/ux/lib/ErrorBoundary";
 import w from "@mui/material/Box";
 import O from "@mui/material/Stack";
-import { createContext as _e, useState as E, useMemo as G, useContext as Me, useCallback as ge, useEffect as q, forwardRef as lt, useRef as te, memo as at } from "react";
-import { ErrorBoundary as st } from "react-error-boundary";
-import ct from "@iconify-icons/tabler/compass";
+import { createContext as _e, useState as E, useMemo as G, useContext as Me, useCallback as ge, useEffect as q, forwardRef as at, useRef as re, memo as st } from "react";
+import { ErrorBoundary as ct } from "react-error-boundary";
+import dt from "@iconify-icons/tabler/compass";
 import { Icon as M } from "@iconify/react";
 import ze from "@mui/icons-material/Close";
 import v from "@mui/material/Typography";
 import { createAxios as Fe } from "@blocklet/js-sdk";
-import { useRequest as oe, useDebounceFn as De, useInfiniteScroll as dt, useReactive as ut } from "ahooks";
+import { useRequest as ne, useDebounceFn as Ne, useInfiniteScroll as ht, useReactive as ut } from "ahooks";
 import "color";
-import { parseURL as ht, parseQuery as pt, parseFilename as mt, stringifyParsedURL as ft, withQuery as ke, joinURL as Ie } from "ufo";
-import Re from "flat";
-import ne from "@mui/material/Button";
-import gt from "@mui/material/styles/useTheme";
+import { parseURL as pt, parseQuery as mt, parseFilename as ft, stringifyParsedURL as gt, withQuery as ke, joinURL as Ie } from "ufo";
+import Be from "flat";
+import ie from "@mui/material/Button";
+import yt from "@mui/material/styles/useTheme";
 import V from "@mui/material/useMediaQuery";
-import yt from "@mui/material/Drawer";
-import Ne from "@mui/material/Checkbox";
+import xt from "@mui/material/Drawer";
+import De from "@mui/material/Checkbox";
 import We from "@mui/material/FormControlLabel";
-import xt from "@mui/icons-material/Check";
-import wt from "@mui/icons-material/KeyboardArrowDown";
-import bt from "@mui/material/ClickAwayListener";
-import kt from "@mui/material/Grow";
+import wt from "@mui/icons-material/Check";
+import bt from "@mui/icons-material/KeyboardArrowDown";
+import kt from "@mui/material/ClickAwayListener";
+import vt from "@mui/material/Grow";
 import $e from "@mui/material/MenuItem";
 import je from "@mui/material/MenuList";
-import vt from "@mui/material/Paper";
-import Ct from "@mui/material/Popper";
-import St from "@mui/material/SvgIcon";
-import ie from "@mui/material/CircularProgress";
+import Ct from "@mui/material/Paper";
+import St from "@mui/material/Popper";
+import It from "@mui/material/SvgIcon";
+import le from "@mui/material/CircularProgress";
 import He from "@arcblock/ux/lib/Avatar";
-import It from "@iconify-icons/tabler/cloud-download";
+import Bt from "@iconify-icons/tabler/cloud-download";
 import Rt from "@mui/icons-material/ChevronLeft";
-import Bt from "@mui/icons-material/ChevronRight";
+import Tt from "@mui/icons-material/ChevronRight";
 import _ from "@mui/material/Skeleton";
-import Tt from "react-image-gallery";
+import Pt from "react-image-gallery";
 import "react-image-gallery/styles/css/image-gallery.css";
-import Be from "@mui/material/Grid";
-import Pt from "react-infinite-scroll-hook";
-import At from "@iconify-icons/tabler/square";
-import Et from "@iconify-icons/tabler/square-check-filled";
+import Re from "@mui/material/Grid";
+import At from "react-infinite-scroll-hook";
+import Et from "@iconify-icons/tabler/square";
+import Ot from "@iconify-icons/tabler/square-check-filled";
 import Te from "@mui/material/Chip";
-import { useTheme as Ot } from "@mui/material/styles";
-import se from "@iconify-icons/tabler/search";
-import Lt from "@iconify-icons/tabler/x";
-import _t from "@mui/material/Autocomplete";
-import Mt from "@mui/material/Dialog";
+import { useTheme as Lt } from "@mui/material/styles";
+import ce from "@iconify-icons/tabler/search";
+import _t from "@iconify-icons/tabler/x";
+import Mt from "@mui/material/Autocomplete";
+import zt from "@mui/material/Dialog";
 import Ue from "@mui/material/OutlinedInput";
-import zt from "@mui/material/TextField";
-import { useHotkeys as Ft } from "react-hotkeys-hook";
+import Ft from "@mui/material/TextField";
+import { useHotkeys as Nt } from "react-hotkeys-hook";
 import Dt from "@mui/icons-material/Search";
 import Pe from "@mui/material/InputAdornment";
-import Nt from "@arcblock/ux/lib/Empty";
-import Wt from "json-stable-stringify";
-import $t from "@mui/icons-material/Menu";
-import { Card as jt, Box as ce, Skeleton as L } from "@mui/material";
-import Ht from "@arcblock/ux/lib/Img";
+import Wt from "@arcblock/ux/lib/Empty";
+import $t from "json-stable-stringify";
+import jt from "@mui/icons-material/Menu";
+import { Box as te, Card as Ht, Skeleton as L } from "@mui/material";
+import Ut from "@arcblock/react-hooks/lib/useBrowser";
+import Vt from "@arcblock/ux/lib/Img";
 const Ve = _e({
   open: !1,
   toggleOpen: (e) => {
   }
 });
-function Ut({ children: e }) {
+function Gt({ children: e }) {
   const [r, o] = E(!1), n = (a) => {
     o(a ?? !a);
-  }, l = G(() => ({ open: r, toggleOpen: n }), [r]);
-  return /* @__PURE__ */ t(Ve.Provider, { value: l, children: e });
+  }, i = G(() => ({ open: r, toggleOpen: n }), [r]);
+  return /* @__PURE__ */ t(Ve.Provider, { value: i, children: e });
 }
 function ve() {
   return Me(Ve);
@@ -88,19 +89,19 @@ const P = {
   explorePath: "/api/blocklets/explore",
   exploreDidsPath: "/api/blocklets/dids",
   cacheSize: 100
-}, Vt = (e) => oe(
+}, qt = (e) => ne(
   async () => {
     const { data: r } = await e.get(P.categoriesPath);
     return Array.isArray(r) ? r : [];
   },
   { manual: !0 }
 );
-function Gt(e, r) {
+function Kt(e, r) {
   const o = e.menu ? {
     sortBy: "popularity",
     sortDirection: "desc",
     showResources: "true",
-    ...rt(e, ["sortBy", "sortDirection", "showResources"])
+    ...ot(e, ["sortBy", "sortDirection", "showResources"])
   } : {
     sortBy: "popularity",
     sortDirection: "desc",
@@ -109,52 +110,52 @@ function Gt(e, r) {
     menu: void 0
   }, {
     onFilterChange: n,
-    onSearchSelect: l = (i) => {
-      r.onFilterChange({ ...o, keyword: i.title });
+    onSearchSelect: i = (l) => {
+      r.onFilterChange({ ...o, keyword: l.title });
     },
     emptyCategory: a
   } = r;
   !o.category && !a && (o.category = "All");
-  const s = (i) => {
-    const m = { ...o, ...i };
-    n(ae(m, (d) => d === "" || d === void 0));
+  const s = (l) => {
+    const m = { ...o, ...l };
+    n(se(m, (c) => c === "" || c === void 0));
   };
   return {
     filters: e,
-    cleanFilter: (i) => {
-      const m = i ? ae(o, (d, f) => i.includes(f)) : {};
-      n(ae(m, (d) => d === "" || d === void 0));
+    cleanFilter: (l) => {
+      const m = l ? se(o, (c, f) => l.includes(f)) : {};
+      n(se(m, (c) => c === "" || c === void 0));
     },
-    handleActiveMenu: (i) => {
-      i !== e.menu && n({ menu: i });
+    handleActiveMenu: (l) => {
+      l !== e.menu && n({ menu: l });
     },
-    handleSort: (i, m) => {
-      s({ sortBy: i, sortDirection: m || i === "nameAsc" ? "asc" : "desc" });
+    handleSort: (l, m) => {
+      s({ sortBy: l, sortDirection: m || l === "nameAsc" ? "asc" : "desc" });
     },
-    handleKeyword: (i) => {
-      s({ category: void 0, keyword: i || void 0 });
+    handleKeyword: (l) => {
+      s({ category: void 0, keyword: l || void 0 });
     },
-    handlePrice: (i) => {
-      s({ price: i === e.price ? void 0 : i });
+    handlePrice: (l) => {
+      s({ price: l === e.price ? void 0 : l });
     },
-    handleCategory: (i) => {
-      s({ category: i === e.category ? "" : i });
+    handleCategory: (l) => {
+      s({ category: l === e.category ? "" : l });
     },
-    handleDeveloper: (i) => {
-      s({ owner: i || void 0 });
+    handleDeveloper: (l) => {
+      s({ owner: l || void 0 });
     },
-    handlePage: (i) => {
-      s({ currentPage: i });
+    handlePage: (l) => {
+      s({ currentPage: l });
     },
-    handleSwitchShowResources: (i) => {
-      s({ showResources: i });
+    handleSwitchShowResources: (l) => {
+      s({ showResources: l });
     },
-    handleSearchSelect: (i) => {
-      l(i);
+    handleSearchSelect: (l) => {
+      i(l);
     }
   };
 }
-const qt = (e, r, o) => e && r || !o, Ge = (e) => [
+const Xt = (e, r, o) => e && r || !o, Ge = (e) => [
   {
     name: e("sort.popularity"),
     value: "popularity"
@@ -168,28 +169,28 @@ const qt = (e, r, o) => e && r || !o, Ge = (e) => [
   //   value: 'rating',
   // },
 ], qe = (e, r, o) => {
-  var d, f;
-  const n = ht(e), l = pt(n.search);
-  if ((d = mt(e, { strict: !0 })) == null ? void 0 : d.endsWith(".gif"))
-    return l.imageFilter ? ft({ ...n, search: "" }) : e;
-  if (l.imageFilter)
+  var c, f;
+  const n = pt(e), i = mt(n.search);
+  if ((c = ft(e, { strict: !0 })) == null ? void 0 : c.endsWith(".gif"))
+    return i.imageFilter ? gt({ ...n, search: "" }) : e;
+  if (i.imageFilter)
     return e;
-  const s = o || ((f = window.blocklet) == null ? void 0 : f.version), { w: i, h: m } = typeof r == "object" ? { w: r.w, h: r.h } : { w: r, h: r };
+  const s = o || ((f = window.blocklet) == null ? void 0 : f.version), { w: l, h: m } = typeof r == "object" ? { w: r.w, h: r.h } : { w: r, h: r };
   return ke(e, {
-    ...i || m ? { imageFilter: "resize", w: i, h: m } : {},
+    ...l || m ? { imageFilter: "resize", w: l, h: m } : {},
     v: s
   });
-}, Kt = (e) => [
+}, Qt = (e) => [
   { name: e("blocklet.free"), value: "free" },
   { name: e("blocklet.payment"), value: "payment" }
-], Xt = (e = [], r = "en") => e.map((o) => ({ name: o.locales[r] || o.locales.en, value: o._id })), Qt = (e) => {
+], Yt = (e = [], r = "en") => e.map((o) => ({ name: o.locales[r] || o.locales.en, value: o._id })), Zt = (e) => {
   var r, o;
   return Array.isArray(e) ? e.map((n) => n.message).join(`
 `) : (o = (r = e.response) == null ? void 0 : r.data) != null && o.error ? e.response.data.error.message || e.response.data.error : e.message || e;
-}, Yt = (e, r) => (
+}, Jt = (e, r) => (
   // eslint-disable-next-line no-prototype-builtins
   e == null ? void 0 : e.replace(/{(\w*)}/g, (o, n) => r.hasOwnProperty(n) ? r[n] : "")
-), Zt = () => window.innerWidth <= 600, Jt = {
+), er = () => window.innerWidth <= 600, tr = {
   common: {
     title: "Blocklet Store",
     searchStore: "Search Blocklet",
@@ -241,7 +242,7 @@ const qt = (e, r, o) => e && r || !o, Ge = (e) => [
   autocomplete: {
     expandResult: 'View all search results for "{name}"'
   }
-}, er = {
+}, rr = {
   common: {
     title: "Blocklet 商店",
     searchStore: "搜索 Blocklet",
@@ -294,14 +295,14 @@ const qt = (e, r, o) => e && r || !o, Ge = (e) => [
     expandResult: "查看 “{name}” 的所有搜索结果"
   }
 }, de = {
-  en: Re(Jt),
-  zh: Re(er)
+  en: Be(tr),
+  zh: Be(rr)
 }, Ke = (e, r) => {
   const o = {};
   return e && (o["x-blocklet-server-version"] = e), r && (o["x-blocklet-store-version"] = r), o;
-}, tr = (e) => (r, o) => {
+}, or = (e) => (r, o) => {
   const n = de[e] ? de[e][r] : de.en[r];
-  return Yt(n, o) || r;
+  return Jt(n, o) || r;
 }, Xe = {
   errors: {
     fetchCategoriesError: null
@@ -357,87 +358,87 @@ const qt = (e, r, o) => e && r || !o, Ge = (e) => [
     handlePage: () => {
     }
   }
-}, Qe = _e(Xe), { Provider: rr, Consumer: Fo } = Qe;
-function or(e) {
+}, Qe = _e(Xe), { Provider: nr, Consumer: Do } = Qe;
+function ir(e) {
   const {
     locale: r = "zh",
     filters: o = {},
     serverVersion: n = "",
-    onFilterChange: l = () => {
+    onFilterChange: i = () => {
     },
     minItemWidth: a = 350,
     queryFilter: s = !0,
-    layout: i = {},
+    layout: l = {},
     wrapChildren: m = (T) => T,
-    extraFilter: d = (T) => T,
+    extraFilter: c = (T) => T,
     baseSearch: f = !1,
-    fetchCategoryDelay: u = 0,
+    fetchCategoryDelay: d = 0,
     showResourcesSwitch: g = !1,
     showCategory: y = !0,
     tagFilters: I = [],
     children: x,
-    storeVersion: R,
+    storeVersion: B,
     onSearchSelect: p = () => {
     },
     endpoint: C,
     blockletRender: b,
     compact: k = !1
-  } = e, A = Ke(n, R), D = G(() => Fe({ baseURL: C, headers: A }), [C]), j = Gt(o, { onFilterChange: l, emptyCategory: !i.showExplore, onSearchSelect: p }), [N, K] = E(""), {
+  } = e, A = Ke(n, B), N = G(() => Fe({ baseURL: C, headers: A }), [C]), j = Kt(o, { onFilterChange: i, emptyCategory: !l.showExplore, onSearchSelect: p }), [D, K] = E(""), {
     data: H = [],
-    error: le,
+    error: ae,
     loading: Y,
     run: Z
-  } = Vt(D), U = G(() => {
-    const T = ot(H, [($) => $.name], ["asc"]), z = T.findIndex(($) => $.name === "All" || $.locales.en === "All");
+  } = qt(N), U = G(() => {
+    const T = nt(H, [($) => $.name], ["asc"]), z = T.findIndex(($) => $.name === "All" || $.locales.en === "All");
     return z > -1 ? [{ ...T[z], _id: "All" }, ...T.slice(0, z), ...T.slice(z + 1)] : T;
-  }, [H]), X = ge(tr(r), [r]), c = G(() => Xt(U, r), [U, r]), S = Kt(X), W = {
+  }, [H]), X = ge(or(r), [r]), h = G(() => Yt(U, r), [U, r]), S = Qt(X), W = {
     search: j,
     compact: k,
-    errors: { fetchCategoriesError: le },
+    errors: { fetchCategoriesError: ae },
     loadings: {
       fetchCategoriesLoading: Y
     },
-    extraFilter: d,
+    extraFilter: c,
     endpoint: C,
     queryFilter: s,
     layout: {
-      showExplore: i.showExplore ?? !1,
-      showCategory: i.showCategory ?? !0,
-      showTitle: i.showTitle ?? !0,
-      showSearch: i.showSearch ?? !0
+      showExplore: l.showExplore ?? !1,
+      showCategory: l.showCategory ?? !0,
+      showTitle: l.showTitle ?? !0,
+      showSearch: l.showSearch ?? !0
     },
     minItemWidth: a,
     wrapChildren: m,
     t: X,
-    storeVersion: R,
+    storeVersion: B,
     serverVersion: n,
-    selectedCategory: j.filters.category || (i.showExplore ? "" : "All"),
+    selectedCategory: j.filters.category || (l.showExplore ? "" : "All"),
     categoryList: U,
     blockletRender: b,
     locale: r,
-    categoryOptions: c,
+    categoryOptions: h,
     priceOptions: S,
-    storeApi: D,
+    storeApi: N,
     baseSearch: f,
     showResourcesSwitch: g,
     showCategory: y,
     tagFilters: I,
-    onFilterChange: l,
+    onFilterChange: i,
     getCategoryLocale: (T) => {
       if (!T) return null;
       const z = H.find(($) => $._id === T || $.locales.en === "All");
       return z ? z.locales[r] || z.locales.en : null;
     },
     get developerName() {
-      return N;
+      return D;
     },
     updateDeveloperName: K
   };
   return q(() => {
-    setTimeout(Z, u || 0);
-  }, [C, Z, u]), /* @__PURE__ */ t(rr, { value: W, children: x });
+    setTimeout(Z, d || 0);
+  }, [C, Z, d]), /* @__PURE__ */ t(nr, { value: W, children: x });
 }
-function B() {
+function R() {
   const e = Me(Qe);
   return e || Xe;
 }
@@ -448,7 +449,7 @@ function Ye({
   ...n
 }) {
   return /* @__PURE__ */ t(
-    ne,
+    ie,
     {
       ...n,
       onClick: r,
@@ -479,39 +480,39 @@ function Ce({
   sm: r,
   md: o,
   lg: n,
-  xl: l,
+  xl: i,
   exact: a
 }) {
-  const s = gt(), i = V(s.breakpoints.down("sm")), m = V(s.breakpoints.between("sm", "md")), d = V(s.breakpoints.between("md", "lg")), f = V(s.breakpoints.between("lg", "xl"));
+  const s = yt(), l = V(s.breakpoints.down("sm")), m = V(s.breakpoints.between("sm", "md")), c = V(s.breakpoints.between("md", "lg")), f = V(s.breakpoints.between("lg", "xl"));
   if (a)
-    return i ? e || null : m ? r || null : d ? o || null : f ? n || null : l || null;
-  let u = e;
-  return i || (u = J(r, u), m) || (u = J(o, u), d) || (u = J(n, u), f) ? u : J(l, u);
+    return l ? e || null : m ? r || null : c ? o || null : f ? n || null : i || null;
+  let d = e;
+  return l || (d = J(r, d), m) || (d = J(o, d), c) || (d = J(n, d), f) ? d : J(i, d);
 }
-function nr({ children: e }) {
+function lr({ children: e }) {
   const { open: r, toggleOpen: o } = ve();
   return /* @__PURE__ */ t(
     Ce,
     {
-      xs: /* @__PURE__ */ t(yt, { open: r, onClose: () => o(!1), children: e }),
+      xs: /* @__PURE__ */ t(xt, { open: r, onClose: () => o(!1), children: e }),
       md: /* @__PURE__ */ t(w, { children: e })
     }
   );
 }
-const ir = lt(({ loading: e, disabled: r, ...o }, n) => /* @__PURE__ */ t(
-  ne,
+const ar = at(({ loading: e, disabled: r, ...o }, n) => /* @__PURE__ */ t(
+  ie,
   {
     ref: n,
     disableElevation: !0,
     disabled: r || e,
     ...o,
     sx: [{ borderRadius: "4px" }, ...Array.isArray(o.sx) ? o.sx : [o.sx]],
-    startIcon: e && /* @__PURE__ */ t(ie, { size: "1em" })
+    startIcon: e && /* @__PURE__ */ t(le, { size: "1em" })
   }
 ));
-function ye({ value: e, options: r, onChange: o, placeholder: n, ...l }) {
-  var R;
-  const a = te(null), s = we(), [i, m] = E(!1), [d, f] = E(e !== null ? e : ""), u = V(s.breakpoints.down("sm"));
+function ye({ value: e, options: r, onChange: o, placeholder: n, ...i }) {
+  var B;
+  const a = re(null), s = we(), [l, m] = E(!1), [c, f] = E(e !== null ? e : ""), d = V(s.breakpoints.down("sm"));
   q(() => {
     f(e !== null ? e : "");
   }, [e]);
@@ -521,36 +522,36 @@ function ye({ value: e, options: r, onChange: o, placeholder: n, ...l }) {
     m(!0);
   }, []);
   function I(p) {
-    f(p.value), o(p.value), u && g();
+    f(p.value), o(p.value), d && g();
   }
   function x(p) {
-    return p === d;
+    return p === c;
   }
-  return /* @__PURE__ */ h(F, { children: [
-    /* @__PURE__ */ h(
-      lr,
+  return /* @__PURE__ */ u(F, { children: [
+    /* @__PURE__ */ u(
+      sr,
       {
         ref: a,
         onClick: y,
         variant: "outlined",
         size: "medium",
-        className: ["my-select__selector", nt(d) ? "" : "my-select__selector--active"].join(" "),
+        className: ["my-select__selector", it(c) ? "" : "my-select__selector--active"].join(" "),
         sx: { minWidth: { xs: "100px", md: "auto" }, color: "text.primary", borderRadius: "8px" },
-        ...l,
+        ...i,
         children: [
-          ((R = r.find((p) => p.value === d)) == null ? void 0 : R.name) || n,
-          /* @__PURE__ */ t(St, { className: "my-select__arrowdown", component: wt, sx: { width: 18, height: 18 } })
+          ((B = r.find((p) => p.value === c)) == null ? void 0 : B.name) || n,
+          /* @__PURE__ */ t(It, { className: "my-select__arrowdown", component: bt, sx: { width: 18, height: 18 } })
         ]
       }
     ),
-    /* @__PURE__ */ t(Ct, { open: i, anchorEl: a.current, transition: !0, sx: { zIndex: "9999" }, children: ({ TransitionProps: p, placement: C }) => /* @__PURE__ */ t(
-      kt,
+    /* @__PURE__ */ t(St, { open: l, anchorEl: a.current, transition: !0, sx: { zIndex: "9999" }, children: ({ TransitionProps: p, placement: C }) => /* @__PURE__ */ t(
+      vt,
       {
         ...p,
         style: { transformOrigin: C === "bottom" ? "center top" : "center bottom" },
-        children: /* @__PURE__ */ t(vt, { children: /* @__PURE__ */ t(bt, { onClickAway: g, children: /* @__PURE__ */ t(ar, { autoFocusItem: i, onMouseEnter: y, onMouseLeave: g, children: r.map((b) => /* @__PURE__ */ h($e, { onClick: () => I(b), sx: { fontSize: 14 }, children: [
+        children: /* @__PURE__ */ t(Ct, { children: /* @__PURE__ */ t(kt, { onClickAway: g, children: /* @__PURE__ */ t(cr, { autoFocusItem: l, onMouseEnter: y, onMouseLeave: g, children: r.map((b) => /* @__PURE__ */ u($e, { onClick: () => I(b), sx: { fontSize: 14 }, children: [
           /* @__PURE__ */ t(
-            xt,
+            wt,
             {
               sx: { mr: 1, fontSize: 16, visibility: x(b.value) ? "visible" : "hidden" }
             }
@@ -561,7 +562,7 @@ function ye({ value: e, options: r, onChange: o, placeholder: n, ...l }) {
     ) })
   ] });
 }
-const lr = Q(ir)`
+const sr = Q(ar)`
   border: 1px solid ${(e) => e.theme.palette.divider};
   padding: 6px 8px 6px 12px;
   font-weight: ${(e) => e.theme.typography.fontWeightRegular};
@@ -589,7 +590,7 @@ const lr = Q(ir)`
       margin-right: 3px;
     }
   }
-`, ar = Q(je)`
+`, cr = Q(je)`
   .my-select__option__icon {
     color: transparent;
     font-size: 14px;
@@ -607,8 +608,8 @@ const lr = Q(ir)`
   }
 `;
 function Ze() {
-  const { search: e, t: r } = B(), { filters: o, handleSort: n, handlePrice: l } = e, a = Ge(r);
-  return /* @__PURE__ */ h(
+  const { search: e, t: r } = R(), { filters: o, handleSort: n, handlePrice: i } = e, a = Ge(r);
+  return /* @__PURE__ */ u(
     O,
     {
       direction: { xs: "row", md: "column" },
@@ -621,12 +622,12 @@ function Ze() {
           We,
           {
             control: /* @__PURE__ */ t(
-              Ne,
+              De,
               {
                 checked: o.price === "free",
                 size: "small",
                 sx: { "& .MuiSvgIcon-fontSizeSmall": { fontSize: 16, color: "text.hint" } },
-                onChange: (s) => l(s.target.checked ? "free" : "")
+                onChange: (s) => i(s.target.checked ? "free" : "")
               }
             ),
             label: r("blocklet.free")
@@ -645,17 +646,17 @@ function Ze() {
     }
   );
 }
-function sr({ menus: e }) {
-  const { selectedCategory: r, search: o, t: n, categoryOptions: l, loadings: a, layout: s, baseSearch: i, compact: m } = B(), { filters: d, handleActiveMenu: f, handleCategory: u, cleanFilter: g } = o, { toggleOpen: y } = ve();
+function dr({ menus: e }) {
+  const { selectedCategory: r, search: o, t: n, categoryOptions: i, loadings: a, layout: s, baseSearch: l, compact: m } = R(), { filters: c, handleActiveMenu: f, handleCategory: d, cleanFilter: g } = o, { toggleOpen: y } = ve();
   q(() => {
     y(!1);
-  }, [Object.values(d).join("")]);
-  const I = qt(i, s.showSearch, d.keyword);
-  return s.showCategory && !m ? /* @__PURE__ */ h(nr, { children: [
+  }, [Object.values(c).join("")]);
+  const I = Xt(l, s.showSearch, c.keyword);
+  return s.showCategory && !m ? /* @__PURE__ */ u(lr, { children: [
     /* @__PURE__ */ t(
       Ce,
       {
-        xs: /* @__PURE__ */ h(
+        xs: /* @__PURE__ */ u(
           O,
           {
             direction: "row",
@@ -683,16 +684,16 @@ function sr({ menus: e }) {
         boxSizing: "content-box",
         p: { xs: 2, md: 0 },
         pr: { md: 6 },
-        children: I ? /* @__PURE__ */ h(F, { children: [
-          s.showExplore && /* @__PURE__ */ h(w, { mb: 3, pb: 3, borderBottom: 1, borderColor: "divider", children: [
-            /* @__PURE__ */ h(w, { display: "flex", alignItems: "center", gap: 1, children: [
-              /* @__PURE__ */ t(M, { icon: ct, width: 20, height: 20 }),
+        children: I ? /* @__PURE__ */ u(F, { children: [
+          s.showExplore && /* @__PURE__ */ u(w, { mb: 3, pb: 3, borderBottom: 1, borderColor: "divider", children: [
+            /* @__PURE__ */ u(w, { display: "flex", alignItems: "center", gap: 1, children: [
+              /* @__PURE__ */ t(M, { icon: dt, width: 20, height: 20 }),
               /* @__PURE__ */ t(
                 v,
                 {
                   variant: "body1",
-                  color: !r && !d.menu ? "text.primary" : "grey.400",
-                  fontWeight: !r && !d.menu ? "fontWeightMedium" : void 0,
+                  color: !r && !c.menu ? "text.primary" : "grey.400",
+                  fontWeight: !r && !c.menu ? "fontWeightMedium" : void 0,
                   sx: { cursor: "pointer" },
                   onClick: () => {
                     y(!1), g();
@@ -701,25 +702,25 @@ function sr({ menus: e }) {
                 }
               )
             ] }),
-            e == null ? void 0 : e.map((x) => /* @__PURE__ */ h(w, { display: "flex", alignItems: "center", mt: 2, gap: 1, children: [
+            e == null ? void 0 : e.map((x) => /* @__PURE__ */ u(w, { display: "flex", alignItems: "center", mt: 2, gap: 1, children: [
               typeof x.icon == "string" ? /* @__PURE__ */ t(M, { icon: x.icon, width: 20, height: 20 }) : x.icon,
               /* @__PURE__ */ t(
                 v,
                 {
                   variant: "body1",
-                  color: d.menu === x.key ? "text.primary" : "grey.400",
-                  fontWeight: d.menu === x.key ? "fontWeightMedium" : void 0,
+                  color: c.menu === x.key ? "text.primary" : "grey.400",
+                  fontWeight: c.menu === x.key ? "fontWeightMedium" : void 0,
                   sx: { cursor: "pointer" },
                   onClick: () => {
-                    var R;
-                    y(!1), f(x.key), (R = x.onClick) == null || R.call(x);
+                    var B;
+                    y(!1), f(x.key), (B = x.onClick) == null || B.call(x);
                   },
                   children: x.title
                 }
               )
             ] }, x.key))
           ] }),
-          !!l.length && /* @__PURE__ */ t(O, { gap: 2, children: l.map((x) => /* @__PURE__ */ t(
+          !!i.length && /* @__PURE__ */ t(O, { gap: 2, children: i.map((x) => /* @__PURE__ */ t(
             v,
             {
               variant: "body1",
@@ -729,7 +730,7 @@ function sr({ menus: e }) {
               color: r === x.value ? "text.primary" : "grey.400",
               textTransform: "capitalize",
               onClick: () => {
-                r === x.value ? g() : u(x.value), y(!1);
+                r === x.value ? g() : d(x.value), y(!1);
               },
               children: x.name
             },
@@ -741,23 +742,23 @@ function sr({ menus: e }) {
   ] }) : null;
 }
 function Se() {
-  const { endpoint: e, serverVersion: r, storeVersion: o } = B(), n = Ke(r, o), l = G(() => Fe({
+  const { endpoint: e, serverVersion: r, storeVersion: o } = R(), n = Ke(r, o), i = G(() => Fe({
     baseURL: e,
     headers: n
   }), [e]);
   return {
     get: async (a) => {
-      const { data: s } = await l.get(a);
+      const { data: s } = await i.get(a);
       return s;
     },
     post: async (a, s) => {
-      const { data: i } = await l.post(a, s);
-      return i;
+      const { data: l } = await i.post(a, s);
+      return l;
     }
   };
 }
-const Je = at(function(r) {
-  return /* @__PURE__ */ t(w, { height: 60, display: "flex", alignItems: "center", justifyContent: "center", ...r, children: /* @__PURE__ */ t(ie, {}) });
+const Je = st(function(r) {
+  return /* @__PURE__ */ t(w, { height: 60, display: "flex", alignItems: "center", justifyContent: "center", ...r, children: /* @__PURE__ */ t(le, {}) });
 });
 function Ae({
   icon: e,
@@ -765,7 +766,7 @@ function Ae({
   maxWidth: o = 100,
   title: n
 }) {
-  return (r === 0 || r) && /* @__PURE__ */ h(O, { direction: "row", alignItems: "center", gap: 1, sx: { maxWidth: o, overflow: "hidden" }, children: [
+  return (r === 0 || r) && /* @__PURE__ */ u(O, { direction: "row", alignItems: "center", gap: 1, sx: { maxWidth: o, overflow: "hidden" }, children: [
     e,
     /* @__PURE__ */ t(
       v,
@@ -779,21 +780,21 @@ function Ae({
     )
   ] });
 }
-const cr = 16 / 9, ue = 292, xe = 189, re = 336;
-function dr() {
-  var x, R;
-  const { t: e, search: r } = B(), { get: o } = Se(), n = we(), l = V(n.breakpoints.down("md")), a = ((R = (x = window.blocklet) == null ? void 0 : x.preferences) == null ? void 0 : R.homeBanner) || [], {
+const hr = 16 / 9, he = 292, xe = 189, oe = 336;
+function ur() {
+  var x, B;
+  const { t: e, search: r } = R(), { get: o } = Se(), n = we(), i = V(n.breakpoints.down("md")), a = ((B = (x = window.blocklet) == null ? void 0 : x.preferences) == null ? void 0 : B.homeBanner) || [], {
     data: s = [],
-    error: i,
+    error: l,
     loading: m
-  } = oe(async () => {
+  } = ne(async () => {
     const p = await o(
       ke(P.blockletsPath, { didList: a.map((C) => C.did).join(",") })
     );
     return p != null && p.dataList ? a.map((C) => p.dataList.find((b) => b.did === C.did)) : [];
   });
-  i && console.error("Get Banner Blocklets error:", i);
-  const d = {
+  l && console.error("Get Banner Blocklets error:", l);
+  const c = {
     position: "absolute",
     top: "50%",
     transform: "translateY(-50%)",
@@ -801,53 +802,53 @@ function dr() {
     cursor: "pointer",
     color: "text.hint"
   };
-  return !i && a.length > 0 ? /* @__PURE__ */ h(F, { children: [
+  return !l && a.length > 0 ? /* @__PURE__ */ u(F, { children: [
     /* @__PURE__ */ t(v, { component: "h2", variant: "h2", mt: { xs: 2, md: 0 }, mb: 3, children: e("explore.title") }),
     /* @__PURE__ */ t(
       w,
       {
-        height: { xs: "auto", md: ue },
-        minHeight: ue,
+        height: { xs: "auto", md: he },
+        minHeight: he,
         position: "relative",
         border: 1,
         borderColor: "divider",
         borderRadius: 3,
         overflow: "hidden",
-        children: m ? /* @__PURE__ */ h(w, { p: 5, display: { md: "flex" }, gap: 5, alignItems: "center", justifyContent: "center", children: [
-          /* @__PURE__ */ t(_, { variant: "rounded", height: xe, width: re }),
-          /* @__PURE__ */ h(w, { flex: 1, height: "100%", children: [
+        children: m ? /* @__PURE__ */ u(w, { p: 5, display: { md: "flex" }, gap: 5, alignItems: "center", justifyContent: "center", children: [
+          /* @__PURE__ */ t(_, { variant: "rounded", height: xe, width: oe }),
+          /* @__PURE__ */ u(w, { flex: 1, height: "100%", children: [
             /* @__PURE__ */ t(_, { variant: "text", height: 50, width: 100 }),
             /* @__PURE__ */ t(_, { variant: "text", height: 40, width: "100%" }),
             /* @__PURE__ */ t(_, { variant: "text", height: 40, width: 300 }),
-            /* @__PURE__ */ h(w, { display: "flex", gap: 1, my: 2, children: [
+            /* @__PURE__ */ u(w, { display: "flex", gap: 1, my: 2, children: [
               /* @__PURE__ */ t(_, { variant: "circular", height: 20, width: 20 }),
               /* @__PURE__ */ t(_, { variant: "text", height: 20, width: 50 })
             ] }),
             /* @__PURE__ */ t(_, { variant: "rounded", height: 30, width: 100 })
           ] })
         ] }) : /* @__PURE__ */ t(
-          Tt,
+          Pt,
           {
             showNav: !0,
             autoPlay: !0,
-            slideDuration: l ? 500 : 1e3,
+            slideDuration: i ? 500 : 1e3,
             slideInterval: 5e3,
             showPlayButton: !1,
             showIndex: !1,
             showBullets: !1,
             showThumbnails: !1,
             showFullscreenButton: !1,
-            renderLeftNav: (p) => /* @__PURE__ */ t(w, { onClick: p, sx: { display: { xs: "none", md: "block" } }, children: /* @__PURE__ */ t(Rt, { sx: { ...d, left: 5 } }) }),
-            renderRightNav: (p) => /* @__PURE__ */ t(w, { onClick: p, sx: { display: { xs: "none", md: "block" } }, children: /* @__PURE__ */ t(Bt, { sx: { ...d, right: 5 } }) }),
+            renderLeftNav: (p) => /* @__PURE__ */ t(w, { onClick: p, sx: { display: { xs: "none", md: "block" } }, children: /* @__PURE__ */ t(Rt, { sx: { ...c, left: 5 } }) }),
+            renderRightNav: (p) => /* @__PURE__ */ t(w, { onClick: p, sx: { display: { xs: "none", md: "block" } }, children: /* @__PURE__ */ t(Tt, { sx: { ...c, right: 5 } }) }),
             items: a.map((p, C) => ({
               original: p.did,
               renderItem: () => {
-                var D;
-                const b = s[C] || {}, k = p.cover || hr(p.did, (D = b.screenshots) == null ? void 0 : D[0]), A = qe(k, n.breakpoints.values.md * 2);
-                return /* @__PURE__ */ h(
+                var N;
+                const b = s[C] || {}, k = p.cover || mr(p.did, (N = b.screenshots) == null ? void 0 : N[0]), A = qe(k, n.breakpoints.values.md * 2);
+                return /* @__PURE__ */ u(
                   O,
                   {
-                    height: { xs: "auto", md: ue },
+                    height: { xs: "auto", md: he },
                     sx: {
                       cursor: "pointer",
                       "&::before": {
@@ -873,9 +874,9 @@ function dr() {
                     gap: { xs: 2, md: 5 },
                     children: [
                       f(A),
-                      /* @__PURE__ */ h(O, { flex: 1, height: "100%", gap: 3, children: [
-                        /* @__PURE__ */ h(w, { flex: 1, children: [
-                          u(p.name || b.title || p.name),
+                      /* @__PURE__ */ u(O, { flex: 1, height: "100%", gap: 3, children: [
+                        /* @__PURE__ */ u(w, { flex: 1, children: [
+                          d(p.name || b.title || p.name),
                           g(p.desc || b.description)
                         ] }),
                         b.did && y(b, p.baseNum),
@@ -892,9 +893,9 @@ function dr() {
     )
   ] }) : null;
   function f(p) {
-    return /* @__PURE__ */ t(w, { borderRadius: 2, overflow: "hidden", position: "relative", width: { xs: "100%", md: re }, children: /* @__PURE__ */ t(pr, { url: p }) });
+    return /* @__PURE__ */ t(w, { borderRadius: 2, overflow: "hidden", position: "relative", width: { xs: "100%", md: oe }, children: /* @__PURE__ */ t(fr, { url: p }) });
   }
-  function u(p) {
+  function d(p) {
     return /* @__PURE__ */ t(v, { variant: "h2", width: "100%", children: p });
   }
   function g(p) {
@@ -923,14 +924,14 @@ function dr() {
   }
   function y(p, C = 0) {
     const { did: b, owner: k, stats: A } = p;
-    return /* @__PURE__ */ h(w, { display: "flex", alignItems: "center", gap: 2, color: "text.secondary", children: [
+    return /* @__PURE__ */ u(w, { display: "flex", alignItems: "center", gap: 2, color: "text.secondary", children: [
       /* @__PURE__ */ t(Ae, { icon: /* @__PURE__ */ t(He, { src: k.avatar, did: b, size: 20, variant: "circle" }), children: k.fullName }),
-      /* @__PURE__ */ t(Ae, { icon: /* @__PURE__ */ t(M, { icon: It }), title: `${A.downloads + C}`, children: ur(A.downloads + C) })
+      /* @__PURE__ */ t(Ae, { icon: /* @__PURE__ */ t(M, { icon: Bt }), title: `${A.downloads + C}`, children: pr(A.downloads + C) })
     ] });
   }
   function I(p) {
     return /* @__PURE__ */ t(
-      ne,
+      ie,
       {
         variant: "outlined",
         size: "small",
@@ -947,16 +948,16 @@ function dr() {
     );
   }
 }
-const ur = (e) => Number.isNaN(e) ? 0 : e < 1e3 ? e : e < 1e6 ? `${(e / 1e3).toFixed(1)}k` : e < 1e9 ? `${(e / 1e6).toFixed(1)}m` : `${(e / 1e9).toFixed(1)}b`, hr = (e, r) => e && r ? `/assets/${e}/screenshots/${r}` : "";
-function pr({ url: e }) {
+const pr = (e) => Number.isNaN(e) ? 0 : e < 1e3 ? e : e < 1e6 ? `${(e / 1e3).toFixed(1)}k` : e < 1e9 ? `${(e / 1e6).toFixed(1)}m` : `${(e / 1e9).toFixed(1)}b`, mr = (e, r) => e && r ? `/assets/${e}/screenshots/${r}` : "";
+function fr({ url: e }) {
   const [r, o] = E(!0);
-  return /* @__PURE__ */ h(F, { children: [
+  return /* @__PURE__ */ u(F, { children: [
     r && /* @__PURE__ */ t(
       _,
       {
         variant: "rectangular",
         sx: {
-          width: { xs: "100%", md: re },
+          width: { xs: "100%", md: oe },
           height: { xs: "auto", md: xe }
         }
       }
@@ -968,64 +969,64 @@ function pr({ url: e }) {
         component: "img",
         src: e,
         alt: "",
-        width: { xs: "100%", md: re },
+        width: { xs: "100%", md: oe },
         height: { xs: "auto", md: xe },
         borderRadius: 2,
         border: 1,
         borderColor: "divider",
-        sx: { objectFit: "container", cursor: "pointer", aspectRatio: cr },
+        sx: { objectFit: "container", cursor: "pointer", aspectRatio: hr },
         onLoad: () => o(!1),
         onError: () => o(!1)
       }
     )
   ] });
 }
-function mr({ title: e, blocklets: r }) {
-  const { blockletRender: o, serverVersion: n } = B();
-  return /* @__PURE__ */ h(w, { mt: 3, children: [
+function gr({ title: e, blocklets: r }) {
+  const { blockletRender: o, serverVersion: n } = R();
+  return /* @__PURE__ */ u(w, { mt: 3, children: [
     /* @__PURE__ */ t(v, { component: "h3", variant: "h3", sx: { mb: 2 }, children: e }),
-    /* @__PURE__ */ t(Be, { container: !0, spacing: 2, boxSizing: "border-box", maxWidth: "calc(100vw - 16px)", children: r.map((l) => /* @__PURE__ */ t(Be, { item: !0, xs: 12, md: 6, p: "2px", "data-blocklet-did": l.did, children: /* @__PURE__ */ t(w, { padding: "1px", children: o({ blocklet: l, blocklets: r, serverVersion: n }) }) }, l.did)) })
+    /* @__PURE__ */ t(Re, { container: !0, spacing: 2, boxSizing: "border-box", maxWidth: "calc(100vw - 16px)", children: r.map((i) => /* @__PURE__ */ t(Re, { item: !0, xs: 12, md: 6, p: "2px", "data-blocklet-did": i.did, children: /* @__PURE__ */ t(w, { padding: "1px", children: o({ blocklet: i, blocklets: r, serverVersion: n }) }) }, i.did)) })
   ] });
 }
-function fr() {
-  const { get: e } = Se(), { t: r } = B(), {
+function yr() {
+  const { get: e } = Se(), { t: r } = R(), {
     data: o = [],
     error: n,
-    loading: l
-  } = oe(async () => {
+    loading: i
+  } = ne(async () => {
     const a = await e(P.explorePath);
     return Array.isArray(a) ? a : [];
   });
-  return n ? /* @__PURE__ */ t(be, { error: new Error(`Failed to fetch blocklets from ${P.explorePath}`) }) : l ? /* @__PURE__ */ t(Je, { mt: 15 }) : /* @__PURE__ */ h(F, { children: [
-    /* @__PURE__ */ t(dr, {}),
+  return n ? /* @__PURE__ */ t(be, { error: new Error(`Failed to fetch blocklets from ${P.explorePath}`) }) : i ? /* @__PURE__ */ t(Je, { mt: 15 }) : /* @__PURE__ */ u(F, { children: [
+    /* @__PURE__ */ t(ur, {}),
     o.map(
       (a) => {
         var s;
-        return ((s = a.blocklets) == null ? void 0 : s.length) > 0 ? /* @__PURE__ */ t(mr, { title: r(`explore.${a.type}`), blocklets: a.blocklets }, a.type) : null;
+        return ((s = a.blocklets) == null ? void 0 : s.length) > 0 ? /* @__PURE__ */ t(gr, { title: r(`explore.${a.type}`), blocklets: a.blocklets }, a.type) : null;
       }
     )
   ] });
 }
-const he = "__FREE_TEXT__", Ee = "__NO_RESULT__", pe = 40;
-function gr({
+const ue = "__FREE_TEXT__", Ee = "__NO_RESULT__", pe = 40;
+function et({
   endpoint: e,
   t: r,
   locale: o,
   filters: n,
-  handleKeyword: l,
+  handleKeyword: i,
   handleSearchSelect: a,
   ...s
 }) {
-  const i = te(null), m = te(!1), [d, f] = E(!1), [u, g] = E(""), [y, I] = E(!1), x = Se(), [R, p] = E(!1), C = (s == null ? void 0 : s.placeholder) || r("common.searchStore"), b = async (c) => {
+  const l = re(null), m = re(!1), [c, f] = E(!1), [d, g] = E(""), [y, I] = E(!1), x = Se(), [B, p] = E(!1), C = (s == null ? void 0 : s.placeholder) || r("common.searchStore"), b = async (h) => {
     p(!0);
-    const S = await x.get(Ie(e, ke(P.blockletsPath, c)));
+    const S = await x.get(Ie(e, ke(P.blockletsPath, h)));
     return p(!1), S.dataList || [];
-  }, { data: k, run: A } = oe(
-    (c) => c ? b({
+  }, { data: k, run: A } = ne(
+    (h) => h ? b({
       sortBy: P.nameDesc,
       page: 1,
       pageSize: 10,
-      keyword: c,
+      keyword: h,
       showResources: "true"
     }) : Promise.resolve([]),
     {
@@ -1034,19 +1035,19 @@ function gr({
   );
   q(() => {
     p(!0), A(n.keyword), g(n.keyword || "");
-  }, [n.keyword, A]), Ft(
+  }, [n.keyword, A]), Nt(
     "ctrl + k, command + k",
-    (c) => {
+    (h) => {
       var S, W;
-      return c.stopPropagation(), c.preventDefault(), (W = (S = i.current) == null ? void 0 : S.querySelector("input")) == null || W.focus(), !1;
+      return h.stopPropagation(), h.preventDefault(), (W = (S = l.current) == null ? void 0 : S.querySelector("input")) == null || W.focus(), !1;
     },
     { enableOnTags: ["INPUT"] }
   );
-  const D = De((c) => A(c), { wait: 300 }), j = { name: he, title: u, did: "" };
-  let N = [];
-  return u && (R ? N = [j] : k != null && k.length ? N = [j, ...k] : N = [{ name: Ee, title: r("blocklet.noResults"), did: "" }]), /* @__PURE__ */ h(F, { children: [
-    /* @__PURE__ */ h(Mt, { fullScreen: !0, open: y, sx: { display: { md: "none" } }, children: [
-      /* @__PURE__ */ h(w, { p: 2, pb: 0, display: "flex", alignItems: "center", gap: 2, children: [
+  const N = Ne((h) => A(h), { wait: 300 }), j = { name: ue, title: d, did: "" };
+  let D = [];
+  return d && (B ? D = [j] : k != null && k.length ? D = [j, ...k] : D = [{ name: Ee, title: r("blocklet.noResults"), did: "" }]), /* @__PURE__ */ u(F, { children: [
+    /* @__PURE__ */ u(zt, { fullScreen: !0, open: y, sx: { display: { md: "none" } }, children: [
+      /* @__PURE__ */ u(w, { p: 2, pb: 0, display: "flex", alignItems: "center", gap: 2, children: [
         /* @__PURE__ */ t(
           Ue,
           {
@@ -1068,14 +1069,14 @@ function gr({
             autoFocus: !0,
             placeholder: C,
             className: "bl-autocomplete-input",
-            value: u,
-            onChange: (c) => K(c.target.value),
+            value: d,
+            onChange: (h) => K(h.target.value),
             startAdornment: U(y),
             endAdornment: X()
           }
         ),
         /* @__PURE__ */ t(
-          ne,
+          ie,
           {
             variant: "outlined",
             onClick: () => {
@@ -1085,28 +1086,28 @@ function gr({
           }
         )
       ] }),
-      /* @__PURE__ */ t(je, { sx: { p: 0.5 }, children: N.map((c) => Y(c)) })
+      /* @__PURE__ */ t(je, { sx: { p: 0.5 }, children: D.map((h) => Y(h)) })
     ] }),
-    /* @__PURE__ */ t(w, { sx: { display: { sx: "block", md: "none" }, paddingTop: 1, opacity: 0.5 }, children: /* @__PURE__ */ t(M, { icon: se, style: { fontSize: 22, color: "inherit" }, onClick: () => I(!0) }) }),
+    /* @__PURE__ */ t(w, { sx: { display: { sx: "block", md: "none" }, paddingTop: 1, opacity: 0.5 }, children: /* @__PURE__ */ t(M, { icon: ce, style: { fontSize: 22, color: "inherit" }, onClick: () => I(!0) }) }),
     /* @__PURE__ */ t(
-      _t,
+      Mt,
       {
-        ref: i,
-        open: !!u && d,
+        ref: l,
+        open: !!d && c,
         size: "small",
         onOpen: () => f(!0),
-        onClose: (c, S) => {
-          f(!1), S === "selectOption" && !m.current && l(u);
+        onClose: (h, S) => {
+          f(!1), S === "selectOption" && !m.current && i(d);
         },
-        onKeyDown: (c) => {
-          c.key === "Enter" && !u && H();
+        onKeyDown: (h) => {
+          h.key === "Enter" && !d && H();
         },
         disableClearable: !0,
-        inputValue: u,
-        onInputChange: (c, S) => K(S),
-        isOptionEqualToValue: (c, S) => c.name === S.name,
-        getOptionLabel: (c) => c.title,
-        getOptionKey: (c) => c.name,
+        inputValue: d,
+        onInputChange: (h, S) => K(S),
+        isOptionEqualToValue: (h, S) => h.name === S.name,
+        getOptionLabel: (h) => h.title,
+        getOptionKey: (h) => h.name,
         noOptionsText: r("blocklet.noResults"),
         autoHighlight: !0,
         forcePopupIcon: !1,
@@ -1120,25 +1121,25 @@ function gr({
             }
           }
         },
-        renderInput: (c) => /* @__PURE__ */ t(
-          zt,
+        renderInput: (h) => /* @__PURE__ */ t(
+          Ft,
           {
-            ...c,
+            ...h,
             InputProps: {
-              ...c.InputProps,
+              ...h.InputProps,
               autoFocus: !0,
               placeholder: C,
               className: "bl-autocomplete-input",
-              value: u,
-              startAdornment: U(d),
+              value: d,
+              startAdornment: U(c),
               endAdornment: X()
             }
           }
         ),
-        filterOptions: (c) => c,
+        filterOptions: (h) => h,
         ...s,
-        options: N,
-        renderOption: (c, S) => Y(S),
+        options: D,
+        renderOption: (h, S) => Y(S),
         value: j,
         sx: [
           {
@@ -1159,35 +1160,35 @@ function gr({
       }
     )
   ] });
-  function K(c) {
-    p(!0), g(c), m.current = !1, D.run(c);
+  function K(h) {
+    p(!0), g(h), m.current = !1, N.run(h);
   }
   function H() {
-    I(!1), g(""), K(""), l("");
+    I(!1), g(""), K(""), i("");
   }
-  function le(c) {
-    c != null && c.did ? (I(!1), m.current = !0, g(""), a(c)) : c.name === he && (I(!1), l(u));
+  function ae(h) {
+    h != null && h.did ? (I(!1), m.current = !0, g(""), a(h)) : h.name === ue && (I(!1), i(d));
   }
-  function Y(c) {
+  function Y(h) {
     var S, W;
-    return /* @__PURE__ */ h(
+    return /* @__PURE__ */ u(
       $e,
       {
         sx: { display: "flex", alignItems: "center", gap: 1, p: 1.5, borderRadius: "8px" },
-        onClick: () => le(c),
+        onClick: () => ae(h),
         children: [
-          Z(c),
-          /* @__PURE__ */ h(v, { variant: "body1", children: [
-            /* @__PURE__ */ t(v, { fontWeight: "fontWeightMedium", display: "flex", alignItems: "center", gap: 1, children: c.title }),
-            /* @__PURE__ */ t(v, { sx: { color: "text.hint" }, fontSize: "13px", children: ((W = (S = c.category) == null ? void 0 : S.locales) == null ? void 0 : W[o || "en"]) || "" })
+          Z(h),
+          /* @__PURE__ */ u(v, { variant: "body1", children: [
+            /* @__PURE__ */ t(v, { fontWeight: "fontWeightMedium", display: "flex", alignItems: "center", gap: 1, children: h.title }),
+            /* @__PURE__ */ t(v, { sx: { color: "text.hint" }, fontSize: "13px", children: ((W = (S = h.category) == null ? void 0 : S.locales) == null ? void 0 : W[o || "en"]) || "" })
           ] })
         ]
       },
-      c.did
+      h.did
     );
   }
-  function Z(c) {
-    if ([he, Ee].includes(c.name))
+  function Z(h) {
+    if ([ue, Ee].includes(h.name))
       return /* @__PURE__ */ t(
         w,
         {
@@ -1199,55 +1200,55 @@ function gr({
           color: "text.hint",
           bgcolor: "grey.100",
           borderRadius: "8px",
-          children: /* @__PURE__ */ t(M, { icon: se, style: { fontSize: 28 } })
+          children: /* @__PURE__ */ t(M, { icon: ce, style: { fontSize: 28 } })
         }
       );
     let S = "";
-    return c.logo && (S = Ie(e, "assets", c.did, qe(c.logo, pe, c.version))), /* @__PURE__ */ t(He, { src: S, size: pe, style: { borderRadius: "8px", overflow: "hidden" } });
+    return h.logo && (S = Ie(e, "assets", h.did, qe(h.logo, pe, h.version))), /* @__PURE__ */ t(He, { src: S, size: pe, style: { borderRadius: "8px", overflow: "hidden" } });
   }
-  function U(c = !0) {
-    return /* @__PURE__ */ t(w, { sx: { display: "flex", pl: 0.5, alignItems: "center", color: "text.hint" }, children: c && u && R ? /* @__PURE__ */ t(ie, { color: "inherit", size: 16 }) : /* @__PURE__ */ t(M, { icon: se, style: { fontSize: 16, cursor: "default" } }) });
+  function U(h = !0) {
+    return /* @__PURE__ */ t(w, { sx: { display: "flex", pl: 0.5, alignItems: "center", color: "text.hint" }, children: h && d && B ? /* @__PURE__ */ t(le, { color: "inherit", size: 16 }) : /* @__PURE__ */ t(M, { icon: ce, style: { fontSize: 16, cursor: "default" } }) });
   }
   function X() {
-    return u ? /* @__PURE__ */ t(w, { sx: { display: "flex", alignItems: "center", color: "text.hint" }, children: /* @__PURE__ */ t(
+    return d ? /* @__PURE__ */ t(w, { sx: { display: "flex", alignItems: "center", color: "text.hint" }, children: /* @__PURE__ */ t(
       M,
       {
-        icon: Lt,
+        icon: _t,
         style: { fontSize: 20, cursor: "pointer", color: "inherit" },
         onClick: () => H()
       }
     ) }) : null;
   }
 }
-function yr({ placeholder: e, ...r }) {
-  const { search: o, t: n } = B(), { filters: l, handleKeyword: a } = o, [s, i] = E(l.keyword || ""), m = De(a, { wait: 300 }), d = (g) => {
+function xr({ placeholder: e, ...r }) {
+  const { search: o, t: n } = R(), { filters: i, handleKeyword: a } = o, [s, l] = E(i.keyword || ""), m = Ne(a, { wait: 300 }), c = (g) => {
     const { value: y } = g.target;
-    i(y), m.run(y);
+    l(y), m.run(y);
   }, f = () => {
-    i(""), a("");
+    l(""), a("");
   };
   q(() => {
-    i(l.keyword || "");
-  }, [l.keyword]);
-  const u = e || n("common.searchPlaceholder");
+    l(i.keyword || "");
+  }, [i.keyword]);
+  const d = e || n("common.searchPlaceholder");
   return /* @__PURE__ */ t(
-    xr,
+    wr,
     {
       inputProps: {
         "data-cy": "search-blocklet"
       },
-      startAdornment: /* @__PURE__ */ t(Pe, { position: "start", children: /* @__PURE__ */ t(wr, { sx: { fontSize: 18, ml: -0.5 } }) }),
-      onChange: d,
-      placeholder: u,
+      startAdornment: /* @__PURE__ */ t(Pe, { position: "start", children: /* @__PURE__ */ t(br, { sx: { fontSize: 18, ml: -0.5 } }) }),
+      onChange: c,
+      placeholder: d,
       value: s,
-      title: u,
+      title: d,
       "data-cy": "search",
-      endAdornment: s && /* @__PURE__ */ t(Pe, { position: "end", children: /* @__PURE__ */ t(br, { "data-cy": "search-delete", onClick: f }) }),
+      endAdornment: s && /* @__PURE__ */ t(Pe, { position: "end", children: /* @__PURE__ */ t(kr, { "data-cy": "search-delete", onClick: f }) }),
       ...r
     }
   );
 }
-const xr = Q(Ue)`
+const wr = Q(Ue)`
   background-color: ${(e) => e.theme.palette.grey[50]};
   font-size: 14px;
   border-radius: 6px;
@@ -1264,29 +1265,29 @@ const xr = Q(Ue)`
       color: transparent;
     }
   }
-`, wr = Q(Dt)`
+`, br = Q(Dt)`
   color: ${(e) => e.theme.palette.grey[500]};
-`, br = Q(ze)`
+`, kr = Q(ze)`
   color: ${(e) => e.theme.palette.grey[500]};
   font-size: 16px;
   cursor: pointer;
 `;
-function kr() {
+function vr() {
   var b;
   const {
     search: e,
     t: r,
     endpoint: o,
     locale: n,
-    getCategoryLocale: l,
+    getCategoryLocale: i,
     developerName: a,
     showResourcesSwitch: s,
-    layout: i,
+    layout: l,
     baseSearch: m,
-    categoryOptions: d,
+    categoryOptions: c,
     compact: f
-  } = B(), { filters: u, handleSort: g, handlePrice: y, handleDeveloper: I, handleSwitchShowResources: x, cleanFilter: R, handleCategory: p } = e, C = Ge(r);
-  return /* @__PURE__ */ h(
+  } = R(), { filters: d, handleSort: g, handlePrice: y, handleDeveloper: I, handleSwitchShowResources: x, cleanFilter: B, handleCategory: p } = e, C = Ge(r);
+  return /* @__PURE__ */ u(
     O,
     {
       position: "sticky",
@@ -1303,8 +1304,8 @@ function kr() {
       pb: f ? 2 : 3,
       sx: { backgroundColor: "background.default" },
       children: [
-        !f && /* @__PURE__ */ t(v, { variant: "h2", textTransform: "capitalize", children: l(u.category) }),
-        /* @__PURE__ */ h(
+        !f && /* @__PURE__ */ t(v, { variant: "h2", textTransform: "capitalize", children: i(d.category) }),
+        /* @__PURE__ */ u(
           O,
           {
             flex: 1,
@@ -1315,8 +1316,8 @@ function kr() {
             justifyContent: { xs: "flex-start", md: "flex-end" },
             gap: 2,
             children: [
-              i.showSearch ? /* @__PURE__ */ t(w, { flex: 1, flexBasis: { xs: "100%", md: "auto" }, children: m ? /* @__PURE__ */ t(yr, {}) : /* @__PURE__ */ t(
-                gr,
+              l.showSearch ? /* @__PURE__ */ t(w, { flex: 1, flexBasis: { xs: "100%", md: "auto" }, children: m ? /* @__PURE__ */ t(xr, {}) : /* @__PURE__ */ t(
+                et,
                 {
                   locale: n,
                   endpoint: o,
@@ -1332,7 +1333,7 @@ function kr() {
                   handleSearchSelect: e.handleSearchSelect
                 }
               ) }) : null,
-              u.owner && a && /* @__PURE__ */ t(
+              d.owner && a && /* @__PURE__ */ t(
                 Te,
                 {
                   label: r("blocklet.authorTag", { name: a }),
@@ -1340,18 +1341,18 @@ function kr() {
                   onDelete: () => I("")
                 }
               ),
-              u.resourceDid && u.resourceBlocklet && /* @__PURE__ */ t(
+              d.resourceDid && d.resourceBlocklet && /* @__PURE__ */ t(
                 Te,
                 {
-                  label: r("blocklet.resourceTag", { name: u.resourceBlocklet }),
+                  label: r("blocklet.resourceTag", { name: d.resourceBlocklet }),
                   size: "small",
-                  onDelete: () => R(["resourceDid", "resourceBlocklet", "showResources"])
+                  onDelete: () => B(["resourceDid", "resourceBlocklet", "showResources"])
                 }
               ),
               s ? /* @__PURE__ */ t(
                 Oe,
                 {
-                  checked: u.showResources !== "false",
+                  checked: d.showResources !== "false",
                   onChange: (k) => x(k ? "true" : "false"),
                   label: r("common.showResources")
                 }
@@ -1359,7 +1360,7 @@ function kr() {
               /* @__PURE__ */ t(
                 Oe,
                 {
-                  checked: u.price === "free",
+                  checked: d.price === "free",
                   onChange: (k) => y(k ? "free" : ""),
                   label: r("blocklet.free")
                 }
@@ -1367,8 +1368,8 @@ function kr() {
               f && /* @__PURE__ */ t(w, { children: /* @__PURE__ */ t(
                 ye,
                 {
-                  value: u.category || ((b = d[0]) == null ? void 0 : b.value),
-                  options: d,
+                  value: d.category || ((b = c[0]) == null ? void 0 : b.value),
+                  options: c,
                   placeholder: r("common.category"),
                   onChange: (k) => p(k)
                 }
@@ -1376,7 +1377,7 @@ function kr() {
               /* @__PURE__ */ t(
                 ye,
                 {
-                  value: u.sortBy || C[0].value,
+                  value: d.sortBy || C[0].value,
                   options: C,
                   placeholder: r("sort.sort"),
                   onChange: (k) => g(k)
@@ -1394,21 +1395,21 @@ function Oe({
   onChange: r,
   label: o
 }) {
-  const n = Ot();
+  const n = Lt();
   return /* @__PURE__ */ t(
     We,
     {
       sx: { m: 0, p: 0 },
       className: "check-button",
       control: /* @__PURE__ */ t(
-        Ne,
+        De,
         {
           checked: e,
-          icon: /* @__PURE__ */ t(M, { style: { padding: 0, color: n.palette.text.secondary }, icon: At }),
-          checkedIcon: /* @__PURE__ */ t(M, { style: { padding: 0, color: n.palette.primary.main }, icon: Et }),
+          icon: /* @__PURE__ */ t(M, { style: { padding: 0, color: n.palette.text.secondary }, icon: Et }),
+          checkedIcon: /* @__PURE__ */ t(M, { style: { padding: 0, color: n.palette.primary.main }, icon: Ot }),
           size: "large",
           sx: { p: 0, mr: 1 },
-          onChange: (l) => r(l.target.checked)
+          onChange: (i) => r(i.target.checked)
         }
       ),
       label: o
@@ -1416,21 +1417,21 @@ function Oe({
   );
 }
 function ee({ children: e }) {
-  return /* @__PURE__ */ h(w, { display: "flex", mt: 2, flexDirection: "column", alignItems: "center", justifyContent: "center", color: "text.hint", children: [
-    /* @__PURE__ */ t(Nt, {}),
+  return /* @__PURE__ */ u(w, { display: "flex", mt: 2, flexDirection: "column", alignItems: "center", justifyContent: "center", color: "text.hint", children: [
+    /* @__PURE__ */ t(Wt, {}),
     e
   ] });
 }
 function Le() {
-  const { t: e } = B();
+  const { t: e } = R();
   return /* @__PURE__ */ t(v, { style: { textAlign: "center" }, variant: "subtitle2", children: e("blocklet.noResults") });
 }
 function me({ filterTip: e, keywordTip: r }) {
-  const { t: o, locale: n } = B(), l = () => n === "zh" ? "、" : " , ";
-  return /* @__PURE__ */ h(w, { mt: 1, display: "flex", children: [
+  const { t: o, locale: n } = R(), i = () => n === "zh" ? "、" : " , ";
+  return /* @__PURE__ */ u(w, { mt: 1, display: "flex", children: [
     /* @__PURE__ */ t(v, { style: { marginRight: "16px" }, children: o("blocklet.emptyTip") }),
     e && /* @__PURE__ */ t(v, { children: o("blocklet.filterTip") }),
-    e && r && l(),
+    e && r && i(),
     r && /* @__PURE__ */ t(v, { children: o("blocklet.keywordTip") })
   ] });
 }
@@ -1439,7 +1440,7 @@ function fe({
   primaryEnd: r,
   filter: o
 }) {
-  return /* @__PURE__ */ h(v, { variant: "subtitle2", display: "flex", gap: 0.5, mx: 0.5, children: [
+  return /* @__PURE__ */ u(v, { variant: "subtitle2", display: "flex", gap: 0.5, mx: 0.5, children: [
     /* @__PURE__ */ t(v, { children: e }),
     /* @__PURE__ */ t(
       v,
@@ -1450,41 +1451,41 @@ function fe({
         children: o
       }
     ),
-    /* @__PURE__ */ h(v, { children: [
+    /* @__PURE__ */ u(v, { children: [
       r,
       " "
     ] })
   ] });
 }
-function vr() {
-  const { t: e, search: r, getCategoryLocale: o, selectedCategory: n } = B(), { filters: l } = r, a = !!n || !!l.price;
-  if (l.keyword && a)
-    return /* @__PURE__ */ h(ee, { children: [
+function Cr() {
+  const { t: e, search: r, getCategoryLocale: o, selectedCategory: n } = R(), { filters: i } = r, a = !!n || !!i.price;
+  if (i.keyword && a)
+    return /* @__PURE__ */ u(ee, { children: [
       /* @__PURE__ */ t(
         fe,
         {
           primaryStart: e("blocklet.noBlockletPart1"),
           primaryEnd: e("blocklet.noBlockletPart2"),
-          filter: l.keyword
+          filter: i.keyword
         }
       ),
       /* @__PURE__ */ t(me, { keywordTip: !0, filterTip: !0 })
     ] });
-  if (l.keyword)
-    return /* @__PURE__ */ h(ee, { children: [
+  if (i.keyword)
+    return /* @__PURE__ */ u(ee, { children: [
       /* @__PURE__ */ t(
         fe,
         {
           primaryStart: e("blocklet.noBlockletPart1"),
           primaryEnd: e("blocklet.noBlockletPart2"),
-          filter: l.keyword
+          filter: i.keyword
         }
       ),
       /* @__PURE__ */ t(me, { keywordTip: !0 })
     ] });
   if (a) {
     const s = o(n);
-    return /* @__PURE__ */ h(ee, { children: [
+    return /* @__PURE__ */ u(ee, { children: [
       s ? /* @__PURE__ */ t(
         fe,
         {
@@ -1498,10 +1499,10 @@ function vr() {
   }
   return /* @__PURE__ */ t(ee, { children: /* @__PURE__ */ t(Le, {}) });
 }
-const Cr = (e, r, o, n) => dt(
-  async (l) => {
-    l || (o.currentPage = o.defaultCurrentPage);
-    const { currentPage: a, pageSize: s } = o, i = {
+const Sr = (e, r, o, n) => ht(
+  async (i) => {
+    i || (o.currentPage = o.defaultCurrentPage);
+    const { currentPage: a, pageSize: s } = o, l = {
       ...r,
       category: r.category === "All" ? "" : r.category,
       sortBy: P[r.sortBy],
@@ -1509,60 +1510,60 @@ const Cr = (e, r, o, n) => dt(
       pageSize: s
     };
     n(null);
-    const { data: m = {} } = await e.get(P.blockletsPath, { params: i });
+    const { data: m = {} } = await e.get(P.blockletsPath, { params: l });
     return o.currentPage++, { page: a, pageSize: s, list: (m == null ? void 0 : m.dataList) || [], total: (m == null ? void 0 : m.total) || 0 };
   },
   {
-    isNoMore: (l) => l ? l.page * l.pageSize >= l.total : !1,
-    reloadDeps: [e, Wt(r)],
+    isNoMore: (i) => i ? i.page * i.pageSize >= i.total : !1,
+    reloadDeps: [e, $t(r)],
     onError: n
   }
 );
-function Sr() {
-  var u;
-  const { storeApi: e, search: r, extraFilter: o, errors: n, updateDeveloperName: l } = B(), { filters: a } = r, s = ut({
+function Ir() {
+  var d;
+  const { storeApi: e, search: r, extraFilter: o, errors: n, updateDeveloperName: i } = R(), { filters: a } = r, s = ut({
     currentPage: P.currentPage,
-    pageSize: Zt() ? P.mobilePageSize : P.pageSize,
+    pageSize: er() ? P.mobilePageSize : P.pageSize,
     defaultCurrentPage: P.defaultCurrentPage
-  }), [i, m] = E(null), d = Cr(e, a, s, m), f = G(
+  }), [l, m] = E(null), c = Sr(e, a, s, m), f = G(
     () => {
       var g, y;
-      return o ? o(((g = d.data) == null ? void 0 : g.list) || []) : ((y = d.data) == null ? void 0 : y.list) || [];
+      return o ? o(((g = c.data) == null ? void 0 : g.list) || []) : ((y = c.data) == null ? void 0 : y.list) || [];
     },
-    [d.data, o]
+    [c.data, o]
   );
   return q(() => {
     const g = f.find((y) => y.owner.did === a.owner);
-    l((g == null ? void 0 : g.owner.fullName) || (g == null ? void 0 : g.author.name) || "");
-  }, [a.owner, f, l]), {
+    i((g == null ? void 0 : g.owner.fullName) || (g == null ? void 0 : g.author.name) || "");
+  }, [a.owner, f, i]), {
     blocklets: f,
-    fetchBlockletsError: i,
-    loadMore: d.loadMore,
-    hasNextPage: !d.noMore,
-    total: ((u = d.data) == null ? void 0 : u.total) || 0,
+    fetchBlockletsError: l,
+    loadMore: c.loadMore,
+    hasNextPage: !c.noMore,
+    total: ((d = c.data) == null ? void 0 : d.total) || 0,
     loadings: {
-      fetchBlockletsLoading: d.loading,
-      loadingMore: d.loadingMore
+      fetchBlockletsLoading: c.loading,
+      loadingMore: c.loadingMore
     },
     errors: {
       ...n,
-      fetchBlockletsError: i
+      fetchBlockletsError: l
     }
   };
 }
-function Ir() {
-  const { t: e, search: r, endpoint: o, blockletRender: n, serverVersion: l, minItemWidth: a, layout: s, baseSearch: i, compact: m } = B(), { filters: d } = r, { blocklets: f, errors: u, loadMore: g, loadings: y, hasNextPage: I, total: x } = Sr(), [R] = Pt({
+function Br() {
+  const { t: e, search: r, endpoint: o, blockletRender: n, serverVersion: i, minItemWidth: a, layout: s, baseSearch: l, compact: m } = R(), { filters: c } = r, { blocklets: f, errors: d, loadMore: g, loadings: y, hasNextPage: I, total: x } = Ir(), [B] = At({
     loading: y.fetchBlockletsLoading || y.loadingMore,
     hasNextPage: I,
     onLoadMore: g
   });
-  if (u.fetchBlockletsError) {
-    const k = new Error(`Failed to fetch blocklets from ${o}: ${Qt(u.fetchBlockletsError)}`);
+  if (d.fetchBlockletsError) {
+    const k = new Error(`Failed to fetch blocklets from ${o}: ${Zt(d.fetchBlockletsError)}`);
     return /* @__PURE__ */ t(be, { error: k });
   }
-  const p = i && s.showSearch || !d.keyword;
-  return /* @__PURE__ */ h(F, { children: [
-    p ? /* @__PURE__ */ t(kr, {}) : /* @__PURE__ */ h(F, { children: [
+  const p = l && s.showSearch || !c.keyword;
+  return /* @__PURE__ */ u(F, { children: [
+    p ? /* @__PURE__ */ t(vr, {}) : /* @__PURE__ */ u(F, { children: [
       /* @__PURE__ */ t(Ce, { xs: /* @__PURE__ */ t(Ze, {}), md: null }),
       b()
     ] }),
@@ -1576,8 +1577,8 @@ function Ir() {
         justifyContent: "center",
         py: 2,
         overflow: "hidden",
-        ref: R,
-        children: y.loadingMore ? /* @__PURE__ */ t(ie, {}) : null
+        ref: B,
+        children: y.loadingMore ? /* @__PURE__ */ t(le, {}) : null
       }
     )
   ] });
@@ -1603,15 +1604,15 @@ function Ir() {
               sm: a
             },
             maxWidth: "calc(100vw - 32px)",
-            children: n({ blocklet: k, blocklets: f, serverVersion: l })
+            children: n({ blocklet: k, blocklets: f, serverVersion: i })
           },
           k.did
         ))
       }
-    ) : /* @__PURE__ */ t(vr, {});
+    ) : /* @__PURE__ */ t(Cr, {});
   }
   function b() {
-    return /* @__PURE__ */ h(
+    return /* @__PURE__ */ u(
       O,
       {
         direction: "row",
@@ -1625,10 +1626,10 @@ function Ir() {
             v,
             {
               variant: "h3",
-              title: d.keyword,
+              title: c.keyword,
               maxWidth: "50vw",
               sx: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
-              children: e("blocklet.search", { keyword: d.keyword })
+              children: e("blocklet.search", { keyword: c.keyword })
             }
           ),
           /* @__PURE__ */ t(v, { variant: "body1", color: "text.hint", fontSize: 13, children: e("blocklet.resultCount", { count: x }) })
@@ -1638,45 +1639,60 @@ function Ir() {
   }
 }
 function Rr() {
-  const { t: e, selectedCategory: r, getCategoryLocale: o } = B(), { toggleOpen: n } = ve();
-  return /* @__PURE__ */ h(
-    v,
-    {
-      variant: "body1",
-      display: { xs: "flex", md: "none" },
-      alignItems: "center",
-      gap: 1,
-      py: 2,
-      fontWeight: "fontWeightMedium",
-      children: [
-        /* @__PURE__ */ t(Ye, { onClick: () => n(!0), children: /* @__PURE__ */ t($t, {}) }),
-        o(r) || e("common.category")
-      ]
-    }
-  );
+  var c, f, d;
+  const { t: e, selectedCategory: r, getCategoryLocale: o, locale: n, search: i } = R(), { toggleOpen: a } = ve(), l = Ut().arcSphere, m = !!((f = (c = window.blocklet) == null ? void 0 : c.navigation) != null && f.some((g) => g.section === "bottomNavigation"));
+  return /* @__PURE__ */ u(te, { display: "flex", alignItems: "center", justifyContent: "space-between", children: [
+    /* @__PURE__ */ u(
+      v,
+      {
+        variant: "body1",
+        display: { xs: "flex", md: "none" },
+        alignItems: "center",
+        gap: 1,
+        py: 2,
+        fontWeight: "fontWeightMedium",
+        children: [
+          /* @__PURE__ */ t(Ye, { onClick: () => a(!0), children: /* @__PURE__ */ t(jt, {}) }),
+          o(r) || e("common.category")
+        ]
+      }
+    ),
+    l && m && /* @__PURE__ */ t(
+      et,
+      {
+        locale: n,
+        endpoint: ((d = window.blocklet) == null ? void 0 : d.prefix) || "/",
+        sx: { display: { md: "block", xs: "none" }, mr: 1, width: "350px" },
+        t: e,
+        filters: i.filters,
+        handleKeyword: i.handleKeyword,
+        handleSearchSelect: i.handleSearchSelect
+      }
+    )
+  ] });
 }
-function Br({ menus: e, children: r }) {
-  var d;
-  const { search: o, layout: n, compact: l } = B(), { filters: a } = o, s = te(null), i = a.category || a.keyword || a.price, m = (d = e == null ? void 0 : e.find((f) => f.key === a.menu)) == null ? void 0 : d.key;
-  return /* @__PURE__ */ t(Ut, { children: /* @__PURE__ */ h(st, { FallbackComponent: be, children: [
-    !l && /* @__PURE__ */ t(Rr, {}),
-    /* @__PURE__ */ h(
+function Tr({ menus: e, children: r }) {
+  var c;
+  const { search: o, layout: n, compact: i } = R(), { filters: a } = o, s = re(null), l = a.category || a.keyword || a.price, m = (c = e == null ? void 0 : e.find((f) => f.key === a.menu)) == null ? void 0 : c.key;
+  return /* @__PURE__ */ t(Gt, { children: /* @__PURE__ */ u(ct, { FallbackComponent: be, children: [
+    !i && /* @__PURE__ */ t(Rr, {}),
+    /* @__PURE__ */ u(
       w,
       {
         ref: s,
         display: "flex",
         height: "100%",
         className: "list-container",
-        pt: { xs: 0, md: l ? 0 : 5 },
+        pt: { xs: 0, md: i ? 0 : 5 },
         children: [
-          /* @__PURE__ */ t(sr, { menus: e }),
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ t(dr, { menus: e }),
+          /* @__PURE__ */ u(
             O,
             {
               height: "100%",
               position: "relative",
               flex: 1,
-              sx: l ? {
+              sx: i ? {
                 overflowY: "auto",
                 ml: -2,
                 pr: 1,
@@ -1684,7 +1700,7 @@ function Br({ menus: e, children: r }) {
               } : { overflow: "visible" },
               children: [
                 m && (r == null ? void 0 : r(m)),
-                !m && (n.showExplore && !i ? /* @__PURE__ */ t(fr, {}) : /* @__PURE__ */ t(Ir, {}))
+                !m && (n.showExplore && !l ? /* @__PURE__ */ t(yr, {}) : /* @__PURE__ */ t(Br, {}))
               ]
             }
           )
@@ -1693,10 +1709,10 @@ function Br({ menus: e, children: r }) {
     )
   ] }) });
 }
-function Do(e) {
-  return /* @__PURE__ */ h(jt, { variant: "outlined", ...e, sx: { maxWidth: 400, borderRadius: "8px", p: { xs: 2, md: 3 }, ...e.sx }, children: [
-    /* @__PURE__ */ h(ce, { display: "flex", alignItems: "center", gap: 2, pb: 1, children: [
-      /* @__PURE__ */ h(ce, { display: "flex", alignItems: "center", gap: 2, flex: 1, children: [
+function Wo(e) {
+  return /* @__PURE__ */ u(Ht, { variant: "outlined", ...e, sx: { maxWidth: 400, borderRadius: "8px", p: { xs: 2, md: 3 }, ...e.sx }, children: [
+    /* @__PURE__ */ u(te, { display: "flex", alignItems: "center", gap: 2, pb: 1, children: [
+      /* @__PURE__ */ u(te, { display: "flex", alignItems: "center", gap: 2, flex: 1, children: [
         /* @__PURE__ */ t(L, { variant: "rounded", width: 48, height: 48 }),
         /* @__PURE__ */ t(L, { variant: "text", width: 60, height: 28 })
       ] }),
@@ -1704,7 +1720,7 @@ function Do(e) {
     ] }),
     /* @__PURE__ */ t(L, { variant: "text", width: "100%", height: 24 }),
     /* @__PURE__ */ t(L, { variant: "text", width: "90%", height: 24 }),
-    /* @__PURE__ */ h(ce, { display: "flex", alignItems: "center", gap: 1, pt: 1.5, children: [
+    /* @__PURE__ */ u(te, { display: "flex", alignItems: "center", gap: 1, pt: 1.5, children: [
       /* @__PURE__ */ t(L, { variant: "rounded", width: 24, height: 24 }),
       /* @__PURE__ */ t(L, { variant: "text", width: "15%", height: 20 }),
       /* @__PURE__ */ t(L, { variant: "rounded", width: 24, height: 24, sx: { ml: 1 } }),
@@ -1712,12 +1728,12 @@ function Do(e) {
     ] })
   ] });
 }
-function No({ showSkeleton: e, ...r }) {
-  return e ? /* @__PURE__ */ t(_, { variant: "rectangular", width: r.width, height: r.height }) : /* @__PURE__ */ t(Ht, { ...r });
+function $o({ showSkeleton: e, ...r }) {
+  return e ? /* @__PURE__ */ t(_, { variant: "rectangular", width: r.width, height: r.height }) : /* @__PURE__ */ t(Vt, { ...r });
 }
-function Wo(e) {
-  const { menus: r, children: o, ...n } = e, l = we(), a = et(
-    it({}, l, {
+function jo(e) {
+  const { menus: r, children: o, ...n } = e, i = we(), a = tt(
+    lt({}, i, {
       typography: {
         h1: {
           fontSize: 32,
@@ -1744,12 +1760,12 @@ function Wo(e) {
       }
     })
   );
-  return /* @__PURE__ */ t(tt, { theme: a, children: /* @__PURE__ */ t(or, { ...n, children: /* @__PURE__ */ t(Br, { menus: r, children: o }) }) });
+  return /* @__PURE__ */ t(rt, { theme: a, children: /* @__PURE__ */ t(ir, { ...n, children: /* @__PURE__ */ t(Tr, { menus: r, children: o }) }) });
 }
 export {
-  gr as Autocomplete,
-  Do as CardSkeleton,
-  No as Image,
-  Wo as default,
-  Gt as useSearch
+  et as Autocomplete,
+  Wo as CardSkeleton,
+  $o as Image,
+  jo as default,
+  Kt as useSearch
 };