@blocklet/list 0.14.15 → 0.14.17

package/lib/index.es.js

@@ -1,77 +1,77 @@
-import { jsx as t, jsxs as h, Fragment as W } from "react/jsx-runtime";
-import { styled as K, useTheme as me } from "@arcblock/ux/lib/Theme";
-import Ye from "@mui/material/styles/createTheme";
-import Ze from "@mui/material/styles/ThemeProvider";
-import Je from "lodash/merge";
-import { ErrorFallback as fe } from "@arcblock/ux/lib/ErrorBoundary";
+import { jsx as t, jsxs as h, Fragment as M } from "react/jsx-runtime";
+import { styled as K, useTheme as ge } from "@arcblock/ux/lib/Theme";
+import Je from "@mui/material/styles/createTheme";
+import et from "@mui/material/styles/ThemeProvider";
+import tt from "lodash/merge";
+import { ErrorFallback as xe } from "@arcblock/ux/lib/ErrorBoundary";
 import y from "@mui/material/Box";
-import P from "@mui/material/Stack";
-import { ErrorBoundary as et } from "react-error-boundary";
-import tt from "@iconify-icons/tabler/compass";
-import { Icon as Ae } from "@iconify/react";
-import ge from "@mui/icons-material/Close";
+import A from "@mui/material/Stack";
+import { ErrorBoundary as rt } from "react-error-boundary";
+import ot from "@iconify-icons/tabler/compass";
+import { Icon as Le } from "@iconify/react";
+import ye from "@mui/icons-material/Close";
 import w from "@mui/material/Typography";
-import { createContext as Fe, useState as E, useMemo as H, useContext as Ee, useCallback as he, useEffect as U, forwardRef as rt, useRef as pe, memo as ot } from "react";
-import { createAxios as Le } from "@blocklet/js-sdk";
-import nt from "lodash/orderBy";
-import { useRequest as ee, useDebounceFn as Oe, useInfiniteScroll as lt, useReactive as it } from "ahooks";
-import ne from "lodash/omitBy";
+import { createContext as Ee, useState as P, useMemo as H, useContext as Oe, useCallback as pe, useEffect as U, forwardRef as nt, useRef as me, memo as it } from "react";
+import { createAxios as _e } from "@blocklet/js-sdk";
+import lt from "lodash/orderBy";
+import { useRequest as te, useDebounceFn as ze, useInfiniteScroll as at, useReactive as st } from "ahooks";
+import ie from "lodash/omitBy";
 import "color";
 import "lodash/cloneDeep";
-import { parseURL as at, parseQuery as st, parseFilename as ct, stringifyParsedURL as dt, withQuery as xe, joinURL as ke } from "ufo";
-import ve from "flat";
-import te from "@mui/material/Button";
-import ut from "@mui/material/styles/useTheme";
+import { parseURL as ct, parseQuery as dt, parseFilename as ut, stringifyParsedURL as ht, withQuery as we, joinURL as Ce } from "ufo";
+import Se from "flat";
+import re from "@mui/material/Button";
+import pt from "@mui/material/styles/useTheme";
 import j from "@mui/material/useMediaQuery";
-import ht from "@mui/material/Drawer";
-import _e from "@mui/material/Checkbox";
-import ze from "@mui/material/FormControlLabel";
-import pt from "@mui/icons-material/Check";
-import mt from "@mui/icons-material/KeyboardArrowDown";
-import ft from "@mui/material/ClickAwayListener";
-import gt from "@mui/material/Grow";
-import Me from "@mui/material/MenuItem";
-import Ne from "@mui/material/MenuList";
-import xt from "@mui/material/Paper";
-import yt from "@mui/material/Popper";
-import wt from "@mui/material/SvgIcon";
-import bt from "lodash/isEmpty";
-import re from "@mui/material/CircularProgress";
-import De from "@arcblock/ux/lib/Avatar";
-import kt from "@iconify-icons/tabler/cloud-download";
-import vt from "@mui/icons-material/ChevronLeft";
-import Ct from "@mui/icons-material/ChevronRight";
-import z from "@mui/material/Skeleton";
-import St from "react-image-gallery";
-import It from "@arcblock/ux/lib/Img";
+import mt from "@mui/material/Drawer";
+import Me from "@mui/material/Checkbox";
+import Ne from "@mui/material/FormControlLabel";
+import ft from "@mui/icons-material/Check";
+import gt from "@mui/icons-material/KeyboardArrowDown";
+import xt from "@mui/material/ClickAwayListener";
+import yt from "@mui/material/Grow";
+import De from "@mui/material/MenuItem";
+import We from "@mui/material/MenuList";
+import wt from "@mui/material/Paper";
+import bt from "@mui/material/Popper";
+import kt from "@mui/material/SvgIcon";
+import vt from "lodash/isEmpty";
+import oe from "@mui/material/CircularProgress";
+import $e from "@arcblock/ux/lib/Avatar";
+import Ct from "@iconify-icons/tabler/cloud-download";
+import St from "@mui/icons-material/ChevronLeft";
+import It from "@mui/icons-material/ChevronRight";
+import _ from "@mui/material/Skeleton";
+import Bt from "react-image-gallery";
 import "react-image-gallery/styles/css/image-gallery.css";
-import Ce from "@mui/material/Grid";
-import Bt from "react-infinite-scroll-hook";
-import Se from "@mui/material/Chip";
+import Ie from "@mui/material/Grid";
+import Rt from "react-infinite-scroll-hook";
+import Be from "@mui/material/Chip";
 import J from "@mui/icons-material/Search";
-import Rt from "@mui/material/Autocomplete";
-import Tt from "@mui/material/Dialog";
-import We from "@mui/material/OutlinedInput";
-import Pt from "@mui/material/TextField";
-import { useHotkeys as At } from "react-hotkeys-hook";
-import Ie from "@mui/material/InputAdornment";
-import Ft from "@arcblock/ux/lib/Empty";
+import Tt from "@mui/material/Autocomplete";
+import Pt from "@mui/material/Dialog";
+import je from "@mui/material/OutlinedInput";
+import At from "@mui/material/TextField";
+import { useHotkeys as Ft } from "react-hotkeys-hook";
+import Re from "@mui/material/InputAdornment";
+import Lt from "@arcblock/ux/lib/Empty";
 import Et from "json-stable-stringify";
