@tamagui/web 1.111.8 → 1.111.10

package/dist/esm/createComponent.native.js

@@ -3,31 +3,35 @@ import React from "react";
 import { composeRefs } from "@tamagui/compose-refs";
 import { isClient, isServer, isWeb, useIsomorphicLayoutEffect } from "@tamagui/constants";
 import { composeEventHandlers, validStyles } from "@tamagui/helpers";
-import { devConfig, getConfig, onConfiguredOnce } from "./config";
-import { stackDefaultStyles } from "./constants/constants";
-import { isDevTools } from "./constants/isDevTools";
-import { ComponentContext } from "./contexts/ComponentContext";
-import { didGetVariableValue, setDidGetVariableValue } from "./createVariable";
-import { defaultComponentState, defaultComponentStateMounted, defaultComponentStateShouldEnter } from "./defaultComponentState";
-import { createShallowSetState, mergeIfNotShallowEqual } from "./helpers/createShallowSetState";
-import { useSplitStyles } from "./helpers/getSplitStyles";
-import { isObj } from "./helpers/isObj";
-import { log } from "./helpers/log";
-import { mergeProps } from "./helpers/mergeProps";
-import { setElementProps } from "./helpers/setElementProps";
-import { themeable } from "./helpers/themeable";
-import { useDidHydrateOnce } from "./hooks/useDidHydrateOnce";
-import { getMediaState, setMediaShouldUpdate, useMedia } from "./hooks/useMedia";
-import { useThemeWithState } from "./hooks/useTheme";
-import { hooks } from "./setupHooks";
-import { Slot } from "./views/Slot";
-import { getThemedChildren } from "./views/Theme";
-import { ThemeDebug } from "./views/ThemeDebug";
-var tamaguiConfig, time, debugKeyListeners, startVisualizer, componentSetStates = /* @__PURE__ */ new Set();
+import { devConfig, getConfig, onConfiguredOnce } from "./config.native.js";
+import { stackDefaultStyles } from "./constants/constants.native.js";
+import { isDevTools } from "./constants/isDevTools.native.js";
+import { ComponentContext } from "./contexts/ComponentContext.native.js";
+import { didGetVariableValue, setDidGetVariableValue } from "./createVariable.native.js";
+import { defaultComponentState, defaultComponentStateMounted, defaultComponentStateShouldEnter } from "./defaultComponentState.native.js";
+import { createShallowSetState, mergeIfNotShallowEqual } from "./helpers/createShallowSetState.native.js";
+import { useSplitStyles } from "./helpers/getSplitStyles.native.js";
+import { isObj } from "./helpers/isObj.native.js";
+import { log } from "./helpers/log.native.js";
+import { mergeProps } from "./helpers/mergeProps.native.js";
+import { setElementProps } from "./helpers/setElementProps.native.js";
+import { themeable } from "./helpers/themeable.native.js";
+import { useDidHydrateOnce } from "./hooks/useDidHydrateOnce.native.js";
+import { getMediaState, setMediaShouldUpdate, useMedia } from "./hooks/useMedia.native.js";
+import { useThemeWithState } from "./hooks/useTheme.native.js";
+import { hooks } from "./setupHooks.native.js";
+import { Slot } from "./views/Slot.native.js";
+import { getThemedChildren } from "./views/Theme.native.js";
+import { ThemeDebug } from "./views/ThemeDebug.native.js";
+var tamaguiConfig,
+  time,
+  debugKeyListeners,
+  startVisualizer,
+  componentSetStates = /* @__PURE__ */new Set();
 if (typeof document < "u") {
-  var cancelTouches = function() {
-    componentSetStates.forEach(function(setState) {
-      return setState(function(prev) {
+  var cancelTouches = function () {
+    componentSetStates.forEach(function (setState) {
+      return setState(function (prev) {
         return prev.press || prev.pressIn ? {
           ...prev,
           press: !1,
@@ -36,155 +40,219 @@ if (typeof document < "u") {
       });
     }), componentSetStates.clear();
   };
-  addEventListener("mouseup", cancelTouches), addEventListener("touchend", cancelTouches), addEventListener("touchcancel", cancelTouches), process.env.NODE_ENV === "development" && (startVisualizer = function() {
+  addEventListener("mouseup", cancelTouches), addEventListener("touchend", cancelTouches), addEventListener("touchcancel", cancelTouches), process.env.NODE_ENV === "development" && (startVisualizer = function () {
     var devVisualizerConfig = devConfig === null || devConfig === void 0 ? void 0 : devConfig.visualizer;
     if (devVisualizerConfig) {
-      debugKeyListeners = /* @__PURE__ */ new Set();
-      var tm, isShowing = !1, options = {
-        key: "Alt",
-        delay: 800,
-        ...typeof devVisualizerConfig == "object" ? devVisualizerConfig : {}
-      };
-      document.addEventListener("blur", function() {
+      debugKeyListeners = /* @__PURE__ */new Set();
+      var tm,
+        isShowing = !1,
+        options = {
+          key: "Alt",
+          delay: 800,
+          ...(typeof devVisualizerConfig == "object" ? devVisualizerConfig : {})
+        };
+      document.addEventListener("blur", function () {
         clearTimeout(tm);
-      }), document.addEventListener("keydown", function(param) {
-        var { key, defaultPrevented } = param;
-        defaultPrevented || (clearTimeout(tm), key === options.key && (tm = setTimeout(function() {
-          isShowing = !0, debugKeyListeners?.forEach(function(l) {
+      }), document.addEventListener("keydown", function (param) {
+        var {
+          key,
+          defaultPrevented
+        } = param;
+        defaultPrevented || (clearTimeout(tm), key === options.key && (tm = setTimeout(function () {
+          isShowing = !0, debugKeyListeners?.forEach(function (l) {
             return l(!0);
           });
         }, options.delay)));
-      }), document.addEventListener("keyup", function(param) {
-        var { key, defaultPrevented } = param;
-        defaultPrevented || key === options.key && (clearTimeout(tm), isShowing && debugKeyListeners?.forEach(function(l) {
+      }), document.addEventListener("keyup", function (param) {
+        var {
+          key,
+          defaultPrevented
+        } = param;
+        defaultPrevented || key === options.key && (clearTimeout(tm), isShowing && debugKeyListeners?.forEach(function (l) {
           return l(!1);
         }));
       });
     }
   });
 }
-var useComponentState = function(props, param, staticConfig, config) {
-  var { animationDriver, groups } = param, _animationDriver_usePresence, useAnimations = animationDriver?.useAnimations, stateRef = React.useRef(void 0);
-  stateRef.current || (stateRef.current = {});
-  var hasAnimationProp = !!("animation" in props || props.style && hasAnimatedStyleValue(props.style)), supportsCSSVars = animationDriver?.supportsCSSVars, curStateRef = stateRef.current, willBeAnimatedClient = function() {
-    var next = !!(hasAnimationProp && !staticConfig.isHOC && useAnimations);
-    return !!(next || curStateRef.hasAnimated);
-  }(), willBeAnimated = !isServer && willBeAnimatedClient;
-  willBeAnimated && !curStateRef.hasAnimated && (curStateRef.hasAnimated = !0);
-  var 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?.[2], isExiting = presenceState?.isPresent === !1, isEntering = presenceState?.isPresent === !0 && presenceState.initial !== !1, hasEnterStyle = !!props.enterStyle, hasRNAnimation = hasAnimationProp && animationDriver?.isReactNative;
-  process.env.NODE_ENV === "development" && time && time`pre-use-state`;
-  var hasEnterState = hasEnterStyle || isEntering, didHydrateOnce = willBeAnimated ? useDidHydrateOnce() : !0, shouldEnter = hasEnterState || !didHydrateOnce && hasRNAnimation, shouldEnterFromUnhydrated = isWeb && !didHydrateOnce, initialState = shouldEnter ? (
-    // on the very first render we switch all spring animation drivers to css rendering
-    // this is because we need to use css variables, which they don't support to do proper SSR
-    // without flickers of the wrong colors.
-    // but once we do that initial hydration and we are in client side rendering mode,
-    // we can avoid the extra re-render on mount
-    shouldEnterFromUnhydrated ? defaultComponentState : defaultComponentStateShouldEnter
-  ) : defaultComponentStateMounted, disabled = isDisabled(props);
-  disabled != null && (initialState.disabled = disabled);
-  var states = React.useState(initialState), state = props.forceStyle ? {
-    ...states[0],
-    [props.forceStyle]: !0
-  } : states[0], setState = states[1], isHydrated = state.unmounted === !1 || state.unmounted === "should-enter", isAnimated = willBeAnimated;
-  isWeb && hasRNAnimation && !staticConfig.isHOC && state.unmounted === !0 && (isAnimated = !1, curStateRef.willHydrate = !0), disabled !== state.disabled && (state.disabled = disabled, disabled && Object.assign(state, defaultComponentStateMounted), setState({
-    ...state
-  }));
-  var setStateShallow = createShallowSetState(setState, disabled, !1, props.debug);
-  if (presenceState && isAnimated && isHydrated && staticConfig.variants) {
-    process.env.NODE_ENV === "development" && props.debug === "verbose" && console.warn(`has presenceState ${JSON.stringify(presenceState)}`);
-    var { enterVariant, exitVariant, enterExitVariant, custom } = presenceState;
-    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 "${env}"`), props[env] = !0) : isExiting && exv && (process.env.NODE_ENV === "development" && props.debug === "verbose" && console.warn(`Animating presence EXIT "${exv}"`), props[exv] = exitVariant !== enterExitVariant);
-  }
-  var shouldAvoidClasses = !isWeb;
-  if (isWeb) {
-    var { disableClassName } = props, isAnimatedAndHydrated = isAnimated && !supportsCSSVars && didHydrateOnce && !isServer, isClassNameDisabled = !staticConfig.acceptsClassName && (config.disableSSR || didHydrateOnce), isDisabledManually = disableClassName && !isServer && didHydrateOnce && state.unmounted === !0;
-    (isAnimatedAndHydrated || isDisabledManually || isClassNameDisabled) && (shouldAvoidClasses = !0, process.env.NODE_ENV === "development" && props.debug && log("avoiding className", {
-      isAnimatedAndHydrated,
-      isDisabledManually,
-      isClassNameDisabled
+var useComponentState = function (props, param, staticConfig, config) {
+    var {
+        animationDriver,
+        groups
+      } = param,
+      _animationDriver_usePresence,
+      useAnimations = animationDriver?.useAnimations,
+      stateRef = React.useRef(void 0);
+    stateRef.current || (stateRef.current = {});
+    var hasAnimationProp = !!("animation" in props || props.style && hasAnimatedStyleValue(props.style)),
+      supportsCSSVars = animationDriver?.supportsCSSVars,
+      curStateRef = stateRef.current,
+      willBeAnimatedClient = function () {
+        var next = !!(hasAnimationProp && !staticConfig.isHOC && useAnimations);
+        return !!(next || curStateRef.hasAnimated);
+      }(),
+      willBeAnimated = !isServer && willBeAnimatedClient;
+    willBeAnimated && !curStateRef.hasAnimated && (curStateRef.hasAnimated = !0);
+    var 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?.[2],
+      isExiting = presenceState?.isPresent === !1,
+      isEntering = presenceState?.isPresent === !0 && presenceState.initial !== !1,
+      hasEnterStyle = !!props.enterStyle,
+      hasRNAnimation = hasAnimationProp && animationDriver?.isReactNative;
+    process.env.NODE_ENV === "development" && time && time`pre-use-state`;
+    var hasEnterState = hasEnterStyle || isEntering,
+      didHydrateOnce = willBeAnimated ? useDidHydrateOnce() : !0,
+      shouldEnter = hasEnterState || !didHydrateOnce && hasRNAnimation,
+      shouldEnterFromUnhydrated = isWeb && !didHydrateOnce,
+      initialState = shouldEnter ?
+      // on the very first render we switch all spring animation drivers to css rendering
+      // this is because we need to use css variables, which they don't support to do proper SSR
+      // without flickers of the wrong colors.
+      // but once we do that initial hydration and we are in client side rendering mode,
+      // we can avoid the extra re-render on mount
+      shouldEnterFromUnhydrated ? defaultComponentState : defaultComponentStateShouldEnter : defaultComponentStateMounted,
+      disabled = isDisabled(props);
+    disabled != null && (initialState.disabled = disabled);
+    var states = React.useState(initialState),
+      state = props.forceStyle ? {
+        ...states[0],
+        [props.forceStyle]: !0
+      } : states[0],
+      setState = states[1],
+      isHydrated = state.unmounted === !1 || state.unmounted === "should-enter",
+      isAnimated = willBeAnimated;
+    isWeb && hasRNAnimation && !staticConfig.isHOC && state.unmounted === !0 && (isAnimated = !1, curStateRef.willHydrate = !0), disabled !== state.disabled && (state.disabled = disabled, disabled && Object.assign(state, defaultComponentStateMounted), setState({
+      ...state
     }));
-  }
-  var groupName = props.group;
-  if (groupName && !curStateRef.group) {
-    var listeners = /* @__PURE__ */ new Set();
-    curStateRef.group = {
-      listeners,
-      emit(name, state2) {
-        listeners.forEach(function(l) {
-          return l(name, state2);
+    var setStateShallow = createShallowSetState(setState, disabled, !1, props.debug);
+    if (presenceState && isAnimated && isHydrated && staticConfig.variants) {
+      process.env.NODE_ENV === "development" && props.debug === "verbose" && console.warn(`has presenceState ${JSON.stringify(presenceState)}`);
+      var {
+        enterVariant,
+        exitVariant,
+        enterExitVariant,
+        custom
+      } = presenceState;
+      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 "${env}"`), props[env] = !0) : isExiting && exv && (process.env.NODE_ENV === "development" && props.debug === "verbose" && console.warn(`Animating presence EXIT "${exv}"`), props[exv] = exitVariant !== enterExitVariant);
+    }
+    var shouldAvoidClasses = !isWeb;
+    if (isWeb) {
+      var {
+          disableClassName
+        } = props,
+        isAnimatedAndHydrated = isAnimated && !supportsCSSVars && didHydrateOnce && !isServer,
+        isClassNameDisabled = !staticConfig.acceptsClassName && (config.disableSSR || didHydrateOnce),
+        isDisabledManually = disableClassName && !isServer && didHydrateOnce && state.unmounted === !0;
+      (isAnimatedAndHydrated || isDisabledManually || isClassNameDisabled) && (shouldAvoidClasses = !0, process.env.NODE_ENV === "development" && props.debug && log("avoiding className", {
+        isAnimatedAndHydrated,
+        isDisabledManually,
+        isClassNameDisabled
+      }));
+    }
+    var groupName = props.group;
+    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), function () {
+            listeners.delete(cb);
+          };
+        }
+      };
+    }
+    if (groupName) {
+      var groupContextState = groups.state,
+        og = setStateShallow;
+      setStateShallow = function (state2) {
+        og(state2), curStateRef.group.emit(groupName, {
+          pseudo: state2
         });
-      },
-      subscribe(cb) {
-        return listeners.add(cb), function() {
-          listeners.delete(cb);
+        var next = {
+          ...groupContextState[groupName],
+          ...state2
         };
-      }
-    };
-  }
-  if (groupName) {
-    var groupContextState = groups.state, og = setStateShallow;
-    setStateShallow = function(state2) {
-      og(state2), curStateRef.group.emit(groupName, {
-        pseudo: state2
-      });
-      var next = {
-        ...groupContextState[groupName],
-        ...state2
+        groupContextState[groupName] = next;
       };
-      groupContextState[groupName] = next;
+    }
+    return {
+      curStateRef,
+      disabled,
+      groupName,
+      hasAnimationProp,
+      hasEnterStyle,
+      isAnimated,
+      isExiting,
+      isHydrated,
+      presence,
+      presenceState,
+      setState,
+      setStateShallow,
+      shouldAvoidClasses,
+      state,
+      stateRef,
+      supportsCSSVars,
+      willBeAnimated,
+      willBeAnimatedClient
     };
-  }
-  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
   };
-}, BaseText, BaseView, hasSetupBaseViews = !1, lastInteractionWasKeyboard = {
-  value: !1
-};
-isWeb && globalThis.document && (document.addEventListener("keydown", function() {
+isWeb && globalThis.document && (document.addEventListener("keydown", function () {
   lastInteractionWasKeyboard.value = !0;
-}), document.addEventListener("mousedown", function() {
+}), document.addEventListener("mousedown", function () {
   lastInteractionWasKeyboard.value = !1;
-}), document.addEventListener("mousemove", function() {
+}), document.addEventListener("mousemove", function () {
   lastInteractionWasKeyboard.value = !1;
 }));
 function createComponent(staticConfig) {
-  var _staticConfig_defaultProps, { componentName } = staticConfig, config = null, defaultProps = staticConfig.defaultProps;
-  onConfiguredOnce(function(conf) {
+  var _staticConfig_defaultProps,
+    {
+      componentName
+    } = staticConfig,
+    config = null,
+    defaultProps = staticConfig.defaultProps;
+  onConfiguredOnce(function (conf) {
     if (config = conf, componentName) {
-      var _conf_defaultProps, defaultForComponent = (_conf_defaultProps = conf.defaultProps) === null || _conf_defaultProps === void 0 ? void 0 : _conf_defaultProps[componentName];
+      var _conf_defaultProps,
+        defaultForComponent = (_conf_defaultProps = conf.defaultProps) === null || _conf_defaultProps === void 0 ? void 0 : _conf_defaultProps[componentName];
       defaultForComponent && (defaultProps = {
         ...defaultForComponent,
         ...defaultProps
       });
     }
   });
-  var { Component, isText, isZStack, isHOC, validStyles: _$validStyles = {}, variants = {} } = staticConfig;
-  process.env.NODE_ENV === "development" && (!((_staticConfig_defaultProps = staticConfig.defaultProps) === null || _staticConfig_defaultProps === void 0) && _staticConfig_defaultProps.debug) && process.env.IS_STATIC !== "is_static" && log(`\u{1F41B} [${componentName || "Component"}]`, {
+  var {
+    Component,
+    isText,
+    isZStack,
+    isHOC,
+    validStyles: _$validStyles = {},
+    variants = {}
+  } = staticConfig;
+  process.env.NODE_ENV === "development" && !((_staticConfig_defaultProps = staticConfig.defaultProps) === null || _staticConfig_defaultProps === void 0) && _staticConfig_defaultProps.debug && process.env.IS_STATIC !== "is_static" && log(`\u{1F41B} [${componentName || "Component"}]`, {
     staticConfig,
     defaultProps,
     defaultPropsKeyOrder: defaultProps ? Object.keys(defaultProps) : []
   });
-  var component = /* @__PURE__ */ React.forwardRef(function(propsIn, forwardedRef) {
-    var _themeState_state, _hooks_usePropsTransform, _hooks_useEvents, _config_animations, internalID = process.env.NODE_ENV === "development" ? React.useId() : "";
+  var component = /* @__PURE__ */React.forwardRef(function (propsIn, forwardedRef) {
+    var _themeState_state,
+      _hooks_usePropsTransform,
+      _hooks_useEvents,
+      _config_animations,
+      internalID = process.env.NODE_ENV === "development" ? React.useId() : "";
     if (process.env.NODE_ENV === "development" && startVisualizer && (startVisualizer(), startVisualizer = void 0), !hasSetupBaseViews) {
       var _hooks_getBaseViews;
       hasSetupBaseViews = !0;
@@ -195,53 +263,95 @@ function createComponent(staticConfig) {
       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 = React.useContext(ComponentContext), styledContextProps, overriddenContextProps, contextValue, { context, isReactNative } = staticConfig;
+    var componentContext = React.useContext(ComponentContext),
+      styledContextProps,
+      overriddenContextProps,
+      contextValue,
+      {
+        context,
+        isReactNative
+      } = staticConfig;
     if (context) {
       contextValue = React.useContext(context);
-      var { inverseShorthands } = getConfig();
+      var {
+        inverseShorthands
+      } = getConfig();
       for (var key in context.props) {
-        var _propsIn_key, _ref, _ref1, propVal = (_ref1 = (_ref = (_propsIn_key = propsIn[key]) !== null && _propsIn_key !== void 0 ? _propsIn_key : propsIn[inverseShorthands[key]]) !== null && _ref !== void 0 ? _ref : defaultProps?.[key]) !== null && _ref1 !== void 0 ? _ref1 : defaultProps?.[inverseShorthands[key]];
+        var _propsIn_key,
+          _ref,
+          _ref1,
+          propVal = (_ref1 = (_ref = (_propsIn_key = propsIn[key]) !== null && _propsIn_key !== void 0 ? _propsIn_key : propsIn[inverseShorthands[key]]) !== null && _ref !== void 0 ? _ref : defaultProps?.[key]) !== null && _ref1 !== void 0 ? _ref1 : defaultProps?.[inverseShorthands[key]];
         if (propVal === void 0) {
           var val = contextValue?.[key];
           val !== void 0 && (styledContextProps || (styledContextProps = {}), styledContextProps[key] = val);
-        } else
-          overriddenContextProps || (overriddenContextProps = {}), overriddenContextProps[key] = propVal;
+        } else overriddenContextProps || (overriddenContextProps = {}), overriddenContextProps[key] = propVal;
       }
     }
     var curDefaultProps = styledContextProps ? {
-      ...defaultProps,
-      ...styledContextProps
-    } : defaultProps, props = propsIn;
+        ...defaultProps,
+        ...styledContextProps
+      } : defaultProps,
+      props = propsIn;
     curDefaultProps && (props = mergeProps(curDefaultProps, propsIn));
-    var debugProp = props.debug, componentName2 = props.componentName || staticConfig.componentName;
-    if (process.env.NODE_ENV === "development" && isClient && React.useEffect(function() {
-      var overlay = null, debugVisualizerHandler = function() {
-        var show = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : !1, node = curStateRef.host;
-        if (node)
-          if (show) {
+    var debugProp = props.debug,
+      componentName2 = props.componentName || staticConfig.componentName;
+    if (process.env.NODE_ENV === "development" && isClient && React.useEffect(function () {
+      var overlay = null,
+        debugVisualizerHandler = function () {
+          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");
+            var dataAt = node.getAttribute("data-at") || "",
+              dataIn = node.getAttribute("data-in") || "",
+              tooltip = document.createElement("span");
             tooltip.style.position = "absolute", tooltip.style.top = "0px", tooltip.style.left = "0px", tooltip.style.padding = "3px", tooltip.style.background = "rgba(0,0,0,0.75)", tooltip.style.color = "rgba(255,255,255,1)", tooltip.style.fontSize = "12px", tooltip.style.lineHeight = "12px", tooltip.style.fontFamily = "monospace", tooltip.style.webkitFontSmoothing = "none", tooltip.innerText = `${componentName2 || ""} ${dataAt} ${dataIn}`.trim(), overlay.appendChild(tooltip), node.appendChild(overlay);
-          } else
-            overlay && node.removeChild(overlay);
-      };
-      return debugKeyListeners || (debugKeyListeners = /* @__PURE__ */ new Set()), debugKeyListeners.add(debugVisualizerHandler), function() {
+          } else overlay && node.removeChild(overlay);
+        };
+      return debugKeyListeners || (debugKeyListeners = /* @__PURE__ */new Set()), debugKeyListeners.add(debugVisualizerHandler), function () {
         debugKeyListeners?.delete(debugVisualizerHandler);
       };
-    }, [
-      componentName2
-    ]), !process.env.TAMAGUI_IS_CORE_NODE && process.env.NODE_ENV === "development" && debugProp === "profile" && !time) {
+    }, [componentName2]), !process.env.TAMAGUI_IS_CORE_NODE && process.env.NODE_ENV === "development" && debugProp === "profile" && !time) {
       var timer = require("@tamagui/timer").timer();
       time = timer.start();
     }
     process.env.NODE_ENV === "development" && time && time`start (ignore)`, process.env.NODE_ENV === "development" && time && time`did-finish-ssr`, process.env.NODE_ENV === "development" && time && time`stateref`;
-    var animationDriver = componentContext.animationDriver, useAnimations = animationDriver?.useAnimations, { curStateRef, disabled, groupName, hasAnimationProp, hasEnterStyle, isAnimated, isExiting, isHydrated, presence, presenceState, setState, setStateShallow, shouldAvoidClasses, state, stateRef, supportsCSSVars, willBeAnimated, willBeAnimatedClient } = useComponentState(props, componentContext, staticConfig, config), shouldForcePseudo = !!propsIn.forceStyle, noClassNames = shouldAvoidClasses || shouldForcePseudo;
+    var animationDriver = componentContext.animationDriver,
+      useAnimations = animationDriver?.useAnimations,
+      {
+        curStateRef,
+        disabled,
+        groupName,
+        hasAnimationProp,
+        hasEnterStyle,
+        isAnimated,
+        isExiting,
+        isHydrated,
+        presence,
+        presenceState,
+        setState,
+        setStateShallow,
+        shouldAvoidClasses,
+        state,
+        stateRef,
+        supportsCSSVars,
+        willBeAnimated,
+        willBeAnimatedClient
+      } = useComponentState(props, componentContext, staticConfig, config),
+      shouldForcePseudo = !!propsIn.forceStyle,
+      noClassNames = shouldAvoidClasses || shouldForcePseudo;
     process.env.NODE_ENV === "development" && time && time`use-state`;
     var hasTextAncestor = !!(isWeb && isText && componentContext.inText);
     process.env.NODE_ENV === "development" && time && time`use-context`;
-    var isTaggable = !Component || typeof Component == "string", tagProp = props.tag, element = isWeb && isTaggable && tagProp || Component, BaseTextComponent = BaseText || element || "span", BaseViewComponent = BaseView || element || (hasTextAncestor ? "span" : "div"), elementType = isText ? BaseTextComponent : BaseViewComponent;
+    var isTaggable = !Component || typeof Component == "string",
+      tagProp = props.tag,
+      element = isWeb && isTaggable && tagProp || Component,
+      BaseTextComponent = BaseText || element || "span",
+      BaseViewComponent = BaseView || element || (hasTextAncestor ? "span" : "div"),
+      elementType = isText ? BaseTextComponent : BaseViewComponent;
     animationDriver && isAnimated && (elementType = animationDriver[isText ? "Text" : "View"] || elementType);
-    var disableThemeProp = !1, disableTheme = disableThemeProp || isHOC;
+    var disableThemeProp = !1,
+      disableTheme = disableThemeProp || isHOC;
     process.env.NODE_ENV === "development" && time && time`theme-props`, props.themeShallow && (curStateRef.themeShallow = !0);
     var themeStateProps = {
       componentName: componentName2,
@@ -249,21 +359,23 @@ function createComponent(staticConfig) {
       shallow: curStateRef.themeShallow,
       debug: debugProp
     };
-    if ("themeInverse" in props && (themeStateProps.inverse = props.themeInverse), "theme" in props && (themeStateProps.name = props.theme), typeof curStateRef.isListeningToTheme == "boolean" && (themeStateProps.shouldUpdate = function() {
+    if ("themeInverse" in props && (themeStateProps.inverse = props.themeInverse), "theme" in props && (themeStateProps.name = props.theme), typeof curStateRef.isListeningToTheme == "boolean" && (themeStateProps.shouldUpdate = function () {
       return stateRef.current.isListeningToTheme;
     }), themeStateProps.deopt = willBeAnimated, process.env.NODE_ENV === "development" && debugProp && debugProp !== "profile") {
-      var name = `${componentName2 || Component?.displayName || Component?.name || "[Unnamed Component]"}`, type = (hasEnterStyle ? "(hasEnter)" : " ") + (isAnimated ? "(animated)" : " ") + (isReactNative ? "(rnw)" : " ") + (shouldAvoidClasses ? "(shouldAvoidClasses)" : " ") + (state.press || state.pressIn ? "(PRESSED)" : " ") + (state.hover ? "(HOVERED)" : " ") + (state.focus ? "(FOCUSED)" : " ") + (presenceState?.isPresent === !1 ? "(EXIT)" : ""), dataIs = propsIn["data-is"] || "", banner = `${internalID} ${name}${dataIs ? ` ${dataIs}` : ""} ${type}`;
-      if (console.info(`%c ${banner} (hydrated: ${isHydrated}) (unmounted: ${state.unmounted})`, "background: green; color: white;"), isServer)
-        log({
-          noClassNames,
-          isAnimated,
-          shouldAvoidClasses,
-          isWeb,
-          supportsCSSVars
-        });
-      else {
+      var name = `${componentName2 || Component?.displayName || Component?.name || "[Unnamed Component]"}`,
+        type = (hasEnterStyle ? "(hasEnter)" : " ") + (isAnimated ? "(animated)" : " ") + (isReactNative ? "(rnw)" : " ") + (shouldAvoidClasses ? "(shouldAvoidClasses)" : " ") + (state.press || state.pressIn ? "(PRESSED)" : " ") + (state.hover ? "(HOVERED)" : " ") + (state.focus ? "(FOCUSED)" : " ") + (presenceState?.isPresent === !1 ? "(EXIT)" : ""),
+        dataIs = propsIn["data-is"] || "",
+        banner = `${internalID} ${name}${dataIs ? ` ${dataIs}` : ""} ${type}`;
+      if (console.info(`%c ${banner} (hydrated: ${isHydrated}) (unmounted: ${state.unmounted})`, "background: green; color: white;"), isServer) log({
+        noClassNames,
+        isAnimated,
+        shouldAvoidClasses,
+        isWeb,
+        supportsCSSVars
+      });else {
         console.groupEnd();
-        var ch = propsIn.children, childLog = typeof ch == "string" ? ch.length > 4 ? ch.slice(0, 4) + "..." : ch : "";
+        var ch = propsIn.children,
+          childLog = typeof ch == "string" ? ch.length > 4 ? ch.slice(0, 4) + "..." : ch : "";
         childLog.length && (childLog = `(children: ${childLog})`), console.groupCollapsed(`${childLog} Props:`), log("props in:", propsIn), log("final props:", props), log({
           state,
           staticConfig,
@@ -288,98 +400,115 @@ function createComponent(staticConfig) {
     process.env.NODE_ENV === "development" && time && time`theme`;
     var mediaState = useMedia(stateRef, componentContext, debugProp);
     setDidGetVariableValue(!1), process.env.NODE_ENV === "development" && time && time`media`;
-    var resolveValues = (
+    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"
-    ), styleProps = {
-      mediaState,
-      noClassNames,
-      resolveValues,
-      isExiting,
-      isAnimated,
-      willBeAnimated,
-      styledContextProps
-    }, splitStyles = 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);
+      isAnimated && !supportsCSSVars || isHOC && state.unmounted == !1 && hasAnimationProp ? "value" : "auto",
+      styleProps = {
+        mediaState,
+        noClassNames,
+        resolveValues,
+        isExiting,
+        isAnimated,
+        willBeAnimated,
+        styledContextProps
+      },
+      splitStyles = 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" && !curStateRef.hasMeasured) {
       var _splitStyles;
       (_splitStyles = splitStyles).style || (_splitStyles.style = {}), splitStyles.style.opacity = 0;
     }
     process.env.NODE_ENV === "development" && time && time`split-styles`, curStateRef.isListeningToTheme = splitStyles.dynamicThemeAccess;
-    var hasRuntimeMediaKeys = splitStyles.hasMedia && splitStyles.hasMedia !== !0, shouldListenForMedia = didGetVariableValue() || hasRuntimeMediaKeys || noClassNames && splitStyles.hasMedia === !0, mediaListeningKeys = hasRuntimeMediaKeys ? splitStyles.hasMedia : null;
+    var hasRuntimeMediaKeys = splitStyles.hasMedia && splitStyles.hasMedia !== !0,
+      shouldListenForMedia = didGetVariableValue() || hasRuntimeMediaKeys || noClassNames && splitStyles.hasMedia === !0,
+      mediaListeningKeys = hasRuntimeMediaKeys ? splitStyles.hasMedia : null;
     process.env.NODE_ENV === "development" && debugProp && console.info("useMedia() createComponent", shouldListenForMedia, mediaListeningKeys), setMediaShouldUpdate(stateRef, {
       enabled: shouldListenForMedia,
       keys: mediaListeningKeys
     });
-    var { viewProps: viewPropsIn, pseudos, style: splitStylesStyle, classNames, space } = splitStyles, propsWithAnimation = props, {
-      asChild,
-      children,
-      themeShallow,
-      spaceDirection: _spaceDirection,
-      onPress,
-      onLongPress,
-      onPressIn,
-      onPressOut,
-      onHoverIn,
-      onHoverOut,
-      onMouseUp,
-      onMouseDown,
-      onMouseEnter,
-      onMouseLeave,
-      onFocus,
-      onBlur,
-      separator,
-      // ignore from here on out
-      forceStyle: _forceStyle,
-      // @ts-ignore  for next/link compat etc
-      onClick,
-      theme: _themeProp,
-      ...nonTamaguiProps
-    } = viewPropsIn, viewProps = nonTamaguiProps;
+    var {
+        viewProps: viewPropsIn,
+        pseudos,
+        style: splitStylesStyle,
+        classNames,
+        space
+      } = splitStyles,
+      propsWithAnimation = props,
+      {
+        asChild,
+        children,
+        themeShallow,
+        spaceDirection: _spaceDirection,
+        onPress,
+        onLongPress,
+        onPressIn,
+        onPressOut,
+        onHoverIn,
+        onHoverOut,
+        onMouseUp,
+        onMouseDown,
+        onMouseEnter,
+        onMouseLeave,
+        onFocus,
+        onBlur,
+        separator,
+        // ignore from here on out
+        forceStyle: _forceStyle,
+        // @ts-ignore  for next/link compat etc
+        onClick,
+        theme: _themeProp,
+        ...nonTamaguiProps
+      } = viewPropsIn,
+      viewProps = nonTamaguiProps;
     !isTaggable && props.forceStyle && (viewProps.forceStyle = props.forceStyle), isHOC && _themeProp && (viewProps.theme = _themeProp), elementType.acceptTagProp && (viewProps.tag = tagProp);
-    var animationStyles, shouldUseAnimation = (
+    var animationStyles,
+      shouldUseAnimation =
       // if it supports css vars we run it on server too to get matching initial style
-      (supportsCSSVars ? willBeAnimatedClient : willBeAnimated) && useAnimations && !isHOC
-    );
+      (supportsCSSVars ? willBeAnimatedClient : willBeAnimated) && useAnimations && !isHOC;
     if (shouldUseAnimation) {
-      var _themeState_state1, animations = useAnimations({
-        props: propsWithAnimation,
-        // if hydrating, send empty style
-        style: splitStylesStyle || {},
-        presence,
-        componentState: state,
-        styleProps,
-        theme: (_themeState_state1 = themeState.state) === null || _themeState_state1 === void 0 ? void 0 : _themeState_state1.theme,
-        pseudos: pseudos || null,
-        staticConfig,
-        stateRef
-      });
+      var _themeState_state1,
+        animations = useAnimations({
+          props: propsWithAnimation,
+          // if hydrating, send empty style
+          style: splitStylesStyle || {},
+          presence,
+          componentState: state,
+          styleProps,
+          theme: (_themeState_state1 = themeState.state) === null || _themeState_state1 === void 0 ? void 0 : _themeState_state1.theme,
+          pseudos: pseudos || null,
+          staticConfig,
+          stateRef
+        });
       (isAnimated || supportsCSSVars) && animations && (animationStyles = animations.style, viewProps.style = animationStyles, animations.className && (viewProps.className = `${viewProps.className || ""} ${animations.className}`)), process.env.NODE_ENV === "development" && time && time`animations`;
     }
     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" && time && time`destructure`, groupName && (nonTamaguiProps.onLayout = composeEventHandlers(nonTamaguiProps.onLayout, function(e) {
+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" && time && time`destructure`, groupName && (nonTamaguiProps.onLayout = composeEventHandlers(nonTamaguiProps.onLayout, function (e) {
       stateRef.current.group.emit(groupName, {
         layout: e.nativeEvent.layout
-      }), !stateRef.current.hasMeasured && props.untilMeasured === "hide" && setState(function(prev) {
+      }), !stateRef.current.hasMeasured && props.untilMeasured === "hide" && setState(function (prev) {
         return {
           ...prev
         };
       }), stateRef.current.hasMeasured = !0;
-    })), viewProps = ((_hooks_usePropsTransform = hooks.usePropsTransform) === null || _hooks_usePropsTransform === void 0 ? void 0 : _hooks_usePropsTransform.call(hooks, elementType, nonTamaguiProps, stateRef, curStateRef.willHydrate)) || nonTamaguiProps, curStateRef.composedRef || (curStateRef.composedRef = composeRefs(function(x) {
+    })), viewProps = ((_hooks_usePropsTransform = hooks.usePropsTransform) === null || _hooks_usePropsTransform === void 0 ? void 0 : _hooks_usePropsTransform.call(hooks, elementType, nonTamaguiProps, stateRef, curStateRef.willHydrate)) || nonTamaguiProps, curStateRef.composedRef || (curStateRef.composedRef = composeRefs(function (x) {
       return stateRef.current.host = x;
-    }, forwardedRef, setElementProps)), viewProps.ref = curStateRef.composedRef, process.env.NODE_ENV === "development" && !isReactNative && !isText && isWeb && !isHOC && React.Children.toArray(props.children).forEach(function(item) {
+    }, forwardedRef, setElementProps)), viewProps.ref = curStateRef.composedRef, process.env.NODE_ENV === "development" && !isReactNative && !isText && isWeb && !isHOC && React.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 <View>.`);
     }), process.env.NODE_ENV === "development" && time && time`events-hooks`;
-    var { pseudoGroups, mediaGroups } = splitStyles, unPress = function() {
-      return setStateShallow({
-        press: !1,
-        pressIn: !1
-      });
-    };
-    process.env.NODE_ENV === "development" && isWeb && useIsomorphicLayoutEffect(function() {
+    var {
+        pseudoGroups,
+        mediaGroups
+      } = splitStyles,
+      unPress = function () {
+        return setStateShallow({
+          press: !1,
+          pressIn: !1
+        });
+      };
+    process.env.NODE_ENV === "development" && isWeb && useIsomorphicLayoutEffect(function () {
       debugProp && (console.groupCollapsed("Rendered style >"), console.warn(getComputedStyle(stateRef.current.host)), console.groupEnd());
-    }), React.useEffect(function() {
+    }), React.useEffect(function () {
       if (!disabled) {
         if (state.unmounted === !0 && hasEnterStyle) {
           setStateShallow({
@@ -401,21 +530,21 @@ If you meant to do this, you can disable this warning - either change untilMeasu
           mediaGroups,
           pseudoGroups
         });
-        return function() {
+        return function () {
           dispose?.(), componentSetStates.delete(setState);
         };
       }
-    }, [
-      state.unmounted,
-      disabled,
-      pseudoGroups ? Object.keys([
-        ...pseudoGroups
-      ]).join("") : 0,
-      mediaGroups ? Object.keys([
-        ...mediaGroups
-      ]).join("") : 0
-    ]);
-    var runtimePressStyle = !disabled && noClassNames && pseudos?.pressStyle, runtimeFocusStyle = !disabled && noClassNames && pseudos?.focusStyle, runtimeFocusVisibleStyle = !disabled && noClassNames && pseudos?.focusVisibleStyle, attachFocus = !!(runtimePressStyle || runtimeFocusStyle || runtimeFocusVisibleStyle || onFocus || onBlur), attachPress = !!(groupName || runtimePressStyle || onPress || onPressOut || onPressIn || onMouseDown || onMouseUp || onLongPress || onClick || pseudos?.focusVisibleStyle), runtimeHoverStyle = !disabled && noClassNames && pseudos?.hoverStyle, needsHoverState = !!(groupName || runtimeHoverStyle || onHoverIn || onHoverOut), attachHover = isWeb && !!(groupName || needsHoverState || onMouseEnter || onMouseLeave), shouldAttach = !disabled && !props.asChild && !!(attachFocus || attachPress || attachHover || runtimePressStyle || runtimeHoverStyle || runtimeFocusStyle), needsPressState = !!(groupName || runtimePressStyle);
+    }, [state.unmounted, disabled, pseudoGroups ? Object.keys([...pseudoGroups]).join("") : 0, mediaGroups ? Object.keys([...mediaGroups]).join("") : 0]);
+    var runtimePressStyle = !disabled && noClassNames && pseudos?.pressStyle,
+      runtimeFocusStyle = !disabled && noClassNames && pseudos?.focusStyle,
+      runtimeFocusVisibleStyle = !disabled && noClassNames && pseudos?.focusVisibleStyle,
+      attachFocus = !!(runtimePressStyle || runtimeFocusStyle || runtimeFocusVisibleStyle || onFocus || onBlur),
+      attachPress = !!(groupName || runtimePressStyle || onPress || onPressOut || onPressIn || onMouseDown || onMouseUp || onLongPress || onClick || pseudos?.focusVisibleStyle),
+      runtimeHoverStyle = !disabled && noClassNames && pseudos?.hoverStyle,
+      needsHoverState = !!(groupName || runtimeHoverStyle || onHoverIn || onHoverOut),
+      attachHover = isWeb && !!(groupName || needsHoverState || onMouseEnter || onMouseLeave),
+      shouldAttach = !disabled && !props.asChild && !!(attachFocus || attachPress || attachHover || runtimePressStyle || runtimeHoverStyle || runtimeFocusStyle),
+      needsPressState = !!(groupName || runtimePressStyle);
     process.env.NODE_ENV === "development" && time && time`events-setup`, process.env.NODE_ENV === "development" && debugProp === "verbose" && log("\u{1FAA9} events()", {
       runtimeFocusStyle,
       runtimePressStyle,
@@ -428,36 +557,36 @@ If you meant to do this, you can disable this warning - either change untilMeasu
       needsHoverState
     });
     var events = shouldAttach ? {
-      onPressOut: attachPress ? function(e) {
+      onPressOut: attachPress ? function (e) {
         unPress(), onPressOut?.(e), onMouseUp?.(e);
       } : void 0,
-      ...(attachHover || attachPress) && {
-        onMouseEnter: function(e) {
+      ...((attachHover || attachPress) && {
+        onMouseEnter: function (e) {
           var next = {};
           needsHoverState && (next.hover = !0), needsPressState && state.pressIn && (next.press = !0), setStateShallow(next), onHoverIn?.(e), onMouseEnter?.(e);
         },
-        onMouseLeave: function(e) {
+        onMouseLeave: function (e) {
           var next = {};
           needsHoverState && (next.hover = !1), needsPressState && state.pressIn && (next.press = !1, next.pressIn = !1), setStateShallow(next), onHoverOut?.(e), onMouseLeave?.(e);
         }
-      },
-      onPressIn: attachPress ? function(e) {
+      }),
+      onPressIn: attachPress ? function (e) {
         (runtimePressStyle || groupName) && setStateShallow({
           press: !0,
           pressIn: !0
         }), onPressIn?.(e), onMouseDown?.(e), isWeb && componentSetStates.add(setState);
       } : void 0,
-      onPress: attachPress ? function(e) {
+      onPress: attachPress ? function (e) {
         unPress(), isWeb && onClick?.(e), onPress?.(e);
       } : void 0,
-      ...attachPress && onLongPress && {
-        onLongPress: function(e) {
+      ...(attachPress && onLongPress && {
+        onLongPress: function (e) {
           unPress(), onLongPress?.(e);
         }
-      },
-      ...attachFocus && {
-        onFocus: function(e) {
-          pseudos?.focusVisibleStyle ? setTimeout(function() {
+      }),
+      ...(attachFocus && {
+        onFocus: function (e) {
+          pseudos?.focusVisibleStyle ? setTimeout(function () {
             setStateShallow({
               focus: !0,
               focusVisible: !!lastInteractionWasKeyboard.value
@@ -467,13 +596,13 @@ If you meant to do this, you can disable this warning - either change untilMeasu
             focusVisible: !1
           }), onFocus?.(e);
         },
-        onBlur: function(e) {
+        onBlur: function (e) {
           setStateShallow({
             focus: !1,
             focusVisible: !1
           }), onBlur?.(e);
         }
-      }
+      })
     } : null;
     if (events && !asChild) {
       var _viewProps_focusable;
@@ -503,25 +632,21 @@ If you meant to do this, you can disable this warning - either change untilMeasu
       isZStack,
       debug: debugProp
     });
-    if (asChild)
-      if (elementType = Slot, 0)
-        var webStyleEvents, passEvents;
-      else
-        Object.assign(viewProps, {
-          onPress,
-          onLongPress
-        });
+    if (asChild) if (elementType = Slot, 0) var webStyleEvents, passEvents;else Object.assign(viewProps, {
+      onPress,
+      onLongPress
+    });
     process.env.NODE_ENV === "development" && time && time`spaced-as-child`;
     var useChildrenResult;
-    hooks.useChildren && (useChildrenResult = hooks.useChildren(elementType, content, viewProps, events, staticConfig)), useChildrenResult ? content = useChildrenResult : content = /* @__PURE__ */ React.createElement(elementType, viewProps, content);
+    hooks.useChildren && (useChildrenResult = hooks.useChildren(elementType, content, viewProps, events, staticConfig)), useChildrenResult ? content = useChildrenResult : content = /* @__PURE__ */React.createElement(elementType, viewProps, content);
     var ResetPresence = config == null || (_config_animations = config.animations) === null || _config_animations === void 0 ? void 0 : _config_animations.ResetPresence;
-    ResetPresence && willBeAnimated && (hasEnterStyle || presenceState) && content && typeof content != "string" && (content = /* @__PURE__ */ _jsx(ResetPresence, {
+    ResetPresence && willBeAnimated && (hasEnterStyle || presenceState) && content && typeof content != "string" && (content = /* @__PURE__ */_jsx(ResetPresence, {
       children: content
     })), process.env.NODE_ENV === "development" && time && time`create-element`;
-    var groupState = curStateRef.group, subGroupContext = React.useMemo(function() {
-      var _splitStyles_style, _splitStyles_style1;
-      if (!(!groupState || !groupName))
-        return groupState.listeners.clear(), {
+    var groupState = curStateRef.group,
+      subGroupContext = React.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: {
@@ -539,39 +664,36 @@ If you meant to do this, you can disable this warning - either change untilMeasu
           emit: groupState.emit,
           subscribe: groupState.subscribe
         };
-    }, [
-      groupName
-    ]);
-    if (groupName && subGroupContext && (content = /* @__PURE__ */ _jsx(ComponentContext.Provider, {
+      }, [groupName]);
+    if (groupName && subGroupContext && (content = /* @__PURE__ */_jsx(ComponentContext.Provider, {
       ...componentContext,
       groups: subGroupContext,
       children: content
-    })), process.env.NODE_ENV === "development" && time && time`group-context`, content = disableTheme ? content : getThemedChildren(themeState, content, themeStateProps, !1, stateRef), process.env.NODE_ENV === "development" && time && time`themed-children`, process.env.NODE_ENV === "development" && props.debug === "visualize" && (content = /* @__PURE__ */ _jsx(ThemeDebug, {
+    })), process.env.NODE_ENV === "development" && time && time`group-context`, content = disableTheme ? content : getThemedChildren(themeState, content, themeStateProps, !1, stateRef), process.env.NODE_ENV === "development" && time && time`themed-children`, process.env.NODE_ENV === "development" && props.debug === "visualize" && (content = /* @__PURE__ */_jsx(ThemeDebug, {
       themeState,
       themeProps: props,
       children: content
     })), staticConfig.context) {
       var contextProps = staticConfig.context.props;
-      for (var key1 in contextProps)
-        if (viewProps.style && key1 in viewProps.style || key1 in viewProps) {
-          var _viewProps_style;
-          overriddenContextProps || (overriddenContextProps = {});
-          var _viewProps_style_key;
-          overriddenContextProps[key1] = (_viewProps_style_key = (_viewProps_style = viewProps.style) === null || _viewProps_style === void 0 ? void 0 : _viewProps_style[key1]) !== null && _viewProps_style_key !== void 0 ? _viewProps_style_key : viewProps[key1];
-        }
+      for (var key1 in contextProps) if (viewProps.style && key1 in viewProps.style || key1 in viewProps) {
+        var _viewProps_style;
+        overriddenContextProps || (overriddenContextProps = {});
+        var _viewProps_style_key;
+        overriddenContextProps[key1] = (_viewProps_style_key = (_viewProps_style = viewProps.style) === null || _viewProps_style === void 0 ? void 0 : _viewProps_style[key1]) !== null && _viewProps_style_key !== void 0 ? _viewProps_style_key : viewProps[key1];
+      }
     }
     if (overriddenContextProps) {
       var Provider = staticConfig.context.Provider;
-      content = /* @__PURE__ */ _jsx(Provider, {
+      content = /* @__PURE__ */_jsx(Provider, {
         ...contextValue,
         ...overriddenContextProps,
         children: content
       });
     }
-    if (process.env.TAMAGUI_REACT_19 && !1)
-      var rulesToInsert, keys;
+    if (process.env.TAMAGUI_REACT_19 && !1) var rulesToInsert, keys;
     if (process.env.NODE_ENV === "development" && debugProp && debugProp !== "profile") {
-      var element1 = typeof elementType == "string" ? elementType : "Component", title = `render <${element1} /> (${internalID}) with props`;
+      var element1 = typeof elementType == "string" ? elementType : "Component",
+        title = `render <${element1} /> (${internalID}) with props`;
       if (isWeb) {
         console.groupCollapsed(title);
         try {
@@ -602,25 +724,22 @@ If you meant to do this, you can disable this warning - either change untilMeasu
             viewProps,
             willBeAnimated
           }));
-        } catch {
-        } finally {
+        } catch {} finally {
           console.groupEnd();
         }
       } else {
         log(title), log("state: ", state), isDevTools && log("viewProps", viewProps), log("final styles:");
-        for (var key2 in splitStylesStyle)
-          log(key2, splitStylesStyle[key2]);
+        for (var key2 in splitStylesStyle) log(key2, splitStylesStyle[key2]);
       }
-      if (debugProp === "break")
-        debugger;
+      if (debugProp === "break") debugger;
     }
-    return process.env.NODE_ENV === "development" && time && (time`rest`, globalThis.willPrint || (globalThis.willPrint = !0, setTimeout(function() {
+    return process.env.NODE_ENV === "development" && time && (time`rest`, globalThis.willPrint || (globalThis.willPrint = !0, setTimeout(function () {
       delete globalThis.willPrint, time.print(), time = null;
     }, 50))), content;
   });
   staticConfig.componentName && (component.displayName = staticConfig.componentName);
   var res = component;
-  (process.env.TAMAGUI_FORCE_MEMO || staticConfig.memo) && (res = /* @__PURE__ */ React.memo(res)), res.staticConfig = staticConfig;
+  (process.env.TAMAGUI_FORCE_MEMO || staticConfig.memo) && (res = /* @__PURE__ */React.memo(res)), res.staticConfig = staticConfig;
   function extendStyledConfig(extended) {
     return {
       ...staticConfig,
@@ -634,8 +753,11 @@ If you meant to do this, you can disable this warning - either change untilMeasu
     return Component2.staticConfig = extendStyledConfig(extended), Component2.styleable = styleable, Component2;
   }
   function styleable(Component2, options) {
-    var _Component_render, isForwardedRefAlready = ((_Component_render = Component2.render) === null || _Component_render === void 0 ? void 0 : _Component_render.length) === 2, out = isForwardedRefAlready ? Component2 : /* @__PURE__ */ React.forwardRef(Component2), extendedConfig = extendStyledConfig(options?.staticConfig);
-    return out = options?.disableTheme ? out : themeable(out, extendedConfig), process.env.TAMAGUI_MEMOIZE_STYLEABLE && (out = /* @__PURE__ */ React.memo(out)), out.staticConfig = extendedConfig, out.styleable = styleable, out;
+    var _Component_render,
+      isForwardedRefAlready = ((_Component_render = Component2.render) === null || _Component_render === void 0 ? void 0 : _Component_render.length) === 2,
+      out = isForwardedRefAlready ? Component2 : /* @__PURE__ */React.forwardRef(Component2),
+      extendedConfig = extendStyledConfig(options?.staticConfig);
+    return out = options?.disableTheme ? out : themeable(out, extendedConfig), process.env.TAMAGUI_MEMOIZE_STYLEABLE && (out = /* @__PURE__ */React.memo(out)), out.staticConfig = extendedConfig, out.styleable = styleable, out;
   }
   return res.extractable = extractable, res.styleable = styleable, res;
 }
@@ -643,68 +765,89 @@ function Unspaced(props) {
   return props.children;
 }
 Unspaced.isUnspaced = !0;
-var getSpacerSize = function(size, param) {
-  var { tokens } = param;
-  size = size === !0 ? "$true" : size;
-  var _tokens_space_size, sizePx = (_tokens_space_size = tokens.space[size]) !== null && _tokens_space_size !== void 0 ? _tokens_space_size : size;
-  return {
-    width: sizePx,
-    height: sizePx,
-    minWidth: sizePx,
-    minHeight: sizePx
-  };
-}, Spacer = createComponent({
-  acceptsClassName: !0,
-  memo: !0,
-  componentName: "Spacer",
-  validStyles,
-  defaultProps: {
-    ...stackDefaultStyles,
-    // avoid nesting issues
-    tag: "span",
-    size: !0,
-    pointerEvents: "none"
+var getSpacerSize = function (size, param) {
+    var {
+      tokens
+    } = param;
+    size = size === !0 ? "$true" : size;
+    var _tokens_space_size,
+      sizePx = (_tokens_space_size = tokens.space[size]) !== null && _tokens_space_size !== void 0 ? _tokens_space_size : size;
+    return {
+      width: sizePx,
+      height: sizePx,
+      minWidth: sizePx,
+      minHeight: sizePx
+    };
   },
-  variants: {
-    size: {
-      "...": getSpacerSize
-    },
-    flex: {
-      true: {
-        flexGrow: 1
-      }
+  Spacer = createComponent({
+    acceptsClassName: !0,
+    memo: !0,
+    componentName: "Spacer",
+    validStyles,
+    defaultProps: {
+      ...stackDefaultStyles,
+      // avoid nesting issues
+      tag: "span",
+      size: !0,
+      pointerEvents: "none"
     },
-    direction: {
-      horizontal: {
-        height: 0,
-        minHeight: 0
+    variants: {
+      size: {
+        "...": getSpacerSize
       },
-      vertical: {
-        width: 0,
-        minWidth: 0
+      flex: {
+        true: {
+          flexGrow: 1
+        }
       },
-      both: {}
+      direction: {
+        horizontal: {
+          height: 0,
+          minHeight: 0
+        },
+        vertical: {
+          width: 0,
+          minWidth: 0
+        },
+        both: {}
+      }
     }
-  }
-});
+  });
 function spacedChildren(props) {
-  var _childrenList__type, _childrenList_, { isZStack, children, space, direction, spaceFlex, separator, ensureKeys } = props, hasSpace = !!(space || spaceFlex), hasSeparator = separator != null, areChildrenArray = Array.isArray(children);
-  if (!ensureKeys && !(hasSpace || hasSeparator || isZStack))
-    return children;
-  var childrenList = areChildrenArray ? children : React.Children.toArray(children), len = childrenList.length;
-  if (len <= 1 && !isZStack && !(!((_childrenList_ = childrenList[0]) === null || _childrenList_ === void 0 || (_childrenList__type = _childrenList_.type) === null || _childrenList__type === void 0) && _childrenList__type.shouldForwardSpace))
-    return children;
-  var final = [], _iteratorNormalCompletion = !0, _didIteratorError = !1, _iteratorError = void 0;
+  var _childrenList__type,
+    _childrenList_,
+    {
+      isZStack,
+      children,
+      space,
+      direction,
+      spaceFlex,
+      separator,
+      ensureKeys
+    } = props,
+    hasSpace = !!(space || spaceFlex),
+    hasSeparator = separator != null,
+    areChildrenArray = Array.isArray(children);
+  if (!ensureKeys && !(hasSpace || hasSeparator || isZStack)) return children;
+  var childrenList = areChildrenArray ? children : React.Children.toArray(children),
+    len = childrenList.length;
+  if (len <= 1 && !isZStack && !(!((_childrenList_ = childrenList[0]) === null || _childrenList_ === void 0 || (_childrenList__type = _childrenList_.type) === null || _childrenList__type === void 0) && _childrenList__type.shouldForwardSpace)) return children;
+  var final = [],
+    _iteratorNormalCompletion = !0,
+    _didIteratorError = !1,
+    _iteratorError = void 0;
   try {
     for (var _iterator = childrenList.entries()[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0) {
-      var [index, child] = _step.value, _child_type, isEmpty = child == null || Array.isArray(child) && child.length === 0;
-      if (!isEmpty && /* @__PURE__ */ React.isValidElement(child) && (!((_child_type = child.type) === null || _child_type === void 0) && _child_type.shouldForwardSpace) && (child = /* @__PURE__ */ React.cloneElement(child, {
+      var [index, child] = _step.value,
+        _child_type,
+        isEmpty = child == null || Array.isArray(child) && child.length === 0;
+      if (!isEmpty && /* @__PURE__ */React.isValidElement(child) && !((_child_type = child.type) === null || _child_type === void 0) && _child_type.shouldForwardSpace && (child = /* @__PURE__ */React.cloneElement(child, {
         space,
         spaceFlex,
         separator,
         key: child.key
-      })), isEmpty || !child || child.key && !isZStack ? final.push(child) : final.push(/* @__PURE__ */ _jsx(React.Fragment, {
-        children: isZStack ? /* @__PURE__ */ _jsx(AbsoluteFill, {
+      })), isEmpty || !child || child.key && !isZStack ? final.push(child) : final.push(/* @__PURE__ */_jsx(React.Fragment, {
+        children: isZStack ? /* @__PURE__ */_jsx(AbsoluteFill, {
           children: child
         }) : child
       }, `${index}0t`)), !(isUnspaced(child) && index === 0) && !isZStack) {
@@ -714,7 +857,7 @@ function spacedChildren(props) {
           direction,
           space,
           spaceFlex
-        })), final.push(/* @__PURE__ */ _jsx(React.Fragment, {
+        })), final.push(/* @__PURE__ */_jsx(React.Fragment, {
           children: separator
         }, `${index}03t`)), hasSpace && final.push(createSpacer({
           key: `_${index}01t`,
@@ -735,20 +878,24 @@ function spacedChildren(props) {
     try {
       !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
     } finally {
-      if (_didIteratorError)
-        throw _iteratorError;
+      if (_didIteratorError) throw _iteratorError;
     }
   }
   return process.env.NODE_ENV === "development" && props.debug && log("  Spaced children", final, props), final;
 }
 function createSpacer(param) {
-  var { key, direction, space, spaceFlex } = param;
-  return /* @__PURE__ */ _jsx(Spacer, {
+  var {
+    key,
+    direction,
+    space,
+    spaceFlex
+  } = param;
+  return /* @__PURE__ */_jsx(Spacer, {
     size: space,
     direction,
-    ...typeof spaceFlex < "u" && {
+    ...(typeof spaceFlex < "u" && {
       flex: spaceFlex === !0 ? 1 : spaceFlex === !1 ? 0 : spaceFlex
-    }
+    })
   }, key);
 }
 function isUnspaced(child) {
@@ -768,51 +915,55 @@ var AbsoluteFill = createComponent({
   }
 });
 function hasAnimatedStyleValue(style) {
-  return Object.keys(style).some(function(k) {
+  return Object.keys(style).some(function (k) {
     var val = style[k];
     return val && typeof val == "object" && "_animation" in val;
   });
 }
-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 { disabled = !1, setStateShallow, pseudoGroups, mediaGroups, componentContext, state } = param;
-  if (pseudoGroups || mediaGroups) {
-    var _componentContext_groups_subscribe, _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 || (_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;
-      if (pseudo && pseudoGroups?.has(String(name)))
-        Object.assign(current.pseudo, pseudo), persist();
-      else if (layout && mediaGroups) {
-        var mediaState = getMediaState(mediaGroups, layout), next = mergeIfNotShallowEqual(current.media, mediaState);
-        next !== current.media && (Object.assign(current.media, next), persist());
-      }
-      function persist() {
-        var group = {
-          ...state.group,
-          [name]: current
+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 {
+      disabled = !1,
+      setStateShallow,
+      pseudoGroups,
+      mediaGroups,
+      componentContext,
+      state
+    } = param;
+    if (pseudoGroups || mediaGroups) {
+      var _componentContext_groups_subscribe,
+        _componentContext_groups,
+        current = {
+          pseudo: {},
+          media: {}
         };
-        setStateShallow({
-          group
-        });
-      }
-    });
-  }
-};
-export {
-  Spacer,
-  Unspaced,
-  componentSetStates,
-  createComponent,
-  isDisabled,
-  spacedChildren,
-  subscribeToContextGroup,
-  useComponentState
-};
-//# sourceMappingURL=createComponent.js.map
+      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;
+        if (pseudo && pseudoGroups?.has(String(name))) Object.assign(current.pseudo, pseudo), persist();else if (layout && mediaGroups) {
+          var mediaState = getMediaState(mediaGroups, layout),
+            next = mergeIfNotShallowEqual(current.media, mediaState);
+          next !== current.media && (Object.assign(current.media, next), persist());
+        }
+        function persist() {
+          var group = {
+            ...state.group,
+            [name]: current
+          };
+          setStateShallow({
+            group
+          });
+        }
+      });
+    }
+  };
+export { Spacer, Unspaced, componentSetStates, createComponent, isDisabled, spacedChildren, subscribeToContextGroup, useComponentState };
+//# sourceMappingURL=createComponent.native.js.map