tamagui 1.129.11 → 1.129.12-1751358691172

package/dist/test.native.js

@@ -2542,6 +2542,9 @@ var require_insertStyleRule_native = __commonJS({
       shouldInsertStyleRules: function() {
         return shouldInsertStyleRules;
       },
+      stopAccumulatingRules: function() {
+        return stopAccumulatingRules;
+      },
       updateRules: function() {
         return updateRules;
       }
@@ -2612,52 +2615,61 @@ var require_insertStyleRule_native = __commonJS({
         }
       }
     }
-    function track(id) {
+    function trackInsertedStyle(id) {
       var remove = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !1, next = (totalSelectorsInserted.get(id) || 0) + (remove ? -1 : 1);
       return totalSelectorsInserted.set(id, next), next;
     }
-    var bailAfterEnv = process.env.TAMAGUI_BAIL_AFTER_SCANNING_X_CSS_RULES, bailAfter = bailAfterEnv ? +bailAfterEnv : 700, sheet = null;
+    var bailAfterEnv = process.env.TAMAGUI_BAIL_AFTER_SCANNING_X_CSS_RULES, bailAfter = bailAfterEnv ? +bailAfterEnv : 700, sheet = null, trackAllRules = !0;
+    function stopAccumulatingRules() {
+      trackAllRules = !0;
+    }
     function updateRules(identifier, rules) {
-      return identifier in allRules ? !1 : (allRules[identifier] = rules.join(" "), identifier.startsWith("_transform-") ? addTransform(identifier, rules[0]) : !0);
+      return trackAllRules && (allRules[identifier] = rules.join(" ")), identifier.startsWith("_transform-") ? addTransform(identifier, rules[0]) : !0;
     }
     var nonce = "";
     function setNonce2(_) {
       nonce = _;
     }
     function insertStyleRules2(rulesToInsert) {
-      if (!sheet && import_constants4.isClient && document.head) {
-        var styleTag = document.createElement("style");
-        nonce && (styleTag.nonce = nonce), sheet = document.head.appendChild(styleTag).sheet;
-      }
-      if (sheet) for (var key in rulesToInsert) {
-        var styleObject = rulesToInsert[key], identifier = styleObject[import_helpers.StyleObjectIdentifier];
-        if (shouldInsertStyleRules(identifier)) {
-          var rules = styleObject[import_helpers.StyleObjectRules];
-          allSelectors[identifier] = rules.join(`
-`), track(identifier), updateRules(identifier, rules);
-          var _iteratorNormalCompletion = !0, _didIteratorError = !1, _iteratorError = void 0;
-          try {
-            for (var _iterator = rules[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0) {
-              var rule = _step.value;
-              sheet.insertRule(rule, sheet.cssRules.length);
-            }
-          } catch (err) {
-            _didIteratorError = !0, _iteratorError = err;
-          } finally {
+      if (import_constants4.isClient) {
+        if (!sheet && document.head) {
+          var styleTag = document.createElement("style");
+          nonce && (styleTag.nonce = nonce), sheet = document.head.appendChild(styleTag).sheet;
+        }
+        if (!sheet) {
+          console.warn("[tamagui] no sheet");
+          return;
+        }
+        for (var key in rulesToInsert) {
+          var styleObject = rulesToInsert[key], identifier = styleObject[import_helpers.StyleObjectIdentifier];
+          if (shouldInsertStyleRules(identifier)) {
+            var rules = styleObject[import_helpers.StyleObjectRules];
+            allSelectors[identifier] = rules.join(`
+`), updateRules(identifier, rules), trackInsertedStyle(identifier);
+            var _iteratorNormalCompletion = !0, _didIteratorError = !1, _iteratorError = void 0;
             try {
-              !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
+              for (var _iterator = rules[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0) {
+                var rule = _step.value;
+                sheet.insertRule(rule, sheet.cssRules.length);
+              }
+            } catch (err) {
+              _didIteratorError = !0, _iteratorError = err;
             } finally {
-              if (_didIteratorError) throw _iteratorError;
+              try {
+                !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
+              } finally {
+                if (_didIteratorError) throw _iteratorError;
+              }
             }
           }
         }
       }
     }
-    var minInsertAmt = process.env.TAMAGUI_INSERT_SELECTOR_TRIES ? +process.env.TAMAGUI_INSERT_SELECTOR_TRIES : 1;
+    var maxToInsert = process.env.TAMAGUI_INSERT_SELECTOR_TRIES ? +process.env.TAMAGUI_INSERT_SELECTOR_TRIES : 1;
     function shouldInsertStyleRules(identifier) {
       if (process.env.IS_STATIC === "is_static") return !0;
-      var total = totalSelectorsInserted.get(identifier);
-      return total === void 0 || total < minInsertAmt;
+      var total = totalSelectorsInserted.get(identifier) || 0;
+      return total < maxToInsert;
     }
   }
 });
@@ -6200,7 +6212,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_helpers.StyleObjectProperty]}${PROP_SPLIT}${descriptor.name}`;
-                    fullKey in usedKeys || (addStyleToInsertRules(rulesToInsert, psuedoStyle, startedUnhydrated), classNames[fullKey] = psuedoStyle[import_helpers.StyleObjectIdentifier]);
+                    fullKey in usedKeys || (addStyleToInsertRules(rulesToInsert, psuedoStyle), classNames[fullKey] = psuedoStyle[import_helpers.StyleObjectIdentifier]);
                   }
                 } catch (err) {
                   _didIteratorError2 = !0, _iteratorError2 = err;
@@ -6255,7 +6267,7 @@ var require_getSplitStyles_native = __commonJS({
                     var style3 = _step12.value, property = style3[import_helpers.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_helpers.StyleObjectProperty]}${subKey}${PROP_SPLIT}${mediaKeyShort}${style3[import_helpers.StyleObjectPseudo] || ""}`;
-                      fullKey1 in usedKeys || (addStyleToInsertRules(rulesToInsert, out, startedUnhydrated), classNames[fullKey1] = out[import_helpers.StyleObjectIdentifier]);
+                      fullKey1 in usedKeys || (addStyleToInsertRules(rulesToInsert, out), classNames[fullKey1] = out[import_helpers.StyleObjectIdentifier]);
                     }
                   }
                 } catch (err) {
@@ -6505,7 +6517,6 @@ var require_getSplitStyles_native = __commonJS({
       return res;
     };
     function addStyleToInsertRules(rulesToInsert, styleObject) {
-      var startedUnhydrated = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : !1;
       if (0) var identifier;
     }
     var defaultColor = process.env.TAMAGUI_DEFAULT_COLOR || "rgba(0,0,0,0)", animatableDefaults = {
@@ -7603,7 +7614,7 @@ var require_wrapStyleTags_native = __commonJS({
     });
     module2.exports = __toCommonJS2(wrapStyleTags_exports);
     var import_jsx_runtime6 = require("react/jsx-runtime"), import_constants4 = require_index_native6(), import_helpers = require_index_native7();
-    function getStyleTags(styles, content) {
+    function getStyleTags(styles) {
       import_constants4.IS_REACT_19;
     }
   }
@@ -7792,14 +7803,14 @@ var require_useComponentState_native = __commonJS({
     var import_constants4 = require_index_native6(), import_is_equal_shallow = require_index_native13(), import_use_did_finish_ssr = require_index_native14(), import_react3 = require("react"), import_defaultComponentState = require_defaultComponentState_native(), import_isObj = require_isObj_native(), import_log = require_log_native(), useComponentState = function(props, param, staticConfig, config) {
       var { animationDriver } = param, _animationDriver_usePresence, isHydrated = (0, import_use_did_finish_ssr.useDidFinishSSR)(), needsHydration = !(0, import_use_did_finish_ssr.useIsClientOnly)(), [startedUnhydrated] = (0, import_react3.useState)(needsHydration && !isHydrated), useAnimations = animationDriver == null ? void 0 : animationDriver.useAnimations, stateRef = (0, import_react3.useRef)(void 0);
       stateRef.current || (stateRef.current = {});
-      var hasAnimationProp = !!("animation" in props || props.style && hasAnimatedStyleValue(props.style)), supportsCSSVars = animationDriver == null ? void 0 : animationDriver.supportsCSSVars, curStateRef = stateRef.current;
+      var hasAnimationProp = !!("animation" in props || props.style && hasAnimatedStyleValue(props.style)), supportsCSS = animationDriver == null ? void 0 : animationDriver.supportsCSS, curStateRef = stateRef.current;
       !needsHydration && hasAnimationProp && (curStateRef.hasAnimated = !0);
       var willBeAnimatedClient = function() {
         var next = !!(hasAnimationProp && !staticConfig.isHOC && useAnimations);
         return !!(next || curStateRef.hasAnimated);
       }(), willBeAnimated = !import_constants4.isServer && willBeAnimatedClient;
       willBeAnimated && !curStateRef.hasAnimated && (curStateRef.hasAnimated = !0);
-      var { disableClassName } = props, presence = willBeAnimated && props.animatePresence !== !1 && (animationDriver == null || (_animationDriver_usePresence = animationDriver.usePresence) === null || _animationDriver_usePresence === void 0 ? void 0 : _animationDriver_usePresence.call(animationDriver)) || null, presenceState = presence == null ? void 0 : presence[2], isExiting = (presenceState == null ? void 0 : presenceState.isPresent) === !1, isEntering = (presenceState == null ? void 0 : presenceState.isPresent) === !0 && presenceState.initial !== !1, hasEnterStyle = !!props.enterStyle, hasAnimationThatNeedsHydrate = hasAnimationProp && !isHydrated && ((animationDriver == null ? void 0 : animationDriver.isReactNative) || !supportsCSSVars), hasEnterState = hasEnterStyle || isEntering, shouldEnter = hasEnterState || hasAnimationThatNeedsHydrate || // disableClassName doesnt work server side, only client, so needs hydrate
+      var { disableClassName } = props, presence = willBeAnimated && props.animatePresence !== !1 && (animationDriver == null || (_animationDriver_usePresence = animationDriver.usePresence) === null || _animationDriver_usePresence === void 0 ? void 0 : _animationDriver_usePresence.call(animationDriver)) || null, presenceState = presence == null ? void 0 : presence[2], isExiting = (presenceState == null ? void 0 : presenceState.isPresent) === !1, isEntering = (presenceState == null ? void 0 : presenceState.isPresent) === !0 && presenceState.initial !== !1, hasEnterStyle = !!props.enterStyle, hasAnimationThatNeedsHydrate = hasAnimationProp && !isHydrated && ((animationDriver == null ? void 0 : animationDriver.isReactNative) || !supportsCSS), hasEnterState = hasEnterStyle || isEntering, shouldEnter = hasEnterState || hasAnimationThatNeedsHydrate || // disableClassName doesnt work server side, only client, so needs hydrate
       // this is just for a better ux, supports css variables for light/dark, media queries, etc
       disableClassName, initialState = shouldEnter ? (
         // on the very first render we switch all spring animation drivers to css rendering
@@ -7813,7 +7824,9 @@ var require_useComponentState_native = __commonJS({
       var states = (0, import_react3.useState)(initialState), state = props.forceStyle ? {
         ...states[0],
         [props.forceStyle]: !0
-      } : states[0], setState = states[1], isAnimated = willBeAnimated;
+      } : states[0], setState = states[1];
+      stateRef.current.nextComponentState && (Object.assign(state, stateRef.current.nextComponentState), stateRef.current.nextComponentState = void 0);
+      var isAnimated = willBeAnimated;
       import_constants4.isWeb && hasAnimationThatNeedsHydrate && !staticConfig.isHOC && !isHydrated && (isAnimated = !1, curStateRef.willHydrate = !0), disabled !== state.disabled && (disabled && Object.assign(state, import_defaultComponentState.defaultComponentStateMounted), state.disabled = disabled, setState(function(_) {
         return {
           ...state
@@ -7828,7 +7841,7 @@ var require_useComponentState_native = __commonJS({
       }
       var noClass = !import_constants4.isWeb || !!props.forceStyle || isAnimated && (animationDriver == null ? void 0 : animationDriver.needsWebStyles);
       if (import_constants4.isWeb && (!import_constants4.isServer || isHydrated)) {
-        var isAnimatedAndHydrated = isAnimated && !supportsCSSVars, isClassNameDisabled = !staticConfig.acceptsClassName && (config.disableSSR || !state.unmounted), isDisabledManually = disableClassName && !state.unmounted;
+        var isAnimatedAndHydrated = isAnimated && !supportsCSS, isClassNameDisabled = !staticConfig.acceptsClassName && (config.disableSSR || !state.unmounted), isDisabledManually = disableClassName && !state.unmounted;
         (isAnimatedAndHydrated || isDisabledManually || isClassNameDisabled) && (noClass = !0);
       }
       if (groupName && !curStateRef.group) {
@@ -7888,7 +7901,7 @@ var require_useComponentState_native = __commonJS({
         noClass,
         state,
         stateRef,
-        supportsCSSVars,
+        supportsCSS,
         willBeAnimated,
         willBeAnimatedClient
       };
@@ -8121,18 +8134,8 @@ var require_createComponent_native = __commonJS({
     });
     module2.exports = __toCommonJS2(createComponent_exports);
     var import_jsx_runtime6 = require("react/jsx-runtime"), import_compose_refs = require_index_native11(), import_constants4 = require_index_native6(), import_helpers = require_index_native7(), import_react3 = __toESM2(require("react")), import_config = require_config_native(), import_constants22 = 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();
-    typeof window < "u" && (cancelTouches = function() {
-      componentSetStates.forEach(function(setState) {
-        return setState(function(prev) {
-          return prev.press || prev.pressIn ? {
-            ...prev,
-            press: !1,
-            pressIn: !1
-          } : prev;
-        });
-      }), componentSetStates.clear();
-    }, addEventListener("mouseup", cancelTouches), addEventListener("touchend", cancelTouches), addEventListener("touchcancel", cancelTouches));
-    var cancelTouches, BaseText, BaseView, hasSetupBaseViews = !1, lastInteractionWasKeyboard = {
+    if (0) var cancelTouches;
+    var BaseText, BaseView, hasSetupBaseViews = !1, lastInteractionWasKeyboard = {
       value: !1
     };
     import_constants4.isWeb && globalThis.document && (document.addEventListener("keydown", function() {
@@ -8184,7 +8187,7 @@ 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, supportsCSSVars, willBeAnimated, willBeAnimatedClient, startedUnhydrated } = componentState, setStateShallow = componentState.setStateShallow, hasTextAncestor = !!(import_constants4.isWeb && isText && componentContext.inText), isTaggable = !Component || typeof Component == "string", tagProp = props.tag, element = import_constants4.isWeb && isTaggable && tagProp || Component, BaseTextComponent = BaseText || element || "span", BaseViewComponent = BaseView || element || (hasTextAncestor ? "span" : "div"), elementType = isText ? BaseTextComponent : BaseViewComponent;
+        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_constants4.isWeb && isText && componentContext.inText), isTaggable = !Component || typeof Component == "string", tagProp = props.tag, element = import_constants4.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
@@ -8210,7 +8213,7 @@ var require_createComponent_native = __commonJS({
         (0, import_createVariable.setDidGetVariableValue)(!1);
         var resolveValues = (
           // if HOC + mounted + has animation prop, resolve as value so it passes non-variable to child
-          isAnimated && !supportsCSSVars || isHOC && state.unmounted == !1 && hasAnimationProp ? "value" : "auto"
+          isAnimated && !supportsCSS || isHOC && state.unmounted == !1 && hasAnimationProp ? "value" : "auto"
         ), styleProps = {
           mediaState: mediaState3,
           noClass,
@@ -8235,7 +8238,9 @@ var require_createComponent_native = __commonJS({
               var updatedState = {
                 ...state,
                 ...next
-              }, nextStyles = (0, import_getSplitStyles.getSplitStyles)(props, staticConfig, theme, themeName, updatedState, styleProps, null, componentContext, elementType, startedUnhydrated, debugProp);
+              };
+              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);
           };
@@ -8275,7 +8280,7 @@ var require_createComponent_native = __commonJS({
         !isTaggable && props.forceStyle && (viewProps.forceStyle = props.forceStyle), isHOC && _themeProp && (viewProps.theme = _themeProp), tagProp && elementType.acceptTagProp && (viewProps.tag = tagProp);
         var animationStyles, shouldUseAnimation = (
           // if it supports css vars we run it on server too to get matching initial style
-          (supportsCSSVars ? willBeAnimatedClient : willBeAnimated) && useAnimations && !isHOC
+          (supportsCSS ? willBeAnimatedClient : willBeAnimated) && useAnimations && !isHOC
         ), animatedRef;
         if (shouldUseAnimation) {
           var useStyleEmitter = animationDriver != null && animationDriver.avoidReRenders ? function(listener) {
@@ -8324,8 +8329,7 @@ var require_createComponent_native = __commonJS({
           }
           var tm;
           if (state.unmounted) {
-            var _config_animations2, _animationDriver_supportsCSSVars;
-            if (((_animationDriver_supportsCSSVars = animationDriver == null ? void 0 : animationDriver.supportsCSSVars) !== null && _animationDriver_supportsCSSVars !== void 0 ? _animationDriver_supportsCSSVars : !(config == null || (_config_animations2 = config.animations) === null || _config_animations2 === void 0) && _config_animations2.supportsCSSVars) || import_constants4.isAndroid) return tm = setTimeout(function() {
+            if (animationDriver != null && animationDriver.supportsCSS || import_constants4.isAndroid) return tm = setTimeout(function() {
               setStateShallow({
                 unmounted: !1
               });
@@ -10847,7 +10851,7 @@ var require_TamaguiProvider_native = __commonJS({
       }
     });
     module2.exports = __toCommonJS2(TamaguiProvider_exports);
-    var import_jsx_runtime6 = require("react/jsx-runtime"), import_constants4 = require_index_native6(), import_use_did_finish_ssr = require_index_native14(), import_react3 = __toESM2(require("react")), import_config = require_config_native(), import_ComponentContext = require_ComponentContext_native(), import_useMedia = require_useMedia_native(), import_ThemeProvider = require_ThemeProvider_native();
+    var import_jsx_runtime6 = require("react/jsx-runtime"), import_constants4 = require_index_native6(), import_use_did_finish_ssr = require_index_native14(), import_react3 = __toESM2(require("react")), import_config = require_config_native(), import_ComponentContext = require_ComponentContext_native(), import_useMedia = require_useMedia_native(), import_ThemeProvider = require_ThemeProvider_native(), import_insertStyleRule = require_insertStyleRule_native();
     function TamaguiProvider2(param) {
       var { children, disableInjectCSS, config, className, defaultTheme, disableRootThemeClass, reset, themeClassNameOnRoot } = param;
       import_constants4.IS_REACT_19 || import_constants4.isClient && (0, import_constants4.useIsomorphicLayoutEffect)(function() {
@@ -10861,7 +10865,7 @@ var require_TamaguiProvider_native = __commonJS({
         config,
         disableInjectCSS
       ]), (0, import_constants4.useIsomorphicLayoutEffect)(function() {
-        (0, import_useMedia.updateMediaListeners)();
+        (0, import_insertStyleRule.stopAccumulatingRules)(), (0, import_useMedia.updateMediaListeners)();
       }, []);
       var contents = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(UnmountedClassName, {
         children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_ComponentContext.ComponentContext.Provider, {
@@ -12777,49 +12781,51 @@ var require_index_native19 = __commonJS({
         return cb();
       }), queuedUpdates.clear()));
     }
+    var expectedFrameTime = 16.67, numDroppedFramesUntilPause = 10;
     if (import_constants4.isClient && rAF) {
       layoutOnAnimationFrame = function() {
         var now = Date.now(), timeSinceLastFrame = now - lastFrameAt;
-        if (lastFrameAt = now, strategy !== "off") {
-          var expectedFrameTime = 16.67, hasRecentSyncWork = timeSinceLastFrame > expectedFrameTime * numDroppedFramesUntilPause;
+        if (lastFrameAt = now, frameCount < runEveryXFrames) {
+          frameCount++, rAF(layoutOnAnimationFrame);
+          return;
+        }
+        if (frameCount = 0, strategy !== "off") {
+          var hasRecentSyncWork = timeSinceLastFrame > expectedFrameTime * numDroppedFramesUntilPause;
           hasRecentSyncWork || Nodes.forEach(function(node) {
             updateLayoutIfChanged(node, lastFrameAt);
           });
         }
         rAF(layoutOnAnimationFrame);
-      }, layoutOnAnimationFrame2 = layoutOnAnimationFrame, lastFrameAt = Date.now(), numDroppedFramesUntilPause = 2;
+      }, layoutOnAnimationFrame2 = layoutOnAnimationFrame, lastFrameAt = Date.now();
       async function updateLayoutIfChanged(node, frameId) {
-        var parentNode = node.parentElement, nodeRect, parentRect;
-        if (strategy === "async") {
-          var [nr, pr] = await Promise.all([
-            getBoundingClientRectAsync(node),
-            getBoundingClientRectAsync(parentNode)
-          ]);
-          if (frameId !== lastFrameAt) return;
-          nodeRect = nr, parentRect = pr;
-        } else nodeRect = node.getBoundingClientRect(), parentRect = parentNode == null ? void 0 : parentNode.getBoundingClientRect();
-        if (parentRect) {
-          var onLayout = LayoutHandlers.get(node);
-          if (typeof onLayout == "function") {
-            var cachedRect = NodeRectCache.get(node), cachedParentRect = parentNode ? NodeRectCache.get(parentNode) : null;
+        var onLayout = LayoutHandlers.get(node);
+        if (typeof onLayout == "function") {
+          var parentNode = node.parentElement;
+          if (parentNode) {
+            var nodeRect, parentRect;
+            if (strategy === "async") {
+              var [nr, pr] = await Promise.all([
+                getBoundingClientRectAsync(node),
+                getBoundingClientRectAsync(parentNode)
+              ]);
+              if (frameId !== lastFrameAt) return;
+              nodeRect = nr, parentRect = pr;
+            } else nodeRect = node.getBoundingClientRect(), parentRect = parentNode.getBoundingClientRect();
+            var cachedRect = NodeRectCache.get(node), cachedParentRect = NodeRectCache.get(parentNode);
             if (!cachedRect || // has changed one rect
             !(0, import_is_equal_shallow.isEqualShallow)(cachedRect, nodeRect) && (!cachedParentRect || !(0, import_is_equal_shallow.isEqualShallow)(cachedParentRect, parentRect))) {
-              if (NodeRectCache.set(node, nodeRect), parentRect && parentNode && ParentRectCache.set(parentNode, parentRect), avoidUpdates) {
-                var event = getElementLayoutEvent(nodeRect, parentRect);
-                queuedUpdates.set(node, function() {
-                  return onLayout(event);
-                });
-              } else if (strategy !== "async") {
-                var event1 = getElementLayoutEvent(nodeRect, parentRect);
-                onLayout(event1);
-              }
+              NodeRectCache.set(node, nodeRect), ParentRectCache.set(parentNode, parentRect);
+              var event = getElementLayoutEvent(nodeRect, parentRect);
+              avoidUpdates ? queuedUpdates.set(node, function() {
+                return onLayout(event);
+              }) : onLayout(event);
             }
           }
         }
       }
-      rAF(layoutOnAnimationFrame);
+      rAF(layoutOnAnimationFrame), frameCount = 0, runEveryXFrames = 6;
     }
-    var layoutOnAnimationFrame, layoutOnAnimationFrame2, lastFrameAt, numDroppedFramesUntilPause, getElementLayoutEvent = function(nodeRect, parentRect) {
+    var layoutOnAnimationFrame, layoutOnAnimationFrame2, lastFrameAt, frameCount, runEveryXFrames, getElementLayoutEvent = function(nodeRect, parentRect) {
       return {
         nativeEvent: {
           layout: getRelativeDimensions(nodeRect, parentRect),
@@ -17861,7 +17867,7 @@ var require_SheetImplementationCustom_native = __commonJS({
       var parentSheet = import_react3.default.useContext(import_contexts.ParentSheetContext), { animation, animationConfig: animationConfigProp, modal = !1, zIndex = parentSheet.zIndex + 1, moveOnKeyboardChange = !1, unmountChildrenWhenHidden = !1, portalProps, containerComponent: ContainerComponent = import_react3.default.Fragment } = props, state = (0, import_useSheetOpenState.useSheetOpenState)(props), [overlayComponent, setOverlayComponent] = import_react3.default.useState(null), providerProps = (0, import_useSheetProviderProps.useSheetProviderProps)(props, state, {
         onOverlayComponent: setOverlayComponent
       }), { frameSize, setFrameSize, snapPoints, snapPointsMode, hasFit, position, setPosition, scrollBridge, screenSize, setMaxContentSize, maxSnapPoint } = providerProps, { open, controller, isHidden } = state, sheetRef = import_react3.default.useRef(void 0), ref = (0, import_compose_refs.useComposedRefs)(forwardedRef, sheetRef, providerProps.contentRef), { animationDriver } = (0, import_core12.useConfiguration)(), animationConfig = function() {
-        if (animationDriver.supportsCSSVars) return {};
+        if (animationDriver.supportsCSS) return {};
         var [animationProp, animationPropConfig] = animation ? Array.isArray(animation) ? animation : [
           animation
         ] : [];
@@ -30187,6 +30193,8 @@ EnsureFlexed.isVisuallyHidden = !0;
 var import_core5 = __toESM(require_index_native20()), import_stacks = __toESM(require_index_native24()), Fieldset = (0, import_core5.styled)(import_stacks.YStack, {
   name: "Fieldset",
   tag: "fieldset",
+  // remove browser default styling
+  borderWidth: 0,
   variants: {
     horizontal: {
       true: {