@bynder/compact-view 5.2.2 → 5.2.4

package/AccessToken2.js

@@ -1,5 +1,5 @@
 import { __exports as a } from "./AccessToken3.js";
-import { __require as x } from "./index15.js";
+import { __require as x } from "./index27.js";
 import { __require as O } from "./localStorageHelper.js";
 import { __require as E } from "./tokenExpirationHelper.js";
 import { __require as H } from "./urlHelper.js";

package/ActiveFilters.js

@@ -1,80 +1,79 @@
-import { jsx as i, jsxs as f } from "react/jsx-runtime";
-import h from "./styled-components.browser.esm.js";
-import { Button as v } from "./Button.js";
-import { assetTypeToString as u, getAssetTypeIcon as y } from "./asset.type.js";
-import { HorizontalScroll as x } from "./HorizontalScroll.js";
-import { useAssetFilter as A } from "./AssetFilterContext.js";
-import { ActiveFilter as o } from "./ActiveFilter.js";
-import { __ as d } from "./index2.js";
-import { useSimilaritySearchStore as g } from "./useSimilaritySearchStore.js";
-function B() {
-  const e = A(), {
+import { jsx as e, jsxs as A } from "react/jsx-runtime";
+import k from "./styled-components.browser.esm.js";
+import { Button as C } from "./Button.js";
+import { assetTypeToString as g, getAssetTypeIcon as I } from "./asset.type.js";
+import { HorizontalScroll as N } from "./HorizontalScroll.js";
+import { ActiveFilter as r } from "./ActiveFilter.js";
+import { __ as p } from "./index2.js";
+import { useSimilaritySearchStore as O } from "./useSimilaritySearchStore.js";
+import { useAssetFilterStore as T } from "./useAssetFilterStore.js";
+function q() {
+  const {
+    assetTypes: o,
+    selectedSmartfilterOptions: f,
+    tags: l,
+    removeAssetType: h,
+    removeSmartfilterOption: v,
+    removeTag: u,
+    clear: x
+  } = T(), {
     isSelected: s,
-    setIsSelected: l,
-    isNLSSelected: c,
-    setIsNLSSelected: n,
-    NLSSearchText: a,
-    setNLSSearchText: m
-  } = g(), S = Object.values(e.selectedSmartfilterOptions || {}), p = S.length === 0 && e.assetTypes.length === 0 && e.tags.length === 0 && !s && !(c && a) ? void 0 : /* @__PURE__ */ i(k, { children: /* @__PURE__ */ i(
-    v,
+    setIsSelected: c,
+    isNLSSelected: n,
+    setIsNLSSelected: a,
+    NLSSearchText: m,
+    setNLSSearchText: d
+  } = O(), S = Object.values(f || {}), y = S.length === 0 && o.length === 0 && l.length === 0 && !s && !(n && m) ? void 0 : /* @__PURE__ */ e(b, { children: /* @__PURE__ */ e(
+    C,
     {
       variant: "clean",
       isSmall: !0,
       onClick: () => {
-        e.clear(), l(!1), n(!1), m(void 0);
+        x(), c(!1), a(!1), d(void 0);
       },
-      children: d("Clear filters")
+      "data-testid": "clear-filters-button",
+      children: p("Clear filters")
     }
   ) });
-  return /* @__PURE__ */ i("div", { "data-testid": "selected-filter-list", children: /* @__PURE__ */ f(x, { isActiveFilter: !0, static: p, children: [
-    e.assetTypes.map((t) => {
-      const r = y(t);
-      return /* @__PURE__ */ i(
-        o,
+  return /* @__PURE__ */ e("div", { "data-testid": "selected-filter-list", children: /* @__PURE__ */ A(N, { isActiveFilter: !0, static: y, children: [
+    o.map((t) => {
+      const i = I(t);
+      return /* @__PURE__ */ e(
+        r,
         {
-          onClick: () => e.removeAssetType(t),
-          title: u(t),
-          icon: /* @__PURE__ */ i(r, {})
+          onClick: () => h(t),
+          title: g(t),
+          icon: /* @__PURE__ */ e(i, {})
         },
         t
       );
     }),
     S.map(
-      (t) => Object.values(t).map((r) => /* @__PURE__ */ i(
-        o,
+      (t) => Object.values(t).map((i) => /* @__PURE__ */ e(
+        r,
         {
-          onClick: () => e.removeSmartfilterOption(
-            r.metapropertyName,
-            r.id
-          ),
-          title: r.label
+          onClick: () => v(i.metapropertyName, i.id),
+          title: i.label
         },
-        r.id
+        i.id
       ))
     ),
-    e.tags.map((t) => /* @__PURE__ */ i(
-      o,
-      {
-        onClick: () => e.removeTag(t),
-        title: t
-      },
-      t
-    )),
-    (s || c && a) && /* @__PURE__ */ i(
-      o,
+    l.map((t) => /* @__PURE__ */ e(r, { onClick: () => u(t), title: t }, t)),
+    (s || n && m) && /* @__PURE__ */ e(
+      r,
       {
         onClick: () => {
-          l(!1), n(!1), m(void 0);
+          c(!1), a(!1), d(void 0);
         },
-        title: d("Show similar")
+        title: p("Show similar")
       }
     )
   ] }) });
 }
-const k = h.div`
+const b = k.div`
 	flex-shrink: 0;
 	animation: var(--fade-in-down);
 `;
 export {
-  B as ActiveFilters
+  q as ActiveFilters
 };

package/AddMedia.js

@@ -3,21 +3,21 @@ import { useRef as b, useState as C, useEffect as E } from "react";
 import { Button as A } from "./Button.js";
 import { useConfig as M } from "./ConfigContext.js";
 import { useAuth as O } from "./LoginContext.js";
-import { useSelection as T } from "./SelectionContext.js";
-import { FileSelector as j } from "./FileSelector.js";
-import { getAsset as D } from "./getAsset.js";
-import { getAssets as N } from "./getAssets.js";
-import { isErr as k } from "./result.type.js";
-import { logger as q } from "./logger.js";
-import { ButtonAction as B } from "./ButtonAction.js";
-import { convertAssetIdToBase64 as G } from "./base64Converter.js";
-import { useSimilaritySearchStore as p } from "./useSimilaritySearchStore.js";
+import { FileSelector as T } from "./FileSelector.js";
+import { getAsset as j } from "./getAsset.js";
+import { getAssets as D } from "./getAssets.js";
+import { isErr as N } from "./result.type.js";
+import { logger as k } from "./logger.js";
+import { ButtonAction as q } from "./ButtonAction.js";
+import { convertAssetIdToBase64 as B } from "./base64Converter.js";
+import { useSimilaritySearchStore as G } from "./useSimilaritySearchStore.js";
+import { useSelectionStore as p } from "./useSelectionStore.js";
 function tt(t) {
   const { assetFieldSelection: r, onSuccess: i, selectionMode: u, noCache: d } = M(), {
     isSelected: f,
     NLSSearchText: m,
     isNLSSelected: S
-  } = p(), { preselectedAssetIds: y } = T(), h = O(), l = b(!0), [s, a] = C(
+  } = G(), { preselectedAssetIds: y } = p(), h = O(), l = b(!0), [s, a] = C(
     u === "SingleSelectFile" ? { status: "WaitingForFileSelection" } : { status: "Ready" }
   );
   function F(e) {
@@ -28,14 +28,14 @@ function tt(t) {
   }, []);
   function v() {
     const e = s.status === "ReadyWithFile" ? s.file : void 0;
-    a({ status: "Loading" }), u !== "MultiSelect" && t.selection[0]?.type === "asset" ? D({
-      assetId: f || m && S ? G(t.selection[0].value.id) : t.selection[0].value.id,
+    a({ status: "Loading" }), u !== "MultiSelect" && t.selection[0]?.type === "asset" ? j({
+      assetId: f || m && S ? B(t.selection[0].value.id) : t.selection[0].value.id,
       auth: h,
       assetFieldSelection: r,
       noCache: d
     }).then((n) => {
       g(n, e);
-    }) : N({
+    }) : D({
       selectedItems: t.selection,
       auth: h,
       assetFieldSelection: r,
@@ -46,7 +46,7 @@ function tt(t) {
     });
   }
   function g(e, n) {
-    if (k(e)) {
+    if (N(e)) {
       a({ status: "Error" });
       return;
     }
@@ -54,14 +54,14 @@ function tt(t) {
       const o = Array.isArray(e.value) ? e.value : [e.value];
       o.sort((R, W) => w(R, W, y)), i(o, { selectedFile: n });
     } catch (o) {
-      q.error(o);
+      k.error(o);
     }
     l.current && (a({ status: "Done" }), setTimeout(() => {
       l.current && a((o) => o.status === "ReadyWithFile" ? o : n ? { status: "ReadyWithFile", file: n } : { status: "Ready" });
     }, 2e3));
   }
   return /* @__PURE__ */ x(L, { children: [
-    u === "SingleSelectFile" && t.selection[0]?.type === "asset" && /* @__PURE__ */ c(j, { asset: t.selection[0].value, onChange: F }),
+    u === "SingleSelectFile" && t.selection[0]?.type === "asset" && /* @__PURE__ */ c(T, { asset: t.selection[0].value, onChange: F }),
     /* @__PURE__ */ c(
       A,
       {
@@ -71,7 +71,7 @@ function tt(t) {
         "data-testid": "add-button",
         isLoading: s.status === "Loading",
         children: /* @__PURE__ */ c(
-          B,
+          q,
           {
             status: s.status,
             numberOfSelectedItems: t.selection.length
@@ -85,5 +85,6 @@ function w(t, r, i) {
   return i ? !i.includes(t.id) && i.includes(r.id) ? 1 : i.includes(t.id) && !i.includes(r.id) ? -1 : i.indexOf(t.id) - i.indexOf(r.id) : 0;
 }
 export {
-  tt as AddMedia
+  tt as AddMedia,
+  w as sortAssets
 };

package/Advanced.js

@@ -1,21 +1,21 @@
-import { jsx as t, jsxs as c, Fragment as d } from "react/jsx-runtime";
+import { jsx as t, jsxs as d, Fragment as c } from "react/jsx-runtime";
 import o from "./styled-components.browser.esm.js";
 import { token as i } from "./token.js";
-import { IconAdjust as g } from "./index4.js";
-import { Dropdown as p } from "./Dropdown.js";
+import { IconAdjust as p } from "./index3.js";
+import { Dropdown as g } from "./Dropdown.js";
 import { __ as m } from "./index2.js";
 import { useConfig as l } from "./ConfigContext.js";
-import { Spinner as u } from "./Spinner.js";
-import { AssetTypeItem as f } from "./AssetTypeItem.js";
+import { Spinner as f } from "./Spinner.js";
+import { AssetTypeItem as u } from "./AssetTypeItem.js";
 function O(n) {
   const { assetTypes: r } = l(), s = r.filter(
     (e) => a(n.count, e) > 0
   );
-  return r.length === 0 || s.length === 0 ? null : /* @__PURE__ */ t(A, { title: /* @__PURE__ */ t(h, {}), isSmall: !0, fadeIn: !0, children: () => /* @__PURE__ */ c(d, { children: [
-    n.isLoading && /* @__PURE__ */ t(u, {}),
+  return r.length === 0 || s.length === 0 ? null : /* @__PURE__ */ t(A, { title: /* @__PURE__ */ t(h, {}), isSmall: !0, fadeIn: !0, "data-testid": "advanced-filter-dropdown", children: () => /* @__PURE__ */ d(c, { children: [
+    n.isLoading && /* @__PURE__ */ t(f, {}),
     /* @__PURE__ */ t($, { children: m("Type") }),
-    /* @__PURE__ */ t(y, { children: s.map((e) => /* @__PURE__ */ t(
-      f,
+    /* @__PURE__ */ t(w, { children: s.map((e) => /* @__PURE__ */ t(
+      u,
       {
         type: e,
         count: a(n.count, e),
@@ -26,7 +26,7 @@ function O(n) {
   ] }) });
 }
 function h() {
-  return /* @__PURE__ */ c(d, { children: [
+  return /* @__PURE__ */ d(c, { children: [
     /* @__PURE__ */ t(I, {}),
     m("Advanced")
   ] });
@@ -45,16 +45,16 @@ function a(n, r) {
       return n.archive;
   }
 }
-const A = o(p)``, $ = o.h1`
+const A = o(g)``, $ = o.h1`
 	padding: ${i.spacing5} ${i.spacing5} 0 ${i.spacing5};
 	margin: 0 0 ${i.spacing5} 0;
 	font-size: ${i.fontSize100};
-`, I = o(g)`
+`, I = o(p)`
 	display: inline;
 	margin-right: ${i.spacing3};
 	height: ${i.spacing6};
 	width: ${i.spacing6};
-`, y = o.ul`
+`, w = o.ul`
 	padding: 0;
 	margin: 0;
 	list-style: none;

package/App.js

@@ -1,37 +1,35 @@
-import { jsx as e, jsxs as n, Fragment as b } from "react/jsx-runtime";
-import { CollectionsView as F } from "./CollectionsView.js";
-import { CollectionView as I } from "./CollectionView.js";
-import { ConfigProvider as T, useConfig as V } from "./ConfigContext.js";
-import { AssetFilter as D } from "./AssetFilter.js";
-import { useLocalization as O } from "./index2.js";
+import { jsx as e, jsxs as s, Fragment as I } from "react/jsx-runtime";
+import { CollectionsView as T } from "./CollectionsView.js";
+import { CollectionView as V } from "./CollectionView.js";
+import { ConfigProvider as D, useConfig as F } from "./ConfigContext.js";
+import { AssetFilter as O } from "./AssetFilter.js";
+import { useLocalization as P } from "./index2.js";
 import { ShadowRoot as k } from "./ShadowRoot.js";
-import { AssetFilterProvider as y } from "./AssetFilterContext.js";
-import { SelectionProvider as E } from "./SelectionContext.js";
-import { ThemeStyles as M } from "./Theming.js";
-import { Toolbar as R } from "./Toolbar.js";
-import { AssetsView as U } from "./AssetsView.js";
-import { SelectionFooter as x } from "./SelectionFooter.js";
-import { Shield as j } from "./Shield.js";
-import { Dat as z } from "./Dat.js";
+import { ThemeStyles as y } from "./Theming.js";
+import { Toolbar as E } from "./Toolbar.js";
+import { AssetsView as M } from "./AssetsView.js";
+import { SelectionFooter as R } from "./SelectionFooter.js";
+import { Shield as U } from "./Shield.js";
+import { Dat as x } from "./Dat.js";
 import "./DatDropdownItem.js";
-import { useRouterSelectors as H } from "./useRouterStore.js";
-import { useClearCollectionOnPageChange as N } from "./useSearchStore.js";
-import { useDat as B } from "./useDatStore.js";
-import { StoreInitializer as G } from "./StoreInitializer.js";
-import { BrowserClient as L } from "./client.js";
-import { makeFetchTransport as _ } from "./fetch.js";
-import { defaultStackParser as q } from "./stack-parsers.js";
-import { Hub as J } from "./hub.js";
-let s;
-s = new L({
+import { useRouterSelectors as j } from "./useRouterStore.js";
+import { useClearCollectionOnPageChange as z } from "./useSearchStore.js";
+import { useDat as H } from "./useDatStore.js";
+import { StoreInitializer as N } from "./StoreInitializer.js";
+import { BrowserClient as B } from "./client.js";
+import { makeFetchTransport as G } from "./fetch.js";
+import { defaultStackParser as L } from "./stack-parsers.js";
+import { Hub as _ } from "./hub.js";
+let n;
+n = new B({
   dsn: "https://dd74b64cc05845468f0c3654b458da29@sentry10.bynder.cloud/464",
   autoSessionTracking: !0,
   tracesSampleRate: 1,
   integrations: [],
-  stackParser: q,
-  transport: _
-}), new J(s);
-function Ce({
+  stackParser: L,
+  transport: G
+}), new _(n);
+function ue({
   assetFieldSelection: o,
   assetFilter: r,
   assetTypes: c = ["IMAGE", "AUDIO", "VIDEO", "DOCUMENT", "ARCHIVE"],
@@ -42,18 +40,18 @@ function Ce({
   onSuccess: f = (i, { selectedFile: t }) => console.log(i, t),
   defaultImageDerivativeName: d,
   defaultVideoDerivativeName: u,
-  theme: h,
-  hideExternalAccess: g,
-  selectedAssets: S,
-  hideLimitedUse: C,
+  theme: g,
+  hideExternalAccess: h,
+  selectedAssets: C,
+  hideLimitedUse: S,
   isContainerMode: m = !1,
   __shouldAddOriginal__: w,
-  hideSwitch: v = !1,
-  noCache: A = !1,
-  selectAllOption: P = !1
+  hideSwitch: A = !1,
+  noCache: b = !1,
+  selectAllOption: v = !1
 }) {
-  O(l);
-  const { datUrl: i } = B(), t = {
+  P(l);
+  const { datUrl: i } = H(), t = {
     assetFieldSelection: o,
     assetFilter: r,
     assetTypes: c,
@@ -62,39 +60,42 @@ function Ce({
     defaultImageDerivativeName: d,
     defaultVideoDerivativeName: u,
     selectionMode: p,
-    theme: h,
-    hideExternalAccess: g,
+    theme: g,
+    hideExternalAccess: h,
     __shouldAddOriginal__: w,
-    hideSwitch: v,
-    noCache: A,
-    selectAllOption: P
+    hideSwitch: A,
+    noCache: b,
+    selectAllOption: v
   };
-  return /* @__PURE__ */ e(j, { sentryClient: s, children: /* @__PURE__ */ e(k, { isContainerMode: m, children: /* @__PURE__ */ e(y, { hideLimitedUse: C, predefinedFilter: r, children: /* @__PURE__ */ e(T, { value: t, children: /* @__PURE__ */ n(E, { preselectedAssetIds: S ?? [], children: [
+  return /* @__PURE__ */ e(U, { sentryClient: n, children: /* @__PURE__ */ e(k, { isContainerMode: m, children: /* @__PURE__ */ s(D, { value: t, children: [
     /* @__PURE__ */ e(
-      G,
+      N,
       {
         defaultSearchTerm: a,
-        resetOnMount: !m
+        resetOnMount: !m,
+        hideLimitedUse: S,
+        preselectedAssetIds: C,
+        predefinedFilter: r
       }
     ),
-    /* @__PURE__ */ e(M, { theme: t.theme }),
-    /* @__PURE__ */ n("div", { className: "cv-root cv-container", children: [
+    /* @__PURE__ */ e(y, { theme: t.theme }),
+    /* @__PURE__ */ s("div", { className: "cv-root cv-container", children: [
+      /* @__PURE__ */ e(E, {}),
+      /* @__PURE__ */ e(q, {}),
       /* @__PURE__ */ e(R, {}),
-      /* @__PURE__ */ e(K, {}),
-      /* @__PURE__ */ e(x, {}),
-      i && /* @__PURE__ */ e(z, {})
+      i && /* @__PURE__ */ e(x, {})
     ] })
-  ] }) }) }) }) });
+  ] }) }) });
 }
-function K() {
-  const o = H.use.page(), { assetFilter: r } = V();
-  return N(o), /* @__PURE__ */ n(b, { children: [
-    o.page !== "collections" && (r === void 0 || r && r.showToolbar) && /* @__PURE__ */ e(D, {}),
-    o.page === "assets" && /* @__PURE__ */ e(U, {}),
-    o.page === "collections" && /* @__PURE__ */ e(F, {}),
-    o.page === "collection" && /* @__PURE__ */ e(I, { collection: o.collection })
+function q() {
+  const o = j.use.page(), { assetFilter: r } = F();
+  return z(o), /* @__PURE__ */ s(I, { children: [
+    o.page !== "collections" && (r === void 0 || r && r.showToolbar) && /* @__PURE__ */ e(O, {}),
+    o.page === "assets" && /* @__PURE__ */ e(M, {}),
+    o.page === "collections" && /* @__PURE__ */ e(T, {}),
+    o.page === "collection" && /* @__PURE__ */ e(V, { collection: o.collection })
   ] });
 }
 export {
-  Ce as App
+  ue as App
 };

package/Arrow.js

@@ -1,6 +1,6 @@
 import { jsx as r } from "react/jsx-runtime";
 import i from "./styled-components.browser.esm.js";
-import { IconCaretDown as n } from "./index4.js";
+import { IconCaretDown as n } from "./index3.js";
 import { token as o } from "./token.js";
 function d(t) {
   return /* @__PURE__ */ r(c, { ...t, children: /* @__PURE__ */ r(n, {}) });

package/AssetFilter.js

@@ -3,40 +3,40 @@ import { useState as f, useEffect as C } from "react";
 import p from "./styled-components.browser.esm.js";
 import { Button as F } from "./Button.js";
 import { token as L } from "./token.js";
-import { IconMultiSelect as B, IconRectangle as E } from "./index4.js";
+import { IconMultiSelect as B, IconRectangle as E } from "./index3.js";
 import { useRouterSelectors as H } from "./useRouterStore.js";
-import { useAssetFilter as R } from "./AssetFilterContext.js";
-import { useLocalization as Q } from "./index2.js";
-import { useConfig as U } from "./ConfigContext.js";
-import { useGetFilters as V } from "./getFilters.js";
-import { useGetFilters as W } from "./getFilters_new.js";
+import { useLocalization as R } from "./index2.js";
+import { useConfig as Q } from "./ConfigContext.js";
+import { useGetFilters as U } from "./getFilters.js";
+import { useGetFilters as V } from "./getFilters_new.js";
 import { Skeleton as u } from "./Skeleton.js";
-import { HorizontalScroll as q } from "./HorizontalScroll.js";
-import { Tags as J } from "./Tags.js";
-import { Advanced as K } from "./Advanced.js";
-import { useSelection as X } from "./SelectionContext.js";
-import { useAuth as Y } from "./LoginContext.js";
-import { getAssetCounts as Z } from "./getAssetCounts.js";
-import { Smartfilter as _ } from "./Smartfilters_new.js";
-import { useSearchStateByPage as ee } from "./useSearchStore.js";
-import { useSimilaritySearchStore as te } from "./useSimilaritySearchStore.js";
+import { HorizontalScroll as W } from "./HorizontalScroll.js";
+import { Tags as q } from "./Tags.js";
+import { Advanced as J } from "./Advanced.js";
+import { useAuth as K } from "./LoginContext.js";
+import { getAssetCounts as X } from "./getAssetCounts.js";
+import { Smartfilter as Y } from "./Smartfilters_new.js";
+import { useSearchStateByPage as Z } from "./useSearchStore.js";
+import { useSimilaritySearchStore as _ } from "./useSimilaritySearchStore.js";
+import { useSelectionStore as ee } from "./useSelectionStore.js";
+import { useAssetFilterStore as te } from "./useAssetFilterStore.js";
 function Ie() {
-  const s = R(), t = H.use.page(), { value: i } = ee("assets"), {
+  const r = te(), t = H.use.page(), { value: i } = Z("assets"), {
     assetTypes: a,
     language: g,
     assetFilter: x,
     noCache: S,
     selectionMode: w,
     selectAllOption: T
-  } = U(), { clear: I, selectAll: b } = X(), N = Y(), [h, P] = f(t.page);
-  Q(g);
+  } = Q(), { clear: I, selectAll: b } = ee(), N = K(), [h, P] = f(t.page);
+  R(g);
   const [j, A] = f(!1), {
     isSelected: z,
     isNLSSelected: D,
     NLSSearchText: G
-  } = te(), [M, v] = f(!1), { data: l, isLoading: y } = V(
+  } = _(), [M, v] = f(!1), { data: l, isLoading: y } = U(
     {
-      filter: s,
+      filter: r,
       searchTerm: i || null,
       allAssetTypes: a,
       language: g,
@@ -44,26 +44,26 @@ function Ie() {
       collectionId: t.page === "collection" ? t.collection.id : null
     },
     S
-  ), { data: r } = W(S);
-  if (C(() => (t.page !== h && (P(t.page), s.clear()), () => {
-    s.clear();
+  ), { data: s } = V(S);
+  if (C(() => (t.page !== h && (P(t.page), r.clear()), () => {
+    r.clear();
   }), [h, t.page]), C(() => {
     let o = !1;
     return (async () => {
       v(!0);
       try {
-        const d = await Z({
+        const d = await X({
           auth: N,
           filter: {
             searchTerm: i,
             assetTypes: a,
             collectionId: t.page === "collection" ? t.collection.id : void 0,
-            tagNames: s.tags,
-            isLimitedUse: s.isLimited,
-            metaproperties: s.selectedSmartfilterOptions
+            tagNames: r.tags,
+            isLimitedUse: r.isLimited,
+            metaproperties: r.selectedSmartfilterOptions
           }
         });
-        o || s.setActiveFiltersState(d);
+        o || r.setActiveFiltersState(d);
       } catch (d) {
         o || console.error("Error fetching asset counts:", d);
       } finally {
@@ -72,9 +72,9 @@ function Ie() {
     })(), () => {
       o = !0;
     };
-  }, [s.tags, i, a, t.page, s.selectedSmartfilterOptions]), l.tag === "Failure" || !l.value || r.tag === "Failure" || r.tag === "Loading" || !r.value || M)
-    return /* @__PURE__ */ e(k, { children: /* @__PURE__ */ e(se, {}) });
-  const { tags: n, count: O } = l.value.searchAssets, { value: c } = r, $ = j ? /* @__PURE__ */ e(
+  }, [r.tags, i, a, t.page, r.selectedSmartfilterOptions]), l.tag === "Failure" || !l.value || s.tag === "Failure" || s.tag === "Loading" || !s.value || M)
+    return /* @__PURE__ */ e(k, { children: /* @__PURE__ */ e(re, {}) });
+  const { tags: n, count: O } = l.value.searchAssets, { value: c } = s, $ = j ? /* @__PURE__ */ e(
     F,
     {
       onClick: () => {
@@ -98,15 +98,15 @@ function Ie() {
     }
   );
   return z || D && G ? null : /* @__PURE__ */ m(k, { "data-testid": "filter-nav", children: [
-    /* @__PURE__ */ m(q, { children: [
-      c && c.filters.length > 0 && /* @__PURE__ */ e(_, { filterData: c }),
-      n && n.nodes.length > 0 && /* @__PURE__ */ e(J, { tags: n.nodes, isLoading: y }),
-      /* @__PURE__ */ e(K, { isLoading: y, count: O.assetType })
+    /* @__PURE__ */ m(W, { children: [
+      c && c.filters.length > 0 && /* @__PURE__ */ e(Y, { filterData: c }),
+      n && n.nodes.length > 0 && /* @__PURE__ */ e(q, { tags: n.nodes, isLoading: y }),
+      /* @__PURE__ */ e(J, { isLoading: y, count: O.assetType })
     ] }),
-    /* @__PURE__ */ e(re, { children: w === "MultiSelect" && T && t.page === "assets" && $ })
+    /* @__PURE__ */ e(se, { children: w === "MultiSelect" && T && t.page === "assets" && $ })
   ] });
 }
-function se() {
+function re() {
   return /* @__PURE__ */ m(oe, { children: [
     /* @__PURE__ */ e(u, { width: 100 }),
     /* @__PURE__ */ e(u, { width: 80 }),
@@ -119,7 +119,7 @@ const k = p.nav`
 	background-color: #fff;
 	padding: ${L.spacing3} ${L.spacing4};
 	z-index: 20;
-`, re = p.div`
+`, se = p.div`
 	display: flex;
 	align-items: center;
 

package/AssetItem.js

@@ -1,24 +1,17 @@
 import { jsxs as m, jsx as t } from "react/jsx-runtime";
 import i from "./styled-components.browser.esm.js";
-import { Thumbnail as s } from "./Thumbnail.js";
+import { Thumbnail as p } from "./Thumbnail.js";
 import { token as o } from "./token.js";
-import { getExtension as n, getThumbnail as l } from "./utils2.js";
-import { useSelection as p } from "./SelectionContext.js";
-import { SelectedItemContainer as a } from "./SelectedItemContainer.js";
+import { getExtension as r, getThumbnail as s } from "./utils2.js";
+import { SelectedItemContainer as l } from "./SelectedItemContainer.js";
+import { useSelectionStore as a } from "./useSelectionStore.js";
 function b({ asset: e }) {
-  const r = p();
-  return /* @__PURE__ */ m(
-    a,
-    {
-      title: e.name,
-      onRemove: () => r.toggleAssets([e]),
-      children: [
-        /* @__PURE__ */ t(c, { children: /* @__PURE__ */ t(s, { variant: "preview", imageUrl: l(e), size: "m" }) }),
-        /* @__PURE__ */ t(g, { children: e.name }),
-        n(e) && /* @__PURE__ */ t(h, { children: n(e) })
-      ]
-    }
-  );
+  const { toggleAssets: n } = a();
+  return /* @__PURE__ */ m(l, { title: e.name, onRemove: () => n([e]), children: [
+    /* @__PURE__ */ t(c, { children: /* @__PURE__ */ t(p, { variant: "preview", imageUrl: s(e), size: "m" }) }),
+    /* @__PURE__ */ t(g, { children: e.name }),
+    r(e) && /* @__PURE__ */ t(h, { children: r(e) })
+  ] });
 }
 const c = i.div`
 	margin-right: ${o.spacing4};