@ethora/chat-component 26.7.6 → 26.7.7

package/dist/FilePreviewModal-BcZLtVAy.js

@@ -0,0 +1,743 @@
+import { jsx as l, jsxs as B } from "react/jsx-runtime";
+import te, { useState as H, useRef as z, useEffect as O, useMemo as $, useCallback as k } from "react";
+import { n as le, b as pe, aK as we, ab as ve, v as X, B as V, aL as xe, aM as be, av as ye, aN as Ee, aO as Le, aP as ue, aQ as ne, a as Ce, aG as Me, u as q, a2 as Re, aR as re, ap as Pe, al as J, aS as ke, aT as Se, aU as Te, aV as Ae, aW as Ie, aX as Xe, aY as Ye, aZ as ze, a_ as Oe, aw as De, a$ as Fe, b0 as Ne, au as Be, b1 as He, t as Ue } from "./main-C2FKeV6y.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] = H({ 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: N, bottom: S, right: R, x: f, y: h } = n.current.element.getBoundingClientRect(), A = { left: g, top: w, width: v, height: N, 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, #0052cd);
+  }
+`, Qe = ({ pdfUrl: t }) => {
+  const i = le(), { config: o } = pe(), [E, L] = _e(), u = z(null), C = z(null), n = z(null), [M, p] = H("loading"), [T, b] = H(0), [x, m] = H(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 N = v.getViewport({ scale: 1 }), S = N.width ? y / N.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 = k(
+    () => m((r) => Math.max(1, r - 1)),
+    []
+  ), F = k(
+    () => m((r) => Math.min(T || 1, r + 1)),
+    [T]
+  );
+  return M === "error" ? /* @__PURE__ */ l(ie, { children: /* @__PURE__ */ B(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__ */ B(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__ */ B(Ke, { children: [
+      /* @__PURE__ */ l(
+        ae,
+        {
+          onClick: Y,
+          disabled: x <= 1,
+          text: "‹",
+          "aria-label": i("modal.filePreview.previousPage")
+        }
+      ),
+      /* @__PURE__ */ B("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] = H(I), [b, x] = H({ x: 0, y: 0 }), [m, y] = H(!1), [Y, F] = H(!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
+    ), N = k((a) => {
+      const e = n.current, c = M.current;
+      if (!e) return { x: 0, y: 0 };
+      const s = e.clientWidth, d = e.clientHeight, P = c?.naturalWidth || 0, D = c?.naturalHeight || 0;
+      let j = s, Z = d;
+      if (P > 0 && D > 0 && s > 0 && d > 0) {
+        const K = Math.min(s / P, d / D);
+        j = P * K, Z = D * K;
+      }
+      return {
+        x: Math.max(0, (j * a - s) / 2),
+        y: Math.max(0, (Z * a - d) / 2)
+      };
+    }, []), S = k(
+      (a, e, c) => {
+        const s = G(a, I, ee), d = N(s);
+        y(c), T(s), x({
+          x: G(e.x, -d.x, d.x),
+          y: G(e.y, -d.y, d.y)
+        });
+      },
+      [N]
+    ), R = k(
+      (a, e, c, s) => {
+        const d = r.current, P = G(a, I, ee), D = P / d.scale;
+        S(
+          P,
+          {
+            x: e - (e - d.offset.x) * D,
+            y: c - (c - d.offset.y) * D
+          },
+          s
+        );
+      },
+      [S]
+    ), f = k(() => {
+      S(I, { x: 0, y: 0 }, !0);
+    }, [S]), h = k(
+      (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, P = c.clientY - s.top - s.height / 2, D = Math.exp(-c.deltaY * tt);
+        R(r.current.scale * D, d, P, !1);
+      };
+      return a.addEventListener("wheel", e, { passive: !1 }), () => a.removeEventListener("wheel", e);
+    }, [R]);
+    const A = k(
+      (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]
+    ), _ = k((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 = k((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 = k(
+      (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]], P = Math.hypot(
+            s.clientX - d.clientX,
+            s.clientY - d.clientY
+          ), D = n.current;
+          if (!D || P <= 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 * P / 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 = k(
+      (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(), P = v.current;
+          if (P && d - P.time < et && Math.abs(P.x - e.startX) < se && Math.abs(P.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 = k(
+      (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] = H(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 = k(
+    (f) => {
+      const h = x[f];
+      h && i(
+        re({
+          fileName: h.fileName,
+          fileURL: h.fileURL,
+          mimetype: h.mimetype
+        })
+      );
+    },
+    [i, x]
+  ), g = k(() => {
+    Y && r(m - 1);
+  }, [r, Y, m]), w = k(() => {
+    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(Be(u.fileURL), {
+      method: "GET",
+      headers: {}
+    }).then((f) => {
+      const _ = !!He(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);
+    });
+  }, N = () => {
+    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(
+          ke,
+          {
+            src: J(u.fileURL, C),
+            controls: !0,
+            autoPlay: !1
+          }
+        );
+      case "pdf":
+        return /* @__PURE__ */ l(Qe, { pdfUrl: J(u.fileURL, C) });
+      default:
+        return /* @__PURE__ */ B(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "center",
+              alignItems: "center"
+            },
+            children: [
+              /* @__PURE__ */ l(Pe, { 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__ */ B(
+    Ae,
+    {
+      "aria-label": o("modal.filePreview.title"),
+      $closing: E,
+      children: [
+        /* @__PURE__ */ l(
+          Ie,
+          {
+            handleCloseModal: N,
+            headerTitle: o("modal.filePreview.title"),
+            rightMenu: /* @__PURE__ */ B(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__ */ B(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__ */ B(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(Ne, {})
+                }
+              )
+            ] })
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  gt as default
+};