@tamagui/core 1.122.8 → 1.123.0

package/dist/native.js

@@ -359,7 +359,7 @@ var require_types_native = __commonJS({
 var require_constants_native = __commonJS({
   "../constants/dist/cjs/constants.native.js"(exports2, module2) {
     "use strict";
-    var __create2 = Object.create, __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __getProtoOf2 = Object.getPrototypeOf, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = function(target, all) {
+    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = function(target, all) {
       for (var name in all) __defProp2(target, name, {
         get: all[name],
         enumerable: !0
@@ -387,18 +387,6 @@ var require_constants_native = __commonJS({
         }
       }
       return to;
-    }, __toESM2 = function(mod, isNodeMode, target) {
-      return target = mod != null ? __create2(__getProtoOf2(mod)) : {}, __copyProps2(
-        // If the importer is in node compatibility mode or this is not an ESM
-        // file that has been converted to a CommonJS file using a Babel-
-        // compatible transform (i.e. "__esModule" has not been set), then set
-        // "default" to the CommonJS "module.exports" for node compatibility.
-        isNodeMode || !mod || !mod.__esModule ? __defProp2(target, "default", {
-          value: mod,
-          enumerable: !0
-        }) : target,
-        mod
-      );
     }, __toCommonJS2 = function(mod) {
       return __copyProps2(__defProp2({}, "__esModule", {
         value: !0
@@ -440,7 +428,7 @@ var require_constants_native = __commonJS({
       }
     });
     module2.exports = __toCommonJS2(constants_native_exports);
-    var import_react3 = __toESM2(require("react")), isWeb = !1, isWindowDefined = !1, isServer = !1, isClient = !1, useIsomorphicLayoutEffect2 = import_react3.default.useLayoutEffect, isChrome = !1, isWebTouchable = !1, isTouchable = !0, isAndroid = !1, isIos = process.env.TEST_NATIVE_PLATFORM === "ios", currentPlatform = "native";
+    var import_react3 = require("react"), isWeb = !1, isWindowDefined = !1, isServer = !1, isClient = !1, useIsomorphicLayoutEffect2 = import_react3.useLayoutEffect, isChrome = !1, isWebTouchable = !1, isTouchable = !0, isAndroid = !1, isIos = process.env.TEST_NATIVE_PLATFORM === "ios", currentPlatform = "native";
   }
 });
 
@@ -604,10 +592,7 @@ var require_validStyleProps_native = __commonJS({
     }, validStyleProps_exports = {};
     __export2(validStyleProps_exports, {
       stylePropsAll: function() {
-        return stylePropsAll;
-      },
-      stylePropsFont: function() {
-        return stylePropsFont;
+        return stylePropsAll2;
       },
       stylePropsText: function() {
         return stylePropsText;
@@ -631,7 +616,7 @@ var require_validStyleProps_native = __commonJS({
         return validPseudoKeys;
       },
       validStyles: function() {
-        return validStyles;
+        return validStyles2;
       }
     });
     module2.exports = __toCommonJS2(validStyleProps_exports);
@@ -859,7 +844,7 @@ var require_validStyleProps_native = __commonJS({
     }, stylePropsText = {
       ...stylePropsView,
       ...stylePropsTextOnly
-    }, stylePropsAll = stylePropsText, validPseudoKeys = {
+    }, stylePropsAll2 = stylePropsText, validPseudoKeys = {
       enterStyle: !0,
       exitStyle: !0,
       hoverStyle: !0,
@@ -867,7 +852,7 @@ var require_validStyleProps_native = __commonJS({
       focusStyle: !0,
       disabledStyle: !0,
       focusWithinStyle: !0
-    }, validStyles = stylePropsView;
+    }, validStyles2 = stylePropsView;
   }
 });
 
@@ -1228,7 +1213,7 @@ var require_createVariable_native = __commonJS({
       }
     });
     module2.exports = __toCommonJS2(createVariable_exports);
-    var import_constants2 = require_index_native2(), import_helpers = require_index_native3(), import_config = require_config_native();
+    var import_constants2 = require_index_native2(), import_helpers2 = require_index_native3(), import_config = require_config_native();
     function constructCSSVariableName(name) {
       return `var(--${process.env.TAMAGUI_CSS_VARIABLE_PREFIX || ""}${name})`;
     }
@@ -1239,7 +1224,7 @@ var require_createVariable_native = __commonJS({
       return {
         isVar: !0,
         key,
-        name: skipHash ? name : (0, import_helpers.simpleHash)(name, 40),
+        name: skipHash ? name : (0, import_helpers2.simpleHash)(name, 40),
         val,
         variable: import_constants2.isWeb ? skipHash ? constructCSSVariableName(name) : createCSSVariable(name) : ""
       };
@@ -1280,7 +1265,7 @@ var require_createVariable_native = __commonJS({
     var createCSSVariable = function(nameProp) {
       var includeVar = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !0;
       if (process.env.NODE_ENV === "development" && (!nameProp || typeof nameProp != "string")) throw new Error(`createCSSVariable expected string, got: ${nameProp}`);
-      var name = (0, import_helpers.simpleHash)(nameProp, 60);
+      var name = (0, import_helpers2.simpleHash)(nameProp, 60);
       return includeVar ? constructCSSVariableName(name) : name;
     };
   }
@@ -1356,7 +1341,7 @@ var require_insertStyleRule_native = __commonJS({
       }
     });
     module2.exports = __toCommonJS2(insertStyleRule_exports);
-    var import_constants2 = require_index_native2(), import_helpers = require_index_native3(), import_createVariable = require_createVariable_native(), scannedCache = /* @__PURE__ */ new WeakMap(), totalSelectorsInserted = /* @__PURE__ */ new Map(), allSelectors = {}, allRules = {}, insertedTransforms2 = {}, getAllSelectors = function() {
+    var import_constants2 = require_index_native2(), import_helpers2 = require_index_native3(), import_createVariable = require_createVariable_native(), scannedCache = /* @__PURE__ */ new WeakMap(), totalSelectorsInserted = /* @__PURE__ */ new Map(), allSelectors = {}, allRules = {}, insertedTransforms2 = {}, getAllSelectors = function() {
       return allSelectors;
     }, getAllRules = function() {
       return Object.values(allRules);
@@ -1604,9 +1589,9 @@ var require_insertStyleRule_native = __commonJS({
         }
         if (!sheet) return;
         for (var key in rulesToInsert) {
-          var styleObject = rulesToInsert[key], identifier = styleObject[import_helpers.StyleObjectIdentifier];
+          var styleObject = rulesToInsert[key], identifier = styleObject[import_helpers2.StyleObjectIdentifier];
           if (shouldInsertStyleRules(identifier)) {
-            var rules = styleObject[import_helpers.StyleObjectRules];
+            var rules = styleObject[import_helpers2.StyleObjectRules];
             allSelectors[identifier] = rules.join(`
 `), track(identifier), updateRules(identifier, rules);
             var _iteratorNormalCompletion = !0, _didIteratorError = !1, _iteratorError = void 0;
@@ -2849,73 +2834,61 @@ var require_useTheme_native = __commonJS({
       process.env.NODE_ENV === "development" && (state != null && state.theme || process.env.TAMAGUI_DISABLE_NO_THEME_WARNING !== "1" && console.error(`[tamagui] No theme found, this could be due to an invalid theme name (given theme props ${JSON.stringify(props)}).
 
 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`));
-      var themeProxied = (0, import_react3.useMemo)(function() {
-        return keys.current && (keys.current = null), !themeManager || !(state != null && state.theme) ? {} : getThemeProxied(state, props.deopt, keys, themeManager, props.debug);
-      }, [
-        state == null ? void 0 : state.theme,
-        themeManager,
-        props.deopt,
-        props.debug
-      ]);
+      var themeProxied = getThemeProxied(props, state, keys, themeManager);
       return process.env.NODE_ENV === "development" && props.debug === "verbose" && (console.groupCollapsed(`  \u{1F539} [${themeManager == null ? void 0 : themeManager.id}] useTheme =>`, state == null ? void 0 : state.name), console.info("returning state", changedThemeState.state, changedThemeState.isNewTheme, "from props", props), console.groupEnd()), [
         changedThemeState,
         themeProxied
       ];
-    };
-    function getThemeProxied(param) {
-      var { theme, name, scheme } = param, deopt = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !1, keys = arguments.length > 2 ? arguments[2] : void 0, themeManager = arguments.length > 3 ? arguments[3] : void 0, debug = arguments.length > 4 ? arguments[4] : void 0;
-      if (!theme) return {};
-      var config = (0, import_config.getConfig)();
+    }, emptyObject = {}, ProxiedThemes = /* @__PURE__ */ new Map(), curKeys, curProps, curThemeManger;
+    function getThemeProxied(_props, state, _keys, _themeManager) {
+      var theme = state == null ? void 0 : state.theme;
+      if (!theme || !_themeManager) return emptyObject;
+      if (curKeys = _keys, curProps = _props, curThemeManger = _themeManager, ProxiedThemes.has(theme)) {
+        var proxied = ProxiedThemes.get(theme);
+        return proxied;
+      }
+      var { name, scheme } = state, config = (0, import_config.getConfig)();
       function track(key) {
-        keys.current || (keys.current = [], setTimeout(function() {
-          themeManager == null || themeManager.selfUpdate();
-        })), keys.current.push(key), process.env.NODE_ENV === "development" && debug && console.info(` \u{1F3A8} useTheme() tracking new key: ${key}`);
-      }
-      return new Proxy(theme, {
-        has(_, key) {
-          if (Reflect.has(theme, key)) return !0;
-          if (typeof key == "string") return key[0] === "$" && (key = key.slice(1)), themeManager == null ? void 0 : themeManager.allKeys.has(key);
-        },
-        get(_, key) {
-          if (
-            // dont ask me, idk why but on hermes you can see that useTheme()[undefined] passes in STRING undefined to proxy
-            // if someone is crazy enough to use "undefined" as a theme key then this not working is on them
-            key !== "undefined" && typeof key == "string"
-          ) {
-            var keyString = key[0] === "$" ? key.slice(1) : key, val = theme[keyString];
-            if (val && typeof val == "object") return new Proxy(val, {
-              // when they touch the actual value we only track it
-              // if its a variable (web), its ignored!
-              get(_2, subkey) {
-                if (subkey === "val") globalThis.tamaguiAvoidTracking || (process.env.NODE_ENV === "development" && debug === "verbose" && console.info(" \u{1F3A8} useTheme() tracking new key because of .val access", new Error().stack), track(keyString));
-                else if (subkey === "get") return function(platform) {
-                  var outVal = (0, import_createVariable.getVariable)(val);
-                  if (platform !== "web" && import_constants2.isIos && !deopt && (0, import_config.getSetting)("fastSchemeChange") && !(0, import_shouldDeoptDueToParentScheme.shouldDeoptDueToParentScheme)(themeManager) && scheme) {
-                    var _config_themes_name, _config_themes_oppositeName, oppositeScheme = scheme === "dark" ? "light" : "dark", oppositeName = name.replace(scheme, oppositeScheme), color = (0, import_createVariable.getVariable)((_config_themes_name = config.themes[name]) === null || _config_themes_name === void 0 ? void 0 : _config_themes_name[keyString]), oppositeColor = (0, import_createVariable.getVariable)((_config_themes_oppositeName = config.themes[oppositeName]) === null || _config_themes_oppositeName === void 0 ? void 0 : _config_themes_oppositeName[keyString]), dynamicVal = {
-                      dynamic: {
-                        [scheme]: color,
-                        [oppositeScheme]: oppositeColor
-                      }
-                    };
-                    return dynamicVal;
-                  }
-                  return process.env.NODE_ENV === "development" && debug && console.info(` \u{1F3A8} useTheme() tracking new key because of: 
-                        not web: ${platform !== "web"}
-                        isIOS: ${import_constants2.isIos}
-                        deopt: ${deopt}
-                        fastScheme: ${(0, import_config.getSetting)("fastSchemeChange")}
-                        inversed: ${getIsInversed(themeManager)}
-                      `), track(keyString), outVal;
-                };
-                return Reflect.get(val, subkey);
-              }
-            });
-            if (process.env.NODE_ENV === "development" && process.env.TAMAGUI_FEAT_THROW_ON_MISSING_THEME_VALUE === "1") throw new Error(`[tamagui] No theme key "${key}" found in theme ${name}. 
-  Keys in theme: ${Object.keys(theme).join(", ")}`);
+        curKeys && (curKeys.current || (curKeys.current = []), curKeys.current.push(key), process.env.NODE_ENV === "development" && curProps.debug && console.info(` \u{1F3A8} useTheme() tracking new key: ${key}`));
+      }
+      var proxied1 = Object.fromEntries(Object.entries(theme).flatMap(function(param) {
+        var [key, value] = param, proxied2 = {
+          ...value,
+          get val() {
+            return globalThis.tamaguiAvoidTracking || track(key), value.val;
+          },
+          get(platform) {
+            var outVal = (0, import_createVariable.getVariable)(value);
+            if (platform !== "web" && import_constants2.isIos && !curProps.deopt && (0, import_config.getSetting)("fastSchemeChange") && !(0, import_shouldDeoptDueToParentScheme.shouldDeoptDueToParentScheme)(curThemeManger) && scheme) {
+              var _config_themes_name, _config_themes_oppositeName, oppositeScheme = scheme === "dark" ? "light" : "dark", oppositeName = name.replace(scheme, oppositeScheme), color = (0, import_createVariable.getVariable)((_config_themes_name = config.themes[name]) === null || _config_themes_name === void 0 ? void 0 : _config_themes_name[key]), oppositeColor = (0, import_createVariable.getVariable)((_config_themes_oppositeName = config.themes[oppositeName]) === null || _config_themes_oppositeName === void 0 ? void 0 : _config_themes_oppositeName[key]), dynamicVal = {
+                dynamic: {
+                  [scheme]: color,
+                  [oppositeScheme]: oppositeColor
+                }
+              };
+              return dynamicVal;
+            }
+            return process.env.NODE_ENV === "development" && curProps.debug && console.info(` \u{1F3A8} useTheme() tracking new key because of: 
+                not web: ${platform !== "web"}
+                isIOS: ${import_constants2.isIos}
+                deopt: ${curProps.deopt}
+                fastScheme: ${(0, import_config.getSetting)("fastSchemeChange")}
+                inversed: ${getIsInversed(curThemeManger)}
+              `), track(key), outVal;
           }
-          return Reflect.get(_, key);
-        }
-      });
+        };
+        return [
+          [
+            key,
+            proxied2
+          ],
+          [
+            `$${key}`,
+            proxied2
+          ]
+        ];
+      }));
+      return ProxiedThemes.set(theme, proxied1), proxied1;
     }
     function getIsInversed(manager) {
       for (var isInversed = !1, cur = manager; cur; ) {
@@ -4929,14 +4902,14 @@ var require_normalizeValueWithProperty_native = __commonJS({
       }
     });
     module2.exports = __toCommonJS2(normalizeValueWithProperty_exports);
-    var import_constants2 = require_index_native2(), import_helpers = require_index_native3(), import_insertStyleRule = require_insertStyleRule_native(), stylePropsAllPlusTransforms = {
-      ...import_helpers.stylePropsAll,
+    var import_constants2 = require_index_native2(), import_helpers2 = require_index_native3(), import_insertStyleRule = require_insertStyleRule_native(), stylePropsAllPlusTransforms = {
+      ...import_helpers2.stylePropsAll,
       translateX: !0,
       translateY: !0
     };
     function normalizeValueWithProperty(value) {
       var property = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : "";
-      if (!import_constants2.isWeb || import_helpers.stylePropsUnitless[property] || property && !stylePropsAllPlusTransforms[property] || typeof value == "boolean") return value;
+      if (!import_constants2.isWeb || import_helpers2.stylePropsUnitless[property] || property && !stylePropsAllPlusTransforms[property] || typeof value == "boolean") return value;
       var res = value;
       return value && typeof value == "object" ? value : (typeof value == "number" ? res = `${value}px` : property && (res = `${res}`), res);
     }
@@ -4949,7 +4922,7 @@ var require_normalizeValueWithProperty_native = __commonJS({
         return;
       }
       var cssVal = cssRule.replace(/.*:/, "").replace(/;.*/, "").trim(), res;
-      return cssVal.startsWith("var(") ? res = cssVal : import_helpers.stylePropsUnitless[key] ? res = +cssVal : cssVal.endsWith("px") ? res = +cssVal.replace("px", "") : res = cssVal, rcache[cssRule] = res, process.env.NODE_ENV === "development" && typeof res == "number" && Number.isNaN(res) && console.info("Tamagui invalid parsed value, NaN:", {
+      return cssVal.startsWith("var(") ? res = cssVal : import_helpers2.stylePropsUnitless[key] ? res = +cssVal : cssVal.endsWith("px") ? res = +cssVal.replace("px", "") : res = cssVal, rcache[cssRule] = res, process.env.NODE_ENV === "development" && typeof res == "number" && Number.isNaN(res) && console.info("Tamagui invalid parsed value, NaN:", {
         res,
         cssVal,
         cssRule,
@@ -5705,7 +5678,7 @@ var require_propMapper_native = __commonJS({
       }
     });
     module2.exports = __toCommonJS2(propMapper_exports);
-    var import_constants2 = require_index_native2(), import_helpers = require_index_native3(), import_config = require_config_native(), import_createVariable = require_createVariable_native(), import_expandStyle = require_expandStyle_native(), import_getVariantExtras = require_getVariantExtras_native(), import_isObj = require_isObj_native(), import_normalizeStyle = require_normalizeStyle_native(), import_pseudoDescriptors = require_pseudoDescriptors_native(), import_skipProps = require_skipProps_native(), propMapper = function(key, value, styleState, disabled, map) {
+    var import_constants2 = require_index_native2(), import_helpers2 = require_index_native3(), import_config = require_config_native(), import_createVariable = require_createVariable_native(), import_expandStyle = require_expandStyle_native(), import_getVariantExtras = require_getVariantExtras_native(), import_isObj = require_isObj_native(), import_normalizeStyle = require_normalizeStyle_native(), import_pseudoDescriptors = require_pseudoDescriptors_native(), import_skipProps = require_skipProps_native(), propMapper = function(key, value, styleState, disabled, map) {
       if (disabled) return map(key, value);
       if (lastFontFamilyToken = null, !(!import_constants2.isAndroid && key === "elevationAndroid")) {
         var { conf, styleProps, staticConfig } = styleState;
@@ -5908,7 +5881,7 @@ var require_propMapper_native = __commonJS({
               break;
             }
           }
-          for (var cat in import_helpers.tokenCategories) if (key in import_helpers.tokenCategories[cat]) {
+          for (var cat in import_helpers2.tokenCategories) if (key in import_helpers2.tokenCategories[cat]) {
             var res = tokensParsed[cat][value];
             res != null && (valOrVar = res, hasSet = !0);
           }
@@ -6111,9 +6084,9 @@ var require_getSplitStyles_native = __commonJS({
       }
     });
     module2.exports = __toCommonJS2(getSplitStyles_exports);
-    var import_constants2 = require_index_native2(), import_helpers = require_index_native3(), import_react3 = __toESM2(require("react")), import_config = require_config_native(), import_accessibilityDirectMap = require_accessibilityDirectMap_native(), import_constants22 = require_constants_native2(), 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_isActivePlatform = require_isActivePlatform_native(), import_isActiveTheme = require_isActiveTheme_native(), import_log = require_log_native(), import_normalizeValueWithProperty = require_normalizeValueWithProperty_native(), import_propMapper = require_propMapper_native(), import_pseudoDescriptors = require_pseudoDescriptors_native(), import_skipProps = require_skipProps_native(), import_sortString = require_sortString_native(), import_transformsToString = require_transformsToString_native(), consoleGroupCollapsed = import_constants2.isWeb ? console.groupCollapsed : console.info, conf, PROP_SPLIT = "-";
-    function isValidStyleKey(key, validStyles, accept) {
-      return key in validStyles ? !0 : accept && key in accept;
+    var import_constants2 = require_index_native2(), import_helpers2 = require_index_native3(), import_react3 = __toESM2(require("react")), import_config = require_config_native(), import_accessibilityDirectMap = require_accessibilityDirectMap_native(), import_constants22 = require_constants_native2(), 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_isActivePlatform = require_isActivePlatform_native(), import_isActiveTheme = require_isActiveTheme_native(), import_log = require_log_native(), import_normalizeValueWithProperty = require_normalizeValueWithProperty_native(), import_propMapper = require_propMapper_native(), import_pseudoDescriptors = require_pseudoDescriptors_native(), import_skipProps = require_skipProps_native(), import_sortString = require_sortString_native(), import_transformsToString = require_transformsToString_native(), consoleGroupCollapsed = import_constants2.isWeb ? console.groupCollapsed : console.info, conf, PROP_SPLIT = "-";
+    function isValidStyleKey(key, validStyles2, accept) {
+      return key in validStyles2 ? !0 : accept && key in accept;
     }
     var getSplitStyles = function(props, staticConfig, theme, themeName, componentState, styleProps, parentSplitStyles, context, elementType, debug) {
       var _loop = function(keyOg2) {
@@ -6129,7 +6102,7 @@ var require_getSplitStyles_native = __commonJS({
           if (keyInit === "group" && !1) var identifier2, containerType, containerCSS;
           return "continue";
         }
-        var valInitType = typeof valInit, isValidStyleKeyInit = isValidStyleKey(keyInit, validStyles, accept);
+        var valInitType = typeof valInit, isValidStyleKeyInit = isValidStyleKey(keyInit, validStyles2, accept);
         if (0) {
           if (staticConfig.isReactNative && keyInit.startsWith("data-")) var _viewProps2, _dataSet;
           if (isValidStyleKeyInit && valInitType === "string" && valInit[0] === "_") {
@@ -6147,7 +6120,7 @@ var require_getSplitStyles_native = __commonJS({
           return "continue";
         }
         if (0) var didUseKeyInit;
-        var isVariant = !isValidStyleKeyInit && variants && keyInit in variants, isStyleLikeKey = isValidStyleKeyInit || isVariant, isPseudo = keyInit in import_helpers.validPseudoKeys, isMedia = !isStyleLikeKey && !isPseudo && (0, import_useMedia.isMediaKey)(keyInit), isMediaOrPseudo1 = !!(isMedia || isPseudo);
+        var isVariant = !isValidStyleKeyInit && variants && keyInit in variants, isStyleLikeKey = isValidStyleKeyInit || isVariant, isPseudo = keyInit in import_helpers2.validPseudoKeys, isMedia = !isStyleLikeKey && !isPseudo && (0, import_useMedia.isMediaKey)(keyInit), isMediaOrPseudo1 = !!(isMedia || isPseudo);
         if (isMediaOrPseudo1 && keyInit.startsWith("$group-")) {
           var parts = keyInit.split("-");
           if (
@@ -6186,11 +6159,11 @@ var require_getSplitStyles_native = __commonJS({
               viewProps[key4] = val2;
               return;
             }
-            if (!isHOC && isValidStyleKey(key4, validStyles, accept) || import_constants2.isAndroid && key4 === "elevation") {
+            if (!isHOC && isValidStyleKey(key4, validStyles2, accept) || import_constants2.isAndroid && key4 === "elevation") {
               mergeStyle(styleState, key4, val2);
               return;
             }
-            if (isPseudo = key4 in import_helpers.validPseudoKeys, isMedia = !isPseudo && (0, import_useMedia.isMediaKey)(key4), isMediaOrPseudo1 = !!(isMedia || isPseudo), isVariant = variants && key4 in variants, inlineProps != null && inlineProps.has(key4) || process.env.IS_STATIC === "is_static" && inlineWhenUnflattened != null && inlineWhenUnflattened.has(key4)) {
+            if (isPseudo = key4 in import_helpers2.validPseudoKeys, isMedia = !isPseudo && (0, import_useMedia.isMediaKey)(key4), isMediaOrPseudo1 = !!(isMedia || isPseudo), isVariant = variants && key4 in variants, inlineProps != null && inlineProps.has(key4) || process.env.IS_STATIC === "is_static" && inlineWhenUnflattened != null && inlineWhenUnflattened.has(key4)) {
               var _props_key;
               viewProps[key4] = (_props_key = props[key4]) !== null && _props_key !== void 0 ? _props_key : val2;
             }
@@ -6225,8 +6198,8 @@ var require_getSplitStyles_native = __commonJS({
                 var _iteratorNormalCompletion2 = !0, _didIteratorError2 = !1, _iteratorError2 = void 0;
                 try {
                   for (var _iterator2 = pseudoStyles[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = !0) {
-                    var psuedoStyle = _step2.value, fullKey = `${psuedoStyle[import_helpers.StyleObjectProperty]}${PROP_SPLIT}${descriptor.name}`;
-                    fullKey in usedKeys || (addStyleToInsertRules(rulesToInsert, psuedoStyle), mergeClassName(transforms, classNames, fullKey, psuedoStyle[import_helpers.StyleObjectIdentifier], isMediaOrPseudo1, !0));
+                    var psuedoStyle = _step2.value, fullKey = `${psuedoStyle[import_helpers2.StyleObjectProperty]}${PROP_SPLIT}${descriptor.name}`;
+                    fullKey in usedKeys || (addStyleToInsertRules(rulesToInsert, psuedoStyle), mergeClassName(transforms, classNames, fullKey, psuedoStyle[import_helpers2.StyleObjectIdentifier], isMediaOrPseudo1, !0));
                   }
                 } catch (err) {
                   _didIteratorError2 = !0, _iteratorError2 = err;
@@ -6299,12 +6272,12 @@ var require_getSplitStyles_native = __commonJS({
                 var _iteratorNormalCompletion12 = !0, _didIteratorError12 = !1, _iteratorError12 = void 0;
                 try {
                   for (var _iterator12 = mediaStyles[Symbol.iterator](), _step12; !(_iteratorNormalCompletion12 = (_step12 = _iterator12.next()).done); _iteratorNormalCompletion12 = !0) {
-                    var style3 = _step12.value, property = style3[import_helpers.StyleObjectProperty], isSubStyle = property[0] === "$";
+                    var style3 = _step12.value, property = style3[import_helpers2.StyleObjectProperty], isSubStyle = property[0] === "$";
                     if (!(isSubStyle && !(0, import_isActivePlatform.isActivePlatform)(property))) {
                       var out = (0, import_createMediaStyle.createMediaStyle)(style3, mediaKeyShort, import_useMedia.mediaQueryConfig, isMedia, !1, priority);
                       process.env.NODE_ENV === "development" && debug === "verbose" && (0, import_log.log)("\u{1F4FA} media style:", out);
-                      var subKey = isSubStyle ? style3[2] : "", fullKey1 = `${style3[import_helpers.StyleObjectProperty]}${subKey}${PROP_SPLIT}${mediaKeyShort}${style3[import_helpers.StyleObjectPseudo] || ""}`;
-                      fullKey1 in usedKeys || (addStyleToInsertRules(rulesToInsert, out), mergeClassName(transforms, classNames, fullKey1, out[import_helpers.StyleObjectIdentifier], !0, !0));
+                      var subKey = isSubStyle ? style3[2] : "", fullKey1 = `${style3[import_helpers2.StyleObjectProperty]}${subKey}${PROP_SPLIT}${mediaKeyShort}${style3[import_helpers2.StyleObjectPseudo] || ""}`;
+                      fullKey1 in usedKeys || (addStyleToInsertRules(rulesToInsert, out), mergeClassName(transforms, classNames, fullKey1, out[import_helpers2.StyleObjectIdentifier], !0, !0));
                     }
                   }
                 } catch (err) {
@@ -6393,7 +6366,7 @@ var require_getSplitStyles_native = __commonJS({
         }
       };
       props.reddish && (debug = "verbose"), conf = conf || (0, import_config.getConfig)(), import_constants2.isWeb && styleProps.isAnimated && conf.animations.isReactNative && !styleProps.noNormalize && (styleProps.noNormalize = "values");
-      var { shorthands } = conf, { isHOC, isText, isInput, variants, isReactNative, inlineProps, inlineWhenUnflattened, parentStaticConfig, acceptsClassName } = staticConfig, viewProps = {}, mediaState2 = styleProps.mediaState || import_useMedia.mediaState, usedKeys = {}, shouldDoClasses = acceptsClassName && import_constants2.isWeb && !styleProps.noClass, rulesToInsert = void 0, classNames = {}, transforms = {}, pseudos = null, space = props.space, hasMedia = !1, dynamicThemeAccess, pseudoGroups, mediaGroups, className = props.className || "", mediaStylesSeen = 0, validStyles = staticConfig.validStyles || (staticConfig.isText || staticConfig.isInput ? import_helpers.stylePropsText : import_helpers.validStyles);
+      var { shorthands } = conf, { isHOC, isText, isInput, variants, isReactNative, inlineProps, inlineWhenUnflattened, parentStaticConfig, acceptsClassName } = staticConfig, viewProps = {}, mediaState2 = styleProps.mediaState || import_useMedia.mediaState, usedKeys = {}, shouldDoClasses = acceptsClassName && import_constants2.isWeb && !styleProps.noClass, rulesToInsert = void 0, classNames = {}, transforms = {}, pseudos = null, space = props.space, hasMedia = !1, dynamicThemeAccess, pseudoGroups, mediaGroups, className = props.className || "", mediaStylesSeen = 0, validStyles2 = staticConfig.validStyles || (staticConfig.isText || staticConfig.isInput ? import_helpers2.stylePropsText : import_helpers2.validStyles);
       process.env.NODE_ENV === "development" && debug === "profile" && time`split-styles-setup`;
       var styleState = {
         classNames,
@@ -6548,7 +6521,7 @@ var require_getSplitStyles_native = __commonJS({
       if (import_constants2.isWeb && (val == null ? void 0 : val[0]) === "_") {
         var _usedKeys, _key;
         classNames[key] = val, (_usedKeys = usedKeys)[_key = key] || (_usedKeys[_key] = 1);
-      } else if (key in import_helpers.stylePropsTransform) {
+      } else if (key in import_helpers2.stylePropsTransform) {
         var _styleState;
         (_styleState = styleState).flatTransforms || (_styleState.flatTransforms = {}), styleState.flatTransforms[key] = val;
       } else {
@@ -6570,7 +6543,7 @@ var require_getSplitStyles_native = __commonJS({
         var shouldSkip = !staticConfig.isHOC && key1 in import_skipProps.skipProps && !styleProps.noSkip;
         if (shouldSkip) return key = key1, "continue";
         (0, import_propMapper.propMapper)(key1, val, styleState, !1, function(skey, sval) {
-          skey in import_helpers.validPseudoKeys && (sval = getSubStyle(styleState, skey, sval, avoidMergeTransform)), !avoidMergeTransform && skey in import_helpers.stylePropsTransform ? mergeTransform(styleOut, skey, sval) : styleOut[skey] = styleProps.noNormalize ? sval : (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(sval, key1);
+          skey in import_helpers2.validPseudoKeys && (sval = getSubStyle(styleState, skey, sval, avoidMergeTransform)), !avoidMergeTransform && skey in import_helpers2.stylePropsTransform ? mergeTransform(styleOut, skey, sval) : styleOut[skey] = styleProps.noNormalize ? sval : (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(sval, key1);
         }), key = key1;
       }, { staticConfig, conf: conf2, styleProps } = styleState, styleOut = {};
       for (var key in styleIn) _loop(key);
@@ -6585,7 +6558,7 @@ var require_getSplitStyles_native = __commonJS({
       if (0) var identifier;
     }
     var defaultColor = process.env.TAMAGUI_DEFAULT_COLOR || "rgba(0,0,0,0)", animatableDefaults = {
-      ...Object.fromEntries(Object.entries(import_helpers.tokenCategories.color).map(function(param) {
+      ...Object.fromEntries(Object.entries(import_helpers2.tokenCategories.color).map(function(param) {
         var [k, v] = param;
         return [
           k,
@@ -6637,7 +6610,7 @@ var require_getSplitStyles_native = __commonJS({
       var out = {};
       for (var key in style) {
         var val = style[key];
-        key in import_helpers.stylePropsTransform ? mergeTransform(out, key, val) : out[key] = (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(val, key);
+        key in import_helpers2.stylePropsTransform ? mergeTransform(out, key, val) : out[key] = (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(val, key);
       }
       return import_constants2.isWeb && Array.isArray(out.transform) && (out.transform = (0, import_transformsToString.transformsToString)(out.transform)), (0, import_expandStyles.fixStyles)(out), out;
     }
@@ -7164,7 +7137,7 @@ var require_wrapStyleTags_native = __commonJS({
       }
     });
     module2.exports = __toCommonJS2(wrapStyleTags_exports);
-    var import_jsx_runtime = require("react/jsx-runtime"), import_helpers = require_index_native3();
+    var import_jsx_runtime = require("react/jsx-runtime"), import_helpers2 = require_index_native3();
     function wrapStyleTags(styles, content) {
       return process.env.TAMAGUI_REACT_19, content;
     }
@@ -7420,7 +7393,7 @@ var require_Slot_native = __commonJS({
       }
     });
     module2.exports = __toCommonJS2(Slot_exports);
-    var import_jsx_runtime = require("react/jsx-runtime"), import_compose_refs = require_index_native5(), import_constants2 = require_index_native2(), import_helpers = require_index_native3(), import_react3 = require("react"), is19 = import_react3.version.startsWith("19."), Slot = /* @__PURE__ */ (0, import_react3.memo)(/* @__PURE__ */ (0, import_react3.forwardRef)(function(props, forwardedRef) {
+    var import_jsx_runtime = require("react/jsx-runtime"), import_compose_refs = require_index_native5(), import_constants2 = require_index_native2(), import_helpers2 = require_index_native3(), import_react3 = require("react"), is19 = import_react3.version.startsWith("19."), Slot = /* @__PURE__ */ (0, import_react3.memo)(/* @__PURE__ */ (0, import_react3.forwardRef)(function(props, forwardedRef) {
       var { children, ...slotProps } = props;
       if (/* @__PURE__ */ (0, import_react3.isValidElement)(children)) {
         var mergedProps = mergeSlotProps(children, slotProps);
@@ -7451,7 +7424,7 @@ var require_Slot_native = __commonJS({
         var slotPropValue = slotProps[propName], childPropValue = childProps[propName];
         isHTMLChild && propName in pressMap && (propName = pressMap[propName], delete overrideProps[propName]);
         var isHandler = handleRegex.test(propName);
-        isHandler ? overrideProps[propName] = (0, import_helpers.composeEventHandlers)(childPropValue, slotPropValue) : propName === "style" ? overrideProps[propName] = {
+        isHandler ? overrideProps[propName] = (0, import_helpers2.composeEventHandlers)(childPropValue, slotPropValue) : propName === "style" ? overrideProps[propName] = {
           ...slotPropValue,
           ...childPropValue
         } : propName === "className" && (overrideProps[propName] = [
@@ -7535,7 +7508,7 @@ var require_createComponent_native = __commonJS({
       }
     });
     module2.exports = __toCommonJS2(createComponent_exports);
-    var import_jsx_runtime = require("react/jsx-runtime"), import_compose_refs = require_index_native5(), import_constants2 = require_index_native2(), import_helpers = require_index_native3(), import_react3 = __toESM2(require("react")), import_config = require_config_native(), import_constants22 = require_constants_native2(), import_isDevTools = require_isDevTools_native(), import_ComponentContext = require_ComponentContext_native(), import_createVariable = require_createVariable_native(), import_defaultComponentState = require_defaultComponentState_native(), import_getSplitStyles = require_getSplitStyles_native(), import_log = require_log_native(), import_mergeProps = require_mergeProps_native(), import_setElementProps = require_setElementProps_native(), import_subscribeToContextGroup = require_subscribeToContextGroup_native(), import_themeable = require_themeable_native(), import_wrapStyleTags = require_wrapStyleTags_native(), import_useComponentState = require_useComponentState_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(), time2, debugKeyListeners, startVisualizer, componentSetStates = /* @__PURE__ */ new Set();
+    var import_jsx_runtime = require("react/jsx-runtime"), import_compose_refs = require_index_native5(), import_constants2 = require_index_native2(), import_helpers2 = require_index_native3(), import_react3 = __toESM2(require("react")), import_config = require_config_native(), import_constants22 = require_constants_native2(), import_isDevTools = require_isDevTools_native(), import_ComponentContext = require_ComponentContext_native(), import_createVariable = require_createVariable_native(), import_defaultComponentState = require_defaultComponentState_native(), import_getSplitStyles = require_getSplitStyles_native(), import_log = require_log_native(), import_mergeProps = require_mergeProps_native(), import_setElementProps = require_setElementProps_native(), import_subscribeToContextGroup = require_subscribeToContextGroup_native(), import_themeable = require_themeable_native(), import_wrapStyleTags = require_wrapStyleTags_native(), import_useComponentState = require_useComponentState_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(), time2, debugKeyListeners, startVisualizer, componentSetStates = /* @__PURE__ */ new Set();
     typeof document < "u" && (cancelTouches = function() {
       componentSetStates.forEach(function(setState) {
         return setState(function(prev) {
@@ -7763,7 +7736,7 @@ var require_createComponent_native = __commonJS({
         }
         process.env.NODE_ENV === "development" && props.untilMeasured && !props.group && console.warn(`You set the untilMeasured prop without setting group. This doesn't work, be sure to set untilMeasured on the parent that sets group, not the children that use the $group- prop.
 
-If you meant to do this, you can disable this warning - either change untilMeasured and group at the same time, or do group={conditional ? 'name' : undefined}`), process.env.NODE_ENV === "development" && time2 && time2`destructure`, groupName && (nonTamaguiProps.onLayout = (0, import_helpers.composeEventHandlers)(nonTamaguiProps.onLayout, function(e) {
+If you meant to do this, you can disable this warning - either change untilMeasured and group at the same time, or do group={conditional ? 'name' : undefined}`), process.env.NODE_ENV === "development" && time2 && time2`destructure`, groupName && (nonTamaguiProps.onLayout = (0, import_helpers2.composeEventHandlers)(nonTamaguiProps.onLayout, function(e) {
           stateRef.current.group.emit(groupName, {
             layout: e.nativeEvent.layout
           }), !stateRef.current.hasMeasured && props.untilMeasured === "hide" && setState(function(prev) {
@@ -8072,7 +8045,7 @@ If you meant to do this, you can disable this warning - either change untilMeasu
       acceptsClassName: !0,
       memo: !0,
       componentName: "Spacer",
-      validStyles: import_helpers.validStyles,
+      validStyles: import_helpers2.validStyles,
       defaultProps: {
         ...import_constants22.stackDefaultStyles,
         // avoid nesting issues
@@ -8325,7 +8298,7 @@ var require_createVariables_native = __commonJS({
       }
     });
     module2.exports = __toCommonJS2(createVariables_exports);
-    var import_helpers = require_index_native3(), import_createVariable = require_createVariable_native(), cache2 = /* @__PURE__ */ new WeakMap(), createVariables = function(tokens) {
+    var import_helpers2 = require_index_native3(), import_createVariable = require_createVariable_native(), cache2 = /* @__PURE__ */ new WeakMap(), createVariables = function(tokens) {
       var parentPath = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : "", isFont = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : !1;
       if (cache2.has(tokens)) return tokens;
       var res = {}, i = 0;
@@ -8336,7 +8309,7 @@ var require_createVariables_native = __commonJS({
           res[key] = val;
           continue;
         }
-        var niceKey = (0, import_helpers.simpleHash)(key, 1e3), name = parentPath && parentPath !== "t-color" ? `${parentPath}-${niceKey}` : `c-${niceKey}`;
+        var niceKey = (0, import_helpers2.simpleHash)(key, 1e3), name = parentPath && parentPath !== "t-color" ? `${parentPath}-${niceKey}` : `c-${niceKey}`;
         if (val && typeof val == "object") {
           res[key] = createVariables(tokens[key], name, !1);
           continue;
@@ -8448,7 +8421,7 @@ var require_proxyThemeToParents_native = __commonJS({
       }
     });
     module2.exports = __toCommonJS2(proxyThemeToParents_exports);
-    var import_config = require_config_native(), themesRaw = {};
+    var themesRaw = {};
     function proxyThemesToParents(dedupedThemes) {
       var _iteratorNormalCompletion = !0, _didIteratorError = !1, _iteratorError = void 0;
       try {
@@ -8509,21 +8482,24 @@ var require_proxyThemeToParents_native = __commonJS({
       return themes;
     }
     function proxyThemeToParents(themeName, theme) {
-      var cur = [], parents = themeName.split("_").slice(0, -1).map(function(part) {
+      var out = {}, cur = [], parents = themeName.split("_").slice(0, -1).map(function(part) {
         return cur.push(part), cur.join("_");
-      }), numParents = parents.length;
-      return new Proxy(theme, {
-        get(target, key) {
-          if (!key || // dont ask me, idk why but on hermes you can see that useTheme()[undefined] passes in STRING undefined to proxy
-          // if someone is crazy enough to use "undefined" as a theme key then this not working is on them
-          key == "undefined" || Reflect.has(target, key)) return Reflect.get(target, key);
-          for (var i = numParents - 1; i >= 0; i--) {
-            var parent = themesRaw[parents[i]];
-            if (parent && Reflect.has(parent, key)) return Reflect.get(parent, key);
-          }
-          return (0, import_config.getTokenObject)(key);
+      }), _iteratorNormalCompletion = !0, _didIteratorError = !1, _iteratorError = void 0;
+      try {
+        for (var _iterator = parents[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0) {
+          var parent = _step.value;
+          Object.assign(out, themesRaw[parent]);
         }
-      });
+      } catch (err) {
+        _didIteratorError = !0, _iteratorError = err;
+      } finally {
+        try {
+          !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
+        } finally {
+          if (_didIteratorError) throw _iteratorError;
+        }
+      }
+      return Object.assign(out, theme), out;
     }
   }
 });
@@ -9885,10 +9861,10 @@ var require_Stack_native = __commonJS({
       }
     });
     module2.exports = __toCommonJS2(Stack_exports);
-    var import_helpers = require_index_native3(), import_constants2 = require_constants_native2(), import_createComponent = require_createComponent_native(), Stack2 = (0, import_createComponent.createComponent)({
+    var import_helpers2 = require_index_native3(), import_constants2 = require_constants_native2(), import_createComponent = require_createComponent_native(), Stack2 = (0, import_createComponent.createComponent)({
       acceptsClassName: !0,
       defaultProps: import_constants2.stackDefaultStyles,
-      validStyles: import_helpers.validStyles
+      validStyles: import_helpers2.validStyles
     });
     Stack2.displayName = "Stack";
   }
@@ -10063,10 +10039,10 @@ var require_View_native = __commonJS({
       }
     });
     module2.exports = __toCommonJS2(View_exports);
-    var import_helpers = require_index_native3(), import_constants2 = require_constants_native2(), import_createComponent = require_createComponent_native(), View2 = (0, import_createComponent.createComponent)({
+    var import_helpers2 = require_index_native3(), import_constants2 = require_constants_native2(), import_createComponent = require_createComponent_native(), View2 = (0, import_createComponent.createComponent)({
       acceptsClassName: !0,
       defaultProps: import_constants2.stackDefaultStyles,
-      validStyles: import_helpers.validStyles
+      validStyles: import_helpers2.validStyles
     });
   }
 });
@@ -10114,7 +10090,7 @@ var require_Text_native = __commonJS({
       }
     });
     module2.exports = __toCommonJS2(Text_exports);
-    var import_helpers = require_index_native3(), import_createComponent = require_createComponent_native(), ellipsisStyle = {
+    var import_helpers2 = require_index_native3(), import_createComponent = require_createComponent_native(), ellipsisStyle = {
       numberOfLines: 1,
       lineBreakMode: "clip"
     }, Text2 = (0, import_createComponent.createComponent)({
@@ -10139,8 +10115,8 @@ var require_Text_native = __commonJS({
         }
       },
       validStyles: {
-        ...import_helpers.validStyles,
-        ...import_helpers.stylePropsTextOnly
+        ...import_helpers2.validStyles,
+        ...import_helpers2.stylePropsTextOnly
       }
     });
     Text2.displayName = "Text";
@@ -12547,8 +12523,28 @@ var tm, measureElement = async function(target) {
 // src/vendor/Pressability.native.tsx
 var Pressability = require_fake_react_native().default, usePressability = (init_idFn(), __toCommonJS(idFn_exports)).default;
 
+// src/addNativeValidStyles.native.ts
+var import_helpers = __toESM(require_index_native3()), import_ReactNativeVersion = __toESM(require("react-native/Libraries/Core/ReactNativeVersion"));
+function addNativeValidStyles() {
+  if (import_ReactNativeVersion.default) {
+    var { version: { major, minor } } = import_ReactNativeVersion.default;
+    if (major === 0 && minor >= 77) {
+      var additional = {
+        boxSizing: !0,
+        mixBlendMode: !0,
+        outlineWidth: !0,
+        outlineStyle: !0,
+        outlineSpread: !0,
+        outlineColor: !0
+      };
+      Object.assign(import_helpers.validStyles, additional), Object.assign(import_helpers.stylePropsAll, additional);
+    }
+  }
+}
+
 // src/index.tsx
 __reExport(index_exports, __toESM(require_index_native8()), module.exports);
+addNativeValidStyles();
 var createTamagui = function(conf) {
   return conf.media && (conf.media = (0, import_react_native_media_driver.createMedia)(conf.media)), (0, import_web.createTamagui)(conf);
 }, baseViews = getBaseViews();