@tamagui/core 1.0.0-beta.9 → 1.0.1-beta.101

package/dist/cjs/createComponent.js

@@ -21,7 +21,6 @@ var __spreadValues = (a, b) => {
   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)
@@ -52,41 +51,48 @@ var createComponent_exports = {};
 __export(createComponent_exports, {
   AbsoluteFill: () => AbsoluteFill,
   Spacer: () => Spacer,
+  Unspaced: () => Unspaced,
+  accessibilityRoleToWebRole: () => accessibilityRoleToWebRole,
   createComponent: () => createComponent,
   mouseUps: () => mouseUps,
+  processIDRefList: () => processIDRefList,
   spacedChildren: () => spacedChildren
 });
 module.exports = __toCommonJS(createComponent_exports);
 var import_helpers = require("@tamagui/helpers");
+var import_rnw = require("@tamagui/rnw");
 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_createVariable = require("./createVariable");
+var import_assignNativePropsToWeb = require("./helpers/assignNativePropsToWeb");
+var import_createPropMapper = require("./helpers/createPropMapper");
 var import_createShallowUpdate = require("./helpers/createShallowUpdate");
 var import_extendStaticConfig = require("./helpers/extendStaticConfig");
 var import_getSplitStyles = require("./helpers/getSplitStyles");
 var import_insertStyleRule = require("./helpers/insertStyleRule");
+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_useMedia = require("./hooks/useMedia");
 var import_usePressable = require("./hooks/usePressable");
 var import_useTheme = require("./hooks/useTheme");
+var import_Pressability = require("./Pressability");
 var import_Slot = require("./views/Slot");
 var import_TextAncestorContext = require("./views/TextAncestorContext");
 import_react.default["keep"];
