npm - @car-cutter/react-webplayer - Versions diffs - 0.7.0 → 0.8.0 - Mend

@car-cutter/react-webplayer 0.7.0 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/dist/index.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import be, { createContext as ze, useContext as Ie, useRef as W, useState as F, useCallback as M, useEffect as Z, useMemo as te, Fragment as Pt } from "react";
-import { createRoot as Dt } from "react-dom/client";
-var et = { exports: {} }, fe = {};
+import be, { createContext as Me, useContext as ze, useRef as Z, useState as $, useCallback as I, useEffect as O, useMemo as te, Fragment as Wt } from "react";
+import { createRoot as Yt } from "react-dom/client";
+var ct = { exports: {} }, ge = {};
 /**
  * @license React
  * react-jsx-runtime.production.min.js
@@ -10,31 +10,31 @@ var et = { exports: {} }, fe = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var Ue;
-function Zt() {
-  if (Ue) return fe;
-  Ue = 1;
-  var e = be, r = Symbol.for("react.element"), n = Symbol.for("react.fragment"), o = Object.prototype.hasOwnProperty, s = e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, p = { key: !0, ref: !0, __self: !0, __source: !0 };
-  function d(a, l, w) {
-    var m, c = {}, f = null, _ = null;
-    w !== void 0 && (f = "" + w), l.key !== void 0 && (f = "" + l.key), l.ref !== void 0 && (_ = l.ref);
-    for (m in l) o.call(l, m) && !p.hasOwnProperty(m) && (c[m] = l[m]);
-    if (a && a.defaultProps) for (m in l = a.defaultProps, l) c[m] === void 0 && (c[m] = l[m]);
-    return { $$typeof: r, type: a, key: f, ref: _, props: c, _owner: s.current };
+var et;
+function Xt() {
+  if (et) return ge;
+  et = 1;
+  var e = be, r = Symbol.for("react.element"), n = Symbol.for("react.fragment"), o = Object.prototype.hasOwnProperty, s = e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, u = { key: !0, ref: !0, __self: !0, __source: !0 };
+  function f(d, c, v) {
+    var l, m = {}, w = null, C = null;
+    v !== void 0 && (w = "" + v), c.key !== void 0 && (w = "" + c.key), c.ref !== void 0 && (C = c.ref);
+    for (l in c) o.call(c, l) && !u.hasOwnProperty(l) && (m[l] = c[l]);
+    if (d && d.defaultProps) for (l in c = d.defaultProps, c) m[l] === void 0 && (m[l] = c[l]);
+    return { $$typeof: r, type: d, key: w, ref: C, props: m, _owner: s.current };
   }
-  return fe.Fragment = n, fe.jsx = d, fe.jsxs = d, fe;
+  return ge.Fragment = n, ge.jsx = f, ge.jsxs = f, ge;
 }
-et.exports = Zt();
-var tt = et.exports;
-const Ze = "cc-webplayer", Ae = "cc-webplayer-icon", rt = "composition-loading", nt = "composition-loaded", ot = "composition-load-error", st = "item-change", at = "extend-mode-on", it = "extend-mode-off", lt = "hotspots-on", ct = "hotspots-off", dt = "gallery-open", ut = "gallery-close", At = !1, Ft = !1, Wt = !1, $t = "quality", Yt = 1, Ut = !1, mt = "cc-webplayer:", Xt = !1;
-function yn(e, r) {
+ct.exports = Xt();
+var Ue = ct.exports;
+const Ie = "cc-webplayer", We = "cc-webplayer-custom-media", Ye = "cc-webplayer-icon", dt = "composition-loading", ut = "composition-loaded", mt = "composition-load-error", pt = "item-change", ht = "extend-mode-on", ft = "extend-mode-off", gt = "hotspots-on", xt = "hotspots-off", wt = "gallery-open", vt = "gallery-close", Bt = !1, Gt = !1, Kt = !1, qt = "quality", Jt = 0, Qt = 1 / 0, er = 1, tr = !1, bt = "cc-webplayer:", rr = !1;
+function Hn(e, r) {
   return `https://cdn.car-cutter.com/gallery/${e}/${r}/composition_v3.json`;
 }
-function Gt(e, r) {
+function nr(e, r) {
   const n = e.split("/"), o = n.pop();
   return [n.join("/"), r, o].join("/");
 }
-var pt = { exports: {} }, xe = {};
+var yt = { exports: {} }, xe = {};
 /**
  * @license React
  * react-jsx-runtime.production.min.js
@@ -44,35 +44,35 @@ var pt = { exports: {} }, xe = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var Xe;
-function Bt() {
-  if (Xe) return xe;
-  Xe = 1;
-  var e = be, r = Symbol.for("react.element"), n = Symbol.for("react.fragment"), o = Object.prototype.hasOwnProperty, s = e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, p = { key: !0, ref: !0, __self: !0, __source: !0 };
-  function d(a, l, w) {
-    var m, c = {}, f = null, _ = null;
-    w !== void 0 && (f = "" + w), l.key !== void 0 && (f = "" + l.key), l.ref !== void 0 && (_ = l.ref);
-    for (m in l) o.call(l, m) && !p.hasOwnProperty(m) && (c[m] = l[m]);
-    if (a && a.defaultProps) for (m in l = a.defaultProps, l) c[m] === void 0 && (c[m] = l[m]);
-    return { $$typeof: r, type: a, key: f, ref: _, props: c, _owner: s.current };
+var tt;
+function or() {
+  if (tt) return xe;
+  tt = 1;
+  var e = be, r = Symbol.for("react.element"), n = Symbol.for("react.fragment"), o = Object.prototype.hasOwnProperty, s = e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, u = { key: !0, ref: !0, __self: !0, __source: !0 };
+  function f(d, c, v) {
+    var l, m = {}, w = null, C = null;
+    v !== void 0 && (w = "" + v), c.key !== void 0 && (w = "" + c.key), c.ref !== void 0 && (C = c.ref);
+    for (l in c) o.call(c, l) && !u.hasOwnProperty(l) && (m[l] = c[l]);
+    if (d && d.defaultProps) for (l in c = d.defaultProps, c) m[l] === void 0 && (m[l] = c[l]);
+    return { $$typeof: r, type: d, key: w, ref: C, props: m, _owner: s.current };
   }
-  return xe.Fragment = n, xe.jsx = d, xe.jsxs = d, xe;
+  return xe.Fragment = n, xe.jsx = f, xe.jsxs = f, xe;
 }
-pt.exports = Bt();
-var t = pt.exports;
-async function qt(e) {
+yt.exports = or();
+var t = yt.exports;
+async function sr(e) {
   const r = await fetch(e);
   if (!r.ok)
     throw new Error(`Failed to fetch composition: ${r.statusText}`);
   return await r.json();
 }
-const Oe = /* @__PURE__ */ new Map(), Kt = (e) => {
-  const [r, n] = F({
+const De = /* @__PURE__ */ new Map(), ar = (e) => {
+  const [r, n] = $({
     status: "pending",
     isSuccess: !1
   });
-  return Z(() => {
-    const o = (p) => n({ status: "success", data: p, isSuccess: !0 }), s = Oe.get(e);
+  return O(() => {
+    const o = (u) => n({ status: "success", data: u, isSuccess: !0 }), s = De.get(e);
     if (s && !(s instanceof Promise)) {
       o(s);
       return;
@@ -82,67 +82,234 @@ const Oe = /* @__PURE__ */ new Map(), Kt = (e) => {
       isSuccess: !1
     }), async function() {
       try {
-        let p;
+        let u;
         if (s)
-          p = await s;
+          u = await s;
         else {
-          const d = qt(e);
-          Oe.set(e, d), p = await d, Oe.set(e, p);
+          const f = sr(e);
+          De.set(e, f), u = await f, De.set(e, u);
         }
-        o(p);
-      } catch (p) {
+        o(u);
+      } catch (u) {
         n({
           status: "error",
           isSuccess: !1,
-          error: p
+          error: u
         });
       }
     }();
   }, [e]), r;
-}, ht = ze(null), re = () => {
-  const e = Ie(ht);
+}, jt = Me(null), re = () => {
+  const e = ze(jt);
+  if (!e)
+    throw new Error(
+      "useGlobalContext must be used within a GlobalContextProvider"
+    );
+  return e;
+}, ir = ({ children: e, ...r }) => /* @__PURE__ */ t.jsx(jt.Provider, { value: r, children: e }), kt = Me(null), oe = () => {
+  const e = ze(kt);
   if (!e)
     throw new Error(
       "useCompositionContext must be used within a CompositionContextProvider"
     );
   return e;
-}, Jt = ({ composition: e, children: r }) => {
-  const { aspectRatio: n, categories: o } = e, s = te(
-    () => o.flatMap(({ items: d }) => d),
+}, lr = ({ composition: e, children: r }) => {
+  const {
+    aspectRatio: n,
+    categories: o,
+    imageHdWidth: s,
+    imageSubWidths: u
+  } = e, { minMediaWidth: f, maxMediaWidth: d } = re(), c = te(
+    () => o.flatMap(({ items: m }) => m),
     [o]
-  ), p = {
+  ), v = {
     aspectRatio: n.replace(":", " / ")
-  };
+  }, l = te(() => {
+    const m = u.concat(s), w = m.sort((a, h) => a - h), C = w.filter(
+      (a) => a >= f && a <= d
+    );
+    if (C.length === 0) {
+      const a = (f + d) / 2, h = m.reduce(
+        (x, j) => Math.abs(j - a) < Math.abs(x - a) ? j : x,
+        s
+      );
+      return console.warn(
+        `None of available media widths (${w.join("|")}) match the given constraints (${f > 0 ? `${f} ≤ ` : ""}width${d < 1 / 0 ? ` ≤ ${d}` : ""}).`,
+        `Using the closest width instead (${h}).`
+      ), [h];
+    }
+    return C;
+  }, [u, s, f, d]);
   return /* @__PURE__ */ t.jsx(
-    ht.Provider,
+    kt.Provider,
     {
       value: {
         ...e,
-        items: s,
-        aspectRatioStyle: p
+        items: c,
+        aspectRatioStyle: v,
+        usedMediaWidths: l
       },
       children: r
     }
   );
-}, gt = 500, De = 0.75, _e = 1 + De * 2;
-function ae(e, r, n) {
+}, Et = 500, Ze = 0.75, _e = 1 + Ze * 2;
+function le(e, r, n) {
   return Math.min(Math.max(e, r), n);
 }
-const Le = (e, r, n) => e + (r - e) * n, Ge = (e, r) => (e % r + r) % r, ft = ze(null), J = () => {
-  const e = Ie(ft);
+const Le = (e, r, n) => e + (r - e) * n, rt = (e, r) => (e % r + r) % r, Ct = Me(null), Xe = () => ze(Ct), ye = () => {
+  const e = Xe();
   if (!e)
     throw new Error(
-      "useGlobalContext must be used within a GlobalContextProvider"
+      "useCustomizationContext must be used within a CustomizationContextProvider"
     );
   return e;
-}, Qt = ({ children: e, ...r }) => /* @__PURE__ */ t.jsx(ft.Provider, { value: r, children: e }), xt = ze(null), q = () => {
-  const e = Ie(xt);
+}, nt = "*:size-full", ot = "*:object-cover *:size-full", cr = ({ children: e }) => {
+  const { compositionUrl: r } = re(), n = I(
+    () => document.querySelector(
+      `${Ie}[composition-url="${r}"]`
+    ),
+    [r]
+  ), o = I((a) => {
+    const h = a.querySelectorAll(Ye), x = /* @__PURE__ */ new Map();
+    for (const j of h) {
+      const k = j.getAttribute("name");
+      if (!k) {
+        console.warn("Icon element is missing a name attribute");
+        continue;
+      }
+      const g = j.innerHTML, p = g ? /* @__PURE__ */ t.jsx(
+        "div",
+        {
+          className: nt,
+          dangerouslySetInnerHTML: { __html: g }
+        }
+      ) : void 0;
+      if (!p) {
+        console.warn(`Icon "${k}" customization is empty.`);
+        continue;
+      }
+      x.set(k, { Icon: p });
+    }
+    return x;
+  }, []), [s, u] = $(
+    () => {
+      const a = n();
+      return a ? o(a) : /* @__PURE__ */ new Map();
+    }
+  );
+  O(() => {
+    const a = n();
+    if (!a)
+      return;
+    const h = new MutationObserver(() => {
+      u(o(a));
+    });
+    return h.observe(a, {
+      childList: !0,
+      subtree: !0
+    }), () => h.disconnect();
+  }, [o, n]);
+  const f = I(
+    (a) => s.get(a),
+    [s]
+  ), d = I(
+    (a, h) => {
+      u((x) => {
+        const { Icon: j, ...k } = h;
+        return new Map(
+          x.set(a, {
+            ...k,
+            Icon: /* @__PURE__ */ t.jsx("div", { className: nt, children: j })
+          })
+        );
+      });
+    },
+    []
+  ), c = I((a) => {
+    u((h) => (h.delete(a), new Map(h)));
+  }, []), v = I((a) => {
+    const h = a.querySelectorAll(
+      We
+    ), x = new Array();
+    for (const j of h) {
+      const k = j.innerHTML;
+      if (!k) {
+        console.warn("Custom media element is empty");
+        continue;
+      }
+      const g = Number(j.getAttribute("index"));
+      if (Number.isNaN(g)) {
+        console.warn("Custom media element is missing the 'index' attribute");
+        continue;
+      }
+      const p = j.getAttribute("thumbnail-src") ?? void 0, b = JSON.stringify({ index: g, thumbnailSrc: p });
+      x.push({
+        id: b,
+        Media: /* @__PURE__ */ t.jsx(
+          "div",
+          {
+            className: ot,
+            dangerouslySetInnerHTML: { __html: k }
+          }
+        ),
+        index: g,
+        thumbnailSrc: p
+      });
+    }
+    return x;
+  }, []), [l, m] = $(() => {
+    const a = n();
+    return a ? v(a) : [];
+  });
+  O(() => {
+    const a = n();
+    if (!a)
+      return;
+    const h = new MutationObserver(() => {
+      m(v(a));
+    });
+    return h.observe(a, {
+      childList: !0,
+      subtree: !0
+    }), () => h.disconnect();
+  }, [v, n]);
+  const w = I((a) => {
+    const { Media: h, ...x } = a, j = /* @__PURE__ */ t.jsx("div", { className: ot, children: h }), k = JSON.stringify(x);
+    return m((g) => [
+      ...g,
+      {
+        id: k,
+        Media: j,
+        ...x
+      }
+    ]), k;
+  }, []), C = I((a) => {
+    m(
+      (h) => h.filter((x) => x.id !== a)
+    );
+  }, []);
+  return /* @__PURE__ */ t.jsx(
+    Ct.Provider,
+    {
+      value: {
+        getIconConfig: f,
+        registerIconConfig: d,
+        unregisterIconConfig: c,
+        customMediaList: l,
+        registerCustomMedia: w,
+        unregisterCustomMedia: C
+      },
+      children: e
+    }
+  );
+}, Nt = Me(null), J = () => {
+  const e = ze(Nt);
   if (!e)
     throw new Error(
       "useControlsContext must be used within a ControlsContextProvider"
     );
   return e;
-}, er = ({
+}, dr = ({
   children: e
 }) => {
   const {
@@ -150,196 +317,220 @@ const Le = (e, r, n) => e + (r - e) * n, Ge = (e, r) => (e % r + r) % r, ft = ze
     preventFullScreen: n,
     emitEvent: o,
     isFullScreen: s,
-    requestFullscreen: p,
-    exitFullscreen: d
-  } = J(), { categories: a, items: l } = re(), [w, m] = F(l.map(() => null)), c = M(
-    (D, Q) => {
-      m(
-        (ge) => ge.map((oe, Ot) => Ot === D ? Q : oe)
+    requestFullscreen: u,
+    exitFullscreen: f
+  } = re(), { customMediaList: d } = ye(), { categories: c, items: v } = oe(), l = te(() => {
+    const P = new Array(
+      ...v
+    ), K = d.slice().sort((X, B) => X.index < 0 && B.index < 0 ? B.index - X.index : X.index < 0 ? 1 : B.index < 0 ? -1 : X.index - B.index);
+    for (const X of K) {
+      let B = X.index;
+      B < 0 && (B = P.length + B + 1), P.splice(B, 0, {
+        type: "custom",
+        ...X
+      });
+    }
+    return P;
+  }, [v, d]), [m, w] = $(l.map(() => null));
+  O(() => {
+    w(l.map(() => null));
+  }, [l]);
+  const C = I(
+    (P, K) => {
+      w(
+        (X) => X.map((B, Ut) => Ut === P ? K : B)
       );
     },
     []
-  ), [f, _] = F(0), [b, y] = F(null), L = b ?? f, x = l[L], T = w[L], [h, u] = F(
+  ), [a, h] = $(0), [x, j] = $(null), k = x ?? a, g = l[k], p = m[k], [b, E] = $(
     null
-  ), g = !!h, v = M(() => u(null), []), z = M(() => {
-    if (g || b !== null)
+  ), L = !!b, D = I(() => E(null), []), T = I(() => {
+    if (L || x !== null)
       return;
-    const D = f - 1;
-    D >= 0 ? y(D) : r && (u("first_to_last"), y(l.length - 1));
+    const P = a - 1;
+    P >= 0 ? j(P) : r && (E("first_to_last"), j(l.length - 1));
   }, [
-    g,
-    b,
-    f,
+    L,
+    x,
+    a,
     r,
     l.length
-  ]), H = M(() => {
-    if (g || b !== null)
+  ]), N = I(() => {
+    if (L || x !== null)
       return;
-    const D = f + 1;
-    D < l.length ? y(D) : r && (u("last_to_first"), y(0));
+    const P = a + 1;
+    P < l.length ? j(P) : r && (E("last_to_first"), j(0));
   }, [
-    g,
-    b,
-    f,
+    L,
+    x,
+    a,
     l.length,
     r
-  ]), S = M(
-    (D) => {
-      const Q = Math.min(f, D), ge = Math.max(f, D);
-      w.slice(Q, ge + 1).filter((oe) => oe === null).length > 2 && u("instant"), y(D);
+  ]), z = I(
+    (P) => {
+      const K = Math.min(a, P), X = Math.max(a, P);
+      m.slice(K, X + 1).filter((B) => B === null).length > 2 && E("instant"), j(P);
     },
-    [f, w]
+    [a, m]
   );
-  Z(() => {
-    o(st, {
-      index: L,
-      item: x
+  O(() => {
+    o(pt, {
+      index: k,
+      item: g
     });
-  }, [x, o, L]);
-  const j = te(() => {
-    for (const D of a)
-      if (D.items.includes(x))
-        return D.id;
+  }, [g, o, k]);
+  const S = te(() => {
+    let P;
+    if (g.type === "custom") {
+      const K = l.slice(0, k).reverse().find((X) => X.type !== "custom") ?? l.slice(k + 1).find((X) => X.type !== "custom");
+      if (!K)
+        throw new Error("No non-custom item found");
+      P = K;
+    } else
+      P = g;
+    for (const K of c)
+      if (K.items.includes(P))
+        return K.id;
     throw new Error("Current item not found in any category");
-  }, [a, x]), E = M(
-    (D) => {
-      const Q = a.find(({ id: oe }) => oe === D)?.items[0];
-      if (Q === void 0)
+  }, [c, g, l, k]), V = I(
+    (P) => {
+      const K = c.find(({ id: B }) => B === P)?.items[0];
+      if (K === void 0)
         throw new Error("Failed to find target category");
-      const ge = l.findIndex((oe) => oe === Q);
-      S(ge);
+      const X = l.findIndex((B) => B === K);
+      z(X);
     },
-    [a, l, S]
-  ), I = te(() => {
-    switch (x.type) {
+    [c, l, z]
+  ), R = te(() => {
+    switch (g.type) {
       case "image":
-        return !!x.hotspots?.length;
+        return !!g.hotspots?.length;
       case "360":
-        return T === "running";
-      case "video":
+        return p === "running";
+      default:
         return !1;
     }
-  }, [x, T]), [V, P] = F(!0), C = M(() => {
-    const D = !V;
-    P(D), o(D ? lt : ct);
-  }, [o, V]), i = te(() => {
-    switch (x.type) {
-      case "image":
-      case "360":
-        return !0;
+  }, [g, p]), [y, i] = $(!0), _ = I(() => {
+    const P = !y;
+    i(P), o(P ? gt : xt);
+  }, [o, y]), M = te(() => {
+    switch (g.type) {
       case "video":
-        return T !== "running";
+        return p !== "running";
+      default:
+        return !0;
     }
-  }, [x, T]), [k, N] = F(!1), O = M(() => {
-    const D = !k;
-    N(D), o(D ? dt : ut);
-  }, [o, k]), [A, Y] = F(null), $ = M(() => Y(null), []), K = !!A, G = te(() => {
-    switch (x.type) {
+  }, [g, p]), [A, F] = $(!1), U = I(() => {
+    const P = !A;
+    F(P), o(P ? wt : vt);
+  }, [o, A]), [W, Y] = $(null), q = I(() => Y(null), []), ee = !!W, fe = te(() => {
+    switch (g.type) {
       case "image":
         return !0;
       case "360":
-        return T === "running";
-      case "video":
+        return p === "running";
+      default:
         return !1;
     }
-  }, [x.type, T]), [X, ne] = F(1), ye = X !== 1, pe = X < _e, je = X > 1, ie = M((D) => {
-    ne((Q) => ae(Q + D, 1, _e));
-  }, []), he = M(() => ne(1), []), Me = M(() => ie(De), [ie]), St = M(() => ie(-De), [ie]), Te = M(() => {
-    he(), $();
-  }, [he, $]), [le, Rt] = F(!1), [Ve, $e] = F(), [Se, Ye] = F(!1), ce = M(
-    async (D) => {
-      Te(), Rt(D), o(D ? at : it);
+  }, [g.type, p]), [se, ae] = $(1), je = se !== 1, Se = se < _e, Ve = se > 1, ce = I((P) => {
+    ae((K) => le(K + P, 1, _e));
+  }, []), Te = I(() => ae(1), []), Dt = I(() => ce(Ze), [ce]), Ft = I(() => ce(-Ze), [ce]), He = I(() => {
+    Te(), q();
+  }, [Te, q]), [de, $t] = $(!1), [Re, Je] = $(), [Ae, Qe] = $(!1), ue = I(
+    async (P) => {
+      He(), $t(P), o(P ? ht : ft);
     },
-    [o, Te]
-  ), de = M(() => {
-    clearTimeout(Ve);
-    const D = setTimeout(() => {
-      $e(void 0);
-    }, gt);
-    $e(D);
-  }, [Ve]), Re = M(async () => {
-    if (de(), !n) {
-      const D = await p();
-      if (Ye(!D), D)
+    [o, He]
+  ), me = I(() => {
+    clearTimeout(Re);
+    const P = setTimeout(() => {
+      Je(void 0);
+    }, Et);
+    Je(P);
+  }, [Re]), Pe = I(async () => {
+    if (me(), !n) {
+      const P = await u();
+      if (Qe(!P), P)
         return;
     }
-    ce(!0);
+    ue(!0);
   }, [
     n,
-    ce,
-    p,
-    de
-  ]), He = M(async () => {
-    de(), !(!n && (Ye(!1), await d())) && ce(!1);
+    ue,
+    u,
+    me
+  ]), Oe = I(async () => {
+    me(), !(!n && (Qe(!1), await f())) && ue(!1);
   }, [
     n,
-    ce,
-    d,
-    de
-  ]), Ht = M(() => {
-    le ? He() : Re();
-  }, [He, Re, le]);
-  return Z(() => {
-    n || Se && le || s !== le && (de(), ce(s));
+    ue,
+    f,
+    me
+  ]), Zt = I(() => {
+    de ? Oe() : Pe();
+  }, [Oe, Pe, de]);
+  return O(() => {
+    n || Ae && de || s !== de && (me(), ue(s));
   }, [
     n,
-    ce,
-    le,
-    Se,
+    ue,
+    de,
+    Ae,
     s,
-    de
+    me
   ]), /* @__PURE__ */ t.jsx(
-    xt.Provider,
+    Nt.Provider,
     {
       value: {
-        setItemInteraction: c,
+        items: l,
+        setItemInteraction: C,
         slidable: l.length > 1,
-        carrouselItemIndex: f,
-        setCarrouselItemIndex: _,
-        itemIndexCommand: b,
-        setItemIndexCommand: y,
-        masterItemIndex: L,
-        specialCommand: h,
-        isRunningSpecialCommand: g,
-        finishSpecialCommand: v,
-        prevItem: z,
-        nextItem: H,
-        scrollToItemIndex: S,
-        displayedCategoryId: j,
-        changeCategory: E,
-        enableHotspotsControl: I,
-        showHotspots: V,
-        toggleHotspots: C,
-        showGalleryControls: i,
-        showGallery: k,
-        toggleGallery: O,
-        shownDetails: A,
-        isShowingDetails: K,
+        carrouselItemIndex: a,
+        setCarrouselItemIndex: h,
+        itemIndexCommand: x,
+        setItemIndexCommand: j,
+        masterItemIndex: k,
+        specialCommand: b,
+        isRunningSpecialCommand: L,
+        finishSpecialCommand: D,
+        prevItem: T,
+        nextItem: N,
+        scrollToItemIndex: z,
+        displayedCategoryId: S,
+        changeCategory: V,
+        enableHotspotsControl: R,
+        showHotspots: y,
+        toggleHotspots: _,
+        showGalleryControls: M,
+        showGallery: A,
+        toggleGallery: U,
+        shownDetails: W,
+        isShowingDetails: ee,
         setShownDetails: Y,
-        resetShownDetails: $,
-        showZoomControls: G,
-        zoom: X,
-        isZooming: ye,
-        setZoom: ne,
-        resetZoom: he,
-        canZoomIn: pe,
-        zoomIn: Me,
-        canZoomOut: je,
-        zoomOut: St,
-        resetView: Te,
-        extendMode: le,
-        enableExtendMode: Re,
-        disableExtendMode: He,
-        toggleExtendMode: Ht,
-        extendTransition: !!Ve,
-        fakeFullScreen: Se
+        resetShownDetails: q,
+        showZoomControls: fe,
+        zoom: se,
+        isZooming: je,
+        setZoom: ae,
+        resetZoom: Te,
+        canZoomIn: Se,
+        zoomIn: Dt,
+        canZoomOut: Ve,
+        zoomOut: Ft,
+        resetView: He,
+        extendMode: de,
+        enableExtendMode: Pe,
+        disableExtendMode: Oe,
+        toggleExtendMode: Zt,
+        extendTransition: !!Re,
+        fakeFullScreen: Ae
       },
       children: e
     }
   );
-}, wt = ["left", "center", "right", "fullW"], vt = ["top", "middle", "bottom", "fullH"], tr = [
-  ...wt,
-  ...vt,
+}, Lt = ["left", "center", "right", "fullW"], _t = ["top", "middle", "bottom", "fullH"], ur = [
+  ...Lt,
+  ..._t,
   "top-left",
   "top-center",
   "top-right",
@@ -357,24 +548,24 @@ const Le = (e, r, n) => e + (r - e) * n, Ge = (e, r) => (e % r + r) % r, ft = ze
   "fullH-right",
   "fullW-fullW"
 ];
-function rr(e) {
-  return wt.includes(e);
+function mr(e) {
+  return Lt.includes(e);
 }
-function nr(e) {
-  return vt.includes(e);
+function pr(e) {
+  return _t.includes(e);
 }
-function or(e) {
-  return tr.includes(e);
+function hr(e) {
+  return ur.includes(e);
 }
-function sr(e) {
-  if (!or(e))
+function fr(e) {
+  if (!hr(e))
     throw new Error(`Invalid position: ${e}`);
-  return nr(e) ? [e, void 0] : rr(e) ? [void 0, e] : e.split("-");
+  return pr(e) ? [e, void 0] : mr(e) ? [void 0, e] : e.split("-");
 }
-function R(...e) {
+function H(...e) {
   return e.filter((r) => !!r).map((r) => r.trim()).join(" ");
 }
-function ar(e) {
+function gr(e) {
   switch (e) {
     case "left":
       return "left-1 small:left-2";
@@ -386,7 +577,7 @@ function ar(e) {
       return "inset-x-1 small:inset-x-2";
   }
 }
-function bt(e) {
+function Mt(e) {
   switch (e) {
     case "top":
       return "top-1 small:top-2";
@@ -398,82 +589,25 @@ function bt(e) {
       return "inset-y-1 small:inset-y-2";
   }
 }
-function ir({
+function xr({
   positionX: e,
   positionY: r
 }) {
   const n = new Array();
-  return e && n.push(ar(e)), r && n.push(bt(r)), n.join(" ");
+  return e && n.push(gr(e)), r && n.push(Mt(r)), n.join(" ");
 }
-function ue(e) {
-  const [r, n] = sr(e);
-  return ir({ positionX: n, positionY: r });
+function pe(e) {
+  const [r, n] = fr(e);
+  return xr({ positionX: n, positionY: r });
 }
-const yt = ze(null), jt = () => Ie(yt), Fe = () => {
-  const e = jt();
-  if (!e)
-    throw new Error(
-      "useCustomizationContext must be used within a CustomizationContextProvider"
-    );
-  return e;
-}, lr = ({ children: e }) => {
-  const [r, n] = F(
-    /* @__PURE__ */ new Map()
-  ), o = M(
-    (d) => {
-      const a = r.get(d);
-      if (a)
-        return a;
-      const l = document.querySelector(
-        `${Ae}[name="${d}"]`
-      );
-      if (!l)
-        return;
-      const w = l.getAttribute("color") ?? void 0, m = l.innerHTML, c = m ? /* @__PURE__ */ t.jsx(
-        "div",
-        {
-          className: "size-full",
-          dangerouslySetInnerHTML: { __html: m }
-        }
-      ) : void 0;
-      if (!(!w && !c))
-        return { Icon: c, color: w };
-    },
-    [r]
-  ), s = M(
-    (d, a) => {
-      n((l) => new Map(l.set(d, a)));
-    },
-    []
-  ), p = M((d) => {
-    n((a) => (a.delete(d), new Map(a)));
-  }, []);
-  return /* @__PURE__ */ t.jsx(
-    yt.Provider,
-    {
-      value: {
-        getIconConfig: o,
-        setIconConfig: s,
-        resetIconConfig: p
-      },
-      children: e
-    }
-  );
-}, U = ({
+const G = ({
   customizationKey: e,
-  className: r = "",
+  className: r,
   children: n
 }) => {
-  const { getIconConfig: o } = Fe(), s = o(e);
-  return s ? /* @__PURE__ */ t.jsx(
-    "div",
-    {
-      className: r,
-      style: { color: s?.color },
-      children: s?.Icon ?? n
-    }
-  ) : n;
-}, cr = ({ className: e }) => /* @__PURE__ */ t.jsx(U, { className: e, customizationKey: "UI_CLOSE", children: /* @__PURE__ */ t.jsx(
+  const { getIconConfig: o } = ye(), s = o(e)?.Icon;
+  return s ? r ? /* @__PURE__ */ t.jsx("div", { className: r, children: s }) : s : n;
+}, wr = ({ className: e }) => /* @__PURE__ */ t.jsx(G, { className: e, customizationKey: "UI_CLOSE", children: /* @__PURE__ */ t.jsx(
   "svg",
   {
     className: e,
@@ -490,7 +624,7 @@ const yt = ze(null), jt = () => Ie(yt), Fe = () => {
       }
     )
   }
-) }), dr = {
+) }), vr = {
   fill: {
     primary: "bg-primary text-primary-foreground hover:opacity-80",
     neutral: "bg-background text-neutral-foreground hover:opacity-80"
@@ -499,35 +633,35 @@ const yt = ze(null), jt = () => Ie(yt), Fe = () => {
     primary: "bg-transparent text-foreground hover:bg-primary/25",
     neutral: "bg-transparent text-background hover:bg-foreground/25"
   }
-}, ur = {
+}, br = {
   button: "h-8 px-2",
   icon: "size-8 p-2"
-}, B = ({
+}, Q = ({
   variant: e = "fill",
   shape: r = "button",
   color: n = "primary",
   className: o,
   children: s,
-  ...p
+  ...u
 }) => {
-  const d = dr[e][n], a = ur[r];
+  const f = vr[e][n], d = br[r];
   return /* @__PURE__ */ t.jsx(
     "button",
     {
-      className: R(
+      className: H(
         "flex items-center justify-center rounded-ui text-sm transition-all disabled:opacity-60",
+        f,
         d,
-        a,
         o
       ),
-      ...p,
+      ...u,
       children: s
     }
   );
-}, Ct = (e) => /* @__PURE__ */ t.jsx(B, { color: "neutral", shape: "icon", ...e, children: /* @__PURE__ */ t.jsx(cr, { className: "size-full" }) }), kt = ({ text: e, className: r }) => /* @__PURE__ */ t.jsxs(
+}, zt = (e) => /* @__PURE__ */ t.jsx(Q, { color: "neutral", shape: "icon", ...e, children: /* @__PURE__ */ t.jsx(wr, { className: "size-full" }) }), It = ({ text: e, className: r }) => /* @__PURE__ */ t.jsxs(
   "div",
   {
-    className: R(
+    className: H(
       "flex size-full flex-col items-center justify-center gap-y-4",
       r
     ),
@@ -542,121 +676,117 @@ const yt = ze(null), jt = () => Ie(yt), Fe = () => {
       /* @__PURE__ */ t.jsx("div", { className: "text-2xl font-bold", children: e })
     ]
   }
-), mr = {
+), yr = {
   primary: "border-primary",
   foreground: "border-foreground",
   background: "border-background"
-}, pr = {
+}, jr = {
   sm: "size-4 border",
   md: "size-8 border-2",
   lg: "size-12 border-4"
-}, Et = ({
+}, St = ({
   color: e = "foreground",
   size: r = "md"
 }) => {
-  const n = mr[e], o = pr[r];
+  const n = yr[e], o = jr[r];
   return /* @__PURE__ */ t.jsx(
     "div",
     {
-      className: R(
+      className: H(
         "inline-block animate-rotation rounded-full border-b-transparent",
         o,
         n
       )
     }
   );
-}, me = ({
+}, he = ({
   src: e,
   className: r,
   onLoad: n,
   imgInPlayerWidthRatio: o = 1,
   onlyThumbnail: s,
-  fadeIn: p,
-  ...d
+  fadeIn: u,
+  ...f
 }) => {
-  const {
-    minMediaWidth: a,
-    maxMediaWidth: l,
-    mediaLoadStrategy: w,
-    playerInViewportWidthRatio: m
-  } = J(), { imageHdWidth: c, imageSubWidths: f } = re(), [_, b] = te(() => {
-    const x = f.concat(c).sort((u, g) => u - g).filter((u) => !(a && u < a || l && u > l));
-    if (x.length === 0)
-      throw new Error("No image widths available for the given constraints");
-    const T = x.map((u) => `${u !== c ? Gt(e, u) : e} ${u}w`);
-    let h;
+  const { mediaLoadStrategy: d, playerInViewportWidthRatio: c } = re(), { imageHdWidth: v, usedMediaWidths: l } = oe(), [m, w] = te(() => {
+    const h = l.map((j) => `${j !== v ? nr(e, j) : e} ${j}w`);
+    let x;
     if (s)
-      h = [`${x.shift()}px`];
+      x = [`${l[0]}px`];
     else {
-      const u = 1 / (o * m);
-      switch (w) {
+      const j = 1 / (o * c);
+      switch (d) {
         case "quality": {
-          const g = x.pop();
-          h = x.map(
-            (v) => `(max-width: ${u * v}px) ${v}px`
-          ), h.push(`${g}px`);
-          break;
-        }
-        case "speed": {
-          const g = x.shift();
-          h = x.reverse().map(
-            (v) => `(min-width: ${u * v}px) ${v}px`
-          ), h.push(`${g}px`);
+          const k = [...l], g = k.pop();
+          x = k.map(
+            (p) => `(max-width: ${j * p}px) ${p}px`
+          ), x.push(`${g}px`);
           break;
         }
         case "balanced": {
-          h = [];
-          for (let g = 0; g < x.length - 1; g++) {
-            const v = x[g], z = x[g + 1], H = (v + z) / 2;
-            h.push(
-              `(max-width: ${u * H}px) ${v}px`
+          x = [];
+          for (let k = 0; k < l.length - 1; k++) {
+            const g = l[k], p = l[k + 1], b = Math.round((g + p) / 2);
+            x.push(
+              `(max-width: ${j * b}px) ${g}px`
             );
           }
-          h.push(`${x[x.length - 1]}px`);
+          x.push(`${l[l.length - 1]}px`);
+          break;
+        }
+        case "speed": {
+          const k = [...l], g = k.shift();
+          x = k.reverse().map(
+            (p) => `(min-width: ${j * p}px) ${p}px`
+          ), x.push(`${g}px`);
           break;
         }
       }
     }
-    return [T.join(", "), h.join(", ")];
+    return [h.join(", "), x.join(", ")];
   }, [
-    c,
-    w,
-    f,
+    v,
     o,
-    l,
-    a,
+    d,
     s,
-    m,
-    e
-  ]), [y, L] = F();
-  return Z(() => {
-    if (y === !0)
+    c,
+    e,
+    l
+  ]), [C, a] = $();
+  return O(() => {
+    if (C === !0)
       return;
-    const x = setTimeout(() => {
-      L((T) => T ?? !1);
+    const h = setTimeout(() => {
+      a((x) => x ?? !1);
     }, 30);
-    return () => clearTimeout(x);
-  }, [y]), /* @__PURE__ */ t.jsx(
+    return () => clearTimeout(h);
+  }, [C]), /* @__PURE__ */ t.jsx(
     "img",
     {
       src: e,
-      srcSet: _,
-      sizes: b,
-      className: R(
+      srcSet: m,
+      sizes: w,
+      className: H(
         r,
-        p && R(
-          y !== void 0 && "transition-opacity duration-200",
-          y === !1 && "opacity-0",
-          y === !0 && "opacity-100"
+        u && H(
+          C !== void 0 && "transition-opacity duration-200",
+          C === !1 && "opacity-0",
+          C === !0 && "opacity-100"
         )
       ),
-      onLoad: (x) => {
-        L(!0), n?.(x);
+      onLoad: (h) => {
+        a(!0), n?.(h);
       },
-      ...d
+      ...f
     }
   );
-}, We = ({ className: e }) => /* @__PURE__ */ t.jsx(U, { className: e, customizationKey: "UI_PLAY", children: /* @__PURE__ */ t.jsx(
+}, Vt = ({ className: e }) => /* @__PURE__ */ t.jsx(G, { className: e, customizationKey: "UI_IMAGE", children: /* @__PURE__ */ t.jsx("svg", { className: e, viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ t.jsx(
+  "path",
+  {
+    d: "M9.5 2.5V9.5H2.5V2.5H9.5ZM9.5 1.5H2.5C1.95 1.5 1.5 1.95 1.5 2.5V9.5C1.5 10.05 1.95 10.5 2.5 10.5H9.5C10.05 10.5 10.5 10.05 10.5 9.5V2.5C10.5 1.95 10.05 1.5 9.5 1.5ZM7.07 5.93L5.57 7.865L4.5 6.57L3 8.5H9L7.07 5.93Z",
+    fill: "currentColor"
+  }
+) }) }), Be = ({ className: e }) => /* @__PURE__ */ t.jsx(G, { className: e, customizationKey: "UI_PLAY", children: /* @__PURE__ */ t.jsx(
   "svg",
   {
     className: e,
@@ -668,7 +798,7 @@ const yt = ze(null), jt = () => Ie(yt), Fe = () => {
     strokeLinejoin: "round",
     children: /* @__PURE__ */ t.jsx("polygon", { points: "6 3 20 12 6 21 6 3" })
   }
-) }), Nt = ({ className: e }) => /* @__PURE__ */ t.jsx(U, { className: e, customizationKey: "UI_360", children: /* @__PURE__ */ t.jsxs(
+) }), Tt = ({ className: e }) => /* @__PURE__ */ t.jsx(G, { className: e, customizationKey: "UI_360", children: /* @__PURE__ */ t.jsxs(
   "svg",
   {
     className: e,
@@ -723,427 +853,454 @@ const yt = ze(null), jt = () => Ie(yt), Fe = () => {
       /* @__PURE__ */ t.jsx("defs", { children: /* @__PURE__ */ t.jsx("clipPath", { id: "clip0_134_843", children: /* @__PURE__ */ t.jsx("rect", { width: "56", height: "56", fill: "white" }) }) })
     ]
   }
-) }), Be = ({
+) }), kr = ({
+  src: e,
+  withCdn: r
+}) => {
+  const { permanentGallery: n } = re();
+  if (!e)
+    return null;
+  const o = "size-full object-cover";
+  return r ? /* @__PURE__ */ t.jsx(
+    he,
+    {
+      className: o,
+      src: e,
+      onlyThumbnail: !0,
+      fadeIn: !n
+    }
+  ) : /* @__PURE__ */ t.jsx("img", { className: o, src: e });
+}, Fe = ({
   children: e
 }) => {
-  const { extendMode: r } = q();
+  const { extendMode: r } = J();
   return /* @__PURE__ */ t.jsx(
     "div",
     {
-      className: R(
+      className: H(
         "flex aspect-square h-3/4 items-center justify-center rounded-full bg-foreground/50 p-1",
         r && "large:h-3/5 large:p-2"
       ),
       children: e
     }
   );
-}, hr = ({ item: e }) => {
-  const { permanentGallery: r } = J(), { aspectRatioStyle: n } = re(), { type: o } = e;
-  let s;
-  switch (o) {
+}, Er = ({ item: e }) => {
+  const { aspectRatioStyle: r } = oe(), { type: n } = e;
+  let o, s;
+  switch (n) {
     case "360":
-      s = e.images[0].src;
+      o = e.images[0].src, s = !0;
       break;
     case "image":
-      s = e.src;
+      o = e.src, s = !0;
       break;
     case "video":
-      s = e.poster;
+      o = e.poster, s = !0;
+      break;
+    case "custom":
+      o = e.thumbnailSrc, s = !1;
       break;
   }
-  const p = /* @__PURE__ */ t.jsx(
-    me,
-    {
-      className: "size-full object-cover",
-      src: s,
-      onlyThumbnail: !0,
-      fadeIn: !r
-    }
-  );
-  let d;
-  switch (o) {
+  const u = /* @__PURE__ */ t.jsx(kr, { src: o, withCdn: s });
+  let f;
+  switch (n) {
     case "360":
-      d = /* @__PURE__ */ t.jsx(Be, { children: /* @__PURE__ */ t.jsx(Nt, { className: "size-full text-primary-light" }) });
+      f = /* @__PURE__ */ t.jsx(Fe, { children: /* @__PURE__ */ t.jsx(Tt, { className: "size-full text-primary-light" }) });
       break;
     case "video":
-      d = /* @__PURE__ */ t.jsx(Be, { children: /* @__PURE__ */ t.jsx(We, { className: "size-full p-0.5 text-background" }) });
+      f = /* @__PURE__ */ t.jsx(Fe, { children: /* @__PURE__ */ t.jsx(Be, { className: "size-full p-0.5 text-background" }) });
+      break;
+    case "custom":
+      f = o ? null : /* @__PURE__ */ t.jsx(Fe, { children: /* @__PURE__ */ t.jsx(Vt, { className: "size-full p-0.5 text-background" }) });
       break;
   }
-  return /* @__PURE__ */ t.jsxs("div", { className: "relative bg-foreground/30", style: n, children: [
-    p,
-    d && /* @__PURE__ */ t.jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-foreground/25", children: d })
+  return /* @__PURE__ */ t.jsxs("div", { className: "relative bg-foreground/30", style: r, children: [
+    u,
+    f && /* @__PURE__ */ t.jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-foreground/25", children: f })
   ] });
-}, gr = {
+}, Cr = {
   primary: "bg-primary/50",
   neutral: "bg-neutral/50",
   background: "bg-background/50",
   foreground: "bg-foreground/50"
-}, Lt = ({
+}, Ht = ({
   color: e = "neutral",
   orientation: r = "horizontal"
 }) => {
-  const n = gr[e], o = r === "horizontal" ? "h-px w-full" : "w-px h-full";
-  return /* @__PURE__ */ t.jsx("div", { className: R(n, o) });
-}, _t = ({
+  const n = Cr[e], o = r === "horizontal" ? "h-px w-full" : "w-px h-full";
+  return /* @__PURE__ */ t.jsx("div", { className: H(n, o) });
+}, Rt = ({
   className: e = "",
   containerClassName: r = ""
 }) => {
-  const { hideCategories: n, infiniteCarrousel: o, permanentGallery: s, isFullScreen: p } = J(), { categories: d, items: a, aspectRatioStyle: l } = re(), {
-    extendMode: w,
-    extendTransition: m,
-    masterItemIndex: c,
-    prevItem: f,
-    nextItem: _,
-    scrollToItemIndex: b,
-    resetView: y
-  } = q(), L = te(() => {
+  const { hideCategories: n, infiniteCarrousel: o, permanentGallery: s, isFullScreen: u } = re(), { categories: f, aspectRatioStyle: d } = oe(), {
+    items: c,
+    extendMode: v,
+    extendTransition: l,
+    masterItemIndex: m,
+    prevItem: w,
+    nextItem: C,
+    scrollToItemIndex: a,
+    resetView: h
+  } = J(), x = te(() => {
     if (n)
       return [];
-    const j = new Array();
-    let E = 0;
-    for (let I = 0; I < d.length - 1; I++) {
-      const V = d[I].items.length;
-      j.push(E + V), E += V;
+    const N = new Array();
+    let z = f[0];
+    const S = (V) => f.find(
+      (R) => R.items.some((y) => y === V)
+    );
+    for (let V = 0; V < c.length; V++) {
+      const R = c[V], y = S(R);
+      y && y !== z && (N.push(V), z = y);
     }
-    return j;
-  }, [d, n]), x = W(null), T = M(() => {
-    if (!x.current)
+    return N;
+  }, [f, n, c]), j = Z(null), k = I(() => {
+    if (!j.current)
       throw new Error("slider.current is null");
-    return x.current;
-  }, []), h = W(!1), u = W(
+    return j.current;
+  }, []), g = Z(!1), p = Z(
     null
-  ), [g, v] = F(!1), z = M(
-    (j, E) => {
-      const I = T(), V = I.clientWidth, P = I.scrollWidth / a.length, C = (j + 1 / 2) * P - V / 2, i = I.scrollWidth - I.clientWidth;
-      I.scrollTo({
-        left: ae(C, 0, i),
-        behavior: E
+  ), [b, E] = $(!1), L = I(
+    (N, z) => {
+      const S = k(), V = S.clientWidth, R = S.scrollWidth / c.length, y = (N + 1 / 2) * R - V / 2, i = S.scrollWidth - S.clientWidth;
+      S.scrollTo({
+        left: le(y, 0, i),
+        behavior: z
       });
     },
-    [a.length, T]
+    [c.length, k]
   );
-  Z(() => {
-    const j = x.current;
-    if (!j)
+  O(() => {
+    const N = j.current;
+    if (!N)
       return;
-    const E = (P) => {
-      P.preventDefault(), h.current = !0, u.current = {
-        x: P.pageX - j.offsetLeft,
-        scrollLeft: j.scrollLeft
+    const z = (R) => {
+      R.preventDefault(), g.current = !0, p.current = {
+        x: R.pageX - N.offsetLeft,
+        scrollLeft: N.scrollLeft
       };
-    }, I = (P) => {
-      if (!h.current)
+    }, S = (R) => {
+      if (!g.current)
         return;
-      if (u.current === null)
+      if (p.current === null)
         throw new Error("[onMouseMove] scrollStart is null");
-      const C = P.pageX - j.offsetLeft - u.current.x;
-      if (!g && Math.abs(C) < 5)
+      const y = R.pageX - N.offsetLeft - p.current.x;
+      if (!b && Math.abs(y) < 5)
         return;
-      const i = u.current.scrollLeft - C;
-      v(!0), requestAnimationFrame(() => {
-        j.scrollLeft = i;
+      const i = p.current.scrollLeft - y;
+      E(!0), requestAnimationFrame(() => {
+        N.scrollLeft = i;
       });
     }, V = () => {
-      h.current && (h.current = !1, requestAnimationFrame(() => {
-        v(!1);
+      g.current && (g.current = !1, requestAnimationFrame(() => {
+        E(!1);
       }));
     };
-    return j.addEventListener("mousedown", E), document.addEventListener("mousemove", I), document.addEventListener("mouseleave", V), document.addEventListener("mouseup", V), document.addEventListener("contextmenu", V), () => {
-      j.removeEventListener("mousedown", E), document.removeEventListener("mousemove", I), document.removeEventListener("mouseleave", V), document.removeEventListener("mouseup", V), document.removeEventListener("contextmenu", V);
+    return N.addEventListener("mousedown", z), document.addEventListener("mousemove", S), document.addEventListener("mouseleave", V), document.addEventListener("mouseup", V), document.addEventListener("contextmenu", V), () => {
+      N.removeEventListener("mousedown", z), document.removeEventListener("mousemove", S), document.removeEventListener("mouseleave", V), document.removeEventListener("mouseup", V), document.removeEventListener("contextmenu", V);
     };
-  }, [g]);
-  const H = W(c);
-  Z(() => {
-    x.current && (z(c, "smooth"), H.current = c);
-  }, [c, z]), Z(() => {
-    x.current && z(H.current, "instant");
+  }, [b]);
+  const D = Z(m);
+  O(() => {
+    j.current && (L(m, "smooth"), D.current = m);
+  }, [m, L]), O(() => {
+    j.current && L(D.current, "instant");
   }, [
-    z,
+    L,
     // - Run the effect when those values change
-    p,
-    w,
-    m
+    u,
+    v,
+    l
   ]);
-  const S = (j, E) => {
-    g || (o && E === a.length - 1 && c === 0 ? f() : o && E === 0 && c === a.length - 1 ? _() : b(E), y());
+  const T = (N) => {
+    b || (o && N === c.length - 1 && m === 0 ? w() : o && N === 0 && m === c.length - 1 ? C() : a(N), h());
   };
   return /* @__PURE__ */ t.jsx(
     "div",
     {
-      ref: x,
-      className: R(
+      ref: j,
+      className: H(
         "relative w-full overflow-x-auto no-scrollbar",
-        g ? "cursor-grab" : "cursor-grabbing",
+        b ? "cursor-grab" : "cursor-grabbing",
         e
       ),
       children: /* @__PURE__ */ t.jsx(
         "div",
         {
-          className: R(
+          className: H(
             "flex h-10 w-fit gap-1 small:h-12 small:gap-2",
-            w && "large:h-20 large:gap-4",
+            v && "large:h-20 large:gap-4",
             r
           ),
-          children: a.map((j, E) => /* @__PURE__ */ t.jsxs(Pt, { children: [
-            L.includes(E) && /* @__PURE__ */ t.jsx("div", { className: "my-2", children: /* @__PURE__ */ t.jsx(
-              Lt,
+          children: c.map((N, z) => /* @__PURE__ */ t.jsxs(Wt, { children: [
+            x.includes(z) && /* @__PURE__ */ t.jsx("div", { className: "my-2", children: /* @__PURE__ */ t.jsx(
+              Ht,
               {
-                color: s && !p ? "neutral" : "background",
+                color: s && !u ? "neutral" : "background",
                 orientation: "vertical"
               }
             ) }),
             /* @__PURE__ */ t.jsx(
               "div",
               {
-                className: R(
+                className: H(
                   "relative h-full overflow-hidden rounded-gallery transition-radius",
-                  !g && "cursor-pointer",
+                  !b && "cursor-pointer",
                   "after:absolute after:inset-0 after:rounded-gallery after:border-2 after:border-primary after:transition-all",
-                  E === c ? "after:opacity-100" : "after:opacity-0 hover:after:opacity-70"
+                  z === m ? "after:opacity-100" : "after:opacity-0 hover:after:opacity-70"
                 ),
-                style: l,
-                onClick: () => S(j, E),
-                children: /* @__PURE__ */ t.jsx(hr, { item: j })
+                style: d,
+                onClick: () => T(z),
+                children: /* @__PURE__ */ t.jsx(Er, { item: N })
               }
             )
-          ] }, E))
+          ] }, z))
         }
       )
     }
   );
-}, zt = (e) => 1 - Math.pow(1 - e, 2), qe = (e, r) => Math.sqrt(
+}, At = (e) => 1 - Math.pow(1 - e, 2), Nr = ({
+  Media: e,
+  itemIndex: r
+}) => {
+  const { setItemInteraction: n } = J();
+  return O(() => {
+    n(r, "ready");
+  }, [r, n]), e;
+}, st = (e, r) => Math.sqrt(
   (e.clientX - r.clientX) ** 2 + (e.clientY - r.clientY) ** 2
-), fr = ({
+), Lr = ({
   onlyPreload: e,
   ...r
 }) => {
-  const { zoom: n, isZooming: o, setZoom: s } = q(), p = W(null), d = W(null), a = M((h) => {
-    if (!d.current)
+  const { zoom: n, isZooming: o, setZoom: s } = J(), u = Z(null), f = Z(null), d = I((g) => {
+    if (!f.current)
       throw new Error(
-        `[${h ?? "getTransformElementOrThrow"}] transformElementRef.current is null`
+        `[${g ?? "getTransformElementOrThrow"}] transformElementRef.current is null`
       );
-    return d.current;
-  }, []), l = W(!1), w = W(null), m = W(/* @__PURE__ */ new Map()), c = W({ x: 0, y: 0, scale: 1 }), f = W(null), _ = M(
-    (h) => {
-      const u = a("setTransformStyle"), {
-        x: g,
-        y: v,
-        scale: z
+    return f.current;
+  }, []), c = Z(!1), v = Z(null), l = Z(/* @__PURE__ */ new Map()), m = Z({ x: 0, y: 0, scale: 1 }), w = Z(null), C = I(
+    (g) => {
+      const p = d("setTransformStyle"), {
+        x: b,
+        y: E,
+        scale: L
       } = {
-        ...c.current,
-        ...h
-      }, H = ae(z, 1, _e), S = u.clientWidth, j = u.clientHeight, E = S * H, I = j * H, V = ae(g, -(E - S), 0), P = ae(v, -(I - j), 0);
-      c.current = { x: V, y: P, scale: H }, u.style.transform = `translate(${V}px, ${P}px) scale(${H})`;
+        ...m.current,
+        ...g
+      }, D = le(L, 1, _e), T = p.clientWidth, N = p.clientHeight, z = T * D, S = N * D, V = le(b, -(z - T), 0), R = le(E, -(S - N), 0);
+      m.current = { x: V, y: R, scale: D }, p.style.transform = `translate(${V}px, ${R}px) scale(${D})`;
     },
-    [a]
-  ), b = M(
-    (h, u) => {
+    [d]
+  ), a = I(
+    (g, p) => {
       const {
-        x: g,
-        y: v,
-        scale: z
-      } = c.current, {
-        x: H,
-        y: S,
-        scale: j
+        x: b,
+        y: E,
+        scale: L
+      } = m.current, {
+        x: D,
+        y: T,
+        scale: N
       } = {
-        ...c.current,
-        ...h
+        ...m.current,
+        ...g
       };
-      f.current && (cancelAnimationFrame(f.current), f.current = null);
-      const E = () => {
-        _({ x: H, y: S, scale: j }), s(j);
-      }, I = Math.abs(H - g) < 1 && Math.abs(S - v) < 1 && Math.abs(j - z) < 5e-3;
-      if (!u || I) {
-        E();
+      w.current && (cancelAnimationFrame(w.current), w.current = null);
+      const z = () => {
+        C({ x: D, y: T, scale: N }), s(N);
+      }, S = Math.abs(D - b) < 1 && Math.abs(T - E) < 1 && Math.abs(N - L) < 5e-3;
+      if (!p || S) {
+        z();
         return;
       }
-      const V = (/* @__PURE__ */ new Date()).getTime(), P = () => {
-        const C = () => {
+      const V = (/* @__PURE__ */ new Date()).getTime(), R = () => {
+        const y = () => {
           const i = (/* @__PURE__ */ new Date()).getTime() - V;
-          if (i >= u) {
-            E(), f.current = null;
+          if (i >= p) {
+            z(), w.current = null;
             return;
           }
-          const k = Math.min(i / u, 1), N = zt(k), O = Le(g, H, N), A = Le(v, S, N), Y = Le(z, j, N);
-          _({ x: O, y: A, scale: Y }), P();
+          const _ = Math.min(i / p, 1), M = At(_), A = Le(b, D, M), F = Le(E, T, M), U = Le(L, N, M);
+          C({ x: A, y: F, scale: U }), R();
         };
-        f.current = requestAnimationFrame(C);
+        w.current = requestAnimationFrame(y);
       };
-      P();
+      R();
     },
-    [_, s]
-  ), y = M(
-    (h, u) => {
-      let { x: g, y: v } = c.current;
-      h.x && (g += h.x), h.y && (v += h.y), b(
+    [C, s]
+  ), h = I(
+    (g, p) => {
+      let { x: b, y: E } = m.current;
+      g.x && (b += g.x), g.y && (E += g.y), a(
         {
-          x: g,
-          y: v
+          x: b,
+          y: E
         },
-        u
+        p
       );
     },
-    [b]
-  ), L = M(
-    (h, u, g) => {
-      const v = c.current.scale, z = ae(h, 1, _e), H = z / v, { x: S, y: j } = c.current, { x: E, y: I } = u, V = -S + E, P = -j + I, C = V * H, i = P * H, k = C - E, N = i - I, O = -k, A = -N;
-      b(
+    [a]
+  ), x = I(
+    (g, p, b) => {
+      const E = m.current.scale, L = le(g, 1, _e), D = L / E, { x: T, y: N } = m.current, { x: z, y: S } = p, V = -T + z, R = -N + S, y = V * D, i = R * D, _ = y - z, M = i - S, A = -_, F = -M;
+      a(
         {
-          x: O,
-          y: A,
-          scale: z
+          x: A,
+          y: F,
+          scale: L
         },
-        g
+        b
       );
     },
-    [b]
-  ), x = M(
-    (h) => {
-      const u = a(
+    [a]
+  ), j = I(
+    (g) => {
+      const p = d(
         "shiftZoomFromButton"
-      ), g = u.clientWidth, v = u.clientHeight;
-      L(
-        h,
+      ), b = p.clientWidth, E = p.clientHeight;
+      x(
+        g,
         {
-          x: g / 2,
-          y: v / 2
+          x: b / 2,
+          y: E / 2
         },
         200
       );
     },
-    [a, L]
-  ), T = M(
-    (h, u, g) => {
-      const { scale: v } = c.current;
-      L(
-        v + h,
-        u,
-        g
+    [d, x]
+  ), k = I(
+    (g, p, b) => {
+      const { scale: E } = m.current;
+      x(
+        E + g,
+        p,
+        b
       );
     },
-    [L]
+    [x]
   );
-  return Z(() => {
-    e || d.current && x(n);
-  }, [e, x, n]), Z(() => {
+  return O(() => {
+    e || f.current && j(n);
+  }, [e, j, n]), O(() => {
     if (e || !o)
       return;
-    const h = d.current;
-    if (!h)
+    const g = f.current;
+    if (!g)
       return;
-    const u = (z) => {
-      z.preventDefault(), z.stopPropagation(), l.current = !0, w.current = {
-        x: z.clientX,
-        y: z.clientY
+    const p = (L) => {
+      L.preventDefault(), L.stopPropagation(), c.current = !0, v.current = {
+        x: L.clientX,
+        y: L.clientY
       };
-    }, g = (z) => {
-      if (!l.current)
+    }, b = (L) => {
+      if (!c.current)
         return;
-      if (!w.current)
+      if (!v.current)
         throw new Error("mouseStartXY.current is null");
-      z.stopPropagation();
-      const H = z.clientX - w.current.x, S = z.clientY - w.current.y;
-      y({
-        x: H,
-        y: S
-      }), w.current = {
-        x: z.clientX,
-        y: z.clientY
+      L.stopPropagation();
+      const D = L.clientX - v.current.x, T = L.clientY - v.current.y;
+      h({
+        x: D,
+        y: T
+      }), v.current = {
+        x: L.clientX,
+        y: L.clientY
       };
-    }, v = () => {
-      l.current = !1;
+    }, E = () => {
+      c.current = !1;
     };
-    return h.addEventListener("mousedown", u), document.addEventListener("mousemove", g), document.addEventListener("mouseleave", v), document.addEventListener("mouseup", v), document.addEventListener("contextmenu", v), () => {
-      h.removeEventListener("mousedown", u), document.removeEventListener("mousemove", g), document.removeEventListener("mouseleave", v), document.removeEventListener("mouseup", v), document.removeEventListener("contextmenu", v);
+    return g.addEventListener("mousedown", p), document.addEventListener("mousemove", b), document.addEventListener("mouseleave", E), document.addEventListener("mouseup", E), document.addEventListener("contextmenu", E), () => {
+      g.removeEventListener("mousedown", p), document.removeEventListener("mousemove", b), document.removeEventListener("mouseleave", E), document.removeEventListener("mouseup", E), document.removeEventListener("contextmenu", E);
     };
-  }, [o, y, e]), Z(() => {
+  }, [o, h, e]), O(() => {
     if (e)
       return;
-    const h = p.current;
-    if (!h)
+    const g = u.current;
+    if (!g)
       return;
-    const u = (g) => {
-      const { ctrlKey: v, clientX: z, clientY: H, deltaX: S, deltaY: j } = g;
-      if (v) {
-        if (!o && j >= 0)
+    const p = (b) => {
+      const { ctrlKey: E, clientX: L, clientY: D, deltaX: T, deltaY: N } = b;
+      if (E) {
+        if (!o && N >= 0)
           return;
-        const { left: E, top: I } = h.getBoundingClientRect(), V = z - E, P = H - I;
-        T(-0.01 * j, {
+        const { left: z, top: S } = g.getBoundingClientRect(), V = L - z, R = D - S;
+        k(-0.01 * N, {
           x: V,
-          y: P
+          y: R
         });
       } else {
         if (!o)
           return;
-        y({
-          x: -2 * S,
-          y: -2 * j
+        h({
+          x: -2 * T,
+          y: -2 * N
         });
       }
-      g.preventDefault();
+      b.preventDefault();
     };
-    return h.addEventListener("wheel", u), () => {
-      h.removeEventListener("wheel", u);
+    return g.addEventListener("wheel", p), () => {
+      g.removeEventListener("wheel", p);
     };
-  }, [o, y, T, e]), Z(() => {
-    const h = p.current, u = d.current;
-    if (!h || !u)
+  }, [o, h, k, e]), O(() => {
+    const g = u.current, p = f.current;
+    if (!g || !p)
       return;
-    const g = m.current, v = (S) => {
-      for (let j = 0; j < S.changedTouches.length; j++) {
-        const E = S.changedTouches[j];
-        g.set(E.identifier, E);
+    const b = l.current, E = (T) => {
+      for (let N = 0; N < T.changedTouches.length; N++) {
+        const z = T.changedTouches[N];
+        b.set(z.identifier, z);
       }
-    }, z = (S) => {
-      for (let j = 0; j < S.changedTouches.length; j++) {
-        const E = S.changedTouches[j];
-        g.delete(E.identifier);
+    }, L = (T) => {
+      for (let N = 0; N < T.changedTouches.length; N++) {
+        const z = T.changedTouches[N];
+        b.delete(z.identifier);
       }
-    }, H = (S) => {
-      const j = S.touches.length;
-      if (j === 1) {
+    }, D = (T) => {
+      const N = T.touches.length;
+      if (N === 1) {
         if (!o)
           return;
-        S.preventDefault();
-        const E = S.touches[0], I = g.get(E.identifier);
-        if (!I)
+        T.preventDefault();
+        const z = T.touches[0], S = b.get(z.identifier);
+        if (!S)
           throw new Error("touchStart is null");
-        const V = E.clientX - I.clientX, P = E.clientY - I.clientY;
-        y({
+        const V = z.clientX - S.clientX, R = z.clientY - S.clientY;
+        h({
           x: V,
-          y: P
-        }), g.set(E.identifier, E);
-      } else if (j === 2) {
-        S.preventDefault();
-        const [E, I] = S.touches, V = g.get(E.identifier), P = g.get(I.identifier);
-        if (!V || !P)
+          y: R
+        }), b.set(z.identifier, z);
+      } else if (N === 2) {
+        T.preventDefault();
+        const [z, S] = T.touches, V = b.get(z.identifier), R = b.get(S.identifier);
+        if (!V || !R)
           throw new Error("intialTouch1 or intialTouch2 is null");
-        const C = qe(
+        const y = st(
           V,
-          P
-        ), i = qe(E, I) / C, { left: k, top: N } = h.getBoundingClientRect();
-        T(i - 1, {
-          x: (E.clientX + I.clientX) / 2 - k,
-          y: (E.clientY + I.clientY) / 2 - N
-        }), g.set(E.identifier, E), g.set(I.identifier, I);
+          R
+        ), i = st(z, S) / y, { left: _, top: M } = g.getBoundingClientRect();
+        k(i - 1, {
+          x: (z.clientX + S.clientX) / 2 - _,
+          y: (z.clientY + S.clientY) / 2 - M
+        }), b.set(z.identifier, z), b.set(S.identifier, S);
       }
     };
-    return u.addEventListener("touchstart", v), u.addEventListener("touchmove", H), u.addEventListener("touchend", z), u.addEventListener("touchcancel", z), () => {
-      u.removeEventListener("touchstart", v), u.removeEventListener("touchmove", H), u.removeEventListener("touchend", z), u.removeEventListener("touchcancel", z);
+    return p.addEventListener("touchstart", E), p.addEventListener("touchmove", D), p.addEventListener("touchend", L), p.addEventListener("touchcancel", L), () => {
+      p.removeEventListener("touchstart", E), p.removeEventListener("touchmove", D), p.removeEventListener("touchend", L), p.removeEventListener("touchcancel", L);
     };
-  }, [o, y, T]), /* @__PURE__ */ t.jsx(
+  }, [o, h, k]), /* @__PURE__ */ t.jsx(
     "div",
     {
-      ref: p,
+      ref: u,
       className: `relative size-full overflow-hidden ${o ? "z-zoomed-image cursor-move" : ""}`,
       children: /* @__PURE__ */ t.jsx(
         "div",
         {
-          ref: d,
+          ref: f,
           className: "origin-top-left",
           children: /* @__PURE__ */ t.jsx(
-            me,
+            he,
             {
               ...r,
               imgInPlayerWidthRatio: e ? 1 : n
@@ -1153,16 +1310,10 @@ const yt = ze(null), jt = () => Ie(yt), Fe = () => {
       )
     }
   );
-}, xr = ({ className: e }) => /* @__PURE__ */ t.jsx(U, { className: e, customizationKey: "UI_IMAGE", children: /* @__PURE__ */ t.jsx("svg", { className: e, viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ t.jsx(
-  "path",
-  {
-    d: "M9.5 2.5V9.5H2.5V2.5H9.5ZM9.5 1.5H2.5C1.95 1.5 1.5 1.95 1.5 2.5V9.5C1.5 10.05 1.95 10.5 2.5 10.5H9.5C10.05 10.5 10.5 10.05 10.5 9.5V2.5C10.5 1.95 10.05 1.5 9.5 1.5ZM7.07 5.93L5.57 7.865L4.5 6.57L3 8.5H9L7.07 5.93Z",
-    fill: "currentColor"
-  }
-) }) }), wr = ({ hotspot: e }) => {
-  const { title: r, icon: n, description: o, position: s, detail: p } = e, { getIconConfig: d } = Fe(), a = n ? d(n) : void 0, { extendMode: l, setShownDetails: w } = q(), m = !!p, c = p?.type === "image", f = !!r || !!o, _ = c ? /* @__PURE__ */ t.jsx(xr, { className: "size-4" }) : /* @__PURE__ */ t.jsx("div", { className: "size-1" }), b = () => {
-    c && w({
-      src: p.src,
+}, _r = ({ hotspot: e }) => {
+  const { title: r, icon: n, description: o, position: s, detail: u } = e, { getIconConfig: f } = ye(), d = n ? f(n) : void 0, { extendMode: c, setShownDetails: v } = J(), l = !!u, m = u?.type === "image", w = !!r || !!o, C = m ? /* @__PURE__ */ t.jsx(Vt, { className: "size-4" }) : /* @__PURE__ */ t.jsx("div", { className: "size-1" }), a = () => {
+    m && v({
+      src: u.src,
       title: r,
       text: o
     });
@@ -1170,21 +1321,20 @@ const yt = ze(null), jt = () => Ie(yt), Fe = () => {
   return /* @__PURE__ */ t.jsxs(
     "div",
     {
-      className: R(
+      className: H(
         "group absolute z-hotspot -translate-x-1/2 -translate-y-1/2 hover:z-hotspot-hover",
-        m ? "cursor-pointer" : "cursor-help"
+        l ? "cursor-pointer" : "cursor-help"
       ),
       style: {
         top: `${100 * e.position.y}%`,
         left: `${100 * e.position.x}%`
       },
-      onClick: b,
+      onClick: a,
       children: [
         /* @__PURE__ */ t.jsxs(
           "div",
           {
             className: "relative flex items-center justify-center rounded-full border-2 border-background bg-primary text-primary-foreground",
-            style: { backgroundColor: a?.color },
             children: [
               /* @__PURE__ */ t.jsx(
                 "div",
@@ -1192,16 +1342,16 @@ const yt = ze(null), jt = () => Ie(yt), Fe = () => {
                   className: "pointer-events-none absolute -z-20 size-8 animate-hotspot-ping rounded-full border-2 border-background"
                 }
               ),
-              a?.Icon ? /* @__PURE__ */ t.jsx("div", { className: "size-5", children: a.Icon }) : /* @__PURE__ */ t.jsx("div", { className: "p-1", children: _ })
+              /* @__PURE__ */ t.jsx("div", { className: "p-1", children: d?.Icon ? /* @__PURE__ */ t.jsx("div", { className: "size-4", children: d.Icon }) : C })
             ]
           }
         ),
-        !c && f && /* @__PURE__ */ t.jsx(
+        !m && w && /* @__PURE__ */ t.jsx(
           "div",
           {
-            className: R(
+            className: H(
               "absolute -z-10 w-max max-w-40 text-pretty rounded-ui bg-background p-2 small:max-w-48",
-              l && "large:max-w-56",
+              c && "large:max-w-56",
               s.y < 0.55 ? "-top-1" : "-bottom-1",
               s.x < 0.55 ? "-left-1 pl-6 small:pl-8" : "-right-1 pr-4 small:pr-6",
               "pointer-events-none opacity-0 transition-opacity duration-200 group-hover:pointer-events-auto group-hover:opacity-100"
@@ -1215,207 +1365,181 @@ const yt = ze(null), jt = () => Ie(yt), Fe = () => {
       ]
     }
   );
-}, vr = ({ hotspot: e }) => {
-  const { icon: r, detail: n } = e;
-  let o;
-  switch (r) {
-    case "WINDOW STICKER":
-      o = /* @__PURE__ */ t.jsx(
-        "img",
-        {
-          className: "h-10",
-          src: "https://cdn.car-cutter.com/libs/web-player/v2/assets/images/customers/autonation/window_sticker.png",
-          alt: "Window sticker"
-        }
-      );
-      break;
-    case "CARFAX":
-      o = /* @__PURE__ */ t.jsx(
-        "img",
-        {
-          className: "h-10",
-          src: "https://cdn.car-cutter.com/libs/web-player/v2/assets/images/customers/autonation/carfax.png",
-          alt: "Carfax"
-        }
-      );
-      break;
-    default:
-      o = /* @__PURE__ */ t.jsx(wr, { hotspot: e });
-      break;
-  }
-  switch (n?.type) {
+}, Mr = ({ hotspot: e }) => {
+  const { detail: r } = e, n = /* @__PURE__ */ t.jsx(_r, { hotspot: e });
+  switch (r?.type) {
     case "link":
     case "pdf":
-      return /* @__PURE__ */ t.jsx("a", { href: n.src, target: "_blank", rel: "noreferrer", children: o });
+      return /* @__PURE__ */ t.jsx("a", { href: r.src, target: "_blank", rel: "noreferrer", children: n });
     default:
-      return o;
+      return n;
   }
-}, It = ({
+}, Pt = ({
   hotspots: e,
   itemIndex: r,
   className: n,
   onLoad: o,
   ...s
 }) => {
-  const { isShowingDetails: p, showHotspots: d, setItemInteraction: a } = q();
-  return /* @__PURE__ */ t.jsx("div", { className: R("relative size-full overflow-hidden", n), children: /* @__PURE__ */ t.jsxs(
+  const { isShowingDetails: u, showHotspots: f, setItemInteraction: d } = J();
+  return /* @__PURE__ */ t.jsx("div", { className: H("relative size-full overflow-hidden", n), children: /* @__PURE__ */ t.jsxs(
     "div",
     {
-      className: R(
+      className: H(
         "size-full duration-details",
-        p ? "scale-105" : "scale-100"
+        u ? "scale-105" : "scale-100"
       ),
       children: [
         /* @__PURE__ */ t.jsx(
-          fr,
+          Lr,
           {
             className: "size-full object-cover",
-            onLoad: (l) => {
-              r !== void 0 && a(r, "ready"), o?.(l);
+            onLoad: (c) => {
+              r !== void 0 && d(r, "ready"), o?.(c);
             },
             ...s
           }
         ),
-        d && e?.map((l, w) => /* @__PURE__ */ t.jsx(vr, { hotspot: l }, w))
+        f && e?.map((c, v) => /* @__PURE__ */ t.jsx(Mr, { hotspot: c }, v))
       ]
     }
   ) });
-}, we = 10, br = 15, yr = ({
+}, we = 10, zr = 15, Ir = ({
   images: e,
   onlyPreload: r
 }) => {
-  const { reverse360: n } = J(), { isShowingDetails: o, isZooming: s } = q(), p = s || o, d = W(null), a = W(null), [l, w] = F(0), m = e.length, c = M(() => {
-    w((_) => (_ - 1 + m) % m);
-  }, [m]), f = M(() => {
-    w((_) => (_ + 1) % m);
-  }, [m]);
-  return Z(() => {
-    if (p)
+  const { reverse360: n } = re(), { isShowingDetails: o, isZooming: s } = J(), u = s || o, f = Z(null), d = Z(null), [c, v] = $(0), l = e.length, m = I(() => {
+    v((C) => (C - 1 + l) % l);
+  }, [l]), w = I(() => {
+    v((C) => (C + 1) % l);
+  }, [l]);
+  return O(() => {
+    if (u)
       return;
-    const _ = d.current, b = a.current;
-    if (!_ || !b)
+    const C = f.current, a = d.current;
+    if (!C || !a)
       return;
-    let y = null, L = [], x = null;
-    const T = (i) => {
-      L.push(i), L.length > 20 && L.shift();
-    }, h = () => {
-      const i = Date.now(), k = (() => {
-        const Y = Date.now(), $ = L.filter(
-          (X) => Y - X.timestamp < 50
+    let h = null, x = [], j = null;
+    const k = (i) => {
+      x.push(i), x.length > 20 && x.shift();
+    }, g = () => {
+      const i = Date.now(), _ = (() => {
+        const U = Date.now(), W = x.filter(
+          (ee) => U - ee.timestamp < 50
         );
-        if ($.length < 2)
+        if (W.length < 2)
           return 0;
-        const K = $[0], G = $[$.length - 1];
-        return (G.value - K.value) / (1e-3 * Math.max(G.timestamp - K.timestamp, 1));
+        const Y = W[0], q = W[W.length - 1];
+        return (q.value - Y.value) / (1e-3 * Math.max(q.timestamp - Y.timestamp, 1));
       })();
-      let N = 0, O = i;
-      const A = () => {
-        x = requestAnimationFrame(() => {
-          const Y = Date.now(), $ = (Y - i) / 1e3, K = Math.pow(0.05, $), G = k * K, X = (Y - O) / 1e3;
-          if (N += G * X, Math.abs(G) < 5 * we && Math.abs(N) < we) {
-            x = null;
+      let M = 0, A = i;
+      const F = () => {
+        j = requestAnimationFrame(() => {
+          const U = Date.now(), W = (U - i) / 1e3, Y = Math.pow(0.05, W), q = _ * Y, ee = (U - A) / 1e3;
+          if (M += q * ee, Math.abs(q) < 5 * we && Math.abs(M) < we) {
+            j = null;
             return;
           }
-          Math.abs(N) >= we && (N > 0 !== n ? f() : c(), N = 0), O = Y, A();
+          Math.abs(M) >= we && (M > 0 !== n ? w() : m(), M = 0), A = U, F();
         });
       };
-      A();
-    }, u = () => {
-      x && (cancelAnimationFrame(x), x = null);
-    }, g = (i) => {
+      F();
+    }, p = () => {
+      j && (cancelAnimationFrame(j), j = null);
+    }, b = (i) => {
       if (i.button !== 0)
         return;
-      i.preventDefault(), i.stopPropagation(), u();
-      const k = i.clientX;
-      y = k, L = [{ timestamp: Date.now(), value: k }];
-    }, v = (i) => {
-      if (y === null)
+      i.preventDefault(), i.stopPropagation(), p();
+      const _ = i.clientX;
+      h = _, x = [{ timestamp: Date.now(), value: _ }];
+    }, E = (i) => {
+      if (h === null)
         return;
       i.stopPropagation();
-      const { clientX: k } = i;
-      T({ timestamp: Date.now(), value: k });
-      const N = k - y;
-      Math.abs(N) < we || (N > 0 !== n ? f() : c(), y = k);
-    }, z = () => {
-      y !== null && (y = null, h());
+      const { clientX: _ } = i;
+      k({ timestamp: Date.now(), value: _ });
+      const M = _ - h;
+      Math.abs(M) < we || (M > 0 !== n ? w() : m(), h = _);
+    }, L = () => {
+      h !== null && (h = null, g());
     };
-    _.addEventListener("mousedown", g), document.addEventListener("mousemove", v), document.addEventListener("mouseleave", z), document.addEventListener("mouseup", z), document.addEventListener("contextmenu", z);
-    const H = () => b.getBoundingClientRect().width, S = () => b.scrollWidth / 2 - H() / 2, j = () => {
-      const i = S();
-      b.scrollLeft = i;
+    C.addEventListener("mousedown", b), document.addEventListener("mousemove", E), document.addEventListener("mouseleave", L), document.addEventListener("mouseup", L), document.addEventListener("contextmenu", L);
+    const D = () => a.getBoundingClientRect().width, T = () => a.scrollWidth / 2 - D() / 2, N = () => {
+      const i = T();
+      a.scrollLeft = i;
     };
-    j();
-    const E = () => {
-      const i = b.scrollLeft - S();
-      Math.abs(i) < br || (i < 0 !== n ? f() : c(), j());
+    N();
+    const z = () => {
+      const i = a.scrollLeft - T();
+      Math.abs(i) < zr || (i < 0 !== n ? w() : m(), N());
     };
-    b.addEventListener("scroll", E);
-    let I = null;
+    a.addEventListener("scroll", z);
+    let S = null;
     const V = (i) => {
-      if (I !== null || i.changedTouches.length !== 1)
+      if (S !== null || i.changedTouches.length !== 1)
         return;
-      u();
-      const { identifier: k, clientX: N } = i.changedTouches[0];
-      I = k, y = N, L = [{ timestamp: Date.now(), value: N }];
-    }, P = (i) => {
-      if (!y)
+      p();
+      const { identifier: _, clientX: M } = i.changedTouches[0];
+      S = _, h = M, x = [{ timestamp: Date.now(), value: M }];
+    }, R = (i) => {
+      if (!h)
         return;
-      const k = Array.from(i.changedTouches).find(
-        ({ identifier: A }) => A === I
+      const _ = Array.from(i.changedTouches).find(
+        ({ identifier: F }) => F === S
       );
-      if (!k)
+      if (!_)
         return;
       i.preventDefault();
-      const { clientX: N } = k;
-      T({ timestamp: Date.now(), value: N });
-      const O = N - y;
-      Math.abs(O) < we || (O > 0 !== n ? f() : c(), y = N);
-    }, C = (i) => {
-      !y || !Array.from(i.changedTouches).some(
-        ({ identifier: k }) => k === I
-      ) || (I = null, y = null, h());
+      const { clientX: M } = _;
+      k({ timestamp: Date.now(), value: M });
+      const A = M - h;
+      Math.abs(A) < we || (A > 0 !== n ? w() : m(), h = M);
+    }, y = (i) => {
+      !h || !Array.from(i.changedTouches).some(
+        ({ identifier: _ }) => _ === S
+      ) || (S = null, h = null, g());
     };
-    return b.addEventListener("touchstart", V), b.addEventListener("touchmove", P), b.addEventListener("touchend", C), b.addEventListener("touchcancel", C), () => {
-      _.removeEventListener("mousedown", g), document.removeEventListener("mousemove", v), document.removeEventListener("mouseleave", z), document.removeEventListener("mouseup", z), document.removeEventListener("contextmenu", z), b.removeEventListener("scroll", E), b.removeEventListener("touchstart", V), b.removeEventListener("touchmove", P), b.removeEventListener("touchend", C), b.removeEventListener("touchcancel", C);
+    return a.addEventListener("touchstart", V), a.addEventListener("touchmove", R), a.addEventListener("touchend", y), a.addEventListener("touchcancel", y), () => {
+      C.removeEventListener("mousedown", b), document.removeEventListener("mousemove", E), document.removeEventListener("mouseleave", L), document.removeEventListener("mouseup", L), document.removeEventListener("contextmenu", L), a.removeEventListener("scroll", z), a.removeEventListener("touchstart", V), a.removeEventListener("touchmove", R), a.removeEventListener("touchend", y), a.removeEventListener("touchcancel", y);
     };
-  }, [f, c, p, n]), /* @__PURE__ */ t.jsx("div", { ref: d, className: "cursor-ew-resize", children: /* @__PURE__ */ t.jsxs("div", { ref: a, className: "overflow-x-scroll no-scrollbar", children: [
+  }, [w, m, u, n]), /* @__PURE__ */ t.jsx("div", { ref: f, className: "cursor-ew-resize", children: /* @__PURE__ */ t.jsxs("div", { ref: d, className: "overflow-x-scroll no-scrollbar", children: [
     /* @__PURE__ */ t.jsxs("div", { className: "sticky left-0 top-0", children: [
-      e.map((_) => /* @__PURE__ */ t.jsx(
-        me,
+      e.map((C) => /* @__PURE__ */ t.jsx(
+        he,
         {
-          src: _.src,
+          src: C.src,
           className: "pointer-events-none !absolute left-0 top-0 -z-10"
         },
-        _.src
+        C.src
       )),
-      /* @__PURE__ */ t.jsx(It, { ...e[l], onlyPreload: r })
+      /* @__PURE__ */ t.jsx(Pt, { ...e[c], onlyPreload: r })
     ] }),
     /* @__PURE__ */ t.jsx("div", { className: "pointer-events-none -mt-px h-px w-[calc(100%+1024px)]" })
   ] }) });
-}, jr = ({ images: e, onPlaceholderImageLoaded: r, onSpinImagesLoaded: n, onError: o }) => {
-  const s = te(() => e.map(({ src: m }) => m), [e]), [p, d] = F(null), a = p ? [...p.values()].filter((m) => m).length / e.length * 100 : null, l = M(() => {
-    a === null && d(new Map(s.map((m) => [m, !1])));
-  }, [s, a]), w = M((m) => {
-    d((c) => {
-      const f = new Map(c);
-      return f.set(m, !0), f;
+}, Sr = ({ images: e, onPlaceholderImageLoaded: r, onSpinImagesLoaded: n, onError: o }) => {
+  const s = te(() => e.map(({ src: l }) => l), [e]), [u, f] = $(null), d = u ? [...u.values()].filter((l) => l).length / e.length * 100 : null, c = I(() => {
+    d === null && f(new Map(s.map((l) => [l, !1])));
+  }, [s, d]), v = I((l) => {
+    f((m) => {
+      const w = new Map(m);
+      return w.set(l, !0), w;
     });
   }, []);
-  return Z(() => {
-    a === 100 && n();
-  }, [a, n]), /* @__PURE__ */ t.jsxs("div", { className: "relative size-full", children: [
-    a !== null && a !== 100 && // Add images to DOM to preload them
-    /* @__PURE__ */ t.jsx("div", { className: "hidden", children: s.map((m) => /* @__PURE__ */ t.jsx(
-      me,
+  return O(() => {
+    d === 100 && n();
+  }, [d, n]), /* @__PURE__ */ t.jsxs("div", { className: "relative size-full", children: [
+    d !== null && d !== 100 && // Add images to DOM to preload them
+    /* @__PURE__ */ t.jsx("div", { className: "hidden", children: s.map((l) => /* @__PURE__ */ t.jsx(
+      he,
       {
-        src: m,
-        onLoad: () => w(m),
+        src: l,
+        onLoad: () => v(l),
         onError: o
       },
-      m
+      l
     )) }),
     /* @__PURE__ */ t.jsx(
-      me,
+      he,
       {
         className: "size-full",
         src: s[0],
@@ -1423,46 +1547,46 @@ const yt = ze(null), jt = () => Ie(yt), Fe = () => {
       }
     ),
     /* @__PURE__ */ t.jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-center gap-y-4 bg-foreground/35", children: [
-      /* @__PURE__ */ t.jsx(Nt, { className: "size-20 text-primary-light" }),
-      /* @__PURE__ */ t.jsx(B, { color: "neutral", shape: "icon", onClick: l, children: /* @__PURE__ */ t.jsx(We, { className: "size-full" }) }),
+      /* @__PURE__ */ t.jsx(Tt, { className: "size-20 text-primary-light" }),
+      /* @__PURE__ */ t.jsx(Q, { color: "neutral", shape: "icon", onClick: c, children: /* @__PURE__ */ t.jsx(Be, { className: "size-full" }) }),
       /* @__PURE__ */ t.jsx(
         "div",
         {
-          className: R(
+          className: H(
             "relative h-1 w-3/5 overflow-hidden rounded-full bg-background",
-            a === null && "invisible"
+            d === null && "invisible"
           ),
           children: /* @__PURE__ */ t.jsx(
             "div",
             {
               className: "h-full bg-primary transition-[width]",
-              style: { width: `${a ?? 0}%` }
+              style: { width: `${d ?? 0}%` }
             }
           )
         }
       )
     ] })
   ] });
-}, Cr = (e) => {
-  const { itemIndex: r } = e, { setItemInteraction: n } = q(), [o, s] = F();
-  return Z(() => {
+}, Vr = (e) => {
+  const { itemIndex: r } = e, { setItemInteraction: n } = J(), [o, s] = $();
+  return O(() => {
     o === null || o === "error" || n(r, o === "spin" ? "running" : "ready");
   }, [r, n, o]), o === "error" ? /* @__PURE__ */ t.jsx(
-    kt,
+    It,
     {
       className: "text-background",
       text: "Spin could not be loaded"
     }
   ) : o !== "spin" ? /* @__PURE__ */ t.jsx(
-    jr,
+    Sr,
     {
       ...e,
       onPlaceholderImageLoaded: () => s("placeholder"),
       onSpinImagesLoaded: () => s("spin"),
       onError: () => s("error")
     }
-  ) : /* @__PURE__ */ t.jsx(yr, { ...e });
-}, kr = (e) => /* @__PURE__ */ t.jsx(B, { color: "neutral", shape: "icon", ...e, children: /* @__PURE__ */ t.jsx(We, { className: "size-full" }) }), Er = ({ className: e }) => /* @__PURE__ */ t.jsx(U, { className: e, customizationKey: "UI_PAUSE", children: /* @__PURE__ */ t.jsx(
+  ) : /* @__PURE__ */ t.jsx(Ir, { ...e });
+}, Tr = (e) => /* @__PURE__ */ t.jsx(Q, { color: "neutral", shape: "icon", ...e, children: /* @__PURE__ */ t.jsx(Be, { className: "size-full" }) }), Hr = ({ className: e }) => /* @__PURE__ */ t.jsx(G, { className: e, customizationKey: "UI_PAUSE", children: /* @__PURE__ */ t.jsx(
   "svg",
   {
     className: e,
@@ -1479,7 +1603,7 @@ const yt = ze(null), jt = () => Ie(yt), Fe = () => {
       }
     )
   }
-) }), Nr = ({ className: e }) => /* @__PURE__ */ t.jsx(U, { className: e, customizationKey: "UI_VOLUME", children: /* @__PURE__ */ t.jsx(
+) }), Rr = ({ className: e }) => /* @__PURE__ */ t.jsx(G, { className: e, customizationKey: "UI_VOLUME", children: /* @__PURE__ */ t.jsx(
   "svg",
   {
     className: e,
@@ -1496,7 +1620,7 @@ const yt = ze(null), jt = () => Ie(yt), Fe = () => {
       }
     )
   }
-) }), Lr = ({ className: e }) => /* @__PURE__ */ t.jsx(U, { className: e, customizationKey: "UI_VOLUME_OFF", children: /* @__PURE__ */ t.jsx(
+) }), Ar = ({ className: e }) => /* @__PURE__ */ t.jsx(G, { className: e, customizationKey: "UI_VOLUME_OFF", children: /* @__PURE__ */ t.jsx(
   "svg",
   {
     className: e,
@@ -1513,133 +1637,133 @@ const yt = ze(null), jt = () => Ie(yt), Fe = () => {
       }
     )
   }
-) }), Ke = ({ progress: e }) => /* @__PURE__ */ t.jsx("div", { className: "h-1 w-full overflow-hidden rounded-ui-sm bg-background/25", children: /* @__PURE__ */ t.jsx(
+) }), at = ({ progress: e }) => /* @__PURE__ */ t.jsx("div", { className: "h-1 w-full overflow-hidden rounded-ui-sm bg-background/25", children: /* @__PURE__ */ t.jsx(
   "div",
   {
     className: "size-full rounded-ui-sm bg-background transition-transform",
     style: { transform: `translateX(-${100 * (1 - e)}%)` }
   }
-) }), _r = 3e3, zr = ({ src: e, poster: r, itemIndex: n }) => {
-  const { carrouselItemIndex: o, setItemInteraction: s } = q(), p = W(null), d = W(null), a = M(() => {
-    if (!d.current)
+) }), Pr = 3e3, Or = ({ src: e, poster: r, itemIndex: n }) => {
+  const { carrouselItemIndex: o, setItemInteraction: s } = J(), u = Z(null), f = Z(null), d = I(() => {
+    if (!f.current)
       throw new Error("videoRef.current is null");
-    return d.current;
+    return f.current;
   }, []);
-  Z(() => {
+  O(() => {
     s(n, "ready");
   }, [n, s]);
-  const l = M(() => {
-    a().play();
-  }, [a]), w = M(() => {
-    a().pause();
-  }, [a]);
-  Z(() => {
-    o === n || w();
-  }, [o, n, w]);
-  const [m, c] = F(!1), [f, _] = F(!0), b = () => {
-    c(!0), s(n, "running");
-  }, y = () => {
-    c(!1), s(n, "ready");
-  }, L = () => {
-    _(!1);
+  const c = I(() => {
+    d().play();
+  }, [d]), v = I(() => {
+    d().pause();
+  }, [d]);
+  O(() => {
+    o === n || v();
+  }, [o, n, v]);
+  const [l, m] = $(!1), [w, C] = $(!0), a = () => {
+    m(!0), s(n, "running");
+  }, h = () => {
+    m(!1), s(n, "ready");
   }, x = () => {
-    _(!0);
-  }, [T, h] = F(null), u = (i) => {
-    const k = a(), N = i.currentTarget.getBoundingClientRect(), O = (i.clientX - N.left) / N.width, A = Math.min(1, Math.max(0, O));
-    k.volume = A, k.muted = !1;
-  }, g = (i) => {
-    const k = a();
-    k.muted = i;
+    C(!1);
+  }, j = () => {
+    C(!0);
+  }, [k, g] = $(null), p = (i) => {
+    const _ = d(), M = i.currentTarget.getBoundingClientRect(), A = (i.clientX - M.left) / M.width, F = Math.min(1, Math.max(0, A));
+    _.volume = F, _.muted = !1;
+  }, b = (i) => {
+    const _ = d();
+    _.muted = i;
   };
-  Z(() => {
-    const i = d.current;
+  O(() => {
+    const i = f.current;
     if (!i)
       return;
-    const k = () => {
-      h({
+    const _ = () => {
+      g({
         volume: i.volume,
         isMuted: i.muted
       });
     };
-    return k(), i.addEventListener("volumechange", k), () => {
-      i.removeEventListener("volumechange", k);
+    return _(), i.addEventListener("volumechange", _), () => {
+      i.removeEventListener("volumechange", _);
     };
   }, []);
-  const [v, z] = F(null), H = v ? v.currentTime / v.duration : 0;
-  Z(() => {
-    const i = d.current;
+  const [E, L] = $(null), D = E ? E.currentTime / E.duration : 0;
+  O(() => {
+    const i = f.current;
     if (!i) return;
-    const k = () => {
-      const N = i.currentTime, O = i.duration;
-      isNaN(N) || isNaN(O) || z({
-        currentTime: N,
-        duration: O
+    const _ = () => {
+      const M = i.currentTime, A = i.duration;
+      isNaN(M) || isNaN(A) || L({
+        currentTime: M,
+        duration: A
       });
     };
-    return k(), i.addEventListener("timeupdate", k), () => {
-      i.removeEventListener("timeupdate", k);
+    return _(), i.addEventListener("timeupdate", _), () => {
+      i.removeEventListener("timeupdate", _);
     };
   }, []);
-  const S = (i) => {
-    const k = a(), N = i.currentTarget.getBoundingClientRect(), O = (i.clientX - N.left) / N.width, A = k.duration * O;
-    k.currentTime = A;
-  }, j = (i) => {
-    const k = Math.floor(i % 3600 / 60), N = Math.floor(i % 60);
-    return `${k}:${N.toString().padStart(2, "0")}`;
-  }, [E, I] = F(!1), V = W(void 0), P = M(
+  const T = (i) => {
+    const _ = d(), M = i.currentTarget.getBoundingClientRect(), A = (i.clientX - M.left) / M.width, F = _.duration * A;
+    _.currentTime = F;
+  }, N = (i) => {
+    const _ = Math.floor(i % 3600 / 60), M = Math.floor(i % 60);
+    return `${_}:${M.toString().padStart(2, "0")}`;
+  }, [z, S] = $(!1), V = Z(void 0), R = I(
     () => clearTimeout(V.current),
     []
-  ), C = M(() => {
-    P(), V.current = setTimeout(() => {
-      I(!1);
-    }, _r);
-  }, [P]);
-  return Z(() => {
-    const i = p.current, k = d.current;
-    if (!i || !k)
+  ), y = I(() => {
+    R(), V.current = setTimeout(() => {
+      S(!1);
+    }, Pr);
+  }, [R]);
+  return O(() => {
+    const i = u.current, _ = f.current;
+    if (!i || !_)
       return;
-    const N = () => {
-      C(), I(!0);
-    }, O = () => {
-      P(), I(!1);
+    const M = () => {
+      y(), S(!0);
+    }, A = () => {
+      R(), S(!1);
     };
-    let A = !1;
-    const Y = () => {
-      A = !0;
-    }, $ = () => {
-      A && (A = !1, w());
-    }, K = () => {
-      A = !1, N();
-    }, G = (X) => {
-      X.preventDefault(), X.touches.length === 1 && (C(), I((ne) => !ne));
+    let F = !1;
+    const U = () => {
+      F = !0;
+    }, W = () => {
+      F && (F = !1, v());
+    }, Y = () => {
+      F = !1, M();
+    }, q = (ee) => {
+      ee.preventDefault(), ee.touches.length === 1 && (y(), S((fe) => !fe));
     };
-    return i.addEventListener("mousedown", Y), i.addEventListener("mouseup", $), i.addEventListener("mouseenter", N), i.addEventListener("mousemove", K), i.addEventListener("mouseleave", O), k.addEventListener("touchstart", G), () => {
-      i.removeEventListener("mousedown", Y), i.removeEventListener("mouseup", $), i.removeEventListener("mouseenter", N), i.removeEventListener("mousemove", N), i.removeEventListener("mouseleave", O), k.removeEventListener("touchstart", G);
+    return i.addEventListener("mousedown", U), i.addEventListener("mouseup", W), i.addEventListener("mouseenter", M), i.addEventListener("mousemove", Y), i.addEventListener("mouseleave", A), _.addEventListener("touchstart", q), () => {
+      i.removeEventListener("mousedown", U), i.removeEventListener("mouseup", W), i.removeEventListener("mouseenter", M), i.removeEventListener("mousemove", M), i.removeEventListener("mouseleave", A), _.removeEventListener("touchstart", q);
     };
-  }, [P, w, C]), /* @__PURE__ */ t.jsxs("div", { ref: p, className: "relative size-full", children: [
+  }, [R, v, y]), /* @__PURE__ */ t.jsxs("div", { ref: u, className: "relative size-full", children: [
     /* @__PURE__ */ t.jsx(
       "video",
       {
-        ref: d,
+        ref: f,
         className: "size-full",
         src: e,
         poster: r,
         disablePictureInPicture: !0,
         playsInline: !0,
-        onPlay: b,
-        onPause: y,
-        onEnded: y,
-        onCanPlay: L,
-        onWaiting: x
+        onPlay: a,
+        onPause: h,
+        onEnded: h,
+        onCanPlay: x,
+        onWaiting: j
       }
     ),
-    m ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    l ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
       /* @__PURE__ */ t.jsxs(
         "div",
         {
-          className: R(
+          className: H(
             "absolute inset-x-0 bottom-0 cursor-auto space-y-2 bg-gradient-to-t from-foreground to-transparent p-4 pr-12 pt-8 transition-opacity duration-300",
-            E ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0"
+            z ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0"
           ),
           onMouseDownCapture: (i) => i.stopPropagation(),
           children: [
@@ -1650,25 +1774,25 @@ const yt = ze(null), jt = () => Ie(yt), Fe = () => {
                   className: "flex items-center gap-x-4",
                   children: [
                     /* @__PURE__ */ t.jsx(
-                      B,
+                      Q,
                       {
                         shape: "icon",
                         variant: "ghost",
                         color: "neutral",
-                        onClick: w,
-                        children: /* @__PURE__ */ t.jsx(Er, { className: "size-full" })
+                        onClick: v,
+                        children: /* @__PURE__ */ t.jsx(Hr, { className: "size-full" })
                       }
                     ),
-                    v && /* @__PURE__ */ t.jsxs("span", { className: "text-sm", children: [
-                      j(v.currentTime),
+                    E && /* @__PURE__ */ t.jsxs("span", { className: "text-sm", children: [
+                      N(E.currentTime),
                       " /",
                       " ",
-                      j(v.duration)
+                      N(E.duration)
                     ] })
                   ]
                 }
               ),
-              T && /* @__PURE__ */ t.jsxs(
+              k && /* @__PURE__ */ t.jsxs(
                 "div",
                 {
                   className: "group/volume flex items-center gap-x-4 rounded-ui-md p-2 transition-colors hover:bg-foreground/25",
@@ -1676,17 +1800,17 @@ const yt = ze(null), jt = () => Ie(yt), Fe = () => {
                     /* @__PURE__ */ t.jsx(
                       "div",
                       {
-                        className: `w-12 cursor-pointer py-1 opacity-0 transition-opacity ${T.isMuted ? "group-hover/volume:opacity-50" : "group-hover/volume:opacity-100"}`,
-                        onClick: u,
-                        children: /* @__PURE__ */ t.jsx(Ke, { progress: T.volume })
+                        className: `w-12 cursor-pointer py-1 opacity-0 transition-opacity ${k.isMuted ? "group-hover/volume:opacity-50" : "group-hover/volume:opacity-100"}`,
+                        onClick: p,
+                        children: /* @__PURE__ */ t.jsx(at, { progress: k.volume })
                       }
                     ),
                     /* @__PURE__ */ t.jsx(
                       "div",
                       {
                         className: "size-5 cursor-pointer",
-                        onClick: () => g(!T.isMuted),
-                        children: T.isMuted ? /* @__PURE__ */ t.jsx(Lr, { className: "size-full" }) : /* @__PURE__ */ t.jsx(Nr, { className: "size-full" })
+                        onClick: () => b(!k.isMuted),
+                        children: k.isMuted ? /* @__PURE__ */ t.jsx(Ar, { className: "size-full" }) : /* @__PURE__ */ t.jsx(Rr, { className: "size-full" })
                       }
                     )
                   ]
@@ -1697,45 +1821,47 @@ const yt = ze(null), jt = () => Ie(yt), Fe = () => {
               "div",
               {
                 className: "cursor-pointer py-1",
-                onClick: S,
-                children: /* @__PURE__ */ t.jsx(Ke, { progress: H })
+                onClick: T,
+                children: /* @__PURE__ */ t.jsx(at, { progress: D })
               }
             )
           ]
         }
       ),
-      f && /* @__PURE__ */ t.jsx(
+      w && /* @__PURE__ */ t.jsx(
         "div",
         {
           className: "pointer-events-none absolute inset-0 flex items-center justify-center bg-foreground/25",
-          children: /* @__PURE__ */ t.jsx(Et, { size: "lg", color: "background" })
+          children: /* @__PURE__ */ t.jsx(St, { size: "lg", color: "background" })
         }
       )
     ] }) : /* @__PURE__ */ t.jsx(
       "div",
       {
         className: "absolute inset-0 flex items-center justify-center bg-foreground/25",
-        children: /* @__PURE__ */ t.jsx(kr, { onClick: l })
+        children: /* @__PURE__ */ t.jsx(Tr, { onClick: c })
       }
     )
   ] });
-}, Ir = ({ index: e, item: r, isShown: n }) => {
+}, Dr = ({ index: e, item: r, isShown: n }) => {
   const { type: o } = r;
   let s;
   switch (o) {
     case "image":
-      s = /* @__PURE__ */ t.jsx(It, { itemIndex: e, onlyPreload: !n, ...r });
+      s = /* @__PURE__ */ t.jsx(Pt, { itemIndex: e, onlyPreload: !n, ...r });
       break;
     case "video":
-      s = /* @__PURE__ */ t.jsx(zr, { itemIndex: e, ...r });
+      s = /* @__PURE__ */ t.jsx(Or, { itemIndex: e, ...r });
       break;
     case "360":
-      s = /* @__PURE__ */ t.jsx(Cr, { itemIndex: e, onlyPreload: !n, ...r });
+      s = /* @__PURE__ */ t.jsx(Vr, { itemIndex: e, onlyPreload: !n, ...r });
       break;
+    case "custom":
+      s = /* @__PURE__ */ t.jsx(Nr, { itemIndex: e, ...r });
   }
-  return s = /* @__PURE__ */ t.jsx("div", { className: R("-ml-px h-full w-[calc(100%+2px)]"), children: s }), s;
-}, Mr = (e) => {
-  Z(() => {
+  return s = /* @__PURE__ */ t.jsx("div", { className: "-ml-px h-full w-[calc(100%+2px)]", children: s }), s;
+}, Fr = (e) => {
+  O(() => {
     const r = (n) => {
       n.key === "Escape" && e();
     };
@@ -1744,32 +1870,32 @@ const yt = ze(null), jt = () => Ie(yt), Fe = () => {
     };
   }, [e]);
 };
-function Tr(e) {
+function $r(e) {
   return e.target === e.currentTarget;
 }
-const Vr = ({ currentIndex: e, maxIndex: r }) => /* @__PURE__ */ t.jsxs("div", { className: "space-x-0.5 rounded-ui bg-foreground/40 px-1.5 py-0.5 text-xs text-background/75 transition-radius small:space-x-1 small:px-2 small:py-1 small:text-sm", children: [
+const Zr = ({ currentIndex: e, maxIndex: r }) => /* @__PURE__ */ t.jsxs("div", { className: "space-x-0.5 rounded-ui bg-foreground/40 px-1.5 py-0.5 text-xs text-background/75 transition-radius small:space-x-1 small:px-2 small:py-1 small:text-sm", children: [
   /* @__PURE__ */ t.jsx("span", { children: e + 1 }),
   /* @__PURE__ */ t.jsx("span", { children: "/" }),
   /* @__PURE__ */ t.jsx("span", { children: r + 1 })
-] }), Je = ({ className: e }) => /* @__PURE__ */ t.jsx(U, { className: e, customizationKey: "UI_ARROW_RIGHT", children: /* @__PURE__ */ t.jsx("svg", { className: e, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ t.jsx(
+] }), it = ({ className: e }) => /* @__PURE__ */ t.jsx(G, { className: e, customizationKey: "UI_ARROW_RIGHT", children: /* @__PURE__ */ t.jsx("svg", { className: e, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ t.jsx(
   "path",
   {
     d: "M4.07666 13.4868L5.25666 14.6668L11.9233 8.00016L5.25666 1.3335L4.07666 2.5135L9.56333 8.00016L4.07666 13.4868Z",
     fill: "currentColor"
   }
-) }) }), Sr = ({ className: e }) => /* @__PURE__ */ t.jsx(U, { className: e, customizationKey: "UI_EXTEND", children: /* @__PURE__ */ t.jsx("svg", { className: e, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ t.jsx(
+) }) }), Ur = ({ className: e }) => /* @__PURE__ */ t.jsx(G, { className: e, customizationKey: "UI_EXTEND", children: /* @__PURE__ */ t.jsx("svg", { className: e, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ t.jsx(
   "path",
   {
     d: "M4.66683 9.3335H3.3335V12.6668H6.66683V11.3335H4.66683V9.3335ZM3.3335 6.66683H4.66683V4.66683H6.66683V3.3335H3.3335V6.66683ZM11.3335 11.3335H9.3335V12.6668H12.6668V9.3335H11.3335V11.3335ZM9.3335 3.3335V4.66683H11.3335V6.66683H12.6668V3.3335H9.3335Z",
     fill: "currentColor"
   }
-) }) }), Rr = ({ className: e }) => /* @__PURE__ */ t.jsx(U, { className: e, customizationKey: "UI_GALLERY", children: /* @__PURE__ */ t.jsx("svg", { className: e, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ t.jsx(
+) }) }), Wr = ({ className: e }) => /* @__PURE__ */ t.jsx(G, { className: e, customizationKey: "UI_GALLERY", children: /* @__PURE__ */ t.jsx("svg", { className: e, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ t.jsx(
   "path",
   {
     d: "M13.3334 2.66683V10.6668H5.33337V2.66683H13.3334ZM13.3334 1.3335H5.33337C4.60004 1.3335 4.00004 1.9335 4.00004 2.66683V10.6668C4.00004 11.4002 4.60004 12.0002 5.33337 12.0002H13.3334C14.0667 12.0002 14.6667 11.4002 14.6667 10.6668V2.66683C14.6667 1.9335 14.0667 1.3335 13.3334 1.3335ZM7.66671 7.78016L8.79337 9.28683L10.4467 7.22016L12.6667 10.0002H6.00004L7.66671 7.78016ZM1.33337 4.00016V13.3335C1.33337 14.0668 1.93337 14.6668 2.66671 14.6668H12V13.3335H2.66671V4.00016H1.33337Z",
     fill: "currentColor"
   }
-) }) }), Hr = ({ className: e }) => /* @__PURE__ */ t.jsx(U, { className: e, customizationKey: "UI_HOTSPOTS", children: /* @__PURE__ */ t.jsxs(
+) }) }), Yr = ({ className: e }) => /* @__PURE__ */ t.jsx(G, { className: e, customizationKey: "UI_HOTSPOTS", children: /* @__PURE__ */ t.jsxs(
   "svg",
   {
     className: e,
@@ -1789,7 +1915,7 @@ const Vr = ({ currentIndex: e, maxIndex: r }) => /* @__PURE__ */ t.jsxs("div", {
       /* @__PURE__ */ t.jsx("defs", { children: /* @__PURE__ */ t.jsx("clipPath", { id: "clip0_418_982", children: /* @__PURE__ */ t.jsx("rect", { width: "12", height: "12", fill: "white" }) }) })
     ]
   }
-) }), Or = ({ className: e }) => /* @__PURE__ */ t.jsx(U, { className: e, customizationKey: "UI_MINUS", children: /* @__PURE__ */ t.jsx(
+) }), Xr = ({ className: e }) => /* @__PURE__ */ t.jsx(G, { className: e, customizationKey: "UI_MINUS", children: /* @__PURE__ */ t.jsx(
   "svg",
   {
     className: e,
@@ -1806,7 +1932,7 @@ const Vr = ({ currentIndex: e, maxIndex: r }) => /* @__PURE__ */ t.jsxs("div", {
       }
     )
   }
-) }), Pr = ({ className: e }) => /* @__PURE__ */ t.jsx(U, { className: e, customizationKey: "UI_PLUS", children: /* @__PURE__ */ t.jsx(
+) }), Br = ({ className: e }) => /* @__PURE__ */ t.jsx(G, { className: e, customizationKey: "UI_PLUS", children: /* @__PURE__ */ t.jsx(
   "svg",
   {
     className: e,
@@ -1823,13 +1949,13 @@ const Vr = ({ currentIndex: e, maxIndex: r }) => /* @__PURE__ */ t.jsxs("div", {
       }
     )
   }
-) }), Dr = ({ className: e }) => /* @__PURE__ */ t.jsx(U, { className: e, customizationKey: "UI_REDUCE", children: /* @__PURE__ */ t.jsx("svg", { className: e, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ t.jsx(
+) }), Gr = ({ className: e }) => /* @__PURE__ */ t.jsx(G, { className: e, customizationKey: "UI_REDUCE", children: /* @__PURE__ */ t.jsx("svg", { className: e, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ t.jsx(
   "path",
   {
     d: "M3.33325 10.6668H5.33325V12.6668H6.66659V9.3335H3.33325V10.6668ZM5.33325 5.3335H3.33325V6.66683H6.66659V3.3335H5.33325V5.3335ZM9.33325 12.6668H10.6666V10.6668H12.6666V9.3335H9.33325V12.6668ZM10.6666 5.3335V3.3335H9.33325V6.66683H12.6666V5.3335H10.6666Z",
     fill: "currentColor"
   }
-) }) }), Zr = ({
+) }) }), Kr = ({
   enabled: e,
   onToggle: r,
   label: n,
@@ -1838,7 +1964,7 @@ const Vr = ({ currentIndex: e, maxIndex: r }) => /* @__PURE__ */ t.jsxs("div", {
 }) => /* @__PURE__ */ t.jsxs(
   "label",
   {
-    className: R(
+    className: H(
       "flex cursor-pointer items-center justify-center gap-x-2",
       o
     ),
@@ -1856,14 +1982,14 @@ const Vr = ({ currentIndex: e, maxIndex: r }) => /* @__PURE__ */ t.jsxs("div", {
       /* @__PURE__ */ t.jsx(
         "div",
         {
-          className: R(
+          className: H(
             "flex h-5 w-8 items-center justify-center rounded-full transition-colors",
             e ? "bg-primary" : "bg-background/60"
           ),
           children: /* @__PURE__ */ t.jsx(
             "div",
             {
-              className: R(
+              className: H(
                 "flex size-4 items-center justify-center rounded-full p-0.5 transition",
                 e ? "translate-x-1.5 bg-primary-foreground text-primary" : "-translate-x-1.5 bg-background text-foreground"
               ),
@@ -1874,7 +2000,7 @@ const Vr = ({ currentIndex: e, maxIndex: r }) => /* @__PURE__ */ t.jsxs("div", {
       )
     ]
   }
-), Ar = ({ className: e }) => /* @__PURE__ */ t.jsx(U, { className: e, customizationKey: "UI_BURGER", children: /* @__PURE__ */ t.jsx(
+), qr = ({ className: e }) => /* @__PURE__ */ t.jsx(G, { className: e, customizationKey: "UI_BURGER", children: /* @__PURE__ */ t.jsx(
   "svg",
   {
     className: e,
@@ -1891,51 +2017,51 @@ const Vr = ({ currentIndex: e, maxIndex: r }) => /* @__PURE__ */ t.jsxs("div", {
       }
     )
   }
-) }), Fr = ({ sharedClassName: e }) => {
-  const { categories: r } = re(), { displayedCategoryId: n, changeCategory: o } = q(), [s, p] = F(!1), d = () => {
-    p(!s);
-  }, a = () => {
-    p(!1);
+) }), Jr = ({ sharedClassName: e }) => {
+  const { categories: r } = oe(), { displayedCategoryId: n, changeCategory: o } = J(), [s, u] = $(!1), f = () => {
+    u(!s);
+  }, d = () => {
+    u(!1);
   };
   return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
     s && /* @__PURE__ */ t.jsx(
       "div",
       {
-        className: R(e, "inset-0 small:hidden"),
-        onClick: a
+        className: H(e, "inset-0 small:hidden"),
+        onClick: d
       }
     ),
     /* @__PURE__ */ t.jsxs(
       "div",
       {
-        className: R(
+        className: H(
           e,
-          ue("top-left"),
+          pe("top-left"),
           "flex gap-x-2 small:hidden"
         ),
         children: [
           /* @__PURE__ */ t.jsx(
-            B,
+            Q,
             {
               shape: "icon",
               color: s ? "primary" : "neutral",
-              onClick: d,
-              children: /* @__PURE__ */ t.jsx(Ar, {})
+              onClick: f,
+              children: /* @__PURE__ */ t.jsx(qr, {})
             }
           ),
-          s && /* @__PURE__ */ t.jsx("div", { className: "rounded-ui-md bg-background transition-radius", children: /* @__PURE__ */ t.jsx("ul", { className: "space-y-0.5 p-1", children: r.map(({ id: l, title: w }) => /* @__PURE__ */ t.jsx(
+          s && /* @__PURE__ */ t.jsx("div", { className: "rounded-ui-md bg-background transition-radius", children: /* @__PURE__ */ t.jsx("ul", { className: "space-y-0.5 p-1", children: r.map(({ id: c, title: v }) => /* @__PURE__ */ t.jsx(
             "li",
             {
-              className: R(
+              className: H(
                 "cursor-pointer rounded-ui px-2 py-1 text-sm font-bold transition-all hover:bg-primary/30",
-                l === n && "bg-primary/50"
+                c === n && "bg-primary/50"
               ),
               onClick: () => {
-                o(l), p(!1);
+                o(c), u(!1);
               },
-              children: w
+              children: v
             },
-            l
+            c
           )) }) })
         ]
       }
@@ -1943,136 +2069,134 @@ const Vr = ({ currentIndex: e, maxIndex: r }) => /* @__PURE__ */ t.jsxs("div", {
     /* @__PURE__ */ t.jsx(
       "div",
       {
-        className: R(
+        className: H(
           e,
-          bt("top"),
+          Mt("top"),
           "w-full overflow-x-auto max-small:hidden"
         ),
-        children: /* @__PURE__ */ t.jsx("div", { className: "mx-auto flex w-fit gap-x-1 rounded-ui-md bg-background p-1 shadow", children: r.map(({ id: l, title: w }) => /* @__PURE__ */ t.jsx(
-          B,
+        children: /* @__PURE__ */ t.jsx("div", { className: "mx-auto flex w-fit gap-x-1 rounded-ui-md bg-background p-1 shadow", children: r.map(({ id: c, title: v }) => /* @__PURE__ */ t.jsx(
+          Q,
           {
-            variant: l === n ? "fill" : "ghost",
-            onClick: () => o(l),
-            children: w
+            variant: c === n ? "fill" : "ghost",
+            onClick: () => o(c),
+            children: v
           },
-          l
+          c
         )) })
       }
     )
   ] });
-}, Wr = () => {
-  const { hideCategories: e, infiniteCarrousel: r, permanentGallery: n } = J(), {
-    items: { length: o },
-    aspectRatioStyle: s
-  } = re(), {
-    slidable: p,
-    carrouselItemIndex: d,
-    masterItemIndex: a,
-    prevItem: l,
-    nextItem: w,
-    showGalleryControls: m,
-    enableHotspotsControl: c,
-    showHotspots: f,
-    toggleHotspots: _,
-    showGallery: b,
-    toggleGallery: y,
-    extendMode: L,
-    toggleExtendMode: x,
-    shownDetails: T,
-    isShowingDetails: h,
-    resetShownDetails: u,
-    showZoomControls: g,
-    isZooming: v,
-    canZoomIn: z,
-    zoomIn: H,
-    canZoomOut: S,
-    zoomOut: j,
-    resetView: E
-  } = q(), I = M(
-    (P) => {
-      Tr(P) && u();
+}, Qr = () => {
+  const { hideCategories: e, infiniteCarrousel: r, permanentGallery: n } = re(), { aspectRatioStyle: o } = oe(), {
+    items: { length: s },
+    slidable: u,
+    carrouselItemIndex: f,
+    masterItemIndex: d,
+    prevItem: c,
+    nextItem: v,
+    showGalleryControls: l,
+    enableHotspotsControl: m,
+    showHotspots: w,
+    toggleHotspots: C,
+    showGallery: a,
+    toggleGallery: h,
+    extendMode: x,
+    toggleExtendMode: j,
+    shownDetails: k,
+    isShowingDetails: g,
+    resetShownDetails: p,
+    showZoomControls: b,
+    isZooming: E,
+    canZoomIn: L,
+    zoomIn: D,
+    canZoomOut: T,
+    zoomOut: N,
+    resetView: z
+  } = J(), S = I(
+    (R) => {
+      $r(R) && p();
     },
-    [u]
+    [p]
   );
-  Mr(u);
+  Fr(p);
   const V = "absolute z-overlay";
   return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
     !e && /* @__PURE__ */ t.jsx(
-      Fr,
+      Jr,
       {
-        sharedClassName: R(
+        sharedClassName: H(
           V,
           "transition-opacity",
-          v ? "!pointer-events-none opacity-0" : "opacity-100"
+          E ? "!pointer-events-none opacity-0" : "opacity-100"
         )
       }
     ),
-    p && !v && /* @__PURE__ */ t.jsx("div", { className: R(V, ue("top-right")), children: /* @__PURE__ */ t.jsx(
-      Vr,
+    u && !E && /* @__PURE__ */ t.jsx("div", { className: H(V, pe("top-right")), children: /* @__PURE__ */ t.jsx(
+      Zr,
       {
-        currentIndex: d,
-        maxIndex: o - 1
+        currentIndex: f,
+        maxIndex: s - 1
       }
     ) }),
-    p && /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    u && /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
       /* @__PURE__ */ t.jsx(
-        B,
+        Q,
         {
           shape: "icon",
           color: "neutral",
-          className: R(
+          className: H(
             V,
-            ue("middle-left"),
-            v ? "!pointer-events-none opacity-0" : "opacity-100"
+            pe("middle-left"),
+            E ? "!pointer-events-none opacity-0" : "opacity-100"
           ),
-          onClick: l,
-          disabled: !r && a <= 0,
-          children: /* @__PURE__ */ t.jsx(U, { customizationKey: "CONTROLS_ARROW_LEFT", children: /* @__PURE__ */ t.jsx(Je, { className: "size-full rotate-180" }) })
+          onClick: c,
+          disabled: !r && d <= 0,
+          children: /* @__PURE__ */ t.jsx(G, { customizationKey: "CONTROLS_PREV", children: /* @__PURE__ */ t.jsx(it, { className: "size-full -scale-x-100" }) })
         }
       ),
       /* @__PURE__ */ t.jsx(
-        B,
+        Q,
         {
           shape: "icon",
           color: "neutral",
-          className: R(
+          className: H(
             V,
-            ue("middle-right"),
-            v ? "!pointer-events-none opacity-0" : "opacity-100"
+            pe("middle-right"),
+            E ? "!pointer-events-none opacity-0" : "opacity-100"
           ),
-          onClick: w,
-          disabled: !r && a >= o - 1,
-          children: /* @__PURE__ */ t.jsx(U, { customizationKey: "CONTROLS_ARROW_RIGHT", children: /* @__PURE__ */ t.jsx(Je, { className: "size-full" }) })
+          onClick: v,
+          disabled: !r && d >= s - 1,
+          children: /* @__PURE__ */ t.jsx(G, { customizationKey: "CONTROLS_NEXT", children: /* @__PURE__ */ t.jsx(it, { className: "size-full" }) })
         }
       )
     ] }),
     /* @__PURE__ */ t.jsxs(
       "div",
       {
-        className: R(
+        className: H(
           V,
-          ue("bottom-fullW"),
+          pe("bottom-fullW"),
           "pointer-events-none grid grid-cols-[auto,1fr,auto] items-end *:pointer-events-auto small:gap-x-2"
         ),
         children: [
-          !n && p && /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+          !n && u && /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
             /* @__PURE__ */ t.jsx(
-              B,
+              Q,
               {
-                className: m && !v ? "opacity-100" : "!pointer-events-none opacity-0",
+                className: l && !E ? "opacity-100" : "!pointer-events-none opacity-0",
                 variant: "fill",
-                color: b ? "primary" : "neutral",
+                color: a ? "primary" : "neutral",
                 shape: "icon",
-                onClick: y,
-                children: /* @__PURE__ */ t.jsx(U, { customizationKey: "CONTROLS_GALLERY", children: /* @__PURE__ */ t.jsx(Rr, { className: "size-full" }) })
+                onClick: h,
+                children: /* @__PURE__ */ t.jsx(Wr, { className: "size-full" })
               }
             ),
-            b && /* @__PURE__ */ t.jsx(
-              _t,
+            a && /* @__PURE__ */ t.jsx(
+              Rt,
               {
-                className: R(
+                className: H(
                   "transition-opacity",
-                  m && !v ? "opacity-100" : "!pointer-events-none opacity-0",
+                  l && !E ? "opacity-100" : "!pointer-events-none opacity-0",
                   // Left & Right gradient mask to fade the gallery
                   "[mask-image:linear-gradient(to_left,transparent_0px,black_4px,black_calc(100%-4px),transparent_100%)]"
                 ),
@@ -2081,51 +2205,51 @@ const Vr = ({ currentIndex: e, maxIndex: r }) => /* @__PURE__ */ t.jsxs("div", {
             )
           ] }),
           /* @__PURE__ */ t.jsxs("div", { className: "col-start-3 flex flex-col items-end gap-y-1 small:gap-y-2", children: [
-            c && /* @__PURE__ */ t.jsx(
-              Zr,
+            m && /* @__PURE__ */ t.jsx(
+              Kr,
               {
-                className: R(
+                className: H(
                   "transition-opacity",
-                  v ? "!pointer-events-none opacity-0" : "opacity-100"
+                  E ? "!pointer-events-none opacity-0" : "opacity-100"
                 ),
-                enabled: f,
-                onToggle: _,
-                children: /* @__PURE__ */ t.jsx(Hr, { className: "size-full" })
+                enabled: w,
+                onToggle: C,
+                children: /* @__PURE__ */ t.jsx(Yr, { className: "size-full" })
               }
             ),
-            g && /* @__PURE__ */ t.jsxs("div", { className: "max-small:hidden", children: [
+            b && /* @__PURE__ */ t.jsxs("div", { className: "max-small:hidden", children: [
               /* @__PURE__ */ t.jsx(
-                B,
+                Q,
                 {
                   className: "rounded-b-none",
                   color: "neutral",
                   shape: "icon",
-                  disabled: !z,
-                  onClick: H,
-                  children: /* @__PURE__ */ t.jsx(Pr, { className: "size-full" })
+                  disabled: !L,
+                  onClick: D,
+                  children: /* @__PURE__ */ t.jsx(Br, { className: "size-full" })
                 }
               ),
-              /* @__PURE__ */ t.jsx(Lt, { color: "background" }),
+              /* @__PURE__ */ t.jsx(Ht, { color: "background" }),
               /* @__PURE__ */ t.jsx(
-                B,
+                Q,
                 {
                   className: "rounded-t-none",
                   color: "neutral",
                   shape: "icon",
-                  disabled: !S,
-                  onClick: j,
-                  children: /* @__PURE__ */ t.jsx(Or, { className: "size-full" })
+                  disabled: !T,
+                  onClick: N,
+                  children: /* @__PURE__ */ t.jsx(Xr, { className: "size-full" })
                 }
               )
             ] }),
             /* @__PURE__ */ t.jsx(
-              B,
+              Q,
               {
                 variant: "fill",
-                color: L ? "primary" : "neutral",
+                color: x ? "primary" : "neutral",
                 shape: "icon",
-                onClick: x,
-                children: L ? /* @__PURE__ */ t.jsx(Dr, { className: "size-full" }) : /* @__PURE__ */ t.jsx(Sr, { className: "size-full" })
+                onClick: j,
+                children: x ? /* @__PURE__ */ t.jsx(Gr, { className: "size-full" }) : /* @__PURE__ */ t.jsx(Ur, { className: "size-full" })
               }
             )
           ] })
@@ -2135,55 +2259,55 @@ const Vr = ({ currentIndex: e, maxIndex: r }) => /* @__PURE__ */ t.jsxs("div", {
     /* @__PURE__ */ t.jsx(
       "div",
       {
-        className: R(
+        className: H(
           V,
           "inset-0 flex justify-end overflow-hidden bg-foreground/60 transition-opacity duration-details",
-          h ? "opacity-100" : "pointer-events-none opacity-0"
+          g ? "opacity-100" : "pointer-events-none opacity-0"
         ),
-        onClick: I,
+        onClick: S,
         children: /* @__PURE__ */ t.jsx(
           "div",
           {
-            className: R(
+            className: H(
               "h-full w-3/5 bg-background transition-transform duration-details",
-              h ? "translate-x-0" : "translate-x-full"
+              g ? "translate-x-0" : "translate-x-full"
             ),
-            children: !!T && /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+            children: !!k && /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
               /* @__PURE__ */ t.jsx(
-                me,
+                he,
                 {
                   className: "w-full bg-foreground/65",
-                  style: s,
-                  src: T.src,
+                  style: o,
+                  src: k.src,
                   imgInPlayerWidthRatio: 0.6
                 }
               ),
               /* @__PURE__ */ t.jsxs(
                 "div",
                 {
-                  className: R(
+                  className: H(
                     "space-y-1 px-2 py-1 small:p-3",
-                    L && "large:p-4"
+                    x && "large:p-4"
                   ),
                   children: [
-                    T.title && /* @__PURE__ */ t.jsx(
+                    k.title && /* @__PURE__ */ t.jsx(
                       "span",
                       {
-                        className: R(
+                        className: H(
                           "text-sm font-semibold small:text-base small:font-bold",
-                          L && "large:text-lg"
+                          x && "large:text-lg"
                         ),
-                        children: T.title
+                        children: k.title
                       }
                     ),
-                    T.text && /* @__PURE__ */ t.jsx(
+                    k.text && /* @__PURE__ */ t.jsx(
                       "p",
                       {
-                        className: R(
+                        className: H(
                           "text-xs text-foreground/65 small:text-sm",
-                          L && "large:text-base"
+                          x && "large:text-base"
                         ),
-                        children: T.text
+                        children: k.text
                       }
                     )
                   ]
@@ -2194,415 +2318,433 @@ const Vr = ({ currentIndex: e, maxIndex: r }) => /* @__PURE__ */ t.jsxs("div", {
         )
       }
     ),
-    (v || h) && /* @__PURE__ */ t.jsx(
-      Ct,
+    (E || g) && /* @__PURE__ */ t.jsx(
+      zt,
       {
-        className: R(V, ue("top-right")),
-        onClick: E
+        className: H(V, pe("top-right")),
+        onClick: z
       }
     )
   ] });
-}, $r = ({ className: e = "" }) => {
-  const { infiniteCarrousel: r, preloadRange: n, isFullScreen: o } = J(), { items: s, aspectRatioStyle: p } = re(), {
-    slidable: d,
-    carrouselItemIndex: a,
-    setCarrouselItemIndex: l,
-    itemIndexCommand: w,
-    setItemIndexCommand: m,
-    specialCommand: c,
-    isRunningSpecialCommand: f,
-    finishSpecialCommand: _,
-    extendMode: b,
-    extendTransition: y
-  } = q(), L = W(null), x = M((C) => {
-    if (!L.current)
-      throw new Error(`[${C ?? "sliderOrThrow"}] slider.current is null`);
-    return L.current;
-  }, []), T = W(!1), h = W(null), u = W(null), g = W(null), v = M(() => {
-    g.current && cancelAnimationFrame(g.current);
-  }, []), z = M(() => {
-    const C = x("computeClosestSnapIndex"), i = Array.from(C.children), k = C.scrollLeft, N = i.reduce(
-      (O, A, Y) => {
-        const $ = A.offsetLeft;
-        return Math.abs($ - k) < Math.abs(i[O].offsetLeft - k) ? Y : O;
+}, en = ({ className: e = "" }) => {
+  const { infiniteCarrousel: r, preloadRange: n, isFullScreen: o } = re(), { aspectRatioStyle: s } = oe(), {
+    items: u,
+    slidable: f,
+    carrouselItemIndex: d,
+    setCarrouselItemIndex: c,
+    itemIndexCommand: v,
+    setItemIndexCommand: l,
+    specialCommand: m,
+    isRunningSpecialCommand: w,
+    finishSpecialCommand: C,
+    extendMode: a,
+    extendTransition: h
+  } = J(), x = Z(null), j = I((y) => {
+    if (!x.current)
+      throw new Error(`[${y ?? "sliderOrThrow"}] slider.current is null`);
+    return x.current;
+  }, []), k = Z(!1), g = Z(null), p = Z(null), b = Z(null), E = I(() => {
+    b.current && cancelAnimationFrame(b.current);
+  }, []), L = I(() => {
+    const y = j("computeClosestSnapIndex"), i = Array.from(y.children), _ = y.scrollLeft, M = i.reduce(
+      (A, F, U) => {
+        const W = F.offsetLeft;
+        return Math.abs(W - _) < Math.abs(i[A].offsetLeft - _) ? U : A;
       },
       0
     );
-    return c === "first_to_last" ? Ge(N, s.length) : c === "last_to_first" ? Ge(N - 1, s.length) : N;
-  }, [c, x, s.length]), H = M(
-    (C) => {
-      const i = x("setStyleCursor");
-      i.style.cursor = C;
+    return m === "first_to_last" ? rt(M, u.length) : m === "last_to_first" ? rt(M - 1, u.length) : M;
+  }, [m, j, u.length]), D = I(
+    (y) => {
+      const i = j("setStyleCursor");
+      i.style.cursor = y;
     },
-    [x]
-  ), S = M(
-    (C) => {
-      const i = x("setStyleSnapState");
-      C === "mandatory" ? i.style.scrollSnapType = "x mandatory" : i.style.scrollSnapType = "none";
+    [j]
+  ), T = I(
+    (y) => {
+      const i = j("setStyleSnapState");
+      y === "mandatory" ? i.style.scrollSnapType = "x mandatory" : i.style.scrollSnapType = "none";
     },
-    [x]
-  ), j = M(
-    (C, i, k) => {
-      v();
-      const N = x("scrollToIndex"), O = Array.from(N.children), A = N.scrollLeft, Y = O[C].offsetLeft, $ = (pe) => {
-        N.scrollTo({
-          left: pe,
+    [j]
+  ), N = I(
+    (y, i, _) => {
+      E();
+      const M = j("scrollToIndex"), A = Array.from(M.children), F = M.scrollLeft, U = A[y].offsetLeft, W = (ae) => {
+        M.scrollTo({
+          left: ae,
           behavior: "instant"
         });
-      }, K = () => {
-        $(Y), S("mandatory"), k?.();
-      }, G = Math.abs(A - Y);
-      if (G < 1 || i === "instant") {
-        K();
+      }, Y = () => {
+        W(U), T("mandatory"), _?.();
+      }, q = Math.abs(F - U);
+      if (q < 1 || i === "instant") {
+        Y();
         return;
       }
-      const X = ae(G / 2.5, 300, 1e3), ne = (/* @__PURE__ */ new Date()).getTime();
-      S("none");
-      const ye = () => {
-        const pe = () => {
-          const je = (/* @__PURE__ */ new Date()).getTime() - ne;
-          if (je >= X) {
-            K();
+      const ee = le(q / 2.5, 300, 1e3), fe = (/* @__PURE__ */ new Date()).getTime();
+      T("none");
+      const se = () => {
+        const ae = () => {
+          const je = (/* @__PURE__ */ new Date()).getTime() - fe;
+          if (je >= ee) {
+            Y();
             return;
           }
-          const ie = Math.min(je / X, 1), he = zt(ie), Me = Le(A, Y, he);
-          $(Me), ye();
+          const Se = Math.min(je / ee, 1), Ve = At(Se), ce = Le(F, U, Ve);
+          W(ce), se();
         };
-        g.current = requestAnimationFrame(pe);
+        b.current = requestAnimationFrame(ae);
       };
-      ye();
+      se();
     },
-    [v, x, S]
-  ), [E, I] = F(), V = !!E;
-  Z(() => {
-    const C = () => {
-      clearTimeout(E);
+    [E, j, T]
+  ), [z, S] = $(), V = !!z;
+  O(() => {
+    const y = () => {
+      clearTimeout(z);
       const i = setTimeout(() => {
-        I(void 0);
-      }, gt);
-      I(i);
+        S(void 0);
+      }, Et);
+      S(i);
     };
-    return addEventListener("resize", C), document.addEventListener("fullscreenchange", C), () => {
-      removeEventListener("resize", C), document.removeEventListener("fullscreenchange", C);
+    return addEventListener("resize", y), document.addEventListener("fullscreenchange", y), () => {
+      removeEventListener("resize", y), document.removeEventListener("fullscreenchange", y);
     };
-  }, [E]), Z(() => {
-    const C = z();
-    Number.isNaN(C) || C !== a && j(a, "instant");
+  }, [z]), O(() => {
+    const y = L();
+    Number.isNaN(y) || y !== d && N(d, "instant");
   }, [
-    a,
-    j,
-    z,
+    d,
+    N,
+    L,
     // - Run the effect when those values change
-    s,
-    E,
+    u,
+    z,
     o,
-    b,
-    y
-  ]), Z(() => {
-    if (!d || f) {
-      H("auto");
+    a,
+    h
+  ]), O(() => {
+    if (!f || w) {
+      D("auto");
       return;
     }
-    const C = L.current;
-    if (!C)
+    const y = x.current;
+    if (!y)
       return;
-    H("grab"), S("mandatory");
-    const i = (O) => {
-      O.button === 0 && (O.preventDefault(), O.stopPropagation(), v(), T.current = !0, h.current = O.pageX - C.offsetLeft, u.current = C.scrollLeft, H("grabbing"));
-    }, k = (O) => {
-      if (!T.current)
+    D("grab"), T("mandatory");
+    const i = (A) => {
+      A.button === 0 && (A.preventDefault(), A.stopPropagation(), E(), k.current = !0, g.current = A.pageX - y.offsetLeft, p.current = y.scrollLeft, D("grabbing"));
+    }, _ = (A) => {
+      if (!k.current)
         return;
-      if (h.current === null)
+      if (g.current === null)
         throw new Error("[onMouseMove] startX is null");
-      S("none");
-      const A = O.pageX - C.offsetLeft - h.current;
+      T("none");
+      const F = A.pageX - y.offsetLeft - g.current;
       requestAnimationFrame(() => {
-        if (u.current === null)
+        if (p.current === null)
           throw new Error("[onMouseMove] scrollLeft is null");
-        C.scrollLeft = u.current - A;
+        y.scrollLeft = p.current - F;
       });
-    }, N = () => {
-      if (!T.current)
+    }, M = () => {
+      if (!k.current)
         return;
-      T.current = !1, H("grab");
-      const O = z();
-      j(O, "smooth");
+      k.current = !1, D("grab");
+      const A = L();
+      N(A, "smooth");
     };
-    return C.addEventListener("mousedown", i), document.addEventListener("mousemove", k), document.addEventListener("mouseleave", N), document.addEventListener("mouseup", N), document.addEventListener("contextmenu", N), () => {
-      C.removeEventListener("mousedown", i), document.removeEventListener("mousemove", k), document.removeEventListener("mouseleave", N), document.removeEventListener("mouseup", N), document.removeEventListener("contextmenu", N);
+    return y.addEventListener("mousedown", i), document.addEventListener("mousemove", _), document.addEventListener("mouseleave", M), document.addEventListener("mouseup", M), document.addEventListener("contextmenu", M), () => {
+      y.removeEventListener("mousedown", i), document.removeEventListener("mousemove", _), document.removeEventListener("mouseleave", M), document.removeEventListener("mouseup", M), document.removeEventListener("contextmenu", M);
     };
   }, [
-    v,
-    z,
-    f,
-    j,
-    H,
-    S,
-    d
-  ]), Z(() => {
-    if (y || V)
+    E,
+    L,
+    w,
+    N,
+    D,
+    T,
+    f
+  ]), O(() => {
+    if (h || V)
       return;
-    const C = L.current;
-    if (!C)
+    const y = x.current;
+    if (!y)
       return;
     const i = () => {
-      const k = z();
-      Number.isNaN(k) || (l(k), k === w && m(null));
+      const _ = L();
+      Number.isNaN(_) || (c(_), _ === v && l(null));
     };
-    return C.addEventListener("scroll", i), () => {
-      C.removeEventListener("scroll", i);
+    return y.addEventListener("scroll", i), () => {
+      y.removeEventListener("scroll", i);
     };
   }, [
-    z,
-    y,
-    f,
-    V,
+    L,
+    h,
     w,
-    s.length,
-    l,
-    m
-  ]), Z(() => {
-    if (w === null)
+    V,
+    v,
+    u.length,
+    c,
+    l
+  ]), O(() => {
+    if (v === null)
       return;
-    const C = () => _();
-    switch (c) {
+    const y = () => C();
+    switch (m) {
       case "first_to_last":
-        j(s.length, "instant"), j(s.length - 1, "smooth", C);
+        N(u.length, "instant"), N(u.length - 1, "smooth", y);
         break;
       case "last_to_first":
-        j(0, "instant"), j(1, "smooth", C);
+        N(0, "instant"), N(1, "smooth", y);
         break;
       case "instant":
-        j(w, "instant", C);
+        N(v, "instant", y);
         break;
       default:
-        j(w, "smooth");
+        N(v, "smooth");
         break;
     }
   }, [
-    c,
-    _,
-    w,
-    s.length,
-    j
+    m,
+    C,
+    v,
+    u.length,
+    N
   ]);
-  const P = () => /* @__PURE__ */ t.jsx("div", { className: "h-full", style: p });
+  const R = () => /* @__PURE__ */ t.jsx("div", { className: "h-full", style: s });
   return /* @__PURE__ */ t.jsxs(
     "div",
     {
-      className: R(
+      className: H(
         "relative overflow-hidden rounded-carrousel transition-radius",
         e
       ),
-      style: p,
+      style: s,
       children: [
         /* @__PURE__ */ t.jsxs(
           "div",
           {
-            ref: L,
-            className: `flex size-full ${d ? "overflow-x-auto no-scrollbar *:snap-start *:snap-always" : "justify-center"}`,
+            ref: x,
+            className: `flex size-full ${f ? "overflow-x-auto no-scrollbar *:snap-start *:snap-always" : "justify-center"}`,
             children: [
-              c === "last_to_first" && /* @__PURE__ */ t.jsx(P, {}),
-              s.map((C, i) => {
-                const k = C.type === "360" ? C.images[0] : C.src, N = i === a, O = i === 0, A = i === s.length - 1, Y = (() => {
-                  if (c === "first_to_last" && O)
+              m === "last_to_first" && /* @__PURE__ */ t.jsx(R, {}),
+              u.map((y, i) => {
+                const _ = i === d, M = i === 0, A = i === u.length - 1, F = (() => {
+                  if (m === "first_to_last" && M)
                     return {
-                      transform: `translateX(${100 * s.length}%)`
+                      transform: `translateX(${100 * u.length}%)`
                     };
-                  if (c === "last_to_first" && A)
+                  if (m === "last_to_first" && A)
                     return {
-                      transform: `translateX(-${100 * s.length}%)`
+                      transform: `translateX(-${100 * u.length}%)`
                     };
                 })();
-                let $ = Math.abs(i - a) <= n;
-                return $ ||= i === w, r && ($ ||= a < n && s.length - i <= n - a, $ ||= a >= s.length - n && i <= n - (s.length - a)), /* @__PURE__ */ t.jsx(
+                let U = Math.abs(i - d) <= n;
+                U ||= i === v, r && (U ||= d < n && u.length - i <= n - d, U ||= d >= u.length - n && i <= n - (u.length - d));
+                const W = (() => {
+                  let Y;
+                  switch (y.type) {
+                    case "360":
+                      Y = y.images[0].src;
+                      break;
+                    case "image":
+                      Y = y.src;
+                      break;
+                    case "video":
+                      Y = y.poster ?? "video";
+                      break;
+                    case "custom":
+                      Y = "custom";
+                      break;
+                  }
+                  return `${i}_${Y}`;
+                })();
+                return /* @__PURE__ */ t.jsx(
                   "div",
                   {
-                    className: R(
+                    className: H(
                       "h-full bg-foreground/35",
-                      a === i && "z-1"
+                      d === i && "z-1"
                       // Give high-ground to the shown item (to avoid 1px vertical line)
                     ),
-                    style: { ...p, ...Y },
-                    children: $ && /* @__PURE__ */ t.jsx(Ir, { index: i, item: C, isShown: N })
+                    style: { ...s, ...F },
+                    children: U && /* @__PURE__ */ t.jsx(Dr, { index: i, item: y, isShown: _ })
                   },
-                  `${i}_${k}`
+                  W
                 );
               }),
-              c === "first_to_last" && /* @__PURE__ */ t.jsx(P, {})
+              m === "first_to_last" && /* @__PURE__ */ t.jsx(R, {})
             ]
           }
         ),
-        /* @__PURE__ */ t.jsx(Wr, {})
+        /* @__PURE__ */ t.jsx(Qr, {})
       ]
     }
   );
-}, Yr = () => {
-  const { permanentGallery: e } = J(), { aspectRatioStyle: r } = re(), {
+}, tn = () => {
+  const { permanentGallery: e } = re(), { aspectRatioStyle: r } = oe(), {
     prevItem: n,
     nextItem: o,
     isShowingDetails: s,
-    resetShownDetails: p,
-    extendMode: d,
-    disableExtendMode: a,
-    isZooming: l,
-    resetZoom: w,
-    fakeFullScreen: m
-  } = q(), c = W(null), f = W(null), _ = W(null);
-  return Z(() => {
-    if (!d)
+    resetShownDetails: u,
+    extendMode: f,
+    disableExtendMode: d,
+    isZooming: c,
+    resetZoom: v,
+    fakeFullScreen: l
+  } = J(), m = Z(null), w = Z(null), C = Z(null);
+  return O(() => {
+    if (!f)
       return;
-    const b = c.current, y = f.current, L = _.current;
-    if (!b || !y || !L)
+    const a = m.current, h = w.current, x = C.current;
+    if (!a || !h || !x)
       return;
-    let x = !1;
-    const T = (g) => [b, y, L].includes(g.target), h = (g) => {
-      x = T(g);
-    }, u = (g) => {
-      x && (T(g) && a(), x = !1);
+    let j = !1;
+    const k = (b) => [a, h, x].includes(b.target), g = (b) => {
+      j = k(b);
+    }, p = (b) => {
+      j && (k(b) && d(), j = !1);
     };
-    return b.addEventListener("mousedown", h), b.addEventListener("mouseup", u), () => {
-      b.removeEventListener("mousedown", h), b.removeEventListener("mouseup", u);
+    return a.addEventListener("mousedown", g), a.addEventListener("mouseup", p), () => {
+      a.removeEventListener("mousedown", g), a.removeEventListener("mouseup", p);
     };
-  }, [a, d]), Z(() => {
-    const b = (y) => {
-      y.key === "Escape" && (l ? w() : s ? p() : a());
+  }, [d, f]), O(() => {
+    const a = (h) => {
+      h.key === "Escape" && (c ? v() : s ? u() : d());
     };
-    return addEventListener("keydown", b), () => {
-      removeEventListener("keydown", b);
+    return addEventListener("keydown", a), () => {
+      removeEventListener("keydown", a);
     };
   }, [
-    a,
+    d,
     s,
-    l,
+    c,
     o,
     n,
-    p,
-    w
+    u,
+    v
   ]), /* @__PURE__ */ t.jsxs(
     "div",
     {
-      ref: c,
-      className: R(
-        m ? "fixed inset-0 z-overlay" : "relative",
-        d && "flex size-full items-center justify-center bg-foreground/75"
+      ref: m,
+      className: H(
+        l ? "fixed inset-0 z-overlay" : "relative",
+        f && "flex size-full items-center justify-center bg-foreground/75"
       ),
       children: [
         /* @__PURE__ */ t.jsxs(
           "div",
           {
-            ref: f,
-            className: d ? "flex size-full flex-col justify-center gap-y-2 small:gap-y-4" : "space-y-2",
+            ref: w,
+            className: f ? "flex size-full flex-col justify-center gap-y-2 small:gap-y-4" : "space-y-2",
             children: [
               /* @__PURE__ */ t.jsx(
                 "div",
                 {
-                  ref: _,
-                  className: R(
-                    d && "mx-auto flex min-h-0 w-full max-w-[1600px] justify-center"
+                  ref: C,
+                  className: H(
+                    f && "mx-auto flex min-h-0 w-full max-w-[1600px] justify-center"
                   ),
                   style: r,
-                  children: /* @__PURE__ */ t.jsx($r, { className: R(d && "h-full min-w-0") })
+                  children: /* @__PURE__ */ t.jsx(en, { className: H(f && "h-full min-w-0") })
                 }
               ),
-              e && /* @__PURE__ */ t.jsx(_t, { className: R(d && "my-2 shrink-0 small:my-4") })
+              e && /* @__PURE__ */ t.jsx(Rt, { className: H(f && "my-2 shrink-0 small:my-4") })
             ]
           }
         ),
-        d && /* @__PURE__ */ t.jsx(
-          Ct,
+        f && /* @__PURE__ */ t.jsx(
+          zt,
           {
             className: "absolute right-2 top-2 small:right-4 small:top-4",
-            onClick: a
+            onClick: d
           }
         )
       ]
     }
   );
-}, Ur = ({
-  compositionUrl: e
-}) => {
-  const { emitEvent: r } = J(), {
+}, rn = () => {
+  const { emitEvent: e, compositionUrl: r } = re(), {
     data: n,
     status: o,
     isSuccess: s,
-    error: p
-  } = Kt(e);
-  return Z(() => {
-    p ? r(ot, p) : o === "fetching" ? r(rt, e) : s && r(nt, n);
-  }, [n, e, r, p, s, o]), p ? /* @__PURE__ */ t.jsx(
-    kt,
+    error: u
+  } = ar(r);
+  return O(() => {
+    u ? e(mt, u) : o === "fetching" ? e(dt, r) : s && e(ut, n);
+  }, [n, r, e, u, s, o]), u ? /* @__PURE__ */ t.jsx(
+    It,
     {
       className: "aspect-square text-foreground/70",
       text: "Player could not be loaded"
     }
-  ) : s ? /* @__PURE__ */ t.jsx(Jt, { composition: n, children: /* @__PURE__ */ t.jsx(er, { children: /* @__PURE__ */ t.jsx(Yr, {}) }) }) : /* @__PURE__ */ t.jsxs("div", { className: "flex aspect-square size-full flex-col items-center justify-center gap-y-4", children: [
+  ) : s ? /* @__PURE__ */ t.jsx(lr, { composition: n, children: /* @__PURE__ */ t.jsx(dr, { children: /* @__PURE__ */ t.jsx(tn, {}) }) }) : /* @__PURE__ */ t.jsxs("div", { className: "flex aspect-square size-full flex-col items-center justify-center gap-y-4", children: [
     /* @__PURE__ */ t.jsx("div", { className: "animate-pulse text-xl", children: "Loading Player" }),
-    /* @__PURE__ */ t.jsx(Et, { color: "foreground" })
+    /* @__PURE__ */ t.jsx(St, { color: "foreground" })
   ] });
-}, Xr = ({
+}, nn = ({
   compositionUrl: e,
-  hideCategories: r = At,
-  infiniteCarrousel: n = Ft,
-  permanentGallery: o = Wt,
-  mediaLoadStrategy: s = $t,
-  preloadRange: p = Yt,
-  preventFullScreen: d = Ut,
-  eventPrefix: a = mt,
-  reverse360: l = Xt,
-  children: w,
+  hideCategories: r = Bt,
+  infiniteCarrousel: n = Gt,
+  permanentGallery: o = Kt,
+  mediaLoadStrategy: s = qt,
+  minMediaWidth: u = Jt,
+  maxMediaWidth: f = Qt,
+  preloadRange: d = er,
+  preventFullScreen: c = tr,
+  eventPrefix: v = bt,
+  reverse360: l = rr,
+  children: m
   // NOTE: use to customize the player, not to display the content
-  ...m
-  // Contains the rest of the props (minMediaWidth / maxMediaWidth)
 }) => {
-  const c = W(null), [f, _] = F(0.5), [b, y] = F(!1), L = M(
-    (h, u) => {
-      const g = a + h, v = new CustomEvent(g, { detail: u });
-      document.dispatchEvent(v);
+  const w = Z(null), [C, a] = $(0.5), [h, x] = $(!1), j = I(
+    (p, b) => {
+      const E = v + p, L = new CustomEvent(E, { detail: b });
+      document.dispatchEvent(L);
     },
-    [a]
+    [v]
   );
-  Z(() => {
-    if (b) {
-      _(1);
+  O(() => {
+    if (h) {
+      a(1);
       return;
     }
-    if (!c.current)
+    if (!w.current)
       return;
-    const h = c.current, u = () => {
-      const g = window.innerWidth, v = h.clientWidth;
-      _(v / g);
+    const p = w.current, b = () => {
+      const E = window.innerWidth, L = p.clientWidth;
+      a(L / E);
     };
-    return u(), addEventListener("resize", u), () => {
-      removeEventListener("resize", u);
+    return b(), addEventListener("resize", b), () => {
+      removeEventListener("resize", b);
     };
-  }, [b]), Z(() => {
-    if (d)
+  }, [h]), O(() => {
+    if (c)
       return;
-    const h = c.current;
-    if (!h)
+    const p = w.current;
+    if (!p)
       throw new Error("Wrapper not found");
-    const u = () => {
-      const { fullscreenElement: g } = document;
-      y(
-        g === h || // NOTE: For custom element, the web browser is making the whole custom element full-screen and not only the wrapper
-        g?.localName === Ze
+    const b = () => {
+      const { fullscreenElement: E } = document;
+      x(
+        E === p || // NOTE: For custom element, the web browser is making the whole custom element full-screen and not only the wrapper
+        E?.localName === Ie
       );
     };
-    return document.addEventListener("fullscreenchange", u), () => {
-      document.removeEventListener("fullscreenchange", u);
+    return document.addEventListener("fullscreenchange", b), () => {
+      document.removeEventListener("fullscreenchange", b);
     };
-  }, [d]);
-  const x = M(async () => {
-    const h = c.current;
-    if (!h)
+  }, [c]);
+  const k = I(async () => {
+    const p = w.current;
+    if (!p)
       throw new Error("Wrapper not found");
     try {
-      return await h.requestFullscreen(), !0;
+      return await p.requestFullscreen(), !0;
     } catch {
       return !1;
     }
-  }, []), T = M(async () => {
+  }, []), g = I(async () => {
     try {
       return await document.exitFullscreen(), !0;
     } catch {
@@ -2610,48 +2752,63 @@ const Vr = ({ currentIndex: e, maxIndex: r }) => /* @__PURE__ */ t.jsxs("div", {
     }
   }, []);
   return /* @__PURE__ */ t.jsx(
-    Qt,
+    ir,
     {
-      ...m,
+      compositionUrl: e,
       hideCategories: r,
       infiniteCarrousel: n,
       permanentGallery: o,
       mediaLoadStrategy: s,
-      preloadRange: p,
-      preventFullScreen: d,
+      minMediaWidth: u,
+      maxMediaWidth: f,
+      preloadRange: d,
+      preventFullScreen: c,
       reverse360: l,
-      emitEvent: L,
-      playerInViewportWidthRatio: f,
-      isFullScreen: b,
-      requestFullscreen: x,
-      exitFullscreen: T,
-      children: /* @__PURE__ */ t.jsxs(lr, { children: [
+      emitEvent: j,
+      playerInViewportWidthRatio: C,
+      isFullScreen: h,
+      requestFullscreen: k,
+      exitFullscreen: g,
+      children: /* @__PURE__ */ t.jsxs(cr, { children: [
         /* @__PURE__ */ t.jsx(
           "div",
           {
             id: "cc-webplayer-wrapper",
-            ref: c,
+            ref: w,
             className: "select-none text-foreground",
-            children: /* @__PURE__ */ t.jsx(Ur, { compositionUrl: e })
+            children: /* @__PURE__ */ t.jsx(rn, {})
           }
         ),
-        w
+        m
       ] })
     }
   );
-}, Gr = ({ name: e, color: r, children: n }) => {
-  const { setIconConfig: o, resetIconConfig: s } = Fe();
-  return Z(() => {
-    if (!(!n && !r))
-      return o(e, {
-        Icon: n,
-        color: r
+}, on = ({ children: e, index: r, thumbnailSrc: n }) => {
+  const { registerCustomMedia: o, unregisterCustomMedia: s } = ye();
+  return O(() => {
+    if (!e)
+      return;
+    const u = o({
+      Media: e,
+      index: r,
+      thumbnailSrc: n
+    });
+    return () => {
+      s(u);
+    };
+  }, [e, s, r, o, n]), null;
+}, sn = (e) => Xe() ? /* @__PURE__ */ t.jsx(on, { ...e }) : /* @__PURE__ */ t.jsx("slot", {}), an = ({ name: e, children: r }) => {
+  const { registerIconConfig: n, unregisterIconConfig: o } = ye();
+  return O(() => {
+    if (r)
+      return n(e, {
+        Icon: r
       }), () => {
-        s(e);
+        o(e);
       };
-  }, [n, r, e, s, o]), null;
-}, Br = (e) => jt() ? /* @__PURE__ */ t.jsx(Gr, { ...e }) : /* @__PURE__ */ t.jsx("slot", {}), qr = '*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}#cc-webplayer-wrapper{--background: var(--cc-webplayer-background, 0 0% 100%);--foreground: var(--cc-webplayer-foreground, 240 10% 3.9%);--primary: var(--cc-webplayer-primary, 216 100% 52%);--primary-foreground: var( --cc-webplayer-primary-foreground, var(--background) );--primary-light: var(--cc-webplayer-primary-light, var(--primary));--neutral: var(--cc-webplayer-neutral, 0 0% 39%);--neutral-foreground: var( --cc-webplayer-neutral-foreground, var(--foreground) );--radius-ui: var(--cc-webplayer-radius-ui, 1rem);--radius-carrousel: var(--cc-webplayer-radius-carrousel, 0);--radius-gallery: var(--cc-webplayer-radius-gallery, 0)}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.\\!container{width:100%!important}.container{width:100%}@media (min-width: 1280px){.\\!container{max-width:1280px!important}.container{max-width:1280px}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.\\!pointer-events-none{pointer-events:none!important}.pointer-events-none{pointer-events:none}.pointer-events-auto{pointer-events:auto}.invisible{visibility:hidden}.fixed{position:fixed}.\\!absolute{position:absolute!important}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.inset-x-0{left:0;right:0}.inset-x-1{left:.25rem;right:.25rem}.inset-y-1{top:.25rem;bottom:.25rem}.-bottom-1{bottom:-.25rem}.-left-1{left:-.25rem}.-right-1{right:-.25rem}.-top-1{top:-.25rem}.bottom-0{bottom:0}.bottom-1{bottom:.25rem}.left-0{left:0}.left-1{left:.25rem}.left-1\\/2{left:50%}.right-1{right:.25rem}.right-2{right:.5rem}.top-0{top:0}.top-1{top:.25rem}.top-1\\/2{top:50%}.top-2{top:.5rem}.-z-10{z-index:-10}.-z-20{z-index:-20}.z-1{z-index:1}.z-hotspot{z-index:10}.z-overlay{z-index:30}.z-zoomed-image{z-index:20}.col-start-3{grid-column-start:3}.mx-1{margin-left:.25rem;margin-right:.25rem}.mx-auto{margin-left:auto;margin-right:auto}.my-2{margin-top:.5rem;margin-bottom:.5rem}.-ml-px{margin-left:-1px}.-mt-px{margin-top:-1px}.inline-block{display:inline-block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.aspect-square{aspect-ratio:1 / 1}.size-1{width:.25rem;height:.25rem}.size-12{width:3rem;height:3rem}.size-20{width:5rem;height:5rem}.size-4{width:1rem;height:1rem}.size-5{width:1.25rem;height:1.25rem}.size-8{width:2rem;height:2rem}.size-full{width:100%;height:100%}.h-1{height:.25rem}.h-10{height:2.5rem}.h-20{height:5rem}.h-3\\/4{height:75%}.h-5{height:1.25rem}.h-8{height:2rem}.h-full{height:100%}.h-px{height:1px}.min-h-0{min-height:0px}.w-12{width:3rem}.w-3\\/5{width:60%}.w-8{width:2rem}.w-\\[calc\\(100\\%\\+1024px\\)\\]{width:calc(100% + 1024px)}.w-\\[calc\\(100\\%\\+2px\\)\\]{width:calc(100% + 2px)}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.w-max{width:-moz-max-content;width:max-content}.w-px{width:1px}.min-w-0{min-width:0px}.max-w-40{max-width:10rem}.max-w-\\[1600px\\]{max-width:1600px}.shrink-0{flex-shrink:0}.origin-top-left{transform-origin:top left}.-translate-x-1\\.5{--tw-translate-x: -.375rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-x-1\\/2{--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\/2{--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-0{--tw-translate-x: 0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-1\\.5{--tw-translate-x: .375rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-full{--tw-translate-x: 100%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-180{--tw-rotate: 180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-100{--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-105{--tw-scale-x: 1.05;--tw-scale-y: 1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes hotspot-ping{0%{transform:scale(0)}25%{opacity:1}75%,to{transform:scale(1.5);opacity:0}}.animate-hotspot-ping{animation:hotspot-ping 3s cubic-bezier(0,0,.2,1) infinite}@keyframes pulse{50%{opacity:1}0%,to{opacity:0}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-rotation{animation:rotation 1s linear infinite}.cursor-auto{cursor:auto}.cursor-ew-resize{cursor:ew-resize}.cursor-grab{cursor:grab}.cursor-grabbing{cursor:grabbing}.cursor-help{cursor:help}.cursor-move{cursor:move}.cursor-pointer{cursor:pointer}.resize{resize:both}.grid-cols-\\[auto\\,1fr\\,auto\\]{grid-template-columns:auto 1fr auto}.flex-col{flex-direction:column}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-x-1{-moz-column-gap:.25rem;column-gap:.25rem}.gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.gap-y-1{row-gap:.25rem}.gap-y-2{row-gap:.5rem}.gap-y-4{row-gap:1rem}.space-x-0\\.5>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.125rem * var(--tw-space-x-reverse));margin-left:calc(.125rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-0\\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.125rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.125rem * var(--tw-space-y-reverse))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-x-scroll{overflow-x:scroll}.text-pretty{text-wrap:pretty}.rounded-carrousel{border-radius:var(--radius-carrousel)}.rounded-full{border-radius:9999px}.rounded-gallery{border-radius:var(--radius-gallery)}.rounded-ui{border-radius:var(--radius-ui)}.rounded-ui-md{border-radius:calc(var(--radius-ui) + .125rem)}.rounded-ui-sm{border-radius:calc(var(--radius-ui) - .125rem)}.rounded-b-none{border-bottom-right-radius:0;border-bottom-left-radius:0}.rounded-t-none{border-top-left-radius:0;border-top-right-radius:0}.border{border-width:1px}.border-2{border-width:2px}.border-4{border-width:4px}.border-background{border-color:hsl(var(--background))}.border-foreground{border-color:hsl(var(--foreground))}.border-primary{border-color:hsl(var(--primary))}.border-b-transparent{border-bottom-color:transparent}.bg-background{background-color:hsl(var(--background))}.bg-background\\/25{background-color:hsl(var(--background) / .25)}.bg-background\\/50{background-color:hsl(var(--background) / .5)}.bg-background\\/60{background-color:hsl(var(--background) / .6)}.bg-foreground\\/25{background-color:hsl(var(--foreground) / .25)}.bg-foreground\\/30{background-color:hsl(var(--foreground) / .3)}.bg-foreground\\/35{background-color:hsl(var(--foreground) / .35)}.bg-foreground\\/40{background-color:hsl(var(--foreground) / .4)}.bg-foreground\\/50{background-color:hsl(var(--foreground) / .5)}.bg-foreground\\/60{background-color:hsl(var(--foreground) / .6)}.bg-foreground\\/65{background-color:hsl(var(--foreground) / .65)}.bg-foreground\\/75{background-color:hsl(var(--foreground) / .75)}.bg-neutral\\/50{background-color:hsl(var(--neutral) / .5)}.bg-primary{background-color:hsl(var(--primary))}.bg-primary-foreground{background-color:hsl(var(--primary-foreground))}.bg-primary\\/50{background-color:hsl(var(--primary) / .5)}.bg-transparent{background-color:transparent}.bg-gradient-to-t{background-image:linear-gradient(to top,var(--tw-gradient-stops))}.from-foreground{--tw-gradient-from: hsl(var(--foreground)) var(--tw-gradient-from-position);--tw-gradient-to: hsl(var(--foreground) / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.to-transparent{--tw-gradient-to: transparent var(--tw-gradient-to-position)}.object-cover{-o-object-fit:cover;object-fit:cover}.p-0\\.5{padding:.125rem}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-4{padding:1rem}.px-1\\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-0\\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.pl-6{padding-left:1.5rem}.pr-12{padding-right:3rem}.pr-4{padding-right:1rem}.pt-8{padding-top:2rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.text-background{color:hsl(var(--background))}.text-background\\/75{color:hsl(var(--background) / .75)}.text-foreground{color:hsl(var(--foreground))}.text-foreground\\/65{color:hsl(var(--foreground) / .65)}.text-foreground\\/70{color:hsl(var(--foreground) / .7)}.text-neutral-foreground{color:hsl(var(--neutral-foreground))}.text-primary{color:hsl(var(--primary))}.text-primary-foreground{color:hsl(var(--primary-foreground))}.text-primary-light{color:hsl(var(--primary-light))}.opacity-0{opacity:0}.opacity-100{opacity:1}.shadow{--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-\\[width\\]{transition-property:width;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-radius{transition-property:border-radius;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.duration-details{transition-duration:.35s}.no-scrollbar{scrollbar-width:none;-ms-overflow-style:none}.no-scrollbar::-webkit-scrollbar{display:none}.\\[mask-image\\:linear-gradient\\(to_left\\,transparent_0px\\,black_4px\\,black_calc\\(100\\%-4px\\)\\,transparent_100\\%\\)\\]{-webkit-mask-image:linear-gradient(to left,transparent 0px,black 4px,black calc(100% - 4px),transparent 100%);mask-image:linear-gradient(to left,transparent 0px,black 4px,black calc(100% - 4px),transparent 100%)}.\\*\\:pointer-events-auto>*{pointer-events:auto}.\\*\\:snap-start>*{scroll-snap-align:start}.\\*\\:snap-always>*{scroll-snap-stop:always}.after\\:absolute:after{content:var(--tw-content);position:absolute}.after\\:inset-0:after{content:var(--tw-content);inset:0}.after\\:rounded-gallery:after{content:var(--tw-content);border-radius:var(--radius-gallery)}.after\\:border-2:after{content:var(--tw-content);border-width:2px}.after\\:border-primary:after{content:var(--tw-content);border-color:hsl(var(--primary))}.after\\:opacity-0:after{content:var(--tw-content);opacity:0}.after\\:opacity-100:after{content:var(--tw-content);opacity:1}.after\\:transition-all:after{content:var(--tw-content);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.hover\\:z-hotspot-hover:hover{z-index:11}.hover\\:bg-foreground\\/25:hover{background-color:hsl(var(--foreground) / .25)}.hover\\:bg-primary\\/25:hover{background-color:hsl(var(--primary) / .25)}.hover\\:bg-primary\\/30:hover{background-color:hsl(var(--primary) / .3)}.hover\\:opacity-80:hover{opacity:.8}.hover\\:after\\:opacity-70:hover:after{content:var(--tw-content);opacity:.7}.disabled\\:opacity-60:disabled{opacity:.6}.group:hover .group-hover\\:pointer-events-auto{pointer-events:auto}.group\\/volume:hover .group-hover\\/volume\\:opacity-100{opacity:1}.group\\/volume:hover .group-hover\\/volume\\:opacity-50{opacity:.5}.group:hover .group-hover\\:opacity-100{opacity:1}@media ((orientation: portrait) and (max-width: 767px)) or ((orientation: landscape) and (max-width: 1023px)){.max-small\\:hidden{display:none}}@media ((orientation: portrait) and (min-width: 768px)) or ((orientation: landscape) and (min-width: 1024px)){.small\\:inset-x-2{left:.5rem;right:.5rem}.small\\:inset-y-2{top:.5rem;bottom:.5rem}.small\\:bottom-2{bottom:.5rem}.small\\:left-2{left:.5rem}.small\\:right-2{right:.5rem}.small\\:right-4{right:1rem}.small\\:top-2{top:.5rem}.small\\:top-4{top:1rem}.small\\:my-4{margin-top:1rem;margin-bottom:1rem}.small\\:hidden{display:none}.small\\:h-12{height:3rem}.small\\:h-28{height:7rem}.small\\:max-w-48{max-width:12rem}.small\\:gap-2{gap:.5rem}.small\\:gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.small\\:gap-y-2{row-gap:.5rem}.small\\:gap-y-4{row-gap:1rem}.small\\:space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.25rem * var(--tw-space-x-reverse));margin-left:calc(.25rem * calc(1 - var(--tw-space-x-reverse)))}.small\\:p-3{padding:.75rem}.small\\:px-2{padding-left:.5rem;padding-right:.5rem}.small\\:py-1{padding-top:.25rem;padding-bottom:.25rem}.small\\:pl-8{padding-left:2rem}.small\\:pr-6{padding-right:1.5rem}.small\\:text-base{font-size:1rem;line-height:1.5rem}.small\\:text-sm{font-size:.875rem;line-height:1.25rem}.small\\:font-bold{font-weight:700}}@media (min-width: 1280px){.large\\:h-20{height:5rem}.large\\:h-3\\/5{height:60%}.large\\:max-w-56{max-width:14rem}.large\\:gap-4{gap:1rem}.large\\:p-2{padding:.5rem}.large\\:p-4{padding:1rem}.large\\:text-base{font-size:1rem;line-height:1.5rem}.large\\:text-lg{font-size:1.125rem;line-height:1.75rem}}';
-var Mt = { exports: {} }, ve = {};
+  }, [r, e, n, o]), null;
+}, ln = (e) => Xe() ? /* @__PURE__ */ t.jsx(an, { ...e }) : /* @__PURE__ */ t.jsx("slot", {}), cn = '*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}#cc-webplayer-wrapper{--background: var(--cc-webplayer-background, 0 0% 100%);--foreground: var(--cc-webplayer-foreground, 240 10% 3.9%);--primary: var(--cc-webplayer-primary, 216 100% 52%);--primary-foreground: var( --cc-webplayer-primary-foreground, var(--background) );--primary-light: var(--cc-webplayer-primary-light, var(--primary));--neutral: var(--cc-webplayer-neutral, 0 0% 39%);--neutral-foreground: var( --cc-webplayer-neutral-foreground, var(--foreground) );--radius-ui: var(--cc-webplayer-radius-ui, 1rem);--radius-carrousel: var(--cc-webplayer-radius-carrousel, 0);--radius-gallery: var(--cc-webplayer-radius-gallery, 0)}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.\\!container{width:100%!important}.container{width:100%}@media (min-width: 1280px){.\\!container{max-width:1280px!important}.container{max-width:1280px}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.\\!pointer-events-none{pointer-events:none!important}.pointer-events-none{pointer-events:none}.pointer-events-auto{pointer-events:auto}.invisible{visibility:hidden}.fixed{position:fixed}.\\!absolute{position:absolute!important}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.inset-x-0{left:0;right:0}.inset-x-1{left:.25rem;right:.25rem}.inset-y-1{top:.25rem;bottom:.25rem}.-bottom-1{bottom:-.25rem}.-left-1{left:-.25rem}.-right-1{right:-.25rem}.-top-1{top:-.25rem}.bottom-0{bottom:0}.bottom-1{bottom:.25rem}.left-0{left:0}.left-1{left:.25rem}.left-1\\/2{left:50%}.right-1{right:.25rem}.right-2{right:.5rem}.top-0{top:0}.top-1{top:.25rem}.top-1\\/2{top:50%}.top-2{top:.5rem}.-z-10{z-index:-10}.-z-20{z-index:-20}.z-1{z-index:1}.z-hotspot{z-index:10}.z-overlay{z-index:30}.z-zoomed-image{z-index:20}.col-start-3{grid-column-start:3}.mx-1{margin-left:.25rem;margin-right:.25rem}.mx-auto{margin-left:auto;margin-right:auto}.my-2{margin-top:.5rem;margin-bottom:.5rem}.-ml-px{margin-left:-1px}.-mt-px{margin-top:-1px}.inline-block{display:inline-block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.aspect-square{aspect-ratio:1 / 1}.size-1{width:.25rem;height:.25rem}.size-12{width:3rem;height:3rem}.size-20{width:5rem;height:5rem}.size-4{width:1rem;height:1rem}.size-5{width:1.25rem;height:1.25rem}.size-8{width:2rem;height:2rem}.size-full{width:100%;height:100%}.h-1{height:.25rem}.h-10{height:2.5rem}.h-20{height:5rem}.h-3\\/4{height:75%}.h-5{height:1.25rem}.h-8{height:2rem}.h-full{height:100%}.h-px{height:1px}.min-h-0{min-height:0px}.w-12{width:3rem}.w-3\\/5{width:60%}.w-8{width:2rem}.w-\\[calc\\(100\\%\\+1024px\\)\\]{width:calc(100% + 1024px)}.w-\\[calc\\(100\\%\\+2px\\)\\]{width:calc(100% + 2px)}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.w-max{width:-moz-max-content;width:max-content}.w-px{width:1px}.min-w-0{min-width:0px}.max-w-40{max-width:10rem}.max-w-\\[1600px\\]{max-width:1600px}.shrink-0{flex-shrink:0}.origin-top-left{transform-origin:top left}.-translate-x-1\\.5{--tw-translate-x: -.375rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-x-1\\/2{--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\/2{--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-0{--tw-translate-x: 0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-1\\.5{--tw-translate-x: .375rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-full{--tw-translate-x: 100%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-100{--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-105{--tw-scale-x: 1.05;--tw-scale-y: 1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-scale-x-100{--tw-scale-x: -1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes hotspot-ping{0%{transform:scale(0)}25%{opacity:1}75%,to{transform:scale(1.5);opacity:0}}.animate-hotspot-ping{animation:hotspot-ping 3s cubic-bezier(0,0,.2,1) infinite}@keyframes pulse{50%{opacity:1}0%,to{opacity:0}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-rotation{animation:rotation 1s linear infinite}.cursor-auto{cursor:auto}.cursor-ew-resize{cursor:ew-resize}.cursor-grab{cursor:grab}.cursor-grabbing{cursor:grabbing}.cursor-help{cursor:help}.cursor-move{cursor:move}.cursor-pointer{cursor:pointer}.resize{resize:both}.grid-cols-\\[auto\\,1fr\\,auto\\]{grid-template-columns:auto 1fr auto}.flex-col{flex-direction:column}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-x-1{-moz-column-gap:.25rem;column-gap:.25rem}.gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.gap-y-1{row-gap:.25rem}.gap-y-2{row-gap:.5rem}.gap-y-4{row-gap:1rem}.space-x-0\\.5>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.125rem * var(--tw-space-x-reverse));margin-left:calc(.125rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-0\\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.125rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.125rem * var(--tw-space-y-reverse))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-x-scroll{overflow-x:scroll}.text-pretty{text-wrap:pretty}.rounded-carrousel{border-radius:var(--radius-carrousel)}.rounded-full{border-radius:9999px}.rounded-gallery{border-radius:var(--radius-gallery)}.rounded-ui{border-radius:var(--radius-ui)}.rounded-ui-md{border-radius:calc(var(--radius-ui) + .125rem)}.rounded-ui-sm{border-radius:calc(var(--radius-ui) - .125rem)}.rounded-b-none{border-bottom-right-radius:0;border-bottom-left-radius:0}.rounded-t-none{border-top-left-radius:0;border-top-right-radius:0}.border{border-width:1px}.border-2{border-width:2px}.border-4{border-width:4px}.border-background{border-color:hsl(var(--background))}.border-foreground{border-color:hsl(var(--foreground))}.border-primary{border-color:hsl(var(--primary))}.border-b-transparent{border-bottom-color:transparent}.bg-background{background-color:hsl(var(--background))}.bg-background\\/25{background-color:hsl(var(--background) / .25)}.bg-background\\/50{background-color:hsl(var(--background) / .5)}.bg-background\\/60{background-color:hsl(var(--background) / .6)}.bg-foreground\\/25{background-color:hsl(var(--foreground) / .25)}.bg-foreground\\/30{background-color:hsl(var(--foreground) / .3)}.bg-foreground\\/35{background-color:hsl(var(--foreground) / .35)}.bg-foreground\\/40{background-color:hsl(var(--foreground) / .4)}.bg-foreground\\/50{background-color:hsl(var(--foreground) / .5)}.bg-foreground\\/60{background-color:hsl(var(--foreground) / .6)}.bg-foreground\\/65{background-color:hsl(var(--foreground) / .65)}.bg-foreground\\/75{background-color:hsl(var(--foreground) / .75)}.bg-neutral\\/50{background-color:hsl(var(--neutral) / .5)}.bg-primary{background-color:hsl(var(--primary))}.bg-primary-foreground{background-color:hsl(var(--primary-foreground))}.bg-primary\\/50{background-color:hsl(var(--primary) / .5)}.bg-transparent{background-color:transparent}.bg-gradient-to-t{background-image:linear-gradient(to top,var(--tw-gradient-stops))}.from-foreground{--tw-gradient-from: hsl(var(--foreground)) var(--tw-gradient-from-position);--tw-gradient-to: hsl(var(--foreground) / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.to-transparent{--tw-gradient-to: transparent var(--tw-gradient-to-position)}.object-cover{-o-object-fit:cover;object-fit:cover}.p-0\\.5{padding:.125rem}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-4{padding:1rem}.px-1\\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-0\\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.pl-6{padding-left:1.5rem}.pr-12{padding-right:3rem}.pr-4{padding-right:1rem}.pt-8{padding-top:2rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.text-background{color:hsl(var(--background))}.text-background\\/75{color:hsl(var(--background) / .75)}.text-foreground{color:hsl(var(--foreground))}.text-foreground\\/65{color:hsl(var(--foreground) / .65)}.text-foreground\\/70{color:hsl(var(--foreground) / .7)}.text-neutral-foreground{color:hsl(var(--neutral-foreground))}.text-primary{color:hsl(var(--primary))}.text-primary-foreground{color:hsl(var(--primary-foreground))}.text-primary-light{color:hsl(var(--primary-light))}.opacity-0{opacity:0}.opacity-100{opacity:1}.shadow{--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-\\[width\\]{transition-property:width;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-radius{transition-property:border-radius;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.duration-details{transition-duration:.35s}.no-scrollbar{scrollbar-width:none;-ms-overflow-style:none}.no-scrollbar::-webkit-scrollbar{display:none}.\\[mask-image\\:linear-gradient\\(to_left\\,transparent_0px\\,black_4px\\,black_calc\\(100\\%-4px\\)\\,transparent_100\\%\\)\\]{-webkit-mask-image:linear-gradient(to left,transparent 0px,black 4px,black calc(100% - 4px),transparent 100%);mask-image:linear-gradient(to left,transparent 0px,black 4px,black calc(100% - 4px),transparent 100%)}.\\*\\:pointer-events-auto>*{pointer-events:auto}.\\*\\:size-full>*{width:100%;height:100%}.\\*\\:snap-start>*{scroll-snap-align:start}.\\*\\:snap-always>*{scroll-snap-stop:always}.\\*\\:object-cover>*{-o-object-fit:cover;object-fit:cover}.after\\:absolute:after{content:var(--tw-content);position:absolute}.after\\:inset-0:after{content:var(--tw-content);inset:0}.after\\:rounded-gallery:after{content:var(--tw-content);border-radius:var(--radius-gallery)}.after\\:border-2:after{content:var(--tw-content);border-width:2px}.after\\:border-primary:after{content:var(--tw-content);border-color:hsl(var(--primary))}.after\\:opacity-0:after{content:var(--tw-content);opacity:0}.after\\:opacity-100:after{content:var(--tw-content);opacity:1}.after\\:transition-all:after{content:var(--tw-content);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.hover\\:z-hotspot-hover:hover{z-index:11}.hover\\:bg-foreground\\/25:hover{background-color:hsl(var(--foreground) / .25)}.hover\\:bg-primary\\/25:hover{background-color:hsl(var(--primary) / .25)}.hover\\:bg-primary\\/30:hover{background-color:hsl(var(--primary) / .3)}.hover\\:opacity-80:hover{opacity:.8}.hover\\:after\\:opacity-70:hover:after{content:var(--tw-content);opacity:.7}.disabled\\:opacity-60:disabled{opacity:.6}.group:hover .group-hover\\:pointer-events-auto{pointer-events:auto}.group\\/volume:hover .group-hover\\/volume\\:opacity-100{opacity:1}.group\\/volume:hover .group-hover\\/volume\\:opacity-50{opacity:.5}.group:hover .group-hover\\:opacity-100{opacity:1}@media ((orientation: portrait) and (max-width: 767px)) or ((orientation: landscape) and (max-width: 1023px)){.max-small\\:hidden{display:none}}@media ((orientation: portrait) and (min-width: 768px)) or ((orientation: landscape) and (min-width: 1024px)){.small\\:inset-x-2{left:.5rem;right:.5rem}.small\\:inset-y-2{top:.5rem;bottom:.5rem}.small\\:bottom-2{bottom:.5rem}.small\\:left-2{left:.5rem}.small\\:right-2{right:.5rem}.small\\:right-4{right:1rem}.small\\:top-2{top:.5rem}.small\\:top-4{top:1rem}.small\\:my-4{margin-top:1rem;margin-bottom:1rem}.small\\:hidden{display:none}.small\\:h-12{height:3rem}.small\\:h-28{height:7rem}.small\\:max-w-48{max-width:12rem}.small\\:gap-2{gap:.5rem}.small\\:gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.small\\:gap-y-2{row-gap:.5rem}.small\\:gap-y-4{row-gap:1rem}.small\\:space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.25rem * var(--tw-space-x-reverse));margin-left:calc(.25rem * calc(1 - var(--tw-space-x-reverse)))}.small\\:p-3{padding:.75rem}.small\\:px-2{padding-left:.5rem;padding-right:.5rem}.small\\:py-1{padding-top:.25rem;padding-bottom:.25rem}.small\\:pl-8{padding-left:2rem}.small\\:pr-6{padding-right:1.5rem}.small\\:text-base{font-size:1rem;line-height:1.5rem}.small\\:text-sm{font-size:.875rem;line-height:1.25rem}.small\\:font-bold{font-weight:700}}@media (min-width: 1280px){.large\\:h-20{height:5rem}.large\\:h-3\\/5{height:60%}.large\\:max-w-56{max-width:14rem}.large\\:gap-4{gap:1rem}.large\\:p-2{padding:.5rem}.large\\:p-4{padding:1rem}.large\\:text-base{font-size:1rem;line-height:1.5rem}.large\\:text-lg{font-size:1.125rem;line-height:1.75rem}}';
+var Ot = { exports: {} }, ve = {};
 /**
  * @license React
  * react-jsx-runtime.production.min.js
@@ -2661,32 +2818,32 @@ var Mt = { exports: {} }, ve = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var Qe;
-function Kr() {
-  if (Qe) return ve;
-  Qe = 1;
-  var e = be, r = Symbol.for("react.element"), n = Symbol.for("react.fragment"), o = Object.prototype.hasOwnProperty, s = e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, p = { key: !0, ref: !0, __self: !0, __source: !0 };
-  function d(a, l, w) {
-    var m, c = {}, f = null, _ = null;
-    w !== void 0 && (f = "" + w), l.key !== void 0 && (f = "" + l.key), l.ref !== void 0 && (_ = l.ref);
-    for (m in l) o.call(l, m) && !p.hasOwnProperty(m) && (c[m] = l[m]);
-    if (a && a.defaultProps) for (m in l = a.defaultProps, l) c[m] === void 0 && (c[m] = l[m]);
-    return { $$typeof: r, type: a, key: f, ref: _, props: c, _owner: s.current };
+var lt;
+function dn() {
+  if (lt) return ve;
+  lt = 1;
+  var e = be, r = Symbol.for("react.element"), n = Symbol.for("react.fragment"), o = Object.prototype.hasOwnProperty, s = e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, u = { key: !0, ref: !0, __self: !0, __source: !0 };
+  function f(d, c, v) {
+    var l, m = {}, w = null, C = null;
+    v !== void 0 && (w = "" + v), c.key !== void 0 && (w = "" + c.key), c.ref !== void 0 && (C = c.ref);
+    for (l in c) o.call(c, l) && !u.hasOwnProperty(l) && (m[l] = c[l]);
+    if (d && d.defaultProps) for (l in c = d.defaultProps, c) m[l] === void 0 && (m[l] = c[l]);
+    return { $$typeof: r, type: d, key: w, ref: C, props: m, _owner: s.current };
   }
-  return ve.Fragment = n, ve.jsx = d, ve.jsxs = d, ve;
+  return ve.Fragment = n, ve.jsx = f, ve.jsxs = f, ve;
 }
-Mt.exports = Kr();
-var Ce = Mt.exports, Jr = Object.defineProperty, Qr = (e, r, n) => r in e ? Jr(e, r, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[r] = n, ke = (e, r, n) => (Qr(e, typeof r != "symbol" ? r + "" : r, n), n);
-const en = {
+Ot.exports = dn();
+var ke = Ot.exports, un = Object.defineProperty, mn = (e, r, n) => r in e ? un(e, r, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[r] = n, Ee = (e, r, n) => (mn(e, typeof r != "symbol" ? r + "" : r, n), n);
+const pn = {
   stringify: (e) => e,
   parse: (e) => e
-}, tn = {
+}, hn = {
   stringify: (e) => `${e}`,
   parse: (e) => parseFloat(e)
-}, rn = {
+}, fn = {
   stringify: (e) => e ? "true" : "false",
   parse: (e) => /^[ty1-9]/i.test(e)
-}, nn = {
+}, gn = {
   stringify: (e) => e.name,
   parse: (e, r, n) => {
     const o = (() => {
@@ -2697,117 +2854,120 @@ const en = {
     })();
     return typeof o == "function" ? o.bind(n) : void 0;
   }
-}, on = {
+}, xn = {
   stringify: (e) => JSON.stringify(e),
   parse: (e) => JSON.parse(e)
-}, Pe = {
-  string: en,
-  number: tn,
-  boolean: rn,
-  function: nn,
-  json: on
+}, $e = {
+  string: pn,
+  number: hn,
+  boolean: fn,
+  function: gn,
+  json: xn
 };
-function sn(e) {
+function wn(e) {
   return e.replace(
     /([a-z0-9])([A-Z])/g,
     (r, n, o) => `${n}-${o.toLowerCase()}`
   );
 }
-const Ee = Symbol.for("r2wc.render"), Ne = Symbol.for("r2wc.connected"), se = Symbol.for("r2wc.context"), ee = Symbol.for("r2wc.props");
-function an(e, r, n) {
-  var o, s, p;
+const Ce = Symbol.for("r2wc.render"), Ne = Symbol.for("r2wc.connected"), ie = Symbol.for("r2wc.context"), ne = Symbol.for("r2wc.props");
+function vn(e, r, n) {
+  var o, s, u;
   r.props || (r.props = e.propTypes ? Object.keys(e.propTypes) : []);
-  const d = Array.isArray(r.props) ? r.props.slice() : Object.keys(r.props), a = {}, l = {}, w = {};
-  for (const c of d) {
-    a[c] = Array.isArray(r.props) ? "string" : r.props[c];
-    const f = sn(c);
-    l[c] = f, w[f] = c;
+  const f = Array.isArray(r.props) ? r.props.slice() : Object.keys(r.props), d = {}, c = {}, v = {};
+  for (const m of f) {
+    d[m] = Array.isArray(r.props) ? "string" : r.props[m];
+    const w = wn(m);
+    c[m] = w, v[w] = m;
   }
-  class m extends HTMLElement {
+  class l extends HTMLElement {
     constructor() {
-      super(), ke(this, o, !0), ke(this, s), ke(this, p, {}), ke(this, "container"), r.shadow ? this.container = this.attachShadow({
+      super(), Ee(this, o, !0), Ee(this, s), Ee(this, u, {}), Ee(this, "container"), r.shadow ? this.container = this.attachShadow({
         mode: r.shadow
-      }) : this.container = this, this[ee].container = this.container;
-      for (const f of d) {
-        const _ = l[f], b = this.getAttribute(_), y = a[f], L = y ? Pe[y] : null;
-        L != null && L.parse && b && (this[ee][f] = L.parse(b, _, this));
+      }) : this.container = this, this[ne].container = this.container;
+      for (const w of f) {
+        const C = c[w], a = this.getAttribute(C), h = d[w], x = h ? $e[h] : null;
+        x != null && x.parse && a && (this[ne][w] = x.parse(a, C, this));
       }
     }
     static get observedAttributes() {
-      return Object.keys(w);
+      return Object.keys(v);
     }
     connectedCallback() {
-      this[Ne] = !0, this[Ee]();
+      this[Ne] = !0, this[Ce]();
     }
     disconnectedCallback() {
-      this[Ne] = !1, this[se] && n.unmount(this[se]), delete this[se];
+      this[Ne] = !1, this[ie] && n.unmount(this[ie]), delete this[ie];
     }
-    attributeChangedCallback(f, _, b) {
-      const y = w[f], L = a[y], x = L ? Pe[L] : null;
-      y in a && x != null && x.parse && b && (this[ee][y] = x.parse(b, f, this), this[Ee]());
+    attributeChangedCallback(w, C, a) {
+      const h = v[w], x = d[h], j = x ? $e[x] : null;
+      h in d && j != null && j.parse && a && (this[ne][h] = j.parse(a, w, this), this[Ce]());
     }
-    [(o = Ne, s = se, p = ee, Ee)]() {
-      this[Ne] && (this[se] ? n.update(this[se], this[ee]) : this[se] = n.mount(
+    [(o = Ne, s = ie, u = ne, Ce)]() {
+      this[Ne] && (this[ie] ? n.update(this[ie], this[ne]) : this[ie] = n.mount(
         this.container,
         e,
-        this[ee]
+        this[ne]
       ));
     }
   }
-  for (const c of d) {
-    const f = l[c], _ = a[c];
-    Object.defineProperty(m.prototype, c, {
+  for (const m of f) {
+    const w = c[m], C = d[m];
+    Object.defineProperty(l.prototype, m, {
       enumerable: !0,
       configurable: !0,
       get() {
-        return this[ee][c];
+        return this[ne][m];
       },
-      set(b) {
-        this[ee][c] = b;
-        const y = _ ? Pe[_] : null;
-        if (y != null && y.stringify) {
-          const L = y.stringify(b, f, this);
-          this.getAttribute(f) !== L && this.setAttribute(f, L);
+      set(a) {
+        this[ne][m] = a;
+        const h = C ? $e[C] : null;
+        if (h != null && h.stringify) {
+          const x = h.stringify(a, w, this);
+          this.getAttribute(w) !== x && this.setAttribute(w, x);
         } else
-          this[Ee]();
+          this[Ce]();
       }
     });
   }
-  return m;
+  return l;
 }
-function ln(e, r, n) {
-  const o = Dt(e), s = be.createElement(r, n);
+function bn(e, r, n) {
+  const o = Yt(e), s = be.createElement(r, n);
   return o.render(s), {
     root: o,
     ReactComponent: r
   };
 }
-function cn({ root: e, ReactComponent: r }, n) {
+function yn({ root: e, ReactComponent: r }, n) {
   const o = be.createElement(r, n);
   e.render(o);
 }
-function dn({ root: e }) {
+function jn({ root: e }) {
   e.unmount();
 }
-function Tt(e, r = {}) {
-  return an(e, r, { mount: ln, update: cn, unmount: dn });
+function Ge(e, r = {}) {
+  return vn(e, r, { mount: bn, update: yn, unmount: jn });
 }
-function un(e) {
+function kn(e) {
   return e.replace(
     /([a-z0-9])([A-Z])/g,
     (r, n, o) => `${n}-${o.toLowerCase()}`
   );
 }
-function mn(e) {
-  const r = {};
-  return Object.entries(e).forEach(([n, o]) => {
-    r[un(n)] = o.toString();
-  }), r;
+function Ke(e) {
+  return Object.entries(e).reduce((r, [n, o]) => {
+    if (o !== void 0) {
+      const s = kn(n);
+      r[s] = o.toString();
+    }
+    return r;
+  }, {});
 }
-const pn = (e) => /* @__PURE__ */ Ce.jsxs(Ce.Fragment, { children: [
-  /* @__PURE__ */ Ce.jsx("style", { children: qr }),
-  /* @__PURE__ */ Ce.jsx(Xr, { ...e })
-] }), hn = Tt(pn, {
+const En = (e) => /* @__PURE__ */ ke.jsxs(ke.Fragment, { children: [
+  /* @__PURE__ */ ke.jsx("style", { children: cn }),
+  /* @__PURE__ */ ke.jsx(nn, { ...e })
+] }), Cn = Ge(En, {
   shadow: "open",
   props: {
     compositionUrl: "string",
@@ -2821,91 +2981,117 @@ const pn = (e) => /* @__PURE__ */ Ce.jsxs(Ce.Fragment, { children: [
     eventPrefix: "string",
     reverse360: "boolean"
   }
-}), gn = (e) => mn(e), fn = Tt(Br, {
+}), Nn = (e) => Ke(e), Ln = Ge(sn, {
   shadow: "closed",
   props: {
-    name: "string",
-    color: "string"
+    index: "number",
+    thumbnailSrc: "string"
   }
-});
-function xn() {
-  return !!customElements.get(Ze) && !!customElements.get(Ae);
+}), _n = (e) => Ke(e), Mn = Ge(ln, {
+  shadow: "closed",
+  props: {
+    name: "string"
+  }
+}), zn = (e) => Ke(e);
+function In() {
+  return !!customElements.get(Ie) && !!customElements.get(We) && !!customElements.get(Ye);
 }
-function wn() {
-  customElements.define(Ze, hn), customElements.define(Ae, fn);
+function Sn() {
+  customElements.define(Ie, Cn), customElements.define(
+    We,
+    Ln
+  ), customElements.define(Ye, Mn);
 }
-function Vt() {
-  xn() || wn();
+function qe() {
+  In() || Sn();
 }
-Vt();
-const jn = ({
+qe();
+const Rn = ({
   onCompositionLoading: e,
   onCompositionLoaded: r,
   onCompositionLoadError: n,
   onItemChange: o,
   onExtendModeOn: s,
-  onExtendModeOff: p,
-  onHotspotsOn: d,
-  onHotspotsOff: a,
-  onGalleryOpen: l,
-  onGalleryClose: w,
-  ...m
+  onExtendModeOff: u,
+  onHotspotsOn: f,
+  onHotspotsOff: d,
+  onGalleryOpen: c,
+  onGalleryClose: v,
+  className: l,
+  style: m = {},
+  children: w,
+  ...C
 }) => {
-  const c = gn(m);
-  return Z(() => {
-    const f = m.eventPrefix ?? mt, _ = (L) => `${f}${L}`, b = {
-      [rt]: e,
-      [nt]: r,
-      [ot]: n,
-      [st]: o,
-      [at]: s,
-      [it]: p,
-      [lt]: d,
-      [ct]: a,
-      [dt]: l,
-      [ut]: w
-    }, y = /* @__PURE__ */ new Map();
-    return Object.entries(b).forEach(([L, x]) => {
-      if (!x)
+  const a = te(() => {
+    const h = Nn(C);
+    return l && Object.assign(h, { class: l }), h;
+  }, [l, C]);
+  return O(() => {
+    const h = C.eventPrefix ?? bt, x = (g) => `${h}${g}`, j = {
+      [dt]: e,
+      [ut]: r,
+      [mt]: n,
+      [pt]: o,
+      [ht]: s,
+      [ft]: u,
+      [gt]: f,
+      [xt]: d,
+      [wt]: c,
+      [vt]: v
+    }, k = /* @__PURE__ */ new Map();
+    return Object.entries(j).forEach(([g, p]) => {
+      if (!p)
         return;
-      const T = _(L), h = (u) => x(u.detail);
-      y.set(T, h), document.addEventListener(T, h);
+      const b = x(g), E = (L) => p(L.detail);
+      k.set(b, E), document.addEventListener(b, E);
     }), () => {
-      y.forEach((L, x) => {
-        document.removeEventListener(x, L);
+      k.forEach((g, p) => {
+        document.removeEventListener(p, g);
       });
     };
   }, [
-    m.eventPrefix,
+    C.eventPrefix,
     e,
     r,
     n,
     o,
     s,
-    p,
+    u,
+    f,
     d,
-    a,
-    l,
-    w
-  ]), /* @__PURE__ */ tt.jsx("cc-webplayer", { ...c });
+    c,
+    v
+  ]), /* @__PURE__ */ Ue.jsx("cc-webplayer", { style: { display: "block", ...m }, ...a, children: w });
+};
+qe();
+const An = ({ children: e, ...r }) => {
+  const n = _n(r);
+  return /* @__PURE__ */ Ue.jsx("cc-webplayer-custom-media", { ...n, children: e });
+};
+qe();
+const Pn = ({
+  children: e,
+  ...r
+}) => {
+  const n = zn(r);
+  return /* @__PURE__ */ Ue.jsx("cc-webplayer-icon", { ...n, children: e });
 };
-Vt();
-const Cn = ({ name: e, color: r }) => /* @__PURE__ */ tt.jsx("cc-webplayer-icon", { name: e, color: r });
 export {
-  mt as DEFAULT_EVENT_PREFIX,
-  nt as EVENT_COMPOSITION_LOADED,
-  rt as EVENT_COMPOSITION_LOADING,
-  ot as EVENT_COMPOSITION_LOAD_ERROR,
-  it as EVENT_EXTEND_MODE_OFF,
-  at as EVENT_EXTEND_MODE_ON,
-  ut as EVENT_GALLERY_CLOSE,
-  dt as EVENT_GALLERY_OPEN,
-  ct as EVENT_HOTSPOTS_OFF,
-  lt as EVENT_HOTSPOTS_ON,
-  st as EVENT_ITEM_CHANGE,
-  Ae as WEB_PLAYER_ICON_WC_TAG,
-  Ze as WEB_PLAYER_WC_TAG,
-  jn as WebPlayer,
-  Cn as WebPlayerIcon,
-  yn as generateCompositionUrl
+  bt as DEFAULT_EVENT_PREFIX,
+  ut as EVENT_COMPOSITION_LOADED,
+  dt as EVENT_COMPOSITION_LOADING,
+  mt as EVENT_COMPOSITION_LOAD_ERROR,
+  ft as EVENT_EXTEND_MODE_OFF,
+  ht as EVENT_EXTEND_MODE_ON,
+  vt as EVENT_GALLERY_CLOSE,
+  wt as EVENT_GALLERY_OPEN,
+  xt as EVENT_HOTSPOTS_OFF,
+  gt as EVENT_HOTSPOTS_ON,
+  pt as EVENT_ITEM_CHANGE,
+  Ye as WEB_PLAYER_ICON_WC_TAG,
+  Ie as WEB_PLAYER_WC_TAG,
+  Rn as WebPlayer,
+  An as WebPlayerCustomMedia,
+  Pn as WebPlayerIcon,
+  Hn as generateCompositionUrl
 };