@tamagui/core 1.129.12 → 1.129.13

package/dist/test.native.js

@@ -2186,6 +2186,80 @@ 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);
+          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) {
@@ -2429,13 +2503,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);
   }
 });
 
@@ -3344,7 +3460,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) {
@@ -3467,7 +3583,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(")) {
@@ -5028,7 +5144,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";
@@ -5037,7 +5153,7 @@ 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 (disableExpandShorthands || keyInit in shorthands && (keyInit = shorthands[keyInit]), keyInit === "className" || keyInit in usedKeys) return "continue";
+        if (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";
@@ -5062,7 +5178,7 @@ var require_getSplitStyles_native = __commonJS({
             parts.length === 2 || parts.length === 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 != null && groupContext[name2] || (keyInit = keyInit.replace("$group-", "$group-true-"));
           }
         }
         var isStyleProp = isValidStyleKeyInit || isMediaOrPseudo || isVariant && !noExpand;
@@ -5078,13 +5194,13 @@ var require_getSplitStyles_native = __commonJS({
             viewProps[key4] = val2;
             return;
           }
-          if (val2 != null && !(key4 in usedKeys)) {
+          if (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)) {
@@ -5113,7 +5229,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;
@@ -5139,7 +5255,7 @@ var require_getSplitStyles_native = __commonJS({
                         var _pseudos1, _key1;
                         pseudos || (pseudos = {}), (_pseudos1 = pseudos)[_key1 = key4] || (_pseudos1[_key1] = {}), pseudos[key4][pkey] = _$val;
                       }
-                      mergeStyle(styleState, pkey, _$val);
+                      mergeStyle(styleState, pkey, _$val, importance);
                     }
                   }
                 }
@@ -5154,21 +5270,20 @@ 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 (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);
                 }
-                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] === "$";
                     if (!(isSubStyle && !(0, import_isActivePlatform.isActivePlatform)(property))) {
                       var out = (0, import_createMediaStyle.createMediaStyle)(style3, mediaKeyShort, import_useMedia.mediaQueryConfig, isMedia, !1, priority), 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) {
@@ -5201,27 +5316,28 @@ 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)
                     return;
                   var groupPseudoKey = groupInfo.pseudo, groupMediaKey = groupInfo.media, componentGroupState = (_componentState_group = componentState.group) === null || _componentState_group === void 0 ? void 0 : _componentState_group[groupName];
                   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)), !isActive) {
+                    if (!mediaState1 && groupState.layout && (isActive = (0, import_useMedia.mediaKeyMatch)(groupMediaKey, groupState.layout)), !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];
+                    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 (!isActive1) {
                       for (var pkey2 in mediaStyle1) applyDefaultStyle(pkey2, styleState);
                       return;
@@ -5369,11 +5485,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) {
-        var _styleState;
-        (_styleState = styleState).flatTransforms || (_styleState.flatTransforms = {}), styleState.flatTransforms[key] = val;
+    function mergeStyle(styleState, key, val, importance) {
+      var disableNormalize = arguments.length > 4 && arguments[4] !== void 0 ? arguments[4] : !1, { viewProps, styleProps, staticConfig } = styleState, existingImportance = styleState.usedKeys[key];
+      if (!(importance < existingImportance)) if (key in import_helpers2.stylePropsTransform) {
+        var _styleState, _styleState_usedKeys, _key;
+        (_styleState = styleState).flatTransforms || (_styleState.flatTransforms = {}), (_styleState_usedKeys = styleState.usedKeys)[_key = key] || (_styleState_usedKeys[_key] = 1), styleState.flatTransforms[key] = val;
       } else {
         var shouldNormalize = import_constants.isWeb && !disableNormalize && !styleProps.noNormalize, out = shouldNormalize ? (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(val, key) : val;
         if (
@@ -5381,8 +5497,8 @@ var require_getSplitStyles_native = __commonJS({
           staticConfig.accept && key in staticConfig.accept
         ) 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
+          var _styleState1, _styleState_usedKeys1, _key1;
+          (_styleState1 = styleState).style || (_styleState1.style = {}), (_styleState_usedKeys1 = styleState.usedKeys)[_key1 = key] || (_styleState_usedKeys1[_key1] = 1), 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
@@ -5413,8 +5529,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) {
@@ -5459,14 +5575,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);
+    function mergeMediaByImportance(styleState, mediaKey, key, value, usedKeys, isSizeMedia, importanceBump, debugProp) {
+      var importance = (0, import_useMedia.getMediaImportanceIfMoreImportant)(mediaKey, key, usedKeys, isSizeMedia);
       if (importanceBump && (importance = (importance || 0) + importanceBump), importance === null) return !1;
-      if (importancesUsed[key] = importance, key in import_pseudoDescriptors.pseudoDescriptors) {
+      if (usedKeys[key] = importance, 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) {
@@ -5479,7 +5595,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);
     }
   }
 });
@@ -5600,79 +5716,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) {
-      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/helpers/subscribeToContextGroup.native.js
 var require_subscribeToContextGroup_native = __commonJS({
   "../web/dist/cjs/helpers/subscribeToContextGroup.native.js"(exports2, module2) {
@@ -5716,31 +5759,57 @@ 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 (_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]) || {
+        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() {
+      };
     };
   }
 });
@@ -6701,8 +6770,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);
@@ -6726,7 +6795,7 @@ var require_useComponentState_native = __commonJS({
         ...states[0],
         [props.forceStyle]: !0
       } : states[0], setState = states[1];
-      stateRef.current.nextComponentState && (Object.assign(state, stateRef.current.nextComponentState), stateRef.current.nextComponentState = void 0);
+      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 {
@@ -6745,46 +6814,6 @@ var require_useComponentState_native = __commonJS({
         var isAnimatedAndHydrated = isAnimated && !supportsCSS, isClassNameDisabled = !staticConfig.acceptsClassName && (config.disableSSR || !state.unmounted), isDisabledManually = disableClassName && !state.unmounted;
         (isAnimatedAndHydrated || isDisabledManually || isClassNameDisabled) && (noClass = !0);
       }
-      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,
@@ -7034,17 +7063,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(), 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(), 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;
+      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;
@@ -7069,7 +7107,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))
           for (var key in context.props) {
             var propVal = (0, import_getShorthandValue.getShorthandValue)(propsIn, key);
@@ -7088,21 +7126,67 @@ var require_createComponent_native = __commonJS({
           ...styledContextProps
         } : defaultProps, props = propsIn;
         curDefaultProps && (props = (0, import_mergeProps.mergeProps)(curDefaultProps, propsIn));
-        var componentName2 = props.componentName || staticConfig.componentName, 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, 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;
+        var componentName2 = props.componentName || staticConfig.componentName, 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, 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, pendingState = stateRef.current.nextComponentState;
+        pendingState && (stateRef.current.nextComponentState = void 0, componentState.setState(function(prev) {
+          return {
+            ...prev,
+            ...pendingState
+          };
+        }));
+        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
         // "needsWebStyles" basically with motion we just animate a plain div, but
         // we still have animated.View/Text for Sheet which wants to control
         // things declaratively
         !animationDriver.needsWebStyles && (elementType = animationDriver[isText ? "Text" : "View"] || elementType);
         var disableThemeProp = !1, disableTheme = disableThemeProp || isHOC;
-        props.themeShallow && (curStateRef.themeShallow = !0);
+        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, !1) {
           var name, type, dataIs, banner;
@@ -7124,33 +7208,47 @@ var require_createComponent_native = __commonJS({
           willBeAnimated,
           styledContextProps,
           noMergeStyle: isAnimated && (animationDriver == null ? void 0 : animationDriver.needsWebStyles)
-        }, themeName = (themeState == null ? void 0 : themeState.name) || "", 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);
+        }, themeName = (themeState == null ? void 0 : themeState.name) || "", 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 = stateRef.current.nextComponentState || 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
+                };
+                stateRef.current.nextComponentState = updatedState;
+                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 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 (props.group && props.untilMeasured === "hide" && !curStateRef.hasMeasured) {
+        if (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;
         (0, import_useMedia.setMediaShouldUpdate)(componentContext, shouldListenForMedia, mediaListeningKeys);
         var { viewProps: viewPropsIn, pseudos, style: splitStylesStyle, classNames, space } = splitStyles, propsWithAnimation = props, {
@@ -7203,18 +7301,18 @@ var require_createComponent_native = __commonJS({
           });
           animations && (animationStyles = animations.style, viewProps.style = animationStyles, animations.className && (viewProps.className = `${state.unmounted === "should-enter" ? "t_unmounted " : ""}${viewProps.className || ""} ${animations.className}`), animations.ref && (animatedRef = animations.ref));
         }
-        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, {
+        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;
+        }, forwardedRef, import_setElementProps.setElementProps, animatedRef)), viewProps.ref = stateRef.current.composedRef;
         var { pseudoGroups, mediaGroups } = splitStyles, unPress = function() {
           setStateShallow({
             press: !1,
@@ -7242,18 +7340,21 @@ var require_createComponent_native = __commonJS({
             });
             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
@@ -7261,24 +7362,15 @@ var require_createComponent_native = __commonJS({
           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;
-            }
-          }
+        ]), hasAnimationProp && animationDriver != null && animationDriver.avoidReRenders && (0, import_react3.useEffect)(function() {
+          stateRef.current.nextComponentState = void 0;
+        });
+        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), events = shouldAttach ? {
@@ -7292,7 +7384,7 @@ var require_createComponent_native = __commonJS({
             },
             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) {
@@ -7363,37 +7455,15 @@ var require_createComponent_native = __commonJS({
         var useChildrenResult;
         import_setupHooks.hooks.useChildren && (useChildrenResult = import_setupHooks.hooks.useChildren(elementType, content, viewProps)), 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
-        }));
-        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, {
+        })), "focusWithinStyle" in propsIn && (content = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ComponentContext.ComponentContext.Provider, {
           ...componentContext,
-          groups: subGroupContext,
           setParentFocusState: setStateShallow,
           children: content
+        })), "group" in propsIn && (content = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_GroupContext.GroupContext.Provider, {
+          value: allGroupContexts,
+          children: content
         })), content = disableTheme ? content : (0, import_Theme.getThemedChildren)(themeState, content, themeStateProps, !1, stateRef), staticConfig.context) {
           var contextProps = staticConfig.context.props;
           for (var key1 in contextProps) if (viewProps.style && key1 in viewProps.style || key1 in viewProps) {
@@ -7419,6 +7489,15 @@ var require_createComponent_native = __commonJS({
         }
         return 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;
@@ -9188,13 +9267,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);
     };
   }
 });
@@ -9361,7 +9435,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,
@@ -9385,7 +9459,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, {
@@ -9396,7 +9470,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) {
@@ -9405,16 +9479,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,
@@ -10156,10 +10230,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);
@@ -11651,7 +11726,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;
     }
@@ -11693,7 +11768,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() {