@tamagui/web 2.7.7 → 3.0.0-beta.1093.1

package/dist/cjs/createComponent.native.cjs

@@ -0,0 +1,1164 @@
+"use strict";
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+};
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: () => from[key],
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var createComponent_exports = {};
+__export(createComponent_exports, {
+	componentSetStates: () => componentSetStates,
+	createComponent: () => createComponent
+});
+module.exports = __toCommonJS(createComponent_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_compose_refs = require("@tamagui/compose-refs");
+var import_constants = require("@tamagui/constants");
+var import_native = require("@tamagui/native");
+var import_helpers = require("@tamagui/helpers");
+var import_is_equal_shallow = require("@tamagui/is-equal-shallow");
+var import_react = __toESM(require("react"), 1);
+var import_config = require("./config.native.js");
+var import_isDevTools = require("./constants/isDevTools.native.js");
+var import_ComponentContext = require("./contexts/ComponentContext.native.js");
+var import_GroupContext = require("./contexts/GroupContext.native.js");
+var import_createVariable = require("./createVariable.native.js");
+var import_defaultComponentState = require("./defaultComponentState.native.js");
+var import_eventHandling = require("./eventHandling.native.js");
+var import_componentDisplayName = require("./helpers/componentDisplayName.native.js");
+var import_getSplitStyles = require("./helpers/getSplitStyles.native.js");
+var import_grammarConfig = require("./helpers/grammarConfig.native.js");
+var import_styleStaticConfig = require("./helpers/styleStaticConfig.native.js");
+var import_nativeStyleEngine = require("./helpers/nativeStyleEngine.native.js");
+var import_getThemeProxied = require("./hooks/getThemeProxied.native.js");
+var import_log = require("./helpers/log.native.js");
+var import_mergeProps = require("./helpers/mergeProps.native.js");
+var import_mergeRenderElementProps = require("./helpers/mergeRenderElementProps.native.js");
+var import_mediaState = require("./helpers/mediaState.native.js");
+var import_pointerEvents = require("./helpers/pointerEvents.native.js");
+var import_extractPseudoState = require("./helpers/extractPseudoState.native.js");
+var import_resolveSafeAreaVariable = require("./helpers/resolveSafeAreaVariable.native.js");
+var import_setElementProps = require("./helpers/setElementProps.native.js");
+var import_subscribeToContextGroup = require("./helpers/subscribeToContextGroup.native.js");
+require("./helpers/wrapStyleTags.native.js");
+var import_useComponentState = require("./hooks/useComponentState.native.js");
+var import_useSplitStyles = require("./hooks/useSplitStyles.native.js");
+var import_useMedia = require("./hooks/useMedia.native.js");
+var import_useTheme = require("./hooks/useTheme.native.js");
+var import_setupHooks = require("./setupHooks.native.js");
+var import_Slot = require("./views/Slot.native.js");
+var import_Theme = require("./views/Theme.native.js");
+var time;
+var debugKeyListeners;
+var startVisualizer;
+var componentSetStates = /* @__PURE__ */ new Set();
+var avoidReRenderKeys = /* @__PURE__ */ new Set([
+	"hover",
+	"press",
+	"pressIn",
+	"group",
+	"focus",
+	"focusWithin",
+	"media",
+	"group"
+]);
+var groupPseudoKeys = [
+	"disabled",
+	"hover",
+	"press",
+	"pressIn",
+	"focus",
+	"focusVisible",
+	"focusWithin"
+];
+var BaseText;
+var BaseView;
+var hasSetupBaseViews = false;
+var lastInteractionWasKeyboard = { value: false };
+var lastInteractionWasTouch = { value: false };
+if (import_constants.isWeb && typeof document !== "undefined") {
+	document.addEventListener("keydown", function() {
+		if (!lastInteractionWasKeyboard.value) lastInteractionWasKeyboard.value = true;
+	});
+	document.addEventListener("mousedown", function() {
+		if (lastInteractionWasKeyboard.value) lastInteractionWasKeyboard.value = false;
+	});
+	document.addEventListener("mousemove", function() {
+		if (lastInteractionWasKeyboard.value) lastInteractionWasKeyboard.value = false;
+		lastInteractionWasTouch.value = false;
+	});
+	document.addEventListener("touchstart", function() {
+		lastInteractionWasTouch.value = true;
+	});
+}
+function createComponent(staticConfig) {
+	if (process.env.TAMAGUI_RUNTIME === "zero") throw new Error(process.env.NODE_ENV !== "production" ? `[tamagui zero-runtime] createComponent ran in a zero-runtime graph. No Tamagui component renderer ships in this mode, so a component reference survived compilation. Fix the site or move the owning module to a declared full-runtime island.` : "❌ Error 010");
+	var config = null;
+	var resolvedDefaultProps;
+	var resolvedStyleRevision = -1;
+	var resolvedStyleStaticConfig;
+	var { Component, isText, isHOC } = staticConfig;
+	var res;
+	var { displayName } = staticConfig;
+	var component = function(propsInWithRef) {
+		"use no memo";
+		var _hooks_usePropsTransform, _staticConfig_neverSkipProps;
+		var _stateRef_current;
+		var forwardedRef = propsInWithRef.ref;
+		var propsIn = propsInWithRef;
+		config = config || (0, import_config.getConfig)();
+		var styleRevision = (0, import_grammarConfig.getConfigRevisionState)(config).revision;
+		if (resolvedStyleRevision !== styleRevision) {
+			var _nextStyleStaticConfig_baseStyle;
+			resolvedStyleRevision = styleRevision;
+			var nextStyleStaticConfig = (0, import_styleStaticConfig.getStyleStaticConfig)(staticConfig, config);
+			resolvedStyleStaticConfig = nextStyleStaticConfig;
+			resolvedDefaultProps = nextStyleStaticConfig.defaultProps;
+			if (import_constants.isWeb && !staticConfig.isText && config.settings.defaultPosition === "relative" && ((_nextStyleStaticConfig_baseStyle = nextStyleStaticConfig.baseStyle) === null || _nextStyleStaticConfig_baseStyle === void 0 ? void 0 : _nextStyleStaticConfig_baseStyle.position) === void 0) resolvedStyleStaticConfig = {
+				...nextStyleStaticConfig,
+				baseStyle: {
+					position: "relative",
+					...nextStyleStaticConfig.baseStyle
+				}
+			};
+		}
+		var styleStaticConfig = resolvedStyleStaticConfig;
+		styleStaticConfig.styledContextKeys;
+		var internalID = process.env.NODE_ENV === "development" ? import_react.default.useId() : "";
+		if (process.env.NODE_ENV === "development") {
+			if (startVisualizer) {
+				startVisualizer();
+				startVisualizer = void 0;
+			}
+		}
+		if (!hasSetupBaseViews) {
+			var _hooks_getBaseViews;
+			hasSetupBaseViews = true;
+			var baseViews = (_hooks_getBaseViews = import_setupHooks.hooks.getBaseViews) === null || _hooks_getBaseViews === void 0 ? void 0 : _hooks_getBaseViews.call(import_setupHooks.hooks);
+			if (baseViews) {
+				BaseText = baseViews.Text;
+				BaseView = baseViews.View;
+			}
+		}
+		if (process.env.NODE_ENV === "test") {
+			var testRenderCount = propsIn["data-test-renders"];
+			if (testRenderCount && typeof testRenderCount === "object" && !Object.isFrozen(testRenderCount)) {
+				var _testRenderCount_current;
+				testRenderCount.current = (_testRenderCount_current = testRenderCount.current) !== null && _testRenderCount_current !== void 0 ? _testRenderCount_current : 0;
+				testRenderCount.current += 1;
+			}
+		}
+		var { context } = staticConfig;
+		var debugProp = propsIn["debug"];
+		var styledContextValue = context ? import_react.default.useContext(context) : void 0;
+		var overriddenContextProps = null;
+		var componentContext = import_react.default.useContext(import_ComponentContext.ComponentContext);
+		var hasTextAncestor = !!(import_constants.isWeb && isText ? componentContext.inText : false);
+		var isInsideNativeMenu = import_constants.isAndroid ? import_react.default.useContext(import_native.NativeMenuContext) : false;
+		if (!process.env.TAMAGUI_IS_CORE_NODE && process.env.NODE_ENV === "development" && debugProp === "profile" && !time) {
+			time = require("@tamagui/timer").timer().start();
+			globalThis["time"] = time;
+		}
+		if (process.env.NODE_ENV === "development" && !time && globalThis.time) time = globalThis.time;
+		if (process.env.NODE_ENV === "development" && time) time`non-tamagui time (ignore)`;
+		var props = propsIn;
+		var [nextProps, overrides] = (0, import_mergeProps.mergeComponentProps)(resolvedDefaultProps, styledContextValue, propsIn);
+		props = nextProps;
+		overriddenContextProps = overrides;
+		if (process.env.NODE_ENV === "development" && import_constants.isClient) import_react.default.useEffect(function() {
+			var node;
+			var overlay = null;
+			var remove = function() {
+				if (overlay) try {
+					var _overlay_parentNode;
+					(_overlay_parentNode = overlay.parentNode) === null || _overlay_parentNode === void 0 || _overlay_parentNode.removeChild(overlay);
+					overlay = null;
+				} catch (e) {}
+			};
+			var debugVisualizerHandler = function() {
+				var show = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : false;
+				node = stateRef.current.host;
+				if (!node) return;
+				if (show) {
+					if (!overlay) {
+						overlay = document.createElement("span");
+						overlay.style.inset = "0px";
+						overlay.style.zIndex = "1000000";
+						overlay.style.position = "absolute";
+						overlay.style.borderColor = "red";
+						overlay.style.borderWidth = "1px";
+						overlay.style.borderStyle = "dotted";
+					}
+					var dataAt = node.getAttribute("data-at") || "";
+					var dataIn = node.getAttribute("data-in") || "";
+					var tooltip = document.createElement("span");
+					tooltip.style.position = "absolute";
+					tooltip.style.top = "0px";
+					tooltip.style.left = "0px";
+					tooltip.style.padding = "3px";
+					tooltip.style.background = "rgba(0,0,0,0.75)";
+					tooltip.style.color = "rgba(255,255,255,1)";
+					tooltip.style.fontSize = "12px";
+					tooltip.style.lineHeight = "12px";
+					tooltip.style.fontFamily = "monospace";
+					tooltip.innerText = `${displayName || ""} ${dataAt} ${dataIn}`.trim();
+					overlay.appendChild(tooltip);
+					node.appendChild(overlay);
+				} else remove();
+			};
+			debugKeyListeners = debugKeyListeners || /* @__PURE__ */ new Set();
+			debugKeyListeners.add(debugVisualizerHandler);
+			return function() {
+				remove();
+				debugKeyListeners === null || debugKeyListeners === void 0 || debugKeyListeners.delete(debugVisualizerHandler);
+			};
+		}, [displayName]);
+		var groupContextParent = import_react.default.useContext(import_GroupContext.GroupContext);
+		var animationDriver = (function() {
+			if (props.animatedBy && config) {
+				if (config.animationDrivers) return props.animatedBy in config.animationDrivers ? config.animationDrivers[props.animatedBy] : config.animations;
+				return props.animatedBy === "default" ? config.animations : null;
+			}
+			var _componentContext_animationDriver, _ref5;
+			return (_ref5 = (_componentContext_animationDriver = componentContext.animationDriver) !== null && _componentContext_animationDriver !== void 0 ? _componentContext_animationDriver : config === null || config === void 0 ? void 0 : config.animations) !== null && _ref5 !== void 0 ? _ref5 : null;
+		})();
+		var useAnimations = (animationDriver === null || animationDriver === void 0 ? void 0 : animationDriver.isStub) ? void 0 : animationDriver === null || animationDriver === void 0 ? void 0 : animationDriver.useAnimations;
+		var componentState = (0, import_useComponentState.useComponentState)(props, (animationDriver === null || animationDriver === void 0 ? void 0 : animationDriver.isStub) ? null : animationDriver, staticConfig, config);
+		var { disabled, hasAnimationProp, isExiting, isHydrated, presence, presenceState, setState, noClass, state, stateRef, inputStyle, outputStyle, startedUnhydrated } = componentState;
+		var { groupName } = componentState;
+		var { hasEnterStyle, isAnimated, willBeAnimated, willBeAnimatedClient, platformPseudo } = componentState;
+		props = componentState.props;
+		var _avoidReRenders;
+		(_avoidReRenders = (_stateRef_current = stateRef.current).avoidReRenders) !== null && _avoidReRenders !== void 0 || (_stateRef_current.avoidReRenders = !!(animationDriver === null || animationDriver === void 0 ? void 0 : animationDriver.avoidReRenders));
+		if (stateRef.current.avoidReRenders) (0, import_constants.useIsomorphicLayoutEffect)(function() {
+			var emitted = stateRef.current.prevPseudoState;
+			if (emitted && (emitted.hover || emitted.press || emitted.focus)) {
+				var _stateRef_current_updateStyleListener, _stateRef_current2;
+				(_stateRef_current_updateStyleListener = (_stateRef_current2 = stateRef.current).updateStyleListener) === null || _stateRef_current_updateStyleListener === void 0 || _stateRef_current_updateStyleListener.call(_stateRef_current2);
+			}
+			var pendingState = stateRef.current.nextState;
+			if (!pendingState) return;
+			stateRef.current.nextState = void 0;
+			if (!(0, import_is_equal_shallow.isEqualShallow)(state, pendingState)) componentState.setStateShallow(pendingState);
+		});
+		(0, import_constants.useIsomorphicLayoutEffect)(function() {
+			var _getPlatformDriver;
+			if (!platformPseudo || props.disabled) return;
+			var pseudoDriver = (_getPlatformDriver = (0, import_constants.getPlatformDriver)()) === null || _getPlatformDriver === void 0 ? void 0 : _getPlatformDriver.pseudo;
+			var host = stateRef.current.host;
+			if (!pseudoDriver || !host) return;
+			return pseudoDriver.subscribe(host, function(param) {
+				var { hovered } = param;
+				var _stateRef_current_setStateShallow, _stateRef_current2;
+				(_stateRef_current_setStateShallow = (_stateRef_current2 = stateRef.current).setStateShallow) === null || _stateRef_current_setStateShallow === void 0 || _stateRef_current_setStateShallow.call(_stateRef_current2, { hover: hovered });
+			});
+		}, [platformPseudo, props.disabled]);
+		var setStateShallow = componentState.setStateShallow;
+		if (process.env.NODE_ENV === "development" && time) time`use-state`;
+		var renderProp = props.render;
+		var isRenderString = !Component || typeof Component === "string";
+		var element = import_constants.isWeb ? isRenderString ? renderProp || Component : Component : Component;
+		var BaseComponent = isText ? BaseText || element || "span" : BaseView || element || (hasTextAncestor ? "span" : "div");
+		var elementType = BaseComponent;
+		var isAnimatedCustomComponent = animationDriver && isAnimated && animationDriver.needsCustomComponent;
+		if (isAnimatedCustomComponent) elementType = animationDriver[isText ? "Text" : "View"] || elementType;
+		var disableTheme = isHOC;
+		if (process.env.NODE_ENV === "development" && time) time`theme-props`;
+		var themeStateProps = {
+			disable: disableTheme,
+			shallow: props.themeShallow,
+			debug: debugProp
+		};
+		if ("theme" in props) themeStateProps.name = props.theme;
+		if (!stateRef.current.optimizeForFirstRender) themeStateProps.needsUpdate = stateRef.current.themeNeedsUpdate || (stateRef.current.themeNeedsUpdate = function() {
+			return !!stateRef.current.isListeningToTheme;
+		});
+		var _stateRef_current1;
+		themeStateProps.deopt = willBeAnimated;
+		themeStateProps.nativeUpdate = (_stateRef_current1 = stateRef.current).nativeUpdateProxy || (_stateRef_current1.nativeUpdateProxy = function(next) {
+			var _stateRef_current_nativeStyleUpdate, _stateRef_current2;
+			var _stateRef_current_nativeStyleUpdate1;
+			return (_stateRef_current_nativeStyleUpdate1 = (_stateRef_current_nativeStyleUpdate = (_stateRef_current2 = stateRef.current).nativeStyleUpdate) === null || _stateRef_current_nativeStyleUpdate === void 0 ? void 0 : _stateRef_current_nativeStyleUpdate.call(_stateRef_current2, next)) !== null && _stateRef_current_nativeStyleUpdate1 !== void 0 ? _stateRef_current_nativeStyleUpdate1 : false;
+		});
+		if (process.env.NODE_ENV === "development") {
+			if (debugProp && debugProp !== "profile") {
+				var name = `${displayName || (Component === null || Component === void 0 ? void 0 : Component.displayName) || (Component === null || Component === void 0 ? void 0 : Component.name) || "[Unnamed Component]"}`;
+				var type = (hasEnterStyle ? "(hasEnter)" : " ") + (isAnimated ? "(animated)" : " ") + (noClass ? "(noClass)" : " ") + (state.press || state.pressIn ? "(PRESSED)" : " ") + (state.hover ? "(HOVERED)" : " ") + (state.focus ? "(FOCUSED)" : " ") + (state.focusWithin ? "(WITHIN FOCUSED)" : " ") + ((presenceState === null || presenceState === void 0 ? void 0 : presenceState.isPresent) === false ? "(EXIT)" : "");
+				var dataIs = propsIn["data-is"] || "";
+				var banner = `<${name} /> ${internalID} ${dataIs ? ` ${dataIs}` : ""} ${type.trim()} (hydrated: ${isHydrated}) (unmounted: ${state.unmounted})`;
+				var ch = propsIn.children;
+				var childLog = typeof ch === "string" ? ch.length > 4 ? ch.slice(0, 4) + "..." : ch : "";
+				if (childLog.length) childLog = `(children: ${childLog})`;
+				if (import_constants.isWeb) {
+					console.info(`%c ${banner}`, "background: green; color: white;");
+					if (import_constants.isServer) (0, import_log.log)({
+						noClass,
+						isAnimated,
+						isWeb: import_constants.isWeb,
+						inputStyle
+					});
+					else {
+						console.groupEnd();
+						console.groupCollapsed(`${childLog} [inspect props, state, context \u{1F447}]`);
+						(0, import_log.log)("props in:", propsIn);
+						(0, import_log.log)("final props:", props);
+						(0, import_log.log)({
+							state,
+							staticConfig,
+							elementType,
+							themeStateProps
+						});
+						(0, import_log.log)({
+							context,
+							overriddenContextProps,
+							componentContext
+						});
+						(0, import_log.log)({
+							presence,
+							isAnimated,
+							isHOC,
+							hasAnimationProp,
+							useAnimations
+						});
+						console.groupEnd();
+					}
+				} else {
+					console.info(`
+
+------------------------------
+${banner}
+------------------------------
+`);
+					(0, import_log.log)(`children:`, props.children);
+					(0, import_log.log)({
+						overriddenContextProps,
+						styledContextValue
+					});
+					(0, import_log.log)({
+						noClass,
+						isAnimated,
+						isWeb: import_constants.isWeb,
+						inputStyle
+					});
+				}
+			}
+		}
+		if (process.env.NODE_ENV === "development" && time) time`pre-theme-media`;
+		var [theme, themeState] = (0, import_useTheme.useThemeWithState)(themeStateProps);
+		if (process.env.NODE_ENV === "development" && time) time`theme`;
+		if (!isAnimatedCustomComponent) elementType = element || elementType;
+		var isStringElement = typeof elementType === "string";
+		var mediaState = (0, import_useMedia.useMedia)(componentContext, debugProp, stateRef.current);
+		(0, import_createVariable.setDidGetVariableValue)(false);
+		if (process.env.NODE_ENV === "development" && time) time`media`;
+		var styleProps = {
+			mediaState,
+			noClass,
+			resolveValues: isAnimated && inputStyle !== "css" || isHOC && state.unmounted == false && hasAnimationProp ? "value" : "auto",
+			isExiting,
+			isAnimated,
+			willBeAnimated,
+			canPlatformPseudo: componentState.platformPseudo,
+			displayName,
+			styledContext: styledContextValue
+		};
+		var themeName = (themeState === null || themeState === void 0 ? void 0 : themeState.name) || "";
+		if (process.env.NODE_ENV === "development" && time) time`split-styles-prepare`;
+		var splitStyles = (0, import_useSplitStyles.useSplitStyles)(props, staticConfig, theme, themeName, state, styleProps, null, componentContext, groupContextParent, elementType, startedUnhydrated, debugProp, animationDriver, styleStaticConfig);
+		var finalizedComponentState = componentState.finalizeStyleFlags(!!(splitStyles === null || splitStyles === void 0 ? void 0 : splitStyles.hasEnterStyle), !!(splitStyles === null || splitStyles === void 0 ? void 0 : splitStyles.platformPseudo));
+		hasEnterStyle = finalizedComponentState.hasEnterStyle;
+		isAnimated = finalizedComponentState.isAnimated;
+		willBeAnimated = finalizedComponentState.willBeAnimated;
+		willBeAnimatedClient = finalizedComponentState.willBeAnimatedClient;
+		platformPseudo = finalizedComponentState.platformPseudo;
+		var _splitStyles_frontendGroup;
+		groupName = (_splitStyles_frontendGroup = splitStyles === null || splitStyles === void 0 ? void 0 : splitStyles.frontendGroup) !== null && _splitStyles_frontendGroup !== void 0 ? _splitStyles_frontendGroup : groupName;
+		var _splitStyles_frontendContainer;
+		var containerProp = (_splitStyles_frontendContainer = splitStyles === null || splitStyles === void 0 ? void 0 : splitStyles.frontendContainer) !== null && _splitStyles_frontendContainer !== void 0 ? _splitStyles_frontendContainer : props.container;
+		var containerName = props.containerName || (typeof containerProp === "string" ? containerProp : void 0);
+		var containerType = (splitStyles === null || splitStyles === void 0 ? void 0 : splitStyles.frontendContainerType) || props.containerType || (containerProp ? "inline-size" : void 0);
+		var isContainer = !!containerType && containerType !== "normal";
+		var allGroupContexts = (0, import_react.useMemo)(function() {
+			var _stateRef_current_group_listeners, _stateRef_current_group;
+			if (!groupName && !isContainer || props.passThrough) return groupContextParent;
+			var listeners = /* @__PURE__ */ new Set();
+			(_stateRef_current_group = stateRef.current.group) === null || _stateRef_current_group === void 0 || (_stateRef_current_group_listeners = _stateRef_current_group.listeners) == null || _stateRef_current_group_listeners.clear();
+			stateRef.current.group = {
+				listeners,
+				emit(state2) {
+					listeners.forEach(function(l) {
+						return l(state2);
+					});
+				},
+				subscribe(cb) {
+					listeners.add(cb);
+					if (listeners.size === 1) setStateShallow({ hasDynGroupChildren: true });
+					return function() {
+						listeners.delete(cb);
+						if (listeners.size === 0) setStateShallow({ hasDynGroupChildren: false });
+					};
+				}
+			};
+			var entry = {
+				state: { pseudo: import_defaultComponentState.defaultComponentStateMounted },
+				subscribe: function(listener) {
+					var _stateRef_current_group2;
+					var dispose = (_stateRef_current_group2 = stateRef.current.group) === null || _stateRef_current_group2 === void 0 ? void 0 : _stateRef_current_group2.subscribe(listener);
+					return function() {
+						dispose === null || dispose === void 0 || dispose();
+					};
+				}
+			};
+			var next = { ...groupContextParent };
+			if (groupName) next[groupName] = entry;
+			if (isContainer) {
+				next["@"] = entry;
+				if (containerName) next[`@${containerName}`] = entry;
+			}
+			return next;
+		}, [
+			stateRef,
+			groupName,
+			containerName,
+			isContainer,
+			groupContextParent
+		]);
+		var isPassthrough = !splitStyles;
+		var nativeEngine = (0, import_nativeStyleEngine.getNativeStyleEngine)();
+		var canNativeUpdate = !!nativeEngine && !isPassthrough && !isHOC && !willBeAnimated && !groupName && !props.disableNativeStyle;
+		stateRef.current.nativePushedStates = canNativeUpdate ? /* @__PURE__ */ new Set() : void 0;
+		stateRef.current.nativeThemeState = void 0;
+		stateRef.current.nativeActiveState = canNativeUpdate ? themeState === null || themeState === void 0 ? void 0 : themeState.name : void 0;
+		var pushViewState = canNativeUpdate ? function(stateName, style2) {
+			var _sr;
+			var sr2 = stateRef.current;
+			var outProps = nativeEngine.processStyleColors(style2);
+			if (sr2.nativePushedKeys) {
+				var _iteratorNormalCompletion2 = true, _didIteratorError2 = false, _iteratorError2 = void 0;
+				try {
+					for (var _iterator2 = sr2.nativePushedKeys[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
+						var key4 = _step2.value;
+						if (!(key4 in style2)) outProps[key4] = null;
+					}
+				} catch (err) {
+					_didIteratorError2 = true;
+					_iteratorError2 = err;
+				} finally {
+					try {
+						if (!_iteratorNormalCompletion2 && _iterator2.return != null) _iterator2.return();
+					} finally {
+						if (_didIteratorError2) throw _iteratorError2;
+					}
+				}
+			}
+			var keys = (_sr = sr2).nativePushedKeys || (_sr.nativePushedKeys = /* @__PURE__ */ new Set());
+			for (var key12 in outProps) keys.add(key12);
+			sr2.nativePushedStates.add(stateName);
+			(0, import_nativeStyleEngine.queueNativeViewState)({
+				id: sr2.nativeLink.id,
+				state: stateName,
+				props: outProps
+			});
+		} : void 0;
+		stateRef.current.nativeStyleUpdate = canNativeUpdate ? function(nextTheme) {
+			var sr2 = stateRef.current;
+			if (!sr2.nativeLink || !nextTheme.theme) return false;
+			sr2.nativeThemeState = nextTheme;
+			var stateName = nextTheme.name;
+			if (stateName === sr2.nativeActiveState) return true;
+			sr2.nativeActiveState = stateName;
+			if (sr2.nativePushedStates.has(stateName)) {
+				(0, import_nativeStyleEngine.queueNativeViewState)({
+					id: sr2.nativeLink.id,
+					state: stateName
+				});
+				return true;
+			}
+			var proxiedTheme = (0, import_getThemeProxied.getThemeProxied)(themeStateProps, nextTheme, { current: null }, { current: null });
+			var nextStyles = (0, import_getSplitStyles.getSplitStyles)(props, staticConfig, proxiedTheme, stateName, state, {
+				...styleProps,
+				mediaState: (0, import_mediaState.getMedia)()
+			}, null, componentContext, allGroupContexts, elementType, startedUnhydrated, debugProp, animationDriver, styleStaticConfig);
+			if (!(nextStyles === null || nextStyles === void 0 ? void 0 : nextStyles.style)) return false;
+			pushViewState(stateName, nextStyles.style);
+			return true;
+		} : void 0;
+		stateRef.current.nativeMediaUpdate = canNativeUpdate ? function(onMiss) {
+			var sr2 = stateRef.current;
+			if (!sr2.nativeLink) return false;
+			if (!sr2.nativeMediaQueued) {
+				sr2.nativeMediaQueued = true;
+				queueMicrotask(function() {
+					sr2.nativeMediaQueued = false;
+					if (!sr2.nativeLink) return;
+					sr2.nativePushedStates.clear();
+					sr2.nativeActiveState = void 0;
+					if (!sr2.nativeStyleUpdate(sr2.nativeThemeState || themeState)) onMiss === null || onMiss === void 0 || onMiss();
+				});
+			}
+			return true;
+		} : void 0;
+		if (canNativeUpdate && stateRef.current.nativeLink) {
+			var sr = stateRef.current;
+			var style = splitStyles.style;
+			if (style && sr.nativePushedKeys) {
+				var dropped = false;
+				var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+				try {
+					for (var _iterator = sr.nativePushedKeys[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) if (!(_step.value in style)) {
+						dropped = true;
+						break;
+					}
+				} catch (err) {
+					_didIteratorError = true;
+					_iteratorError = err;
+				} finally {
+					try {
+						if (!_iteratorNormalCompletion && _iterator.return != null) _iterator.return();
+					} finally {
+						if (_didIteratorError) throw _iteratorError;
+					}
+				}
+				if (dropped) pushViewState((themeState === null || themeState === void 0 ? void 0 : themeState.name) || "", style);
+			}
+		}
+		var contextForOverride = staticConfig.context;
+		if (splitStyles === null || splitStyles === void 0 ? void 0 : splitStyles.overriddenContextProps) {
+			var _staticConfig_parentStaticConfig;
+			var contextForProps = staticConfig.context || ((_staticConfig_parentStaticConfig = staticConfig.parentStaticConfig) === null || _staticConfig_parentStaticConfig === void 0 ? void 0 : _staticConfig_parentStaticConfig.context);
+			if (contextForProps) {
+				for (var key1 in splitStyles.overriddenContextProps) {
+					overriddenContextProps = overriddenContextProps || {};
+					overriddenContextProps[key1] = splitStyles.overriddenContextProps[key1];
+				}
+				if (!staticConfig.context) contextForOverride = contextForProps;
+			}
+		}
+		var groupContext = groupName || isContainer ? (allGroupContexts === null || allGroupContexts === void 0 ? void 0 : allGroupContexts[groupName !== null && groupName !== void 0 ? groupName : "@"]) || null : null;
+		if (!isPassthrough && groupContext && isContainer) {
+			var groupState = groupContext === null || groupContext === void 0 ? void 0 : groupContext.state;
+			if (groupState && groupState.layout === void 0) {
+				var _splitStyles_style, _splitStyles_style1;
+				if (((_splitStyles_style = splitStyles.style) === null || _splitStyles_style === void 0 ? void 0 : _splitStyles_style.width) || ((_splitStyles_style1 = splitStyles.style) === null || _splitStyles_style1 === void 0 ? void 0 : _splitStyles_style1.height)) groupState.layout = {
+					width: fromPx(splitStyles.style.width),
+					height: fromPx(splitStyles.style.height)
+				};
+			}
+		}
+		var hasEnterExitTransition = props.transition && typeof props.transition === "object" && !Array.isArray(props.transition) && ("enter" in props.transition || "exit" in props.transition);
+		if (!isPassthrough && (hasAnimationProp || groupName || platformPseudo) && (animationDriver === null || animationDriver === void 0 ? void 0 : animationDriver.avoidReRenders) && !hasEnterExitTransition) {
+			let updateGroupListeners2 = function() {
+				var updatedState = stateRef.current.nextState;
+				if (groupContext) {
+					var { group, hasDynGroupChildren, unmounted, transition, ...childrenGroupState } = updatedState;
+					notifyGroupSubscribers(groupContext, stateRef.current.group || null, childrenGroupState);
+				}
+			};
+			var ogSetStateShallow = setStateShallow;
+			stateRef.current.updateStyleListener = function() {
+				var useStyleListener = stateRef.current.useStyleListener;
+				if (!useStyleListener) {
+					var pendingState = stateRef.current.nextState;
+					if (pendingState) ogSetStateShallow(pendingState);
+					return;
+				}
+				var updatedState = stateRef.current.nextState || state;
+				var mediaState2 = stateRef.current.nextMedia;
+				var nextStyles = (0, import_getSplitStyles.getSplitStyles)(props, staticConfig, theme, themeName, updatedState, mediaState2 ? {
+					...styleProps,
+					mediaState: mediaState2
+				} : styleProps, null, componentContext, allGroupContexts, elementType, startedUnhydrated, debugProp, animationDriver, styleStaticConfig);
+				var _nextStyles_effectiveTransition, _ref5;
+				var effectiveTransition2 = (_ref5 = (_nextStyles_effectiveTransition = nextStyles === null || nextStyles === void 0 ? void 0 : nextStyles.effectiveTransition) !== null && _nextStyles_effectiveTransition !== void 0 ? _nextStyles_effectiveTransition : props.transition) !== null && _ref5 !== void 0 ? _ref5 : platformPseudo ? "0ms" : void 0;
+				stateRef.current.prevPseudoState = (0, import_extractPseudoState.extractPseudoState)(updatedState);
+				var hasActivePseudo = Boolean(updatedState.hover || updatedState.press || updatedState.pressIn || updatedState.focus || updatedState.focusWithin);
+				useStyleListener((nextStyles === null || nextStyles === void 0 ? void 0 : nextStyles.style) || {}, effectiveTransition2, hasActivePseudo);
+			};
+			componentContext.mediaEmitListeners = componentContext.mediaEmitListeners || /* @__PURE__ */ new Set();
+			if (!stateRef.current.mediaEmitCleanup) {
+				var updateListener = function(next) {
+					var _stateRef_current_updateStyleListener, _stateRef_current2;
+					stateRef.current.nextMedia = next;
+					(_stateRef_current_updateStyleListener = (_stateRef_current2 = stateRef.current).updateStyleListener) === null || _stateRef_current_updateStyleListener === void 0 || _stateRef_current_updateStyleListener.call(_stateRef_current2);
+				};
+				componentContext.mediaEmitListeners.add(updateListener);
+				stateRef.current.mediaEmitCleanup = function() {
+					var _componentContext_mediaEmitListeners;
+					(_componentContext_mediaEmitListeners = componentContext.mediaEmitListeners) === null || _componentContext_mediaEmitListeners === void 0 || _componentContext_mediaEmitListeners.delete(updateListener);
+				};
+			}
+			componentContext.mediaEmit = componentContext.mediaEmit || function(next) {
+				var _iteratorNormalCompletion2 = true, _didIteratorError2 = false, _iteratorError2 = void 0;
+				try {
+					for (var _iterator2 = componentContext.mediaEmitListeners[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
+						var listener = _step2.value;
+						listener(next);
+					}
+				} catch (err) {
+					_didIteratorError2 = true;
+					_iteratorError2 = err;
+				} finally {
+					try {
+						if (!_iteratorNormalCompletion2 && _iterator2.return != null) _iterator2.return();
+					} finally {
+						if (_didIteratorError2) throw _iteratorError2;
+					}
+				}
+			};
+			stateRef.current.setStateShallow = function(nextOrGetNext) {
+				var prev = stateRef.current.nextState || state;
+				var next = typeof nextOrGetNext === "function" ? nextOrGetNext(prev) : nextOrGetNext;
+				if (next === prev || (0, import_is_equal_shallow.isEqualShallow)(prev, next)) return;
+				var canAvoidReRender = true;
+				for (var key4 in next) if (!avoidReRenderKeys.has(key4)) {
+					canAvoidReRender = false;
+					break;
+				}
+				var updatedState = {
+					...prev,
+					...next
+				};
+				stateRef.current.nextState = updatedState;
+				if (canAvoidReRender) {
+					var _stateRef_current_updateStyleListener, _stateRef_current2;
+					if (process.env.NODE_ENV === "development" && debugProp && debugProp !== "profile") {
+						console.groupCollapsed(`[\u26A1\uFE0F] avoid setState`, displayName, next, {
+							updatedState,
+							props
+						});
+						console.info(stateRef.current.host);
+						console.groupEnd();
+					}
+					updateGroupListeners2();
+					(_stateRef_current_updateStyleListener = (_stateRef_current2 = stateRef.current).updateStyleListener) === null || _stateRef_current_updateStyleListener === void 0 || _stateRef_current_updateStyleListener.call(_stateRef_current2);
+				} else {
+					if (process.env.NODE_ENV === "development" && debugProp && debugProp !== "profile") console.info(`[\u{1F40C}] re-render`, {
+						canAvoidReRender,
+						next
+					});
+					ogSetStateShallow(next);
+				}
+			};
+			setStateShallow = function(state2) {
+				var _stateRef_current_setStateShallow, _stateRef_current2;
+				(_stateRef_current_setStateShallow = (_stateRef_current2 = stateRef.current).setStateShallow) === null || _stateRef_current_setStateShallow === void 0 || _stateRef_current_setStateShallow.call(_stateRef_current2, state2);
+			};
+		}
+		if (process.env.NODE_ENV === "development" && time) time`split-styles`;
+		if (splitStyles) {
+			if (props.group && props.untilMeasured === "hide" && !stateRef.current.hasMeasured) {
+				splitStyles.style = splitStyles.style || {};
+				splitStyles.style.opacity = 0;
+			}
+		}
+		var hasRuntimeMediaKeys = (splitStyles === null || splitStyles === void 0 ? void 0 : splitStyles.hasMedia) && splitStyles.hasMedia !== true;
+		var shouldListenForMedia = (0, import_createVariable.didGetVariableValue)() || hasRuntimeMediaKeys || noClass && (splitStyles === null || splitStyles === void 0 ? void 0 : splitStyles.hasMedia) === true;
+		var mediaListeningKeys = hasRuntimeMediaKeys ? splitStyles.hasMedia : null;
+		if (process.env.NODE_ENV === "development" && debugProp === "verbose") console.info(`useMedia() createComponent`, shouldListenForMedia, mediaListeningKeys);
+		(0, import_useMedia.setMediaShouldUpdate)(stateRef.current, shouldListenForMedia, mediaListeningKeys, stateRef.current.optimizeForFirstRender);
+		var { viewProps: viewPropsIn, style: splitStylesStyle, classNames, pseudoGroups, mediaGroups } = splitStyles || {};
+		var groupSetRevision = (0, import_subscribeToContextGroup.useGroupSetRevision)(pseudoGroups, mediaGroups);
+		var propsWithAnimation = props;
+		var { asChild, children, themeShallow, spaceDirection: _spaceDirection, onPress, onLongPress, onPressIn, onPressOut, onHoverIn, onHoverOut, onMouseUp, onMouseDown, onMouseEnter, onMouseLeave, onFocus, onBlur, onTransition, separator, passThrough, forceStyle: _forceStyle, onClick, theme: _themeProp, ...nonTamaguiProps } = viewPropsIn || {};
+		var viewProps = nonTamaguiProps;
+		if (props.forceStyle) viewProps.forceStyle = props.forceStyle;
+		if (isHOC) {
+			if (typeof _themeProp !== "undefined") viewProps.theme = _themeProp;
+			if (typeof passThrough !== "undefined") viewProps.passThrough = passThrough;
+			if (typeof asChild !== "undefined") viewProps.asChild = asChild;
+			if (typeof onTransition !== "undefined") viewProps.onTransition = onTransition;
+		}
+		var animationStyles;
+		var shouldUseAnimation = (inputStyle === "css" ? willBeAnimatedClient : willBeAnimated) && useAnimations && !isHOC;
+		var animatedRef;
+		if (shouldUseAnimation) {
+			var useStyleEmitter = (animationDriver === null || animationDriver === void 0 ? void 0 : animationDriver.avoidReRenders) ? function(listener) {
+				stateRef.current.useStyleListener = listener;
+			} : void 0;
+			var _splitStyles_effectiveTransition, _ref;
+			var effectiveTransition = (_ref = (_splitStyles_effectiveTransition = splitStyles === null || splitStyles === void 0 ? void 0 : splitStyles.effectiveTransition) !== null && _splitStyles_effectiveTransition !== void 0 ? _splitStyles_effectiveTransition : props.transition) !== null && _ref !== void 0 ? _ref : platformPseudo ? "0ms" : void 0;
+			if (splitStyles) splitStyles.effectiveTransition = effectiveTransition;
+			stateRef.current.prevPseudoState = (0, import_extractPseudoState.extractPseudoState)(state);
+			var animations = useAnimations({
+				props: propsWithAnimation,
+				style: isHydrated ? splitStylesStyle || {} : { ...splitStylesStyle },
+				styleState: splitStyles,
+				useStyleEmitter,
+				presence,
+				componentState: state,
+				styleProps,
+				theme,
+				themeName,
+				staticConfig,
+				stateRef,
+				onTransition
+			});
+			if (animations) {
+				if (animations.ref) animatedRef = animations.ref;
+				if (isHydrated && animations) {
+					animationStyles = animations.style;
+					viewProps.style = animationStyles;
+					if (animations.className) viewProps.className = `${state.unmounted === "should-enter" ? "t_unmounted " : ""}${viewProps.className || ""} ${animations.className}`;
+				}
+			}
+			if (process.env.NODE_ENV === "development" && time) time`animations`;
+		}
+		if (import_constants.isWeb && isExiting) viewProps.className = `t_exiting ${viewProps.className || ""}`;
+		if (process.env.NODE_ENV === "development" && props.untilMeasured && !isContainer) console.warn(`You set untilMeasured without establishing a container. Set it on the parent with container or container="name", not on the child using a container clause.`);
+		if (process.env.NODE_ENV === "development" && time) time`destructure`;
+		if (!isPassthrough && groupContext && isContainer) nonTamaguiProps.onLayout = (0, import_helpers.composeEventHandlers)(nonTamaguiProps.onLayout, function(e) {
+			var _stateRef_current_group;
+			var layout = e.nativeEvent.layout;
+			groupContext.state.layout = layout;
+			(_stateRef_current_group = stateRef.current.group) === null || _stateRef_current_group === void 0 || _stateRef_current_group.emit({ layout });
+			if (!stateRef.current.hasMeasured && props.untilMeasured === "hide") setState(function(prev) {
+				return { ...prev };
+			});
+			stateRef.current.hasMeasured = true;
+		});
+		viewProps = ((_hooks_usePropsTransform = import_setupHooks.hooks.usePropsTransform) === null || _hooks_usePropsTransform === void 0 ? void 0 : _hooks_usePropsTransform.call(import_setupHooks.hooks, elementType, nonTamaguiProps, stateRef, stateRef.current.willHydrate)) || nonTamaguiProps;
+		stateRef.current.composedForwardedRef = forwardedRef;
+		if (!stateRef.current.composedRef) stateRef.current.composedRef = (0, import_compose_refs.composeRefs)(function(x) {
+			stateRef.current.host = x;
+			(0, import_nativeStyleEngine.updateNativeStyleLink)(stateRef.current, x);
+			var current = stateRef.current.composedForwardedRef;
+			stateRef.current.attachedForwardedRef = x ? current : void 0;
+			(0, import_compose_refs.setRef)(current, x);
+		}, import_setElementProps.setElementProps, animatedRef);
+		viewProps.ref = stateRef.current.composedRef;
+		if (onClick !== void 0 && ((_staticConfig_neverSkipProps = staticConfig.neverSkipProps) === null || _staticConfig_neverSkipProps === void 0 ? void 0 : _staticConfig_neverSkipProps.onClick)) viewProps.onClick = onClick;
+		(0, import_constants.useIsomorphicLayoutEffect)(function() {
+			var attached = stateRef.current.attachedForwardedRef;
+			if (attached === forwardedRef) return;
+			if (attached) (0, import_compose_refs.setRef)(attached, null);
+			stateRef.current.attachedForwardedRef = forwardedRef;
+			if (stateRef.current.host) (0, import_compose_refs.setRef)(forwardedRef, stateRef.current.host);
+		}, [forwardedRef]);
+		(0, import_pointerEvents.usePointerEvents)(props, viewProps);
+		if (process.env.NODE_ENV === "development") {
+			if (!isText && import_constants.isWeb && !isHOC) import_react.default.Children.toArray(props.children).forEach(function(item) {
+				if (typeof item === "string" && item !== "\n") console.error(`Unexpected text node: ${item}. A text node cannot be a child of a <${displayName || propsIn.tag || "View"}>.`, props);
+			});
+		}
+		if (process.env.NODE_ENV === "development" && time) time`events-hooks`;
+		var unPress = function() {
+			setStateShallow({
+				press: false,
+				pressIn: false
+			});
+		};
+		if (process.env.NODE_ENV === "development" && import_constants.isWeb) (0, import_constants.useIsomorphicLayoutEffect)(function() {
+			if (debugProp === "verbose") {
+				let cssStyleDeclarationToObject2 = function(style2) {
+					var styleObject = {};
+					for (var i = 0; i < style2.length; i++) {
+						var prop = style2[i];
+						styleObject[prop] = style2.getPropertyValue(prop);
+					}
+					return styleObject;
+				};
+				var computed = stateRef.current.host ? cssStyleDeclarationToObject2(getComputedStyle(stateRef.current.host)) : {};
+				console.groupCollapsed(`Rendered > (opacity: ${computed.opacity})`);
+				console.warn(stateRef.current.host);
+				console.warn(computed);
+				console.groupEnd();
+			}
+		});
+		(0, import_constants.useIsomorphicLayoutEffect)(function() {
+			if (state.unmounted === true && hasEnterStyle) {
+				setStateShallow({ unmounted: "should-enter" });
+				return;
+			}
+			if (state.unmounted) {
+				if (inputStyle === "css") {
+					var cancelled = false;
+					requestAnimationFrame(function() {
+						if (cancelled) return;
+						requestAnimationFrame(function() {
+							if (cancelled) return;
+							setStateShallow({ unmounted: false });
+						});
+					});
+					return function() {
+						cancelled = true;
+					};
+				}
+				setStateShallow({ unmounted: false });
+			}
+		}, [state.unmounted, inputStyle]);
+		(0, import_constants.useIsomorphicLayoutEffect)(function() {
+			return function() {
+				var _stateRef_current_mediaEmitCleanup, _stateRef_current2;
+				componentSetStates.delete(setState);
+				(_stateRef_current_mediaEmitCleanup = (_stateRef_current2 = stateRef.current).mediaEmitCleanup) === null || _stateRef_current_mediaEmitCleanup === void 0 || _stateRef_current_mediaEmitCleanup.call(_stateRef_current2);
+				stateRef.current.mediaEmitCleanup = void 0;
+			};
+		}, []);
+		(0, import_constants.useIsomorphicLayoutEffect)(function() {
+			var disposeSafeArea;
+			if (splitStyles === null || splitStyles === void 0 ? void 0 : splitStyles.usesSafeArea) {
+				var updateSafeArea = function() {
+					setState(function(previous) {
+						return { ...previous };
+					});
+				};
+				disposeSafeArea = (0, import_resolveSafeAreaVariable.subscribeToSafeArea)(updateSafeArea);
+				updateSafeArea();
+			}
+			if (disabled) return disposeSafeArea;
+			if (!pseudoGroups && !mediaGroups) return disposeSafeArea;
+			if (!allGroupContexts) return disposeSafeArea;
+			var disposeGroup = (0, import_subscribeToContextGroup.subscribeToContextGroup)({
+				groupContext: allGroupContexts,
+				setStateShallow,
+				mediaGroups,
+				pseudoGroups
+			});
+			if (!disposeSafeArea) return disposeGroup;
+			return function() {
+				disposeSafeArea();
+				disposeGroup === null || disposeGroup === void 0 || disposeGroup();
+			};
+		}, [
+			allGroupContexts,
+			disabled,
+			splitStyles === null || splitStyles === void 0 ? void 0 : splitStyles.usesSafeArea,
+			groupSetRevision
+		]);
+		var groupEmitter = stateRef.current.group;
+		(0, import_constants.useIsomorphicLayoutEffect)(function() {
+			if (!groupContext || !groupEmitter) return;
+			notifyGroupSubscribers(groupContext, groupEmitter, state);
+		}, [
+			groupContext,
+			groupEmitter,
+			state
+		]);
+		var conditionalStates = !disabled ? splitStyles === null || splitStyles === void 0 ? void 0 : splitStyles.programStates : void 0;
+		var runtimePressStyle = !disabled && ((conditionalStates === null || conditionalStates === void 0 ? void 0 : conditionalStates.has("press")) || (conditionalStates === null || conditionalStates === void 0 ? void 0 : conditionalStates.has("active")));
+		var runtimeFocusStyle = !disabled && (conditionalStates === null || conditionalStates === void 0 ? void 0 : conditionalStates.has("focus"));
+		var runtimeFocusVisibleStyle = !disabled && (conditionalStates === null || conditionalStates === void 0 ? void 0 : conditionalStates.has("focus-visible"));
+		var attachFocus = Boolean(runtimePressStyle || runtimeFocusStyle || runtimeFocusVisibleStyle || onFocus || onBlur || !!componentContext.setParentFocusState);
+		var hasDynamicGroupChildren = Boolean(groupName && state.hasDynGroupChildren);
+		var attachPress = Boolean(hasDynamicGroupChildren || runtimePressStyle || onPress || onPressOut || onPressIn || onMouseDown || onMouseUp || onLongPress || false);
+		var runtimeHoverStyle = !disabled && (conditionalStates === null || conditionalStates === void 0 ? void 0 : conditionalStates.has("hover"));
+		var needsHoverState = Boolean(hasDynamicGroupChildren || runtimeHoverStyle && !platformPseudo);
+		var attachHover = (import_constants.isWeb || import_constants.isNativeDesktop) && !!(hasDynamicGroupChildren || needsHoverState || onMouseEnter || onMouseLeave);
+		var shouldAttach = !disabled && !props.asChild && Boolean(attachFocus || attachPress || attachHover || runtimePressStyle || runtimeHoverStyle || runtimeFocusStyle);
+		var needsPressState = Boolean(hasDynamicGroupChildren || runtimePressStyle);
+		if (process.env.NODE_ENV === "development" && time) time`events-setup`;
+		if (process.env.NODE_ENV === "development" && debugProp === "verbose") (0, import_log.log)(`\u{1FAA9} events()`, {
+			runtimeFocusStyle,
+			runtimePressStyle,
+			runtimeHoverStyle,
+			runtimeFocusVisibleStyle,
+			attachPress,
+			attachFocus,
+			attachHover,
+			shouldAttach,
+			needsHoverState
+		});
+		var events = shouldAttach ? {
+			onPressOut: attachPress ? function(e) {
+				unPress();
+				onPressOut === null || onPressOut === void 0 || onPressOut(e);
+				onMouseUp === null || onMouseUp === void 0 || onMouseUp(e);
+			} : void 0,
+			...(attachHover || attachPress) && {
+				onMouseEnter: function(e) {
+					var next = {};
+					if (needsHoverState && !lastInteractionWasTouch.value) next.hover = true;
+					if (needsPressState) {
+						if (state.pressIn) next.press = true;
+					}
+					setStateShallow(next);
+					onHoverIn === null || onHoverIn === void 0 || onHoverIn(e);
+					onMouseEnter === null || onMouseEnter === void 0 || onMouseEnter(e);
+				},
+				onMouseLeave: function(e) {
+					var next = {};
+					if (needsHoverState) next.hover = false;
+					if (needsPressState) {
+						next.press = false;
+						next.pressIn = false;
+					}
+					setStateShallow(next);
+					onHoverOut === null || onHoverOut === void 0 || onHoverOut(e);
+					onMouseLeave === null || onMouseLeave === void 0 || onMouseLeave(e);
+				}
+			},
+			onPressIn: attachPress ? function(e) {
+				if (needsPressState) setStateShallow({
+					press: true,
+					pressIn: true
+				});
+				onPressIn === null || onPressIn === void 0 || onPressIn(e);
+				onMouseDown === null || onMouseDown === void 0 || onMouseDown(e);
+				if (import_constants.isWeb) componentSetStates.add(setState);
+			} : void 0,
+			onPress: attachPress ? function(e) {
+				unPress();
+				onPress === null || onPress === void 0 || onPress(e);
+			} : void 0,
+			...attachPress && onLongPress && { onLongPress: function(e) {
+				unPress();
+				onLongPress === null || onLongPress === void 0 || onLongPress(e);
+			} },
+			...attachFocus && {
+				onFocus: function(e) {
+					var next = {};
+					if (componentContext.setParentFocusState) {
+						componentContext.setParentFocusState({ focusWithin: true });
+						next.focusWithin = true;
+					}
+					if (conditionalStates === null || conditionalStates === void 0 ? void 0 : conditionalStates.has("focus-visible")) if (lastInteractionWasKeyboard.value) next.focusVisible = true;
+					else next.focus = true;
+					else next.focus = true;
+					setStateShallow(next);
+					onFocus === null || onFocus === void 0 || onFocus(e);
+				},
+				onBlur: function(e) {
+					if (componentContext.setParentFocusState) componentContext.setParentFocusState({ focusWithin: false });
+					setStateShallow({
+						focus: false,
+						focusVisible: false,
+						focusWithin: false
+					});
+					onBlur === null || onBlur === void 0 || onBlur(e);
+				}
+			}
+		} : null;
+		if (events && !asChild) Object.assign(events, {
+			cancelable: !viewProps.rejectResponderTermination,
+			disabled,
+			hitSlop: viewProps.hitSlop,
+			delayLongPress: viewProps.delayLongPress,
+			delayPressIn: viewProps.delayPressIn,
+			delayPressOut: viewProps.delayPressOut,
+			minPressDuration: 0
+		});
+		if (process.env.NODE_ENV === "development" && time) time`events`;
+		if (process.env.NODE_ENV === "development" && debugProp === "verbose") (0, import_log.log)(`events`, {
+			events,
+			attachHover,
+			attachPress
+		});
+		var hasRealPressEvents = false;
+		var pressGesture = null;
+		var propsWithHref = props;
+		var propsInWithHref = propsIn;
+		var _props_testID, _ref1, _ref2, _ref3, _ref4;
+		var pressDebugDetail = (_ref4 = (_ref3 = (_ref2 = (_ref1 = (_props_testID = props.testID) !== null && _props_testID !== void 0 ? _props_testID : propsIn.testID) !== null && _ref1 !== void 0 ? _ref1 : props.accessibilityLabel) !== null && _ref2 !== void 0 ? _ref2 : propsIn.accessibilityLabel) !== null && _ref3 !== void 0 ? _ref3 : typeof propsWithHref.href === "string" ? propsWithHref.href : null) !== null && _ref4 !== void 0 ? _ref4 : typeof propsInWithHref.href === "string" ? propsInWithHref.href : null;
+		var pressDebugName = displayName ? pressDebugDetail ? `${displayName}:${pressDebugDetail}` : displayName : pressDebugDetail || null;
+		hasRealPressEvents = !!(onPress || onPressIn || onPressOut || onLongPress);
+		pressGesture = (0, import_eventHandling.useEvents)(events, viewProps, stateRef, staticConfig, isHOC, isInsideNativeMenu, pressDebugName, hasRealPressEvents);
+		if (process.env.NODE_ENV === "development" && time) time`hooks`;
+		if (asChild && !isHOC) {
+			elementType = import_Slot.Slot;
+			Object.assign(viewProps, {
+				onPress,
+				onLongPress
+			});
+		}
+		if (process.env.NODE_ENV === "development" && time) time`spaced-as-child`;
+		var content;
+		var childrenFromHooks = import_setupHooks.hooks.useChildren ? import_setupHooks.hooks.useChildren(elementType, children, viewProps, isPassthrough) : void 0;
+		if (isPassthrough) content = /* @__PURE__ */ import_react.default.createElement(BaseComponent, { style: { display: "contents" } }, propsIn.children);
+		else {
+			if (childrenFromHooks) content = childrenFromHooks;
+			var isRenderPropString = typeof renderProp === "string";
+			if (renderProp && !isRenderPropString) {
+				var out = getCustomRender(renderProp, content || children, viewProps, componentState);
+				if (out) {
+					viewProps = out.viewProps;
+					if (isAnimatedCustomComponent && elementType["acceptRenderProp"] && typeof out.elementType === "string") viewProps.render = out.elementType;
+					else elementType = out.elementType;
+				}
+			}
+			if (!content) {
+				if (isRenderPropString && elementType["acceptRenderProp"]) viewProps.render = renderProp;
+				content = /* @__PURE__ */ import_react.default.createElement(elementType, viewProps, content || children);
+			}
+			if (process.env.NODE_ENV === "development" && time) time`use-children`;
+		}
+		var isCompositeComponent = !isHOC && Component && typeof Component !== "string";
+		content = (0, import_eventHandling.wrapWithGestureDetector)(content, pressGesture, stateRef, isHOC, isCompositeComponent, hasRealPressEvents);
+		var ResetPresence = (animationDriver === null || animationDriver === void 0 ? void 0 : animationDriver.isStub) ? void 0 : animationDriver === null || animationDriver === void 0 ? void 0 : animationDriver.ResetPresence;
+		var needsReset = Boolean(!asChild && splitStyles && !isHOC && ResetPresence && willBeAnimated && (hasEnterStyle || presenceState));
+		var hasEverReset = stateRef.current.hasEverResetPresence;
+		if (needsReset && !hasEverReset) stateRef.current.hasEverResetPresence = true;
+		if ((needsReset || hasEverReset) && ResetPresence) content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ResetPresence, {
+			disabled: !needsReset,
+			children: content
+		});
+		if (process.env.NODE_ENV === "development" && time) time`create-element`;
+		if (conditionalStates === null || conditionalStates === void 0 ? void 0 : conditionalStates.has("focus-within")) content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ComponentContext.ComponentContext.Provider, {
+			...componentContext,
+			setParentFocusState: setStateShallow,
+			children: content
+		});
+		if (groupName || isContainer) content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_GroupContext.GroupContext.Provider, {
+			value: allGroupContexts,
+			children: content
+		});
+		if (process.env.NODE_ENV === "development" && time) time`group-context`;
+		content = disableTheme || !splitStyles ? content : (0, import_Theme.getThemedChildren)(themeState, content, themeStateProps, false, stateRef);
+		if (process.env.NODE_ENV === "development" && time) time`themed-children`;
+		if (overriddenContextProps && contextForOverride) {
+			var Provider = contextForOverride.Provider;
+			for (var key2 in styledContextValue) if (!(key2 in overriddenContextProps)) overriddenContextProps[key2] = styledContextValue[key2];
+			content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Provider, {
+				__disableMergeDefaultValues: true,
+				...overriddenContextProps,
+				children: content
+			});
+		}
+		if (process.env.NODE_ENV === "development" && time) time`context-override`;
+		if (!process.env.TAMAGUI_DID_OUTPUT_CSS && false);
+		if (process.env.NODE_ENV === "development" && time) time`style-tags`;
+		if (process.env.NODE_ENV === "development") {
+			if (debugProp && debugProp !== "profile") {
+				var title = `render <${typeof elementType === "string" ? elementType : "Component"} /> (${internalID}) with props`;
+				if (!import_constants.isWeb || !import_constants.isClient) {
+					(0, import_log.log)(title);
+					(0, import_log.log)(`state: `, state);
+					if (import_isDevTools.isDevTools) (0, import_log.log)("viewProps", viewProps);
+					(0, import_log.log)(`final styles:`);
+					for (var key3 in splitStylesStyle) (0, import_log.log)(key3, splitStylesStyle[key3]);
+				} else {
+					console.groupCollapsed(title);
+					try {
+						(0, import_log.log)("viewProps", viewProps);
+						(0, import_log.log)("children", content);
+						if (typeof window !== "undefined") (0, import_log.log)({
+							propsIn,
+							props,
+							attachPress,
+							animationStyles,
+							classNames,
+							content,
+							elementType,
+							events,
+							isAnimated,
+							hasRuntimeMediaKeys,
+							isStringElement,
+							mediaListeningKeys,
+							shouldAttach,
+							noClass,
+							shouldListenForMedia,
+							splitStyles,
+							splitStylesStyle,
+							state,
+							stateRef,
+							staticConfig,
+							styleProps,
+							themeState,
+							viewProps,
+							willBeAnimated,
+							startedUnhydrated
+						});
+					} catch (e) {} finally {
+						console.groupEnd();
+					}
+				}
+			}
+		}
+		if (process.env.NODE_ENV === "development" && time) {
+			time`rest`;
+			if (!globalThis["willPrint"]) {
+				globalThis["willPrint"] = true;
+				setTimeout(function() {
+					delete globalThis["willPrint"];
+					time.print();
+					time = null;
+				}, 50);
+			}
+		}
+		return content;
+	};
+	function notifyGroupSubscribers(groupContext, groupEmitter, pseudo) {
+		if (!groupContext || !groupEmitter) return;
+		var prevPseudo = groupContext.state.pseudo;
+		var shouldReplacePseudo = !prevPseudo || "unmounted" in prevPseudo || "group" in prevPseudo || "hasDynGroupChildren" in prevPseudo || "transition" in prevPseudo;
+		var nextPseudo = shouldReplacePseudo ? {} : prevPseudo;
+		var didChange = shouldReplacePseudo;
+		for (var i = 0; i < groupPseudoKeys.length; i++) {
+			var key = groupPseudoKeys[i];
+			var value = pseudo[key];
+			if (nextPseudo[key] !== value) {
+				nextPseudo[key] = value;
+				didChange = true;
+			} else if (didChange) nextPseudo[key] = value;
+		}
+		if (!didChange) return;
+		groupContext.state.pseudo = nextPseudo;
+		groupEmitter.emit(groupContext.state);
+	}
+	res = component;
+	res = /* @__PURE__ */ import_react.default.memo(res);
+	res.staticConfig = staticConfig;
+	res.resolve = function(resolver) {
+		var next = createComponent({
+			...staticConfig,
+			resolvers: staticConfig.resolvers ? [...staticConfig.resolvers, resolver] : [resolver]
+		});
+		for (var key in res) {
+			if (key === "propTypes" || key in next) continue;
+			next[key] = res[key];
+		}
+		return next;
+	};
+	if (displayName) {
+		res.displayName = displayName;
+		res[import_componentDisplayName.componentDisplayName] = displayName;
+	}
+	return res;
+}
+var fromPx = function(val) {
+	if (typeof val === "number") return val;
+	if (typeof val === "string") return +val.replace("px", "");
+	return 0;
+};
+var getCustomRender = function(renderProp, content, viewProps, state) {
+	if (typeof renderProp === "function") renderProp = getRenderElementForPlatform(renderProp(viewProps, state));
+	if (renderProp) {
+		if (typeof renderProp === "object" && /* @__PURE__ */ import_react.default.isValidElement(renderProp)) {
+			if (getRenderElementForPlatform(renderProp)) {
+				var elementProps = renderProp.props;
+				var mergedProps = elementProps ? (0, import_mergeRenderElementProps.mergeRenderElementProps)(elementProps, viewProps, content) : viewProps;
+				return {
+					elementType: renderProp.type,
+					viewProps: mergedProps
+				};
+			}
+		}
+	}
+};
+function getRenderElementForPlatform(potential) {
+	if (isHTMLElement(potential)) return;
+	return potential;
+}
+function isHTMLElement(el) {
+	return typeof el["type"] === "string" && el["type"][0] === el["type"][0].toLowerCase();
+}