@blocklet/list 0.14.5 → 0.14.7

package/lib/index.es.js

@@ -1,57 +1,56 @@
-import { jsx as t, jsxs as p, Fragment as z } from "react/jsx-runtime";
-import { styled as E, useTheme as xe } from "@arcblock/ux/lib/Theme";
-import { Global as we, css as ke } from "@emotion/react";
+import { jsx as t, jsxs as f, Fragment as M } from "react/jsx-runtime";
+import { styled as E, useTheme as fe } from "@arcblock/ux/lib/Theme";
+import { Box as v, Autocomplete as Qe, TextField as Xe, OutlinedInput as Ke, InputAdornment as ae, Button as J, useTheme as ge, useMediaQuery as O, Drawer as Ye, CircularProgress as Z, MenuList as Je, SvgIcon as Ze, Popper as et, Grow as tt, Paper as rt, ClickAwayListener as ot, MenuItem as nt, Stack as z, FormControlLabel as ye, Checkbox as xe, Typography as L, Link as lt, Grid as se, Chip as it, createTheme as at, ThemeProvider as st } from "@mui/material";
+import ct from "lodash/merge";
 import { ErrorFallback as ee } from "@arcblock/ux/lib/ErrorBoundary";
-import { Button as te, useTheme as ve, useMediaQuery as D, 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 I, FormControlLabel as Ce, Checkbox as Se, Typography as L, 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 q, useMemo as M, useContext as Te, 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 Ie } from "@blocklet/js-sdk";
-import mt from "lodash/orderBy";
-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 { ErrorBoundary as dt } from "react-error-boundary";
+import ut from "@iconify-icons/tabler/compass";
+import { Icon as be } from "@iconify/react";
+import we from "@mui/icons-material/Close";
+import { createContext as ke, useState as F, useMemo as D, useContext as ve, useCallback as X, useEffect as N, useRef as K, forwardRef as pt, memo as ht } from "react";
+import { createAxios as Ce } from "@blocklet/js-sdk";
+import mt from "lodash/omitBy";
+import ft from "lodash/orderBy";
+import { useRequest as U, useDebounceFn as Se, useInfiniteScroll as gt, useReactive as yt } from "ahooks";
+import "color";
 import "lodash/cloneDeep";
-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 { parseURL as xt, parseQuery as bt, parseFilename as wt, stringifyParsedURL as kt, withQuery as Pe, joinURL as ce } from "ufo";
+import de from "flat";
+import Be from "@arcblock/ux/lib/Avatar";
+import Y from "@mui/icons-material/Search";
+import vt from "@mui/material/CircularProgress";
+import { useHotkeys as Ct } from "react-hotkeys-hook";
 import w from "prop-types";
-import Rt from "@mui/icons-material/KeyboardArrowDown";
-import Pt from "lodash/isEmpty";
-import Fe from "@mui/material/Box";
-import Tt from "@arcblock/ux/lib/Avatar";
-import It from "@arcblock/ux/lib/Img";
-import Lt from "@iconify-icons/tabler/cloud-download";
-import Ft from "@mui/icons-material/ChevronLeft";
-import $t from "@mui/icons-material/ChevronRight";
-import _t from "react-image-gallery";
+import St from "@mui/icons-material/Check";
+import Pt from "@mui/icons-material/KeyboardArrowDown";
+import Bt from "lodash/isEmpty";
+import Te from "@mui/material/Box";
+import Tt from "@arcblock/ux/lib/Img";
+import Rt from "@iconify-icons/tabler/cloud-download";
+import It from "@mui/icons-material/ChevronLeft";
+import Lt from "@mui/icons-material/ChevronRight";
+import At from "react-image-gallery";
 import "react-image-gallery/styles/css/image-gallery.css";
 import zt from "@arcblock/ux/lib/Empty";
-import At from "react-infinite-scroll-hook";
-import $e from "@mui/material/Typography";
+import _t from "react-infinite-scroll-hook";
+import Re from "@mui/material/Typography";
+import Ft from "json-stable-stringify";
 import Et from "@mui/icons-material/Menu";
