@tamagui/core 1.85.6 → 1.85.7

package/dist/native.js

@@ -1465,7 +1465,7 @@ var require_insertStyleRule_native = __commonJS({
       }
       return scannedCache.set(sheet2, cacheKey), dedupedThemes;
     }
-    var colorVarToVal, rootComputedStyle = null;
+    var colorVarToVal, rootComputedStyle = null, schemes = { dark: !0, light: !0 };
     function addThemesFromCSS(cssStyleRule, tokens) {
       let selectors = cssStyleRule.selectorText.split(",");
       if (!selectors.length)
@@ -1501,11 +1501,11 @@ var require_insertStyleRule_native = __commonJS({
         names: [
           ...new Set(
             selectors.map((selector) => {
-              let parts = selector.replace(/(.t_|:root)/g, "").trim().split(" "), [first] = parts, scheme = first.includes("dark") ? "dark" : first.includes("light") ? "light" : "", name = (() => {
+              let parts = selector.replace(/(.t_|:root)/g, "").trim().split(" "), secondToLast = parts[parts.length - 2] || "", scheme = secondToLast.includes("dark") ? "dark" : secondToLast.includes("light") ? "light" : "", name = (() => {
                 let _ = parts[parts.length - 1];
                 return scheme && _.startsWith(scheme) && (_ = _.slice(scheme.length + 1)), _;
               })();
-              return `${scheme}${scheme && name ? "_" : ""}${name}`;
+              return scheme === name || schemes[name] ? scheme : `${scheme}${scheme && name ? "_" : ""}${name}`;
             })
           )
         ],
@@ -1842,116 +1842,9 @@ var require_useMedia_native = __commonJS({
   }
 });
 
-// ../web/dist/cjs/Tamagui.native.js
-var require_Tamagui_native = __commonJS({
-  "../web/dist/cjs/Tamagui.native.js"(exports2, module2) {
-    "use strict";
-    var __create2 = Object.create, __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __getProtoOf2 = Object.getPrototypeOf, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
-      for (var name in all)
-        __defProp2(target, name, { get: all[name], enumerable: !0 });
-    }, __copyProps2 = (to, from, except, desc) => {
-      if (from && typeof from == "object" || typeof from == "function")
-        for (let key of __getOwnPropNames2(from))
-          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
-      return to;
-    }, __toESM2 = (mod, isNodeMode, target) => (target = mod != null ? __create2(__getProtoOf2(mod)) : {}, __copyProps2(
-      // If the importer is in node compatibility mode or this is not an ESM
-      // file that has been converted to a CommonJS file using a Babel-
-      // compatible transform (i.e. "__esModule" has not been set), then set
-      // "default" to the CommonJS "module.exports" for node compatibility.
-      isNodeMode || !mod || !mod.__esModule ? __defProp2(target, "default", { value: mod, enumerable: !0 }) : target,
-      mod
-    )), __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), Tamagui_exports = {};
-    __export2(Tamagui_exports, {
-      Tamagui: () => Tamagui,
-      getValueFromIdentifier: () => getValueFromIdentifier,
-      setIdentifierValue: () => setIdentifierValue
-    });
-    module2.exports = __toCommonJS2(Tamagui_exports);
-    var Helpers = __toESM2(require_index_native4()), import_config = require_config_native(), import_insertStyleRule = require_insertStyleRule_native(), import_useMedia = require_useMedia_native(), TamaguiManager = class {
-      constructor() {
-        this.Helpers = Helpers;
-      }
-      get mediaState() {
-        return { ...import_useMedia.mediaState };
-      }
-      get config() {
-        return (0, import_config.getConfig)();
-      }
-      get insertedRules() {
-        return (0, import_insertStyleRule.getAllRules)();
-      }
-      get allSelectors() {
-        return (0, import_insertStyleRule.getAllSelectors)();
-      }
-      get allTransforms() {
-        return (0, import_insertStyleRule.getAllTransforms)();
-      }
-      get identifierToValue() {
-        return identifierToValue;
-      }
-    }, Tamagui = new TamaguiManager(), identifierToValue = /* @__PURE__ */ new Map(), getValueFromIdentifier = (identifier) => identifierToValue.get(identifier), setIdentifierValue = (identifier, value) => {
-      identifierToValue.set(identifier, value);
-    };
-  }
-});
-
-// ../compose-refs/dist/cjs/compose-refs.native.js
-var require_compose_refs_native = __commonJS({
-  "../compose-refs/dist/cjs/compose-refs.native.js"(exports2, module2) {
-    "use strict";
-    var __create2 = Object.create, __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __getProtoOf2 = Object.getPrototypeOf, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
-      for (var name in all)
-        __defProp2(target, name, { get: all[name], enumerable: !0 });
-    }, __copyProps2 = (to, from, except, desc) => {
-      if (from && typeof from == "object" || typeof from == "function")
-        for (let key of __getOwnPropNames2(from))
-          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
-      return to;
-    }, __toESM2 = (mod, isNodeMode, target) => (target = mod != null ? __create2(__getProtoOf2(mod)) : {}, __copyProps2(
-      // If the importer is in node compatibility mode or this is not an ESM
-      // file that has been converted to a CommonJS file using a Babel-
-      // compatible transform (i.e. "__esModule" has not been set), then set
-      // "default" to the CommonJS "module.exports" for node compatibility.
-      isNodeMode || !mod || !mod.__esModule ? __defProp2(target, "default", { value: mod, enumerable: !0 }) : target,
-      mod
-    )), __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), compose_refs_exports = {};
-    __export2(compose_refs_exports, {
-      composeRefs: () => composeRefs,
-      useComposedRefs: () => useComposedRefs
-    });
-    module2.exports = __toCommonJS2(compose_refs_exports);
-    var React = __toESM2(require("react"));
-    function setRef(ref, value) {
-      typeof ref == "function" ? ref(value) : ref && (ref.current = value);
-    }
-    function composeRefs(...refs) {
-      return (node) => refs.forEach((ref) => setRef(ref, node));
-    }
-    function useComposedRefs(...refs) {
-      return React.useCallback(composeRefs(...refs), refs);
-    }
-  }
-});
-
-// ../compose-refs/dist/cjs/index.native.js
-var require_index_native5 = __commonJS({
-  "../compose-refs/dist/cjs/index.native.js"(exports2, module2) {
-    "use strict";
-    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __copyProps2 = (to, from, except, desc) => {
-      if (from && typeof from == "object" || typeof from == "function")
-        for (let key of __getOwnPropNames2(from))
-          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
-      return to;
-    }, __reExport2 = (target, mod, secondTarget) => (__copyProps2(target, mod, "default"), secondTarget && __copyProps2(secondTarget, mod, "default")), __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), src_exports2 = {};
-    module2.exports = __toCommonJS2(src_exports2);
-    __reExport2(src_exports2, require_compose_refs_native(), module2.exports);
-  }
-});
-
-// ../use-did-finish-ssr/dist/cjs/index.native.js
-var require_index_native6 = __commonJS({
-  "../use-did-finish-ssr/dist/cjs/index.native.js"(exports2, module2) {
+// ../web/dist/cjs/helpers/createShallowSetState.native.js
+var require_createShallowSetState_native = __commonJS({
+  "../web/dist/cjs/helpers/createShallowSetState.native.js"(exports2, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
       for (var name in all)
@@ -1961,18 +1854,24 @@ var require_index_native6 = __commonJS({
         for (let key of __getOwnPropNames2(from))
           !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
       return to;
-    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), src_exports2 = {};
-    __export2(src_exports2, {
-      useClientValue: () => useClientValue,
-      useDidFinishSSR: () => useDidFinishSSR
+    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), createShallowSetState_exports = {};
+    __export2(createShallowSetState_exports, {
+      createShallowSetState: () => createShallowSetState,
+      isEqualShallow: () => isEqualShallow,
+      mergeIfNotShallowEqual: () => mergeIfNotShallowEqual
     });
-    module2.exports = __toCommonJS2(src_exports2);
-    var import_react3 = require("react");
-    function useDidFinishSSR(value) {
-      return value ?? !0;
+    module2.exports = __toCommonJS2(createShallowSetState_exports);
+    function createShallowSetState(setter, debug) {
+      return (next) => setter((prev) => mergeIfNotShallowEqual(prev, next, debug));
     }
-    function useClientValue(value) {
-      return useDidFinishSSR() ? typeof value == "function" ? value() : value : void 0;
+    function mergeIfNotShallowEqual(prev, next, debug) {
+      return isEqualShallow(prev, next) ? prev : (process.env.NODE_ENV === "development" && debug && console.warn("setStateShallow CHANGE", { prev, next }), { ...prev, ...next });
+    }
+    function isEqualShallow(prev, next) {
+      for (let key in next)
+        if (prev[key] !== next[key])
+          return !1;
+      return !0;
     }
   }
 });
@@ -2011,9 +1910,9 @@ var require_constants_native2 = __commonJS({
   }
 });
 
-// ../web/dist/cjs/helpers/objectIdentityKey.native.js
-var require_objectIdentityKey_native = __commonJS({
-  "../web/dist/cjs/helpers/objectIdentityKey.native.js"(exports2, module2) {
+// ../web/dist/cjs/helpers/ThemeManager.native.js
+var require_ThemeManager_native = __commonJS({
+  "../web/dist/cjs/helpers/ThemeManager.native.js"(exports2, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
       for (var name in all)
@@ -2023,177 +1922,149 @@ var require_objectIdentityKey_native = __commonJS({
         for (let key of __getOwnPropNames2(from))
           !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
       return to;
-    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), objectIdentityKey_exports = {};
-    __export2(objectIdentityKey_exports, {
-      objectIdentityKey: () => objectIdentityKey
+    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), ThemeManager_exports = {};
+    __export2(ThemeManager_exports, {
+      ThemeManager: () => ThemeManager,
+      getHasThemeUpdatingProps: () => getHasThemeUpdatingProps,
+      getManagers: () => getManagers
     });
-    module2.exports = __toCommonJS2(objectIdentityKey_exports);
-    function objectIdentityKey(obj) {
-      let k = "";
-      for (let key in obj) {
-        k += key;
-        let arg = obj[key], type = typeof arg;
-        if (!arg || type !== "object" && type !== "function")
-          k += type + arg;
-        else if (cache.has(arg))
-          k += cache.get(arg);
-        else {
-          let v = Math.random();
-          cache.set(arg, v), k += v;
-        }
-      }
-      return k;
+    module2.exports = __toCommonJS2(ThemeManager_exports);
+    var import_constants = require_index_native3(), import_config = require_config_native(), import_constants2 = require_constants_native2(), emptyState = { name: "" };
+    function getHasThemeUpdatingProps(props) {
+      return !!(props.name || props.componentName || props.inverse || props.reset);
     }
-    var cache = /* @__PURE__ */ new WeakMap();
-  }
-});
-
-// ../web/dist/cjs/helpers/createStyledContext.native.js
-var require_createStyledContext_native = __commonJS({
-  "../web/dist/cjs/helpers/createStyledContext.native.js"(exports2, module2) {
-    "use strict";
-    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
-      for (var name in all)
-        __defProp2(target, name, { get: all[name], enumerable: !0 });
-    }, __copyProps2 = (to, from, except, desc) => {
-      if (from && typeof from == "object" || typeof from == "function")
-        for (let key of __getOwnPropNames2(from))
-          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
-      return to;
-    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), createStyledContext_exports = {};
-    __export2(createStyledContext_exports, {
-      createStyledContext: () => createStyledContext
-    });
-    module2.exports = __toCommonJS2(createStyledContext_exports);
-    var import_react3 = require("react"), import_objectIdentityKey = require_objectIdentityKey_native(), import_jsx_runtime = require("react/jsx-runtime");
-    function createStyledContext(defaultValues) {
-      let OGContext = (0, import_react3.createContext)(defaultValues), OGProvider = OGContext.Provider, Context = OGContext, scopedContexts = /* @__PURE__ */ new Map(), Provider = ({
-        children,
-        scope,
-        ...values
-      }) => {
-        let next = (0, import_react3.useMemo)(() => ({
-          // this ! is a workaround for ts error
-          ...defaultValues,
-          ...values
-        }), [(0, import_objectIdentityKey.objectIdentityKey)(values)]), Provider2 = OGProvider;
-        if (scope) {
-          let ScopedContext = scopedContexts.get(scope);
-          ScopedContext || (ScopedContext = (0, import_react3.createContext)(defaultValues), scopedContexts.set(scope, ScopedContext)), Provider2 = ScopedContext.Provider;
+    var uid = 0, ThemeManager = class {
+      constructor(props = {}, parentManager) {
+        if (this.props = props, this.id = 0, this.themeListeners = /* @__PURE__ */ new Set(), this.parentManager = null, this.state = emptyState, this._allKeys = null, uid = (uid + 1) % Number.MAX_VALUE, this.id = uid, parentManager === "root") {
+          this.updateStateFromProps(props, !1);
+          return;
         }
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Provider2, { value: next, children });
-      }, useStyledContext = (scope) => {
-        let context = scope ? scopedContexts.get(scope) : OGContext;
-        return (0, import_react3.useContext)(context);
-      };
-      return Context.Provider = Provider, Context.props = defaultValues, Context.context = OGContext, Context.useStyledContext = useStyledContext, Context;
-    }
-  }
-});
-
-// ../web/dist/cjs/contexts/ComponentContext.native.js
-var require_ComponentContext_native = __commonJS({
-  "../web/dist/cjs/contexts/ComponentContext.native.js"(exports2, module2) {
-    "use strict";
-    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
-      for (var name in all)
-        __defProp2(target, name, { get: all[name], enumerable: !0 });
-    }, __copyProps2 = (to, from, except, desc) => {
-      if (from && typeof from == "object" || typeof from == "function")
-        for (let key of __getOwnPropNames2(from))
-          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
-      return to;
-    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), ComponentContext_exports = {};
-    __export2(ComponentContext_exports, {
-      ComponentContext: () => ComponentContext
-    });
-    module2.exports = __toCommonJS2(ComponentContext_exports);
-    var import_createStyledContext = require_createStyledContext_native(), ComponentContext = (0, import_createStyledContext.createStyledContext)({
-      disableSSR: void 0,
-      inText: !1,
-      language: null,
-      animationDriver: null,
-      groups: {
-        emit: null,
-        subscribe: null,
-        state: {}
+        if (!parentManager)
+          throw process.env.NODE_ENV !== "production" ? new Error(
+            "No parent manager given, this is likely due to duplicated Tamagui dependencies. Check your lockfile for mis-matched versions. It could also be from an error somewhere else in your stack causing Tamagui to recieve undefined context, you can try putting some ErrorBoundary components around other areas of your app, or a Suspense boundary."
+          ) : "\u274C 000";
+        if (this.parentManager = parentManager, !this.updateStateFromProps(props, !1))
+          return parentManager;
+      }
+      updateStateFromProps(props = this.props || {}, shouldNotify = !0) {
+        if (this.props = props, props.forceTheme)
+          return this.state.theme = props.forceTheme, this.state.name = props.name || "", this.updateState(this.state, !0), this.state;
+        let nextState = this.getStateIfChanged(props);
+        if (nextState)
+          return this.updateState(nextState, shouldNotify), nextState;
+      }
+      updateState(nextState, shouldNotify = !0) {
+        this.state = nextState, this._allKeys = null, process.env.NODE_ENV !== "production" && (this._numChangeEventsSent ??= 0, this._numChangeEventsSent++), shouldNotify && this.notify();
+      }
+      getStateIfChanged(props = this.props, state = this.state, parentManager = this.parentManager) {
+        let _ = this.getState(props, parentManager);
+        if (state && state !== emptyState && !_)
+          return parentManager == null ? void 0 : parentManager.state;
+        if (this.getStateShouldChange(_, state))
+          return _;
+      }
+      getStateShouldChange(nextState, state = this.state) {
+        return !(!(nextState != null && nextState.theme) || nextState.theme === (state == null ? void 0 : state.theme));
+      }
+      getState(props = this.props, parentManager = this.parentManager) {
+        return getState(props, parentManager) || (parentManager == null ? void 0 : parentManager.state) || null;
+      }
+      get allKeys() {
+        var _a;
+        return this._allKeys ||= /* @__PURE__ */ new Set([
+          ...((_a = this.parentManager) == null ? void 0 : _a.allKeys) || [],
+          ...Object.keys(this.state.theme || {})
+        ]), this._allKeys;
+      }
+      notify(forced = !1) {
+        this.themeListeners.forEach((cb) => cb(this.state.name, this, forced));
+      }
+      onChangeTheme(cb, debugId) {
+        return process.env.NODE_ENV !== "production" && debugId && (this._listeningIds ??= /* @__PURE__ */ new Set(), this._listeningIds.add(debugId)), this.themeListeners.add(cb), () => {
+          this.themeListeners.delete(cb);
+        };
       }
-    });
-  }
-});
-
-// ../web/dist/cjs/defaultComponentState.native.js
-var require_defaultComponentState_native = __commonJS({
-  "../web/dist/cjs/defaultComponentState.native.js"(exports2, module2) {
-    "use strict";
-    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
-      for (var name in all)
-        __defProp2(target, name, { get: all[name], enumerable: !0 });
-    }, __copyProps2 = (to, from, except, desc) => {
-      if (from && typeof from == "object" || typeof from == "function")
-        for (let key of __getOwnPropNames2(from))
-          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
-      return to;
-    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), defaultComponentState_exports = {};
-    __export2(defaultComponentState_exports, {
-      defaultComponentState: () => defaultComponentState,
-      defaultComponentStateMounted: () => defaultComponentStateMounted,
-      defaultComponentStateShouldEnter: () => defaultComponentStateShouldEnter
-    });
-    module2.exports = __toCommonJS2(defaultComponentState_exports);
-    var defaultComponentState = {
-      hover: !1,
-      press: !1,
-      pressIn: !1,
-      focus: !1,
-      unmounted: !0
-    }, defaultComponentStateMounted = {
-      ...defaultComponentState,
-      unmounted: !1
-    }, defaultComponentStateShouldEnter = {
-      ...defaultComponentState,
-      unmounted: "should-enter"
     };
-  }
-});
-
-// ../web/dist/cjs/helpers/createShallowSetState.native.js
-var require_createShallowSetState_native = __commonJS({
-  "../web/dist/cjs/helpers/createShallowSetState.native.js"(exports2, module2) {
-    "use strict";
-    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
-      for (var name in all)
-        __defProp2(target, name, { get: all[name], enumerable: !0 });
-    }, __copyProps2 = (to, from, except, desc) => {
-      if (from && typeof from == "object" || typeof from == "function")
-        for (let key of __getOwnPropNames2(from))
-          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
-      return to;
-    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), createShallowSetState_exports = {};
-    __export2(createShallowSetState_exports, {
-      createShallowSetState: () => createShallowSetState,
-      isEqualShallow: () => isEqualShallow,
-      mergeIfNotShallowEqual: () => mergeIfNotShallowEqual
-    });
-    module2.exports = __toCommonJS2(createShallowSetState_exports);
-    function createShallowSetState(setter, debug) {
-      return (next) => setter((prev) => mergeIfNotShallowEqual(prev, next, debug));
-    }
-    function mergeIfNotShallowEqual(prev, next, debug) {
-      return isEqualShallow(prev, next) ? prev : (process.env.NODE_ENV === "development" && debug && console.warn("setStateShallow CHANGE", { prev, next }), { ...prev, ...next });
+    function getState(props, manager) {
+      var _a;
+      if (props.name && props.reset)
+        throw new Error(
+          process.env.NODE_ENV === "production" ? "\u274C004" : "Cannot reset and set a new name at the same time."
+        );
+      if (!getHasThemeUpdatingProps(props))
+        return null;
+      let themes = (0, import_config.getThemes)(), [allManagers, componentManagers] = getManagers(manager), isDirectParentAComponentTheme = !!(manager != null && manager.state.isComponent), startIndex = props.reset && !isDirectParentAComponentTheme ? 1 : 0, baseManager = allManagers[startIndex], parentManager = allManagers[startIndex + 1];
+      if (!baseManager && props.reset)
+        return process.env.NODE_ENV !== "production" && console.warn("Cannot reset, no parent theme exists"), null;
+      let { componentName } = props, result = null, baseName = (baseManager == null ? void 0 : baseManager.state.name) || "";
+      baseManager != null && baseManager.state.isComponent && (baseName = baseName.replace(/_[A-Z][A-Za-z]+/, ""));
+      let nextName = props.reset ? baseName : props.name || "", allComponentThemes = componentManagers.map((x) => (x == null ? void 0 : x.state.name) || "");
+      isDirectParentAComponentTheme && allComponentThemes.shift();
+      let base = baseName.split(import_constants2.THEME_NAME_SEPARATOR), max = base.length, min = props.componentName && !nextName ? max : 0;
+      for (let i = max; i >= min; i--) {
+        let prefix = base.slice(0, i).join(import_constants2.THEME_NAME_SEPARATOR);
+        props.inverse && (prefix = inverseThemeName(prefix));
+        let potentials = [];
+        if (prefix && prefix !== baseName && potentials.push(prefix), nextName && potentials.unshift(prefix ? `${prefix}_${nextName}` : nextName), i === 1) {
+          let lastSegment = potentials.findIndex((x) => !x.includes("_"));
+          lastSegment > 0 && potentials.splice(lastSegment, 0, nextName);
+        }
+        if (componentName && !props.reset) {
+          let baseLen = base.length, componentPotentials = [];
+          if (nextName && baseLen > 1) {
+            let beforeSeparator = base[0];
+            componentPotentials.push(`${beforeSeparator}_${nextName}_${componentName}`);
+          }
+          if (componentPotentials.push(`${prefix}_${componentName}`), nextName) {
+            if (i > baseLen) {
+              let prefixLessOne = base.slice(0, i - 1).join(import_constants2.THEME_NAME_SEPARATOR);
+              if (prefixLessOne) {
+                let lessSpecific = `${prefixLessOne}_${nextName}_${componentName}`;
+                componentPotentials.unshift(lessSpecific);
+              }
+            }
+            let moreSpecific = `${prefix}_${nextName}_${componentName}`;
+            componentPotentials.unshift(moreSpecific);
+          }
+          potentials = [...componentPotentials, ...potentials, ...allComponentThemes];
+        }
+        let found = potentials.find((t) => t in themes);
+        if (process.env.NODE_ENV !== "production" && typeof props.debug == "string" && console.info(" getState ", {
+          props,
+          found,
+          potentials,
+          baseManager,
+          nextName,
+          baseName,
+          prefix
+        }), found) {
+          let names = found.split("_"), [firstName, ...restNames] = names, lastName = names[names.length - 1], isComponent = lastName[0] === lastName[0].toUpperCase(), scheme = firstName === "light" ? "light" : firstName === "dark" ? "dark" : void 0, pre = import_constants2.THEME_CLASSNAME_PREFIX, className = import_constants.isWeb ? `${pre}sub_theme ${pre}${!scheme || !restNames.length ? firstName : restNames.join("_")}` : "", parentState = (_a = baseManager || parentManager) == null ? void 0 : _a.state, parentName = parentState == null ? void 0 : parentState.name;
+          result = {
+            name: found,
+            parentName,
+            theme: themes[found],
+            className,
+            isComponent,
+            scheme
+          };
+          break;
+        }
+      }
+      return process.env.NODE_ENV !== "production" && props.debug === "verbose" && typeof window < "u" && (console.groupCollapsed("ThemeManager.getState()"), console.info({ props, baseName, base, min, max }), console.warn("result", { result }), console.trace(), console.groupEnd()), result;
     }
-    function isEqualShallow(prev, next) {
-      for (let key in next)
-        if (prev[key] !== next[key])
-          return !1;
-      return !0;
+    var inverseThemeName = (themeName) => themeName.startsWith("light") ? themeName.replace(/^light/, "dark") : themeName.replace(/^dark/, "light");
+    function getManagers(themeManager) {
+      let comp = [], all = [], cur = themeManager;
+      for (; cur; )
+        all.push(cur), cur.state.isComponent && comp.push(cur), cur = cur.parentManager;
+      return [all, comp];
     }
   }
 });
 
-// ../web/dist/cjs/constants/accessibilityDirectMap.native.js
-var require_accessibilityDirectMap_native = __commonJS({
-  "../web/dist/cjs/constants/accessibilityDirectMap.native.js"(exports2, module2) {
+// ../web/dist/cjs/helpers/ThemeManagerContext.native.js
+var require_ThemeManagerContext_native = __commonJS({
+  "../web/dist/cjs/helpers/ThemeManagerContext.native.js"(exports2, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
       for (var name in all)
@@ -2203,72 +2074,18 @@ var require_accessibilityDirectMap_native = __commonJS({
         for (let key of __getOwnPropNames2(from))
           !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
       return to;
-    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), accessibilityDirectMap_native_exports = {};
-    __export2(accessibilityDirectMap_native_exports, {
-      accessibilityDirectMap: () => accessibilityDirectMap,
-      accessibilityWebRoleToNativeRole: () => accessibilityWebRoleToNativeRole,
-      nativeAccessibilityState: () => nativeAccessibilityState,
-      nativeAccessibilityValue: () => nativeAccessibilityValue,
-      webToNativeAccessibilityDirectMap: () => webToNativeAccessibilityDirectMap
+    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), ThemeManagerContext_exports = {};
+    __export2(ThemeManagerContext_exports, {
+      ThemeManagerIDContext: () => ThemeManagerIDContext
     });
-    module2.exports = __toCommonJS2(accessibilityDirectMap_native_exports);
-    var accessibilityDirectMap = {}, webToNativeAccessibilityDirectMap = {
-      "aria-label": "accessibilityLabel",
-      "aria-labelledby": "accessibilityLabelledBy",
-      "aria-live": "accessibilityLiveRegion",
-      "aria-modal": "accessibilityViewIsModal",
-      "aria-hidden": "accessibilityElementsHidden"
-    }, nativeAccessibilityValue = {
-      "aria-valuemin": "min",
-      "aria-valuemax": "max",
-      "aria-valuenow": "now",
-      "aria-valuetext": "text"
-    }, nativeAccessibilityState = {
-      "aria-disabled": "disabled",
-      "aria-selected": "selected",
-      "aria-checked": "checked",
-      "aria-busy": "busy",
-      "aria-expanded": "expanded"
-    }, accessibilityWebRoleToNativeRole = {
-      alert: "alert",
-      button: "button",
-      checkbox: "checkbox",
-      combobox: "combobox",
-      grid: "grid",
-      group: "none",
-      heading: "header",
-      imagebutton: "imagebutton",
-      img: "image",
-      keyboardkey: "keyboardkey",
-      link: "link",
-      menu: "menu",
-      menubar: "menubar",
-      menuitem: "menuitem",
-      none: "none",
-      presentation: "none",
-      progressbar: "progressbar",
-      radio: "radio",
-      radiogroup: "radiogroup",
-      region: "summary",
-      scrollbar: "scrollbar",
-      searchbox: "search",
-      slider: "adjustable",
-      spinbutton: "spinbutton",
-      summary: "summary",
-      switch: "switch",
-      tab: "tab",
-      tablist: "tablist",
-      text: "text",
-      timer: "timer",
-      togglebutton: "togglebutton",
-      toolbar: "toolbar"
-    };
+    module2.exports = __toCommonJS2(ThemeManagerContext_exports);
+    var import_react3 = require("react"), ThemeManagerIDContext = (0, import_react3.createContext)(1);
   }
 });
 
-// ../web/dist/cjs/constants/isDevTools.native.js
-var require_isDevTools_native = __commonJS({
-  "../web/dist/cjs/constants/isDevTools.native.js"(exports2, module2) {
+// ../web/dist/cjs/hooks/useTheme.native.js
+var require_useTheme_native = __commonJS({
+  "../web/dist/cjs/hooks/useTheme.native.js"(exports2, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
       for (var name in all)
@@ -2278,27 +2095,260 @@ var require_isDevTools_native = __commonJS({
         for (let key of __getOwnPropNames2(from))
           !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
       return to;
-    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), isDevTools_exports = {};
-    __export2(isDevTools_exports, {
-      isDevTools: () => isDevTools
+    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), useTheme_exports = {};
+    __export2(useTheme_exports, {
+      activeThemeManagers: () => activeThemeManagers,
+      getThemeManager: () => getThemeManager,
+      getThemeProxied: () => getThemeProxied,
+      useChangeThemeEffect: () => useChangeThemeEffect,
+      useTheme: () => useTheme,
+      useThemeWithState: () => useThemeWithState
     });
-    module2.exports = __toCommonJS2(isDevTools_exports);
-    var isDevTools = (() => {
-      if (process.env.NODE_ENV === "development")
-        try {
-          return new Function("try {return this===window;}catch(e){ return false;}")();
-        } catch {
-        }
+    module2.exports = __toCommonJS2(useTheme_exports);
+    var import_constants = require_index_native3(), import_react3 = require("react"), import_config = require_config_native(), import_createVariable = require_createVariable_native(), import_createShallowSetState = require_createShallowSetState_native(), import_ThemeManager = require_ThemeManager_native(), import_ThemeManagerContext = require_ThemeManagerContext_native(), emptyProps = { name: null }, cached;
+    function getDefaultThemeProxied() {
+      if (cached)
+        return cached;
+      let config = (0, import_config.getConfig)(), name = config.themes.light ? "light" : Object.keys(config.themes)[0], defaultTheme = config.themes[name];
+      return cached = getThemeProxied({ theme: defaultTheme, name }), cached;
+    }
+    var useTheme = (props = emptyProps) => {
+      let [_, theme] = useThemeWithState(props);
+      return theme || getDefaultThemeProxied();
+    }, useThemeWithState = (props) => {
+      let keys = (0, import_react3.useRef)([]), changedThemeState = useChangeThemeEffect(
+        props,
+        !1,
+        keys.current,
+        import_constants.isServer ? void 0 : () => {
+          var _a, _b;
+          let next = ((_a = props.shouldUpdate) == null ? void 0 : _a.call(props)) ?? (keys.current.length > 0 ? !0 : void 0);
+          return process.env.NODE_ENV === "development" && typeof props.debug == "string" && props.debug !== "profile" && console.info("  \u{1F3A8} useTheme() shouldUpdate?", next, {
+            shouldUpdateProp: (_b = props.shouldUpdate) == null ? void 0 : _b.call(props),
+            keys: [...keys.current]
+          }), next;
+        }
+      ), { themeManager, state } = changedThemeState;
+      process.env.NODE_ENV === "development" && (state != null && state.theme || process.env.TAMAGUI_DISABLE_NO_THEME_WARNING !== "1" && console.warn(
+        `[tamagui] No theme found, this could be due to an invalid theme name (given theme props ${JSON.stringify(
+          props
+        )}).
+
+If this is intended and you are using Tamagui without any themes, you can disable this warning by setting the environment variable TAMAGUI_DISABLE_NO_THEME_WARNING=1`
+      ));
+      let themeProxied = (0, import_react3.useMemo)(() => !themeManager || !(state != null && state.theme) ? {} : getThemeProxied(state, props.deopt, themeManager, keys.current, props.debug), [state == null ? void 0 : state.theme, themeManager, props.deopt, props.debug]);
+      return process.env.NODE_ENV === "development" && props.debug === "verbose" && (console.groupCollapsed("  \u{1F539} useTheme =>", state == null ? void 0 : state.name), console.info("returning state", changedThemeState, "from props", props), console.groupEnd()), [changedThemeState, themeProxied];
+    };
+    function getThemeProxied({ theme, name, scheme }, deopt = !1, themeManager, keys, debug) {
+      if (!theme)
+        return {};
+      let config = (0, import_config.getConfig)();
+      function track(key) {
+        keys && !keys.includes(key) && (keys.push(key), process.env.NODE_ENV === "development" && debug && console.info(` \u{1F3A8} useTheme() tracking new key: ${key}`));
+      }
+      return new Proxy(theme, {
+        has(_, key) {
+          if (Reflect.has(theme, key))
+            return !0;
+          if (typeof key == "string")
+            return key[0] === "$" && (key = key.slice(1)), themeManager == null ? void 0 : themeManager.allKeys.has(key);
+        },
+        get(_, key) {
+          if (
+            // dont ask me, idk why but on hermes you can see that useTheme()[undefined] passes in STRING undefined to proxy
+            // if someone is crazy enough to use "undefined" as a theme key then this not working is on them
+            key !== "undefined" && typeof key == "string"
+          ) {
+            let keyString = key[0] === "$" ? key.slice(1) : key, val = theme[keyString];
+            if (val && typeof val == "object")
+              return new Proxy(val, {
+                // when they touch the actual value we only track it
+                // if its a variable (web), its ignored!
+                get(_2, subkey) {
+                  if (subkey === "val")
+                    track(keyString);
+                  else if (subkey === "get")
+                    return (platform) => {
+                      let outVal = (0, import_createVariable.getVariable)(val);
+                      if (platform !== "web" && import_constants.isIos && !deopt && config.settings.fastSchemeChange && !someParentIsInversed(themeManager) && scheme) {
+                        let oppositeThemeName = name.replace(
+                          scheme === "dark" ? "dark" : "light",
+                          scheme === "dark" ? "light" : "dark"
+                        ), oppositeTheme = config.themes[oppositeThemeName], oppositeVal = (0, import_createVariable.getVariable)(oppositeTheme == null ? void 0 : oppositeTheme[keyString]);
+                        if (oppositeVal)
+                          return {
+                            dynamic: {
+                              dark: scheme === "dark" ? outVal : oppositeVal,
+                              light: scheme === "light" ? outVal : oppositeVal
+                            }
+                          };
+                      }
+                      return track(keyString), outVal;
+                    };
+                  return Reflect.get(val, subkey);
+                }
+              });
+            if (process.env.NODE_ENV === "development" && process.env.TAMAGUI_FEAT_THROW_ON_MISSING_THEME_VALUE === "1")
+              throw new Error(
+                `[tamagui] No theme key "${key}" found in theme ${name}. 
+  Keys in theme: ${Object.keys(
+                  theme
+                ).join(", ")}`
+              );
+          }
+          return Reflect.get(_, key);
+        }
+      });
+    }
+    function someParentIsInversed(manager) {
+      {
+        let cur = manager;
+        for (; cur; ) {
+          if (!cur.parentManager)
+            return !1;
+          if (cur.parentManager.state.scheme !== cur.state.scheme)
+            return !0;
+          cur = cur.parentManager;
+        }
+      }
       return !1;
-    })();
+    }
+    var activeThemeManagers = /* @__PURE__ */ new Set(), _uidToManager = /* @__PURE__ */ new WeakMap(), _idToUID = {}, getId = (id) => _idToUID[id], getThemeManager = (id) => _uidToManager.get(getId(id)), registerThemeManager = (t) => {
+      if (!_idToUID[t.id]) {
+        let id = _idToUID[t.id] = {};
+        _uidToManager.set(id, t);
+      }
+    }, useChangeThemeEffect = (props, isRoot = !1, keys, shouldUpdate) => {
+      let { disable } = props, parentManagerId = (0, import_react3.useContext)(import_ThemeManagerContext.ThemeManagerIDContext), parentManager = getThemeManager(parentManagerId);
+      if (!isRoot && !parentManager || disable)
+        return {
+          isNewTheme: !1,
+          state: parentManager == null ? void 0 : parentManager.state,
+          themeManager: parentManager
+        };
+      let [themeState, setThemeState] = (0, import_react3.useState)(createState), { state, mounted, isNewTheme, themeManager, inversed } = themeState, isInversingOnMount = !!(!themeState.mounted && props.inverse);
+      function getShouldUpdateTheme(manager = themeManager, nextState, prevState = state, forceShouldChange = !1) {
+        let forceUpdate = shouldUpdate == null ? void 0 : shouldUpdate();
+        if (!manager || !forceShouldChange && forceUpdate === !1)
+          return;
+        let next = nextState || manager.getState(props, parentManager);
+        if (forceShouldChange || next && !(forceUpdate !== !0 && !manager.getStateShouldChange(next, prevState)))
+          return next;
+      }
+      if (import_constants.isServer || ((0, import_react3.useEffect)(() => {
+        if (!themeManager)
+          return;
+        if (props.inverse && !mounted) {
+          setThemeState((prev) => createState({
+            ...prev,
+            mounted: !0
+          }));
+          return;
+        }
+        (isNewTheme || getShouldUpdateTheme(themeManager)) && (activeThemeManagers.add(themeManager), setThemeState(createState));
+        let selfListenerDispose = themeManager.onChangeTheme((_a, _b, forced) => {
+          forced && setThemeState((prev) => createState(prev, !0));
+        }), disposeChangeListener = parentManager == null ? void 0 : parentManager.onChangeTheme(
+          (name, manager, forced) => {
+            let force = forced || (shouldUpdate == null ? void 0 : shouldUpdate()) || props.deopt || props["disable-child-theme"], shouldTryUpdate = force ?? !!(keys != null && keys.length || isNewTheme);
+            process.env.NODE_ENV === "development" && props.debug === "verbose" && console.info(" \u{1F538} onChange", themeManager.id, {
+              force,
+              shouldTryUpdate,
+              props,
+              name,
+              manager,
+              keys
+            }), shouldTryUpdate && setThemeState((prev) => createState(prev, force));
+          },
+          themeManager.id
+        );
+        return () => {
+          selfListenerDispose(), disposeChangeListener == null || disposeChangeListener(), isNewTheme && activeThemeManagers.delete(themeManager);
+        };
+      }, [
+        themeManager,
+        parentManager,
+        isNewTheme,
+        props.componentName,
+        props.inverse,
+        props.name,
+        props.reset,
+        mounted
+      ]), process.env.NODE_ENV === "development" && props.debug !== "profile" && (0, import_react3.useEffect)(() => (globalThis.TamaguiThemeManagers ??= /* @__PURE__ */ new Set(), globalThis.TamaguiThemeManagers.add(themeManager), () => {
+        globalThis.TamaguiThemeManagers.delete(themeManager);
+      }), [themeManager])), isInversingOnMount)
+        return {
+          isNewTheme: !1,
+          inversed: !1,
+          themeManager: parentManager,
+          state: {
+            name: "",
+            ...parentManager == null ? void 0 : parentManager.state,
+            className: ""
+          }
+        };
+      return {
+        state,
+        isNewTheme,
+        inversed,
+        themeManager
+      };
+      function createState(prev, force = !1) {
+        if (prev && (shouldUpdate == null ? void 0 : shouldUpdate()) === !1 && !force)
+          return prev;
+        let themeManager2 = parentManager, state2;
+        if ((0, import_ThemeManager.getHasThemeUpdatingProps)(props)) {
+          let getNewThemeManager = () => new import_ThemeManager.ThemeManager(props, isRoot ? "root" : parentManager);
+          if (prev != null && prev.themeManager) {
+            themeManager2 = prev.themeManager;
+            let forceChange = force || !!(keys != null && keys.length), next = themeManager2.getState(props, parentManager), nextState = getShouldUpdateTheme(
+              themeManager2,
+              next,
+              prev.state,
+              forceChange
+            );
+            nextState ? (state2 = nextState, prev.isNewTheme ? themeManager2.updateState(nextState) : themeManager2 = getNewThemeManager()) : prev.isNewTheme && parentManager && !next && (themeManager2 = parentManager);
+          } else
+            themeManager2 = getNewThemeManager(), state2 = { ...themeManager2.state };
+        }
+        let isNewTheme2 = !!(themeManager2 !== parentManager || props.inverse);
+        isNewTheme2 && registerThemeManager(themeManager2);
+        let mounted2 = props.inverse ? isRoot || (prev == null ? void 0 : prev.mounted) : !0;
+        state2 || (isNewTheme2 ? state2 = themeManager2.state : (state2 = parentManager.state, themeManager2 = parentManager));
+        let wasInversed = prev == null ? void 0 : prev.inversed, inversed2 = isNewTheme2 && state2.scheme !== (parentManager == null ? void 0 : parentManager.state.scheme) ? !0 : wasInversed != null ? !1 : null, response = {
+          themeManager: themeManager2,
+          isNewTheme: isNewTheme2,
+          mounted: mounted2,
+          inversed: inversed2
+        }, shouldReturnPrev = prev && !force && // isEqualShallow uses the second arg as the keys so this should compare without state first...
+        (0, import_createShallowSetState.isEqualShallow)(prev, response) && // ... and then compare just the state, because we make a new state obj but is likely the same
+        (0, import_createShallowSetState.isEqualShallow)(prev.state, state2);
+        if (prev && shouldReturnPrev)
+          return prev;
+        if (response.state = state2, process.env.NODE_ENV === "development" && props.debug && import_constants.isClient) {
+          console.groupCollapsed(` \u{1F537} ${themeManager2.id} useChangeThemeEffect createState`);
+          let parentState = { ...parentManager == null ? void 0 : parentManager.state }, parentId = parentManager == null ? void 0 : parentManager.id, themeManagerState = { ...themeManager2.state };
+          console.info({
+            props,
+            parentState,
+            parentId,
+            themeManager: themeManager2,
+            prev,
+            response,
+            themeManagerState
+          }), console.groupEnd();
+        }
+        return response;
+      }
+    };
   }
 });
 
-// ../web/dist/cjs/helpers/getGroupPropParts.native.js
-var require_getGroupPropParts_native = __commonJS({
-  "../web/dist/cjs/helpers/getGroupPropParts.native.js"(exports2, module2) {
+// ../web/dist/cjs/Tamagui.native.js
+var require_Tamagui_native = __commonJS({
+  "../web/dist/cjs/Tamagui.native.js"(exports2, module2) {
     "use strict";
-    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
+    var __create2 = Object.create, __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __getProtoOf2 = Object.getPrototypeOf, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
       for (var name in all)
         __defProp2(target, name, { get: all[name], enumerable: !0 });
     }, __copyProps2 = (to, from, except, desc) => {
@@ -2306,22 +2356,112 @@ var require_getGroupPropParts_native = __commonJS({
         for (let key of __getOwnPropNames2(from))
           !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
       return to;
-    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), getGroupPropParts_exports = {};
-    __export2(getGroupPropParts_exports, {
-      getGroupPropParts: () => getGroupPropParts
-    });
-    module2.exports = __toCommonJS2(getGroupPropParts_exports);
-    var import_useMedia = require_useMedia_native();
-    function getGroupPropParts(groupProp) {
-      let mediaQueries = (0, import_useMedia.getMedia)(), [_, name, part3, part4] = groupProp.split("-"), pseudo, media = part3 in mediaQueries ? part3 : void 0;
-      return media ? pseudo = part4 : pseudo = part3, { name, pseudo, media };
-    }
-  }
+    }, __toESM2 = (mod, isNodeMode, target) => (target = mod != null ? __create2(__getProtoOf2(mod)) : {}, __copyProps2(
+      // If the importer is in node compatibility mode or this is not an ESM
+      // file that has been converted to a CommonJS file using a Babel-
+      // compatible transform (i.e. "__esModule" has not been set), then set
+      // "default" to the CommonJS "module.exports" for node compatibility.
+      isNodeMode || !mod || !mod.__esModule ? __defProp2(target, "default", { value: mod, enumerable: !0 }) : target,
+      mod
+    )), __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), Tamagui_exports = {};
+    __export2(Tamagui_exports, {
+      Tamagui: () => Tamagui,
+      getValueFromIdentifier: () => getValueFromIdentifier,
+      setIdentifierValue: () => setIdentifierValue
+    });
+    module2.exports = __toCommonJS2(Tamagui_exports);
+    var Helpers = __toESM2(require_index_native4()), import_config = require_config_native(), import_insertStyleRule = require_insertStyleRule_native(), import_useMedia = require_useMedia_native(), import_useTheme = require_useTheme_native(), Tamagui = (() => {
+      if (process.env.NODE_ENV === "development") {
+        class TamaguiManager {
+          constructor() {
+            this.Helpers = Helpers, this.getThemeManager = import_useTheme.getThemeManager;
+          }
+          get activeThemeManagers() {
+            return import_useTheme.activeThemeManagers;
+          }
+          get mediaState() {
+            return { ...import_useMedia.mediaState };
+          }
+          get config() {
+            return (0, import_config.getConfig)();
+          }
+          get insertedRules() {
+            return (0, import_insertStyleRule.getAllRules)();
+          }
+          get allSelectors() {
+            return (0, import_insertStyleRule.getAllSelectors)();
+          }
+          get allTransforms() {
+            return (0, import_insertStyleRule.getAllTransforms)();
+          }
+          get identifierToValue() {
+            return identifierToValue;
+          }
+        }
+        return new TamaguiManager();
+      }
+    })(), identifierToValue = /* @__PURE__ */ new Map(), getValueFromIdentifier = (identifier) => identifierToValue.get(identifier), setIdentifierValue = (identifier, value) => {
+      identifierToValue.set(identifier, value);
+    };
+  }
 });
 
-// ../web/dist/cjs/helpers/createMediaStyle.native.js
-var require_createMediaStyle_native = __commonJS({
-  "../web/dist/cjs/helpers/createMediaStyle.native.js"(exports2, module2) {
+// ../compose-refs/dist/cjs/compose-refs.native.js
+var require_compose_refs_native = __commonJS({
+  "../compose-refs/dist/cjs/compose-refs.native.js"(exports2, module2) {
+    "use strict";
+    var __create2 = Object.create, __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __getProtoOf2 = Object.getPrototypeOf, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
+      for (var name in all)
+        __defProp2(target, name, { get: all[name], enumerable: !0 });
+    }, __copyProps2 = (to, from, except, desc) => {
+      if (from && typeof from == "object" || typeof from == "function")
+        for (let key of __getOwnPropNames2(from))
+          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
+      return to;
+    }, __toESM2 = (mod, isNodeMode, target) => (target = mod != null ? __create2(__getProtoOf2(mod)) : {}, __copyProps2(
+      // If the importer is in node compatibility mode or this is not an ESM
+      // file that has been converted to a CommonJS file using a Babel-
+      // compatible transform (i.e. "__esModule" has not been set), then set
+      // "default" to the CommonJS "module.exports" for node compatibility.
+      isNodeMode || !mod || !mod.__esModule ? __defProp2(target, "default", { value: mod, enumerable: !0 }) : target,
+      mod
+    )), __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), compose_refs_exports = {};
+    __export2(compose_refs_exports, {
+      composeRefs: () => composeRefs,
+      useComposedRefs: () => useComposedRefs
+    });
+    module2.exports = __toCommonJS2(compose_refs_exports);
+    var React = __toESM2(require("react"));
+    function setRef(ref, value) {
+      typeof ref == "function" ? ref(value) : ref && (ref.current = value);
+    }
+    function composeRefs(...refs) {
+      return (node) => refs.forEach((ref) => setRef(ref, node));
+    }
+    function useComposedRefs(...refs) {
+      return React.useCallback(composeRefs(...refs), refs);
+    }
+  }
+});
+
+// ../compose-refs/dist/cjs/index.native.js
+var require_index_native5 = __commonJS({
+  "../compose-refs/dist/cjs/index.native.js"(exports2, module2) {
+    "use strict";
+    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __copyProps2 = (to, from, except, desc) => {
+      if (from && typeof from == "object" || typeof from == "function")
+        for (let key of __getOwnPropNames2(from))
+          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
+      return to;
+    }, __reExport2 = (target, mod, secondTarget) => (__copyProps2(target, mod, "default"), secondTarget && __copyProps2(secondTarget, mod, "default")), __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), src_exports2 = {};
+    module2.exports = __toCommonJS2(src_exports2);
+    __reExport2(src_exports2, require_compose_refs_native(), module2.exports);
+  }
+});
+
+// ../use-did-finish-ssr/dist/cjs/index.native.js
+var require_index_native6 = __commonJS({
+  "../use-did-finish-ssr/dist/cjs/index.native.js"(exports2, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
       for (var name in all)
@@ -2331,165 +2471,467 @@ var require_createMediaStyle_native = __commonJS({
         for (let key of __getOwnPropNames2(from))
           !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
       return to;
-    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), createMediaStyle_exports = {};
-    __export2(createMediaStyle_exports, {
-      MEDIA_SEP: () => MEDIA_SEP,
-      createMediaStyle: () => createMediaStyle
+    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), src_exports2 = {};
+    __export2(src_exports2, {
+      useClientValue: () => useClientValue,
+      useDidFinishSSR: () => useDidFinishSSR
     });
-    module2.exports = __toCommonJS2(createMediaStyle_exports);
-    var import_config = require_config_native(), import_useMedia = require_useMedia_native(), import_getGroupPropParts = require_getGroupPropParts_native(), MEDIA_SEP = "_", prefixes = null, selectors = null, groupPseudoToPseudoCSSMap = {
-      press: "active"
-    }, createMediaStyle = (styleObject, mediaKeyIn, mediaQueries, type, negate, priority) => {
-      let { property, identifier, rules } = styleObject, conf = (0, import_config.getConfig)(), enableMediaPropOrder = conf.settings.mediaPropOrder, isTheme = type === "theme", isPlatform = type === "platform", isGroup = type === "group", isNonWindowMedia = isTheme || isPlatform || isGroup, negKey = negate ? "0" : "", ogPrefix = identifier.slice(0, identifier.indexOf("-") + 1), id = `${ogPrefix}${MEDIA_SEP}${mediaKeyIn.replace("-", "")}${negKey}${MEDIA_SEP}`, styleRule = "", groupMediaKey, containerName, nextIdentifier = identifier.replace(ogPrefix, id), styleInner = rules.map((rule) => rule.replace(identifier, nextIdentifier)).join(";");
-      if (isNonWindowMedia) {
-        let precedenceImportancePrefix = new Array((priority || 0) + (isGroup ? 1 : 0)).fill(":root").join("");
-        if (isTheme || isGroup) {
-          let groupInfo = (0, import_getGroupPropParts.getGroupPropParts)(mediaKeyIn), mediaName = groupInfo == null ? void 0 : groupInfo.name;
-          groupMediaKey = groupInfo == null ? void 0 : groupInfo.media, isGroup && (containerName = mediaName);
-          let name = (isGroup ? "group_" : "") + mediaName, selectorStart = styleInner.indexOf(":root"), selectorEnd = styleInner.lastIndexOf("{"), selector = styleInner.slice(selectorStart, selectorEnd), precedenceSpace = conf.themeClassNameOnRoot && isTheme ? "" : " ", pseudoSelectorName = groupInfo.pseudo ? groupPseudoToPseudoCSSMap[groupInfo.pseudo] || groupInfo.pseudo : void 0, pseudoSelector = pseudoSelectorName ? `:${pseudoSelectorName}` : "", presedencePrefix = `:root${precedenceImportancePrefix}${precedenceSpace}`, mediaSelector = `.t_${name}${pseudoSelector}`, nextSelector = `${presedencePrefix}${mediaSelector} ${selector.replace(
-            ":root",
-            ""
-          )}`;
-          styleRule = styleInner.replace(selector, nextSelector);
-        } else
-          styleRule = `${precedenceImportancePrefix}${styleInner}`;
-      }
-      if (!isNonWindowMedia || groupMediaKey) {
-        if (!selectors) {
-          let mediaKeys = Object.keys(mediaQueries);
-          selectors = Object.fromEntries(
-            mediaKeys.map((key) => [key, (0, import_useMedia.mediaObjectToString)(mediaQueries[key])])
-          ), enableMediaPropOrder || (prefixes = Object.fromEntries(
-            mediaKeys.map((k, index) => [k, new Array(index + 1).fill(":root").join("")])
-          ));
+    module2.exports = __toCommonJS2(src_exports2);
+    var import_react3 = require("react");
+    function useDidFinishSSR(value) {
+      return value ?? !0;
+    }
+    function useClientValue(value) {
+      return useDidFinishSSR() ? typeof value == "function" ? value() : value : void 0;
+    }
+  }
+});
+
+// ../web/dist/cjs/helpers/objectIdentityKey.native.js
+var require_objectIdentityKey_native = __commonJS({
+  "../web/dist/cjs/helpers/objectIdentityKey.native.js"(exports2, module2) {
+    "use strict";
+    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
+      for (var name in all)
+        __defProp2(target, name, { get: all[name], enumerable: !0 });
+    }, __copyProps2 = (to, from, except, desc) => {
+      if (from && typeof from == "object" || typeof from == "function")
+        for (let key of __getOwnPropNames2(from))
+          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
+      return to;
+    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), objectIdentityKey_exports = {};
+    __export2(objectIdentityKey_exports, {
+      objectIdentityKey: () => objectIdentityKey
+    });
+    module2.exports = __toCommonJS2(objectIdentityKey_exports);
+    function objectIdentityKey(obj) {
+      let k = "";
+      for (let key in obj) {
+        k += key;
+        let arg = obj[key], type = typeof arg;
+        if (!arg || type !== "object" && type !== "function")
+          k += type + arg;
+        else if (cache.has(arg))
+          k += cache.get(arg);
+        else {
+          let v = Math.random();
+          cache.set(arg, v), k += v;
         }
-        let mediaKey = groupMediaKey || mediaKeyIn, mediaSelector = selectors[mediaKey], mediaQuery = `${negate ? "not all and " : ""}${mediaSelector}`, precedenceImportancePrefix = groupMediaKey ? "" : enableMediaPropOrder ? (
-          // this new array should be cached
-          new Array(priority).fill(":root").join("")
-        ) : (
-          // @ts-ignore
-          prefixes[mediaKey]
-        ), prefix = groupMediaKey ? `@container ${containerName}` : "@media";
-        groupMediaKey && (styleInner = styleRule), styleInner.includes(prefix) ? styleRule = styleInner.replace("{", ` and ${mediaQuery} {`).replace("and screen and", "and") : styleRule = `${prefix} ${mediaQuery}{${precedenceImportancePrefix}${styleInner}}`, groupMediaKey && (styleRule = `@supports (contain: ${conf.settings.webContainerType || "inline-size"}) {${styleRule}}`);
       }
-      return {
-        property,
-        rules: [styleRule],
-        identifier: nextIdentifier
+      return k;
+    }
+    var cache = /* @__PURE__ */ new WeakMap();
+  }
+});
+
+// ../web/dist/cjs/helpers/createStyledContext.native.js
+var require_createStyledContext_native = __commonJS({
+  "../web/dist/cjs/helpers/createStyledContext.native.js"(exports2, module2) {
+    "use strict";
+    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
+      for (var name in all)
+        __defProp2(target, name, { get: all[name], enumerable: !0 });
+    }, __copyProps2 = (to, from, except, desc) => {
+      if (from && typeof from == "object" || typeof from == "function")
+        for (let key of __getOwnPropNames2(from))
+          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
+      return to;
+    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), createStyledContext_exports = {};
+    __export2(createStyledContext_exports, {
+      createStyledContext: () => createStyledContext
+    });
+    module2.exports = __toCommonJS2(createStyledContext_exports);
+    var import_react3 = require("react"), import_objectIdentityKey = require_objectIdentityKey_native(), import_jsx_runtime = require("react/jsx-runtime");
+    function createStyledContext(defaultValues) {
+      let OGContext = (0, import_react3.createContext)(defaultValues), OGProvider = OGContext.Provider, Context = OGContext, scopedContexts = /* @__PURE__ */ new Map(), Provider = ({
+        children,
+        scope,
+        ...values
+      }) => {
+        let next = (0, import_react3.useMemo)(() => ({
+          // this ! is a workaround for ts error
+          ...defaultValues,
+          ...values
+        }), [(0, import_objectIdentityKey.objectIdentityKey)(values)]), Provider2 = OGProvider;
+        if (scope) {
+          let ScopedContext = scopedContexts.get(scope);
+          ScopedContext || (ScopedContext = (0, import_react3.createContext)(defaultValues), scopedContexts.set(scope, ScopedContext)), Provider2 = ScopedContext.Provider;
+        }
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Provider2, { value: next, children });
+      }, useStyledContext = (scope) => {
+        let context = scope ? scopedContexts.get(scope) : OGContext;
+        return (0, import_react3.useContext)(context);
       };
-    };
+      return Context.Provider = Provider, Context.props = defaultValues, Context.context = OGContext, Context.useStyledContext = useStyledContext, Context;
+    }
   }
 });
 
-// ../../node_modules/@react-native/normalize-color/index.js
-var require_normalize_color = __commonJS({
-  "../../node_modules/@react-native/normalize-color/index.js"(exports2, module2) {
+// ../web/dist/cjs/contexts/ComponentContext.native.js
+var require_ComponentContext_native = __commonJS({
+  "../web/dist/cjs/contexts/ComponentContext.native.js"(exports2, module2) {
     "use strict";
-    function normalizeColor(color) {
-      if (typeof color == "number")
-        return color >>> 0 === color && color >= 0 && color <= 4294967295 ? color : null;
-      if (typeof color != "string")
-        return null;
-      let matchers = getMatchers(), match;
-      if (match = matchers.hex6.exec(color))
-        return parseInt(match[1] + "ff", 16) >>> 0;
-      let colorFromKeyword = normalizeKeyword(color);
-      return colorFromKeyword ?? ((match = matchers.rgb.exec(color)) ? (parse255(match[1]) << 24 | // r
-      parse255(match[2]) << 16 | // g
-      parse255(match[3]) << 8 | // b
-      255) >>> // a
-      0 : (match = matchers.rgba.exec(color)) ? match[6] !== void 0 ? (parse255(match[6]) << 24 | // r
-      parse255(match[7]) << 16 | // g
-      parse255(match[8]) << 8 | // b
-      parse1(match[9])) >>> // a
-      0 : (parse255(match[2]) << 24 | // r
-      parse255(match[3]) << 16 | // g
-      parse255(match[4]) << 8 | // b
-      parse1(match[5])) >>> // a
-      0 : (match = matchers.hex3.exec(color)) ? parseInt(
-        match[1] + match[1] + // r
-        match[2] + match[2] + // g
-        match[3] + match[3] + // b
-        "ff",
-        // a
-        16
-      ) >>> 0 : (match = matchers.hex8.exec(color)) ? parseInt(match[1], 16) >>> 0 : (match = matchers.hex4.exec(color)) ? parseInt(
-        match[1] + match[1] + // r
-        match[2] + match[2] + // g
-        match[3] + match[3] + // b
-        match[4] + match[4],
-        // a
-        16
-      ) >>> 0 : (match = matchers.hsl.exec(color)) ? (hslToRgb(
-        parse360(match[1]),
-        // h
-        parsePercentage(match[2]),
-        // s
-        parsePercentage(match[3])
-        // l
-      ) | 255) >>> // a
-      0 : (match = matchers.hsla.exec(color)) ? match[6] !== void 0 ? (hslToRgb(
-        parse360(match[6]),
-        // h
-        parsePercentage(match[7]),
-        // s
-        parsePercentage(match[8])
-        // l
-      ) | parse1(match[9])) >>> // a
-      0 : (hslToRgb(
-        parse360(match[2]),
-        // h
-        parsePercentage(match[3]),
-        // s
-        parsePercentage(match[4])
-        // l
-      ) | parse1(match[5])) >>> // a
-      0 : (match = matchers.hwb.exec(color)) ? (hwbToRgb(
-        parse360(match[1]),
-        // h
-        parsePercentage(match[2]),
-        // w
-        parsePercentage(match[3])
-        // b
-      ) | 255) >>> // a
-      0 : null);
-    }
-    function hue2rgb(p, q, t) {
-      return t < 0 && (t += 1), t > 1 && (t -= 1), t < 1 / 6 ? p + (q - p) * 6 * t : t < 1 / 2 ? q : t < 2 / 3 ? p + (q - p) * (2 / 3 - t) * 6 : p;
-    }
-    function hslToRgb(h, s, l) {
-      let q = l < 0.5 ? l * (1 + s) : l + s - l * s, p = 2 * l - q, r = hue2rgb(p, q, h + 1 / 3), g = hue2rgb(p, q, h), b = hue2rgb(p, q, h - 1 / 3);
-      return Math.round(r * 255) << 24 | Math.round(g * 255) << 16 | Math.round(b * 255) << 8;
-    }
-    function hwbToRgb(h, w, b) {
-      if (w + b >= 1) {
-        let gray = Math.round(w * 255 / (w + b));
-        return gray << 24 | gray << 16 | gray << 8;
+    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
+      for (var name in all)
+        __defProp2(target, name, { get: all[name], enumerable: !0 });
+    }, __copyProps2 = (to, from, except, desc) => {
+      if (from && typeof from == "object" || typeof from == "function")
+        for (let key of __getOwnPropNames2(from))
+          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
+      return to;
+    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), ComponentContext_exports = {};
+    __export2(ComponentContext_exports, {
+      ComponentContext: () => ComponentContext
+    });
+    module2.exports = __toCommonJS2(ComponentContext_exports);
+    var import_createStyledContext = require_createStyledContext_native(), ComponentContext = (0, import_createStyledContext.createStyledContext)({
+      disableSSR: void 0,
+      inText: !1,
+      language: null,
+      animationDriver: null,
+      groups: {
+        emit: null,
+        subscribe: null,
+        state: {}
       }
-      let red = hue2rgb(0, 1, h + 1 / 3) * (1 - w - b) + w, green = hue2rgb(0, 1, h) * (1 - w - b) + w, blue = hue2rgb(0, 1, h - 1 / 3) * (1 - w - b) + w;
-      return Math.round(red * 255) << 24 | Math.round(green * 255) << 16 | Math.round(blue * 255) << 8;
-    }
-    var NUMBER = "[-+]?\\d*\\.?\\d+", PERCENTAGE = NUMBER + "%";
-    function call(...args) {
-      return "\\(\\s*(" + args.join(")\\s*,?\\s*(") + ")\\s*\\)";
-    }
-    function callWithSlashSeparator(...args) {
-      return "\\(\\s*(" + args.slice(0, args.length - 1).join(")\\s*,?\\s*(") + ")\\s*/\\s*(" + args[args.length - 1] + ")\\s*\\)";
-    }
-    function commaSeparatedCall(...args) {
-      return "\\(\\s*(" + args.join(")\\s*,\\s*(") + ")\\s*\\)";
+    });
+  }
+});
+
+// ../web/dist/cjs/defaultComponentState.native.js
+var require_defaultComponentState_native = __commonJS({
+  "../web/dist/cjs/defaultComponentState.native.js"(exports2, module2) {
+    "use strict";
+    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
+      for (var name in all)
+        __defProp2(target, name, { get: all[name], enumerable: !0 });
+    }, __copyProps2 = (to, from, except, desc) => {
+      if (from && typeof from == "object" || typeof from == "function")
+        for (let key of __getOwnPropNames2(from))
+          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
+      return to;
+    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), defaultComponentState_exports = {};
+    __export2(defaultComponentState_exports, {
+      defaultComponentState: () => defaultComponentState,
+      defaultComponentStateMounted: () => defaultComponentStateMounted,
+      defaultComponentStateShouldEnter: () => defaultComponentStateShouldEnter
+    });
+    module2.exports = __toCommonJS2(defaultComponentState_exports);
+    var defaultComponentState = {
+      hover: !1,
+      press: !1,
+      pressIn: !1,
+      focus: !1,
+      unmounted: !0
+    }, defaultComponentStateMounted = {
+      ...defaultComponentState,
+      unmounted: !1
+    }, defaultComponentStateShouldEnter = {
+      ...defaultComponentState,
+      unmounted: "should-enter"
+    };
+  }
+});
+
+// ../web/dist/cjs/constants/accessibilityDirectMap.native.js
+var require_accessibilityDirectMap_native = __commonJS({
+  "../web/dist/cjs/constants/accessibilityDirectMap.native.js"(exports2, module2) {
+    "use strict";
+    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
+      for (var name in all)
+        __defProp2(target, name, { get: all[name], enumerable: !0 });
+    }, __copyProps2 = (to, from, except, desc) => {
+      if (from && typeof from == "object" || typeof from == "function")
+        for (let key of __getOwnPropNames2(from))
+          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
+      return to;
+    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), accessibilityDirectMap_native_exports = {};
+    __export2(accessibilityDirectMap_native_exports, {
+      accessibilityDirectMap: () => accessibilityDirectMap,
+      accessibilityWebRoleToNativeRole: () => accessibilityWebRoleToNativeRole,
+      nativeAccessibilityState: () => nativeAccessibilityState,
+      nativeAccessibilityValue: () => nativeAccessibilityValue,
+      webToNativeAccessibilityDirectMap: () => webToNativeAccessibilityDirectMap
+    });
+    module2.exports = __toCommonJS2(accessibilityDirectMap_native_exports);
+    var accessibilityDirectMap = {}, webToNativeAccessibilityDirectMap = {
+      "aria-label": "accessibilityLabel",
+      "aria-labelledby": "accessibilityLabelledBy",
+      "aria-live": "accessibilityLiveRegion",
+      "aria-modal": "accessibilityViewIsModal",
+      "aria-hidden": "accessibilityElementsHidden"
+    }, nativeAccessibilityValue = {
+      "aria-valuemin": "min",
+      "aria-valuemax": "max",
+      "aria-valuenow": "now",
+      "aria-valuetext": "text"
+    }, nativeAccessibilityState = {
+      "aria-disabled": "disabled",
+      "aria-selected": "selected",
+      "aria-checked": "checked",
+      "aria-busy": "busy",
+      "aria-expanded": "expanded"
+    }, accessibilityWebRoleToNativeRole = {
+      alert: "alert",
+      button: "button",
+      checkbox: "checkbox",
+      combobox: "combobox",
+      grid: "grid",
+      group: "none",
+      heading: "header",
+      imagebutton: "imagebutton",
+      img: "image",
+      keyboardkey: "keyboardkey",
+      link: "link",
+      menu: "menu",
+      menubar: "menubar",
+      menuitem: "menuitem",
+      none: "none",
+      presentation: "none",
+      progressbar: "progressbar",
+      radio: "radio",
+      radiogroup: "radiogroup",
+      region: "summary",
+      scrollbar: "scrollbar",
+      searchbox: "search",
+      slider: "adjustable",
+      spinbutton: "spinbutton",
+      summary: "summary",
+      switch: "switch",
+      tab: "tab",
+      tablist: "tablist",
+      text: "text",
+      timer: "timer",
+      togglebutton: "togglebutton",
+      toolbar: "toolbar"
+    };
+  }
+});
+
+// ../web/dist/cjs/constants/isDevTools.native.js
+var require_isDevTools_native = __commonJS({
+  "../web/dist/cjs/constants/isDevTools.native.js"(exports2, module2) {
+    "use strict";
+    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
+      for (var name in all)
+        __defProp2(target, name, { get: all[name], enumerable: !0 });
+    }, __copyProps2 = (to, from, except, desc) => {
+      if (from && typeof from == "object" || typeof from == "function")
+        for (let key of __getOwnPropNames2(from))
+          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
+      return to;
+    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), isDevTools_exports = {};
+    __export2(isDevTools_exports, {
+      isDevTools: () => isDevTools
+    });
+    module2.exports = __toCommonJS2(isDevTools_exports);
+    var isDevTools = (() => {
+      if (process.env.NODE_ENV === "development")
+        try {
+          return new Function("try {return this===window;}catch(e){ return false;}")();
+        } catch {
+        }
+      return !1;
+    })();
+  }
+});
+
+// ../web/dist/cjs/helpers/getGroupPropParts.native.js
+var require_getGroupPropParts_native = __commonJS({
+  "../web/dist/cjs/helpers/getGroupPropParts.native.js"(exports2, module2) {
+    "use strict";
+    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
+      for (var name in all)
+        __defProp2(target, name, { get: all[name], enumerable: !0 });
+    }, __copyProps2 = (to, from, except, desc) => {
+      if (from && typeof from == "object" || typeof from == "function")
+        for (let key of __getOwnPropNames2(from))
+          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
+      return to;
+    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), getGroupPropParts_exports = {};
+    __export2(getGroupPropParts_exports, {
+      getGroupPropParts: () => getGroupPropParts
+    });
+    module2.exports = __toCommonJS2(getGroupPropParts_exports);
+    var import_useMedia = require_useMedia_native();
+    function getGroupPropParts(groupProp) {
+      let mediaQueries = (0, import_useMedia.getMedia)(), [_, name, part3, part4] = groupProp.split("-"), pseudo, media = part3 in mediaQueries ? part3 : void 0;
+      return media ? pseudo = part4 : pseudo = part3, { name, pseudo, media };
     }
-    var cachedMatchers;
-    function getMatchers() {
-      return cachedMatchers === void 0 && (cachedMatchers = {
-        rgb: new RegExp("rgb" + call(NUMBER, NUMBER, NUMBER)),
-        rgba: new RegExp(
-          "rgba(" + commaSeparatedCall(NUMBER, NUMBER, NUMBER, NUMBER) + "|" + callWithSlashSeparator(NUMBER, NUMBER, NUMBER, NUMBER) + ")"
-        ),
-        hsl: new RegExp("hsl" + call(NUMBER, PERCENTAGE, PERCENTAGE)),
-        hsla: new RegExp(
-          "hsla(" + commaSeparatedCall(NUMBER, PERCENTAGE, PERCENTAGE, NUMBER) + "|" + callWithSlashSeparator(NUMBER, PERCENTAGE, PERCENTAGE, NUMBER) + ")"
-        ),
+  }
+});
+
+// ../web/dist/cjs/helpers/createMediaStyle.native.js
+var require_createMediaStyle_native = __commonJS({
+  "../web/dist/cjs/helpers/createMediaStyle.native.js"(exports2, module2) {
+    "use strict";
+    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
+      for (var name in all)
+        __defProp2(target, name, { get: all[name], enumerable: !0 });
+    }, __copyProps2 = (to, from, except, desc) => {
+      if (from && typeof from == "object" || typeof from == "function")
+        for (let key of __getOwnPropNames2(from))
+          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
+      return to;
+    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), createMediaStyle_exports = {};
+    __export2(createMediaStyle_exports, {
+      MEDIA_SEP: () => MEDIA_SEP,
+      createMediaStyle: () => createMediaStyle
+    });
+    module2.exports = __toCommonJS2(createMediaStyle_exports);
+    var import_config = require_config_native(), import_useMedia = require_useMedia_native(), import_getGroupPropParts = require_getGroupPropParts_native(), MEDIA_SEP = "_", prefixes = null, selectors = null, groupPseudoToPseudoCSSMap = {
+      press: "active"
+    }, createMediaStyle = (styleObject, mediaKeyIn, mediaQueries, type, negate, priority) => {
+      let { property, identifier, rules } = styleObject, conf = (0, import_config.getConfig)(), enableMediaPropOrder = conf.settings.mediaPropOrder, isTheme = type === "theme", isPlatform = type === "platform", isGroup = type === "group", isNonWindowMedia = isTheme || isPlatform || isGroup, negKey = negate ? "0" : "", ogPrefix = identifier.slice(0, identifier.indexOf("-") + 1), id = `${ogPrefix}${MEDIA_SEP}${mediaKeyIn.replace("-", "")}${negKey}${MEDIA_SEP}`, styleRule = "", groupMediaKey, containerName, nextIdentifier = identifier.replace(ogPrefix, id), styleInner = rules.map((rule) => rule.replace(identifier, nextIdentifier)).join(";");
+      if (isNonWindowMedia) {
+        let precedenceImportancePrefix = new Array((priority || 0) + (isGroup ? 1 : 0)).fill(":root").join("");
+        if (isTheme || isGroup) {
+          let groupInfo = (0, import_getGroupPropParts.getGroupPropParts)(mediaKeyIn), mediaName = groupInfo == null ? void 0 : groupInfo.name;
+          groupMediaKey = groupInfo == null ? void 0 : groupInfo.media, isGroup && (containerName = mediaName);
+          let name = (isGroup ? "group_" : "") + mediaName, selectorStart = styleInner.indexOf(":root"), selectorEnd = styleInner.lastIndexOf("{"), selector = styleInner.slice(selectorStart, selectorEnd), precedenceSpace = conf.themeClassNameOnRoot && isTheme ? "" : " ", pseudoSelectorName = groupInfo.pseudo ? groupPseudoToPseudoCSSMap[groupInfo.pseudo] || groupInfo.pseudo : void 0, pseudoSelector = pseudoSelectorName ? `:${pseudoSelectorName}` : "", presedencePrefix = `:root${precedenceImportancePrefix}${precedenceSpace}`, mediaSelector = `.t_${name}${pseudoSelector}`, nextSelector = `${presedencePrefix}${mediaSelector} ${selector.replace(
+            ":root",
+            ""
+          )}`;
+          styleRule = styleInner.replace(selector, nextSelector);
+        } else
+          styleRule = `${precedenceImportancePrefix}${styleInner}`;
+      }
+      if (!isNonWindowMedia || groupMediaKey) {
+        if (!selectors) {
+          let mediaKeys = Object.keys(mediaQueries);
+          selectors = Object.fromEntries(
+            mediaKeys.map((key) => [key, (0, import_useMedia.mediaObjectToString)(mediaQueries[key])])
+          ), enableMediaPropOrder || (prefixes = Object.fromEntries(
+            mediaKeys.map((k, index) => [k, new Array(index + 1).fill(":root").join("")])
+          ));
+        }
+        let mediaKey = groupMediaKey || mediaKeyIn, mediaSelector = selectors[mediaKey], mediaQuery = `${negate ? "not all and " : ""}${mediaSelector}`, precedenceImportancePrefix = groupMediaKey ? "" : enableMediaPropOrder ? (
+          // this new array should be cached
+          new Array(priority).fill(":root").join("")
+        ) : (
+          // @ts-ignore
+          prefixes[mediaKey]
+        ), prefix = groupMediaKey ? `@container ${containerName}` : "@media";
+        groupMediaKey && (styleInner = styleRule), styleInner.includes(prefix) ? styleRule = styleInner.replace("{", ` and ${mediaQuery} {`).replace("and screen and", "and") : styleRule = `${prefix} ${mediaQuery}{${precedenceImportancePrefix}${styleInner}}`, groupMediaKey && (styleRule = `@supports (contain: ${conf.settings.webContainerType || "inline-size"}) {${styleRule}}`);
+      }
+      return {
+        property,
+        rules: [styleRule],
+        identifier: nextIdentifier
+      };
+    };
+  }
+});
+
+// ../../node_modules/@react-native/normalize-color/index.js
+var require_normalize_color = __commonJS({
+  "../../node_modules/@react-native/normalize-color/index.js"(exports2, module2) {
+    "use strict";
+    function normalizeColor(color) {
+      if (typeof color == "number")
+        return color >>> 0 === color && color >= 0 && color <= 4294967295 ? color : null;
+      if (typeof color != "string")
+        return null;
+      let matchers = getMatchers(), match;
+      if (match = matchers.hex6.exec(color))
+        return parseInt(match[1] + "ff", 16) >>> 0;
+      let colorFromKeyword = normalizeKeyword(color);
+      return colorFromKeyword ?? ((match = matchers.rgb.exec(color)) ? (parse255(match[1]) << 24 | // r
+      parse255(match[2]) << 16 | // g
+      parse255(match[3]) << 8 | // b
+      255) >>> // a
+      0 : (match = matchers.rgba.exec(color)) ? match[6] !== void 0 ? (parse255(match[6]) << 24 | // r
+      parse255(match[7]) << 16 | // g
+      parse255(match[8]) << 8 | // b
+      parse1(match[9])) >>> // a
+      0 : (parse255(match[2]) << 24 | // r
+      parse255(match[3]) << 16 | // g
+      parse255(match[4]) << 8 | // b
+      parse1(match[5])) >>> // a
+      0 : (match = matchers.hex3.exec(color)) ? parseInt(
+        match[1] + match[1] + // r
+        match[2] + match[2] + // g
+        match[3] + match[3] + // b
+        "ff",
+        // a
+        16
+      ) >>> 0 : (match = matchers.hex8.exec(color)) ? parseInt(match[1], 16) >>> 0 : (match = matchers.hex4.exec(color)) ? parseInt(
+        match[1] + match[1] + // r
+        match[2] + match[2] + // g
+        match[3] + match[3] + // b
+        match[4] + match[4],
+        // a
+        16
+      ) >>> 0 : (match = matchers.hsl.exec(color)) ? (hslToRgb(
+        parse360(match[1]),
+        // h
+        parsePercentage(match[2]),
+        // s
+        parsePercentage(match[3])
+        // l
+      ) | 255) >>> // a
+      0 : (match = matchers.hsla.exec(color)) ? match[6] !== void 0 ? (hslToRgb(
+        parse360(match[6]),
+        // h
+        parsePercentage(match[7]),
+        // s
+        parsePercentage(match[8])
+        // l
+      ) | parse1(match[9])) >>> // a
+      0 : (hslToRgb(
+        parse360(match[2]),
+        // h
+        parsePercentage(match[3]),
+        // s
+        parsePercentage(match[4])
+        // l
+      ) | parse1(match[5])) >>> // a
+      0 : (match = matchers.hwb.exec(color)) ? (hwbToRgb(
+        parse360(match[1]),
+        // h
+        parsePercentage(match[2]),
+        // w
+        parsePercentage(match[3])
+        // b
+      ) | 255) >>> // a
+      0 : null);
+    }
+    function hue2rgb(p, q, t) {
+      return t < 0 && (t += 1), t > 1 && (t -= 1), t < 1 / 6 ? p + (q - p) * 6 * t : t < 1 / 2 ? q : t < 2 / 3 ? p + (q - p) * (2 / 3 - t) * 6 : p;
+    }
+    function hslToRgb(h, s, l) {
+      let q = l < 0.5 ? l * (1 + s) : l + s - l * s, p = 2 * l - q, r = hue2rgb(p, q, h + 1 / 3), g = hue2rgb(p, q, h), b = hue2rgb(p, q, h - 1 / 3);
+      return Math.round(r * 255) << 24 | Math.round(g * 255) << 16 | Math.round(b * 255) << 8;
+    }
+    function hwbToRgb(h, w, b) {
+      if (w + b >= 1) {
+        let gray = Math.round(w * 255 / (w + b));
+        return gray << 24 | gray << 16 | gray << 8;
+      }
+      let red = hue2rgb(0, 1, h + 1 / 3) * (1 - w - b) + w, green = hue2rgb(0, 1, h) * (1 - w - b) + w, blue = hue2rgb(0, 1, h - 1 / 3) * (1 - w - b) + w;
+      return Math.round(red * 255) << 24 | Math.round(green * 255) << 16 | Math.round(blue * 255) << 8;
+    }
+    var NUMBER = "[-+]?\\d*\\.?\\d+", PERCENTAGE = NUMBER + "%";
+    function call(...args) {
+      return "\\(\\s*(" + args.join(")\\s*,?\\s*(") + ")\\s*\\)";
+    }
+    function callWithSlashSeparator(...args) {
+      return "\\(\\s*(" + args.slice(0, args.length - 1).join(")\\s*,?\\s*(") + ")\\s*/\\s*(" + args[args.length - 1] + ")\\s*\\)";
+    }
+    function commaSeparatedCall(...args) {
+      return "\\(\\s*(" + args.join(")\\s*,\\s*(") + ")\\s*\\)";
+    }
+    var cachedMatchers;
+    function getMatchers() {
+      return cachedMatchers === void 0 && (cachedMatchers = {
+        rgb: new RegExp("rgb" + call(NUMBER, NUMBER, NUMBER)),
+        rgba: new RegExp(
+          "rgba(" + commaSeparatedCall(NUMBER, NUMBER, NUMBER, NUMBER) + "|" + callWithSlashSeparator(NUMBER, NUMBER, NUMBER, NUMBER) + ")"
+        ),
+        hsl: new RegExp("hsl" + call(NUMBER, PERCENTAGE, PERCENTAGE)),
+        hsla: new RegExp(
+          "hsla(" + commaSeparatedCall(NUMBER, PERCENTAGE, PERCENTAGE, NUMBER) + "|" + callWithSlashSeparator(NUMBER, PERCENTAGE, PERCENTAGE, NUMBER) + ")"
+        ),
         hwb: new RegExp("hwb" + call(NUMBER, PERCENTAGE, PERCENTAGE)),
         hex3: /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
         hex4: /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
@@ -3290,784 +3732,232 @@ var require_propMapper_native = __commonJS({
       getPropMappedFontFamily: () => getPropMappedFontFamily,
       getTokenForKey: () => getTokenForKey,
       propMapper: () => propMapper
-    });
-    module2.exports = __toCommonJS2(propMapper_exports);
-    var import_constants = require_index_native3(), import_helpers = require_index_native4(), import_config = require_config_native(), import_isDevTools = require_isDevTools_native(), import_createVariable = require_createVariable_native(), import_expandStyle = require_expandStyle_native(), import_expandStylesAndRemoveNullishValues = require_expandStylesAndRemoveNullishValues_native(), import_getVariantExtras = require_getVariantExtras_native(), import_isObj = require_isObj_native(), import_pseudoDescriptors = require_pseudoDescriptors_native(), propMapper = (key, value, styleStateIn, subPropsIn) => {
-      var _a;
-      if (lastFontFamilyToken = null, !import_constants.isAndroid && key === "elevationAndroid")
-        return;
-      if (value === "unset") {
-        let unsetVal = (_a = styleStateIn.conf.unset) == null ? void 0 : _a[key];
-        if (unsetVal != null)
-          value = unsetVal;
-        else
-          return;
-      }
-      let subProps = styleStateIn.styleProps.fallbackProps || subPropsIn, styleState = subProps ? new Proxy(styleStateIn, {
-        get(_, k) {
-          return k === "curProps" ? subProps : Reflect.get(_, k);
-        }
-      }) : styleStateIn, { conf, styleProps, fontFamily, staticConfig } = styleState, { variants } = staticConfig;
-      if (process.env.NODE_ENV === "development" && fontFamily && fontFamily[0] === "$" && !(fontFamily in conf.fontsParsed) && console.warn(
-        `Warning: no fontFamily "${fontFamily}" found in config: ${Object.keys(
-          conf.fontsParsed
-        ).join(", ")}`
-      ), !styleProps.noExpand && variants && key in variants) {
-        styleState.curProps[key] = value;
-        let variantValue = resolveVariants(key, value, styleProps, styleState, "");
-        if (variantValue)
-          return variantValue;
-      }
-      let shouldReturn = !1;
-      if (styleProps.disableExpandShorthands || key in conf.shorthands && (shouldReturn = !0, key = conf.shorthands[key]), value && (value[0] === "$" ? value = getTokenForKey(key, value, styleProps.resolveValues, styleState) : (0, import_createVariable.isVariable)(value) && (value = resolveVariableValue(key, value, styleProps.resolveValues))), shouldReturn || value != null) {
-        let result = (styleProps.noExpand ? null : (0, import_expandStyle.expandStyle)(key, value)) || [
-          [key, value]
-        ];
-        return key === "fontFamily" && lastFontFamilyToken && fontFamilyCache.set(result, lastFontFamilyToken), result;
-      }
-    }, resolveVariants = (key, value, styleProps, styleState, parentVariantKey) => {
-      let { staticConfig, conf, debug } = styleState, { variants } = staticConfig;
-      if (!variants)
-        return;
-      let variantValue = getVariantDefinition(variants[key], value, conf);
-      if (process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupCollapsed(`\u2666\uFE0F\u2666\uFE0F\u2666\uFE0F resolve variant ${key}`), console.info({
-        key,
-        value,
-        variantValue,
-        variants,
-        curProps: { ...styleState.curProps }
-      }), console.groupEnd()), !variantValue) {
-        if (process.env.TAMAGUI_WARN_ON_MISSING_VARIANT === "1" && typeof value != "boolean") {
-          let name = staticConfig.componentName || "[UnnamedComponent]";
-          console.warn(
-            `No variant found: ${name} has variant "${key}", but no matching value "${value}"`
-          );
-        }
-        return;
-      }
-      if (typeof variantValue == "function") {
-        let fn = variantValue, extras = (0, import_getVariantExtras.getVariantExtras)(styleState);
-        variantValue = fn(value, extras), process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupCollapsed("   expanded functional variant", key), console.info({ fn, variantValue, extras }), console.groupEnd());
-      }
-      let fontFamilyResult;
-      if ((0, import_isObj.isObj)(variantValue)) {
-        let fontFamilyUpdate = variantValue.fontFamily || variantValue[conf.inverseShorthands.fontFamily];
-        fontFamilyUpdate && (fontFamilyResult = getFontFamilyFromNameOrVariable(fontFamilyUpdate, conf), styleState.fontFamily = fontFamilyResult, process.env.NODE_ENV === "development" && debug === "verbose" && console.info("   updating font family", fontFamilyResult)), variantValue = resolveTokensAndVariants(
-          key,
-          variantValue,
-          styleProps,
-          styleState,
-          parentVariantKey
-        );
-      }
-      if (variantValue) {
-        let expanded = (0, import_expandStylesAndRemoveNullishValues.expandStylesAndRemoveNullishValues)(
-          variantValue,
-          !!styleProps.noNormalize
-        ), next = Object.entries(expanded);
-        return fontFamilyResult && fontFamilyResult[0] === "$" && fontFamilyCache.set(next, (0, import_createVariable.getVariableValue)(fontFamilyResult)), next;
-      }
-    };
-    function getFontFamilyFromNameOrVariable(input, conf) {
-      if ((0, import_createVariable.isVariable)(input)) {
-        let val = variableToFontNameCache.get(input);
-        if (val)
-          return val;
-        for (let key in conf.fontsParsed) {
-          let familyVariable = conf.fontsParsed[key].family;
-          if ((0, import_createVariable.isVariable)(familyVariable) && (variableToFontNameCache.set(familyVariable, key), familyVariable === input))
-            return key;
-        }
-      } else if (typeof input == "string" && input[0] === "$")
-        return input;
-    }
-    var variableToFontNameCache = /* @__PURE__ */ new WeakMap(), fontFamilyCache = /* @__PURE__ */ new WeakMap(), getPropMappedFontFamily = (expanded) => expanded && fontFamilyCache.get(expanded), resolveTokensAndVariants = (key, value, styleProps, styleState, parentVariantKey) => {
-      var _a;
-      let { conf, staticConfig, debug, theme } = styleState, { variants } = staticConfig, res = {};
-      process.env.NODE_ENV === "development" && debug === "verbose" && console.info("   - resolveTokensAndVariants", key, value);
-      for (let _key in value) {
-        let subKey = conf.shorthands[_key] || _key, val = value[_key];
-        if (styleProps.noExpand)
-          res[subKey] = val;
-        else if (variants && subKey in variants) {
-          if (styleState.curProps[subKey] = val, parentVariantKey && parentVariantKey === key)
-            res[subKey] = // SYNC WITH *1
-            val[0] === "$" ? getTokenForKey(subKey, val, styleProps.resolveValues, styleState) : val;
-          else {
-            let variantOut = resolveVariants(subKey, val, styleProps, styleState, key);
-            if (variantOut)
-              for (let [key2, val2] of variantOut)
-                val2 != null && (key2 in import_pseudoDescriptors.pseudoDescriptors ? (res[key2] ??= {}, Object.assign(res[key2], val2)) : res[key2] = val2);
-          }
-          continue;
-        }
-        if ((0, import_createVariable.isVariable)(val)) {
-          res[subKey] = resolveVariableValue(subKey, val, styleProps.resolveValues);
-          continue;
-        }
-        if (typeof val == "string") {
-          let fVal = (
-            // SYNC WITH *1
-            val[0] === "$" ? getTokenForKey(subKey, val, styleProps.resolveValues, styleState) : val
-          );
-          res[subKey] = fVal;
-          continue;
-        }
-        if ((0, import_isObj.isObj)(val)) {
-          let subObject = resolveTokensAndVariants(subKey, val, styleProps, styleState, key);
-          process.env.NODE_ENV === "development" && debug === "verbose" && console.info("object", subKey, subObject), res[subKey] ??= {}, Object.assign(res[subKey], subObject);
-        } else
-          res[subKey] = val;
-        process.env.NODE_ENV === "development" && debug && ((_a = res[subKey]) == null ? void 0 : _a[0]) === "$" && console.warn(
-          `\u26A0\uFE0F Missing token in theme ${theme.name}:`,
-          subKey,
-          res[subKey],
-          theme
-        );
-      }
-      return res;
-    }, tokenCats = ["size", "color", "radius", "space", "zIndex"].map((name) => ({
-      name,
-      spreadName: `...${name}`
-    }));
-    function getVariantDefinition(variant, value, conf) {
-      if (typeof variant == "function")
-        return variant;
-      let exact = variant[value];
-      if (exact)
-        return exact;
-      if (value != null) {
-        let { tokensParsed } = conf;
-        for (let { name, spreadName } of tokenCats)
-          if (spreadName in variant && value in tokensParsed[name])
-            return variant[spreadName];
-        let fontSizeVariant = variant["...fontSize"];
-        if (fontSizeVariant && conf.fontSizeTokens.has(value))
-          return fontSizeVariant;
-      }
-      return variant[`:${typeof value}`] || variant["..."];
-    }
-    var fontShorthand = {
-      fontSize: "size",
-      fontWeight: "weight"
-    }, lastFontFamilyToken = null, getTokenForKey = (key, value, resolveAs = "none", styleState) => {
-      var _a, _b, _c, _d;
-      if (resolveAs === "none")
-        return value;
-      let { theme, conf = (0, import_config.getConfig)(), context, fontFamily, staticConfig } = styleState, tokensParsed = conf.tokensParsed, valOrVar, hasSet = !1;
-      if (theme && value in theme)
-        valOrVar = theme[value], process.env.NODE_ENV === "development" && styleState.debug === "verbose" && console.info(` - resolving ${key} to theme value ${value}: ${(_a = valOrVar == null ? void 0 : valOrVar.get) == null ? void 0 : _a.call(valOrVar)}`), hasSet = !0;
-      else if (value in conf.specificTokens)
-        hasSet = !0, valOrVar = conf.specificTokens[value];
-      else {
-        let customTokenAccept = (_b = staticConfig == null ? void 0 : staticConfig.acceptTokens) == null ? void 0 : _b[key];
-        if (customTokenAccept) {
-          let val = tokensParsed[customTokenAccept][value];
-          val && (valOrVar = val, hasSet = !0);
-        } else {
-          switch (key) {
-            case "fontFamily": {
-              valOrVar = ((_c = (context != null && context.language ? (0, import_getVariantExtras.getFontsForLanguage)(conf.fontsParsed, context.language) : conf.fontsParsed)[value]) == null ? void 0 : _c.family) || value, lastFontFamilyToken = value, hasSet = !0;
-              break;
-            }
-            case "fontSize":
-            case "lineHeight":
-            case "letterSpacing":
-            case "fontWeight": {
-              let defaultFont = conf.defaultFont || "$body", fam = fontFamily || defaultFont;
-              if (fam) {
-                let fontsParsed = context != null && context.language ? (0, import_getVariantExtras.getFontsForLanguage)(conf.fontsParsed, context.language) : conf.fontsParsed, font = fontsParsed[fam] || fontsParsed[defaultFont];
-                valOrVar = ((_d = font == null ? void 0 : font[fontShorthand[key] || key]) == null ? void 0 : _d[value]) || value, hasSet = !0;
-              }
-              break;
-            }
-          }
-          for (let cat in import_helpers.tokenCategories)
-            if (key in import_helpers.tokenCategories[cat]) {
-              let res = tokensParsed[cat][value];
-              res != null && (valOrVar = res, hasSet = !0);
-            }
-        }
-        if (!hasSet) {
-          let spaceVar = tokensParsed.space[value];
-          spaceVar != null && (valOrVar = spaceVar, hasSet = !0);
-        }
-      }
-      if (hasSet) {
-        let out = resolveVariableValue(key, valOrVar, resolveAs);
-        return process.env.NODE_ENV === "development" && styleState.debug === "verbose" && console.info("resolved", resolveAs, valOrVar, out), out;
-      }
-      return process.env.NODE_ENV === "development" && import_isDevTools.isDevTools && styleState.debug === "verbose" && (console.groupCollapsed("  \uFE52 propMap (val)", key, value), console.info({ valOrVar, theme, hasSet }, theme ? theme[key] : ""), console.groupEnd()), value;
-    };
-    function resolveVariableValue(key, valOrVar, resolveValues) {
-      if (resolveValues === "none")
-        return valOrVar;
-      if ((0, import_createVariable.isVariable)(valOrVar)) {
-        if (resolveValues === "value")
-          return valOrVar.val;
-        let get = valOrVar == null ? void 0 : valOrVar.get;
-        return key !== "shadowColor" && typeof get == "function" ? get(resolveValues === "web" ? "web" : void 0) : valOrVar.val;
-      }
-      return valOrVar;
-    }
-  }
-});
-
-// ../web/dist/cjs/helpers/getSplitStyles.native.js
-var require_getSplitStyles_native = __commonJS({
-  "../web/dist/cjs/helpers/getSplitStyles.native.js"(exports2, module2) {
-    "use strict";
-    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
-      for (var name in all)
-        __defProp2(target, name, { get: all[name], enumerable: !0 });
-    }, __copyProps2 = (to, from, except, desc) => {
-      if (from && typeof from == "object" || typeof from == "function")
-        for (let key of __getOwnPropNames2(from))
-          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
-      return to;
-    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), getSplitStyles_exports = {};
-    __export2(getSplitStyles_exports, {
-      PROP_SPLIT: () => PROP_SPLIT,
-      getSplitStyles: () => getSplitStyles,
-      getSubStyle: () => getSubStyle,
-      useSplitStyles: () => useSplitStyles
-    });
-    module2.exports = __toCommonJS2(getSplitStyles_exports);
-    var import_constants = require_index_native3(), import_helpers = require_index_native4(), import_react3 = require("react"), import_config = require_config_native(), import_accessibilityDirectMap = require_accessibilityDirectMap_native(), import_constants2 = require_constants_native2(), import_isDevTools = require_isDevTools_native(), import_useMedia = require_useMedia_native(), import_createMediaStyle = require_createMediaStyle_native(), import_expandStyles = require_expandStyles_native(), import_getGroupPropParts = require_getGroupPropParts_native(), import_getStylesAtomic = require_getStylesAtomic_native(), import_insertStyleRule = require_insertStyleRule_native(), import_log = require_log_native(), import_normalizeValueWithProperty = require_normalizeValueWithProperty_native(), import_propMapper = require_propMapper_native(), import_pseudoDescriptors = require_pseudoDescriptors_native(), IS_STATIC = process.env.IS_STATIC === "is_static", conf, PROP_SPLIT = "-";
-    function isValidStyleKey(key, staticConfig) {
-      let validStyleProps = staticConfig.validStyles ?? (staticConfig.isText ? import_helpers.stylePropsText : import_helpers.validStyles);
-      return key in validStyleProps || staticConfig.acceptTokens && key in staticConfig.acceptTokens;
-    }
-    var getSplitStyles = (props, staticConfig, theme, themeName, componentState, styleProps, parentSplitStyles, context, elementType, debug) => {
-      var _a, _b, _c, _e, _f, _g;
-      conf = conf || (0, import_config.getConfig)(), import_constants.isWeb && styleProps.isAnimated && conf.animations.isReactNative && !styleProps.noNormalize && (styleProps.noNormalize = "values");
-      let { shorthands } = conf, {
-        isHOC,
-        isText,
-        variants,
-        isReactNative,
-        inlineProps,
-        inlineWhenUnflattened,
-        parentStaticConfig,
-        acceptsClassName
-      } = staticConfig, viewProps = {}, mediaState2 = styleProps.mediaState || import_useMedia.mediaState, usedKeys = {}, shouldDoClasses = acceptsClassName && import_constants.isWeb && !styleProps.noClassNames, rulesToInsert = [], classNames = {}, transforms = {}, pseudos = null, space = props.space, hasMedia = !1, dynamicThemeAccess, pseudoGroups, mediaGroups, style = {}, className = props.className ?? "", mediaStylesSeen = 0, styleState = {
-        curProps: { ...props },
-        classNames,
-        conf,
-        props,
-        styleProps,
-        componentState,
-        staticConfig,
-        style,
-        theme,
-        usedKeys,
-        viewProps,
-        context,
-        debug
-      };
-      process.env.NODE_ENV === "development" && debug && debug !== "profile" && import_constants.isClient && (console.groupCollapsed("getSplitStyles (collapsed)"), (0, import_log.log)({
-        props,
-        staticConfig,
-        shouldDoClasses,
-        styleProps,
-        componentState,
-        styleState,
-        theme: { ...theme }
-      }), console.groupEnd());
-      for (let keyOg in props) {
-        let keyInit = keyOg, valInit = props[keyOg];
-        if (styleProps.disableExpandShorthands || keyInit in shorthands && (keyInit = shorthands[keyInit]), keyInit === "className" || keyInit in usedKeys || keyInit in skipProps && !styleProps.noSkip && !isHOC)
-          continue;
-        let valInitType = typeof valInit, isValidStyleKeyInit = isValidStyleKey(keyInit, staticConfig);
-        if (styleState.curProps[keyInit] = valInit, !import_constants.isAndroid && keyInit === "elevationAndroid")
-          continue;
-        if (keyInit === "userSelect")
-          keyInit = "selectable", valInit = valInit !== "none";
-        else if (keyInit === "role") {
-          viewProps.accessibilityRole = import_accessibilityDirectMap.accessibilityWebRoleToNativeRole[valInit];
-          continue;
-        } else if (keyInit.startsWith("aria-")) {
-          if (import_accessibilityDirectMap.webToNativeAccessibilityDirectMap[keyInit]) {
-            let nativeA11yProp = import_accessibilityDirectMap.webToNativeAccessibilityDirectMap[keyInit];
-            keyInit === "aria-hidden" && (viewProps["aria-hidden"] = valInit), viewProps[nativeA11yProp] = valInit;
-            continue;
-          }
-          if (import_accessibilityDirectMap.nativeAccessibilityValue[keyInit]) {
-            let field = import_accessibilityDirectMap.nativeAccessibilityValue[keyInit];
-            viewProps.accessibilityValue ? viewProps.accessibilityValue[field] = valInit : viewProps.accessibilityValue = {
-              [field]: valInit
-            };
-          } else if (import_accessibilityDirectMap.nativeAccessibilityState[keyInit]) {
-            let field = import_accessibilityDirectMap.nativeAccessibilityState[keyInit];
-            viewProps.accessibilityState ? viewProps.accessibilityState[field] = valInit : viewProps.accessibilityState = {
-              [field]: valInit
-            };
-          }
-          continue;
-        } else if (keyInit.startsWith("data-"))
-          continue;
-        if (keyInit === "dataSet") {
-          for (let keyInit2 in valInit)
-            viewProps[`data-${hyphenate(keyInit2)}`] = valInit[keyInit2];
-          continue;
-        }
-        if (keyInit[0] === "_" && keyInit.startsWith("_style")) {
-          mergeStylePropIntoStyle(styleState, valInit);
-          continue;
-        }
-        if (0)
-          switch (keyInit) {
-            case "accessibilityRole":
-            case "accessibilityLabelledBy":
-            case "accessibilityFlowTo":
-            case "accessibilityControls":
-            case "accessibilityDescribedBy":
-            case "accessibilityKeyShortcuts":
-            case "accessibilityLiveRegion":
-            case "accessibilityReadOnly":
-            case "accessibilityRequired":
-            default:
-          }
-        let isShorthand = keyInit in shorthands, isVariant = !isValidStyleKeyInit && variants && keyInit in variants, isStyleLikeKey = isShorthand || isValidStyleKeyInit || isVariant, isPseudo = keyInit in import_helpers.validPseudoKeys, isMedia = !isStyleLikeKey && !isPseudo && (0, import_useMedia.isMediaKey)(keyInit), isMediaOrPseudo = !!(isMedia || isPseudo), isStyleProp = isMediaOrPseudo || isVariant && !styleProps.noExpand || isValidStyleKeyInit || isShorthand;
-        if (isStyleProp && (props.asChild === "except-style" || props.asChild === "except-style-web"))
-          continue;
-        let shouldPassProp = !isStyleProp || // is in parent variants
-        isHOC && (parentStaticConfig == null ? void 0 : parentStaticConfig.variants) && keyInit in parentStaticConfig.variants || (inlineProps == null ? void 0 : inlineProps.has(keyInit)), parentVariant = (_a = parentStaticConfig == null ? void 0 : parentStaticConfig.variants) == null ? void 0 : _a[keyInit], isHOCShouldPassThrough = !!(isHOC && (isShorthand || isValidStyleKeyInit || isMediaOrPseudo || parentVariant || keyInit in skipProps)), shouldPassThrough = shouldPassProp || isHOCShouldPassThrough;
-        if (process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupCollapsed(
-          `\u{1F539}\u{1F539}\u{1F539}\u{1F539} ${keyOg}${keyInit !== keyOg ? ` (shorthand for ${keyInit})` : ""} ${shouldPassThrough ? "(pass)" : ""} \u{1F539}\u{1F539}\u{1F539}\u{1F539}`
-        ), (0, import_log.log)({ isVariant, valInit, shouldPassProp }), import_constants.isClient && (0, import_log.log)({
-          variants,
-          variant: variants == null ? void 0 : variants[keyInit],
-          isVariant,
-          isHOCShouldPassThrough,
-          curProps: { ...styleState.curProps },
-          parentStaticConfig
-        }), console.groupEnd()), shouldPassThrough && (passDownProp(viewProps, keyInit, valInit, isMediaOrPseudo), !isVariant) || !styleProps.noSkip && keyInit in skipProps)
-          continue;
-        if (isText && valInit && (keyInit === "fontFamily" || keyInit === shorthands.fontFamily) && valInit in conf.fontsParsed && (styleState.fontFamily = valInit), isValidStyleKeyInit && !variants && valInit !== "unset" && (valInitType === "number" || valInitType === "string" && valInit[0] !== "$")) {
-          style[keyInit] = valInit;
-          continue;
-        }
-        let expanded = isMediaOrPseudo || !isVariant && !isValidStyleKeyInit ? [[keyInit, valInit]] : (0, import_propMapper.propMapper)(keyInit, valInit, styleState), next = (0, import_propMapper.getPropMappedFontFamily)(expanded);
-        if (next && (styleState.fontFamily = next), process.env.NODE_ENV === "development" && debug === "verbose") {
-          console.groupCollapsed("  \u{1F4A0} expanded", keyInit, valInit);
-          try {
-            !import_constants.isServer && import_isDevTools.isDevTools && ((0, import_log.log)({
-              expanded,
-              styleProps,
-              componentState,
-              isVariant,
-              variant: variants == null ? void 0 : variants[keyInit],
-              shouldPassProp,
-              isHOCShouldPassThrough,
-              theme,
-              usedKeys: { ...usedKeys },
-              curProps: { ...styleState.curProps }
-            }), (0, import_log.log)("expanded", expanded, `
-usedKeys`, { ...usedKeys }, `
-current`, {
-              ...style
-            }));
-          } catch {
-          }
-          console.groupEnd();
-        }
-        if (expanded) {
-          for (let [key, val] of expanded)
-            if (!(val == null || key in usedKeys)) {
-              if (isPseudo = key in import_helpers.validPseudoKeys, isMedia = !isPseudo && !isValidStyleKeyInit && (0, import_useMedia.isMediaKey)(key), isMediaOrPseudo = !!(isMedia || isPseudo), isVariant = variants && key in variants, (inlineProps != null && inlineProps.has(key) || IS_STATIC && inlineWhenUnflattened != null && inlineWhenUnflattened.has(key)) && (viewProps[key] = props[key] ?? val), styleProps.noExpand && isPseudo || isHOC && (isMediaOrPseudo || ((_b = parentStaticConfig == null ? void 0 : parentStaticConfig.variants) == null ? void 0 : _b[keyInit]))) {
-                passDownProp(viewProps, key, val, isMediaOrPseudo), process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupCollapsed(` - passing down prop ${key}`), (0, import_log.log)({ val, after: { ...viewProps[key] } }), console.groupEnd());
-                continue;
-              }
-              if (isPseudo) {
-                if (!val)
-                  continue;
-                let pseudoStyleObject = getSubStyle(
-                  styleState,
-                  key,
-                  val,
-                  styleProps.noClassNames
-                ), descriptor = import_pseudoDescriptors.pseudoDescriptors[key], isEnter = key === "enterStyle", isExit = key === "exitStyle";
-                if (!descriptor || isExit && !styleProps.isExiting)
-                  continue;
-                if ((!shouldDoClasses || IS_STATIC) && (pseudos ||= {}, pseudos[key] ||= {}, IS_STATIC)) {
-                  Object.assign(pseudos[key], pseudoStyleObject);
-                  continue;
-                }
-                if (shouldDoClasses && !isExit) {
-                  let pseudoStyles = (0, import_getStylesAtomic.generateAtomicStyles)(pseudoStyleObject, descriptor);
-                  process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupCollapsed("pseudo (classes)", key), (0, import_log.log)({ pseudoStyleObject, pseudoStyles }), console.groupEnd());
-                  for (let psuedoStyle of pseudoStyles)
-                    `${psuedoStyle.property}${PROP_SPLIT}${descriptor.name}` in usedKeys || psuedoStyle.identifier;
-                }
-                if (!shouldDoClasses || isExit || isEnter) {
-                  let descriptorKey = descriptor.stateKey || descriptor.name, isDisabled = componentState[descriptorKey] === !1;
-                  isExit && (isDisabled = !styleProps.isExiting), isEnter && (isDisabled = componentState.unmounted === "should-enter" ? !0 : !componentState.unmounted), process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupCollapsed("pseudo", key, { isDisabled }), (0, import_log.log)({ pseudoStyleObject, isDisabled, descriptor, componentState }), console.groupEnd());
-                  let importance = descriptor.priority;
-                  for (let pkey in pseudoStyleObject) {
-                    let val2 = pseudoStyleObject[pkey];
-                    if (isDisabled) {
-                      if (pkey in animatableDefaults && !(pkey in usedKeys)) {
-                        let defaultVal = animatableDefaults[pkey];
-                        mergeStyle(styleState, pkey, defaultVal);
-                      }
-                    } else {
-                      let curImportance = usedKeys[pkey] || 0, shouldMerge = importance >= curImportance;
-                      shouldMerge && (pseudos ||= {}, pseudos[key] ||= {}, pseudos[key][pkey] = val2, mergeStyle(styleState, pkey, val2)), process.env.NODE_ENV === "development" && debug === "verbose" && (0, import_log.log)("    subKey", pkey, shouldMerge, {
-                        importance,
-                        curImportance,
-                        pkey,
-                        val: val2,
-                        transforms: { ...styleState.transforms }
-                      });
-                    }
-                  }
-                  if (!isDisabled)
-                    for (let key2 in val) {
-                      let k = shorthands[key2] || key2;
-                      usedKeys[k] = Math.max(importance, usedKeys[k] || 0);
-                    }
-                }
-                continue;
-              }
-              if (isMedia) {
-                if (!val)
-                  continue;
-                if (isMedia === "platform") {
-                  let platform = key.slice(10);
-                  if (
-                    // supports web, ios, android
-                    platform !== import_constants.currentPlatform && // supports web, native
-                    platform !== "native"
-                  )
-                    continue;
-                }
-                hasMedia ||= !0;
-                let mediaStyle = getSubStyle(
-                  styleState,
-                  key,
-                  val,
-                  // TODO try true like pseudo
-                  !1
-                ), mediaKeyShort = key.slice(1);
-                process.env.NODE_ENV === "development" && debug === "verbose" && (0, import_log.log)(`  \u{1F4FA} ${key}`, {
-                  key,
-                  val,
-                  mediaStyle,
-                  props,
-                  shouldDoClasses,
-                  componentState
-                });
-                let hasSpace = val.space;
-                if ((hasSpace || !shouldDoClasses) && (Array.isArray(hasMedia) || (hasMedia = []), hasMedia.push(mediaKeyShort)), shouldDoClasses) {
-                  if (hasSpace && (delete mediaStyle.space, mediaState2[mediaKeyShort])) {
-                    let importance = (0, import_useMedia.getMediaImportanceIfMoreImportant)(
-                      mediaKeyShort,
-                      "space",
-                      usedKeys,
-                      !0
-                    );
-                    importance && (space = val.space, usedKeys.space = importance, process.env.NODE_ENV === "development" && debug === "verbose" && (0, import_log.log)(
-                      `Found more important space for current media ${mediaKeyShort}: ${val} (importance: ${importance})`
-                    ));
-                  }
-                  let mediaStyles = (0, import_getStylesAtomic.getStylesAtomic)(mediaStyle, debug), priority = mediaStylesSeen;
-                  mediaStylesSeen += 1;
-                  for (let style2 of mediaStyles) {
-                    let out = (0, import_createMediaStyle.createMediaStyle)(
-                      style2,
-                      mediaKeyShort,
-                      import_useMedia.mediaQueryConfig,
-                      isMedia,
-                      !1,
-                      priority
-                    );
-                    process.env.NODE_ENV === "development" && debug === "verbose" && (0, import_log.log)("\u{1F4FA} media style:", out), `${style2.property}${PROP_SPLIT}${mediaKeyShort}` in usedKeys || out.identifier;
-                  }
-                } else {
-                  let isThemeMedia = isMedia === "theme", isGroupMedia = isMedia === "group";
-                  if (!isThemeMedia && isMedia !== "platform" && !isGroupMedia && !mediaState2[mediaKeyShort])
-                    continue;
-                  let importanceBump = 0;
-                  if (isThemeMedia) {
-                    dynamicThemeAccess = !0;
-                    let mediaThemeName = mediaKeyShort.slice(6);
-                    if (!(themeName === mediaThemeName || themeName.startsWith(mediaThemeName)))
-                      continue;
-                  } else if (isGroupMedia) {
-                    let groupInfo = (0, import_getGroupPropParts.getGroupPropParts)(mediaKeyShort), groupName = groupInfo.name, groupContext = context == null ? void 0 : context.groups.state[groupName];
-                    if (!groupContext) {
-                      process.env.NODE_ENV === "development" && debug && console.warn(`No parent with group prop, skipping styles: ${groupName}`);
-                      continue;
-                    }
-                    let groupPseudoKey = groupInfo.pseudo, groupMediaKey = groupInfo.media, componentGroupState = (_c = componentState.group) == null ? void 0 : _c[groupName];
-                    if (groupMediaKey) {
-                      mediaGroups ||= /* @__PURE__ */ new Set(), mediaGroups.add(groupMediaKey);
-                      let mediaState22 = componentGroupState == null ? void 0 : componentGroupState.media, isActive = mediaState22 == null ? void 0 : mediaState22[groupMediaKey];
-                      if (!mediaState22 && groupContext.layout && (isActive = (0, import_useMedia.mediaKeyMatch)(groupMediaKey, groupContext.layout)), !isActive)
-                        continue;
-                      importanceBump = 2;
-                    }
-                    if (groupPseudoKey) {
-                      pseudoGroups ||= /* @__PURE__ */ new Set(), pseudoGroups.add(groupName);
-                      let componentGroupPseudoState = (componentGroupState || // fallback to context initially
-                      context.groups.state[groupName]).pseudo;
-                      if (!(componentGroupPseudoState != null && componentGroupPseudoState[groupPseudoKey]))
-                        continue;
-                      importanceBump = import_pseudoDescriptors.pseudoPriorities[groupPseudoKey];
-                    }
-                  }
-                  for (let subKey in mediaStyle) {
-                    if (subKey === "space") {
-                      space = valInit.space;
-                      continue;
-                    }
-                    (0, import_useMedia.mergeMediaByImportance)(
-                      style,
-                      mediaKeyShort,
-                      subKey,
-                      mediaStyle[subKey],
-                      usedKeys,
-                      mediaState2[mediaKeyShort],
-                      importanceBump
-                    ), key === "fontFamily" && (styleState.fontFamily = mediaStyle.fontFamily);
-                  }
-                }
-                continue;
-              }
-              if (key === "pointerEvents") {
-                viewProps[key] = val;
-                continue;
-              }
-              if (
-                // is HOC we can just pass through the styles as props
-                // this fixes issues where style prop got merged with wrong priority
-                !isHOC && (isValidStyleKey(key, staticConfig) || import_constants.isAndroid && key === "elevation")
-              ) {
-                mergeStyle(styleState, key, val);
-                continue;
-              }
-              isVariant || (viewProps[key] = val);
-            }
-          if (process.env.NODE_ENV === "development" && debug === "verbose") {
-            console.groupCollapsed(" \u2714\uFE0F expand complete", keyInit);
-            try {
-              (0, import_log.log)("style", { ...style }), (0, import_log.log)("transforms", { ...transforms }), (0, import_log.log)("viewProps", { ...viewProps });
-            } catch {
-            }
-            console.groupEnd();
-          }
-        }
+    });
+    module2.exports = __toCommonJS2(propMapper_exports);
+    var import_constants = require_index_native3(), import_helpers = require_index_native4(), import_config = require_config_native(), import_isDevTools = require_isDevTools_native(), import_createVariable = require_createVariable_native(), import_expandStyle = require_expandStyle_native(), import_expandStylesAndRemoveNullishValues = require_expandStylesAndRemoveNullishValues_native(), import_getVariantExtras = require_getVariantExtras_native(), import_isObj = require_isObj_native(), import_pseudoDescriptors = require_pseudoDescriptors_native(), propMapper = (key, value, styleStateIn, subPropsIn) => {
+      var _a;
+      if (lastFontFamilyToken = null, !import_constants.isAndroid && key === "elevationAndroid")
+        return;
+      if (value === "unset") {
+        let unsetVal = (_a = styleStateIn.conf.unset) == null ? void 0 : _a[key];
+        if (unsetVal != null)
+          value = unsetVal;
+        else
+          return;
       }
-      if (props.style && mergeStylePropIntoStyle(styleState, props.style), styleProps.noNormalize !== !1 && ((0, import_expandStyles.fixStyles)(style), import_constants.isWeb && !staticConfig.isReactNative && (0, import_getStylesAtomic.styleToCSS)(style), styleState.transforms && Object.entries(styleState.transforms).sort(([a], [b]) => a.localeCompare(b)).forEach(([key, val]) => {
-        mergeTransform(style, key, val, !0);
-      }), parentSplitStyles && !shouldDoClasses))
-        for (let key in parentSplitStyles.style)
-          key in classNames || key in style || (style[key] = parentSplitStyles.style[key]);
-      let result = {
-        space,
-        hasMedia,
-        fontFamily: styleState.fontFamily,
-        viewProps,
-        // @ts-expect-error
-        style,
-        pseudos,
-        classNames,
-        rulesToInsert,
-        dynamicThemeAccess,
-        pseudoGroups,
-        mediaGroups
-      };
-      if (style.fontFamily) {
-        let faceInfo = (_e = (0, import_config.getFont)(style.fontFamily)) == null ? void 0 : _e.face;
-        if (faceInfo) {
-          let overrideFace = (_g = (_f = faceInfo[style.fontWeight]) == null ? void 0 : _f[style.fontStyle || "normal"]) == null ? void 0 : _g.val;
-          overrideFace && (style.fontFamily = overrideFace, styleState.fontFamily = overrideFace, delete style.fontWeight, delete style.fontStyle);
+      let subProps = styleStateIn.styleProps.fallbackProps || subPropsIn, styleState = subProps ? new Proxy(styleStateIn, {
+        get(_, k) {
+          return k === "curProps" ? subProps : Reflect.get(_, k);
         }
-        process.env.NODE_ENV === "development" && debug && debug !== "profile" && (0, import_log.log)(`Found fontFamily native: ${style.fontFamily}`, faceInfo);
+      }) : styleStateIn, { conf, styleProps, fontFamily, staticConfig } = styleState, { variants } = staticConfig;
+      if (process.env.NODE_ENV === "development" && fontFamily && fontFamily[0] === "$" && !(fontFamily in conf.fontsParsed) && console.warn(
+        `Warning: no fontFamily "${fontFamily}" found in config: ${Object.keys(
+          conf.fontsParsed
+        ).join(", ")}`
+      ), !styleProps.noExpand && variants && key in variants) {
+        styleState.curProps[key] = value;
+        let variantValue = resolveVariants(key, value, styleProps, styleState, "");
+        if (variantValue)
+          return variantValue;
       }
-      if (className && (classNames.className = className), process.env.NODE_ENV === "development" && debug === "verbose" && import_isDevTools.isDevTools) {
-        console.groupCollapsed("  \u{1F539} ===>");
-        try {
-          let logs = {
-            ...result,
-            className,
-            componentState,
-            transforms,
-            viewProps,
-            viewPropsOrder: Object.keys(viewProps),
-            rulesToInsert,
-            parentSplitStyles
-          };
-          for (let key in logs)
-            (0, import_log.log)(key, logs[key]);
-        } catch {
+      let shouldReturn = !1;
+      if (styleProps.disableExpandShorthands || key in conf.shorthands && (shouldReturn = !0, key = conf.shorthands[key]), value && (value[0] === "$" ? value = getTokenForKey(key, value, styleProps.resolveValues, styleState) : (0, import_createVariable.isVariable)(value) && (value = resolveVariableValue(key, value, styleProps.resolveValues))), shouldReturn || value != null) {
+        let result = (styleProps.noExpand ? null : (0, import_expandStyle.expandStyle)(key, value)) || [
+          [key, value]
+        ];
+        return key === "fontFamily" && lastFontFamilyToken && fontFamilyCache.set(result, lastFontFamilyToken), result;
+      }
+    }, resolveVariants = (key, value, styleProps, styleState, parentVariantKey) => {
+      let { staticConfig, conf, debug } = styleState, { variants } = staticConfig;
+      if (!variants)
+        return;
+      let variantValue = getVariantDefinition(variants[key], value, conf);
+      if (process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupCollapsed(`\u2666\uFE0F\u2666\uFE0F\u2666\uFE0F resolve variant ${key}`), console.info({
+        key,
+        value,
+        variantValue,
+        variants,
+        curProps: { ...styleState.curProps }
+      }), console.groupEnd()), !variantValue) {
+        if (process.env.TAMAGUI_WARN_ON_MISSING_VARIANT === "1" && typeof value != "boolean") {
+          let name = staticConfig.componentName || "[UnnamedComponent]";
+          console.warn(
+            `No variant found: ${name} has variant "${key}", but no matching value "${value}"`
+          );
         }
-        console.groupEnd();
+        return;
       }
-      return result;
-    };
-    function mergeStyle(styleState, key, val, disableNormalize = !1) {
-      let { classNames, viewProps, style, usedKeys, styleProps } = styleState;
-      if (import_constants.isWeb && (val == null ? void 0 : val[0]) === "_")
-        classNames[key] = val, usedKeys[key] ||= 1;
-      else if (key in import_helpers.stylePropsTransform)
-        styleState.transforms ||= {}, styleState.transforms[key] = val;
-      else {
-        let out = import_constants.isWeb && !disableNormalize && !styleProps.noNormalize ? (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(val, key) : val;
-        key in import_helpers.validStylesOnBaseProps ? viewProps[key] = out : style[key] = out;
+      if (typeof variantValue == "function") {
+        let fn = variantValue, extras = (0, import_getVariantExtras.getVariantExtras)(styleState);
+        variantValue = fn(value, extras), process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupCollapsed("   expanded functional variant", key), console.info({ fn, variantValue, extras }), console.groupEnd());
       }
-    }
-    var getSubStyle = (styleState, subKey, styleIn, avoidMergeTransform) => {
-      let { staticConfig, props, conf: conf2, styleProps } = styleState, styleOut = {};
-      for (let key in styleIn) {
-        let val = styleIn[key];
-        key = conf2.shorthands[key] || key;
-        let expanded = (0, import_propMapper.propMapper)(key, val, styleState, { ...props, ...props[subKey] });
-        if (!(!expanded || !staticConfig.isHOC && key in skipProps && !styleProps.noSkip))
-          for (let [skey, sval] of expanded)
-            !avoidMergeTransform && skey in import_helpers.stylePropsTransform ? mergeTransform(styleOut, skey, sval) : styleOut[skey] = styleProps.noNormalize ? sval : (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(sval, key);
+      let fontFamilyResult;
+      if ((0, import_isObj.isObj)(variantValue)) {
+        let fontFamilyUpdate = variantValue.fontFamily || variantValue[conf.inverseShorthands.fontFamily];
+        fontFamilyUpdate && (fontFamilyResult = getFontFamilyFromNameOrVariable(fontFamilyUpdate, conf), styleState.fontFamily = fontFamilyResult, process.env.NODE_ENV === "development" && debug === "verbose" && console.info("   updating font family", fontFamilyResult)), variantValue = resolveTokensAndVariants(
+          key,
+          variantValue,
+          styleProps,
+          styleState,
+          parentVariantKey
+        );
       }
-      return styleProps.noNormalize || (0, import_expandStyles.fixStyles)(styleOut), styleOut;
-    };
-    function mergeStylePropIntoStyle(styleState, cur) {
-      if (!cur)
-        return;
-      let styles = Array.isArray(cur) ? cur : [cur];
-      for (let style of styles) {
-        if (!style)
-          continue;
-        let isRNW = style.$$css;
-        Object.assign(isRNW ? styleState.classNames : styleState.style, style);
+      if (variantValue) {
+        let expanded = (0, import_expandStylesAndRemoveNullishValues.expandStylesAndRemoveNullishValues)(
+          variantValue,
+          !!styleProps.noNormalize
+        ), next = Object.entries(expanded);
+        return fontFamilyResult && fontFamilyResult[0] === "$" && fontFamilyCache.set(next, (0, import_createVariable.getVariableValue)(fontFamilyResult)), next;
       }
-    }
-    var useInsertEffectCompat = import_constants.isWeb ? import_react3.useInsertionEffect || import_constants.useIsomorphicLayoutEffect : () => {
-    }, useSplitStyles = (...args) => {
-      let res = getSplitStyles(...args);
-      return useInsertEffectCompat(() => {
-        (0, import_insertStyleRule.insertStyleRules)(res.rulesToInsert);
-      }, [res.rulesToInsert]), res;
-    }, animatableDefaults = {
-      opacity: 1,
-      scale: 1,
-      rotate: "0deg",
-      rotateY: "0deg",
-      rotateX: "0deg",
-      x: 0,
-      y: 0
-    }, lowercaseHyphenate = (match) => `-${match.toLowerCase()}`, hyphenate = (str) => str.replace(/[A-Z]/g, lowercaseHyphenate), mergeTransform = (obj, key, val, backwards = !1) => {
-      typeof obj.transform != "string" && (obj.transform ||= [], obj.transform[backwards ? "unshift" : "push"]({
-        [mapTransformKeys[key] || key]: val
-      }));
-    }, mapTransformKeys = {
-      x: "translateX",
-      y: "translateY"
-    }, skipProps = {
-      untilMeasured: 1,
-      animation: 1,
-      space: 1,
-      animateOnly: 1,
-      disableClassName: 1,
-      debug: 1,
-      componentName: 1,
-      disableOptimization: 1,
-      tag: 1,
-      style: 1,
-      // handled after loop so pseudos set usedKeys and override it if necessary
-      group: 1
     };
-    process.env.NODE_ENV === "test" && (skipProps["data-test-renders"] = 1);
-    Object.assign(skipProps, {
-      whiteSpace: 1,
-      wordWrap: 1,
-      textOverflow: 1,
-      textDecorationDistance: 1,
-      cursor: 1,
-      contain: 1,
-      boxSizing: 1,
-      boxShadow: 1,
-      outlineStyle: 1,
-      outlineOffset: 1,
-      outlineWidth: 1,
-      outlineColor: 1
-    });
-    function passDownProp(viewProps, key, val, shouldMergeObject = !1) {
-      if (shouldMergeObject) {
-        let next = {
-          ...viewProps[key],
-          ...val
-        };
-        delete viewProps[key], viewProps[key] = next;
-      } else
-        viewProps[key] = val;
+    function getFontFamilyFromNameOrVariable(input, conf) {
+      if ((0, import_createVariable.isVariable)(input)) {
+        let val = variableToFontNameCache.get(input);
+        if (val)
+          return val;
+        for (let key in conf.fontsParsed) {
+          let familyVariable = conf.fontsParsed[key].family;
+          if ((0, import_createVariable.isVariable)(familyVariable) && (variableToFontNameCache.set(familyVariable, key), familyVariable === input))
+            return key;
+        }
+      } else if (typeof input == "string" && input[0] === "$")
+        return input;
+    }
+    var variableToFontNameCache = /* @__PURE__ */ new WeakMap(), fontFamilyCache = /* @__PURE__ */ new WeakMap(), getPropMappedFontFamily = (expanded) => expanded && fontFamilyCache.get(expanded), resolveTokensAndVariants = (key, value, styleProps, styleState, parentVariantKey) => {
+      var _a;
+      let { conf, staticConfig, debug, theme } = styleState, { variants } = staticConfig, res = {};
+      process.env.NODE_ENV === "development" && debug === "verbose" && console.info("   - resolveTokensAndVariants", key, value);
+      for (let _key in value) {
+        let subKey = conf.shorthands[_key] || _key, val = value[_key];
+        if (styleProps.noExpand)
+          res[subKey] = val;
+        else if (variants && subKey in variants) {
+          if (styleState.curProps[subKey] = val, parentVariantKey && parentVariantKey === key)
+            res[subKey] = // SYNC WITH *1
+            val[0] === "$" ? getTokenForKey(subKey, val, styleProps.resolveValues, styleState) : val;
+          else {
+            let variantOut = resolveVariants(subKey, val, styleProps, styleState, key);
+            if (variantOut)
+              for (let [key2, val2] of variantOut)
+                val2 != null && (key2 in import_pseudoDescriptors.pseudoDescriptors ? (res[key2] ??= {}, Object.assign(res[key2], val2)) : res[key2] = val2);
+          }
+          continue;
+        }
+        if ((0, import_createVariable.isVariable)(val)) {
+          res[subKey] = resolveVariableValue(subKey, val, styleProps.resolveValues);
+          continue;
+        }
+        if (typeof val == "string") {
+          let fVal = (
+            // SYNC WITH *1
+            val[0] === "$" ? getTokenForKey(subKey, val, styleProps.resolveValues, styleState) : val
+          );
+          res[subKey] = fVal;
+          continue;
+        }
+        if ((0, import_isObj.isObj)(val)) {
+          let subObject = resolveTokensAndVariants(subKey, val, styleProps, styleState, key);
+          process.env.NODE_ENV === "development" && debug === "verbose" && console.info("object", subKey, subObject), res[subKey] ??= {}, Object.assign(res[subKey], subObject);
+        } else
+          res[subKey] = val;
+        process.env.NODE_ENV === "development" && debug && ((_a = res[subKey]) == null ? void 0 : _a[0]) === "$" && console.warn(
+          `\u26A0\uFE0F Missing token in theme ${theme.name}:`,
+          subKey,
+          res[subKey],
+          theme
+        );
+      }
+      return res;
+    }, tokenCats = ["size", "color", "radius", "space", "zIndex"].map((name) => ({
+      name,
+      spreadName: `...${name}`
+    }));
+    function getVariantDefinition(variant, value, conf) {
+      if (typeof variant == "function")
+        return variant;
+      let exact = variant[value];
+      if (exact)
+        return exact;
+      if (value != null) {
+        let { tokensParsed } = conf;
+        for (let { name, spreadName } of tokenCats)
+          if (spreadName in variant && value in tokensParsed[name])
+            return variant[spreadName];
+        let fontSizeVariant = variant["...fontSize"];
+        if (fontSizeVariant && conf.fontSizeTokens.has(value))
+          return fontSizeVariant;
+      }
+      return variant[`:${typeof value}`] || variant["..."];
     }
-  }
-});
-
-// ../web/dist/cjs/helpers/mergeProps.native.js
-var require_mergeProps_native = __commonJS({
-  "../web/dist/cjs/helpers/mergeProps.native.js"(exports2, module2) {
-    "use strict";
-    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
-      for (var name in all)
-        __defProp2(target, name, { get: all[name], enumerable: !0 });
-    }, __copyProps2 = (to, from, except, desc) => {
-      if (from && typeof from == "object" || typeof from == "function")
-        for (let key of __getOwnPropNames2(from))
-          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
-      return to;
-    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), mergeProps_exports = {};
-    __export2(mergeProps_exports, {
-      mergeProps: () => mergeProps
-    });
-    module2.exports = __toCommonJS2(mergeProps_exports);
-    var import_useMedia = require_useMedia_native(), import_pseudoDescriptors = require_pseudoDescriptors_native(), mergeProps = (a, b, inverseShorthands) => {
-      let out = {};
-      for (let key in a)
-        mergeProp(out, a, b, key, inverseShorthands);
-      if (b)
-        for (let key in b)
-          mergeProp(out, b, void 0, key, inverseShorthands);
-      return out;
+    var fontShorthand = {
+      fontSize: "size",
+      fontWeight: "weight"
+    }, lastFontFamilyToken = null, getTokenForKey = (key, value, resolveAs = "none", styleState) => {
+      var _a, _b, _c, _d;
+      if (resolveAs === "none")
+        return value;
+      let { theme, conf = (0, import_config.getConfig)(), context, fontFamily, staticConfig } = styleState, tokensParsed = conf.tokensParsed, valOrVar, hasSet = !1;
+      if (theme && value in theme)
+        valOrVar = theme[value], process.env.NODE_ENV === "development" && styleState.debug === "verbose" && console.info(` - resolving ${key} to theme value ${value}: ${(_a = valOrVar == null ? void 0 : valOrVar.get) == null ? void 0 : _a.call(valOrVar)}`), hasSet = !0;
+      else if (value in conf.specificTokens)
+        hasSet = !0, valOrVar = conf.specificTokens[value];
+      else {
+        let customTokenAccept = (_b = staticConfig == null ? void 0 : staticConfig.acceptTokens) == null ? void 0 : _b[key];
+        if (customTokenAccept) {
+          let val = tokensParsed[customTokenAccept][value];
+          val && (valOrVar = val, hasSet = !0);
+        } else {
+          switch (key) {
+            case "fontFamily": {
+              valOrVar = ((_c = (context != null && context.language ? (0, import_getVariantExtras.getFontsForLanguage)(conf.fontsParsed, context.language) : conf.fontsParsed)[value]) == null ? void 0 : _c.family) || value, lastFontFamilyToken = value, hasSet = !0;
+              break;
+            }
+            case "fontSize":
+            case "lineHeight":
+            case "letterSpacing":
+            case "fontWeight": {
+              let defaultFont = conf.defaultFont || "$body", fam = fontFamily || defaultFont;
+              if (fam) {
+                let fontsParsed = context != null && context.language ? (0, import_getVariantExtras.getFontsForLanguage)(conf.fontsParsed, context.language) : conf.fontsParsed, font = fontsParsed[fam] || fontsParsed[defaultFont];
+                valOrVar = ((_d = font == null ? void 0 : font[fontShorthand[key] || key]) == null ? void 0 : _d[value]) || value, hasSet = !0;
+              }
+              break;
+            }
+          }
+          for (let cat in import_helpers.tokenCategories)
+            if (key in import_helpers.tokenCategories[cat]) {
+              let res = tokensParsed[cat][value];
+              res != null && (valOrVar = res, hasSet = !0);
+            }
+        }
+        if (!hasSet) {
+          let spaceVar = tokensParsed.space[value];
+          spaceVar != null && (valOrVar = spaceVar, hasSet = !0);
+        }
+      }
+      if (hasSet) {
+        let out = resolveVariableValue(key, valOrVar, resolveAs);
+        return process.env.NODE_ENV === "development" && styleState.debug === "verbose" && console.info("resolved", resolveAs, valOrVar, out), out;
+      }
+      return process.env.NODE_ENV === "development" && import_isDevTools.isDevTools && styleState.debug === "verbose" && (console.groupCollapsed("  \uFE52 propMap (val)", key, value), console.info({ valOrVar, theme, hasSet }, theme ? theme[key] : ""), console.groupEnd()), value;
     };
-    function mergeProp(out, a, b, key, inverseShorthands) {
-      let longhand = (inverseShorthands == null ? void 0 : inverseShorthands[key]) || null, val = a[key];
-      if (key in import_pseudoDescriptors.pseudoDescriptors || import_useMedia.mediaKeys.has(key)) {
-        out[key] = {
-          ...out[key],
-          ...val
-        };
-        return;
+    function resolveVariableValue(key, valOrVar, resolveValues) {
+      if (resolveValues === "none")
+        return valOrVar;
+      if ((0, import_createVariable.isVariable)(valOrVar)) {
+        if (resolveValues === "value")
+          return valOrVar.val;
+        let get = valOrVar == null ? void 0 : valOrVar.get;
+        return key !== "shadowColor" && typeof get == "function" ? get(resolveValues === "web" ? "web" : void 0) : valOrVar.val;
       }
-      b && (key in b || longhand && longhand in b) || (out[longhand || key] = val);
+      return valOrVar;
     }
   }
 });
 
-// ../web/dist/cjs/helpers/ThemeManagerContext.native.js
-var require_ThemeManagerContext_native = __commonJS({
-  "../web/dist/cjs/helpers/ThemeManagerContext.native.js"(exports2, module2) {
-    "use strict";
-    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
-      for (var name in all)
-        __defProp2(target, name, { get: all[name], enumerable: !0 });
-    }, __copyProps2 = (to, from, except, desc) => {
-      if (from && typeof from == "object" || typeof from == "function")
-        for (let key of __getOwnPropNames2(from))
-          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
-      return to;
-    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), ThemeManagerContext_exports = {};
-    __export2(ThemeManagerContext_exports, {
-      ThemeManagerIDContext: () => ThemeManagerIDContext
-    });
-    module2.exports = __toCommonJS2(ThemeManagerContext_exports);
-    var import_react3 = require("react"), ThemeManagerIDContext = (0, import_react3.createContext)(1);
-  }
-});
-
-// ../web/dist/cjs/helpers/ThemeManager.native.js
-var require_ThemeManager_native = __commonJS({
-  "../web/dist/cjs/helpers/ThemeManager.native.js"(exports2, module2) {
+// ../web/dist/cjs/helpers/getSplitStyles.native.js
+var require_getSplitStyles_native = __commonJS({
+  "../web/dist/cjs/helpers/getSplitStyles.native.js"(exports2, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
       for (var name in all)
@@ -4077,404 +3967,522 @@ var require_ThemeManager_native = __commonJS({
         for (let key of __getOwnPropNames2(from))
           !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
       return to;
-    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), ThemeManager_exports = {};
-    __export2(ThemeManager_exports, {
-      ThemeManager: () => ThemeManager,
-      getHasThemeUpdatingProps: () => getHasThemeUpdatingProps,
-      getManagers: () => getManagers
+    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), getSplitStyles_exports = {};
+    __export2(getSplitStyles_exports, {
+      PROP_SPLIT: () => PROP_SPLIT,
+      getSplitStyles: () => getSplitStyles,
+      getSubStyle: () => getSubStyle,
+      useSplitStyles: () => useSplitStyles
     });
-    module2.exports = __toCommonJS2(ThemeManager_exports);
-    var import_constants = require_index_native3(), import_config = require_config_native(), import_constants2 = require_constants_native2(), emptyState = { name: "" };
-    function getHasThemeUpdatingProps(props) {
-      return !!(props.name || props.componentName || props.inverse || props.reset);
+    module2.exports = __toCommonJS2(getSplitStyles_exports);
+    var import_constants = require_index_native3(), import_helpers = require_index_native4(), import_react3 = require("react"), import_config = require_config_native(), import_accessibilityDirectMap = require_accessibilityDirectMap_native(), import_constants2 = require_constants_native2(), import_isDevTools = require_isDevTools_native(), import_useMedia = require_useMedia_native(), import_createMediaStyle = require_createMediaStyle_native(), import_expandStyles = require_expandStyles_native(), import_getGroupPropParts = require_getGroupPropParts_native(), import_getStylesAtomic = require_getStylesAtomic_native(), import_insertStyleRule = require_insertStyleRule_native(), import_log = require_log_native(), import_normalizeValueWithProperty = require_normalizeValueWithProperty_native(), import_propMapper = require_propMapper_native(), import_pseudoDescriptors = require_pseudoDescriptors_native(), IS_STATIC = process.env.IS_STATIC === "is_static", conf, PROP_SPLIT = "-";
+    function isValidStyleKey(key, staticConfig) {
+      let validStyleProps = staticConfig.validStyles ?? (staticConfig.isText ? import_helpers.stylePropsText : import_helpers.validStyles);
+      return key in validStyleProps || staticConfig.acceptTokens && key in staticConfig.acceptTokens;
     }
-    var uid = 0, ThemeManager = class {
-      constructor(props = {}, parentManager) {
-        if (this.props = props, this.id = 0, this.themeListeners = /* @__PURE__ */ new Set(), this.parentManager = null, this.state = emptyState, this._allKeys = null, uid = (uid + 1) % Number.MAX_VALUE, this.id = uid, parentManager === "root") {
-          this.updateStateFromProps(props, !1);
-          return;
-        }
-        if (!parentManager)
-          throw process.env.NODE_ENV !== "production" ? new Error(
-            "No parent manager given, this is likely due to duplicated Tamagui dependencies. Check your lockfile for mis-matched versions. It could also be from an error somewhere else in your stack causing Tamagui to recieve undefined context, you can try putting some ErrorBoundary components around other areas of your app, or a Suspense boundary."
-          ) : "\u274C 000";
-        if (this.parentManager = parentManager, !this.updateStateFromProps(props, !1))
-          return parentManager;
-      }
-      updateStateFromProps(props = this.props || {}, shouldNotify = !0) {
-        if (this.props = props, props.forceTheme)
-          return this.state.theme = props.forceTheme, this.state.name = props.name || "", this.updateState(this.state, !0), this.state;
-        let nextState = this.getStateIfChanged(props);
-        if (nextState)
-          return this.updateState(nextState, shouldNotify), nextState;
-      }
-      updateState(nextState, shouldNotify = !0) {
-        this.state = nextState, this._allKeys = null, process.env.NODE_ENV !== "production" && (this._numChangeEventsSent ??= 0, this._numChangeEventsSent++), shouldNotify && this.notify();
-      }
-      getStateIfChanged(props = this.props, state = this.state, parentManager = this.parentManager) {
-        let _ = this.getState(props, parentManager);
-        if (state && state !== emptyState && !_)
-          return parentManager == null ? void 0 : parentManager.state;
-        if (this.getStateShouldChange(_, state))
-          return _;
-      }
-      getStateShouldChange(nextState, state = this.state) {
-        return !(!(nextState != null && nextState.theme) || nextState.theme === (state == null ? void 0 : state.theme));
-      }
-      getState(props = this.props, parentManager = this.parentManager) {
-        return getState(props, parentManager) || (parentManager == null ? void 0 : parentManager.state) || null;
-      }
-      get allKeys() {
-        var _a;
-        return this._allKeys ||= /* @__PURE__ */ new Set([
-          ...((_a = this.parentManager) == null ? void 0 : _a.allKeys) || [],
-          ...Object.keys(this.state.theme || {})
-        ]), this._allKeys;
-      }
-      notify(forced = !1) {
-        this.themeListeners.forEach((cb) => cb(this.state.name, this, forced));
-      }
-      onChangeTheme(cb, debugId) {
-        return process.env.NODE_ENV !== "production" && debugId && (this._listeningIds ??= /* @__PURE__ */ new Set(), this._listeningIds.add(debugId)), this.themeListeners.add(cb), () => {
-          this.themeListeners.delete(cb);
-        };
-      }
-    };
-    function getState(props, manager) {
-      var _a;
-      if (props.name && props.reset)
-        throw new Error(
-          process.env.NODE_ENV === "production" ? "\u274C004" : "Cannot reset and set a new name at the same time."
-        );
-      if (!getHasThemeUpdatingProps(props))
-        return null;
-      let themes = (0, import_config.getThemes)(), [allManagers, componentManagers] = getManagers(manager), isDirectParentAComponentTheme = !!(manager != null && manager.state.isComponent), startIndex = props.reset && !isDirectParentAComponentTheme ? 1 : 0, baseManager = allManagers[startIndex], parentManager = allManagers[startIndex + 1];
-      if (!baseManager && props.reset)
-        return process.env.NODE_ENV !== "production" && console.warn("Cannot reset, no parent theme exists"), null;
-      let { componentName } = props, result = null, baseName = (baseManager == null ? void 0 : baseManager.state.name) || "";
-      baseManager != null && baseManager.state.isComponent && (baseName = baseName.replace(/_[A-Z][A-Za-z]+/, ""));
-      let nextName = props.reset ? baseName : props.name || "", allComponentThemes = componentManagers.map((x) => (x == null ? void 0 : x.state.name) || "");
-      isDirectParentAComponentTheme && allComponentThemes.shift();
-      let base = baseName.split(import_constants2.THEME_NAME_SEPARATOR), max = base.length, min = props.componentName && !nextName ? max : 0;
-      for (let i = max; i >= min; i--) {
-        let prefix = base.slice(0, i).join(import_constants2.THEME_NAME_SEPARATOR);
-        props.inverse && (prefix = inverseThemeName(prefix));
-        let potentials = [];
-        if (prefix && prefix !== baseName && potentials.push(prefix), nextName && potentials.unshift(prefix ? `${prefix}_${nextName}` : nextName), i === 1) {
-          let lastSegment = potentials.findIndex((x) => !x.includes("_"));
-          lastSegment > 0 && potentials.splice(lastSegment, 0, nextName);
+    var getSplitStyles = (props, staticConfig, theme, themeName, componentState, styleProps, parentSplitStyles, context, elementType, debug) => {
+      var _a, _b, _c, _e, _f, _g;
+      conf = conf || (0, import_config.getConfig)(), import_constants.isWeb && styleProps.isAnimated && conf.animations.isReactNative && !styleProps.noNormalize && (styleProps.noNormalize = "values");
+      let { shorthands } = conf, {
+        isHOC,
+        isText,
+        variants,
+        isReactNative,
+        inlineProps,
+        inlineWhenUnflattened,
+        parentStaticConfig,
+        acceptsClassName
+      } = staticConfig, viewProps = {}, mediaState2 = styleProps.mediaState || import_useMedia.mediaState, usedKeys = {}, shouldDoClasses = acceptsClassName && import_constants.isWeb && !styleProps.noClassNames, rulesToInsert = [], classNames = {}, transforms = {}, pseudos = null, space = props.space, hasMedia = !1, dynamicThemeAccess, pseudoGroups, mediaGroups, style = {}, className = props.className ?? "", mediaStylesSeen = 0, styleState = {
+        curProps: { ...props },
+        classNames,
+        conf,
+        props,
+        styleProps,
+        componentState,
+        staticConfig,
+        style,
+        theme,
+        usedKeys,
+        viewProps,
+        context,
+        debug
+      };
+      process.env.NODE_ENV === "development" && debug && debug !== "profile" && import_constants.isClient && (console.groupCollapsed("getSplitStyles (collapsed)"), (0, import_log.log)({
+        props,
+        staticConfig,
+        shouldDoClasses,
+        styleProps,
+        componentState,
+        styleState,
+        theme: { ...theme }
+      }), console.groupEnd());
+      for (let keyOg in props) {
+        let keyInit = keyOg, valInit = props[keyOg];
+        if (styleProps.disableExpandShorthands || keyInit in shorthands && (keyInit = shorthands[keyInit]), keyInit === "className" || keyInit in usedKeys || keyInit in skipProps && !styleProps.noSkip && !isHOC)
+          continue;
+        let valInitType = typeof valInit, isValidStyleKeyInit = isValidStyleKey(keyInit, staticConfig);
+        if (styleState.curProps[keyInit] = valInit, !import_constants.isAndroid && keyInit === "elevationAndroid")
+          continue;
+        if (keyInit === "userSelect")
+          keyInit = "selectable", valInit = valInit !== "none";
+        else if (keyInit === "role") {
+          viewProps.accessibilityRole = import_accessibilityDirectMap.accessibilityWebRoleToNativeRole[valInit];
+          continue;
+        } else if (keyInit.startsWith("aria-")) {
+          if (import_accessibilityDirectMap.webToNativeAccessibilityDirectMap[keyInit]) {
+            let nativeA11yProp = import_accessibilityDirectMap.webToNativeAccessibilityDirectMap[keyInit];
+            keyInit === "aria-hidden" && (viewProps["aria-hidden"] = valInit), viewProps[nativeA11yProp] = valInit;
+            continue;
+          }
+          if (import_accessibilityDirectMap.nativeAccessibilityValue[keyInit]) {
+            let field = import_accessibilityDirectMap.nativeAccessibilityValue[keyInit];
+            viewProps.accessibilityValue ? viewProps.accessibilityValue[field] = valInit : viewProps.accessibilityValue = {
+              [field]: valInit
+            };
+          } else if (import_accessibilityDirectMap.nativeAccessibilityState[keyInit]) {
+            let field = import_accessibilityDirectMap.nativeAccessibilityState[keyInit];
+            viewProps.accessibilityState ? viewProps.accessibilityState[field] = valInit : viewProps.accessibilityState = {
+              [field]: valInit
+            };
+          }
+          continue;
+        } else if (keyInit.startsWith("data-"))
+          continue;
+        if (keyInit === "dataSet") {
+          for (let keyInit2 in valInit)
+            viewProps[`data-${hyphenate(keyInit2)}`] = valInit[keyInit2];
+          continue;
         }
-        if (componentName && !props.reset) {
-          let baseLen = base.length, componentPotentials = [];
-          if (nextName && baseLen > 1) {
-            let beforeSeparator = base[0];
-            componentPotentials.push(`${beforeSeparator}_${nextName}_${componentName}`);
+        if (keyInit[0] === "_" && keyInit.startsWith("_style")) {
+          mergeStylePropIntoStyle(styleState, valInit);
+          continue;
+        }
+        if (0)
+          switch (keyInit) {
+            case "accessibilityRole":
+            case "accessibilityLabelledBy":
+            case "accessibilityFlowTo":
+            case "accessibilityControls":
+            case "accessibilityDescribedBy":
+            case "accessibilityKeyShortcuts":
+            case "accessibilityLiveRegion":
+            case "accessibilityReadOnly":
+            case "accessibilityRequired":
+            default:
           }
-          if (componentPotentials.push(`${prefix}_${componentName}`), nextName) {
-            if (i > baseLen) {
-              let prefixLessOne = base.slice(0, i - 1).join(import_constants2.THEME_NAME_SEPARATOR);
-              if (prefixLessOne) {
-                let lessSpecific = `${prefixLessOne}_${nextName}_${componentName}`;
-                componentPotentials.unshift(lessSpecific);
+        let isShorthand = keyInit in shorthands, isVariant = !isValidStyleKeyInit && variants && keyInit in variants, isStyleLikeKey = isShorthand || isValidStyleKeyInit || isVariant, isPseudo = keyInit in import_helpers.validPseudoKeys, isMedia = !isStyleLikeKey && !isPseudo && (0, import_useMedia.isMediaKey)(keyInit), isMediaOrPseudo = !!(isMedia || isPseudo), isStyleProp = isMediaOrPseudo || isVariant && !styleProps.noExpand || isValidStyleKeyInit || isShorthand;
+        if (isStyleProp && (props.asChild === "except-style" || props.asChild === "except-style-web"))
+          continue;
+        let shouldPassProp = !isStyleProp || // is in parent variants
+        isHOC && (parentStaticConfig == null ? void 0 : parentStaticConfig.variants) && keyInit in parentStaticConfig.variants || (inlineProps == null ? void 0 : inlineProps.has(keyInit)), parentVariant = (_a = parentStaticConfig == null ? void 0 : parentStaticConfig.variants) == null ? void 0 : _a[keyInit], isHOCShouldPassThrough = !!(isHOC && (isShorthand || isValidStyleKeyInit || isMediaOrPseudo || parentVariant || keyInit in skipProps)), shouldPassThrough = shouldPassProp || isHOCShouldPassThrough;
+        if (process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupCollapsed(
+          `\u{1F539}\u{1F539}\u{1F539}\u{1F539} ${keyOg}${keyInit !== keyOg ? ` (shorthand for ${keyInit})` : ""} ${shouldPassThrough ? "(pass)" : ""} \u{1F539}\u{1F539}\u{1F539}\u{1F539}`
+        ), (0, import_log.log)({ isVariant, valInit, shouldPassProp }), import_constants.isClient && (0, import_log.log)({
+          variants,
+          variant: variants == null ? void 0 : variants[keyInit],
+          isVariant,
+          isHOCShouldPassThrough,
+          curProps: { ...styleState.curProps },
+          parentStaticConfig
+        }), console.groupEnd()), shouldPassThrough && (passDownProp(viewProps, keyInit, valInit, isMediaOrPseudo), !isVariant) || !styleProps.noSkip && keyInit in skipProps)
+          continue;
+        if (isText && valInit && (keyInit === "fontFamily" || keyInit === shorthands.fontFamily) && valInit in conf.fontsParsed && (styleState.fontFamily = valInit), isValidStyleKeyInit && !variants && valInit !== "unset" && (valInitType === "number" || valInitType === "string" && valInit[0] !== "$")) {
+          style[keyInit] = valInit;
+          continue;
+        }
+        let expanded = isMediaOrPseudo || !isVariant && !isValidStyleKeyInit ? [[keyInit, valInit]] : (0, import_propMapper.propMapper)(keyInit, valInit, styleState), next = (0, import_propMapper.getPropMappedFontFamily)(expanded);
+        if (next && (styleState.fontFamily = next), process.env.NODE_ENV === "development" && debug === "verbose") {
+          console.groupCollapsed("  \u{1F4A0} expanded", keyInit, valInit);
+          try {
+            !import_constants.isServer && import_isDevTools.isDevTools && ((0, import_log.log)({
+              expanded,
+              styleProps,
+              componentState,
+              isVariant,
+              variant: variants == null ? void 0 : variants[keyInit],
+              shouldPassProp,
+              isHOCShouldPassThrough,
+              theme,
+              usedKeys: { ...usedKeys },
+              curProps: { ...styleState.curProps }
+            }), (0, import_log.log)("expanded", expanded, `
+usedKeys`, { ...usedKeys }, `
+current`, {
+              ...style
+            }));
+          } catch {
+          }
+          console.groupEnd();
+        }
+        if (expanded) {
+          for (let [key, val] of expanded)
+            if (!(val == null || key in usedKeys)) {
+              if (isPseudo = key in import_helpers.validPseudoKeys, isMedia = !isPseudo && !isValidStyleKeyInit && (0, import_useMedia.isMediaKey)(key), isMediaOrPseudo = !!(isMedia || isPseudo), isVariant = variants && key in variants, (inlineProps != null && inlineProps.has(key) || IS_STATIC && inlineWhenUnflattened != null && inlineWhenUnflattened.has(key)) && (viewProps[key] = props[key] ?? val), styleProps.noExpand && isPseudo || isHOC && (isMediaOrPseudo || ((_b = parentStaticConfig == null ? void 0 : parentStaticConfig.variants) == null ? void 0 : _b[keyInit]))) {
+                passDownProp(viewProps, key, val, isMediaOrPseudo), process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupCollapsed(` - passing down prop ${key}`), (0, import_log.log)({ val, after: { ...viewProps[key] } }), console.groupEnd());
+                continue;
+              }
+              if (isPseudo) {
+                if (!val)
+                  continue;
+                let pseudoStyleObject = getSubStyle(
+                  styleState,
+                  key,
+                  val,
+                  styleProps.noClassNames
+                ), descriptor = import_pseudoDescriptors.pseudoDescriptors[key], isEnter = key === "enterStyle", isExit = key === "exitStyle";
+                if (!descriptor || isExit && !styleProps.isExiting)
+                  continue;
+                if ((!shouldDoClasses || IS_STATIC) && (pseudos ||= {}, pseudos[key] ||= {}, IS_STATIC)) {
+                  Object.assign(pseudos[key], pseudoStyleObject);
+                  continue;
+                }
+                if (shouldDoClasses && !isExit) {
+                  let pseudoStyles = (0, import_getStylesAtomic.generateAtomicStyles)(pseudoStyleObject, descriptor);
+                  process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupCollapsed("pseudo (classes)", key), (0, import_log.log)({ pseudoStyleObject, pseudoStyles }), console.groupEnd());
+                  for (let psuedoStyle of pseudoStyles)
+                    `${psuedoStyle.property}${PROP_SPLIT}${descriptor.name}` in usedKeys || psuedoStyle.identifier;
+                }
+                if (!shouldDoClasses || isExit || isEnter) {
+                  let descriptorKey = descriptor.stateKey || descriptor.name, isDisabled = componentState[descriptorKey] === !1;
+                  isExit && (isDisabled = !styleProps.isExiting), isEnter && (isDisabled = componentState.unmounted === "should-enter" ? !0 : !componentState.unmounted), process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupCollapsed("pseudo", key, { isDisabled }), (0, import_log.log)({ pseudoStyleObject, isDisabled, descriptor, componentState }), console.groupEnd());
+                  let importance = descriptor.priority;
+                  for (let pkey in pseudoStyleObject) {
+                    let val2 = pseudoStyleObject[pkey];
+                    if (isDisabled) {
+                      if (pkey in animatableDefaults && !(pkey in usedKeys)) {
+                        let defaultVal = animatableDefaults[pkey];
+                        mergeStyle(styleState, pkey, defaultVal);
+                      }
+                    } else {
+                      let curImportance = usedKeys[pkey] || 0, shouldMerge = importance >= curImportance;
+                      shouldMerge && (pseudos ||= {}, pseudos[key] ||= {}, pseudos[key][pkey] = val2, mergeStyle(styleState, pkey, val2)), process.env.NODE_ENV === "development" && debug === "verbose" && (0, import_log.log)("    subKey", pkey, shouldMerge, {
+                        importance,
+                        curImportance,
+                        pkey,
+                        val: val2,
+                        transforms: { ...styleState.transforms }
+                      });
+                    }
+                  }
+                  if (!isDisabled)
+                    for (let key2 in val) {
+                      let k = shorthands[key2] || key2;
+                      usedKeys[k] = Math.max(importance, usedKeys[k] || 0);
+                    }
+                }
+                continue;
+              }
+              if (isMedia) {
+                if (!val)
+                  continue;
+                if (isMedia === "platform") {
+                  let platform = key.slice(10);
+                  if (
+                    // supports web, ios, android
+                    platform !== import_constants.currentPlatform && // supports web, native
+                    platform !== "native"
+                  )
+                    continue;
+                }
+                hasMedia ||= !0;
+                let mediaStyle = getSubStyle(
+                  styleState,
+                  key,
+                  val,
+                  // TODO try true like pseudo
+                  !1
+                ), mediaKeyShort = key.slice(1);
+                process.env.NODE_ENV === "development" && debug === "verbose" && (0, import_log.log)(`  \u{1F4FA} ${key}`, {
+                  key,
+                  val,
+                  mediaStyle,
+                  props,
+                  shouldDoClasses,
+                  componentState
+                });
+                let hasSpace = val.space;
+                if ((hasSpace || !shouldDoClasses) && (Array.isArray(hasMedia) || (hasMedia = []), hasMedia.push(mediaKeyShort)), shouldDoClasses) {
+                  if (hasSpace && (delete mediaStyle.space, mediaState2[mediaKeyShort])) {
+                    let importance = (0, import_useMedia.getMediaImportanceIfMoreImportant)(
+                      mediaKeyShort,
+                      "space",
+                      usedKeys,
+                      !0
+                    );
+                    importance && (space = val.space, usedKeys.space = importance, process.env.NODE_ENV === "development" && debug === "verbose" && (0, import_log.log)(
+                      `Found more important space for current media ${mediaKeyShort}: ${val} (importance: ${importance})`
+                    ));
+                  }
+                  let mediaStyles = (0, import_getStylesAtomic.getStylesAtomic)(mediaStyle, debug), priority = mediaStylesSeen;
+                  mediaStylesSeen += 1;
+                  for (let style2 of mediaStyles) {
+                    let out = (0, import_createMediaStyle.createMediaStyle)(
+                      style2,
+                      mediaKeyShort,
+                      import_useMedia.mediaQueryConfig,
+                      isMedia,
+                      !1,
+                      priority
+                    );
+                    process.env.NODE_ENV === "development" && debug === "verbose" && (0, import_log.log)("\u{1F4FA} media style:", out), `${style2.property}${PROP_SPLIT}${mediaKeyShort}` in usedKeys || out.identifier;
+                  }
+                } else {
+                  let isThemeMedia = isMedia === "theme", isGroupMedia = isMedia === "group";
+                  if (!isThemeMedia && isMedia !== "platform" && !isGroupMedia && !mediaState2[mediaKeyShort])
+                    continue;
+                  let importanceBump = 0;
+                  if (isThemeMedia) {
+                    dynamicThemeAccess = !0;
+                    let mediaThemeName = mediaKeyShort.slice(6);
+                    if (!(themeName === mediaThemeName || themeName.startsWith(mediaThemeName)))
+                      continue;
+                  } else if (isGroupMedia) {
+                    let groupInfo = (0, import_getGroupPropParts.getGroupPropParts)(mediaKeyShort), groupName = groupInfo.name, groupContext = context == null ? void 0 : context.groups.state[groupName];
+                    if (!groupContext) {
+                      process.env.NODE_ENV === "development" && debug && console.warn(`No parent with group prop, skipping styles: ${groupName}`);
+                      continue;
+                    }
+                    let groupPseudoKey = groupInfo.pseudo, groupMediaKey = groupInfo.media, componentGroupState = (_c = componentState.group) == null ? void 0 : _c[groupName];
+                    if (groupMediaKey) {
+                      mediaGroups ||= /* @__PURE__ */ new Set(), mediaGroups.add(groupMediaKey);
+                      let mediaState22 = componentGroupState == null ? void 0 : componentGroupState.media, isActive = mediaState22 == null ? void 0 : mediaState22[groupMediaKey];
+                      if (!mediaState22 && groupContext.layout && (isActive = (0, import_useMedia.mediaKeyMatch)(groupMediaKey, groupContext.layout)), !isActive)
+                        continue;
+                      importanceBump = 2;
+                    }
+                    if (groupPseudoKey) {
+                      pseudoGroups ||= /* @__PURE__ */ new Set(), pseudoGroups.add(groupName);
+                      let componentGroupPseudoState = (componentGroupState || // fallback to context initially
+                      context.groups.state[groupName]).pseudo;
+                      if (!(componentGroupPseudoState != null && componentGroupPseudoState[groupPseudoKey]))
+                        continue;
+                      importanceBump = import_pseudoDescriptors.pseudoPriorities[groupPseudoKey];
+                    }
+                  }
+                  for (let subKey in mediaStyle) {
+                    if (subKey === "space") {
+                      space = valInit.space;
+                      continue;
+                    }
+                    (0, import_useMedia.mergeMediaByImportance)(
+                      style,
+                      mediaKeyShort,
+                      subKey,
+                      mediaStyle[subKey],
+                      usedKeys,
+                      mediaState2[mediaKeyShort],
+                      importanceBump
+                    ), key === "fontFamily" && (styleState.fontFamily = mediaStyle.fontFamily);
+                  }
+                }
+                continue;
+              }
+              if (key === "pointerEvents") {
+                viewProps[key] = val;
+                continue;
+              }
+              if (
+                // is HOC we can just pass through the styles as props
+                // this fixes issues where style prop got merged with wrong priority
+                !isHOC && (isValidStyleKey(key, staticConfig) || import_constants.isAndroid && key === "elevation")
+              ) {
+                mergeStyle(styleState, key, val);
+                continue;
               }
+              isVariant || (viewProps[key] = val);
             }
-            let moreSpecific = `${prefix}_${nextName}_${componentName}`;
-            componentPotentials.unshift(moreSpecific);
+          if (process.env.NODE_ENV === "development" && debug === "verbose") {
+            console.groupCollapsed(" \u2714\uFE0F expand complete", keyInit);
+            try {
+              (0, import_log.log)("style", { ...style }), (0, import_log.log)("transforms", { ...transforms }), (0, import_log.log)("viewProps", { ...viewProps });
+            } catch {
+            }
+            console.groupEnd();
           }
-          potentials = [...componentPotentials, ...potentials, ...allComponentThemes];
-        }
-        let found = potentials.find((t) => t in themes);
-        if (process.env.NODE_ENV !== "production" && typeof props.debug == "string" && console.info(" getState ", {
-          props,
-          found,
-          potentials,
-          baseManager,
-          nextName,
-          baseName,
-          prefix
-        }), found) {
-          let names = found.split("_"), [firstName, ...restNames] = names, lastName = names[names.length - 1], isComponent = lastName[0] === lastName[0].toUpperCase(), scheme = firstName === "light" ? "light" : firstName === "dark" ? "dark" : void 0, pre = import_constants2.THEME_CLASSNAME_PREFIX, className = import_constants.isWeb ? `${pre}sub_theme ${pre}${!scheme || !restNames.length ? firstName : restNames.join("_")}` : "", parentState = (_a = baseManager || parentManager) == null ? void 0 : _a.state, parentName = parentState == null ? void 0 : parentState.name;
-          result = {
-            name: found,
-            parentName,
-            theme: themes[found],
-            className,
-            isComponent,
-            scheme
-          };
-          break;
         }
       }
-      return process.env.NODE_ENV !== "production" && props.debug === "verbose" && typeof window < "u" && (console.groupCollapsed("ThemeManager.getState()"), console.info({ props, baseName, base, min, max }), console.warn("result", { result }), console.trace(), console.groupEnd()), result;
-    }
-    var inverseThemeName = (themeName) => themeName.startsWith("light") ? themeName.replace(/^light/, "dark") : themeName.replace(/^dark/, "light");
-    function getManagers(themeManager) {
-      let comp = [], all = [], cur = themeManager;
-      for (; cur; )
-        all.push(cur), cur.state.isComponent && comp.push(cur), cur = cur.parentManager;
-      return [all, comp];
-    }
-  }
-});
-
-// ../web/dist/cjs/hooks/useTheme.native.js
-var require_useTheme_native = __commonJS({
-  "../web/dist/cjs/hooks/useTheme.native.js"(exports2, module2) {
-    "use strict";
-    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
-      for (var name in all)
-        __defProp2(target, name, { get: all[name], enumerable: !0 });
-    }, __copyProps2 = (to, from, except, desc) => {
-      if (from && typeof from == "object" || typeof from == "function")
-        for (let key of __getOwnPropNames2(from))
-          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
-      return to;
-    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), useTheme_exports = {};
-    __export2(useTheme_exports, {
-      activeThemeManagers: () => activeThemeManagers,
-      getThemeManager: () => getThemeManager,
-      getThemeProxied: () => getThemeProxied,
-      useChangeThemeEffect: () => useChangeThemeEffect,
-      useTheme: () => useTheme,
-      useThemeWithState: () => useThemeWithState
-    });
-    module2.exports = __toCommonJS2(useTheme_exports);
-    var import_constants = require_index_native3(), import_react3 = require("react"), import_config = require_config_native(), import_createVariable = require_createVariable_native(), import_createShallowSetState = require_createShallowSetState_native(), import_ThemeManager = require_ThemeManager_native(), import_ThemeManagerContext = require_ThemeManagerContext_native(), emptyProps = { name: null }, cached;
-    function getDefaultThemeProxied() {
-      if (cached)
-        return cached;
-      let config = (0, import_config.getConfig)(), name = config.themes.light ? "light" : Object.keys(config.themes)[0], defaultTheme = config.themes[name];
-      return cached = getThemeProxied({ theme: defaultTheme, name }), cached;
-    }
-    var useTheme = (props = emptyProps) => {
-      let [_, theme] = useThemeWithState(props);
-      return theme || getDefaultThemeProxied();
-    }, useThemeWithState = (props) => {
-      let keys = (0, import_react3.useRef)([]), changedThemeState = useChangeThemeEffect(
-        props,
-        !1,
-        keys.current,
-        import_constants.isServer ? void 0 : () => {
-          var _a, _b;
-          let next = ((_a = props.shouldUpdate) == null ? void 0 : _a.call(props)) ?? (keys.current.length > 0 ? !0 : void 0);
-          return process.env.NODE_ENV === "development" && typeof props.debug == "string" && props.debug !== "profile" && console.info("  \u{1F3A8} useTheme() shouldUpdate?", next, {
-            shouldUpdateProp: (_b = props.shouldUpdate) == null ? void 0 : _b.call(props),
-            keys: [...keys.current]
-          }), next;
+      if (props.style && mergeStylePropIntoStyle(styleState, props.style), styleProps.noNormalize !== !1 && ((0, import_expandStyles.fixStyles)(style), import_constants.isWeb && !staticConfig.isReactNative && (0, import_getStylesAtomic.styleToCSS)(style), styleState.transforms && Object.entries(styleState.transforms).sort(([a], [b]) => a.localeCompare(b)).forEach(([key, val]) => {
+        mergeTransform(style, key, val, !0);
+      }), parentSplitStyles && !shouldDoClasses))
+        for (let key in parentSplitStyles.style)
+          key in classNames || key in style || (style[key] = parentSplitStyles.style[key]);
+      let result = {
+        space,
+        hasMedia,
+        fontFamily: styleState.fontFamily,
+        viewProps,
+        // @ts-expect-error
+        style,
+        pseudos,
+        classNames,
+        rulesToInsert,
+        dynamicThemeAccess,
+        pseudoGroups,
+        mediaGroups
+      };
+      if (style.fontFamily) {
+        let faceInfo = (_e = (0, import_config.getFont)(style.fontFamily)) == null ? void 0 : _e.face;
+        if (faceInfo) {
+          let overrideFace = (_g = (_f = faceInfo[style.fontWeight]) == null ? void 0 : _f[style.fontStyle || "normal"]) == null ? void 0 : _g.val;
+          overrideFace && (style.fontFamily = overrideFace, styleState.fontFamily = overrideFace, delete style.fontWeight, delete style.fontStyle);
         }
-      ), { themeManager, state } = changedThemeState;
-      process.env.NODE_ENV === "development" && (state != null && state.theme || process.env.TAMAGUI_DISABLE_NO_THEME_WARNING !== "1" && console.warn(
-        `[tamagui] No theme found, this could be due to an invalid theme name (given theme props ${JSON.stringify(
-          props
-        )}).
-
-If this is intended and you are using Tamagui without any themes, you can disable this warning by setting the environment variable TAMAGUI_DISABLE_NO_THEME_WARNING=1`
-      ));
-      let themeProxied = (0, import_react3.useMemo)(() => !themeManager || !(state != null && state.theme) ? {} : getThemeProxied(state, props.deopt, themeManager, keys.current, props.debug), [state == null ? void 0 : state.theme, themeManager, props.deopt, props.debug]);
-      return process.env.NODE_ENV === "development" && props.debug === "verbose" && (console.groupCollapsed("  \u{1F539} useTheme =>", state == null ? void 0 : state.name), console.info("returning state", changedThemeState, "from props", props), console.groupEnd()), [changedThemeState, themeProxied];
-    };
-    function getThemeProxied({ theme, name, scheme }, deopt = !1, themeManager, keys, debug) {
-      if (!theme)
-        return {};
-      let config = (0, import_config.getConfig)();
-      function track(key) {
-        keys && !keys.includes(key) && (keys.push(key), process.env.NODE_ENV === "development" && debug && console.info(` \u{1F3A8} useTheme() tracking new key: ${key}`));
+        process.env.NODE_ENV === "development" && debug && debug !== "profile" && (0, import_log.log)(`Found fontFamily native: ${style.fontFamily}`, faceInfo);
       }
-      return new Proxy(theme, {
-        has(_, key) {
-          if (Reflect.has(theme, key))
-            return !0;
-          if (typeof key == "string")
-            return key[0] === "$" && (key = key.slice(1)), themeManager == null ? void 0 : themeManager.allKeys.has(key);
-        },
-        get(_, key) {
-          if (
-            // dont ask me, idk why but on hermes you can see that useTheme()[undefined] passes in STRING undefined to proxy
-            // if someone is crazy enough to use "undefined" as a theme key then this not working is on them
-            key !== "undefined" && typeof key == "string"
-          ) {
-            let keyString = key[0] === "$" ? key.slice(1) : key, val = theme[keyString];
-            if (val && typeof val == "object")
-              return new Proxy(val, {
-                // when they touch the actual value we only track it
-                // if its a variable (web), its ignored!
-                get(_2, subkey) {
-                  if (subkey === "val")
-                    track(keyString);
-                  else if (subkey === "get")
-                    return (platform) => {
-                      let outVal = (0, import_createVariable.getVariable)(val);
-                      if (platform !== "web" && import_constants.isIos && !deopt && config.settings.fastSchemeChange && !someParentIsInversed(themeManager) && scheme) {
-                        let oppositeThemeName = name.replace(
-                          scheme === "dark" ? "dark" : "light",
-                          scheme === "dark" ? "light" : "dark"
-                        ), oppositeTheme = config.themes[oppositeThemeName], oppositeVal = (0, import_createVariable.getVariable)(oppositeTheme == null ? void 0 : oppositeTheme[keyString]);
-                        if (oppositeVal)
-                          return {
-                            dynamic: {
-                              dark: scheme === "dark" ? outVal : oppositeVal,
-                              light: scheme === "light" ? outVal : oppositeVal
-                            }
-                          };
-                      }
-                      return track(keyString), outVal;
-                    };
-                  return Reflect.get(val, subkey);
-                }
-              });
-            if (process.env.NODE_ENV === "development" && process.env.TAMAGUI_FEAT_THROW_ON_MISSING_THEME_VALUE === "1")
-              throw new Error(
-                `[tamagui] No theme key "${key}" found in theme ${name}. 
-  Keys in theme: ${Object.keys(
-                  theme
-                ).join(", ")}`
-              );
-          }
-          return Reflect.get(_, key);
-        }
-      });
-    }
-    function someParentIsInversed(manager) {
-      {
-        let cur = manager;
-        for (; cur; ) {
-          if (!cur.parentManager)
-            return !1;
-          if (cur.parentManager.state.scheme !== cur.state.scheme)
-            return !0;
-          cur = cur.parentManager;
+      if (className && (classNames.className = className), process.env.NODE_ENV === "development" && debug === "verbose" && import_isDevTools.isDevTools) {
+        console.groupCollapsed("  \u{1F539} ===>");
+        try {
+          let logs = {
+            ...result,
+            className,
+            componentState,
+            transforms,
+            viewProps,
+            viewPropsOrder: Object.keys(viewProps),
+            rulesToInsert,
+            parentSplitStyles
+          };
+          for (let key in logs)
+            (0, import_log.log)(key, logs[key]);
+        } catch {
         }
+        console.groupEnd();
+      }
+      return result;
+    };
+    function mergeStyle(styleState, key, val, disableNormalize = !1) {
+      let { classNames, viewProps, style, usedKeys, styleProps } = styleState;
+      if (import_constants.isWeb && (val == null ? void 0 : val[0]) === "_")
+        classNames[key] = val, usedKeys[key] ||= 1;
+      else if (key in import_helpers.stylePropsTransform)
+        styleState.transforms ||= {}, styleState.transforms[key] = val;
+      else {
+        let out = import_constants.isWeb && !disableNormalize && !styleProps.noNormalize ? (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(val, key) : val;
+        key in import_helpers.validStylesOnBaseProps ? viewProps[key] = out : style[key] = out;
       }
-      return !1;
     }
-    var activeThemeManagers = /* @__PURE__ */ new Set(), _uidToManager = /* @__PURE__ */ new WeakMap(), _idToUID = {}, getId = (id) => _idToUID[id], getThemeManager = (id) => _uidToManager.get(getId(id)), registerThemeManager = (t) => {
-      if (!_idToUID[t.id]) {
-        let id = _idToUID[t.id] = {};
-        _uidToManager.set(id, t);
+    var getSubStyle = (styleState, subKey, styleIn, avoidMergeTransform) => {
+      let { staticConfig, props, conf: conf2, styleProps } = styleState, styleOut = {};
+      for (let key in styleIn) {
+        let val = styleIn[key];
+        key = conf2.shorthands[key] || key;
+        let expanded = (0, import_propMapper.propMapper)(key, val, styleState, { ...props, ...props[subKey] });
+        if (!(!expanded || !staticConfig.isHOC && key in skipProps && !styleProps.noSkip))
+          for (let [skey, sval] of expanded)
+            !avoidMergeTransform && skey in import_helpers.stylePropsTransform ? mergeTransform(styleOut, skey, sval) : styleOut[skey] = styleProps.noNormalize ? sval : (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(sval, key);
       }
-    }, useChangeThemeEffect = (props, isRoot = !1, keys, shouldUpdate) => {
-      let { disable } = props, parentManagerId = (0, import_react3.useContext)(import_ThemeManagerContext.ThemeManagerIDContext), parentManager = getThemeManager(parentManagerId);
-      if (!isRoot && !parentManager || disable)
-        return {
-          isNewTheme: !1,
-          state: parentManager == null ? void 0 : parentManager.state,
-          themeManager: parentManager
-        };
-      let [themeState, setThemeState] = (0, import_react3.useState)(createState), { state, mounted, isNewTheme, themeManager, inversed } = themeState, isInversingOnMount = !!(!themeState.mounted && props.inverse);
-      function getShouldUpdateTheme(manager = themeManager, nextState, prevState = state, forceShouldChange = !1) {
-        let forceUpdate = shouldUpdate == null ? void 0 : shouldUpdate();
-        if (!manager || !forceShouldChange && forceUpdate === !1)
-          return;
-        let next = nextState || manager.getState(props, parentManager);
-        if (forceShouldChange || next && !(forceUpdate !== !0 && !manager.getStateShouldChange(next, prevState)))
-          return next;
+      return styleProps.noNormalize || (0, import_expandStyles.fixStyles)(styleOut), styleOut;
+    };
+    function mergeStylePropIntoStyle(styleState, cur) {
+      if (!cur)
+        return;
+      let styles = Array.isArray(cur) ? cur : [cur];
+      for (let style of styles) {
+        if (!style)
+          continue;
+        let isRNW = style.$$css;
+        Object.assign(isRNW ? styleState.classNames : styleState.style, style);
       }
-      if (import_constants.isServer || ((0, import_react3.useEffect)(() => {
-        if (!themeManager)
-          return;
-        if (props.inverse && !mounted) {
-          setThemeState((prev) => createState({
-            ...prev,
-            mounted: !0
-          }));
-          return;
-        }
-        (isNewTheme || getShouldUpdateTheme(themeManager)) && (activeThemeManagers.add(themeManager), setThemeState(createState));
-        let selfListenerDispose = themeManager.onChangeTheme((_a, _b, forced) => {
-          forced && setThemeState((prev) => createState(prev, !0));
-        }), disposeChangeListener = parentManager == null ? void 0 : parentManager.onChangeTheme(
-          (name, manager, forced) => {
-            let force = forced || (shouldUpdate == null ? void 0 : shouldUpdate()) || props.deopt || props["disable-child-theme"], shouldTryUpdate = force ?? !!(keys != null && keys.length || isNewTheme);
-            process.env.NODE_ENV === "development" && props.debug === "verbose" && console.info(" \u{1F538} onChange", themeManager.id, {
-              force,
-              shouldTryUpdate,
-              props,
-              name,
-              manager,
-              keys
-            }), shouldTryUpdate && setThemeState((prev) => createState(prev, force));
-          },
-          themeManager.id
-        );
-        return () => {
-          selfListenerDispose(), disposeChangeListener == null || disposeChangeListener(), isNewTheme && activeThemeManagers.delete(themeManager);
+    }
+    var useInsertEffectCompat = import_constants.isWeb ? import_react3.useInsertionEffect || import_constants.useIsomorphicLayoutEffect : () => {
+    }, useSplitStyles = (...args) => {
+      let res = getSplitStyles(...args);
+      return useInsertEffectCompat(() => {
+        (0, import_insertStyleRule.insertStyleRules)(res.rulesToInsert);
+      }, [res.rulesToInsert]), res;
+    }, animatableDefaults = {
+      opacity: 1,
+      scale: 1,
+      rotate: "0deg",
+      rotateY: "0deg",
+      rotateX: "0deg",
+      x: 0,
+      y: 0
+    }, lowercaseHyphenate = (match) => `-${match.toLowerCase()}`, hyphenate = (str) => str.replace(/[A-Z]/g, lowercaseHyphenate), mergeTransform = (obj, key, val, backwards = !1) => {
+      typeof obj.transform != "string" && (obj.transform ||= [], obj.transform[backwards ? "unshift" : "push"]({
+        [mapTransformKeys[key] || key]: val
+      }));
+    }, mapTransformKeys = {
+      x: "translateX",
+      y: "translateY"
+    }, skipProps = {
+      untilMeasured: 1,
+      animation: 1,
+      space: 1,
+      animateOnly: 1,
+      disableClassName: 1,
+      debug: 1,
+      componentName: 1,
+      disableOptimization: 1,
+      tag: 1,
+      style: 1,
+      // handled after loop so pseudos set usedKeys and override it if necessary
+      group: 1
+    };
+    process.env.NODE_ENV === "test" && (skipProps["data-test-renders"] = 1);
+    Object.assign(skipProps, {
+      whiteSpace: 1,
+      wordWrap: 1,
+      textOverflow: 1,
+      textDecorationDistance: 1,
+      cursor: 1,
+      contain: 1,
+      boxSizing: 1,
+      boxShadow: 1,
+      outlineStyle: 1,
+      outlineOffset: 1,
+      outlineWidth: 1,
+      outlineColor: 1
+    });
+    function passDownProp(viewProps, key, val, shouldMergeObject = !1) {
+      if (shouldMergeObject) {
+        let next = {
+          ...viewProps[key],
+          ...val
         };
-      }, [
-        themeManager,
-        parentManager,
-        isNewTheme,
-        props.componentName,
-        props.inverse,
-        props.name,
-        props.reset,
-        mounted
-      ]), process.env.NODE_ENV === "development" && props.debug !== "profile" && (0, import_react3.useEffect)(() => (globalThis.TamaguiThemeManagers ??= /* @__PURE__ */ new Set(), globalThis.TamaguiThemeManagers.add(themeManager), () => {
-        globalThis.TamaguiThemeManagers.delete(themeManager);
-      }), [themeManager])), isInversingOnMount)
-        return {
-          isNewTheme: !1,
-          inversed: !1,
-          themeManager: parentManager,
-          state: {
-            name: "",
-            ...parentManager == null ? void 0 : parentManager.state,
-            className: ""
-          }
+        delete viewProps[key], viewProps[key] = next;
+      } else
+        viewProps[key] = val;
+    }
+  }
+});
+
+// ../web/dist/cjs/helpers/mergeProps.native.js
+var require_mergeProps_native = __commonJS({
+  "../web/dist/cjs/helpers/mergeProps.native.js"(exports2, module2) {
+    "use strict";
+    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
+      for (var name in all)
+        __defProp2(target, name, { get: all[name], enumerable: !0 });
+    }, __copyProps2 = (to, from, except, desc) => {
+      if (from && typeof from == "object" || typeof from == "function")
+        for (let key of __getOwnPropNames2(from))
+          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
+      return to;
+    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), mergeProps_exports = {};
+    __export2(mergeProps_exports, {
+      mergeProps: () => mergeProps
+    });
+    module2.exports = __toCommonJS2(mergeProps_exports);
+    var import_useMedia = require_useMedia_native(), import_pseudoDescriptors = require_pseudoDescriptors_native(), mergeProps = (a, b, inverseShorthands) => {
+      let out = {};
+      for (let key in a)
+        mergeProp(out, a, b, key, inverseShorthands);
+      if (b)
+        for (let key in b)
+          mergeProp(out, b, void 0, key, inverseShorthands);
+      return out;
+    };
+    function mergeProp(out, a, b, key, inverseShorthands) {
+      let longhand = (inverseShorthands == null ? void 0 : inverseShorthands[key]) || null, val = a[key];
+      if (key in import_pseudoDescriptors.pseudoDescriptors || import_useMedia.mediaKeys.has(key)) {
+        out[key] = {
+          ...out[key],
+          ...val
         };
-      return {
-        state,
-        isNewTheme,
-        inversed,
-        themeManager
-      };
-      function createState(prev, force = !1) {
-        if (prev && (shouldUpdate == null ? void 0 : shouldUpdate()) === !1 && !force)
-          return prev;
-        let themeManager2 = parentManager, state2;
-        if ((0, import_ThemeManager.getHasThemeUpdatingProps)(props)) {
-          let getNewThemeManager = () => new import_ThemeManager.ThemeManager(props, isRoot ? "root" : parentManager);
-          if (prev != null && prev.themeManager) {
-            themeManager2 = prev.themeManager;
-            let forceChange = force || !!(keys != null && keys.length), next = themeManager2.getState(props, parentManager), nextState = getShouldUpdateTheme(
-              themeManager2,
-              next,
-              prev.state,
-              forceChange
-            );
-            nextState ? (state2 = nextState, prev.isNewTheme ? themeManager2.updateState(nextState) : themeManager2 = getNewThemeManager()) : prev.isNewTheme && parentManager && !next && (themeManager2 = parentManager);
-          } else
-            themeManager2 = getNewThemeManager(), state2 = { ...themeManager2.state };
-        }
-        let isNewTheme2 = !!(themeManager2 !== parentManager || props.inverse);
-        isNewTheme2 && registerThemeManager(themeManager2);
-        let mounted2 = props.inverse ? isRoot || (prev == null ? void 0 : prev.mounted) : !0;
-        state2 || (isNewTheme2 ? state2 = themeManager2.state : (state2 = parentManager.state, themeManager2 = parentManager));
-        let wasInversed = prev == null ? void 0 : prev.inversed, inversed2 = isNewTheme2 && state2.scheme !== (parentManager == null ? void 0 : parentManager.state.scheme) ? !0 : wasInversed != null ? !1 : null, response = {
-          themeManager: themeManager2,
-          isNewTheme: isNewTheme2,
-          mounted: mounted2,
-          inversed: inversed2
-        }, shouldReturnPrev = prev && !force && // isEqualShallow uses the second arg as the keys so this should compare without state first...
-        (0, import_createShallowSetState.isEqualShallow)(prev, response) && // ... and then compare just the state, because we make a new state obj but is likely the same
-        (0, import_createShallowSetState.isEqualShallow)(prev.state, state2);
-        if (prev && shouldReturnPrev)
-          return prev;
-        if (response.state = state2, process.env.NODE_ENV === "development" && props.debug && import_constants.isClient) {
-          console.groupCollapsed(` \u{1F537} ${themeManager2.id} useChangeThemeEffect createState`);
-          let parentState = { ...parentManager == null ? void 0 : parentManager.state }, parentId = parentManager == null ? void 0 : parentManager.id, themeManagerState = { ...themeManager2.state };
-          console.info({
-            props,
-            parentState,
-            parentId,
-            themeManager: themeManager2,
-            prev,
-            response,
-            themeManagerState
-          }), console.groupEnd();
-        }
-        return response;
+        return;
       }
-    };
+      b && (key in b || longhand && longhand in b) || (out[longhand || key] = val);
+    }
   }
 });