tamagui 1.123.17 → 1.124.1

package/dist/test.native.js

@@ -3116,11 +3116,11 @@ var require_useMedia_native = __commonJS({
   }
 });
 
-// ../../core/web/dist/cjs/constants/constants.native.js
-var require_constants_native2 = __commonJS({
-  "../../core/web/dist/cjs/constants/constants.native.js"(exports2, module2) {
+// ../../core/web/dist/cjs/Tamagui.native.js
+var require_Tamagui_native = __commonJS({
+  "../../core/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
@@ -3148,48 +3148,51 @@ var require_constants_native2 = __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);
-    }, 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;
+    }, Tamagui_exports = {};
+    __export2(Tamagui_exports, {
+      Tamagui: function() {
+        return Tamagui;
       },
-      stackDefaultStyles: function() {
-        return stackDefaultStyles;
+      getValueFromIdentifier: function() {
+        return getValueFromIdentifier;
       },
-      webViewFlexCompatStyles: function() {
-        return webViewFlexCompatStyles;
+      setIdentifierValue: function() {
+        return setIdentifierValue;
       }
     });
-    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
+    module2.exports = __toCommonJS2(Tamagui_exports);
+    var Helpers = __toESM2(require_index_native7()), import_config = require_config_native(), import_insertStyleRule = require_insertStyleRule_native(), import_useMedia = require_useMedia_native(), Tamagui = function() {
+      if (0)
+        var TamaguiManager;
+    }(), identifierToValue = /* @__PURE__ */ new Map(), getValueFromIdentifier = function(identifier) {
+      return identifierToValue.get(identifier);
+    }, setIdentifierValue = function(identifier, value) {
+      identifierToValue.set(identifier, value);
     };
   }
 });
 
-// ../../core/web/dist/cjs/helpers/ThemeManager.native.js
-var require_ThemeManager_native = __commonJS({
-  "../../core/web/dist/cjs/helpers/ThemeManager.native.js"(exports2, module2) {
+// ../../core/compose-refs/dist/cjs/compose-refs.native.js
+var require_compose_refs_native = __commonJS({
+  "../../core/compose-refs/dist/cjs/compose-refs.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
@@ -3217,276 +3220,59 @@ 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;
+    }, compose_refs_exports = {};
+    __export2(compose_refs_exports, {
+      composeRefs: function() {
+        return composeRefs;
       },
-      getHasThemeUpdatingProps: function() {
-        return getHasThemeUpdatingProps;
+      setRef: function() {
+        return setRef;
       },
-      getManagers: function() {
-        return getManagers;
+      useComposedRefs: function() {
+        return useComposedRefs3;
       }
     });
-    module2.exports = __toCommonJS2(ThemeManager_exports);
-    var import_constants4 = require_index_native6(), import_config = require_config_native(), import_constants22 = require_constants_native2();
-    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 emptyState = {
-      name: ""
-    };
-    function getHasThemeUpdatingProps(props) {
-      return !!(props.name || props.componentName || props.inverse || props.reset);
+    module2.exports = __toCommonJS2(compose_refs_exports);
+    var React4 = __toESM2(require("react"));
+    function setRef(ref, value) {
+      typeof ref == "function" ? ref(value) : ref && (ref.current = value);
     }
-    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 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.");
-        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;
-            this.themeListeners.forEach(function(cb) {
-              return cb(_this.state.name, _this, forced);
-            });
-            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 (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;
-    }(), cache = {};
-    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 = cache[cacheKey];
-      if (!cached) {
-        var res = getStateUncached(props, manager);
-        return cache[cacheKey] = res, res;
-      }
-      return cached;
-    }
-    function getStateUncached(props, manager) {
-      if (props.name && props.reset) throw new Error("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 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), max2 = base.length, min2 = props.componentName && !nextName ? max2 : (
-        // component name only don't search upwards
-        0
-      ), i = max2; i >= min2; 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}`);
-          }
-          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);
-              }
-            }
-            var moreSpecific = `${prefix}_${nextName}_${componentName}`;
-            componentPotentials.unshift(moreSpecific);
-          }
-          potentials = [
-            ...componentPotentials,
-            ...potentials,
-            ...allComponentThemes
-          ];
-        }
-        var found = potentials.find(function(t) {
-          return t in themes;
+    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);
         });
-        if (typeof props.debug == "string" && import_constants4.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_constants4.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;
-        }
-      }
-      return props.debug === "verbose" && import_constants4.isClient && (console.groupCollapsed("ThemeManager.getState()"), console.info({
-        props,
-        baseName,
-        base,
-        min: min2,
-        max: max2
-      }), 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");
-    };
-    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
-      ];
+    function useComposedRefs3() {
+      for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) refs[_key] = arguments[_key];
+      return React4.useCallback(composeRefs(...refs), refs);
     }
   }
 });
 
-// ../../core/web/dist/cjs/helpers/ThemeManagerContext.native.js
-var require_ThemeManagerContext_native = __commonJS({
-  "../../core/web/dist/cjs/helpers/ThemeManagerContext.native.js"(exports2, module2) {
+// ../../core/compose-refs/dist/cjs/index.native.js
+var require_index_native12 = __commonJS({
+  "../../core/compose-refs/dist/cjs/index.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, {
-        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() {
@@ -3509,36 +3295,21 @@ var require_ThemeManagerContext_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
-      );
+    }, __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);
-    }, ThemeManagerContext_exports = {};
-    __export2(ThemeManagerContext_exports, {
-      ThemeManagerContext: function() {
-        return ThemeManagerContext;
-      }
-    });
-    module2.exports = __toCommonJS2(ThemeManagerContext_exports);
-    var import_react3 = __toESM2(require("react")), ThemeManagerContext = /* @__PURE__ */ import_react3.default.createContext(null);
+    }, index_exports2 = {};
+    module2.exports = __toCommonJS2(index_exports2);
+    __reExport2(index_exports2, require_compose_refs_native(), module2.exports);
   }
 });
 
-// ../../core/web/dist/cjs/helpers/createShallowSetState.native.js
-var require_createShallowSetState_native = __commonJS({
-  "../../core/web/dist/cjs/helpers/createShallowSetState.native.js"(exports2, module2) {
+// ../../core/web/dist/cjs/constants/constants.native.js
+var require_constants_native2 = __commonJS({
+  "../../core/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, {
@@ -3572,48 +3343,42 @@ var require_createShallowSetState_native = __commonJS({
       return __copyProps2(__defProp2({}, "__esModule", {
         value: !0
       }), mod);
-    }, createShallowSetState_exports = {};
-    __export2(createShallowSetState_exports, {
-      createShallowSetState: function() {
-        return createShallowSetState;
+    }, constants_exports = {};
+    __export2(constants_exports, {
+      FONT_DATA_ATTRIBUTE_NAME: function() {
+        return FONT_DATA_ATTRIBUTE_NAME;
       },
-      isEqualShallow: function() {
-        return isEqualShallow;
+      THEME_CLASSNAME_PREFIX: function() {
+        return THEME_CLASSNAME_PREFIX;
       },
-      mergeIfNotShallowEqual: function() {
-        return mergeIfNotShallowEqual;
+      THEME_NAME_SEPARATOR: function() {
+        return THEME_NAME_SEPARATOR;
+      },
+      stackDefaultStyles: function() {
+        return stackDefaultStyles;
+      },
+      webViewFlexCompatStyles: function() {
+        return webViewFlexCompatStyles;
       }
     });
-    module2.exports = __toCommonJS2(createShallowSetState_exports);
-    var import_react3 = require("react"), callImmediate = function(cb) {
-      return cb();
+    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
     };
-    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) {
-      return isDisabled || !prev || !next || isEqualShallow(prev, next) ? prev || next : {
-        ...prev,
-        ...next
-      };
-    }
-    function isEqualShallow(prev, next) {
-      for (var key in next) if (prev[key] !== next[key]) return !1;
-      return !0;
-    }
   }
 });
 
-// ../../core/web/dist/cjs/hooks/shouldDeoptDueToParentScheme.native.js
-var require_shouldDeoptDueToParentScheme_native = __commonJS({
-  "../../core/web/dist/cjs/hooks/shouldDeoptDueToParentScheme.native.js"(exports2, module2) {
+// ../../core/web/dist/cjs/constants/isDevTools.native.js
+var require_isDevTools_native = __commonJS({
+  "../../core/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, {
@@ -3647,41 +3412,22 @@ var require_shouldDeoptDueToParentScheme_native = __commonJS({
       return __copyProps2(__defProp2({}, "__esModule", {
         value: !0
       }), mod);
-    }, shouldDeoptDueToParentScheme_native_exports = {};
-    __export2(shouldDeoptDueToParentScheme_native_exports, {
-      shouldDeoptDueToParentScheme: function() {
-        return shouldDeoptDueToParentScheme;
+    }, isDevTools_exports = {};
+    __export2(isDevTools_exports, {
+      isDevTools: function() {
+        return isDevTools;
       }
     });
-    module2.exports = __toCommonJS2(shouldDeoptDueToParentScheme_native_exports);
-    var import_react_native4 = 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_native4.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;
-        }
-      } catch (err) {
-        _didIteratorError = !0, _iteratorError = err;
-      } finally {
-        try {
-          !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
-        } finally {
-          if (_didIteratorError) throw _iteratorError;
-        }
-      }
+    module2.exports = __toCommonJS2(isDevTools_exports);
+    var isDevTools = /* @__PURE__ */ function() {
       return !1;
-    }
+    }();
   }
 });
 
-// ../../core/web/dist/cjs/hooks/useTheme.native.js
-var require_useTheme_native = __commonJS({
-  "../../core/web/dist/cjs/hooks/useTheme.native.js"(exports2, module2) {
+// ../../core/web/dist/cjs/helpers/objectIdentityKey.native.js
+var require_objectIdentityKey_native = __commonJS({
+  "../../core/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, {
@@ -3715,221 +3461,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 useTheme4;
-      },
-      useThemeWithState: function() {
-        return useThemeWithState;
+    }, objectIdentityKey_exports = {};
+    __export2(objectIdentityKey_exports, {
+      objectIdentityKey: function() {
+        return objectIdentityKey;
       }
     });
-    module2.exports = __toCommonJS2(useTheme_exports);
-    var import_constants4 = require_index_native6(), 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
-    }, useTheme4 = 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), { themeManager, state } = changedThemeState, themeProxied = getThemeProxied(props, state, keys, themeManager);
-      return [
-        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));
-      }
-      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(platform2) {
-            var outVal = (0, import_createVariable.getVariable)(value);
-            if (platform2 !== "web" && import_constants4.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 track(key), outVal;
-          }
-        };
-        return [
-          [
-            key,
-            proxied2
-          ],
-          [
-            `$${key}`,
-            proxied2
-          ]
-        ];
-      }));
-      return ProxiedThemes.set(theme, proxied1), proxied1;
-    }
-    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 = (
-      // 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_constants4.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_constants4.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), !1))
-            var _globalThis, _TamaguiRootThemeManager;
-          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_constants4.isServer ? void 0 : keys != null && keys.current ? !0 : void 0) || props.deopt || props["disable-child-theme"], shouldTryUpdate = force ?? !!(keys != null && keys.current || isNewTheme);
-            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
-      ]), import_constants4.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 (cache.has(arg)) k += cache.get(arg);
+        else {
+          var v = Math.random();
+          cache.set(arg, v), k += v;
         }
-        var isNewTheme2 = !!(themeManager2 !== parentManager || props.inverse);
-        isNewTheme2 && registerThemeManager(themeManager2);
-        var isWebSSR = import_constants4.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, !1)
-          var parentState, parentId, themeManagerState;
-        return response;
       }
-    };
+      return k;
+    }
+    var cache = /* @__PURE__ */ new WeakMap();
   }
 });
 
-// ../../core/web/dist/cjs/Tamagui.native.js
-var require_Tamagui_native = __commonJS({
-  "../../core/web/dist/cjs/Tamagui.native.js"(exports2, module2) {
+// ../../core/web/dist/cjs/helpers/createStyledContext.native.js
+var require_createStyledContext_native = __commonJS({
+  "../../core/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, {
@@ -3975,35 +3534,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 createStyledContext2;
       }
     });
-    module2.exports = __toCommonJS2(Tamagui_exports);
-    var Helpers = __toESM2(require_index_native7()), import_config = require_config_native(), import_insertStyleRule = require_insertStyleRule_native(), import_useMedia = require_useMedia_native(), import_useTheme = require_useTheme_native(), Tamagui = function() {
-      if (0)
-        var TamaguiManager;
-    }(), identifierToValue = /* @__PURE__ */ new Map(), getValueFromIdentifier = function(identifier) {
-      return identifierToValue.get(identifier);
-    }, setIdentifierValue = function(identifier, value) {
-      identifierToValue.set(identifier, value);
-    };
+    module2.exports = __toCommonJS2(createStyledContext_exports);
+    var import_jsx_runtime6 = require("react/jsx-runtime"), import_react3 = __toESM2(require("react")), import_objectIdentityKey = require_objectIdentityKey_native(), createReactContext = import_react3.default[Math.random(), "createContext"];
+    function createStyledContext2(defaultValues) {
+      var OGContext = createReactContext(defaultValues), OGProvider2 = 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 = OGProvider2;
+        return scope && (Provider22 = getOrCreateScopedContext(scope).Provider), /* @__PURE__ */ (0, import_jsx_runtime6.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;
+    }
   }
 });
 
-// ../../core/compose-refs/dist/cjs/compose-refs.native.js
-var require_compose_refs_native = __commonJS({
-  "../../core/compose-refs/dist/cjs/compose-refs.native.js"(exports2, module2) {
+// ../../core/web/dist/cjs/contexts/ComponentContext.native.js
+var require_ComponentContext_native = __commonJS({
+  "../../core/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
@@ -4031,96 +3603,35 @@ 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 useComposedRefs3;
+    }, ComponentContext_exports = {};
+    __export2(ComponentContext_exports, {
+      ComponentContext: function() {
+        return ComponentContext2;
+      }
+    });
+    module2.exports = __toCommonJS2(ComponentContext_exports);
+    var import_createStyledContext = require_createStyledContext_native(), ComponentContext2 = (0, import_createStyledContext.createStyledContext)({
+      disableSSR: void 0,
+      inText: !1,
+      language: null,
+      animationDriver: null,
+      setParentFocusState: null,
+      groups: {
+        emit: null,
+        subscribe: null,
+        state: {}
       }
     });
-    module2.exports = __toCommonJS2(compose_refs_exports);
-    var React4 = __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 useComposedRefs3() {
-      for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) refs[_key] = arguments[_key];
-      return React4.useCallback(composeRefs(...refs), refs);
-    }
   }
 });
 
-// ../../core/compose-refs/dist/cjs/index.native.js
-var require_index_native12 = __commonJS({
-  "../../core/compose-refs/dist/cjs/index.native.js"(exports2, module2) {
-    "use strict";
-    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __copyProps2 = 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;
-    }, __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);
-  }
-});
-
-// ../../core/web/dist/cjs/constants/isDevTools.native.js
-var require_isDevTools_native = __commonJS({
-  "../../core/web/dist/cjs/constants/isDevTools.native.js"(exports2, module2) {
+// ../../core/web/dist/cjs/defaultComponentState.native.js
+var require_defaultComponentState_native = __commonJS({
+  "../../core/web/dist/cjs/defaultComponentState.native.js"(exports2, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = function(target, all) {
       for (var name in all) __defProp2(target, name, {
@@ -4154,22 +3665,41 @@ var require_isDevTools_native = __commonJS({
       return __copyProps2(__defProp2({}, "__esModule", {
         value: !0
       }), mod);
-    }, isDevTools_exports = {};
-    __export2(isDevTools_exports, {
-      isDevTools: function() {
-        return isDevTools;
+    }, defaultComponentState_exports = {};
+    __export2(defaultComponentState_exports, {
+      defaultComponentState: function() {
+        return defaultComponentState;
+      },
+      defaultComponentStateMounted: function() {
+        return defaultComponentStateMounted;
+      },
+      defaultComponentStateShouldEnter: function() {
+        return defaultComponentStateShouldEnter;
       }
     });
-    module2.exports = __toCommonJS2(isDevTools_exports);
-    var isDevTools = /* @__PURE__ */ function() {
-      return !1;
-    }();
+    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"
+    };
   }
 });
 
-// ../../core/web/dist/cjs/helpers/objectIdentityKey.native.js
-var require_objectIdentityKey_native = __commonJS({
-  "../../core/web/dist/cjs/helpers/objectIdentityKey.native.js"(exports2, module2) {
+// ../../core/web/dist/cjs/helpers/getShorthandValue.native.js
+var require_getShorthandValue_native = __commonJS({
+  "../../core/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, {
@@ -4203,36 +3733,26 @@ var require_objectIdentityKey_native = __commonJS({
       return __copyProps2(__defProp2({}, "__esModule", {
         value: !0
       }), mod);
-    }, objectIdentityKey_exports = {};
-    __export2(objectIdentityKey_exports, {
-      objectIdentityKey: function() {
-        return objectIdentityKey;
+    }, getShorthandValue_exports = {};
+    __export2(getShorthandValue_exports, {
+      getShorthandValue: function() {
+        return getShorthandValue;
       }
     });
-    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 (cache.has(arg)) k += cache.get(arg);
-        else {
-          var v = Math.random();
-          cache.set(arg, v), k += v;
-        }
-      }
-      return k;
-    }
-    var cache = /* @__PURE__ */ new WeakMap();
+    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;
+    };
   }
 });
 
-// ../../core/web/dist/cjs/helpers/createStyledContext.native.js
-var require_createStyledContext_native = __commonJS({
-  "../../core/web/dist/cjs/helpers/createStyledContext.native.js"(exports2, module2) {
+// ../../core/web/dist/cjs/constants/accessibilityDirectMap.native.js
+var require_accessibilityDirectMap_native = __commonJS({
+  "../../core/web/dist/cjs/constants/accessibilityDirectMap.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
@@ -4260,62 +3780,36 @@ 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 createStyledContext2;
+    }, 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(createStyledContext_exports);
-    var import_jsx_runtime6 = require("react/jsx-runtime"), import_react3 = __toESM2(require("react")), import_objectIdentityKey = require_objectIdentityKey_native(), createReactContext = import_react3.default[Math.random(), "createContext"];
-    function createStyledContext2(defaultValues) {
-      var OGContext = createReactContext(defaultValues), OGProvider2 = 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 = OGProvider2;
-        return scope && (Provider22 = getOrCreateScopedContext(scope).Provider), /* @__PURE__ */ (0, import_jsx_runtime6.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;
-    }
+    module2.exports = __toCommonJS2(accessibilityDirectMap_native_exports);
+    var accessibilityDirectMap = {}, webToNativeAccessibilityDirectMap = {}, nativeAccessibilityValue = {}, nativeAccessibilityState = {}, accessibilityWebRoleToNativeRole = {};
   }
 });
 
-// ../../core/web/dist/cjs/contexts/ComponentContext.native.js
-var require_ComponentContext_native = __commonJS({
-  "../../core/web/dist/cjs/contexts/ComponentContext.native.js"(exports2, module2) {
+// ../../core/web/dist/cjs/helpers/getGroupPropParts.native.js
+var require_getGroupPropParts_native = __commonJS({
+  "../../core/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, {
@@ -4349,31 +3843,28 @@ var require_ComponentContext_native = __commonJS({
       return __copyProps2(__defProp2({}, "__esModule", {
         value: !0
       }), mod);
-    }, ComponentContext_exports = {};
-    __export2(ComponentContext_exports, {
-      ComponentContext: function() {
-        return ComponentContext2;
-      }
-    });
-    module2.exports = __toCommonJS2(ComponentContext_exports);
-    var import_createStyledContext = require_createStyledContext_native(), ComponentContext2 = (0, import_createStyledContext.createStyledContext)({
-      disableSSR: void 0,
-      inText: !1,
-      language: null,
-      animationDriver: null,
-      setParentFocusState: null,
-      groups: {
-        emit: null,
-        subscribe: null,
-        state: {}
+    }, 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
+      };
+    }
   }
 });
 
-// ../../core/web/dist/cjs/defaultComponentState.native.js
-var require_defaultComponentState_native = __commonJS({
-  "../../core/web/dist/cjs/defaultComponentState.native.js"(exports2, module2) {
+// ../../core/web/dist/cjs/helpers/createMediaStyle.native.js
+var require_createMediaStyle_native = __commonJS({
+  "../../core/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, {
@@ -4407,246 +3898,13 @@ 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;
+    }, createMediaStyle_exports = {};
+    __export2(createMediaStyle_exports, {
+      MEDIA_SEP: function() {
+        return MEDIA_SEP;
       },
-      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"
-    };
-  }
-});
-
-// ../../core/web/dist/cjs/helpers/getShorthandValue.native.js
-var require_getShorthandValue_native = __commonJS({
-  "../../core/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;
-    };
-  }
-});
-
-// ../../core/web/dist/cjs/constants/accessibilityDirectMap.native.js
-var require_accessibilityDirectMap_native = __commonJS({
-  "../../core/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 = {};
-  }
-});
-
-// ../../core/web/dist/cjs/helpers/getGroupPropParts.native.js
-var require_getGroupPropParts_native = __commonJS({
-  "../../core/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
-      };
-    }
-  }
-});
-
-// ../../core/web/dist/cjs/helpers/createMediaStyle.native.js
-var require_createMediaStyle_native = __commonJS({
-  "../../core/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;
+      createMediaStyle: function() {
+        return createMediaStyle;
       }
     });
     module2.exports = __toCommonJS2(createMediaStyle_exports);
@@ -7320,37 +6578,516 @@ var require_getSplitStyles_native = __commonJS({
           ...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), 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_helpers.stylePropsTransform ? mergeTransform(out, key, val) : out[key] = (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(val, key);
+        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), 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_helpers.stylePropsTransform ? mergeTransform(out, key, val) : out[key] = (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(val, key);
+      }
+      return import_constants4.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);
+    }
+  }
+});
+
+// ../../core/web/dist/cjs/helpers/mergeProps.native.js
+var require_mergeProps_native = __commonJS({
+  "../../core/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;
+        }
+      }
+      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);
+    }
+  }
+});
+
+// ../../core/web/dist/cjs/helpers/setElementProps.native.js
+var require_setElementProps_native = __commonJS({
+  "../../core/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;
+        }
+      }
+      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();
+      });
+    }
+  }
+});
+
+// ../../core/web/dist/cjs/helpers/createShallowSetState.native.js
+var require_createShallowSetState_native = __commonJS({
+  "../../core/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) {
+      return isDisabled || !prev || !next || isEqualShallow(prev, next) ? prev || next : {
+        ...prev,
+        ...next
+      };
+    }
+    function isEqualShallow(prev, next) {
+      for (var key in next) if (prev[key] !== next[key]) return !1;
+      return !0;
+    }
+  }
+});
+
+// ../../core/web/dist/cjs/helpers/subscribeToContextGroup.native.js
+var require_subscribeToContextGroup_native = __commonJS({
+  "../../core/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
+          });
+        }, _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);
+    }, 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 (_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 mediaState3 = (0, import_useMedia.getMediaState)(mediaGroups, layout), next = (0, import_createShallowSetState.mergeIfNotShallowEqual)(current.media, mediaState3);
+            next !== current.media && (Object.assign(current.media, next), persist());
+          }
+          function persist() {
+            var group = {
+              ...state.group,
+              [name]: current
+            };
+            setStateShallow({
+              group
+            });
+          }
+        });
+      }
+    };
+  }
+});
+
+// ../../core/web/dist/cjs/hooks/useThemeState.native.js
+var require_useThemeState_native = __commonJS({
+  "../../core/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;
+        }
+      }
+      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;
+      }
+    });
+    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);
+      }, 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;
+          }
+          if (0)
+            var _states_get;
+          scheduleUpdate(id);
+        }
+      }, [
+        keys,
+        propsKey
+      ]), 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 (0)
+        var 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 states.set(id, nextState), isRoot && (rootThemeState = nextState), nextState;
+    };
+    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_constants4.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("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, max2 = parentParts.length, i = 0; i <= max2; 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;
+    };
   }
 });
 
-// ../../core/web/dist/cjs/helpers/mergeProps.native.js
-var require_mergeProps_native = __commonJS({
-  "../../core/web/dist/cjs/helpers/mergeProps.native.js"(exports2, module2) {
+// ../../core/web/dist/cjs/hooks/doesRootSchemeMatchSystem.native.js
+var require_doesRootSchemeMatchSystem_native = __commonJS({
+  "../../core/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, {
@@ -7384,36 +7121,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_native4 = 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_native4.Appearance.getColorScheme();
     }
   }
 });
 
-// ../../core/web/dist/cjs/helpers/setElementProps.native.js
-var require_setElementProps_native = __commonJS({
-  "../../core/web/dist/cjs/helpers/setElementProps.native.js"(exports2, module2) {
+// ../../core/web/dist/cjs/hooks/getThemeProxied.native.js
+var require_getThemeProxied_native = __commonJS({
+  "../../core/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, {
@@ -7447,24 +7172,64 @@ 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_constants4 = require_index_native6(), import_config = require_config_native(), import_createVariable = require_createVariable_native(), import_doesRootSchemeMatchSystem = require_doesRootSchemeMatchSystem_native(), cache = /* @__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, cache.has(theme)) {
+        var proxied = cache.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));
+      }
+      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(platform2) {
+            var outVal = (0, import_createVariable.getVariable)(value), shouldOptimize = scheme && platform2 !== "web" && import_constants4.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 track(key), outVal;
+          }
+        };
+        return [
+          [
+            key,
+            proxied2
+          ],
+          [
+            `$${key}`,
+            proxied2
+          ]
+        ];
+      }));
+      return cache.set(theme, proxied1), proxied1;
     }
   }
 });
 
-// ../../core/web/dist/cjs/helpers/subscribeToContextGroup.native.js
-var require_subscribeToContextGroup_native = __commonJS({
-  "../../core/web/dist/cjs/helpers/subscribeToContextGroup.native.js"(exports2, module2) {
+// ../../core/web/dist/cjs/hooks/useTheme.native.js
+var require_useTheme_native = __commonJS({
+  "../../core/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, {
@@ -7498,38 +7263,25 @@ 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 useTheme4;
+      },
+      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 (_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 mediaState3 = (0, import_useMedia.getMediaState)(mediaGroups, layout), next = (0, import_createShallowSetState.mergeIfNotShallowEqual)(current.media, mediaState3);
-            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(), useTheme4 = 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), themeProxied = (0, import_getThemeProxied.getThemeProxied)(props, themeState, keys);
+      return [
+        themeProxied,
+        themeState
+      ];
     };
   }
 });
@@ -7643,14 +7395,16 @@ var require_Theme_native = __commonJS({
       }
     });
     module2.exports = __toCommonJS2(Theme_exports);
-    var import_jsx_runtime6 = require("react/jsx-runtime"), import_constants4 = require_index_native6(), 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(), Theme2 = /* @__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_runtime6 = require("react/jsx-runtime"), import_constants4 = require_index_native6(), 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: {}
+    }, Theme2 = /* @__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
@@ -7664,60 +7418,55 @@ var require_Theme_native = __commonJS({
     });
     Theme2.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;
-      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_runtime6.jsx)(Theme2, {
-          name: themeManager.state.parentName,
-          children: child.props.children
-        })) : child;
-      }));
-      var elementsWithContext = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_ThemeManagerContext.ThemeManagerContext.Provider, {
-        value: themeManager,
-        children: next
-      });
-      return forceClassName === !1 ? elementsWithContext : import_constants4.isWeb ? wrapThemeElements({
-        children: elementsWithContext,
-        themeState,
-        forceClassName,
-        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_runtime6.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_runtime6.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_runtime6.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_runtime6.jsx)(Theme2, {
+            name: parentState.name,
+            children: child.props.children
+          })) : child;
         });
       }
-      return themedChildren;
+      if (forceClassName === !1) return children;
+      if (import_constants4.isWeb) {
+        var { className, style } = getThemeClassNameAndStyle(themeState, props, isRoot);
+        if (children = /* @__PURE__ */ (0, import_jsx_runtime6.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_runtime6.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)_/;
   }
 });
 
@@ -7932,7 +7681,21 @@ var require_useComponentState_native = __commonJS({
       import_constants4.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) {
         var { enterVariant, exitVariant, enterExitVariant, custom } = presenceState;
         (0, import_isObj.isObj)(custom) && Object.assign(props, custom);
@@ -7944,7 +7707,6 @@ var require_useComponentState_native = __commonJS({
         var isAnimatedAndHydrated = isAnimated && !supportsCSSVars, isClassNameDisabled = !staticConfig.acceptsClassName && (config.disableSSR || !state.unmounted), isDisabledManually = disableClassName && !state.unmounted;
         (isAnimatedAndHydrated || isDisabledManually || isClassNameDisabled) && (noClass = !0);
       }
-      var groupName = props.group;
       if (groupName && !curStateRef.group) {
         var listeners = /* @__PURE__ */ new Set();
         curStateRef.group = {
@@ -7961,19 +7723,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,
@@ -8222,7 +7971,7 @@ var require_createComponent_native = __commonJS({
       }
     });
     module2.exports = __toCommonJS2(createComponent_exports);
-    var import_jsx_runtime6 = require("react/jsx-runtime"), import_compose_refs = require_index_native12(), import_constants4 = require_index_native6(), import_helpers = require_index_native7(), 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(), componentSetStates = /* @__PURE__ */ new Set();
+    var import_jsx_runtime6 = require("react/jsx-runtime"), import_compose_refs = require_index_native12(), import_constants4 = require_index_native6(), import_helpers = require_index_native7(), 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(), componentSetStates = /* @__PURE__ */ new Set();
     typeof document < "u" && (cancelTouches = function() {
       componentSetStates.forEach(function(setState) {
         return setState(function(prev) {
@@ -8256,7 +8005,7 @@ var require_createComponent_native = __commonJS({
         }
       });
       var { Component, isText, isZStack, isHOC } = staticConfig, component = /* @__PURE__ */ import_react3.default.forwardRef(function(propsIn, forwardedRef) {
-        var _themeState_state, _hooks_usePropsTransform, _hooks_useEvents, _config_animations, internalID = "";
+        var _hooks_usePropsTransform, _hooks_useEvents, _config_animations, internalID = "";
         if (!hasSetupBaseViews) {
           var _hooks_getBaseViews;
           hasSetupBaseViews = !0;
@@ -8278,15 +8027,15 @@ var require_createComponent_native = __commonJS({
             var finalVal = propVal ?? (defaultProps == null ? void 0 : defaultProps[key]);
             finalVal !== void 0 && (overriddenContextProps || (overriddenContextProps = {}), overriddenContextProps[key] = finalVal);
           }
+        var debugProp = propsIn.debug;
+        if (0)
+          var timer;
         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 (0)
-          var timer;
-        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), hasTextAncestor = !!(import_constants4.isWeb && isText && componentContext.inText), isTaggable = !Component || typeof Component == "string", tagProp = props.tag, element = import_constants4.isWeb && isTaggable && tagProp || Component, BaseTextComponent = BaseText || element || "span", BaseViewComponent = BaseView || element || (hasTextAncestor ? "span" : "div"), elementType = isText ? BaseTextComponent : BaseViewComponent;
+        var componentName2 = props.componentName || staticConfig.componentName, 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), hasTextAncestor = !!(import_constants4.isWeb && isText && componentContext.inText), isTaggable = !Component || typeof Component == "string", tagProp = props.tag, element = import_constants4.isWeb && isTaggable && tagProp || Component, BaseTextComponent = BaseText || element || "span", BaseViewComponent = BaseView || element || (hasTextAncestor ? "span" : "div"), elementType = isText ? BaseTextComponent : BaseViewComponent;
         animationDriver && isAnimated && (elementType = animationDriver[isText ? "Text" : "View"] || elementType);
         var disableThemeProp = !1, disableTheme = disableThemeProp || isHOC;
         props.themeShallow && (curStateRef.themeShallow = !0);
@@ -8302,7 +8051,7 @@ var require_createComponent_native = __commonJS({
           var name, type, dataIs, banner;
           if (console.info(`%c ${banner} (hydrated: ${isHydrated}) (unmounted: ${state.unmounted})`, "background: green; color: white;"), !import_constants4.isServer) var ch, childLog;
         }
-        var [themeState, theme] = (0, import_useTheme.useThemeWithState)(themeStateProps);
+        var [theme, themeState] = (0, import_useTheme.useThemeWithState)(themeStateProps);
         elementType = Component || elementType;
         var isStringElement = typeof elementType == "string", mediaState3 = (0, import_useMedia.useMedia)(componentContext, debugProp);
         (0, import_createVariable.setDidGetVariableValue)(!1);
@@ -8317,7 +8066,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) || "", splitStyles = (0, import_getSplitStyles.useSplitStyles)(props, staticConfig, theme, themeName, state, styleProps, null, componentContext, elementType, debugProp);
+        }, themeName = (themeState == null ? void 0 : themeState.name) || "", splitStyles = (0, import_getSplitStyles.useSplitStyles)(props, staticConfig, theme, themeName, state, styleProps, null, componentContext, elementType, debugProp);
         if (props.group && props.untilMeasured === "hide" && !curStateRef.hasMeasured) {
           var _splitStyles;
           (_splitStyles = splitStyles).style || (_splitStyles.style = {}), splitStyles.style.opacity = 0;
@@ -8356,14 +8105,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
@@ -8533,7 +8282,7 @@ var require_createComponent_native = __commonJS({
         }, [
           groupName
         ]);
-        if ((groupName && subGroupContext || propsIn.focusWithinStyle) && (content = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_ComponentContext.ComponentContext.Provider, {
+        if ((groupName || propsIn.focusWithinStyle) && (content = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_ComponentContext.ComponentContext.Provider, {
           ...componentContext,
           groups: subGroupContext,
           setParentFocusState: setStateShallow,
@@ -10190,7 +9939,7 @@ var require_proxyThemeVariables_native = __commonJS({
 var require_useThemeName_native = __commonJS({
   "../../core/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
@@ -10218,18 +9967,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
@@ -10241,17 +9978,20 @@ var require_useThemeName_native = __commonJS({
       }
     });
     module2.exports = __toCommonJS2(useThemeName_exports);
-    var import_constants4 = require_index_native6(), import_react3 = __toESM2(require("react")), import_ThemeManagerContext = require_ThemeManagerContext_native();
-    function useThemeName2(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_constants4.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 useThemeName2() {
+      var _useThemeState;
+      return ((_useThemeState = (0, import_useThemeState.useThemeState)(forceUpdateState, !1, forceKeys)) === null || _useThemeState === void 0 ? void 0 : _useThemeState.name) || "";
     }
   }
 });
@@ -10501,14 +10241,14 @@ var require_useProps_native = __commonJS({
       return usePropsAndStyle2(props, opts)[1] || {};
     }
     function usePropsAndStyle2(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,
@@ -10753,7 +10493,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
       });
     };
@@ -11045,6 +10785,9 @@ var require_index_native14 = __commonJS({
       configureMedia: function() {
         return import_useMedia.configureMedia;
       },
+      forceUpdateThemes: function() {
+        return import_useThemeState.forceUpdateThemes;
+      },
       getConfig: function() {
         return import_config.getConfig;
       },
@@ -11140,6 +10883,7 @@ var require_index_native14 = __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);
@@ -29088,8 +28832,7 @@ var require_createSwitch_native = __commonJS({
               ...props,
               ...switchProps,
               ...!disableActiveTheme && !props.unstyled && {
-                theme: checked ? "active" : null,
-                themeShallow: !0
+                theme: checked ? "active" : null
               },
               // expected variants
               checked,
@@ -29544,7 +29287,7 @@ var require_mutateTheme_native = __commonJS({
       }
     });
     module2.exports = __toCommonJS2(mutateTheme_exports);
-    var import_react3 = require("react"), import_constants4 = require_index_native6(), import_web = require_index_native14(), import_start_transition = require_index_native9();
+    var import_constants4 = require_index_native6(), import_start_transition = require_index_native9(), import_web = require_index_native14();
     function mutateThemes2(param) {
       var { themes, batch, insertCSS = !0, ...props } = param, allThemesProxied = {}, allThemesRaw = {}, _iteratorNormalCompletion = !0, _didIteratorError = !1, _iteratorError = void 0;
       try {
@@ -29573,7 +29316,7 @@ var require_mutateTheme_native = __commonJS({
       return (0, import_start_transition.startTransition)(function() {
         for (var themeName in allThemesProxied) {
           var theme2 = allThemesProxied[themeName];
-          updateThemeConfig(themeName, theme2), notifyThemeManagersOfUpdate(themeName, theme2);
+          updateThemeConfig(themeName, theme2), updateThemeStates(themeName, theme2);
         }
       }), {
         themes: allThemesProxied,
@@ -29598,20 +29341,15 @@ var require_mutateTheme_native = __commonJS({
         };
         return props.avoidUpdate || (insertCSS && (response.cssRules = insertThemeCSS({
           [themeName]: theme1
-        })), updateThemeConfig(themeName, themeProxied), notifyThemeManagersOfUpdate(themeName, themeProxied)), response;
+        })), updateThemeConfig(themeName, themeProxied), updateThemeStates(themeName, themeProxied)), response;
       }
     }
     function updateThemeConfig(themeName, theme) {
       var config = (0, import_web.getConfig)();
       config.themes[themeName] = theme, (0, import_web.updateConfig)("themes", config.themes);
     }
-    function notifyThemeManagersOfUpdate(themeName, theme) {
-      import_web.activeThemeManagers.forEach(function(manager) {
-        manager.state.name === themeName && manager.updateStateFromProps({
-          name: themeName,
-          forceTheme: theme
-        }, !0);
-      });
+    function updateThemeStates(themeName, theme) {
+      (0, import_web.forceUpdateThemes)();
     }
     function insertThemeCSS(themes) {
       var batch = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !1;