@tamagui/core 1.0.1-beta.140 → 1.0.1-beta.143

package/dist/esm/config.js

@@ -0,0 +1,43 @@
+let conf;
+const setConfig = (next) => {
+  conf = next;
+  if (configListeners.size) {
+    configListeners.forEach((cb) => cb(conf));
+    configListeners.clear();
+  }
+};
+const setConfigFont = (name, font, fontParsed) => {
+  if (process.env.NODE_ENV === "development") {
+    if (!conf)
+      throw new Error(`Haven't called createTamagui yet`);
+  }
+  Object.assign(conf.fonts, { [name]: font });
+  Object.assign(conf.fontsParsed, { [`$${name}`]: fontParsed });
+};
+const getHasConfigured = () => !!conf;
+const getConfig = () => conf;
+const getTokens = () => conf.tokensParsed;
+const getThemes = () => conf.themes;
+const configListeners = /* @__PURE__ */ new Set();
+const onConfiguredOnce = (cb) => {
+  if (conf) {
+    cb(conf);
+  } else {
+    configListeners.add(cb);
+  }
+};
+const updateConfig = (key, value) => {
+  Object.assign(key, value);
+};
+export {
+  configListeners,
+  getConfig,
+  getHasConfigured,
+  getThemes,
+  getTokens,
+  onConfiguredOnce,
+  setConfig,
+  setConfigFont,
+  updateConfig
+};
+//# sourceMappingURL=config.js.map

package/dist/esm/config.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/config.ts"],
+  "sourcesContent": ["import { ConfigListener, TamaguiInternalConfig } from './types'\n\nlet conf: TamaguiInternalConfig | null\n\nexport const setConfig = (next: TamaguiInternalConfig) => {\n  conf = next\n  if (configListeners.size) {\n    configListeners.forEach((cb) => cb(conf!))\n    configListeners.clear()\n  }\n}\n\nexport const setConfigFont = (name: string, font: any, fontParsed: any) => {\n  if (process.env.NODE_ENV === 'development') {\n    if (!conf) throw new Error(`Haven't called createTamagui yet`)\n  }\n  Object.assign(conf!.fonts, { [name]: font })\n  Object.assign(conf!.fontsParsed, { [`$${name}`]: fontParsed })\n}\n\nexport const getHasConfigured = () => !!conf\nexport const getConfig = () => conf!\nexport const getTokens = () => conf!.tokensParsed\nexport const getThemes = () => conf!.themes\n\nexport const configListeners = new Set<ConfigListener>()\n\nexport const onConfiguredOnce = (cb: ConfigListener) => {\n  if (conf) {\n    cb(conf!)\n  } else {\n    configListeners.add(cb)\n  }\n}\n\nexport const updateConfig = (key: string, value: any) => {\n  Object.assign(key, value)\n}\n"],
+  "mappings": "AAEA,IAAI;AAEG,MAAM,YAAY,CAAC,SAAgC;AACxD,SAAO;AACP,MAAI,gBAAgB,MAAM;AACxB,oBAAgB,QAAQ,CAAC,OAAO,GAAG,IAAK,CAAC;AACzC,oBAAgB,MAAM;AAAA,EACxB;AACF;AAEO,MAAM,gBAAgB,CAAC,MAAc,MAAW,eAAoB;AACzE,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,QAAI,CAAC;AAAM,YAAM,IAAI,MAAM,kCAAkC;AAAA,EAC/D;AACA,SAAO,OAAO,KAAM,OAAO,EAAE,CAAC,OAAO,KAAK,CAAC;AAC3C,SAAO,OAAO,KAAM,aAAa,EAAE,CAAC,IAAI,SAAS,WAAW,CAAC;AAC/D;AAEO,MAAM,mBAAmB,MAAM,CAAC,CAAC;AACjC,MAAM,YAAY,MAAM;AACxB,MAAM,YAAY,MAAM,KAAM;AAC9B,MAAM,YAAY,MAAM,KAAM;AAE9B,MAAM,kBAAkB,oBAAI,IAAoB;AAEhD,MAAM,mBAAmB,CAAC,OAAuB;AACtD,MAAI,MAAM;AACR,OAAG,IAAK;AAAA,EACV,OAAO;AACL,oBAAgB,IAAI,EAAE;AAAA,EACxB;AACF;AAEO,MAAM,eAAe,CAAC,KAAa,UAAe;AACvD,SAAO,OAAO,KAAK,KAAK;AAC1B;",
+  "names": []
+}

