@blocklet/list 0.13.39 → 0.13.40

package/lib/index.es.js

@@ -1,56 +1,56 @@
-import { jsx as t, jsxs as p, Fragment as F } from "react/jsx-runtime";
+import { jsx as t, jsxs as m, Fragment as F } from "react/jsx-runtime";
 import { styled as D, useTheme as be } from "@arcblock/ux/lib/Theme";
 import { Global as xe, css as we } from "@emotion/react";
-import { ErrorFallback as K } from "@arcblock/ux/lib/ErrorBoundary";
-import { Button as Z, useTheme as Ge, useMediaQuery as N, Drawer as Qe, Box as S, Stack as P, FormControlLabel as ke, Checkbox as ve, Typography as T, CircularProgress as ee, Link as Xe, Grid as pe, MenuList as Ye, SvgIcon as Je, Popper as Ke, Grow as Ze, Paper as et, ClickAwayListener as tt, MenuItem as rt, OutlinedInput as ot, InputAdornment as me } from "@mui/material";
-import { ErrorBoundary as nt } from "react-error-boundary";
-import lt from "@iconify-icons/tabler/compass";
+import { ErrorFallback as Z } from "@arcblock/ux/lib/ErrorBoundary";
+import { Button as ee, useTheme as Qe, useMediaQuery as N, Drawer as Xe, Box as S, CircularProgress as te, MenuList as Ye, SvgIcon as Je, Popper as Ke, Grow as Ze, Paper as et, ClickAwayListener as tt, MenuItem as rt, Stack as T, FormControlLabel as ke, Checkbox as ve, Typography as I, Link as ot, Grid as pe, OutlinedInput as nt, InputAdornment as me } from "@mui/material";
+import { ErrorBoundary as lt } from "react-error-boundary";
+import at from "@iconify-icons/tabler/compass";
 import { Icon as Ce } from "@iconify/react";
 import Se from "@mui/icons-material/Close";
-import { createContext as Be, useState as q, useMemo as E, useContext as Re, useCallback as J, useEffect as j, memo as at, forwardRef as it, useRef as U, createElement as st, Fragment as ct } from "react";
+import { createContext as Be, useState as q, useMemo as E, useContext as Re, useCallback as K, useEffect as j, forwardRef as it, useRef as U, memo as st, createElement as ct, Fragment as dt } from "react";
 import Pe from "axios";
-import dt from "lodash/orderBy";
+import ut from "lodash/orderBy";
 import i from "prop-types";
-import { useInfiniteScroll as ut, useRequest as te, useReactive as pt, useDebounceFn as mt } from "ahooks";
-import ht from "lodash/omitBy";
-import ft from "json-stable-stringify";
+import { useInfiniteScroll as pt, useRequest as re, useReactive as mt, useDebounceFn as ht } from "ahooks";
+import ft from "lodash/omitBy";
+import gt from "json-stable-stringify";
 import "lodash/cloneDeep";
-import gt from "color";
+import yt from "color";
 import he from "flat";
+import bt from "@mui/icons-material/KeyboardArrowDown";
+import xt from "lodash/isEmpty";
 import Te from "@mui/material/Box";
-import yt from "@arcblock/ux/lib/Avatar";
-import bt from "@iconify-icons/tabler/cloud-download";
-import xt from "@mui/icons-material/ChevronLeft";
-import wt from "@mui/icons-material/ChevronRight";
-import kt from "react-image-gallery";
+import wt from "@arcblock/ux/lib/Avatar";
+import kt from "@iconify-icons/tabler/cloud-download";
+import vt from "@mui/icons-material/ChevronLeft";
+import Ct from "@mui/icons-material/ChevronRight";
+import St from "react-image-gallery";
 import "react-image-gallery/styles/css/image-gallery.css";
-import vt from "@mui/icons-material/KeyboardArrowDown";
-import Ct from "lodash/isEmpty";
-import St from "@arcblock/ux/lib/Empty";
-import Bt from "react-infinite-scroll-hook";
+import Bt from "@arcblock/ux/lib/Empty";
+import Rt from "react-infinite-scroll-hook";
 import Ie from "@mui/material/Typography";
-import Rt from "@mui/icons-material/Menu";
-import { createRoot as Pt } from "react-dom/client";
-import { autocomplete as Tt } from "@algolia/autocomplete-js";
-import { useHotkeys as It } from "react-hotkeys-hook";
-import { joinURL as Lt } from "ufo";
-import zt from "@mui/icons-material/Search";
+import Pt from "@mui/icons-material/Menu";
+import { createRoot as Tt } from "react-dom/client";
+import { autocomplete as It } from "@algolia/autocomplete-js";
+import { useHotkeys as Lt } from "react-hotkeys-hook";
+import { joinURL as zt } from "ufo";
+import $t from "@mui/icons-material/Search";
 import "@algolia/autocomplete-theme-classic/dist/theme.css";
 const Le = Be({
   open: !1,
   toggleOpen: (e) => {
   }
 });
