@blocklet/list 0.14.5 → 0.14.6

package/lib/index.es.js

@@ -1,14 +1,14 @@
-import { jsx as t, jsxs as p, Fragment as z } from "react/jsx-runtime";
-import { styled as E, useTheme as xe } from "@arcblock/ux/lib/Theme";
+import { jsx as t, jsxs as p, Fragment as A } from "react/jsx-runtime";
+import { styled as _, useTheme as xe } from "@arcblock/ux/lib/Theme";
 import { Global as we, css as ke } from "@emotion/react";
 import { ErrorFallback as ee } from "@arcblock/ux/lib/ErrorBoundary";
-import { Button as te, useTheme as ve, useMediaQuery as D, Drawer as Je, Box as C, CircularProgress as re, MenuList as Ke, SvgIcon as Ze, Popper as et, Grow as tt, Paper as rt, ClickAwayListener as ot, MenuItem as nt, Stack as I, FormControlLabel as Ce, Checkbox as Se, Typography as L, Link as lt, Grid as he, Chip as at, OutlinedInput as it, InputAdornment as me } from "@mui/material";
+import { Button as te, useTheme as ve, useMediaQuery as N, Drawer as Je, Box as C, CircularProgress as re, MenuList as Ke, SvgIcon as Ze, Popper as et, Grow as tt, Paper as rt, ClickAwayListener as ot, MenuItem as nt, Stack as L, FormControlLabel as Ce, Checkbox as Se, Typography as $, Link as lt, Grid as he, Chip as at, OutlinedInput as it, InputAdornment as me } from "@mui/material";
 import { ErrorBoundary as st } from "react-error-boundary";
 import ct from "@iconify-icons/tabler/compass";
 import { Icon as Be } from "@iconify/react";
 import Re from "@mui/icons-material/Close";
-import { createContext as Pe, useState as q, useMemo as M, useContext as Te, useCallback as Z, useEffect as W, forwardRef as dt, useRef as G, memo as ut, createElement as pt, Fragment as ht } from "react";
-import { createAxios as Ie } from "@blocklet/js-sdk";
+import { createContext as Pe, useState as q, useMemo as M, useContext as Ie, useCallback as Z, useEffect as W, forwardRef as dt, useRef as G, memo as ut, createElement as pt, Fragment as ht } from "react";
+import { createAxios as Te } from "@blocklet/js-sdk";
 import mt from "lodash/orderBy";
 import { useInfiniteScroll as ft, useRequest as oe, useReactive as gt, useDebounceFn as yt } from "ahooks";
 import bt from "lodash/omitBy";
@@ -17,39 +17,40 @@ import wt from "color";
 import "lodash/cloneDeep";
 import { parseURL as kt, parseQuery as vt, parseFilename as Ct, stringifyParsedURL as St, withQuery as Le, joinURL as Bt } from "ufo";
 import fe from "flat";
-import w from "prop-types";
-import Rt from "@mui/icons-material/KeyboardArrowDown";
-import Pt from "lodash/isEmpty";
-import Fe from "@mui/material/Box";
+import Rt from "@mui/icons-material/Check";
+import Pt from "@mui/icons-material/KeyboardArrowDown";
+import It from "lodash/isEmpty";
+import k from "prop-types";
+import $e from "@mui/material/Box";
 import Tt from "@arcblock/ux/lib/Avatar";
-import It from "@arcblock/ux/lib/Img";
-import Lt from "@iconify-icons/tabler/cloud-download";
-import Ft from "@mui/icons-material/ChevronLeft";
-import $t from "@mui/icons-material/ChevronRight";
-import _t from "react-image-gallery";
+import Lt from "@arcblock/ux/lib/Img";
+import $t from "@iconify-icons/tabler/cloud-download";
+import zt from "@mui/icons-material/ChevronLeft";
+import Ft from "@mui/icons-material/ChevronRight";
+import At from "react-image-gallery";
 import "react-image-gallery/styles/css/image-gallery.css";
-import zt from "@arcblock/ux/lib/Empty";
-import At from "react-infinite-scroll-hook";
-import $e from "@mui/material/Typography";
-import Et from "@mui/icons-material/Menu";
+import Et from "@arcblock/ux/lib/Empty";
+import _t from "react-infinite-scroll-hook";
+import ze from "@mui/material/Typography";
+import Dt from "@mui/icons-material/Menu";
 import { createRoot as Nt } from "react-dom/client";
-import { autocomplete as Dt } from "@algolia/autocomplete-js";
-import { useHotkeys as Mt } from "react-hotkeys-hook";
-import Ot from "@mui/icons-material/Search";
+import { autocomplete as Mt } from "@algolia/autocomplete-js";
+import { useHotkeys as Ot } from "react-hotkeys-hook";
+import jt from "@mui/icons-material/Search";
 import "@algolia/autocomplete-theme-classic/dist/theme.css";
