@ynput/ayon-frontend-shared 0.9.0 → 0.10.0

package/dist/chunks/useLocalStorage.es.js

@@ -0,0 +1,78 @@
+import { useRef as f, useState as I, useEffect as L, useCallback as p } from "react";
+const g = "local-storage", w = (t) => {
+  window.dispatchEvent(
+    new CustomEvent(g, { detail: { key: t } })
+  );
+}, d = (t, e = null) => {
+  if (!t) return e;
+  try {
+    return JSON.parse(t);
+  } catch {
+    return e;
+  }
+}, v = (t, e) => {
+  if (typeof window > "u") return e;
+  try {
+    return d(localStorage.getItem(t), e);
+  } catch {
+    return e;
+  }
+}, N = (t, e) => {
+  if (!(typeof window > "u"))
+    try {
+      localStorage.setItem(t, JSON.stringify(e)), w(t);
+    } catch (s) {
+      console.error(s);
+    }
+};
+function y(t, e) {
+  const s = f(e);
+  s.current = e;
+  const c = f(null), [i, S] = I(() => {
+    const n = localStorage.getItem(t);
+    return c.current = n, d(n, e);
+  }), u = f(i);
+  u.current = i, L(() => {
+    const n = (r = !1) => {
+      const l = localStorage.getItem(t);
+      if (!r && l === c.current) return;
+      c.current = l;
+      const m = d(l, s.current);
+      u.current = m, S(m);
+    };
+    if (n(!0), !c.current)
+      try {
+        const r = JSON.stringify(s.current);
+        localStorage.setItem(t, r), c.current = r;
+      } catch (r) {
+        console.error(r);
+      }
+    function o(r) {
+      r.key !== null && r.key !== t || n();
+    }
+    function a(r) {
+      r.detail?.key === t && n();
+    }
+    return window.addEventListener("storage", o), window.addEventListener(g, a), () => {
+      window.removeEventListener("storage", o), window.removeEventListener(g, a);
+    };
+  }, [t]);
+  const E = p(
+    (n) => {
+      try {
+        const o = typeof n == "function" ? n(u.current) : n, a = JSON.stringify(o);
+        if (localStorage.getItem(t) !== a && (localStorage.setItem(t, a), setTimeout(() => w(t), 0)), a === c.current) return;
+        u.current = o, c.current = a, S(o);
+      } catch (o) {
+        console.error(o);
+      }
+    },
+    [t]
+  );
+  return [i, E];
+}
+export {
+  v as r,
+  y as u,
+  N as w
+};

package/dist/components.es.js

@@ -1,24 +1,24 @@
 import { C as gt, S as bt, A as Re, a as wt, T as vt, D as yt, b as Et, c as St, d as Ve, e as xe, f as kt, g as Ct, h as Ot, M as Tt, F as It, i as Pt, j as At, k as Dt, l as Rt, m as Vt, B as xt, L as Ft, n as _t, o as Lt, p as Mt, q as Nt, r as Ut, s as Bt } from "./chunks/ReviewablesSelector.es.js";
-import { t as Lo, u as Mo, v as No, w as Uo, x as Bo, y as $o, z as Go, E as zo, G as Ho, H as Wo, I as Yo, J as jo, K as Ko, N as qo, O as Qo, Q as Xo, P as Jo, U as Zo, R as en, V as tn, W as sn, X as an, Y as on, Z as nn, _ as rn, $ as ln, a0 as cn, a1 as un, a2 as dn, a3 as pn, a4 as fn, a5 as mn, a6 as hn } from "./chunks/ReviewablesSelector.es.js";
+import { t as Lo, u as Mo, v as No, w as Uo, x as Bo, y as $o, z as Go, E as zo, G as Ho, H as Wo, I as Yo, J as jo, K as Ko, N as Qo, O as qo, Q as Xo, P as Jo, U as Zo, R as en, V as tn, W as sn, X as an, Y as on, Z as nn, _ as rn, $ as ln, a0 as cn, a1 as un, a2 as dn, a3 as pn, a4 as fn, a5 as mn, a6 as hn } from "./chunks/ReviewablesSelector.es.js";
 import { jsxs as F, jsx as d, Fragment as X } from "react/jsx-runtime";
 import { useState as x, useRef as ie, useCallback as H, useEffect as W, useMemo as B, createElement as $t, useId as Gt, useContext as zt } from "react";
 import { matchSorter as Fe } from "match-sorter";
 import { InputText as Ke, Icon as pe, Panel as ve, InputPassword as Ht, Button as Te, Section as Wt, SEARCH_FILTER_ID as Yt } from "@ynput/ayon-react-components";
 import ue from "clsx";
 import { B as bn, a as wn, S as vn } from "./chunks/SimpleForm.es.js";
