@sesionario/blocks 1.23.0 → 1.24.0

package/dist/index.js

@@ -1,7 +1,7 @@
 "use client";
 import * as React7 from 'react';
 import { createContext, forwardRef, useContext, useState, useRef, useId, useEffect, useCallback, useLayoutEffect, useMemo } from 'react';
-import { ChevronsUpDown, CheckIcon, Smile, SearchIcon, Search, Clock, Flag, Hash, Lightbulb, Trophy, Plane, Apple, Leaf, Hand, Loader2, AlertTriangle, Inbox, X, ChevronLeft, ChevronRight, Monitor, Sun, Moon, Building2, Check, Plus, Languages, BadgeCheck, Settings, User, Activity, LogOut, LogIn, Upload, Move, ZoomOut, ZoomIn, RotateCcw, RotateCw, Grid3X3, RefreshCw, Pencil, Play, AlertCircle, VolumeX, Pause, Volume1, Volume2, PictureInPicture2, Minimize, Maximize, ArrowDownIcon, MessageCircleDashedIcon, MessageCircle, ChevronUp, ChevronDown, XIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';
+import { ChevronsUpDown, CheckIcon, Smile, SearchIcon, Search, Clock, Flag, Hash, Lightbulb, Trophy, Plane, Apple, Leaf, Hand, Loader2, AlertTriangle, Inbox, X, ChevronLeft, ChevronRight, Monitor, Sun, Moon, Building2, Check, Plus, Languages, BadgeCheck, Settings, User, Activity, LogOut, LogIn, Upload, Move, ZoomOut, ZoomIn, RotateCcw, RotateCw, Grid3X3, RefreshCw, Pencil, Play, AlertCircle, VolumeX, Pause, Volume1, Volume2, PictureInPicture2, Minimize, Maximize, ArrowDownIcon, MessageCircleDashedIcon, MessageCircle, XIcon, ChevronUp, ChevronDown, ChevronRightIcon, CircleIcon } from 'lucide-react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
@@ -9,12 +9,12 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { Slot } from '@radix-ui/react-slot';
 import { createPortal } from 'react-dom';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { useTheme } from 'next-themes';
 import { useReducedMotion, AnimatePresence, motion } from 'framer-motion';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import * as SliderPrimitive from '@radix-ui/react-slider';
 import * as TogglePrimitive from '@radix-ui/react-toggle';
-import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { Drawer as Drawer$1 } from 'vaul';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { Command as Command$1 } from 'cmdk';
@@ -829,19 +829,19 @@ function ExpandableText({
     ) : null
   ] });
 }
-var MIN_SCALE = 1;
-var MAX_SCALE = 4;
-var DOUBLE_TAP_MS = 300;
-var SWIPE_LOCK_PX = 8;
-var SWIPE_COMMIT_PX = 56;
-var SWIPE_SNAP_MS = 180;
+var ZOOM_PAN_MIN_SCALE = 1;
+var ZOOM_PAN_MAX_SCALE = 4;
+var ZOOM_PAN_DOUBLE_TAP_MS = 300;
+var ZOOM_PAN_SWIPE_LOCK_PX = 8;
+var ZOOM_PAN_SWIPE_COMMIT_PX = 56;
+var ZOOM_PAN_SWIPE_SNAP_MS = 180;
 var IDENTITY = { scale: 1, tx: 0, ty: 0 };
 function clamp(value, min, max) {
   return Math.min(max, Math.max(min, value));
 }
