@tamagui/popper 2.7.7 → 3.0.0-beta.643.1

package/dist/esm/Popper.native.js

@@ -2,588 +2,486 @@ import { jsx } from "react/jsx-runtime";
 import { flushSync } from "react-dom";
 import { useComposedRefs } from "@tamagui/compose-refs";
 import { isWeb, useIsomorphicLayoutEffect } from "@tamagui/constants";
-import { LayoutMeasurementController, View, createStyledContext, getVariableValue, registerLayoutNode, styled } from "@tamagui/core";
+import { LayoutMeasurementController, View, createRefComponent, createStyledContext, createStyledHOC, getVariableValue, registerLayoutNode, styled } from "@tamagui/core";
 import { FloatingOverrideContext, arrow, flip, getOverflowAncestors, offset, platform, shift, useFloating } from "@tamagui/floating";
-import { getSpace } from "@tamagui/get-token";
-import { YStack } from "@tamagui/stacks";
+import { getSize } from "@tamagui/get-token";
 import { startTransition } from "@tamagui/start-transition";
 import * as React from "react";
 import { Keyboard, useWindowDimensions } from "react-native";
+
 function _instanceof(left, right) {
-  if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) return !!right[Symbol.hasInstance](left);else return left instanceof right;
+	if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) return !!right[Symbol.hasInstance](left);
+	else return left instanceof right;
 }
 function _type_of(obj) {
-  "@swc/helpers - typeof";
-
-  return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
+	"@swc/helpers - typeof";
+	return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
 }
 var PopperContextFast = createStyledContext({}, "Popper__");
 var PopperPositionContext = createStyledContext;
-var {
-  useStyledContext: usePopperContext,
-  Provider: PopperProviderFast
-} = PopperContextFast;
+var { useStyledContext: usePopperContext, Provider: PopperProviderFast } = PopperContextFast;
 var PopperContextSlow = createStyledContext({}, "PopperSlow__");
