@blocklet/list 0.14.4 → 0.14.6

package/lib/index.es.js

@@ -1,55 +1,56 @@
-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 { jsx as t, jsxs as p, Fragment as A } from "react/jsx-runtime";
+import { styled as _, 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 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 { ErrorFallback as ee } from "@arcblock/ux/lib/ErrorBoundary";
+import { Button as te, useTheme as ve, useMediaQuery as N, Drawer as Je, Box as C, CircularProgress as re, MenuList as Ke, SvgIcon as Ze, Popper as et, Grow as tt, Paper as rt, ClickAwayListener as ot, MenuItem as nt, Stack as L, FormControlLabel as Ce, Checkbox as Se, Typography as $, Link as lt, Grid as he, Chip as at, OutlinedInput as it, InputAdornment as me } from "@mui/material";
+import { ErrorBoundary as st } from "react-error-boundary";
+import ct 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 { createContext as Pe, useState as q, useMemo as M, useContext as Ie, useCallback as Z, useEffect as W, forwardRef as dt, useRef as G, memo as ut, createElement as pt, Fragment as ht } from "react";
+import { createAxios as Te } from "@blocklet/js-sdk";
 import mt from "lodash/orderBy";
-import i from "prop-types";
-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 { useInfiniteScroll as ft, useRequest as oe, useReactive as gt, useDebounceFn as yt } from "ahooks";
+import bt from "lodash/omitBy";
+import xt from "json-stable-stringify";
+import wt from "color";
 import "lodash/cloneDeep";
-import xt from "color";
-import { withQuery as Le, joinURL as wt } from "ufo";
+import { parseURL as kt, parseQuery as vt, parseFilename as Ct, stringifyParsedURL as St, withQuery as Le, joinURL as Bt } from "ufo";
 import fe from "flat";
-import kt from "@mui/icons-material/KeyboardArrowDown";
-import vt from "lodash/isEmpty";
+import Rt from "@mui/icons-material/Check";
+import Pt from "@mui/icons-material/KeyboardArrowDown";
+import It from "lodash/isEmpty";
+import k from "prop-types";
 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 Tt from "@arcblock/ux/lib/Avatar";
+import Lt from "@arcblock/ux/lib/Img";
+import $t from "@iconify-icons/tabler/cloud-download";
+import zt from "@mui/icons-material/ChevronLeft";
+import Ft from "@mui/icons-material/ChevronRight";
+import At from "react-image-gallery";
 import "react-image-gallery/styles/css/image-gallery.css";
-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 Et from "@arcblock/ux/lib/Empty";
+import _t from "react-infinite-scroll-hook";
+import ze from "@mui/material/Typography";
+import Dt from "@mui/icons-material/Menu";
+import { createRoot as Nt } from "react-dom/client";
+import { autocomplete as Mt } from "@algolia/autocomplete-js";
+import { useHotkeys as Ot } from "react-hotkeys-hook";
+import jt from "@mui/icons-material/Search";
 import "@algolia/autocomplete-theme-classic/dist/theme.css";
-const ze = Pe({
+const Fe = Pe({
   open: !1,
   toggleOpen: (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 qt({ children: e }) {
+  const [r, o] = q(!1), l = (a) => {
+    o(a ?? !a);
+  }, n = M(() => ({ open: r, toggleOpen: l }), [r]);
+  return /* @__PURE__ */ t(Fe.Provider, { value: n, children: e });
 }
-function oe() {
-  return Te(ze);
+function ne() {
+  return Ie(Fe);
 }
 const T = {
   nameAsc: "title",
@@ -65,72 +66,32 @@ const T = {
   explorePath: "/api/blocklets/explore",
   exploreDidsPath: "/api/blocklets/dids",
   cacheSize: 100
-}, Mt = (e, r, o, n) => ht(
-  async (a) => {
-    a || (o.currentPage = o.defaultCurrentPage);
-    const { currentPage: l, pageSize: c } = o, p = {
+}, Wt = (e, r, o, l) => ft(
+  async (n) => {
+    n || (o.currentPage = o.defaultCurrentPage);
+    const { currentPage: a, pageSize: d } = o, c = {
       ...r,
       category: r.category === "All" ? "" : r.category,
       sortBy: T[r.sortBy],
-      page: l,
-      pageSize: c
+      page: a,
+      pageSize: d
     };
-    n(null);
-    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 };
+    l(null);
+    const { data: s = {} } = await e.get(T.blockletsPath, { params: c });
+    return o.currentPage++, { page: a, pageSize: d, 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, bt(r)],
-    onError: n
+    isNoMore: (n) => n ? n.page * n.pageSize >= n.total : !1,
+    reloadDeps: [e, xt(r)],
+    onError: l
   }
-), Et = (e) => re(
+), Vt = (e) => oe(
   async () => {
     const { data: r } = await e.get(T.categoriesPath);
     return Array.isArray(r) ? r : [];
   },
   { manual: !0 }
-), Ae = {
-  filters: i.shape({
-    keyword: i.string,
-    sortBy: i.string,
-    sortDirection: i.string,
-    price: i.string,
-    category: i.string,
-    developer: i.string,
-    resourceType: i.string
-  }),
-  wrapChildren: i.func,
-  extraFilter: i.func,
-  serverVersion: i.string,
-  endpoint: i.string.isRequired,
-  blockletRender: i.func.isRequired,
-  onFilterChange: i.func,
-  onSearchSelect: i.func,
-  locale: i.oneOf(["zh", "en"]),
-  baseSearch: i.bool,
-  // sometimes blocklet list can be rendered only before the category is fetched
-  fetchCategoryDelay: i.number,
-  showResourcesSwitch: i.bool,
-  showCategory: i.bool,
-  tagFilters: i.array
-}, Fe = {
-  locale: "zh",
-  filters: {},
-  serverVersion: "",
-  onFilterChange: () => {
-  },
-  onSearchSelect: ({ detailUrl: e }) => {
-    window.location.href = e;
-  },
-  wrapChildren: (e) => e,
-  extraFilter: (e) => e,
-  baseSearch: !1,
-  fetchCategoryDelay: 0,
-  showResourcesSwitch: !1,
-  showCategory: !0,
-  tagFilters: []
-}, De = (e) => [
+), Ae = (e) => [
   {
     name: e("sort.popularity"),
     value: "popularity"
@@ -143,29 +104,34 @@ const T = {
   //   name: t('sort.rating'),
   //   value: 'rating',
   // },
-], 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 };
+], Ut = (e, r, o) => {
+  var f, m;
+  const l = kt(e), n = vt(l.search);
+  if ((f = Ct(e, { strict: !0 })) == null ? void 0 : f.endsWith(".gif"))
+    return n.imageFilter ? St({ ...l, search: "" }) : e;
+  if (n.imageFilter)
+    return e;
+  const d = (m = window.blocklet) == null ? void 0 : m.version, { w: c, h: s } = 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
+    ...c || s ? { imageFilter: "resize", w: c, h: s } : {},
+    v: d
   });
-}, Ot = (e) => [
+}, Gt = (e) => [
   { name: e("blocklet.free"), value: "free" },
   { name: e("blocklet.payment"), value: "payment" }
-], jt = (e = [], r = "en") => e.map((o) => ({ name: o.locales[r] || o.locales.en, value: o._id })), qt = (e, r) => (
+], Ht = (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, (o, n) => r.hasOwnProperty(n) ? r[n] : "")
-), Vt = () => window.innerWidth <= 600, Wt = (e) => xt(e).rgb().object();
-function Ut(e, r) {
+  e == null ? void 0 : e.replace(/{(\w*)}/g, (o, l) => r.hasOwnProperty(l) ? r[l] : "")
+), Xt = () => window.innerWidth <= 600, Yt = (e) => wt(e).rgb().object();
+function Jt(e, r) {
   let o;
-  return function(...a) {
-    return o && clearTimeout(o), new Promise((l) => {
-      o = setTimeout(() => l(e(...a)), r);
+  return function(...n) {
+    return o && clearTimeout(o), new Promise((a) => {
+      o = setTimeout(() => a(e(...n)), r);
     });
   };
 }
-const Ht = Ut((e) => Promise.resolve(e), 300), Gt = {
+const Kt = Jt((e) => Promise.resolve(e), 300), Zt = {
   common: {
     title: "Blocklet Store",
     searchStore: "Search Blocklet",
@@ -213,7 +179,7 @@ const Ht = Ut((e) => Promise.resolve(e), 300), Gt = {
   autocomplete: {
     expandResult: 'View all search results for "{name}"'
   }
-}, Qt = {
+}, er = {
   common: {
     title: "Blocklet 商店",
     searchStore: "搜索 Blocklet",
@@ -261,16 +227,16 @@ const Ht = Ut((e) => Promise.resolve(e), 300), Gt = {
   autocomplete: {
     expandResult: "查看 “{name}” 的所有搜索结果"
   }
-}, J = {
-  en: fe(Gt),
-  zh: fe(Qt)
-}, Me = (e, r) => {
+}, K = {
+  en: fe(Zt),
+  zh: fe(er)
+}, Ee = (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 = {
+}, tr = (e) => (r, o) => {
+  const l = K[e] ? K[e][r] : K.en[r];
+  return Qt(l, o) || r;
+}, _e = {
   errors: {
     fetchBlockletsError: null,
     fetchCategoriesError: null
@@ -285,8 +251,10 @@ const Ht = Ut((e) => Promise.resolve(e), 300), Gt = {
   wrapChildren: () => null,
   t: (e) => e,
   storeVersion: "",
+  minItemWidth: 400,
   serverVersion: "",
   filters: {},
+  layout: {},
   selectedCategory: void 0,
   categoryList: [],
   total: 0,
@@ -324,137 +292,152 @@ const Ht = Ut((e) => Promise.resolve(e), 300), Gt = {
   developerName: "",
   handleSearchSelect: () => {
   }
-}, Ne = Pe(Ee), { Provider: Yt, Consumer: Kr } = Ne;
-function ne({
-  filters: e,
-  children: r,
-  endpoint: o,
-  locale: n,
-  blockletRender: a,
-  onFilterChange: l,
-  onSearchSelect: c,
-  extraFilter: p,
-  wrapChildren: d,
-  baseSearch: w,
-  serverVersion: y,
-  storeVersion: b,
-  fetchCategoryDelay: $,
-  showResourcesSwitch: B,
-  showCategory: S,
-  tagFilters: s
-}) {
+}, De = Pe(_e), { Provider: rr, Consumer: ao } = De;
+function or(e) {
   var ue;
-  const k = Me(y, b), h = E(() => Ie({ baseURL: o, headers: k }), [o]), u = { sortBy: "popularity", sortDirection: "desc", ...e }, x = u.category, z = ft({
+  const {
+    locale: r = "zh",
+    filters: o = {},
+    serverVersion: l = "",
+    onFilterChange: n = () => {
+    },
+    onSearchSelect: a = ({ detailUrl: i }) => {
+      window.location.href = i;
+    },
+    minItemWidth: d = 400,
+    queryFilter: c = !0,
+    layout: s = {},
+    wrapChildren: f = (i) => i,
+    extraFilter: m = (i) => i,
+    baseSearch: v = !1,
+    fetchCategoryDelay: z = 0,
+    showResourcesSwitch: R = !1,
+    showCategory: S = !0,
+    tagFilters: u = [],
+    children: x,
+    storeVersion: h,
+    endpoint: g,
+    blockletRender: w
+  } = e, P = Ee(l, h), F = M(() => Te({ baseURL: g, headers: P }), [g]), y = { sortBy: "popularity", sortDirection: "desc", ...o };
+  !y.category && !s.showExplore && (y.category = "All");
+  const D = y.category, We = gt({
     currentPage: T.currentPage,
-    pageSize: Vt() ? T.mobilePageSize : T.pageSize,
+    pageSize: Xt() ? T.mobilePageSize : T.pageSize,
     defaultCurrentPage: T.defaultCurrentPage
-  }), [A, _] = j(null), R = Mt(h, u, z, _), {
-    data: X = [],
-    error: He,
-    loading: Ge,
+  }), [Ve, Ue] = q(null), E = Wt(F, y, We, Ue), {
+    data: Y = [],
+    error: Ge,
+    loading: He,
     run: se
-  } = 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 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 },
+  } = Vt(F), J = M(() => {
+    const i = mt(Y, [(I) => I.name], ["asc"]), b = i.findIndex((I) => I.name === "All" || I.locales.en === "All");
+    return b > -1 ? [{ ...i[b], _id: "All" }, ...i.slice(0, b), ...i.slice(b + 1)] : i;
+  }, [Y]), ce = M(
+    () => {
+      var i;
+      return m(((i = E.data) == null ? void 0 : i.list) || []) || [];
+    },
+    [E.data, m]
+  ), de = Z(tr(r), [r]), Qe = M(() => Ht(J, r), [J, r]), Xe = Gt(de), Ye = {
+    errors: { fetchBlockletsError: Ve, fetchCategoriesError: Ge },
     loadings: {
-      fetchBlockletsLoading: R.loading,
-      fetchCategoriesLoading: Ge,
-      loadingMore: R.loadingMore
+      fetchBlockletsLoading: E.loading,
+      fetchCategoriesLoading: He,
+      loadingMore: E.loadingMore
+    },
+    endpoint: g,
+    queryFilter: c,
+    layout: {
+      showExplore: s.showExplore ?? !1,
+      showCategory: s.showCategory ?? !0,
+      showTitle: s.showTitle ?? !0,
+      showSearch: s.showSearch ?? !0
     },
-    endpoint: o,
+    minItemWidth: d,
     blockletList: ce,
-    total: ((ue = R.data) == null ? void 0 : ue.total) || 0,
-    wrapChildren: d,
+    total: ((ue = E.data) == null ? void 0 : ue.total) || 0,
+    wrapChildren: f,
     t: de,
-    storeVersion: b,
-    serverVersion: y,
-    filters: u,
-    selectedCategory: x,
-    categoryList: Y,
-    blockletRender: a,
-    locale: n,
+    storeVersion: h,
+    serverVersion: l,
+    filters: y,
+    selectedCategory: D,
+    categoryList: J,
+    blockletRender: w,
+    locale: r,
     categoryOptions: Qe,
     priceOptions: Xe,
-    storeApi: h,
-    baseSearch: w,
-    showResourcesSwitch: B,
+    storeApi: F,
+    baseSearch: v,
+    showResourcesSwitch: R,
     showCategory: S,
-    tagFilters: s,
-    hasNextPage: !R.noMore,
-    onFilterChange: l,
-    cleanFilter: (m) => {
-      const g = m ? yt(u, (P, N) => m == null ? void 0 : m.includes(N)) : {};
-      l(g);
+    tagFilters: u,
+    hasNextPage: !E.noMore,
+    onFilterChange: n,
+    cleanFilter: (i) => {
+      const b = i ? bt(y, (I, O) => i == null ? void 0 : i.includes(O)) : {};
+      n(b);
     },
-    handleSort: (m) => {
-      const g = { ...u, sortBy: m, sortDirection: m === "nameAsc" ? "asc" : "desc" };
-      l(g);
+    handleSort: (i) => {
+      const b = { ...y, sortBy: i, sortDirection: i === "nameAsc" ? "asc" : "desc" };
+      n(b);
     },
-    handleKeyword: (m) => {
-      const g = { ...u, category: void 0, keyword: m || void 0 };
-      l(g);
+    handleKeyword: (i) => {
+      const b = { ...y, category: void 0, keyword: i || void 0 };
+      n(b);
     },
-    handlePrice: (m) => {
-      const g = { ...u, price: m === u.price ? void 0 : m };
-      l(g);
+    handlePrice: (i) => {
+      const b = { ...y, price: i === y.price ? void 0 : i };
+      n(b);
     },
-    handleCategory: (m) => {
-      const g = m === "all" || m === u.category ? "" : m, P = { ...u, category: g };
-      l(P);
+    handleCategory: (i) => {
+      const b = i === "all" || i === y.category ? "" : i, I = { ...y, category: b };
+      n(I);
     },
-    handleDeveloper: (m) => {
-      const g = { ...u, owner: m || void 0 };
-      l(g);
+    handleDeveloper: (i) => {
+      const b = { ...y, owner: i || void 0 };
+      n(b);
     },
-    handlePage: (m) => {
-      const g = { ...u, currentPage: m };
-      l(g);
+    handlePage: (i) => {
+      const b = { ...y, currentPage: i };
+      n(b);
     },
     handleSwitchShowResources: () => {
-      const m = { ...u };
-      l(m);
+      const i = { ...y };
+      n(i);
     },
-    loadMore: R.loadMore,
-    getCategoryLocale: (m) => {
-      if (!m)
+    loadMore: E.loadMore,
+    getCategoryLocale: (i) => {
+      if (!i)
         return null;
-      const g = X.find((P) => P._id === m);
-      return g ? g.locales[n] || g.locales.en : null;
+      const b = Y.find((I) => I._id === i);
+      return b ? b.locales[r] || b.locales.en : null;
     },
     get developerName() {
-      var g, P;
-      return ((P = (g = ce.find((N) => {
+      var b, I;
+      const i = ce.find((O) => {
         var pe;
-        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) || "";
+        return ((pe = O == null ? void 0 : O.owner) == null ? void 0 : pe.did) === y.owner;
+      });
+      return ((b = i == null ? void 0 : i.owner) == null ? void 0 : b.fullName) || ((I = i == null ? void 0 : i.author) == null ? void 0 : I.name) || "";
     },
-    handleSearchSelect: c
+    handleSearchSelect: a
   };
-  return q(() => {
-    setTimeout(se, $ || 0);
-  }, [o, se, $]), /* @__PURE__ */ t(Yt, { value: Ye, children: r });
+  return W(() => {
+    setTimeout(se, z || 0);
+  }, [g, se, z]), /* @__PURE__ */ t(rr, { value: Ye, children: x });
 }
-ne.propTypes = {
-  ...Ae,
-  children: i.any.isRequired
-};
-ne.defaultProps = Fe;
-function C() {
-  const e = Te(Ne);
-  return e || Ee;
+function B() {
+  const e = Ie(De);
+  return e || _e;
 }
-function Oe({
+function Ne({
   children: e,
   onClick: r,
   size: o = 32
 }) {
   return /* @__PURE__ */ t(
-    ee,
+    te,
     {
       onClick: r,
       variant: "outlined",
@@ -476,48 +459,48 @@ function Oe({
 function V(e, r) {
   return e === void 0 ? r : e;
 }
-function G({
+function Q({
   xs: e,
   sm: r,
   md: o,
-  lg: n,
-  xl: a,
-  exact: l
+  lg: l,
+  xl: n,
+  exact: a
 }) {
-  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 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);
+  const d = ve(), c = N(d.breakpoints.down("sm")), s = N(d.breakpoints.between("sm", "md")), f = N(d.breakpoints.between("md", "lg")), m = N(d.breakpoints.between("lg", "xl"));
+  if (a)
+    return c ? e || null : s ? r || null : f ? o || null : m ? l || null : n || null;
+  let v = e;
+  return c || (v = V(r, v), s) || (v = V(o, v), f) || (v = V(l, v), m) ? v : V(n, v);
 }
-function Jt({ children: e }) {
-  const { open: r, toggleOpen: o } = oe();
+function nr({ children: e }) {
+  const { open: r, toggleOpen: o } = ne();
   return /* @__PURE__ */ t(
-    G,
+    Q,
     {
       xs: /* @__PURE__ */ t(Je, { open: r, onClose: () => o(!1), children: e }),
-      md: /* @__PURE__ */ t(v, { children: e })
+      md: /* @__PURE__ */ t(C, { children: e })
     }
   );
 }
-const Kt = D(ee)`
+const lr = _(te)`
   border-radius: 4px;
-`, le = ct(({ children: e, rounded: r, loading: o, disabled: n, ...a }, l) => /* @__PURE__ */ t(
-  Kt,
+`, le = dt(({ children: e, rounded: r, loading: o, disabled: l, ...n }, a) => /* @__PURE__ */ t(
+  lr,
   {
-    ref: l,
+    ref: a,
     disableElevation: !0,
-    disabled: n || o,
-    ...a,
-    startIcon: o && /* @__PURE__ */ t(te, { size: "1em" }),
+    disabled: l || o,
+    ...n,
+    startIcon: o && /* @__PURE__ */ t(re, { size: "1em" }),
     children: e
   }
 ));
 le.propTypes = {
-  children: i.any,
-  rounded: i.bool,
-  loading: i.bool,
-  disabled: i.bool
+  children: k.any,
+  rounded: k.bool,
+  loading: k.bool,
+  disabled: k.bool
 };
 le.defaultProps = {
   children: null,
@@ -525,67 +508,64 @@ le.defaultProps = {
   loading: !1,
   disabled: !1
 };
-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 : "");
+function X({ title: e, value: r, icon: o, prepend: l, options: n, onChange: a, itemRender: d, ...c }) {
+  const s = G(null), f = xe(), [m, v] = q(!1), [z, R] = q(r !== null ? r : ""), S = N(f.breakpoints.down("sm"));
+  W(() => {
+    R(r !== null ? r : "");
   }, [r]);
-  const s = K(() => {
-    b(!1);
-  }, []), k = K(() => {
-    b(!0);
+  const u = Z(() => {
+    v(!1);
+  }, []), x = Z(() => {
+    v(!0);
   }, []);
-  function h(x) {
-    B(x.value), l(x.value), S && s();
+  function h(w) {
+    R(w.value), a(w.value), S && u();
   }
-  function u(x) {
-    return x === $;
+  function g(w) {
+    return w === z;
   }
-  return /* @__PURE__ */ f(F, { children: [
-    /* @__PURE__ */ f(
-      Zt,
+  return /* @__PURE__ */ p(A, { children: [
+    /* @__PURE__ */ p(
+      ar,
       {
-        ref: d,
-        onClick: k,
+        ref: s,
+        onClick: x,
         variant: "outlined",
         size: "small",
-        className: ["my-select__selector", vt($) ? "" : "my-select__selector--active"].join(" "),
+        className: ["my-select__selector", It(z) ? "" : "my-select__selector--active"].join(" "),
         sx: { minWidth: "auto" },
-        ...p,
+        ...c,
         children: [
           /* @__PURE__ */ t("div", { className: "my-select__icon", children: o }),
           e,
-          /* @__PURE__ */ t(Ze, { className: "my-select__arrowdown", component: kt, fontSize: "small" })
+          /* @__PURE__ */ t(Ze, { className: "my-select__arrowdown", component: Pt, fontSize: "small" })
         ]
       }
     ),
-    /* @__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) => c ? c(A) : /* @__PURE__ */ t(
-        nt,
-        {
-          onClick: () => h(A),
-          className: [
-            "my-select__option",
-            u(A.value) ? "my-select__option--active" : ""
-          ].join(" "),
-          children: A.name
-        },
-        A.value
-      ))
+    /* @__PURE__ */ t(et, { open: m, anchorEl: s.current, transition: !0, sx: { zIndex: "9999" }, children: ({ TransitionProps: w, placement: P }) => /* @__PURE__ */ t(tt, { ...w, sx: { transformOrigin: P === "bottom" ? "center top" : "center bottom" }, children: /* @__PURE__ */ t(rt, { children: /* @__PURE__ */ t(ot, { onClickAway: u, children: /* @__PURE__ */ p(ir, { autoFocusItem: m, onMouseEnter: x, onMouseLeave: u, children: [
+      l,
+      n.map((F) => d ? d(F) : /* @__PURE__ */ p(nt, { onClick: () => h(F), children: [
+        /* @__PURE__ */ t(
+          Rt,
+          {
+            sx: { mr: 1, fontSize: 16, visibility: g(F.value) ? "visible" : "hidden" }
+          }
+        ),
+        F.name
+      ] }, F.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
+X.propTypes = {
+  options: k.array.isRequired,
+  value: k.oneOfType([k.string, k.number, k.array]),
+  onChange: k.func,
+  itemRender: k.func,
+  title: k.string.isRequired,
+  icon: k.any,
+  prepend: k.any
 };
-Q.defaultProps = {
+X.defaultProps = {
   value: null,
   icon: null,
   prepend: null,
@@ -593,7 +573,7 @@ Q.defaultProps = {
   onChange: () => {
   }
 };
-const Zt = D(le)`
+const ar = _(le)`
   border: 1px solid #f0f0f0;
   padding: 6px 8px 6px 12px;
   font-weight: ${(e) => e.theme.typography.fontWeightRegular};
@@ -624,7 +604,7 @@ const Zt = D(le)`
       margin-right: 3px;
     }
   }
-`, er = D(Ke)`
+`, ir = _(Ke)`
   .my-select__option__icon {
     color: transparent;
     font-size: 14px;
@@ -641,11 +621,11 @@ const Zt = D(le)`
     }
   }
 `;
-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,
+function Me() {
+  var d;
+  const { filters: e, handleSort: r, handlePrice: o, t: l } = B(), n = Ae(l), a = ((d = n.find((c) => c.value === e.sortBy)) == null ? void 0 : d.name) || l("sort.sort");
+  return /* @__PURE__ */ p(
+    L,
     {
       direction: { xs: "row", md: "column" },
       alignItems: { xs: "center", md: "flex-start" },
@@ -662,18 +642,18 @@ function je() {
                 checked: e.price === "free",
                 size: "small",
                 sx: { "& .MuiSvgIcon-fontSizeSmall": { fontSize: 16, color: "text.lighter" } },
-                onChange: (p) => o(p.target.checked ? "free" : "")
+                onChange: (c) => o(c.target.checked ? "free" : "")
               }
             ),
-            label: n("blocklet.free")
+            label: l("blocklet.free")
           }
         ),
         /* @__PURE__ */ t(
-          Q,
+          X,
           {
             value: e.sortBy,
-            options: a,
-            title: l,
+            options: n,
+            title: a,
             onChange: r,
             icon: null,
             prepend: null,
@@ -684,14 +664,14 @@ function je() {
     }
   );
 }
-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: [
+function sr() {
+  const { selectedCategory: e, handleCategory: r, t: o, categoryOptions: l, filters: n, cleanFilter: a, loadings: d, layout: c } = B(), { toggleOpen: s } = ne();
+  return c.showCategory ? /* @__PURE__ */ p(nr, { children: [
     /* @__PURE__ */ t(
-      G,
+      Q,
       {
-        xs: /* @__PURE__ */ f(
-          I,
+        xs: /* @__PURE__ */ p(
+          L,
           {
             direction: "row",
             justifyContent: "space-between",
@@ -702,8 +682,8 @@ function tr() {
             borderBottom: 1,
             borderColor: "divider",
             children: [
-              /* @__PURE__ */ t(Oe, { onClick: () => p(!1), children: /* @__PURE__ */ t(Re, {}) }),
-              /* @__PURE__ */ t(L, { flex: 1, variant: "body1", fontWeight: "fontWeightMedium", children: "Categories" })
+              /* @__PURE__ */ t(Ne, { onClick: () => s(!1), children: /* @__PURE__ */ t(Re, {}) }),
+              /* @__PURE__ */ t($, { flex: 1, variant: "body1", fontWeight: "fontWeightMedium", children: "Categories" })
             ]
           }
         ),
@@ -711,101 +691,101 @@ function tr() {
       }
     ),
     /* @__PURE__ */ t(
-      I,
+      L,
       {
-        visibility: c.fetchCategoriesLoading ? "hidden" : "visible",
+        visibility: d.fetchCategoriesLoading ? "hidden" : "visible",
         width: { xs: 268, md: 200 },
         boxSizing: "content-box",
         p: { xs: 2, md: 0 },
         pr: { md: 6 },
-        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 }),
+        children: n.keyword ? /* @__PURE__ */ t(Me, {}) : /* @__PURE__ */ p(A, { children: [
+          c.showExplore && /* @__PURE__ */ p(C, { display: "flex", alignItems: "center", gap: 1, mb: 3, pb: 3, borderBottom: 1, borderColor: "divider", children: [
+            /* @__PURE__ */ t(Be, { icon: ct }),
             /* @__PURE__ */ t(
-              L,
+              $,
               {
                 variant: "body1",
                 color: e ? "text.lighter" : "text.primary",
                 fontWeight: e ? void 0 : "fontWeightMedium",
                 sx: { cursor: "pointer" },
                 onClick: () => {
-                  p(!1), l();
+                  s(!1), a();
                 },
                 children: o("explore.title")
               }
             )
           ] }),
-          !!n.length && /* @__PURE__ */ t(I, { pt: 3, mt: 3, borderTop: 1, borderColor: "divider", gap: 2, children: n.map((d) => /* @__PURE__ */ t(
-            L,
+          !!l.length && /* @__PURE__ */ t(L, { gap: 2, children: l.map((f) => /* @__PURE__ */ t(
+            $,
             {
               variant: "body1",
-              title: d.name,
+              title: f.name,
               sx: { cursor: "pointer" },
               "data-cy": "filter",
-              color: e === d.value ? "text.primary" : "text.lighter",
+              color: e === f.value ? "text.primary" : "text.lighter",
               textTransform: "capitalize",
               onClick: () => {
-                e === d.value ? l() : r(d.value), p(!1);
+                e === f.value ? a() : r(f.value), s(!1);
               },
-              children: d.name
+              children: f.name
             },
-            d.value
+            f.value
           )) })
         ] })
       }
     )
-  ] });
+  ] }) : null;
 }
-function qe() {
-  const { endpoint: e, serverVersion: r, storeVersion: o } = C(), n = Me(r, o), a = E(() => Ie({
+function Oe() {
+  const { endpoint: e, serverVersion: r, storeVersion: o } = B(), l = Ee(r, o), n = M(() => Te({
     baseURL: e,
-    headers: n
+    headers: l
   }), [e]);
   return {
-    get: async (l) => {
-      const { data: c } = await a.get(l);
-      return c;
+    get: async (a) => {
+      const { data: d } = await n.get(a);
+      return d;
     },
-    post: async (l, c) => {
-      const { data: p } = await a.post(l, c);
-      return p;
+    post: async (a, d) => {
+      const { data: c } = await n.post(a, d);
+      return c;
     }
   };
 }
-const Ve = dt(function(r) {
-  return /* @__PURE__ */ t($e, { height: 60, display: "flex", alignItems: "center", justifyContent: "center", ...r, children: /* @__PURE__ */ t(te, {}) });
+const je = ut(function(r) {
+  return /* @__PURE__ */ t($e, { height: 60, display: "flex", alignItems: "center", justifyContent: "center", ...r, children: /* @__PURE__ */ t(re, {}) });
 });
 function ge({
   icon: e,
   children: r,
   maxWidth: o = 100,
-  title: n
+  title: l
 }) {
-  return (r === 0 || r) && /* @__PURE__ */ f(I, { direction: "row", alignItems: "center", gap: 1, sx: { maxWidth: o, overflow: "hidden" }, children: [
+  return (r === 0 || r) && /* @__PURE__ */ p(L, { direction: "row", alignItems: "center", gap: 1, sx: { maxWidth: o, overflow: "hidden" }, children: [
     e,
     /* @__PURE__ */ t(
-      L,
+      $,
       {
         flex: 1,
         variant: "body2",
         sx: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
-        title: n || (typeof r == "string" ? r : void 0),
+        title: l || (typeof r == "string" ? r : void 0),
         children: r
       }
     )
   ] });
 }
 const ye = 292;
-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(",") })
+function cr() {
+  var R, S;
+  const { t: e } = B(), { get: r } = Oe(), o = ve(), l = N(o.breakpoints.down("md")), n = ((S = (R = window.blocklet) == null ? void 0 : R.preferences) == null ? void 0 : S.homeBanner) || [], { data: a = [], error: d } = oe(async () => {
+    const u = await r(
+      Le(T.blockletsPath, { didList: n.map((x) => x.did).join(",") })
     );
-    return s != null && s.dataList ? a.map((k) => s.dataList.find((h) => h.did === k.did)) : [];
+    return u != null && u.dataList ? n.map((x) => u.dataList.find((h) => h.did === x.did)) : [];
   });
-  c && console.error("Get Banner Blocklets error:", c);
-  const p = {
+  d && console.error("Get Banner Blocklets error:", d);
+  const c = {
     position: "absolute",
     top: "50%",
     transform: "translateY(-50%)",
@@ -813,72 +793,90 @@ function rr() {
     cursor: "pointer",
     color: "text.lighter"
   };
-  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(v, { height: { xs: "auto", md: ye }, position: "relative", bgcolor: "#F0F7FF", borderRadius: 3, children: /* @__PURE__ */ t(
-      Tt,
+  return !d && n.length > 0 ? /* @__PURE__ */ p(A, { children: [
+    /* @__PURE__ */ t($, { component: "h2", variant: "h2", mt: { xs: 2, md: 0 }, mb: 3, children: e("explore.title") }),
+    /* @__PURE__ */ t(
+      C,
       {
-        showNav: !0,
-        slideDuration: 1e3,
-        slideInterval: 5e3,
-        showPlayButton: !1,
-        showIndex: !1,
-        showBullets: !1,
-        showThumbnails: !1,
-        showFullscreenButton: !1,
-        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 u;
-            const h = l[k] || {};
-            return /* @__PURE__ */ f(
-              I,
-              {
-                height: { xs: "auto", md: ye },
-                display: "flex",
-                direction: { xs: "column", md: "row" },
-                justifyContent: "center",
-                alignItems: { xs: "flex-start", md: "center" },
-                p: { xs: 2, md: 5 },
-                gap: { xs: 2, md: 5 },
-                children: [
-                  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)
-                    ] }),
-                    h.did && b(h, s.baseNum),
-                    $(s.link, s.did)
-                  ] })
-                ]
+        height: { xs: "auto", md: ye },
+        position: "relative",
+        border: 1,
+        borderColor: "divider",
+        borderRadius: 3,
+        overflow: "hidden",
+        children: /* @__PURE__ */ t(
+          At,
+          {
+            showNav: !0,
+            autoPlay: !0,
+            slideDuration: 1e3,
+            slideInterval: 5e3,
+            showPlayButton: !1,
+            showIndex: !1,
+            showBullets: !1,
+            showThumbnails: !1,
+            showFullscreenButton: !1,
+            renderLeftNav: (u) => /* @__PURE__ */ t(C, { onClick: u, sx: { display: { xs: "none", md: "block" } }, children: /* @__PURE__ */ t(zt, { sx: { ...c, left: 5 } }) }),
+            renderRightNav: (u) => /* @__PURE__ */ t(C, { onClick: u, sx: { display: { xs: "none", md: "block" } }, children: /* @__PURE__ */ t(Ft, { sx: { ...c, right: 5 } }) }),
+            items: n.map((u, x) => ({
+              original: u.did,
+              renderItem: () => {
+                var P;
+                const h = a[x] || {}, g = u.cover || ur(u.did, (P = h.screenshots) == null ? void 0 : P[0]), w = Ut(g, { h: 400, w: 700 });
+                return /* @__PURE__ */ p(
+                  L,
+                  {
+                    height: { xs: "auto", md: ye },
+                    sx: {
+                      "&::before": {
+                        content: '""',
+                        position: "absolute",
+                        top: 0,
+                        left: 0,
+                        right: 0,
+                        bottom: 0,
+                        backgroundImage: `url("${w}")`,
+                        backgroundSize: "cover",
+                        filter: "blur(8px)",
+                        opacity: 0.15,
+                        zIndex: 0
+                      }
+                    },
+                    display: "flex",
+                    direction: { xs: "column", md: "row" },
+                    justifyContent: "center",
+                    alignItems: { xs: "flex-start", md: "center" },
+                    p: { xs: 2, md: 5 },
+                    gap: { xs: 2, md: 5 },
+                    children: [
+                      s(w),
+                      /* @__PURE__ */ p(L, { flex: 1, height: "100%", gap: 3, children: [
+                        /* @__PURE__ */ p(C, { flex: 1, children: [
+                          f(u.name || h.title || u.name),
+                          m(u.desc || h.description)
+                        ] }),
+                        h.did && v(h, u.baseNum),
+                        z(u.link, u.did)
+                      ] })
+                    ]
+                  }
+                );
               }
-            );
+            }))
           }
-        }))
+        )
       }
-    ) })
+    )
   ] }) : null;
-  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 s(u) {
+    return /* @__PURE__ */ t(C, { width: { xs: "100%", md: 338 }, height: 210, borderRadius: 2, overflow: "hidden", position: "relative", children: /* @__PURE__ */ t(Lt, { src: u, alt: "", width: l ? void 0 : 338, height: 210, style: { objectFit: "cover" } }) });
   }
-  function w(s) {
-    return /* @__PURE__ */ t(L, { variant: "h2", width: "100%", children: s });
+  function f(u) {
+    return /* @__PURE__ */ t($, { variant: "h2", width: "100%", children: u });
   }
-  function y(s) {
+  function m(u) {
     return /* @__PURE__ */ t(
-      L,
+      $,
       {
         variant: "body2",
         color: "text.secondary",
@@ -894,20 +892,20 @@ function rr() {
           overflow: "hidden",
           WebkitBoxOrient: "vertical"
         },
-        children: s
+        children: u
       }
     );
   }
-  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(u, x = 0) {
+    const { did: h, owner: g, stats: w } = u;
+    return /* @__PURE__ */ p(C, { display: "flex", alignItems: "center", gap: 2, color: "text.secondary", children: [
+      /* @__PURE__ */ t(ge, { icon: /* @__PURE__ */ t(Tt, { src: g.avatar, did: h, size: 20, variant: "circle" }), children: g.fullName }),
+      /* @__PURE__ */ t(ge, { icon: /* @__PURE__ */ t(Be, { icon: $t }), title: `${w.downloads + x}`, children: dr(w.downloads + x) })
     ] });
   }
-  function $(s, k) {
-    return /* @__PURE__ */ t(lt, { href: s || `/blocklets/${k}`, align: "left", width: 100, children: /* @__PURE__ */ t(
-      ee,
+  function z(u, x) {
+    return /* @__PURE__ */ t(lt, { href: u || `/blocklets/${x}`, align: "left", width: 100, children: /* @__PURE__ */ t(
+      te,
       {
         variant: "outlined",
         size: "small",
@@ -922,35 +920,35 @@ function rr() {
     ) });
   }
 }
-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: 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)) })
+const dr = (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`, ur = (e, r) => e && r ? `/assets/${e}/screenshots/${r}` : "";
+function pr({ title: e, blocklets: r }) {
+  const { blockletRender: o, serverVersion: l } = B();
+  return /* @__PURE__ */ p(C, { mt: 3, children: [
+    /* @__PURE__ */ t($, { component: "h3", variant: "h3", sx: { mb: 2 }, children: e }),
+    /* @__PURE__ */ t(he, { container: !0, spacing: 2, children: r.map((n) => /* @__PURE__ */ t(he, { item: !0, xs: 12, md: 6, p: "2px", "data-blocklet-did": n.did, children: /* @__PURE__ */ t(C, { padding: "1px", children: o({ blocklet: n, blocklets: r, serverVersion: l }) }) }, n.did)) })
   ] });
 }
-function ar() {
-  const { get: e } = qe(), { t: r } = C(), {
+function hr() {
+  const { get: e } = Oe(), { t: r } = B(), {
     data: o = [],
-    error: n,
-    loading: a
-  } = re(async () => {
-    const l = await e(T.explorePath);
-    return Array.isArray(l) ? l : [];
+    error: l,
+    loading: n
+  } = oe(async () => {
+    const a = await e(T.explorePath);
+    return Array.isArray(a) ? a : [];
   });
-  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, {}),
+  return l ? /* @__PURE__ */ t(ee, { error: new Error(`Failed to fetch blocklets from ${T.explorePath}`) }) : n ? /* @__PURE__ */ t(je, { mt: 15 }) : /* @__PURE__ */ p(A, { children: [
+    /* @__PURE__ */ t(cr, {}),
     o.map(
-      (l) => l.blocklets.length > 0 ? /* @__PURE__ */ t(lr, { title: r(`explore.${l.type}`), blocklets: l.blocklets }, l.type) : null
+      (a) => a.blocklets.length > 0 ? /* @__PURE__ */ t(pr, { title: r(`explore.${a.type}`), blocklets: a.blocklets }, a.type) : null
     )
   ] });
 }
-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,
+function mr() {
+  var f;
+  const { filters: e, handleSort: r, handlePrice: o, t: l, getCategoryLocale: n, developerName: a, handleDeveloper: d } = B(), c = Ae(l), s = ((f = c.find((m) => m.value === e.sortBy)) == null ? void 0 : f.name) || l("sort.sort");
+  return /* @__PURE__ */ p(
+    L,
     {
       direction: { xs: "column", md: "row" },
       alignItems: { xs: "flex-start", md: "center" },
@@ -960,154 +958,177 @@ function ir() {
       px: 0,
       pb: 3,
       children: [
-        /* @__PURE__ */ t(L, { variant: "h2", textTransform: "capitalize", children: a(e.category) }),
-        /* @__PURE__ */ f(I, { direction: "row", alignItems: "center", width: { xs: "100%", md: "auto" }, justifyContent: "space-between", children: [
-          /* @__PURE__ */ t(
-            Ce,
-            {
-              control: /* @__PURE__ */ t(
-                Se,
+        /* @__PURE__ */ t($, { variant: "h2", textTransform: "capitalize", children: n(e.category) }),
+        /* @__PURE__ */ p(
+          L,
+          {
+            direction: "row",
+            alignItems: "center",
+            width: { xs: "100%", md: "auto" },
+            justifyContent: "space-between",
+            gap: 2,
+            children: [
+              e.owner && /* @__PURE__ */ t(at, { label: a, size: "small", onDelete: () => d("") }),
+              /* @__PURE__ */ t(
+                Ce,
                 {
-                  checked: e.price === "free",
-                  size: "small",
-                  sx: { "& .MuiSvgIcon-fontSizeSmall": { fontSize: 16, color: "text.lighter" } },
-                  onChange: (d) => o(d.target.checked ? "free" : "")
+                  sx: { m: 0 },
+                  control: /* @__PURE__ */ t(
+                    Se,
+                    {
+                      checked: e.price === "free",
+                      size: "small",
+                      sx: { p: 0, pr: 1, "& .MuiSvgIcon-fontSizeSmall": { fontSize: 16, color: "text.lighter" } },
+                      onChange: (m) => o(m.target.checked ? "free" : "")
+                    }
+                  ),
+                  label: l("blocklet.free")
                 }
               ),
-              label: n("blocklet.free")
-            }
-          ),
-          /* @__PURE__ */ t(
-            Q,
-            {
-              value: e.sortBy,
-              options: l,
-              title: c,
-              onChange: r,
-              icon: null,
-              prepend: null,
-              itemRender: null
-            }
-          )
-        ] })
+              /* @__PURE__ */ t(
+                X,
+                {
+                  value: e.sortBy,
+                  options: c,
+                  title: s,
+                  onChange: r,
+                  icon: null,
+                  prepend: null,
+                  itemRender: null
+                }
+              )
+            ]
+          }
+        )
       ]
     }
   );
 }
 function be() {
-  const { t: e } = C();
-  return /* @__PURE__ */ t(_e, { style: { textAlign: "center" }, variant: "subtitle2", children: e("blocklet.noResults") });
+  const { t: e } = B();
+  return /* @__PURE__ */ t(ze, { style: { textAlign: "center" }, variant: "subtitle2", children: e("blocklet.noResults") });
 }
-function O({ filterTip: e, keywordTip: r }) {
-  const { t: o, locale: n } = C(), a = () => n === "zh" ? "、" : " , ";
-  return /* @__PURE__ */ f($e, { className: "tips", children: [
+function j({ filterTip: e, keywordTip: r }) {
+  const { t: o, locale: l } = B(), n = () => l === "zh" ? "、" : " , ";
+  return /* @__PURE__ */ p($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(),
+    e && r && n(),
     r && /* @__PURE__ */ t("span", { children: o("blocklet.keywordTip") })
   ] });
 }
-O.propTypes = {
-  filterTip: i.bool,
-  keywordTip: i.bool
+j.propTypes = {
+  filterTip: k.bool,
+  keywordTip: k.bool
 };
-O.defaultProps = {
+j.defaultProps = {
   filterTip: !1,
   keywordTip: !1
 };
 function H({ primaryStart: e, primaryEnd: r, filter: o }) {
-  return /* @__PURE__ */ f(_e, { variant: "subtitle2", children: [
+  return /* @__PURE__ */ p(ze, { variant: "subtitle2", children: [
     /* @__PURE__ */ t("span", { children: e }),
-    /* @__PURE__ */ f("span", { className: "primary", children: [
+    /* @__PURE__ */ p("span", { className: "primary", children: [
       " ",
       o,
       " "
     ] }),
-    /* @__PURE__ */ f("span", { children: [
+    /* @__PURE__ */ p("span", { children: [
       r,
       " "
     ] })
   ] });
 }
 H.propTypes = {
-  primaryStart: i.string.isRequired,
-  primaryEnd: i.string.isRequired,
-  filter: i.string.isRequired
+  primaryStart: k.string.isRequired,
+  primaryEnd: k.string.isRequired,
+  filter: k.string.isRequired
 };
-function We({ blocklets: e, ...r }) {
+function qe({ blocklets: e, ...r }) {
   const {
     blockletRender: o,
-    errors: n,
-    loadings: a,
-    selectedCategory: l,
-    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: y,
-    onLoadMore: b
+    errors: l,
+    loadings: n,
+    selectedCategory: a,
+    getCategoryLocale: d,
+    filters: c,
+    t: s,
+    serverVersion: f,
+    hasNextPage: m,
+    loadMore: v,
+    endpoint: z,
+    minItemWidth: R
+  } = B(), S = !!a || !!c.price, [u] = _t({
+    loading: n.fetchBlockletsLoading || n.loadingMore,
+    hasNextPage: m,
+    onLoadMore: v
   });
-  if (n.fetchBlockletsError)
+  if (l.fetchBlockletsError)
     return /* @__PURE__ */ t(
-      Z,
+      ee,
       {
-        error: new Error(`Failed to fetch blocklets from ${$}: ${n.fetchBlockletsError.message}`)
+        error: new Error(`Failed to fetch blocklets from ${z}: ${l.fetchBlockletsError.message}`)
       }
     );
-  if (a.fetchBlockletsLoading)
-    return /* @__PURE__ */ t(Ve, { mt: 15 });
-  if (p.keyword && B && e.length === 0)
-    return /* @__PURE__ */ f(W, { children: [
+  if (n.fetchBlockletsLoading)
+    return /* @__PURE__ */ t(je, { mt: 15 });
+  if (c.keyword && S && e.length === 0)
+    return /* @__PURE__ */ p(U, { children: [
       /* @__PURE__ */ t(
         H,
         {
-          primaryStart: d("blocklet.noBlockletPart1"),
-          primaryEnd: d("blocklet.noBlockletPart2"),
-          filter: p.keyword
+          primaryStart: s("blocklet.noBlockletPart1"),
+          primaryEnd: s("blocklet.noBlockletPart2"),
+          filter: c.keyword
         }
       ),
-      /* @__PURE__ */ t(O, { keywordTip: !0, filterTip: !0 })
+      /* @__PURE__ */ t(j, { keywordTip: !0, filterTip: !0 })
     ] });
-  if (p.keyword && e.length === 0)
-    return /* @__PURE__ */ f(W, { children: [
+  if (c.keyword && e.length === 0)
+    return /* @__PURE__ */ p(U, { children: [
       /* @__PURE__ */ t(
         H,
         {
-          primaryStart: d("blocklet.noBlockletPart1"),
-          primaryEnd: d("blocklet.noBlockletPart2"),
-          filter: p.keyword
+          primaryStart: s("blocklet.noBlockletPart1"),
+          primaryEnd: s("blocklet.noBlockletPart2"),
+          filter: c.keyword
         }
       ),
-      /* @__PURE__ */ t(O, { keywordTip: !0 })
+      /* @__PURE__ */ t(j, { keywordTip: !0 })
     ] });
-  if (B && e.length === 0) {
-    const s = c(l);
-    return /* @__PURE__ */ f(W, { children: [
-      s ? /* @__PURE__ */ t(
+  if (S && e.length === 0) {
+    const x = d(a);
+    return /* @__PURE__ */ p(U, { children: [
+      x ? /* @__PURE__ */ t(
         H,
         {
-          primaryStart: d("blocklet.noCategoryResults1"),
-          primaryEnd: d("blocklet.noCategoryResults2"),
-          filter: s
+          primaryStart: s("blocklet.noCategoryResults1"),
+          primaryEnd: s("blocklet.noCategoryResults2"),
+          filter: x
         }
       ) : /* @__PURE__ */ t(be, {}),
-      /* @__PURE__ */ t(O, { filterTip: !0 })
+      /* @__PURE__ */ t(j, { filterTip: !0 })
     ] });
   }
-  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, {}) })
+  return e.length === 0 ? /* @__PURE__ */ t(U, { children: /* @__PURE__ */ t(be, {}) }) : /* @__PURE__ */ p(A, { children: [
+    /* @__PURE__ */ t(
+      C,
+      {
+        display: "grid",
+        gridTemplateColumns: `repeat(auto-fill, minmax(${R}px, 1fr))`,
+        p: "2px",
+        ...r,
+        gap: 2,
+        children: e.map((x) => /* @__PURE__ */ t(C, { "data-blocklet-did": x.did, sx: { minWidth: R }, children: o({ blocklet: x, blocklets: e, serverVersion: f }) }, x.did))
+      }
+    ),
+    m && /* @__PURE__ */ t(C, { height: 60, display: "flex", justifyContent: "center", py: 2, ref: u, children: /* @__PURE__ */ t(re, {}) })
   ] });
 }
-We.propTypes = {
-  blocklets: i.array.isRequired
+qe.propTypes = {
+  blocklets: k.array.isRequired
 };
-const W = D(It)`
+const U = _(Et)`
   text-align: center;
   margin-top: 100px;
   .primary {
@@ -1118,37 +1139,37 @@ const W = D(It)`
   }
 `;
 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);
+  const o = G(null), l = G(null), n = G(null), { storeApi: a, blockletRender: d, filters: c, endpoint: s, handleKeyword: f, t: m, serverVersion: v } = B(), z = async (h) => {
+    const { data: g } = await a.get(T.blockletsPath, { params: h }), w = g.dataList || [];
+    return w.length > 0 && w.unshift({ type: "more-result", total: g.total || 0 }), w;
+  }, R = (h) => {
+    f(h.state.query), h.setIsOpen(!1);
   }, S = () => {
     o.current && setTimeout(() => {
       const h = o.current.querySelector("input.bl-autocomplete-input");
       h && h.focus();
     });
-  }, s = (h) => {
+  }, u = (h) => {
     h.setIsOpen(!1), S();
-  }, k = ({ prevState: h, state: u }) => {
-    h.query !== u.query && (u.query || (w(), S()));
+  }, x = ({ prevState: h, state: g }) => {
+    h.query !== g.query && (g.query || (f(), S()));
   };
-  return At(
+  return Ot(
     "ctrl + k, command + k",
     (h) => (h.stopPropagation(), h.preventDefault(), S(), !1),
     { enableOnTags: ["INPUT"] }
-  ), q(() => {
+  ), W(() => {
     S();
-  }, [d]), q(() => {
+  }, [s]), W(() => {
     if (!o.current)
       return;
-    const h = zt({
+    const h = Mt({
       container: o.current,
-      renderer: { createElement: ut, Fragment: pt, render: () => {
+      renderer: { createElement: pt, Fragment: ht, render: () => {
       } },
-      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));
+      render({ children: g }, w) {
+        var P;
+        (!l.current || n.current !== w) && (n.current = w, (P = l.current) == null || P.unmount(), l.current = Nt(w)), l.current.render(r(g));
       },
       autoFocus: !0,
       openOnFocus: !1,
@@ -1162,53 +1183,53 @@ function ae({ onSelect: e, wrapChildren: r }) {
         detachedContainer: "bl-autocomplete-detached-container"
       },
       translations: {
-        clearButtonTitle: y("common.clear"),
-        detachedCancelButtonText: y("common.cancel"),
-        submitButtonTitle: y("common.search"),
-        detachedSearchButtonTitle: y("common.search")
+        clearButtonTitle: m("common.clear"),
+        detachedCancelButtonText: m("common.cancel"),
+        submitButtonTitle: m("common.search"),
+        detachedSearchButtonTitle: m("common.search")
       },
-      placeholder: y("common.searchStore"),
+      placeholder: m("common.searchStore"),
       initialState: {
-        query: p.keyword
+        query: c.keyword
       },
-      onStateChange(u) {
-        k(u);
+      onStateChange(g) {
+        x(g);
       },
-      onSubmit: B,
-      onReset(u) {
-        s(u);
+      onSubmit: R,
+      onReset(g) {
+        u(g);
       },
-      getSources({ query: u, state: x, ...z }) {
-        const A = {
+      getSources({ query: g, state: w, ...P }) {
+        const F = {
           sortBy: T.nameDesc,
           page: 1,
           pageSize: 10,
-          keyword: u
+          keyword: g
         };
-        return Ht([
+        return Kt([
           {
             sourceId: "blocklets",
             getItems() {
-              return $(A);
+              return z(F);
             },
             // 选中后填充 搜索框中值
-            getItemInputValue({ item: _ }) {
-              return _.type === "more-result" ? u : _.title;
+            getItemInputValue({ item: y }) {
+              return y.type === "more-result" ? g : y.title;
             },
             // 选中或者点击自动完成列表中的 item 时触发
-            onSelect({ event: _, item: R }) {
-              return R.type === "more-result" ? (z.setIsOpen(!1), w(u)) : _.type === "keydown" ? w(R.title) : e({
-                blocklet: R,
-                detailUrl: wt(d, "/blocklets", R.did),
-                storeUrl: d
+            onSelect({ event: y, item: D }) {
+              return D.type === "more-result" ? (P.setIsOpen(!1), f(g)) : y.type === "keydown" ? f(D.title) : e({
+                blocklet: D,
+                detailUrl: Bt(s, "/blocklets", D.did),
+                storeUrl: s
               });
             },
             templates: {
-              item({ item: _ }) {
-                return _.type === "more-result" ? /* @__PURE__ */ t("div", { children: y("autocomplete.expandResult", { name: u, number: _.total.toLocaleString() }) }) : c({ blocklet: _, autocompleteSetters: z, serverVersion: b });
+              item({ item: y }) {
+                return y.type === "more-result" ? /* @__PURE__ */ t("div", { children: m("autocomplete.expandResult", { name: g, number: y.total.toLocaleString() }) }) : d({ blocklet: y, autocompleteSetters: P, serverVersion: v });
               },
               noResults() {
-                return y("blocklet.noResults");
+                return m("blocklet.noResults");
               }
             }
           }
@@ -1218,7 +1239,7 @@ function ae({ onSelect: e, wrapChildren: r }) {
     return () => {
       h.destroy();
     };
-  }, [p, c]), /* @__PURE__ */ f(F, { children: [
+  }, [c, d]), /* @__PURE__ */ p(A, { children: [
     /* @__PURE__ */ t(
       we,
       {
@@ -1241,45 +1262,45 @@ function ae({ onSelect: e, wrapChildren: r }) {
   ] });
 }
 ae.propTypes = {
-  onSelect: i.func.isRequired,
-  wrapChildren: i.func
+  onSelect: k.func.isRequired,
+  wrapChildren: k.func
 };
 ae.defaultProps = {
   wrapChildren: (e) => e
 };
 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();
+  const { filters: o, handleKeyword: l } = B(), [n, a] = q(o.keyword || ""), d = yt(l, { wait: 300 }), c = (f) => {
+    const { value: m } = f.target;
+    a(m), d.run(m);
+  }, s = () => {
+    a(""), l();
   };
-  return q(() => {
-    l(o.keyword || "");
+  return W(() => {
+    a(o.keyword || "");
   }, [o.keyword]), /* @__PURE__ */ t(
-    sr,
+    fr,
     {
       inputProps: {
         "data-cy": "search-blocklet"
       },
-      startAdornment: /* @__PURE__ */ t(he, { position: "start", children: /* @__PURE__ */ t(cr, {}) }),
-      onChange: p,
+      startAdornment: /* @__PURE__ */ t(me, { position: "start", children: /* @__PURE__ */ t(gr, {}) }),
+      onChange: c,
       placeholder: e,
-      value: a,
+      value: n,
       title: e,
       "data-cy": "search",
-      endAdornment: a && /* @__PURE__ */ t(he, { position: "end", children: /* @__PURE__ */ t(dr, { "data-cy": "search-delete", onClick: d }) }),
+      endAdornment: n && /* @__PURE__ */ t(me, { position: "end", children: /* @__PURE__ */ t(yr, { "data-cy": "search-delete", onClick: s }) }),
       ...r
     }
   );
 }
 ie.propTypes = {
-  placeholder: i.string
+  placeholder: k.string
 };
 ie.defaultProps = {
   placeholder: "Type to search..."
 };
-const sr = D(at)`
+const fr = _(it)`
   background-color: ${(e) => e.theme.palette.grey[50]};
   font-size: 14px;
   border-radius: 6px;
@@ -1296,22 +1317,23 @@ const sr = D(at)`
       color: transparent;
     }
   }
-`, cr = D(Ft)`
+`, gr = _(jt)`
   color: ${(e) => e.theme.palette.grey[500]};
   font-size: 28px;
   @media (max-width: ${(e) => e.theme.breakpoints.values.md}px) {
     font-size: 24px;
   }
-`, dr = D(Re)`
+`, yr = _(Re)`
   color: ${(e) => e.theme.palette.grey[500]};
   font-size: 16px;
   cursor: pointer;
 `;
-function ur() {
-  const { filters: e, handleSearchSelect: r, t: o, wrapChildren: n, baseSearch: a } = C(), { toggleOpen: l } = oe(), c = !!e.keyword;
-  return /* @__PURE__ */ f(
-    I,
+function br() {
+  const { filters: e, handleSearchSelect: r, t: o, wrapChildren: l, baseSearch: n, layout: a } = B(), { toggleOpen: d } = ne(), c = !!e.keyword;
+  return a.showTitle || a.showSearch ? /* @__PURE__ */ p(
+    L,
     {
+      className: "title-bar",
       direction: "row",
       alignItems: "center",
       justifyContent: "space-between",
@@ -1322,14 +1344,14 @@ function ur() {
       mb: { xs: 0, md: 3 },
       children: [
         /* @__PURE__ */ t(
-          G,
+          Q,
           {
-            xs: !c && /* @__PURE__ */ t(Oe, { onClick: () => l(!0), children: /* @__PURE__ */ t($t, {}) }),
-            md: /* @__PURE__ */ t(L, { variant: "h1", children: o("common.title") })
+            xs: !c && /* @__PURE__ */ t(Ne, { onClick: () => d(!0), children: /* @__PURE__ */ t(Dt, {}) }),
+            md: a.showTitle ? /* @__PURE__ */ t($, { variant: "h1", children: o("common.title") }) : /* @__PURE__ */ t(C, {})
           }
         ),
-        /* @__PURE__ */ t(
-          v,
+        a.showSearch ? /* @__PURE__ */ t(
+          C,
           {
             width: { xs: c ? "100%" : 300, md: 300 },
             className: "filter-bar",
@@ -1338,37 +1360,37 @@ function ur() {
               "& .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: o("common.searchStore"), sx: { pl: 1.5 } }) : /* @__PURE__ */ t(ae, { onSelect: r, wrapChildren: n })
+            children: n ? /* @__PURE__ */ t(ie, { className: "bl-search-container", placeholder: o("common.searchStore"), sx: { pl: 1.5 } }) : /* @__PURE__ */ t(ae, { onSelect: r, wrapChildren: l })
           }
-        )
+        ) : null
       ]
     }
-  );
+  ) : 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(ir, {}),
-        /* @__PURE__ */ t(We, { blocklets: e, height: "100%" })
-      ] }) : /* @__PURE__ */ t(ar, {}) })
+function xr() {
+  const { blockletList: e, total: r, filters: o, t: l } = B(), n = o.category || o.keyword || o.price;
+  return /* @__PURE__ */ t(qt, { children: /* @__PURE__ */ p(st, { FallbackComponent: ee, children: [
+    /* @__PURE__ */ t(br, {}),
+    /* @__PURE__ */ p(C, { display: "flex", height: "100%", children: [
+      /* @__PURE__ */ t(sr, {}),
+      /* @__PURE__ */ t(L, { height: "100%", position: "relative", flex: 1, overflow: "visible", children: n ? /* @__PURE__ */ p(A, { children: [
+        o.keyword ? /* @__PURE__ */ p(A, { children: [
+          /* @__PURE__ */ t(Q, { xs: /* @__PURE__ */ t(Me, {}), md: null }),
+          a()
+        ] }) : /* @__PURE__ */ t(mr, {}),
+        /* @__PURE__ */ t(qe, { blocklets: e, height: "100%" })
+      ] }) : /* @__PURE__ */ t(hr, {}) })
     ] })
   ] }) });
-  function l() {
-    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 a() {
+    return /* @__PURE__ */ p(L, { direction: "row", alignItems: "center", justifyContent: "space-between", mb: 2, mt: { xs: 2, md: 0 }, children: [
+      /* @__PURE__ */ t($, { variant: "h3", children: l("blocklet.search", { keyword: o.keyword }) }),
+      /* @__PURE__ */ t($, { variant: "body1", color: "text.lighter", fontSize: 13, children: l("blocklet.resultCount", { count: r }) })
     ] });
   }
 }
-function Ue(e) {
-  const r = xe(), o = Wt(r.palette.primary.main), n = {
+function io(e) {
+  const r = xe(), o = Yt(r.palette.primary.main), l = {
     autocomplete: ke`
       :root {
         --aa-detached-media-query: (max-width: ${r.breakpoints.values.md}px) !important;
@@ -1407,13 +1429,11 @@ function Ue(e) {
       }
     `
   };
-  return /* @__PURE__ */ f(ne, { ...e, children: [
-    /* @__PURE__ */ t(we, { styles: n.autocomplete }),
-    /* @__PURE__ */ t(pr, {})
+  return /* @__PURE__ */ p(or, { ...e, children: [
+    /* @__PURE__ */ t(we, { styles: l.autocomplete }),
+    /* @__PURE__ */ t(xr, {})
   ] });
 }
-Ue.propTypes = Ae;
-Ue.defaultProps = Fe;
 export {
-  Ue as default
+  io as default
 };