@blocklet/list 0.12.87 → 0.12.89

package/lib/index.es.js

@@ -1,38 +1,39 @@
-import { jsx as t, jsxs as f, Fragment as pe } from "react/jsx-runtime";
-import { useTheme as de } from "@mui/material/styles";
-import { Global as ue, css as me } from "@emotion/react";
-import { styled as C } from "@arcblock/ux/lib/Theme";
-import $e from "@mui/icons-material/Sort";
-import { Button as Re, CircularProgress as W, MenuList as ze, useMediaQuery as Ie, SvgIcon as _e, Popper as De, Grow as Ne, Paper as Ae, ClickAwayListener as Le, MenuItem as Me, Chip as Oe, Grid as he, Box as D, OutlinedInput as Fe, InputAdornment as le, Hidden as ae } from "@mui/material";
-import Ee from "@mui/icons-material/Face";
-import { ErrorBoundary as qe } from "react-error-boundary";
-import { ErrorFallback as fe } from "@arcblock/ux/lib/ErrorBoundary";
-import { createContext as je, useMemo as L, useState as F, useCallback as H, useEffect as E, useContext as Ge, forwardRef as Ue, useRef as M, memo as Ke, createElement as We, Fragment as He } from "react";
-import o from "prop-types";
-import { useReactive as Ve, useInfiniteScroll as Qe, useRequest as Je, useSize as Xe, useCreation as Ye, useDebounceFn as Ze } from "ahooks";
-import et from "lodash/orderBy";
-import tt from "axios";
-import rt from "json-stable-stringify";
+import { jsx as t, jsxs as h, Fragment as he } from "react/jsx-runtime";
+import { useTheme as fe } from "@mui/material/styles";
+import { Global as ge, css as ye } from "@emotion/react";
+import { styled as v } from "@arcblock/ux/lib/Theme";
+import Ie from "@mui/icons-material/Sort";
+import { Button as De, CircularProgress as Q, MenuList as _e, useMediaQuery as be, SvgIcon as Ne, Popper as Le, Grow as Me, Paper as Ae, ClickAwayListener as Fe, MenuItem as Oe, Chip as Ee, Grid as we, Box as N, OutlinedInput as qe, InputAdornment as ce, Typography as je, Hidden as pe } from "@mui/material";
+import Ge from "@mui/icons-material/Face";
+import { ErrorBoundary as Ue } from "react-error-boundary";
+import { ErrorFallback as xe } from "@arcblock/ux/lib/ErrorBoundary";
+import { createContext as Ke, useMemo as O, useState as A, useCallback as J, useEffect as j, useContext as We, forwardRef as He, useRef as E, memo as Ve, createElement as Qe, Fragment as Je } from "react";
+import n from "prop-types";
+import { useReactive as Xe, useInfiniteScroll as Ye, useRequest as Ze, useSize as et, useCreation as tt, useDebounceFn as rt } from "ahooks";
+import ot from "lodash/orderBy";
+import nt from "axios";
+import lt from "json-stable-stringify";
 import "lodash/cloneDeep";
-import ot from "color";
-import ie from "flat";
-import nt from "@mui/icons-material/KeyboardArrowDown";
-import lt from "lodash/isEmpty";
-import at from "@mui/icons-material/FilterAltOutlined";
-import it from "@arcblock/ux/lib/Dialog";
-import st from "@mui/material/Button";
-import ct from "@arcblock/ux/lib/Empty";
-import pt from "react-infinite-scroll-hook";
-import dt from "@mui/material/Box";
-import ge from "@mui/material/Typography";
-import ut from "@mui/icons-material/Search";
-import mt from "@mui/icons-material/Close";
-import { createRoot as ht } from "react-dom/client";
-import { autocomplete as ft } from "@algolia/autocomplete-js";
-import { useHotkeys as gt } from "react-hotkeys-hook";
-import yt from "url-join";
+import at from "color";
+import ue from "flat";
+import it from "@mui/icons-material/KeyboardArrowDown";
+import st from "lodash/isEmpty";
+import ct from "@mui/icons-material/FilterAltOutlined";
+import pt from "@arcblock/ux/lib/Dialog";
+import ut from "@mui/material/Button";
+import dt from "@arcblock/ux/lib/Empty";
+import mt from "react-infinite-scroll-hook";
+import ht from "@mui/material/Box";
+import ke from "@mui/material/Typography";
+import ft from "@mui/icons-material/Search";
+import gt from "@mui/icons-material/Close";
+import { createRoot as yt } from "react-dom/client";
+import { autocomplete as bt } from "@algolia/autocomplete-js";
+import { useHotkeys as wt } from "react-hotkeys-hook";
+import xt from "url-join";
+import kt from "@arcblock/ux/lib/Switch";
 import "@algolia/autocomplete-theme-classic/dist/theme.css";
