@orangelogic/design-system 2.60.0 → 2.61.0

package/library/chunks/{file-on-demand.Cwgabdyw.js → file-on-demand.B2jNilAj.js}

@@ -1,98 +1,105 @@
-import lt from "../components/icon.js";
-import dt from "../components/line-clamp.js";
-import { C as pt, s as ht, a as ut, b as Q } from "./tree.CUfvIDyA.js";
-import { n as p, C as Y, x as r, c as K, i as gt, E as bt } from "./custom-element.vnXBMQxc.js";
-import { c as xt } from "./component.styles.CI-v8BZa.js";
-import { L as Z } from "./i18n.BP2FRO1v.js";
-import { k as $t, h as mt, i as _t, w as L, j as wt, l as St, f as It, g as Ct, d as At, m as Dt, n as Tt } from "./watch.BCJD77bD.js";
-import { p as P } from "./string.BCk3SmdZ.js";
-import { r as x } from "./state.Cw55xXlb.js";
-import { e as R } from "./query.BBf1UFkC.js";
-import { e as A } from "./class-map.CoZTSvbM.js";
-import { c as F } from "./repeat.CauKaXyy.js";
-import { n as g } from "./when.Dr1es41R.js";
-import { a as zt, i as ft, c as Et, b as tt } from "./_baseUniq.BUihBa8c.js";
-import Lt from "../components/avatar.js";
-import { C as Rt } from "./button.CtCSNRB3.js";
-import { C as Pt } from "./dialog.B1TORO6S.js";
-import Ft from "../components/divider.js";
-import Ut from "../components/format-bytes.js";
-import kt from "../components/icon-button.js";
-import Ot from "../components/input.js";
-import { C as Nt } from "./option.D9KJhzHs.js";
-import jt from "../components/progress-bar.js";
-import Mt from "../components/relative-time.js";
-import { C as Bt } from "./select.DfO4de04.js";
-import Vt from "../components/space.js";
-import Ht from "../components/tab.js";
-import { C as Wt } from "./tab-group.5fLnWflv.js";
-import Gt from "../components/tab-panel.js";
-import qt from "../components/tooltip.js";
-import { C as Yt } from "./typography.BFpl0WMA.js";
-import { C as Kt } from "./confirm-popover.D2TF1x6K.js";
-import { d as Zt } from "./popup._w5T7x8f.js";
-import { a as H } from "./number.CjNxU7Xs.js";
-import { o as Xt } from "./style-map.CZovMmo_.js";
-import { a as Jt } from "./toString.CL_lYXbK.js";
-import { S as et, i as Qt } from "./isObjectLike.z36Fu426.js";
-function te(t, e, i, o) {
-  for (var s = -1, a = t == null ? 0 : t.length; ++s < a; ) {
+import J from "../components/icon.js";
+import Q from "../components/line-clamp.js";
+import { C as ft, s as vt, a as yt, b as lt } from "./tree.CNbrP8cY.js";
+import { n as d, C as H } from "./lib-cortex-element.CVMmyPMC.js";
+import { c as tt } from "./component.styles.DMSLciL5.js";
+import { c as W } from "./custom-element.L4WJXn1j.js";
+import { L as q } from "./i18n.DrzK7TPf.js";
+import { k as Dt, a as bt, i as $t, w as P, S as Tt, b as Pt, c as zt, d as Et, e as Ft, f as Lt } from "./watch.q1sEjPWL.js";
+import { p as R } from "./string.Cp_XNbnV.js";
+import { x as n, i as at, E as Ut } from "./lit-element.jLBm65_O.js";
+import { r as u } from "./state.CSDxrqLd.js";
+import { e as z } from "./query.BBf1UFkC.js";
+import { e as A } from "./class-map.BiVq-cVR.js";
+import { c as U } from "./repeat.DbF2p5ae.js";
+import { n as p } from "./when.Dr1es41R.js";
+import { a as Rt, c as kt, b as dt } from "./_baseUniq.Df-fLIBx.js";
+import Ot from "../components/avatar.js";
+import { C as Nt } from "./button.P71VJ5xh.js";
+import { C as jt } from "./dialog.C_75RVVz.js";
+import Bt from "../components/divider.js";
+import ot from "../components/format-bytes.js";
+import St from "../components/icon-button.js";
+import Mt from "../components/input.js";
+import { C as Vt } from "./option.D1u5-cTt.js";
+import It from "../components/relative-time.js";
+import Ht from "../components/select.js";
+import Wt from "../components/space.js";
+import qt from "../components/tab.js";
+import { C as Gt } from "./tab-group.DxSlcWK0.js";
+import Yt from "../components/tab-panel.js";
+import wt from "../components/tooltip.js";
+import { C as nt } from "./typography.oDzoLbZS.js";
+import { C as Kt } from "./confirm-popover.C1uA36JR.js";
+import { d as Xt } from "./debounce.DaHuiSGU.js";
+import { a as et } from "./number.CjNxU7Xs.js";
+import { i as K, a as ht } from "./url.LjsR2sB5.js";
+import { b as Zt } from "./_baseRest.ClTMQtN1.js";
+import { a as Jt } from "./toString.CRT5zqEU.js";
+import { S as pt, i as Qt } from "./isObjectLike.D3cpZO39.js";
+import te from "../components/progress-bar.js";
+import ee from "../components/spinner.js";
+import { o as se } from "./style-map.llVFPd__.js";
+import { r as ie } from "./choose.BTbF6BAn.js";
+function ae(t, e, i, a) {
+  for (var s = -1, o = t == null ? 0 : t.length; ++s < o; ) {
     var l = t[s];
-    e(o, l, i(l), t);
+    e(a, l, i(l), t);
   }
-  return o;
+  return a;
 }
-function ee(t) {
-  return function(e, i, o) {
-    for (var s = -1, a = Object(e), l = o(e), d = l.length; d--; ) {
-      var m = l[++s];
-      if (i(a[m], m, a) === !1)
+function oe(t) {
+  return function(e, i, a) {
+    for (var s = -1, o = Object(e), l = a(e), h = l.length; h--; ) {
+      var _ = l[++s];
+      if (i(o[_], _, o) === !1)
         break;
     }
     return e;
   };
 }
-var se = ee();
-function ie(t, e) {
-  return t && se(t, e, $t);
+var ne = oe();
+function re(t, e) {
+  return t && ne(t, e, Dt);
 }
-function oe(t, e) {
-  return function(i, o) {
+function ce(t, e) {
+  return function(i, a) {
     if (i == null)
       return i;
-    if (!mt(i))
-      return t(i, o);
-    for (var s = i.length, a = -1, l = Object(i); ++a < s && o(l[a], a, l) !== !1; )
+    if (!bt(i))
+      return t(i, a);
+    for (var s = i.length, o = -1, l = Object(i); ++o < s && a(l[o], o, l) !== !1; )
       ;
     return i;
   };
 }
-var ae = oe(ie);
-function re(t, e, i, o) {
-  return ae(t, function(s, a, l) {
-    e(o, s, i(s), l);
-  }), o;
+var le = ce(re);
+function de(t, e, i, a) {
+  return le(t, function(s, o, l) {
+    e(a, s, i(s), l);
+  }), a;
 }
-function ne(t, e) {
-  return function(i, o) {
-    var s = _t(i) ? te : re, a = e ? e() : {};
-    return s(i, t, zt(o), a);
+function he(t, e) {
+  return function(i, a) {
+    var s = $t(i) ? ae : de, o = e ? e() : {};
+    return s(i, t, Rt(a), o);
   };
 }
-var ce = ne(function(t, e, i) {
+var pe = he(function(t, e, i) {
   t[i ? 0 : 1].push(e);
 }, function() {
   return [[], []];
 });
-const le = {
+const ue = {
   error: "Upload error",
   loaded: "Up-to-date",
   loading: "Syncing"
-}, b = {
+}, x = {
   FAVORITES: "favorites",
+  PINNED: "pinned",
   RECENT: "recent",
   UPLOADS: "uploads"
-}, W = 20, de = {
+}, X = 20, ge = {
   GET_CONTENT: "/webapi/extensibility/integrations/contentBrowserSDK/getcontent_4bw_v1"
 }, C = {
   ASSET_PATH: "Document.AssetPath",
@@ -102,53 +109,53 @@ const le = {
   HAS_BROWSER_CHILDREN: "Document.HasBrowserChildren",
   PARENT_FOLDER_IDENTIFIER: "Document.ParentRecordID",
   TITLE_WITH_FALLBACK: "CoreField.TitleWithFallback"
-}, B = "GB", U = 6e4, pe = ["album", "story", "project", "merchandise"], st = (t) => {
+}, Z = "GB", O = 6e4, xe = ["album", "story", "project", "merchandise"], ut = (t) => {
   const e = /* @__PURE__ */ new Date(), i = new Date(
     e.getFullYear(),
     e.getMonth(),
     e.getDate()
-  ).getTime(), o = new Date(
+  ).getTime(), a = new Date(
     e.getFullYear(),
     e.getMonth(),
     e.getDate() + 1
   ).getTime();
-  return ce(
-    t.toSorted((s, a) => a.uploadTimestamp - s.uploadTimestamp),
-    (s) => s.uploadTimestamp >= i && s.uploadTimestamp < o
+  return pe(
+    t.toSorted((s, o) => o.uploadTimestamp - s.uploadTimestamp),
+    (s) => s.uploadTimestamp >= i && s.uploadTimestamp < a
   );
-}, he = ({
+}, me = ({
   excludesRecordIDs: t,
   searchText: e
 }) => {
   let i = "";
   e?.trim() && (i = `Story_Title:${e}`);
-  let o = "";
-  t?.length && (o = t.map((a) => `RecordID:NOT ${a}`).join(" AND "));
+  let a = "";
+  t?.length && (a = t.map((o) => `RecordID:NOT ${o}`).join(" AND "));
   let s = i ? ` AND (${[i].filter(Boolean).join(" OR ")})` : "";
-  return o && (s = `${s} AND (${o})`), `(MediaType:Story OR MediaType:Album)${s}`;
-}, ue = 10, vt = async ({
+  return a && (s = `${s} AND (${a})`), `(MediaType:Story OR MediaType:Album)${s}`;
+}, _e = 10, Ct = async ({
   excludes: t = [],
   folderId: e,
   folderPath: i = [],
-  folderPathsSet: o,
-  limit: s = ue,
-  searchText: a,
+  folderPathsSet: a,
+  limit: s = _e,
+  searchText: o,
   seeThru: l,
-  siteUrl: d,
-  start: m = 0,
-  token: u
+  siteUrl: h,
+  start: _ = 0,
+  token: m
 }) => {
-  if (!d)
+  if (!h)
     return { data: [], totalCount: 0 };
-  let h = d;
-  h.endsWith("/") && (h = h.slice(0, -1));
-  const f = de.GET_CONTENT, _ = [
-    ["Token", u],
+  let g = h;
+  g.endsWith("/") && (g = g.slice(0, -1));
+  const b = ge.GET_CONTENT, f = [
+    ["Token", m],
     [
       "extraFilters",
-      he({
+      me({
         excludesRecordIDs: t,
-        searchText: a
+        searchText: o
       })
     ],
     ["fields", C.ASSET_PATH],
@@ -159,63 +166,63 @@ const le = {
     ["fields", C.PARENT_FOLDER_IDENTIFIER],
     ["fields", C.CHILD_COUNT],
     ["objectRecordID", e],
-    ["seeThru", a?.trim() || l ? "true" : "false"],
+    ["seeThru", o?.trim() || l ? "true" : "false"],
     ["limit", s.toString()],
-    ["start", m.toString()]
-  ], z = new URL(`${h}${f}`);
-  _.forEach(([S, E]) => {
-    z.searchParams.append(S, E);
+    ["start", _.toString()]
+  ], L = new URL(`${g}${b}`);
+  f.forEach(([w, E]) => {
+    L.searchParams.append(w, E);
   });
-  const I = await fetch(z.toString(), {
+  const k = await fetch(L.toString(), {
     headers: {
-      Authorization: `Bearer ${u}`
+      Authorization: `Bearer ${m}`
     },
     method: "GET"
   });
-  if (!I.ok) {
-    const S = new Error();
-    throw S.message = "Failed to fetch", S;
-  }
-  const j = await I.json();
-  let M = /* @__PURE__ */ new Set();
-  o && (M = me(o));
-  const X = j.contentItems?.map((S) => {
-    let E = N(
-      S.fields,
+  if (!k.ok) {
+    const w = new Error();
+    throw w.message = "Failed to fetch", w;
+  }
+  const G = await k.json();
+  let Y = /* @__PURE__ */ new Set();
+  a && (Y = ye(a));
+  const rt = G.contentItems?.map((w) => {
+    let E = M(
+      w.fields,
       C.TITLE_WITH_FALLBACK
-    ) ?? "", O = xe(
-      (N(
-        S.fields,
+    ) ?? "", B = ve(
+      (M(
+        w.fields,
         C.ASSET_PATH
       ) ?? "").replace(/^Root\//i, "")
     ) || E;
-    if (o) {
-      if (o.has(O)) {
-        const J = O.split("/"), yt = J.pop();
-        O = `${J.join("/")}/${S.recordID}-${yt}`, E = `${S.recordID}-${E}`;
+    if (a) {
+      if (a.has(B)) {
+        const ct = B.split("/"), At = ct.pop();
+        B = `${ct.join("/")}/${w.recordID}-${At}`, E = `${w.recordID}-${E}`;
       }
-      a?.trim() && M.has(E) && (E = O), o.add(O), M.add(E);
+      o?.trim() && Y.has(E) && (E = B), a.add(B), Y.add(E);
     }
     return {
       childCount: Number(
-        N(
-          S.fields,
+        M(
+          w.fields,
           C.CHILD_COUNT
         ) ?? 0
       ),
       children: [],
-      docType: N(
-        S.fields,
+      docType: M(
+        w.fields,
         C.DOC_TYPE
       ) ?? "",
-      fullPath: O,
-      hasChildren: N(
-        S.fields,
+      fullPath: B,
+      hasChildren: M(
+        w.fields,
         C.HAS_BROWSER_CHILDREN
       ) === "1",
-      id: S.recordID,
-      parentFolderIdentifier: N(
-        S.fields,
+      id: w.recordID,
+      parentFolderIdentifier: M(
+        w.fields,
         C.PARENT_FOLDER_IDENTIFIER
       ) ?? "",
       parents: [],
@@ -223,49 +230,52 @@ const le = {
       title: E
     };
   }) ?? [];
-  return { data: X, totalCount: j.totalCount ?? X.length };
+  return { data: rt, totalCount: G.totalCount ?? rt.length };
 };
-function N(t, e) {
-  const i = e.toLowerCase(), o = Object.keys(t).find(
+function M(t, e) {
+  const i = e.toLowerCase(), a = Object.keys(t).find(
     (s) => s.toLowerCase() === i
   );
-  return o ? t[o] : void 0;
+  return a ? t[a] : void 0;
 }
-const q = "-", $ = (t) => {
-  const e = t.split(q), i = e.pop() ?? "", o = e.join(q);
-  return { id: i, path: o };
-}, k = ({ id: t, path: e }) => [e, t].join(q), ge = (t) => {
+const it = "-", S = (t) => {
+  const e = t.split(it), i = e.pop() ?? "", a = e.join(it);
+  return { id: i, path: a };
+}, N = ({ id: t, path: e }) => [e, t].join(it), fe = (t) => {
   const e = t.split(".");
   return e.length > 1 ? e.pop() ?? "" : "";
-}, it = (t) => {
+}, gt = (t) => {
   const e = t.match(/(?:V\.?)?(\d+(?:\.\d+)*)/);
   return e ? e[1] : "";
-}, ot = (t, e) => {
+}, xt = (t, e) => {
   let i = e?.trim();
-  const o = e ? e.split("/").length : 0;
-  return (t ? t.length : 0) >= o && (i = t.join("/") ?? ""), i;
-}, xe = (t) => t.split("/").map((e) => e.trim()).join("/"), me = (t) => {
+  const a = e ? e.split("/").length : 0;
+  return (t ? t.length : 0) >= a && (i = t.join("/") ?? ""), i;
+}, ve = (t) => t.split("/").map((e) => e.trim()).join("/"), ye = (t) => {
   const e = /* @__PURE__ */ new Set();
   for (const i of t) {
-    const o = i.split("/"), s = o[o.length - 1];
+    const a = i.split("/"), s = a[a.length - 1];
     s && e.add(s);
   }
   return e;
-}, _e = (t, e) => {
-  const i = t.split("/"), o = e.split("/");
-  return i.slice(0, o.length + 1).join("/");
+}, be = (t, e) => {
+  const i = t.split("/"), a = e.split("/");
+  return i.slice(0, a.length + 1).join("/");
 };
-var fe = Object.defineProperty, ve = Object.getOwnPropertyDescriptor, D = (t, e, i, o) => {
-  for (var s = o > 1 ? void 0 : o ? ve(e, i) : e, a = t.length - 1, l; a >= 0; a--)
-    (l = t[a]) && (s = (o ? l(e, i, s) : l(s)) || s);
-  return o && s && fe(e, i, s), s;
+function mt(t) {
+  return t.toSorted((e, i) => i.uploadTimestamp - e.uploadTimestamp);
+}
+var $e = Object.defineProperty, Se = Object.getOwnPropertyDescriptor, D = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? Se(e, i) : e, o = t.length - 1, l; o >= 0; o--)
+    (l = t[o]) && (s = (a ? l(e, i, s) : l(s)) || s);
+  return a && s && $e(e, i, s), s;
 };
-let v = class extends Y {
+let v = class extends H {
   constructor() {
-    super(...arguments), this.localize = new Z(this), this.role = "treeitem", this.siteUrl = "", this.token = "", this.searchText = "", this.folder = null, this.currentRootIDsSet = /* @__PURE__ */ new Set(), this.folderPathsSet = /* @__PURE__ */ new Set(), this.removedIDs = [], this.data = null, this.totalCount = 0, this.isLoading = !1, this.fetchFolders = async ({
+    super(...arguments), this.localize = new q(this), this.role = "treeitem", this.siteUrl = "", this.token = "", this.searchText = "", this.folder = null, this.currentRootIDsSet = /* @__PURE__ */ new Set(), this.folderPathsSet = /* @__PURE__ */ new Set(), this.removedIDs = [], this.data = null, this.totalCount = 0, this.isLoading = !1, this.fetchFolders = async ({
       folderId: t,
       start: e = 0
-    }) => await vt({
+    }) => await Ct({
       folderId: t,
       folderPath: this.folder?.path ?? [],
       folderPathsSet: this.folderPathsSet,
@@ -278,11 +288,11 @@ let v = class extends Y {
       if (e >= this.totalCount)
         return;
       this.isLoading = !0;
-      const { data: i, totalCount: o } = await this.fetchFolders({
+      const { data: i, totalCount: a } = await this.fetchFolders({
         folderId: this.folder?.id ?? "",
         start: e
       });
-      this.data = [...this.data ?? [], ...i], this.totalCount = o, this.isLoading = !1;
+      this.data = [...this.data ?? [], ...i], this.totalCount = a, this.isLoading = !1;
     }, this.onLazyLoad = async (t) => {
       if (t.target !== this.treeItem)
         return;
@@ -290,10 +300,10 @@ let v = class extends Y {
         folderId: this.folder?.id ?? ""
       });
       if (this.data = e, this.totalCount = i, await this.updateComplete, !this.treeItem.selected && !this.treeItem.indeterminate) {
-        let o = !0, s = !0;
-        for (const a of this.treeItem.getChildrenItems())
-          a.selected ? (ht(a, !0, "multiple"), s = !1) : o = !1;
-        this.treeItem.indeterminate = !o && !s;
+        let a = !0, s = !0;
+        for (const o of this.treeItem.getChildrenItems())
+          o.selected ? (vt(o, !0, "multiple"), s = !1) : a = !1;
+        this.treeItem.indeterminate = !a && !s;
       }
     };
   }
@@ -326,52 +336,52 @@ let v = class extends Y {
     if (await this.updateComplete, !this.treeItem)
       return;
     let t = !1;
-    const e = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Set(), o = ot(this.folder?.path ?? [], this.folder?.fullPath ?? ""), s = [...this.currentRootIDsSet], a = (u, h) => {
-      u.forEach((f) => {
-        const _ = $(f);
-        if (!_.path.trim() || !_.id.trim())
+    const e = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Set(), a = xt(this.folder?.path ?? [], this.folder?.fullPath ?? ""), s = [...this.currentRootIDsSet], o = (m, g) => {
+      m.forEach((b) => {
+        const f = S(b);
+        if (!f.path.trim() || !f.id.trim())
           return !1;
-        const z = P(_.path), I = P(o);
-        o && z.startsWith(I) && z !== I && h.add(_e(_.path, o));
+        const L = R(f.path), k = R(a);
+        a && L.startsWith(k) && L !== k && g.add(be(f.path, a));
       });
     };
-    a(this.removedIDs, i), a(s, e);
-    let l = !!s.some((u) => {
-      const h = $(u);
-      if (!h.path.trim() || !h.id.trim())
+    o(this.removedIDs, i), o(s, e);
+    let l = !!s.some((m) => {
+      const g = S(m);
+      if (!g.path.trim() || !g.id.trim())
         return !1;
-      const f = k({
+      const b = N({
         id: this.folder?.id ?? "",
-        path: o
-      }), _ = P(h.path), z = P(o), I = h.id === this.folder?.id, j = !this.removedIDs.includes(f) && z.startsWith(_);
-      return I || j;
+        path: a
+      }), f = R(g.path), L = R(a), k = g.id === this.folder?.id, G = !this.removedIDs.includes(b) && L.startsWith(f);
+      return k || G;
     });
-    const d = this.folder?.childCount && e.size === this.folder?.childCount;
+    const h = this.folder?.childCount && e.size === this.folder?.childCount;
     if (this.folder?.childCount && i.size === this.folder?.childCount) {
       this.currentRootIDsSet.delete(
-        k({
+        N({
           id: this.folder?.id ?? "",
-          path: o
+          path: a
         })
       );
-      const u = this.parentElement?.parentElement;
-      u && u instanceof v && u.syncBoxes(), l = !1;
+      const m = this.parentElement?.parentElement;
+      m && m instanceof v && m.syncBoxes(), l = !1;
     } else if (!l)
-      if (d) {
+      if (h) {
         this.currentRootIDsSet.add(
-          k({
+          N({
             id: this.folder?.id ?? "",
-            path: o
+            path: a
           })
         );
-        const u = this.parentElement?.parentElement;
-        u && u instanceof v && u.syncBoxes(), l = !0;
+        const m = this.parentElement?.parentElement;
+        m && m instanceof v && m.syncBoxes(), l = !0;
       } else e.size > 0 && (t = !0);
     l ? (t = i.size > 0, this.treeItem.selected = !0) : (t = e.size > 0, this.treeItem.selected = !1, await this.treeItem.updateComplete), t ? (this.treeItem.selected = !1, await this.treeItem.updateComplete, this.treeItem.indeterminate = !0) : this.treeItem.indeterminate = !1;
   }
   render() {
-    const t = ot(this.folder?.path ?? [], this.folder?.fullPath ?? "");
-    return r`
+    const t = xt(this.folder?.path ?? [], this.folder?.fullPath ?? "");
+    return n`
       <cx-tree-item
         aria-label=${this.folder?.title ?? ""}
         class=${A({
@@ -389,10 +399,10 @@ let v = class extends Y {
             ${this.folder?.title}
           </cx-line-clamp>
         </div>
-        ${F(
+        ${U(
       this.data ?? [],
       (e) => e.id,
-      (e) => r`<cx-folder-item
+      (e) => n`<cx-folder-item
               slot="children"
               .folder=${e}
               .siteUrl=${this.siteUrl}
@@ -402,9 +412,9 @@ let v = class extends Y {
               .folderPathsSet=${this.folderPathsSet}
             ></cx-folder-item>`
     )}
-        ${g(
+        ${p(
       this.data && this.data.length < this.totalCount,
-      () => r`
+      () => n`
             <div slot="children" class="load-more-button">
               <cx-button
                 data-testid="load-more-button"
@@ -421,64 +431,66 @@ let v = class extends Y {
     `;
   }
 };
-v.styles = [xt];
+v.styles = [tt];
 v.dependencies = {
-  "cx-icon": lt,
-  "cx-line-clamp": dt,
-  "cx-tree-item": pt
+  "cx-icon": J,
+  "cx-line-clamp": Q,
+  "cx-tree-item": ft
 };
 D([
-  R("cx-tree-item")
+  z("cx-tree-item")
 ], v.prototype, "treeItem", 2);
 D([
-  p({
+  d({
     attribute: "site-url",
-    reflect: !0
+    reflect: !0,
+    type: String
   })
 ], v.prototype, "siteUrl", 2);
 D([
-  p({ reflect: !0, type: String })
+  d({ reflect: !0, type: String })
 ], v.prototype, "token", 2);
 D([
-  p({ attribute: "search-text", reflect: !0, type: String })
+  d({ attribute: "search-text", reflect: !0, type: String })
 ], v.prototype, "searchText", 2);
 D([
-  p()
+  d({ type: Object })
 ], v.prototype, "folder", 2);
 D([
-  p({
+  d({
     attribute: "current-root-ids-set",
     type: Object
   })
 ], v.prototype, "currentRootIDsSet", 2);
 D([
-  p({ attribute: "folder-paths-set" })
+  d({ attribute: "folder-paths-set", type: Object })
 ], v.prototype, "folderPathsSet", 2);
 D([
-  p({
+  d({
     attribute: "removed-ids",
     converter: {
       fromAttribute: (t) => t.split(" "),
       toAttribute: (t) => t.join(" ")
-    }
+    },
+    type: String
   })
 ], v.prototype, "removedIDs", 2);
 D([
-  x()
+  u()
 ], v.prototype, "data", 2);
 D([
-  x()
+  u()
 ], v.prototype, "totalCount", 2);
 D([
-  x()
+  u()
 ], v.prototype, "isLoading", 2);
 D([
-  L(["currentRootIDsSet", "removedIDs"])
+  P(["currentRootIDsSet", "removedIDs"])
 ], v.prototype, "syncBoxes", 1);
 v = D([
-  K("cx-folder-item")
+  W("cx-folder-item")
 ], v);
-const ye = gt`
+const Ie = at`
   .folder-tree {
     overflow: auto;
     flex: 1;
@@ -533,15 +545,15 @@ const ye = gt`
     line-height: var(--cx-line-height-small);
   }
 `;
-var be = Object.defineProperty, $e = Object.getOwnPropertyDescriptor, w = (t, e, i, o) => {
-  for (var s = o > 1 ? void 0 : o ? $e(e, i) : e, a = t.length - 1, l; a >= 0; a--)
-    (l = t[a]) && (s = (o ? l(e, i, s) : l(s)) || s);
-  return o && s && be(e, i, s), s;
+var we = Object.defineProperty, Ce = Object.getOwnPropertyDescriptor, I = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? Ce(e, i) : e, o = t.length - 1, l; o >= 0; o--)
+    (l = t[o]) && (s = (a ? l(e, i, s) : l(s)) || s);
+  return a && s && we(e, i, s), s;
 };
-let y = class extends Y {
+let y = class extends H {
   constructor() {
-    super(...arguments), this.localize = new Z(this), this.role = "tree", this.siteUrl = "", this.bearerToken = "", this.token = "", this.searchText = "", this.folders = [], this.rootIDs = [], this.totalCount = 0, this.loadMore = () => {
-    }, this.isLoading = !1, this.folderPathsSet = /* @__PURE__ */ new Set(), this.removedIDs = [], this.currentRootIDsSet = /* @__PURE__ */ new Set(), this.renderFolder = (t) => r`<cx-folder-item
+    super(...arguments), this.localize = new q(this), this.role = "tree", this.siteUrl = "", this.bearerToken = "", this.token = "", this.searchText = "", this.folders = [], this.rootIDs = [], this.totalCount = 0, this.loadMore = () => {
+    }, this.isLoading = !1, this.folderPathsSet = /* @__PURE__ */ new Set(), this.removedIDs = [], this.currentRootIDsSet = /* @__PURE__ */ new Set(), this.renderFolder = (t) => n`<cx-folder-item
       .currentRootIDsSet=${this.currentRootIDsSet}
       .folder=${t}
       .folderPathsSet=${this.folderPathsSet}
@@ -561,7 +573,7 @@ let y = class extends Y {
   resetTree() {
     this.currentRootIDsSet = new Set(this.rootIDs), this.tree.querySelectorAll("cx-folder-item").forEach((t) => {
       t.selected = this.currentRootIDsSet.has(
-        k({
+        N({
           id: t.id,
           path: t.dataset.path ?? ""
         })
@@ -569,38 +581,38 @@ let y = class extends Y {
     });
   }
   async handleSelectedChange(t) {
-    const e = t.target, i = e.dataset.id ?? "", o = e.dataset.path ?? "";
-    if (await e.updateComplete, !i.trim() || !o.trim())
+    const e = t.target, i = e.dataset.id ?? "", a = e.dataset.path ?? "";
+    if (await e.updateComplete, !i.trim() || !a.trim())
       return;
-    const s = k({
+    const s = N({
       id: i,
-      path: o
+      path: a
     });
     if (!(e.indeterminate && !e.selected)) {
       if (e.selected) {
         if (!this.currentRootIDsSet.has(s)) {
-          Q(e, "multiple"), this.currentRootIDsSet.add(s);
-          for (const a of e.getChildrenItems())
-            !a.id.trim() || !a.dataset.path?.trim() || this.currentRootIDsSet.add(
-              k({
-                id: a.id,
-                path: a.dataset.path ?? ""
+          lt(e, "multiple"), this.currentRootIDsSet.add(s);
+          for (const o of e.getChildrenItems())
+            !o.id.trim() || !o.dataset.path?.trim() || this.currentRootIDsSet.add(
+              N({
+                id: o.id,
+                path: o.dataset.path ?? ""
               })
             );
         }
         this.removedIDs = this.removedIDs.filter(
-          (a) => a !== s && !$(a).path.startsWith(o + "/")
+          (o) => o !== s && !S(o).path.startsWith(a + "/")
         );
       } else
-        this.removedIDs.push(s), this.currentRootIDsSet.has(s) && (this.currentRootIDsSet.delete(s), Q(e, "multiple"));
-      [...this.currentRootIDsSet].forEach((a) => {
-        const l = P(o), d = $(a).path, m = P(d);
-        m.startsWith(l) && m !== l && (e.selected || this.currentRootIDsSet.delete(a));
+        this.removedIDs.push(s), this.currentRootIDsSet.has(s) && (this.currentRootIDsSet.delete(s), lt(e, "multiple"));
+      [...this.currentRootIDsSet].forEach((o) => {
+        const l = R(a), h = S(o).path, _ = R(h);
+        _.startsWith(l) && _ !== l && (e.selected || this.currentRootIDsSet.delete(o));
       }), this.currentRootIDsSet = new Set(this.currentRootIDsSet);
     }
   }
   render() {
-    return r`
+    return n`
       <div class="folder-tree selectable">
         <cx-tree
           class=${A({
@@ -611,14 +623,14 @@ let y = class extends Y {
           disabled-auto-expand
           disabled-sync-checkboxes
         >
-          ${F(
+          ${U(
       this.folders,
       (t) => t.id,
       (t) => this.renderFolder(t)
     )}
-          ${g(
+          ${p(
       this.folders && this.folders.length < this.totalCount,
-      () => r`
+      () => n`
               <div class="load-more-button">
                 <cx-button
                   variant="text"
@@ -635,361 +647,1078 @@ let y = class extends Y {
     `;
   }
 };
-y.styles = [xt, ye];
+y.styles = [tt, Ie];
 y.dependencies = {
   "cx-folder-item": v,
-  "cx-tree": ut
+  "cx-tree": yt
 };
-w([
-  R("cx-tree")
+I([
+  z("cx-tree")
 ], y.prototype, "tree", 2);
-w([
-  p({ attribute: "site-url", reflect: !0, type: String })
+I([
+  d({ attribute: "site-url", reflect: !0, type: String })
 ], y.prototype, "siteUrl", 2);
-w([
-  p({ attribute: "bearer-token", reflect: !0, type: String })
+I([
+  d({ attribute: "bearer-token", reflect: !0, type: String })
 ], y.prototype, "bearerToken", 2);
-w([
-  p({ attribute: "token", reflect: !0, type: String })
+I([
+  d({ attribute: "token", reflect: !0, type: String })
 ], y.prototype, "token", 2);
-w([
-  p({ attribute: "search-text", reflect: !0, type: String })
+I([
+  d({ attribute: "search-text", reflect: !0, type: String })
 ], y.prototype, "searchText", 2);
-w([
-  p({ type: Array })
+I([
+  d({ type: Array })
 ], y.prototype, "folders", 2);
-w([
-  p({ attribute: "root-ids", reflect: !0, type: Array })
+I([
+  d({ attribute: "root-ids", reflect: !0, type: Array })
 ], y.prototype, "rootIDs", 2);
-w([
-  p({ attribute: "total-count", reflect: !0, type: Number })
+I([
+  d({ attribute: "total-count", reflect: !0, type: Number })
 ], y.prototype, "totalCount", 2);
-w([
-  p({ attribute: "load-more", type: Function })
+I([
+  d({ attribute: "load-more", type: Function })
 ], y.prototype, "loadMore", 2);
-w([
-  p({ attribute: "is-loading", reflect: !0, type: Boolean })
+I([
+  d({ attribute: "is-loading", reflect: !0, type: Boolean })
 ], y.prototype, "isLoading", 2);
-w([
-  p({ attribute: "folder-paths-set" })
+I([
+  d({ attribute: "folder-paths-set", type: Object })
 ], y.prototype, "folderPathsSet", 2);
-w([
-  x()
+I([
+  u()
 ], y.prototype, "removedIDs", 2);
-w([
-  x()
+I([
+  u()
 ], y.prototype, "currentRootIDsSet", 2);
-w([
-  L("rootIDs")
+I([
+  P("rootIDs")
 ], y.prototype, "handleRootIDsChange", 1);
-y = w([
-  K("cx-folder-tree")
+y = I([
+  W("cx-folder-tree")
 ], y);
-var T = /* @__PURE__ */ ((t) => (t.Canceled = "CANCELED", t.Failed = "FAILED", t.InProgress = "INPROGRESS", t.PendingComplete = "PENDINGCOMPLETE", t.Success = "SUCCESS", t))(T || {});
-const at = (t, e = "https://", i = !1) => i && t.match(we) || t.match(/^[a-zA-Z][a-zA-Z\d+\-.]*:\/\//) ? t : `${e}${t}`, V = (t) => {
-  try {
-    return new URL(t), new RegExp(Se, "i").test(t);
-  } catch {
-    return !1;
-  }
-}, we = "^(?![a-zA-Z][a-zA-Z\\d+\\-.]*:\\/\\/)(?!([a-zA-Z0-9-]+\\.)+[a-zA-Z]{2,}($|\\/))[^\\s]+$", Se = "^(https?:\\/\\/)?((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|((\\d{1,3}\\.){3}\\d{1,3}))(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*(\\?[;&a-z\\d%_.~+=-]*)?(\\#[^\\s]*)?$", As = "^(https?:\\/\\/)?((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.){2,}[a-z]{2,}|((\\d{1,3}\\.){3}\\d{1,3}))(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*(\\?[;&a-z\\d%_.~+=-]*)?(\\#[^\\s]*)?$";
-function Ie(t, e, i) {
-  switch (i.length) {
-    case 0:
-      return t.call(e);
-    case 1:
-      return t.call(e, i[0]);
-    case 2:
-      return t.call(e, i[0], i[1]);
-    case 3:
-      return t.call(e, i[0], i[1], i[2]);
-  }
-  return t.apply(e, i);
-}
-var rt = Math.max;
-function Ce(t, e, i) {
-  return e = rt(e === void 0 ? t.length - 1 : e, 0), function() {
-    for (var o = arguments, s = -1, a = rt(o.length - e, 0), l = Array(a); ++s < a; )
-      l[s] = o[e + s];
-    s = -1;
-    for (var d = Array(e + 1); ++s < e; )
-      d[s] = o[s];
-    return d[e] = i(l), Ie(t, this, d);
-  };
-}
-function Ae(t) {
-  return function() {
-    return t;
-  };
-}
-var nt = function() {
-  try {
-    var t = wt(Object, "defineProperty");
-    return t({}, "", {}), t;
-  } catch {
-  }
-}(), De = nt ? function(t, e) {
-  return nt(t, "toString", {
-    configurable: !0,
-    enumerable: !1,
-    value: Ae(e),
-    writable: !0
-  });
-} : ft, Te = 800, ze = 16, Ee = Date.now;
-function Le(t) {
-  var e = 0, i = 0;
-  return function() {
-    var o = Ee(), s = ze - (o - i);
-    if (i = o, s > 0) {
-      if (++e >= Te)
-        return arguments[0];
-    } else
-      e = 0;
-    return t.apply(void 0, arguments);
-  };
-}
-var Re = Le(De);
-function Pe(t, e) {
-  return Re(Ce(t, e, ft), t + "");
-}
-var Fe = 200;
-function Ue(t, e, i, o) {
-  var s = -1, a = Et, l = !0, d = t.length, m = [], u = e.length;
-  if (!d)
-    return m;
-  i && (e = Jt(e, St(i))), e.length >= Fe && (a = Ct, l = !1, e = new It(e));
+var Ae = 200;
+function De(t, e, i, a) {
+  var s = -1, o = kt, l = !0, h = t.length, _ = [], m = e.length;
+  if (!h)
+    return _;
+  i && (e = Jt(e, Pt(i))), e.length >= Ae && (o = zt, l = !1, e = new Tt(e));
   t:
-    for (; ++s < d; ) {
-      var h = t[s], f = i == null ? h : i(h);
-      if (h = h !== 0 ? h : 0, l && f === f) {
-        for (var _ = u; _--; )
-          if (e[_] === f)
+    for (; ++s < h; ) {
+      var g = t[s], b = i == null ? g : i(g);
+      if (g = g !== 0 ? g : 0, l && b === b) {
+        for (var f = m; f--; )
+          if (e[f] === b)
             continue t;
-        m.push(h);
-      } else a(e, f, o) || m.push(h);
+        _.push(g);
+      } else o(e, b, a) || _.push(g);
     }
-  return m;
+  return _;
 }
-var ct = et ? et.isConcatSpreadable : void 0;
-function ke(t) {
-  return _t(t) || At(t) || !!(ct && t && t[ct]);
+var _t = pt ? pt.isConcatSpreadable : void 0;
+function Te(t) {
+  return $t(t) || Et(t) || !!(_t && t && t[_t]);
 }
-function Oe(t, e, i, o, s) {
-  var a = -1, l = t.length;
-  for (i || (i = ke), s || (s = []); ++a < l; ) {
-    var d = t[a];
-    i(d) ? Dt(s, d) : o || (s[s.length] = d);
+function Pe(t, e, i, a, s) {
+  var o = -1, l = t.length;
+  for (i || (i = Te), s || (s = []); ++o < l; ) {
+    var h = t[o];
+    i(h) ? Ft(s, h) : a || (s[s.length] = h);
   }
   return s;
 }
-function Ne(t, e, i) {
-  var o = t.length;
-  if (o < 2)
-    return o ? tt(t[0]) : [];
-  for (var s = -1, a = Array(o); ++s < o; )
-    for (var l = t[s], d = -1; ++d < o; )
-      d != s && (a[s] = Ue(a[s] || l, t[d], e, i));
-  return tt(Oe(a), e, i);
+function ze(t, e, i) {
+  var a = t.length;
+  if (a < 2)
+    return a ? dt(t[0]) : [];
+  for (var s = -1, o = Array(a); ++s < a; )
+    for (var l = t[s], h = -1; ++h < a; )
+      h != s && (o[s] = De(o[s] || l, t[h], e, i));
+  return dt(Pe(o), e, i);
 }
-function je(t) {
-  return Qt(t) && mt(t);
+function Ee(t) {
+  return Qt(t) && bt(t);
 }
-var G = Pe(function(t) {
-  return Ne(Tt(t, je));
-});
-const Me = gt`
-  :host {
-    --asset-height: 40px;
-    display: block;
-    color: var(--cx-color-neutral-900);
-    height: 100%;
-    --cx-button-text-transform: none;
-    --tooltip-max-width: min(80vw, 640px);
+var st = Zt(function(t) {
+  return ze(Lt(t, Ee));
+}), $ = /* @__PURE__ */ ((t) => (t.Canceled = "CANCELED", t.Failed = "FAILED", t.InProgress = "INPROGRESS", t.PendingComplete = "PENDINGCOMPLETE", t.Success = "SUCCESS", t))($ || {}), Fe = Object.defineProperty, Le = Object.getOwnPropertyDescriptor, j = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? Le(e, i) : e, o = t.length - 1, l; o >= 0; o--)
+    (l = t[o]) && (s = (a ? l(e, i, s) : l(s)) || s);
+  return a && s && Fe(e, i, s), s;
+};
+let T = class extends H {
+  constructor() {
+    super(...arguments), this.localize = new q(this), this.size = 0, this.remainingSize = 0, this.childrenCount = 0, this.assetsCount = 0;
   }
-
-  .container {
-    display: block;
-    height: 100%;
+  get cachedSize() {
+    return Math.max(0, this.size - this.remainingSize);
   }
-
-  .container--user-interaction-blocked {
-    pointer-events: none;
-    user-select: none;
+  get percentage() {
+    return this.size ? this.cachedSize / this.size * 100 : 0;
   }
-
-  .loading-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: var(--cx-color-neutral-50);
-    opacity: 0.8;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: var(--cx-z-index-tooltip); /* Ensure it is above other content */
+  createRenderRoot() {
+    return this;
   }
-
-  .assets,
-  .welcome {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
+  renderFolderSuccessText() {
+    return n`${this.childrenCount} ${this.localize.term("subfolders")},
+    ${this.assetsCount} ${this.localize.term("assets")}`;
+  }
+  renderSuccess() {
+    return n`<div class="file-on-demand-pinned-status__success progress">
+      <cx-icon name="file_download" variant="filled"></cx-icon>
+      <cx-typography variant="small">
+        <cx-line-clamp lines="1">
+          ${p(this.isFolder, this.renderFolderSuccessText.bind(this), () => n`${this.localize.term("cached")}`)}
+        </cx-line-clamp>
+      </cx-typography>
+    </div>`;
   }
-
-  /* #region Icons */
-  .assets-list__tab-group .empty-icon {
-    color: var(--cx-color-neutral-600);
-    font-size: var(--cx-font-size-3x-large);
+  renderFailed() {
+    return n`<div class="file-on-demand-pinned-status__failed progress">
+      <cx-icon name="file_download_off" variant="filled"></cx-icon>
+      <cx-typography variant="small">
+        <cx-line-clamp lines="1">
+          ${this.localize.term("syncFailedCacheFull")}
+        </cx-line-clamp>
+      </cx-typography>
+    </div>`;
   }
-
-  cx-tab {
-    line-height: var(--cx-line-height-large);
+  renderCanceled() {
+    return n`<div class="file-on-demand-pinned-status__canceled progress">
+      <cx-icon name="file_download_off" variant="filled"></cx-icon>
+      <cx-typography variant="small">
+        <cx-line-clamp lines="1">
+          ${this.localize.term("syncCanceled")}
+        </cx-line-clamp>
+      </cx-typography>
+    </div>`;
   }
-
-  .assets-list__tab-group cx-tab {
-    width: calc(100% / 3);
+  renderInProgress() {
+    return n`<div class="file-on-demand-pinned-status__in-progress progress">
+      <cx-icon name="downloading" variant="filled"></cx-icon>
+      <cx-typography variant="small">
+        <cx-line-clamp lines="1">
+          ${this.localize.term("caching")} ${this.percentage}% (<cx-format-bytes .value=${this.cachedSize}></cx-format-bytes>/
+          <cx-format-bytes .value=${this.size}></cx-format-bytes>)
+        </cx-line-clamp>
+      </cx-typography>
+    </div>`;
+  }
+  render() {
+    return n`<div class="file-on-demand-pinned-status">
+      ${ie(this.uploadStatus, [
+      [$.Success, this.renderSuccess.bind(this)],
+      [$.Failed, this.renderFailed.bind(this)],
+      [$.InProgress, this.renderInProgress.bind(this)],
+      [$.PendingComplete, this.renderInProgress.bind(this)],
+      [$.Canceled, this.renderCanceled.bind(this)]
+    ])}
+    </div>`;
+  }
+};
+T.styles = [tt];
+T.dependencies = {
+  "cx-format-bytes": ot,
+  "cx-icon": J,
+  "cx-line-clamp": Q,
+  "cx-typography": nt
+};
+j([
+  d({
+    attribute: "upload-status",
+    type: String
+  })
+], T.prototype, "uploadStatus", 2);
+j([
+  d({ type: Number })
+], T.prototype, "size", 2);
+j([
+  d({
+    attribute: "remaining-size",
+    type: Number
+  })
+], T.prototype, "remainingSize", 2);
+j([
+  d({
+    attribute: "is-folder",
+    type: Boolean
+  })
+], T.prototype, "isFolder", 2);
+j([
+  d({
+    attribute: "children-count",
+    type: Number
+  })
+], T.prototype, "childrenCount", 2);
+j([
+  d({
+    attribute: "assets-count",
+    type: Number
+  })
+], T.prototype, "assetsCount", 2);
+T = j([
+  W("cx-file-on-demand-pinned-status")
+], T);
+const Ue = at`
+  :host {
+    padding: var(--cx-spacing-2x-small) var(--cx-spacing-small);
+    display: block;
   }
 
-  .settings__tab-group cx-tab {
-    width: calc(100% / 2);
+  .asset {
+    max-height: var(--asset-height);
+    display: flex;
+    gap: var(--cx-spacing-small);
+  }
+  .asset:hover {
+    background-color: var(--cx-input-filled-background-color-hover);
   }
 
-  cx-tab::part(base) {
+  .asset__description {
+    flex: 1;
+    width: 0;
     display: flex;
+    flex-direction: column;
     justify-content: center;
   }
-
-  cx-tab::part(label) {
-    text-align: center;
+  .asset__description__label {
+    display: flex;
   }
-
-  cx-tab-panel {
-    --padding: 0 0 var(--cx-spacing-x-small) 0;
+  .asset__description__label__text {
+    flex-grow: 1;
+    flex-shrink: 1;
+    overflow: hidden;
   }
-
-  cx-icon[slot='prefix'] {
-    font-size: var(--cx-font-size-large);
+  .asset__description__status {
+    color: var(--cx-color-neutral-500);
+    line-height: var(--cx-line-height-medium);
   }
 
-  .error-message {
-    color: var(--cx-color-danger);
-    min-height: 1ch;
+  .asset__actions {
+    display: flex;
+    min-width: 64px;
+    justify-content: flex-end;
+    align-items: center;
+  }
+  .asset:hover .asset__actions {
+    visibility: visible;
+    opacity: 1;
+  }
+  .asset__actions {
+    visibility: hidden;
+    opacity: 0;
   }
 
-  /** welcome */
-  .welcome {
+  .asset__actions__spinner {
+    min-height: var(--cx-input-height-medium);
+    min-width: var(--cx-input-height-medium);
+    display: flex;
     justify-content: center;
     align-items: center;
-    padding: var(--cx-spacing-x-large) var(--cx-spacing-medium)
-      var(--cx-spacing-medium) var(--cx-spacing-medium);
-    gap: var(--cx-spacing-x-large);
+  }
+  .asset__actions__spinner::part(base) {
+    flex-grow: 0;
   }
 
-  .welcome__message {
+  .asset__thumbnail {
+    width: 56px;
+    height: var(--asset-height);
     display: flex;
-    flex-direction: column;
     justify-content: center;
     align-items: center;
-    gap: var(--cx-spacing-x-small);
+    position: relative;
+    border-radius: var(--cx-border-radius-medium);
+  }
+  .asset__thumbnail--placeholder {
+    background-color: var(--cx-color-primary-50);
+  }
+  .asset__thumbnail--folder {
+    background-color: var(--cx-color-neutral-100);
   }
 
-  .welcome__actions {
+  .asset__thumbnail__image {
+    height: 100%;
     width: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    gap: var(--cx-spacing-x-small);
+    object-fit: cover;
+    flex-shrink: 0;
+    border-radius: var(--cx-border-radius-medium);
+  }
+  .asset__thumbnail__icon {
+    --font-size: 38px;
+    display: none;
+    color: var(--cx-color-primary-400);
   }
 
-  .welcome__connect-button,
-  .welcome__cancel-connection-button,
-  .welcome__input {
-    width: 100%;
+  .asset__folder__icon {
+    --font-size: var(--cx-font-size-x-large);
+    color: var(--cx-color-neutral-600);
   }
 
-  .welcome__connect-button--disabled::part(base) {
-    cursor: help;
+  .asset__thumbnail__extension {
+    display: none;
+    position: absolute;
+    bottom: var(--cx-spacing-3x-small);
+    left: 50%;
+    transform: translateX(-50%);
+    width: 26px;
+    color: var(--cx-color-primary-50);
   }
 
-  .welcome .error-message {
+  .asset__thumbnail__extension__line-clamp {
+    width: 100%;
     text-align: center;
   }
 
-  /** header */
-  .header {
-    display: flex;
-    justify-content: space-between;
-    background-color: var(--cx-color-neutral-50);
-    padding: var(--cx-spacing-x-small) var(--cx-spacing-small);
-    line-height: 1;
-  }
-  .header__user {
-    display: flex;
-    align-items: center;
-    gap: var(--cx-spacing-x-small);
-    overflow: hidden;
-  }
-  .header__username {
-    display: flex;
-    overflow: hidden;
-  }
-  .header__username__text {
+  .asset__thumbnail__extension__text {
     flex-grow: 1;
     flex-shrink: 1;
     overflow: hidden;
-  }
-  .header__avatar {
-    --size: 24px;
-  }
-  .header__actions {
-    min-width: fit-content;
+    text-transform: uppercase;
+    display: contents;
   }
 
-  .settings__version__badge::part(base) {
-    width: var(--cx-spacing-x-small);
-    padding: 0;
+  .asset__thumbnail--placeholder .asset__thumbnail__image {
+    display: none;
   }
 
-  /** assets list */
-  .assets-list {
-    flex: 1;
-    height: 0;
+  .asset__thumbnail--placeholder .asset__thumbnail__icon,
+  .asset__thumbnail--placeholder .asset__thumbnail__extension {
+    display: flex;
   }
 
-  /** Make sure the overflown element is .recent__list
-   * to trigger scroll event for infinite scroll
-   */
-  .assets-list__tab-group,
-  .assets-list__tab-group::part(base),
-  .assets-list__tab-group::part(body),
-  .assets-list__tab-group cx-tab-panel,
-  .assets-list__tab-group cx-tab-panel::part(base) {
-    height: 100%;
-    overflow: hidden;
+  /** uploads assets */
+  cx-progress-bar {
+    --height: 4px;
+    --indicator-color: var(--color);
+    --track-color: var(--cx-color-neutral-300);
+    z-index: 0;
   }
-  .assets-list__tab-group .recent-empty,
-  .assets-list__tab-group .favorites-empty,
-  .assets-list__tab-group .uploads-empty {
+  .progress {
     display: flex;
-    flex-direction: column;
-    justify-content: center;
     align-items: center;
-    gap: var(--cx-spacing-medium);
+    width: 100%;
+    gap: var(--cx-spacing-2x-small);
+    margin-top: var(--cx-spacing-3x-small);
+  }
+
+  .syncing-progress,
+  .completed-progress,
+  .failed-progress,
+  .canceled-progress {
+    margin-top: var(--cx-spacing-2x-small);
+  }
+
+  .progress * {
+    white-space: nowrap;
+  }
+
+  .progress cx-icon {
+    --font-size: var(--cx-font-size-medium);
+  }
+
+  .progress cx-typography::part(base) {
+    line-height: var(--cx-font-size-medium);
+  }
+
+  .uploading-progress cx-icon {
+    color: var(--cx-color-primary-500);
+  }
+
+  .syncing-progress cx-icon {
+    color: var(--cx-color-warning);
+  }
+
+  .completed-progress cx-icon {
+    color: var(--cx-color-success);
+  }
+
+  .failed-progress cx-icon,
+  .failed-progress__text {
+    color: var(--cx-color-danger);
+    cursor: help;
+  }
+
+  .canceled-progress cx-icon {
+    color: var(--cx-color-neutral-600);
+  }
+
+  .file-on-demand-pinned-status__success cx-icon,
+  .file-on-demand-pinned-status__in-progress cx-icon {
+      color: var(--cx-color-success-500);
+  }
+
+  .file-on-demand-pinned-status__failed cx-icon {
+    color: var(--cx-color-danger-500);
+  }
+
+  .file-on-demand-pinned-status__canceled cx-icon {
+    color: var(--cx-color-neutral-500);
+  }
+`;
+var Re = Object.defineProperty, ke = Object.getOwnPropertyDescriptor, V = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? ke(e, i) : e, o = t.length - 1, l; o >= 0; o--)
+    (l = t[o]) && (s = (a ? l(e, i, s) : l(s)) || s);
+  return a && s && Re(e, i, s), s;
+};
+let F = class extends H {
+  constructor() {
+    super(...arguments), this.localize = new q(this), this.favoriteInProgressAssets = [], this.pinInProgressAssets = [], this.thumbnailLoadError = !1;
+  }
+  get showFailedActions() {
+    return this.listType === x.PINNED ? !1 : this.asset.uploadStatus === $.Failed;
+  }
+  get showInProgressActions() {
+    return this.listType === x.PINNED ? !1 : this.asset.uploadStatus === $.InProgress;
+  }
+  get showNormalActions() {
+    return this.listType === x.PINNED ? !1 : [$.Success, $.PendingComplete].includes(
+      this.asset.uploadStatus
+    ) || !this.asset.uploadStatus?.trim();
+  }
+  get showPinnedActions() {
+    return this.listType === x.PINNED;
+  }
+  get isFolder() {
+    return xe.includes((this.asset.docType ?? "").toLowerCase());
+  }
+  get thumbnailUrl() {
+    return this.asset.thumbnail?.trim() ?? "";
+  }
+  get showThumbnailPlaceholder() {
+    return !this.thumbnailUrl || this.thumbnailLoadError;
+  }
+  willUpdate(t) {
+    if (super.willUpdate(t), !t.has("asset"))
+      return;
+    (t.get("asset")?.thumbnail?.trim() ?? "") !== this.thumbnailUrl && (this.thumbnailLoadError = !1);
+  }
+  handleImgError() {
+    this.thumbnailLoadError = !0;
+  }
+  handleImgLoad() {
+    this.thumbnailLoadError = !1;
+  }
+  handleOpenDriveClick() {
+    this.openDrive(this.asset);
+  }
+  openDrive(t) {
+    this.emit("cx-open-drive", {
+      detail: {
+        asset: t
+      }
+    });
+  }
+  unmarkFavorite(t) {
+    this.emit("cx-unmark-favorite", {
+      detail: {
+        assetId: t
+      }
+    });
+  }
+  markFavorite(t) {
+    this.emit("cx-mark-favorite", {
+      detail: {
+        assetId: t
+      }
+    });
+  }
+  pinAsset(t) {
+    this.emit("cx-file-on-demand-pin", {
+      detail: {
+        assetId: t
+      }
+    });
+  }
+  unpinAsset(t) {
+    this.emit("cx-file-on-demand-unpin", {
+      detail: {
+        assetId: t
+      }
+    });
+  }
+  handlePinClick() {
+    this.asset.isPinned ? this.unpinAsset(this.asset.recordId) : this.pinAsset(this.asset.recordId);
+  }
+  handleFavoriteClick() {
+    this.asset.isInFavorite ? this.unmarkFavorite(this.asset.recordId) : this.markFavorite(this.asset.recordId);
+  }
+  retryUpload(t) {
+    this.emit("cx-retry-upload", {
+      detail: {
+        assetId: t
+      }
+    });
+  }
+  handleRetryUploadClick() {
+    this.asset.uploadId && this.retryUpload(this.asset.uploadId);
+  }
+  resumeUpload(t) {
+    this.emit("cx-resume-upload", {
+      detail: {
+        assetId: t
+      }
+    });
+  }
+  pauseUpload(t) {
+    this.emit("cx-pause-upload", {
+      detail: {
+        assetId: t
+      }
+    });
+  }
+  handlePauseUploadClick() {
+    this.asset.uploadId && (this.asset.isPaused ? this.resumeUpload(this.asset.uploadId) : this.pauseUpload(this.asset.uploadId));
+  }
+  renderProgress({
+    isPaused: t = !1,
+    progress: e = 0,
+    remainingTime: i,
+    size: a = 0,
+    timestamp: s = Date.now(),
+    uploadErrorMessage: o,
+    uploadStatus: l = $.InProgress
+  }) {
+    const h = a > 0 ? e * 100 / a : 0, _ = l === $.InProgress ? h : 100, m = n`
+      <div class="progress uploading-progress">
+        ${p(!t, () => n`<cx-icon name="arrow_upward"></cx-icon>`)}
+        <cx-typography variant="small">
+          <cx-line-clamp lines="1">
+            ${p(t, () => n`${this.localize.term("paused")} ‧`)}
+            <cx-format-bytes .value=${e}></cx-format-bytes>
+            ${this.localize.term("of")}
+            <cx-format-bytes .value=${a}></cx-format-bytes>
+            (${new Intl.NumberFormat(void 0, {
+      maximumFractionDigits: 2
+    }).format(h)}%)
+            ${p(
+      !!i && !t,
+      () => n`‧
+                  <cx-relative-time
+                    format="narrow"
+                    numeric="always"
+                    date=${new Date(Date.now() + (i ?? 0))}
+                    sync
+                    sync-interval=${O}
+                  ></cx-relative-time>`
+    )}
+          </cx-line-clamp>
+        </cx-typography>
+      </div>
+    `, g = n`
+      <div class="progress syncing-progress">
+        <cx-icon name="cached"></cx-icon>
+        <cx-typography variant="small">
+          <cx-line-clamp lines="1">
+            ${this.localize.term("syncing")} ‧
+            <cx-relative-time
+              format="narrow"
+              numeric="always"
+              date=${new Date(s)}
+              sync
+              sync-interval=${O}
+            ></cx-relative-time>
+          </cx-line-clamp>
+        </cx-typography>
+      </div>
+    `, b = n`
+      <div class="progress completed-progress">
+        <cx-icon name="check"></cx-icon>
+        <cx-typography variant="small">
+          <cx-line-clamp lines="1">
+            ${this.localize.term("readyToUse")} ‧
+            <cx-relative-time
+              format="narrow"
+              numeric="always"
+              date=${new Date(s)}
+              sync
+              sync-interval=${O}
+            ></cx-relative-time>
+          </cx-line-clamp>
+        </cx-typography>
+      </div>
+    `, f = n`
+      <div class="progress failed-progress">
+        <cx-typography variant="small">
+          <cx-line-clamp lines="1">
+            <cx-tooltip content=${o || this.localize.term("uploadFailed")}>
+              <span class="failed-progress__text">
+                ${this.localize.term("uploadFailed")} ‧
+              </span>
+            </cx-tooltip>
+            <cx-relative-time
+              format="narrow"
+              numeric="always"
+              date=${new Date(s)}
+              sync
+              sync-interval=${O}
+            ></cx-relative-time>
+          </cx-line-clamp>
+        </cx-typography>
+      </div>
+    `, L = n`
+      <div class="progress canceled-progress">
+        <cx-icon name="cancel"></cx-icon>
+        <cx-typography variant="small">
+          <cx-line-clamp lines="1">
+            ${this.localize.term("canceled")} ‧
+            <cx-relative-time
+              format="narrow"
+              numeric="always"
+              date=${new Date(s)}
+              sync
+              sync-interval=${O}
+            ></cx-relative-time>
+          </cx-line-clamp>
+        </cx-typography>
+      </div>
+    `;
+    return n`
+      ${p(
+      l === $.InProgress,
+      () => n`<cx-progress-bar
+              style=${se({
+        "--color": t ? "var(--cx-color-warning-500)" : "var(--cx-color-primary-500)"
+      })}
+              .value=${_.toFixed(0)}
+              class="progress-bar"
+            ></cx-progress-bar
+            >${m}`
+    )}
+      ${p(
+      l === $.PendingComplete,
+      () => g
+    )}
+      ${p(l === $.Success, () => b)}
+      ${p(l === $.Failed, () => f)}
+      ${p(l === $.Canceled, () => L)}
+    `;
+  }
+  renderUploadingStatus() {
+    return n`
+      ${this.renderProgress({
+      isPaused: this.asset.isPaused,
+      progress: (this.asset.size ?? 0) - (this.asset.remainingSize ?? 0),
+      remainingTime: this.asset.remainingTime,
+      size: this.asset.size ?? 0,
+      timestamp: this.asset.uploadTimestamp,
+      uploadErrorMessage: this.asset.uploadErrorMessage,
+      uploadStatus: this.asset.uploadStatus
+    })}
+    `;
+  }
+  renderPinnedStatus() {
+    return n`<cx-file-on-demand-pinned-status
+      size=${this.asset.size ?? 0}
+      remaining-size=${this.asset.remainingSize ?? 0}
+      upload-status=${this.asset.uploadStatus}
+      ?is-folder=${this.isFolder}
+      children-count=${this.asset.childrenCount ?? 0}
+      assets-count=${this.asset.assetsCount ?? 0}
+    ></cx-file-on-demand-pinned-status>`;
+  }
+  renderThumbnailContent() {
+    return this.isFolder ? this.listType === x.FAVORITES ? n`<cx-icon
+          class="asset__folder__icon"
+          name="folder_special"
+        ></cx-icon>` : n`<cx-icon class="asset__folder__icon" name="topic"></cx-icon>` : n`${p(
+      !!this.thumbnailUrl,
+      () => n`<img
+          alt=${this.asset.fileName}
+          class="asset__thumbnail__image"
+          src=${this.thumbnailUrl}
+          @error=${this.handleImgError}
+          @load=${this.handleImgLoad}
+        />`
+    )}
+      <cx-icon
+        class="asset__thumbnail__icon"
+        name="insert_drive_file"
+        variant="filled"
+      ></cx-icon>
+      <div class="asset__thumbnail__extension">
+        <cx-line-clamp
+          class="asset__thumbnail__extension__line-clamp"
+          lines="1"
+        >
+          <cx-typography
+            class="asset__thumbnail__extension__text"
+            variant="small"
+          >
+            ${fe(this.asset.fileName)}
+          </cx-typography>
+        </cx-line-clamp>
+      </div>`;
+  }
+  renderThumbnail() {
+    return n`<div
+      class=${A({
+      asset__thumbnail: !0,
+      "asset__thumbnail--folder": this.isFolder,
+      "asset__thumbnail--placeholder": this.showThumbnailPlaceholder
+    })}
+    >
+      ${this.renderThumbnailContent()}
+    </div>`;
+  }
+  renderNormalActions() {
+    return n`<cx-tooltip content=${this.localize.term("openInDrive")} hoist>
+        <cx-icon-button
+          data-testid="asset__drive-button"
+          name="folder_open"
+          @click=${this.handleOpenDriveClick}
+        ></cx-icon-button>
+      </cx-tooltip>
+      ${p(
+      this.favoriteInProgressAssets.includes(this.asset.recordId),
+      () => n`<cx-spinner class="asset__actions__spinner"></cx-spinner>`,
+      () => n`<cx-tooltip
+            content=${this.asset.isInFavorite ? this.localize.term("unfavorite") : this.localize.term("favorite")}
+            hoist
+          >
+            <cx-icon-button
+              data-testid="asset__favorite-button"
+              name="star"
+              variant=${this.asset.isInFavorite ? "filled" : "outlined"}
+              @click=${this.handleFavoriteClick}
+            ></cx-icon-button>
+          </cx-tooltip>`
+    )} `;
+  }
+  renderFailedActions() {
+    return n`<cx-tooltip content=${this.localize.term("retry")} hoist>
+      <cx-icon-button
+        data-testid="asset__retry-button"
+        name="refresh"
+        @click=${this.handleRetryUploadClick}
+      ></cx-icon-button>
+    </cx-tooltip>`;
+  }
+  renderInProgressActions() {
+    return n`<cx-tooltip
+      content=${this.asset.isPaused ? this.localize.term("resume") : this.localize.term("pause")}
+      hoist
+    >
+      <cx-icon-button
+        data-testid=${this.asset.isPaused ? "asset__resume-button" : "asset__pause-button"}
+        name=${this.asset.isPaused ? "play_arrow" : "pause"}
+        variant="filled"
+        @click=${this.handlePauseUploadClick}
+      ></cx-icon-button>
+    </cx-tooltip>`;
+  }
+  renderPinnedActions() {
+    return n`${p(
+      this.pinInProgressAssets.includes(this.asset.recordId),
+      () => n`<cx-spinner class="asset__actions__spinner"></cx-spinner>`,
+      () => n`<cx-tooltip
+          content=${this.asset.isPinned ? this.localize.term("unpin") : this.localize.term("pin")}
+          hoist
+        >
+          <cx-icon-button
+            data-testid="asset__pin-button"
+            name="keep"
+            variant=${this.asset.isPinned ? "filled" : "outlined"}
+            @click=${this.handlePinClick}
+          ></cx-icon-button>
+        </cx-tooltip>`
+    )} `;
+  }
+  render() {
+    return n`
+      <div
+        data-id=${this.asset.recordId}
+        data-testid=${`asset-${this.asset.uploadStatus}`}
+        class="asset"
+      >
+        ${this.renderThumbnail()}
+        <div class="asset__description">
+          <div class="asset__description__label">
+            <cx-line-clamp class="asset__description__label__text" lines="1">
+              <cx-typography variant="body3"
+                >${this.asset.fileName}</cx-typography
+              >
+            </cx-line-clamp>
+          </div>
+          <div class="asset__description__status">
+            ${p(
+      this.listType === x.RECENT,
+      () => n`
+                <cx-typography
+                  variant="small"
+                  class="asset__description__status__time"
+                >
+                  <cx-relative-time
+                    format="narrow"
+                    numeric="always"
+                    date=${new Date(this.asset.uploadTimestamp)}
+                    sync
+                    sync-interval=${O}
+                  ></cx-relative-time>
+                </cx-typography>
+              `
+    )}
+            ${p(
+      this.listType === x.UPLOADS,
+      () => this.renderUploadingStatus()
+    )}
+            ${p(
+      this.listType === x.PINNED,
+      () => this.renderPinnedStatus()
+    )}
+          </div>
+        </div>
+        <div class="asset__actions">
+          ${p(this.showNormalActions, () => this.renderNormalActions())}
+          ${p(
+      this.showInProgressActions,
+      () => this.renderInProgressActions()
+    )}
+          ${p(this.showFailedActions, () => this.renderFailedActions())}
+          ${p(this.showPinnedActions, () => this.renderPinnedActions())}
+        </div>
+      </div>
+    `;
+  }
+};
+F.styles = [tt, Ue];
+F.dependencies = {
+  "cx-file-on-demand-pinned-status": T,
+  "cx-format-bytes": ot,
+  "cx-icon": J,
+  "cx-icon-button": St,
+  "cx-line-clamp": Q,
+  "cx-progress-bar": te,
+  "cx-relative-time": It,
+  "cx-spinner": ee,
+  "cx-tooltip": wt,
+  "cx-typography": nt
+};
+V([
+  d({ type: Object })
+], F.prototype, "asset", 2);
+V([
+  d({
+    attribute: "list-type",
+    type: String
+  })
+], F.prototype, "listType", 2);
+V([
+  d({
+    attribute: "favorite-in-progress-assets",
+    converter: {
+      fromAttribute: (t) => t.split(" ").filter(Boolean),
+      toAttribute: (t) => t.join(" ")
+    },
+    type: String
+  })
+], F.prototype, "favoriteInProgressAssets", 2);
+V([
+  d({
+    attribute: "pin-in-progress-assets",
+    converter: {
+      fromAttribute: (t) => t.split(" ").filter(Boolean),
+      toAttribute: (t) => t.join(" ")
+    },
+    type: String
+  })
+], F.prototype, "pinInProgressAssets", 2);
+V([
+  u()
+], F.prototype, "thumbnailLoadError", 2);
+F = V([
+  W("cx-file-on-demand-asset")
+], F);
+const Oe = at`
+  :host {
+    --asset-height: 40px;
+    display: block;
+    color: var(--cx-color-neutral-900);
+    height: 100%;
+    --cx-button-text-transform: none;
+    --tooltip-max-width: min(80vw, 640px);
+  }
+
+  .container {
+    display: block;
+    height: 100%;
+  }
+
+  .container--user-interaction-blocked {
+    pointer-events: none;
+    user-select: none;
+  }
+
+  .loading-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--cx-color-neutral-50);
+    opacity: 0.8;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: var(--cx-z-index-tooltip); /* Ensure it is above other content */
+  }
+
+  .assets,
+  .welcome {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  /* #region Icons */
+  .assets-list__tab-group .empty-icon {
+    color: var(--cx-color-neutral-600);
+    font-size: var(--cx-font-size-3x-large);
+  }
+
+  cx-tab {
+    line-height: var(--cx-line-height-large);
+  }
+
+  .assets-list__tab-group cx-tab {
+    width: calc(100% / 4);
+  }
+
+  .settings__tab-group cx-tab {
+    width: calc(100% / 2);
+  }
+
+  cx-tab::part(base) {
+    display: flex;
+    justify-content: center;
+  }
+
+  cx-tab::part(label) {
+    text-align: center;
+  }
+
+  cx-tab-panel {
+    --padding: 0 0 var(--cx-spacing-x-small) 0;
+  }
+
+  cx-icon[slot='prefix'] {
+    font-size: var(--cx-font-size-large);
+  }
+
+  .error-message {
+    color: var(--cx-color-danger);
+    min-height: 1ch;
+  }
+
+  /** welcome */
+  .welcome {
+    justify-content: center;
+    align-items: center;
+    padding: var(--cx-spacing-x-large) var(--cx-spacing-medium)
+      var(--cx-spacing-medium) var(--cx-spacing-medium);
+    gap: var(--cx-spacing-x-large);
+  }
+
+  .welcome__message {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: var(--cx-spacing-x-small);
+  }
+
+  .welcome__actions {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: var(--cx-spacing-x-small);
+  }
+
+  .welcome__connect-button,
+  .welcome__cancel-connection-button,
+  .welcome__input {
+    width: 100%;
+  }
+
+  .welcome__connect-button--disabled::part(base) {
+    cursor: help;
+  }
+
+  .welcome .error-message {
+    text-align: center;
+  }
+
+  /** header */
+  .header {
+    display: flex;
+    justify-content: space-between;
+    background-color: var(--cx-color-neutral-50);
+    padding: var(--cx-spacing-x-small) var(--cx-spacing-small);
+    line-height: 1;
+  }
+  .header__user {
+    display: flex;
+    align-items: center;
+    gap: var(--cx-spacing-x-small);
+    overflow: hidden;
+  }
+  .header__username {
+    display: flex;
+    overflow: hidden;
+  }
+  .header__username__text {
+    flex-grow: 1;
+    flex-shrink: 1;
+    overflow: hidden;
+  }
+  .header__avatar {
+    --size: 24px;
+  }
+  .header__actions {
+    min-width: fit-content;
+  }
+
+  .settings__version__badge::part(base) {
+    width: var(--cx-spacing-x-small);
+    padding: 0;
+  }
+
+  /** assets list */
+  .assets-list {
+    flex: 1;
+    height: 0;
+  }
+
+  /** Make sure the overflown element is .recent__list
+   * to trigger scroll event for infinite scroll
+   */
+  .assets-list__tab-group,
+  .assets-list__tab-group::part(base),
+  .assets-list__tab-group::part(body),
+  .assets-list__tab-group cx-tab-panel,
+  .assets-list__tab-group cx-tab-panel::part(base) {
+    height: 100%;
+    overflow: hidden;
+  }
+  .assets-list__tab-group .assets-list__tab-group__empty-message {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: var(--cx-spacing-medium);
     font-size: var(--cx-font-size-x-large);
     padding: var(--cx-spacing-large) 0;
     text-align: center;
   }
 
-  .assets-list__tab-group .recent-empty,
-  .assets-list__tab-group .uploads-empty {
+  .assets-list__tab-group .assets-list__tab-group__empty-message:not(.favorites-empty) {
     margin-top: 40px; /** to that they are aligned with favorite tab */
   }
 
   .assets-list__tab-group .recent__list,
   .assets-list__tab-group .favorites__list,
-  .assets-list__tab-group .uploads__list {
+  .assets-list__tab-group .uploads__list,
+  .assets-list__tab-group .pinned__list {
     height: 100%;
     display: flex;
     flex-direction: column;
@@ -997,7 +1726,8 @@ const Me = gt`
     padding: 0 0 var(--cx-spacing-x-small) 0;
   }
 
-  .favorites-tab-panel__content {
+  .favorites-tab-panel__content,
+  .pinned-tab-panel__content {
     display: flex;
     flex-direction: column;
     height: 100%;
@@ -1009,7 +1739,8 @@ const Me = gt`
     align-items: center;
   }
 
-  .assets-list__tab-group .favorites__list {
+  .assets-list__tab-group .favorites__list,
+  .assets-list__tab-group .pinned__list {
     flex: 1;
     height: 0;
   }
@@ -1038,293 +1769,115 @@ const Me = gt`
   .status-footer .label {
     color: var(--cx-color-neutral-600);
   }
+  .status-footer .cache-usage,
   .status-footer .connected-url,
   .status-footer .connection-status,
-  .status-footer .asset-index-sync-status {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .status-footer .label {
-    color: var(--cx-color-neutral-600);
-  }
-
-  .status-footer__divider {
-    --spacing: 0;
-    margin-bottom: var(--cx-spacing-small);
-  }
-
-  .connected-url .label {
-    white-space: nowrap;
-  }
-
-  .connected-url .value-line-clamp {
-    padding: 0 var(--cx-spacing-2x-small);
-  }
-
-  .connected-url .value::part(base) {
-    font-weight: var(--cx-font-weight-medium);
-    color: var(--cx-color-neutral-900);
-  }
-
-  .connection-status__value {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--cx-spacing-2x-small);
-    cursor: help;
-  }
-  .connection-status__value cx-typography {
-    display: inline-flex;
-  }
-  .connection-status__value cx-typography::part(base) {
-    text-transform: capitalize;
-    font-weight: var(--cx-font-weight-medium);
-  }
-  .connection-status--excellent .connection-status__value {
-    color: var(--cx-color-success);
-  }
-  .connection-status--good .connection-status__value {
-    color: var(--cx-color-warning);
-  }
-  .connection-status--bad .connection-status__value {
-    color: var(--cx-color-danger);
-  }
-  .connection-status cx-icon {
-    font-size: var(--cx-font-size-medium);
-  }
-
-  .asset-index-sync-status .value {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--cx-spacing-2x-small);
-  }
-  .asset-index-sync-status .value cx-typography {
-    display: inline-flex;
-  }
-  .asset-index-sync-status .value cx-typography::part(base) {
-    text-transform: capitalize;
-    font-weight: var(--cx-font-weight-medium);
-  }
-  .asset-index-sync-status--loaded .value {
-    color: var(--cx-color-success);
-  }
-  .asset-index-sync-status--loading .value {
-    color: var(--cx-color-warning);
-  }
-  .asset-index-sync-status--error .value {
-    color: var(--cx-color-danger);
-  }
-  .asset-index-sync-status cx-icon {
-    font-size: var(--cx-font-size-medium);
-  }
-
-  /** asset */
-  .asset {
-    max-height: var(--asset-height);
-    display: flex;
-    gap: var(--cx-spacing-small);
-    padding: var(--cx-spacing-2x-small) var(--cx-spacing-small);
-  }
-  .asset:hover {
-    background-color: var(--cx-input-filled-background-color-hover);
-  }
-  .asset__actions {
-    display: flex;
-    min-width: 64px;
-    justify-content: flex-end;
-    align-items: center;
-  }
-  .asset:hover .asset__actions {
-    visibility: visible;
-    opacity: 1;
-  }
-  .asset__actions {
-    visibility: hidden;
-    opacity: 0;
-  }
-  .favorite__spinner {
-    min-height: var(--cx-input-height-medium);
-    min-width: var(--cx-input-height-medium);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-  .favorite__spinner::part(base) {
-    flex-grow: 0;
-  }
-  .asset__thumbnail {
-    width: 56px;
-    height: var(--asset-height);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: relative;
-    border-radius: var(--cx-border-radius-medium);
-  }
-  .asset__thumbnail--placeholder {
-    background-color: var(--cx-color-primary-50);
-  }
-  .asset__thumbnail--folder {
-    background-color: var(--cx-color-neutral-100);
-  }
-
-  .asset__thumbnail__image {
-    height: 100%;
-    width: 100%;
-    object-fit: cover;
-    flex-shrink: 0;
-    border-radius: var(--cx-border-radius-medium);
-  }
-  .asset__thumbnail__icon {
-    --font-size: 38px;
-    display: none;
-    color: var(--cx-color-primary-400);
-  }
-  .asset__folder__icon {
-    --font-size: var(--cx-font-size-x-large);
-    color: var(--cx-color-neutral-600);
-  }
-
-  .asset__thumbnail__extension {
-    display: none;
-    position: absolute;
-    bottom: var(--cx-spacing-3x-small);
-    left: 50%;
-    transform: translateX(-50%);
-    width: 26px;
-    color: var(--cx-color-primary-50);
-  }
-
-  .asset__thumbnail__extension__line-clamp {
-    width: 100%;
-    text-align: center;
-  }
-
-  .asset__thumbnail__extension__text {
-    flex-grow: 1;
-    flex-shrink: 1;
-    overflow: hidden;
-    text-transform: uppercase;
-  }
-
-  .asset__thumbnail--placeholder .asset__thumbnail__image {
-    display: none;
-  }
-
-  .asset__thumbnail--placeholder .asset__thumbnail__icon,
-  .asset__thumbnail--placeholder .asset__thumbnail__extension {
-    display: flex;
-  }
-  .asset__description {
-    flex: 1;
-    width: 0;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-  }
-  .asset__description__label {
-    display: flex;
-  }
-  .asset__description__label__text {
-    flex-grow: 1;
-    flex-shrink: 1;
-    overflow: hidden;
-  }
-  .asset__description__status {
-    color: var(--cx-color-neutral-500);
-    line-height: var(--cx-line-height-medium);
-  }
-
-  .uploads__list .asset-group__label {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .asset-group__clear-button::part(base) {
-    color: var(--cx-color-primary-500);
-    font-size: var(--cx-font-size-x-small);
-  }
-
-  .asset-group__label {
-    padding: var(--cx-spacing-x-small) var(--cx-spacing-small);
-    color: var(--cx-color-neutral-400);
-    line-height: var(--cx-line-height-large);
-  }
-
-  /** uploads assets */
-  cx-progress-bar {
-    --height: 4px;
-    --indicator-color: var(--color);
-    --track-color: var(--cx-color-neutral-300);
-    z-index: 0;
-  }
-  .uploading-progress,
-  .syncing-progress,
-  .completed-progress,
-  .failed-progress,
-  .canceled-progress {
+  .status-footer .asset-index-sync-status {
     display: flex;
+    justify-content: space-between;
     align-items: center;
-    width: 100%;
-    gap: var(--cx-spacing-2x-small);
-    margin-top: var(--cx-spacing-3x-small);
   }
 
-  .syncing-progress,
-  .completed-progress,
-  .failed-progress,
-  .canceled-progress {
-    margin-top: var(--cx-spacing-2x-small);
+  .status-footer .label {
+    color: var(--cx-color-neutral-600);
+  }
+
+  .status-footer__divider {
+    --spacing: 0;
+    margin-bottom: var(--cx-spacing-small);
   }
 
-  .uploading-progress *,
-  .syncing-progress *,
-  .completed-progress *,
-  .failed-progress *,
-  .canceled-progress * {
+  .connected-url .label {
     white-space: nowrap;
   }
 
-  .uploading-progress cx-icon,
-  .syncing-progress cx-icon,
-  .completed-progress cx-icon,
-  .failed-progress cx-icon,
-  .canceled-progress cx-icon {
-    --font-size: var(--cx-font-size-medium);
+  .connected-url .value-line-clamp {
+    padding: 0 var(--cx-spacing-2x-small);
   }
 
-  .uploading-progress cx-typography::part(base),
-  .syncing-progress cx-typography::part(base),
-  .completed-progress cx-typography::part(base),
-  .failed-progress cx-typography::part(base),
-  .canceled-progress cx-typography::part(base) {
-    line-height: var(--cx-font-size-medium);
+  .connected-url .value::part(base) {
+    font-weight: var(--cx-font-weight-medium);
+    color: var(--cx-color-neutral-900);
   }
 
-  .uploading-progress cx-icon {
-    color: var(--cx-color-primary-500);
+  .cache-usage__warning-icon {
+    color: var(--cx-color-warning-500);
   }
 
-  .syncing-progress cx-icon {
-    color: var(--cx-color-warning);
+  .status-footer .cache-usage .label {
+    color: var(--cx-color-primary-600);
   }
 
-  .completed-progress cx-icon {
+  .connection-status__value {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--cx-spacing-2x-small);
+    cursor: help;
+  }
+  .connection-status__value cx-typography {
+    display: inline-flex;
+  }
+  .connection-status__value cx-typography::part(base) {
+    text-transform: capitalize;
+    font-weight: var(--cx-font-weight-medium);
+  }
+  .connection-status--excellent .connection-status__value {
     color: var(--cx-color-success);
   }
+  .connection-status--good .connection-status__value {
+    color: var(--cx-color-warning);
+  }
+  .connection-status--bad .connection-status__value {
+    color: var(--cx-color-danger);
+  }
+  .connection-status cx-icon {
+    font-size: var(--cx-font-size-medium);
+  }
 
-  .failed-progress cx-icon,
-  .failed-progress__text {
+  .asset-index-sync-status .value {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--cx-spacing-2x-small);
+  }
+  .asset-index-sync-status .value cx-typography {
+    display: inline-flex;
+  }
+  .asset-index-sync-status .value cx-typography::part(base) {
+    text-transform: capitalize;
+    font-weight: var(--cx-font-weight-medium);
+  }
+  .asset-index-sync-status--loaded .value {
+    color: var(--cx-color-success);
+  }
+  .asset-index-sync-status--loading .value {
+    color: var(--cx-color-warning);
+  }
+  .asset-index-sync-status--error .value {
     color: var(--cx-color-danger);
-    cursor: help;
   }
+  .asset-index-sync-status cx-icon {
+    font-size: var(--cx-font-size-medium);
+  }
+  
 
-  .canceled-progress cx-icon {
-    color: var(--cx-color-neutral-600);
+  /** asset */
+  .uploads__list .asset-group__label {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .asset-group__clear-button::part(base) {
+    color: var(--cx-color-primary-500);
+    font-size: var(--cx-font-size-x-small);
+  }
+  
+  .asset-group__label {
+    padding: var(--cx-spacing-x-small) var(--cx-spacing-small);
+    color: var(--cx-color-neutral-400);
+    line-height: var(--cx-line-height-large);
   }
 
   /** #region Settings */
@@ -1423,8 +1976,9 @@ const Me = gt`
 
   .settings__cache__size {
     display: flex;
-    gap: var(--cx-spacing-small);
-    align-items: center;
+    gap: var(--cx-spacing-x-small);
+    justify-content: center;
+    flex-direction: column;
   }
   .settings__cache__size cx-input {
     width: 150px;
@@ -1434,7 +1988,8 @@ const Me = gt`
     flex-direction: column;
     gap: var(--cx-spacing-small);
   }
-  .settings__cache__location__label {
+  .settings__cache__location__label,
+  .settings__cache__size__label {
     --color: var(--cx-color-neutral-600);
   }
   .settings__cache__location__value {
@@ -1513,16 +2068,17 @@ const Me = gt`
     justify-content: flex-end;
   }
 `;
-var Be = Object.defineProperty, Ve = Object.getOwnPropertyDescriptor, c = (t, e, i, o) => {
-  for (var s = o > 1 ? void 0 : o ? Ve(e, i) : e, a = t.length - 1, l; a >= 0; a--)
-    (l = t[a]) && (s = (o ? l(e, i, s) : l(s)) || s);
-  return o && s && Be(e, i, s), s;
+var Ne = Object.defineProperty, je = Object.getOwnPropertyDescriptor, c = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? je(e, i) : e, o = t.length - 1, l; o >= 0; o--)
+    (l = t[o]) && (s = (a ? l(e, i, s) : l(s)) || s);
+  return a && s && Ne(e, i, s), s;
 };
-let n = class extends Y {
+let r = class extends H {
   constructor() {
-    super(...arguments), this.localize = new Z(this), this.connectionEstablished = !1, this.connectionStatus = "excellent", this.connectionStatusTooltip = "", this.assetIndexSyncStatus = "loading", this.userAvatarUrl = "", this.username = "", this.recentAssets = { assets: [], hasMore: !1 }, this.favoriteAssets = { assets: [], hasMore: !1 }, this.favoritesLastSync = Date.now(), this.favoriteInProgressAssets = [], this.uploadingAssets = { assets: [], hasMore: !1 }, this.availableFolderIdentifiers = [], this.isLoading = !1, this.settings = {
+    super(...arguments), this.localize = new q(this), this.connectionEstablished = !1, this.connectionStatus = "excellent", this.connectionStatusTooltip = "", this.assetIndexSyncStatus = "loading", this.userAvatarUrl = "", this.username = "", this.recentAssets = { assets: [], hasMore: !1 }, this.favoriteAssets = { assets: [], hasMore: !1 }, this.favoritesLastSync = Date.now(), this.favoriteInProgressAssets = [], this.pinInProgressAssets = [], this.uploadingAssets = { assets: [], hasMore: !1 }, this.pinnedAssets = { assets: [], hasMore: !1 }, this.availableFolderIdentifiers = [], this.isLoading = !1, this.settings = {
       cacheLocation: "Default",
       cacheSize: 0,
+      cacheUsage: 0,
       config: {
         latestVersion: "",
         monitoringActivated: !1,
@@ -1537,31 +2093,31 @@ let n = class extends Y {
         // maxDownloadRate: 0,
         // maxUploadRate: 0,
       }
-    }, this.pickCacheLocation = async () => "Default", this.hasNewVersion = !1, this.aboutContent = "", this.token = "", this.userInteractionBlocked = !1, this.isConnecting = !1, this.isCancellingConnection = !1, this.isDisconnecting = !1, this.isUpgrading = !1, this.isSettingsOpened = !1, this.rootIDs = this.settings.config.rootIDs, this._activeFoldersMode = this.rootIDs.length > 0, this.removedIds = [], this.cacheSize = H({
+    }, this.pickCacheLocation = async () => "Default", this.hasNewVersion = !1, this.aboutContent = "", this.token = "", this.userInteractionBlocked = !1, this.isConnecting = !1, this.isCancellingConnection = !1, this.isDisconnecting = !1, this.isUpgrading = !1, this.isSettingsOpened = !1, this.rootIDs = this.settings.config.rootIDs, this._activeFoldersMode = this.rootIDs.length > 0, this.removedIds = [], this.cacheSize = et({
       decimals: 2,
       inputUnit: "B",
-      targetUnit: B,
+      targetUnit: Z,
       value: this.settings.cacheSize ?? 0
-    }), this.cacheLocation = this.settings.cacheLocation, this.proxyTypes = this.settings.config.proxyTypes ?? [], this.siteUrl = this.settings.config.siteUrl, this.isRecentAssetsLoading = !1, this.isFavoriteAssetsLoading = !1, this.isUploadingAssetsLoading = !1, this.connectError = "", this.disconnectError = "", this.upgradeError = "", this.totalCount = 0, this.folderPathsSet = /* @__PURE__ */ new Set(), this.validConnectionUrl = !1, this.isAddingRootIDs = !1, this.fetchFolders = async ({
+    }), this.cacheLocation = this.settings.cacheLocation, this.proxyTypes = this.settings.config.proxyTypes ?? [], this.siteUrl = this.settings.config.siteUrl, this.isRecentAssetsLoading = !1, this.isFavoriteAssetsLoading = !1, this.isUploadingAssetsLoading = !1, this.isPinnedAssetsLoading = !1, this.connectError = "", this.disconnectError = "", this.upgradeError = "", this.totalCount = 0, this.folderPathsSet = /* @__PURE__ */ new Set(), this.validConnectionUrl = !1, this.isAddingRootIDs = !1, this.fetchFolders = async ({
       excludes: t = [],
       folderId: e,
       folderPathsSet: i,
-      limit: o = void 0,
+      limit: a = void 0,
       start: s = 0
     }) => {
       try {
-        return await vt({
+        return await Ct({
           excludes: t,
           folderId: e,
           folderPathsSet: i,
-          limit: o,
+          limit: a,
           searchText: this.searchText,
           siteUrl: this.settings.config.siteUrl,
           start: s,
           token: this.token
         });
-      } catch (a) {
-        a instanceof Error && a.message === "Failed to fetch" && this.emit("cx-renew-token");
+      } catch (o) {
+        o instanceof Error && o.message === "Failed to fetch" && this.emit("cx-renew-token");
       }
       return {
         data: this.availableFolderIdentifiers,
@@ -1591,7 +2147,7 @@ let n = class extends Y {
   }
   fetchData() {
     if (!this.connectionEstablished) {
-      this.validConnectionUrl = V(this.settings.config.siteUrl);
+      this.validConnectionUrl = K(this.settings.config.siteUrl);
       return;
     }
     this.folderPathsSet = /* @__PURE__ */ new Set(), this.fetchFolders({
@@ -1603,24 +2159,24 @@ let n = class extends Y {
   }
   // set recent tab as active when connection is established
   async showRecentTab() {
-    this.connectionEstablished && (await this.updateComplete, await this.assetsListTabGroup?.updateComplete, this.assetsListTabGroup?.show(b.RECENT));
+    this.connectionEstablished && (await this.updateComplete, await this.assetsListTabGroup?.updateComplete, this.assetsListTabGroup?.show(x.RECENT));
   }
   updateSettingsStates() {
-    this._activeFoldersMode = this.settings.config.rootIDs?.length > 0, this.rootIDs = this.settings.config.rootIDs ?? [], this.cacheSize = H({
+    this._activeFoldersMode = this.settings.config.rootIDs?.length > 0, this.rootIDs = this.settings.config.rootIDs ?? [], this.cacheSize = et({
       decimals: 2,
       inputUnit: "B",
-      targetUnit: B,
+      targetUnit: Z,
       value: this.settings.cacheSize ?? 0
-    }), this.cacheLocation = this.settings.cacheLocation ?? "Default", this.proxyTypes = this.settings.config.proxyTypes ?? [], this.siteUrl = this.settings.config.siteUrl ?? "", this.validConnectionUrl = V(this.settings.config.siteUrl);
+    }), this.cacheLocation = this.settings.cacheLocation ?? "Default", this.proxyTypes = this.settings.config.proxyTypes ?? [], this.siteUrl = this.settings.config.siteUrl ?? "", this.validConnectionUrl = K(this.settings.config.siteUrl);
   }
   get formHasChanges() {
-    return this.settings.cacheSize !== this.cacheSize || this.settings.cacheLocation !== this.cacheLocation || !!G(this.settings.config.proxyTypes, this.proxyTypes).length || !!G(this.settings.config.rootIDs, this.rootIDs).length;
+    return this.settings.cacheSize !== this.cacheSize || this.settings.cacheLocation !== this.cacheLocation || !!st(this.settings.config.proxyTypes, this.proxyTypes).length || !!st(this.settings.config.rootIDs, this.rootIDs).length;
   }
   connect(t = null) {
     if (t?.preventDefault(), this.connectError = "", !this.siteUrl?.trim())
       return;
-    const e = at(this.siteUrl);
-    if (!V(e)) {
+    const e = ht(this.siteUrl);
+    if (!K(e)) {
       this.connectError = this.localize.term("pleaseEnterAValidUrl");
       return;
     }
@@ -1663,34 +2219,6 @@ let n = class extends Y {
       }
     });
   }
-  retryUpload(t) {
-    this.emit("cx-retry-upload", {
-      detail: {
-        assetId: t
-      }
-    });
-  }
-  pauseUpload(t) {
-    this.emit("cx-pause-upload", {
-      detail: {
-        assetId: t
-      }
-    });
-  }
-  resumeUpload(t) {
-    this.emit("cx-resume-upload", {
-      detail: {
-        assetId: t
-      }
-    });
-  }
-  cancelUpload(t) {
-    this.emit("cx-cancel-upload", {
-      detail: {
-        assetId: t
-      }
-    });
-  }
   clearUpload() {
     this.emit("cx-clear-upload");
   }
@@ -1699,12 +2227,13 @@ let n = class extends Y {
       detail: {
         settings: {
           cacheLocation: this.cacheLocation,
-          cacheSize: H({
+          cacheSize: et({
             decimals: 2,
-            inputUnit: B,
+            inputUnit: Z,
             targetUnit: "B",
             value: this.cacheSize
           }),
+          cacheUsage: this.settings.cacheUsage,
           config: {
             latestVersion: this.settings.config.latestVersion,
             monitoringActivated: this.settings.config.monitoringActivated,
@@ -1725,20 +2254,6 @@ let n = class extends Y {
       }
     });
   }
-  markFavorite(t) {
-    this.emit("cx-mark-favorite", {
-      detail: {
-        assetId: t
-      }
-    });
-  }
-  unmarkFavorite(t) {
-    this.emit("cx-unmark-favorite", {
-      detail: {
-        assetId: t
-      }
-    });
-  }
   openSearch() {
     this.emit("cx-open-search");
   }
@@ -1762,7 +2277,7 @@ let n = class extends Y {
     if (!this.recentAssetsList)
       return;
     const { clientHeight: t, scrollHeight: e, scrollTop: i } = this.recentAssetsList;
-    !this.isRecentAssetsLoading && this.recentAssets.hasMore && i + t >= e - W && (this.isRecentAssetsLoading = !0, this.emit("cx-load-more", {
+    !this.isRecentAssetsLoading && this.recentAssets.hasMore && i + t >= e - X && (this.isRecentAssetsLoading = !0, this.emit("cx-file-on-demand-load-more", {
       detail: {
         type: "recent"
       }
@@ -1775,12 +2290,25 @@ let n = class extends Y {
     if (!this.favoritesAssetsList)
       return;
     const { clientHeight: t, scrollHeight: e, scrollTop: i } = this.favoritesAssetsList;
-    !this.isFavoriteAssetsLoading && this.favoriteAssets.hasMore && i + t >= e - W && (this.isFavoriteAssetsLoading = !0, this.emit("cx-load-more", {
+    !this.isFavoriteAssetsLoading && this.favoriteAssets.hasMore && i + t >= e - X && (this.isFavoriteAssetsLoading = !0, this.emit("cx-file-on-demand-load-more", {
       detail: {
         type: "favorites"
       }
     }));
   }
+  requestMorePinnedAssets() {
+    if (!this.pinnedAssetsList)
+      return;
+    const { clientHeight: t, scrollHeight: e, scrollTop: i } = this.pinnedAssetsList;
+    !this.isPinnedAssetsLoading && this.pinnedAssets.hasMore && i + t >= e - X && (this.isPinnedAssetsLoading = !0, this.emit("cx-file-on-demand-load-more", {
+      detail: {
+        type: "pinned"
+      }
+    }));
+  }
+  onPinnedAssetsChanged() {
+    this.isPinnedAssetsLoading = !1;
+  }
   onFavoriteAssetsChanged() {
     this.isFavoriteAssetsLoading = !1;
   }
@@ -1788,7 +2316,7 @@ let n = class extends Y {
     if (!this.uploadsAssetsList)
       return;
     const { clientHeight: t, scrollHeight: e, scrollTop: i } = this.uploadsAssetsList;
-    !this.isUploadingAssetsLoading && this.uploadingAssets.hasMore && i + t >= e - W && (this.isUploadingAssetsLoading = !0, this.emit("cx-load-more", {
+    !this.isUploadingAssetsLoading && this.uploadingAssets.hasMore && i + t >= e - X && (this.isUploadingAssetsLoading = !0, this.emit("cx-file-on-demand-load-more", {
       detail: {
         type: "uploads"
       }
@@ -1800,9 +2328,9 @@ let n = class extends Y {
   async updateActiveFolderIdentifiers(t) {
     const e = this.rootIDs;
     this.rootIDs = t, await this.updateComplete;
-    const i = this.container.querySelectorAll("cx-tree-item"), o = G(this.rootIDs, e);
+    const i = this.container.querySelectorAll("cx-tree-item"), a = st(this.rootIDs, e);
     i.forEach((s) => {
-      o.includes(s.dataset.id ?? "") && ht(s);
+      a.includes(s.dataset.id ?? "") && vt(s);
     });
   }
   // #region Render
@@ -1810,233 +2338,78 @@ let n = class extends Y {
     const t = () => {
       this.openDrive();
     };
-    return r`
+    return n`
       <div class="header">
         <div class="header__user">
           <cx-avatar
             class="header__avatar"
-            image=${this.userAvatarUrl}
-            label=${this.username}
-          ></cx-avatar>
-          <div class="header__username">
-            <cx-line-clamp lines="1" class="header__username__text">
-              <cx-typography variant="body3">${this.username}</cx-typography>
-            </cx-line-clamp>
-          </div>
-        </div>
-        <div class="header__actions">
-          <cx-tooltip content=${this.localize.term("search")} hoist>
-            <cx-icon-button
-              data-testid="header__search-button"
-              name="search"
-              @click=${this.openSearch}
-            ></cx-icon-button>
-          </cx-tooltip>
-          <cx-tooltip content=${this.localize.term("openDrive")} hoist>
-            <cx-icon-button
-              data-testid="header__drive-button"
-              name="folder_open"
-              @click=${t}
-            ></cx-icon-button>
-          </cx-tooltip>
-          <cx-tooltip content=${this.localize.term("settings")} hoist>
-            <cx-icon-button
-              data-testid="header__settings-button"
-              class="header__settings"
-              name="settings"
-              @click=${this.showSettings}
-            >
-              ${g(
-      this.hasNewVersion,
-      () => r`<cx-badge
-                    class="settings__version__badge"
-                    slot="badge"
-                    variant="danger"
-                    pill
-                    size="x-small"
-                  ></cx-badge>`
-    )}
-            </cx-icon-button>
-          </cx-tooltip>
-        </div>
-      </div>
-    `;
-  }
-  // #region Assets
-  renderAsset(t, e) {
-    const i = r`
-      ${this.renderProgress({
-      isPaused: t.isPaused,
-      progress: (t.size ?? 0) - (t.remainingSize ?? 0),
-      remainingTime: t.remainingTime,
-      size: t.size ?? 0,
-      timestamp: t.uploadTimestamp,
-      uploadErrorMessage: t.uploadErrorMessage,
-      uploadStatus: t.uploadStatus
-    })}
-    `, o = (I) => {
-      I.target && I.target.parentElement.classList.add("placeholder");
-    }, s = (I) => {
-      I.target && I.target.parentElement.classList.remove("placeholder");
-    }, a = pe.includes(
-      (t.docType ?? "").toLowerCase()
-    ), l = r`<div
-      class=${A({
-      asset__thumbnail: !0,
-      "asset__thumbnail--folder": a,
-      "asset__thumbnail--placeholder": !t.thumbnail?.trim()
-    })}
-    >
-      ${g(
-      a,
-      () => r`<cx-icon
-            class="asset__folder__icon"
-            name="folder_special"
-          ></cx-icon>`,
-      () => r`<img
-              class="asset__thumbnail__image"
-              src=${t.thumbnail}
-              @error=${o}
-              @load=${s}
-            />
-            <cx-icon
-              class="asset__thumbnail__icon"
-              name="insert_drive_file"
-              variant="filled"
-            ></cx-icon>
-            <div class="asset__thumbnail__extension">
-              <cx-line-clamp
-                class="asset__thumbnail__extension__line-clamp"
-                lines="1"
-              >
-                <cx-typography
-                  class="asset__thumbnail__extension__text"
-                  variant="small"
-                >
-                  ${ge(t.fileName)}
-                </cx-typography>
-              </cx-line-clamp>
-            </div>`
-    )}
-    </div>`, d = () => {
-      this.openDrive(t);
-    }, m = () => {
-      t.isInFavorite ? this.unmarkFavorite(t.recordId) : this.markFavorite(t.recordId);
-    }, u = r`<cx-tooltip
-        content=${this.localize.term("openInDrive")}
-        hoist
-      >
-        <cx-icon-button
-          data-testid="asset__drive-button"
-          name="folder_open"
-          @click=${d}
-        ></cx-icon-button>
-      </cx-tooltip>
-      ${g(
-      this.favoriteInProgressAssets.includes(t.recordId),
-      () => r`<cx-spinner class="favorite__spinner"></cx-spinner>`,
-      () => r`<cx-tooltip
-            content=${t.isInFavorite ? this.localize.term("unfavorite") : this.localize.term("favorite")}
-            hoist
-          >
-            <cx-icon-button
-              data-testid="asset__favorite-button"
-              name="star"
-              variant=${t.isInFavorite ? "filled" : "outlined"}
-              @click=${m}
-            ></cx-icon-button>
-          </cx-tooltip>`
-    )} `, h = () => {
-      t.uploadId && this.retryUpload(t.uploadId);
-    }, f = () => {
-      t.uploadId && (t.isPaused ? this.resumeUpload(t.uploadId) : this.pauseUpload(t.uploadId));
-    }, _ = r`</cx-tooltip
-      ><cx-tooltip content=${this.localize.term("retry")} hoist>
-        <cx-icon-button
-          data-testid="asset__retry-button"
-          name="refresh"
-          @click=${h}
-        ></cx-icon-button>
-      </cx-tooltip>`, z = r`<cx-tooltip
-      content=${t.isPaused ? this.localize.term("resume") : this.localize.term("pause")}
-      hoist
-    >
-      <cx-icon-button
-        data-testid=${t.isPaused ? "asset__resume-button" : "asset__pause-button"}
-        name=${t.isPaused ? "play_arrow" : "pause"}
-        variant="filled"
-        @click=${f}
-      ></cx-icon-button>
-    </cx-tooltip>`;
-    return r`
-      <div
-        data-id=${t.recordId}
-        data-testid=${`asset-${t.uploadStatus}`}
-        class="asset"
-      >
-        ${l}
-        <div class="asset__description">
-          <div class="asset__description__label">
-            <cx-line-clamp class="asset__description__label__text" lines="1">
-              <cx-typography variant="body3">${t.fileName}</cx-typography>
-            </cx-line-clamp>
-          </div>
-          <div class="asset__description__status">
-            ${g(
-      e === b.RECENT,
-      () => r`
-                <cx-typography
-                  variant="small"
-                  class="asset__description__status__time"
-                >
-                  <cx-relative-time
-                    format="narrow"
-                    numeric="always"
-                    date=${new Date(t.uploadTimestamp)}
-                    sync
-                    sync-interval=${U}
-                  ></cx-relative-time>
-                </cx-typography>
-              `
-    )}
-            ${g(
-      e === b.UPLOADS,
-      () => i
-    )}
+            image=${this.userAvatarUrl}
+            label=${this.username}
+          ></cx-avatar>
+          <div class="header__username">
+            <cx-line-clamp lines="1" class="header__username__text">
+              <cx-typography variant="body3">${this.username}</cx-typography>
+            </cx-line-clamp>
           </div>
         </div>
-        <div class="asset__actions">
-          ${g(
-      [T.Success, T.PendingComplete].includes(
-        t.uploadStatus
-      ) || !t.uploadStatus?.trim(),
-      () => u
-    )}
-          ${g(
-      [T.InProgress].includes(
-        t.uploadStatus
-      ),
-      () => z
-    )}
-          ${g(
-      [T.Failed].includes(t.uploadStatus),
-      () => _
+        <div class="header__actions">
+          <cx-tooltip content=${this.localize.term("search")} hoist>
+            <cx-icon-button
+              data-testid="header__search-button"
+              name="search"
+              @click=${this.openSearch}
+            ></cx-icon-button>
+          </cx-tooltip>
+          <cx-tooltip content=${this.localize.term("openDrive")} hoist>
+            <cx-icon-button
+              data-testid="header__drive-button"
+              name="folder_open"
+              @click=${t}
+            ></cx-icon-button>
+          </cx-tooltip>
+          <cx-tooltip content=${this.localize.term("settings")} hoist>
+            <cx-icon-button
+              data-testid="header__settings-button"
+              class="header__settings"
+              name="settings"
+              @click=${this.showSettings}
+            >
+              ${p(
+      this.hasNewVersion,
+      () => n`<cx-badge
+                    class="settings__version__badge"
+                    slot="badge"
+                    variant="danger"
+                    pill
+                    size="x-small"
+                  ></cx-badge>`
     )}
+            </cx-icon-button>
+          </cx-tooltip>
         </div>
       </div>
     `;
   }
+  // #region Assets
+  renderAsset(t, e) {
+    return n`<cx-file-on-demand-asset
+      .asset=${t}
+      .listType=${e}
+      .favoriteInProgressAssets=${this.favoriteInProgressAssets}
+      .pinInProgressAssets=${this.pinInProgressAssets}
+    ></cx-file-on-demand-asset>`;
+  }
   renderRecentAssets() {
-    const t = r`
-      <div class="recent-empty">
+    const t = n`
+      <div class="recent-empty assets-list__tab-group__empty-message">
         <cx-icon class="empty-icon" name="explore"></cx-icon>
         <cx-typography variant="body2">
           ${this.localize.term("allViewedAssetsWillBeVisibleHere")}
         </cx-typography>
       </div>
-    `, [e, i] = st(
+    `, [e, i] = ut(
       this.recentAssets.assets
-    ), o = r`
+    ), a = n`
       <div class="recent__list" @scroll=${this.requestMoreRecentAssets}>
         <div
           class=${A({
@@ -2050,10 +2423,10 @@ let n = class extends Y {
               ${this.localize.term("today")}
             </cx-typography>
           </div>
-          ${F(
+          ${U(
       e,
       (s) => s.recordId,
-      (s) => this.renderAsset(s, b.RECENT)
+      (s) => this.renderAsset(s, x.RECENT)
     )}
         </div>
         <div
@@ -2067,48 +2440,49 @@ let n = class extends Y {
               ${this.localize.term("allOther")}
             </cx-typography>
           </div>
-          ${F(
+          ${U(
       i,
       (s) => s.recordId,
-      (s) => this.renderAsset(s, b.RECENT)
+      (s) => this.renderAsset(s, x.RECENT)
     )}
         </div>
       </div>
     `;
-    return r`
+    return n`
       <cx-tab-panel
-        name=${b.RECENT}
+        name=${x.RECENT}
         class="assets-list__recent-tab-panel"
       >
-        ${g(
+        ${p(
       this.recentAssets.assets.length > 0,
-      () => o,
+      () => a,
       () => t
     )}
       </cx-tab-panel>
     `;
   }
   renderFavoriteAssets() {
-    const t = r`
-      <div class="favorites-empty">
+    const t = n`
+      <div class="favorites-empty assets-list__tab-group__empty-message">
         <cx-icon class="empty-icon" name="star"></cx-icon>
         <cx-typography variant="body2">
           ${this.localize.term("allFavoriteAssetsWillBeVisibleHere")}
         </cx-typography>
       </div>
-    `, e = this.favoriteAssets.assets.toSorted(
-      (o, s) => s.uploadTimestamp - o.uploadTimestamp
-    ), i = r`
+    `, e = mt(this.favoriteAssets.assets), i = n`
       <div class="favorites__list" @scroll=${this.requestMoreFavoriteAssets}>
-        ${F(
+        ${U(
       e,
-      (o) => o.recordId,
-      (o) => this.renderAsset(o, b.FAVORITES)
+      (a) => a.recordId,
+      (a) => this.renderAsset(a, x.FAVORITES)
     )}
       </div>
     `;
-    return r`
-      <cx-tab-panel name="favorites" class="assets-list__favorites-tab-panel">
+    return n`
+      <cx-tab-panel
+        name=${x.FAVORITES}
+        class="assets-list__favorites-tab-panel"
+      >
         <div class="favorites-tab-panel__content">
           <div class="asset-group__label favorites__sync-time">
             <cx-typography variant="small">
@@ -2118,11 +2492,11 @@ let n = class extends Y {
                 numeric="always"
                 date=${new Date(this.favoritesLastSync)}
                 sync
-                sync-interval=${U}
+                sync-interval=${O}
               ></cx-relative-time>
             </cx-typography>
           </div>
-          ${g(
+          ${p(
       e.length > 0,
       () => i,
       () => t
@@ -2131,141 +2505,17 @@ let n = class extends Y {
       </cx-tab-panel>
     `;
   }
-  renderProgress({
-    isPaused: t = !1,
-    progress: e = 0,
-    remainingTime: i,
-    size: o = 0,
-    timestamp: s = Date.now(),
-    uploadErrorMessage: a,
-    uploadStatus: l = T.InProgress
-  }) {
-    const d = o > 0 ? e * 100 / o : 0, m = l === T.InProgress ? d : 100, u = r`
-      <div class="uploading-progress">
-        ${g(!t, () => r`<cx-icon name="arrow_upward"></cx-icon>`)}
-        <cx-typography variant="small">
-          <cx-line-clamp lines="1">
-            ${g(t, () => r`${this.localize.term("paused")} ‧`)}
-            <cx-format-bytes .value=${e}></cx-format-bytes>
-            of
-            <cx-format-bytes .value=${o}></cx-format-bytes>
-            (${new Intl.NumberFormat("en-IN", {
-      maximumFractionDigits: 2
-    }).format(d)}%)
-            ${g(
-      !!i && !t,
-      () => r`‧
-                  <cx-relative-time
-                    format="narrow"
-                    numeric="always"
-                    date=${new Date(Date.now() + (i ?? 0))}
-                    sync
-                    sync-interval=${U}
-                  ></cx-relative-time>`
-    )}
-          </cx-line-clamp>
-        </cx-typography>
-      </div>
-    `, h = r`
-      <div class="syncing-progress">
-        <cx-icon name="cached"></cx-icon>
-        <cx-typography variant="small">
-          <cx-line-clamp lines="1">
-            ${this.localize.term("syncing")} ‧
-            <cx-relative-time
-              format="narrow"
-              numeric="always"
-              date=${new Date(s)}
-              sync
-              sync-interval=${U}
-            ></cx-relative-time>
-          </cx-line-clamp>
-        </cx-typography>
-      </div>
-    `, f = r`
-      <div class="completed-progress">
-        <cx-icon name="check"></cx-icon>
-        <cx-typography variant="small">
-          <cx-line-clamp lines="1">
-            ${this.localize.term("readyToUse")} ‧
-            <cx-relative-time
-              format="narrow"
-              numeric="always"
-              date=${new Date(s)}
-              sync
-              sync-interval=${U}
-            ></cx-relative-time>
-          </cx-line-clamp>
-        </cx-typography>
-      </div>
-    `, _ = r`
-      <div class="failed-progress">
-        <cx-typography variant="small">
-          <cx-line-clamp lines="1">
-            <cx-tooltip content=${a}>
-              <span class="failed-progress__text">
-                ${this.localize.term("uploadFailed")} ‧
-              </span>
-            </cx-tooltip>
-            <cx-relative-time
-              format="narrow"
-              numeric="always"
-              date=${new Date(s)}
-              sync
-              sync-interval=${U}
-            ></cx-relative-time>
-          </cx-line-clamp>
-        </cx-typography>
-      </div>
-    `, z = r`
-      <div class="canceled-progress">
-        <cx-icon name="cancel"></cx-icon>
-        <cx-typography variant="small">
-          <cx-line-clamp lines="1">
-            ${this.localize.term("canceled")} ‧
-            <cx-relative-time
-              format="narrow"
-              numeric="always"
-              date=${new Date(s)}
-              sync
-              sync-interval=${U}
-            ></cx-relative-time>
-          </cx-line-clamp>
-        </cx-typography>
-      </div>
-    `;
-    return r`
-      ${g(
-      l === T.InProgress,
-      () => r`<cx-progress-bar
-              style=${Xt({
-        "--color": t ? "var(--cx-color-warning-500)" : "var(--cx-color-primary-500)"
-      })}
-              .value=${m.toFixed(0)}
-              class="progress-bar"
-            ></cx-progress-bar
-            >${u}`
-    )}
-      ${g(
-      l === T.PendingComplete,
-      () => h
-    )}
-      ${g(l === T.Success, () => f)}
-      ${g(l === T.Failed, () => _)}
-      ${g(l === T.Canceled, () => z)}
-    `;
-  }
   renderUploadingAssets() {
-    const t = r`
-      <div class="uploads-empty">
+    const t = n`
+      <div class="uploads-empty assets-list__tab-group__empty-message">
         <cx-icon class="empty-icon" name="arrow_upward"></cx-icon>
         <cx-typography variant="body2">
           ${this.localize.term("allAssetUploadsWillBeVisibleHere")}
         </cx-typography>
       </div>
-    `, [e, i] = st(
+    `, [e, i] = ut(
       this.uploadingAssets.assets
-    ), o = r`
+    ), a = n`
       <div class="uploads__list" @scroll=${this.requestMoreUploadingAssets}>
         <div
           class=${A({
@@ -2287,10 +2537,10 @@ let n = class extends Y {
               ${this.localize.term("clearAll")}
             </cx-button>
           </div>
-          ${F(
+          ${U(
       e,
       (s) => s.recordId,
-      (s) => this.renderAsset(s, b.UPLOADS)
+      (s) => this.renderAsset(s, x.UPLOADS)
     )}
         </div>
         <div
@@ -2304,39 +2554,77 @@ let n = class extends Y {
               ${this.localize.term("allOther")}
             </cx-typography>
           </div>
-          ${F(
+          ${U(
       i,
       (s) => s.recordId,
-      (s) => this.renderAsset(s, b.UPLOADS)
+      (s) => this.renderAsset(s, x.UPLOADS)
     )}
         </div>
       </div>
     `;
-    return r`
-      <cx-tab-panel name="uploads" class="assets-list__uploads-tab-panel">
-        ${g(
+    return n`
+      <cx-tab-panel
+        name=${x.UPLOADS}
+        class="assets-list__uploads-tab-panel"
+      >
+        ${p(
       this.uploadingAssets.assets.length > 0,
-      () => o,
+      () => a,
+      () => t
+    )}
+      </cx-tab-panel>
+    `;
+  }
+  renderPinnedAssets() {
+    const t = n`
+      <div class="pinned-empty assets-list__tab-group__empty-message">
+        <cx-icon class="empty-icon" name="keep"></cx-icon>
+        <cx-typography variant="body2">
+          ${this.localize.term("allPinnedAssetsWillBeVisibleHere")}
+        </cx-typography>
+      </div>
+    `, e = mt(this.pinnedAssets.assets), i = n`
+      <div class="pinned__list" @scroll=${this.requestMorePinnedAssets}>
+        ${U(
+      e,
+      (a) => a.recordId,
+      (a) => this.renderAsset(a, x.PINNED)
+    )}
+      </div>
+    `;
+    return n`
+      <cx-tab-panel
+        name=${x.PINNED}
+        class="assets-list__pinned-tab-panel"
+      >
+        <div class="pinned-tab-panel__content">
+          ${p(
+      e.length > 0,
+      () => i,
       () => t
     )}
+        </div>
       </cx-tab-panel>
     `;
   }
   renderAssetsList() {
-    return r`
+    return n`
       <div class="assets-list">
         <cx-tab-group
           @cx-tab-show=${async (e) => {
       switch (await e.target.updateComplete, e.detail.name) {
-        case b.RECENT:
+        case x.RECENT:
           this.requestMoreRecentAssets();
           break;
-        case b.FAVORITES:
+        case x.FAVORITES:
           this.requestMoreFavoriteAssets();
           break;
-        case b.UPLOADS:
+        case x.UPLOADS:
           this.requestMoreUploadingAssets();
           break;
+        case x.PINNED:
+          this.requestMorePinnedAssets();
+          break;
       }
     }}
           no-scroll-controls
@@ -2346,32 +2634,39 @@ let n = class extends Y {
             active
             data-testid="assets-list__recent-tab"
             slot="nav"
-            panel=${b.RECENT}
+            panel=${x.RECENT}
           >
             ${this.localize.term("recent")}
           </cx-tab>
+          <cx-tab
+            data-testid="assets-list__pins-tab"
+            slot="nav"
+            panel=${x.PINNED}
+          >
+            ${this.localize.term("pins")}
+          </cx-tab>
           <cx-tab
             data-testid="assets-list__favorites-tab"
             slot="nav"
-            panel=${b.FAVORITES}
+            panel=${x.FAVORITES}
           >
             ${this.localize.term("favorites")}
           </cx-tab>
           <cx-tab
             data-testid="assets-list__uploads-tab"
             slot="nav"
-            panel=${b.UPLOADS}
+            panel=${x.UPLOADS}
           >
             ${this.localize.term("uploads")}
           </cx-tab>
           ${this.renderRecentAssets()} ${this.renderFavoriteAssets()}
-          ${this.renderUploadingAssets()}
+          ${this.renderUploadingAssets()} ${this.renderPinnedAssets()}
         </cx-tab-group>
       </div>
     `;
   }
   renderAssetsView() {
-    return r`
+    return n`
       <div class="assets">
         ${this.renderHeader()}${this.renderAssetsList()}${this.renderStatusFooter()}
       </div>
@@ -2392,49 +2687,49 @@ let n = class extends Y {
       s?.target && s.target !== this.dialog || (this.folderTree.resetTree(), this.folderTree.rootIDs = [], this.folderTree.removedIDs = [], this.dialog.hide(), this.searchText = "");
     }, i = async () => {
       this.isAddingRootIDs = !0, await this.updateComplete, this.searchText = "";
-      const s = this.rootIDs.filter((d) => {
+      const s = this.rootIDs.filter((h) => {
         if (!this.folderTree.shadowRoot?.querySelector(
-          `[data-id="${$(d).id}"]`
+          `[data-id="${S(h).id}"]`
         ))
           return !0;
-      }), a = /* @__PURE__ */ new Set([
+      }), o = /* @__PURE__ */ new Set([
         ...this.folderTree.currentRootIDs,
         ...s
       ]);
-      for (const d of a) {
-        const m = P($(d).path), u = this.folderTree.removedIDs.filter(
-          (h) => P($(h).path).startsWith(m)
+      for (const h of o) {
+        const _ = R(S(h).path), m = this.folderTree.removedIDs.filter(
+          (g) => R(S(g).path).startsWith(_)
         );
-        if (u.length > 0) {
-          const { totalCount: h } = await this.fetchFolders({
-            excludes: u.map((_) => $(_).id),
-            folderId: $(d).id,
+        if (m.length > 0) {
+          const { totalCount: g } = await this.fetchFolders({
+            excludes: m.map((f) => S(f).id),
+            folderId: S(h).id,
             start: 0
-          }), { data: f } = await this.fetchFolders({
-            excludes: u.map((_) => $(_).id),
-            folderId: $(d).id,
-            limit: h || 10,
+          }), { data: b } = await this.fetchFolders({
+            excludes: m.map((f) => S(f).id),
+            folderId: S(h).id,
+            limit: g || 10,
             start: 0
           });
-          f.forEach((_) => {
-            a.add(
-              k({ id: _.id, path: _.fullPath })
+          b.forEach((f) => {
+            o.add(
+              N({ id: f.id, path: f.fullPath })
             );
-          }), a.delete(d);
+          }), o.delete(h);
         }
       }
-      const l = Array.from(a);
+      const l = Array.from(o);
       this.updateActiveFolderIdentifiers(l), this.removedIds = l.filter(
-        (d) => [...l].some((m) => {
-          const u = $(d), h = $(m), f = P(h.path);
-          return m !== d && u.path.startsWith(f);
+        (h) => [...l].some((_) => {
+          const m = S(h), g = S(_), b = R(g.path);
+          return _ !== h && m.path.startsWith(b);
         })
       ), e(), this.isAddingRootIDs = !1;
-    }, o = (s) => {
-      const a = s.target;
-      this.searchText = (a.value ?? "").trim();
+    }, a = (s) => {
+      const o = s.target;
+      this.searchText = (o.value ?? "").trim();
     };
-    return r`
+    return n`
       <cx-dialog
         class="select-folders-popup"
         no-header
@@ -2444,7 +2739,7 @@ let n = class extends Y {
         <cx-input
           autofocus
           clearable
-          @cx-input=${o}
+          @cx-input=${a}
           value=${this.searchText}
           placeholder=${this.localize.term("search")}
         >
@@ -2472,7 +2767,7 @@ let n = class extends Y {
   }
   renderSelectableFolderTree() {
     const t = this.availableFolderIdentifiers;
-    return r`
+    return n`
       <cx-folder-tree
         class="selectable-folder-tree"
         .siteUrl=${this.settings.config.siteUrl}
@@ -2489,20 +2784,20 @@ let n = class extends Y {
   }
   renderRootFolderTree() {
     if (!this.rootIDs.length)
-      return bt;
+      return Ut;
     const t = this.rootIDs.filter(
-      (o) => !this.removedIds.includes(o)
-    ), e = (o) => {
+      (a) => !this.removedIds.includes(a)
+    ), e = (a) => {
       this.updateActiveFolderIdentifiers(
         t.filter(
-          (s) => $(s).id !== o
+          (s) => S(s).id !== a
         )
       ), this.folderTree.rootIDs = this.rootIDs, this.folderTree.resetTree();
-    }, i = (o) => {
-      const { id: s, path: a } = $(o), l = () => {
+    }, i = (a) => {
+      const { id: s, path: o } = S(a), l = () => {
         e(s);
       };
-      return r`
+      return n`
         <cx-tree-item
           data-id=${s}
           class=${A({
@@ -2512,7 +2807,7 @@ let n = class extends Y {
           <div class="folder-tree__label">
             <cx-icon class="folder-tree__icon" name="folder"></cx-icon>
             <cx-line-clamp lines="1" class="folder-tree__label__value">
-              ${a}
+              ${o}
             </cx-line-clamp>
           </div>
           <cx-tooltip
@@ -2528,94 +2823,24 @@ let n = class extends Y {
         </cx-tree-item>
       `;
     };
-    return r`
+    return n`
       <div data-testid="root-folder-tree" class="folder-tree">
         <cx-tree selection="none">
-          ${F(
+          ${U(
       t,
-      (o) => o,
-      (o) => i(o)
+      (a) => a,
+      (a) => i(a)
     )}
           >
         </cx-tree>
       </div>
     `;
   }
-  // renderUploadDownloadSettings(): TemplateResult {
-  //   const maxUploadRateInput = this._unlimitedUploadRate
-  //     ? ''
-  //     : html`<cx-input
-  //         class="settings__upload-rate-input"
-  //         label=${this.localize.term('maxUploadRate')}
-  //         type="number"
-  //         no-spin-buttons
-  //         value=${this.settings.maxUploadRate}
-  //         @cx-change=${(event: CxChangeEvent) => {
-  //           const target = event.target as CxInput;
-  //           const value = Number(target.value);
-  //           if (value < 0) {
-  //             target.setCustomValidity(
-  //               this.localize.term('maxUploadRateCannotBeNegative'),
-  //             );
-  //             return;
-  //           }
-  //           this._maxUploadRate = Number(target.value);
-  //         }}
-  //         ><cx-typography slot="suffix" variant="body2"
-  //           >Mb/s</cx-typography
-  //         ></cx-input
-  //       >`;
-  //   const uploadRateSetting = html`<cx-switch
-  //       class="settings__upload-rate-switch"
-  //       ?checked=${this.settings.unlimitedUploadRate}
-  //       @cx-change=${(event: CxChangeEvent) => {
-  //         this._unlimitedUploadRate = (event.target as HTMLInputElement).checked;
-  //       }}
-  //       >${this.localize.term('unlimitedUploadRate')}</cx-switch
-  //     >${maxUploadRateInput}`;
-  //   const maxDownloadRateInput = this._unlimitedDownloadRate
-  //     ? ''
-  //     : html`<cx-input
-  //         class="settings__download-rate-input"
-  //         label=${this.localize.term('maxDownloadRate')}
-  //         type="number"
-  //         no-spin-buttons
-  //         value=${this.settings.maxDownloadRate}
-  //         @cx-change=${(event: CxChangeEvent) => {
-  //           const target = event.target as CxInput;
-  //           const value = Number(target.value);
-  //           if (value < 0) {
-  //             target.setCustomValidity(
-  //               this.localize.term('maxDownloadRateCannotBeNegative'),
-  //             );
-  //             return;
-  //           }
-  //           this._maxDownloadRate = Number(target.value);
-  //         }}
-  //         ><cx-typography slot="suffix" variant="body2"
-  //           >Mb/s</cx-typography
-  //         ></cx-input
-  //       >`;
-  //   const downloadRateSetting = html`<cx-switch
-  //       class="settings__download-rate-switch"
-  //       ?checked=${this.settings.unlimitedDownloadRate}
-  //       @cx-change=${(event: CxChangeEvent) => {
-  //         this._unlimitedDownloadRate = (event.target as HTMLInputElement).checked;
-  //       }}
-  //       >${this.localize.term('unlimitedDownloadRate')}</cx-switch
-  //     >${maxDownloadRateInput}`;
-  //   return html`<div class="settings-group settings__upload-download">
-  //     <cx-typography variant="h5"
-  //       >${this.localize.term('uploadDownload')}</cx-typography
-  //     >
-  //     ${uploadRateSetting} ${downloadRateSetting}
-  //   </div>`;
-  // }
   handleActiveFolderChange(t) {
     t.target.value === "custom" ? (this._activeFoldersMode = !0, this.rootIDs = this.settings.config.rootIDs ?? []) : (this._activeFoldersMode = !1, this.rootIDs = []);
   }
   renderGeneralSettings() {
-    const t = r`
+    const t = n`
       <div class="settings-group settings__active-folder">
         <cx-typography variant="h5">
           ${this.localize.term("activeFolders")}
@@ -2635,15 +2860,15 @@ let n = class extends Y {
           </cx-option>
           <cx-option value="custom">${this.localize.term("custom")}</cx-option>
         </cx-select>
-        ${g(
+        ${p(
       this._activeFoldersMode,
-      () => r`
+      () => n`
             ${this.renderRootFolderTree()} ${this.renderSelectFoldersPopup()}
           `
     )}
       </div>
     `;
-    return r`
+    return n`
       <div class="settings__general">
         ${t}
         <div class="settings-group settings__software">
@@ -2658,13 +2883,13 @@ let n = class extends Y {
               >
                 <cx-typography variant="body3">
                   ${this.localize.term("currentVersion")}
-                  ${it(this.settings.config.version ?? "")}
+                  ${gt(this.settings.config.version ?? "")}
                 </cx-typography>
               </cx-line-clamp>
             </div>
-            ${g(
+            ${p(
       this.hasNewVersion,
-      () => r`<div class="settings__software__version__value">
+      () => n`<div class="settings__software__version__value">
                   <cx-badge
                     class="settings__version__badge"
                     slot="badge"
@@ -2680,7 +2905,7 @@ let n = class extends Y {
                     <cx-typography variant="body3">
                       ${this.localize.term(
         "newVersionAvailable",
-        it(
+        gt(
           this.settings.config.latestVersion ?? ""
         )
       )}
@@ -2766,7 +2991,7 @@ let n = class extends Y {
     await this.updateComplete, this.cacheLocationValueText?.handleResize();
   }
   renderAdvancedSettings() {
-    const t = r`<cx-tooltip
+    const t = n`<cx-tooltip
       content=${this.localize.term("openDrive")}
       hoist
     >
@@ -2777,7 +3002,7 @@ let n = class extends Y {
         @click=${this.openCacheLocation}
       ></cx-icon-button>
     </cx-tooltip>`;
-    return r`
+    return n`
       <div class="settings__advanced">
         <div class="settings-group settings__proxy">
           <cx-typography variant="h5">Proxy</cx-typography>
@@ -2789,9 +3014,21 @@ let n = class extends Y {
             value=${(this.proxyTypes ?? []).join(" ")}
             @cx-change=${this.handleProxyChange}
           >
-            <cx-option value="Image" ?disabled=${(this.proxyTypes ?? []).includes("All")}>${this.localize.term("image")}</cx-option>
-            <cx-option value="Video" ?disabled=${(this.proxyTypes ?? []).includes("All")}>${this.localize.term("video")}</cx-option>
-            <cx-option value="Audio" ?disabled=${(this.proxyTypes ?? []).includes("All")}>${this.localize.term("audio")}</cx-option>
+            <cx-option
+              value="Image"
+              ?disabled=${(this.proxyTypes ?? []).includes("All")}
+              >${this.localize.term("image")}</cx-option
+            >
+            <cx-option
+              value="Video"
+              ?disabled=${(this.proxyTypes ?? []).includes("All")}
+              >${this.localize.term("video")}</cx-option
+            >
+            <cx-option
+              value="Audio"
+              ?disabled=${(this.proxyTypes ?? []).includes("All")}
+              >${this.localize.term("audio")}</cx-option
+            >
             <cx-option value="All">${this.localize.term("all")}</cx-option>
           </cx-select>
           <cx-typography variant="small">
@@ -2800,46 +3037,23 @@ let n = class extends Y {
     )}
           </cx-typography>
         </div>
-        <div class="settings-group settings__config">
-          <cx-typography variant="h5">
-            ${this.localize.term("config")}
-          </cx-typography>
-          <div class="settings__config__buttons">
-            <cx-button
-              data-testid="settings__config__export-button"
-              @click=${this.exportSettings}
-            >
-              <cx-icon name="file_download" slot="prefix"></cx-icon>
-              ${this.localize.term("export")}
-            </cx-button>
-            <cx-button
-              @click=${this.importSettings}
-              data-testid="settings__config__import-button"
-            >
-              <cx-icon name="file_upload" slot="prefix"></cx-icon>
-              ${this.localize.term("import")}
-            </cx-button>
-          </div>
-        </div>
-        <div class="settings-group settings__logs">
-          <cx-typography variant="h5">
-            ${this.localize.term("logs")}
-          </cx-typography>
-          <div class="settings__logs__buttons">
-            <cx-button
-              data-testid="settings__logs__view-button"
-              @click=${this.viewLogs}
-            >
-              <cx-icon name="code" slot="prefix"></cx-icon>
-              ${this.localize.term("view")}
-            </cx-button>
-          </div>
-        </div>
         <div class="settings-group settings__cache">
           <cx-typography variant="h5">
             ${this.localize.term("cache")}
           </cx-typography>
           <div class="settings__cache__size">
+            <cx-typography
+              variant="body3"
+              class="settings__cache__size__label"
+            >
+              ${this.localize.term("currentUsage")}: <cx-format-bytes .value=${this.settings.cacheUsage}></cx-format-bytes>
+            </cx-typography>
+            <cx-typography
+              variant="body3"
+              class="settings__cache__size__label"
+            >
+              ${this.localize.term("capacity")}
+            </cx-typography>
             <cx-input
               data-testid="settings__cache__size__input"
               label=${this.localize.term("size")}
@@ -2852,7 +3066,7 @@ let n = class extends Y {
               @cx-change=${this.handleCacheSizeChange}
             >
               <cx-typography slot="suffix" variant="body2"
-                >${B}</cx-typography
+                >${Z}</cx-typography
               >
             </cx-input>
           </div>
@@ -2899,6 +3113,41 @@ let n = class extends Y {
             </cx-button>
           </div>
         </div>
+        <div class="settings-group settings__config">
+          <cx-typography variant="h5">
+            ${this.localize.term("config")}
+          </cx-typography>
+          <div class="settings__config__buttons">
+            <cx-button
+              data-testid="settings__config__export-button"
+              @click=${this.exportSettings}
+            >
+              <cx-icon name="file_download" slot="prefix"></cx-icon>
+              ${this.localize.term("export")}
+            </cx-button>
+            <cx-button
+              @click=${this.importSettings}
+              data-testid="settings__config__import-button"
+            >
+              <cx-icon name="file_upload" slot="prefix"></cx-icon>
+              ${this.localize.term("import")}
+            </cx-button>
+          </div>
+        </div>
+        <div class="settings-group settings__logs">
+          <cx-typography variant="h5">
+            ${this.localize.term("logs")}
+          </cx-typography>
+          <div class="settings__logs__buttons">
+            <cx-button
+              data-testid="settings__logs__view-button"
+              @click=${this.viewLogs}
+            >
+              <cx-icon name="code" slot="prefix"></cx-icon>
+              ${this.localize.term("view")}
+            </cx-button>
+          </div>
+        </div>
       </div>
     `;
   }
@@ -2906,7 +3155,7 @@ let n = class extends Y {
     const t = () => {
       this.hideSettings();
     };
-    return r`
+    return n`
       <div class="settings">
         <form class="settings__form" @submit=${(i) => {
       i.preventDefault(), this.saveSettings();
@@ -2959,33 +3208,33 @@ let n = class extends Y {
   }
   // #endregion
   renderStatusFooter() {
-    const t = r`
+    const t = n`
       <cx-typography class="error-message" variant="small">
         ${this.localize.term("fileOnDemandSyncErrorMessage")}
       </cx-typography>
     `, e = () => {
       switch (this.connectionStatus) {
         case "excellent":
-          return r`
+          return n`
             <cx-icon variant="filled" name="check_circle"></cx-icon>
           `;
         case "good":
-          return r` <cx-icon variant="filled" name="circle"></cx-icon> `;
+          return n` <cx-icon variant="filled" name="circle"></cx-icon> `;
         case "bad":
-          return r` <cx-icon variant="filled" name="circle"></cx-icon> `;
+          return n` <cx-icon variant="filled" name="circle"></cx-icon> `;
       }
     }, i = () => {
       switch (this.assetIndexSyncStatus) {
         case "loaded":
-          return r`
+          return n`
             <cx-icon variant="filled" name="check_circle"></cx-icon>
           `;
         case "loading":
-          return r` <cx-icon variant="filled" name="cached"></cx-icon> `;
+          return n` <cx-icon variant="filled" name="cached"></cx-icon> `;
         case "error":
-          return r` <cx-icon variant="filled" name="error"></cx-icon> `;
+          return n` <cx-icon variant="filled" name="error"></cx-icon> `;
       }
-    }, o = r`<div
+    }, a = n`<div
       class=${A({
       "connection-status": !0,
       "connection-status--bad": this.connectionStatus === "bad",
@@ -3009,8 +3258,8 @@ let n = class extends Y {
           ${e()}
         </div>
       </cx-tooltip>
-    </div>`;
-    return r`
+    </div>`, s = this.settings.cacheUsage >= this.settings.cacheSize;
+    return n`
       <cx-divider class="status-footer__divider"></cx-divider>
       <div class="status-footer">
         <div class="connected-url">
@@ -3023,7 +3272,7 @@ let n = class extends Y {
             </cx-typography>
           </cx-line-clamp>
         </div>
-        ${o}
+        ${a}
         <div
           class=${A({
       "asset-index-sync-status": !0,
@@ -3037,22 +3286,39 @@ let n = class extends Y {
           </cx-typography>
           <div class="value">
             <cx-typography variant="small">
-              ${le[this.assetIndexSyncStatus]}
+              ${ue[this.assetIndexSyncStatus]}
             </cx-typography>
             ${i()}
           </div>
         </div>
-        ${g(this.assetIndexSyncStatus === "error", () => t)}
+        <div class="cache-usage">
+          <cx-typography class="label" variant="small">
+            ${this.localize.term("cache")}
+          </cx-typography>
+          <cx-tooltip ?disabled=${!s} content=${this.localize.term("cacheUsageWarning")}>
+            <cx-space spacing="3x-small">
+              <cx-line-clamp class="value-line-clamp" lines="1">
+                <cx-typography class="value" variant="small">
+                  <cx-format-bytes .value=${this.settings.cacheUsage}></cx-format-bytes>
+                  /
+                  <cx-format-bytes .value=${this.settings.cacheSize}></cx-format-bytes>
+                </cx-typography>
+              </cx-line-clamp>
+              ${p(s, () => n`<cx-icon class="cache-usage__warning-icon" name="warning" variant="filled"></cx-icon>`)}
+            </cx-space>
+          </cx-tooltip>
+        </div>
+        ${p(this.assetIndexSyncStatus === "error", () => t)}
       </div>
     `;
   }
   handleConnectionURLInput(t) {
     this.validConnectionUrl = !0, this.siteUrl = t.target.value.trim();
-    const e = at(this.siteUrl);
-    V(e) || (this.validConnectionUrl = !1);
+    const e = ht(this.siteUrl);
+    K(e) || (this.validConnectionUrl = !1);
   }
   renderWelcomeView() {
-    return r`
+    return n`
       <div class="welcome">
         <div class="welcome__message">
           <cx-typography variant="h5">
@@ -3101,7 +3367,7 @@ let n = class extends Y {
             ${this.localize.term("cancel")}
           </cx-button>
           <cx-typography class="error-message" variant="body3">
-            ${g(
+            ${p(
       this.connectError,
       () => this.connectError,
       () => " "
@@ -3115,14 +3381,14 @@ let n = class extends Y {
     return this.connectionEstablished ? this.isSettingsOpened ? this.renderSettingsView() : this.renderAssetsView() : this.renderWelcomeView();
   }
   renderLoadingOverlay() {
-    return r`
+    return n`
       <div class="loading-overlay">
         <cx-spinner></cx-spinner>
       </div>
     `;
   }
   render() {
-    return r`
+    return n`
       <div
         class=${A({
       container: !0,
@@ -3131,288 +3397,307 @@ let n = class extends Y {
     })}
       >
         ${this.renderView()}
-        ${g(this.userInteractionBlocked, () => this.renderLoadingOverlay())}
+        ${p(this.userInteractionBlocked, () => this.renderLoadingOverlay())}
       </div>
     `;
   }
   // #endregion
 };
-n.styles = Me;
-n.dependencies = {
-  "cx-avatar": Lt,
-  "cx-button": Rt,
+r.styles = Oe;
+r.dependencies = {
+  "cx-avatar": Ot,
+  "cx-button": Nt,
   "cx-confirm-popover": Kt,
-  "cx-dialog": Pt,
-  "cx-divider": Ft,
+  "cx-dialog": jt,
+  "cx-divider": Bt,
+  "cx-file-on-demand-asset": F,
   "cx-folder-tree": y,
-  "cx-format-bytes": Ut,
-  "cx-icon": lt,
-  "cx-icon-button": kt,
-  "cx-input": Ot,
-  "cx-line-clamp": dt,
-  "cx-option": Nt,
-  "cx-progress-bar": jt,
-  "cx-relative-time": Mt,
-  "cx-select": Bt,
-  "cx-space": Vt,
-  "cx-tab": Ht,
-  "cx-tab-group": Wt,
-  "cx-tab-panel": Gt,
-  "cx-tooltip": qt,
-  "cx-tree": ut,
-  "cx-tree-item": pt,
-  "cx-typography": Yt
+  "cx-format-bytes": ot,
+  "cx-icon": J,
+  "cx-icon-button": St,
+  "cx-input": Mt,
+  "cx-line-clamp": Q,
+  "cx-option": Vt,
+  "cx-relative-time": It,
+  "cx-select": Ht,
+  "cx-space": Wt,
+  "cx-tab": qt,
+  "cx-tab-group": Gt,
+  "cx-tab-panel": Yt,
+  "cx-tooltip": wt,
+  "cx-tree": yt,
+  "cx-tree-item": ft,
+  "cx-typography": nt
 };
 c([
-  R(".container")
-], n.prototype, "container", 2);
+  z(".container")
+], r.prototype, "container", 2);
 c([
-  R("cx-folder-tree")
-], n.prototype, "folderTree", 2);
+  z("cx-folder-tree")
+], r.prototype, "folderTree", 2);
 c([
-  R("cx-dialog")
-], n.prototype, "dialog", 2);
+  z("cx-dialog")
+], r.prototype, "dialog", 2);
 c([
-  R(".recent__list")
-], n.prototype, "recentAssetsList", 2);
+  z(".recent__list")
+], r.prototype, "recentAssetsList", 2);
 c([
-  R(".favorites__list")
-], n.prototype, "favoritesAssetsList", 2);
+  z(".favorites__list")
+], r.prototype, "favoritesAssetsList", 2);
 c([
-  R(".uploads__list")
-], n.prototype, "uploadsAssetsList", 2);
+  z(".uploads__list")
+], r.prototype, "uploadsAssetsList", 2);
 c([
-  R(".assets-list__tab-group")
-], n.prototype, "assetsListTabGroup", 2);
+  z(".pinned__list")
+], r.prototype, "pinnedAssetsList", 2);
 c([
-  R(".settings__cache__location__value__text")
-], n.prototype, "cacheLocationValueText", 2);
+  z(".assets-list__tab-group")
+], r.prototype, "assetsListTabGroup", 2);
 c([
-  p({
+  z(".settings__cache__location__value__text")
+], r.prototype, "cacheLocationValueText", 2);
+c([
+  d({
     attribute: "connection-established",
     type: Boolean
   })
-], n.prototype, "connectionEstablished", 2);
+], r.prototype, "connectionEstablished", 2);
 c([
-  p({
+  d({
     attribute: "connection-status",
     reflect: !0,
     type: String
   })
-], n.prototype, "connectionStatus", 2);
+], r.prototype, "connectionStatus", 2);
 c([
-  p({
+  d({
     attribute: "connection-status-tooltip",
     type: String
   })
-], n.prototype, "connectionStatusTooltip", 2);
+], r.prototype, "connectionStatusTooltip", 2);
 c([
-  p({
+  d({
     attribute: "asset-index-sync-status",
     reflect: !0,
     type: String
   })
-], n.prototype, "assetIndexSyncStatus", 2);
+], r.prototype, "assetIndexSyncStatus", 2);
 c([
-  p({
+  d({
     attribute: "user-avatar-url",
     type: String
   })
-], n.prototype, "userAvatarUrl", 2);
+], r.prototype, "userAvatarUrl", 2);
 c([
-  p({
+  d({
     type: String
   })
-], n.prototype, "username", 2);
+], r.prototype, "username", 2);
 c([
-  p({
+  d({
     attribute: "recent-assets",
     type: Object
   })
-], n.prototype, "recentAssets", 2);
+], r.prototype, "recentAssets", 2);
 c([
-  p({
+  d({
     attribute: "favorite-assets",
     type: Object
   })
-], n.prototype, "favoriteAssets", 2);
+], r.prototype, "favoriteAssets", 2);
 c([
-  p({
+  d({
     attribute: "favorite-last-sync",
     type: Number
   })
-], n.prototype, "favoritesLastSync", 2);
+], r.prototype, "favoritesLastSync", 2);
 c([
-  p({
+  d({
     attribute: "favorite-in-progress-assets",
     converter: {
-      fromAttribute: (t) => t.split(" ").map(Number),
+      fromAttribute: (t) => t.split(" ").filter(Boolean),
+      toAttribute: (t) => t.join(" ")
+    },
+    type: String
+  })
+], r.prototype, "favoriteInProgressAssets", 2);
+c([
+  d({
+    attribute: "pin-in-progress-assets",
+    converter: {
+      fromAttribute: (t) => t.split(" ").filter(Boolean),
       toAttribute: (t) => t.join(" ")
     },
     type: String
   })
-], n.prototype, "favoriteInProgressAssets", 2);
+], r.prototype, "pinInProgressAssets", 2);
 c([
-  p({
+  d({
     attribute: "uploading-assets",
     type: Object
   })
-], n.prototype, "uploadingAssets", 2);
+], r.prototype, "uploadingAssets", 2);
+c([
+  d({
+    attribute: "pinned-assets",
+    type: Object
+  })
+], r.prototype, "pinnedAssets", 2);
 c([
-  x()
-], n.prototype, "availableFolderIdentifiers", 2);
+  u()
+], r.prototype, "availableFolderIdentifiers", 2);
 c([
-  x()
-], n.prototype, "isLoading", 2);
+  u()
+], r.prototype, "isLoading", 2);
 c([
-  p({
+  d({
     attribute: "settings",
     type: Object
   })
-], n.prototype, "settings", 2);
+], r.prototype, "settings", 2);
 c([
-  p({ attribute: "pick-cache-location" })
-], n.prototype, "pickCacheLocation", 2);
+  d({ attribute: "pick-cache-location", type: Function })
+], r.prototype, "pickCacheLocation", 2);
 c([
-  p({
+  d({
     attribute: "has-new-version",
     type: Boolean
   })
-], n.prototype, "hasNewVersion", 2);
+], r.prototype, "hasNewVersion", 2);
 c([
-  p({
+  d({
     attribute: "about-content",
     type: String
   })
-], n.prototype, "aboutContent", 2);
+], r.prototype, "aboutContent", 2);
 c([
-  p({ type: String })
-], n.prototype, "token", 2);
+  d({ type: String })
+], r.prototype, "token", 2);
 c([
-  p({
+  d({
     attribute: "user-interaction-blocked",
     type: Boolean
   })
-], n.prototype, "userInteractionBlocked", 2);
+], r.prototype, "userInteractionBlocked", 2);
 c([
-  p({
+  d({
     attribute: "is-connecting",
     type: Boolean
   })
-], n.prototype, "isConnecting", 2);
+], r.prototype, "isConnecting", 2);
 c([
-  p({
+  d({
     attribute: "is-cancelling-connection",
     type: Boolean
   })
-], n.prototype, "isCancellingConnection", 2);
+], r.prototype, "isCancellingConnection", 2);
 c([
-  p({
+  d({
     attribute: "is-disconnecting",
     type: Boolean
   })
-], n.prototype, "isDisconnecting", 2);
+], r.prototype, "isDisconnecting", 2);
 c([
-  p({
+  d({
     attribute: "is-upgrading",
     type: Boolean
   })
-], n.prototype, "isUpgrading", 2);
+], r.prototype, "isUpgrading", 2);
+c([
+  u()
+], r.prototype, "isSettingsOpened", 2);
+c([
+  u()
+], r.prototype, "rootIDs", 2);
 c([
-  x()
-], n.prototype, "isSettingsOpened", 2);
+  u()
+], r.prototype, "_activeFoldersMode", 2);
 c([
-  x()
-], n.prototype, "rootIDs", 2);
+  u()
+], r.prototype, "removedIds", 2);
 c([
-  x()
-], n.prototype, "_activeFoldersMode", 2);
+  u()
+], r.prototype, "cacheSize", 2);
 c([
-  x()
-], n.prototype, "removedIds", 2);
+  u()
+], r.prototype, "cacheLocation", 2);
 c([
-  x()
-], n.prototype, "cacheSize", 2);
+  u()
+], r.prototype, "proxyTypes", 2);
 c([
-  x()
-], n.prototype, "cacheLocation", 2);
+  u()
+], r.prototype, "siteUrl", 2);
 c([
-  x()
-], n.prototype, "proxyTypes", 2);
+  u()
+], r.prototype, "isRecentAssetsLoading", 2);
 c([
-  x()
-], n.prototype, "siteUrl", 2);
+  u()
+], r.prototype, "isFavoriteAssetsLoading", 2);
 c([
-  x()
-], n.prototype, "isRecentAssetsLoading", 2);
+  u()
+], r.prototype, "isUploadingAssetsLoading", 2);
 c([
-  x()
-], n.prototype, "isFavoriteAssetsLoading", 2);
+  u()
+], r.prototype, "isPinnedAssetsLoading", 2);
 c([
-  x()
-], n.prototype, "isUploadingAssetsLoading", 2);
+  u()
+], r.prototype, "connectError", 2);
 c([
-  x()
-], n.prototype, "connectError", 2);
+  u()
+], r.prototype, "disconnectError", 2);
 c([
-  x()
-], n.prototype, "disconnectError", 2);
+  u()
+], r.prototype, "upgradeError", 2);
 c([
-  x()
-], n.prototype, "upgradeError", 2);
+  u()
+], r.prototype, "totalCount", 2);
 c([
-  x()
-], n.prototype, "totalCount", 2);
+  u()
+], r.prototype, "folderPathsSet", 2);
 c([
-  x()
-], n.prototype, "folderPathsSet", 2);
+  u()
+], r.prototype, "validConnectionUrl", 2);
 c([
-  x()
-], n.prototype, "validConnectionUrl", 2);
+  u()
+], r.prototype, "isAddingRootIDs", 2);
 c([
-  x()
-], n.prototype, "isAddingRootIDs", 2);
+  P(["connectionEstablished", "token"])
+], r.prototype, "fetchData", 1);
 c([
-  L(["connectionEstablished", "token"])
-], n.prototype, "fetchData", 1);
+  P(["connectionEstablished"])
+], r.prototype, "showRecentTab", 1);
 c([
-  L(["connectionEstablished"])
-], n.prototype, "showRecentTab", 1);
+  P("settings")
+], r.prototype, "updateSettingsStates", 1);
 c([
-  L("settings")
-], n.prototype, "updateSettingsStates", 1);
+  P("recentAssets")
+], r.prototype, "onRecentAssetsChanged", 1);
 c([
-  L("recentAssets")
-], n.prototype, "onRecentAssetsChanged", 1);
+  P("pinnedAssets")
+], r.prototype, "onPinnedAssetsChanged", 1);
 c([
-  L("favoriteAssets")
-], n.prototype, "onFavoriteAssetsChanged", 1);
+  P("favoriteAssets")
+], r.prototype, "onFavoriteAssetsChanged", 1);
 c([
-  L("uploadingAssets")
-], n.prototype, "onUploadingAssetsChanged", 1);
+  P("uploadingAssets")
+], r.prototype, "onUploadingAssetsChanged", 1);
 c([
-  x()
-], n.prototype, "searchText", 2);
+  u()
+], r.prototype, "searchText", 2);
 c([
-  L(["searchText"]),
-  Zt(200)
-], n.prototype, "onSearch", 1);
+  P(["searchText"]),
+  Xt(200)
+], r.prototype, "onSearch", 1);
 c([
-  L("cacheLocation")
-], n.prototype, "handleCacheLocationChange", 1);
-n = c([
-  K("cx-file-on-demand")
-], n);
+  P("cacheLocation")
+], r.prototype, "handleCacheLocationChange", 1);
+r = c([
+  W("cx-file-on-demand")
+], r);
 export {
-  n as C,
-  As as U,
-  at as a,
+  r as C,
+  De as a,
   Pe as b,
-  Oe as c,
-  nt as d,
-  Ue as e,
-  Ne as f,
-  je as i,
-  Ce as o,
-  Re as s
+  ze as c,
+  Ee as i
 };