tamagui 1.85.3 → 1.85.5

package/dist/native.js

@@ -1366,7 +1366,7 @@ var require_insertStyleRule_native = __commonJS({
         theme: values
       };
       for (let selector of selectors) {
-        let scheme = selector.includes("t_dark") ? "dark" : selector.includes("t_light") ? "light" : "", name = selector.slice(selector.lastIndexOf(".t_") + 3);
+        let di = selector.indexOf("t_dark"), li = selector.indexOf("t_light"), scheme = di && li ? di < li ? "dark" : "light" : "", name = selector.slice(selector.lastIndexOf(".t_") + 3);
         name.startsWith(scheme) && (name = name.slice(scheme.length + 1)), scheme === name && (scheme = "");
         let themeName = `${scheme}${scheme && name ? "_" : ""}${name}`;
         dedupedEntry.names.includes(themeName) || dedupedEntry.names.push(themeName);
@@ -1506,7 +1506,7 @@ var require_pseudoDescriptors_native = __commonJS({
       ...pseudoDescriptorsBase,
       enterStyle: {
         name: "enter",
-        stateKey: "unmounted",
+        selector: ".t_unmounted",
         priority: 4
       },
       exitStyle: {
@@ -2009,11 +2009,11 @@ var require_createShallowSetState_native = __commonJS({
       mergeIfNotShallowEqual: () => mergeIfNotShallowEqual
     });
     module2.exports = __toCommonJS2(createShallowSetState_exports);
-    function createShallowSetState(setter) {
-      return (next) => setter((prev) => mergeIfNotShallowEqual(prev, next));
+    function createShallowSetState(setter, debug) {
+      return (next) => setter((prev) => mergeIfNotShallowEqual(prev, next, debug));
     }
-    function mergeIfNotShallowEqual(prev, next) {
-      return isEqualShallow(prev, next) ? prev : { ...prev, ...next };
+    function mergeIfNotShallowEqual(prev, next, debug) {
+      return isEqualShallow(prev, next) ? prev : (process.env.NODE_ENV === "development" && debug && console.warn("setStateShallow CHANGE", { prev, next }), { ...prev, ...next });
     }
     function isEqualShallow(prev, next) {
       for (let key in next)
@@ -3383,7 +3383,7 @@ var require_getSplitStyles_native = __commonJS({
         inlineWhenUnflattened,
         parentStaticConfig,
         acceptsClassName
-      } = staticConfig, viewProps = {}, mediaState3 = styleProps.mediaState || import_useMedia.mediaState, usedKeys = {}, shouldDoClasses = acceptsClassName && import_constants4.isWeb && !styleProps.noClassNames, rulesToInsert = [], classNames = {}, transforms = {}, pseudos = null, space = props.space, hasMedia = !1, dynamicThemeAccess, pseudoGroups, mediaGroups, style = {}, className = "", mediaStylesSeen = 0, styleState = {
+      } = staticConfig, viewProps = {}, mediaState3 = styleProps.mediaState || import_useMedia.mediaState, usedKeys = {}, shouldDoClasses = acceptsClassName && import_constants4.isWeb && !styleProps.noClassNames, rulesToInsert = [], classNames = {}, transforms = {}, pseudos = null, space = props.space, hasMedia = !1, dynamicThemeAccess, pseudoGroups, mediaGroups, style = {}, className = props.className ?? "", mediaStylesSeen = 0, styleState = {
         curProps: { ...props },
         classNames,
         conf,
@@ -3527,20 +3527,15 @@ current`, {
                   Object.assign(pseudos[key], pseudoStyleObject);
                   continue;
                 }
-                if (shouldDoClasses && !isEnter && !isExit) {
+                if (shouldDoClasses && !isExit) {
                   let pseudoStyles = (0, import_getStylesAtomic.generateAtomicStyles)(pseudoStyleObject, descriptor);
                   process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupCollapsed("pseudo (classes)", key), (0, import_log.log)({ pseudoStyleObject, pseudoStyles }), console.groupEnd());
                   for (let psuedoStyle of pseudoStyles)
                     `${psuedoStyle.property}${PROP_SPLIT}${descriptor.name}` in usedKeys || psuedoStyle.identifier;
-                } else {
-                  let descriptorKey = descriptor.stateKey || descriptor.name, pseudoState = componentState[descriptorKey], isDisabled = isExit ? !styleProps.isExiting : !pseudoState;
-                  import_constants4.isWeb && !import_constants4.isClient && isEnter && (isDisabled = !1), process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupCollapsed("pseudo", key, { isDisabled }), (0, import_log.log)(pseudoStyleObject, {
-                    isDisabled,
-                    descriptorKey,
-                    descriptor,
-                    pseudoState,
-                    state: { ...componentState }
-                  }), console.groupEnd());
+                }
+                if (!shouldDoClasses || isExit || isEnter) {
+                  let descriptorKey = descriptor.stateKey || descriptor.name, isDisabled = componentState[descriptorKey] === !1;
+                  isExit && (isDisabled = !styleProps.isExiting), isEnter && (isDisabled = componentState.unmounted === "should-enter" ? !0 : !componentState.unmounted), process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupCollapsed("pseudo", key, { isDisabled }), (0, import_log.log)({ pseudoStyleObject, isDisabled, descriptor, componentState }), console.groupEnd());
                   let importance = descriptor.priority;
                   for (let pkey in pseudoStyleObject) {
                     let val2 = pseudoStyleObject[pkey];
@@ -3882,37 +3877,6 @@ var require_mergeProps_native = __commonJS({
   }
 });
 
-// ../web/dist/cjs/helpers/proxyThemeVariables.native.js
-var require_proxyThemeVariables_native = __commonJS({
-  "../web/dist/cjs/helpers/proxyThemeVariables.native.js"(exports2, module2) {
-    "use strict";
-    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
-      for (var name in all)
-        __defProp2(target, name, { get: all[name], enumerable: !0 });
-    }, __copyProps2 = (to, from, except, desc) => {
-      if (from && typeof from == "object" || typeof from == "function")
-        for (let key of __getOwnPropNames2(from))
-          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
-      return to;
-    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), proxyThemeVariables_exports = {};
-    __export2(proxyThemeVariables_exports, {
-      proxyThemeVariables: () => proxyThemeVariables
-    });
-    module2.exports = __toCommonJS2(proxyThemeVariables_exports);
-    function proxyThemeVariables(obj) {
-      return new Proxy(obj || {}, {
-        has(target, key) {
-          return Reflect.has(target, removeStarting$(key));
-        },
-        get(target, key) {
-          return Reflect.get(target, removeStarting$(key));
-        }
-      });
-    }
-    var removeStarting$ = (str) => typeof str == "string" && str[0] === "$" ? str.slice(1) : str;
-  }
-});
-
 // ../web/dist/cjs/helpers/ThemeManagerContext.native.js
 var require_ThemeManagerContext_native = __commonJS({
   "../web/dist/cjs/helpers/ThemeManagerContext.native.js"(exports2, module2) {
@@ -3966,7 +3930,7 @@ var require_ThemeManager_native = __commonJS({
         if (!parentManager)
           throw process.env.NODE_ENV !== "production" ? new Error(
             "No parent manager given, this is likely due to duplicated Tamagui dependencies. Check your lockfile for mis-matched versions. It could also be from an error somewhere else in your stack causing Tamagui to recieve undefined context, you can try putting some ErrorBoundary components around other areas of your app, or a Suspense boundary."
-          ) : "\u274C 0";
+          ) : "\u274C 000";
         if (this.parentManager = parentManager, !this.updateStateFromProps(props, !1))
           return parentManager;
       }
@@ -4025,7 +3989,6 @@ var require_ThemeManager_native = __commonJS({
       let nextName = props.reset ? baseName : props.name || "", allComponentThemes = componentManagers.map((x) => (x == null ? void 0 : x.state.name) || "");
       isDirectParentAComponentTheme && allComponentThemes.shift();
       let base = baseName.split(import_constants22.THEME_NAME_SEPARATOR), max2 = base.length, min2 = props.componentName && !nextName ? max2 : 0;
-      process.env.NODE_ENV !== "production" && props.debug && typeof window < "u" && (console.groupCollapsed("ThemeManager.getState()"), console.info({ props, baseName, base, min: min2, max: max2 }));
       for (let i = max2; i >= min2; i--) {
         let prefix = base.slice(0, i).join(import_constants22.THEME_NAME_SEPARATOR);
         props.inverse && (prefix = inverseThemeName(prefix));
@@ -4075,7 +4038,7 @@ var require_ThemeManager_native = __commonJS({
           break;
         }
       }
-      return process.env.NODE_ENV !== "production" && typeof props.debug == "string" && typeof window < "u" && (console.warn("ThemeManager.getState():", { result }), console.trace(), console.groupEnd()), result;
+      return process.env.NODE_ENV !== "production" && props.debug === "verbose" && typeof window < "u" && (console.groupCollapsed("ThemeManager.getState()"), console.info({ props, baseName, base, min: min2, max: max2 }), console.warn("result", { result }), console.trace(), console.groupEnd()), result;
     }
     var inverseThemeName = (themeName) => themeName.startsWith("light") ? themeName.replace(/^light/, "dark") : themeName.replace(/^dark/, "light");
     function getManagers(themeManager) {
@@ -4127,7 +4090,7 @@ var require_useTheme_native = __commonJS({
         import_constants4.isServer ? void 0 : () => {
           var _a, _b;
           let next = ((_a = props.shouldUpdate) == null ? void 0 : _a.call(props)) ?? (keys.current.length > 0 ? !0 : void 0);
-          return process.env.NODE_ENV === "development" && props.debug && props.debug !== "profile" && console.info("  \u{1F3A8} useTheme() shouldUpdate?", next, {
+          return process.env.NODE_ENV === "development" && typeof props.debug == "string" && props.debug !== "profile" && console.info("  \u{1F3A8} useTheme() shouldUpdate?", next, {
             shouldUpdateProp: (_b = props.shouldUpdate) == null ? void 0 : _b.call(props),
             keys: [...keys.current]
           }), next;
@@ -4421,7 +4384,7 @@ var require_Theme_native = __commonJS({
       let { themeManager, isNewTheme } = themeState;
       if (!themeManager)
         throw new Error(
-          process.env.NODE_ENV === "development" ? "\u274C No theme found, either incorrect name, potential duplicate tamagui deps, or TamaguiProvider not providing themes." : "\u274C"
+          process.env.NODE_ENV === "development" ? "\u274C No theme found, either incorrect name, potential duplicate tamagui deps, or TamaguiProvider not providing themes." : "\u274C 005"
         );
       let { shallow, forceClassName } = props, hasEverThemed = (0, import_react2.useRef)(!1), shouldRenderChildrenWithTheme = isNewTheme || props.inverse || hasEverThemed.current || forceClassName || isRoot;
       if (shouldRenderChildrenWithTheme && (hasEverThemed.current = !0), !shouldRenderChildrenWithTheme)
@@ -4619,7 +4582,7 @@ var require_createComponent_native = __commonJS({
       spacedChildren: () => spacedChildren2
     });
     module2.exports = __toCommonJS2(createComponent_exports);
-    var import_compose_refs = require_index_native10(), import_constants4 = require_index_native(), import_helpers = require_index_native7(), import_use_did_finish_ssr = require_index_native2(), import_react2 = __toESM2(require("react")), import_config = require_config_native(), import_constants22 = require_constants_native2(), import_ComponentContext = require_ComponentContext_native(), import_createVariable = require_createVariable_native(), import_defaultComponentState = require_defaultComponentState_native(), import_createShallowSetState = require_createShallowSetState_native(), import_getSplitStyles = require_getSplitStyles_native(), import_log = require_log_native(), import_mergeProps = require_mergeProps_native(), import_proxyThemeVariables = require_proxyThemeVariables_native(), import_themeable = require_themeable_native(), import_useMedia = require_useMedia_native(), import_useTheme = require_useTheme_native(), import_setupHooks = require_setupHooks_native(), import_Slot = require_Slot_native(), import_Theme = require_Theme_native(), import_ThemeDebug = require_ThemeDebug_native(), import_jsx_runtime6 = require("react/jsx-runtime"), tamaguiConfig, initialTheme, time, debugKeyListeners, startVisualizer, mouseUps = /* @__PURE__ */ new Set();
+    var import_compose_refs = require_index_native10(), import_constants4 = require_index_native(), import_helpers = require_index_native7(), import_use_did_finish_ssr = require_index_native2(), import_react2 = __toESM2(require("react")), import_config = require_config_native(), import_constants22 = require_constants_native2(), import_ComponentContext = require_ComponentContext_native(), import_createVariable = require_createVariable_native(), import_defaultComponentState = require_defaultComponentState_native(), import_createShallowSetState = require_createShallowSetState_native(), import_getSplitStyles = require_getSplitStyles_native(), import_log = require_log_native(), import_mergeProps = require_mergeProps_native(), import_themeable = require_themeable_native(), import_useMedia = require_useMedia_native(), import_useTheme = require_useTheme_native(), import_setupHooks = require_setupHooks_native(), import_Slot = require_Slot_native(), import_Theme = require_Theme_native(), import_ThemeDebug = require_ThemeDebug_native(), import_jsx_runtime6 = require("react/jsx-runtime"), tamaguiConfig, time, debugKeyListeners, startVisualizer, mouseUps = /* @__PURE__ */ new Set();
     if (typeof document < "u") {
       let cancelTouches = () => {
         mouseUps.forEach((x) => x()), mouseUps.clear();
@@ -4649,17 +4612,13 @@ var require_createComponent_native = __commonJS({
     var BaseText, BaseView, hasSetupBaseViews = !1;
     function createComponent2(staticConfig) {
       var _a;
-      let config = null, defaultProps = staticConfig.defaultProps;
+      let { componentName } = staticConfig, config = null, defaultProps = staticConfig.defaultProps;
       (0, import_config.onConfiguredOnce)((conf) => {
         var _a2;
-        if (config = conf, staticConfig.componentName) {
-          let defaultForComponent = (_a2 = conf.defaultProps) == null ? void 0 : _a2[staticConfig.componentName];
+        if (config = conf, componentName) {
+          let defaultForComponent = (_a2 = conf.defaultProps) == null ? void 0 : _a2[componentName];
           defaultForComponent && (defaultProps = { ...defaultForComponent, ...defaultProps });
         }
-        if (!tamaguiConfig && (tamaguiConfig = conf, !initialTheme)) {
-          let next = conf.themes[Object.keys(conf.themes)[0]];
-          initialTheme = (0, import_proxyThemeVariables.proxyThemeVariables)(next), process.env.NODE_ENV === "development" && (initialTheme || (0, import_log.log)("Warning: Missing theme"));
-        }
       });
       let {
         Component,
@@ -4668,14 +4627,14 @@ var require_createComponent_native = __commonJS({
         isHOC,
         validStyles: validStyles2 = {},
         variants = {}
-      } = staticConfig, defaultComponentClassName = `is_${staticConfig.componentName}`;
-      process.env.NODE_ENV === "development" && (_a = staticConfig.defaultProps) != null && _a.debug && process.env.IS_STATIC !== "is_static" && (0, import_log.log)(`\u{1F41B} [${staticConfig.componentName || "Component"}]`, {
+      } = staticConfig;
+      process.env.NODE_ENV === "development" && (_a = staticConfig.defaultProps) != null && _a.debug && process.env.IS_STATIC !== "is_static" && (0, import_log.log)(`\u{1F41B} [${componentName || "Component"}]`, {
         staticConfig,
         defaultProps,
         defaultPropsKeyOrder: defaultProps ? Object.keys(defaultProps) : []
       });
       let component = (0, import_react2.forwardRef)((propsIn, forwardedRef) => {
-        var _a2, _b, _c, _d, _e, _f, _i, _j, _k, _l, _m, _n;
+        var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
         let internalID = process.env.NODE_ENV === "development" ? (0, import_react2.useId)() : "";
         if (process.env.NODE_ENV === "development" && startVisualizer && (startVisualizer(), startVisualizer = void 0), !hasSetupBaseViews) {
           hasSetupBaseViews = !0;
@@ -4697,7 +4656,7 @@ var require_createComponent_native = __commonJS({
         }
         let curDefaultProps = styledContextProps ? { ...defaultProps, ...styledContextProps } : defaultProps, props = propsIn;
         curDefaultProps && (props = (0, import_mergeProps.mergeProps)(curDefaultProps, propsIn));
-        let debugProp = props.debug, componentName = props.componentName || staticConfig.componentName;
+        let debugProp = props.debug, componentName2 = props.componentName || staticConfig.componentName;
         process.env.NODE_ENV === "development" && import_constants4.isClient && (0, import_react2.useEffect)(() => {
           let overlay = null, debugVisualizerHandler = (show = !1) => {
             let node = hostRef.current;
@@ -4705,31 +4664,31 @@ var require_createComponent_native = __commonJS({
               if (show) {
                 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";
                 let dataAt = node.getAttribute("data-at") || "", dataIn = node.getAttribute("data-in") || "", 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.style.webkitFontSmoothing = "none", tooltip.innerText = `${componentName || ""} ${dataAt} ${dataIn}`.trim(), overlay.appendChild(tooltip), node.appendChild(overlay);
+                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.style.webkitFontSmoothing = "none", tooltip.innerText = `${componentName2 || ""} ${dataAt} ${dataIn}`.trim(), overlay.appendChild(tooltip), node.appendChild(overlay);
               } else
                 overlay && node.removeChild(overlay);
           };
           return debugKeyListeners ||= /* @__PURE__ */ new Set(), debugKeyListeners.add(debugVisualizerHandler), () => {
             debugKeyListeners == null || debugKeyListeners.delete(debugVisualizerHandler);
           };
-        }, [componentName]), process.env.NODE_ENV === "development" && time && time`start (ignore)`;
-        let isHydrated = config != null && config.disableSSR ? !0 : (0, import_use_did_finish_ssr.useDidFinishSSR)();
-        process.env.NODE_ENV === "development" && time && time`did-finish-ssr`;
+        }, [componentName2]), process.env.NODE_ENV === "development" && time && time`start (ignore)`, process.env.NODE_ENV === "development" && time && time`did-finish-ssr`;
         let stateRef = (0, import_react2.useRef)(
           {}
         );
         process.env.NODE_ENV === "development" && time && time`stateref`;
-        let hostRef = (0, import_react2.useRef)(null), animationsConfig = componentContext.animationDriver, useAnimations = animationsConfig == null ? void 0 : animationsConfig.useAnimations, hasAnimationProp = !!("animation" in props || props.style && hasAnimatedStyleValue(props.style)), supportsCSSVars = animationsConfig == null ? void 0 : animationsConfig.supportsCSSVars, willBeAnimated = (() => {
-          if (import_constants4.isServer && !supportsCSSVars)
-            return !1;
-          let curState = stateRef.current;
-          return !!(hasAnimationProp && !isHOC && useAnimations || curState.hasAnimated);
-        })(), usePresence = animationsConfig == null ? void 0 : animationsConfig.usePresence, presence = willBeAnimated && (usePresence == null ? void 0 : usePresence()) || null, hasEnterStyle = !!props.enterStyle, needsMount = !!((!import_constants4.isWeb || import_constants4.isClient) && willBeAnimated);
-        process.env.NODE_ENV === "development" && time && time`pre-use-state`;
-        let initialState = willBeAnimated ? supportsCSSVars ? import_defaultComponentState.defaultComponentStateShouldEnter : import_defaultComponentState.defaultComponentState : import_defaultComponentState.defaultComponentStateMounted, states = (0, import_react2.useState)(initialState), state = propsIn.forceStyle ? { ...states[0], [propsIn.forceStyle]: !0 } : states[0], setState = states[1], setStateShallow = (0, import_createShallowSetState.createShallowSetState)(setState), groupName = props.group, groupClassName = groupName ? `t_group_${props.group}` : "";
-        if (groupName && !stateRef.current.group) {
+        let hostRef = (0, import_react2.useRef)(null), animationsConfig = componentContext.animationDriver, useAnimations = animationsConfig == null ? void 0 : animationsConfig.useAnimations, hasAnimationProp = !!("animation" in props || props.style && hasAnimatedStyleValue(props.style)), supportsCSSVars = animationsConfig == null ? void 0 : animationsConfig.supportsCSSVars, curState = stateRef.current, willBeAnimatedClient = !!(hasAnimationProp && !isHOC && useAnimations || curState.hasAnimated), willBeAnimated = !import_constants4.isServer && willBeAnimatedClient;
+        willBeAnimated && !curState.hasAnimated && (curState.hasAnimated = !0);
+        let isHydrated = config != null && config.disableSSR ? !0 : (0, import_use_did_finish_ssr.useDidFinishSSR)(), presence = willBeAnimated && ((_c = animationsConfig == null ? void 0 : animationsConfig.usePresence) == null ? void 0 : _c.call(animationsConfig)) || null, presenceState = presence == null ? void 0 : presence[2], enterExitVariant = presenceState == null ? void 0 : presenceState.enterExitVariant, enterVariant = enterExitVariant ?? (presenceState == null ? void 0 : presenceState.enterVariant), hasEnterStyle = !!props.enterStyle, hasRNAnimation = hasAnimationProp && (animationsConfig == null ? void 0 : animationsConfig.isReactNative), isReactNative = staticConfig.isReactNative, isAnimated = willBeAnimated;
+        !isReactNative && hasRNAnimation && !isHOC && !isHydrated && (isAnimated = !1, curState.willHydrate = !0), process.env.NODE_ENV === "development" && time && time`pre-use-state`;
+        let initialState = hasEnterStyle || enterVariant ? isHydrated ? import_defaultComponentState.defaultComponentState : import_defaultComponentState.defaultComponentStateShouldEnter : import_defaultComponentState.defaultComponentStateMounted, states = (0, import_react2.useState)(initialState), state = props.forceStyle ? { ...states[0], [props.forceStyle]: !0 } : states[0], setState = states[1], setStateShallow = (0, import_createShallowSetState.createShallowSetState)(setState, debugProp);
+        if (isHydrated && state.unmounted === "should-enter" && (state.unmounted = !0), presenceState && isAnimated && isHydrated) {
+          let isExiting2 = !presenceState.isPresent, exitVariant = enterExitVariant ?? presenceState.exitVariant;
+          state.unmounted && enterVariant ? (process.env.NODE_ENV === "development" && debugProp === "verbose" && console.warn(`Animating presence ENTER "${enterVariant}"`), props[enterVariant] = !0) : isExiting2 && exitVariant && (process.env.NODE_ENV === "development" && debugProp === "verbose" && console.warn(`Animating presence EXIT "${enterVariant}"`), props[exitVariant] = !enterExitVariant);
+        }
+        let shouldAvoidClasses = !!(!import_constants4.isWeb || isAnimated && !supportsCSSVars || !staticConfig.acceptsClassName || propsIn.disableClassName), shouldForcePseudo = !!propsIn.forceStyle, noClassNames = shouldAvoidClasses || shouldForcePseudo, groupName = props.group, groupClassName = groupName ? `t_group_${props.group}` : "";
+        if (groupName && !curState.group) {
           let listeners = /* @__PURE__ */ new Set();
-          stateRef.current.group = {
+          curState.group = {
             listeners,
             emit(name, state2) {
               listeners.forEach((l) => l(name, state2));
@@ -4744,7 +4703,7 @@ var require_createComponent_native = __commonJS({
         if (groupName) {
           let groupContextState = componentContext.groups.state, og = setStateShallow;
           setStateShallow = (state2) => {
-            og(state2), stateRef.current.group.emit(groupName, {
+            og(state2), curState.group.emit(groupName, {
               pseudo: state2
             });
             let next = {
@@ -4755,53 +4714,30 @@ var require_createComponent_native = __commonJS({
           };
         }
         process.env.NODE_ENV === "development" && time && time`use-state`;
-        let isAnimated = willBeAnimated;
-        willBeAnimated && !supportsCSSVars && !presence && isHydrated && (import_constants4.isServer || state.unmounted === !0) && (isAnimated = !1), willBeAnimated && !stateRef.current.hasAnimated && (stateRef.current.hasAnimated = !0);
-        let componentClassName = props.asChild ? "" : props.componentName ? `is_${props.componentName}` : defaultComponentClassName, hasTextAncestor = !!(import_constants4.isWeb && isText && componentContext.inText), isDisabled = props.disabled ?? ((_c = props.accessibilityState) == null ? void 0 : _c.disabled);
+        let componentNameFinal = props.componentName || componentName2, componentClassName = props.asChild || !componentNameFinal ? "" : `is_${componentNameFinal}`, hasTextAncestor = !!(import_constants4.isWeb && isText && componentContext.inText), isDisabled = props.disabled ?? ((_d = props.accessibilityState) == null ? void 0 : _d.disabled);
         process.env.NODE_ENV === "development" && time && time`use-context`;
         let element = import_constants4.isWeb && (!Component || typeof Component == "string") && props.tag || Component, elementType = isText ? BaseText || element || "span" : BaseView || element || (hasTextAncestor ? "span" : "div");
-        if (animationsConfig && willBeAnimated && (elementType = animationsConfig[isText ? "Text" : "View"] || elementType), isAnimated && presence) {
-          let presenceState = presence[2];
-          if (presenceState) {
-            let isEntering = state.unmounted, isExiting2 = !presenceState.isPresent, enterExitVariant = presenceState.enterExitVariant, enterVariant = enterExitVariant ?? presenceState.enterVariant, exitVariant = enterExitVariant ?? presenceState.exitVariant;
-            isEntering && enterVariant ? (process.env.NODE_ENV === "development" && debugProp === "verbose" && console.warn(`Animating presence ENTER "${enterVariant}"`), props[enterVariant] = !0) : isExiting2 && exitVariant && (process.env.NODE_ENV === "development" && debugProp === "verbose" && console.warn(`Animating presence EXIT "${enterVariant}"`), props[exitVariant] = !enterExitVariant);
-          }
-        }
-        let isAnimatedReactNative = hasAnimationProp && (animationsConfig == null ? void 0 : animationsConfig.isReactNative), isReactNative = !!(staticConfig.isReactNative || isAnimatedReactNative), shouldAvoidClasses = !!(!import_constants4.isWeb || isAnimated || !staticConfig.acceptsClassName || propsIn.disableClassName), shouldForcePseudo = !!propsIn.forceStyle, noClassNames = shouldAvoidClasses || shouldForcePseudo, disableTheme = isHOC;
-        process.env.NODE_ENV === "development" && time && time`theme-props`, props.themeShallow && (stateRef.current.themeShallow = !0);
+        animationsConfig && isAnimated && (elementType = animationsConfig[isText ? "Text" : "View"] || elementType);
+        let disableTheme = isHOC;
+        process.env.NODE_ENV === "development" && time && time`theme-props`, props.themeShallow && (curState.themeShallow = !0);
         let themeStateProps = {
           name: props.theme,
-          componentName,
+          componentName: componentName2,
           disable: disableTheme,
-          shallow: stateRef.current.themeShallow,
+          shallow: curState.themeShallow,
           inverse: props.themeInverse,
           debug: debugProp
         };
-        typeof stateRef.current.isListeningToTheme == "boolean" && (themeStateProps.shouldUpdate = () => stateRef.current.isListeningToTheme), themeStateProps.deopt = willBeAnimated;
+        typeof curState.isListeningToTheme == "boolean" && (themeStateProps.shouldUpdate = () => stateRef.current.isListeningToTheme), themeStateProps.deopt = willBeAnimated;
         let isExiting = !state.unmounted && (presence == null ? void 0 : presence[0]) === !1;
         if (process.env.NODE_ENV === "development" && debugProp && debugProp !== "profile") {
-          let name = `${componentName || (Component == null ? void 0 : Component.displayName) || (Component == null ? void 0 : Component.name) || "[Unnamed Component]"}`, type = isAnimatedReactNative ? "(animated)" : isReactNative ? "(rnw)" : "", dataIs = propsIn["data-is"] || "", banner = `${name}${dataIs ? ` ${dataIs}` : ""} ${type} id ${internalID}`;
+          let name = `${componentName2 || (Component == null ? void 0 : Component.displayName) || (Component == null ? void 0 : Component.name) || "[Unnamed Component]"}`, type = (hasEnterStyle ? "(hasEnter)" : "") + (isAnimated ? "(animated)" : "") + (isReactNative ? "(rnw)" : ""), dataIs = propsIn["data-is"] || "", banner = `${internalID} ${name}${dataIs ? ` ${dataIs}` : ""} ${type}`;
           console.group(
-            `%c ${banner} (unmounted: ${state.unmounted})${presence ? ` (presence: ${presence[0]})` : ""} ${isHydrated ? "\u{1F4A6}" : "\u{1F3DC}\uFE0F"}`,
+            `%c ${banner} (hydrated: ${isHydrated}) (unmounted: ${state.unmounted})`,
             "background: green; color: white;"
-          ), import_constants4.isServer || (console.groupCollapsed(
+          ), import_constants4.isServer || (console.groupEnd(), console.groupEnd(), console.groupCollapsed(
             `Info (collapsed): ${state.press || state.pressIn ? "PRESSED " : ""}${state.hover ? "HOVERED " : ""}${state.focus ? "FOCUSED" : " "}`
-          ), (0, import_log.log)({
-            propsIn,
-            props,
-            state,
-            staticConfig,
-            elementType,
-            themeStateProps,
-            styledContext: { contextProps: styledContextProps, overriddenContextProps },
-            presence,
-            isAnimated,
-            isHOC,
-            hasAnimationProp,
-            useAnimations,
-            propsInOrder: Object.keys(propsIn),
-            propsOrder: Object.keys(props)
-          }), console.groupEnd());
+          ), (0, import_log.log)({ propsIn, props, state, staticConfig, elementType, themeStateProps }), (0, import_log.log)({ contextProps: styledContextProps, overriddenContextProps }), (0, import_log.log)({ presence, isAnimated, isHOC, hasAnimationProp, useAnimations }), console.groupEnd());
         }
         process.env.NODE_ENV === "development" && time && time`pre-theme-media`;
         let [themeState, theme] = (0, import_useTheme.useThemeWithState)(themeStateProps);
@@ -4813,18 +4749,17 @@ var require_createComponent_native = __commonJS({
         let resolveValues = (
           // if HOC + mounted + has animation prop, resolve as value so it passes non-variable to child
           isAnimated && !supportsCSSVars || isHOC && state.unmounted == !1 && hasAnimationProp ? "value" : "auto"
-        ), keepStyleSSR = willBeAnimated && (animationsConfig == null ? void 0 : animationsConfig.keepStyleSSR), styleProps = {
+        ), styleProps = {
           mediaState: mediaState3,
           noClassNames,
           resolveValues,
           isExiting,
-          isAnimated,
-          keepStyleSSR
+          isAnimated
         }, splitStyles = (0, import_getSplitStyles.useSplitStyles)(
           props,
           staticConfig,
           theme,
-          ((_d = themeState == null ? void 0 : themeState.state) == null ? void 0 : _d.name) || "",
+          ((_e = themeState == null ? void 0 : themeState.state) == null ? void 0 : _e.name) || "",
           state,
           styleProps,
           null,
@@ -4832,15 +4767,12 @@ var require_createComponent_native = __commonJS({
           elementType,
           debugProp
         );
-        props.group && props.untilMeasured === "hide" && !stateRef.current.hasMeasured && (splitStyles.style.opacity = 0), process.env.NODE_ENV === "development" && time && time`split-styles`, stateRef.current.isListeningToTheme = splitStyles.dynamicThemeAccess;
+        props.group && props.untilMeasured === "hide" && !curState.hasMeasured && (splitStyles.style.opacity = 0), process.env.NODE_ENV === "development" && time && time`split-styles`, curState.isListeningToTheme = splitStyles.dynamicThemeAccess;
         let isMediaArray = splitStyles.hasMedia && Array.isArray(splitStyles.hasMedia), shouldListenForMedia = (0, import_createVariable.didGetVariableValue)() || isMediaArray || noClassNames && splitStyles.hasMedia === !0, mediaListeningKeys = isMediaArray ? splitStyles.hasMedia : null;
         (0, import_useMedia.setMediaShouldUpdate)(stateRef, {
           enabled: shouldListenForMedia,
           keys: mediaListeningKeys
         });
-        let isAnimatedReactNativeWeb = hasAnimationProp && isReactNative;
-        if (process.env.NODE_ENV === "development" && debugProp && debugProp !== "profile" && (console.groupCollapsed(">>>"), (0, import_log.log)("props in", propsIn, "mapped to", props, "in order", Object.keys(props)), (0, import_log.log)("splitStyles", splitStyles), (0, import_log.log)("media", { shouldListenForMedia, isMediaArray, mediaListeningKeys }), (0, import_log.log)("className", Object.values(splitStyles.classNames)), import_constants4.isClient && (0, import_log.log)("ref", hostRef, "(click to view)"), console.groupEnd(), debugProp === "break"))
-          debugger;
         let {
           viewProps: viewPropsIn,
           pseudos,
@@ -4848,21 +4780,23 @@ var require_createComponent_native = __commonJS({
           classNames,
           space
         } = splitStyles, propsWithAnimation = props, animationStyles;
-        if (willBeAnimated && useAnimations && !isHOC) {
+        if (
+          // if it supports css vars we run it on server too to get matching initial style
+          (supportsCSSVars ? willBeAnimatedClient : willBeAnimated) && useAnimations && !isHOC
+        ) {
           let animations = useAnimations({
             props: propsWithAnimation,
             // if hydrating, send empty style
             style: splitStylesStyle,
-            // style: splitStylesStyle,
             presence,
             componentState: state,
             styleProps,
-            theme: (_e = themeState.state) == null ? void 0 : _e.theme,
+            theme: (_f = themeState.state) == null ? void 0 : _f.theme,
             pseudos: pseudos || null,
             hostRef,
             staticConfig
           });
-          isAnimated && animations && (animationStyles = animations.style), process.env.NODE_ENV === "development" && time && time`animations`;
+          (isAnimated || supportsCSSVars) && animations && (animationStyles = animations.style), process.env.NODE_ENV === "development" && time && time`animations`;
         }
         let {
           asChild,
@@ -4897,7 +4831,7 @@ var require_createComponent_native = __commonJS({
 
 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}`
         ), process.env.NODE_ENV === "development" && time && time`destructure`;
-        let disabled = ((_f = props.accessibilityState) == null ? void 0 : _f.disabled) || // @ts-expect-error (comes from core)
+        let disabled = ((_g = props.accessibilityState) == null ? void 0 : _g.disabled) || // @ts-expect-error (comes from core)
         props.accessibilityDisabled, viewProps = nonTamaguiProps;
         hasAnimationProp && props.tag && !props.role && !props.accessibilityRole && (viewProps.role = props.tag), isHOC && _themeProp && (viewProps.theme = _themeProp), groupName && (nonTamaguiProps.onLayout = (0, import_helpers.composeEventHandlers)(
           nonTamaguiProps.onLayout,
@@ -4906,7 +4840,13 @@ If you meant to do this, you can disable this warning - either change untilMeasu
               layout: e.nativeEvent.layout
             }), !stateRef.current.hasMeasured && props.untilMeasured === "hide" && setState((prev) => ({ ...prev })), stateRef.current.hasMeasured = !0;
           }
-        )), viewProps = nonTamaguiProps;
+        )), viewProps = ((_i = (_h = import_setupHooks.hooks).usePropsTransform) == null ? void 0 : _i.call(
+          _h,
+          elementType,
+          nonTamaguiProps,
+          hostRef,
+          curState.willHydrate
+        )) ?? nonTamaguiProps;
         let composedRef = (0, import_compose_refs.useComposedRefs)(hostRef, forwardedRef);
         viewProps.ref = composedRef, process.env.NODE_ENV === "development" && !isReactNative && !isText && import_constants4.isWeb && !isHOC && import_react2.Children.toArray(props.children).forEach((item) => {
           typeof item == "string" && item !== `
@@ -4914,16 +4854,12 @@ If you meant to do this, you can disable this warning - either change untilMeasu
             `Unexpected text node: ${item}. A text node cannot be a child of a <View>.`
           );
         }), process.env.NODE_ENV === "development" && time && time`events-hooks`;
-        let unPress = () => setStateShallow({
-          press: !1,
-          pressIn: !1
-        }), shouldSetMounted = needsMount && state.unmounted, { pseudoGroups, mediaGroups } = splitStyles;
+        let { pseudoGroups, mediaGroups } = splitStyles;
+        curState.unPress || (curState.unPress = () => setStateShallow({ press: !1, pressIn: !1 }));
+        let unPress = curState.unPress, shouldEnter = state.unmounted;
         (0, import_react2.useEffect)(() => {
-          if (shouldSetMounted) {
-            let unmounted = state.unmounted === !0 && hasEnterStyle ? "should-enter" : !1;
-            setStateShallow({
-              unmounted
-            });
+          if (shouldEnter) {
+            setStateShallow({ unmounted: !1 });
             return;
           }
           let disposeGroupsListener;
@@ -4956,14 +4892,13 @@ If you meant to do this, you can disable this warning - either change untilMeasu
             disposeGroupsListener == null || disposeGroupsListener(), mouseUps.delete(unPress);
           };
         }, [
-          shouldSetMounted,
-          state.unmounted,
+          shouldEnter,
           pseudoGroups ? Object.keys([...pseudoGroups]).join("") : 0,
           mediaGroups ? Object.keys([...mediaGroups]).join("") : 0
         ]);
-        let avoidAnimationStyle = keepStyleSSR && state.unmounted === !0, fontFamily = isText ? splitStyles.fontFamily || ((_i = staticConfig.defaultProps) == null ? void 0 : _i.fontFamily) : null;
+        let fontFamily = isText ? splitStyles.fontFamily || ((_j = staticConfig.defaultProps) == null ? void 0 : _j.fontFamily) : null;
         fontFamily && fontFamily[0] === "$" && (fontFamily = fontFamily.slice(1));
-        let fontFamilyClassName = fontFamily ? `font_${fontFamily}` : "", style = avoidAnimationStyle ? splitStyles.style : animationStyles || splitStyles.style, className;
+        let fontFamilyClassName = fontFamily ? `font_${fontFamily}` : "", style = animationStyles || splitStyles.style, className;
         asChild === "except-style" || asChild === "except-style-web" || (viewProps.style = style);
         let runtimePressStyle = !disabled && noClassNames && (pseudos == null ? void 0 : pseudos.pressStyle), runtimeFocusStyle = !disabled && noClassNames && (pseudos == null ? void 0 : pseudos.focusStyle), attachFocus = !!(runtimePressStyle || runtimeFocusStyle || onFocus || onBlur), attachPress = !!(groupName || runtimePressStyle || onPress || onPressOut || onPressIn || onLongPress || onClick), runtimeHoverStyle = !disabled && noClassNames && (pseudos == null ? void 0 : pseudos.hoverStyle), needsHoverState = runtimeHoverStyle || onHoverIn || onHoverOut, isHoverable = import_constants4.isWeb && !!(groupName || needsHoverState || onMouseEnter || onMouseLeave), shouldAttach = !!(attachFocus || attachPress || isHoverable || runtimePressStyle || runtimeHoverStyle || runtimeFocusStyle);
         process.env.NODE_ENV === "development" && time && time`events-setup`;
@@ -5017,7 +4952,7 @@ If you meant to do this, you can disable this warning - either change untilMeasu
           delayPressOut: viewProps.delayPressOut,
           focusable: viewProps.focusable ?? !0,
           minPressDuration: 0
-        }), process.env.NODE_ENV === "development" && time && time`events`, process.env.NODE_ENV === "development" && debugProp === "verbose" && (0, import_log.log)("events", { events, isHoverable, attachPress }), (_k = (_j = import_setupHooks.hooks).useEvents) == null || _k.call(_j, viewProps, events, splitStyles, setStateShallow, staticConfig);
+        }), process.env.NODE_ENV === "development" && time && time`events`, process.env.NODE_ENV === "development" && debugProp === "verbose" && (0, import_log.log)("events", { events, isHoverable, attachPress }), (_l = (_k = import_setupHooks.hooks).useEvents) == null || _l.call(_k, viewProps, events, splitStyles, setStateShallow, staticConfig);
         let direction = props.spaceDirection || "both";
         process.env.NODE_ENV === "development" && time && time`hooks`;
         let content = !children || asChild ? children : spacedChildren2({
@@ -5037,9 +4972,9 @@ If you meant to do this, you can disable this warning - either change untilMeasu
           events,
           staticConfig
         )), useChildrenResult ? content = useChildrenResult : content = (0, import_react2.createElement)(elementType, viewProps, content);
-        let ResetPresence = (_l = config == null ? void 0 : config.animations) == null ? void 0 : _l.ResetPresence;
-        willBeAnimated && presence && ResetPresence && typeof content != "string" && (content = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ResetPresence, { children: content })), process.env.NODE_ENV === "development" && time && time`create-element`;
-        let groupState = stateRef.current.group, subGroupContext = (0, import_react2.useMemo)(() => {
+        let ResetPresence = (_m = config == null ? void 0 : config.animations) == null ? void 0 : _m.ResetPresence;
+        willBeAnimated && hasEnterStyle && ResetPresence && content && typeof content != "string" && (content = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ResetPresence, { children: content })), process.env.NODE_ENV === "development" && time && time`create-element`;
+        let groupState = curState.group, subGroupContext = (0, import_react2.useMemo)(() => {
           if (!(!groupState || !groupName))
             return groupState.listeners.clear(), {
               ...componentContext.groups,
@@ -5047,7 +4982,7 @@ If you meant to do this, you can disable this warning - either change untilMeasu
               state: {
                 ...componentContext.groups.state,
                 [groupName]: {
-                  pseudo: initialState,
+                  pseudo: import_defaultComponentState.defaultComponentStateMounted,
                   // capture just initial width and height if they exist
                   // will have top, left, width, height (not x, y)
                   layout: {
@@ -5072,23 +5007,23 @@ If you meant to do this, you can disable this warning - either change untilMeasu
         if (process.env.NODE_ENV === "development" && debugProp && debugProp !== "profile") {
           console.groupCollapsed(`render <${typeof elementType == "string" ? elementType : "Component"} /> (${internalID}) with props`);
           try {
-            (0, import_log.log)("viewProps", viewProps), (0, import_log.log)("viewPropsOrder", Object.keys(viewProps));
-            for (let key in viewProps)
-              (0, import_log.log)(" - ", key, viewProps[key]);
-            (0, import_log.log)("children", content), typeof window < "u" && (0, import_log.log)({
+            (0, import_log.log)("viewProps", viewProps), (0, import_log.log)("children", content), typeof window < "u" && ((0, import_log.log)("props in", propsIn, "mapped to", props, "in order", Object.keys(props)), (0, import_log.log)({
+              shouldListenForMedia,
+              mediaListeningKeys,
+              isMediaArray,
               viewProps,
+              hostRef,
               state,
               styleProps,
               themeState,
               isAnimated,
-              isAnimatedReactNativeWeb,
               defaultProps,
               splitStyles,
               animationStyles,
               willBeAnimated,
               isStringElement,
-              classNamesIn: (_m = props.className) == null ? void 0 : _m.split(" "),
-              classNamesOut: (_n = viewProps.className) == null ? void 0 : _n.split(" "),
+              classNamesIn: (_n = props.className) == null ? void 0 : _n.split(" "),
+              classNamesOut: (_o = viewProps.className) == null ? void 0 : _o.split(" "),
               events,
               shouldAttach,
               pseudos,
@@ -5102,10 +5037,11 @@ If you meant to do this, you can disable this warning - either change untilMeasu
               elementType,
               initialState,
               classNames
-            });
+            }));
           } catch {
           }
-          console.groupEnd(), console.groupEnd();
+          if (console.groupEnd(), debugProp === "break")
+            debugger;
         }
         return process.env.NODE_ENV === "development" && time && (time`rest`, globalThis.willPrint || (globalThis.willPrint = !0, setTimeout(() => {
           delete globalThis.willPrint, time.print(), time = null;
@@ -6075,6 +6011,37 @@ var require_isTamaguiElement_native = __commonJS({
   }
 });
 
+// ../web/dist/cjs/helpers/proxyThemeVariables.native.js
+var require_proxyThemeVariables_native = __commonJS({
+  "../web/dist/cjs/helpers/proxyThemeVariables.native.js"(exports2, module2) {
+    "use strict";
+    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
+      for (var name in all)
+        __defProp2(target, name, { get: all[name], enumerable: !0 });
+    }, __copyProps2 = (to, from, except, desc) => {
+      if (from && typeof from == "object" || typeof from == "function")
+        for (let key of __getOwnPropNames2(from))
+          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
+      return to;
+    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), proxyThemeVariables_exports = {};
+    __export2(proxyThemeVariables_exports, {
+      proxyThemeVariables: () => proxyThemeVariables
+    });
+    module2.exports = __toCommonJS2(proxyThemeVariables_exports);
+    function proxyThemeVariables(obj) {
+      return new Proxy(obj || {}, {
+        has(target, key) {
+          return Reflect.has(target, removeStarting$(key));
+        },
+        get(target, key) {
+          return Reflect.get(target, removeStarting$(key));
+        }
+      });
+    }
+    var removeStarting$ = (str) => typeof str == "string" && str[0] === "$" ? str.slice(1) : str;
+  }
+});
+
 // ../web/dist/cjs/internalWithTheme.native.js
 var require_internalWithTheme_native = __commonJS({
   "../web/dist/cjs/internalWithTheme.native.js"(exports2, module2) {
@@ -6437,12 +6404,12 @@ var require_TamaguiProvider_native = __commonJS({
       ...themePropsProvider
     }) {
       return (0, import_useMedia.setupMediaListeners)(), import_constants4.isClient && React2.useLayoutEffect(() => {
-        if (document.documentElement.classList.contains("t_unmounted") && document.documentElement.classList.remove("t_unmounted"), disableInjectCSS)
-          return;
-        let style = document.createElement("style");
-        return style.appendChild(document.createTextNode(config.getCSS())), document.head.appendChild(style), () => {
-          document.head.removeChild(style);
-        };
+        if (config.disableSSR || document.documentElement.classList.contains("t_unmounted") && document.documentElement.classList.remove("t_unmounted"), !disableInjectCSS) {
+          let style = document.createElement("style");
+          return style.appendChild(document.createTextNode(config.getCSS())), document.head.appendChild(style), () => {
+            document.head.removeChild(style);
+          };
+        }
       }, [config, disableInjectCSS]), /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_ComponentContext.ComponentContext.Provider, { animationDriver: config.animations, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         import_ThemeProvider.ThemeProvider,
         {
@@ -7756,7 +7723,7 @@ var require_usePlatformMethods_native = __commonJS({
     function usePlatformMethods(hostRef) {
       (0, import_constants4.useIsomorphicLayoutEffect)(() => {
         let node = hostRef.current;
-        node && (node.measure = (callback) => (0, import_useElementLayout.measureLayout)(node, null, callback), node.measureLayout = (relativeToNode, success) => (0, import_useElementLayout.measureLayout)(node, relativeToNode, success), node.measureInWindow = (callback) => {
+        !node || node.measure || (node.measure = (callback) => (0, import_useElementLayout.measureLayout)(node, null, callback), node.measureLayout = (relativeToNode, success) => (0, import_useElementLayout.measureLayout)(node, relativeToNode, success), node.measureInWindow = (callback) => {
           node && setTimeout(() => {
             let { height, left, top, width } = (0, import_getRect.getRect)(node);
             callback(left, top, width, height);
@@ -7878,57 +7845,7 @@ var require_index_native15 = __commonJS({
     var baseViews = (0, import_getBaseViews.getBaseViews)();
     (0, import_web.setupHooks)({
       getBaseViews: import_getBaseViews.getBaseViews,
-      usePropsTransform(elementType, propsIn, hostRef) {
-        let {
-          // event props
-          onMoveShouldSetResponder,
-          onMoveShouldSetResponderCapture,
-          onResponderEnd,
-          onResponderGrant,
-          onResponderMove,
-          onResponderReject,
-          onResponderRelease,
-          onResponderStart,
-          onResponderTerminate,
-          onResponderTerminationRequest,
-          onScrollShouldSetResponder,
-          onScrollShouldSetResponderCapture,
-          onSelectionChangeShouldSetResponder,
-          onSelectionChangeShouldSetResponderCapture,
-          onStartShouldSetResponder,
-          onStartShouldSetResponderCapture,
-          // android
-          collapsable,
-          focusable,
-          // deprecated,
-          accessible,
-          accessibilityDisabled,
-          onLayout,
-          hrefAttrs,
-          ...viewProps
-        } = propsIn;
-        if ((0, import_usePlatformMethods.usePlatformMethods)(hostRef), (0, import_useElementLayout.useElementLayout)(hostRef, onLayout), (0, import_react_native_use_responder_events.useResponderEvents)(hostRef, {
-          onMoveShouldSetResponder,
-          onMoveShouldSetResponderCapture,
-          onResponderEnd,
-          onResponderGrant,
-          onResponderMove,
-          onResponderReject,
-          onResponderRelease,
-          onResponderStart,
-          onResponderTerminate,
-          onResponderTerminationRequest,
-          onScrollShouldSetResponder,
-          onScrollShouldSetResponderCapture,
-          onSelectionChangeShouldSetResponder,
-          onSelectionChangeShouldSetResponderCapture,
-          onStartShouldSetResponder,
-          onStartShouldSetResponderCapture
-        }), viewProps.href && hrefAttrs) {
-          let { download, rel, target } = hrefAttrs;
-          download != null && (viewProps.download = download), rel && (viewProps.rel = rel), typeof target == "string" && (viewProps.target = target.charAt(0) !== "_" ? `_${target}` : target);
-        }
-        return viewProps;
+      usePropsTransform(elementType, propsIn, hostRef, willHydrate) {
       },
       useEvents(viewProps, events, { pseudos }, setStateShallow, staticConfig) {
         if (events && (events.onFocus && (viewProps.onFocus = events.onFocus), events.onBlur && (viewProps.onBlur = events.onBlur)), staticConfig.isInput) {