-import Lt from "@mui/icons-material/Menu";
-import { Card as Ot, Box as le, Skeleton as O } from "@mui/material";
-const $e = Fe({
+import Ot from "@mui/icons-material/Menu";
+import { Card as _t, Box as le, Skeleton as O } from "@mui/material";
+import zt from "@arcblock/ux/lib/Img";
+const He = Ee({
   open: !1,
   toggleOpen: (e) => {
   }
 });
-function _t({ children: e }) {
-  const [r, o] = E(!1), n = (a) => {
+function Mt({ children: e }) {
+  const [r, o] = P(!1), n = (a) => {
     o(a ?? !a);
-  }, i = H(() => ({ open: r, toggleOpen: n }), [r]);
-  return /* @__PURE__ */ t($e.Provider, { value: i, children: e });
+  }, l = H(() => ({ open: r, toggleOpen: n }), [r]);
+  return /* @__PURE__ */ t(He.Provider, { value: l, children: e });
 }
-function ye() {
-  return Ee($e);
+function be() {
+  return Oe(He);
 }
 const T = {
   nameAsc: "title",
@@ -87,59 +87,59 @@ const T = {
   explorePath: "/api/blocklets/explore",
   exploreDidsPath: "/api/blocklets/dids",
   cacheSize: 100
-}, zt = (e) => ee(
+}, Nt = (e) => te(
   async () => {
     const { data: r } = await e.get(T.categoriesPath);
     return Array.isArray(r) ? r : [];
   },
   { manual: !0 }
 );
-function Mt(e, r) {
+function Dt(e, r) {
   const o = { sortBy: "popularity", sortDirection: "desc", ...e }, {
     onFilterChange: n,
-    onSearchSelect: i = (l) => {
-      r.onFilterChange({ ...o, keyword: l.title });
+    onSearchSelect: l = (i) => {
+      r.onFilterChange({ ...o, keyword: i.title });
     },
     emptyCategory: a
   } = r;
   !o.category && !a && (o.category = "All");
-  const c = (l) => {
-    const p = { ...o, ...l };
-    n(ne(p, (d) => d === "" || d === void 0));
+  const c = (i) => {
+    const m = { ...o, ...i };
+    n(ie(m, (d) => d === "" || d === void 0));
   };
   return {
     filters: e,
-    cleanFilter: (l) => {
-      const p = l ? ne(o, (d, g) => l.includes(g)) : {};
-      n(ne(p, (d) => d === "" || d === void 0));
+    cleanFilter: (i) => {
+      const m = i ? ie(o, (d, g) => i.includes(g)) : {};
+      n(ie(m, (d) => d === "" || d === void 0));
     },
-    handleSort: (l, p) => {
-      c({ sortBy: l, sortDirection: p || l === "nameAsc" ? "asc" : "desc" });
+    handleSort: (i, m) => {
+      c({ sortBy: i, sortDirection: m || i === "nameAsc" ? "asc" : "desc" });
     },
-    handleKeyword: (l) => {
-      c({ category: void 0, keyword: l || void 0 });
+    handleKeyword: (i) => {
+      c({ category: void 0, keyword: i || void 0 });
     },
-    handlePrice: (l) => {
-      c({ price: l === e.price ? void 0 : l });
+    handlePrice: (i) => {
+      c({ price: i === e.price ? void 0 : i });
     },
-    handleCategory: (l) => {
-      c({ category: l === e.category ? "" : l });
+    handleCategory: (i) => {
+      c({ category: i === e.category ? "" : i });
     },
-    handleDeveloper: (l) => {
-      c({ owner: l || void 0 });
+    handleDeveloper: (i) => {
+      c({ owner: i || void 0 });
     },
-    handlePage: (l) => {
-      c({ currentPage: l });
+    handlePage: (i) => {
+      c({ currentPage: i });
     },
-    handleSwitchShowResources: (l) => {
-      c({ showResources: l });
+    handleSwitchShowResources: (i) => {
+      c({ showResources: i });
     },
-    handleSearchSelect: (l) => {
-      i(l);
+    handleSearchSelect: (i) => {
+      l(i);
     }
   };
 }
-const Nt = (e, r, o) => e && r || !o, je = (e) => [
+const Wt = (e, r, o) => e && r || !o, Ue = (e) => [
   {
     name: e("sort.popularity"),
     value: "popularity"
@@ -152,25 +152,25 @@ const Nt = (e, r, o) => e && r || !o, je = (e) => [
   //   name: t('sort.rating'),
   //   value: 'rating',
   // },
-], He = (e, r, o) => {
+], Ve = (e, r, o) => {
   var d, g;
-  const n = at(e), i = st(n.search);
-  if ((d = ct(e, { strict: !0 })) == null ? void 0 : d.endsWith(".gif"))
-    return i.imageFilter ? dt({ ...n, search: "" }) : e;
-  if (i.imageFilter)
+  const n = ct(e), l = dt(n.search);
+  if ((d = ut(e, { strict: !0 })) == null ? void 0 : d.endsWith(".gif"))
+    return l.imageFilter ? ht({ ...n, search: "" }) : e;
+  if (l.imageFilter)
     return e;
-  const c = o || ((g = window.blocklet) == null ? void 0 : g.version), { w: l, h: p } = typeof r == "object" ? { w: r.w, h: r.h } : { w: r, h: r };
-  return xe(e, {
-    ...l || p ? { imageFilter: "resize", w: l, h: p } : {},
+  const c = o || ((g = window.blocklet) == null ? void 0 : g.version), { w: i, h: m } = typeof r == "object" ? { w: r.w, h: r.h } : { w: r, h: r };
+  return we(e, {
+    ...i || m ? { imageFilter: "resize", w: i, h: m } : {},
     v: c
   });
-}, Dt = (e) => [
+}, $t = (e) => [
   { name: e("blocklet.free"), value: "free" },
   { name: e("blocklet.payment"), value: "payment" }
-], Wt = (e = [], r = "en") => e.map((o) => ({ name: o.locales[r] || o.locales.en, value: o._id })), $t = (e, r) => (
+], jt = (e = [], r = "en") => e.map((o) => ({ name: o.locales[r] || o.locales.en, value: o._id })), Ht = (e, r) => (
   // eslint-disable-next-line no-prototype-builtins
   e == null ? void 0 : e.replace(/{(\w*)}/g, (o, n) => r.hasOwnProperty(n) ? r[n] : "")
-), jt = () => window.innerWidth <= 600, Ht = {
+), Ut = () => window.innerWidth <= 600, Vt = {
   common: {
     title: "Blocklet Store",
     searchStore: "Search Blocklet",
@@ -221,7 +221,7 @@ const Nt = (e, r, o) => e && r || !o, je = (e) => [
   autocomplete: {
     expandResult: 'View all search results for "{name}"'
   }
-}, Ut = {
+}, Gt = {
   common: {
     title: "Blocklet 商店",
     searchStore: "搜索 Blocklet",
@@ -272,16 +272,16 @@ const Nt = (e, r, o) => e && r || !o, je = (e) => [
   autocomplete: {
     expandResult: "查看 “{name}” 的所有搜索结果"
   }
-}, ie = {
-  en: ve(Ht),
-  zh: ve(Ut)
-}, Ue = (e, r) => {
+}, ae = {
+  en: Se(Vt),
+  zh: Se(Gt)
+}, Ge = (e, r) => {
   const o = {};
   return e && (o["x-blocklet-server-version"] = e), r && (o["x-blocklet-store-version"] = r), o;
-}, Vt = (e) => (r, o) => {
-  const n = ie[e] ? ie[e][r] : ie.en[r];
-  return $t(n, o) || r;
-}, Ve = {
+}, qt = (e) => (r, o) => {
+  const n = ae[e] ? ae[e][r] : ae.en[r];
+  return Ht(n, o) || r;
+}, qe = {
   errors: {
     fetchCategoriesError: null
   },
@@ -333,21 +333,21 @@ const Nt = (e, r, o) => e && r || !o, je = (e) => [
     handlePage: () => {
     }
   }
-}, Ge = Fe(Ve), { Provider: Gt, Consumer: Ro } = Ge;
-function qt(e) {
+}, Ke = Ee(qe), { Provider: Kt, Consumer: Ro } = Ke;
+function Xt(e) {
   const {
     locale: r = "zh",
     filters: o = {},
     serverVersion: n = "",
-    onFilterChange: i = () => {
+    onFilterChange: l = () => {
     },
     minItemWidth: a = 350,
     queryFilter: c = !0,
-    layout: l = {},
-    wrapChildren: p = (R) => R,
+    layout: i = {},
+    wrapChildren: m = (R) => R,
     extraFilter: d = (R) => R,
     baseSearch: g = !1,
-    fetchCategoryDelay: m = 0,
+    fetchCategoryDelay: p = 0,
     showResourcesSwitch: f = !1,
     showCategory: k = !0,
     tagFilters: S = [],
@@ -357,17 +357,17 @@ function qt(e) {
     },
     endpoint: C,
     blockletRender: x
-  } = e, A = Ue(n, v), F = H(() => Le({ baseURL: C, headers: A }), [C]), L = Mt(o, { onFilterChange: i, emptyCategory: !l.showExplore, onSearchSelect: u }), [M, V] = E(""), {
+  } = e, F = Ge(n, v), L = H(() => _e({ baseURL: C, headers: F }), [C]), E = Dt(o, { onFilterChange: l, emptyCategory: !i.showExplore, onSearchSelect: u }), [N, V] = P(""), {
     data: G = [],
-    error: oe,
+    error: ne,
     loading: X,
     run: Q
-  } = zt(F), $ = H(() => {
-    const R = nt(G, [(D) => D.name], ["asc"]), _ = R.findIndex((D) => D.name === "All" || D.locales.en === "All");
-    return _ > -1 ? [{ ...R[_], _id: "All" }, ...R.slice(0, _), ...R.slice(_ + 1)] : R;
-  }, [G]), q = he(Vt(r), [r]), s = H(() => Wt($, r), [$, r]), b = Dt(q), N = {
-    search: L,
-    errors: { fetchCategoriesError: oe },
+  } = Nt(L), $ = H(() => {
+    const R = lt(G, [(W) => W.name], ["asc"]), z = R.findIndex((W) => W.name === "All" || W.locales.en === "All");
+    return z > -1 ? [{ ...R[z], _id: "All" }, ...R.slice(0, z), ...R.slice(z + 1)] : R;
+  }, [G]), q = pe(qt(r), [r]), s = H(() => jt($, r), [$, r]), b = $t(q), D = {
+    search: E,
+    errors: { fetchCategoriesError: ne },
     loadings: {
       fetchCategoriesLoading: X
     },
@@ -375,55 +375,54 @@ function qt(e) {
     endpoint: C,
     queryFilter: c,
     layout: {
-      showExplore: l.showExplore ?? !1,
-      showCategory: l.showCategory ?? !0,
-      showTitle: l.showTitle ?? !0,
-      showSearch: l.showSearch ?? !0
+      showExplore: i.showExplore ?? !1,
+      showCategory: i.showCategory ?? !0,
+      showTitle: i.showTitle ?? !0,
+      showSearch: i.showSearch ?? !0
     },
     minItemWidth: a,
-    wrapChildren: p,
+    wrapChildren: m,
     t: q,
     storeVersion: v,
     serverVersion: n,
-    selectedCategory: L.filters.category || (l.showExplore ? "" : "All"),
+    selectedCategory: E.filters.category || (i.showExplore ? "" : "All"),
     categoryList: $,
     blockletRender: x,
     locale: r,
     categoryOptions: s,
     priceOptions: b,
-    storeApi: F,
+    storeApi: L,
     baseSearch: g,
     showResourcesSwitch: f,
     showCategory: k,
     tagFilters: S,
-    onFilterChange: i,
+    onFilterChange: l,
     getCategoryLocale: (R) => {
-      if (!R)
-        return null;
-      const _ = G.find((D) => D._id === R || D.locales.en === "All");
-      return _ ? _.locales[r] || _.locales.en : null;
+      if (!R) return null;
+      const z = G.find((W) => W._id === R || W.locales.en === "All");
+      return z ? z.locales[r] || z.locales.en : null;
     },
     get developerName() {
-      return M;
+      return N;
     },
     updateDeveloperName: V
   };
   return U(() => {
-    setTimeout(Q, m || 0);
-  }, [C, Q, m]), /* @__PURE__ */ t(Gt, { value: N, children: B });
+    setTimeout(Q, p || 0);
+  }, [C, Q, p]), /* @__PURE__ */ t(Kt, { value: D, children: B });
 }
 function I() {
-  const e = Ee(Ge);
-  return e || Ve;
+  const e = Oe(Ke);
+  return e || qe;
 }
-function qe({
+function Xe({
   children: e,
   onClick: r,
   size: o = 32,
   ...n
 }) {
   return /* @__PURE__ */ t(
-    te,
+    re,
     {
       ...n,
       onClick: r,
@@ -449,83 +448,83 @@ function qe({
 function Y(e, r) {
   return e === void 0 ? r : e;
 }
-function we({
+function ke({
   xs: e,
   sm: r,
   md: o,
   lg: n,
-  xl: i,
+  xl: l,
   exact: a
 }) {
-  const c = ut(), l = j(c.breakpoints.down("sm")), p = j(c.breakpoints.between("sm", "md")), d = j(c.breakpoints.between("md", "lg")), g = j(c.breakpoints.between("lg", "xl"));
+  const c = pt(), i = j(c.breakpoints.down("sm")), m = j(c.breakpoints.between("sm", "md")), d = j(c.breakpoints.between("md", "lg")), g = j(c.breakpoints.between("lg", "xl"));
   if (a)
-    return l ? e || null : p ? r || null : d ? o || null : g ? n || null : i || null;
-  let m = e;
-  return l || (m = Y(r, m), p) || (m = Y(o, m), d) || (m = Y(n, m), g) ? m : Y(i, m);
+    return i ? e || null : m ? r || null : d ? o || null : g ? n || null : l || null;
+  let p = e;
+  return i || (p = Y(r, p), m) || (p = Y(o, p), d) || (p = Y(n, p), g) ? p : Y(l, p);
 }
-function Kt({ children: e }) {
-  const { open: r, toggleOpen: o } = ye();
+function Qt({ children: e }) {
+  const { open: r, toggleOpen: o } = be();
   return /* @__PURE__ */ t(
-    we,
+    ke,
     {
-      xs: /* @__PURE__ */ t(ht, { open: r, onClose: () => o(!1), children: e }),
+      xs: /* @__PURE__ */ t(mt, { open: r, onClose: () => o(!1), children: e }),
       md: /* @__PURE__ */ t(y, { children: e })
     }
   );
 }
-const Xt = rt(({ loading: e, disabled: r, ...o }, n) => /* @__PURE__ */ t(
-  te,
+const Yt = nt(({ loading: e, disabled: r, ...o }, n) => /* @__PURE__ */ t(
+  re,
   {
     ref: n,
     disableElevation: !0,
     disabled: r || e,
     ...o,
     sx: [{ borderRadius: "4px" }, ...Array.isArray(o.sx) ? o.sx : [o.sx]],
-    startIcon: e && /* @__PURE__ */ t(re, { size: "1em" })
+    startIcon: e && /* @__PURE__ */ t(oe, { size: "1em" })
   }
 ));
-function Ke({ value: e, options: r, onChange: o, placeholder: n, ...i }) {
+function Qe({ value: e, options: r, onChange: o, placeholder: n, ...l }) {
   var v;
-  const a = pe(null), c = me(), [l, p] = E(!1), [d, g] = E(e !== null ? e : ""), m = j(c.breakpoints.down("sm"));
+  const a = me(null), c = ge(), [i, m] = P(!1), [d, g] = P(e !== null ? e : ""), p = j(c.breakpoints.down("sm"));
   U(() => {
     g(e !== null ? e : "");
   }, [e]);
-  const f = he(() => {
-    p(!1);
-  }, []), k = he(() => {
-    p(!0);
+  const f = pe(() => {
+    m(!1);
+  }, []), k = pe(() => {
+    m(!0);
   }, []);
   function S(u) {
-    g(u.value), o(u.value), m && f();
+    g(u.value), o(u.value), p && f();
   }
   function B(u) {
     return u === d;
   }
-  return /* @__PURE__ */ h(W, { children: [
+  return /* @__PURE__ */ h(M, { children: [
     /* @__PURE__ */ h(
-      Qt,
+      Zt,
       {
         ref: a,
         onClick: k,
         variant: "outlined",
         size: "small",
-        className: ["my-select__selector", bt(d) ? "" : "my-select__selector--active"].join(" "),
+        className: ["my-select__selector", vt(d) ? "" : "my-select__selector--active"].join(" "),
         sx: { minWidth: "auto", color: "text.primary" },
-        ...i,
+        ...l,
         children: [
           ((v = r.find((u) => u.value === d)) == null ? void 0 : v.name) || n,
-          /* @__PURE__ */ t(wt, { className: "my-select__arrowdown", component: mt, fontSize: "small" })
+          /* @__PURE__ */ t(kt, { className: "my-select__arrowdown", component: gt, fontSize: "small" })
         ]
       }
     ),
-    /* @__PURE__ */ t(yt, { open: l, anchorEl: a.current, transition: !0, sx: { zIndex: "9999" }, children: ({ TransitionProps: u, placement: C }) => /* @__PURE__ */ t(
-      gt,
+    /* @__PURE__ */ t(bt, { open: i, anchorEl: a.current, transition: !0, sx: { zIndex: "9999" }, children: ({ TransitionProps: u, placement: C }) => /* @__PURE__ */ t(
+      yt,
       {
         ...u,
         style: { transformOrigin: C === "bottom" ? "center top" : "center bottom" },
-        children: /* @__PURE__ */ t(xt, { children: /* @__PURE__ */ t(ft, { onClickAway: f, children: /* @__PURE__ */ t(Yt, { autoFocusItem: l, onMouseEnter: k, onMouseLeave: f, children: r.map((x) => /* @__PURE__ */ h(Me, { onClick: () => S(x), children: [
+        children: /* @__PURE__ */ t(wt, { children: /* @__PURE__ */ t(xt, { onClickAway: f, children: /* @__PURE__ */ t(Jt, { autoFocusItem: i, onMouseEnter: k, onMouseLeave: f, children: r.map((x) => /* @__PURE__ */ h(De, { onClick: () => S(x), children: [
           /* @__PURE__ */ t(
-            pt,
+            ft,
             {
               sx: { mr: 1, fontSize: 16, visibility: B(x.value) ? "visible" : "hidden" }
             }
@@ -536,7 +535,7 @@ function Ke({ value: e, options: r, onChange: o, placeholder: n, ...i }) {
     ) })
   ] });
 }
-const Qt = K(Xt)`
+const Zt = K(Yt)`
   border: 1px solid #f0f0f0;
   padding: 6px 8px 6px 12px;
   font-weight: ${(e) => e.theme.typography.fontWeightRegular};
@@ -564,7 +563,7 @@ const Qt = K(Xt)`
       margin-right: 3px;
     }
   }
-`, Yt = K(Ne)`
+`, Jt = K(We)`
   .my-select__option__icon {
     color: transparent;
     font-size: 14px;
@@ -581,10 +580,10 @@ const Qt = K(Xt)`
     }
   }
 `;
-function Xe() {
-  const { search: e, t: r } = I(), { filters: o, handleSort: n, handlePrice: i } = e, a = je(r);
+function Ye() {
+  const { search: e, t: r } = I(), { filters: o, handleSort: n, handlePrice: l } = e, a = Ue(r);
   return /* @__PURE__ */ h(
-    P,
+    A,
     {
       direction: { xs: "row", md: "column" },
       alignItems: { xs: "center", md: "flex-start" },
@@ -593,22 +592,22 @@ function Xe() {
       justifyContent: "space-between",
       children: [
         /* @__PURE__ */ t(
-          ze,
+          Ne,
           {
             control: /* @__PURE__ */ t(
-              _e,
+              Me,
               {
                 checked: o.price === "free",
                 size: "small",
                 sx: { "& .MuiSvgIcon-fontSizeSmall": { fontSize: 16, color: "text.lighter" } },
-                onChange: (c) => i(c.target.checked ? "free" : "")
+                onChange: (c) => l(c.target.checked ? "free" : "")
               }
             ),
             label: r("blocklet.free")
           }
         ),
         /* @__PURE__ */ t(
-          Ke,
+          Qe,
           {
             value: o.sortBy || a[0].value,
             options: a,
@@ -620,18 +619,18 @@ function Xe() {
     }
   );
 }
-function Zt() {
-  const { selectedCategory: e, search: r, t: o, categoryOptions: n, loadings: i, layout: a, baseSearch: c } = I(), { filters: l, handleCategory: p, cleanFilter: d } = r, { toggleOpen: g } = ye();
+function er() {
+  const { selectedCategory: e, search: r, t: o, categoryOptions: n, loadings: l, layout: a, baseSearch: c } = I(), { filters: i, handleCategory: m, cleanFilter: d } = r, { toggleOpen: g } = be();
   U(() => {
     g(!1);
-  }, [Object.values(l).join("")]);
-  const m = Nt(c, a.showSearch, l.keyword);
-  return a.showCategory ? /* @__PURE__ */ h(Kt, { children: [
+  }, [Object.values(i).join("")]);
+  const p = Wt(c, a.showSearch, i.keyword);
+  return a.showCategory ? /* @__PURE__ */ h(Qt, { children: [
     /* @__PURE__ */ t(
-      we,
+      ke,
       {
         xs: /* @__PURE__ */ h(
-          P,
+          A,
           {
             direction: "row",
             justifyContent: "space-between",
@@ -642,7 +641,7 @@ function Zt() {
             borderBottom: 1,
             borderColor: "divider",
             children: [
-              /* @__PURE__ */ t(qe, { onClick: () => g(!1), children: /* @__PURE__ */ t(ge, {}) }),
+              /* @__PURE__ */ t(Xe, { onClick: () => g(!1), children: /* @__PURE__ */ t(ye, {}) }),
               /* @__PURE__ */ t(w, { flex: 1, variant: "body1", fontWeight: "fontWeightMedium", children: o("common.category") })
             ]
           }
@@ -651,16 +650,16 @@ function Zt() {
       }
     ),
     /* @__PURE__ */ t(
-      P,
+      A,
       {
-        visibility: i.fetchCategoriesLoading ? "hidden" : "visible",
+        visibility: l.fetchCategoriesLoading ? "hidden" : "visible",
         width: { xs: 268, md: 200 },
         boxSizing: "content-box",
         p: { xs: 2, md: 0 },
         pr: { md: 6 },
-        children: m ? /* @__PURE__ */ h(W, { children: [
+        children: p ? /* @__PURE__ */ h(M, { children: [
           a.showExplore && /* @__PURE__ */ h(y, { display: "flex", alignItems: "center", gap: 1, mb: 3, pb: 3, borderBottom: 1, borderColor: "divider", children: [
-            /* @__PURE__ */ t(Ae, { icon: tt }),
+            /* @__PURE__ */ t(Le, { icon: ot }),
             /* @__PURE__ */ t(
               w,
               {
@@ -675,7 +674,7 @@ function Zt() {
               }
             )
           ] }),
-          !!n.length && /* @__PURE__ */ t(P, { gap: 2, children: n.map((f) => /* @__PURE__ */ t(
+          !!n.length && /* @__PURE__ */ t(A, { gap: 2, children: n.map((f) => /* @__PURE__ */ t(
             w,
             {
               variant: "body1",
@@ -685,46 +684,43 @@ function Zt() {
               color: e === f.value ? "text.primary" : "text.lighter",
               textTransform: "capitalize",
               onClick: () => {
-                e === f.value ? d() : p(f.value), g(!1);
+                e === f.value ? d() : m(f.value), g(!1);
               },
               children: f.name
             },
             f.value
           )) })
-        ] }) : /* @__PURE__ */ t(Xe, {})
+        ] }) : /* @__PURE__ */ t(Ye, {})
       }
     )
   ] }) : null;
 }
-function be() {
-  const { endpoint: e, serverVersion: r, storeVersion: o } = I(), n = Ue(r, o), i = H(() => Le({
+function ve() {
+  const { endpoint: e, serverVersion: r, storeVersion: o } = I(), n = Ge(r, o), l = H(() => _e({
     baseURL: e,
     headers: n
   }), [e]);
   return {
     get: async (a) => {
-      const { data: c } = await i.get(a);
+      const { data: c } = await l.get(a);
       return c;
     },
     post: async (a, c) => {
-      const { data: l } = await i.post(a, c);
-      return l;
+      const { data: i } = await l.post(a, c);
+      return i;
     }
   };
 }
-const Qe = ot(function(r) {
-  return /* @__PURE__ */ t(y, { height: 60, display: "flex", alignItems: "center", justifyContent: "center", ...r, children: /* @__PURE__ */ t(re, {}) });
+const Ze = it(function(r) {
+  return /* @__PURE__ */ t(y, { height: 60, display: "flex", alignItems: "center", justifyContent: "center", ...r, children: /* @__PURE__ */ t(oe, {}) });
 });
-function Jt({ showSkeleton: e, ...r }) {
-  return e ? /* @__PURE__ */ t(z, { variant: "rectangular", width: r.width, height: r.height }) : /* @__PURE__ */ t(It, { ...r });
-}
-function Be({
+function Te({
   icon: e,
   children: r,
   maxWidth: o = 100,
   title: n
 }) {
-  return (r === 0 || r) && /* @__PURE__ */ h(P, { direction: "row", alignItems: "center", gap: 1, sx: { maxWidth: o, overflow: "hidden" }, children: [
+  return (r === 0 || r) && /* @__PURE__ */ h(A, { direction: "row", alignItems: "center", gap: 1, sx: { maxWidth: o, overflow: "hidden" }, children: [
     e,
     /* @__PURE__ */ t(
       w,
@@ -738,20 +734,20 @@ function Be({
     )
   ] });
 }
-const ae = 292, er = 210, tr = 338;
-function rr() {
+const se = 292, fe = 210, ee = 336;
+function tr() {
   var B, v;
-  const { t: e, search: r } = I(), { get: o } = be(), n = me(), i = j(n.breakpoints.down("md")), a = ((v = (B = window.blocklet) == null ? void 0 : B.preferences) == null ? void 0 : v.homeBanner) || [], {
+  const { t: e, search: r } = I(), { get: o } = ve(), n = ge(), l = j(n.breakpoints.down("md")), a = ((v = (B = window.blocklet) == null ? void 0 : B.preferences) == null ? void 0 : v.homeBanner) || [], {
     data: c = [],
-    error: l,
-    loading: p
-  } = ee(async () => {
+    error: i,
+    loading: m
+  } = te(async () => {
     const u = await o(
-      xe(T.blockletsPath, { didList: a.map((C) => C.did).join(",") })
+      we(T.blockletsPath, { didList: a.map((C) => C.did).join(",") })
     );
     return u != null && u.dataList ? a.map((C) => u.dataList.find((x) => x.did === C.did)) : [];
   });
-  l && console.error("Get Banner Blocklets error:", l);
+  i && console.error("Get Banner Blocklets error:", i);
   const d = {
     position: "absolute",
     top: "50%",
@@ -760,52 +756,53 @@ function rr() {
     cursor: "pointer",
     color: "text.lighter"
   };
-  return !l && a.length > 0 ? /* @__PURE__ */ h(W, { children: [
+  return !i && a.length > 0 ? /* @__PURE__ */ h(M, { children: [
     /* @__PURE__ */ t(w, { component: "h2", variant: "h2", mt: { xs: 2, md: 0 }, mb: 3, children: e("explore.title") }),
     /* @__PURE__ */ t(
       y,
       {
-        height: { xs: "auto", md: ae },
+        height: { xs: "auto", md: se },
+        minHeight: se,
         position: "relative",
         border: 1,
         borderColor: "divider",
         borderRadius: 3,
         overflow: "hidden",
-        children: p ? /* @__PURE__ */ h(y, { p: 5, display: "flex", gap: 5, height: ae, alignItems: "center", justifyContent: "center", children: [
-          /* @__PURE__ */ t(z, { variant: "rounded", height: er, width: tr }),
+        children: m ? /* @__PURE__ */ h(y, { p: 5, display: { md: "flex" }, gap: 5, alignItems: "center", justifyContent: "center", children: [
+          /* @__PURE__ */ t(_, { variant: "rounded", height: fe, width: ee }),
           /* @__PURE__ */ h(y, { flex: 1, height: "100%", children: [
-            /* @__PURE__ */ t(z, { variant: "text", height: 50, width: 100 }),
-            /* @__PURE__ */ t(z, { variant: "text", height: 40, width: "100%" }),
-            /* @__PURE__ */ t(z, { variant: "text", height: 40, width: 300 }),
+            /* @__PURE__ */ t(_, { variant: "text", height: 50, width: 100 }),
+            /* @__PURE__ */ t(_, { variant: "text", height: 40, width: "100%" }),
+            /* @__PURE__ */ t(_, { variant: "text", height: 40, width: 300 }),
             /* @__PURE__ */ h(y, { display: "flex", gap: 1, my: 2, children: [
-              /* @__PURE__ */ t(z, { variant: "circular", height: 20, width: 20 }),
-              /* @__PURE__ */ t(z, { variant: "text", height: 20, width: 50 })
+              /* @__PURE__ */ t(_, { variant: "circular", height: 20, width: 20 }),
+              /* @__PURE__ */ t(_, { variant: "text", height: 20, width: 50 })
             ] }),
-            /* @__PURE__ */ t(z, { variant: "rounded", height: 30, width: 100 })
+            /* @__PURE__ */ t(_, { variant: "rounded", height: 30, width: 100 })
           ] })
         ] }) : /* @__PURE__ */ t(
-          St,
+          Bt,
           {
             showNav: !0,
             autoPlay: !0,
-            slideDuration: i ? 500 : 1e3,
+            slideDuration: l ? 500 : 1e3,
             slideInterval: 5e3,
             showPlayButton: !1,
             showIndex: !1,
             showBullets: !1,
             showThumbnails: !1,
             showFullscreenButton: !1,
-            renderLeftNav: (u) => /* @__PURE__ */ t(y, { onClick: u, sx: { display: { xs: "none", md: "block" } }, children: /* @__PURE__ */ t(vt, { sx: { ...d, left: 5 } }) }),
-            renderRightNav: (u) => /* @__PURE__ */ t(y, { onClick: u, sx: { display: { xs: "none", md: "block" } }, children: /* @__PURE__ */ t(Ct, { sx: { ...d, right: 5 } }) }),
+            renderLeftNav: (u) => /* @__PURE__ */ t(y, { onClick: u, sx: { display: { xs: "none", md: "block" } }, children: /* @__PURE__ */ t(St, { sx: { ...d, left: 5 } }) }),
+            renderRightNav: (u) => /* @__PURE__ */ t(y, { onClick: u, sx: { display: { xs: "none", md: "block" } }, children: /* @__PURE__ */ t(It, { sx: { ...d, right: 5 } }) }),
             items: a.map((u, C) => ({
               original: u.did,
               renderItem: () => {
-                var L;
-                const x = c[C] || {}, A = u.cover || nr(u.did, (L = x.screenshots) == null ? void 0 : L[0]), F = He(A, { h: 400, w: 700 });
+                var E;
+                const x = c[C] || {}, F = u.cover || or(u.did, (E = x.screenshots) == null ? void 0 : E[0]), L = Ve(F, n.breakpoints.values.md * 2);
                 return /* @__PURE__ */ h(
-                  P,
+                  A,
                   {
-                    height: { xs: "auto", md: ae },
+                    height: { xs: "auto", md: se },
                     sx: {
                       cursor: "pointer",
                       "&::before": {
@@ -815,7 +812,7 @@ function rr() {
                         left: 0,
                         right: 0,
                         bottom: 0,
-                        backgroundImage: `url("${F}")`,
+                        backgroundImage: `url("${L}")`,
                         backgroundSize: "cover",
                         filter: "blur(50px)",
                         opacity: 0.15,
@@ -830,10 +827,10 @@ function rr() {
                     onClick: () => r.handleSearchSelect(x),
                     gap: { xs: 2, md: 5 },
                     children: [
-                      g(F),
-                      /* @__PURE__ */ h(P, { flex: 1, height: "100%", gap: 3, children: [
+                      g(L),
+                      /* @__PURE__ */ h(A, { flex: 1, height: "100%", gap: 3, children: [
                         /* @__PURE__ */ h(y, { flex: 1, children: [
-                          m(u.name || x.title || u.name),
+                          p(u.name || x.title || u.name),
                           f(u.desc || x.description)
                         ] }),
                         x.did && k(x, u.baseNum),
@@ -850,19 +847,9 @@ function rr() {
     )
   ] }) : null;
   function g(u) {
-    return /* @__PURE__ */ t(y, { width: { xs: "100%", md: 338 }, height: 210, borderRadius: 2, overflow: "hidden", position: "relative", children: /* @__PURE__ */ t(
-      Jt,
-      {
-        showSkeleton: p,
-        src: u,
-        alt: "",
-        width: i ? void 0 : 338,
-        height: 210,
-        style: { objectFit: "cover", cursor: "pointer" }
-      }
-    ) });
+    return /* @__PURE__ */ t(y, { borderRadius: 2, overflow: "hidden", position: "relative", width: { xs: "100%", md: ee }, children: /* @__PURE__ */ t(nr, { url: u }) });
   }
-  function m(u) {
+  function p(u) {
     return /* @__PURE__ */ t(w, { variant: "h2", width: "100%", children: u });
   }
   function f(u) {
@@ -890,15 +877,15 @@ function rr() {
     );
   }
   function k(u, C = 0) {
-    const { did: x, owner: A, stats: F } = u;
+    const { did: x, owner: F, stats: L } = u;
     return /* @__PURE__ */ h(y, { display: "flex", alignItems: "center", gap: 2, color: "text.secondary", children: [
-      /* @__PURE__ */ t(Be, { icon: /* @__PURE__ */ t(De, { src: A.avatar, did: x, size: 20, variant: "circle" }), children: A.fullName }),
-      /* @__PURE__ */ t(Be, { icon: /* @__PURE__ */ t(Ae, { icon: kt }), title: `${F.downloads + C}`, children: or(F.downloads + C) })
+      /* @__PURE__ */ t(Te, { icon: /* @__PURE__ */ t($e, { src: F.avatar, did: x, size: 20, variant: "circle" }), children: F.fullName }),
+      /* @__PURE__ */ t(Te, { icon: /* @__PURE__ */ t(Le, { icon: Ct }), title: `${L.downloads + C}`, children: rr(L.downloads + C) })
     ] });
   }
   function S(u) {
     return /* @__PURE__ */ t(
-      te,
+      re,
       {
         variant: "outlined",
         size: "small",
@@ -916,45 +903,76 @@ function rr() {
     );
   }
 }
-const or = (e) => Number.isNaN(e) ? 0 : e < 1e3 ? e : e < 1e6 ? `${(e / 1e3).toFixed(1)}k` : e < 1e9 ? `${(e / 1e6).toFixed(1)}m` : `${(e / 1e9).toFixed(1)}b`, nr = (e, r) => e && r ? `/assets/${e}/screenshots/${r}` : "";
-function lr({ title: e, blocklets: r }) {
+const rr = (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`, or = (e, r) => e && r ? `/assets/${e}/screenshots/${r}` : "";
+function nr({ url: e }) {
+  const [r, o] = P(!0);
+  return /* @__PURE__ */ h(M, { children: [
+    r && /* @__PURE__ */ t(
+      _,
+      {
+        variant: "rectangular",
+        sx: {
+          width: { xs: "100%", md: ee },
+          height: { xs: "auto", md: fe }
+        }
+      }
+    ),
+    /* @__PURE__ */ t(
+      y,
+      {
+        display: r ? "none" : "block",
+        component: "img",
+        src: e,
+        width: { xs: "100%", md: ee },
+        height: { xs: "auto", md: fe },
+        borderRadius: 2,
+        border: 1,
+        borderColor: "divider",
+        sx: { objectFit: "container", cursor: "pointer", aspectRatio: 16 / 10 },
+        onLoad: () => o(!1),
+        onError: () => o(!1)
+      }
+    )
+  ] });
+}
+function ir({ title: e, blocklets: r }) {
   const { blockletRender: o, serverVersion: n } = I();
   return /* @__PURE__ */ h(y, { mt: 3, children: [
     /* @__PURE__ */ t(w, { component: "h3", variant: "h3", sx: { mb: 2 }, children: e }),
-    /* @__PURE__ */ t(Ce, { container: !0, spacing: 2, children: r.map((i) => /* @__PURE__ */ t(Ce, { item: !0, xs: 12, md: 6, p: "2px", "data-blocklet-did": i.did, children: /* @__PURE__ */ t(y, { padding: "1px", children: o({ blocklet: i, blocklets: r, serverVersion: n }) }) }, i.did)) })
+    /* @__PURE__ */ t(Ie, { container: !0, spacing: 2, children: r.map((l) => /* @__PURE__ */ t(Ie, { item: !0, xs: 12, md: 6, p: "2px", "data-blocklet-did": l.did, children: /* @__PURE__ */ t(y, { padding: "1px", children: o({ blocklet: l, blocklets: r, serverVersion: n }) }) }, l.did)) })
   ] });
 }
-function ir() {
-  const { get: e } = be(), { t: r } = I(), {
+function lr() {
+  const { get: e } = ve(), { t: r } = I(), {
     data: o = [],
     error: n,
-    loading: i
-  } = ee(async () => {
+    loading: l
+  } = te(async () => {
     const a = await e(T.explorePath);
     return Array.isArray(a) ? a : [];
   });
-  return n ? /* @__PURE__ */ t(fe, { error: new Error(`Failed to fetch blocklets from ${T.explorePath}`) }) : i ? /* @__PURE__ */ t(Qe, { mt: 15 }) : /* @__PURE__ */ h(W, { children: [
-    /* @__PURE__ */ t(rr, {}),
+  return n ? /* @__PURE__ */ t(xe, { error: new Error(`Failed to fetch blocklets from ${T.explorePath}`) }) : l ? /* @__PURE__ */ t(Ze, { mt: 15 }) : /* @__PURE__ */ h(M, { children: [
+    /* @__PURE__ */ t(tr, {}),
     o.map(
-      (a) => a.blocklets.length > 0 ? /* @__PURE__ */ t(lr, { title: r(`explore.${a.type}`), blocklets: a.blocklets }, a.type) : null
+      (a) => a.blocklets.length > 0 ? /* @__PURE__ */ t(ir, { title: r(`explore.${a.type}`), blocklets: a.blocklets }, a.type) : null
     )
   ] });
 }
-const se = "__FREE_TEXT__", Re = "__NO_RESULT__", ce = 40;
+const ce = "__FREE_TEXT__", Pe = "__NO_RESULT__", de = 40;
 function ar({
   endpoint: e,
   t: r,
   locale: o,
   filters: n,
-  handleKeyword: i,
+  handleKeyword: l,
   handleSearchSelect: a,
   ...c
 }) {
-  const l = pe(null), p = pe(!1), [d, g] = E(!1), [m, f] = E(""), [k, S] = E(!1), B = be(), [v, u] = E(!1), C = async (s) => {
+  const i = me(null), m = me(!1), [d, g] = P(!1), [p, f] = P(""), [k, S] = P(!1), B = ve(), [v, u] = P(!1), C = async (s) => {
     u(!0);
-    const b = await B.get(ke(e, xe(T.blockletsPath, s)));
+    const b = await B.get(Ce(e, we(T.blockletsPath, s)));
     return u(!1), b.dataList || [];
-  }, { data: x, run: A } = ee(
+  }, { data: x, run: F } = te(
     (s) => s ? C({
       sortBy: T.nameDesc,
       page: 1,
@@ -967,22 +985,22 @@ function ar({
     }
   );
   U(() => {
-    u(!0), A(n.keyword), f(n.keyword || "");
-  }, [n.keyword, A]), At(
+    u(!0), F(n.keyword), f(n.keyword || "");
+  }, [n.keyword, F]), Ft(
     "ctrl + k, command + k",
     (s) => {
-      var b, N;
-      return s.stopPropagation(), s.preventDefault(), (N = (b = l.current) == null ? void 0 : b.querySelector("input")) == null || N.focus(), !1;
+      var b, D;
+      return s.stopPropagation(), s.preventDefault(), (D = (b = i.current) == null ? void 0 : b.querySelector("input")) == null || D.focus(), !1;
     },
     { enableOnTags: ["INPUT"] }
   );
-  const F = Oe((s) => A(s), { wait: 300 }), L = { name: se, title: m, did: "" };
-  let M = [];
-  return m && (v ? M = [L] : x != null && x.length ? M = [L, ...x] : M = [{ name: Re, title: r("blocklet.noResults"), did: "" }]), /* @__PURE__ */ h(W, { children: [
-    /* @__PURE__ */ h(Tt, { fullScreen: !0, open: k, sx: { display: { md: "none" } }, children: [
+  const L = ze((s) => F(s), { wait: 300 }), E = { name: ce, title: p, did: "" };
+  let N = [];
+  return p && (v ? N = [E] : x != null && x.length ? N = [E, ...x] : N = [{ name: Pe, title: r("blocklet.noResults"), did: "" }]), /* @__PURE__ */ h(M, { children: [
+    /* @__PURE__ */ h(Pt, { fullScreen: !0, open: k, sx: { display: { md: "none" } }, children: [
       /* @__PURE__ */ h(y, { p: 2, pb: 0, display: "flex", alignItems: "center", gap: 2, children: [
         /* @__PURE__ */ t(
-          We,
+          je,
           {
             fullWidth: !0,
             sx: {
@@ -1002,14 +1020,14 @@ function ar({
             autoFocus: !0,
             placeholder: r("common.searchStore"),
             className: "bl-autocomplete-input",
-            value: m,
+            value: p,
             onChange: (s) => V(s.target.value),
             startAdornment: $(k),
             endAdornment: q()
           }
         ),
         /* @__PURE__ */ t(
-          te,
+          re,
           {
             variant: "outlined",
             onClick: () => {
@@ -1019,7 +1037,7 @@ function ar({
           }
         )
       ] }),
-      /* @__PURE__ */ t(Ne, { sx: { p: 0.5 }, children: M.map((s) => X(s)) })
+      /* @__PURE__ */ t(We, { sx: { p: 0.5 }, children: N.map((s) => X(s)) })
     ] }),
     /* @__PURE__ */ t(
       J,
@@ -1029,17 +1047,17 @@ function ar({
       }
     ),
     /* @__PURE__ */ t(
-      Rt,
+      Tt,
       {
-        ref: l,
-        open: !!m && d,
+        ref: i,
+        open: !!p && d,
         size: "small",
         onOpen: () => g(!0),
         onClose: (s, b) => {
-          g(!1), b === "selectOption" && !p.current && i(m);
+          g(!1), b === "selectOption" && !m.current && l(p);
         },
         disableClearable: !0,
-        inputValue: m,
+        inputValue: p,
         onInputChange: (s, b) => V(b),
         isOptionEqualToValue: (s, b) => s.name === b.name,
         getOptionLabel: (s) => s.title,
@@ -1058,7 +1076,7 @@ function ar({
           }
         },
         renderInput: (s) => /* @__PURE__ */ t(
-          Pt,
+          At,
           {
             ...s,
             InputProps: {
@@ -1066,7 +1084,7 @@ function ar({
               autoFocus: !0,
               placeholder: r("common.searchStore"),
               className: "bl-autocomplete-input",
-              value: m,
+              value: p,
               startAdornment: $(d),
               endAdornment: q()
             }
@@ -1074,9 +1092,9 @@ function ar({
         ),
         filterOptions: (s) => s,
         ...c,
-        options: M,
+        options: N,
         renderOption: (s, b) => X(b),
-        value: L,
+        value: E,
         sx: [
           {
             bgcolor: "#F9FAFB",
@@ -1097,26 +1115,26 @@ function ar({
     )
   ] });
   function V(s) {
-    u(!0), f(s), p.current = !1, F.run(s);
+    u(!0), f(s), m.current = !1, L.run(s);
   }
   function G() {
-    S(!1), f(""), V(""), i("");
+    S(!1), f(""), V(""), l("");
   }
-  function oe(s) {
-    s != null && s.did ? (S(!1), p.current = !0, f(""), a(s)) : s.name === se && (S(!1), i(m));
+  function ne(s) {
+    s != null && s.did ? (S(!1), m.current = !0, f(""), a(s)) : s.name === ce && (S(!1), l(p));
   }
   function X(s) {
-    var b, N;
+    var b, D;
     return /* @__PURE__ */ h(
-      Me,
+      De,
       {
         sx: { display: "flex", alignItems: "center", gap: 1, p: 1.5, borderRadius: "8px" },
-        onClick: () => oe(s),
+        onClick: () => ne(s),
         children: [
           Q(s),
           /* @__PURE__ */ h(w, { variant: "body1", children: [
             /* @__PURE__ */ t(w, { fontWeight: "fontWeightMedium", display: "flex", alignItems: "center", gap: 1, children: s.title }),
-            /* @__PURE__ */ t(w, { sx: { color: "text.lighter" }, fontSize: "13px", children: ((N = (b = s.category) == null ? void 0 : b.locales) == null ? void 0 : N[o || "en"]) || "" })
+            /* @__PURE__ */ t(w, { sx: { color: "text.lighter" }, fontSize: "13px", children: ((D = (b = s.category) == null ? void 0 : b.locales) == null ? void 0 : D[o || "en"]) || "" })
           ] })
         ]
       },
@@ -1124,11 +1142,11 @@ function ar({
     );
   }
   function Q(s) {
-    if ([se, Re].includes(s.name))
+    if ([ce, Pe].includes(s.name))
       return /* @__PURE__ */ t(
         y,
         {
-          width: ce,
+          width: de,
           p: "6px",
           display: "flex",
           justifyContent: "center",
@@ -1140,21 +1158,21 @@ function ar({
         }
       );
     let b = "";
-    return s.logo && (b = ke(e, "assets", s.did, He(s.logo, ce, s.version))), /* @__PURE__ */ t(De, { src: b, size: ce, style: { borderRadius: "8px", overflow: "hidden" } });
+    return s.logo && (b = Ce(e, "assets", s.did, Ve(s.logo, de, s.version))), /* @__PURE__ */ t($e, { src: b, size: de, style: { borderRadius: "8px", overflow: "hidden" } });
   }
   function $(s = !0) {
-    return /* @__PURE__ */ t(y, { sx: { display: "flex", pl: 0.5, alignItems: "center", color: "text.lighter" }, children: s && m && v ? /* @__PURE__ */ t(re, { color: "inherit", size: 16 }) : /* @__PURE__ */ t(J, { sx: { fontSize: 16, cursor: "default" } }) });
+    return /* @__PURE__ */ t(y, { sx: { display: "flex", pl: 0.5, alignItems: "center", color: "text.lighter" }, children: s && p && v ? /* @__PURE__ */ t(oe, { color: "inherit", size: 16 }) : /* @__PURE__ */ t(J, { sx: { fontSize: 16, cursor: "default" } }) });
   }
   function q() {
-    return m ? /* @__PURE__ */ t(y, { sx: { display: "flex", alignItems: "center", color: "text.lighter" }, children: /* @__PURE__ */ t(ge, { sx: { fontSize: 20, cursor: "pointer" }, onClick: () => G() }) }) : null;
+    return p ? /* @__PURE__ */ t(y, { sx: { display: "flex", alignItems: "center", color: "text.lighter" }, children: /* @__PURE__ */ t(ye, { sx: { fontSize: 20, cursor: "pointer" }, onClick: () => G() }) }) : null;
   }
 }
 function sr({ placeholder: e = "Type to search...", ...r }) {
-  const { search: o } = I(), { filters: n, handleKeyword: i } = o, [a, c] = E(n.keyword || ""), l = Oe(i, { wait: 300 }), p = (g) => {
-    const { value: m } = g.target;
-    c(m), l.run(m);
+  const { search: o } = I(), { filters: n, handleKeyword: l } = o, [a, c] = P(n.keyword || ""), i = ze(l, { wait: 300 }), m = (g) => {
+    const { value: p } = g.target;
+    c(p), i.run(p);
   }, d = () => {
-    c(""), i("");
+    c(""), l("");
   };
   return U(() => {
     c(n.keyword || "");
@@ -1164,18 +1182,18 @@ function sr({ placeholder: e = "Type to search...", ...r }) {
       inputProps: {
         "data-cy": "search-blocklet"
       },
-      startAdornment: /* @__PURE__ */ t(Ie, { position: "start", children: /* @__PURE__ */ t(dr, {}) }),
-      onChange: p,
+      startAdornment: /* @__PURE__ */ t(Re, { position: "start", children: /* @__PURE__ */ t(dr, {}) }),
+      onChange: m,
       placeholder: e,
       value: a,
       title: e,
       "data-cy": "search",
-      endAdornment: a && /* @__PURE__ */ t(Ie, { position: "end", children: /* @__PURE__ */ t(ur, { "data-cy": "search-delete", onClick: d }) }),
+      endAdornment: a && /* @__PURE__ */ t(Re, { position: "end", children: /* @__PURE__ */ t(ur, { "data-cy": "search-delete", onClick: d }) }),
       ...r
     }
   );
 }
-const cr = K(We)`
+const cr = K(je)`
   background-color: ${(e) => e.theme.palette.grey[50]};
   font-size: 14px;
   border-radius: 6px;
@@ -1198,15 +1216,15 @@ const cr = K(We)`
   @media (max-width: ${(e) => e.theme.breakpoints.values.md}px) {
     font-size: 24px;
   }
-`, ur = K(ge)`
+`, ur = K(ye)`
   color: ${(e) => e.theme.palette.grey[500]};
   font-size: 16px;
   cursor: pointer;
 `;
 function hr() {
-  const { search: e, t: r, endpoint: o, locale: n, getCategoryLocale: i, developerName: a, showResourcesSwitch: c, layout: l, baseSearch: p } = I(), { filters: d, handleSort: g, handlePrice: m, handleDeveloper: f, handleSwitchShowResources: k, cleanFilter: S } = e, B = je(r);
+  const { search: e, t: r, endpoint: o, locale: n, getCategoryLocale: l, developerName: a, showResourcesSwitch: c, layout: i, baseSearch: m } = I(), { filters: d, handleSort: g, handlePrice: p, handleDeveloper: f, handleSwitchShowResources: k, cleanFilter: S } = e, B = Ue(r);
   return /* @__PURE__ */ h(
-    P,
+    A,
     {
       className: "filter-bar",
       direction: { xs: "column", md: "row" },
@@ -1218,9 +1236,9 @@ function hr() {
       px: 0,
       pb: 3,
       children: [
-        /* @__PURE__ */ t(w, { variant: "h2", textTransform: "capitalize", children: i(d.category) }),
+        /* @__PURE__ */ t(w, { variant: "h2", textTransform: "capitalize", children: l(d.category) }),
         /* @__PURE__ */ h(
-          P,
+          A,
           {
             flex: 1,
             direction: "row",
@@ -1229,7 +1247,7 @@ function hr() {
             justifyContent: { xs: "space-between", md: "flex-end" },
             gap: 2,
             children: [
-              l.showSearch ? /* @__PURE__ */ t(y, { flex: 1, children: p ? /* @__PURE__ */ t(sr, {}) : /* @__PURE__ */ t(
+              i.showSearch ? /* @__PURE__ */ t(y, { flex: 1, children: m ? /* @__PURE__ */ t(sr, {}) : /* @__PURE__ */ t(
                 ar,
                 {
                   locale: n,
@@ -1247,7 +1265,7 @@ function hr() {
                 }
               ) }) : null,
               d.owner && a && /* @__PURE__ */ t(
-                Se,
+                Be,
                 {
                   label: r("blocklet.authorTag", { name: a }),
                   size: "small",
@@ -1255,7 +1273,7 @@ function hr() {
                 }
               ),
               d.resourceDid && d.resourceBlocklet && /* @__PURE__ */ t(
-                Se,
+                Be,
                 {
                   label: r("blocklet.resourceTag", { name: d.resourceBlocklet }),
                   size: "small",
@@ -1263,7 +1281,7 @@ function hr() {
                 }
               ),
               c ? /* @__PURE__ */ t(
-                Te,
+                Ae,
                 {
                   checked: d.showResources === "true",
                   onChange: (v) => k(v ? "true" : ""),
@@ -1271,15 +1289,15 @@ function hr() {
                 }
               ) : null,
               /* @__PURE__ */ t(
-                Te,
+                Ae,
                 {
                   checked: d.price === "free",
-                  onChange: (v) => m(v ? "free" : ""),
+                  onChange: (v) => p(v ? "free" : ""),
                   label: r("blocklet.free")
                 }
               ),
               /* @__PURE__ */ t(
-                Ke,
+                Qe,
                 {
                   value: d.sortBy || B[0].value,
                   options: B,
@@ -1294,17 +1312,17 @@ function hr() {
     }
   );
 }
-function Te({
+function Ae({
   checked: e,
   onChange: r,
   label: o
 }) {
   return /* @__PURE__ */ t(
-    ze,
+    Ne,
     {
       sx: { m: 0 },
       control: /* @__PURE__ */ t(
-        _e,
+        Me,
         {
           checked: e,
           size: "small",
@@ -1318,24 +1336,24 @@ function Te({
 }
 function Z({ children: e }) {
   return /* @__PURE__ */ h(y, { display: "flex", mt: 2, flexDirection: "column", alignItems: "center", justifyContent: "center", color: "text.lighter", children: [
-    /* @__PURE__ */ t(Ft, {}),
+    /* @__PURE__ */ t(Lt, {}),
     e
   ] });
 }
-function Pe() {
+function Fe() {
   const { t: e } = I();
   return /* @__PURE__ */ t(w, { style: { textAlign: "center" }, variant: "subtitle2", children: e("blocklet.noResults") });
 }
-function de({ filterTip: e, keywordTip: r }) {
-  const { t: o, locale: n } = I(), i = () => n === "zh" ? "、" : " , ";
+function ue({ filterTip: e, keywordTip: r }) {
+  const { t: o, locale: n } = I(), l = () => n === "zh" ? "、" : " , ";
   return /* @__PURE__ */ h(y, { mt: 1, display: "flex", children: [
     /* @__PURE__ */ t(w, { style: { marginRight: "16px" }, children: o("blocklet.emptyTip") }),
     e && /* @__PURE__ */ t(w, { children: o("blocklet.filterTip") }),
-    e && r && i(),
+    e && r && l(),
     r && /* @__PURE__ */ t(w, { children: o("blocklet.keywordTip") })
   ] });
 }
-function ue({
+function he({
   primaryStart: e,
   primaryEnd: r,
   filter: o
@@ -1350,51 +1368,51 @@ function ue({
   ] });
 }
 function pr() {
-  const { t: e, search: r, getCategoryLocale: o, selectedCategory: n } = I(), { filters: i } = r, a = !!n || !!i.price;
-  if (i.keyword && a)
+  const { t: e, search: r, getCategoryLocale: o, selectedCategory: n } = I(), { filters: l } = r, a = !!n || !!l.price;
+  if (l.keyword && a)
     return /* @__PURE__ */ h(Z, { children: [
       /* @__PURE__ */ t(
-        ue,
+        he,
         {
           primaryStart: e("blocklet.noBlockletPart1"),
           primaryEnd: e("blocklet.noBlockletPart2"),
-          filter: i.keyword
+          filter: l.keyword
         }
       ),
-      /* @__PURE__ */ t(de, { keywordTip: !0, filterTip: !0 })
+      /* @__PURE__ */ t(ue, { keywordTip: !0, filterTip: !0 })
     ] });
-  if (i.keyword)
+  if (l.keyword)
     return /* @__PURE__ */ h(Z, { children: [
       /* @__PURE__ */ t(
-        ue,
+        he,
         {
           primaryStart: e("blocklet.noBlockletPart1"),
           primaryEnd: e("blocklet.noBlockletPart2"),
-          filter: i.keyword
+          filter: l.keyword
         }
       ),
-      /* @__PURE__ */ t(de, { keywordTip: !0 })
+      /* @__PURE__ */ t(ue, { keywordTip: !0 })
     ] });
   if (a) {
     const c = o(n);
     return /* @__PURE__ */ h(Z, { children: [
       c ? /* @__PURE__ */ t(
-        ue,
+        he,
         {
           primaryStart: e("blocklet.noCategoryResults1"),
           primaryEnd: e("blocklet.noCategoryResults2"),
           filter: c
         }
-      ) : /* @__PURE__ */ t(Pe, {}),
-      /* @__PURE__ */ t(de, { filterTip: !0 })
+      ) : /* @__PURE__ */ t(Fe, {}),
+      /* @__PURE__ */ t(ue, { filterTip: !0 })
     ] });
   }
-  return /* @__PURE__ */ t(Z, { children: /* @__PURE__ */ t(Pe, {}) });
+  return /* @__PURE__ */ t(Z, { children: /* @__PURE__ */ t(Fe, {}) });
 }
-const mr = (e, r, o, n) => lt(
-  async (i) => {
-    i || (o.currentPage = o.defaultCurrentPage);
-    const { currentPage: a, pageSize: c } = o, l = {
+const mr = (e, r, o, n) => at(
+  async (l) => {
+    l || (o.currentPage = o.defaultCurrentPage);
+    const { currentPage: a, pageSize: c } = o, i = {
       ...r,
       category: r.category === "All" ? "" : r.category,
       sortBy: T[r.sortBy],
@@ -1402,22 +1420,22 @@ const mr = (e, r, o, n) => lt(
       pageSize: c
     };
     n(null);
-    const { data: p = {} } = await e.get(T.blockletsPath, { params: l });
-    return o.currentPage++, { page: a, pageSize: c, list: (p == null ? void 0 : p.dataList) || [], total: (p == null ? void 0 : p.total) || 0 };
+    const { data: m = {} } = await e.get(T.blockletsPath, { params: i });
+    return o.currentPage++, { page: a, pageSize: c, list: (m == null ? void 0 : m.dataList) || [], total: (m == null ? void 0 : m.total) || 0 };
   },
   {
-    isNoMore: (i) => i ? i.page * i.pageSize >= i.total : !1,
+    isNoMore: (l) => l ? l.page * l.pageSize >= l.total : !1,
     reloadDeps: [e, Et(r)],
     onError: n
   }
 );
 function fr() {
-  var m;
-  const { storeApi: e, search: r, extraFilter: o, errors: n, updateDeveloperName: i } = I(), { filters: a } = r, c = it({
+  var p;
+  const { storeApi: e, search: r, extraFilter: o, errors: n, updateDeveloperName: l } = I(), { filters: a } = r, c = st({
     currentPage: T.currentPage,
-    pageSize: jt() ? T.mobilePageSize : T.pageSize,
+    pageSize: Ut() ? T.mobilePageSize : T.pageSize,
     defaultCurrentPage: T.defaultCurrentPage
-  }), [l, p] = E(null), d = mr(e, a, c, p), g = H(
+  }), [i, m] = P(null), d = mr(e, a, c, m), g = H(
     () => {
       var f, k;
       return o ? o(((f = d.data) == null ? void 0 : f.list) || []) : ((k = d.data) == null ? void 0 : k.list) || [];
@@ -1426,44 +1444,44 @@ function fr() {
   );
   return U(() => {
     const f = g.find((k) => k.owner.did === a.owner);
-    i((f == null ? void 0 : f.owner.fullName) || (f == null ? void 0 : f.author.name) || "");
-  }, [a.owner, g, i]), {
+    l((f == null ? void 0 : f.owner.fullName) || (f == null ? void 0 : f.author.name) || "");
+  }, [a.owner, g, l]), {
     blocklets: g,
-    fetchBlockletsError: l,
+    fetchBlockletsError: i,
     loadMore: d.loadMore,
     hasNextPage: !d.noMore,
-    total: ((m = d.data) == null ? void 0 : m.total) || 0,
+    total: ((p = d.data) == null ? void 0 : p.total) || 0,
     loadings: {
       fetchBlockletsLoading: d.loading,
       loadingMore: d.loadingMore
     },
     errors: {
       ...n,
-      fetchBlockletsError: l
+      fetchBlockletsError: i
     }
   };
 }
 function gr() {
-  const { t: e, search: r, endpoint: o, blockletRender: n, serverVersion: i, minItemWidth: a, layout: c, baseSearch: l } = I(), { filters: p } = r, { blocklets: d, errors: g, loadMore: m, loadings: f, hasNextPage: k, total: S } = fr(), [B] = Bt({
+  const { t: e, search: r, endpoint: o, blockletRender: n, serverVersion: l, minItemWidth: a, layout: c, baseSearch: i } = I(), { filters: m } = r, { blocklets: d, errors: g, loadMore: p, loadings: f, hasNextPage: k, total: S } = fr(), [B] = Rt({
     loading: f.fetchBlockletsLoading || f.loadingMore,
     hasNextPage: k,
-    onLoadMore: m
+    onLoadMore: p
   });
   if (g.fetchBlockletsError) {
     const x = new Error(`Failed to fetch blocklets from ${o}: ${g.fetchBlockletsError.message}`);
-    return /* @__PURE__ */ t(fe, { error: x });
+    return /* @__PURE__ */ t(xe, { error: x });
   }
-  const v = l && c.showSearch || !p.keyword;
-  return /* @__PURE__ */ h(W, { children: [
-    v ? /* @__PURE__ */ t(hr, {}) : /* @__PURE__ */ h(W, { children: [
-      /* @__PURE__ */ t(we, { xs: /* @__PURE__ */ t(Xe, {}), md: null }),
+  const v = i && c.showSearch || !m.keyword;
+  return /* @__PURE__ */ h(M, { children: [
+    v ? /* @__PURE__ */ t(hr, {}) : /* @__PURE__ */ h(M, { children: [
+      /* @__PURE__ */ t(ke, { xs: /* @__PURE__ */ t(Ye, {}), md: null }),
       C()
     ] }),
     u(),
-    !f.fetchBlockletsLoading && k && /* @__PURE__ */ t(y, { height: 60, display: "flex", justifyContent: "center", py: 2, ref: B, children: /* @__PURE__ */ t(re, {}) })
+    !f.fetchBlockletsLoading && k && /* @__PURE__ */ t(y, { height: 60, display: "flex", justifyContent: "center", py: 2, ref: B, children: /* @__PURE__ */ t(oe, {}) })
   ] });
   function u() {
-    return f.fetchBlockletsLoading ? /* @__PURE__ */ t(Qe, { mt: 15 }) : d.length ? /* @__PURE__ */ t(
+    return f.fetchBlockletsLoading ? /* @__PURE__ */ t(Ze, { mt: 15 }) : d.length ? /* @__PURE__ */ t(
       y,
       {
         className: "blocklet-list",
@@ -1471,13 +1489,13 @@ function gr() {
         gridTemplateColumns: `repeat(auto-fill, minmax(${a}px, 1fr))`,
         p: "2px",
         gap: 2,
-        children: d.map((x) => /* @__PURE__ */ t(y, { "data-blocklet-did": x.did, sx: { minWidth: a }, children: n({ blocklet: x, blocklets: d, serverVersion: i }) }, x.did))
+        children: d.map((x) => /* @__PURE__ */ t(y, { "data-blocklet-did": x.did, sx: { minWidth: a }, children: n({ blocklet: x, blocklets: d, serverVersion: l }) }, x.did))
       }
     ) : /* @__PURE__ */ t(pr, {});
   }
   function C() {
     return /* @__PURE__ */ h(
-      P,
+      A,
       {
         direction: "row",
         className: "search-result-title",
@@ -1486,7 +1504,7 @@ function gr() {
         mb: 2,
         mt: { xs: 2, md: 0 },
         children: [
-          /* @__PURE__ */ t(w, { variant: "h3", children: e("blocklet.search", { keyword: p.keyword }) }),
+          /* @__PURE__ */ t(w, { variant: "h3", children: e("blocklet.search", { keyword: m.keyword }) }),
           /* @__PURE__ */ t(w, { variant: "body1", color: "text.lighter", fontSize: 13, children: e("blocklet.resultCount", { count: S }) })
         ]
       }
@@ -1494,7 +1512,7 @@ function gr() {
   }
 }
 function xr() {
-  const { t: e, selectedCategory: r, getCategoryLocale: o } = I(), { toggleOpen: n } = ye();
+  const { t: e, selectedCategory: r, getCategoryLocale: o } = I(), { toggleOpen: n } = be();
   return /* @__PURE__ */ h(
     w,
     {
@@ -1505,7 +1523,7 @@ function xr() {
       py: 2,
       fontWeight: "fontWeightMedium",
       children: [
-        /* @__PURE__ */ t(qe, { onClick: () => n(!0), children: /* @__PURE__ */ t(Lt, {}) }),
+        /* @__PURE__ */ t(Xe, { onClick: () => n(!0), children: /* @__PURE__ */ t(Ot, {}) }),
         o(r) || e("common.category")
       ]
     }
@@ -1513,16 +1531,16 @@ function xr() {
 }
 function yr() {
   const { search: e, layout: r } = I(), { filters: o } = e, n = o.category || o.keyword || o.price;
-  return /* @__PURE__ */ t(_t, { children: /* @__PURE__ */ h(et, { FallbackComponent: fe, children: [
+  return /* @__PURE__ */ t(Mt, { children: /* @__PURE__ */ h(rt, { FallbackComponent: xe, children: [
     /* @__PURE__ */ t(xr, {}),
     /* @__PURE__ */ h(y, { display: "flex", height: "100%", className: "list-container", pt: { xs: 0, md: 5 }, children: [
-      /* @__PURE__ */ t(Zt, {}),
-      /* @__PURE__ */ t(P, { height: "100%", position: "relative", flex: 1, overflow: "visible", children: r.showExplore && !n ? /* @__PURE__ */ t(ir, {}) : /* @__PURE__ */ t(gr, {}) })
+      /* @__PURE__ */ t(er, {}),
+      /* @__PURE__ */ t(A, { height: "100%", position: "relative", flex: 1, overflow: "visible", children: r.showExplore && !n ? /* @__PURE__ */ t(lr, {}) : /* @__PURE__ */ t(gr, {}) })
     ] })
   ] }) });
 }
 function To(e) {
-  return /* @__PURE__ */ h(Ot, { variant: "outlined", ...e, sx: { maxWidth: 400, borderRadius: "8px", p: { xs: 2, md: 3 }, ...e.sx }, children: [
+  return /* @__PURE__ */ h(_t, { variant: "outlined", ...e, sx: { maxWidth: 400, borderRadius: "8px", p: { xs: 2, md: 3 }, ...e.sx }, children: [
     /* @__PURE__ */ h(le, { display: "flex", alignItems: "center", gap: 2, pb: 1, children: [
       /* @__PURE__ */ h(le, { display: "flex", alignItems: "center", gap: 2, flex: 1, children: [
         /* @__PURE__ */ t(O, { variant: "rounded", width: 48, height: 48 }),
@@ -1540,9 +1558,12 @@ function To(e) {
     ] })
   ] });
 }
-function Po(e) {
-  const r = me(), o = Ye(
-    Je({
+function Po({ showSkeleton: e, ...r }) {
+  return e ? /* @__PURE__ */ t(_, { variant: "rectangular", width: r.width, height: r.height }) : /* @__PURE__ */ t(zt, { ...r });
+}
+function Ao(e) {
+  const r = ge(), o = Je(
+    tt({
       ...r,
       typography: {
         h1: {
@@ -1570,12 +1591,12 @@ function Po(e) {
       }
     })
   );
-  return /* @__PURE__ */ t(Ze, { theme: o, children: /* @__PURE__ */ t(qt, { ...e, children: /* @__PURE__ */ t(yr, {}) }) });
+  return /* @__PURE__ */ t(et, { theme: o, children: /* @__PURE__ */ t(Xt, { ...e, children: /* @__PURE__ */ t(yr, {}) }) });
 }
 export {
   ar as Autocomplete,
   To as CardSkeleton,
-  Jt as Image,
-  Po as default,
-  Mt as useSearch
+  Po as Image,
+  Ao as default,
+  Dt as useSearch
 };