-function zoomToward(prev, nextScale, originX, originY) {
-  const scale = clamp(nextScale, MIN_SCALE, MAX_SCALE);
-  if (scale === MIN_SCALE) return IDENTITY;
+function zoomToward(prev, nextScale, originX, originY, minScale = ZOOM_PAN_MIN_SCALE, maxScale = ZOOM_PAN_MAX_SCALE) {
+  const scale = clamp(nextScale, minScale, maxScale);
+  if (scale === minScale) return { ...IDENTITY, scale: minScale };
   const ratio = scale / prev.scale;
   return {
     scale,
@@ -856,19 +856,19 @@ function prefersReducedMotion() {
   if (typeof window === "undefined" || !window.matchMedia) return false;
   return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 }
-function ImageLightbox({
-  images,
-  index,
-  onIndexChange,
-  onClose,
-  labels
-}) {
-  const ariaLabel = labels?.ariaLabel ?? "Visor de im\xE1genes";
-  const closeLabel = labels?.close ?? "Cerrar";
-  const previousLabel = labels?.previous ?? "Anterior";
-  const nextLabel = labels?.next ?? "Siguiente";
-  const hasMultiple = images.length > 1;
-  const [transform, setTransform] = useState(IDENTITY);
+function useZoomPanGestures(options = {}) {
+  const {
+    minScale = ZOOM_PAN_MIN_SCALE,
+    maxScale = ZOOM_PAN_MAX_SCALE,
+    swipeEnabled = true,
+    onSwipeCommit,
+    wheelZoom = true,
+    doubleTap = "reset"
+  } = options;
+  const [transform, setTransform] = useState({
+    ...IDENTITY,
+    scale: minScale
+  });
   const transformRef = useRef(transform);
   transformRef.current = transform;
   const [isSwipeDragging, setIsSwipeDragging] = useState(false);
@@ -881,46 +881,28 @@ function ImageLightbox({
   const lastTapRef = useRef(
     null
   );
-  const indexRef = useRef(index);
-  indexRef.current = index;
-  const imagesLengthRef = useRef(images.length);
-  imagesLengthRef.current = images.length;
-  const resetZoom = useCallback(() => {
-    setTransform(IDENTITY);
+  const onSwipeCommitRef = useRef(onSwipeCommit);
+  onSwipeCommitRef.current = onSwipeCommit;
+  const swipeEnabledRef = useRef(swipeEnabled);
+  swipeEnabledRef.current = swipeEnabled;
+  const minScaleRef = useRef(minScale);
+  minScaleRef.current = minScale;
+  const maxScaleRef = useRef(maxScale);
+  maxScaleRef.current = maxScale;
+  const doubleTapRef = useRef(doubleTap);
+  doubleTapRef.current = doubleTap;
+  const reset = useCallback(() => {
+    setTransform({ ...IDENTITY, scale: minScaleRef.current });
     setIsSwipeDragging(false);
     setSnapBack(false);
   }, []);
-  useEffect(() => {
-    resetZoom();
-  }, [index, images[index], resetZoom]);
-  function goPrev() {
-    onIndexChange((index - 1 + images.length) % images.length);
-  }
-  function goNext() {
-    onIndexChange((index + 1) % images.length);
-  }
-  useEffect(() => {
-    function handleKeyDown(e) {
-      if (e.key === "Escape") {
-        onClose();
-        return;
-      }
-      if (!hasMultiple) return;
-      if (e.key === "ArrowLeft") {
-        onIndexChange((index - 1 + images.length) % images.length);
-      } else if (e.key === "ArrowRight") {
-        onIndexChange((index + 1) % images.length);
-      }
-    }
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [index, images.length, hasMultiple, onClose, onIndexChange]);
-  useEffect(() => {
-    const previousOverflow = document.body.style.overflow;
-    document.body.style.overflow = "hidden";
-    return () => {
-      document.body.style.overflow = previousOverflow;
-    };
+  const setScale = useCallback((next) => {
+    setTransform(
+      (prev) => zoomToward(prev, next, 0, 0, minScaleRef.current, maxScaleRef.current)
+    );
+  }, []);
+  const clearSnapBack = useCallback(() => {
+    setSnapBack(false);
   }, []);
   const stageOrigin = useCallback((clientX, clientY) => {
     const stage = stageRef.current;
@@ -932,6 +914,7 @@ function ImageLightbox({
     };
   }, []);
   useEffect(() => {
+    if (!wheelZoom) return;
     const stage = stageRef.current;
     if (!stage) return;
     const handleWheel = (e) => {
@@ -940,11 +923,20 @@ function ImageLightbox({
       const prev = transformRef.current;
       const factor = e.deltaY > 0 ? 0.9 : 1.1;
       const { x, y } = stageOrigin(e.clientX, e.clientY);
-      setTransform(zoomToward(prev, prev.scale * factor, x, y));
+      setTransform(
+        zoomToward(
+          prev,
+          prev.scale * factor,
+          x,
+          y,
+          minScaleRef.current,
+          maxScaleRef.current
+        )
+      );
     };
     stage.addEventListener("wheel", handleWheel, { passive: false });
     return () => stage.removeEventListener("wheel", handleWheel);
-  }, [stageOrigin]);
+  }, [stageOrigin, wheelZoom]);
   function clearSwipe() {
     swipeRef.current = null;
     setIsSwipeDragging(false);
@@ -979,7 +971,7 @@ function ImageLightbox({
       beginPinch();
       return;
     }
-    if (transformRef.current.scale > MIN_SCALE) {
+    if (transformRef.current.scale > minScaleRef.current) {
       panRef.current = {
         pointerId: e.pointerId,
         startX: e.clientX,
@@ -990,7 +982,7 @@ function ImageLightbox({
       };
       return;
     }
-    if (hasMultiple) {
+    if (swipeEnabledRef.current) {
       swipeRef.current = {
         pointerId: e.pointerId,
         startX: e.clientX,
@@ -1016,7 +1008,9 @@ function ImageLightbox({
           pinchStart.transform,
           nextScale,
           pinchStart.originX,
-          pinchStart.originY
+          pinchStart.originY,
+          minScaleRef.current,
+          maxScaleRef.current
         )
       );
       return;
@@ -1041,16 +1035,22 @@ function ImageLightbox({
     if (swipe.axis === null) {
       const absX = Math.abs(dx);
       const absY = Math.abs(dy);
-      if (absX < SWIPE_LOCK_PX && absY < SWIPE_LOCK_PX) return;
+      if (absX < ZOOM_PAN_SWIPE_LOCK_PX && absY < ZOOM_PAN_SWIPE_LOCK_PX) {
+        return;
+      }
       swipe.axis = absX >= absY ? "x" : "y";
       if (swipe.axis === "y") {
         clearSwipe();
-        setTransform(IDENTITY);
+        setTransform({ ...IDENTITY, scale: minScaleRef.current });
         return;
       }
     }
     if (swipe.axis === "x") {
-      setTransform({ scale: MIN_SCALE, tx: dx, ty: 0 });
+      setTransform({
+        scale: minScaleRef.current,
+        tx: dx,
+        ty: 0
+      });
     }
   }
   function finishSwipe(e) {
@@ -1060,19 +1060,13 @@ function ImageLightbox({
     const wasMoved = swipe.moved;
     const axis = swipe.axis;
     clearSwipe();
-    if (axis === "x" && Math.abs(dx) >= SWIPE_COMMIT_PX) {
-      const length = imagesLengthRef.current;
-      const current = indexRef.current;
-      if (dx < 0) {
-        onIndexChange((current + 1) % length);
-      } else {
-        onIndexChange((current - 1 + length) % length);
-      }
+    if (axis === "x" && Math.abs(dx) >= ZOOM_PAN_SWIPE_COMMIT_PX) {
+      onSwipeCommitRef.current?.(dx < 0 ? "next" : "prev");
       return true;
     }
     if (wasMoved || transformRef.current.tx !== 0) {
       if (!prefersReducedMotion()) setSnapBack(true);
-      setTransform(IDENTITY);
+      setTransform({ ...IDENTITY, scale: minScaleRef.current });
     }
     return wasMoved;
   }
@@ -1087,7 +1081,7 @@ function ImageLightbox({
     }
     if (pointersRef.current.size === 1) {
       const remaining = [...pointersRef.current.entries()][0];
-      if (remaining && transformRef.current.scale > MIN_SCALE) {
+      if (remaining && transformRef.current.scale > minScaleRef.current) {
         const [pointerId, point] = remaining;
         panRef.current = {
           pointerId,
@@ -1110,19 +1104,121 @@ function ImageLightbox({
     if (pointersRef.current.size === 0 && e.button === 0) {
       const now = Date.now();
       const last = lastTapRef.current;
-      if (last && now - last.time < DOUBLE_TAP_MS && Math.hypot(e.clientX - last.x, e.clientY - last.y) < 24) {
+      if (last && now - last.time < ZOOM_PAN_DOUBLE_TAP_MS && Math.hypot(e.clientX - last.x, e.clientY - last.y) < 24) {
         lastTapRef.current = null;
-        resetZoom();
+        if (doubleTapRef.current === "toggle" && transformRef.current.scale <= minScaleRef.current) {
+          const { x, y } = stageOrigin(e.clientX, e.clientY);
+          setTransform(
+            zoomToward(
+              transformRef.current,
+              Math.min(2, maxScaleRef.current),
+              x,
+              y,
+              minScaleRef.current,
+              maxScaleRef.current
+            )
+          );
+        } else {
+          reset();
+        }
         return;
       }
       lastTapRef.current = { time: now, x: e.clientX, y: e.clientY };
     }
   }
+  return {
+    stageRef,
+    transform,
+    isDragging: isSwipeDragging,
+    snapBack,
+    handlers: {
+      onPointerDown,
+      onPointerMove,
+      onPointerUp,
+      onPointerCancel: onPointerUp
+    },
+    reset,
+    setScale,
+    clearSnapBack
+  };
+}
+function ImageLightbox({
+  images,
+  index,
+  onIndexChange,
+  onClose,
+  labels
+}) {
+  const ariaLabel = labels?.ariaLabel ?? "Visor de im\xE1genes";
+  const closeLabel = labels?.close ?? "Cerrar";
+  const previousLabel = labels?.previous ?? "Anterior";
+  const nextLabel = labels?.next ?? "Siguiente";
+  const hasMultiple = images.length > 1;
+  const indexRef = useRef(index);
+  indexRef.current = index;
+  const imagesLengthRef = useRef(images.length);
+  imagesLengthRef.current = images.length;
+  const onIndexChangeRef = useRef(onIndexChange);
+  onIndexChangeRef.current = onIndexChange;
+  const onSwipeCommit = useCallback((direction) => {
+    const length = imagesLengthRef.current;
+    const current = indexRef.current;
+    if (direction === "next") {
+      onIndexChangeRef.current((current + 1) % length);
+    } else {
+      onIndexChangeRef.current((current - 1 + length) % length);
+    }
+  }, []);
+  const {
+    stageRef,
+    transform,
+    isDragging,
+    snapBack,
+    handlers,
+    reset,
+    clearSnapBack
+  } = useZoomPanGestures({
+    swipeEnabled: hasMultiple,
+    onSwipeCommit,
+    doubleTap: "reset"
+  });
+  useEffect(() => {
+    reset();
+  }, [index, images[index], reset]);
+  function goPrev() {
+    onIndexChange((index - 1 + images.length) % images.length);
+  }
+  function goNext() {
+    onIndexChange((index + 1) % images.length);
+  }
+  useEffect(() => {
+    function handleKeyDown(e) {
+      if (e.key === "Escape") {
+        onClose();
+        return;
+      }
+      if (!hasMultiple) return;
+      if (e.key === "ArrowLeft") {
+        onIndexChange((index - 1 + images.length) % images.length);
+      } else if (e.key === "ArrowRight") {
+        onIndexChange((index + 1) % images.length);
+      }
+    }
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [index, images.length, hasMultiple, onClose, onIndexChange]);
+  useEffect(() => {
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = previousOverflow;
+    };
+  }, []);
   function stopDialogClose(e) {
     e.stopPropagation();
   }
   const { scale, tx, ty } = transform;
-  const transition = snapBack && !isSwipeDragging && !prefersReducedMotion() ? `transform ${SWIPE_SNAP_MS}ms ease-out` : void 0;
+  const transition = snapBack && !isDragging && !prefersReducedMotion() ? `transform ${ZOOM_PAN_SWIPE_SNAP_MS}ms ease-out` : void 0;
   return createPortal(
     /* @__PURE__ */ jsxs(
       "div",
@@ -1162,12 +1258,12 @@ function ImageLightbox({
               ref: stageRef,
               className: "relative flex max-h-full max-w-full touch-none items-center justify-center",
               "data-scale": scale,
-              "data-swipe-dragging": isSwipeDragging ? "true" : "false",
+              "data-swipe-dragging": isDragging ? "true" : "false",
               onClick: stopDialogClose,
-              onPointerDown,
-              onPointerMove,
-              onPointerUp,
-              onPointerCancel: onPointerUp,
+              onPointerDown: handlers.onPointerDown,
+              onPointerMove: handlers.onPointerMove,
+              onPointerUp: handlers.onPointerUp,
+              onPointerCancel: handlers.onPointerCancel,
               children: /* @__PURE__ */ jsx(
                 "img",
                 {
@@ -1178,9 +1274,9 @@ function ImageLightbox({
                   style: {
                     transform: `translate(${tx}px, ${ty}px) scale(${scale})`,
                     transition,
-                    cursor: scale > MIN_SCALE ? "grab" : "default"
+                    cursor: scale > ZOOM_PAN_MIN_SCALE ? "grab" : "default"
                   },
-                  onTransitionEnd: () => setSnapBack(false)
+                  onTransitionEnd: clearSnapBack
                 }
               )
             }
@@ -1209,6 +1305,321 @@ function ImageLightbox({
     document.body
   );
 }
+function MediaCarousel({
+  items,
+  index,
+  onIndexChange,
+  labels,
+  className,
+  renderPdf
+}) {
+  const previousLabel = labels?.previous ?? "Anterior";
+  const nextLabel = labels?.next ?? "Siguiente";
+  const safeIndex = Math.min(Math.max(index, 0), Math.max(items.length - 1, 0));
+  const item = items[safeIndex];
+  const hasMultiple = items.length > 1;
+  const indexRef = useRef(safeIndex);
+  indexRef.current = safeIndex;
+  const lengthRef = useRef(items.length);
+  lengthRef.current = items.length;
+  const onIndexChangeRef = useRef(onIndexChange);
+  onIndexChangeRef.current = onIndexChange;
+  const onSwipeCommit = useCallback((direction) => {
+    const length = lengthRef.current;
+    if (length <= 1) return;
+    const current = indexRef.current;
+    if (direction === "next") {
+      onIndexChangeRef.current((current + 1) % length);
+    } else {
+      onIndexChangeRef.current((current - 1 + length) % length);
+    }
+  }, []);
+  const isImage = item?.kind === "image";
+  const {
+    stageRef,
+    transform,
+    isDragging,
+    snapBack,
+    handlers,
+    reset,
+    clearSnapBack
+  } = useZoomPanGestures({
+    swipeEnabled: hasMultiple && isImage,
+    onSwipeCommit,
+    doubleTap: "toggle",
+    wheelZoom: isImage
+  });
+  useEffect(() => {
+    reset();
+  }, [safeIndex, item?.kind === "image" ? item.src : null, reset]);
+  useEffect(() => {
+    if (!hasMultiple) return;
+    function handleKeyDown(e) {
+      if (e.key === "ArrowLeft") {
+        onIndexChangeRef.current(
+          (indexRef.current - 1 + lengthRef.current) % lengthRef.current
+        );
+      } else if (e.key === "ArrowRight") {
+        onIndexChangeRef.current((indexRef.current + 1) % lengthRef.current);
+      }
+    }
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [hasMultiple]);
+  function stopBubble(e) {
+    e.stopPropagation();
+  }
+  if (!item) {
+    return null;
+  }
+  const { scale, tx, ty } = transform;
+  const transition = snapBack && !isDragging && !prefersReducedMotion() ? `transform ${ZOOM_PAN_SWIPE_SNAP_MS}ms ease-out` : void 0;
+  let body;
+  switch (item.kind) {
+    case "image":
+      body = /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: stageRef,
+          className: "relative flex h-full w-full touch-none items-center justify-center",
+          "data-scale": scale,
+          "data-swipe-dragging": isDragging ? "true" : "false",
+          onClick: stopBubble,
+          onPointerDown: handlers.onPointerDown,
+          onPointerMove: handlers.onPointerMove,
+          onPointerUp: handlers.onPointerUp,
+          onPointerCancel: handlers.onPointerCancel,
+          children: /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: item.src,
+              alt: item.alt ?? "",
+              draggable: false,
+              className: "max-h-full max-w-full select-none object-contain",
+              style: {
+                transform: `translate(${tx}px, ${ty}px) scale(${scale})`,
+                transition,
+                cursor: scale > ZOOM_PAN_MIN_SCALE ? "grab" : "default"
+              },
+              onTransitionEnd: clearSnapBack
+            }
+          )
+        }
+      );
+      break;
+    case "video":
+      body = /* @__PURE__ */ jsx("div", { className: "flex h-full w-full items-center justify-center p-2", children: item.node });
+      break;
+    case "pdf":
+      body = renderPdf ? renderPdf({
+        fileUrl: item.fileUrl,
+        fileName: item.fileName,
+        downloadUrl: item.downloadUrl
+      }) : /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center p-6 text-sm text-muted-foreground", children: item.fileName });
+      break;
+    default: {
+      const _exhaustive = item;
+      return _exhaustive;
+    }
+  }
+  const counterText = labels?.counter ? labels.counter(safeIndex + 1, items.length) : `${safeIndex + 1} / ${items.length}`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative flex h-full min-h-0 w-full flex-col bg-black",
+        item.kind === "pdf" && "bg-muted",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "relative min-h-0 flex-1", children: body }),
+        hasMultiple && item.kind !== "pdf" && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: (e) => {
+                e.stopPropagation();
+                onIndexChange((safeIndex - 1 + items.length) % items.length);
+              },
+              "aria-label": previousLabel,
+              className: "absolute left-3 top-1/2 z-10 hidden -translate-y-1/2 rounded-full bg-black/50 p-2 text-white transition-colors hover:bg-black/70 sm:inline-flex",
+              children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-6 w-6" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: (e) => {
+                e.stopPropagation();
+                onIndexChange((safeIndex + 1) % items.length);
+              },
+              "aria-label": nextLabel,
+              className: "absolute right-3 top-1/2 z-10 hidden -translate-y-1/2 rounded-full bg-black/50 p-2 text-white transition-colors hover:bg-black/70 sm:inline-flex",
+              children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-6 w-6" })
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "absolute bottom-3 left-1/2 z-10 -translate-x-1/2 rounded-full bg-black/50 px-3 py-1 text-xs text-white", children: counterText })
+        ] })
+      ]
+    }
+  );
+}
+function Dialog({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+}
+function DialogPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogClose({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
+}
+function DialogOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Overlay,
+    {
+      "data-slot": "dialog-overlay",
+      className: cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ jsx(DialogOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      DialogPrimitive.Content,
+      {
+        "data-slot": "dialog-content",
+        className: cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ jsxs(
+            DialogPrimitive.Close,
+            {
+              "data-slot": "dialog-close",
+              className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+              children: [
+                /* @__PURE__ */ jsx(XIcon, {}),
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "dialog-header",
+      className: cn("flex flex-col gap-2 text-center sm:text-left", className),
+      ...props
+    }
+  );
+}
+function DialogFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "dialog-footer",
+      className: cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DialogTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Title,
+    {
+      "data-slot": "dialog-title",
+      className: cn("text-lg leading-none font-semibold", className),
+      ...props
+    }
+  );
+}
+function DialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Description,
+    {
+      "data-slot": "dialog-description",
+      className: cn("text-muted-foreground text-sm", className),
+      ...props
+    }
+  );
+}
+function MediaViewerDialog({
+  open,
+  onOpenChange,
+  children,
+  labels,
+  className,
+  contentClassName,
+  showCloseButton = true
+}) {
+  const closeLabel = labels?.close ?? "Cerrar";
+  const title = labels?.title ?? "Visor";
+  const description = labels?.description ?? title;
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(
+    DialogContent,
+    {
+      showCloseButton: false,
+      className: cn(
+        "inset-0 flex h-dvh max-h-dvh w-screen max-w-none translate-x-0 translate-y-0 top-0 left-0 gap-0 overflow-hidden rounded-none border-0 p-0 shadow-none sm:max-w-none",
+        contentClassName,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(DialogTitle, { className: "sr-only", children: title }),
+        /* @__PURE__ */ jsx(DialogDescription, { className: "sr-only", children: description }),
+        showCloseButton && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => onOpenChange(false),
+            "aria-label": closeLabel,
+            className: "absolute top-3 right-3 z-20 rounded-full bg-black/50 p-2 text-white transition-colors hover:bg-black/70",
+            children: /* @__PURE__ */ jsx(X, { className: "h-5 w-5" })
+          }
+        ),
+        children
+      ]
+    }
+  ) });
+}
 var miniMenuContentClassName = "max-h-none overflow-x-visible overflow-y-visible";
 var miniMenuContentDefaults = {
   sideOffset: 8,
@@ -3114,121 +3525,6 @@ function AvatarEditor({
     }
   );
 }
-function Dialog({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
-}
-function DialogPortal({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
-}
-function DialogClose({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
-}
-function DialogOverlay({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    DialogPrimitive.Overlay,
-    {
-      "data-slot": "dialog-overlay",
-      className: cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function DialogContent({
-  className,
-  children,
-  showCloseButton = true,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [
-    /* @__PURE__ */ jsx(DialogOverlay, {}),
-    /* @__PURE__ */ jsxs(
-      DialogPrimitive.Content,
-      {
-        "data-slot": "dialog-content",
-        className: cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
-          className
-        ),
-        ...props,
-        children: [
-          children,
-          showCloseButton && /* @__PURE__ */ jsxs(
-            DialogPrimitive.Close,
-            {
-              "data-slot": "dialog-close",
-              className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-              children: [
-                /* @__PURE__ */ jsx(XIcon, {}),
-                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
-              ]
-            }
-          )
-        ]
-      }
-    )
-  ] });
-}
-function DialogHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "dialog-header",
-      className: cn("flex flex-col gap-2 text-center sm:text-left", className),
-      ...props
-    }
-  );
-}
-function DialogFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "dialog-footer",
-      className: cn(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function DialogTitle({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    DialogPrimitive.Title,
-    {
-      "data-slot": "dialog-title",
-      className: cn("text-lg leading-none font-semibold", className),
-      ...props
-    }
-  );
-}
-function DialogDescription({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    DialogPrimitive.Description,
-    {
-      "data-slot": "dialog-description",
-      className: cn("text-muted-foreground text-sm", className),
-      ...props
-    }
-  );
-}
 function Drawer({
   ...props
 }) {
@@ -8999,6 +9295,6 @@ function useRealtimeChannel({
   }, [enabled, reconnectDelayMs]);
 }
 
-export { AvatarEditor, AvatarEditorDialog, BrandX, Bubble, BubbleContent, BubbleGroup, BubbleReactions, ChatMessageList, ConfirmDestructiveDialog, DEFAULT_EDITABLE_SECTION_LABELS, DataList, DataListItem, DropdownMenuItem, DropdownMenuSeparator, EditableSection, EmojiInput, EmojiPicker, EmojiPickerPopover, EmojiTextarea, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyState, EmptyTitle, ErrorState, ExpandableText, FeedVideoPlayer, FieldMessage, ImageLightbox, LanguageContext, LanguageSwitcher, LoadingState, MEXICO_STATES, MEXICO_STATE_PATHS, Marker, MarkerContent, MarkerIcon, Message, MessageAvatar, MessageComposer, MessageContent, MessageFooter, MessageGroup, MessageHeader, MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, MexicoMap, OrgSwitcher, PLATFORM_ACCOUNT_ORG_COLLAPSE_AT, PaymentIcon, PhoneInput, PlatformAccountMenu, PlatformNavbar, ScrollRestorationProvider, SearchCommand, SearchablePicker, SupportMessengerProvider, ThemeSwitcher, VerifiedProfessionalBadge, VideoPlayer, avatarFallbackStyle, bubbleVariants, cn, createLiveHlsConfig, createSupportChatClient, createVodHlsConfig, defaultLanguages, describeAvResync, describePlaybackError, formatPaymentCardBrand, fuzzyMatch, getAvatarColors, getInitials, insertAtCaret, markerVariants, mergePlatformAccountOrgs, normalizeEmojiQuery, normalizePaymentCardBrand, paymentIconBrandFromStripe, paymentTypeFromStripeBrand, shouldRetryLiveEdge404, useDebouncedValue, useDebouncedValueStrict, useEditableSection, useFeedExclusivePlayback, useHlsPlayback, useLanguageContext, useMediaQuery2 as useMediaQuery, usePlaybackStats, useRealtimeChannel, useRestorableState, useScrollFadeXEdges, useScrollRestorationContext, useSearchHotkey, useSupportConversation, useSupportMessenger, useSupportMessengerOptional };
+export { AvatarEditor, AvatarEditorDialog, BrandX, Bubble, BubbleContent, BubbleGroup, BubbleReactions, ChatMessageList, ConfirmDestructiveDialog, DEFAULT_EDITABLE_SECTION_LABELS, DataList, DataListItem, DropdownMenuItem, DropdownMenuSeparator, EditableSection, EmojiInput, EmojiPicker, EmojiPickerPopover, EmojiTextarea, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyState, EmptyTitle, ErrorState, ExpandableText, FeedVideoPlayer, FieldMessage, ImageLightbox, LanguageContext, LanguageSwitcher, LoadingState, MEXICO_STATES, MEXICO_STATE_PATHS, Marker, MarkerContent, MarkerIcon, MediaCarousel, MediaViewerDialog, Message, MessageAvatar, MessageComposer, MessageContent, MessageFooter, MessageGroup, MessageHeader, MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, MexicoMap, OrgSwitcher, PLATFORM_ACCOUNT_ORG_COLLAPSE_AT, PaymentIcon, PhoneInput, PlatformAccountMenu, PlatformNavbar, ScrollRestorationProvider, SearchCommand, SearchablePicker, SupportMessengerProvider, ThemeSwitcher, VerifiedProfessionalBadge, VideoPlayer, ZOOM_PAN_MAX_SCALE, ZOOM_PAN_MIN_SCALE, ZOOM_PAN_SWIPE_COMMIT_PX, ZOOM_PAN_SWIPE_SNAP_MS, avatarFallbackStyle, bubbleVariants, cn, createLiveHlsConfig, createSupportChatClient, createVodHlsConfig, defaultLanguages, describeAvResync, describePlaybackError, formatPaymentCardBrand, fuzzyMatch, getAvatarColors, getInitials, insertAtCaret, markerVariants, mergePlatformAccountOrgs, normalizeEmojiQuery, normalizePaymentCardBrand, paymentIconBrandFromStripe, paymentTypeFromStripeBrand, prefersReducedMotion, shouldRetryLiveEdge404, useDebouncedValue, useDebouncedValueStrict, useEditableSection, useFeedExclusivePlayback, useHlsPlayback, useLanguageContext, useMediaQuery2 as useMediaQuery, usePlaybackStats, useRealtimeChannel, useRestorableState, useScrollFadeXEdges, useScrollRestorationContext, useSearchHotkey, useSupportConversation, useSupportMessenger, useSupportMessengerOptional, useZoomPanGestures, zoomToward };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map