@tamagui/core 1.115.5 → 1.116.0

package/dist/native.js

@@ -2858,8 +2858,8 @@ var require_useMedia_native = __commonJS({
       }), mod);
     }, useMedia_exports = {};
     __export2(useMedia_exports, {
-      _dmt: function() {
-        return _dmt;
+      _disableMediaTouch: function() {
+        return _disableMediaTouch2;
       },
       configureMedia: function() {
         return configureMedia2;
@@ -2908,7 +2908,7 @@ var require_useMedia_native = __commonJS({
       }
     });
     module2.exports = __toCommonJS2(useMedia_exports);
-    var import_react3 = __toESM2(require("react")), import_constants2 = require_index_native3(), import_config = require_config_native(), import_matchMedia = require_matchMedia_native(), import_pseudoDescriptors = require_pseudoDescriptors_native(), import_useDisableSSR = require_useDisableSSR_native(), mediaState2 = (
+    var import_constants2 = require_index_native3(), import_react3 = __toESM2(require("react")), import_config = require_config_native(), import_matchMedia = require_matchMedia_native(), import_pseudoDescriptors = require_pseudoDescriptors_native(), import_useDisableSSR = require_useDisableSSR_native(), mediaState2 = (
       // development only safeguard
       process.env.NODE_ENV === "development" ? new Proxy({}, {
         get(target, key) {
@@ -2937,7 +2937,7 @@ var require_useMedia_native = __commonJS({
         for (var key in media) mediaState2[key] = (mediaQueryDefaultActive == null ? void 0 : mediaQueryDefaultActive[key]) || !1, mediaKeys.add(`$${key}`);
         Object.assign(mediaQueryConfig2, media), initState = {
           ...mediaState2
-        }, mediaKeysOrdered = Object.keys(media), config.disableSSR ? setupMediaListeners() : updateCurrentState();
+        }, mediaKeysOrdered = Object.keys(media), setupMediaListeners();
       }
     };
     function unlisten() {
@@ -2990,48 +2990,64 @@ var require_useMedia_native = __commonJS({
         listeners.delete(subscriber);
       };
     }
-    function useMedia2(uidIn, componentContext, debug) {
-      var uid = uidIn ?? import_react3.default.useRef(), disableSSR = (0, import_useDisableSSR.getDisableSSR)(componentContext), initialState = (disableSSR || !import_constants2.isWeb ? mediaState2 : initState) || {}, componentState = States.get(uid);
-      componentState || (componentState = {
-        prev: initialState
-      }, States.set(uid, componentState));
-      var getSnapshot = function() {
-        if (!componentState) return initialState;
-        var { enabled, keys, prev = initialState } = componentState;
-        if (enabled === !1) return prev;
-        var _ref, testKeys = (_ref = (keys != null || enabled) && keys) !== null && _ref !== void 0 ? _ref : null, hasntUpdated = !testKeys || Object.keys(testKeys).every(function(key) {
-          return mediaState2[key] === prev[key];
-        });
-        return hasntUpdated ? prev : (componentState.prev = mediaState2, mediaState2);
-      }, state;
-      if (process.env.TAMAGUI_SYNC_MEDIA_QUERY) state = import_react3.default.useSyncExternalStore(subscribe, getSnapshot, function() {
-        return initialState;
-      });
-      else {
-        var [_state, setState] = import_react3.default.useState(initialState);
-        state = _state, (0, import_constants2.useIsomorphicLayoutEffect)(function() {
-          function update() {
-            setState(getSnapshot);
+    function useMedia2(cc, debug) {
+      var disableSSR = (0, import_config.getSetting)("disableSSR") || (0, import_useDisableSSR.getDisableSSR)(cc), initialState = disableSSR || !import_constants2.isWeb ? mediaState2 : initState, [state, setState] = import_react3.default.useState(initialState), currentKeys, getCurrentKeys = function() {
+        return currentKeys;
+      };
+      function getSnapshot(cur) {
+        var keys = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : cur.lastKeys;
+        if (!keys) return cur;
+        var _iteratorNormalCompletion = !0, _didIteratorError = !1, _iteratorError = void 0;
+        try {
+          for (var _iterator = keys[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0) {
+            var key = _step.value;
+            if (mediaState2[key] !== cur[key]) return process.env.NODE_ENV === "development" && debug && console.warn("useMedia()\u270D\uFE0F", key, cur[key], ">", mediaState2[key]), {
+              ...mediaState2,
+              lastKeys: new Set(keys)
+            };
           }
-          return update(), disableSSR || Promise.resolve().then(function() {
-            update();
-          }), subscribe(update);
-        }, []);
+        } catch (err) {
+          _didIteratorError = !0, _iteratorError = err;
+        } finally {
+          try {
+            !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
+          } finally {
+            if (_didIteratorError) throw _iteratorError;
+          }
+        }
+        return cur;
       }
-      return new Proxy(state, {
+      var isRendering = !0, isInitialState = state === initialState;
+      return (0, import_constants2.useIsomorphicLayoutEffect)(function() {
+        isRendering = !1;
+      }), (0, import_constants2.useIsomorphicLayoutEffect)(function() {
+        var update = function() {
+          return setState(function(prev) {
+            return getSnapshot(
+              prev,
+              // because the !didHydrateOnce logic we can't update as we render
+              // we need to get the current keys in case we added
+              // these only ever add keys so likely ok?
+              getCurrentKeys()
+            );
+          });
+        };
+        return update(), subscribe(update);
+      }, []), new Proxy(state, {
         get(_, key) {
-          if (!disableMediaTouch) {
-            if (typeof key == "string") {
-              var _componentState;
-              (_componentState = componentState).keys || (_componentState.keys = {}), componentState.keys[key] = !0, process.env.NODE_ENV === "development" && debug && console.info("useMedia() TOUCH", key);
+          if (isRendering && !disableMediaTouch && typeof key == "string") {
+            var needsUpdateKeys = !state.lastKeys || !state.lastKeys.has(key);
+            if ((needsUpdateKeys || state[key] !== mediaState2[key]) && (process.env.NODE_ENV === "development" && debug && console.info("useMedia() TOUCH", key), currentKeys || (currentKeys = /* @__PURE__ */ new Set()), currentKeys.add(key), !isInitialState)) {
+              var next = getSnapshot(state, currentKeys);
+              next !== state && setState(next);
             }
-            return Reflect.get(state, key);
           }
+          return Reflect.get(state, key);
         }
       });
     }
     var disableMediaTouch = !1;
-    function _dmt(val) {
+    function _disableMediaTouch2(val) {
       disableMediaTouch = val;
     }
     function getMediaState(mediaGroups, layout) {
@@ -4463,9 +4479,6 @@ var require_defaultComponentState_native = __commonJS({
       },
       defaultComponentStateMounted: function() {
         return defaultComponentStateMounted;
-      },
-      defaultComponentStateShouldEnter: function() {
-        return defaultComponentStateShouldEnter;
       }
     });
     module2.exports = __toCommonJS2(defaultComponentState_exports);
@@ -4480,9 +4493,6 @@ var require_defaultComponentState_native = __commonJS({
     }, defaultComponentStateMounted = {
       ...defaultComponentState,
       unmounted: !1
-    }, defaultComponentStateShouldEnter = {
-      ...defaultComponentState,
-      unmounted: "should-enter"
     };
   }
 });
@@ -5675,11 +5685,11 @@ var require_log_native = __commonJS({
     function log() {
       for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) args[_key] = arguments[_key];
       if (process.env.NODE_ENV !== "production") {
-        (0, import_useMedia._dmt)(!0);
+        (0, import_useMedia._disableMediaTouch)(!0);
         try {
           return console.log(...args);
         } finally {
-          (0, import_useMedia._dmt)(!1);
+          (0, import_useMedia._disableMediaTouch)(!1);
         }
       }
     }
@@ -6920,7 +6930,7 @@ var require_getSplitStyles_native = __commonJS({
     }
     var getSplitStyles = function(props, staticConfig, theme, themeName, componentState, styleProps, parentSplitStyles, context, elementType, debug) {
       conf = conf || (0, import_config.getConfig)(), import_constants2.isWeb && styleProps.isAnimated && conf.animations.isReactNative && !styleProps.noNormalize && (styleProps.noNormalize = "values");
-      var { shorthands } = conf, { isHOC, isText, isInput, variants, isReactNative, inlineProps, inlineWhenUnflattened, parentStaticConfig, acceptsClassName } = staticConfig, viewProps = {}, mediaState2 = styleProps.mediaState || import_useMedia.mediaState, usedKeys = {}, shouldDoClasses = acceptsClassName && import_constants2.isWeb && !styleProps.noClassNames, rulesToInsert = void 0, classNames = {}, transforms = {}, pseudos = null, space = props.space, hasMedia = !1, dynamicThemeAccess, pseudoGroups, mediaGroups, className = props.className || "", mediaStylesSeen = 0, styleState = {
+      var { shorthands } = conf, { isHOC, isText, isInput, variants, isReactNative, inlineProps, inlineWhenUnflattened, parentStaticConfig, acceptsClassName } = staticConfig, viewProps = {}, mediaState2 = styleProps.mediaState || import_useMedia.mediaState, usedKeys = {}, shouldDoClasses = acceptsClassName && import_constants2.isWeb && !styleProps.noClass, rulesToInsert = void 0, classNames = {}, transforms = {}, pseudos = null, space = props.space, hasMedia = !1, dynamicThemeAccess, pseudoGroups, mediaGroups, className = props.className || "", mediaStylesSeen = 0, styleState = {
         classNames,
         conf,
         props,
@@ -6968,7 +6978,7 @@ var require_getSplitStyles_native = __commonJS({
           }), console.groupEnd()), "continue";
           if (isPseudo) {
             if (!val) return "continue";
-            var pseudoStyleObject = getSubStyle(styleState, key, val, styleProps.noClassNames), descriptor = import_pseudoDescriptors.pseudoDescriptors[key], isEnter = key === "enterStyle", isExit = key === "exitStyle";
+            var pseudoStyleObject = getSubStyle(styleState, key, val, styleProps.noClass), descriptor = import_pseudoDescriptors.pseudoDescriptors[key], isEnter = key === "enterStyle", isExit = key === "exitStyle";
             if (!descriptor) return "continue";
             if (!shouldDoClasses || process.env.IS_STATIC === "is_static") {
               var _pseudos, _key;
@@ -7136,7 +7146,7 @@ var require_getSplitStyles_native = __commonJS({
         if (accept) {
           var accepted = accept[keyInit];
           if ((accepted === "style" || accepted === "textStyle") && valInit && typeof valInit == "object") {
-            viewProps[keyInit] = getSubStyle(styleState, keyInit, valInit, styleProps.noClassNames);
+            viewProps[keyInit] = getSubStyle(styleState, keyInit, valInit, styleProps.noClass);
             continue;
           }
         }
@@ -7797,7 +7807,7 @@ var require_Theme_native = __commonJS({
     function getThemedChildren(themeState, children, props) {
       var isRoot = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : !1, stateRef = arguments.length > 4 ? arguments[4] : void 0, { themeManager, isNewTheme } = themeState;
       if (!themeManager) return children;
-      var { shallow, forceClassName } = props, shouldRenderChildrenWithTheme = isNewTheme || isRoot || stateRef.current.hasEverThemed || typeof props.inverse == "boolean";
+      var { shallow, forceClassName } = props, shouldRenderChildrenWithTheme = isNewTheme || isRoot || "inverse" in props || "name" in props || "reset" in props || "forceClassName" in props || stateRef.current.hasEverThemed;
       if (shouldRenderChildrenWithTheme && (stateRef.current.hasEverThemed = !0), !shouldRenderChildrenWithTheme) return children;
       process.env.NODE_ENV === "development" && shouldRenderChildrenWithTheme && props.debug === "verbose" && (0, import_log.log)(`adding theme: isRoot ${isRoot}, inverse ${"inverse" in props}, isNewTheme ${isNewTheme}, hasEver ${stateRef.current.hasEverThemed}`, props);
       var next = children;
@@ -7821,7 +7831,7 @@ var require_Theme_native = __commonJS({
     function wrapThemeElements(param) {
       var { children, themeState, forceClassName, isRoot } = param;
       if (isRoot && forceClassName === !1) return children;
-      var inverse = themeState.inversed, requiresExtraWrapper = inverse != null || forceClassName, { className, style } = getThemeClassNameAndStyle(themeState, isRoot), themedChildren = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+      var inverse = themeState.inversed, requiresExtraWrapper = typeof inverse == "boolean" || forceClassName, { className, style } = getThemeClassNameAndStyle(themeState, isRoot), themedChildren = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
         className: `${className} _dsp_contents is_Theme`,
         style,
         children
@@ -7923,13 +7933,13 @@ var require_themeable_native = __commonJS({
             ...rest,
             "data-disable-theme": !0
           })
-        ), contents = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Theme.Theme, {
-          componentName: componentName || (staticConfig == null ? void 0 : staticConfig.componentName),
-          name: theme,
+        ), filteredProps = {
+          componentName: componentName || (staticConfig == null ? void 0 : staticConfig.componentName)
+        };
+        "debug" in props && (filteredProps.debug = props.debug), "theme" in props && (filteredProps.name = props.theme), "themeInverse" in props && (filteredProps.inverse = props.themeInverse), "themeReset" in props && (filteredProps.reset = themeReset);
+        var contents = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Theme.Theme, {
           "disable-child-theme": !0,
-          debug: props.debug,
-          inverse: themeInverse,
-          reset: themeReset,
+          ...filteredProps,
           children: element
         });
         if (context) {
@@ -7997,75 +8007,6 @@ var require_wrapStyleTags_native = __commonJS({
   }
 });
 
-// ../web/dist/cjs/hooks/useDidHydrateOnce.native.js
-var require_useDidHydrateOnce_native = __commonJS({
-  "../web/dist/cjs/hooks/useDidHydrateOnce.native.js"(exports2, module2) {
-    "use strict";
-    var __create2 = Object.create, __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __getProtoOf2 = Object.getPrototypeOf, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = function(target, all) {
-      for (var name in all) __defProp2(target, name, {
-        get: all[name],
-        enumerable: !0
-      });
-    }, __copyProps2 = function(to, from, except, desc) {
-      var _iteratorNormalCompletion = !0, _didIteratorError = !1, _iteratorError = void 0;
-      if (from && typeof from == "object" || typeof from == "function") try {
-        for (var _loop = function() {
-          var key = _step.value;
-          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, {
-            get: function() {
-              return from[key];
-            },
-            enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable
-          });
-        }, _iterator = __getOwnPropNames2(from)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0) _loop();
-      } catch (err) {
-        _didIteratorError = !0, _iteratorError = err;
-      } finally {
-        try {
-          !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
-        } finally {
-          if (_didIteratorError)
-            throw _iteratorError;
-        }
-      }
-      return to;
-    }, __toESM2 = function(mod, isNodeMode, target) {
-      return target = mod != null ? __create2(__getProtoOf2(mod)) : {}, __copyProps2(
-        // 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 ? __defProp2(target, "default", {
-          value: mod,
-          enumerable: !0
-        }) : target,
-        mod
-      );
-    }, __toCommonJS2 = function(mod) {
-      return __copyProps2(__defProp2({}, "__esModule", {
-        value: !0
-      }), mod);
-    }, useDidHydrateOnce_exports = {};
-    __export2(useDidHydrateOnce_exports, {
-      useDidHydrateOnce: function() {
-        return useDidHydrateOnce;
-      },
-      useDidHydrateOnceRoot: function() {
-        return useDidHydrateOnceRoot;
-      }
-    });
-    module2.exports = __toCommonJS2(useDidHydrateOnce_exports);
-    var import_react3 = __toESM2(require("react")), import_config = require_config_native();
-    function useDidHydrateOnceRoot() {
-      return !0;
-    }
-    var last = Date.now();
-    function useDidHydrateOnce() {
-      return !0;
-    }
-  }
-});
-
 // ../web/dist/cjs/hooks/useComponentState.native.js
 var require_useComponentState_native = __commonJS({
   "../web/dist/cjs/hooks/useComponentState.native.js"(exports2, module2) {
@@ -8109,7 +8050,7 @@ var require_useComponentState_native = __commonJS({
       }
     });
     module2.exports = __toCommonJS2(useComponentState_exports);
-    var import_defaultComponentState = require_defaultComponentState_native(), import_useDidHydrateOnce = require_useDidHydrateOnce_native(), import_react3 = require("react"), import_constants2 = require_index_native3(), import_createShallowSetState = require_createShallowSetState_native(), import_isObj = require_isObj_native(), import_log = require_log_native(), useComponentState = function(props, param, staticConfig, config) {
+    var import_constants2 = require_index_native3(), import_react3 = require("react"), import_defaultComponentState = require_defaultComponentState_native(), import_createShallowSetState = require_createShallowSetState_native(), import_isObj = require_isObj_native(), import_log = require_log_native(), useComponentState = function(props, param, staticConfig, config) {
       var { animationDriver, groups } = param, _animationDriver_usePresence, useAnimations = animationDriver == null ? void 0 : animationDriver.useAnimations, stateRef = (0, import_react3.useRef)(void 0);
       stateRef.current || (stateRef.current = {});
       var hasAnimationProp = !!("animation" in props || props.style && hasAnimatedStyleValue(props.style)), supportsCSSVars = animationDriver == null ? void 0 : animationDriver.supportsCSSVars, curStateRef = stateRef.current, willBeAnimatedClient = function() {
@@ -8117,20 +8058,22 @@ var require_useComponentState_native = __commonJS({
         return !!(next || curStateRef.hasAnimated);
       }(), willBeAnimated = !import_constants2.isServer && willBeAnimatedClient;
       willBeAnimated && !curStateRef.hasAnimated && (curStateRef.hasAnimated = !0);
-      var presence = willBeAnimated && props.animatePresence !== !1 && (animationDriver == null || (_animationDriver_usePresence = animationDriver.usePresence) === null || _animationDriver_usePresence === void 0 ? void 0 : _animationDriver_usePresence.call(animationDriver)) || null, presenceState = presence == null ? void 0 : presence[2], isExiting = (presenceState == null ? void 0 : presenceState.isPresent) === !1, isEntering = (presenceState == null ? void 0 : presenceState.isPresent) === !0 && presenceState.initial !== !1, hasEnterStyle = !!props.enterStyle, hasRNAnimation = hasAnimationProp && (animationDriver == null ? void 0 : animationDriver.isReactNative), hasEnterState = hasEnterStyle || isEntering, didHydrateOnce = willBeAnimated ? (0, import_useDidHydrateOnce.useDidHydrateOnce)() : !0, shouldEnter = hasEnterState || !didHydrateOnce && hasRNAnimation, shouldEnterFromUnhydrated = import_constants2.isWeb && !didHydrateOnce, initialState = shouldEnter ? (
+      var { disableClassName } = props, presence = willBeAnimated && props.animatePresence !== !1 && (animationDriver == null || (_animationDriver_usePresence = animationDriver.usePresence) === null || _animationDriver_usePresence === void 0 ? void 0 : _animationDriver_usePresence.call(animationDriver)) || null, presenceState = presence == null ? void 0 : presence[2], isExiting = (presenceState == null ? void 0 : presenceState.isPresent) === !1, isEntering = (presenceState == null ? void 0 : presenceState.isPresent) === !0 && presenceState.initial !== !1, hasEnterStyle = !!props.enterStyle, hasAnimationThatNeedsHydrate = hasAnimationProp && ((animationDriver == null ? void 0 : animationDriver.isReactNative) || !supportsCSSVars), hasEnterState = hasEnterStyle || isEntering, shouldEnter = hasEnterState || hasAnimationThatNeedsHydrate || // disableClassName doesnt work server side, only client, so needs hydrate
+      // this is just for a better ux, supports css variables for light/dark, media queries, etc
+      disableClassName, initialState = shouldEnter ? (
         // on the very first render we switch all spring animation drivers to css rendering
         // this is because we need to use css variables, which they don't support to do proper SSR
         // without flickers of the wrong colors.
         // but once we do that initial hydration and we are in client side rendering mode,
         // we can avoid the extra re-render on mount
-        shouldEnterFromUnhydrated ? import_defaultComponentState.defaultComponentState : import_defaultComponentState.defaultComponentStateShouldEnter
+        import_defaultComponentState.defaultComponentState
       ) : import_defaultComponentState.defaultComponentStateMounted, disabled = isDisabled(props);
       disabled != null && (initialState.disabled = disabled);
       var states = (0, import_react3.useState)(initialState), state = props.forceStyle ? {
         ...states[0],
         [props.forceStyle]: !0
-      } : states[0], setState = states[1], isHydrated = state.unmounted === !1 || state.unmounted === "should-enter", isAnimated = willBeAnimated;
-      import_constants2.isWeb && hasRNAnimation && !staticConfig.isHOC && state.unmounted === !0 && (isAnimated = !1, curStateRef.willHydrate = !0), disabled !== state.disabled && (state.disabled = disabled, disabled && Object.assign(state, import_defaultComponentState.defaultComponentStateMounted), setState({
+      } : states[0], setState = states[1], isHydrated = state.unmounted === !1, isAnimated = willBeAnimated;
+      import_constants2.isWeb && hasAnimationThatNeedsHydrate && !staticConfig.isHOC && state.unmounted === !0 && (isAnimated = !1, curStateRef.willHydrate = !0), disabled !== state.disabled && (state.disabled = disabled, disabled && Object.assign(state, import_defaultComponentState.defaultComponentStateMounted), setState({
         ...state
       }));
       var setStateShallow = (0, import_createShallowSetState.createShallowSetState)(setState, disabled, !1, props.debug);
@@ -8141,10 +8084,10 @@ var require_useComponentState_native = __commonJS({
         var exv = exitVariant ?? enterExitVariant, env = enterVariant ?? enterExitVariant;
         state.unmounted && env && staticConfig.variants[env] ? (process.env.NODE_ENV === "development" && props.debug === "verbose" && console.warn(`Animating presence ENTER "${env}"`), props[env] = !0) : isExiting && exv && (process.env.NODE_ENV === "development" && props.debug === "verbose" && console.warn(`Animating presence EXIT "${exv}"`), props[exv] = exitVariant !== enterExitVariant);
       }
-      var shouldAvoidClasses = !import_constants2.isWeb;
-      if (import_constants2.isWeb) {
-        var { disableClassName } = props, isAnimatedAndHydrated = isAnimated && !supportsCSSVars && didHydrateOnce && !import_constants2.isServer, isClassNameDisabled = !staticConfig.acceptsClassName && (config.disableSSR || didHydrateOnce), isDisabledManually = disableClassName && !import_constants2.isServer && didHydrateOnce && state.unmounted === !0;
-        (isAnimatedAndHydrated || isDisabledManually || isClassNameDisabled) && (shouldAvoidClasses = !0, process.env.NODE_ENV === "development" && props.debug && (0, import_log.log)("avoiding className", {
+      var noClass = !import_constants2.isWeb || !!props.forceStyle;
+      if (import_constants2.isWeb && (!import_constants2.isServer || isHydrated)) {
+        var isAnimatedAndHydrated = isAnimated && !supportsCSSVars, isClassNameDisabled = !staticConfig.acceptsClassName && (config.disableSSR || !state.unmounted), isDisabledManually = disableClassName && !state.unmounted;
+        (isAnimatedAndHydrated || isDisabledManually || isClassNameDisabled) && (noClass = !0, process.env.NODE_ENV === "development" && props.debug && (0, import_log.log)("avoiding className", {
           isAnimatedAndHydrated,
           isDisabledManually,
           isClassNameDisabled
@@ -8193,7 +8136,7 @@ var require_useComponentState_native = __commonJS({
         presenceState,
         setState,
         setStateShallow,
-        shouldAvoidClasses,
+        noClass,
         state,
         stateRef,
         supportsCSSVars,
@@ -8540,7 +8483,7 @@ var require_createComponent_native = __commonJS({
         ]), !1)
           var timer;
         process.env.NODE_ENV === "development" && time && time`start (ignore)`, process.env.NODE_ENV === "development" && time && time`did-finish-ssr`, process.env.NODE_ENV === "development" && time && time`stateref`;
-        var animationDriver = componentContext.animationDriver, useAnimations = animationDriver == null ? void 0 : animationDriver.useAnimations, { curStateRef, disabled, groupName, hasAnimationProp, hasEnterStyle, isAnimated, isExiting, isHydrated, presence, presenceState, setState, setStateShallow, shouldAvoidClasses, state, stateRef, supportsCSSVars, willBeAnimated, willBeAnimatedClient } = (0, import_useComponentState.useComponentState)(props, componentContext, staticConfig, config), shouldForcePseudo = !!propsIn.forceStyle, noClassNames = shouldAvoidClasses || shouldForcePseudo;
+        var animationDriver = componentContext.animationDriver, useAnimations = animationDriver == null ? void 0 : animationDriver.useAnimations, { curStateRef, disabled, groupName, hasAnimationProp, hasEnterStyle, isAnimated, isExiting, isHydrated, presence, presenceState, setState, setStateShallow, noClass, state, stateRef, supportsCSSVars, willBeAnimated, willBeAnimatedClient } = (0, import_useComponentState.useComponentState)(props, componentContext, staticConfig, config);
         process.env.NODE_ENV === "development" && time && time`use-state`;
         var hasTextAncestor = !!(import_constants2.isWeb && isText && componentContext.inText);
         process.env.NODE_ENV === "development" && time && time`use-context`;
@@ -8557,11 +8500,10 @@ var require_createComponent_native = __commonJS({
         if ("themeInverse" in props && (themeStateProps.inverse = props.themeInverse), "theme" in props && (themeStateProps.name = props.theme), typeof curStateRef.isListeningToTheme == "boolean" && (themeStateProps.shouldUpdate = function() {
           return stateRef.current.isListeningToTheme;
         }), themeStateProps.deopt = willBeAnimated, process.env.NODE_ENV === "development" && debugProp && debugProp !== "profile") {
-          var name = `${componentName2 || (Component == null ? void 0 : Component.displayName) || (Component == null ? void 0 : Component.name) || "[Unnamed Component]"}`, type = (hasEnterStyle ? "(hasEnter)" : " ") + (isAnimated ? "(animated)" : " ") + (isReactNative ? "(rnw)" : " ") + (shouldAvoidClasses ? "(shouldAvoidClasses)" : " ") + (state.press || state.pressIn ? "(PRESSED)" : " ") + (state.hover ? "(HOVERED)" : " ") + (state.focus ? "(FOCUSED)" : " ") + ((presenceState == null ? void 0 : presenceState.isPresent) === !1 ? "(EXIT)" : ""), dataIs = propsIn["data-is"] || "", banner = `${internalID} ${name}${dataIs ? ` ${dataIs}` : ""} ${type}`;
+          var name = `${componentName2 || (Component == null ? void 0 : Component.displayName) || (Component == null ? void 0 : Component.name) || "[Unnamed Component]"}`, type = (hasEnterStyle ? "(hasEnter)" : " ") + (isAnimated ? "(animated)" : " ") + (isReactNative ? "(rnw)" : " ") + (noClass ? "(noClass)" : " ") + (state.press || state.pressIn ? "(PRESSED)" : " ") + (state.hover ? "(HOVERED)" : " ") + (state.focus ? "(FOCUSED)" : " ") + ((presenceState == null ? void 0 : presenceState.isPresent) === !1 ? "(EXIT)" : ""), dataIs = propsIn["data-is"] || "", banner = `${internalID} ${name}${dataIs ? ` ${dataIs}` : ""} ${type}`;
           if (console.info(`%c ${banner} (hydrated: ${isHydrated}) (unmounted: ${state.unmounted})`, "background: green; color: white;"), import_constants2.isServer) (0, import_log.log)({
-            noClassNames,
+            noClass,
             isAnimated,
-            shouldAvoidClasses,
             isWeb: import_constants2.isWeb,
             supportsCSSVars
           });
@@ -8590,14 +8532,14 @@ var require_createComponent_native = __commonJS({
         elementType = Component || elementType;
         var isStringElement = typeof elementType == "string";
         process.env.NODE_ENV === "development" && time && time`theme`;
-        var mediaState2 = (0, import_useMedia.useMedia)(stateRef, componentContext, debugProp);
+        var mediaState2 = (0, import_useMedia.useMedia)(componentContext, debugProp);
         (0, import_createVariable.setDidGetVariableValue)(!1), process.env.NODE_ENV === "development" && time && time`media`;
         var 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"
         ), styleProps = {
           mediaState: mediaState2,
-          noClassNames,
+          noClass,
           resolveValues,
           isExiting,
           isAnimated,
@@ -8609,7 +8551,7 @@ var require_createComponent_native = __commonJS({
           (_splitStyles = splitStyles).style || (_splitStyles.style = {}), splitStyles.style.opacity = 0;
         }
         process.env.NODE_ENV === "development" && time && time`split-styles`, curStateRef.isListeningToTheme = splitStyles.dynamicThemeAccess;
-        var hasRuntimeMediaKeys = splitStyles.hasMedia && splitStyles.hasMedia !== !0, shouldListenForMedia = (0, import_createVariable.didGetVariableValue)() || hasRuntimeMediaKeys || noClassNames && splitStyles.hasMedia === !0, mediaListeningKeys = hasRuntimeMediaKeys ? splitStyles.hasMedia : null;
+        var hasRuntimeMediaKeys = splitStyles.hasMedia && splitStyles.hasMedia !== !0, shouldListenForMedia = (0, import_createVariable.didGetVariableValue)() || hasRuntimeMediaKeys || noClass && splitStyles.hasMedia === !0, mediaListeningKeys = hasRuntimeMediaKeys ? splitStyles.hasMedia : null;
         process.env.NODE_ENV === "development" && debugProp === "verbose" && console.info("useMedia() createComponent", shouldListenForMedia, mediaListeningKeys), (0, import_useMedia.setMediaShouldUpdate)(stateRef, shouldListenForMedia, mediaListeningKeys);
         var { viewProps: viewPropsIn, pseudos, style: splitStylesStyle, classNames, space } = splitStyles, propsWithAnimation = props, {
           asChild,
@@ -8691,23 +8633,20 @@ If you meant to do this, you can disable this warning - either change untilMeasu
           }
         }), import_react3.default.useEffect(function() {
           if (!disabled) {
+            var tm;
             if (state.unmounted === !0 && hasEnterStyle) {
               setStateShallow({
                 unmounted: "should-enter"
               });
               return;
             }
-            var tm;
-            if (state.unmounted) {
-              animationDriver != null && animationDriver.supportsCSSVars ? tm = setTimeout(function() {
-                setStateShallow({
-                  unmounted: !1
-                });
-              }) : setStateShallow({
+            if (state.unmounted) return tm = setTimeout(function() {
+              setStateShallow({
                 unmounted: !1
               });
-              return;
-            }
+            }), function() {
+              return clearTimeout(tm);
+            };
             var dispose = (0, import_subscribeToContextGroup.subscribeToContextGroup)({
               disabled,
               componentContext,
@@ -8730,7 +8669,7 @@ If you meant to do this, you can disable this warning - either change untilMeasu
             ...mediaGroups
           ]).join("") : 0
         ]);
-        var runtimePressStyle = !disabled && noClassNames && (pseudos == null ? void 0 : pseudos.pressStyle), runtimeFocusStyle = !disabled && noClassNames && (pseudos == null ? void 0 : pseudos.focusStyle), runtimeFocusVisibleStyle = !disabled && noClassNames && (pseudos == null ? void 0 : pseudos.focusVisibleStyle), attachFocus = !!(runtimePressStyle || runtimeFocusStyle || runtimeFocusVisibleStyle || onFocus || onBlur), attachPress = !!(groupName || runtimePressStyle || onPress || onPressOut || onPressIn || onMouseDown || onMouseUp || onLongPress || onClick || pseudos != null && pseudos.focusVisibleStyle), runtimeHoverStyle = !disabled && noClassNames && (pseudos == null ? void 0 : pseudos.hoverStyle), needsHoverState = !!(groupName || runtimeHoverStyle || onHoverIn || onHoverOut), attachHover = import_constants2.isWeb && !!(groupName || needsHoverState || onMouseEnter || onMouseLeave), shouldAttach = !disabled && !props.asChild && !!(attachFocus || attachPress || attachHover || runtimePressStyle || runtimeHoverStyle || runtimeFocusStyle), needsPressState = !!(groupName || runtimePressStyle);
+        var runtimePressStyle = !disabled && noClass && (pseudos == null ? void 0 : pseudos.pressStyle), runtimeFocusStyle = !disabled && noClass && (pseudos == null ? void 0 : pseudos.focusStyle), runtimeFocusVisibleStyle = !disabled && noClass && (pseudos == null ? void 0 : pseudos.focusVisibleStyle), attachFocus = !!(runtimePressStyle || runtimeFocusStyle || runtimeFocusVisibleStyle || onFocus || onBlur), attachPress = !!(groupName || runtimePressStyle || onPress || onPressOut || onPressIn || onMouseDown || onMouseUp || onLongPress || onClick || pseudos != null && pseudos.focusVisibleStyle), runtimeHoverStyle = !disabled && noClass && (pseudos == null ? void 0 : pseudos.hoverStyle), needsHoverState = !!(groupName || runtimeHoverStyle || onHoverIn || onHoverOut), attachHover = import_constants2.isWeb && !!(groupName || needsHoverState || onMouseEnter || onMouseLeave), shouldAttach = !disabled && !props.asChild && !!(attachFocus || attachPress || attachHover || runtimePressStyle || runtimeHoverStyle || runtimeFocusStyle), needsPressState = !!(groupName || runtimePressStyle);
         process.env.NODE_ENV === "development" && time && time`events-setup`, process.env.NODE_ENV === "development" && debugProp === "verbose" && (0, import_log.log)("\u{1FAA9} events()", {
           runtimeFocusStyle,
           runtimePressStyle,
@@ -8899,8 +8838,7 @@ If you meant to do this, you can disable this warning - either change untilMeasu
                 mediaListeningKeys,
                 pseudos,
                 shouldAttach,
-                shouldAvoidClasses,
-                shouldForcePseudo,
+                noClass,
                 shouldListenForMedia,
                 splitStyles,
                 splitStylesStyle,
@@ -10769,22 +10707,14 @@ var require_index_native7 = __commonJS({
       },
       useDidFinishSSR: function() {
         return useDidFinishSSR;
-      },
-      useDidFinishSSRSync: function() {
-        return useDidFinishSSRSync;
       }
     });
     module2.exports = __toCommonJS2(src_exports2);
     var React3 = __toESM2(require("react"));
-    function useDidFinishSSR(value, options) {
+    function useDidFinishSSR(value) {
       return value ?? !0;
       var cur, setCur;
     }
-    function useDidFinishSSRSync(value) {
-      return useDidFinishSSR(value, {
-        sync: !0
-      });
-    }
     function useClientValue(value) {
       var done = useDidFinishSSR();
       return done ? typeof value == "function" ? value() : value : void 0;
@@ -10980,7 +10910,7 @@ var require_useProps_native = __commonJS({
         mediaState: mediaState2,
         noSkip: !0,
         noMergeStyle: !0,
-        noClassNames: !0,
+        noClass: !0,
         resolveValues: "auto",
         ...opts
       }, null, componentContext), { mediaGroups, pseudoGroups } = splitStyles;
@@ -11351,10 +11281,10 @@ var require_TamaguiProvider_native = __commonJS({
       }
     });
     module2.exports = __toCommonJS2(TamaguiProvider_exports);
-    var import_jsx_runtime = require("react/jsx-runtime"), import_constants2 = require_index_native3(), import_react3 = __toESM2(require("react")), import_config = require_config_native(), import_ComponentContext = require_ComponentContext_native(), import_useMedia = require_useMedia_native(), import_ThemeProvider = require_ThemeProvider_native();
+    var import_jsx_runtime = require("react/jsx-runtime"), import_constants2 = require_index_native3(), import_react3 = __toESM2(require("react")), import_config = require_config_native(), import_ComponentContext = require_ComponentContext_native(), import_ThemeProvider = require_ThemeProvider_native();
     function TamaguiProvider(param) {
       var { children, disableInjectCSS, config, className, defaultTheme, disableRootThemeClass, reset, themeClassNameOnRoot } = param;
-      return (0, import_useMedia.setupMediaListeners)(), process.env.TAMAGUI_REACT_19 || import_constants2.isClient && (0, import_constants2.useIsomorphicLayoutEffect)(function() {
+      return process.env.TAMAGUI_REACT_19 || import_constants2.isClient && (0, import_constants2.useIsomorphicLayoutEffect)(function() {
         if (config && !disableInjectCSS) {
           var style = document.createElement("style");
           return style.appendChild(document.createTextNode(config.getCSS())), document.head.appendChild(style), function() {
@@ -11676,6 +11606,9 @@ var require_index_native9 = __commonJS({
       }), mod);
     }, src_exports2 = {};
     __export2(src_exports2, {
+      _disableMediaTouch: function() {
+        return import_useMedia._disableMediaTouch;
+      },
       configureMedia: function() {
         return import_useMedia.configureMedia;
       },