@tamagui/web 1.88.1 → 1.88.3

package/dist/esm/createComponent.native.js

@@ -1,45 +1,36 @@
-import { composeRefs } from "@tamagui/compose-refs";
-import { isClient, isServer, isWeb } from "@tamagui/constants";
-import { composeEventHandlers, validStyles } from "@tamagui/helpers";
-import { useDidFinishSSR } from "@tamagui/use-did-finish-ssr";
-import React, {
-  Children,
-  Fragment,
-  createElement,
-  forwardRef,
-  memo,
-  useContext,
-  useEffect,
-  useId,
-  useMemo,
-  useRef,
-  useState
-} from "react";
-import { devConfig, getConfig, onConfiguredOnce } from "./config";
-import { stackDefaultStyles } from "./constants/constants";
-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 { themeable } from "./helpers/themeable";
-import { mediaKeyMatch, 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";
-import { jsx } from "react/jsx-runtime";
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf, __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __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))
+      !__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(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // 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: !0 }) : target,
+  mod
+)), __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
+var createComponent_exports = {};
+__export(createComponent_exports, {
+  Spacer: () => Spacer,
+  Unspaced: () => Unspaced,
+  createComponent: () => createComponent,
+  mouseUps: () => mouseUps,
+  spacedChildren: () => spacedChildren
+});
+module.exports = __toCommonJS(createComponent_exports);
+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_defaultComponentState = require("./defaultComponentState"), import_createShallowSetState = require("./helpers/createShallowSetState"), import_getSplitStyles = require("./helpers/getSplitStyles"), import_isObj = require("./helpers/isObj"), import_log = require("./helpers/log"), import_mergeProps = require("./helpers/mergeProps"), 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");
 let tamaguiConfig, time, debugKeyListeners, startVisualizer;
 const mouseUps = /* @__PURE__ */ new Set();
 if (typeof document < "u") {
@@ -47,7 +38,8 @@ if (typeof document < "u") {
     mouseUps.forEach((x) => x()), mouseUps.clear();
   };
   addEventListener("mouseup", cancelTouches), addEventListener("touchend", cancelTouches), addEventListener("touchcancel", cancelTouches), process.env.NODE_ENV === "development" && (startVisualizer = () => {
-    const devVisualizerConfig = devConfig?.visualizer;
+    var _a;
+    const devVisualizerConfig = (_a = import_config.devConfig) == null ? void 0 : _a.visualizer;
     if (devVisualizerConfig) {
       debugKeyListeners = /* @__PURE__ */ new Set();
       let tm, isShowing = !1;
@@ -60,21 +52,23 @@ if (typeof document < "u") {
         clearTimeout(tm);
       }), document.addEventListener("keydown", ({ key, defaultPrevented }) => {
         defaultPrevented || (clearTimeout(tm), key === options.key && (tm = setTimeout(() => {
-          isShowing = !0, debugKeyListeners?.forEach((l) => l(!0));
+          isShowing = !0, debugKeyListeners == null || debugKeyListeners.forEach((l) => l(!0));
         }, options.delay)));
       }), document.addEventListener("keyup", ({ key, defaultPrevented }) => {
-        defaultPrevented || key === options.key && (clearTimeout(tm), isShowing && debugKeyListeners?.forEach((l) => l(!1)));
+        defaultPrevented || key === options.key && (clearTimeout(tm), isShowing && (debugKeyListeners == null || debugKeyListeners.forEach((l) => l(!1))));
       });
     }
   });
 }
 let BaseText, BaseView, hasSetupBaseViews = !1;
 function createComponent(staticConfig) {
+  var _a;
   const { componentName } = staticConfig;
   let config = null, defaultProps = staticConfig.defaultProps;
-  onConfiguredOnce((conf) => {
+  (0, import_config.onConfiguredOnce)((conf) => {
+    var _a2;
     if (config = conf, componentName) {
-      const defaultForComponent = conf.defaultProps?.[componentName];
+      const defaultForComponent = (_a2 = conf.defaultProps) == null ? void 0 : _a2[componentName];
       defaultForComponent && (defaultProps = { ...defaultForComponent, ...defaultProps });
     }
   });
@@ -86,38 +80,39 @@ function createComponent(staticConfig) {
     validStyles: validStyles2 = {},
     variants = {}
   } = staticConfig;
-  process.env.NODE_ENV === "development" && staticConfig.defaultProps?.debug && process.env.IS_STATIC !== "is_static" && log(`\u{1F41B} [${componentName || "Component"}]`, {
+  process.env.NODE_ENV === "development" && ((_a = staticConfig.defaultProps) != null && _a.debug) && process.env.IS_STATIC !== "is_static" && (0, import_log.log)(`\u{1F41B} [${componentName || "Component"}]`, {
     staticConfig,
     defaultProps,
     defaultPropsKeyOrder: defaultProps ? Object.keys(defaultProps) : []
   });
-  const component = forwardRef((propsIn, forwardedRef) => {
-    const internalID = process.env.NODE_ENV === "development" ? useId() : "";
+  const component = (0, import_react.forwardRef)((propsIn, forwardedRef) => {
+    var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
+    const internalID = process.env.NODE_ENV === "development" ? (0, import_react.useId)() : "";
     if (process.env.NODE_ENV === "development" && startVisualizer && (startVisualizer(), startVisualizer = void 0), !hasSetupBaseViews) {
       hasSetupBaseViews = !0;
-      const baseViews = hooks.getBaseViews?.();
+      const baseViews = (_b = (_a2 = import_setupHooks.hooks).getBaseViews) == null ? void 0 : _b.call(_a2);
       baseViews && (BaseText = baseViews.Text, BaseView = baseViews.View);
     }
-    process.env.NODE_ENV === "test" && propsIn["data-test-renders"] && (propsIn["data-test-renders"].current ??= 0, propsIn["data-test-renders"].current += 1);
-    const componentContext = useContext(ComponentContext);
+    process.env.NODE_ENV === "test" && propsIn["data-test-renders"] && ((_c = propsIn["data-test-renders"]).current ?? (_c.current = 0), propsIn["data-test-renders"].current += 1);
+    const componentContext = (0, import_react.useContext)(import_ComponentContext.ComponentContext);
     let styledContextProps, overriddenContextProps, contextValue;
     const { context } = staticConfig;
     if (context) {
-      contextValue = useContext(context);
-      const { inverseShorthands } = getConfig();
+      contextValue = (0, import_react.useContext)(context);
+      const { inverseShorthands } = (0, import_config.getConfig)();
       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?.[key] ?? defaultProps?.[inverseShorthands[key]]
+          propsIn[key] ?? propsIn[inverseShorthands[key]] ?? (defaultProps == null ? void 0 : defaultProps[key]) ?? (defaultProps == null ? void 0 : defaultProps[inverseShorthands[key]])
         );
-        propVal === void 0 ? contextValue && (key in validStyles2 || key in variants) && (styledContextProps ||= {}, styledContextProps[key] = contextValue[key]) : (overriddenContextProps ||= {}, overriddenContextProps[key] = propVal);
+        propVal === void 0 ? contextValue && (key in validStyles2 || key in variants) && (styledContextProps || (styledContextProps = {}), styledContextProps[key] = contextValue[key]) : (overriddenContextProps || (overriddenContextProps = {}), overriddenContextProps[key] = propVal);
       }
     }
     const curDefaultProps = styledContextProps ? { ...defaultProps, ...styledContextProps } : defaultProps;
     let props = propsIn;
-    curDefaultProps && (props = mergeProps(curDefaultProps, propsIn));
+    curDefaultProps && (props = (0, import_mergeProps.mergeProps)(curDefaultProps, propsIn));
     const debugProp = props.debug, componentName2 = props.componentName || staticConfig.componentName;
-    process.env.NODE_ENV === "development" && isClient && useEffect(() => {
+    process.env.NODE_ENV === "development" && import_constants.isClient && (0, import_react.useEffect)(() => {
       let overlay = null;
       const debugVisualizerHandler = (show = !1) => {
         const node = curState.host;
@@ -129,27 +124,27 @@ function createComponent(staticConfig) {
           } else
             overlay && node.removeChild(overlay);
       };
-      return debugKeyListeners ||= /* @__PURE__ */ new Set(), debugKeyListeners.add(debugVisualizerHandler), () => {
-        debugKeyListeners?.delete(debugVisualizerHandler);
+      return debugKeyListeners || (debugKeyListeners = /* @__PURE__ */ new Set()), debugKeyListeners.add(debugVisualizerHandler), () => {
+        debugKeyListeners == null || debugKeyListeners.delete(debugVisualizerHandler);
       };
     }, [componentName2]), !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)`, process.env.NODE_ENV === "development" && time && time`did-finish-ssr`;
-    const stateRef = useRef({});
+    const stateRef = (0, import_react.useRef)({});
     process.env.NODE_ENV === "development" && time && time`stateref`;
-    const animationsConfig = componentContext.animationDriver, useAnimations = animationsConfig?.useAnimations, hasAnimationProp = !!("animation" in props || props.style && hasAnimatedStyleValue(props.style)), supportsCSSVars = animationsConfig?.supportsCSSVars, curState = stateRef.current, willBeAnimatedClient = !!(!!(hasAnimationProp && !isHOC && useAnimations) || curState.hasAnimated), willBeAnimated = !isServer && willBeAnimatedClient;
+    const animationsConfig = componentContext.animationDriver, useAnimations = animationsConfig == null ? void 0 : animationsConfig.useAnimations, hasAnimationProp = !!("animation" in props || props.style && hasAnimatedStyleValue(props.style)), supportsCSSVars = animationsConfig == null ? void 0 : animationsConfig.supportsCSSVars, curState = stateRef.current, willBeAnimatedClient = !!(!!(hasAnimationProp && !isHOC && useAnimations) || curState.hasAnimated), willBeAnimated = !import_constants.isServer && willBeAnimatedClient;
     willBeAnimated && !curState.hasAnimated && (curState.hasAnimated = !0);
-    const isHydrated = config?.disableSSR ? !0 : useDidFinishSSR(), presence = willBeAnimated && animationsConfig?.usePresence?.() || null, presenceState = presence?.[2], isExiting = presenceState?.isPresent === !1, isEntering = presenceState?.isPresent === !0 && presenceState.initial !== !1, hasEnterStyle = !!props.enterStyle, hasRNAnimation = hasAnimationProp && animationsConfig?.isReactNative, isReactNative = staticConfig.isReactNative;
+    const isHydrated = config != null && config.disableSSR ? !0 : (0, import_use_did_finish_ssr.useDidFinishSSR)(), presence = willBeAnimated && ((_d = animationsConfig == null ? void 0 : animationsConfig.usePresence) == null ? void 0 : _d.call(animationsConfig)) || null, presenceState = presence == null ? void 0 : presence[2], isExiting = (presenceState == null ? void 0 : presenceState.isPresent) === !1, isEntering = (presenceState == null ? void 0 : presenceState.isPresent) === !0 && presenceState.initial !== !1, hasEnterStyle = !!props.enterStyle, hasRNAnimation = hasAnimationProp && (animationsConfig == null ? void 0 : animationsConfig.isReactNative), isReactNative = staticConfig.isReactNative;
     let isAnimated = willBeAnimated;
     !isReactNative && hasRNAnimation && !isHOC && !isHydrated && (isAnimated = !1, curState.willHydrate = !0), process.env.NODE_ENV === "development" && time && time`pre-use-state`;
-    const hasEnterState = hasEnterStyle || isEntering, needsToMount = !isHydrated || !curState.host, initialState = hasEnterState ? needsToMount ? defaultComponentStateShouldEnter : defaultComponentState : defaultComponentStateMounted, states = useState(initialState), state = props.forceStyle ? { ...states[0], [props.forceStyle]: !0 } : states[0], setState = states[1];
-    let setStateShallow = createShallowSetState(setState, debugProp);
+    const hasEnterState = hasEnterStyle || isEntering, needsToMount = !isHydrated || !curState.host, initialState = hasEnterState ? needsToMount ? import_defaultComponentState.defaultComponentStateShouldEnter : import_defaultComponentState.defaultComponentState : import_defaultComponentState.defaultComponentStateMounted, states = (0, import_react.useState)(initialState), state = props.forceStyle ? { ...states[0], [props.forceStyle]: !0 } : states[0], setState = states[1];
+    let setStateShallow = (0, import_createShallowSetState.createShallowSetState)(setState, debugProp);
     if (isHydrated && state.unmounted === "should-enter" && (state.unmounted = !0), presenceState && isAnimated && isHydrated && staticConfig.variants) {
       process.env.NODE_ENV === "development" && debugProp === "verbose" && console.warn(`has presenceState ${JSON.stringify(presenceState)}`);
       const { enterVariant, exitVariant, enterExitVariant, custom } = presenceState;
-      isObj(custom) && Object.assign(props, custom);
+      (0, import_isObj.isObj)(custom) && Object.assign(props, custom);
       const exv = exitVariant ?? enterExitVariant, env = enterVariant ?? enterExitVariant;
       state.unmounted && env && staticConfig.variants[env] ? (process.env.NODE_ENV === "development" && debugProp === "verbose" && console.warn(`Animating presence ENTER "${env}"`), props[env] = !0) : isExiting && exv && (process.env.NODE_ENV === "development" && debugProp === "verbose" && console.warn(`Animating presence EXIT "${exv}"`), props[exv] = exitVariant !== enterExitVariant);
     }
-    const shouldAvoidClasses = !!(!isWeb || isAnimated && !supportsCSSVars || !staticConfig.acceptsClassName || propsIn.disableClassName), shouldForcePseudo = !!propsIn.forceStyle, noClassNames = shouldAvoidClasses || shouldForcePseudo, groupName = props.group, groupClassName = groupName ? `t_group_${props.group}` : "";
+    const shouldAvoidClasses = !!(!import_constants.isWeb || isAnimated && !supportsCSSVars || !staticConfig.acceptsClassName || propsIn.disableClassName), shouldForcePseudo = !!propsIn.forceStyle, noClassNames = shouldAvoidClasses || shouldForcePseudo, groupName = props.group, groupClassName = groupName ? `t_group_${props.group}` : "";
     if (groupName && !curState.group) {
       const listeners = /* @__PURE__ */ new Set();
       curState.group = {
@@ -178,9 +173,9 @@ function createComponent(staticConfig) {
       };
     }
     process.env.NODE_ENV === "development" && time && time`use-state`;
-    const componentNameFinal = props.componentName || componentName2, componentClassName = props.asChild || !componentNameFinal ? "" : `is_${componentNameFinal}`, hasTextAncestor = !!(isWeb && isText && componentContext.inText), isDisabled = props.disabled ?? props.accessibilityState?.disabled;
+    const componentNameFinal = props.componentName || componentName2, componentClassName = props.asChild || !componentNameFinal ? "" : `is_${componentNameFinal}`, hasTextAncestor = !!(import_constants.isWeb && isText && componentContext.inText), isDisabled = props.disabled ?? ((_e = props.accessibilityState) == null ? void 0 : _e.disabled);
     process.env.NODE_ENV === "development" && time && time`use-context`;
-    const element = isWeb && (!Component || typeof Component == "string") && props.tag || Component;
+    const element = import_constants.isWeb && (!Component || typeof Component == "string") && props.tag || Component;
     let elementType = isText ? BaseText || element || "span" : BaseView || element || (hasTextAncestor ? "span" : "div");
     animationsConfig && isAnimated && (elementType = animationsConfig[isText ? "Text" : "View"] || elementType);
     const disableTheme = !1 || isHOC;
@@ -194,24 +189,24 @@ function createComponent(staticConfig) {
       debug: debugProp
     };
     if (typeof curState.isListeningToTheme == "boolean" && (themeStateProps.shouldUpdate = () => stateRef.current.isListeningToTheme), themeStateProps.deopt = willBeAnimated, process.env.NODE_ENV === "development" && debugProp && debugProp !== "profile") {
-      const name = `${componentName2 || Component?.displayName || Component?.name || "[Unnamed Component]"}`, type = (hasEnterStyle ? "(hasEnter)" : "") + (isAnimated ? "(animated)" : "") + (isReactNative ? "(rnw)" : "") + (presenceState?.isPresent === !1 ? "(EXIT)" : ""), dataIs = propsIn["data-is"] || "", banner = `${internalID} ${name}${dataIs ? ` ${dataIs}` : ""} ${type}`;
+      const name = `${componentName2 || (Component == null ? void 0 : Component.displayName) || (Component == null ? void 0 : Component.name) || "[Unnamed Component]"}`, type = (hasEnterStyle ? "(hasEnter)" : "") + (isAnimated ? "(animated)" : "") + (isReactNative ? "(rnw)" : "") + ((presenceState == null ? void 0 : presenceState.isPresent) === !1 ? "(EXIT)" : ""), dataIs = propsIn["data-is"] || "", banner = `${internalID} ${name}${dataIs ? ` ${dataIs}` : ""} ${type}`;
       if (console.info(
         `%c ${banner} (hydrated: ${isHydrated}) (unmounted: ${state.unmounted})`,
         "background: green; color: white;"
-      ), !isServer) {
+      ), !import_constants.isServer) {
         console.groupEnd();
         const stateLog = `${`${state.press || state.pressIn ? " PRESS " : ""}`}${state.hover ? " HOVER " : ""}${state.focus ? " FOCUS" : " "}`, ch = propsIn.children;
         let childLog = typeof ch == "string" ? ch.length > 4 ? ch.slice(0, 4) + "..." : ch : "";
-        childLog.length && (childLog = `(children: ${childLog})`), console.groupCollapsed(`${childLog}${stateLog}Props:`), log("props in:", propsIn), log("final props:", props), log({ state, staticConfig, elementType, themeStateProps }), log({ contextProps: styledContextProps, overriddenContextProps }), log({ presence, isAnimated, isHOC, hasAnimationProp, useAnimations }), console.groupEnd();
+        childLog.length && (childLog = `(children: ${childLog})`), console.groupCollapsed(`${childLog}${stateLog}Props:`), (0, import_log.log)("props in:", propsIn), (0, import_log.log)("final props:", props), (0, import_log.log)({ state, staticConfig, elementType, themeStateProps }), (0, import_log.log)({ contextProps: styledContextProps, overriddenContextProps }), (0, import_log.log)({ presence, isAnimated, isHOC, hasAnimationProp, useAnimations }), console.groupEnd();
       }
     }
     process.env.NODE_ENV === "development" && time && time`pre-theme-media`;
-    const [themeState, theme] = useThemeWithState(themeStateProps);
+    const [themeState, theme] = (0, import_useTheme.useThemeWithState)(themeStateProps);
     elementType = Component || elementType;
     const isStringElement = typeof elementType == "string";
     process.env.NODE_ENV === "development" && time && time`theme`;
-    const mediaState = useMedia(stateRef, componentContext);
-    process.env.NODE_ENV === "development" && time && time`media`, setDidGetVariableValue(!1);
+    const mediaState = (0, import_useMedia.useMedia)(stateRef, componentContext);
+    process.env.NODE_ENV === "development" && time && time`media`, (0, import_createVariable.setDidGetVariableValue)(!1);
     const 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"
@@ -221,11 +216,11 @@ function createComponent(staticConfig) {
       resolveValues,
       isExiting,
       isAnimated
-    }, splitStyles = useSplitStyles(
+    }, splitStyles = (0, import_getSplitStyles.useSplitStyles)(
       props,
       staticConfig,
       theme,
-      themeState?.state?.name || "",
+      ((_f = themeState == null ? void 0 : themeState.state) == null ? void 0 : _f.name) || "",
       state,
       styleProps,
       null,
@@ -234,8 +229,8 @@ function createComponent(staticConfig) {
       debugProp
     );
     props.group && props.untilMeasured === "hide" && !curState.hasMeasured && (splitStyles.style.opacity = 0), process.env.NODE_ENV === "development" && time && time`split-styles`, curState.isListeningToTheme = splitStyles.dynamicThemeAccess;
-    const isMediaArray = splitStyles.hasMedia && Array.isArray(splitStyles.hasMedia), shouldListenForMedia = didGetVariableValue() || isMediaArray || noClassNames && splitStyles.hasMedia === !0, mediaListeningKeys = isMediaArray ? splitStyles.hasMedia : null;
-    setMediaShouldUpdate(stateRef, {
+    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
     });
@@ -258,7 +253,7 @@ function createComponent(staticConfig) {
         presence,
         componentState: state,
         styleProps,
-        theme: themeState.state?.theme,
+        theme: (_g = themeState.state) == null ? void 0 : _g.theme,
         pseudos: pseudos || null,
         staticConfig,
         stateRef
@@ -298,25 +293,26 @@ function createComponent(staticConfig) {
 
 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`;
-    const disabled = props.accessibilityState?.disabled || // @ts-expect-error (comes from core)
+    const disabled = ((_h = props.accessibilityState) == null ? void 0 : _h.disabled) || // @ts-expect-error (comes from core)
     props.accessibilityDisabled;
     let viewProps = nonTamaguiProps;
-    hasAnimationProp && props.tag && !props.role && !props.accessibilityRole && (viewProps.role = props.tag), isHOC && _themeProp && (viewProps.theme = _themeProp), groupName && (nonTamaguiProps.onLayout = composeEventHandlers(
+    hasAnimationProp && props.tag && !props.role && !props.accessibilityRole && (viewProps.role = props.tag), isHOC && _themeProp && (viewProps.theme = _themeProp), groupName && (nonTamaguiProps.onLayout = (0, import_helpers.composeEventHandlers)(
       nonTamaguiProps.onLayout,
       (e) => {
         stateRef.current.group.emit(groupName, {
           layout: e.nativeEvent.layout
         }), !stateRef.current.hasMeasured && props.untilMeasured === "hide" && setState((prev) => ({ ...prev })), stateRef.current.hasMeasured = !0;
       }
-    )), viewProps = hooks.usePropsTransform?.(
+    )), viewProps = ((_j = (_i = import_setupHooks.hooks).usePropsTransform) == null ? void 0 : _j.call(
+      _i,
       elementType,
       nonTamaguiProps,
       stateRef,
       curState.willHydrate
-    ) ?? nonTamaguiProps, curState.composedRef || (curState.composedRef = composeRefs(
+    )) ?? nonTamaguiProps, curState.composedRef || (curState.composedRef = (0, import_compose_refs.composeRefs)(
       (x) => stateRef.current.host = x,
       forwardedRef
-    )), viewProps.ref = curState.composedRef, process.env.NODE_ENV === "development" && !isReactNative && !isText && isWeb && !isHOC && Children.toArray(props.children).forEach((item) => {
+    )), viewProps.ref = curState.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>.`
@@ -325,7 +321,7 @@ If you meant to do this, you can disable this warning - either change untilMeasu
     const { pseudoGroups, mediaGroups } = splitStyles;
     curState.unPress || (curState.unPress = () => setStateShallow({ press: !1, pressIn: !1 }));
     const unPress = curState.unPress, shouldEnter = state.unmounted;
-    useEffect(() => {
+    (0, import_react.useEffect)(() => {
       if (shouldEnter) {
         setStateShallow({ unmounted: !1 });
         return;
@@ -338,10 +334,10 @@ If you meant to do this, you can disable this warning - either change untilMeasu
         };
         disposeGroupsListener = componentContext.groups.subscribe(
           (name, { layout, pseudo }) => {
-            if (pseudo && pseudoGroups?.has(name))
+            if (pseudo && (pseudoGroups != null && pseudoGroups.has(name)))
               Object.assign(current.pseudo, pseudo), persist();
             else if (layout && mediaGroups) {
-              const mediaState2 = getMediaState(mediaGroups, layout), next = mergeIfNotShallowEqual(current.media, mediaState2);
+              const mediaState2 = getMediaState(mediaGroups, layout), next = (0, import_createShallowSetState.mergeIfNotShallowEqual)(current.media, mediaState2);
               next !== current.media && (Object.assign(current.media, next), persist());
             }
             function persist() {
@@ -357,58 +353,58 @@ If you meant to do this, you can disable this warning - either change untilMeasu
         );
       }
       return () => {
-        disposeGroupsListener?.(), mouseUps.delete(unPress);
+        disposeGroupsListener == null || disposeGroupsListener(), mouseUps.delete(unPress);
       };
     }, [
       shouldEnter,
       pseudoGroups ? Object.keys([...pseudoGroups]).join("") : 0,
       mediaGroups ? Object.keys([...mediaGroups]).join("") : 0
     ]);
-    let fontFamily = isText ? splitStyles.fontFamily || staticConfig.defaultProps?.fontFamily : null;
+    let fontFamily = isText ? splitStyles.fontFamily || ((_k = staticConfig.defaultProps) == null ? void 0 : _k.fontFamily) : null;
     fontFamily && fontFamily[0] === "$" && (fontFamily = fontFamily.slice(1));
     const fontFamilyClassName = fontFamily ? `font_${fontFamily}` : "", style = animationStyles || splitStyles.style;
     let className;
     asChild === "except-style" || asChild === "except-style-web" || (viewProps.style = style);
-    const runtimePressStyle = !disabled && noClassNames && pseudos?.pressStyle, runtimeFocusStyle = !disabled && noClassNames && pseudos?.focusStyle, attachFocus = !!(runtimePressStyle || runtimeFocusStyle || onFocus || onBlur), attachPress = !!(groupName || runtimePressStyle || onPress || onPressOut || onPressIn || onLongPress || onClick), runtimeHoverStyle = !disabled && noClassNames && pseudos?.hoverStyle, needsHoverState = runtimeHoverStyle || onHoverIn || onHoverOut, isHoverable = isWeb && !!(groupName || needsHoverState || onMouseEnter || onMouseLeave), shouldAttach = !!(attachFocus || attachPress || isHoverable || runtimePressStyle || runtimeHoverStyle || runtimeFocusStyle);
+    const runtimePressStyle = !disabled && noClassNames && (pseudos == null ? void 0 : pseudos.pressStyle), runtimeFocusStyle = !disabled && noClassNames && (pseudos == null ? void 0 : pseudos.focusStyle), attachFocus = !!(runtimePressStyle || runtimeFocusStyle || onFocus || onBlur), attachPress = !!(groupName || runtimePressStyle || onPress || onPressOut || onPressIn || onLongPress || onClick), runtimeHoverStyle = !disabled && noClassNames && (pseudos == null ? void 0 : pseudos.hoverStyle), needsHoverState = runtimeHoverStyle || onHoverIn || onHoverOut, isHoverable = import_constants.isWeb && !!(groupName || needsHoverState || onMouseEnter || onMouseLeave), shouldAttach = !!(attachFocus || attachPress || isHoverable || runtimePressStyle || runtimeHoverStyle || runtimeFocusStyle);
     process.env.NODE_ENV === "development" && time && time`events-setup`;
     const events = shouldAttach && !isDisabled && !props.asChild ? {
       onPressOut: attachPress ? (e) => {
-        unPress(), onPressOut?.(e), onMouseUp?.(e);
+        unPress(), onPressOut == null || onPressOut(e), onMouseUp == null || onMouseUp(e);
       } : void 0,
       ...(isHoverable || attachPress) && {
         onMouseEnter: (e) => {
           const next = {};
-          needsHoverState && (next.hover = !0), runtimePressStyle && state.pressIn && (next.press = !0), setStateShallow(next), onHoverIn?.(e), onMouseEnter?.(e);
+          needsHoverState && (next.hover = !0), runtimePressStyle && state.pressIn && (next.press = !0), setStateShallow(next), onHoverIn == null || onHoverIn(e), onMouseEnter == null || onMouseEnter(e);
         },
         onMouseLeave: (e) => {
           const next = {};
-          mouseUps.add(unPress), needsHoverState && (next.hover = !1), runtimePressStyle && state.pressIn && (next.press = !1, next.pressIn = !1), setStateShallow(next), onHoverOut?.(e), onMouseLeave?.(e);
+          mouseUps.add(unPress), needsHoverState && (next.hover = !1), runtimePressStyle && state.pressIn && (next.press = !1, next.pressIn = !1), setStateShallow(next), onHoverOut == null || onHoverOut(e), onMouseLeave == null || onMouseLeave(e);
         }
       },
       onPressIn: attachPress ? (e) => {
         runtimePressStyle && setStateShallow({
           press: !0,
           pressIn: !0
-        }), onPressIn?.(e), onMouseDown?.(e), isWeb && mouseUps.add(unPress);
+        }), onPressIn == null || onPressIn(e), onMouseDown == null || onMouseDown(e), import_constants.isWeb && mouseUps.add(unPress);
       } : void 0,
       onPress: attachPress ? (e) => {
-        unPress(), isWeb && onClick?.(e), onPress?.(e);
+        unPress(), import_constants.isWeb && (onClick == null || onClick(e)), onPress == null || onPress(e);
       } : void 0,
       ...attachPress && onLongPress && {
         onLongPress: (e) => {
-          unPress(), onLongPress?.(e);
+          unPress(), onLongPress == null || onLongPress(e);
         }
       },
       ...attachFocus && {
         onFocus: (e) => {
           setStateShallow({
             focus: !0
-          }), onFocus?.(e);
+          }), onFocus == null || onFocus(e);
         },
         onBlur: (e) => {
           setStateShallow({
             focus: !1
-          }), onBlur?.(e);
+          }), onBlur == null || onBlur(e);
         }
       }
     } : null;
@@ -421,7 +417,7 @@ If you meant to do this, you can disable this warning - either change untilMeasu
       delayPressOut: viewProps.delayPressOut,
       focusable: viewProps.focusable ?? !0,
       minPressDuration: 0
-    }), process.env.NODE_ENV === "development" && time && time`events`, process.env.NODE_ENV === "development" && debugProp === "verbose" && log("events", { events, isHoverable, attachPress }), hooks.useEvents?.(viewProps, events, splitStyles, setStateShallow, staticConfig);
+    }), process.env.NODE_ENV === "development" && time && time`events`, process.env.NODE_ENV === "development" && debugProp === "verbose" && (0, import_log.log)("events", { events, isHoverable, attachPress }), (_m = (_l = import_setupHooks.hooks).useEvents) == null || _m.call(_l, viewProps, events, splitStyles, setStateShallow, staticConfig);
     const direction = props.spaceDirection || "both";
     process.env.NODE_ENV === "development" && time && time`hooks`;
     let content = !children || asChild ? children : spacedChildren({
@@ -432,18 +428,18 @@ If you meant to do this, you can disable this warning - either change untilMeasu
       isZStack,
       debug: debugProp
     });
-    asChild && (elementType = Slot, Object.assign(viewProps, { onPress, onLongPress })), process.env.NODE_ENV === "development" && time && time`spaced-as-child`;
+    asChild && (elementType = import_Slot.Slot, Object.assign(viewProps, { onPress, onLongPress })), process.env.NODE_ENV === "development" && time && time`spaced-as-child`;
     let useChildrenResult;
-    hooks.useChildren && (useChildrenResult = hooks.useChildren(
+    import_setupHooks.hooks.useChildren && (useChildrenResult = import_setupHooks.hooks.useChildren(
       elementType,
       content,
       viewProps,
       events,
       staticConfig
-    )), useChildrenResult ? content = useChildrenResult : content = createElement(elementType, viewProps, content);
-    const ResetPresence = config?.animations?.ResetPresence;
-    ResetPresence && willBeAnimated && (hasEnterStyle || presenceState) && content && typeof content != "string" && (content = /* @__PURE__ */ jsx(ResetPresence, { children: content })), process.env.NODE_ENV === "development" && time && time`create-element`;
-    const groupState = curState.group, subGroupContext = useMemo(() => {
+    )), useChildrenResult ? content = useChildrenResult : content = (0, import_react.createElement)(elementType, viewProps, content);
+    const ResetPresence = (_n = config == null ? void 0 : config.animations) == null ? void 0 : _n.ResetPresence;
+    ResetPresence && willBeAnimated && (hasEnterStyle || presenceState) && content && typeof content != "string" && (content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ResetPresence, { children: content })), process.env.NODE_ENV === "development" && time && time`create-element`;
+    const groupState = curState.group, subGroupContext = (0, import_react.useMemo)(() => {
       if (!(!groupState || !groupName))
         return groupState.listeners.clear(), {
           ...componentContext.groups,
@@ -451,7 +447,7 @@ If you meant to do this, you can disable this warning - either change untilMeasu
           state: {
             ...componentContext.groups.state,
             [groupName]: {
-              pseudo: defaultComponentStateMounted,
+              pseudo: import_defaultComponentState.defaultComponentStateMounted,
               // capture just initial width and height if they exist
               // will have top, left, width, height (not x, y)
               layout: {
@@ -464,19 +460,19 @@ If you meant to do this, you can disable this warning - either change untilMeasu
           subscribe: groupState.subscribe
         };
     }, [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), 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) {
+    if (groupName && subGroupContext && (content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ComponentContext.ComponentContext.Provider, { ...componentContext, groups: subGroupContext, children: content })), process.env.NODE_ENV === "development" && time && time`group-context`, content = disableTheme ? content : (0, import_Theme.getThemedChildren)(themeState, content, themeStateProps, !1), 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 })), staticConfig.context) {
       const contextProps = staticConfig.context.props;
       for (const key in contextProps)
-        (key in style || key in viewProps) && (overriddenContextProps ||= {}, overriddenContextProps[key] = style[key] ?? viewProps[key]);
+        (key in style || key in viewProps) && (overriddenContextProps || (overriddenContextProps = {}), overriddenContextProps[key] = style[key] ?? viewProps[key]);
     }
     if (overriddenContextProps) {
       const Provider = staticConfig.context.Provider;
-      content = /* @__PURE__ */ jsx(Provider, { ...contextValue, ...overriddenContextProps, children: content });
+      content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Provider, { ...contextValue, ...overriddenContextProps, children: content });
     }
     if (process.env.NODE_ENV === "development" && debugProp && debugProp !== "profile") {
       console.groupCollapsed(`render <${typeof elementType == "string" ? elementType : "Component"} /> (${internalID}) with props`);
       try {
-        log("viewProps", viewProps), log("children", content), typeof window < "u" && (log("props in", propsIn, "mapped to", props, "in order", Object.keys(props)), log({
+        (0, import_log.log)("viewProps", viewProps), (0, import_log.log)("children", content), typeof window < "u" && ((0, import_log.log)("props in", propsIn, "mapped to", props, "in order", Object.keys(props)), (0, import_log.log)({
           animationStyles,
           classNames,
           content,
@@ -515,7 +511,7 @@ If you meant to do this, you can disable this warning - either change untilMeasu
   });
   staticConfig.componentName && (component.displayName = staticConfig.componentName);
   let res = component;
-  (process.env.TAMAGUI_FORCE_MEMO || staticConfig.memo) && (res = memo(res)), res.staticConfig = staticConfig;
+  (process.env.TAMAGUI_FORCE_MEMO || staticConfig.memo) && (res = (0, import_react.memo)(res)), res.staticConfig = staticConfig;
   function extendStyledConfig(extended) {
     return {
       ...staticConfig,
@@ -529,9 +525,10 @@ 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) {
-    let out = Component2.render?.length === 2 ? Component2 : forwardRef(Component2);
-    const extendedConfig = extendStyledConfig(options?.staticConfig);
-    return out = options?.disableTheme ? out : themeable(out, extendedConfig), process.env.TAMAGUI_MEMOIZE_STYLEABLE && (out = memo(out)), out.staticConfig = extendedConfig, out.styleable = styleable, out;
+    var _a2;
+    let out = ((_a2 = Component2.render) == null ? void 0 : _a2.length) === 2 ? Component2 : (0, import_react.forwardRef)(Component2);
+    const extendedConfig = extendStyledConfig(options == null ? void 0 : options.staticConfig);
+    return out = options != null && options.disableTheme ? out : (0, import_themeable.themeable)(out, extendedConfig), process.env.TAMAGUI_MEMOIZE_STYLEABLE && (out = (0, import_react.memo)(out)), out.staticConfig = extendedConfig, out.styleable = styleable, out;
   }
   return res.extractable = extractable, res.styleable = styleable, res;
 }
@@ -552,9 +549,9 @@ const getSpacerSize = (size, { tokens }) => {
   acceptsClassName: !0,
   memo: !0,
   componentName: "Spacer",
-  validStyles,
+  validStyles: import_helpers.validStyles,
   defaultProps: {
-    ...stackDefaultStyles,
+    ...import_constants2.stackDefaultStyles,
     // avoid nesting issues
     tag: "span",
     size: !0,
@@ -583,22 +580,23 @@ const getSpacerSize = (size, { tokens }) => {
   }
 });
 function spacedChildren(props) {
+  var _a, _b, _c;
   const { isZStack, children, space, direction, spaceFlex, separator } = props, hasSpace = !!(space || spaceFlex), hasSeparator = separator != null;
   if (!(hasSpace || hasSeparator || isZStack))
     return children;
-  const childrenList = Children.toArray(children);
-  if (childrenList.length <= 1 && !isZStack && !childrenList[0]?.type?.shouldForwardSpace)
+  const childrenList = import_react.Children.toArray(children);
+  if (childrenList.length <= 1 && !isZStack && !((_b = (_a = childrenList[0]) == null ? void 0 : _a.type) != null && _b.shouldForwardSpace))
     return childrenList;
   const final = [];
   for (let [index, child] of childrenList.entries()) {
     const isEmpty = child == null || Array.isArray(child) && child.length === 0;
-    if (!isEmpty && React.isValidElement(child) && child.type?.shouldForwardSpace && (child = React.cloneElement(child, {
+    if (!isEmpty && import_react.default.isValidElement(child) && ((_c = child.type) != null && _c.shouldForwardSpace) && (child = import_react.default.cloneElement(child, {
       space,
       spaceFlex,
       separator,
       key: child.key
     })), isEmpty || !child || child.key && !isZStack ? final.push(child) : final.push(
-      /* @__PURE__ */ jsx(Fragment, { children: isZStack ? /* @__PURE__ */ jsx(AbsoluteFill, { children: child }) : child }, index)
+      /* @__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];
@@ -610,7 +608,7 @@ function spacedChildren(props) {
         spaceFlex
       })
     ), final.push(
-      React.isValidElement(separator) ? React.cloneElement(separator, { key: `sep_${index}` }) : separator
+      import_react.default.isValidElement(separator) ? import_react.default.cloneElement(separator, { key: `sep_${index}` }) : separator
     ), hasSpace && final.push(
       createSpacer({
         key: `_${index}01tmgui`,
@@ -627,10 +625,10 @@ function spacedChildren(props) {
       })
     ));
   }
-  return process.env.NODE_ENV === "development" && props.debug && log("  Spaced children", final, props), final;
+  return process.env.NODE_ENV === "development" && props.debug && (0, import_log.log)("  Spaced children", final, props), final;
 }
 function createSpacer({ key, direction, space, spaceFlex }) {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     Spacer,
     {
       size: space,
@@ -643,12 +641,12 @@ function createSpacer({ key, direction, space, spaceFlex }) {
   );
 }
 function isUnspaced(child) {
-  const t = child?.type;
-  return t?.isVisuallyHidden || t?.isUnspaced;
+  const t = child == null ? void 0 : child.type;
+  return (t == null ? void 0 : t.isVisuallyHidden) || (t == null ? void 0 : t.isUnspaced);
 }
 const AbsoluteFill = createComponent({
   defaultProps: {
-    ...stackDefaultStyles,
+    ...import_constants2.stackDefaultStyles,
     flexDirection: "column",
     position: "absolute",
     top: 0,
@@ -666,15 +664,16 @@ function hasAnimatedStyleValue(style) {
 }
 function getMediaState(mediaGroups, layout) {
   return Object.fromEntries(
-    [...mediaGroups].map((mediaKey) => [mediaKey, mediaKeyMatch(mediaKey, layout)])
+    [...mediaGroups].map((mediaKey) => [mediaKey, (0, import_useMedia.mediaKeyMatch)(mediaKey, layout)])
   );
 }
 const fromPx = (val) => typeof val != "string" ? val : +val.replace("px", "");
-export {
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
   Spacer,
   Unspaced,
   createComponent,
   mouseUps,
   spacedChildren
-};
+});
 //# sourceMappingURL=createComponent.js.map