-const defaultComponentState = {
+const defaultComponentState = Object.freeze({
   hover: false,
   press: false,
   pressIn: false,
   focus: false,
   mounted: false,
   animation: null
-};
+});
 const mouseUps = /* @__PURE__ */ new Set();
 if (typeof document !== "undefined") {
   document.addEventListener("mouseup", () => {
@@ -107,7 +113,6 @@ function mergeShorthands({ defaultProps }, { shorthands }) {
     defaultProps[shorthands[key] || key] = defaultProps[key];
   }
 }
-__name(mergeShorthands, "mergeShorthands");
 let initialTheme;
 function createComponent(configIn, ParentComponent) {
   const staticConfig = (() => {
@@ -118,7 +123,7 @@ function createComponent(configIn, ParentComponent) {
       return (0, import_extendStaticConfig.parseStaticConfig)(config);
     }
   })();
-  const componentClassName = `is_${staticConfig.componentName}`;
+  const defaultComponentClassName = `is_${staticConfig.componentName}`;
   let tamaguiConfig;
   let AnimatedText;
   let AnimatedView;
@@ -127,49 +132,68 @@ function createComponent(configIn, ParentComponent) {
   let defaultNativeStyleSheet;
   let tamaguiDefaultProps;
   let initialSplitStyles;
-  function addPseudoToStyles(styles, name, pseudos) {
-    const pseudoStyle = pseudos[name];
-    const shouldNestObject = import_platform.isWeb && name !== "enterStyle" && name !== "exitStyle";
-    if (pseudoStyle) {
-      styles.push(shouldNestObject ? { [name]: pseudoStyle } : pseudoStyle);
-    }
-    const defaultPseudoStyle = initialSplitStyles.pseudos[name];
-    if (defaultPseudoStyle) {
-      styles.push(shouldNestObject ? { [name]: defaultPseudoStyle } : defaultPseudoStyle);
+  const component = (0, import_react.forwardRef)((propsIn, forwardedRef) => {
+    var _a, _d, _e, _f;
+    let props;
+    if (tamaguiDefaultProps && !propsIn.asChild) {
+      props = (0, import_mergeProps.mergeProps)(tamaguiDefaultProps, propsIn)[0];
+    } else {
+      props = propsIn;
     }
-  }
-  __name(addPseudoToStyles, "addPseudoToStyles");
-  const component = (0, import_react.forwardRef)((props, forwardedRef) => {
-    var _a, _c, _d, _e;
-    props = tamaguiDefaultProps && !props.asChild ? __spreadValues(__spreadValues({}, tamaguiDefaultProps), props) : props;
-    const { Component, componentName, isText, isZStack } = staticConfig;
+    const hostRef = (0, import_react.useRef)(null);
+    const { Component, isText, isZStack } = staticConfig;
+    const componentName = props.componentName || staticConfig.componentName;
+    const componentClassName = props.asChild ? "" : props.componentName ? `is_${props.componentName}` : defaultComponentClassName;
     if (process.env.NODE_ENV === "development") {
       if (props["debug"]) {
-        console.warn(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")
+        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 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 theme = (0, import_useTheme.useTheme)(props.theme, componentName, props, forceUpdate);
+    const statesUsed = (0, import_react.useState)(defaultComponentState);
+    const setStateShallow = (0, import_createShallowUpdate.createShallowUpdate)(statesUsed[1]);
+    let state = statesUsed[0];
+    if (propsIn.forceStyle) {
+      state = __spreadProps(__spreadValues({}, state), {
+        [propsIn.forceStyle]: true
+      });
+    }
     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 shouldForcePseudo = !!propsIn.forceStyle;
+    const hasTextAncestor = !!(import_platform.isWeb ? (0, import_react.useContext)(import_TextAncestorContext.TextAncestorContext) : false);
+    const splitStyleState = !shouldAvoidClasses && !shouldForcePseudo ? __spreadProps(__spreadValues({}, state), {
+      hasTextAncestor,
+      dynamicStylesInline: true
+    }) : __spreadProps(__spreadValues({}, state), {
+      noClassNames: true,
+      dynamicStylesInline: true,
+      hasTextAncestor,
+      resolveVariablesAs: "value"
+    });
+    const splitStyles = (0, import_getSplitStyles.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 = (0, import_useFeatures.useFeatures)(props, {
       forceUpdate,
       setStateShallow,
       useAnimations,
       state,
-      style: props.animation ? __spreadValues(__spreadValues({}, defaultNativeStyle), style) : null,
+      style: animationFeatureStylesIn,
       pseudos,
       staticConfig,
       theme,
+      hostRef,
       onDidAnimate: props.onDidAnimate
     });
     const _b = viewPropsIn, {
@@ -177,87 +201,258 @@ function createComponent(configIn, ParentComponent) {
       hitSlop,
       asChild,
       children,
-      pointerEvents,
       onPress,
       onPressIn,
       onPressOut,
       onHoverIn,
       onHoverOut,
-      space,
-      disabled,
+      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, [
+      defaultVariants
+    } = _b, nonTamaguiProps = __objRest(_b, [
       "tag",
       "hitSlop",
       "asChild",
       "children",
-      "pointerEvents",
       "onPress",
       "onPressIn",
       "onPressOut",
       "onHoverIn",
       "onHoverOut",
       "space",
+      "spaceDirection",
       "disabled",
+      "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",
       "onClick",
       "theme",
-      "defaultVariants",
-      "onLayout"
+      "defaultVariants"
     ]);
-    let viewProps = viewPropsRest;
+    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 elementType = isText ? (isAnimated ? AnimatedText || import_react_native.Text : null) || BaseTextComponent : (isAnimated ? AnimatedView || import_react_native.View : null) || BaseViewComponent;
+    elementType = Component || elementType;
+    const isStringElement = typeof elementType === "string";
+    const disabled = props.accessibilityState != null && props.accessibilityState.disabled === true || props.accessibilityDisabled;
+    let viewProps;
+    if (process.env.TAMAGUI_TARGET === "web" && !staticConfig.isReactNativeWeb) {
+      const _c = nonTamaguiProps, {
+        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
+      } = _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"
+      ]);
+      viewProps = webProps;
+      (0, import_assignNativePropsToWeb.assignNativePropsToWeb)(elementType, viewProps, nonTamaguiProps);
+      (0, import_rnw.useElementLayout)(hostRef, onLayout);
+      (0, import_rnw.useResponderEvents)(hostRef, {
+        onMoveShouldSetResponder,
+        onMoveShouldSetResponderCapture,
+        onResponderEnd,
+        onResponderGrant,
+        onResponderMove,
+        onResponderReject,
+        onResponderRelease,
+        onResponderStart,
+        onResponderTerminate,
+        onResponderTerminationRequest,
+        onScrollShouldSetResponder,
+        onScrollShouldSetResponderCapture,
+        onSelectionChangeShouldSetResponder,
+        onSelectionChangeShouldSetResponderCapture,
+        onStartShouldSetResponder,
+        onStartShouldSetResponderCapture
+      });
+      const platformMethodsRef = (0, import_rnw.usePlatformMethods)(viewProps);
+      const setRef = (0, import_rnw.useMergeRefs)(hostRef, platformMethodsRef, forwardedRef);
+      viewProps.ref = setRef;
+      if (props.href != void 0 && hrefAttrs != void 0) {
+        const { download, rel, target } = hrefAttrs;
+        if (download != null) {
+          viewProps.download = download;
+        }
+        if (rel != null) {
+          viewProps.rel = rel;
+        }
+        if (typeof target === "string") {
+          viewProps.target = target.charAt(0) !== "_" ? "_" + target : target;
+        }
+      }
+      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;
+      if (forwardedRef) {
+        viewProps.ref = forwardedRef;
+      }
+    }
     if (process.env.NODE_ENV === "development" && !isText && import_platform.isWeb) {
       import_react.Children.toArray(props.children).forEach((item) => {
         if (typeof item === "string") {
@@ -265,8 +460,6 @@ function createComponent(configIn, ParentComponent) {
         }
       });
     }
-    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 = {
@@ -281,129 +474,76 @@ function createComponent(configIn, ParentComponent) {
       }
       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]);
-    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, {
-        onMoveShouldSetResponder,
-        onMoveShouldSetResponderCapture,
-        onResponderEnd,
-        onResponderGrant,
-        onResponderMove,
-        onResponderReject,
-        onResponderRelease,
-        onResponderStart,
-        onResponderTerminate,
-        onResponderTerminationRequest,
-        onScrollShouldSetResponder,
-        onScrollShouldSetResponderCapture,
-        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);
+    if (isStringElement && shouldAvoidClasses && !shouldForcePseudo) {
+      styles = __spreadValues(__spreadValues(__spreadValues({}, defaultNativeStyle), animationStyles ?? style), medias);
     } else {
       styles = [
         import_platform.isWeb ? null : defaultNativeStyleSheet ? defaultNativeStyleSheet.base : null,
-        animationStyles ? animationStyles : style,
+        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);
+        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);
       }
-    }
-    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]])) });
+      if (shouldForcePseudo) {
+        const next = {};
+        for (const style2 of styles) {
+          if (style2) {
+            Object.assign(next, style2);
           }
         }
-        viewProps.className = className;
-        viewProps.style = animationStyles;
-      } else {
-        viewProps.style = styles;
+        Object.assign(splitStyles.style, next);
       }
-    } 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;
-        }
-      }
-      if (props.href != null && hrefAttrs != null) {
-        const { download, rel, target } = hrefAttrs;
-        if (download != null) {
-          viewProps.download = download;
-        }
-        if (rel != null) {
-          viewProps.rel = rel;
-        }
-        if (typeof target === "string") {
-          viewProps.target = target.charAt(0) !== "_" ? "_" + target : target;
+    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"];
         }
+      } else {
+        viewProps.className = className;
       }
+      viewProps.style = style2;
     } else {
-      if (forwardedRef) {
-        viewProps.ref = forwardedRef;
-      }
+      viewProps.style = styles;
     }
     const initialPseudos = initialSplitStyles.pseudos;
-    const attachPress = !!(pseudos && pseudos.pressStyle || initialPseudos && initialPseudos.pressStyle || onPress || onPressOut || onPressIn || onClick);
+    const attachPress = !!((pseudos == null ? void 0 : pseudos.pressStyle) || (initialPseudos == null ? void 0 : 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 pressEventKey = isStringElement ? "onClick" : "onPress";
+    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)
@@ -413,14 +553,15 @@ function createComponent(configIn, ParentComponent) {
         pressIn: false
       });
     }, []);