package/dist/esm/constants/platform.js

@@ -7,7 +7,10 @@ const isWeb = process.env.TAMAGUI_TARGET === "web";
 const isWindowDefined = typeof window !== "undefined";
 const isSSR = isWeb && !isWindowDefined;
 const isClient = isWeb && isWindowDefined;
-const useIsomorphicLayoutEffect = isSSR ? useEffect : useLayoutEffect;
+const isRSC = process.env.ENABLE_RSC ? import.meta.env ? import.meta.env.SSR : false : false;
+const idFn = () => {
+};
+const useIsomorphicLayoutEffect = isRSC ? idFn : isSSR ? useEffect : useLayoutEffect;
 const isChrome = typeof navigator !== "undefined" && /Chrome/.test(navigator.userAgent || "");
 const isWebTouchable = isClient && "ontouchstart" in window;
 const isTouchable = !isWeb || isWebTouchable;
@@ -16,6 +19,7 @@ export {
   isChrome,
   isClient,
   isIOS,
+  isRSC,
   isSSR,
   isTouchable,
   isWeb,

package/dist/esm/constants/platform.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/constants/platform.ts"],
-  "sourcesContent": ["import { useEffect, useLayoutEffect } from 'react'\nimport { Platform } from 'react-native'\n\nexport const isAndroid = Platform?.OS === 'android'\nexport const isIOS = Platform?.OS === 'ios'\nexport const isWeb = process.env.TAMAGUI_TARGET === 'web'\nexport const isWindowDefined = typeof window !== 'undefined'\nexport const isSSR = isWeb && !isWindowDefined\nexport const isClient = isWeb && isWindowDefined\nexport const useIsomorphicLayoutEffect = isSSR ? useEffect : useLayoutEffect\nexport const isChrome = typeof navigator !== 'undefined' && /Chrome/.test(navigator.userAgent || '')\nexport const isWebTouchable = isClient && 'ontouchstart' in window\nexport const isTouchable = !isWeb || isWebTouchable\n"],
-  "mappings": "AAAA;AAAA;AACA;AAEO,MAAM,YAAY,uCAAU,QAAO;AACnC,MAAM,QAAQ,uCAAU,QAAO;AAC/B,MAAM,QAAQ,QAAQ,IAAI,mBAAmB;AAC7C,MAAM,kBAAkB,OAAO,WAAW;AAC1C,MAAM,QAAQ,SAAS,CAAC;AACxB,MAAM,WAAW,SAAS;AAC1B,MAAM,4BAA4B,QAAQ,YAAY;AACtD,MAAM,WAAW,OAAO,cAAc,eAAe,SAAS,KAAK,UAAU,aAAa,EAAE;AAC5F,MAAM,iBAAiB,YAAY,kBAAkB;AACrD,MAAM,cAAc,CAAC,SAAS;",
+  "sourcesContent": ["import { useEffect, useLayoutEffect } from 'react'\nimport { Platform } from 'react-native'\n\nexport const isAndroid = Platform?.OS === 'android'\nexport const isIOS = Platform?.OS === 'ios'\nexport const isWeb = process.env.TAMAGUI_TARGET === 'web'\nexport const isWindowDefined = typeof window !== 'undefined'\nexport const isSSR = isWeb && !isWindowDefined\nexport const isClient = isWeb && isWindowDefined\n\nexport const isRSC = process.env.ENABLE_RSC\n  ? // note this is statically analyzed so no funny business, just access it without optional chaining\n    // @ts-ignore\n    import.meta.env\n    ? // @ts-ignore\n      import.meta.env.SSR\n    : false\n  : false\n\nconst idFn = () => {}\nexport const useIsomorphicLayoutEffect = isRSC ? idFn : isSSR ? useEffect : useLayoutEffect\nexport const isChrome = typeof navigator !== 'undefined' && /Chrome/.test(navigator.userAgent || '')\nexport const isWebTouchable = isClient && 'ontouchstart' in window\nexport const isTouchable = !isWeb || isWebTouchable\n"],
+  "mappings": "AAAA;AAAA;AACA;AAEO,MAAM,YAAY,uCAAU,QAAO;AACnC,MAAM,QAAQ,uCAAU,QAAO;AAC/B,MAAM,QAAQ,QAAQ,IAAI,mBAAmB;AAC7C,MAAM,kBAAkB,OAAO,WAAW;AAC1C,MAAM,QAAQ,SAAS,CAAC;AACxB,MAAM,WAAW,SAAS;AAE1B,MAAM,QAAQ,QAAQ,IAAI,aAG7B,YAAY,MAEV,YAAY,IAAI,MAChB,QACF;AAEJ,MAAM,OAAO,MAAM;AAAC;AACb,MAAM,4BAA4B,QAAQ,OAAO,QAAQ,YAAY;AACrE,MAAM,WAAW,OAAO,cAAc,eAAe,SAAS,KAAK,UAAU,aAAa,EAAE;AAC5F,MAAM,iBAAiB,YAAY,kBAAkB;AACrD,MAAM,cAAc,CAAC,SAAS;",
   "names": []
 }

