@page-speed/lightbox 0.0.1 → 0.0.2

package/dist/index.cjs

@@ -979,7 +979,7 @@ var require_react_development = __commonJS({
           }
           return lazyType;
         }
-        function forwardRef(render) {
+        function forwardRef2(render) {
           {
             if (render != null && render.$$typeof === REACT_MEMO_TYPE) {
               error("forwardRef requires a render function but received a `memo` component. Instead of forwardRef(memo(...)), use memo(forwardRef(...)).");
@@ -1040,7 +1040,7 @@ var require_react_development = __commonJS({
           }
           return false;
         }
-        function memo(type, compare) {
+        function memo2(type, compare) {
           {
             if (!isValidElementType(type)) {
               error("memo: The first argument must be a component. Instead received: %s", type === null ? "null" : typeof type);
@@ -1100,11 +1100,11 @@ var require_react_development = __commonJS({
           var dispatcher = resolveDispatcher();
           return dispatcher.useReducer(reducer, initialArg, init);
         }
-        function useRef4(initialValue) {
+        function useRef5(initialValue) {
           var dispatcher = resolveDispatcher();
           return dispatcher.useRef(initialValue);
         }
-        function useEffect7(create, deps) {
+        function useEffect10(create, deps) {
           var dispatcher = resolveDispatcher();
           return dispatcher.useEffect(create, deps);
         }
@@ -1120,11 +1120,11 @@ var require_react_development = __commonJS({
           var dispatcher = resolveDispatcher();
           return dispatcher.useCallback(callback, deps);
         }
-        function useMemo2(create, deps) {
+        function useMemo4(create, deps) {
           var dispatcher = resolveDispatcher();
           return dispatcher.useMemo(create, deps);
         }
-        function useImperativeHandle(ref, create, deps) {
+        function useImperativeHandle2(ref, create, deps) {
           var dispatcher = resolveDispatcher();
           return dispatcher.useImperativeHandle(ref, create, deps);
         }
@@ -1877,24 +1877,24 @@ var require_react_development = __commonJS({
         exports2.createElement = createElement$1;
         exports2.createFactory = createFactory;
         exports2.createRef = createRef;
-        exports2.forwardRef = forwardRef;
+        exports2.forwardRef = forwardRef2;
         exports2.isValidElement = isValidElement;
         exports2.lazy = lazy;
-        exports2.memo = memo;
+        exports2.memo = memo2;
         exports2.startTransition = startTransition;
         exports2.unstable_act = act;
         exports2.useCallback = useCallback7;
         exports2.useContext = useContext;
         exports2.useDebugValue = useDebugValue;
         exports2.useDeferredValue = useDeferredValue;
-        exports2.useEffect = useEffect7;
+        exports2.useEffect = useEffect10;
         exports2.useId = useId;
-        exports2.useImperativeHandle = useImperativeHandle;
+        exports2.useImperativeHandle = useImperativeHandle2;
         exports2.useInsertionEffect = useInsertionEffect;
         exports2.useLayoutEffect = useLayoutEffect;
-        exports2.useMemo = useMemo2;
+        exports2.useMemo = useMemo4;
         exports2.useReducer = useReducer;
-        exports2.useRef = useRef4;
+        exports2.useRef = useRef5;
         exports2.useState = useState9;
         exports2.useSyncExternalStore = useSyncExternalStore;
         exports2.useTransition = useTransition;
@@ -20878,11 +20878,11 @@ __export(dist_exports, {
   useZoom: () => useZoom
 });
 function usePDFDocument(url, onError) {
-  const [document2, setDocument] = (0, import_react5.useState)(null);
-  const [loading, setLoading] = (0, import_react5.useState)(true);
-  const [error, setError] = (0, import_react5.useState)(null);
-  const [pdfDoc, setPdfDoc] = (0, import_react5.useState)(null);
-  (0, import_react5.useEffect)(() => {
+  const [document2, setDocument] = (0, import_react9.useState)(null);
+  const [loading, setLoading] = (0, import_react9.useState)(true);
+  const [error, setError] = (0, import_react9.useState)(null);
+  const [pdfDoc, setPdfDoc] = (0, import_react9.useState)(null);
+  (0, import_react9.useEffect)(() => {
     if (!url) return;
     setLoading(true);
     setError(null);
@@ -20929,17 +20929,17 @@ function usePageState({
   totalPages,
   initialPage = 1
 }) {
-  const [currentPage, setCurrentPage] = (0, import_react6.useState)(
+  const [currentPage, setCurrentPage] = (0, import_react10.useState)(
     Math.max(1, Math.min(initialPage, totalPages))
   );
-  const goToPage = (0, import_react6.useCallback)((page) => {
+  const goToPage = (0, import_react10.useCallback)((page) => {
     const validPage = Math.max(1, Math.min(page, totalPages));
     setCurrentPage(validPage);
   }, [totalPages]);
-  const nextPage = (0, import_react6.useCallback)(() => {
+  const nextPage = (0, import_react10.useCallback)(() => {
     goToPage(currentPage + 1);
   }, [currentPage, goToPage]);
-  const prevPage = (0, import_react6.useCallback)(() => {
+  const prevPage = (0, import_react10.useCallback)(() => {
     goToPage(currentPage - 1);
   }, [currentPage, goToPage]);
   return {
@@ -20952,10 +20952,10 @@ function usePageState({
   };
 }
 function usePageRenderer(pdfDoc) {
-  const cacheRef = (0, import_react7.useRef)(/* @__PURE__ */ new Map());
-  const [rendering, setRendering] = (0, import_react7.useState)(false);
-  const [pageInfo, setPageInfo] = (0, import_react7.useState)(null);
-  const renderPage = (0, import_react7.useCallback)(
+  const cacheRef = (0, import_react11.useRef)(/* @__PURE__ */ new Map());
+  const [rendering, setRendering] = (0, import_react11.useState)(false);
+  const [pageInfo, setPageInfo] = (0, import_react11.useState)(null);
+  const renderPage = (0, import_react11.useCallback)(
     async (pageNumber, scale = DEFAULT_SCALE, rotation = 0) => {
       if (!pdfDoc) return null;
       try {
@@ -21014,21 +21014,21 @@ function usePageRenderer(pdfDoc) {
   return { renderPage, rendering, pageInfo };
 }
 function useZoom(initialZoom = 1.5) {
-  const [zoomLevel, setZoomLevel] = (0, import_react8.useState)(
+  const [zoomLevel, setZoomLevel] = (0, import_react12.useState)(
     typeof initialZoom === "number" ? initialZoom : 1.5
   );
-  const [zoomMode, setZoomMode] = (0, import_react8.useState)(
+  const [zoomMode, setZoomMode] = (0, import_react12.useState)(
     typeof initialZoom === "string" ? initialZoom : "custom"
   );
-  const zoomIn = (0, import_react8.useCallback)(() => {
+  const zoomIn = (0, import_react12.useCallback)(() => {
     setZoomLevel((prev) => Math.min(MAX_ZOOM, prev + ZOOM_STEP));
     setZoomMode("custom");
   }, []);
-  const zoomOut = (0, import_react8.useCallback)(() => {
+  const zoomOut = (0, import_react12.useCallback)(() => {
     setZoomLevel((prev) => Math.max(MIN_ZOOM, prev - ZOOM_STEP));
     setZoomMode("custom");
   }, []);
-  const setZoom = (0, import_react8.useCallback)((level) => {
+  const setZoom = (0, import_react12.useCallback)((level) => {
     if (typeof level === "number") {
       setZoomLevel(Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, level)));
       setZoomMode("custom");
@@ -21047,11 +21047,11 @@ function useZoom(initialZoom = 1.5) {
   };
 }
 function useSearch(pdfDoc) {
-  const [query, setQuery] = (0, import_react9.useState)("");
-  const [results, setResults] = (0, import_react9.useState)([]);
-  const [searching, setSearching] = (0, import_react9.useState)(false);
-  const [currentResultIndex, setCurrentResultIndex] = (0, import_react9.useState)(0);
-  const search = (0, import_react9.useCallback)(
+  const [query, setQuery] = (0, import_react13.useState)("");
+  const [results, setResults] = (0, import_react13.useState)([]);
+  const [searching, setSearching] = (0, import_react13.useState)(false);
+  const [currentResultIndex, setCurrentResultIndex] = (0, import_react13.useState)(0);
+  const search = (0, import_react13.useCallback)(
     async (searchText) => {
       if (!pdfDoc || !searchText.trim()) {
         setResults([]);
@@ -21088,10 +21088,10 @@ function useSearch(pdfDoc) {
     },
     [pdfDoc]
   );
-  const nextResult = (0, import_react9.useCallback)(() => {
+  const nextResult = (0, import_react13.useCallback)(() => {
     setCurrentResultIndex((prev) => (prev + 1) % results.length);
   }, [results.length]);
-  const prevResult = (0, import_react9.useCallback)(() => {
+  const prevResult = (0, import_react13.useCallback)(() => {
     setCurrentResultIndex((prev) => (prev - 1 + results.length) % results.length);
   }, [results.length]);
   return {
@@ -21110,9 +21110,9 @@ function PDFCanvas({
   scale,
   onRender
 }) {
-  const containerRef = (0, import_react10.useRef)(null);
-  const [canvas, setCanvas] = (0, import_react10.useState)(null);
-  (0, import_react10.useEffect)(() => {
+  const containerRef = (0, import_react14.useRef)(null);
+  const [canvas, setCanvas] = (0, import_react14.useState)(null);
+  (0, import_react14.useEffect)(() => {
     const render = async () => {
       const renderedCanvas = await onRender(pageNumber, scale, 0);
       if (renderedCanvas && containerRef.current) {
@@ -21127,7 +21127,7 @@ function PDFCanvas({
       render();
     }
   }, [pdfDoc, pageNumber, scale, onRender]);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref: containerRef, className: PDFViewer_default.canvas });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref: containerRef, className: PDFViewer_default.canvas });
 }
 function PDFControls({
   pageState,
@@ -21140,8 +21140,8 @@ function PDFControls({
   url
 }) {
   if (!pdfDocument) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: PDFViewer_default.controls, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: PDFViewer_default.controls, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "button",
       {
         onClick: pageState.prevPage,
@@ -21150,7 +21150,7 @@ function PDFControls({
         children: "<"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "input",
       {
         type: "number",
@@ -21161,11 +21161,11 @@ function PDFControls({
         className: PDFViewer_default.pageInput
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: PDFViewer_default.pageTotal, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: PDFViewer_default.pageTotal, children: [
       "of ",
       pdfDocument.numPages
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "button",
       {
         onClick: pageState.nextPage,
@@ -21174,7 +21174,7 @@ function PDFControls({
         children: ">"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "button",
       {
         onClick: zoom.zoomOut,
@@ -21183,11 +21183,11 @@ function PDFControls({
         children: "-"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: PDFViewer_default.zoomLevel, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: PDFViewer_default.zoomLevel, children: [
       Math.round(zoom.zoomLevel * 100),
       "%"
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "button",
       {
         onClick: zoom.zoomIn,
@@ -21196,7 +21196,7 @@ function PDFControls({
         children: "+"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "input",
       {
         type: "text",
@@ -21206,13 +21206,13 @@ function PDFControls({
         className: PDFViewer_default.searchInput
       }
     ),
-    search.results.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: PDFViewer_default.searchResults, children: [
+    search.results.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: PDFViewer_default.searchResults, children: [
       search.results.length,
       " results"
     ] }),
-    enableDownload && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("a", { href: url, download: true, className: PDFViewer_default.button, title: "Download", children: "Download" }),
-    enablePrint && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { onClick: () => window.print(), title: "Print", children: "Print" }),
-    enableFullscreen && typeof document !== "undefined" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    enableDownload && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("a", { href: url, download: true, className: PDFViewer_default.button, title: "Download", children: "Download" }),
+    enablePrint && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { onClick: () => window.print(), title: "Print", children: "Print" }),
+    enableFullscreen && typeof document !== "undefined" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "button",
       {
         onClick: () => {
@@ -21234,8 +21234,8 @@ function PDFThumbnails({
   onSelectPage,
   numPages
 }) {
-  const [thumbnails, setThumbnails] = (0, import_react11.useState)([]);
-  (0, import_react11.useEffect)(() => {
+  const [thumbnails, setThumbnails] = (0, import_react15.useState)([]);
+  (0, import_react15.useEffect)(() => {
     const generateThumbnails = async () => {
       if (!pdfDoc) return;
       const thumbs = [];
@@ -21264,13 +21264,13 @@ function PDFThumbnails({
     };
     generateThumbnails();
   }, [pdfDoc, numPages]);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: PDFViewer_default.thumbnails, children: thumbnails.map((thumb, idx) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: PDFViewer_default.thumbnails, children: thumbnails.map((thumb, idx) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "div",
     {
       className: `${PDFViewer_default.thumbnail} ${idx + 1 === currentPage ? PDFViewer_default.active : ""}`,
       onClick: () => onSelectPage(idx + 1),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "canvas",
           {
             width: thumb.width,
@@ -21285,7 +21285,7 @@ function PDFThumbnails({
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: PDFViewer_default.pageNumber, children: idx + 1 })
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: PDFViewer_default.pageNumber, children: idx + 1 })
       ]
     },
     idx
@@ -21322,35 +21322,35 @@ function PDFViewer({
   const { renderPage, pageInfo } = usePageRenderer(pdfDoc);
   const zoom = useZoom(initialZoom);
   const search = useSearch(pdfDoc);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (document2) {
       onDocumentLoad?.(document2);
     }
   }, [document2, onDocumentLoad]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     onPageChange?.(pageState.currentPage);
   }, [pageState.currentPage, onPageChange]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (search.results.length > 0) {
       onSearchResults?.(search.results);
     }
   }, [search.results, onSearchResults]);
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: PDFViewer_default.error, style: { height, width }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("p", { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: PDFViewer_default.error, style: { height, width }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("p", { children: [
       "Failed to load PDF: ",
       error.message
     ] }) });
   }
   if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: PDFViewer_default.loading, style: { height, width }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { children: "Loading PDF..." }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: PDFViewer_default.loading, style: { height, width }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { children: "Loading PDF..." }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "div",
     {
       className: `${PDFViewer_default.viewer} ${className || ""}`,
       style: { height, width, ...style },
       children: [
-        showControls && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        showControls && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           PDFControls,
           {
             pageState,
@@ -21363,8 +21363,8 @@ function PDFViewer({
             url
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: PDFViewer_default.content, children: [
-          showThumbnails && document2 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: PDFViewer_default.content, children: [
+          showThumbnails && document2 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             PDFThumbnails,
             {
               pdfDoc,
@@ -21373,7 +21373,7 @@ function PDFViewer({
               numPages: document2.numPages
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             PDFCanvas,
             {
               pdfDoc,
@@ -21451,22 +21451,22 @@ function createProgressiveFetchHandler(onProgress) {
     return response.arrayBuffer();
   };
 }
-var import_react4, import_react5, pdfjsLib, import_react6, import_react7, import_react8, import_react9, import_react10, import_jsx_runtime4, import_jsx_runtime5, import_react11, import_jsx_runtime6, import_jsx_runtime7, DEFAULT_SCALE, CACHE_SIZE, MIN_ZOOM, MAX_ZOOM, ZOOM_STEP, PDFViewer_default, linearizedPDFConfig;
+var import_react8, import_react9, pdfjsLib, import_react10, import_react11, import_react12, import_react13, import_react14, import_jsx_runtime5, import_jsx_runtime6, import_react15, import_jsx_runtime7, import_jsx_runtime8, DEFAULT_SCALE, CACHE_SIZE, MIN_ZOOM, MAX_ZOOM, ZOOM_STEP, PDFViewer_default, linearizedPDFConfig;
 var init_dist = __esm({
   "node_modules/.pnpm/@page-speed+pdf-viewer@0.0.2_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@page-speed/pdf-viewer/dist/index.js"() {
-    import_react4 = __toESM(require_react());
-    import_react5 = __toESM(require_react());
-    pdfjsLib = __toESM(require_pdf());
-    import_react6 = __toESM(require_react());
-    import_react7 = __toESM(require_react());
     import_react8 = __toESM(require_react());
     import_react9 = __toESM(require_react());
+    pdfjsLib = __toESM(require_pdf());
     import_react10 = __toESM(require_react());
-    import_jsx_runtime4 = __toESM(require_jsx_runtime());
-    import_jsx_runtime5 = __toESM(require_jsx_runtime());
     import_react11 = __toESM(require_react());
+    import_react12 = __toESM(require_react());
+    import_react13 = __toESM(require_react());
+    import_react14 = __toESM(require_react());
+    import_jsx_runtime5 = __toESM(require_jsx_runtime());
     import_jsx_runtime6 = __toESM(require_jsx_runtime());
+    import_react15 = __toESM(require_react());
     import_jsx_runtime7 = __toESM(require_jsx_runtime());
+    import_jsx_runtime8 = __toESM(require_jsx_runtime());
     if (typeof window !== "undefined") {
       pdfjsLib.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjsLib.version}/pdf.worker.min.js`;
     }
@@ -21523,7 +21523,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/components/Lightbox.tsx
-var import_react13 = __toESM(require_react());
+var import_react17 = __toESM(require_react());
 
 // src/hooks/useGalleryState.ts
 var import_react = __toESM(require_react());
@@ -21645,27 +21645,679 @@ function LightboxOverlay({
   );
 }
 
+// node_modules/.pnpm/@page-speed+img@0.4.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@page-speed/img/dist/core/Img.js
+var import_jsx_runtime2 = __toESM(require_jsx_runtime(), 1);
+var import_react7 = __toESM(require_react(), 1);
+
+// node_modules/.pnpm/@page-speed+hooks@0.4.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@page-speed/hooks/dist/chunk-JSF23IF7.js
+var import_react4 = __toESM(require_react(), 1);
+var BASE_URL = "https://octane.cdn.ing/api/v1/images/transform?";
+var DPR_MULTIPLIERS = [1, 2];
+function useOptimizedImage(options) {
+  const {
+    src,
+    eager = false,
+    threshold = 0.1,
+    rootMargin = "50px",
+    width,
+    height,
+    optixFlowConfig
+  } = options;
+  const optixFlowApiKey = (0, import_react4.useMemo)(() => {
+    return optixFlowConfig?.apiKey;
+  }, [optixFlowConfig?.apiKey]);
+  const useOptixFlow = (0, import_react4.useMemo)(() => {
+    return optixFlowApiKey ? true : false;
+  }, [optixFlowApiKey]);
+  const [state, setState] = (0, import_react4.useState)({
+    isLoaded: false,
+    isInView: false
+  });
+  const [size, setSize] = (0, import_react4.useState)({
+    width: width ?? 0,
+    height: height ?? 0
+  });
+  const imgRef = (0, import_react4.useRef)(null);
+  const observerRef = (0, import_react4.useRef)(null);
+  (0, import_react4.useEffect)(() => {
+    if (width !== void 0 || height !== void 0) {
+      setSize((prev) => ({
+        width: width ?? prev.width,
+        height: height ?? prev.height
+      }));
+    }
+  }, [width, height]);
+  (0, import_react4.useEffect)(() => {
+    if (!imgRef.current) return;
+    const calculateRenderedSize = () => {
+      const img2 = imgRef.current;
+      if (!img2) return;
+      const renderedWidth = width ?? (Math.round(img2.clientWidth) || img2.naturalWidth || 0);
+      const renderedHeight = height ?? (Math.round(img2.clientHeight) || img2.naturalHeight || 0);
+      if (renderedWidth > 0 || renderedHeight > 0) {
+        setSize((prev) => {
+          if (prev.width !== renderedWidth || prev.height !== renderedHeight) {
+            return { width: renderedWidth, height: renderedHeight };
+          }
+          return prev;
+        });
+      }
+    };
+    if (imgRef.current.clientWidth > 0) {
+      calculateRenderedSize();
+    }
+    const img = imgRef.current;
+    img.addEventListener("load", calculateRenderedSize);
+    let resizeObserver = null;
+    if (typeof ResizeObserver !== "undefined") {
+      resizeObserver = new ResizeObserver(() => {
+        calculateRenderedSize();
+      });
+      resizeObserver.observe(img);
+    }
+    return () => {
+      img.removeEventListener("load", calculateRenderedSize);
+      resizeObserver?.disconnect();
+    };
+  }, [width, height, state.isLoaded]);
+  const buildOptixFlowUrl = (0, import_react4.useCallback)(
+    (imgWidth, imgHeight, format) => {
+      if (!useOptixFlow) return src;
+      if (!imgWidth || !imgHeight) return src;
+      const params = new URLSearchParams();
+      params.set("url", src);
+      params.set("w", String(imgWidth));
+      params.set("h", String(imgHeight));
+      params.set("q", String(optixFlowConfig?.compressionLevel ?? 75));
+      params.set("f", format);
+      params.set("apiKey", optixFlowApiKey);
+      return `${BASE_URL}${params.toString()}`;
+    },
+    [useOptixFlow, src, optixFlowConfig?.compressionLevel, optixFlowApiKey]
+  );
+  const generateSrcset = (0, import_react4.useCallback)(
+    (baseWidth, baseHeight, format) => {
+      if (!useOptixFlow || baseWidth === 0 || baseHeight === 0) return "";
+      return DPR_MULTIPLIERS.map((dpr) => {
+        const scaledWidth = Math.round(baseWidth * dpr);
+        const scaledHeight = Math.round(baseHeight * dpr);
+        const url = buildOptixFlowUrl(scaledWidth, scaledHeight, format);
+        return `${url} ${dpr}x`;
+      }).join(", ");
+    },
+    [useOptixFlow, buildOptixFlowUrl]
+  );
+  const primarySrc = (0, import_react4.useMemo)(() => {
+    const hasDimensions = size.width > 0 && size.height > 0;
+    if (!useOptixFlow || !hasDimensions) return src;
+    const fallbackFormat = optixFlowConfig?.renderedFileType ?? "jpeg";
+    return buildOptixFlowUrl(size.width, size.height, fallbackFormat);
+  }, [useOptixFlow, src, size.width, size.height, optixFlowConfig?.renderedFileType, buildOptixFlowUrl]);
+  const srcset = (0, import_react4.useMemo)(() => {
+    return {
+      avif: generateSrcset(size.width, size.height, "avif"),
+      webp: generateSrcset(size.width, size.height, "webp"),
+      jpeg: generateSrcset(size.width, size.height, "jpeg")
+    };
+  }, [size.width, size.height, generateSrcset]);
+  const sizes = (0, import_react4.useMemo)(() => {
+    if (size.width === 0) return "";
+    return `${size.width}px`;
+  }, [size.width]);
+  (0, import_react4.useEffect)(() => {
+    if (typeof window === "undefined" || !imgRef.current) {
+      return;
+    }
+    if (eager) {
+      setState({ isLoaded: false, isInView: true });
+      return;
+    }
+    observerRef.current = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setState((prev) => ({ ...prev, isInView: true }));
+          observerRef.current?.disconnect();
+        }
+      },
+      { threshold, rootMargin }
+    );
+    observerRef.current.observe(imgRef.current);
+    return () => {
+      observerRef.current?.disconnect();
+    };
+  }, [eager, threshold, rootMargin]);
+  (0, import_react4.useEffect)(() => {
+    if (!imgRef.current) return;
+    const handleLoad = () => {
+      setState((prev) => ({ ...prev, isLoaded: true }));
+    };
+    const img = imgRef.current;
+    if (img.complete) {
+      handleLoad();
+    } else {
+      img.addEventListener("load", handleLoad);
+      return () => img.removeEventListener("load", handleLoad);
+    }
+  }, [state.isInView]);
+  const ref = (0, import_react4.useCallback)((node) => {
+    imgRef.current = node;
+  }, []);
+  const emptySrcset = { avif: "", webp: "", jpeg: "" };
+  return {
+    ref,
+    // Primary src uses exact rendered dimensions for Lighthouse "Properly size images" compliance
+    src: state.isInView || eager ? primarySrc : src,
+    // Srcset with format variants and DPR multipliers for <picture> element
+    srcset: state.isInView || eager ? srcset : emptySrcset,
+    // Sizes attribute for responsive image selection
+    sizes: state.isInView || eager ? sizes : "",
+    isLoaded: state.isLoaded,
+    isInView: state.isInView,
+    loading: eager ? "eager" : "lazy",
+    size
+  };
+}
+
+// node_modules/.pnpm/@page-speed+img@0.4.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@page-speed/img/dist/utils/cache.js
+var l2Cache = /* @__PURE__ */ new Map();
+function cacheGet(key) {
+  return l2Cache.get(key);
+}
+function cacheSet(key, value) {
+  l2Cache.set(key, value);
+}
+
+// node_modules/.pnpm/@page-speed+img@0.4.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@page-speed/img/dist/utils/api.js
+var DEFAULT_CDN_HOST = "https://cdn.ing";
+function normalizeHost(cdnHost) {
+  return (cdnHost ?? DEFAULT_CDN_HOST).replace(/\/$/, "");
+}
+function buildPrimaryImageUrl(mediaId, cdnHost) {
+  const host = normalizeHost(cdnHost);
+  return `${host}/assets/images/${mediaId}`;
+}
+function buildLegacyImageUrl(mediaId, cdnHost) {
+  const host = normalizeHost(cdnHost);
+  return `${host}/i/r/${mediaId}`;
+}
+function buildPlaceholderImageUrl(mediaId, cdnHost) {
+  const host = normalizeHost(cdnHost);
+  return `${host}/assets/low_res_thumb/${mediaId}`;
+}
+function hasRenderableUrlVariant(variant) {
+  if (!variant)
+    return false;
+  const candidates = [variant.sm, variant.md, variant.lg, variant.full];
+  return candidates.some((value) => typeof value === "string" && value.trim().length > 0);
+}
+function imageVariantsHaveRenderableSource(variants) {
+  if (!variants)
+    return false;
+  return ["AVIF", "WEBP", "JPEG"].some((format) => {
+    const entry = variants?.[format];
+    return hasRenderableUrlVariant(entry);
+  });
+}
+function hasUrlValue(value) {
+  return typeof value === "string" && value.trim().length > 0;
+}
+function imageDataHasRenderableSource(data) {
+  if (!data)
+    return false;
+  if (imageVariantsHaveRenderableSource(data.variants_data?.variants ?? null)) {
+    return true;
+  }
+  const raw = data;
+  const directFields = [
+    raw.img_url,
+    raw.file_data_url,
+    raw.file_data_thumbnail_url,
+    raw.img_src,
+    raw.med_src,
+    raw.thumb_src,
+    raw.low_res_thumb
+  ];
+  return directFields.some(hasUrlValue);
+}
+async function fetchFrom(url, signal) {
+  const res = await fetch(url, { signal });
+  if (!res.ok) {
+    const error = new Error(`Failed to fetch image data (status ${res.status}) from ${url}`);
+    error.status = res.status;
+    throw error;
+  }
+  return await res.json();
+}
+async function fetchImageData(mediaId, options = {}) {
+  if (!Number.isFinite(mediaId)) {
+    throw new Error("Invalid mediaId provided to fetchImageData");
+  }
+  const host = normalizeHost(options.cdnHost);
+  const cacheKey = `image:${host}:${mediaId}`;
+  if (!options.bypassCache) {
+    const cached = cacheGet(cacheKey);
+    if (cached)
+      return cached;
+  }
+  const urls = [buildPrimaryImageUrl(mediaId, host), buildLegacyImageUrl(mediaId, host)];
+  let lastError;
+  for (const url of urls) {
+    try {
+      const data = await fetchFrom(url, options.signal);
+      if (imageDataHasRenderableSource(data)) {
+        cacheSet(cacheKey, data);
+      }
+      return data;
+    } catch (err) {
+      if (err?.name === "AbortError") {
+        throw err;
+      }
+      lastError = err;
+    }
+  }
+  if (lastError instanceof Error) {
+    throw lastError;
+  }
+  throw new Error(`Failed to fetch image data for mediaId ${mediaId}`);
+}
+
+// node_modules/.pnpm/@page-speed+img@0.4.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@page-speed/img/dist/core/useMediaSelectionEffect.js
+var import_react5 = __toESM(require_react(), 1);
+var MEDIA_SELECTED_EVENT = "dt:media-selected";
+function useMediaSelectionEffect() {
+  (0, import_react5.useEffect)(() => {
+    if (typeof window === "undefined")
+      return;
+    const handler = () => {
+    };
+    window.addEventListener(MEDIA_SELECTED_EVENT, handler);
+    return () => window.removeEventListener(MEDIA_SELECTED_EVENT, handler);
+  }, []);
+}
+
+// node_modules/.pnpm/@page-speed+img@0.4.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@page-speed/img/dist/core/useResponsiveReset.js
+var import_react6 = __toESM(require_react(), 1);
+function resetResponsivePictureState(element) {
+  if (!element)
+    return;
+  element.querySelectorAll("source").forEach((source) => {
+    const srcset = source.getAttribute("srcset");
+    if (srcset) {
+      source.setAttribute("data-srcset", srcset);
+      source.removeAttribute("srcset");
+      requestAnimationFrame(() => {
+        source.setAttribute("srcset", srcset);
+      });
+    }
+  });
+}
+function useResponsiveReset(ref) {
+  (0, import_react6.useEffect)(() => {
+    const element = ref.current;
+    if (!element)
+      return;
+    if (element instanceof HTMLPictureElement) {
+      resetResponsivePictureState(element);
+    } else if (element.parentElement instanceof HTMLPictureElement) {
+      resetResponsivePictureState(element.parentElement);
+    }
+  }, [ref]);
+}
+
+// node_modules/.pnpm/@page-speed+img@0.4.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@page-speed/img/dist/core/Img.js
+var DEFAULT_WIDTHS = {
+  sm: 640,
+  md: 1024,
+  lg: 1536,
+  full: 2560
+};
+var MAX_VARIANT_REFRESH_ATTEMPTS = 5;
+var VARIANT_REFRESH_DELAY_MS = 3e3;
+var TRANSPARENT_PIXEL = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
+var defaultOptixFlowConfig;
+var deprecatedMediaWarnings = /* @__PURE__ */ new Set();
+var readGlobalOptixFlowConfig = () => {
+  if (typeof globalThis === "undefined")
+    return void 0;
+  const globalAny = globalThis;
+  return globalAny.PageSpeedImgDefaults?.optixFlowConfig || globalAny.OpensiteImgDefaults?.optixFlowConfig || globalAny.PAGE_SPEED_IMG_DEFAULTS?.optixFlowConfig;
+};
+var resolveOptixFlowConfig = (config) => {
+  return config ?? defaultOptixFlowConfig ?? readGlobalOptixFlowConfig();
+};
+var warnDeprecatedMediaId = (mediaId) => {
+  if (!Number.isFinite(mediaId) || mediaId == null)
+    return;
+  const id = mediaId;
+  if (deprecatedMediaWarnings.has(id))
+    return;
+  deprecatedMediaWarnings.add(id);
+  if (typeof console !== "undefined" && console.warn) {
+    console.warn("[DEPRECATED] <Img mediaId> is deprecated. Provide src + optixFlowConfig instead.", { mediaId: id });
+  }
+};
+var isUrlString = (value) => typeof value === "string" && value.trim().length > 0;
+var parseDimension = (value) => {
+  if (value === "" || value === null || typeof value === "undefined")
+    return void 0;
+  if (typeof value === "number" && Number.isFinite(value))
+    return value;
+  if (typeof value === "string") {
+    const numeric = Number(value);
+    if (Number.isFinite(numeric))
+      return numeric;
+  }
+  return void 0;
+};
+var composeRefs = (hookRef, forwardedRef, localRef) => (0, import_react7.useCallback)((node) => {
+  hookRef(node);
+  localRef.current = node;
+  if (typeof forwardedRef === "function") {
+    forwardedRef(node);
+  } else if (forwardedRef && typeof forwardedRef === "object") {
+    forwardedRef.current = node;
+  }
+}, [hookRef, forwardedRef, localRef]);
+function widthMapFromMetadata(v) {
+  const w = v?.widths;
+  if (!w)
+    return null;
+  return {
+    sm: w.small ?? w.sm ?? DEFAULT_WIDTHS.sm,
+    md: w.medium ?? w.md ?? DEFAULT_WIDTHS.md,
+    lg: w.large ?? w.lg ?? DEFAULT_WIDTHS.lg,
+    full: w.full_size ?? w.full ?? DEFAULT_WIDTHS.full
+  };
+}
+function pickBest(sizes) {
+  if (!sizes)
+    return void 0;
+  return sizes.md || sizes.lg || sizes.sm || sizes.full || Object.values(sizes).find(Boolean);
+}
+var DEFAULT_SIZES = "(max-width:640px) 640px, (max-width:1024px) 1024px, 1536px";
+var ModernImg = ({ sizes, loading, decoding, alt, title, src: directSrc, eager, intersectionMargin, intersectionThreshold, optixFlowConfig, forwardedRef, ...rest }) => {
+  const imgRef = (0, import_react7.useRef)(null);
+  const pictureRef = (0, import_react7.useRef)(null);
+  useResponsiveReset(pictureRef);
+  useMediaSelectionEffect();
+  const normalizedSrc = (0, import_react7.useMemo)(() => typeof directSrc === "string" ? directSrc.trim() : "", [directSrc]);
+  const numericWidth = (0, import_react7.useMemo)(() => parseDimension(rest.width), [rest]);
+  const numericHeight = (0, import_react7.useMemo)(() => parseDimension(rest.height), [rest]);
+  const resolvedOptixConfig = (0, import_react7.useMemo)(() => resolveOptixFlowConfig(optixFlowConfig), [optixFlowConfig]);
+  const eagerLoad = eager ?? loading === "eager";
+  const { ref: hookRef, src, srcset, sizes: computedSizes, loading: hookLoading, size } = useOptimizedImage({
+    src: normalizedSrc,
+    eager: eagerLoad,
+    width: numericWidth,
+    height: numericHeight,
+    rootMargin: intersectionMargin ?? "200px",
+    threshold: intersectionThreshold ?? 0.1,
+    optixFlowConfig: resolvedOptixConfig
+  });
+  const mergedRef = composeRefs(hookRef, forwardedRef, imgRef);
+  const { width, height, ...restProps } = rest;
+  const sizesAttr = sizes ?? (computedSizes || void 0);
+  const loadingAttr = loading ?? hookLoading ?? "lazy";
+  const decodingAttr = decoding ?? "async";
+  const hasSrcSet = Boolean(srcset.avif || srcset.webp || srcset.jpeg);
+  const imgSrc = src || normalizedSrc || TRANSPARENT_PIXEL;
+  const inlineSrcSet = hasSrcSet && !srcset.avif && !srcset.webp ? srcset.jpeg : "";
+  const parsedWidth = parseDimension(width);
+  const parsedHeight = parseDimension(height);
+  const widthAttr = parsedWidth ?? (size.width || numericWidth || void 0);
+  const heightAttr = parsedHeight ?? (size.height || numericHeight || void 0);
+  if (!hasSrcSet) {
+    return (0, import_jsx_runtime2.jsx)("img", { ref: mergedRef, src: imgSrc, loading: loadingAttr, decoding: decodingAttr, alt, title, width: widthAttr, height: heightAttr, ...restProps });
+  }
+  return (0, import_jsx_runtime2.jsxs)("picture", { ref: pictureRef, children: [srcset.avif ? (0, import_jsx_runtime2.jsx)("source", { type: "image/avif", srcSet: srcset.avif, sizes: sizesAttr }) : null, srcset.webp ? (0, import_jsx_runtime2.jsx)("source", { type: "image/webp", srcSet: srcset.webp, sizes: sizesAttr }) : null, (0, import_jsx_runtime2.jsx)("img", { ref: mergedRef, src: imgSrc, srcSet: inlineSrcSet || void 0, sizes: inlineSrcSet ? sizesAttr : void 0, loading: loadingAttr, decoding: decodingAttr, alt, title, width: widthAttr, height: heightAttr, ...restProps })] });
+};
+var LegacyImg = ({ mediaId, cdnHost, sizes, onImageData, loading, decoding, alt, title, src: directSrc, forwardedRef, ...rest }) => {
+  const imgRef = (0, import_react7.useRef)(null);
+  const pictureRef = (0, import_react7.useRef)(null);
+  (0, import_react7.useImperativeHandle)(forwardedRef, () => imgRef.current);
+  useResponsiveReset(pictureRef);
+  useMediaSelectionEffect();
+  const [data, setData] = (0, import_react7.useState)(null);
+  const [retryCount, setRetryCount] = (0, import_react7.useState)(0);
+  const hasMediaId = Number.isFinite(mediaId);
+  const loadingAttr = loading ?? "lazy";
+  const decodingAttr = decoding ?? "async";
+  const [isInView, setIsInView] = (0, import_react7.useState)(() => !hasMediaId || loadingAttr !== "lazy");
+  const cdnOrigin = (0, import_react7.useMemo)(() => (cdnHost ?? DEFAULT_CDN_HOST).replace(/\/$/, ""), [cdnHost]);
+  (0, import_react7.useEffect)(() => {
+    if (!hasMediaId) {
+      setData(null);
+      setRetryCount(0);
+      return;
+    }
+    setData(null);
+    setRetryCount(0);
+  }, [hasMediaId, mediaId, cdnHost]);
+  (0, import_react7.useEffect)(() => {
+    if (!hasMediaId) {
+      return;
+    }
+    const controller = new AbortController();
+    fetchImageData(mediaId, {
+      cdnHost,
+      signal: controller.signal,
+      bypassCache: retryCount > 0
+    }).then((d) => {
+      setData(d);
+      onImageData?.(d);
+    }).catch((err) => {
+      if (err?.name !== "AbortError") {
+        console.warn("Image data fetch failed:", err);
+      }
+    });
+    return () => controller.abort();
+  }, [hasMediaId, mediaId, cdnHost, onImageData, retryCount]);
+  (0, import_react7.useEffect)(() => {
+    if (!hasMediaId || loadingAttr !== "lazy") {
+      setIsInView(true);
+      return;
+    }
+    setIsInView(false);
+  }, [hasMediaId, mediaId, loadingAttr]);
+  (0, import_react7.useEffect)(() => {
+    if (!hasMediaId || loadingAttr !== "lazy" || isInView) {
+      return;
+    }
+    if (typeof window === "undefined" || typeof window.IntersectionObserver === "undefined") {
+      setIsInView(true);
+      return;
+    }
+    const node = imgRef.current;
+    if (!node) {
+      return;
+    }
+    const observer = new IntersectionObserver((entries) => {
+      if (entries.some((entry) => entry.isIntersecting)) {
+        setIsInView(true);
+        observer.disconnect();
+      }
+    }, { rootMargin: "200px" });
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [hasMediaId, loadingAttr, isInView]);
+  const picture = (0, import_react7.useMemo)(() => {
+    if (!data)
+      return null;
+    const v = data.variants_data?.variants ?? {};
+    const webp2 = v.WEBP;
+    const avif2 = v.AVIF;
+    const jpeg2 = v.JPEG;
+    const widths = widthMapFromMetadata(v.WEBP?.metadata) || widthMapFromMetadata(v.JPEG?.metadata) || { ...DEFAULT_WIDTHS };
+    const ensureAbsolute = (url) => {
+      if (!isUrlString(url))
+        return void 0;
+      if (/^https?:\/\//i.test(url) || url.startsWith("data:"))
+        return url;
+      if (url.startsWith("//"))
+        return `https:${url}`;
+      if (url.startsWith("/"))
+        return `${cdnOrigin}${url}`;
+      return `${cdnOrigin}/${url}`;
+    };
+    const normalizeCandidate = (candidate) => ensureAbsolute(typeof candidate === "string" ? candidate : void 0);
+    const variantCandidates = [
+      pickBest(webp2),
+      pickBest(jpeg2),
+      pickBest(avif2),
+      webp2?.sm,
+      webp2?.md,
+      webp2?.lg,
+      webp2?.full,
+      jpeg2?.sm,
+      jpeg2?.md,
+      jpeg2?.lg,
+      jpeg2?.full,
+      avif2?.sm,
+      avif2?.md,
+      avif2?.lg,
+      avif2?.full
+    ].map((candidate) => normalizeCandidate(candidate ?? void 0)).filter(isUrlString);
+    const raw = data;
+    const directCandidates = [
+      raw.img_url,
+      raw.file_data_url,
+      raw.file_data_thumbnail_url,
+      raw.img_src,
+      raw.med_src,
+      raw.thumb_src,
+      raw.low_res_thumb
+    ].map((candidate) => isUrlString(candidate) ? normalizeCandidate(candidate) : void 0).filter(isUrlString);
+    const fallbackCandidates = raw.fallback_url ? [normalizeCandidate(raw.fallback_url)].filter(isUrlString) : [];
+    const fallback2 = [...variantCandidates, ...directCandidates, ...fallbackCandidates][0];
+    if (!fallback2) {
+      return null;
+    }
+    const toSrcSet2 = (sizes2) => {
+      if (!sizes2)
+        return void 0;
+      const entries = [];
+      const push = (url, width) => {
+        const absolute = normalizeCandidate(url);
+        if (absolute && width)
+          entries.push(`${absolute} ${width}w`);
+      };
+      push(sizes2.sm, widths.sm);
+      push(sizes2.md, widths.md);
+      push(sizes2.lg, widths.lg);
+      push(sizes2.full, widths.full);
+      return entries.length ? entries.join(", ") : void 0;
+    };
+    return { webp: webp2, avif: avif2, jpeg: jpeg2, toSrcSet: toSrcSet2, fallback: fallback2, widths, hasVariantSource: variantCandidates.length > 0 };
+  }, [data, cdnOrigin]);
+  const hasVariantEntries = (0, import_react7.useMemo)(() => imageVariantsHaveRenderableSource(data?.variants_data?.variants ?? null), [data]);
+  const variantsStatus = (0, import_react7.useMemo)(() => {
+    const status = data?.variants_data?.status ?? data?.variants_status ?? "";
+    return typeof status === "string" ? status.toLowerCase() : "";
+  }, [data]);
+  const variantsFailed = variantsStatus === "failed" || variantsStatus === "error";
+  const shouldPollForVariants = hasMediaId && Boolean(data) && !variantsFailed && !hasVariantEntries && retryCount < MAX_VARIANT_REFRESH_ATTEMPTS;
+  (0, import_react7.useEffect)(() => {
+    if (!shouldPollForVariants) {
+      return;
+    }
+    if (typeof window === "undefined") {
+      return;
+    }
+    const timeoutId = window.setTimeout(() => {
+      setRetryCount((count) => count + 1);
+    }, VARIANT_REFRESH_DELAY_MS);
+    return () => window.clearTimeout(timeoutId);
+  }, [shouldPollForVariants]);
+  const altAttr = (0, import_react7.useMemo)(() => {
+    if (typeof alt === "string")
+      return alt;
+    return data?.meta?.content_manifest?.summary ?? void 0;
+  }, [alt, data]);
+  const titleAttr = (0, import_react7.useMemo)(() => {
+    if (typeof title === "string")
+      return title;
+    return data?.meta?.content_manifest?.title ?? void 0;
+  }, [title, data]);
+  const widthAttr = (0, import_react7.useMemo)(() => data?.meta?.sizing?.width ?? data?.variants_data?.metadata?.width ?? void 0, [data]);
+  const heightAttr = (0, import_react7.useMemo)(() => data?.meta?.sizing?.height ?? data?.variants_data?.metadata?.height ?? void 0, [data]);
+  const dataFilename = (0, import_react7.useMemo)(() => {
+    const base = data?.meta?.content_manifest?.optimized_filename;
+    if (!base)
+      return void 0;
+    const href = picture?.fallback;
+    if (!href)
+      return void 0;
+    const dot = href.lastIndexOf(".");
+    const ext = dot > -1 ? href.slice(dot + 1).toLowerCase() : "jpg";
+    return `${base}.${ext}`;
+  }, [data, picture]);
+  if (!hasMediaId) {
+    const r = { ...rest };
+    return (0, import_jsx_runtime2.jsx)("img", { ref: imgRef, src: directSrc, loading: loadingAttr, decoding: decodingAttr, alt: altAttr, title: titleAttr, width: r.width, height: r.height, ...r });
+  }
+  const placeholderSrc = buildPlaceholderImageUrl(mediaId, cdnHost);
+  if (!data || !picture || !isInView) {
+    const r = { ...rest };
+    return (0, import_jsx_runtime2.jsx)("img", { ref: imgRef, src: placeholderSrc, loading: loadingAttr, decoding: decodingAttr, alt: altAttr, title: titleAttr, width: r.width ?? widthAttr, height: r.height ?? heightAttr, ...r });
+  }
+  const sizesAttr = sizes ?? DEFAULT_SIZES;
+  const { webp, avif, jpeg, toSrcSet, fallback } = picture;
+  const webpSet = toSrcSet(webp);
+  const avifSet = toSrcSet(avif);
+  const jpegSet = toSrcSet(jpeg);
+  if (webpSet || avifSet || jpegSet) {
+    return (0, import_jsx_runtime2.jsxs)("picture", { children: [avifSet ? (0, import_jsx_runtime2.jsx)("source", { type: "image/avif", srcSet: avifSet, sizes: sizesAttr }) : null, webpSet ? (0, import_jsx_runtime2.jsx)("source", { type: "image/webp", srcSet: webpSet, sizes: sizesAttr }) : null, (0, import_jsx_runtime2.jsx)("img", { ref: imgRef, src: fallback, srcSet: jpegSet && !webpSet && !avifSet ? jpegSet : void 0, sizes: jpegSet && !webpSet && !avifSet ? sizesAttr : void 0, loading: loadingAttr, decoding: decodingAttr, alt: altAttr, title: titleAttr, width: widthAttr, height: heightAttr, "data-filename": dataFilename, ...rest })] });
+  }
+  return (0, import_jsx_runtime2.jsx)("img", { ref: imgRef, src: fallback, loading: loadingAttr, decoding: decodingAttr, alt: altAttr, title: titleAttr, width: widthAttr, height: heightAttr, "data-filename": dataFilename, ...rest });
+};
+var ImgBase = (0, import_react7.forwardRef)(function Img(props, ref) {
+  const hasMediaId = Number.isFinite(props.mediaId);
+  if (hasMediaId) {
+    warnDeprecatedMediaId(props.mediaId);
+    return (0, import_jsx_runtime2.jsx)(LegacyImg, { ...props, forwardedRef: ref });
+  }
+  const hasSrc = typeof props.src === "string" && props.src.trim().length > 0;
+  if (!hasSrc) {
+    if (typeof console !== "undefined" && console.warn) {
+      console.warn("<Img /> requires either src or mediaId. No src provided, rendering null.");
+    }
+    return null;
+  }
+  return (0, import_jsx_runtime2.jsx)(ModernImg, { ...props, forwardedRef: ref });
+});
+var Img2 = (0, import_react7.memo)(ImgBase);
+Img2.displayName = "PageSpeedImg";
+
 // src/renderers/ImageRenderer.tsx
-var import_jsx_runtime2 = __toESM(require_jsx_runtime());
-function ImageRenderer({ item }) {
+var import_jsx_runtime3 = __toESM(require_jsx_runtime());
+var toImgOptixFlowConfig = (config) => {
+  if (!config) return void 0;
+  const { compression, ...rest } = config;
+  const base = rest;
+  return {
+    ...base,
+    compressionLevel: typeof compression === "number" ? compression : base.compressionLevel
+  };
+};
+function ImageRenderer({ item, optixFlowConfig }) {
   if (!item.src) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    "img",
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    Img2,
     {
       className: Lightbox_default.media,
       src: item.src,
-      srcSet: item.srcSet,
       alt: item.alt || item.title || "",
-      loading: "lazy"
+      loading: "lazy",
+      optixFlowConfig: toImgOptixFlowConfig(optixFlowConfig)
     }
   );
 }
 
 // src/renderers/VideoRenderer.tsx
-var import_jsx_runtime3 = __toESM(require_jsx_runtime());
+var import_jsx_runtime4 = __toESM(require_jsx_runtime());
 function VideoRenderer({ item }) {
   if (!item.src) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "video",
     {
       className: Lightbox_default.media,
@@ -21677,8 +22329,8 @@ function VideoRenderer({ item }) {
 }
 
 // src/renderers/PDFRenderer.tsx
-var import_react12 = __toESM(require_react());
-var import_jsx_runtime8 = __toESM(require_jsx_runtime());
+var import_react16 = __toESM(require_react());
+var import_jsx_runtime9 = __toESM(require_jsx_runtime());
 function loadPDFViewer() {
   return Promise.resolve().then(() => (init_dist(), dist_exports)).then((mod) => ({
     // The PDF viewer package exposes a named PDFViewer export.
@@ -21686,47 +22338,54 @@ function loadPDFViewer() {
     default: mod.PDFViewer
   }));
 }
-var LazyPDFViewer = import_react12.default.lazy(loadPDFViewer);
+var LazyPDFViewer = import_react16.default.lazy(loadPDFViewer);
 var AnyPDFViewer = LazyPDFViewer;
 function PDFRenderer({ item }) {
   if (!item.src) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: Lightbox_default.pdfContainer, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    import_react12.Suspense,
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: Lightbox_default.pdfContainer, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    import_react16.Suspense,
     {
-      fallback: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: Lightbox_default.pdfFallback, children: "Loading document..." }),
-      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AnyPDFViewer, { url: item.src })
+      fallback: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: Lightbox_default.pdfFallback, children: "Loading document..." }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AnyPDFViewer, { url: item.src })
     }
   ) });
 }
 
 // src/renderers/ComponentRenderer.tsx
-var import_jsx_runtime9 = __toESM(require_jsx_runtime());
+var import_jsx_runtime10 = __toESM(require_jsx_runtime());
 function ComponentRenderer({ item }) {
   if (!item.component) return null;
   const Component = item.component;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Component, { ...item.data || {} });
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Component, { ...item.data || {} });
 }
 
 // src/components/LightboxContent.tsx
-var import_jsx_runtime10 = __toESM(require_jsx_runtime());
-function LightboxContent({ item, layout }) {
+var import_jsx_runtime11 = __toESM(require_jsx_runtime());
+function LightboxContent({ item, layout, optixFlowConfig }) {
   if (!item) return null;
   switch (item.type) {
     case "image":
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ImageRenderer, { item, layout });
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        ImageRenderer,
+        {
+          item,
+          layout,
+          optixFlowConfig
+        }
+      );
     case "video":
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(VideoRenderer, { item, layout });
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(VideoRenderer, { item, layout });
     case "pdf":
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PDFRenderer, { item, layout });
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PDFRenderer, { item, layout });
     case "component":
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ComponentRenderer, { item });
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ComponentRenderer, { item });
     default:
       return null;
   }
 }
 
 // src/components/LightboxChrome.tsx
-var import_jsx_runtime11 = __toESM(require_jsx_runtime());
+var import_jsx_runtime12 = __toESM(require_jsx_runtime());
 var DEFAULT_CONTROLS = {
   navigation: true,
   keyboard: true,
@@ -21756,9 +22415,9 @@ function LightboxChrome({
   onClose
 }) {
   const resolved = mergeControls(controls);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: Lightbox_default.chrome, children: [
-    resolved.navigation && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: Lightbox_default.chromeSection, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: Lightbox_default.chrome, children: [
+    resolved.navigation && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: Lightbox_default.chromeSection, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         "button",
         {
           type: "button",
@@ -21769,7 +22428,7 @@ function LightboxChrome({
           children: "\u2039"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         "button",
         {
           type: "button",
@@ -21781,17 +22440,17 @@ function LightboxChrome({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: Lightbox_default.chromeSection, children: resolved.captions && currentItem && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: Lightbox_default.captionContainer, children: [
-      currentItem.title && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: Lightbox_default.captionTitle, children: currentItem.title }),
-      currentItem.caption && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: Lightbox_default.captionText, children: currentItem.caption })
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: Lightbox_default.chromeSection, children: resolved.captions && currentItem && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: Lightbox_default.captionContainer, children: [
+      currentItem.title && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: Lightbox_default.captionTitle, children: currentItem.title }),
+      currentItem.caption && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: Lightbox_default.captionText, children: currentItem.caption })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: Lightbox_default.chromeSection, children: [
-      resolved.counter && totalItems > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: Lightbox_default.counter, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: Lightbox_default.chromeSection, children: [
+      resolved.counter && totalItems > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: Lightbox_default.counter, children: [
         currentIndex + 1,
         " / ",
         totalItems
       ] }),
-      resolved.closeButton && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      resolved.closeButton && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         "button",
         {
           type: "button",
@@ -21806,7 +22465,7 @@ function LightboxChrome({
 }
 
 // src/components/Layouts/HorizontalLayout.tsx
-var import_jsx_runtime12 = __toESM(require_jsx_runtime());
+var import_jsx_runtime13 = __toESM(require_jsx_runtime());
 function HorizontalLayout({
   content,
   chrome,
@@ -21820,7 +22479,7 @@ function HorizontalLayout({
     height,
     ...style
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: Lightbox_default.horizontalLayoutRoot, style: containerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: Lightbox_default.horizontalLayoutRoot, style: containerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     "div",
     {
       className: [
@@ -21828,15 +22487,15 @@ function HorizontalLayout({
         className || ""
       ].join(" ").trim(),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: Lightbox_default.mainContent, children: content }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: Lightbox_default.toolbar, children: chrome })
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: Lightbox_default.mainContent, children: content }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: Lightbox_default.toolbar, children: chrome })
       ]
     }
   ) });
 }
 
 // src/components/Lightbox.tsx
-var import_jsx_runtime13 = __toESM(require_jsx_runtime());
+var import_jsx_runtime14 = __toESM(require_jsx_runtime());
 function Lightbox(props) {
   const { items, initialIndex = 0 } = props;
   const gallery = useGalleryState({
@@ -21845,14 +22504,14 @@ function Lightbox(props) {
     onSelect: props.onSelect
   });
   const { breakpoint } = useResponsiveness();
-  const layout = (0, import_react13.useMemo)(() => {
+  const layout = (0, import_react17.useMemo)(() => {
     if (props.layout) return props.layout;
     if (breakpoint === "mobile") return "fullscreen";
     if (breakpoint === "tablet") return "vertical-split";
     return "horizontal";
   }, [props.layout, breakpoint]);
-  const didCloseRef = (0, import_react13.useRef)(false);
-  (0, import_react13.useEffect)(() => {
+  const didCloseRef = (0, import_react17.useRef)(false);
+  (0, import_react17.useEffect)(() => {
     props.onOpen?.();
     if (props.disableScroll === false) {
       return () => {
@@ -21877,17 +22536,17 @@ function Lightbox(props) {
       }
     };
   }, [props.disableScroll, props.onOpen, props.onClose]);
-  const handleClose = (0, import_react13.useCallback)(() => {
+  const handleClose = (0, import_react17.useCallback)(() => {
     if (didCloseRef.current) return;
     didCloseRef.current = true;
     props.onClose?.();
   }, [props.onClose]);
-  const handleNext = (0, import_react13.useCallback)(() => {
+  const handleNext = (0, import_react17.useCallback)(() => {
     if (!gallery.canNext) return;
     gallery.next();
     props.onNext?.();
   }, [gallery, props.onNext]);
-  const handlePrev = (0, import_react13.useCallback)(() => {
+  const handlePrev = (0, import_react17.useCallback)(() => {
     if (!gallery.canPrev) return;
     gallery.prev();
     props.onPrev?.();
@@ -21913,19 +22572,26 @@ function Lightbox(props) {
     captions: true,
     ...props.controls
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: Lightbox_default.lightboxPortal, role: "dialog", "aria-modal": "true", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: Lightbox_default.lightboxPortal, role: "dialog", "aria-modal": "true", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       LightboxOverlay,
       {
         onClose: handleClose,
         closeOnBackdropClick: props.closeOnBackdropClick ?? true
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       HorizontalLayout,
       {
-        content: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(LightboxContent, { item: currentItem, layout }),
-        chrome: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        content: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          LightboxContent,
+          {
+            item: currentItem,
+            layout,
+            optixFlowConfig: props.optixFlowConfig
+          }
+        ),
+        chrome: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           LightboxChrome,
           {
             currentIndex: gallery.currentIndex,
@@ -21949,28 +22615,28 @@ function Lightbox(props) {
 }
 
 // src/hooks/useLightboxState.ts
-var import_react14 = __toESM(require_react());
+var import_react18 = __toESM(require_react());
 function useLightboxState({
   onOpen,
   onClose,
   disableScroll = true
 }) {
-  const [isOpen, setIsOpen] = (0, import_react14.useState)(false);
-  const open = (0, import_react14.useCallback)(() => {
+  const [isOpen, setIsOpen] = (0, import_react18.useState)(false);
+  const open = (0, import_react18.useCallback)(() => {
     setIsOpen(true);
     onOpen?.();
     if (disableScroll) {
       document.body.style.overflow = "hidden";
     }
   }, [onOpen, disableScroll]);
-  const close = (0, import_react14.useCallback)(() => {
+  const close = (0, import_react18.useCallback)(() => {
     setIsOpen(false);
     onClose?.();
     if (disableScroll) {
       document.body.style.overflow = "";
     }
   }, [onClose, disableScroll]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     return () => {
       if (disableScroll) {
         document.body.style.overflow = "";