@tamagui/web 1.61.3 → 1.62.1

package/dist/cjs/createComponent.js

@@ -1,20 +1,15 @@
-"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __getProtoOf = Object.getPrototypeOf, __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
+    __defProp(target, name, { get: all[name], enumerable: !0 });
+}, __copyProps = (to, from, except, desc) => {
+  if (from && typeof from == "object" || typeof from == "function")
     for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
+      !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
@@ -22,10 +17,9 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   // file that has been converted to a CommonJS file using a Babel-
   // compatible transform (i.e. "__esModule" has not been set), then set
   // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: !0 }) : target,
   mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+)), __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
 var createComponent_exports = {};
 __export(createComponent_exports, {
   Spacer: () => Spacer,
@@ -36,75 +30,34 @@ __export(createComponent_exports, {
   spacedChildren: () => spacedChildren
 });
 module.exports = __toCommonJS(createComponent_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_compose_refs = require("@tamagui/compose-refs");
-var import_constants = require("@tamagui/constants");
-var import_helpers = require("@tamagui/helpers");
-var import_use_did_finish_ssr = require("@tamagui/use-did-finish-ssr");
-var import_react = __toESM(require("react"));
-var import_config = require("./config");
-var import_constants2 = require("./constants/constants");
-var import_ComponentContext = require("./contexts/ComponentContext");
-var import_createVariable = require("./createVariable");
-var import_createShallowSetState = require("./helpers/createShallowSetState");
-var import_getSplitStyles = require("./helpers/getSplitStyles");
-var import_mergeProps = require("./helpers/mergeProps");
-var import_proxyThemeVariables = require("./helpers/proxyThemeVariables");
-var import_themeable = require("./helpers/themeable");
-var import_useMedia = require("./hooks/useMedia");
-var import_useTheme = require("./hooks/useTheme");
-var import_setupHooks = require("./setupHooks");
-var import_Slot = require("./views/Slot");
-var import_Theme = require("./views/Theme");
-var import_ThemeDebug = require("./views/ThemeDebug");
-process.env.TAMAGUI_TARGET;
+var import_compose_refs = require("@tamagui/compose-refs"), import_constants = require("@tamagui/constants"), import_helpers = require("@tamagui/helpers"), import_use_did_finish_ssr = require("@tamagui/use-did-finish-ssr"), import_react = __toESM(require("react")), import_config = require("./config"), import_constants2 = require("./constants/constants"), import_ComponentContext = require("./contexts/ComponentContext"), import_createVariable = require("./createVariable"), import_createShallowSetState = require("./helpers/createShallowSetState"), import_getSplitStyles = require("./helpers/getSplitStyles"), import_mergeProps = require("./helpers/mergeProps"), import_proxyThemeVariables = require("./helpers/proxyThemeVariables"), import_themeable = require("./helpers/themeable"), import_useMedia = require("./hooks/useMedia"), import_useTheme = require("./hooks/useTheme"), import_setupHooks = require("./setupHooks"), import_Slot = require("./views/Slot"), import_Theme = require("./views/Theme"), import_ThemeDebug = require("./views/ThemeDebug"), import_jsx_runtime = require("react/jsx-runtime");
 const defaultComponentState = {
-  hover: false,
-  press: false,
-  pressIn: false,
-  focus: false,
-  unmounted: true
-};
-const defaultComponentStateMounted = {
+  hover: !1,
+  press: !1,
+  pressIn: !1,
+  focus: !1,
+  unmounted: !0
+}, defaultComponentStateMounted = {
   ...defaultComponentState,
-  unmounted: false
-};
-const defaultComponentStateShouldEnter = {
+  unmounted: !1
+}, defaultComponentStateShouldEnter = {
   ...defaultComponentState,
   unmounted: "should-enter"
 };
-let tamaguiConfig;
-let AnimatedText;
-let AnimatedView;
-let initialTheme;
-let time;
+let tamaguiConfig, AnimatedText, AnimatedView, initialTheme, time;
 const mouseUps = /* @__PURE__ */ new Set();
-if (typeof document !== "undefined") {
+if (typeof document < "u") {
   const cancelTouches = () => {
-    mouseUps.forEach((x) => x());
-    mouseUps.clear();
+    mouseUps.forEach((x) => x()), mouseUps.clear();
   };
-  addEventListener("mouseup", cancelTouches);
-  addEventListener("touchend", cancelTouches);
-  addEventListener("touchcancel", cancelTouches);
+  addEventListener("mouseup", cancelTouches), addEventListener("touchend", cancelTouches), addEventListener("touchcancel", cancelTouches);
 }
-let BaseText;
-let BaseView;
-let hasSetupBaseViews = false;
+let BaseText, BaseView;
 function createComponent(staticConfig) {
-  var _a;
   (0, import_config.onConfiguredOnce)((conf) => {
-    if (!tamaguiConfig) {
-      tamaguiConfig = conf;
-      if (!initialTheme) {
-        const next = conf.themes[Object.keys(conf.themes)[0]];
-        initialTheme = (0, import_proxyThemeVariables.proxyThemeVariables)(next);
-        if (process.env.NODE_ENV === "development") {
-          if (!initialTheme) {
-            console.log("Warning: Missing theme");
-          }
-        }
-      }
+    if (!tamaguiConfig && (tamaguiConfig = conf, !initialTheme)) {
+      const next = conf.themes[Object.keys(conf.themes)[0]];
+      initialTheme = (0, import_proxyThemeVariables.proxyThemeVariables)(next), process.env.NODE_ENV === "development" && (initialTheme || console.log("Warning: Missing theme"));
     }
   });
   const {
@@ -114,40 +67,16 @@ function createComponent(staticConfig) {
     isHOC,
     validStyles: validStyles2 = {},
     variants = {}
-  } = staticConfig;
-  const defaultComponentClassName = `is_${staticConfig.componentName}`;
-  const defaultProps = staticConfig.defaultProps;
-  if (process.env.NODE_ENV === "development" && ((_a = staticConfig.defaultProps) == null ? void 0 : _a["debug"])) {
-    if (process.env.IS_STATIC !== "is_static") {
-      console.log(`\u{1F41B} [${staticConfig.componentName || "Component"}]`, {
-        staticConfig,
-        defaultProps,
-        defaultPropsKeyOrder: defaultProps ? Object.keys(defaultProps) : []
-      });
-    }
-  }
+  } = staticConfig, defaultComponentClassName = `is_${staticConfig.componentName}`, defaultProps = staticConfig.defaultProps;
+  process.env.NODE_ENV === "development" && staticConfig.defaultProps?.debug && process.env.IS_STATIC !== "is_static" && console.log(`\u{1F41B} [${staticConfig.componentName || "Component"}]`, {
+    staticConfig,
+    defaultProps,
+    defaultPropsKeyOrder: defaultProps ? Object.keys(defaultProps) : []
+  });
   const component = (0, import_react.forwardRef)((propsIn, forwardedRef) => {
-    var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
-    if (process.env.TAMAGUI_TARGET === "native") {
-      if (!hasSetupBaseViews) {
-        hasSetupBaseViews = true;
-        const baseViews = (_b = (_a2 = import_setupHooks.hooks).getBaseViews) == null ? void 0 : _b.call(_a2);
-        if (baseViews) {
-          BaseText = baseViews.Text;
-          BaseView = baseViews.View;
-        }
-      }
-    }
-    if (process.env.NODE_ENV === "test") {
-      if (propsIn["data-test-renders"]) {
-        (_c = propsIn["data-test-renders"])["current"] ?? (_c["current"] = 0);
-        propsIn["data-test-renders"]["current"] += 1;
-      }
-    }
+    process.env.NODE_ENV === "test" && propsIn["data-test-renders"] && (propsIn["data-test-renders"].current ??= 0, propsIn["data-test-renders"].current += 1);
     const componentContext = (0, import_react.useContext)(import_ComponentContext.ComponentContext);
-    let styledContextProps;
-    let overriddenContextProps;
-    let contextValue;
+    let styledContextProps, overriddenContextProps, contextValue;
     const { context } = staticConfig;
     if (context) {
       contextValue = (0, import_react.useContext)(context);
@@ -155,79 +84,36 @@ function createComponent(staticConfig) {
       for (const key in context.props) {
         const propVal = (
           // because its after default props but before props this annoying amount of checks
-          propsIn[key] ?? propsIn[inverseShorthands[key]] ?? (defaultProps == null ? void 0 : defaultProps[key]) ?? (defaultProps == null ? void 0 : defaultProps[inverseShorthands[key]])
+          propsIn[key] ?? propsIn[inverseShorthands[key]] ?? defaultProps?.[key] ?? defaultProps?.[inverseShorthands[key]]
         );
-        if (propVal === void 0) {
-          if (contextValue) {
-            const isValidValue = key in validStyles2 || key in variants;
-            if (isValidValue) {
-              styledContextProps || (styledContextProps = {});
-              styledContextProps[key] = contextValue[key];
-            }
-          }
-        } else {
-          overriddenContextProps || (overriddenContextProps = {});
-          overriddenContextProps[key] = propVal;
-        }
+        propVal === void 0 ? contextValue && (key in validStyles2 || key in variants) && (styledContextProps ||= {}, styledContextProps[key] = contextValue[key]) : (overriddenContextProps ||= {}, overriddenContextProps[key] = propVal);
       }
     }
     const curDefaultProps = styledContextProps ? { ...defaultProps, ...styledContextProps } : defaultProps;
     let props;
-    if (curDefaultProps) {
-      props = (0, import_mergeProps.mergeProps)(curDefaultProps, propsIn);
-    } else {
-      props = propsIn;
-    }
-    const debugProp = props["debug"];
-    const componentName = props.componentName || staticConfig.componentName;
-    if (!process.env.TAMAGUI_IS_CORE_NODE && process.env.NODE_ENV === "development" && debugProp === "profile" && !time) {
-      const timer = require("@tamagui/timer").timer();
-      time = timer.start();
-    }
-    if (process.env.NODE_ENV === "development" && time)
-      time`start (ignore)`;
+    curDefaultProps ? props = (0, import_mergeProps.mergeProps)(curDefaultProps, propsIn) : props = propsIn;
+    const debugProp = props.debug, componentName = props.componentName || staticConfig.componentName;
+    !process.env.TAMAGUI_IS_CORE_NODE && process.env.NODE_ENV === "development" && debugProp === "profile" && !time && (time = require("@tamagui/timer").timer().start()), process.env.NODE_ENV === "development" && time && time`start (ignore)`;
     const isHydrated = (0, import_use_did_finish_ssr.useDidFinishSSR)();
-    if (process.env.NODE_ENV === "development" && time)
-      time`did-finish-ssr`;
+    process.env.NODE_ENV === "development" && time && time`did-finish-ssr`;
     const stateRef = (0, import_react.useRef)(
       void 0
     );
-    stateRef.current || (stateRef.current = {});
-    if (process.env.NODE_ENV === "development" && time)
-      time`stateref`;
-    const hostRef = (0, import_react.useRef)(null);
-    const animationsConfig = componentContext.animationDriver;
-    const useAnimations = animationsConfig == null ? void 0 : animationsConfig.useAnimations;
-    const hasAnimationProp = Boolean(
-      props.animation || props.style && hasAnimatedStyleValue(props.style)
-    );
-    const supportsCSSVars = animationsConfig == null ? void 0 : animationsConfig.supportsCSSVars;
-    const willBeAnimated = (() => {
+    stateRef.current ||= {}, process.env.NODE_ENV === "development" && time && time`stateref`;
+    const hostRef = (0, import_react.useRef)(null), animationsConfig = componentContext.animationDriver, useAnimations = animationsConfig?.useAnimations, hasAnimationProp = !!(props.animation || props.style && hasAnimatedStyleValue(props.style)), supportsCSSVars = animationsConfig?.supportsCSSVars, willBeAnimated = (() => {
       if (import_constants.isServer && !supportsCSSVars)
-        return false;
+        return !1;
       const curState = stateRef.current;
-      const next = !!(hasAnimationProp && !isHOC && useAnimations);
-      return Boolean(next || curState.hasAnimated);
-    })();
-    const usePresence = animationsConfig == null ? void 0 : animationsConfig.usePresence;
-    const presence = willBeAnimated && (usePresence == null ? void 0 : usePresence()) || null;
-    const hasEnterStyle = !!props.enterStyle;
-    const needsMount = Boolean((import_constants.isWeb ? import_constants.isClient : true) && willBeAnimated);
-    if (process.env.NODE_ENV === "development" && time)
-      time`pre-use-state`;
-    const initialState = willBeAnimated ? supportsCSSVars ? defaultComponentStateShouldEnter : defaultComponentState : defaultComponentStateMounted;
-    const states = (0, import_react.useState)(initialState);
-    const state = propsIn.forceStyle ? { ...states[0], [propsIn.forceStyle]: true } : states[0];
-    const setState = states[1];
+      return !!(!!(hasAnimationProp && !isHOC && useAnimations) || curState.hasAnimated);
+    })(), usePresence = animationsConfig?.usePresence, presence = willBeAnimated && usePresence?.() || null, hasEnterStyle = !!props.enterStyle, needsMount = !!((!import_constants.isWeb || import_constants.isClient) && willBeAnimated);
+    process.env.NODE_ENV === "development" && time && time`pre-use-state`;
+    const initialState = willBeAnimated ? supportsCSSVars ? defaultComponentStateShouldEnter : defaultComponentState : defaultComponentStateMounted, states = (0, import_react.useState)(initialState), state = propsIn.forceStyle ? { ...states[0], [propsIn.forceStyle]: !0 } : states[0], setState = states[1];
     let setStateShallow = (0, import_createShallowSetState.createShallowSetState)(setState);
-    const groupName = props.group;
-    const groupClassName = groupName ? `t_group_${props.group}` : "";
+    const groupName = props.group, groupClassName = groupName ? `t_group_${props.group}` : "";
     if (groupName) {
-      const groupContextState = componentContext.groups.state;
-      const og = setStateShallow;
+      const groupContextState = componentContext.groups.state, og = setStateShallow;
       setStateShallow = (state2) => {
-        og(state2);
-        componentContext.groups.emit(groupName, {
+        og(state2), componentContext.groups.emit(groupName, {
           pseudo: state2
         });
         const next = {
@@ -237,142 +123,81 @@ function createComponent(staticConfig) {
         groupContextState[groupName] = next;
       };
     }
-    if (process.env.NODE_ENV === "development" && time)
-      time`use-state`;
+    process.env.NODE_ENV === "development" && time && time`use-state`;
     let isAnimated = willBeAnimated;
-    if (willBeAnimated && !supportsCSSVars) {
-      if (!presence && isHydrated) {
-        if (import_constants.isServer || state.unmounted === true) {
-          isAnimated = false;
-        }
-      }
-    }
-    if (willBeAnimated && !stateRef.current.hasAnimated) {
-      stateRef.current.hasAnimated = true;
-    }
-    const componentClassName = props.asChild ? "" : props.componentName ? `is_${props.componentName}` : defaultComponentClassName;
-    const hasTextAncestor = !!(import_constants.isWeb && isText ? componentContext.inText : false);
-    const isDisabled = props.disabled ?? ((_d = props.accessibilityState) == null ? void 0 : _d.disabled);
-    if (process.env.NODE_ENV === "development" && time)
-      time`use-context`;
-    const isTaggable = !Component || typeof Component === "string";
-    const element = import_constants.isWeb ? isTaggable ? props.tag || Component : Component : Component;
-    const BaseTextComponent = BaseText || element || "span";
-    const BaseViewComponent = BaseView || element || (hasTextAncestor ? "span" : "div");
-    AnimatedText = animationsConfig ? animationsConfig.Text : BaseTextComponent;
-    AnimatedView = animationsConfig ? animationsConfig.View : BaseViewComponent;
+    willBeAnimated && !supportsCSSVars && !presence && isHydrated && (import_constants.isServer || state.unmounted === !0) && (isAnimated = !1), willBeAnimated && !stateRef.current.hasAnimated && (stateRef.current.hasAnimated = !0);
+    const componentClassName = props.asChild ? "" : props.componentName ? `is_${props.componentName}` : defaultComponentClassName, hasTextAncestor = !!(import_constants.isWeb && isText && componentContext.inText), isDisabled = props.disabled ?? props.accessibilityState?.disabled;
+    process.env.NODE_ENV === "development" && time && time`use-context`;
+    const element = import_constants.isWeb && (!Component || typeof Component == "string") && props.tag || Component, BaseTextComponent = BaseText || element || "span", BaseViewComponent = BaseView || element || (hasTextAncestor ? "span" : "div");
+    AnimatedText = animationsConfig ? animationsConfig.Text : BaseTextComponent, AnimatedView = animationsConfig ? animationsConfig.View : BaseViewComponent;
     let elementType = isText ? (isAnimated ? AnimatedText : null) || BaseTextComponent : (isAnimated ? AnimatedView : null) || BaseViewComponent;
     if (isAnimated && presence) {
       const presenceState = presence[2];
       if (presenceState) {
-        const isEntering = state.unmounted;
-        const isExiting2 = !presenceState.isPresent;
-        const enterExitVariant = presenceState.enterExitVariant;
-        const enterVariant = enterExitVariant ?? presenceState.enterVariant;
-        const exitVariant = enterExitVariant ?? presenceState.exitVariant;
-        if (isEntering && enterVariant) {
-          if (process.env.NODE_ENV === "development" && debugProp === "verbose") {
-            console.warn(`Animating presence ENTER "${enterVariant}"`);
-          }
-          props[enterVariant] = true;
-        } else if (isExiting2 && exitVariant) {
-          if (process.env.NODE_ENV === "development" && debugProp === "verbose") {
-            console.warn(`Animating presence EXIT "${enterVariant}"`);
-          }
-          props[exitVariant] = enterExitVariant ? false : true;
-        }
+        const isEntering = state.unmounted, isExiting2 = !presenceState.isPresent, enterExitVariant = presenceState.enterExitVariant, enterVariant = enterExitVariant ?? presenceState.enterVariant, exitVariant = enterExitVariant ?? presenceState.exitVariant;
+        isEntering && enterVariant ? (process.env.NODE_ENV === "development" && debugProp === "verbose" && console.warn(`Animating presence ENTER "${enterVariant}"`), props[enterVariant] = !0) : isExiting2 && exitVariant && (process.env.NODE_ENV === "development" && debugProp === "verbose" && console.warn(`Animating presence EXIT "${enterVariant}"`), props[exitVariant] = !enterExitVariant);
       }
     }
-    const isAnimatedReactNative = isAnimated && (animationsConfig == null ? void 0 : animationsConfig.isReactNative);
-    const isReactNative = Boolean(staticConfig.isReactNative || isAnimatedReactNative);
-    const shouldAvoidClasses = Boolean(
-      !import_constants.isWeb || isAnimated || !staticConfig.acceptsClassName || propsIn.disableClassName
-    );
-    const shouldForcePseudo = !!propsIn.forceStyle;
-    const noClassNames = shouldAvoidClasses || shouldForcePseudo;
-    const disableThemeProp = props["data-disable-theme"];
-    const disableTheme = disableThemeProp && !willBeAnimated || isHOC;
-    if (process.env.NODE_ENV === "development" && time)
-      time`theme-props`;
-    if (props.themeShallow) {
-      stateRef.current.themeShallow = true;
-    }
+    const isAnimatedReactNative = isAnimated && animationsConfig?.isReactNative, isReactNative = !!(staticConfig.isReactNative || isAnimatedReactNative), shouldAvoidClasses = !!(!import_constants.isWeb || isAnimated || !staticConfig.acceptsClassName || propsIn.disableClassName), shouldForcePseudo = !!propsIn.forceStyle, noClassNames = shouldAvoidClasses || shouldForcePseudo, disableThemeProp = props["data-disable-theme"], disableTheme = disableThemeProp && !willBeAnimated || isHOC;
+    process.env.NODE_ENV === "development" && time && time`theme-props`, props.themeShallow && (stateRef.current.themeShallow = !0);
     const themeStateProps = {
       name: props.theme,
       componentName,
       // @ts-ignore this is internal use only
       disable: disableTheme,
       shallow: stateRef.current.themeShallow,
-      shouldUpdate: () => {
-        return stateRef.current.isListeningToTheme;
-      },
+      shouldUpdate: () => stateRef.current.isListeningToTheme,
       debug: debugProp
-    };
-    const isExiting = Boolean(!state.unmounted && (presence == null ? void 0 : presence[0]) === false);
+    }, isExiting = !state.unmounted && presence?.[0] === !1;
     if (process.env.NODE_ENV === "development") {
       const id = (0, import_react.useId)();
       if (debugProp && debugProp !== "profile") {
-        const name = `${componentName || (Component == null ? void 0 : Component.displayName) || (Component == null ? void 0 : Component.name) || "[Unnamed Component]"}`;
-        const type = isAnimatedReactNative ? "(animated)" : isReactNative ? "(rnw)" : "";
-        const dataIs = propsIn["data-is"] || "";
-        const banner = `${name}${dataIs ? ` ${dataIs}` : ""} ${type} id ${id}`;
+        const name = `${componentName || Component?.displayName || Component?.name || "[Unnamed Component]"}`, type = isAnimatedReactNative ? "(animated)" : isReactNative ? "(rnw)" : "", dataIs = propsIn["data-is"] || "", banner = `${name}${dataIs ? ` ${dataIs}` : ""} ${type} id ${id}`;
         console.group(
           `%c ${banner} (unmounted: ${state.unmounted})${presence ? ` (presence: ${presence[0]})` : ""} ${isHydrated ? "\u{1F4A6}" : "\u{1F3DC}\uFE0F"}`,
           "background: green; color: white;"
-        );
-        if (!import_constants.isServer) {
-          console.groupCollapsed(
-            `Info (collapsed): ${state.press || state.pressIn ? "PRESSED " : ""}${state.hover ? "HOVERED " : ""}${state.focus ? "FOCUSED" : " "}`
-          );
-          console.log({
-            propsIn,
-            props,
-            state,
-            staticConfig,
-            elementType,
-            themeStateProps,
-            styledContext: { contextProps: styledContextProps, overriddenContextProps },
-            presence,
-            isAnimated,
-            isHOC,
-            hasAnimationProp,
-            useAnimations,
-            propsInOrder: Object.keys(propsIn),
-            propsOrder: Object.keys(props)
-          });
-          console.groupEnd();
-        }
+        ), import_constants.isServer || (console.groupCollapsed(
+          `Info (collapsed): ${state.press || state.pressIn ? "PRESSED " : ""}${state.hover ? "HOVERED " : ""}${state.focus ? "FOCUSED" : " "}`
+        ), console.log({
+          propsIn,
+          props,
+          state,
+          staticConfig,
+          elementType,
+          themeStateProps,
+          styledContext: { contextProps: styledContextProps, overriddenContextProps },
+          presence,
+          isAnimated,
+          isHOC,
+          hasAnimationProp,
+          useAnimations,
+          propsInOrder: Object.keys(propsIn),
+          propsOrder: Object.keys(props)
+        }), console.groupEnd());
       }
     }
-    if (process.env.NODE_ENV === "development" && time)
-      time`pre-theme-media`;
+    process.env.NODE_ENV === "development" && time && time`pre-theme-media`;
     const [themeState, theme] = (0, import_useTheme.useThemeWithState)(themeStateProps);
     elementType = Component || elementType;
-    const isStringElement = typeof elementType === "string";
-    if (process.env.NODE_ENV === "development" && time)
-      time`theme`;
+    const isStringElement = typeof elementType == "string";
+    process.env.NODE_ENV === "development" && time && time`theme`;
     const mediaState = (0, import_useMedia.useMedia)(
       // @ts-ignore, we just pass a stable object so we can get it later with
       // should match to the one used in `setMediaShouldUpdate` below
       stateRef
     );
-    if (process.env.NODE_ENV === "development" && time)
-      time`media`;
-    (0, import_createVariable.setDidGetVariableValue)(false);
+    process.env.NODE_ENV === "development" && time && time`media`, (0, import_createVariable.setDidGetVariableValue)(!1);
     const resolveVariablesAs = (
       // if HOC + mounted + has animation prop, resolve as value so it passes non-variable to child
-      isAnimated && !supportsCSSVars || isHOC && state.unmounted == false && hasAnimationProp ? "value" : "auto"
-    );
-    const keepStyleSSR = willBeAnimated && (animationsConfig == null ? void 0 : animationsConfig.keepStyleSSR);
-    const styleProps = {
+      isAnimated && !supportsCSSVars || isHOC && state.unmounted == !1 && hasAnimationProp ? "value" : "auto"
+    ), keepStyleSSR = willBeAnimated && animationsConfig?.keepStyleSSR, styleProps = {
       mediaState,
       noClassNames,
       resolveVariablesAs,
       isExiting,
       isAnimated,
       keepStyleSSR
-    };
-    const splitStyles = (0, import_getSplitStyles.useSplitStyles)(
+    }, splitStyles = (0, import_getSplitStyles.useSplitStyles)(
       props,
       staticConfig,
       theme,
@@ -384,49 +209,22 @@ function createComponent(staticConfig) {
       elementType,
       debugProp
     );
-    if (props.group && props.untilMeasured === "hide" && !stateRef.current.hasMeasured) {
-      splitStyles.style.opacity = 0;
-    }
-    if (process.env.NODE_ENV === "development" && time)
-      time`split-styles`;
-    stateRef.current.isListeningToTheme = splitStyles.dynamicThemeAccess;
-    const isMediaArray = splitStyles.hasMedia && Array.isArray(splitStyles.hasMedia);
-    const shouldListenForMedia = (0, import_createVariable.didGetVariableValue)() || isMediaArray || noClassNames && splitStyles.hasMedia === true;
-    const mediaListeningKeys = isMediaArray ? splitStyles.hasMedia : null;
+    props.group && props.untilMeasured === "hide" && !stateRef.current.hasMeasured && (splitStyles.style.opacity = 0), process.env.NODE_ENV === "development" && time && time`split-styles`, stateRef.current.isListeningToTheme = splitStyles.dynamicThemeAccess;
+    const 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,
       keys: mediaListeningKeys
     });
     const isAnimatedReactNativeWeb = isAnimated && isReactNative;
-    if (process.env.NODE_ENV === "development") {
-      if (!process.env.TAMAGUI_TARGET) {
-        console.error(
-          `No process.env.TAMAGUI_TARGET set, please set it to "native" or "web".`
-        );
-      }
-      if (debugProp && debugProp !== "profile") {
-        console.groupCollapsed(">>>");
-        console.log("props in", propsIn, "mapped to", props, "in order", Object.keys(props));
-        console.log("splitStyles", splitStyles);
-        console.log("media", { shouldListenForMedia, isMediaArray, mediaListeningKeys });
-        console.log("className", Object.values(splitStyles.classNames));
-        if (import_constants.isClient) {
-          console.log("ref", hostRef, "(click to view)");
-        }
-        console.groupEnd();
-        if (debugProp === "break") {
-          debugger;
-        }
-      }
-    }
+    if (process.env.NODE_ENV === "development" && debugProp && debugProp !== "profile" && (console.groupCollapsed(">>>"), console.log("props in", propsIn, "mapped to", props, "in order", Object.keys(props)), console.log("splitStyles", splitStyles), console.log("media", { shouldListenForMedia, isMediaArray, mediaListeningKeys }), console.log("className", Object.values(splitStyles.classNames)), import_constants.isClient && console.log("ref", hostRef, "(click to view)"), console.groupEnd(), debugProp === "break"))
+      debugger;
     const {
       viewProps: viewPropsIn,
       pseudos,
       style: splitStylesStyle,
       classNames,
       space
-    } = splitStyles;
-    const propsWithAnimation = props;
+    } = splitStyles, propsWithAnimation = props;
     let animationStyles;
     if (willBeAnimated && useAnimations && !isHOC) {
       const animations = useAnimations({
@@ -442,11 +240,7 @@ function createComponent(staticConfig) {
         hostRef,
         staticConfig
       });
-      if (isAnimated && animations) {
-        animationStyles = animations.style;
-      }
-      if (process.env.NODE_ENV === "development" && time)
-        time`animations`;
+      isAnimated && animations && (animationStyles = animations.style), process.env.NODE_ENV === "development" && time && time`animations`;
     }
     const {
       asChild,
@@ -474,67 +268,38 @@ function createComponent(staticConfig) {
       defaultVariants,
       ...nonTamaguiProps
     } = viewPropsIn;
-    if (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.
+    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}`
-      );
-    }
-    if (process.env.NODE_ENV === "development" && time)
-      time`destructure`;
-    const disabled = ((_e = props.accessibilityState) == null ? void 0 : _e.disabled) || // @ts-expect-error (comes from core)
+    ), process.env.NODE_ENV === "development" && time && time`destructure`;
+    const disabled = props.accessibilityState?.disabled || // @ts-expect-error (comes from core)
     props.accessibilityDisabled;
     let viewProps = nonTamaguiProps;
-    if (isHOC && _themeProp) {
-      viewProps.theme = _themeProp;
-    }
-    if (groupName) {
-      nonTamaguiProps.onLayout = (0, import_helpers.composeEventHandlers)(
-        nonTamaguiProps.onLayout,
-        (e) => {
-          componentContext.groups.emit(groupName, {
-            layout: e.nativeEvent.layout
-          });
-          if (!stateRef.current.hasMeasured && props.untilMeasured === "hide") {
-            setState((prev) => ({ ...prev }));
-          }
-          stateRef.current.hasMeasured = true;
-        }
-      );
-    }
-    if (process.env.TAMAGUI_TARGET === "web" && !isReactNative && !willBeAnimated && !asChild) {
-      viewProps = (_g = (_f = import_setupHooks.hooks).usePropsTransform) == null ? void 0 : _g.call(_f, elementType, nonTamaguiProps, hostRef);
-    } else {
-      viewProps = nonTamaguiProps;
-    }
-    const composedRef = (0, import_compose_refs.useComposedRefs)(hostRef, forwardedRef);
-    viewProps.ref = composedRef;
-    if (process.env.NODE_ENV === "development") {
-      if (!isReactNative && !isText && import_constants.isWeb && !isHOC) {
-        import_react.Children.toArray(props.children).forEach((item) => {
-          if (typeof item === "string" && item !== "\n") {
-            console.error(
-              `Unexpected text node: ${item}. A text node cannot be a child of a <View>.`
-            );
-          }
-        });
+    isHOC && _themeProp && (viewProps.theme = _themeProp), groupName && (nonTamaguiProps.onLayout = (0, import_helpers.composeEventHandlers)(
+      nonTamaguiProps.onLayout,
+      (e) => {
+        componentContext.groups.emit(groupName, {
+          layout: e.nativeEvent.layout
+        }), !stateRef.current.hasMeasured && props.untilMeasured === "hide" && setState((prev) => ({ ...prev })), stateRef.current.hasMeasured = !0;
       }
-    }
-    if (process.env.NODE_ENV === "development" && time)
-      time`events-hooks`;
+    )), !isReactNative && !willBeAnimated && !asChild ? viewProps = import_setupHooks.hooks.usePropsTransform?.(elementType, nonTamaguiProps, hostRef) : viewProps = nonTamaguiProps;
+    const composedRef = (0, import_compose_refs.useComposedRefs)(hostRef, forwardedRef);
+    viewProps.ref = composedRef, process.env.NODE_ENV === "development" && !isReactNative && !isText && import_constants.isWeb && !isHOC && import_react.Children.toArray(props.children).forEach((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`;
     let unPress = () => setStateShallow({
-      press: false,
-      pressIn: false
+      press: !1,
+      pressIn: !1
     });
-    if (process.env.TAMAGUI_TARGET === "web") {
-      unPress = (0, import_react.useCallback)(unPress, []);
-    }
-    const shouldSetMounted = needsMount && state.unmounted;
-    const { pseudoGroups, mediaGroups } = splitStyles;
+    unPress = (0, import_react.useCallback)(unPress, []);
+    const shouldSetMounted = needsMount && state.unmounted, { pseudoGroups, mediaGroups } = splitStyles;
     (0, import_react.useEffect)(() => {
       if (shouldSetMounted) {
-        const unmounted = state.unmounted === true && hasEnterStyle ? "should-enter" : false;
+        const unmounted = state.unmounted === !0 && hasEnterStyle ? "should-enter" : !1;
         setStateShallow({
           unmounted
         });
@@ -548,16 +313,11 @@ If you meant to do this, you can disable this warning - either change untilMeasu
         };
         disposeGroupsListener = componentContext.groups.subscribe(
           (name, { layout, pseudo }) => {
-            if (pseudo && (pseudoGroups == null ? void 0 : pseudoGroups.has(name))) {
-              Object.assign(current.pseudo, pseudo);
-              persist();
-            } else if (layout && mediaGroups) {
-              const mediaState2 = getMediaState(mediaGroups, layout);
-              const next = (0, import_createShallowSetState.mergeIfNotShallowEqual)(current.media, mediaState2);
-              if (next !== current.media) {
-                Object.assign(current.media, next);
-                persist();
-              }
+            if (pseudo && pseudoGroups?.has(name))
+              Object.assign(current.pseudo, pseudo), persist();
+            else if (layout && mediaGroups) {
+              const mediaState2 = getMediaState(mediaGroups, layout), next = (0, import_createShallowSetState.mergeIfNotShallowEqual)(current.media, mediaState2);
+              next !== current.media && (Object.assign(current.media, next), persist());
             }
             function persist() {
               setStateShallow({
@@ -572,8 +332,7 @@ If you meant to do this, you can disable this warning - either change untilMeasu
         );
       }
       return () => {
-        disposeGroupsListener == null ? void 0 : disposeGroupsListener();
-        mouseUps.delete(unPress);
+        disposeGroupsListener?.(), mouseUps.delete(unPress);
       };
     }, [
       shouldSetMounted,
@@ -581,137 +340,57 @@ If you meant to do this, you can disable this warning - either change untilMeasu
       pseudoGroups ? Object.keys([...pseudoGroups]).join("") : 0,
       mediaGroups ? Object.keys([...mediaGroups]).join("") : 0
     ]);
-    const avoidAnimationStyle = keepStyleSSR && state.unmounted === true;
-    let fontFamily = isText ? splitStyles.fontFamily || ((_h = staticConfig.defaultProps) == null ? void 0 : _h.fontFamily) : null;
-    if (fontFamily && fontFamily[0] === "$") {
-      fontFamily = fontFamily.slice(1);
-    }
-    const fontFamilyClassName = fontFamily ? `font_${fontFamily}` : "";
-    const style = avoidAnimationStyle ? splitStyles.style : animationStyles || splitStyles.style;
+    const avoidAnimationStyle = keepStyleSSR && state.unmounted === !0;
+    let fontFamily = isText ? splitStyles.fontFamily || staticConfig.defaultProps?.fontFamily : null;
+    fontFamily && fontFamily[0] === "$" && (fontFamily = fontFamily.slice(1));
+    const fontFamilyClassName = fontFamily ? `font_${fontFamily}` : "", style = avoidAnimationStyle ? splitStyles.style : animationStyles || splitStyles.style;
     let className;
-    if (process.env.TAMAGUI_TARGET === "web") {
-      const classList = [
-        componentName ? componentClassName : "",
-        fontFamilyClassName,
-        classNames ? Object.values(classNames).join(" ") : "",
-        groupClassName
-      ];
-      className = classList.join(" ");
-      if (isAnimatedReactNativeWeb && !avoidAnimationStyle) {
-        viewProps.style = style;
-      } else if (isReactNative) {
-        const cnStyles = { $$css: true };
-        for (const name of className.split(" ")) {
-          cnStyles[name] = name;
-        }
-        viewProps.style = [...Array.isArray(style) ? style : [style], cnStyles];
-      } else {
-        viewProps.className = className;
-        viewProps.style = style;
-      }
-      if (isReactNative) {
-        if (process.env.NODE_ENV === "development") {
-          Object.keys(viewProps).forEach((key) => {
-            if (key.startsWith("data-")) {
-              viewProps.dataSet ?? (viewProps.dataSet = {});
-              viewProps.dataSet[key.replace("data-", "")] = viewProps[key];
-              delete viewProps[key];
-            }
-          });
-        }
-      }
-    } else {
+    if (className = [
+      componentName ? componentClassName : "",
+      fontFamilyClassName,
+      classNames ? Object.values(classNames).join(" ") : "",
+      groupClassName
+    ].join(" "), isAnimatedReactNativeWeb && !avoidAnimationStyle)
       viewProps.style = style;
-    }
-    const runtimePressStyle = !disabled && noClassNames && (pseudos == null ? void 0 : pseudos.pressStyle);
-    const attachPress = Boolean(
-      groupName || runtimePressStyle || onPress || onPressOut || onPressIn || onLongPress || onClick
-    );
-    const runtimeHoverStyle = !disabled && noClassNames && (pseudos == null ? void 0 : pseudos.hoverStyle);
-    const isHoverable = import_constants.isWeb && !!(groupName || runtimeHoverStyle || onHoverIn || onHoverOut || onMouseEnter || onMouseLeave);
-    const handlesPressEvents = !(import_constants.isWeb || asChild);
-    const shouldAttach = Boolean(
-      attachPress || isHoverable || noClassNames && "pressStyle" in props || import_constants.isWeb && noClassNames && "hoverStyle" in props
-    );
-    if (process.env.NODE_ENV === "development" && time)
-      time`events-setup`;
+    else if (isReactNative) {
+      const cnStyles = { $$css: !0 };
+      for (const name of className.split(" "))
+        cnStyles[name] = name;
+      viewProps.style = [...Array.isArray(style) ? style : [style], cnStyles];
+    } else
+      viewProps.className = className, viewProps.style = style;
+    isReactNative && process.env.NODE_ENV === "development" && Object.keys(viewProps).forEach((key) => {
+      key.startsWith("data-") && (viewProps.dataSet ??= {}, viewProps.dataSet[key.replace("data-", "")] = viewProps[key], delete viewProps[key]);
+    });
+    const runtimePressStyle = !disabled && noClassNames && pseudos?.pressStyle, attachPress = !!(groupName || runtimePressStyle || onPress || onPressOut || onPressIn || onLongPress || onClick), runtimeHoverStyle = !disabled && noClassNames && pseudos?.hoverStyle, isHoverable = import_constants.isWeb && !!(groupName || runtimeHoverStyle || onHoverIn || onHoverOut || onMouseEnter || onMouseLeave), handlesPressEvents = !(import_constants.isWeb || asChild), shouldAttach = !!(attachPress || isHoverable || noClassNames && "pressStyle" in props || import_constants.isWeb && noClassNames && "hoverStyle" in props);
+    process.env.NODE_ENV === "development" && time && time`events-setup`;
     const events = shouldAttach && !isDisabled && !asChild ? {
       onPressOut: attachPress ? (e) => {
-        unPress();
-        onPressOut == null ? void 0 : onPressOut(e);
-        onMouseUp == null ? void 0 : onMouseUp(e);
+        unPress(), onPressOut?.(e), onMouseUp?.(e);
       } : void 0,
       ...(isHoverable || attachPress) && {
         onMouseEnter: (e) => {
           const next = {};
-          next.hover = true;
-          if (state.pressIn) {
-            next.press = true;
-          }
-          setStateShallow(next);
-          onHoverIn == null ? void 0 : onHoverIn(e);
-          onMouseEnter == null ? void 0 : onMouseEnter(e);
+          next.hover = !0, state.pressIn && (next.press = !0), setStateShallow(next), onHoverIn?.(e), onMouseEnter?.(e);
         },
         onMouseLeave: (e) => {
           const next = {};
-          mouseUps.add(unPress);
-          next.hover = false;
-          if (state.pressIn) {
-            next.press = false;
-            next.pressIn = false;
-          }
-          setStateShallow(next);
-          onHoverOut == null ? void 0 : onHoverOut(e);
-          onMouseLeave == null ? void 0 : onMouseLeave(e);
+          mouseUps.add(unPress), next.hover = !1, state.pressIn && (next.press = !1, next.pressIn = !1), setStateShallow(next), onHoverOut?.(e), onMouseLeave?.(e);
         }
       },
       onPressIn: attachPress ? (e) => {
         setStateShallow({
-          press: true,
-          pressIn: true
-        });
-        onPressIn == null ? void 0 : onPressIn(e);
-        onMouseDown == null ? void 0 : onMouseDown(e);
-        if (import_constants.isWeb) {
-          mouseUps.add(unPress);
-        }
+          press: !0,
+          pressIn: !0
+        }), onPressIn?.(e), onMouseDown?.(e), import_constants.isWeb && mouseUps.add(unPress);
       } : void 0,
       onPress: attachPress ? (e) => {
-        unPress();
-        import_constants.isWeb && (onClick == null ? void 0 : onClick(e));
-        onPress == null ? void 0 : onPress(e);
-        if (process.env.TAMAGUI_TARGET === "web") {
-          onLongPress == null ? void 0 : onLongPress(e);
-        }
-      } : void 0,
-      ...process.env.TAMAGUI_TARGET === "native" && {
-        onLongPress: attachPress && onLongPress ? (e) => {
-          unPress();
-          onLongPress == null ? void 0 : onLongPress(e);
-        } : void 0
-      }
+        unPress(), import_constants.isWeb && onClick?.(e), onPress?.(e), onLongPress?.(e);
+      } : void 0
     } : null;
-    if (process.env.TAMAGUI_TARGET === "native" && events) {
-      Object.assign(events, {
-        cancelable: !viewProps.rejectResponderTermination,
-        disabled: isDisabled,
-        hitSlop: viewProps.hitSlop,
-        delayLongPress: viewProps.delayLongPress,
-        delayPressIn: viewProps.delayPressIn,
-        delayPressOut: viewProps.delayPressOut,
-        focusable: viewProps.focusable ?? true,
-        minPressDuration: 0
-      });
-    }
-    if (process.env.NODE_ENV === "development" && time)
-      time`events`;
-    if (process.env.NODE_ENV === "development" && debugProp === "verbose") {
-      console.log(`events`, { events, isHoverable, attachPress });
-    }
-    (_j = (_i = import_setupHooks.hooks).useEvents) == null ? void 0 : _j.call(_i, viewProps, events, splitStyles, setStateShallow);
+    process.env.NODE_ENV === "development" && time && time`events`, process.env.NODE_ENV === "development" && debugProp === "verbose" && console.log("events", { events, isHoverable, attachPress }), import_setupHooks.hooks.useEvents?.(viewProps, events, splitStyles, setStateShallow);
     const direction = props.spaceDirection || "both";
-    if (process.env.NODE_ENV === "development" && time)
-      time`hooks`;
+    process.env.NODE_ENV === "development" && time && time`hooks`;
     let content = !children || asChild ? children : spacedChildren({
       separator,
       children,
@@ -720,202 +399,137 @@ If you meant to do this, you can disable this warning - either change untilMeasu
       isZStack,
       debug: debugProp
     });
-    if (asChild) {
-      elementType = import_Slot.Slot;
-      Object.assign(viewProps, {
-        onPress,
-        onLongPress,
-        onPressIn,
-        onPressOut
-      });
-    }
-    if (process.env.NODE_ENV === "development" && time)
-      time`spaced-as-child`;
-    if (
-      // in test mode disable perf unwrapping so react-testing-library finds Text properly
-      process.env.NODE_ENV !== "test" && process.env.TAMAGUI_TARGET === "native" && (elementType === BaseText || elementType === BaseView)
-    ) {
-      viewProps.children = content;
-      content = elementType.render(viewProps, viewProps.ref);
-    } else {
-      content = (0, import_react.createElement)(elementType, viewProps, content);
-    }
-    if (process.env.NODE_ENV === "development" && time)
-      time`create-element`;
+    asChild && (elementType = import_Slot.Slot, Object.assign(viewProps, {
+      onPress,
+      onLongPress,
+      onPressIn,
+      onPressOut
+    })), process.env.NODE_ENV === "development" && time && time`spaced-as-child`, // in test mode disable perf unwrapping so react-testing-library finds Text properly
+    process.env.NODE_ENV, content = (0, import_react.createElement)(elementType, viewProps, content), process.env.NODE_ENV === "development" && time && time`create-element`;
     const subGroupContext = (0, import_react.useMemo)(() => {
-      if (!groupName)
-        return;
-      return {
-        ...componentContext.groups,
-        // change reference so as we mutate it doesn't affect siblings etc
-        state: {
-          ...componentContext.groups.state,
-          [groupName]: {
-            pseudo: initialState,
-            // capture just initial width and height if they exist
-            // will have top, left, width, height (not x, y)
-            layout: {
-              width: fromPx(splitStyles.style.width),
-              height: fromPx(splitStyles.style.height)
+      if (groupName)
+        return {
+          ...componentContext.groups,
+          // change reference so as we mutate it doesn't affect siblings etc
+          state: {
+            ...componentContext.groups.state,
+            [groupName]: {
+              pseudo: initialState,
+              // capture just initial width and height if they exist
+              // will have top, left, width, height (not x, y)
+              layout: {
+                width: fromPx(splitStyles.style.width),
+                height: fromPx(splitStyles.style.height)
+              }
             }
           }
-        }
-      };
+        };
     }, [groupName]);
-    if (groupName && subGroupContext) {
-      content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ComponentContext.ComponentContext.Provider, { groups: subGroupContext, children: content });
-    }
-    if (process.env.NODE_ENV === "development" && time)
-      time`group-context`;
-    content = disableThemeProp ? content : (0, import_Theme.useThemedChildren)(themeState, content, themeStateProps);
-    if (process.env.NODE_ENV === "development" && time)
-      time`themed-children`;
-    if (process.env.NODE_ENV === "development" && props["debug"] === "visualize") {
-      content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ThemeDebug.ThemeDebug, { themeState, themeProps: props, children: content });
-    }
-    if (process.env.TAMAGUI_TARGET === "web") {
-      if (events || isAnimatedReactNativeWeb) {
-        content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "span",
-          {
-            className: `${isAnimatedReactNativeWeb ? className : ""} _dsp_contents`,
-            ...events && {
-              onMouseEnter: events.onMouseEnter,
-              onMouseLeave: events.onMouseLeave,
-              onClick: events.onPress,
-              onMouseDown: events.onPressIn,
-              onMouseUp: events.onPressOut,
-              onTouchStart: events.onPressIn,
-              onTouchEnd: events.onPressOut
-            },
-            children: content
-          }
-        );
+    if (groupName && subGroupContext && (content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ComponentContext.ComponentContext.Provider, { groups: subGroupContext, children: content })), process.env.NODE_ENV === "development" && time && time`group-context`, content = disableThemeProp ? content : (0, import_Theme.useThemedChildren)(themeState, content, themeStateProps), process.env.NODE_ENV === "development" && time && time`themed-children`, process.env.NODE_ENV === "development" && props.debug === "visualize" && (content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ThemeDebug.ThemeDebug, { themeState, themeProps: props, children: content })), (events || isAnimatedReactNativeWeb) && (content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "span",
+      {
+        className: `${isAnimatedReactNativeWeb ? className : ""} _dsp_contents`,
+        ...events && {
+          onMouseEnter: events.onMouseEnter,
+          onMouseLeave: events.onMouseLeave,
+          onClick: events.onPress,
+          onMouseDown: events.onPressIn,
+          onMouseUp: events.onPressOut,
+          onTouchStart: events.onPressIn,
+          onTouchEnd: events.onPressOut
+        },
+        children: content
       }
-    }
-    if (overriddenContextProps) {
+    )), overriddenContextProps) {
       const Provider = staticConfig.context.Provider;
       content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Provider, { ...contextValue, ...overriddenContextProps, children: content });
     }
-    if (process.env.NODE_ENV === "development") {
-      if (debugProp && debugProp !== "profile") {
-        const element2 = typeof elementType === "string" ? elementType : "Component";
-        console.groupCollapsed(`render <${element2} /> with props`);
-        try {
-          console.log("viewProps", viewProps);
-          console.log("viewPropsOrder", Object.keys(viewProps));
-          for (const key in viewProps) {
-            console.log(" - ", key, viewProps[key]);
-          }
-          console.log("children", content);
-          if (typeof window !== "undefined") {
-            console.log({
-              viewProps,
-              state,
-              styleProps,
-              themeState,
-              isAnimated,
-              isAnimatedReactNativeWeb,
-              defaultProps,
-              splitStyles,
-              animationStyles,
-              handlesPressEvents,
-              willBeAnimated,
-              isStringElement,
-              classNamesIn: (_k = props.className) == null ? void 0 : _k.split(" "),
-              classNamesOut: (_l = viewProps.className) == null ? void 0 : _l.split(" "),
-              events,
-              shouldAttach,
-              pseudos,
-              content,
-              shouldAvoidClasses,
-              animation: props.animation,
-              splitStylesStyle,
-              staticConfig,
-              tamaguiConfig,
-              shouldForcePseudo,
-              elementType,
-              initialState,
-              classNames
-            });
-          }
-        } catch {
-        }
-        console.groupEnd();
-        console.groupEnd();
-      }
-    }
-    if (process.env.NODE_ENV === "development" && time) {
-      time`rest`;
-      if (!globalThis["willPrint"]) {
-        globalThis["willPrint"] = true;
-        setTimeout(() => {
-          delete globalThis["willPrint"];
-          time.print();
-          time = null;
-        }, 50);
+    if (process.env.NODE_ENV === "development" && debugProp && debugProp !== "profile") {
+      console.groupCollapsed(`render <${typeof elementType == "string" ? elementType : "Component"} /> with props`);
+      try {
+        console.log("viewProps", viewProps), console.log("viewPropsOrder", Object.keys(viewProps));
+        for (const key in viewProps)
+          console.log(" - ", key, viewProps[key]);
+        console.log("children", content), typeof window < "u" && console.log({
+          viewProps,
+          state,
+          styleProps,
+          themeState,
+          isAnimated,
+          isAnimatedReactNativeWeb,
+          defaultProps,
+          splitStyles,
+          animationStyles,
+          handlesPressEvents,
+          willBeAnimated,
+          isStringElement,
+          classNamesIn: props.className?.split(" "),
+          classNamesOut: viewProps.className?.split(" "),
+          events,
+          shouldAttach,
+          pseudos,
+          content,
+          shouldAvoidClasses,
+          animation: props.animation,
+          splitStylesStyle,
+          staticConfig,
+          tamaguiConfig,
+          shouldForcePseudo,
+          elementType,
+          initialState,
+          classNames
+        });
+      } catch {
       }
+      console.groupEnd(), console.groupEnd();
     }
-    return content;
+    return process.env.NODE_ENV === "development" && time && (time`rest`, globalThis.willPrint || (globalThis.willPrint = !0, setTimeout(() => {
+      delete globalThis.willPrint, time.print(), time = null;
+    }, 50))), content;
   });
-  if (staticConfig.componentName) {
-    component.displayName = staticConfig.componentName;
-  }
+  staticConfig.componentName && (component.displayName = staticConfig.componentName);
   let res = component;
-  if (process.env.TAMAGUI_MEMO_ALL || staticConfig.memo) {
-    res = (0, import_react.memo)(res);
-  }
-  res.staticConfig = staticConfig;
+  (process.env.TAMAGUI_MEMO_ALL || staticConfig.memo) && (res = (0, import_react.memo)(res)), res.staticConfig = staticConfig;
   function extendStyledConfig(extended) {
     return {
       ...staticConfig,
       ...extended,
-      neverFlatten: true,
-      isHOC: true
+      neverFlatten: !0,
+      isHOC: !0
     };
   }
   function extractable(Component2, extended) {
-    Component2.staticConfig = extendStyledConfig(extended);
-    Component2.styleable = styleable;
-    return Component2;
+    return Component2.staticConfig = extendStyledConfig(extended), Component2.styleable = styleable, Component2;
   }
   function styleable(Component2, extended) {
-    var _a2;
-    const isForwardedRefAlready = ((_a2 = Component2.render) == null ? void 0 : _a2.length) === 2;
-    const ComponentForwardedRef = isForwardedRefAlready ? Component2 : (
+    const ComponentForwardedRef = Component2.render?.length === 2 ? Component2 : (
       // memo because theme changes otherwise would always re-render
       (0, import_react.memo)((0, import_react.forwardRef)(Component2))
-    );
-    const extendedConfig = extendStyledConfig(extended);
-    const out = (0, import_themeable.themeable)(ComponentForwardedRef, extendedConfig);
-    out.staticConfig = extendedConfig;
-    out.styleable = styleable;
-    return out;
+    ), extendedConfig = extendStyledConfig(extended), out = (0, import_themeable.themeable)(ComponentForwardedRef, extendedConfig);
+    return out.staticConfig = extendedConfig, out.styleable = styleable, out;
   }
-  res.extractable = extractable;
-  res.styleable = styleable;
-  return res;
+  return res.extractable = extractable, res.styleable = styleable, res;
 }
 function Unspaced(props) {
   return props.children;
 }
-Unspaced["isUnspaced"] = true;
+Unspaced.isUnspaced = !0;
 const Spacer = createComponent({
-  acceptsClassName: true,
-  memo: true,
+  acceptsClassName: !0,
+  memo: !0,
   componentName: "Spacer",
   validStyles: import_helpers.validStyles,
   defaultProps: {
     ...import_constants2.stackDefaultStyles,
     // avoid nesting issues
     tag: "span",
-    size: true,
+    size: !0,
     pointerEvents: "none"
   },
   variants: {
     size: {
       "...size": (size, { tokens }) => {
-        size = size === true ? "$true" : size;
+        size = size === !0 ? "$true" : size;
         const sizePx = tokens.space[size] ?? size;
         return {
           width: sizePx,
@@ -944,84 +558,51 @@ const Spacer = createComponent({
   }
 });
 function spacedChildren(props) {
-  var _a, _b, _c;
-  const { isZStack, children, space, direction, spaceFlex, separator } = props;
-  const hasSpace = !!(space || spaceFlex);
-  const hasSeparator = !(separator === void 0 || separator === null);
-  if (!(hasSpace || hasSeparator || isZStack)) {
+  const { isZStack, children, space, direction, spaceFlex, separator } = props, hasSpace = !!(space || spaceFlex), hasSeparator = separator != null;
+  if (!(hasSpace || hasSeparator || isZStack))
     return children;
-  }
   const childrenList = import_react.Children.toArray(children);
-  const len = childrenList.length;
-  if (len <= 1 && !isZStack && !((_b = (_a = childrenList[0]) == null ? void 0 : _a["type"]) == null ? void 0 : _b["shouldForwardSpace"])) {
+  if (childrenList.length <= 1 && !isZStack && !childrenList[0]?.type?.shouldForwardSpace)
     return childrenList;
-  }
   const final = [];
   for (let [index, child] of childrenList.entries()) {
-    const isEmpty = child === null || child === void 0 || Array.isArray(child) && child.length === 0;
-    if (!isEmpty && import_react.default.isValidElement(child) && ((_c = child.type) == null ? void 0 : _c["shouldForwardSpace"])) {
-      child = import_react.default.cloneElement(child, {
-        space,
-        spaceFlex,
-        separator,
-        key: child.key
-      });
-    }
-    if (isEmpty || !child || child["key"] && !isZStack) {
-      final.push(child);
-    } else {
-      final.push(
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Fragment, { children: isZStack ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AbsoluteFill, { children: child }) : child }, index)
-      );
-    }
-    if (isUnspaced(child) && index === 0)
-      continue;
-    if (isZStack)
+    const isEmpty = child == null || Array.isArray(child) && child.length === 0;
+    if (!isEmpty && import_react.default.isValidElement(child) && child.type?.shouldForwardSpace && (child = import_react.default.cloneElement(child, {
+      space,
+      spaceFlex,
+      separator,
+      key: child.key
+    })), isEmpty || !child || child.key && !isZStack ? final.push(child) : final.push(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Fragment, { children: isZStack ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AbsoluteFill, { children: child }) : child }, index)
+    ), isUnspaced(child) && index === 0 || isZStack)
       continue;
     const next = childrenList[index + 1];
-    if (next && !isUnspaced(next)) {
-      if (separator) {
-        if (hasSpace) {
-          final.push(
-            createSpacer({
-              key: `_${index}_00tmgui`,
-              direction,
-              space,
-              spaceFlex
-            })
-          );
-        }
-        final.push(
-          import_react.default.isValidElement(separator) ? import_react.default.cloneElement(separator, { key: `sep_${index}` }) : separator
-        );
-        if (hasSpace) {
-          final.push(
-            createSpacer({
-              key: `_${index}01tmgui`,
-              direction,
-              space,
-              spaceFlex
-            })
-          );
-        }
-      } else {
-        final.push(
-          createSpacer({
-            key: `_${index}02tmgui`,
-            direction,
-            space,
-            spaceFlex
-          })
-        );
-      }
-    }
-  }
-  if (process.env.NODE_ENV === "development") {
-    if (props.debug) {
-      console.log(`  Spaced children`, final, props);
-    }
+    next && !isUnspaced(next) && (separator ? (hasSpace && final.push(
+      createSpacer({
+        key: `_${index}_00tmgui`,
+        direction,
+        space,
+        spaceFlex
+      })
+    ), final.push(
+      import_react.default.isValidElement(separator) ? import_react.default.cloneElement(separator, { key: `sep_${index}` }) : separator
+    ), hasSpace && final.push(
+      createSpacer({
+        key: `_${index}01tmgui`,
+        direction,
+        space,
+        spaceFlex
+      })
+    )) : final.push(
+      createSpacer({
+        key: `_${index}02tmgui`,
+        direction,
+        space,
+        spaceFlex
+      })
+    ));
   }
-  return final;
+  return process.env.NODE_ENV === "development" && props.debug && console.log("  Spaced children", final, props), final;
 }
 function createSpacer({ key, direction, space, spaceFlex }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -1029,18 +610,17 @@ function createSpacer({ key, direction, space, spaceFlex }) {
     {
       size: space,
       direction,
-      ...typeof spaceFlex !== "undefined" && {
-        flex: spaceFlex === true ? 1 : spaceFlex === false ? 0 : spaceFlex
+      ...typeof spaceFlex < "u" && {
+        flex: spaceFlex === !0 ? 1 : spaceFlex === !1 ? 0 : spaceFlex
       }
     },
     key
   );
 }
 function isUnspaced(child) {
-  const t = child == null ? void 0 : child["type"];
-  return (t == null ? void 0 : t["isVisuallyHidden"]) || (t == null ? void 0 : t["isUnspaced"]);
+  const t = child?.type;
+  return t?.isVisuallyHidden || t?.isUnspaced;
 }
-const DefaultProps = /* @__PURE__ */ new Map();
 const AbsoluteFill = createComponent({
   defaultProps: {
     ...import_constants2.stackDefaultStyles,
@@ -1056,17 +636,15 @@ const AbsoluteFill = createComponent({
 function hasAnimatedStyleValue(style) {
   return Object.keys(style).some((k) => {
     const val = style[k];
-    return val && typeof val === "object" && "_animation" in val;
+    return val && typeof val == "object" && "_animation" in val;
   });
 }
 function getMediaState(mediaGroups, layout) {
   return Object.fromEntries(
-    [...mediaGroups].map((mediaKey) => {
-      return [mediaKey, (0, import_useMedia.mediaKeyMatch)(mediaKey, layout)];
-    })
+    [...mediaGroups].map((mediaKey) => [mediaKey, (0, import_useMedia.mediaKeyMatch)(mediaKey, layout)])
   );
 }
-const fromPx = (val) => typeof val !== "string" ? val : +val.replace("px", "");
+const fromPx = (val) => typeof val != "string" ? val : +val.replace("px", "");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Spacer,