-import { e as qe, P as jt } from "./chunks/MetaWidget.es.js";
+import { d as Qe, P as jt } from "./chunks/MetaWidget.es.js";
 import { A as En, k as Sn, l as kn, m as Cn, n as On, L as Tn, o as In, q as Pn, r as An, s as Dn } from "./chunks/MetaWidget.es.js";
 import { createPortal as Kt } from "react-dom";
-import { format as de, parseISO as Qe, isValid as Xe } from "date-fns";
+import { format as de, parseISO as qe, isValid as Xe } from "date-fns";
 import { B as _e, e as Je, g as ke, h as Ce } from "./chunks/FilmstripEntityCard.es.js";
-import { $ as Vn, j as xn, k as Fn, l as _n, m as Ln, n as Mn, o as Nn, q as Un, A as Bn, C as $n, a as Gn, r as zn, D as Hn, s as Wn, t as Yn, u as jn, v as Kn, w as qn, x as Qn, F as Xn, y as Jn, I as Zn, z as er, E as tr, G as sr, H as ar, J as or, M as nr, K as rr, L as ir, N as lr, U as cr, Y as ur, O as dr, P as pr, Q as fr, R as mr, d as hr, f as gr, S as br, T as wr, V as vr, W as yr, X as Er, Z as Sr, _ as kr, a0 as Cr, a1 as Or, a2 as Tr, a3 as Ir, a4 as Pr, p as Ar, a5 as Dr, a6 as Rr, a7 as Vr } from "./chunks/FilmstripEntityCard.es.js";
-import { c as Ze, s as et, b as tt, ar as st, av as at, ax as qt, q as Qt, u as ot } from "./chunks/TableExportContextInstance.es.js";
-import { d as Fr, D as _r, z as Lr } from "./chunks/TableExportContextInstance.es.js";
+import { $ as Vn, j as xn, k as Fn, l as _n, m as Ln, n as Mn, o as Nn, q as Un, A as Bn, C as $n, a as Gn, r as zn, D as Hn, s as Wn, t as Yn, u as jn, v as Kn, w as Qn, x as qn, F as Xn, y as Jn, I as Zn, z as er, E as tr, G as sr, H as ar, J as or, M as nr, K as rr, L as ir, N as lr, U as cr, Y as ur, O as dr, P as pr, Q as fr, R as mr, d as hr, f as gr, S as br, T as wr, V as vr, W as yr, X as Er, Z as Sr, _ as kr, a0 as Cr, a1 as Or, a2 as Tr, a3 as Ir, a4 as Pr, p as Ar, a5 as Dr, a6 as Rr, a7 as Vr } from "./chunks/FilmstripEntityCard.es.js";
+import { c as Ze, o as et, b as tt, ao as st, as as at, au as Qt, n as qt, u as ot } from "./chunks/TableExportContextInstance.es.js";
+import { d as Fr, D as _r, v as Lr } from "./chunks/TableExportContextInstance.es.js";
 import { p as Xt, d as Le } from "./chunks/DeleteEntitiesConfirmDialog.es.js";
 import { e as Nr, D as Ur, b as Br, a as $r, c as Gr, s as zr } from "./chunks/DeleteEntitiesConfirmDialog.es.js";
 import { D as Wr } from "./chunks/DetailsDialog.es.js";
 import { q as Jt, r as Zt, n as es } from "./chunks/Watchers.es.js";
-import { s as jr, t as Kr, v as qr, R as Qr, c as Xr, b as Jr, w as Zr, x as ei, W as ti, u as si } from "./chunks/Watchers.es.js";
+import { s as jr, t as Kr, v as Qr, R as qr, c as Xr, b as Jr, w as Zr, x as ei, W as ti, u as si } from "./chunks/Watchers.es.js";
 import { E as oi, P as ni } from "./chunks/EmptyPlaceholder.es.js";
 import { E as ii, a as li } from "./chunks/EmptyPlaceholderFlex.styled.es.js";
 import { I as ui } from "./chunks/InfoMessage.es.js";