-const _e = Pe({
+const Fe = Pe({
   open: !1,
   toggleOpen: (e) => {
   }
 });
-function jt({ children: e }) {
+function qt({ children: e }) {
   const [r, o] = q(!1), l = (a) => {
     o(a ?? !a);
   }, n = M(() => ({ open: r, toggleOpen: l }), [r]);
-  return /* @__PURE__ */ t(_e.Provider, { value: n, children: e });
+  return /* @__PURE__ */ t(Fe.Provider, { value: n, children: e });
 }
 function ne() {
-  return Te(_e);
+  return Ie(Fe);
 }
 const T = {
   nameAsc: "title",
@@ -65,7 +66,7 @@ const T = {
   explorePath: "/api/blocklets/explore",
   exploreDidsPath: "/api/blocklets/dids",
   cacheSize: 100
-}, qt = (e, r, o, l) => ft(
+}, Wt = (e, r, o, l) => ft(
   async (n) => {
     n || (o.currentPage = o.defaultCurrentPage);
     const { currentPage: a, pageSize: d } = o, c = {
@@ -84,13 +85,13 @@ const T = {
     reloadDeps: [e, xt(r)],
     onError: l
   }
-), Wt = (e) => oe(
+), Vt = (e) => oe(
   async () => {
     const { data: r } = await e.get(T.categoriesPath);
     return Array.isArray(r) ? r : [];
   },
   { manual: !0 }
-), ze = (e) => [
+), Ae = (e) => [
   {
     name: e("sort.popularity"),
     value: "popularity"
@@ -103,7 +104,7 @@ const T = {
   //   name: t('sort.rating'),
   //   value: 'rating',
   // },
-], Vt = (e, r, o) => {
+], Ut = (e, r, o) => {
   var f, m;
   const l = kt(e), n = vt(l.search);
   if ((f = Ct(e, { strict: !0 })) == null ? void 0 : f.endsWith(".gif"))
@@ -115,14 +116,14 @@ const T = {
     ...c || s ? { imageFilter: "resize", w: c, h: s } : {},
     v: d
   });
-}, Ut = (e) => [
+}, Gt = (e) => [
   { name: e("blocklet.free"), value: "free" },
   { name: e("blocklet.payment"), value: "payment" }
-], Gt = (e = [], r = "en") => e.map((o) => ({ name: o.locales[r] || o.locales.en, value: o._id })), Ht = (e, r) => (
+], Ht = (e = [], r = "en") => e.map((o) => ({ name: o.locales[r] || o.locales.en, value: o._id })), Qt = (e, r) => (
   // eslint-disable-next-line no-prototype-builtins
   e == null ? void 0 : e.replace(/{(\w*)}/g, (o, l) => r.hasOwnProperty(l) ? r[l] : "")
-), Qt = () => window.innerWidth <= 600, Xt = (e) => wt(e).rgb().object();
-function Yt(e, r) {
+), Xt = () => window.innerWidth <= 600, Yt = (e) => wt(e).rgb().object();
+function Jt(e, r) {
   let o;
   return function(...n) {
     return o && clearTimeout(o), new Promise((a) => {
@@ -130,7 +131,7 @@ function Yt(e, r) {
     });
   };
 }
-const Jt = Yt((e) => Promise.resolve(e), 300), Kt = {
+const Kt = Jt((e) => Promise.resolve(e), 300), Zt = {
   common: {
     title: "Blocklet Store",
     searchStore: "Search Blocklet",
@@ -178,7 +179,7 @@ const Jt = Yt((e) => Promise.resolve(e), 300), Kt = {
   autocomplete: {
     expandResult: 'View all search results for "{name}"'
   }
-}, Zt = {
+}, er = {
   common: {
     title: "Blocklet 商店",
     searchStore: "搜索 Blocklet",
@@ -227,15 +228,15 @@ const Jt = Yt((e) => Promise.resolve(e), 300), Kt = {
     expandResult: "查看 “{name}” 的所有搜索结果"
   }
 }, K = {
-  en: fe(Kt),
-  zh: fe(Zt)
-}, Ae = (e, r) => {
+  en: fe(Zt),
+  zh: fe(er)
+}, Ee = (e, r) => {
   const o = {};
   return e && (o["x-blocklet-server-version"] = e), r && (o["x-blocklet-store-version"] = r), o;
-}, er = (e) => (r, o) => {
+}, tr = (e) => (r, o) => {
   const l = K[e] ? K[e][r] : K.en[r];
-  return Ht(l, o) || r;
-}, Ee = {
+  return Qt(l, o) || r;
+}, _e = {
   errors: {
     fetchBlockletsError: null,
     fetchCategoriesError: null
@@ -291,8 +292,8 @@ const Jt = Yt((e) => Promise.resolve(e), 300), Kt = {
   developerName: "",
   handleSearchSelect: () => {
   }
-}, Ne = Pe(Ee), { Provider: tr, Consumer: no } = Ne;
-function rr(e) {
+}, De = Pe(_e), { Provider: rr, Consumer: ao } = De;
+function or(e) {
   var ue;
   const {
     locale: r = "zh",
@@ -308,41 +309,41 @@ function rr(e) {
     layout: s = {},
     wrapChildren: f = (i) => i,
     extraFilter: m = (i) => i,
-    baseSearch: k = !1,
-    fetchCategoryDelay: F = 0,
+    baseSearch: v = !1,
+    fetchCategoryDelay: z = 0,
     showResourcesSwitch: R = !1,
     showCategory: S = !0,
     tagFilters: u = [],
     children: x,
     storeVersion: h,
     endpoint: g,
-    blockletRender: v
-  } = e, _ = Ae(l, h), $ = M(() => Ie({ baseURL: g, headers: _ }), [g]), y = { sortBy: "popularity", sortDirection: "desc", ...o };
+    blockletRender: w
+  } = e, P = Ee(l, h), F = M(() => Te({ baseURL: g, headers: P }), [g]), y = { sortBy: "popularity", sortDirection: "desc", ...o };
   !y.category && !s.showExplore && (y.category = "All");
-  const N = y.category, We = gt({
+  const D = y.category, We = gt({
     currentPage: T.currentPage,
-    pageSize: Qt() ? T.mobilePageSize : T.pageSize,
+    pageSize: Xt() ? T.mobilePageSize : T.pageSize,
     defaultCurrentPage: T.defaultCurrentPage
-  }), [Ve, Ue] = q(null), A = qt($, y, We, Ue), {
+  }), [Ve, Ue] = q(null), E = Wt(F, y, We, Ue), {
     data: Y = [],
     error: Ge,
     loading: He,
     run: se
-  } = Wt($), J = M(() => {
-    const i = mt(Y, [(P) => P.name], ["asc"]), b = i.findIndex((P) => P.name === "All" || P.locales.en === "All");
+  } = Vt(F), J = M(() => {
+    const i = mt(Y, [(I) => I.name], ["asc"]), b = i.findIndex((I) => I.name === "All" || I.locales.en === "All");
     return b > -1 ? [{ ...i[b], _id: "All" }, ...i.slice(0, b), ...i.slice(b + 1)] : i;
   }, [Y]), ce = M(
     () => {
       var i;
-      return m(((i = A.data) == null ? void 0 : i.list) || []) || [];
+      return m(((i = E.data) == null ? void 0 : i.list) || []) || [];
     },
-    [A.data, m]
-  ), de = Z(er(r), [r]), Qe = M(() => Gt(J, r), [J, r]), Xe = Ut(de), Ye = {
+    [E.data, m]
+  ), de = Z(tr(r), [r]), Qe = M(() => Ht(J, r), [J, r]), Xe = Gt(de), Ye = {
     errors: { fetchBlockletsError: Ve, fetchCategoriesError: Ge },
     loadings: {
-      fetchBlockletsLoading: A.loading,
+      fetchBlockletsLoading: E.loading,
       fetchCategoriesLoading: He,
-      loadingMore: A.loadingMore
+      loadingMore: E.loadingMore
     },
     endpoint: g,
     queryFilter: c,
@@ -354,27 +355,27 @@ function rr(e) {
     },
     minItemWidth: d,
     blockletList: ce,
-    total: ((ue = A.data) == null ? void 0 : ue.total) || 0,
+    total: ((ue = E.data) == null ? void 0 : ue.total) || 0,
     wrapChildren: f,
     t: de,
     storeVersion: h,
     serverVersion: l,
     filters: y,
-    selectedCategory: N,
+    selectedCategory: D,
     categoryList: J,
-    blockletRender: v,
+    blockletRender: w,
     locale: r,
     categoryOptions: Qe,
     priceOptions: Xe,
-    storeApi: $,
-    baseSearch: k,
+    storeApi: F,
+    baseSearch: v,
     showResourcesSwitch: R,
     showCategory: S,
     tagFilters: u,
-    hasNextPage: !A.noMore,
+    hasNextPage: !E.noMore,
     onFilterChange: n,
     cleanFilter: (i) => {
-      const b = i ? bt(y, (P, O) => i == null ? void 0 : i.includes(O)) : {};
+      const b = i ? bt(y, (I, O) => i == null ? void 0 : i.includes(O)) : {};
       n(b);
     },
     handleSort: (i) => {
@@ -390,8 +391,8 @@ function rr(e) {
       n(b);
     },
     handleCategory: (i) => {
-      const b = i === "all" || i === y.category ? "" : i, P = { ...y, category: b };
-      n(P);
+      const b = i === "all" || i === y.category ? "" : i, I = { ...y, category: b };
+      n(I);
     },
     handleDeveloper: (i) => {
       const b = { ...y, owner: i || void 0 };
@@ -405,32 +406,32 @@ function rr(e) {
       const i = { ...y };
       n(i);
     },
-    loadMore: A.loadMore,
+    loadMore: E.loadMore,
     getCategoryLocale: (i) => {
       if (!i)
         return null;
-      const b = Y.find((P) => P._id === i);
+      const b = Y.find((I) => I._id === i);
       return b ? b.locales[r] || b.locales.en : null;
     },
     get developerName() {
-      var b, P;
+      var b, I;
       const i = ce.find((O) => {
         var pe;
         return ((pe = O == null ? void 0 : O.owner) == null ? void 0 : pe.did) === y.owner;
       });
-      return ((b = i == null ? void 0 : i.owner) == null ? void 0 : b.fullName) || ((P = i == null ? void 0 : i.author) == null ? void 0 : P.name) || "";
+      return ((b = i == null ? void 0 : i.owner) == null ? void 0 : b.fullName) || ((I = i == null ? void 0 : i.author) == null ? void 0 : I.name) || "";
     },
     handleSearchSelect: a
   };
   return W(() => {
-    setTimeout(se, F || 0);
-  }, [g, se, F]), /* @__PURE__ */ t(tr, { value: Ye, children: x });
+    setTimeout(se, z || 0);
+  }, [g, se, z]), /* @__PURE__ */ t(rr, { value: Ye, children: x });
 }
 function B() {
-  const e = Te(Ne);
-  return e || Ee;
+  const e = Ie(De);
+  return e || _e;
 }
-function De({
+function Ne({
   children: e,
   onClick: r,
   size: o = 32
@@ -466,13 +467,13 @@ function Q({
   xl: n,
   exact: a
 }) {
-  const d = ve(), c = D(d.breakpoints.down("sm")), s = D(d.breakpoints.between("sm", "md")), f = D(d.breakpoints.between("md", "lg")), m = D(d.breakpoints.between("lg", "xl"));
+  const d = ve(), c = N(d.breakpoints.down("sm")), s = N(d.breakpoints.between("sm", "md")), f = N(d.breakpoints.between("md", "lg")), m = N(d.breakpoints.between("lg", "xl"));
   if (a)
     return c ? e || null : s ? r || null : f ? o || null : m ? l || null : n || null;
-  let k = e;
-  return c || (k = V(r, k), s) || (k = V(o, k), f) || (k = V(l, k), m) ? k : V(n, k);
+  let v = e;
+  return c || (v = V(r, v), s) || (v = V(o, v), f) || (v = V(l, v), m) ? v : V(n, v);
 }
-function or({ children: e }) {
+function nr({ children: e }) {
   const { open: r, toggleOpen: o } = ne();
   return /* @__PURE__ */ t(
     Q,
@@ -482,10 +483,10 @@ function or({ children: e }) {
     }
   );
 }
-const nr = E(te)`
+const lr = _(te)`
   border-radius: 4px;
 `, le = dt(({ children: e, rounded: r, loading: o, disabled: l, ...n }, a) => /* @__PURE__ */ t(
-  nr,
+  lr,
   {
     ref: a,
     disableElevation: !0,
@@ -496,10 +497,10 @@ const nr = E(te)`
   }
 ));
 le.propTypes = {
-  children: w.any,
-  rounded: w.bool,
-  loading: w.bool,
-  disabled: w.bool
+  children: k.any,
+  rounded: k.bool,
+  loading: k.bool,
+  disabled: k.bool
 };
 le.defaultProps = {
   children: null,
@@ -508,64 +509,61 @@ le.defaultProps = {
   disabled: !1
 };
 function X({ title: e, value: r, icon: o, prepend: l, options: n, onChange: a, itemRender: d, ...c }) {
-  const s = G(null), f = xe(), [m, k] = q(!1), [F, R] = q(r !== null ? r : ""), S = D(f.breakpoints.down("sm"));
+  const s = G(null), f = xe(), [m, v] = q(!1), [z, R] = q(r !== null ? r : ""), S = N(f.breakpoints.down("sm"));
   W(() => {
     R(r !== null ? r : "");
   }, [r]);
   const u = Z(() => {
-    k(!1);
+    v(!1);
   }, []), x = Z(() => {
-    k(!0);
+    v(!0);
   }, []);
-  function h(v) {
-    R(v.value), a(v.value), S && u();
+  function h(w) {
+    R(w.value), a(w.value), S && u();
   }
-  function g(v) {
-    return v === F;
+  function g(w) {
+    return w === z;
   }
-  return /* @__PURE__ */ p(z, { children: [
+  return /* @__PURE__ */ p(A, { children: [
     /* @__PURE__ */ p(
-      lr,
+      ar,
       {
         ref: s,
         onClick: x,
         variant: "outlined",
         size: "small",
-        className: ["my-select__selector", Pt(F) ? "" : "my-select__selector--active"].join(" "),
+        className: ["my-select__selector", It(z) ? "" : "my-select__selector--active"].join(" "),
         sx: { minWidth: "auto" },
         ...c,
         children: [
           /* @__PURE__ */ t("div", { className: "my-select__icon", children: o }),
           e,
-          /* @__PURE__ */ t(Ze, { className: "my-select__arrowdown", component: Rt, fontSize: "small" })
+          /* @__PURE__ */ t(Ze, { className: "my-select__arrowdown", component: Pt, fontSize: "small" })
         ]
       }
     ),
-    /* @__PURE__ */ t(et, { open: m, anchorEl: s.current, transition: !0, sx: { zIndex: "9999" }, children: ({ TransitionProps: v, placement: _ }) => /* @__PURE__ */ t(tt, { ...v, sx: { transformOrigin: _ === "bottom" ? "center top" : "center bottom" }, children: /* @__PURE__ */ t(rt, { children: /* @__PURE__ */ t(ot, { onClickAway: u, children: /* @__PURE__ */ p(ar, { autoFocusItem: m, onMouseEnter: x, onMouseLeave: u, children: [
+    /* @__PURE__ */ t(et, { open: m, anchorEl: s.current, transition: !0, sx: { zIndex: "9999" }, children: ({ TransitionProps: w, placement: P }) => /* @__PURE__ */ t(tt, { ...w, sx: { transformOrigin: P === "bottom" ? "center top" : "center bottom" }, children: /* @__PURE__ */ t(rt, { children: /* @__PURE__ */ t(ot, { onClickAway: u, children: /* @__PURE__ */ p(ir, { autoFocusItem: m, onMouseEnter: x, onMouseLeave: u, children: [
       l,
-      n.map(($) => d ? d($) : /* @__PURE__ */ t(
-        nt,
-        {
-          onClick: () => h($),
-          className: [
-            "my-select__option",
-            g($.value) ? "my-select__option--active" : ""
-          ].join(" "),
-          children: $.name
-        },
-        $.value
-      ))
+      n.map((F) => d ? d(F) : /* @__PURE__ */ p(nt, { onClick: () => h(F), children: [
+        /* @__PURE__ */ t(
+          Rt,
+          {
+            sx: { mr: 1, fontSize: 16, visibility: g(F.value) ? "visible" : "hidden" }
+          }
+        ),
+        F.name
+      ] }, F.value))
     ] }) }) }) }) })
   ] });
 }
 X.propTypes = {
-  options: w.array.isRequired,
-  value: w.oneOfType([w.string, w.number, w.array]),
-  onChange: w.func,
-  itemRender: w.func,
-  title: w.string.isRequired,
-  icon: w.any,
-  prepend: w.any
+  options: k.array.isRequired,
+  value: k.oneOfType([k.string, k.number, k.array]),
+  onChange: k.func,
+  itemRender: k.func,
+  title: k.string.isRequired,
+  icon: k.any,
+  prepend: k.any
 };
 X.defaultProps = {
   value: null,
@@ -575,7 +573,7 @@ X.defaultProps = {
   onChange: () => {
   }
 };
-const lr = E(le)`
+const ar = _(le)`
   border: 1px solid #f0f0f0;
   padding: 6px 8px 6px 12px;
   font-weight: ${(e) => e.theme.typography.fontWeightRegular};
@@ -606,7 +604,7 @@ const lr = E(le)`
       margin-right: 3px;
     }
   }
-`, ar = E(Ke)`
+`, ir = _(Ke)`
   .my-select__option__icon {
     color: transparent;
     font-size: 14px;
@@ -625,9 +623,9 @@ const lr = E(le)`
 `;
 function Me() {
   var d;
-  const { filters: e, handleSort: r, handlePrice: o, t: l } = B(), n = ze(l), a = ((d = n.find((c) => c.value === e.sortBy)) == null ? void 0 : d.name) || l("sort.sort");
+  const { filters: e, handleSort: r, handlePrice: o, t: l } = B(), n = Ae(l), a = ((d = n.find((c) => c.value === e.sortBy)) == null ? void 0 : d.name) || l("sort.sort");
   return /* @__PURE__ */ p(
-    I,
+    L,
     {
       direction: { xs: "row", md: "column" },
       alignItems: { xs: "center", md: "flex-start" },
@@ -666,14 +664,14 @@ function Me() {
     }
   );
 }
-function ir() {
+function sr() {
   const { selectedCategory: e, handleCategory: r, t: o, categoryOptions: l, filters: n, cleanFilter: a, loadings: d, layout: c } = B(), { toggleOpen: s } = ne();
-  return c.showCategory ? /* @__PURE__ */ p(or, { children: [
+  return c.showCategory ? /* @__PURE__ */ p(nr, { children: [
     /* @__PURE__ */ t(
       Q,
       {
         xs: /* @__PURE__ */ p(
-          I,
+          L,
           {
             direction: "row",
             justifyContent: "space-between",
@@ -684,8 +682,8 @@ function ir() {
             borderBottom: 1,
             borderColor: "divider",
             children: [
-              /* @__PURE__ */ t(De, { onClick: () => s(!1), children: /* @__PURE__ */ t(Re, {}) }),
-              /* @__PURE__ */ t(L, { flex: 1, variant: "body1", fontWeight: "fontWeightMedium", children: "Categories" })
+              /* @__PURE__ */ t(Ne, { onClick: () => s(!1), children: /* @__PURE__ */ t(Re, {}) }),
+              /* @__PURE__ */ t($, { flex: 1, variant: "body1", fontWeight: "fontWeightMedium", children: "Categories" })
             ]
           }
         ),
@@ -693,18 +691,18 @@ function ir() {
       }
     ),
     /* @__PURE__ */ t(
-      I,
+      L,
       {
         visibility: d.fetchCategoriesLoading ? "hidden" : "visible",
         width: { xs: 268, md: 200 },
         boxSizing: "content-box",
         p: { xs: 2, md: 0 },
         pr: { md: 6 },
-        children: n.keyword ? /* @__PURE__ */ t(Me, {}) : /* @__PURE__ */ p(z, { children: [
+        children: n.keyword ? /* @__PURE__ */ t(Me, {}) : /* @__PURE__ */ p(A, { children: [
           c.showExplore && /* @__PURE__ */ p(C, { display: "flex", alignItems: "center", gap: 1, mb: 3, pb: 3, borderBottom: 1, borderColor: "divider", children: [
             /* @__PURE__ */ t(Be, { icon: ct }),
             /* @__PURE__ */ t(
-              L,
+              $,
               {
                 variant: "body1",
                 color: e ? "text.lighter" : "text.primary",
@@ -717,8 +715,8 @@ function ir() {
               }
             )
           ] }),
-          !!l.length && /* @__PURE__ */ t(I, { gap: 2, children: l.map((f) => /* @__PURE__ */ t(
-            L,
+          !!l.length && /* @__PURE__ */ t(L, { gap: 2, children: l.map((f) => /* @__PURE__ */ t(
+            $,
             {
               variant: "body1",
               title: f.name,
@@ -739,7 +737,7 @@ function ir() {
   ] }) : null;
 }
 function Oe() {
-  const { endpoint: e, serverVersion: r, storeVersion: o } = B(), l = Ae(r, o), n = M(() => Ie({
+  const { endpoint: e, serverVersion: r, storeVersion: o } = B(), l = Ee(r, o), n = M(() => Te({
     baseURL: e,
     headers: l
   }), [e]);
@@ -755,7 +753,7 @@ function Oe() {
   };
 }
 const je = ut(function(r) {
-  return /* @__PURE__ */ t(Fe, { height: 60, display: "flex", alignItems: "center", justifyContent: "center", ...r, children: /* @__PURE__ */ t(re, {}) });
+  return /* @__PURE__ */ t($e, { height: 60, display: "flex", alignItems: "center", justifyContent: "center", ...r, children: /* @__PURE__ */ t(re, {}) });
 });
 function ge({
   icon: e,
@@ -763,10 +761,10 @@ function ge({
   maxWidth: o = 100,
   title: l
 }) {
-  return (r === 0 || r) && /* @__PURE__ */ p(I, { direction: "row", alignItems: "center", gap: 1, sx: { maxWidth: o, overflow: "hidden" }, children: [
+  return (r === 0 || r) && /* @__PURE__ */ p(L, { direction: "row", alignItems: "center", gap: 1, sx: { maxWidth: o, overflow: "hidden" }, children: [
     e,
     /* @__PURE__ */ t(
-      L,
+      $,
       {
         flex: 1,
         variant: "body2",
@@ -778,9 +776,9 @@ function ge({
   ] });
 }
 const ye = 292;
-function sr() {
+function cr() {
   var R, S;
-  const { t: e } = B(), { get: r } = Oe(), o = ve(), l = D(o.breakpoints.down("md")), n = ((S = (R = window.blocklet) == null ? void 0 : R.preferences) == null ? void 0 : S.homeBanner) || [], { data: a = [], error: d } = oe(async () => {
+  const { t: e } = B(), { get: r } = Oe(), o = ve(), l = N(o.breakpoints.down("md")), n = ((S = (R = window.blocklet) == null ? void 0 : R.preferences) == null ? void 0 : S.homeBanner) || [], { data: a = [], error: d } = oe(async () => {
     const u = await r(
       Le(T.blockletsPath, { didList: n.map((x) => x.did).join(",") })
     );
@@ -795,73 +793,90 @@ function sr() {
     cursor: "pointer",
     color: "text.lighter"
   };
-  return !d && n.length > 0 ? /* @__PURE__ */ p(z, { children: [
-    /* @__PURE__ */ t(L, { component: "h2", variant: "h2", mt: { xs: 2, md: 0 }, mb: 3, children: e("explore.title") }),
-    /* @__PURE__ */ t(C, { height: { xs: "auto", md: ye }, position: "relative", bgcolor: "#F0F7FF", borderRadius: 3, children: /* @__PURE__ */ t(
-      _t,
+  return !d && n.length > 0 ? /* @__PURE__ */ p(A, { children: [
+    /* @__PURE__ */ t($, { component: "h2", variant: "h2", mt: { xs: 2, md: 0 }, mb: 3, children: e("explore.title") }),
+    /* @__PURE__ */ t(
+      C,
       {
-        showNav: !0,
-        autoPlay: !0,
-        slideDuration: 1e3,
-        slideInterval: 5e3,
-        showPlayButton: !1,
-        showIndex: !1,
-        showBullets: !1,
-        showThumbnails: !1,
-        showFullscreenButton: !1,
-        renderLeftNav: (u) => /* @__PURE__ */ t(C, { onClick: u, sx: { display: { xs: "none", md: "block" } }, children: /* @__PURE__ */ t(Ft, { sx: { ...c, left: 5 } }) }),
-        renderRightNav: (u) => /* @__PURE__ */ t(C, { onClick: u, sx: { display: { xs: "none", md: "block" } }, children: /* @__PURE__ */ t($t, { sx: { ...c, right: 5 } }) }),
-        items: n.map((u, x) => ({
-          original: u.did,
-          renderItem: () => {
-            var g;
-            const h = a[x] || {};
-            return /* @__PURE__ */ p(
-              I,
-              {
-                height: { xs: "auto", md: ye },
-                display: "flex",
-                direction: { xs: "column", md: "row" },
-                justifyContent: "center",
-                alignItems: { xs: "flex-start", md: "center" },
-                p: { xs: 2, md: 5 },
-                gap: { xs: 2, md: 5 },
-                children: [
-                  s(u.cover || dr(u.did, (g = h.screenshots) == null ? void 0 : g[0])),
-                  /* @__PURE__ */ p(I, { flex: 1, height: "100%", gap: 3, children: [
-                    /* @__PURE__ */ p(C, { flex: 1, children: [
-                      f(u.name || h.title || u.name),
-                      m(u.desc || h.description)
-                    ] }),
-                    h.did && k(h, u.baseNum),
-                    F(u.link, u.did)
-                  ] })
-                ]
+        height: { xs: "auto", md: ye },
+        position: "relative",
+        border: 1,
+        borderColor: "divider",
+        borderRadius: 3,
+        overflow: "hidden",
+        children: /* @__PURE__ */ t(
+          At,
+          {
+            showNav: !0,
+            autoPlay: !0,
+            slideDuration: 1e3,
+            slideInterval: 5e3,
+            showPlayButton: !1,
+            showIndex: !1,
+            showBullets: !1,
+            showThumbnails: !1,
+            showFullscreenButton: !1,
+            renderLeftNav: (u) => /* @__PURE__ */ t(C, { onClick: u, sx: { display: { xs: "none", md: "block" } }, children: /* @__PURE__ */ t(zt, { sx: { ...c, left: 5 } }) }),
+            renderRightNav: (u) => /* @__PURE__ */ t(C, { onClick: u, sx: { display: { xs: "none", md: "block" } }, children: /* @__PURE__ */ t(Ft, { sx: { ...c, right: 5 } }) }),
+            items: n.map((u, x) => ({
+              original: u.did,
+              renderItem: () => {
+                var P;
+                const h = a[x] || {}, g = u.cover || ur(u.did, (P = h.screenshots) == null ? void 0 : P[0]), w = Ut(g, { h: 400, w: 700 });
+                return /* @__PURE__ */ p(
+                  L,
+                  {
+                    height: { xs: "auto", md: ye },
+                    sx: {
+                      "&::before": {
+                        content: '""',
+                        position: "absolute",
+                        top: 0,
+                        left: 0,
+                        right: 0,
+                        bottom: 0,
+                        backgroundImage: `url("${w}")`,
+                        backgroundSize: "cover",
+                        filter: "blur(8px)",
+                        opacity: 0.15,
+                        zIndex: 0
+                      }
+                    },
+                    display: "flex",
+                    direction: { xs: "column", md: "row" },
+                    justifyContent: "center",
+                    alignItems: { xs: "flex-start", md: "center" },
+                    p: { xs: 2, md: 5 },
+                    gap: { xs: 2, md: 5 },
+                    children: [
+                      s(w),
+                      /* @__PURE__ */ p(L, { flex: 1, height: "100%", gap: 3, children: [
+                        /* @__PURE__ */ p(C, { flex: 1, children: [
+                          f(u.name || h.title || u.name),
+                          m(u.desc || h.description)
+                        ] }),
+                        h.did && v(h, u.baseNum),
+                        z(u.link, u.did)
+                      ] })
+                    ]
+                  }
+                );
               }
-            );
+            }))
           }
-        }))
+        )
       }
-    ) })
+    )
   ] }) : null;
   function s(u) {
-    return /* @__PURE__ */ t(C, { width: { xs: "100%", md: 338 }, height: 210, borderRadius: 2, overflow: "hidden", position: "relative", children: /* @__PURE__ */ t(
-      It,
-      {
-        src: Vt(u, { h: 400, w: 700 }),
-        alt: "",
-        width: l ? void 0 : 338,
-        height: 210,
-        style: { objectFit: "cover" }
-      }
-    ) });
+    return /* @__PURE__ */ t(C, { width: { xs: "100%", md: 338 }, height: 210, borderRadius: 2, overflow: "hidden", position: "relative", children: /* @__PURE__ */ t(Lt, { src: u, alt: "", width: l ? void 0 : 338, height: 210, style: { objectFit: "cover" } }) });
   }
   function f(u) {
-    return /* @__PURE__ */ t(L, { variant: "h2", width: "100%", children: u });
+    return /* @__PURE__ */ t($, { variant: "h2", width: "100%", children: u });
   }
   function m(u) {
     return /* @__PURE__ */ t(
-      L,
+      $,
       {
         variant: "body2",
         color: "text.secondary",
@@ -881,14 +896,14 @@ function sr() {
       }
     );
   }
-  function k(u, x = 0) {
-    const { did: h, owner: g, stats: v } = u;
+  function v(u, x = 0) {
+    const { did: h, owner: g, stats: w } = u;
     return /* @__PURE__ */ p(C, { display: "flex", alignItems: "center", gap: 2, color: "text.secondary", children: [
       /* @__PURE__ */ t(ge, { icon: /* @__PURE__ */ t(Tt, { src: g.avatar, did: h, size: 20, variant: "circle" }), children: g.fullName }),
-      /* @__PURE__ */ t(ge, { icon: /* @__PURE__ */ t(Be, { icon: Lt }), title: `${v.downloads + x}`, children: cr(v.downloads + x) })
+      /* @__PURE__ */ t(ge, { icon: /* @__PURE__ */ t(Be, { icon: $t }), title: `${w.downloads + x}`, children: dr(w.downloads + x) })
     ] });
   }
-  function F(u, x) {
+  function z(u, x) {
     return /* @__PURE__ */ t(lt, { href: u || `/blocklets/${x}`, align: "left", width: 100, children: /* @__PURE__ */ t(
       te,
       {
@@ -905,15 +920,15 @@ function sr() {
     ) });
   }
 }
-const cr = (e) => Number.isNaN(e) ? 0 : e < 1e3 ? e : e < 1e6 ? `${(e / 1e3).toFixed(1)}k` : e < 1e9 ? `${(e / 1e6).toFixed(1)}m` : `${(e / 1e9).toFixed(1)}b`, dr = (e, r) => e && r ? `/assets/${e}/screenshots/${r}` : "";
-function ur({ title: e, blocklets: r }) {
+const dr = (e) => Number.isNaN(e) ? 0 : e < 1e3 ? e : e < 1e6 ? `${(e / 1e3).toFixed(1)}k` : e < 1e9 ? `${(e / 1e6).toFixed(1)}m` : `${(e / 1e9).toFixed(1)}b`, ur = (e, r) => e && r ? `/assets/${e}/screenshots/${r}` : "";
+function pr({ title: e, blocklets: r }) {
   const { blockletRender: o, serverVersion: l } = B();
   return /* @__PURE__ */ p(C, { mt: 3, children: [
-    /* @__PURE__ */ t(L, { component: "h3", variant: "h3", sx: { mb: 2 }, children: e }),
+    /* @__PURE__ */ t($, { component: "h3", variant: "h3", sx: { mb: 2 }, children: e }),
     /* @__PURE__ */ t(he, { container: !0, spacing: 2, children: r.map((n) => /* @__PURE__ */ t(he, { item: !0, xs: 12, md: 6, p: "2px", "data-blocklet-did": n.did, children: /* @__PURE__ */ t(C, { padding: "1px", children: o({ blocklet: n, blocklets: r, serverVersion: l }) }) }, n.did)) })
   ] });
 }
-function pr() {
+function hr() {
   const { get: e } = Oe(), { t: r } = B(), {
     data: o = [],
     error: l,
@@ -922,18 +937,18 @@ function pr() {
     const a = await e(T.explorePath);
     return Array.isArray(a) ? a : [];
   });
-  return l ? /* @__PURE__ */ t(ee, { error: new Error(`Failed to fetch blocklets from ${T.explorePath}`) }) : n ? /* @__PURE__ */ t(je, { mt: 15 }) : /* @__PURE__ */ p(z, { children: [
-    /* @__PURE__ */ t(sr, {}),
+  return l ? /* @__PURE__ */ t(ee, { error: new Error(`Failed to fetch blocklets from ${T.explorePath}`) }) : n ? /* @__PURE__ */ t(je, { mt: 15 }) : /* @__PURE__ */ p(A, { children: [
+    /* @__PURE__ */ t(cr, {}),
     o.map(
-      (a) => a.blocklets.length > 0 ? /* @__PURE__ */ t(ur, { title: r(`explore.${a.type}`), blocklets: a.blocklets }, a.type) : null
+      (a) => a.blocklets.length > 0 ? /* @__PURE__ */ t(pr, { title: r(`explore.${a.type}`), blocklets: a.blocklets }, a.type) : null
     )
   ] });
 }
-function hr() {
+function mr() {
   var f;
-  const { filters: e, handleSort: r, handlePrice: o, t: l, getCategoryLocale: n, developerName: a, handleDeveloper: d } = B(), c = ze(l), s = ((f = c.find((m) => m.value === e.sortBy)) == null ? void 0 : f.name) || l("sort.sort");
+  const { filters: e, handleSort: r, handlePrice: o, t: l, getCategoryLocale: n, developerName: a, handleDeveloper: d } = B(), c = Ae(l), s = ((f = c.find((m) => m.value === e.sortBy)) == null ? void 0 : f.name) || l("sort.sort");
   return /* @__PURE__ */ p(
-    I,
+    L,
     {
       direction: { xs: "column", md: "row" },
       alignItems: { xs: "flex-start", md: "center" },
@@ -943,9 +958,9 @@ function hr() {
       px: 0,
       pb: 3,
       children: [
-        /* @__PURE__ */ t(L, { variant: "h2", textTransform: "capitalize", children: n(e.category) }),
+        /* @__PURE__ */ t($, { variant: "h2", textTransform: "capitalize", children: n(e.category) }),
         /* @__PURE__ */ p(
-          I,
+          L,
           {
             direction: "row",
             alignItems: "center",
@@ -991,11 +1006,11 @@ function hr() {
 }
 function be() {
   const { t: e } = B();
-  return /* @__PURE__ */ t($e, { style: { textAlign: "center" }, variant: "subtitle2", children: e("blocklet.noResults") });
+  return /* @__PURE__ */ t(ze, { style: { textAlign: "center" }, variant: "subtitle2", children: e("blocklet.noResults") });
 }
 function j({ filterTip: e, keywordTip: r }) {
   const { t: o, locale: l } = B(), n = () => l === "zh" ? "、" : " , ";
-  return /* @__PURE__ */ p(Fe, { className: "tips", children: [
+  return /* @__PURE__ */ p($e, { className: "tips", children: [
     /* @__PURE__ */ t("span", { style: { marginRight: "16px" }, children: o("blocklet.emptyTip") }),
     e && /* @__PURE__ */ t("span", { children: o("blocklet.filterTip") }),
     e && r && n(),
@@ -1003,15 +1018,15 @@ function j({ filterTip: e, keywordTip: r }) {
   ] });
 }
 j.propTypes = {
-  filterTip: w.bool,
-  keywordTip: w.bool
+  filterTip: k.bool,
+  keywordTip: k.bool
 };
 j.defaultProps = {
   filterTip: !1,
   keywordTip: !1
 };
 function H({ primaryStart: e, primaryEnd: r, filter: o }) {
-  return /* @__PURE__ */ p($e, { variant: "subtitle2", children: [
+  return /* @__PURE__ */ p(ze, { variant: "subtitle2", children: [
     /* @__PURE__ */ t("span", { children: e }),
     /* @__PURE__ */ p("span", { className: "primary", children: [
       " ",
@@ -1025,9 +1040,9 @@ function H({ primaryStart: e, primaryEnd: r, filter: o }) {
   ] });
 }
 H.propTypes = {
-  primaryStart: w.string.isRequired,
-  primaryEnd: w.string.isRequired,
-  filter: w.string.isRequired
+  primaryStart: k.string.isRequired,
+  primaryEnd: k.string.isRequired,
+  filter: k.string.isRequired
 };
 function qe({ blocklets: e, ...r }) {
   const {
@@ -1040,19 +1055,19 @@ function qe({ blocklets: e, ...r }) {
     t: s,
     serverVersion: f,
     hasNextPage: m,
-    loadMore: k,
-    endpoint: F,
+    loadMore: v,
+    endpoint: z,
     minItemWidth: R
-  } = B(), S = !!a || !!c.price, [u] = At({
+  } = B(), S = !!a || !!c.price, [u] = _t({
     loading: n.fetchBlockletsLoading || n.loadingMore,
     hasNextPage: m,
-    onLoadMore: k
+    onLoadMore: v
   });
   if (l.fetchBlockletsError)
     return /* @__PURE__ */ t(
       ee,
       {
-        error: new Error(`Failed to fetch blocklets from ${F}: ${l.fetchBlockletsError.message}`)
+        error: new Error(`Failed to fetch blocklets from ${z}: ${l.fetchBlockletsError.message}`)
       }
     );
   if (n.fetchBlockletsLoading)
@@ -1095,7 +1110,7 @@ function qe({ blocklets: e, ...r }) {
       /* @__PURE__ */ t(j, { filterTip: !0 })
     ] });
   }
-  return e.length === 0 ? /* @__PURE__ */ t(U, { children: /* @__PURE__ */ t(be, {}) }) : /* @__PURE__ */ p(z, { children: [
+  return e.length === 0 ? /* @__PURE__ */ t(U, { children: /* @__PURE__ */ t(be, {}) }) : /* @__PURE__ */ p(A, { children: [
     /* @__PURE__ */ t(
       C,
       {
@@ -1111,9 +1126,9 @@ function qe({ blocklets: e, ...r }) {
   ] });
 }
 qe.propTypes = {
-  blocklets: w.array.isRequired
+  blocklets: k.array.isRequired
 };
-const U = E(zt)`
+const U = _(Et)`
   text-align: center;
   margin-top: 100px;
   .primary {
@@ -1124,9 +1139,9 @@ const U = E(zt)`
   }
 `;
 function ae({ onSelect: e, wrapChildren: r }) {
-  const o = G(null), l = G(null), n = G(null), { storeApi: a, blockletRender: d, filters: c, endpoint: s, handleKeyword: f, t: m, serverVersion: k } = B(), F = async (h) => {
-    const { data: g } = await a.get(T.blockletsPath, { params: h }), v = g.dataList || [];
-    return v.length > 0 && v.unshift({ type: "more-result", total: g.total || 0 }), v;
+  const o = G(null), l = G(null), n = G(null), { storeApi: a, blockletRender: d, filters: c, endpoint: s, handleKeyword: f, t: m, serverVersion: v } = B(), z = async (h) => {
+    const { data: g } = await a.get(T.blockletsPath, { params: h }), w = g.dataList || [];
+    return w.length > 0 && w.unshift({ type: "more-result", total: g.total || 0 }), w;
   }, R = (h) => {
     f(h.state.query), h.setIsOpen(!1);
   }, S = () => {
@@ -1139,7 +1154,7 @@ function ae({ onSelect: e, wrapChildren: r }) {
   }, x = ({ prevState: h, state: g }) => {
     h.query !== g.query && (g.query || (f(), S()));
   };
-  return Mt(
+  return Ot(
     "ctrl + k, command + k",
     (h) => (h.stopPropagation(), h.preventDefault(), S(), !1),
     { enableOnTags: ["INPUT"] }
@@ -1148,13 +1163,13 @@ function ae({ onSelect: e, wrapChildren: r }) {
   }, [s]), W(() => {
     if (!o.current)
       return;
-    const h = Dt({
+    const h = Mt({
       container: o.current,
       renderer: { createElement: pt, Fragment: ht, render: () => {
       } },
-      render({ children: g }, v) {
-        var _;
-        (!l.current || n.current !== v) && (n.current = v, (_ = l.current) == null || _.unmount(), l.current = Nt(v)), l.current.render(r(g));
+      render({ children: g }, w) {
+        var P;
+        (!l.current || n.current !== w) && (n.current = w, (P = l.current) == null || P.unmount(), l.current = Nt(w)), l.current.render(r(g));
       },
       autoFocus: !0,
       openOnFocus: !1,
@@ -1184,34 +1199,34 @@ function ae({ onSelect: e, wrapChildren: r }) {
       onReset(g) {
         u(g);
       },
-      getSources({ query: g, state: v, ..._ }) {
-        const $ = {
+      getSources({ query: g, state: w, ...P }) {
+        const F = {
           sortBy: T.nameDesc,
           page: 1,
           pageSize: 10,
           keyword: g
         };
-        return Jt([
+        return Kt([
           {
             sourceId: "blocklets",
             getItems() {
-              return F($);
+              return z(F);
             },
             // 选中后填充 搜索框中值
             getItemInputValue({ item: y }) {
               return y.type === "more-result" ? g : y.title;
             },
             // 选中或者点击自动完成列表中的 item 时触发
-            onSelect({ event: y, item: N }) {
-              return N.type === "more-result" ? (_.setIsOpen(!1), f(g)) : y.type === "keydown" ? f(N.title) : e({
-                blocklet: N,
-                detailUrl: Bt(s, "/blocklets", N.did),
+            onSelect({ event: y, item: D }) {
+              return D.type === "more-result" ? (P.setIsOpen(!1), f(g)) : y.type === "keydown" ? f(D.title) : e({
+                blocklet: D,
+                detailUrl: Bt(s, "/blocklets", D.did),
                 storeUrl: s
               });
             },
             templates: {
               item({ item: y }) {
-                return y.type === "more-result" ? /* @__PURE__ */ t("div", { children: m("autocomplete.expandResult", { name: g, number: y.total.toLocaleString() }) }) : d({ blocklet: y, autocompleteSetters: _, serverVersion: k });
+                return y.type === "more-result" ? /* @__PURE__ */ t("div", { children: m("autocomplete.expandResult", { name: g, number: y.total.toLocaleString() }) }) : d({ blocklet: y, autocompleteSetters: P, serverVersion: v });
               },
               noResults() {
                 return m("blocklet.noResults");
@@ -1224,7 +1239,7 @@ function ae({ onSelect: e, wrapChildren: r }) {
     return () => {
       h.destroy();
     };
-  }, [c, d]), /* @__PURE__ */ p(z, { children: [
+  }, [c, d]), /* @__PURE__ */ p(A, { children: [
     /* @__PURE__ */ t(
       we,
       {
@@ -1247,8 +1262,8 @@ function ae({ onSelect: e, wrapChildren: r }) {
   ] });
 }
 ae.propTypes = {
-  onSelect: w.func.isRequired,
-  wrapChildren: w.func
+  onSelect: k.func.isRequired,
+  wrapChildren: k.func
 };
 ae.defaultProps = {
   wrapChildren: (e) => e
@@ -1263,29 +1278,29 @@ function ie({ placeholder: e, ...r }) {
   return W(() => {
     a(o.keyword || "");
   }, [o.keyword]), /* @__PURE__ */ t(
-    mr,
+    fr,
     {
       inputProps: {
         "data-cy": "search-blocklet"
       },
-      startAdornment: /* @__PURE__ */ t(me, { position: "start", children: /* @__PURE__ */ t(fr, {}) }),
+      startAdornment: /* @__PURE__ */ t(me, { position: "start", children: /* @__PURE__ */ t(gr, {}) }),
       onChange: c,
       placeholder: e,
       value: n,
       title: e,
       "data-cy": "search",
-      endAdornment: n && /* @__PURE__ */ t(me, { position: "end", children: /* @__PURE__ */ t(gr, { "data-cy": "search-delete", onClick: s }) }),
+      endAdornment: n && /* @__PURE__ */ t(me, { position: "end", children: /* @__PURE__ */ t(yr, { "data-cy": "search-delete", onClick: s }) }),
       ...r
     }
   );
 }
 ie.propTypes = {
-  placeholder: w.string
+  placeholder: k.string
 };
 ie.defaultProps = {
   placeholder: "Type to search..."
 };
-const mr = E(it)`
+const fr = _(it)`
   background-color: ${(e) => e.theme.palette.grey[50]};
   font-size: 14px;
   border-radius: 6px;
@@ -1302,21 +1317,21 @@ const mr = E(it)`
       color: transparent;
     }
   }
-`, fr = E(Ot)`
+`, gr = _(jt)`
   color: ${(e) => e.theme.palette.grey[500]};
   font-size: 28px;
   @media (max-width: ${(e) => e.theme.breakpoints.values.md}px) {
     font-size: 24px;
   }
-`, gr = E(Re)`
+`, yr = _(Re)`
   color: ${(e) => e.theme.palette.grey[500]};
   font-size: 16px;
   cursor: pointer;
 `;
-function yr() {
+function br() {
   const { filters: e, handleSearchSelect: r, t: o, wrapChildren: l, baseSearch: n, layout: a } = B(), { toggleOpen: d } = ne(), c = !!e.keyword;
   return a.showTitle || a.showSearch ? /* @__PURE__ */ p(
-    I,
+    L,
     {
       className: "title-bar",
       direction: "row",
@@ -1331,8 +1346,8 @@ function yr() {
         /* @__PURE__ */ t(
           Q,
           {
-            xs: !c && /* @__PURE__ */ t(De, { onClick: () => d(!0), children: /* @__PURE__ */ t(Et, {}) }),
-            md: a.showTitle ? /* @__PURE__ */ t(L, { variant: "h1", children: o("common.title") }) : /* @__PURE__ */ t(C, {})
+            xs: !c && /* @__PURE__ */ t(Ne, { onClick: () => d(!0), children: /* @__PURE__ */ t(Dt, {}) }),
+            md: a.showTitle ? /* @__PURE__ */ t($, { variant: "h1", children: o("common.title") }) : /* @__PURE__ */ t(C, {})
           }
         ),
         a.showSearch ? /* @__PURE__ */ t(
@@ -1352,30 +1367,30 @@ function yr() {
     }
   ) : null;
 }
-function br() {
+function xr() {
   const { blockletList: e, total: r, filters: o, t: l } = B(), n = o.category || o.keyword || o.price;
-  return /* @__PURE__ */ t(jt, { children: /* @__PURE__ */ p(st, { FallbackComponent: ee, children: [
-    /* @__PURE__ */ t(yr, {}),
+  return /* @__PURE__ */ t(qt, { children: /* @__PURE__ */ p(st, { FallbackComponent: ee, children: [
+    /* @__PURE__ */ t(br, {}),
     /* @__PURE__ */ p(C, { display: "flex", height: "100%", children: [
-      /* @__PURE__ */ t(ir, {}),
-      /* @__PURE__ */ t(I, { height: "100%", position: "relative", flex: 1, overflow: "visible", children: n ? /* @__PURE__ */ p(z, { children: [
-        o.keyword ? /* @__PURE__ */ p(z, { children: [
+      /* @__PURE__ */ t(sr, {}),
+      /* @__PURE__ */ t(L, { height: "100%", position: "relative", flex: 1, overflow: "visible", children: n ? /* @__PURE__ */ p(A, { children: [
+        o.keyword ? /* @__PURE__ */ p(A, { children: [
           /* @__PURE__ */ t(Q, { xs: /* @__PURE__ */ t(Me, {}), md: null }),
           a()
-        ] }) : /* @__PURE__ */ t(hr, {}),
+        ] }) : /* @__PURE__ */ t(mr, {}),
         /* @__PURE__ */ t(qe, { blocklets: e, height: "100%" })
-      ] }) : /* @__PURE__ */ t(pr, {}) })
+      ] }) : /* @__PURE__ */ t(hr, {}) })
     ] })
   ] }) });
   function a() {
-    return /* @__PURE__ */ p(I, { direction: "row", alignItems: "center", justifyContent: "space-between", mb: 2, mt: { xs: 2, md: 0 }, children: [
-      /* @__PURE__ */ t(L, { variant: "h3", children: l("blocklet.search", { keyword: o.keyword }) }),
-      /* @__PURE__ */ t(L, { variant: "body1", color: "text.lighter", fontSize: 13, children: l("blocklet.resultCount", { count: r }) })
+    return /* @__PURE__ */ p(L, { direction: "row", alignItems: "center", justifyContent: "space-between", mb: 2, mt: { xs: 2, md: 0 }, children: [
+      /* @__PURE__ */ t($, { variant: "h3", children: l("blocklet.search", { keyword: o.keyword }) }),
+      /* @__PURE__ */ t($, { variant: "body1", color: "text.lighter", fontSize: 13, children: l("blocklet.resultCount", { count: r }) })
     ] });
   }
 }
-function lo(e) {
-  const r = xe(), o = Xt(r.palette.primary.main), l = {
+function io(e) {
+  const r = xe(), o = Yt(r.palette.primary.main), l = {
     autocomplete: ke`
       :root {
         --aa-detached-media-query: (max-width: ${r.breakpoints.values.md}px) !important;
@@ -1414,11 +1429,11 @@ function lo(e) {
       }
     `
   };
-  return /* @__PURE__ */ p(rr, { ...e, children: [
+  return /* @__PURE__ */ p(or, { ...e, children: [
     /* @__PURE__ */ t(we, { styles: l.autocomplete }),
-    /* @__PURE__ */ t(br, {})
+    /* @__PURE__ */ t(xr, {})
   ] });
 }
 export {
-  lo as default
+  io as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/list",
-  "version": "0.14.5",
+  "version": "0.14.6",
   "description": "Common ux components of blocklet",
   "publishConfig": {
     "access": "public"
@@ -53,7 +53,7 @@
     "@algolia/autocomplete-js": "^1.17.0",
     "@algolia/autocomplete-theme-classic": "^1.17.0",
     "@blocklet/js-sdk": "^1.16.32",
-    "@blocklet/util": "0.14.5",
+    "@blocklet/util": "0.14.6",
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
     "@iconify-icons/tabler": "^1.2.95",
@@ -90,5 +90,5 @@
     "prettier": "^3.3.2",
     "vite": "^5.2.12"
   },
-  "gitHead": "a6ce7177531b7939ff5b46f0af4d68b5da95d3dc"
+  "gitHead": "4b2569e52998f0a80c4caf7e29be404c7c10aea5"
 }