@oxyhq/bloom 0.55.0 → 0.57.0

package/lib/commonjs/zoomable-image-gallery/ZoomableImageGallery.js

@@ -11,12 +11,13 @@ var _expoBlur = require("expo-blur");
 var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
 var _reactNativeGestureHandler = require("react-native-gesture-handler");
 var _useTheme = require("../theme/use-theme.js");
+var _index = require("../overlay/index.js");
 var _portal = require("../portal");
-var _index = require("../pressable-with-hover/index.js");
-var _index2 = require("../icons/index.js");
+var _index2 = require("../pressable-with-hover/index.js");
+var _index3 = require("../icons/index.js");
 var _zIndex = require("../styles/z-index.js");
 var _webViewStyle = require("../styles/web-view-style.js");
-var _index3 = require("../image-aspect-ratio-cache/index.js");
+var _index4 = require("../image-aspect-ratio-cache/index.js");
 var _constants = require("./constants.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
@@ -80,7 +81,7 @@ const ZoomableImageGalleryInner = /*#__PURE__*/_react.default.forwardRef(({
   // paging + the dismiss drag so a pan moves the zoomed image instead.
   const [isZoomed, setIsZoomed] = (0, _react.useState)(false);
   // Aspect ratio of the OPENING image (drives the open-animation fit box).
-  const [openRatio, setOpenRatio] = (0, _react.useState)(_index3.DEFAULT_ASPECT_RATIO);
+  const [openRatio, setOpenRatio] = (0, _react.useState)(_index4.DEFAULT_ASPECT_RATIO);
   // Per-image aspect ratios for the pager pages (index-aligned with `images`).
   const [pageRatios, setPageRatios] = (0, _react.useState)({});
 
@@ -154,7 +155,7 @@ const ZoomableImageGalleryInner = /*#__PURE__*/_react.default.forwardRef(({
   // Compute the largest width/height for `ratio` that fits inside `fitBox`
   // without cropping (contain).
   const fitForRatio = (0, _react.useCallback)(ratio => {
-    const safeRatio = ratio > 0 && Number.isFinite(ratio) ? ratio : _index3.DEFAULT_ASPECT_RATIO;
+    const safeRatio = ratio > 0 && Number.isFinite(ratio) ? ratio : _index4.DEFAULT_ASPECT_RATIO;
     let width = fitBox.width;
     let height = width / safeRatio;
     if (height > fitBox.height) {
@@ -178,7 +179,7 @@ const ZoomableImageGalleryInner = /*#__PURE__*/_react.default.forwardRef(({
   // as a caption at the bottom of the viewer (Bluesky-style lightbox footer).
   const activeAlt = images[activeIndex]?.alt?.trim() || undefined;
   const ensureRatio = (0, _react.useCallback)((index, uri) => {
-    const cached = (0, _index3.getAspectRatio)(uri);
+    const cached = (0, _index4.getAspectRatio)(uri);
     if (cached !== undefined) {
       setPageRatios(prev => prev[index] === cached ? prev : {
         ...prev,
@@ -186,7 +187,7 @@ const ZoomableImageGalleryInner = /*#__PURE__*/_react.default.forwardRef(({
       });
       return;
     }
-    void (0, _index3.fetchAspectRatio)(uri).then(ratio => {
+    void (0, _index4.fetchAspectRatio)(uri).then(ratio => {
       setPageRatios(prev => prev[index] === ratio ? prev : {
         ...prev,
         [index]: ratio
@@ -303,8 +304,8 @@ const ZoomableImageGalleryInner = /*#__PURE__*/_react.default.forwardRef(({
     const safeIndex = Math.min(Math.max(index, 0), nextImages.length - 1);
     const target = nextImages[safeIndex];
     if (!target) return;
-    const knownRatio = target.aspectRatio ?? (0, _index3.getAspectRatio)(target.uri);
-    const ratio = knownRatio ?? _index3.DEFAULT_ASPECT_RATIO;
+    const knownRatio = target.aspectRatio ?? (0, _index4.getAspectRatio)(target.uri);
+    const ratio = knownRatio ?? _index4.DEFAULT_ASPECT_RATIO;
     setImages(nextImages);
     setActiveIndexBoth(safeIndex);
     setOpenRatio(ratio);
@@ -313,7 +314,7 @@ const ZoomableImageGalleryInner = /*#__PURE__*/_react.default.forwardRef(({
     // a genuinely-unknown image falls through to `ensureRatio`'s async probe.
     const initialRatios = {};
     nextImages.forEach((img, i) => {
-      const r = img.aspectRatio ?? (0, _index3.getAspectRatio)(img.uri);
+      const r = img.aspectRatio ?? (0, _index4.getAspectRatio)(img.uri);
       if (r !== undefined) initialRatios[i] = r;
     });
     setPageRatios(initialRatios);
@@ -321,7 +322,7 @@ const ZoomableImageGalleryInner = /*#__PURE__*/_react.default.forwardRef(({
 
     // Resolve the opening ratio if it was not yet known, then re-fit.
     if (knownRatio === undefined) {
-      void (0, _index3.fetchAspectRatio)(target.uri).then(resolved => {
+      void (0, _index4.fetchAspectRatio)(target.uri).then(resolved => {
         setOpenRatio(resolved);
         setPageRatios(prev => ({
           ...prev,
@@ -388,15 +389,6 @@ const ZoomableImageGalleryInner = /*#__PURE__*/_react.default.forwardRef(({
   _react.default.useImperativeHandle(ref, () => ({
     open
   }), [open]);
-
-  // Tapping the backdrop dismisses. Uses the same Gesture system as every
-  // other interaction in this component (image tap, pinch, pan, double-tap)
-  // instead of a plain RN Pressable, so the backdrop isn't the one interaction
-  // mixing two different event-handling systems under the same
-  // GestureHandlerRootView.
-  const backdropTapGesture = (0, _react.useMemo)(() => _reactNativeGestureHandler.Gesture.Tap().onEnd(() => {
-    (0, _reactNativeReanimated.runOnJS)(handleDismiss)();
-  }), [handleDismiss]);
   const panGesture = (0, _react.useMemo)(() => _reactNativeGestureHandler.Gesture.Pan()
   // Disabled while zoomed so a drag pans the zoomed image (via the
   // per-page pan gesture) instead of trying to dismiss the whole viewer.
@@ -656,12 +648,13 @@ const ZoomableImageGalleryInner = /*#__PURE__*/_react.default.forwardRef(({
     document.addEventListener('keydown', handler);
     return () => document.removeEventListener('keydown', handler);
   }, [handleDismiss, isOpen, pageTo]);
-  const renderContent = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeGestureHandler.GestureHandlerRootView, {
+  const renderContent = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.OverlayRoot, {
     style: styles.modalContainer,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector, {
-      gesture: backdropTapGesture,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
-        style: _reactNative.StyleSheet.absoluteFill,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeGestureHandler.GestureHandlerRootView, {
+      style: _reactNative.StyleSheet.absoluteFill,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Backdrop, {
+        onPress: handleDismiss,
+        accessibilityLabel: "Close image viewer",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedBlurView, {
           intensity: 80,
           tint: theme.isDark ? 'dark' : 'light',
@@ -673,196 +666,196 @@ const ZoomableImageGalleryInner = /*#__PURE__*/_react.default.forwardRef(({
             }, backdropStyle]
           })
         })
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector, {
-      gesture: panGesture,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeReanimated.default.View, {
-        style: [_reactNative.StyleSheet.absoluteFill, styles.zoomContainer, {
-          width: SCREEN_WIDTH,
-          height: SCREEN_HEIGHT
-        }, webUserSelectNoneStyle],
-        pointerEvents: "box-none",
-        children: [!pagerReady && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
-          onPress: handleDismiss,
-          style: webPointerStyle,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedImage, {
-            source: {
-              uri: images[activeIndex]?.uri
-            },
-            contentFit: "contain",
-            style: [{
-              width: activeFit.width,
-              height: activeFit.height,
-              borderRadius: cornerRadius
-            }, openImageStyle],
-            transition: 0,
-            ...(_reactNative.Platform.OS === 'web' ? {
-              draggable: false
-            } : {})
-          })
-        }), pagerReady && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
-          style: [_reactNative.StyleSheet.absoluteFill, pagerContainerStyle],
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
-            ref: pagerRef,
-            horizontal: true,
-            pagingEnabled: true
-            // Frozen while zoomed so a horizontal drag pans the zoomed image
-            // instead of paging away from it.
-            ,
-            scrollEnabled: !isZoomed,
-            showsHorizontalScrollIndicator: false,
-            contentOffset: {
-              x: pendingIndexRef.current * SCREEN_WIDTH,
-              y: 0
-            },
-            onLayout: onPagerLayout,
-            onMomentumScrollEnd: onPagerScroll,
-            ...(_reactNative.Platform.OS === 'web' ? {
-              onScroll: onPagerScroll
-            } : {}),
-            scrollEventThrottle: 16,
-            style: _reactNative.StyleSheet.absoluteFill,
-            children: images.map((img, idx) => {
-              const ratio = pageRatios[idx] ?? (0, _index3.getAspectRatio)(img.uri) ?? _index3.DEFAULT_ASPECT_RATIO;
-              const fit = fitForRatio(ratio);
-              // Only the active page is zoomable + gesture-wrapped (double-tap
-              // / single-tap dismiss / pinch / pan). Off-screen pages stay a
-              // plain image; the active image handles its own tap-to-dismiss
-              // through the gesture, so it isn't wrapped in a Pressable.
-              if (idx === activeIndex) {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector, {
+        gesture: panGesture,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeReanimated.default.View, {
+          style: [_reactNative.StyleSheet.absoluteFill, styles.zoomContainer, {
+            width: SCREEN_WIDTH,
+            height: SCREEN_HEIGHT
+          }, webUserSelectNoneStyle],
+          pointerEvents: "box-none",
+          children: [!pagerReady && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+            onPress: handleDismiss,
+            style: webPointerStyle,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedImage, {
+              source: {
+                uri: images[activeIndex]?.uri
+              },
+              contentFit: "contain",
+              style: [{
+                width: activeFit.width,
+                height: activeFit.height,
+                borderRadius: cornerRadius
+              }, openImageStyle],
+              transition: 0,
+              ...(_reactNative.Platform.OS === 'web' ? {
+                draggable: false
+              } : {})
+            })
+          }), pagerReady && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+            style: [_reactNative.StyleSheet.absoluteFill, pagerContainerStyle],
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+              ref: pagerRef,
+              horizontal: true,
+              pagingEnabled: true
+              // Frozen while zoomed so a horizontal drag pans the zoomed image
+              // instead of paging away from it.
+              ,
+              scrollEnabled: !isZoomed,
+              showsHorizontalScrollIndicator: false,
+              contentOffset: {
+                x: pendingIndexRef.current * SCREEN_WIDTH,
+                y: 0
+              },
+              onLayout: onPagerLayout,
+              onMomentumScrollEnd: onPagerScroll,
+              ...(_reactNative.Platform.OS === 'web' ? {
+                onScroll: onPagerScroll
+              } : {}),
+              scrollEventThrottle: 16,
+              style: _reactNative.StyleSheet.absoluteFill,
+              children: images.map((img, idx) => {
+                const ratio = pageRatios[idx] ?? (0, _index4.getAspectRatio)(img.uri) ?? _index4.DEFAULT_ASPECT_RATIO;
+                const fit = fitForRatio(ratio);
+                // Only the active page is zoomable + gesture-wrapped (double-tap
+                // / single-tap dismiss / pinch / pan). Off-screen pages stay a
+                // plain image; the active image handles its own tap-to-dismiss
+                // through the gesture, so it isn't wrapped in a Pressable.
+                if (idx === activeIndex) {
+                  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                    style: [styles.page, {
+                      width: SCREEN_WIDTH,
+                      height: SCREEN_HEIGHT
+                    }, webPointerStyle],
+                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector, {
+                      gesture: activePageGesture,
+                      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedImage, {
+                        source: {
+                          uri: img.uri
+                        },
+                        contentFit: "contain",
+                        style: [{
+                          width: fit.width,
+                          height: fit.height,
+                          borderRadius: cornerRadius
+                        }, zoomImageStyle],
+                        transition: 0,
+                        ...(_reactNative.Platform.OS === 'web' ? {
+                          draggable: false
+                        } : {})
+                      })
+                    })
+                  }, `${img.uri}-${idx}`);
+                }
                 return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
                   style: [styles.page, {
                     width: SCREEN_WIDTH,
                     height: SCREEN_HEIGHT
-                  }, webPointerStyle],
-                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector, {
-                    gesture: activePageGesture,
-                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedImage, {
-                      source: {
-                        uri: img.uri
-                      },
-                      contentFit: "contain",
-                      style: [{
-                        width: fit.width,
-                        height: fit.height,
-                        borderRadius: cornerRadius
-                      }, zoomImageStyle],
-                      transition: 0,
-                      ...(_reactNative.Platform.OS === 'web' ? {
-                        draggable: false
-                      } : {})
-                    })
+                  }],
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_expoImage.Image, {
+                    source: {
+                      uri: img.uri
+                    },
+                    contentFit: "contain",
+                    style: {
+                      width: fit.width,
+                      height: fit.height,
+                      borderRadius: cornerRadius
+                    },
+                    transition: 0,
+                    ...(_reactNative.Platform.OS === 'web' ? {
+                      draggable: false
+                    } : {})
                   })
                 }, `${img.uri}-${idx}`);
-              }
-              return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-                style: [styles.page, {
-                  width: SCREEN_WIDTH,
-                  height: SCREEN_HEIGHT
-                }],
+              })
+            })
+          }), pagerReady && images.length > 1 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeReanimated.default.View, {
+            style: [styles.indicatorWrap, backdropStyle],
+            pointerEvents: "box-none",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              style: styles.counterPill,
+              pointerEvents: "none",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.counterText,
+                children: `${activeIndex + 1} / ${images.length}`
+              })
+            }), indicatorVariant === 'thumbnails' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+              horizontal: true,
+              showsHorizontalScrollIndicator: false,
+              style: styles.thumbStripScroll,
+              contentContainerStyle: styles.thumbStripContent,
+              children: images.map((img, idx) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+                onPress: () => pageTo(idx),
+                accessibilityRole: "button",
+                accessibilityLabel: `Go to image ${idx + 1} of ${images.length}`,
+                style: [styles.thumbTile, idx === activeIndex ? styles.thumbTileActive : styles.thumbTileInactive, webPointerStyle],
                 children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_expoImage.Image, {
                   source: {
                     uri: img.uri
                   },
-                  contentFit: "contain",
-                  style: {
-                    width: fit.width,
-                    height: fit.height,
-                    borderRadius: cornerRadius
-                  },
+                  contentFit: "cover",
+                  style: styles.thumbTileImage,
                   transition: 0,
                   ...(_reactNative.Platform.OS === 'web' ? {
                     draggable: false
                   } : {})
                 })
-              }, `${img.uri}-${idx}`);
+              }, `thumb-${img.uri}-${idx}`))
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              style: styles.dotsRow,
+              pointerEvents: "none",
+              children: images.map((img, idx) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                style: [styles.dot, idx === activeIndex ? styles.dotActive : styles.dotInactive]
+              }, `dot-${img.uri}-${idx}`))
+            })]
+          }), _reactNative.Platform.OS === 'web' && pagerReady && images.length > 1 && activeIndex > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.PressableWithHover, {
+            onPress: () => pageTo(activeIndex - 1),
+            accessibilityRole: "button",
+            accessibilityLabel: "Previous image",
+            hitSlop: 8,
+            style: [styles.navArrow, styles.navArrowLeft, webPointerStyle],
+            hoverStyle: styles.navArrowHoverLeft,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.ArrowLeft_Stroke2_Corner0_Rounded, {
+              fill: "#fff",
+              size: "lg"
             })
-          })
-        }), pagerReady && images.length > 1 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeReanimated.default.View, {
-          style: [styles.indicatorWrap, backdropStyle],
-          pointerEvents: "box-none",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: styles.counterPill,
-            pointerEvents: "none",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: styles.counterText,
-              children: `${activeIndex + 1} / ${images.length}`
+          }), _reactNative.Platform.OS === 'web' && pagerReady && images.length > 1 && activeIndex < images.length - 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.PressableWithHover, {
+            onPress: () => pageTo(activeIndex + 1),
+            accessibilityRole: "button",
+            accessibilityLabel: "Next image",
+            hitSlop: 8,
+            style: [styles.navArrow, styles.navArrowRight, webPointerStyle],
+            hoverStyle: styles.navArrowHoverRight,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.ArrowRight_Stroke2_Corner0_Rounded, {
+              fill: "#fff",
+              size: "lg"
             })
-          }), indicatorVariant === 'thumbnails' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
-            horizontal: true,
-            showsHorizontalScrollIndicator: false,
-            style: styles.thumbStripScroll,
-            contentContainerStyle: styles.thumbStripContent,
-            children: images.map((img, idx) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
-              onPress: () => pageTo(idx),
-              accessibilityRole: "button",
-              accessibilityLabel: `Go to image ${idx + 1} of ${images.length}`,
-              style: [styles.thumbTile, idx === activeIndex ? styles.thumbTileActive : styles.thumbTileInactive, webPointerStyle],
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_expoImage.Image, {
-                source: {
-                  uri: img.uri
-                },
-                contentFit: "cover",
-                style: styles.thumbTileImage,
-                transition: 0,
-                ...(_reactNative.Platform.OS === 'web' ? {
-                  draggable: false
-                } : {})
-              })
-            }, `thumb-${img.uri}-${idx}`))
-          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: styles.dotsRow,
+          }), canShare && pagerReady && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+            onPress: handleShare,
+            accessibilityRole: "button",
+            accessibilityLabel: "Share image",
+            hitSlop: 8,
+            style: [styles.shareButton, webPointerStyle],
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.ArrowOutOfBox_Stroke2_Corner0_Rounded, {
+              fill: "#fff",
+              size: "md"
+            })
+          }), activeAlt ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+            style: [styles.altCaptionWrap, images.length > 1 && styles.altCaptionWrapWithIndicator, backdropStyle],
             pointerEvents: "none",
-            children: images.map((img, idx) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-              style: [styles.dot, idx === activeIndex ? styles.dotActive : styles.dotInactive]
-            }, `dot-${img.uri}-${idx}`))
-          })]
-        }), _reactNative.Platform.OS === 'web' && pagerReady && images.length > 1 && activeIndex > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.PressableWithHover, {
-          onPress: () => pageTo(activeIndex - 1),
-          accessibilityRole: "button",
-          accessibilityLabel: "Previous image",
-          hitSlop: 8,
-          style: [styles.navArrow, styles.navArrowLeft, webPointerStyle],
-          hoverStyle: styles.navArrowHoverLeft,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.ArrowLeft_Stroke2_Corner0_Rounded, {
-            fill: "#fff",
-            size: "lg"
-          })
-        }), _reactNative.Platform.OS === 'web' && pagerReady && images.length > 1 && activeIndex < images.length - 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.PressableWithHover, {
-          onPress: () => pageTo(activeIndex + 1),
-          accessibilityRole: "button",
-          accessibilityLabel: "Next image",
-          hitSlop: 8,
-          style: [styles.navArrow, styles.navArrowRight, webPointerStyle],
-          hoverStyle: styles.navArrowHoverRight,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.ArrowRight_Stroke2_Corner0_Rounded, {
-            fill: "#fff",
-            size: "lg"
-          })
-        }), canShare && pagerReady && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
-          onPress: handleShare,
-          accessibilityRole: "button",
-          accessibilityLabel: "Share image",
-          hitSlop: 8,
-          style: [styles.shareButton, webPointerStyle],
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.ArrowOutOfBox_Stroke2_Corner0_Rounded, {
-            fill: "#fff",
-            size: "md"
-          })
-        }), activeAlt ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
-          style: [styles.altCaptionWrap, images.length > 1 && styles.altCaptionWrapWithIndicator, backdropStyle],
-          pointerEvents: "none",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: styles.altCaptionPill,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: styles.altCaptionText,
-              numberOfLines: 4,
-              children: activeAlt
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              style: styles.altCaptionPill,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.altCaptionText,
+                numberOfLines: 4,
+                children: activeAlt
+              })
             })
-          })
-        }) : null]
-      })
-    })]
+          }) : null]
+        })
+      })]
+    })
   });
   if (!isOpen) return null;