@tamagui/core 1.0.1-beta.98 → 1.0.1-rc.0

package/dist/esm/createComponent.js

@@ -1,42 +1,13 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-import { composeEventHandlers, stylePropsView, validStyles } from "@tamagui/helpers";
+import { jsx } from "react/jsx-runtime";
+import { useComposedRefs } from "@tamagui/compose-refs";
+import { isClient, isRSC, isServer, isWeb, useIsomorphicLayoutEffect } from "@tamagui/constants";
 import {
-  useElementLayout,
-  useMergeRefs,
-  usePlatformMethods,
-  useResponderEvents
-} from "@tamagui/rnw";
-import { useForceUpdate } from "@tamagui/use-force-update";
+  composeEventHandlers,
+  stylePropsView,
+  validPseudoKeys,
+  validStyles
+} from "@tamagui/helpers";
+import { useResponderEvents } from "@tamagui/react-native-use-responder-events";
 import React, {
   Children,
   Fragment,
@@ -45,145 +16,250 @@ import React, {
   memo,
   useCallback,
   useContext,
-  useMemo,
-  useRef,
-  useState
+  useEffect,
+  useRef
 } from "react";
-import { StyleSheet, Text, View } from "react-native";
-import { getConfig, onConfiguredOnce } from "./conf";
+import { onConfiguredOnce } from "./config";
 import { stackDefaultStyles } from "./constants/constants";
-import { isWeb, useIsomorphicLayoutEffect } from "./constants/platform";
-import { assignNativePropsToWeb } from "./helpers/assignNativePropsToWeb";
-import { getReturnVariablesAs } from "./helpers/createPropMapper";
-import { createShallowUpdate } from "./helpers/createShallowUpdate";
+import { FontLanguageContext } from "./contexts/FontLanguageContext";
+import { TextAncestorContext } from "./contexts/TextAncestorContext";
 import { extendStaticConfig, parseStaticConfig } from "./helpers/extendStaticConfig";
-import { insertSplitStyles, useSplitStyles } from "./helpers/getSplitStyles";
+import { getRect } from "./helpers/getRect";
+import { useSplitStyles } from "./helpers/getSplitStyles";
 import { getAllSelectors } from "./helpers/insertStyleRule";
 import { mergeProps } from "./helpers/mergeProps";
 import { proxyThemeVariables } from "./helpers/proxyThemeVariables";
-import { wrapThemeManagerContext } from "./helpers/wrapThemeManagerContext";
-import { useFeatures } from "./hooks/useFeatures";
-import { useIsTouchDevice } from "./hooks/useIsTouchDevice";
-import { mediaState } from "./hooks/useMedia";
-import { usePressable } from "./hooks/usePressable";
-import { getThemeManagerIfChanged, useTheme } from "./hooks/useTheme";
-import { Pressability } from "./Pressability";
+import { useShallowSetState } from "./helpers/useShallowSetState";
+import { measureLayout, useElementLayout } from "./hooks/useElementLayout";
+import { addMediaQueryListener, getInitialMediaState } from "./hooks/useMedia";
+import { useServerRef, useServerState } from "./hooks/useServerHooks";
+import { getThemeIsNewTheme, getThemeManager, useTheme } from "./hooks/useTheme";
+import { usePressability } from "./vendor/Pressability";
 import { Slot, mergeEvent } from "./views/Slot";
-import { TextAncestorContext } from "./views/TextAncestorContext";
-React["keep"];
-const defaultComponentState = Object.freeze({
-  hover: false,
-  press: false,
-  pressIn: false,
-  focus: false,
-  mounted: false,
-  animation: null
-});
+import { wrapThemeManagerContext } from "./views/Theme";
+process.env.TAMAGUI_TARGET;
+let defaultComponentState = null;
+let defaultComponentStateMounted = null;
+let tamaguiConfig;
+let AnimatedText;
+let AnimatedView;
+let initialTheme;
 const mouseUps = /* @__PURE__ */ new Set();
 if (typeof document !== "undefined") {
-  document.addEventListener("mouseup", () => {
-    mouseUps.forEach((x) => x());
-    mouseUps.clear();
-  });
-  document.addEventListener("touchend", () => {
-    mouseUps.forEach((x) => x());
-    mouseUps.clear();
-  });
-  document.addEventListener("touchcancel", () => {
+  const cancelTouches = () => {
     mouseUps.forEach((x) => x());
     mouseUps.clear();
-  });
+  };
+  addEventListener("mouseup", cancelTouches);
+  addEventListener("touchend", cancelTouches);
+  addEventListener("touchcancel", cancelTouches);
 }
 function mergeShorthands({ defaultProps }, { shorthands }) {
-  for (const key in defaultProps) {
+  for (const key of Object.keys(defaultProps)) {
     defaultProps[shorthands[key] || key] = defaultProps[key];
   }
 }
-let initialTheme;
+let BaseText;
+let BaseView;
+if (process.env.TAMAGUI_TARGET === "native") {
+  const native = require("react-native");
+  BaseText = native.Text || native.default.Text;
+  BaseView = native.View || native.default.View;
+}
 function createComponent(configIn, ParentComponent) {
   const staticConfig = (() => {
-    const config = extendStaticConfig(configIn, ParentComponent);
-    if ("parsed" in config) {
-      return config;
+    const next = extendStaticConfig(configIn, ParentComponent);
+    if ("parsed" in next) {
+      return next;
     } else {
-      return parseStaticConfig(config);
+      return parseStaticConfig(next);
     }
   })();
   const defaultComponentClassName = `is_${staticConfig.componentName}`;
-  let tamaguiConfig;
-  let AnimatedText;
-  let AnimatedView;
-  let avoidClasses = true;
   let defaultNativeStyle;
-  let defaultNativeStyleSheet;
   let tamaguiDefaultProps;
-  let initialSplitStyles;
+  let defaultTag;
   const component = forwardRef((propsIn, forwardedRef) => {
-    var _a, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g;
     let props;
     if (tamaguiDefaultProps && !propsIn.asChild) {
       props = mergeProps(tamaguiDefaultProps, propsIn)[0];
     } else {
       props = propsIn;
     }
-    const hostRef = useRef(null);
+    const debugProp = props["debug"];
     const { Component, isText, isZStack } = staticConfig;
     const componentName = props.componentName || staticConfig.componentName;
     const componentClassName = props.asChild ? "" : props.componentName ? `is_${props.componentName}` : defaultComponentClassName;
+    const animationsConfig = tamaguiConfig.animations;
+    const useAnimations = animationsConfig == null ? void 0 : animationsConfig.useAnimations;
+    const avoidClassesWhileAnimating = animationsConfig.isReactNative;
+    const hasEnterStyle = !!props.enterStyle;
+    const needsMount = Boolean((isWeb ? isClient : true) && (hasEnterStyle || props.animation));
+    const states = useServerState(
+      needsMount ? defaultComponentState : defaultComponentStateMounted
+    );
+    const state = propsIn.forceStyle ? { ...states[0], [propsIn.forceStyle]: true } : states[0];
+    const setState = states[1];
+    const setStateShallow = useShallowSetState(setState, debugProp, componentName);
+    const stateRef = useRef(
+      void 0
+    );
+    stateRef.current ??= {};
+    const isAnimated = (() => {
+      const next = !!(useAnimations && props.animation);
+      if (next && !stateRef.current.hasAnimated) {
+        stateRef.current.hasAnimated = true;
+      }
+      return next || stateRef.current.hasAnimated;
+    })();
+    const usePresence = (_a = tamaguiConfig.animations) == null ? void 0 : _a.usePresence;
+    const presence = !isRSC && isAnimated ? usePresence() : null;
+    if (isAnimated && presence) {
+      const presenceState = presence[2];
+      if (presenceState) {
+        if (state.unmounted && presenceState.enterVariant) {
+          props[presenceState.enterVariant] = true;
+        }
+        if (!presenceState.isPresent && presenceState.exitVariant) {
+          props[presenceState.exitVariant] = true;
+        }
+      }
+    }
+    const isReactNative = Boolean(
+      staticConfig.isReactNative || isAnimated && tamaguiConfig.animations.isReactNative
+    );
     if (process.env.NODE_ENV === "development") {
-      if (props["debug"]) {
+      if (debugProp) {
         const name = `${componentName || (Component == null ? void 0 : Component.displayName) || (Component == null ? void 0 : Component.name) || "[Unnamed Component]"}`;
-        const banner = `${name} ${propsIn["data-is"] || ""}`;
-        console.group(`%c \u{1F41B} ${banner}`, "background: yellow;");
-        console.log("props", propsIn);
-        console.log("ref", hostRef);
-        if (props["debug"] === "break") {
-          debugger;
+        const type = isReactNative ? "(rnw)" : "";
+        const dataIs = propsIn["data-is"] || "";
+        const banner = `${name}${dataIs ? ` ${dataIs}` : ""} ${type}`;
+        console.group(`%c ${banner}`, "background: yellow;");
+        if (!isServer) {
+          console.log(`state`, state);
         }
       }
     }
-    const forceUpdate = useForceUpdate();
-    const theme = useTheme(props.theme, componentName, props, forceUpdate);
-    const statesUsed = useState(defaultComponentState);
-    const setStateShallow = createShallowUpdate(statesUsed[1]);
-    let state = statesUsed[0];
-    if (propsIn.forceStyle) {
-      state = __spreadProps(__spreadValues({}, state), {
-        [propsIn.forceStyle]: true
-      });
-    }
-    const shouldAvoidClasses = !!(props.animation && avoidClasses);
+    const shouldAvoidClasses = !isWeb || !!(props.animation && avoidClassesWhileAnimating) || !staticConfig.acceptsClassName;
     const shouldForcePseudo = !!propsIn.forceStyle;
-    const hasTextAncestor = !!(isWeb ? useContext(TextAncestorContext) : false);
-    const splitStyleState = !shouldAvoidClasses && !shouldForcePseudo ? __spreadProps(__spreadValues({}, state), {
-      hasTextAncestor,
-      dynamicStylesInline: true
-    }) : __spreadProps(__spreadValues({}, state), {
-      noClassNames: true,
-      dynamicStylesInline: true,
-      hasTextAncestor,
-      resolveVariablesAs: "value"
+    const noClassNames = shouldAvoidClasses || shouldForcePseudo;
+    const theme = useTheme({
+      name: props.theme,
+      componentName,
+      reset: props.reset,
+      inverse: props.themeInverse,
+      disable: props["data-themeable"],
+      debug: props.debug
     });
-    const splitStyles = useSplitStyles(props, staticConfig, theme, splitStyleState, props.asChild ? null : initialSplitStyles.classNames, props["debug"]);
-    const { viewProps: viewPropsIn, pseudos, medias, style, classNames } = splitStyles;
-    const useAnimations = (_a = tamaguiConfig.animations) == null ? void 0 : _a.useAnimations;
-    const isAnimated = !!(useAnimations && props.animation);
-    const hasEnterStyle = !!props.enterStyle;
-    const animationFeatureStylesIn = props.animation ? __spreadValues(__spreadValues({}, defaultNativeStyle), style) : null;
-    const features = useFeatures(props, {
-      forceUpdate,
-      setStateShallow,
-      useAnimations,
-      state,
-      style: animationFeatureStylesIn,
-      pseudos,
+    const themeManager = getThemeManager(theme);
+    const themeIsNew = getThemeIsNewTheme(theme);
+    const shouldSetMounted = needsMount && state.unmounted;
+    const setMounted = shouldSetMounted ? () => {
+      setTimeout(
+        () => {
+          setStateShallow({
+            unmounted: false
+          });
+        },
+        isWeb ? 10 : 0
+      );
+    } : void 0;
+    const hasTextAncestor = !!(isWeb && isText ? useContext(TextAncestorContext) : false);
+    const languageContext = isRSC ? null : useContext(FontLanguageContext);
+    const isDisabled = props.disabled ?? ((_b = props.accessibilityState) == null ? void 0 : _b.disabled);
+    const isTaggable = !Component || typeof Component === "string";
+    const element = isWeb ? isTaggable ? props.tag || defaultTag || Component : Component : Component;
+    const BaseTextComponent = BaseText || element || "span";
+    const BaseViewComponent = BaseView || element || (hasTextAncestor ? "span" : "div");
+    let elementType = isText ? (isAnimated ? AnimatedText : null) || BaseTextComponent : (isAnimated ? AnimatedView : null) || BaseViewComponent;
+    elementType = Component || elementType;
+    const isStringElement = typeof elementType === "string";
+    const isExiting = (presence == null ? void 0 : presence[0]) === false;
+    const splitStyles = useSplitStyles(
+      props,
       staticConfig,
       theme,
-      hostRef,
-      onDidAnimate: props.onDidAnimate
-    });
-    const _b = viewPropsIn, {
-      tag,
+      {
+        ...state,
+        noClassNames,
+        dynamicStylesInline: noClassNames,
+        hasTextAncestor,
+        resolveVariablesAs: "value",
+        isExiting
+      },
+      null,
+      languageContext || void 0,
+      elementType,
+      debugProp
+    );
+    const hostRef = useServerRef(null);
+    const isAnimatedReactNativeWeb = isAnimated && avoidClassesWhileAnimating;
+    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) {
+        console.groupCollapsed("props");
+        console.log("props in", propsIn, "mapped to", props, "in order", Object.keys(props));
+        console.log("splitStyles", splitStyles);
+        console.log("className", Object.values(splitStyles.classNames));
+        if (isClient) {
+          console.log("ref", hostRef, "(click to view)");
+        }
+        console.groupEnd();
+        if (debugProp === "break") {
+          debugger;
+        }
+      }
+    }
+    const {
+      viewProps: viewPropsIn,
+      pseudos,
+      medias,
+      style: splitStylesStyle,
+      classNames,
+      mediaKeys
+    } = splitStyles;
+    const propsWithAnimation = props;
+    let animationStyles;
+    if (!isRSC && isAnimated && useAnimations) {
+      const animations = useAnimations({
+        props: propsWithAnimation,
+        style: splitStylesStyle,
+        presence,
+        state,
+        pseudos,
+        onDidAnimate: props.onDidAnimate,
+        hostRef,
+        staticConfig
+      });
+      if (animations) {
+        animationStyles = animations.style;
+      }
+    }
+    useIsomorphicLayoutEffect(() => {
+      const disposers = mediaKeys.map((key) => {
+        return addMediaQueryListener(key, (next) => {
+          setState((prev) => {
+            if (prev.mediaState[key] !== next) {
+              return {
+                ...prev,
+                mediaState: getMediaStateObject({
+                  ...prev.mediaState,
+                  [key]: next
+                })
+              };
+            }
+            return prev;
+          });
+        });
+      });
+      return () => {
+        disposers.forEach((d) => d());
+      };
+    }, [mediaKeys.join(",")]);
+    const {
       hitSlop,
       asChild,
       children,
@@ -192,6 +268,7 @@ function createComponent(configIn, ParentComponent) {
       onPressOut,
       onHoverIn,
       onHoverOut,
+      themeShallow,
       space: spaceProp,
       spaceDirection: _spaceDirection,
       disabled: disabledProp,
@@ -204,42 +281,13 @@ function createComponent(configIn, ParentComponent) {
       forceStyle: _forceStyle,
       onClick,
       theme: _themeProp,
-      defaultVariants
-    } = _b, nonTamaguiProps = __objRest(_b, [
-      "tag",
-      "hitSlop",
-      "asChild",
-      "children",
-      "onPress",
-      "onPressIn",
-      "onPressOut",
-      "onHoverIn",
-      "onHoverOut",
-      "space",
-      "spaceDirection",
-      "disabled",
-      "onMouseUp",
-      "onMouseDown",
-      "onMouseEnter",
-      "onMouseLeave",
-      "hrefAttrs",
-      "separator",
-      "forceStyle",
-      "onClick",
-      "theme",
-      "defaultVariants"
-    ]);
-    const isTaggable = !Component || typeof Component === "string";
-    const element = isWeb ? isTaggable ? tag || Component : Component : Component;
-    const BaseTextComponent = !isWeb ? Text : element || "span";
-    const BaseViewComponent = !isWeb ? View : element || (hasTextAncestor ? "span" : "div");
-    let elementType = isText ? (isAnimated ? AnimatedText || Text : null) || BaseTextComponent : (isAnimated ? AnimatedView || View : null) || BaseViewComponent;
-    elementType = Component || elementType;
-    const isStringElement = typeof elementType === "string";
+      defaultVariants,
+      ...nonTamaguiProps
+    } = viewPropsIn;
     const disabled = props.accessibilityState != null && props.accessibilityState.disabled === true || props.accessibilityDisabled;
     let viewProps;
-    if (process.env.TAMAGUI_TARGET === "web" && !staticConfig.isReactNativeWeb) {
-      const _c = nonTamaguiProps, {
+    if (process.env.TAMAGUI_TARGET === "web" && !isReactNative) {
+      const {
         onMoveShouldSetResponder,
         onMoveShouldSetResponderCapture,
         onResponderEnd,
@@ -256,154 +304,36 @@ function createComponent(configIn, ParentComponent) {
         onSelectionChangeShouldSetResponderCapture,
         onStartShouldSetResponder,
         onStartShouldSetResponderCapture,
-        nativeID,
-        accessibilityActiveDescendant,
-        accessibilityAtomic,
-        accessibilityAutoComplete,
-        accessibilityBusy,
-        accessibilityChecked,
-        accessibilityColumnCount,
-        accessibilityColumnIndex,
-        accessibilityColumnSpan,
-        accessibilityControls,
-        accessibilityCurrent,
-        accessibilityDescribedBy,
-        accessibilityDetails,
-        accessibilityDisabled,
-        accessibilityErrorMessage,
-        accessibilityExpanded,
-        accessibilityFlowTo,
-        accessibilityHasPopup,
-        accessibilityHidden,
-        accessibilityInvalid,
-        accessibilityKeyShortcuts,
-        accessibilityLabel,
-        accessibilityLabelledBy,
-        accessibilityLevel,
-        accessibilityLiveRegion,
-        accessibilityModal,
-        accessibilityMultiline,
-        accessibilityMultiSelectable,
-        accessibilityOrientation,
-        accessibilityOwns,
-        accessibilityPlaceholder,
-        accessibilityPosInSet,
-        accessibilityPressed,
-        accessibilityReadOnly,
-        accessibilityRequired,
-        accessibilityRole,
-        accessibilityRoleDescription,
-        accessibilityRowCount,
-        accessibilityRowIndex,
-        accessibilityRowSpan,
-        accessibilitySelected,
-        accessibilitySetSize,
-        accessibilitySort,
-        accessibilityValueMax,
-        accessibilityValueMin,
-        accessibilityValueNow,
-        accessibilityValueText,
-        accessible,
-        accessibilityState,
-        accessibilityValue,
         collapsable,
         focusable,
-        onLayout
-      } = _c, webProps = __objRest(_c, [
-        "onMoveShouldSetResponder",
-        "onMoveShouldSetResponderCapture",
-        "onResponderEnd",
-        "onResponderGrant",
-        "onResponderMove",
-        "onResponderReject",
-        "onResponderRelease",
-        "onResponderStart",
-        "onResponderTerminate",
-        "onResponderTerminationRequest",
-        "onScrollShouldSetResponder",
-        "onScrollShouldSetResponderCapture",
-        "onSelectionChangeShouldSetResponder",
-        "onSelectionChangeShouldSetResponderCapture",
-        "onStartShouldSetResponder",
-        "onStartShouldSetResponderCapture",
-        "nativeID",
-        "accessibilityActiveDescendant",
-        "accessibilityAtomic",
-        "accessibilityAutoComplete",
-        "accessibilityBusy",
-        "accessibilityChecked",
-        "accessibilityColumnCount",
-        "accessibilityColumnIndex",
-        "accessibilityColumnSpan",
-        "accessibilityControls",
-        "accessibilityCurrent",
-        "accessibilityDescribedBy",
-        "accessibilityDetails",
-        "accessibilityDisabled",
-        "accessibilityErrorMessage",
-        "accessibilityExpanded",
-        "accessibilityFlowTo",
-        "accessibilityHasPopup",
-        "accessibilityHidden",
-        "accessibilityInvalid",
-        "accessibilityKeyShortcuts",
-        "accessibilityLabel",
-        "accessibilityLabelledBy",
-        "accessibilityLevel",
-        "accessibilityLiveRegion",
-        "accessibilityModal",
-        "accessibilityMultiline",
-        "accessibilityMultiSelectable",
-        "accessibilityOrientation",
-        "accessibilityOwns",
-        "accessibilityPlaceholder",
-        "accessibilityPosInSet",
-        "accessibilityPressed",
-        "accessibilityReadOnly",
-        "accessibilityRequired",
-        "accessibilityRole",
-        "accessibilityRoleDescription",
-        "accessibilityRowCount",
-        "accessibilityRowIndex",
-        "accessibilityRowSpan",
-        "accessibilitySelected",
-        "accessibilitySetSize",
-        "accessibilitySort",
-        "accessibilityValueMax",
-        "accessibilityValueMin",
-        "accessibilityValueNow",
-        "accessibilityValueText",
-        "accessible",
-        "accessibilityState",
-        "accessibilityValue",
-        "collapsable",
-        "focusable",
-        "onLayout"
-      ]);
+        accessible,
+        accessibilityDisabled,
+        onLayout,
+        ...webProps
+      } = nonTamaguiProps;
       viewProps = webProps;
-      assignNativePropsToWeb(elementType, viewProps, nonTamaguiProps);
-      useElementLayout(hostRef, onLayout);
-      useResponderEvents(hostRef, {
-        onMoveShouldSetResponder,
-        onMoveShouldSetResponderCapture,
-        onResponderEnd,
-        onResponderGrant,
-        onResponderMove,
-        onResponderReject,
-        onResponderRelease,
-        onResponderStart,
-        onResponderTerminate,
-        onResponderTerminationRequest,
-        onScrollShouldSetResponder,
-        onScrollShouldSetResponderCapture,
-        onSelectionChangeShouldSetResponder,
-        onSelectionChangeShouldSetResponderCapture,
-        onStartShouldSetResponder,
-        onStartShouldSetResponderCapture
-      });
-      const platformMethodsRef = usePlatformMethods(viewProps);
-      const setRef = useMergeRefs(hostRef, platformMethodsRef, forwardedRef);
-      viewProps.ref = setRef;
+      if (!isRSC) {
+        usePlatformMethods(hostRef);
+        useElementLayout(hostRef, onLayout);
+        useResponderEvents(hostRef, {
+          onMoveShouldSetResponder,
+          onMoveShouldSetResponderCapture,
+          onResponderEnd,
+          onResponderGrant,
+          onResponderMove,
+          onResponderReject,
+          onResponderRelease,
+          onResponderStart,
+          onResponderTerminate,
+          onResponderTerminationRequest,
+          onScrollShouldSetResponder,
+          onScrollShouldSetResponderCapture,
+          onSelectionChangeShouldSetResponder,
+          onSelectionChangeShouldSetResponderCapture,
+          onStartShouldSetResponder,
+          onStartShouldSetResponderCapture
+        });
+      }
       if (props.href != void 0 && hrefAttrs != void 0) {
         const { download, rel, target } = hrefAttrs;
         if (download != null) {
@@ -435,10 +365,8 @@ function createComponent(configIn, ParentComponent) {
       }
     } else {
       viewProps = nonTamaguiProps;
-      if (forwardedRef) {
-        viewProps.ref = forwardedRef;
-      }
     }
+    viewProps.ref = useComposedRefs(hostRef, forwardedRef, setMounted);
     if (process.env.NODE_ENV === "development" && !isText && isWeb) {
       Children.toArray(props.children).forEach((item) => {
         if (typeof item === "string") {
@@ -446,211 +374,211 @@ function createComponent(configIn, ParentComponent) {
         }
       });
     }
-    const internal = useRef();
-    if (!internal.current) {
-      internal.current = {
-        isMounted: true
-      };
+    const unPress = useCallback(() => {
+      setStateShallow({
+        press: false,
+        pressIn: false
+      });
+    }, [setStateShallow]);
+    if (!isRSC) {
+      useEffect(() => {
+        return () => {
+          mouseUps.delete(unPress);
+        };
+      }, [unPress]);
     }
-    useIsomorphicLayoutEffect(() => {
-      if (typeof window !== "undefined" && (hasEnterStyle || props.animation)) {
-        setStateShallow({
-          mounted: true
-        });
-      }
-      internal.current.isMounted = true;
-      return () => {
-        var _a2;
-        mouseUps.delete(unPress);
-        internal.current.isMounted = false;
-        (_a2 = internal.current.unmountEffects) == null ? void 0 : _a2.forEach((cb) => cb());
-      };
-    }, [hasEnterStyle, props.animation]);
     let styles;
-    const animationStyles = state.animation ? state.animation.style : null;
     if (isStringElement && shouldAvoidClasses && !shouldForcePseudo) {
-      styles = __spreadValues(__spreadValues(__spreadValues({}, defaultNativeStyle), animationStyles ?? style), medias);
+      styles = {
+        ...defaultNativeStyle,
+        ...animationStyles ?? splitStylesStyle,
+        ...medias
+      };
     } else {
-      styles = [
-        isWeb ? null : defaultNativeStyleSheet ? defaultNativeStyleSheet.base : null,
-        animationStyles ?? style,
-        medias
-      ];
-      if (!animationStyles) {
-        const initPseudos = initialSplitStyles.pseudos;
-        const force = shouldForcePseudo;
-        !state.mounted && addPseudoToStyles(styles, initPseudos, pseudos, "enterStyle");
-        state.hover && addPseudoToStyles(styles, initPseudos, pseudos, "hoverStyle", force);
-        state.focus && addPseudoToStyles(styles, initPseudos, pseudos, "focusStyle", force);
-        state.press && addPseudoToStyles(styles, initPseudos, pseudos, "pressStyle", force);
-      }
+      styles = [isWeb ? null : defaultNativeStyle, animationStyles ?? splitStylesStyle, medias];
       if (shouldForcePseudo) {
         const next = {};
-        for (const style2 of styles) {
-          if (style2) {
-            Object.assign(next, style2);
-          }
-        }
+        styles.forEach((style) => Object.assign(next, style));
         Object.assign(splitStyles.style, next);
       }
     }
+    let fontFamily = isText ? splitStyles.fontFamily || staticConfig.defaultProps.fontFamily : null;
+    if (fontFamily && fontFamily[0] === "$") {
+      fontFamily = fontFamily.slice(1);
+    }
+    const fontFamilyClassName = fontFamily ? `font_${fontFamily}` : "";
+    const classList = [
+      componentName ? componentClassName : "",
+      fontFamilyClassName,
+      themeIsNew ? theme.className : "",
+      classNames ? Object.values(classNames).join(" ") : ""
+    ];
+    const className = classList.join(" ");
     if (process.env.TAMAGUI_TARGET === "web") {
-      const fontFamilyName = isText ? props.fontFamily || staticConfig.defaultProps.fontFamily : null;
-      const fontFamily = fontFamilyName && fontFamilyName[0] === "$" ? fontFamilyName.slice(1) : null;
-      const classList = [
-        componentName ? componentClassName : "",
-        fontFamily ? `font_${fontFamily}` : "",
-        theme.className,
-        classNames ? Object.values(classNames).join(" ") : ""
-      ];
-      const className = classList.join(" ");
-      const style2 = animationStyles ?? splitStyles.style;
-      const isAnimatedReactNativeWeb = props.animation && avoidClasses;
-      if (staticConfig.isReactNativeWeb || isAnimatedReactNativeWeb) {
-        viewProps.dataSet = __spreadProps(__spreadValues({}, viewProps.dataSet), {
-          className,
-          id: props.id
-        });
-        if (props["data-is"]) {
-          viewProps.dataSet.is = props["data-is"];
+      const style = animationStyles ?? splitStyles.style;
+      if (isAnimatedReactNativeWeb) {
+        viewProps.style = style;
+      } else if (isReactNative) {
+        const rnwStyle = { $$css: true };
+        for (const name of className.split(" ")) {
+          rnwStyle[name] = name;
+        }
+        viewProps.style = [rnwStyle, ...Array.isArray(style) ? style : [style]];
+        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 {
         viewProps.className = className;
+        viewProps.style = style;
+      }
+    }
+    if (process.env.TAMAGUI_TARGET === "native") {
+      if (splitStyles.fontFamily) {
+        const faceInfo = (_c = tamaguiConfig.fontsParsed[splitStyles.fontFamily]) == null ? void 0 : _c.face;
+        if (faceInfo) {
+          const [weight, style] = (() => {
+            var _a2, _b2;
+            let weight2;
+            let style2;
+            for (let i = styles.length; i >= 0; i--) {
+              weight2 ??= (_a2 = styles[i]) == null ? void 0 : _a2.fontWeight;
+              style2 ??= (_b2 = styles[i]) == null ? void 0 : _b2.fontStyle;
+            }
+            return [weight2 || "400", style2 || "normal"];
+          })();
+          const overrideFace = (_e = (_d = faceInfo[weight]) == null ? void 0 : _d[style]) == null ? void 0 : _e.val;
+          if (overrideFace) {
+            for (const style2 of styles) {
+              if (style2 == null ? void 0 : style2.fontFamily) {
+                style2.fontFamily = overrideFace;
+                delete style2.fontWeight;
+                delete style2.fontStyle;
+              }
+            }
+          }
+        }
       }
-      viewProps.style = style2;
-    } else {
       viewProps.style = styles;
     }
-    const initialPseudos = initialSplitStyles.pseudos;
-    const attachPress = !!((pseudos == null ? void 0 : pseudos.pressStyle) || (initialPseudos == null ? void 0 : initialPseudos.pressStyle) || onPress || onPressOut || onPressIn || onClick);
-    const isTouch = useIsTouchDevice();
-    const isHoverable = isWeb && !isTouch;
-    const attachHover = isHoverable && !!(pseudos && pseudos.hoverStyle || onHoverIn || onHoverOut || onMouseEnter || onMouseLeave);
-    const handlesPressEvents = !isStringElement && !asChild;
-    const pressKey = handlesPressEvents ? "onPress" : "onClick";
-    const pressInKey = handlesPressEvents ? "onPressIn" : "onMouseDown";
-    const pressOutKey = handlesPressEvents ? "onPressOut" : "onMouseUp";
-    const shouldAttach = !asChild && (attachPress || attachHover || "pressStyle" in props || "onPress" in props || "onPressIn" in props || "onPressOut" in props || isWeb && ("hoverStyle" in props || "onHoverIn" in props || "onHoverOut" in props || "onMouseEnter" in props || "onMouseLeave" in props));
-    const unPress = useCallback(() => {
-      if (!internal.current.isMounted)
-        return;
-      setStateShallow({
-        press: false,
-        pressIn: false
-      });
-    }, []);
-    const events = shouldAttach ? __spreadValues(__spreadProps(__spreadValues({
-      [pressOutKey]: attachPress ? (e) => {
+    const runtimePressStyle = !disabled && noClassNames && (pseudos == null ? void 0 : pseudos.pressStyle);
+    const attachPress = !!(runtimePressStyle || onPress || onPressOut || onPressIn || onClick);
+    const runtimeHoverStyle = !disabled && noClassNames && (pseudos == null ? void 0 : pseudos.hoverStyle);
+    const isHoverable = isWeb && !!(runtimeHoverStyle || onHoverIn || onHoverOut || onMouseEnter || onMouseLeave);
+    const handlesPressEvents = !isWeb && !asChild;
+    const shouldAttach = asChild ? false : Boolean(
+      attachPress || isHoverable || "pressStyle" in props || "onPress" in props || "onPressIn" in props || "onPressOut" in props || isWeb && ("hoverStyle" in props || "onHoverIn" in props || "onHoverOut" in props || "onMouseEnter" in props || "onMouseLeave" in props)
+    );
+    const events = shouldAttach && !isRSC && !isDisabled ? {
+      onPressOut: attachPress ? (e) => {
         unPress();
         onPressOut == null ? void 0 : onPressOut(e);
         onMouseUp == null ? void 0 : onMouseUp(e);
-      } : void 0
-    }, isHoverable && {
-      onMouseEnter: attachHover ? (e) => {
-        const next = {};
-        if (attachHover) {
-          next.hover = true;
-        }
-        if (state.pressIn) {
-          next.press = true;
-        }
-        if (Object.keys(next).length) {
-          setStateShallow(next);
-        }
-        onHoverIn == null ? void 0 : onHoverIn(e);
-        onMouseEnter == null ? void 0 : onMouseEnter(e);
       } : void 0,
-      onMouseLeave: attachHover ? (e) => {
-        const next = {};
-        mouseUps.add(unPress);
-        if (attachHover) {
-          next.hover = false;
-        }
-        if (state.pressIn) {
-          next.press = false;
-          next.pressIn = false;
-        }
-        if (Object.keys(next).length) {
-          setStateShallow(next);
-        }
-        onHoverOut == null ? void 0 : onHoverOut(e);
-        onMouseLeave == null ? void 0 : onMouseLeave(e);
-      } : void 0
-    }), {
-      [pressInKey]: attachPress ? (e) => {
+      ...isHoverable && {
+        onMouseEnter: isHoverable ? (e) => {
+          const next = {};
+          if (isHoverable) {
+            next.hover = true;
+          }
+          if (state.pressIn) {
+            next.press = true;
+          }
+          if (isHoverable || state.pressIn) {
+            setStateShallow(next);
+          }
+          onHoverIn == null ? void 0 : onHoverIn(e);
+          onMouseEnter == null ? void 0 : onMouseEnter(e);
+        } : void 0,
+        onMouseLeave: isHoverable ? (e) => {
+          const next = {};
+          mouseUps.add(unPress);
+          if (isHoverable) {
+            next.hover = false;
+          }
+          if (state.pressIn) {
+            next.press = false;
+            next.pressIn = false;
+          }
+          if (Object.keys(next).length) {
+            setStateShallow(next);
+          }
+          onHoverOut == null ? void 0 : onHoverOut(e);
+          onMouseLeave == null ? void 0 : onMouseLeave(e);
+        } : void 0
+      },
+      onPressIn: attachPress ? (e) => {
         setStateShallow({
           press: true,
-          pressIn: true
+          pressIn: true,
+          hover: false
         });
         onPressIn == null ? void 0 : onPressIn(e);
         onMouseDown == null ? void 0 : onMouseDown(e);
         if (isWeb) {
           mouseUps.add(unPress);
         }
-      } : null,
-      [pressKey]: attachPress ? (e) => {
+      } : void 0,
+      onPress: attachPress ? (e) => {
         unPress();
         onClick == null ? void 0 : onClick(e);
         onPress == null ? void 0 : onPress(e);
-      } : null
-    }), !isWeb && {
-      cancelable: !props.rejectResponderTermination,
-      disabled: props.disabled !== null ? props.disabled : (_d = props.accessibilityState) == null ? void 0 : _d.disabled,
-      hitSlop: props.hitSlop,
-      delayLongPress: props.delayLongPress,
-      delayPressIn: props.delayPressIn,
-      delayPressOut: props.delayPressOut,
-      focusable: viewProps.focusable ?? true,
-      minPressDuration: 0
-    }) : null;
+      } : void 0,
+      ...!isWeb && {
+        cancelable: !props.rejectResponderTermination,
+        disabled: isDisabled,
+        hitSlop: props.hitSlop,
+        delayLongPress: props.delayLongPress,
+        delayPressIn: props.delayPressIn,
+        delayPressOut: props.delayPressOut,
+        focusable: viewProps.focusable ?? true,
+        minPressDuration: 0
+      }
+    } : null;
     let space = spaceProp;
-    if (features.enabled.mediaQuery) {
-      for (const key in mediaState) {
-        if (!mediaState[key])
-          continue;
-        if (props[key] && props[key].space !== void 0) {
+    if (state.mediaState && mediaKeys.length) {
+      for (const key in state.mediaState) {
+        if (key in state.mediaState && key in props && props[key].space !== void 0) {
           space = props[key].space;
         }
       }
     }
-    const childEls = !children || asChild ? children : wrapThemeManagerContext(spacedChildren({
-      separator,
-      children,
-      space,
-      direction: props.spaceDirection || "both",
-      isZStack
-    }), getThemeManagerIfChanged(theme));
+    const themeShouldReset = Boolean(themeShallow && themeManager && themeIsNew);
+    const shouldProvideThemeManager = themeShouldReset || themeManager && themeIsNew;
+    if (shouldProvideThemeManager) {
+      stateRef.current.hasProvidedThemeManager = true;
+    }
+    if (themeShouldReset) {
+      stateRef.current.themeShouldReset = true;
+    }
+    const childEls = !children || asChild ? children : wrapThemeManagerContext(
+      spacedChildren({
+        separator,
+        children,
+        space,
+        direction: props.spaceDirection || "both",
+        isZStack
+      }),
+      stateRef.current.hasProvidedThemeManager ? themeManager : void 0,
+      stateRef.current.themeShouldReset
+    );
     let content;
     if (asChild) {
       elementType = Slot;
-      viewProps = __spreadProps(__spreadValues({}, viewProps), {
+      viewProps = {
+        ...viewProps,
         onPress,
         onPressIn,
         onPressOut
-      });
-    }
-    if (isWeb) {
-      const [pressableProps] = usePressable(events ? __spreadProps(__spreadValues({
-        disabled
-      }, hitSlop && {
-        hitSlop
-      }), {
-        onPressOut: events[pressOutKey],
-        onPressIn: events[pressInKey],
-        onPress: events[pressKey]
-      }) : {
-        disabled: true
-      });
-      if (events) {
-        if (handlesPressEvents) {
-          Object.assign(viewProps, pressableProps);
-        } else {
-          Object.assign(viewProps, events);
-        }
-      }
+      };
     }
     if (process.env.TAMAGUI_TARGET === "native") {
-      const attachFocus = !!(pseudos && pseudos.focusStyle || initialPseudos && initialPseudos.focusStyle);
+      const attachFocus = !!pseudos.focusStyle;
       if (attachFocus) {
         viewProps.onFocus = mergeEvent(viewProps.onFocus, () => {
           setStateShallow({ focus: true });
@@ -659,110 +587,114 @@ function createComponent(configIn, ParentComponent) {
           setStateShallow({ focus: false });
         });
       }
-    }
-    if (process.env.TAMAGUI_TARGET === "native") {
-      const pressability = useMemo(() => {
-        if (attachPress && events) {
-          const pressability2 = new Pressability(events);
-          internal.current.unmountEffects = [
-            () => {
-              pressability2.reset();
-            }
-          ];
-          return pressability2;
-        }
-      }, []);
+      const pressability = usePressability(events ? { ...events, hitSlop } : {});
       if (attachPress && events) {
-        pressability.configure(events);
-        const eventHandlers = pressability.getEventHandlers();
-        for (const key in eventHandlers) {
-          if (key === "onBlur" || key === "onFocus") {
-            continue;
-          }
+        for (const key in pressability) {
           const og = props[key];
-          const val = eventHandlers[key];
-          viewProps[key] = og ? composeEventHandlers(og, val) : val;
+          const val = pressability[key];
+          viewProps[key] = og && !dontComposePressabilityKeys[key] ? composeEventHandlers(og, val) : val;
         }
       }
     }
     content = createElement(elementType, viewProps, childEls);
     if (process.env.TAMAGUI_TARGET === "web") {
-      const isAnimatedRNWView = isAnimated && typeof elementType !== "string";
-      const shouldWrapWithComponentTheme = isAnimatedRNWView && getReturnVariablesAs(props, splitStyleState) === "non-color-value";
-      const shouldWrapWithHover = events && attachHover;
-      if (shouldWrapWithHover || shouldWrapWithComponentTheme) {
-        const themeClassName = shouldWrapWithComponentTheme ? `${theme.className}` : "";
-        const hoverClassName = shouldWrapWithHover ? "t_Hoverable" : "";
-        content = /* @__PURE__ */ React.createElement("span", __spreadValues({
-          className: `${hoverClassName} ${themeClassName}`,
-          style: {
-            display: "contents"
-          }
-        }, shouldWrapWithHover && {
-          onMouseEnter: events.onMouseEnter,
-          onMouseLeave: events.onMouseLeave
-        }), content);
+      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 (process.env.NODE_ENV === "development") {
-      if (props["debug"]) {
-        console.groupCollapsed(elementType, `props out`, viewProps);
+    if (process.env.NODE_ENV === "development" && process.env.DEBUG !== "tamagui") {
+      if (debugProp) {
+        const element2 = typeof elementType === "string" ? elementType : "Component";
+        console.groupCollapsed(`render <${element2} /> with props`, viewProps);
         for (const key in viewProps) {
           console.log(key, viewProps[key]);
         }
+        console.log("children", content);
         console.groupEnd();
         if (typeof window !== "undefined") {
-          console.log(__spreadValues({ state, viewProps, splitStyles, animationStyles, isStringElement, classNamesIn: (_e = props.className) == null ? void 0 : _e.split(" "), classNamesOut: (_f = viewProps.className) == null ? void 0 : _f.split(" "), events, shouldAttach, styles, pseudos, content, childEls, shouldAvoidClasses, avoidClasses, animation: props.animation, style, defaultNativeStyle, initialSplitStyles }, typeof window !== "undefined" ? { theme, themeClassName: theme.className, staticConfig, tamaguiConfig, events, shouldAvoidClasses, shouldForcePseudo, classNames: Object.fromEntries(Object.entries(classNames).map(([k, v]) => [v, getAllSelectors()[v]])) } : null));
+          console.log({ state, shouldProvideThemeManager, isAnimated, isAnimatedReactNativeWeb, tamaguiDefaultProps, viewProps, splitStyles, animationStyles, handlesPressEvents, isStringElement, classNamesIn: (_f = props.className) == null ? void 0 : _f.split(" "), classNamesOut: (_g = viewProps.className) == null ? void 0 : _g.split(" "), events, shouldAttach, styles, pseudos, content, childEls, shouldAvoidClasses, avoidClasses: avoidClassesWhileAnimating, animation: props.animation, style: splitStylesStyle, defaultNativeStyle, ...typeof window !== "undefined" ? { theme, themeClassName: theme.className, staticConfig, tamaguiConfig, events, shouldAvoidClasses, shouldForcePseudo, classNames: Object.fromEntries(Object.entries(classNames).map(([k, v]) => [v, getAllSelectors()[v]])) } : null });
         }
         console.groupEnd();
       }
     }
-    if (features.elements.length) {
-      return /* @__PURE__ */ React.createElement(React.Fragment, null, features.elements, content);
-    }
     return content;
   });
   if (staticConfig.componentName) {
     component.displayName = staticConfig.componentName;
   }
   onConfiguredOnce((conf) => {
-    var _a, _b, _c;
-    if (process.env.IS_STATIC === "is_static") {
-      return;
+    if (!tamaguiConfig) {
+      tamaguiConfig = conf;
+      if (!defaultComponentState) {
+        defaultComponentState = {
+          hover: false,
+          press: false,
+          pressIn: false,
+          focus: false,
+          unmounted: true,
+          mediaState: getMediaStateObject(getInitialMediaState())
+        };
+        defaultComponentStateMounted = {
+          ...defaultComponentState,
+          unmounted: false
+        };
+      }
+      if (tamaguiConfig.animations) {
+        AnimatedText = tamaguiConfig.animations.Text;
+        AnimatedView = tamaguiConfig.animations.View;
+      }
+      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`);
+          }
+        }
+      }
     }
-    tamaguiConfig = conf;
     mergeShorthands(staticConfig, tamaguiConfig);
-    avoidClasses = !!((_a = tamaguiConfig.animations) == null ? void 0 : _a.avoidClasses);
-    AnimatedText = (_b = tamaguiConfig.animations) == null ? void 0 : _b.Text;
-    AnimatedView = (_c = tamaguiConfig == null ? void 0 : tamaguiConfig.animations) == null ? void 0 : _c.View;
-    initialTheme = initialTheme || proxyThemeVariables(conf.themes[conf.defaultTheme || Object.keys(conf.themes)[0]]);
-    const config = getConfig();
     let defaultPropsIn = staticConfig.defaultProps || {};
     const parentNames = [...staticConfig.parentNames || [], staticConfig.componentName];
-    if (config.defaultProps && parentNames && staticConfig.componentName) {
-      defaultPropsIn = mergeConfigDefaultProps(staticConfig.componentName, defaultPropsIn, config.defaultProps, parentNames);
-    }
-    const debug = process.env.NODE_ENV === "development" ? defaultPropsIn["debug"] : false;
-    if (process.env.NODE_ENV === "development" && debug === "break") {
-      debugger;
-    }
-    const [parentProps, parentClassNames] = mergeProps(defaultPropsIn, {}, true);
-    initialSplitStyles = insertSplitStyles(parentProps, staticConfig, initialTheme, {
-      mounted: true,
-      hover: false,
-      press: false,
-      pressIn: false,
-      focus: false,
-      resolveVariablesAs: "both",
-      keepVariantsAsProps: true
-    }, void 0, debug);
-    const [defaults, defaultsClassnames] = mergeProps(component.defaultProps, initialSplitStyles.viewProps, true);
-    initialSplitStyles.classNames = __spreadValues(__spreadValues(__spreadValues({}, parentClassNames), defaultsClassnames), initialSplitStyles.classNames);
+    if (tamaguiConfig.defaultProps && parentNames && staticConfig.componentName) {
+      defaultPropsIn = mergeConfigDefaultProps(
+        staticConfig.componentName,
+        defaultPropsIn,
+        tamaguiConfig.defaultProps,
+        parentNames,
+        tamaguiConfig
+      );
+    }
+    const debug = defaultPropsIn["debug"];
+    const [ourProps, ourClassNames] = mergeProps(defaultPropsIn, {});
+    if (ourProps.tag) {
+      defaultTag = ourProps.tag;
+    }
+    const noClassNames = !staticConfig.acceptsClassName;
+    const { name, variants, defaultVariants, ...restProps } = ourProps;
+    const [defaults, defaultsClassnames] = mergeProps(component.defaultProps, {
+      ...defaultVariants,
+      ...restProps
+    });
     defaultNativeStyle = {};
     const validStyles2 = staticConfig.validStyles || stylePropsView;
     if (!isWeb) {
       for (const key in staticConfig.defaultProps) {
         const val = staticConfig.defaultProps[key];
+        if (validPseudoKeys[key])
+          continue;
         if (typeof val === "string" && val[0] === "$" || !validStyles2[key]) {
           defaults[key] = val;
         } else {
@@ -770,22 +702,10 @@ function createComponent(configIn, ParentComponent) {
         }
       }
     }
-    defaultNativeStyleSheet = StyleSheet.create({
-      base: defaultNativeStyle
-    });
-    if (Object.keys(defaults).length) {
-      tamaguiDefaultProps = defaults;
-    }
+    tamaguiDefaultProps = defaults;
     if (process.env.NODE_ENV === "development" && debug) {
       if (process.env.IS_STATIC !== "is_static") {
-        console.log(`\u{1F41B} [${staticConfig.componentName || "Component"}]`, {
-          staticConfig,
-          initialSplitStyles,
-          tamaguiDefaultProps,
-          defaultNativeStyle,
-          defaults,
-          defaultPropsIn
-        });
+        console.log(`\u{1F41B} [${staticConfig.componentName || "Component"}]`, { staticConfig, tamaguiDefaultProps, defaultNativeStyle, defaults, defaultPropsIn, defaultPropsKeyOrder: Object.keys(staticConfig.defaultProps), defaultPropsInKeyOrder: Object.keys(defaultPropsIn).map((k) => [k, defaultPropsIn[k]]), ourProps, ourClassNames, defaultsClassnames, defaultTag, noClassNames });
       }
     }
   });
@@ -793,17 +713,23 @@ function createComponent(configIn, ParentComponent) {
   if (configIn.memo) {
     res = memo(res);
   }
-  res.staticConfig = __spreadValues({
-    validStyles: staticConfig.validStyles || stylePropsView
-  }, staticConfig);
+  res.staticConfig = {
+    validStyles: staticConfig.validStyles || stylePropsView,
+    ...staticConfig
+  };
   res.extractable = (Component, conf) => {
-    Component.staticConfig = extendStaticConfig(__spreadProps(__spreadValues({
-      Component
-    }, conf), {
-      neverFlatten: true,
-      isExtractable: true,
-      defaultProps: __spreadValues(__spreadValues({}, Component.defaultProps), conf == null ? void 0 : conf.defaultProps)
-    }), res);
+    Component.staticConfig = extendStaticConfig(
+      {
+        Component,
+        ...conf,
+        neverFlatten: true,
+        defaultProps: {
+          ...Component.defaultProps,
+          ...conf == null ? void 0 : conf.defaultProps
+        }
+      },
+      res
+    );
     return Component;
   };
   return res;
@@ -816,9 +742,11 @@ const Spacer = createComponent({
   memo: true,
   componentName: "Spacer",
   validStyles,
-  defaultProps: __spreadProps(__spreadValues({}, stackDefaultStyles), {
+  defaultProps: {
+    ...stackDefaultStyles,
+    tag: "span",
     size: true
-  }),
+  },
   variants: {
     size: {
       "...size": (size, { tokens }) => {
@@ -848,9 +776,6 @@ const Spacer = createComponent({
       },
       both: {}
     }
-  },
-  defaultVariants: {
-    direction: "both"
   }
 });
 function spacedChildren({
@@ -876,95 +801,73 @@ function spacedChildren({
     if (isEmpty || !child || child["key"] && !isZStack) {
       final.push(child);
     } else {
-      final.push(/* @__PURE__ */ React.createElement(Fragment, {
-        key: index
-      }, isZStack ? /* @__PURE__ */ React.createElement(AbsoluteFill, null, child) : child));
-    }
-    if (isUnspaced(child) && index === 0) {
+      final.push(
+        /* @__PURE__ */ jsx(Fragment, {
+          children: isZStack ? /* @__PURE__ */ jsx(AbsoluteFill, {
+            children: child
+          }) : child
+        }, index)
+      );
+    }
+    if (isUnspaced(child) && index === 0)
       continue;
-    }
-    if (isZStack) {
+    if (isZStack)
       continue;
-    }
     const next = childrenList[index + 1];
     if (next && !isUnspaced(next)) {
       if (separator) {
         if (hasSpace) {
-          final.push(createSpacer({
-            key: `_${index}_before_sep_spacer`,
-            direction,
-            space,
-            spaceFlex
-          }));
+          final.push(
+            createSpacer({
+              key: `_${index}_00tmgui`,
+              direction,
+              space,
+              spaceFlex
+            })
+          );
         }
-        final.push(React.isValidElement(separator) ? React.cloneElement(separator, { key: `sep_${index}` }) : separator);
+        final.push(
+          React.isValidElement(separator) ? React.cloneElement(separator, { key: `sep_${index}` }) : separator
+        );
         if (hasSpace) {
-          final.push(createSpacer({
-            key: `_${index}_after_sep_spacer`,
+          final.push(
+            createSpacer({
+              key: `_${index}01tmgui`,
+              direction,
+              space,
+              spaceFlex
+            })
+          );
+        }
+      } else {
+        final.push(
+          createSpacer({
+            key: `_${index}02tmgui`,
             direction,
             space,
             spaceFlex
-          }));
-        }
-      } else {
-        final.push(createSpacer({
-          key: `_${index}_spacer`,
-          direction,
-          space,
-          spaceFlex
-        }));
+          })
+        );
       }
     }
   }
   return final;
 }
 function createSpacer({ key, direction, space, spaceFlex }) {
-  return /* @__PURE__ */ React.createElement(Spacer, __spreadValues({
-    key,
+  return /* @__PURE__ */ jsx(Spacer, {
     size: space,
-    direction
-  }, spaceFlex && {
-    flex: spaceFlex
-  }));
+    direction,
+    ...typeof spaceFlex !== "undefined" && {
+      flex: spaceFlex === true ? 1 : spaceFlex === false ? 0 : spaceFlex
+    }
+  }, key);
 }
 function isUnspaced(child) {
   var _a, _b;
   return ((_a = child == null ? void 0 : child["type"]) == null ? void 0 : _a["isVisuallyHidden"]) || ((_b = child == null ? void 0 : child["type"]) == null ? void 0 : _b["isUnspaced"]);
 }
-function AbsoluteFill(props) {
-  return /* @__PURE__ */ React.createElement(View, {
-    pointerEvents: "box-none",
-    style: StyleSheet.absoluteFill
-  }, props.children);
-}
-function processIDRefList(idRefList) {
-  return Array.isArray(idRefList) ? idRefList.join(" ") : idRefList;
-}
-const accessibilityRoleToWebRole = {
-  adjustable: "slider",
-  button: "button",
-  header: "heading",
-  image: "img",
-  imagebutton: null,
-  keyboardkey: null,
-  label: null,
-  link: "link",
-  none: "presentation",
-  search: "search",
-  summary: "region",
-  text: null
-};
-function addPseudoToStyles(styles, initialPseudos, pseudos, name, force = false) {
-  const pseudoStyle = pseudos[name];
-  const shouldNestObject = isWeb && name !== "enterStyle" && name !== "exitStyle";
-  const defaultPseudoStyle = initialPseudos[name];
-  const style = defaultPseudoStyle ? __spreadValues(__spreadValues({}, defaultPseudoStyle), pseudoStyle) : pseudoStyle;
-  if (style) {
-    styles.push(shouldNestObject && !force ? { [name]: style } : style);
-  }
-}
 const DefaultProps = /* @__PURE__ */ new Map();
-function mergeConfigDefaultProps(name, props, configDefaults, parentNames) {
+function mergeConfigDefaultProps(name, props, configDefaults, parentNames, conf) {
   const len = parentNames.length;
   let prev;
   for (let i = 0; i < len; i++) {
@@ -982,24 +885,56 @@ function mergeConfigDefaultProps(name, props, configDefaults, parentNames) {
       }
       continue;
     }
-    prev = mergeProps(prev || {}, props2)[0];
-    console.log("set prev", prev);
+    prev = mergeProps(prev || {}, props2, false, conf.inverseShorthands)[0];
     DefaultProps.set(n, prev);
   }
   const ourDefaultsMerged = DefaultProps.get(name);
   if (ourDefaultsMerged) {
-    return mergeProps(props, ourDefaultsMerged)[0];
+    return mergeProps(props, ourDefaultsMerged, false, conf.inverseShorthands)[0];
   }
   return props;
 }
+function usePlatformMethods(hostRef) {
+  useIsomorphicLayoutEffect(() => {
+    const node = hostRef.current;
+    if (!node)
+      return;
+    node.measure = (callback) => measureLayout(node, null, callback);
+    node.measureLayout = (relativeToNode, success) => measureLayout(node, relativeToNode, success);
+    node.measureInWindow = (callback) => {
+      if (!node)
+        return;
+      setTimeout(() => {
+        const { height, left, top, width } = getRect(node);
+        callback(left, top, width, height);
+      }, 0);
+    };
+  }, [hostRef]);
+}
+const AbsoluteFill = createComponent({
+  componentName: "AbsoluteFill",
+  defaultProps: {
+    ...stackDefaultStyles,
+    flexDirection: "column",
+    position: "absolute",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    pointerEvents: "box-none"
+  }
+});
+const dontComposePressabilityKeys = {
+  onClick: true
+};
+function getMediaStateObject(obj) {
+  return Object.fromEntries(Object.entries(obj).flatMap(([k, v]) => v ? [[`$${k}`, v]] : []));
+}
 export {
-  AbsoluteFill,
   Spacer,
   Unspaced,
-  accessibilityRoleToWebRole,
   createComponent,
   mouseUps,
-  processIDRefList,
   spacedChildren
 };
 //# sourceMappingURL=createComponent.js.map