@12-apps/ui 6.6.0 → 6.7.0

package/dist/data-display/Lightbox.js

@@ -60,8 +60,26 @@ var definedProps = (props) => Object.fromEntries(
 );
 var resolveLightboxProps = (props) => ({ ...LIGHTBOX_DEFAULTS, ...definedProps(props) });
 
-// src/components/data-display/Lightbox/LightboxMedia.tsx
+// src/components/data-display/Lightbox/lightbox-copy-context.tsx
+import { createContext, useContext } from "react";
 import { jsx } from "react/jsx-runtime";
+var LightboxCopyContext = createContext(null);
+function LightboxCopyProvider({
+  copy,
+  children
+}) {
+  return /* @__PURE__ */ jsx(LightboxCopyContext.Provider, { value: copy, children });
+}
+function useLightboxCopy() {
+  const copy = useContext(LightboxCopyContext);
+  if (!copy) {
+    throw new Error("useLightboxCopy must be rendered inside a <LightboxCopyProvider>");
+  }
+  return copy;
+}
+
+// src/components/data-display/Lightbox/LightboxMedia.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
 var cursorFor = (zoomLevel, zoomable) => {
   if (zoomLevel > 1) return "move";
   return zoomable ? "zoom-in" : "default";
@@ -81,7 +99,7 @@ var LightboxMedia = ({
   onDoubleClick
 }) => {
   if (item.type === "video") {
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx2(
       "video",
       {
         src: item.src,
@@ -94,7 +112,7 @@ var LightboxMedia = ({
       }
     );
   }
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     "img",
     {
       src: item.src,
@@ -120,7 +138,7 @@ var LightboxMedia = ({
 };
 
 // src/components/data-display/Lightbox/LightboxCurrentMedia.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 var LightboxCurrentMedia = ({
   item,
   index,
@@ -132,7 +150,7 @@ var LightboxCurrentMedia = ({
   onWheel
 }) => {
   if (!item) return null;
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     LightboxMedia,
     {
       item,
@@ -161,20 +179,23 @@ 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";
+import { Fragment, jsx as jsx4, 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, {})
-  }
-);
+}) => {
+  const copy = useLightboxCopy();
+  return /* @__PURE__ */ jsx4(
+    IconButton,
+    {
+      onClick: onClose,
+      sx: { ...overlayButtonSx, position: "absolute", top: 16, right: 16, zIndex: OVERLAY_Z_INDEX },
+      "aria-label": copy.close,
+      "data-testid": testId("close"),
+      children: /* @__PURE__ */ jsx4(CloseIcon, {})
+    }
+  );
+};
 var arrowSx = (side) => ({
   ...navButtonSx,
   position: "absolute",
@@ -189,97 +210,106 @@ var LightboxNavButtons = ({
   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, {})
-    }
-  )
-] });
+}) => {
+  const copy = useLightboxCopy();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx4(
+      IconButton,
+      {
+        onClick: onPrev,
+        disabled: atStart,
+        sx: arrowSx("left"),
+        "aria-label": copy.previous,
+        "data-testid": testId("prev"),
+        children: /* @__PURE__ */ jsx4(PrevIcon, {})
+      }
+    ),
+    /* @__PURE__ */ jsx4(
+      IconButton,
+      {
+        onClick: onNext,
+        disabled: atEnd,
+        sx: arrowSx("right"),
+        "aria-label": copy.next,
+        "data-testid": testId("next"),
+        children: /* @__PURE__ */ jsx4(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, {})
-        }
-      )
-    ]
-  }
-);
+}) => {
+  const copy = useLightboxCopy();
+  return /* @__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__ */ jsx4(IconButton, { onClick: onZoomIn, sx: overlayButtonSx, "aria-label": copy.zoomIn, "data-testid": testId("zoom-in"), children: /* @__PURE__ */ jsx4(ZoomInIcon, {}) }),
+        /* @__PURE__ */ jsx4(
+          IconButton,
+          {
+            onClick: onZoomOut,
+            sx: overlayButtonSx,
+            "aria-label": copy.zoomOut,
+            "data-testid": testId("zoom-out"),
+            children: /* @__PURE__ */ jsx4(ZoomOutIcon, {})
+          }
+        ),
+        /* @__PURE__ */ jsx4(
+          IconButton,
+          {
+            onClick: onResetZoom,
+            sx: overlayButtonSx,
+            "aria-label": copy.resetZoom,
+            "data-testid": testId("zoom-reset"),
+            children: /* @__PURE__ */ jsx4(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, {})
-  }
-);
+}) => {
+  const copy = useLightboxCopy();
+  return /* @__PURE__ */ jsx4(
+    IconButton,
+    {
+      onClick: onToggle,
+      sx: {
+        ...overlayButtonSx,
+        position: "absolute",
+        top: 16,
+        left: "50%",
+        transform: "translateX(-50%)",
+        zIndex: OVERLAY_Z_INDEX
+      },
+      "aria-label": isAutoPlaying ? copy.pause : copy.play,
+      "data-testid": testId("autoplay"),
+      children: isAutoPlaying ? /* @__PURE__ */ jsx4(PauseIcon, {}) : /* @__PURE__ */ jsx4(PlayIcon, {})
+    }
+  );
+};
 
 // src/components/data-display/Lightbox/LightboxOverlay.tsx