package/dist/esm/constants/platform.native.js

@@ -0,0 +1,28 @@
+var _a, _b;
+import { useLayoutEffect } from "react";
+import { Platform } from "react-native";
+const isAndroid = ((_a = Platform) == null ? void 0 : _a.OS) === "android";
+const isIOS = ((_b = Platform) == null ? void 0 : _b.OS) === "ios";
+const isWeb = false;
+const isWindowDefined = false;
+const isSSR = false;
+const isClient = false;
+const isRSC = false;
+const useIsomorphicLayoutEffect = useLayoutEffect;
+const isChrome = false;
+const isWebTouchable = false;
+const isTouchable = true;
+export {
+  isAndroid,
+  isChrome,
+  isClient,
+  isIOS,
+  isRSC,
+  isSSR,
+  isTouchable,
+  isWeb,
+  isWebTouchable,
+  isWindowDefined,
+  useIsomorphicLayoutEffect
+};
+//# sourceMappingURL=platform.native.js.map

package/dist/esm/constants/platform.native.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/constants/platform.native.ts"],
+  "sourcesContent": ["import { useLayoutEffect } from 'react'\nimport { Platform } from 'react-native'\n\nexport const isAndroid = Platform?.OS === 'android'\nexport const isIOS = Platform?.OS === 'ios'\nexport const isWeb = false\nexport const isWindowDefined = false\nexport const isSSR = false\nexport const isClient = false\nexport const isRSC = false\nexport const useIsomorphicLayoutEffect = useLayoutEffect\nexport const isChrome = false\nexport const isWebTouchable = false\nexport const isTouchable = true\n"],
+  "mappings": "AAAA;AAAA;AACA;AAEO,MAAM,YAAY,uCAAU,QAAO;AACnC,MAAM,QAAQ,uCAAU,QAAO;AAC/B,MAAM,QAAQ;AACd,MAAM,kBAAkB;AACxB,MAAM,QAAQ;AACd,MAAM,WAAW;AACjB,MAAM,QAAQ;AACd,MAAM,4BAA4B;AAClC,MAAM,WAAW;AACjB,MAAM,iBAAiB;AACvB,MAAM,cAAc;",
+  "names": []
+}

package/dist/esm/createComponent.js

@@ -18,14 +18,12 @@ import React, {
   forwardRef,
   memo,
   useCallback,
-  useContext,
-  useRef,
-  useState
+  useContext
 } from "react";
 import { StyleSheet, Text, View } from "react-native";
-import { getConfig, onConfiguredOnce } from "./conf";
+import { getConfig, onConfiguredOnce } from "./config";
 import { stackDefaultStyles } from "./constants/constants";
-import { isWeb, useIsomorphicLayoutEffect } from "./constants/platform";
+import { isClient, isRSC, isWeb, useIsomorphicLayoutEffect } from "./constants/platform";
 import { FontLanguageContext } from "./contexts/FontLanguageContext";
 import { TextAncestorContext } from "./contexts/TextAncestorContext";
 import { assignNativePropsToWeb } from "./helpers/assignNativePropsToWeb";
