@tamagui/web 1.114.4 → 1.115.0

package/dist/cjs/{createComponent.js → createComponent.cjs}

@@ -2,24 +2,33 @@ 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 __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;
-};
+    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);
+  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,
@@ -29,43 +38,74 @@ __export(createComponent_exports, {
   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");
+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.cjs"),
+  import_constants2 = require("./constants/constants.cjs"),
+  import_isDevTools = require("./constants/isDevTools.cjs"),
+  import_ComponentContext = require("./contexts/ComponentContext.cjs"),
+  import_createVariable = require("./createVariable.cjs"),
+  import_defaultComponentState = require("./defaultComponentState.cjs"),
+  import_getSplitStyles = require("./helpers/getSplitStyles.cjs"),
+  import_log = require("./helpers/log.cjs"),
+  import_mergeProps = require("./helpers/mergeProps.cjs"),
+  import_setElementProps = require("./helpers/setElementProps.cjs"),
+  import_subscribeToContextGroup = require("./helpers/subscribeToContextGroup.cjs"),
+  import_themeable = require("./helpers/themeable.cjs"),
+  import_wrapStyleTags = require("./helpers/wrapStyleTags.cjs"),
+  import_useComponentState = require("./hooks/useComponentState.cjs"),
+  import_useMedia = require("./hooks/useMedia.cjs"),
+  import_useTheme = require("./hooks/useTheme.cjs"),
+  import_setupHooks = require("./setupHooks.cjs"),
+  import_Slot = require("./views/Slot.cjs"),
+  import_Theme = require("./views/Theme.cjs"),
+  import_ThemeDebug = require("./views/ThemeDebug.cjs"),
+  import_jsx_runtime = require("react/jsx-runtime");
 let tamaguiConfig, time, debugKeyListeners, startVisualizer;
-const componentSetStates = /* @__PURE__ */ new Set();
+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();
+    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;
+      debugKeyListeners = /* @__PURE__ */new Set();
+      let tm,
+        isShowing = !1;
       const options = {
         key: "Alt",
         delay: 800,
-        ...typeof devVisualizerConfig == "object" ? devVisualizerConfig : {}
+        ...(typeof devVisualizerConfig == "object" ? devVisualizerConfig : {})
       };
       document.addEventListener("blur", () => {
         clearTimeout(tm);
-      }), document.addEventListener("keydown", ({ key, defaultPrevented }) => {
+      }), document.addEventListener("keydown", ({
+        key,
+        defaultPrevented
+      }) => {
         defaultPrevented || (clearTimeout(tm), key === options.key && (tm = setTimeout(() => {
-          isShowing = !0, debugKeyListeners?.forEach((l) => l(!0));
+          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)));
+      }), document.addEventListener("keyup", ({
+        key,
+        defaultPrevented
+      }) => {
+        defaultPrevented || key === options.key && (clearTimeout(tm), isShowing && debugKeyListeners?.forEach(l => l(!1)));
       });
     }
   });
 }
 let BaseText, BaseView;
-const lastInteractionWasKeyboard = { value: !1 };
+const lastInteractionWasKeyboard = {
+  value: !1
+};
 import_constants.isWeb && globalThis.document && (document.addEventListener("keydown", () => {
   lastInteractionWasKeyboard.value = !0;
 }), document.addEventListener("mousedown", () => {
@@ -74,15 +114,26 @@ import_constants.isWeb && globalThis.document && (document.addEventListener("key
   lastInteractionWasKeyboard.value = !1;
 }));
 function createComponent(staticConfig) {
-  const { componentName } = staticConfig;
-  let config = null, defaultProps = staticConfig.defaultProps;
-  (0, import_config.onConfiguredOnce)((conf) => {
+  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 });
+      defaultForComponent && (defaultProps = {
+        ...defaultForComponent,
+        ...defaultProps
+      });
     }
   });
-  const { Component, isText, isZStack, isHOC } = staticConfig;
+  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,
@@ -93,7 +144,10 @@ function createComponent(staticConfig) {
     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;
+    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) {
@@ -106,50 +160,60 @@ function createComponent(staticConfig) {
         finalVal !== void 0 && (overriddenContextProps ||= {}, overriddenContextProps[key] = finalVal);
       }
     }