-import { createRoot as Nt } from "react-dom/client";
-import { autocomplete as Dt } from "@algolia/autocomplete-js";
-import { useHotkeys as Mt } from "react-hotkeys-hook";
-import Ot from "@mui/icons-material/Search";
-import "@algolia/autocomplete-theme-classic/dist/theme.css";
-const _e = Pe({
+const Ie = ke({
   open: !1,
   toggleOpen: (e) => {
   }
 });
-function jt({ children: e }) {
-  const [r, o] = q(!1), l = (a) => {
+function Ot({ children: e }) {
+  const [r, o] = F(!1), l = (a) => {
     o(a ?? !a);
-  }, n = M(() => ({ open: r, toggleOpen: l }), [r]);
-  return /* @__PURE__ */ t(_e.Provider, { value: n, children: e });
+  }, n = D(() => ({ open: r, toggleOpen: l }), [r]);
+  return /* @__PURE__ */ t(Ie.Provider, { value: n, children: e });
 }
-function ne() {
-  return Te(_e);
+function te() {
+  return ve(Ie);
 }
-const T = {
+const I = {
   nameAsc: "title",
   nameDesc: "title",
   popularity: "stats.downloads",
@@ -65,32 +64,13 @@ const T = {
   explorePath: "/api/blocklets/explore",
   exploreDidsPath: "/api/blocklets/dids",
   cacheSize: 100
-}, qt = (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: a,
-      pageSize: d
-    };
-    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: (n) => n ? n.page * n.pageSize >= n.total : !1,
-    reloadDeps: [e, xt(r)],
-    onError: l
-  }
-), Wt = (e) => oe(
+}, Dt = (e) => U(
   async () => {
-    const { data: r } = await e.get(T.categoriesPath);
+    const { data: r } = await e.get(I.categoriesPath);
     return Array.isArray(r) ? r : [];
   },
   { manual: !0 }
-), ze = (e) => [
+), Le = (e) => [
   {
     name: e("sort.popularity"),
     value: "popularity"
@@ -103,40 +83,32 @@ const T = {
   //   name: t('sort.rating'),
   //   value: 'rating',
   // },
-], Vt = (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;
+], Ae = (e, r, o) => {
+  var g, h;
+  const l = xt(e), n = bt(l.search);
+  if ((g = wt(e, { strict: !0 })) == null ? void 0 : g.endsWith(".gif"))
+    return n.imageFilter ? kt({ ...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, {
-    ...c || s ? { imageFilter: "resize", w: c, h: s } : {},
+  const d = o || ((h = window.blocklet) == null ? void 0 : h.version), { w: u, h: i } = typeof r == "object" ? { w: r.w, h: r.h } : { w: r, h: r };
+  return Pe(e, {
+    ...u || i ? { imageFilter: "resize", w: u, h: i } : {},
     v: d
   });
-}, Ut = (e) => [
+}, Mt = (e) => [
   { name: e("blocklet.free"), value: "free" },
   { name: e("blocklet.payment"), value: "payment" }
-], Gt = (e = [], r = "en") => e.map((o) => ({ name: o.locales[r] || o.locales.en, value: o._id })), Ht = (e, r) => (
+], Nt = (e = [], r = "en") => e.map((o) => ({ name: o.locales[r] || o.locales.en, value: o._id })), $t = (e, r) => (
   // eslint-disable-next-line no-prototype-builtins
   e == null ? void 0 : e.replace(/{(\w*)}/g, (o, l) => r.hasOwnProperty(l) ? r[l] : "")
-), Qt = () => window.innerWidth <= 600, Xt = (e) => wt(e).rgb().object();
-function Yt(e, r) {
-  let o;
-  return function(...n) {
-    return o && clearTimeout(o), new Promise((a) => {
-      o = setTimeout(() => a(e(...n)), r);
-    });
-  };
-}
-const Jt = Yt((e) => Promise.resolve(e), 300), Kt = {
+), Wt = () => window.innerWidth <= 600, jt = {
   common: {
     title: "Blocklet Store",
     searchStore: "Search Blocklet",
     showResources: "Show resources",
     price: "Price",
     category: "Category",
+    categories: "Categories",
     resourceType: "Resource Type",
     clear: "Clear",
     cancel: "Cancel",
@@ -178,13 +150,14 @@ const Jt = Yt((e) => Promise.resolve(e), 300), Kt = {
   autocomplete: {
     expandResult: 'View all search results for "{name}"'
   }
-}, Zt = {
+}, qt = {
   common: {
     title: "Blocklet 商店",
     searchStore: "搜索 Blocklet",
     showResources: "显示资源型应用",
     price: "价格",
     category: "类别",
+    categories: "类别",
     resourceType: "资源类型",
     clear: "清除",
     cancel: "取消",
@@ -226,37 +199,32 @@ const Jt = Yt((e) => Promise.resolve(e), 300), Kt = {
   autocomplete: {
     expandResult: "查看 “{name}” 的所有搜索结果"
   }
-}, K = {
-  en: fe(Kt),
-  zh: fe(Zt)
-}, Ae = (e, r) => {
+}, Q = {
+  en: de(jt),
+  zh: de(qt)
+}, ze = (e, r) => {
   const o = {};
   return e && (o["x-blocklet-server-version"] = e), r && (o["x-blocklet-store-version"] = r), o;
-}, er = (e) => (r, o) => {
-  const l = K[e] ? K[e][r] : K.en[r];
-  return Ht(l, o) || r;
-}, Ee = {
+}, Ut = (e) => (r, o) => {
+  const l = Q[e] ? Q[e][r] : Q.en[r];
+  return $t(l, o) || r;
+}, _e = {
   errors: {
-    fetchBlockletsError: null,
     fetchCategoriesError: null
   },
   loadings: {
-    fetchBlockletsLoading: !1,
-    fetchCategoriesLoading: !1,
-    loadingMore: !1
+    fetchCategoriesLoading: !1
   },
   endpoint: "",
-  blockletList: [],
   wrapChildren: () => null,
   t: (e) => e,
   storeVersion: "",
-  minItemWidth: 400,
+  minItemWidth: 350,
   serverVersion: "",
   filters: {},
   layout: {},
   selectedCategory: void 0,
   categoryList: [],
-  total: 0,
   blockletRender: () => null,
   locale: "en",
   categoryOptions: [],
@@ -266,7 +234,6 @@ const Jt = Yt((e) => Promise.resolve(e), 300), Kt = {
   showResourcesSwitch: !1,
   showCategory: !1,
   tagFilters: [],
-  hasNextPage: !1,
   onFilterChange: () => {
   },
   handleSort: () => {
@@ -283,182 +250,328 @@ const Jt = Yt((e) => Promise.resolve(e), 300), Kt = {
   },
   handlePage: () => {
   },
-  handleSwitchShowResources: () => {
+  developerName: "",
+  updateDeveloperName: () => {
   },
-  loadMore: () => {
+  handleSwitchShowResources: () => {
   },
   getCategoryLocale: () => null,
-  developerName: "",
   handleSearchSelect: () => {
   }
-}, Ne = Pe(Ee), { Provider: tr, Consumer: no } = Ne;
-function rr(e) {
-  var ue;
+}, Fe = ke(_e), { Provider: Vt, Consumer: Yr } = Fe;
+function Ht(e) {
   const {
     locale: r = "zh",
     filters: o = {},
     serverVersion: l = "",
     onFilterChange: n = () => {
     },
-    onSearchSelect: a = ({ detailUrl: i }) => {
-      window.location.href = i;
+    onSearchSelect: a = ({ detailUrl: p }) => {
+      window.location.href = p;
     },
-    minItemWidth: d = 400,
-    queryFilter: c = !0,
-    layout: s = {},
-    wrapChildren: f = (i) => i,
-    extraFilter: m = (i) => i,
-    baseSearch: k = !1,
-    fetchCategoryDelay: F = 0,
+    minItemWidth: d = 350,
+    queryFilter: u = !0,
+    layout: i = {},
+    wrapChildren: g = (p) => p,
+    extraFilter: h = (p) => p,
+    baseSearch: m = !1,
+    fetchCategoryDelay: C = 0,
     showResourcesSwitch: R = !1,
-    showCategory: S = !0,
-    tagFilters: u = [],
-    children: x,
-    storeVersion: h,
-    endpoint: g,
-    blockletRender: v
-  } = e, _ = Ae(l, h), $ = M(() => Ie({ baseURL: g, headers: _ }), [g]), y = { sortBy: "popularity", sortDirection: "desc", ...o };
-  !y.category && !s.showExplore && (y.category = "All");
-  const N = y.category, We = gt({
-    currentPage: T.currentPage,
-    pageSize: Qt() ? T.mobilePageSize : T.pageSize,
-    defaultCurrentPage: T.defaultCurrentPage
-  }), [Ve, Ue] = q(null), A = qt($, y, We, Ue), {
-    data: Y = [],
-    error: Ge,
-    loading: He,
-    run: se
-  } = Wt($), J = M(() => {
-    const i = mt(Y, [(P) => P.name], ["asc"]), b = i.findIndex((P) => P.name === "All" || P.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 = A.data) == null ? void 0 : i.list) || []) || [];
-    },
-    [A.data, m]
-  ), de = Z(er(r), [r]), Qe = M(() => Gt(J, r), [J, r]), Xe = Ut(de), Ye = {
-    errors: { fetchBlockletsError: Ve, fetchCategoriesError: Ge },
+    showCategory: A = !0,
+    tagFilters: c = [],
+    children: k,
+    storeVersion: x,
+    endpoint: B,
+    blockletRender: s
+  } = e, y = ze(l, x), T = D(() => Ce({ baseURL: B, headers: y }), [B]), P = { sortBy: "popularity", sortDirection: "desc", ...o };
+  !P.category && !i.showExplore && (P.category = "All");
+  const [Ne, $e] = F(""), We = P.category, {
+    data: H = [],
+    error: je,
+    loading: qe,
+    run: le
+  } = Dt(T), G = D(() => {
+    const p = ft(H, [(_) => _.name], ["asc"]), b = p.findIndex((_) => _.name === "All" || _.locales.en === "All");
+    return b > -1 ? [{ ...p[b], _id: "All" }, ...p.slice(0, b), ...p.slice(b + 1)] : p;
+  }, [H]), ie = X(Ut(r), [r]), Ue = D(() => Nt(G, r), [G, r]), Ve = Mt(ie), He = {
+    errors: { fetchCategoriesError: je },
     loadings: {
-      fetchBlockletsLoading: A.loading,
-      fetchCategoriesLoading: He,
-      loadingMore: A.loadingMore
+      fetchCategoriesLoading: qe
     },
-    endpoint: g,
-    queryFilter: c,
+    extraFilter: h,
+    endpoint: B,
+    queryFilter: u,
     layout: {
-      showExplore: s.showExplore ?? !1,
-      showCategory: s.showCategory ?? !0,
-      showTitle: s.showTitle ?? !0,
-      showSearch: s.showSearch ?? !0
+      showExplore: i.showExplore ?? !1,
+      showCategory: i.showCategory ?? !0,
+      showTitle: i.showTitle ?? !0,
+      showSearch: i.showSearch ?? !0
     },
     minItemWidth: d,
-    blockletList: ce,
-    total: ((ue = A.data) == null ? void 0 : ue.total) || 0,
-    wrapChildren: f,
-    t: de,
-    storeVersion: h,
+    wrapChildren: g,
+    t: ie,
+    storeVersion: x,
     serverVersion: l,
-    filters: y,
-    selectedCategory: N,
-    categoryList: J,
-    blockletRender: v,
+    filters: P,
+    selectedCategory: We,
+    categoryList: G,
+    blockletRender: s,
     locale: r,
-    categoryOptions: Qe,
-    priceOptions: Xe,
-    storeApi: $,
-    baseSearch: k,
+    categoryOptions: Ue,
+    priceOptions: Ve,
+    storeApi: T,
+    baseSearch: m,
     showResourcesSwitch: R,
-    showCategory: S,
-    tagFilters: u,
-    hasNextPage: !A.noMore,
+    showCategory: A,
+    tagFilters: c,
     onFilterChange: n,
-    cleanFilter: (i) => {
-      const b = i ? bt(y, (P, O) => i == null ? void 0 : i.includes(O)) : {};
+    cleanFilter: (p) => {
+      const b = p ? mt(P, (_, Ge) => p == null ? void 0 : p.includes(Ge)) : {};
       n(b);
     },
-    handleSort: (i) => {
-      const b = { ...y, sortBy: i, sortDirection: i === "nameAsc" ? "asc" : "desc" };
+    handleSort: (p) => {
+      const b = { ...P, sortBy: p, sortDirection: p === "nameAsc" ? "asc" : "desc" };
       n(b);
     },
-    handleKeyword: (i) => {
-      const b = { ...y, category: void 0, keyword: i || void 0 };
+    handleKeyword: (p) => {
+      const b = { ...P, category: void 0, keyword: p || void 0 };
       n(b);
     },
-    handlePrice: (i) => {
-      const b = { ...y, price: i === y.price ? void 0 : i };
+    handlePrice: (p) => {
+      const b = { ...P, price: p === P.price ? void 0 : p };
       n(b);
     },
-    handleCategory: (i) => {
-      const b = i === "all" || i === y.category ? "" : i, P = { ...y, category: b };
-      n(P);
+    handleCategory: (p) => {
+      const b = p === "all" || p === P.category ? "" : p, _ = { ...P, category: b };
+      n(_);
     },
-    handleDeveloper: (i) => {
-      const b = { ...y, owner: i || void 0 };
+    handleDeveloper: (p) => {
+      const b = { ...P, owner: p || void 0 };
       n(b);
     },
-    handlePage: (i) => {
-      const b = { ...y, currentPage: i };
+    handlePage: (p) => {
+      const b = { ...P, currentPage: p };
       n(b);
     },
     handleSwitchShowResources: () => {
-      const i = { ...y };
-      n(i);
+      const p = { ...P };
+      n(p);
     },
-    loadMore: A.loadMore,
-    getCategoryLocale: (i) => {
-      if (!i)
+    getCategoryLocale: (p) => {
+      if (!p)
         return null;
-      const b = Y.find((P) => P._id === i);
+      const b = H.find((_) => _._id === p);
       return b ? b.locales[r] || b.locales.en : null;
     },
     get developerName() {
-      var b, P;
-      const i = ce.find((O) => {
-        var pe;
-        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) || ((P = i == null ? void 0 : i.author) == null ? void 0 : P.name) || "";
+      return Ne;
     },
+    updateDeveloperName: $e,
     handleSearchSelect: a
   };
-  return W(() => {
-    setTimeout(se, F || 0);
-  }, [g, se, F]), /* @__PURE__ */ t(tr, { value: Ye, children: x });
+  return N(() => {
+    setTimeout(le, C || 0);
+  }, [B, le, C]), /* @__PURE__ */ t(Vt, { value: He, children: k });
+}
+function S() {
+  const e = ve(Fe);
+  return e || _e;
+}
+const ue = "__FREE_TEXT__";
+function Gt() {
+  const e = K(null), r = K(!1), [o, l] = F(!1), [n, a] = F(""), { storeApi: d, filters: u, endpoint: i, handleKeyword: g, t: h, handleSearchSelect: m } = S(), C = async (s) => {
+    const { data: y } = await d.get(I.blockletsPath, { params: s });
+    return y.dataList || [];
+  }, { loading: R, data: A, run: c } = U(
+    (s) => s ? C({
+      sortBy: I.nameDesc,
+      page: 1,
+      pageSize: 10,
+      keyword: s
+    }) : Promise.resolve([]),
+    {
+      manual: !0
+    }
+  );
+  N(() => {
+    c(u.keyword), a(u.keyword || "");
+  }, [u.keyword, c]), Ct(
+    "ctrl + k, command + k",
+    (s) => {
+      var y, T;
+      return s.stopPropagation(), s.preventDefault(), (T = (y = e.current) == null ? void 0 : y.querySelector("input")) == null || T.focus(), !1;
+    },
+    { enableOnTags: ["INPUT"] }
+  );
+  const k = Se((s) => c(s), { wait: 300 }), x = { name: ue, title: n, did: "" };
+  return /* @__PURE__ */ t(v, { overflow: "hidden", children: /* @__PURE__ */ t(
+    Qe,
+    {
+      ref: e,
+      open: !!n && o,
+      size: "small",
+      onOpen: () => {
+        l(!0);
+      },
+      onClose: (s, y) => {
+        l(!1), y === "selectOption" && !r.current && g(n);
+      },
+      options: n ? [x, ...A || []] : [],
+      renderOption: (s, y) => /* @__PURE__ */ f(v, { component: "li", ...s, gap: 1, children: [
+        B(y),
+        y.title
+      ] }),
+      value: x,
+      onChange: (s, y) => {
+        y != null && y.did && (r.current = !0, m({
+          blocklet: y,
+          detailUrl: ce(i, "blocklets", y.did),
+          storeUrl: i
+        }));
+      },
+      inputValue: n,
+      onInputChange: (s, y, T) => {
+        a(y), r.current = !1, k.run(y), T === "clear" && g("");
+      },
+      isOptionEqualToValue: (s, y) => s.name === y.name,
+      getOptionLabel: (s) => s.title,
+      getOptionKey: (s) => s.name,
+      noOptionsText: h("blocklet.noResults"),
+      loading: R,
+      autoHighlight: !0,
+      forcePopupIcon: !1,
+      slotProps: { paper: { sx: { mt: 0.5, minWidth: "100%", width: "fit-content" } } },
+      sx: {
+        bgcolor: "#F9FAFB",
+        borderRadius: "8px",
+        overflow: "hidden",
+        ".MuiAutocomplete-clearIndicator": { visibility: n ? "visible" : "hidden" },
+        ".MuiOutlinedInput-notchedOutline": {
+          borderRadius: "8px",
+          borderColor: "transparent"
+        },
+        "&&:hover .MuiOutlinedInput-notchedOutline, &&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+          borderColor: "divider"
+        }
+      },
+      renderInput: (s) => /* @__PURE__ */ t(
+        Xe,
+        {
+          ...s,
+          InputProps: {
+            ...s.InputProps,
+            autoFocus: !0,
+            placeholder: h("common.searchStore"),
+            className: "bl-autocomplete-input",
+            value: n,
+            startAdornment: /* @__PURE__ */ t(v, { sx: { display: "flex", pl: 0.5, alignItems: "center", color: "text.lighter" }, children: R ? /* @__PURE__ */ t(vt, { color: "inherit", size: 16 }) : /* @__PURE__ */ t(Y, { sx: { fontSize: 16 } }) })
+          }
+        }
+      ),
+      filterOptions: (s) => s
+    }
+  ) });
+  function B(s) {
+    if (s.name === ue)
+      return /* @__PURE__ */ t(v, { width: 20, display: "flex", justifyContent: "center", alignItems: "center", children: /* @__PURE__ */ t(Y, { sx: { fontSize: 16 } }) });
+    let y = "";
+    return s.logo && (y = ce(i, "assets", s.did, Ae(s.logo, 20, s.version))), /* @__PURE__ */ t(Be, { src: y, size: 20 });
+  }
 }
-function B() {
-  const e = Te(Ne);
-  return e || Ee;
+function re({ placeholder: e, ...r }) {
+  const { filters: o, handleKeyword: l } = S(), [n, a] = F(o.keyword || ""), d = Se(l, { wait: 300 }), u = (g) => {
+    const { value: h } = g.target;
+    a(h), d.run(h);
+  }, i = () => {
+    a(""), l();
+  };
+  return N(() => {
+    a(o.keyword || "");
+  }, [o.keyword]), /* @__PURE__ */ t(
+    Qt,
+    {
+      inputProps: {
+        "data-cy": "search-blocklet"
+      },
+      startAdornment: /* @__PURE__ */ t(ae, { position: "start", children: /* @__PURE__ */ t(Xt, {}) }),
+      onChange: u,
+      placeholder: e,
+      value: n,
+      title: e,
+      "data-cy": "search",
+      endAdornment: n && /* @__PURE__ */ t(ae, { position: "end", children: /* @__PURE__ */ t(Kt, { "data-cy": "search-delete", onClick: i }) }),
+      ...r
+    }
+  );
 }
-function De({
+re.propTypes = {
+  placeholder: w.string
+};
+re.defaultProps = {
+  placeholder: "Type to search..."
+};
+const Qt = E(Ke)`
+  background-color: ${(e) => e.theme.palette.grey[50]};
+  font-size: 14px;
+  border-radius: 6px;
+  width: 100%;
+  .MuiInputBase-input {
+    padding: 8px 0 8px 10px;
+  }
+  .MuiOutlinedInput-notchedOutline {
+    border: none;
+  }
+  .Mui-focused {
+    background-color: #f6f6f6;
+    .MuiInputBase-input::placeholder {
+      color: transparent;
+    }
+  }
+`, Xt = E(Y)`
+  color: ${(e) => e.theme.palette.grey[500]};
+  font-size: 28px;
+  @media (max-width: ${(e) => e.theme.breakpoints.values.md}px) {
+    font-size: 24px;
+  }
+`, Kt = E(we)`
+  color: ${(e) => e.theme.palette.grey[500]};
+  font-size: 16px;
+  cursor: pointer;
+`;
+function Ee({
   children: e,
   onClick: r,
-  size: o = 32
+  size: o = 32,
+  ...l
 }) {
   return /* @__PURE__ */ t(
-    te,
+    J,
     {
+      ...l,
       onClick: r,
       variant: "outlined",
-      sx: {
-        minWidth: o,
-        height: o,
-        p: 0,
-        borderColor: "divider",
-        "&:hover": {
-          borderColor: "divider"
+      sx: [
+        {
+          minWidth: o,
+          height: o,
+          p: 0,
+          borderColor: "divider",
+          "&:hover": {
+            borderColor: "divider"
+          },
+          borderRadius: 2,
+          color: "text.secondary"
         },
-        borderRadius: 2,
-        color: "text.secondary"
-      },
+        ...Array.isArray(l.sx) ? l.sx : [l.sx]
+      ],
       children: e
     }
   );
 }
-function V(e, r) {
+function W(e, r) {
   return e === void 0 ? r : e;
 }
-function Q({
+function oe({
   xs: e,
   sm: r,
   md: o,
@@ -466,99 +579,96 @@ function Q({
   xl: n,
   exact: a
 }) {
-  const d = ve(), c = D(d.breakpoints.down("sm")), s = D(d.breakpoints.between("sm", "md")), f = D(d.breakpoints.between("md", "lg")), m = D(d.breakpoints.between("lg", "xl"));
+  const d = ge(), u = O(d.breakpoints.down("sm")), i = O(d.breakpoints.between("sm", "md")), g = O(d.breakpoints.between("md", "lg")), h = O(d.breakpoints.between("lg", "xl"));
   if (a)
-    return c ? e || null : s ? r || null : f ? o || null : m ? l || null : n || null;
-  let k = e;
-  return c || (k = V(r, k), s) || (k = V(o, k), f) || (k = V(l, k), m) ? k : V(n, k);
+    return u ? e || null : i ? r || null : g ? o || null : h ? l || null : n || null;
+  let m = e;
+  return u || (m = W(r, m), i) || (m = W(o, m), g) || (m = W(l, m), h) ? m : W(n, m);
 }
-function or({ children: e }) {
-  const { open: r, toggleOpen: o } = ne();
+function Yt({ children: e }) {
+  const { open: r, toggleOpen: o } = te();
   return /* @__PURE__ */ t(
-    Q,
+    oe,
     {
-      xs: /* @__PURE__ */ t(Je, { open: r, onClose: () => o(!1), children: e }),
-      md: /* @__PURE__ */ t(C, { children: e })
+      xs: /* @__PURE__ */ t(Ye, { open: r, onClose: () => o(!1), children: e }),
+      md: /* @__PURE__ */ t(v, { children: e })
     }
   );
 }
-const nr = E(te)`
+const Jt = E(J)`
   border-radius: 4px;
-`, le = dt(({ children: e, rounded: r, loading: o, disabled: l, ...n }, a) => /* @__PURE__ */ t(
-  nr,
+`, ne = pt(({ children: e, rounded: r, loading: o, disabled: l, ...n }, a) => /* @__PURE__ */ t(
+  Jt,
   {
     ref: a,
     disableElevation: !0,
     disabled: l || o,
     ...n,
-    startIcon: o && /* @__PURE__ */ t(re, { size: "1em" }),
+    startIcon: o && /* @__PURE__ */ t(Z, { size: "1em" }),
     children: e
   }
 ));
-le.propTypes = {
+ne.propTypes = {
   children: w.any,
   rounded: w.bool,
   loading: w.bool,
   disabled: w.bool
 };
-le.defaultProps = {
+ne.defaultProps = {
   children: null,
   rounded: !1,
   loading: !1,
   disabled: !1
 };
-function X({ title: e, value: r, icon: o, prepend: l, options: n, onChange: a, itemRender: d, ...c }) {
-  const s = G(null), f = xe(), [m, k] = q(!1), [F, R] = q(r !== null ? r : ""), S = D(f.breakpoints.down("sm"));
-  W(() => {
+function V({ title: e, value: r, icon: o, prepend: l, options: n, onChange: a, itemRender: d, ...u }) {
+  const i = K(null), g = fe(), [h, m] = F(!1), [C, R] = F(r !== null ? r : ""), A = O(g.breakpoints.down("sm"));
+  N(() => {
     R(r !== null ? r : "");
   }, [r]);
-  const u = Z(() => {
-    k(!1);
-  }, []), x = Z(() => {
-    k(!0);
+  const c = X(() => {
+    m(!1);
+  }, []), k = X(() => {
+    m(!0);
   }, []);
-  function h(v) {
-    R(v.value), a(v.value), S && u();
+  function x(s) {
+    R(s.value), a(s.value), A && c();
   }
-  function g(v) {
-    return v === F;
+  function B(s) {
+    return s === C;
   }
-  return /* @__PURE__ */ p(z, { children: [
-    /* @__PURE__ */ p(
-      lr,
+  return /* @__PURE__ */ f(M, { children: [
+    /* @__PURE__ */ f(
+      Zt,
       {
-        ref: s,
-        onClick: x,
+        ref: i,
+        onClick: k,
         variant: "outlined",
         size: "small",
-        className: ["my-select__selector", Pt(F) ? "" : "my-select__selector--active"].join(" "),
+        className: ["my-select__selector", Bt(C) ? "" : "my-select__selector--active"].join(" "),
         sx: { minWidth: "auto" },
-        ...c,
+        ...u,
         children: [
           /* @__PURE__ */ t("div", { className: "my-select__icon", children: o }),
           e,
-          /* @__PURE__ */ t(Ze, { className: "my-select__arrowdown", component: Rt, fontSize: "small" })
+          /* @__PURE__ */ t(Ze, { className: "my-select__arrowdown", component: Pt, fontSize: "small" })
         ]
       }
     ),
-    /* @__PURE__ */ t(et, { open: m, anchorEl: s.current, transition: !0, sx: { zIndex: "9999" }, children: ({ TransitionProps: v, placement: _ }) => /* @__PURE__ */ t(tt, { ...v, sx: { transformOrigin: _ === "bottom" ? "center top" : "center bottom" }, children: /* @__PURE__ */ t(rt, { children: /* @__PURE__ */ t(ot, { onClickAway: u, children: /* @__PURE__ */ p(ar, { autoFocusItem: m, onMouseEnter: x, onMouseLeave: u, children: [
+    /* @__PURE__ */ t(et, { open: h, anchorEl: i.current, transition: !0, sx: { zIndex: "9999" }, children: ({ TransitionProps: s, placement: y }) => /* @__PURE__ */ t(tt, { ...s, sx: { transformOrigin: y === "bottom" ? "center top" : "center bottom" }, children: /* @__PURE__ */ t(rt, { children: /* @__PURE__ */ t(ot, { onClickAway: c, children: /* @__PURE__ */ f(er, { autoFocusItem: h, onMouseEnter: k, onMouseLeave: c, children: [
       l,
-      n.map(($) => d ? d($) : /* @__PURE__ */ t(
-        nt,
-        {
-          onClick: () => h($),
-          className: [
-            "my-select__option",
-            g($.value) ? "my-select__option--active" : ""
-          ].join(" "),
-          children: $.name
-        },
-        $.value
-      ))
+      n.map((T) => d ? d(T) : /* @__PURE__ */ f(nt, { onClick: () => x(T), children: [
+        /* @__PURE__ */ t(
+          St,
+          {
+            sx: { mr: 1, fontSize: 16, visibility: B(T.value) ? "visible" : "hidden" }
+          }
+        ),
+        T.name
+      ] }, T.value))
     ] }) }) }) }) })
   ] });
 }
-X.propTypes = {
+V.propTypes = {
   options: w.array.isRequired,
   value: w.oneOfType([w.string, w.number, w.array]),
   onChange: w.func,
@@ -567,7 +677,7 @@ X.propTypes = {
   icon: w.any,
   prepend: w.any
 };
-X.defaultProps = {
+V.defaultProps = {
   value: null,
   icon: null,
   prepend: null,
@@ -575,7 +685,7 @@ X.defaultProps = {
   onChange: () => {
   }
 };
-const lr = E(le)`
+const Zt = E(ne)`
   border: 1px solid #f0f0f0;
   padding: 6px 8px 6px 12px;
   font-weight: ${(e) => e.theme.typography.fontWeightRegular};
@@ -606,7 +716,7 @@ const lr = E(le)`
       margin-right: 3px;
     }
   }
-`, ar = E(Ke)`
+`, er = E(Je)`
   .my-select__option__icon {
     color: transparent;
     font-size: 14px;
@@ -623,11 +733,11 @@ const lr = E(le)`
     }
   }
 `;
-function Me() {
+function Oe() {
   var d;
-  const { filters: e, handleSort: r, handlePrice: o, t: l } = B(), n = ze(l), a = ((d = n.find((c) => c.value === e.sortBy)) == null ? void 0 : d.name) || l("sort.sort");
-  return /* @__PURE__ */ p(
-    I,
+  const { filters: e, handleSort: r, handlePrice: o, t: l } = S(), n = Le(l), a = ((d = n.find((u) => u.value === e.sortBy)) == null ? void 0 : d.name) || l("sort.sort");
+  return /* @__PURE__ */ f(
+    z,
     {
       direction: { xs: "row", md: "column" },
       alignItems: { xs: "center", md: "flex-start" },
@@ -636,22 +746,22 @@ function Me() {
       justifyContent: "space-between",
       children: [
         /* @__PURE__ */ t(
-          Ce,
+          ye,
           {
             control: /* @__PURE__ */ t(
-              Se,
+              xe,
               {
                 checked: e.price === "free",
                 size: "small",
                 sx: { "& .MuiSvgIcon-fontSizeSmall": { fontSize: 16, color: "text.lighter" } },
-                onChange: (c) => o(c.target.checked ? "free" : "")
+                onChange: (u) => o(u.target.checked ? "free" : "")
               }
             ),
             label: l("blocklet.free")
           }
         ),
         /* @__PURE__ */ t(
-          X,
+          V,
           {
             value: e.sortBy,
             options: n,
@@ -666,14 +776,16 @@ function Me() {
     }
   );
 }
-function ir() {
-  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(or, { children: [
+function tr() {
+  const { selectedCategory: e, handleCategory: r, t: o, categoryOptions: l, filters: n, cleanFilter: a, loadings: d, layout: u, baseSearch: i } = S(), { toggleOpen: g } = te();
+  return N(() => {
+    g(!1);
+  }, [n.category, n.owner, n.keyword, n.sortBy, n.sortDirection, n.resourceType]), u.showCategory ? /* @__PURE__ */ f(Yt, { children: [
     /* @__PURE__ */ t(
-      Q,
+      oe,
       {
-        xs: /* @__PURE__ */ p(
-          I,
+        xs: /* @__PURE__ */ f(
+          z,
           {
             direction: "row",
             justifyContent: "space-between",
@@ -684,62 +796,65 @@ function ir() {
             borderBottom: 1,
             borderColor: "divider",
             children: [
-              /* @__PURE__ */ t(De, { onClick: () => s(!1), children: /* @__PURE__ */ t(Re, {}) }),
-              /* @__PURE__ */ t(L, { flex: 1, variant: "body1", fontWeight: "fontWeightMedium", children: "Categories" })
+              /* @__PURE__ */ t(Ee, { onClick: () => g(!1), children: /* @__PURE__ */ t(we, {}) }),
+              /* @__PURE__ */ t(L, { flex: 1, variant: "body1", fontWeight: "fontWeightMedium", children: o("common.category") })
             ]
           }
         ),
         md: null
       }
     ),
-    /* @__PURE__ */ t(
-      I,
+    /* @__PURE__ */ f(
+      z,
       {
         visibility: d.fetchCategoriesLoading ? "hidden" : "visible",
         width: { xs: 268, md: 200 },
         boxSizing: "content-box",
         p: { xs: 2, md: 0 },
         pr: { md: 6 },
-        children: n.keyword ? /* @__PURE__ */ t(Me, {}) : /* @__PURE__ */ p(z, { 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(
+        children: [
+          u.showSearch ? /* @__PURE__ */ t(v, { className: "filter-bar", mb: 3, pb: 3, borderBottom: 1, borderColor: "divider", children: i ? /* @__PURE__ */ t(re, { className: "bl-search-container", placeholder: o("common.searchStore"), sx: { pl: 1.5 } }) : /* @__PURE__ */ t(Gt, {}) }) : null,
+          n.keyword ? /* @__PURE__ */ t(Oe, {}) : /* @__PURE__ */ f(M, { children: [
+            u.showExplore && /* @__PURE__ */ f(v, { display: "flex", alignItems: "center", gap: 1, mb: 3, pb: 3, borderBottom: 1, borderColor: "divider", children: [
+              /* @__PURE__ */ t(be, { icon: ut }),
+              /* @__PURE__ */ t(
+                L,
+                {
+                  variant: "body1",
+                  color: e ? "text.lighter" : "text.primary",
+                  fontWeight: e ? void 0 : "fontWeightMedium",
+                  sx: { cursor: "pointer" },
+                  onClick: () => {
+                    g(!1), a();
+                  },
+                  children: o("explore.title")
+                }
+              )
+            ] }),
+            !!l.length && /* @__PURE__ */ t(z, { gap: 2, children: l.map((h) => /* @__PURE__ */ t(
               L,
               {
                 variant: "body1",
-                color: e ? "text.lighter" : "text.primary",
-                fontWeight: e ? void 0 : "fontWeightMedium",
+                title: h.name,
                 sx: { cursor: "pointer" },
+                "data-cy": "filter",
+                color: e === h.value ? "text.primary" : "text.lighter",
+                textTransform: "capitalize",
                 onClick: () => {
-                  s(!1), a();
+                  e === h.value ? a() : r(h.value), g(!1);
                 },
-                children: o("explore.title")
-              }
-            )
-          ] }),
-          !!l.length && /* @__PURE__ */ t(I, { gap: 2, children: l.map((f) => /* @__PURE__ */ t(
-            L,
-            {
-              variant: "body1",
-              title: f.name,
-              sx: { cursor: "pointer" },
-              "data-cy": "filter",
-              color: e === f.value ? "text.primary" : "text.lighter",
-              textTransform: "capitalize",
-              onClick: () => {
-                e === f.value ? a() : r(f.value), s(!1);
+                children: h.name
               },
-              children: f.name
-            },
-            f.value
-          )) })
-        ] })
+              h.value
+            )) })
+          ] })
+        ]
       }
     )
   ] }) : null;
 }
-function Oe() {
-  const { endpoint: e, serverVersion: r, storeVersion: o } = B(), l = Ae(r, o), n = M(() => Ie({
+function De() {
+  const { endpoint: e, serverVersion: r, storeVersion: o } = S(), l = ze(r, o), n = D(() => Ce({
     baseURL: e,
     headers: l
   }), [e]);
@@ -749,21 +864,21 @@ function Oe() {
       return d;
     },
     post: async (a, d) => {
-      const { data: c } = await n.post(a, d);
-      return c;
+      const { data: u } = await n.post(a, d);
+      return u;
     }
   };
 }
-const je = ut(function(r) {
-  return /* @__PURE__ */ t(Fe, { height: 60, display: "flex", alignItems: "center", justifyContent: "center", ...r, children: /* @__PURE__ */ t(re, {}) });
+const Me = ht(function(r) {
+  return /* @__PURE__ */ t(Te, { height: 60, display: "flex", alignItems: "center", justifyContent: "center", ...r, children: /* @__PURE__ */ t(Z, {}) });
 });
-function ge({
+function pe({
   icon: e,
   children: r,
   maxWidth: o = 100,
   title: l
 }) {
-  return (r === 0 || r) && /* @__PURE__ */ p(I, { direction: "row", alignItems: "center", gap: 1, sx: { maxWidth: o, overflow: "hidden" }, children: [
+  return (r === 0 || r) && /* @__PURE__ */ f(z, { direction: "row", alignItems: "center", gap: 1, sx: { maxWidth: o, overflow: "hidden" }, children: [
     e,
     /* @__PURE__ */ t(
       L,
@@ -777,17 +892,17 @@ function ge({
     )
   ] });
 }
-const ye = 292;
-function sr() {
-  var R, S;
-  const { t: e } = B(), { get: r } = Oe(), o = ve(), l = D(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(",") })
+const he = 292;
+function rr() {
+  var R, A;
+  const { t: e } = S(), { get: r } = De(), o = ge(), l = O(o.breakpoints.down("md")), n = ((A = (R = window.blocklet) == null ? void 0 : R.preferences) == null ? void 0 : A.homeBanner) || [], { data: a = [], error: d } = U(async () => {
+    const c = await r(
+      Pe(I.blockletsPath, { didList: n.map((k) => k.did).join(",") })
     );
-    return u != null && u.dataList ? n.map((x) => u.dataList.find((h) => h.did === x.did)) : [];
+    return c != null && c.dataList ? n.map((k) => c.dataList.find((x) => x.did === k.did)) : [];
   });
   d && console.error("Get Banner Blocklets error:", d);
-  const c = {
+  const u = {
     position: "absolute",
     top: "50%",
     transform: "translateY(-50%)",
@@ -795,71 +910,88 @@ function sr() {
     cursor: "pointer",
     color: "text.lighter"
   };
-  return !d && n.length > 0 ? /* @__PURE__ */ p(z, { children: [
+  return !d && n.length > 0 ? /* @__PURE__ */ f(M, { children: [
     /* @__PURE__ */ t(L, { component: "h2", variant: "h2", mt: { xs: 2, md: 0 }, mb: 3, children: e("explore.title") }),
-    /* @__PURE__ */ t(C, { height: { xs: "auto", md: ye }, position: "relative", bgcolor: "#F0F7FF", borderRadius: 3, children: /* @__PURE__ */ t(
-      _t,
+    /* @__PURE__ */ t(
+      v,
       {
-        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(Ft, { sx: { ...c, left: 5 } }) }),
-        renderRightNav: (u) => /* @__PURE__ */ t(C, { onClick: u, sx: { display: { xs: "none", md: "block" } }, children: /* @__PURE__ */ t($t, { sx: { ...c, right: 5 } }) }),
-        items: n.map((u, x) => ({
-          original: u.did,
-          renderItem: () => {
-            var g;
-            const h = a[x] || {};
-            return /* @__PURE__ */ p(
-              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: [
-                  s(u.cover || dr(u.did, (g = h.screenshots) == null ? void 0 : g[0])),
-                  /* @__PURE__ */ p(I, { 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 && k(h, u.baseNum),
-                    F(u.link, u.did)
-                  ] })
-                ]
+        height: { xs: "auto", md: he },
+        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: (c) => /* @__PURE__ */ t(v, { onClick: c, sx: { display: { xs: "none", md: "block" } }, children: /* @__PURE__ */ t(It, { sx: { ...u, left: 5 } }) }),
+            renderRightNav: (c) => /* @__PURE__ */ t(v, { onClick: c, sx: { display: { xs: "none", md: "block" } }, children: /* @__PURE__ */ t(Lt, { sx: { ...u, right: 5 } }) }),
+            items: n.map((c, k) => ({
+              original: c.did,
+              renderItem: () => {
+                var y;
+                const x = a[k] || {}, B = c.cover || nr(c.did, (y = x.screenshots) == null ? void 0 : y[0]), s = Ae(B, { h: 400, w: 700 });
+                return /* @__PURE__ */ f(
+                  z,
+                  {
+                    height: { xs: "auto", md: he },
+                    sx: {
+                      "&::before": {
+                        content: '""',
+                        position: "absolute",
+                        top: 0,
+                        left: 0,
+                        right: 0,
+                        bottom: 0,
+                        backgroundImage: `url("${s}")`,
+                        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: [
+                      i(s),
+                      /* @__PURE__ */ f(z, { flex: 1, height: "100%", gap: 3, children: [
+                        /* @__PURE__ */ f(v, { flex: 1, children: [
+                          g(c.name || x.title || c.name),
+                          h(c.desc || x.description)
+                        ] }),
+                        x.did && m(x, c.baseNum),
+                        C(c.link, c.did)
+                      ] })
+                    ]
+                  }
+                );
               }
-            );
+            }))
           }
-        }))
+        )
       }
-    ) })
+    )
   ] }) : null;
-  function s(u) {
-    return /* @__PURE__ */ t(C, { width: { xs: "100%", md: 338 }, height: 210, borderRadius: 2, overflow: "hidden", position: "relative", children: /* @__PURE__ */ t(
-      It,
-      {
-        src: Vt(u, { h: 400, w: 700 }),
-        alt: "",
-        width: l ? void 0 : 338,
-        height: 210,
-        style: { objectFit: "cover" }
-      }
-    ) });
+  function i(c) {
+    return /* @__PURE__ */ t(v, { width: { xs: "100%", md: 338 }, height: 210, borderRadius: 2, overflow: "hidden", position: "relative", children: /* @__PURE__ */ t(Tt, { src: c, alt: "", width: l ? void 0 : 338, height: 210, style: { objectFit: "cover" } }) });
   }
-  function f(u) {
-    return /* @__PURE__ */ t(L, { variant: "h2", width: "100%", children: u });
+  function g(c) {
+    return /* @__PURE__ */ t(L, { variant: "h2", width: "100%", children: c });
   }
-  function m(u) {
+  function h(c) {
     return /* @__PURE__ */ t(
       L,
       {
@@ -867,6 +999,8 @@ function sr() {
         color: "text.secondary",
         textAlign: "left",
         width: "100%",
+        minHeight: 70,
+        maxHeight: 70,
         pt: 1,
         sx: {
           display: "-webkit-box",
@@ -877,20 +1011,20 @@ function sr() {
           overflow: "hidden",
           WebkitBoxOrient: "vertical"
         },
-        children: u
+        children: c
       }
     );
   }
-  function k(u, x = 0) {
-    const { did: h, owner: g, stats: v } = 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: Lt }), title: `${v.downloads + x}`, children: cr(v.downloads + x) })
+  function m(c, k = 0) {
+    const { did: x, owner: B, stats: s } = c;
+    return /* @__PURE__ */ f(v, { display: "flex", alignItems: "center", gap: 2, color: "text.secondary", children: [
+      /* @__PURE__ */ t(pe, { icon: /* @__PURE__ */ t(Be, { src: B.avatar, did: x, size: 20, variant: "circle" }), children: B.fullName }),
+      /* @__PURE__ */ t(pe, { icon: /* @__PURE__ */ t(be, { icon: Rt }), title: `${s.downloads + k}`, children: or(s.downloads + k) })
     ] });
   }
-  function F(u, x) {
-    return /* @__PURE__ */ t(lt, { href: u || `/blocklets/${x}`, align: "left", width: 100, children: /* @__PURE__ */ t(
-      te,
+  function C(c, k) {
+    return /* @__PURE__ */ t(lt, { href: c || `/blocklets/${k}`, align: "left", width: 100, children: /* @__PURE__ */ t(
+      J,
       {
         variant: "outlined",
         size: "small",
@@ -905,35 +1039,35 @@ function sr() {
     ) });
   }
 }
-const cr = (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`, dr = (e, r) => e && r ? `/assets/${e}/screenshots/${r}` : "";
-function ur({ title: e, blocklets: r }) {
-  const { blockletRender: o, serverVersion: l } = B();
-  return /* @__PURE__ */ p(C, { mt: 3, children: [
+const or = (e) => Number.isNaN(e) ? 0 : e < 1e3 ? e : e < 1e6 ? `${(e / 1e3).toFixed(1)}k` : e < 1e9 ? `${(e / 1e6).toFixed(1)}m` : `${(e / 1e9).toFixed(1)}b`, nr = (e, r) => e && r ? `/assets/${e}/screenshots/${r}` : "";
+function lr({ title: e, blocklets: r }) {
+  const { blockletRender: o, serverVersion: l } = S();
+  return /* @__PURE__ */ f(v, { mt: 3, children: [
     /* @__PURE__ */ t(L, { 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)) })
+    /* @__PURE__ */ t(se, { container: !0, spacing: 2, children: r.map((n) => /* @__PURE__ */ t(se, { item: !0, xs: 12, md: 6, p: "2px", "data-blocklet-did": n.did, children: /* @__PURE__ */ t(v, { padding: "1px", children: o({ blocklet: n, blocklets: r, serverVersion: l }) }) }, n.did)) })
   ] });
 }
-function pr() {
-  const { get: e } = Oe(), { t: r } = B(), {
+function ir() {
+  const { get: e } = De(), { t: r } = S(), {
     data: o = [],
     error: l,
     loading: n
-  } = oe(async () => {
-    const a = await e(T.explorePath);
+  } = U(async () => {
+    const a = await e(I.explorePath);
     return Array.isArray(a) ? a : [];
   });
-  return l ? /* @__PURE__ */ t(ee, { error: new Error(`Failed to fetch blocklets from ${T.explorePath}`) }) : n ? /* @__PURE__ */ t(je, { mt: 15 }) : /* @__PURE__ */ p(z, { children: [
-    /* @__PURE__ */ t(sr, {}),
+  return l ? /* @__PURE__ */ t(ee, { error: new Error(`Failed to fetch blocklets from ${I.explorePath}`) }) : n ? /* @__PURE__ */ t(Me, { mt: 15 }) : /* @__PURE__ */ f(M, { children: [
+    /* @__PURE__ */ t(rr, {}),
     o.map(
-      (a) => a.blocklets.length > 0 ? /* @__PURE__ */ t(ur, { title: r(`explore.${a.type}`), blocklets: a.blocklets }, a.type) : null
+      (a) => a.blocklets.length > 0 ? /* @__PURE__ */ t(lr, { title: r(`explore.${a.type}`), blocklets: a.blocklets }, a.type) : null
     )
   ] });
 }
-function hr() {
-  var f;
-  const { filters: e, handleSort: r, handlePrice: o, t: l, getCategoryLocale: n, developerName: a, handleDeveloper: d } = B(), c = ze(l), s = ((f = c.find((m) => m.value === e.sortBy)) == null ? void 0 : f.name) || l("sort.sort");
-  return /* @__PURE__ */ p(
-    I,
+function ar() {
+  var g;
+  const { filters: e, handleSort: r, handlePrice: o, t: l, getCategoryLocale: n, developerName: a, handleDeveloper: d } = S(), u = Le(l), i = ((g = u.find((h) => h.value === e.sortBy)) == null ? void 0 : g.name) || l("sort.sort");
+  return /* @__PURE__ */ f(
+    z,
     {
       direction: { xs: "column", md: "row" },
       alignItems: { xs: "flex-start", md: "center" },
@@ -944,8 +1078,8 @@ function hr() {
       pb: 3,
       children: [
         /* @__PURE__ */ t(L, { variant: "h2", textTransform: "capitalize", children: n(e.category) }),
-        /* @__PURE__ */ p(
-          I,
+        /* @__PURE__ */ f(
+          z,
           {
             direction: "row",
             alignItems: "center",
@@ -953,29 +1087,29 @@ function hr() {
             justifyContent: "space-between",
             gap: 2,
             children: [
-              e.owner && /* @__PURE__ */ t(at, { label: a, size: "small", onDelete: () => d("") }),
+              e.owner && a && /* @__PURE__ */ t(it, { label: a, size: "small", onDelete: () => d("") }),
               /* @__PURE__ */ t(
-                Ce,
+                ye,
                 {
                   sx: { m: 0 },
                   control: /* @__PURE__ */ t(
-                    Se,
+                    xe,
                     {
                       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" : "")
+                      onChange: (h) => o(h.target.checked ? "free" : "")
                     }
                   ),
                   label: l("blocklet.free")
                 }
               ),
               /* @__PURE__ */ t(
-                X,
+                V,
                 {
                   value: e.sortBy,
-                  options: c,
-                  title: s,
+                  options: u,
+                  title: i,
                   onChange: r,
                   icon: null,
                   prepend: null,
@@ -989,131 +1123,166 @@ function hr() {
     }
   );
 }
-function be() {
-  const { t: e } = B();
-  return /* @__PURE__ */ t($e, { style: { textAlign: "center" }, variant: "subtitle2", children: e("blocklet.noResults") });
+function me() {
+  const { t: e } = S();
+  return /* @__PURE__ */ t(Re, { style: { textAlign: "center" }, variant: "subtitle2", children: e("blocklet.noResults") });
 }
-function j({ filterTip: e, keywordTip: r }) {
-  const { t: o, locale: l } = B(), n = () => l === "zh" ? "、" : " , ";
-  return /* @__PURE__ */ p(Fe, { className: "tips", children: [
+function $({ filterTip: e, keywordTip: r }) {
+  const { t: o, locale: l } = S(), n = () => l === "zh" ? "、" : " , ";
+  return /* @__PURE__ */ f(Te, { className: "tips", children: [
     /* @__PURE__ */ t("span", { style: { marginRight: "16px" }, children: o("blocklet.emptyTip") }),
     e && /* @__PURE__ */ t("span", { children: o("blocklet.filterTip") }),
     e && r && n(),
     r && /* @__PURE__ */ t("span", { children: o("blocklet.keywordTip") })
   ] });
 }
-j.propTypes = {
+$.propTypes = {
   filterTip: w.bool,
   keywordTip: w.bool
 };
-j.defaultProps = {
+$.defaultProps = {
   filterTip: !1,
   keywordTip: !1
 };
-function H({ primaryStart: e, primaryEnd: r, filter: o }) {
-  return /* @__PURE__ */ p($e, { variant: "subtitle2", children: [
+function q({ primaryStart: e, primaryEnd: r, filter: o }) {
+  return /* @__PURE__ */ f(Re, { variant: "subtitle2", children: [
     /* @__PURE__ */ t("span", { children: e }),
-    /* @__PURE__ */ p("span", { className: "primary", children: [
+    /* @__PURE__ */ f("span", { className: "primary", children: [
       " ",
       o,
       " "
     ] }),
-    /* @__PURE__ */ p("span", { children: [
+    /* @__PURE__ */ f("span", { children: [
       r,
       " "
     ] })
   ] });
 }
-H.propTypes = {
+q.propTypes = {
   primaryStart: w.string.isRequired,
   primaryEnd: w.string.isRequired,
   filter: w.string.isRequired
 };
-function qe({ blocklets: e, ...r }) {
-  const {
-    blockletRender: o,
-    errors: l,
-    loadings: n,
-    selectedCategory: a,
-    getCategoryLocale: d,
-    filters: c,
-    t: s,
-    serverVersion: f,
-    hasNextPage: m,
-    loadMore: k,
-    endpoint: F,
-    minItemWidth: R
-  } = B(), S = !!a || !!c.price, [u] = At({
-    loading: n.fetchBlockletsLoading || n.loadingMore,
-    hasNextPage: m,
-    onLoadMore: k
+const sr = (e, r, o, l) => gt(
+  async (n) => {
+    n || (o.currentPage = o.defaultCurrentPage);
+    const { currentPage: a, pageSize: d } = o, u = {
+      ...r,
+      category: r.category === "All" ? "" : r.category,
+      sortBy: I[r.sortBy],
+      page: a,
+      pageSize: d
+    };
+    l(null);
+    const { data: i = {} } = await e.get(I.blockletsPath, { params: u });
+    return o.currentPage++, { page: a, pageSize: d, list: (i == null ? void 0 : i.dataList) || [], total: (i == null ? void 0 : i.total) || 0 };
+  },
+  {
+    isNoMore: (n) => n ? n.page * n.pageSize >= n.total : !1,
+    reloadDeps: [e, Ft(r)],
+    onError: l
+  }
+);
+function cr() {
+  var h;
+  const { storeApi: e, filters: r, extraFilter: o, errors: l, updateDeveloperName: n } = S(), a = yt({
+    currentPage: I.currentPage,
+    pageSize: Wt() ? I.mobilePageSize : I.pageSize,
+    defaultCurrentPage: I.defaultCurrentPage
+  }), [d, u] = F(null), i = sr(e, r, a, u), g = D(
+    () => {
+      var m, C;
+      return o ? o(((m = i.data) == null ? void 0 : m.list) || []) : ((C = i.data) == null ? void 0 : C.list) || [];
+    },
+    [i.data, o]
+  );
+  return N(() => {
+    const m = g.find((C) => C.owner.did === r.owner);
+    n((m == null ? void 0 : m.owner.fullName) || (m == null ? void 0 : m.author.name) || "");
+  }, [r.owner, g, n]), {
+    blocklets: g,
+    fetchBlockletsError: d,
+    loadMore: i.loadMore,
+    hasNextPage: !i.noMore,
+    total: (h = i.data) == null ? void 0 : h.total,
+    loadings: {
+      fetchBlockletsLoading: i.loading,
+      loadingMore: i.loadingMore
+    },
+    errors: {
+      ...l,
+      fetchBlockletsError: d
+    }
+  };
+}
+function dr() {
+  const { t: e, filters: r, endpoint: o, blockletRender: l, serverVersion: n, minItemWidth: a, selectedCategory: d, getCategoryLocale: u } = S(), { blocklets: i, errors: g, loadMore: h, loadings: m, hasNextPage: C, total: R } = cr(), A = !!d || !!r.price, [c] = _t({
+    loading: m.fetchBlockletsLoading || m.loadingMore,
+    hasNextPage: C,
+    onLoadMore: h
   });
-  if (l.fetchBlockletsError)
-    return /* @__PURE__ */ t(
-      ee,
-      {
-        error: new Error(`Failed to fetch blocklets from ${F}: ${l.fetchBlockletsError.message}`)
-      }
-    );
-  if (n.fetchBlockletsLoading)
-    return /* @__PURE__ */ t(je, { mt: 15 });
-  if (c.keyword && S && e.length === 0)
-    return /* @__PURE__ */ p(U, { children: [
+  if (g.fetchBlockletsError) {
+    const x = new Error(`Failed to fetch blocklets from ${o}: ${g.fetchBlockletsError.message}`);
+    return /* @__PURE__ */ t(ee, { error: x });
+  }
+  if (m.fetchBlockletsLoading)
+    return /* @__PURE__ */ t(Me, { mt: 15 });
+  if (r.keyword && A && i.length === 0)
+    return /* @__PURE__ */ f(j, { children: [
       /* @__PURE__ */ t(
-        H,
+        q,
         {
-          primaryStart: s("blocklet.noBlockletPart1"),
-          primaryEnd: s("blocklet.noBlockletPart2"),
-          filter: c.keyword
+          primaryStart: e("blocklet.noBlockletPart1"),
+          primaryEnd: e("blocklet.noBlockletPart2"),
+          filter: r.keyword
         }
       ),
-      /* @__PURE__ */ t(j, { keywordTip: !0, filterTip: !0 })
+      /* @__PURE__ */ t($, { keywordTip: !0, filterTip: !0 })
     ] });
-  if (c.keyword && e.length === 0)
-    return /* @__PURE__ */ p(U, { children: [
+  if (r.keyword && i.length === 0)
+    return /* @__PURE__ */ f(j, { children: [
       /* @__PURE__ */ t(
-        H,
+        q,
         {
-          primaryStart: s("blocklet.noBlockletPart1"),
-          primaryEnd: s("blocklet.noBlockletPart2"),
-          filter: c.keyword
+          primaryStart: e("blocklet.noBlockletPart1"),
+          primaryEnd: e("blocklet.noBlockletPart2"),
+          filter: r.keyword
         }
       ),
-      /* @__PURE__ */ t(j, { keywordTip: !0 })
+      /* @__PURE__ */ t($, { keywordTip: !0 })
     ] });
-  if (S && e.length === 0) {
-    const x = d(a);
-    return /* @__PURE__ */ p(U, { children: [
+  if (A && i.length === 0) {
+    const x = u(d);
+    return /* @__PURE__ */ f(j, { children: [
       x ? /* @__PURE__ */ t(
-        H,
+        q,
         {
-          primaryStart: s("blocklet.noCategoryResults1"),
-          primaryEnd: s("blocklet.noCategoryResults2"),
+          primaryStart: e("blocklet.noCategoryResults1"),
+          primaryEnd: e("blocklet.noCategoryResults2"),
           filter: x
         }
-      ) : /* @__PURE__ */ t(be, {}),
-      /* @__PURE__ */ t(j, { filterTip: !0 })
+      ) : /* @__PURE__ */ t(me, {}),
+      /* @__PURE__ */ t($, { filterTip: !0 })
     ] });
   }
-  return e.length === 0 ? /* @__PURE__ */ t(U, { children: /* @__PURE__ */ t(be, {}) }) : /* @__PURE__ */ p(z, { 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, {}) })
+  if (i.length === 0)
+    return /* @__PURE__ */ t(j, { children: /* @__PURE__ */ t(me, {}) });
+  return /* @__PURE__ */ f(M, { children: [
+    r.keyword ? /* @__PURE__ */ f(M, { children: [
+      /* @__PURE__ */ t(oe, { xs: /* @__PURE__ */ t(Oe, {}), md: null }),
+      k()
+    ] }) : /* @__PURE__ */ t(ar, {}),
+    /* @__PURE__ */ t(v, { display: "grid", gridTemplateColumns: `repeat(auto-fill, minmax(${a}px, 1fr))`, p: "2px", gap: 2, children: i.map((x) => /* @__PURE__ */ t(v, { "data-blocklet-did": x.did, sx: { minWidth: a }, children: l({ blocklet: x, blocklets: i, serverVersion: n }) }, x.did)) }),
+    C && /* @__PURE__ */ t(v, { height: 60, display: "flex", justifyContent: "center", py: 2, ref: c, children: /* @__PURE__ */ t(Z, {}) })
   ] });
+  function k() {
+    return /* @__PURE__ */ f(z, { direction: "row", alignItems: "center", justifyContent: "space-between", mb: 2, mt: { xs: 2, md: 0 }, children: [
+      /* @__PURE__ */ t(L, { variant: "h3", children: e("blocklet.search", { keyword: r.keyword }) }),
+      /* @__PURE__ */ t(L, { variant: "body1", color: "text.lighter", fontSize: 13, children: e("blocklet.resultCount", { count: R }) })
+    ] });
+  }
 }
-qe.propTypes = {
-  blocklets: w.array.isRequired
-};
-const U = E(zt)`
+const j = E(zt)`
   text-align: center;
   margin-top: 100px;
   .primary {
@@ -1123,302 +1292,66 @@ const U = E(zt)`
     margin-top: ${(e) => e.theme.spacing(1)};
   }
 `;
-function ae({ onSelect: e, wrapChildren: r }) {
-  const o = G(null), l = G(null), n = G(null), { storeApi: a, blockletRender: d, filters: c, endpoint: s, handleKeyword: f, t: m, serverVersion: k } = B(), F = async (h) => {
-    const { data: g } = await a.get(T.blockletsPath, { params: h }), v = g.dataList || [];
-    return v.length > 0 && v.unshift({ type: "more-result", total: g.total || 0 }), v;
-  }, 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();
-    });
-  }, u = (h) => {
-    h.setIsOpen(!1), S();
-  }, x = ({ prevState: h, state: g }) => {
-    h.query !== g.query && (g.query || (f(), S()));
-  };
-  return Mt(
-    "ctrl + k, command + k",
-    (h) => (h.stopPropagation(), h.preventDefault(), S(), !1),
-    { enableOnTags: ["INPUT"] }
-  ), W(() => {
-    S();
-  }, [s]), W(() => {
-    if (!o.current)
-      return;
-    const h = Dt({
-      container: o.current,
-      renderer: { createElement: pt, Fragment: ht, render: () => {
-      } },
-      render({ children: g }, v) {
-        var _;
-        (!l.current || n.current !== v) && (n.current = v, (_ = l.current) == null || _.unmount(), l.current = Nt(v)), l.current.render(r(g));
-      },
-      autoFocus: !0,
-      openOnFocus: !1,
-      classNames: {
-        panel: "bl-autocomplete-panel",
-        label: "bl-autocomplete-label",
-        form: "bl-autocomplete-form",
-        input: "bl-autocomplete-input",
-        clearButton: "bl-autocomplete-clear",
-        detachedCancelButton: "bl-autocomplete-detached-cancel",
-        detachedContainer: "bl-autocomplete-detached-container"
-      },
-      translations: {
-        clearButtonTitle: m("common.clear"),
-        detachedCancelButtonText: m("common.cancel"),
-        submitButtonTitle: m("common.search"),
-        detachedSearchButtonTitle: m("common.search")
-      },
-      placeholder: m("common.searchStore"),
-      initialState: {
-        query: c.keyword
-      },
-      onStateChange(g) {
-        x(g);
-      },
-      onSubmit: R,
-      onReset(g) {
-        u(g);
-      },
-      getSources({ query: g, state: v, ..._ }) {
-        const $ = {
-          sortBy: T.nameDesc,
-          page: 1,
-          pageSize: 10,
-          keyword: g
-        };
-        return Jt([
-          {
-            sourceId: "blocklets",
-            getItems() {
-              return F($);
-            },
-            // 选中后填充 搜索框中值
-            getItemInputValue({ item: y }) {
-              return y.type === "more-result" ? g : y.title;
-            },
-            // 选中或者点击自动完成列表中的 item 时触发
-            onSelect({ event: y, item: N }) {
-              return N.type === "more-result" ? (_.setIsOpen(!1), f(g)) : y.type === "keydown" ? f(N.title) : e({
-                blocklet: N,
-                detailUrl: Bt(s, "/blocklets", N.did),
-                storeUrl: s
-              });
-            },
-            templates: {
-              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: _, serverVersion: k });
-              },
-              noResults() {
-                return m("blocklet.noResults");
-              }
-            }
-          }
-        ]);
-      }
-    });
-    return () => {
-      h.destroy();
-    };
-  }, [c, d]), /* @__PURE__ */ p(z, { children: [
-    /* @__PURE__ */ t(
-      we,
-      {
-        styles: (h) => ke`
-          .bl-autocomplete-detached-container {
-            .bl-autocomplete-detached-cancel {
-              white-space: nowrap;
-            }
-          }
-          .bl-autocomplete-panel {
-            @media (min-width: ${h.breakpoints.values.md}px) {
-              min-width: 450px;
-              left: unset !important;
-            }
-          }
-        `
-      }
-    ),
-    /* @__PURE__ */ t("div", { className: "bl-search-container", ref: o })
-  ] });
-}
-ae.propTypes = {
-  onSelect: w.func.isRequired,
-  wrapChildren: w.func
-};
-ae.defaultProps = {
-  wrapChildren: (e) => e
-};
-function ie({ placeholder: e, ...r }) {
-  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 W(() => {
-    a(o.keyword || "");
-  }, [o.keyword]), /* @__PURE__ */ t(
-    mr,
+function ur() {
+  const { t: e } = S(), { toggleOpen: r } = te();
+  return /* @__PURE__ */ f(
+    L,
     {
-      inputProps: {
-        "data-cy": "search-blocklet"
-      },
-      startAdornment: /* @__PURE__ */ t(me, { position: "start", children: /* @__PURE__ */ t(fr, {}) }),
-      onChange: c,
-      placeholder: e,
-      value: n,
-      title: e,
-      "data-cy": "search",
-      endAdornment: n && /* @__PURE__ */ t(me, { position: "end", children: /* @__PURE__ */ t(gr, { "data-cy": "search-delete", onClick: s }) }),
-      ...r
-    }
-  );
-}
-ie.propTypes = {
-  placeholder: w.string
-};
-ie.defaultProps = {
-  placeholder: "Type to search..."
-};
-const mr = E(it)`
-  background-color: ${(e) => e.theme.palette.grey[50]};
-  font-size: 14px;
-  border-radius: 6px;
-  width: 100%;
-  .MuiInputBase-input {
-    padding: 8px 0 8px 10px;
-  }
-  .MuiOutlinedInput-notchedOutline {
-    border: none;
-  }
-  .Mui-focused {
-    background-color: #f6f6f6;
-    .MuiInputBase-input::placeholder {
-      color: transparent;
-    }
-  }
-`, fr = E(Ot)`
-  color: ${(e) => e.theme.palette.grey[500]};
-  font-size: 28px;
-  @media (max-width: ${(e) => e.theme.breakpoints.values.md}px) {
-    font-size: 24px;
-  }
-`, gr = E(Re)`
-  color: ${(e) => e.theme.palette.grey[500]};
-  font-size: 16px;
-  cursor: pointer;
-`;
-function yr() {
-  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(
-    I,
-    {
-      className: "title-bar",
-      direction: "row",
+      variant: "body1",
+      display: { xs: "flex", md: "none" },
       alignItems: "center",
-      justifyContent: "space-between",
-      pt: { xs: 2, md: 5 },
-      pb: { xs: 2, md: 3 },
-      borderBottom: 1,
-      borderColor: { xs: "transparent", md: "divider" },
-      mb: { xs: 0, md: 3 },
+      gap: 1,
+      py: 2,
+      fontWeight: "fontWeightMedium",
       children: [
-        /* @__PURE__ */ t(
-          Q,
-          {
-            xs: !c && /* @__PURE__ */ t(De, { onClick: () => d(!0), children: /* @__PURE__ */ t(Et, {}) }),
-            md: a.showTitle ? /* @__PURE__ */ t(L, { variant: "h1", children: o("common.title") }) : /* @__PURE__ */ t(C, {})
-          }
-        ),
-        a.showSearch ? /* @__PURE__ */ t(
-          C,
-          {
-            width: { xs: c ? "100%" : 300, md: 300 },
-            className: "filter-bar",
-            sx: {
-              "& .bl-autocomplete-form": { borderRadius: 2 },
-              "& .aa-SubmitButton, & .aa-LoadingIndicator": { width: "auto", pl: 1.5, pr: 1 },
-              "& .aa-SubmitIcon, & .aa-LoadingIcon": { height: 16, width: 16 }
-            },
-            children: n ? /* @__PURE__ */ t(ie, { className: "bl-search-container", placeholder: o("common.searchStore"), sx: { pl: 1.5 } }) : /* @__PURE__ */ t(ae, { onSelect: r, wrapChildren: l })
-          }
-        ) : null
+        /* @__PURE__ */ t(Ee, { onClick: () => r(!0), children: /* @__PURE__ */ t(Et, {}) }),
+        e("common.category")
       ]
     }
-  ) : null;
+  );
 }
-function br() {
-  const { blockletList: e, total: r, filters: o, t: l } = B(), n = o.category || o.keyword || o.price;
-  return /* @__PURE__ */ t(jt, { children: /* @__PURE__ */ p(st, { FallbackComponent: ee, children: [
-    /* @__PURE__ */ t(yr, {}),
-    /* @__PURE__ */ p(C, { display: "flex", height: "100%", children: [
-      /* @__PURE__ */ t(ir, {}),
-      /* @__PURE__ */ t(I, { height: "100%", position: "relative", flex: 1, overflow: "visible", children: n ? /* @__PURE__ */ p(z, { children: [
-        o.keyword ? /* @__PURE__ */ p(z, { children: [
-          /* @__PURE__ */ t(Q, { xs: /* @__PURE__ */ t(Me, {}), md: null }),
-          a()
-        ] }) : /* @__PURE__ */ t(hr, {}),
-        /* @__PURE__ */ t(qe, { blocklets: e, height: "100%" })
-      ] }) : /* @__PURE__ */ t(pr, {}) })
+function pr() {
+  const { blockletList: e, filters: r } = S(), o = r.category || r.keyword || r.price;
+  return /* @__PURE__ */ t(Ot, { children: /* @__PURE__ */ f(dt, { FallbackComponent: ee, children: [
+    /* @__PURE__ */ t(ur, {}),
+    /* @__PURE__ */ f(v, { display: "flex", height: "100%", className: "list-container", pt: { xs: 0, md: 5 }, children: [
+      /* @__PURE__ */ t(tr, {}),
+      /* @__PURE__ */ t(z, { height: "100%", position: "relative", flex: 1, overflow: "visible", children: o ? /* @__PURE__ */ t(dr, { blocklets: e }) : /* @__PURE__ */ t(ir, {}) })
     ] })
   ] }) });
-  function a() {
-    return /* @__PURE__ */ p(I, { direction: "row", alignItems: "center", justifyContent: "space-between", mb: 2, mt: { xs: 2, md: 0 }, children: [
-      /* @__PURE__ */ t(L, { variant: "h3", children: l("blocklet.search", { keyword: o.keyword }) }),
-      /* @__PURE__ */ t(L, { variant: "body1", color: "text.lighter", fontSize: 13, children: l("blocklet.resultCount", { count: r }) })
-    ] });
-  }
 }
-function lo(e) {
-  const r = xe(), o = Xt(r.palette.primary.main), l = {
-    autocomplete: ke`
-      :root {
-        --aa-detached-media-query: (max-width: ${r.breakpoints.values.md}px) !important;
-        --aa-detached-modal-media-query: (min-width: ${r.breakpoints.values.md}px) !important;
-        --aa-detached-modal-max-width: ${r.breakpoints.values.md}px !important;
-        --aa-selected-color-rgb: ${o.r}, ${o.g}, ${o.b} !important;
-        --aa-primary-color-rgb: ${o.r}, ${o.g}, ${o.b} !important;
-        --aa-input-background-color-rgb: 250, 250, 250 !important;
-      }
-      .bl-autocomplete-panel {
-        z-index: ${r.zIndex.modal};
-      }
-      .bl-autocomplete-label {
-        .aa-SubmitIcon {
-          color: ${r.palette.grey[500]} !important;
-        }
-      }
-      .bl-autocomplete-form {
-        border: 1px solid #fff !important;
-        &:focus-within {
-          box-shadow: none !important;
-          border: 1px solid rgba(0, 0, 0, 0.12) !important;
-        }
-      }
-      .aa-DetachedSearchButton {
-        border: none !important;
-        &:focus-within {
-          box-shadow: none !important;
-        }
-        .aa-SubmitIcon {
-          color: ${r.palette.grey[500]} !important;
-        }
-      }
-      .aa-Panel .arcblock-blocklet button {
-        border: 1px solid rgba(${o.r}, ${o.g}, ${o.b}, 0.5);
+function Jr(e) {
+  const r = fe(), o = at(
+    ct({
+      ...r,
+      typography: {
+        h1: {
+          fontSize: 32,
+          fontWeight: 700,
+          lineHeight: 1.375,
+          textAlign: "left"
+        },
+        h2: {
+          fontSize: 24,
+          fontWeight: 700,
+          lineHeight: 1.3333333,
+          textAlign: "left"
+        },
+        h3: {
+          fontSize: 18,
+          fontWeight: 600,
+          lineHeight: 1.5,
+          textAlign: "left"
+        },
+        fontWeightLight: 300,
+        fontWeightRegular: 400,
+        fontWeightMedium: 500,
+        fontWeightBold: 700
       }
-    `
-  };
-  return /* @__PURE__ */ p(rr, { ...e, children: [
-    /* @__PURE__ */ t(we, { styles: l.autocomplete }),
-    /* @__PURE__ */ t(br, {})
-  ] });
+    })
+  );
+  return /* @__PURE__ */ t(st, { theme: o, children: /* @__PURE__ */ t(Ht, { ...e, children: /* @__PURE__ */ t(pr, {}) }) });
 }
 export {
-  lo as default
+  Jr as default
 };