@tamagui/core 1.129.12-1751449245669 → 1.129.12

package/dist/native.js

@@ -2450,81 +2450,6 @@ 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) {
@@ -2772,55 +2697,13 @@ var require_ComponentContext_native = __commonJS({
       inText: !1,
       language: null,
       animationDriver: null,
-      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;
+      setParentFocusState: null,
+      groups: {
+        emit: null,
+        subscribe: null,
+        state: {}
       }
     });
-    module2.exports = __toCommonJS2(GroupContext_exports);
-    var import_react3 = require("react"), GroupContext = /* @__PURE__ */ (0, import_react3.createContext)(null);
   }
 });
 
@@ -3729,7 +3612,7 @@ var require_normalize_color = __commonJS({
 });
 
 // ../normalize-css-color/dist/cjs/index.native.js
-var require_index_native6 = __commonJS({
+var require_index_native5 = __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) {
@@ -3852,7 +3735,7 @@ var require_normalizeColor_native = __commonJS({
       }
     });
     module2.exports = __toCommonJS2(normalizeColor_exports);
-    var import_normalize_css_color = require_index_native6(), import_normalize_css_color2 = require_index_native6(), normalizeColor = function(color, opacity) {
+    var import_normalize_css_color = require_index_native5(), import_normalize_css_color2 = require_index_native5(), normalizeColor = function(color, opacity) {
       if (color) {
         if (color[0] === "$") return color;
         if (color.startsWith("var(")) {
@@ -5428,7 +5311,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, groupContext, elementType, startedUnhydrated, debug) {
+    var getSplitStyles = function(props, staticConfig, theme, themeName, componentState, styleProps, parentSplitStyles, componentContext, elementType, startedUnhydrated, debug) {
       var _loop = function(keyOg2) {
         var keyInit = keyOg2, valInit = props[keyInit];
         if (keyInit === "children") return viewProps[keyInit] = valInit, "continue";
@@ -5437,7 +5320,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 (process.env.NODE_ENV, disableExpandShorthands || keyInit in shorthands && (keyInit = shorthands[keyInit]), keyInit === "className") return "continue";
+        if (process.env.NODE_ENV, disableExpandShorthands || keyInit in shorthands && (keyInit = shorthands[keyInit]), keyInit === "className" || keyInit in usedKeys) return "continue";
         if (keyInit in import_skipProps.skipProps && !noSkip && !isHOC) {
           if (keyInit === "group" && !1) var identifier2, containerType, containerCSS;
           return "continue";
@@ -5462,7 +5345,7 @@ var require_getSplitStyles_native = __commonJS({
             parts.length === 2 || parts.length === 3 && import_pseudoDescriptors.pseudoPriorities[parts[parts.length - 1]]
           ) {
             var name2 = parts[1];
-            groupContext != null && groupContext[name2] || (keyInit = keyInit.replace("$group-", "$group-true-"));
+            componentContext != null && componentContext.groups.subscribe && !(componentContext != null && componentContext.groups.state[name2]) && (keyInit = keyInit.replace("$group-", "$group-true-"));
           }
         }
         var isStyleProp = isValidStyleKeyInit || isMediaOrPseudo || isVariant && !noExpand;
@@ -5488,13 +5371,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) {
+          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 (key4 === "pointerEvents") {
               viewProps[key4] = val2;
               return;
             }
             if (!isHOC && isValidStyleKey(key4, validStyles2, accept) || import_constants.isAndroid && key4 === "elevation") {
-              mergeStyle(styleState, key4, val2, 1);
+              mergeStyle(styleState, key4, val2);
               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)) {
@@ -5530,7 +5413,7 @@ var require_getSplitStyles_native = __commonJS({
                 try {
                   for (var _iterator2 = pseudoStyles[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = !0) {
                     var psuedoStyle = _step2.value, fullKey = `${psuedoStyle[import_helpers2.StyleObjectProperty]}${PROP_SPLIT}${descriptor.name}`;
-                    addStyleToInsertRules(rulesToInsert, psuedoStyle), classNames[fullKey] = psuedoStyle[import_helpers2.StyleObjectIdentifier];
+                    fullKey in usedKeys || (addStyleToInsertRules(rulesToInsert, psuedoStyle), classNames[fullKey] = psuedoStyle[import_helpers2.StyleObjectIdentifier]);
                   }
                 } catch (err) {
                   _didIteratorError2 = !0, _iteratorError2 = err;
@@ -5563,7 +5446,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, importance);
+                      mergeStyle(styleState, pkey, _$val);
                     }
                     process.env.NODE_ENV === "development" && debug === "verbose" && (0, import_log.log)("    subKey", pkey, shouldMerge, {
                       importance,
@@ -5584,7 +5467,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;
-              process.env.NODE_ENV === "development" && debug === "verbose" && (0, import_log.log)(`  \u{1F4FA} ${key4}`, {
+              if (process.env.NODE_ENV === "development" && debug === "verbose" && (0, import_log.log)(`  \u{1F4FA} ${key4}`, {
                 key: key4,
                 val: val2,
                 props,
@@ -5592,15 +5475,15 @@ var require_getSplitStyles_native = __commonJS({
                 acceptsClassName,
                 componentState,
                 mediaState: mediaState2
-              });
-              var priority = mediaStylesSeen;
-              if (mediaStylesSeen += 1, shouldDoClasses) {
+              }), 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 mediaStyles = (0, import_getCSSStylesAtomic.getCSSStylesAtomic)(mediaStyle), _iteratorNormalCompletion12 = !0, _didIteratorError12 = !1, _iteratorError12 = void 0;
+                var mediaStyles = (0, import_getCSSStylesAtomic.getCSSStylesAtomic)(mediaStyle), priority = mediaStylesSeen;
+                mediaStylesSeen += 1;
+                var _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] === "$";
@@ -5608,7 +5491,7 @@ var require_getSplitStyles_native = __commonJS({
                       var out = (0, import_createMediaStyle.createMediaStyle)(style3, mediaKeyShort, import_useMedia.mediaQueryConfig, isMedia, !1, priority);
                       process.env.NODE_ENV === "development" && debug === "verbose" && (0, import_log.log)("\u{1F4FA} media style:", out);
                       var subKey = isSubStyle ? style3[2] : "", fullKey1 = `${style3[import_helpers2.StyleObjectProperty]}${subKey}${PROP_SPLIT}${mediaKeyShort}${style3[import_helpers2.StyleObjectPseudo] || ""}`;
-                      addStyleToInsertRules(rulesToInsert, out), classNames[fullKey1] = out[import_helpers2.StyleObjectIdentifier];
+                      fullKey1 in usedKeys || (addStyleToInsertRules(rulesToInsert, out), classNames[fullKey1] = out[import_helpers2.StyleObjectIdentifier]);
                     }
                   }
                 } catch (err) {
@@ -5646,12 +5529,12 @@ var require_getSplitStyles_native = __commonJS({
                         scheme,
                         val: _$val1,
                         oppositeVal
-                      }), mergeStyle(styleState, subKey1, mediaStyle1[subKey1], priority);
+                      }), mergeStyle(styleState, subKey1, mediaStyle1[subKey1]);
                     }
                   } else if (!(themeName === mediaKeyShort || themeName.startsWith(mediaKeyShort))) return;
                 } else if (isGroupMedia) {
-                  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) {
+                  var _componentState_group, groupInfo = (0, import_getGroupPropParts.getGroupPropParts)(mediaKeyShort), groupName = groupInfo.name, groupContext = componentContext == null ? void 0 : componentContext.groups.state[groupName];
+                  if (!groupContext) {
                     process.env.NODE_ENV === "development" && debug && (0, import_log.log)(`No parent with group prop, skipping styles: ${groupName}`);
                     return;
                   }
@@ -5659,30 +5542,17 @@ 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 && 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) {
+                    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) {
                       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 = (_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) {
+                    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) {
                       for (var pkey2 in mediaStyle1) applyDefaultStyle(pkey2, styleState);
                       return;
                     }
@@ -5713,8 +5583,6 @@ var require_getSplitStyles_native = __commonJS({
               ...styleState.style
             }), (0, import_log.log)("viewProps", {
               ...viewProps
-            }), (0, import_log.log)("transforms", {
-              ...styleState.flatTransforms
             });
           } catch {
           }
@@ -5748,7 +5616,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 && import_isDevTools.isDevTools && (console.groupCollapsed("\u{1F539} getSplitStyles \u{1F447}"), (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 && (console.groupCollapsed("getSplitStyles (collapsed)"), (0, import_log.log)({
         props,
         staticConfig,
         shouldDoClasses,
@@ -5759,7 +5627,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`;
@@ -5841,8 +5709,8 @@ var require_getSplitStyles_native = __commonJS({
           }
         } else style2 && (viewProps.style = style2);
       }
-      if (process.env.NODE_ENV === "development" && debug && debug !== "profile" && import_constants.isClient && import_isDevTools.isDevTools) {
-        console.groupEnd(), console.groupCollapsed("\u{1F539} getSplitStyles ===>");
+      if (process.env.NODE_ENV === "development" && debug === "verbose" && import_isDevTools.isDevTools) {
+        console.groupCollapsed("\u{1F539} getSplitStyles ===>");
         try {
           var logs = {
             ...result,
@@ -5868,11 +5736,11 @@ var require_getSplitStyles_native = __commonJS({
         mergeTransform(target, key, val, !0);
       });
     }
-    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;
+    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;
       } else {
         var shouldNormalize = import_constants.isWeb && !disableNormalize && !styleProps.noNormalize, out = shouldNormalize ? (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(val, key) : val;
         if (
@@ -5880,8 +5748,8 @@ var require_getSplitStyles_native = __commonJS({
           staticConfig.accept && key in staticConfig.accept
         ) viewProps[key] = out;
         else {
-          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
+          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
           // if theres any flatTransforms later, causing issues (mutating props is bad, in strict mode styles get borked)
           key === "transform" && Array.isArray(out) ? [
             ...out
@@ -5912,8 +5780,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, l) {
-      var res = getSplitStyles(a, b, c, d, e, f, g, h, i, j, k, l);
+    }, 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);
       return res;
     };
     function addStyleToInsertRules(rulesToInsert, styleObject) {
@@ -5958,14 +5826,14 @@ var require_getSplitStyles_native = __commonJS({
         delete viewProps[key], viewProps[key] = next;
       } else viewProps[key] = val;
     }
-    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), process.env.NODE_ENV === "development" && debugProp === "verbose" && (0, import_log.log)(`mergeMediaByImportance ${key} importance usedKey ${usedKeys[key]} next ${importance}`), importance === null) return !1;
-      if (usedKeys[key] = importance, key in import_pseudoDescriptors.pseudoDescriptors) {
+    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) {
         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], importance);
-      } else mergeStyle(styleState, key, value, importance);
+        for (var subKey in value) mergeStyle(styleState, subKey, value[subKey]);
+      } else mergeStyle(styleState, key, value);
       return !0;
     }
     function normalizeStyle(style) {
@@ -5978,7 +5846,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, 1);
+      defaultValues != null && !(pkey in styleState.usedKeys) && (!styleState.style || !(pkey in styleState.style)) && mergeStyle(styleState, pkey, defaultValues);
     }
   }
 });
@@ -6099,6 +5967,84 @@ 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) {
@@ -6142,58 +6088,31 @@ var require_subscribeToContextGroup_native = __commonJS({
       }
     });
     module2.exports = __toCommonJS2(subscribeToContextGroup_exports);
-    var import_is_equal_shallow = require_index_native5(), import_useMedia = require_useMedia_native(), subscribeToContextGroup = function(props) {
-      var { pseudoGroups, mediaGroups, groupContext } = props;
+    var import_useMedia = require_useMedia_native(), import_is_equal_shallow = require_index_native6(), subscribeToContextGroup = function(param) {
+      var { setStateShallow, pseudoGroups, mediaGroups, componentContext, state } = param;
       if (pseudoGroups || mediaGroups) {
-        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]) || {
+        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]) || {
             pseudo: {},
             media: {}
           };
-          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);
+          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
+            });
           }
-          return didChange ? {
-            group: {
-              ...prev.group,
-              [name]: group
-            }
-          } : prev;
         });
-      }) : function() {
-      };
+      }
     };
   }
 });
@@ -6287,7 +6206,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} getSnapshot ${rerender}`, local.name, ">", next.name), console.info({
+        }, 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({
           props,
           propsKey,
           isRoot,
@@ -6322,7 +6241,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}) getNextState => ${name} needsUpdate ${needsUpdate} shouldRerender ${shouldRerender}`;
+        var message = ` \xB7 useTheme(${id}) => ${name} needsUpdate ${needsUpdate} shouldRerender ${shouldRerender}`;
         console.info(message);
       }
       if (isSameAsParent) return [
@@ -7192,8 +7111,8 @@ var require_useComponentState_native = __commonJS({
       }
     });
     module2.exports = __toCommonJS2(useComponentState_exports);
-    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);
+    var import_constants = require_index_native2(), import_is_equal_shallow = require_index_native6(), import_use_did_finish_ssr = require_index_native7(), import_react3 = require("react"), import_defaultComponentState = require_defaultComponentState_native(), import_isObj = require_isObj_native(), import_log = require_log_native(), useComponentState = function(props, param, staticConfig, config) {
+      var { animationDriver } = param, _animationDriver_usePresence, isHydrated = (0, import_use_did_finish_ssr.useDidFinishSSR)(), needsHydration = !(0, import_use_did_finish_ssr.useIsClientOnly)(), [startedUnhydrated] = (0, import_react3.useState)(needsHydration && !isHydrated), useAnimations = animationDriver == null ? void 0 : animationDriver.useAnimations, stateRef = (0, import_react3.useRef)(void 0);
       stateRef.current || (stateRef.current = {});
       var hasAnimationProp = !!("animation" in props || props.style && hasAnimatedStyleValue(props.style)), supportsCSS = animationDriver == null ? void 0 : animationDriver.supportsCSS, curStateRef = stateRef.current;
       !needsHydration && hasAnimationProp && (curStateRef.hasAnimated = !0);
@@ -7217,7 +7136,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 && (Object.assign(state, stateRef.current.nextComponentState), stateRef.current.nextComponentState = void 0);
       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 {
@@ -7241,6 +7160,46 @@ 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,
@@ -7490,26 +7449,17 @@ 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_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, debugKeyListeners, startVisualizer, componentSetStates = /* @__PURE__ */ new Set(), avoidReRenderKeys = /* @__PURE__ */ new Set([
-      "hover",
-      "press",
-      "pressIn",
-      "group",
-      "focus",
-      "focusWithin",
-      "media",
-      "group"
-    ]);
+    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();
     if (0) var cancelTouches;
     var BaseText, BaseView, hasSetupBaseViews = !1, lastInteractionWasKeyboard = {
       value: !1
     };
     import_constants.isWeb && globalThis.document && (document.addEventListener("keydown", function() {
-      lastInteractionWasKeyboard.value || (lastInteractionWasKeyboard.value = !0);
+      lastInteractionWasKeyboard.value = !0;
     }), document.addEventListener("mousedown", function() {
-      lastInteractionWasKeyboard.value && (lastInteractionWasKeyboard.value = !1);
+      lastInteractionWasKeyboard.value = !1;
     }), document.addEventListener("mousemove", function() {
-      lastInteractionWasKeyboard.value && (lastInteractionWasKeyboard.value = !1);
+      lastInteractionWasKeyboard.value = !1;
     }));
     function createComponent(staticConfig) {
       var _staticConfig_defaultProps, { componentName } = staticConfig, config = null, defaultProps = staticConfig.defaultProps;
@@ -7540,7 +7490,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 styledContextProps, overriddenContextProps, contextValue, { context, isReactNative } = staticConfig;
+        var componentContext = import_react3.default.useContext(import_ComponentContext.ComponentContext), 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) {
@@ -7565,7 +7515,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 = stateRef.current.host;
+            var show = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : !1, node = curStateRef.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");
@@ -7578,52 +7528,8 @@ var require_createComponent_native = __commonJS({
         }, [
           componentName2
         ]);
-        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, 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
-          };
-        })), process.env.NODE_ENV === "development" && time2 && time2`use-state`;
+        var animationDriver = componentContext.animationDriver, useAnimations = animationDriver == null ? void 0 : animationDriver.useAnimations, componentState = (0, import_useComponentState.useComponentState)(props, componentContext, staticConfig, config), { curStateRef, disabled, groupName, hasAnimationProp, hasEnterStyle, isAnimated, isExiting, isHydrated, presence, presenceState, setState, noClass, state, stateRef, supportsCSS, willBeAnimated, willBeAnimatedClient, startedUnhydrated } = componentState, setStateShallow = componentState.setStateShallow;
+        process.env.NODE_ENV === "development" && time2 && time2`use-state`;
         var hasTextAncestor = !!(import_constants.isWeb && isText && componentContext.inText), isTaggable = !Component || typeof Component == "string", tagProp = props.tag, element = import_constants.isWeb && isTaggable && tagProp || Component, BaseTextComponent = BaseText || element || "span", BaseViewComponent = BaseView || element || (hasTextAncestor ? "span" : "div"), elementType = isText ? BaseTextComponent : BaseViewComponent;
         animationDriver && isAnimated && // this should really be behind another prop as it's not really related to
         // "needsWebStyles" basically with motion we just animate a plain div, but
@@ -7631,14 +7537,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 && (stateRef.current.themeShallow = !0);
+        process.env.NODE_ENV === "development" && time2 && time2`theme-props`, props.themeShallow && (curStateRef.themeShallow = !0);
         var themeStateProps = {
           componentName: componentName2,
           disable: disableTheme,
-          shallow: stateRef.current.themeShallow,
+          shallow: curStateRef.themeShallow,
           debug: debugProp
         };
-        if ("themeInverse" in props && (themeStateProps.inverse = props.themeInverse), "theme" in props && (themeStateProps.name = props.theme), typeof stateRef.current.isListeningToTheme == "boolean" && (themeStateProps.needsUpdate = function() {
+        if ("themeInverse" in props && (themeStateProps.inverse = props.themeInverse), "theme" in props && (themeStateProps.name = props.theme), typeof curStateRef.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()}`;
@@ -7658,8 +7564,7 @@ var require_createComponent_native = __commonJS({
               themeStateProps
             }), (0, import_log.log)({
               contextProps: styledContextProps,
-              overriddenContextProps,
-              componentContext
+              overriddenContextProps
             }), (0, import_log.log)({
               presence,
               isAnimated,
@@ -7688,53 +7593,33 @@ 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, 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 ((hasAnimationProp || groupName) && animationDriver != null && animationDriver.avoidReRenders) {
+        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;
-          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, 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);
+          setStateShallow = function(next) {
+            var avoidReRenderKeys = /* @__PURE__ */ new Set([
+              "hover",
+              "press",
+              "pressIn"
+            ]), canAvoidReRender = Object.keys(next).every(function(key3) {
+              return avoidReRenderKeys.has(key3);
+            });
+            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 (process.env.NODE_ENV === "development" && time2 && time2`split-styles`, props.group && props.untilMeasured === "hide" && !stateRef.current.hasMeasured) {
+        if (process.env.NODE_ENV === "development" && time2 && time2`split-styles`, props.group && props.untilMeasured === "hide" && !curStateRef.hasMeasured) {
           var _splitStyles;
           (_splitStyles = splitStyles).style || (_splitStyles.style = {}), splitStyles.style.opacity = 0;
         }
-        splitStyles.dynamicThemeAccess != null && (stateRef.current.isListeningToTheme = splitStyles.dynamicThemeAccess);
+        curStateRef.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, {
@@ -7789,18 +7674,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`, 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({
+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, {
             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, stateRef.current.willHydrate)) || nonTamaguiProps, stateRef.current.composedRef || (stateRef.current.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, curStateRef.willHydrate)) || nonTamaguiProps, curStateRef.composedRef || (curStateRef.composedRef = (0, import_compose_refs.composeRefs)(function(x) {
           return stateRef.current.host = x;
-        }, 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) {
+        }, 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) {
           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`;
@@ -7842,21 +7727,18 @@ If you meant to do this, you can disable this warning - either change untilMeasu
             });
             return;
           }
-          return function() {
-            componentSetStates.delete(setState);
-          };
-        }, [
-          state.unmounted,
-          disabled
-        ]), (0, import_constants.useIsomorphicLayoutEffect)(function() {
-          if (!disabled && !(!pseudoGroups && !mediaGroups) && allGroupContexts) return (0, import_subscribeToContextGroup.subscribeToContextGroup)({
-            groupContext: allGroupContexts,
+          var dispose = !disabled && (pseudoGroups || mediaGroups) ? (0, import_subscribeToContextGroup.subscribeToContextGroup)({
+            componentContext,
             setStateShallow,
+            state,
             mediaGroups,
             pseudoGroups
-          });
+          }) : null;
+          return function() {
+            dispose == null || dispose(), componentSetStates.delete(setState);
+          };
         }, [
-          allGroupContexts,
+          state.unmounted,
           disabled,
           pseudoGroups ? Object.keys([
             ...pseudoGroups
@@ -7864,15 +7746,24 @@ If you meant to do this, you can disable this warning - either change untilMeasu
           mediaGroups ? Object.keys([
             ...mediaGroups
           ]).join("") : 0
-        ]), 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);
+        ]), (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;
+            }
+          }
         }, [
-          groupContext,
-          groupEmitter,
+          groupName,
           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);
@@ -7899,7 +7790,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 && (next.press = !1, next.pressIn = !1), setStateShallow(next), onHoverOut == null || onHoverOut(e), onMouseLeave == null || onMouseLeave(e);
+              needsHoverState && (next.hover = !1), needsPressState && state.pressIn && (next.press = !1, next.pressIn = !1), setStateShallow(next), onHoverOut == null || onHoverOut(e), onMouseLeave == null || onMouseLeave(e);
             }
           },
           onPressIn: attachPress ? function(e) {
@@ -7977,15 +7868,37 @@ 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;
-        if (ResetPresence && willBeAnimated && (hasEnterStyle || presenceState) && content && typeof content != "string" && (content = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ResetPresence, {
+        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`, "focusWithinStyle" in propsIn && (content = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ComponentContext.ComponentContext.Provider, {
+        })), 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, {
           ...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
         })), 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) {
@@ -8012,7 +7925,6 @@ 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,
@@ -8051,15 +7963,6 @@ 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;
@@ -9833,8 +9736,13 @@ var require_useConfiguration_native = __commonJS({
       }
     });
     module2.exports = __toCommonJS2(useConfiguration_exports);
-    var import_react3 = __toESM2(require("react")), import_ComponentContext = require_ComponentContext_native(), useConfiguration = function() {
-      return import_react3.default.useContext(import_ComponentContext.ComponentContext);
+    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
+      };
     };
   }
 });
@@ -10001,7 +9909,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_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();
+    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();
     function useProps(props, opts) {
       var [propsOut, styleOut] = usePropsAndStyle(props, {
         ...opts,
@@ -10025,7 +9933,7 @@ var require_useProps_native = __commonJS({
         needsUpdate() {
           return !0;
         }
-      }), 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 ? (
+      }), 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 ? (
         // 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, {
@@ -10036,7 +9944,7 @@ var require_useProps_native = __commonJS({
         noClass: !0,
         resolveValues: "auto",
         ...opts
-      }, null, componentContext, groupContext), { mediaGroups, pseudoGroups } = splitStyles;
+      }, null, componentContext), { mediaGroups, pseudoGroups } = splitStyles;
       return (0, import_constants.useIsomorphicLayoutEffect)(function() {
         if (!disabled) {
           if (state.unmounted) {
@@ -10045,16 +9953,16 @@ var require_useProps_native = __commonJS({
             });
             return;
           }
-          if (groupContext) return (0, import_subscribeToContextGroup.subscribeToContextGroup)({
-            groupContext,
+          return (0, import_subscribeToContextGroup.subscribeToContextGroup)({
+            componentContext,
             setStateShallow,
+            state,
             mediaGroups,
             pseudoGroups
           });
         }
       }, [
         disabled,
-        groupContext,
         pseudoGroups ? Object.keys([
           ...pseudoGroups
         ]).join("") : 0,
@@ -10799,7 +10707,7 @@ var require_index_native9 = __commonJS({
     __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_native5(), module2.exports);
+    __reExport2(index_exports2, require_index_native6(), module2.exports);
     var import_insertStyleRule2 = require_insertStyleRule_native();
     __reExport2(index_exports2, require_createStyledContext_native(), module2.exports);
     __reExport2(index_exports2, require_expandStyles_native(), module2.exports);
@@ -12295,7 +12203,7 @@ var require_index_native12 = __commonJS({
       }
     });
     module2.exports = __toCommonJS2(index_exports2);
-    var import_constants = require_index_native2(), import_is_equal_shallow = require_index_native5(), LayoutHandlers = /* @__PURE__ */ new WeakMap(), Nodes = /* @__PURE__ */ new Set(), strategy = "async";
+    var import_constants = require_index_native2(), import_is_equal_shallow = require_index_native6(), LayoutHandlers = /* @__PURE__ */ new WeakMap(), Nodes = /* @__PURE__ */ new Set(), strategy = "async";
     function setOnLayoutStrategy2(state) {
       strategy = state;
     }
@@ -12337,9 +12245,7 @@ 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
-            // @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))) {
+            !(0, import_is_equal_shallow.isEqualShallow)(cachedRect, nodeRect) && (!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() {