@ethora/chat-component 26.9.6 → 26.10.1

package/dist/FilePreviewModal-BcaSoO3-.js

@@ -1,743 +0,0 @@
-import { jsx as l, jsxs as H } from "react/jsx-runtime";
-import te, { useState as N, useRef as z, useEffect as O, useMemo as $, useCallback as P } from "react";
-import { p as le, b as pe, aS as we, ae as ve, x as X, B as V, aT as xe, aU as be, ay as ye, aV as Ee, aW as Le, aX as ue, aY as ne, a as Ce, aO as Me, u as Q, a5 as Re, aZ as re, as as ke, ao as J, a_ as Pe, a$ as Se, b0 as Te, b1 as Ae, b2 as Ie, b3 as Xe, b4 as Ye, b5 as ze, b6 as Oe, az as De, b7 as Fe, b8 as Be, ax as He, b9 as Ne, w as Ue } from "./main-rJpE4hh-.js";
-function oe(t, i) {
-  let o;
-  return (...E) => {
-    window.clearTimeout(o), o = window.setTimeout(() => t(...E), i);
-  };
-}
-function _e({ debounce: t, scroll: i, polyfill: o, offsetSize: E } = { debounce: 0, scroll: !1, offsetSize: !1 }) {
-  const L = o || (typeof window > "u" ? class {
-  } : window.ResizeObserver);
-  if (!L) throw new Error("This browser does not support ResizeObserver out of the box. See: https://github.com/react-spring/react-use-measure/#resize-observer-polyfills");
-  const [u, C] = N({ left: 0, top: 0, width: 0, height: 0, bottom: 0, right: 0, x: 0, y: 0 }), n = z({ element: null, scrollContainers: null, resizeObserver: null, lastBounds: u, orientationHandler: null }), M = t ? typeof t == "number" ? t : t.scroll : null, p = t ? typeof t == "number" ? t : t.resize : null, T = z(!1);
-  O(() => (T.current = !0, () => {
-    T.current = !1;
-  }));
-  const [b, x, m] = $(() => {
-    const r = () => {
-      if (!n.current.element) return;
-      const { left: g, top: w, width: v, height: B, bottom: S, right: R, x: f, y: h } = n.current.element.getBoundingClientRect(), A = { left: g, top: w, width: v, height: B, bottom: S, right: R, x: f, y: h };
-      n.current.element instanceof HTMLElement && E && (A.height = n.current.element.offsetHeight, A.width = n.current.element.offsetWidth), Object.freeze(A), T.current && !We(n.current.lastBounds, A) && C(n.current.lastBounds = A);
-    };
-    return [r, p ? oe(r, p) : r, M ? oe(r, M) : r];
-  }, [C, E, M, p]);
-  function y() {
-    n.current.scrollContainers && (n.current.scrollContainers.forEach((r) => r.removeEventListener("scroll", m, !0)), n.current.scrollContainers = null), n.current.resizeObserver && (n.current.resizeObserver.disconnect(), n.current.resizeObserver = null), n.current.orientationHandler && ("orientation" in screen && "removeEventListener" in screen.orientation ? screen.orientation.removeEventListener("change", n.current.orientationHandler) : "onorientationchange" in window && window.removeEventListener("orientationchange", n.current.orientationHandler));
-  }
-  function Y() {
-    n.current.element && (n.current.resizeObserver = new L(m), n.current.resizeObserver.observe(n.current.element), i && n.current.scrollContainers && n.current.scrollContainers.forEach((r) => r.addEventListener("scroll", m, { capture: !0, passive: !0 })), n.current.orientationHandler = () => {
-      m();
-    }, "orientation" in screen && "addEventListener" in screen.orientation ? screen.orientation.addEventListener("change", n.current.orientationHandler) : "onorientationchange" in window && window.addEventListener("orientationchange", n.current.orientationHandler));
-  }
-  const F = (r) => {
-    !r || r === n.current.element || (y(), n.current.element = r, n.current.scrollContainers = de(r), Y());
-  };
-  return $e(m, !!i), je(x), O(() => {
-    y(), Y();
-  }, [i, m, x]), O(() => y, []), [F, u, b];
-}
-function je(t) {
-  O(() => {
-    const i = t;
-    return window.addEventListener("resize", i), () => {
-      window.removeEventListener("resize", i);
-    };
-  }, [t]);
-}
-function $e(t, i) {
-  O(() => {
-    if (i) {
-      const o = t;
-      return window.addEventListener("scroll", o, { capture: !0, passive: !0 }), () => {
-        window.removeEventListener("scroll", o, !0);
-      };
-    }
-  }, [t, i]);
-}
-function de(t) {
-  const i = [];
-  if (!t || t === document.body) return i;
-  const { overflow: o, overflowX: E, overflowY: L } = window.getComputedStyle(t);
-  return [o, E, L].some((u) => u === "auto" || u === "scroll") && i.push(t), [...i, ...de(t.parentElement)];
-}
-const Ve = ["x", "y", "top", "bottom", "left", "right", "width", "height"], We = (t, i) => Ve.every((o) => t[o] === i[o]), ie = X.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-`, Ze = X.div`
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  width: 100%;
-  flex: 1 1 auto;
-  min-height: 0;
-
-  canvas {
-    max-width: 100%;
-    height: auto;
-    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
-    background-color: #fff;
-  }
-`, Ke = X.div`
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  flex: 0 0 auto;
-  font-size: 14px;
-  color: var(--ethora-color-text, #141414);
-`, ae = X(V)`
-  width: auto;
-  min-width: 40px;
-  padding: 0 12px;
-`, Ge = X.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-  padding: 16px;
-  border-radius: var(--ethora-radius-lg, 16px);
-  background-color: var(--ethora-color-bg-subtle, #f5f7fa);
-  color: var(--ethora-color-text, #141414);
-  text-align: center;
-
-  a {
-    color: var(--ethora-color-primary-text, var(--ethora-color-primary, #0052cd));
-  }
-`, qe = ({ pdfUrl: t }) => {
-  const i = le(), { config: o } = pe(), [E, L] = _e(), u = z(null), C = z(null), n = z(null), [M, p] = N("loading"), [T, b] = N(0), [x, m] = N(1), y = Math.max(320, Math.floor(L.width || 0));
-  O(() => {
-    let r = !1, g;
-    return p("loading"), m(1), b(0), (async () => {
-      const w = await we(o?.pdfPreview?.workerSrc);
-      if (!r) {
-        if (!w || !t) {
-          p("error");
-          return;
-        }
-        try {
-          g = w.getDocument({ url: t, isEvalSupported: !1 });
-          const v = await g.promise;
-          if (r) {
-            v.destroy().catch(() => {
-            });
-            return;
-          }
-          C.current = v, b(v.numPages), p("ready");
-        } catch (v) {
-          r || (console.warn("[Ethora] PDF open failed:", v), p("error"));
-        }
-      }
-    })(), () => {
-      r = !0, n.current?.cancel(), n.current = null, C.current?.destroy?.().catch(() => {
-      }), C.current = null, g?.destroy?.().catch(() => {
-      });
-    };
-  }, [t, o?.pdfPreview?.workerSrc]), O(() => {
-    const r = C.current, g = u.current;
-    if (M !== "ready" || !r || !g || y <= 0) return;
-    let w = !1;
-    return (async () => {
-      try {
-        const v = await r.getPage(x);
-        if (w) return;
-        const B = v.getViewport({ scale: 1 }), S = B.width ? y / B.width : 1, R = v.getViewport({ scale: S });
-        g.width = Math.max(1, Math.floor(R.width)), g.height = Math.max(1, Math.floor(R.height));
-        const f = g.getContext("2d");
-        if (!f) {
-          p("error");
-          return;
-        }
-        n.current?.cancel();
-        const h = v.render({ canvasContext: f, viewport: R });
-        n.current = h, await h.promise, v.cleanup();
-      } catch (v) {
-        w || console.warn("[Ethora] PDF page render failed:", v);
-      }
-    })(), () => {
-      w = !0, n.current?.cancel(), n.current = null;
-    };
-  }, [M, x, y]);
-  const Y = P(
-    () => m((r) => Math.max(1, r - 1)),
-    []
-  ), F = P(
-    () => m((r) => Math.min(T || 1, r + 1)),
-    [T]
-  );
-  return M === "error" ? /* @__PURE__ */ l(ie, { children: /* @__PURE__ */ H(Ge, { children: [
-    /* @__PURE__ */ l("span", { children: i("modal.filePreview.pdfUnavailable") }),
-    /* @__PURE__ */ l("a", { href: t, target: "_blank", rel: "noopener noreferrer", children: i("modal.filePreview.openExternally") })
-  ] }) }) : /* @__PURE__ */ H(ie, { children: [
-    /* @__PURE__ */ l(Ze, { ref: E, children: M === "loading" ? /* @__PURE__ */ l(ve, { color: o?.colors?.primary }) : /* @__PURE__ */ l("canvas", { ref: u }) }),
-    T > 1 && /* @__PURE__ */ H(Ke, { children: [
-      /* @__PURE__ */ l(
-        ae,
-        {
-          onClick: Y,
-          disabled: x <= 1,
-          text: "‹",
-          "aria-label": i("modal.filePreview.previousPage")
-        }
-      ),
-      /* @__PURE__ */ H("span", { children: [
-        x,
-        " / ",
-        T
-      ] }),
-      /* @__PURE__ */ l(
-        ae,
-        {
-          onClick: F,
-          disabled: x >= T,
-          text: "›",
-          "aria-label": i("modal.filePreview.nextPage")
-        }
-      )
-    ] })
-  ] });
-}, I = 1, ee = 6, Qe = 2.5, Je = 50, et = 300, se = 24, tt = 16e-4, G = (t, i, o) => Math.min(o, Math.max(i, t)), nt = X.div`
-  position: relative;
-  /* An explicit height, not flex growth alone: the parent lays its children
-     out in a row and centres them, so the viewport would otherwise be sized
-     by its content, and the image's own max-height of 100% would resolve
-     against that auto height and never fit anything. */
-  flex: 1 1 auto;
-  width: 100%;
-  height: 100%;
-  min-height: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  /* A zoomed image is dragged, not selected, and a two-finger gesture is a
-     pinch rather than a page scroll. */
-  touch-action: none;
-  user-select: none;
-  background-color: var(--ethora-color-bg, #fff);
-`, rt = X.img`
-  /* Same box the single-file view always used: fill the stage and let
-     object-fit do the letterboxing, so what the viewer sees at scale 1 is
-     unchanged. It is also what makes the pan clamp exact, since the painted
-     content box is then derived from the natural aspect ratio alone. */
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-  transform-origin: center center;
-  will-change: transform;
-  cursor: ${({ $grabbing: t, $pannable: i }) => t ? "grabbing" : i ? "grab" : "zoom-in"};
-  transition: ${({ $animate: t }) => t ? `transform ${xe} ${be}` : "none"};
-  ${ye}
-`, fe = te.forwardRef(
-  ({ src: t, alt: i, onSwipeLeft: o, onSwipeRight: E, onError: L, onScaleChange: u }, C) => {
-    const n = z(null), M = z(null), [p, T] = N(I), [b, x] = N({ x: 0, y: 0 }), [m, y] = N(!1), [Y, F] = N(!1), r = z({ scale: I, offset: { x: 0, y: 0 } });
-    r.current = { scale: p, offset: b };
-    const g = z(null), w = z(null), v = z(
-      null
-    ), B = P((a) => {
-      const e = n.current, c = M.current;
-      if (!e) return { x: 0, y: 0 };
-      const s = e.clientWidth, d = e.clientHeight, k = c?.naturalWidth || 0, D = c?.naturalHeight || 0;
-      let j = s, Z = d;
-      if (k > 0 && D > 0 && s > 0 && d > 0) {
-        const K = Math.min(s / k, d / D);
-        j = k * K, Z = D * K;
-      }
-      return {
-        x: Math.max(0, (j * a - s) / 2),
-        y: Math.max(0, (Z * a - d) / 2)
-      };
-    }, []), S = P(
-      (a, e, c) => {
-        const s = G(a, I, ee), d = B(s);
-        y(c), T(s), x({
-          x: G(e.x, -d.x, d.x),
-          y: G(e.y, -d.y, d.y)
-        });
-      },
-      [B]
-    ), R = P(
-      (a, e, c, s) => {
-        const d = r.current, k = G(a, I, ee), D = k / d.scale;
-        S(
-          k,
-          {
-            x: e - (e - d.offset.x) * D,
-            y: c - (c - d.offset.y) * D
-          },
-          s
-        );
-      },
-      [S]
-    ), f = P(() => {
-      S(I, { x: 0, y: 0 }, !0);
-    }, [S]), h = P(
-      (a) => {
-        R(r.current.scale * a, 0, 0, !0);
-      },
-      [R]
-    );
-    te.useImperativeHandle(
-      C,
-      () => ({
-        zoomIn: () => h(1.5),
-        zoomOut: () => h(1 / 1.5),
-        reset: f
-      }),
-      [h, f]
-    ), O(() => {
-      y(!1), T(I), x({ x: 0, y: 0 });
-    }, [t]), O(() => {
-      u?.(p);
-    }, [p, u]), O(() => {
-      const a = n.current;
-      if (!a) return;
-      const e = (c) => {
-        c.preventDefault();
-        const s = a.getBoundingClientRect(), d = c.clientX - s.left - s.width / 2, k = c.clientY - s.top - s.height / 2, D = Math.exp(-c.deltaY * tt);
-        R(r.current.scale * D, d, k, !1);
-      };
-      return a.addEventListener("wheel", e, { passive: !1 }), () => a.removeEventListener("wheel", e);
-    }, [R]);
-    const A = P(
-      (a, e) => {
-        const c = n.current;
-        if (!c) return;
-        if (r.current.scale > I) {
-          f();
-          return;
-        }
-        const s = c.getBoundingClientRect();
-        R(
-          Qe,
-          a - s.left - s.width / 2,
-          e - s.top - s.height / 2,
-          !0
-        );
-      },
-      [f, R]
-    ), _ = P((a) => {
-      a.button === 0 && (r.current.scale <= I || (a.preventDefault(), g.current = { x: a.clientX, y: a.clientY }, F(!0)));
-    }, []);
-    O(() => {
-      if (!Y || typeof window > "u") return;
-      const a = (c) => {
-        const s = g.current;
-        if (!s) return;
-        const d = r.current;
-        S(
-          d.scale,
-          {
-            x: d.offset.x + (c.clientX - s.x),
-            y: d.offset.y + (c.clientY - s.y)
-          },
-          !1
-        ), g.current = { x: c.clientX, y: c.clientY };
-      }, e = () => {
-        g.current = null, F(!1);
-      };
-      return window.addEventListener("mousemove", a), window.addEventListener("mouseup", e), () => {
-        window.removeEventListener("mousemove", a), window.removeEventListener("mouseup", e);
-      };
-    }, [Y, S]);
-    const q = P((a) => {
-      if (a.touches.length === 2) {
-        const [c, s] = [a.touches[0], a.touches[1]];
-        w.current = {
-          startX: 0,
-          startY: 0,
-          lastX: 0,
-          lastY: 0,
-          pinchDistance: Math.hypot(
-            c.clientX - s.clientX,
-            c.clientY - s.clientY
-          ),
-          pinchScale: r.current.scale,
-          panning: !1,
-          moved: !1
-        };
-        return;
-      }
-      const e = a.touches[0];
-      e && (w.current = {
-        startX: e.clientX,
-        startY: e.clientY,
-        lastX: e.clientX,
-        lastY: e.clientY,
-        pinchDistance: 0,
-        pinchScale: r.current.scale,
-        panning: r.current.scale > I,
-        moved: !1
-      });
-    }, []), W = P(
-      (a) => {
-        const e = w.current;
-        if (!e) return;
-        if (a.touches.length === 2 && e.pinchDistance > 0) {
-          const [s, d] = [a.touches[0], a.touches[1]], k = Math.hypot(
-            s.clientX - d.clientX,
-            s.clientY - d.clientY
-          ), D = n.current;
-          if (!D || k <= 0) return;
-          const j = D.getBoundingClientRect(), Z = (s.clientX + d.clientX) / 2 - j.left - j.width / 2, K = (s.clientY + d.clientY) / 2 - j.top - j.height / 2;
-          e.moved = !0, R(
-            e.pinchScale * k / e.pinchDistance,
-            Z,
-            K,
-            !1
-          );
-          return;
-        }
-        const c = a.touches[0];
-        if (c) {
-          if ((Math.abs(c.clientX - e.startX) > 6 || Math.abs(c.clientY - e.startY) > 6) && (e.moved = !0), e.panning) {
-            const s = r.current;
-            S(
-              s.scale,
-              {
-                x: s.offset.x + (c.clientX - e.lastX),
-                y: s.offset.y + (c.clientY - e.lastY)
-              },
-              !1
-            );
-          }
-          e.lastX = c.clientX, e.lastY = c.clientY;
-        }
-      },
-      [S, R]
-    ), U = P(
-      (a) => {
-        const e = w.current;
-        if (!e || a.touches.length > 0) return;
-        if (w.current = null, !e.moved && e.pinchDistance === 0) {
-          const d = Date.now(), k = v.current;
-          if (k && d - k.time < et && Math.abs(k.x - e.startX) < se && Math.abs(k.y - e.startY) < se) {
-            v.current = null, A(e.startX, e.startY);
-            return;
-          }
-          v.current = {
-            time: d,
-            x: e.startX,
-            y: e.startY
-          };
-          return;
-        }
-        if (e.panning || e.pinchDistance > 0 || r.current.scale > I) return;
-        const c = e.lastX - e.startX, s = e.lastY - e.startY;
-        Math.abs(c) < Je || Math.abs(c) <= Math.abs(s) || (c < 0 ? o?.() : E?.());
-      },
-      [o, E, A]
-    ), me = P(
-      (a) => {
-        A(a.clientX, a.clientY);
-      },
-      [A]
-    ), ge = $(
-      () => `translate(${b.x}px, ${b.y}px) scale(${p})`,
-      [b.x, b.y, p]
-    );
-    return /* @__PURE__ */ l(
-      nt,
-      {
-        ref: n,
-        "data-testid": "image-lightbox-viewport",
-        onMouseDown: _,
-        onDoubleClick: me,
-        onTouchStart: q,
-        onTouchMove: W,
-        onTouchEnd: U,
-        onTouchCancel: U,
-        children: /* @__PURE__ */ l(
-          rt,
-          {
-            ref: M,
-            "data-testid": "image-lightbox-image",
-            src: t,
-            alt: i,
-            draggable: !1,
-            onError: L,
-            $grabbing: Y,
-            $pannable: p > I,
-            $animate: m,
-            style: { transform: ge }
-          }
-        )
-      }
-    );
-  }
-);
-fe.displayName = "ImageLightbox";
-const ot = (t) => {
-  if (!Array.isArray(t)) return [];
-  const i = [];
-  return t.forEach((o, E) => {
-    !o || o.isDeleted || o.id !== "delimiter-new" && Ee(o).forEach((L, u) => {
-      if (!L.location) return;
-      const C = Le(L);
-      ue(L.mimetype, C) === "image" && i.push({
-        key: `${o.id ?? E}:${u}`,
-        fileName: C,
-        fileURL: L.location,
-        mimetype: L.mimetype || ""
-      });
-    });
-  }), i;
-}, it = (t, i) => {
-  if (!i?.fileURL) return -1;
-  const o = ne(i.fileURL);
-  return t.findIndex(
-    (E) => ne(E.fileURL) === o
-  );
-}, ce = "https://as2.ftcdn.net/v2/jpg/02/51/95/53/1000_F_251955356_FAQH0U1y1TZw3ZcdPGybwUkH90a3VAhb.jpg", at = X.div`
-  position: relative;
-  display: flex;
-  flex: 1 1 auto;
-  width: 100%;
-  min-height: 0;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-`, he = X(V)`
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 44px;
-  height: 44px;
-  border-radius: var(--ethora-radius-full, 999px);
-  background-color: var(--ethora-color-bg, #fff);
-  box-shadow: var(--ethora-shadow-md, 0 4px 12px rgba(16, 24, 40, 0.1));
-  z-index: 2;
-`, st = X(he)`
-  left: 8px;
-`, ct = X(he)`
-  right: 8px;
-`, lt = X.div`
-  display: flex;
-  align-items: center;
-  gap: 8px;
-`, ut = X.div`
-  display: flex;
-  align-items: center;
-  gap: 8px;
-
-  @media (max-width: 480px) {
-    display: none;
-  }
-`, dt = X.span`
-  font-size: var(--ethora-font-size-sm, 14px);
-  color: var(--ethora-color-text-secondary, #5a5f66);
-  white-space: nowrap;
-  padding: 0 4px;
-`, gt = ({
-  handleCloseModal: t
-}) => {
-  const i = Ce(), o = le(), E = Me(), { activeFile: L } = Q(
-    (f) => f.chatSettingStore
-  ), u = $(
-    () => L ?? { fileName: "", fileURL: "", mimetype: "" },
-    [L]
-  ), C = Q(
-    (f) => f.chatSettingStore.user?.fileToken || ""
-  ), n = Q(
-    (f) => Re(f)?.messages
-  ), M = z(null), [p, T] = N(I), b = ue(u?.mimetype, u?.fileName), x = $(() => ot(n), [n]), m = $(
-    () => b === "image" ? it(x, u) : -1,
-    [x, u, b]
-  ), y = m >= 0 && x.length > 1, Y = y && m > 0, F = y && m < x.length - 1, r = P(
-    (f) => {
-      const h = x[f];
-      h && i(
-        re({
-          fileName: h.fileName,
-          fileURL: h.fileURL,
-          mimetype: h.mimetype
-        })
-      );
-    },
-    [i, x]
-  ), g = P(() => {
-    Y && r(m - 1);
-  }, [r, Y, m]), w = P(() => {
-    F && r(m + 1);
-  }, [r, F, m]);
-  O(() => {
-    if (!y || typeof document > "u") return;
-    const f = (h) => {
-      if (h.key !== "ArrowLeft" && h.key !== "ArrowRight" || h.defaultPrevented || h.altKey || h.ctrlKey || h.metaKey) return;
-      const A = h.target, _ = A?.tagName;
-      _ === "INPUT" || _ === "TEXTAREA" || _ === "SELECT" || A?.isContentEditable || (h.preventDefault(), h.key === "ArrowLeft" ? g() : w());
-    };
-    return document.addEventListener("keydown", f), () => document.removeEventListener("keydown", f);
-  }, [y, g, w]);
-  const v = () => {
-    fetch(He(u.fileURL), {
-      method: "GET",
-      headers: {}
-    }).then((f) => {
-      const _ = !!Ne(u.fileName) ? u.fileName : `MEDIA-ETHORA.${b === "image" ? "png" : b === "video" ? "mp4" : "bin"}`;
-      f.arrayBuffer().then(function(q) {
-        if (typeof window > "u")
-          return;
-        const W = window.URL.createObjectURL(new Blob([q])), U = document.createElement("a");
-        U.href = W, U.setAttribute("download", _), document.body.appendChild(U), U.click(), U.remove(), window.URL.revokeObjectURL(W);
-      });
-    }).catch((f) => {
-      Ue.log(f);
-    });
-  }, B = () => {
-    i(re(void 0)), t?.();
-  }, S = u?.fileName || o("modal.filePreview.imageAlt"), R = $(() => {
-    switch (b) {
-      case "image":
-        return /* @__PURE__ */ l(
-          fe,
-          {
-            ref: M,
-            src: J(u.fileURL, C) || ce,
-            alt: S,
-            onScaleChange: T,
-            onSwipeLeft: w,
-            onSwipeRight: g,
-            onError: (f) => {
-              Se(u.fileURL) && Te(), f.target.src = ce;
-            }
-          }
-        );
-      case "video":
-        return /* @__PURE__ */ l(
-          Pe,
-          {
-            src: J(u.fileURL, C),
-            controls: !0,
-            autoPlay: !1
-          }
-        );
-      case "pdf":
-        return /* @__PURE__ */ l(qe, { pdfUrl: J(u.fileURL, C) });
-      default:
-        return /* @__PURE__ */ H(
-          "div",
-          {
-            style: {
-              display: "flex",
-              flexDirection: "column",
-              justifyContent: "center",
-              alignItems: "center"
-            },
-            children: [
-              /* @__PURE__ */ l(ke, { style: { minWidth: "100px", minHeight: "100px" } }),
-              /* @__PURE__ */ l(
-                "div",
-                {
-                  style: {
-                    backgroundColor: "var(--ethora-color-bg-subtle, #F5F7FA)",
-                    borderRadius: "var(--ethora-radius-lg, 16px)",
-                    display: "flex",
-                    padding: "16px",
-                    color: "var(--ethora-color-text, #141414)"
-                  },
-                  children: o("modal.filePreview.unsupported")
-                }
-              )
-            ]
-          }
-        );
-    }
-  }, [u, C, S, b, w, g, o]);
-  return /* @__PURE__ */ H(
-    Ae,
-    {
-      "aria-label": o("modal.filePreview.title"),
-      $closing: E,
-      children: [
-        /* @__PURE__ */ l(
-          Ie,
-          {
-            handleCloseModal: B,
-            headerTitle: o("modal.filePreview.title"),
-            rightMenu: /* @__PURE__ */ H(lt, { children: [
-              y && /* @__PURE__ */ l(dt, { "data-testid": "lightbox-position", "aria-live": "polite", children: o("modal.filePreview.position", {
-                current: m + 1,
-                total: x.length
-              }) }),
-              b === "image" && /* @__PURE__ */ H(ut, { children: [
-                /* @__PURE__ */ l(
-                  V,
-                  {
-                    onClick: () => M.current?.zoomOut(),
-                    disabled: p <= I,
-                    "aria-label": o("modal.filePreview.zoomOut"),
-                    children: /* @__PURE__ */ l(Xe, {})
-                  }
-                ),
-                /* @__PURE__ */ l(
-                  V,
-                  {
-                    onClick: () => M.current?.zoomIn(),
-                    disabled: p >= ee,
-                    "aria-label": o("modal.filePreview.zoomIn"),
-                    children: /* @__PURE__ */ l(Ye, {})
-                  }
-                ),
-                /* @__PURE__ */ l(
-                  V,
-                  {
-                    onClick: () => M.current?.reset(),
-                    disabled: p <= I,
-                    "aria-label": o("modal.filePreview.resetZoom"),
-                    children: /* @__PURE__ */ l(ze, {})
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ l(V, { onClick: v, "aria-label": o("action.save"), children: /* @__PURE__ */ l(Oe, {}) })
-            ] })
-          }
-        ),
-        /* @__PURE__ */ l(
-          De,
-          {
-            style: {
-              display: "flex",
-              flex: "1 1 auto",
-              height: "100%",
-              minHeight: 0,
-              justifyContent: "center",
-              overflow: "hidden",
-              padding: "16px",
-              width: "90%"
-            },
-            children: /* @__PURE__ */ H(at, { children: [
-              y && /* @__PURE__ */ l(
-                st,
-                {
-                  onClick: g,
-                  disabled: !Y,
-                  "aria-label": o("modal.filePreview.previousImage"),
-                  children: /* @__PURE__ */ l(Fe, {})
-                }
-              ),
-              R,
-              y && /* @__PURE__ */ l(
-                ct,
-                {
-                  onClick: w,
-                  disabled: !F,
-                  "aria-label": o("modal.filePreview.nextImage"),
-                  children: /* @__PURE__ */ l(Be, {})
-                }
-              )
-            ] })
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  gt as default
-};