@tamagui/sheet 2.7.7 → 3.0.0-beta.1091.1

package/dist/jsx/SheetImplementationCustom.mjs

@@ -1,612 +1,673 @@
 import { AnimatePresence } from "@tamagui/animate-presence";
+import { getTransitionResolver } from "@tamagui/animation-helpers/transitionResolver";
 import { useComposedRefs } from "@tamagui/compose-refs";
 import { isWeb, useIsomorphicLayoutEffect } from "@tamagui/constants";
-import { LayoutMeasurementController, View, useConfiguration, useDidFinishSSR, useEvent, useThemeName } from "@tamagui/core";
+import { LayoutMeasurementController, View, createRefComponent, formatDiagnostic, useAnimatedNumber, useAnimatedNumberStyle, useAnimationDriver, useDidFinishSSR, useEvent, useThemeName } from "@tamagui/core";
 import { Portal, needsPortalRepropagation } from "@tamagui/portal";
 import React, { useState } from "react";
-import { Dimensions, PanResponder, View as View$1 } from "react-native-web";
 import { ParentSheetContext, SheetInsideSheetContext } from "./contexts.mjs";
-import { GestureDetectorWrapper } from "./GestureDetectorWrapper.mjs";
+import { SHEET_OVERLAY_MARKER } from "./constants.mjs";
 import { getGestureHandlerState } from "./gestureState.mjs";
+import { SheetDragSurface } from "./SheetDragSurface.mjs";
+import { getStableViewportHeight } from "./stableViewportHeight.mjs";
 import { GestureSheetProvider } from "./GestureSheetContext.mjs";
 import { resisted } from "./helpers.mjs";
 import { getKeyboardAdjustedSheetY, getKeyboardOccludedHeight, getSheetReleasePosition } from "./keyboardAvoidance.mjs";
-import { MIN_KEYBOARD_HEIGHT, getMaxViewportHeight, getStableLayoutViewportHeight, getWebKeyboardResizeHeight, getWebVisualViewportOffsetTop } from "./webViewport.mjs";
-import { SheetProvider } from "./SheetContext.mjs";
+import { MIN_KEYBOARD_HEIGHT, getMaxViewportHeight, getWebKeyboardResizeHeight, getWebVisualViewportOffsetTop } from "./webViewport.mjs";
+import { SheetAnimatedPositionContext, SheetOverlayLayerContext, SheetProvider } from "./SheetContext.mjs";
 import { useGestureHandlerPan } from "./useGestureHandlerPan.mjs";
 import { useKeyboardControllerSheet } from "./useKeyboardControllerSheet.mjs";
 import { useSafeAreaInsets } from "./useSafeAreaInsets.mjs";
 import { useSheetOpenState } from "./useSheetOpenState.mjs";
 import { useSheetProviderProps } from "./useSheetProviderProps.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
+
 const hiddenSize = 10000.1;
 const rnghRootStyleOpen = {
-  width: "100%",
-  height: "100%"
+	width: "100%",
+	height: "100%"
 };
 const rnghRootStyleClosed = {
-  width: "100%",
-  height: 0
+	width: "100%",
+	height: 0
 };
 let sheetHiddenStyleSheet = null;