-    const events = shouldAttach ? __spreadProps(__spreadValues(__spreadValues({}, !import_platform.isWeb && {
-      onPressOut: (e) => {
+    const events = shouldAttach ? __spreadValues(__spreadProps(__spreadValues({
+      [pressOutKey]: attachPress ? (e) => {
         unPress();
         onPressOut == null ? void 0 : onPressOut(e);
-      }
-    }), isHoverable && {
+        onMouseUp == null ? void 0 : onMouseUp(e);
+      } : void 0
+    }, isHoverable && {
       onMouseEnter: attachHover ? (e) => {
-        let next = {};
+        const next = {};
         if (attachHover) {
           next.hover = true;
         }
@@ -434,7 +575,7 @@ function createComponent(configIn, ParentComponent) {
         onMouseEnter == null ? void 0 : onMouseEnter(e);
       } : void 0,
       onMouseLeave: attachHover ? (e) => {
-        let next = {};
+        const next = {};
         mouseUps.add(unPress);
         if (attachHover) {
           next.hover = false;
@@ -450,7 +591,7 @@ function createComponent(configIn, ParentComponent) {
         onMouseLeave == null ? void 0 : onMouseLeave(e);
       } : void 0
     }), {
-      onMouseDown: attachPress ? (e) => {
+      [pressInKey]: attachPress ? (e) => {
         setStateShallow({
           press: true,
           pressIn: true
@@ -461,82 +602,145 @@ function createComponent(configIn, ParentComponent) {
           mouseUps.add(unPress);
         }
       } : null,
-      [pressEventKey]: attachPress ? (e) => {
+      [pressKey]: attachPress ? (e) => {
+        unPress();
         onClick == null ? void 0 : onClick(e);
         onPress == null ? void 0 : onPress(e);
-        unPress();
-        onPressOut == null ? void 0 : onPressOut(e);
       } : null
+    }), !import_platform.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;
+    let space = spaceProp;
+    if (features.enabled.mediaQuery) {
+      for (const key in import_useMedia.mediaState) {
+        if (!import_useMedia.mediaState[key])
+          continue;
+        if (props[key] && props[key].space !== void 0) {
+          space = props[key].space;
+        }
+      }
+    }
     const childEls = !children || asChild ? children : (0, import_wrapThemeManagerContext.wrapThemeManagerContext)(spacedChildren({
+      separator,
       children,
       space,
-      flexDirection: props.flexDirection || ((_c = staticConfig.defaultProps) == null ? void 0 : _c.flexDirection),
+      direction: props.spaceDirection || "both",
       isZStack
     }), (0, import_useTheme.getThemeManagerIfChanged)(theme));
-    const [pressProps] = (0, import_usePressable.usePressable)(events ? __spreadProps(__spreadValues({
-      disabled
-    }, hitSlop && {
-      hitSlop
-    }), {
-      onPressIn: events.onMouseDown,
-      onPressOut: events.onPressOut,
-      onPress: events[pressEventKey]
-    }) : {
-      disabled: true
-    });
     let content;
+    if (asChild) {
+      elementType = import_Slot.Slot;
+      viewProps = __spreadProps(__spreadValues({}, viewProps), {
+        onPress,
+        onPressIn,
+        onPressOut
+      });
+    }
     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;
+      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);
         }
       }
     }
-    if (events) {
-      if (!isStringElement) {
-        Object.assign(viewProps, pressProps);
-      } else {
-        Object.assign(viewProps, events);
+    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 });
+        });
       }
     }
-    if (asChild) {
-      ViewComponent = import_Slot.Slot;
-      const onlyChild = import_react.default.Children.only(children);
-      Object.assign(viewProps, onlyChild.props);
-    }
-    content = (0, import_react.createElement)(ViewComponent, viewProps, childEls);
-    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.TAMAGUI_TARGET === "native") {
+      const pressability = (0, import_react.useMemo)(() => {
+        if (attachPress && events) {
+          const pressability2 = new import_Pressability.Pressability(events);
+          internal.current.unmountEffects = [
+            () => {
+              pressability2.reset();
+            }
+          ];
+          return pressability2;
+        }
+      }, []);
+      if (attachPress && events) {
+        pressability.configure(events);
+        const eventHandlers = pressability.getEventHandlers();
+        for (const key in eventHandlers) {
+          if (key === "onBlur" || key === "onFocus") {
+            continue;
+          }
+          const og = props[key];
+          const val = eventHandlers[key];
+          viewProps[key] = og ? (0, import_helpers.composeEventHandlers)(og, val) : val;
+        }
+      }
+    }
+    content = (0, import_react.createElement)(elementType, viewProps, childEls);
+    if (process.env.TAMAGUI_TARGET === "web") {
+      const isAnimatedRNWView = isAnimated && typeof elementType !== "string";
+      const shouldWrapWithComponentTheme = isAnimatedRNWView && (0, import_createPropMapper.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__ */ import_react.default.createElement("span", __spreadValues({
+          className: `${hoverClassName} ${themeClassName}`,
+          style: {
+            display: "contents"
+          }
+        }, shouldWrapWithHover && {
+          onMouseEnter: events.onMouseEnter,
+          onMouseLeave: events.onMouseLeave
+        }), content);
+      }
     }
     if (process.env.NODE_ENV === "development") {
       if (props["debug"]) {
-        viewProps["debug"] = true;
-        console.log("  \xBB ", __spreadValues({ propsIn: __spreadValues({}, props), propsOut: __spreadValues({}, viewProps), state, splitStyles, animationStyles, isStringElement, classNamesIn: (_d = props.className) == null ? void 0 : _d.split(" "), classNamesOut: (_e = viewProps.className) == null ? void 0 : _e.split(" "), pressProps, 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));
+        console.groupCollapsed(elementType, `props out`, viewProps);
+        for (const key in viewProps) {
+          console.log(key, viewProps[key]);
+        }
+        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, (0, import_insertStyleRule.getAllSelectors)()[v]])) } : null));
+        }
+        console.groupEnd();
       }
     }
