@layers-app/shared 0.4.4 → 0.4.6

package/dist/components/AttachmentsGalleryModal/helpers.js

@@ -1,40 +1,45 @@
-import { STEPS as h } from "./constants.js";
-const y = ({
-  instance: r,
+import { isVideoFile as w } from "../../helpers/fileUtils.js";
+import { STEPS as l } from "./constants.js";
+const T = (i) => {
+  const t = (i.contentType || "").toLowerCase(), e = i.originalFileName || "", s = w(i.contentType, e), n = t === "application/pdf" || e.toLowerCase().endsWith(".pdf"), o = t.startsWith("image/") || /\.(jpe?g|png|gif|webp|bmp|svg|avif|heic|heif|tiff?|ico)$/i.test(e), c = t.startsWith("audio/") || /\.(mp3|wav|ogg|flac|m4a|aac|opus|weba)$/i.test(e);
+  return { isVideo: s, isPdf: n, isImage: o, isAudio: c, isSupported: o || s || n || c };
+}, y = ({
+  instance: i,
   from: t,
   to: e,
   duration: s = 200,
   animationRef: n
 }) => {
   n.current && cancelAnimationFrame(n.current);
-  const c = performance.now(), a = (p) => {
-    const i = Math.min((p - c) / s, 1), o = 1 - Math.pow(1 - i, 3), x = t.scale + (e.scale - t.scale) * o, l = t.x + (e.x - t.x) * o, m = t.y + (e.y - t.y) * o;
-    r.setTransformState(x, l, m), i < 1 && (n.current = requestAnimationFrame(a));
+  const o = performance.now(), c = (r) => {
+    const p = Math.min((r - o) / s, 1), a = 1 - Math.pow(1 - p, 3), m = t.scale + (e.scale - t.scale) * a, f = t.x + (e.x - t.x) * a, d = t.y + (e.y - t.y) * a;
+    i.setTransformState(m, f, d), p < 1 && (n.current = requestAnimationFrame(c));
   };
-  n.current = requestAnimationFrame(a);
-}, I = ({
-  dir: r,
+  n.current = requestAnimationFrame(c);
+}, A = ({
+  dir: i,
   activeRef: t,
   animationRef: e
 }) => {
   const s = t?.instance;
   if (!s) return;
-  const { scale: n, positionX: c, positionY: a } = s.transformState, p = s.wrapperComponent?.getBoundingClientRect(), i = (p?.width ?? 0) / 2, o = (p?.height ?? 0) / 2, x = S(n), l = r === "in" ? x + 1 : x - 1, m = Math.min(Math.max(l, 0), h.length - 1), u = h[m], d = u / n, f = i - (i - c) * d, w = o - (o - a) * d;
+  const { scale: n, positionX: o, positionY: c } = s.transformState, r = s.wrapperComponent?.getBoundingClientRect(), p = (r?.width ?? 0) / 2, a = (r?.height ?? 0) / 2, m = S(n), f = i === "in" ? m + 1 : m - 1, d = Math.min(Math.max(f, 0), l.length - 1), g = l[d], u = g / n, h = p - (p - o) * u, x = a - (a - c) * u;
   y({
     instance: s,
-    from: { scale: n, x: c, y: a },
-    to: { scale: u, x: f, y: w },
+    from: { scale: n, x: o, y: c },
+    to: { scale: g, x: h, y: x },
     duration: 200,
     animationRef: e
   });
-}, S = (r) => {
+}, S = (i) => {
   let t = 0, e = 1 / 0;
-  return h.forEach((s, n) => {
-    const c = Math.abs(s - r);
-    c < e && (e = c, t = n);
+  return l.forEach((s, n) => {
+    const o = Math.abs(s - i);
+    o < e && (e = o, t = n);
   }), t;
 };
 export {
   y as animateTransform,
-  I as zoomStep
+  T as getAttachmentFormat,
+  A as zoomStep
 };

package/dist/components/AttachmentsGalleryModal/hooks/useDownloadFile.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDownloadFile.d.ts","sourceRoot":"","sources":["../../../../src/components/AttachmentsGalleryModal/hooks/useDownloadFile.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAkC,MAAM,OAAO,CAAC;AAQvE,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAErD,eAAO,MAAM,eAAe,GAAI,eAAe,aAAa;;;oBAI9C,cAAc;;CA8C3B,CAAC"}
+{"version":3,"file":"useDownloadFile.d.ts","sourceRoot":"","sources":["../../../../src/components/AttachmentsGalleryModal/hooks/useDownloadFile.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAkC,MAAM,OAAO,CAAC;AAQvE,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAErD,eAAO,MAAM,eAAe,GAAI,eAAe,aAAa;;;oBAI9C,cAAc;;CAgD3B,CAAC"}

package/dist/components/AttachmentsGalleryModal/hooks/useDownloadFile.js

@@ -1,35 +1,38 @@
-import { useState as w, useCallback as u, useMemo as p } from "react";
-import { downloadImageFromExternalUrl as m, downloadURL as c } from "../../../helpers/download.js";
-import { isVideoFile as b } from "../../../helpers/fileUtils.js";
-import { useMenu as F } from "../../../hooks/useMenu.js";
-const L = (o) => {
-  const [l, e] = w(!1), n = u(
-    async (a) => {
-      if (a.stopPropagation(), !!o)
-        if (e(!0), o?.Url)
-          await m(o?.Url, "file"), e(!1);
-        else {
-          const i = await fetch(`/v1/attachments/${o.id}`, {
-            method: "GET"
-          });
-          if (!i.ok)
-            throw e(!1), new Error(`Error loading: ${i.statusText}`);
-          const d = await i.blob();
-          e(!1);
-          const s = window.URL.createObjectURL(d);
-          s && o && (o.id ? c(s, o.originalFileName || "file") : m(s, "file"));
-        }
+import { useState as u, useCallback as c, useMemo as p } from "react";
+import { downloadImageFromExternalUrl as a, downloadURL as b } from "../../../helpers/download.js";
+import { isVideoFile as F } from "../../../helpers/fileUtils.js";
+import { useMenu as U } from "../../../hooks/useMenu.js";
+const M = (o) => {
+  const [l, e] = u(!1), r = c(
+    async (d) => {
+      if (d.stopPropagation(), !o)
+        return;
+      e(!0);
+      const i = o.originalFileName || "file";
+      if (o?.Url)
+        await a(o?.Url, i), e(!1);
+      else {
+        const s = await fetch(`/v1/attachments/${o.id}`, {
+          method: "GET"
+        });
+        if (!s.ok)
+          throw e(!1), new Error(`Error loading: ${s.statusText}`);
+        const w = await s.blob();
+        e(!1);
+        const n = window.URL.createObjectURL(w);
+        n && o && (o.id ? b(n, i) : a(n, i));
+      }
     },
     [o]
-  ), { isMobile: r } = F(), f = b(
+  ), { isMobile: f } = U(), m = F(
     o?.contentType,
     o?.originalFileName
   );
   return p(
-    () => ({ isVideo: f, isMobile: r, onDownload: n, isFetching: l }),
-    [r, f, n, l]
+    () => ({ isVideo: m, isMobile: f, onDownload: r, isFetching: l }),
+    [f, m, r, l]
   );
 };
 export {
-  L as useDownloadFile
+  M as useDownloadFile
 };

package/dist/components/AttachmentsGalleryModal/hooks/useGetPreviewUrl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useGetPreviewUrl.d.ts","sourceRoot":"","sources":["../../../../src/components/AttachmentsGalleryModal/hooks/useGetPreviewUrl.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAOrD,eAAO,MAAM,gBAAgB,GAAI,YAAY,aAAa;;;;;;;;;;CA4GzD,CAAC"}
+{"version":3,"file":"useGetPreviewUrl.d.ts","sourceRoot":"","sources":["../../../../src/components/AttachmentsGalleryModal/hooks/useGetPreviewUrl.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAQrD,eAAO,MAAM,gBAAgB,GAAI,YAAY,aAAa;;;;;;;;;;CA0FzD,CAAC"}

package/dist/components/AttachmentsGalleryModal/hooks/useGetPreviewUrl.js

@@ -1,20 +1,20 @@
-import { useState as p, useEffect as F, useMemo as T } from "react";
-import { getEnvConfig as L } from "../../../config/envConfig.js";
-import { isVideoFile as v } from "../../../helpers/fileUtils.js";
-const h = () => {
-  const e = L().apiBaseUrl || "";
+import { useState as f, useEffect as A, useMemo as v } from "react";
+import { getEnvConfig as F } from "../../../config/envConfig.js";
+import { getAttachmentFormat as $ } from "../helpers.js";
+const m = () => {
+  const e = F().apiBaseUrl || "";
   return e.endsWith("/") ? e.slice(0, -1) : e;
-}, B = (e) => {
-  const [u, y] = p(null), [d, n] = p(!1), [w, a] = p(!1);
-  async function g(i) {
-    return fetch(`${h()}/v1/attachments/${i}`, {
+}, S = (e) => {
+  const [l, g] = f(null), [u, n] = f(!1), [d, a] = f(!1);
+  async function p(r) {
+    return fetch(`${m()}/v1/attachments/${r}`, {
       method: "GET",
       credentials: "include"
     });
   }
-  async function m() {
+  async function U() {
     try {
-      return (await fetch(`${h()}/v1/auth/refresh`, {
+      return (await fetch(`${m()}/v1/auth/refresh`, {
         method: "POST",
         credentials: "include"
       })).ok;
@@ -22,46 +22,41 @@ const h = () => {
       return !1;
     }
   }
-  async function U(i, b) {
+  async function E(r, b) {
     n(!0);
-    let s = await g(i);
-    if ((s.status === 401 || s.status === 403) && await m() && (s = await g(i)), !s.ok)
-      throw n(!1), a(!0), new Error(`Error loading: ${s.statusText}`);
-    const f = await s.blob(), E = b && f.type !== "application/pdf" ? new Blob([f], { type: "application/pdf" }) : f;
-    y(window.URL.createObjectURL(E)), n(!1), a(!1);
+    let t = await p(r);
+    if ((t.status === 401 || t.status === 403) && await U() && (t = await p(r)), !t.ok)
+      throw n(!1), a(!0), new Error(`Error loading: ${t.statusText}`);
+    const c = await t.blob(), y = b && c.type !== "application/pdf" ? new Blob([c], { type: "application/pdf" }) : c;
+    g(window.URL.createObjectURL(y)), n(!1), a(!1);
   }
-  const t = v(
-    e.contentType,
-    e.originalFileName
-  ), o = (e.contentType || "").toLowerCase() === "application/pdf" || (e.originalFileName || "").toLowerCase().endsWith(".pdf"), c = (e.contentType || "").toLowerCase().startsWith("image/"), l = (e.contentType || "").toLowerCase().startsWith("audio/") || /\.(mp3|wav|ogg|flac|m4a|aac|opus|weba)$/i.test(
-    e.originalFileName || ""
-  ), r = c || t || o || l;
-  return F(() => {
-    e.id && !t && r && !e.Url && U(e.id, o);
-  }, [e.Url, e.id, t, o, r]), T(
+  const { isVideo: s, isPdf: i, isImage: h, isAudio: w, isSupported: o } = $(e);
+  return A(() => {
+    e.id && !s && o && !e.Url && E(e.id, i);
+  }, [e.Url, e.id, s, i, o]), v(
     () => ({
-      fileUrl: u,
-      isFetching: d,
-      isError: w,
+      fileUrl: l,
+      isFetching: u,
+      isError: d,
       setIsError: a,
-      isVideo: t,
-      isPdf: o,
-      isImage: c,
-      isAudio: l,
-      isSupported: r
+      isVideo: s,
+      isPdf: i,
+      isImage: h,
+      isAudio: w,
+      isSupported: o
     }),
     [
+      l,
+      d,
       u,
+      s,
+      i,
+      h,
       w,
-      d,
-      t,
-      o,
-      c,
-      l,
-      r
+      o
     ]
   );
 };
 export {
-  B as useGetPreviewUrl
+  S as useGetPreviewUrl
 };

package/dist/components/AttachmentsGalleryModal/styles.module.css.js

@@ -1,6 +1,6 @@
-const o = "_container_17z0f_1", n = "_root_17z0f_7", t = "_carouselRoot_17z0f_14", e = "_carouselViewport_17z0f_18", a = "_carouselSlide_17z0f_22", _ = "_navButton_17z0f_29", r = "_navButtonPrev_17z0f_42", i = "_navButtonNext_17z0f_46", c = "_headerAction_17z0f_50", d = "_modalContent_17z0f_64", s = "_modalBody_17z0f_69", u = "_videoContainer_17z0f_75", f = "_imageContainer_17z0f_80", l = "_pdfContainer_17z0f_87", m = "_pdfFrame_17z0f_95", z = "_audioContainer_17z0f_102", v = "_audioName_17z0f_117", C = "_audioElement_17z0f_125", B = {
-  container: o,
-  root: n,
+const n = "_container_nqf56_1", o = "_root_nqf56_13", t = "_carouselRoot_nqf56_27", e = "_carouselViewport_nqf56_35", a = "_carouselSlide_nqf56_43", _ = "_navButton_nqf56_57", r = "_navButtonPrev_nqf56_83", i = "_navButtonNext_nqf56_91", c = "_headerAction_nqf56_99", d = "_modalContent_nqf56_127", s = "_modalBody_nqf56_137", u = "_videoContainer_nqf56_149", f = "_imageContainer_nqf56_159", l = "_pdfContainer_nqf56_173", m = "_pdfFrame_nqf56_189", q = "_audioContainer_nqf56_203", v = "_audioName_nqf56_233", C = "_audioElement_nqf56_249", B = {
+  container: n,
+  root: o,
   carouselRoot: t,
   carouselViewport: e,
   carouselSlide: a,
@@ -14,18 +14,18 @@ const o = "_container_17z0f_1", n = "_root_17z0f_7", t = "_carouselRoot_17z0f_14
   imageContainer: f,
   pdfContainer: l,
   pdfFrame: m,
-  audioContainer: z,
+  audioContainer: q,
   audioName: v,
   audioElement: C
 };
 export {
-  z as audioContainer,
+  q as audioContainer,
   C as audioElement,
   v as audioName,
   t as carouselRoot,
   a as carouselSlide,
   e as carouselViewport,
-  o as container,
+  n as container,
   B as default,
   c as headerAction,
   f as imageContainer,
@@ -36,6 +36,6 @@ export {
   r as navButtonPrev,
   l as pdfContainer,
   m as pdfFrame,
-  n as root,
+  o as root,
   u as videoContainer
 };

package/dist/components/AttachmentsPreview/AttachmentsPreview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AttachmentsPreview.d.ts","sourceRoot":"","sources":["../../../src/components/AttachmentsPreview/AttachmentsPreview.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAIhE,UAAU,8BAA8B;IACtC,KAAK,EAAE,oBAAoB,CAAC,cAAc,EAAE,CAAC;IAC7C,IAAI,EAAE,OAAO,GAAG,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,eAAO,MAAM,kBAAkB,GAAI,8CAKhC,8BAA8B,mDAoNhC,CAAC"}
+{"version":3,"file":"AttachmentsPreview.d.ts","sourceRoot":"","sources":["../../../src/components/AttachmentsPreview/AttachmentsPreview.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAOhE,UAAU,8BAA8B;IACtC,KAAK,EAAE,oBAAoB,CAAC,cAAc,EAAE,CAAC;IAC7C,IAAI,EAAE,OAAO,GAAG,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,eAAO,MAAM,kBAAkB,GAAI,8CAKhC,8BAA8B,mDA4QhC,CAAC"}

package/dist/components/AttachmentsPreview/AttachmentsPreview.js

@@ -1,22 +1,24 @@
-import { jsxs as n, Fragment as C, jsx as r } from "react/jsx-runtime";
+import { jsxs as o, Fragment as P, jsx as a } from "react/jsx-runtime";
+import { useState as M } from "react";
 import { Download01Icon as g } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon as x } from "@hugeicons/react";
-import { Stack as v, Grid as z, Box as h, Image as F, LoadingOverlay as f, ActionIcon as c, CloseIcon as I, Flex as y, Text as N } from "@mantine/core";
-import { useDisclosure as M } from "@mantine/hooks";
-import { getFileIcons as P } from "../../helpers/getFileIcons.js";
-import { getFileType as A } from "../../helpers/getFileType.js";
-import { AttachmentsGalleryModal as B } from "../AttachmentsGalleryModal/AttachmentsGalleryModal.js";
-import a from "./AttachmentsPreview.module.css.js";
-const U = ({
-  files: o,
-  onRemove: i,
+import { HugeiconsIcon as u } from "@hugeicons/react";
+import { Stack as y, Box as m, Image as z, LoadingOverlay as v, ActionIcon as l, Grid as I, CloseIcon as N, Flex as b, Text as C } from "@mantine/core";
+import { useDisclosure as O } from "@mantine/hooks";
+import { formatBytes as S } from "../../helpers/formatBytes.js";
+import { getFileIcons as G } from "../../helpers/getFileIcons.js";
+import { getFileType as L } from "../../helpers/getFileType.js";
+import { AttachmentsGalleryModal as $ } from "../AttachmentsGalleryModal/AttachmentsGalleryModal.js";
+import r from "./AttachmentsPreview.module.css.js";
+const k = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 24 24' fill='none' stroke='%23adb5bd' stroke-width='1.5'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='m3 16 5-5 4 4'/%3E%3Cpath d='m14 14 2-2 5 5'/%3E%3Cline x1='3' y1='3' x2='21' y2='21'/%3E%3C/svg%3E", Y = ({
+  files: s,
+  onRemove: c,
   mode: t,
-  parentIsExisting: u
+  parentIsExisting: p
 }) => {
-  const [T, { open: w, close: b }] = M(!1), s = o.filter((e) => e.isImage), d = o.filter((e) => !e.isImage), D = s.map((e) => ({
+  const [E, { open: x, close: T }] = O(!1), [B, D] = M(0), n = s.filter((e) => e.isImage), h = s.filter((e) => !e.isImage), F = n.map((e) => ({
     id: e.id,
     Url: e.url,
-    contentType: "image",
+    contentType: e.type || "image/png",
     fileName: e.name,
     originalFileName: e.name,
     fileSize: e.size,
@@ -30,44 +32,98 @@ const U = ({
     version: 1,
     deleted: !1,
     deletedAt: /* @__PURE__ */ new Date()
-  })), m = s.every((e) => !e.isTemp), k = () => {
-    m && w();
+  })), d = n.every((e) => !e.isTemp), f = (e) => {
+    d && (D(e), x());
   };
-  return o.length === 0 ? null : /* @__PURE__ */ n(C, { children: [
-    /* @__PURE__ */ n(v, { gap: "10px", w: "100%", tabIndex: 0, children: [
-      s.length > 0 && /* @__PURE__ */ r(z, { gap: "xs", children: s.map((e) => {
-        const l = o.indexOf(e);
-        return /* @__PURE__ */ r(z.Col, { span: "content", children: /* @__PURE__ */ n(
-          h,
+  return s.length === 0 ? null : /* @__PURE__ */ o(P, { children: [
+    /* @__PURE__ */ o(y, { gap: "10px", w: "100%", tabIndex: 0, children: [
+      t === "view" && n.length >= 2 && /* @__PURE__ */ a(
+        "div",
+        {
+          className: r.mediaGrid,
+          "data-odd": n.length % 2 === 1,
+          children: n.map((e, i) => /* @__PURE__ */ o(
+            m,
+            {
+              pos: "relative",
+              className: `${r.imagePreviewWrapper} ${r.mediaTile}`,
+              children: [
+                /* @__PURE__ */ a(
+                  z,
+                  {
+                    src: e.src,
+                    fallbackSrc: k,
+                    fit: "cover",
+                    className: `${r.tileImg} ${r.mediaFadeIn}`,
+                    style: { cursor: d ? "zoom-in" : "default" },
+                    onClick: () => f(i)
+                  }
+                ),
+                /* @__PURE__ */ a(
+                  v,
+                  {
+                    visible: e.isTemp && p,
+                    loaderProps: { size: 20 }
+                  }
+                ),
+                !e.isTemp && /* @__PURE__ */ a(
+                  l,
+                  {
+                    component: "a",
+                    size: "22px",
+                    href: e.url,
+                    download: e.name,
+                    rel: "noopener noreferrer",
+                    variant: "subtle",
+                    color: "white",
+                    bg: "var(--mantine-color-dark-filled, #2E2E2E)",
+                    className: r.downloadButton,
+                    children: /* @__PURE__ */ a(u, { size: 16, icon: g })
+                  }
+                )
+              ]
+            },
+            e.id
+          ))
+        }
+      ),
+      !(t === "view" && n.length >= 2) && n.length > 0 && /* @__PURE__ */ a(I, { gap: "xs", children: n.map((e, i) => {
+        const w = s.indexOf(e);
+        return /* @__PURE__ */ a(I.Col, { span: "content", children: /* @__PURE__ */ o(
+          m,
           {
-            w: 56,
-            h: 56,
             pos: "relative",
-            className: a.imagePreviewWrapper,
+            className: r.imagePreviewWrapper,
+            style: {
+              width: "var(--attachment-image-w, 56px)",
+              height: "var(--attachment-image-h, 56px)"
+            },
             children: [
-              /* @__PURE__ */ r(
-                F,
+              /* @__PURE__ */ a(
+                z,
                 {
                   src: e.src,
-                  width: 56,
-                  height: 56,
+                  fallbackSrc: k,
+                  className: r.mediaFadeIn,
+                  w: "100%",
+                  h: "100%",
                   fit: "cover",
                   radius: "sm",
                   style: {
-                    cursor: m ? "zoom-in" : "default"
+                    cursor: d ? "zoom-in" : "default"
                   },
-                  onClick: () => k()
+                  onClick: () => f(i)
                 }
               ),
-              /* @__PURE__ */ r(
-                f,
+              /* @__PURE__ */ a(
+                v,
                 {
-                  visible: e.isTemp && t === "view" && u,
+                  visible: e.isTemp && t === "view" && p,
                   loaderProps: { size: 20 }
                 }
               ),
-              t === "view" && !e.isTemp && /* @__PURE__ */ r(
-                c,
+              t === "view" && !e.isTemp && /* @__PURE__ */ a(
+                l,
                 {
                   component: "a",
                   size: "20px",
@@ -79,54 +135,54 @@ const U = ({
                   top: 2,
                   right: 2,
                   bg: "var(--mantine-color-dark-filled, #2E2E2E)",
-                  className: a.downloadButton,
-                  children: /* @__PURE__ */ r(x, { size: 16, icon: g })
+                  className: r.downloadButton,
+                  children: /* @__PURE__ */ a(u, { size: 16, icon: g })
                 }
               ),
-              t === "draft" && i && /* @__PURE__ */ r(
-                c,
+              t === "draft" && c && /* @__PURE__ */ a(
+                l,
                 {
                   size: "20px",
                   radius: "xl",
                   variant: "filled",
-                  onMouseDown: (p) => p.preventDefault(),
+                  onMouseDown: (A) => A.preventDefault(),
                   pos: "absolute",
                   color: "dark",
-                  onClick: () => i(l),
-                  className: a.deleteButton,
-                  children: /* @__PURE__ */ r(I, { size: "12px" })
+                  onClick: () => c(w),
+                  className: r.deleteButton,
+                  children: /* @__PURE__ */ a(N, { size: "12px" })
                 }
               )
             ]
           }
         ) }, e.id);
       }) }),
-      d.length > 0 && /* @__PURE__ */ r(
-        h,
+      h.length > 0 && /* @__PURE__ */ a(
+        m,
         {
           w: "100%",
-          className: a.filePreviewList,
-          "data-many": d.length >= 4,
-          children: d.map((e) => {
-            const l = o.indexOf(e);
-            return /* @__PURE__ */ n(h, { className: a.filePreviewWrapper, children: [
-              /* @__PURE__ */ r(
-                f,
+          className: r.filePreviewList,
+          "data-many": t === "draft" && h.length >= 4,
+          children: h.map((e) => {
+            const i = s.indexOf(e);
+            return /* @__PURE__ */ o(m, { className: r.filePreviewWrapper, children: [
+              /* @__PURE__ */ a(
+                v,
                 {
-                  visible: e.isTemp && t === "view" && u,
+                  visible: e.isTemp && t === "view" && p,
                   loaderProps: { size: 20 }
                 }
               ),
-              /* @__PURE__ */ n(
-                y,
+              /* @__PURE__ */ o(
+                b,
                 {
                   align: "center",
                   justify: "space-between",
                   wrap: "nowrap",
                   gap: 2,
                   children: [
-                    /* @__PURE__ */ n(
-                      y,
+                    /* @__PURE__ */ o(
+                      b,
                       {
                         align: "center",
                         gap: "xs",
@@ -134,19 +190,19 @@ const U = ({
                         flex: 1,
                         miw: 0,
                         children: [
-                          P(
-                            A(e.type, !1, e.name),
+                          G(
+                            L(e.type, !1, e.name),
                             !1,
                             36
                           ),
-                          /* @__PURE__ */ n(v, { gap: 0, flex: 1, miw: 0, children: [
-                            /* @__PURE__ */ r(
-                              N,
+                          /* @__PURE__ */ o(y, { gap: 0, flex: 1, miw: 0, children: [
+                            /* @__PURE__ */ a(
+                              C,
                               {
                                 size: "sm",
                                 truncate: !0,
                                 title: e.name,
-                                className: a.fileDownloadName,
+                                className: r.fileDownloadName,
                                 component: "a",
                                 href: e.url,
                                 download: e.name,
@@ -155,16 +211,13 @@ const U = ({
                                 children: e.name
                               }
                             ),
-                            /* @__PURE__ */ n(N, { size: "xs", c: "dimmed", children: [
-                              Math.round(e.size / 1024),
-                              " KB"
-                            ] })
+                            /* @__PURE__ */ a(C, { size: "xs", className: r.fileSize, children: S(e.size, 1) })
                           ] })
                         ]
                       }
                     ),
-                    t === "view" && !e.isTemp && /* @__PURE__ */ r(
-                      c,
+                    t === "view" && !e.isTemp && /* @__PURE__ */ a(
+                      l,
                       {
                         component: "a",
                         href: e.url,
@@ -173,24 +226,24 @@ const U = ({
                         variant: "subtle",
                         color: "gray",
                         size: "sm",
-                        className: a.downloadButton,
-                        children: /* @__PURE__ */ r(x, { size: 16, icon: g })
+                        className: r.downloadButton,
+                        children: /* @__PURE__ */ a(u, { size: 16, icon: g })
                       }
                     )
                   ]
                 }
               ),
-              t === "draft" && i && /* @__PURE__ */ r(
-                c,
+              t === "draft" && c && /* @__PURE__ */ a(
+                l,
                 {
                   size: "xs",
                   radius: "xl",
-                  onMouseDown: (p) => p.preventDefault(),
+                  onMouseDown: (w) => w.preventDefault(),
                   variant: "filled",
                   color: "dark",
-                  onClick: () => i(l),
-                  className: a.deleteButton,
-                  children: /* @__PURE__ */ r(I, { size: "12px" })
+                  onClick: () => c(i),
+                  className: r.deleteButton,
+                  children: /* @__PURE__ */ a(N, { size: "12px" })
                 }
               )
             ] }, e.id);
@@ -198,16 +251,17 @@ const U = ({
         }
       )
     ] }),
-    m && /* @__PURE__ */ r(
-      B,
+    d && /* @__PURE__ */ a(
+      $,
       {
-        opened: T,
-        onOpenChange: (e) => e ? w() : b(),
-        attachments: D
+        opened: E,
+        onOpenChange: (e) => e ? x() : T(),
+        attachments: F,
+        initialIndex: B
       }
     )
   ] });
 };
 export {
-  U as AttachmentsPreview
+  Y as AttachmentsPreview
 };