@@ -39,6 +37,7 @@ import { proxyThemeVariables } from "./helpers/proxyThemeVariables";
 import { useFeatures } from "./hooks/useFeatures";
 import { mediaState } from "./hooks/useMedia";
 import { usePressable } from "./hooks/usePressable";
+import { useServerRef, useServerState } from "./hooks/useServerHooks";
 import { getThemeManager, useTheme } from "./hooks/useTheme";
 import { usePressability } from "./vendor/Pressability";
 import { Slot, mergeEvent } from "./views/Slot";
@@ -54,21 +53,16 @@ const defaultComponentState = Object.freeze({
 });
 const mouseUps = /* @__PURE__ */ new Set();
 if (typeof document !== "undefined") {
-  document.addEventListener("mouseup", () => {
+  const cancelTouches = () => {
     mouseUps.forEach((x) => x());
     mouseUps.clear();
-  });
-  document.addEventListener("touchend", () => {
-    mouseUps.forEach((x) => x());
-    mouseUps.clear();
-  });
-  document.addEventListener("touchcancel", () => {
-    mouseUps.forEach((x) => x());
-    mouseUps.clear();
-  });
+  };
+  document.addEventListener("mouseup", cancelTouches);
+  document.addEventListener("touchend", cancelTouches);
+  document.addEventListener("touchcancel", cancelTouches);
 }
 function mergeShorthands({ defaultProps }, { shorthands }) {
-  for (const key in defaultProps) {
+  for (const key of Object.keys(defaultProps)) {
     defaultProps[shorthands[key] || key] = defaultProps[key];
   }
 }
@@ -100,29 +94,14 @@ function createComponent(configIn, ParentComponent) {
     } else {
       props = propsIn;
     }
-    const hostRef = 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"]) {
-        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, "(click to view)");
-        if (props["debug"] === "break") {
-          debugger;
-        }
-      }
-    }
     const forceUpdate = useForceUpdate();
+    config = config || getConfig();
     const theme = useTheme(props.theme, componentName, props, forceUpdate);
-    const states = useState(defaultComponentState);
+    const states = useServerState(defaultComponentState);
     const state = propsIn.forceStyle ? { ...states[0], [propsIn.forceStyle]: true } : states[0];
-    const setState = states[1];
-    const setStateShallow = createShallowUpdate(setState);
-    const languageContext = useContext(FontLanguageContext);
     const shouldAvoidClasses = !!(props.animation && avoidClasses);
     const shouldForcePseudo = !!propsIn.forceStyle;
     const hasTextAncestor = !!(isWeb && isText ? useContext(TextAncestorContext) : false);
@@ -137,9 +116,28 @@ function createComponent(configIn, ParentComponent) {
       hasTextAncestor,
       resolveVariablesAs: "value"
     };
-    const splitStyles = useSplitStyles(props, staticConfig, theme, splitStyleState, props.asChild ? null : initialSplitStyles.classNames, languageContext || void 0, props["debug"]);
+    const languageContext = isRSC ? null : useContext(FontLanguageContext);
+    const splitStyles = useSplitStyles(props, staticConfig, theme, splitStyleState, props.asChild ? null : initialSplitStyles == null ? void 0 : initialSplitStyles.classNames, languageContext || void 0, props["debug"]);
+    const hostRef = useServerRef(null);
+    const setState = states[1];
+    const setStateShallow = createShallowUpdate(setState);
+    if (process.env.NODE_ENV === "development") {
+      if (props["debug"]) {
+        const name = `${componentName || (Component == null ? void 0 : Component.displayName) || (Component == null ? void 0 : Component.name) || "[Unnamed Component]"}`;
+        const type = staticConfig.isReactNativeWeb ? "rnw" : "tamagui";
+        const banner = `${name} ${propsIn["data-is"] || ""} ${type}`;
+        console.group(`%c \u{1F41B} ${banner}`, "background: yellow;");
+        console.log("props in", propsIn);
+        if (typeof window !== "undefined") {
+          console.log("ref", hostRef, "(click to view)");
+        }
+        if (props["debug"] === "break") {
+          debugger;
+        }
+      }
+    }
     const { viewProps: viewPropsIn, pseudos, medias, style, classNames } = splitStyles;