-    if (features.length) {
-      return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, features, content);
+    if (features.elements.length) {
+      return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, features.elements, content);
     }
     return content;
   });
-  component.displayName = staticConfig.componentName;
+  if (staticConfig.componentName) {
+    component.displayName = staticConfig.componentName;
+  }
   (0, import_conf.onConfiguredOnce)((conf) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     if (process.env.IS_STATIC === "is_static") {
       return;
     }
@@ -546,7 +750,18 @@ function createComponent(configIn, ParentComponent) {
     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, {
+    const config = (0, import_conf.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] = (0, import_mergeProps.mergeProps)(defaultPropsIn, {}, true);
+    initialSplitStyles = (0, import_getSplitStyles.insertSplitStyles)(parentProps, staticConfig, initialTheme, {
       mounted: true,
       hover: false,
       press: false,
@@ -554,25 +769,36 @@ function createComponent(configIn, ParentComponent) {
       focus: false,
       resolveVariablesAs: "both",
       keepVariantsAsProps: true
-    });
-    const { style, viewProps } = initialSplitStyles;
+    }, void 0, debug);
+    const [defaults, defaultsClassnames] = (0, import_mergeProps.mergeProps)(component.defaultProps, initialSplitStyles.viewProps, true);
+    initialSplitStyles.classNames = __spreadValues(__spreadValues(__spreadValues({}, parentClassNames), defaultsClassnames), initialSplitStyles.classNames);
     defaultNativeStyle = {};
-    for (const key in style) {
-      const v = style[key];
-      defaultNativeStyle[key] = (0, import_createVariable.isVariable)(v) ? v.val : v;
+    const validStyles2 = staticConfig.validStyles || import_helpers.stylePropsView;
+    if (!import_platform.isWeb) {
+      for (const key in staticConfig.defaultProps) {
+        const val = staticConfig.defaultProps[key];
+        if (typeof val === "string" && val[0] === "$" || !validStyles2[key]) {
+          defaults[key] = val;
+        } else {
+          defaultNativeStyle[key] = val;
+        }
+      }
     }
     defaultNativeStyleSheet = import_react_native.StyleSheet.create({
       base: defaultNativeStyle
     });
-    const defaults = __spreadValues(__spreadValues({}, viewProps), component.defaultProps);
     if (Object.keys(defaults).length) {
       tamaguiDefaultProps = defaults;
     }
-    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
+          initialSplitStyles,
+          tamaguiDefaultProps,
+          defaultNativeStyle,
+          defaults,
+          defaultPropsIn
         });
       }
     }
