@tamagui/web 1.116.1 → 1.116.2

package/dist/cjs/createComponent.js

@@ -0,0 +1,670 @@
+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,
+  componentSetStates: () => componentSetStates,
+  createComponent: () => createComponent,
+  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_react = __toESM(require("react")), import_config = require("./config"), import_constants2 = require("./constants/constants"), import_isDevTools = require("./constants/isDevTools"), import_ComponentContext = require("./contexts/ComponentContext"), import_createVariable = require("./createVariable"), import_defaultComponentState = require("./defaultComponentState"), import_getSplitStyles = require("./helpers/getSplitStyles"), import_log = require("./helpers/log"), import_mergeProps = require("./helpers/mergeProps"), import_setElementProps = require("./helpers/setElementProps"), import_subscribeToContextGroup = require("./helpers/subscribeToContextGroup"), import_themeable = require("./helpers/themeable"), import_wrapStyleTags = require("./helpers/wrapStyleTags"), import_useComponentState = require("./hooks/useComponentState"), 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 componentSetStates = /* @__PURE__ */ new Set();
+if (typeof document < "u") {
+  const cancelTouches = () => {
+    componentSetStates.forEach(
+      (setState) => setState((prev) => prev.press || prev.pressIn ? {
+        ...prev,
+        press: !1,
+        pressIn: !1
+      } : prev)
+    ), componentSetStates.clear();
+  };
+  addEventListener("mouseup", cancelTouches), addEventListener("touchend", cancelTouches), addEventListener("touchcancel", cancelTouches), process.env.NODE_ENV === "development" && (startVisualizer = () => {
+    const devVisualizerConfig = import_config.devConfig?.visualizer;
+    if (devVisualizerConfig) {
+      debugKeyListeners = /* @__PURE__ */ new Set();
+      let tm, isShowing = !1;
+      const options = {
+        key: "Alt",
+        delay: 800,
+        ...typeof devVisualizerConfig == "object" ? devVisualizerConfig : {}
+      };
+      document.addEventListener("blur", () => {
+        clearTimeout(tm);
+      }), document.addEventListener("keydown", ({ key, defaultPrevented }) => {
+        defaultPrevented || (clearTimeout(tm), key === options.key && (tm = setTimeout(() => {
+          isShowing = !0, debugKeyListeners?.forEach((l) => l(!0));
+        }, options.delay)));
+      }), document.addEventListener("keyup", ({ key, defaultPrevented }) => {
+        defaultPrevented || key === options.key && (clearTimeout(tm), isShowing && debugKeyListeners?.forEach((l) => l(!1)));
+      });
+    }
+  });
+}
+let BaseText, BaseView;
+const lastInteractionWasKeyboard = { value: !1 };
+import_constants.isWeb && globalThis.document && (document.addEventListener("keydown", () => {
+  lastInteractionWasKeyboard.value = !0;
+}), document.addEventListener("mousedown", () => {
+  lastInteractionWasKeyboard.value = !1;
+}), document.addEventListener("mousemove", () => {
+  lastInteractionWasKeyboard.value = !1;
+}));
+function createComponent(staticConfig) {
+  const { componentName } = staticConfig;
+  let config = null, defaultProps = staticConfig.defaultProps;
+  (0, import_config.onConfiguredOnce)((conf) => {
+    if (config = conf, componentName) {
+      const defaultForComponent = conf.defaultProps?.[componentName];
+      defaultForComponent && (defaultProps = { ...defaultForComponent, ...defaultProps });
+    }
+  });
+  const { Component, isText, isZStack, isHOC } = staticConfig;
+  process.env.NODE_ENV === "development" && staticConfig.defaultProps?.debug && process.env.IS_STATIC !== "is_static" && (0, import_log.log)(`\u{1F41B} [${componentName || "Component"}]`, {
+    staticConfig,
+    defaultProps,
+    defaultPropsKeyOrder: defaultProps ? Object.keys(defaultProps) : []
+  });
+  const component = import_react.default.forwardRef((propsIn, forwardedRef) => {
+    const internalID = process.env.NODE_ENV === "development" ? import_react.default.useId() : "";
+    process.env.NODE_ENV === "development" && startVisualizer && (startVisualizer(), startVisualizer = void 0), process.env.NODE_ENV === "test" && propsIn["data-test-renders"] && (propsIn["data-test-renders"].current ??= 0, propsIn["data-test-renders"].current += 1);
+    const componentContext = import_react.default.useContext(import_ComponentContext.ComponentContext);
+    let styledContextProps, overriddenContextProps, contextValue;
+    const { context, isReactNative } = staticConfig;
+    if (context && (contextValue = import_react.default.useContext(context), contextValue)) {
+      process.env.NODE_ENV === "development" && (propsIn.debug || defaultProps?.debug) && (0, import_log.log)(" \u{1F447} contextValue", contextValue);
+      for (const key in context.props) {
+        const propVal = propsIn[key];
+        if (propVal === void 0) {
+          const val = contextValue?.[key];
+          val !== void 0 && (styledContextProps ||= {}, styledContextProps[key] = val);
+        }
+        const finalVal = propVal ?? defaultProps?.[key];
+        finalVal !== void 0 && (overriddenContextProps ||= {}, overriddenContextProps[key] = finalVal);
+      }
+    }
+    const curDefaultProps = styledContextProps ? { ...defaultProps, ...styledContextProps } : defaultProps;
+    let props = propsIn;
+    curDefaultProps && (props = (0, import_mergeProps.mergeProps)(curDefaultProps, propsIn));
+    const debugProp = props.debug, componentName2 = props.componentName || staticConfig.componentName;
+    process.env.NODE_ENV === "development" && import_constants.isClient && import_react.default.useEffect(() => {
+      let overlay = null;
+      const debugVisualizerHandler = (show = !1) => {
+        const node = curStateRef.host;
+        if (node)
+          if (show) {
+            overlay = document.createElement("span"), overlay.style.inset = "0px", overlay.style.zIndex = "1000000", overlay.style.position = "absolute", overlay.style.borderColor = "red", overlay.style.borderWidth = "1px", overlay.style.borderStyle = "dotted";
+            const dataAt = node.getAttribute("data-at") || "", dataIn = node.getAttribute("data-in") || "", tooltip = document.createElement("span");
+            tooltip.style.position = "absolute", tooltip.style.top = "0px", tooltip.style.left = "0px", tooltip.style.padding = "3px", tooltip.style.background = "rgba(0,0,0,0.75)", tooltip.style.color = "rgba(255,255,255,1)", tooltip.style.fontSize = "12px", tooltip.style.lineHeight = "12px", tooltip.style.fontFamily = "monospace", tooltip.style.webkitFontSmoothing = "none", tooltip.innerText = `${componentName2 || ""} ${dataAt} ${dataIn}`.trim(), overlay.appendChild(tooltip), node.appendChild(overlay);
+          } else
+            overlay && node.removeChild(overlay);
+      };
+      return debugKeyListeners ||= /* @__PURE__ */ new Set(), debugKeyListeners.add(debugVisualizerHandler), () => {
+        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`, process.env.NODE_ENV === "development" && time && time`stateref`;
+    const animationDriver = componentContext.animationDriver, useAnimations = animationDriver?.useAnimations, {
+      curStateRef,
+      disabled,
+      groupName,
+      hasAnimationProp,
+      hasEnterStyle,
+      isAnimated,
+      isExiting,
+      isHydrated,
+      presence,
+      presenceState,
+      setState,
+      setStateShallow,
+      noClass,
+      state,
+      stateRef,
+      supportsCSSVars,
+      willBeAnimated,
+      willBeAnimatedClient
+    } = (0, import_useComponentState.useComponentState)(props, componentContext, staticConfig, config);
+    process.env.NODE_ENV === "development" && time && time`use-state`;
+    const hasTextAncestor = !!(import_constants.isWeb && isText && componentContext.inText);
+    process.env.NODE_ENV === "development" && time && time`use-context`;
+    const isTaggable = !Component || typeof Component == "string", tagProp = props.tag, element = import_constants.isWeb && isTaggable && tagProp || Component;
+    let elementType = isText ? BaseText || element || "span" : BaseView || element || (hasTextAncestor ? "span" : "div");
+    animationDriver && isAnimated && (elementType = animationDriver[isText ? "Text" : "View"] || elementType);
+    const disableTheme = props["data-disable-theme"] || isHOC;
+    process.env.NODE_ENV === "development" && time && time`theme-props`, props.themeShallow && (curStateRef.themeShallow = !0);
+    const themeStateProps = {
+      componentName: componentName2,
+      disable: disableTheme,
+      shallow: curStateRef.themeShallow,
+      debug: debugProp
+    };
+    if ("themeInverse" in props && (themeStateProps.inverse = props.themeInverse), "theme" in props && (themeStateProps.name = props.theme), typeof curStateRef.isListeningToTheme == "boolean" && (themeStateProps.shouldUpdate = () => stateRef.current.isListeningToTheme), process.env.NODE_ENV === "development" && debugProp && debugProp !== "profile") {
+      const name = `${componentName2 || Component?.displayName || Component?.name || "[Unnamed Component]"}`, type = (hasEnterStyle ? "(hasEnter)" : " ") + (isAnimated ? "(animated)" : " ") + (isReactNative ? "(rnw)" : " ") + (noClass ? "(noClass)" : " ") + (state.press || state.pressIn ? "(PRESSED)" : " ") + (state.hover ? "(HOVERED)" : " ") + (state.focus ? "(FOCUSED)" : " ") + (presenceState?.isPresent === !1 ? "(EXIT)" : ""), dataIs = propsIn["data-is"] || "", banner = `${internalID} ${name}${dataIs ? ` ${dataIs}` : ""} ${type}`;
+      if (console.info(
+        `%c ${banner} (hydrated: ${isHydrated}) (unmounted: ${state.unmounted})`,
+        "background: green; color: white;"
+      ), import_constants.isServer)
+        (0, import_log.log)({ noClass, isAnimated, isWeb: import_constants.isWeb, supportsCSSVars });
+      else {
+        console.groupEnd();
+        const ch = propsIn.children;
+        let childLog = typeof ch == "string" ? ch.length > 4 ? ch.slice(0, 4) + "..." : ch : "";
+        childLog.length && (childLog = `(children: ${childLog})`), console.groupCollapsed(`${childLog} 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] = (0, import_useTheme.useThemeWithState)(themeStateProps);
+    elementType = Component || elementType;
+    const isStringElement = typeof elementType == "string";
+    process.env.NODE_ENV === "development" && time && time`theme`;
+    const mediaState = (0, import_useMedia.useMedia)(componentContext, debugProp);
+    (0, import_createVariable.setDidGetVariableValue)(!1), process.env.NODE_ENV === "development" && time && time`media`;
+    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"
+    ), styleProps = {
+      mediaState,
+      noClass,
+      resolveValues,
+      isExiting,
+      isAnimated,
+      willBeAnimated,
+      styledContextProps
+    }, splitStyles = (0, import_getSplitStyles.useSplitStyles)(
+      props,
+      staticConfig,
+      theme,
+      themeState?.state?.name || "",
+      state,
+      styleProps,
+      null,
+      componentContext,
+      elementType,
+      debugProp
+    );
+    props.group && props.untilMeasured === "hide" && !curStateRef.hasMeasured && (splitStyles.style ||= {}, splitStyles.style.opacity = 0), process.env.NODE_ENV === "development" && time && time`split-styles`, curStateRef.isListeningToTheme = splitStyles.dynamicThemeAccess;
+    const hasRuntimeMediaKeys = splitStyles.hasMedia && splitStyles.hasMedia !== !0, shouldListenForMedia = (0, import_createVariable.didGetVariableValue)() || hasRuntimeMediaKeys || noClass && splitStyles.hasMedia === !0, mediaListeningKeys = hasRuntimeMediaKeys ? splitStyles.hasMedia : null;
+    process.env.NODE_ENV === "development" && debugProp === "verbose" && console.info("useMedia() createComponent", shouldListenForMedia, mediaListeningKeys), (0, import_useMedia.setMediaShouldUpdate)(stateRef, shouldListenForMedia, mediaListeningKeys);
+    const {
+      viewProps: viewPropsIn,
+      pseudos,
+      style: splitStylesStyle,
+      classNames,
+      space
+    } = splitStyles, propsWithAnimation = props, {
+      asChild,
+      children,
+      themeShallow,
+      spaceDirection: _spaceDirection,
+      onPress,
+      onLongPress,
+      onPressIn,
+      onPressOut,
+      onHoverIn,
+      onHoverOut,
+      onMouseUp,
+      onMouseDown,
+      onMouseEnter,
+      onMouseLeave,
+      onFocus,
+      onBlur,
+      separator,
+      // ignore from here on out
+      forceStyle: _forceStyle,
+      // @ts-ignore  for next/link compat etc
+      onClick,
+      theme: _themeProp,
+      ...nonTamaguiProps
+    } = viewPropsIn;
+    let viewProps = nonTamaguiProps;
+    !isTaggable && props.forceStyle && (viewProps.forceStyle = props.forceStyle), isHOC && _themeProp && (viewProps.theme = _themeProp), tagProp && elementType.acceptTagProp && (viewProps.tag = tagProp);
+    let animationStyles;
+    if (
+      // if it supports css vars we run it on server too to get matching initial style
+      (supportsCSSVars ? willBeAnimatedClient : willBeAnimated) && useAnimations && !isHOC
+    ) {
+      const animations = useAnimations({
+        props: propsWithAnimation,
+        // if hydrating, send empty style
+        style: splitStylesStyle || {},
+        presence,
+        componentState: state,
+        styleProps,
+        theme: themeState.state?.theme,
+        pseudos: pseudos || null,
+        staticConfig,
+        stateRef
+      });
+      (isAnimated || supportsCSSVars) && animations && (animationStyles = animations.style, viewProps.style = animationStyles, animations.className && (viewProps.className = `${state.unmounted === "should-enter" ? "t_unmounted " : ""}${viewProps.className || ""} ${animations.className}`)), process.env.NODE_ENV === "development" && time && time`animations`;
+    }
+    process.env.NODE_ENV === "development" && props.untilMeasured && !props.group && console.warn(
+      `You set the untilMeasured prop without setting group. This doesn't work, be sure to set untilMeasured on the parent that sets group, not the children that use the $group- prop.
+
+If you meant to do this, you can disable this warning - either change untilMeasured and group at the same time, or do group={conditional ? 'name' : undefined}`
+    ), process.env.NODE_ENV === "development" && time && time`destructure`, groupName && (nonTamaguiProps.onLayout = (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 = import_setupHooks.hooks.usePropsTransform?.(
+      elementType,
+      nonTamaguiProps,
+      stateRef,
+      curStateRef.willHydrate
+    ) || nonTamaguiProps, curStateRef.composedRef || (curStateRef.composedRef = (0, import_compose_refs.composeRefs)(
+      (x) => stateRef.current.host = x,
+      forwardedRef,
+      import_setElementProps.setElementProps
+    )), viewProps.ref = curStateRef.composedRef, process.env.NODE_ENV === "development" && !isReactNative && !isText && import_constants.isWeb && !isHOC && import_react.default.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`;
+    const { pseudoGroups, mediaGroups } = splitStyles, unPress = () => setStateShallow({ press: !1, pressIn: !1 });
+    process.env.NODE_ENV === "development" && import_constants.isWeb && (0, import_constants.useIsomorphicLayoutEffect)(() => {
+      if (debugProp === "verbose") {
+        const computed = function(style) {
+          const styleObject = {};
+          for (let i = 0; i < style.length; i++) {
+            let prop = style[i];
+            styleObject[prop] = style.getPropertyValue(prop);
+          }
+          return styleObject;
+        }(
+          getComputedStyle(stateRef.current.host)
+        );
+        console.groupCollapsed(`Rendered > (opacity: ${computed.opacity})`), console.warn(stateRef.current.host), console.warn(computed), console.groupEnd();
+      }
+    }), import_react.default.useEffect(() => {
+      if (disabled)
+        return;
+      let tm;
+      if (state.unmounted === !0 && hasEnterStyle) {
+        setStateShallow({ unmounted: "should-enter" });
+        return;
+      }
+      if (state.unmounted)
+        return tm = setTimeout(() => {
+          setStateShallow({ unmounted: !1 });
+        }), () => clearTimeout(tm);
+      const dispose = (0, import_subscribeToContextGroup.subscribeToContextGroup)({
+        disabled,
+        componentContext,
+        setStateShallow,
+        state,
+        mediaGroups,
+        pseudoGroups
+      });
+      return () => {
+        clearTimeout(tm), dispose?.(), componentSetStates.delete(setState);
+      };
+    }, [
+      state.unmounted,
+      disabled,
+      pseudoGroups ? Object.keys([...pseudoGroups]).join("") : 0,
+      mediaGroups ? Object.keys([...mediaGroups]).join("") : 0
+    ]);
+    const runtimePressStyle = !disabled && noClass && pseudos?.pressStyle, runtimeFocusStyle = !disabled && noClass && pseudos?.focusStyle, runtimeFocusVisibleStyle = !disabled && noClass && pseudos?.focusVisibleStyle, attachFocus = !!(runtimePressStyle || runtimeFocusStyle || runtimeFocusVisibleStyle || onFocus || onBlur), attachPress = !!(groupName || runtimePressStyle || onPress || onPressOut || onPressIn || onMouseDown || onMouseUp || onLongPress || onClick || pseudos?.focusVisibleStyle), runtimeHoverStyle = !disabled && noClass && pseudos?.hoverStyle, needsHoverState = !!(groupName || runtimeHoverStyle || onHoverIn || onHoverOut), attachHover = import_constants.isWeb && !!(groupName || needsHoverState || onMouseEnter || onMouseLeave), shouldAttach = !disabled && !props.asChild && !!(attachFocus || attachPress || attachHover || runtimePressStyle || runtimeHoverStyle || runtimeFocusStyle), needsPressState = !!(groupName || runtimePressStyle);
+    process.env.NODE_ENV === "development" && time && time`events-setup`, process.env.NODE_ENV === "development" && debugProp === "verbose" && (0, import_log.log)("\u{1FAA9} events()", {
+      runtimeFocusStyle,
+      runtimePressStyle,
+      runtimeHoverStyle,
+      runtimeFocusVisibleStyle,
+      attachPress,
+      attachFocus,
+      attachHover,
+      shouldAttach,
+      needsHoverState
+    });
+    const events = shouldAttach ? {
+      onPressOut: attachPress ? (e) => {
+        unPress(), onPressOut?.(e), onMouseUp?.(e);
+      } : void 0,
+      ...(attachHover || attachPress) && {
+        onMouseEnter: (e) => {
+          const next = {};
+          needsHoverState && (next.hover = !0), needsPressState && state.pressIn && (next.press = !0), setStateShallow(next), onHoverIn?.(e), onMouseEnter?.(e);
+        },
+        onMouseLeave: (e) => {
+          const next = {};
+          needsHoverState && (next.hover = !1), needsPressState && state.pressIn && (next.press = !1, next.pressIn = !1), setStateShallow(next), onHoverOut?.(e), onMouseLeave?.(e);
+        }
+      },
+      onPressIn: attachPress ? (e) => {
+        (runtimePressStyle || groupName) && setStateShallow({
+          press: !0,
+          pressIn: !0
+        }), onPressIn?.(e), onMouseDown?.(e), import_constants.isWeb && componentSetStates.add(setState);
+      } : void 0,
+      onPress: attachPress ? (e) => {
+        unPress(), import_constants.isWeb && onClick?.(e), onPress?.(e), onLongPress?.(e);
+      } : void 0,
+      ...attachFocus && {
+        onFocus: (e) => {
+          pseudos?.focusVisibleStyle ? setTimeout(() => {
+            setStateShallow({
+              focus: !0,
+              focusVisible: !!lastInteractionWasKeyboard.value
+            });
+          }, 0) : setStateShallow({
+            focus: !0,
+            focusVisible: !1
+          }), onFocus?.(e);
+        },
+        onBlur: (e) => {
+          setStateShallow({
+            focus: !1,
+            focusVisible: !1
+          }), onBlur?.(e);
+        }
+      }
+    } : null;
+    events && !isReactNative && Object.assign(viewProps, getWebEvents(events)), process.env.NODE_ENV === "development" && time && time`events`, process.env.NODE_ENV === "development" && debugProp === "verbose" && (0, import_log.log)("events", { events, attachHover, attachPress }), import_setupHooks.hooks.useEvents?.(viewProps, events, splitStyles, setStateShallow, staticConfig);
+    const direction = props.spaceDirection || "both";
+    process.env.NODE_ENV === "development" && time && time`hooks`;
+    let content = !children || asChild ? children : spacedChildren({
+      separator,
+      children,
+      space,
+      direction,
+      isZStack,
+      debug: debugProp
+    });
+    if (asChild) {
+      elementType = import_Slot.Slot;
+      {
+        const passEvents = getWebEvents(
+          {
+            onPress,
+            onLongPress,
+            onPressIn,
+            onPressOut,
+            onMouseUp,
+            onMouseDown,
+            onMouseEnter,
+            onMouseLeave
+          },
+          asChild === "web" || asChild === "except-style-web"
+        );
+        Object.assign(viewProps, passEvents);
+      }
+    }
+    process.env.NODE_ENV === "development" && time && time`spaced-as-child`;
+    let useChildrenResult;
+    import_setupHooks.hooks.useChildren && (useChildrenResult = import_setupHooks.hooks.useChildren(
+      elementType,
+      content,
+      viewProps,
+      events,
+      staticConfig
+    )), useChildrenResult ? content = useChildrenResult : content = import_react.default.createElement(elementType, viewProps, content);
+    const ResetPresence = config?.animations?.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 = curStateRef.group, subGroupContext = import_react.default.useMemo(() => {
+      if (!(!groupState || !groupName))
+        return groupState.listeners.clear(), {
+          ...componentContext.groups,
+          // change reference so as we mutate it doesn't affect siblings etc
+          state: {
+            ...componentContext.groups.state,
+            [groupName]: {
+              pseudo: import_defaultComponentState.defaultComponentStateMounted,
+              // 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)
+              }
+            }
+          },
+          emit: groupState.emit,
+          subscribe: groupState.subscribe
+        };
+    }, [groupName]);
+    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, stateRef), 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 })), isReactNative && !asChild && (content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "span",
+      {
+        className: "_dsp_contents",
+        ...isHydrated && events && getWebEvents(events),
+        children: content
+      }
+    )), staticConfig.context) {
+      const contextProps = staticConfig.context.props;
+      for (const key in contextProps)
+        (viewProps.style && key in viewProps.style || key in viewProps) && (overriddenContextProps ||= {}, overriddenContextProps[key] = viewProps.style?.[key] ?? viewProps[key]);
+    }
+    if (overriddenContextProps) {
+      const Provider = staticConfig.context.Provider;
+      content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Provider, { ...contextValue, ...overriddenContextProps, children: content });
+    }
+    const { rulesToInsert } = splitStyles;
+    if (process.env.TAMAGUI_REACT_19 && (content = (0, import_wrapStyleTags.wrapStyleTags)(Object.values(rulesToInsert), content)), process.env.NODE_ENV === "development" && debugProp && debugProp !== "profile") {
+      const title = `render <${typeof elementType == "string" ? elementType : "Component"} /> (${internalID}) with props`;
+      if (import_constants.isWeb) {
+        console.groupCollapsed(title);
+        try {
+          (0, import_log.log)("viewProps", viewProps), (0, import_log.log)("children", content), typeof window < "u" && (0, import_log.log)({
+            propsIn,
+            props,
+            animationStyles,
+            classNames,
+            content,
+            defaultProps,
+            elementType,
+            events,
+            isAnimated,
+            hasRuntimeMediaKeys,
+            isStringElement,
+            mediaListeningKeys,
+            pseudos,
+            shouldAttach,
+            noClass,
+            shouldListenForMedia,
+            splitStyles,
+            splitStylesStyle,
+            state,
+            stateRef,
+            staticConfig,
+            styleProps,
+            tamaguiConfig,
+            themeState,
+            viewProps,
+            willBeAnimated
+          });
+        } catch {
+        } finally {
+          console.groupEnd();
+        }
+      } else {
+        (0, import_log.log)(title), (0, import_log.log)("state: ", state), import_isDevTools.isDevTools && (0, import_log.log)("viewProps", viewProps), (0, import_log.log)("final styles:");
+        for (const key in splitStylesStyle)
+          (0, import_log.log)(key, splitStylesStyle[key]);
+      }
+      if (debugProp === "break")
+        debugger;
+    }
+    return process.env.NODE_ENV === "development" && time && (time`rest`, globalThis.willPrint || (globalThis.willPrint = !0, setTimeout(() => {
+      delete globalThis.willPrint, time.print(), time = null;
+    }, 50))), content;
+  });
+  staticConfig.componentName && (component.displayName = staticConfig.componentName);
+  let res = component;
+  (process.env.TAMAGUI_FORCE_MEMO || staticConfig.memo) && (res = import_react.default.memo(res)), res.staticConfig = staticConfig;
+  function extendStyledConfig(extended) {
+    return {
+      ...staticConfig,
+      ...extended,
+      neverFlatten: !0,
+      isHOC: !0,
+      isStyledHOC: !1
+    };
+  }
+  function extractable(Component2, extended) {
+    return Component2.staticConfig = extendStyledConfig(extended), Component2.styleable = styleable, Component2;
+  }
+  function styleable(Component2, options) {
+    let out = Component2.render?.length === 2 ? Component2 : import_react.default.forwardRef(Component2);
+    const extendedConfig = extendStyledConfig(options?.staticConfig);
+    return out = options?.disableTheme ? out : (0, import_themeable.themeable)(out, extendedConfig), process.env.TAMAGUI_MEMOIZE_STYLEABLE && (out = import_react.default.memo(out)), out.staticConfig = extendedConfig, out.styleable = styleable, out;
+  }
+  return res.extractable = extractable, res.styleable = styleable, res;
+}
+function getWebEvents(events, webStyle = !0) {
+  return {
+    onMouseEnter: events.onMouseEnter,
+    onMouseLeave: events.onMouseLeave,
+    [webStyle ? "onClick" : "onPress"]: events.onPress,
+    onMouseDown: events.onPressIn,
+    onMouseUp: events.onPressOut,
+    onTouchStart: events.onPressIn,
+    onTouchEnd: events.onPressOut,
+    onFocus: events.onFocus,
+    onBlur: events.onBlur
+  };
+}
+function Unspaced(props) {
+  return props.children;
+}
+Unspaced.isUnspaced = !0;
+const getSpacerSize = (size, { tokens }) => {
+  size = size === !0 ? "$true" : size;
+  const sizePx = tokens.space[size] ?? size;
+  return {
+    width: sizePx,
+    height: sizePx,
+    minWidth: sizePx,
+    minHeight: sizePx
+  };
+}, Spacer = createComponent({
+  acceptsClassName: !0,
+  memo: !0,
+  componentName: "Spacer",
+  validStyles: import_helpers.validStyles,
+  defaultProps: {
+    ...import_constants2.stackDefaultStyles,
+    // avoid nesting issues
+    tag: "span",
+    size: !0,
+    pointerEvents: "none"
+  },
+  variants: {
+    size: {
+      "...": getSpacerSize
+    },
+    flex: {
+      true: {
+        flexGrow: 1
+      }
+    },
+    direction: {
+      horizontal: {
+        height: 0,
+        minHeight: 0
+      },
+      vertical: {
+        width: 0,
+        minWidth: 0
+      },
+      both: {}
+    }
+  }
+});
+function spacedChildren(props) {
+  const { isZStack, children, space, direction, spaceFlex, separator, ensureKeys } = props, hasSpace = !!(space || spaceFlex), hasSeparator = separator != null, areChildrenArray = Array.isArray(children);
+  if (!ensureKeys && !(hasSpace || hasSeparator || isZStack))
+    return children;
+  const childrenList = areChildrenArray ? children : import_react.default.Children.toArray(children);
+  if (childrenList.length <= 1 && !isZStack && !childrenList[0]?.type?.shouldForwardSpace)
+    return children;
+  const final = [];
+  for (let [index, child] of childrenList.entries()) {
+    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.default.Fragment, { children: isZStack ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AbsoluteFill, { children: child }) : child }, `${index}0t`)
+    ), isUnspaced(child) && index === 0 || isZStack) continue;
+    const next = childrenList[index + 1];
+    next && !isEmpty && !isUnspaced(next) && (separator ? (hasSpace && final.push(
+      createSpacer({
+        key: `_${index}_00t`,
+        direction,
+        space,
+        spaceFlex
+      })
+    ), final.push(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.default.Fragment, { children: separator }, `${index}03t`)), hasSpace && final.push(
+      createSpacer({
+        key: `_${index}01t`,
+        direction,
+        space,
+        spaceFlex
+      })
+    )) : final.push(
+      createSpacer({
+        key: `_${index}02t`,
+        direction,
+        space,
+        spaceFlex
+      })
+    ));
+  }
+  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__ */ (0, import_jsx_runtime.jsx)(
+    Spacer,
+    {
+      size: space,
+      direction,
+      ...typeof spaceFlex < "u" && {
+        flex: spaceFlex === !0 ? 1 : spaceFlex === !1 ? 0 : spaceFlex
+      }
+    },
+    key
+  );
+}
+function isUnspaced(child) {
+  const t = child?.type;
+  return t?.isVisuallyHidden || t?.isUnspaced;
+}
+const AbsoluteFill = createComponent({
+  defaultProps: {
+    ...import_constants2.stackDefaultStyles,
+    flexDirection: "column",
+    position: "absolute",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    pointerEvents: "box-none"
+  }
+}), fromPx = (val) => typeof val != "string" ? val : +val.replace("px", "");
+//# sourceMappingURL=createComponent.js.map