@tamagui/core 1.0.1-beta.21 → 1.0.1-beta.210

package/dist/cjs/createComponent.js

@@ -1,39 +1,10 @@
+"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
 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 __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-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;
-};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -46,262 +17,307 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var createComponent_exports = {};
 __export(createComponent_exports, {
-  AbsoluteFill: () => AbsoluteFill,
   Spacer: () => Spacer,
+  Unspaced: () => Unspaced,
   createComponent: () => createComponent,
   mouseUps: () => mouseUps,
   spacedChildren: () => spacedChildren
 });
 module.exports = __toCommonJS(createComponent_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_compose_refs = require("@tamagui/compose-refs");
+var import_constants = require("@tamagui/constants");
 var import_helpers = require("@tamagui/helpers");
+var import_react_native_use_responder_events = require("@tamagui/react-native-use-responder-events");
 var import_use_force_update = require("@tamagui/use-force-update");
 var import_react = __toESM(require("react"));
-var import_react_native = require("react-native");
-var import_conf = require("./conf");
-var import_constants = require("./constants/constants");
-var import_platform = require("./constants/platform");
-var import_rnw = require("./constants/rnw");
-var import_createShallowUpdate = require("./helpers/createShallowUpdate");
+var import_config = require("./config");
+var import_constants2 = require("./constants/constants");
+var import_FontLanguageContext = require("./contexts/FontLanguageContext");
+var import_TextAncestorContext = require("./contexts/TextAncestorContext");
 var import_extendStaticConfig = require("./helpers/extendStaticConfig");
 var import_getSplitStyles = require("./helpers/getSplitStyles");
 var import_insertStyleRule = require("./helpers/insertStyleRule");
-var import_nativeGestureHandler = require("./helpers/nativeGestureHandler");
+var import_mergeProps = require("./helpers/mergeProps");
 var import_proxyThemeVariables = require("./helpers/proxyThemeVariables");
-var import_wrapThemeManagerContext = require("./helpers/wrapThemeManagerContext");
-var import_useFeatures = require("./hooks/useFeatures");
-var import_useIsTouchDevice = require("./hooks/useIsTouchDevice");
-var import_usePressable = require("./hooks/usePressable");
+var import_useShallowSetState = require("./helpers/useShallowSetState");
+var import_useElementLayout = require("./hooks/useElementLayout");
+var import_useMedia = require("./hooks/useMedia");
+var import_useServerHooks = require("./hooks/useServerHooks");
 var import_useTheme = require("./hooks/useTheme");
+var import_Pressability = require("./vendor/Pressability");
 var import_Slot = require("./views/Slot");
-var import_TextAncestorContext = require("./views/TextAncestorContext");
+var import_Theme = require("./views/Theme");
 import_react.default["keep"];
-const defaultComponentState = {
-  hover: false,
-  press: false,
-  pressIn: false,
-  focus: false,
-  mounted: false,
-  animation: null
-};
+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", () => {
+  const cancelTouches = () => {
     mouseUps.forEach((x) => x());
     mouseUps.clear();
-  });
-  document.addEventListener("touchend", () => {
-    mouseUps.forEach((x) => x());
-    mouseUps.clear();
-  });
-  document.addEventListener("touchcancel", () => {
-    mouseUps.forEach((x) => x());
-    mouseUps.clear();
-  });
+  };
+  document.addEventListener("mouseup", cancelTouches);
+  document.addEventListener("touchend", cancelTouches);
+  document.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];
   }
 }
-__name(mergeShorthands, "mergeShorthands");
-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 = (0, import_extendStaticConfig.extendStaticConfig)(configIn, ParentComponent);
-    if ("parsed" in config) {
-      return config;
+    const next = (0, import_extendStaticConfig.extendStaticConfig)(configIn, ParentComponent);
+    if ("parsed" in next) {
+      return next;
     } else {
-      return (0, import_extendStaticConfig.parseStaticConfig)(config);
+      return (0, import_extendStaticConfig.parseStaticConfig)(next);
     }
   })();
-  const componentClassName = `is_${staticConfig.componentName}`;
-  let tamaguiConfig;
-  let AnimatedText;
-  let AnimatedView;
-  let avoidClasses = true;
+  const defaultComponentClassName = `is_${staticConfig.componentName}`;
+  const avoidClassesWhileAnimating = true;
   let defaultNativeStyle;
-  let defaultNativeStyleSheet;
   let tamaguiDefaultProps;
+  let defaultTag;
   let initialSplitStyles;