@@ -581,27 +807,29 @@ function createComponent(configIn, ParentComponent) {
   if (configIn.memo) {
     res = (0, import_react.memo)(res);
   }
-  res["staticConfig"] = __spreadValues({
+  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({
+  res.extractable = (Component, conf) => {
+    Component.staticConfig = (0, import_extendStaticConfig.extendStaticConfig)(__spreadProps(__spreadValues({
       Component
     }, conf), {
       neverFlatten: true,
+      isExtractable: true,
       defaultProps: __spreadValues(__spreadValues({}, 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",
+  validStyles: import_helpers.validStyles,
   defaultProps: __spreadProps(__spreadValues({}, import_constants.stackDefaultStyles), {
     size: true
   }),
@@ -609,7 +837,7 @@ const Spacer = createComponent({
     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,
@@ -620,7 +848,7 @@ const Spacer = createComponent({
     },
     flex: {
       true: {
-        flex: 1
+        flexGrow: 1
       }
     },
     direction: {
@@ -631,73 +859,162 @@ const Spacer = createComponent({
       vertical: {
         width: 0,
         minWidth: 0
-      }
+      },
+      both: {}
     }
+  },
+  defaultVariants: {
+    direction: "both"
   }
 });
 function spacedChildren({
   isZStack,
   children,
   space,
-  flexDirection,
-  spaceFlex
+  direction,
+  spaceFlex,
+  separator
 }) {
-  var _a;
+  const hasSpace = !!(space || spaceFlex);
+  const hasSeparator = !(separator === void 0 || separator === null);
+  if (!hasSpace && !hasSeparator && !isZStack) {
+    return children;
+  }
   const childrenList = import_react.Children.toArray(children);
-  const len = childrenList.length;
-  if (len === 1) {
+  if (childrenList.length <= 1 && !isZStack) {
     return childrenList;
   }
-  const next = [];
+  const final = [];
   for (const [index, child] of childrenList.entries()) {
-    if (child === null || child === void 0) {
-      continue;
-    }
-    if (!child || child["key"] && !isZStack) {
-      next.push(child);
+    const isEmpty = child === null || child === void 0 || Array.isArray(child) && child.length === 0;
+    if (isEmpty || !child || child["key"] && !isZStack) {
+      final.push(child);
     } else {
-      next.push(/* @__PURE__ */ import_react.default.createElement(import_react.Fragment, {
+      final.push(/* @__PURE__ */ import_react.default.createElement(import_react.Fragment, {
         key: index
       }, isZStack ? /* @__PURE__ */ import_react.default.createElement(AbsoluteFill, null, child) : child));
     }
-    if ((_a = child["type"]) == null ? void 0 : _a["isVisuallyHidden"]) {
+    if (isUnspaced(child) && index === 0) {
       continue;
     }
-    if (index !== len - 1) {
-      if (space) {
-        next.push(/* @__PURE__ */ import_react.default.createElement(Spacer, __spreadValues({
+    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(import_react.default.isValidElement(separator) ? import_react.default.cloneElement(separator, { key: `sep_${index}` }) : separator);
+        if (hasSpace) {
+          final.push(createSpacer({
+            key: `_${index}_after_sep_spacer`,
+            direction,
+            space,
+            spaceFlex
+          }));
+        }
+      } else {
+        final.push(createSpacer({
           key: `_${index}_spacer`,
-          direction: flexDirection === "row" || flexDirection === "row-reverse" ? "horizontal" : "vertical",
-          size: space
-        }, spaceFlex && {
-          flex: spaceFlex
-        })));
+          direction,
+          space,
+          spaceFlex
+        }));
       }
     }
   }
-  return next;
+  return final;
+}
+function createSpacer({ key, direction, space, spaceFlex }) {
+  return /* @__PURE__ */ import_react.default.createElement(Spacer, __spreadValues({
+    key,
+    size: space,
+    direction
+  }, spaceFlex && {
+    flex: spaceFlex
+  }));
+}
+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"]);
 }
-__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, {
+  return /* @__PURE__ */ import_react.default.createElement(import_react_native.View, {
+    pointerEvents: "box-none",
     style: import_react_native.StyleSheet.absoluteFill
-  }, props.child);
+  }, 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 = import_platform.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) {
+  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)[0];
+    console.log("set prev", prev);
+    DefaultProps.set(n, prev);
+  }
+  const ourDefaultsMerged = DefaultProps.get(name);
+  if (ourDefaultsMerged) {
+    return (0, import_mergeProps.mergeProps)(props, ourDefaultsMerged)[0];
+  }
+  return props;
 }
-__name(AbsoluteFill, "AbsoluteFill");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AbsoluteFill,
   Spacer,
+  Unspaced,
+  accessibilityRoleToWebRole,
   createComponent,
   mouseUps,
+  processIDRefList,
   spacedChildren
 });
 //# sourceMappingURL=createComponent.js.map