@tamagui/core 1.74.21 → 1.75.1

package/dist/native.js

@@ -844,7 +844,7 @@ var require_constants_native = __commonJS({
       useIsomorphicLayoutEffect: () => useIsomorphicLayoutEffect3
     });
     module2.exports = __toCommonJS2(constants_native_exports);
-    var import_react = require("react"), isWeb = !1, isWindowDefined = !1, isServer = !1, isClient = !1, useIsomorphicLayoutEffect3 = import_react.useLayoutEffect, isChrome = !1, isWebTouchable = !1, isTouchable = !0, isAndroid = !1, isIos = !1, currentPlatform = "native";
+    var import_react3 = require("react"), isWeb = !1, isWindowDefined = !1, isServer = !1, isClient = !1, useIsomorphicLayoutEffect3 = import_react3.useLayoutEffect, isChrome = !1, isWebTouchable = !1, isTouchable = !0, isAndroid = !1, isIos = !1, currentPlatform = "native";
   }
 });
 
@@ -1699,26 +1699,26 @@ var require_createStyledContext_native = __commonJS({
       createStyledContext: () => createStyledContext
     });
     module2.exports = __toCommonJS2(createStyledContext_exports);
-    var import_react = require("react"), import_objectIdentityKey = require_objectIdentityKey_native(), import_jsx_runtime = require("react/jsx-runtime");
+    var import_react3 = require("react"), import_objectIdentityKey = require_objectIdentityKey_native(), import_jsx_runtime = require("react/jsx-runtime");
     function createStyledContext(defaultValues) {
-      let OGContext = (0, import_react.createContext)(defaultValues), OGProvider = OGContext.Provider, Context = OGContext, scopedContexts = /* @__PURE__ */ new Map(), Provider = ({
+      let OGContext = (0, import_react3.createContext)(defaultValues), OGProvider = OGContext.Provider, Context = OGContext, scopedContexts = /* @__PURE__ */ new Map(), Provider = ({
         children,
         scope,
         ...values
       }) => {
-        let value = (0, import_react.useMemo)(() => ({
+        let value = (0, import_react3.useMemo)(() => ({
           // this ! is a workaround for ts error
           ...defaultValues,
           ...values
         }), [(0, import_objectIdentityKey.objectIdentityKey)(values)]), Provider2 = OGProvider;
         if (scope) {
           let ScopedContext = scopedContexts.get(scope);
-          ScopedContext || (ScopedContext = (0, import_react.createContext)(defaultValues), scopedContexts.set(scope, ScopedContext)), Provider2 = ScopedContext.Provider;
+          ScopedContext || (ScopedContext = (0, import_react3.createContext)(defaultValues), scopedContexts.set(scope, ScopedContext)), Provider2 = ScopedContext.Provider;
         }
         return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Provider2, { value, children });
       }, useStyledContext = (scope) => {
         let context = scope ? scopedContexts.get(scope) : OGContext;
-        return (0, import_react.useContext)(context);
+        return (0, import_react3.useContext)(context);
       };
       return Context.Provider = Provider, Context.props = defaultValues, Context.context = OGContext, Context.useStyledContext = useStyledContext, Context;
     }
@@ -1780,9 +1780,9 @@ var require_useDisableSSR_native = __commonJS({
       useDisableSSR: () => useDisableSSR
     });
     module2.exports = __toCommonJS2(useDisableSSR_exports);
-    var import_react = require("react"), import_config = require_config_native(), import_ComponentContext = require_ComponentContext_native();
+    var import_react3 = require("react"), import_config = require_config_native(), import_ComponentContext = require_ComponentContext_native();
     function useDisableSSR() {
-      let componentContext = (0, import_react.useContext)(import_ComponentContext.ComponentContext);
+      let componentContext = (0, import_react3.useContext)(import_ComponentContext.ComponentContext);
       return getDisableSSR(componentContext);
     }
     function getDisableSSR(componentContext) {
@@ -1823,7 +1823,7 @@ var require_useMedia_native = __commonJS({
       useMediaListeners: () => useMediaListeners
     });
     module2.exports = __toCommonJS2(useMedia_exports);
-    var import_constants2 = require_index_native2(), import_react = require("react"), import_config = require_config_native(), import_createProxy = require_createProxy_native(), import_matchMedia = require_matchMedia_native(), import_pseudoDescriptors = require_pseudoDescriptors_native(), import_useDisableSSR = require_useDisableSSR_native(), mediaState2 = (
+    var import_constants2 = require_index_native2(), import_react3 = require("react"), import_config = require_config_native(), import_createProxy = require_createProxy_native(), import_matchMedia = require_matchMedia_native(), import_pseudoDescriptors = require_pseudoDescriptors_native(), import_useDisableSSR = require_useDisableSSR_native(), mediaState2 = (
       // development only safeguard
       process.env.NODE_ENV === "development" ? (0, import_createProxy.createProxy)(
         {},
@@ -1902,7 +1902,7 @@ var require_useMedia_native = __commonJS({
       return listeners.add(subscriber), () => listeners.delete(subscriber);
     }
     function useMedia2(uid, componentContext) {
-      let internal = (0, import_react.useRef)(), initialState = ((componentContext ? (0, import_useDisableSSR.getDisableSSR)(componentContext) : (0, import_useDisableSSR.useDisableSSR)()) ? mediaState2 : initState) || {}, state = (0, import_react.useSyncExternalStore)(
+      let internal = (0, import_react3.useRef)(), initialState = ((componentContext ? (0, import_useDisableSSR.getDisableSSR)(componentContext) : (0, import_useDisableSSR.useDisableSSR)()) ? mediaState2 : initState) || {}, state = (0, import_react3.useSyncExternalStore)(
         subscribe,
         () => {
           if (!internal.current)
@@ -2084,7 +2084,7 @@ var require_index_native6 = __commonJS({
       useDidFinishSSR: () => useDidFinishSSR
     });
     module2.exports = __toCommonJS2(src_exports2);
-    var import_react = require("react");
+    var import_react3 = require("react");
     function useDidFinishSSR(value) {
       return value ?? !0;
     }
@@ -3465,7 +3465,7 @@ var require_getSplitStyles_native = __commonJS({
       useSplitStyles: () => useSplitStyles
     });
     module2.exports = __toCommonJS2(getSplitStyles_exports);
-    var import_constants2 = require_index_native2(), import_helpers = require_index_native4(), import_react = require("react"), import_config = require_config_native(), import_accessibilityDirectMap = require_accessibilityDirectMap_native(), import_isDevTools = require_isDevTools_native(), import_useMedia = require_useMedia_native(), import_createMediaStyle = require_createMediaStyle_native(), import_expandStyles = require_expandStyles_native(), import_getGroupPropParts = require_getGroupPropParts_native(), import_getStylesAtomic = require_getStylesAtomic_native(), import_insertStyleRule = require_insertStyleRule_native(), import_normalizeValueWithProperty = require_normalizeValueWithProperty_native(), import_propMapper = require_propMapper_native(), import_pseudoDescriptors = require_pseudoDescriptors_native(), fontFamilyKey = "fontFamily", IS_STATIC = process.env.IS_STATIC === "is_static", conf, PROP_SPLIT = "-", getSplitStyles = (props, staticConfig, theme, themeName, componentState, styleProps, parentSplitStyles, context, elementType, debug) => {
+    var import_constants2 = require_index_native2(), import_helpers = require_index_native4(), import_react3 = require("react"), import_config = require_config_native(), import_accessibilityDirectMap = require_accessibilityDirectMap_native(), import_isDevTools = require_isDevTools_native(), import_useMedia = require_useMedia_native(), import_createMediaStyle = require_createMediaStyle_native(), import_expandStyles = require_expandStyles_native(), import_getGroupPropParts = require_getGroupPropParts_native(), import_getStylesAtomic = require_getStylesAtomic_native(), import_insertStyleRule = require_insertStyleRule_native(), import_normalizeValueWithProperty = require_normalizeValueWithProperty_native(), import_propMapper = require_propMapper_native(), import_pseudoDescriptors = require_pseudoDescriptors_native(), fontFamilyKey = "fontFamily", IS_STATIC = process.env.IS_STATIC === "is_static", conf, PROP_SPLIT = "-", getSplitStyles = (props, staticConfig, theme, themeName, componentState, styleProps, parentSplitStyles, context, elementType, debug) => {
       var _a, _b, _c, _e, _f, _g;
       conf = conf || (0, import_config.getConfig)();
       let { shorthands } = conf, {
@@ -3875,7 +3875,7 @@ current`, {
             for (let key in cur)
               key in styleState.usedKeys || mergeStyle(styleState, key, cur[key]);
     }
-    var useInsertEffectCompat = import_constants2.isWeb ? import_react.useInsertionEffect || import_constants2.useIsomorphicLayoutEffect : () => {
+    var useInsertEffectCompat = import_constants2.isWeb ? import_react3.useInsertionEffect || import_constants2.useIsomorphicLayoutEffect : () => {
     }, useSplitStyles = (...args) => {
       let res = getSplitStyles(...args);
       return useInsertEffectCompat(() => {
@@ -4030,7 +4030,7 @@ var require_ThemeManagerContext_native = __commonJS({
       ThemeManagerContext: () => ThemeManagerContext
     });
     module2.exports = __toCommonJS2(ThemeManagerContext_exports);
-    var import_react = require("react"), ThemeManagerContext = (0, import_react.createContext)(null);
+    var import_react3 = require("react"), ThemeManagerContext = (0, import_react3.createContext)(null);
   }
 });
 
@@ -4072,7 +4072,7 @@ var require_ThemeManager_native = __commonJS({
       }
       updateStateFromProps(props = this.props || {}, shouldNotify = !0) {
         if (this.props = props, props.forceTheme)
-          return this.state.theme = props.forceTheme, this.state.name = props.name || "", !0;
+          return this.state.theme = props.forceTheme, this.state.name = props.name || "", this.updateState(this.state, !0), this.state;
         let nextState = this.getStateIfChanged(props);
         if (nextState)
           return this.updateState(nextState, shouldNotify), nextState;
@@ -4123,7 +4123,7 @@ var require_ThemeManager_native = __commonJS({
       if (!baseManager && props.reset)
         return process.env.NODE_ENV !== "production" && console.warn("Cannot reset, no parent theme exists"), null;
       let { componentName } = props, result = null, baseName = (baseManager == null ? void 0 : baseManager.state.name) || "";
-      baseManager != null && baseManager.state.isComponent && (baseName = baseName.replace(/_[A-Z][a-z]+/, ""));
+      baseManager != null && baseManager.state.isComponent && (baseName = baseName.replace(/_[A-Z][A-Za-z]+/, ""));
       let nextName = props.reset ? baseName : props.name || "", allComponentThemes = componentManagers.map((x) => (x == null ? void 0 : x.state.name) || "");
       isDirectParentAComponentTheme && allComponentThemes.shift();
       let base = baseName.split(import_constants22.THEME_NAME_SEPARATOR), max = base.length, min = props.componentName && !nextName ? max : 0;
@@ -4222,7 +4222,7 @@ var require_useTheme_native = __commonJS({
       useThemeWithState: () => useThemeWithState
     });
     module2.exports = __toCommonJS2(useTheme_exports);
-    var import_constants2 = require_index_native2(), import_react = require("react"), import_config = require_config_native(), import_createVariable = require_createVariable_native(), import_createProxy = require_createProxy_native(), import_createShallowSetState = require_createShallowSetState_native(), import_ThemeManager = require_ThemeManager_native(), import_ThemeManagerContext = require_ThemeManagerContext_native(), import_getThemeUnwrapped = require_getThemeUnwrapped_native(), emptyProps = { name: null }, cached;
+    var import_constants2 = require_index_native2(), import_react3 = require("react"), import_config = require_config_native(), import_createVariable = require_createVariable_native(), import_createProxy = require_createProxy_native(), import_createShallowSetState = require_createShallowSetState_native(), import_ThemeManager = require_ThemeManager_native(), import_ThemeManagerContext = require_ThemeManagerContext_native(), import_getThemeUnwrapped = require_getThemeUnwrapped_native(), emptyProps = { name: null }, cached;
     function getDefaultThemeProxied() {
       if (cached)
         return cached;
@@ -4233,7 +4233,7 @@ var require_useTheme_native = __commonJS({
       let [_, theme] = useThemeWithState(props);
       return theme || getDefaultThemeProxied();
     }, useThemeWithState = (props) => {
-      let keys = (0, import_react.useRef)([]), changedThemeState = useChangeThemeEffect(
+      let keys = (0, import_react3.useRef)([]), changedThemeState = useChangeThemeEffect(
         props,
         !1,
         keys.current,
@@ -4253,7 +4253,7 @@ var require_useTheme_native = __commonJS({
 
 If this is intended and you are using Tamagui without any themes, you can disable this warning by setting the environment variable TAMAGUI_DISABLE_NO_THEME_WARNING=1`
       );
-      let themeProxied = (0, import_react.useMemo)(() => !themeManager || !(state != null && state.theme) ? {} : getThemeProxied(state, props.deopt, themeManager, keys.current, props.debug), [state, themeManager, props.deopt, props.debug]);
+      let themeProxied = (0, import_react3.useMemo)(() => !themeManager || !(state != null && state.theme) ? {} : getThemeProxied(state, props.deopt, themeManager, keys.current, props.debug), [state == null ? void 0 : state.theme, themeManager, props.deopt, props.debug]);
       return process.env.NODE_ENV === "development" && props.debug === "verbose" && (console.groupCollapsed("  \u{1F539} useTheme =>", state == null ? void 0 : state.name), console.info("returning state", changedThemeState, "from props", props), console.groupEnd()), [changedThemeState, themeProxied];
     };
     function getThemeProxied({ theme, name, scheme }, deopt = !1, themeManager, keys, debug) {
@@ -4326,14 +4326,14 @@ If this is intended and you are using Tamagui without any themes, you can disabl
       return !1;
     }
     var activeThemeManagers = /* @__PURE__ */ new Set(), useChangeThemeEffect = (props, isRoot = !1, keys, shouldUpdate) => {
-      let { disable } = props, parentManager = (0, import_react.useContext)(import_ThemeManagerContext.ThemeManagerContext);
+      let { disable } = props, parentManager = (0, import_react3.useContext)(import_ThemeManagerContext.ThemeManagerContext);
       if (!isRoot && !parentManager || disable)
         return {
           isNewTheme: !1,
           state: parentManager == null ? void 0 : parentManager.state,
           themeManager: parentManager
         };
-      let [themeState, setThemeState] = (0, import_react.useState)(createState), { state, mounted, isNewTheme, themeManager, inversed } = themeState, isInversingOnMount = !!(!themeState.mounted && props.inverse);
+      let [themeState, setThemeState] = (0, import_react3.useState)(createState), { state, mounted, isNewTheme, themeManager, inversed } = themeState, isInversingOnMount = !!(!themeState.mounted && props.inverse);
       function getShouldUpdateTheme(manager = themeManager, nextState, prevState = state, forceShouldChange = !1) {
         let forceUpdate = shouldUpdate == null ? void 0 : shouldUpdate();
         if (!manager || !forceShouldChange && forceUpdate === !1)
@@ -4342,7 +4342,7 @@ If this is intended and you are using Tamagui without any themes, you can disabl
         if (forceShouldChange || next && !(forceUpdate !== !0 && !manager.getStateShouldChange(next, prevState)))
           return next;
       }
-      if (import_constants2.isServer || ((0, import_react.useLayoutEffect)(() => {
+      if (import_constants2.isServer || ((0, import_react3.useLayoutEffect)(() => {
         if (!themeManager)
           return;
         if (props.inverse && !mounted) {
@@ -4355,17 +4355,20 @@ If this is intended and you are using Tamagui without any themes, you can disabl
         isNewTheme && themeManager && activeThemeManagers.add(themeManager), (isNewTheme || getShouldUpdateTheme(themeManager)) && setThemeState(createState);
         let selfListenerDispose = themeManager.onChangeTheme((_a, _b, forced) => {
           forced && setThemeState((prev) => createState(prev, !0));
-        }), disposeChangeListener = parentManager == null ? void 0 : parentManager.onChangeTheme((name, manager) => {
-          let force = (shouldUpdate == null ? void 0 : shouldUpdate()) || props.deopt || props["disable-child-theme"], shouldTryUpdate = force ?? !!(keys != null && keys.length || isNewTheme);
-          process.env.NODE_ENV === "development" && props.debug && console.info(" \u{1F538} onChange", themeManager.id, {
-            force,
-            shouldTryUpdate,
-            props,
-            name,
-            manager,
-            keys
-          }), shouldTryUpdate && setThemeState(createState);
-        }, themeManager.id);
+        }), disposeChangeListener = parentManager == null ? void 0 : parentManager.onChangeTheme(
+          (name, manager, forced) => {
+            let force = forced || (shouldUpdate == null ? void 0 : shouldUpdate()) || props.deopt || props["disable-child-theme"], shouldTryUpdate = force ?? !!(keys != null && keys.length || isNewTheme);
+            process.env.NODE_ENV === "development" && props.debug && console.info(" \u{1F538} onChange", themeManager.id, {
+              force,
+              shouldTryUpdate,
+              props,
+              name,
+              manager,
+              keys
+            }), shouldTryUpdate && setThemeState(createState);
+          },
+          themeManager.id
+        );
         return () => {
           selfListenerDispose(), disposeChangeListener == null || disposeChangeListener(), activeThemeManagers.delete(themeManager);
         };
@@ -4378,7 +4381,7 @@ If this is intended and you are using Tamagui without any themes, you can disabl
         props.name,
         props.reset,
         mounted
-      ]), process.env.NODE_ENV === "development" && props.debug !== "profile" && (0, import_react.useEffect)(() => (globalThis.TamaguiThemeManagers ??= /* @__PURE__ */ new Set(), globalThis.TamaguiThemeManagers.add(themeManager), () => {
+      ]), process.env.NODE_ENV === "development" && props.debug !== "profile" && (0, import_react3.useEffect)(() => (globalThis.TamaguiThemeManagers ??= /* @__PURE__ */ new Set(), globalThis.TamaguiThemeManagers.add(themeManager), () => {
         globalThis.TamaguiThemeManagers.delete(themeManager);
       }), [themeManager])), isInversingOnMount)
         return {
@@ -4398,14 +4401,14 @@ If this is intended and you are using Tamagui without any themes, you can disabl
         themeManager
       };
       function createState(prev, force = !1) {
-        if (prev && (shouldUpdate == null ? void 0 : shouldUpdate()) === !1)
+        if (prev && (shouldUpdate == null ? void 0 : shouldUpdate()) === !1 && !force)
           return prev;
         let themeManager2 = parentManager, state2;
         if ((0, import_ThemeManager.getHasThemeUpdatingProps)(props)) {
           let getNewThemeManager = () => new import_ThemeManager.ThemeManager(props, isRoot ? "root" : parentManager);
           if (prev != null && prev.themeManager) {
             themeManager2 = prev.themeManager;
-            let forceChange = !!(keys != null && keys.length), next = themeManager2.getState(props, parentManager), nextState = getShouldUpdateTheme(
+            let forceChange = force || !!(keys != null && keys.length), next = themeManager2.getState(props, parentManager), nextState = getShouldUpdateTheme(
               themeManager2,
               next,
               prev.state,
@@ -4498,17 +4501,17 @@ var require_Theme_native = __commonJS({
       useThemedChildren: () => useThemedChildren
     });
     module2.exports = __toCommonJS2(Theme_exports);
-    var import_constants2 = require_index_native2(), import_react = __toESM2(require("react")), import_createVariable = require_createVariable_native(), import_ThemeManagerContext = require_ThemeManagerContext_native(), import_useTheme = require_useTheme_native(), import_ThemeDebug = require_ThemeDebug_native(), import_jsx_runtime = require("react/jsx-runtime"), Theme = (0, import_react.forwardRef)(function(props, ref) {
+    var import_constants2 = require_index_native2(), import_react3 = __toESM2(require("react")), import_createVariable = require_createVariable_native(), import_ThemeManagerContext = require_ThemeManagerContext_native(), import_useTheme = require_useTheme_native(), import_ThemeDebug = require_ThemeDebug_native(), import_jsx_runtime = require("react/jsx-runtime"), Theme = (0, import_react3.forwardRef)(function(props, ref) {
       if (props.disable)
         return props.children;
-      let isRoot = !!props._isRoot, disableDirectChildTheme = props["disable-child-theme"], themeState = (0, import_useTheme.useChangeThemeEffect)(props, isRoot), children = (0, import_react.useMemo)(() => {
-        let children2 = disableDirectChildTheme ? import_react.Children.map(
+      let isRoot = !!props._isRoot, disableDirectChildTheme = props["disable-child-theme"], themeState = (0, import_useTheme.useChangeThemeEffect)(props, isRoot), children = (0, import_react3.useMemo)(() => {
+        let children2 = disableDirectChildTheme ? import_react3.Children.map(
           props.children,
-          (child) => (0, import_react.cloneElement)(child, { "data-disable-theme": !0 })
+          (child) => (0, import_react3.cloneElement)(child, { "data-disable-theme": !0 })
         ) : props.children;
         if (ref)
           try {
-            import_react.default.Children.only(children2), children2 = (0, import_react.cloneElement)(children2, { ref });
+            import_react3.default.Children.only(children2), children2 = (0, import_react3.cloneElement)(children2, { ref });
           } catch {
           }
         return process.env.NODE_ENV === "development" && props.debug === "visualize" && (children2 = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ThemeDebug.ThemeDebug, { themeState, themeProps: props, children: children2 })), children2;
@@ -4517,11 +4520,11 @@ var require_Theme_native = __commonJS({
     });
     Theme.avoidForwardRef = !0;
     function useThemedChildren(themeState, children, props, isRoot = !1, avoidWrap = !1) {
-      let { themeManager, isNewTheme } = themeState, { shallow, forceClassName } = props, hasEverThemed = (0, import_react.useRef)(!1);
+      let { themeManager, isNewTheme } = themeState, { shallow, forceClassName } = props, hasEverThemed = (0, import_react3.useRef)(!1);
       if (isNewTheme && (hasEverThemed.current = !0), !(isNewTheme || props.inverse || hasEverThemed.current || forceClassName || isRoot))
         return children;
       let next = children;
-      shallow && themeManager && (next = import_react.Children.toArray(children).map((child) => (0, import_react.isValidElement)(child) ? (0, import_react.cloneElement)(
+      shallow && themeManager && (next = import_react3.Children.toArray(children).map((child) => (0, import_react3.isValidElement)(child) ? (0, import_react3.cloneElement)(
         child,
         void 0,
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Theme, { name: themeManager.state.parentName, children: child.props.children })
@@ -4580,9 +4583,9 @@ var require_themeable_native = __commonJS({
       themeable: () => themeable
     });
     module2.exports = __toCommonJS2(themeable_exports);
-    var import_react = require("react"), import_Theme = require_Theme_native(), import_jsx_runtime = require("react/jsx-runtime");
+    var import_react3 = require("react"), import_Theme = require_Theme_native(), import_jsx_runtime = require("react/jsx-runtime");
     function themeable(Component, staticConfig) {
-      let withTheme = (0, import_react.forwardRef)(function(props, ref) {
+      let withTheme = (0, import_react3.forwardRef)(function(props, ref) {
         let { themeInverse, theme, componentName, themeReset, ...rest } = props, element = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ref, ...rest, "data-disable-theme": !0 });
         return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_Theme.Theme,
@@ -4645,11 +4648,11 @@ var require_Slot_native = __commonJS({
       Slottable: () => Slottable
     });
     module2.exports = __toCommonJS2(Slot_exports);
-    var import_compose_refs = require_index_native5(), import_constants2 = require_index_native2(), import_helpers = require_index_native4(), import_react = require("react"), import_jsx_runtime = require("react/jsx-runtime"), Slot = (0, import_react.forwardRef)(function(props, forwardedRef) {
+    var import_compose_refs = require_index_native5(), import_constants2 = require_index_native2(), import_helpers = require_index_native4(), import_react3 = require("react"), import_jsx_runtime = require("react/jsx-runtime"), Slot = (0, import_react3.forwardRef)(function(props, forwardedRef) {
       let { children, ...slotProps } = props;
-      if ((0, import_react.isValidElement)(children)) {
+      if ((0, import_react3.isValidElement)(children)) {
         let mergedProps = mergeSlotProps(children, slotProps);
-        return (0, import_react.cloneElement)(
+        return (0, import_react3.cloneElement)(
           children,
           children.type.avoidForwardRef ? mergedProps : {
             ...mergedProps,
@@ -4657,7 +4660,7 @@ var require_Slot_native = __commonJS({
           }
         );
       }
-      return import_react.Children.count(children) > 1 ? import_react.Children.only(null) : null;
+      return import_react3.Children.count(children) > 1 ? import_react3.Children.only(null) : null;
     }), Slottable = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children }), pressMap = import_constants2.isWeb ? {
       onPress: "onClick",
       onPressOut: "onMouseUp",
@@ -4706,7 +4709,7 @@ var require_createComponent_native = __commonJS({
       spacedChildren: () => spacedChildren
     });
     module2.exports = __toCommonJS2(createComponent_exports);
-    var import_compose_refs = require_index_native5(), import_constants2 = require_index_native2(), import_helpers = require_index_native4(), import_use_did_finish_ssr = require_index_native6(), import_react = __toESM2(require("react")), import_config = require_config_native(), import_constants22 = require_constants_native2(), import_ComponentContext = require_ComponentContext_native(), import_createVariable = require_createVariable_native(), import_defaultComponentState = require_defaultComponentState_native(), import_createShallowSetState = require_createShallowSetState_native(), import_getSplitStyles = require_getSplitStyles_native(), import_mergeProps = require_mergeProps_native(), import_proxyThemeVariables = require_proxyThemeVariables_native(), import_themeable = require_themeable_native(), import_useMedia = require_useMedia_native(), import_useTheme = require_useTheme_native(), import_setupHooks = require_setupHooks_native(), import_Slot = require_Slot_native(), import_Theme = require_Theme_native(), import_ThemeDebug = require_ThemeDebug_native(), import_jsx_runtime = require("react/jsx-runtime"), tamaguiConfig, AnimatedText, AnimatedView, initialTheme, time, debugKeyListeners, startVisualizer, mouseUps = /* @__PURE__ */ new Set();
+    var import_compose_refs = require_index_native5(), import_constants2 = require_index_native2(), import_helpers = require_index_native4(), import_use_did_finish_ssr = require_index_native6(), import_react3 = __toESM2(require("react")), import_config = require_config_native(), import_constants22 = require_constants_native2(), import_ComponentContext = require_ComponentContext_native(), import_createVariable = require_createVariable_native(), import_defaultComponentState = require_defaultComponentState_native(), import_createShallowSetState = require_createShallowSetState_native(), import_getSplitStyles = require_getSplitStyles_native(), import_mergeProps = require_mergeProps_native(), import_proxyThemeVariables = require_proxyThemeVariables_native(), import_themeable = require_themeable_native(), import_useMedia = require_useMedia_native(), import_useTheme = require_useTheme_native(), import_setupHooks = require_setupHooks_native(), import_Slot = require_Slot_native(), import_Theme = require_Theme_native(), import_ThemeDebug = require_ThemeDebug_native(), import_jsx_runtime = require("react/jsx-runtime"), tamaguiConfig, AnimatedText, AnimatedView, initialTheme, time, debugKeyListeners, startVisualizer, mouseUps = /* @__PURE__ */ new Set();
     if (typeof document < "u") {
       let cancelTouches = () => {
         mouseUps.forEach((x) => x()), mouseUps.clear();
@@ -4756,17 +4759,17 @@ var require_createComponent_native = __commonJS({
         defaultProps,
         defaultPropsKeyOrder: defaultProps ? Object.keys(defaultProps) : []
       });
-      let component = (0, import_react.forwardRef)((propsIn, forwardedRef) => {
-        var _a2, _b, _c, _d, _e, _f, _i, _j, _k, _l, _m, _n, _o;
+      let component = (0, import_react3.forwardRef)((propsIn, forwardedRef) => {
+        var _a2, _b, _c, _d, _e, _f, _i, _j, _k, _l, _m;
         if (process.env.NODE_ENV === "development" && startVisualizer && (startVisualizer(), startVisualizer = void 0), !hasSetupBaseViews) {
           hasSetupBaseViews = !0;
-          let baseViews = (_b = (_a2 = import_setupHooks.hooks).getBaseViews) == null ? void 0 : _b.call(_a2);
-          baseViews && (BaseText = baseViews.Text, BaseView = baseViews.View);
+          let baseViews2 = (_b = (_a2 = import_setupHooks.hooks).getBaseViews) == null ? void 0 : _b.call(_a2);
+          baseViews2 && (BaseText = baseViews2.Text, BaseView = baseViews2.View);
         }
         process.env.NODE_ENV === "test" && propsIn["data-test-renders"] && (propsIn["data-test-renders"].current ??= 0, propsIn["data-test-renders"].current += 1);
-        let componentContext = (0, import_react.useContext)(import_ComponentContext.ComponentContext), styledContextProps, overriddenContextProps, contextValue, { context } = staticConfig;
+        let componentContext = (0, import_react3.useContext)(import_ComponentContext.ComponentContext), styledContextProps, overriddenContextProps, contextValue, { context } = staticConfig;
         if (context) {
-          contextValue = (0, import_react.useContext)(context);
+          contextValue = (0, import_react3.useContext)(context);
           let { inverseShorthands } = (0, import_config.getConfig)();
           for (let key in context.props) {
             let propVal = (
@@ -4779,7 +4782,7 @@ var require_createComponent_native = __commonJS({
         let curDefaultProps = styledContextProps ? { ...defaultProps, ...styledContextProps } : defaultProps, props = propsIn;
         curDefaultProps && (props = (0, import_mergeProps.mergeProps)(curDefaultProps, propsIn));
         let debugProp = props.debug, componentName = props.componentName || staticConfig.componentName;
-        process.env.NODE_ENV === "development" && import_constants2.isClient && (0, import_react.useEffect)(() => {
+        process.env.NODE_ENV === "development" && import_constants2.isClient && (0, import_react3.useEffect)(() => {
           let overlay = null, debugVisualizerHandler = (show = !1) => {
             let node = hostRef.current;
             if (node)
@@ -4796,18 +4799,18 @@ var require_createComponent_native = __commonJS({
         }, [componentName]), process.env.NODE_ENV === "development" && time && time`start (ignore)`;
         let isHydrated = config != null && config.disableSSR ? !0 : (0, import_use_did_finish_ssr.useDidFinishSSR)();
         process.env.NODE_ENV === "development" && time && time`did-finish-ssr`;
-        let stateRef = (0, import_react.useRef)(
+        let stateRef = (0, import_react3.useRef)(
           void 0
         );
         stateRef.current ||= {}, process.env.NODE_ENV === "development" && time && time`stateref`;
-        let hostRef = (0, import_react.useRef)(null), animationsConfig = componentContext.animationDriver, useAnimations = animationsConfig == null ? void 0 : animationsConfig.useAnimations, hasAnimationProp = !!(props.animation || props.style && hasAnimatedStyleValue(props.style)), supportsCSSVars = animationsConfig == null ? void 0 : animationsConfig.supportsCSSVars, willBeAnimated = (() => {
+        let hostRef = (0, import_react3.useRef)(null), animationsConfig = componentContext.animationDriver, useAnimations = animationsConfig == null ? void 0 : animationsConfig.useAnimations, hasAnimationProp = !!(props.animation || props.style && hasAnimatedStyleValue(props.style)), supportsCSSVars = animationsConfig == null ? void 0 : animationsConfig.supportsCSSVars, willBeAnimated = (() => {
           if (import_constants2.isServer && !supportsCSSVars)
             return !1;
           let curState = stateRef.current;
           return !!(hasAnimationProp && !isHOC && useAnimations || curState.hasAnimated);
         })(), usePresence = animationsConfig == null ? void 0 : animationsConfig.usePresence, presence = willBeAnimated && (usePresence == null ? void 0 : usePresence()) || null, hasEnterStyle = !!props.enterStyle, needsMount = !!((!import_constants2.isWeb || import_constants2.isClient) && willBeAnimated);
         process.env.NODE_ENV === "development" && time && time`pre-use-state`;
-        let initialState = willBeAnimated ? supportsCSSVars ? import_defaultComponentState.defaultComponentStateShouldEnter : import_defaultComponentState.defaultComponentState : import_defaultComponentState.defaultComponentStateMounted, states = (0, import_react.useState)(initialState), state = propsIn.forceStyle ? { ...states[0], [propsIn.forceStyle]: !0 } : states[0], setState = states[1], setStateShallow = (0, import_createShallowSetState.createShallowSetState)(setState), groupName = props.group, groupClassName = groupName ? `t_group_${props.group}` : "";
+        let initialState = willBeAnimated ? supportsCSSVars ? import_defaultComponentState.defaultComponentStateShouldEnter : import_defaultComponentState.defaultComponentState : import_defaultComponentState.defaultComponentStateMounted, states = (0, import_react3.useState)(initialState), state = propsIn.forceStyle ? { ...states[0], [propsIn.forceStyle]: !0 } : states[0], setState = states[1], setStateShallow = (0, import_createShallowSetState.createShallowSetState)(setState), groupName = props.group, groupClassName = groupName ? `t_group_${props.group}` : "";
         if (groupName) {
           let groupContextState = componentContext.groups.state, og = setStateShallow;
           setStateShallow = (state2) => {
@@ -4843,17 +4846,12 @@ var require_createComponent_native = __commonJS({
           componentName,
           disable: disableTheme,
           shallow: stateRef.current.themeShallow,
-          // if this returns undefined it defers to the keys tracking, so its only used to force either updates or no updates
-          shouldUpdate: () => (
-            // when we use $theme- styles we need to force it to re-render on theme changes (this can be optimized likely)
-            stateRef.current.isListeningToTheme
-          ),
           debug: debugProp
         };
-        themeStateProps.deopt = willBeAnimated;
+        typeof stateRef.current.isListeningToTheme == "boolean" && (themeStateProps.shouldUpdate = () => stateRef.current.isListeningToTheme), themeStateProps.deopt = willBeAnimated;
         let isExiting = !state.unmounted && (presence == null ? void 0 : presence[0]) === !1;
         if (process.env.NODE_ENV === "development") {
-          let id = (0, import_react.useId)();
+          let id = (0, import_react3.useId)();
           if (debugProp && debugProp !== "profile") {
             let name = `${componentName || (Component == null ? void 0 : Component.displayName) || (Component == null ? void 0 : Component.name) || "[Unnamed Component]"}`, type = isAnimatedReactNative ? "(animated)" : isReactNative ? "(rnw)" : "", dataIs = propsIn["data-is"] || "", banner = `${name}${dataIs ? ` ${dataIs}` : ""} ${type} id ${id}`;
             console.group(
@@ -4991,7 +4989,7 @@ If you meant to do this, you can disable this warning - either change untilMeasu
           }
         )), viewProps = nonTamaguiProps;
         let composedRef = (0, import_compose_refs.useComposedRefs)(hostRef, forwardedRef);
-        viewProps.ref = composedRef, process.env.NODE_ENV === "development" && !isReactNative && !isText && import_constants2.isWeb && !isHOC && import_react.Children.toArray(props.children).forEach((item) => {
+        viewProps.ref = composedRef, process.env.NODE_ENV === "development" && !isReactNative && !isText && import_constants2.isWeb && !isHOC && import_react3.Children.toArray(props.children).forEach((item) => {
           typeof item == "string" && item !== `
 ` && console.error(
             `Unexpected text node: ${item}. A text node cannot be a child of a <View>.`
@@ -5001,7 +4999,7 @@ If you meant to do this, you can disable this warning - either change untilMeasu
           press: !1,
           pressIn: !1
         }), shouldSetMounted = needsMount && state.unmounted, { pseudoGroups, mediaGroups } = splitStyles;
-        (0, import_react.useEffect)(() => {
+        (0, import_react3.useEffect)(() => {
           if (shouldSetMounted) {
             let unmounted = state.unmounted === !0 && hasEnterStyle ? "should-enter" : !1;
             setStateShallow({
@@ -5111,12 +5109,16 @@ If you meant to do this, you can disable this warning - either change untilMeasu
           isZStack,
           debug: debugProp
         });
-        asChild && (elementType = import_Slot.Slot, Object.assign(viewProps, { onPress, onLongPress })), process.env.NODE_ENV === "development" && time && time`spaced-as-child`, // in test mode disable perf unwrapping so react-testing-library finds Text properly
-        process.env.NODE_ENV !== "test" && (elementType === BaseText || elementType === BaseView) ? process.env.TAMAGUI_OPTIMIZE_NATIVE_VIEWS ? (viewProps.children = content, content = (0, import_react.createElement)(
-          elementType === BaseText ? "RCTText" : "RCTView",
-          viewProps
-        )) : (viewProps.children = content, content = elementType.render(viewProps, viewProps.ref)) : content = (0, import_react.createElement)(elementType, viewProps, content), import_setupHooks.hooks.useChildren && (content = (_m = (_l = import_setupHooks.hooks).useChildren) == null ? void 0 : _m.call(_l, content, viewProps, events, staticConfig)), process.env.NODE_ENV === "development" && time && time`create-element`;
-        let subGroupContext = (0, import_react.useMemo)(() => {
+        asChild && (elementType = import_Slot.Slot, Object.assign(viewProps, { onPress, onLongPress })), process.env.NODE_ENV === "development" && time && time`spaced-as-child`;
+        let useChildrenResult;
+        import_setupHooks.hooks.useChildren && (useChildrenResult = import_setupHooks.hooks.useChildren(
+          elementType,
+          content,
+          viewProps,
+          events,
+          staticConfig
+        )), useChildrenResult ? content = useChildrenResult : content = (0, import_react3.createElement)(elementType, viewProps, content), process.env.NODE_ENV === "development" && time && time`create-element`;
+        let subGroupContext = (0, import_react3.useMemo)(() => {
           if (groupName)
             return {
               ...componentContext.groups,
@@ -5163,8 +5165,8 @@ If you meant to do this, you can disable this warning - either change untilMeasu
               handlesPressEvents,
               willBeAnimated,
               isStringElement,
-              classNamesIn: (_n = props.className) == null ? void 0 : _n.split(" "),
-              classNamesOut: (_o = viewProps.className) == null ? void 0 : _o.split(" "),
+              classNamesIn: (_l = props.className) == null ? void 0 : _l.split(" "),
+              classNamesOut: (_m = viewProps.className) == null ? void 0 : _m.split(" "),
               events,
               shouldAttach,
               pseudos,
@@ -5189,7 +5191,7 @@ If you meant to do this, you can disable this warning - either change untilMeasu
       });
       staticConfig.componentName && (component.displayName = staticConfig.componentName);
       let res = component;
-      (process.env.TAMAGUI_FORCE_MEMO || staticConfig.memo) && (res = (0, import_react.memo)(res)), res.staticConfig = staticConfig;
+      (process.env.TAMAGUI_FORCE_MEMO || staticConfig.memo) && (res = (0, import_react3.memo)(res)), res.staticConfig = staticConfig;
       function extendStyledConfig(extended) {
         return {
           ...staticConfig,
@@ -5206,7 +5208,7 @@ If you meant to do this, you can disable this warning - either change untilMeasu
         var _a2;
         let ComponentForwardedRef = ((_a2 = Component2.render) == null ? void 0 : _a2.length) === 2 ? Component2 : (
           // memo because theme changes otherwise would always re-render
-          (0, import_react.memo)((0, import_react.forwardRef)(Component2))
+          (0, import_react3.memo)((0, import_react3.forwardRef)(Component2))
         ), extendedConfig = extendStyledConfig(options == null ? void 0 : options.staticConfig), out = options != null && options.disableTheme ? ComponentForwardedRef : (0, import_themeable.themeable)(ComponentForwardedRef, extendedConfig);
         return out.staticConfig = extendedConfig, out.styleable = styleable, out;
       }
@@ -5264,19 +5266,19 @@ If you meant to do this, you can disable this warning - either change untilMeasu
       let { isZStack, children, space, direction, spaceFlex, separator } = props, hasSpace = !!(space || spaceFlex), hasSeparator = separator != null;
       if (!(hasSpace || hasSeparator || isZStack))
         return children;
-      let childrenList = import_react.Children.toArray(children);
+      let childrenList = import_react3.Children.toArray(children);
       if (childrenList.length <= 1 && !isZStack && !((_b = (_a = childrenList[0]) == null ? void 0 : _a.type) != null && _b.shouldForwardSpace))
         return childrenList;
       let final = [];
       for (let [index, child] of childrenList.entries()) {
         let isEmpty = child == null || Array.isArray(child) && child.length === 0;
-        if (!isEmpty && import_react.default.isValidElement(child) && (_c = child.type) != null && _c.shouldForwardSpace && (child = import_react.default.cloneElement(child, {
+        if (!isEmpty && import_react3.default.isValidElement(child) && (_c = child.type) != null && _c.shouldForwardSpace && (child = import_react3.default.cloneElement(child, {
           space,
           spaceFlex,
           separator,
           key: child.key
         })), isEmpty || !child || child.key && !isZStack ? final.push(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)
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react3.Fragment, { children: isZStack ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AbsoluteFill, { children: child }) : child }, index)
         ), isUnspaced(child) && index === 0 || isZStack)
           continue;
         let next = childrenList[index + 1];
@@ -5288,7 +5290,7 @@ If you meant to do this, you can disable this warning - either change untilMeasu
             spaceFlex
           })
         ), final.push(
-          import_react.default.isValidElement(separator) ? import_react.default.cloneElement(separator, { key: `sep_${index}` }) : separator
+          import_react3.default.isValidElement(separator) ? import_react3.default.cloneElement(separator, { key: `sep_${index}` }) : separator
         ), hasSpace && final.push(
           createSpacer({
             key: `_${index}01tmgui`,
@@ -6159,7 +6161,7 @@ var require_isTamaguiElement_native = __commonJS({
       isTamaguiElement: () => isTamaguiElement
     });
     module2.exports = __toCommonJS2(isTamaguiElement_exports);
-    var import_react = require("react"), import_isTamaguiComponent = require_isTamaguiComponent_native(), isTamaguiElement = (child, name) => (0, import_react.isValidElement)(child) && (0, import_isTamaguiComponent.isTamaguiComponent)(child.type, name);
+    var import_react3 = require("react"), import_isTamaguiComponent = require_isTamaguiComponent_native(), isTamaguiElement = (child, name) => (0, import_react3.isValidElement)(child) && (0, import_isTamaguiComponent.isTamaguiComponent)(child.type, name);
   }
 });
 
@@ -6180,11 +6182,11 @@ var require_withStaticProperties_native = __commonJS({
       withStaticProperties: () => withStaticProperties
     });
     module2.exports = __toCommonJS2(withStaticProperties_exports);
-    var import_react = require("react"), Decorated = Symbol(), withStaticProperties = function(component, staticProps) {
+    var import_react3 = require("react"), Decorated = Symbol(), withStaticProperties = function(component, staticProps) {
       let next = (() => {
         if (component[Decorated]) {
-          let _ = (0, import_react.forwardRef)(
-            (props, ref) => (0, import_react.createElement)(component, { ...props, ref })
+          let _ = (0, import_react3.forwardRef)(
+            (props, ref) => (0, import_react3.createElement)(component, { ...props, ref })
           );
           for (let key in component) {
             let v = component[key];
@@ -6215,9 +6217,9 @@ var require_useThemeName_native = __commonJS({
       useThemeName: () => useThemeName
     });
     module2.exports = __toCommonJS2(useThemeName_exports);
-    var import_constants2 = require_index_native2(), import_react = require("react"), import_ThemeManagerContext = require_ThemeManagerContext_native();
+    var import_constants2 = require_index_native2(), import_react3 = require("react"), import_ThemeManagerContext = require_ThemeManagerContext_native();
     function useThemeName(opts) {
-      let manager = (0, import_react.useContext)(import_ThemeManagerContext.ThemeManagerContext), [name, setName] = (0, import_react.useState)((manager == null ? void 0 : manager.state.name) || "");
+      let manager = (0, import_react3.useContext)(import_ThemeManagerContext.ThemeManagerContext), [name, setName] = (0, import_react3.useState)((manager == null ? void 0 : manager.state.name) || "");
       return (0, import_constants2.useIsomorphicLayoutEffect)(() => {
         if (manager)
           return setName(manager.state.name), manager.onChangeTheme((next, manager2) => {
@@ -6246,8 +6248,8 @@ var require_useConfiguration_native = __commonJS({
       useConfiguration: () => useConfiguration
     });
     module2.exports = __toCommonJS2(useConfiguration_exports);
-    var import_react = require("react"), import_config = require_config_native(), import_ComponentContext = require_ComponentContext_native(), useConfiguration = () => {
-      let { groups, animationDriver, ...restComponentConfig } = (0, import_react.useContext)(import_ComponentContext.ComponentContext), { animations, ...restConfig } = (0, import_config.getConfig)();
+    var import_react3 = require("react"), import_config = require_config_native(), import_ComponentContext = require_ComponentContext_native(), useConfiguration = () => {
+      let { groups, animationDriver, ...restComponentConfig } = (0, import_react3.useContext)(import_ComponentContext.ComponentContext), { animations, ...restConfig } = (0, import_config.getConfig)();
       return {
         ...restConfig,
         ...restComponentConfig,
@@ -6322,7 +6324,7 @@ var require_useProps_native = __commonJS({
       useStyle: () => useStyle
     });
     module2.exports = __toCommonJS2(useProps_exports);
-    var import_react = require("react"), import_ComponentContext = require_ComponentContext_native(), import_defaultComponentState = require_defaultComponentState_native(), import_getSplitStyles = require_getSplitStyles_native(), import_Stack = require_Stack_native(), import_useMedia = require_useMedia_native(), import_useTheme = require_useTheme_native();
+    var import_react3 = require("react"), import_ComponentContext = require_ComponentContext_native(), import_defaultComponentState = require_defaultComponentState_native(), import_getSplitStyles = require_getSplitStyles_native(), import_Stack = require_Stack_native(), import_useMedia = require_useMedia_native(), import_useTheme = require_useTheme_native();
     function useProps(props, opts) {
       let [propsOut, styleOut] = usePropsAndStyle(props, {
         ...opts,
@@ -6342,7 +6344,7 @@ var require_useProps_native = __commonJS({
       var _a, _b;
       let staticConfig = ((_a = opts == null ? void 0 : opts.forComponent) == null ? void 0 : _a.staticConfig) ?? import_Stack.Stack.staticConfig, [themeState, theme] = (0, import_useTheme.useThemeWithState)({
         componentName: staticConfig.componentName
-      }), componentContext = (0, import_react.useContext)(import_ComponentContext.ComponentContext), media = (0, import_useMedia.useMedia)(), splitStyles = (0, import_getSplitStyles.useSplitStyles)(
+      }), componentContext = (0, import_react3.useContext)(import_ComponentContext.ComponentContext), media = (0, import_useMedia.useMedia)(), splitStyles = (0, import_getSplitStyles.useSplitStyles)(
         props,
         staticConfig,
         theme,
@@ -6453,7 +6455,7 @@ var require_ThemeProvider_native = __commonJS({
       ThemeProvider: () => ThemeProvider
     });
     module2.exports = __toCommonJS2(ThemeProvider_exports);
-    var import_constants2 = require_index_native2(), import_react = require("react"), import_constants22 = require_constants_native2(), import_Theme = require_Theme_native(), import_jsx_runtime = require("react/jsx-runtime"), ThemeProvider = (props) => (import_constants2.isClient && (0, import_react.useLayoutEffect)(() => {
+    var import_constants2 = require_index_native2(), import_react3 = require("react"), import_constants22 = require_constants_native2(), import_Theme = require_Theme_native(), import_jsx_runtime = require("react/jsx-runtime"), ThemeProvider = (props) => (import_constants2.isClient && (0, import_react3.useLayoutEffect)(() => {
       if (props.disableRootThemeClass)
         return;
       let cn = `${import_constants22.THEME_CLASSNAME_PREFIX}${props.defaultTheme}`, target = props.themeClassNameOnRoot ? document.documentElement : document.body;
@@ -6490,8 +6492,8 @@ var require_FontLanguage_native = __commonJS({
       FontLanguage: () => FontLanguage
     });
     module2.exports = __toCommonJS2(FontLanguage_native_exports);
-    var import_react = require("react"), import_ComponentContext = require_ComponentContext_native(), import_jsx_runtime = require("react/jsx-runtime"), FontLanguage = ({ children, ...props }) => {
-      let language = (0, import_react.useMemo)(() => props, [JSON.stringify(props)]);
+    var import_react3 = require("react"), import_ComponentContext = require_ComponentContext_native(), import_jsx_runtime = require("react/jsx-runtime"), FontLanguage = ({ children, ...props }) => {
+      let language = (0, import_react3.useMemo)(() => props, [JSON.stringify(props)]);
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ComponentContext.ComponentContext.Provider, { language, children });
     };
   }
@@ -6587,12 +6589,12 @@ var require_useGet_native = __commonJS({
       useGet: () => useGet
     });
     module2.exports = __toCommonJS2(useGet_exports);
-    var import_react = require("react"), isWeb = !1, isClient = typeof window < "u", useIsomorphicLayoutEffect3 = !isWeb || isClient ? import_react.useLayoutEffect : import_react.useEffect;
+    var import_react3 = require("react"), isWeb = !1, isClient = typeof window < "u", useIsomorphicLayoutEffect3 = !isWeb || isClient ? import_react3.useLayoutEffect : import_react3.useEffect;
     function useGet(currentValue, initialValue, forwardToFunction) {
-      let curRef = (0, import_react.useRef)(initialValue ?? currentValue);
+      let curRef = (0, import_react3.useRef)(initialValue ?? currentValue);
       return useIsomorphicLayoutEffect3(() => {
         curRef.current = currentValue;
-      }), (0, import_react.useCallback)(
+      }), (0, import_react3.useCallback)(
         forwardToFunction ? (...args) => {
           var _a;
           return (_a = curRef.current) == null ? void 0 : _a.apply(null, args);
@@ -6794,14 +6796,217 @@ __export(src_exports, {
   Text: () => Text
 });
 module.exports = __toCommonJS(src_exports);
-var import_react_native_use_responder_events = __toESM(require_index_native()), import_web2 = __toESM(require_index_native9());
+var import_react_native_use_responder_events = __toESM(require_index_native()), import_web2 = __toESM(require_index_native9()), import_react2 = require("react");
+
+// src/createOptimizedView.native.tsx
+var import_react = require("react");
+function createOptimizedView(children, viewProps, baseViews2) {
+  let TextAncestor = baseViews2.TextAncestor, ViewNativeComponent = baseViews2.View, {
+    accessibilityElementsHidden,
+    accessibilityLabel,
+    accessibilityLabelledBy,
+    accessibilityLiveRegion,
+    accessibilityRole,
+    accessibilityState,
+    accessibilityValue,
+    "aria-busy": ariaBusy,
+    "aria-checked": ariaChecked,
+    "aria-disabled": ariaDisabled,
+    "aria-expanded": ariaExpanded,
+    "aria-hidden": ariaHidden,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-live": ariaLive,
+    "aria-selected": ariaSelected,
+    "aria-valuemax": ariaValueMax,
+    "aria-valuemin": ariaValueMin,
+    "aria-valuenow": ariaValueNow,
+    "aria-valuetext": ariaValueText,
+    focusable,
+    id,
+    importantForAccessibility,
+    nativeID,
+    pointerEvents,
+    role,
+    tabIndex
+    // ...otherProps
+  } = viewProps, _accessibilityLabelledBy = (ariaLabelledBy == null ? void 0 : ariaLabelledBy.split(/\s*,\s*/g)) ?? accessibilityLabelledBy, _accessibilityState;
+  (accessibilityState != null || ariaBusy != null || ariaChecked != null || ariaDisabled != null || ariaExpanded != null || ariaSelected != null) && (_accessibilityState = {
+    busy: ariaBusy ?? (accessibilityState == null ? void 0 : accessibilityState.busy),
+    checked: ariaChecked ?? (accessibilityState == null ? void 0 : accessibilityState.checked),
+    disabled: ariaDisabled ?? (accessibilityState == null ? void 0 : accessibilityState.disabled),
+    expanded: ariaExpanded ?? (accessibilityState == null ? void 0 : accessibilityState.expanded),
+    selected: ariaSelected ?? (accessibilityState == null ? void 0 : accessibilityState.selected)
+  });
+  let _accessibilityValue;
+  (accessibilityValue != null || ariaValueMax != null || ariaValueMin != null || ariaValueNow != null || ariaValueText != null) && (_accessibilityValue = {
+    max: ariaValueMax ?? (accessibilityValue == null ? void 0 : accessibilityValue.max),
+    min: ariaValueMin ?? (accessibilityValue == null ? void 0 : accessibilityValue.min),
+    now: ariaValueNow ?? (accessibilityValue == null ? void 0 : accessibilityValue.now),
+    text: ariaValueText ?? (accessibilityValue == null ? void 0 : accessibilityValue.text)
+  });
+  let style = Array.isArray(viewProps.style) ? baseViews2.StyleSheet.flatten(viewProps.style) : viewProps.style, newPointerEvents = (style == null ? void 0 : style.pointerEvents) || pointerEvents, finalProps = viewProps, extras = {
+    accessibilityLiveRegion: ariaLive === "off" ? "none" : ariaLive ?? accessibilityLiveRegion,
+    accessibilityLabel: ariaLabel ?? accessibilityLabel,
+    focusable: tabIndex !== void 0 ? !tabIndex : focusable,
+    accessibilityState: _accessibilityState,
+    accessibilityRole: role ? getAccessibilityRoleFromRole(role) : accessibilityRole,
+    accessibilityElementsHidden: ariaHidden ?? accessibilityElementsHidden,
+    accessibilityLabelledBy: _accessibilityLabelledBy,
+    accessibilityValue: _accessibilityValue,
+    importantForAccessibility: ariaHidden === !0 ? "no-hide-descendants" : importantForAccessibility,
+    nativeID: id ?? nativeID,
+    style,
+    pointerEvents: newPointerEvents
+  };
+  for (let key in extras)
+    extras[key] != null && (finalProps[key] = extras[key]);
+  let isInText = (0, import_react.useContext)(TextAncestor), finalElement = (0, import_react.createElement)(ViewNativeComponent, finalProps, children);
+  return isInText ? (0, import_react.createElement)(TextAncestor.Provider, { value: !1 }, finalElement) : finalElement;
+}
+function getAccessibilityRoleFromRole(role) {
+  switch (role) {
+    case "alert":
+      return "alert";
+    case "alertdialog":
+      return;
+    case "application":
+      return;
+    case "article":
+      return;
+    case "banner":
+      return;
+    case "button":
+      return "button";
+    case "cell":
+      return;
+    case "checkbox":
+      return "checkbox";
+    case "columnheader":
+      return;
+    case "combobox":
+      return "combobox";
+    case "complementary":
+      return;
+    case "contentinfo":
+      return;
+    case "definition":
+      return;
+    case "dialog":
+      return;
+    case "directory":
+      return;
+    case "document":
+      return;
+    case "feed":
+      return;
+    case "figure":
+      return;
+    case "form":
+      return;
+    case "grid":
+      return "grid";
+    case "group":
+      return;
+    case "heading":
+      return "header";
+    case "img":
+      return "image";
+    case "link":
+      return "link";
+    case "list":
+      return "list";
+    case "listitem":
+      return;
+    case "log":
+      return;
+    case "main":
+      return;
+    case "marquee":
+      return;
+    case "math":
+      return;
+    case "menu":
+      return "menu";
+    case "menubar":
+      return "menubar";
+    case "menuitem":
+      return "menuitem";
+    case "meter":
+      return;
+    case "navigation":
+      return;
+    case "none":
+      return "none";
+    case "note":
+      return;
+    case "option":
+      return;
+    case "presentation":
+      return "none";
+    case "progressbar":
+      return "progressbar";
+    case "radio":
+      return "radio";
+    case "radiogroup":
+      return "radiogroup";
+    case "region":
+      return;
+    case "row":
+      return;
+    case "rowgroup":
+      return;
+    case "rowheader":
+      return;
+    case "scrollbar":
+      return "scrollbar";
+    case "searchbox":
+      return "search";
+    case "separator":
+      return;
+    case "slider":
+      return "adjustable";
+    case "spinbutton":
+      return "spinbutton";
+    case "status":
+      return;
+    case "summary":
+      return "summary";
+    case "switch":
+      return "switch";
+    case "tab":
+      return "tab";
+    case "table":
+      return;
+    case "tablist":
+      return "tablist";
+    case "tabpanel":
+      return;
+    case "term":
+      return;
+    case "timer":
+      return "timer";
+    case "toolbar":
+      return "toolbar";
+    case "tooltip":
+      return;
+    case "tree":
+      return;
+    case "treegrid":
+      return;
+    case "treeitem":
+      return;
+  }
+}
 
 // src/getBaseViews.native.ts
 function getBaseViews() {
-  let native = require("react-native");
-  return {
-    View: native.View || native.default.View,
+  let native = require("react-native"), View, TextAncestor;
+  return process.env.NODE_ENV !== "test" && (View = require("react-native/Libraries/Components/View/ViewNativeComponent").default, TextAncestor = require("react-native/Libraries/Text/TextAncestor")), View || (View = native.View || native.default.View), {
+    View,
     Text: native.Text || native.default.Text,
+    StyleSheet: native.StyleSheet || native.default.StyleSheet,
+    TextAncestor,
     Pressable: native.Pressable || native.default.Pressable
   };
 }
@@ -6881,7 +7086,7 @@ var Pressability = require_fake_react_native().default, usePressability = (init_
 
 // src/index.tsx
 __reExport(src_exports, __toESM(require_index_native9()), module.exports);
-var Stack = import_web2.Stack, Text = import_web2.Text;
+var Stack = import_web2.Stack, Text = import_web2.Text, baseViews = getBaseViews();
 (0, import_web2.setupHooks)({
   getBaseViews,
   usePropsTransform(elementType, propsIn, hostRef) {
@@ -6954,22 +7159,15 @@ var Stack = import_web2.Stack, Text = import_web2.Text;
           viewProps[key] = og && !dontComposePressabilityKeys[key] ? (0, import_web2.composeEventHandlers)(og, val) : val;
         }
     }
+  },
+  useChildren(elementType, children, viewProps, events, staticConfig) {
+    if (process.env.NODE_ENV !== "test") {
+      if (elementType === baseViews.View)
+        return createOptimizedView(children, viewProps, baseViews);
+      if (process.env.TAMAGUI_OPTIMIZE_NATIVE_VIEWS && elementType === baseViews.Text)
+        return viewProps.children = children, (0, import_react2.createElement)("RCTText", viewProps);
+    }
   }
-  // attempt at properly fixing RN input, but <Pressable><TextInput /> just doesnt work on RN
-  // useChildren(children, viewProps, events, staticConfig) {
-  //   if (process.env.TAMAGUI_TARGET === 'native') {
-  //     if (staticConfig.isInput && !staticConfig.isHOC) {
-  //       const Pressable = getBaseViews().Pressable
-  //       console.log(
-  //         'wrapping in pressable',
-  //         events?.['onPressIn']?.toString(),
-  //         viewProps['onPressIn']
-  //       )
-  //       // we need to wrap it in a view?
-  //       return <Pressable {...events}>{children}</Pressable>
-  //     }
-  //   }
-  // },
 });
 var dontComposePressabilityKeys = {
   onClick: !0