-const bt = (e) => [
+const St = (e) => [
   {
     name: e("sort.popularity"),
     value: "popularity"
@@ -49,27 +50,28 @@ const bt = (e) => [
     name: e("sort.nameDescend"),
     value: "nameDesc"
   }
-], xt = (e) => [
+], vt = (e) => [
   { name: e("blocklet.free"), value: "free" },
   { name: e("blocklet.payment"), value: "payment" }
-], kt = (e = [], n = "en") => e.map((r) => ({ name: r.locales[n] || `Category.${n}`, value: r._id })), wt = (e, n) => (
+], Ct = (e = [], o = "en") => e.map((r) => ({ name: r.locales[o] || `Category.${o}`, value: r._id })), Pt = (e, o) => (
   // eslint-disable-next-line no-prototype-builtins
-  e.replace(/{(\w*)}/g, (r, l) => n.hasOwnProperty(l) ? n[l] : "")
-), St = () => window.innerWidth <= 600, vt = (e, n) => {
-  const r = (e + n) / n;
+  e.replace(/{(\w*)}/g, (r, l) => o.hasOwnProperty(l) ? o[l] : "")
+), Tt = () => window.innerWidth <= 600, Rt = (e, o) => {
+  const r = (e + o) / o;
   return r > 1 ? r.toFixed() : 1;
-}, Ct = (e) => ot(e).rgb().object();
-function Pt(e, n) {
+}, Bt = (e) => at(e).rgb().object();
+function $t(e, o) {
   let r;
-  return function(...i) {
+  return function(...s) {
     return r && clearTimeout(r), new Promise((c) => {
-      r = setTimeout(() => c(e(...i)), n);
+      r = setTimeout(() => c(e(...s)), o);
     });
   };
 }
-const Tt = Pt((e) => Promise.resolve(e), 300), Bt = {
+const zt = $t((e) => Promise.resolve(e), 300), It = {
   common: {
     searchStore: "Search the store",
+    showResources: "Show resources",
     price: "Price",
     category: "Category",
     resourceType: "Resource Type",
@@ -105,9 +107,10 @@ const Tt = Pt((e) => Promise.resolve(e), 300), Bt = {
   autocomplete: {
     expandResult: 'Show {number} search results for "{name}" '
   }
-}, $t = {
+}, Dt = {
   common: {
     searchStore: "搜索商店内应用",
+    showResources: "显示资源型应用",
     price: "价格",
     category: "类别",
     resourceType: "资源类型",
@@ -143,30 +146,30 @@ const Tt = Pt((e) => Promise.resolve(e), 300), Bt = {
   autocomplete: {
     expandResult: "显示 {number} 条 “{name}” 的搜索结果 "
   }
-}, K = {
-  en: ie(Bt),
-  zh: ie($t)
-}, ye = {
-  filters: o.shape({
-    keyword: o.string,
-    sortBy: o.string,
-    sortDirection: o.string,
-    price: o.string,
-    category: o.string,
-    developer: o.string,
-    resourceType: o.string
+}, V = {
+  en: ue(It),
+  zh: ue(Dt)
+}, Se = {
+  filters: n.shape({
+    keyword: n.string,
+    sortBy: n.string,
+    sortDirection: n.string,
+    price: n.string,
+    category: n.string,
+    developer: n.string,
+    resourceType: n.string
   }),
-  wrapChildren: o.func,
-  extraFilter: o.func,
-  endpoint: o.string.isRequired,
-  blockletRender: o.func.isRequired,
-  onFilterChange: o.func,
-  onSearchSelect: o.func,
-  locale: o.oneOf(["zh", "en"]),
-  baseSearch: o.bool,
+  wrapChildren: n.func,
+  extraFilter: n.func,
+  endpoint: n.string.isRequired,
+  blockletRender: n.func.isRequired,
+  onFilterChange: n.func,
+  onSearchSelect: n.func,
+  locale: n.oneOf(["zh", "en"]),
+  baseSearch: n.bool,
   // sometimes blocklet list can be rendered only before the category is fetched
-  fetchCategoryDelay: o.number
-}, be = {
+  fetchCategoryDelay: n.number
+}, ve = {
   locale: "zh",
   filters: {},
   onFilterChange: () => {
@@ -178,7 +181,7 @@ const Tt = Pt((e) => Promise.resolve(e), 300), Bt = {
   extraFilter: (e) => e,
   baseSearch: !1,
   fetchCategoryDelay: 0
-}, R = {
+}, z = {
   nameAsc: "title",
   nameDesc: "title",
   popularity: "stats.downloads",
@@ -189,254 +192,264 @@ const Tt = Pt((e) => Promise.resolve(e), 300), Bt = {
   blockletsPath: "/api/v2/blocklets.json",
   categoriesPath: "/api/blocklets/categories",
   cacheSize: 100
-}, xe = je({}), { Provider: Rt, Consumer: Cr } = xe;
-function V({
+}, Ce = Ke({}), { Provider: _t, Consumer: $r } = Ce;
+function X({
   filters: e,
-  children: n,
+  children: o,
   endpoint: r,
   locale: l,
-  blockletRender: i,
+  blockletRender: s,
   onFilterChange: c,
-  onSearchSelect: k,
+  onSearchSelect: b,
   extraFilter: g,
-  wrapChildren: d,
+  wrapChildren: u,
   baseSearch: y,
-  serverVersion: p,
-  storeVersion: P,
-  fetchCategoryDelay: B
+  serverVersion: d,
+  storeVersion: C,
+  fetchCategoryDelay: B,
+  showResourcesSwitch: w
 }) {
-  const b = {};
-  p && (b["x-blocklet-server-version"] = p), P && (b["x-blocklet-store-version"] = P);
-  const $ = L(() => tt.create({
+  const T = {};
+  d && (T["x-blocklet-server-version"] = d), C && (T["x-blocklet-store-version"] = C);
+  const P = O(() => nt.create({
     baseURL: r,
-    headers: b
-  }), [r]), m = L(() => ({ sortBy: "popularity", sortDirection: "desc", ...e }), [e]), u = m.category, s = Ve({
-    currentPage: R.currentPage,
-    pageSize: St() ? R.mobilePageSize : R.pageSize,
-    defaultCurrentPage: R.defaultCurrentPage
-  }), [v, x] = F(null), {
-    data: T = { list: [], total: 0 },
-    loading: w,
-    loadMore: _,
-    loadingMore: we
-  } = Qe(
+    headers: T
+  }), [r]), i = O(() => ({
+    sortBy: "popularity",
+    sortDirection: "desc",
+    ...e
+  }), [e]), p = i.category, S = Xe({
+    currentPage: z.currentPage,
+    pageSize: Tt() ? z.mobilePageSize : z.pageSize,
+    defaultCurrentPage: z.defaultCurrentPage
+  }), [x, $] = A(null), {
+    data: f = { list: [], total: 0 },
+    loading: D,
+    loadMore: G,
+    loadingMore: U
+  } = Ye(
     async (a) => {
-      var z;
-      const h = {
-        ...m,
-        sortBy: R[m.sortBy],
-        page: vt(((z = a == null ? void 0 : a.list) == null ? void 0 : z.length) || 0, s.pageSize),
-        pageSize: s.pageSize
+      var _;
+      const m = {
+        ...i,
+        sortBy: z[i.sortBy],
+        page: Rt(((_ = a == null ? void 0 : a.list) == null ? void 0 : _.length) || 0, S.pageSize),
+        pageSize: S.pageSize
       };
-      x(null);
-      const { data: S = {} } = await $.get(R.blockletsPath, {
-        params: h
+      $(null);
+      const { data: k = {} } = await P.get(z.blockletsPath, {
+        params: m
       });
-      return { list: (S == null ? void 0 : S.dataList) || [], total: (S == null ? void 0 : S.total) || 0 };
+      return { list: (k == null ? void 0 : k.dataList) || [], total: (k == null ? void 0 : k.total) || 0 };
     },
     {
       isNoMore: (a) => a ? a.list.length >= a.total : !1,
-      reloadDeps: [r, rt(e)],
+      reloadDeps: [r, lt(e)],
       onError: (a) => {
-        x(a);
+        $(a);
       }
     }
   ), {
-    data: G = [],
-    error: Se,
-    loading: ve,
-    run: Ce
-  } = Je(
+    data: L = [],
+    error: R,
+    loading: Te,
+    run: Re
+  } = Ze(
     async () => {
-      const { data: a } = await $.get(R.categoriesPath);
+      const { data: a } = await P.get(z.categoriesPath);
       return Array.isArray(a) ? a : [];
     },
     { manual: !0 }
-  ), U = L(() => et(G || [], [(h) => h.name], ["asc"]), [G]), re = H(
-    (a, h) => {
-      const S = K[l] ? K[l][a] : K.en[a];
-      return wt(S, h);
+  ), H = O(() => ot(L || [], [(m) => m.name], ["asc"]), [L]), ae = J(
+    (a, m) => {
+      const k = V[l] ? V[l][a] : V.en[a];
+      return Pt(k, m);
     },
     [l]
-  ), oe = L(() => {
-    let a = T.list || [];
+  ), ie = O(() => {
+    let a = f.list || [];
     return a = g(a), a;
-  }, [T, g]), Pe = L(() => kt(U, l), [U, l]), Te = xt(re), Be = {
-    errors: { fetchBlockletsError: v, fetchCategoriesError: Se },
-    loadings: { fetchBlockletsLoading: w, fetchCategoriesLoading: ve, loadingMore: we },
+  }, [f, g]), Be = O(() => Ct(H, l), [H, l]), $e = vt(ae), ze = {
+    errors: { fetchBlockletsError: x, fetchCategoriesError: R },
+    loadings: { fetchBlockletsLoading: D, fetchCategoriesLoading: Te, loadingMore: U },
     endpoint: r,
-    blockletList: oe,
-    wrapChildren: d,
-    t: re,
-    filters: m,
-    selectedCategory: u,
-    categoryList: U,
-    blockletRender: i,
+    blockletList: ie,
+    wrapChildren: u,
+    t: ae,
+    filters: i,
+    selectedCategory: p,
+    categoryList: H,
+    blockletRender: s,
     locale: l,
-    categoryOptions: Pe,
-    priceOptions: Te,
-    storeApi: $,
+    categoryOptions: Be,
+    priceOptions: $e,
+    storeApi: P,
     baseSearch: y,
-    hasNextPage: T.list.length < T.total,
+    showResourcesSwitch: w,
+    hasNextPage: f.list.length < f.total,
     handleSort: (a) => {
-      const h = {
-        ...m,
+      const m = {
+        ...i,
         sortBy: a,
         sortDirection: a === "nameAsc" ? "asc" : "desc"
       };
-      c(h);
+      c(m);
     },
     handleKeyword: (a) => {
-      const h = { ...m, keyword: a || void 0 };
-      c(h);
+      const m = { ...i, keyword: a || void 0 };
+      c(m);
     },
     handlePrice: (a) => {
-      const h = {
-        ...m,
-        price: a === m.price ? void 0 : a
+      const m = {
+        ...i,
+        price: a === i.price ? void 0 : a
       };
-      c(h);
+      c(m);
     },
     handleCategory: (a) => {
-      let h = a;
-      (a === "all" || a === m.category) && (h = void 0);
-      const S = { ...m, category: h };
-      c(S);
+      let m = a;
+      (a === "all" || a === i.category) && (m = void 0);
+      const k = { ...i, category: m };
+      c(k);
     },
     handleDeveloper: (a) => {
-      const h = { ...m, owner: a || void 0 };
-      c(h);
+      const m = { ...i, owner: a || void 0 };
+      c(m);
     },
     handlePage: (a) => {
-      const h = { ...m, currentPage: a };
-      c(h);
+      const m = { ...i, currentPage: a };
+      c(m);
+    },
+    handleSwitchShowResources: () => {
+      const a = { ...i };
+      c(a);
     },
     loadMore: () => {
-      _();
+      G();
     },
     getCategoryLocale: (a) => {
       if (!a)
         return null;
-      let h = null;
-      const S = G.find((z) => z._id === a);
-      return S && (h = S.locales[l]), h;
+      let m = null;
+      const k = L.find((_) => _._id === a);
+      return k && (m = k.locales[l]), m;
     },
     get developerName() {
-      var h, S;
-      return ((S = (h = oe.find((z) => {
-        var ne;
-        return ((ne = z == null ? void 0 : z.owner) == null ? void 0 : ne.did) === m.owner;
-      })) == null ? void 0 : h.owner) == null ? void 0 : S.name) || "";
+      var m, k;
+      return ((k = (m = ie.find((_) => {
+        var se;
+        return ((se = _ == null ? void 0 : _.owner) == null ? void 0 : se.did) === i.owner;
+      })) == null ? void 0 : m.owner) == null ? void 0 : k.name) || "";
     },
-    handleSearchSelect: k
+    handleSearchSelect: b
   };
-  return E(() => {
+  return j(() => {
     setTimeout(() => {
-      Ce();
+      Re();
     }, B || 0);
-  }, [r]), /* @__PURE__ */ t(Rt, { value: Be, children: n });
+  }, [r]), /* @__PURE__ */ t(_t, { value: ze, children: o });
 }
-V.propTypes = {
-  ...ye,
-  children: o.any.isRequired
+X.propTypes = {
+  ...Se,
+  children: n.any.isRequired
 };
-V.defaultProps = be;
+X.defaultProps = ve;
 function I() {
-  const e = Ge(xe);
+  const e = We(Ce);
   return e || {};
 }
-const zt = C(Re)`
+const Nt = v(De)`
   border-radius: 4px;
-`, Q = Ue(({ children: e, rounded: n, loading: r, disabled: l, ...i }, c) => /* @__PURE__ */ t(
-  zt,
+`, Y = He(({ children: e, rounded: o, loading: r, disabled: l, ...s }, c) => /* @__PURE__ */ t(
+  Nt,
   {
     ref: c,
     disableElevation: !0,
     disabled: l || r,
-    ...i,
-    startIcon: r && /* @__PURE__ */ t(W, { size: "1em" }),
+    ...s,
+    startIcon: r && /* @__PURE__ */ t(Q, { size: "1em" }),
     children: e
   }
 ));
-Q.propTypes = {
-  children: o.any,
-  rounded: o.bool,
-  loading: o.bool,
-  disabled: o.bool
+Y.propTypes = {
+  children: n.any,
+  rounded: n.bool,
+  loading: n.bool,
+  disabled: n.bool
 };
-Q.defaultProps = {
+Y.defaultProps = {
   children: null,
   rounded: !1,
   loading: !1,
   disabled: !1
 };
-function J({ title: e, value: n, icon: r, prepend: l, options: i, onChange: c, itemRender: k, ...g }) {
-  const d = M(null), y = de(), [p, P] = F(!1), [B, b] = F(n !== null ? n : ""), $ = Ie(y.breakpoints.down("sm"));
-  E(() => {
-    b(n !== null ? n : "");
-  }, [n]);
-  const m = H(() => {
-    P(!1);
-  }, []), u = H(() => {
-    P(!0);
+function Z({ title: e, value: o, icon: r, prepend: l, options: s, onChange: c, itemRender: b, ...g }) {
+  const u = E(null), y = fe(), [d, C] = A(!1), [B, w] = A(o !== null ? o : ""), T = be(y.breakpoints.down("sm"));
+  j(() => {
+    w(o !== null ? o : "");
+  }, [o]);
+  const P = J(() => {
+    C(!1);
+  }, []), i = J(() => {
+    C(!0);
   }, []);
-  function s(x) {
-    b(x.value), c(x.value), $ && m();
+  function p(x) {
+    w(x.value), c(x.value), T && P();
   }
-  function v(x) {
+  function S(x) {
     return x === B;
   }
-  return /* @__PURE__ */ f(pe, { children: [
-    /* @__PURE__ */ f(
-      It,
+  return /* @__PURE__ */ h(he, { children: [
+    /* @__PURE__ */ h(
+      Lt,
       {
-        ref: d,
-        onClick: u,
+        ref: u,
+        onClick: i,
         variant: "outlined",
         size: "small",
-        className: ["my-select__selector", lt(B) ? "" : "my-select__selector--active"].join(" "),
+        className: ["my-select__selector", st(B) ? "" : "my-select__selector--active"].join(" "),
         ...g,
         children: [
           /* @__PURE__ */ t("div", { className: "my-select__icon", children: r }),
           e,
-          /* @__PURE__ */ t(_e, { className: "my-select__arrowdown", component: nt, fontSize: "small" })
+          /* @__PURE__ */ t(Ne, { className: "my-select__arrowdown", component: it, fontSize: "small" })
         ]
       }
     ),
-    /* @__PURE__ */ t(De, { open: p, anchorEl: d.current, transition: !0, style: { zIndex: "9999" }, children: ({ TransitionProps: x, placement: T }) => /* @__PURE__ */ t(
-      Ne,
+    /* @__PURE__ */ t(Le, { open: d, anchorEl: u.current, transition: !0, style: { zIndex: "9999" }, children: ({ TransitionProps: x, placement: $ }) => /* @__PURE__ */ t(
+      Me,
       {
         ...x,
-        style: { transformOrigin: T === "bottom" ? "center top" : "center bottom" },
-        children: /* @__PURE__ */ t(Ae, { children: /* @__PURE__ */ t(Le, { onClickAway: m, children: /* @__PURE__ */ f(_t, { autoFocusItem: p, onMouseEnter: u, onMouseLeave: m, children: [
+        style: { transformOrigin: $ === "bottom" ? "center top" : "center bottom" },
+        children: /* @__PURE__ */ t(Ae, { children: /* @__PURE__ */ t(Fe, { onClickAway: P, children: /* @__PURE__ */ h(Mt, { autoFocusItem: d, onMouseEnter: i, onMouseLeave: P, children: [
           l,
-          i.map((w) => k ? k(w) : /* @__PURE__ */ t(
-            Me,
+          s.map((f) => b ? b(f) : /* @__PURE__ */ t(
+            Oe,
             {
-              onClick: () => s(w),
+              onClick: () => p(f),
               className: [
                 "my-select__option",
-                v(w.value) ? "my-select__option--active" : ""
+                S(f.value) ? "my-select__option--active" : ""
               ].join(" "),
-              children: w.name
+              children: f.name
             },
-            w.value
+            f.value
           ))
         ] }) }) })
       }
     ) })
   ] });
 }
-J.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
+Z.propTypes = {
+  options: n.array.isRequired,
+  value: n.oneOfType([n.string, n.number, n.array]),
+  onChange: n.func,
+  itemRender: n.func,
+  title: n.string.isRequired,
+  icon: n.any,
+  prepend: n.any
 };
-J.defaultProps = {
+Z.defaultProps = {
   value: null,
   icon: null,
   prepend: null,
@@ -444,7 +457,7 @@ J.defaultProps = {
   onChange: () => {
   }
 };
-const It = C(Q)`
+const Lt = v(Y)`
   border: 1px solid #f0f0f0;
   padding: 6px 8px 6px 12px;
   font-weight: ${(e) => e.theme.typography.fontWeightBold};
@@ -476,7 +489,7 @@ const It = C(Q)`
       margin-right: 3px;
     }
   }
-`, _t = C(ze)`
+`, Mt = v(_e)`
   .my-select__option__icon {
     color: transparent;
     font-size: 16px;
@@ -493,23 +506,23 @@ const It = C(Q)`
     }
   }
 `;
-function A({ options: e, onChange: n, title: r, value: l }) {
-  return /* @__PURE__ */ f(Dt, { children: [
+function F({ options: e, onChange: o, title: r, value: l }) {
+  return /* @__PURE__ */ h(At, { children: [
     /* @__PURE__ */ t("div", { className: "title", children: r }),
-    /* @__PURE__ */ t("div", { className: "list", children: e.map((i) => /* @__PURE__ */ t(
+    /* @__PURE__ */ t("div", { className: "list", children: e.map((s) => /* @__PURE__ */ t(
       "div",
       {
-        title: i.name,
+        title: s.name,
         "data-cy": "filter",
-        className: l === i.value ? "select item" : "item",
-        onClick: () => n(i.value),
-        children: i.name
+        className: l === s.value ? "select item" : "item",
+        onClick: () => o(s.value),
+        children: s.name
       },
-      i.value
+      s.value
     )) })
   ] });
 }
-const Dt = C("div")`
+const At = v("div")`
   .title {
     font-size: 18px;
     font-weight: bold;
@@ -537,48 +550,48 @@ const Dt = C("div")`
     font-weight: bold;
   }
 `;
-A.propTypes = {
-  title: o.string.isRequired,
-  options: o.array.isRequired,
-  onChange: o.func.isRequired,
-  value: o.oneOfType([o.string, o.number])
+F.propTypes = {
+  title: n.string.isRequired,
+  options: n.array.isRequired,
+  onChange: n.func.isRequired,
+  value: n.oneOfType([n.string, n.number])
 };
-A.defaultProps = {
+F.defaultProps = {
   value: null
 };
-function X() {
-  const { selectedCategory: e, handleCategory: n, t: r, handlePrice: l, filters: i, categoryOptions: c, priceOptions: k } = I(), [g, d] = F(!1), y = (p, P) => {
-    p === "category" && n(P), p === "price" && l(P), d(!1);
+function ee() {
+  const { selectedCategory: e, handleCategory: o, t: r, handlePrice: l, filters: s, categoryOptions: c, priceOptions: b } = I(), [g, u] = A(!1), y = (d, C) => {
+    d === "category" && o(C), d === "price" && l(C), u(!1);
   };
-  return /* @__PURE__ */ f(Nt, { children: [
-    /* @__PURE__ */ t(st, { variant: "outlined", className: "filter-button", onClick: () => d(!0), children: /* @__PURE__ */ t(at, { className: "filter-icon", fontSize: "small" }) }),
-    /* @__PURE__ */ f(it, { fullWidth: !0, title: "", open: g, onClose: () => d(!1), children: [
+  return /* @__PURE__ */ h(Ft, { children: [
+    /* @__PURE__ */ t(ut, { variant: "outlined", className: "filter-button", onClick: () => u(!0), children: /* @__PURE__ */ t(ct, { className: "filter-icon", fontSize: "small" }) }),
+    /* @__PURE__ */ h(pt, { fullWidth: !0, title: "", open: g, onClose: () => u(!1), children: [
       /* @__PURE__ */ t(
-        A,
+        F,
         {
           title: r("common.price"),
-          options: k,
-          value: i.price,
-          onChange: (p) => {
-            y("price", p);
+          options: b,
+          value: s.price,
+          onChange: (d) => {
+            y("price", d);
           }
         }
       ),
       c.length > 0 && /* @__PURE__ */ t("div", { style: { marginTop: "16px" }, children: /* @__PURE__ */ t(
-        A,
+        F,
         {
           title: r("common.category"),
           options: c,
           value: e,
-          onChange: (p) => {
-            y("category", p);
+          onChange: (d) => {
+            y("category", d);
           }
         }
       ) })
     ] })
   ] });
 }
-const Nt = C("div")`
+const Ft = v("div")`
   .filter-button {
     margin-right: 16px;
     border-color: rgb(240, 240, 240);
@@ -590,9 +603,9 @@ const Nt = C("div")`
     color: ${(e) => e.theme.palette.grey[500]};
   }
 `;
-X.propTypes = {};
-X.defaultProps = {};
-const At = C("div")`
+ee.propTypes = {};
+ee.defaultProps = {};
+const Ot = v("div")`
   .MuiChip-root {
     border-radius: 4px;
     height: initial;
@@ -601,139 +614,139 @@ const At = C("div")`
     padding: 4px 0;
   }
 `;
-function N({ label: e, icon: n, onDelete: r, ...l }) {
-  return e ? /* @__PURE__ */ t(At, { ...l, children: /* @__PURE__ */ t(Oe, { color: "primary", "data-cy": "filter-tag", icon: n, label: e, onDelete: r }) }) : null;
+function M({ label: e, icon: o, onDelete: r, ...l }) {
+  return e ? /* @__PURE__ */ t(Ot, { ...l, children: /* @__PURE__ */ t(Ee, { color: "primary", "data-cy": "filter-tag", icon: o, label: e, onDelete: r }) }) : null;
 }
-N.propTypes = {
-  label: o.string,
-  onDelete: o.func,
-  icon: o.element
+M.propTypes = {
+  label: n.string,
+  onDelete: n.func,
+  icon: n.element
 };
-N.defaultProps = {
+M.defaultProps = {
   onDelete: null,
   icon: null,
   label: null
 };
-function se() {
+function de() {
   const { t: e } = I();
-  return /* @__PURE__ */ t(ge, { style: { textAlign: "center" }, variant: "subtitle2", children: e("blocklet.noResults") });
+  return /* @__PURE__ */ t(ke, { style: { textAlign: "center" }, variant: "subtitle2", children: e("blocklet.noResults") });
 }
-function O({ filterTip: e, keywordTip: n }) {
-  const { t: r, locale: l } = I(), i = () => l === "zh" ? "、" : " , ";
-  return /* @__PURE__ */ f(dt, { className: "tips", children: [
+function q({ filterTip: e, keywordTip: o }) {
+  const { t: r, locale: l } = I(), s = () => l === "zh" ? "、" : " , ";
+  return /* @__PURE__ */ h(ht, { className: "tips", children: [
     /* @__PURE__ */ t("span", { style: { marginRight: "16px" }, children: r("blocklet.emptyTip") }),
     e && /* @__PURE__ */ t("span", { children: r("blocklet.filterTip") }),
-    e && n && i(),
-    n && /* @__PURE__ */ t("span", { children: r("blocklet.keywordTip") })
+    e && o && s(),
+    o && /* @__PURE__ */ t("span", { children: r("blocklet.keywordTip") })
   ] });
 }
-O.propTypes = {
-  filterTip: o.bool,
-  keywordTip: o.bool
+q.propTypes = {
+  filterTip: n.bool,
+  keywordTip: n.bool
 };
-O.defaultProps = {
+q.defaultProps = {
   filterTip: !1,
   keywordTip: !1
 };
-function j({ primaryStart: e, primaryEnd: n, filter: r }) {
-  return /* @__PURE__ */ f(ge, { variant: "subtitle2", children: [
+function W({ primaryStart: e, primaryEnd: o, filter: r }) {
+  return /* @__PURE__ */ h(ke, { variant: "subtitle2", children: [
     /* @__PURE__ */ t("span", { children: e }),
-    /* @__PURE__ */ f("span", { className: "primary", children: [
+    /* @__PURE__ */ h("span", { className: "primary", children: [
       " ",
       r,
       " "
     ] }),
-    /* @__PURE__ */ f("span", { children: [
-      n,
+    /* @__PURE__ */ h("span", { children: [
+      o,
       " "
     ] })
   ] });
 }
-j.propTypes = {
-  primaryStart: o.string.isRequired,
-  primaryEnd: o.string.isRequired,
-  filter: o.string.isRequired
+W.propTypes = {
+  primaryStart: n.string.isRequired,
+  primaryEnd: n.string.isRequired,
+  filter: n.string.isRequired
 };
-function Y({ blocklets: e, ...n }) {
+function te({ blocklets: e, ...o }) {
   const {
     blockletRender: r,
     errors: l,
-    loadings: i,
+    loadings: s,
     selectedCategory: c,
-    getCategoryLocale: k,
+    getCategoryLocale: b,
     filters: g,
-    t: d,
+    t: u,
     hasNextPage: y,
-    loadMore: p,
-    endpoint: P
-  } = I(), B = M(null), b = Xe(B.current), $ = Ye(() => b ? b.width > 900 ? 12 : b.width > 600 ? 8 : 4 : 0, [b]), m = !!c || !!g.price, [u] = pt({
-    loading: i.fetchBlockletsLoading || i.loadingMore,
+    loadMore: d,
+    endpoint: C
+  } = I(), B = E(null), w = et(B.current), T = tt(() => w ? w.width > 900 ? 12 : w.width > 600 ? 8 : 4 : 0, [w]), P = !!c || !!g.price, [i] = mt({
+    loading: s.fetchBlockletsLoading || s.loadingMore,
     hasNextPage: y,
-    onLoadMore: p
+    onLoadMore: d
   });
   if (l.fetchBlockletsError)
     return /* @__PURE__ */ t(
-      fe,
+      xe,
       {
-        error: new Error(`Failed to fetch blocklets from ${P}: ${l.fetchBlockletsError.message}`)
+        error: new Error(`Failed to fetch blocklets from ${C}: ${l.fetchBlockletsError.message}`)
       }
     );
-  if (i.fetchBlockletsLoading)
-    return /* @__PURE__ */ t(D, { height: 60, display: "flex", alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ t(W, {}) });
-  if (g.keyword && m && e.length === 0)
-    return /* @__PURE__ */ f(q, { children: [
+  if (s.fetchBlockletsLoading)
+    return /* @__PURE__ */ t(N, { height: 60, display: "flex", alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ t(Q, {}) });
+  if (g.keyword && P && e.length === 0)
+    return /* @__PURE__ */ h(K, { children: [
       /* @__PURE__ */ t(
-        j,
+        W,
         {
-          primaryStart: d("blocklet.noBlockletPart1"),
-          primaryEnd: d("blocklet.noBlockletPart2"),
+          primaryStart: u("blocklet.noBlockletPart1"),
+          primaryEnd: u("blocklet.noBlockletPart2"),
           filter: g.keyword
         }
       ),
-      /* @__PURE__ */ t(O, { keywordTip: !0, filterTip: !0 })
+      /* @__PURE__ */ t(q, { keywordTip: !0, filterTip: !0 })
     ] });
   if (g.keyword && e.length === 0)
-    return /* @__PURE__ */ f(q, { children: [
+    return /* @__PURE__ */ h(K, { children: [
       /* @__PURE__ */ t(
-        j,
+        W,
         {
-          primaryStart: d("blocklet.noBlockletPart1"),
-          primaryEnd: d("blocklet.noBlockletPart2"),
+          primaryStart: u("blocklet.noBlockletPart1"),
+          primaryEnd: u("blocklet.noBlockletPart2"),
           filter: g.keyword
         }
       ),
-      /* @__PURE__ */ t(O, { keywordTip: !0 })
+      /* @__PURE__ */ t(q, { keywordTip: !0 })
     ] });
-  if (m && e.length === 0) {
-    const s = k(c);
-    return /* @__PURE__ */ f(q, { children: [
-      s ? /* @__PURE__ */ t(
-        j,
+  if (P && e.length === 0) {
+    const p = b(c);
+    return /* @__PURE__ */ h(K, { children: [
+      p ? /* @__PURE__ */ t(
+        W,
         {
-          primaryStart: d("blocklet.noCategoryResults1"),
-          primaryEnd: d("blocklet.noCategoryResults2"),
-          filter: s
+          primaryStart: u("blocklet.noCategoryResults1"),
+          primaryEnd: u("blocklet.noCategoryResults2"),
+          filter: p
         }
-      ) : /* @__PURE__ */ t(se, {}),
-      /* @__PURE__ */ t(O, { filterTip: !0 })
+      ) : /* @__PURE__ */ t(de, {}),
+      /* @__PURE__ */ t(q, { filterTip: !0 })
     ] });
   }
-  return e.length === 0 ? /* @__PURE__ */ t(q, { children: /* @__PURE__ */ t(se, {}) }) : /* @__PURE__ */ f(Lt, { container: !0, ...n, columns: $, ref: B, children: [
-    e.map((s) => /* @__PURE__ */ t(ce, { item: !0, xs: 4, "data-blocklet-did": s.did, children: r({ blocklet: s, blocklets: e }) }, s.did)),
-    y && /* @__PURE__ */ t(ce, { item: !0, xs: 12, ref: u, children: /* @__PURE__ */ t(D, { height: 60, display: "flex", justifyContent: "center", children: /* @__PURE__ */ t(W, {}) }) })
+  return e.length === 0 ? /* @__PURE__ */ t(K, { children: /* @__PURE__ */ t(de, {}) }) : /* @__PURE__ */ h(Et, { container: !0, ...o, columns: T, ref: B, children: [
+    e.map((p) => /* @__PURE__ */ t(me, { item: !0, xs: 4, "data-blocklet-did": p.did, children: r({ blocklet: p, blocklets: e }) }, p.did)),
+    y && /* @__PURE__ */ t(me, { item: !0, xs: 12, ref: i, children: /* @__PURE__ */ t(N, { height: 60, display: "flex", justifyContent: "center", children: /* @__PURE__ */ t(Q, {}) }) })
   ] });
 }
-Y.propTypes = {
-  blocklets: o.array.isRequired
+te.propTypes = {
+  blocklets: n.array.isRequired
 };
-Y.defaultProps = {};
-const Lt = C(he)`
+te.defaultProps = {};
+const Et = v(we)`
   opacity: ${(e) => e.columns > 0 ? 1 : 0};
   &.MuiGrid-root {
     width: 100%;
     margin: 0 -16px;
   }
-`, ce = Ke(C(he)`
+`, me = Ve(v(we)`
   @media (max-width: ${(e) => e.theme.breakpoints.values.sm}px) {
     &.MuiGrid-item {
       padding-bottom: 0px;
@@ -744,7 +757,7 @@ const Lt = C(he)`
       margin-bottom: ${(e) => e.theme.spacing(2)};
     }
   }
-`), q = C(ct)`
+`), K = v(dt)`
   text-align: center;
   .primary {
     color: ${(e) => e.theme.palette.primary.main};
@@ -753,22 +766,22 @@ const Lt = C(he)`
     margin-top: ${(e) => e.theme.spacing(1)};
   }
 `;
-function Z() {
-  const { selectedCategory: e, handleCategory: n, t: r, handlePrice: l, filters: i, categoryOptions: c, priceOptions: k } = I();
-  return /* @__PURE__ */ f(Mt, { children: [
-    /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(A, { title: r("common.price"), options: k, value: i.price, onChange: l }) }),
+function re() {
+  const { selectedCategory: e, handleCategory: o, t: r, handlePrice: l, filters: s, categoryOptions: c, priceOptions: b } = I();
+  return /* @__PURE__ */ h(qt, { children: [
+    /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(F, { title: r("common.price"), options: b, value: s.price, onChange: l }) }),
     c.length > 0 && /* @__PURE__ */ t("div", { style: { marginTop: "16px" }, children: /* @__PURE__ */ t(
-      A,
+      F,
       {
         title: r("common.category"),
         options: c,
         value: e,
-        onChange: n
+        onChange: o
       }
     ) })
   ] });
 }
-const Mt = C("aside")`
+const qt = v("aside")`
   width: 220px;
   margin-right: ${(e) => e.theme.spacing(2)};
   height: 100%;
@@ -777,44 +790,45 @@ const Mt = C("aside")`
   overflow-y: auto;
   z-index: auto;
 `;
-Z.propTypes = {};
-Z.defaultProps = {};
-function ee({ placeholder: e, ...n }) {
-  const { filters: r, handleKeyword: l } = I(), [i, c] = F(r.keyword || ""), k = Ze(l, { wait: 300 }), g = (y) => {
-    const { value: p } = y.target;
-    c(p), k.run(p);
-  }, d = () => {
+re.propTypes = {};
+re.defaultProps = {};
+function oe({ placeholder: e, ...o }) {
+  const { filters: r, handleKeyword: l } = I(), [s, c] = A(r.keyword || ""), b = rt(l, { wait: 300 }), g = (y) => {
+    const { value: d } = y.target;
+    c(d), b.run(d);
+  }, u = () => {
     c(""), l();
   };
-  return E(() => {
+  return j(() => {
     c(r.keyword || "");
   }, [r.keyword]), /* @__PURE__ */ t(
-    Ot,
+    jt,
     {
       inputProps: {
         "data-cy": "search-blocklet"
       },
-      startAdornment: /* @__PURE__ */ t(le, { position: "start", children: /* @__PURE__ */ t(Ft, {}) }),
+      startAdornment: /* @__PURE__ */ t(ce, { position: "start", children: /* @__PURE__ */ t(Gt, {}) }),
       onChange: g,
       placeholder: e,
-      value: i,
+      value: s,
       title: e,
       "data-cy": "search",
-      endAdornment: i && /* @__PURE__ */ t(le, { position: "end", children: /* @__PURE__ */ t(Et, { "data-cy": "search-delete", onClick: d }) }),
-      ...n
+      endAdornment: s && /* @__PURE__ */ t(ce, { position: "end", children: /* @__PURE__ */ t(Ut, { "data-cy": "search-delete", onClick: u }) }),
+      ...o
     }
   );
 }
-ee.propTypes = {
-  placeholder: o.string
+oe.propTypes = {
+  placeholder: n.string
 };
-ee.defaultProps = {
+oe.defaultProps = {
   placeholder: "Type to search..."
 };
-const Ot = C(Fe)`
+const jt = v(qe)`
   background-color: ${(e) => e.theme.palette.grey[50]};
   font-size: 14px;
   border-radius: 6px;
+  width: 100%;
   .MuiInputBase-input {
     padding: 8px 0 8px 10px;
   }
@@ -827,49 +841,49 @@ const Ot = C(Fe)`
       color: transparent;
     }
   }
-`, Ft = C(ut)`
+`, Gt = v(ft)`
   color: ${(e) => e.theme.palette.grey[500]};
   font-size: 28px;
   @media (max-width: ${(e) => e.theme.breakpoints.values.md}px) {
     font-size: 24px;
   }
-`, Et = C(mt)`
+`, Ut = v(gt)`
   color: ${(e) => e.theme.palette.grey[500]};
   font-size: 16px;
   cursor: pointer;
 `;
-function te({ onSelect: e, wrapChildren: n }) {
-  const r = M(null), l = M(null), i = M(null), { storeApi: c, blockletRender: k, filters: g, endpoint: d, handleKeyword: y, t: p } = I(), P = async (u) => {
-    const { data: s } = await c.get(R.blockletsPath, { params: u }), v = s.dataList || [];
-    return v.length > 0 && v.unshift({ type: "more-result", total: s.total || 0 }), v;
-  }, B = (u) => {
-    y(u.state.query), u.setIsOpen(!1);
-  }, b = () => {
+function ne({ onSelect: e, wrapChildren: o }) {
+  const r = E(null), l = E(null), s = E(null), { storeApi: c, blockletRender: b, filters: g, endpoint: u, handleKeyword: y, t: d } = I(), C = async (i) => {
+    const { data: p } = await c.get(z.blockletsPath, { params: i }), S = p.dataList || [];
+    return S.length > 0 && S.unshift({ type: "more-result", total: p.total || 0 }), S;
+  }, B = (i) => {
+    y(i.state.query), i.setIsOpen(!1);
+  }, w = () => {
     r.current && setTimeout(() => {
-      const u = r.current.querySelector("input.bl-autocomplete-input");
-      u && u.focus();
+      const i = r.current.querySelector("input.bl-autocomplete-input");
+      i && i.focus();
     });
-  }, $ = (u) => {
-    u.setIsOpen(!1), b();
-  }, m = ({ prevState: u, state: s }) => {
-    u.query !== s.query && (s.query || y());
+  }, T = (i) => {
+    i.setIsOpen(!1), w();
+  }, P = ({ prevState: i, state: p }) => {
+    i.query !== p.query && (p.query || y());
   };
-  return gt(
+  return wt(
     "ctrl + k, command + k",
-    (u) => (u.stopPropagation(), u.preventDefault(), b(), !1),
+    (i) => (i.stopPropagation(), i.preventDefault(), w(), !1),
     { enableOnTags: ["INPUT"] }
-  ), E(() => {
-    b();
-  }, [d]), E(() => {
+  ), j(() => {
+    w();
+  }, [u]), j(() => {
     if (!r.current)
       return;
-    const u = ft({
+    const i = bt({
       container: r.current,
-      renderer: { createElement: We, Fragment: He, render: () => {
+      renderer: { createElement: Qe, Fragment: Je, render: () => {
       } },
-      render({ children: s }, v) {
+      render({ children: p }, S) {
         var x;
-        (!l.current || i.current !== v) && (i.current = v, (x = l.current) == null || x.unmount(), l.current = ht(v)), l.current.render(n(s));
+        (!l.current || s.current !== S) && (s.current = S, (x = l.current) == null || x.unmount(), l.current = yt(S)), l.current.render(o(p));
       },
       autoFocus: !0,
       openOnFocus: !1,
@@ -883,54 +897,54 @@ function te({ onSelect: e, wrapChildren: n }) {
         detachedContainer: "bl-autocomplete-detached-container"
       },
       translations: {
-        clearButtonTitle: p("common.clear"),
-        detachedCancelButtonText: p("common.cancel"),
-        submitButtonTitle: p("common.search"),
-        detachedSearchButtonTitle: p("common.search")
+        clearButtonTitle: d("common.clear"),
+        detachedCancelButtonText: d("common.cancel"),
+        submitButtonTitle: d("common.search"),
+        detachedSearchButtonTitle: d("common.search")
       },
-      placeholder: p("common.searchStore"),
+      placeholder: d("common.searchStore"),
       initialState: {
         query: g.keyword
       },
-      onStateChange(s) {
-        m(s);
+      onStateChange(p) {
+        P(p);
       },
       onSubmit: B,
-      onReset(s) {
-        $(s);
+      onReset(p) {
+        T(p);
       },
-      getSources({ query: s, state: v, ...x }) {
-        const T = {
+      getSources({ query: p, state: S, ...x }) {
+        const $ = {
           ...g,
-          sortBy: R[g.sortBy],
+          sortBy: z[g.sortBy],
           page: 1,
           pageSize: 10,
-          keyword: s
+          keyword: p
         };
-        return Tt([
+        return zt([
           {
             sourceId: "blocklets",
             getItems() {
-              return P(T);
+              return C($);
             },
             // 选中后填充 搜索框中值
-            getItemInputValue({ item: w }) {
-              return w.type === "more-result" ? s : w.title;
+            getItemInputValue({ item: f }) {
+              return f.type === "more-result" ? p : f.title;
             },
             // 选中或者点击自动完成列表中的 item 时触发
-            onSelect({ event: w, item: _ }) {
-              return _.type === "more-result" ? (x.setIsOpen(!1), y(s)) : w.type === "keydown" ? y(_.title) : e({
-                blocklet: _,
-                detailUrl: yt(d, `/blocklets/${_.did}`),
-                storeUrl: d
+            onSelect({ event: f, item: D }) {
+              return D.type === "more-result" ? (x.setIsOpen(!1), y(p)) : f.type === "keydown" ? y(D.title) : e({
+                blocklet: D,
+                detailUrl: xt(u, `/blocklets/${D.did}`),
+                storeUrl: u
               });
             },
             templates: {
-              item({ item: w }) {
-                return w.type === "more-result" ? /* @__PURE__ */ t("div", { children: p("autocomplete.expandResult", { name: s, number: w.total.toLocaleString() }) }) : k({ blocklet: w, autocompleteSetters: x });
+              item({ item: f }) {
+                return f.type === "more-result" ? /* @__PURE__ */ t("div", { children: d("autocomplete.expandResult", { name: p, number: f.total.toLocaleString() }) }) : b({ blocklet: f, autocompleteSetters: x });
               },
               noResults() {
-                return p("blocklet.noResults");
+                return d("blocklet.noResults");
               }
             }
           }
@@ -938,13 +952,13 @@ function te({ onSelect: e, wrapChildren: n }) {
       }
     });
     return () => {
-      u.destroy();
+      i.destroy();
     };
-  }, [g, k]), /* @__PURE__ */ f(pe, { children: [
+  }, [g, b]), /* @__PURE__ */ h(he, { children: [
     /* @__PURE__ */ t(
-      ue,
+      ge,
       {
-        styles: me`
+        styles: ye`
           .bl-autocomplete-detached-container {
             .bl-autocomplete-detached-cancel {
               white-space: nowrap;
@@ -956,89 +970,126 @@ function te({ onSelect: e, wrapChildren: n }) {
     /* @__PURE__ */ t("div", { className: "bl-search-container", ref: r })
   ] });
 }
-te.propTypes = {
-  onSelect: o.func.isRequired,
-  wrapChildren: o.func
+ne.propTypes = {
+  onSelect: n.func.isRequired,
+  wrapChildren: n.func
 };
-te.defaultProps = {
+ne.defaultProps = {
   wrapChildren: (e) => e
 };
-function qt() {
-  var v, x;
+function le({ t: e }) {
+  const { filters: o, handleSwitchShowResources: r } = I(), l = () => {
+    o.showResources = !o.showResources, r();
+  };
+  return /* @__PURE__ */ t(
+    kt,
+    {
+      checked: o.showResources,
+      onChange: l,
+      labelProps: {
+        label: /* @__PURE__ */ t(je, { marginLeft: "8px", fontSize: "small", children: /* @__PURE__ */ t("span", { children: e("common.showResources") }) })
+      }
+    }
+  );
+}
+le.propTypes = {
+  t: n.func.isRequired
+};
+le.defaultProps = {};
+function Kt() {
+  var G, U, L;
   const {
     handleDeveloper: e,
-    blockletList: n,
+    blockletList: o,
     filters: r,
     developerName: l,
-    handleSort: i,
+    handleSort: s,
     handleCategory: c,
-    handlePrice: k,
+    handlePrice: b,
     handleSearchSelect: g,
-    t: d,
+    t: u,
     getCategoryLocale: y,
-    priceOptions: p,
-    wrapChildren: P,
-    baseSearch: B
-  } = I(), b = bt(d), $ = ((v = b.find((T) => T.value === r.sortBy)) == null ? void 0 : v.name) || d("sort.sort"), m = y(r.category), { resourceType: u } = r || {}, s = (x = p.find((T) => T.value === r.price)) == null ? void 0 : x.name;
-  return /* @__PURE__ */ f(D, { display: "flex", alignItems: "flex-start", height: "100%", children: [
-    /* @__PURE__ */ t(ae, { mdDown: !0, children: /* @__PURE__ */ t(Z, {}) }),
-    /* @__PURE__ */ f(jt, { children: [
-      /* @__PURE__ */ f(Gt, { children: [
-        /* @__PURE__ */ f(D, { className: "filter-bar", display: "flex", alignItems: "center", children: [
-          B ? /* @__PURE__ */ t(ee, { className: "bl-search-container", placeholder: d("common.searchStore") }) : /* @__PURE__ */ t(te, { onSelect: g, wrapChildren: P }),
-          /* @__PURE__ */ f(D, { mt: 0, ml: "16px", className: "filter-container", children: [
-            /* @__PURE__ */ t(ae, { mdUp: !0, children: /* @__PURE__ */ t(X, {}) }),
+    priceOptions: d,
+    wrapChildren: C,
+    showResourcesSwitch: B,
+    baseSearch: w
+  } = I(), T = St(u), P = ((G = T.find((R) => R.value === r.sortBy)) == null ? void 0 : G.name) || u("sort.sort"), i = y(r.category), { resourceType: p } = r || {}, S = (U = d.find((R) => R.value === r.price)) == null ? void 0 : U.name, [x, $] = A(!1), f = be((R) => R.breakpoints.down("md")), D = !w || x || f || ((L = r == null ? void 0 : r.keyword) == null ? void 0 : L.length);
+  return /* @__PURE__ */ h(N, { display: "flex", alignItems: "flex-start", height: "100%", children: [
+    /* @__PURE__ */ t(pe, { mdDown: !0, children: /* @__PURE__ */ t(re, {}) }),
+    /* @__PURE__ */ h(Wt, { children: [
+      /* @__PURE__ */ h(Ht, { children: [
+        /* @__PURE__ */ h(N, { className: "filter-bar", display: "flex", alignItems: "center", children: [
+          /* @__PURE__ */ t(
+            "form",
+            {
+              className: "search-form",
+              style: D ? { flex: 1, width: "100%" } : {},
+              onSubmit: (R) => {
+                R.preventDefault(), R.stopPropagation();
+              },
+              onFocus: () => {
+                $(!0);
+              },
+              onBlur: () => {
+                $(!1);
+              },
+              children: w ? /* @__PURE__ */ t(oe, { className: "bl-search-container", placeholder: u("common.searchStore") }) : /* @__PURE__ */ t(ne, { onSelect: g, wrapChildren: C })
+            }
+          ),
+          /* @__PURE__ */ h(N, { mt: 0, ml: "16px", className: "filter-container", display: "flex", alignItems: "center", children: [
+            !f && B && /* @__PURE__ */ t(N, { ml: 1, mr: 1, children: /* @__PURE__ */ t(le, { t: u }) }),
+            /* @__PURE__ */ t(pe, { mdUp: !0, children: /* @__PURE__ */ t(ee, {}) }),
             /* @__PURE__ */ t(
-              J,
+              Z,
               {
                 value: r.sortBy,
-                options: b,
-                title: $,
-                icon: /* @__PURE__ */ t($e, {}),
-                onChange: (T) => {
-                  i(T);
+                options: T,
+                title: P,
+                icon: /* @__PURE__ */ t(Ie, {}),
+                onChange: (R) => {
+                  s(R);
                 }
               }
             )
           ] })
         ] }),
-        /* @__PURE__ */ f(D, { display: "flex", flexWrap: "wrap", alignItems: "center", mb: "16px", children: [
+        /* @__PURE__ */ h(N, { display: "flex", flexWrap: "wrap", alignItems: "center", mb: "16px", children: [
           /* @__PURE__ */ t(
-            N,
+            M,
             {
               label: l,
-              icon: /* @__PURE__ */ t(Ee, {}),
+              icon: /* @__PURE__ */ t(Ge, {}),
               onDelete: () => {
                 e(null);
               }
             }
           ),
           /* @__PURE__ */ t(
-            N,
+            M,
             {
-              label: m,
+              label: i,
               onDelete: () => {
                 c(null);
               }
             }
           ),
           /* @__PURE__ */ t(
-            N,
+            M,
             {
-              label: s,
+              label: S,
               onDelete: () => {
-                k(null);
+                b(null);
               }
             }
           ),
-          u && /* @__PURE__ */ t(N, { label: `${d("common.resourceType")}: ${u}` })
+          p && /* @__PURE__ */ t(M, { label: `${u("common.resourceType")}: ${p}` })
         ] })
       ] }),
-      /* @__PURE__ */ t(qe, { FallbackComponent: fe, children: /* @__PURE__ */ t("div", { style: { position: "relative", flex: 1, overflow: "auto" }, children: /* @__PURE__ */ t(Y, { blocklets: n }) }) })
+      /* @__PURE__ */ t(Ue, { FallbackComponent: xe, children: /* @__PURE__ */ t("div", { style: { position: "relative", flex: 1, overflow: "auto" }, children: /* @__PURE__ */ t(te, { blocklets: o }) }) })
     ] })
   ] });
 }
-const jt = C("main")`
+const Wt = v("main")`
   display: flex;
   flex-direction: column;
   flex: 1;
@@ -1052,16 +1103,16 @@ const jt = C("main")`
     white-space: nowrap;
   }
   .bl-search-container {
-    flex: 2;
     margin-left: 0px;
   }
-
   .filter-container {
-    flex: 1;
     display: flex;
     justify-content: flex-end;
   }
   @media (max-width: ${(e) => e.theme.breakpoints.values.md}px) {
+    .search-form {
+      flex: 1;
+    }
     .bl-search-container {
       width: 100%;
       margin-bottom: ${(e) => e.theme.spacing(2)};
@@ -1082,29 +1133,29 @@ const jt = C("main")`
       font-size: 12px;
     }
   }
-`, Gt = C("div")`
+`, Ht = v("div")`
   position: sticky;
   top: 0;
   z-index: 9;
   background-color: white;
 `;
-function ke(e) {
-  const n = de(), r = Ct(n.palette.primary.main), l = {
-    autocomplete: me`
+function Pe(e) {
+  const o = fe(), r = Bt(o.palette.primary.main), l = {
+    autocomplete: ye`
       :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-detached-media-query: (max-width: ${o.breakpoints.values.md}px) !important;
+        --aa-detached-modal-media-query: (min-width: ${o.breakpoints.values.md}px) !important;
+        --aa-detached-modal-max-width: ${o.breakpoints.values.md}px !important;
         --aa-selected-color-rgb: ${r.r}, ${r.g}, ${r.b} !important;
         --aa-primary-color-rgb: ${r.r}, ${r.g}, ${r.b} !important;
         --aa-input-background-color-rgb: 250, 250, 250 !important;
       }
       .bl-autocomplete-panel {
-        z-index: ${n.zIndex.modal};
+        z-index: ${o.zIndex.modal};
       }
       .bl-autocomplete-label {
         .aa-SubmitIcon {
-          color: ${n.palette.grey[500]} !important;
+          color: ${o.palette.grey[500]} !important;
         }
       }
       .bl-autocomplete-form {
@@ -1120,7 +1171,7 @@ function ke(e) {
           box-shadow: none !important;
         }
         .aa-SubmitIcon {
-          color: ${n.palette.grey[500]} !important;
+          color: ${o.palette.grey[500]} !important;
         }
       }
       .aa-Panel .arcblock-blocklet button {
@@ -1128,13 +1179,13 @@ function ke(e) {
       }
     `
   };
-  return /* @__PURE__ */ f(V, { ...e, children: [
-    /* @__PURE__ */ t(ue, { styles: l.autocomplete }),
-    /* @__PURE__ */ t(qt, {})
+  return /* @__PURE__ */ h(X, { ...e, children: [
+    /* @__PURE__ */ t(ge, { styles: l.autocomplete }),
+    /* @__PURE__ */ t(Kt, {})
   ] });
 }
-ke.propTypes = ye;
-ke.defaultProps = be;
+Pe.propTypes = Se;
+Pe.defaultProps = ve;
 export {
-  ke as default
+  Pe as default
 };