@salemcobalt/ui 0.2.0-rc.10 → 0.2.0-rc.12

package/dist/index.js

@@ -2124,7 +2124,10 @@ function Skeleton({
 }
 
 // src/components/FileInput/FileInput.tsx
-import { useEffect as useEffect3, useId as useId3, useRef as useRef3, useState as useState5 } from "react";
+import { useEffect as useEffect4, useId as useId3, useRef as useRef4, useState as useState6 } from "react";
+
+// src/components/FilePreviewDialog/FilePreviewDialog.tsx
+import { useEffect as useEffect3, useRef as useRef3, useState as useState5 } from "react";
 
 // src/components/FileInput/accept.ts
 function parseAccept(accept) {
@@ -2155,6 +2158,14 @@ function formatSize(bytes) {
   const value = bytes / base;
   return `${Number.isInteger(value) ? value : Number(value.toFixed(1))} ${unit}`;
 }
+function formatListSize(bytes) {
+  const n = Math.round(Math.abs(bytes));
+  const trim = (value, decimals) => value.toFixed(decimals).replace(/\.0+$/, "");
+  if (n < 1e3) return `${n} bytes`;
+  if (n < 1e6) return `${Math.floor(n / 1e3)} KB`;
+  if (n < 1e9) return `${trim(n / 1e6, 1)} MB`;
+  return `${trim(n / 1e9, 2)} GB`;
+}
 var MIME_NAMES = {
   "application/pdf": "PDF",
   "application/msword": "DOC",
@@ -2192,9 +2203,167 @@ function escapeHtml(text) {
     (ch) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[ch]
   );
 }
+var extensionOf = (name) => {
+  const dot = name.lastIndexOf(".");
+  return dot > 0 ? name.slice(dot + 1).toLowerCase() : "";
+};
+var TEXT_EXTENSIONS = /* @__PURE__ */ new Set(["txt", "text", "md", "markdown"]);
+var TEXT_TYPES = /* @__PURE__ */ new Set(["text/plain", "text/markdown", "text/x-markdown"]);
+var IMAGE_EXTENSIONS = /* @__PURE__ */ new Set(["png", "jpg", "jpeg", "gif", "webp", "avif", "svg", "bmp"]);
+var UNDRAWABLE_IMAGE_TYPES = /* @__PURE__ */ new Set(["image/heic", "image/heif", "image/tiff"]);
+function previewKind(file) {
+  const ext = extensionOf(file.name);
+  const type = file.type.toLowerCase();
+  if (ext === "pdf" || type === "application/pdf") return "pdf";
+  if (TEXT_EXTENSIONS.has(ext) || TEXT_TYPES.has(type)) return "text";
+  if (UNDRAWABLE_IMAGE_TYPES.has(type)) return null;
+  if (IMAGE_EXTENSIONS.has(ext) || type.startsWith("image/")) return "image";
+  return null;
+}
+function fileTypeLabel(file) {
+  const ext = extensionOf(file.name);
+  if (ext) return ext.toUpperCase();
+  return MIME_NAMES[file.type.toLowerCase()] ?? (file.type.split("/").pop()?.toUpperCase() || "File");
+}
+
+// src/utils/useMediaQuery.ts
+import { useCallback, useSyncExternalStore } from "react";
+function useMediaQuery(query) {
+  const subscribe = useCallback(
+    (onChange) => {
+      if (typeof window === "undefined" || typeof window.matchMedia !== "function") return () => {
+      };
+      const list = window.matchMedia(query);
+      list.addEventListener?.("change", onChange);
+      return () => list.removeEventListener?.("change", onChange);
+    },
+    [query]
+  );
+  return useSyncExternalStore(
+    subscribe,
+    () => typeof window.matchMedia === "function" && window.matchMedia(query).matches,
+    () => false
+  );
+}
+
+// src/components/FilePreviewDialog/FilePreviewDialog.tsx
+import { Fragment as Fragment8, jsx as jsx29, jsxs as jsxs24 } from "react/jsx-runtime";
+var TEXT_LIMIT = 1e6;
+var NARROW = "(max-width: 48rem)";
+function FilePreviewDialog({ file, open, onOpenChange, finalFocus }) {
+  const kind = file ? previewKind(file) : null;
+  const narrow = useMediaQuery(NARROW);
+  const pdfInTab = kind === "pdf" && narrow;
+  return /* @__PURE__ */ jsx29(Dialog.Root, { open, onOpenChange, children: /* @__PURE__ */ jsxs24(
+    Dialog.Content,
+    {
+      size: "lg",
+      className: "sc-file-preview",
+      "data-kind": kind ?? "none",
+      finalFocus,
+      children: [
+        /* @__PURE__ */ jsx29(Dialog.Close, {}),
+        file ? /* @__PURE__ */ jsxs24(Fragment8, { children: [
+          /* @__PURE__ */ jsx29(Dialog.Title, { children: file.name }),
+          /* @__PURE__ */ jsxs24(Dialog.Description, { children: [
+            fileTypeLabel(file),
+            ", ",
+            formatListSize(file.size)
+          ] }),
+          /* @__PURE__ */ jsx29(Dialog.Body, { children: /* @__PURE__ */ jsx29(PreviewBody, { file, kind, open, pdfInTab }) })
+        ] }) : /* @__PURE__ */ jsx29(Dialog.Title, { children: "Preview" })
+      ]
+    }
+  ) });
+}
+function PreviewBody({
+  file,
+  kind,
+  open,
+  pdfInTab
+}) {
+  const frameRef = useRef3(null);
+  const imageRef = useRef3(null);
+  const linkRef = useRef3(null);
+  const [text, setText] = useState5(null);
+  useEffect3(() => {
+    if (!open || kind !== "pdf" && kind !== "image") return void 0;
+    const url = URL.createObjectURL(kind === "pdf" ? new Blob([file], { type: "application/pdf" }) : file);
+    if (frameRef.current) frameRef.current.src = url;
+    if (imageRef.current) imageRef.current.src = url;
+    if (linkRef.current) linkRef.current.href = url;
+    return () => URL.revokeObjectURL(url);
+  }, [open, file, kind, pdfInTab]);
+  useEffect3(() => {
+    if (!open || kind !== "text") return void 0;
+    let cancelled = false;
+    void file.slice(0, TEXT_LIMIT).text().then((value) => {
+      if (!cancelled) setText({ file, value });
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [open, file, kind]);
+  if (kind === "pdf") {
+    const link = (
+      // eslint-disable-next-line jsx-a11y/anchor-is-valid -- the effect above sets href to the object URL on mount
+      /* @__PURE__ */ jsxs24(
+        "a",
+        {
+          ref: linkRef,
+          className: "sc-button",
+          "data-variant": pdfInTab ? "primary" : "secondary",
+          "data-size": "md",
+          target: "_blank",
+          rel: "noopener",
+          children: [
+            "Open in a new tab",
+            /* @__PURE__ */ jsx29(ExternalLinkIcon, {})
+          ]
+        }
+      )
+    );
+    return pdfInTab ? /* @__PURE__ */ jsxs24("div", { className: "sc-file-preview__tab", children: [
+      /* @__PURE__ */ jsx29("p", { className: "sc-file-preview__note", children: "On a small screen the PDF reads best in its own tab." }),
+      link
+    ] }) : /* @__PURE__ */ jsxs24(Fragment8, { children: [
+      /* @__PURE__ */ jsx29("iframe", { ref: frameRef, className: "sc-file-preview__frame", title: `Preview of ${file.name}` }),
+      /* @__PURE__ */ jsx29("div", { className: "sc-file-preview__actions", children: link })
+    ] });
+  }
+  if (kind === "text") {
+    const value = text?.file === file ? text.value : null;
+    return /* @__PURE__ */ jsxs24(Fragment8, { children: [
+      /* @__PURE__ */ jsx29(
+        "pre",
+        {
+          className: "sc-file-preview__text",
+          role: "region",
+          tabIndex: 0,
+          "aria-label": `Contents of ${file.name}`,
+          "aria-busy": value == null || void 0,
+          children: value
+        }
+      ),
+      file.size > TEXT_LIMIT ? /* @__PURE__ */ jsxs24("p", { className: "sc-file-preview__note", children: [
+        "Showing the first ",
+        formatSize(TEXT_LIMIT),
+        "."
+      ] }) : null
+    ] });
+  }
+  if (kind === "image") {
+    return /* @__PURE__ */ jsx29("img", { ref: imageRef, className: "sc-file-preview__image", alt: file.name });
+  }
+  return /* @__PURE__ */ jsxs24("p", { className: "sc-file-preview__note", children: [
+    "There is no preview for ",
+    fileTypeLabel(file),
+    " files."
+  ] });
+}
 
 // src/components/FileInput/FileInput.tsx
-import { jsx as jsx29, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs25 } from "react/jsx-runtime";
 var REMOVE_ICON = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8"/></svg>';
 var sameFiles = (a, b) => a.length === b.length && a.every((file, i) => file === b[i]);
 function FileInput({
@@ -2217,25 +2386,29 @@ function FileInput({
   defaultFiles,
   onFilesChange,
   idleLabel,
-  browseLabel = "browse"
+  browseLabel = "browse",
+  preview = true
 }) {
   const id = useId3();
   const labelId = `${id}label`;
   const descriptionId = `${id}description`;
   const messagesId = `${id}messages`;
   const controlled = files !== void 0;
-  const [uncontrolledFiles, setUncontrolledFiles] = useState5(defaultFiles ?? []);
+  const [uncontrolledFiles, setUncontrolledFiles] = useState6(defaultFiles ?? []);
   const current = controlled ? files : uncontrolledFiles;
-  const [rejections, setRejections] = useState5([]);
-  const [inputId, setInputId] = useState5();
-  const [pondVersion, setPondVersion] = useState5(0);
-  const hostRef = useRef3(null);
-  const pondRef = useRef3(null);
-  const moduleRef = useRef3(null);
-  const patchRef = useRef3(() => {
+  const [rejections, setRejections] = useState6([]);
+  const [inputId, setInputId] = useState6();
+  const [previewFile, setPreviewFile] = useState6(null);
+  const [previewOpen, setPreviewOpen] = useState6(false);
+  const previewTriggerRef = useRef4(null);
+  const [pondVersion, setPondVersion] = useState6(0);
+  const hostRef = useRef4(null);
+  const pondRef = useRef4(null);
+  const moduleRef = useRef4(null);
+  const patchRef = useRef4(() => {
   });
-  const settledRef = useRef3(current);
-  const targetRef = useRef3(null);
+  const settledRef = useRef4(current);
+  const targetRef = useRef4(null);
   const acceptList = parseAccept(accept);
   const acceptAttr = acceptList.join(",");
   const maxBytes = parseSize(maxFileSize);
@@ -2254,13 +2427,19 @@ function FileInput({
     labelId,
     describedBy: [description != null ? descriptionId : null, messages.length > 0 ? messagesId : null],
     isInvalid,
-    acceptAttr
+    acceptAttr,
+    preview: preview && !disabled,
+    openPreview: (file, trigger) => {
+      previewTriggerRef.current = trigger;
+      setPreviewFile(file);
+      setPreviewOpen(true);
+    }
   };
-  const liveRef = useRef3(live);
-  useEffect3(() => {
+  const liveRef = useRef4(live);
+  useEffect4(() => {
     liveRef.current = live;
   });
-  useEffect3(() => {
+  useEffect4(() => {
     let cancelled = false;
     let pond = null;
     let observer = null;
@@ -2287,6 +2466,15 @@ function FileInput({
     const noteRemove = (event) => {
       if (event.target?.closest?.(".filepond--action-remove-item")) removeIntent = true;
     };
+    const onPreviewClick = (event) => {
+      const button = event.target?.closest?.(
+        ".sc-file-input__preview"
+      );
+      const file = button?.dataset.fileId ? pond?.getFile(button.dataset.fileId)?.file : null;
+      if (!button || !(file instanceof File)) return;
+      event.stopPropagation();
+      liveRef.current.openPreview(file, button);
+    };
     const emit = () => {
       const mod = moduleRef.current;
       if (!pond || !mod) return;
@@ -2328,11 +2516,33 @@ function FileInput({
       set(root.querySelector(".filepond--label-action"), "tabindex", null);
       for (const item of root.querySelectorAll(".filepond--item")) {
         const fileName = item.querySelector(".filepond--file-info-main")?.textContent?.trim();
-        if (fileName)
-          set(item.querySelector(".filepond--action-remove-item"), "aria-label", `Remove ${fileName}`);
+        const remove = item.querySelector(".filepond--action-remove-item");
+        if (fileName) set(remove, "aria-label", `Remove ${fileName}`);
+        patchPreview(item, remove);
       }
       setInputId(input?.id || void 0);
     };
+    const patchPreview = (item, remove) => {
+      const row = item.querySelector(".filepond--file");
+      if (!row) return;
+      let button = row.querySelector(":scope > .sc-file-input__preview");
+      const id2 = item.id.replace(/^filepond--item-/, "");
+      const file = pond?.getFile(id2)?.file;
+      if (!liveRef.current.preview || !(file instanceof File) || previewKind(file) == null) {
+        button?.remove();
+        return;
+      }
+      if (!button) {
+        button = document.createElement("button");
+        button.type = "button";
+        button.className = "sc-file-input__preview";
+        row.insertBefore(button, remove ?? row.firstChild);
+      }
+      if (button.dataset.fileId !== id2) button.dataset.fileId = id2;
+      if (button.textContent !== file.name) button.textContent = file.name;
+      const name2 = `Preview ${file.name}`;
+      if (button.getAttribute("aria-label") !== name2) button.setAttribute("aria-label", name2);
+    };
     void import("filepond").then((mod) => {
       if (cancelled || !mod.supported()) return;
       moduleRef.current = mod;
@@ -2397,6 +2607,7 @@ function FileInput({
       host.addEventListener("drop", startAttempt, true);
       host.addEventListener("change", startAttempt, true);
       host.addEventListener("click", noteRemove, true);
+      host.addEventListener("click", onPreviewClick);
       settledRef.current = [];
       setPondVersion((v) => v + 1);
     });
@@ -2405,6 +2616,7 @@ function FileInput({
       host.removeEventListener("drop", startAttempt, true);
       host.removeEventListener("change", startAttempt, true);
       host.removeEventListener("click", noteRemove, true);
+      host.removeEventListener("click", onPreviewClick);
       observer?.disconnect();
       if (pond) {
         pond.element?.remove();
@@ -2415,7 +2627,7 @@ function FileInput({
       };
     };
   }, []);
-  useEffect3(() => {
+  useEffect4(() => {
     const pond = pondRef.current;
     if (!pond) return;
     pond.setOptions({
@@ -2441,9 +2653,10 @@ function FileInput({
     acceptAttr,
     isInvalid,
     description,
-    messages.length
+    messages.length,
+    preview
   ]);
-  useEffect3(() => {
+  useEffect4(() => {
     const pond = pondRef.current;
     const mod = moduleRef.current;
     if (!pond || !mod) return;
@@ -2460,7 +2673,7 @@ function FileInput({
     if (toAdd.length > 0) void pond.addFiles(toAdd);
   }, [current, pondVersion]);
   const ready = pondVersion > 0;
-  return /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs25(
     "div",
     {
       className: cx("sc-field", "sc-file-input-field", className),
@@ -2468,7 +2681,7 @@ function FileInput({
       "data-disabled": disabled ? "" : void 0,
       "data-invalid": isInvalid ? "" : void 0,
       children: [
-        /* @__PURE__ */ jsxs24(
+        /* @__PURE__ */ jsxs25(
           "label",
           {
             id: labelId,
@@ -2476,11 +2689,11 @@ function FileInput({
             className: cx("sc-field__label", hideLabel && "sc-visually-hidden"),
             children: [
               label,
-              required ? /* @__PURE__ */ jsx29("span", { className: "sc-field__required", "aria-hidden": "true", children: "*" }) : null
+              required ? /* @__PURE__ */ jsx30("span", { className: "sc-field__required", "aria-hidden": "true", children: "*" }) : null
             ]
           }
         ),
-        /* @__PURE__ */ jsxs24(
+        /* @__PURE__ */ jsxs25(
           "div",
           {
             className: "sc-file-input",
@@ -2491,18 +2704,31 @@ function FileInput({
             children: [
               ready ? null : (
                 // Server render and first paint: the same drop zone, inert until FilePond takes over.
-                /* @__PURE__ */ jsxs24("div", { className: "sc-file-input__placeholder", "aria-hidden": "true", children: [
+                /* @__PURE__ */ jsxs25("div", { className: "sc-file-input__placeholder", "aria-hidden": "true", children: [
                   idleText,
                   " ",
-                  /* @__PURE__ */ jsx29("span", { className: "sc-file-input__browse", children: browseLabel })
+                  /* @__PURE__ */ jsx30("span", { className: "sc-file-input__browse", children: browseLabel })
                 ] })
               ),
-              /* @__PURE__ */ jsx29("div", { ref: hostRef, className: "sc-file-input__pond" })
+              /* @__PURE__ */ jsx30("div", { ref: hostRef, className: "sc-file-input__pond" })
             ]
           }
         ),
-        description != null ? /* @__PURE__ */ jsx29("p", { id: descriptionId, className: "sc-field__description", children: description }) : null,
-        /* @__PURE__ */ jsx29("div", { id: messagesId, className: "sc-file-input__messages", "aria-live": "polite", children: messages.map((message, i) => /* @__PURE__ */ jsx29("p", { className: "sc-field__error", children: message }, i)) })
+        description != null ? /* @__PURE__ */ jsx30("p", { id: descriptionId, className: "sc-field__description", children: description }) : null,
+        /* @__PURE__ */ jsx30("div", { id: messagesId, className: "sc-file-input__messages", "aria-live": "polite", children: messages.map((message, i) => /* @__PURE__ */ jsx30("p", { className: "sc-field__error", children: message }, i)) }),
+        previewFile ? /* @__PURE__ */ jsx30(
+          FilePreviewDialog,
+          {
+            file: previewFile,
+            open: previewOpen,
+            onOpenChange: setPreviewOpen,
+            finalFocus: () => {
+              const trigger = previewTriggerRef.current;
+              if (trigger?.isConnected) return trigger;
+              return hostRef.current?.querySelector("input.filepond--browser") ?? true;
+            }
+          }
+        ) : null
       ]
     }
   );
@@ -2510,11 +2736,11 @@ function FileInput({
 
 // src/components/PriorityNav/PriorityNav.tsx
 import {
-  useEffect as useEffect4,
+  useEffect as useEffect5,
   useId as useId4,
   useLayoutEffect as useLayoutEffect2,
-  useRef as useRef4,
-  useState as useState6
+  useRef as useRef5,
+  useState as useState7
 } from "react";
 
 // src/components/PriorityNav/fit.ts
@@ -2570,9 +2796,9 @@ function placePanel({ anchor, panel, viewport, gutter, offset, rtl = false }) {
 }
 
 // src/components/PriorityNav/PriorityNav.tsx
-import { jsx as jsx30, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs26 } from "react/jsx-runtime";
 var defaultCountLabel2 = (n) => n === 1 ? "1 link" : `${n} links`;
-var defaultLink = ({ children, ...props }) => /* @__PURE__ */ jsx30("a", { ...props, children });
+var defaultLink = ({ children, ...props }) => /* @__PURE__ */ jsx31("a", { ...props, children });
 var keyOf = (item) => item.id ?? item.href;
 var supportsAnchor = () => typeof CSS !== "undefined" && typeof CSS.supports === "function" && CSS.supports("anchor-name: --a");
 var supportsPopover = (el) => typeof el.showPopover === "function";
@@ -2595,18 +2821,18 @@ function PriorityNav({
 }) {
   const signature = signatureOf(items);
   const current = items.findIndex((item) => item.current);
-  const [fit, setFit] = useState6({ signature: null, current: -1, count: 0, overflowing: false });
-  const [open, setOpen] = useState6(false);
+  const [fit, setFit] = useState7({ signature: null, current: -1, count: 0, overflowing: false });
+  const [open, setOpen] = useState7(false);
   const panelId = useId4();
-  const listRef = useRef4(null);
-  const moreRef = useRef4(null);
-  const toggleRef = useRef4(null);
-  const panelRef = useRef4(null);
-  const measured = useRef4(null);
-  const currentRef = useRef4(current);
-  const fitRef = useRef4(fit);
-  const hysteresisRef = useRef4(overflowHysteresis);
-  const onOverflowRef = useRef4(onOverflowChange);
+  const listRef = useRef5(null);
+  const moreRef = useRef5(null);
+  const toggleRef = useRef5(null);
+  const panelRef = useRef5(null);
+  const measured = useRef5(null);
+  const currentRef = useRef5(current);
+  const fitRef = useRef5(fit);
+  const hysteresisRef = useRef5(overflowHysteresis);
+  const onOverflowRef = useRef5(onOverflowChange);
   const solve = (m, cur, was) => ({
     count: fitCount({ ...m, current: cur }),
     overflowing: isOverflowing({ ...m, was, hysteresis: hysteresisRef.current })
@@ -2638,7 +2864,7 @@ function PriorityNav({
     if (!m) return;
     setFit({ signature, current, ...solve(m, current, fit.overflowing) });
   }, [measuring, signature, current, fit]);
-  useEffect4(() => {
+  useEffect5(() => {
     const list = listRef.current;
     const more = moreRef.current;
     if (!list || !more || typeof ResizeObserver === "undefined") return;
@@ -2662,13 +2888,13 @@ function PriorityNav({
     observer.observe(more);
     return () => observer.disconnect();
   }, []);
-  const reported = useRef4(false);
-  useEffect4(() => {
+  const reported = useRef5(false);
+  useEffect5(() => {
     if (reported.current === fit.overflowing) return;
     reported.current = fit.overflowing;
     onOverflowRef.current?.(fit.overflowing);
   }, [fit.overflowing]);
-  useEffect4(() => {
+  useEffect5(() => {
     const fonts = typeof document === "undefined" ? void 0 : document.fonts;
     if (!fonts || fonts.status === "loaded") return;
     let live = true;
@@ -2719,7 +2945,7 @@ function PriorityNav({
       panel.style.top = "";
     };
   }, [expanded]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!expanded) return;
     const onPointerDown = (event) => {
       if (!moreRef.current?.contains(event.target)) setOpen(false);
@@ -2747,11 +2973,11 @@ function PriorityNav({
       className: "sc-priority-nav__link",
       "aria-current": item.current ? "page" : void 0,
       onClick: inPanel ? () => setOpen(false) : void 0,
-      children: /* @__PURE__ */ jsx30("span", { className: "sc-priority-nav__label", children: item.label })
+      children: /* @__PURE__ */ jsx31("span", { className: "sc-priority-nav__label", children: item.label })
     },
     item
   );
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx31(
     "nav",
     {
       className: cx("sc-priority-nav", className),
@@ -2759,11 +2985,11 @@ function PriorityNav({
       "data-overflowing": fit.overflowing || void 0,
       style: { ...style, "--_anchor": `--sc-priority-nav${panelId.replace(/[^\w-]/g, "")}` },
       ...rest,
-      children: /* @__PURE__ */ jsxs25("ul", { ref: listRef, className: "sc-priority-nav__list", children: [
+      children: /* @__PURE__ */ jsxs26("ul", { ref: listRef, className: "sc-priority-nav__list", children: [
         items.map(
-          (item, i) => flags && !flags[i] ? null : /* @__PURE__ */ jsx30("li", { className: "sc-priority-nav__item", "data-current": item.current || void 0, children: link(item, false) }, keyOf(item))
+          (item, i) => flags && !flags[i] ? null : /* @__PURE__ */ jsx31("li", { className: "sc-priority-nav__item", "data-current": item.current || void 0, children: link(item, false) }, keyOf(item))
         ),
-        /* @__PURE__ */ jsxs25(
+        /* @__PURE__ */ jsxs26(
           "li",
           {
             ref: moreRef,
@@ -2771,7 +2997,7 @@ function PriorityNav({
             hidden: measuring || overflow.length === 0,
             onBlur,
             children: [
-              /* @__PURE__ */ jsxs25(
+              /* @__PURE__ */ jsxs26(
                 "button",
                 {
                   ref: toggleRef,
@@ -2781,17 +3007,17 @@ function PriorityNav({
                   "aria-controls": panelId,
                   onClick: () => setOpen((o) => !o),
                   children: [
-                    /* @__PURE__ */ jsx30(MoreHorizontalIcon, { className: "sc-priority-nav__ellipsis" }),
-                    /* @__PURE__ */ jsx30("span", { className: "sc-priority-nav__toggle-label", children: moreLabel }),
-                    /* @__PURE__ */ jsxs25("span", { className: "sc-visually-hidden", children: [
+                    /* @__PURE__ */ jsx31(MoreHorizontalIcon, { className: "sc-priority-nav__ellipsis" }),
+                    /* @__PURE__ */ jsx31("span", { className: "sc-priority-nav__toggle-label", children: moreLabel }),
+                    /* @__PURE__ */ jsxs26("span", { className: "sc-visually-hidden", children: [
                       ", ",
                       moreCountLabel(overflow.length)
                     ] }),
-                    /* @__PURE__ */ jsx30(ChevronDownIcon, { size: "sm", className: "sc-priority-nav__chevron" })
+                    /* @__PURE__ */ jsx31(ChevronDownIcon, { size: "sm", className: "sc-priority-nav__chevron" })
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx30("ul", { ref: panelRef, id: panelId, className: "sc-priority-nav__panel", hidden: !expanded, children: overflow.map((item) => /* @__PURE__ */ jsx30("li", { children: link(item, true) }, keyOf(item))) })
+              /* @__PURE__ */ jsx31("ul", { ref: panelRef, id: panelId, className: "sc-priority-nav__panel", hidden: !expanded, children: overflow.map((item) => /* @__PURE__ */ jsx31("li", { children: link(item, true) }, keyOf(item))) })
             ]
           }
         )
@@ -2802,9 +3028,9 @@ function PriorityNav({
 
 // src/components/Popover/Popover.tsx
 import { Popover as BasePopover } from "@base-ui/react/popover";
-import { jsx as jsx31, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs27 } from "react/jsx-runtime";
 function Root6({ open, defaultOpen, onOpenChange, modal = false, children }) {
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx32(
     BasePopover.Root,
     {
       open,
@@ -2816,10 +3042,10 @@ function Root6({ open, defaultOpen, onOpenChange, modal = false, children }) {
   );
 }
 function Trigger3({ render, className, children, ...rest }) {
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx32(
     BasePopover.Trigger,
     {
-      render: render ?? /* @__PURE__ */ jsx31(Button, { variant: "secondary", className }),
+      render: render ?? /* @__PURE__ */ jsx32(Button, { variant: "secondary", className }),
       className: render ? className : void 0,
       ...rest,
       children
@@ -2835,38 +3061,38 @@ function Content3({
   children,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx31(BasePopover.Portal, { children: /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx32(BasePopover.Portal, { children: /* @__PURE__ */ jsx32(
     BasePopover.Positioner,
     {
       side,
       align,
       sideOffset: sideOffset ?? (arrow ? 8 : 4),
       className: "sc-popover__positioner",
-      children: /* @__PURE__ */ jsxs26(BasePopover.Popup, { className: cx("sc-popover", className), ...rest, children: [
-        arrow ? /* @__PURE__ */ jsx31(BasePopover.Arrow, { className: "sc-popover__arrow" }) : null,
+      children: /* @__PURE__ */ jsxs27(BasePopover.Popup, { className: cx("sc-popover", className), ...rest, children: [
+        arrow ? /* @__PURE__ */ jsx32(BasePopover.Arrow, { className: "sc-popover__arrow" }) : null,
         children
       ] })
     }
   ) });
 }
 function Title2({ className, ...rest }) {
-  return /* @__PURE__ */ jsx31(BasePopover.Title, { className: cx("sc-popover__title", className), ...rest });
+  return /* @__PURE__ */ jsx32(BasePopover.Title, { className: cx("sc-popover__title", className), ...rest });
 }
 function Description2({ className, ...rest }) {
-  return /* @__PURE__ */ jsx31(BasePopover.Description, { className: cx("sc-popover__description", className), ...rest });
+  return /* @__PURE__ */ jsx32(BasePopover.Description, { className: cx("sc-popover__description", className), ...rest });
 }
 function Close2({ className, children, render, ...rest }) {
   if (children === void 0 && render === void 0) {
-    return /* @__PURE__ */ jsx31(BasePopover.Close, { className: cx("sc-popover__close", className), "aria-label": "Close", ...rest, children: /* @__PURE__ */ jsx31(XIcon, {}) });
+    return /* @__PURE__ */ jsx32(BasePopover.Close, { className: cx("sc-popover__close", className), "aria-label": "Close", ...rest, children: /* @__PURE__ */ jsx32(XIcon, {}) });
   }
-  return /* @__PURE__ */ jsx31(BasePopover.Close, { className, render, ...rest, children });
+  return /* @__PURE__ */ jsx32(BasePopover.Close, { className, render, ...rest, children });
 }
 var Popover = { Root: Root6, Trigger: Trigger3, Content: Content3, Title: Title2, Description: Description2, Close: Close2 };
 
 // src/components/BroomIcon/BroomIcon.tsx
-import { jsx as jsx32, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs28 } from "react/jsx-runtime";
 function BroomIcon({ sweeping = false, size = "lg", title, className, ...rest }) {
-  return /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsxs28(
     "svg",
     {
       className: cx("sc-icon", "sc-broom", className),
@@ -2880,7 +3106,7 @@ function BroomIcon({ sweeping = false, size = "lg", title, className, ...rest })
       "aria-label": title,
       ...rest,
       children: [
-        /* @__PURE__ */ jsxs27(
+        /* @__PURE__ */ jsxs28(
           "g",
           {
             className: "sc-broom__body",
@@ -2889,18 +3115,18 @@ function BroomIcon({ sweeping = false, size = "lg", title, className, ...rest })
             strokeLinecap: "round",
             strokeLinejoin: "round",
             children: [
-              /* @__PURE__ */ jsx32("path", { d: "M16.1 10.48 L19.36 1.86 A0.87 0.87 0 0 1 20.98 2.47 L17.84 10.78" }),
-              /* @__PURE__ */ jsx32("path", { d: "M13.33 12 C14.23 10.67 16.73 9.87 18.17 11 C19.07 12.67 18.93 18.33 18.4 21.4 C16.07 22.4 11.07 22.07 6.4 18.07 C9.07 16.67 11.8 15 13.33 12 Z" }),
-              /* @__PURE__ */ jsx32("path", { className: "sc-broom__band", d: "M13.47 12.13 L18.4 13.5 L18.33 14.1 L13.27 12.77 Z" }),
-              /* @__PURE__ */ jsx32("path", { d: "M12.87 13.73 L14.4 14.47 M16.2 15.27 L18.47 15.87" }),
-              /* @__PURE__ */ jsx32("path", { d: "M12.8 16.87 C11.86 18.24 10.75 19.38 9.57 20.23 M15.6 17.4 C15.22 18.96 14.6 20.44 13.77 21.71" })
+              /* @__PURE__ */ jsx33("path", { d: "M16.1 10.48 L19.36 1.86 A0.87 0.87 0 0 1 20.98 2.47 L17.84 10.78" }),
+              /* @__PURE__ */ jsx33("path", { d: "M13.33 12 C14.23 10.67 16.73 9.87 18.17 11 C19.07 12.67 18.93 18.33 18.4 21.4 C16.07 22.4 11.07 22.07 6.4 18.07 C9.07 16.67 11.8 15 13.33 12 Z" }),
+              /* @__PURE__ */ jsx33("path", { className: "sc-broom__band", d: "M13.47 12.13 L18.4 13.5 L18.33 14.1 L13.27 12.77 Z" }),
+              /* @__PURE__ */ jsx33("path", { d: "M12.87 13.73 L14.4 14.47 M16.2 15.27 L18.47 15.87" }),
+              /* @__PURE__ */ jsx33("path", { d: "M12.8 16.87 C11.86 18.24 10.75 19.38 9.57 20.23 M15.6 17.4 C15.22 18.96 14.6 20.44 13.77 21.71" })
             ]
           }
         ),
-        /* @__PURE__ */ jsxs27("g", { className: "sc-broom__dust", fill: "none", stroke: "currentColor", children: [
-          /* @__PURE__ */ jsx32("circle", { cx: "4.77", cy: "13.53", r: "0.5" }),
-          /* @__PURE__ */ jsx32("circle", { cx: "2.7", cy: "15.53", r: "0.87" }),
-          /* @__PURE__ */ jsx32("circle", { cx: "4.1", cy: "18.27", r: "0.5" })
+        /* @__PURE__ */ jsxs28("g", { className: "sc-broom__dust", fill: "none", stroke: "currentColor", children: [
+          /* @__PURE__ */ jsx33("circle", { cx: "4.77", cy: "13.53", r: "0.5" }),
+          /* @__PURE__ */ jsx33("circle", { cx: "2.7", cy: "15.53", r: "0.87" }),
+          /* @__PURE__ */ jsx33("circle", { cx: "4.1", cy: "18.27", r: "0.5" })
         ] })
       ]
     }
@@ -2943,6 +3169,7 @@ export {
   ExternalLinkIcon,
   EyeIcon,
   FileInput,
+  FilePreviewDialog,
   FilterIcon,
   FlagIcon,
   Heading,