@tamagui/core 1.129.12 → 1.129.14

package/dist/native.js

@@ -1882,39 +1882,39 @@ var require_pseudoDescriptors_native = __commonJS({
       // order of keys here important! in priority order
       hoverStyle: {
         name: "hover",
-        priority: 1
+        priority: 2
       },
       pressStyle: {
         name: "active",
         stateKey: "press",
-        priority: 2
+        priority: 3
       },
       focusVisibleStyle: {
         name: "focus-visible",
-        priority: 3,
+        priority: 4,
         stateKey: "focusVisible"
       },
       focusStyle: {
         name: "focus",
-        priority: 3
+        priority: 4
       },
       focusWithinStyle: {
         name: "focus-within",
-        priority: 3,
+        priority: 4,
         stateKey: "focusWithin"
       },
       disabledStyle: {
         name: "disabled",
-        priority: 4,
+        priority: 5,
         stateKey: "disabled"
       }
     }, pseudoPriorities = {
-      hover: 1,
-      press: 2,
-      focus: 3,
-      focusVisible: 3,
-      focusWithin: 3,
-      disabled: 4
+      hover: pseudoDescriptorsBase.hoverStyle.priority,
+      press: pseudoDescriptorsBase.pressStyle.priority,
+      focus: pseudoDescriptorsBase.focusStyle.priority,
+      focusVisible: pseudoDescriptorsBase.focusVisibleStyle.priority,
+      focusWithin: pseudoDescriptorsBase.focusWithinStyle.priority,
+      disabled: pseudoDescriptorsBase.disabledStyle.priority
     }, pseudoDescriptors = {
       ...pseudoDescriptorsBase,
       enterStyle: {
@@ -2159,9 +2159,9 @@ var require_useMedia_native = __commonJS({
       }
       return res;
     }
-    var getMediaImportanceIfMoreImportant = function(mediaKey, key, importancesUsed, isSizeMedia) {
-      var importance = isSizeMedia && !(0, import_config.getSetting)("mediaPropOrder") ? getMediaKeyImportance(mediaKey) : defaultMediaImportance;
-      return !importancesUsed[key] || importance > importancesUsed[key] ? importance : null;
+    var getMediaImportanceIfMoreImportant = function(mediaKey, key, styleState, isSizeMedia) {
+      var importance = isSizeMedia && !(0, import_config.getSetting)("mediaPropOrder") ? getMediaKeyImportance(mediaKey) : defaultMediaImportance, usedKeys = styleState.usedKeys;
+      return !usedKeys[key] || importance > usedKeys[key] ? importance : null;
     };
     function camelToHyphen(str) {
       return str.replace(/[A-Z]/g, function(m) {
@@ -2450,6 +2450,81 @@ var require_index_native4 = __commonJS({
   }
 });
 
+// ../../packages/is-equal-shallow/dist/cjs/index.native.js
+var require_index_native5 = __commonJS({
+  "../../packages/is-equal-shallow/dist/cjs/index.native.js"(exports2, module2) {
+    "use strict";
+    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __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;
+    }, __toCommonJS2 = function(mod) {
+      return __copyProps2(__defProp2({}, "__esModule", {
+        value: !0
+      }), mod);
+    }, index_exports2 = {};
+    __export2(index_exports2, {
+      isEqualShallow: function() {
+        return isEqualShallow;
+      },
+      mergeIfNotShallowEqual: function() {
+        return mergeIfNotShallowEqual;
+      },
+      useCreateShallowSetState: function() {
+        return useCreateShallowSetState;
+      }
+    });
+    module2.exports = __toCommonJS2(index_exports2);
+    var import_react3 = require("react");
+    function useCreateShallowSetState(setter, debug) {
+      return (0, import_react3.useCallback)(function(stateOrGetState) {
+        setter(function(prev) {
+          var next = typeof stateOrGetState == "function" ? stateOrGetState(prev) : stateOrGetState, update = mergeIfNotShallowEqual(prev, next);
+          if (process.env.NODE_ENV === "development" && debug && update !== prev && (console.groupCollapsed("setStateShallow CHANGE", "=>", update), console.info("previously", prev), console.trace(), console.groupEnd(), debug === "break")) debugger;
+          return update;
+        });
+      }, [
+        setter,
+        debug
+      ]);
+    }
+    function mergeIfNotShallowEqual(prev, next) {
+      return !prev || !next || isEqualShallow(prev, next) ? prev || next : {
+        ...prev,
+        ...next
+      };
+    }
+    function isEqualShallow(prev, next) {
+      for (var key in next) if (prev[key] !== next[key]) return !1;
+      return !0;
+    }
+  }
+});
+
 // ../web/dist/cjs/constants/isDevTools.native.js
 var require_isDevTools_native = __commonJS({
   "../web/dist/cjs/constants/isDevTools.native.js"(exports2, module2) {
@@ -2697,13 +2772,55 @@ var require_ComponentContext_native = __commonJS({
       inText: !1,
       language: null,
       animationDriver: null,
-      setParentFocusState: null,
-      groups: {
-        emit: null,
-        subscribe: null,
-        state: {}
+      setParentFocusState: null
+    });
+  }
+});
+
+// ../web/dist/cjs/contexts/GroupContext.native.js
+var require_GroupContext_native = __commonJS({
+  "../web/dist/cjs/contexts/GroupContext.native.js"(exports2, module2) {
+    "use strict";
+    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __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;
+    }, __toCommonJS2 = function(mod) {
+      return __copyProps2(__defProp2({}, "__esModule", {
+        value: !0
+      }), mod);
+    }, GroupContext_exports = {};
+    __export2(GroupContext_exports, {
+      GroupContext: function() {
+        return GroupContext;
       }
     });
+    module2.exports = __toCommonJS2(GroupContext_exports);
+    var import_react3 = require("react"), GroupContext = /* @__PURE__ */ (0, import_react3.createContext)(null);
   }
 });
 
@@ -3612,7 +3729,7 @@ var require_normalize_color = __commonJS({
 });
 
 // ../normalize-css-color/dist/cjs/index.native.js
-var require_index_native5 = __commonJS({
+var require_index_native6 = __commonJS({
   "../normalize-css-color/dist/cjs/index.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) {
@@ -3735,7 +3852,7 @@ var require_normalizeColor_native = __commonJS({
       }
     });
     module2.exports = __toCommonJS2(normalizeColor_exports);
-    var import_normalize_css_color = require_index_native5(), import_normalize_css_color2 = require_index_native5(), normalizeColor = function(color, opacity) {
+    var import_normalize_css_color = require_index_native6(), import_normalize_css_color2 = require_index_native6(), normalizeColor = function(color, opacity) {
       if (color) {
         if (color[0] === "$") return color;
         if (color.startsWith("var(")) {
@@ -5311,7 +5428,7 @@ var require_getSplitStyles_native = __commonJS({
     function isValidStyleKey(key, validStyles2, accept) {
       return key in validStyles2 ? !0 : accept && key in accept;
     }
-    var getSplitStyles = function(props, staticConfig, theme, themeName, componentState, styleProps, parentSplitStyles, componentContext, elementType, startedUnhydrated, debug) {
+    var getSplitStyles = function(props, staticConfig, theme, themeName, componentState, styleProps, parentSplitStyles, componentContext, groupContext, elementType, startedUnhydrated, debug) {
       var _loop = function(keyOg2) {
         var keyInit = keyOg2, valInit = props[keyInit];
         if (keyInit === "children") return viewProps[keyInit] = valInit, "continue";
@@ -5320,12 +5437,12 @@ var require_getSplitStyles_native = __commonJS({
           var accepted = accept[keyInit];
           if ((accepted === "style" || accepted === "textStyle") && valInit && typeof valInit == "object") return viewProps[keyInit] = getSubStyle(styleState, keyInit, valInit, styleProps.noClass), "continue";
         }
-        if (process.env.NODE_ENV, disableExpandShorthands || keyInit in shorthands && (keyInit = shorthands[keyInit]), keyInit === "className" || keyInit in usedKeys) return "continue";
+        if (process.env.NODE_ENV, disableExpandShorthands || keyInit in shorthands && (keyInit = shorthands[keyInit]), keyInit === "className") return "continue";
         if (keyInit in import_skipProps.skipProps && !noSkip && !isHOC) {
           if (keyInit === "group" && !1) var identifier2, containerType, containerCSS;
           return "continue";
         }
-        var valInitType = typeof valInit, isValidStyleKeyInit = isValidStyleKey(keyInit, validStyles2, accept);
+        var isValidStyleKeyInit = isValidStyleKey(keyInit, validStyles2, accept);
         if (0) var _viewProps2, _dataSet;
         if (!isValidStyleKeyInit) {
           if (!import_constants.isAndroid && keyInit === "elevationAndroid") return "continue";
@@ -5339,13 +5456,13 @@ var require_getSplitStyles_native = __commonJS({
         if (0) var didUseKeyInit;
         var isVariant = !isValidStyleKeyInit && variants && keyInit in variants, isStyleLikeKey = isValidStyleKeyInit || isVariant, isPseudo = keyInit in import_helpers2.validPseudoKeys, isMedia = !isStyleLikeKey && !isPseudo && (0, import_useMedia.isMediaKey)(keyInit), isMediaOrPseudo = !!(isMedia || isPseudo);
         if (isMediaOrPseudo && keyInit.startsWith("$group-")) {
-          var parts = keyInit.split("-");
+          var parts = keyInit.split("-"), plen = parts.length;
           if (
             // check if its actually a simple group selector to avoid breaking selectors
-            parts.length === 2 || parts.length === 3 && import_pseudoDescriptors.pseudoPriorities[parts[parts.length - 1]]
+            plen === 2 || plen === 3 && import_pseudoDescriptors.pseudoPriorities[parts[parts.length - 1]]
           ) {
             var name2 = parts[1];
-            componentContext != null && componentContext.groups.subscribe && !(componentContext != null && componentContext.groups.state[name2]) && (keyInit = keyInit.replace("$group-", "$group-true-"));
+            groupContext && !(groupContext != null && groupContext[name2]) && (keyInit = keyInit.replace("$group-", "$group-true-"));
           }
         }
         var isStyleProp = isValidStyleKeyInit || isMediaOrPseudo || isVariant && !noExpand;
@@ -5361,6 +5478,9 @@ var require_getSplitStyles_native = __commonJS({
           variant: variants == null ? void 0 : variants[keyInit],
           isVariant,
           isHOCShouldPassThrough,
+          usedKeys: {
+            ...styleState.usedKeys
+          },
           parentStaticConfig
         })), shouldPassThrough && (passDownProp(viewProps, keyInit, valInit, isMediaOrPseudo), !isVariant) || !noSkip && keyInit in import_skipProps.skipProps) return "continue";
         (isText || isInput) && valInit && (keyInit === "fontFamily" || keyInit === shorthands.fontFamily) && valInit in conf.fontsParsed && (styleState.fontFamily = valInit);
@@ -5371,13 +5491,13 @@ var require_getSplitStyles_native = __commonJS({
             viewProps[key4] = val2;
             return;
           }
-          if (process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupCollapsed("  \u{1F4A0} expanded", keyInit, "=>", key4), (0, import_log.log)(val2), console.groupEnd()), val2 != null && !(key4 in usedKeys)) {
+          if (process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupCollapsed("  \u{1F4A0} expanded", keyInit, "=>", key4), (0, import_log.log)(val2), console.groupEnd()), val2 != null) {
             if (key4 === "pointerEvents") {
               viewProps[key4] = val2;
               return;
             }
             if (!isHOC && isValidStyleKey(key4, validStyles2, accept) || import_constants.isAndroid && key4 === "elevation") {
-              mergeStyle(styleState, key4, val2);
+              mergeStyle(styleState, key4, val2, 1);
               return;
             }
             if (isPseudo = key4 in import_helpers2.validPseudoKeys, isMedia = !isPseudo && (0, import_useMedia.isMediaKey)(key4), isMediaOrPseudo = !!(isMedia || isPseudo), isVariant = variants && key4 in variants, inlineProps != null && inlineProps.has(key4) || process.env.IS_STATIC === "is_static" && inlineWhenUnflattened != null && inlineWhenUnflattened.has(key4)) {
@@ -5413,7 +5533,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), classNames[fullKey] = psuedoStyle[import_helpers2.StyleObjectIdentifier]);
+                    addStyleToInsertRules(rulesToInsert, psuedoStyle), classNames[fullKey] = psuedoStyle[import_helpers2.StyleObjectIdentifier];
                   }
                 } catch (err) {
                   _didIteratorError2 = !0, _iteratorError2 = err;
@@ -5440,13 +5560,13 @@ var require_getSplitStyles_native = __commonJS({
                   var _$val = pseudoStyleObject[pkey];
                   if (isDisabled) applyDefaultStyle(pkey, styleState);
                   else {
-                    var curImportance = usedKeys[pkey] || 0, shouldMerge = importance >= curImportance;
+                    var curImportance = styleState.usedKeys[pkey] || 0, shouldMerge = importance >= curImportance;
                     if (shouldMerge) {
                       if (process.env.IS_STATIC === "is_static") {
                         var _pseudos1, _key1;
                         pseudos || (pseudos = {}), (_pseudos1 = pseudos)[_key1 = key4] || (_pseudos1[_key1] = {}), pseudos[key4][pkey] = _$val;
                       }
-                      mergeStyle(styleState, pkey, _$val);
+                      mergeStyle(styleState, pkey, _$val, importance);
                     }
                     process.env.NODE_ENV === "development" && debug === "verbose" && (0, import_log.log)("    subKey", pkey, shouldMerge, {
                       importance,
@@ -5458,7 +5578,7 @@ var require_getSplitStyles_native = __commonJS({
                 }
                 if (!isDisabled) for (var _$key in val2) {
                   var k = shorthands[_$key] || _$key;
-                  usedKeys[k] = Math.max(importance, usedKeys[k] || 0);
+                  styleState.usedKeys[k] = Math.max(importance, styleState.usedKeys[k] || 0);
                 }
               }
               return;
@@ -5467,7 +5587,7 @@ var require_getSplitStyles_native = __commonJS({
               if (!val2) return;
               var hasSpace = val2.space, mediaKeyShort = key4.slice(isMedia == "theme" ? 7 : 1);
               if (hasMedia || (hasMedia = !0), (hasSpace || !shouldDoClasses || styleProps.willBeAnimated) && ((!hasMedia || typeof hasMedia == "boolean") && (hasMedia = /* @__PURE__ */ new Set()), hasMedia.add(mediaKeyShort)), isMedia === "platform" && !(0, import_isActivePlatform.isActivePlatform)(key4)) return;
-              if (process.env.NODE_ENV === "development" && debug === "verbose" && (0, import_log.log)(`  \u{1F4FA} ${key4}`, {
+              process.env.NODE_ENV === "development" && debug === "verbose" && (0, import_log.log)(`  \u{1F4FA} ${key4}`, {
                 key: key4,
                 val: val2,
                 props,
@@ -5475,15 +5595,15 @@ var require_getSplitStyles_native = __commonJS({
                 acceptsClassName,
                 componentState,
                 mediaState: mediaState2
-              }), shouldDoClasses) {
+              });
+              var priority = mediaStylesSeen;
+              if (mediaStylesSeen += 1, shouldDoClasses) {
                 var mediaStyle = getSubStyle(styleState, key4, val2, !1);
                 if (hasSpace && (delete mediaStyle.space, mediaState2[mediaKeyShort])) {
-                  var importance1 = (0, import_useMedia.getMediaImportanceIfMoreImportant)(mediaKeyShort, "space", usedKeys, !0);
-                  importance1 && (space = val2.space, usedKeys.space = importance1, process.env.NODE_ENV === "development" && debug === "verbose" && (0, import_log.log)(`Found more important space for current media ${mediaKeyShort}: ${val2} (importance: ${importance1})`));
+                  var importance1 = (0, import_useMedia.getMediaImportanceIfMoreImportant)(mediaKeyShort, "space", styleState, !0);
+                  importance1 && (space = val2.space, styleState.usedKeys.space = importance1, process.env.NODE_ENV === "development" && debug === "verbose" && (0, import_log.log)(`Found more important space for current media ${mediaKeyShort}: ${val2} (importance: ${importance1})`));
                 }
-                var mediaStyles = (0, import_getCSSStylesAtomic.getCSSStylesAtomic)(mediaStyle), priority = mediaStylesSeen;
-                mediaStylesSeen += 1;
-                var _iteratorNormalCompletion12 = !0, _didIteratorError12 = !1, _iteratorError12 = void 0;
+                var mediaStyles = (0, import_getCSSStylesAtomic.getCSSStylesAtomic)(mediaStyle), _iteratorNormalCompletion12 = !0, _didIteratorError12 = !1, _iteratorError12 = void 0;
                 try {
                   for (var _iterator12 = mediaStyles[Symbol.iterator](), _step12; !(_iteratorNormalCompletion12 = (_step12 = _iterator12.next()).done); _iteratorNormalCompletion12 = !0) {
                     var style3 = _step12.value, property = style3[import_helpers2.StyleObjectProperty], isSubStyle = property[0] === "$";
@@ -5491,7 +5611,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), classNames[fullKey1] = out[import_helpers2.StyleObjectIdentifier]);
+                      addStyleToInsertRules(rulesToInsert, out), classNames[fullKey1] = out[import_helpers2.StyleObjectIdentifier];
                     }
                   }
                 } catch (err) {
@@ -5507,7 +5627,7 @@ var require_getSplitStyles_native = __commonJS({
                 var mergeMediaStyle2 = function(key5, val3) {
                   var _styleState4;
                   (_styleState4 = styleState).style || (_styleState4.style = {});
-                  var didMerge = mergeMediaByImportance(styleState, mediaKeyShort, key5, val3, usedKeys, mediaState2[mediaKeyShort], importanceBump, debug);
+                  var didMerge = mergeMediaByImportance(styleState, mediaKeyShort, key5, val3, mediaState2[mediaKeyShort], importanceBump, debug);
                   didMerge && key5 === "fontFamily" && (styleState.fontFamily = mediaStyle1.fontFamily);
                 }, mergeMediaStyle = mergeMediaStyle2, isThemeMedia = isMedia === "theme", isGroupMedia = isMedia === "group", isPlatformMedia = isMedia === "platform";
                 if (!isThemeMedia && !isPlatformMedia && !isGroupMedia) {
@@ -5529,12 +5649,12 @@ var require_getSplitStyles_native = __commonJS({
                         scheme,
                         val: _$val1,
                         oppositeVal
-                      }), mergeStyle(styleState, subKey1, mediaStyle1[subKey1]);
+                      }), mergeStyle(styleState, subKey1, mediaStyle1[subKey1], priority);
                     }
                   } else if (!(themeName === mediaKeyShort || themeName.startsWith(mediaKeyShort))) return;
                 } else if (isGroupMedia) {
-                  var _componentState_group, groupInfo = (0, import_getGroupPropParts.getGroupPropParts)(mediaKeyShort), groupName = groupInfo.name, groupContext = componentContext == null ? void 0 : componentContext.groups.state[groupName];
-                  if (!groupContext) {
+                  var _groupContext_groupName, _componentState_group, groupInfo = (0, import_getGroupPropParts.getGroupPropParts)(mediaKeyShort), groupName = groupInfo.name, groupState = groupContext == null || (_groupContext_groupName = groupContext[groupName]) === null || _groupContext_groupName === void 0 ? void 0 : _groupContext_groupName.state;
+                  if (!groupState) {
                     process.env.NODE_ENV === "development" && debug && (0, import_log.log)(`No parent with group prop, skipping styles: ${groupName}`);
                     return;
                   }
@@ -5542,17 +5662,30 @@ 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 && groupState.layout && (isActive = (0, import_useMedia.mediaKeyMatch)(groupMediaKey, groupState.layout)), process.env.NODE_ENV === "development" && debug === "verbose" && (0, import_log.log)(` \u{1F3D8}\uFE0F GROUP media ${groupMediaKey} active? ${isActive}`, {
+                      ...mediaState1,
+                      usedKeys: {
+                        ...styleState.usedKeys
+                      }
+                    }), !isActive) {
                       for (var pkey1 in mediaStyle1) applyDefaultStyle(pkey1, styleState);
                       return;
                     }
                     importanceBump = 2;
                   }
                   if (groupPseudoKey) {
+                    var _this;
                     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) {
+                    var componentGroupPseudoState = (_this = componentGroupState || // fallback to context initially
+                    (groupContext == null ? void 0 : groupContext[groupName].state)) === null || _this === void 0 ? void 0 : _this.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}`, {
+                      componentGroupPseudoState: {
+                        ...componentGroupPseudoState
+                      },
+                      usedKeys: {
+                        ...styleState.usedKeys
+                      }
+                    }), !isActive1) {
                       for (var pkey2 in mediaStyle1) applyDefaultStyle(pkey2, styleState);
                       return;
                     }
@@ -5583,6 +5716,8 @@ var require_getSplitStyles_native = __commonJS({
               ...styleState.style
             }), (0, import_log.log)("viewProps", {
               ...viewProps
+            }), (0, import_log.log)("transforms", {
+              ...styleState.flatTransforms
             });
           } catch {
           }
@@ -5592,7 +5727,7 @@ var require_getSplitStyles_native = __commonJS({
       conf = conf || (0, import_config.getConfig)();
       var animationDriver = (componentContext == null ? void 0 : componentContext.animationDriver) || conf.animations;
       import_constants.isWeb && styleProps.isAnimated && animationDriver.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_constants.isWeb && !styleProps.noClass && !styleProps.isAnimated, rulesToInsert = void 0, classNames = {}, pseudos = null, space = props.space, hasMedia = !1, dynamicThemeAccess, pseudoGroups, mediaGroups, className = props.className || "", mediaStylesSeen = 0, validStyles2 = staticConfig.validStyles || (staticConfig.isText || staticConfig.isInput ? import_helpers2.stylePropsText : import_helpers2.validStyles);
+      var { shorthands } = conf, { isHOC, isText, isInput, variants, isReactNative, inlineProps, inlineWhenUnflattened, parentStaticConfig, acceptsClassName } = staticConfig, viewProps = {}, mediaState2 = styleProps.mediaState || import_useMedia.mediaState, shouldDoClasses = acceptsClassName && import_constants.isWeb && !styleProps.noClass && !styleProps.isAnimated, rulesToInsert = void 0, classNames = {}, pseudos = null, space = props.space, hasMedia = !1, dynamicThemeAccess, pseudoGroups, mediaGroups, className = props.className || "", mediaStylesSeen = 0, validStyles2 = staticConfig.validStyles || (staticConfig.isText || staticConfig.isInput ? import_helpers2.stylePropsText : import_helpers2.validStyles);
       process.env.NODE_ENV === "development" && debug === "profile" && time`split-styles-setup`;
       var styleState = {
         classNames,
@@ -5603,7 +5738,7 @@ var require_getSplitStyles_native = __commonJS({
         staticConfig,
         style: null,
         theme,
-        usedKeys,
+        usedKeys: {},
         viewProps,
         context: componentContext,
         debug
@@ -5616,7 +5751,7 @@ var require_getSplitStyles_native = __commonJS({
           }
         }));
       }
-      process.env.NODE_ENV === "development" && debug === "profile" && time`style-state`, process.env.NODE_ENV === "development" && debug && debug !== "profile" && import_constants.isClient && (console.groupCollapsed("getSplitStyles (collapsed)"), (0, import_log.log)({
+      process.env.NODE_ENV === "development" && debug === "profile" && time`style-state`, process.env.NODE_ENV === "development" && debug && debug !== "profile" && import_constants.isClient && import_isDevTools.isDevTools && (console.groupCollapsed("\u{1F539} getSplitStyles \u{1F447}"), (0, import_log.log)({
         props,
         staticConfig,
         shouldDoClasses,
@@ -5627,7 +5762,7 @@ var require_getSplitStyles_native = __commonJS({
         theme: {
           ...theme
         }
-      }), console.groupEnd());
+      }));
       var { asChild } = props, { accept } = staticConfig, { noSkip, disableExpandShorthands, noExpand } = styleProps, { webContainerType } = conf.settings, parentVariants = parentStaticConfig == null ? void 0 : parentStaticConfig.variants;
       for (var keyOg in props) _loop(keyOg);
       process.env.NODE_ENV === "development" && debug === "profile" && time`split-styles-propsend`;
@@ -5709,8 +5844,8 @@ var require_getSplitStyles_native = __commonJS({
           }
         } else style2 && (viewProps.style = style2);
       }
-      if (process.env.NODE_ENV === "development" && debug === "verbose" && import_isDevTools.isDevTools) {
-        console.groupCollapsed("\u{1F539} getSplitStyles ===>");
+      if (process.env.NODE_ENV === "development" && debug && debug !== "profile" && import_constants.isClient && import_isDevTools.isDevTools) {
+        console.groupEnd(), console.groupCollapsed("\u{1F539} getSplitStyles ===>");
         try {
           var logs = {
             ...result,
@@ -5736,11 +5871,11 @@ var require_getSplitStyles_native = __commonJS({
         mergeTransform(target, key, val, !0);
       });
     }
-    function mergeStyle(styleState, key, val) {
-      var disableNormalize = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : !1, { viewProps, styleProps, staticConfig } = styleState;
-      if (key in import_helpers2.stylePropsTransform) {
+    function mergeStyle(styleState, key, val, importance) {
+      var disableNormalize = arguments.length > 4 && arguments[4] !== void 0 ? arguments[4] : !1, { viewProps, styleProps, staticConfig, usedKeys } = styleState, existingImportance = usedKeys[key] || 0;
+      if (!(existingImportance > importance)) if (key in import_helpers2.stylePropsTransform) {
         var _styleState;
-        (_styleState = styleState).flatTransforms || (_styleState.flatTransforms = {}), styleState.flatTransforms[key] = val;
+        (_styleState = styleState).flatTransforms || (_styleState.flatTransforms = {}), usedKeys[key] = importance, styleState.flatTransforms[key] = val;
       } else {
         var shouldNormalize = import_constants.isWeb && !disableNormalize && !styleProps.noNormalize, out = shouldNormalize ? (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(val, key) : val;
         if (
@@ -5749,7 +5884,7 @@ var require_getSplitStyles_native = __commonJS({
         ) viewProps[key] = out;
         else {
           var _styleState1;
-          (_styleState1 = styleState).style || (_styleState1.style = {}), styleState.style[key] = // if you dont do this you'll be passing props.transform arrays directly here and then mutating them
+          (_styleState1 = styleState).style || (_styleState1.style = {}), usedKeys[key] = importance, styleState.style[key] = // if you dont do this you'll be passing props.transform arrays directly here and then mutating them
           // if theres any flatTransforms later, causing issues (mutating props is bad, in strict mode styles get borked)
           key === "transform" && Array.isArray(out) ? [
             ...out
@@ -5780,8 +5915,8 @@ var require_getSplitStyles_native = __commonJS({
       }
       return styleProps.noNormalize || (0, import_expandStyles.fixStyles)(styleOut), styleOut;
     }, useInsertEffectCompat = import_constants.isWeb ? import_react3.default.useInsertionEffect || import_constants.useIsomorphicLayoutEffect : function() {
-    }, useSplitStyles = function(a, b, c, d, e, f, g, h, i, j, k) {
-      var res = getSplitStyles(a, b, c, d, e, f, g, h, i, j, k);
+    }, useSplitStyles = function(a, b, c, d, e, f, g, h, i, j, k, l) {
+      var res = getSplitStyles(a, b, c, d, e, f, g, h, i, j, k, l);
       return res;
     };
     function addStyleToInsertRules(rulesToInsert, styleObject) {
@@ -5826,14 +5961,14 @@ var require_getSplitStyles_native = __commonJS({
         delete viewProps[key], viewProps[key] = next;
       } else viewProps[key] = val;
     }
-    function mergeMediaByImportance(styleState, mediaKey, key, value, importancesUsed, isSizeMedia, importanceBump, debugProp) {
-      var importance = (0, import_useMedia.getMediaImportanceIfMoreImportant)(mediaKey, key, importancesUsed, isSizeMedia);
-      if (importanceBump && (importance = (importance || 0) + importanceBump), process.env.NODE_ENV === "development" && debugProp === "verbose" && (0, import_log.log)(`mergeMediaByImportance ${key} importance existing ${importancesUsed[key]} next ${importance}`), importance === null) return !1;
-      if (importancesUsed[key] = importance, key in import_pseudoDescriptors.pseudoDescriptors) {
+    function mergeMediaByImportance(styleState, mediaKey, key, value, isSizeMedia, importanceBump, debugProp) {
+      var usedKeys = styleState.usedKeys, importance = (0, import_useMedia.getMediaImportanceIfMoreImportant)(mediaKey, key, styleState, isSizeMedia);
+      if (importanceBump && (importance = (importance || 0) + importanceBump), process.env.NODE_ENV === "development" && debugProp === "verbose" && (0, import_log.log)(`mergeMediaByImportance ${key} importance usedKey ${usedKeys[key]} next ${importance}`), importance === null) return !1;
+      if (key in import_pseudoDescriptors.pseudoDescriptors) {
         var descriptor = import_pseudoDescriptors.pseudoDescriptors[key], descriptorKey = descriptor.stateKey || descriptor.name, isDisabled = styleState.componentState[descriptorKey] === !1;
         if (isDisabled) return !1;
-        for (var subKey in value) mergeStyle(styleState, subKey, value[subKey]);
-      } else mergeStyle(styleState, key, value);
+        for (var subKey in value) mergeStyle(styleState, subKey, value[subKey], importance);
+      } else mergeStyle(styleState, key, value, importance);
       return !0;
     }
     function normalizeStyle(style) {
@@ -5846,7 +5981,7 @@ var require_getSplitStyles_native = __commonJS({
     }
     function applyDefaultStyle(pkey, styleState) {
       var defaultValues = animatableDefaults[pkey];
-      defaultValues != null && !(pkey in styleState.usedKeys) && (!styleState.style || !(pkey in styleState.style)) && mergeStyle(styleState, pkey, defaultValues);
+      defaultValues != null && !(pkey in styleState.usedKeys) && (!styleState.style || !(pkey in styleState.style)) && mergeStyle(styleState, pkey, defaultValues, 1);
     }
   }
 });
@@ -5967,84 +6102,6 @@ var require_setElementProps_native = __commonJS({
   }
 });
 
-// ../../packages/is-equal-shallow/dist/cjs/index.native.js
-var require_index_native6 = __commonJS({
-  "../../packages/is-equal-shallow/dist/cjs/index.native.js"(exports2, module2) {
-    "use strict";
-    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __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;
-    }, __toCommonJS2 = function(mod) {
-      return __copyProps2(__defProp2({}, "__esModule", {
-        value: !0
-      }), mod);
-    }, index_exports2 = {};
-    __export2(index_exports2, {
-      isEqualShallow: function() {
-        return isEqualShallow;
-      },
-      mergeIfNotShallowEqual: function() {
-        return mergeIfNotShallowEqual;
-      },
-      useCreateShallowSetState: function() {
-        return useCreateShallowSetState;
-      }
-    });
-    module2.exports = __toCommonJS2(index_exports2);
-    var import_react3 = require("react");
-    function useCreateShallowSetState(setter, debugIn) {
-      return (0, import_react3.useCallback)(function(next) {
-        setter(function(prev) {
-          return mergeIfNotShallowEqual(prev, next, debugIn);
-        });
-      }, [
-        setter,
-        debugIn
-      ]);
-    }
-    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 {
-        ...prev,
-        ...next
-      };
-    }
-    function isEqualShallow(prev, next) {
-      for (var key in next) if (prev[key] !== next[key]) return !1;
-      return !0;
-    }
-  }
-});
-
 // ../web/dist/cjs/helpers/subscribeToContextGroup.native.js
 var require_subscribeToContextGroup_native = __commonJS({
   "../web/dist/cjs/helpers/subscribeToContextGroup.native.js"(exports2, module2) {
@@ -6088,31 +6145,58 @@ var require_subscribeToContextGroup_native = __commonJS({
       }
     });
     module2.exports = __toCommonJS2(subscribeToContextGroup_exports);
-    var import_useMedia = require_useMedia_native(), import_is_equal_shallow = require_index_native6(), subscribeToContextGroup = function(param) {
-      var { setStateShallow, pseudoGroups, mediaGroups, componentContext, state } = param;
+    var import_is_equal_shallow = require_index_native5(), import_useMedia = require_useMedia_native(), subscribeToContextGroup = function(props) {
+      var { pseudoGroups, mediaGroups, groupContext } = props;
       if (pseudoGroups || mediaGroups) {
-        var _componentContext_groups_subscribe, _componentContext_groups;
-        return process.env.NODE_ENV === "development" && !componentContext.groups && console.debug("No context group found"), (_componentContext_groups = componentContext.groups) === null || _componentContext_groups === void 0 || (_componentContext_groups_subscribe = _componentContext_groups.subscribe) === null || _componentContext_groups_subscribe === void 0 ? void 0 : _componentContext_groups_subscribe.call(_componentContext_groups, function(name, param2) {
-          var { layout, pseudo } = param2, _state_group, current = ((_state_group = state.group) === null || _state_group === void 0 ? void 0 : _state_group[name]) || {
+        process.env.NODE_ENV === "development" && !groupContext && console.debug("No context group found");
+        var disposables = /* @__PURE__ */ new Set();
+        if (pseudoGroups) for (var _i = 0, _iter = [
+          ...pseudoGroups
+        ]; _i < _iter.length; _i++) {
+          var name = _iter[_i];
+          disposables.add(createGroupListener(name, props));
+        }
+        if (mediaGroups) for (var _i1 = 0, _iter1 = [
+          ...mediaGroups
+        ]; _i1 < _iter1.length; _i1++) {
+          var name1 = _iter1[_i1];
+          disposables.add(createGroupListener(name1, props));
+        }
+        return function() {
+          disposables.forEach(function(d) {
+            return d();
+          });
+        };
+      }
+    }, createGroupListener = function(name, param) {
+      var { setStateShallow, pseudoGroups, mediaGroups, groupContext } = param, parent = groupContext == null ? void 0 : groupContext[name];
+      return parent ? parent.subscribe(function(param2) {
+        var { layout, pseudo } = param2;
+        setStateShallow(function(prev) {
+          var _prev_group, didChange = !1, group = ((_prev_group = prev.group) === null || _prev_group === void 0 ? void 0 : _prev_group[name]) || {
             pseudo: {},
             media: {}
           };
-          if (pseudo && pseudoGroups != null && pseudoGroups.has(String(name))) Object.assign(current.pseudo, pseudo), persist();
-          else if (layout && mediaGroups) {
-            var mediaState2 = (0, import_useMedia.getMediaState)(mediaGroups, layout), next = (0, import_is_equal_shallow.mergeIfNotShallowEqual)(current.media || {}, mediaState2);
-            next !== current.media && (Object.assign(current.media, next), persist());
-          }
-          function persist() {
-            var group = {
-              ...state.group,
-              [name]: current
-            };
-            setStateShallow({
-              group
-            });
+          if (pseudo && pseudoGroups != null && pseudoGroups.has(name)) {
+            var _group;
+            (_group = group).pseudo || (_group.pseudo = {});
+            var next = (0, import_is_equal_shallow.mergeIfNotShallowEqual)(group.pseudo, pseudo);
+            next !== group.pseudo && (Object.assign(group.pseudo, pseudo), didChange = !0);
+          } else if (layout && mediaGroups) {
+            var _group1;
+            (_group1 = group).media || (_group1.media = {});
+            var mediaState2 = (0, import_useMedia.getMediaState)(mediaGroups, layout), next1 = (0, import_is_equal_shallow.mergeIfNotShallowEqual)(group.media, mediaState2);
+            next1 !== group.media && (Object.assign(group.media, next1), didChange = !0);
           }
+          return didChange ? {
+            group: {
+              ...prev.group,
+              [name]: group
+            }
+          } : prev;
         });
-      }
+      }) : function() {
+      };
     };
   }
 });
@@ -6206,7 +6290,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,
@@ -6241,7 +6325,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 [
@@ -7111,8 +7195,8 @@ var require_useComponentState_native = __commonJS({
       }
     });
     module2.exports = __toCommonJS2(useComponentState_exports);
-    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);
+    var import_constants = require_index_native2(), import_is_equal_shallow = require_index_native5(), 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, animationDriver, staticConfig, config) {
+      var _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)), supportsCSS = animationDriver == null ? void 0 : animationDriver.supportsCSS, curStateRef = stateRef.current;
       !needsHydration && hasAnimationProp && (curStateRef.hasAnimated = !0);
@@ -7135,9 +7219,7 @@ 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];
-      stateRef.current.nextComponentState && (Object.assign(state, stateRef.current.nextComponentState), stateRef.current.nextComponentState = void 0);
-      var isAnimated = willBeAnimated;
+      } : states[0], setState = states[1], 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
@@ -7160,46 +7242,6 @@ var require_useComponentState_native = __commonJS({
           isClassNameDisabled
         }));
       }
-      if (groupName && !curStateRef.group) {
-        var listeners = /* @__PURE__ */ new Set();
-        curStateRef.group = {
-          listeners,
-          emit(name, state2) {
-            listeners.forEach(function(l) {
-              return l(name, state2);
-            });
-          },
-          subscribe(cb) {
-            return listeners.add(cb), setStateShallow({
-              hasDynGroupChildren: !0
-            }), function() {
-              listeners.delete(cb), listeners.size === 0 && setStateShallow({
-                hasDynGroupChildren: !1
-              });
-            };
-          }
-        };
-      }
-      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,
@@ -7449,17 +7491,26 @@ 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();
+    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_is_equal_shallow = require_index_native5(), 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_GroupContext = require_GroupContext_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, NextState = /* @__PURE__ */ new WeakMap(), debugKeyListeners, startVisualizer, componentSetStates = /* @__PURE__ */ new Set(), avoidReRenderKeys = /* @__PURE__ */ new Set([
+      "hover",
+      "press",
+      "pressIn",
+      "group",
+      "focus",
+      "focusWithin",
+      "media",
+      "group"
+    ]);
     if (0) var cancelTouches;
     var BaseText, BaseView, hasSetupBaseViews = !1, lastInteractionWasKeyboard = {
       value: !1
     };
-    import_constants.isWeb && globalThis.document && (document.addEventListener("keydown", function() {
-      lastInteractionWasKeyboard.value = !0;
+    import_constants.isWeb && typeof document < "u" && (document.addEventListener("keydown", function() {
+      lastInteractionWasKeyboard.value || (lastInteractionWasKeyboard.value = !0);
     }), document.addEventListener("mousedown", function() {
-      lastInteractionWasKeyboard.value = !1;
+      lastInteractionWasKeyboard.value && (lastInteractionWasKeyboard.value = !1);
     }), document.addEventListener("mousemove", function() {
-      lastInteractionWasKeyboard.value = !1;
+      lastInteractionWasKeyboard.value && (lastInteractionWasKeyboard.value = !1);
     }));
     function createComponent(staticConfig) {
       var _staticConfig_defaultProps, { componentName } = staticConfig, config = null, defaultProps = staticConfig.defaultProps;
@@ -7490,7 +7541,7 @@ var require_createComponent_native = __commonJS({
           var _propsIn_datatestrenders, _current, _;
           (_ = (_propsIn_datatestrenders = propsIn["data-test-renders"])[_current = "current"]) !== null && _ !== void 0 || (_propsIn_datatestrenders[_current] = 0), propsIn["data-test-renders"].current += 1;
         }
-        var componentContext = import_react3.default.useContext(import_ComponentContext.ComponentContext), styledContextProps, overriddenContextProps, contextValue, { context, isReactNative } = staticConfig;
+        var styledContextProps, overriddenContextProps, contextValue, { context, isReactNative } = staticConfig;
         if (context && (contextValue = import_react3.default.useContext(context), contextValue)) {
           process.env.NODE_ENV === "development" && (propsIn == null ? void 0 : propsIn.debug) === "verbose" && (0, import_log.log)(" \u{1F447} contextValue", contextValue);
           for (var key in context.props) {
@@ -7515,7 +7566,7 @@ var require_createComponent_native = __commonJS({
         var componentName2 = props.componentName || staticConfig.componentName;
         process.env.NODE_ENV === "development" && import_constants.isClient && import_react3.default.useEffect(function() {
           var overlay = null, debugVisualizerHandler = function() {
-            var show = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : !1, node = curStateRef.host;
+            var show = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : !1, node = stateRef.current.host;
             if (node) 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";
               var dataAt = node.getAttribute("data-at") || "", dataIn = node.getAttribute("data-in") || "", tooltip = document.createElement("span");
@@ -7528,7 +7579,51 @@ 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, supportsCSS, willBeAnimated, willBeAnimatedClient, startedUnhydrated } = componentState, setStateShallow = componentState.setStateShallow;
+        var componentContext = import_react3.default.useContext(import_ComponentContext.ComponentContext), groupContextParent = import_react3.default.useContext(import_GroupContext.GroupContext), animationDriver = componentContext.animationDriver, useAnimations = animationDriver == null ? void 0 : animationDriver.useAnimations, componentState = (0, import_useComponentState.useComponentState)(props, animationDriver, staticConfig, config), { disabled, groupName, hasAnimationProp, hasEnterStyle, isAnimated, isExiting, isHydrated, presence, presenceState, setState, noClass, state, stateRef, supportsCSS, willBeAnimated, willBeAnimatedClient, startedUnhydrated } = componentState;
+        hasAnimationProp && animationDriver != null && animationDriver.avoidReRenders && (0, import_constants.useIsomorphicLayoutEffect)(function() {
+          var pendingState = NextState.get(stateRef);
+          pendingState && (setStateShallow(pendingState), NextState.set(stateRef, void 0));
+        });
+        var allGroupContexts = (0, import_react3.useMemo)(function() {
+          var _stateRef_current_group;
+          if (!groupName) return groupContextParent;
+          (_stateRef_current_group = stateRef.current.group) === null || _stateRef_current_group === void 0 || _stateRef_current_group.listeners.clear();
+          var listeners = /* @__PURE__ */ new Set();
+          return stateRef.current.group = {
+            listeners,
+            emit(state2) {
+              listeners.forEach(function(l) {
+                return l(state2);
+              });
+            },
+            subscribe(cb) {
+              return listeners.add(cb), listeners.size === 1 && setStateShallow({
+                hasDynGroupChildren: !0
+              }), function() {
+                listeners.delete(cb), listeners.size === 0 && setStateShallow({
+                  hasDynGroupChildren: !1
+                });
+              };
+            }
+          }, {
+            ...groupContextParent,
+            [groupName]: {
+              state: {
+                pseudo: import_defaultComponentState.defaultComponentStateMounted
+              },
+              subscribe: function(listener) {
+                var _stateRef_current_group2, dispose = (_stateRef_current_group2 = stateRef.current.group) === null || _stateRef_current_group2 === void 0 ? void 0 : _stateRef_current_group2.subscribe(listener);
+                return function() {
+                  dispose == null || dispose();
+                };
+              }
+            }
+          };
+        }, [
+          stateRef,
+          groupName,
+          groupContextParent
+        ]), 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
@@ -7537,14 +7632,14 @@ var require_createComponent_native = __commonJS({
         // things declaratively
         !animationDriver.needsWebStyles && (elementType = animationDriver[isText ? "Text" : "View"] || elementType);
         var disableThemeProp = !1, disableTheme = disableThemeProp || isHOC;
-        process.env.NODE_ENV === "development" && time2 && time2`theme-props`, props.themeShallow && (curStateRef.themeShallow = !0);
+        process.env.NODE_ENV === "development" && time2 && time2`theme-props`, props.themeShallow && (stateRef.current.themeShallow = !0);
         var themeStateProps = {
           componentName: componentName2,
           disable: disableTheme,
-          shallow: curStateRef.themeShallow,
+          shallow: stateRef.current.themeShallow,
           debug: debugProp
         };
-        if ("themeInverse" in props && (themeStateProps.inverse = props.themeInverse), "theme" in props && (themeStateProps.name = props.theme), typeof curStateRef.isListeningToTheme == "boolean" && (themeStateProps.needsUpdate = function() {
+        if ("themeInverse" in props && (themeStateProps.inverse = props.themeInverse), "theme" in props && (themeStateProps.name = props.theme), typeof stateRef.current.isListeningToTheme == "boolean" && (themeStateProps.needsUpdate = 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)" : " ") + (noClass ? "(noClass)" : " ") + (state.press || state.pressIn ? "(PRESSED)" : " ") + (state.hover ? "(HOVERED)" : " ") + (state.focus ? "(FOCUSED)" : " ") + (state.focusWithin ? "(WITHIN FOCUSED)" : " ") + ((presenceState == null ? void 0 : presenceState.isPresent) === !1 ? "(EXIT)" : ""), dataIs = propsIn["data-is"] || "", banner = `<${name} /> ${internalID} ${dataIs ? ` ${dataIs}` : ""} ${type.trim()}`;
@@ -7564,7 +7659,8 @@ var require_createComponent_native = __commonJS({
               themeStateProps
             }), (0, import_log.log)({
               contextProps: styledContextProps,
-              overriddenContextProps
+              overriddenContextProps,
+              componentContext
             }), (0, import_log.log)({
               presence,
               isAnimated,
@@ -7593,33 +7689,53 @@ var require_createComponent_native = __commonJS({
           noMergeStyle: isAnimated && (animationDriver == null ? void 0 : animationDriver.needsWebStyles)
         }, themeName = (themeState == null ? void 0 : themeState.name) || "";
         process.env.NODE_ENV === "development" && time2 && time2`split-styles-prepare`;
-        var splitStyles = (0, import_getSplitStyles.useSplitStyles)(props, staticConfig, theme, themeName, state, styleProps, null, componentContext, elementType, startedUnhydrated, debugProp);
-        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) {
-              return avoidReRenderKeys.has(key3);
+        var splitStyles = (0, import_getSplitStyles.useSplitStyles)(props, staticConfig, theme, themeName, state, styleProps, null, componentContext, allGroupContexts, elementType, startedUnhydrated, debugProp), groupContext = groupName && (allGroupContexts == null ? void 0 : allGroupContexts[groupName]) || null;
+        if (groupContext) {
+          var groupState = groupContext == null ? void 0 : groupContext.state;
+          if (groupState && groupState.layout === void 0) {
+            var _splitStyles_style, _splitStyles_style1;
+            (!((_splitStyles_style = splitStyles.style) === null || _splitStyles_style === void 0) && _splitStyles_style.width || !((_splitStyles_style1 = splitStyles.style) === null || _splitStyles_style1 === void 0) && _splitStyles_style1.height) && (groupState.layout = {
+              width: fromPx(splitStyles.style.width),
+              height: fromPx(splitStyles.style.height)
             });
-            if (canAvoidReRender && styleListener) {
-              var updatedState = {
-                ...state,
-                ...next
-              };
-              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);
+          }
+        }
+        if ((hasAnimationProp || groupName) && animationDriver != null && animationDriver.avoidReRenders) {
+          var styleListener = stateRef.current.useStyleListener, ogSetStateShallow = setStateShallow;
+          stateRef.current.setStateShallow = function(nextOrGetNext) {
+            var prev = NextState.get(stateRef) || state, next = typeof nextOrGetNext == "function" ? nextOrGetNext(prev) : nextOrGetNext;
+            if (!(next === prev || (0, import_is_equal_shallow.isEqualShallow)(prev, next))) {
+              var canAvoidReRender = Object.keys(next).every(function(key3) {
+                return avoidReRenderKeys.has(key3);
+              });
+              if (canAvoidReRender) {
+                var updatedState = {
+                  ...prev,
+                  ...next
+                };
+                NextState.set(stateRef, updatedState), process.env.NODE_ENV === "development" && debugProp && debugProp !== "profile" && (console.groupCollapsed("[\u26A1\uFE0F] avoid setState", next, {
+                  updatedState,
+                  props
+                }), console.info(stateRef.current.host), console.groupEnd());
+                var { group, hasDynGroupChildren, unmounted, animation, ...childrenGroupState } = updatedState;
+                if (groupContext && notifyGroupSubscribers(groupContext, stateRef.current.group || null, childrenGroupState), !hasAnimationProp || !styleListener) return;
+                var nextStyles = (0, import_getSplitStyles.getSplitStyles)(props, staticConfig, theme, themeName, updatedState, styleProps, null, componentContext, allGroupContexts, elementType, startedUnhydrated, debugProp);
+                styleListener(nextStyles.style);
+              } else process.env.NODE_ENV === "development" && debugProp && debugProp !== "profile" && console.info("[\u{1F40C}] re-render", {
+                canAvoidReRender,
+                next
+              }), ogSetStateShallow(next);
+            }
+          }, setStateShallow = function(state2) {
+            var _stateRef_current_setStateShallow, _stateRef_current;
+            (_stateRef_current_setStateShallow = (_stateRef_current = stateRef.current).setStateShallow) === null || _stateRef_current_setStateShallow === void 0 || _stateRef_current_setStateShallow.call(_stateRef_current, state2);
           };
         }
-        if (process.env.NODE_ENV === "development" && time2 && time2`split-styles`, props.group && props.untilMeasured === "hide" && !curStateRef.hasMeasured) {
+        if (process.env.NODE_ENV === "development" && time2 && time2`split-styles`, props.group && props.untilMeasured === "hide" && !stateRef.current.hasMeasured) {
           var _splitStyles;
           (_splitStyles = splitStyles).style || (_splitStyles.style = {}), splitStyles.style.opacity = 0;
         }
-        curStateRef.isListeningToTheme = splitStyles.dynamicThemeAccess;
+        splitStyles.dynamicThemeAccess != null && (stateRef.current.isListeningToTheme = splitStyles.dynamicThemeAccess);
         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)(componentContext, shouldListenForMedia, mediaListeningKeys);
         var { viewProps: viewPropsIn, pseudos, style: splitStylesStyle, classNames, space } = splitStyles, propsWithAnimation = props, {
@@ -7674,18 +7790,18 @@ var require_createComponent_native = __commonJS({
         }
         process.env.NODE_ENV === "development" && props.untilMeasured && !props.group && console.warn(`You set the untilMeasured prop without setting group. This doesn't work, be sure to set untilMeasured on the parent that sets group, not the children that use the $group- prop.
 
-If you meant to do this, you can disable this warning - either change untilMeasured and group at the same time, or do group={conditional ? 'name' : undefined}`), process.env.NODE_ENV === "development" && time2 && time2`destructure`, groupName && (nonTamaguiProps.onLayout = (0, import_helpers2.composeEventHandlers)(nonTamaguiProps.onLayout, function(e) {
-          var layout = e.nativeEvent.layout;
-          stateRef.current.group.layout = layout, stateRef.current.group.emit(groupName, {
+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" && time2 && time2`destructure`, groupContext && (nonTamaguiProps.onLayout = (0, import_helpers2.composeEventHandlers)(nonTamaguiProps.onLayout, function(e) {
+          var _stateRef_current_group, layout = e.nativeEvent.layout;
+          groupContext.state.layout = layout, (_stateRef_current_group = stateRef.current.group) === null || _stateRef_current_group === void 0 || _stateRef_current_group.emit({
             layout
           }), !stateRef.current.hasMeasured && props.untilMeasured === "hide" && setState(function(prev) {
             return {
               ...prev
             };
           }), stateRef.current.hasMeasured = !0;
-        })), viewProps = ((_hooks_usePropsTransform = import_setupHooks.hooks.usePropsTransform) === null || _hooks_usePropsTransform === void 0 ? void 0 : _hooks_usePropsTransform.call(import_setupHooks.hooks, elementType, nonTamaguiProps, stateRef, curStateRef.willHydrate)) || nonTamaguiProps, curStateRef.composedRef || (curStateRef.composedRef = (0, import_compose_refs.composeRefs)(function(x) {
+        })), viewProps = ((_hooks_usePropsTransform = import_setupHooks.hooks.usePropsTransform) === null || _hooks_usePropsTransform === void 0 ? void 0 : _hooks_usePropsTransform.call(import_setupHooks.hooks, elementType, nonTamaguiProps, stateRef, stateRef.current.willHydrate)) || nonTamaguiProps, stateRef.current.composedRef || (stateRef.current.composedRef = (0, import_compose_refs.composeRefs)(function(x) {
           return stateRef.current.host = x;
-        }, forwardedRef, import_setElementProps.setElementProps, animatedRef)), viewProps.ref = curStateRef.composedRef, process.env.NODE_ENV === "development" && !isReactNative && !isText && import_constants.isWeb && !isHOC && import_react3.default.Children.toArray(props.children).forEach(function(item) {
+        }, forwardedRef, import_setElementProps.setElementProps, animatedRef)), viewProps.ref = stateRef.current.composedRef, process.env.NODE_ENV === "development" && !isReactNative && !isText && import_constants.isWeb && !isHOC && import_react3.default.Children.toArray(props.children).forEach(function(item) {
           typeof item == "string" && item !== `
 ` && console.error(`Unexpected text node: ${item}. A text node cannot be a child of a <${staticConfig.componentName || propsIn.tag || "View"}>.`, props);
         }), process.env.NODE_ENV === "development" && time2 && time2`events-hooks`;
@@ -7727,18 +7843,21 @@ If you meant to do this, you can disable this warning - either change untilMeasu
             });
             return;
           }
-          var dispose = !disabled && (pseudoGroups || mediaGroups) ? (0, import_subscribeToContextGroup.subscribeToContextGroup)({
-            componentContext,
-            setStateShallow,
-            state,
-            mediaGroups,
-            pseudoGroups
-          }) : null;
           return function() {
-            dispose == null || dispose(), componentSetStates.delete(setState);
+            componentSetStates.delete(setState);
           };
         }, [
           state.unmounted,
+          disabled
+        ]), (0, import_constants.useIsomorphicLayoutEffect)(function() {
+          if (!disabled && !(!pseudoGroups && !mediaGroups) && allGroupContexts) return (0, import_subscribeToContextGroup.subscribeToContextGroup)({
+            groupContext: allGroupContexts,
+            setStateShallow,
+            mediaGroups,
+            pseudoGroups
+          });
+        }, [
+          allGroupContexts,
           disabled,
           pseudoGroups ? Object.keys([
             ...pseudoGroups
@@ -7746,24 +7865,13 @@ If you meant to do this, you can disable this warning - either change untilMeasu
           mediaGroups ? Object.keys([
             ...mediaGroups
           ]).join("") : 0
-        ]), (0, import_constants.useIsomorphicLayoutEffect)(function() {
-          var _curStateRef_group;
-          if (groupName) {
-            curStateRef.group.emit(groupName, {
-              pseudo: state,
-              layout: (_curStateRef_group = curStateRef.group) === null || _curStateRef_group === void 0 ? void 0 : _curStateRef_group.layout
-            });
-            var groupContextState = componentContext == null ? void 0 : componentContext.groups;
-            if (groupContextState) {
-              var next = {
-                ...groupContextState[groupName],
-                ...state
-              };
-              groupContextState[groupName] = next;
-            }
-          }
+        ]);
+        var groupEmitter = stateRef.current.group;
+        (0, import_constants.useIsomorphicLayoutEffect)(function() {
+          !groupContext || !groupEmitter || notifyGroupSubscribers(groupContext, groupEmitter, state);
         }, [
-          groupName,
+          groupContext,
+          groupEmitter,
           state
         ]);
         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 || componentContext.setParentFocusState), hasDynamicGroupChildren = !!(groupName && state.hasDynGroupChildren), attachPress = !!(hasDynamicGroupChildren || runtimePressStyle || onPress || onPressOut || onPressIn || onMouseDown || onMouseUp || onLongPress || onClick || pseudos != null && pseudos.focusVisibleStyle), runtimeHoverStyle = !disabled && noClass && (pseudos == null ? void 0 : pseudos.hoverStyle), needsHoverState = !!(hasDynamicGroupChildren || runtimeHoverStyle), attachHover = import_constants.isWeb && !!(hasDynamicGroupChildren || needsHoverState || onMouseEnter || onMouseLeave), shouldAttach = !disabled && !props.asChild && !!(attachFocus || attachPress || attachHover || runtimePressStyle || runtimeHoverStyle || runtimeFocusStyle), needsPressState = !!(hasDynamicGroupChildren || runtimePressStyle);
@@ -7790,7 +7898,7 @@ If you meant to do this, you can disable this warning - either change untilMeasu
             },
             onMouseLeave: function(e) {
               var next = {};
-              needsHoverState && (next.hover = !1), needsPressState && state.pressIn && (next.press = !1, next.pressIn = !1), setStateShallow(next), onHoverOut == null || onHoverOut(e), onMouseLeave == null || onMouseLeave(e);
+              needsHoverState && (next.hover = !1), needsPressState && (next.press = !1, next.pressIn = !1), setStateShallow(next), onHoverOut == null || onHoverOut(e), onMouseLeave == null || onMouseLeave(e);
             }
           },
           onPressIn: attachPress ? function(e) {
@@ -7809,24 +7917,16 @@ If you meant to do this, you can disable this warning - either change untilMeasu
           },
           ...attachFocus && {
             onFocus: function(e) {
-              componentContext.setParentFocusState && componentContext.setParentFocusState({
-                focusWithin: !0
-              }), pseudos != null && pseudos.focusVisibleStyle ? setTimeout(function() {
-                setStateShallow({
-                  focus: !0,
-                  focusVisible: !!lastInteractionWasKeyboard.value
-                });
-              }, 0) : setStateShallow({
-                focus: !0,
-                focusVisible: !1
-              }), onFocus == null || onFocus(e);
+              var next = {};
+              componentContext.setParentFocusState && (next.focusWithin = !0), pseudos != null && pseudos.focusVisibleStyle && lastInteractionWasKeyboard.value ? next.focusVisible = !0 : next.focus = !0, setStateShallow(next), onFocus == null || onFocus(e);
             },
             onBlur: function(e) {
               componentContext.setParentFocusState && componentContext.setParentFocusState({
                 focusWithin: !1
               }), setStateShallow({
                 focus: !1,
-                focusVisible: !1
+                focusVisible: !1,
+                focusWithin: !1
               }), onBlur == null || onBlur(e);
             }
           }
@@ -7868,37 +7968,15 @@ If you meant to do this, you can disable this warning - either change untilMeasu
         var useChildrenResult;
         import_setupHooks.hooks.useChildren && (useChildrenResult = import_setupHooks.hooks.useChildren(elementType, content, viewProps)), process.env.NODE_ENV === "development" && time2 && time2`use-children`, useChildrenResult ? content = useChildrenResult : content = /* @__PURE__ */ import_react3.default.createElement(elementType, viewProps, content);
         var ResetPresence = config == null || (_config_animations = config.animations) === null || _config_animations === void 0 ? void 0 : _config_animations.ResetPresence;
-        ResetPresence && willBeAnimated && (hasEnterStyle || presenceState) && content && typeof content != "string" && (content = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ResetPresence, {
+        if (ResetPresence && willBeAnimated && (hasEnterStyle || presenceState) && content && typeof content != "string" && (content = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ResetPresence, {
           children: content
-        })), process.env.NODE_ENV === "development" && time2 && time2`create-element`;
-        var groupState = curStateRef.group, subGroupContext = import_react3.default.useMemo(function() {
-          var _splitStyles_style, _splitStyles_style1;
-          if (!(!groupState || !groupName)) return groupState.listeners.clear(), {
-            ...componentContext.groups,
-            // change reference so as we mutate it doesn't affect siblings etc
-            state: {
-              ...componentContext.groups.state,
-              [groupName]: {
-                pseudo: import_defaultComponentState.defaultComponentStateMounted,
-                // capture just initial width and height if they exist
-                // will have top, left, width, height (not x, y)
-                layout: {
-                  width: fromPx((_splitStyles_style = splitStyles.style) === null || _splitStyles_style === void 0 ? void 0 : _splitStyles_style.width),
-                  height: fromPx((_splitStyles_style1 = splitStyles.style) === null || _splitStyles_style1 === void 0 ? void 0 : _splitStyles_style1.height)
-                }
-              }
-            },
-            emit: groupState.emit,
-            subscribe: groupState.subscribe
-          };
-        }, [
-          groupName
-        ]);
-        if (("group" in props || propsIn.focusWithinStyle) && (content = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ComponentContext.ComponentContext.Provider, {
+        })), process.env.NODE_ENV === "development" && time2 && time2`create-element`, "focusWithinStyle" in propsIn && (content = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ComponentContext.ComponentContext.Provider, {
           ...componentContext,
-          groups: subGroupContext,
           setParentFocusState: setStateShallow,
           children: content
+        })), "group" in props && (content = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_GroupContext.GroupContext.Provider, {
+          value: allGroupContexts,
+          children: content
         })), process.env.NODE_ENV === "development" && time2 && time2`group-context`, content = disableTheme ? content : (0, import_Theme.getThemedChildren)(themeState, content, themeStateProps, !1, stateRef), process.env.NODE_ENV === "development" && time2 && time2`themed-children`, staticConfig.context) {
           var contextProps = staticConfig.context.props;
           for (var key1 in contextProps) if (viewProps.style && key1 in viewProps.style || key1 in viewProps) {
@@ -7925,6 +8003,7 @@ If you meant to do this, you can disable this warning - either change untilMeasu
               (0, import_log.log)("viewProps", viewProps), (0, import_log.log)("children", content), typeof window < "u" && (0, import_log.log)({
                 propsIn,
                 props,
+                attachPress,
                 animationStyles,
                 classNames,
                 content,
@@ -7963,6 +8042,15 @@ If you meant to do this, you can disable this warning - either change untilMeasu
           delete globalThis.willPrint, time2.print(), time2 = null;
         }, 50))), content;
       });
+      function notifyGroupSubscribers(groupContext, groupEmitter, pseudo) {
+        if (!(!groupContext || !groupEmitter)) {
+          var nextState = {
+            ...groupContext.state,
+            pseudo
+          };
+          groupEmitter.emit(nextState), groupContext.state = nextState;
+        }
+      }
       staticConfig.componentName && (component.displayName = staticConfig.componentName);
       var res = component;
       (process.env.TAMAGUI_FORCE_MEMO || staticConfig.memo) && (res = /* @__PURE__ */ import_react3.default.memo(res)), res.staticConfig = staticConfig;
@@ -9736,13 +9824,8 @@ var require_useConfiguration_native = __commonJS({
       }
     });
     module2.exports = __toCommonJS2(useConfiguration_exports);
-    var import_react3 = __toESM2(require("react")), import_config = require_config_native(), import_ComponentContext = require_ComponentContext_native(), useConfiguration = function() {
-      var { groups, animationDriver, ...restComponentConfig } = import_react3.default.useContext(import_ComponentContext.ComponentContext), { animations, ...restConfig } = (0, import_config.getConfig)();
-      return {
-        ...restConfig,
-        ...restComponentConfig,
-        animationDriver: animationDriver ?? (0, import_config.getConfig)().animations
-      };
+    var import_react3 = __toESM2(require("react")), import_ComponentContext = require_ComponentContext_native(), useConfiguration = function() {
+      return import_react3.default.useContext(import_ComponentContext.ComponentContext);
     };
   }
 });
@@ -9909,7 +9992,7 @@ var require_useProps_native = __commonJS({
       }
     });
     module2.exports = __toCommonJS2(useProps_exports);
-    var import_constants = require_index_native2(), import_react3 = __toESM2(require("react")), import_config = require_config_native(), import_ComponentContext = require_ComponentContext_native(), import_getSplitStyles = require_getSplitStyles_native(), import_subscribeToContextGroup = require_subscribeToContextGroup_native(), import_Stack = require_Stack_native(), import_useComponentState = require_useComponentState_native(), import_useMedia = require_useMedia_native(), import_useTheme = require_useTheme_native();
+    var import_constants = require_index_native2(), import_react3 = __toESM2(require("react")), import_config = require_config_native(), import_ComponentContext = require_ComponentContext_native(), import_GroupContext = require_GroupContext_native(), import_getSplitStyles = require_getSplitStyles_native(), import_subscribeToContextGroup = require_subscribeToContextGroup_native(), import_Stack = require_Stack_native(), import_useComponentState = require_useComponentState_native(), import_useMedia = require_useMedia_native(), import_useTheme = require_useTheme_native();
     function useProps(props, opts) {
       var [propsOut, styleOut] = usePropsAndStyle(props, {
         ...opts,
@@ -9933,7 +10016,7 @@ var require_useProps_native = __commonJS({
         needsUpdate() {
           return !0;
         }
-      }), componentContext = import_react3.default.useContext(import_ComponentContext.ComponentContext), { state, disabled, setStateShallow } = (0, import_useComponentState.useComponentState)(props, componentContext, staticConfig, (0, import_config.getConfig)()), mediaStateNow = opts != null && opts.noMedia ? (
+      }), componentContext = import_react3.default.useContext(import_ComponentContext.ComponentContext), groupContext = import_react3.default.useContext(import_GroupContext.GroupContext), { state, disabled, setStateShallow } = (0, import_useComponentState.useComponentState)(props, componentContext.animationDriver, staticConfig, (0, import_config.getConfig)()), mediaStateNow = opts != null && opts.noMedia ? (
         // not safe to use mediaState but really marginal to hit this
         import_useMedia.mediaState
       ) : (0, import_useMedia.useMedia)(), splitStyles = (0, import_getSplitStyles.useSplitStyles)(props, staticConfig, theme, (themeState == null ? void 0 : themeState.name) || "", state, {
@@ -9944,7 +10027,7 @@ var require_useProps_native = __commonJS({
         noClass: !0,
         resolveValues: "auto",
         ...opts
-      }, null, componentContext), { mediaGroups, pseudoGroups } = splitStyles;
+      }, null, componentContext, groupContext), { mediaGroups, pseudoGroups } = splitStyles;
       return (0, import_constants.useIsomorphicLayoutEffect)(function() {
         if (!disabled) {
           if (state.unmounted) {
@@ -9953,16 +10036,16 @@ var require_useProps_native = __commonJS({
             });
             return;
           }
-          return (0, import_subscribeToContextGroup.subscribeToContextGroup)({
-            componentContext,
+          if (groupContext) return (0, import_subscribeToContextGroup.subscribeToContextGroup)({
+            groupContext,
             setStateShallow,
-            state,
             mediaGroups,
             pseudoGroups
           });
         }
       }, [
         disabled,
+        groupContext,
         pseudoGroups ? Object.keys([
           ...pseudoGroups
         ]).join("") : 0,
@@ -10704,10 +10787,11 @@ var require_index_native9 = __commonJS({
     var import_config = require_config_native(), import_insertStyleRule = require_insertStyleRule_native();
     __reExport2(index_exports2, require_constants_native2(), module2.exports);
     __reExport2(index_exports2, require_ComponentContext_native(), module2.exports);
+    __reExport2(index_exports2, require_GroupContext_native(), module2.exports);
     __reExport2(index_exports2, require_withStableStyle_native(), module2.exports);
     __reExport2(index_exports2, require_createMediaStyle_native(), module2.exports);
     __reExport2(index_exports2, require_getShorthandValue_native(), module2.exports);
-    __reExport2(index_exports2, require_index_native6(), module2.exports);
+    __reExport2(index_exports2, require_index_native5(), module2.exports);
     var import_insertStyleRule2 = require_insertStyleRule_native();
     __reExport2(index_exports2, require_createStyledContext_native(), module2.exports);
     __reExport2(index_exports2, require_expandStyles_native(), module2.exports);
@@ -12203,7 +12287,7 @@ var require_index_native12 = __commonJS({
       }
     });
     module2.exports = __toCommonJS2(index_exports2);
-    var import_constants = require_index_native2(), import_is_equal_shallow = require_index_native6(), LayoutHandlers = /* @__PURE__ */ new WeakMap(), Nodes = /* @__PURE__ */ new Set(), strategy = "async";
+    var import_constants = require_index_native2(), import_is_equal_shallow = require_index_native5(), LayoutHandlers = /* @__PURE__ */ new WeakMap(), Nodes = /* @__PURE__ */ new Set(), strategy = "async";
     function setOnLayoutStrategy2(state) {
       strategy = state;
     }
@@ -12245,7 +12329,9 @@ var require_index_native12 = __commonJS({
             } 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))) {
+            // @ts-expect-error DOMRectReadOnly can go into object
+            !(0, import_is_equal_shallow.isEqualShallow)(cachedRect, nodeRect) && // @ts-expect-error DOMRectReadOnly can go into object
+            (!cachedParentRect || !(0, import_is_equal_shallow.isEqualShallow)(cachedParentRect, parentRect))) {
               NodeRectCache.set(node, nodeRect), ParentRectCache.set(parentNode, parentRect);
               var event = getElementLayoutEvent(nodeRect, parentRect);
               avoidUpdates ? queuedUpdates.set(node, function() {