-    const curDefaultProps = styledContextProps ? { ...defaultProps, ...styledContextProps } : defaultProps;
+    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;
+    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);
+        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), () => {
+      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,
-      shouldAvoidClasses,
-      state,
-      stateRef,
-      supportsCSSVars,
-      willBeAnimated,
-      willBeAnimatedClient
-    } = (0, import_useComponentState.useComponentState)(props, componentContext, staticConfig, config), shouldForcePseudo = !!propsIn.forceStyle, noClassNames = shouldAvoidClasses || shouldForcePseudo;
+    const animationDriver = componentContext.animationDriver,
+      useAnimations = animationDriver?.useAnimations,
+      {
+        curStateRef,
+        disabled,
+        groupName,
+        hasAnimationProp,
+        hasEnterStyle,
+        isAnimated,
+        isExiting,
+        isHydrated,
+        presence,
+        presenceState,
+        setState,
+        setStateShallow,
+        shouldAvoidClasses,
+        state,
+        stateRef,
+        supportsCSSVars,
+        willBeAnimated,
+        willBeAnimatedClient
+      } = (0, import_useComponentState.useComponentState)(props, componentContext, staticConfig, config),
+      shouldForcePseudo = !!propsIn.forceStyle,
+      noClassNames = shouldAvoidClasses || shouldForcePseudo;
     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;
+    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;
@@ -161,17 +225,35 @@ function createComponent(staticConfig) {
       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)" : " ") + (shouldAvoidClasses ? "(shouldAvoidClasses)" : " ") + (state.press || state.pressIn ? "(PRESSED)" : " ") + (state.hover ? "(HOVERED)" : " ") + (state.focus ? "(FOCUSED)" : " ") + (presenceState?.isPresent === !1 ? "(EXIT)" : ""), dataIs = propsIn["data-is"] || "", banner = `${internalID} ${name}${dataIs ? ` ${dataIs}` : ""} ${type}`;
