tamagui 1.82.0 → 1.82.2

package/dist/native.js

@@ -1429,36 +1429,6 @@ var require_insertStyleRule_native = __commonJS({
   }
 });
 
-// ../web/dist/cjs/helpers/createProxy.native.js
-var require_createProxy_native = __commonJS({
-  "../web/dist/cjs/helpers/createProxy.native.js"(exports, module2) {
-    "use strict";
-    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
-      for (var name in all)
-        __defProp2(target, name, { get: all[name], enumerable: !0 });
-    }, __copyProps2 = (to, from, except, desc) => {
-      if (from && typeof from == "object" || typeof from == "function")
-        for (let key of __getOwnPropNames2(from))
-          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
-      return to;
-    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), createProxy_exports = {};
-    __export2(createProxy_exports, {
-      createProxy: () => createProxy
-    });
-    module2.exports = __toCommonJS2(createProxy_exports);
-    function createProxy(target, handler) {
-      return process.env.NODE_ENV === "development" && (typeof target != "object" || !target) && console.warn(
-        "Invalid object given for proxy:",
-        target,
-        `
-  
-  This can be due to a missing theme or configuration given to Tamagui.`,
-        new Error().stack
-      ), new Proxy(target || {}, handler);
-    }
-  }
-});
-
 // ../web/dist/cjs/helpers/matchMedia.native.js
 var require_matchMedia_native = __commonJS({
   "../web/dist/cjs/helpers/matchMedia.native.js"(exports, module2) {
@@ -1547,117 +1517,6 @@ var require_pseudoDescriptors_native = __commonJS({
   }
 });
 
-// ../web/dist/cjs/helpers/objectIdentityKey.native.js
-var require_objectIdentityKey_native = __commonJS({
-  "../web/dist/cjs/helpers/objectIdentityKey.native.js"(exports, module2) {
-    "use strict";
-    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
-      for (var name in all)
-        __defProp2(target, name, { get: all[name], enumerable: !0 });
-    }, __copyProps2 = (to, from, except, desc) => {
-      if (from && typeof from == "object" || typeof from == "function")
-        for (let key of __getOwnPropNames2(from))
-          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
-      return to;
-    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), objectIdentityKey_exports = {};
-    __export2(objectIdentityKey_exports, {
-      objectIdentityKey: () => objectIdentityKey
-    });
-    module2.exports = __toCommonJS2(objectIdentityKey_exports);
-    function objectIdentityKey(obj) {
-      let k = "";
-      for (let key in obj) {
-        k += key;
-        let arg = obj[key], type = typeof arg;
-        if (!arg || type !== "object" && type !== "function")
-          k += type + arg;
-        else if (cache.has(arg))
-          k += cache.get(arg);
-        else {
-          let v = Math.random();
-          cache.set(arg, v), k += v;
-        }
-      }
-      return k;
-    }
-    var cache = /* @__PURE__ */ new WeakMap();
-  }
-});
-
-// ../web/dist/cjs/helpers/createStyledContext.native.js
-var require_createStyledContext_native = __commonJS({
-  "../web/dist/cjs/helpers/createStyledContext.native.js"(exports, module2) {
-    "use strict";
-    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
-      for (var name in all)
-        __defProp2(target, name, { get: all[name], enumerable: !0 });
-    }, __copyProps2 = (to, from, except, desc) => {
-      if (from && typeof from == "object" || typeof from == "function")
-        for (let key of __getOwnPropNames2(from))
-          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
-      return to;
-    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), createStyledContext_exports = {};
-    __export2(createStyledContext_exports, {
-      createStyledContext: () => createStyledContext2
-    });
-    module2.exports = __toCommonJS2(createStyledContext_exports);
-    var import_react2 = require("react"), import_objectIdentityKey = require_objectIdentityKey_native(), import_jsx_runtime6 = require("react/jsx-runtime");
-    function createStyledContext2(defaultValues) {
-      let OGContext = (0, import_react2.createContext)(defaultValues), OGProvider2 = OGContext.Provider, Context = OGContext, scopedContexts = /* @__PURE__ */ new Map(), Provider = ({
-        children,
-        scope,
-        ...values
-      }) => {
-        let next = (0, import_react2.useMemo)(() => ({
-          // this ! is a workaround for ts error
-          ...defaultValues,
-          ...values
-        }), [(0, import_objectIdentityKey.objectIdentityKey)(values)]), Provider2 = OGProvider2;
-        if (scope) {
-          let ScopedContext = scopedContexts.get(scope);
-          ScopedContext || (ScopedContext = (0, import_react2.createContext)(defaultValues), scopedContexts.set(scope, ScopedContext)), Provider2 = ScopedContext.Provider;
-        }
-        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Provider2, { value: next, children });
-      }, useStyledContext = (scope) => {
-        let context = scope ? scopedContexts.get(scope) : OGContext;
-        return (0, import_react2.useContext)(context);
-      };
-      return Context.Provider = Provider, Context.props = defaultValues, Context.context = OGContext, Context.useStyledContext = useStyledContext, Context;
-    }
-  }
-});
-
-// ../web/dist/cjs/contexts/ComponentContext.native.js
-var require_ComponentContext_native = __commonJS({
-  "../web/dist/cjs/contexts/ComponentContext.native.js"(exports, module2) {
-    "use strict";
-    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
-      for (var name in all)
-        __defProp2(target, name, { get: all[name], enumerable: !0 });
-    }, __copyProps2 = (to, from, except, desc) => {
-      if (from && typeof from == "object" || typeof from == "function")
-        for (let key of __getOwnPropNames2(from))
-          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
-      return to;
-    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), ComponentContext_exports = {};
-    __export2(ComponentContext_exports, {
-      ComponentContext: () => ComponentContext2
-    });
-    module2.exports = __toCommonJS2(ComponentContext_exports);
-    var import_createStyledContext = require_createStyledContext_native(), ComponentContext2 = (0, import_createStyledContext.createStyledContext)({
-      disableSSR: void 0,
-      inText: !1,
-      language: null,
-      animationDriver: null,
-      groups: {
-        emit: null,
-        subscribe: null,
-        state: {}
-      }
-    });
-  }
-});
-
 // ../web/dist/cjs/hooks/useDisableSSR.native.js
 var require_useDisableSSR_native = __commonJS({
   "../web/dist/cjs/hooks/useDisableSSR.native.js"(exports, module2) {
@@ -1672,17 +1531,12 @@ var require_useDisableSSR_native = __commonJS({
       return to;
     }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), useDisableSSR_exports = {};
     __export2(useDisableSSR_exports, {
-      getDisableSSR: () => getDisableSSR,
-      useDisableSSR: () => useDisableSSR
+      getDisableSSR: () => getDisableSSR
     });
     module2.exports = __toCommonJS2(useDisableSSR_exports);
-    var import_react2 = require("react"), import_config = require_config_native(), import_ComponentContext = require_ComponentContext_native();
-    function useDisableSSR() {
-      let componentContext = (0, import_react2.useContext)(import_ComponentContext.ComponentContext);
-      return getDisableSSR(componentContext);
-    }
+    var import_config = require_config_native();
     function getDisableSSR(componentContext) {
-      return componentContext.disableSSR ?? (0, import_config.getConfig)().disableSSR;
+      return (componentContext == null ? void 0 : componentContext.disableSSR) ?? (0, import_config.getConfig)().disableSSR;
     }
   }
 });