-  function addPseudoToStyles(styles, name, pseudos) {
-    const pseudoStyle = pseudos[name];
-    const shouldNestObject = import_platform.isWeb && name !== "enterStyle" && name !== "exitStyle";
-    const defaultPseudoStyle = initialSplitStyles.pseudos[name];
-    if (defaultPseudoStyle) {
-      styles.push(shouldNestObject ? { [name]: defaultPseudoStyle } : defaultPseudoStyle);
+  const component = (0, import_react.forwardRef)((propsIn, forwardedRef) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    let props;
+    if (tamaguiDefaultProps && !propsIn.asChild) {
+      props = (0, import_mergeProps.mergeProps)(tamaguiDefaultProps, propsIn)[0];
+    } else {
+      props = propsIn;
     }
-    if (pseudoStyle) {
-      styles.push(shouldNestObject ? { [name]: pseudoStyle } : pseudoStyle);
+    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 forceUpdate = (0, import_use_force_update.useForceUpdate)();
+    const theme = (0, import_useTheme.useTheme)(props.theme, componentName, props, forceUpdate);
+    const hasEnterStyle = !!props.enterStyle;
+    const needsMount = Boolean((import_constants.isWeb ? import_constants.isClient : true) && (hasEnterStyle || props.animation));
+    const states = (0, import_useServerHooks.useServerState)(
+      needsMount ? defaultComponentState : defaultComponentStateMounted
+    );
+    const state = propsIn.forceStyle ? { ...states[0], [propsIn.forceStyle]: true } : states[0];
+    const setState = states[1];
+    const setStateShallow = (0, import_useShallowSetState.useShallowSetState)(setState);
+    const shouldSetMounted = needsMount && !state.mounted;
+    const setMounted = shouldSetMounted ? () => {
+      setTimeout(
+        () => {
+          setStateShallow({
+            mounted: true
+          });
+        },
+        import_constants.isWeb ? 10 : 0
+      );
+    } : void 0;
+    const shouldAvoidClasses = !!(props.animation && avoidClassesWhileAnimating) || !staticConfig.acceptsClassName;
+    const shouldForcePseudo = !!propsIn.forceStyle;
+    const hasTextAncestor = !!(import_constants.isWeb && isText ? (0, import_react.useContext)(import_TextAncestorContext.TextAncestorContext) : false);
+    const splitStyleState = !shouldAvoidClasses && !shouldForcePseudo ? {
+      ...state,
+      hasTextAncestor,
+      dynamicStylesInline: true
+    } : {
+      ...state,
+      noClassNames: true,
+      dynamicStylesInline: true,
+      hasTextAncestor,
+      resolveVariablesAs: "value"
+    };
+    const languageContext = import_constants.isRSC ? null : (0, import_react.useContext)(import_FontLanguageContext.FontLanguageContext);
+    const isDisabled = props.disabled ?? ((_a = props.accessibilityState) == null ? void 0 : _a.disabled);
+    const useAnimations = (_b = tamaguiConfig.animations) == null ? void 0 : _b.useAnimations;
+    const nextIsAnimated = !!(useAnimations && props.animation);
+    const isAnimated = nextIsAnimated || state.hasAnimation;
+    if (nextIsAnimated && !state.hasAnimation) {
+      setStateShallow({ hasAnimation: true });
     }
-  }
-  __name(addPseudoToStyles, "addPseudoToStyles");
-  const component = (0, import_react.forwardRef)((props, forwardedRef) => {
-    var _a, _c, _d;
-    props = tamaguiDefaultProps && !props.asChild ? __spreadValues(__spreadValues({}, tamaguiDefaultProps), props) : props;
-    const { Component, componentName, isText, isZStack } = staticConfig;
+    const isTaggable = !Component || typeof Component === "string";
+    const element = import_constants.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 splitStyles = (0, import_getSplitStyles.useSplitStyles)(
+      props,
+      staticConfig,
+      theme,
+      splitStyleState,
+      props.asChild ? null : initialSplitStyles,
+      languageContext || void 0,
+      elementType,
+      debugProp
+    );
+    const hostRef = (0, import_useServerHooks.useServerRef)(null);
+    const isReactNative = Boolean(
+      staticConfig.isReactNative || isAnimated && tamaguiConfig.animations.isReactNative
+    );
+    const isAnimatedReactNativeWeb = isAnimated && avoidClassesWhileAnimating;
     if (process.env.NODE_ENV === "development") {
-      if (props["debug"]) {
-        console.log("\u26A0\uFE0F", staticConfig.componentName || (Component == null ? void 0 : Component.displayName) || (Component == null ? void 0 : Component.name) || "[Unnamed Component]", "debug on");
-        console.log("props in:", props, Object.keys(props));
-        if (props["debug"] === "break")
+      if (!process.env.TAMAGUI_TARGET) {
+        console.error(`No process.env.TAMAGUI_TARGET set, please set it to "native" or "web".`);
+      }
+      if (debugProp) {
+        const name = `${componentName || (Component == null ? void 0 : Component.displayName) || (Component == null ? void 0 : Component.name) || "[Unnamed Component]"}`;
+        const type = isReactNative ? "rnw" : "tamagui";
+        const banner = `${name} ${propsIn["data-is"] || ""} ${type}`;
+        console.group(`%c \u{1F41B} ${banner}`, "background: yellow;");
+        console.groupCollapsed("initial props/state");
+        console.log("propsIn", propsIn, "turned into", props, "order", Object.keys(props));
+        console.log("splitStyles", splitStyles);
+        console.log("className", Object.values(splitStyles.classNames));
+        if (typeof window !== "undefined") {
+          console.log("ref", hostRef, "(click to view)");
+        }
+        console.groupEnd();
+        if (debugProp === "break") {
           debugger;
+        }
       }
     }
-    const forceUpdate = (0, import_use_force_update.useForceUpdate)();
-    const theme = (0, import_useTheme.useTheme)(props.theme, staticConfig.componentName, props, forceUpdate);
-    const [state, set_] = (0, import_react.useState)(defaultComponentState);
-    const setStateShallow = (0, import_createShallowUpdate.createShallowUpdate)(set_);
-    const shouldAvoidClasses = !!(props.animation && avoidClasses);
-    const splitStyles = (0, import_getSplitStyles.useSplitStyles)(props, staticConfig, theme, shouldAvoidClasses ? __spreadProps(__spreadValues({}, state), { noClassNames: true, resolveVariablesAs: "value" }) : state, shouldAvoidClasses || props.asChild ? null : initialSplitStyles.classNames);
-    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 features = (0, import_useFeatures.useFeatures)(props, {
-      forceUpdate,
-      setStateShallow,
-      useAnimations,
-      state,
-      style: props.animation ? __spreadValues(__spreadValues({}, defaultNativeStyle), style) : null,
+    const {
+      viewProps: viewPropsIn,
       pseudos,
-      staticConfig,
-      theme,
-      onDidAnimate: props.onDidAnimate
-    });
-    const _b = viewPropsIn, {
-      tag,
+      medias,
+      style: splitStylesStyle,
+      classNames,
+      mediaKeys
+    } = splitStyles;
+    const animationFeatureStylesIn = props.animation ? { ...defaultNativeStyle, ...splitStylesStyle } : null;
+    const propsWithAnimation = props;
+    let animationStyles;
+    if (!import_constants.isRSC && isAnimated && useAnimations) {
+      const animations = useAnimations(propsWithAnimation, {
+        state,
+        pseudos,
+        onDidAnimate: props.onDidAnimate,
+        hostRef,
+        staticConfig,
+        getStyle({ isExiting, isEntering, exitVariant, enterVariant } = {}) {
+          var _a2, _b2, _c2, _d2;
+          const style = animationFeatureStylesIn;
+          const enterStyle = isEntering ? enterVariant && ((_a2 = staticConfig.variants) == null ? void 0 : _a2[enterVariant]["true"]) ? (0, import_getSplitStyles.getSubStyle)(
+            "",
+            (_b2 = staticConfig.variants) == null ? void 0 : _b2[enterVariant]["true"],
+            staticConfig,
+            theme,
+            props,
+            state,
+            tamaguiConfig
+          ) || pseudos.enterStyle : pseudos.enterStyle : null;
+          const exitStyle = isExiting ? exitVariant && ((_c2 = staticConfig.variants) == null ? void 0 : _c2[exitVariant]["true"]) ? (0, import_getSplitStyles.getSubStyle)(
+            "",
+            (_d2 = staticConfig.variants) == null ? void 0 : _d2[exitVariant]["true"],
+            staticConfig,
+            theme,
+            props,
+            state,
+            tamaguiConfig
+          ) || pseudos.exitStyle : pseudos.exitStyle : null;
+          ensureBaseHasDefaults(
+            style,
+            pseudos.hoverStyle,
+            pseudos.focusStyle,
+            pseudos.pressStyle
+          );
+          enterStyle && isEntering && merge(style, enterStyle);
+          state.hover && pseudos.hoverStyle && merge(style, pseudos.hoverStyle);
+          state.focus && pseudos.focusStyle && merge(style, pseudos.focusStyle);
+          state.press && pseudos.pressStyle && merge(style, pseudos.pressStyle);
+          exitStyle && isExiting && merge(style, exitStyle);
+          if (process.env.NODE_ENV === "development") {
+            if (debugProp === "verbose") {
+              console.log("animation style", style);
+            }
+          }
+          return style;
+        }
+      });
+      if (animations) {
+        animationStyles = animations.style;
+      }
+    }
+    (0, import_constants.useIsomorphicLayoutEffect)(() => {
+      if (!mediaKeys.length)
+        return;
+      const disposers = [];
+      for (const key of mediaKeys) {
+        disposers.push(
+          (0, import_useMedia.addMediaQueryListener)(key, (next) => {
+            setState((prev) => {
+              if (prev.mediaState[key] !== next) {
+                return {
+                  ...prev,
+                  mediaState: getMediaStateObject({
+                    ...prev.mediaState,
+                    [key]: next
+                  })
+                };
+              }
+              return prev;
+            });
+          })
+        );
+      }
+      return () => {
+        for (const disposer of disposers) {
+          disposer();
+        }
+      };
+    }, [mediaKeys.join(",")]);
+    const {
       hitSlop,
       asChild,
       children,
-      pointerEvents,
       onPress,
       onPressIn,
       onPressOut,
       onHoverIn,
       onHoverOut,
-      space,
-      disabled,
+      themeShallow,
+      space: spaceProp,
+      spaceDirection: _spaceDirection,
+      disabled: disabledProp,
+      onMouseUp,
+      onMouseDown,
       onMouseEnter,
       onMouseLeave,
       hrefAttrs,
-      onMoveShouldSetResponder,
-      onMoveShouldSetResponderCapture,
-      onResponderEnd,
-      onResponderGrant,
-      onResponderMove,
-      onResponderReject,
-      onResponderRelease,
-      onResponderStart,
-      onResponderTerminate,
-      onResponderTerminationRequest,
-      onScrollShouldSetResponder,
-      onScrollShouldSetResponderCapture,
-      onSelectionChangeShouldSetResponder,
-      onSelectionChangeShouldSetResponderCapture,
-      onStartShouldSetResponder,
-      onStartShouldSetResponderCapture,
-      onMouseDown,
-      nativeID,
-      accessible,
-      accessibilityRole,
-      collapsable,
-      focusable,
+      separator,
+      forceStyle: _forceStyle,
       onClick,
       theme: _themeProp,
       defaultVariants,
-      onLayout
-    } = _b, viewPropsRest = __objRest(_b, [
-      "tag",
-      "hitSlop",
-      "asChild",
-      "children",
-      "pointerEvents",
-      "onPress",
-      "onPressIn",
-      "onPressOut",
-      "onHoverIn",
-      "onHoverOut",
-      "space",
-      "disabled",
-      "onMouseEnter",
-      "onMouseLeave",
-      "hrefAttrs",
-      "onMoveShouldSetResponder",
-      "onMoveShouldSetResponderCapture",
-      "onResponderEnd",
-      "onResponderGrant",
-      "onResponderMove",
-      "onResponderReject",
-      "onResponderRelease",
-      "onResponderStart",
-      "onResponderTerminate",
-      "onResponderTerminationRequest",
-      "onScrollShouldSetResponder",
-      "onScrollShouldSetResponderCapture",
-      "onSelectionChangeShouldSetResponder",
-      "onSelectionChangeShouldSetResponderCapture",
-      "onStartShouldSetResponder",
-      "onStartShouldSetResponderCapture",
-      "onMouseDown",
-      "nativeID",
-      "accessible",
-      "accessibilityRole",
-      "collapsable",
-      "focusable",
-      "onClick",
-      "theme",
-      "defaultVariants",
-      "onLayout"
-    ]);
-    let viewProps = viewPropsRest;
-    if (process.env.NODE_ENV === "development" && !isText && import_platform.isWeb) {
-      import_react.Children.toArray(props.children).forEach((item) => {
-        if (typeof item === "string") {
-          console.error(`Unexpected text node: ${item}. A text node cannot be a child of a <View>.`);
-        }
-      });
-    }
-    const hasTextAncestor = import_platform.isWeb ? (0, import_react.useContext)(import_TextAncestorContext.TextAncestorContext) : false;
-    const hostRef = (0, import_react.useRef)(null);
-    const internal = (0, import_react.useRef)();
-    if (!internal.current) {
-      internal.current = {
-        isMounted: true
-      };
-    }
-    (0, import_platform.useIsomorphicLayoutEffect)(() => {
-      if (typeof window !== "undefined" && (hasEnterStyle || props.animation)) {
-        setStateShallow({
-          mounted: true
-        });
-      }
-      internal.current.isMounted = true;
-      return () => {
-        mouseUps.delete(unPress);
-        internal.current.isMounted = false;
-      };
-    }, [hasEnterStyle, props.animation]);
-    if (nativeID) {
-      viewProps.id = nativeID;
-    }
-    if (import_platform.isAndroid) {
-      if (collapsable)
-        viewProps.collapsable = collapsable;
-      if (focusable)
-        viewProps.focusable = focusable;
-    }
-    if (!import_platform.isWeb) {
-      if (accessible)
-        viewProps.accessible = accessible;
-      if (accessibilityRole)
-        viewProps.accessibilityRole = accessibilityRole;
-    }
-    if (import_platform.isWeb && !asChild) {
-      import_rnw.rnw.useResponderEvents(hostRef, {
+      ...nonTamaguiProps
+    } = viewPropsIn;
+    const disabled = props.accessibilityState != null && props.accessibilityState.disabled === true || props.accessibilityDisabled;
+    let viewProps;
+    if (process.env.TAMAGUI_TARGET === "web" && !isReactNative) {
+      const {
         onMoveShouldSetResponder,
         onMoveShouldSetResponderCapture,
         onResponderEnd,
@@ -317,71 +333,38 @@ function createComponent(configIn, ParentComponent) {
         onSelectionChangeShouldSetResponder,
         onSelectionChangeShouldSetResponderCapture,
         onStartShouldSetResponder,
-        onStartShouldSetResponderCapture
-      });
-    }
-    const isTaggable = !Component || typeof Component === "string";
-    const element = import_platform.isWeb ? isTaggable ? tag || Component : Component : Component;
-    const BaseTextComponent = !import_platform.isWeb ? import_react_native.Text : element || "span";
-    const BaseViewComponent = !import_platform.isWeb ? import_react_native.View : element || (hasTextAncestor ? "span" : "div");
-    let ViewComponent = isText ? (isAnimated ? AnimatedText || import_react_native.Text : null) || BaseTextComponent : (isAnimated ? AnimatedView || import_react_native.View : null) || BaseViewComponent;
-    ViewComponent = Component || ViewComponent;
-    let styles;
-    const isStringElement = typeof ViewComponent === "string";
-    const animationStyles = state.animation ? state.animation.style : null;
-    if (isStringElement && shouldAvoidClasses) {
-      styles = __spreadValues(__spreadValues(__spreadValues({}, defaultNativeStyle), animationStyles), medias);
-    } else {
-      styles = [
-        import_platform.isWeb ? null : defaultNativeStyleSheet ? defaultNativeStyleSheet.base : null,
-        animationStyles ? animationStyles : style,
-        medias
-      ];
-      if (!animationStyles) {
-        !state.mounted && addPseudoToStyles(styles, "enterStyle", pseudos);
-        state.hover && addPseudoToStyles(styles, "hoverStyle", pseudos);
-        state.focus && addPseudoToStyles(styles, "focusStyle", pseudos);
-        state.press && addPseudoToStyles(styles, "pressStyle", pseudos);
-      }
-    }
-    if (import_platform.isWeb) {
-      if (!shouldAvoidClasses) {
-        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(" ");
-        if (process.env.NODE_ENV === "development") {
-          if (props["debug"]) {
-            console.log("  \xBB className", { isStringElement, pseudos, state, classNames, propsClassName: props.className, style, classList, className: className.trim().split(" "), themeClassName: theme.className, values: Object.fromEntries(Object.entries(classNames).map(([k, v]) => [v, (0, import_insertStyleRule.getAllSelectors)()[v]])) });
-          }
-        }
-        viewProps.className = className;
-        viewProps.style = animationStyles;
-      } else {
-        viewProps.style = styles;
-      }
-    } else {
-      viewProps.style = styles;
-    }
-    if (pointerEvents) {
-      viewProps.pointerEvents = pointerEvents;
-    }
-    if (import_platform.isWeb) {
-      const platformMethodsRef = import_rnw.rnw.usePlatformMethods(viewProps);
-      const setRef = import_rnw.rnw.useMergeRefs(hostRef, platformMethodsRef, forwardedRef);
-      if (!isAnimated) {
-        viewProps.ref = setRef;
-      } else {
-        if (forwardedRef) {
-          viewProps.ref = forwardedRef;
-        }
+        onStartShouldSetResponderCapture,
+        collapsable,
+        focusable,
+        accessible,
+        accessibilityDisabled,
+        onLayout,
+        ...webProps
+      } = nonTamaguiProps;
+      viewProps = webProps;
+      if (!import_constants.isRSC) {
+        usePlatformMethods(hostRef);
+        (0, import_useElementLayout.useElementLayout)(hostRef, onLayout);
+        (0, import_react_native_use_responder_events.useResponderEvents)(hostRef, {
+          onMoveShouldSetResponder,
+          onMoveShouldSetResponderCapture,
+          onResponderEnd,
+          onResponderGrant,
+          onResponderMove,
+          onResponderReject,
+          onResponderRelease,
+          onResponderStart,
+          onResponderTerminate,
+          onResponderTerminationRequest,
+          onScrollShouldSetResponder,
+          onScrollShouldSetResponderCapture,
+          onSelectionChangeShouldSetResponder,
+          onSelectionChangeShouldSetResponderCapture,
+          onStartShouldSetResponder,
+          onStartShouldSetResponderCapture
+        });
       }
-      if (props.href != null && hrefAttrs != null) {
+      if (props.href != void 0 && hrefAttrs != void 0) {
         const { download, rel, target } = hrefAttrs;
         if (download != null) {
           viewProps.download = download;
@@ -393,210 +376,414 @@ function createComponent(configIn, ParentComponent) {
           viewProps.target = target.charAt(0) !== "_" ? "_" + target : target;
         }
       }
-    } else {
-      if (forwardedRef) {
-        viewProps.ref = forwardedRef;
+      const _focusable = focusable != void 0 ? focusable : accessible;
+      const role = viewProps.role;
+      if (_focusable === false) {
+        viewProps.tabIndex = "-1";
+      }
+      if (elementType === "a" || elementType === "button" || elementType === "input" || elementType === "select" || elementType === "textarea") {
+        if (_focusable === false || accessibilityDisabled === true) {
+          viewProps.tabIndex = "-1";
+        }
+      } else if (role === "button" || role === "checkbox" || role === "link" || role === "radio" || role === "textbox" || role === "switch") {
+        if (_focusable !== false) {
+          viewProps.tabIndex = "0";
+        }
       }
+      if (_focusable === true) {
+        viewProps.tabIndex = "0";
+      }
+    } else {
+      viewProps = nonTamaguiProps;
+    }
+    viewProps.ref = (0, import_compose_refs.useComposedRefs)(hostRef, forwardedRef, setMounted);
+    if (process.env.NODE_ENV === "development" && !isText && import_constants.isWeb && !staticConfig.isHOC) {
+      import_react.Children.toArray(props.children).forEach((item) => {
+        if (typeof item === "string") {
+          console.error(`Unexpected text node: ${item}. A text node cannot be a child of a <View>.`);
+        }
+      });
     }
-    const initialPseudos = initialSplitStyles.pseudos;
-    const attachPress = !!(pseudos && pseudos.pressStyle || initialPseudos && initialPseudos.pressStyle || onPress || onPressOut || onPressIn || onClick);
-    const isTouch = (0, import_useIsTouchDevice.useIsTouchDevice)();
-    const isHoverable = import_platform.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 || import_platform.isWeb && ("hoverStyle" in props || "onHoverIn" in props || "onHoverOut" in props || "onMouseEnter" in props || "onMouseLeave" in props));
     const unPress = (0, import_react.useCallback)(() => {
-      if (!internal.current.isMounted)
-        return;
       setStateShallow({
         press: false,
         pressIn: false
       });
-    }, []);
-    const events = shouldAttach ? __spreadProps(__spreadValues({
-      [pressOutKey]: attachPress ? (e) => {
-        unPress();
-        onPressOut == null ? void 0 : onPressOut(e);
-      } : void 0
-    }, isHoverable && {
-      onMouseEnter: attachHover ? (e) => {
-        let next = {};
-        if (attachHover) {
-          next.hover = true;
-        }
-        if (state.pressIn) {
-          next.press = true;
-        }
-        if (Object.keys(next).length) {
-          setStateShallow(next);
+    }, [setStateShallow]);
+    if (!import_constants.isRSC) {
+      (0, import_react.useEffect)(() => {
+        return () => {
+          mouseUps.delete(unPress);
+        };
+      }, [unPress]);
+    }
+    let styles;
+    if (isStringElement && shouldAvoidClasses && !shouldForcePseudo) {
+      styles = {
+        ...defaultNativeStyle,
+        ...animationStyles ?? splitStylesStyle,
+        ...medias
+      };
+    } else {
+      styles = [import_constants.isWeb ? null : defaultNativeStyle, animationStyles ?? splitStylesStyle, medias];
+      if (!animationStyles && initialSplitStyles) {
+        const initPseudos = initialSplitStyles.pseudos;
+        !state.mounted && addPseudoToStyles(styles, initPseudos, pseudos, "enterStyle");
+        state.hover && addPseudoToStyles(styles, initPseudos, pseudos, "hoverStyle", shouldForcePseudo);
+        state.focus && addPseudoToStyles(styles, initPseudos, pseudos, "focusStyle", shouldForcePseudo);
+        state.press && addPseudoToStyles(styles, initPseudos, pseudos, "pressStyle", shouldForcePseudo);
+      }
+      if (shouldForcePseudo) {
+        const next = {};
+        for (const style of styles) {
+          if (style) {
+            Object.assign(next, style);
+          }
         }
-        onHoverIn == null ? void 0 : onHoverIn(e);
-        onMouseEnter == null ? void 0 : onMouseEnter(e);
-      } : void 0,
-      onMouseLeave: attachHover ? (e) => {
-        let next = {};
-        mouseUps.add(unPress);
-        if (attachHover) {
-          next.hover = false;
+        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,
+      theme.className,
+      classNames ? Object.values(classNames).join(" ") : ""
+    ];
+    const className = classList.join(" ");
+    if (process.env.TAMAGUI_TARGET === "web") {
+      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;
         }
-        if (state.pressIn) {
-          next.press = false;
-          next.pressIn = false;
+        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 = {});
+              viewProps.dataSet[key.replace("data-", "")] = viewProps[key];
+              delete viewProps[key];
+            }
+          });
         }
-        if (Object.keys(next).length) {
-          setStateShallow(next);
+      } 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 ?? (weight2 = (_a2 = styles[i]) == null ? void 0 : _a2.fontWeight);
+              style2 ?? (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;
+              }
+            }
+          }
         }
-        onHoverOut == null ? void 0 : onHoverOut(e);
-        onMouseLeave == null ? void 0 : onMouseLeave(e);
-      } : void 0
-    }), {
-      [pressInKey]: attachPress ? (e) => {
+      }
+      viewProps.style = styles;
+    }
+    const initialPseudos = initialSplitStyles == null ? void 0 : initialSplitStyles.pseudos;
+    const attachPress = !!((pseudos == null ? void 0 : pseudos.pressStyle) || (initialPseudos == null ? void 0 : initialPseudos.pressStyle) || onPress || onPressOut || onPressIn || onClick);
+    const isHoverable = import_constants.isWeb;
+    const attachHover = isHoverable && !!(pseudos && pseudos.hoverStyle || onHoverIn || onHoverOut || onMouseEnter || onMouseLeave);
+    const handlesPressEvents = !import_constants.isWeb && !asChild;
+    const shouldAttach = asChild ? false : Boolean(
+      attachPress || attachHover || "pressStyle" in props || "onPress" in props || "onPressIn" in props || "onPressOut" in props || import_constants.isWeb && ("hoverStyle" in props || "onHoverIn" in props || "onHoverOut" in props || "onMouseEnter" in props || "onMouseLeave" in props)
+    );
+    const events = shouldAttach && !import_constants.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 (attachHover || state.pressIn) {
+            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
+      },
+      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 (import_platform.isWeb) {
+        if (import_constants.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
-    }) : null;
-    const childEls = !children || asChild ? children : (0, import_wrapThemeManagerContext.wrapThemeManagerContext)(spacedChildren({
-      children,
-      space,
-      direction: props.spaceDirection || "both",
-      isZStack
-    }), (0, import_useTheme.getThemeManagerIfChanged)(theme));
-    let content;
-    if (import_platform.isWeb) {
-      if (staticConfig.isReactNativeWeb) {
-        viewProps.dataSet = __spreadProps(__spreadValues({}, viewProps.dataSet), {
-          className: viewProps.className
-        });
-      } else {
-        const rnProps = import_rnw.rnw.createDOMProps(viewProps);
-        const className = rnProps.className && rnProps.className !== viewProps.className ? `${rnProps.className} ${viewProps.className}` : viewProps.className;
-        Object.assign(viewProps, rnProps);
-        if (className) {
-          viewProps.className = className;
+      } : void 0,
+      ...!import_constants.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 (state.mediaState && mediaKeys.length) {
+      for (const key in state.mediaState) {
+        if (state.mediaState[key] && props[key] && props[key].space !== void 0) {
+          space = props[key].space;
         }
       }
     }
+    const themeManager = (0, import_useTheme.getThemeManager)(theme);
+    const shouldSetChildrenThemeToParent = Boolean(
+      themeShallow && themeManager && themeManager.didChangeTheme
+    );
+    const shouldProvideThemeManager = shouldSetChildrenThemeToParent || themeManager && themeManager.didChangeTheme;
+    const childEls = !children || asChild ? children : (0, import_Theme.wrapThemeManagerContext)(
+      spacedChildren({
+        separator,
+        children,
+        space,
+        direction: props.spaceDirection || "both",
+        isZStack
+      }),
+      shouldProvideThemeManager ? themeManager : void 0,
+      shouldSetChildrenThemeToParent
+    );
+    let content;
     if (asChild) {
-      ViewComponent = import_Slot.Slot;
-      const onlyChild = import_react.default.Children.only(children);
-      Object.assign(viewProps, onlyChild.props);
-    }
-    if (import_platform.isWeb) {
-      const [pressableProps] = (0, import_usePressable.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);
-        }
-      }
+      elementType = import_Slot.Slot;
+      viewProps = {
+        ...viewProps,
+        onPress,
+        onPressIn,
+        onPressOut
+      };
     }
-    content = (0, import_react.createElement)(ViewComponent, viewProps, childEls);
-    if (!import_platform.isWeb) {
+    if (process.env.TAMAGUI_TARGET === "native") {
+      const attachFocus = !!(pseudos && pseudos.focusStyle || initialPseudos && initialPseudos.focusStyle);
+      if (attachFocus) {
+        viewProps.onFocus = (0, import_Slot.mergeEvent)(viewProps.onFocus, () => {
+          setStateShallow({ focus: true });
+        });
+        viewProps.onBlur = (0, import_Slot.mergeEvent)(viewProps.onBlur, () => {
+          setStateShallow({ focus: false });
+        });
+      }
+      const pressability = (0, import_Pressability.usePressability)(events);
       if (attachPress && events) {
-        content = /* @__PURE__ */ import_react.default.createElement(import_react_native.Pressable, {
-          onPressIn: events[pressInKey],
-          onPress: events[pressKey]
-        }, /* @__PURE__ */ import_react.default.createElement(import_nativeGestureHandler.BaseButton, {
-          onActiveStateChange: (isActive) => {
-            if (!isActive) {
-              unPress();
-            }
-          }
-        }, content));
+        if (hitSlop) {
+          viewProps.hitSlop = hitSlop;
+        }
+        for (const key in pressability) {
+          const og = props[key];
+          const val = pressability[key];
+          viewProps[key] = og && !dontComposePressabilityKeys[key] ? (0, import_helpers.composeEventHandlers)(og, val) : val;
+        }
       }
     }
-    if (import_platform.isWeb && events && attachHover) {
-      content = /* @__PURE__ */ import_react.default.createElement("span", {
-        className: "tui_Hoverable",
-        style: {
-          display: "contents"
-        },
-        onMouseEnter: events.onMouseEnter,
-        onMouseLeave: events.onMouseLeave
-      }, content);
-    }
-    if (process.env.NODE_ENV === "development") {
-      if (props["debug"]) {
-        console.log("  \xBB ", __spreadValues({ propsIn: __spreadValues({}, props), propsOut: __spreadValues({}, viewProps), state, splitStyles, animationStyles, isStringElement, classNamesIn: (_c = props.className) == null ? void 0 : _c.split(" "), classNamesOut: (_d = viewProps.className) == null ? void 0 : _d.split(" "), events, shouldAttach, ViewComponent, viewProps, styles, pseudos, content, childEls, shouldAvoidClasses, avoidClasses, animation: props.animation, style, defaultNativeStyle, initialSplitStyles }, typeof window !== "undefined" ? { theme, themeState: theme.__state, themeClassName: theme.className, staticConfig, tamaguiConfig } : null));
+    content = (0, import_react.createElement)(elementType, viewProps, childEls);
+    if (process.env.TAMAGUI_TARGET === "web") {
+      if (events || isAnimatedReactNativeWeb) {
+        content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+          style: styleDisplayContents,
+          className: isAnimatedReactNativeWeb ? className : void 0,
+          ...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 (features.length) {
-      return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, features, content);
+    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({ 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, initialSplitStyles, ...typeof window !== "undefined" ? { theme, themeClassName: theme.className, staticConfig, tamaguiConfig, events, shouldAvoidClasses, shouldForcePseudo, classNames: Object.fromEntries(Object.entries(classNames).map(([k, v]) => [v, (0, import_insertStyleRule.getAllSelectors)()[v]])) } : null });
+        }
+        console.groupEnd();
+      }
     }
     return content;
   });
-  component.displayName = staticConfig.componentName;
-  (0, import_conf.onConfiguredOnce)((conf) => {
-    var _a, _b, _c, _d;
-    if (process.env.IS_STATIC === "is_static") {
-      return;
+  if (staticConfig.componentName) {
+    component.displayName = staticConfig.componentName;
+  }
+  (0, import_config.onConfiguredOnce)((conf) => {
+    if (!tamaguiConfig) {
+      tamaguiConfig = conf;
+      if (!defaultComponentState) {
+        defaultComponentState = {
+          hover: false,
+          press: false,
+          pressIn: false,
+          focus: false,
+          mounted: false,
+          mediaState: getMediaStateObject((0, import_useMedia.getInitialMediaState)())
+        };
+        defaultComponentStateMounted = {
+          ...defaultComponentState,
+          mounted: true
+        };
+      }
+      if (tamaguiConfig.animations) {
+        AnimatedText = tamaguiConfig.animations.Text;
+        AnimatedView = tamaguiConfig.animations.View;
+      }
+      if (!initialTheme) {
+        const next = conf.themes[Object.keys(conf.themes)[0]];
+        initialTheme = (0, import_proxyThemeVariables.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 || (0, import_proxyThemeVariables.proxyThemeVariables)(conf.themes[conf.defaultTheme || Object.keys(conf.themes)[0]]);
-    initialSplitStyles = (0, import_getSplitStyles.insertSplitStyles)(staticConfig.defaultProps, staticConfig, initialTheme, {
-      mounted: true,
-      hover: false,
-      press: false,
-      pressIn: false,
-      focus: false,
-      resolveVariablesAs: "both",
-      keepVariantsAsProps: true
-    });
-    const defaults = __spreadValues(__spreadValues({}, component.defaultProps), initialSplitStyles.viewProps);
+    let defaultPropsIn = staticConfig.defaultProps || {};
+    const parentNames = [...staticConfig.parentNames || [], staticConfig.componentName];
+    if (tamaguiConfig.defaultProps && parentNames && staticConfig.componentName) {
+      defaultPropsIn = mergeConfigDefaultProps(
+        staticConfig.componentName,
+        defaultPropsIn,
+        tamaguiConfig.defaultProps,
+        parentNames,
+        tamaguiConfig
+      );
+    }
+    const debug = defaultPropsIn["debug"];
+    const [ourProps, ourClassNames] = (0, import_mergeProps.mergeProps)(defaultPropsIn, {}, true);
+    if (ourProps.tag) {
+      defaultTag = ourProps.tag;
+    }
+    const noClassNames = !staticConfig.acceptsClassName;
+    initialSplitStyles = (0, import_getSplitStyles.insertSplitStyles)(
+      ourProps,
+      staticConfig,
+      initialTheme,
+      {
+        mounted: true,
+        hover: false,
+        press: false,
+        pressIn: false,
+        focus: false,
+        resolveVariablesAs: "both",
+        noClassNames,
+        keepVariantsAsProps: true
+      },
+      void 0,
+      void 0,
+      debug
+    );
+    const [defaults2, defaultsClassnames] = (0, import_mergeProps.mergeProps)(
+      component.defaultProps,
+      initialSplitStyles.viewProps,
+      true
+    );
+    initialSplitStyles.classNames = {
+      ...defaultsClassnames,
+      ...initialSplitStyles.classNames,
+      ...ourClassNames
+    };
     defaultNativeStyle = {};
-    const validStyles = staticConfig.validStyles || import_helpers.stylePropsView;
-    for (const key in staticConfig.defaultProps) {
-      const val = staticConfig.defaultProps[key];
-      if (typeof val === "string" && val[0] === "$" || !validStyles[key]) {
-        defaults[key] = val;
-      } else {
-        defaultNativeStyle[key] = val;
+    const validStyles2 = staticConfig.validStyles || import_helpers.stylePropsView;
+    if (!import_constants.isWeb) {
+      for (const key in staticConfig.defaultProps) {
+        const val = staticConfig.defaultProps[key];
+        if (import_helpers.validPseudoKeys[key])
+          continue;
+        if (typeof val === "string" && val[0] === "$" || !validStyles2[key]) {
+          defaults2[key] = val;
+        } else {
+          defaultNativeStyle[key] = val;
+        }
       }
     }
-    defaultNativeStyleSheet = import_react_native.StyleSheet.create({
-      base: defaultNativeStyle
-    });
-    if (Object.keys(defaults).length) {
-      tamaguiDefaultProps = defaults;
+    if (Object.keys(defaults2).length) {
+      tamaguiDefaultProps = defaults2;
     }
-    if (process.env.NODE_ENV === "development" && ((_d = staticConfig.defaultProps) == null ? void 0 : _d.debug)) {
+    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
+          defaults: defaults2,
+          defaultPropsIn,
+          defaultPropsKeyOrder: Object.keys(staticConfig.defaultProps),
+          defaultPropsInKeyOrder: Object.keys(defaultPropsIn).map((k) => [k, defaultPropsIn[k]]),
+          ourProps,
+          ourClassNames,
+          defaultsClassnames,
+          defaultTag,
+          noClassNames
         });
       }
     }
@@ -605,35 +792,46 @@ function createComponent(configIn, ParentComponent) {
   if (configIn.memo) {
     res = (0, import_react.memo)(res);
   }
-  res["staticConfig"] = __spreadValues({
-    validStyles: staticConfig.validStyles || import_helpers.stylePropsView
-  }, staticConfig);
-  if (process.env.NODE_ENV === "development") {
-    res["whyDidYouRender"] = true;
-  }
-  res["extractable"] = (Component, conf) => {
-    Component["staticConfig"] = (0, import_extendStaticConfig.extendStaticConfig)(__spreadProps(__spreadValues({
-      Component
-    }, conf), {
-      neverFlatten: true,
-      defaultProps: __spreadValues(__spreadValues({}, Component.defaultProps), conf == null ? void 0 : conf.defaultProps)
-    }), res);
+  res.staticConfig = {
+    validStyles: staticConfig.validStyles || import_helpers.stylePropsView,
+    ...staticConfig
+  };
+  res.extractable = (Component, conf) => {
+    Component.staticConfig = (0, import_extendStaticConfig.extendStaticConfig)(
+      {
+        Component,
+        ...conf,
+        neverFlatten: true,
+        isHOC: true,
+        defaultProps: {
+          ...Component.defaultProps,
+          ...conf == null ? void 0 : conf.defaultProps
+        }
+      },
+      res
+    );
     return Component;
   };
   return res;
 }
-__name(createComponent, "createComponent");
+const Unspaced = (props) => {
+  return props.children;
+};
+Unspaced["isUnspaced"] = true;
 const Spacer = createComponent({
   memo: true,
   componentName: "Spacer",
-  defaultProps: __spreadProps(__spreadValues({}, import_constants.stackDefaultStyles), {
+  validStyles: import_helpers.validStyles,
+  defaultProps: {
+    ...import_constants2.stackDefaultStyles,
+    tag: "span",
     size: true
-  }),
+  },
   variants: {
     size: {
       "...size": (size, { tokens }) => {
         size = size == true ? "$true" : size;
-        const sizePx = tokens.size[size] ?? size;
+        const sizePx = tokens.space[size] ?? size;
         return {
           width: sizePx,
           height: sizePx,
@@ -644,7 +842,7 @@ const Spacer = createComponent({
     },
     flex: {
       true: {
-        flex: 1
+        flexGrow: 1
       }
     },
     direction: {
@@ -655,11 +853,9 @@ const Spacer = createComponent({
       vertical: {
         width: 0,
         minWidth: 0
-      }
+      },
+      both: {}
     }
-  },
-  defaultVariants: {
-    direction: "horizontal"
   }
 });
 function spacedChildren({
@@ -667,61 +863,234 @@ function spacedChildren({
   children,
   space,
   direction,
-  spaceFlex
+  spaceFlex,
+  separator
 }) {
-  var _a;
-  const childrenList = Array.isArray(children) ? children : import_react.Children.toArray(children);
-  const len = childrenList.length;
-  if (len <= 1) {
+  const hasSpace = !!(space || spaceFlex);
+  const hasSeparator = !(separator === void 0 || separator === null);
+  if (!hasSpace && !hasSeparator && !isZStack) {
+    return children;
+  }
+  const childrenList = import_react.Children.toArray(children);
+  if (childrenList.length <= 1 && !isZStack) {
     return childrenList;
   }
   const final = [];
   for (const [index, child] of childrenList.entries()) {
-    if (child === null || child === void 0 || child === false || Array.isArray(child) && child.length === 0) {
-      continue;
-    }
-    if (!child || child["key"] && !isZStack) {
+    const isEmpty = child === null || child === void 0 || Array.isArray(child) && child.length === 0;
+    if (isEmpty || !child || child["key"] && !isZStack) {
       final.push(child);
     } else {
-      final.push(/* @__PURE__ */ import_react.default.createElement(import_react.Fragment, {
-        key: index
-      }, isZStack ? /* @__PURE__ */ import_react.default.createElement(AbsoluteFill, null, child) : child));
+      final.push(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Fragment, {
+          children: isZStack ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AbsoluteFill, {
+            children: child
+          }) : child
+        }, index)
+      );
+    }
+    if (isUnspaced(child) && index === 0) {
+      continue;
     }
-    if ((_a = child["type"]) == null ? void 0 : _a["isVisuallyHidden"]) {
+    if (isZStack) {
       continue;
     }
     const next = childrenList[index + 1];
-    if (next && space) {
-      final.push(/* @__PURE__ */ import_react.default.createElement(Spacer, __spreadValues({
-        key: `_${index}_spacer`,
-        direction: direction === "both" ? void 0 : direction === "row" || direction === "row-reverse" ? "horizontal" : "vertical",
-        size: space
-      }, spaceFlex && {
-        flex: spaceFlex
-      })));
+    if (next && !isUnspaced(next)) {
+      if (separator) {
+        if (hasSpace) {
+          final.push(
+            createSpacer({
+              key: `_${index}_00tmgui`,
+              direction,
+              space,
+              spaceFlex
+            })
+          );
+        }
+        final.push(
+          import_react.default.isValidElement(separator) ? import_react.default.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
+          })
+        );
+      }
     }
   }
   return final;
 }
-__name(spacedChildren, "spacedChildren");
-function AbsoluteFill(props) {
-  return import_platform.isWeb ? /* @__PURE__ */ import_react.default.createElement("div", {
-    style: {
-      position: "absolute",
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0
-    }
-  }, props.children) : /* @__PURE__ */ import_react.default.createElement(import_react_native.View, {
-    style: import_react_native.StyleSheet.absoluteFill
-  }, props.child);
+function createSpacer({ key, direction, space, spaceFlex }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Spacer, {
+    size: space,
+    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 addPseudoToStyles(styles, initialPseudos, pseudos, name, force = false) {
+  const pseudoStyle = pseudos[name];
+  const shouldNestObject = import_constants.isWeb && name !== "enterStyle" && name !== "exitStyle";
+  const defaultPseudoStyle = initialPseudos[name];
+  const style = defaultPseudoStyle ? { ...defaultPseudoStyle, ...pseudoStyle } : pseudoStyle;
+  if (style) {
+    styles.push(shouldNestObject && !force ? { [name]: style } : style);
+  }
+}
+const DefaultProps = /* @__PURE__ */ new Map();
+function mergeConfigDefaultProps(name, props, configDefaults, parentNames, conf) {
+  const len = parentNames.length;
+  let prev;
+  for (let i = 0; i < len; i++) {
+    const n = parentNames[i];
+    if (!n)
+      continue;
+    if (DefaultProps.has(n)) {
+      prev = DefaultProps.get(n);
+      continue;
+    }
+    const props2 = configDefaults[n];
+    if (!props2) {
+      if (prev) {
+        DefaultProps.set(n, prev);
+      }
+      continue;
+    }
+    prev = (0, import_mergeProps.mergeProps)(prev || {}, props2, false, conf.inverseShorthands)[0];
+    DefaultProps.set(n, prev);
+  }
+  const ourDefaultsMerged = DefaultProps.get(name);
+  if (ourDefaultsMerged) {
+    return (0, import_mergeProps.mergeProps)(props, ourDefaultsMerged, false, conf.inverseShorthands)[0];
+  }
+  return props;
+}
+const defaults = {
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: 0,
+  opacity: 1,
+  translateX: 0,
+  translateY: 0,
+  skew: 0,
+  skewX: 0,
+  skewY: 0,
+  scale: 1,
+  rotate: "0deg",
+  rotateY: "0deg",
+  rotateX: "0deg"
+};
+function ensureBaseHasDefaults(base, ...pseudos) {
+  for (const pseudo of pseudos) {
+    if (!pseudo)
+      continue;
+    for (const key in pseudo) {
+      const val = pseudo[key];
+      if (key === "transform") {
+        if (typeof val === "string") {
+          continue;
+        }
+        for (const t of val) {
+          const tkey = Object.keys(t)[0];
+          const defaultVal = defaults[tkey];
+          const tDefaultVal = { [tkey]: defaultVal };
+          if (!base.transform) {
+            base.transform = [tDefaultVal];
+          } else {
+            if (!base.transform.find((x) => x[tkey])) {
+              base.transform.push(tDefaultVal);
+            }
+          }
+        }
+      } else {
+        if (!(key in base)) {
+          base[key] = defaults[key];
+        }
+      }
+    }
+  }
+}
+function merge(base, next) {
+  if (!next.transform || !base.transform) {
+    Object.assign(base, next);
+    return;
+  }
+  const { transform, ...rest } = next;
+  Object.assign(base, rest);
+  for (const t of transform) {
+    const key = Object.keys(t)[0];
+    const existing = base.transform.find((x) => key in x);
+    if (existing) {
+      existing[key] = t[key];
+    } else {
+      base.transform.push(t);
+    }
+  }
+}
+function usePlatformMethods(hostRef) {
+  (0, import_constants.useIsomorphicLayoutEffect)(() => {
+    const node = hostRef.current;
+    if (!node)
+      return;
+    node.measure = (callback) => (0, import_useElementLayout.measureLayout)(node, null, callback);
+    node.measureLayout = (relativeToNode, success) => (0, import_useElementLayout.measureLayout)(node, relativeToNode, success);
+    node.measureInWindow = (callback) => {
+      if (!node)
+        return;
+      setTimeout(() => {
+        const { height, left, top, width } = (0, import_useElementLayout.getRect)(node);
+        callback(left, top, width, height);
+      }, 0);
+    };
+  }, [hostRef]);
+}
+const AbsoluteFill = createComponent({
+  componentName: "AbsoluteFill",
+  defaultProps: {
+    ...import_constants2.stackDefaultStyles,
+    flexDirection: "column",
+    position: "absolute",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    pointerEvents: "box-none"
+  }
+});
+const styleDisplayContents = {
+  display: "contents"
+};
+const dontComposePressabilityKeys = {
+  onClick: true
+};
+function getMediaStateObject(obj) {
+  return Object.fromEntries(Object.entries(obj).flatMap(([k, v]) => v ? [[`$${k}`, v]] : []));
 }
-__name(AbsoluteFill, "AbsoluteFill");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  AbsoluteFill,
   Spacer,
+  Unspaced,
   createComponent,
   mouseUps,
   spacedChildren