@tamagui/core 1.129.11 → 1.129.12-1751386794649

package/dist/native.js

@@ -1460,6 +1460,9 @@ var require_insertStyleRule_native = __commonJS({
       shouldInsertStyleRules: function() {
         return shouldInsertStyleRules;
       },
+      stopAccumulatingRules: function() {
+        return stopAccumulatingRules;
+      },
       updateRules: function() {
         return updateRules;
       }
@@ -1550,7 +1553,7 @@ var require_insertStyleRule_native = __commonJS({
         return themes;
       }
     }
-    function track(id) {
+    function trackInsertedStyle(id) {
       var remove = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !1, next = (totalSelectorsInserted.get(id) || 0) + (remove ? -1 : 1);
       return totalSelectorsInserted.set(id, next), next;
     }
@@ -1598,7 +1601,7 @@ var require_insertStyleRule_native = __commonJS({
               }
               continue;
             }
-            var total = track(identifier, remove);
+            var total = trackInsertedStyle(identifier, remove);
             if (remove) total === 0 && delete allSelectors[identifier];
             else if (!(identifier in allSelectors)) {
               var isTransform = identifier.startsWith("_transform-"), shouldInsert = isTransform ? addTransform(identifier, cssRule.cssText, cssRule) : !0;
@@ -1698,53 +1701,62 @@ var require_insertStyleRule_native = __commonJS({
     var getIdentifierFromTamaguiSelector = function(selector) {
       var dotIndex = selector.indexOf(":");
       return dotIndex > -1 ? selector.slice(7, dotIndex) : selector.slice(7);
-    }, sheet = null;
+    }, sheet = null, trackAllRules = !0;
+    function stopAccumulatingRules() {
+      trackAllRules = !0;
+    }
     function updateRules(identifier, rules) {
-      return identifier in allRules ? !1 : (allRules[identifier] = rules.join(" "), identifier.startsWith("_transform-") ? addTransform(identifier, rules[0]) : !0);
+      return trackAllRules && (allRules[identifier] = rules.join(" ")), identifier.startsWith("_transform-") ? addTransform(identifier, rules[0]) : !0;
     }
     var nonce = "";
     function setNonce2(_) {
       nonce = _;
     }
     function insertStyleRules2(rulesToInsert) {
-      if (!sheet && import_constants.isClient && document.head) {
-        var styleTag = document.createElement("style");
-        nonce && (styleTag.nonce = nonce), sheet = document.head.appendChild(styleTag).sheet;
-      }
-      if (sheet) for (var key in rulesToInsert) {
-        var styleObject = rulesToInsert[key], identifier = styleObject[import_helpers2.StyleObjectIdentifier];
-        if (shouldInsertStyleRules(identifier)) {
-          var rules = styleObject[import_helpers2.StyleObjectRules];
-          allSelectors[identifier] = rules.join(`
-`), track(identifier), updateRules(identifier, rules);
-          var _iteratorNormalCompletion = !0, _didIteratorError = !1, _iteratorError = void 0;
-          try {
-            for (var _iterator = rules[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0) {
-              var rule = _step.value;
-              if (process.env.NODE_ENV === "production") try {
-                sheet.insertRule(rule, sheet.cssRules.length);
-              } catch (err) {
-                console.error("Error inserting CSS", err);
-              }
-              else sheet.insertRule(rule, sheet.cssRules.length);
-            }
-          } catch (err) {
-            _didIteratorError = !0, _iteratorError = err;
-          } finally {
+      if (import_constants.isClient) {
+        if (!sheet && document.head) {
+          var styleTag = document.createElement("style");
+          nonce && (styleTag.nonce = nonce), sheet = document.head.appendChild(styleTag).sheet;
+        }
+        if (!sheet) {
+          console.warn("[tamagui] no sheet");
+          return;
+        }
+        for (var key in rulesToInsert) {
+          var styleObject = rulesToInsert[key], identifier = styleObject[import_helpers2.StyleObjectIdentifier];
+          if (shouldInsertStyleRules(identifier)) {
+            var rules = styleObject[import_helpers2.StyleObjectRules];
+            allSelectors[identifier] = rules.join(`
+`), updateRules(identifier, rules), trackInsertedStyle(identifier);
+            var _iteratorNormalCompletion = !0, _didIteratorError = !1, _iteratorError = void 0;
             try {
-              !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
+              for (var _iterator = rules[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0) {
+                var rule = _step.value;
+                if (process.env.NODE_ENV === "production") try {
+                  sheet.insertRule(rule, sheet.cssRules.length);
+                } catch (err) {
+                  console.error("Error inserting CSS", err);
+                }
+                else sheet.insertRule(rule, sheet.cssRules.length);
+              }
+            } catch (err) {
+              _didIteratorError = !0, _iteratorError = err;
             } finally {
-              if (_didIteratorError) throw _iteratorError;
+              try {
+                !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
+              } finally {
+                if (_didIteratorError) throw _iteratorError;
+              }
             }
           }
         }
       }
     }
-    var minInsertAmt = process.env.TAMAGUI_INSERT_SELECTOR_TRIES ? +process.env.TAMAGUI_INSERT_SELECTOR_TRIES : 1;
+    var maxToInsert = process.env.TAMAGUI_INSERT_SELECTOR_TRIES ? +process.env.TAMAGUI_INSERT_SELECTOR_TRIES : 1;
     function shouldInsertStyleRules(identifier) {
       if (process.env.IS_STATIC === "is_static") return !0;
-      var total = totalSelectorsInserted.get(identifier);
-      return process.env.NODE_ENV === "development" && totalSelectorsInserted.size > +(process.env.TAMAGUI_STYLE_INSERTION_WARNING_LIMIT || 1e4) && console.warn('Warning: inserting many CSS rules, you may be animating something and generating many CSS insertions, which can degrade performance. Instead, try using the "disableClassName" property on elements that change styles often. To disable this warning set TAMAGUI_STYLE_INSERTION_WARNING_LIMIT from 50000 to something higher'), total === void 0 || total < minInsertAmt;
+      var total = totalSelectorsInserted.get(identifier) || 0;
+      return process.env.NODE_ENV === "development" && total > +(process.env.TAMAGUI_STYLE_INSERTION_WARNING_LIMIT || 10) && console.warn('Warning: inserting many CSS rules, you may be animating something and generating many CSS insertions, which can degrade performance. Instead, try using the "disableClassName" property on elements that change styles often. To disable this warning set TAMAGUI_STYLE_INSERTION_WARNING_LIMIT from 50000 to something higher'), total < maxToInsert;
     }
   }
 });
@@ -5401,7 +5413,7 @@ var require_getSplitStyles_native = __commonJS({
                 try {
                   for (var _iterator2 = pseudoStyles[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = !0) {
                     var psuedoStyle = _step2.value, fullKey = `${psuedoStyle[import_helpers2.StyleObjectProperty]}${PROP_SPLIT}${descriptor.name}`;
-                    fullKey in usedKeys || (addStyleToInsertRules(rulesToInsert, psuedoStyle, startedUnhydrated), classNames[fullKey] = psuedoStyle[import_helpers2.StyleObjectIdentifier]);
+                    fullKey in usedKeys || (addStyleToInsertRules(rulesToInsert, psuedoStyle), classNames[fullKey] = psuedoStyle[import_helpers2.StyleObjectIdentifier]);
                   }
                 } catch (err) {
                   _didIteratorError2 = !0, _iteratorError2 = err;
@@ -5479,7 +5491,7 @@ var require_getSplitStyles_native = __commonJS({
                       var out = (0, import_createMediaStyle.createMediaStyle)(style3, mediaKeyShort, import_useMedia.mediaQueryConfig, isMedia, !1, priority);
                       process.env.NODE_ENV === "development" && debug === "verbose" && (0, import_log.log)("\u{1F4FA} media style:", out);
                       var subKey = isSubStyle ? style3[2] : "", fullKey1 = `${style3[import_helpers2.StyleObjectProperty]}${subKey}${PROP_SPLIT}${mediaKeyShort}${style3[import_helpers2.StyleObjectPseudo] || ""}`;
-                      fullKey1 in usedKeys || (addStyleToInsertRules(rulesToInsert, out, startedUnhydrated), classNames[fullKey1] = out[import_helpers2.StyleObjectIdentifier]);
+                      fullKey1 in usedKeys || (addStyleToInsertRules(rulesToInsert, out), classNames[fullKey1] = out[import_helpers2.StyleObjectIdentifier]);
                     }
                   }
                 } catch (err) {
@@ -5530,7 +5542,9 @@ var require_getSplitStyles_native = __commonJS({
                   if (groupMediaKey) {
                     mediaGroups || (mediaGroups = /* @__PURE__ */ new Set()), mediaGroups.add(groupMediaKey);
                     var mediaState1 = componentGroupState == null ? void 0 : componentGroupState.media, isActive = mediaState1 == null ? void 0 : mediaState1[groupMediaKey];
-                    if (!mediaState1 && groupContext.layout && (isActive = (0, import_useMedia.mediaKeyMatch)(groupMediaKey, groupContext.layout)), process.env.NODE_ENV === "development" && debug === "verbose" && (0, import_log.log)(` \u{1F3D8}\uFE0F GROUP media ${groupMediaKey} active? ${isActive}`), !isActive) {
+                    if (!mediaState1 && groupContext.layout && (isActive = (0, import_useMedia.mediaKeyMatch)(groupMediaKey, groupContext.layout)), process.env.NODE_ENV === "development" && debug === "verbose" && (0, import_log.log)(` \u{1F3D8}\uFE0F GROUP media ${groupMediaKey} active? ${isActive}`, {
+                      ...mediaState1
+                    }), !isActive) {
                       for (var pkey1 in mediaStyle1) applyDefaultStyle(pkey1, styleState);
                       return;
                     }
@@ -5540,7 +5554,9 @@ var require_getSplitStyles_native = __commonJS({
                     pseudoGroups || (pseudoGroups = /* @__PURE__ */ new Set()), pseudoGroups.add(groupName);
                     var componentGroupPseudoState = (componentGroupState || // fallback to context initially
                     componentContext.groups.state[groupName]).pseudo, isActive1 = componentGroupPseudoState == null ? void 0 : componentGroupPseudoState[groupPseudoKey], priority1 = import_pseudoDescriptors.pseudoPriorities[groupPseudoKey];
-                    if (process.env.NODE_ENV === "development" && debug === "verbose" && (0, import_log.log)(` \u{1F3D8}\uFE0F GROUP pseudo ${groupMediaKey} active? ${isActive1}, priority ${priority1}`), !isActive1) {
+                    if (process.env.NODE_ENV === "development" && debug === "verbose" && (0, import_log.log)(` \u{1F3D8}\uFE0F GROUP pseudo ${groupMediaKey} active? ${isActive1}, priority ${priority1}`, {
+                      ...componentGroupPseudoState
+                    }), !isActive1) {
                       for (var pkey2 in mediaStyle1) applyDefaultStyle(pkey2, styleState);
                       return;
                     }
@@ -5773,7 +5789,6 @@ var require_getSplitStyles_native = __commonJS({
       return res;
     };
     function addStyleToInsertRules(rulesToInsert, styleObject) {
-      var startedUnhydrated = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : !1;
       if (0) var identifier;
     }
     var defaultColor = process.env.TAMAGUI_DEFAULT_COLOR || "rgba(0,0,0,0)", animatableDefaults = {
@@ -6006,23 +6021,20 @@ var require_index_native6 = __commonJS({
     });
     module2.exports = __toCommonJS2(index_exports2);
     var import_react3 = require("react");
-    function useCreateShallowSetState(setter, debugIn) {
+    function useCreateShallowSetState(setter, debug) {
       return (0, import_react3.useCallback)(function(next) {
         setter(function(prev) {
-          return mergeIfNotShallowEqual(prev, next, debugIn);
+          var update = mergeIfNotShallowEqual(prev, next);
+          if (process.env.NODE_ENV === "development" && debug && update !== prev && (console.groupCollapsed("setStateShallow CHANGE", prev, "=>", update), console.trace(), console.groupEnd(), debug === "break")) debugger;
+          return update;
         });
       }, [
         setter,
-        debugIn
+        debug
       ]);
     }
-    function mergeIfNotShallowEqual(prev, next, debug) {
-      if (!prev || !next || isEqualShallow(prev, next)) return prev || next;
-      if (process.env.NODE_ENV === "development" && debug && (console.info("setStateShallow CHANGE", {
-        prev,
-        next
-      }), debug === "break")) debugger;
-      return {
+    function mergeIfNotShallowEqual(prev, next) {
+      return !prev || !next || isEqualShallow(prev, next) ? prev || next : {
         ...prev,
         ...next
       };
@@ -6195,7 +6207,7 @@ var require_useThemeState_native = __commonJS({
         var _keys_current, _props_needsUpdate, local = localStates.get(id), needsUpdate = isRoot || props.name === "light" || props.name === "dark" || props.name === null ? !0 : HasRenderedOnce.get(keys) ? !(keys == null || (_keys_current = keys.current) === null || _keys_current === void 0) && _keys_current.size ? !0 : (_props_needsUpdate = props.needsUpdate) === null || _props_needsUpdate === void 0 ? void 0 : _props_needsUpdate.call(props) : !0, [rerender, next] = getNextState(local, props, propsKey, isRoot, id, parentId, needsUpdate, PendingUpdate.get(id));
         return PendingUpdate.delete(id), (!local || rerender) && (local = {
           ...next
-        }, localStates.set(id, local)), process.env.NODE_ENV === "development" && props.debug && props.debug !== "profile" && (console.groupCollapsed(` ${id} \u{1FA84} ${rerender}`, local.name, ">", next.name), console.info({
+        }, localStates.set(id, local)), process.env.NODE_ENV === "development" && props.debug && props.debug !== "profile" && (console.groupCollapsed(` ${id} getSnapshot ${rerender}`, local.name, ">", next.name), console.info({
           props,
           propsKey,
           isRoot,
@@ -6230,7 +6242,7 @@ var require_useThemeState_native = __commonJS({
       themes || (themes = (0, import_config.getConfig)().themes);
       var name = !propsKey && (!lastState || !(lastState != null && lastState.isNew)) ? null : getNewThemeName(parentState == null ? void 0 : parentState.name, props, pendingUpdate === "force" ? !0 : !!needsUpdate), isSameAsParent = parentState && (!name || name === parentState.name), shouldRerender = !!(needsUpdate && (pendingUpdate || (lastState == null ? void 0 : lastState.name) !== (parentState == null ? void 0 : parentState.name)));
       if (process.env.NODE_ENV === "development" && debug && debug !== "profile") {
-        var message = ` \xB7 useTheme(${id}) => ${name} needsUpdate ${needsUpdate} shouldRerender ${shouldRerender}`;
+        var message = ` \xB7 useTheme(${id}) getNextState => ${name} needsUpdate ${needsUpdate} shouldRerender ${shouldRerender}`;
         console.info(message);
       }
       if (isSameAsParent) return [
@@ -6914,7 +6926,7 @@ var require_wrapStyleTags_native = __commonJS({
     });
     module2.exports = __toCommonJS2(wrapStyleTags_exports);
     var import_jsx_runtime2 = require("react/jsx-runtime"), import_constants = require_index_native2(), import_helpers2 = require_index_native3();
-    function getStyleTags(styles, content) {
+    function getStyleTags(styles) {
       import_constants.IS_REACT_19;
     }
   }
@@ -7103,14 +7115,14 @@ var require_useComponentState_native = __commonJS({
     var import_constants = require_index_native2(), import_is_equal_shallow = require_index_native6(), import_use_did_finish_ssr = require_index_native7(), import_react3 = require("react"), import_defaultComponentState = require_defaultComponentState_native(), import_isObj = require_isObj_native(), import_log = require_log_native(), useComponentState = function(props, param, staticConfig, config) {
       var { animationDriver } = param, _animationDriver_usePresence, isHydrated = (0, import_use_did_finish_ssr.useDidFinishSSR)(), needsHydration = !(0, import_use_did_finish_ssr.useIsClientOnly)(), [startedUnhydrated] = (0, import_react3.useState)(needsHydration && !isHydrated), 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;
+      var hasAnimationProp = !!("animation" in props || props.style && hasAnimatedStyleValue(props.style)), supportsCSS = animationDriver == null ? void 0 : animationDriver.supportsCSS, curStateRef = stateRef.current;
       !needsHydration && hasAnimationProp && (curStateRef.hasAnimated = !0);
       var willBeAnimatedClient = function() {
         var next = !!(hasAnimationProp && !staticConfig.isHOC && useAnimations);
         return !!(next || curStateRef.hasAnimated);
       }(), willBeAnimated = !import_constants.isServer && willBeAnimatedClient;
       willBeAnimated && !curStateRef.hasAnimated && (curStateRef.hasAnimated = !0);
-      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 && !isHydrated && ((animationDriver == null ? void 0 : animationDriver.isReactNative) || !supportsCSSVars), hasEnterState = hasEnterStyle || isEntering, shouldEnter = hasEnterState || hasAnimationThatNeedsHydrate || // disableClassName doesnt work server side, only client, so needs hydrate
+      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 && !isHydrated && ((animationDriver == null ? void 0 : animationDriver.isReactNative) || !supportsCSS), 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
@@ -7124,7 +7136,9 @@ var require_useComponentState_native = __commonJS({
       var states = (0, import_react3.useState)(initialState), state = props.forceStyle ? {
         ...states[0],
         [props.forceStyle]: !0
-      } : states[0], setState = states[1], isAnimated = willBeAnimated;
+      } : states[0], setState = states[1];
+      stateRef.current.nextComponentState && Object.assign(state, stateRef.current.nextComponentState);
+      var isAnimated = willBeAnimated;
       import_constants.isWeb && hasAnimationThatNeedsHydrate && !staticConfig.isHOC && !isHydrated && (isAnimated = !1, curStateRef.willHydrate = !0), disabled !== state.disabled && (disabled && Object.assign(state, import_defaultComponentState.defaultComponentStateMounted), state.disabled = disabled, setState(function(_) {
         return {
           ...state
@@ -7140,7 +7154,7 @@ var require_useComponentState_native = __commonJS({
       }
       var noClass = !import_constants.isWeb || !!props.forceStyle || isAnimated && (animationDriver == null ? void 0 : animationDriver.needsWebStyles);
       if (import_constants.isWeb && (!import_constants.isServer || isHydrated)) {
-        var isAnimatedAndHydrated = isAnimated && !supportsCSSVars, isClassNameDisabled = !staticConfig.acceptsClassName && (config.disableSSR || !state.unmounted), isDisabledManually = disableClassName && !state.unmounted;
+        var isAnimatedAndHydrated = isAnimated && !supportsCSS, 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,
@@ -7167,26 +7181,6 @@ var require_useComponentState_native = __commonJS({
           }
         };
       }
-      if (!curStateRef.stateEmitter && hasAnimationProp) {
-        var listeners1 = /* @__PURE__ */ new Set();
-        curStateRef.stateEmitter = {
-          listeners: listeners1,
-          emit(state2) {
-            listeners1.forEach(function(l) {
-              return l(state2);
-            });
-          },
-          subscribe(cb) {
-            return listeners1.add(cb), setStateShallow({
-              hasDynGroupChildren: !0
-            }), function() {
-              listeners1.delete(cb), listeners1.size === 0 && setStateShallow({
-                hasDynGroupChildren: !1
-              });
-            };
-          }
-        };
-      }
       return {
         startedUnhydrated,
         curStateRef,
@@ -7204,7 +7198,7 @@ var require_useComponentState_native = __commonJS({
         noClass,
         state,
         stateRef,
-        supportsCSSVars,
+        supportsCSS,
         willBeAnimated,
         willBeAnimatedClient
       };
@@ -7436,45 +7430,15 @@ var require_createComponent_native = __commonJS({
       }
     });
     module2.exports = __toCommonJS2(createComponent_exports);
-    var import_jsx_runtime2 = require("react/jsx-runtime"), import_compose_refs = require_index_native4(), import_constants = require_index_native2(), import_helpers2 = require_index_native3(), import_react3 = __toESM2(require("react")), import_config = require_config_native(), import_constants2 = require_constants_native2(), import_isDevTools = require_isDevTools_native(), import_ComponentContext = require_ComponentContext_native(), import_createVariable = require_createVariable_native(), import_defaultComponentState = require_defaultComponentState_native(), import_getShorthandValue = require_getShorthandValue_native(), import_getSplitStyles = require_getSplitStyles_native(), import_log = require_log_native(), import_mergeProps = require_mergeProps_native(), import_setElementProps = require_setElementProps_native(), import_subscribeToContextGroup = require_subscribeToContextGroup_native(), import_themeable = require_themeable_native(), import_wrapStyleTags = require_wrapStyleTags_native(), import_useComponentState = require_useComponentState_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(), time2, debugKeyListeners, startVisualizer, componentSetStates = /* @__PURE__ */ new Set();
-    typeof window < "u" && (cancelTouches = function() {
-      componentSetStates.forEach(function(setState) {
-        return setState(function(prev) {
-          return prev.press || prev.pressIn ? {
-            ...prev,
-            press: !1,
-            pressIn: !1
-          } : prev;
-        });
-      }), componentSetStates.clear();
-    }, addEventListener("mouseup", cancelTouches), addEventListener("touchend", cancelTouches), addEventListener("touchcancel", cancelTouches), process.env.NODE_ENV === "development" && (startVisualizer = function() {
-      var devVisualizerConfig = import_config.devConfig === null || import_config.devConfig === void 0 ? void 0 : import_config.devConfig.visualizer;
-      if (devVisualizerConfig) {
-        var show2 = function(val) {
-          clearTimeout(tm), isShowing = val, debugKeyListeners == null || debugKeyListeners.forEach(function(l) {
-            return l(val);
-          });
-        }, show = show2;
-        debugKeyListeners = /* @__PURE__ */ new Set();
-        var tm, isShowing = !1, options = {
-          key: "Alt",
-          delay: 800,
-          ...typeof devVisualizerConfig == "object" ? devVisualizerConfig : {}
-        };
-        window.addEventListener("blur", function() {
-          show2(!1);
-        }), window.addEventListener("keydown", function(param) {
-          var { key, defaultPrevented } = param;
-          defaultPrevented || (clearTimeout(tm), key === options.key && (tm = setTimeout(function() {
-            show2(!0);
-          }, options.delay)));
-        }), window.addEventListener("keyup", function(param) {
-          var { key, defaultPrevented } = param;
-          defaultPrevented || key === options.key && isShowing && show2(!1);
-        });
-      }
-    }));
-    var cancelTouches, BaseText, BaseView, hasSetupBaseViews = !1, lastInteractionWasKeyboard = {
+    var import_jsx_runtime2 = require("react/jsx-runtime"), import_compose_refs = require_index_native4(), import_constants = require_index_native2(), import_helpers2 = require_index_native3(), import_react3 = __toESM2(require("react")), import_config = require_config_native(), import_constants2 = require_constants_native2(), import_isDevTools = require_isDevTools_native(), import_ComponentContext = require_ComponentContext_native(), import_createVariable = require_createVariable_native(), import_defaultComponentState = require_defaultComponentState_native(), import_getShorthandValue = require_getShorthandValue_native(), import_getSplitStyles = require_getSplitStyles_native(), import_log = require_log_native(), import_mergeProps = require_mergeProps_native(), import_setElementProps = require_setElementProps_native(), import_subscribeToContextGroup = require_subscribeToContextGroup_native(), import_themeable = require_themeable_native(), import_wrapStyleTags = require_wrapStyleTags_native(), import_useComponentState = require_useComponentState_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(), time2, debugKeyListeners, startVisualizer, componentSetStates = /* @__PURE__ */ new Set(), avoidReRenderKeys = /* @__PURE__ */ new Set([
+      "hover",
+      "press",
+      "pressIn",
+      "group",
+      "media"
+    ]);
+    if (0) var cancelTouches;
+    var BaseText, BaseView, hasSetupBaseViews = !1, lastInteractionWasKeyboard = {
       value: !1
     };
     import_constants.isWeb && globalThis.document && (document.addEventListener("keydown", function() {
@@ -7551,7 +7515,7 @@ var require_createComponent_native = __commonJS({
         }, [
           componentName2
         ]);
-        var animationDriver = componentContext.animationDriver, useAnimations = animationDriver == null ? void 0 : animationDriver.useAnimations, componentState = (0, import_useComponentState.useComponentState)(props, componentContext, staticConfig, config), { curStateRef, disabled, groupName, hasAnimationProp, hasEnterStyle, isAnimated, isExiting, isHydrated, presence, presenceState, setState, noClass, state, stateRef, supportsCSSVars, willBeAnimated, willBeAnimatedClient, startedUnhydrated } = componentState, setStateShallow = componentState.setStateShallow;
+        var animationDriver = componentContext.animationDriver, useAnimations = animationDriver == null ? void 0 : animationDriver.useAnimations, componentState = (0, import_useComponentState.useComponentState)(props, componentContext, staticConfig, config), { curStateRef, disabled, groupName, hasAnimationProp, hasEnterStyle, isAnimated, isExiting, isHydrated, presence, presenceState, setState, noClass, state, stateRef, supportsCSS, willBeAnimated, willBeAnimatedClient, startedUnhydrated } = componentState, setStateShallow = componentState.setStateShallow;
         process.env.NODE_ENV === "development" && time2 && time2`use-state`;
         var hasTextAncestor = !!(import_constants.isWeb && isText && componentContext.inText), isTaggable = !Component || typeof Component == "string", tagProp = props.tag, element = import_constants.isWeb && isTaggable && tagProp || Component, BaseTextComponent = BaseText || element || "span", BaseViewComponent = BaseView || element || (hasTextAncestor ? "span" : "div"), elementType = isText ? BaseTextComponent : BaseViewComponent;
         animationDriver && isAnimated && // this should really be behind another prop as it's not really related to
@@ -7575,7 +7539,7 @@ var require_createComponent_native = __commonJS({
             noClass,
             isAnimated,
             isWeb: import_constants.isWeb,
-            supportsCSSVars
+            supportsCSS
           });
           else {
             console.groupEnd();
@@ -7604,7 +7568,7 @@ var require_createComponent_native = __commonJS({
         (0, import_createVariable.setDidGetVariableValue)(!1), process.env.NODE_ENV === "development" && time2 && time2`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"
+          isAnimated && !supportsCSS || isHOC && state.unmounted == !1 && hasAnimationProp ? "value" : "auto"
         ), styleProps = {
           mediaState: mediaState2,
           noClass,
@@ -7620,18 +7584,19 @@ var require_createComponent_native = __commonJS({
         if (hasAnimationProp && animationDriver != null && animationDriver.avoidReRenders) {
           var styleListener = stateRef.current.useStyleListener, ogSetStateShallow = setStateShallow;
           setStateShallow = function(next) {
-            var avoidReRenderKeys = /* @__PURE__ */ new Set([
-              "hover",
-              "press",
-              "pressIn"
-            ]), canAvoidReRender = Object.keys(next).every(function(key3) {
+            var canAvoidReRender = Object.keys(next).every(function(key3) {
               return avoidReRenderKeys.has(key3);
             });
             if (canAvoidReRender && styleListener) {
-              var updatedState = {
+              var _curStateRef_group, _curStateRef_group1, updatedState = {
                 ...state,
                 ...next
-              }, nextStyles = (0, import_getSplitStyles.getSplitStyles)(props, staticConfig, theme, themeName, updatedState, styleProps, null, componentContext, elementType, startedUnhydrated, debugProp);
+              };
+              (_curStateRef_group1 = curStateRef.group) === null || _curStateRef_group1 === void 0 || _curStateRef_group1.emit(groupName, {
+                pseudo: updatedState,
+                layout: (_curStateRef_group = curStateRef.group) === null || _curStateRef_group === void 0 ? void 0 : _curStateRef_group.layout
+              }), stateRef.current.nextComponentState = updatedState;
+              var nextStyles = (0, import_getSplitStyles.getSplitStyles)(props, staticConfig, theme, themeName, updatedState, styleProps, null, componentContext, elementType, startedUnhydrated, debugProp);
               styleListener(nextStyles.style);
             } else ogSetStateShallow(next);
           };
@@ -7671,7 +7636,7 @@ var require_createComponent_native = __commonJS({
         !isTaggable && props.forceStyle && (viewProps.forceStyle = props.forceStyle), isHOC && _themeProp && (viewProps.theme = _themeProp), tagProp && elementType.acceptTagProp && (viewProps.tag = tagProp);
         var animationStyles, shouldUseAnimation = (
           // if it supports css vars we run it on server too to get matching initial style
-          (supportsCSSVars ? willBeAnimatedClient : willBeAnimated) && useAnimations && !isHOC
+          (supportsCSS ? willBeAnimatedClient : willBeAnimated) && useAnimations && !isHOC
         ), animatedRef;
         if (shouldUseAnimation) {
           var useStyleEmitter = animationDriver != null && animationDriver.avoidReRenders ? function(listener) {
@@ -7728,7 +7693,7 @@ If you meant to do this, you can disable this warning - either change untilMeasu
             console.groupCollapsed(`Rendered > (opacity: ${computed.opacity})`), console.warn(stateRef.current.host), console.warn(computed), console.groupEnd();
           }
         }), (0, import_constants.useIsomorphicLayoutEffect)(function() {
-          if (state.unmounted === !0 && hasEnterStyle) {
+          if (stateRef.current.nextComponentState = void 0, state.unmounted === !0 && hasEnterStyle) {
             setStateShallow({
               unmounted: "should-enter"
             });
@@ -7736,8 +7701,7 @@ If you meant to do this, you can disable this warning - either change untilMeasu
           }
           var tm;
           if (state.unmounted) {
-            var _config_animations2, _animationDriver_supportsCSSVars;
-            if (((_animationDriver_supportsCSSVars = animationDriver == null ? void 0 : animationDriver.supportsCSSVars) !== null && _animationDriver_supportsCSSVars !== void 0 ? _animationDriver_supportsCSSVars : !(config == null || (_config_animations2 = config.animations) === null || _config_animations2 === void 0) && _config_animations2.supportsCSSVars) || import_constants.isAndroid) return tm = setTimeout(function() {
+            if (animationDriver != null && animationDriver.supportsCSS || import_constants.isAndroid) return tm = setTimeout(function() {
               setStateShallow({
                 unmounted: !1
               });
@@ -10322,7 +10286,7 @@ var require_TamaguiProvider_native = __commonJS({
       }
     });
     module2.exports = __toCommonJS2(TamaguiProvider_exports);
-    var import_jsx_runtime2 = require("react/jsx-runtime"), import_constants = require_index_native2(), import_use_did_finish_ssr = require_index_native7(), 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_runtime2 = require("react/jsx-runtime"), import_constants = require_index_native2(), import_use_did_finish_ssr = require_index_native7(), 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(), import_insertStyleRule = require_insertStyleRule_native();
     function TamaguiProvider2(param) {
       var { children, disableInjectCSS, config, className, defaultTheme, disableRootThemeClass, reset, themeClassNameOnRoot } = param;
       import_constants.IS_REACT_19 || import_constants.isClient && (0, import_constants.useIsomorphicLayoutEffect)(function() {
@@ -10336,7 +10300,7 @@ var require_TamaguiProvider_native = __commonJS({
         config,
         disableInjectCSS
       ]), (0, import_constants.useIsomorphicLayoutEffect)(function() {
-        (0, import_useMedia.updateMediaListeners)();
+        (0, import_insertStyleRule.stopAccumulatingRules)(), (0, import_useMedia.updateMediaListeners)();
       }, []);
       var contents = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(UnmountedClassName, {
         children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ComponentContext.ComponentContext.Provider, {
@@ -12235,49 +12199,51 @@ var require_index_native12 = __commonJS({
         return cb();
       }), queuedUpdates.clear()));
     }
+    var expectedFrameTime = 16.67, numDroppedFramesUntilPause = 10;
     if (import_constants.isClient) if (rAF) {
       layoutOnAnimationFrame = function() {
         var now = Date.now(), timeSinceLastFrame = now - lastFrameAt;
-        if (lastFrameAt = now, strategy !== "off") {
-          var expectedFrameTime = 16.67, hasRecentSyncWork = timeSinceLastFrame > expectedFrameTime * numDroppedFramesUntilPause;
+        if (lastFrameAt = now, frameCount < runEveryXFrames) {
+          frameCount++, rAF(layoutOnAnimationFrame);
+          return;
+        }
+        if (frameCount = 0, strategy !== "off") {
+          var hasRecentSyncWork = timeSinceLastFrame > expectedFrameTime * numDroppedFramesUntilPause;
           hasRecentSyncWork || Nodes.forEach(function(node) {
             updateLayoutIfChanged(node, lastFrameAt);
           });
         }
         rAF(layoutOnAnimationFrame);
-      }, layoutOnAnimationFrame2 = layoutOnAnimationFrame, lastFrameAt = Date.now(), numDroppedFramesUntilPause = 2;
+      }, layoutOnAnimationFrame2 = layoutOnAnimationFrame, lastFrameAt = Date.now();
       async function updateLayoutIfChanged(node, frameId) {
-        var parentNode = node.parentElement, nodeRect, parentRect;
-        if (strategy === "async") {
-          var [nr, pr] = await Promise.all([
-            getBoundingClientRectAsync(node),
-            getBoundingClientRectAsync(parentNode)
-          ]);
-          if (frameId !== lastFrameAt) return;
-          nodeRect = nr, parentRect = pr;
-        } else nodeRect = node.getBoundingClientRect(), parentRect = parentNode == null ? void 0 : parentNode.getBoundingClientRect();
-        if (parentRect) {
-          var onLayout = LayoutHandlers.get(node);
-          if (typeof onLayout == "function") {
-            var cachedRect = NodeRectCache.get(node), cachedParentRect = parentNode ? NodeRectCache.get(parentNode) : null;
+        var onLayout = LayoutHandlers.get(node);
+        if (typeof onLayout == "function") {
+          var parentNode = node.parentElement;
+          if (parentNode) {
+            var nodeRect, parentRect;
+            if (strategy === "async") {
+              var [nr, pr] = await Promise.all([
+                getBoundingClientRectAsync(node),
+                getBoundingClientRectAsync(parentNode)
+              ]);
+              if (frameId !== lastFrameAt) return;
+              nodeRect = nr, parentRect = pr;
+            } else nodeRect = node.getBoundingClientRect(), parentRect = parentNode.getBoundingClientRect();
+            var cachedRect = NodeRectCache.get(node), cachedParentRect = NodeRectCache.get(parentNode);
             if (!cachedRect || // has changed one rect
             !(0, import_is_equal_shallow.isEqualShallow)(cachedRect, nodeRect) && (!cachedParentRect || !(0, import_is_equal_shallow.isEqualShallow)(cachedParentRect, parentRect))) {
-              if (NodeRectCache.set(node, nodeRect), parentRect && parentNode && ParentRectCache.set(parentNode, parentRect), avoidUpdates) {
-                var event = getElementLayoutEvent(nodeRect, parentRect);
-                queuedUpdates.set(node, function() {
-                  return onLayout(event);
-                });
-              } else if (strategy !== "async") {
-                var event1 = getElementLayoutEvent(nodeRect, parentRect);
-                onLayout(event1);
-              }
+              NodeRectCache.set(node, nodeRect), ParentRectCache.set(parentNode, parentRect);
+              var event = getElementLayoutEvent(nodeRect, parentRect);
+              avoidUpdates ? queuedUpdates.set(node, function() {
+                return onLayout(event);
+              }) : onLayout(event);
             }
           }
         }
       }
-      rAF(layoutOnAnimationFrame);
+      rAF(layoutOnAnimationFrame), frameCount = 0, runEveryXFrames = 6;
     } else process.env.NODE_ENV === "development" && console.warn("No requestAnimationFrame - please polyfill for onLayout to work correctly");
-    var layoutOnAnimationFrame, layoutOnAnimationFrame2, lastFrameAt, numDroppedFramesUntilPause, getElementLayoutEvent = function(nodeRect, parentRect) {
+    var layoutOnAnimationFrame, layoutOnAnimationFrame2, lastFrameAt, frameCount, runEveryXFrames, getElementLayoutEvent = function(nodeRect, parentRect) {
       return {
         nativeEvent: {
           layout: getRelativeDimensions(nodeRect, parentRect),