@blocklet/list 0.14.3 → 0.14.4

package/lib/index.es.js

@@ -1,55 +1,55 @@
-import { jsx as t, jsxs as m, Fragment as F } from "react/jsx-runtime";
+import { jsx as t, jsxs as f, Fragment as F } from "react/jsx-runtime";
 import { styled as D, useTheme as xe } from "@arcblock/ux/lib/Theme";
 import { Global as we, css as ke } from "@emotion/react";
 import { ErrorFallback as Z } from "@arcblock/ux/lib/ErrorBoundary";
-import { Button as ee, useTheme as Xe, useMediaQuery as N, Drawer as Ye, Box as S, CircularProgress as te, MenuList as Je, SvgIcon as Ke, Popper as Ze, Grow as et, Paper as tt, ClickAwayListener as rt, MenuItem as ot, Stack as I, FormControlLabel as ve, Checkbox as Ce, Typography as L, Link as nt, Grid as me, OutlinedInput as lt, InputAdornment as he } from "@mui/material";
-import { ErrorBoundary as at } from "react-error-boundary";
-import it from "@iconify-icons/tabler/compass";
-import { Icon as Se } from "@iconify/react";
-import Be from "@mui/icons-material/Close";
-import { createContext as Re, useState as q, useMemo as E, useContext as Pe, useCallback as K, useEffect as j, forwardRef as st, useRef as U, memo as ct, createElement as dt, Fragment as ut } from "react";
-import Te from "axios";
-import pt from "lodash/orderBy";
+import { Button as ee, useTheme as ve, useMediaQuery as M, Drawer as Je, Box as v, CircularProgress as te, MenuList as Ke, SvgIcon as Ze, Popper as et, Grow as tt, Paper as rt, ClickAwayListener as ot, MenuItem as nt, Stack as I, FormControlLabel as Ce, Checkbox as Se, Typography as L, Link as lt, Grid as me, OutlinedInput as at, InputAdornment as he } from "@mui/material";
+import { ErrorBoundary as it } from "react-error-boundary";
+import st from "@iconify-icons/tabler/compass";
+import { Icon as Be } from "@iconify/react";
+import Re from "@mui/icons-material/Close";
+import { createContext as Pe, useState as j, useMemo as E, useContext as Te, useCallback as K, useEffect as q, forwardRef as ct, useRef as U, memo as dt, createElement as ut, Fragment as pt } from "react";
+import { createAxios as Ie } from "@blocklet/js-sdk";
+import mt from "lodash/orderBy";
 import i from "prop-types";
-import { useInfiniteScroll as mt, useRequest as re, useReactive as ht, useDebounceFn as ft } from "ahooks";
-import gt from "lodash/omitBy";
-import yt from "json-stable-stringify";
+import { useInfiniteScroll as ht, useRequest as re, useReactive as ft, useDebounceFn as gt } from "ahooks";
+import yt from "lodash/omitBy";
+import bt from "json-stable-stringify";
 import "lodash/cloneDeep";
-import bt from "color";
+import xt from "color";
+import { withQuery as Le, joinURL as wt } from "ufo";
 import fe from "flat";
-import xt from "@mui/icons-material/KeyboardArrowDown";
-import wt from "lodash/isEmpty";
-import Ie from "@mui/material/Box";
-import kt from "@arcblock/ux/lib/Avatar";
-import vt from "@arcblock/ux/lib/Img";
-import Ct from "@iconify-icons/tabler/cloud-download";
-import St from "@mui/icons-material/ChevronLeft";
-import Bt from "@mui/icons-material/ChevronRight";
-import Rt from "react-image-gallery";
+import kt from "@mui/icons-material/KeyboardArrowDown";
+import vt from "lodash/isEmpty";
+import $e from "@mui/material/Box";
+import Ct from "@arcblock/ux/lib/Avatar";
+import St from "@arcblock/ux/lib/Img";
+import Bt from "@iconify-icons/tabler/cloud-download";
+import Rt from "@mui/icons-material/ChevronLeft";
+import Pt from "@mui/icons-material/ChevronRight";
+import Tt from "react-image-gallery";
 import "react-image-gallery/styles/css/image-gallery.css";
-import Pt from "@arcblock/ux/lib/Empty";
-import Tt from "react-infinite-scroll-hook";
-import Le from "@mui/material/Typography";
-import It from "@mui/icons-material/Menu";
-import { createRoot as Lt } from "react-dom/client";
-import { autocomplete as $t } from "@algolia/autocomplete-js";
-import { useHotkeys as zt } from "react-hotkeys-hook";
-import { joinURL as _t } from "ufo";
-import At from "@mui/icons-material/Search";
+import It from "@arcblock/ux/lib/Empty";
+import Lt from "react-infinite-scroll-hook";
+import _e from "@mui/material/Typography";
+import $t from "@mui/icons-material/Menu";
+import { createRoot as _t } from "react-dom/client";
+import { autocomplete as zt } from "@algolia/autocomplete-js";
+import { useHotkeys as At } from "react-hotkeys-hook";
+import Ft from "@mui/icons-material/Search";
 import "@algolia/autocomplete-theme-classic/dist/theme.css";