-function $t({ children: e }) {
+function _t({ children: e }) {
   const [r, o] = q(!1), n = (l) => {
     o(l ?? !l);
   }, a = E(() => ({ open: r, toggleOpen: n }), [r]);
   return /* @__PURE__ */ t(Le.Provider, { value: a, children: e });
 }
-function re() {
+function oe() {
   return Re(Le);
 }
-const R = {
+const P = {
   nameAsc: "title",
   nameDesc: "title",
   popularity: "stats.downloads",
@@ -64,22 +64,28 @@ const R = {
   explorePath: "/api/blocklets/explore",
   exploreDidsPath: "/api/blocklets/dids",
   cacheSize: 100
-}, _t = (e, r, o, n) => ut(
+}, At = (e, r, o, n) => pt(
   async (a) => {
     a || (o.currentPage = o.defaultCurrentPage);
-    const { currentPage: l, pageSize: m } = o, d = { ...r, sortBy: R[r.sortBy], page: l, pageSize: m };
+    const { currentPage: l, pageSize: c } = o, d = {
+      ...r,
+      category: r.category === "All" ? "" : r.category,
+      sortBy: P[r.sortBy],
+      page: l,
+      pageSize: c
+    };
     n(null);
-    const { data: s = {} } = await e.get(R.blockletsPath, { params: d });
-    return o.currentPage++, { page: l, pageSize: m, list: (s == null ? void 0 : s.dataList) || [], total: (s == null ? void 0 : s.total) || 0 };
+    const { data: s = {} } = await e.get(P.blockletsPath, { params: d });
+    return o.currentPage++, { page: l, pageSize: c, list: (s == null ? void 0 : s.dataList) || [], total: (s == null ? void 0 : s.total) || 0 };
   },
   {
     isNoMore: (a) => a ? a.page * a.pageSize >= a.total : !1,
-    reloadDeps: [e, ft(r)],
+    reloadDeps: [e, gt(r)],
     onError: n
   }
-), Ft = (e) => te(
+), Ft = (e) => re(
   async () => {
-    const { data: r } = await e.get(R.categoriesPath);
+    const { data: r } = await e.get(P.categoriesPath);
     return Array.isArray(r) ? r : [];
   },
   { manual: !0 }
@@ -123,7 +129,7 @@ const R = {
   showResourcesSwitch: !1,
   showCategory: !0,
   tagFilters: []
-}, At = (e) => [
+}, _e = (e) => [
   {
     name: e("sort.popularity"),
     value: "popularity"
@@ -142,7 +148,7 @@ const R = {
 ], Et = (e = [], r = "en") => e.map((o) => ({ name: o.locales[r] || o.locales.en, value: o._id })), Mt = (e, r) => (
   // eslint-disable-next-line no-prototype-builtins
   e == null ? void 0 : e.replace(/{(\w*)}/g, (o, n) => r.hasOwnProperty(n) ? r[n] : "")
-), Nt = () => window.innerWidth <= 600, Ot = (e) => gt(e).rgb().object();
+), Nt = () => window.innerWidth <= 600, Ot = (e) => yt(e).rgb().object();
 function qt(e, r) {
   let o;
   return function(...a) {
@@ -247,14 +253,14 @@ const jt = qt((e) => Promise.resolve(e), 300), Vt = {
   autocomplete: {
     expandResult: "查看 “{name}” 的所有搜索结果"
   }
-}, Y = {
+}, J = {
   en: he(Vt),
   zh: he(Wt)
-}, _e = (e, r) => {
+}, Ae = (e, r) => {
   const o = {};
   return e && (o["x-blocklet-server-version"] = e), r && (o["x-blocklet-store-version"] = r), o;
 }, Ut = (e) => (r, o) => {
-  const n = Y[e] ? Y[e][r] : Y.en[r];
+  const n = J[e] ? J[e][r] : J.en[r];
   return Mt(n, o) || r;
 }, Fe = {
   errors: {
@@ -309,132 +315,135 @@ const jt = qt((e) => Promise.resolve(e), 300), Vt = {
   developerName: "",
   handleSearchSelect: () => {
   }
-}, Ae = Be(Fe), { Provider: Ht, Consumer: Hr } = Ae;
-function oe({
+}, De = Be(Fe), { Provider: Ht, Consumer: Hr } = De;
+function ne({
   filters: e,
   children: r,
   endpoint: o,
   locale: n,
   blockletRender: a,
   onFilterChange: l,
-  onSearchSelect: m,
+  onSearchSelect: c,
   extraFilter: d,
   wrapChildren: s,
-  baseSearch: k,
+  baseSearch: v,
   serverVersion: f,
-  storeVersion: g,
-  fetchCategoryDelay: c,
-  showResourcesSwitch: x,
-  showCategory: w,
-  tagFilters: v
+  storeVersion: y,
+  fetchCategoryDelay: u,
+  showResourcesSwitch: w,
+  showCategory: k,
+  tagFilters: x
 }) {
-  const z = _e(f, g), y = E(() => Pe.create({ baseURL: o, headers: z }), [o]), u = { sortBy: "popularity", sortDirection: "desc", ...e }, C = u.category, $ = pt({
-    currentPage: R.currentPage,
-    pageSize: Nt() ? R.mobilePageSize : R.pageSize,
-    defaultCurrentPage: R.defaultCurrentPage
-  }), [_, L] = q(null), I = _t(y, u, $, L), {
-    data: Q = [],
-    error: je,
-    loading: Ve,
+  const $ = Ae(f, y), b = E(() => Pe.create({ baseURL: o, headers: $ }), [o]), h = { sortBy: "popularity", sortDirection: "desc", ...e }, C = h.category, _ = mt({
+    currentPage: P.currentPage,
+    pageSize: Nt() ? P.mobilePageSize : P.pageSize,
+    defaultCurrentPage: P.defaultCurrentPage
+  }), [A, z] = q(null), L = At(b, h, _, z), {
+    data: X = [],
+    error: Ve,
+    loading: We,
     run: se
-  } = Ft(y), X = E(() => dt(Q, [(h) => h.name], ["asc"]), [Q]), ce = E(() => {
-    var h;
-    return d(((h = I.data) == null ? void 0 : h.list) || []);
-  }, [I.data, d]), de = J(Ut(n), [n]), We = E(() => Et(X, n), [X, n]), Ue = Dt(de), He = {
-    errors: { fetchBlockletsError: _, fetchCategoriesError: je },
+  } = Ft(b), Y = E(() => {
+    const p = ut(X, [(R) => R.name], ["asc"]), g = p.findIndex((R) => R.name === "All" || R.locales.en === "All");
+    return g > -1 ? [{ ...p[g], _id: "All" }, ...p.slice(0, g), ...p.slice(g + 1)] : p;
+  }, [X]), ce = E(() => {
+    var p;
+    return d(((p = L.data) == null ? void 0 : p.list) || []);
+  }, [L.data, d]), de = K(Ut(n), [n]), Ue = E(() => Et(Y, n), [Y, n]), He = Dt(de), Ge = {
+    errors: { fetchBlockletsError: A, fetchCategoriesError: Ve },
     loadings: {
-      fetchBlockletsLoading: I.loading,
-      fetchCategoriesLoading: Ve,
-      loadingMore: I.loadingMore
+      fetchBlockletsLoading: L.loading,
+      fetchCategoriesLoading: We,
+      loadingMore: L.loadingMore
     },
     endpoint: o,
     blockletList: ce,
     wrapChildren: s,
     t: de,
-    storeVersion: g,
+    storeVersion: y,
     serverVersion: f,
-    filters: u,
+    filters: h,
     selectedCategory: C,
-    categoryList: X,
+    categoryList: Y,
     blockletRender: a,
     locale: n,
-    categoryOptions: We,
-    priceOptions: Ue,
-    storeApi: y,
-    baseSearch: k,
-    showResourcesSwitch: x,
-    showCategory: w,
-    tagFilters: v,
-    hasNextPage: !I.noMore,
+    categoryOptions: Ue,
+    priceOptions: He,
+    storeApi: b,
+    baseSearch: v,
+    showResourcesSwitch: w,
+    showCategory: k,
+    tagFilters: x,
+    hasNextPage: !L.noMore,
     onFilterChange: l,
-    cleanFilter: (h) => {
-      const b = h ? ht(u, (A, M) => h == null ? void 0 : h.includes(M)) : {};
-      l(b);
+    cleanFilter: (p) => {
+      const g = p ? ft(h, (R, M) => p == null ? void 0 : p.includes(M)) : {};
+      l(g);
     },
-    handleSort: (h) => {
-      const b = { ...u, sortBy: h, sortDirection: h === "nameAsc" ? "asc" : "desc" };
-      l(b);
+    handleSort: (p) => {
+      const g = { ...h, sortBy: p, sortDirection: p === "nameAsc" ? "asc" : "desc" };
+      l(g);
     },
-    handleKeyword: (h) => {
-      const b = { ...u, keyword: h || void 0 };
-      l(b);
+    handleKeyword: (p) => {
+      const g = { ...h, category: void 0, keyword: p || void 0 };
+      l(g);
     },
-    handlePrice: (h) => {
-      const b = { ...u, price: h === u.price ? void 0 : h };
-      l(b);
+    handlePrice: (p) => {
+      const g = { ...h, price: p === h.price ? void 0 : p };
+      l(g);
     },
-    handleCategory: (h) => {
-      const b = h === "all" || h === u.category ? "" : h, A = { ...u, category: b };
-      l(A);
+    handleCategory: (p) => {
+      const g = p === "all" || p === h.category ? "" : p, R = { ...h, category: g };
+      l(R);
     },
-    handleDeveloper: (h) => {
-      const b = { ...u, owner: h || void 0 };
-      l(b);
+    handleDeveloper: (p) => {
+      const g = { ...h, owner: p || void 0 };
+      l(g);
     },
-    handlePage: (h) => {
-      const b = { ...u, currentPage: h };
-      l(b);
+    handlePage: (p) => {
+      const g = { ...h, currentPage: p };
+      l(g);
     },
     handleSwitchShowResources: () => {
-      const h = { ...u };
-      l(h);
+      const p = { ...h };
+      l(p);
     },
-    loadMore: I.loadMore,
-    getCategoryLocale: (h) => {
-      if (!h)
+    loadMore: L.loadMore,
+    getCategoryLocale: (p) => {
+      if (!p)
         return null;
-      const b = Q.find((A) => A._id === h);
-      return b ? b.locales[n] || b.locales.en : null;
+      const g = X.find((R) => R._id === p);
+      return g ? g.locales[n] || g.locales.en : null;
     },
     get developerName() {
-      var b, A;
-      return ((A = (b = ce.find((M) => {
+      var g, R;
+      return ((R = (g = ce.find((M) => {
         var ue;
-        return ((ue = M == null ? void 0 : M.owner) == null ? void 0 : ue.did) === u.owner;
-      })) == null ? void 0 : b.owner) == null ? void 0 : A.name) || "";
+        return ((ue = M == null ? void 0 : M.owner) == null ? void 0 : ue.did) === h.owner;
+      })) == null ? void 0 : g.owner) == null ? void 0 : R.name) || "";
     },
-    handleSearchSelect: m
+    handleSearchSelect: c
   };
   return j(() => {
-    setTimeout(se, c || 0);
-  }, [o, se, c]), /* @__PURE__ */ t(Ht, { value: He, children: r });
+    setTimeout(se, u || 0);
+  }, [o, se, u]), /* @__PURE__ */ t(Ht, { value: Ge, children: r });
 }
-oe.propTypes = {
+ne.propTypes = {
   ...ze,
   children: i.any.isRequired
 };
-oe.defaultProps = $e;
+ne.defaultProps = $e;
 function B() {
-  const e = Re(Ae);
+  const e = Re(De);
   return e || Fe;
 }
-function De({
+function Ee({
   children: e,
   onClick: r,
   size: o = 32
 }) {
   return /* @__PURE__ */ t(
-    Z,
+    ee,
     {
       onClick: r,
       variant: "outlined",
@@ -464,48 +473,214 @@ function G({
   xl: a,
   exact: l
 }) {
-  const m = Ge(), d = N(m.breakpoints.down("sm")), s = N(m.breakpoints.between("sm", "md")), k = N(m.breakpoints.between("md", "lg")), f = N(m.breakpoints.between("lg", "xl"));
+  const c = Qe(), d = N(c.breakpoints.down("sm")), s = N(c.breakpoints.between("sm", "md")), v = N(c.breakpoints.between("md", "lg")), f = N(c.breakpoints.between("lg", "xl"));
   if (l)
-    return d ? e || null : s ? r || null : k ? o || null : f ? n || null : a || null;
-  let g = e;
-  return d || (g = V(r, g), s) || (g = V(o, g), k) || (g = V(n, g), f) ? g : V(a, g);
+    return d ? e || null : s ? r || null : v ? o || null : f ? n || null : a || null;
+  let y = e;
+  return d || (y = V(r, y), s) || (y = V(o, y), v) || (y = V(n, y), f) ? y : V(a, y);
 }
 function Gt({ children: e }) {
-  const { open: r, toggleOpen: o } = re();
+  const { open: r, toggleOpen: o } = oe();
   return /* @__PURE__ */ t(
     G,
     {
-      xs: /* @__PURE__ */ t(Qe, { open: r, onClose: () => o(!1), children: e }),
+      xs: /* @__PURE__ */ t(Xe, { open: r, onClose: () => o(!1), children: e }),
       md: /* @__PURE__ */ t(S, { children: e })
     }
   );
 }
-function Ee() {
-  const { filters: e, handlePrice: r, t: o } = B();
-  return /* @__PURE__ */ t(P, { direction: "row", alignItems: "center", width: { xs: "100%", md: "auto" }, justifyContent: "space-between", children: /* @__PURE__ */ t(
-    ke,
-    {
-      control: /* @__PURE__ */ t(
-        ve,
+const Qt = D(ee)`
+  border-radius: 4px;
+`, le = it(({ children: e, rounded: r, loading: o, disabled: n, ...a }, l) => /* @__PURE__ */ t(
+  Qt,
+  {
+    ref: l,
+    disableElevation: !0,
+    disabled: n || o,
+    ...a,
+    startIcon: o && /* @__PURE__ */ t(te, { size: "1em" }),
+    children: e
+  }
+));
+le.propTypes = {
+  children: i.any,
+  rounded: i.bool,
+  loading: i.bool,
+  disabled: i.bool
+};
+le.defaultProps = {
+  children: null,
+  rounded: !1,
+  loading: !1,
+  disabled: !1
+};
+function Q({ title: e, value: r, icon: o, prepend: n, options: a, onChange: l, itemRender: c, ...d }) {
+  const s = U(null), v = be(), [f, y] = q(!1), [u, w] = q(r !== null ? r : ""), k = N(v.breakpoints.down("sm"));
+  j(() => {
+    w(r !== null ? r : "");
+  }, [r]);
+  const x = K(() => {
+    y(!1);
+  }, []), $ = K(() => {
+    y(!0);
+  }, []);
+  function b(C) {
+    w(C.value), l(C.value), k && x();
+  }
+  function h(C) {
+    return C === u;
+  }
+  return /* @__PURE__ */ m(F, { children: [
+    /* @__PURE__ */ m(
+      Xt,
+      {
+        ref: s,
+        onClick: $,
+        variant: "outlined",
+        size: "small",
+        className: ["my-select__selector", xt(u) ? "" : "my-select__selector--active"].join(" "),
+        sx: { minWidth: "auto" },
+        ...d,
+        children: [
+          /* @__PURE__ */ t("div", { className: "my-select__icon", children: o }),
+          e,
+          /* @__PURE__ */ t(Je, { className: "my-select__arrowdown", component: bt, fontSize: "small" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ t(Ke, { open: f, anchorEl: s.current, transition: !0, sx: { zIndex: "9999" }, children: ({ TransitionProps: C, placement: _ }) => /* @__PURE__ */ t(Ze, { ...C, sx: { transformOrigin: _ === "bottom" ? "center top" : "center bottom" }, children: /* @__PURE__ */ t(et, { children: /* @__PURE__ */ t(tt, { onClickAway: x, children: /* @__PURE__ */ m(Yt, { autoFocusItem: f, onMouseEnter: $, onMouseLeave: x, children: [
+      n,
+      a.map((A) => c ? c(A) : /* @__PURE__ */ t(
+        rt,
         {
-          checked: e.price === "free",
-          size: "small",
-          sx: { "& .MuiSvgIcon-fontSizeSmall": { fontSize: 16, color: "text.lighter" } },
-          onChange: (n) => r(n.target.checked ? "free" : "")
-        }
-      ),
-      label: o("blocklet.free")
+          onClick: () => b(A),
+          className: [
+            "my-select__option",
+            h(A.value) ? "my-select__option--active" : ""
+          ].join(" "),
+          children: A.name
+        },
+        A.value
+      ))
+    ] }) }) }) }) })
+  ] });
+}
+Q.propTypes = {
+  options: i.array.isRequired,
+  value: i.oneOfType([i.string, i.number, i.array]),
+  onChange: i.func,
+  itemRender: i.func,
+  title: i.string.isRequired,
+  icon: i.any,
+  prepend: i.any
+};
+Q.defaultProps = {
+  value: null,
+  icon: null,
+  prepend: null,
+  itemRender: null,
+  onChange: () => {
+  }
+};
+const Xt = D(le)`
+  border: 1px solid #f0f0f0;
+  padding: 6px 8px 6px 12px;
+  font-weight: ${(e) => e.theme.typography.fontWeightRegular};
+  font-size: 14px;
+  color: #666;
+  line-height: 1;
+  text-transform: none;
+  & + & {
+    margin-left: 10px;
+  }
+  &.my-select__selector--active {
+    &,
+    .my-select__arrowdown,
+    .my-select__icon svg {
+      color: ${(e) => e.theme.palette.primary.main};
+    }
+  }
+  .my-select__arrowdown {
+    color: #999;
+    font-size: 14px;
+    margin-left: 6px;
+  }
+  .my-select__icon {
+    font-size: 0;
+    svg {
+      color: #999;
+      font-size: 18px;
+      margin-right: 3px;
     }
-  ) });
+  }
+`, Yt = D(Ye)`
+  .my-select__option__icon {
+    color: transparent;
+    font-size: 14px;
+    margin: 0 3px 0 -5px;
+  }
+  .my-select__option {
+    font-size: 14px;
+    color: #999;
+  }
+  .my-select__option--active {
+    &,
+    .my-select__option__icon {
+      color: ${(e) => e.theme.palette.primary.main};
+    }
+  }
+`;
+function Me() {
+  var c;
+  const { filters: e, handleSort: r, handlePrice: o, t: n } = B(), a = _e(n), l = ((c = a.find((d) => d.value === e.sortBy)) == null ? void 0 : c.name) || n("sort.sort");
+  return /* @__PURE__ */ m(
+    T,
+    {
+      direction: { xs: "row", md: "column" },
+      alignItems: { xs: "center", md: "flex-start" },
+      gap: { xs: 1, md: 2 },
+      width: { xs: "100%", md: "auto" },
+      justifyContent: "space-between",
+      children: [
+        /* @__PURE__ */ t(
+          ke,
+          {
+            control: /* @__PURE__ */ t(
+              ve,
+              {
+                checked: e.price === "free",
+                size: "small",
+                sx: { "& .MuiSvgIcon-fontSizeSmall": { fontSize: 16, color: "text.lighter" } },
+                onChange: (d) => o(d.target.checked ? "free" : "")
+              }
+            ),
+            label: n("blocklet.free")
+          }
+        ),
+        /* @__PURE__ */ t(
+          Q,
+          {
+            value: e.sortBy,
+            options: a,
+            title: l,
+            onChange: r,
+            icon: null,
+            prepend: null,
+            itemRender: null
+          }
+        )
+      ]
+    }
+  );
 }
-function Qt() {
-  const { selectedCategory: e, handleCategory: r, t: o, categoryOptions: n, filters: a, cleanFilter: l, loadings: m } = B(), { toggleOpen: d } = re();
-  return /* @__PURE__ */ p(Gt, { children: [
+function Jt() {
+  const { selectedCategory: e, handleCategory: r, t: o, categoryOptions: n, filters: a, cleanFilter: l, loadings: c } = B(), { toggleOpen: d } = oe();
+  return /* @__PURE__ */ m(Gt, { children: [
     /* @__PURE__ */ t(
       G,
       {
-        xs: /* @__PURE__ */ p(
-          P,
+        xs: /* @__PURE__ */ m(
+          T,
           {
             direction: "row",
             justifyContent: "space-between",
@@ -516,8 +691,8 @@ function Qt() {
             borderBottom: 1,
             borderColor: "divider",
             children: [
-              /* @__PURE__ */ t(De, { onClick: () => d(!1), children: /* @__PURE__ */ t(Se, {}) }),
-              /* @__PURE__ */ t(T, { flex: 1, variant: "body1", fontWeight: "fontWeightMedium", children: "Categories" })
+              /* @__PURE__ */ t(Ee, { onClick: () => d(!1), children: /* @__PURE__ */ t(Se, {}) }),
+              /* @__PURE__ */ t(I, { flex: 1, variant: "body1", fontWeight: "fontWeightMedium", children: "Categories" })
             ]
           }
         ),
@@ -525,18 +700,18 @@ function Qt() {
       }
     ),
     /* @__PURE__ */ t(
-      P,
+      T,
       {
-        visibility: m.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(Ee, {}) : /* @__PURE__ */ p(F, { children: [
-          /* @__PURE__ */ p(S, { display: "flex", alignItems: "center", gap: 1, children: [
-            /* @__PURE__ */ t(Ce, { icon: lt }),
+        children: a.keyword ? /* @__PURE__ */ t(Me, {}) : /* @__PURE__ */ m(F, { children: [
+          /* @__PURE__ */ m(S, { display: "flex", alignItems: "center", gap: 1, children: [
+            /* @__PURE__ */ t(Ce, { icon: at }),
             /* @__PURE__ */ t(
-              T,
+              I,
               {
                 variant: "body1",
                 color: e ? "text.lighter" : "text.primary",
@@ -549,8 +724,8 @@ function Qt() {
               }
             )
           ] }),
-          !!n.length && /* @__PURE__ */ t(P, { pt: 3, mt: 3, borderTop: 1, borderColor: "divider", gap: 2, children: n.map((s) => /* @__PURE__ */ t(
-            T,
+          !!n.length && /* @__PURE__ */ t(T, { pt: 3, mt: 3, borderTop: 1, borderColor: "divider", gap: 2, children: n.map((s) => /* @__PURE__ */ t(
+            I,
             {
               variant: "body1",
               title: s.name,
@@ -570,24 +745,24 @@ function Qt() {
     )
   ] });
 }
-function Me() {
-  const { endpoint: e, serverVersion: r, storeVersion: o } = B(), n = _e(r, o), a = E(() => Pe.create({
+function Ne() {
+  const { endpoint: e, serverVersion: r, storeVersion: o } = B(), n = Ae(r, o), a = E(() => Pe.create({
     baseURL: e,
     headers: n
   }), [e]);
   return {
     get: async (l) => {
-      const { data: m } = await a.get(l);
-      return m;
+      const { data: c } = await a.get(l);
+      return c;
     },
-    post: async (l, m) => {
-      const { data: d } = await a.post(l, m);
+    post: async (l, c) => {
+      const { data: d } = await a.post(l, c);
       return d;
     }
   };
 }
-const Ne = at(function(r) {
-  return /* @__PURE__ */ t(Te, { height: 60, display: "flex", alignItems: "center", justifyContent: "center", ...r, children: /* @__PURE__ */ t(ee, {}) });
+const Oe = st(function(r) {
+  return /* @__PURE__ */ t(Te, { height: 60, display: "flex", alignItems: "center", justifyContent: "center", ...r, children: /* @__PURE__ */ t(te, {}) });
 });
 function fe({
   icon: e,
@@ -595,10 +770,10 @@ function fe({
   maxWidth: o = 100,
   title: n
 }) {
-  return (r === 0 || r) && /* @__PURE__ */ p(P, { direction: "row", alignItems: "center", gap: 1, sx: { maxWidth: o, overflow: "hidden" }, children: [
+  return (r === 0 || r) && /* @__PURE__ */ m(T, { direction: "row", alignItems: "center", gap: 1, sx: { maxWidth: o, overflow: "hidden" }, children: [
     e,
     /* @__PURE__ */ t(
-      T,
+      I,
       {
         flex: 1,
         variant: "body2",
@@ -610,11 +785,11 @@ function fe({
   ] });
 }
 const ge = 292;
-function Xt() {
-  var f, g;
-  const { t: e } = B(), { post: r } = Me(), o = ((g = (f = window.blocklet) == null ? void 0 : f.preferences) == null ? void 0 : g.homeBanner) || [], { data: n = [] } = te(async () => {
-    const c = await r(R.exploreDidsPath, { didList: o.map((x) => x.did) });
-    return Array.isArray(c) ? c : [];
+function Kt() {
+  var f, y;
+  const { t: e } = B(), { post: r } = Ne(), o = ((y = (f = window.blocklet) == null ? void 0 : f.preferences) == null ? void 0 : y.homeBanner) || [], { data: n = [] } = re(async () => {
+    const u = await r(P.exploreDidsPath, { didList: o.map((w) => w.did) });
+    return Array.isArray(u) ? u : [];
   }), a = {
     position: "absolute",
     top: "50%",
@@ -623,10 +798,10 @@ function Xt() {
     cursor: "pointer",
     color: "text.lighter"
   };
-  return o.length > 0 ? /* @__PURE__ */ p(F, { children: [
-    /* @__PURE__ */ t(T, { component: "h2", variant: "h2", mt: { xs: 2, md: 0 }, mb: 3, children: e("explore.title") }),
+  return o.length > 0 ? /* @__PURE__ */ m(F, { children: [
+    /* @__PURE__ */ t(I, { component: "h2", variant: "h2", mt: { xs: 2, md: 0 }, mb: 3, children: e("explore.title") }),
     /* @__PURE__ */ t(S, { height: { xs: "auto", md: ge }, position: "relative", bgcolor: "#F0F7FF", borderRadius: 3, children: /* @__PURE__ */ t(
-      kt,
+      St,
       {
         showNav: !0,
         autoPlay: !0,
@@ -637,14 +812,15 @@ function Xt() {
         showBullets: !1,
         showThumbnails: !1,
         showFullscreenButton: !1,
-        renderLeftNav: (c) => /* @__PURE__ */ t(S, { onClick: c, sx: { display: { xs: "none", md: "block" } }, children: /* @__PURE__ */ t(xt, { sx: { ...a, left: 5 } }) }),
-        renderRightNav: (c) => /* @__PURE__ */ t(S, { onClick: c, sx: { display: { xs: "none", md: "block" } }, children: /* @__PURE__ */ t(wt, { sx: { ...a, right: 5 } }) }),
-        items: o.map((c, x) => ({
-          original: c.did,
+        renderLeftNav: (u) => /* @__PURE__ */ t(S, { onClick: u, sx: { display: { xs: "none", md: "block" } }, children: /* @__PURE__ */ t(vt, { sx: { ...a, left: 5 } }) }),
+        renderRightNav: (u) => /* @__PURE__ */ t(S, { onClick: u, sx: { display: { xs: "none", md: "block" } }, children: /* @__PURE__ */ t(Ct, { sx: { ...a, right: 5 } }) }),
+        items: o.map((u, w) => ({
+          original: u.did,
           renderItem: () => {
-            const w = n[x];
-            return /* @__PURE__ */ p(
-              P,
+            var x;
+            const k = n[w] || {};
+            return /* @__PURE__ */ m(
+              T,
               {
                 height: { xs: "auto", md: ge },
                 display: "flex",
@@ -654,14 +830,14 @@ function Xt() {
                 p: { xs: 2, md: 5 },
                 gap: { xs: 2, md: 5 },
                 children: [
-                  l(c.cover || w.screenshots[0]),
-                  /* @__PURE__ */ p(P, { flex: 1, height: "100%", gap: 3, children: [
-                    /* @__PURE__ */ p(S, { flex: 1, children: [
-                      m(c.name || w.title || c.name),
-                      d(c.desc || w.description)
+                  l(u.cover || ((x = k.screenshots) == null ? void 0 : x[0])),
+                  /* @__PURE__ */ m(T, { flex: 1, height: "100%", gap: 3, children: [
+                    /* @__PURE__ */ m(S, { flex: 1, children: [
+                      c(u.name || k.title || u.name),
+                      d(u.desc || k.description)
                     ] }),
-                    w && s(w, c.baseNum),
-                    k(c.link, c.did)
+                    k.did && s(k, u.baseNum),
+                    v(u.link, u.did)
                   ] })
                 ]
               }
@@ -671,15 +847,15 @@ function Xt() {
       }
     ) })
   ] }) : null;
-  function l(c) {
-    return /* @__PURE__ */ t(S, { width: { xs: "100%", md: 338 }, height: 210, borderRadius: 2, overflow: "hidden", children: /* @__PURE__ */ t("img", { src: c, alt: "", style: { width: "100%", height: "100%", objectFit: "cover" } }) });
+  function l(u) {
+    return /* @__PURE__ */ t(S, { width: { xs: "100%", md: 338 }, height: 210, borderRadius: 2, overflow: "hidden", children: /* @__PURE__ */ t("img", { src: u, alt: "", style: { width: "100%", height: "100%", objectFit: "cover" } }) });
   }
-  function m(c) {
-    return /* @__PURE__ */ t(T, { variant: "h2", width: "100%", children: c });
+  function c(u) {
+    return /* @__PURE__ */ t(I, { variant: "h2", width: "100%", children: u });
   }
-  function d(c) {
+  function d(u) {
     return /* @__PURE__ */ t(
-      T,
+      I,
       {
         variant: "body2",
         color: "text.secondary",
@@ -695,20 +871,20 @@ function Xt() {
           overflow: "hidden",
           WebkitBoxOrient: "vertical"
         },
-        children: c
+        children: u
       }
     );
   }
-  function s(c, x = 0) {
-    const { did: w, owner: v, stats: z } = c;
-    return /* @__PURE__ */ p(S, { display: "flex", alignItems: "center", gap: 2, color: "text.secondary", children: [
-      /* @__PURE__ */ t(fe, { icon: /* @__PURE__ */ t(yt, { src: v.avatar, did: w, size: 20, variant: "circle" }), children: v.fullName }),
-      /* @__PURE__ */ t(fe, { icon: /* @__PURE__ */ t(Ce, { icon: bt }), title: `${z.downloads + x}`, children: Yt(z.downloads + x) })
+  function s(u, w = 0) {
+    const { did: k, owner: x, stats: $ } = u;
+    return /* @__PURE__ */ m(S, { display: "flex", alignItems: "center", gap: 2, color: "text.secondary", children: [
+      /* @__PURE__ */ t(fe, { icon: /* @__PURE__ */ t(wt, { src: x.avatar, did: k, size: 20, variant: "circle" }), children: x.fullName }),
+      /* @__PURE__ */ t(fe, { icon: /* @__PURE__ */ t(Ce, { icon: kt }), title: `${$.downloads + w}`, children: Zt($.downloads + w) })
     ] });
   }
-  function k(c, x) {
-    return /* @__PURE__ */ t(Xe, { href: c || `/blocklets/${x}`, align: "left", width: 100, children: /* @__PURE__ */ t(
-      Z,
+  function v(u, w) {
+    return /* @__PURE__ */ t(ot, { href: u || `/blocklets/${w}`, align: "left", width: 100, children: /* @__PURE__ */ t(
+      ee,
       {
         variant: "outlined",
         size: "small",
@@ -723,176 +899,35 @@ function Xt() {
     ) });
   }
 }
-const Yt = (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`;
-function Jt({ title: e, blocklets: r }) {
+const Zt = (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`;
+function er({ title: e, blocklets: r }) {
   const { blockletRender: o, serverVersion: n } = B();
-  return /* @__PURE__ */ p(S, { mt: 3, children: [
-    /* @__PURE__ */ t(T, { component: "h3", variant: "h3", sx: { mb: 2 }, children: e }),
+  return /* @__PURE__ */ m(S, { mt: 3, children: [
+    /* @__PURE__ */ t(I, { component: "h3", variant: "h3", sx: { mb: 2 }, children: e }),
     /* @__PURE__ */ t(pe, { container: !0, spacing: 2, children: r.map((a) => /* @__PURE__ */ t(pe, { item: !0, xs: 12, md: 6, p: "2px", "data-blocklet-did": a.did, children: /* @__PURE__ */ t(S, { padding: "1px", children: o({ blocklet: a, blocklets: r, serverVersion: n }) }) }, a.did)) })
   ] });
 }
-function Kt() {
-  const { get: e } = Me(), { t: r } = B(), {
+function tr() {
+  const { get: e } = Ne(), { t: r } = B(), {
     data: o = [],
     error: n,
     loading: a
-  } = te(async () => {
-    const l = await e(R.explorePath);
+  } = re(async () => {
+    const l = await e(P.explorePath);
     return Array.isArray(l) ? l : [];
   });
-  return n ? /* @__PURE__ */ t(K, { error: new Error(`Failed to fetch blocklets from ${R.explorePath}`) }) : a ? /* @__PURE__ */ t(Ne, { mt: 15 }) : /* @__PURE__ */ p(F, { children: [
-    /* @__PURE__ */ t(Xt, {}),
+  return n ? /* @__PURE__ */ t(Z, { error: new Error(`Failed to fetch blocklets from ${P.explorePath}`) }) : a ? /* @__PURE__ */ t(Oe, { mt: 15 }) : /* @__PURE__ */ m(F, { children: [
+    /* @__PURE__ */ t(Kt, {}),
     o.map(
-      (l) => l.blocklets.length > 0 ? /* @__PURE__ */ t(Jt, { title: r(`explore.${l.type}`), blocklets: l.blocklets }, l.type) : null
+      (l) => l.blocklets.length > 0 ? /* @__PURE__ */ t(er, { title: r(`explore.${l.type}`), blocklets: l.blocklets }, l.type) : null
     )
   ] });
 }
-const Zt = D(Z)`
-  border-radius: 4px;
-`, ne = it(({ children: e, rounded: r, loading: o, disabled: n, ...a }, l) => /* @__PURE__ */ t(
-  Zt,
-  {
-    ref: l,
-    disableElevation: !0,
-    disabled: n || o,
-    ...a,
-    startIcon: o && /* @__PURE__ */ t(ee, { size: "1em" }),
-    children: e
-  }
-));
-ne.propTypes = {
-  children: i.any,
-  rounded: i.bool,
-  loading: i.bool,
-  disabled: i.bool
-};
-ne.defaultProps = {
-  children: null,
-  rounded: !1,
-  loading: !1,
-  disabled: !1
-};
-function le({ title: e, value: r, icon: o, prepend: n, options: a, onChange: l, itemRender: m, ...d }) {
-  const s = U(null), k = be(), [f, g] = q(!1), [c, x] = q(r !== null ? r : ""), w = N(k.breakpoints.down("sm"));
-  j(() => {
-    x(r !== null ? r : "");
-  }, [r]);
-  const v = J(() => {
-    g(!1);
-  }, []), z = J(() => {
-    g(!0);
-  }, []);
-  function y(C) {
-    x(C.value), l(C.value), w && v();
-  }
-  function u(C) {
-    return C === c;
-  }
-  return /* @__PURE__ */ p(F, { children: [
-    /* @__PURE__ */ p(
-      er,
-      {
-        ref: s,
-        onClick: z,
-        variant: "outlined",
-        size: "small",
-        className: ["my-select__selector", Ct(c) ? "" : "my-select__selector--active"].join(" "),
-        sx: { minWidth: "auto" },
-        ...d,
-        children: [
-          /* @__PURE__ */ t("div", { className: "my-select__icon", children: o }),
-          e,
-          /* @__PURE__ */ t(Je, { className: "my-select__arrowdown", component: vt, fontSize: "small" })
-        ]
-      }
-    ),
-    /* @__PURE__ */ t(Ke, { open: f, anchorEl: s.current, transition: !0, sx: { zIndex: "9999" }, children: ({ TransitionProps: C, placement: $ }) => /* @__PURE__ */ t(Ze, { ...C, sx: { transformOrigin: $ === "bottom" ? "center top" : "center bottom" }, children: /* @__PURE__ */ t(et, { children: /* @__PURE__ */ t(tt, { onClickAway: v, children: /* @__PURE__ */ p(tr, { autoFocusItem: f, onMouseEnter: z, onMouseLeave: v, children: [
-      n,
-      a.map((_) => m ? m(_) : /* @__PURE__ */ t(
-        rt,
-        {
-          onClick: () => y(_),
-          className: [
-            "my-select__option",
-            u(_.value) ? "my-select__option--active" : ""
-          ].join(" "),
-          children: _.name
-        },
-        _.value
-      ))
-    ] }) }) }) }) })
-  ] });
-}
-le.propTypes = {
-  options: i.array.isRequired,
-  value: i.oneOfType([i.string, i.number, i.array]),
-  onChange: i.func,
-  itemRender: i.func,
-  title: i.string.isRequired,
-  icon: i.any,
-  prepend: i.any
-};
-le.defaultProps = {
-  value: null,
-  icon: null,
-  prepend: null,
-  itemRender: null,
-  onChange: () => {
-  }
-};
-const er = D(ne)`
-  border: 1px solid #f0f0f0;
-  padding: 6px 8px 6px 12px;
-  font-weight: ${(e) => e.theme.typography.fontWeightRegular};
-  font-size: 14px;
-  color: #666;
-  line-height: 1;
-  text-transform: none;
-  & + & {
-    margin-left: 10px;
-  }
-  &.my-select__selector--active {
-    &,
-    .my-select__arrowdown,
-    .my-select__icon svg {
-      color: ${(e) => e.theme.palette.primary.main};
-    }
-  }
-  .my-select__arrowdown {
-    color: #999;
-    font-size: 14px;
-    margin-left: 6px;
-  }
-  .my-select__icon {
-    font-size: 0;
-    svg {
-      color: #999;
-      font-size: 18px;
-      margin-right: 3px;
-    }
-  }
-`, tr = D(Ye)`
-  .my-select__option__icon {
-    color: transparent;
-    font-size: 14px;
-    margin: 0 3px 0 -5px;
-  }
-  .my-select__option {
-    font-size: 14px;
-    color: #999;
-  }
-  .my-select__option--active {
-    &,
-    .my-select__option__icon {
-      color: ${(e) => e.theme.palette.primary.main};
-    }
-  }
-`;
 function rr() {
   var d;
-  const { filters: e, handleSort: r, handlePrice: o, t: n, getCategoryLocale: a } = B(), l = At(n), m = ((d = l.find((s) => s.value === e.sortBy)) == null ? void 0 : d.name) || n("sort.sort");
-  return /* @__PURE__ */ p(
-    P,
+  const { filters: e, handleSort: r, handlePrice: o, t: n, getCategoryLocale: a } = B(), l = _e(n), c = ((d = l.find((s) => s.value === e.sortBy)) == null ? void 0 : d.name) || n("sort.sort");
+  return /* @__PURE__ */ m(
+    T,
     {
       direction: { xs: "column", md: "row" },
       alignItems: { xs: "flex-start", md: "center" },
@@ -902,8 +937,8 @@ function rr() {
       px: 0,
       pb: 3,
       children: [
-        /* @__PURE__ */ t(T, { variant: "h2", textTransform: "capitalize", children: a(e.category) }),
-        /* @__PURE__ */ p(P, { direction: "row", alignItems: "center", width: { xs: "100%", md: "auto" }, justifyContent: "space-between", children: [
+        /* @__PURE__ */ t(I, { variant: "h2", textTransform: "capitalize", children: a(e.category) }),
+        /* @__PURE__ */ m(T, { direction: "row", alignItems: "center", width: { xs: "100%", md: "auto" }, justifyContent: "space-between", children: [
           /* @__PURE__ */ t(
             ke,
             {
@@ -920,11 +955,11 @@ function rr() {
             }
           ),
           /* @__PURE__ */ t(
-            le,
+            Q,
             {
               value: e.sortBy,
               options: l,
-              title: m,
+              title: c,
               onChange: r,
               icon: null,
               prepend: null,
@@ -942,7 +977,7 @@ function ye() {
 }
 function O({ filterTip: e, keywordTip: r }) {
   const { t: o, locale: n } = B(), a = () => n === "zh" ? "、" : " , ";
-  return /* @__PURE__ */ p(Te, { className: "tips", children: [
+  return /* @__PURE__ */ m(Te, { className: "tips", children: [
     /* @__PURE__ */ t("span", { style: { marginRight: "16px" }, children: o("blocklet.emptyTip") }),
     e && /* @__PURE__ */ t("span", { children: o("blocklet.filterTip") }),
     e && r && a(),
@@ -958,14 +993,14 @@ O.defaultProps = {
   keywordTip: !1
 };
 function H({ primaryStart: e, primaryEnd: r, filter: o }) {
-  return /* @__PURE__ */ p(Ie, { variant: "subtitle2", children: [
+  return /* @__PURE__ */ m(Ie, { variant: "subtitle2", children: [
     /* @__PURE__ */ t("span", { children: e }),
-    /* @__PURE__ */ p("span", { className: "primary", children: [
+    /* @__PURE__ */ m("span", { className: "primary", children: [
       " ",
       o,
       " "
     ] }),
-    /* @__PURE__ */ p("span", { children: [
+    /* @__PURE__ */ m("span", { children: [
       r,
       " "
     ] })
@@ -976,35 +1011,35 @@ H.propTypes = {
   primaryEnd: i.string.isRequired,
   filter: i.string.isRequired
 };
-function Oe({ blocklets: e, ...r }) {
+function qe({ blocklets: e, ...r }) {
   const {
     blockletRender: o,
     errors: n,
     loadings: a,
     selectedCategory: l,
-    getCategoryLocale: m,
+    getCategoryLocale: c,
     filters: d,
     t: s,
-    serverVersion: k,
+    serverVersion: v,
     hasNextPage: f,
-    loadMore: g,
-    endpoint: c
-  } = B(), x = !!l || !!d.price, [w] = Bt({
+    loadMore: y,
+    endpoint: u
+  } = B(), w = !!l || !!d.price, [k] = Rt({
     loading: a.fetchBlockletsLoading || a.loadingMore,
     hasNextPage: f,
-    onLoadMore: g
+    onLoadMore: y
   });
   if (n.fetchBlockletsError)
     return /* @__PURE__ */ t(
-      K,
+      Z,
       {
-        error: new Error(`Failed to fetch blocklets from ${c}: ${n.fetchBlockletsError.message}`)
+        error: new Error(`Failed to fetch blocklets from ${u}: ${n.fetchBlockletsError.message}`)
       }
     );
   if (a.fetchBlockletsLoading)
-    return /* @__PURE__ */ t(Ne, { mt: 15 });
-  if (d.keyword && x && e.length === 0)
-    return /* @__PURE__ */ p(W, { children: [
+    return /* @__PURE__ */ t(Oe, { mt: 15 });
+  if (d.keyword && w && e.length === 0)
+    return /* @__PURE__ */ m(W, { children: [
       /* @__PURE__ */ t(
         H,
         {
@@ -1016,7 +1051,7 @@ function Oe({ blocklets: e, ...r }) {
       /* @__PURE__ */ t(O, { keywordTip: !0, filterTip: !0 })
     ] });
   if (d.keyword && e.length === 0)
-    return /* @__PURE__ */ p(W, { children: [
+    return /* @__PURE__ */ m(W, { children: [
       /* @__PURE__ */ t(
         H,
         {
@@ -1027,29 +1062,29 @@ function Oe({ blocklets: e, ...r }) {
       ),
       /* @__PURE__ */ t(O, { keywordTip: !0 })
     ] });
-  if (x && e.length === 0) {
-    const v = m(l);
-    return /* @__PURE__ */ p(W, { children: [
-      v ? /* @__PURE__ */ t(
+  if (w && e.length === 0) {
+    const x = c(l);
+    return /* @__PURE__ */ m(W, { children: [
+      x ? /* @__PURE__ */ t(
         H,
         {
           primaryStart: s("blocklet.noCategoryResults1"),
           primaryEnd: s("blocklet.noCategoryResults2"),
-          filter: v
+          filter: x
         }
       ) : /* @__PURE__ */ t(ye, {}),
       /* @__PURE__ */ t(O, { filterTip: !0 })
     ] });
   }
-  return e.length === 0 ? /* @__PURE__ */ t(W, { children: /* @__PURE__ */ t(ye, {}) }) : /* @__PURE__ */ p(F, { children: [
-    /* @__PURE__ */ t(S, { display: "grid", gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" }, p: "2px", ...r, gap: 2, children: e.map((v) => /* @__PURE__ */ t(S, { "data-blocklet-did": v.did, children: o({ blocklet: v, blocklets: e, serverVersion: k }) }, v.did)) }),
-    f && /* @__PURE__ */ t(S, { height: 60, display: "flex", justifyContent: "center", py: 2, ref: w, children: /* @__PURE__ */ t(ee, {}) })
+  return e.length === 0 ? /* @__PURE__ */ t(W, { children: /* @__PURE__ */ t(ye, {}) }) : /* @__PURE__ */ m(F, { children: [
+    /* @__PURE__ */ t(S, { display: "grid", gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" }, p: "2px", ...r, gap: 2, children: e.map((x) => /* @__PURE__ */ t(S, { "data-blocklet-did": x.did, children: o({ 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, {}) })
   ] });
 }
-Oe.propTypes = {
+qe.propTypes = {
   blocklets: i.array.isRequired
 };
-const W = D(St)`
+const W = D(Bt)`
   text-align: center;
   margin-top: 100px;
   .primary {
@@ -1060,37 +1095,37 @@ const W = D(St)`
   }
 `;
 function ae({ onSelect: e, wrapChildren: r }) {
-  const o = U(null), n = U(null), a = U(null), { storeApi: l, blockletRender: m, filters: d, endpoint: s, handleKeyword: k, t: f, serverVersion: g } = B(), c = async (y) => {
-    const { data: u } = await l.get(R.blockletsPath, { params: y }), C = u.dataList || [];
-    return C.length > 0 && C.unshift({ type: "more-result", total: u.total || 0 }), C;
-  }, x = (y) => {
-    k(y.state.query), y.setIsOpen(!1);
-  }, w = () => {
+  const o = U(null), n = U(null), a = U(null), { storeApi: l, blockletRender: c, filters: d, endpoint: s, handleKeyword: v, t: f, serverVersion: y } = B(), u = async (b) => {
+    const { data: h } = await l.get(P.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 = () => {
     o.current && setTimeout(() => {
-      const y = o.current.querySelector("input.bl-autocomplete-input");
-      y && y.focus();
+      const b = o.current.querySelector("input.bl-autocomplete-input");
+      b && b.focus();
     });
-  }, v = (y) => {
-    y.setIsOpen(!1), w();
-  }, z = ({ prevState: y, state: u }) => {
-    y.query !== u.query && (u.query || (k(), w()));
+  }, x = (b) => {
+    b.setIsOpen(!1), k();
+  }, $ = ({ prevState: b, state: h }) => {
+    b.query !== h.query && (h.query || (v(), k()));
   };
-  return It(
+  return Lt(
     "ctrl + k, command + k",
-    (y) => (y.stopPropagation(), y.preventDefault(), w(), !1),
+    (b) => (b.stopPropagation(), b.preventDefault(), k(), !1),
     { enableOnTags: ["INPUT"] }
   ), j(() => {
-    w();
+    k();
   }, [s]), j(() => {
     if (!o.current)
       return;
-    const y = Tt({
+    const b = It({
       container: o.current,
-      renderer: { createElement: st, Fragment: ct, render: () => {
+      renderer: { createElement: ct, Fragment: dt, render: () => {
       } },
-      render({ children: u }, C) {
-        var $;
-        (!n.current || a.current !== C) && (a.current = C, ($ = n.current) == null || $.unmount(), n.current = Pt(C)), n.current.render(r(u));
+      render({ children: h }, C) {
+        var _;
+        (!n.current || a.current !== C) && (a.current = C, (_ = n.current) == null || _.unmount(), n.current = Tt(C)), n.current.render(r(h));
       },
       autoFocus: !0,
       openOnFocus: !1,
@@ -1113,42 +1148,41 @@ function ae({ onSelect: e, wrapChildren: r }) {
       initialState: {
         query: d.keyword
       },
-      onStateChange(u) {
-        z(u);
+      onStateChange(h) {
+        $(h);
       },
-      onSubmit: x,
-      onReset(u) {
-        v(u);
+      onSubmit: w,
+      onReset(h) {
+        x(h);
       },
-      getSources({ query: u, state: C, ...$ }) {
-        const _ = {
-          ...d,
-          sortBy: R[d.sortBy],
+      getSources({ query: h, state: C, ..._ }) {
+        const A = {
+          sortBy: P.nameDesc,
           page: 1,
           pageSize: 10,
-          keyword: u
+          keyword: h
         };
         return jt([
           {
             sourceId: "blocklets",
             getItems() {
-              return c(_);
+              return u(A);
             },
             // 选中后填充 搜索框中值
-            getItemInputValue({ item: L }) {
-              return L.type === "more-result" ? u : L.title;
+            getItemInputValue({ item: z }) {
+              return z.type === "more-result" ? h : z.title;
             },
             // 选中或者点击自动完成列表中的 item 时触发
-            onSelect({ event: L, item: I }) {
-              return I.type === "more-result" ? ($.setIsOpen(!1), k(u)) : L.type === "keydown" ? k(I.title) : e({
-                blocklet: I,
-                detailUrl: Lt(s, "/blocklets", I.did),
+            onSelect({ event: z, item: L }) {
+              return L.type === "more-result" ? (_.setIsOpen(!1), v(h)) : z.type === "keydown" ? v(L.title) : e({
+                blocklet: L,
+                detailUrl: zt(s, "/blocklets", L.did),
                 storeUrl: s
               });
             },
             templates: {
-              item({ item: L }) {
-                return L.type === "more-result" ? /* @__PURE__ */ t("div", { children: f("autocomplete.expandResult", { name: u, number: L.total.toLocaleString() }) }) : m({ blocklet: L, autocompleteSetters: $, serverVersion: g });
+              item({ item: z }) {
+                return z.type === "more-result" ? /* @__PURE__ */ t("div", { children: f("autocomplete.expandResult", { name: h, number: z.total.toLocaleString() }) }) : c({ blocklet: z, autocompleteSetters: _, serverVersion: y });
               },
               noResults() {
                 return f("blocklet.noResults");
@@ -1159,18 +1193,24 @@ function ae({ onSelect: e, wrapChildren: r }) {
       }
     });
     return () => {
-      y.destroy();
+      b.destroy();
     };
-  }, [d, m]), /* @__PURE__ */ p(F, { children: [
+  }, [d, c]), /* @__PURE__ */ m(F, { children: [
     /* @__PURE__ */ t(
       xe,
       {
-        styles: we`
+        styles: (b) => we`
           .bl-autocomplete-detached-container {
             .bl-autocomplete-detached-cancel {
               white-space: nowrap;
             }
           }
+          .bl-autocomplete-panel {
+            @media (min-width: ${b.breakpoints.values.md}px) {
+              min-width: 450px;
+              left: unset !important;
+            }
+          }
         `
       }
     ),
@@ -1185,9 +1225,9 @@ ae.defaultProps = {
   wrapChildren: (e) => e
 };
 function ie({ placeholder: e, ...r }) {
-  const { filters: o, handleKeyword: n } = B(), [a, l] = q(o.keyword || ""), m = mt(n, { wait: 300 }), d = (k) => {
-    const { value: f } = k.target;
-    l(f), m.run(f);
+  const { filters: o, handleKeyword: n } = B(), [a, l] = q(o.keyword || ""), c = ht(n, { wait: 300 }), d = (v) => {
+    const { value: f } = v.target;
+    l(f), c.run(f);
   }, s = () => {
     l(""), n();
   };
@@ -1216,7 +1256,7 @@ ie.propTypes = {
 ie.defaultProps = {
   placeholder: "Type to search..."
 };
-const or = D(ot)`
+const or = D(nt)`
   background-color: ${(e) => e.theme.palette.grey[50]};
   font-size: 14px;
   border-radius: 6px;
@@ -1233,7 +1273,7 @@ const or = D(ot)`
       color: transparent;
     }
   }
-`, nr = D(zt)`
+`, nr = D($t)`
   color: ${(e) => e.theme.palette.grey[500]};
   font-size: 28px;
   @media (max-width: ${(e) => e.theme.breakpoints.values.md}px) {
@@ -1245,9 +1285,9 @@ const or = D(ot)`
   cursor: pointer;
 `;
 function ar() {
-  const { filters: e, handleSearchSelect: r, t: o, wrapChildren: n, baseSearch: a } = B(), { toggleOpen: l } = re(), m = !!e.keyword;
-  return /* @__PURE__ */ p(
-    P,
+  const { filters: e, handleSearchSelect: r, t: o, wrapChildren: n, baseSearch: a } = B(), { toggleOpen: l } = oe(), c = !!e.keyword;
+  return /* @__PURE__ */ m(
+    T,
     {
       direction: "row",
       alignItems: "center",
@@ -1261,14 +1301,14 @@ function ar() {
         /* @__PURE__ */ t(
           G,
           {
-            xs: !m && /* @__PURE__ */ t(De, { onClick: () => l(!0), children: /* @__PURE__ */ t(Rt, {}) }),
-            md: /* @__PURE__ */ t(T, { variant: "h1", children: o("common.title") })
+            xs: !c && /* @__PURE__ */ t(Ee, { onClick: () => l(!0), children: /* @__PURE__ */ t(Pt, {}) }),
+            md: /* @__PURE__ */ t(I, { variant: "h1", children: o("common.title") })
           }
         ),
         /* @__PURE__ */ t(
           S,
           {
-            width: { xs: m ? "100%" : 300, md: 300 },
+            width: { xs: c ? "100%" : 300, md: 300 },
             className: "filter-bar",
             sx: {
               "& .bl-autocomplete-form": { borderRadius: 2 },
@@ -1284,27 +1324,27 @@ function ar() {
 }
 function ir() {
   const { blockletList: e, filters: r, t: o } = B(), n = r.category || r.keyword || r.price;
-  return /* @__PURE__ */ t($t, { children: /* @__PURE__ */ p(nt, { FallbackComponent: K, children: [
+  return /* @__PURE__ */ t(_t, { children: /* @__PURE__ */ m(lt, { FallbackComponent: Z, children: [
     /* @__PURE__ */ t(ar, {}),
-    /* @__PURE__ */ p(S, { display: "flex", height: "100%", children: [
-      /* @__PURE__ */ t(Qt, {}),
-      /* @__PURE__ */ t(P, { height: "100%", position: "relative", flex: 1, overflow: "auto", children: n ? /* @__PURE__ */ p(F, { children: [
-        r.keyword ? /* @__PURE__ */ p(F, { children: [
-          /* @__PURE__ */ t(G, { xs: /* @__PURE__ */ t(Ee, {}), md: null }),
+    /* @__PURE__ */ m(S, { display: "flex", height: "100%", children: [
+      /* @__PURE__ */ t(Jt, {}),
+      /* @__PURE__ */ t(T, { height: "100%", position: "relative", flex: 1, overflow: "visible", children: n ? /* @__PURE__ */ m(F, { children: [
+        r.keyword ? /* @__PURE__ */ m(F, { children: [
+          /* @__PURE__ */ t(G, { xs: /* @__PURE__ */ t(Me, {}), md: null }),
           a()
         ] }) : /* @__PURE__ */ t(rr, {}),
-        /* @__PURE__ */ t(Oe, { blocklets: e, height: "100%" })
-      ] }) : /* @__PURE__ */ t(Kt, {}) })
+        /* @__PURE__ */ t(qe, { blocklets: e, height: "100%" })
+      ] }) : /* @__PURE__ */ t(tr, {}) })
     ] })
   ] }) });
   function a() {
-    return /* @__PURE__ */ p(P, { direction: "row", alignItems: "center", justifyContent: "space-between", mb: 2, mt: { xs: 2, md: 0 }, children: [
-      /* @__PURE__ */ t(T, { variant: "h3", children: o("blocklet.search", { keyword: r.keyword }) }),
-      /* @__PURE__ */ t(T, { variant: "body1", color: "text.lighter", fontSize: 13, children: o("blocklet.resultCount", { count: e.length }) })
+    return /* @__PURE__ */ m(T, { direction: "row", alignItems: "center", justifyContent: "space-between", mb: 2, mt: { xs: 2, md: 0 }, children: [
+      /* @__PURE__ */ t(I, { variant: "h3", children: o("blocklet.search", { keyword: r.keyword }) }),
+      /* @__PURE__ */ t(I, { variant: "body1", color: "text.lighter", fontSize: 13, children: o("blocklet.resultCount", { count: e.length }) })
     ] });
   }
 }
-function qe(e) {
+function je(e) {
   const r = be(), o = Ot(r.palette.primary.main), n = {
     autocomplete: we`
       :root {
@@ -1344,13 +1384,13 @@ function qe(e) {
       }
     `
   };
-  return /* @__PURE__ */ p(oe, { ...e, children: [
+  return /* @__PURE__ */ m(ne, { ...e, children: [
     /* @__PURE__ */ t(xe, { styles: n.autocomplete }),
     /* @__PURE__ */ t(ir, {})
   ] });
 }
-qe.propTypes = ze;
-qe.defaultProps = $e;
+je.propTypes = ze;
+je.defaultProps = $e;
 export {
-  qe as default
+  je as default
 };