-import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 var LightboxOverlay = ({
   testId,
   itemCount,
@@ -299,8 +329,8 @@ var LightboxOverlay = ({
 }) => {
   const hasMultiple = itemCount > 1;
   return /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    /* @__PURE__ */ jsx4(LightboxCloseButton, { testId, onClose }),
-    showControls && hasMultiple && /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(LightboxCloseButton, { testId, onClose }),
+    showControls && hasMultiple && /* @__PURE__ */ jsx5(
       LightboxNavButtons,
       {
         testId,
@@ -310,7 +340,7 @@ var LightboxOverlay = ({
         onNext
       }
     ),
-    canZoom && /* @__PURE__ */ jsx4(
+    canZoom && /* @__PURE__ */ jsx5(
       LightboxZoomControls,
       {
         testId,
@@ -319,7 +349,7 @@ var LightboxOverlay = ({
         onResetZoom
       }
     ),
-    autoplay && hasMultiple && /* @__PURE__ */ jsx4(
+    autoplay && hasMultiple && /* @__PURE__ */ jsx5(
       LightboxAutoplayButton,
       {
         testId,
@@ -332,7 +362,7 @@ var LightboxOverlay = ({
 
 // 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";
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 var LightboxStage = ({
   items,
   currentItem,
@@ -357,14 +387,14 @@ var LightboxStage = ({
     },
     "data-testid": testId("content"),
     children: [
-      isLoading && /* @__PURE__ */ jsx5(
+      isLoading && /* @__PURE__ */ jsx6(
         CircularProgress,
         {
           sx: { position: "absolute", color: "white", zIndex: 999 },
           "data-testid": testId("loading")
         }
       ),
-      /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsx6(
         Box2,
         {
           sx: {
@@ -378,7 +408,7 @@ var LightboxStage = ({
           children: media
         }
       ),
-      showCaptions && currentItem?.caption && /* @__PURE__ */ jsx5(
+      showCaptions && currentItem?.caption && /* @__PURE__ */ jsx6(
         Typography,
         {
           id: "lightbox-description",
@@ -417,10 +447,10 @@ var LightboxStage = ({
 // 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";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var THUMB_WIDTH = 60;
 var THUMB_HEIGHT = 40;
-var VideoThumbnail = () => /* @__PURE__ */ jsx6(
+var VideoThumbnail = () => /* @__PURE__ */ jsx7(
   Box3,
   {
     sx: {
@@ -431,7 +461,7 @@ var VideoThumbnail = () => /* @__PURE__ */ jsx6(
       alignItems: "center",
       justifyContent: "center"
     },
-    children: /* @__PURE__ */ jsx6(PlayIcon2, { sx: { color: "white", fontSize: 16 } })
+    children: /* @__PURE__ */ jsx7(PlayIcon2, { sx: { color: "white", fontSize: 16 } })
   }
 );
 var LightboxThumbnails = ({
@@ -439,7 +469,7 @@ var LightboxThumbnails = ({
   currentIndex,
   testId,
   onSelect
-}) => /* @__PURE__ */ jsx6(
+}) => /* @__PURE__ */ jsx7(
   Box3,
   {
     sx: {
@@ -455,7 +485,7 @@ var LightboxThumbnails = ({
       padding: 1
     },
     "data-testid": testId("thumbnails"),
-    children: items.map((item, index) => /* @__PURE__ */ jsx6(
+    children: items.map((item, index) => /* @__PURE__ */ jsx7(
       Box3,
       {
         onClick: () => onSelect(index),
@@ -470,7 +500,7 @@ var LightboxThumbnails = ({
           "&:hover": { border: "2px solid rgba(255, 255, 255, 0.7)" }
         },
         "data-testid": testId(`thumbnail-${index}`),
-        children: item.type === "video" ? /* @__PURE__ */ jsx6(VideoThumbnail, {}) : /* @__PURE__ */ jsx6(
+        children: item.type === "video" ? /* @__PURE__ */ jsx7(VideoThumbnail, {}) : /* @__PURE__ */ jsx7(
           "img",
           {
             src: item.src,
@@ -694,7 +724,7 @@ var useLightbox = ({ isOpen, onClose, items, startIndex, showControls, loop, aut
 };
 
 // src/components/data-display/Lightbox/Lightbox.tsx
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 var DIALOG_STATIC_PROPS = {
   maxWidth: false,
   fullScreen: true,
@@ -713,7 +743,7 @@ var Lightbox = React.forwardRef((componentProps, ref) => {
   const testId = makeTestId(dataTestId);
   const lightbox = useLightbox(props, ref);
   const { currentIndex, currentItem, zoom } = lightbox;
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsx8(LightboxCopyProvider, { copy: props.copy, children: /* @__PURE__ */ jsxs4(
     Dialog,
     {
       open: isOpen,
@@ -729,7 +759,7 @@ var Lightbox = React.forwardRef((componentProps, ref) => {
           "Lightbox - ",
           currentItem?.alt || `Item ${currentIndex + 1} of ${items.length}`
         ] }),
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(
           LightboxOverlay,
           {
             testId,
@@ -749,7 +779,7 @@ var Lightbox = React.forwardRef((componentProps, ref) => {
             onToggleAutoplay: () => lightbox.setIsAutoPlaying((playing) => !playing)
           }
         ),
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(
           LightboxStage,
           {
             items,
@@ -759,7 +789,7 @@ var Lightbox = React.forwardRef((componentProps, ref) => {
             showCaptions,
             thumbnails,
             testId,
-            media: /* @__PURE__ */ jsx7(
+            media: /* @__PURE__ */ jsx8(
               LightboxCurrentMedia,
               {
                 item: currentItem,
@@ -772,7 +802,7 @@ var Lightbox = React.forwardRef((componentProps, ref) => {
                 onWheel: lightbox.handleWheel
               }
             ),
-            thumbnailStrip: thumbnails && items.length > 1 && /* @__PURE__ */ jsx7(
+            thumbnailStrip: thumbnails && items.length > 1 && /* @__PURE__ */ jsx8(
               LightboxThumbnails,
               {
                 items,
@@ -785,7 +815,7 @@ var Lightbox = React.forwardRef((componentProps, ref) => {
         )
       ]
     }
-  );
+  ) });
 });
 Lightbox.displayName = "Lightbox";
 var Lightbox_default = Lightbox;