-var {
-  useStyledContext: usePopperContextSlow,
-  Provider: PopperProviderSlow
-} = PopperContextSlow;
-var PopperProvider = function (param) {
-  var {
-    scope,
-    children,
-    ...context
-  } = param;
-  var fns = React.useRef(context);
-  fns.current = context;
-  var [slowContext] = React.useState(function () {
-    return {
-      refs: context.refs,
-      triggerElements: context.triggerElements,
-      update() {
-        for (var _len = arguments.length, a = new Array(_len), _key = 0; _key < _len; _key++) a[_key] = arguments[_key];
-        fns.current.update(...a);
-      },
-      getReferenceProps(p) {
-        var _fns_current_getReferenceProps, _fns_current;
-        return (_fns_current_getReferenceProps = (_fns_current = fns.current).getReferenceProps) === null || _fns_current_getReferenceProps === void 0 ? void 0 : _fns_current_getReferenceProps.call(_fns_current, p);
-      },
-      onHoverReference(e) {
-        var _fns_current_onHoverReference, _fns_current;
-        (_fns_current_onHoverReference = (_fns_current = fns.current).onHoverReference) === null || _fns_current_onHoverReference === void 0 || _fns_current_onHoverReference.call(_fns_current, e);
-      },
-      onLeaveReference() {
-        var _fns_current_onLeaveReference, _fns_current;
-        (_fns_current_onLeaveReference = (_fns_current = fns.current).onLeaveReference) === null || _fns_current_onLeaveReference === void 0 || _fns_current_onLeaveReference.call(_fns_current);
-      }
-    };
-  });
-  return /* @__PURE__ */jsx(PopperProviderFast, {
-    scope,
-    ...context,
-    children: /* @__PURE__ */jsx(PopperProviderSlow, {
-      scope,
-      ...slowContext,
-      children
-    })
-  });
+var { useStyledContext: usePopperContextSlow, Provider: PopperProviderSlow } = PopperContextSlow;
+var PopperProvider = function(param) {
+	var { scope, children, ...context } = param;
+	var fns = React.useRef(context);
+	fns.current = context;
+	var [slowContext] = React.useState(function() {
+		return {
+			refs: context.refs,
+			triggerElements: context.triggerElements,
+			update() {
+				for (var _len = arguments.length, a = new Array(_len), _key = 0; _key < _len; _key++) a[_key] = arguments[_key];
+				fns.current.update(...a);
+			},
+			getReferenceProps(p) {
+				var _fns_current_getReferenceProps, _fns_current;
+				return (_fns_current_getReferenceProps = (_fns_current = fns.current).getReferenceProps) === null || _fns_current_getReferenceProps === void 0 ? void 0 : _fns_current_getReferenceProps.call(_fns_current, p);
+			},
+			onHoverReference(e) {
+				var _fns_current_onHoverReference, _fns_current;
+				(_fns_current_onHoverReference = (_fns_current = fns.current).onHoverReference) === null || _fns_current_onHoverReference === void 0 || _fns_current_onHoverReference.call(_fns_current, e);
+			},
+			onLeaveReference() {
+				var _fns_current_onLeaveReference, _fns_current;
+				(_fns_current_onLeaveReference = (_fns_current = fns.current).onLeaveReference) === null || _fns_current_onLeaveReference === void 0 || _fns_current_onLeaveReference.call(_fns_current);
+			}
+		};
+	});
+	return /* @__PURE__ */ jsx(PopperProviderFast, {
+		scope,
+		...context,
+		children: /* @__PURE__ */ jsx(PopperProviderSlow, {
+			scope,
+			...slowContext,
+			children
+		})
+	});
 };
 var checkFloating = {
-  name: "checkFloating",
-  fn(data) {
-    return {
-      data: {
-        hasFloating: !!data.rects.floating.width
-      }
-    };
-  }
+	name: "checkFloating",
+	fn(data) {
+		return { data: { hasFloating: !!data.rects.floating.width } };
+	}
 };
 var setupOptions = {};
 function setupPopper(options) {
-  Object.assign(setupOptions, options);
+	Object.assign(setupOptions, options);
 }
 function tamaguiAutoUpdate(reference, floating, update) {
-  update();
-  var rafId = requestAnimationFrame(function () {
-    update();
-    rafId = 0;
-  });
-  var cleanups = [function () {
-    if (rafId) cancelAnimationFrame(rafId);
-  }];
-  if (_instanceof(reference, HTMLElement)) cleanups.push(registerLayoutNode(reference, update));
-  if (typeof ResizeObserver !== "undefined") {
-    var lastWidth = -1;
-    var lastHeight = -1;
-    var ro = new ResizeObserver(function (entries) {
-      var entry = entries[entries.length - 1];
-      if (!entry) return;
-      var {
-        width,
-        height
-      } = entry.contentRect;
-      if (lastWidth === -1) {
-        lastWidth = width;
-        lastHeight = height;
-        return;
-      }
-      if (width !== lastWidth || height !== lastHeight) {
-        lastWidth = width;
-        lastHeight = height;
-        update();
-      }
-    });
-    ro.observe(floating);
-    cleanups.push(function () {
-      return ro.disconnect();
-    });
-  }
-  var ancestors = [...(_instanceof(reference, Element) ? getOverflowAncestors(reference) : []), ...getOverflowAncestors(floating)];
-  var uniqueAncestors = [...new Set(ancestors)];
-  var _iteratorNormalCompletion = true,
-    _didIteratorError = false,
-    _iteratorError = void 0;
-  try {
-    for (var _iterator = uniqueAncestors[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) _step.value.addEventListener("scroll", update, {
-      passive: true
-    });
-  } catch (err) {
-    _didIteratorError = true;
-    _iteratorError = err;
-  } finally {
-    try {
-      if (!_iteratorNormalCompletion && _iterator.return != null) _iterator.return();
-    } finally {
-      if (_didIteratorError) throw _iteratorError;
-    }
-  }
-  window.addEventListener("resize", update);
-  cleanups.push(function () {
-    var _iteratorNormalCompletion2 = true,
-      _didIteratorError2 = false,
-      _iteratorError2 = void 0;
-    try {
-      for (var _iterator2 = uniqueAncestors[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) _step2.value.removeEventListener("scroll", update);
-    } catch (err) {
-      _didIteratorError2 = true;
-      _iteratorError2 = err;
-    } finally {
-      try {
-        if (!_iteratorNormalCompletion2 && _iterator2.return != null) _iterator2.return();
-      } finally {
-        if (_didIteratorError2) throw _iteratorError2;
-      }
-    }
-    window.removeEventListener("resize", update);
-  });
-  return function () {
-    return cleanups.forEach(function (fn) {
-      return fn();
-    });
-  };
+	update();
+	var rafId = requestAnimationFrame(function() {
+		update();
+		rafId = 0;
+	});
+	var cleanups = [function() {
+		if (rafId) cancelAnimationFrame(rafId);
+	}];
+	if (_instanceof(reference, HTMLElement)) cleanups.push(registerLayoutNode(reference, update));
+	if (typeof ResizeObserver !== "undefined") {
+		var lastWidth = -1;
+		var lastHeight = -1;
+		var ro = new ResizeObserver(function(entries) {
+			var entry = entries[entries.length - 1];
+			if (!entry) return;
+			var { width, height } = entry.contentRect;
+			if (lastWidth === -1) {
+				lastWidth = width;
+				lastHeight = height;
+				return;
+			}
+			if (width !== lastWidth || height !== lastHeight) {
+				lastWidth = width;
+				lastHeight = height;
+				update();
+			}
+		});
+		ro.observe(floating);
+		cleanups.push(function() {
+			return ro.disconnect();
+		});
+	}
+	var ancestors = [..._instanceof(reference, Element) ? getOverflowAncestors(reference) : [], ...getOverflowAncestors(floating)];
+	var uniqueAncestors = [...new Set(ancestors)];
+	var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+	try {
+		for (var _iterator = uniqueAncestors[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) _step.value.addEventListener("scroll", update, { passive: true });
+	} catch (err) {
+		_didIteratorError = true;
+		_iteratorError = err;
+	} finally {
+		try {
+			if (!_iteratorNormalCompletion && _iterator.return != null) _iterator.return();
+		} finally {
+			if (_didIteratorError) throw _iteratorError;
+		}
+	}
+	window.addEventListener("resize", update);
+	cleanups.push(function() {
+		var _iteratorNormalCompletion2 = true, _didIteratorError2 = false, _iteratorError2 = void 0;
+		try {
+			for (var _iterator2 = uniqueAncestors[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) _step2.value.removeEventListener("scroll", update);
+		} catch (err) {
+			_didIteratorError2 = true;
+			_iteratorError2 = err;
+		} finally {
+			try {
+				if (!_iteratorNormalCompletion2 && _iterator2.return != null) _iterator2.return();
+			} finally {
+				if (_didIteratorError2) throw _iteratorError2;
+			}
+		}
+		window.removeEventListener("resize", update);
+	});
+	return function() {
+		return cleanups.forEach(function(fn) {
+			return fn();
+		});
+	};
 }
 function Popper(props) {
-  var {
-    children,
-    size,
-    strategy = "absolute",
-    placement = "bottom",
-    stayInFrame,
-    allowFlip,
-    offset: offset$1,
-    disableRTL,
-    resize,
-    passThrough,
-    open,
-    scope
-  } = props;
-  var [arrowEl, setArrow] = React.useState(null);
-  var [arrowSize, setArrowSize] = React.useState(0);
-  var offsetOptions = offset$1 !== null && offset$1 !== void 0 ? offset$1 : arrowSize;
-  React.useRef({});
-  var isOpen = passThrough ? false : open !== null && open !== void 0 ? open : true;
-  var middlewareRef = React.useRef([]);
-  if (isOpen) middlewareRef.current = [typeof offsetOptions !== "undefined" ? offset(offsetOptions) : null, allowFlip ? flip(typeof allowFlip === "boolean" ? {} : allowFlip) : null, stayInFrame ? shift({
-    padding: 10,
-    mainAxis: true,
-    crossAxis: false,
-    ...((typeof stayInFrame === "undefined" ? "undefined" : _type_of(stayInFrame)) === "object" ? stayInFrame : null)
-  }) : null, arrowEl ? arrow({
-    element: arrowEl
-  }) : null, checkFloating, null, null, null].filter(Boolean);
-  var floating = useFloating({
-    open: isOpen,
-    strategy,
-    placement,
-    sameScrollView: false,
-    whileElementsMounted: !isOpen ? void 0 : tamaguiAutoUpdate,
-    platform: (disableRTL !== null && disableRTL !== void 0 ? disableRTL : setupOptions.disableRTL) ? {
-      ...platform,
-      isRTL(element) {
-        return false;
-      }
-    } : platform,
-    middleware: middlewareRef.current
-  });
-  var {
-    middlewareData
-  } = floating;
-  var dimensions = useWindowDimensions();
-  var [keyboardOpen, setKeyboardOpen] = React.useState(false);
-  React.useEffect(function () {
-    var showSubscription = Keyboard.addListener("keyboardDidShow", function () {
-      startTransition(function () {
-        setKeyboardOpen(true);
-      });
-    });
-    var hideSubscription = Keyboard.addListener("keyboardDidHide", function () {
-      startTransition(function () {
-        setKeyboardOpen(false);
-      });
-    });
-    return function () {
-      showSubscription.remove();
-      hideSubscription.remove();
-    };
-  }, []);
-  useIsomorphicLayoutEffect(function () {
-    if (passThrough) return;
-    floating.update();
-  }, [passThrough, dimensions, keyboardOpen]);
-  return /* @__PURE__ */jsx(PopperProvider, {
-    scope,
-    ...React.useMemo(function () {
-      var _middlewareData_checkFloating;
-      return {
-        size,
-        arrowRef: setArrow,
-        arrowStyle: middlewareData.arrow,
-        onArrowSize: setArrowSize,
-        hasFloating: (_middlewareData_checkFloating = middlewareData.checkFloating) === null || _middlewareData_checkFloating === void 0 ? void 0 : _middlewareData_checkFloating.hasFloating,
-        transformOrigin: middlewareData.transformOrigin,
-        open: !!open,
-        ...floating
-      };
-    }, [open, size, floating, JSON.stringify(middlewareData.arrow || null), JSON.stringify(middlewareData.transformOrigin || null)]),
-    children: /* @__PURE__ */jsx(FloatingOverrideContext.Provider, {
-      value: null,
-      children
-    })
-  });
+	var { children, size, strategy = "absolute", placement = "bottom", stayInFrame, allowFlip, offset: offset$1, disableRTL, resize, passThrough, open, scope } = props;
+	var [arrowEl, setArrow] = React.useState(null);
+	var [arrowSize, setArrowSize] = React.useState(0);
+	var offsetOptions = offset$1 !== null && offset$1 !== void 0 ? offset$1 : arrowSize;
+	React.useRef({});
+	var isOpen = passThrough ? false : open !== null && open !== void 0 ? open : true;
+	var middlewareRef = React.useRef([]);
+	if (isOpen) middlewareRef.current = [
+		typeof offsetOptions !== "undefined" ? offset(offsetOptions) : null,
+		allowFlip ? flip(typeof allowFlip === "boolean" ? {} : allowFlip) : null,
+		stayInFrame ? shift({
+			padding: 10,
+			mainAxis: true,
+			crossAxis: false,
+			...(typeof stayInFrame === "undefined" ? "undefined" : _type_of(stayInFrame)) === "object" ? stayInFrame : null
+		}) : null,
+		arrowEl ? arrow({ element: arrowEl }) : null,
+		checkFloating,
+		null,
+		null,
+		null
+	].filter(Boolean);
+	var floating = useFloating({
+		open: isOpen,
+		strategy,
+		placement,
+		sameScrollView: false,
+		whileElementsMounted: !isOpen ? void 0 : tamaguiAutoUpdate,
+		platform: (disableRTL !== null && disableRTL !== void 0 ? disableRTL : setupOptions.disableRTL) ? {
+			...platform,
+			isRTL(element) {
+				return false;
+			}
+		} : platform,
+		middleware: middlewareRef.current
+	});
+	var { middlewareData } = floating;
+	var dimensions = useWindowDimensions();
+	var [keyboardOpen, setKeyboardOpen] = React.useState(false);
+	React.useEffect(function() {
+		var showSubscription = Keyboard.addListener("keyboardDidShow", function() {
+			startTransition(function() {
+				setKeyboardOpen(true);
+			});
+		});
+		var hideSubscription = Keyboard.addListener("keyboardDidHide", function() {
+			startTransition(function() {
+				setKeyboardOpen(false);
+			});
+		});
+		return function() {
+			showSubscription.remove();
+			hideSubscription.remove();
+		};
+	}, []);
+	useIsomorphicLayoutEffect(function() {
+		if (passThrough) return;
+		floating.update();
+	}, [
+		passThrough,
+		dimensions,
+		keyboardOpen
+	]);
+	return /* @__PURE__ */ jsx(PopperProvider, {
+		scope,
+		...React.useMemo(function() {
+			var _middlewareData_checkFloating;
+			return {
+				size,
+				arrowRef: setArrow,
+				arrowStyle: middlewareData.arrow,
+				onArrowSize: setArrowSize,
+				hasFloating: (_middlewareData_checkFloating = middlewareData.checkFloating) === null || _middlewareData_checkFloating === void 0 ? void 0 : _middlewareData_checkFloating.hasFloating,
+				transformOrigin: middlewareData.transformOrigin,
+				open: !!open,
+				...floating
+			};
+		}, [
+			open,
+			size,
+			floating,
+			JSON.stringify(middlewareData.arrow || null),
+			JSON.stringify(middlewareData.transformOrigin || null)
+		]),
+		children: /* @__PURE__ */ jsx(FloatingOverrideContext.Provider, {
+			value: null,
+			children
+		})
+	});
 }
-var PopperAnchor = YStack.styleable(function PopperAnchor2(props, forwardedRef) {
-  var {
-    virtualRef,
-    scope,
-    ...rest
-  } = props;
-  var context = usePopperContextSlow(scope);
-  var {
-    getReferenceProps,
-    refs,
-    update
-  } = context;
-  var ref = React.useRef(null);
-  var triggerId = React.useId();
-  React.useEffect(function () {
-    if (!scope || !context.triggerElements || !ref.current) return;
-    if (!_instanceof(ref.current, Element)) return;
-    var el = ref.current;
-    context.triggerElements.add(triggerId, el);
-    return function () {
-      var _context_triggerElements;
-      (_context_triggerElements = context.triggerElements) === null || _context_triggerElements === void 0 || _context_triggerElements.delete(triggerId);
-    };
-  }, [scope, triggerId, context.triggerElements]);
-  React.useEffect(function () {
-    if (virtualRef) {
-      refs.setReference(virtualRef.current);
-      update();
-    }
-  }, [virtualRef]);
-  var refProps = (getReferenceProps === null || getReferenceProps === void 0 ? void 0 : getReferenceProps({
-    ...rest,
-    ref
-  })) || null;
-  var safeSetReference = React.useCallback(function (node) {
-    startTransition(function () {
-      refs.setReference(node);
-    });
-  }, [refs]);
-  var shouldHandleInHover = isWeb && scope;
-  var composedRefs = useComposedRefs(forwardedRef, ref, shouldHandleInHover ? void 0 : safeSetReference);
-  return /* @__PURE__ */jsx(View, {
-    ...rest,
-    ...refProps,
-    ref: composedRefs,
-    ...(shouldHandleInHover && {
-      onMouseEnter: function (e) {
-        var _e_currentTarget;
-        var el = (_e_currentTarget = e.currentTarget) !== null && _e_currentTarget !== void 0 ? _e_currentTarget : ref.current;
-        if (_instanceof(el, HTMLElement)) {
-          var _refProps_onPointerEnter, _context_onHoverReference;
-          flushSync(function () {
-            return refs.setReference(el);
-          });
-          update();
-          if (!refProps) return;
-          (_refProps_onPointerEnter = refProps.onPointerEnter) === null || _refProps_onPointerEnter === void 0 || _refProps_onPointerEnter.call(refProps, e);
-          (_context_onHoverReference = context.onHoverReference) === null || _context_onHoverReference === void 0 || _context_onHoverReference.call(context, e.nativeEvent);
-        }
-      },
-      onMouseLeave: function (e) {
-        var _context_onLeaveReference, _refProps_onMouseLeave;
-        (_context_onLeaveReference = context.onLeaveReference) === null || _context_onLeaveReference === void 0 || _context_onLeaveReference.call(context);
-        refProps === null || refProps === void 0 || (_refProps_onMouseLeave = refProps.onMouseLeave) == null || _refProps_onMouseLeave.call(refProps, e);
-      }
-    })
-  });
+var PopperAnchor = createStyledHOC(View, function PopperAnchor2(props, forwardedRef) {
+	var { virtualRef, scope, ...rest } = props;
+	var context = usePopperContextSlow(scope);
+	var { getReferenceProps, refs, update } = context;
+	var ref = React.useRef(null);
+	var triggerId = React.useId();
+	React.useEffect(function() {
+		if (!scope || !context.triggerElements || !ref.current) return;
+		if (!_instanceof(ref.current, Element)) return;
+		var el = ref.current;
+		context.triggerElements.add(triggerId, el);
+		return function() {
+			var _context_triggerElements;
+			(_context_triggerElements = context.triggerElements) === null || _context_triggerElements === void 0 || _context_triggerElements.delete(triggerId);
+		};
+	}, [
+		scope,
+		triggerId,
+		context.triggerElements
+	]);
+	React.useEffect(function() {
+		if (virtualRef) {
+			refs.setReference(virtualRef.current);
+			update();
+		}
+	}, [virtualRef]);
+	var refProps = (getReferenceProps === null || getReferenceProps === void 0 ? void 0 : getReferenceProps({
+		...rest,
+		ref
+	})) || null;
+	var safeSetReference = React.useCallback(function(node) {
+		startTransition(function() {
+			refs.setReference(node);
+		});
+	}, [refs]);
+	var shouldHandleInHover = isWeb && scope;
+	var composedRefs = useComposedRefs(forwardedRef, ref, shouldHandleInHover ? void 0 : safeSetReference);
+	return /* @__PURE__ */ jsx(View, {
+		...rest,
+		...refProps,
+		ref: composedRefs,
+		...shouldHandleInHover && {
+			onMouseEnter: function(e) {
+				var _e_currentTarget;
+				var el = (_e_currentTarget = e.currentTarget) !== null && _e_currentTarget !== void 0 ? _e_currentTarget : ref.current;
+				if (_instanceof(el, HTMLElement)) {
+					var _refProps_onPointerEnter, _context_onHoverReference;
+					flushSync(function() {
+						return refs.setReference(el);
+					});
+					update();
+					if (!refProps) return;
+					(_refProps_onPointerEnter = refProps.onPointerEnter) === null || _refProps_onPointerEnter === void 0 || _refProps_onPointerEnter.call(refProps, e);
+					(_context_onHoverReference = context.onHoverReference) === null || _context_onHoverReference === void 0 || _context_onHoverReference.call(context, e.nativeEvent);
+				}
+			},
+			onMouseLeave: function(e) {
+				var _context_onLeaveReference, _refProps_onMouseLeave;
+				(_context_onLeaveReference = context.onLeaveReference) === null || _context_onLeaveReference === void 0 || _context_onLeaveReference.call(context);
+				refProps === null || refProps === void 0 || (_refProps_onMouseLeave = refProps.onMouseLeave) == null || _refProps_onMouseLeave.call(refProps, e);
+			}
+		}
+	});
 });
-var PopperContentFrame = styled(YStack, {
-  name: "PopperContent",
-  variants: {
-    unstyled: {
-      true: {}
-    },
-    size: {
-      "...size": function (val, param) {
-        var {
-          tokens
-        } = param;
-        return {
-          padding: tokens.space[val],
-          borderRadius: tokens.radius[val]
-        };
-      }
-    }
-  }
+var PopperContentFrame = styled(View, { displayName: "PopperContent" });
+var PopperContent = createRefComponent(function PopperContent2(props, forwardedRef) {
+	var isAnimatePosControlled = "animatePosition" in props;
+	var { scope, animatePosition, children, passThrough, ...rest } = props;
+	var animatePos = animatePosition;
+	var context = usePopperContext(scope);
+	var { strategy, placement, refs, x, y, getFloatingProps, isPositioned, transformOrigin, update } = context;
+	var updateRef = React.useRef(update);
+	updateRef.current = update;
+	var lastNodeRef = React.useRef(null);
+	var safeSetFloating = React.useCallback(function(node) {
+		var isNewNode = node !== lastNodeRef.current;
+		if (node) {
+			lastNodeRef.current = node;
+			refs.setFloating(node);
+			if (!isNewNode) {
+				var _updateRef_current;
+				(_updateRef_current = updateRef.current) === null || _updateRef_current === void 0 || _updateRef_current.call(updateRef);
+			}
+		}
+	}, [refs.setFloating]);
+	React.useEffect(function() {
+		return function() {
+			var ourNode = lastNodeRef.current;
+			if (ourNode && refs.floating.current === ourNode) refs.setFloating(null);
+			lastNodeRef.current = null;
+		};
+	}, []);
+	var contentRefs = useComposedRefs(safeSetFloating, forwardedRef);
+	var [needsMeasure, setNeedsMeasure] = React.useState(animatePos);
+	useIsomorphicLayoutEffect(function() {
+		if (needsMeasure && x && y) setNeedsMeasure(false);
+	}, [
+		needsMeasure,
+		animatePos,
+		x,
+		y
+	]);
+	var hasBeenPositioned = React.useRef(false);
+	var lastGoodPosition = React.useRef({
+		x: 0,
+		y: 0
+	});
+	if (x !== 0 || y !== 0) {
+		lastGoodPosition.current = {
+			x,
+			y
+		};
+		if (isPositioned) hasBeenPositioned.current = true;
+	}
+	var brieflyZero = hasBeenPositioned.current && x === 0 && y === 0;
+	var effectiveX = brieflyZero ? lastGoodPosition.current.x : x;
+	var effectiveY = brieflyZero ? lastGoodPosition.current.y : y;
+	var hide = !hasBeenPositioned.current && effectiveX === 0 && effectiveY === 0;
+	var disableAnimationProp = animatePos === "even-when-repositioning" ? needsMeasure : !hasBeenPositioned.current && !isPositioned || needsMeasure;
+	var [disableAnimation, setDisableAnimation] = React.useState(disableAnimationProp);
+	React.useEffect(function() {
+		setDisableAnimation(disableAnimationProp);
+	}, [disableAnimationProp]);
+	var frameProps = {
+		ref: contentRefs,
+		...hide ? {} : {
+			x: effectiveX || 0,
+			y: effectiveY || 0
+		},
+		top: 0,
+		left: 0,
+		position: strategy,
+		opacity: hide ? 0 : 1,
+		...isAnimatePosControlled && {
+			transition: animatePos ? rest.transition : void 0,
+			animateOnly: animatePos && !disableAnimation ? rest.animateOnly : [],
+			animatePresence: false
+		}
+	};
+	var { style, ...floatingProps } = getFloatingProps ? getFloatingProps(frameProps) : frameProps;
+	var transformOriginStyle = isWeb && transformOrigin ? { transformOrigin: `${transformOrigin.x} ${transformOrigin.y}` } : void 0;
+	return /* @__PURE__ */ jsx(LayoutMeasurementController, {
+		disable: !context.open,
+		children: /* @__PURE__ */ jsx(View, {
+			passThrough,
+			ref: contentRefs,
+			direction: rest.direction,
+			...passThrough ? null : floatingProps,
+			...!passThrough && animatePos && { "data-popper-animate-position": "true" },
+			children: /* @__PURE__ */ jsx(PopperContentFrame, {
+				passThrough,
+				...!passThrough && {
+					"data-placement": placement,
+					"data-strategy": strategy,
+					...style,
+					...transformOriginStyle,
+					...rest
+				},
+				children
+			}, "popper-content-frame")
+		})
+	});
 });
-var PopperContent = /* @__PURE__ */React.forwardRef(function PopperContent2(props, forwardedRef) {
-  var isAnimatePosControlled = "animatePosition" in props || "enableAnimationForPositionChange" in props;
-  var {
-    scope,
-    animatePosition,
-    enableAnimationForPositionChange,
-    children,
-    passThrough,
-    unstyled,
-    ...rest
-  } = props;
-  var animatePos = animatePosition !== null && animatePosition !== void 0 ? animatePosition : enableAnimationForPositionChange;
-  var context = usePopperContext(scope);
-  var {
-    strategy,
-    placement,
-    refs,
-    x,
-    y,
-    getFloatingProps,
-    size,
-    isPositioned,
-    transformOrigin,
-    update
-  } = context;
-  var updateRef = React.useRef(update);
-  updateRef.current = update;
-  var lastNodeRef = React.useRef(null);
-  var safeSetFloating = React.useCallback(function (node) {
-    var isNewNode = node !== lastNodeRef.current;
-    if (node) {
-      lastNodeRef.current = node;
-      refs.setFloating(node);
-      if (!isNewNode) {
-        var _updateRef_current;
-        (_updateRef_current = updateRef.current) === null || _updateRef_current === void 0 || _updateRef_current.call(updateRef);
-      }
-    }
-  }, [refs.setFloating]);
-  React.useEffect(function () {
-    return function () {
-      var ourNode = lastNodeRef.current;
-      if (ourNode && refs.floating.current === ourNode) refs.setFloating(null);
-      lastNodeRef.current = null;
-    };
-  }, []);
-  var contentRefs = useComposedRefs(safeSetFloating, forwardedRef);
-  var [needsMeasure, setNeedsMeasure] = React.useState(animatePos);
-  useIsomorphicLayoutEffect(function () {
-    if (needsMeasure && x && y) setNeedsMeasure(false);
-  }, [needsMeasure, animatePos, x, y]);
-  var hasBeenPositioned = React.useRef(false);
-  var lastGoodPosition = React.useRef({
-    x: 0,
-    y: 0
-  });
-  if (x !== 0 || y !== 0) {
-    lastGoodPosition.current = {
-      x,
-      y
-    };
-    if (isPositioned) hasBeenPositioned.current = true;
-  }
-  var brieflyZero = hasBeenPositioned.current && x === 0 && y === 0;
-  var effectiveX = brieflyZero ? lastGoodPosition.current.x : x;
-  var effectiveY = brieflyZero ? lastGoodPosition.current.y : y;
-  var hide = !hasBeenPositioned.current && effectiveX === 0 && effectiveY === 0;
-  var disableAnimationProp = animatePos === "even-when-repositioning" ? needsMeasure : !hasBeenPositioned.current && !isPositioned || needsMeasure;
-  var [disableAnimation, setDisableAnimation] = React.useState(disableAnimationProp);
-  React.useEffect(function () {
-    setDisableAnimation(disableAnimationProp);
-  }, [disableAnimationProp]);
-  var frameProps = {
-    ref: contentRefs,
-    ...(hide ? {} : {
-      x: effectiveX || 0,
-      y: effectiveY || 0
-    }),
-    top: 0,
-    left: 0,
-    position: strategy,
-    opacity: hide ? 0 : 1,
-    ...(isAnimatePosControlled && {
-      transition: animatePos ? rest.transition : void 0,
-      animateOnly: animatePos && !disableAnimation ? rest.animateOnly : [],
-      animatePresence: false
-    })
-  };
-  var {
-    style,
-    ...floatingProps
-  } = getFloatingProps ? getFloatingProps(frameProps) : frameProps;
-  var transformOriginStyle = isWeb && transformOrigin ? {
-    transformOrigin: `${transformOrigin.x} ${transformOrigin.y}`
-  } : void 0;
-  return /* @__PURE__ */jsx(LayoutMeasurementController, {
-    disable: !context.open,
-    children: /* @__PURE__ */jsx(View, {
-      passThrough,
-      ref: contentRefs,
-      direction: rest.direction,
-      ...(passThrough ? null : floatingProps),
-      ...(!passThrough && animatePos && {
-        "data-popper-animate-position": "true"
-      }),
-      children: /* @__PURE__ */jsx(PopperContentFrame, {
-        passThrough,
-        unstyled,
-        ...(!passThrough && {
-          "data-placement": placement,
-          "data-strategy": strategy,
-          size,
-          ...style,
-          ...transformOriginStyle,
-          ...rest
-        }),
-        children
-      }, "popper-content-frame")
-    })
-  });
+var PopperArrowFrame = styled(View, {
+	displayName: "PopperArrow",
+	position: "relative"
 });
-var PopperArrowFrame = styled(YStack, {
-  name: "PopperArrow",
-  variants: {
-    unstyled: {
-      false: {
-        borderColor: "$borderColor",
-        backgroundColor: "$background",
-        position: "relative"
-      }
-    }
-  },
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === "1"
-  }
-});
-var PopperArrowOuterFrame = styled(YStack, {
-  name: "PopperArrowOuter",
-  variants: {
-    unstyled: {
-      false: {
-        position: "absolute",
-        zIndex: 1e6,
-        pointerEvents: "none",
-        overflow: "hidden",
-        alignItems: "center",
-        justifyContent: "center"
-      }
-    }
-  },
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === "1"
-  }
+var PopperArrowOuterFrame = styled(View, {
+	displayName: "PopperArrowOuter",
+	position: "absolute",
+	zIndex: 1e6,
+	pointerEvents: "none",
+	overflow: "hidden",
+	alignItems: "center",
+	justifyContent: "center"
 });
 var opposites = {
-  top: "bottom",
-  right: "left",
-  bottom: "top",
-  left: "right"
+	top: "bottom",
+	right: "left",
+	bottom: "top",
+	left: "right"
 };
-var PopperArrow = /* @__PURE__ */React.forwardRef(function PopperArrow2(propsIn, forwardedRef) {
-  var _context_arrowStyle, _context_arrowStyle1;
-  var isAnimatePosControlled = "animatePosition" in propsIn;
-  var {
-    scope,
-    animatePosition,
-    transition,
-    ...rest
-  } = propsIn;
-  var {
-    offset,
-    size: sizeProp,
-    borderWidth = 0,
-    ...arrowProps
-  } = rest;
-  var context = usePopperContext(scope);
-  var sizeVal = typeof sizeProp === "number" ? sizeProp : getVariableValue(getSpace(sizeProp !== null && sizeProp !== void 0 ? sizeProp : context.size, {
-    shift: -2,
-    bounds: [2]
-  }));
-  var size = Math.max(0, +sizeVal);
-  var {
-    placement
-  } = context;
-  var refs = useComposedRefs(context.arrowRef, forwardedRef);
-  var x = ((_context_arrowStyle = context.arrowStyle) === null || _context_arrowStyle === void 0 ? void 0 : _context_arrowStyle.x) || 0;
-  var y = ((_context_arrowStyle1 = context.arrowStyle) === null || _context_arrowStyle1 === void 0 ? void 0 : _context_arrowStyle1.y) || 0;
-  var arrowPositioned = context.arrowStyle != null;
-  var primaryPlacement = placement ? placement.split("-")[0] : "top";
-  var arrowStyle = {
-    x,
-    y,
-    width: size,
-    height: size
-  };
-  var innerArrowStyle = {};
-  var isVertical = primaryPlacement === "bottom" || primaryPlacement === "top";
-  if (primaryPlacement) {
-    arrowStyle[isVertical ? "width" : "height"] = size * 2;
-    var oppSide = opposites[primaryPlacement];
-    if (oppSide) {
-      arrowStyle[oppSide] = -size;
-      innerArrowStyle[oppSide] = size / 2;
-    }
-    if (oppSide === "top" || oppSide === "bottom") arrowStyle.left = 0;
-    if (oppSide === "left" || oppSide === "right") arrowStyle.top = 0;
-    useIsomorphicLayoutEffect(function () {
-      var _context_onArrowSize;
-      (_context_onArrowSize = context.onArrowSize) === null || _context_onArrowSize === void 0 || _context_onArrowSize.call(context, size);
-    }, [size, context.onArrowSize]);
-  }
-  return /* @__PURE__ */jsx(PopperArrowOuterFrame, {
-    ref: refs,
-    ...arrowStyle,
-    ...(!arrowPositioned && {
-      opacity: 0
-    }),
-    ...(isAnimatePosControlled && {
-      transition: animatePosition ? transition : void 0,
-      animateOnly: animatePosition ? ["transform"] : [],
-      animatePresence: false
-    }),
-    children: /* @__PURE__ */jsx(PopperArrowFrame, {
-      width: size,
-      height: size,
-      ...arrowProps,
-      ...innerArrowStyle,
-      rotate: "45deg",
-      ...(primaryPlacement === "bottom" && {
-        borderLeftWidth: borderWidth,
-        borderTopWidth: borderWidth
-      }),
-      ...(primaryPlacement === "top" && {
-        borderBottomWidth: borderWidth,
-        borderRightWidth: borderWidth
-      }),
-      ...(primaryPlacement === "right" && {
-        borderLeftWidth: borderWidth,
-        borderBottomWidth: borderWidth
-      }),
-      ...(primaryPlacement === "left" && {
-        borderTopWidth: borderWidth,
-        borderRightWidth: borderWidth
-      })
-    })
-  });
+var PopperArrow = createRefComponent(function PopperArrow2(propsIn, forwardedRef) {
+	var _context_arrowStyle, _context_arrowStyle1;
+	var isAnimatePosControlled = "animatePosition" in propsIn;
+	var { scope, animatePosition, transition, ...rest } = propsIn;
+	var { offset, size: sizeProp, borderWidth = 0, ...arrowProps } = rest;
+	var context = usePopperContext(scope);
+	var sizeVal = typeof sizeProp === "number" ? sizeProp : getVariableValue(getSize(sizeProp !== null && sizeProp !== void 0 ? sizeProp : context.size)) * .52 - 11.5;
+	var size = Math.max(0, +sizeVal);
+	var { placement } = context;
+	var refs = useComposedRefs(context.arrowRef, forwardedRef);
+	var x = ((_context_arrowStyle = context.arrowStyle) === null || _context_arrowStyle === void 0 ? void 0 : _context_arrowStyle.x) || 0;
+	var y = ((_context_arrowStyle1 = context.arrowStyle) === null || _context_arrowStyle1 === void 0 ? void 0 : _context_arrowStyle1.y) || 0;
+	var arrowPositioned = context.arrowStyle != null;
+	var primaryPlacement = placement ? placement.split("-")[0] : "top";
+	var arrowStyle = {
+		x,
+		y,
+		width: size,
+		height: size
+	};
+	var innerArrowStyle = {};
+	var isVertical = primaryPlacement === "bottom" || primaryPlacement === "top";
+	if (primaryPlacement) {
+		arrowStyle[isVertical ? "width" : "height"] = size * 2;
+		var oppSide = opposites[primaryPlacement];
+		if (oppSide) {
+			arrowStyle[oppSide] = -size;
+			innerArrowStyle[oppSide] = size / 2;
+		}
+		if (oppSide === "top" || oppSide === "bottom") arrowStyle.left = 0;
+		if (oppSide === "left" || oppSide === "right") arrowStyle.top = 0;
+		useIsomorphicLayoutEffect(function() {
+			var _context_onArrowSize;
+			(_context_onArrowSize = context.onArrowSize) === null || _context_onArrowSize === void 0 || _context_onArrowSize.call(context, size);
+		}, [size, context.onArrowSize]);
+	}
+	return /* @__PURE__ */ jsx(PopperArrowOuterFrame, {
+		ref: refs,
+		...arrowStyle,
+		...!arrowPositioned && { opacity: 0 },
+		...isAnimatePosControlled && {
+			transition: animatePosition ? transition : void 0,
+			animateOnly: animatePosition ? ["transform"] : [],
+			animatePresence: false
+		},
+		children: /* @__PURE__ */ jsx(PopperArrowFrame, {
+			width: size,
+			height: size,
+			...arrowProps,
+			...innerArrowStyle,
+			rotate: "45deg",
+			...primaryPlacement === "bottom" && {
+				borderLeftWidth: borderWidth,
+				borderTopWidth: borderWidth
+			},
+			...primaryPlacement === "top" && {
+				borderBottomWidth: borderWidth,
+				borderRightWidth: borderWidth
+			},
+			...primaryPlacement === "right" && {
+				borderLeftWidth: borderWidth,
+				borderBottomWidth: borderWidth
+			},
+			...primaryPlacement === "left" && {
+				borderTopWidth: borderWidth,
+				borderRightWidth: borderWidth
+			}
+		})
+	});
 });
+
 export { Popper, PopperAnchor, PopperArrow, PopperArrowFrame, PopperContent, PopperContentFrame, PopperContextFast, PopperContextSlow, PopperPositionContext, PopperProvider, PopperProviderFast, PopperProviderSlow, setupPopper, usePopperContext, usePopperContextSlow };
 //# sourceMappingURL=Popper.native.js.map