@tamagui/web 1.61.2 → 1.62.0

package/dist/esm/createComponent.js

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