@blocklet/list 0.13.38 → 0.13.39

package/lib/index.es.js

@@ -1,38 +1,129 @@
-import { jsx as t, jsxs as h, Fragment as le } from "react/jsx-runtime";
-import { styled as R, useTheme as ae } from "@arcblock/ux/lib/Theme";
-import { Global as xe, css as ke } from "@emotion/react";
-import _e from "@mui/icons-material/Sort";
-import { Button as Ne, CircularProgress as oe, MenuList as Le, useMediaQuery as Se, SvgIcon as Me, Popper as Oe, Grow as Fe, Paper as Ae, ClickAwayListener as Ee, MenuItem as qe, Chip as Ce, Box as _, Unstable_Grid2 as te, OutlinedInput as je, InputAdornment as ge, Typography as ve, Hidden as ye, Stack as Ue } from "@mui/material";
-import Ve from "@mui/icons-material/Face";
-import { ErrorBoundary as We } from "react-error-boundary";
-import { ErrorFallback as Te } from "@arcblock/ux/lib/ErrorBoundary";
-import { createContext as Ge, useMemo as Q, useState as E, useCallback as ne, useEffect as j, useContext as Ke, forwardRef as He, useRef as J, createElement as Qe, Fragment as Je } from "react";
-import { useReactive as Pe, useInfiniteScroll as Xe, useRequest as Ye, useSize as Ze, useDebounceFn as et, useMemoizedFn as tt, useCreation as rt, useMount as ot } from "ahooks";
-import { joinURL as nt, parseQuery as lt } from "ufo";
-import o from "prop-types";
-import at from "lodash/orderBy";
-import it from "axios";
-import st from "json-stable-stringify";
+import { jsx as t, jsxs as p, Fragment as F } from "react/jsx-runtime";
+import { styled as D, useTheme as be } from "@arcblock/ux/lib/Theme";
+import { Global as xe, css as we } from "@emotion/react";
+import { ErrorFallback as K } from "@arcblock/ux/lib/ErrorBoundary";
+import { Button as Z, useTheme as Ge, useMediaQuery as N, Drawer as Qe, Box as S, Stack as P, FormControlLabel as ke, Checkbox as ve, Typography as T, CircularProgress as ee, Link as Xe, Grid as pe, MenuList as Ye, SvgIcon as Je, Popper as Ke, Grow as Ze, Paper as et, ClickAwayListener as tt, MenuItem as rt, OutlinedInput as ot, InputAdornment as me } from "@mui/material";
+import { ErrorBoundary as nt } from "react-error-boundary";
+import lt from "@iconify-icons/tabler/compass";
+import { Icon as Ce } from "@iconify/react";
+import Se from "@mui/icons-material/Close";
+import { createContext as Be, useState as q, useMemo as E, useContext as Re, useCallback as J, useEffect as j, memo as at, forwardRef as it, useRef as U, createElement as st, Fragment as ct } from "react";
+import Pe from "axios";
+import dt from "lodash/orderBy";
+import i from "prop-types";
+import { useInfiniteScroll as ut, useRequest as te, useReactive as pt, useDebounceFn as mt } from "ahooks";
+import ht from "lodash/omitBy";
+import ft from "json-stable-stringify";
 import "lodash/cloneDeep";
-import ct from "color";
-import be from "flat";
-import pt from "@mui/icons-material/KeyboardArrowDown";
-import ut from "lodash/isEmpty";
-import dt from "@mui/icons-material/FilterAltOutlined";
-import mt from "@arcblock/ux/lib/Dialog";
-import ht from "@mui/material/Button";
-import ft from "@arcblock/ux/lib/Empty";
-import gt from "react-infinite-scroll-hook";
-import yt from "@mui/material/Box";
-import Re from "@mui/material/Typography";
-import bt from "@mui/icons-material/Search";
-import wt from "@mui/icons-material/Close";
-import { createRoot as xt } from "react-dom/client";
-import { autocomplete as kt } from "@algolia/autocomplete-js";
-import { useHotkeys as St } from "react-hotkeys-hook";
-import Ct from "@arcblock/ux/lib/Switch";
+import gt from "color";
+import he from "flat";
+import Te from "@mui/material/Box";
+import yt from "@arcblock/ux/lib/Avatar";
+import bt from "@iconify-icons/tabler/cloud-download";
+import xt from "@mui/icons-material/ChevronLeft";
+import wt from "@mui/icons-material/ChevronRight";
+import kt from "react-image-gallery";
+import "react-image-gallery/styles/css/image-gallery.css";
+import vt from "@mui/icons-material/KeyboardArrowDown";
+import Ct from "lodash/isEmpty";
+import St from "@arcblock/ux/lib/Empty";
+import Bt from "react-infinite-scroll-hook";
+import Ie from "@mui/material/Typography";
+import Rt from "@mui/icons-material/Menu";
+import { createRoot as Pt } from "react-dom/client";
+import { autocomplete as Tt } from "@algolia/autocomplete-js";
+import { useHotkeys as It } from "react-hotkeys-hook";
+import { joinURL as Lt } from "ufo";
+import zt from "@mui/icons-material/Search";
 import "@algolia/autocomplete-theme-classic/dist/theme.css";