-const $e = Re({
+const ze = Pe({
   open: !1,
   toggleOpen: (e) => {
   }
 });
-function Ft({ children: e }) {
-  const [o, r] = q(!1), n = (l) => {
-    r(l ?? !l);
-  }, a = E(() => ({ open: o, toggleOpen: n }), [o]);
-  return /* @__PURE__ */ t($e.Provider, { value: a, children: e });
+function Dt({ children: e }) {
+  const [r, o] = j(!1), n = (l) => {
+    o(l ?? !l);
+  }, a = E(() => ({ open: r, toggleOpen: n }), [r]);
+  return /* @__PURE__ */ t(ze.Provider, { value: a, children: e });
 }
 function oe() {
-  return Pe($e);
+  return Te(ze);
 }
 const T = {
   nameAsc: "title",
@@ -65,32 +65,32 @@ const T = {
   explorePath: "/api/blocklets/explore",
   exploreDidsPath: "/api/blocklets/dids",
   cacheSize: 100
-}, Dt = (e, o, r, n) => mt(
+}, Mt = (e, r, o, n) => ht(
   async (a) => {
-    a || (r.currentPage = r.defaultCurrentPage);
-    const { currentPage: l, pageSize: d } = r, u = {
-      ...o,
-      category: o.category === "All" ? "" : o.category,
-      sortBy: T[o.sortBy],
+    a || (o.currentPage = o.defaultCurrentPage);
+    const { currentPage: l, pageSize: c } = o, p = {
+      ...r,
+      category: r.category === "All" ? "" : r.category,
+      sortBy: T[r.sortBy],
       page: l,
-      pageSize: d
+      pageSize: c
     };
     n(null);
-    const { data: s = {} } = await e.get(T.blockletsPath, { params: u });
-    return r.currentPage++, { page: l, pageSize: d, list: (s == null ? void 0 : s.dataList) || [], total: (s == null ? void 0 : s.total) || 0 };
+    const { data: d = {} } = await e.get(T.blockletsPath, { params: p });
+    return o.currentPage++, { page: l, pageSize: c, list: (d == null ? void 0 : d.dataList) || [], total: (d == null ? void 0 : d.total) || 0 };
   },
   {
     isNoMore: (a) => a ? a.page * a.pageSize >= a.total : !1,
-    reloadDeps: [e, yt(o)],
+    reloadDeps: [e, bt(r)],
     onError: n
   }
 ), Et = (e) => re(
   async () => {
-    const { data: o } = await e.get(T.categoriesPath);
-    return Array.isArray(o) ? o : [];
+    const { data: r } = await e.get(T.categoriesPath);
+    return Array.isArray(r) ? r : [];
   },
   { manual: !0 }
-), ze = {
+), Ae = {
   filters: i.shape({
     keyword: i.string,
     sortBy: i.string,
@@ -114,7 +114,7 @@ const T = {
   showResourcesSwitch: i.bool,
   showCategory: i.bool,
   tagFilters: i.array
-}, _e = {
+}, Fe = {
   locale: "zh",
   filters: {},
   serverVersion: "",
@@ -130,7 +130,7 @@ const T = {
   showResourcesSwitch: !1,
   showCategory: !0,
   tagFilters: []
-}, Ae = (e) => [
+}, De = (e) => [
   {
     name: e("sort.popularity"),
     value: "popularity"
@@ -143,22 +143,29 @@ const T = {
   //   name: t('sort.rating'),
   //   value: 'rating',
   // },
-], Mt = (e) => [
+], Nt = (e, r, o) => {
+  var c;
+  const n = (c = window.blocklet) == null ? void 0 : c.version, { w: a, h: l } = typeof r == "object" ? { w: r.w, h: r.h } : { w: r, h: r };
+  return Le(e, {
+    ...a || l ? { imageFilter: "resize", w: a, h: l } : {},
+    v: n
+  });
+}, Ot = (e) => [
   { name: e("blocklet.free"), value: "free" },
   { name: e("blocklet.payment"), value: "payment" }
-], Nt = (e = [], o = "en") => e.map((r) => ({ name: r.locales[o] || r.locales.en, value: r._id })), Ot = (e, o) => (
+], jt = (e = [], r = "en") => e.map((o) => ({ name: o.locales[r] || o.locales.en, value: o._id })), qt = (e, r) => (
   // eslint-disable-next-line no-prototype-builtins
-  e == null ? void 0 : e.replace(/{(\w*)}/g, (r, n) => o.hasOwnProperty(n) ? o[n] : "")
-), qt = () => window.innerWidth <= 600, jt = (e) => bt(e).rgb().object();
-function Vt(e, o) {
-  let r;
+  e == null ? void 0 : e.replace(/{(\w*)}/g, (o, n) => r.hasOwnProperty(n) ? r[n] : "")
+), Vt = () => window.innerWidth <= 600, Wt = (e) => xt(e).rgb().object();
+function Ut(e, r) {
+  let o;
   return function(...a) {
-    return r && clearTimeout(r), new Promise((l) => {
-      r = setTimeout(() => l(e(...a)), o);
+    return o && clearTimeout(o), new Promise((l) => {
+      o = setTimeout(() => l(e(...a)), r);
     });
   };
 }
-const Wt = Vt((e) => Promise.resolve(e), 300), Ut = {
+const Ht = Ut((e) => Promise.resolve(e), 300), Gt = {
   common: {
     title: "Blocklet Store",
     searchStore: "Search Blocklet",
@@ -206,7 +213,7 @@ const Wt = Vt((e) => Promise.resolve(e), 300), Ut = {
   autocomplete: {
     expandResult: 'View all search results for "{name}"'
   }
-}, Ht = {
+}, Qt = {
   common: {
     title: "Blocklet 商店",
     searchStore: "搜索 Blocklet",
@@ -255,15 +262,15 @@ const Wt = Vt((e) => Promise.resolve(e), 300), Ut = {
     expandResult: "查看 “{name}” 的所有搜索结果"
   }
 }, J = {
-  en: fe(Ut),
-  zh: fe(Ht)
-}, Fe = (e, o) => {
-  const r = {};
-  return e && (r["x-blocklet-server-version"] = e), o && (r["x-blocklet-store-version"] = o), r;
-}, Gt = (e) => (o, r) => {
-  const n = J[e] ? J[e][o] : J.en[o];
-  return Ot(n, r) || o;
-}, De = {
+  en: fe(Gt),
+  zh: fe(Qt)
+}, Me = (e, r) => {
+  const o = {};
+  return e && (o["x-blocklet-server-version"] = e), r && (o["x-blocklet-store-version"] = r), o;
+}, Xt = (e) => (r, o) => {
+  const n = J[e] ? J[e][r] : J.en[r];
+  return qt(n, o) || r;
+}, Ee = {
   errors: {
     fetchBlockletsError: null,
     fetchCategoriesError: null
@@ -317,143 +324,143 @@ const Wt = Vt((e) => Promise.resolve(e), 300), Ut = {
   developerName: "",
   handleSearchSelect: () => {
   }
-}, Ee = Re(De), { Provider: Qt, Consumer: Yr } = Ee;
+}, Ne = Pe(Ee), { Provider: Yt, Consumer: Kr } = Ne;
 function ne({
   filters: e,
-  children: o,
-  endpoint: r,
+  children: r,
+  endpoint: o,
   locale: n,
   blockletRender: a,
   onFilterChange: l,
-  onSearchSelect: d,
-  extraFilter: u,
-  wrapChildren: s,
-  baseSearch: v,
-  serverVersion: f,
-  storeVersion: y,
-  fetchCategoryDelay: c,
-  showResourcesSwitch: w,
-  showCategory: k,
-  tagFilters: x
+  onSearchSelect: c,
+  extraFilter: p,
+  wrapChildren: d,
+  baseSearch: w,
+  serverVersion: y,
+  storeVersion: b,
+  fetchCategoryDelay: $,
+  showResourcesSwitch: B,
+  showCategory: S,
+  tagFilters: s
 }) {
   var ue;
-  const z = Fe(f, y), b = E(() => Te.create({ baseURL: r, headers: z }), [r]), h = { sortBy: "popularity", sortDirection: "desc", ...e }, C = h.category, _ = ht({
+  const k = Me(y, b), h = E(() => Ie({ baseURL: o, headers: k }), [o]), u = { sortBy: "popularity", sortDirection: "desc", ...e }, x = u.category, z = ft({
     currentPage: T.currentPage,
-    pageSize: qt() ? T.mobilePageSize : T.pageSize,
+    pageSize: Vt() ? T.mobilePageSize : T.pageSize,
     defaultCurrentPage: T.defaultCurrentPage
-  }), [A, $] = q(null), R = Dt(b, h, _, $), {
+  }), [A, _] = j(null), R = Mt(h, u, z, _), {
     data: X = [],
-    error: We,
-    loading: Ue,
+    error: He,
+    loading: Ge,
     run: se
-  } = Et(b), Y = E(() => {
-    const p = pt(X, [(P) => P.name], ["asc"]), g = p.findIndex((P) => P.name === "All" || P.locales.en === "All");
-    return g > -1 ? [{ ...p[g], _id: "All" }, ...p.slice(0, g), ...p.slice(g + 1)] : p;
+  } = Et(h), Y = E(() => {
+    const m = mt(X, [(P) => P.name], ["asc"]), g = m.findIndex((P) => P.name === "All" || P.locales.en === "All");
+    return g > -1 ? [{ ...m[g], _id: "All" }, ...m.slice(0, g), ...m.slice(g + 1)] : m;
   }, [X]), ce = E(() => {
-    var p;
-    return u(((p = R.data) == null ? void 0 : p.list) || []);
-  }, [R.data, u]), de = K(Gt(n), [n]), He = E(() => Nt(Y, n), [Y, n]), Ge = Mt(de), Qe = {
-    errors: { fetchBlockletsError: A, fetchCategoriesError: We },
+    var m;
+    return p(((m = R.data) == null ? void 0 : m.list) || []);
+  }, [R.data, p]), de = K(Xt(n), [n]), Qe = E(() => jt(Y, n), [Y, n]), Xe = Ot(de), Ye = {
+    errors: { fetchBlockletsError: A, fetchCategoriesError: He },
     loadings: {
       fetchBlockletsLoading: R.loading,
-      fetchCategoriesLoading: Ue,
+      fetchCategoriesLoading: Ge,
       loadingMore: R.loadingMore
     },
-    endpoint: r,
+    endpoint: o,
     blockletList: ce,
     total: ((ue = R.data) == null ? void 0 : ue.total) || 0,
-    wrapChildren: s,
+    wrapChildren: d,
     t: de,
-    storeVersion: y,
-    serverVersion: f,
-    filters: h,
-    selectedCategory: C,
+    storeVersion: b,
+    serverVersion: y,
+    filters: u,
+    selectedCategory: x,
     categoryList: Y,
     blockletRender: a,
     locale: n,
-    categoryOptions: He,
-    priceOptions: Ge,
-    storeApi: b,
-    baseSearch: v,
-    showResourcesSwitch: w,
-    showCategory: k,
-    tagFilters: x,
+    categoryOptions: Qe,
+    priceOptions: Xe,
+    storeApi: h,
+    baseSearch: w,
+    showResourcesSwitch: B,
+    showCategory: S,
+    tagFilters: s,
     hasNextPage: !R.noMore,
     onFilterChange: l,
-    cleanFilter: (p) => {
-      const g = p ? gt(h, (P, M) => p == null ? void 0 : p.includes(M)) : {};
+    cleanFilter: (m) => {
+      const g = m ? yt(u, (P, N) => m == null ? void 0 : m.includes(N)) : {};
       l(g);
     },
-    handleSort: (p) => {
-      const g = { ...h, sortBy: p, sortDirection: p === "nameAsc" ? "asc" : "desc" };
+    handleSort: (m) => {
+      const g = { ...u, sortBy: m, sortDirection: m === "nameAsc" ? "asc" : "desc" };
       l(g);
     },
-    handleKeyword: (p) => {
-      const g = { ...h, category: void 0, keyword: p || void 0 };
+    handleKeyword: (m) => {
+      const g = { ...u, category: void 0, keyword: m || void 0 };
       l(g);
     },
-    handlePrice: (p) => {
-      const g = { ...h, price: p === h.price ? void 0 : p };
+    handlePrice: (m) => {
+      const g = { ...u, price: m === u.price ? void 0 : m };
       l(g);
     },
-    handleCategory: (p) => {
-      const g = p === "all" || p === h.category ? "" : p, P = { ...h, category: g };
+    handleCategory: (m) => {
+      const g = m === "all" || m === u.category ? "" : m, P = { ...u, category: g };
       l(P);
     },
-    handleDeveloper: (p) => {
-      const g = { ...h, owner: p || void 0 };
+    handleDeveloper: (m) => {
+      const g = { ...u, owner: m || void 0 };
       l(g);
     },
-    handlePage: (p) => {
-      const g = { ...h, currentPage: p };
+    handlePage: (m) => {
+      const g = { ...u, currentPage: m };
       l(g);
     },
     handleSwitchShowResources: () => {
-      const p = { ...h };
-      l(p);
+      const m = { ...u };
+      l(m);
     },
     loadMore: R.loadMore,
-    getCategoryLocale: (p) => {
-      if (!p)
+    getCategoryLocale: (m) => {
+      if (!m)
         return null;
-      const g = X.find((P) => P._id === p);
+      const g = X.find((P) => P._id === m);
       return g ? g.locales[n] || g.locales.en : null;
     },
     get developerName() {
       var g, P;
-      return ((P = (g = ce.find((M) => {
+      return ((P = (g = ce.find((N) => {
         var pe;
-        return ((pe = M == null ? void 0 : M.owner) == null ? void 0 : pe.did) === h.owner;
+        return ((pe = N == null ? void 0 : N.owner) == null ? void 0 : pe.did) === u.owner;
       })) == null ? void 0 : g.owner) == null ? void 0 : P.name) || "";
     },
-    handleSearchSelect: d
+    handleSearchSelect: c
   };
-  return j(() => {
-    setTimeout(se, c || 0);
-  }, [r, se, c]), /* @__PURE__ */ t(Qt, { value: Qe, children: o });
+  return q(() => {
+    setTimeout(se, $ || 0);
+  }, [o, se, $]), /* @__PURE__ */ t(Yt, { value: Ye, children: r });
 }
 ne.propTypes = {
-  ...ze,
+  ...Ae,
   children: i.any.isRequired
 };
-ne.defaultProps = _e;
-function B() {
-  const e = Pe(Ee);
-  return e || De;
+ne.defaultProps = Fe;
+function C() {
+  const e = Te(Ne);
+  return e || Ee;
 }
-function Me({
+function Oe({
   children: e,
-  onClick: o,
-  size: r = 32
+  onClick: r,
+  size: o = 32
 }) {
   return /* @__PURE__ */ t(
     ee,
     {
-      onClick: o,
+      onClick: r,
       variant: "outlined",
       sx: {
-        minWidth: r,
-        height: r,
+        minWidth: o,
+        height: o,
         p: 0,
         borderColor: "divider",
         "&:hover": {
@@ -466,43 +473,43 @@ function Me({
     }
   );
 }
-function V(e, o) {
-  return e === void 0 ? o : e;
+function V(e, r) {
+  return e === void 0 ? r : e;
 }
 function G({
   xs: e,
-  sm: o,
-  md: r,
+  sm: r,
+  md: o,
   lg: n,
   xl: a,
   exact: l
 }) {
-  const d = Xe(), u = N(d.breakpoints.down("sm")), s = N(d.breakpoints.between("sm", "md")), v = N(d.breakpoints.between("md", "lg")), f = N(d.breakpoints.between("lg", "xl"));
+  const c = ve(), p = M(c.breakpoints.down("sm")), d = M(c.breakpoints.between("sm", "md")), w = M(c.breakpoints.between("md", "lg")), y = M(c.breakpoints.between("lg", "xl"));
   if (l)
-    return u ? e || null : s ? o || null : v ? r || null : f ? n || null : a || null;
-  let y = e;
-  return u || (y = V(o, y), s) || (y = V(r, y), v) || (y = V(n, y), f) ? y : V(a, y);
+    return p ? e || null : d ? r || null : w ? o || null : y ? n || null : a || null;
+  let b = e;
+  return p || (b = V(r, b), d) || (b = V(o, b), w) || (b = V(n, b), y) ? b : V(a, b);
 }
-function Xt({ children: e }) {
-  const { open: o, toggleOpen: r } = oe();
+function Jt({ children: e }) {
+  const { open: r, toggleOpen: o } = oe();
   return /* @__PURE__ */ t(
     G,
     {
-      xs: /* @__PURE__ */ t(Ye, { open: o, onClose: () => r(!1), children: e }),
-      md: /* @__PURE__ */ t(S, { children: e })
+      xs: /* @__PURE__ */ t(Je, { open: r, onClose: () => o(!1), children: e }),
+      md: /* @__PURE__ */ t(v, { children: e })
     }
   );
 }
-const Yt = D(ee)`
+const Kt = D(ee)`
   border-radius: 4px;
-`, le = st(({ children: e, rounded: o, loading: r, disabled: n, ...a }, l) => /* @__PURE__ */ t(
-  Yt,
+`, le = ct(({ children: e, rounded: r, loading: o, disabled: n, ...a }, l) => /* @__PURE__ */ t(
+  Kt,
   {
     ref: l,
     disableElevation: !0,
-    disabled: n || r,
+    disabled: n || o,
     ...a,
-    startIcon: r && /* @__PURE__ */ t(te, { size: "1em" }),
+    startIcon: o && /* @__PURE__ */ t(te, { size: "1em" }),
     children: e
   }
 ));
@@ -518,49 +525,49 @@ le.defaultProps = {
   loading: !1,
   disabled: !1
 };
-function Q({ title: e, value: o, icon: r, prepend: n, options: a, onChange: l, itemRender: d, ...u }) {
-  const s = U(null), v = xe(), [f, y] = q(!1), [c, w] = q(o !== null ? o : ""), k = N(v.breakpoints.down("sm"));
-  j(() => {
-    w(o !== null ? o : "");
-  }, [o]);
-  const x = K(() => {
-    y(!1);
-  }, []), z = K(() => {
-    y(!0);
+function Q({ title: e, value: r, icon: o, prepend: n, options: a, onChange: l, itemRender: c, ...p }) {
+  const d = U(null), w = xe(), [y, b] = j(!1), [$, B] = j(r !== null ? r : ""), S = M(w.breakpoints.down("sm"));
+  q(() => {
+    B(r !== null ? r : "");
+  }, [r]);
+  const s = K(() => {
+    b(!1);
+  }, []), k = K(() => {
+    b(!0);
   }, []);
-  function b(C) {
-    w(C.value), l(C.value), k && x();
+  function h(x) {
+    B(x.value), l(x.value), S && s();
   }
-  function h(C) {
-    return C === c;
+  function u(x) {
+    return x === $;
   }
-  return /* @__PURE__ */ m(F, { children: [
-    /* @__PURE__ */ m(
-      Jt,
+  return /* @__PURE__ */ f(F, { children: [
+    /* @__PURE__ */ f(
+      Zt,
       {
-        ref: s,
-        onClick: z,
+        ref: d,
+        onClick: k,
         variant: "outlined",
         size: "small",
-        className: ["my-select__selector", wt(c) ? "" : "my-select__selector--active"].join(" "),
+        className: ["my-select__selector", vt($) ? "" : "my-select__selector--active"].join(" "),
         sx: { minWidth: "auto" },
-        ...u,
+        ...p,
         children: [
-          /* @__PURE__ */ t("div", { className: "my-select__icon", children: r }),
+          /* @__PURE__ */ t("div", { className: "my-select__icon", children: o }),
           e,
-          /* @__PURE__ */ t(Ke, { className: "my-select__arrowdown", component: xt, fontSize: "small" })
+          /* @__PURE__ */ t(Ze, { className: "my-select__arrowdown", component: kt, fontSize: "small" })
         ]
       }
     ),
-    /* @__PURE__ */ t(Ze, { open: f, anchorEl: s.current, transition: !0, sx: { zIndex: "9999" }, children: ({ TransitionProps: C, placement: _ }) => /* @__PURE__ */ t(et, { ...C, sx: { transformOrigin: _ === "bottom" ? "center top" : "center bottom" }, children: /* @__PURE__ */ t(tt, { children: /* @__PURE__ */ t(rt, { onClickAway: x, children: /* @__PURE__ */ m(Kt, { autoFocusItem: f, onMouseEnter: z, onMouseLeave: x, children: [
+    /* @__PURE__ */ t(et, { open: y, anchorEl: d.current, transition: !0, sx: { zIndex: "9999" }, children: ({ TransitionProps: x, placement: z }) => /* @__PURE__ */ t(tt, { ...x, sx: { transformOrigin: z === "bottom" ? "center top" : "center bottom" }, children: /* @__PURE__ */ t(rt, { children: /* @__PURE__ */ t(ot, { onClickAway: s, children: /* @__PURE__ */ f(er, { autoFocusItem: y, onMouseEnter: k, onMouseLeave: s, children: [
       n,
-      a.map((A) => d ? d(A) : /* @__PURE__ */ t(
-        ot,
+      a.map((A) => c ? c(A) : /* @__PURE__ */ t(
+        nt,
         {
-          onClick: () => b(A),
+          onClick: () => h(A),
           className: [
             "my-select__option",
-            h(A.value) ? "my-select__option--active" : ""
+            u(A.value) ? "my-select__option--active" : ""
           ].join(" "),
           children: A.name
         },
@@ -586,7 +593,7 @@ Q.defaultProps = {
   onChange: () => {
   }
 };
-const Jt = D(le)`
+const Zt = D(le)`
   border: 1px solid #f0f0f0;
   padding: 6px 8px 6px 12px;
   font-weight: ${(e) => e.theme.typography.fontWeightRegular};
@@ -617,7 +624,7 @@ const Jt = D(le)`
       margin-right: 3px;
     }
   }
-`, Kt = D(Je)`
+`, er = D(Ke)`
   .my-select__option__icon {
     color: transparent;
     font-size: 14px;
@@ -634,10 +641,10 @@ const Jt = D(le)`
     }
   }
 `;
-function Ne() {
-  var d;
-  const { filters: e, handleSort: o, handlePrice: r, t: n } = B(), a = Ae(n), l = ((d = a.find((u) => u.value === e.sortBy)) == null ? void 0 : d.name) || n("sort.sort");
-  return /* @__PURE__ */ m(
+function je() {
+  var c;
+  const { filters: e, handleSort: r, handlePrice: o, t: n } = C(), a = De(n), l = ((c = a.find((p) => p.value === e.sortBy)) == null ? void 0 : c.name) || n("sort.sort");
+  return /* @__PURE__ */ f(
     I,
     {
       direction: { xs: "row", md: "column" },
@@ -647,15 +654,15 @@ function Ne() {
       justifyContent: "space-between",
       children: [
         /* @__PURE__ */ t(
-          ve,
+          Ce,
           {
             control: /* @__PURE__ */ t(
-              Ce,
+              Se,
               {
                 checked: e.price === "free",
                 size: "small",
                 sx: { "& .MuiSvgIcon-fontSizeSmall": { fontSize: 16, color: "text.lighter" } },
-                onChange: (u) => r(u.target.checked ? "free" : "")
+                onChange: (p) => o(p.target.checked ? "free" : "")
               }
             ),
             label: n("blocklet.free")
@@ -667,7 +674,7 @@ function Ne() {
             value: e.sortBy,
             options: a,
             title: l,
-            onChange: o,
+            onChange: r,
             icon: null,
             prepend: null,
             itemRender: null
@@ -677,13 +684,13 @@ function Ne() {
     }
   );
 }
-function Zt() {
-  const { selectedCategory: e, handleCategory: o, t: r, categoryOptions: n, filters: a, cleanFilter: l, loadings: d } = B(), { toggleOpen: u } = oe();
-  return /* @__PURE__ */ m(Xt, { children: [
+function tr() {
+  const { selectedCategory: e, handleCategory: r, t: o, categoryOptions: n, filters: a, cleanFilter: l, loadings: c } = C(), { toggleOpen: p } = oe();
+  return /* @__PURE__ */ f(Jt, { children: [
     /* @__PURE__ */ t(
       G,
       {
-        xs: /* @__PURE__ */ m(
+        xs: /* @__PURE__ */ f(
           I,
           {
             direction: "row",
@@ -695,7 +702,7 @@ function Zt() {
             borderBottom: 1,
             borderColor: "divider",
             children: [
-              /* @__PURE__ */ t(Me, { onClick: () => u(!1), children: /* @__PURE__ */ t(Be, {}) }),
+              /* @__PURE__ */ t(Oe, { onClick: () => p(!1), children: /* @__PURE__ */ t(Re, {}) }),
               /* @__PURE__ */ t(L, { flex: 1, variant: "body1", fontWeight: "fontWeightMedium", children: "Categories" })
             ]
           }
@@ -706,14 +713,14 @@ function Zt() {
     /* @__PURE__ */ t(
       I,
       {
-        visibility: d.fetchCategoriesLoading ? "hidden" : "visible",
+        visibility: c.fetchCategoriesLoading ? "hidden" : "visible",
         width: { xs: 268, md: 200 },
         boxSizing: "content-box",
         p: { xs: 2, md: 0 },
         pr: { md: 6 },
-        children: a.keyword ? /* @__PURE__ */ t(Ne, {}) : /* @__PURE__ */ m(F, { children: [
-          /* @__PURE__ */ m(S, { display: "flex", alignItems: "center", gap: 1, children: [
-            /* @__PURE__ */ t(Se, { icon: it }),
+        children: a.keyword ? /* @__PURE__ */ t(je, {}) : /* @__PURE__ */ f(F, { children: [
+          /* @__PURE__ */ f(v, { display: "flex", alignItems: "center", gap: 1, children: [
+            /* @__PURE__ */ t(Be, { icon: st }),
             /* @__PURE__ */ t(
               L,
               {
@@ -722,59 +729,59 @@ function Zt() {
                 fontWeight: e ? void 0 : "fontWeightMedium",
                 sx: { cursor: "pointer" },
                 onClick: () => {
-                  u(!1), l();
+                  p(!1), l();
                 },
-                children: r("explore.title")
+                children: o("explore.title")
               }
             )
           ] }),
-          !!n.length && /* @__PURE__ */ t(I, { pt: 3, mt: 3, borderTop: 1, borderColor: "divider", gap: 2, children: n.map((s) => /* @__PURE__ */ t(
+          !!n.length && /* @__PURE__ */ t(I, { pt: 3, mt: 3, borderTop: 1, borderColor: "divider", gap: 2, children: n.map((d) => /* @__PURE__ */ t(
             L,
             {
               variant: "body1",
-              title: s.name,
+              title: d.name,
               sx: { cursor: "pointer" },
               "data-cy": "filter",
-              color: e === s.value ? "text.primary" : "text.lighter",
+              color: e === d.value ? "text.primary" : "text.lighter",
               textTransform: "capitalize",
               onClick: () => {
-                e === s.value ? l() : o(s.value), u(!1);
+                e === d.value ? l() : r(d.value), p(!1);
               },
-              children: s.name
+              children: d.name
             },
-            s.value
+            d.value
           )) })
         ] })
       }
     )
   ] });
 }
-function Oe() {
-  const { endpoint: e, serverVersion: o, storeVersion: r } = B(), n = Fe(o, r), a = E(() => Te.create({
+function qe() {
+  const { endpoint: e, serverVersion: r, storeVersion: o } = C(), n = Me(r, o), a = E(() => Ie({
     baseURL: e,
     headers: n
   }), [e]);
   return {
     get: async (l) => {
-      const { data: d } = await a.get(l);
-      return d;
+      const { data: c } = await a.get(l);
+      return c;
     },
-    post: async (l, d) => {
-      const { data: u } = await a.post(l, d);
-      return u;
+    post: async (l, c) => {
+      const { data: p } = await a.post(l, c);
+      return p;
     }
   };
 }
-const qe = ct(function(o) {
-  return /* @__PURE__ */ t(Ie, { height: 60, display: "flex", alignItems: "center", justifyContent: "center", ...o, children: /* @__PURE__ */ t(te, {}) });
+const Ve = dt(function(r) {
+  return /* @__PURE__ */ t($e, { height: 60, display: "flex", alignItems: "center", justifyContent: "center", ...r, children: /* @__PURE__ */ t(te, {}) });
 });
 function ge({
   icon: e,
-  children: o,
-  maxWidth: r = 100,
+  children: r,
+  maxWidth: o = 100,
   title: n
 }) {
-  return (o === 0 || o) && /* @__PURE__ */ m(I, { direction: "row", alignItems: "center", gap: 1, sx: { maxWidth: r, overflow: "hidden" }, children: [
+  return (r === 0 || r) && /* @__PURE__ */ f(I, { direction: "row", alignItems: "center", gap: 1, sx: { maxWidth: o, overflow: "hidden" }, children: [
     e,
     /* @__PURE__ */ t(
       L,
@@ -782,19 +789,23 @@ function ge({
         flex: 1,
         variant: "body2",
         sx: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
-        title: n || (typeof o == "string" ? o : void 0),
-        children: o
+        title: n || (typeof r == "string" ? r : void 0),
+        children: r
       }
     )
   ] });
 }
 const ye = 292;
-function er() {
-  var f, y;
-  const { t: e } = B(), { post: o } = Oe(), r = ((y = (f = window.blocklet) == null ? void 0 : f.preferences) == null ? void 0 : y.homeBanner) || [], { data: n = [] } = re(async () => {
-    const c = await o(T.exploreDidsPath, { didList: r.map((w) => w.did) });
-    return Array.isArray(c) ? c : [];
-  }), a = {
+function rr() {
+  var B, S;
+  const { t: e } = C(), { get: r } = qe(), o = ve(), n = M(o.breakpoints.down("md")), a = ((S = (B = window.blocklet) == null ? void 0 : B.preferences) == null ? void 0 : S.homeBanner) || [], { data: l = [], error: c } = re(async () => {
+    const s = await r(
+      Le(T.blockletsPath, { didList: a.map((k) => k.did).join(",") })
+    );
+    return s != null && s.dataList ? a.map((k) => s.dataList.find((h) => h.did === k.did)) : [];
+  });
+  c && console.error("Get Banner Blocklets error:", c);
+  const p = {
     position: "absolute",
     top: "50%",
     transform: "translateY(-50%)",
@@ -802,13 +813,12 @@ function er() {
     cursor: "pointer",
     color: "text.lighter"
   };
-  return r.length > 0 ? /* @__PURE__ */ m(F, { children: [
+  return !c && a.length > 0 ? /* @__PURE__ */ f(F, { children: [
     /* @__PURE__ */ t(L, { component: "h2", variant: "h2", mt: { xs: 2, md: 0 }, mb: 3, children: e("explore.title") }),
-    /* @__PURE__ */ t(S, { height: { xs: "auto", md: ye }, position: "relative", bgcolor: "#F0F7FF", borderRadius: 3, children: /* @__PURE__ */ t(
-      Rt,
+    /* @__PURE__ */ t(v, { height: { xs: "auto", md: ye }, position: "relative", bgcolor: "#F0F7FF", borderRadius: 3, children: /* @__PURE__ */ t(
+      Tt,
       {
         showNav: !0,
-        autoPlay: !0,
         slideDuration: 1e3,
         slideInterval: 5e3,
         showPlayButton: !1,
@@ -816,14 +826,14 @@ function er() {
         showBullets: !1,
         showThumbnails: !1,
         showFullscreenButton: !1,
-        renderLeftNav: (c) => /* @__PURE__ */ t(S, { onClick: c, sx: { display: { xs: "none", md: "block" } }, children: /* @__PURE__ */ t(St, { sx: { ...a, left: 5 } }) }),
-        renderRightNav: (c) => /* @__PURE__ */ t(S, { onClick: c, sx: { display: { xs: "none", md: "block" } }, children: /* @__PURE__ */ t(Bt, { sx: { ...a, right: 5 } }) }),
-        items: r.map((c, w) => ({
-          original: c.did,
+        renderLeftNav: (s) => /* @__PURE__ */ t(v, { onClick: s, sx: { display: { xs: "none", md: "block" } }, children: /* @__PURE__ */ t(Rt, { sx: { ...p, left: 5 } }) }),
+        renderRightNav: (s) => /* @__PURE__ */ t(v, { onClick: s, sx: { display: { xs: "none", md: "block" } }, children: /* @__PURE__ */ t(Pt, { sx: { ...p, right: 5 } }) }),
+        items: a.map((s, k) => ({
+          original: s.did,
           renderItem: () => {
-            var x;
-            const k = n[w] || {};
-            return /* @__PURE__ */ m(
+            var u;
+            const h = l[k] || {};
+            return /* @__PURE__ */ f(
               I,
               {
                 height: { xs: "auto", md: ye },
@@ -834,14 +844,14 @@ function er() {
                 p: { xs: 2, md: 5 },
                 gap: { xs: 2, md: 5 },
                 children: [
-                  l(c.cover || rr(c.did, (x = k.screenshots) == null ? void 0 : x[0])),
-                  /* @__PURE__ */ m(I, { flex: 1, height: "100%", gap: 3, children: [
-                    /* @__PURE__ */ m(S, { flex: 1, children: [
-                      d(c.name || k.title || c.name),
-                      u(c.desc || k.description)
+                  d(s.cover || nr(s.did, (u = h.screenshots) == null ? void 0 : u[0])),
+                  /* @__PURE__ */ f(I, { flex: 1, height: "100%", gap: 3, children: [
+                    /* @__PURE__ */ f(v, { flex: 1, children: [
+                      w(s.name || h.title || s.name),
+                      y(s.desc || h.description)
                     ] }),
-                    k.did && s(k, c.baseNum),
-                    v(c.link, c.did)
+                    h.did && b(h, s.baseNum),
+                    $(s.link, s.did)
                   ] })
                 ]
               }
@@ -851,13 +861,22 @@ function er() {
       }
     ) })
   ] }) : null;
-  function l(c) {
-    return /* @__PURE__ */ t(S, { width: { xs: "100%", md: 338 }, height: 210, borderRadius: 2, overflow: "hidden", children: /* @__PURE__ */ t(vt, { src: c, alt: "", style: { width: "100%", height: "100%", objectFit: "cover" } }) });
+  function d(s) {
+    return /* @__PURE__ */ t(v, { width: { xs: "100%", md: 338 }, height: 210, borderRadius: 2, overflow: "hidden", position: "relative", children: /* @__PURE__ */ t(
+      St,
+      {
+        src: Nt(s, { h: 400, w: 700 }),
+        alt: "",
+        width: n ? void 0 : 338,
+        height: 210,
+        style: { objectFit: "cover" }
+      }
+    ) });
   }
-  function d(c) {
-    return /* @__PURE__ */ t(L, { variant: "h2", width: "100%", children: c });
+  function w(s) {
+    return /* @__PURE__ */ t(L, { variant: "h2", width: "100%", children: s });
   }
-  function u(c) {
+  function y(s) {
     return /* @__PURE__ */ t(
       L,
       {
@@ -875,19 +894,19 @@ function er() {
           overflow: "hidden",
           WebkitBoxOrient: "vertical"
         },
-        children: c
+        children: s
       }
     );
   }
-  function s(c, w = 0) {
-    const { did: k, owner: x, stats: z } = c;
-    return /* @__PURE__ */ m(S, { display: "flex", alignItems: "center", gap: 2, color: "text.secondary", children: [
-      /* @__PURE__ */ t(ge, { icon: /* @__PURE__ */ t(kt, { src: x.avatar, did: k, size: 20, variant: "circle" }), children: x.fullName }),
-      /* @__PURE__ */ t(ge, { icon: /* @__PURE__ */ t(Se, { icon: Ct }), title: `${z.downloads + w}`, children: tr(z.downloads + w) })
+  function b(s, k = 0) {
+    const { did: h, owner: u, stats: x } = s;
+    return /* @__PURE__ */ f(v, { display: "flex", alignItems: "center", gap: 2, color: "text.secondary", children: [
+      /* @__PURE__ */ t(ge, { icon: /* @__PURE__ */ t(Ct, { src: u.avatar, did: h, size: 20, variant: "circle" }), children: u.fullName }),
+      /* @__PURE__ */ t(ge, { icon: /* @__PURE__ */ t(Be, { icon: Bt }), title: `${x.downloads + k}`, children: or(x.downloads + k) })
     ] });
   }
-  function v(c, w) {
-    return /* @__PURE__ */ t(nt, { href: c || `/blocklets/${w}`, align: "left", width: 100, children: /* @__PURE__ */ t(
+  function $(s, k) {
+    return /* @__PURE__ */ t(lt, { href: s || `/blocklets/${k}`, align: "left", width: 100, children: /* @__PURE__ */ t(
       ee,
       {
         variant: "outlined",
@@ -903,34 +922,34 @@ function er() {
     ) });
   }
 }
-const tr = (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`, rr = (e, o) => e && o ? `/assets/${e}/screenshots/${o}` : "";
-function or({ title: e, blocklets: o }) {
-  const { blockletRender: r, serverVersion: n } = B();
-  return /* @__PURE__ */ m(S, { mt: 3, children: [
+const or = (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`, nr = (e, r) => e && r ? `/assets/${e}/screenshots/${r}` : "";
+function lr({ title: e, blocklets: r }) {
+  const { blockletRender: o, serverVersion: n } = C();
+  return /* @__PURE__ */ f(v, { mt: 3, children: [
     /* @__PURE__ */ t(L, { component: "h3", variant: "h3", sx: { mb: 2 }, children: e }),
-    /* @__PURE__ */ t(me, { container: !0, spacing: 2, children: o.map((a) => /* @__PURE__ */ t(me, { item: !0, xs: 12, md: 6, p: "2px", "data-blocklet-did": a.did, children: /* @__PURE__ */ t(S, { padding: "1px", children: r({ blocklet: a, blocklets: o, serverVersion: n }) }) }, a.did)) })
+    /* @__PURE__ */ t(me, { container: !0, spacing: 2, children: r.map((a) => /* @__PURE__ */ t(me, { item: !0, xs: 12, md: 6, p: "2px", "data-blocklet-did": a.did, children: /* @__PURE__ */ t(v, { padding: "1px", children: o({ blocklet: a, blocklets: r, serverVersion: n }) }) }, a.did)) })
   ] });
 }
-function nr() {
-  const { get: e } = Oe(), { t: o } = B(), {
-    data: r = [],
+function ar() {
+  const { get: e } = qe(), { t: r } = C(), {
+    data: o = [],
     error: n,
     loading: a
   } = re(async () => {
     const l = await e(T.explorePath);
     return Array.isArray(l) ? l : [];
   });
-  return n ? /* @__PURE__ */ t(Z, { error: new Error(`Failed to fetch blocklets from ${T.explorePath}`) }) : a ? /* @__PURE__ */ t(qe, { mt: 15 }) : /* @__PURE__ */ m(F, { children: [
-    /* @__PURE__ */ t(er, {}),
-    r.map(
-      (l) => l.blocklets.length > 0 ? /* @__PURE__ */ t(or, { title: o(`explore.${l.type}`), blocklets: l.blocklets }, l.type) : null
+  return n ? /* @__PURE__ */ t(Z, { error: new Error(`Failed to fetch blocklets from ${T.explorePath}`) }) : a ? /* @__PURE__ */ t(Ve, { mt: 15 }) : /* @__PURE__ */ f(F, { children: [
+    /* @__PURE__ */ t(rr, {}),
+    o.map(
+      (l) => l.blocklets.length > 0 ? /* @__PURE__ */ t(lr, { title: r(`explore.${l.type}`), blocklets: l.blocklets }, l.type) : null
     )
   ] });
 }
-function lr() {
-  var u;
-  const { filters: e, handleSort: o, handlePrice: r, t: n, getCategoryLocale: a } = B(), l = Ae(n), d = ((u = l.find((s) => s.value === e.sortBy)) == null ? void 0 : u.name) || n("sort.sort");
-  return /* @__PURE__ */ m(
+function ir() {
+  var p;
+  const { filters: e, handleSort: r, handlePrice: o, t: n, getCategoryLocale: a } = C(), l = De(n), c = ((p = l.find((d) => d.value === e.sortBy)) == null ? void 0 : p.name) || n("sort.sort");
+  return /* @__PURE__ */ f(
     I,
     {
       direction: { xs: "column", md: "row" },
@@ -942,17 +961,17 @@ function lr() {
       pb: 3,
       children: [
         /* @__PURE__ */ t(L, { variant: "h2", textTransform: "capitalize", children: a(e.category) }),
-        /* @__PURE__ */ m(I, { direction: "row", alignItems: "center", width: { xs: "100%", md: "auto" }, justifyContent: "space-between", children: [
+        /* @__PURE__ */ f(I, { direction: "row", alignItems: "center", width: { xs: "100%", md: "auto" }, justifyContent: "space-between", children: [
           /* @__PURE__ */ t(
-            ve,
+            Ce,
             {
               control: /* @__PURE__ */ t(
-                Ce,
+                Se,
                 {
                   checked: e.price === "free",
                   size: "small",
                   sx: { "& .MuiSvgIcon-fontSizeSmall": { fontSize: 16, color: "text.lighter" } },
-                  onChange: (s) => r(s.target.checked ? "free" : "")
+                  onChange: (d) => o(d.target.checked ? "free" : "")
                 }
               ),
               label: n("blocklet.free")
@@ -963,8 +982,8 @@ function lr() {
             {
               value: e.sortBy,
               options: l,
-              title: d,
-              onChange: o,
+              title: c,
+              onChange: r,
               icon: null,
               prepend: null,
               itemRender: null
@@ -976,16 +995,16 @@ function lr() {
   );
 }
 function be() {
-  const { t: e } = B();
-  return /* @__PURE__ */ t(Le, { style: { textAlign: "center" }, variant: "subtitle2", children: e("blocklet.noResults") });
+  const { t: e } = C();
+  return /* @__PURE__ */ t(_e, { style: { textAlign: "center" }, variant: "subtitle2", children: e("blocklet.noResults") });
 }
-function O({ filterTip: e, keywordTip: o }) {
-  const { t: r, locale: n } = B(), a = () => n === "zh" ? "、" : " , ";
-  return /* @__PURE__ */ m(Ie, { className: "tips", children: [
-    /* @__PURE__ */ t("span", { style: { marginRight: "16px" }, children: r("blocklet.emptyTip") }),
-    e && /* @__PURE__ */ t("span", { children: r("blocklet.filterTip") }),
-    e && o && a(),
-    o && /* @__PURE__ */ t("span", { children: r("blocklet.keywordTip") })
+function O({ filterTip: e, keywordTip: r }) {
+  const { t: o, locale: n } = C(), a = () => n === "zh" ? "、" : " , ";
+  return /* @__PURE__ */ f($e, { className: "tips", children: [
+    /* @__PURE__ */ t("span", { style: { marginRight: "16px" }, children: o("blocklet.emptyTip") }),
+    e && /* @__PURE__ */ t("span", { children: o("blocklet.filterTip") }),
+    e && r && a(),
+    r && /* @__PURE__ */ t("span", { children: o("blocklet.keywordTip") })
   ] });
 }
 O.propTypes = {
@@ -996,16 +1015,16 @@ O.defaultProps = {
   filterTip: !1,
   keywordTip: !1
 };
-function H({ primaryStart: e, primaryEnd: o, filter: r }) {
-  return /* @__PURE__ */ m(Le, { variant: "subtitle2", children: [
+function H({ primaryStart: e, primaryEnd: r, filter: o }) {
+  return /* @__PURE__ */ f(_e, { variant: "subtitle2", children: [
     /* @__PURE__ */ t("span", { children: e }),
-    /* @__PURE__ */ m("span", { className: "primary", children: [
+    /* @__PURE__ */ f("span", { className: "primary", children: [
       " ",
-      r,
+      o,
       " "
     ] }),
-    /* @__PURE__ */ m("span", { children: [
-      o,
+    /* @__PURE__ */ f("span", { children: [
+      r,
       " "
     ] })
   ] });
@@ -1015,80 +1034,80 @@ H.propTypes = {
   primaryEnd: i.string.isRequired,
   filter: i.string.isRequired
 };
-function je({ blocklets: e, ...o }) {
+function We({ blocklets: e, ...r }) {
   const {
-    blockletRender: r,
+    blockletRender: o,
     errors: n,
     loadings: a,
     selectedCategory: l,
-    getCategoryLocale: d,
-    filters: u,
-    t: s,
-    serverVersion: v,
-    hasNextPage: f,
-    loadMore: y,
-    endpoint: c
-  } = B(), w = !!l || !!u.price, [k] = Tt({
+    getCategoryLocale: c,
+    filters: p,
+    t: d,
+    serverVersion: w,
+    hasNextPage: y,
+    loadMore: b,
+    endpoint: $
+  } = C(), B = !!l || !!p.price, [S] = Lt({
     loading: a.fetchBlockletsLoading || a.loadingMore,
-    hasNextPage: f,
-    onLoadMore: y
+    hasNextPage: y,
+    onLoadMore: b
   });
   if (n.fetchBlockletsError)
     return /* @__PURE__ */ t(
       Z,
       {
-        error: new Error(`Failed to fetch blocklets from ${c}: ${n.fetchBlockletsError.message}`)
+        error: new Error(`Failed to fetch blocklets from ${$}: ${n.fetchBlockletsError.message}`)
       }
     );
   if (a.fetchBlockletsLoading)
-    return /* @__PURE__ */ t(qe, { mt: 15 });
-  if (u.keyword && w && e.length === 0)
-    return /* @__PURE__ */ m(W, { children: [
+    return /* @__PURE__ */ t(Ve, { mt: 15 });
+  if (p.keyword && B && e.length === 0)
+    return /* @__PURE__ */ f(W, { children: [
       /* @__PURE__ */ t(
         H,
         {
-          primaryStart: s("blocklet.noBlockletPart1"),
-          primaryEnd: s("blocklet.noBlockletPart2"),
-          filter: u.keyword
+          primaryStart: d("blocklet.noBlockletPart1"),
+          primaryEnd: d("blocklet.noBlockletPart2"),
+          filter: p.keyword
         }
       ),
       /* @__PURE__ */ t(O, { keywordTip: !0, filterTip: !0 })
     ] });
-  if (u.keyword && e.length === 0)
-    return /* @__PURE__ */ m(W, { children: [
+  if (p.keyword && e.length === 0)
+    return /* @__PURE__ */ f(W, { children: [
       /* @__PURE__ */ t(
         H,
         {
-          primaryStart: s("blocklet.noBlockletPart1"),
-          primaryEnd: s("blocklet.noBlockletPart2"),
-          filter: u.keyword
+          primaryStart: d("blocklet.noBlockletPart1"),
+          primaryEnd: d("blocklet.noBlockletPart2"),
+          filter: p.keyword
         }
       ),
       /* @__PURE__ */ t(O, { keywordTip: !0 })
     ] });
-  if (w && e.length === 0) {
-    const x = d(l);
-    return /* @__PURE__ */ m(W, { children: [
-      x ? /* @__PURE__ */ t(
+  if (B && e.length === 0) {
+    const s = c(l);
+    return /* @__PURE__ */ f(W, { children: [
+      s ? /* @__PURE__ */ t(
         H,
         {
-          primaryStart: s("blocklet.noCategoryResults1"),
-          primaryEnd: s("blocklet.noCategoryResults2"),
-          filter: x
+          primaryStart: d("blocklet.noCategoryResults1"),
+          primaryEnd: d("blocklet.noCategoryResults2"),
+          filter: s
         }
       ) : /* @__PURE__ */ t(be, {}),
       /* @__PURE__ */ t(O, { filterTip: !0 })
     ] });
   }
-  return e.length === 0 ? /* @__PURE__ */ t(W, { children: /* @__PURE__ */ t(be, {}) }) : /* @__PURE__ */ m(F, { children: [
-    /* @__PURE__ */ t(S, { display: "grid", gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" }, p: "2px", ...o, gap: 2, children: e.map((x) => /* @__PURE__ */ t(S, { "data-blocklet-did": x.did, children: r({ blocklet: x, blocklets: e, serverVersion: v }) }, x.did)) }),
-    f && /* @__PURE__ */ t(S, { height: 60, display: "flex", justifyContent: "center", py: 2, ref: k, children: /* @__PURE__ */ t(te, {}) })
+  return e.length === 0 ? /* @__PURE__ */ t(W, { children: /* @__PURE__ */ t(be, {}) }) : /* @__PURE__ */ f(F, { children: [
+    /* @__PURE__ */ t(v, { display: "grid", gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" }, p: "2px", ...r, gap: 2, children: e.map((s) => /* @__PURE__ */ t(v, { "data-blocklet-did": s.did, children: o({ blocklet: s, blocklets: e, serverVersion: w }) }, s.did)) }),
+    y && /* @__PURE__ */ t(v, { height: 60, display: "flex", justifyContent: "center", py: 2, ref: S, children: /* @__PURE__ */ t(te, {}) })
   ] });
 }
-je.propTypes = {
+We.propTypes = {
   blocklets: i.array.isRequired
 };
-const W = D(Pt)`
+const W = D(It)`
   text-align: center;
   margin-top: 100px;
   .primary {
@@ -1098,38 +1117,38 @@ const W = D(Pt)`
     margin-top: ${(e) => e.theme.spacing(1)};
   }
 `;
-function ae({ onSelect: e, wrapChildren: o }) {
-  const r = U(null), n = U(null), a = U(null), { storeApi: l, blockletRender: d, filters: u, endpoint: s, handleKeyword: v, t: f, serverVersion: y } = B(), c = async (b) => {
-    const { data: h } = await l.get(T.blockletsPath, { params: b }), C = h.dataList || [];
-    return C.length > 0 && C.unshift({ type: "more-result", total: h.total || 0 }), C;
-  }, w = (b) => {
-    v(b.state.query), b.setIsOpen(!1);
-  }, k = () => {
-    r.current && setTimeout(() => {
-      const b = r.current.querySelector("input.bl-autocomplete-input");
-      b && b.focus();
+function ae({ onSelect: e, wrapChildren: r }) {
+  const o = U(null), n = U(null), a = U(null), { storeApi: l, blockletRender: c, filters: p, endpoint: d, handleKeyword: w, t: y, serverVersion: b } = C(), $ = async (h) => {
+    const { data: u } = await l.get(T.blockletsPath, { params: h }), x = u.dataList || [];
+    return x.length > 0 && x.unshift({ type: "more-result", total: u.total || 0 }), x;
+  }, B = (h) => {
+    w(h.state.query), h.setIsOpen(!1);
+  }, S = () => {
+    o.current && setTimeout(() => {
+      const h = o.current.querySelector("input.bl-autocomplete-input");
+      h && h.focus();
     });
-  }, x = (b) => {
-    b.setIsOpen(!1), k();
-  }, z = ({ prevState: b, state: h }) => {
-    b.query !== h.query && (h.query || (v(), k()));
+  }, s = (h) => {
+    h.setIsOpen(!1), S();
+  }, k = ({ prevState: h, state: u }) => {
+    h.query !== u.query && (u.query || (w(), S()));
   };
-  return zt(
+  return At(
     "ctrl + k, command + k",
-    (b) => (b.stopPropagation(), b.preventDefault(), k(), !1),
+    (h) => (h.stopPropagation(), h.preventDefault(), S(), !1),
     { enableOnTags: ["INPUT"] }
-  ), j(() => {
-    k();
-  }, [s]), j(() => {
-    if (!r.current)
+  ), q(() => {
+    S();
+  }, [d]), q(() => {
+    if (!o.current)
       return;
-    const b = $t({
-      container: r.current,
-      renderer: { createElement: dt, Fragment: ut, render: () => {
+    const h = zt({
+      container: o.current,
+      renderer: { createElement: ut, Fragment: pt, render: () => {
       } },
-      render({ children: h }, C) {
-        var _;
-        (!n.current || a.current !== C) && (a.current = C, (_ = n.current) == null || _.unmount(), n.current = Lt(C)), n.current.render(o(h));
+      render({ children: u }, x) {
+        var z;
+        (!n.current || a.current !== x) && (a.current = x, (z = n.current) == null || z.unmount(), n.current = _t(x)), n.current.render(r(u));
       },
       autoFocus: !0,
       openOnFocus: !1,
@@ -1143,53 +1162,53 @@ function ae({ onSelect: e, wrapChildren: o }) {
         detachedContainer: "bl-autocomplete-detached-container"
       },
       translations: {
-        clearButtonTitle: f("common.clear"),
-        detachedCancelButtonText: f("common.cancel"),
-        submitButtonTitle: f("common.search"),
-        detachedSearchButtonTitle: f("common.search")
+        clearButtonTitle: y("common.clear"),
+        detachedCancelButtonText: y("common.cancel"),
+        submitButtonTitle: y("common.search"),
+        detachedSearchButtonTitle: y("common.search")
       },
-      placeholder: f("common.searchStore"),
+      placeholder: y("common.searchStore"),
       initialState: {
-        query: u.keyword
+        query: p.keyword
       },
-      onStateChange(h) {
-        z(h);
+      onStateChange(u) {
+        k(u);
       },
-      onSubmit: w,
-      onReset(h) {
-        x(h);
+      onSubmit: B,
+      onReset(u) {
+        s(u);
       },
-      getSources({ query: h, state: C, ..._ }) {
+      getSources({ query: u, state: x, ...z }) {
         const A = {
           sortBy: T.nameDesc,
           page: 1,
           pageSize: 10,
-          keyword: h
+          keyword: u
         };
-        return Wt([
+        return Ht([
           {
             sourceId: "blocklets",
             getItems() {
-              return c(A);
+              return $(A);
             },
             // 选中后填充 搜索框中值
-            getItemInputValue({ item: $ }) {
-              return $.type === "more-result" ? h : $.title;
+            getItemInputValue({ item: _ }) {
+              return _.type === "more-result" ? u : _.title;
             },
             // 选中或者点击自动完成列表中的 item 时触发
-            onSelect({ event: $, item: R }) {
-              return R.type === "more-result" ? (_.setIsOpen(!1), v(h)) : $.type === "keydown" ? v(R.title) : e({
+            onSelect({ event: _, item: R }) {
+              return R.type === "more-result" ? (z.setIsOpen(!1), w(u)) : _.type === "keydown" ? w(R.title) : e({
                 blocklet: R,
-                detailUrl: _t(s, "/blocklets", R.did),
-                storeUrl: s
+                detailUrl: wt(d, "/blocklets", R.did),
+                storeUrl: d
               });
             },
             templates: {
-              item({ item: $ }) {
-                return $.type === "more-result" ? /* @__PURE__ */ t("div", { children: f("autocomplete.expandResult", { name: h, number: $.total.toLocaleString() }) }) : d({ blocklet: $, autocompleteSetters: _, serverVersion: y });
+              item({ item: _ }) {
+                return _.type === "more-result" ? /* @__PURE__ */ t("div", { children: y("autocomplete.expandResult", { name: u, number: _.total.toLocaleString() }) }) : c({ blocklet: _, autocompleteSetters: z, serverVersion: b });
               },
               noResults() {
-                return f("blocklet.noResults");
+                return y("blocklet.noResults");
               }
             }
           }
@@ -1197,20 +1216,20 @@ function ae({ onSelect: e, wrapChildren: o }) {
       }
     });
     return () => {
-      b.destroy();
+      h.destroy();
     };
-  }, [u, d]), /* @__PURE__ */ m(F, { children: [
+  }, [p, c]), /* @__PURE__ */ f(F, { children: [
     /* @__PURE__ */ t(
       we,
       {
-        styles: (b) => ke`
+        styles: (h) => ke`
           .bl-autocomplete-detached-container {
             .bl-autocomplete-detached-cancel {
               white-space: nowrap;
             }
           }
           .bl-autocomplete-panel {
-            @media (min-width: ${b.breakpoints.values.md}px) {
+            @media (min-width: ${h.breakpoints.values.md}px) {
               min-width: 450px;
               left: unset !important;
             }
@@ -1218,7 +1237,7 @@ function ae({ onSelect: e, wrapChildren: o }) {
         `
       }
     ),
-    /* @__PURE__ */ t("div", { className: "bl-search-container", ref: r })
+    /* @__PURE__ */ t("div", { className: "bl-search-container", ref: o })
   ] });
 }
 ae.propTypes = {
@@ -1228,29 +1247,29 @@ ae.propTypes = {
 ae.defaultProps = {
   wrapChildren: (e) => e
 };
-function ie({ placeholder: e, ...o }) {
-  const { filters: r, handleKeyword: n } = B(), [a, l] = q(r.keyword || ""), d = ft(n, { wait: 300 }), u = (v) => {
-    const { value: f } = v.target;
-    l(f), d.run(f);
-  }, s = () => {
+function ie({ placeholder: e, ...r }) {
+  const { filters: o, handleKeyword: n } = C(), [a, l] = j(o.keyword || ""), c = gt(n, { wait: 300 }), p = (w) => {
+    const { value: y } = w.target;
+    l(y), c.run(y);
+  }, d = () => {
     l(""), n();
   };
-  return j(() => {
-    l(r.keyword || "");
-  }, [r.keyword]), /* @__PURE__ */ t(
-    ar,
+  return q(() => {
+    l(o.keyword || "");
+  }, [o.keyword]), /* @__PURE__ */ t(
+    sr,
     {
       inputProps: {
         "data-cy": "search-blocklet"
       },
-      startAdornment: /* @__PURE__ */ t(he, { position: "start", children: /* @__PURE__ */ t(ir, {}) }),
-      onChange: u,
+      startAdornment: /* @__PURE__ */ t(he, { position: "start", children: /* @__PURE__ */ t(cr, {}) }),
+      onChange: p,
       placeholder: e,
       value: a,
       title: e,
       "data-cy": "search",
-      endAdornment: a && /* @__PURE__ */ t(he, { position: "end", children: /* @__PURE__ */ t(sr, { "data-cy": "search-delete", onClick: s }) }),
-      ...o
+      endAdornment: a && /* @__PURE__ */ t(he, { position: "end", children: /* @__PURE__ */ t(dr, { "data-cy": "search-delete", onClick: d }) }),
+      ...r
     }
   );
 }
@@ -1260,7 +1279,7 @@ ie.propTypes = {
 ie.defaultProps = {
   placeholder: "Type to search..."
 };
-const ar = D(lt)`
+const sr = D(at)`
   background-color: ${(e) => e.theme.palette.grey[50]};
   font-size: 14px;
   border-radius: 6px;
@@ -1277,20 +1296,20 @@ const ar = D(lt)`
       color: transparent;
     }
   }
-`, ir = D(At)`
+`, cr = D(Ft)`
   color: ${(e) => e.theme.palette.grey[500]};
   font-size: 28px;
   @media (max-width: ${(e) => e.theme.breakpoints.values.md}px) {
     font-size: 24px;
   }
-`, sr = D(Be)`
+`, dr = D(Re)`
   color: ${(e) => e.theme.palette.grey[500]};
   font-size: 16px;
   cursor: pointer;
 `;
-function cr() {
-  const { filters: e, handleSearchSelect: o, t: r, wrapChildren: n, baseSearch: a } = B(), { toggleOpen: l } = oe(), d = !!e.keyword;
-  return /* @__PURE__ */ m(
+function ur() {
+  const { filters: e, handleSearchSelect: r, t: o, wrapChildren: n, baseSearch: a } = C(), { toggleOpen: l } = oe(), c = !!e.keyword;
+  return /* @__PURE__ */ f(
     I,
     {
       direction: "row",
@@ -1305,66 +1324,66 @@ function cr() {
         /* @__PURE__ */ t(
           G,
           {
-            xs: !d && /* @__PURE__ */ t(Me, { onClick: () => l(!0), children: /* @__PURE__ */ t(It, {}) }),
-            md: /* @__PURE__ */ t(L, { variant: "h1", children: r("common.title") })
+            xs: !c && /* @__PURE__ */ t(Oe, { onClick: () => l(!0), children: /* @__PURE__ */ t($t, {}) }),
+            md: /* @__PURE__ */ t(L, { variant: "h1", children: o("common.title") })
           }
         ),
         /* @__PURE__ */ t(
-          S,
+          v,
           {
-            width: { xs: d ? "100%" : 300, md: 300 },
+            width: { xs: c ? "100%" : 300, md: 300 },
             className: "filter-bar",
             sx: {
               "& .bl-autocomplete-form": { borderRadius: 2 },
               "& .aa-SubmitButton, & .aa-LoadingIndicator": { width: "auto", pl: 1.5, pr: 1 },
               "& .aa-SubmitIcon, & .aa-LoadingIcon": { height: 16, width: 16 }
             },
-            children: a ? /* @__PURE__ */ t(ie, { className: "bl-search-container", placeholder: r("common.searchStore"), sx: { pl: 1.5 } }) : /* @__PURE__ */ t(ae, { onSelect: o, wrapChildren: n })
+            children: a ? /* @__PURE__ */ t(ie, { className: "bl-search-container", placeholder: o("common.searchStore"), sx: { pl: 1.5 } }) : /* @__PURE__ */ t(ae, { onSelect: r, wrapChildren: n })
           }
         )
       ]
     }
   );
 }
-function dr() {
-  const { blockletList: e, total: o, filters: r, t: n } = B(), a = r.category || r.keyword || r.price;
-  return /* @__PURE__ */ t(Ft, { children: /* @__PURE__ */ m(at, { FallbackComponent: Z, children: [
-    /* @__PURE__ */ t(cr, {}),
-    /* @__PURE__ */ m(S, { display: "flex", height: "100%", children: [
-      /* @__PURE__ */ t(Zt, {}),
-      /* @__PURE__ */ t(I, { height: "100%", position: "relative", flex: 1, overflow: "visible", children: a ? /* @__PURE__ */ m(F, { children: [
-        r.keyword ? /* @__PURE__ */ m(F, { children: [
-          /* @__PURE__ */ t(G, { xs: /* @__PURE__ */ t(Ne, {}), md: null }),
+function pr() {
+  const { blockletList: e, total: r, filters: o, t: n } = C(), a = o.category || o.keyword || o.price;
+  return /* @__PURE__ */ t(Dt, { children: /* @__PURE__ */ f(it, { FallbackComponent: Z, children: [
+    /* @__PURE__ */ t(ur, {}),
+    /* @__PURE__ */ f(v, { display: "flex", height: "100%", children: [
+      /* @__PURE__ */ t(tr, {}),
+      /* @__PURE__ */ t(I, { height: "100%", position: "relative", flex: 1, overflow: "visible", children: a ? /* @__PURE__ */ f(F, { children: [
+        o.keyword ? /* @__PURE__ */ f(F, { children: [
+          /* @__PURE__ */ t(G, { xs: /* @__PURE__ */ t(je, {}), md: null }),
           l()
-        ] }) : /* @__PURE__ */ t(lr, {}),
-        /* @__PURE__ */ t(je, { blocklets: e, height: "100%" })
-      ] }) : /* @__PURE__ */ t(nr, {}) })
+        ] }) : /* @__PURE__ */ t(ir, {}),
+        /* @__PURE__ */ t(We, { blocklets: e, height: "100%" })
+      ] }) : /* @__PURE__ */ t(ar, {}) })
     ] })
   ] }) });
   function l() {
-    return /* @__PURE__ */ m(I, { direction: "row", alignItems: "center", justifyContent: "space-between", mb: 2, mt: { xs: 2, md: 0 }, children: [
-      /* @__PURE__ */ t(L, { variant: "h3", children: n("blocklet.search", { keyword: r.keyword }) }),
-      /* @__PURE__ */ t(L, { variant: "body1", color: "text.lighter", fontSize: 13, children: n("blocklet.resultCount", { count: o }) })
+    return /* @__PURE__ */ f(I, { direction: "row", alignItems: "center", justifyContent: "space-between", mb: 2, mt: { xs: 2, md: 0 }, children: [
+      /* @__PURE__ */ t(L, { variant: "h3", children: n("blocklet.search", { keyword: o.keyword }) }),
+      /* @__PURE__ */ t(L, { variant: "body1", color: "text.lighter", fontSize: 13, children: n("blocklet.resultCount", { count: r }) })
     ] });
   }
 }
-function Ve(e) {
-  const o = xe(), r = jt(o.palette.primary.main), n = {
+function Ue(e) {
+  const r = xe(), o = Wt(r.palette.primary.main), n = {
     autocomplete: ke`
       :root {
-        --aa-detached-media-query: (max-width: ${o.breakpoints.values.md}px) !important;
-        --aa-detached-modal-media-query: (min-width: ${o.breakpoints.values.md}px) !important;
-        --aa-detached-modal-max-width: ${o.breakpoints.values.md}px !important;
-        --aa-selected-color-rgb: ${r.r}, ${r.g}, ${r.b} !important;
-        --aa-primary-color-rgb: ${r.r}, ${r.g}, ${r.b} !important;
+        --aa-detached-media-query: (max-width: ${r.breakpoints.values.md}px) !important;
+        --aa-detached-modal-media-query: (min-width: ${r.breakpoints.values.md}px) !important;
+        --aa-detached-modal-max-width: ${r.breakpoints.values.md}px !important;
+        --aa-selected-color-rgb: ${o.r}, ${o.g}, ${o.b} !important;
+        --aa-primary-color-rgb: ${o.r}, ${o.g}, ${o.b} !important;
         --aa-input-background-color-rgb: 250, 250, 250 !important;
       }
       .bl-autocomplete-panel {
-        z-index: ${o.zIndex.modal};
+        z-index: ${r.zIndex.modal};
       }
       .bl-autocomplete-label {
         .aa-SubmitIcon {
-          color: ${o.palette.grey[500]} !important;
+          color: ${r.palette.grey[500]} !important;
         }
       }
       .bl-autocomplete-form {
@@ -1380,21 +1399,21 @@ function Ve(e) {
           box-shadow: none !important;
         }
         .aa-SubmitIcon {
-          color: ${o.palette.grey[500]} !important;
+          color: ${r.palette.grey[500]} !important;
         }
       }
       .aa-Panel .arcblock-blocklet button {
-        border: 1px solid rgba(${r.r}, ${r.g}, ${r.b}, 0.5);
+        border: 1px solid rgba(${o.r}, ${o.g}, ${o.b}, 0.5);
       }
     `
   };
-  return /* @__PURE__ */ m(ne, { ...e, children: [
+  return /* @__PURE__ */ f(ne, { ...e, children: [
     /* @__PURE__ */ t(we, { styles: n.autocomplete }),
-    /* @__PURE__ */ t(dr, {})
+    /* @__PURE__ */ t(pr, {})
   ] });
 }
-Ve.propTypes = ze;
-Ve.defaultProps = _e;
+Ue.propTypes = Ae;
+Ue.defaultProps = Fe;
 export {
-  Ve as default
+  Ue as default
 };