@@ -1718,9 +1572,9 @@ var require_useMedia_native = __commonJS({
       useMedia: () => useMedia3
     });
     module2.exports = __toCommonJS2(useMedia_exports);
-    var import_constants4 = require_index_native(), import_react2 = 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(), mediaState3 = (
+    var import_constants4 = require_index_native(), import_react2 = require("react"), import_config = require_config_native(), import_matchMedia = require_matchMedia_native(), import_pseudoDescriptors = require_pseudoDescriptors_native(), import_useDisableSSR = require_useDisableSSR_native(), mediaState3 = (
       // development only safeguard
-      process.env.NODE_ENV === "development" ? (0, import_createProxy.createProxy)(
+      process.env.NODE_ENV === "development" ? new Proxy(
         {},
         {
           get(target, key) {
@@ -1792,7 +1646,7 @@ var require_useMedia_native = __commonJS({
       return listeners.add(subscriber), () => listeners.delete(subscriber);
     }
     function useMedia3(uid, componentContext) {
-      let internal = (0, import_react2.useRef)(), initialState = ((componentContext ? (0, import_useDisableSSR.getDisableSSR)(componentContext) : (0, import_useDisableSSR.useDisableSSR)()) || !import_constants4.isWeb ? mediaState3 : initState) || {}, state = (0, import_react2.useSyncExternalStore)(
+      let internal = (0, import_react2.useRef)(), initialState = ((0, import_useDisableSSR.getDisableSSR)(componentContext) || !import_constants4.isWeb ? mediaState3 : initState) || {}, state = (0, import_react2.useSyncExternalStore)(
         subscribe,
         () => {
           if (!internal.current)
@@ -1990,6 +1844,117 @@ var require_constants_native2 = __commonJS({
   }
 });
 
+// ../web/dist/cjs/helpers/objectIdentityKey.native.js
+var require_objectIdentityKey_native = __commonJS({
+  "../web/dist/cjs/helpers/objectIdentityKey.native.js"(exports, module2) {
+    "use strict";
+    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
+      for (var name in all)
+        __defProp2(target, name, { get: all[name], enumerable: !0 });
+    }, __copyProps2 = (to, from, except, desc) => {
+      if (from && typeof from == "object" || typeof from == "function")
+        for (let key of __getOwnPropNames2(from))
+          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
+      return to;
+    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), objectIdentityKey_exports = {};
+    __export2(objectIdentityKey_exports, {
+      objectIdentityKey: () => objectIdentityKey
+    });
+    module2.exports = __toCommonJS2(objectIdentityKey_exports);
+    function objectIdentityKey(obj) {
+      let k = "";
+      for (let key in obj) {
+        k += key;
+        let arg = obj[key], type = typeof arg;
+        if (!arg || type !== "object" && type !== "function")
+          k += type + arg;
+        else if (cache.has(arg))
+          k += cache.get(arg);
+        else {
+          let v = Math.random();
+          cache.set(arg, v), k += v;
+        }
+      }
+      return k;
+    }
+    var cache = /* @__PURE__ */ new WeakMap();
+  }
+});
+
+// ../web/dist/cjs/helpers/createStyledContext.native.js
+var require_createStyledContext_native = __commonJS({
+  "../web/dist/cjs/helpers/createStyledContext.native.js"(exports, module2) {
+    "use strict";
+    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
+      for (var name in all)
+        __defProp2(target, name, { get: all[name], enumerable: !0 });
+    }, __copyProps2 = (to, from, except, desc) => {
+      if (from && typeof from == "object" || typeof from == "function")
+        for (let key of __getOwnPropNames2(from))
+          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
+      return to;
+    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), createStyledContext_exports = {};
+    __export2(createStyledContext_exports, {
+      createStyledContext: () => createStyledContext2
+    });
+    module2.exports = __toCommonJS2(createStyledContext_exports);
+    var import_react2 = require("react"), import_objectIdentityKey = require_objectIdentityKey_native(), import_jsx_runtime6 = require("react/jsx-runtime");
+    function createStyledContext2(defaultValues) {
+      let OGContext = (0, import_react2.createContext)(defaultValues), OGProvider2 = OGContext.Provider, Context = OGContext, scopedContexts = /* @__PURE__ */ new Map(), Provider = ({
+        children,
+        scope,
+        ...values
+      }) => {
+        let next = (0, import_react2.useMemo)(() => ({
+          // this ! is a workaround for ts error
+          ...defaultValues,
+          ...values
+        }), [(0, import_objectIdentityKey.objectIdentityKey)(values)]), Provider2 = OGProvider2;
+        if (scope) {
+          let ScopedContext = scopedContexts.get(scope);
+          ScopedContext || (ScopedContext = (0, import_react2.createContext)(defaultValues), scopedContexts.set(scope, ScopedContext)), Provider2 = ScopedContext.Provider;
+        }
+        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Provider2, { value: next, children });
+      }, useStyledContext = (scope) => {
+        let context = scope ? scopedContexts.get(scope) : OGContext;
+        return (0, import_react2.useContext)(context);
+      };
+      return Context.Provider = Provider, Context.props = defaultValues, Context.context = OGContext, Context.useStyledContext = useStyledContext, Context;
+    }
+  }
+});
+
+// ../web/dist/cjs/contexts/ComponentContext.native.js
+var require_ComponentContext_native = __commonJS({
+  "../web/dist/cjs/contexts/ComponentContext.native.js"(exports, module2) {
+    "use strict";
+    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
+      for (var name in all)
+        __defProp2(target, name, { get: all[name], enumerable: !0 });
+    }, __copyProps2 = (to, from, except, desc) => {
+      if (from && typeof from == "object" || typeof from == "function")
+        for (let key of __getOwnPropNames2(from))
+          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
+      return to;
+    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), ComponentContext_exports = {};
+    __export2(ComponentContext_exports, {
+      ComponentContext: () => ComponentContext2
+    });
+    module2.exports = __toCommonJS2(ComponentContext_exports);
+    var import_createStyledContext = require_createStyledContext_native(), ComponentContext2 = (0, import_createStyledContext.createStyledContext)({
+      disableSSR: void 0,
+      inText: !1,
+      language: null,
+      animationDriver: null,
+      groups: {
+        emit: null,
+        subscribe: null,
+        state: {}
+      }
+    });
+  }
+});
+
 // ../web/dist/cjs/defaultComponentState.native.js
 var require_defaultComponentState_native = __commonJS({
   "../web/dist/cjs/defaultComponentState.native.js"(exports, module2) {
@@ -2768,10 +2733,10 @@ var require_normalizeColor_native = __commonJS({
       rgba: () => import_normalize_css_color2.rgba
     });
     module2.exports = __toCommonJS2(normalizeColor_exports);
-    var import_constants4 = require_index_native(), import_normalize_css_color = require_index_native11(), import_normalize_css_color2 = require_index_native11(), normalizeColor = (color, opacity) => {
+    var import_normalize_css_color = require_index_native11(), import_normalize_css_color2 = require_index_native11(), normalizeColor = (color, opacity) => {
       if (!color)
         return;
-      if (color[0] === "$" || color[0] === "v" && color.startsWith("var(") || import_constants4.isWeb && opacity === 1)
+      if (color[0] === "$" || color.startsWith("var("))
         return color;
       let colorProcessed = (0, import_normalize_css_color.normalizeCSSColor)(color);
       if (colorProcessed != null) {
@@ -2897,7 +2862,7 @@ var require_expandStyles_native = __commonJS({
     function fixStyles(style) {
       "elevationAndroid" in style && (style.elevation = style.elevationAndroid, delete style.elevationAndroid), (style.shadowRadius || style.shadowColor || style.shadowOpacity || style.shadowOffset) && Object.assign(style, (0, import_normalizeShadow.normalizeShadow)(style));
       for (let key in borderDefaults)
-        key in style && !style[borderDefaults[key]] && (style[borderDefaults[key]] = "solid");
+        key in style && (style[borderDefaults[key]] ||= "solid");
     }
     var nativeStyle = import_constants4.isWeb ? null : "borderStyle", borderDefaults = {
       borderWidth: "borderStyle",
@@ -3072,7 +3037,7 @@ var require_getVariantExtras_native = __commonJS({
       getVariantExtras: () => getVariantExtras
     });
     module2.exports = __toCommonJS2(getVariantExtras_exports);
-    var import_createVariable = require_createVariable_native(), import_createProxy = require_createProxy_native();
+    var import_createVariable = require_createVariable_native();
     function getVariantExtras(styleState) {
       let { curProps, conf, context, theme } = styleState, fonts = conf.fontsParsed;
       context != null && context.language && (fonts = getFontsForLanguage(conf.fontsParsed, context.language));
@@ -3087,7 +3052,7 @@ var require_getVariantExtras_native = __commonJS({
         font: fonts[fontFamily] || fonts[styleState.conf.defaultFont],
         // TODO do this in splitstlye
         // we avoid passing in default props for media queries because that would confuse things like SizableText.size:
-        props: (0, import_createProxy.createProxy)(curProps, {
+        props: new Proxy(curProps, {
           // handles shorthands
           get(target, key) {
             let shorthand = conf.inverseShorthands[key];
@@ -3162,7 +3127,7 @@ var require_propMapper_native = __commonJS({
     module2.exports = __toCommonJS2(propMapper_exports);
     var import_constants4 = require_index_native(), import_helpers = require_index_native7(), import_config = require_config_native(), import_isDevTools = require_isDevTools_native(), import_createVariable = require_createVariable_native(), import_expandStyle = require_expandStyle_native(), import_expandStylesAndRemoveNullishValues = require_expandStylesAndRemoveNullishValues_native(), import_getVariantExtras = require_getVariantExtras_native(), import_isObj = require_isObj_native(), import_pseudoDescriptors = require_pseudoDescriptors_native(), propMapper = (key, value, styleStateIn, subPropsIn) => {
       var _a;
-      if (!import_constants4.isAndroid && key === "elevationAndroid")
+      if (lastFontFamilyToken = null, !import_constants4.isAndroid && key === "elevationAndroid")
         return;
       if (value === "unset") {
         let unsetVal = (_a = styleStateIn.conf.unset) == null ? void 0 : _a[key];
@@ -3191,7 +3156,7 @@ var require_propMapper_native = __commonJS({
         let result = (styleProps.noExpand ? null : (0, import_expandStyle.expandStyle)(key, value)) || [
           [key, value]
         ];
-        return key === "fontFamily" && fontFamilyCache.set(result, lastFontFamilyToken), result;
+        return key === "fontFamily" && lastFontFamilyToken && fontFamilyCache.set(result, lastFontFamilyToken), result;
       }
     }, resolveVariants = (key, value, styleProps, styleState, parentVariantKey) => {
       let { staticConfig, conf, debug } = styleState, { variants } = staticConfig;
@@ -3444,7 +3409,7 @@ var require_getSplitStyles_native = __commonJS({
       }), console.groupEnd());
       for (let keyOg in props) {
         let keyInit = keyOg, valInit = props[keyOg];
-        if (styleProps.disableExpandShorthands || keyInit in shorthands && (keyInit = shorthands[keyInit]), keyInit === "className" || keyInit in usedKeys || keyInit in skipProps && !isHOC)
+        if (styleProps.disableExpandShorthands || keyInit in shorthands && (keyInit = shorthands[keyInit]), keyInit === "className" || keyInit in usedKeys || keyInit in skipProps && !styleProps.noSkip && !isHOC)
           continue;
         let valInitType = typeof valInit, isValidStyleKeyInit = isValidStyleKey(keyInit, staticConfig);
         if (styleState.curProps[keyInit] = valInit, !import_constants4.isAndroid && keyInit === "elevationAndroid")
@@ -3935,9 +3900,8 @@ var require_proxyThemeVariables_native = __commonJS({
       proxyThemeVariables: () => proxyThemeVariables
     });
     module2.exports = __toCommonJS2(proxyThemeVariables_exports);
-    var import_createProxy = require_createProxy_native();
     function proxyThemeVariables(obj) {
-      return (0, import_createProxy.createProxy)(obj || {}, {
+      return new Proxy(obj || {}, {
         has(target, key) {
           return Reflect.has(target, removeStarting$(key));
         },
@@ -3992,7 +3956,7 @@ var require_ThemeManager_native = __commonJS({
     module2.exports = __toCommonJS2(ThemeManager_exports);
     var import_constants4 = require_index_native(), import_config = require_config_native(), import_constants22 = require_constants_native2(), emptyState = { name: "" };
     function getHasThemeUpdatingProps(props) {
-      return props.name || props.componentName || props.inverse || props.reset;
+      return !!(props.name || props.componentName || props.inverse || props.reset);
     }
     var uid = 0, ThemeManager = class {
       constructor(props = {}, parentManager) {
@@ -4062,7 +4026,7 @@ var require_ThemeManager_native = __commonJS({
       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), max2 = base.length, min2 = props.componentName && !nextName ? max2 : 0;
-      process.env.NODE_ENV !== "production" && typeof props.debug == "string" && typeof window < "u" && (console.groupCollapsed("ThemeManager.getState()"), console.info({ props, baseName, base, min: min2, max: max2 }));
+      process.env.NODE_ENV !== "production" && props.debug && typeof window < "u" && (console.groupCollapsed("ThemeManager.getState()"), console.info({ props, baseName, base, min: min2, max: max2 }));
       for (let i = max2; i >= min2; i--) {
         let prefix = base.slice(0, i).join(import_constants22.THEME_NAME_SEPARATOR);
         props.inverse && (prefix = inverseThemeName(prefix));
@@ -4072,16 +4036,18 @@ var require_ThemeManager_native = __commonJS({
           lastSegment > 0 && potentials.splice(lastSegment, 0, nextName);
         }
         if (componentName && !props.reset) {
-          let componentPotentials = [];
-          if (nextName) {
-            let beforeSeparator = prefix.slice(0, prefix.indexOf(import_constants22.THEME_NAME_SEPARATOR));
+          let baseLen = base.length, componentPotentials = [];
+          if (nextName && baseLen > 1) {
+            let beforeSeparator = base[0];
             componentPotentials.push(`${beforeSeparator}_${nextName}_${componentName}`);
           }
           if (componentPotentials.push(`${prefix}_${componentName}`), nextName) {
-            let prefixLessOne = base.slice(0, i - 1).join(import_constants22.THEME_NAME_SEPARATOR);
-            if (prefixLessOne) {
-              let lessSpecific = `${prefixLessOne}_${nextName}_${componentName}`;
-              componentPotentials.unshift(lessSpecific);
+            if (i > baseLen) {
+              let prefixLessOne = base.slice(0, i - 1).join(import_constants22.THEME_NAME_SEPARATOR);
+              if (prefixLessOne) {
+                let lessSpecific = `${prefixLessOne}_${nextName}_${componentName}`;
+                componentPotentials.unshift(lessSpecific);
+              }
             }
             let moreSpecific = `${prefix}_${nextName}_${componentName}`;
             componentPotentials.unshift(moreSpecific);
@@ -4090,6 +4056,7 @@ var require_ThemeManager_native = __commonJS({
         }
         let found = potentials.find((t) => t in themes);
         if (process.env.NODE_ENV !== "production" && typeof props.debug == "string" && console.info(" getState ", {
+          props,
           found,
           potentials,
           baseManager,
@@ -4121,28 +4088,6 @@ var require_ThemeManager_native = __commonJS({
   }
 });
 
-// ../web/dist/cjs/hooks/getThemeUnwrapped.native.js
-var require_getThemeUnwrapped_native = __commonJS({
-  "../web/dist/cjs/hooks/getThemeUnwrapped.native.js"(exports, module2) {
-    "use strict";
-    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
-      for (var name in all)
-        __defProp2(target, name, { get: all[name], enumerable: !0 });
-    }, __copyProps2 = (to, from, except, desc) => {
-      if (from && typeof from == "object" || typeof from == "function")
-        for (let key of __getOwnPropNames2(from))
-          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
-      return to;
-    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), getThemeUnwrapped_exports = {};
-    __export2(getThemeUnwrapped_exports, {
-      GetThemeUnwrapped: () => GetThemeUnwrapped,
-      getThemeUnwrapped: () => getThemeUnwrapped
-    });
-    module2.exports = __toCommonJS2(getThemeUnwrapped_exports);
-    var getThemeUnwrapped = (theme) => (theme == null ? void 0 : theme[GetThemeUnwrapped]) || theme, GetThemeUnwrapped = Symbol();
-  }
-});
-
 // ../web/dist/cjs/hooks/useTheme.native.js
 var require_useTheme_native = __commonJS({
   "../web/dist/cjs/hooks/useTheme.native.js"(exports, module2) {
@@ -4164,7 +4109,7 @@ var require_useTheme_native = __commonJS({
       useThemeWithState: () => useThemeWithState
     });
     module2.exports = __toCommonJS2(useTheme_exports);
-    var import_constants4 = require_index_native(), import_react2 = 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_constants4 = require_index_native(), import_react2 = require("react"), import_config = require_config_native(), import_createVariable = require_createVariable_native(), import_createShallowSetState = require_createShallowSetState_native(), import_ThemeManager = require_ThemeManager_native(), import_ThemeManagerContext = require_ThemeManagerContext_native(), emptyProps = { name: null }, cached;
     function getDefaultThemeProxied() {
       if (cached)
         return cached;
@@ -4205,7 +4150,7 @@ If this is intended and you are using Tamagui without any themes, you can disabl
       function track(key) {
         keys && !keys.includes(key) && (keys.push(key), process.env.NODE_ENV === "development" && debug && console.info(` \u{1F3A8} useTheme() tracking new key: ${key}`));
       }
-      return (0, import_createProxy.createProxy)(theme, {
+      return new Proxy(theme, {
         has(_, key) {
           if (Reflect.has(theme, key))
             return !0;
@@ -4213,8 +4158,6 @@ If this is intended and you are using Tamagui without any themes, you can disabl
             return key[0] === "$" && (key = key.slice(1)), themeManager == null ? void 0 : themeManager.allKeys.has(key);
         },
         get(_, key) {
-          if (key === import_getThemeUnwrapped.GetThemeUnwrapped)
-            return theme;
           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
@@ -4362,7 +4305,7 @@ If this is intended and you are using Tamagui without any themes, you can disabl
         }
         let isNewTheme2 = !!(themeManager2 !== parentManager || props.inverse), mounted2 = props.inverse ? isRoot || (prev == null ? void 0 : prev.mounted) : !0;
         state2 || (isNewTheme2 ? state2 = themeManager2.state : (state2 = parentManager.state, themeManager2 = parentManager));
-        let wasInversed = prev == null ? void 0 : prev.inversed, inversed2 = isNewTheme2 && state2.scheme !== (parentManager == null ? void 0 : parentManager.state.scheme) ? !0 : wasInversed ? !1 : null, response = {
+        let wasInversed = prev == null ? void 0 : prev.inversed, inversed2 = isNewTheme2 && state2.scheme !== (parentManager == null ? void 0 : parentManager.state.scheme) ? !0 : wasInversed != null ? !1 : null, response = {
           themeManager: themeManager2,
           isNewTheme: isNewTheme2,
           mounted: mounted2,
@@ -4441,40 +4384,40 @@ var require_Theme_native = __commonJS({
     )), __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), Theme_exports = {};
     __export2(Theme_exports, {
       Theme: () => Theme2,
-      useThemedChildren: () => useThemedChildren
+      getThemedChildren: () => getThemedChildren
     });
     module2.exports = __toCommonJS2(Theme_exports);
-    var import_constants4 = require_index_native(), import_react2 = __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_runtime6 = require("react/jsx-runtime"), Theme2 = (0, import_react2.forwardRef)(function(props, ref) {
+    var import_constants4 = require_index_native(), import_react2 = __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_runtime6 = require("react/jsx-runtime"), Theme2 = (0, import_react2.forwardRef)(function({ children, ...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_react2.useMemo)(() => {
-        let children2 = disableDirectChildTheme ? import_react2.Children.map(
-          props.children,
-          (child) => (0, import_react2.cloneElement)(child, { "data-disable-theme": !0 })
-        ) : props.children;
-        if (ref)
-          try {
-            import_react2.default.Children.only(children2), children2 = (0, import_react2.cloneElement)(children2, { ref });
-          } catch {
-          }
-        return process.env.NODE_ENV === "development" && props.debug === "visualize" && (children2 = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_ThemeDebug.ThemeDebug, { themeState, themeProps: props, children: children2 })), children2;
-      }, [props.children, disableDirectChildTheme]);
-      return useThemedChildren(themeState, children, props, isRoot);
+        return children;
+      let isRoot = !!props._isRoot, themeState = (0, import_useTheme.useChangeThemeEffect)(props, isRoot), finalChildren = props["disable-child-theme"] ? import_react2.Children.map(
+        children,
+        (child) => (0, import_react2.cloneElement)(child, { "data-disable-theme": !0 })
+      ) : children;
+      if (ref)
+        try {
+          import_react2.default.Children.only(finalChildren), finalChildren = (0, import_react2.cloneElement)(finalChildren, { ref });
+        } catch {
+        }
+      return process.env.NODE_ENV === "development" && props.debug === "visualize" && (finalChildren = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_ThemeDebug.ThemeDebug, { themeState, themeProps: props, children: finalChildren })), getThemedChildren(themeState, finalChildren, props, isRoot);
     });
     Theme2.displayName = "Theme";
     Theme2.avoidForwardRef = !0;
-    function useThemedChildren(themeState, children, props, isRoot = !1, avoidWrap = !1) {
-      let { themeManager, isNewTheme } = themeState, { shallow, forceClassName } = props, hasEverThemed = (0, import_react2.useRef)(!1);
-      if (isNewTheme && (hasEverThemed.current = !0), !(isNewTheme || props.inverse || hasEverThemed.current || forceClassName || isRoot))
+    function getThemedChildren(themeState, children, props, isRoot = !1) {
+      let { themeManager, isNewTheme } = themeState;
+      if (!themeManager)
+        throw "\u274C";
+      let { shallow, forceClassName } = props, hasEverThemed = (0, import_react2.useRef)(!1), shouldRenderChildrenWithTheme = isNewTheme || props.inverse || hasEverThemed.current || forceClassName || isRoot;
+      if (shouldRenderChildrenWithTheme && (hasEverThemed.current = !0), !shouldRenderChildrenWithTheme)
         return children;
       let next = children;
-      shallow && themeManager && (next = import_react2.Children.toArray(children).map((child) => (0, import_react2.isValidElement)(child) ? (0, import_react2.cloneElement)(
+      shallow && (next = import_react2.Children.toArray(children).map((child) => (0, import_react2.isValidElement)(child) ? (0, import_react2.cloneElement)(
         child,
         void 0,
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Theme2, { name: themeManager.state.parentName, children: child.props.children })
       ) : child));
-      let elementsWithContext = themeManager ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_ThemeManagerContext.ThemeManagerContext.Provider, { value: themeManager, children: next }) : next;
-      return forceClassName === !1 ? elementsWithContext : import_constants4.isWeb && !avoidWrap ? wrapThemeElements({
+      let elementsWithContext = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_ThemeManagerContext.ThemeManagerContext.Provider, { value: themeManager, children: next });
+      return forceClassName === !1 ? elementsWithContext : import_constants4.isWeb ? wrapThemeElements({
         children: elementsWithContext,
         themeState,
         forceClassName,
@@ -4490,18 +4433,18 @@ var require_Theme_native = __commonJS({
       var _a;
       if (isRoot && forceClassName === !1)
         return children;
-      let inverse = themeState.inversed, requiresExtraWrapper = inverse != null || forceClassName;
-      if (!themeState.isNewTheme && !requiresExtraWrapper)
-        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "_dsp_contents is_Theme", children });
-      let { className, style } = getThemeClassNameAndStyle(themeState, isRoot), themedChildren = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: `${className} _dsp_contents is_Theme`, style, children });
+      let inverse = themeState.inversed, requiresExtraWrapper = inverse != null || forceClassName, { className, style } = getThemeClassNameAndStyle(themeState, isRoot), themedChildren = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: `${className} _dsp_contents is_Theme`, style, children });
       if (requiresExtraWrapper) {
         let name = ((_a = themeState.state) == null ? void 0 : _a.name) || "", inverseClassName = name.startsWith("light") ? "t_light is_inversed" : name.startsWith("dark") ? "t_dark is_inversed" : "";
         themedChildren = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: `${inverse ? inverseClassName : ""} _dsp_contents`, children: themedChildren });
       }
       return themedChildren;
     }
+    var emptyObj = {};
     function getThemeClassNameAndStyle(themeState, isRoot = !1) {
       var _a, _b;
+      if (!themeState.isNewTheme)
+        return { className: "", style: emptyObj };
       let themeColor = (_a = themeState.state) != null && _a.theme && themeState.isNewTheme ? (0, import_createVariable.variableToString)(themeState.state.theme.color) : "", style = themeColor ? {
         color: themeColor
       } : void 0, className = ((_b = themeState.state) == null ? void 0 : _b.className) || "";
@@ -4527,7 +4470,10 @@ var require_themeable_native = __commonJS({
       themeable: () => themeable3
     });
     module2.exports = __toCommonJS2(themeable_exports);
-    var import_react2 = require("react"), import_Theme = require_Theme_native(), import_jsx_runtime6 = require("react/jsx-runtime");
+    var import_react2 = require("react"), import_Theme = require_Theme_native(), import_jsx_runtime6 = (
+      // @ts-expect-error its ok
+      require("react/jsx-runtime")
+    );
     function themeable3(Component, staticConfig) {
       let withTheme = (0, import_react2.forwardRef)(function(props, ref) {
         let { themeInverse, theme, componentName, themeReset, ...rest } = props, element = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Component, { ref, ...rest, "data-disable-theme": !0 });
@@ -4805,7 +4751,7 @@ var require_createComponent_native = __commonJS({
             isEntering && enterVariant ? (process.env.NODE_ENV === "development" && debugProp === "verbose" && console.warn(`Animating presence ENTER "${enterVariant}"`), props[enterVariant] = !0) : isExiting2 && exitVariant && (process.env.NODE_ENV === "development" && debugProp === "verbose" && console.warn(`Animating presence EXIT "${enterVariant}"`), props[exitVariant] = !enterExitVariant);
           }
         }
-        let isAnimatedReactNative = hasAnimationProp && (animationsConfig == null ? void 0 : animationsConfig.isReactNative), isReactNative = !!(staticConfig.isReactNative || isAnimatedReactNative), shouldAvoidClasses = !!(!import_constants4.isWeb || isAnimated || !staticConfig.acceptsClassName || propsIn.disableClassName), shouldForcePseudo = !!propsIn.forceStyle, noClassNames = shouldAvoidClasses || shouldForcePseudo, disableThemeProp = !1, disableTheme = disableThemeProp && !willBeAnimated || isHOC;
+        let isAnimatedReactNative = hasAnimationProp && (animationsConfig == null ? void 0 : animationsConfig.isReactNative), isReactNative = !!(staticConfig.isReactNative || isAnimatedReactNative), shouldAvoidClasses = !!(!import_constants4.isWeb || isAnimated || !staticConfig.acceptsClassName || propsIn.disableClassName), shouldForcePseudo = !!propsIn.forceStyle, noClassNames = shouldAvoidClasses || shouldForcePseudo, disableTheme = isHOC;
         process.env.NODE_ENV === "development" && time && time`theme-props`, props.themeShallow && (stateRef.current.themeShallow = !0);
         let themeStateProps = {
           name: props.theme,
@@ -5098,7 +5044,7 @@ If you meant to do this, you can disable this warning - either change untilMeasu
               subscribe: groupState.subscribe
             };
         }, [groupName]);
-        if (groupName && subGroupContext && (content = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_ComponentContext.ComponentContext.Provider, { ...componentContext, groups: subGroupContext, children: content })), process.env.NODE_ENV === "development" && time && time`group-context`, content = disableThemeProp ? content : (0, import_Theme.useThemedChildren)(themeState, content, themeStateProps, !1), process.env.NODE_ENV === "development" && time && time`themed-children`, process.env.NODE_ENV === "development" && props.debug === "visualize" && (content = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_ThemeDebug.ThemeDebug, { themeState, themeProps: props, children: content })), staticConfig.context) {
+        if (groupName && subGroupContext && (content = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_ComponentContext.ComponentContext.Provider, { ...componentContext, groups: subGroupContext, children: content })), process.env.NODE_ENV === "development" && time && time`group-context`, content = disableTheme ? content : (0, import_Theme.getThemedChildren)(themeState, content, themeStateProps, !1), process.env.NODE_ENV === "development" && time && time`themed-children`, process.env.NODE_ENV === "development" && props.debug === "visualize" && (content = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_ThemeDebug.ThemeDebug, { themeState, themeProps: props, children: content })), staticConfig.context) {
           let contextProps = staticConfig.context.props;
           for (let key in contextProps)
             (key in style || key in viewProps) && (overriddenContextProps ||= {}, overriddenContextProps[key] = style[key] ?? viewProps[key]);
@@ -5438,11 +5384,10 @@ var require_proxyThemeToParents_native = __commonJS({
     }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), proxyThemeToParents_exports = {};
     __export2(proxyThemeToParents_exports, {
       proxyThemeToParents: () => proxyThemeToParents,
-      proxyThemesToParents: () => proxyThemesToParents,
-      themesRaw: () => themesRaw
+      proxyThemesToParents: () => proxyThemesToParents
     });
     module2.exports = __toCommonJS2(proxyThemeToParents_exports);
-    var import_config = require_config_native(), import_getThemeUnwrapped = require_getThemeUnwrapped_native(), themesRaw = {};
+    var import_config = require_config_native(), themesRaw = {};
     function proxyThemesToParents(dedupedThemes) {
       for (let { names, theme } of dedupedThemes)
         for (let name of names)
@@ -5459,9 +5404,7 @@ var require_proxyThemeToParents_native = __commonJS({
       let cur = [], parents = themeName.split("_").slice(0, -1).map((part) => (cur.push(part), cur.join("_"))), numParents = parents.length;
       return new Proxy(theme, {
         get(target, key) {
-          if (key === import_getThemeUnwrapped.GetThemeUnwrapped)
-            return theme;
-          if (key == null || // dont ask me, idk why but on hermes you can see that useTheme()[undefined] passes in STRING undefined to proxy
+          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);
@@ -5470,7 +5413,7 @@ var require_proxyThemeToParents_native = __commonJS({
             if (parent && Reflect.has(parent, key))
               return Reflect.get(parent, key);
           }
-          return (0, import_config.getTokenObject)(key) ?? Reflect.get(target, key);
+          return (0, import_config.getTokenObject)(key);
         }
       });
     }
@@ -5521,14 +5464,14 @@ var require_themes_native = __commonJS({
     module2.exports = __toCommonJS2(themes_exports);
     var import_createVariable = require_createVariable_native();
     function ensureThemeVariable(theme, key) {
-      let val = theme[key], themeKey = key;
-      (0, import_createVariable.isVariable)(val) ? val.name !== themeKey && (theme[key] = (0, import_createVariable.createVariable)({
+      let val = theme[key];
+      (0, import_createVariable.isVariable)(val) ? val.name !== key && (theme[key] = (0, import_createVariable.createVariable)({
         key: val.name,
-        name: themeKey,
+        name: key,
         val: val.val
       })) : theme[key] = (0, import_createVariable.createVariable)({
-        key: themeKey,
-        name: themeKey,
+        key,
+        name: key,
         val
       });
     }
@@ -5878,31 +5821,18 @@ var require_mergeVariants_native = __commonJS({
       mergeVariants: () => mergeVariants
     });
     module2.exports = __toCommonJS2(mergeVariants_exports);
-    var mergeVariants = (parentVariants, ourVariants) => {
+    var mergeVariants = (parentVariants, ourVariants, level = 0) => {
       let variants = {};
       for (let key in ourVariants) {
         let parentVariant = parentVariants == null ? void 0 : parentVariants[key], ourVariant = ourVariants[key];
-        if (!parentVariant || typeof ourVariant == "function") {
-          variants[key] = ourVariant;
-          continue;
-        }
-        if (parentVariant && !ourVariant) {
-          variants[key] = parentVariant[key];
-          continue;
-        }
-        variants[key] = {};
-        for (let subKey in ourVariant) {
-          let val = ourVariant[subKey], parentVal = parentVariant == null ? void 0 : parentVariant[subKey];
-          typeof val == "function" || !parentVal || typeof parentVal == "function" ? variants[key][subKey] = val : variants[key][subKey] = {
-            // keep order
-            ...parentVal,
-            ...val
-          };
-        }
-        parentVariant && (variants[key] = {
+        !parentVariant || typeof ourVariant == "function" ? variants[key] = ourVariant : parentVariant && !ourVariant ? variants[key] = parentVariant[key] : level === 0 ? variants[key] = mergeVariants(
+          parentVariant,
+          ourVariant,
+          level + 1
+        ) : variants[key] = {
           ...parentVariant,
-          ...variants[key]
-        });
+          ...ourVariant
+        };
       }
       return {
         ...parentVariants,
@@ -7985,26 +7915,27 @@ var require_index_native15 = __commonJS({
         return viewProps;
       },
       useEvents(viewProps, events, { pseudos }, setStateShallow, staticConfig) {
-        if (events)
-          if (events.onFocus && (viewProps.onFocus = events.onFocus), events.onBlur && (viewProps.onBlur = events.onBlur), staticConfig.isInput) {
+        if (events && (events.onFocus && (viewProps.onFocus = events.onFocus), events.onBlur && (viewProps.onBlur = events.onBlur)), staticConfig.isInput) {
+          if (events) {
             let { onPressIn, onPressOut, onPress } = events, inputEvents = {
               onPressIn,
               onPressOut: onPressOut || onPress
             };
             onPressOut && onPress && (inputEvents.onPressOut = (0, import_web.composeEventHandlers)(onPress, onPressOut)), Object.assign(viewProps, inputEvents);
-          } else {
-            viewProps.hitSlop && (events.hitSlop = viewProps.hitSlop);
-            let pressability = (0, import_Pressability.usePressability)(events);
-            if (process.env.NODE_ENV === "development" && viewProps.debug && console.info(
-              `Checking for press ${!!events.onPress} then applying pressability props: ${Object.keys(
-                pressability || {}
-              )}`
-            ), events.onPress)
-              for (let key in pressability) {
-                let og = viewProps[key], val = pressability[key];
-                viewProps[key] = og && !dontComposePressabilityKeys[key] ? (0, import_web.composeEventHandlers)(og, val) : val;
-              }
           }
+        } else {
+          events && viewProps.hitSlop && (events.hitSlop = viewProps.hitSlop);
+          let pressability = (0, import_Pressability.usePressability)(events);
+          if (events && (process.env.NODE_ENV === "development" && viewProps.debug && console.info(
+            `Checking for press ${!!events.onPress} then applying pressability props: ${Object.keys(
+              pressability || {}
+            )}`
+          ), events.onPress))
+            for (let key in pressability) {
+              let og = viewProps[key], val = pressability[key];
+              viewProps[key] = og && !dontComposePressabilityKeys[key] ? (0, import_web.composeEventHandlers)(og, val) : val;
+            }
+        }
       },
       useChildren(elementType, children, viewProps, events, staticConfig) {
         if (process.env.NODE_ENV !== "test") {
@@ -11995,7 +11926,7 @@ var require_getFontSize_native = __commonJS({
     }, getFontSizeToken = (inSize, opts) => {
       if (typeof inSize == "number")
         return null;
-      let relativeSize = (opts == null ? void 0 : opts.relativeSize) || 0, fontSize = (0, import_core13.getConfig)().fontsParsed[(opts == null ? void 0 : opts.font) || "$body"].size, size2 = inSize || ("$true" in fontSize ? "$true" : "$4"), sizeTokens = Object.keys(fontSize), foundIndex = sizeTokens.indexOf(size2);
+      let relativeSize = (opts == null ? void 0 : opts.relativeSize) || 0, fontSize = (0, import_core13.getConfig)().fontsParsed[(opts == null ? void 0 : opts.font) || "$body"].size, size2 = (inSize === "$true" ? "$4" : inSize) || ("$true" in fontSize ? "$true" : "$4"), sizeTokens = Object.keys(fontSize), foundIndex = sizeTokens.indexOf(size2);
       foundIndex === -1 && size2.endsWith(".5") && (foundIndex = sizeTokens.indexOf(size2.replace(".5", ""))), process.env.NODE_ENV === "development" && foundIndex === -1 && console.warn("No font size found", size2, opts, "in size tokens", sizeTokens);
       let tokenIndex = Math.min(
         Math.max(0, foundIndex + relativeSize),
@@ -12271,7 +12202,9 @@ var require_Button_native = __commonJS({
         ellipse,
         maxFontSizeMultiplier,
         ...restProps
-      } = propsActive, size2 = propsActive.size || (propsActive.unstyled ? void 0 : "$true"), color = propsActive.color, iconSize = (typeof size2 == "number" ? size2 * 0.5 : (0, import_font_size.getFontSize)(size2)) * scaleIcon, getThemedIcon = (0, import_helpers_tamagui.useGetThemedIcon)({
+      } = propsActive, size2 = propsActive.size || (propsActive.unstyled ? void 0 : "$true"), color = propsActive.color, iconSize = (typeof size2 == "number" ? size2 * 0.5 : (0, import_font_size.getFontSize)(size2, {
+        font: (fontFamily == null ? void 0 : fontFamily[0]) === "$" ? fontFamily : void 0
+      })) * scaleIcon, getThemedIcon = (0, import_helpers_tamagui.useGetThemedIcon)({
         size: iconSize,
         color
       }), [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon), spaceSize = space ?? (0, import_web.getVariableValue)(iconSize) * scaleSpace, contents = noTextWrap ? [propsIn.children] : (0, import_text2.wrapChildrenInText)(
@@ -13698,7 +13631,7 @@ var require_Group_native = __commonJS({
             borderRadius,
             forceUseItem,
             ...restProps
-          } = (0, import_core13.getExpandedShorthands)(activeProps), vertical = orientation === "vertical", [itemChildrenCount, setItemChildrenCount] = (0, import_use_controllable_state.useControllableState)({
+          } = activeProps, vertical = orientation === "vertical", [itemChildrenCount, setItemChildrenCount] = (0, import_use_controllable_state.useControllableState)({
             defaultProp: forceUseItem ? 1 : 0
           }), isUsingItems = itemChildrenCount > 0, radius = borderRadius ?? (size2 ? (0, import_core13.getVariableValue)((0, import_core13.getTokens)().radius[size2]) - 1 : void 0), disablePassBorderRadius = disablePassBorderRadiusProp ?? radius === void 0, childrenArray = import_react2.Children.toArray(childrenProp), children = isUsingItems ? import_react2.Children.toArray(childrenProp).filter(import_react2.isValidElement) : childrenArray.map((child, i) => {
             if (!(0, import_react2.isValidElement)(child))
@@ -15599,7 +15532,7 @@ var require_Popover_native = __commonJS({
           context,
           children: props.children
         }
-      )), /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_portal2.Portal, { zIndex, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_core13.Theme, { name: themeName, children: [
+      )), /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_portal2.Portal, { zIndex, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_core13.Theme, { forceClassName: !0, name: themeName, children: [
         !!context.open && !context.breakpointActive && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           import_stacks3.YStack,
           {
@@ -16947,10 +16880,12 @@ var require_Select_native = __commonJS({
         {
           ...!props.unstyled && {
             size: itemParentContext.size,
-            ellipse: !0
+            ellipse: !0,
+            // we don't want events from the portalled `SelectValue` children to bubble
+            // through the item they came from
+            pointerEvents: "none"
           },
           ref: composedRefs,
-          pointerEvents: "none",
           ...props,
           children: unwrapSelectItem(selectValueChildren)
         }
@@ -18082,107 +18017,112 @@ var require_createSwitch_native = __commonJS({
             ref: forwardedRef
           }
         );
-      }), SwitchComponent = Frame.styleable(function(propsIn, forwardedRef) {
-        let styledContext = React2.useContext(import_SwitchContext.SwitchContext), props = (0, import_core13.useProps)(propsIn, {
-          noNormalize: !0,
-          noExpand: !0,
-          resolveValues: "none",
-          forComponent: Frame
-        }), {
-          labeledBy: ariaLabelledby,
-          name,
-          checked: checkedProp,
-          defaultChecked,
-          required,
-          disabled,
-          value = "on",
-          onCheckedChange,
-          size: size2 = styledContext.size ?? "$true",
-          unstyled = styledContext.unstyled ?? !1,
-          native: nativeProp,
-          nativeProps,
-          children,
-          ...switchProps
-        } = props, native = Array.isArray(nativeProp) ? nativeProp : [nativeProp], shouldRenderMobileNative = !import_constants4.isWeb && nativeProp === !0 || !import_constants4.isWeb && native.includes("mobile") || native.includes("android") && import_react_native4.Platform.OS === "android" || native.includes("ios") && import_react_native4.Platform.OS === "ios", [button, setButton] = React2.useState(null), composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, setButton), labelId = (0, import_label.useLabelContext)(button), labelledBy = ariaLabelledby || labelId, hasConsumerStoppedPropagationRef = React2.useRef(!1), isFormControl = import_constants4.isWeb ? button ? !!button.closest("form") : !0 : !1, [frameWidth, setFrameWidth] = React2.useState(0), [checked = !1, setChecked] = (0, import_use_controllable_state.useControllableState)({
-          prop: checkedProp,
-          defaultProp: defaultChecked || !1,
-          onChange: onCheckedChange,
-          transition: !0
-        });
-        if (shouldRenderMobileNative)
-          return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-            import_react_native4.Switch,
-            {
-              value: checkedProp,
-              onValueChange: onCheckedChange,
-              ...nativeProps
-            }
-          );
-        import_constants4.isWeb || React2.useEffect(() => {
-          if (props.id)
-            return (0, import_focusable2.registerFocusable)(props.id, {
-              focus: () => {
-                setChecked((x) => !x);
+      }), SwitchComponent = Frame.styleable(
+        function(propsIn, forwardedRef) {
+          let styledContext = React2.useContext(import_SwitchContext.SwitchContext), props = (0, import_core13.useProps)(propsIn, {
+            noNormalize: !0,
+            noExpand: !0,
+            resolveValues: "none",
+            forComponent: Frame
+          }), {
+            labeledBy: ariaLabelledby,
+            name,
+            checked: checkedProp,
+            defaultChecked,
+            required,
+            disabled,
+            value = "on",
+            onCheckedChange,
+            size: size2 = styledContext.size ?? "$true",
+            unstyled = styledContext.unstyled ?? !1,
+            native: nativeProp,
+            nativeProps,
+            children,
+            ...switchProps
+          } = props, native = Array.isArray(nativeProp) ? nativeProp : [nativeProp], shouldRenderMobileNative = !import_constants4.isWeb && nativeProp === !0 || !import_constants4.isWeb && native.includes("mobile") || native.includes("android") && import_react_native4.Platform.OS === "android" || native.includes("ios") && import_react_native4.Platform.OS === "ios", [button, setButton] = React2.useState(null), composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, setButton), labelId = (0, import_label.useLabelContext)(button), labelledBy = ariaLabelledby || labelId, hasConsumerStoppedPropagationRef = React2.useRef(!1), isFormControl = import_constants4.isWeb ? button ? !!button.closest("form") : !0 : !1, [frameWidth, setFrameWidth] = React2.useState(0), [checked = !1, setChecked] = (0, import_use_controllable_state.useControllableState)({
+            prop: checkedProp,
+            defaultProp: defaultChecked || !1,
+            onChange: onCheckedChange,
+            transition: !0
+          });
+          if (shouldRenderMobileNative)
+            return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              import_react_native4.Switch,
+              {
+                value: checkedProp,
+                onValueChange: onCheckedChange,
+                ...nativeProps
               }
-            });
-        }, [props.id, setChecked]);
-        let isInsideButton = React2.useContext(import_stacks3.ButtonNestingContext);
-        return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_stacks3.ButtonNestingContext.Provider, { value: !0, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-            Frame,
-            {
-              tag: isInsideButton ? "span" : "button",
-              unstyled,
-              size: size2,
-              checked,
-              disabled,
-              frameWidth,
-              themeShallow: !0,
-              ...!disableActiveTheme && {
-                theme: checked ? "active" : null,
-                themeShallow: !0
-              },
-              role: "switch",
-              "aria-checked": checked,
-              "aria-labelledby": labelledBy,
-              "aria-required": required,
-              "data-state": getState(checked),
-              "data-disabled": disabled ? "" : void 0,
-              tabIndex: disabled ? void 0 : 0,
-              value,
-              ...switchProps,
-              ref: composedRefs,
-              onPress: (0, import_helpers.composeEventHandlers)(props.onPress, (event) => {
-                setChecked((prevChecked) => !prevChecked), import_constants4.isWeb && isFormControl && (hasConsumerStoppedPropagationRef.current = event.isPropagationStopped(), hasConsumerStoppedPropagationRef.current || event.stopPropagation());
-              }),
-              children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-                import_stacks3.YStack,
-                {
-                  alignSelf: "stretch",
-                  flex: 1,
-                  onLayout: (e) => {
-                    setFrameWidth(e.nativeEvent.layout.width);
-                  },
-                  children: typeof children == "function" ? children(checked) : children
+            );
+          import_constants4.isWeb || React2.useEffect(() => {
+            if (props.id)
+              return (0, import_focusable2.registerFocusable)(props.id, {
+                focus: () => {
+                  setChecked((x) => !x);
                 }
-              )
-            }
-          ) }),
-          import_constants4.isWeb && isFormControl && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-            BubbleInput,
-            {
-              control: button,
-              bubbles: !hasConsumerStoppedPropagationRef.current,
-              name,
-              value,
-              checked,
-              required,
-              disabled,
-              style: { transform: "translateX(-100%)" }
-            }
-          )
-        ] });
-      }), BubbleInput = (props) => {
+              });
+          }, [props.id, setChecked]);
+          let isInsideButton = React2.useContext(import_stacks3.ButtonNestingContext);
+          return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_stacks3.ButtonNestingContext.Provider, { value: !0, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              Frame,
+              {
+                tag: isInsideButton ? "span" : "button",
+                unstyled,
+                size: size2,
+                checked,
+                disabled,
+                frameWidth,
+                themeShallow: !0,
+                ...!disableActiveTheme && {
+                  theme: checked ? "active" : null,
+                  themeShallow: !0
+                },
+                role: "switch",
+                "aria-checked": checked,
+                "aria-labelledby": labelledBy,
+                "aria-required": required,
+                "data-state": getState(checked),
+                "data-disabled": disabled ? "" : void 0,
+                tabIndex: disabled ? void 0 : 0,
+                value,
+                ...switchProps,
+                ref: composedRefs,
+                onPress: (0, import_helpers.composeEventHandlers)(props.onPress, (event) => {
+                  setChecked((prevChecked) => !prevChecked), import_constants4.isWeb && isFormControl && (hasConsumerStoppedPropagationRef.current = event.isPropagationStopped(), hasConsumerStoppedPropagationRef.current || event.stopPropagation());
+                }),
+                children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                  import_stacks3.YStack,
+                  {
+                    alignSelf: "stretch",
+                    flex: 1,
+                    onLayout: (e) => {
+                      setFrameWidth(e.nativeEvent.layout.width);
+                    },
+                    children: typeof children == "function" ? children(checked) : children
+                  }
+                )
+              }
+            ) }),
+            import_constants4.isWeb && isFormControl && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              BubbleInput,
+              {
+                control: button,
+                bubbles: !hasConsumerStoppedPropagationRef.current,
+                name,
+                value,
+                checked,
+                required,
+                disabled,
+                style: { transform: "translateX(-100%)" }
+              }
+            )
+          ] });
+        },
+        {
+          disableTheme: !0
+        }
+      ), BubbleInput = (props) => {
         let { control, checked, bubbles = !0, ...inputProps } = props, ref = React2.useRef(null), prevChecked = (0, import_use_previous.usePrevious)(checked);
         return React2.useEffect(() => {
           let input = ref.current, inputProto = window.HTMLInputElement.prototype, setChecked = Object.getOwnPropertyDescriptor(