@tamagui/core 1.123.17 → 1.124.0

package/dist/native.js

@@ -2211,80 +2211,11 @@ var require_useMedia_native = __commonJS({
   }
 });
 
-// ../web/dist/cjs/constants/constants.native.js
-var require_constants_native2 = __commonJS({
-  "../web/dist/cjs/constants/constants.native.js"(exports2, module2) {
-    "use strict";
-    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = function(target, all) {
-      for (var name in all) __defProp2(target, name, {
-        get: all[name],
-        enumerable: !0
-      });
-    }, __copyProps2 = function(to, from, except, desc) {
-      var _iteratorNormalCompletion = !0, _didIteratorError = !1, _iteratorError = void 0;
-      if (from && typeof from == "object" || typeof from == "function") try {
-        for (var _loop = function() {
-          var key = _step.value;
-          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, {
-            get: function() {
-              return from[key];
-            },
-            enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable
-          });
-        }, _iterator = __getOwnPropNames2(from)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0) _loop();
-      } catch (err) {
-        _didIteratorError = !0, _iteratorError = err;
-      } finally {
-        try {
-          !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
-        } finally {
-          if (_didIteratorError)
-            throw _iteratorError;
-        }
-      }
-      return to;
-    }, __toCommonJS2 = function(mod) {
-      return __copyProps2(__defProp2({}, "__esModule", {
-        value: !0
-      }), mod);
-    }, constants_exports = {};
-    __export2(constants_exports, {
-      FONT_DATA_ATTRIBUTE_NAME: function() {
-        return FONT_DATA_ATTRIBUTE_NAME;
-      },
-      THEME_CLASSNAME_PREFIX: function() {
-        return THEME_CLASSNAME_PREFIX;
-      },
-      THEME_NAME_SEPARATOR: function() {
-        return THEME_NAME_SEPARATOR;
-      },
-      stackDefaultStyles: function() {
-        return stackDefaultStyles;
-      },
-      webViewFlexCompatStyles: function() {
-        return webViewFlexCompatStyles;
-      }
-    });
-    module2.exports = __toCommonJS2(constants_exports);
-    var THEME_NAME_SEPARATOR = "_", THEME_CLASSNAME_PREFIX = "t_", FONT_DATA_ATTRIBUTE_NAME = "data-tamagui-font", stackDefaultStyles = {}, webViewFlexCompatStyles = {
-      display: "flex",
-      alignItems: "stretch",
-      flexDirection: "column",
-      flexBasis: "auto",
-      boxSizing: "border-box",
-      position: "relative",
-      minHeight: 0,
-      minWidth: 0,
-      flexShrink: 0
-    };
-  }
-});
-
-// ../web/dist/cjs/helpers/ThemeManager.native.js
-var require_ThemeManager_native = __commonJS({
-  "../web/dist/cjs/helpers/ThemeManager.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 = function(target, all) {
+    var __create2 = Object.create, __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __getProtoOf2 = Object.getPrototypeOf, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = function(target, all) {
       for (var name in all) __defProp2(target, name, {
         get: all[name],
         enumerable: !0
@@ -2312,24 +2243,36 @@ var require_ThemeManager_native = __commonJS({
         }
       }
       return to;
+    }, __toESM2 = function(mod, isNodeMode, target) {
+      return target = mod != null ? __create2(__getProtoOf2(mod)) : {}, __copyProps2(
+        // If the importer is in node compatibility mode or this is not an ESM
+        // file that has been converted to a CommonJS file using a Babel-
+        // compatible transform (i.e. "__esModule" has not been set), then set
+        // "default" to the CommonJS "module.exports" for node compatibility.
+        isNodeMode || !mod || !mod.__esModule ? __defProp2(target, "default", {
+          value: mod,
+          enumerable: !0
+        }) : target,
+        mod
+      );
     }, __toCommonJS2 = function(mod) {
       return __copyProps2(__defProp2({}, "__esModule", {
         value: !0
       }), mod);
-    }, ThemeManager_exports = {};
-    __export2(ThemeManager_exports, {
-      ThemeManager: function() {
-        return ThemeManager;
+    }, Tamagui_exports = {};
+    __export2(Tamagui_exports, {
+      Tamagui: function() {
+        return Tamagui;
       },
-      getHasThemeUpdatingProps: function() {
-        return getHasThemeUpdatingProps;
+      getValueFromIdentifier: function() {
+        return getValueFromIdentifier;
       },
-      getManagers: function() {
-        return getManagers;
+      setIdentifierValue: function() {
+        return setIdentifierValue;
       }
     });
-    module2.exports = __toCommonJS2(ThemeManager_exports);
-    var import_constants2 = require_index_native2(), import_config = require_config_native(), import_constants22 = require_constants_native2();
+    module2.exports = __toCommonJS2(Tamagui_exports);
+    var Helpers = __toESM2(require_index_native3()), import_config = require_config_native(), import_insertStyleRule = require_insertStyleRule_native(), import_useMedia = require_useMedia_native();
     function _class_call_check(instance, Constructor) {
       if (!(instance instanceof Constructor)) throw new TypeError("Cannot call a class as a function");
     }
@@ -2350,232 +2293,67 @@ var require_ThemeManager_native = __commonJS({
         writable: !0
       }) : obj[key] = value, obj;
     }
-    var emptyState = {
-      name: ""
-    };
-    function getHasThemeUpdatingProps(props) {
-      return !!(props.name || props.componentName || props.inverse || props.reset);
-    }
-    var uid = 0, ThemeManager = /* @__PURE__ */ function() {
-      "use strict";
-      function ThemeManager2() {
-        var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, parentManager = arguments.length > 1 ? arguments[1] : void 0;
-        if (_class_call_check(this, ThemeManager2), _define_property(this, "props", void 0), _define_property(this, "id", void 0), _define_property(this, "themeListeners", void 0), _define_property(this, "parentManager", void 0), _define_property(this, "state", void 0), _define_property(this, "_allKeys", void 0), _define_property(this, "_selfListener", void 0), 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;
-      }
-      return _create_class(ThemeManager2, [
-        {
-          key: "updateStateFromProps",
-          value: function() {
-            var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : this.props || {}, shouldNotify = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !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;
-            var nextState = this.getStateIfChanged(props);
-            if (nextState) return this.updateState(nextState, shouldNotify), nextState;
-          }
-        },
-        {
-          key: "getParents",
-          value: function() {
-            for (var parents = [], current = this; current; ) parents.push(current), current = current.parentManager;
-            return parents;
-          }
-        },
-        {
-          key: "updateState",
-          value: function(nextState) {
-            var shouldNotify = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !0;
-            this.state = nextState, this._allKeys = null;
-          }
-        },
-        {
-          // if (shouldNotify) {
-          //   if (process.env.TAMAGUI_TARGET === 'native') {
-          //     // native is way slower with queueMicrotask
-          //     this.notify()
-          //   } else {
-          //     // web is way faster this way
-          //     queueMicrotask(() => {
-          //       this.notify()
-          //     })
-          //   }
-          // }
-          key: "getStateIfChanged",
-          value: function() {
-            var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : this.props, state = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : this.state, parentManager = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : this.parentManager, _ = this.getState(props, parentManager);
-            if (state && state !== emptyState && !_) return parentManager == null ? void 0 : parentManager.state;
-            if (this.getStateShouldChange(_, state)) return _;
-          }
-        },
-        {
-          key: "getStateShouldChange",
-          value: function(nextState) {
-            var state = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : this.state;
-            return !(!(nextState != null && nextState.theme) || nextState.theme === (state == null ? void 0 : state.theme));
-          }
-        },
-        {
-          key: "getState",
-          value: function() {
-            var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : this.props, parentManager = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : this.parentManager, next = getState(props, parentManager) || (parentManager == null ? void 0 : parentManager.state) || null;
-            return next;
-          }
-        },
-        {
-          key: "allKeys",
-          get: function() {
-            var _this_parentManager;
-            return this._allKeys || (this._allKeys = /* @__PURE__ */ new Set([
-              ...((_this_parentManager = this.parentManager) === null || _this_parentManager === void 0 ? void 0 : _this_parentManager.allKeys) || [],
-              ...Object.keys(this.state.theme || {})
-            ])), this._allKeys;
-          }
-        },
-        {
-          key: "notify",
-          value: function() {
-            var _this = this, forced = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : !1;
-            if (this.themeListeners.forEach(function(cb) {
-              return cb(_this.state.name, _this, forced);
-            }), process.env.NODE_ENV !== "production") {
-              var _numChangeEventsSent, _this_;
-              (_this_ = this[_numChangeEventsSent = "_numChangeEventsSent"]) !== null && _this_ !== void 0 || (this[_numChangeEventsSent] = 0), this._numChangeEventsSent++;
-            }
-          }
-        },
-        {
-          key: "selfUpdate",
-          value: function() {
-            var _this__selfListener, _this;
-            (_this__selfListener = (_this = this)._selfListener) === null || _this__selfListener === void 0 || _this__selfListener.call(_this, this.state.name, this, "self");
-          }
-        },
-        {
-          key: "onChangeTheme",
-          value: function(cb, debugId) {
-            var _this = this;
-            if (process.env.NODE_ENV !== "production" && debugId) {
-              var _this__listeningIds;
-              (_this__listeningIds = this._listeningIds) !== null && _this__listeningIds !== void 0 || (this._listeningIds = /* @__PURE__ */ new Set()), this._listeningIds.add(debugId);
-            }
-            return debugId === !0 && (this._selfListener = cb), this.themeListeners.add(cb), function() {
-              _this.themeListeners.delete(cb);
-            };
-          }
-        }
-      ]), ThemeManager2;
-    }(), cache2 = {};
-    function getState(props, manager) {
-      if (!getHasThemeUpdatingProps(props)) return null;
-      var [allManagers] = getManagers(manager), cacheKey = `${props.name || ""}${props.componentName || ""}${props.inverse || ""}${props.reset || ""}${allManagers.map(function(x) {
-        return (x == null ? void 0 : x.state.name) || ".";
-      }).join("")}`, cached = cache2[cacheKey];
-      if (!cached) {
-        var res = getStateUncached(props, manager);
-        return cache2[cacheKey] = res, res;
-      }
-      return cached;
-    }
-    function getStateUncached(props, manager) {
-      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.");
-      var 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;
-      var { 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]+/, ""));
-      var nextName = props.reset ? baseName : props.name || "", allComponentThemes = componentManagers.map(function(x) {
-        return (x == null ? void 0 : x.state.name) || "";
-      });
-      isDirectParentAComponentTheme && allComponentThemes.shift();
-      for (var base = baseName.split(import_constants22.THEME_NAME_SEPARATOR), max = base.length, min = props.componentName && !nextName ? max : (
-        // component name only don't search upwards
-        0
-      ), i = max; i >= min; i--) {
-        var prefix = base.slice(0, i).join(import_constants22.THEME_NAME_SEPARATOR);
-        props.inverse && (prefix = inverseThemeName(prefix));
-        var potentials = [];
-        if (prefix && prefix !== baseName && prefix.includes(nextName) && potentials.push(prefix), nextName && potentials.unshift(prefix ? `${prefix}_${nextName}` : nextName), i === 1) {
-          var lastSegment = potentials.findIndex(function(x) {
-            return !x.includes("_");
-          });
-          lastSegment > 0 && potentials.splice(lastSegment, 0, nextName);
-        }
-        if (componentName && !props.reset) {
-          var baseLen = base.length, componentPotentials = [];
-          if (nextName && baseLen > 1) {
-            var beforeSeparator = base[0];
-            componentPotentials.push(`${beforeSeparator}_${nextName}_${componentName}`);
+    var Tamagui = function() {
+      if (process.env.NODE_ENV === "development") {
+        var TamaguiManager = /* @__PURE__ */ function() {
+          "use strict";
+          function TamaguiManager2() {
+            _class_call_check(this, TamaguiManager2), _define_property(this, "Helpers", Helpers);
           }
-          if (componentPotentials.push(`${prefix}_${componentName}`), nextName) {
-            if (i > baseLen) {
-              var prefixLessOne = base.slice(0, i - 1).join(import_constants22.THEME_NAME_SEPARATOR);
-              if (prefixLessOne) {
-                var lessSpecific = `${prefixLessOne}_${nextName}_${componentName}`;
-                componentPotentials.unshift(lessSpecific);
+          return _create_class(TamaguiManager2, [
+            {
+              key: "mediaState",
+              get: function() {
+                return {
+                  ...import_useMedia.mediaState
+                };
+              }
+            },
+            {
+              key: "config",
+              get: function() {
+                return (0, import_config.getConfig)();
+              }
+            },
+            {
+              key: "insertedRules",
+              get: function() {
+                return (0, import_insertStyleRule.getAllRules)();
+              }
+            },
+            {
+              key: "allSelectors",
+              get: function() {
+                return (0, import_insertStyleRule.getAllSelectors)();
+              }
+            },
+            {
+              key: "allTransforms",
+              get: function() {
+                return (0, import_insertStyleRule.getAllTransforms)();
+              }
+            },
+            {
+              key: "identifierToValue",
+              get: function() {
+                return identifierToValue;
               }
             }
-            var moreSpecific = `${prefix}_${nextName}_${componentName}`;
-            componentPotentials.unshift(moreSpecific);
-          }
-          potentials = [
-            ...componentPotentials,
-            ...potentials,
-            ...allComponentThemes
-          ];
-        }
-        var found = potentials.find(function(t) {
-          return t in themes;
-        });
-        if (process.env.NODE_ENV !== "production" && typeof props.debug == "string" && import_constants2.isClient && console.info(` \u{1F537} [${manager == null ? void 0 : manager.id}] getState`, {
-          props,
-          found,
-          potentials,
-          baseManager,
-          nextName,
-          baseName,
-          prefix
-        }), found) {
-          var _this, 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_constants2.isWeb ? `${pre}sub_theme ${pre}${!scheme || !restNames.length ? firstName : restNames.join("_")}` : "", parentState = (_this = baseManager || parentManager) === null || _this === void 0 ? void 0 : _this.state, parentName = parentState == null ? void 0 : parentState.name;
-          result = {
-            name: found,
-            parentName,
-            theme: themes[found],
-            className,
-            isComponent,
-            isSchemeFixed: props.name === "light" || props.name === "dark",
-            scheme
-          };
-          break;
-        }
+          ]), TamaguiManager2;
+        }();
+        return new TamaguiManager();
       }
-      return process.env.NODE_ENV !== "production" && props.debug === "verbose" && import_constants2.isClient && (console.groupCollapsed("ThemeManager.getState()"), console.info({
-        props,
-        baseName,
-        base,
-        min,
-        max
-      }), console.warn("result", {
-        result
-      }), console.trace(), console.groupEnd()), result;
-    }
-    var inverseThemeName = function(themeName) {
-      return themeName.startsWith("light") ? themeName.replace(/^light/, "dark") : themeName.replace(/^dark/, "light");
+    }(), identifierToValue = /* @__PURE__ */ new Map(), getValueFromIdentifier = function(identifier) {
+      return identifierToValue.get(identifier);
+    }, setIdentifierValue = function(identifier, value) {
+      identifierToValue.set(identifier, value);
     };
-    function getManagers(themeManager) {
-      for (var comp = [], all = [], cur = themeManager; cur; ) all.push(cur), cur.state.isComponent && comp.push(cur), cur = cur.parentManager;
-      return [
-        all,
-        comp
-      ];
-    }
   }
 });
 
-// ../web/dist/cjs/helpers/ThemeManagerContext.native.js
-var require_ThemeManagerContext_native = __commonJS({
-  "../web/dist/cjs/helpers/ThemeManagerContext.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 = function(target, all) {
       for (var name in all) __defProp2(target, name, {
@@ -2621,27 +2399,43 @@ var require_ThemeManagerContext_native = __commonJS({
       return __copyProps2(__defProp2({}, "__esModule", {
         value: !0
       }), mod);
-    }, ThemeManagerContext_exports = {};
-    __export2(ThemeManagerContext_exports, {
-      ThemeManagerContext: function() {
-        return ThemeManagerContext;
+    }, compose_refs_exports = {};
+    __export2(compose_refs_exports, {
+      composeRefs: function() {
+        return composeRefs;
+      },
+      setRef: function() {
+        return setRef;
+      },
+      useComposedRefs: function() {
+        return useComposedRefs;
       }
     });
-    module2.exports = __toCommonJS2(ThemeManagerContext_exports);
-    var import_react3 = __toESM2(require("react")), ThemeManagerContext = /* @__PURE__ */ import_react3.default.createContext(null);
+    module2.exports = __toCommonJS2(compose_refs_exports);
+    var React3 = __toESM2(require("react"));
+    function setRef(ref, value) {
+      typeof ref == "function" ? ref(value) : ref && (ref.current = value);
+    }
+    function composeRefs() {
+      for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) refs[_key] = arguments[_key];
+      return function(node) {
+        return refs.forEach(function(ref) {
+          return setRef(ref, node);
+        });
+      };
+    }
+    function useComposedRefs() {
+      for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) refs[_key] = arguments[_key];
+      return React3.useCallback(composeRefs(...refs), refs);
+    }
   }
 });
 
-// ../web/dist/cjs/helpers/createShallowSetState.native.js
-var require_createShallowSetState_native = __commonJS({
-  "../web/dist/cjs/helpers/createShallowSetState.native.js"(exports2, module2) {
+// ../compose-refs/dist/cjs/index.native.js
+var require_index_native5 = __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, __export2 = function(target, all) {
-      for (var name in all) __defProp2(target, name, {
-        get: all[name],
-        enumerable: !0
-      });
-    }, __copyProps2 = function(to, from, except, desc) {
+    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __copyProps2 = function(to, from, except, desc) {
       var _iteratorNormalCompletion = !0, _didIteratorError = !1, _iteratorError = void 0;
       if (from && typeof from == "object" || typeof from == "function") try {
         for (var _loop = function() {
@@ -2664,57 +2458,21 @@ var require_createShallowSetState_native = __commonJS({
         }
       }
       return to;
+    }, __reExport2 = function(target, mod, secondTarget) {
+      return __copyProps2(target, mod, "default"), secondTarget && __copyProps2(secondTarget, mod, "default");
     }, __toCommonJS2 = function(mod) {
       return __copyProps2(__defProp2({}, "__esModule", {
         value: !0
       }), mod);
-    }, createShallowSetState_exports = {};
-    __export2(createShallowSetState_exports, {
-      createShallowSetState: function() {
-        return createShallowSetState;
-      },
-      isEqualShallow: function() {
-        return isEqualShallow;
-      },
-      mergeIfNotShallowEqual: function() {
-        return mergeIfNotShallowEqual;
-      }
-    });
-    module2.exports = __toCommonJS2(createShallowSetState_exports);
-    var import_react3 = require("react"), callImmediate = function(cb) {
-      return cb();
-    };
-    function createShallowSetState(setter, isDisabled, transition, debug) {
-      return function(next) {
-        var wrap = transition ? import_react3.startTransition : callImmediate;
-        wrap(function() {
-          setter(function(prev) {
-            return mergeIfNotShallowEqual(prev, next, isDisabled, debug);
-          });
-        });
-      };
-    }
-    function mergeIfNotShallowEqual(prev, next, isDisabled, debug) {
-      if (isDisabled || !prev || !next || isEqualShallow(prev, next)) return prev || next;
-      if (process.env.NODE_ENV === "development" && debug && (console.info("setStateShallow CHANGE", {
-        prev,
-        next
-      }), debug === "break")) debugger;
-      return {
-        ...prev,
-        ...next
-      };
-    }
-    function isEqualShallow(prev, next) {
-      for (var key in next) if (prev[key] !== next[key]) return !1;
-      return !0;
-    }
+    }, index_exports2 = {};
+    module2.exports = __toCommonJS2(index_exports2);
+    __reExport2(index_exports2, require_compose_refs_native(), module2.exports);
   }
 });
 
-// ../web/dist/cjs/hooks/shouldDeoptDueToParentScheme.native.js
-var require_shouldDeoptDueToParentScheme_native = __commonJS({
-  "../web/dist/cjs/hooks/shouldDeoptDueToParentScheme.native.js"(exports2, module2) {
+// ../web/dist/cjs/constants/constants.native.js
+var require_constants_native2 = __commonJS({
+  "../web/dist/cjs/constants/constants.native.js"(exports2, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = function(target, all) {
       for (var name in all) __defProp2(target, name, {
@@ -2748,41 +2506,95 @@ var require_shouldDeoptDueToParentScheme_native = __commonJS({
       return __copyProps2(__defProp2({}, "__esModule", {
         value: !0
       }), mod);
-    }, shouldDeoptDueToParentScheme_native_exports = {};
-    __export2(shouldDeoptDueToParentScheme_native_exports, {
-      shouldDeoptDueToParentScheme: function() {
-        return shouldDeoptDueToParentScheme;
+    }, constants_exports = {};
+    __export2(constants_exports, {
+      FONT_DATA_ATTRIBUTE_NAME: function() {
+        return FONT_DATA_ATTRIBUTE_NAME;
+      },
+      THEME_CLASSNAME_PREFIX: function() {
+        return THEME_CLASSNAME_PREFIX;
+      },
+      THEME_NAME_SEPARATOR: function() {
+        return THEME_NAME_SEPARATOR;
+      },
+      stackDefaultStyles: function() {
+        return stackDefaultStyles;
+      },
+      webViewFlexCompatStyles: function() {
+        return webViewFlexCompatStyles;
       }
     });
-    module2.exports = __toCommonJS2(shouldDeoptDueToParentScheme_native_exports);
-    var import_react_native = require("react-native");
-    function shouldDeoptDueToParentScheme(manager) {
-      var _parents_, parents = ((manager == null ? void 0 : manager.getParents()) || []).reverse(), rootScheme = (_parents_ = parents[0]) === null || _parents_ === void 0 ? void 0 : _parents_.state.scheme;
-      if (!rootScheme || import_react_native.Appearance.getColorScheme() !== rootScheme) return !0;
-      var lastParentScheme = rootScheme, _iteratorNormalCompletion = !0, _didIteratorError = !1, _iteratorError = void 0;
-      try {
-        for (var _iterator = parents[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0) {
-          var parent = _step.value;
-          if (parent.state.scheme !== lastParentScheme) return !0;
-          lastParentScheme = parent.state.scheme;
-        }
+    module2.exports = __toCommonJS2(constants_exports);
+    var THEME_NAME_SEPARATOR = "_", THEME_CLASSNAME_PREFIX = "t_", FONT_DATA_ATTRIBUTE_NAME = "data-tamagui-font", stackDefaultStyles = {}, webViewFlexCompatStyles = {
+      display: "flex",
+      alignItems: "stretch",
+      flexDirection: "column",
+      flexBasis: "auto",
+      boxSizing: "border-box",
+      position: "relative",
+      minHeight: 0,
+      minWidth: 0,
+      flexShrink: 0
+    };
+  }
+});
+
+// ../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 = function(target, all) {
+      for (var name in all) __defProp2(target, name, {
+        get: all[name],
+        enumerable: !0
+      });
+    }, __copyProps2 = function(to, from, except, desc) {
+      var _iteratorNormalCompletion = !0, _didIteratorError = !1, _iteratorError = void 0;
+      if (from && typeof from == "object" || typeof from == "function") try {
+        for (var _loop = function() {
+          var key = _step.value;
+          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, {
+            get: function() {
+              return from[key];
+            },
+            enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable
+          });
+        }, _iterator = __getOwnPropNames2(from)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0) _loop();
       } catch (err) {
         _didIteratorError = !0, _iteratorError = err;
       } finally {
         try {
           !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
         } finally {
-          if (_didIteratorError) throw _iteratorError;
+          if (_didIteratorError)
+            throw _iteratorError;
         }
       }
+      return to;
+    }, __toCommonJS2 = function(mod) {
+      return __copyProps2(__defProp2({}, "__esModule", {
+        value: !0
+      }), mod);
+    }, isDevTools_exports = {};
+    __export2(isDevTools_exports, {
+      isDevTools: function() {
+        return isDevTools;
+      }
+    });
+    module2.exports = __toCommonJS2(isDevTools_exports);
+    var isDevTools = function() {
+      if (process.env.NODE_ENV === "development") try {
+        return new Function("try {return this===window;}catch(e){ return false;}")();
+      } catch {
+      }
       return !1;
-    }
+    }();
   }
 });
 
-// ../web/dist/cjs/hooks/useTheme.native.js
-var require_useTheme_native = __commonJS({
-  "../web/dist/cjs/hooks/useTheme.native.js"(exports2, module2) {
+// ../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 = function(target, all) {
       for (var name in all) __defProp2(target, name, {
@@ -2816,271 +2628,34 @@ var require_useTheme_native = __commonJS({
       return __copyProps2(__defProp2({}, "__esModule", {
         value: !0
       }), mod);
-    }, useTheme_exports = {};
-    __export2(useTheme_exports, {
-      activeThemeManagers: function() {
-        return activeThemeManagers;
-      },
-      getThemeManager: function() {
-        return getThemeManager;
-      },
-      useChangeThemeEffect: function() {
-        return useChangeThemeEffect;
-      },
-      useTheme: function() {
-        return useTheme;
-      },
-      useThemeWithState: function() {
-        return useThemeWithState;
+    }, objectIdentityKey_exports = {};
+    __export2(objectIdentityKey_exports, {
+      objectIdentityKey: function() {
+        return objectIdentityKey;
       }
     });
-    module2.exports = __toCommonJS2(useTheme_exports);
-    var import_constants2 = require_index_native2(), import_react3 = require("react"), import_config = require_config_native(), import_createVariable = require_createVariable_native(), import_ThemeManager = require_ThemeManager_native(), import_ThemeManagerContext = require_ThemeManagerContext_native(), import_createShallowSetState = require_createShallowSetState_native(), import_shouldDeoptDueToParentScheme = require_shouldDeoptDueToParentScheme_native(), emptyProps = {
-      name: null
-    }, useTheme = function() {
-      var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : emptyProps, [_, theme] = useThemeWithState(props), res = theme;
-      return res;
-    }, useThemeWithState = function(props) {
-      var keys = (0, import_react3.useRef)(null), changedThemeState = useChangeThemeEffect(props, !1, keys);
-      process.env.NODE_ENV === "development" && globalThis.time && time`theme-change-effect`;
-      var { themeManager, state } = changedThemeState;
-      process.env.NODE_ENV === "development" && (state != null && state.theme || process.env.TAMAGUI_DISABLE_NO_THEME_WARNING !== "1" && console.error(`[tamagui] No theme found, this could be due to an invalid theme name (given theme props ${JSON.stringify(props)}).
-
-If this is intended and you are using Tamagui without any themes, you can disable this warning by setting the environment variable TAMAGUI_DISABLE_NO_THEME_WARNING=1`));
-      var themeProxied = getThemeProxied(props, state, keys, themeManager);
-      return process.env.NODE_ENV === "development" && props.debug === "verbose" && (console.groupCollapsed(`  \u{1F539} [${themeManager == null ? void 0 : themeManager.id}] useTheme =>`, state == null ? void 0 : state.name), console.info("returning state", changedThemeState.state, changedThemeState.isNewTheme, "from props", props), console.groupEnd()), [
-        changedThemeState,
-        themeProxied
-      ];
-    }, emptyObject = {}, ProxiedThemes = /* @__PURE__ */ new Map(), curKeys, curProps, curThemeManger;
-    function getThemeProxied(_props, state, _keys, _themeManager) {
-      var theme = state == null ? void 0 : state.theme;
-      if (!theme || !_themeManager) return emptyObject;
-      if (curKeys = _keys, curProps = _props, curThemeManger = _themeManager, ProxiedThemes.has(theme)) {
-        var proxied = ProxiedThemes.get(theme);
-        return proxied;
-      }
-      var { name, scheme } = state, config = (0, import_config.getConfig)();
-      function track(key) {
-        curKeys && (curKeys.current || (curKeys.current = []), curKeys.current.push(key), process.env.NODE_ENV === "development" && curProps.debug && console.info(` \u{1F3A8} useTheme() tracking new key: ${key}`));
-      }
-      var proxied1 = Object.fromEntries(Object.entries(theme).flatMap(function(param) {
-        var [key, value] = param, proxied2 = {
-          ...value,
-          get val() {
-            return globalThis.tamaguiAvoidTracking || track(key), value.val;
-          },
-          get(platform) {
-            var outVal = (0, import_createVariable.getVariable)(value);
-            if (platform !== "web" && import_constants2.isIos && !curProps.deopt && (0, import_config.getSetting)("fastSchemeChange") && !(0, import_shouldDeoptDueToParentScheme.shouldDeoptDueToParentScheme)(curThemeManger) && scheme) {
-              var _config_themes_name, _config_themes_oppositeName, oppositeScheme = scheme === "dark" ? "light" : "dark", oppositeName = name.replace(scheme, oppositeScheme), color = (0, import_createVariable.getVariable)((_config_themes_name = config.themes[name]) === null || _config_themes_name === void 0 ? void 0 : _config_themes_name[key]), oppositeColor = (0, import_createVariable.getVariable)((_config_themes_oppositeName = config.themes[oppositeName]) === null || _config_themes_oppositeName === void 0 ? void 0 : _config_themes_oppositeName[key]), dynamicVal = {
-                dynamic: {
-                  [scheme]: color,
-                  [oppositeScheme]: oppositeColor
-                }
-              };
-              return dynamicVal;
-            }
-            return process.env.NODE_ENV === "development" && curProps.debug && console.info(` \u{1F3A8} useTheme() tracking new key because of: 
-                not web: ${platform !== "web"}
-                isIOS: ${import_constants2.isIos}
-                deopt: ${curProps.deopt}
-                fastScheme: ${(0, import_config.getSetting)("fastSchemeChange")}
-                inversed: ${getIsInversed(curThemeManger)}
-              `), track(key), outVal;
-          }
-        };
-        return [
-          [
-            key,
-            proxied2
-          ],
-          [
-            `$${key}`,
-            proxied2
-          ]
-        ];
-      }));
-      return ProxiedThemes.set(theme, proxied1), proxied1;
-    }
-    function getIsInversed(manager) {
-      for (var isInversed = !1, cur = manager; cur; ) {
-        if (!cur.parentManager) return isInversed;
-        cur.parentManager.state.scheme !== cur.state.scheme && (isInversed = !isInversed), cur = cur.parentManager;
-      }
-      return !1;
-    }
-    var activeThemeManagers = /* @__PURE__ */ new Set(), _uidToManager = /* @__PURE__ */ new WeakMap(), _idToUID = {}, getId = function(id) {
-      return _idToUID[id];
-    }, getThemeManager = function(id) {
-      return _uidToManager.get(getId(id));
-    }, registerThemeManager = function(t) {
-      if (!_idToUID[t.id]) {
-        var id = _idToUID[t.id] = {};
-        _uidToManager.set(id, t);
-      }
-    }, ogLog = console.error, preventWarnSetState = process.env.NODE_ENV === "production" ? ogLog : (
-      // temporary fix for logs, they are harmless in that i've tried to rewrite this
-      // a few times using the "right" ways, but they are always slower. maybe skill issue
-      function(a) {
-        for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) args[_key - 1] = arguments[_key];
-        if (!(typeof a == "string" && a.includes("Cannot update a component"))) return ogLog(a, ...args);
-      }
-    );
-    function getShouldUpdateTheme(props, parentManager, keys, themeState, nextState) {
-      var forceShouldChange = arguments.length > 5 && arguments[5] !== void 0 ? arguments[5] : !1, _themeState_themeManager, _themeState_state;
-      if (!import_constants2.isServer && !(!forceShouldChange && !(keys != null && keys.current) && (!themeState || !themeState.isNewTheme) && !(0, import_ThemeManager.getHasThemeUpdatingProps)(props))) {
-        var next = nextState || (themeState == null || (_themeState_themeManager = themeState.themeManager) === null || _themeState_themeManager === void 0 ? void 0 : _themeState_themeManager.getState(props, parentManager));
-        if (forceShouldChange || !(!next || next.theme === (themeState == null || (_themeState_state = themeState.state) === null || _themeState_state === void 0 ? void 0 : _themeState_state.theme))) return next;
-      }
-    }
-    var useChangeThemeEffect = function(props) {
-      var isRoot = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !1, keys = arguments.length > 2 ? arguments[2] : void 0, _props_needsUpdate, { disable } = props, parentManager = (0, import_react3.useContext)(import_ThemeManagerContext.ThemeManagerContext), shouldAlwaysUpdate = ((_props_needsUpdate = props.needsUpdate) === null || _props_needsUpdate === void 0 ? void 0 : _props_needsUpdate.call(props)) === !0 ? !0 : void 0;
-      if (!isRoot && !parentManager || disable) return {
-        isNewTheme: !1,
-        state: parentManager == null ? void 0 : parentManager.state,
-        themeManager: parentManager
-      };
-      var [themeState, setThemeState] = (0, import_react3.useState)(createState), { state, mounted, isNewTheme, themeManager, prevState } = themeState, isInversingOnMount = !!(!themeState.mounted && props.inverse);
-      if (themeManager) {
-        var nextState = getShouldUpdateTheme(props, parentManager, keys, themeState, void 0, shouldAlwaysUpdate);
-        if (nextState) {
-          var _next_state, _themeState_state, next = createState(themeState, void 0, nextState);
-          ((_next_state = next.state) === null || _next_state === void 0 ? void 0 : _next_state.name) !== ((_themeState_state = themeState.state) === null || _themeState_state === void 0 ? void 0 : _themeState_state.name) && (setThemeState(next), console.error = preventWarnSetState, themeManager.notify(), console.error = ogLog);
-        }
-      }
-      if (import_constants2.isServer || ((0, import_react3.useEffect)(function() {
-        if (themeManager) {
-          if (props.inverse && !mounted) {
-            setThemeState(function(prev) {
-              return createState({
-                ...prev,
-                mounted: !0
-              });
-            });
-            return;
-          }
-          if ((isNewTheme || isRoot) && (activeThemeManagers.add(themeManager), process.env.NODE_ENV === "development" && isRoot)) {
-            var _globalThis, _TamaguiRootThemeManager;
-            (_globalThis = globalThis)[_TamaguiRootThemeManager = "TamaguiRootThemeManager"] || (_globalThis[_TamaguiRootThemeManager] = themeManager);
-          }
-          var updated = getShouldUpdateTheme(props, parentManager, keys, themeState, void 0, shouldAlwaysUpdate);
-          updated && setThemeState(function(prev) {
-            return createState(prev, void 0, updated);
-          });
-          var selfListenerDispose = themeManager.onChangeTheme(function(_a, _b, forced) {
-            forced && setThemeState(function(prev) {
-              var next2 = createState(prev, forced !== "self");
-              return next2;
-            });
-          }, !0), disposeChangeListener = parentManager == null ? void 0 : parentManager.onChangeTheme(function(name, manager, forced) {
-            var force = forced || (import_constants2.isServer ? void 0 : keys != null && keys.current ? !0 : void 0) || props.deopt || props["disable-child-theme"], shouldTryUpdate = force ?? !!(keys != null && keys.current || isNewTheme);
-            process.env.NODE_ENV === "development" && props.debug === "verbose" && console.info(" \u{1F538} onChange", {
-              id: themeManager.id,
-              force,
-              shouldTryUpdate,
-              props,
-              name,
-              keys
-            }), shouldTryUpdate && setThemeState(function(prev) {
-              return createState(prev, !0);
-            });
-          }, themeManager.id);
-          return function() {
-            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_react3.useEffect)(function() {
-        var _globalThis, _TamaguiThemeManagers, _;
-        return (_ = (_globalThis = globalThis)[_TamaguiThemeManagers = "TamaguiThemeManagers"]) !== null && _ !== void 0 || (_globalThis[_TamaguiThemeManagers] = /* @__PURE__ */ new Set()), globalThis.TamaguiThemeManagers.add(themeManager), function() {
-          globalThis.TamaguiThemeManagers.delete(themeManager);
-        };
-      }, [
-        themeManager
-      ])), import_constants2.isWeb && isInversingOnMount) return {
-        isNewTheme: !1,
-        inversed: !1,
-        themeManager: parentManager,
-        state: {
-          name: "",
-          ...parentManager == null ? void 0 : parentManager.state,
-          className: ""
-        }
-      };
-      return {
-        state,
-        isNewTheme,
-        inversed: !!props.inverse,
-        themeManager
-      };
-      function createState(prev) {
-        var force = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !1, foundNextState = arguments.length > 2 ? arguments[2] : void 0;
-        if (prev && !foundNextState && !(keys != null && keys.current) && !force) return prev;
-        var themeManager2 = parentManager, state2, hasThemeUpdatingProps = (0, import_ThemeManager.getHasThemeUpdatingProps)(props);
-        if (hasThemeUpdatingProps) {
-          var parentManagerProp = isRoot ? "root" : parentManager;
-          if (prev != null && prev.themeManager) {
-            themeManager2 = prev.themeManager;
-            var forceChange = force || shouldAlwaysUpdate || (keys != null && keys.current ? !0 : void 0), nextState2 = null;
-            if (foundNextState) nextState2 = foundNextState;
-            else {
-              var next2 = themeManager2.getState(props, parentManager);
-              nextState2 = getShouldUpdateTheme(props, parentManager, keys, prev, next2, forceChange);
-            }
-            nextState2 ? (state2 = nextState2, !prev.isNewTheme && !isRoot ? themeManager2 = new import_ThemeManager.ThemeManager(props, parentManagerProp) : themeManager2.updateState(nextState2)) : prev.isNewTheme && parentManager && !nextState2 && (themeManager2 = parentManager);
-          } else themeManager2 = new import_ThemeManager.ThemeManager(props, parentManagerProp), state2 = {
-            ...themeManager2.state
-          };
+    module2.exports = __toCommonJS2(objectIdentityKey_exports);
+    function objectIdentityKey(obj) {
+      var k = "";
+      for (var key in obj) {
+        k += key;
+        var arg = obj[key], type = typeof arg;
+        if (!arg || type !== "object" && type !== "function") k += type + arg;
+        else if (cache2.has(arg)) k += cache2.get(arg);
+        else {
+          var v = Math.random();
+          cache2.set(arg, v), k += v;
         }
-        var isNewTheme2 = !!(themeManager2 !== parentManager || props.inverse);
-        isNewTheme2 && registerThemeManager(themeManager2);
-        var isWebSSR = import_constants2.isWeb ? !(0, import_config.getSetting)("disableSSR") : !1, mounted2 = isWebSSR ? isRoot || (prev == null ? void 0 : prev.mounted) : !0;
-        state2 || (isNewTheme2 ? state2 = themeManager2.state : (state2 = parentManager.state, themeManager2 = parentManager));
-        var response = {
-          themeManager: themeManager2,
-          isNewTheme: isNewTheme2,
-          mounted: mounted2
-        };
-        props.inverse && (response.inversed = !0);
-        var 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, response.prevState = prev == null ? void 0 : prev.state, process.env.NODE_ENV === "development" && props.debug && import_constants2.isClient) {
-          console.groupCollapsed(`\u{1F537} [${themeManager2.id}] useChangeThemeEffect createState`);
-          var 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 k;
+    }
+    var cache2 = /* @__PURE__ */ new WeakMap();
   }
 });
 
-// ../web/dist/cjs/Tamagui.native.js
-var require_Tamagui_native = __commonJS({
-  "../web/dist/cjs/Tamagui.native.js"(exports2, module2) {
+// ../web/dist/cjs/helpers/createStyledContext.native.js
+var require_createStyledContext_native = __commonJS({
+  "../web/dist/cjs/helpers/createStyledContext.native.js"(exports2, module2) {
     "use strict";
     var __create2 = Object.create, __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __getProtoOf2 = Object.getPrototypeOf, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = function(target, all) {
       for (var name in all) __defProp2(target, name, {
@@ -3126,109 +2701,48 @@ var require_Tamagui_native = __commonJS({
       return __copyProps2(__defProp2({}, "__esModule", {
         value: !0
       }), mod);
-    }, Tamagui_exports = {};
-    __export2(Tamagui_exports, {
-      Tamagui: function() {
-        return Tamagui;
-      },
-      getValueFromIdentifier: function() {
-        return getValueFromIdentifier;
-      },
-      setIdentifierValue: function() {
-        return setIdentifierValue;
+    }, createStyledContext_exports = {};
+    __export2(createStyledContext_exports, {
+      createStyledContext: function() {
+        return createStyledContext;
       }
     });
-    module2.exports = __toCommonJS2(Tamagui_exports);
-    var Helpers = __toESM2(require_index_native3()), import_config = require_config_native(), import_insertStyleRule = require_insertStyleRule_native(), import_useMedia = require_useMedia_native(), import_useTheme = require_useTheme_native();
-    function _class_call_check(instance, Constructor) {
-      if (!(instance instanceof Constructor)) throw new TypeError("Cannot call a class as a function");
-    }
-    function _defineProperties(target, props) {
-      for (var i = 0; i < props.length; i++) {
-        var descriptor = props[i];
-        descriptor.enumerable = descriptor.enumerable || !1, descriptor.configurable = !0, "value" in descriptor && (descriptor.writable = !0), Object.defineProperty(target, descriptor.key, descriptor);
-      }
-    }
-    function _create_class(Constructor, protoProps, staticProps) {
-      return protoProps && _defineProperties(Constructor.prototype, protoProps), staticProps && _defineProperties(Constructor, staticProps), Constructor;
-    }
-    function _define_property(obj, key, value) {
-      return key in obj ? Object.defineProperty(obj, key, {
-        value,
-        enumerable: !0,
-        configurable: !0,
-        writable: !0
-      }) : obj[key] = value, obj;
-    }
-    var Tamagui = function() {
-      if (process.env.NODE_ENV === "development") {
-        var TamaguiManager = /* @__PURE__ */ function() {
-          "use strict";
-          function TamaguiManager2() {
-            _class_call_check(this, TamaguiManager2), _define_property(this, "Helpers", Helpers), _define_property(this, "getThemeManager", import_useTheme.getThemeManager);
-          }
-          return _create_class(TamaguiManager2, [
-            {
-              key: "activeThemeManagers",
-              get: function() {
-                return import_useTheme.activeThemeManagers;
-              }
-            },
-            {
-              key: "mediaState",
-              get: function() {
-                return {
-                  ...import_useMedia.mediaState
-                };
-              }
-            },
-            {
-              key: "config",
-              get: function() {
-                return (0, import_config.getConfig)();
-              }
-            },
-            {
-              key: "insertedRules",
-              get: function() {
-                return (0, import_insertStyleRule.getAllRules)();
-              }
-            },
-            {
-              key: "allSelectors",
-              get: function() {
-                return (0, import_insertStyleRule.getAllSelectors)();
-              }
-            },
-            {
-              key: "allTransforms",
-              get: function() {
-                return (0, import_insertStyleRule.getAllTransforms)();
-              }
-            },
-            {
-              key: "identifierToValue",
-              get: function() {
-                return identifierToValue;
-              }
-            }
-          ]), TamaguiManager2;
-        }();
-        return new TamaguiManager();
+    module2.exports = __toCommonJS2(createStyledContext_exports);
+    var import_jsx_runtime = require("react/jsx-runtime"), import_react3 = __toESM2(require("react")), import_objectIdentityKey = require_objectIdentityKey_native(), createReactContext = import_react3.default[Math.random(), "createContext"];
+    function createStyledContext(defaultValues) {
+      var OGContext = createReactContext(defaultValues), OGProvider = OGContext.Provider, Context = OGContext, scopedContexts = /* @__PURE__ */ new Map();
+      function getOrCreateScopedContext(scope) {
+        var ScopedContext = scopedContexts.get(scope);
+        return ScopedContext || (ScopedContext = createReactContext(defaultValues), scopedContexts.set(scope, ScopedContext)), ScopedContext;
       }
-    }(), identifierToValue = /* @__PURE__ */ new Map(), getValueFromIdentifier = function(identifier) {
-      return identifierToValue.get(identifier);
-    }, setIdentifierValue = function(identifier, value) {
-      identifierToValue.set(identifier, value);
-    };
+      var Provider = function(param) {
+        var { children, scope, ...values } = param, next = import_react3.default.useMemo(function() {
+          return {
+            // this ! is a workaround for ts error
+            ...defaultValues,
+            ...values
+          };
+        }, [
+          (0, import_objectIdentityKey.objectIdentityKey)(values)
+        ]), Provider22 = OGProvider;
+        return scope && (Provider22 = getOrCreateScopedContext(scope).Provider), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Provider22, {
+          value: next,
+          children
+        });
+      }, useStyledContext = function(scope) {
+        var context = scope ? getOrCreateScopedContext(scope) : OGContext;
+        return import_react3.default.useContext(context);
+      };
+      return Context.Provider = Provider, Context.props = defaultValues, Context.context = OGContext, Context.useStyledContext = useStyledContext, Context;
+    }
   }
 });
 
-// ../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/contexts/ComponentContext.native.js
+var require_ComponentContext_native = __commonJS({
+  "../web/dist/cjs/contexts/ComponentContext.native.js"(exports2, module2) {
     "use strict";
-    var __create2 = Object.create, __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __getProtoOf2 = Object.getPrototypeOf, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = function(target, all) {
+    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = function(target, all) {
       for (var name in all) __defProp2(target, name, {
         get: all[name],
         enumerable: !0
@@ -3256,59 +2770,42 @@ var require_compose_refs_native = __commonJS({
         }
       }
       return to;
-    }, __toESM2 = function(mod, isNodeMode, target) {
-      return target = mod != null ? __create2(__getProtoOf2(mod)) : {}, __copyProps2(
-        // If the importer is in node compatibility mode or this is not an ESM
-        // file that has been converted to a CommonJS file using a Babel-
-        // compatible transform (i.e. "__esModule" has not been set), then set
-        // "default" to the CommonJS "module.exports" for node compatibility.
-        isNodeMode || !mod || !mod.__esModule ? __defProp2(target, "default", {
-          value: mod,
-          enumerable: !0
-        }) : target,
-        mod
-      );
     }, __toCommonJS2 = function(mod) {
       return __copyProps2(__defProp2({}, "__esModule", {
         value: !0
       }), mod);
-    }, compose_refs_exports = {};
-    __export2(compose_refs_exports, {
-      composeRefs: function() {
-        return composeRefs;
-      },
-      setRef: function() {
-        return setRef;
-      },
-      useComposedRefs: function() {
-        return useComposedRefs;
+    }, ComponentContext_exports = {};
+    __export2(ComponentContext_exports, {
+      ComponentContext: function() {
+        return ComponentContext;
+      }
+    });
+    module2.exports = __toCommonJS2(ComponentContext_exports);
+    var import_createStyledContext = require_createStyledContext_native(), ComponentContext = (0, import_createStyledContext.createStyledContext)({
+      disableSSR: void 0,
+      inText: !1,
+      language: null,
+      animationDriver: null,
+      setParentFocusState: null,
+      groups: {
+        emit: null,
+        subscribe: null,
+        state: {}
       }
     });
-    module2.exports = __toCommonJS2(compose_refs_exports);
-    var React3 = __toESM2(require("react"));
-    function setRef(ref, value) {
-      typeof ref == "function" ? ref(value) : ref && (ref.current = value);
-    }
-    function composeRefs() {
-      for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) refs[_key] = arguments[_key];
-      return function(node) {
-        return refs.forEach(function(ref) {
-          return setRef(ref, node);
-        });
-      };
-    }
-    function useComposedRefs() {
-      for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) refs[_key] = arguments[_key];
-      return React3.useCallback(composeRefs(...refs), refs);
-    }
   }
 });
 
-// ../compose-refs/dist/cjs/index.native.js
-var require_index_native5 = __commonJS({
-  "../compose-refs/dist/cjs/index.native.js"(exports2, module2) {
+// ../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, __copyProps2 = function(to, from, except, desc) {
+    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = function(target, all) {
+      for (var name in all) __defProp2(target, name, {
+        get: all[name],
+        enumerable: !0
+      });
+    }, __copyProps2 = function(to, from, except, desc) {
       var _iteratorNormalCompletion = !0, _didIteratorError = !1, _iteratorError = void 0;
       if (from && typeof from == "object" || typeof from == "function") try {
         for (var _loop = function() {
@@ -3331,21 +2828,45 @@ var require_index_native5 = __commonJS({
         }
       }
       return to;
-    }, __reExport2 = function(target, mod, secondTarget) {
-      return __copyProps2(target, mod, "default"), secondTarget && __copyProps2(secondTarget, mod, "default");
     }, __toCommonJS2 = function(mod) {
       return __copyProps2(__defProp2({}, "__esModule", {
         value: !0
       }), mod);
-    }, index_exports2 = {};
-    module2.exports = __toCommonJS2(index_exports2);
-    __reExport2(index_exports2, require_compose_refs_native(), module2.exports);
+    }, defaultComponentState_exports = {};
+    __export2(defaultComponentState_exports, {
+      defaultComponentState: function() {
+        return defaultComponentState;
+      },
+      defaultComponentStateMounted: function() {
+        return defaultComponentStateMounted;
+      },
+      defaultComponentStateShouldEnter: function() {
+        return defaultComponentStateShouldEnter;
+      }
+    });
+    module2.exports = __toCommonJS2(defaultComponentState_exports);
+    var defaultComponentState = {
+      hover: !1,
+      press: !1,
+      pressIn: !1,
+      focus: !1,
+      focusVisible: !1,
+      focusWithin: !1,
+      unmounted: !0,
+      disabled: !1
+    }, defaultComponentStateMounted = {
+      ...defaultComponentState,
+      unmounted: !1
+    }, defaultComponentStateShouldEnter = {
+      ...defaultComponentState,
+      unmounted: "should-enter"
+    };
   }
 });
 
-// ../web/dist/cjs/constants/isDevTools.native.js
-var require_isDevTools_native = __commonJS({
-  "../web/dist/cjs/constants/isDevTools.native.js"(exports2, module2) {
+// ../web/dist/cjs/helpers/getShorthandValue.native.js
+var require_getShorthandValue_native = __commonJS({
+  "../web/dist/cjs/helpers/getShorthandValue.native.js"(exports2, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = function(target, all) {
       for (var name in all) __defProp2(target, name, {
@@ -3379,26 +2900,24 @@ var require_isDevTools_native = __commonJS({
       return __copyProps2(__defProp2({}, "__esModule", {
         value: !0
       }), mod);
-    }, isDevTools_exports = {};
-    __export2(isDevTools_exports, {
-      isDevTools: function() {
-        return isDevTools;
+    }, getShorthandValue_exports = {};
+    __export2(getShorthandValue_exports, {
+      getShorthandValue: function() {
+        return getShorthandValue;
       }
     });
-    module2.exports = __toCommonJS2(isDevTools_exports);
-    var isDevTools = function() {
-      if (process.env.NODE_ENV === "development") try {
-        return new Function("try {return this===window;}catch(e){ return false;}")();
-      } catch {
-      }
-      return !1;
-    }();
+    module2.exports = __toCommonJS2(getShorthandValue_exports);
+    var import_config = require_config_native(), inverseShorthands = null, getShorthandValue = function(props, key) {
+      inverseShorthands || (inverseShorthands = (0, import_config.getConfig)().inverseShorthands);
+      var _props_key;
+      return (_props_key = props[key]) !== null && _props_key !== void 0 ? _props_key : inverseShorthands ? props[inverseShorthands[key]] : void 0;
+    };
   }
 });
 
-// ../web/dist/cjs/helpers/objectIdentityKey.native.js
-var require_objectIdentityKey_native = __commonJS({
-  "../web/dist/cjs/helpers/objectIdentityKey.native.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";
     var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = function(target, all) {
       for (var name in all) __defProp2(target, name, {
@@ -3432,36 +2951,34 @@ var require_objectIdentityKey_native = __commonJS({
       return __copyProps2(__defProp2({}, "__esModule", {
         value: !0
       }), mod);
-    }, objectIdentityKey_exports = {};
-    __export2(objectIdentityKey_exports, {
-      objectIdentityKey: function() {
-        return objectIdentityKey;
-      }
-    });
-    module2.exports = __toCommonJS2(objectIdentityKey_exports);
-    function objectIdentityKey(obj) {
-      var k = "";
-      for (var key in obj) {
-        k += key;
-        var arg = obj[key], type = typeof arg;
-        if (!arg || type !== "object" && type !== "function") k += type + arg;
-        else if (cache2.has(arg)) k += cache2.get(arg);
-        else {
-          var v = Math.random();
-          cache2.set(arg, v), k += v;
-        }
-      }
-      return k;
-    }
-    var cache2 = /* @__PURE__ */ new WeakMap();
+    }, accessibilityDirectMap_native_exports = {};
+    __export2(accessibilityDirectMap_native_exports, {
+      accessibilityDirectMap: function() {
+        return accessibilityDirectMap;
+      },
+      accessibilityWebRoleToNativeRole: function() {
+        return accessibilityWebRoleToNativeRole;
+      },
+      nativeAccessibilityState: function() {
+        return nativeAccessibilityState;
+      },
+      nativeAccessibilityValue: function() {
+        return nativeAccessibilityValue;
+      },
+      webToNativeAccessibilityDirectMap: function() {
+        return webToNativeAccessibilityDirectMap;
+      }
+    });
+    module2.exports = __toCommonJS2(accessibilityDirectMap_native_exports);
+    var accessibilityDirectMap = {}, webToNativeAccessibilityDirectMap = {}, nativeAccessibilityValue = {}, nativeAccessibilityState = {}, accessibilityWebRoleToNativeRole = {};
   }
 });
 
-// ../web/dist/cjs/helpers/createStyledContext.native.js
-var require_createStyledContext_native = __commonJS({
-  "../web/dist/cjs/helpers/createStyledContext.native.js"(exports2, module2) {
+// ../web/dist/cjs/helpers/getGroupPropParts.native.js
+var require_getGroupPropParts_native = __commonJS({
+  "../web/dist/cjs/helpers/getGroupPropParts.native.js"(exports2, module2) {
     "use strict";
-    var __create2 = Object.create, __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __getProtoOf2 = Object.getPrototypeOf, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = function(target, all) {
+    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = function(target, all) {
       for (var name in all) __defProp2(target, name, {
         get: all[name],
         enumerable: !0
@@ -3489,62 +3006,32 @@ var require_createStyledContext_native = __commonJS({
         }
       }
       return to;
-    }, __toESM2 = function(mod, isNodeMode, target) {
-      return target = mod != null ? __create2(__getProtoOf2(mod)) : {}, __copyProps2(
-        // If the importer is in node compatibility mode or this is not an ESM
-        // file that has been converted to a CommonJS file using a Babel-
-        // compatible transform (i.e. "__esModule" has not been set), then set
-        // "default" to the CommonJS "module.exports" for node compatibility.
-        isNodeMode || !mod || !mod.__esModule ? __defProp2(target, "default", {
-          value: mod,
-          enumerable: !0
-        }) : target,
-        mod
-      );
     }, __toCommonJS2 = function(mod) {
       return __copyProps2(__defProp2({}, "__esModule", {
         value: !0
       }), mod);
-    }, createStyledContext_exports = {};
-    __export2(createStyledContext_exports, {
-      createStyledContext: function() {
-        return createStyledContext;
+    }, getGroupPropParts_exports = {};
+    __export2(getGroupPropParts_exports, {
+      getGroupPropParts: function() {
+        return getGroupPropParts;
       }
     });
-    module2.exports = __toCommonJS2(createStyledContext_exports);
-    var import_jsx_runtime = require("react/jsx-runtime"), import_react3 = __toESM2(require("react")), import_objectIdentityKey = require_objectIdentityKey_native(), createReactContext = import_react3.default[Math.random(), "createContext"];
-    function createStyledContext(defaultValues) {
-      var OGContext = createReactContext(defaultValues), OGProvider = OGContext.Provider, Context = OGContext, scopedContexts = /* @__PURE__ */ new Map();
-      function getOrCreateScopedContext(scope) {
-        var ScopedContext = scopedContexts.get(scope);
-        return ScopedContext || (ScopedContext = createReactContext(defaultValues), scopedContexts.set(scope, ScopedContext)), ScopedContext;
-      }
-      var Provider = function(param) {
-        var { children, scope, ...values } = param, next = import_react3.default.useMemo(function() {
-          return {
-            // this ! is a workaround for ts error
-            ...defaultValues,
-            ...values
-          };
-        }, [
-          (0, import_objectIdentityKey.objectIdentityKey)(values)
-        ]), Provider22 = OGProvider;
-        return scope && (Provider22 = getOrCreateScopedContext(scope).Provider), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Provider22, {
-          value: next,
-          children
-        });
-      }, useStyledContext = function(scope) {
-        var context = scope ? getOrCreateScopedContext(scope) : OGContext;
-        return import_react3.default.useContext(context);
+    module2.exports = __toCommonJS2(getGroupPropParts_exports);
+    var import_useMedia = require_useMedia_native();
+    function getGroupPropParts(groupProp) {
+      var 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
       };
-      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) {
+// ../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 = function(target, all) {
       for (var name in all) __defProp2(target, name, {
@@ -3578,31 +3065,83 @@ var require_ComponentContext_native = __commonJS({
       return __copyProps2(__defProp2({}, "__esModule", {
         value: !0
       }), mod);
-    }, ComponentContext_exports = {};
-    __export2(ComponentContext_exports, {
-      ComponentContext: function() {
-        return ComponentContext;
+    }, createMediaStyle_exports = {};
+    __export2(createMediaStyle_exports, {
+      MEDIA_SEP: function() {
+        return MEDIA_SEP;
+      },
+      createMediaStyle: function() {
+        return createMediaStyle;
       }
     });
-    module2.exports = __toCommonJS2(ComponentContext_exports);
-    var import_createStyledContext = require_createStyledContext_native(), ComponentContext = (0, import_createStyledContext.createStyledContext)({
-      disableSSR: void 0,
-      inText: !1,
-      language: null,
-      animationDriver: null,
-      setParentFocusState: null,
-      groups: {
-        emit: null,
-        subscribe: null,
-        state: {}
-      }
+    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",
+      focusVisible: "focus-visible",
+      focusWithin: "focus-within"
+    }, specificities = new Array(5).fill(0).map(function(_, i) {
+      return new Array(i).fill(":root").join("");
     });
+    function getThemeOrGroupSelector(name, styleInner, isGroup, groupParts) {
+      var isTheme = arguments.length > 4 && arguments[4] !== void 0 ? arguments[4] : !1, precedenceImportancePrefix = arguments.length > 5 && arguments[5] !== void 0 ? arguments[5] : "", selectorStart = styleInner.lastIndexOf(":root") + 5, selectorEnd = styleInner.lastIndexOf("{"), selector = styleInner.slice(selectorStart, selectorEnd), precedenceSpace = (0, import_config.getSetting)("themeClassNameOnRoot") && isTheme ? "" : " ", pseudoSelectorName = groupParts.pseudo ? groupPseudoToPseudoCSSMap[groupParts.pseudo] || groupParts.pseudo : void 0, pseudoSelector = pseudoSelectorName ? `:${pseudoSelectorName}` : "", presedencePrefix = `:root${precedenceImportancePrefix}${precedenceSpace}`, mediaSelector = `.t_${isGroup ? "group_" : ""}${name}${pseudoSelector}`;
+      return [
+        selector,
+        `${presedencePrefix}${mediaSelector} ${selector.replaceAll(":root", "")}`
+      ];
+    }
+    var createMediaStyle = function(styleObject, mediaKeyIn, mediaQueries, type, negate, priority) {
+      var [propertyIn, , identifier, pseudoIn, rules] = styleObject, property = propertyIn, enableMediaPropOrder = (0, import_config.getSetting)("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 = "", groupPriority = "", groupMediaKey, containerName, nextIdentifier = identifier.replace(ogPrefix, id), styleInner = rules.map(function(rule) {
+        return rule.replace(identifier, nextIdentifier);
+      }).join(";"), isHover = !1;
+      if (isNonWindowMedia) {
+        var specificity = (priority || 0) + (isGroup || isPlatform ? 1 : 0);
+        if (isTheme || isGroup) {
+          var groupParts = (0, import_getGroupPropParts.getGroupPropParts)(isTheme ? "theme-" + mediaKeyIn : mediaKeyIn), { name, media, pseudo } = groupParts;
+          groupMediaKey = media, isGroup && (containerName = name), (pseudo === "press" || pseudoIn === "active") && (specificity += 2), pseudo === "hover" && (isHover = !0);
+          var [selector, nextSelector] = getThemeOrGroupSelector(name, styleInner, isGroup, groupParts, isTheme, specificities[specificity]);
+          styleRule = styleInner.replace(selector, nextSelector);
+        } else styleRule = `${specificities[specificity]}${styleInner}`;
+      }
+      if (!isNonWindowMedia || groupMediaKey) {
+        if (!selectors) {
+          var mediaKeys = Object.keys(mediaQueries);
+          selectors = Object.fromEntries(mediaKeys.map(function(key) {
+            return [
+              key,
+              (0, import_useMedia.mediaObjectToString)(mediaQueries[key])
+            ];
+          })), enableMediaPropOrder || (prefixes = Object.fromEntries(mediaKeys.map(function(k, index) {
+            return [
+              k,
+              new Array(index + 1).fill(":root").join("")
+            ];
+          })));
+        }
+        var mediaKey = groupMediaKey || mediaKeyIn, mediaSelector = selectors[mediaKey], screenStr = negate ? "not all and " : "", mediaQuery = `${screenStr}${mediaSelector}`, precedenceImportancePrefix = groupMediaKey ? groupPriority : enableMediaPropOrder && priority ? (
+          // this new array should be cached
+          specificities[priority]
+        ) : (
+          // @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: ${(0, import_config.getSetting)("webContainerType") || "inline-size"}) {${styleRule}}`);
+      }
+      return isHover && (styleRule = `@media (hover:hover){${styleRule}}`), [
+        property,
+        void 0,
+        nextIdentifier,
+        void 0,
+        [
+          styleRule
+        ]
+      ];
+    };
   }
 });
 
-// ../web/dist/cjs/defaultComponentState.native.js
-var require_defaultComponentState_native = __commonJS({
-  "../web/dist/cjs/defaultComponentState.native.js"(exports2, module2) {
+// ../web/dist/cjs/helpers/defaultOffset.native.js
+var require_defaultOffset_native = __commonJS({
+  "../web/dist/cjs/helpers/defaultOffset.native.js"(exports2, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = function(target, all) {
       for (var name in all) __defProp2(target, name, {
@@ -3636,366 +3175,23 @@ var require_defaultComponentState_native = __commonJS({
       return __copyProps2(__defProp2({}, "__esModule", {
         value: !0
       }), mod);
-    }, defaultComponentState_exports = {};
-    __export2(defaultComponentState_exports, {
-      defaultComponentState: function() {
-        return defaultComponentState;
-      },
-      defaultComponentStateMounted: function() {
-        return defaultComponentStateMounted;
-      },
-      defaultComponentStateShouldEnter: function() {
-        return defaultComponentStateShouldEnter;
+    }, defaultOffset_exports = {};
+    __export2(defaultOffset_exports, {
+      defaultOffset: function() {
+        return defaultOffset;
       }
     });
-    module2.exports = __toCommonJS2(defaultComponentState_exports);
-    var defaultComponentState = {
-      hover: !1,
-      press: !1,
-      pressIn: !1,
-      focus: !1,
-      focusVisible: !1,
-      focusWithin: !1,
-      unmounted: !0,
-      disabled: !1
-    }, defaultComponentStateMounted = {
-      ...defaultComponentState,
-      unmounted: !1
-    }, defaultComponentStateShouldEnter = {
-      ...defaultComponentState,
-      unmounted: "should-enter"
+    module2.exports = __toCommonJS2(defaultOffset_exports);
+    var defaultOffset = {
+      height: 0,
+      width: 0
     };
   }
 });
 
-// ../web/dist/cjs/helpers/getShorthandValue.native.js
-var require_getShorthandValue_native = __commonJS({
-  "../web/dist/cjs/helpers/getShorthandValue.native.js"(exports2, module2) {
-    "use strict";
-    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = function(target, all) {
-      for (var name in all) __defProp2(target, name, {
-        get: all[name],
-        enumerable: !0
-      });
-    }, __copyProps2 = function(to, from, except, desc) {
-      var _iteratorNormalCompletion = !0, _didIteratorError = !1, _iteratorError = void 0;
-      if (from && typeof from == "object" || typeof from == "function") try {
-        for (var _loop = function() {
-          var key = _step.value;
-          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, {
-            get: function() {
-              return from[key];
-            },
-            enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable
-          });
-        }, _iterator = __getOwnPropNames2(from)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0) _loop();
-      } catch (err) {
-        _didIteratorError = !0, _iteratorError = err;
-      } finally {
-        try {
-          !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
-        } finally {
-          if (_didIteratorError)
-            throw _iteratorError;
-        }
-      }
-      return to;
-    }, __toCommonJS2 = function(mod) {
-      return __copyProps2(__defProp2({}, "__esModule", {
-        value: !0
-      }), mod);
-    }, getShorthandValue_exports = {};
-    __export2(getShorthandValue_exports, {
-      getShorthandValue: function() {
-        return getShorthandValue;
-      }
-    });
-    module2.exports = __toCommonJS2(getShorthandValue_exports);
-    var import_config = require_config_native(), inverseShorthands = null, getShorthandValue = function(props, key) {
-      inverseShorthands || (inverseShorthands = (0, import_config.getConfig)().inverseShorthands);
-      var _props_key;
-      return (_props_key = props[key]) !== null && _props_key !== void 0 ? _props_key : inverseShorthands ? props[inverseShorthands[key]] : void 0;
-    };
-  }
-});
-
-// ../web/dist/cjs/constants/accessibilityDirectMap.native.js
-var require_accessibilityDirectMap_native = __commonJS({
-  "../web/dist/cjs/constants/accessibilityDirectMap.native.js"(exports2, module2) {
-    "use strict";
-    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = function(target, all) {
-      for (var name in all) __defProp2(target, name, {
-        get: all[name],
-        enumerable: !0
-      });
-    }, __copyProps2 = function(to, from, except, desc) {
-      var _iteratorNormalCompletion = !0, _didIteratorError = !1, _iteratorError = void 0;
-      if (from && typeof from == "object" || typeof from == "function") try {
-        for (var _loop = function() {
-          var key = _step.value;
-          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, {
-            get: function() {
-              return from[key];
-            },
-            enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable
-          });
-        }, _iterator = __getOwnPropNames2(from)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0) _loop();
-      } catch (err) {
-        _didIteratorError = !0, _iteratorError = err;
-      } finally {
-        try {
-          !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
-        } finally {
-          if (_didIteratorError)
-            throw _iteratorError;
-        }
-      }
-      return to;
-    }, __toCommonJS2 = function(mod) {
-      return __copyProps2(__defProp2({}, "__esModule", {
-        value: !0
-      }), mod);
-    }, accessibilityDirectMap_native_exports = {};
-    __export2(accessibilityDirectMap_native_exports, {
-      accessibilityDirectMap: function() {
-        return accessibilityDirectMap;
-      },
-      accessibilityWebRoleToNativeRole: function() {
-        return accessibilityWebRoleToNativeRole;
-      },
-      nativeAccessibilityState: function() {
-        return nativeAccessibilityState;
-      },
-      nativeAccessibilityValue: function() {
-        return nativeAccessibilityValue;
-      },
-      webToNativeAccessibilityDirectMap: function() {
-        return webToNativeAccessibilityDirectMap;
-      }
-    });
-    module2.exports = __toCommonJS2(accessibilityDirectMap_native_exports);
-    var accessibilityDirectMap = {}, webToNativeAccessibilityDirectMap = {}, nativeAccessibilityValue = {}, nativeAccessibilityState = {}, accessibilityWebRoleToNativeRole = {};
-  }
-});
-
-// ../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 = function(target, all) {
-      for (var name in all) __defProp2(target, name, {
-        get: all[name],
-        enumerable: !0
-      });
-    }, __copyProps2 = function(to, from, except, desc) {
-      var _iteratorNormalCompletion = !0, _didIteratorError = !1, _iteratorError = void 0;
-      if (from && typeof from == "object" || typeof from == "function") try {
-        for (var _loop = function() {
-          var key = _step.value;
-          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, {
-            get: function() {
-              return from[key];
-            },
-            enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable
-          });
-        }, _iterator = __getOwnPropNames2(from)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0) _loop();
-      } catch (err) {
-        _didIteratorError = !0, _iteratorError = err;
-      } finally {
-        try {
-          !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
-        } finally {
-          if (_didIteratorError)
-            throw _iteratorError;
-        }
-      }
-      return to;
-    }, __toCommonJS2 = function(mod) {
-      return __copyProps2(__defProp2({}, "__esModule", {
-        value: !0
-      }), mod);
-    }, getGroupPropParts_exports = {};
-    __export2(getGroupPropParts_exports, {
-      getGroupPropParts: function() {
-        return getGroupPropParts;
-      }
-    });
-    module2.exports = __toCommonJS2(getGroupPropParts_exports);
-    var import_useMedia = require_useMedia_native();
-    function getGroupPropParts(groupProp) {
-      var 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 = function(target, all) {
-      for (var name in all) __defProp2(target, name, {
-        get: all[name],
-        enumerable: !0
-      });
-    }, __copyProps2 = function(to, from, except, desc) {
-      var _iteratorNormalCompletion = !0, _didIteratorError = !1, _iteratorError = void 0;
-      if (from && typeof from == "object" || typeof from == "function") try {
-        for (var _loop = function() {
-          var key = _step.value;
-          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, {
-            get: function() {
-              return from[key];
-            },
-            enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable
-          });
-        }, _iterator = __getOwnPropNames2(from)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0) _loop();
-      } catch (err) {
-        _didIteratorError = !0, _iteratorError = err;
-      } finally {
-        try {
-          !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
-        } finally {
-          if (_didIteratorError)
-            throw _iteratorError;
-        }
-      }
-      return to;
-    }, __toCommonJS2 = function(mod) {
-      return __copyProps2(__defProp2({}, "__esModule", {
-        value: !0
-      }), mod);
-    }, createMediaStyle_exports = {};
-    __export2(createMediaStyle_exports, {
-      MEDIA_SEP: function() {
-        return MEDIA_SEP;
-      },
-      createMediaStyle: function() {
-        return 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",
-      focusVisible: "focus-visible",
-      focusWithin: "focus-within"
-    }, specificities = new Array(5).fill(0).map(function(_, i) {
-      return new Array(i).fill(":root").join("");
-    });
-    function getThemeOrGroupSelector(name, styleInner, isGroup, groupParts) {
-      var isTheme = arguments.length > 4 && arguments[4] !== void 0 ? arguments[4] : !1, precedenceImportancePrefix = arguments.length > 5 && arguments[5] !== void 0 ? arguments[5] : "", selectorStart = styleInner.lastIndexOf(":root") + 5, selectorEnd = styleInner.lastIndexOf("{"), selector = styleInner.slice(selectorStart, selectorEnd), precedenceSpace = (0, import_config.getSetting)("themeClassNameOnRoot") && isTheme ? "" : " ", pseudoSelectorName = groupParts.pseudo ? groupPseudoToPseudoCSSMap[groupParts.pseudo] || groupParts.pseudo : void 0, pseudoSelector = pseudoSelectorName ? `:${pseudoSelectorName}` : "", presedencePrefix = `:root${precedenceImportancePrefix}${precedenceSpace}`, mediaSelector = `.t_${isGroup ? "group_" : ""}${name}${pseudoSelector}`;
-      return [
-        selector,
-        `${presedencePrefix}${mediaSelector} ${selector.replaceAll(":root", "")}`
-      ];
-    }
-    var createMediaStyle = function(styleObject, mediaKeyIn, mediaQueries, type, negate, priority) {
-      var [propertyIn, , identifier, pseudoIn, rules] = styleObject, property = propertyIn, enableMediaPropOrder = (0, import_config.getSetting)("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 = "", groupPriority = "", groupMediaKey, containerName, nextIdentifier = identifier.replace(ogPrefix, id), styleInner = rules.map(function(rule) {
-        return rule.replace(identifier, nextIdentifier);
-      }).join(";"), isHover = !1;
-      if (isNonWindowMedia) {
-        var specificity = (priority || 0) + (isGroup || isPlatform ? 1 : 0);
-        if (isTheme || isGroup) {
-          var groupParts = (0, import_getGroupPropParts.getGroupPropParts)(isTheme ? "theme-" + mediaKeyIn : mediaKeyIn), { name, media, pseudo } = groupParts;
-          groupMediaKey = media, isGroup && (containerName = name), (pseudo === "press" || pseudoIn === "active") && (specificity += 2), pseudo === "hover" && (isHover = !0);
-          var [selector, nextSelector] = getThemeOrGroupSelector(name, styleInner, isGroup, groupParts, isTheme, specificities[specificity]);
-          styleRule = styleInner.replace(selector, nextSelector);
-        } else styleRule = `${specificities[specificity]}${styleInner}`;
-      }
-      if (!isNonWindowMedia || groupMediaKey) {
-        if (!selectors) {
-          var mediaKeys = Object.keys(mediaQueries);
-          selectors = Object.fromEntries(mediaKeys.map(function(key) {
-            return [
-              key,
-              (0, import_useMedia.mediaObjectToString)(mediaQueries[key])
-            ];
-          })), enableMediaPropOrder || (prefixes = Object.fromEntries(mediaKeys.map(function(k, index) {
-            return [
-              k,
-              new Array(index + 1).fill(":root").join("")
-            ];
-          })));
-        }
-        var mediaKey = groupMediaKey || mediaKeyIn, mediaSelector = selectors[mediaKey], screenStr = negate ? "not all and " : "", mediaQuery = `${screenStr}${mediaSelector}`, precedenceImportancePrefix = groupMediaKey ? groupPriority : enableMediaPropOrder && priority ? (
-          // this new array should be cached
-          specificities[priority]
-        ) : (
-          // @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: ${(0, import_config.getSetting)("webContainerType") || "inline-size"}) {${styleRule}}`);
-      }
-      return isHover && (styleRule = `@media (hover:hover){${styleRule}}`), [
-        property,
-        void 0,
-        nextIdentifier,
-        void 0,
-        [
-          styleRule
-        ]
-      ];
-    };
-  }
-});
-
-// ../web/dist/cjs/helpers/defaultOffset.native.js
-var require_defaultOffset_native = __commonJS({
-  "../web/dist/cjs/helpers/defaultOffset.native.js"(exports2, module2) {
-    "use strict";
-    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = function(target, all) {
-      for (var name in all) __defProp2(target, name, {
-        get: all[name],
-        enumerable: !0
-      });
-    }, __copyProps2 = function(to, from, except, desc) {
-      var _iteratorNormalCompletion = !0, _didIteratorError = !1, _iteratorError = void 0;
-      if (from && typeof from == "object" || typeof from == "function") try {
-        for (var _loop = function() {
-          var key = _step.value;
-          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, {
-            get: function() {
-              return from[key];
-            },
-            enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable
-          });
-        }, _iterator = __getOwnPropNames2(from)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0) _loop();
-      } catch (err) {
-        _didIteratorError = !0, _iteratorError = err;
-      } finally {
-        try {
-          !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
-        } finally {
-          if (_didIteratorError)
-            throw _iteratorError;
-        }
-      }
-      return to;
-    }, __toCommonJS2 = function(mod) {
-      return __copyProps2(__defProp2({}, "__esModule", {
-        value: !0
-      }), mod);
-    }, defaultOffset_exports = {};
-    __export2(defaultOffset_exports, {
-      defaultOffset: function() {
-        return defaultOffset;
-      }
-    });
-    module2.exports = __toCommonJS2(defaultOffset_exports);
-    var defaultOffset = {
-      height: 0,
-      width: 0
-    };
-  }
-});
-
-// ../../../node_modules/@react-native/normalize-color/index.js
-var require_normalize_color = __commonJS({
-  "../../../node_modules/@react-native/normalize-color/index.js"(exports2, module2) {
+// ../../../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")
@@ -6433,266 +5629,763 @@ var require_getSplitStyles_native = __commonJS({
           }
           console.groupEnd();
         }
-      };
-      conf = conf || (0, import_config.getConfig)(), import_constants2.isWeb && styleProps.isAnimated && conf.animations.isReactNative && !styleProps.noNormalize && (styleProps.noNormalize = "values");
-      var { shorthands } = conf, { isHOC, isText, isInput, variants, isReactNative, inlineProps, inlineWhenUnflattened, parentStaticConfig, acceptsClassName } = staticConfig, viewProps = {}, mediaState2 = styleProps.mediaState || import_useMedia.mediaState, usedKeys = {}, shouldDoClasses = acceptsClassName && import_constants2.isWeb && !styleProps.noClass, rulesToInsert = void 0, classNames = {}, transforms = {}, pseudos = null, space = props.space, hasMedia = !1, dynamicThemeAccess, pseudoGroups, mediaGroups, className = props.className || "", mediaStylesSeen = 0, validStyles2 = staticConfig.validStyles || (staticConfig.isText || staticConfig.isInput ? import_helpers2.stylePropsText : import_helpers2.validStyles);
-      process.env.NODE_ENV === "development" && debug === "profile" && time`split-styles-setup`;
-      var styleState = {
-        classNames,
-        conf,
-        props,
-        styleProps,
-        componentState,
-        staticConfig,
-        style: null,
-        theme,
-        usedKeys,
-        viewProps,
-        context,
-        debug
-      };
-      if (process.env.IS_STATIC === "is_static") {
-        var { fallbackProps } = styleProps;
-        fallbackProps && (styleState.props = new Proxy(props, {
-          get(_, key4, val2) {
-            return Reflect.has(props, key4) ? Reflect.get(props, key4) : Reflect.get(fallbackProps, key4);
-          }
-        }));
+      };
+      conf = conf || (0, import_config.getConfig)(), import_constants2.isWeb && styleProps.isAnimated && conf.animations.isReactNative && !styleProps.noNormalize && (styleProps.noNormalize = "values");
+      var { shorthands } = conf, { isHOC, isText, isInput, variants, isReactNative, inlineProps, inlineWhenUnflattened, parentStaticConfig, acceptsClassName } = staticConfig, viewProps = {}, mediaState2 = styleProps.mediaState || import_useMedia.mediaState, usedKeys = {}, shouldDoClasses = acceptsClassName && import_constants2.isWeb && !styleProps.noClass, rulesToInsert = void 0, classNames = {}, transforms = {}, pseudos = null, space = props.space, hasMedia = !1, dynamicThemeAccess, pseudoGroups, mediaGroups, className = props.className || "", mediaStylesSeen = 0, validStyles2 = staticConfig.validStyles || (staticConfig.isText || staticConfig.isInput ? import_helpers2.stylePropsText : import_helpers2.validStyles);
+      process.env.NODE_ENV === "development" && debug === "profile" && time`split-styles-setup`;
+      var styleState = {
+        classNames,
+        conf,
+        props,
+        styleProps,
+        componentState,
+        staticConfig,
+        style: null,
+        theme,
+        usedKeys,
+        viewProps,
+        context,
+        debug
+      };
+      if (process.env.IS_STATIC === "is_static") {
+        var { fallbackProps } = styleProps;
+        fallbackProps && (styleState.props = new Proxy(props, {
+          get(_, key4, val2) {
+            return Reflect.has(props, key4) ? Reflect.get(props, key4) : Reflect.get(fallbackProps, key4);
+          }
+        }));
+      }
+      process.env.NODE_ENV === "development" && debug === "profile" && time`style-state`, process.env.NODE_ENV === "development" && debug && debug !== "profile" && import_constants2.isClient && (consoleGroupCollapsed("getSplitStyles (collapsed)"), (0, import_log.log)({
+        props,
+        staticConfig,
+        shouldDoClasses,
+        styleProps,
+        rulesToInsert,
+        componentState,
+        styleState,
+        theme: {
+          ...theme
+        }
+      }), console.groupEnd());
+      var { asChild } = props, { accept } = staticConfig, { noSkip, disableExpandShorthands, noExpand } = styleProps, { webContainerType } = conf.settings, parentVariants = parentStaticConfig == null ? void 0 : parentStaticConfig.variants;
+      for (var keyOg in props) _loop(keyOg);
+      process.env.NODE_ENV === "development" && debug === "profile" && time`split-styles-propsend`;
+      var avoidNormalize = styleProps.noNormalize === !1;
+      if (!avoidNormalize) {
+        if (styleState.style && ((0, import_expandStyles.fixStyles)(styleState.style), !styleProps.noExpand && !styleProps.noMergeStyle && import_constants2.isWeb && !isReactNative && (0, import_getCSSStylesAtomic.styleToCSS)(styleState.style)), styleState.flatTransforms) {
+          var _styleState;
+          (_styleState = styleState).style || (_styleState.style = {}), Object.entries(styleState.flatTransforms).sort(function(param, param1) {
+            var [a] = param, [b] = param1;
+            return (0, import_sortString.sortString)(a, b);
+          }).forEach(function(param) {
+            var [key4, val2] = param;
+            mergeTransform(styleState.style, key4, val2, !0);
+          });
+        }
+        if (parentSplitStyles) {
+          if (0) for (var key in parentSplitStyles.classNames) var val;
+          if (!shouldDoClasses) for (var key1 in parentSplitStyles.style) {
+            var _styleState1;
+            key1 in classNames || styleState.style && key1 in styleState.style || ((_styleState1 = styleState).style || (_styleState1.style = {}), styleState.style[key1] = parentSplitStyles.style[key1]);
+          }
+        }
+      }
+      if (0) var _styleState_style, shouldStringifyTransforms;
+      if (0) {
+        if (!styleProps.noMergeStyle && styleState.style && shouldDoClasses) {
+          var retainedStyles, shouldRetain;
+          if (!styleState.style.$$css) {
+            var atomic, _iteratorNormalCompletion, _didIteratorError, _iteratorError;
+            try {
+              for (var _iterator, _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0) var atomicStyle, _props_animateOnly, _props_animateOnly1, key2, value, identifier, isAnimatedAndAnimateOnly, nonAnimatedAnimateOnly;
+            } catch (err) {
+            } finally {
+            }
+          }
+          if (transforms) for (var namespace in transforms) {
+            var hash, val1, identifier1;
+            if (import_constants2.isClient && !insertedTransforms[identifier1]) var rule;
+          }
+        }
+        if (isReactNative) {
+          if (viewProps.tabIndex === 0) var _viewProps, _accessible;
+        } else if (viewProps.tabIndex == null) var _viewProps_focusable, isFocusable, role;
+      }
+      var styleProp = props.style;
+      if (!styleProps.noMergeStyle && styleProp) if (isHOC) viewProps.style = normalizeStyle(styleProp);
+      else for (var isArray = Array.isArray(styleProp), len = isArray ? styleProp.length : 1, i = 0; i < len; i++) {
+        var style = isArray ? styleProp[i] : styleProp;
+        if (style) if (style.$$css) Object.assign(styleState.classNames, style);
+        else {
+          var _styleState2;
+          (_styleState2 = styleState).style || (_styleState2.style = {}), Object.assign(styleState.style, normalizeStyle(style));
+        }
+      }
+      var style1 = styleState.style;
+      if (style1 != null && style1.fontFamily) {
+        var _getFont, faceInfo = (_getFont = (0, import_config.getFont)(style1.fontFamily)) === null || _getFont === void 0 ? void 0 : _getFont.face;
+        if (faceInfo) {
+          var _faceInfo_style_fontWeight_, _faceInfo_style_fontWeight, overrideFace = (_faceInfo_style_fontWeight = faceInfo[style1.fontWeight]) === null || _faceInfo_style_fontWeight === void 0 || (_faceInfo_style_fontWeight_ = _faceInfo_style_fontWeight[style1.fontStyle || "normal"]) === null || _faceInfo_style_fontWeight_ === void 0 ? void 0 : _faceInfo_style_fontWeight_.val;
+          overrideFace && (style1.fontFamily = overrideFace, styleState.fontFamily = overrideFace, delete style1.fontWeight, delete style1.fontStyle);
+        }
+        process.env.NODE_ENV === "development" && debug && debug !== "profile" && (0, import_log.log)(`Found fontFamily native: ${style1.fontFamily}`, faceInfo);
+      }
+      process.env.NODE_ENV === "development" && debug === "profile" && time`split-styles-pre-result`;
+      var result = {
+        space,
+        hasMedia,
+        fontFamily: styleState.fontFamily,
+        viewProps,
+        style: styleState.style,
+        pseudos,
+        classNames,
+        rulesToInsert,
+        dynamicThemeAccess,
+        pseudoGroups,
+        mediaGroups
+      }, asChildExceptStyleLike = asChild === "except-style" || asChild === "except-style-web";
+      if (!styleProps.noMergeStyle && !asChildExceptStyleLike) {
+        var style2 = styleState.style;
+        if (0) {
+          var _staticConfig_defaultProps, fontFamily, fontFamilyClassName, groupClassName, componentNameFinal, componentClassName, classList, finalClassName;
+          if (!(styleProps.isAnimated && !conf.animations.supportsCSSVars && isReactNative) && isReactNative) {
+            var cnStyles, _iteratorNormalCompletion1, _didIteratorError1, _iteratorError1;
+            try {
+              for (var _iterator1, _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = !0) var name;
+            } catch (err) {
+            } finally {
+            }
+          }
+        } else style2 && (viewProps.style = style2);
+      }
+      if (process.env.NODE_ENV === "development" && debug === "verbose" && import_isDevTools.isDevTools) {
+        consoleGroupCollapsed("\u{1F539} getSplitStyles ===>");
+        try {
+          var logs = {
+            ...result,
+            className,
+            componentState,
+            transforms,
+            viewProps,
+            rulesToInsert,
+            parentSplitStyles
+          };
+          for (var key3 in logs) (0, import_log.log)(key3, logs[key3]);
+        } catch {
+        }
+        console.groupEnd();
+      }
+      return process.env.NODE_ENV === "development" && debug === "profile" && time`split-styles-done`, result;
+    };
+    function mergeClassName(transforms, classNames, key, val) {
+      var isMediaOrPseudo = arguments.length > 4 && arguments[4] !== void 0 ? arguments[4] : !1, isInsertingNow = arguments.length > 5 && arguments[5] !== void 0 ? arguments[5] : !1;
+      if (0) var _transforms, _ns, ns, transform;
+    }
+    function mergeStyle(styleState, key, val) {
+      var disableNormalize = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : !1, { classNames, viewProps, usedKeys, styleProps, staticConfig } = styleState;
+      if (import_constants2.isWeb && (val == null ? void 0 : val[0]) === "_") {
+        var _usedKeys, _key;
+        classNames[key] = val, (_usedKeys = usedKeys)[_key = key] || (_usedKeys[_key] = 1);
+      } else if (key in import_helpers2.stylePropsTransform) {
+        var _styleState;
+        (_styleState = styleState).flatTransforms || (_styleState.flatTransforms = {}), styleState.flatTransforms[key] = val;
+      } else {
+        var shouldNormalize = import_constants2.isWeb && !disableNormalize && !styleProps.noNormalize, out = shouldNormalize ? (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(val, key) : val;
+        if (
+          // accept is for props not styles
+          staticConfig.accept && key in staticConfig.accept
+        ) viewProps[key] = out;
+        else {
+          var _styleState1;
+          (_styleState1 = styleState).style || (_styleState1.style = {}), styleState.style[key] = out;
+        }
+      }
+    }
+    var getSubStyle = function(styleState, subKey, styleIn, avoidMergeTransform) {
+      var _loop = function(key1) {
+        var val = styleIn[key1];
+        key1 = conf2.shorthands[key1] || key1;
+        var shouldSkip = !staticConfig.isHOC && key1 in import_skipProps.skipProps && !styleProps.noSkip;
+        if (shouldSkip) return key = key1, "continue";
+        (0, import_propMapper.propMapper)(key1, val, styleState, !1, function(skey, sval) {
+          skey in import_helpers2.validPseudoKeys && (sval = getSubStyle(styleState, skey, sval, avoidMergeTransform)), !avoidMergeTransform && skey in import_helpers2.stylePropsTransform ? mergeTransform(styleOut, skey, sval) : styleOut[skey] = styleProps.noNormalize ? sval : (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(sval, key1);
+        }), key = key1;
+      }, { staticConfig, conf: conf2, styleProps } = styleState, styleOut = {};
+      for (var key in styleIn) _loop(key);
+      return styleProps.noNormalize || (0, import_expandStyles.fixStyles)(styleOut), styleOut;
+    }, useInsertEffectCompat = import_constants2.isWeb ? import_react3.default.useInsertionEffect || import_constants2.useIsomorphicLayoutEffect : function() {
+    }, useSplitStyles = function(a, b, c, d, e, f, g, h, i, j) {
+      conf = conf || (0, import_config.getConfig)();
+      var res = getSplitStyles(a, b, c, d, e, f, g, h, i, j);
+      return res;
+    };
+    function addStyleToInsertRules(rulesToInsert, styleObject) {
+      if (0) var identifier;
+    }
+    var defaultColor = process.env.TAMAGUI_DEFAULT_COLOR || "rgba(0,0,0,0)", animatableDefaults = {
+      ...Object.fromEntries(Object.entries(import_helpers2.tokenCategories.color).map(function(param) {
+        var [k, v] = param;
+        return [
+          k,
+          defaultColor
+        ];
+      })),
+      opacity: 1,
+      scale: 1,
+      rotate: "0deg",
+      rotateY: "0deg",
+      rotateX: "0deg",
+      x: 0,
+      y: 0,
+      borderRadius: 0
+    }, lowercaseHyphenate = function(match) {
+      return `-${match.toLowerCase()}`;
+    }, hyphenate = function(str) {
+      return str.replace(/[A-Z]/g, lowercaseHyphenate);
+    }, mergeTransform = function(obj, key, val) {
+      var backwards = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : !1, _obj;
+      typeof obj.transform != "string" && ((_obj = obj).transform || (_obj.transform = []), obj.transform[backwards ? "unshift" : "push"]({
+        [mapTransformKeys[key] || key]: val
+      }));
+    }, mapTransformKeys = {
+      x: "translateX",
+      y: "translateY"
+    };
+    function passDownProp(viewProps, key, val) {
+      var shouldMergeObject = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : !1;
+      if (shouldMergeObject) {
+        var next = {
+          ...viewProps[key],
+          ...val
+        };
+        delete viewProps[key], viewProps[key] = next;
+      } else viewProps[key] = val;
+    }
+    function mergeMediaByImportance(styleState, mediaKey, key, value, importancesUsed, isSizeMedia, importanceBump, debugProp) {
+      var importance = (0, import_useMedia.getMediaImportanceIfMoreImportant)(mediaKey, key, importancesUsed, isSizeMedia);
+      if (importanceBump && (importance = (importance || 0) + importanceBump), process.env.NODE_ENV === "development" && debugProp === "verbose" && (0, import_log.log)(`mergeMediaByImportance ${key} importance existing ${importancesUsed[key]} next ${importance}`), importance === null) return !1;
+      if (importancesUsed[key] = importance, key in import_pseudoDescriptors.pseudoDescriptors) {
+        var descriptor = import_pseudoDescriptors.pseudoDescriptors[key], descriptorKey = descriptor.stateKey || descriptor.name, isDisabled = styleState.componentState[descriptorKey] === !1;
+        if (isDisabled) return !1;
+        for (var subKey in value) mergeStyle(styleState, subKey, value[subKey]);
+      } else mergeStyle(styleState, key, value);
+      return !0;
+    }
+    function normalizeStyle(style) {
+      var out = {};
+      for (var key in style) {
+        var val = style[key];
+        key in import_helpers2.stylePropsTransform ? mergeTransform(out, key, val) : out[key] = (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(val, key);
+      }
+      return import_constants2.isWeb && Array.isArray(out.transform) && (out.transform = (0, import_transformsToString.transformsToString)(out.transform)), (0, import_expandStyles.fixStyles)(out), out;
+    }
+    function applyDefaultStyle(pkey, styleState) {
+      var defaultValues = animatableDefaults[pkey];
+      defaultValues != null && !(pkey in styleState.usedKeys) && (!styleState.style || !(pkey in styleState.style)) && mergeStyle(styleState, pkey, defaultValues);
+    }
+  }
+});
+
+// ../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 = function(target, all) {
+      for (var name in all) __defProp2(target, name, {
+        get: all[name],
+        enumerable: !0
+      });
+    }, __copyProps2 = function(to, from, except, desc) {
+      var _iteratorNormalCompletion = !0, _didIteratorError = !1, _iteratorError = void 0;
+      if (from && typeof from == "object" || typeof from == "function") try {
+        for (var _loop = function() {
+          var key = _step.value;
+          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, {
+            get: function() {
+              return from[key];
+            },
+            enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable
+          });
+        }, _iterator = __getOwnPropNames2(from)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0) _loop();
+      } catch (err) {
+        _didIteratorError = !0, _iteratorError = err;
+      } finally {
+        try {
+          !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
+        } finally {
+          if (_didIteratorError)
+            throw _iteratorError;
+        }
       }
-      process.env.NODE_ENV === "development" && debug === "profile" && time`style-state`, process.env.NODE_ENV === "development" && debug && debug !== "profile" && import_constants2.isClient && (consoleGroupCollapsed("getSplitStyles (collapsed)"), (0, import_log.log)({
-        props,
-        staticConfig,
-        shouldDoClasses,
-        styleProps,
-        rulesToInsert,
-        componentState,
-        styleState,
-        theme: {
-          ...theme
+      return to;
+    }, __toCommonJS2 = function(mod) {
+      return __copyProps2(__defProp2({}, "__esModule", {
+        value: !0
+      }), mod);
+    }, mergeProps_exports = {};
+    __export2(mergeProps_exports, {
+      mergeProps: function() {
+        return mergeProps;
+      }
+    });
+    module2.exports = __toCommonJS2(mergeProps_exports);
+    var import_useMedia = require_useMedia_native(), import_pseudoDescriptors = require_pseudoDescriptors_native(), mergeProps = function(a, b, inverseShorthands) {
+      var out = {};
+      for (var key in a) mergeProp(out, a, b, key, inverseShorthands);
+      if (b) for (var key1 in b) mergeProp(out, b, void 0, key1, inverseShorthands);
+      return out;
+    };
+    function mergeProp(out, a, b, key, inverseShorthands) {
+      var 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/setElementProps.native.js
+var require_setElementProps_native = __commonJS({
+  "../web/dist/cjs/helpers/setElementProps.native.js"(exports2, module2) {
+    "use strict";
+    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = function(target, all) {
+      for (var name in all) __defProp2(target, name, {
+        get: all[name],
+        enumerable: !0
+      });
+    }, __copyProps2 = function(to, from, except, desc) {
+      var _iteratorNormalCompletion = !0, _didIteratorError = !1, _iteratorError = void 0;
+      if (from && typeof from == "object" || typeof from == "function") try {
+        for (var _loop = function() {
+          var key = _step.value;
+          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, {
+            get: function() {
+              return from[key];
+            },
+            enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable
+          });
+        }, _iterator = __getOwnPropNames2(from)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0) _loop();
+      } catch (err) {
+        _didIteratorError = !0, _iteratorError = err;
+      } finally {
+        try {
+          !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
+        } finally {
+          if (_didIteratorError)
+            throw _iteratorError;
         }
-      }), console.groupEnd());
-      var { asChild } = props, { accept } = staticConfig, { noSkip, disableExpandShorthands, noExpand } = styleProps, { webContainerType } = conf.settings, parentVariants = parentStaticConfig == null ? void 0 : parentStaticConfig.variants;
-      for (var keyOg in props) _loop(keyOg);
-      process.env.NODE_ENV === "development" && debug === "profile" && time`split-styles-propsend`;
-      var avoidNormalize = styleProps.noNormalize === !1;
-      if (!avoidNormalize) {
-        if (styleState.style && ((0, import_expandStyles.fixStyles)(styleState.style), !styleProps.noExpand && !styleProps.noMergeStyle && import_constants2.isWeb && !isReactNative && (0, import_getCSSStylesAtomic.styleToCSS)(styleState.style)), styleState.flatTransforms) {
-          var _styleState;
-          (_styleState = styleState).style || (_styleState.style = {}), Object.entries(styleState.flatTransforms).sort(function(param, param1) {
-            var [a] = param, [b] = param1;
-            return (0, import_sortString.sortString)(a, b);
-          }).forEach(function(param) {
-            var [key4, val2] = param;
-            mergeTransform(styleState.style, key4, val2, !0);
+      }
+      return to;
+    }, __toCommonJS2 = function(mod) {
+      return __copyProps2(__defProp2({}, "__esModule", {
+        value: !0
+      }), mod);
+    }, setElementProps_native_exports = {};
+    __export2(setElementProps_native_exports, {
+      setElementProps: function() {
+        return setElementProps;
+      }
+    });
+    module2.exports = __toCommonJS2(setElementProps_native_exports);
+    function setElementProps(element) {
+      element && !element.getBoundingClientRect && (element.getBoundingClientRect = function() {
+        if (element.unstable_getBoundingClientRect != null) return element.unstable_getBoundingClientRect();
+      });
+    }
+  }
+});
+
+// ../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 = function(target, all) {
+      for (var name in all) __defProp2(target, name, {
+        get: all[name],
+        enumerable: !0
+      });
+    }, __copyProps2 = function(to, from, except, desc) {
+      var _iteratorNormalCompletion = !0, _didIteratorError = !1, _iteratorError = void 0;
+      if (from && typeof from == "object" || typeof from == "function") try {
+        for (var _loop = function() {
+          var key = _step.value;
+          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, {
+            get: function() {
+              return from[key];
+            },
+            enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable
+          });
+        }, _iterator = __getOwnPropNames2(from)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0) _loop();
+      } catch (err) {
+        _didIteratorError = !0, _iteratorError = err;
+      } finally {
+        try {
+          !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
+        } finally {
+          if (_didIteratorError)
+            throw _iteratorError;
+        }
+      }
+      return to;
+    }, __toCommonJS2 = function(mod) {
+      return __copyProps2(__defProp2({}, "__esModule", {
+        value: !0
+      }), mod);
+    }, createShallowSetState_exports = {};
+    __export2(createShallowSetState_exports, {
+      createShallowSetState: function() {
+        return createShallowSetState;
+      },
+      isEqualShallow: function() {
+        return isEqualShallow;
+      },
+      mergeIfNotShallowEqual: function() {
+        return mergeIfNotShallowEqual;
+      }
+    });
+    module2.exports = __toCommonJS2(createShallowSetState_exports);
+    var import_react3 = require("react"), callImmediate = function(cb) {
+      return cb();
+    };
+    function createShallowSetState(setter, isDisabled, transition, debug, callback) {
+      return (0, import_react3.useCallback)(function(next) {
+        var wrap = transition ? import_react3.startTransition : callImmediate;
+        wrap(function() {
+          setter(function(prev) {
+            var out = mergeIfNotShallowEqual(prev, next, isDisabled, debug);
+            return callback == null || callback(out), out;
+          });
+        });
+      }, [
+        setter,
+        isDisabled,
+        transition,
+        debug
+      ]);
+    }
+    function mergeIfNotShallowEqual(prev, next, isDisabled, debug) {
+      if (isDisabled || !prev || !next || isEqualShallow(prev, next)) return prev || next;
+      if (process.env.NODE_ENV === "development" && debug && (console.info("setStateShallow CHANGE", {
+        prev,
+        next
+      }), debug === "break")) debugger;
+      return {
+        ...prev,
+        ...next
+      };
+    }
+    function isEqualShallow(prev, next) {
+      for (var key in next) if (prev[key] !== next[key]) return !1;
+      return !0;
+    }
+  }
+});
+
+// ../web/dist/cjs/helpers/subscribeToContextGroup.native.js
+var require_subscribeToContextGroup_native = __commonJS({
+  "../web/dist/cjs/helpers/subscribeToContextGroup.native.js"(exports2, module2) {
+    "use strict";
+    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = function(target, all) {
+      for (var name in all) __defProp2(target, name, {
+        get: all[name],
+        enumerable: !0
+      });
+    }, __copyProps2 = function(to, from, except, desc) {
+      var _iteratorNormalCompletion = !0, _didIteratorError = !1, _iteratorError = void 0;
+      if (from && typeof from == "object" || typeof from == "function") try {
+        for (var _loop = function() {
+          var key = _step.value;
+          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, {
+            get: function() {
+              return from[key];
+            },
+            enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable
           });
-        }
-        if (parentSplitStyles) {
-          if (0) for (var key in parentSplitStyles.classNames) var val;
-          if (!shouldDoClasses) for (var key1 in parentSplitStyles.style) {
-            var _styleState1;
-            key1 in classNames || styleState.style && key1 in styleState.style || ((_styleState1 = styleState).style || (_styleState1.style = {}), styleState.style[key1] = parentSplitStyles.style[key1]);
-          }
+        }, _iterator = __getOwnPropNames2(from)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0) _loop();
+      } catch (err) {
+        _didIteratorError = !0, _iteratorError = err;
+      } finally {
+        try {
+          !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
+        } finally {
+          if (_didIteratorError)
+            throw _iteratorError;
         }
       }
-      if (0) var _styleState_style, shouldStringifyTransforms;
-      if (0) {
-        if (!styleProps.noMergeStyle && styleState.style && shouldDoClasses) {
-          var retainedStyles, shouldRetain;
-          if (!styleState.style.$$css) {
-            var atomic, _iteratorNormalCompletion, _didIteratorError, _iteratorError;
-            try {
-              for (var _iterator, _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0) var atomicStyle, _props_animateOnly, _props_animateOnly1, key2, value, identifier, isAnimatedAndAnimateOnly, nonAnimatedAnimateOnly;
-            } catch (err) {
-            } finally {
-            }
+      return to;
+    }, __toCommonJS2 = function(mod) {
+      return __copyProps2(__defProp2({}, "__esModule", {
+        value: !0
+      }), mod);
+    }, subscribeToContextGroup_exports = {};
+    __export2(subscribeToContextGroup_exports, {
+      subscribeToContextGroup: function() {
+        return subscribeToContextGroup;
+      }
+    });
+    module2.exports = __toCommonJS2(subscribeToContextGroup_exports);
+    var import_createShallowSetState = require_createShallowSetState_native(), import_useMedia = require_useMedia_native(), subscribeToContextGroup = function(param) {
+      var { disabled = !1, setStateShallow, pseudoGroups, mediaGroups, componentContext, state } = param;
+      if (pseudoGroups || mediaGroups) {
+        var _componentContext_groups_subscribe, _componentContext_groups, current = {
+          pseudo: {},
+          media: {}
+        };
+        return process.env.NODE_ENV === "development" && !componentContext.groups && console.debug("No context group found"), (_componentContext_groups = componentContext.groups) === null || _componentContext_groups === void 0 || (_componentContext_groups_subscribe = _componentContext_groups.subscribe) === null || _componentContext_groups_subscribe === void 0 ? void 0 : _componentContext_groups_subscribe.call(_componentContext_groups, function(name, param2) {
+          var { layout, pseudo } = param2;
+          if (pseudo && pseudoGroups != null && pseudoGroups.has(String(name))) Object.assign(current.pseudo, pseudo), persist();
+          else if (layout && mediaGroups) {
+            var mediaState2 = (0, import_useMedia.getMediaState)(mediaGroups, layout), next = (0, import_createShallowSetState.mergeIfNotShallowEqual)(current.media, mediaState2);
+            next !== current.media && (Object.assign(current.media, next), persist());
           }
-          if (transforms) for (var namespace in transforms) {
-            var hash, val1, identifier1;
-            if (import_constants2.isClient && !insertedTransforms[identifier1]) var rule;
+          function persist() {
+            var group = {
+              ...state.group,
+              [name]: current
+            };
+            setStateShallow({
+              group
+            });
           }
-        }
-        if (isReactNative) {
-          if (viewProps.tabIndex === 0) var _viewProps, _accessible;
-        } else if (viewProps.tabIndex == null) var _viewProps_focusable, isFocusable, role;
+        });
       }
-      var styleProp = props.style;
-      if (!styleProps.noMergeStyle && styleProp) if (isHOC) viewProps.style = normalizeStyle(styleProp);
-      else for (var isArray = Array.isArray(styleProp), len = isArray ? styleProp.length : 1, i = 0; i < len; i++) {
-        var style = isArray ? styleProp[i] : styleProp;
-        if (style) if (style.$$css) Object.assign(styleState.classNames, style);
-        else {
-          var _styleState2;
-          (_styleState2 = styleState).style || (_styleState2.style = {}), Object.assign(styleState.style, normalizeStyle(style));
+    };
+  }
+});
+
+// ../web/dist/cjs/hooks/useThemeState.native.js
+var require_useThemeState_native = __commonJS({
+  "../web/dist/cjs/hooks/useThemeState.native.js"(exports2, module2) {
+    "use strict";
+    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = function(target, all) {
+      for (var name in all) __defProp2(target, name, {
+        get: all[name],
+        enumerable: !0
+      });
+    }, __copyProps2 = function(to, from, except, desc) {
+      var _iteratorNormalCompletion = !0, _didIteratorError = !1, _iteratorError = void 0;
+      if (from && typeof from == "object" || typeof from == "function") try {
+        for (var _loop = function() {
+          var key = _step.value;
+          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, {
+            get: function() {
+              return from[key];
+            },
+            enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable
+          });
+        }, _iterator = __getOwnPropNames2(from)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0) _loop();
+      } catch (err) {
+        _didIteratorError = !0, _iteratorError = err;
+      } finally {
+        try {
+          !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
+        } finally {
+          if (_didIteratorError)
+            throw _iteratorError;
         }
       }
-      var style1 = styleState.style;
-      if (style1 != null && style1.fontFamily) {
-        var _getFont, faceInfo = (_getFont = (0, import_config.getFont)(style1.fontFamily)) === null || _getFont === void 0 ? void 0 : _getFont.face;
-        if (faceInfo) {
-          var _faceInfo_style_fontWeight_, _faceInfo_style_fontWeight, overrideFace = (_faceInfo_style_fontWeight = faceInfo[style1.fontWeight]) === null || _faceInfo_style_fontWeight === void 0 || (_faceInfo_style_fontWeight_ = _faceInfo_style_fontWeight[style1.fontStyle || "normal"]) === null || _faceInfo_style_fontWeight_ === void 0 ? void 0 : _faceInfo_style_fontWeight_.val;
-          overrideFace && (style1.fontFamily = overrideFace, styleState.fontFamily = overrideFace, delete style1.fontWeight, delete style1.fontStyle);
-        }
-        process.env.NODE_ENV === "development" && debug && debug !== "profile" && (0, import_log.log)(`Found fontFamily native: ${style1.fontFamily}`, faceInfo);
+      return to;
+    }, __toCommonJS2 = function(mod) {
+      return __copyProps2(__defProp2({}, "__esModule", {
+        value: !0
+      }), mod);
+    }, useThemeState_exports = {};
+    __export2(useThemeState_exports, {
+      ThemeStateContext: function() {
+        return ThemeStateContext;
+      },
+      forceUpdateThemes: function() {
+        return forceUpdateThemes2;
+      },
+      getRootThemeState: function() {
+        return getRootThemeState;
+      },
+      getThemeState: function() {
+        return getThemeState;
+      },
+      hasThemeUpdatingProps: function() {
+        return hasThemeUpdatingProps;
+      },
+      useThemeState: function() {
+        return useThemeState;
       }
-      process.env.NODE_ENV === "development" && debug === "profile" && time`split-styles-pre-result`;
-      var result = {
-        space,
-        hasMedia,
-        fontFamily: styleState.fontFamily,
-        viewProps,
-        style: styleState.style,
-        pseudos,
-        classNames,
-        rulesToInsert,
-        dynamicThemeAccess,
-        pseudoGroups,
-        mediaGroups
-      }, asChildExceptStyleLike = asChild === "except-style" || asChild === "except-style-web";
-      if (!styleProps.noMergeStyle && !asChildExceptStyleLike) {
-        var style2 = styleState.style;
-        if (0) {
-          var _staticConfig_defaultProps, fontFamily, fontFamilyClassName, groupClassName, componentNameFinal, componentClassName, classList, finalClassName;
-          if (!(styleProps.isAnimated && !conf.animations.supportsCSSVars && isReactNative) && isReactNative) {
-            var cnStyles, _iteratorNormalCompletion1, _didIteratorError1, _iteratorError1;
-            try {
-              for (var _iterator1, _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = !0) var name;
-            } catch (err) {
-            } finally {
-            }
+    });
+    module2.exports = __toCommonJS2(useThemeState_exports);
+    var import_react3 = require("react"), import_config = require_config_native(), ThemeStateContext = (0, import_react3.createContext)(""), allListeners = /* @__PURE__ */ new Map(), listenersByParent = {}, states = /* @__PURE__ */ new Map(), forceUpdateThemes2 = function() {
+      allListeners.forEach(function(cb) {
+        return cb();
+      });
+    }, getThemeState = function(id) {
+      return states.get(id);
+    }, rootThemeState = null, getRootThemeState = function() {
+      return rootThemeState;
+    }, HasRenderedOnce = /* @__PURE__ */ new WeakMap(), useThemeState = function(props) {
+      var isRoot = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !1, keys = arguments.length > 2 ? arguments[2] : void 0, { disable } = props, parentId = (0, import_react3.useContext)(ThemeStateContext);
+      if (disable) return states.get(parentId) || {
+        id: "",
+        name: "light",
+        theme: (0, import_config.getConfig)().themes.light,
+        inverses: 0
+      };
+      var id = (0, import_react3.useId)(), subscribe = (0, import_react3.useCallback)(function(cb) {
+        var _listenersByParent, _parentId;
+        return (_listenersByParent = listenersByParent)[_parentId = parentId] || (_listenersByParent[_parentId] = /* @__PURE__ */ new Set()), listenersByParent[parentId].add(id), allListeners.set(id, cb), function() {
+          allListeners.delete(id), listenersByParent[parentId].delete(id);
+        };
+      }, [
+        id,
+        parentId,
+        keys
+      ]), propsKey = getPropsKey(props), getSnapshot = function() {
+        return getSnapshotFrom(props, propsKey, isRoot, id, parentId, keys);
+      };
+      process.env.NODE_ENV === "development" && globalThis.time && globalThis.time`theme-prep-uses`;
+      var state = (0, import_react3.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+      return (0, import_react3.useLayoutEffect)(function() {
+        if (propsKey) {
+          if (!HasRenderedOnce.has(keys)) {
+            HasRenderedOnce.set(keys, !0);
+            return;
           }
-        } else style2 && (viewProps.style = style2);
-      }
-      if (process.env.NODE_ENV === "development" && debug === "verbose" && import_isDevTools.isDevTools) {
-        consoleGroupCollapsed("\u{1F539} getSplitStyles ===>");
-        try {
-          var logs = {
-            ...result,
-            className,
-            componentState,
-            transforms,
-            viewProps,
-            rulesToInsert,
-            parentSplitStyles
-          };
-          for (var key3 in logs) (0, import_log.log)(key3, logs[key3]);
-        } catch {
-        }
-        console.groupEnd();
-      }
-      return process.env.NODE_ENV === "development" && debug === "profile" && time`split-styles-done`, result;
-    };
-    function mergeClassName(transforms, classNames, key, val) {
-      var isMediaOrPseudo = arguments.length > 4 && arguments[4] !== void 0 ? arguments[4] : !1, isInsertingNow = arguments.length > 5 && arguments[5] !== void 0 ? arguments[5] : !1;
-      if (0) var _transforms, _ns, ns, transform;
-    }
-    function mergeStyle(styleState, key, val) {
-      var disableNormalize = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : !1, { classNames, viewProps, usedKeys, styleProps, staticConfig } = styleState;
-      if (import_constants2.isWeb && (val == null ? void 0 : val[0]) === "_") {
-        var _usedKeys, _key;
-        classNames[key] = val, (_usedKeys = usedKeys)[_key = key] || (_usedKeys[_key] = 1);
-      } else if (key in import_helpers2.stylePropsTransform) {
-        var _styleState;
-        (_styleState = styleState).flatTransforms || (_styleState.flatTransforms = {}), styleState.flatTransforms[key] = val;
-      } else {
-        var shouldNormalize = import_constants2.isWeb && !disableNormalize && !styleProps.noNormalize, out = shouldNormalize ? (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(val, key) : val;
-        if (
-          // accept is for props not styles
-          staticConfig.accept && key in staticConfig.accept
-        ) viewProps[key] = out;
-        else {
-          var _styleState1;
-          (_styleState1 = styleState).style || (_styleState1.style = {}), styleState.style[key] = out;
+          if (process.env.NODE_ENV === "development" && props.debug && props.debug !== "profile") {
+            var _states_get;
+            console.warn(` \xB7 useTheme(${id}) scheduleUpdate`, propsKey, (_states_get = states.get(id)) === null || _states_get === void 0 ? void 0 : _states_get.name);
+          }
+          scheduleUpdate(id);
         }
-      }
-    }
-    var getSubStyle = function(styleState, subKey, styleIn, avoidMergeTransform) {
-      var _loop = function(key1) {
-        var val = styleIn[key1];
-        key1 = conf2.shorthands[key1] || key1;
-        var shouldSkip = !staticConfig.isHOC && key1 in import_skipProps.skipProps && !styleProps.noSkip;
-        if (shouldSkip) return key = key1, "continue";
-        (0, import_propMapper.propMapper)(key1, val, styleState, !1, function(skey, sval) {
-          skey in import_helpers2.validPseudoKeys && (sval = getSubStyle(styleState, skey, sval, avoidMergeTransform)), !avoidMergeTransform && skey in import_helpers2.stylePropsTransform ? mergeTransform(styleOut, skey, sval) : styleOut[skey] = styleProps.noNormalize ? sval : (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(sval, key1);
-        }), key = key1;
-      }, { staticConfig, conf: conf2, styleProps } = styleState, styleOut = {};
-      for (var key in styleIn) _loop(key);
-      return styleProps.noNormalize || (0, import_expandStyles.fixStyles)(styleOut), styleOut;
-    }, useInsertEffectCompat = import_constants2.isWeb ? import_react3.default.useInsertionEffect || import_constants2.useIsomorphicLayoutEffect : function() {
-    }, useSplitStyles = function(a, b, c, d, e, f, g, h, i, j) {
-      conf = conf || (0, import_config.getConfig)();
-      var res = getSplitStyles(a, b, c, d, e, f, g, h, i, j);
-      return res;
-    };
-    function addStyleToInsertRules(rulesToInsert, styleObject) {
-      if (0) var identifier;
-    }
-    var defaultColor = process.env.TAMAGUI_DEFAULT_COLOR || "rgba(0,0,0,0)", animatableDefaults = {
-      ...Object.fromEntries(Object.entries(import_helpers2.tokenCategories.color).map(function(param) {
-        var [k, v] = param;
-        return [
-          k,
-          defaultColor
-        ];
-      })),
-      opacity: 1,
-      scale: 1,
-      rotate: "0deg",
-      rotateY: "0deg",
-      rotateX: "0deg",
-      x: 0,
-      y: 0,
-      borderRadius: 0
-    }, lowercaseHyphenate = function(match) {
-      return `-${match.toLowerCase()}`;
-    }, hyphenate = function(str) {
-      return str.replace(/[A-Z]/g, lowercaseHyphenate);
-    }, mergeTransform = function(obj, key, val) {
-      var backwards = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : !1, _obj;
-      typeof obj.transform != "string" && ((_obj = obj).transform || (_obj.transform = []), obj.transform[backwards ? "unshift" : "push"]({
-        [mapTransformKeys[key] || key]: val
-      }));
-    }, mapTransformKeys = {
-      x: "translateX",
-      y: "translateY"
+      }, [
+        keys,
+        propsKey
+      ]), process.env.NODE_ENV === "development" && props.debug && (console.groupCollapsed(` \xB7 useTheme(${id}) =>`, state.name, id === state.id ? "\u{1F389}" : "\u23ED\uFE0F"), console.info({
+        state,
+        parentId,
+        props,
+        propsKey,
+        id,
+        parentState: states.get(parentId)
+      }), console.groupEnd()), state.id === id ? {
+        ...state,
+        isNew: !0
+      } : state;
+    }, themes = null, getSnapshotFrom = function(props, propsKey) {
+      var isRoot = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : !1, id = arguments.length > 3 ? arguments[3] : void 0, parentId = arguments.length > 4 ? arguments[4] : void 0, keys = arguments.length > 5 ? arguments[5] : void 0, _keys_current, _props_needsUpdate, needsUpdate = (keys == null || (_keys_current = keys.current) === null || _keys_current === void 0 ? void 0 : _keys_current.size) || ((_props_needsUpdate = props.needsUpdate) === null || _props_needsUpdate === void 0 ? void 0 : _props_needsUpdate.call(props)), parentState = states.get(parentId);
+      themes || (themes = (0, import_config.getConfig)().themes);
+      var lastState = states.get(id), name = propsKey ? getNewThemeName(parentState == null ? void 0 : parentState.name, props, !!needsUpdate) : null;
+      if (process.env.NODE_ENV === "development" && props.debug && props.debug !== "profile") {
+        var message = ` \xB7 useTheme(${id}) snapshot ${name}, parent ${parentState == null ? void 0 : parentState.id} needsUpdate ${needsUpdate}`;
+        console.info(message);
+      }
+      var isSameAsParent = !name && propsKey;
+      if (parentState && isSameAsParent) return parentState;
+      if (!name) return lastState && !needsUpdate ? lastState : (states.set(id, parentState), parentState);
+      if (lastState && lastState.name === name) return lastState;
+      var scheme = getScheme(name), _parentState_inverses, parentInverses = (_parentState_inverses = parentState == null ? void 0 : parentState.inverses) !== null && _parentState_inverses !== void 0 ? _parentState_inverses : 0, isInverse = parentState && scheme !== parentState.scheme, inverses = parentInverses + (isInverse ? 1 : 0), nextState = {
+        id,
+        name,
+        theme: themes[name],
+        scheme,
+        parentId,
+        parentName: parentState == null ? void 0 : parentState.name,
+        inverses,
+        isInverse
+      };
+      return process.env.NODE_ENV === "development" && props.debug && props.debug !== "profile" && (console.groupCollapsed(` \xB7 useTheme(${id}) \u23ED\uFE0F ${name}`), console.info("state", nextState), console.groupEnd()), states.set(id, nextState), isRoot && (rootThemeState = nextState), nextState;
     };
-    function passDownProp(viewProps, key, val) {
-      var shouldMergeObject = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : !1;
-      if (shouldMergeObject) {
-        var next = {
-          ...viewProps[key],
-          ...val
-        };
-        delete viewProps[key], viewProps[key] = next;
-      } else viewProps[key] = val;
-    }
-    function mergeMediaByImportance(styleState, mediaKey, key, value, importancesUsed, isSizeMedia, importanceBump, debugProp) {
-      var importance = (0, import_useMedia.getMediaImportanceIfMoreImportant)(mediaKey, key, importancesUsed, isSizeMedia);
-      if (importanceBump && (importance = (importance || 0) + importanceBump), process.env.NODE_ENV === "development" && debugProp === "verbose" && (0, import_log.log)(`mergeMediaByImportance ${key} importance existing ${importancesUsed[key]} next ${importance}`), importance === null) return !1;
-      if (importancesUsed[key] = importance, key in import_pseudoDescriptors.pseudoDescriptors) {
-        var descriptor = import_pseudoDescriptors.pseudoDescriptors[key], descriptorKey = descriptor.stateKey || descriptor.name, isDisabled = styleState.componentState[descriptorKey] === !1;
-        if (isDisabled) return !1;
-        for (var subKey in value) mergeStyle(styleState, subKey, value[subKey]);
-      } else mergeStyle(styleState, key, value);
-      return !0;
-    }
-    function normalizeStyle(style) {
-      var out = {};
-      for (var key in style) {
-        var val = style[key];
-        key in import_helpers2.stylePropsTransform ? mergeTransform(out, key, val) : out[key] = (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(val, key);
+    function scheduleUpdate(id) {
+      for (var queue = [
+        id
+      ], visited = /* @__PURE__ */ new Set(); queue.length; ) {
+        var parent = queue.shift(), children = listenersByParent[parent];
+        if (children) {
+          var _iteratorNormalCompletion = !0, _didIteratorError = !1, _iteratorError = void 0;
+          try {
+            for (var _iterator = children[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0) {
+              var childId = _step.value;
+              visited.has(childId) || (visited.add(childId), queue.push(childId));
+            }
+          } catch (err) {
+            _didIteratorError = !0, _iteratorError = err;
+          } finally {
+            try {
+              !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
+            } finally {
+              if (_didIteratorError) throw _iteratorError;
+            }
+          }
+        }
       }
-      return import_constants2.isWeb && Array.isArray(out.transform) && (out.transform = (0, import_transformsToString.transformsToString)(out.transform)), (0, import_expandStyles.fixStyles)(out), out;
+      visited.forEach(function(childId2) {
+        var cb = allListeners.get(childId2);
+        cb == null || cb();
+      });
     }
-    function applyDefaultStyle(pkey, styleState) {
-      var defaultValues = animatableDefaults[pkey];
-      defaultValues != null && !(pkey in styleState.usedKeys) && (!styleState.style || !(pkey in styleState.style)) && mergeStyle(styleState, pkey, defaultValues);
+    var validSchemes = {
+      light: "light",
+      dark: "dark"
+    };
+    function getScheme(name) {
+      return validSchemes[name.split("_")[0]];
+    }
+    function getNewThemeName() {
+      var parentName = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "", { name, reset, componentName, inverse } = arguments.length > 1 ? arguments[1] : void 0, forceUpdate = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : !1;
+      if (name && reset) throw new Error(process.env.NODE_ENV === "production" ? "\u274C004" : "Cannot reset and set a new name at the same time.");
+      if (reset) {
+        if (!parentName) throw new Error("\u203C\uFE0F");
+        var lastPartIndex = parentName.lastIndexOf("_");
+        return lastPartIndex <= 0 ? parentName : parentName.slice(lastPartIndex);
+      }
+      var { themes: themes2 } = (0, import_config.getConfig)(), parentParts = parentName.split("_"), lastName = parentParts[parentParts.length - 1];
+      lastName && lastName[0].toLowerCase() !== lastName[0] && parentParts.pop();
+      for (var subNames = [
+        name && componentName ? `${name}_${componentName}` : void 0,
+        name,
+        componentName
+      ].filter(Boolean), found = null, max = parentParts.length, i = 0; i <= max; i++) {
+        var base = (i === 0 ? parentParts : parentParts.slice(0, -i)).join("_"), _iteratorNormalCompletion = !0, _didIteratorError = !1, _iteratorError = void 0;
+        try {
+          for (var _iterator = subNames[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0) {
+            var subName = _step.value, potential = base ? `${base}_${subName}` : subName;
+            if (potential in themes2) {
+              found = potential;
+              break;
+            }
+          }
+        } catch (err) {
+          _didIteratorError = !0, _iteratorError = err;
+        } finally {
+          try {
+            !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
+          } finally {
+            if (_didIteratorError) throw _iteratorError;
+          }
+        }
+        if (found) break;
+      }
+      if (found && inverse) {
+        var scheme = found.split("_")[0];
+        found = found.replace(new RegExp(`^${scheme}`), scheme === "light" ? "dark" : "light");
+      }
+      return !forceUpdate && found === parentName && // if its a scheme only sub-theme, we always consider it "new" because it likely inverses
+      // and we want to avoid reparenting
+      !validSchemes[found] ? null : found;
     }
+    var getPropsKey = function(param) {
+      var { name, reset, inverse, forceClassName, componentName } = param;
+      return `${name || ""}${inverse || ""}${reset || ""}${forceClassName || ""}${componentName || ""}`;
+    }, hasThemeUpdatingProps = function(props) {
+      return "inverse" in props || "name" in props || "reset" in props || "forceClassName" in props;
+    };
   }
 });
 
-// ../web/dist/cjs/helpers/mergeProps.native.js
-var require_mergeProps_native = __commonJS({
-  "../web/dist/cjs/helpers/mergeProps.native.js"(exports2, module2) {
+// ../web/dist/cjs/hooks/doesRootSchemeMatchSystem.native.js
+var require_doesRootSchemeMatchSystem_native = __commonJS({
+  "../web/dist/cjs/hooks/doesRootSchemeMatchSystem.native.js"(exports2, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = function(target, all) {
       for (var name in all) __defProp2(target, name, {
@@ -6726,36 +6419,24 @@ var require_mergeProps_native = __commonJS({
       return __copyProps2(__defProp2({}, "__esModule", {
         value: !0
       }), mod);
-    }, mergeProps_exports = {};
-    __export2(mergeProps_exports, {
-      mergeProps: function() {
-        return mergeProps;
+    }, doesRootSchemeMatchSystem_native_exports = {};
+    __export2(doesRootSchemeMatchSystem_native_exports, {
+      doesRootSchemeMatchSystem: function() {
+        return doesRootSchemeMatchSystem;
       }
     });
-    module2.exports = __toCommonJS2(mergeProps_exports);
-    var import_useMedia = require_useMedia_native(), import_pseudoDescriptors = require_pseudoDescriptors_native(), mergeProps = function(a, b, inverseShorthands) {
-      var out = {};
-      for (var key in a) mergeProp(out, a, b, key, inverseShorthands);
-      if (b) for (var key1 in b) mergeProp(out, b, void 0, key1, inverseShorthands);
-      return out;
-    };
-    function mergeProp(out, a, b, key, inverseShorthands) {
-      var 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);
+    module2.exports = __toCommonJS2(doesRootSchemeMatchSystem_native_exports);
+    var import_react_native = require("react-native"), import_useThemeState = require_useThemeState_native();
+    function doesRootSchemeMatchSystem() {
+      var _getRootThemeState;
+      return ((_getRootThemeState = (0, import_useThemeState.getRootThemeState)()) === null || _getRootThemeState === void 0 ? void 0 : _getRootThemeState.scheme) === import_react_native.Appearance.getColorScheme();
     }
   }
 });
 
-// ../web/dist/cjs/helpers/setElementProps.native.js
-var require_setElementProps_native = __commonJS({
-  "../web/dist/cjs/helpers/setElementProps.native.js"(exports2, module2) {
+// ../web/dist/cjs/hooks/getThemeProxied.native.js
+var require_getThemeProxied_native = __commonJS({
+  "../web/dist/cjs/hooks/getThemeProxied.native.js"(exports2, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = function(target, all) {
       for (var name in all) __defProp2(target, name, {
@@ -6789,24 +6470,69 @@ var require_setElementProps_native = __commonJS({
       return __copyProps2(__defProp2({}, "__esModule", {
         value: !0
       }), mod);
-    }, setElementProps_native_exports = {};
-    __export2(setElementProps_native_exports, {
-      setElementProps: function() {
-        return setElementProps;
+    }, getThemeProxied_exports = {};
+    __export2(getThemeProxied_exports, {
+      getThemeProxied: function() {
+        return getThemeProxied;
       }
     });
-    module2.exports = __toCommonJS2(setElementProps_native_exports);
-    function setElementProps(element) {
-      element && !element.getBoundingClientRect && (element.getBoundingClientRect = function() {
-        if (element.unstable_getBoundingClientRect != null) return element.unstable_getBoundingClientRect();
-      });
+    module2.exports = __toCommonJS2(getThemeProxied_exports);
+    var import_constants2 = require_index_native2(), import_config = require_config_native(), import_createVariable = require_createVariable_native(), import_doesRootSchemeMatchSystem = require_doesRootSchemeMatchSystem_native(), cache2 = /* @__PURE__ */ new Map(), curKeys, curProps, emptyObject = {};
+    function getThemeProxied(_props, state, _keys) {
+      var theme = state == null ? void 0 : state.theme;
+      if (!theme) return emptyObject;
+      if (curKeys = _keys, curProps = _props, cache2.has(theme)) {
+        var proxied = cache2.get(theme);
+        return proxied;
+      }
+      var { name, scheme } = state, config = (0, import_config.getConfig)();
+      function track(key) {
+        curKeys && (curKeys.current || (curKeys.current = /* @__PURE__ */ new Set()), curKeys.current.add(key), process.env.NODE_ENV === "development" && curProps.debug && console.info(` \u{1F3A8} useTheme() tracking new key: ${key}`));
+      }
+      var proxied1 = Object.fromEntries(Object.entries(theme).flatMap(function(param) {
+        var [key, value] = param, proxied2 = {
+          ...value,
+          get val() {
+            return globalThis.tamaguiAvoidTracking || track(key), value.val;
+          },
+          get(platform) {
+            var outVal = (0, import_createVariable.getVariable)(value), shouldOptimize = scheme && platform !== "web" && import_constants2.isIos && !curProps.deopt && (0, import_config.getSetting)("fastSchemeChange") && state.inverses === 0 && (0, import_doesRootSchemeMatchSystem.doesRootSchemeMatchSystem)();
+            if (shouldOptimize) {
+              var _config_themes_name, _config_themes_oppositeName, oppositeScheme = scheme === "dark" ? "light" : "dark", oppositeName = name.replace(scheme, oppositeScheme), color = (0, import_createVariable.getVariable)((_config_themes_name = config.themes[name]) === null || _config_themes_name === void 0 ? void 0 : _config_themes_name[key]), oppositeColor = (0, import_createVariable.getVariable)((_config_themes_oppositeName = config.themes[oppositeName]) === null || _config_themes_oppositeName === void 0 ? void 0 : _config_themes_oppositeName[key]), dynamicVal = {
+                dynamic: {
+                  [scheme]: color,
+                  [oppositeScheme]: oppositeColor
+                }
+              };
+              return dynamicVal;
+            }
+            return process.env.NODE_ENV === "development" && curProps.debug && console.info(` \u{1F3A8} useTheme() tracking new key because of: 
+                not web: ${platform !== "web"}
+                isIOS: ${import_constants2.isIos}
+                deopt: ${curProps.deopt}
+                fastScheme: ${(0, import_config.getSetting)("fastSchemeChange")}
+              `), track(key), outVal;
+          }
+        };
+        return [
+          [
+            key,
+            proxied2
+          ],
+          [
+            `$${key}`,
+            proxied2
+          ]
+        ];
+      }));
+      return cache2.set(theme, proxied1), proxied1;
     }
   }
 });
 
-// ../web/dist/cjs/helpers/subscribeToContextGroup.native.js
-var require_subscribeToContextGroup_native = __commonJS({
-  "../web/dist/cjs/helpers/subscribeToContextGroup.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 = function(target, all) {
       for (var name in all) __defProp2(target, name, {
@@ -6840,38 +6566,29 @@ var require_subscribeToContextGroup_native = __commonJS({
       return __copyProps2(__defProp2({}, "__esModule", {
         value: !0
       }), mod);
-    }, subscribeToContextGroup_exports = {};
-    __export2(subscribeToContextGroup_exports, {
-      subscribeToContextGroup: function() {
-        return subscribeToContextGroup;
+    }, useTheme_exports = {};
+    __export2(useTheme_exports, {
+      useTheme: function() {
+        return useTheme;
+      },
+      useThemeWithState: function() {
+        return useThemeWithState;
       }
     });
-    module2.exports = __toCommonJS2(subscribeToContextGroup_exports);
-    var import_createShallowSetState = require_createShallowSetState_native(), import_useMedia = require_useMedia_native(), subscribeToContextGroup = function(param) {
-      var { disabled = !1, setStateShallow, pseudoGroups, mediaGroups, componentContext, state } = param;
-      if (pseudoGroups || mediaGroups) {
-        var _componentContext_groups_subscribe, _componentContext_groups, current = {
-          pseudo: {},
-          media: {}
-        };
-        return process.env.NODE_ENV === "development" && !componentContext.groups && console.debug("No context group found"), (_componentContext_groups = componentContext.groups) === null || _componentContext_groups === void 0 || (_componentContext_groups_subscribe = _componentContext_groups.subscribe) === null || _componentContext_groups_subscribe === void 0 ? void 0 : _componentContext_groups_subscribe.call(_componentContext_groups, function(name, param2) {
-          var { layout, pseudo } = param2;
-          if (pseudo && pseudoGroups != null && pseudoGroups.has(String(name))) Object.assign(current.pseudo, pseudo), persist();
-          else if (layout && mediaGroups) {
-            var mediaState2 = (0, import_useMedia.getMediaState)(mediaGroups, layout), next = (0, import_createShallowSetState.mergeIfNotShallowEqual)(current.media, mediaState2);
-            next !== current.media && (Object.assign(current.media, next), persist());
-          }
-          function persist() {
-            var group = {
-              ...state.group,
-              [name]: current
-            };
-            setStateShallow({
-              group
-            });
-          }
-        });
-      }
+    module2.exports = __toCommonJS2(useTheme_exports);
+    var import_react3 = require("react"), import_getThemeProxied = require_getThemeProxied_native(), import_useThemeState = require_useThemeState_native(), useTheme = function() {
+      var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, [theme] = useThemeWithState(props), res = theme;
+      return res;
+    }, useThemeWithState = function(props) {
+      var isRoot = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !1, keys = (0, import_react3.useRef)(null), themeState = (0, import_useThemeState.useThemeState)(props, isRoot, keys);
+      process.env.NODE_ENV === "development" && (themeState != null && themeState.theme || process.env.TAMAGUI_DISABLE_NO_THEME_WARNING !== "1" && console.error(`[tamagui] No theme found, this could be due to an invalid theme name (given theme props ${JSON.stringify(props)}).
+
+If this is intended and you are using Tamagui without any themes, you can disable this warning by setting the environment variable TAMAGUI_DISABLE_NO_THEME_WARNING=1`));
+      var themeProxied = (0, import_getThemeProxied.getThemeProxied)(props, themeState, keys);
+      return [
+        themeProxied,
+        themeState
+      ];
     };
   }
 });
@@ -6985,25 +6702,22 @@ var require_Theme_native = __commonJS({
       }
     });
     module2.exports = __toCommonJS2(Theme_exports);
-    var import_jsx_runtime = require("react/jsx-runtime"), import_constants2 = require_index_native2(), import_react3 = __toESM2(require("react")), import_createVariable = require_createVariable_native(), import_log = require_log_native(), import_ThemeManagerContext = require_ThemeManagerContext_native(), import_useTheme = require_useTheme_native(), import_ThemeDebug = require_ThemeDebug_native(), Theme = /* @__PURE__ */ (0, import_react3.forwardRef)(function(param, ref) {
-      var { children, ...props } = param;
-      if (props.disable) return children;
-      var isRoot = !!props._isRoot, themeState = (0, import_useTheme.useChangeThemeEffect)(props, isRoot), disableDirectChildTheme = props["disable-child-theme"], finalChildren = disableDirectChildTheme ? import_react3.Children.map(children, function(child) {
+    var import_jsx_runtime = require("react/jsx-runtime"), import_constants2 = require_index_native2(), import_react3 = __toESM2(require("react")), import_config = require_config_native(), import_createVariable = require_createVariable_native(), import_useTheme = require_useTheme_native(), import_useThemeState = require_useThemeState_native(), import_ThemeDebug = require_ThemeDebug_native(), empty = {
+      className: "",
+      style: {}
+    }, Theme = /* @__PURE__ */ (0, import_react3.forwardRef)(function(props, ref) {
+      if (props.disable) return props.children;
+      var isRoot = !!props._isRoot, [_, themeState] = (0, import_useTheme.useThemeWithState)(props, isRoot), disableDirectChildTheme = props["disable-child-theme"], finalChildren = disableDirectChildTheme ? import_react3.Children.map(props.children, function(child) {
         return /* @__PURE__ */ (0, import_react3.cloneElement)(child, {
           "data-disable-theme": !0
         });
-      }) : children;
+      }) : props.children;
       if (ref) try {
         import_react3.default.Children.only(finalChildren), finalChildren = /* @__PURE__ */ (0, import_react3.cloneElement)(finalChildren, {
           ref
         });
       } catch {
       }
-      process.env.NODE_ENV === "development" && props.debug === "visualize" && (finalChildren = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ThemeDebug.ThemeDebug, {
-        themeState,
-        themeProps: props,
-        children: finalChildren
-      }));
       var stateRef = (0, import_react3.useRef)({
         hasEverThemed: !1
       });
@@ -7011,61 +6725,65 @@ var require_Theme_native = __commonJS({
     });
     Theme.avoidForwardRef = !0;
     function getThemedChildren(themeState, children, props) {
-      var isRoot = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : !1, stateRef = arguments.length > 4 ? arguments[4] : void 0, { themeManager, isNewTheme } = themeState;
-      if (!themeManager) return children;
-      var { shallow, forceClassName } = props, shouldRenderChildrenWithTheme = isNewTheme || isRoot || "inverse" in props || "name" in props || "reset" in props || "forceClassName" in props || stateRef.current.hasEverThemed;
-      if (shouldRenderChildrenWithTheme && (stateRef.current.hasEverThemed = !0), !shouldRenderChildrenWithTheme) return children;
-      process.env.NODE_ENV === "development" && shouldRenderChildrenWithTheme && props.debug === "verbose" && (0, import_log.log)(`adding theme: isRoot ${isRoot}, inverse ${"inverse" in props}, isNewTheme ${isNewTheme}, hasEver ${stateRef.current.hasEverThemed}`, props);
-      var next = children;
-      shallow && (next = import_react3.Children.toArray(children).map(function(child) {
-        return /* @__PURE__ */ (0, import_react3.isValidElement)(child) ? /* @__PURE__ */ (0, import_react3.cloneElement)(child, void 0, /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Theme, {
-          name: themeManager.state.parentName,
-          children: child.props.children
-        })) : child;
-      }));
-      var elementsWithContext = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ThemeManagerContext.ThemeManagerContext.Provider, {
-        value: themeManager,
-        children: next
-      });
-      return forceClassName === !1 ? elementsWithContext : import_constants2.isWeb ? wrapThemeElements({
-        children: elementsWithContext,
-        themeState,
-        forceClassName,
-        isRoot
-      }) : elementsWithContext;
-    }
-    function wrapThemeElements(param) {
-      var { children, themeState, forceClassName, isRoot } = param;
-      if (isRoot && forceClassName === !1) return children;
-      var inverse = themeState.inversed, requiresExtraWrapper = typeof inverse == "boolean" || forceClassName, { className, style } = getThemeClassNameAndStyle(themeState, isRoot), themedChildren = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-        className: `${className} _dsp_contents is_Theme`,
-        style,
+      var isRoot = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : !1, stateRef = arguments.length > 4 ? arguments[4] : void 0, { shallow, forceClassName } = props, state = stateRef.current, hasEverThemed = state.hasEverThemed, shouldRenderChildrenWithTheme = hasEverThemed || themeState.isNew || isRoot || (0, import_useThemeState.hasThemeUpdatingProps)(props);
+      if (!shouldRenderChildrenWithTheme) return children;
+      children = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_useThemeState.ThemeStateContext.Provider, {
+        value: themeState.id,
         children
       });
-      if (requiresExtraWrapper) {
-        var _themeState_state, name = ((_themeState_state = themeState.state) === null || _themeState_state === void 0 ? void 0 : _themeState_state.name) || "", inverseClassName = name.startsWith("light") ? "t_light is_inversed" : name.startsWith("dark") ? "t_dark is_inversed" : "";
-        themedChildren = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-          className: `${inverse ? inverseClassName : ""} _dsp_contents`,
-          children: themedChildren
+      var { isInverse, name } = themeState, requiresExtraWrapper = isInverse || forceClassName;
+      if (state.hasEverThemed || (state.hasEverThemed = !0), (requiresExtraWrapper || // if the theme is exactly dark or light, its likely to change between dark/light
+      // and that would require wrapping which would re-parent, so to avoid re-parenting do this
+      themeState.name === "dark" || themeState.name === "light") && (state.hasEverThemed = "wrapped"), shallow && themeState.parentId) {
+        var parentState = (0, import_useThemeState.getThemeState)(themeState.isNew ? themeState.id : themeState.parentId);
+        if (!parentState) throw new Error("\u203C\uFE0F010");
+        children = import_react3.Children.toArray(children).map(function(child) {
+          return /* @__PURE__ */ (0, import_react3.isValidElement)(child) ? /* @__PURE__ */ (0, import_react3.cloneElement)(child, void 0, /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Theme, {
+            name: parentState.name,
+            children: child.props.children
+          })) : child;
         });
       }
-      return themedChildren;
+      if (process.env.NODE_ENV === "development" && props.debug && (console.warn(" getThemedChildren", {
+        requiresExtraWrapper,
+        forceClassName,
+        themeState,
+        state,
+        ...getThemeClassNameAndStyle(themeState, props, isRoot)
+      }), children = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ThemeDebug.ThemeDebug, {
+        themeState,
+        themeProps: props,
+        children
+      })), forceClassName === !1) return children;
+      if (import_constants2.isWeb) {
+        var { className, style } = getThemeClassNameAndStyle(themeState, props, isRoot);
+        if (children = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+          className: `${className} _dsp_contents is_Theme`,
+          style,
+          children
+        }), state.hasEverThemed === "wrapped") {
+          var className1 = requiresExtraWrapper ? `${isInverse ? name.startsWith("light") ? "t_light is_inversed" : name.startsWith("dark") ? "t_dark is_inversed" : "" : ""} _dsp_contents` : "_dsp_contents";
+          children = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+            className: className1,
+            children
+          });
+        }
+        return children;
+      }
+      return children;
     }
-    var emptyObj = {};
-    function getThemeClassNameAndStyle(themeState) {
-      var isRoot = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !1, _themeState_state, _themeState_state1;
-      if (!themeState.isNewTheme) return {
-        className: "",
-        style: emptyObj
-      };
-      var themeColor = !((_themeState_state = themeState.state) === null || _themeState_state === void 0) && _themeState_state.theme && themeState.isNewTheme ? (0, import_createVariable.variableToString)(themeState.state.theme.color) : "", style = themeColor ? {
+    function getThemeClassNameAndStyle(themeState, props) {
+      var isRoot = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : !1;
+      if (!themeState.isNew && !props.forceClassName) return empty;
+      var themeColor = themeState != null && themeState.theme && themeState.isNew ? (0, import_createVariable.variableToString)(themeState.theme.color) : "", style = themeColor ? {
         color: themeColor
-      } : void 0, className = ((_themeState_state1 = themeState.state) === null || _themeState_state1 === void 0 ? void 0 : _themeState_state1.className) || "";
-      return isRoot && (className = className.replace("t_sub_theme", "")), {
+      } : void 0, maxInverses = (0, import_config.getSetting)("maxDarkLightNesting") || 3, themeClassName = themeState.inverses >= maxInverses ? themeState.name : themeState.name.replace(schemePrefix, ""), className = `${isRoot ? "" : "t_sub_theme"} t_${themeClassName}`;
+      return {
         style,
         className
       };
     }
+    var schemePrefix = /^(dark|light)_/;
   }
 });
 
@@ -7280,7 +6998,21 @@ var require_useComponentState_native = __commonJS({
       import_constants2.isWeb && hasAnimationThatNeedsHydrate && !staticConfig.isHOC && !isHydrated && (isAnimated = !1, curStateRef.willHydrate = !0), disabled !== state.disabled && (state.disabled = disabled, disabled && Object.assign(state, import_defaultComponentState.defaultComponentStateMounted), setState({
         ...state
       }));
-      var setStateShallow = (0, import_createShallowSetState.createShallowSetState)(setState, disabled, !1, props.debug);
+      var groupName = props.group, setStateWrapper;
+      if (groupName) {
+        var groupContextState = groups.state;
+        setStateWrapper = function(state2) {
+          curStateRef.group.emit(groupName, {
+            pseudo: state2
+          });
+          var next = {
+            ...groupContextState[groupName],
+            ...state2
+          };
+          groupContextState[groupName] = next;
+        };
+      }
+      var setStateShallow = (0, import_createShallowSetState.createShallowSetState)(setState, disabled, !1, props.debug, setStateWrapper);
       if (presenceState && isAnimated && isHydrated && staticConfig.variants) {
         process.env.NODE_ENV === "development" && props.debug === "verbose" && console.warn(`has presenceState ${JSON.stringify(presenceState)}`);
         var { enterVariant, exitVariant, enterExitVariant, custom } = presenceState;
@@ -7297,7 +7029,6 @@ var require_useComponentState_native = __commonJS({
           isClassNameDisabled
         }));
       }
-      var groupName = props.group;
       if (groupName && !curStateRef.group) {
         var listeners = /* @__PURE__ */ new Set();
         curStateRef.group = {
@@ -7314,19 +7045,6 @@ var require_useComponentState_native = __commonJS({
           }
         };
       }
-      if (groupName) {
-        var groupContextState = groups.state, og = setStateShallow;
-        setStateShallow = function(state2) {
-          og(state2), curStateRef.group.emit(groupName, {
-            pseudo: state2
-          });
-          var next = {
-            ...groupContextState[groupName],
-            ...state2
-          };
-          groupContextState[groupName] = next;
-        };
-      }
       return {
         curStateRef,
         disabled,
@@ -7575,7 +7293,7 @@ var require_createComponent_native = __commonJS({
       }
     });
     module2.exports = __toCommonJS2(createComponent_exports);
-    var import_jsx_runtime = require("react/jsx-runtime"), import_compose_refs = require_index_native5(), import_constants2 = require_index_native2(), import_helpers2 = require_index_native3(), import_react3 = __toESM2(require("react")), import_config = require_config_native(), import_constants22 = require_constants_native2(), import_isDevTools = require_isDevTools_native(), import_ComponentContext = require_ComponentContext_native(), import_createVariable = require_createVariable_native(), import_defaultComponentState = require_defaultComponentState_native(), import_getShorthandValue = require_getShorthandValue_native(), import_getSplitStyles = require_getSplitStyles_native(), import_log = require_log_native(), import_mergeProps = require_mergeProps_native(), import_setElementProps = require_setElementProps_native(), import_subscribeToContextGroup = require_subscribeToContextGroup_native(), import_themeable = require_themeable_native(), import_wrapStyleTags = require_wrapStyleTags_native(), import_useComponentState = require_useComponentState_native(), import_useMedia = require_useMedia_native(), import_useTheme = require_useTheme_native(), import_setupHooks = require_setupHooks_native(), import_Slot = require_Slot_native(), import_Theme = require_Theme_native(), import_ThemeDebug = require_ThemeDebug_native(), time2, debugKeyListeners, startVisualizer, componentSetStates = /* @__PURE__ */ new Set();
+    var import_jsx_runtime = require("react/jsx-runtime"), import_compose_refs = require_index_native5(), import_constants2 = require_index_native2(), import_helpers2 = require_index_native3(), import_react3 = __toESM2(require("react")), import_config = require_config_native(), import_constants22 = require_constants_native2(), import_isDevTools = require_isDevTools_native(), import_ComponentContext = require_ComponentContext_native(), import_createVariable = require_createVariable_native(), import_defaultComponentState = require_defaultComponentState_native(), import_getShorthandValue = require_getShorthandValue_native(), import_getSplitStyles = require_getSplitStyles_native(), import_log = require_log_native(), import_mergeProps = require_mergeProps_native(), import_setElementProps = require_setElementProps_native(), import_subscribeToContextGroup = require_subscribeToContextGroup_native(), import_themeable = require_themeable_native(), import_wrapStyleTags = require_wrapStyleTags_native(), import_useComponentState = require_useComponentState_native(), import_useMedia = require_useMedia_native(), import_useTheme = require_useTheme_native(), import_setupHooks = require_setupHooks_native(), import_Slot = require_Slot_native(), import_Theme = require_Theme_native(), time2, debugKeyListeners, startVisualizer, componentSetStates = /* @__PURE__ */ new Set();
     typeof document < "u" && (cancelTouches = function() {
       componentSetStates.forEach(function(setState) {
         return setState(function(prev) {
@@ -7640,7 +7358,7 @@ var require_createComponent_native = __commonJS({
         defaultPropsKeyOrder: defaultProps ? Object.keys(defaultProps) : []
       });
       var component = /* @__PURE__ */ import_react3.default.forwardRef(function(propsIn, forwardedRef) {
-        var _themeState_state, _hooks_usePropsTransform, _hooks_useEvents, _config_animations, internalID = process.env.NODE_ENV === "development" ? import_react3.default.useId() : "";
+        var _hooks_usePropsTransform, _hooks_useEvents, _config_animations, internalID = process.env.NODE_ENV === "development" ? import_react3.default.useId() : "";
         if (process.env.NODE_ENV === "development" && startVisualizer && (startVisualizer(), startVisualizer = void 0), !hasSetupBaseViews) {
           var _hooks_getBaseViews;
           hasSetupBaseViews = !0;
@@ -7664,13 +7382,17 @@ var require_createComponent_native = __commonJS({
             finalVal !== void 0 && (overriddenContextProps || (overriddenContextProps = {}), overriddenContextProps[key] = finalVal);
           }
         }
+        var debugProp = propsIn.debug;
+        if (0)
+          var timer;
+        process.env.NODE_ENV === "development" && time2 && time2`non-tamagui time (ignore)`;
         var curDefaultProps = styledContextProps ? {
           ...defaultProps,
           ...styledContextProps
         } : defaultProps, props = propsIn;
         curDefaultProps && (props = (0, import_mergeProps.mergeProps)(curDefaultProps, propsIn));
-        var debugProp = props.debug, componentName2 = props.componentName || staticConfig.componentName;
-        if (process.env.NODE_ENV === "development" && import_constants2.isClient && import_react3.default.useEffect(function() {
+        var componentName2 = props.componentName || staticConfig.componentName;
+        process.env.NODE_ENV === "development" && import_constants2.isClient && import_react3.default.useEffect(function() {
           var overlay = null, debugVisualizerHandler = function() {
             var show = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : !1, node = curStateRef.host;
             if (node) if (show) {
@@ -7684,9 +7406,7 @@ var require_createComponent_native = __commonJS({
           };
         }, [
           componentName2
-        ]), !1)
-          var timer;
-        process.env.NODE_ENV === "development" && time2 && time2`start (ignore)`;
+        ]);
         var animationDriver = componentContext.animationDriver, useAnimations = animationDriver == null ? void 0 : animationDriver.useAnimations, { curStateRef, disabled, groupName, hasAnimationProp, hasEnterStyle, isAnimated, isExiting, isHydrated, presence, presenceState, setState, setStateShallow, noClass, state, stateRef, supportsCSSVars, willBeAnimated, willBeAnimatedClient } = (0, import_useComponentState.useComponentState)(props, componentContext, staticConfig, config);
         process.env.NODE_ENV === "development" && time2 && time2`use-state`;
         var hasTextAncestor = !!(import_constants2.isWeb && isText && componentContext.inText), isTaggable = !Component || typeof Component == "string", tagProp = props.tag, element = import_constants2.isWeb && isTaggable && tagProp || Component, BaseTextComponent = BaseText || element || "span", BaseViewComponent = BaseView || element || (hasTextAncestor ? "span" : "div"), elementType = isText ? BaseTextComponent : BaseViewComponent;
@@ -7730,7 +7450,7 @@ var require_createComponent_native = __commonJS({
           }
         }
         process.env.NODE_ENV === "development" && time2 && time2`pre-theme-media`;
-        var [themeState, theme] = (0, import_useTheme.useThemeWithState)(themeStateProps);
+        var [theme, themeState] = (0, import_useTheme.useThemeWithState)(themeStateProps);
         process.env.NODE_ENV === "development" && time2 && time2`theme`, elementType = Component || elementType;
         var isStringElement = typeof elementType == "string", mediaState2 = (0, import_useMedia.useMedia)(componentContext, debugProp);
         (0, import_createVariable.setDidGetVariableValue)(!1), process.env.NODE_ENV === "development" && time2 && time2`media`;
@@ -7745,7 +7465,7 @@ var require_createComponent_native = __commonJS({
           isAnimated,
           willBeAnimated,
           styledContextProps
-        }, themeName = (themeState == null || (_themeState_state = themeState.state) === null || _themeState_state === void 0 ? void 0 : _themeState_state.name) || "";
+        }, themeName = (themeState == null ? void 0 : themeState.name) || "";
         process.env.NODE_ENV === "development" && time2 && time2`split-styles-prepare`;
         var splitStyles = (0, import_getSplitStyles.useSplitStyles)(props, staticConfig, theme, themeName, state, styleProps, null, componentContext, elementType, debugProp);
         if (process.env.NODE_ENV === "development" && time2 && time2`split-styles`, props.group && props.untilMeasured === "hide" && !curStateRef.hasMeasured) {
@@ -7786,14 +7506,14 @@ var require_createComponent_native = __commonJS({
           (supportsCSSVars ? willBeAnimatedClient : willBeAnimated) && useAnimations && !isHOC
         );
         if (shouldUseAnimation) {
-          var _themeState_state1, animations = useAnimations({
+          var animations = useAnimations({
             props: propsWithAnimation,
             // if hydrating, send empty style
             style: splitStylesStyle || {},
             presence,
             componentState: state,
             styleProps,
-            theme: (_themeState_state1 = themeState.state) === null || _themeState_state1 === void 0 ? void 0 : _themeState_state1.theme,
+            theme,
             pseudos: pseudos || null,
             staticConfig,
             stateRef
@@ -7999,16 +7719,12 @@ If you meant to do this, you can disable this warning - either change untilMeasu
         }, [
           groupName
         ]);
-        if ((groupName && subGroupContext || propsIn.focusWithinStyle) && (content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ComponentContext.ComponentContext.Provider, {
+        if ((groupName || propsIn.focusWithinStyle) && (content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ComponentContext.ComponentContext.Provider, {
           ...componentContext,
           groups: subGroupContext,
           setParentFocusState: setStateShallow,
           children: content
-        })), process.env.NODE_ENV === "development" && time2 && time2`group-context`, content = disableTheme ? content : (0, import_Theme.getThemedChildren)(themeState, content, themeStateProps, !1, stateRef), process.env.NODE_ENV === "development" && time2 && time2`themed-children`, process.env.NODE_ENV === "development" && props.debug === "visualize" && (content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ThemeDebug.ThemeDebug, {
-          themeState,
-          themeProps: props,
-          children: content
-        })), staticConfig.context) {
+        })), process.env.NODE_ENV === "development" && time2 && time2`group-context`, content = disableTheme ? content : (0, import_Theme.getThemedChildren)(themeState, content, themeStateProps, !1, stateRef), process.env.NODE_ENV === "development" && time2 && time2`themed-children`, staticConfig.context) {
           var contextProps = staticConfig.context.props;
           for (var key1 in contextProps) if (viewProps.style && key1 in viewProps.style || key1 in viewProps) {
             var _viewProps_style;
@@ -9703,7 +9419,7 @@ var require_proxyThemeVariables_native = __commonJS({
 var require_useThemeName_native = __commonJS({
   "../web/dist/cjs/hooks/useThemeName.native.js"(exports2, module2) {
     "use strict";
-    var __create2 = Object.create, __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __getProtoOf2 = Object.getPrototypeOf, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = function(target, all) {
+    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = function(target, all) {
       for (var name in all) __defProp2(target, name, {
         get: all[name],
         enumerable: !0
@@ -9731,18 +9447,6 @@ var require_useThemeName_native = __commonJS({
         }
       }
       return to;
-    }, __toESM2 = function(mod, isNodeMode, target) {
-      return target = mod != null ? __create2(__getProtoOf2(mod)) : {}, __copyProps2(
-        // If the importer is in node compatibility mode or this is not an ESM
-        // file that has been converted to a CommonJS file using a Babel-
-        // compatible transform (i.e. "__esModule" has not been set), then set
-        // "default" to the CommonJS "module.exports" for node compatibility.
-        isNodeMode || !mod || !mod.__esModule ? __defProp2(target, "default", {
-          value: mod,
-          enumerable: !0
-        }) : target,
-        mod
-      );
     }, __toCommonJS2 = function(mod) {
       return __copyProps2(__defProp2({}, "__esModule", {
         value: !0
@@ -9754,17 +9458,20 @@ var require_useThemeName_native = __commonJS({
       }
     });
     module2.exports = __toCommonJS2(useThemeName_exports);
-    var import_constants2 = require_index_native2(), import_react3 = __toESM2(require("react")), import_ThemeManagerContext = require_ThemeManagerContext_native();
-    function useThemeName(opts) {
-      var manager = import_react3.default.useContext(import_ThemeManagerContext.ThemeManagerContext), [name, setName] = import_react3.default.useState((manager == null ? void 0 : manager.state.name) || "");
-      return (0, import_constants2.useIsomorphicLayoutEffect)(function() {
-        if (manager) return setName(manager.state.name), manager.onChangeTheme(function(next, manager2) {
-          var name2 = opts != null && opts.parent && manager2.state.parentName || next;
-          name2 && setName(name2);
-        });
-      }, [
-        manager == null ? void 0 : manager.state.name
-      ]), name;
+    var import_useThemeState = require_useThemeState_native(), forceUpdateState = {
+      forceClassName: !0,
+      deopt: !0,
+      needsUpdate: function() {
+        return !0;
+      }
+    }, forceKeys = {
+      current: /* @__PURE__ */ new Set([
+        ""
+      ])
+    };
+    function useThemeName() {
+      var _useThemeState;
+      return ((_useThemeState = (0, import_useThemeState.useThemeState)(forceUpdateState, !1, forceKeys)) === null || _useThemeState === void 0 ? void 0 : _useThemeState.name) || "";
     }
   }
 });
@@ -10014,14 +9721,14 @@ var require_useProps_native = __commonJS({
       return usePropsAndStyle(props, opts)[1] || {};
     }
     function usePropsAndStyle(props, opts) {
-      var _opts_forComponent, _themeState_state, _opts_forComponent_staticConfig, staticConfig = (_opts_forComponent_staticConfig = opts == null || (_opts_forComponent = opts.forComponent) === null || _opts_forComponent === void 0 ? void 0 : _opts_forComponent.staticConfig) !== null && _opts_forComponent_staticConfig !== void 0 ? _opts_forComponent_staticConfig : import_Stack.Stack.staticConfig, [themeState, theme] = (0, import_useTheme.useThemeWithState)({
+      var _opts_forComponent, _opts_forComponent_staticConfig, staticConfig = (_opts_forComponent_staticConfig = opts == null || (_opts_forComponent = opts.forComponent) === null || _opts_forComponent === void 0 ? void 0 : _opts_forComponent.staticConfig) !== null && _opts_forComponent_staticConfig !== void 0 ? _opts_forComponent_staticConfig : import_Stack.Stack.staticConfig, [theme, themeState] = (0, import_useTheme.useThemeWithState)({
         componentName: staticConfig.componentName,
         name: "theme" in props ? props.theme : void 0,
         inverse: "themeInverse" in props ? props.themeInverse : void 0
       }), componentContext = import_react3.default.useContext(import_ComponentContext.ComponentContext), { state, disabled, setStateShallow } = (0, import_useComponentState.useComponentState)(props, componentContext, staticConfig, (0, import_config.getConfig)()), mediaStateNow = opts != null && opts.noMedia ? (
         // not safe to use mediaState but really marginal to hit this
         import_useMedia.mediaState
-      ) : (0, import_useMedia.useMedia)(), splitStyles = (0, import_getSplitStyles.useSplitStyles)(props, staticConfig, theme, ((_themeState_state = themeState.state) === null || _themeState_state === void 0 ? void 0 : _themeState_state.name) || "", state, {
+      ) : (0, import_useMedia.useMedia)(), splitStyles = (0, import_getSplitStyles.useSplitStyles)(props, staticConfig, theme, (themeState == null ? void 0 : themeState.name) || "", state, {
         isAnimated: !1,
         mediaState: mediaStateNow,
         noSkip: !0,
@@ -10266,7 +9973,7 @@ var require_ThemeProvider_native = __commonJS({
         // if root class disabled, force class here
         forceClassName: !disableRootThemeClass && !themeClassNameOnRoot,
         // @ts-expect-error
-        _isRoot: !0,
+        _isRoot: import_react3.useId,
         children: props.children
       });
     };
@@ -10722,6 +10429,9 @@ var require_index_native8 = __commonJS({
       configureMedia: function() {
         return import_useMedia.configureMedia;
       },
+      forceUpdateThemes: function() {
+        return import_useThemeState.forceUpdateThemes;
+      },
       getConfig: function() {
         return import_config.getConfig;
       },
@@ -10817,6 +10527,7 @@ var require_index_native8 = __commonJS({
     __reExport2(index_exports2, require_wrapStyleTags_native(), module2.exports);
     var import_useMedia = require_useMedia_native();
     __reExport2(index_exports2, require_useTheme_native(), module2.exports);
+    var import_useThemeState = require_useThemeState_native();
     __reExport2(index_exports2, require_useThemeName_native(), module2.exports);
     __reExport2(index_exports2, require_useConfiguration_native(), module2.exports);
     __reExport2(index_exports2, require_useIsTouchDevice_native(), module2.exports);