@12-apps/ui 5.0.0 → 5.0.1

package/dist/data-display/Lightbox.js

@@ -0,0 +1,795 @@
+import "../chunk-PZ5AY32C.js";
+
+// src/components/data-display/Lightbox/Lightbox.tsx
+import { Dialog, Fade, Typography as Typography2 } from "@mui/material";
+import React from "react";
+
+// src/components/data-display/Lightbox/Lightbox.constants.ts
+var MIN_ZOOM = 0.5;
+var MAX_ZOOM = 5;
+var ZOOM_STEP = 1.2;
+var WHEEL_ZOOM_FACTOR = 0.01;
+var DEFAULT_AUTOPLAY_INTERVAL_MS = 4e3;
+var MIN_SWIPE_DISTANCE = 50;
+var OVERLAY_Z_INDEX = 1e3;
+var SCRIM = "rgba(0, 0, 0, 0.5)";
+var SCRIM_HOVER = "rgba(0, 0, 0, 0.7)";
+var overlayButtonSx = {
+  color: "white",
+  backgroundColor: SCRIM,
+  "&:hover": { backgroundColor: SCRIM_HOVER }
+};
+var navButtonSx = {
+  color: "white",
+  backgroundColor: SCRIM,
+  "&:hover:not(:disabled)": { backgroundColor: SCRIM_HOVER },
+  "&:disabled": { color: "rgba(255, 255, 255, 0.3)" }
+};
+var captionSx = {
+  color: "white",
+  textAlign: "center",
+  backgroundColor: SCRIM_HOVER,
+  borderRadius: 1
+};
+var counterSx = {
+  color: "white",
+  fontSize: "0.875rem",
+  backgroundColor: SCRIM,
+  borderRadius: 1
+};
+var thumbnailStripSx = {
+  background: SCRIM,
+  borderRadius: 1
+};
+var makeTestId = (dataTestId) => (suffix) => dataTestId ? `${dataTestId}-${suffix}` : `lightbox-${suffix}`;
+
+// src/components/data-display/Lightbox/Lightbox.helpers.ts
+var LIGHTBOX_DEFAULTS = {
+  isOpen: false,
+  items: [],
+  startIndex: 0,
+  showControls: true,
+  showCaptions: true,
+  loop: false,
+  autoplay: false,
+  thumbnails: false,
+  zoomable: true
+};
+var definedProps = (props) => Object.fromEntries(
+  Object.entries(props).filter(([, value]) => value !== void 0)
+);
+var resolveLightboxProps = (props) => ({ ...LIGHTBOX_DEFAULTS, ...definedProps(props) });
+
+// src/components/data-display/Lightbox/LightboxMedia.tsx
+import { jsx } from "react/jsx-runtime";
+var cursorFor = (zoomLevel, zoomable) => {
+  if (zoomLevel > 1) return "move";
+  return zoomable ? "zoom-in" : "default";
+};
+var LightboxMedia = ({
+  item,
+  index,
+  total,
+  zoomLevel,
+  panOffset,
+  zoomable,
+  isDragging,
+  testId,
+  onLoadStart,
+  onLoaded,
+  onWheel,
+  onDoubleClick
+}) => {
+  if (item.type === "video") {
+    return /* @__PURE__ */ jsx(
+      "video",
+      {
+        src: item.src,
+        controls: true,
+        style: { maxWidth: "90vw", maxHeight: "80vh", objectFit: "contain" },
+        onLoadStart,
+        onLoadedData: onLoaded,
+        "aria-label": item.alt || `Video ${index + 1} of ${total}`,
+        "data-testid": testId("video")
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: item.src,
+      alt: item.alt || `Image ${index + 1} of ${total}`,
+      style: {
+        // At 1x the image is bounded by the viewport; once zoomed it is allowed
+        // to overflow so there is something to pan around.
+        maxWidth: zoomLevel === 1 ? "90vw" : "none",
+        maxHeight: zoomLevel === 1 ? "80vh" : "none",
+        transform: `scale(${zoomLevel}) translate(${panOffset.x}px, ${panOffset.y}px)`,
+        transformOrigin: "center",
+        cursor: cursorFor(zoomLevel, zoomable),
+        transition: isDragging ? "none" : "transform 0.2s ease",
+        objectFit: "contain"
+      },
+      onLoad: onLoaded,
+      onWheel,
+      onDoubleClick,
+      draggable: false,
+      "data-testid": testId("image")
+    }
+  );
+};
+
+// src/components/data-display/Lightbox/LightboxCurrentMedia.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var LightboxCurrentMedia = ({
+  item,
+  index,
+  total,
+  zoomable,
+  zoom,
+  testId,
+  onLoadingChange,
+  onWheel
+}) => {
+  if (!item) return null;
+  return /* @__PURE__ */ jsx2(
+    LightboxMedia,
+    {
+      item,
+      index,
+      total,
+      zoomLevel: zoom.zoomLevel,
+      panOffset: zoom.panOffset,
+      zoomable,
+      isDragging: false,
+      testId,
+      onLoadStart: () => onLoadingChange(true),
+      onLoaded: () => onLoadingChange(false),
+      onWheel,
+      onDoubleClick: zoom.zoomLevel > 1 ? zoom.resetZoom : zoom.zoomIn
+    }
+  );
+};
+
+// src/components/data-display/Lightbox/LightboxControls.tsx
+import PrevIcon from "@mui/icons-material/ChevronLeft";
+import NextIcon from "@mui/icons-material/ChevronRight";
+import CloseIcon from "@mui/icons-material/Close";
+import PauseIcon from "@mui/icons-material/Pause";
+import PlayIcon from "@mui/icons-material/PlayArrow";
+import ResetZoomIcon from "@mui/icons-material/RestartAlt";
+import ZoomInIcon from "@mui/icons-material/ZoomIn";
+import ZoomOutIcon from "@mui/icons-material/ZoomOut";
+import { Box, IconButton } from "@mui/material";
+import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
+var LightboxCloseButton = ({
+  testId,
+  onClose
+}) => /* @__PURE__ */ jsx3(
+  IconButton,
+  {
+    onClick: onClose,
+    sx: { ...overlayButtonSx, position: "absolute", top: 16, right: 16, zIndex: OVERLAY_Z_INDEX },
+    "aria-label": "Close lightbox",
+    "data-testid": testId("close"),
+    children: /* @__PURE__ */ jsx3(CloseIcon, {})
+  }
+);
+var arrowSx = (side) => ({
+  ...navButtonSx,
+  position: "absolute",
+  [side]: 16,
+  top: "50%",
+  transform: "translateY(-50%)",
+  zIndex: OVERLAY_Z_INDEX
+});
+var LightboxNavButtons = ({
+  testId,
+  atStart,
+  atEnd,
+  onPrev,
+  onNext
+}) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx3(
+    IconButton,
+    {
+      onClick: onPrev,
+      disabled: atStart,
+      sx: arrowSx("left"),
+      "aria-label": "Previous item",
+      "data-testid": testId("prev"),
+      children: /* @__PURE__ */ jsx3(PrevIcon, {})
+    }
+  ),
+  /* @__PURE__ */ jsx3(
+    IconButton,
+    {
+      onClick: onNext,
+      disabled: atEnd,
+      sx: arrowSx("right"),
+      "aria-label": "Next item",
+      "data-testid": testId("next"),
+      children: /* @__PURE__ */ jsx3(NextIcon, {})
+    }
+  )
+] });
+var LightboxZoomControls = ({
+  testId,
+  onZoomIn,
+  onZoomOut,
+  onResetZoom
+}) => /* @__PURE__ */ jsxs(
+  Box,
+  {
+    sx: {
+      position: "absolute",
+      top: 16,
+      left: 16,
+      display: "flex",
+      flexDirection: "column",
+      gap: 1,
+      zIndex: OVERLAY_Z_INDEX
+    },
+    "data-testid": testId("zoom-controls"),
+    children: [
+      /* @__PURE__ */ jsx3(IconButton, { onClick: onZoomIn, sx: overlayButtonSx, "aria-label": "Zoom in", "data-testid": testId("zoom-in"), children: /* @__PURE__ */ jsx3(ZoomInIcon, {}) }),
+      /* @__PURE__ */ jsx3(
+        IconButton,
+        {
+          onClick: onZoomOut,
+          sx: overlayButtonSx,
+          "aria-label": "Zoom out",
+          "data-testid": testId("zoom-out"),
+          children: /* @__PURE__ */ jsx3(ZoomOutIcon, {})
+        }
+      ),
+      /* @__PURE__ */ jsx3(
+        IconButton,
+        {
+          onClick: onResetZoom,
+          sx: overlayButtonSx,
+          "aria-label": "Reset zoom",
+          "data-testid": testId("zoom-reset"),
+          children: /* @__PURE__ */ jsx3(ResetZoomIcon, {})
+        }
+      )
+    ]
+  }
+);
+var LightboxAutoplayButton = ({
+  testId,
+  isAutoPlaying,
+  onToggle
+}) => /* @__PURE__ */ jsx3(
+  IconButton,
+  {
+    onClick: onToggle,
+    sx: {
+      ...overlayButtonSx,
+      position: "absolute",
+      top: 16,
+      left: "50%",
+      transform: "translateX(-50%)",
+      zIndex: OVERLAY_Z_INDEX
+    },
+    "aria-label": isAutoPlaying ? "Pause slideshow" : "Start slideshow",
+    "data-testid": testId("autoplay"),
+    children: isAutoPlaying ? /* @__PURE__ */ jsx3(PauseIcon, {}) : /* @__PURE__ */ jsx3(PlayIcon, {})
+  }
+);
+
+// src/components/data-display/Lightbox/LightboxOverlay.tsx
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var LightboxOverlay = ({
+  testId,
+  itemCount,
+  currentIndex,
+  showControls,
+  loop,
+  autoplay,
+  canZoom,
+  isAutoPlaying,
+  onClose,
+  onPrev,
+  onNext,
+  onZoomIn,
+  onZoomOut,
+  onResetZoom,
+  onToggleAutoplay
+}) => {
+  const hasMultiple = itemCount > 1;
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx4(LightboxCloseButton, { testId, onClose }),
+    showControls && hasMultiple && /* @__PURE__ */ jsx4(
+      LightboxNavButtons,
+      {
+        testId,
+        atStart: !loop && currentIndex === 0,
+        atEnd: !loop && currentIndex === itemCount - 1,
+        onPrev,
+        onNext
+      }
+    ),
+    canZoom && /* @__PURE__ */ jsx4(
+      LightboxZoomControls,
+      {
+        testId,
+        onZoomIn,
+        onZoomOut,
+        onResetZoom
+      }
+    ),
+    autoplay && hasMultiple && /* @__PURE__ */ jsx4(
+      LightboxAutoplayButton,
+      {
+        testId,
+        isAutoPlaying,
+        onToggle: onToggleAutoplay
+      }
+    )
+  ] });
+};
+
+// src/components/data-display/Lightbox/LightboxStage.tsx
+import { Box as Box2, CircularProgress, DialogContent, Typography } from "@mui/material";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var LightboxStage = ({
+  items,
+  currentItem,
+  currentIndex,
+  isLoading,
+  showCaptions,
+  thumbnails,
+  testId,
+  media,
+  thumbnailStrip
+}) => /* @__PURE__ */ jsxs3(
+  DialogContent,
+  {
+    sx: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      padding: 0,
+      position: "relative",
+      height: "100vh",
+      overflow: "hidden"
+    },
+    "data-testid": testId("content"),
+    children: [
+      isLoading && /* @__PURE__ */ jsx5(
+        CircularProgress,
+        {
+          sx: { position: "absolute", color: "white", zIndex: 999 },
+          "data-testid": testId("loading")
+        }
+      ),
+      /* @__PURE__ */ jsx5(
+        Box2,
+        {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: "100%",
+            height: "100%"
+          },
+          "data-testid": testId("image-container"),
+          children: media
+        }
+      ),
+      showCaptions && currentItem?.caption && /* @__PURE__ */ jsx5(
+        Typography,
+        {
+          id: "lightbox-description",
+          sx: {
+            ...captionSx,
+            position: "absolute",
+            // Sit above the filmstrip when there is one.
+            bottom: thumbnails ? 120 : 16,
+            left: "50%",
+            transform: "translateX(-50%)",
+            maxWidth: "80vw",
+            padding: 2
+          },
+          "data-testid": testId("caption"),
+          children: currentItem.caption
+        }
+      ),
+      items.length > 1 && /* @__PURE__ */ jsxs3(
+        Typography,
+        {
+          sx: { ...counterSx, position: "absolute", top: 70, right: 16, padding: "4px 8px" },
+          "aria-live": "polite",
+          "data-testid": testId("counter"),
+          children: [
+            currentIndex + 1,
+            " / ",
+            items.length
+          ]
+        }
+      ),
+      thumbnailStrip
+    ]
+  }
+);
+
+// src/components/data-display/Lightbox/LightboxThumbnails.tsx
+import PlayIcon2 from "@mui/icons-material/PlayArrow";
+import { Box as Box3 } from "@mui/material";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var THUMB_WIDTH = 60;
+var THUMB_HEIGHT = 40;
+var VideoThumbnail = () => /* @__PURE__ */ jsx6(
+  Box3,
+  {
+    sx: {
+      width: "100%",
+      height: "100%",
+      background: "rgba(255, 255, 255, 0.1)",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    children: /* @__PURE__ */ jsx6(PlayIcon2, { sx: { color: "white", fontSize: 16 } })
+  }
+);
+var LightboxThumbnails = ({
+  items,
+  currentIndex,
+  testId,
+  onSelect
+}) => /* @__PURE__ */ jsx6(
+  Box3,
+  {
+    sx: {
+      ...thumbnailStripSx,
+      position: "absolute",
+      bottom: 16,
+      left: "50%",
+      transform: "translateX(-50%)",
+      display: "flex",
+      gap: 1,
+      maxWidth: "90vw",
+      overflowX: "auto",
+      padding: 1
+    },
+    "data-testid": testId("thumbnails"),
+    children: items.map((item, index) => /* @__PURE__ */ jsx6(
+      Box3,
+      {
+        onClick: () => onSelect(index),
+        sx: {
+          width: THUMB_WIDTH,
+          height: THUMB_HEIGHT,
+          cursor: "pointer",
+          border: currentIndex === index ? "2px solid white" : "2px solid transparent",
+          borderRadius: 0.5,
+          overflow: "hidden",
+          flexShrink: 0,
+          "&:hover": { border: "2px solid rgba(255, 255, 255, 0.7)" }
+        },
+        "data-testid": testId(`thumbnail-${index}`),
+        children: item.type === "video" ? /* @__PURE__ */ jsx6(VideoThumbnail, {}) : /* @__PURE__ */ jsx6(
+          "img",
+          {
+            src: item.src,
+            alt: item.alt || `Thumbnail ${index + 1}`,
+            style: { width: "100%", height: "100%", objectFit: "cover" }
+          }
+        )
+      },
+      `${item.src}-${index}`
+    ))
+  }
+);
+
+// src/components/data-display/Lightbox/useLightbox.ts
+import { useCallback as useCallback2, useImperativeHandle, useState as useState2 } from "react";
+
+// src/components/data-display/Lightbox/Lightbox.hooks.ts
+import { useCallback, useEffect, useRef, useState } from "react";
+var clampZoom = (zoom) => Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, zoom));
+var isImageItem = (item) => Boolean(item && (item.type === "image" || !item.type));
+var usePreloader = () => {
+  const [preloadedImages, setPreloadedImages] = useState(/* @__PURE__ */ new Set());
+  return useCallback(
+    (src) => {
+      if (preloadedImages.has(src)) return;
+      const img = new window.Image();
+      img.onload = () => setPreloadedImages((prev) => /* @__PURE__ */ new Set([...prev, src]));
+      img.src = src;
+    },
+    [preloadedImages]
+  );
+};
+var useZoomState = () => {
+  const [zoomLevel, setZoomLevel] = useState(1);
+  const [panOffset, setPanOffset] = useState({ x: 0, y: 0 });
+  const resetZoom = useCallback(() => {
+    setZoomLevel(1);
+    setPanOffset({ x: 0, y: 0 });
+  }, []);
+  const zoomIn = useCallback(() => setZoomLevel((prev) => Math.min(MAX_ZOOM, prev * ZOOM_STEP)), []);
+  const zoomOut = useCallback(
+    () => setZoomLevel((prev) => Math.max(MIN_ZOOM, prev / ZOOM_STEP)),
+    []
+  );
+  return { zoomLevel, panOffset, setZoomLevel, resetZoom, zoomIn, zoomOut };
+};
+var useWheelZoom = ({
+  enabled,
+  setZoomLevel
+}) => useCallback(
+  (event) => {
+    if (!enabled) return;
+    event.preventDefault();
+    setZoomLevel((prev) => clampZoom(prev + event.deltaY * -WHEEL_ZOOM_FACTOR));
+  },
+  [enabled, setZoomLevel]
+);
+var useNavigation = ({
+  items,
+  loop,
+  startIndex,
+  resetZoom,
+  preloadImage
+}) => {
+  const [currentIndex, setCurrentIndex] = useState(
+    Math.max(0, Math.min(startIndex, items.length - 1))
+  );
+  const goToIndex = useCallback(
+    (index) => {
+      if (items.length === 0) return;
+      const newIndex = loop ? (index % items.length + items.length) % items.length : Math.max(0, Math.min(index, items.length - 1));
+      setCurrentIndex(newIndex);
+      resetZoom();
+      [items[newIndex - 1], items[newIndex + 1]].filter(isImageItem).forEach((item) => preloadImage(item.src));
+    },
+    [items, loop, resetZoom, preloadImage]
+  );
+  const next = useCallback(() => {
+    if (currentIndex < items.length - 1 || loop) goToIndex(currentIndex + 1);
+  }, [currentIndex, items.length, loop, goToIndex]);
+  const prev = useCallback(() => {
+    if (currentIndex > 0 || loop) goToIndex(currentIndex - 1);
+  }, [currentIndex, loop, goToIndex]);
+  return { currentIndex, goToIndex, next, prev };
+};
+var useAutoplay = ({
+  isOpen,
+  autoplay,
+  itemCount,
+  currentIndex,
+  next
+}) => {
+  const [isAutoPlaying, setIsAutoPlaying] = useState(false);
+  const timerRef = useRef(void 0);
+  useEffect(() => {
+    if (!isAutoPlaying || !autoplay || itemCount <= 1) return;
+    const interval = typeof autoplay === "object" ? autoplay.interval || DEFAULT_AUTOPLAY_INTERVAL_MS : DEFAULT_AUTOPLAY_INTERVAL_MS;
+    timerRef.current = window.setTimeout(next, interval);
+    return () => window.clearTimeout(timerRef.current);
+  }, [isAutoPlaying, autoplay, currentIndex, next, itemCount]);
+  useEffect(() => {
+    setIsAutoPlaying(Boolean(isOpen && autoplay && itemCount > 1));
+  }, [isOpen, autoplay, itemCount]);
+  const stopAutoplay = useCallback(() => {
+    setIsAutoPlaying(false);
+    window.clearTimeout(timerRef.current);
+  }, []);
+  return { isAutoPlaying, setIsAutoPlaying, stopAutoplay };
+};
+var useLightboxKeyboard = ({
+  isOpen,
+  showControls,
+  autoplay,
+  close,
+  prev,
+  next,
+  setIsAutoPlaying
+}) => {
+  useEffect(() => {
+    if (!isOpen) return;
+    const arrows = { ArrowLeft: prev, ArrowRight: next };
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        close();
+        return;
+      }
+      const arrow = arrows[event.key];
+      if (arrow && showControls) {
+        event.preventDefault();
+        arrow();
+        return;
+      }
+      if (event.key === " ") {
+        event.preventDefault();
+        if (autoplay) setIsAutoPlaying((playing) => !playing);
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, showControls, close, prev, next, autoplay, setIsAutoPlaying]);
+};
+var useSwipe = ({
+  prev,
+  next,
+  close
+}) => {
+  const touchStartRef = useRef(null);
+  const handleTouchStart = useCallback((event) => {
+    const touch = event.touches.length === 1 ? event.touches[0] : void 0;
+    if (touch) touchStartRef.current = { x: touch.clientX, y: touch.clientY };
+  }, []);
+  const handleTouchEnd = useCallback(
+    (event) => {
+      const start = touchStartRef.current;
+      const touch = event.changedTouches[0];
+      touchStartRef.current = null;
+      if (!start || !touch) return;
+      const deltaX = touch.clientX - start.x;
+      const deltaY = touch.clientY - start.y;
+      if (Math.abs(deltaX) > Math.abs(deltaY)) {
+        if (Math.abs(deltaX) > MIN_SWIPE_DISTANCE) {
+          if (deltaX > 0) prev();
+          else next();
+        }
+        return;
+      }
+      if (deltaY > MIN_SWIPE_DISTANCE) close();
+    },
+    [prev, next, close]
+  );
+  return { handleTouchStart, handleTouchEnd };
+};
+
+// src/components/data-display/Lightbox/useLightbox.ts
+var useLightbox = ({ isOpen, onClose, items, startIndex, showControls, loop, autoplay, zoomable }, ref) => {
+  const [isLoading, setIsLoading] = useState2(false);
+  const preloadImage = usePreloader();
+  const zoom = useZoomState();
+  const { currentIndex, goToIndex, next, prev } = useNavigation({
+    items,
+    loop,
+    startIndex,
+    resetZoom: zoom.resetZoom,
+    preloadImage
+  });
+  const currentItem = items[currentIndex];
+  const canZoom = Boolean(zoomable && currentItem && currentItem.type !== "video");
+  const handleWheel = useWheelZoom({ enabled: canZoom, setZoomLevel: zoom.setZoomLevel });
+  const { isAutoPlaying, setIsAutoPlaying, stopAutoplay } = useAutoplay({
+    isOpen,
+    autoplay,
+    itemCount: items.length,
+    currentIndex,
+    next
+  });
+  const close = useCallback2(() => {
+    stopAutoplay();
+    onClose();
+  }, [stopAutoplay, onClose]);
+  const open = useCallback2((index = 0) => goToIndex(index), [goToIndex]);
+  useImperativeHandle(ref, () => ({ open, close, next, prev, goTo: goToIndex }));
+  useLightboxKeyboard({ isOpen, showControls, autoplay, close, prev, next, setIsAutoPlaying });
+  const { handleTouchStart, handleTouchEnd } = useSwipe({ prev, next, close });
+  return {
+    currentIndex,
+    currentItem,
+    canZoom,
+    isLoading,
+    setIsLoading,
+    isAutoPlaying,
+    setIsAutoPlaying,
+    zoom,
+    handleWheel,
+    goToIndex,
+    next,
+    prev,
+    close,
+    handleTouchStart,
+    handleTouchEnd
+  };
+};
+
+// src/components/data-display/Lightbox/Lightbox.tsx
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+var DIALOG_STATIC_PROPS = {
+  maxWidth: false,
+  fullScreen: true,
+  TransitionComponent: Fade,
+  TransitionProps: { timeout: 300 },
+  PaperProps: { sx: { background: "rgba(0, 0, 0, 0.9)", backdropFilter: "blur(2px)" } },
+  "aria-label": "Lightbox",
+  "aria-labelledby": "lightbox-title",
+  role: "dialog",
+  "aria-modal": "true"
+};
+var Lightbox = React.forwardRef((componentProps, ref) => {
+  const props = resolveLightboxProps(componentProps);
+  const { isOpen, items, loop, autoplay, showControls, showCaptions, thumbnails, zoomable } = props;
+  const { className, style, dataTestId } = props;
+  const testId = makeTestId(dataTestId);
+  const lightbox = useLightbox(props, ref);
+  const { currentIndex, currentItem, zoom } = lightbox;
+  return /* @__PURE__ */ jsxs4(
+    Dialog,
+    {
+      open: isOpen,
+      onClose: lightbox.close,
+      ...DIALOG_STATIC_PROPS,
+      className,
+      style,
+      onTouchStart: lightbox.handleTouchStart,
+      onTouchEnd: lightbox.handleTouchEnd,
+      "data-testid": dataTestId || "lightbox",
+      children: [
+        /* @__PURE__ */ jsxs4(Typography2, { id: "lightbox-title", variant: "h6", sx: { position: "absolute", left: -1e4 }, children: [
+          "Lightbox - ",
+          currentItem?.alt || `Item ${currentIndex + 1} of ${items.length}`
+        ] }),
+        /* @__PURE__ */ jsx7(
+          LightboxOverlay,
+          {
+            testId,
+            itemCount: items.length,
+            currentIndex,
+            showControls,
+            loop,
+            autoplay,
+            canZoom: lightbox.canZoom,
+            isAutoPlaying: lightbox.isAutoPlaying,
+            onClose: lightbox.close,
+            onPrev: lightbox.prev,
+            onNext: lightbox.next,
+            onZoomIn: zoom.zoomIn,
+            onZoomOut: zoom.zoomOut,
+            onResetZoom: zoom.resetZoom,
+            onToggleAutoplay: () => lightbox.setIsAutoPlaying((playing) => !playing)
+          }
+        ),
+        /* @__PURE__ */ jsx7(
+          LightboxStage,
+          {
+            items,
+            currentItem,
+            currentIndex,
+            isLoading: lightbox.isLoading,
+            showCaptions,
+            thumbnails,
+            testId,
+            media: /* @__PURE__ */ jsx7(
+              LightboxCurrentMedia,
+              {
+                item: currentItem,
+                index: currentIndex,
+                total: items.length,
+                zoomable,
+                zoom,
+                testId,
+                onLoadingChange: lightbox.setIsLoading,
+                onWheel: lightbox.handleWheel
+              }
+            ),
+            thumbnailStrip: thumbnails && items.length > 1 && /* @__PURE__ */ jsx7(
+              LightboxThumbnails,
+              {
+                items,
+                currentIndex,
+                testId,
+                onSelect: lightbox.goToIndex
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+});
+Lightbox.displayName = "Lightbox";
+var Lightbox_default = Lightbox;
+export {
+  Lightbox_default as Lightbox
+};
+//# sourceMappingURL=Lightbox.js.map