-const relativeDimensionTo = isWeb ? "window" : "screen";
-function getStableViewportHeight() {
-  if (isWeb && typeof window !== "undefined") return getStableLayoutViewportHeight();
-  return Dimensions.get(relativeDimensionTo).height;
-}
-const SheetImplementationCustom = React.forwardRef(function SheetImplementationCustom2(props, forwardedRef) {
-  const parentSheet = React.useContext(ParentSheetContext);
-  const safeAreaTopInset = useSafeAreaInsets()?.top ?? 0;
-  const {
-    transition,
-    transitionConfig: transitionConfigProp,
-    modal = false,
-    zIndex = parentSheet.zIndex + 1,
-    moveOnKeyboardChange = false,
-    unmountChildrenWhenHidden = false,
-    disableTransparencyHide = false,
-    portalProps,
-    containerComponent: ContainerComponent = React.Fragment,
-    onAnimationComplete
-  } = props;
-  const state = useSheetOpenState(props);
-  const [overlayComponent, setOverlayComponent] = React.useState(null);
-  const providerProps = useSheetProviderProps(props, state, {
-    onOverlayComponent: setOverlayComponent
-  });
-  const {
-    frameSize,
-    setFrameSize,
-    dismissOnSnapToBottom,
-    snapPoints,
-    snapPointsMode,
-    hasFit,
-    position,
-    setPosition,
-    scrollBridge,
-    screenSize,
-    setMaxContentSize,
-    maxSnapPoint
-  } = providerProps;
-  const {
-    open,
-    controller,
-    isHidden
-  } = state;
-  const openRef = React.useRef(open);
-  openRef.current = open;
-  const ref = useComposedRefs(forwardedRef, React.useRef(void 0), providerProps.contentRef);
-  const {
-    animationDriver
-  } = useConfiguration();
-  if (!animationDriver) throw new Error(`Sheet requires an animation driver to be set`);
-  const transitionConfig = (() => {
-    if (transitionConfigProp) return transitionConfigProp;
-    const [animationProp, animationPropConfig] = !transition ? [] : Array.isArray(transition) ? transition : [transition];
-    if (animationProp && animationDriver.animations?.[animationProp]) return {
-      ...animationDriver.animations[animationProp],
-      ...animationPropConfig
-    };
-    return null;
-  })();
-  const [isShowingInnerSheet, setIsShowingInnerSheet] = React.useState(false);
-  const shouldHideParentSheet = !isWeb && modal && isShowingInnerSheet && needsPortalRepropagation();
-  const sheetInsideSheet = React.useContext(SheetInsideSheetContext);
-  const onInnerSheet = React.useCallback(hasChild => {
-    setIsShowingInnerSheet(hasChild);
-  }, []);
-  const {
-    keyboardHeight,
-    isKeyboardVisible,
-    dismissKeyboard,
-    pauseKeyboardHandler,
-    flushPendingHide
-  } = useKeyboardControllerSheet({
-    enabled: Boolean(moveOnKeyboardChange)
-  });
-  const stableFrameSize = React.useRef(frameSize);
-  React.useEffect(() => {
-    if (open && frameSize) stableFrameSize.current = frameSize;
-  }, [open, frameSize]);
-  const isWebKbSheet = isWeb && hasFit && moveOnKeyboardChange;
-  const isNativeKbFitSheet = !isWeb && hasFit && Boolean(moveOnKeyboardChange);
-  const preKeyboardFrameSize = React.useRef(0);
-  React.useEffect(() => {
-    if (isNativeKbFitSheet && open && !isKeyboardVisible && frameSize > 0) preKeyboardFrameSize.current = frameSize;
-  }, [isNativeKbFitSheet, open, isKeyboardVisible, frameSize]);
-  const effScreenSize = isWebKbSheet ? getStableViewportHeight() : screenSize;
-  const effectiveFrameSize = open ? frameSize : stableFrameSize.current || frameSize;
-  const positions = React.useMemo(() => snapPoints.map(point => getYPositions(snapPointsMode, point, effScreenSize, effectiveFrameSize)), [effScreenSize, effectiveFrameSize, snapPoints, snapPointsMode]);
-  const [isDragging, setIsDragging_] = React.useState(false);
-  const isDraggingRef = React.useRef(false);
-  const setIsDragging = React.useCallback(val => {
-    isDraggingRef.current = val;
-    pauseKeyboardHandler.current = val;
-    setIsDragging_(val);
-    if (!val) flushPendingHide();
-  }, [pauseKeyboardHandler, flushPendingHide]);
-  const activePositionsRef = React.useRef(positions);
-  const activePositions = React.useMemo(() => {
-    if (isDragging || isDraggingRef.current) return activePositionsRef.current;
-    let result;
-    if (!isKeyboardVisible || keyboardHeight <= 0) result = positions;else result = positions.map(p => getKeyboardAdjustedSheetY({
-      sheetY: p,
-      screenSize: effScreenSize,
-      isKeyboardVisible,
-      keyboardHeight,
-      shouldTranslate: true,
-      safeAreaTop: isWeb ? getWebVisualViewportOffsetTop() : safeAreaTopInset
-    }));
-    activePositionsRef.current = result;
-    return result;
-  }, [positions, isKeyboardVisible, keyboardHeight, effScreenSize, isDragging, safeAreaTopInset]);
-  const keyboardOccludedHeight = getKeyboardOccludedHeight({
-    frameSize: effectiveFrameSize,
-    isKeyboardVisible,
-    keyboardHeight,
-    screenSize: effScreenSize,
-    sheetY: position >= 0 ? activePositions[position] : void 0
-  });
-  const keyboardStableFrameHeight = isWebKbSheet && isKeyboardVisible && frameSize > 0 ? frameSize : isNativeKbFitSheet && isKeyboardVisible && preKeyboardFrameSize.current > 0 ? preKeyboardFrameSize.current : 0;
-  const {
-    useAnimatedNumber,
-    useAnimatedNumberStyle
-  } = animationDriver;
-  const AnimatedView = animationDriver.View ?? View;
-  useIsomorphicLayoutEffect(() => {
-    if (!(sheetInsideSheet && open)) return;
-    sheetInsideSheet(true);
-    return () => {
-      sheetInsideSheet(false);
-    };
-  }, [sheetInsideSheet, open]);
-  const nextParentContext = React.useMemo(() => ({
-    zIndex
-  }), [zIndex]);
-  const startPosition = useDidFinishSSR() && screenSize ? screenSize : hiddenSize;
-  const animatedNumber = useAnimatedNumber(startPosition);
-  const at = React.useRef(startPosition);
-  const hasntMeasured = at.current === hiddenSize;
-  const [disableAnimation, setDisableAnimation] = useState(hasntMeasured);
-  const skipAdaptAnimation = React.useRef(false);
-  if (controller?.skipNextAnimation) skipAdaptAnimation.current = true;
-  const hasScrollView = React.useRef(false);
-  const opacityFallbackTimer = React.useRef(null);
-  const syncAnimatedPosition = useEvent(value => {
-    at.current = value;
-    scrollBridge.paneY = value;
-    const minY = activePositions[0];
-    const wasAtTop = scrollBridge.isAtTop;
-    const nowAtTop = value <= minY + 5;
-    if (wasAtTop === nowAtTop) return;
-    scrollBridge.isAtTop = nowAtTop;
-    if (nowAtTop) {
-      if (scrollBridge.lockScrollAtTop) {
-        if (scrollBridge.y > 0) {
-          scrollBridge.forceScrollTo?.(0);
-          scrollBridge.y = 0;
-        }
-        scrollBridge.scrollLockY = 0;
-        scrollBridge.setScrollEnabled?.(false, 0);
-        return;
-      }
-      if (scrollBridge.y > 0) {
-        scrollBridge.forceScrollTo?.(0);
-        scrollBridge.y = 0;
-      }
-      scrollBridge.scrollLockY = void 0;
-      scrollBridge.setScrollEnabled?.(true);
-    } else {
-      scrollBridge.scrollLockY = 0;
-      scrollBridge.setScrollEnabled?.(false);
-    }
-  });
-  const setAnimatedPositionDirect = useEvent(value => {
-    syncAnimatedPosition(value);
-    animatedNumber.setValue(value, {
-      type: "direct"
-    });
-  });
-  const getAnimatedPosition = useEvent(() => {
-    const value = animatedNumber.getValue();
-    syncAnimatedPosition(value);
-    return value;
-  });
-  function stopSpring() {
-    animatedNumber.stop();
-    if (scrollBridge.onFinishAnimate) {
-      scrollBridge.onFinishAnimate();
-      scrollBridge.onFinishAnimate = void 0;
-    }
-  }
-  const animateTo = useEvent((position2, animationOverride) => {
-    if (frameSize === 0) return;
-    const closeTarget = isWeb ? Math.max(effScreenSize, getMaxViewportHeight()) : effScreenSize;
-    let toValue = isHidden || position2 === -1 ? closeTarget : activePositions[position2];
-    if (at.current === toValue) return;
-    at.current = toValue;
-    stopSpring();
-    const isOpenAnimation = position2 !== -1 && !isHidden;
-    if (opacityFallbackTimer.current) {
-      clearTimeout(opacityFallbackTimer.current);
-      opacityFallbackTimer.current = null;
-    }
-    const animationCompleteCallback = () => {
-      if (at.current !== toValue) return;
-      syncAnimatedPosition(toValue);
-      if (opacityFallbackTimer.current) {
-        clearTimeout(opacityFallbackTimer.current);
-        opacityFallbackTimer.current = null;
-      }
-      if (!isOpenAnimation && !openRef.current) setOpacity(0);
-      onAnimationComplete?.({
-        open: isOpenAnimation
-      });
-      controller?.onAnimationComplete?.({
-        open: isOpenAnimation
-      });
-    };
-    if (!isOpenAnimation) opacityFallbackTimer.current = setTimeout(() => {
-      opacityFallbackTimer.current = null;
-      if (!openRef.current) setOpacity(0);
-    }, 1e3);
-    if (skipAdaptAnimation.current) {
-      skipAdaptAnimation.current = false;
-      animatedNumber.setValue(toValue, {
-        type: "timing",
-        duration: 0
-      }, animationCompleteCallback);
-      return;
-    }
-    animatedNumber.setValue(toValue, animationOverride || {
-      type: "spring",
-      ...transitionConfig
-    }, animationCompleteCallback);
-  });
-  useIsomorphicLayoutEffect(() => {
-    if (hasntMeasured && screenSize && frameSize) {
-      at.current = screenSize;
-      animatedNumber.setValue(screenSize, {
-        type: "timing",
-        duration: 0
-      }, () => {
-        syncAnimatedPosition(screenSize);
-        setTimeout(() => {
-          setDisableAnimation(false);
-        }, 10);
-      });
-      return;
-    }
-    if (disableAnimation) return;
-    if (isDraggingRef.current) return;
-    if (!frameSize || !screenSize || isHidden || hasntMeasured && !open) return;
-    animateTo(position);
-    if (position === -1) {
-      scrollBridge.scrollLock = false;
-      scrollBridge.scrollStartY = -1;
-    }
-    if (open && position >= 0) {
-      const isTopPosition = position === 0;
-      scrollBridge.isAtTop = isTopPosition;
-      if (isTopPosition) {
-        scrollBridge.scrollLockY = void 0;
-        scrollBridge.setScrollEnabled?.(true);
-      } else {
-        scrollBridge.scrollLockY = 0;
-        scrollBridge.setScrollEnabled?.(false);
-      }
-    }
-  }, [hasntMeasured, disableAnimation, isHidden, frameSize, screenSize, open, position]);
-  const disableDrag = props.disableDrag ?? controller?.disableDrag;
-  useThemeName();
-  const [blockPan, setBlockPan] = React.useState(false);
-  const panResponder = React.useMemo(() => {
-    if (disableDrag) return;
-    if (!frameSize) return;
-    if (isShowingInnerSheet) return;
-    const minY = activePositions[0];
-    scrollBridge.paneMinY = minY;
-    let startY = at.current;
-    function setPanning(val) {
-      setIsDragging(val);
-      if (!sheetHiddenStyleSheet) {
-        sheetHiddenStyleSheet = document.createElement("style");
-        if (typeof document.head !== "undefined") document.head.appendChild(sheetHiddenStyleSheet);
-      }
-      if (!val) sheetHiddenStyleSheet.innerText = "";else sheetHiddenStyleSheet.innerText = ":root * { user-select: none !important; -webkit-user-select: none !important; }";
-    }
-    const release = ({
-      vy
-    }) => {
-      scrollBridge.setParentDragging(false);
-      if (scrollBridge.scrollLock) return;
-      isExternalDrag = false;
-      previouslyScrolling = false;
-      setPanning(false);
-      const currentPos = at.current;
-      const closestPoint = getSheetReleasePosition({
-        positions: activePositions,
-        projectedEnd: currentPos + frameSize * vy * .2,
-        currentPosition: currentPos,
-        frameSize,
-        dismissOnSnapToBottom,
-        snapPointsMode,
-        isKeyboardVisible,
-        isWeb
-      });
-      setPosition(closestPoint);
-      animateTo(closestPoint);
-    };
-    const finish = (_e, state2) => {
-      release({
-        vy: state2.vy,
-        dragAt: state2.dy
-      });
-    };
-    let previouslyScrolling = false;
-    const onMoveShouldSet = (e, {
-      dy
-    }) => {
-      function getShouldSet() {
-        if (e.target === providerProps.handleRef.current) return true;
-        if (scrollBridge.scrollNodeTouched) return false;
-        if (scrollBridge.hasScrollableContent === true) {
-          if (scrollBridge.scrollLock) return false;
-          const isScrolled = scrollBridge.y !== 0;
-          const isDraggingUp = dy < 0;
-          const isNearTop = scrollBridge.paneY - 5 <= scrollBridge.paneMinY;
-          if (isScrolled) return false;
-          if (isNearTop) {
-            if (hasScrollView.current && isDraggingUp) return false;
-          }
-        }
-        return Math.abs(dy) > 10;
-      }
-      const granted = getShouldSet();
-      if (granted) scrollBridge.setParentDragging(true);
-      return granted;
-    };
-    const grant = () => {
-      setPanning(true);
-      stopSpring();
-      startY = getAnimatedPosition();
-    };
-    let isExternalDrag = false;
-    scrollBridge.startPanDrag = () => {
-      isExternalDrag = true;
-      grant();
-    };
-    scrollBridge.drag = dy => {
-      if (!isExternalDrag) {
-        isExternalDrag = true;
-        grant();
-      }
-      setAnimatedPositionDirect(resisted(dy + startY, minY));
-    };
-    scrollBridge.release = release;
-    scrollBridge.snapToPosition = positionIndex => {
-      isExternalDrag = false;
-      setPanning(false);
-      setPosition(positionIndex);
-      animateTo(positionIndex);
-    };
-    return PanResponder.create({
-      onMoveShouldSetPanResponder: onMoveShouldSet,
-      onPanResponderTerminationRequest: () => false,
-      onPanResponderGrant: grant,
-      onPanResponderMove: (_e, {
-        dy
-      }) => {
-        const to = resisted(dy + startY, minY);
-        if (to <= minY) scrollBridge.setParentDragging(false);else scrollBridge.setParentDragging(true);
-        setAnimatedPositionDirect(to);
-      },
-      onPanResponderEnd: finish,
-      onPanResponderTerminate: finish,
-      onPanResponderRelease: finish
-    });
-  }, [disableDrag, isShowingInnerSheet, animateTo, frameSize, activePositions, setPosition, dismissOnSnapToBottom, snapPointsMode]);
-  React.useEffect(() => {
-    if (isDragging || isHidden || !open || disableAnimation) return;
-    if (!frameSize || !screenSize) return;
-    animateTo(position, {
-      type: "timing",
-      duration: 250
-    });
-  }, [isKeyboardVisible, keyboardHeight]);
-  const wasDragging = React.useRef(false);
-  React.useEffect(() => {
-    if (isDragging) {
-      wasDragging.current = true;
-      return;
-    }
-    if (!wasDragging.current) return;
-    wasDragging.current = false;
-    if (!frameSize || !screenSize || isHidden || !open) return;
-    animateTo(position);
-  }, [isDragging]);
-  React.useEffect(() => {
-    if (!open && isKeyboardVisible) {
-      dismissKeyboard();
-      pauseKeyboardHandler.current = false;
-      flushPendingHide();
-    }
-  }, [open]);
-  const {
-    panGesture,
-    panGestureRef,
-    gestureHandlerEnabled
-  } = useGestureHandlerPan({
-    positions: activePositions,
-    frameSize,
-    setPosition,
-    animateTo,
-    stopSpring,
-    scrollBridge,
-    setIsDragging,
-    getCurrentPosition: getAnimatedPosition,
-    resisted,
-    disableDrag,
-    isShowingInnerSheet,
-    setAnimatedPosition: setAnimatedPositionDirect,
-    dismissOnSnapToBottom,
-    snapPointsMode,
-    isKeyboardVisible,
-    pauseKeyboardHandler
-  });
-  const ignoreLayoutForKeyboard = useEvent(() => isWeb && moveOnKeyboardChange && getWebKeyboardResizeHeight() >= MIN_KEYBOARD_HEIGHT);
-  const handleAnimationViewLayout = useEvent(e => {
-    if (!open && stableFrameSize.current !== 0) return;
-    const layoutHeight = e.nativeEvent?.layout.height;
-    if (ignoreLayoutForKeyboard() && frameSize > 0) return;
-    const next = modal ? Math.min(layoutHeight, getStableViewportHeight()) : layoutHeight;
-    if (!next) return;
-    setFrameSize(Math.round(next));
-  });
-  const handleMaxContentViewLayout = React.useCallback(e => {
-    if (ignoreLayoutForKeyboard() && screenSize > 0) return;
-    const next = Math.min(e.nativeEvent?.layout.height, getStableViewportHeight());
-    if (!next) return;
-    setMaxContentSize(Math.round(next));
-  }, [ignoreLayoutForKeyboard, screenSize]);
-  const animatedStyle = useAnimatedNumberStyle(animatedNumber, React.useCallback(val => {
-    "worklet";
-
-    return {
-      transform: [{
-        translateY: frameSize === 0 ? hiddenSize : val
-      }]
-    };
-  }, [frameSize]));
-  const [opacity, setOpacity] = React.useState(open ? 1 : 0);
-  if (open && opacity === 0) {
-    setOpacity(1);
-    if (opacityFallbackTimer.current) {
-      clearTimeout(opacityFallbackTimer.current);
-      opacityFallbackTimer.current = null;
-    }
-  }
-  const forcedContentHeight = hasFit ? void 0 : snapPointsMode === "percent" ? `${maxSnapPoint}${isWeb ? modal ? "dvh" : "%" : "%"}` : maxSnapPoint;
-  const setHasScrollView = React.useCallback(val => {
-    hasScrollView.current = val;
-  }, []);
-  let contents = /* @__PURE__ */jsx(LayoutMeasurementController, {
-    disable: !open,
-    children: /* @__PURE__ */jsx(ParentSheetContext.Provider, {
-      value: nextParentContext,
-      children: /* @__PURE__ */jsx(SheetProvider, {
-        ...providerProps,
-        keyboardOccludedHeight,
-        isKeyboardVisible,
-        keyboardStableFrameHeight,
-        setHasScrollView,
-        children: /* @__PURE__ */jsxs(GestureSheetProvider, {
-          isDragging,
-          blockPan,
-          setBlockPan,
-          panGesture,
-          panGestureRef,
-          children: [/* @__PURE__ */jsx(AnimatePresence, {
-            custom: {
-              open
-            },
-            children: shouldHideParentSheet || !open ? null : overlayComponent
-          }), snapPointsMode !== "percent" && /* @__PURE__ */jsx(View$1, {
-            style: {
-              opacity: 0,
-              position: "absolute",
-              top: 0,
-              left: 0,
-              right: 0,
-              bottom: 0,
-              pointerEvents: "none"
-            },
-            onLayout: handleMaxContentViewLayout
-          }), /* @__PURE__ */jsx(AnimatedView, {
-            ref,
-            onLayout: handleAnimationViewLayout,
-            transition: isDragging || disableAnimation ? null : transition,
-            disableClassName: true,
-            style: [{
-              position: "absolute",
-              zIndex,
-              width: "100%",
-              height: forcedContentHeight,
-              minHeight: forcedContentHeight,
-              opacity: shouldHideParentSheet ? 0 : disableTransparencyHide ? 1 : opacity,
-              ...((shouldHideParentSheet || !open) && {
-                pointerEvents: "none"
-              })
-            }, animatedStyle],
-            children: gestureHandlerEnabled && panGesture ? /* @__PURE__ */jsx(GestureDetectorWrapper, {
-              gesture: panGesture,
-              style: {
-                flex: 1
-              },
-              children: props.children
-            }) : /* @__PURE__ */jsx(View$1, {
-              ...panResponder?.panHandlers,
-              style: {
-                flex: 1,
-                width: "100%",
-                height: "100%"
-              },
-              children: props.children
-            })
-          })]
-        })
-      })
-    })
-  });
-  const shouldMountChildren = unmountChildrenWhenHidden ? !!opacity : true;
-  if (modal) {
-    const RNGHRoot = getGestureHandlerState().RootView;
-    const mountedContents = shouldMountChildren ? /* @__PURE__ */jsx(ContainerComponent, {
-      children: contents
-    }) : null;
-    const modalContents = /* @__PURE__ */jsx(Portal, {
-      stackZIndex: zIndex,
-      ...portalProps,
-      children: mountedContents && RNGHRoot ? /* @__PURE__ */jsx(RNGHRoot, {
-        style: open ? rnghRootStyleOpen : rnghRootStyleClosed,
-        children: mountedContents
-      }) : mountedContents
-    });
-    if (isWeb) return modalContents;
-    return /* @__PURE__ */jsx(SheetInsideSheetContext.Provider, {
-      value: onInnerSheet,
-      children: modalContents
-    });
-  }
-  return contents;
+const sheetEscapeLayers = [];
+const SheetImplementationCustom = createRefComponent(function SheetImplementationCustom2(props, forwardedRef) {
+	const parentSheet = React.useContext(ParentSheetContext);
+	const safeAreaTopInset = useSafeAreaInsets()?.top ?? 0;
+	const { transition, transitionConfig: transitionConfigProp, modal = false, zIndex = parentSheet.zIndex + 1, moveOnKeyboardChange = false, unmountChildrenWhenHidden = false, disableHideWhenClosed = false, portalProps, containerComponent: ContainerComponent = React.Fragment, onTransition } = props;
+	const state = useSheetOpenState(props);
+	const providerProps = useSheetProviderProps(props, state);
+	const { frameSize, setFrameSize, dismissOnSnapToBottom, snapPoints, snapPointsMode, hasFit, position, setPosition, scrollBridge, screenSize, setMaxContentSize, maxSnapPoint } = providerProps;
+	const { open, controller, isHidden } = state;
+	const openRef = React.useRef(open);
+	openRef.current = open;
+	const ref = useComposedRefs(forwardedRef, React.useRef(void 0), providerProps.contentRef);
+	const animationDriver = useAnimationDriver();
+	const transitionConfig = (() => {
+		if (transitionConfigProp) return transitionConfigProp;
+		const timing = (transition ? getTransitionResolver()?.resolve(transition, { animations: animationDriver.animations }) : null)?.all?.timing;
+		if (!timing) return null;
+		if (timing.kind === "timing") return {
+			type: "timing",
+			duration: timing.durationMs
+		};
+		return {
+			type: "spring",
+			stiffness: timing.stiffness,
+			damping: timing.damping,
+			mass: timing.mass
+		};
+	})();
+	const [isShowingInnerSheet, setIsShowingInnerSheet] = React.useState(false);
+	const shouldHideParentSheet = !isWeb && modal && isShowingInnerSheet && needsPortalRepropagation();
+	const sheetInsideSheet = React.useContext(SheetInsideSheetContext);
+	const onInnerSheet = React.useCallback((hasChild) => {
+		setIsShowingInnerSheet(hasChild);
+	}, []);
+	const { keyboardHeight, isKeyboardVisible, dismissKeyboard, pauseKeyboardHandler, flushPendingHide } = useKeyboardControllerSheet({ enabled: Boolean(moveOnKeyboardChange) });
+	const stableFrameSize = React.useRef(frameSize);
+	React.useEffect(() => {
+		if (open && frameSize) stableFrameSize.current = frameSize;
+	}, [open, frameSize]);
+	const isWebKbSheet = isWeb && hasFit && moveOnKeyboardChange;
+	const isNativeKbFitSheet = !isWeb && hasFit && Boolean(moveOnKeyboardChange);
+	const preKeyboardFrameSize = React.useRef(0);
+	React.useEffect(() => {
+		if (isNativeKbFitSheet && open && !isKeyboardVisible && frameSize > 0) preKeyboardFrameSize.current = frameSize;
+	}, [
+		isNativeKbFitSheet,
+		open,
+		isKeyboardVisible,
+		frameSize
+	]);
+	const effScreenSize = isWebKbSheet ? getStableViewportHeight() : screenSize;
+	const effectiveFrameSize = open ? frameSize : stableFrameSize.current || frameSize;
+	const positions = React.useMemo(() => snapPoints.map((point) => getYPositions(snapPointsMode, point, effScreenSize, effectiveFrameSize)), [
+		effScreenSize,
+		effectiveFrameSize,
+		snapPoints,
+		snapPointsMode
+	]);
+	const [isDragging, setIsDragging_] = React.useState(false);
+	const isDraggingRef = React.useRef(false);
+	const setIsDragging = React.useCallback((val) => {
+		isDraggingRef.current = val;
+		pauseKeyboardHandler.current = val;
+		setIsDragging_(val);
+		if (!val) flushPendingHide();
+	}, [pauseKeyboardHandler, flushPendingHide]);
+	const activePositionsRef = React.useRef(positions);
+	const activePositions = React.useMemo(() => {
+		if (isDragging || isDraggingRef.current) return activePositionsRef.current;
+		let result;
+		if (!isKeyboardVisible || keyboardHeight <= 0) result = positions;
+		else result = positions.map((p) => getKeyboardAdjustedSheetY({
+			sheetY: p,
+			screenSize: effScreenSize,
+			isKeyboardVisible,
+			keyboardHeight,
+			shouldTranslate: true,
+			safeAreaTop: isWeb ? getWebVisualViewportOffsetTop() : safeAreaTopInset
+		}));
+		activePositionsRef.current = result;
+		return result;
+	}, [
+		positions,
+		isKeyboardVisible,
+		keyboardHeight,
+		effScreenSize,
+		isDragging,
+		safeAreaTopInset
+	]);
+	const keyboardOccludedHeight = getKeyboardOccludedHeight({
+		frameSize: effectiveFrameSize,
+		isKeyboardVisible,
+		keyboardHeight,
+		screenSize: effScreenSize,
+		sheetY: position >= 0 ? activePositions[position] : void 0
+	});
+	const keyboardStableFrameHeight = isWebKbSheet && isKeyboardVisible && frameSize > 0 ? frameSize : isNativeKbFitSheet && isKeyboardVisible && preKeyboardFrameSize.current > 0 ? preKeyboardFrameSize.current : 0;
+	const AnimatedView = animationDriver.View ?? View;
+	useIsomorphicLayoutEffect(() => {
+		if (!(sheetInsideSheet && open)) return;
+		sheetInsideSheet(true);
+		return () => {
+			sheetInsideSheet(false);
+		};
+	}, [sheetInsideSheet, open]);
+	const nextParentContext = React.useMemo(() => ({ zIndex }), [zIndex]);
+	const startPosition = useDidFinishSSR() && screenSize ? screenSize : hiddenSize;
+	const animatedNumber = useAnimatedNumber(startPosition);
+	const at = React.useRef(startPosition);
+	const hasntMeasured = at.current === hiddenSize;
+	const [disableAnimation, setDisableAnimation] = useState(hasntMeasured);
+	const skipAdaptAnimation = React.useRef(false);
+	if (controller?.skipNextAnimation) skipAdaptAnimation.current = true;
+	const hasScrollView = React.useRef(false);
+	const lastPositionIndexRef = React.useRef(-1);
+	const pendingTransitionRef = React.useRef(null);
+	const emitTransition = useEvent((phase, event, finished) => {
+		const e = {
+			phase,
+			cause: event.cause,
+			position: event.position
+		};
+		if (phase === "end") e.finished = finished;
+		onTransition?.(e);
+		controller?.onTransition?.(e);
+	});
+	const syncAnimatedPosition = useEvent((value) => {
+		at.current = value;
+		scrollBridge.paneY = value;
+		const minY = activePositions[0];
+		const wasAtTop = scrollBridge.isAtTop;
+		const nowAtTop = value <= minY + 5;
+		if (wasAtTop === nowAtTop) return;
+		scrollBridge.isAtTop = nowAtTop;
+		if (nowAtTop) {
+			if (scrollBridge.lockScrollAtTop) {
+				if (scrollBridge.y > 0) {
+					scrollBridge.forceScrollTo?.(0);
+					scrollBridge.y = 0;
+				}
+				scrollBridge.scrollLockY = 0;
+				scrollBridge.setScrollEnabled?.(false, 0);
+				return;
+			}
+			if (scrollBridge.y > 0) {
+				scrollBridge.forceScrollTo?.(0);
+				scrollBridge.y = 0;
+			}
+			scrollBridge.scrollLockY = void 0;
+			scrollBridge.setScrollEnabled?.(true);
+		} else {
+			scrollBridge.scrollLockY = 0;
+			scrollBridge.setScrollEnabled?.(false);
+		}
+	});
+	const setAnimatedPositionDirect = useEvent((value) => {
+		syncAnimatedPosition(value);
+		animatedNumber.setValue(value, { type: "direct" });
+	});
+	const getAnimatedPosition = useEvent(() => {
+		const value = animatedNumber.getValue();
+		syncAnimatedPosition(value);
+		return value;
+	});
+	function stopSpring() {
+		animatedNumber.stop();
+		if (scrollBridge.onFinishAnimate) {
+			scrollBridge.onFinishAnimate();
+			scrollBridge.onFinishAnimate = void 0;
+		}
+	}
+	const animateTo = useEvent((position2, animationOverride) => {
+		if (frameSize === 0) return;
+		const closeTarget = isWeb ? Math.max(effScreenSize, getMaxViewportHeight()) : effScreenSize;
+		const isDismissPosition = dismissOnSnapToBottom && position2 === activePositions.length - 1;
+		const isOpenAnimation = position2 !== -1 && !isHidden && !isDismissPosition;
+		const toValue = isOpenAnimation ? activePositions[position2] : closeTarget;
+		if (at.current === toValue) {
+			if (isDismissPosition) {
+				if (pendingTransitionRef.current) {
+					emitTransition("end", pendingTransitionRef.current, false);
+					pendingTransitionRef.current = null;
+				}
+				stopSpring();
+				const event2 = {
+					cause: "close",
+					position: toValue
+				};
+				lastPositionIndexRef.current = -1;
+				emitTransition("start", event2);
+				syncAnimatedPosition(toValue);
+				setIsFullyClosed(true);
+				emitTransition("end", event2, true);
+			}
+			return;
+		}
+		at.current = toValue;
+		const cause = !isOpenAnimation ? "close" : lastPositionIndexRef.current < 0 ? "open" : "snap";
+		lastPositionIndexRef.current = isOpenAnimation ? position2 : -1;
+		const event = {
+			cause,
+			position: toValue
+		};
+		if (pendingTransitionRef.current) {
+			emitTransition("end", pendingTransitionRef.current, false);
+			pendingTransitionRef.current = null;
+		}
+		stopSpring();
+		const animationCompleteCallback = () => {
+			if (at.current !== toValue) return;
+			syncAnimatedPosition(toValue);
+			pendingTransitionRef.current = null;
+			if (!isOpenAnimation && !openRef.current) setIsFullyClosed(true);
+			emitTransition("end", event, true);
+		};
+		pendingTransitionRef.current = event;
+		emitTransition("start", event);
+		if (skipAdaptAnimation.current) {
+			skipAdaptAnimation.current = false;
+			animatedNumber.setValue(toValue, {
+				type: "timing",
+				duration: 0
+			}, animationCompleteCallback);
+			return;
+		}
+		const resolvedConfig = animationOverride || {
+			type: "spring",
+			...transitionConfig
+		};
+		const springConfig = !resolvedConfig.type || resolvedConfig.type === "spring" ? {
+			restDisplacementThreshold: 1,
+			restSpeedThreshold: 10,
+			energyThreshold: 1e-5,
+			...resolvedConfig
+		} : resolvedConfig;
+		animatedNumber.setValue(toValue, springConfig, animationCompleteCallback);
+	});
+	useIsomorphicLayoutEffect(() => {
+		if (hasntMeasured && screenSize && frameSize) {
+			at.current = screenSize;
+			animatedNumber.setValue(screenSize, {
+				type: "timing",
+				duration: 0
+			}, () => {
+				syncAnimatedPosition(screenSize);
+				setTimeout(() => {
+					setDisableAnimation(false);
+				}, 10);
+			});
+			return;
+		}
+		if (disableAnimation) return;
+		if (isDraggingRef.current) return;
+		if (!frameSize || !screenSize || isHidden || hasntMeasured && !open) return;
+		animateTo(position);
+		if (position === -1) {
+			scrollBridge.scrollLock = false;
+			scrollBridge.scrollStartY = -1;
+		}
+		if (open && position >= 0) {
+			const isTopPosition = position === 0;
+			scrollBridge.isAtTop = isTopPosition;
+			if (isTopPosition) {
+				scrollBridge.scrollLockY = void 0;
+				scrollBridge.setScrollEnabled?.(true);
+			} else {
+				scrollBridge.scrollLockY = 0;
+				scrollBridge.setScrollEnabled?.(false);
+			}
+		}
+	}, [
+		hasntMeasured,
+		disableAnimation,
+		isHidden,
+		frameSize,
+		screenSize,
+		open,
+		position
+	]);
+	const disableDrag = props.disableDrag ?? controller?.disableDrag;
+	useThemeName();
+	const [blockPan, setBlockPan] = React.useState(false);
+	const panConfig = React.useMemo(() => {
+		if (disableDrag) return null;
+		if (!frameSize) return null;
+		if (isShowingInnerSheet) return null;
+		const minY = activePositions[0];
+		scrollBridge.paneMinY = minY;
+		let startY = at.current;
+		function setPanning(val) {
+			setIsDragging(val);
+			if (!sheetHiddenStyleSheet) {
+				sheetHiddenStyleSheet = document.createElement("style");
+				if (typeof document.head !== "undefined") document.head.appendChild(sheetHiddenStyleSheet);
+			}
+			if (!val) sheetHiddenStyleSheet.innerText = "";
+			else sheetHiddenStyleSheet.innerText = ":root * { user-select: none !important; -webkit-user-select: none !important; }";
+		}
+		const release = ({ vy }) => {
+			scrollBridge.setParentDragging(false);
+			if (scrollBridge.scrollLock) return;
+			isExternalDrag = false;
+			previouslyScrolling = false;
+			setPanning(false);
+			const currentPos = at.current;
+			const closestPoint = getSheetReleasePosition({
+				positions: activePositions,
+				projectedEnd: currentPos + frameSize * vy * .2,
+				currentPosition: currentPos,
+				frameSize,
+				dismissOnSnapToBottom,
+				snapPointsMode,
+				isKeyboardVisible,
+				isWeb
+			});
+			setPosition(closestPoint);
+			animateTo(closestPoint);
+		};
+		const finish = (_e, state2) => {
+			release({
+				vy: state2.vy,
+				dragAt: state2.dy
+			});
+		};
+		let previouslyScrolling = false;
+		const onMoveShouldSet = (e, { dy }) => {
+			function getShouldSet() {
+				if (e.target === providerProps.handleRef.current) return true;
+				if (scrollBridge.scrollNodeTouched) return false;
+				if (scrollBridge.hasScrollableContent === true) {
+					if (scrollBridge.scrollLock) return false;
+					const isScrolled = scrollBridge.y !== 0;
+					const isDraggingUp = dy < 0;
+					const isNearTop = scrollBridge.paneY - 5 <= scrollBridge.paneMinY;
+					if (isScrolled) return false;
+					if (isNearTop) {
+						if (hasScrollView.current && isDraggingUp) return false;
+					}
+				}
+				return Math.abs(dy) > 10;
+			}
+			const granted = getShouldSet();
+			if (granted) scrollBridge.setParentDragging(true);
+			return granted;
+		};
+		const grant = () => {
+			setPanning(true);
+			stopSpring();
+			startY = getAnimatedPosition();
+		};
+		let isExternalDrag = false;
+		scrollBridge.startPanDrag = () => {
+			isExternalDrag = true;
+			grant();
+		};
+		scrollBridge.drag = (dy) => {
+			if (!isExternalDrag) {
+				isExternalDrag = true;
+				grant();
+			}
+			setAnimatedPositionDirect(resisted(dy + startY, minY));
+		};
+		scrollBridge.release = release;
+		scrollBridge.snapToPosition = (positionIndex) => {
+			isExternalDrag = false;
+			setPanning(false);
+			setPosition(positionIndex);
+			animateTo(positionIndex);
+		};
+		return {
+			onMoveShouldSetPanResponder: onMoveShouldSet,
+			onPanResponderTerminationRequest: () => false,
+			onPanResponderGrant: grant,
+			onPanResponderMove: (_e, { dy }) => {
+				const to = resisted(dy + startY, minY);
+				if (to <= minY) scrollBridge.setParentDragging(false);
+				else scrollBridge.setParentDragging(true);
+				setAnimatedPositionDirect(to);
+			},
+			onPanResponderEnd: finish,
+			onPanResponderTerminate: finish,
+			onPanResponderRelease: finish
+		};
+	}, [
+		disableDrag,
+		isShowingInnerSheet,
+		animateTo,
+		frameSize,
+		activePositions,
+		setPosition,
+		dismissOnSnapToBottom,
+		snapPointsMode
+	]);
+	React.useEffect(() => {
+		if (isDragging || isHidden || !open || disableAnimation) return;
+		if (!frameSize || !screenSize) return;
+		animateTo(position, {
+			type: "timing",
+			duration: 250
+		});
+	}, [isKeyboardVisible, keyboardHeight]);
+	const wasDragging = React.useRef(false);
+	React.useEffect(() => {
+		if (isDragging) {
+			wasDragging.current = true;
+			return;
+		}
+		if (!wasDragging.current) return;
+		wasDragging.current = false;
+		if (!frameSize || !screenSize || isHidden || !open) return;
+		animateTo(position);
+	}, [isDragging]);
+	React.useEffect(() => {
+		if (!open && isKeyboardVisible) {
+			dismissKeyboard();
+			pauseKeyboardHandler.current = false;
+			flushPendingHide();
+		}
+	}, [open]);
+	React.useEffect(() => {
+		if (!isWeb || !modal || !open || shouldHideParentSheet) return;
+		const layer = {};
+		sheetEscapeLayers.push(layer);
+		const onKeyDown = (event) => {
+			if (event.key === "Escape") {
+				if (sheetEscapeLayers[sheetEscapeLayers.length - 1] === layer) state.setOpen(false);
+			}
+		};
+		document.addEventListener("keydown", onKeyDown);
+		return () => {
+			const index = sheetEscapeLayers.indexOf(layer);
+			if (index > -1) sheetEscapeLayers.splice(index, 1);
+			document.removeEventListener("keydown", onKeyDown);
+		};
+	}, [
+		modal,
+		open,
+		shouldHideParentSheet,
+		state.setOpen
+	]);
+	const { panGesture, panGestureRef, gestureHandlerEnabled } = useGestureHandlerPan({
+		positions: activePositions,
+		frameSize,
+		setPosition,
+		animateTo,
+		stopSpring,
+		scrollBridge,
+		setIsDragging,
+		getCurrentPosition: getAnimatedPosition,
+		resisted,
+		disableDrag,
+		isShowingInnerSheet,
+		setAnimatedPosition: setAnimatedPositionDirect,
+		dismissOnSnapToBottom,
+		snapPointsMode,
+		isKeyboardVisible,
+		pauseKeyboardHandler
+	});
+	const ignoreLayoutForKeyboard = useEvent(() => isWeb && moveOnKeyboardChange && getWebKeyboardResizeHeight() >= MIN_KEYBOARD_HEIGHT);
+	const handleAnimationViewLayout = useEvent((e) => {
+		if (!open && stableFrameSize.current !== 0) return;
+		const layoutHeight = e.nativeEvent?.layout.height;
+		if (ignoreLayoutForKeyboard() && frameSize > 0) return;
+		const next = modal ? Math.min(layoutHeight, getStableViewportHeight()) : layoutHeight;
+		if (!next) return;
+		setFrameSize(Math.round(next));
+	});
+	const handleMaxContentViewLayout = React.useCallback((e) => {
+		if (ignoreLayoutForKeyboard() && screenSize > 0) return;
+		const next = Math.min(e.nativeEvent?.layout.height, getStableViewportHeight());
+		if (!next) return;
+		setMaxContentSize(Math.round(next));
+	}, [ignoreLayoutForKeyboard, screenSize]);
+	const animatedStyle = useAnimatedNumberStyle(animatedNumber, React.useCallback((val) => {
+		"worklet";
+		return { transform: [{ translateY: frameSize === 0 ? hiddenSize : val }] };
+	}, [frameSize]));
+	const [isFullyClosed, setIsFullyClosed] = React.useState(false);
+	if (open && isFullyClosed) setIsFullyClosed(false);
+	const hasEverOpened = React.useRef(open);
+	if (open) hasEverOpened.current = true;
+	const isVisuallyActive = open || hasEverOpened.current && !isFullyClosed;
+	const applyHidden = shouldHideParentSheet || isFullyClosed && !disableHideWhenClosed;
+	const forcedContentHeight = hasFit ? void 0 : snapPointsMode === "percent" ? `${maxSnapPoint}${isWeb ? modal ? "dvh" : "%" : "%"}` : maxSnapPoint;
+	const setHasScrollView = React.useCallback((val) => {
+		hasScrollView.current = val;
+	}, []);
+	const animatedPositionValue = React.useMemo(() => ({
+		value: animatedNumber,
+		screenSize: effScreenSize,
+		frameSize,
+		snapOffsets: activePositions,
+		minY: activePositions[0] ?? 0
+	}), [
+		animatedNumber,
+		effScreenSize,
+		frameSize,
+		activePositions
+	]);
+	const { overlayChildren, animatedChildren } = React.useMemo(() => partitionSheetChildren(props.children), [props.children]);
+	let contents = /* @__PURE__ */ jsx(LayoutMeasurementController, {
+		disable: !open,
+		children: /* @__PURE__ */ jsx(ParentSheetContext.Provider, {
+			value: nextParentContext,
+			children: /* @__PURE__ */ jsx(SheetProvider, {
+				...providerProps,
+				keyboardOccludedHeight,
+				isKeyboardVisible,
+				keyboardStableFrameHeight,
+				setHasScrollView,
+				children: /* @__PURE__ */ jsx(GestureSheetProvider, {
+					isDragging,
+					blockPan,
+					setBlockPan,
+					panGesture,
+					panGestureRef,
+					children: /* @__PURE__ */ jsxs(SheetAnimatedPositionContext.Provider, {
+						value: animatedPositionValue,
+						children: [
+							/* @__PURE__ */ jsx(SheetOverlayLayerContext.Provider, {
+								value: true,
+								children: /* @__PURE__ */ jsx(AnimatePresence, {
+									custom: { open },
+									children: shouldHideParentSheet || !open ? null : overlayChildren
+								})
+							}),
+							snapPointsMode !== "percent" && /* @__PURE__ */ jsx(View, {
+								opacity: 0,
+								position: "absolute",
+								inset: 0,
+								pointerEvents: "none",
+								onLayout: handleMaxContentViewLayout
+							}),
+							/* @__PURE__ */ jsx(AnimatedView, {
+								ref,
+								onLayout: handleAnimationViewLayout,
+								transition: isDragging || disableAnimation ? null : transition,
+								disableClassName: true,
+								style: [{
+									position: "absolute",
+									zIndex,
+									width: "100%",
+									height: forcedContentHeight,
+									minHeight: forcedContentHeight,
+									...applyHidden && { display: "none" },
+									...(shouldHideParentSheet || !open) && { pointerEvents: "none" }
+								}, animatedStyle],
+								children: /* @__PURE__ */ jsx(SheetDragSurface, {
+									gestureHandlerEnabled,
+									panGesture,
+									panConfig,
+									children: animatedChildren
+								})
+							})
+						]
+					})
+				})
+			})
+		})
+	});
+	const shouldMountChildren = unmountChildrenWhenHidden ? !isFullyClosed : true;
+	if (modal) {
+		const RNGHRoot = getGestureHandlerState().RootView;
+		const mountedContents = shouldMountChildren ? /* @__PURE__ */ jsx(ContainerComponent, { children: contents }) : null;
+		const modalContents = /* @__PURE__ */ jsx(Portal, {
+			stackZIndex: zIndex,
+			hidden: !isVisuallyActive,
+			...portalProps,
+			children: mountedContents && RNGHRoot ? /* @__PURE__ */ jsx(RNGHRoot, {
+				style: open ? rnghRootStyleOpen : rnghRootStyleClosed,
+				children: mountedContents
+			}) : mountedContents
+		});
+		if (isWeb) return modalContents;
+		return /* @__PURE__ */ jsx(SheetInsideSheetContext.Provider, {
+			value: onInnerSheet,
+			children: modalContents
+		});
+	}
+	return contents;
 });
+function isSheetOverlayComponent(type) {
+	let staticConfig = type?.staticConfig;
+	while (staticConfig) {
+		if (staticConfig[SHEET_OVERLAY_MARKER]) return true;
+		staticConfig = staticConfig.parentStaticConfig;
+	}
+	return false;
+}
+function partitionSheetChildren(children) {
+	const overlayChildren = [];
+	const animatedChildren = [];
+	React.Children.forEach(children, (child) => {
+		if (!React.isValidElement(child)) {
+			animatedChildren.push(child);
+			return;
+		}
+		if (isSheetOverlayComponent(child.type)) {
+			overlayChildren.push(child);
+			return;
+		}
+		animatedChildren.push(child);
+	});
+	return {
+		overlayChildren,
+		animatedChildren
+	};
+}
 function getYPositions(mode, point, screenSize, frameSize) {
-  if (!screenSize || !frameSize) return 0;
-  if (mode === "mixed") {
-    if (typeof point === "number") return screenSize - Math.min(screenSize, Math.max(0, point));
-    if (point === "fit") return screenSize - Math.min(screenSize, frameSize);
-    if (point.endsWith("%")) {
-      const pct2 = Math.min(100, Math.max(0, Number(point.slice(0, -1)))) / 100;
-      if (Number.isNaN(pct2)) {
-        console.warn("Invalid snapPoint percentage string");
-        return 0;
-      }
-      return Math.round(screenSize - pct2 * screenSize);
-    }
-    console.warn("Invalid snapPoint unknown value");
-    return 0;
-  }
-  if (mode === "fit") {
-    if (point === 0) return screenSize;
-    return screenSize - Math.min(screenSize, frameSize);
-  }
-  if (mode === "constant" && typeof point === "number") return screenSize - Math.min(screenSize, Math.max(0, point));
-  const pct = Math.min(100, Math.max(0, Number(point))) / 100;
-  if (Number.isNaN(pct)) {
-    console.warn("Invalid snapPoint percentage");
-    return 0;
-  }
-  return Math.round(screenSize - pct * screenSize);
+	if (!screenSize || !frameSize) return 0;
+	if (mode === "mixed") {
+		if (typeof point === "number") return screenSize - Math.min(screenSize, Math.max(0, point));
+		if (point === "fit") return screenSize - Math.min(screenSize, frameSize);
+		if (point.endsWith("%")) {
+			const pct2 = Math.min(100, Math.max(0, Number(point.slice(0, -1)))) / 100;
+			if (Number.isNaN(pct2)) {
+				console.warn(formatDiagnostic("TAMAGUI_SHEET_SNAP_POINT", "Sheet", "snapPoints contains an invalid percentage string", "Use \"fit\", a pixel number, or a percentage such as \"50%\"", "snapPoint", point));
+				return 0;
+			}
+			return Math.round(screenSize - pct2 * screenSize);
+		}
+		console.warn(formatDiagnostic("TAMAGUI_SHEET_SNAP_POINT", "Sheet", "snapPoints contains an unsupported mixed-mode value", "Use \"fit\", a pixel number, or a percentage such as \"50%\"", "snapPoint", point));
+		return 0;
+	}
+	if (mode === "fit") {
+		if (point === 0) return screenSize;
+		return screenSize - Math.min(screenSize, frameSize);
+	}
+	if (mode === "constant" && typeof point === "number") return screenSize - Math.min(screenSize, Math.max(0, point));
+	const pct = Math.min(100, Math.max(0, Number(point))) / 100;
+	if (Number.isNaN(pct)) {
+		console.warn(formatDiagnostic("TAMAGUI_SHEET_SNAP_POINT", "Sheet", "snapPoints contains a value that cannot be converted to a percentage", "Use a numeric percentage such as 50", "snapPoint", point));
+		return 0;
+	}
+	return Math.round(screenSize - pct * screenSize);
 }
-export { SheetImplementationCustom };
+
+export { SheetImplementationCustom, isSheetOverlayComponent };
 //# sourceMappingURL=SheetImplementationCustom.mjs.map