@tamagui/core 1.0.1-beta.76 → 1.0.1-beta.77

package/dist/jsx/createComponent.js

@@ -1,1036 +0,0 @@
-import { composeEventHandlers, stylePropsView, validStyles } from "@tamagui/helpers";
-import { useForceUpdate } from "@tamagui/use-force-update";
-import React, {
-  Children,
-  Fragment,
-  createElement,
-  forwardRef,
-  memo,
-  useCallback,
-  useContext,
-  useMemo,
-  useRef,
-  useState
-} from "react";
-import { StyleSheet, Text, View } from "react-native";
-import { getConfig, onConfiguredOnce } from "./conf";
-import { stackDefaultStyles } from "./constants/constants";
-import { isWeb, useIsomorphicLayoutEffect } from "./constants/platform";
-import { rnw } from "./constants/rnw";
-import { getReturnVariablesAs } from "./helpers/createPropMapper";
-import { createShallowUpdate } from "./helpers/createShallowUpdate";
-import { extendStaticConfig, parseStaticConfig } from "./helpers/extendStaticConfig";
-import { insertSplitStyles, useSplitStyles } from "./helpers/getSplitStyles";
-import { getAllSelectors } from "./helpers/insertStyleRule";
-import { mergeProps } from "./helpers/mergeProps";
-import { proxyThemeVariables } from "./helpers/proxyThemeVariables";
-import { wrapThemeManagerContext } from "./helpers/wrapThemeManagerContext";
-import { useFeatures } from "./hooks/useFeatures";
-import { useIsTouchDevice } from "./hooks/useIsTouchDevice";
-import { mediaState } from "./hooks/useMedia";
-import { usePressable } from "./hooks/usePressable";
-import { getThemeManagerIfChanged, useTheme } from "./hooks/useTheme";
-import { Pressability } from "./Pressability";
-import { Slot, mergeEvent } from "./views/Slot";
-import { TextAncestorContext } from "./views/TextAncestorContext";
-React["keep"];
-const defaultComponentState = Object.freeze({
-  hover: false,
-  press: false,
-  pressIn: false,
-  focus: false,
-  mounted: false,
-  animation: null
-});
-const mouseUps = /* @__PURE__ */ new Set();
-if (typeof document !== "undefined") {
-  document.addEventListener("mouseup", () => {
-    mouseUps.forEach((x) => x());
-    mouseUps.clear();
-  });
-  document.addEventListener("touchend", () => {
-    mouseUps.forEach((x) => x());
-    mouseUps.clear();
-  });
-  document.addEventListener("touchcancel", () => {
-    mouseUps.forEach((x) => x());
-    mouseUps.clear();
-  });
-}
-function mergeShorthands({ defaultProps }, { shorthands }) {
-  for (const key in defaultProps) {
-    defaultProps[shorthands[key] || key] = defaultProps[key];
-  }
-}
-let initialTheme;
-function createComponent(configIn, ParentComponent) {
-  const staticConfig = (() => {
-    const config = extendStaticConfig(configIn, ParentComponent);
-    if ("parsed" in config) {
-      return config;
-    } else {
-      return parseStaticConfig(config);
-    }
-  })();
-  const defaultComponentClassName = `is_${staticConfig.componentName}`;
-  let tamaguiConfig;
-  let AnimatedText;
-  let AnimatedView;
-  let avoidClasses = true;
-  let defaultNativeStyle;
-  let defaultNativeStyleSheet;
-  let tamaguiDefaultProps;
-  let initialSplitStyles;
-  const component = forwardRef((propsIn, forwardedRef) => {
-    var _a, _b, _c, _d, _e;
-    let props;
-    if (tamaguiDefaultProps && !propsIn.asChild) {
-      props = mergeProps(tamaguiDefaultProps, propsIn);
-    } else {
-      props = propsIn;
-    }
-    const { Component, isText, isZStack } = staticConfig;
-    const componentName = props.componentName || staticConfig.componentName;
-    const componentClassName = props.asChild ? "" : props.componentName ? `is_${props.componentName}` : defaultComponentClassName;
-    if (true) {
-      if (props["debug"]) {
-        console.log("\u26A0\uFE0F", componentName || (Component == null ? void 0 : Component.displayName) || (Component == null ? void 0 : Component.name) || "[Unnamed Component]", "debug on");
-        console.log("props in:", {
-          propsIn,
-          props,
-          ordered: Object.keys(props)
-        });
-        if (props["debug"] === "break")
-          debugger;
-      }
-    }
-    const forceUpdate = useForceUpdate();
-    const theme = useTheme(props.theme, componentName, props, forceUpdate);
-    const statesUsed = useState(defaultComponentState);
-    const setStateShallow = createShallowUpdate(statesUsed[1]);
-    let state = statesUsed[0];
-    if (propsIn.forceStyle) {
-      state = {
-        ...state,
-        [propsIn.forceStyle]: true
-      };
-    }
-    const shouldAvoidClasses = !!(props.animation && avoidClasses);
-    const shouldForcePseudo = !!propsIn.forceStyle;
-    const hasTextAncestor = !!(isWeb ? useContext(TextAncestorContext) : false);
-    const splitStyleState = !shouldAvoidClasses && !shouldForcePseudo ? {
-      ...state,
-      hasTextAncestor,
-      dynamicStylesInline: true
-    } : {
-      ...state,
-      noClassNames: true,
-      dynamicStylesInline: true,
-      hasTextAncestor,
-      resolveVariablesAs: "value"
-    };
-    const splitStyles = useSplitStyles(props, staticConfig, theme, splitStyleState, props.asChild ? null : initialSplitStyles.classNames, props["debug"]);
-    const { viewProps: viewPropsIn, pseudos, medias, style, classNames } = splitStyles;
-    const useAnimations = (_a = tamaguiConfig.animations) == null ? void 0 : _a.useAnimations;
-    const isAnimated = !!(useAnimations && props.animation);
-    const hasEnterStyle = !!props.enterStyle;
-    const hostRef = useRef(null);
-    const animationFeatureStylesIn = props.animation ? { ...defaultNativeStyle, ...style } : null;
-    const features = useFeatures(props, {
-      forceUpdate,
-      setStateShallow,
-      useAnimations,
-      state,
-      style: animationFeatureStylesIn,
-      pseudos,
-      staticConfig,
-      theme,
-      hostRef,
-      onDidAnimate: props.onDidAnimate
-    });
-    const {
-      tag,
-      hitSlop,
-      asChild,
-      children,
-      onPress,
-      onPressIn,
-      onPressOut,
-      onHoverIn,
-      onHoverOut,
-      space: spaceProp,
-      spaceDirection: _spaceDirection,
-      disabled: disabledProp,
-      onMouseUp,
-      onMouseDown,
-      onMouseEnter,
-      onMouseLeave,
-      hrefAttrs,
-      separator,
-      forceStyle: _forceStyle,
-      onClick,
-      theme: _themeProp,
-      defaultVariants,
-      ...nonTamaguiProps
-    } = viewPropsIn;
-    const isTaggable = !Component || typeof Component === "string";
-    const element = isWeb ? isTaggable ? tag || Component : Component : Component;
-    const BaseTextComponent = !isWeb ? Text : element || "span";
-    const BaseViewComponent = !isWeb ? View : element || (hasTextAncestor ? "span" : "div");
-    let elementType = isText ? (isAnimated ? AnimatedText || Text : null) || BaseTextComponent : (isAnimated ? AnimatedView || View : null) || BaseViewComponent;
-    elementType = Component || elementType;
-    const isStringElement = typeof elementType === "string";
-    const disabled = props.accessibilityState != null && props.accessibilityState.disabled === true || props.accessibilityDisabled;
-    let viewProps;
-    if (isWeb && !staticConfig.isReactNativeWeb) {
-      const {
-        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,
-        ...webProps
-      } = nonTamaguiProps;
-      viewProps = webProps;
-      assignNativePropsToWeb(elementType, viewProps, nonTamaguiProps);
-      if (!asChild) {
-        rnw.useElementLayout(hostRef, onLayout);
-        rnw.useResponderEvents(hostRef, {
-          onMoveShouldSetResponder,
-          onMoveShouldSetResponderCapture,
-          onResponderEnd,
-          onResponderGrant,
-          onResponderMove,
-          onResponderReject,
-          onResponderRelease,
-          onResponderStart,
-          onResponderTerminate,
-          onResponderTerminationRequest,
-          onScrollShouldSetResponder,
-          onScrollShouldSetResponderCapture,
-          onSelectionChangeShouldSetResponder,
-          onSelectionChangeShouldSetResponderCapture,
-          onStartShouldSetResponder,
-          onStartShouldSetResponderCapture
-        });
-      }
-      const platformMethodsRef = rnw.usePlatformMethods(viewProps);
-      const setRef = rnw.useMergeRefs(hostRef, platformMethodsRef, forwardedRef);
-      if (!isAnimated) {
-        viewProps.ref = setRef;
-      } else {
-        if (forwardedRef) {
-          viewProps.ref = forwardedRef;
-        }
-      }
-      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 (props["debug"]) {
-        console.log("_focusable", focusable);
-      }
-      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 (props["debug"]) {
-      console.log("viewProps", elementType, viewProps.role, viewProps.tabIndex);
-    }
-    if (!isText && isWeb) {
-      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 internal = useRef();
-    if (!internal.current) {
-      internal.current = {
-        isMounted: true
-      };
-    }
-    useIsomorphicLayoutEffect(() => {
-      if (typeof window !== "undefined" && (hasEnterStyle || props.animation)) {
-        setStateShallow({
-          mounted: true
-        });
-      }
-      internal.current.isMounted = true;
-      return () => {
-        var _a2;
-        mouseUps.delete(unPress);
-        internal.current.isMounted = false;
-        (_a2 = internal.current.unmountEffects) == null ? void 0 : _a2.forEach((cb) => cb());
-      };
-    }, [hasEnterStyle, props.animation]);
-    let styles;
-    const animationStyles = state.animation ? state.animation.style : null;
-    if (isStringElement && shouldAvoidClasses && !shouldForcePseudo) {
-      styles = {
-        ...defaultNativeStyle,
-        ...animationStyles != null ? animationStyles : style,
-        ...medias
-      };
-    } else {
-      styles = [
-        isWeb ? null : defaultNativeStyleSheet ? defaultNativeStyleSheet.base : null,
-        animationStyles != null ? animationStyles : style,
-        medias
-      ];
-      if (!animationStyles) {
-        const initPseudos = initialSplitStyles.pseudos;
-        const force = shouldForcePseudo;
-        !state.mounted && addPseudoToStyles(styles, initPseudos, pseudos, "enterStyle");
-        state.hover && addPseudoToStyles(styles, initPseudos, pseudos, "hoverStyle", force);
-        state.focus && addPseudoToStyles(styles, initPseudos, pseudos, "focusStyle", force);
-        state.press && addPseudoToStyles(styles, initPseudos, pseudos, "pressStyle", force);
-      }
-      if (shouldForcePseudo) {
-        const next = {};
-        for (const style2 of styles) {
-          if (style2) {
-            Object.assign(next, style2);
-          }
-        }
-        Object.assign(splitStyles.style, next);
-      }
-    }
-    if (isWeb) {
-      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 != null ? animationStyles : splitStyles.style;
-      if (process.env.NODE_ENV === "development" && props["debug"]) {
-        console.log("  \xBB className", { splitStyles, style: style2, isStringElement, pseudos, state, classNames, propsClassName: props.className, classList, className: className.trim().split(" "), themeClassName: theme.className, values: Object.fromEntries(Object.entries(classNames).map(([k, v]) => [v, getAllSelectors()[v]])) });
-      }
-      const isAnimatedReactNativeWeb = props.animation && avoidClasses;
-      if (staticConfig.isReactNativeWeb || isAnimatedReactNativeWeb) {
-        viewProps.dataSet = {
-          ...viewProps.dataSet,
-          className,
-          id: props.id
-        };
-        if (props["data-is"]) {
-          viewProps.dataSet.is = props["data-is"];
-        }
-      } else {
-        viewProps.className = className;
-      }
-      viewProps.style = style2;
-    } else {
-      viewProps.style = styles;
-    }
-    const initialPseudos = initialSplitStyles.pseudos;
-    const attachPress = !!((pseudos == null ? void 0 : pseudos.pressStyle) || (initialPseudos == null ? void 0 : initialPseudos.pressStyle) || onPress || onPressOut || onPressIn || onClick);
-    const isTouch = useIsTouchDevice();
-    const isHoverable = isWeb && !isTouch;
-    const attachHover = isHoverable && !!(pseudos && pseudos.hoverStyle || onHoverIn || onHoverOut || onMouseEnter || onMouseLeave);
-    const handlesPressEvents = !isStringElement && !asChild;
-    const pressKey = handlesPressEvents ? "onPress" : "onClick";
-    const pressInKey = handlesPressEvents ? "onPressIn" : "onMouseDown";
-    const pressOutKey = handlesPressEvents ? "onPressOut" : "onMouseUp";
-    const shouldAttach = !asChild && (attachPress || attachHover || "pressStyle" in props || "onPress" in props || "onPressIn" in props || "onPressOut" in props || isWeb && ("hoverStyle" in props || "onHoverIn" in props || "onHoverOut" in props || "onMouseEnter" in props || "onMouseLeave" in props));
-    const unPress = useCallback(() => {
-      if (!internal.current.isMounted)
-        return;
-      setStateShallow({
-        press: false,
-        pressIn: false
-      });
-    }, []);
-    const events = shouldAttach ? {
-      [pressOutKey]: attachPress ? (e) => {
-        unPress();
-        onPressOut == null ? void 0 : onPressOut(e);
-        onMouseUp == null ? void 0 : onMouseUp(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);
-          }
-          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;
-          }
-          if (state.pressIn) {
-            next.press = false;
-            next.pressIn = false;
-          }
-          if (Object.keys(next).length) {
-            setStateShallow(next);
-          }
-          onHoverOut == null ? void 0 : onHoverOut(e);
-          onMouseLeave == null ? void 0 : onMouseLeave(e);
-        } : void 0
-      },
-      [pressInKey]: attachPress ? (e) => {
-        setStateShallow({
-          press: true,
-          pressIn: true
-        });
-        onPressIn == null ? void 0 : onPressIn(e);
-        onMouseDown == null ? void 0 : onMouseDown(e);
-        if (isWeb) {
-          mouseUps.add(unPress);
-        }
-      } : null,
-      [pressKey]: attachPress ? (e) => {
-        unPress();
-        onClick == null ? void 0 : onClick(e);
-        onPress == null ? void 0 : onPress(e);
-      } : null,
-      ...!isWeb && {
-        cancelable: !props.rejectResponderTermination,
-        disabled: props.disabled !== null ? props.disabled : (_b = props.accessibilityState) == null ? void 0 : _b.disabled,
-        hitSlop: props.hitSlop,
-        delayLongPress: props.delayLongPress,
-        delayPressIn: props.delayPressIn,
-        delayPressOut: props.delayPressOut,
-        focusable: (_c = viewProps.focusable) != null ? _c : true,
-        minPressDuration: 0
-      }
-    } : null;
-    let space = spaceProp;
-    if (features.enabled.mediaQuery) {
-      for (const key in mediaState) {
-        if (!mediaState[key])
-          continue;
-        if (props[key] && props[key].space !== void 0) {
-          space = props[key].space;
-        }
-      }
-    }
-    let childEls = !children || asChild ? children : wrapThemeManagerContext(spacedChildren({
-      separator,
-      children,
-      space,
-      direction: props.spaceDirection || "both",
-      isZStack
-    }), getThemeManagerIfChanged(theme));
-    let content;
-    if (asChild) {
-      elementType = Slot;
-      viewProps = {
-        ...viewProps,
-        onPress,
-        onPressIn,
-        onPressOut
-      };
-    }
-    if (isWeb) {
-      const [pressableProps] = usePressable(events ? {
-        disabled,
-        ...hitSlop && {
-          hitSlop
-        },
-        onPressOut: events[pressOutKey],
-        onPressIn: events[pressInKey],
-        onPress: events[pressKey]
-      } : {
-        disabled: true
-      });
-      if (events) {
-        if (handlesPressEvents) {
-          Object.assign(viewProps, pressableProps);
-        } else {
-          Object.assign(viewProps, events);
-        }
-      }
-    }
-    if (process.env.TAMAGUI_TARGET === "native") {
-      const attachFocus = !!(pseudos && pseudos.focusStyle || initialPseudos && initialPseudos.focusStyle);
-      if (attachFocus) {
-        viewProps.onFocus = mergeEvent(viewProps.onFocus, () => {
-          setStateShallow({ focus: true });
-        });
-        viewProps.onBlur = mergeEvent(viewProps.onBlur, () => {
-          setStateShallow({ focus: false });
-        });
-      }
-    }
-    if (process.env.TAMAGUI_TARGET === "native") {
-      const pressability = useMemo(() => {
-        if (attachPress && events) {
-          const pressability2 = new Pressability(events);
-          internal.current.unmountEffects = [
-            () => {
-              pressability2.reset();
-            }
-          ];
-          return pressability2;
-        }
-      }, []);
-      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 ? composeEventHandlers(og, val) : val;
-        }
-      }
-    }
-    content = createElement(elementType, viewProps, childEls);
-    if (isWeb) {
-      const isAnimatedRNWView = isAnimated && typeof elementType !== "string";
-      const shouldWrapWithComponentTheme = isAnimatedRNWView && getReturnVariablesAs(props, splitStyleState) === "non-color-value";
-      const shouldWrapWithHover = events && attachHover;
-      if (shouldWrapWithHover || shouldWrapWithComponentTheme) {
-        const themeClassName = shouldWrapWithComponentTheme ? `${theme.className}` : "";
-        const hoverClassName = shouldWrapWithHover ? "t_Hoverable" : "";
-        content = <span className={`${hoverClassName} ${themeClassName}`} style={{
-          display: "contents"
-        }} {...shouldWrapWithHover && {
-          onMouseEnter: events.onMouseEnter,
-          onMouseLeave: events.onMouseLeave
-        }}>{content}</span>;
-      }
-    }
-    if (process.env.NODE_ENV === "development") {
-      if (props["debug"]) {
-        console.log("\u2B50\uFE0F", { propsIn: { ...props }, propsOut: { ...viewProps }, elementType, state, splitStyles, animationStyles, isStringElement, classNamesIn: (_d = props.className) == null ? void 0 : _d.split(" "), classNamesOut: (_e = viewProps.className) == null ? void 0 : _e.split(" "), events, shouldAttach, ViewComponent: elementType, viewProps, styles, pseudos, content, childEls, shouldAvoidClasses, avoidClasses, animation: props.animation, style, defaultNativeStyle, initialSplitStyles, ...typeof window !== "undefined" ? { theme, themeClassName: theme.className, staticConfig, tamaguiConfig, events, shouldAvoidClasses, shouldForcePseudo } : null });
-      }
-    }
-    if (features.elements.length) {
-      return <>
-        {features.elements}
-        {content}
-      </>;
-    }
-    return content;
-  });
-  component.displayName = staticConfig.componentName;
-  onConfiguredOnce((conf) => {
-    var _a, _b, _c, _d;
-    if (process.env.IS_STATIC === "is_static") {
-      return;
-    }
-    tamaguiConfig = conf;
-    mergeShorthands(staticConfig, tamaguiConfig);
-    avoidClasses = !!((_a = tamaguiConfig.animations) == null ? void 0 : _a.avoidClasses);
-    AnimatedText = (_b = tamaguiConfig.animations) == null ? void 0 : _b.Text;
-    AnimatedView = (_c = tamaguiConfig == null ? void 0 : tamaguiConfig.animations) == null ? void 0 : _c.View;
-    initialTheme = initialTheme || proxyThemeVariables(conf.themes[conf.defaultTheme || Object.keys(conf.themes)[0]]);
-    const config = getConfig();
-    let defaultPropsIn = staticConfig.defaultProps;
-    const parentNames = [...staticConfig.parentNames || [], staticConfig.componentName];
-    if (config.defaultProps && parentNames) {
-      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 props = config.defaultProps[n];
-        if (!props) {
-          if (prev) {
-            DefaultProps.set(n, prev);
-          }
-          continue;
-        }
-        prev = mergeProps(prev || {}, props);
-        DefaultProps.set(n, prev);
-      }
-      const ourDefaultsMerged = DefaultProps.get(staticConfig.componentName);
-      if (ourDefaultsMerged) {
-        defaultPropsIn = mergeProps(defaultPropsIn, ourDefaultsMerged);
-      }
-    }
-    if (process.env.NODE_ENV === "development" && defaultPropsIn["debug"] === "break") {
-      debugger;
-    }
-    initialSplitStyles = insertSplitStyles(defaultPropsIn, staticConfig, initialTheme, {
-      mounted: true,
-      hover: false,
-      press: false,
-      pressIn: false,
-      focus: false,
-      resolveVariablesAs: "both",
-      keepVariantsAsProps: true
-    }, void 0, staticConfig.defaultProps["debug"]);
-    const defaults = mergeProps(component.defaultProps, initialSplitStyles.viewProps);
-    defaultNativeStyle = {};
-    const validStyles2 = staticConfig.validStyles || stylePropsView;
-    for (const key in staticConfig.defaultProps) {
-      const val = staticConfig.defaultProps[key];
-      if (typeof val === "string" && val[0] === "$" || !validStyles2[key] || val[0] === "_") {
-        defaults[key] = val;
-      } else {
-        defaultNativeStyle[key] = val;
-      }
-    }
-    defaultNativeStyleSheet = StyleSheet.create({
-      base: defaultNativeStyle
-    });
-    if (Object.keys(defaults).length) {
-      tamaguiDefaultProps = defaults;
-    }
-    if (process.env.NODE_ENV === "development" && ((_d = staticConfig.defaultProps) == null ? void 0 : _d.debug)) {
-      if (process.env.IS_STATIC !== "is_static") {
-        console.log(`\u{1F41B} [${staticConfig.componentName || "Component"}]`, {
-          staticConfig,
-          initialSplitStyles,
-          tamaguiDefaultProps,
-          defaultNativeStyle,
-          defaults
-        });
-      }
-    }
-  });
-  let res = component;
-  if (configIn.memo) {
-    res = memo(res);
-  }
-  res.staticConfig = {
-    validStyles: staticConfig.validStyles || stylePropsView,
-    ...staticConfig
-  };
-  res.extractable = (Component, conf) => {
-    Component.staticConfig = extendStaticConfig({
-      Component,
-      ...conf,
-      neverFlatten: true,
-      isExtractable: true,
-      defaultProps: {
-        ...Component.defaultProps,
-        ...conf == null ? void 0 : conf.defaultProps
-      }
-    }, res);
-    return Component;
-  };
-  return res;
-}
-const DefaultProps = /* @__PURE__ */ new Map();
-const Unspaced = (props) => {
-  return props.children;
-};
-Unspaced["isUnspaced"] = true;
-const Spacer = createComponent({
-  memo: true,
-  componentName: "Spacer",
-  validStyles,
-  defaultProps: {
-    ...stackDefaultStyles,
-    size: true
-  },
-  variants: {
-    size: {
-      "...size": (size, { tokens }) => {
-        var _a;
-        size = size == true ? "$true" : size;
-        const sizePx = (_a = tokens.space[size]) != null ? _a : size;
-        return {
-          width: sizePx,
-          height: sizePx,
-          minWidth: sizePx,
-          minHeight: sizePx
-        };
-      }
-    },
-    flex: {
-      true: {
-        flexGrow: 1
-      }
-    },
-    direction: {
-      horizontal: {
-        height: 0,
-        minHeight: 0
-      },
-      vertical: {
-        width: 0,
-        minWidth: 0
-      }
-    }
-  },
-  defaultVariants: {
-    direction: "horizontal"
-  }
-});
-function spacedChildren({
-  isZStack,
-  children,
-  space,
-  direction,
-  spaceFlex,
-  separator
-}) {
-  const hasSpace = !!(space || spaceFlex);
-  const hasSeparator = !(separator === void 0 || separator === null);
-  if (!hasSpace && !hasSeparator && !isZStack) {
-    return children;
-  }
-  const childrenList = Children.toArray(children);
-  if (childrenList.length <= 1 && !isZStack) {
-    return childrenList;
-  }
-  const final = [];
-  for (const [index, child] of childrenList.entries()) {
-    const isEmpty = child === null || child === void 0 || child === false || Array.isArray(child) && child.length === 0;
-    if (isEmpty || !child || child["key"] && !isZStack) {
-      final.push(child);
-    } else {
-      final.push(<Fragment key={index}>{isZStack ? <AbsoluteFill>{child}</AbsoluteFill> : child}</Fragment>);
-    }
-    if (isUnspaced(child) && index === 0) {
-      continue;
-    }
-    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(React.isValidElement(separator) ? React.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,
-          space,
-          spaceFlex
-        }));
-      }
-    }
-  }
-  return final;
-}
-function createSpacer({ key, direction, space, spaceFlex }) {
-  return <Spacer key={key} direction={direction === "both" ? void 0 : direction === "row" || direction === "row-reverse" ? "horizontal" : "vertical"} size={space} {...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"]);
-}
-function AbsoluteFill(props) {
-  return <View pointerEvents="box-none" style={StyleSheet.absoluteFill}>{props.children}</View>;
-}
-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 assignNativePropsToWeb(elementType, viewProps, nativeProps) {
-  if (!viewProps.role && nativeProps.accessibilityRole) {
-    if (nativeProps.accessibilityRole === "none") {
-      viewProps.role = "presentation";
-    } else {
-      const webRole = accessibilityRoleToWebRole[nativeProps.accessibilityRole];
-      if (webRole != null) {
-        viewProps.role = webRole || nativeProps.accessibilityRole;
-      }
-    }
-  }
-  if (nativeProps.accessibilityActiveDescendant != null) {
-    viewProps["aria-activedescendant"] = nativeProps.accessibilityActiveDescendant;
-  }
-  if (nativeProps.accessibilityAtomic != null) {
-    viewProps["aria-atomic"] = nativeProps.accessibilityAtomic;
-  }
-  if (nativeProps.accessibilityAutoComplete != null) {
-    viewProps["aria-autocomplete"] = nativeProps.accessibilityAutoComplete;
-  }
-  if (nativeProps.accessibilityBusy != null) {
-    viewProps["aria-busy"] = nativeProps.accessibilityBusy;
-  }
-  if (nativeProps.accessibilityChecked != null) {
-    viewProps["aria-checked"] = nativeProps.accessibilityChecked;
-  }
-  if (nativeProps.accessibilityColumnCount != null) {
-    viewProps["aria-colcount"] = nativeProps.accessibilityColumnCount;
-  }
-  if (nativeProps.accessibilityColumnIndex != null) {
-    viewProps["aria-colindex"] = nativeProps.accessibilityColumnIndex;
-  }
-  if (nativeProps.accessibilityColumnSpan != null) {
-    viewProps["aria-colspan"] = nativeProps.accessibilityColumnSpan;
-  }
-  if (nativeProps.accessibilityControls != null) {
-    viewProps["aria-controls"] = processIDRefList(nativeProps.accessibilityControls);
-  }
-  if (nativeProps.accessibilityCurrent != null) {
-    viewProps["aria-current"] = nativeProps.accessibilityCurrent;
-  }
-  if (nativeProps.accessibilityDescribedBy != null) {
-    viewProps["aria-describedby"] = processIDRefList(nativeProps.accessibilityDescribedBy);
-  }
-  if (nativeProps.accessibilityDetails != null) {
-    viewProps["aria-details"] = nativeProps.accessibilityDetails;
-  }
-  if (nativeProps.disabled === true) {
-    viewProps["aria-disabled"] = true;
-    if (elementType === "button" || elementType === "form" || elementType === "input" || elementType === "select" || elementType === "textarea") {
-      viewProps.disabled = true;
-    }
-  }
-  if (nativeProps.accessibilityErrorMessage != null) {
-    viewProps["aria-errormessage"] = nativeProps.accessibilityErrorMessage;
-  }
-  if (nativeProps.accessibilityExpanded != null) {
-    viewProps["aria-expanded"] = nativeProps.accessibilityExpanded;
-  }
-  if (nativeProps.accessibilityFlowTo != null) {
-    viewProps["aria-flowto"] = processIDRefList(nativeProps.accessibilityFlowTo);
-  }
-  if (nativeProps.accessibilityHasPopup != null) {
-    viewProps["aria-haspopup"] = nativeProps.accessibilityHasPopup;
-  }
-  if (nativeProps.accessibilityHidden === true) {
-    viewProps["aria-hidden"] = nativeProps.accessibilityHidden;
-  }
-  if (nativeProps.accessibilityInvalid != null) {
-    viewProps["aria-invalid"] = nativeProps.accessibilityInvalid;
-  }
-  if (nativeProps.accessibilityKeyShortcuts != null && Array.isArray(nativeProps.accessibilityKeyShortcuts)) {
-    viewProps["aria-keyshortcuts"] = nativeProps.accessibilityKeyShortcuts.join(" ");
-  }
-  if (nativeProps.accessibilityLabel != null) {
-    viewProps["aria-label"] = nativeProps.accessibilityLabel;
-  }
-  if (nativeProps.accessibilityLabelledBy != null) {
-    viewProps["aria-labelledby"] = processIDRefList(nativeProps.accessibilityLabelledBy);
-  }
-  if (nativeProps.accessibilityLevel != null) {
-    viewProps["aria-level"] = nativeProps.accessibilityLevel;
-  }
-  if (nativeProps.accessibilityLiveRegion != null) {
-    viewProps["aria-live"] = nativeProps.accessibilityLiveRegion === "none" ? "off" : nativeProps.accessibilityLiveRegion;
-  }
-  if (nativeProps.accessibilityModal != null) {
-    viewProps["aria-modal"] = nativeProps.accessibilityModal;
-  }
-  if (nativeProps.accessibilityMultiline != null) {
-    viewProps["aria-multiline"] = nativeProps.accessibilityMultiline;
-  }
-  if (nativeProps.accessibilityMultiSelectable != null) {
-    viewProps["aria-multiselectable"] = nativeProps.accessibilityMultiSelectable;
-  }
-  if (nativeProps.accessibilityOrientation != null) {
-    viewProps["aria-orientation"] = nativeProps.accessibilityOrientation;
-  }
-  if (nativeProps.accessibilityOwns != null) {
-    viewProps["aria-owns"] = processIDRefList(nativeProps.accessibilityOwns);
-  }
-  if (nativeProps.accessibilityPlaceholder != null) {
-    viewProps["aria-placeholder"] = nativeProps.accessibilityPlaceholder;
-  }
-  if (nativeProps.accessibilityPosInSet != null) {
-    viewProps["aria-posinset"] = nativeProps.accessibilityPosInSet;
-  }
-  if (nativeProps.accessibilityPressed != null) {
-    viewProps["aria-pressed"] = nativeProps.accessibilityPressed;
-  }
-  if (nativeProps.accessibilityReadOnly != null) {
-    viewProps["aria-readonly"] = nativeProps.accessibilityReadOnly;
-    if (elementType === "input" || elementType === "select" || elementType === "textarea") {
-      viewProps.readOnly = true;
-    }
-  }
-  if (nativeProps.accessibilityRequired != null) {
-    viewProps["aria-required"] = nativeProps.accessibilityRequired;
-    if (elementType === "input" || elementType === "select" || elementType === "textarea") {
-      viewProps.required = true;
-    }
-  }
-  if (nativeProps.accessibilityRoleDescription != null) {
-    viewProps["aria-roledescription"] = nativeProps.accessibilityRoleDescription;
-  }
-  if (nativeProps.accessibilityRowCount != null) {
-    viewProps["aria-rowcount"] = nativeProps.accessibilityRowCount;
-  }
-  if (nativeProps.accessibilityRowIndex != null) {
-    viewProps["aria-rowindex"] = nativeProps.accessibilityRowIndex;
-  }
-  if (nativeProps.accessibilityRowSpan != null) {
-    viewProps["aria-rowspan"] = nativeProps.accessibilityRowSpan;
-  }
-  if (nativeProps.accessibilitySelected != null) {
-    viewProps["aria-selected"] = nativeProps.accessibilitySelected;
-  }
-  if (nativeProps.accessibilitySetSize != null) {
-    viewProps["aria-setsize"] = nativeProps.accessibilitySetSize;
-  }
-  if (nativeProps.accessibilitySort != null) {
-    viewProps["aria-sort"] = nativeProps.accessibilitySort;
-  }
-  if (nativeProps.accessibilityValueMax != null) {
-    viewProps["aria-valuemax"] = nativeProps.accessibilityValueMax;
-  }
-  if (nativeProps.accessibilityValueMin != null) {
-    viewProps["aria-valuemin"] = nativeProps.accessibilityValueMin;
-  }
-  if (nativeProps.accessibilityValueNow != null) {
-    viewProps["aria-valuenow"] = nativeProps.accessibilityValueNow;
-  }
-  if (nativeProps.accessibilityValueText != null) {
-    viewProps["aria-valuetext"] = nativeProps.accessibilityValueText;
-  }
-  if (nativeProps.nativeID) {
-    viewProps.id = nativeProps.nativeID;
-  }
-}
-function addPseudoToStyles(styles, initialPseudos, pseudos, name, force = false) {
-  const pseudoStyle = pseudos[name];
-  const shouldNestObject = isWeb && name !== "enterStyle" && name !== "exitStyle";
-  const defaultPseudoStyle = initialPseudos[name];
-  const style = defaultPseudoStyle ? { ...defaultPseudoStyle, ...pseudoStyle } : pseudoStyle;
-  if (style) {
-    styles.push(shouldNestObject && !force ? { [name]: style } : style);
-  }
-}
-export {
-  AbsoluteFill,
-  Spacer,
-  Unspaced,
-  assignNativePropsToWeb,
-  createComponent,
-  mouseUps,
-  spacedChildren
-};