-    const useAnimations = (_a = tamaguiConfig.animations) == null ? void 0 : _a.useAnimations;
+    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;
@@ -265,28 +263,30 @@ function createComponent(configIn, ParentComponent) {
       } = nonTamaguiProps;
       viewProps = webProps;
       assignNativePropsToWeb(elementType, viewProps, nonTamaguiProps);
-      useElementLayout(hostRef, onLayout);
-      useResponderEvents(hostRef, {
-        onMoveShouldSetResponder,
-        onMoveShouldSetResponderCapture,
-        onResponderEnd,
-        onResponderGrant,
-        onResponderMove,
-        onResponderReject,
-        onResponderRelease,
-        onResponderStart,
-        onResponderTerminate,
-        onResponderTerminationRequest,
-        onScrollShouldSetResponder,
-        onScrollShouldSetResponderCapture,
-        onSelectionChangeShouldSetResponder,
-        onSelectionChangeShouldSetResponderCapture,
-        onStartShouldSetResponder,
-        onStartShouldSetResponderCapture
-      });
-      const platformMethodsRef = usePlatformMethods(viewProps);
-      const setRef = useMergeRefs(hostRef, platformMethodsRef, forwardedRef);
-      viewProps.ref = setRef;
+      if (!isRSC) {
+        useElementLayout(hostRef, onLayout);
+        useResponderEvents(hostRef, {
+          onMoveShouldSetResponder,
+          onMoveShouldSetResponderCapture,
+          onResponderEnd,
+          onResponderGrant,
+          onResponderMove,
+          onResponderReject,
+          onResponderRelease,
+          onResponderStart,
+          onResponderTerminate,
+          onResponderTerminationRequest,
+          onScrollShouldSetResponder,
+          onScrollShouldSetResponderCapture,
+          onSelectionChangeShouldSetResponder,
+          onSelectionChangeShouldSetResponderCapture,
+          onStartShouldSetResponder,
+          onStartShouldSetResponderCapture
+        });
+        const platformMethodsRef = usePlatformMethods(viewProps);
+        const setRef = useMergeRefs(hostRef, platformMethodsRef, forwardedRef);
+        viewProps.ref = setRef;
+      }
       if (props.href != void 0 && hrefAttrs != void 0) {
         const { download, rel, target } = hrefAttrs;
         if (download != null) {
@@ -329,14 +329,14 @@ function createComponent(configIn, ParentComponent) {
         }
       });
     }
