tamagui 1.85.6 → 1.85.8

package/dist/native.js

@@ -1347,7 +1347,7 @@ var require_insertStyleRule_native = __commonJS({
         if (sepI === -1)
           continue;
         let key = rule.slice(rule.indexOf("--") + 2, sepI), val = rule.slice(sepI + 2), value;
-        if (val[3] === "(") {
+        if (val.startsWith("var(")) {
           let varName = val.slice(6, -1), tokenVal = colorVarToVal[varName];
           tokenVal ? value = tokenVal : (rootComputedStyle ||= getComputedStyle(document.body), value = rootComputedStyle.getPropertyValue("--" + varName));
         } else
@@ -1361,20 +1361,17 @@ var require_insertStyleRule_native = __commonJS({
           !0
         );
       }
-      return {
-        names: [
-          ...new Set(
-            selectors.map((selector) => {
-              let parts = selector.replace(/(.t_|:root)/g, "").trim().split(" "), [first] = parts, scheme = first.includes("dark") ? "dark" : first.includes("light") ? "light" : "", name = (() => {
-                let _ = parts[parts.length - 1];
-                return scheme && _.startsWith(scheme) && (_ = _.slice(scheme.length + 1)), _;
-              })();
-              return `${scheme}${scheme && name ? "_" : ""}${name}`;
-            })
-          )
-        ],
+      let dedupedEntry = {
+        names: [],
         theme: values
       };
+      for (let selector of selectors) {
+        let scheme = selector.includes("t_dark") ? "dark" : selector.includes("t_light") ? "light" : "", name = selector.slice(selector.lastIndexOf(".t_") + 3);
+        name.startsWith(scheme) && (name = name.slice(scheme.length + 1)), scheme === name && (scheme = "");
+        let themeName = `${scheme}${scheme && name ? "_" : ""}${name}`;
+        dedupedEntry.names.includes(themeName) || dedupedEntry.names.push(themeName);
+      }
+      return dedupedEntry;
     }
     function getTamaguiSelector(rule, collectThemes = !1) {
       if (rule instanceof CSSStyleRule) {
@@ -1706,65 +1703,11 @@ var require_useMedia_native = __commonJS({
   }
 });
 
-// ../web/dist/cjs/Tamagui.native.js
-var require_Tamagui_native = __commonJS({
-  "../web/dist/cjs/Tamagui.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 = (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;
-    }, __toESM2 = (mod, isNodeMode, target) => (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 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), Tamagui_exports = {};
-    __export2(Tamagui_exports, {
-      Tamagui: () => Tamagui,
-      getValueFromIdentifier: () => getValueFromIdentifier,
-      setIdentifierValue: () => setIdentifierValue
-    });
-    module2.exports = __toCommonJS2(Tamagui_exports);
-    var Helpers = __toESM2(require_index_native7()), import_config = require_config_native(), import_insertStyleRule = require_insertStyleRule_native(), import_useMedia = require_useMedia_native(), TamaguiManager = class {
-      constructor() {
-        this.Helpers = Helpers;
-      }
-      get mediaState() {
-        return { ...import_useMedia.mediaState };
-      }
-      get config() {
-        return (0, import_config.getConfig)();
-      }
-      get insertedRules() {
-        return (0, import_insertStyleRule.getAllRules)();
-      }
-      get allSelectors() {
-        return (0, import_insertStyleRule.getAllSelectors)();
-      }
-      get allTransforms() {
-        return (0, import_insertStyleRule.getAllTransforms)();
-      }
-      get identifierToValue() {
-        return identifierToValue;
-      }
-    }, Tamagui = new TamaguiManager(), identifierToValue = /* @__PURE__ */ new Map(), getValueFromIdentifier = (identifier) => identifierToValue.get(identifier), setIdentifierValue = (identifier, value) => {
-      identifierToValue.set(identifier, value);
-    };
-  }
-});
-
-// ../compose-refs/dist/cjs/compose-refs.native.js
-var require_compose_refs_native = __commonJS({
-  "../compose-refs/dist/cjs/compose-refs.native.js"(exports2, module2) {
+// ../web/dist/cjs/helpers/createShallowSetState.native.js
+var require_createShallowSetState_native = __commonJS({
+  "../web/dist/cjs/helpers/createShallowSetState.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 = (target, all) => {
+    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) => {
@@ -1772,47 +1715,28 @@ var require_compose_refs_native = __commonJS({
         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;
-    }, __toESM2 = (mod, isNodeMode, target) => (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 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), compose_refs_exports = {};
-    __export2(compose_refs_exports, {
-      composeRefs: () => composeRefs,
-      useComposedRefs: () => useComposedRefs
+    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), createShallowSetState_exports = {};
+    __export2(createShallowSetState_exports, {
+      createShallowSetState: () => createShallowSetState,
+      isEqualShallow: () => isEqualShallow,
+      mergeIfNotShallowEqual: () => mergeIfNotShallowEqual
     });
-    module2.exports = __toCommonJS2(compose_refs_exports);
-    var React2 = __toESM2(require("react"));
-    function setRef(ref, value) {
-      typeof ref == "function" ? ref(value) : ref && (ref.current = value);
+    module2.exports = __toCommonJS2(createShallowSetState_exports);
+    function createShallowSetState(setter, debug) {
+      return (next) => setter((prev) => mergeIfNotShallowEqual(prev, next, debug));
     }
-    function composeRefs(...refs) {
-      return (node) => refs.forEach((ref) => setRef(ref, node));
+    function mergeIfNotShallowEqual(prev, next, debug) {
+      return isEqualShallow(prev, next) ? prev : (process.env.NODE_ENV === "development" && debug && console.warn("setStateShallow CHANGE", { prev, next }), { ...prev, ...next });
     }
-    function useComposedRefs(...refs) {
-      return React2.useCallback(composeRefs(...refs), refs);
+    function isEqualShallow(prev, next) {
+      for (let key in next)
+        if (prev[key] !== next[key])
+          return !1;
+      return !0;
     }
   }
 });
 
-// ../compose-refs/dist/cjs/index.native.js
-var require_index_native10 = __commonJS({
-  "../compose-refs/dist/cjs/index.native.js"(exports2, module2) {
-    "use strict";
-    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __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;
-    }, __reExport2 = (target, mod, secondTarget) => (__copyProps2(target, mod, "default"), secondTarget && __copyProps2(secondTarget, mod, "default")), __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), src_exports2 = {};
-    module2.exports = __toCommonJS2(src_exports2);
-    __reExport2(src_exports2, require_compose_refs_native(), module2.exports);
-  }
-});
-
 // ../web/dist/cjs/constants/constants.native.js
 var require_constants_native2 = __commonJS({
   "../web/dist/cjs/constants/constants.native.js"(exports2, module2) {
@@ -1847,9 +1771,9 @@ var require_constants_native2 = __commonJS({
   }
 });
 
-// ../web/dist/cjs/helpers/objectIdentityKey.native.js
-var require_objectIdentityKey_native = __commonJS({
-  "../web/dist/cjs/helpers/objectIdentityKey.native.js"(exports2, module2) {
+// ../web/dist/cjs/helpers/ThemeManager.native.js
+var require_ThemeManager_native = __commonJS({
+  "../web/dist/cjs/helpers/ThemeManager.native.js"(exports2, 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)
@@ -1859,177 +1783,149 @@ var require_objectIdentityKey_native = __commonJS({
         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
+    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), ThemeManager_exports = {};
+    __export2(ThemeManager_exports, {
+      ThemeManager: () => ThemeManager,
+      getHasThemeUpdatingProps: () => getHasThemeUpdatingProps,
+      getManagers: () => getManagers
     });
-    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;
+    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);
     }
-    var cache = /* @__PURE__ */ new WeakMap();
-  }
-});
-
-// ../web/dist/cjs/helpers/createStyledContext.native.js
-var require_createStyledContext_native = __commonJS({
-  "../web/dist/cjs/helpers/createStyledContext.native.js"(exports2, 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;
+    var uid = 0, ThemeManager = class {
+      constructor(props = {}, parentManager) {
+        if (this.props = props, this.id = 0, this.themeListeners = /* @__PURE__ */ new Set(), this.parentManager = null, this.state = emptyState, this._allKeys = null, uid = (uid + 1) % Number.MAX_VALUE, this.id = uid, parentManager === "root") {
+          this.updateStateFromProps(props, !1);
+          return;
         }
-        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"(exports2, 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: {}
+        if (!parentManager)
+          throw process.env.NODE_ENV !== "production" ? new Error(
+            "No parent manager given, this is likely due to duplicated Tamagui dependencies. Check your lockfile for mis-matched versions. It could also be from an error somewhere else in your stack causing Tamagui to recieve undefined context, you can try putting some ErrorBoundary components around other areas of your app, or a Suspense boundary."
+          ) : "\u274C 000";
+        if (this.parentManager = parentManager, !this.updateStateFromProps(props, !1))
+          return parentManager;
       }
-    });
-  }
-});
-
-// ../web/dist/cjs/defaultComponentState.native.js
-var require_defaultComponentState_native = __commonJS({
-  "../web/dist/cjs/defaultComponentState.native.js"(exports2, 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), defaultComponentState_exports = {};
-    __export2(defaultComponentState_exports, {
-      defaultComponentState: () => defaultComponentState,
-      defaultComponentStateMounted: () => defaultComponentStateMounted,
-      defaultComponentStateShouldEnter: () => defaultComponentStateShouldEnter
-    });
-    module2.exports = __toCommonJS2(defaultComponentState_exports);
-    var defaultComponentState = {
-      hover: !1,
-      press: !1,
-      pressIn: !1,
-      focus: !1,
-      unmounted: !0
-    }, defaultComponentStateMounted = {
-      ...defaultComponentState,
-      unmounted: !1
-    }, defaultComponentStateShouldEnter = {
-      ...defaultComponentState,
-      unmounted: "should-enter"
-    };
-  }
-});
-
-// ../web/dist/cjs/helpers/createShallowSetState.native.js
-var require_createShallowSetState_native = __commonJS({
-  "../web/dist/cjs/helpers/createShallowSetState.native.js"(exports2, 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), createShallowSetState_exports = {};
-    __export2(createShallowSetState_exports, {
-      createShallowSetState: () => createShallowSetState,
-      isEqualShallow: () => isEqualShallow,
-      mergeIfNotShallowEqual: () => mergeIfNotShallowEqual
-    });
-    module2.exports = __toCommonJS2(createShallowSetState_exports);
-    function createShallowSetState(setter, debug) {
-      return (next) => setter((prev) => mergeIfNotShallowEqual(prev, next, debug));
-    }
-    function mergeIfNotShallowEqual(prev, next, debug) {
-      return isEqualShallow(prev, next) ? prev : (process.env.NODE_ENV === "development" && debug && console.warn("setStateShallow CHANGE", { prev, next }), { ...prev, ...next });
+      updateStateFromProps(props = this.props || {}, shouldNotify = !0) {
+        if (this.props = props, props.forceTheme)
+          return this.state.theme = props.forceTheme, this.state.name = props.name || "", this.updateState(this.state, !0), this.state;
+        let nextState = this.getStateIfChanged(props);
+        if (nextState)
+          return this.updateState(nextState, shouldNotify), nextState;
+      }
+      updateState(nextState, shouldNotify = !0) {
+        this.state = nextState, this._allKeys = null, process.env.NODE_ENV !== "production" && (this._numChangeEventsSent ??= 0, this._numChangeEventsSent++), shouldNotify && this.notify();
+      }
+      getStateIfChanged(props = this.props, state = this.state, parentManager = this.parentManager) {
+        let _ = this.getState(props, parentManager);
+        if (state && state !== emptyState && !_)
+          return parentManager == null ? void 0 : parentManager.state;
+        if (this.getStateShouldChange(_, state))
+          return _;
+      }
+      getStateShouldChange(nextState, state = this.state) {
+        return !(!(nextState != null && nextState.theme) || nextState.theme === (state == null ? void 0 : state.theme));
+      }
+      getState(props = this.props, parentManager = this.parentManager) {
+        return getState(props, parentManager) || (parentManager == null ? void 0 : parentManager.state) || null;
+      }
+      get allKeys() {
+        var _a;
+        return this._allKeys ||= /* @__PURE__ */ new Set([
+          ...((_a = this.parentManager) == null ? void 0 : _a.allKeys) || [],
+          ...Object.keys(this.state.theme || {})
+        ]), this._allKeys;
+      }
+      notify(forced = !1) {
+        this.themeListeners.forEach((cb) => cb(this.state.name, this, forced));
+      }
+      onChangeTheme(cb, debugId) {
+        return process.env.NODE_ENV !== "production" && debugId && (this._listeningIds ??= /* @__PURE__ */ new Set(), this._listeningIds.add(debugId)), this.themeListeners.add(cb), () => {
+          this.themeListeners.delete(cb);
+        };
+      }
+    };
+    function getState(props, manager) {
+      var _a;
+      if (props.name && props.reset)
+        throw new Error(
+          process.env.NODE_ENV === "production" ? "\u274C004" : "Cannot reset and set a new name at the same time."
+        );
+      if (!getHasThemeUpdatingProps(props))
+        return null;
+      let themes = (0, import_config.getThemes)(), [allManagers, componentManagers] = getManagers(manager), isDirectParentAComponentTheme = !!(manager != null && manager.state.isComponent), startIndex = props.reset && !isDirectParentAComponentTheme ? 1 : 0, baseManager = allManagers[startIndex], parentManager = allManagers[startIndex + 1];
+      if (!baseManager && props.reset)
+        return process.env.NODE_ENV !== "production" && console.warn("Cannot reset, no parent theme exists"), null;
+      let { componentName } = props, result = null, baseName = (baseManager == null ? void 0 : baseManager.state.name) || "";
+      baseManager != null && baseManager.state.isComponent && (baseName = baseName.replace(/_[A-Z][A-Za-z]+/, ""));
+      let nextName = props.reset ? baseName : props.name || "", allComponentThemes = componentManagers.map((x) => (x == null ? void 0 : x.state.name) || "");
+      isDirectParentAComponentTheme && allComponentThemes.shift();
+      let base = baseName.split(import_constants22.THEME_NAME_SEPARATOR), max2 = base.length, min2 = props.componentName && !nextName ? max2 : 0;
+      for (let i = max2; i >= min2; i--) {
+        let prefix = base.slice(0, i).join(import_constants22.THEME_NAME_SEPARATOR);
+        props.inverse && (prefix = inverseThemeName(prefix));
+        let potentials = [];
+        if (prefix && prefix !== baseName && potentials.push(prefix), nextName && potentials.unshift(prefix ? `${prefix}_${nextName}` : nextName), i === 1) {
+          let lastSegment = potentials.findIndex((x) => !x.includes("_"));
+          lastSegment > 0 && potentials.splice(lastSegment, 0, nextName);
+        }
+        if (componentName && !props.reset) {
+          let baseLen = base.length, componentPotentials = [];
+          if (nextName && baseLen > 1) {
+            let beforeSeparator = base[0];
+            componentPotentials.push(`${beforeSeparator}_${nextName}_${componentName}`);
+          }
+          if (componentPotentials.push(`${prefix}_${componentName}`), nextName) {
+            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);
+          }
+          potentials = [...componentPotentials, ...potentials, ...allComponentThemes];
+        }
+        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,
+          nextName,
+          baseName,
+          prefix
+        }), found) {
+          let names = found.split("_"), [firstName, ...restNames] = names, lastName = names[names.length - 1], isComponent = lastName[0] === lastName[0].toUpperCase(), scheme = firstName === "light" ? "light" : firstName === "dark" ? "dark" : void 0, pre = import_constants22.THEME_CLASSNAME_PREFIX, className = import_constants4.isWeb ? `${pre}sub_theme ${pre}${!scheme || !restNames.length ? firstName : restNames.join("_")}` : "", parentState = (_a = baseManager || parentManager) == null ? void 0 : _a.state, parentName = parentState == null ? void 0 : parentState.name;
+          result = {
+            name: found,
+            parentName,
+            theme: themes[found],
+            className,
+            isComponent,
+            scheme
+          };
+          break;
+        }
+      }
+      return process.env.NODE_ENV !== "production" && props.debug === "verbose" && typeof window < "u" && (console.groupCollapsed("ThemeManager.getState()"), console.info({ props, baseName, base, min: min2, max: max2 }), console.warn("result", { result }), console.trace(), console.groupEnd()), result;
     }
-    function isEqualShallow(prev, next) {
-      for (let key in next)
-        if (prev[key] !== next[key])
-          return !1;
-      return !0;
+    var inverseThemeName = (themeName) => themeName.startsWith("light") ? themeName.replace(/^light/, "dark") : themeName.replace(/^dark/, "light");
+    function getManagers(themeManager) {
+      let comp = [], all = [], cur = themeManager;
+      for (; cur; )
+        all.push(cur), cur.state.isComponent && comp.push(cur), cur = cur.parentManager;
+      return [all, comp];
     }
   }
 });
 
-// ../web/dist/cjs/constants/accessibilityDirectMap.native.js
-var require_accessibilityDirectMap_native = __commonJS({
-  "../web/dist/cjs/constants/accessibilityDirectMap.native.js"(exports2, module2) {
+// ../web/dist/cjs/helpers/ThemeManagerContext.native.js
+var require_ThemeManagerContext_native = __commonJS({
+  "../web/dist/cjs/helpers/ThemeManagerContext.native.js"(exports2, 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)
@@ -2039,72 +1935,18 @@ var require_accessibilityDirectMap_native = __commonJS({
         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), accessibilityDirectMap_native_exports = {};
-    __export2(accessibilityDirectMap_native_exports, {
-      accessibilityDirectMap: () => accessibilityDirectMap,
-      accessibilityWebRoleToNativeRole: () => accessibilityWebRoleToNativeRole,
-      nativeAccessibilityState: () => nativeAccessibilityState,
-      nativeAccessibilityValue: () => nativeAccessibilityValue,
-      webToNativeAccessibilityDirectMap: () => webToNativeAccessibilityDirectMap
+    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), ThemeManagerContext_exports = {};
+    __export2(ThemeManagerContext_exports, {
+      ThemeManagerIDContext: () => ThemeManagerIDContext
     });
-    module2.exports = __toCommonJS2(accessibilityDirectMap_native_exports);
-    var accessibilityDirectMap = {}, webToNativeAccessibilityDirectMap = {
-      "aria-label": "accessibilityLabel",
-      "aria-labelledby": "accessibilityLabelledBy",
-      "aria-live": "accessibilityLiveRegion",
-      "aria-modal": "accessibilityViewIsModal",
-      "aria-hidden": "accessibilityElementsHidden"
-    }, nativeAccessibilityValue = {
-      "aria-valuemin": "min",
-      "aria-valuemax": "max",
-      "aria-valuenow": "now",
-      "aria-valuetext": "text"
-    }, nativeAccessibilityState = {
-      "aria-disabled": "disabled",
-      "aria-selected": "selected",
-      "aria-checked": "checked",
-      "aria-busy": "busy",
-      "aria-expanded": "expanded"
-    }, accessibilityWebRoleToNativeRole = {
-      alert: "alert",
-      button: "button",
-      checkbox: "checkbox",
-      combobox: "combobox",
-      grid: "grid",
-      group: "none",
-      heading: "header",
-      imagebutton: "imagebutton",
-      img: "image",
-      keyboardkey: "keyboardkey",
-      link: "link",
-      menu: "menu",
-      menubar: "menubar",
-      menuitem: "menuitem",
-      none: "none",
-      presentation: "none",
-      progressbar: "progressbar",
-      radio: "radio",
-      radiogroup: "radiogroup",
-      region: "summary",
-      scrollbar: "scrollbar",
-      searchbox: "search",
-      slider: "adjustable",
-      spinbutton: "spinbutton",
-      summary: "summary",
-      switch: "switch",
-      tab: "tab",
-      tablist: "tablist",
-      text: "text",
-      timer: "timer",
-      togglebutton: "togglebutton",
-      toolbar: "toolbar"
-    };
+    module2.exports = __toCommonJS2(ThemeManagerContext_exports);
+    var import_react2 = require("react"), ThemeManagerIDContext = (0, import_react2.createContext)(1);
   }
 });
 
-// ../web/dist/cjs/constants/isDevTools.native.js
-var require_isDevTools_native = __commonJS({
-  "../web/dist/cjs/constants/isDevTools.native.js"(exports2, module2) {
+// ../web/dist/cjs/hooks/useTheme.native.js
+var require_useTheme_native = __commonJS({
+  "../web/dist/cjs/hooks/useTheme.native.js"(exports2, 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)
@@ -2114,27 +1956,260 @@ var require_isDevTools_native = __commonJS({
         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), isDevTools_exports = {};
-    __export2(isDevTools_exports, {
-      isDevTools: () => isDevTools
+    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), useTheme_exports = {};
+    __export2(useTheme_exports, {
+      activeThemeManagers: () => activeThemeManagers,
+      getThemeManager: () => getThemeManager,
+      getThemeProxied: () => getThemeProxied,
+      useChangeThemeEffect: () => useChangeThemeEffect,
+      useTheme: () => useTheme4,
+      useThemeWithState: () => useThemeWithState
     });
-    module2.exports = __toCommonJS2(isDevTools_exports);
-    var isDevTools = (() => {
-      if (process.env.NODE_ENV === "development")
-        try {
-          return new Function("try {return this===window;}catch(e){ return false;}")();
-        } catch {
+    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_createShallowSetState = require_createShallowSetState_native(), import_ThemeManager = require_ThemeManager_native(), import_ThemeManagerContext = require_ThemeManagerContext_native(), emptyProps = { name: null }, cached;
+    function getDefaultThemeProxied() {
+      if (cached)
+        return cached;
+      let config = (0, import_config.getConfig)(), name = config.themes.light ? "light" : Object.keys(config.themes)[0], defaultTheme = config.themes[name];
+      return cached = getThemeProxied({ theme: defaultTheme, name }), cached;
+    }
+    var useTheme4 = (props = emptyProps) => {
+      let [_, theme] = useThemeWithState(props);
+      return theme || getDefaultThemeProxied();
+    }, useThemeWithState = (props) => {
+      let keys = (0, import_react2.useRef)([]), changedThemeState = useChangeThemeEffect(
+        props,
+        !1,
+        keys.current,
+        import_constants4.isServer ? void 0 : () => {
+          var _a, _b;
+          let next = ((_a = props.shouldUpdate) == null ? void 0 : _a.call(props)) ?? (keys.current.length > 0 ? !0 : void 0);
+          return process.env.NODE_ENV === "development" && typeof props.debug == "string" && props.debug !== "profile" && console.info("  \u{1F3A8} useTheme() shouldUpdate?", next, {
+            shouldUpdateProp: (_b = props.shouldUpdate) == null ? void 0 : _b.call(props),
+            keys: [...keys.current]
+          }), next;
         }
+      ), { themeManager, state } = changedThemeState;
+      process.env.NODE_ENV === "development" && (state != null && state.theme || process.env.TAMAGUI_DISABLE_NO_THEME_WARNING !== "1" && console.warn(
+        `[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`
+      ));
+      let themeProxied = (0, import_react2.useMemo)(() => !themeManager || !(state != null && state.theme) ? {} : getThemeProxied(state, props.deopt, themeManager, keys.current, props.debug), [state == null ? void 0 : state.theme, themeManager, props.deopt, props.debug]);
+      return process.env.NODE_ENV === "development" && props.debug === "verbose" && (console.groupCollapsed("  \u{1F539} useTheme =>", state == null ? void 0 : state.name), console.info("returning state", changedThemeState, "from props", props), console.groupEnd()), [changedThemeState, themeProxied];
+    };
+    function getThemeProxied({ theme, name, scheme }, deopt = !1, themeManager, keys, debug) {
+      if (!theme)
+        return {};
+      let config = (0, import_config.getConfig)();
+      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 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"
+          ) {
+            let 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")
+                    track(keyString);
+                  else if (subkey === "get")
+                    return (platform) => {
+                      let outVal = (0, import_createVariable.getVariable)(val);
+                      if (platform !== "web" && import_constants4.isIos && !deopt && config.settings.fastSchemeChange && !someParentIsInversed(themeManager) && scheme) {
+                        let oppositeThemeName = name.replace(
+                          scheme === "dark" ? "dark" : "light",
+                          scheme === "dark" ? "light" : "dark"
+                        ), oppositeTheme = config.themes[oppositeThemeName], oppositeVal = (0, import_createVariable.getVariable)(oppositeTheme == null ? void 0 : oppositeTheme[keyString]);
+                        if (oppositeVal)
+                          return {
+                            dynamic: {
+                              dark: scheme === "dark" ? outVal : oppositeVal,
+                              light: scheme === "light" ? outVal : oppositeVal
+                            }
+                          };
+                      }
+                      return 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(", ")}`
+              );
+          }
+          return Reflect.get(_, key);
+        }
+      });
+    }
+    function someParentIsInversed(manager) {
+      {
+        let cur = manager;
+        for (; cur; ) {
+          if (!cur.parentManager)
+            return !1;
+          if (cur.parentManager.state.scheme !== cur.state.scheme)
+            return !0;
+          cur = cur.parentManager;
+        }
+      }
       return !1;
-    })();
+    }
+    var activeThemeManagers = /* @__PURE__ */ new Set(), _uidToManager = /* @__PURE__ */ new WeakMap(), _idToUID = {}, getId = (id) => _idToUID[id], getThemeManager = (id) => _uidToManager.get(getId(id)), registerThemeManager = (t) => {
+      if (!_idToUID[t.id]) {
+        let id = _idToUID[t.id] = {};
+        _uidToManager.set(id, t);
+      }
+    }, useChangeThemeEffect = (props, isRoot = !1, keys, shouldUpdate) => {
+      let { disable } = props, parentManagerId = (0, import_react2.useContext)(import_ThemeManagerContext.ThemeManagerIDContext), parentManager = getThemeManager(parentManagerId);
+      if (!isRoot && !parentManager || disable)
+        return {
+          isNewTheme: !1,
+          state: parentManager == null ? void 0 : parentManager.state,
+          themeManager: parentManager
+        };
+      let [themeState, setThemeState] = (0, import_react2.useState)(createState), { state, mounted, isNewTheme, themeManager, inversed } = themeState, isInversingOnMount = !!(!themeState.mounted && props.inverse);
+      function getShouldUpdateTheme(manager = themeManager, nextState, prevState = state, forceShouldChange = !1) {
+        let forceUpdate = shouldUpdate == null ? void 0 : shouldUpdate();
+        if (!manager || !forceShouldChange && forceUpdate === !1)
+          return;
+        let next = nextState || manager.getState(props, parentManager);
+        if (forceShouldChange || next && !(forceUpdate !== !0 && !manager.getStateShouldChange(next, prevState)))
+          return next;
+      }
+      if (import_constants4.isServer || ((0, import_react2.useEffect)(() => {
+        if (!themeManager)
+          return;
+        if (props.inverse && !mounted) {
+          setThemeState((prev) => createState({
+            ...prev,
+            mounted: !0
+          }));
+          return;
+        }
+        (isNewTheme || getShouldUpdateTheme(themeManager)) && (activeThemeManagers.add(themeManager), setThemeState(createState));
+        let selfListenerDispose = themeManager.onChangeTheme((_a, _b, forced) => {
+          forced && setThemeState((prev) => createState(prev, !0));
+        }), disposeChangeListener = parentManager == null ? void 0 : parentManager.onChangeTheme(
+          (name, manager, forced) => {
+            let force = forced || (shouldUpdate == null ? void 0 : shouldUpdate()) || props.deopt || props["disable-child-theme"], shouldTryUpdate = force ?? !!(keys != null && keys.length || isNewTheme);
+            process.env.NODE_ENV === "development" && props.debug === "verbose" && console.info(" \u{1F538} onChange", themeManager.id, {
+              force,
+              shouldTryUpdate,
+              props,
+              name,
+              manager,
+              keys
+            }), shouldTryUpdate && setThemeState((prev) => createState(prev, force));
+          },
+          themeManager.id
+        );
+        return () => {
+          selfListenerDispose(), disposeChangeListener == null || disposeChangeListener(), isNewTheme && activeThemeManagers.delete(themeManager);
+        };
+      }, [
+        themeManager,
+        parentManager,
+        isNewTheme,
+        props.componentName,
+        props.inverse,
+        props.name,
+        props.reset,
+        mounted
+      ]), process.env.NODE_ENV === "development" && props.debug !== "profile" && (0, import_react2.useEffect)(() => (globalThis.TamaguiThemeManagers ??= /* @__PURE__ */ new Set(), globalThis.TamaguiThemeManagers.add(themeManager), () => {
+        globalThis.TamaguiThemeManagers.delete(themeManager);
+      }), [themeManager])), isInversingOnMount)
+        return {
+          isNewTheme: !1,
+          inversed: !1,
+          themeManager: parentManager,
+          state: {
+            name: "",
+            ...parentManager == null ? void 0 : parentManager.state,
+            className: ""
+          }
+        };
+      return {
+        state,
+        isNewTheme,
+        inversed,
+        themeManager
+      };
+      function createState(prev, force = !1) {
+        if (prev && (shouldUpdate == null ? void 0 : shouldUpdate()) === !1 && !force)
+          return prev;
+        let themeManager2 = parentManager, state2;
+        if ((0, import_ThemeManager.getHasThemeUpdatingProps)(props)) {
+          let getNewThemeManager = () => new import_ThemeManager.ThemeManager(props, isRoot ? "root" : parentManager);
+          if (prev != null && prev.themeManager) {
+            themeManager2 = prev.themeManager;
+            let forceChange = force || !!(keys != null && keys.length), next = themeManager2.getState(props, parentManager), nextState = getShouldUpdateTheme(
+              themeManager2,
+              next,
+              prev.state,
+              forceChange
+            );
+            nextState ? (state2 = nextState, prev.isNewTheme ? themeManager2.updateState(nextState) : themeManager2 = getNewThemeManager()) : prev.isNewTheme && parentManager && !next && (themeManager2 = parentManager);
+          } else
+            themeManager2 = getNewThemeManager(), state2 = { ...themeManager2.state };
+        }
+        let isNewTheme2 = !!(themeManager2 !== parentManager || props.inverse);
+        isNewTheme2 && registerThemeManager(themeManager2);
+        let 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 != null ? !1 : null, response = {
+          themeManager: themeManager2,
+          isNewTheme: isNewTheme2,
+          mounted: mounted2,
+          inversed: inversed2
+        }, shouldReturnPrev = prev && !force && // isEqualShallow uses the second arg as the keys so this should compare without state first...
+        (0, import_createShallowSetState.isEqualShallow)(prev, response) && // ... and then compare just the state, because we make a new state obj but is likely the same
+        (0, import_createShallowSetState.isEqualShallow)(prev.state, state2);
+        if (prev && shouldReturnPrev)
+          return prev;
+        if (response.state = state2, process.env.NODE_ENV === "development" && props.debug && import_constants4.isClient) {
+          console.groupCollapsed(` \u{1F537} ${themeManager2.id} useChangeThemeEffect createState`);
+          let parentState = { ...parentManager == null ? void 0 : parentManager.state }, parentId = parentManager == null ? void 0 : parentManager.id, themeManagerState = { ...themeManager2.state };
+          console.info({
+            props,
+            parentState,
+            parentId,
+            themeManager: themeManager2,
+            prev,
+            response,
+            themeManagerState
+          }), console.groupEnd();
+        }
+        return response;
+      }
+    };
   }
 });
 
-// ../web/dist/cjs/helpers/getGroupPropParts.native.js
-var require_getGroupPropParts_native = __commonJS({
-  "../web/dist/cjs/helpers/getGroupPropParts.native.js"(exports2, module2) {
+// ../web/dist/cjs/Tamagui.native.js
+var require_Tamagui_native = __commonJS({
+  "../web/dist/cjs/Tamagui.native.js"(exports2, module2) {
     "use strict";
-    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
+    var __create2 = Object.create, __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __getProtoOf2 = Object.getPrototypeOf, __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) => {
@@ -2142,22 +2217,112 @@ var require_getGroupPropParts_native = __commonJS({
         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), getGroupPropParts_exports = {};
-    __export2(getGroupPropParts_exports, {
-      getGroupPropParts: () => getGroupPropParts
+    }, __toESM2 = (mod, isNodeMode, target) => (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 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), Tamagui_exports = {};
+    __export2(Tamagui_exports, {
+      Tamagui: () => Tamagui,
+      getValueFromIdentifier: () => getValueFromIdentifier,
+      setIdentifierValue: () => setIdentifierValue
     });
-    module2.exports = __toCommonJS2(getGroupPropParts_exports);
-    var import_useMedia = require_useMedia_native();
-    function getGroupPropParts(groupProp) {
-      let mediaQueries = (0, import_useMedia.getMedia)(), [_, name, part3, part4] = groupProp.split("-"), pseudo, media = part3 in mediaQueries ? part3 : void 0;
-      return media ? pseudo = part4 : pseudo = part3, { name, pseudo, media };
-    }
+    module2.exports = __toCommonJS2(Tamagui_exports);
+    var Helpers = __toESM2(require_index_native7()), import_config = require_config_native(), import_insertStyleRule = require_insertStyleRule_native(), import_useMedia = require_useMedia_native(), import_useTheme = require_useTheme_native(), Tamagui = (() => {
+      if (process.env.NODE_ENV === "development") {
+        class TamaguiManager {
+          constructor() {
+            this.Helpers = Helpers, this.getThemeManager = import_useTheme.getThemeManager;
+          }
+          get activeThemeManagers() {
+            return import_useTheme.activeThemeManagers;
+          }
+          get mediaState() {
+            return { ...import_useMedia.mediaState };
+          }
+          get config() {
+            return (0, import_config.getConfig)();
+          }
+          get insertedRules() {
+            return (0, import_insertStyleRule.getAllRules)();
+          }
+          get allSelectors() {
+            return (0, import_insertStyleRule.getAllSelectors)();
+          }
+          get allTransforms() {
+            return (0, import_insertStyleRule.getAllTransforms)();
+          }
+          get identifierToValue() {
+            return identifierToValue;
+          }
+        }
+        return new TamaguiManager();
+      }
+    })(), identifierToValue = /* @__PURE__ */ new Map(), getValueFromIdentifier = (identifier) => identifierToValue.get(identifier), setIdentifierValue = (identifier, value) => {
+      identifierToValue.set(identifier, value);
+    };
   }
 });
 
-// ../web/dist/cjs/helpers/createMediaStyle.native.js
-var require_createMediaStyle_native = __commonJS({
-  "../web/dist/cjs/helpers/createMediaStyle.native.js"(exports2, module2) {
+// ../compose-refs/dist/cjs/compose-refs.native.js
+var require_compose_refs_native = __commonJS({
+  "../compose-refs/dist/cjs/compose-refs.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 = (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;
+    }, __toESM2 = (mod, isNodeMode, target) => (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 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), compose_refs_exports = {};
+    __export2(compose_refs_exports, {
+      composeRefs: () => composeRefs,
+      useComposedRefs: () => useComposedRefs
+    });
+    module2.exports = __toCommonJS2(compose_refs_exports);
+    var React2 = __toESM2(require("react"));
+    function setRef(ref, value) {
+      typeof ref == "function" ? ref(value) : ref && (ref.current = value);
+    }
+    function composeRefs(...refs) {
+      return (node) => refs.forEach((ref) => setRef(ref, node));
+    }
+    function useComposedRefs(...refs) {
+      return React2.useCallback(composeRefs(...refs), refs);
+    }
+  }
+});
+
+// ../compose-refs/dist/cjs/index.native.js
+var require_index_native10 = __commonJS({
+  "../compose-refs/dist/cjs/index.native.js"(exports2, module2) {
+    "use strict";
+    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __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;
+    }, __reExport2 = (target, mod, secondTarget) => (__copyProps2(target, mod, "default"), secondTarget && __copyProps2(secondTarget, mod, "default")), __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), src_exports2 = {};
+    module2.exports = __toCommonJS2(src_exports2);
+    __reExport2(src_exports2, require_compose_refs_native(), module2.exports);
+  }
+});
+
+// ../web/dist/cjs/helpers/objectIdentityKey.native.js
+var require_objectIdentityKey_native = __commonJS({
+  "../web/dist/cjs/helpers/objectIdentityKey.native.js"(exports2, 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)
@@ -2167,83 +2332,357 @@ var require_createMediaStyle_native = __commonJS({
         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), createMediaStyle_exports = {};
-    __export2(createMediaStyle_exports, {
-      MEDIA_SEP: () => MEDIA_SEP,
-      createMediaStyle: () => createMediaStyle
+    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), objectIdentityKey_exports = {};
+    __export2(objectIdentityKey_exports, {
+      objectIdentityKey: () => objectIdentityKey
     });
-    module2.exports = __toCommonJS2(createMediaStyle_exports);
-    var import_config = require_config_native(), import_useMedia = require_useMedia_native(), import_getGroupPropParts = require_getGroupPropParts_native(), MEDIA_SEP = "_", prefixes = null, selectors = null, groupPseudoToPseudoCSSMap = {
-      press: "active"
-    }, createMediaStyle = (styleObject, mediaKeyIn, mediaQueries, type, negate, priority) => {
-      let { property, identifier, rules } = styleObject, conf = (0, import_config.getConfig)(), enableMediaPropOrder = conf.settings.mediaPropOrder, isTheme = type === "theme", isPlatform = type === "platform", isGroup = type === "group", isNonWindowMedia = isTheme || isPlatform || isGroup, negKey = negate ? "0" : "", ogPrefix = identifier.slice(0, identifier.indexOf("-") + 1), id = `${ogPrefix}${MEDIA_SEP}${mediaKeyIn.replace("-", "")}${negKey}${MEDIA_SEP}`, styleRule = "", groupMediaKey, containerName, nextIdentifier = identifier.replace(ogPrefix, id), styleInner = rules.map((rule) => rule.replace(identifier, nextIdentifier)).join(";");
-      if (isNonWindowMedia) {
-        let precedenceImportancePrefix = new Array((priority || 0) + (isGroup ? 1 : 0)).fill(":root").join("");
-        if (isTheme || isGroup) {
-          let groupInfo = (0, import_getGroupPropParts.getGroupPropParts)(mediaKeyIn), mediaName = groupInfo == null ? void 0 : groupInfo.name;
-          groupMediaKey = groupInfo == null ? void 0 : groupInfo.media, isGroup && (containerName = mediaName);
-          let name = (isGroup ? "group_" : "") + mediaName, selectorStart = styleInner.indexOf(":root"), selectorEnd = styleInner.lastIndexOf("{"), selector = styleInner.slice(selectorStart, selectorEnd), precedenceSpace = conf.themeClassNameOnRoot && isTheme ? "" : " ", pseudoSelectorName = groupInfo.pseudo ? groupPseudoToPseudoCSSMap[groupInfo.pseudo] || groupInfo.pseudo : void 0, pseudoSelector = pseudoSelectorName ? `:${pseudoSelectorName}` : "", presedencePrefix = `:root${precedenceImportancePrefix}${precedenceSpace}`, mediaSelector = `.t_${name}${pseudoSelector}`, nextSelector = `${presedencePrefix}${mediaSelector} ${selector.replace(
-            ":root",
-            ""
-          )}`;
-          styleRule = styleInner.replace(selector, nextSelector);
-        } else
-          styleRule = `${precedenceImportancePrefix}${styleInner}`;
-      }
-      if (!isNonWindowMedia || groupMediaKey) {
-        if (!selectors) {
-          let mediaKeys = Object.keys(mediaQueries);
-          selectors = Object.fromEntries(
-            mediaKeys.map((key) => [key, (0, import_useMedia.mediaObjectToString)(mediaQueries[key])])
-          ), enableMediaPropOrder || (prefixes = Object.fromEntries(
-            mediaKeys.map((k, index) => [k, new Array(index + 1).fill(":root").join("")])
-          ));
+    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;
         }
-        let mediaKey = groupMediaKey || mediaKeyIn, mediaSelector = selectors[mediaKey], mediaQuery = `${negate ? "not all and " : ""}${mediaSelector}`, precedenceImportancePrefix = groupMediaKey ? "" : enableMediaPropOrder ? (
-          // this new array should be cached
-          new Array(priority).fill(":root").join("")
-        ) : (
-          // @ts-ignore
-          prefixes[mediaKey]
-        ), prefix = groupMediaKey ? `@container ${containerName}` : "@media";
-        groupMediaKey && (styleInner = styleRule), styleInner.includes(prefix) ? styleRule = styleInner.replace("{", ` and ${mediaQuery} {`).replace("and screen and", "and") : styleRule = `${prefix} ${mediaQuery}{${precedenceImportancePrefix}${styleInner}}`, groupMediaKey && (styleRule = `@supports (contain: ${conf.settings.webContainerType || "inline-size"}) {${styleRule}}`);
       }
-      return {
-        property,
-        rules: [styleRule],
-        identifier: nextIdentifier
+      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"(exports2, 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"(exports2, 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"(exports2, 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), defaultComponentState_exports = {};
+    __export2(defaultComponentState_exports, {
+      defaultComponentState: () => defaultComponentState,
+      defaultComponentStateMounted: () => defaultComponentStateMounted,
+      defaultComponentStateShouldEnter: () => defaultComponentStateShouldEnter
+    });
+    module2.exports = __toCommonJS2(defaultComponentState_exports);
+    var defaultComponentState = {
+      hover: !1,
+      press: !1,
+      pressIn: !1,
+      focus: !1,
+      unmounted: !0
+    }, defaultComponentStateMounted = {
+      ...defaultComponentState,
+      unmounted: !1
+    }, defaultComponentStateShouldEnter = {
+      ...defaultComponentState,
+      unmounted: "should-enter"
     };
   }
 });
 
-// ../../node_modules/@react-native/normalize-color/index.js
-var require_normalize_color = __commonJS({
-  "../../node_modules/@react-native/normalize-color/index.js"(exports2, module2) {
+// ../web/dist/cjs/constants/accessibilityDirectMap.native.js
+var require_accessibilityDirectMap_native = __commonJS({
+  "../web/dist/cjs/constants/accessibilityDirectMap.native.js"(exports2, module2) {
     "use strict";
-    function normalizeColor(color) {
-      if (typeof color == "number")
-        return color >>> 0 === color && color >= 0 && color <= 4294967295 ? color : null;
-      if (typeof color != "string")
-        return null;
-      let matchers = getMatchers(), match;
-      if (match = matchers.hex6.exec(color))
-        return parseInt(match[1] + "ff", 16) >>> 0;
-      let colorFromKeyword = normalizeKeyword(color);
-      return colorFromKeyword ?? ((match = matchers.rgb.exec(color)) ? (parse255(match[1]) << 24 | // r
-      parse255(match[2]) << 16 | // g
-      parse255(match[3]) << 8 | // b
-      255) >>> // a
-      0 : (match = matchers.rgba.exec(color)) ? match[6] !== void 0 ? (parse255(match[6]) << 24 | // r
-      parse255(match[7]) << 16 | // g
-      parse255(match[8]) << 8 | // b
-      parse1(match[9])) >>> // a
-      0 : (parse255(match[2]) << 24 | // r
-      parse255(match[3]) << 16 | // g
-      parse255(match[4]) << 8 | // b
-      parse1(match[5])) >>> // a
-      0 : (match = matchers.hex3.exec(color)) ? parseInt(
-        match[1] + match[1] + // r
+    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), accessibilityDirectMap_native_exports = {};
+    __export2(accessibilityDirectMap_native_exports, {
+      accessibilityDirectMap: () => accessibilityDirectMap,
+      accessibilityWebRoleToNativeRole: () => accessibilityWebRoleToNativeRole,
+      nativeAccessibilityState: () => nativeAccessibilityState,
+      nativeAccessibilityValue: () => nativeAccessibilityValue,
+      webToNativeAccessibilityDirectMap: () => webToNativeAccessibilityDirectMap
+    });
+    module2.exports = __toCommonJS2(accessibilityDirectMap_native_exports);
+    var accessibilityDirectMap = {}, webToNativeAccessibilityDirectMap = {
+      "aria-label": "accessibilityLabel",
+      "aria-labelledby": "accessibilityLabelledBy",
+      "aria-live": "accessibilityLiveRegion",
+      "aria-modal": "accessibilityViewIsModal",
+      "aria-hidden": "accessibilityElementsHidden"
+    }, nativeAccessibilityValue = {
+      "aria-valuemin": "min",
+      "aria-valuemax": "max",
+      "aria-valuenow": "now",
+      "aria-valuetext": "text"
+    }, nativeAccessibilityState = {
+      "aria-disabled": "disabled",
+      "aria-selected": "selected",
+      "aria-checked": "checked",
+      "aria-busy": "busy",
+      "aria-expanded": "expanded"
+    }, accessibilityWebRoleToNativeRole = {
+      alert: "alert",
+      button: "button",
+      checkbox: "checkbox",
+      combobox: "combobox",
+      grid: "grid",
+      group: "none",
+      heading: "header",
+      imagebutton: "imagebutton",
+      img: "image",
+      keyboardkey: "keyboardkey",
+      link: "link",
+      menu: "menu",
+      menubar: "menubar",
+      menuitem: "menuitem",
+      none: "none",
+      presentation: "none",
+      progressbar: "progressbar",
+      radio: "radio",
+      radiogroup: "radiogroup",
+      region: "summary",
+      scrollbar: "scrollbar",
+      searchbox: "search",
+      slider: "adjustable",
+      spinbutton: "spinbutton",
+      summary: "summary",
+      switch: "switch",
+      tab: "tab",
+      tablist: "tablist",
+      text: "text",
+      timer: "timer",
+      togglebutton: "togglebutton",
+      toolbar: "toolbar"
+    };
+  }
+});
+
+// ../web/dist/cjs/constants/isDevTools.native.js
+var require_isDevTools_native = __commonJS({
+  "../web/dist/cjs/constants/isDevTools.native.js"(exports2, 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), isDevTools_exports = {};
+    __export2(isDevTools_exports, {
+      isDevTools: () => isDevTools
+    });
+    module2.exports = __toCommonJS2(isDevTools_exports);
+    var isDevTools = (() => {
+      if (process.env.NODE_ENV === "development")
+        try {
+          return new Function("try {return this===window;}catch(e){ return false;}")();
+        } catch {
+        }
+      return !1;
+    })();
+  }
+});
+
+// ../web/dist/cjs/helpers/getGroupPropParts.native.js
+var require_getGroupPropParts_native = __commonJS({
+  "../web/dist/cjs/helpers/getGroupPropParts.native.js"(exports2, 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), getGroupPropParts_exports = {};
+    __export2(getGroupPropParts_exports, {
+      getGroupPropParts: () => getGroupPropParts
+    });
+    module2.exports = __toCommonJS2(getGroupPropParts_exports);
+    var import_useMedia = require_useMedia_native();
+    function getGroupPropParts(groupProp) {
+      let mediaQueries = (0, import_useMedia.getMedia)(), [_, name, part3, part4] = groupProp.split("-"), pseudo, media = part3 in mediaQueries ? part3 : void 0;
+      return media ? pseudo = part4 : pseudo = part3, { name, pseudo, media };
+    }
+  }
+});
+
+// ../web/dist/cjs/helpers/createMediaStyle.native.js
+var require_createMediaStyle_native = __commonJS({
+  "../web/dist/cjs/helpers/createMediaStyle.native.js"(exports2, 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), createMediaStyle_exports = {};
+    __export2(createMediaStyle_exports, {
+      MEDIA_SEP: () => MEDIA_SEP,
+      createMediaStyle: () => createMediaStyle
+    });
+    module2.exports = __toCommonJS2(createMediaStyle_exports);
+    var import_config = require_config_native(), import_useMedia = require_useMedia_native(), import_getGroupPropParts = require_getGroupPropParts_native(), MEDIA_SEP = "_", prefixes = null, selectors = null, groupPseudoToPseudoCSSMap = {
+      press: "active"
+    }, createMediaStyle = (styleObject, mediaKeyIn, mediaQueries, type, negate, priority) => {
+      let { property, identifier, rules } = styleObject, conf = (0, import_config.getConfig)(), enableMediaPropOrder = conf.settings.mediaPropOrder, isTheme = type === "theme", isPlatform = type === "platform", isGroup = type === "group", isNonWindowMedia = isTheme || isPlatform || isGroup, negKey = negate ? "0" : "", ogPrefix = identifier.slice(0, identifier.indexOf("-") + 1), id = `${ogPrefix}${MEDIA_SEP}${mediaKeyIn.replace("-", "")}${negKey}${MEDIA_SEP}`, styleRule = "", groupMediaKey, containerName, nextIdentifier = identifier.replace(ogPrefix, id), styleInner = rules.map((rule) => rule.replace(identifier, nextIdentifier)).join(";");
+      if (isNonWindowMedia) {
+        let precedenceImportancePrefix = new Array((priority || 0) + (isGroup ? 1 : 0)).fill(":root").join("");
+        if (isTheme || isGroup) {
+          let groupInfo = (0, import_getGroupPropParts.getGroupPropParts)(mediaKeyIn), mediaName = groupInfo == null ? void 0 : groupInfo.name;
+          groupMediaKey = groupInfo == null ? void 0 : groupInfo.media, isGroup && (containerName = mediaName);
+          let name = (isGroup ? "group_" : "") + mediaName, selectorStart = styleInner.indexOf(":root"), selectorEnd = styleInner.lastIndexOf("{"), selector = styleInner.slice(selectorStart, selectorEnd), precedenceSpace = conf.themeClassNameOnRoot && isTheme ? "" : " ", pseudoSelectorName = groupInfo.pseudo ? groupPseudoToPseudoCSSMap[groupInfo.pseudo] || groupInfo.pseudo : void 0, pseudoSelector = pseudoSelectorName ? `:${pseudoSelectorName}` : "", presedencePrefix = `:root${precedenceImportancePrefix}${precedenceSpace}`, mediaSelector = `.t_${name}${pseudoSelector}`, nextSelector = `${presedencePrefix}${mediaSelector} ${selector.replace(
+            ":root",
+            ""
+          )}`;
+          styleRule = styleInner.replace(selector, nextSelector);
+        } else
+          styleRule = `${precedenceImportancePrefix}${styleInner}`;
+      }
+      if (!isNonWindowMedia || groupMediaKey) {
+        if (!selectors) {
+          let mediaKeys = Object.keys(mediaQueries);
+          selectors = Object.fromEntries(
+            mediaKeys.map((key) => [key, (0, import_useMedia.mediaObjectToString)(mediaQueries[key])])
+          ), enableMediaPropOrder || (prefixes = Object.fromEntries(
+            mediaKeys.map((k, index) => [k, new Array(index + 1).fill(":root").join("")])
+          ));
+        }
+        let mediaKey = groupMediaKey || mediaKeyIn, mediaSelector = selectors[mediaKey], mediaQuery = `${negate ? "not all and " : ""}${mediaSelector}`, precedenceImportancePrefix = groupMediaKey ? "" : enableMediaPropOrder ? (
+          // this new array should be cached
+          new Array(priority).fill(":root").join("")
+        ) : (
+          // @ts-ignore
+          prefixes[mediaKey]
+        ), prefix = groupMediaKey ? `@container ${containerName}` : "@media";
+        groupMediaKey && (styleInner = styleRule), styleInner.includes(prefix) ? styleRule = styleInner.replace("{", ` and ${mediaQuery} {`).replace("and screen and", "and") : styleRule = `${prefix} ${mediaQuery}{${precedenceImportancePrefix}${styleInner}}`, groupMediaKey && (styleRule = `@supports (contain: ${conf.settings.webContainerType || "inline-size"}) {${styleRule}}`);
+      }
+      return {
+        property,
+        rules: [styleRule],
+        identifier: nextIdentifier
+      };
+    };
+  }
+});
+
+// ../../node_modules/@react-native/normalize-color/index.js
+var require_normalize_color = __commonJS({
+  "../../node_modules/@react-native/normalize-color/index.js"(exports2, module2) {
+    "use strict";
+    function normalizeColor(color) {
+      if (typeof color == "number")
+        return color >>> 0 === color && color >= 0 && color <= 4294967295 ? color : null;
+      if (typeof color != "string")
+        return null;
+      let matchers = getMatchers(), match;
+      if (match = matchers.hex6.exec(color))
+        return parseInt(match[1] + "ff", 16) >>> 0;
+      let colorFromKeyword = normalizeKeyword(color);
+      return colorFromKeyword ?? ((match = matchers.rgb.exec(color)) ? (parse255(match[1]) << 24 | // r
+      parse255(match[2]) << 16 | // g
+      parse255(match[3]) << 8 | // b
+      255) >>> // a
+      0 : (match = matchers.rgba.exec(color)) ? match[6] !== void 0 ? (parse255(match[6]) << 24 | // r
+      parse255(match[7]) << 16 | // g
+      parse255(match[8]) << 8 | // b
+      parse1(match[9])) >>> // a
+      0 : (parse255(match[2]) << 24 | // r
+      parse255(match[3]) << 16 | // g
+      parse255(match[4]) << 8 | // b
+      parse1(match[5])) >>> // a
+      0 : (match = matchers.hex3.exec(color)) ? parseInt(
+        match[1] + match[1] + // r
         match[2] + match[2] + // g
         match[3] + match[3] + // b
         "ff",
@@ -3200,7 +3639,9 @@ var require_propMapper_native = __commonJS({
         let expanded = (0, import_expandStylesAndRemoveNullishValues.expandStylesAndRemoveNullishValues)(
           variantValue,
           !!styleProps.noNormalize
-        ), next = Object.entries(expanded);
+        );
+        process.env.NODE_ENV === "development" && debug === "verbose" && console.info("   expanding styles from ", variantValue, "to", expanded);
+        let next = Object.entries(expanded);
         return fontFamilyResult && fontFamilyResult[0] === "$" && fontFamilyCache.set(next, (0, import_createVariable.getVariableValue)(fontFamilyResult)), next;
       }
     };
@@ -3238,7 +3679,7 @@ var require_propMapper_native = __commonJS({
           continue;
         }
         if ((0, import_createVariable.isVariable)(val)) {
-          res[subKey] = resolveVariableValue(subKey, val, styleProps.resolveValues);
+          res[subKey] = resolveVariableValue(subKey, val, styleProps.resolveValues), process.env.NODE_ENV === "development" && debug === "verbose" && console.info("variable", subKey, res[subKey]);
           continue;
         }
         if (typeof val == "string") {
@@ -3741,576 +4182,142 @@ current`, {
         }
         console.groupEnd();
       }
-      return result;
-    };
-    function mergeStyle(styleState, key, val, disableNormalize = !1) {
-      let { classNames, viewProps, style, usedKeys, styleProps } = styleState;
-      if (import_constants4.isWeb && (val == null ? void 0 : val[0]) === "_")
-        classNames[key] = val, usedKeys[key] ||= 1;
-      else if (key in import_helpers.stylePropsTransform)
-        styleState.transforms ||= {}, styleState.transforms[key] = val;
-      else {
-        let out = import_constants4.isWeb && !disableNormalize && !styleProps.noNormalize ? (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(val, key) : val;
-        key in import_helpers.validStylesOnBaseProps ? viewProps[key] = out : style[key] = out;
-      }
-    }
-    var getSubStyle = (styleState, subKey, styleIn, avoidMergeTransform) => {
-      let { staticConfig, props, conf: conf2, styleProps } = styleState, styleOut = {};
-      for (let key in styleIn) {
-        let val = styleIn[key];
-        key = conf2.shorthands[key] || key;
-        let expanded = (0, import_propMapper.propMapper)(key, val, styleState, { ...props, ...props[subKey] });
-        if (!(!expanded || !staticConfig.isHOC && key in skipProps && !styleProps.noSkip))
-          for (let [skey, sval] of expanded)
-            !avoidMergeTransform && skey in import_helpers.stylePropsTransform ? mergeTransform(styleOut, skey, sval) : styleOut[skey] = styleProps.noNormalize ? sval : (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(sval, key);
-      }
-      return styleProps.noNormalize || (0, import_expandStyles.fixStyles)(styleOut), styleOut;
-    };
-    function mergeStylePropIntoStyle(styleState, cur) {
-      if (!cur)
-        return;
-      let styles = Array.isArray(cur) ? cur : [cur];
-      for (let style of styles) {
-        if (!style)
-          continue;
-        let isRNW = style.$$css;
-        Object.assign(isRNW ? styleState.classNames : styleState.style, style);
-      }
-    }
-    var useInsertEffectCompat = import_constants4.isWeb ? import_react2.useInsertionEffect || import_constants4.useIsomorphicLayoutEffect : () => {
-    }, useSplitStyles = (...args) => {
-      let res = getSplitStyles(...args);
-      return useInsertEffectCompat(() => {
-        (0, import_insertStyleRule.insertStyleRules)(res.rulesToInsert);
-      }, [res.rulesToInsert]), res;
-    }, animatableDefaults = {
-      opacity: 1,
-      scale: 1,
-      rotate: "0deg",
-      rotateY: "0deg",
-      rotateX: "0deg",
-      x: 0,
-      y: 0
-    }, lowercaseHyphenate = (match) => `-${match.toLowerCase()}`, hyphenate = (str) => str.replace(/[A-Z]/g, lowercaseHyphenate), mergeTransform = (obj, key, val, backwards = !1) => {
-      typeof obj.transform != "string" && (obj.transform ||= [], obj.transform[backwards ? "unshift" : "push"]({
-        [mapTransformKeys[key] || key]: val
-      }));
-    }, mapTransformKeys = {
-      x: "translateX",
-      y: "translateY"
-    }, skipProps = {
-      untilMeasured: 1,
-      animation: 1,
-      space: 1,
-      animateOnly: 1,
-      disableClassName: 1,
-      debug: 1,
-      componentName: 1,
-      disableOptimization: 1,
-      tag: 1,
-      style: 1,
-      // handled after loop so pseudos set usedKeys and override it if necessary
-      group: 1
-    };
-    process.env.NODE_ENV === "test" && (skipProps["data-test-renders"] = 1);
-    Object.assign(skipProps, {
-      whiteSpace: 1,
-      wordWrap: 1,
-      textOverflow: 1,
-      textDecorationDistance: 1,
-      cursor: 1,
-      contain: 1,
-      boxSizing: 1,
-      boxShadow: 1,
-      outlineStyle: 1,
-      outlineOffset: 1,
-      outlineWidth: 1,
-      outlineColor: 1
-    });
-    function passDownProp(viewProps, key, val, shouldMergeObject = !1) {
-      if (shouldMergeObject) {
-        let next = {
-          ...viewProps[key],
-          ...val
-        };
-        delete viewProps[key], viewProps[key] = next;
-      } else
-        viewProps[key] = val;
-    }
-  }
-});
-
-// ../web/dist/cjs/helpers/mergeProps.native.js
-var require_mergeProps_native = __commonJS({
-  "../web/dist/cjs/helpers/mergeProps.native.js"(exports2, 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), mergeProps_exports = {};
-    __export2(mergeProps_exports, {
-      mergeProps: () => mergeProps
-    });
-    module2.exports = __toCommonJS2(mergeProps_exports);
-    var import_useMedia = require_useMedia_native(), import_pseudoDescriptors = require_pseudoDescriptors_native(), mergeProps = (a, b, inverseShorthands) => {
-      let out = {};
-      for (let key in a)
-        mergeProp(out, a, b, key, inverseShorthands);
-      if (b)
-        for (let key in b)
-          mergeProp(out, b, void 0, key, inverseShorthands);
-      return out;
-    };
-    function mergeProp(out, a, b, key, inverseShorthands) {
-      let longhand = (inverseShorthands == null ? void 0 : inverseShorthands[key]) || null, val = a[key];
-      if (key in import_pseudoDescriptors.pseudoDescriptors || import_useMedia.mediaKeys.has(key)) {
-        out[key] = {
-          ...out[key],
-          ...val
-        };
-        return;
-      }
-      b && (key in b || longhand && longhand in b) || (out[longhand || key] = val);
-    }
-  }
-});
-
-// ../web/dist/cjs/helpers/ThemeManagerContext.native.js
-var require_ThemeManagerContext_native = __commonJS({
-  "../web/dist/cjs/helpers/ThemeManagerContext.native.js"(exports2, 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), ThemeManagerContext_exports = {};
-    __export2(ThemeManagerContext_exports, {
-      ThemeManagerIDContext: () => ThemeManagerIDContext
-    });
-    module2.exports = __toCommonJS2(ThemeManagerContext_exports);
-    var import_react2 = require("react"), ThemeManagerIDContext = (0, import_react2.createContext)(1);
-  }
-});
-
-// ../web/dist/cjs/helpers/ThemeManager.native.js
-var require_ThemeManager_native = __commonJS({
-  "../web/dist/cjs/helpers/ThemeManager.native.js"(exports2, 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), ThemeManager_exports = {};
-    __export2(ThemeManager_exports, {
-      ThemeManager: () => ThemeManager,
-      getHasThemeUpdatingProps: () => getHasThemeUpdatingProps,
-      getManagers: () => getManagers
-    });
-    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);
-    }
-    var uid = 0, ThemeManager = class {
-      constructor(props = {}, parentManager) {
-        if (this.props = props, this.id = 0, this.themeListeners = /* @__PURE__ */ new Set(), this.parentManager = null, this.state = emptyState, this._allKeys = null, uid = (uid + 1) % Number.MAX_VALUE, this.id = uid, parentManager === "root") {
-          this.updateStateFromProps(props, !1);
-          return;
-        }
-        if (!parentManager)
-          throw process.env.NODE_ENV !== "production" ? new Error(
-            "No parent manager given, this is likely due to duplicated Tamagui dependencies. Check your lockfile for mis-matched versions. It could also be from an error somewhere else in your stack causing Tamagui to recieve undefined context, you can try putting some ErrorBoundary components around other areas of your app, or a Suspense boundary."
-          ) : "\u274C 000";
-        if (this.parentManager = parentManager, !this.updateStateFromProps(props, !1))
-          return parentManager;
-      }
-      updateStateFromProps(props = this.props || {}, shouldNotify = !0) {
-        if (this.props = props, props.forceTheme)
-          return this.state.theme = props.forceTheme, this.state.name = props.name || "", this.updateState(this.state, !0), this.state;
-        let nextState = this.getStateIfChanged(props);
-        if (nextState)
-          return this.updateState(nextState, shouldNotify), nextState;
-      }
-      updateState(nextState, shouldNotify = !0) {
-        this.state = nextState, this._allKeys = null, process.env.NODE_ENV !== "production" && (this._numChangeEventsSent ??= 0, this._numChangeEventsSent++), shouldNotify && this.notify();
-      }
-      getStateIfChanged(props = this.props, state = this.state, parentManager = this.parentManager) {
-        let _ = this.getState(props, parentManager);
-        if (state && state !== emptyState && !_)
-          return parentManager == null ? void 0 : parentManager.state;
-        if (this.getStateShouldChange(_, state))
-          return _;
-      }
-      getStateShouldChange(nextState, state = this.state) {
-        return !(!(nextState != null && nextState.theme) || nextState.theme === (state == null ? void 0 : state.theme));
-      }
-      getState(props = this.props, parentManager = this.parentManager) {
-        return getState(props, parentManager) || (parentManager == null ? void 0 : parentManager.state) || null;
-      }
-      get allKeys() {
-        var _a;
-        return this._allKeys ||= /* @__PURE__ */ new Set([
-          ...((_a = this.parentManager) == null ? void 0 : _a.allKeys) || [],
-          ...Object.keys(this.state.theme || {})
-        ]), this._allKeys;
-      }
-      notify(forced = !1) {
-        this.themeListeners.forEach((cb) => cb(this.state.name, this, forced));
-      }
-      onChangeTheme(cb, debugId) {
-        return process.env.NODE_ENV !== "production" && debugId && (this._listeningIds ??= /* @__PURE__ */ new Set(), this._listeningIds.add(debugId)), this.themeListeners.add(cb), () => {
-          this.themeListeners.delete(cb);
-        };
-      }
-    };
-    function getState(props, manager) {
-      var _a;
-      if (props.name && props.reset)
-        throw new Error(
-          process.env.NODE_ENV === "production" ? "\u274C004" : "Cannot reset and set a new name at the same time."
-        );
-      if (!getHasThemeUpdatingProps(props))
-        return null;
-      let themes = (0, import_config.getThemes)(), [allManagers, componentManagers] = getManagers(manager), isDirectParentAComponentTheme = !!(manager != null && manager.state.isComponent), startIndex = props.reset && !isDirectParentAComponentTheme ? 1 : 0, baseManager = allManagers[startIndex], parentManager = allManagers[startIndex + 1];
-      if (!baseManager && props.reset)
-        return process.env.NODE_ENV !== "production" && console.warn("Cannot reset, no parent theme exists"), null;
-      let { componentName } = props, result = null, baseName = (baseManager == null ? void 0 : baseManager.state.name) || "";
-      baseManager != null && baseManager.state.isComponent && (baseName = baseName.replace(/_[A-Z][A-Za-z]+/, ""));
-      let nextName = props.reset ? baseName : props.name || "", allComponentThemes = componentManagers.map((x) => (x == null ? void 0 : x.state.name) || "");
-      isDirectParentAComponentTheme && allComponentThemes.shift();
-      let base = baseName.split(import_constants22.THEME_NAME_SEPARATOR), max2 = base.length, min2 = props.componentName && !nextName ? max2 : 0;
-      for (let i = max2; i >= min2; i--) {
-        let prefix = base.slice(0, i).join(import_constants22.THEME_NAME_SEPARATOR);
-        props.inverse && (prefix = inverseThemeName(prefix));
-        let potentials = [];
-        if (prefix && prefix !== baseName && potentials.push(prefix), nextName && potentials.unshift(prefix ? `${prefix}_${nextName}` : nextName), i === 1) {
-          let lastSegment = potentials.findIndex((x) => !x.includes("_"));
-          lastSegment > 0 && potentials.splice(lastSegment, 0, nextName);
-        }
-        if (componentName && !props.reset) {
-          let baseLen = base.length, componentPotentials = [];
-          if (nextName && baseLen > 1) {
-            let beforeSeparator = base[0];
-            componentPotentials.push(`${beforeSeparator}_${nextName}_${componentName}`);
-          }
-          if (componentPotentials.push(`${prefix}_${componentName}`), nextName) {
-            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);
-          }
-          potentials = [...componentPotentials, ...potentials, ...allComponentThemes];
-        }
-        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,
-          nextName,
-          baseName,
-          prefix
-        }), found) {
-          let names = found.split("_"), [firstName, ...restNames] = names, lastName = names[names.length - 1], isComponent = lastName[0] === lastName[0].toUpperCase(), scheme = firstName === "light" ? "light" : firstName === "dark" ? "dark" : void 0, pre = import_constants22.THEME_CLASSNAME_PREFIX, className = import_constants4.isWeb ? `${pre}sub_theme ${pre}${!scheme || !restNames.length ? firstName : restNames.join("_")}` : "", parentState = (_a = baseManager || parentManager) == null ? void 0 : _a.state, parentName = parentState == null ? void 0 : parentState.name;
-          result = {
-            name: found,
-            parentName,
-            theme: themes[found],
-            className,
-            isComponent,
-            scheme
-          };
-          break;
-        }
-      }
-      return process.env.NODE_ENV !== "production" && props.debug === "verbose" && typeof window < "u" && (console.groupCollapsed("ThemeManager.getState()"), console.info({ props, baseName, base, min: min2, max: max2 }), console.warn("result", { result }), console.trace(), console.groupEnd()), result;
-    }
-    var inverseThemeName = (themeName) => themeName.startsWith("light") ? themeName.replace(/^light/, "dark") : themeName.replace(/^dark/, "light");
-    function getManagers(themeManager) {
-      let comp = [], all = [], cur = themeManager;
-      for (; cur; )
-        all.push(cur), cur.state.isComponent && comp.push(cur), cur = cur.parentManager;
-      return [all, comp];
-    }
-  }
-});
-
-// ../web/dist/cjs/hooks/useTheme.native.js
-var require_useTheme_native = __commonJS({
-  "../web/dist/cjs/hooks/useTheme.native.js"(exports2, 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), useTheme_exports = {};
-    __export2(useTheme_exports, {
-      activeThemeManagers: () => activeThemeManagers,
-      getThemeManager: () => getThemeManager,
-      getThemeProxied: () => getThemeProxied,
-      useChangeThemeEffect: () => useChangeThemeEffect,
-      useTheme: () => useTheme4,
-      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_createShallowSetState = require_createShallowSetState_native(), import_ThemeManager = require_ThemeManager_native(), import_ThemeManagerContext = require_ThemeManagerContext_native(), emptyProps = { name: null }, cached;
-    function getDefaultThemeProxied() {
-      if (cached)
-        return cached;
-      let config = (0, import_config.getConfig)(), name = config.themes.light ? "light" : Object.keys(config.themes)[0], defaultTheme = config.themes[name];
-      return cached = getThemeProxied({ theme: defaultTheme, name }), cached;
-    }
-    var useTheme4 = (props = emptyProps) => {
-      let [_, theme] = useThemeWithState(props);
-      return theme || getDefaultThemeProxied();
-    }, useThemeWithState = (props) => {
-      let keys = (0, import_react2.useRef)([]), changedThemeState = useChangeThemeEffect(
-        props,
-        !1,
-        keys.current,
-        import_constants4.isServer ? void 0 : () => {
-          var _a, _b;
-          let next = ((_a = props.shouldUpdate) == null ? void 0 : _a.call(props)) ?? (keys.current.length > 0 ? !0 : void 0);
-          return process.env.NODE_ENV === "development" && typeof props.debug == "string" && props.debug !== "profile" && console.info("  \u{1F3A8} useTheme() shouldUpdate?", next, {
-            shouldUpdateProp: (_b = props.shouldUpdate) == null ? void 0 : _b.call(props),
-            keys: [...keys.current]
-          }), next;
-        }
-      ), { themeManager, state } = changedThemeState;
-      process.env.NODE_ENV === "development" && (state != null && state.theme || process.env.TAMAGUI_DISABLE_NO_THEME_WARNING !== "1" && console.warn(
-        `[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`
-      ));
-      let themeProxied = (0, import_react2.useMemo)(() => !themeManager || !(state != null && state.theme) ? {} : getThemeProxied(state, props.deopt, themeManager, keys.current, props.debug), [state == null ? void 0 : state.theme, themeManager, props.deopt, props.debug]);
-      return process.env.NODE_ENV === "development" && props.debug === "verbose" && (console.groupCollapsed("  \u{1F539} useTheme =>", state == null ? void 0 : state.name), console.info("returning state", changedThemeState, "from props", props), console.groupEnd()), [changedThemeState, themeProxied];
-    };
-    function getThemeProxied({ theme, name, scheme }, deopt = !1, themeManager, keys, debug) {
-      if (!theme)
-        return {};
-      let config = (0, import_config.getConfig)();
-      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 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"
-          ) {
-            let 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")
-                    track(keyString);
-                  else if (subkey === "get")
-                    return (platform) => {
-                      let outVal = (0, import_createVariable.getVariable)(val);
-                      if (platform !== "web" && import_constants4.isIos && !deopt && config.settings.fastSchemeChange && !someParentIsInversed(themeManager) && scheme) {
-                        let oppositeThemeName = name.replace(
-                          scheme === "dark" ? "dark" : "light",
-                          scheme === "dark" ? "light" : "dark"
-                        ), oppositeTheme = config.themes[oppositeThemeName], oppositeVal = (0, import_createVariable.getVariable)(oppositeTheme == null ? void 0 : oppositeTheme[keyString]);
-                        if (oppositeVal)
-                          return {
-                            dynamic: {
-                              dark: scheme === "dark" ? outVal : oppositeVal,
-                              light: scheme === "light" ? outVal : oppositeVal
-                            }
-                          };
-                      }
-                      return 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(", ")}`
-              );
-          }
-          return Reflect.get(_, key);
-        }
-      });
-    }
-    function someParentIsInversed(manager) {
-      {
-        let cur = manager;
-        for (; cur; ) {
-          if (!cur.parentManager)
-            return !1;
-          if (cur.parentManager.state.scheme !== cur.state.scheme)
-            return !0;
-          cur = cur.parentManager;
-        }
-      }
-      return !1;
+      return result;
+    };
+    function mergeStyle(styleState, key, val, disableNormalize = !1) {
+      let { classNames, viewProps, style, usedKeys, styleProps } = styleState;
+      if (import_constants4.isWeb && (val == null ? void 0 : val[0]) === "_")
+        classNames[key] = val, usedKeys[key] ||= 1;
+      else if (key in import_helpers.stylePropsTransform)
+        styleState.transforms ||= {}, styleState.transforms[key] = val;
+      else {
+        let out = import_constants4.isWeb && !disableNormalize && !styleProps.noNormalize ? (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(val, key) : val;
+        key in import_helpers.validStylesOnBaseProps ? viewProps[key] = out : style[key] = out;
+      }
     }
-    var activeThemeManagers = /* @__PURE__ */ new Set(), _uidToManager = /* @__PURE__ */ new WeakMap(), _idToUID = {}, getId = (id) => _idToUID[id], getThemeManager = (id) => _uidToManager.get(getId(id)), registerThemeManager = (t) => {
-      if (!_idToUID[t.id]) {
-        let id = _idToUID[t.id] = {};
-        _uidToManager.set(id, t);
+    var getSubStyle = (styleState, subKey, styleIn, avoidMergeTransform) => {
+      let { staticConfig, props, conf: conf2, styleProps } = styleState, styleOut = {};
+      for (let key in styleIn) {
+        let val = styleIn[key];
+        key = conf2.shorthands[key] || key;
+        let expanded = (0, import_propMapper.propMapper)(key, val, styleState, { ...props, ...props[subKey] });
+        if (!(!expanded || !staticConfig.isHOC && key in skipProps && !styleProps.noSkip))
+          for (let [skey, sval] of expanded)
+            !avoidMergeTransform && skey in import_helpers.stylePropsTransform ? mergeTransform(styleOut, skey, sval) : styleOut[skey] = styleProps.noNormalize ? sval : (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(sval, key);
       }
-    }, useChangeThemeEffect = (props, isRoot = !1, keys, shouldUpdate) => {
-      let { disable } = props, parentManagerId = (0, import_react2.useContext)(import_ThemeManagerContext.ThemeManagerIDContext), parentManager = getThemeManager(parentManagerId);
-      if (!isRoot && !parentManager || disable)
-        return {
-          isNewTheme: !1,
-          state: parentManager == null ? void 0 : parentManager.state,
-          themeManager: parentManager
-        };
-      let [themeState, setThemeState] = (0, import_react2.useState)(createState), { state, mounted, isNewTheme, themeManager, inversed } = themeState, isInversingOnMount = !!(!themeState.mounted && props.inverse);
-      function getShouldUpdateTheme(manager = themeManager, nextState, prevState = state, forceShouldChange = !1) {
-        let forceUpdate = shouldUpdate == null ? void 0 : shouldUpdate();
-        if (!manager || !forceShouldChange && forceUpdate === !1)
-          return;
-        let next = nextState || manager.getState(props, parentManager);
-        if (forceShouldChange || next && !(forceUpdate !== !0 && !manager.getStateShouldChange(next, prevState)))
-          return next;
+      return styleProps.noNormalize || (0, import_expandStyles.fixStyles)(styleOut), styleOut;
+    };
+    function mergeStylePropIntoStyle(styleState, cur) {
+      if (!cur)
+        return;
+      let styles = Array.isArray(cur) ? cur : [cur];
+      for (let style of styles) {
+        if (!style)
+          continue;
+        let isRNW = style.$$css;
+        Object.assign(isRNW ? styleState.classNames : styleState.style, style);
       }
-      if (import_constants4.isServer || ((0, import_react2.useEffect)(() => {
-        if (!themeManager)
-          return;
-        if (props.inverse && !mounted) {
-          setThemeState((prev) => createState({
-            ...prev,
-            mounted: !0
-          }));
-          return;
-        }
-        (isNewTheme || getShouldUpdateTheme(themeManager)) && (activeThemeManagers.add(themeManager), setThemeState(createState));
-        let selfListenerDispose = themeManager.onChangeTheme((_a, _b, forced) => {
-          forced && setThemeState((prev) => createState(prev, !0));
-        }), disposeChangeListener = parentManager == null ? void 0 : parentManager.onChangeTheme(
-          (name, manager, forced) => {
-            let force = forced || (shouldUpdate == null ? void 0 : shouldUpdate()) || props.deopt || props["disable-child-theme"], shouldTryUpdate = force ?? !!(keys != null && keys.length || isNewTheme);
-            process.env.NODE_ENV === "development" && props.debug === "verbose" && console.info(" \u{1F538} onChange", themeManager.id, {
-              force,
-              shouldTryUpdate,
-              props,
-              name,
-              manager,
-              keys
-            }), shouldTryUpdate && setThemeState((prev) => createState(prev, force));
-          },
-          themeManager.id
-        );
-        return () => {
-          selfListenerDispose(), disposeChangeListener == null || disposeChangeListener(), isNewTheme && activeThemeManagers.delete(themeManager);
+    }
+    var useInsertEffectCompat = import_constants4.isWeb ? import_react2.useInsertionEffect || import_constants4.useIsomorphicLayoutEffect : () => {
+    }, useSplitStyles = (...args) => {
+      let res = getSplitStyles(...args);
+      return useInsertEffectCompat(() => {
+        (0, import_insertStyleRule.insertStyleRules)(res.rulesToInsert);
+      }, [res.rulesToInsert]), res;
+    }, animatableDefaults = {
+      opacity: 1,
+      scale: 1,
+      rotate: "0deg",
+      rotateY: "0deg",
+      rotateX: "0deg",
+      x: 0,
+      y: 0
+    }, lowercaseHyphenate = (match) => `-${match.toLowerCase()}`, hyphenate = (str) => str.replace(/[A-Z]/g, lowercaseHyphenate), mergeTransform = (obj, key, val, backwards = !1) => {
+      typeof obj.transform != "string" && (obj.transform ||= [], obj.transform[backwards ? "unshift" : "push"]({
+        [mapTransformKeys[key] || key]: val
+      }));
+    }, mapTransformKeys = {
+      x: "translateX",
+      y: "translateY"
+    }, skipProps = {
+      untilMeasured: 1,
+      animation: 1,
+      space: 1,
+      animateOnly: 1,
+      disableClassName: 1,
+      debug: 1,
+      componentName: 1,
+      disableOptimization: 1,
+      tag: 1,
+      style: 1,
+      // handled after loop so pseudos set usedKeys and override it if necessary
+      group: 1
+    };
+    process.env.NODE_ENV === "test" && (skipProps["data-test-renders"] = 1);
+    Object.assign(skipProps, {
+      whiteSpace: 1,
+      wordWrap: 1,
+      textOverflow: 1,
+      textDecorationDistance: 1,
+      cursor: 1,
+      contain: 1,
+      boxSizing: 1,
+      boxShadow: 1,
+      outlineStyle: 1,
+      outlineOffset: 1,
+      outlineWidth: 1,
+      outlineColor: 1
+    });
+    function passDownProp(viewProps, key, val, shouldMergeObject = !1) {
+      if (shouldMergeObject) {
+        let next = {
+          ...viewProps[key],
+          ...val
         };
-      }, [
-        themeManager,
-        parentManager,
-        isNewTheme,
-        props.componentName,
-        props.inverse,
-        props.name,
-        props.reset,
-        mounted
-      ]), process.env.NODE_ENV === "development" && props.debug !== "profile" && (0, import_react2.useEffect)(() => (globalThis.TamaguiThemeManagers ??= /* @__PURE__ */ new Set(), globalThis.TamaguiThemeManagers.add(themeManager), () => {
-        globalThis.TamaguiThemeManagers.delete(themeManager);
-      }), [themeManager])), isInversingOnMount)
-        return {
-          isNewTheme: !1,
-          inversed: !1,
-          themeManager: parentManager,
-          state: {
-            name: "",
-            ...parentManager == null ? void 0 : parentManager.state,
-            className: ""
-          }
+        delete viewProps[key], viewProps[key] = next;
+      } else
+        viewProps[key] = val;
+    }
+  }
+});
+
+// ../web/dist/cjs/helpers/mergeProps.native.js
+var require_mergeProps_native = __commonJS({
+  "../web/dist/cjs/helpers/mergeProps.native.js"(exports2, 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), mergeProps_exports = {};
+    __export2(mergeProps_exports, {
+      mergeProps: () => mergeProps
+    });
+    module2.exports = __toCommonJS2(mergeProps_exports);
+    var import_useMedia = require_useMedia_native(), import_pseudoDescriptors = require_pseudoDescriptors_native(), mergeProps = (a, b, inverseShorthands) => {
+      let out = {};
+      for (let key in a)
+        mergeProp(out, a, b, key, inverseShorthands);
+      if (b)
+        for (let key in b)
+          mergeProp(out, b, void 0, key, inverseShorthands);
+      return out;
+    };
+    function mergeProp(out, a, b, key, inverseShorthands) {
+      let longhand = (inverseShorthands == null ? void 0 : inverseShorthands[key]) || null, val = a[key];
+      if (key in import_pseudoDescriptors.pseudoDescriptors || import_useMedia.mediaKeys.has(key)) {
+        out[key] = {
+          ...out[key],
+          ...val
         };
-      return {
-        state,
-        isNewTheme,
-        inversed,
-        themeManager
-      };
-      function createState(prev, force = !1) {
-        if (prev && (shouldUpdate == null ? void 0 : shouldUpdate()) === !1 && !force)
-          return prev;
-        let themeManager2 = parentManager, state2;
-        if ((0, import_ThemeManager.getHasThemeUpdatingProps)(props)) {
-          let getNewThemeManager = () => new import_ThemeManager.ThemeManager(props, isRoot ? "root" : parentManager);
-          if (prev != null && prev.themeManager) {
-            themeManager2 = prev.themeManager;
-            let forceChange = force || !!(keys != null && keys.length), next = themeManager2.getState(props, parentManager), nextState = getShouldUpdateTheme(
-              themeManager2,
-              next,
-              prev.state,
-              forceChange
-            );
-            nextState ? (state2 = nextState, prev.isNewTheme ? themeManager2.updateState(nextState) : themeManager2 = getNewThemeManager()) : prev.isNewTheme && parentManager && !next && (themeManager2 = parentManager);
-          } else
-            themeManager2 = getNewThemeManager(), state2 = { ...themeManager2.state };
-        }
-        let isNewTheme2 = !!(themeManager2 !== parentManager || props.inverse);
-        isNewTheme2 && registerThemeManager(themeManager2);
-        let 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 != null ? !1 : null, response = {
-          themeManager: themeManager2,
-          isNewTheme: isNewTheme2,
-          mounted: mounted2,
-          inversed: inversed2
-        }, shouldReturnPrev = prev && !force && // isEqualShallow uses the second arg as the keys so this should compare without state first...
-        (0, import_createShallowSetState.isEqualShallow)(prev, response) && // ... and then compare just the state, because we make a new state obj but is likely the same
-        (0, import_createShallowSetState.isEqualShallow)(prev.state, state2);
-        if (prev && shouldReturnPrev)
-          return prev;
-        if (response.state = state2, process.env.NODE_ENV === "development" && props.debug && import_constants4.isClient) {
-          console.groupCollapsed(` \u{1F537} ${themeManager2.id} useChangeThemeEffect createState`);
-          let parentState = { ...parentManager == null ? void 0 : parentManager.state }, parentId = parentManager == null ? void 0 : parentManager.id, themeManagerState = { ...themeManager2.state };
-          console.info({
-            props,
-            parentState,
-            parentId,
-            themeManager: themeManager2,
-            prev,
-            response,
-            themeManagerState
-          }), console.groupEnd();
-        }
-        return response;
+        return;
       }
-    };
+      b && (key in b || longhand && longhand in b) || (out[longhand || key] = val);
+    }
   }
 });
 
@@ -15114,7 +15121,7 @@ var require_Popper_native = __commonJS({
       usePopperContext: () => usePopperContext
     });
     module2.exports = __toCommonJS2(Popper_exports);
-    var import_compose_refs = require_index_native10(), import_constants4 = require_index_native(), import_constants22 = require_index_native(), import_core13 = require_index_native15(), import_floating = require_index_native53(), import_get_token2 = require_index_native17(), import_stacks3 = require_index_native19(), React2 = __toESM2(require("react")), import_react_native4 = require("react-native"), import_jsx_runtime6 = require("react/jsx-runtime"), PopperContext = (0, import_core13.createStyledContext)({}), { useStyledContext: usePopperContext, Provider: PopperProvider } = PopperContext;
+    var import_compose_refs = require_index_native10(), import_constants4 = require_index_native(), import_core13 = require_index_native15(), import_floating = require_index_native53(), import_get_token2 = require_index_native17(), import_stacks3 = require_index_native19(), React2 = __toESM2(require("react")), import_react_native4 = require("react-native"), import_jsx_runtime6 = require("react/jsx-runtime"), PopperContext = (0, import_core13.createStyledContext)({}), { useStyledContext: usePopperContext, Provider: PopperProvider } = PopperContext;
     function Popper(props) {
       let {
         children,
@@ -15126,7 +15133,7 @@ var require_Popper_native = __commonJS({
         offset: offset2,
         __scopePopper
       } = props, [isMounted, setIsMounted] = React2.useState(!1);
-      (0, import_constants22.useIsomorphicLayoutEffect)(() => {
+      (0, import_constants4.useIsomorphicLayoutEffect)(() => {
         setIsMounted(!0);
       }, []);
       let [anchorRef, setAnchorRef] = React2.useState(), [arrowEl, setArrow] = React2.useState(null), [arrowSize, setArrowSize] = React2.useState(0), offsetOptions = offset2 ?? arrowSize, floating = (0, import_floating.useFloating)({
@@ -15146,10 +15153,10 @@ var require_Popper_native = __commonJS({
         // @ts-expect-error this comes from Tooltip for example
         open
       } = floating;
-      if ((0, import_constants22.useIsomorphicLayoutEffect)(() => {
+      if ((0, import_constants4.useIsomorphicLayoutEffect)(() => {
         floating.refs.setReference(anchorRef);
       }, [anchorRef]), import_constants4.isWeb)
-        (0, import_constants22.useIsomorphicLayoutEffect)(() => {
+        (0, import_constants4.useIsomorphicLayoutEffect)(() => {
           if (open && refs.reference.current && refs.floating.current)
             return (0, import_floating.autoUpdate)(refs.reference.current, refs.floating.current, floating.update);
         }, [open, floating.update, refs.floating, refs.reference]);
@@ -15164,7 +15171,7 @@ var require_Popper_native = __commonJS({
           return () => {
             showSubscription.remove(), hideSubscription.remove();
           };
-        }, []), (0, import_constants22.useIsomorphicLayoutEffect)(() => {
+        }, []), (0, import_constants4.useIsomorphicLayoutEffect)(() => {
           floating.update();
         }, [dimensions, keyboardOpen]);
       }
@@ -15235,7 +15242,7 @@ var require_Popper_native = __commonJS({
       ), [placement, strategy, props]), [hasInitialPosition, setHasInitialPosition] = React2.useState(!0);
       if (React2.useEffect(() => {
         (x || y) && setHasInitialPosition(!1);
-      }, [x, y]), (0, import_constants22.useIsomorphicLayoutEffect)(() => {
+      }, [x, y]), (0, import_constants4.useIsomorphicLayoutEffect)(() => {
         isMounted && update();
       }, [isMounted]), !isMounted)
         return null;
@@ -15254,7 +15261,7 @@ var require_Popper_native = __commonJS({
           animateOnly: rest.animateOnly
         }
       };
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_stacks3.YStack, { ...getFloatingProps ? getFloatingProps(frameProps) : frameProps, children: contents });
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core13.Stack, { ...getFloatingProps ? getFloatingProps(frameProps) : frameProps, children: contents });
     }), PopperArrowFrame = (0, import_core13.styled)(import_stacks3.YStack, {
       name: "PopperArrow",
       variants: {
@@ -15302,7 +15309,7 @@ var require_Popper_native = __commonJS({
       if (primaryPlacement) {
         arrowStyle[isVertical ? "width" : "height"] = size2 * 2;
         let oppSide = opposites[primaryPlacement];
-        oppSide && (arrowStyle[oppSide] = -size2, innerArrowStyle[oppSide] = size2 / 2), oppSide === "bottom" && (arrowStyle[oppSide] += 1), (oppSide === "top" || oppSide === "bottom") && (arrowStyle.left = 0), (oppSide === "left" || oppSide === "right") && (arrowStyle.top = 0), (0, import_constants22.useIsomorphicLayoutEffect)(() => {
+        oppSide && (arrowStyle[oppSide] = -size2, innerArrowStyle[oppSide] = size2 / 2), oppSide === "bottom" && (arrowStyle[oppSide] += 1), (oppSide === "top" || oppSide === "bottom") && (arrowStyle.left = 0), (oppSide === "left" || oppSide === "right") && (arrowStyle.top = 0), (0, import_constants4.useIsomorphicLayoutEffect)(() => {
           var _a2;
           (_a2 = context.onArrowSize) == null || _a2.call(context, size2);
         }, [size2, context.onArrowSize]);