-      if (console.info(
-        `%c ${banner} (hydrated: ${isHydrated}) (unmounted: ${state.unmounted})`,
-        "background: green; color: white;"
-      ), import_constants.isServer)
-        (0, import_log.log)({ noClassNames, isAnimated, shouldAvoidClasses, isWeb: import_constants.isWeb, supportsCSSVars });
-      else {
+      const name = `${componentName2 || Component?.displayName || Component?.name || "[Unnamed Component]"}`,
+        type = (hasEnterStyle ? "(hasEnter)" : " ") + (isAnimated ? "(animated)" : " ") + (isReactNative ? "(rnw)" : " ") + (shouldAvoidClasses ? "(shouldAvoidClasses)" : " ") + (state.press || state.pressIn ? "(PRESSED)" : " ") + (state.hover ? "(HOVERED)" : " ") + (state.focus ? "(FOCUSED)" : " ") + (presenceState?.isPresent === !1 ? "(EXIT)" : ""),
+        dataIs = propsIn["data-is"] || "",
+        banner = `${internalID} ${name}${dataIs ? ` ${dataIs}` : ""} ${type}`;
+      if (console.info(`%c ${banner} (hydrated: ${isHydrated}) (unmounted: ${state.unmounted})`, "background: green; color: white;"), import_constants.isServer) (0, import_log.log)({
+        noClassNames,
+        isAnimated,
+        shouldAvoidClasses,
+        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();
+        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`;
@@ -181,70 +263,63 @@ function createComponent(staticConfig) {
     process.env.NODE_ENV === "development" && time && time`theme`;
     const mediaState = (0, import_useMedia.useMedia)(stateRef, componentContext, debugProp);
     (0, import_createVariable.setDidGetVariableValue)(!1), process.env.NODE_ENV === "development" && time && time`media`;
-    const resolveValues = (
+    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,
-      noClassNames,
-      resolveValues,
-      isExiting,
-      isAnimated,
-      willBeAnimated,
-      styledContextProps
-    }, splitStyles = (0, import_getSplitStyles.useSplitStyles)(
-      props,
-      staticConfig,
-      theme,
-      themeState?.state?.name || "",
-      state,
-      styleProps,
-      null,
-      componentContext,
-      elementType,
-      debugProp
-    );
+      isAnimated && !supportsCSSVars || isHOC && state.unmounted == !1 && hasAnimationProp ? "value" : "auto",
+      styleProps = {
+        mediaState,
+        noClassNames,
+        resolveValues,
+        isExiting,
+        isAnimated,
+        willBeAnimated,
+        styledContextProps
+      },
+      splitStyles = (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 || noClassNames && splitStyles.hasMedia === !0, mediaListeningKeys = hasRuntimeMediaKeys ? splitStyles.hasMedia : null;
+    const hasRuntimeMediaKeys = splitStyles.hasMedia && splitStyles.hasMedia !== !0,
+      shouldListenForMedia = (0, import_createVariable.didGetVariableValue)() || hasRuntimeMediaKeys || noClassNames && 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;
+        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
-    ) {
+    // 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
@@ -259,59 +334,55 @@ function createComponent(staticConfig) {
       });
       (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.
+    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) => {
+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>.`
-      );
+` && 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 });
+    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 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)
-        );
+        }(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;
+      if (disabled) return;
       if (state.unmounted === !0 && hasEnterStyle) {
-        setStateShallow({ unmounted: "should-enter" });
+        setStateShallow({
+          unmounted: "should-enter"
+        });
         return;
       }
       let tm;
       if (state.unmounted) {
         animationDriver?.supportsCSSVars ? tm = setTimeout(() => {
-          setStateShallow({ unmounted: !1 });
-        }) : setStateShallow({ unmounted: !1 });
+          setStateShallow({
+            unmounted: !1
+          });
+        }) : setStateShallow({
+          unmounted: !1
+        });
         return;
       }
       const dispose = (0, import_subscribeToContextGroup.subscribeToContextGroup)({
@@ -325,13 +396,17 @@ If you meant to do this, you can disable this warning - either change untilMeasu
       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 && noClassNames && pseudos?.pressStyle, runtimeFocusStyle = !disabled && noClassNames && pseudos?.focusStyle, runtimeFocusVisibleStyle = !disabled && noClassNames && pseudos?.focusVisibleStyle, attachFocus = !!(runtimePressStyle || runtimeFocusStyle || runtimeFocusVisibleStyle || onFocus || onBlur), attachPress = !!(groupName || runtimePressStyle || onPress || onPressOut || onPressIn || onMouseDown || onMouseUp || onLongPress || onClick || pseudos?.focusVisibleStyle), runtimeHoverStyle = !disabled && noClassNames && pseudos?.hoverStyle, needsHoverState = !!(groupName || runtimeHoverStyle || onHoverIn || onHoverOut), attachHover = import_constants.isWeb && !!(groupName || needsHoverState || onMouseEnter || onMouseLeave), shouldAttach = !disabled && !props.asChild && !!(attachFocus || attachPress || attachHover || runtimePressStyle || runtimeHoverStyle || runtimeFocusStyle), needsPressState = !!(groupName || runtimePressStyle);
+    }, [state.unmounted, disabled, pseudoGroups ? Object.keys([...pseudoGroups]).join("") : 0, mediaGroups ? Object.keys([...mediaGroups]).join("") : 0]);
+    const runtimePressStyle = !disabled && noClassNames && pseudos?.pressStyle,
+      runtimeFocusStyle = !disabled && noClassNames && pseudos?.focusStyle,
+      runtimeFocusVisibleStyle = !disabled && noClassNames && pseudos?.focusVisibleStyle,
+      attachFocus = !!(runtimePressStyle || runtimeFocusStyle || runtimeFocusVisibleStyle || onFocus || onBlur),
+      attachPress = !!(groupName || runtimePressStyle || onPress || onPressOut || onPressIn || onMouseDown || onMouseUp || onLongPress || onClick || pseudos?.focusVisibleStyle),
+      runtimeHoverStyle = !disabled && noClassNames && pseudos?.hoverStyle,
+      needsHoverState = !!(groupName || runtimeHoverStyle || onHoverIn || onHoverOut),
+      attachHover = 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,
@@ -344,30 +419,30 @@ If you meant to do this, you can disable this warning - either change untilMeasu
       needsHoverState
     });
     const events = shouldAttach ? {
-      onPressOut: attachPress ? (e) => {
+      onPressOut: attachPress ? e => {
         unPress(), onPressOut?.(e), onMouseUp?.(e);
       } : void 0,
-      ...(attachHover || attachPress) && {
-        onMouseEnter: (e) => {
+      ...((attachHover || attachPress) && {
+        onMouseEnter: e => {
           const next = {};
           needsHoverState && (next.hover = !0), needsPressState && state.pressIn && (next.press = !0), setStateShallow(next), onHoverIn?.(e), onMouseEnter?.(e);
         },
-        onMouseLeave: (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) => {
+      }),
+      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) => {
+      onPress: attachPress ? e => {
         unPress(), import_constants.isWeb && onClick?.(e), onPress?.(e), onLongPress?.(e);
       } : void 0,
-      ...attachFocus && {
-        onFocus: (e) => {
+      ...(attachFocus && {
+        onFocus: e => {
           pseudos?.focusVisibleStyle ? setTimeout(() => {
             setStateShallow({
               focus: !0,
@@ -378,15 +453,19 @@ If you meant to do this, you can disable this warning - either change untilMeasu
             focusVisible: !1
           }), onFocus?.(e);
         },
-        onBlur: (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);
+    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({
@@ -400,36 +479,29 @@ If you meant to do this, you can disable this warning - either change untilMeasu
     if (asChild) {
       elementType = import_Slot.Slot;
       {
-        const passEvents = getWebEvents(
-          {
-            onPress,
-            onLongPress,
-            onPressIn,
-            onPressOut,
-            onMouseUp,
-            onMouseDown,
-            onMouseEnter,
-            onMouseLeave
-          },
-          asChild === "web" || asChild === "except-style-web"
-        );
+        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);
+    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(), {
+    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: {
@@ -447,24 +519,34 @@ If you meant to do this, you can disable this warning - either change untilMeasu
           emit: groupState.emit,
           subscribe: groupState.subscribe
         };
-    }, [groupName]);
-    if (groupName && subGroupContext && (content = /* @__PURE__ */ (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) {
+      }, [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]);
+      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 });
+      content = /* @__PURE__ */(0, import_jsx_runtime.jsx)(Provider, {
+        ...contextValue,
+        ...overriddenContextProps,
+        children: content
+      });
     }
-    const { rulesToInsert } = splitStyles;
+    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) {
@@ -499,17 +581,14 @@ If you meant to do this, you can disable this warning - either change untilMeasu
             viewProps,
             willBeAnimated
           });
-        } catch {
-        } finally {
+        } 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]);
+        for (const key in splitStylesStyle) (0, import_log.log)(key, splitStylesStyle[key]);
       }
-      if (debugProp === "break")
-        debugger;
+      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;
@@ -554,56 +633,68 @@ 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"
+const getSpacerSize = (size, {
+    tokens
+  }) => {
+    size = size === !0 ? "$true" : size;
+    const sizePx = tokens.space[size] ?? size;
+    return {
+      width: sizePx,
+      height: sizePx,
+      minWidth: sizePx,
+      minHeight: sizePx
+    };
   },
-  variants: {
-    size: {
-      "...": getSpacerSize
-    },
-    flex: {
-      true: {
-        flexGrow: 1
-      }
+  Spacer = createComponent({
+    acceptsClassName: !0,
+    memo: !0,
+    componentName: "Spacer",
+    validStyles: import_helpers.validStyles,
+    defaultProps: {
+      ...import_constants2.stackDefaultStyles,
+      // avoid nesting issues
+      tag: "span",
+      size: !0,
+      pointerEvents: "none"
     },
-    direction: {
-      horizontal: {
-        height: 0,
-        minHeight: 0
+    variants: {
+      size: {
+        "...": getSpacerSize
       },
-      vertical: {
-        width: 0,
-        minWidth: 0
+      flex: {
+        true: {
+          flexGrow: 1
+        }
       },
-      both: {}
+      direction: {
+        horizontal: {
+          height: 0,
+          minHeight: 0
+        },
+        vertical: {
+          width: 0,
+          minWidth: 0
+        },
+        both: {}
+      }
     }
-  }
-});
+  });
 function spacedChildren(props) {
-  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 {
+      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;
+  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;
@@ -612,62 +703,61 @@ function spacedChildren(props) {
       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;
+    })), 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
-      })
-    ));
+    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 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
+    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", "");