-    const internal = useRef();
+    const internal = useServerRef();
     if (!internal.current) {
       internal.current = {
         isMounted: true
       };
     }
     useIsomorphicLayoutEffect(() => {
-      if (typeof window !== "undefined" && (hasEnterStyle || props.animation)) {
+      if (isClient && (hasEnterStyle || props.animation) && !state.mounted) {
         setStateShallow({
           mounted: true
         });
@@ -363,7 +363,7 @@ function createComponent(configIn, ParentComponent) {
         animationStyles ?? style,
         medias
       ];
-      if (!animationStyles) {
+      if (!animationStyles && initialSplitStyles) {
         const initPseudos = initialSplitStyles.pseudos;
         const force = shouldForcePseudo;
         !state.mounted && addPseudoToStyles(styles, initPseudos, pseudos, "enterStyle");
@@ -401,8 +401,13 @@ function createComponent(configIn, ParentComponent) {
           className,
           id: props.id
         };
-        if (props["data-is"]) {
-          viewProps.dataSet.is = props["data-is"];
+        if (process.env.NODE_ENV === "development") {
+          Object.keys(viewProps).forEach((key) => {
+            if (key.startsWith("data-")) {
+              viewProps.dataSet[key.replace("data-", "")] = viewProps[key];
+              delete viewProps[key];
+            }
+          });
         }
       } else {
         viewProps.className = className;
@@ -411,7 +416,7 @@ function createComponent(configIn, ParentComponent) {
     } else {
       viewProps.style = styles;
     }
-    const initialPseudos = initialSplitStyles.pseudos;
+    const initialPseudos = initialSplitStyles == null ? void 0 : initialSplitStyles.pseudos;
     const attachPress = !!((pseudos == null ? void 0 : pseudos.pressStyle) || (initialPseudos == null ? void 0 : initialPseudos.pressStyle) || onPress || onPressOut || onPressIn || onClick);
     const isHoverable = isWeb;
     const attachHover = isHoverable && !!(pseudos && pseudos.hoverStyle || onHoverIn || onHoverOut || onMouseEnter || onMouseLeave);
@@ -428,7 +433,7 @@ function createComponent(configIn, ParentComponent) {
         pressIn: false
       });
     }, []);
-    const events = shouldAttach ? {
+    const events = shouldAttach && !isRSC ? {
       [pressOutKey]: attachPress ? (e) => {
         unPress();
         onPressOut == null ? void 0 : onPressOut(e);
@@ -524,7 +529,7 @@ function createComponent(configIn, ParentComponent) {
         onPressOut
       };
     }
-    if (isWeb) {
+    if (!isRSC && isWeb) {
       const [pressableProps] = usePressable(events ? {
         disabled,
         ...hitSlop && {
@@ -554,8 +559,6 @@ function createComponent(configIn, ParentComponent) {
           setStateShallow({ focus: false });
         });
       }
-    }
-    if (process.env.TAMAGUI_TARGET === "native") {
       const pressability = usePressability(events);
       if (attachPress && events) {
         const dontComposePressabilityKeys = {
@@ -575,7 +578,7 @@ function createComponent(configIn, ParentComponent) {
     if (process.env.TAMAGUI_TARGET === "web") {
       const isAnimatedRNWView = isAnimated && typeof elementType !== "string";
       const shouldWrapWithComponentTheme = isAnimatedRNWView && getReturnVariablesAs(props, splitStyleState) === "non-color-value";
-      const shouldWrapWithHover = events && attachHover;
+      const shouldWrapWithHover = Boolean(events || isRSC) && attachHover;
       if (shouldWrapWithHover || shouldWrapWithComponentTheme) {
         const themeClassName = shouldWrapWithComponentTheme ? `${theme.className}` : "";
         const hoverClassName = shouldWrapWithHover ? "t_Hoverable" : "";
@@ -584,7 +587,7 @@ function createComponent(configIn, ParentComponent) {
           style: {
             display: "contents"
           },
-          ...shouldWrapWithHover && {
+          ...events && shouldWrapWithHover && {
             onMouseEnter: events.onMouseEnter,
             onMouseLeave: events.onMouseLeave
           }
@@ -593,7 +596,8 @@ function createComponent(configIn, ParentComponent) {
     }
     if (process.env.NODE_ENV === "development") {
       if (props["debug"]) {
-        console.groupCollapsed("props out", viewProps, typeof elementType === "string" ? elementType : "Component");
+        const element2 = typeof elementType === "string" ? elementType : "Component";
+        console.groupCollapsed(`render <${element2} /> with props`, viewProps);
         for (const key in viewProps) {
           console.log(key, viewProps[key]);
         }
@@ -605,15 +609,14 @@ function createComponent(configIn, ParentComponent) {
         console.groupEnd();
       }
     }
-    return features.elements.length ? /* @__PURE__ */ React.createElement(React.Fragment, null, features.elements, content) : content;
+    return !isRSC && features.elements.length ? /* @__PURE__ */ React.createElement(React.Fragment, null, features.elements, content) : content;
   });
   if (staticConfig.componentName) {
     component.displayName = staticConfig.componentName;
   }
   onConfiguredOnce((conf) => {
-    if (process.env.IS_STATIC === "is_static") {
+    if (process.env.IS_STATIC === "is_static")
       return;
-    }
     tamaguiConfig = conf;
     mergeShorthands(staticConfig, tamaguiConfig);
     if (tamaguiConfig.animations) {
@@ -714,6 +717,7 @@ const Spacer = createComponent({
   validStyles,
   defaultProps: {
     ...stackDefaultStyles,
+    tag: "span",
     size: true
   },
   variants: {