@tamagui/web 2.7.7 → 3.0.0-beta.1093.1

package/dist/cjs/createComponent.cjs

@@ -5,36 +5,29 @@ 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
-  });
+	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;
+	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(
-// If the importer is in node compatibility mode or this is not an ESM
-// file that has been converted to a CommonJS file using a Babel-
-// compatible transform (i.e. "__esModule" has not been set), then set
-// "default" to the CommonJS "module.exports" for node compatibility.
-isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-  value: mod,
-  enumerable: true
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var createComponent_exports = {};
 __export(createComponent_exports, {
-  componentSetStates: () => componentSetStates,
-  createComponent: () => createComponent
+	componentSetStates: () => componentSetStates,
+	createComponent: () => createComponent
 });
 module.exports = __toCommonJS(createComponent_exports);
 var import_compose_refs = require("@tamagui/compose-refs");
@@ -50,20 +43,24 @@ var import_GroupContext = require("./contexts/GroupContext.cjs");
 var import_createVariable = require("./createVariable.cjs");
 var import_defaultComponentState = require("./defaultComponentState.cjs");
 var import_eventHandling = require("./eventHandling.cjs");
-var import_getDefaultProps = require("./helpers/getDefaultProps.cjs");
-var import_resolveAnimationDriver = require("./helpers/resolveAnimationDriver.cjs");
+var import_componentDisplayName = require("./helpers/componentDisplayName.cjs");
 var import_getSplitStyles = require("./helpers/getSplitStyles.cjs");
+var import_grammarConfig = require("./helpers/grammarConfig.cjs");
+var import_styleStaticConfig = require("./helpers/styleStaticConfig.cjs");
+require("./helpers/nativeStyleEngine.cjs");
+require("./hooks/getThemeProxied.cjs");
 var import_log = require("./helpers/log.cjs");
 var import_mergeProps = require("./helpers/mergeProps.cjs");
 var import_mergeRenderElementProps = require("./helpers/mergeRenderElementProps.cjs");
-var import_objectIdentityKey = require("./helpers/objectIdentityKey.cjs");
+require("./helpers/mediaState.cjs");
 var import_pointerEvents = require("./helpers/pointerEvents.cjs");
-var import_pseudoTransitions = require("./helpers/pseudoTransitions.cjs");
+var import_extractPseudoState = require("./helpers/extractPseudoState.cjs");
+var import_resolveSafeAreaVariable = require("./helpers/resolveSafeAreaVariable.cjs");
 var import_setElementProps = require("./helpers/setElementProps.cjs");
 var import_subscribeToContextGroup = require("./helpers/subscribeToContextGroup.cjs");
-var import_themeable = require("./helpers/themeable.cjs");
 var import_wrapStyleTags = require("./helpers/wrapStyleTags.cjs");
 var import_useComponentState = require("./hooks/useComponentState.cjs");
+var import_useSplitStyles = require("./hooks/useSplitStyles.cjs");
 var import_useMedia = require("./hooks/useMedia.cjs");
 var import_useTheme = require("./hooks/useTheme.cjs");
 var import_setupHooks = require("./setupHooks.cjs");
@@ -73,1011 +70,994 @@ var import_jsx_runtime = require("react/jsx-runtime");
 let time;
 let debugKeyListeners;
 let startVisualizer;
-const componentSetStates = /* @__PURE__ */new Set();
-const avoidReRenderKeys = /* @__PURE__ */new Set(["hover", "press", "pressIn", "group", "focus", "focusWithin", "media", "group"]);
-const groupPseudoKeys = ["disabled", "hover", "press", "pressIn", "focus", "focusVisible", "focusWithin"];
+const componentSetStates = /* @__PURE__ */ new Set();
+const avoidReRenderKeys = /* @__PURE__ */ new Set([
+	"hover",
+	"press",
+	"pressIn",
+	"group",
+	"focus",
+	"focusWithin",
+	"media",
+	"group"
+]);
+const groupPseudoKeys = [
+	"disabled",
+	"hover",
+	"press",
+	"pressIn",
+	"focus",
+	"focusVisible",
+	"focusWithin"
+];
 if (typeof window !== "undefined") {
-  const cancelPresses = () => {
-    componentSetStates.forEach(setState => setState(prev => {
-      if (prev.press || prev.pressIn) return {
-        ...prev,
-        press: false,
-        pressIn: false
-      };
-      return prev;
-    }));
-    componentSetStates.clear();
-  };
-  const cancelTouches = () => {
-    componentSetStates.forEach(setState => setState(prev => {
-      if (prev.press || prev.pressIn || prev.hover) return {
-        ...prev,
-        press: false,
-        pressIn: false,
-        hover: false
-      };
-      return prev;
-    }));
-    componentSetStates.clear();
-  };
-  addEventListener("mouseup", cancelPresses);
-  addEventListener("touchend", cancelTouches);
-  addEventListener("touchcancel", cancelTouches);
-  if (process.env.NODE_ENV === "development") startVisualizer = () => {
-    const devVisualizerConfig = import_config.devConfig?.visualizer;
-    if (devVisualizerConfig && !globalThis.__tamaguiDevVisualizer) {
-      let show = function (val) {
-          clearTimeout(tm);
-          isShowing = val;
-          debugKeyListeners?.forEach(l => l(val));
-          if (!val && resizeListener) {
-            window.removeEventListener("resize", resizeListener);
-            resizeListener = null;
-          }
-        },
-        cancelShow = function () {
-          clearTimeout(tm);
-          if (resizeListener) {
-            window.removeEventListener("resize", resizeListener);
-            resizeListener = null;
-          }
-        };
-      globalThis.__tamaguiDevVisualizer = true;
-      debugKeyListeners = /* @__PURE__ */new Set();
-      let tm;
-      let isShowing = false;
-      let resizeListener = null;
-      const options = {
-        key: "Alt",
-        delay: 800,
-        ...(typeof devVisualizerConfig === "object" ? devVisualizerConfig : {})
-      };
-      window.addEventListener("blur", () => {
-        show(false);
-      });
-      window.addEventListener("keydown", ({
-        key,
-        metaKey,
-        defaultPrevented
-      }) => {
-        clearTimeout(tm);
-        if (defaultPrevented) return;
-        if (metaKey) return;
-        if (key === options.key) {
-          if (!resizeListener) {
-            resizeListener = () => cancelShow();
-            window.addEventListener("resize", resizeListener);
-          }
-          tm = setTimeout(() => {
-            show(true);
-          }, options.delay);
-        }
-      });
-      window.addEventListener("keyup", ({
-        defaultPrevented
-      }) => {
-        if (defaultPrevented) return;
-        cancelShow();
-        if (isShowing) show(false);
-      });
-    }
-  };
+	const cancelPresses = () => {
+		componentSetStates.forEach((setState) => setState((prev) => {
+			if (prev.press || prev.pressIn) return {
+				...prev,
+				press: false,
+				pressIn: false
+			};
+			return prev;
+		}));
+		componentSetStates.clear();
+	};
+	const cancelTouches = () => {
+		componentSetStates.forEach((setState) => setState((prev) => {
+			if (prev.press || prev.pressIn || prev.hover) return {
+				...prev,
+				press: false,
+				pressIn: false,
+				hover: false
+			};
+			return prev;
+		}));
+		componentSetStates.clear();
+	};
+	addEventListener("mouseup", cancelPresses);
+	addEventListener("touchend", cancelTouches);
+	addEventListener("touchcancel", cancelTouches);
+	if (process.env.NODE_ENV === "development") startVisualizer = () => {
+		const devVisualizerConfig = import_config.devConfig?.visualizer;
+		if (devVisualizerConfig && !globalThis.__tamaguiDevVisualizer) {
+			let show = function(val) {
+				clearTimeout(tm);
+				isShowing = val;
+				debugKeyListeners?.forEach((l) => l(val));
+				if (!val && resizeListener) {
+					window.removeEventListener("resize", resizeListener);
+					resizeListener = null;
+				}
+			}, cancelShow = function() {
+				clearTimeout(tm);
+				if (resizeListener) {
+					window.removeEventListener("resize", resizeListener);
+					resizeListener = null;
+				}
+			};
+			globalThis.__tamaguiDevVisualizer = true;
+			debugKeyListeners = /* @__PURE__ */ new Set();
+			let tm;
+			let isShowing = false;
+			let resizeListener = null;
+			const options = {
+				key: "Alt",
+				delay: 800,
+				...typeof devVisualizerConfig === "object" ? devVisualizerConfig : {}
+			};
+			window.addEventListener("blur", () => {
+				show(false);
+			});
+			window.addEventListener("keydown", ({ key, metaKey, defaultPrevented }) => {
+				clearTimeout(tm);
+				if (defaultPrevented) return;
+				if (metaKey) return;
+				if (key === options.key) {
+					if (!resizeListener) {
+						resizeListener = () => cancelShow();
+						window.addEventListener("resize", resizeListener);
+					}
+					tm = setTimeout(() => {
+						show(true);
+					}, options.delay);
+				}
+			});
+			window.addEventListener("keyup", ({ defaultPrevented }) => {
+				if (defaultPrevented) return;
+				cancelShow();
+				if (isShowing) show(false);
+			});
+		}
+	};
 }
-const lastInteractionWasKeyboard = {
-  value: false
-};
-const lastInteractionWasTouch = {
-  value: false
-};
+const lastInteractionWasKeyboard = { value: false };
+const lastInteractionWasTouch = { value: false };
 if (import_constants.isWeb && typeof document !== "undefined") {
-  document.addEventListener("keydown", () => {
-    if (!lastInteractionWasKeyboard.value) lastInteractionWasKeyboard.value = true;
-  });
-  document.addEventListener("mousedown", () => {
-    if (lastInteractionWasKeyboard.value) lastInteractionWasKeyboard.value = false;
-  });
-  document.addEventListener("mousemove", () => {
-    if (lastInteractionWasKeyboard.value) lastInteractionWasKeyboard.value = false;
-    lastInteractionWasTouch.value = false;
-  });
-  document.addEventListener("touchstart", () => {
-    lastInteractionWasTouch.value = true;
-  });
+	document.addEventListener("keydown", () => {
+		if (!lastInteractionWasKeyboard.value) lastInteractionWasKeyboard.value = true;
+	});
+	document.addEventListener("mousedown", () => {
+		if (lastInteractionWasKeyboard.value) lastInteractionWasKeyboard.value = false;
+	});
+	document.addEventListener("mousemove", () => {
+		if (lastInteractionWasKeyboard.value) lastInteractionWasKeyboard.value = false;
+		lastInteractionWasTouch.value = false;
+	});
+	document.addEventListener("touchstart", () => {
+		lastInteractionWasTouch.value = true;
+	});
 }
 function createComponent(staticConfig) {
-  let config = null;
-  const {
-    Component,
-    isText,
-    isHOC
-  } = staticConfig;
-  const component = import_react.default.forwardRef((propsIn, forwardedRef) => {
-    "use no memo";
-
-    config = config || (0, import_config.getConfig)();
-    const internalID = process.env.NODE_ENV === "development" ? import_react.default.useId() : "";
-    if (process.env.NODE_ENV === "development") {
-      if (startVisualizer) {
-        startVisualizer();
-        startVisualizer = void 0;
-      }
-    }
-    if (process.env.NODE_ENV === "test") {
-      const testRenderCount = propsIn["data-test-renders"];
-      if (testRenderCount && typeof testRenderCount === "object" && !Object.isFrozen(testRenderCount)) {
-        testRenderCount.current = testRenderCount.current ?? 0;
-        testRenderCount.current += 1;
-      }
-    }
-    const {
-      context,
-      isReactNative
-    } = staticConfig;
-    const debugProp = propsIn["debug"];
-    const styledContextValue = context ? import_react.default.useContext(context) : void 0;
-    let overriddenContextProps = null;
-    const componentContext = import_react.default.useContext(import_ComponentContext.ComponentContext);
-    const hasTextAncestor = !!(import_constants.isWeb && isText ? componentContext.inText : 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)`;
-    let props = propsIn;
-    const componentName = props.componentName || staticConfig.componentName;
-    const defaultProps = (0, import_getDefaultProps.getDefaultProps)(staticConfig, props.componentName);
-    const [nextProps, overrides] = (0, import_mergeProps.mergeComponentProps)(defaultProps, styledContextValue, propsIn);
-    props = nextProps;
-    overriddenContextProps = overrides;
-    if (process.env.NODE_ENV === "development" && import_constants.isClient) import_react.default.useEffect(() => {
-      let node;
-      let overlay = null;
-      const remove = () => {
-        if (overlay) try {
-          overlay.parentNode?.removeChild(overlay);
-          overlay = null;
-        } catch {}
-      };
-      const debugVisualizerHandler = (show = 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";
-          }
-          const dataAt = node.getAttribute("data-at") || "";
-          const dataIn = node.getAttribute("data-in") || "";
-          const 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 = `${componentName || ""} ${dataAt} ${dataIn}`.trim();
-          overlay.appendChild(tooltip);
-          node.appendChild(overlay);
-        } else remove();
-      };
-      debugKeyListeners = debugKeyListeners || /* @__PURE__ */new Set();
-      debugKeyListeners.add(debugVisualizerHandler);
-      return () => {
-        remove();
-        debugKeyListeners?.delete(debugVisualizerHandler);
-      };
-    }, [componentName]);
-    const groupContextParent = import_react.default.useContext(import_GroupContext.GroupContext);
-    const animationDriver = (() => {
-      if (props.animatedBy && config) {
-        if (config.animationDrivers) return config.animationDrivers[props.animatedBy] ?? config.animations;
-        return props.animatedBy === "default" ? config.animations : null;
-      }
-      return (0, import_resolveAnimationDriver.resolveAnimationDriver)(componentContext.animationDriver) ?? (0, import_resolveAnimationDriver.resolveAnimationDriver)(config?.animations) ?? null;
-    })();
-    const useAnimations = animationDriver?.useAnimations;
-    const componentState = (0, import_useComponentState.useComponentState)(props, animationDriver?.isStub ? null : animationDriver, staticConfig, config);
-    const {
-      disabled,
-      groupName,
-      hasAnimationProp,
-      hasEnterStyle,
-      isAnimated,
-      isExiting,
-      isHydrated,
-      presence,
-      presenceState,
-      setState,
-      noClass,
-      state,
-      stateRef,
-      inputStyle,
-      outputStyle,
-      willBeAnimated,
-      willBeAnimatedClient,
-      platformPseudo,
-      startedUnhydrated
-    } = componentState;
-    if (animationDriver?.avoidReRenders) (0, import_constants.useIsomorphicLayoutEffect)(() => {
-      const emitted = stateRef.current.prevPseudoState;
-      if (emitted && (emitted.hover || emitted.press || emitted.focus)) stateRef.current.updateStyleListener?.();
-      const 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)(() => {
-      if (!platformPseudo || props.disabled) return;
-      const pseudoDriver = (0, import_constants.getPlatformDriver)()?.pseudo;
-      const host = stateRef.current.host;
-      if (!pseudoDriver || !host) return;
-      return pseudoDriver.subscribe(host, ({
-        hovered
-      }) => {
-        stateRef.current.setStateShallow?.({
-          hover: hovered
-        });
-      });
-    }, [platformPseudo, props.disabled]);
-    const allGroupContexts = (0, import_react.useMemo)(() => {
-      if (!groupName || props.passThrough) return groupContextParent;
-      const listeners = /* @__PURE__ */new Set();
-      stateRef.current.group?.listeners?.clear();
-      stateRef.current.group = {
-        listeners,
-        emit(state2) {
-          listeners.forEach(l => l(state2));
-        },
-        subscribe(cb) {
-          listeners.add(cb);
-          if (listeners.size === 1) setStateShallow({
-            hasDynGroupChildren: true
-          });
-          return () => {
-            listeners.delete(cb);
-            if (listeners.size === 0) setStateShallow({
-              hasDynGroupChildren: false
-            });
-          };
-        }
-      };
-      return {
-        ...groupContextParent,
-        [groupName]: {
-          state: {
-            pseudo: import_defaultComponentState.defaultComponentStateMounted
-          },
-          subscribe: listener => {
-            const dispose = stateRef.current.group?.subscribe(listener);
-            return () => {
-              dispose?.();
-            };
-          }
-        }
-      };
-    }, [stateRef, groupName, groupContextParent]);
-    let setStateShallow = componentState.setStateShallow;
-    if (process.env.NODE_ENV === "development" && time) time`use-state`;
-    const renderProp = props.render;
-    const isRenderString = !Component || typeof Component === "string";
-    const element = import_constants.isWeb ? isRenderString ? renderProp || Component : Component : Component;
-    const BaseComponent = isText ? element || "span" : element || (hasTextAncestor ? "span" : "div");
-    let elementType = BaseComponent;
-    if (animationDriver && isAnimated && animationDriver.needsCustomComponent) elementType = animationDriver[isText ? "Text" : "View"] || elementType;
-    const disableTheme = props["data-disable-theme"] || isHOC;
-    if (process.env.NODE_ENV === "development" && time) time`theme-props`;
-    const themeStateProps = {
-      componentName,
-      disable: disableTheme,
-      shallow: props.themeShallow,
-      debug: debugProp,
-      unstyled: props.unstyled
-    };
-    if ("theme" in props) themeStateProps.name = props.theme;
-    themeStateProps.needsUpdate = () => !!stateRef.current.isListeningToTheme;
-    if (process.env.NODE_ENV === "development") {
-      if (debugProp && debugProp !== "profile") {
-        const name = `${componentName || Component?.displayName || Component?.name || "[Unnamed Component]"}`;
-        const type = (hasEnterStyle ? "(hasEnter)" : " ") + (isAnimated ? "(animated)" : " ") + (isReactNative ? "(rnw)" : " ") + (noClass ? "(noClass)" : " ") + (state.press || state.pressIn ? "(PRESSED)" : " ") + (state.hover ? "(HOVERED)" : " ") + (state.focus ? "(FOCUSED)" : " ") + (state.focusWithin ? "(WITHIN FOCUSED)" : " ") + (presenceState?.isPresent === false ? "(EXIT)" : "");
-        const dataIs = propsIn["data-is"] || "";
-        const banner = `<${name} /> ${internalID} ${dataIs ? ` ${dataIs}` : ""} ${type.trim()} (hydrated: ${isHydrated}) (unmounted: ${state.unmounted})`;
-        const ch = propsIn.children;
-        let 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, Object.keys(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(`
+	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");
+	let config = null;
+	let resolvedDefaultProps;
+	let resolvedStyleRevision = -1;
+	let resolvedStyleStaticConfig;
+	const { Component, isText, isHOC } = staticConfig;
+	let res;
+	const { displayName } = staticConfig;
+	const component = (propsInWithRef) => {
+		"use no memo";
+		const forwardedRef = propsInWithRef.ref;
+		const propsIn = propsInWithRef;
+		config = config || (0, import_config.getConfig)();
+		const styleRevision = (0, import_grammarConfig.getConfigRevisionState)(config).revision;
+		if (resolvedStyleRevision !== styleRevision) {
+			resolvedStyleRevision = styleRevision;
+			const nextStyleStaticConfig = (0, import_styleStaticConfig.getStyleStaticConfig)(staticConfig, config);
+			resolvedStyleStaticConfig = nextStyleStaticConfig;
+			resolvedDefaultProps = nextStyleStaticConfig.defaultProps;
+			if (import_constants.isWeb && !staticConfig.isText && config.settings.defaultPosition === "relative" && nextStyleStaticConfig.baseStyle?.position === void 0) resolvedStyleStaticConfig = {
+				...nextStyleStaticConfig,
+				baseStyle: {
+					position: "relative",
+					...nextStyleStaticConfig.baseStyle
+				}
+			};
+		}
+		const styleStaticConfig = resolvedStyleStaticConfig;
+		styleStaticConfig.styledContextKeys;
+		const internalID = process.env.NODE_ENV === "development" ? import_react.default.useId() : "";
+		if (process.env.NODE_ENV === "development") {
+			if (startVisualizer) {
+				startVisualizer();
+				startVisualizer = void 0;
+			}
+		}
+		if (process.env.NODE_ENV === "test") {
+			const testRenderCount = propsIn["data-test-renders"];
+			if (testRenderCount && typeof testRenderCount === "object" && !Object.isFrozen(testRenderCount)) {
+				testRenderCount.current = testRenderCount.current ?? 0;
+				testRenderCount.current += 1;
+			}
+		}
+		const { context } = staticConfig;
+		const debugProp = propsIn["debug"];
+		const styledContextValue = context ? import_react.default.useContext(context) : void 0;
+		let overriddenContextProps = null;
+		const componentContext = import_react.default.useContext(import_ComponentContext.ComponentContext);
+		const hasTextAncestor = !!(import_constants.isWeb && isText ? componentContext.inText : 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)`;
+		let props = propsIn;
+		const [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(() => {
+			let node;
+			let overlay = null;
+			const remove = () => {
+				if (overlay) try {
+					overlay.parentNode?.removeChild(overlay);
+					overlay = null;
+				} catch {}
+			};
+			const debugVisualizerHandler = (show = 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";
+					}
+					const dataAt = node.getAttribute("data-at") || "";
+					const dataIn = node.getAttribute("data-in") || "";
+					const 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 () => {
+				remove();
+				debugKeyListeners?.delete(debugVisualizerHandler);
+			};
+		}, [displayName]);
+		const groupContextParent = import_react.default.useContext(import_GroupContext.GroupContext);
+		const animationDriver = (() => {
+			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;
+			}
+			return componentContext.animationDriver ?? config?.animations ?? null;
+		})();
+		const useAnimations = animationDriver?.isStub ? void 0 : animationDriver?.useAnimations;
+		const componentState = (0, import_useComponentState.useComponentState)(props, animationDriver?.isStub ? null : animationDriver, staticConfig, config);
+		const { disabled, hasAnimationProp, isExiting, isHydrated, presence, presenceState, setState, noClass, state, stateRef, inputStyle, outputStyle, startedUnhydrated } = componentState;
+		let { groupName } = componentState;
+		let { hasEnterStyle, isAnimated, willBeAnimated, willBeAnimatedClient, platformPseudo } = componentState;
+		props = componentState.props;
+		stateRef.current.avoidReRenders ??= !!animationDriver?.avoidReRenders;
+		if (stateRef.current.avoidReRenders) (0, import_constants.useIsomorphicLayoutEffect)(() => {
+			const emitted = stateRef.current.prevPseudoState;
+			if (emitted && (emitted.hover || emitted.press || emitted.focus)) stateRef.current.updateStyleListener?.();
+			const 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)(() => {
+			if (!platformPseudo || props.disabled) return;
+			const pseudoDriver = (0, import_constants.getPlatformDriver)()?.pseudo;
+			const host = stateRef.current.host;
+			if (!pseudoDriver || !host) return;
+			return pseudoDriver.subscribe(host, ({ hovered }) => {
+				stateRef.current.setStateShallow?.({ hover: hovered });
+			});
+		}, [platformPseudo, props.disabled]);
+		let setStateShallow = componentState.setStateShallow;
+		if (process.env.NODE_ENV === "development" && time) time`use-state`;
+		const renderProp = props.render;
+		const isRenderString = !Component || typeof Component === "string";
+		const element = import_constants.isWeb ? isRenderString ? renderProp || Component : Component : Component;
+		const BaseComponent = isText ? element || "span" : element || (hasTextAncestor ? "span" : "div");
+		let elementType = BaseComponent;
+		const isAnimatedCustomComponent = animationDriver && isAnimated && animationDriver.needsCustomComponent;
+		if (isAnimatedCustomComponent) elementType = animationDriver[isText ? "Text" : "View"] || elementType;
+		const disableTheme = props["data-disable-theme"] || isHOC;
+		if (process.env.NODE_ENV === "development" && time) time`theme-props`;
+		const 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 = () => !!stateRef.current.isListeningToTheme);
+		if (process.env.NODE_ENV === "development") {
+			if (debugProp && debugProp !== "profile") {
+				const name = `${displayName || Component?.displayName || Component?.name || "[Unnamed Component]"}`;
+				const type = (hasEnterStyle ? "(hasEnter)" : " ") + (isAnimated ? "(animated)" : " ") + (noClass ? "(noClass)" : " ") + (state.press || state.pressIn ? "(PRESSED)" : " ") + (state.hover ? "(HOVERED)" : " ") + (state.focus ? "(FOCUSED)" : " ") + (state.focusWithin ? "(WITHIN FOCUSED)" : " ") + (presenceState?.isPresent === false ? "(EXIT)" : "");
+				const dataIs = propsIn["data-is"] || "";
+				const banner = `<${name} /> ${internalID} ${dataIs ? ` ${dataIs}` : ""} ${type.trim()} (hydrated: ${isHydrated}) (unmounted: ${state.unmounted})`;
+				const ch = propsIn.children;
+				let 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`;
-    const [theme, themeState] = (0, import_useTheme.useThemeWithState)(themeStateProps);
-    if (process.env.NODE_ENV === "development" && time) time`theme`;
-    elementType = element || elementType;
-    const isStringElement = typeof elementType === "string";
-    const mediaState = (0, import_useMedia.useMedia)(componentContext, debugProp);
-    (0, import_createVariable.setDidGetVariableValue)(false);
-    if (process.env.NODE_ENV === "development" && time) time`media`;
-    const styleProps = {
-      mediaState,
-      noClass,
-      resolveValues: isAnimated && inputStyle !== "css" || isHOC && state.unmounted == false && hasAnimationProp ? "value" : "auto",
-      isExiting,
-      isAnimated,
-      willBeAnimated,
-      styledContext: styledContextValue
-    };
-    const themeName = themeState?.name || "";
-    if (process.env.NODE_ENV === "development" && time) time`split-styles-prepare`;
-    const splitStyles = (0, import_getSplitStyles.useSplitStyles)(props, staticConfig, theme, themeName, state, styleProps, null, componentContext, allGroupContexts, elementType, startedUnhydrated, debugProp, animationDriver);
-    const isPassthrough = !splitStyles;
-    let contextForOverride = staticConfig.context;
-    if (splitStyles?.overriddenContextProps) {
-      const contextForProps = staticConfig.context || staticConfig.parentStaticConfig?.context;
-      if (contextForProps) {
-        for (const key in splitStyles.overriddenContextProps) {
-          overriddenContextProps = overriddenContextProps || {};
-          overriddenContextProps[key] = splitStyles.overriddenContextProps[key];
-        }
-        if (!staticConfig.context) contextForOverride = contextForProps;
-      }
-    }
-    const groupContext = groupName ? allGroupContexts?.[groupName] || null : null;
-    if (!isPassthrough && groupContext && props.containerType !== "normal") {
-      const groupState = groupContext?.state;
-      if (groupState && groupState.layout === void 0) {
-        if (splitStyles.style?.width || splitStyles.style?.height) groupState.layout = {
-          width: fromPx(splitStyles.style.width),
-          height: fromPx(splitStyles.style.height)
-        };
-      }
-    }
-    const 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?.avoidReRenders && !hasEnterExitTransition) {
-      let updateGroupListeners = function () {
-        const updatedState = stateRef.current.nextState;
-        if (groupContext) {
-          const {
-            group,
-            hasDynGroupChildren,
-            unmounted,
-            transition,
-            ...childrenGroupState
-          } = updatedState;
-          notifyGroupSubscribers(groupContext, stateRef.current.group || null, childrenGroupState);
-        }
-      };
-      const ogSetStateShallow = setStateShallow;
-      stateRef.current.updateStyleListener = () => {
-        const useStyleListener = stateRef.current.useStyleListener;
-        if (!useStyleListener) {
-          const pendingState = stateRef.current.nextState;
-          if (pendingState) ogSetStateShallow(pendingState);
-          return;
-        }
-        const updatedState = stateRef.current.nextState || state;
-        const mediaState2 = stateRef.current.nextMedia;
-        const nextStyles = (0, import_getSplitStyles.getSplitStyles)(props, staticConfig, theme, themeName, updatedState, mediaState2 ? {
-          ...styleProps,
-          mediaState: mediaState2
-        } : styleProps, null, componentContext, allGroupContexts, elementType, startedUnhydrated, debugProp, animationDriver);
-        const effectiveTransition = (0, import_pseudoTransitions.resolveEffectivePseudoTransition)(stateRef.current.prevPseudoState, updatedState, nextStyles?.pseudoTransitions,
-        // platform-pseudo with no declared transition = instant (CSS :hover semantics)
-        props.transition ?? (platformPseudo ? "0ms" : void 0));
-        stateRef.current.prevPseudoState = (0, import_pseudoTransitions.extractPseudoState)(updatedState);
-        const hasActivePseudo = Boolean(updatedState.hover || updatedState.press || updatedState.pressIn || updatedState.focus || updatedState.focusWithin);
-        useStyleListener(nextStyles?.style || {}, effectiveTransition, hasActivePseudo);
-      };
-      componentContext.mediaEmitListeners = componentContext.mediaEmitListeners || /* @__PURE__ */new Set();
-      if (!stateRef.current.mediaEmitCleanup) {
-        const updateListener = next => {
-          stateRef.current.nextMedia = next;
-          stateRef.current.updateStyleListener?.();
-        };
-        componentContext.mediaEmitListeners.add(updateListener);
-        stateRef.current.mediaEmitCleanup = () => {
-          componentContext.mediaEmitListeners?.delete(updateListener);
-        };
-      }
-      componentContext.mediaEmit = componentContext.mediaEmit || (next => {
-        for (const listener of componentContext.mediaEmitListeners) listener(next);
-      });
-      stateRef.current.setStateShallow = nextOrGetNext => {
-        const prev = stateRef.current.nextState || state;
-        const next = typeof nextOrGetNext === "function" ? nextOrGetNext(prev) : nextOrGetNext;
-        if (next === prev || (0, import_is_equal_shallow.isEqualShallow)(prev, next)) return;
-        const canAvoidReRender = Object.keys(next).every(key => avoidReRenderKeys.has(key));
-        const updatedState = {
-          ...prev,
-          ...next
-        };
-        stateRef.current.nextState = updatedState;
-        if (canAvoidReRender) {
-          if (process.env.NODE_ENV === "development" && debugProp && debugProp !== "profile") {
-            console.groupCollapsed(`[\u26A1\uFE0F] avoid setState`, componentName, next, {
-              updatedState,
-              props
-            });
-            console.info(stateRef.current.host);
-            console.groupEnd();
-          }
-          updateGroupListeners();
-          stateRef.current.updateStyleListener?.();
-        } else {
-          if (process.env.NODE_ENV === "development" && debugProp && debugProp !== "profile") console.info(`[\u{1F40C}] re-render`, {
-            canAvoidReRender,
-            next
-          });
-          ogSetStateShallow(next);
-        }
-      };
-      setStateShallow = state2 => {
-        stateRef.current.setStateShallow?.(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;
-      }
-      if (splitStyles.dynamicThemeAccess != null) stateRef.current.isListeningToTheme = splitStyles.dynamicThemeAccess;
-    }
-    const hasRuntimeMediaKeys = splitStyles?.hasMedia && splitStyles.hasMedia !== true;
-    const shouldListenForMedia = (0, import_createVariable.didGetVariableValue)() || hasRuntimeMediaKeys || noClass && splitStyles?.hasMedia === true;
-    const mediaListeningKeys = hasRuntimeMediaKeys ? splitStyles.hasMedia : null;
-    if (process.env.NODE_ENV === "development" && debugProp === "verbose") console.info(`useMedia() createComponent`, shouldListenForMedia, mediaListeningKeys);
-    (0, import_useMedia.setMediaShouldUpdate)(componentContext, shouldListenForMedia, mediaListeningKeys);
-    const {
-      viewProps: viewPropsIn,
-      pseudos,
-      style: splitStylesStyle,
-      classNames,
-      pseudoGroups,
-      mediaGroups
-    } = splitStyles || {};
-    const propsWithAnimation = props;
-    const {
-      asChild,
-      children,
-      themeShallow,
-      spaceDirection: _spaceDirection,
-      onPress,
-      onLongPress,
-      onPressIn,
-      onPressOut,
-      onHoverIn,
-      onHoverOut,
-      onMouseUp,
-      onMouseDown,
-      onMouseEnter,
-      onMouseLeave,
-      onFocus,
-      onBlur,
-      onDidAnimate,
-      separator,
-      passThrough,
-      forceStyle: _forceStyle,
-      onClick,
-      theme: _themeProp,
-      ...nonTamaguiProps
-    } = viewPropsIn || {};
-    let 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;
-    }
-    let animationStyles;
-    const shouldUseAnimation = (inputStyle === "css" ? willBeAnimatedClient : willBeAnimated) && useAnimations && !isHOC;
-    let animatedRef;
-    if (shouldUseAnimation) {
-      const useStyleEmitter = animationDriver?.avoidReRenders ? listener => {
-        stateRef.current.useStyleListener = listener;
-      } : void 0;
-      const effectiveTransition = (0, import_pseudoTransitions.resolveEffectivePseudoTransition)(stateRef.current.prevPseudoState, state, splitStyles?.pseudoTransitions,
-      // platform-pseudo with no declared transition = instant (CSS :hover semantics)
-      props.transition ?? (platformPseudo ? "0ms" : void 0));
-      if (splitStyles) splitStyles.effectiveTransition = effectiveTransition;
-      stateRef.current.prevPseudoState = (0, import_pseudoTransitions.extractPseudoState)(state);
-      const animations = useAnimations({
-        props: propsWithAnimation,
-        style: isHydrated ? splitStylesStyle || {} : {
-          ...splitStylesStyle
-        },
-        styleState: splitStyles,
-        useStyleEmitter,
-        presence,
-        componentState: state,
-        styleProps,
-        theme,
-        themeName,
-        pseudos: pseudos || null,
-        staticConfig,
-        stateRef,
-        onDidAnimate
-      });
-      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 (process.env.NODE_ENV === "development" && props.untilMeasured && !props.group) console.warn(`You set the untilMeasured prop without setting group. This doesn't work, be sure to set untilMeasured on the parent that sets group, not the children that use the $group- prop.
-
-If you meant to do this, you can disable this warning - either change untilMeasured and group at the same time, or do group={conditional ? 'name' : undefined}`);
-    if (process.env.NODE_ENV === "development" && time) time`destructure`;
-    if (!isPassthrough && groupContext && props.containerType !== "normal") nonTamaguiProps.onLayout = (0, import_helpers.composeEventHandlers)(nonTamaguiProps.onLayout, e => {
-      const layout = e.nativeEvent.layout;
-      groupContext.state.layout = layout;
-      stateRef.current.group?.emit({
-        layout
-      });
-      if (!stateRef.current.hasMeasured && props.untilMeasured === "hide") setState(prev => ({
-        ...prev
-      }));
-      stateRef.current.hasMeasured = true;
-    });
-    viewProps = import_setupHooks.hooks.usePropsTransform?.(elementType, nonTamaguiProps, stateRef, stateRef.current.willHydrate) || nonTamaguiProps;
-    if (!stateRef.current.composedRef) stateRef.current.composedRef = (0, import_compose_refs.composeRefs)(x => stateRef.current.host = x, forwardedRef, import_setElementProps.setElementProps, animatedRef);
-    viewProps.ref = stateRef.current.composedRef;
-    (0, import_pointerEvents.usePointerEvents)(props, viewProps);
-    if (process.env.NODE_ENV === "development") {
-      if (!isReactNative && !isText && import_constants.isWeb && !isHOC) import_react.default.Children.toArray(props.children).forEach(item => {
-        if (typeof item === "string" && item !== "\n") console.error(`Unexpected text node: ${item}. A text node cannot be a child of a <${staticConfig.componentName || propsIn.tag || "View"}>.`, props);
-      });
-    }
-    if (process.env.NODE_ENV === "development" && time) time`events-hooks`;
-    const unPress = () => {
-      setStateShallow({
-        press: false,
-        pressIn: false
-      });
-    };
-    if (process.env.NODE_ENV === "development" && import_constants.isWeb) (0, import_constants.useIsomorphicLayoutEffect)(() => {
-      if (debugProp === "verbose") {
-        let cssStyleDeclarationToObject = function (style) {
-          const styleObject = {};
-          for (let i = 0; i < style.length; i++) {
-            let prop = style[i];
-            styleObject[prop] = style.getPropertyValue(prop);
-          }
-          return styleObject;
-        };
-        const computed = stateRef.current.host ? cssStyleDeclarationToObject(getComputedStyle(stateRef.current.host)) : {};
-        console.groupCollapsed(`Rendered > (opacity: ${computed.opacity})`);
-        console.warn(stateRef.current.host);
-        console.warn(computed);
-        console.groupEnd();
-      }
-    });
-    (0, import_constants.useIsomorphicLayoutEffect)(() => {
-      if (state.unmounted === true && hasEnterStyle) {
-        setStateShallow({
-          unmounted: "should-enter"
-        });
-        return;
-      }
-      if (state.unmounted) {
-        if (inputStyle === "css") {
-          let cancelled = false;
-          requestAnimationFrame(() => {
-            if (cancelled) return;
-            requestAnimationFrame(() => {
-              if (cancelled) return;
-              setStateShallow({
-                unmounted: false
-              });
-            });
-          });
-          return () => {
-            cancelled = true;
-          };
-        }
-        setStateShallow({
-          unmounted: false
-        });
-      }
-      return () => {
-        componentSetStates.delete(setState);
-        stateRef.current.mediaEmitCleanup?.();
-      };
-    }, [state.unmounted, inputStyle]);
-    (0, import_constants.useIsomorphicLayoutEffect)(() => {
-      if (disabled) return;
-      if (!pseudoGroups && !mediaGroups) return;
-      if (!allGroupContexts) return;
-      return (0, import_subscribeToContextGroup.subscribeToContextGroup)({
-        groupContext: allGroupContexts,
-        setStateShallow,
-        mediaGroups,
-        pseudoGroups
-      });
-    }, [allGroupContexts, disabled, pseudoGroups ? (0, import_objectIdentityKey.objectIdentityKey)(pseudoGroups) : 0, mediaGroups ? (0, import_objectIdentityKey.objectIdentityKey)(mediaGroups) : 0]);
-    const groupEmitter = stateRef.current.group;
-    (0, import_constants.useIsomorphicLayoutEffect)(() => {
-      if (!groupContext || !groupEmitter) return;
-      notifyGroupSubscribers(groupContext, groupEmitter, state);
-    }, [groupContext, groupEmitter, state]);
-    const runtimePressStyle = !disabled && noClass && pseudos?.pressStyle;
-    const runtimeFocusStyle = !disabled && noClass && pseudos?.focusStyle;
-    const runtimeFocusVisibleStyle = !disabled && noClass && pseudos?.focusVisibleStyle;
-    const attachFocus = Boolean(runtimePressStyle || runtimeFocusStyle || runtimeFocusVisibleStyle || onFocus || onBlur || !!componentContext.setParentFocusState);
-    const hasDynamicGroupChildren = Boolean(groupName && state.hasDynGroupChildren);
-    const attachPress = Boolean(hasDynamicGroupChildren || runtimePressStyle || onPress || onPressOut || onPressIn || onMouseDown || onMouseUp || onLongPress || onClick || pseudos?.focusVisibleStyle);
-    const runtimeHoverStyle = !disabled && noClass && pseudos?.hoverStyle;
-    const needsHoverState = Boolean(hasDynamicGroupChildren || runtimeHoverStyle && !platformPseudo);
-    const attachHover = (import_constants.isWeb || import_constants.isNativeDesktop) && !!(hasDynamicGroupChildren || needsHoverState || onMouseEnter || onMouseLeave);
-    const shouldAttach = !disabled && !props.asChild && Boolean(attachFocus || attachPress || attachHover || runtimePressStyle || runtimeHoverStyle || runtimeFocusStyle);
-    const 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,
-      pseudos
-    });
-    const events = shouldAttach ? {
-      onPressOut: attachPress ? e => {
-        unPress();
-        onPressOut?.(e);
-        onMouseUp?.(e);
-      } : void 0,
-      ...((attachHover || attachPress) && {
-        onMouseEnter: e => {
-          const next = {};
-          if (needsHoverState && !lastInteractionWasTouch.value) next.hover = true;
-          if (needsPressState) {
-            if (state.pressIn) next.press = true;
-          }
-          setStateShallow(next);
-          onHoverIn?.(e);
-          onMouseEnter?.(e);
-        },
-        onMouseLeave: e => {
-          const next = {};
-          if (needsHoverState) next.hover = false;
-          if (needsPressState) {
-            next.press = false;
-            next.pressIn = false;
-          }
-          setStateShallow(next);
-          onHoverOut?.(e);
-          onMouseLeave?.(e);
-        }
-      }),
-      onPressIn: attachPress ? e => {
-        if (needsPressState) setStateShallow({
-          press: true,
-          pressIn: true
-        });
-        onPressIn?.(e);
-        onMouseDown?.(e);
-        if (import_constants.isWeb) componentSetStates.add(setState);
-      } : void 0,
-      onPress: attachPress ? e => {
-        unPress();
-        onClick?.(e);
-        if (onPress || onClick) e.stopPropagation();
-        onPress?.(e);
-        onLongPress?.(e);
-      } : void 0,
-      ...(attachFocus && {
-        onFocus: e => {
-          const next = {};
-          if (componentContext.setParentFocusState) {
-            componentContext.setParentFocusState({
-              focusWithin: true
-            });
-            next.focusWithin = true;
-          }
-          if (pseudos?.focusVisibleStyle) {
-            if (lastInteractionWasKeyboard.value) next.focusVisible = true;else next.focus = true;
-          } else next.focus = true;
-          setStateShallow(next);
-          onFocus?.(e);
-        },
-        onBlur: e => {
-          if (componentContext.setParentFocusState) componentContext.setParentFocusState({
-            focusWithin: false
-          });
-          setStateShallow({
-            focus: false,
-            focusVisible: false,
-            focusWithin: false
-          });
-          onBlur?.(e);
-        }
-      })
-    } : null;
-    if (events && !isReactNative) Object.assign(viewProps, (0, import_eventHandling.getWebEvents)(events));
-    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
-    });
-    const propsWithHref = props;
-    const propsInWithHref = propsIn;
-    [componentName, props.testID ?? propsIn.testID ?? props.accessibilityLabel ?? propsIn.accessibilityLabel ?? (typeof propsWithHref.href === "string" ? propsWithHref.href : null) ?? (typeof propsInWithHref.href === "string" ? propsInWithHref.href : null)].filter(Boolean).join(":");
-    if (process.env.NODE_ENV === "development" && time) time`hooks`;
-    if (asChild) {
-      elementType = import_Slot.Slot;
-      {
-        const webStyleEvents = asChild === "web" || asChild === "except-style-web";
-        const passEvents = (0, import_eventHandling.getWebEvents)({
-          onPress,
-          onLongPress,
-          onPressIn,
-          onPressOut,
-          onMouseUp,
-          onMouseDown,
-          onMouseEnter,
-          onMouseLeave
-        }, webStyleEvents);
-        Object.assign(viewProps, passEvents);
-      }
-    }
-    if (process.env.NODE_ENV === "development" && time) time`spaced-as-child`;
-    let content;
-    if (isPassthrough) content = import_react.default.createElement(BaseComponent, {
-      style: {
-        display: "contents"
-      }
-    }, propsIn.children);else {
-      if (import_setupHooks.hooks.useChildren) content = import_setupHooks.hooks.useChildren(elementType, content || children, viewProps);
-      const isRenderPropString = typeof renderProp === "string";
-      if (renderProp && !isRenderPropString) {
-        const out = getCustomRender(renderProp, content || children, viewProps, componentState);
-        if (out) {
-          viewProps = out.viewProps;
-          elementType = out.elementType;
-        }
-      }
-      if (!content) {
-        if (isRenderPropString) viewProps.render;
-        content = import_react.default.createElement(elementType, viewProps, content || children);
-      }
-      if (process.env.NODE_ENV === "development" && time) time`use-children`;
-    }
-    const ResetPresence = animationDriver?.ResetPresence;
-    const needsReset = Boolean(
-    // not when passing down to child
-    !asChild && splitStyles && !isHOC && ResetPresence && willBeAnimated && (hasEnterStyle || presenceState));
-    const 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 ("focusWithinStyle" in propsIn || pseudos?.focusWithinStyle) content = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ComponentContext.ComponentContext.Provider, {
-      ...componentContext,
-      setParentFocusState: setStateShallow,
-      children: content
-    });
-    if ("group" in props) content = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_GroupContext.GroupContext.Provider, {
-      value: allGroupContexts,
-      children: content
-    });
-    if (!asChild && isText && !hasTextAncestor) content = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ComponentContext.ComponentContext.Provider, {
-      ...componentContext,
-      inText: true,
-      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 (isReactNative && !asChild) content = /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
-      className: "_dsp_contents",
-      ...(!isPassthrough && isHydrated && events && (0, import_eventHandling.getWebEvents)(events)),
-      children: content
-    });
-    if (overriddenContextProps && contextForOverride) {
-      const Provider = contextForOverride.Provider;
-      for (const key in styledContextValue) if (!(key in overriddenContextProps)) overriddenContextProps[key] = styledContextValue[key];
-      content = /* @__PURE__ */(0, import_jsx_runtime.jsx)(Provider, {
-        __disableMergeDefaultValues: true,
-        ...overriddenContextProps,
-        children: content
-      });
-    }
-    if (process.env.NODE_ENV === "development" && time) time`context-override`;
-    if (startedUnhydrated && splitStyles) content = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-      children: [content, !isHydrated ? (0, import_wrapStyleTags.getStyleTags)(Object.values(splitStyles.rulesToInsert)) : null]
-    });
-    if (process.env.NODE_ENV === "development" && time) time`style-tags`;
-    if (process.env.NODE_ENV === "development") {
-      if (debugProp && debugProp !== "profile") {
-        const 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 (const key in splitStylesStyle) (0, import_log.log)(key, splitStylesStyle[key]);
-        } 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,
-              pseudos,
-              shouldAttach,
-              noClass,
-              shouldListenForMedia,
-              splitStyles,
-              splitStylesStyle,
-              state,
-              stateRef,
-              staticConfig,
-              styleProps,
-              themeState,
-              viewProps,
-              willBeAnimated,
-              startedUnhydrated
-            });
-          } catch {} finally {
-            console.groupEnd();
-          }
-        }
-        if (debugProp === "break") {}
-      }
-    }
-    if (process.env.NODE_ENV === "development" && time) {
-      time`rest`;
-      if (!globalThis["willPrint"]) {
-        globalThis["willPrint"] = true;
-        setTimeout(() => {
-          delete globalThis["willPrint"];
-          time.print();
-          time = null;
-        }, 50);
-      }
-    }
-    return content;
-  });
-  function notifyGroupSubscribers(groupContext, groupEmitter, pseudo) {
-    if (!groupContext || !groupEmitter) return;
-    const prevPseudo = groupContext.state.pseudo;
-    const shouldReplacePseudo = !prevPseudo || "unmounted" in prevPseudo || "group" in prevPseudo || "hasDynGroupChildren" in prevPseudo || "transition" in prevPseudo;
-    const nextPseudo = shouldReplacePseudo ? {} : prevPseudo;
-    let didChange = shouldReplacePseudo;
-    for (let i = 0; i < groupPseudoKeys.length; i++) {
-      const key = groupPseudoKeys[i];
-      const 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);
-  }
-  if (staticConfig.componentName) component.displayName = staticConfig.componentName;
-  let res = component;
-  res = import_react.default.memo(res);
-  res.staticConfig = staticConfig;
-  function extendStyledConfig(extended) {
-    return {
-      ...staticConfig,
-      ...extended,
-      neverFlatten: true,
-      isHOC: true,
-      isStyledHOC: false
-    };
-  }
-  function styleable(Component2, options) {
-    let out = typeof Component2 === "function" && Component2.length === 1 ? Component2 : import_react.default.forwardRef(Component2);
-    const extendedConfig = extendStyledConfig(options?.staticConfig);
-    out = options?.disableTheme ? out : (0, import_themeable.themeable)(out, extendedConfig, true);
-    if (extendedConfig.memo || process.env.TAMAGUI_MEMOIZE_STYLEABLE) out = import_react.default.memo(out);
-    out.staticConfig = extendedConfig;
-    out.styleable = styleable;
-    return out;
-  }
-  res.styleable = styleable;
-  return res;
+					(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`;
+		const [theme, themeState] = (0, import_useTheme.useThemeWithState)(themeStateProps);
+		if (process.env.NODE_ENV === "development" && time) time`theme`;
+		if (!isAnimatedCustomComponent) elementType = element || elementType;
+		const isStringElement = typeof elementType === "string";
+		const mediaState = (0, import_useMedia.useMedia)(componentContext, debugProp, stateRef.current);
+		(0, import_createVariable.setDidGetVariableValue)(false);
+		if (process.env.NODE_ENV === "development" && time) time`media`;
+		const styleProps = {
+			mediaState,
+			noClass,
+			resolveValues: isAnimated && inputStyle !== "css" || isHOC && state.unmounted == false && hasAnimationProp ? "value" : "auto",
+			isExiting,
+			isAnimated,
+			willBeAnimated,
+			canPlatformPseudo: componentState.platformPseudo,
+			displayName,
+			styledContext: styledContextValue
+		};
+		const themeName = themeState?.name || "";
+		if (process.env.NODE_ENV === "development" && time) time`split-styles-prepare`;
+		const splitStyles = (0, import_useSplitStyles.useSplitStyles)(props, staticConfig, theme, themeName, state, styleProps, null, componentContext, groupContextParent, elementType, startedUnhydrated, debugProp, animationDriver, styleStaticConfig);
+		const finalizedComponentState = componentState.finalizeStyleFlags(!!splitStyles?.hasEnterStyle, !!splitStyles?.platformPseudo);
+		hasEnterStyle = finalizedComponentState.hasEnterStyle;
+		isAnimated = finalizedComponentState.isAnimated;
+		willBeAnimated = finalizedComponentState.willBeAnimated;
+		willBeAnimatedClient = finalizedComponentState.willBeAnimatedClient;
+		platformPseudo = finalizedComponentState.platformPseudo;
+		groupName = splitStyles?.frontendGroup ?? groupName;
+		const containerProp = splitStyles?.frontendContainer ?? props.container;
+		const containerName = props.containerName || (typeof containerProp === "string" ? containerProp : void 0);
+		const containerType = splitStyles?.frontendContainerType || props.containerType || (containerProp ? "inline-size" : void 0);
+		const isContainer = !!containerType && containerType !== "normal";
+		const allGroupContexts = (0, import_react.useMemo)(() => {
+			if (!groupName && !isContainer || props.passThrough) return groupContextParent;
+			const listeners = /* @__PURE__ */ new Set();
+			stateRef.current.group?.listeners?.clear();
+			stateRef.current.group = {
+				listeners,
+				emit(state2) {
+					listeners.forEach((l) => l(state2));
+				},
+				subscribe(cb) {
+					listeners.add(cb);
+					if (listeners.size === 1) setStateShallow({ hasDynGroupChildren: true });
+					return () => {
+						listeners.delete(cb);
+						if (listeners.size === 0) setStateShallow({ hasDynGroupChildren: false });
+					};
+				}
+			};
+			const entry = {
+				state: { pseudo: import_defaultComponentState.defaultComponentStateMounted },
+				subscribe: (listener) => {
+					const dispose = stateRef.current.group?.subscribe(listener);
+					return () => {
+						dispose?.();
+					};
+				}
+			};
+			const next = { ...groupContextParent };
+			if (groupName) next[groupName] = entry;
+			if (isContainer) {
+				next["@"] = entry;
+				if (containerName) next[`@${containerName}`] = entry;
+			}
+			return next;
+		}, [
+			stateRef,
+			groupName,
+			containerName,
+			isContainer,
+			groupContextParent
+		]);
+		const isPassthrough = !splitStyles;
+		let contextForOverride = staticConfig.context;
+		if (splitStyles?.overriddenContextProps) {
+			const contextForProps = staticConfig.context || staticConfig.parentStaticConfig?.context;
+			if (contextForProps) {
+				for (const key in splitStyles.overriddenContextProps) {
+					overriddenContextProps = overriddenContextProps || {};
+					overriddenContextProps[key] = splitStyles.overriddenContextProps[key];
+				}
+				if (!staticConfig.context) contextForOverride = contextForProps;
+			}
+		}
+		const groupContext = groupName || isContainer ? allGroupContexts?.[groupName ?? "@"] || null : null;
+		if (!isPassthrough && groupContext && isContainer) {
+			const groupState = groupContext?.state;
+			if (groupState && groupState.layout === void 0) {
+				if (splitStyles.style?.width || splitStyles.style?.height) groupState.layout = {
+					width: fromPx(splitStyles.style.width),
+					height: fromPx(splitStyles.style.height)
+				};
+			}
+		}
+		const 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?.avoidReRenders && !hasEnterExitTransition) {
+			let updateGroupListeners = function() {
+				const updatedState = stateRef.current.nextState;
+				if (groupContext) {
+					const { group, hasDynGroupChildren, unmounted, transition, ...childrenGroupState } = updatedState;
+					notifyGroupSubscribers(groupContext, stateRef.current.group || null, childrenGroupState);
+				}
+			};
+			const ogSetStateShallow = setStateShallow;
+			stateRef.current.updateStyleListener = () => {
+				const useStyleListener = stateRef.current.useStyleListener;
+				if (!useStyleListener) {
+					const pendingState = stateRef.current.nextState;
+					if (pendingState) ogSetStateShallow(pendingState);
+					return;
+				}
+				const updatedState = stateRef.current.nextState || state;
+				const mediaState2 = stateRef.current.nextMedia;
+				const nextStyles = (0, import_getSplitStyles.getSplitStyles)(props, staticConfig, theme, themeName, updatedState, mediaState2 ? {
+					...styleProps,
+					mediaState: mediaState2
+				} : styleProps, null, componentContext, allGroupContexts, elementType, startedUnhydrated, debugProp, animationDriver, styleStaticConfig);
+				const effectiveTransition = nextStyles?.effectiveTransition ?? props.transition ?? (platformPseudo ? "0ms" : void 0);
+				stateRef.current.prevPseudoState = (0, import_extractPseudoState.extractPseudoState)(updatedState);
+				const hasActivePseudo = Boolean(updatedState.hover || updatedState.press || updatedState.pressIn || updatedState.focus || updatedState.focusWithin);
+				useStyleListener(nextStyles?.style || {}, effectiveTransition, hasActivePseudo);
+			};
+			componentContext.mediaEmitListeners = componentContext.mediaEmitListeners || /* @__PURE__ */ new Set();
+			if (!stateRef.current.mediaEmitCleanup) {
+				const updateListener = (next) => {
+					stateRef.current.nextMedia = next;
+					stateRef.current.updateStyleListener?.();
+				};
+				componentContext.mediaEmitListeners.add(updateListener);
+				stateRef.current.mediaEmitCleanup = () => {
+					componentContext.mediaEmitListeners?.delete(updateListener);
+				};
+			}
+			componentContext.mediaEmit = componentContext.mediaEmit || ((next) => {
+				for (const listener of componentContext.mediaEmitListeners) listener(next);
+			});
+			stateRef.current.setStateShallow = (nextOrGetNext) => {
+				const prev = stateRef.current.nextState || state;
+				const next = typeof nextOrGetNext === "function" ? nextOrGetNext(prev) : nextOrGetNext;
+				if (next === prev || (0, import_is_equal_shallow.isEqualShallow)(prev, next)) return;
+				let canAvoidReRender = true;
+				for (const key in next) if (!avoidReRenderKeys.has(key)) {
+					canAvoidReRender = false;
+					break;
+				}
+				const updatedState = {
+					...prev,
+					...next
+				};
+				stateRef.current.nextState = updatedState;
+				if (canAvoidReRender) {
+					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();
+					}
+					updateGroupListeners();
+					stateRef.current.updateStyleListener?.();
+				} else {
+					if (process.env.NODE_ENV === "development" && debugProp && debugProp !== "profile") console.info(`[\u{1F40C}] re-render`, {
+						canAvoidReRender,
+						next
+					});
+					ogSetStateShallow(next);
+				}
+			};
+			setStateShallow = (state2) => {
+				stateRef.current.setStateShallow?.(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;
+			}
+		}
+		const hasRuntimeMediaKeys = splitStyles?.hasMedia && splitStyles.hasMedia !== true;
+		const shouldListenForMedia = (0, import_createVariable.didGetVariableValue)() || hasRuntimeMediaKeys || noClass && splitStyles?.hasMedia === true;
+		const 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);
+		const { viewProps: viewPropsIn, style: splitStylesStyle, classNames, pseudoGroups, mediaGroups } = splitStyles || {};
+		const groupSetRevision = (0, import_subscribeToContextGroup.useGroupSetRevision)(pseudoGroups, mediaGroups);
+		const propsWithAnimation = props;
+		const { 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 || {};
+		let 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;
+		}
+		let animationStyles;
+		const shouldUseAnimation = (inputStyle === "css" ? willBeAnimatedClient : willBeAnimated) && useAnimations && !isHOC;
+		let animatedRef;
+		if (shouldUseAnimation) {
+			const useStyleEmitter = animationDriver?.avoidReRenders ? (listener) => {
+				stateRef.current.useStyleListener = listener;
+			} : void 0;
+			const effectiveTransition = splitStyles?.effectiveTransition ?? props.transition ?? (platformPseudo ? "0ms" : void 0);
+			if (splitStyles) splitStyles.effectiveTransition = effectiveTransition;
+			stateRef.current.prevPseudoState = (0, import_extractPseudoState.extractPseudoState)(state);
+			const 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, (e) => {
+			const layout = e.nativeEvent.layout;
+			groupContext.state.layout = layout;
+			stateRef.current.group?.emit({ layout });
+			if (!stateRef.current.hasMeasured && props.untilMeasured === "hide") setState((prev) => ({ ...prev }));
+			stateRef.current.hasMeasured = true;
+		});
+		viewProps = import_setupHooks.hooks.usePropsTransform?.(elementType, nonTamaguiProps, stateRef, stateRef.current.willHydrate) || nonTamaguiProps;
+		stateRef.current.composedForwardedRef = forwardedRef;
+		if (!stateRef.current.composedRef) stateRef.current.composedRef = (0, import_compose_refs.composeRefs)((x) => {
+			stateRef.current.host = x;
+			const 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;
+		(0, import_constants.useIsomorphicLayoutEffect)(() => {
+			const 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((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`;
+		const unPress = () => {
+			setStateShallow({
+				press: false,
+				pressIn: false
+			});
+		};
+		if (process.env.NODE_ENV === "development" && import_constants.isWeb) (0, import_constants.useIsomorphicLayoutEffect)(() => {
+			if (debugProp === "verbose") {
+				let cssStyleDeclarationToObject = function(style) {
+					const styleObject = {};
+					for (let i = 0; i < style.length; i++) {
+						let prop = style[i];
+						styleObject[prop] = style.getPropertyValue(prop);
+					}
+					return styleObject;
+				};
+				const computed = stateRef.current.host ? cssStyleDeclarationToObject(getComputedStyle(stateRef.current.host)) : {};
+				console.groupCollapsed(`Rendered > (opacity: ${computed.opacity})`);
+				console.warn(stateRef.current.host);
+				console.warn(computed);
+				console.groupEnd();
+			}
+		});
+		(0, import_constants.useIsomorphicLayoutEffect)(() => {
+			if (state.unmounted === true && hasEnterStyle) {
+				setStateShallow({ unmounted: "should-enter" });
+				return;
+			}
+			if (state.unmounted) {
+				if (inputStyle === "css") {
+					let cancelled = false;
+					requestAnimationFrame(() => {
+						if (cancelled) return;
+						requestAnimationFrame(() => {
+							if (cancelled) return;
+							setStateShallow({ unmounted: false });
+						});
+					});
+					return () => {
+						cancelled = true;
+					};
+				}
+				setStateShallow({ unmounted: false });
+			}
+		}, [state.unmounted, inputStyle]);
+		(0, import_constants.useIsomorphicLayoutEffect)(() => {
+			return () => {
+				componentSetStates.delete(setState);
+				stateRef.current.mediaEmitCleanup?.();
+				stateRef.current.mediaEmitCleanup = void 0;
+			};
+		}, []);
+		(0, import_constants.useIsomorphicLayoutEffect)(() => {
+			let disposeSafeArea;
+			if (splitStyles?.usesSafeArea) {
+				const updateSafeArea = () => {
+					setState((previous) => ({ ...previous }));
+				};
+				disposeSafeArea = (0, import_resolveSafeAreaVariable.subscribeToSafeArea)(updateSafeArea);
+			}
+			if (disabled) return disposeSafeArea;
+			if (!pseudoGroups && !mediaGroups) return disposeSafeArea;
+			if (!allGroupContexts) return disposeSafeArea;
+			const disposeGroup = (0, import_subscribeToContextGroup.subscribeToContextGroup)({
+				groupContext: allGroupContexts,
+				setStateShallow,
+				mediaGroups,
+				pseudoGroups
+			});
+			if (!disposeSafeArea) return disposeGroup;
+			return () => {
+				disposeSafeArea();
+				disposeGroup?.();
+			};
+		}, [
+			allGroupContexts,
+			disabled,
+			splitStyles?.usesSafeArea,
+			groupSetRevision
+		]);
+		const groupEmitter = stateRef.current.group;
+		(0, import_constants.useIsomorphicLayoutEffect)(() => {
+			if (!groupContext || !groupEmitter) return;
+			notifyGroupSubscribers(groupContext, groupEmitter, state);
+		}, [
+			groupContext,
+			groupEmitter,
+			state
+		]);
+		const conditionalStates = !disabled ? splitStyles?.programStates : void 0;
+		const runtimePressStyle = !disabled && (conditionalStates?.has("press") || conditionalStates?.has("active"));
+		const runtimeFocusStyle = !disabled && conditionalStates?.has("focus");
+		const runtimeFocusVisibleStyle = !disabled && conditionalStates?.has("focus-visible");
+		const attachFocus = Boolean(runtimePressStyle || runtimeFocusStyle || runtimeFocusVisibleStyle || onFocus || onBlur || !!componentContext.setParentFocusState);
+		const hasDynamicGroupChildren = Boolean(groupName && state.hasDynGroupChildren);
+		const attachPress = Boolean(hasDynamicGroupChildren || runtimePressStyle || onPress || onPressOut || onPressIn || onMouseDown || onMouseUp || onLongPress || onClick);
+		const runtimeHoverStyle = !disabled && conditionalStates?.has("hover");
+		const needsHoverState = Boolean(hasDynamicGroupChildren || runtimeHoverStyle && !platformPseudo);
+		const attachHover = (import_constants.isWeb || import_constants.isNativeDesktop) && !!(hasDynamicGroupChildren || needsHoverState || onMouseEnter || onMouseLeave);
+		const shouldAttach = !disabled && !props.asChild && Boolean(attachFocus || attachPress || attachHover || runtimePressStyle || runtimeHoverStyle || runtimeFocusStyle);
+		const 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
+		});
+		const events = shouldAttach ? {
+			onPressOut: attachPress ? (e) => {
+				unPress();
+				onPressOut?.(e);
+				onMouseUp?.(e);
+			} : void 0,
+			...(attachHover || attachPress) && {
+				onMouseEnter: (e) => {
+					const next = {};
+					if (needsHoverState && !lastInteractionWasTouch.value) next.hover = true;
+					if (needsPressState) {
+						if (state.pressIn) next.press = true;
+					}
+					setStateShallow(next);
+					onHoverIn?.(e);
+					onMouseEnter?.(e);
+				},
+				onMouseLeave: (e) => {
+					const next = {};
+					if (needsHoverState) next.hover = false;
+					if (needsPressState) {
+						next.press = false;
+						next.pressIn = false;
+					}
+					setStateShallow(next);
+					onHoverOut?.(e);
+					onMouseLeave?.(e);
+				}
+			},
+			onPressIn: attachPress ? (e) => {
+				if (needsPressState) setStateShallow({
+					press: true,
+					pressIn: true
+				});
+				onPressIn?.(e);
+				onMouseDown?.(e);
+				if (import_constants.isWeb) componentSetStates.add(setState);
+			} : void 0,
+			onPress: attachPress ? (e) => {
+				unPress();
+				onClick?.(e);
+				if (onPress || onClick) e.stopPropagation();
+				onPress?.(e);
+				onLongPress?.(e);
+			} : void 0,
+			...attachFocus && {
+				onFocus: (e) => {
+					const next = {};
+					if (componentContext.setParentFocusState) {
+						componentContext.setParentFocusState({ focusWithin: true });
+						next.focusWithin = true;
+					}
+					if (conditionalStates?.has("focus-visible")) if (lastInteractionWasKeyboard.value) next.focusVisible = true;
+					else next.focus = true;
+					else next.focus = true;
+					setStateShallow(next);
+					onFocus?.(e);
+				},
+				onBlur: (e) => {
+					if (componentContext.setParentFocusState) componentContext.setParentFocusState({ focusWithin: false });
+					setStateShallow({
+						focus: false,
+						focusVisible: false,
+						focusWithin: false
+					});
+					onBlur?.(e);
+				}
+			}
+		} : null;
+		if (events) Object.assign(viewProps, (0, import_eventHandling.getWebEvents)(events));
+		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
+		});
+		if (process.env.NODE_ENV === "development" && time) time`hooks`;
+		if (asChild && !isHOC) {
+			elementType = import_Slot.Slot;
+			{
+				const webStyleEvents = asChild === "web" || asChild === "except-style-web";
+				const passEvents = (0, import_eventHandling.getWebEvents)({
+					onPress,
+					onLongPress,
+					onPressIn,
+					onPressOut,
+					onMouseUp,
+					onMouseDown,
+					onMouseEnter,
+					onMouseLeave,
+					onFocus,
+					onBlur
+				}, webStyleEvents);
+				Object.assign(viewProps, passEvents);
+			}
+		}
+		if (process.env.NODE_ENV === "development" && time) time`spaced-as-child`;
+		let content;
+		const childrenFromHooks = import_setupHooks.hooks.useChildren ? import_setupHooks.hooks.useChildren(elementType, children, viewProps, isPassthrough) : void 0;
+		if (isPassthrough) content = import_react.default.createElement(BaseComponent, { style: { display: "contents" } }, propsIn.children);
+		else {
+			if (childrenFromHooks) content = childrenFromHooks;
+			const isRenderPropString = typeof renderProp === "string";
+			if (renderProp && !isRenderPropString) {
+				const 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 = import_react.default.createElement(elementType, viewProps, content || children);
+			}
+			if (process.env.NODE_ENV === "development" && time) time`use-children`;
+		}
+		const ResetPresence = animationDriver?.isStub ? void 0 : animationDriver?.ResetPresence;
+		const needsReset = Boolean(!asChild && splitStyles && !isHOC && ResetPresence && willBeAnimated && (hasEnterStyle || presenceState));
+		const 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?.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 (!asChild && isText && !hasTextAncestor) content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ComponentContext.ComponentContext.Provider, {
+			...componentContext,
+			inText: true,
+			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) {
+			const Provider = contextForOverride.Provider;
+			for (const key in styledContextValue) if (!(key in overriddenContextProps)) overriddenContextProps[key] = styledContextValue[key];
+			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 && startedUnhydrated && splitStyles) content = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [content, !isHydrated ? (0, import_wrapStyleTags.getStyleTags)(Object.values(splitStyles.rulesToInsert)) : null] });
+		if (process.env.NODE_ENV === "development" && time) time`style-tags`;
+		if (process.env.NODE_ENV === "development") {
+			if (debugProp && debugProp !== "profile") {
+				const 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 (const key in splitStylesStyle) (0, import_log.log)(key, splitStylesStyle[key]);
+				} 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 {} finally {
+						console.groupEnd();
+					}
+				}
+			}
+		}
+		if (process.env.NODE_ENV === "development" && time) {
+			time`rest`;
+			if (!globalThis["willPrint"]) {
+				globalThis["willPrint"] = true;
+				setTimeout(() => {
+					delete globalThis["willPrint"];
+					time.print();
+					time = null;
+				}, 50);
+			}
+		}
+		return content;
+	};
+	function notifyGroupSubscribers(groupContext, groupEmitter, pseudo) {
+		if (!groupContext || !groupEmitter) return;
+		const prevPseudo = groupContext.state.pseudo;
+		const shouldReplacePseudo = !prevPseudo || "unmounted" in prevPseudo || "group" in prevPseudo || "hasDynGroupChildren" in prevPseudo || "transition" in prevPseudo;
+		const nextPseudo = shouldReplacePseudo ? {} : prevPseudo;
+		let didChange = shouldReplacePseudo;
+		for (let i = 0; i < groupPseudoKeys.length; i++) {
+			const key = groupPseudoKeys[i];
+			const 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 = import_react.default.memo(res);
+	res.staticConfig = staticConfig;
+	res.resolve = (resolver) => {
+		const next = createComponent({
+			...staticConfig,
+			resolvers: staticConfig.resolvers ? [...staticConfig.resolvers, resolver] : [resolver]
+		});
+		for (const 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;
 }
-const fromPx = val => {
-  if (typeof val === "number") return val;
-  if (typeof val === "string") return +val.replace("px", "");
-  return 0;
+const fromPx = (val) => {
+	if (typeof val === "number") return val;
+	if (typeof val === "string") return +val.replace("px", "");
+	return 0;
 };
 const getCustomRender = (renderProp, content, viewProps, state) => {
-  if (typeof renderProp === "function") renderProp = getRenderElementForPlatform(renderProp(viewProps, state));
-  if (renderProp) {
-    if (typeof renderProp === "object" && import_react.default.isValidElement(renderProp)) {
-      if (getRenderElementForPlatform(renderProp)) {
-        const elementProps = renderProp.props;
-        const mergedProps = elementProps ? (0, import_mergeRenderElementProps.mergeRenderElementProps)(elementProps, viewProps, content) : viewProps;
-        return {
-          elementType: renderProp.type,
-          viewProps: mergedProps
-        };
-      }
-    }
-  }
+	if (typeof renderProp === "function") renderProp = getRenderElementForPlatform(renderProp(viewProps, state));
+	if (renderProp) {
+		if (typeof renderProp === "object" && import_react.default.isValidElement(renderProp)) {
+			if (getRenderElementForPlatform(renderProp)) {
+				const elementProps = renderProp.props;
+				const mergedProps = elementProps ? (0, import_mergeRenderElementProps.mergeRenderElementProps)(elementProps, viewProps, content) : viewProps;
+				return {
+					elementType: renderProp.type,
+					viewProps: mergedProps
+				};
+			}
+		}
+	}
 };
 function getRenderElementForPlatform(potential) {
-  return potential;
-}
+	return potential;
+}