-const vt = (e) => [
+const Le = Be({
+  open: !1,
+  toggleOpen: (e) => {
+  }
+});
+function $t({ children: e }) {
+  const [r, o] = q(!1), n = (l) => {
+    o(l ?? !l);
+  }, a = E(() => ({ open: r, toggleOpen: n }), [r]);
+  return /* @__PURE__ */ t(Le.Provider, { value: a, children: e });
+}
+function re() {
+  return Re(Le);
+}
+const R = {
+  nameAsc: "title",
+  nameDesc: "title",
+  popularity: "stats.downloads",
+  publishAt: "lastPublishedAt",
+  mobilePageSize: 10,
+  pageSize: 18,
+  currentPage: 1,
+  defaultCurrentPage: 1,
+  blockletsPath: "/api/v2/blocklets.json",
+  categoriesPath: "/api/blocklets/categories",
+  explorePath: "/api/blocklets/explore",
+  exploreDidsPath: "/api/blocklets/dids",
+  cacheSize: 100
+}, _t = (e, r, o, n) => ut(
+  async (a) => {
+    a || (o.currentPage = o.defaultCurrentPage);
+    const { currentPage: l, pageSize: m } = o, d = { ...r, sortBy: R[r.sortBy], page: l, pageSize: m };
+    n(null);
+    const { data: s = {} } = await e.get(R.blockletsPath, { params: d });
+    return o.currentPage++, { page: l, pageSize: m, list: (s == null ? void 0 : s.dataList) || [], total: (s == null ? void 0 : s.total) || 0 };
+  },
+  {
+    isNoMore: (a) => a ? a.page * a.pageSize >= a.total : !1,
+    reloadDeps: [e, ft(r)],
+    onError: n
+  }
+), Ft = (e) => te(
+  async () => {
+    const { data: r } = await e.get(R.categoriesPath);
+    return Array.isArray(r) ? r : [];
+  },
+  { manual: !0 }
+), ze = {
+  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
+}, $e = {
+  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: []
+}, At = (e) => [
   {
     name: e("sort.popularity"),
     value: "popularity"
@@ -40,45 +131,49 @@ const vt = (e) => [
   {
     name: e("sort.lastPublished"),
     value: "publishAt"
-  },
-  {
-    name: e("sort.nameAscend"),
-    value: "nameAsc"
-  },
-  {
-    name: e("sort.nameDescend"),
-    value: "nameDesc"
   }
-], Tt = (e) => [
+  // {
+  //   name: t('sort.rating'),
+  //   value: 'rating',
+  // },
+], Dt = (e) => [
   { name: e("blocklet.free"), value: "free" },
   { name: e("blocklet.payment"), value: "payment" }
-], Pt = (e = [], n = "en") => e.map((r) => ({ name: r.locales[n] || r.locales.en, value: r._id })), Rt = (e, n) => (
+], Et = (e = [], r = "en") => e.map((o) => ({ name: o.locales[r] || o.locales.en, value: o._id })), Mt = (e, r) => (
   // eslint-disable-next-line no-prototype-builtins
-  e.replace(/{(\w*)}/g, (r, a) => n.hasOwnProperty(a) ? n[a] : "")
-), Bt = () => window.innerWidth <= 600, $t = (e) => ct(e).rgb().object();
-function It(e, n) {
-  let r;
-  return function(...s) {
-    return r && clearTimeout(r), new Promise((c) => {
-      r = setTimeout(() => c(e(...s)), n);
+  e == null ? void 0 : e.replace(/{(\w*)}/g, (o, n) => r.hasOwnProperty(n) ? r[n] : "")
+), Nt = () => window.innerWidth <= 600, Ot = (e) => gt(e).rgb().object();
+function qt(e, r) {
+  let o;
+  return function(...a) {
+    return o && clearTimeout(o), new Promise((l) => {
+      o = setTimeout(() => l(e(...a)), r);
     });
   };
 }
-const zt = It((e) => Promise.resolve(e), 300), Dt = {
+const jt = qt((e) => Promise.resolve(e), 300), Vt = {
   common: {
-    searchStore: "Search the store",
+    title: "Blocklet Store",
+    searchStore: "Search Blocklet",
     showResources: "Show resources",
     price: "Price",
     category: "Category",
     resourceType: "Resource Type",
     clear: "Clear",
     cancel: "Cancel",
-    search: "Search"
+    search: "Search",
+    fetchError: "Failed to fetch data, please try again later"
+  },
+  explore: {
+    title: "Explore",
+    trending: "Trending",
+    topRated: "Top Rated",
+    recentlyUpdated: "Recently Updated",
+    viewDetail: "View Details"
   },
   sort: {
     sort: "Sort",
-    nameDescend: "Name Descending",
-    nameAscend: "Name Ascending",
+    rating: "Rating",
     popularity: "Most Popular",
     lastPublished: "Latest Published"
   },
@@ -89,8 +184,9 @@ const zt = It((e) => Promise.resolve(e), 300), Dt = {
   },
   blocklet: {
     noResults: "No Blocklets",
-    payment: "Paid Blocklets",
-    free: "Free Blocklets",
+    free: "Free",
+    search: 'Results for "{keyword}"',
+    resultCount: "{count} Blocklets",
     emptyTip: "Tips:",
     filterTip: "Appropriately reduce the filter conditions",
     keywordTip: "Try other keywords",
@@ -103,21 +199,29 @@ const zt = It((e) => Promise.resolve(e), 300), Dt = {
   autocomplete: {
     expandResult: 'View all search results for "{name}"'
   }
-}, _t = {
+}, Wt = {
   common: {
-    searchStore: "搜索商店内应用",
+    title: "Blocklet 商店",
+    searchStore: "搜索 Blocklet",
     showResources: "显示资源型应用",
     price: "价格",
     category: "类别",
     resourceType: "资源类型",
     clear: "清除",
     cancel: "取消",
-    search: "搜索"
+    search: "搜索",
+    fetchError: "获取数据失败, 请稍后再试"
+  },
+  explore: {
+    title: "探索",
+    trending: "趋势",
+    topRated: "评分最高",
+    recentlyUpdated: "最近更新",
+    viewDetail: "查看详情"
   },
   sort: {
     sort: "排序",
-    nameDescend: "名称降序",
-    nameAscend: "名称升序",
+    rating: "评分",
     popularity: "最热门",
     lastPublished: "最新发布"
   },
@@ -128,8 +232,9 @@ const zt = It((e) => Promise.resolve(e), 300), Dt = {
   },
   blocklet: {
     noResults: "暂无应用",
-    free: "免费应用",
-    payment: "付费应用",
+    free: "免费",
+    search: '搜索 "{keyword}" 的结果',
+    resultCount: "{count} 个 Blocklet",
     emptyTip: "建议:",
     filterTip: "适当减少筛选条件",
     keywordTip: "尝试其他关键字",
@@ -142,322 +247,592 @@ const zt = It((e) => Promise.resolve(e), 300), Dt = {
   autocomplete: {
     expandResult: "查看 “{name}” 的所有搜索结果"
   }
-}, re = {
-  en: be(Dt),
-  zh: be(_t)
-}, Be = {
-  filters: o.shape({
-    keyword: o.string,
-    sortBy: o.string,
-    sortDirection: o.string,
-    price: o.string,
-    category: o.string,
-    developer: o.string,
-    resourceType: o.string
-  }),
-  wrapChildren: o.func,
-  extraFilter: o.func,
-  serverVersion: o.string,
-  endpoint: o.string.isRequired,
-  blockletRender: o.func.isRequired,
-  onFilterChange: o.func,
-  onSearchSelect: o.func,
-  locale: o.oneOf(["zh", "en"]),
-  baseSearch: o.bool,
-  // sometimes blocklet list can be rendered only before the category is fetched
-  fetchCategoryDelay: o.number,
-  showResourcesSwitch: o.bool,
-  showCategory: o.bool,
-  tagFilters: o.array
-}, $e = {
-  locale: "zh",
-  filters: {},
-  serverVersion: "",
-  onFilterChange: () => {
+}, Y = {
+  en: he(Vt),
+  zh: he(Wt)
+}, _e = (e, r) => {
+  const o = {};
+  return e && (o["x-blocklet-server-version"] = e), r && (o["x-blocklet-store-version"] = r), o;
+}, Ut = (e) => (r, o) => {
+  const n = Y[e] ? Y[e][r] : Y.en[r];
+  return Mt(n, o) || r;
+}, Fe = {
+  errors: {
+    fetchBlockletsError: null,
+    fetchCategoriesError: null
   },
-  onSearchSelect: ({ detailUrl: e }) => {
-    window.location.href = e;
+  loadings: {
+    fetchBlockletsLoading: !1,
+    fetchCategoriesLoading: !1,
+    loadingMore: !1
   },
-  wrapChildren: (e) => e,
-  extraFilter: (e) => e,
+  endpoint: "",
+  blockletList: [],
+  wrapChildren: () => null,
+  t: (e) => e,
+  storeVersion: "",
+  serverVersion: "",
+  filters: {},
+  selectedCategory: void 0,
+  categoryList: [],
+  blockletRender: () => null,
+  locale: "en",
+  categoryOptions: [],
+  priceOptions: [],
+  storeApi: null,
   baseSearch: !1,
-  fetchCategoryDelay: 0,
   showResourcesSwitch: !1,
-  showCategory: !0,
-  tagFilters: []
-}, N = {
-  nameAsc: "title",
-  nameDesc: "title",
-  popularity: "stats.downloads",
-  publishAt: "lastPublishedAt",
-  mobilePageSize: 10,
-  pageSize: 18,
-  currentPage: 1,
-  defaultCurrentPage: 1,
-  blockletsPath: "/api/v2/blocklets.json",
-  categoriesPath: "/api/blocklets/categories",
-  cacheSize: 100
-}, Ie = Ge({}), { Provider: Nt, Consumer: $r } = Ie;
-function ie({
+  showCategory: !1,
+  tagFilters: [],
+  hasNextPage: !1,
+  onFilterChange: () => {
+  },
+  handleSort: () => {
+  },
+  cleanFilter: () => {
+  },
+  handleKeyword: () => {
+  },
+  handlePrice: () => {
+  },
+  handleCategory: () => {
+  },
+  handleDeveloper: () => {
+  },
+  handlePage: () => {
+  },
+  handleSwitchShowResources: () => {
+  },
+  loadMore: () => {
+  },
+  getCategoryLocale: () => null,
+  developerName: "",
+  handleSearchSelect: () => {
+  }
+}, Ae = Be(Fe), { Provider: Ht, Consumer: Hr } = Ae;
+function oe({
   filters: e,
-  children: n,
-  endpoint: r,
-  locale: a,
-  blockletRender: s,
-  onFilterChange: c,
-  onSearchSelect: w,
-  extraFilter: g,
-  wrapChildren: m,
-  baseSearch: x,
-  serverVersion: u,
-  storeVersion: S,
-  fetchCategoryDelay: B,
-  showResourcesSwitch: T,
-  showCategory: $,
-  tagFilters: C
+  children: r,
+  endpoint: o,
+  locale: n,
+  blockletRender: a,
+  onFilterChange: l,
+  onSearchSelect: m,
+  extraFilter: d,
+  wrapChildren: s,
+  baseSearch: k,
+  serverVersion: f,
+  storeVersion: g,
+  fetchCategoryDelay: c,
+  showResourcesSwitch: x,
+  showCategory: w,
+  tagFilters: v
 }) {
-  const y = {};
-  u && (y["x-blocklet-server-version"] = u), S && (y["x-blocklet-store-version"] = S);
-  const d = Q(() => it.create({
-    baseURL: r,
-    headers: y
-  }), [r]), i = Q(() => ({
-    sortBy: "popularity",
-    sortDirection: "desc",
-    ...e
-  }), [e]), b = i.category, k = Pe({
-    currentPage: N.currentPage,
-    pageSize: Bt() ? N.mobilePageSize : N.pageSize,
-    defaultCurrentPage: N.defaultCurrentPage
-  }), [z, I] = E(null), v = Xe(
-    async (l) => {
-      l || (k.currentPage = k.defaultCurrentPage);
-      const { currentPage: p, pageSize: P } = k, A = {
-        ...i,
-        sortBy: N[i.sortBy],
-        page: p,
-        pageSize: P
-      };
-      I(null);
-      const { data: D = {} } = await d.get(N.blockletsPath, {
-        params: A
-      });
-      return k.currentPage++, {
-        page: p,
-        pageSize: P,
-        list: (D == null ? void 0 : D.dataList) || [],
-        total: (D == null ? void 0 : D.total) || 0
-      };
-    },
-    {
-      isNoMore: (l) => l ? l.page * l.pageSize >= l.total : !1,
-      reloadDeps: [r, st(e)],
-      onError: (l) => {
-        I(l);
-      }
-    }
-  ), {
-    data: V = [],
-    error: ee,
-    loading: O,
-    run: W
-  } = Ye(
-    async () => {
-      const { data: l } = await d.get(N.categoriesPath);
-      return Array.isArray(l) ? l : [];
-    },
-    { manual: !0 }
-  ), F = Q(() => at(V || [], [(p) => p.name], ["asc"]), [V]), G = ne(
-    (l, p) => {
-      const P = re[a] ? re[a][l] : re.en[l];
-      return Rt(P, p);
-    },
-    [a]
-  ), K = Q(() => {
-    var p;
-    let l = ((p = v.data) == null ? void 0 : p.list) || [];
-    return l = g(l), l;
-  }, [v.data, g]), f = Q(() => Pt(F, a), [F, a]), H = Tt(G), M = {
-    errors: { fetchBlockletsError: z, fetchCategoriesError: ee },
+  const z = _e(f, g), y = E(() => Pe.create({ baseURL: o, headers: z }), [o]), u = { sortBy: "popularity", sortDirection: "desc", ...e }, C = u.category, $ = pt({
+    currentPage: R.currentPage,
+    pageSize: Nt() ? R.mobilePageSize : R.pageSize,
+    defaultCurrentPage: R.defaultCurrentPage
+  }), [_, L] = q(null), I = _t(y, u, $, L), {
+    data: Q = [],
+    error: je,
+    loading: Ve,
+    run: se
+  } = Ft(y), X = E(() => dt(Q, [(h) => h.name], ["asc"]), [Q]), ce = E(() => {
+    var h;
+    return d(((h = I.data) == null ? void 0 : h.list) || []);
+  }, [I.data, d]), de = J(Ut(n), [n]), We = E(() => Et(X, n), [X, n]), Ue = Dt(de), He = {
+    errors: { fetchBlockletsError: _, fetchCategoriesError: je },
     loadings: {
-      fetchBlockletsLoading: v.loading,
-      fetchCategoriesLoading: O,
-      loadingMore: v.loadingMore
+      fetchBlockletsLoading: I.loading,
+      fetchCategoriesLoading: Ve,
+      loadingMore: I.loadingMore
     },
-    endpoint: r,
-    blockletList: K,
-    wrapChildren: m,
-    t: G,
-    serverVersion: u,
-    filters: i,
-    selectedCategory: b,
-    categoryList: F,
-    blockletRender: s,
-    locale: a,
-    categoryOptions: f,
-    priceOptions: H,
-    storeApi: d,
-    baseSearch: x,
-    showResourcesSwitch: T,
-    showCategory: $,
-    tagFilters: C,
-    hasNextPage: !v.noMore,
-    onFilterChange: c,
-    handleSort: (l) => {
-      const p = {
-        ...i,
-        sortBy: l,
-        sortDirection: l === "nameAsc" ? "asc" : "desc"
-      };
-      c(p);
+    endpoint: o,
+    blockletList: ce,
+    wrapChildren: s,
+    t: de,
+    storeVersion: g,
+    serverVersion: f,
+    filters: u,
+    selectedCategory: C,
+    categoryList: X,
+    blockletRender: a,
+    locale: n,
+    categoryOptions: We,
+    priceOptions: Ue,
+    storeApi: y,
+    baseSearch: k,
+    showResourcesSwitch: x,
+    showCategory: w,
+    tagFilters: v,
+    hasNextPage: !I.noMore,
+    onFilterChange: l,
+    cleanFilter: (h) => {
+      const b = h ? ht(u, (A, M) => h == null ? void 0 : h.includes(M)) : {};
+      l(b);
     },
-    handleKeyword: (l) => {
-      const p = { ...i, keyword: l || void 0 };
-      c(p);
+    handleSort: (h) => {
+      const b = { ...u, sortBy: h, sortDirection: h === "nameAsc" ? "asc" : "desc" };
+      l(b);
     },
-    handlePrice: (l) => {
-      const p = {
-        ...i,
-        price: l === i.price ? void 0 : l
-      };
-      c(p);
+    handleKeyword: (h) => {
+      const b = { ...u, keyword: h || void 0 };
+      l(b);
     },
-    handleCategory: (l) => {
-      let p = l;
-      (l === "all" || l === i.category) && (p = void 0);
-      const P = { ...i, category: p };
-      c(P);
+    handlePrice: (h) => {
+      const b = { ...u, price: h === u.price ? void 0 : h };
+      l(b);
     },
-    handleDeveloper: (l) => {
-      const p = { ...i, owner: l || void 0 };
-      c(p);
+    handleCategory: (h) => {
+      const b = h === "all" || h === u.category ? "" : h, A = { ...u, category: b };
+      l(A);
     },
-    handlePage: (l) => {
-      const p = { ...i, currentPage: l };
-      c(p);
+    handleDeveloper: (h) => {
+      const b = { ...u, owner: h || void 0 };
+      l(b);
+    },
+    handlePage: (h) => {
+      const b = { ...u, currentPage: h };
+      l(b);
     },
     handleSwitchShowResources: () => {
-      const l = { ...i };
-      c(l);
+      const h = { ...u };
+      l(h);
     },
-    loadMore: v.loadMore,
-    getCategoryLocale: (l) => {
-      if (!l)
+    loadMore: I.loadMore,
+    getCategoryLocale: (h) => {
+      if (!h)
         return null;
-      let p = null;
-      const P = V.find((A) => A._id === l);
-      return P && (p = P.locales[a] || P.locales.en), p;
+      const b = Q.find((A) => A._id === h);
+      return b ? b.locales[n] || b.locales.en : null;
     },
     get developerName() {
-      var p, P;
-      return ((P = (p = K.find((A) => {
-        var D;
-        return ((D = A == null ? void 0 : A.owner) == null ? void 0 : D.did) === i.owner;
-      })) == null ? void 0 : p.owner) == null ? void 0 : P.name) || "";
+      var b, A;
+      return ((A = (b = ce.find((M) => {
+        var ue;
+        return ((ue = M == null ? void 0 : M.owner) == null ? void 0 : ue.did) === u.owner;
+      })) == null ? void 0 : b.owner) == null ? void 0 : A.name) || "";
     },
-    handleSearchSelect: w
+    handleSearchSelect: m
   };
   return j(() => {
-    setTimeout(() => {
-      W();
-    }, B || 0);
-  }, [r]), /* @__PURE__ */ t(Nt, { value: M, children: n });
+    setTimeout(se, c || 0);
+  }, [o, se, c]), /* @__PURE__ */ t(Ht, { value: He, children: r });
 }
-ie.propTypes = {
-  ...Be,
-  children: o.any.isRequired
+oe.propTypes = {
+  ...ze,
+  children: i.any.isRequired
 };
-ie.defaultProps = $e;
-function L() {
-  const e = Ke(Ie);
-  return e || {};
+oe.defaultProps = $e;
+function B() {
+  const e = Re(Ae);
+  return e || Fe;
+}
+function De({
+  children: e,
+  onClick: r,
+  size: o = 32
+}) {
+  return /* @__PURE__ */ t(
+    Z,
+    {
+      onClick: r,
+      variant: "outlined",
+      sx: {
+        minWidth: o,
+        height: o,
+        p: 0,
+        borderColor: "divider",
+        "&:hover": {
+          borderColor: "divider"
+        },
+        borderRadius: 2,
+        color: "text.secondary"
+      },
+      children: e
+    }
+  );
+}
+function V(e, r) {
+  return e === void 0 ? r : e;
+}
+function G({
+  xs: e,
+  sm: r,
+  md: o,
+  lg: n,
+  xl: a,
+  exact: l
+}) {
+  const m = Ge(), d = N(m.breakpoints.down("sm")), s = N(m.breakpoints.between("sm", "md")), k = N(m.breakpoints.between("md", "lg")), f = N(m.breakpoints.between("lg", "xl"));
+  if (l)
+    return d ? e || null : s ? r || null : k ? o || null : f ? n || null : a || null;
+  let g = e;
+  return d || (g = V(r, g), s) || (g = V(o, g), k) || (g = V(n, g), f) ? g : V(a, g);
+}
+function Gt({ children: e }) {
+  const { open: r, toggleOpen: o } = re();
+  return /* @__PURE__ */ t(
+    G,
+    {
+      xs: /* @__PURE__ */ t(Qe, { open: r, onClose: () => o(!1), children: e }),
+      md: /* @__PURE__ */ t(S, { children: e })
+    }
+  );
+}
+function Ee() {
+  const { filters: e, handlePrice: r, t: o } = B();
+  return /* @__PURE__ */ t(P, { direction: "row", alignItems: "center", width: { xs: "100%", md: "auto" }, justifyContent: "space-between", children: /* @__PURE__ */ t(
+    ke,
+    {
+      control: /* @__PURE__ */ t(
+        ve,
+        {
+          checked: e.price === "free",
+          size: "small",
+          sx: { "& .MuiSvgIcon-fontSizeSmall": { fontSize: 16, color: "text.lighter" } },
+          onChange: (n) => r(n.target.checked ? "free" : "")
+        }
+      ),
+      label: o("blocklet.free")
+    }
+  ) });
+}
+function Qt() {
+  const { selectedCategory: e, handleCategory: r, t: o, categoryOptions: n, filters: a, cleanFilter: l, loadings: m } = B(), { toggleOpen: d } = re();
+  return /* @__PURE__ */ p(Gt, { children: [
+    /* @__PURE__ */ t(
+      G,
+      {
+        xs: /* @__PURE__ */ p(
+          P,
+          {
+            direction: "row",
+            justifyContent: "space-between",
+            alignItems: "center",
+            p: 2,
+            mb: 0.5,
+            gap: 2,
+            borderBottom: 1,
+            borderColor: "divider",
+            children: [
+              /* @__PURE__ */ t(De, { onClick: () => d(!1), children: /* @__PURE__ */ t(Se, {}) }),
+              /* @__PURE__ */ t(T, { flex: 1, variant: "body1", fontWeight: "fontWeightMedium", children: "Categories" })
+            ]
+          }
+        ),
+        md: null
+      }
+    ),
+    /* @__PURE__ */ t(
+      P,
+      {
+        visibility: m.fetchCategoriesLoading ? "hidden" : "visible",
+        width: { xs: 268, md: 200 },
+        boxSizing: "content-box",
+        p: { xs: 2, md: 0 },
+        pr: { md: 6 },
+        children: a.keyword ? /* @__PURE__ */ t(Ee, {}) : /* @__PURE__ */ p(F, { children: [
+          /* @__PURE__ */ p(S, { display: "flex", alignItems: "center", gap: 1, children: [
+            /* @__PURE__ */ t(Ce, { icon: lt }),
+            /* @__PURE__ */ t(
+              T,
+              {
+                variant: "body1",
+                color: e ? "text.lighter" : "text.primary",
+                fontWeight: e ? void 0 : "fontWeightMedium",
+                sx: { cursor: "pointer" },
+                onClick: () => {
+                  d(!1), l();
+                },
+                children: o("explore.title")
+              }
+            )
+          ] }),
+          !!n.length && /* @__PURE__ */ t(P, { pt: 3, mt: 3, borderTop: 1, borderColor: "divider", gap: 2, children: n.map((s) => /* @__PURE__ */ t(
+            T,
+            {
+              variant: "body1",
+              title: s.name,
+              sx: { cursor: "pointer" },
+              "data-cy": "filter",
+              color: e === s.value ? "text.primary" : "text.lighter",
+              textTransform: "capitalize",
+              onClick: () => {
+                e === s.value ? l() : r(s.value), d(!1);
+              },
+              children: s.name
+            },
+            s.value
+          )) })
+        ] })
+      }
+    )
+  ] });
+}
+function Me() {
+  const { endpoint: e, serverVersion: r, storeVersion: o } = B(), n = _e(r, o), a = E(() => Pe.create({
+    baseURL: e,
+    headers: n
+  }), [e]);
+  return {
+    get: async (l) => {
+      const { data: m } = await a.get(l);
+      return m;
+    },
+    post: async (l, m) => {
+      const { data: d } = await a.post(l, m);
+      return d;
+    }
+  };
+}
+const Ne = at(function(r) {
+  return /* @__PURE__ */ t(Te, { height: 60, display: "flex", alignItems: "center", justifyContent: "center", ...r, children: /* @__PURE__ */ t(ee, {}) });
+});
+function fe({
+  icon: e,
+  children: r,
+  maxWidth: o = 100,
+  title: n
+}) {
+  return (r === 0 || r) && /* @__PURE__ */ p(P, { direction: "row", alignItems: "center", gap: 1, sx: { maxWidth: o, overflow: "hidden" }, children: [
+    e,
+    /* @__PURE__ */ t(
+      T,
+      {
+        flex: 1,
+        variant: "body2",
+        sx: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
+        title: n || (typeof r == "string" ? r : void 0),
+        children: r
+      }
+    )
+  ] });
+}
+const ge = 292;
+function Xt() {
+  var f, g;
+  const { t: e } = B(), { post: r } = Me(), o = ((g = (f = window.blocklet) == null ? void 0 : f.preferences) == null ? void 0 : g.homeBanner) || [], { data: n = [] } = te(async () => {
+    const c = await r(R.exploreDidsPath, { didList: o.map((x) => x.did) });
+    return Array.isArray(c) ? c : [];
+  }), a = {
+    position: "absolute",
+    top: "50%",
+    transform: "translateY(-50%)",
+    zIndex: 100,
+    cursor: "pointer",
+    color: "text.lighter"
+  };
+  return o.length > 0 ? /* @__PURE__ */ p(F, { children: [
+    /* @__PURE__ */ t(T, { component: "h2", variant: "h2", mt: { xs: 2, md: 0 }, mb: 3, children: e("explore.title") }),
+    /* @__PURE__ */ t(S, { height: { xs: "auto", md: ge }, position: "relative", bgcolor: "#F0F7FF", borderRadius: 3, children: /* @__PURE__ */ t(
+      kt,
+      {
+        showNav: !0,
+        autoPlay: !0,
+        slideDuration: 1e3,
+        slideInterval: 5e3,
+        showPlayButton: !1,
+        showIndex: !1,
+        showBullets: !1,
+        showThumbnails: !1,
+        showFullscreenButton: !1,
+        renderLeftNav: (c) => /* @__PURE__ */ t(S, { onClick: c, sx: { display: { xs: "none", md: "block" } }, children: /* @__PURE__ */ t(xt, { sx: { ...a, left: 5 } }) }),
+        renderRightNav: (c) => /* @__PURE__ */ t(S, { onClick: c, sx: { display: { xs: "none", md: "block" } }, children: /* @__PURE__ */ t(wt, { sx: { ...a, right: 5 } }) }),
+        items: o.map((c, x) => ({
+          original: c.did,
+          renderItem: () => {
+            const w = n[x];
+            return /* @__PURE__ */ p(
+              P,
+              {
+                height: { xs: "auto", md: ge },
+                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: [
+                  l(c.cover || w.screenshots[0]),
+                  /* @__PURE__ */ p(P, { flex: 1, height: "100%", gap: 3, children: [
+                    /* @__PURE__ */ p(S, { flex: 1, children: [
+                      m(c.name || w.title || c.name),
+                      d(c.desc || w.description)
+                    ] }),
+                    w && s(w, c.baseNum),
+                    k(c.link, c.did)
+                  ] })
+                ]
+              }
+            );
+          }
+        }))
+      }
+    ) })
+  ] }) : null;
+  function l(c) {
+    return /* @__PURE__ */ t(S, { width: { xs: "100%", md: 338 }, height: 210, borderRadius: 2, overflow: "hidden", children: /* @__PURE__ */ t("img", { src: c, alt: "", style: { width: "100%", height: "100%", objectFit: "cover" } }) });
+  }
+  function m(c) {
+    return /* @__PURE__ */ t(T, { variant: "h2", width: "100%", children: c });
+  }
+  function d(c) {
+    return /* @__PURE__ */ t(
+      T,
+      {
+        variant: "body2",
+        color: "text.secondary",
+        textAlign: "left",
+        width: "100%",
+        pt: 1,
+        sx: {
+          display: "-webkit-box",
+          lineClamp: 3,
+          WebkitLineClamp: 3,
+          maxHeight: 71,
+          textWrap: "wrap",
+          overflow: "hidden",
+          WebkitBoxOrient: "vertical"
+        },
+        children: c
+      }
+    );
+  }
+  function s(c, x = 0) {
+    const { did: w, owner: v, stats: z } = c;
+    return /* @__PURE__ */ p(S, { display: "flex", alignItems: "center", gap: 2, color: "text.secondary", children: [
+      /* @__PURE__ */ t(fe, { icon: /* @__PURE__ */ t(yt, { src: v.avatar, did: w, size: 20, variant: "circle" }), children: v.fullName }),
+      /* @__PURE__ */ t(fe, { icon: /* @__PURE__ */ t(Ce, { icon: bt }), title: `${z.downloads + x}`, children: Yt(z.downloads + x) })
+    ] });
+  }
+  function k(c, x) {
+    return /* @__PURE__ */ t(Xe, { href: c || `/blocklets/${x}`, align: "left", width: 100, children: /* @__PURE__ */ t(
+      Z,
+      {
+        variant: "outlined",
+        size: "small",
+        fullWidth: !0,
+        sx: {
+          bgcolor: "white",
+          borderColor: "divider",
+          "&:hover": { borderColor: "divider" }
+        },
+        children: e("explore.viewDetail")
+      }
+    ) });
+  }
+}
+const Yt = (e) => Number.isNaN(e) ? 0 : e < 1e3 ? e : e < 1e6 ? `${(e / 1e3).toFixed(1)}k` : e < 1e9 ? `${(e / 1e6).toFixed(1)}m` : `${(e / 1e9).toFixed(1)}b`;
+function Jt({ title: e, blocklets: r }) {
+  const { blockletRender: o, serverVersion: n } = B();
+  return /* @__PURE__ */ p(S, { mt: 3, children: [
+    /* @__PURE__ */ t(T, { component: "h3", variant: "h3", sx: { mb: 2 }, children: e }),
+    /* @__PURE__ */ t(pe, { container: !0, spacing: 2, children: r.map((a) => /* @__PURE__ */ t(pe, { item: !0, xs: 12, md: 6, p: "2px", "data-blocklet-did": a.did, children: /* @__PURE__ */ t(S, { padding: "1px", children: o({ blocklet: a, blocklets: r, serverVersion: n }) }) }, a.did)) })
+  ] });
+}
+function Kt() {
+  const { get: e } = Me(), { t: r } = B(), {
+    data: o = [],
+    error: n,
+    loading: a
+  } = te(async () => {
+    const l = await e(R.explorePath);
+    return Array.isArray(l) ? l : [];
+  });
+  return n ? /* @__PURE__ */ t(K, { error: new Error(`Failed to fetch blocklets from ${R.explorePath}`) }) : a ? /* @__PURE__ */ t(Ne, { mt: 15 }) : /* @__PURE__ */ p(F, { children: [
+    /* @__PURE__ */ t(Xt, {}),
+    o.map(
+      (l) => l.blocklets.length > 0 ? /* @__PURE__ */ t(Jt, { title: r(`explore.${l.type}`), blocklets: l.blocklets }, l.type) : null
+    )
+  ] });
 }
-const Lt = R(Ne)`
+const Zt = D(Z)`
   border-radius: 4px;
-`, se = He(({ children: e, rounded: n, loading: r, disabled: a, ...s }, c) => /* @__PURE__ */ t(
-  Lt,
+`, ne = it(({ children: e, rounded: r, loading: o, disabled: n, ...a }, l) => /* @__PURE__ */ t(
+  Zt,
   {
-    ref: c,
+    ref: l,
     disableElevation: !0,
-    disabled: a || r,
-    ...s,
-    startIcon: r && /* @__PURE__ */ t(oe, { size: "1em" }),
+    disabled: n || o,
+    ...a,
+    startIcon: o && /* @__PURE__ */ t(ee, { size: "1em" }),
     children: e
   }
 ));
-se.propTypes = {
-  children: o.any,
-  rounded: o.bool,
-  loading: o.bool,
-  disabled: o.bool
+ne.propTypes = {
+  children: i.any,
+  rounded: i.bool,
+  loading: i.bool,
+  disabled: i.bool
 };
-se.defaultProps = {
+ne.defaultProps = {
   children: null,
   rounded: !1,
   loading: !1,
   disabled: !1
 };
-function ce({ title: e, value: n, icon: r, prepend: a, options: s, onChange: c, itemRender: w, ...g }) {
-  const m = J(null), x = ae(), [u, S] = E(!1), [B, T] = E(n !== null ? n : ""), $ = Se(x.breakpoints.down("sm"));
+function le({ title: e, value: r, icon: o, prepend: n, options: a, onChange: l, itemRender: m, ...d }) {
+  const s = U(null), k = be(), [f, g] = q(!1), [c, x] = q(r !== null ? r : ""), w = N(k.breakpoints.down("sm"));
   j(() => {
-    T(n !== null ? n : "");
-  }, [n]);
-  const C = ne(() => {
-    S(!1);
-  }, []), y = ne(() => {
-    S(!0);
+    x(r !== null ? r : "");
+  }, [r]);
+  const v = J(() => {
+    g(!1);
+  }, []), z = J(() => {
+    g(!0);
   }, []);
-  function d(b) {
-    T(b.value), c(b.value), $ && C();
+  function y(C) {
+    x(C.value), l(C.value), w && v();
   }
-  function i(b) {
-    return b === B;
+  function u(C) {
+    return C === c;
   }
-  return /* @__PURE__ */ h(le, { children: [
-    /* @__PURE__ */ h(
-      Mt,
+  return /* @__PURE__ */ p(F, { children: [
+    /* @__PURE__ */ p(
+      er,
       {
-        ref: m,
-        onClick: y,
+        ref: s,
+        onClick: z,
         variant: "outlined",
         size: "small",
-        className: ["my-select__selector", ut(B) ? "" : "my-select__selector--active"].join(" "),
+        className: ["my-select__selector", Ct(c) ? "" : "my-select__selector--active"].join(" "),
         sx: { minWidth: "auto" },
-        ...g,
+        ...d,
         children: [
-          /* @__PURE__ */ t("div", { className: "my-select__icon", children: r }),
+          /* @__PURE__ */ t("div", { className: "my-select__icon", children: o }),
           e,
-          /* @__PURE__ */ t(Me, { className: "my-select__arrowdown", component: pt, fontSize: "small" })
+          /* @__PURE__ */ t(Je, { className: "my-select__arrowdown", component: vt, fontSize: "small" })
         ]
       }
     ),
-    /* @__PURE__ */ t(Oe, { open: u, anchorEl: m.current, transition: !0, sx: { zIndex: "9999" }, children: ({ TransitionProps: b, placement: k }) => /* @__PURE__ */ t(Fe, { ...b, sx: { transformOrigin: k === "bottom" ? "center top" : "center bottom" }, children: /* @__PURE__ */ t(Ae, { children: /* @__PURE__ */ t(Ee, { onClickAway: C, children: /* @__PURE__ */ h(Ot, { autoFocusItem: u, onMouseEnter: y, onMouseLeave: C, children: [
-      a,
-      s.map((z) => w ? w(z) : /* @__PURE__ */ t(
-        qe,
+    /* @__PURE__ */ t(Ke, { open: f, anchorEl: s.current, transition: !0, sx: { zIndex: "9999" }, children: ({ TransitionProps: C, placement: $ }) => /* @__PURE__ */ t(Ze, { ...C, sx: { transformOrigin: $ === "bottom" ? "center top" : "center bottom" }, children: /* @__PURE__ */ t(et, { children: /* @__PURE__ */ t(tt, { onClickAway: v, children: /* @__PURE__ */ p(tr, { autoFocusItem: f, onMouseEnter: z, onMouseLeave: v, children: [
+      n,
+      a.map((_) => m ? m(_) : /* @__PURE__ */ t(
+        rt,
         {
-          onClick: () => d(z),
+          onClick: () => y(_),
           className: [
             "my-select__option",
-            i(z.value) ? "my-select__option--active" : ""
+            u(_.value) ? "my-select__option--active" : ""
           ].join(" "),
-          children: z.name
+          children: _.name
         },
-        z.value
+        _.value
       ))
     ] }) }) }) }) })
   ] });
 }
-ce.propTypes = {
-  options: o.array.isRequired,
-  value: o.oneOfType([o.string, o.number, o.array]),
-  onChange: o.func,
-  itemRender: o.func,
-  title: o.string.isRequired,
-  icon: o.any,
-  prepend: o.any
+le.propTypes = {
+  options: i.array.isRequired,
+  value: i.oneOfType([i.string, i.number, i.array]),
+  onChange: i.func,
+  itemRender: i.func,
+  title: i.string.isRequired,
+  icon: i.any,
+  prepend: i.any
 };
-ce.defaultProps = {
+le.defaultProps = {
   value: null,
   icon: null,
   prepend: null,
@@ -465,11 +840,11 @@ ce.defaultProps = {
   onChange: () => {
   }
 };
-const Mt = R(se)`
+const er = D(ne)`
   border: 1px solid #f0f0f0;
   padding: 6px 8px 6px 12px;
-  font-weight: ${(e) => e.theme.typography.fontWeightBold};
-  font-size: 16px;
+  font-weight: ${(e) => e.theme.typography.fontWeightRegular};
+  font-size: 14px;
   color: #666;
   line-height: 1;
   text-transform: none;
@@ -485,7 +860,7 @@ const Mt = R(se)`
   }
   .my-select__arrowdown {
     color: #999;
-    font-size: 16px;
+    font-size: 14px;
     margin-left: 6px;
   }
   .my-select__icon {
@@ -496,14 +871,14 @@ const Mt = R(se)`
       margin-right: 3px;
     }
   }
-`, Ot = R(Le)`
+`, tr = D(Ye)`
   .my-select__option__icon {
     color: transparent;
-    font-size: 16px;
+    font-size: 14px;
     margin: 0 3px 0 -5px;
   }
   .my-select__option {
-    font-size: 16px;
+    font-size: 14px;
     color: #999;
   }
   .my-select__option--active {
@@ -513,268 +888,170 @@ const Mt = R(se)`
     }
   }
 `;
-function U({ options: e, onChange: n, title: r, value: a }) {
-  return /* @__PURE__ */ h(Ft, { children: [
-    /* @__PURE__ */ t("div", { className: "title", children: r }),
-    /* @__PURE__ */ t("div", { className: "list", children: e.map((s) => /* @__PURE__ */ t(
-      "div",
-      {
-        title: s.name,
-        "data-cy": "filter",
-        className: a === s.value ? "select item" : "item",
-        onClick: () => n(s.value),
-        children: s.name
-      },
-      s.value
-    )) })
-  ] });
-}
-const Ft = R("div")`
-  .title {
-    font-size: 18px;
-    font-weight: bold;
-    margin-bottom: ${(e) => e.theme.spacing(1)};
-  }
-  .list {
-  }
-  .item {
-    font-size: 16px;
-    padding: ${(e) => e.theme.spacing(1)};
-    color: #9397a1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    text-transform: capitalize;
-    cursor: pointer;
-    &:hover {
-      background-color: ${(e) => e.theme.palette.grey[50]};
-      color: initial;
-      font-weight: bold;
+function rr() {
+  var d;
+  const { filters: e, handleSort: r, handlePrice: o, t: n, getCategoryLocale: a } = B(), l = At(n), m = ((d = l.find((s) => s.value === e.sortBy)) == null ? void 0 : d.name) || n("sort.sort");
+  return /* @__PURE__ */ p(
+    P,
+    {
+      direction: { xs: "column", md: "row" },
+      alignItems: { xs: "flex-start", md: "center" },
+      justifyContent: "space-between",
+      spacing: { xs: 1, md: 0 },
+      pt: { xs: 2, md: 0 },
+      px: 0,
+      pb: 3,
+      children: [
+        /* @__PURE__ */ t(T, { variant: "h2", textTransform: "capitalize", children: a(e.category) }),
+        /* @__PURE__ */ p(P, { direction: "row", alignItems: "center", width: { xs: "100%", md: "auto" }, justifyContent: "space-between", children: [
+          /* @__PURE__ */ t(
+            ke,
+            {
+              control: /* @__PURE__ */ t(
+                ve,
+                {
+                  checked: e.price === "free",
+                  size: "small",
+                  sx: { "& .MuiSvgIcon-fontSizeSmall": { fontSize: 16, color: "text.lighter" } },
+                  onChange: (s) => o(s.target.checked ? "free" : "")
+                }
+              ),
+              label: n("blocklet.free")
+            }
+          ),
+          /* @__PURE__ */ t(
+            le,
+            {
+              value: e.sortBy,
+              options: l,
+              title: m,
+              onChange: r,
+              icon: null,
+              prepend: null,
+              itemRender: null
+            }
+          )
+        ] })
+      ]
     }
-  }
-  .select {
-    color: ${(e) => e.theme.palette.primary.main};
-    font-weight: bold;
-  }
-`;
-U.propTypes = {
-  title: o.string.isRequired,
-  options: o.array.isRequired,
-  onChange: o.func.isRequired,
-  value: o.oneOfType([o.string, o.number])
-};
-U.defaultProps = {
-  value: null
-};
-function pe() {
-  const { selectedCategory: e, handleCategory: n, t: r, handlePrice: a, filters: s, categoryOptions: c, priceOptions: w } = L(), [g, m] = E(!1), x = (u, S) => {
-    u === "category" && n(S), u === "price" && a(S), m(!1);
-  };
-  return /* @__PURE__ */ h(At, { children: [
-    /* @__PURE__ */ t(ht, { variant: "outlined", className: "filter-button", onClick: () => m(!0), children: /* @__PURE__ */ t(dt, { className: "filter-icon", fontSize: "small" }) }),
-    /* @__PURE__ */ h(mt, { fullWidth: !0, title: "", open: g, onClose: () => m(!1), children: [
-      /* @__PURE__ */ t(
-        U,
-        {
-          title: r("common.price"),
-          options: w,
-          value: s.price,
-          onChange: (u) => {
-            x("price", u);
-          }
-        }
-      ),
-      c.length > 0 && /* @__PURE__ */ t("div", { style: { marginTop: "16px" }, children: /* @__PURE__ */ t(
-        U,
-        {
-          title: r("common.category"),
-          options: c,
-          value: e,
-          onChange: (u) => {
-            x("category", u);
-          }
-        }
-      ) })
-    ] })
-  ] });
-}
-const At = R("div")`
-  .filter-button {
-    border-color: rgb(240, 240, 240);
-    padding: 5px 8px;
-    min-width: initial;
-  }
-  .filter-icon {
-    cursor: pointer;
-    color: ${(e) => e.theme.palette.grey[500]};
-  }
-`;
-pe.propTypes = {};
-pe.defaultProps = {};
-const Et = R("div")`
-  .MuiChip-root {
-    border-radius: 4px;
-    height: initial;
-    text-transform: capitalize;
-    margin-right: ${(e) => e.theme.spacing(2)};
-    padding: 4px 0;
-  }
-`;
-function q({ label: e, icon: n, onDelete: r, ...a }) {
-  return e ? /* @__PURE__ */ t(Et, { ...a, children: /* @__PURE__ */ t(Ce, { color: "primary", "data-cy": "filter-tag", icon: n, label: e, onDelete: r }) }) : null;
+  );
 }
-q.propTypes = {
-  label: o.string,
-  onDelete: o.func,
-  icon: o.element
-};
-q.defaultProps = {
-  onDelete: null,
-  icon: null,
-  label: null
-};
-function we() {
-  const { t: e } = L();
-  return /* @__PURE__ */ t(Re, { style: { textAlign: "center" }, variant: "subtitle2", children: e("blocklet.noResults") });
+function ye() {
+  const { t: e } = B();
+  return /* @__PURE__ */ t(Ie, { style: { textAlign: "center" }, variant: "subtitle2", children: e("blocklet.noResults") });
 }
-function X({ filterTip: e, keywordTip: n }) {
-  const { t: r, locale: a } = L(), s = () => a === "zh" ? "、" : " , ";
-  return /* @__PURE__ */ h(yt, { className: "tips", children: [
-    /* @__PURE__ */ t("span", { style: { marginRight: "16px" }, children: r("blocklet.emptyTip") }),
-    e && /* @__PURE__ */ t("span", { children: r("blocklet.filterTip") }),
-    e && n && s(),
-    n && /* @__PURE__ */ t("span", { children: r("blocklet.keywordTip") })
+function O({ filterTip: e, keywordTip: r }) {
+  const { t: o, locale: n } = B(), a = () => n === "zh" ? "、" : " , ";
+  return /* @__PURE__ */ p(Te, { className: "tips", children: [
+    /* @__PURE__ */ t("span", { style: { marginRight: "16px" }, children: o("blocklet.emptyTip") }),
+    e && /* @__PURE__ */ t("span", { children: o("blocklet.filterTip") }),
+    e && r && a(),
+    r && /* @__PURE__ */ t("span", { children: o("blocklet.keywordTip") })
   ] });
 }
-X.propTypes = {
-  filterTip: o.bool,
-  keywordTip: o.bool
+O.propTypes = {
+  filterTip: i.bool,
+  keywordTip: i.bool
 };
-X.defaultProps = {
+O.defaultProps = {
   filterTip: !1,
   keywordTip: !1
 };
-function Z({ primaryStart: e, primaryEnd: n, filter: r }) {
-  return /* @__PURE__ */ h(Re, { variant: "subtitle2", children: [
+function H({ primaryStart: e, primaryEnd: r, filter: o }) {
+  return /* @__PURE__ */ p(Ie, { variant: "subtitle2", children: [
     /* @__PURE__ */ t("span", { children: e }),
-    /* @__PURE__ */ h("span", { className: "primary", children: [
+    /* @__PURE__ */ p("span", { className: "primary", children: [
       " ",
-      r,
+      o,
       " "
     ] }),
-    /* @__PURE__ */ h("span", { children: [
-      n,
+    /* @__PURE__ */ p("span", { children: [
+      r,
       " "
     ] })
   ] });
 }
-Z.propTypes = {
-  primaryStart: o.string.isRequired,
-  primaryEnd: o.string.isRequired,
-  filter: o.string.isRequired
-};
-function qt(e) {
-  return e ? e.width > 900 ? 12 : e.width > 600 ? 8 : 4 : 0;
-}
-function ze({ children: e }) {
-  const n = J(null), [r, a] = E(null), s = Ze(r);
-  return j(() => {
-    r || a(n.current);
-  }, [r]), e(n, qt(s));
-}
-ze.propTypes = {
-  children: o.func.isRequired
+H.propTypes = {
+  primaryStart: i.string.isRequired,
+  primaryEnd: i.string.isRequired,
+  filter: i.string.isRequired
 };
-function ue({ blocklets: e, ...n }) {
+function Oe({ blocklets: e, ...r }) {
   const {
-    blockletRender: r,
-    errors: a,
-    loadings: s,
-    selectedCategory: c,
-    getCategoryLocale: w,
-    filters: g,
-    t: m,
-    serverVersion: x,
-    hasNextPage: u,
-    loadMore: S,
-    endpoint: B
-  } = L(), T = !!c || !!g.price, [$] = gt({
-    loading: s.fetchBlockletsLoading || s.loadingMore,
-    hasNextPage: u,
-    onLoadMore: S
+    blockletRender: o,
+    errors: n,
+    loadings: a,
+    selectedCategory: l,
+    getCategoryLocale: m,
+    filters: d,
+    t: s,
+    serverVersion: k,
+    hasNextPage: f,
+    loadMore: g,
+    endpoint: c
+  } = B(), x = !!l || !!d.price, [w] = Bt({
+    loading: a.fetchBlockletsLoading || a.loadingMore,
+    hasNextPage: f,
+    onLoadMore: g
   });
-  if (a.fetchBlockletsError)
+  if (n.fetchBlockletsError)
     return /* @__PURE__ */ t(
-      Te,
+      K,
       {
-        error: new Error(`Failed to fetch blocklets from ${B}: ${a.fetchBlockletsError.message}`)
+        error: new Error(`Failed to fetch blocklets from ${c}: ${n.fetchBlockletsError.message}`)
       }
     );
-  if (s.fetchBlockletsLoading)
-    return /* @__PURE__ */ t(_, { height: 60, display: "flex", alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ t(oe, {}) });
-  if (g.keyword && T && e.length === 0)
-    return /* @__PURE__ */ h(Y, { children: [
+  if (a.fetchBlockletsLoading)
+    return /* @__PURE__ */ t(Ne, { mt: 15 });
+  if (d.keyword && x && e.length === 0)
+    return /* @__PURE__ */ p(W, { children: [
       /* @__PURE__ */ t(
-        Z,
+        H,
         {
-          primaryStart: m("blocklet.noBlockletPart1"),
-          primaryEnd: m("blocklet.noBlockletPart2"),
-          filter: g.keyword
+          primaryStart: s("blocklet.noBlockletPart1"),
+          primaryEnd: s("blocklet.noBlockletPart2"),
+          filter: d.keyword
         }
       ),
-      /* @__PURE__ */ t(X, { keywordTip: !0, filterTip: !0 })
+      /* @__PURE__ */ t(O, { keywordTip: !0, filterTip: !0 })
     ] });
-  if (g.keyword && e.length === 0)
-    return /* @__PURE__ */ h(Y, { children: [
+  if (d.keyword && e.length === 0)
+    return /* @__PURE__ */ p(W, { children: [
       /* @__PURE__ */ t(
-        Z,
+        H,
         {
-          primaryStart: m("blocklet.noBlockletPart1"),
-          primaryEnd: m("blocklet.noBlockletPart2"),
-          filter: g.keyword
+          primaryStart: s("blocklet.noBlockletPart1"),
+          primaryEnd: s("blocklet.noBlockletPart2"),
+          filter: d.keyword
         }
       ),
-      /* @__PURE__ */ t(X, { keywordTip: !0 })
+      /* @__PURE__ */ t(O, { keywordTip: !0 })
     ] });
-  if (T && e.length === 0) {
-    const C = w(c);
-    return /* @__PURE__ */ h(Y, { children: [
-      C ? /* @__PURE__ */ t(
-        Z,
+  if (x && e.length === 0) {
+    const v = m(l);
+    return /* @__PURE__ */ p(W, { children: [
+      v ? /* @__PURE__ */ t(
+        H,
         {
-          primaryStart: m("blocklet.noCategoryResults1"),
-          primaryEnd: m("blocklet.noCategoryResults2"),
-          filter: C
+          primaryStart: s("blocklet.noCategoryResults1"),
+          primaryEnd: s("blocklet.noCategoryResults2"),
+          filter: v
         }
-      ) : /* @__PURE__ */ t(we, {}),
-      /* @__PURE__ */ t(X, { filterTip: !0 })
+      ) : /* @__PURE__ */ t(ye, {}),
+      /* @__PURE__ */ t(O, { filterTip: !0 })
     ] });
   }
-  return e.length === 0 ? /* @__PURE__ */ t(Y, { children: /* @__PURE__ */ t(we, {}) }) : /* @__PURE__ */ t(ze, { children: (C, y) => /* @__PURE__ */ h(
-    te,
-    {
-      ...n,
-      container: !0,
-      spacing: 2,
-      columns: y,
-      disableEqualOverflow: !0,
-      ref: C,
-      sx: {
-        opacity: () => y > 0 ? 1 : 0
-      },
-      children: [
-        e.map((d) => /* @__PURE__ */ t(te, { xs: 6, "data-blocklet-did": d.did, children: r({ blocklet: d, blocklets: e, serverVersion: x }) }, d.did)),
-        u && /* @__PURE__ */ t(te, { xs: 12, ref: $, children: /* @__PURE__ */ t(_, { height: 60, display: "flex", justifyContent: "center", children: /* @__PURE__ */ t(oe, {}) }) })
-      ]
-    }
-  ) });
+  return e.length === 0 ? /* @__PURE__ */ t(W, { children: /* @__PURE__ */ t(ye, {}) }) : /* @__PURE__ */ p(F, { children: [
+    /* @__PURE__ */ t(S, { display: "grid", gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" }, p: "2px", ...r, gap: 2, children: e.map((v) => /* @__PURE__ */ t(S, { "data-blocklet-did": v.did, children: o({ blocklet: v, blocklets: e, serverVersion: k }) }, v.did)) }),
+    f && /* @__PURE__ */ t(S, { height: 60, display: "flex", justifyContent: "center", py: 2, ref: w, children: /* @__PURE__ */ t(ee, {}) })
+  ] });
 }
-ue.propTypes = {
-  blocklets: o.array.isRequired
+Oe.propTypes = {
+  blocklets: i.array.isRequired
 };
-ue.defaultProps = {};
-const Y = R(ft)`
+const W = D(St)`
   text-align: center;
+  margin-top: 100px;
   .primary {
     color: ${(e) => e.theme.palette.primary.main};
   }
@@ -782,124 +1059,38 @@ const Y = R(ft)`
     margin-top: ${(e) => e.theme.spacing(1)};
   }
 `;
-function de() {
-  const { selectedCategory: e, handleCategory: n, t: r, handlePrice: a, filters: s, categoryOptions: c, priceOptions: w } = L();
-  return /* @__PURE__ */ h(jt, { children: [
-    /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(U, { title: r("common.price"), options: w, value: s.price, onChange: a }) }),
-    c.length > 0 && /* @__PURE__ */ t("div", { style: { marginTop: "16px" }, children: /* @__PURE__ */ t(
-      U,
-      {
-        title: r("common.category"),
-        options: c,
-        value: e,
-        onChange: n
-      }
-    ) })
-  ] });
-}
-const jt = R("aside")`
-  width: 220px;
-  margin-right: ${(e) => e.theme.spacing(2)};
-  height: 100%;
-  position: sticky;
-  top: 0;
-  overflow-y: auto;
-  z-index: auto;
-`;
-de.propTypes = {};
-de.defaultProps = {};
-function me({ placeholder: e, ...n }) {
-  const { filters: r, handleKeyword: a } = L(), [s, c] = E(r.keyword || ""), w = et(a, { wait: 300 }), g = (x) => {
-    const { value: u } = x.target;
-    c(u), w.run(u);
-  }, m = () => {
-    c(""), a();
-  };
-  return j(() => {
-    c(r.keyword || "");
-  }, [r.keyword]), /* @__PURE__ */ t(
-    Ut,
-    {
-      inputProps: {
-        "data-cy": "search-blocklet"
-      },
-      startAdornment: /* @__PURE__ */ t(ge, { position: "start", children: /* @__PURE__ */ t(Vt, {}) }),
-      onChange: g,
-      placeholder: e,
-      value: s,
-      title: e,
-      "data-cy": "search",
-      endAdornment: s && /* @__PURE__ */ t(ge, { position: "end", children: /* @__PURE__ */ t(Wt, { "data-cy": "search-delete", onClick: m }) }),
-      ...n
-    }
-  );
-}
-me.propTypes = {
-  placeholder: o.string
-};
-me.defaultProps = {
-  placeholder: "Type to search..."
-};
-const Ut = R(je)`
-  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;
-    }
-  }
-`, Vt = R(bt)`
-  color: ${(e) => e.theme.palette.grey[500]};
-  font-size: 28px;
-  @media (max-width: ${(e) => e.theme.breakpoints.values.md}px) {
-    font-size: 24px;
-  }
-`, Wt = R(wt)`
-  color: ${(e) => e.theme.palette.grey[500]};
-  font-size: 16px;
-  cursor: pointer;
-`;
-function he({ onSelect: e, wrapChildren: n }) {
-  const r = J(null), a = J(null), s = J(null), { storeApi: c, blockletRender: w, filters: g, endpoint: m, handleKeyword: x, t: u, serverVersion: S } = L(), B = async (d) => {
-    const { data: i } = await c.get(N.blockletsPath, { params: d }), b = i.dataList || [];
-    return b.length > 0 && b.unshift({ type: "more-result", total: i.total || 0 }), b;
-  }, T = (d) => {
-    x(d.state.query), d.setIsOpen(!1);
-  }, $ = () => {
-    r.current && setTimeout(() => {
-      const d = r.current.querySelector("input.bl-autocomplete-input");
-      d && d.focus();
+function ae({ onSelect: e, wrapChildren: r }) {
+  const o = U(null), n = U(null), a = U(null), { storeApi: l, blockletRender: m, filters: d, endpoint: s, handleKeyword: k, t: f, serverVersion: g } = B(), c = async (y) => {
+    const { data: u } = await l.get(R.blockletsPath, { params: y }), C = u.dataList || [];
+    return C.length > 0 && C.unshift({ type: "more-result", total: u.total || 0 }), C;
+  }, x = (y) => {
+    k(y.state.query), y.setIsOpen(!1);
+  }, w = () => {
+    o.current && setTimeout(() => {
+      const y = o.current.querySelector("input.bl-autocomplete-input");
+      y && y.focus();
     });
-  }, C = (d) => {
-    d.setIsOpen(!1), $();
-  }, y = ({ prevState: d, state: i }) => {
-    d.query !== i.query && (i.query || (x(), $()));
+  }, v = (y) => {
+    y.setIsOpen(!1), w();
+  }, z = ({ prevState: y, state: u }) => {
+    y.query !== u.query && (u.query || (k(), w()));
   };
-  return St(
+  return It(
     "ctrl + k, command + k",
-    (d) => (d.stopPropagation(), d.preventDefault(), $(), !1),
+    (y) => (y.stopPropagation(), y.preventDefault(), w(), !1),
     { enableOnTags: ["INPUT"] }
   ), j(() => {
-    $();
-  }, [m]), j(() => {
-    if (!r.current)
+    w();
+  }, [s]), j(() => {
+    if (!o.current)
       return;
-    const d = kt({
-      container: r.current,
-      renderer: { createElement: Qe, Fragment: Je, render: () => {
+    const y = Tt({
+      container: o.current,
+      renderer: { createElement: st, Fragment: ct, render: () => {
       } },
-      render({ children: i }, b) {
-        var k;
-        (!a.current || s.current !== b) && (s.current = b, (k = a.current) == null || k.unmount(), a.current = xt(b)), a.current.render(n(i));
+      render({ children: u }, C) {
+        var $;
+        (!n.current || a.current !== C) && (a.current = C, ($ = n.current) == null || $.unmount(), n.current = Pt(C)), n.current.render(r(u));
       },
       autoFocus: !0,
       openOnFocus: !1,
@@ -913,54 +1104,54 @@ function he({ onSelect: e, wrapChildren: n }) {
         detachedContainer: "bl-autocomplete-detached-container"
       },
       translations: {
-        clearButtonTitle: u("common.clear"),
-        detachedCancelButtonText: u("common.cancel"),
-        submitButtonTitle: u("common.search"),
-        detachedSearchButtonTitle: u("common.search")
+        clearButtonTitle: f("common.clear"),
+        detachedCancelButtonText: f("common.cancel"),
+        submitButtonTitle: f("common.search"),
+        detachedSearchButtonTitle: f("common.search")
       },
-      placeholder: u("common.searchStore"),
+      placeholder: f("common.searchStore"),
       initialState: {
-        query: g.keyword
+        query: d.keyword
       },
-      onStateChange(i) {
-        y(i);
+      onStateChange(u) {
+        z(u);
       },
-      onSubmit: T,
-      onReset(i) {
-        C(i);
+      onSubmit: x,
+      onReset(u) {
+        v(u);
       },
-      getSources({ query: i, state: b, ...k }) {
-        const z = {
-          ...g,
-          sortBy: N[g.sortBy],
+      getSources({ query: u, state: C, ...$ }) {
+        const _ = {
+          ...d,
+          sortBy: R[d.sortBy],
           page: 1,
           pageSize: 10,
-          keyword: i
+          keyword: u
         };
-        return zt([
+        return jt([
           {
             sourceId: "blocklets",
             getItems() {
-              return B(z);
+              return c(_);
             },
             // 选中后填充 搜索框中值
-            getItemInputValue({ item: I }) {
-              return I.type === "more-result" ? i : I.title;
+            getItemInputValue({ item: L }) {
+              return L.type === "more-result" ? u : L.title;
             },
             // 选中或者点击自动完成列表中的 item 时触发
-            onSelect({ event: I, item: v }) {
-              return v.type === "more-result" ? (k.setIsOpen(!1), x(i)) : I.type === "keydown" ? x(v.title) : e({
-                blocklet: v,
-                detailUrl: nt(m, "/blocklets", v.did),
-                storeUrl: m
+            onSelect({ event: L, item: I }) {
+              return I.type === "more-result" ? ($.setIsOpen(!1), k(u)) : L.type === "keydown" ? k(I.title) : e({
+                blocklet: I,
+                detailUrl: Lt(s, "/blocklets", I.did),
+                storeUrl: s
               });
             },
             templates: {
-              item({ item: I }) {
-                return I.type === "more-result" ? /* @__PURE__ */ t("div", { children: u("autocomplete.expandResult", { name: i, number: I.total.toLocaleString() }) }) : w({ blocklet: I, autocompleteSetters: k, serverVersion: S });
+              item({ item: L }) {
+                return L.type === "more-result" ? /* @__PURE__ */ t("div", { children: f("autocomplete.expandResult", { name: u, number: L.total.toLocaleString() }) }) : m({ blocklet: L, autocompleteSetters: $, serverVersion: g });
               },
               noResults() {
-                return u("blocklet.noResults");
+                return f("blocklet.noResults");
               }
             }
           }
@@ -968,13 +1159,13 @@ function he({ onSelect: e, wrapChildren: n }) {
       }
     });
     return () => {
-      d.destroy();
+      y.destroy();
     };
-  }, [g, w]), /* @__PURE__ */ h(le, { children: [
+  }, [d, m]), /* @__PURE__ */ p(F, { children: [
     /* @__PURE__ */ t(
       xe,
       {
-        styles: ke`
+        styles: we`
           .bl-autocomplete-detached-container {
             .bl-autocomplete-detached-cancel {
               white-space: nowrap;
@@ -983,242 +1174,153 @@ function he({ onSelect: e, wrapChildren: n }) {
         `
       }
     ),
-    /* @__PURE__ */ t("div", { className: "bl-search-container", ref: r })
+    /* @__PURE__ */ t("div", { className: "bl-search-container", ref: o })
   ] });
 }
-he.propTypes = {
-  onSelect: o.func.isRequired,
-  wrapChildren: o.func
+ae.propTypes = {
+  onSelect: i.func.isRequired,
+  wrapChildren: i.func
 };
-he.defaultProps = {
+ae.defaultProps = {
   wrapChildren: (e) => e
 };
-function fe({ t: e }) {
-  const { filters: n, handleSwitchShowResources: r } = L(), a = () => {
-    n.showResources = !n.showResources, r();
+function ie({ placeholder: e, ...r }) {
+  const { filters: o, handleKeyword: n } = B(), [a, l] = q(o.keyword || ""), m = mt(n, { wait: 300 }), d = (k) => {
+    const { value: f } = k.target;
+    l(f), m.run(f);
+  }, s = () => {
+    l(""), n();
   };
-  return /* @__PURE__ */ t(
-    Ct,
+  return j(() => {
+    l(o.keyword || "");
+  }, [o.keyword]), /* @__PURE__ */ t(
+    or,
     {
-      checked: n.showResources,
-      onChange: a,
-      labelProps: {
-        label: /* @__PURE__ */ t(ve, { marginLeft: "8px", fontSize: "small", children: /* @__PURE__ */ t("span", { children: e("common.showResources") }) })
-      }
+      inputProps: {
+        "data-cy": "search-blocklet"
+      },
+      startAdornment: /* @__PURE__ */ t(me, { position: "start", children: /* @__PURE__ */ t(nr, {}) }),
+      onChange: d,
+      placeholder: e,
+      value: a,
+      title: e,
+      "data-cy": "search",
+      endAdornment: a && /* @__PURE__ */ t(me, { position: "end", children: /* @__PURE__ */ t(lr, { "data-cy": "search-delete", onClick: s }) }),
+      ...r
     }
   );
 }
-fe.propTypes = {
-  t: o.func.isRequired
+ie.propTypes = {
+  placeholder: i.string
 };
-fe.defaultProps = {};
-function Gt() {
-  var G, K;
-  const {
-    handleDeveloper: e,
-    blockletList: n,
-    filters: r,
-    developerName: a,
-    handleSort: s,
-    handleCategory: c,
-    handlePrice: w,
-    handleSearchSelect: g,
-    t: m,
-    getCategoryLocale: x,
-    priceOptions: u,
-    wrapChildren: S,
-    showResourcesSwitch: B,
-    showCategory: T,
-    baseSearch: $,
-    onFilterChange: C,
-    tagFilters: y
-  } = L(), d = vt(m), i = ((G = d.find((f) => f.value === r.sortBy)) == null ? void 0 : G.name) || m("sort.sort"), b = x(r.category), { resourceType: k } = r || {}, z = (K = u.find((f) => f.value === r.price)) == null ? void 0 : K.name, [I, v] = E(!1), V = ae(), ee = Se(() => V.breakpoints.down("md")), O = Pe({
-    chooseTagId: ""
-  }), W = tt((f) => {
-    O.chooseTagId = f.id, ["category", "resourceType", "resourceDid"].forEach((M) => {
-      typeof f.params[M] > "u" ? delete r[M] : r[M] = f.params[M];
-    }), C(r);
-  }), F = rt(() => y.find((f) => f.id === O.chooseTagId), [O.chooseTagId]);
-  return ot(() => {
-    const f = lt(window.location.search), H = y.find((M) => {
-      const l = M.params;
-      return l ? Object.keys(l).every((p) => f[p] === l[p]) : !1;
-    });
-    H ? W(H) : y.length > 0 && W(y[0]);
-  }), /* @__PURE__ */ h(_, { display: "flex", alignItems: "flex-start", height: "100%", children: [
-    T ? /* @__PURE__ */ t(ye, { mdDown: !0, children: /* @__PURE__ */ t(de, {}) }) : null,
-    /* @__PURE__ */ h(Kt, { children: [
-      /* @__PURE__ */ h(Ht, { children: [
-        /* @__PURE__ */ h(
-          _,
-          {
-            className: "filter-bar",
-            sx: {
-              display: "flex",
-              flexDirection: {
-                lg: "row",
-                md: B ? "column" : "row"
-              },
-              alignItems: {
-                lg: "center",
-                md: B ? "flex-start" : "center",
-                xs: "center"
-              },
-              gap: 1
-            },
-            children: [
-              T ? /* @__PURE__ */ t(ye, { mdUp: !0, children: /* @__PURE__ */ t(pe, {}) }) : null,
-              /* @__PURE__ */ t(
-                "form",
-                {
-                  className: "search-form",
-                  style: {
-                    flex: 1,
-                    width: "100%"
-                  },
-                  onSubmit: (f) => {
-                    f.preventDefault(), f.stopPropagation();
-                  },
-                  onFocus: () => {
-                    v(!0);
-                  },
-                  onBlur: () => {
-                    v(!1);
-                  },
-                  children: $ ? /* @__PURE__ */ t(me, { className: "bl-search-container", placeholder: m("common.searchStore") }) : /* @__PURE__ */ t(he, { onSelect: g, wrapChildren: S })
-                }
-              ),
-              /* @__PURE__ */ h(_, { className: "filter-container", display: "flex", alignItems: "center", children: [
-                !ee && B && /* @__PURE__ */ t(_, { ml: 1, mr: 1, children: /* @__PURE__ */ t(fe, { t: m }) }),
-                /* @__PURE__ */ t(
-                  ce,
-                  {
-                    value: r.sortBy,
-                    options: d,
-                    title: i,
-                    icon: /* @__PURE__ */ t(_e, {}),
-                    onChange: (f) => {
-                      s(f);
-                    }
-                  }
-                )
-              ] })
-            ]
-          }
-        ),
-        T ? /* @__PURE__ */ h(_, { display: "flex", flexWrap: "wrap", alignItems: "center", mb: "16px", children: [
-          /* @__PURE__ */ t(
-            q,
-            {
-              label: a,
-              icon: /* @__PURE__ */ t(Ve, {}),
-              onDelete: () => {
-                e(null);
-              }
-            }
-          ),
-          /* @__PURE__ */ t(
-            q,
-            {
-              label: b,
-              onDelete: () => {
-                c(null);
-              }
-            }
-          ),
-          /* @__PURE__ */ t(
-            q,
-            {
-              label: z,
-              onDelete: () => {
-                w(null);
-              }
-            }
-          ),
-          k && /* @__PURE__ */ t(q, { label: `${m("common.resourceType")}: ${k}` })
-        ] }) : null
-      ] }),
-      /* @__PURE__ */ t(We, { FallbackComponent: Te, children: /* @__PURE__ */ h(_, { sx: { position: "relative", flex: 1, overflow: "auto" }, children: [
-        (y == null ? void 0 : y.length) > 0 ? /* @__PURE__ */ h(le, { children: [
-          /* @__PURE__ */ t(Ue, { my: 1, direction: "row", spacing: 1.5, useFlexGap: !0, flexWrap: "wrap", justifyContent: "flex-start", children: y.map((f) => /* @__PURE__ */ t(
-            Ce,
-            {
-              label: f.title,
-              size: "small",
-              variant: O.chooseTagId === f.id ? "contained" : "outlined",
-              onClick: () => W(f),
-              color: O.chooseTagId === f.id ? "primary" : "default"
-            },
-            f.id
-          )) }),
-          F ? /* @__PURE__ */ t(_, { mb: 2, children: F.description ? /* @__PURE__ */ t(ve, { variant: "body1", children: F.description }) : null }) : null
-        ] }) : null,
-        /* @__PURE__ */ t(ue, { blocklets: n })
-      ] }) })
-    ] })
-  ] });
-}
-const Kt = R("main")`
-  display: flex;
-  flex-direction: column;
-  flex: 1;
+ie.defaultProps = {
+  placeholder: "Type to search..."
+};
+const or = D(ot)`
+  background-color: ${(e) => e.theme.palette.grey[50]};
+  font-size: 14px;
+  border-radius: 6px;
   width: 100%;
-  height: 100%;
-  .filter-bar {
-    justify-content: space-between;
-    margin-bottom: ${(e) => e.theme.spacing(2)};
-  }
-  .sort-button {
-    white-space: nowrap;
-  }
-  .bl-search-container {
-    margin-left: 0px;
+  .MuiInputBase-input {
+    padding: 8px 0 8px 10px;
   }
-  .filter-container {
-    display: flex;
-    justify-content: flex-end;
+  .MuiOutlinedInput-notchedOutline {
+    border: none;
   }
-  @media (max-width: ${(e) => e.theme.breakpoints.values.md}px) {
-    .search-form {
-      flex: 1;
-    }
-    .bl-search-container {
-      width: 100%;
-    }
-    .filter-container {
-      margin-left: 0;
-      display: flex;
-      justify-content: flex-start;
+  .Mui-focused {
+    background-color: #f6f6f6;
+    .MuiInputBase-input::placeholder {
+      color: transparent;
     }
   }
+`, nr = D(zt)`
+  color: ${(e) => e.theme.palette.grey[500]};
+  font-size: 28px;
   @media (max-width: ${(e) => e.theme.breakpoints.values.md}px) {
-    .sort-button {
-      font-size: 12px;
-    }
+    font-size: 24px;
   }
-`, Ht = R("div")`
-  position: sticky;
-  top: 0;
-  z-index: 9;
-  background-color: white;
+`, lr = D(Se)`
+  color: ${(e) => e.theme.palette.grey[500]};
+  font-size: 16px;
+  cursor: pointer;
 `;
-function De(e) {
-  const n = ae(), r = $t(n.palette.primary.main), a = {
-    autocomplete: ke`
+function ar() {
+  const { filters: e, handleSearchSelect: r, t: o, wrapChildren: n, baseSearch: a } = B(), { toggleOpen: l } = re(), m = !!e.keyword;
+  return /* @__PURE__ */ p(
+    P,
+    {
+      direction: "row",
+      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 },
+      children: [
+        /* @__PURE__ */ t(
+          G,
+          {
+            xs: !m && /* @__PURE__ */ t(De, { onClick: () => l(!0), children: /* @__PURE__ */ t(Rt, {}) }),
+            md: /* @__PURE__ */ t(T, { variant: "h1", children: o("common.title") })
+          }
+        ),
+        /* @__PURE__ */ t(
+          S,
+          {
+            width: { xs: m ? "100%" : 300, md: 300 },
+            className: "filter-bar",
+            sx: {
+              "& .bl-autocomplete-form": { borderRadius: 2 },
+              "& .aa-SubmitButton, & .aa-LoadingIndicator": { width: "auto", pl: 1.5, pr: 1 },
+              "& .aa-SubmitIcon, & .aa-LoadingIcon": { height: 16, width: 16 }
+            },
+            children: a ? /* @__PURE__ */ t(ie, { className: "bl-search-container", placeholder: o("common.searchStore"), sx: { pl: 1.5 } }) : /* @__PURE__ */ t(ae, { onSelect: r, wrapChildren: n })
+          }
+        )
+      ]
+    }
+  );
+}
+function ir() {
+  const { blockletList: e, filters: r, t: o } = B(), n = r.category || r.keyword || r.price;
+  return /* @__PURE__ */ t($t, { children: /* @__PURE__ */ p(nt, { FallbackComponent: K, children: [
+    /* @__PURE__ */ t(ar, {}),
+    /* @__PURE__ */ p(S, { display: "flex", height: "100%", children: [
+      /* @__PURE__ */ t(Qt, {}),
+      /* @__PURE__ */ t(P, { height: "100%", position: "relative", flex: 1, overflow: "auto", children: n ? /* @__PURE__ */ p(F, { children: [
+        r.keyword ? /* @__PURE__ */ p(F, { children: [
+          /* @__PURE__ */ t(G, { xs: /* @__PURE__ */ t(Ee, {}), md: null }),
+          a()
+        ] }) : /* @__PURE__ */ t(rr, {}),
+        /* @__PURE__ */ t(Oe, { blocklets: e, height: "100%" })
+      ] }) : /* @__PURE__ */ t(Kt, {}) })
+    ] })
+  ] }) });
+  function a() {
+    return /* @__PURE__ */ p(P, { direction: "row", alignItems: "center", justifyContent: "space-between", mb: 2, mt: { xs: 2, md: 0 }, children: [
+      /* @__PURE__ */ t(T, { variant: "h3", children: o("blocklet.search", { keyword: r.keyword }) }),
+      /* @__PURE__ */ t(T, { variant: "body1", color: "text.lighter", fontSize: 13, children: o("blocklet.resultCount", { count: e.length }) })
+    ] });
+  }
+}
+function qe(e) {
+  const r = be(), o = Ot(r.palette.primary.main), n = {
+    autocomplete: we`
       :root {
-        --aa-detached-media-query: (max-width: ${n.breakpoints.values.md}px) !important;
-        --aa-detached-modal-media-query: (min-width: ${n.breakpoints.values.md}px) !important;
-        --aa-detached-modal-max-width: ${n.breakpoints.values.md}px !important;
-        --aa-selected-color-rgb: ${r.r}, ${r.g}, ${r.b} !important;
-        --aa-primary-color-rgb: ${r.r}, ${r.g}, ${r.b} !important;
+        --aa-detached-media-query: (max-width: ${r.breakpoints.values.md}px) !important;
+        --aa-detached-modal-media-query: (min-width: ${r.breakpoints.values.md}px) !important;
+        --aa-detached-modal-max-width: ${r.breakpoints.values.md}px !important;
+        --aa-selected-color-rgb: ${o.r}, ${o.g}, ${o.b} !important;
+        --aa-primary-color-rgb: ${o.r}, ${o.g}, ${o.b} !important;
         --aa-input-background-color-rgb: 250, 250, 250 !important;
       }
       .bl-autocomplete-panel {
-        z-index: ${n.zIndex.modal};
+        z-index: ${r.zIndex.modal};
       }
       .bl-autocomplete-label {
         .aa-SubmitIcon {
-          color: ${n.palette.grey[500]} !important;
+          color: ${r.palette.grey[500]} !important;
         }
       }
       .bl-autocomplete-form {
@@ -1234,21 +1336,21 @@ function De(e) {
           box-shadow: none !important;
         }
         .aa-SubmitIcon {
-          color: ${n.palette.grey[500]} !important;
+          color: ${r.palette.grey[500]} !important;
         }
       }
       .aa-Panel .arcblock-blocklet button {
-        border: 1px solid rgba(${r.r}, ${r.g}, ${r.b}, 0.5);
+        border: 1px solid rgba(${o.r}, ${o.g}, ${o.b}, 0.5);
       }
     `
   };
-  return /* @__PURE__ */ h(ie, { ...e, children: [
-    /* @__PURE__ */ t(xe, { styles: a.autocomplete }),
-    /* @__PURE__ */ t(Gt, {})
+  return /* @__PURE__ */ p(oe, { ...e, children: [
+    /* @__PURE__ */ t(xe, { styles: n.autocomplete }),
+    /* @__PURE__ */ t(ir, {})
   ] });
 }
-De.propTypes = Be;
-De.defaultProps = $e;
+qe.propTypes = ze;
+qe.defaultProps = $e;
 export {
-  De as default
+  qe as default
 };