tamagui 1.92.1 → 1.93.0

package/dist/native.js

@@ -2428,12 +2428,16 @@ var require_createVariable_native = __commonJS({
         writable: !0
       }) : obj[key] = value, obj;
     }
-    var IS_VAR = "isVar", createVariable2 = function(props) {
+    var IS_VAR = "isVar";
+    function constructCSSVariableName(name) {
+      return "var(--".concat(process.env.TAMAGUI_CSS_VARIABLE_PREFIX || "").concat(name, ")");
+    }
+    var createVariable2 = function(props) {
       var skipHash = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !1;
       if (!skipHash && isVariable2(props))
         return props;
       var key = props.key, name = props.name, val = props.val, _obj;
-      return _obj = {}, _define_property9(_obj, IS_VAR, !0), _define_property9(_obj, "key", key), _define_property9(_obj, "name", skipHash ? "" : (0, import_helpers.simpleHash)(name, 40)), _define_property9(_obj, "val", val), _define_property9(_obj, "variable", import_constants4.isWeb ? skipHash ? "var(--".concat(name, ")") : createCSSVariable(name) : ""), _obj;
+      return _obj = {}, _define_property9(_obj, IS_VAR, !0), _define_property9(_obj, "key", key), _define_property9(_obj, "name", skipHash ? "" : (0, import_helpers.simpleHash)(name, 40)), _define_property9(_obj, "val", val), _define_property9(_obj, "variable", import_constants4.isWeb ? skipHash ? constructCSSVariableName(name) : createCSSVariable(name) : ""), _obj;
     };
     function variableToString3(vrble) {
       var getValue = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !1;
@@ -2467,7 +2471,7 @@ var require_createVariable_native = __commonJS({
       if (process.env.NODE_ENV === "development" && (!nameProp || typeof nameProp != "string"))
         throw new Error("createCSSVariable expected string, got: ".concat(nameProp));
       var name = (0, import_helpers.simpleHash)(nameProp, 60);
-      return includeVar ? "var(--".concat(name, ")") : name;
+      return includeVar ? constructCSSVariableName(name) : name;
     };
   }
 });
