@tamagui/core 1.0.1-beta.149 → 1.0.1-beta.152

package/dist/cjs/createComponent.js

@@ -17,7 +17,10 @@ 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, {
@@ -30,6 +33,7 @@ __export(createComponent_exports, {
   spacedChildren: () => spacedChildren
 });
 module.exports = __toCommonJS(createComponent_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_helpers = require("@tamagui/helpers");
 var import_rnw = require("@tamagui/rnw");
 var import_use_force_update = require("@tamagui/use-force-update");
@@ -48,7 +52,6 @@ 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_useFeatures = require("./hooks/useFeatures");
 var import_useMedia = require("./hooks/useMedia");
 var import_usePressable = require("./hooks/usePressable");
 var import_useServerHooks = require("./hooks/useServerHooks");
@@ -82,6 +85,7 @@ function mergeShorthands({ defaultProps }, { shorthands }) {
 }
 let initialTheme;
 let config;
+let mediaPropNames = [];
 function createComponent(configIn, ParentComponent) {
   const staticConfig = (() => {
     const next = (0, import_extendStaticConfig.extendStaticConfig)(configIn, ParentComponent);
@@ -101,7 +105,7 @@ function createComponent(configIn, ParentComponent) {
   let tamaguiDefaultProps;
   let initialSplitStyles;
   const component = (0, import_react.forwardRef)((propsIn, forwardedRef) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f, _g;
     let props;
     if (tamaguiDefaultProps && !propsIn.asChild) {
       props = (0, import_mergeProps.mergeProps)(tamaguiDefaultProps, propsIn)[0];
@@ -131,7 +135,15 @@ function createComponent(configIn, ParentComponent) {
       resolveVariablesAs: "value"
     };
     const languageContext = import_platform.isRSC ? null : (0, import_react.useContext)(import_FontLanguageContext.FontLanguageContext);
-    const splitStyles = (0, import_getSplitStyles.useSplitStyles)(props, staticConfig, theme, splitStyleState, props.asChild ? null : initialSplitStyles == null ? void 0 : initialSplitStyles.classNames, languageContext || void 0, props["debug"]);
+    const splitStyles = (0, import_getSplitStyles.useSplitStyles)(
+      props,
+      staticConfig,
+      theme,
+      splitStyleState,
+      props.asChild ? null : initialSplitStyles == null ? void 0 : initialSplitStyles.classNames,
+      languageContext || void 0,
+      props["debug"]
+    );
     const hostRef = (0, import_useServerHooks.useServerRef)(null);
     const setState = states[1];
     const setStateShallow = (0, import_createShallowUpdate.createShallowUpdate)(setState);
@@ -150,23 +162,76 @@ function createComponent(configIn, ParentComponent) {
         }
       }
     }
-    const { viewProps: viewPropsIn, pseudos, medias, style, classNames } = splitStyles;
+    const { viewProps: viewPropsIn, pseudos, medias, style, classNames, mediaKeys } = splitStyles;
+    (0, import_platform.useIsomorphicLayoutEffect)(() => {
+      for (const key of mediaKeys) {
+        (0, import_useMedia.addMediaQueryListener)(key, forceUpdate);
+      }
+      return () => {
+        for (const key of mediaKeys) {
+          (0, import_useMedia.removeMediaQueryListener)(key, forceUpdate);
+        }
+      };
+    }, [mediaKeys.join(",")]);
     const useAnimations = (_a = tamaguiConfig == null ? void 0 : tamaguiConfig.animations) == null ? void 0 : _a.useAnimations;
     const isAnimated = !!(useAnimations && props.animation);
     const hasEnterStyle = !!props.enterStyle;
     const animationFeatureStylesIn = props.animation ? { ...defaultNativeStyle, ...style } : null;
-    const features = (0, import_useFeatures.useFeatures)(props, {
-      forceUpdate,
-      setStateShallow,
-      useAnimations,
-      state,
-      style: animationFeatureStylesIn,
-      pseudos,
-      staticConfig,
-      theme,
-      hostRef,
-      onDidAnimate: props.onDidAnimate
-    });
+    const propsWithAnimation = props;
+    if (!import_platform.isRSC && isAnimated) {
+      const animationState = useAnimations(propsWithAnimation, {
+        state,
+        pseudos,
+        onDidAnimate: props.onDidAnimate,
+        hostRef,
+        staticConfig,
+        getStyle({ isExiting, isEntering, exitVariant, enterVariant } = {}) {
+          var _a2, _b2, _c2, _d2;
+          const style2 = 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(
+            style2,
+            pseudos.hoverStyle,
+            pseudos.focusStyle,
+            pseudos.pressStyle,
+            pseudos.pressStyle
+          );
+          enterStyle && isEntering && merge(style2, enterStyle);
+          state.hover && pseudos.hoverStyle && merge(style2, pseudos.hoverStyle);
+          state.focus && pseudos.focusStyle && merge(style2, pseudos.focusStyle);
+          state.press && pseudos.pressStyle && merge(style2, pseudos.pressStyle);
+          exitStyle && isExiting && merge(style2, exitStyle);
+          if (process.env.NODE_ENV === "development") {
+            if (props["debug"]) {
+              console.log("animation style", style2);
+            }
+          }
+          return style2;
+        }
+      });
+      if (animationState !== state.animation) {
+        setStateShallow({
+          animation: animationState
+        });
+      }
+    }
     const {
       tag,
       hitSlop,
@@ -298,7 +363,21 @@ function createComponent(configIn, ParentComponent) {
           onStartShouldSetResponderCapture
         });
         const platformMethodsRef = (0, import_rnw.usePlatformMethods)(viewProps);
-        const setRef = (0, import_rnw.useMergeRefs)(hostRef, platformMethodsRef, forwardedRef);
+        const shouldSetMounted = Boolean(
+          import_platform.isClient && (hasEnterStyle || props.animation) && !state.mounted
+        );
+        const setRef = (0, import_rnw.useMergeRefs)(
+          hostRef,
+          platformMethodsRef,
+          forwardedRef,
+          shouldSetMounted ? () => {
+            setTimeout(() => {
+              setStateShallow({
+                mounted: true
+              });
+            }, 10);
+          } : void 0
+        );
         viewProps.ref = setRef;
       }
       if (props.href != void 0 && hrefAttrs != void 0) {
@@ -343,26 +422,13 @@ function createComponent(configIn, ParentComponent) {
         }
       });
     }
-    const internal = (0, import_useServerHooks.useServerRef)();
-    if (!internal.current) {
-      internal.current = {
-        isMounted: true
-      };
+    if (!import_platform.isRSC) {
+      (0, import_react.useEffect)(() => {
+        return () => {
+          mouseUps.delete(unPress);
+        };
+      }, []);
     }
-    (0, import_platform.useIsomorphicLayoutEffect)(() => {
-      if (import_platform.isClient && (hasEnterStyle || props.animation) && !state.mounted) {
-        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) {
@@ -379,11 +445,10 @@ function createComponent(configIn, ParentComponent) {
       ];
       if (!animationStyles && initialSplitStyles) {
         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);
+        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 = {};
@@ -427,7 +492,31 @@ function createComponent(configIn, ParentComponent) {
         viewProps.className = className;
       }
       viewProps.style = style2;
-    } else {
+    }
+    if (process.env.TAMAGUI_TARGET === "native") {
+      if (splitStyles.fontFamily) {
+        const faceInfo = (_b = config.fontsParsed[splitStyles.fontFamily]) == null ? void 0 : _b.face;
+        if (faceInfo) {
+          const [weight, style2] = (() => {
+            var _a2, _b2;
+            let weight2;
+            let style3;
+            for (let i = styles.length; i >= 0; i--) {
+              weight2 ?? (weight2 = (_a2 = styles[i]) == null ? void 0 : _a2.fontWeight);
+              style3 ?? (style3 = (_b2 = styles[i]) == null ? void 0 : _b2.fontStyle);
+            }
+            return [weight2 || "400", style3 || "normal"];
+          })();
+          const overrideFace = (_d = (_c = faceInfo[weight]) == null ? void 0 : _c[style2]) == null ? void 0 : _d.val;
+          if (overrideFace) {
+            for (const style3 of styles) {
+              if (style3 == null ? void 0 : style3.fontFamily) {
+                style3.fontFamily = overrideFace;
+              }
+            }
+          }
+        }
+      }
       viewProps.style = styles;
     }
     const initialPseudos = initialSplitStyles == null ? void 0 : initialSplitStyles.pseudos;
@@ -440,8 +529,6 @@ function createComponent(configIn, ParentComponent) {
     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
@@ -504,7 +591,7 @@ function createComponent(configIn, ParentComponent) {
       } : null,
       ...!import_platform.isWeb && {
         cancelable: !props.rejectResponderTermination,
-        disabled: props.disabled !== null ? props.disabled : (_b = props.accessibilityState) == null ? void 0 : _b.disabled,
+        disabled: props.disabled !== null ? props.disabled : (_e = props.accessibilityState) == null ? void 0 : _e.disabled,
         hitSlop: props.hitSlop,
         delayLongPress: props.delayLongPress,
         delayPressIn: props.delayPressIn,
@@ -514,7 +601,7 @@ function createComponent(configIn, ParentComponent) {
       }
     } : null;
     let space = spaceProp;
-    if (features.enabled.mediaQuery) {
+    if (mediaKeys.length) {
       for (const key in import_useMedia.mediaState) {
         if (!import_useMedia.mediaState[key])
           continue;
@@ -524,15 +611,21 @@ function createComponent(configIn, ParentComponent) {
       }
     }
     const themeManager = (0, import_useTheme.getThemeManager)(theme);
-    const shouldSetChildrenThemeToParent = Boolean(themeShallow && themeManager && themeManager.didChangeTheme);
+    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);
+    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) {
       elementType = import_Slot.Slot;
@@ -544,17 +637,19 @@ function createComponent(configIn, ParentComponent) {
       };
     }
     if (!import_platform.isRSC && import_platform.isWeb) {
-      const [pressableProps] = (0, import_usePressable.usePressable)(events ? {
-        disabled,
-        ...hitSlop && {
-          hitSlop
-        },
-        onPressOut: events[pressOutKey],
-        onPressIn: events[pressInKey],
-        onPress: events[pressKey]
-      } : {
-        disabled: true
-      });
+      const [pressableProps] = (0, import_usePressable.usePressable)(
+        events ? {
+          disabled,
+          ...hitSlop && {
+            hitSlop
+          },
+          onPressOut: events[pressOutKey],
+          onPressIn: events[pressInKey],
+          onPress: events[pressKey]
+        } : {
+          disabled: true
+        }
+      );
       if (events) {
         if (handlesPressEvents) {
           Object.assign(viewProps, pressableProps);
@@ -591,12 +686,12 @@ function createComponent(configIn, ParentComponent) {
     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 shouldWrapWithComponentTheme = !!theme.className && isAnimatedRNWView && (0, import_createPropMapper.getReturnVariablesAs)(props, splitStyleState) === "non-color-value";
       const shouldWrapWithHover = Boolean(events || import_platform.isRSC) && attachHover;
       if (shouldWrapWithHover || shouldWrapWithComponentTheme) {
         const themeClassName = shouldWrapWithComponentTheme ? `${theme.className}` : "";
         const hoverClassName = shouldWrapWithHover ? "t_Hoverable" : "";
-        content = /* @__PURE__ */ import_react.default.createElement("span", {
+        content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
           className: `${hoverClassName} ${themeClassName}`,
           style: {
             display: "contents"
@@ -604,8 +699,9 @@ function createComponent(configIn, ParentComponent) {
           ...events && shouldWrapWithHover && {
             onMouseEnter: events.onMouseEnter,
             onMouseLeave: events.onMouseLeave
-          }
-        }, content);
+          },
+          children: content
+        });
       }
     }
     if (process.env.NODE_ENV === "development") {
@@ -618,12 +714,12 @@ function createComponent(configIn, ParentComponent) {
         console.log("children", content);
         console.groupEnd();
         if (typeof window !== "undefined") {
-          console.log({ state, shouldProvideThemeManager, tamaguiDefaultProps, viewProps, splitStyles, animationStyles, handlesPressEvents, isStringElement, classNamesIn: (_c = props.className) == null ? void 0 : _c.split(" "), classNamesOut: (_d = viewProps.className) == null ? void 0 : _d.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.log({ state, shouldProvideThemeManager, 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, 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();
       }
     }
-    return !import_platform.isRSC && features.elements.length ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, features.elements, content) : content;
+    return content;
   });
   if (staticConfig.componentName) {
     component.displayName = staticConfig.componentName;
@@ -643,23 +739,41 @@ function createComponent(configIn, ParentComponent) {
     let defaultPropsIn = staticConfig.defaultProps || {};
     const parentNames = [...staticConfig.parentNames || [], staticConfig.componentName];
     if (config.defaultProps && parentNames && staticConfig.componentName) {
-      defaultPropsIn = mergeConfigDefaultProps(staticConfig.componentName, defaultPropsIn, config.defaultProps, parentNames, conf);
+      defaultPropsIn = mergeConfigDefaultProps(
+        staticConfig.componentName,
+        defaultPropsIn,
+        config.defaultProps,
+        parentNames,
+        conf
+      );
     }
     const debug = true ? 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,
-      pressIn: false,
-      focus: false,
-      resolveVariablesAs: "both",
-      keepVariantsAsProps: true
-    }, void 0, void 0, debug);
-    const [defaults, defaultsClassnames] = (0, import_mergeProps.mergeProps)(component.defaultProps, initialSplitStyles.viewProps, true);
+    initialSplitStyles = (0, import_getSplitStyles.insertSplitStyles)(
+      parentProps,
+      staticConfig,
+      initialTheme,
+      {
+        mounted: true,
+        hover: false,
+        press: false,
+        pressIn: false,
+        focus: false,
+        resolveVariablesAs: "both",
+        keepVariantsAsProps: true
+      },
+      void 0,
+      void 0,
+      debug
+    );
+    const [defaults2, defaultsClassnames] = (0, import_mergeProps.mergeProps)(
+      component.defaultProps,
+      initialSplitStyles.viewProps,
+      true
+    );
     initialSplitStyles.classNames = {
       ...parentClassNames,
       ...defaultsClassnames,
@@ -673,7 +787,7 @@ function createComponent(configIn, ParentComponent) {
         if (import_helpers.validPseudoKeys[key])
           continue;
         if (typeof val === "string" && val[0] === "$" || !validStyles2[key]) {
-          defaults[key] = val;
+          defaults2[key] = val;
         } else {
           defaultNativeStyle[key] = val;
         }
@@ -682,8 +796,8 @@ function createComponent(configIn, ParentComponent) {
     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" && debug) {
       if (process.env.IS_STATIC !== "is_static") {
@@ -692,7 +806,7 @@ function createComponent(configIn, ParentComponent) {
           initialSplitStyles,
           tamaguiDefaultProps,
           defaultNativeStyle,
-          defaults,
+          defaults: defaults2,
           defaultPropsIn
         });
       }
@@ -707,16 +821,19 @@ function createComponent(configIn, ParentComponent) {
     ...staticConfig
   };
   res.extractable = (Component, conf) => {
-    Component.staticConfig = (0, import_extendStaticConfig.extendStaticConfig)({
-      Component,
-      ...conf,
-      neverFlatten: true,
-      isExtractable: true,
-      defaultProps: {
-        ...Component.defaultProps,
-        ...conf == null ? void 0 : conf.defaultProps
-      }
-    }, res);
+    Component.staticConfig = (0, import_extendStaticConfig.extendStaticConfig)(
+      {
+        Component,
+        ...conf,
+        neverFlatten: true,
+        isExtractable: true,
+        defaultProps: {
+          ...Component.defaultProps,
+          ...conf == null ? void 0 : conf.defaultProps
+        }
+      },
+      res
+    );
     return Component;
   };
   return res;
@@ -791,9 +908,13 @@ function spacedChildren({
     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;
@@ -805,53 +926,61 @@ function spacedChildren({
     if (next && !isUnspaced(next)) {
       if (separator) {
         if (hasSpace) {
-          final.push(createSpacer({
-            key: `_${index}_before_sep_spacer`,
-            direction,
-            space,
-            spaceFlex
-          }));
+          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);
+        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`,
+          final.push(
+            createSpacer({
+              key: `_${index}_after_sep_spacer`,
+              direction,
+              space,
+              spaceFlex
+            })
+          );
+        }
+      } else {
+        final.push(
+          createSpacer({
+            key: `_${index}_spacer`,
             direction,
             space,
             spaceFlex
-          }));
-        }
-      } else {
-        final.push(createSpacer({
-          key: `_${index}_spacer`,
-          direction,
-          space,
-          spaceFlex
-        }));
+          })
+        );
       }
     }
   }
   return final;
 }
 function createSpacer({ key, direction, space, spaceFlex }) {
-  return /* @__PURE__ */ import_react.default.createElement(Spacer, {
-    key,
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Spacer, {
     size: space,
     direction,
     ...spaceFlex && {
       flex: spaceFlex
     }
-  });
+  }, key);
 }
 function isUnspaced(child) {
   var _a, _b;
   return ((_a = child == null ? void 0 : child["type"]) == null ? void 0 : _a["isVisuallyHidden"]) || ((_b = child == null ? void 0 : child["type"]) == null ? void 0 : _b["isUnspaced"]);
 }
 function AbsoluteFill(props) {
-  return /* @__PURE__ */ import_react.default.createElement(import_react_native.View, {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, {
     pointerEvents: "box-none",
-    style: import_react_native.StyleSheet.absoluteFill
-  }, props.children);
+    style: import_react_native.StyleSheet.absoluteFill,
+    children: props.children
+  });
 }
 function processIDRefList(idRefList) {
   return Array.isArray(idRefList) ? idRefList.join(" ") : idRefList;
@@ -907,6 +1036,69 @@ function mergeConfigDefaultProps(name, props, configDefaults, parentNames, conf)
   }
   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);
+    }
+  }
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Spacer,