@@ -30,7 +30,7 @@ import { bQ as as, bV as os, cC as ns, aO as rs, aT as is, bL as ls, bs as cs, d
 export * from "primereact/confirmdialog";
 import "@module-federation/enhanced/runtime";
 import { loadPiece as hs, pieceContext as gs, reportContributionError as Ue, menuItemsAt as Be } from "@ynput/ayon-addon/host";
-import { toast as Q } from "react-toastify";
+import { toast as q } from "react-toastify";
 import { isEmpty as bs, upperFirst as me } from "lodash";
 import "uuid";
 import { a as ws } from "./chunks/afterStartup.es.js";
@@ -68,11 +68,11 @@ import { b as zi, c as Hi, d as Wi } from "./chunks/Menu.es.js";
 import { A as xs, f as Fs } from "./chunks/SimpleTable.es.js";
 import { s as ji, g as Ki } from "./chunks/SimpleTable.es.js";
 import { e as _s, E as Ls } from "./chunks/EntityPickerDialog.es.js";
-import { T as Qi } from "./chunks/EntityPickerDialog.es.js";
+import { T as qi } from "./chunks/EntityPickerDialog.es.js";
 import "primereact-context/contextmenu";
 import { u as Ms } from "./chunks/useCreateContextMenu.es.js";
 import { g as re } from "./chunks/getEntityTypeIcon.es.js";
-import { g as q } from "./chunks/iconUtils.es.js";
+import { g as Q } from "./chunks/iconUtils.es.js";
 import { C as Ji, T as Zi } from "./chunks/ThumbnailSimple.es.js";
 import { S as tl } from "./chunks/SimpleFormDialog.es.js";
 import { e as Ns } from "./chunks/extractVersionFromFilename.es.js";
@@ -206,7 +206,7 @@ const ze = 500, zs = /^[^\s@]+@[^\s@]+\.[^\s@]+$/, no = ({
 }, He = (e) => {
   if (!e) return "";
   try {
-    const t = Qe(e);
+    const t = qe(e);
     if (Xe(t))
       return Je(t, "yyyy-MM-dd");
   } catch {
@@ -216,7 +216,7 @@ const ze = 500, zs = /^[^\s@]+@[^\s@]+\.[^\s@]+$/, no = ({
 }, We = (e, t) => {
   if (!e) return null;
   try {
-    const n = Qe(e);
+    const n = qe(e);
     if (Xe(n))
       return Je(n, t);
   } catch {
@@ -453,7 +453,7 @@ const ze = 500, zs = /^[^\s@]+@[^\s@]+\.[^\s@]+$/, no = ({
             version: A.version,
             taskId: K || void 0
           });
-          return n(S, N.id), Q.success("Created new version"), {
+          return n(S, N.id), q.success("Created new version"), {
             productId: S,
             versionId: N.id
           };
@@ -473,7 +473,7 @@ const ze = 500, zs = /^[^\s@]+@[^\s@]+\.[^\s@]+$/, no = ({
               taskId: K || void 0
             }
           );
-          return n(N.id, z.id), Q.success("Created new version"), {
+          return n(N.id, z.id), q.success("Created new version"), {
             productId: N.id,
             versionId: z.id
           };
@@ -898,7 +898,7 @@ const ze = 500, zs = /^[^\s@]+@[^\s@]+\.[^\s@]+$/, no = ({
           entityListPatchModel: O
         });
       } catch (w) {
-        console.error(w), Q.error("Failed to update list attribute: ", w.attrib.detail);
+        console.error(w), q.error("Failed to update list attribute: ", w.attrib.detail);
       }
     },
     [t?.id, t?.attrib, e, E, p, r]
@@ -1045,7 +1045,7 @@ const ze = 500, zs = /^[^\s@]+@[^\s@]+\.[^\s@]+$/, no = ({
       views: {
         ...c,
         settings: c.viewSettings,
-        updateViewSettings: (...g) => qt(...g, c, E, v, T)
+        updateViewSettings: (...g) => Qt(...g, c, E, v, T)
       },
       context: {},
       state: n,
@@ -1055,7 +1055,7 @@ const ze = 500, zs = /^[^\s@]+@[^\s@]+\.[^\s@]+$/, no = ({
       onGoToFrame: o,
       onOpenViewer: u,
       onUpdateEntity: l,
-      toast: Q,
+      toast: q,
       ...p
     }
   );
@@ -1071,7 +1071,7 @@ const ze = 500, zs = /^[^\s@]+@[^\s@]+\.[^\s@]+$/, no = ({
   if (n && t) {
     let u = null;
     try {
-      u = qe();
+      u = Qe();
     } catch {
       console.log("Slicer context not available for this addon page");
     }
@@ -1104,7 +1104,7 @@ const ze = 500, zs = /^[^\s@]+@[^\s@]+\.[^\s@]+$/, no = ({
   }, []);
   const M = async (C) => {
     if (C.preventDefault(), !(a && u)) {
-      Q.error("Please enter username and password to login");
+      q.error("Please enter username and password to login");
       return;
     }
     let b = null;
@@ -1112,14 +1112,14 @@ const ze = 500, zs = /^[^\s@]+@[^\s@]+\.[^\s@]+$/, no = ({
       b = await $e.post("/api/auth/login", { name: a, password: u });
     } catch (y) {
       const k = y;
-      console.error("Login error", k.response?.data || k), Q.error(k.response?.data?.detail || `Unable to login: Error ${k.response?.status}`);
+      console.error("Login error", k.response?.data || k), q.error(k.response?.data?.detail || `Unable to login: Error ${k.response?.status}`);
       return;
     }
     if (!b || !b.data) {
-      console.error("Login error", b), Q.error("Unable to login, check the console for details");
+      console.error("Login error", b), q.error("Unable to login, check the console for details");
       return;
     }
-    localStorage.removeItem("auth-preferred-url"), Q.info(b.data.detail), e({ user: b.data.user, accessToken: b.data.token }), r(Me.util.resetApiState());
+    localStorage.removeItem("auth-preferred-url"), q.info(b.data.detail), e({ user: b.data.user, accessToken: b.data.token }), r(Me.util.resetApiState());
   }, U = async (C) => {
     const b = window.location.pathname.split("/")[2];
     if (!b || (console.debug("handleSSOCallback", b), !C?.length && b !== "_token")) return;
@@ -1137,7 +1137,7 @@ const ze = 500, zs = /^[^\s@]+@[^\s@]+\.[^\s@]+$/, no = ({
       console.debug("SSO Callback", k.callback), m = await $e.get(k.callback, { params: y }), i = !0;
     } catch (P) {
       const S = P;
-      console.error("SSO Callback error", S.response?.data), Q.error(
+      console.error("SSO Callback error", S.response?.data), q.error(
         /* @__PURE__ */ F(X, { children: [
           /* @__PURE__ */ F("p", { children: [
             "Unable to login using ",
@@ -1152,8 +1152,8 @@ const ze = 500, zs = /^[^\s@]+@[^\s@]+\.[^\s@]+$/, no = ({
     if (i && m?.data?.user) {
       console.debug("SSO Callback response", m.data);
       const P = m.data;
-      Q.info(P.detail || `Logged in as ${P.user.name}`), h = P.user, I = P.token, P.redirectUrl && (f = P.redirectUrl);
-    } else i && (Q.error("Unable to login using SSO"), i = !1);
+      q.info(P.detail || `Logged in as ${P.user.name}`), h = P.user, I = P.token, P.redirectUrl && (f = P.redirectUrl);
+    } else i && (q.error("Unable to login using SSO"), i = !1);
     i ? (!f && localStorage.getItem("auth-preferred-url") && (f = localStorage.getItem("auth-preferred-url")), f || (f = window.location.origin), T(!1), localStorage.removeItem("auth-preferred-url"), e({ user: h, accessToken: I, redirectUrl: f }), r(Me.util.resetApiState())) : (console.log("SSO Callback failed, clearing auth state"), T(!1), localStorage.removeItem("auth-preferred-url"));
   };
   W(() => {
@@ -1274,7 +1274,7 @@ const ze = 500, zs = /^[^\s@]+@[^\s@]+\.[^\s@]+$/, no = ({
     getParentFolderIds: r,
     getChildFolderIds: s,
     getFolderIdsWithoutChildren: a
-  } = Qt();
+  } = qt();
   return B(
     () => ({
       // attrib is typed `object` in the api model
@@ -1295,7 +1295,7 @@ const ze = 500, zs = /^[^\s@]+@[^\s@]+\.[^\s@]+$/, no = ({
     ]
   );
 }, vo = (e) => {
-  const { data: t } = ps({ projectName: e }), { rowSelection: n, sliceType: r } = qe(), s = B(
+  const { data: t } = ps({ projectName: e }), { rowSelection: n, sliceType: r } = Qe(), s = B(
     () => ({
       sliceType: r,
       selection: Object.keys(n).filter((u) => n[u])
@@ -1406,7 +1406,7 @@ const ze = 500, zs = /^[^\s@]+@[^\s@]+\.[^\s@]+$/, no = ({
     o === "menu" && /* @__PURE__ */ d(rt, { id: _, target: C, children: /* @__PURE__ */ d(it, { menu: $ }) }),
     y
   ] });
-}, qs = (e = []) => {
+}, Qs = (e = []) => {
   const t = {};
   for (const { id: n, entityType: r } of e) {
     if (!(r in _s)) continue;
@@ -1414,7 +1414,7 @@ const ze = 500, zs = /^[^\s@]+@[^\s@]+\.[^\s@]+$/, no = ({
     t[s] = { ...t[s], [n]: !0 };
   }
   return t;
-}, Qs = (e, t, n, r) => e.map((s, a) => {
+}, qs = (e, t, n, r) => e.map((s, a) => {
   const o = t[a];
   return {
     id: s,
@@ -1436,9 +1436,9 @@ const ze = 500, zs = /^[^\s@]+@[^\s@]+\.[^\s@]+$/, no = ({
     projectName: e,
     entityType: t,
     isMultiSelect: n,
-    initialSelection: qs(r),
+    initialSelection: Qs(r),
     onClose: a,
-    onSubmit: (o, u) => s(Qs(o, u, t, e))
+    onSubmit: (o, u) => s(qs(o, u, t, e))
   }
 ), Xs = () => {
 }, ko = ({ projectName: e }) => {
@@ -2016,7 +2016,7 @@ const ze = 500, zs = /^[^\s@]+@[^\s@]+\.[^\s@]+$/, no = ({
         id: s("taskType"),
         type: "string",
         label: "Task Type",
-        icon: q("task"),
+        icon: Q("task"),
         inverted: !1,
         operator: "OR",
         values: [],
@@ -2032,7 +2032,7 @@ const ze = 500, zs = /^[^\s@]+@[^\s@]+\.[^\s@]+$/, no = ({
         id: s("folderType"),
         type: "string",
         label: "Folder Type",
-        icon: q("folder"),
+        icon: Q("folder"),
         inverted: !1,
         operator: "OR",
         values: [],
@@ -2048,7 +2048,7 @@ const ze = 500, zs = /^[^\s@]+@[^\s@]+\.[^\s@]+$/, no = ({
         id: s("productType"),
         type: "string",
         label: "Product Type",
-        icon: q("product"),
+        icon: Q("product"),
         inverted: !1,
         operator: "OR",
         values: [],
@@ -2064,7 +2064,7 @@ const ze = 500, zs = /^[^\s@]+@[^\s@]+\.[^\s@]+$/, no = ({
         id: s("productBaseType"),
         type: "string",
         label: "Product Base Type",
-        icon: q("product"),
+        icon: Q("product"),
         inverted: !1,
         operator: "OR",
         values: [],
@@ -2080,7 +2080,7 @@ const ze = 500, zs = /^[^\s@]+@[^\s@]+\.[^\s@]+$/, no = ({
         id: s("productNames"),
         type: "string",
         label: "Product Name",
-        icon: q("productName", "string"),
+        icon: Q("productName", "string"),
         inverted: !1,
         operator: "OR",
         values: [],
@@ -2096,7 +2096,7 @@ const ze = 500, zs = /^[^\s@]+@[^\s@]+\.[^\s@]+$/, no = ({
         id: s("status"),
         type: "string",
         label: "Status",
-        icon: q("status"),
+        icon: Q("status"),
         inverted: !1,
         operator: "OR",
         values: [],
@@ -2112,7 +2112,7 @@ const ze = 500, zs = /^[^\s@]+@[^\s@]+\.[^\s@]+$/, no = ({
         id: s("assignees"),
         type: "list_of_strings",
         label: "Assignee",
-        icon: q("assignees"),
+        icon: Q("assignees"),
         inverted: !1,
         operator: "OR",
         values: [],
@@ -2128,7 +2128,7 @@ const ze = 500, zs = /^[^\s@]+@[^\s@]+\.[^\s@]+$/, no = ({
         id: s("author"),
         type: "string",
         label: "Author",
-        icon: q("author"),
+        icon: Q("author"),
         inverted: !1,
         operator: "OR",
         values: [],
@@ -2144,7 +2144,7 @@ const ze = 500, zs = /^[^\s@]+@[^\s@]+\.[^\s@]+$/, no = ({
         id: s("tags"),
         type: "list_of_strings",
         label: "Tags",
-        icon: q("tags"),
+        icon: Q("tags"),
         inverted: !1,
         operator: "OR",
         values: [],
@@ -2193,7 +2193,7 @@ const ze = 500, zs = /^[^\s@]+@[^\s@]+\.[^\s@]+$/, no = ({
         id: s("extension"),
         type: "string",
         label: "File Extension",
-        icon: q("extension", "string"),
+        icon: Q("extension", "string"),
         inverted: !1,
         operator: "OR",
         values: [],
@@ -2270,7 +2270,7 @@ const ze = 500, zs = /^[^\s@]+@[^\s@]+\.[^\s@]+$/, no = ({
   const s = e.data.title || e.name, a = r || n ? {
     name: n || e.name,
     label: n ? me(n) : s,
-    icon: n ? re(n) : q(e.name, e.data.type, Ne(e.data))
+    icon: n ? re(n) : Q(e.name, e.data.type, Ne(e.data))
   } : void 0;
   return {
     id: dt(e.name, "attributes", t, n),
@@ -2284,7 +2284,7 @@ const ze = 500, zs = /^[^\s@]+@[^\s@]+\.[^\s@]+$/, no = ({
     allowNoValue: t.enableRelativeValues,
     allowExcludes: t?.enableExcludes,
     operatorChangeable: t?.enableOperatorChange,
-    icon: q(e.name, e.data.type, Ne(e.data)),
+    icon: Q(e.name, e.data.type, Ne(e.data)),
     group: a,
     tooltip: n ? `${me(n)} ${s}` : void 0,
     value: n ? { icon: re(n) } : void 0,
@@ -2540,20 +2540,20 @@ export {
   Bt as FEATURED_VERSION_TYPES,
   jn as FILMSTRIP_ACTIVE_ATTRIBUTE,
   Kn as FILMSTRIP_FILE_ATTRIBUTE,
-  qn as FILMSTRIP_POSITION_ATTRIBUTE,
+  Qn as FILMSTRIP_POSITION_ATTRIBUTE,
   oa as FILTER_TYPES_BY_SCOPE,
-  Qn as FLOATING_TOOLBAR,
+  qn as FLOATING_TOOLBAR,
   Ko as FeaturedVersionOrder,
   Ss as FeedbackContext,
   co as FeedbackProvider,
   Kr as FieldLabel,
-  qr as FileThumbnail,
+  Qr as FileThumbnail,
   Xn as Filmstrip,
   Jn as FilmstripEntityCard,
   Pi as FilterErrorActions,
   At as FreeTrialLink,
-  qo as GROUP_KEY_PREFIX,
-  Qo as GUEST_KEY_PREFIX,
+  Qo as GROUP_KEY_PREFIX,
+  qo as GUEST_KEY_PREFIX,
   Zn as INSERT_MENTION_TRIGGER_COMMAND,
   ui as InfoMessage,
   pi as JsonViewer,
@@ -2587,7 +2587,7 @@ export {
   Ye as RemotePageWrapper,
   Fs as ReportCrash,
   en as RequiredAddonVersion,
-  Qr as ReviewableCard,
+  qr as ReviewableCard,
   Xr as ReviewableProgressCard,
   Jr as ReviewableUpload,
   gi as ReviewablesList,
@@ -2609,7 +2609,7 @@ export {
   Mi as SyncButton,
   dn as TEAM_KEY_PREFIX,
   pn as TableGridSwitch,
-  Qi as TableSearch,
+  qi as TableSearch,
   _i as TableSettingsFallback,
   ei as Thumbnail,
   Zi as ThumbnailSimple,