@@ -2753,7 +2757,9 @@ var require_insertStyleRule_native = __commonJS({
           for (var _iterator = rules[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0) {
             var rule = _step.value, sepI = rule.indexOf(":");
             if (sepI !== -1) {
-              var varIndex = rule.indexOf("--"), key1 = rule.slice(varIndex === -1 ? 0 : varIndex + 2, sepI), val = rule.slice(sepI + 2), value = void 0;
+              var varIndex = rule.indexOf("--"), key1 = rule.slice(varIndex === -1 ? 0 : varIndex + 2, sepI);
+              process.env.TAMAGUI_CSS_VARIABLE_PREFIX && (key1 = key1.replace(process.env.TAMAGUI_CSS_VARIABLE_PREFIX, ""));
+              var val = rule.slice(sepI + 2), value = void 0;
               if (val.startsWith("var(")) {
                 var varName = val.slice(6, -1), tokenVal = colorVarToVal[varName];
                 tokenVal ? value = tokenVal : (rootComputedStyle || (rootComputedStyle = getComputedStyle(document.body)), value = rootComputedStyle.getPropertyValue("--" + varName));
@@ -6691,11 +6697,6 @@ var require_expandStyle_native = __commonJS({
       });
     };
     function expandStyle(key, value) {
-      if (0)
-        switch (key) {
-          case "textAlignVertical":
-          case "writingDirection":
-        }
       if (import_constants4.isAndroid && key === "elevationAndroid")
         return [
           [
@@ -7809,22 +7810,8 @@ var require_getSplitStyles_native = __commonJS({
               viewProps["data-".concat(hyphenate(keyInit1))] = valInit[keyInit1];
             continue;
           }
-          if (0) {
+          if (0)
             var didUseKeyInit;
-            if (!isReactNative)
-              switch (keyInit) {
-                case "accessibilityRole":
-                case "accessibilityLabelledBy":
-                case "accessibilityFlowTo":
-                case "accessibilityControls":
-                case "accessibilityDescribedBy":
-                case "accessibilityKeyShortcuts":
-                case "accessibilityLiveRegion":
-                case "accessibilityReadOnly":
-                case "accessibilityRequired":
-                default:
-              }
-          }
           var isShorthand = keyInit in shorthands, isVariant = !isValidStyleKeyInit && variants && keyInit in variants, isStyleLikeKey = isShorthand || isValidStyleKeyInit || isVariant, isPseudo = keyInit in import_helpers.validPseudoKeys, isMedia = !isStyleLikeKey && !isPseudo && (0, import_useMedia.isMediaKey)(keyInit), isMediaOrPseudo1 = !!(isMedia || isPseudo), isStyleProp = isValidStyleKeyInit || isMediaOrPseudo1 || isVariant && !styleProps.noExpand || isShorthand;
           if (!(isStyleProp && (props.asChild === "except-style" || props.asChild === "except-style-web"))) {
             var shouldPassProp = !isStyleProp || // is in parent variants
@@ -9033,11 +9020,20 @@ var require_createComponent_native = __commonJS({
       createComponent: function() {
         return createComponent2;
       },
+      isDisabled: function() {
+        return isDisabled;
+      },
       mouseUps: function() {
         return mouseUps;
       },
       spacedChildren: function() {
         return spacedChildren2;
+      },
+      subscribeToContextGroup: function() {
+        return subscribeToContextGroup;
+      },
+      useComponentState: function() {
+        return useComponentState;
       }
     });
     module2.exports = __toCommonJS2(createComponent_exports);
@@ -9165,7 +9161,7 @@ var require_createComponent_native = __commonJS({
     }
     function _templateObject() {
       var data = _tagged_template_literal([
-        "start (ignore)"
+        "pre-use-state"
       ]);
       return _templateObject = function() {
         return data;
@@ -9173,7 +9169,7 @@ var require_createComponent_native = __commonJS({
     }
     function _templateObject1() {
       var data = _tagged_template_literal([
-        "did-finish-ssr"
+        "start (ignore)"
       ]);
       return _templateObject1 = function() {
         return data;
@@ -9181,7 +9177,7 @@ var require_createComponent_native = __commonJS({
     }
     function _templateObject2() {
       var data = _tagged_template_literal([
-        "stateref"
+        "did-finish-ssr"
       ]);
       return _templateObject2 = function() {
         return data;
@@ -9189,7 +9185,7 @@ var require_createComponent_native = __commonJS({
     }
     function _templateObject3() {
       var data = _tagged_template_literal([
-        "pre-use-state"
+        "stateref"
       ]);
       return _templateObject3 = function() {
         return data;
@@ -9369,7 +9365,81 @@ var require_createComponent_native = __commonJS({
         });
       }
     }));
-    var cancelTouches, BaseText, BaseView, hasSetupBaseViews = !1, lastInteractionWasKeyboard = {
+    var cancelTouches, useComponentState = function(props, param, staticConfig, config) {
+      var animationDriver = param.animationDriver, groups = param.groups, _animationDriver_usePresence, useAnimations = animationDriver == null ? void 0 : animationDriver.useAnimations, stateRef = (0, import_react4.useRef)({}), hasAnimationProp = !!("animation" in props || props.style && hasAnimatedStyleValue(props.style)), supportsCSSVars = animationDriver == null ? void 0 : animationDriver.supportsCSSVars, curStateRef = stateRef.current, willBeAnimatedClient = function() {
+        var next = !!(hasAnimationProp && !staticConfig.isHOC && useAnimations);
+        return !!(next || curStateRef.hasAnimated);
+      }(), willBeAnimated = !import_constants4.isServer && willBeAnimatedClient;
+      willBeAnimated && !curStateRef.hasAnimated && (curStateRef.hasAnimated = !0);
+      var isHydrated = config != null && config.disableSSR ? !0 : (0, import_use_did_finish_ssr.useDidFinishSSR)(), 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, hasRNAnimation = hasAnimationProp && (animationDriver == null ? void 0 : animationDriver.isReactNative), isReactNative = staticConfig.isReactNative, isAnimated = willBeAnimated;
+      !isReactNative && hasRNAnimation && !staticConfig.isHOC && !isHydrated && (isAnimated = !1, curStateRef.willHydrate = !0), process.env.NODE_ENV === "development" && time && time(_templateObject());
+      var hasEnterState = hasEnterStyle || isEntering, needsToMount = !isHydrated || !curStateRef.host, initialState = hasEnterState ? needsToMount ? import_defaultComponentState.defaultComponentStateShouldEnter : import_defaultComponentState.defaultComponentState : import_defaultComponentState.defaultComponentStateMounted, disabled = isDisabled(props);
+      disabled != null && (initialState.disabled = disabled);
+      var states = (0, import_react4.useState)(initialState), state = props.forceStyle ? _object_spread_props8(_object_spread9({}, states[0]), _define_property9({}, props.forceStyle, !0)) : states[0], setState = states[1];
+      disabled !== state.disabled && setState(_object_spread_props8(_object_spread9({}, state, import_defaultComponentState.defaultComponentState), {
+        // removes any stale press state etc
+        disabled
+      }));
+      var setStateShallow = (0, import_createShallowSetState.createShallowSetState)(setState, disabled, props.debug);
+      if (isHydrated && state.unmounted === "should-enter" && (state.unmounted = !0), presenceState && isAnimated && isHydrated && staticConfig.variants) {
+        process.env.NODE_ENV === "development" && props.debug === "verbose" && console.warn("has presenceState ".concat(JSON.stringify(presenceState)));
+        var enterVariant = presenceState.enterVariant, exitVariant = presenceState.exitVariant, enterExitVariant = presenceState.enterExitVariant, custom = presenceState.custom;
+        (0, import_isObj.isObj)(custom) && Object.assign(props, custom);
+        var exv = exitVariant ?? enterExitVariant, env = enterVariant ?? enterExitVariant;
+        state.unmounted && env && staticConfig.variants[env] ? (process.env.NODE_ENV === "development" && props.debug === "verbose" && console.warn('Animating presence ENTER "'.concat(env, '"')), props[env] = !0) : isExiting && exv && (process.env.NODE_ENV === "development" && props.debug === "verbose" && console.warn('Animating presence EXIT "'.concat(exv, '"')), props[exv] = exitVariant !== enterExitVariant);
+      }
+      var shouldAvoidClasses = !!(!import_constants4.isWeb || isAnimated && !supportsCSSVars || !staticConfig.acceptsClassName || // on server for SSR and animation compat added the && isHydrated but perhaps we want
+      // disableClassName="until-hydrated" to be more straightforward
+      // see issue if not, Button sets disableClassName to true <Button animation="" /> with
+      // the react-native driver errors because it tries to animate var(--color) to rbga(..)
+      props.disableClassName && isHydrated), groupName = props.group;
+      if (groupName && !curStateRef.group) {
+        var listeners = /* @__PURE__ */ new Set();
+        curStateRef.group = {
+          listeners,
+          emit: function(name, state2) {
+            listeners.forEach(function(l) {
+              return l(name, state2);
+            });
+          },
+          subscribe: function(cb) {
+            return listeners.add(cb), function() {
+              listeners.delete(cb);
+            };
+          }
+        };
+      }
+      if (groupName) {
+        var groupContextState = groups.state, og = setStateShallow;
+        setStateShallow = function(state2) {
+          og(state2), curStateRef.group.emit(groupName, {
+            pseudo: state2
+          });
+          var next = _object_spread9({}, groupContextState[groupName], state2);
+          groupContextState[groupName] = next;
+        };
+      }
+      return {
+        curStateRef,
+        disabled,
+        groupName,
+        hasAnimationProp,
+        hasEnterStyle,
+        isAnimated,
+        isExiting,
+        isHydrated,
+        presence,
+        presenceState,
+        setState,
+        setStateShallow,
+        shouldAvoidClasses,
+        state,
+        stateRef,
+        supportsCSSVars,
+        willBeAnimated,
+        willBeAnimatedClient
+      };
+    }, BaseText, BaseView, hasSetupBaseViews = !1, lastInteractionWasKeyboard = {
       value: !1
     };
     import_constants4.isWeb && globalThis.document && (document.addEventListener("keydown", function() {
@@ -9387,14 +9457,14 @@ var require_createComponent_native = __commonJS({
           defaultForComponent && (defaultProps = _object_spread9({}, defaultForComponent, defaultProps));
         }
       });
-      var Component = staticConfig.Component, isText = staticConfig.isText, isInput = staticConfig.isInput, isZStack = staticConfig.isZStack, isHOC = staticConfig.isHOC, _staticConfig_validStyles = staticConfig.validStyles, _$validStyles = _staticConfig_validStyles === void 0 ? {} : _staticConfig_validStyles, _staticConfig_variants = staticConfig.variants, variants = _staticConfig_variants === void 0 ? {} : _staticConfig_variants;
+      var Component = staticConfig.Component, isText = staticConfig.isText, isZStack = staticConfig.isZStack, isHOC = staticConfig.isHOC, _staticConfig_validStyles = staticConfig.validStyles, _$validStyles = _staticConfig_validStyles === void 0 ? {} : _staticConfig_validStyles, _staticConfig_variants = staticConfig.variants, variants = _staticConfig_variants === void 0 ? {} : _staticConfig_variants;
       process.env.NODE_ENV === "development" && !((_staticConfig_defaultProps = staticConfig.defaultProps) === null || _staticConfig_defaultProps === void 0) && _staticConfig_defaultProps.debug && process.env.IS_STATIC !== "is_static" && (0, import_log.log)("\u{1F41B} [".concat(componentName || "Component", "]"), {
         staticConfig,
         defaultProps,
         defaultPropsKeyOrder: defaultProps ? Object.keys(defaultProps) : []
       });
       var component = /* @__PURE__ */ (0, import_react4.forwardRef)(function(propsIn, forwardedRef) {
-        var _animationsConfig_usePresence, _props_accessibilityState, _themeState_state, _hooks_usePropsTransform, _hooks_useEvents, _config_animations, internalID = process.env.NODE_ENV === "development" ? (0, import_react4.useId)() : "";
+        var _themeState_state, _hooks_usePropsTransform, _hooks_useEvents, _config_animations, internalID = process.env.NODE_ENV === "development" ? (0, import_react4.useId)() : "";
         if (process.env.NODE_ENV === "development" && startVisualizer && (startVisualizer(), startVisualizer = void 0), !hasSetupBaseViews) {
           var _hooks_getBaseViews;
           hasSetupBaseViews = !0;
@@ -9405,7 +9475,7 @@ var require_createComponent_native = __commonJS({
           var _propsIn_datatestrenders, _current, _;
           (_ = (_propsIn_datatestrenders = propsIn["data-test-renders"])[_current = "current"]) !== null && _ !== void 0 || (_propsIn_datatestrenders[_current] = 0), propsIn["data-test-renders"].current += 1;
         }
-        var componentContext = (0, import_react4.useContext)(import_ComponentContext.ComponentContext), styledContextProps, overriddenContextProps, contextValue, context = staticConfig.context;
+        var componentContext = (0, import_react4.useContext)(import_ComponentContext.ComponentContext), styledContextProps, overriddenContextProps, contextValue, context = staticConfig.context, isReactNative = staticConfig.isReactNative;
         if (context) {
           contextValue = (0, import_react4.useContext)(context);
           var inverseShorthands = (0, import_config.getConfig)().inverseShorthands;
@@ -9425,7 +9495,7 @@ var require_createComponent_native = __commonJS({
         var debugProp = props.debug, componentName2 = props.componentName || staticConfig.componentName;
         if (process.env.NODE_ENV === "development" && import_constants4.isClient && (0, import_react4.useEffect)(function() {
           var overlay = null, debugVisualizerHandler = function() {
-            var show = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : !1, node = curState.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";
@@ -9441,79 +9511,24 @@ var require_createComponent_native = __commonJS({
           componentName2
         ]), !1)
           var timer;
-        process.env.NODE_ENV === "development" && time && time(_templateObject()), process.env.NODE_ENV === "development" && time && time(_templateObject1());
-        var stateRef = (0, import_react4.useRef)({});
-        process.env.NODE_ENV === "development" && time && time(_templateObject2());
-        var animationsConfig = componentContext.animationDriver, useAnimations = animationsConfig == null ? void 0 : animationsConfig.useAnimations, hasAnimationProp = !!("animation" in props || props.style && hasAnimatedStyleValue(props.style)), supportsCSSVars = animationsConfig == null ? void 0 : animationsConfig.supportsCSSVars, curState = stateRef.current, willBeAnimatedClient = function() {
-          var next = !!(hasAnimationProp && !isHOC && useAnimations);
-          return !!(next || curState.hasAnimated);
-        }(), willBeAnimated = !import_constants4.isServer && willBeAnimatedClient;
-        willBeAnimated && !curState.hasAnimated && (curState.hasAnimated = !0);
-        var isHydrated = config != null && config.disableSSR ? !0 : (0, import_use_did_finish_ssr.useDidFinishSSR)(), presence = willBeAnimated && props.animatePresence !== !1 && (animationsConfig == null || (_animationsConfig_usePresence = animationsConfig.usePresence) === null || _animationsConfig_usePresence === void 0 ? void 0 : _animationsConfig_usePresence.call(animationsConfig)) || 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, hasRNAnimation = hasAnimationProp && (animationsConfig == null ? void 0 : animationsConfig.isReactNative), isReactNative = staticConfig.isReactNative, isAnimated = willBeAnimated;
-        !isReactNative && hasRNAnimation && !isHOC && !isHydrated && (isAnimated = !1, curState.willHydrate = !0), process.env.NODE_ENV === "development" && time && time(_templateObject3());
-        var hasEnterState = hasEnterStyle || isEntering, needsToMount = !isHydrated || !curState.host, initialState = hasEnterState ? needsToMount ? import_defaultComponentState.defaultComponentStateShouldEnter : import_defaultComponentState.defaultComponentState : import_defaultComponentState.defaultComponentStateMounted, disabled = props.disabled || ((_props_accessibilityState = props.accessibilityState) === null || _props_accessibilityState === void 0 ? void 0 : _props_accessibilityState.disabled) || props["aria-disabled"] || // @ts-expect-error (comes from core)
-        props.accessibilityDisabled || !1;
-        disabled != null && (initialState.disabled = disabled);
-        var states = (0, import_react4.useState)(initialState), state = props.forceStyle ? _object_spread_props8(_object_spread9({}, states[0]), _define_property9({}, props.forceStyle, !0)) : states[0], setState = states[1];
-        disabled !== state.disabled && setState(_object_spread_props8(_object_spread9({}, state, import_defaultComponentState.defaultComponentState), {
-          // removes any stale press state etc
-          disabled
-        }));
-        var setStateShallow = (0, import_createShallowSetState.createShallowSetState)(setState, disabled, debugProp);
-        if (isHydrated && state.unmounted === "should-enter" && (state.unmounted = !0), presenceState && isAnimated && isHydrated && staticConfig.variants) {
-          process.env.NODE_ENV === "development" && debugProp === "verbose" && console.warn("has presenceState ".concat(JSON.stringify(presenceState)));
-          var enterVariant = presenceState.enterVariant, exitVariant = presenceState.exitVariant, enterExitVariant = presenceState.enterExitVariant, custom = presenceState.custom;
-          (0, import_isObj.isObj)(custom) && Object.assign(props, custom);
-          var exv = exitVariant ?? enterExitVariant, env = enterVariant ?? enterExitVariant;
-          state.unmounted && env && staticConfig.variants[env] ? (process.env.NODE_ENV === "development" && debugProp === "verbose" && console.warn('Animating presence ENTER "'.concat(env, '"')), props[env] = !0) : isExiting && exv && (process.env.NODE_ENV === "development" && debugProp === "verbose" && console.warn('Animating presence EXIT "'.concat(exv, '"')), props[exv] = exitVariant !== enterExitVariant);
-        }
-        var shouldAvoidClasses = !!(!import_constants4.isWeb || isAnimated && !supportsCSSVars || !staticConfig.acceptsClassName || // on server for SSR and animation compat added the && isHydrated but perhaps we want
-        // disableClassName="until-hydrated" to be more straightforward
-        // see issue if not, Button sets disableClassName to true <Button animation="" /> with
-        // the react-native driver errors because it tries to animate var(--color) to rbga(..)
-        propsIn.disableClassName && isHydrated), shouldForcePseudo = !!propsIn.forceStyle, noClassNames = shouldAvoidClasses || shouldForcePseudo, groupName = props.group;
-        if (groupName && !curState.group) {
-          var listeners = /* @__PURE__ */ new Set();
-          curState.group = {
-            listeners,
-            emit: function(name2, state2) {
-              listeners.forEach(function(l) {
-                return l(name2, state2);
-              });
-            },
-            subscribe: function(cb) {
-              return listeners.add(cb), function() {
-                listeners.delete(cb);
-              };
-            }
-          };
-        }
-        if (groupName) {
-          var groupContextState = componentContext.groups.state, og = setStateShallow;
-          setStateShallow = function(state2) {
-            og(state2), curState.group.emit(groupName, {
-              pseudo: state2
-            });
-            var next = _object_spread9({}, groupContextState[groupName], state2);
-            groupContextState[groupName] = next;
-          };
-        }
+        process.env.NODE_ENV === "development" && time && time(_templateObject1()), process.env.NODE_ENV === "development" && time && time(_templateObject2()), process.env.NODE_ENV === "development" && time && time(_templateObject3());
+        var animationDriver = componentContext.animationDriver, useAnimations = animationDriver == null ? void 0 : animationDriver.useAnimations, _useComponentState = useComponentState(props, componentContext, staticConfig, config), curStateRef = _useComponentState.curStateRef, disabled = _useComponentState.disabled, groupName = _useComponentState.groupName, hasAnimationProp = _useComponentState.hasAnimationProp, hasEnterStyle = _useComponentState.hasEnterStyle, isAnimated = _useComponentState.isAnimated, isExiting = _useComponentState.isExiting, isHydrated = _useComponentState.isHydrated, presence = _useComponentState.presence, presenceState = _useComponentState.presenceState, setState = _useComponentState.setState, setStateShallow = _useComponentState.setStateShallow, shouldAvoidClasses = _useComponentState.shouldAvoidClasses, state = _useComponentState.state, stateRef = _useComponentState.stateRef, supportsCSSVars = _useComponentState.supportsCSSVars, willBeAnimated = _useComponentState.willBeAnimated, willBeAnimatedClient = _useComponentState.willBeAnimatedClient, shouldForcePseudo = !!propsIn.forceStyle, noClassNames = shouldAvoidClasses || shouldForcePseudo;
         process.env.NODE_ENV === "development" && time && time(_templateObject4());
         var hasTextAncestor = !!(import_constants4.isWeb && isText && componentContext.inText);
         process.env.NODE_ENV === "development" && time && time(_templateObject5());
         var 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;
-        animationsConfig && isAnimated && (elementType = animationsConfig[isText ? "Text" : "View"] || elementType);
+        animationDriver && isAnimated && (elementType = animationDriver[isText ? "Text" : "View"] || elementType);
         var disableThemeProp = !1, disableTheme = disableThemeProp || isHOC;
-        process.env.NODE_ENV === "development" && time && time(_templateObject6()), props.themeShallow && (curState.themeShallow = !0);
+        process.env.NODE_ENV === "development" && time && time(_templateObject6()), props.themeShallow && (curStateRef.themeShallow = !0);
         var themeStateProps = {
           name: props.theme,
           componentName: componentName2,
           disable: disableTheme,
-          shallow: curState.themeShallow,
+          shallow: curStateRef.themeShallow,
           inverse: props.themeInverse,
           debug: debugProp
         };
-        if (typeof curState.isListeningToTheme == "boolean" && (themeStateProps.shouldUpdate = function() {
+        if (typeof curStateRef.isListeningToTheme == "boolean" && (themeStateProps.shouldUpdate = function() {
           return stateRef.current.isListeningToTheme;
         }), themeStateProps.deopt = willBeAnimated, process.env.NODE_ENV === "development" && debugProp && debugProp !== "profile") {
           var name = "".concat(componentName2 || (Component == null ? void 0 : Component.displayName) || (Component == null ? void 0 : Component.name) || "[Unnamed Component]"), type = (hasEnterStyle ? "(hasEnter)" : "") + (isAnimated ? "(animated)" : "") + (isReactNative ? "(rnw)" : "") + ((presenceState == null ? void 0 : presenceState.isPresent) === !1 ? "(EXIT)" : ""), dataIs = propsIn["data-is"] || "", banner = "".concat(internalID, " ").concat(name).concat(dataIs ? " ".concat(dataIs) : "", " ").concat(type);
@@ -9562,11 +9577,11 @@ var require_createComponent_native = __commonJS({
           isExiting,
           isAnimated
         }, splitStyles = (0, import_getSplitStyles.useSplitStyles)(props, staticConfig, theme, (themeState == null || (_themeState_state = themeState.state) === null || _themeState_state === void 0 ? void 0 : _themeState_state.name) || "", state, styleProps, null, componentContext, elementType, debugProp);
-        if (props.group && props.untilMeasured === "hide" && !curState.hasMeasured) {
+        if (props.group && props.untilMeasured === "hide" && !curStateRef.hasMeasured) {
           var _splitStyles;
           (_splitStyles = splitStyles).style || (_splitStyles.style = {}), splitStyles.style.opacity = 0;
         }
-        process.env.NODE_ENV === "development" && time && time(_templateObject10()), curState.isListeningToTheme = splitStyles.dynamicThemeAccess;
+        process.env.NODE_ENV === "development" && time && time(_templateObject10()), curStateRef.isListeningToTheme = splitStyles.dynamicThemeAccess;
         var isMediaArray = splitStyles.hasMedia && Array.isArray(splitStyles.hasMedia), shouldListenForMedia = (0, import_createVariable.didGetVariableValue)() || isMediaArray || noClassNames && splitStyles.hasMedia === !0, mediaListeningKeys = isMediaArray ? splitStyles.hasMedia : null;
         (0, import_useMedia.setMediaShouldUpdate)(stateRef, {
           enabled: shouldListenForMedia,
@@ -9623,56 +9638,42 @@ If you meant to do this, you can disable this warning - either change untilMeasu
           }), !stateRef.current.hasMeasured && props.untilMeasured === "hide" && setState(function(prev) {
             return _object_spread9({}, 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, curState.willHydrate)) || nonTamaguiProps, curState.composedRef || (curState.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)), viewProps.ref = curState.composedRef, process.env.NODE_ENV === "development" && !isReactNative && !isText && import_constants4.isWeb && !isHOC && import_react4.Children.toArray(props.children).forEach(function(item) {
+        }, forwardedRef)), viewProps.ref = curStateRef.composedRef, process.env.NODE_ENV === "development" && !isReactNative && !isText && import_constants4.isWeb && !isHOC && import_react4.Children.toArray(props.children).forEach(function(item) {
           typeof item == "string" && item !== `
 ` && console.error("Unexpected text node: ".concat(item, ". A text node cannot be a child of a <View>."));
         }), process.env.NODE_ENV === "development" && time && time(_templateObject13());
         var pseudoGroups = splitStyles.pseudoGroups, mediaGroups = splitStyles.mediaGroups;
-        curState.unPress || (curState.unPress = function() {
+        curStateRef.unPress || (curStateRef.unPress = function() {
           return setStateShallow({
             press: !1,
             pressIn: !1
           });
         });
-        var unPress = curState.unPress, shouldEnter = state.unmounted;
+        var unPress = curStateRef.unPress;
         (0, import_react4.useEffect)(function() {
           if (!disabled) {
-            if (shouldEnter) {
+            if (state.unmounted) {
               setStateShallow({
                 unmounted: !1
               });
               return;
             }
-            var disposeGroupsListener;
-            if (pseudoGroups || mediaGroups) {
-              var _componentContext_groups, current = {
-                pseudo: {},
-                media: {}
-              };
-              process.env.NODE_ENV === "development" && !componentContext.groups && console.debug("No context group found"), disposeGroupsListener = (_componentContext_groups = componentContext.groups) === null || _componentContext_groups === void 0 ? void 0 : _componentContext_groups.subscribe(function(name2, param) {
-                var layout = param.layout, pseudo = param.pseudo, persist = function() {
-                  var group = _object_spread_props8(_object_spread9({}, state.group), _define_property9({}, name2, current));
-                  setStateShallow({
-                    group
-                  });
-                };
-                if (pseudo && pseudoGroups != null && pseudoGroups.has(name2))
-                  Object.assign(current.pseudo, pseudo), persist();
-                else if (layout && mediaGroups) {
-                  var mediaState22 = getMediaState(mediaGroups, layout), next = (0, import_createShallowSetState.mergeIfNotShallowEqual)(current.media, mediaState22);
-                  next !== current.media && (Object.assign(current.media, next), persist());
-                }
-              });
-            }
+            var dispose = subscribeToContextGroup({
+              disabled,
+              componentContext,
+              setStateShallow,
+              state,
+              mediaGroups,
+              pseudoGroups
+            });
             return function() {
-              disposeGroupsListener == null || disposeGroupsListener(), mouseUps.delete(unPress);
+              dispose == null || dispose(), mouseUps.delete(unPress);
             };
           }
         }, [
           disabled,
-          shouldEnter,
           pseudoGroups ? Object.keys(_to_consumable_array2(pseudoGroups)).join("") : 0,
           mediaGroups ? Object.keys(_to_consumable_array2(mediaGroups)).join("") : 0
         ]);
@@ -9767,7 +9768,7 @@ If you meant to do this, you can disable this warning - either change untilMeasu
         ResetPresence && willBeAnimated && (hasEnterStyle || presenceState) && content && typeof content != "string" && (content = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ResetPresence, {
           children: content
         })), process.env.NODE_ENV === "development" && time && time(_templateObject18());
-        var groupState = curState.group, subGroupContext = (0, import_react4.useMemo)(function() {
+        var groupState = curStateRef.group, subGroupContext = (0, import_react4.useMemo)(function() {
           var _splitStyles_style, _splitStyles_style1;
           if (!(!groupState || !groupName))
             return groupState.listeners.clear(), _object_spread_props8(_object_spread9({}, componentContext.groups), {
@@ -9822,7 +9823,6 @@ If you meant to do this, you can disable this warning - either change untilMeasu
                 defaultProps,
                 elementType,
                 events,
-                initialState,
                 isAnimated,
                 isMediaArray,
                 isStringElement,
@@ -10019,6 +10019,31 @@ If you meant to do this, you can disable this warning - either change untilMeasu
     }
     var fromPx = function(val) {
       return typeof val != "string" ? val : +val.replace("px", "");
+    }, isDisabled = function(props) {
+      var _props_accessibilityState;
+      return props.disabled || ((_props_accessibilityState = props.accessibilityState) === null || _props_accessibilityState === void 0 ? void 0 : _props_accessibilityState.disabled) || props["aria-disabled"] || props.accessibilityDisabled || !1;
+    }, subscribeToContextGroup = function(param) {
+      var _param_disabled = param.disabled, disabled = _param_disabled === void 0 ? !1 : _param_disabled, setStateShallow = param.setStateShallow, pseudoGroups = param.pseudoGroups, mediaGroups = param.mediaGroups, componentContext = param.componentContext, state = param.state;
+      if (pseudoGroups || mediaGroups) {
+        var _componentContext_groups, current = {
+          pseudo: {},
+          media: {}
+        };
+        return process.env.NODE_ENV === "development" && !componentContext.groups && console.debug("No context group found"), (_componentContext_groups = componentContext.groups) === null || _componentContext_groups === void 0 ? void 0 : _componentContext_groups.subscribe(function(name, param2) {
+          var layout = param2.layout, pseudo = param2.pseudo, persist = function() {
+            var group = _object_spread_props8(_object_spread9({}, state.group), _define_property9({}, name, current));
+            setStateShallow({
+              group
+            });
+          };
+          if (pseudo && pseudoGroups != null && pseudoGroups.has(name))
+            Object.assign(current.pseudo, pseudo), persist();
+          else if (layout && mediaGroups) {
+            var mediaState3 = getMediaState(mediaGroups, layout), next = (0, import_createShallowSetState.mergeIfNotShallowEqual)(current.media, mediaState3);
+            next !== current.media && (Object.assign(current.media, next), persist());
+          }
+        });
+      }
     };
   }
 });
@@ -10445,7 +10470,7 @@ var require_registerCSSVariable_native = __commonJS({
       tokensValueToVariable.set((0, import_createVariable.getVariableValue)(v), v);
     }, variableToCSS = function(v) {
       var unitless = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !1;
-      return "--".concat((0, import_createVariable.createCSSVariable)(v.name, !1), ":").concat(!unitless && typeof v.val == "number" ? "".concat(v.val, "px") : v.val);
+      return "--".concat(process.env.TAMAGUI_CSS_VARIABLE_PREFIX || "").concat((0, import_createVariable.createCSSVariable)(v.name, !1), ":").concat(!unitless && typeof v.val == "number" ? "".concat(v.val, "px") : v.val);
     }, tokensValueToVariable = /* @__PURE__ */ new Map();
   }
 });
@@ -12209,7 +12234,7 @@ var require_useProps_native = __commonJS({
       }
     });
     module2.exports = __toCommonJS2(useProps_exports);
-    var import_react4 = require("react"), import_ComponentContext = require_ComponentContext_native(), import_defaultComponentState = require_defaultComponentState_native(), import_getSplitStyles = require_getSplitStyles_native(), import_Stack = require_Stack_native(), import_useMedia = require_useMedia_native(), import_useTheme = require_useTheme_native();
+    var import_react4 = require("react"), import_config = require_config_native(), import_ComponentContext = require_ComponentContext_native(), import_createComponent = require_createComponent_native(), import_getSplitStyles = require_getSplitStyles_native(), import_Stack = require_Stack_native(), import_useMedia = require_useMedia_native(), import_useTheme = require_useTheme_native();
     function _array_like_to_array2(arr, len) {
       (len == null || len > arr.length) && (len = arr.length);
       for (var i = 0, arr2 = new Array(len); i < len; i++)
@@ -12220,6 +12245,10 @@ var require_useProps_native = __commonJS({
       if (Array.isArray(arr))
         return arr;
     }
+    function _array_without_holes2(arr) {
+      if (Array.isArray(arr))
+        return _array_like_to_array2(arr);
+    }
     function _define_property9(obj, key, value) {
       return key in obj ? Object.defineProperty(obj, key, {
         value,
@@ -12228,6 +12257,10 @@ var require_useProps_native = __commonJS({
         writable: !0
       }) : obj[key] = value, obj;
     }
+    function _iterable_to_array2(iter) {
+      if ((typeof Symbol > "u" ? "undefined" : _type_of(Symbol)) < "u" && iter[Symbol.iterator] != null || iter["@@iterator"] != null)
+        return Array.from(iter);
+    }
     function _iterable_to_array_limit(arr, i) {
       var _i = arr == null ? null : (typeof Symbol > "u" ? "undefined" : _type_of(Symbol)) < "u" && arr[Symbol.iterator] || arr["@@iterator"];
       if (_i != null) {
@@ -12251,6 +12284,9 @@ var require_useProps_native = __commonJS({
     function _non_iterable_rest() {
       throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
     }
+    function _non_iterable_spread2() {
+      throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+    }
     function _object_spread9(target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i] != null ? arguments[i] : {}, ownKeys22 = Object.keys(source);
@@ -12280,6 +12316,9 @@ var require_useProps_native = __commonJS({
     function _sliced_to_array(arr, i) {
       return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array2(arr, i) || _non_iterable_rest();
     }
+    function _to_consumable_array2(arr) {
+      return _array_without_holes2(arr) || _iterable_to_array2(arr) || _unsupported_iterable_to_array2(arr) || _non_iterable_spread2();
+    }
     function _unsupported_iterable_to_array2(o, minLen) {
       if (o) {
         if (typeof o == "string")
@@ -12305,15 +12344,36 @@ var require_useProps_native = __commonJS({
     function usePropsAndStyle2(props, opts) {
       var _opts_forComponent, _themeState_state, _opts_forComponent_staticConfig, staticConfig = (_opts_forComponent_staticConfig = opts == null || (_opts_forComponent = opts.forComponent) === null || _opts_forComponent === void 0 ? void 0 : _opts_forComponent.staticConfig) !== null && _opts_forComponent_staticConfig !== void 0 ? _opts_forComponent_staticConfig : import_Stack.Stack.staticConfig, _useThemeWithState = _sliced_to_array((0, import_useTheme.useThemeWithState)({
         componentName: staticConfig.componentName
-      }), 2), themeState = _useThemeWithState[0], theme = _useThemeWithState[1], componentContext = (0, import_react4.useContext)(import_ComponentContext.ComponentContext), media = (0, import_useMedia.useMedia)(), splitStyles = (0, import_getSplitStyles.useSplitStyles)(props, staticConfig, theme, ((_themeState_state = themeState.state) === null || _themeState_state === void 0 ? void 0 : _themeState_state.name) || "", import_defaultComponentState.defaultComponentStateMounted, _object_spread9({
+      }), 2), themeState = _useThemeWithState[0], theme = _useThemeWithState[1], componentContext = (0, import_react4.useContext)(import_ComponentContext.ComponentContext), _useComponentState = (0, import_createComponent.useComponentState)(props, componentContext, staticConfig, (0, import_config.getConfig)()), state = _useComponentState.state, disabled = _useComponentState.disabled, setStateShallow = _useComponentState.setStateShallow, media = (0, import_useMedia.useMedia)(), splitStyles = (0, import_getSplitStyles.useSplitStyles)(props, staticConfig, theme, ((_themeState_state = themeState.state) === null || _themeState_state === void 0 ? void 0 : _themeState_state.name) || "", state, _object_spread9({
         isAnimated: !1,
         mediaState: media,
         noSkip: !0,
         noMergeStyle: !0,
         noClassNames: !0,
         resolveValues: "auto"
-      }, opts), null, componentContext);
-      return [
+      }, opts), null, componentContext), mediaGroups = splitStyles.mediaGroups, pseudoGroups = splitStyles.pseudoGroups;
+      return (0, import_react4.useEffect)(function() {
+        if (!disabled) {
+          if (state.unmounted) {
+            setStateShallow({
+              unmounted: !1
+            });
+            return;
+          }
+          return (0, import_createComponent.subscribeToContextGroup)({
+            disabled,
+            componentContext,
+            setStateShallow,
+            state,
+            mediaGroups,
+            pseudoGroups
+          });
+        }
+      }, [
+        disabled,
+        pseudoGroups ? Object.keys(_to_consumable_array2(pseudoGroups)).join("") : 0,
+        mediaGroups ? Object.keys(_to_consumable_array2(mediaGroups)).join("") : 0
+      ]), [
         splitStyles.viewProps,
         splitStyles.style || {},
         theme,
@@ -12973,6 +13033,7 @@ var require_index_native13 = __commonJS({
     __reExport2(src_exports2, require_getExpandedShorthands_native(), module2.exports);
     __reExport2(src_exports2, require_getSplitStyles_native(), module2.exports);
     __reExport2(src_exports2, require_getStylesAtomic_native(), module2.exports);
+    __reExport2(src_exports2, require_createComponent_native(), module2.exports);
     __reExport2(src_exports2, require_getThemeCSSRules_native(), module2.exports);
     __reExport2(src_exports2, require_getVariantExtras_native(), module2.exports);
     __reExport2(src_exports2, require_isTamaguiComponent_native(), module2.exports);
@@ -14688,6 +14749,9 @@ var require_useElementLayout_native = __commonJS({
       }), mod);
     }, useElementLayout_exports = {};
     __export2(useElementLayout_exports, {
+      measureElement: function() {
+        return measureElement;
+      },
       measureLayout: function() {
         return measureLayout;
       },
@@ -14707,6 +14771,30 @@ var require_useElementLayout_native = __commonJS({
       if (Array.isArray(arr))
         return arr;
     }
+    function asyncGeneratorStep2(gen, resolve, reject, _next, _throw, key, arg) {
+      try {
+        var info = gen[key](arg), value = info.value;
+      } catch (error) {
+        reject(error);
+        return;
+      }
+      info.done ? resolve(value) : Promise.resolve(value).then(_next, _throw);
+    }
+    function _async_to_generator2(fn) {
+      return function() {
+        var self = this, args = arguments;
+        return new Promise(function(resolve, reject) {
+          var gen = fn.apply(self, args);
+          function _next(value) {
+            asyncGeneratorStep2(gen, resolve, reject, _next, _throw, "next", value);
+          }
+          function _throw(err) {
+            asyncGeneratorStep2(gen, resolve, reject, _next, _throw, "throw", err);
+          }
+          _next(void 0);
+        });
+      };
+    }
     function _instanceof1(left, right) {
       return right != null && (typeof Symbol > "u" ? "undefined" : _type_of(Symbol)) < "u" && right[Symbol.hasInstance] ? !!right[Symbol.hasInstance](left) : _instanceof(left, right);
     }
@@ -14751,7 +14839,98 @@ var require_useElementLayout_native = __commonJS({
           return _array_like_to_array2(o, minLen);
       }
     }
-    var LayoutHandlers = /* @__PURE__ */ new WeakMap(), resizeObserver = null;
+    function _ts_generator2(thisArg, body) {
+      var f, y, t, g, _ = {
+        label: 0,
+        sent: function() {
+          if (t[0] & 1)
+            throw t[1];
+          return t[1];
+        },
+        trys: [],
+        ops: []
+      };
+      return g = {
+        next: verb(0),
+        throw: verb(1),
+        return: verb(2)
+      }, typeof Symbol == "function" && (g[Symbol.iterator] = function() {
+        return this;
+      }), g;
+      function verb(n) {
+        return function(v) {
+          return step([
+            n,
+            v
+          ]);
+        };
+      }
+      function step(op) {
+        if (f)
+          throw new TypeError("Generator is already executing.");
+        for (; _; )
+          try {
+            if (f = 1, y && (t = op[0] & 2 ? y.return : op[0] ? y.throw || ((t = y.return) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
+              return t;
+            switch (y = 0, t && (op = [
+              op[0] & 2,
+              t.value
+            ]), op[0]) {
+              case 0:
+              case 1:
+                t = op;
+                break;
+              case 4:
+                return _.label++, {
+                  value: op[1],
+                  done: !1
+                };
+              case 5:
+                _.label++, y = op[1], op = [
+                  0
+                ];
+                continue;
+              case 7:
+                op = _.ops.pop(), _.trys.pop();
+                continue;
+              default:
+                if (t = _.trys, !(t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+                  _ = 0;
+                  continue;
+                }
+                if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
+                  _.label = op[1];
+                  break;
+                }
+                if (op[0] === 6 && _.label < t[1]) {
+                  _.label = t[1], t = op;
+                  break;
+                }
+                if (t && _.label < t[2]) {
+                  _.label = t[2], _.ops.push(op);
+                  break;
+                }
+                t[2] && _.ops.pop(), _.trys.pop();
+                continue;
+            }
+            op = body.call(thisArg, _);
+          } catch (e) {
+            op = [
+              6,
+              e
+            ], y = 0;
+          } finally {
+            f = t = 0;
+          }
+        if (op[0] & 5)
+          throw op[1];
+        return {
+          value: op[0] ? op[1] : void 0,
+          done: !0
+        };
+      }
+    }
+    var LayoutHandlers = /* @__PURE__ */ new WeakMap(), resizeListeners = /* @__PURE__ */ new Set(), resizeObserver = null;
     (typeof window > "u" ? "undefined" : _type_of(window)) < "u" && "ResizeObserver" in window && (resizeObserver = new ResizeObserver(function(entries) {
       var _iteratorNormalCompletion = !0, _didIteratorError = !1, _iteratorError = void 0;
       try {
@@ -14761,21 +14940,8 @@ var require_useElementLayout_native = __commonJS({
             return {
               v: void 0
             };
-          measureLayout(target, null, function(x, y, width, height, left, top) {
-            onLayout({
-              nativeEvent: {
-                layout: {
-                  x,
-                  y,
-                  width,
-                  height,
-                  left,
-                  top
-                },
-                target
-              },
-              timeStamp: Date.now()
-            });
+          measureElement(target).then(function(event) {
+            onLayout(event);
           });
         }, _iterator = entries[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0) {
           var _ret = _loop();
@@ -14792,8 +14958,43 @@ var require_useElementLayout_native = __commonJS({
             throw _iteratorError;
         }
       }
-    }));
-    var cache = /* @__PURE__ */ new WeakMap(), measureLayout = function(node, relativeTo, callback) {
+    }), typeof window.addEventListener == "function") && window.addEventListener("resize", function() {
+      clearTimeout(tm), tm = setTimeout(function() {
+        resizeListeners.forEach(function(cb) {
+          return cb();
+        });
+      }, 4);
+    });
+    var tm, measureElement = function() {
+      var _ref = _async_to_generator2(function(target) {
+        return _ts_generator2(this, function(_state) {
+          return [
+            2,
+            new Promise(function(res) {
+              measureLayout(target, null, function(x, y, width, height, left, top) {
+                res({
+                  nativeEvent: {
+                    layout: {
+                      x,
+                      y,
+                      width,
+                      height,
+                      left,
+                      top
+                    },
+                    target
+                  },
+                  timeStamp: Date.now()
+                });
+              });
+            })
+          ];
+        });
+      });
+      return function(target) {
+        return _ref.apply(this, arguments);
+      };
+    }(), cache = /* @__PURE__ */ new WeakMap(), measureLayout = function(node, relativeTo, callback) {
       var relativeNode = relativeTo || (node == null ? void 0 : node.parentNode);
       if (_instanceof1(relativeNode, HTMLElement)) {
         var now = Date.now();
@@ -14822,9 +15023,9 @@ var require_useElementLayout_native = __commonJS({
       return new Promise(function(resolve) {
         var fallbackToSync = function() {
           resolve((0, import_getBoundingClientRect.getBoundingClientRect)(element));
-        }, tm = setTimeout(fallbackToSync, 10), observer = new IntersectionObserver(function(entries, ob) {
+        }, tm2 = setTimeout(fallbackToSync, 10), observer = new IntersectionObserver(function(entries, ob) {
           var _entries_;
-          clearTimeout(tm), ob.disconnect(), resolve((_entries_ = entries[0]) === null || _entries_ === void 0 ? void 0 : _entries_.boundingClientRect);
+          clearTimeout(tm2), ob.disconnect(), resolve((_entries_ = entries[0]) === null || _entries_ === void 0 ? void 0 : _entries_.boundingClientRect);
         }, {
           threshold: 1e-4
         });
@@ -14833,16 +15034,27 @@ var require_useElementLayout_native = __commonJS({
     };
     function useElementLayout(ref, onLayout) {
       (0, import_constants4.useIsomorphicLayoutEffect)(function() {
-        if (!(!resizeObserver || !onLayout)) {
+        if (onLayout) {
           var node = ref.current;
-          if (node)
-            return LayoutHandlers.set(node, onLayout), resizeObserver.observe(node), function() {
-              resizeObserver == null || resizeObserver.unobserve(node);
-            };
+          node && LayoutHandlers.set(node, onLayout);
         }
       }, [
         ref,
         onLayout
+      ]), (0, import_constants4.useIsomorphicLayoutEffect)(function() {
+        if (resizeObserver) {
+          var node = ref.current;
+          if (node && LayoutHandlers.has(node)) {
+            var onResize = function() {
+              measureElement(node).then(onLayout);
+            };
+            return resizeListeners.add(onResize), resizeObserver.observe(node), function() {
+              resizeListeners.delete(onResize), resizeObserver == null || resizeObserver.unobserve(node);
+            };
+          }
+        }
+      }, [
+        ref
       ]);
     }
   }
@@ -16541,7 +16753,8 @@ var require_Paragraph_native = __commonJS({
       tag: "p",
       userSelect: "auto",
       color: "$color",
-      size: "$true"
+      size: "$true",
+      whiteSpace: "normal"
     });
   }
 });
@@ -17571,7 +17784,7 @@ var require_Adapt_native = __commonJS({
     var AdaptParentContext = /* @__PURE__ */ (0, import_react4.createContext)(null), AdaptContents = function(props) {
       var context = (0, import_react4.useContext)(AdaptParentContext);
       if (!(context != null && context.Contents))
-        throw new Error("Adapt not supported by this component");
+        throw new Error(process.env.NODE_ENV === "production" ? "tamagui.dev/docs/intro/errors#warning-002" : "You're rendering a Tamagui <Adapt /> component without nesting it inside a parent that is able to adapt.");
       return /* @__PURE__ */ (0, import_react4.createElement)(context.Contents, props);
     };
     AdaptContents.shouldForwardSpace = !0;
@@ -17596,7 +17809,7 @@ var require_Adapt_native = __commonJS({
       };
     }, Adapt = (0, import_helpers.withStaticProperties)(function(param) {
       var platform = param.platform, when = param.when, children = param.children, context = (0, import_react4.useContext)(AdaptParentContext), media = (0, import_core12.useMedia)(), enabled = !platform;
-      return platform === "touch" && (enabled = import_constants22.isTouchable), platform === "native" && (enabled = !import_constants4.isWeb), platform === "web" && (enabled = import_constants4.isWeb), when && !media[when] && (enabled = !1), (0, import_constants4.useIsomorphicLayoutEffect)(function() {
+      return platform === "touch" && (enabled = import_constants22.isTouchable), platform === "native" && (enabled = !import_constants4.isWeb), platform === "web" && (enabled = import_constants4.isWeb), platform === "ios" && (enabled = import_constants4.isIos), platform === "android" && (enabled = import_constants4.isAndroid), when && !media[when] && (enabled = !1), (0, import_constants4.useIsomorphicLayoutEffect)(function() {
         enabled && (context == null || context.setWhen(when || enabled));
       }, [
         when,