@tamagui/core 1.68.6 → 1.69.0

package/dist/native.js

@@ -1559,9 +1559,9 @@ var require_matchMedia_native = __commonJS({
   }
 });
 
-// ../web/dist/cjs/constants/isDevTools.native.js
-var require_isDevTools_native = __commonJS({
-  "../web/dist/cjs/constants/isDevTools.native.js"(exports, module2) {
+// ../web/dist/cjs/helpers/pseudoDescriptors.native.js
+var require_pseudoDescriptors_native = __commonJS({
+  "../web/dist/cjs/helpers/pseudoDescriptors.native.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
       for (var name in all)
@@ -1571,1088 +1571,335 @@ 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), pseudoDescriptors_exports = {};
+    __export2(pseudoDescriptors_exports, {
+      pseudoDescriptors: () => pseudoDescriptors,
+      pseudoDescriptorsBase: () => pseudoDescriptorsBase,
+      pseudoPriorities: () => pseudoPriorities
     });
-    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;
-    })();
+    module2.exports = __toCommonJS2(pseudoDescriptors_exports);
+    var pseudoDescriptorsBase = {
+      // order of keys here important! in priority order
+      hoverStyle: {
+        name: "hover",
+        priority: 1
+      },
+      pressStyle: {
+        name: "active",
+        stateKey: "press",
+        priority: 2
+      },
+      focusStyle: {
+        name: "focus",
+        priority: 3
+      }
+    }, pseudoPriorities = {
+      hover: 1,
+      press: 2,
+      focus: 3
+    }, pseudoDescriptors = {
+      ...pseudoDescriptorsBase,
+      enterStyle: {
+        name: "enter",
+        stateKey: "unmounted",
+        priority: 4
+      },
+      exitStyle: {
+        name: "exit",
+        priority: 5
+      }
+    };
   }
 });
 
-// ../web/dist/cjs/helpers/expandStyle.native.js
-var require_expandStyle_native = __commonJS({
-  "../web/dist/cjs/helpers/expandStyle.native.js"(exports, module2) {
+// ../web/dist/cjs/hooks/useMedia.native.js
+var require_useMedia_native = __commonJS({
+  "../web/dist/cjs/hooks/useMedia.native.js"(exports, module2) {
     "use strict";
-    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all2) => {
-      for (var name in all2)
-        __defProp2(target, name, { get: all2[name], enumerable: !0 });
+    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), expandStyle_exports = {};
-    __export2(expandStyle_exports, {
-      expandStyle: () => expandStyle
+    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), useMedia_exports = {};
+    __export2(useMedia_exports, {
+      configureMedia: () => configureMedia2,
+      getInitialMediaState: () => getInitialMediaState,
+      getMedia: () => getMedia2,
+      getMediaImportanceIfMoreImportant: () => getMediaImportanceIfMoreImportant,
+      getMediaKeyImportance: () => getMediaKeyImportance,
+      isMediaKey: () => isMediaKey,
+      mediaKeyMatch: () => mediaKeyMatch,
+      mediaKeyToQuery: () => mediaKeyToQuery,
+      mediaKeys: () => mediaKeys,
+      mediaObjectToString: () => mediaObjectToString2,
+      mediaQueryConfig: () => mediaQueryConfig2,
+      mediaState: () => mediaState2,
+      mergeMediaByImportance: () => mergeMediaByImportance,
+      setMediaShouldUpdate: () => setMediaShouldUpdate,
+      setupMediaListeners: () => setupMediaListeners,
+      useMedia: () => useMedia2,
+      useMediaListeners: () => useMediaListeners
     });
-    module2.exports = __toCommonJS2(expandStyle_exports);
-    var import_constants2 = require_index_native2();
-    function expandStyle(key, value) {
-      if (!1)
-        switch (key) {
-          case "textAlignVertical":
-          case "writingDirection":
+    module2.exports = __toCommonJS2(useMedia_exports);
+    var import_constants2 = require_index_native2(), import_react = require("react"), import_config = require_config_native(), import_createProxy = require_createProxy_native(), import_matchMedia = require_matchMedia_native(), import_pseudoDescriptors = require_pseudoDescriptors_native(), mediaState2 = (
+      // development only safeguard
+      process.env.NODE_ENV === "development" ? (0, import_createProxy.createProxy)(
+        {},
+        {
+          get(target, key) {
+            if (typeof key == "string" && key[0] === "$" && // dont error on $$typeof
+            key[1] !== "$")
+              throw new Error(`Access mediaState should not use "$": ${key}`);
+            return Reflect.get(target, key);
+          }
         }
-      if (import_constants2.isAndroid && key === "elevationAndroid")
-        return [["elevation", value]];
-      if (key in EXPANSIONS)
-        return EXPANSIONS[key].map((key2) => [key2, value]);
+      ) : {}
+    ), mediaQueryConfig2 = {}, getMedia2 = () => mediaState2, mediaKeys = /* @__PURE__ */ new Set(), isMediaKey = (key) => mediaKeys.has(key) || key[0] === "$" && (key.startsWith("$platform-") || key.startsWith("$theme-") || key.startsWith("$group-")), initState, getInitialMediaState = () => ((0, import_config.getConfig)().disableSSR ? mediaState2 : initState) || {}, defaultMediaImportance = Object.keys(import_pseudoDescriptors.pseudoDescriptors).length, mediaKeysOrdered, getMediaKeyImportance = (key) => {
+      if (process.env.NODE_ENV === "development" && key[0] === "$")
+        throw new Error("use short key");
+      return (0, import_config.getConfig)().settings.mediaPropOrder ? defaultMediaImportance : mediaKeysOrdered.indexOf(key) + 100;
+    }, dispose = /* @__PURE__ */ new Set(), mediaVersion = 0, configureMedia2 = (config) => {
+      let { media, mediaQueryDefaultActive } = config;
+      if (media) {
+        mediaVersion++;
+        for (let key in media)
+          mediaState2[key] = (mediaQueryDefaultActive == null ? void 0 : mediaQueryDefaultActive[key]) || !1, mediaKeys.add(`$${key}`);
+        Object.assign(mediaQueryConfig2, media), initState = { ...mediaState2 }, mediaKeysOrdered = Object.keys(media), config.disableSSR ? setupMediaListeners() : updateCurrentState();
+      }
+    };
+    function unlisten() {
+      dispose.forEach((cb) => cb()), dispose.clear();
     }
-    var all = ["Top", "Right", "Bottom", "Left"], horiz = ["Right", "Left"], vert = ["Top", "Bottom"], xy = ["X", "Y"], EXPANSIONS = {
-      borderColor: ["TopColor", "RightColor", "BottomColor", "LeftColor"],
-      borderRadius: [
-        "TopLeftRadius",
-        "TopRightRadius",
-        "BottomRightRadius",
-        "BottomLeftRadius"
-      ],
-      borderWidth: ["TopWidth", "RightWidth", "BottomWidth", "LeftWidth"],
-      margin: all,
-      marginHorizontal: horiz,
-      marginVertical: vert,
-      overscrollBehavior: xy,
-      padding: all,
-      paddingHorizontal: horiz,
-      paddingVertical: vert,
-      ...import_constants2.isWeb && {
-        // react-native only supports borderStyle
-        borderStyle: ["TopStyle", "RightStyle", "BottomStyle", "LeftStyle"],
-        // react-native doesn't support X / Y
-        overflow: xy
+    var setupVersion = -1;
+    function setupMediaListeners() {
+      if (setupVersion !== mediaVersion) {
+        setupVersion = mediaVersion, unlisten();
+        for (let key in mediaQueryConfig2) {
+          let update2 = function() {
+            let next = !!getMatch().matches;
+            next !== mediaState2[key] && (mediaState2 = { ...mediaState2, [key]: next }, updateCurrentState());
+          };
+          var update = update2;
+          let str = mediaObjectToString2(mediaQueryConfig2[key], key), getMatch = () => (0, import_matchMedia.matchMedia)(str), match = getMatch();
+          if (!match)
+            throw new Error("\u26A0\uFE0F No match");
+          match.addListener(update2), dispose.add(() => {
+            match.removeListener(update2);
+          }), update2();
+        }
       }
-    }, _a;
-    for (let parent in EXPANSIONS) {
-      let prefix = parent.slice(0, ((_a = /[A-Z]/.exec(parent)) == null ? void 0 : _a.index) ?? parent.length);
-      EXPANSIONS[parent] = EXPANSIONS[parent].map((k) => `${prefix}${k}`);
+    }
+    function useMediaListeners(config) {
+      config.disableSSR || (0, import_constants2.useIsomorphicLayoutEffect)(() => {
+        setupMediaListeners();
+      }, []);
+    }
+    var listeners = /* @__PURE__ */ new Set(), flushing = !1, flushVersion = -1;
+    function updateCurrentState() {
+      flushing && flushVersion === mediaVersion || (flushVersion = mediaVersion, flushing = !0, Promise.resolve().then(() => {
+        flushing = !1, listeners.forEach((cb) => cb(mediaState2));
+      }));
+    }
+    var shouldUpdate = /* @__PURE__ */ new WeakMap();
+    function setMediaShouldUpdate(ref, props) {
+      return shouldUpdate.set(ref, props);
+    }
+    function subscribe(subscriber) {
+      return listeners.add(subscriber), () => listeners.delete(subscriber);
+    }
+    function useMedia2(uid) {
+      let internal = (0, import_react.useRef)(), state = (0, import_react.useSyncExternalStore)(
+        subscribe,
+        () => {
+          if (!internal.current)
+            return initState;
+          let { touched, prev } = internal.current, componentState = uid ? shouldUpdate.get(uid) : void 0;
+          if (componentState && componentState.enabled === !1)
+            return prev;
+          let testKeys = (componentState == null ? void 0 : componentState.keys) ?? ((!componentState || componentState.enabled) && touched ? [...touched] : null);
+          return !testKeys || testKeys != null && testKeys.every((key) => mediaState2[key] === prev[key]) ? prev : (internal.current.prev = mediaState2, mediaState2);
+        },
+        () => initState
+      );
+      return new Proxy(state, {
+        get(_, key) {
+          return typeof key == "string" && (internal.current ||= { prev: initState }, internal.current.touched ||= /* @__PURE__ */ new Set(), internal.current.touched.add(key)), Reflect.get(state, key);
+        }
+      });
+    }
+    var getMediaImportanceIfMoreImportant = (mediaKey, key, importancesUsed, isSizeMedia) => {
+      let conf = (0, import_config.getConfig)(), importance = isSizeMedia && !conf.settings.mediaPropOrder ? getMediaKeyImportance(mediaKey) : defaultMediaImportance;
+      return !importancesUsed[key] || importance > importancesUsed[key] ? importance : null;
+    };
+    function mergeMediaByImportance(onto, mediaKey, key, value, importancesUsed, isSizeMedia, importanceBump) {
+      let importance = getMediaImportanceIfMoreImportant(
+        mediaKey,
+        key,
+        importancesUsed,
+        isSizeMedia
+      );
+      return importanceBump && (importance = (importance || 0) + importanceBump), importance === null ? !1 : (importancesUsed[key] = importance, onto[key] = value, !0);
+    }
+    function camelToHyphen(str) {
+      return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`).toLowerCase();
+    }
+    var cache = /* @__PURE__ */ new WeakMap(), cachedMediaKeyToQuery = {};
+    function mediaObjectToString2(query, key) {
+      if (typeof query == "string")
+        return query;
+      if (cache.has(query))
+        return cache.get(query);
+      let res = Object.entries(query).map(([feature, value]) => (feature = camelToHyphen(feature), typeof value == "string" ? `(${feature}: ${value})` : (typeof value == "number" && /[height|width]$/.test(feature) && (value = `${value}px`), `(${feature}: ${value})`))).join(" and ");
+      return key && (cachedMediaKeyToQuery[key] = res), cache.set(query, res), res;
+    }
+    function mediaKeyToQuery(key) {
+      return cachedMediaKeyToQuery[key] || mediaObjectToString2(mediaQueryConfig2[key], key);
+    }
+    function mediaKeyMatch(key, dimensions) {
+      let mediaQueries = mediaQueryConfig2[key];
+      return Object.keys(mediaQueries).every((query) => {
+        let expectedVal = +mediaQueries[query], isMax = query.startsWith("max"), isWidth = query.endsWith("Width"), givenVal = dimensions[isWidth ? "width" : "height"];
+        return isMax ? givenVal < expectedVal : givenVal > expectedVal;
+      });
     }
   }
 });
 
-// ../../node_modules/@react-native/normalize-color/index.js
-var require_normalize_color = __commonJS({
-  "../../node_modules/@react-native/normalize-color/index.js"(exports, module2) {
+// ../web/dist/cjs/Tamagui.native.js
+var require_Tamagui_native = __commonJS({
+  "../web/dist/cjs/Tamagui.native.js"(exports, 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 __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;
       }
-      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})$/,
-        hex6: /^#([0-9a-fA-F]{6})$/,
-        hex8: /^#([0-9a-fA-F]{8})$/
-      }), cachedMatchers;
+      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"(exports, 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 parse255(str) {
-      let int = parseInt(str, 10);
-      return int < 0 ? 0 : int > 255 ? 255 : int;
+    function composeRefs(...refs) {
+      return (node) => refs.forEach((ref) => setRef(ref, node));
     }
-    function parse360(str) {
-      return (parseFloat(str) % 360 + 360) % 360 / 360;
+    function useComposedRefs(...refs) {
+      return React.useCallback(composeRefs(...refs), refs);
     }
-    function parse1(str) {
-      let num = parseFloat(str);
-      return num < 0 ? 0 : num > 1 ? 255 : Math.round(num * 255);
+  }
+});
+
+// ../compose-refs/dist/cjs/index.native.js
+var require_index_native5 = __commonJS({
+  "../compose-refs/dist/cjs/index.native.js"(exports, 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"(exports, module2) {
+    "use strict";
+    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
+      for (var name in all)
+        __defProp2(target, name, { get: all[name], enumerable: !0 });
+    }, __copyProps2 = (to, from, except, desc) => {
+      if (from && typeof from == "object" || typeof from == "function")
+        for (let key of __getOwnPropNames2(from))
+          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
+      return to;
+    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), src_exports2 = {};
+    __export2(src_exports2, {
+      useClientValue: () => useClientValue,
+      useDidFinishSSR: () => useDidFinishSSR
+    });
+    module2.exports = __toCommonJS2(src_exports2);
+    var import_react = require("react");
+    function useDidFinishSSR(value) {
+      return value ?? !0;
     }
-    function parsePercentage(str) {
-      let int = parseFloat(str);
-      return int < 0 ? 0 : int > 100 ? 1 : int / 100;
-    }
-    function normalizeKeyword(name) {
-      switch (name) {
-        case "transparent":
-          return 0;
-        case "aliceblue":
-          return 4042850303;
-        case "antiquewhite":
-          return 4209760255;
-        case "aqua":
-          return 16777215;
-        case "aquamarine":
-          return 2147472639;
-        case "azure":
-          return 4043309055;
-        case "beige":
-          return 4126530815;
-        case "bisque":
-          return 4293182719;
-        case "black":
-          return 255;
-        case "blanchedalmond":
-          return 4293643775;
-        case "blue":
-          return 65535;
-        case "blueviolet":
-          return 2318131967;
-        case "brown":
-          return 2771004159;
-        case "burlywood":
-          return 3736635391;
-        case "burntsienna":
-          return 3934150143;
-        case "cadetblue":
-          return 1604231423;
-        case "chartreuse":
-          return 2147418367;
-        case "chocolate":
-          return 3530104575;
-        case "coral":
-          return 4286533887;
-        case "cornflowerblue":
-          return 1687547391;
-        case "cornsilk":
-          return 4294499583;
-        case "crimson":
-          return 3692313855;
-        case "cyan":
-          return 16777215;
-        case "darkblue":
-          return 35839;
-        case "darkcyan":
-          return 9145343;
-        case "darkgoldenrod":
-          return 3095792639;
-        case "darkgray":
-          return 2846468607;
-        case "darkgreen":
-          return 6553855;
-        case "darkgrey":
-          return 2846468607;
-        case "darkkhaki":
-          return 3182914559;
-        case "darkmagenta":
-          return 2332068863;
-        case "darkolivegreen":
-          return 1433087999;
-        case "darkorange":
-          return 4287365375;
-        case "darkorchid":
-          return 2570243327;
-        case "darkred":
-          return 2332033279;
-        case "darksalmon":
-          return 3918953215;
-        case "darkseagreen":
-          return 2411499519;
-        case "darkslateblue":
-          return 1211993087;
-        case "darkslategray":
-          return 793726975;
-        case "darkslategrey":
-          return 793726975;
-        case "darkturquoise":
-          return 13554175;
-        case "darkviolet":
-          return 2483082239;
-        case "deeppink":
-          return 4279538687;
-        case "deepskyblue":
-          return 12582911;
-        case "dimgray":
-          return 1768516095;
-        case "dimgrey":
-          return 1768516095;
-        case "dodgerblue":
-          return 512819199;
-        case "firebrick":
-          return 2988581631;
-        case "floralwhite":
-          return 4294635775;
-        case "forestgreen":
-          return 579543807;
-        case "fuchsia":
-          return 4278255615;
-        case "gainsboro":
-          return 3705462015;
-        case "ghostwhite":
-          return 4177068031;
-        case "gold":
-          return 4292280575;
-        case "goldenrod":
-          return 3668254975;
-        case "gray":
-          return 2155905279;
-        case "green":
-          return 8388863;
-        case "greenyellow":
-          return 2919182335;
-        case "grey":
-          return 2155905279;
-        case "honeydew":
-          return 4043305215;
-        case "hotpink":
-          return 4285117695;
-        case "indianred":
-          return 3445382399;
-        case "indigo":
-          return 1258324735;
-        case "ivory":
-          return 4294963455;
-        case "khaki":
-          return 4041641215;
-        case "lavender":
-          return 3873897215;
-        case "lavenderblush":
-          return 4293981695;
-        case "lawngreen":
-          return 2096890111;
-        case "lemonchiffon":
-          return 4294626815;
-        case "lightblue":
-          return 2916673279;
-        case "lightcoral":
-          return 4034953471;
-        case "lightcyan":
-          return 3774873599;
-        case "lightgoldenrodyellow":
-          return 4210742015;
-        case "lightgray":
-          return 3553874943;
-        case "lightgreen":
-          return 2431553791;
-        case "lightgrey":
-          return 3553874943;
-        case "lightpink":
-          return 4290167295;
-        case "lightsalmon":
-          return 4288707327;
-        case "lightseagreen":
-          return 548580095;
-        case "lightskyblue":
-          return 2278488831;
-        case "lightslategray":
-          return 2005441023;
-        case "lightslategrey":
-          return 2005441023;
-        case "lightsteelblue":
-          return 2965692159;
-        case "lightyellow":
-          return 4294959359;
-        case "lime":
-          return 16711935;
-        case "limegreen":
-          return 852308735;
-        case "linen":
-          return 4210091775;
-        case "magenta":
-          return 4278255615;
-        case "maroon":
-          return 2147483903;
-        case "mediumaquamarine":
-          return 1724754687;
-        case "mediumblue":
-          return 52735;
-        case "mediumorchid":
-          return 3126187007;
-        case "mediumpurple":
-          return 2473647103;
-        case "mediumseagreen":
-          return 1018393087;
-        case "mediumslateblue":
-          return 2070474495;
-        case "mediumspringgreen":
-          return 16423679;
-        case "mediumturquoise":
-          return 1221709055;
-        case "mediumvioletred":
-          return 3340076543;
-        case "midnightblue":
-          return 421097727;
-        case "mintcream":
-          return 4127193855;
-        case "mistyrose":
-          return 4293190143;
-        case "moccasin":
-          return 4293178879;
-        case "navajowhite":
-          return 4292783615;
-        case "navy":
-          return 33023;
-        case "oldlace":
-          return 4260751103;
-        case "olive":
-          return 2155872511;
-        case "olivedrab":
-          return 1804477439;
-        case "orange":
-          return 4289003775;
-        case "orangered":
-          return 4282712319;
-        case "orchid":
-          return 3664828159;
-        case "palegoldenrod":
-          return 4008225535;
-        case "palegreen":
-          return 2566625535;
-        case "paleturquoise":
-          return 2951671551;
-        case "palevioletred":
-          return 3681588223;
-        case "papayawhip":
-          return 4293907967;
-        case "peachpuff":
-          return 4292524543;
-        case "peru":
-          return 3448061951;
-        case "pink":
-          return 4290825215;
-        case "plum":
-          return 3718307327;
-        case "powderblue":
-          return 2967529215;
-        case "purple":
-          return 2147516671;
-        case "rebeccapurple":
-          return 1714657791;
-        case "red":
-          return 4278190335;
-        case "rosybrown":
-          return 3163525119;
-        case "royalblue":
-          return 1097458175;
-        case "saddlebrown":
-          return 2336560127;
-        case "salmon":
-          return 4202722047;
-        case "sandybrown":
-          return 4104413439;
-        case "seagreen":
-          return 780883967;
-        case "seashell":
-          return 4294307583;
-        case "sienna":
-          return 2689740287;
-        case "silver":
-          return 3233857791;
-        case "skyblue":
-          return 2278484991;
-        case "slateblue":
-          return 1784335871;
-        case "slategray":
-          return 1887473919;
-        case "slategrey":
-          return 1887473919;
-        case "snow":
-          return 4294638335;
-        case "springgreen":
-          return 16744447;
-        case "steelblue":
-          return 1182971135;
-        case "tan":
-          return 3535047935;
-        case "teal":
-          return 8421631;
-        case "thistle":
-          return 3636451583;
-        case "tomato":
-          return 4284696575;
-        case "turquoise":
-          return 1088475391;
-        case "violet":
-          return 4001558271;
-        case "wheat":
-          return 4125012991;
-        case "white":
-          return 4294967295;
-        case "whitesmoke":
-          return 4126537215;
-        case "yellow":
-          return 4294902015;
-        case "yellowgreen":
-          return 2597139199;
-      }
-      return null;
-    }
-    module2.exports = normalizeColor;
-  }
-});
-
-// ../normalize-css-color/dist/cjs/index.native.js
-var require_index_native5 = __commonJS({
-  "../normalize-css-color/dist/cjs/index.native.js"(exports, 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), src_exports2 = {};
-    __export2(src_exports2, {
-      default: () => src_default,
-      normalizeCSSColor: () => normalizeCSSColor,
-      rgba: () => rgba2
-    });
-    module2.exports = __toCommonJS2(src_exports2);
-    var normalizeColor = __toESM2(require_normalize_color()), norm = normalizeColor.default || normalizeColor, normalizeCSSColor = norm;
-    function rgba2(colorInt) {
-      var r = Math.round((colorInt & 4278190080) >>> 24), g = Math.round((colorInt & 16711680) >>> 16), b = Math.round((colorInt & 65280) >>> 8), a = ((colorInt & 255) >>> 0) / 255;
-      return {
-        r,
-        g,
-        b,
-        a
-      };
-    }
-    var src_default = normalizeCSSColor;
-  }
-});
-
-// ../web/dist/cjs/helpers/defaultOffset.native.js
-var require_defaultOffset_native = __commonJS({
-  "../web/dist/cjs/helpers/defaultOffset.native.js"(exports, module2) {
-    "use strict";
-    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
-      for (var name in all)
-        __defProp2(target, name, { get: all[name], enumerable: !0 });
-    }, __copyProps2 = (to, from, except, desc) => {
-      if (from && typeof from == "object" || typeof from == "function")
-        for (let key of __getOwnPropNames2(from))
-          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
-      return to;
-    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), defaultOffset_exports = {};
-    __export2(defaultOffset_exports, {
-      defaultOffset: () => defaultOffset
-    });
-    module2.exports = __toCommonJS2(defaultOffset_exports);
-    var defaultOffset = { height: 0, width: 0 };
-  }
-});
-
-// ../web/dist/cjs/helpers/normalizeColor.native.js
-var require_normalizeColor_native = __commonJS({
-  "../web/dist/cjs/helpers/normalizeColor.native.js"(exports, module2) {
-    "use strict";
-    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
-      for (var name in all)
-        __defProp2(target, name, { get: all[name], enumerable: !0 });
-    }, __copyProps2 = (to, from, except, desc) => {
-      if (from && typeof from == "object" || typeof from == "function")
-        for (let key of __getOwnPropNames2(from))
-          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
-      return to;
-    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), normalizeColor_exports = {};
-    __export2(normalizeColor_exports, {
-      normalizeColor: () => normalizeColor,
-      rgba: () => import_normalize_css_color2.rgba
-    });
-    module2.exports = __toCommonJS2(normalizeColor_exports);
-    var import_constants2 = require_index_native2(), import_normalize_css_color = require_index_native5(), import_normalize_css_color2 = require_index_native5(), normalizeColor = (color, opacity) => {
-      if (!color)
-        return;
-      if (color[0] === "$" || color[0] === "v" && color.startsWith("var(") || import_constants2.isWeb && opacity === 1)
-        return color;
-      let colorProcessed = (0, import_normalize_css_color.normalizeCSSColor)(color);
-      if (colorProcessed != null) {
-        let { r, g, b, a } = (0, import_normalize_css_color.rgba)(colorProcessed), alpha = (opacity ?? a ?? 1).toFixed(2);
-        return `rgba(${r},${g},${b},${alpha})`;
-      }
-      process.env.NODE_ENV === "development" && console.warn(`Unknown color value: ${color}`);
-    };
-  }
-});
-
-// ../web/dist/cjs/helpers/normalizeValueWithProperty.native.js
-var require_normalizeValueWithProperty_native = __commonJS({
-  "../web/dist/cjs/helpers/normalizeValueWithProperty.native.js"(exports, module2) {
-    "use strict";
-    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
-      for (var name in all)
-        __defProp2(target, name, { get: all[name], enumerable: !0 });
-    }, __copyProps2 = (to, from, except, desc) => {
-      if (from && typeof from == "object" || typeof from == "function")
-        for (let key of __getOwnPropNames2(from))
-          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
-      return to;
-    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), normalizeValueWithProperty_exports = {};
-    __export2(normalizeValueWithProperty_exports, {
-      normalizeValueWithProperty: () => normalizeValueWithProperty,
-      reverseMapClassNameToValue: () => reverseMapClassNameToValue
-    });
-    module2.exports = __toCommonJS2(normalizeValueWithProperty_exports);
-    var import_constants2 = require_index_native2(), import_helpers = require_index_native4(), import_insertStyleRule = require_insertStyleRule_native(), stylePropsAllPlusTransforms = {
-      ...import_helpers.stylePropsAll,
-      translateX: !0,
-      translateY: !0
-    };
-    function normalizeValueWithProperty(value, property) {
-      if (!import_constants2.isWeb || typeof value == "boolean" || property && property in import_helpers.stylePropsUnitless || property && !(property in stylePropsAllPlusTransforms))
-        return value;
-      let res = value;
-      return value && typeof value == "object" ? value : (typeof value == "number" ? res = `${value}px` : property && (res = `${res}`), res);
-    }
-    var rcache = {};
-    function reverseMapClassNameToValue(key, className) {
-      let cssRule = (0, import_insertStyleRule.getAllSelectors)()[className];
-      if (rcache[cssRule])
-        return rcache[cssRule];
-      if (!cssRule) {
-        process.env.NODE_ENV === "development" && console.warn(
-          `No CSS rule found for ${key} looking for selector ".${className}", you may not be injecting extracted CSS`
-        );
-        return;
-      }
-      let cssVal = cssRule.replace(/.*:/, "").replace(/;.*/, "").trim(), res;
-      return cssVal.startsWith("var(") ? res = cssVal : import_helpers.stylePropsUnitless[key] ? res = +cssVal : cssVal.endsWith("px") ? res = +cssVal.replace("px", "") : res = cssVal, rcache[cssRule] = res, process.env.NODE_ENV === "development" && typeof res == "number" && isNaN(res) && console.log("Tamagui invalid parsed value, NaN:", {
-        res,
-        cssVal,
-        cssRule,
-        key,
-        className
-      }), res;
-    }
-  }
-});
-
-// ../web/dist/cjs/helpers/normalizeShadow.native.js
-var require_normalizeShadow_native = __commonJS({
-  "../web/dist/cjs/helpers/normalizeShadow.native.js"(exports, module2) {
-    "use strict";
-    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
-      for (var name in all)
-        __defProp2(target, name, { get: all[name], enumerable: !0 });
-    }, __copyProps2 = (to, from, except, desc) => {
-      if (from && typeof from == "object" || typeof from == "function")
-        for (let key of __getOwnPropNames2(from))
-          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
-      return to;
-    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), normalizeShadow_native_exports = {};
-    __export2(normalizeShadow_native_exports, {
-      normalizeShadow: () => normalizeShadow
-    });
-    module2.exports = __toCommonJS2(normalizeShadow_native_exports);
-    var import_normalize_css_color = require_index_native5(), import_defaultOffset = require_defaultOffset_native(), import_normalizeColor = require_normalizeColor_native(), import_normalizeValueWithProperty = require_normalizeValueWithProperty_native();
-    function normalizeShadow({
-      shadowColor,
-      shadowOffset,
-      shadowOpacity,
-      shadowRadius
-    }) {
-      let { height, width } = shadowOffset || import_defaultOffset.defaultOffset, colorStr = String(shadowColor || "black"), val = (0, import_normalize_css_color.normalizeCSSColor)(colorStr);
-      if (typeof val != "number")
-        throw new Error(`invalid shadow color ${colorStr}`);
-      let { r, g, b, a } = (0, import_normalizeColor.rgba)(val);
-      return {
-        shadowOffset: {
-          width: (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(width || 0),
-          height: (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(height || 0)
-        },
-        shadowRadius: (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(shadowRadius || 0),
-        shadowColor: `rgb(${r},${g},${b})`,
-        shadowOpacity: shadowOpacity ?? a
-      };
-    }
-  }
-});
-
-// ../web/dist/cjs/helpers/pseudoDescriptors.native.js
-var require_pseudoDescriptors_native = __commonJS({
-  "../web/dist/cjs/helpers/pseudoDescriptors.native.js"(exports, module2) {
-    "use strict";
-    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
-      for (var name in all)
-        __defProp2(target, name, { get: all[name], enumerable: !0 });
-    }, __copyProps2 = (to, from, except, desc) => {
-      if (from && typeof from == "object" || typeof from == "function")
-        for (let key of __getOwnPropNames2(from))
-          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
-      return to;
-    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), pseudoDescriptors_exports = {};
-    __export2(pseudoDescriptors_exports, {
-      pseudoDescriptors: () => pseudoDescriptors,
-      pseudoDescriptorsBase: () => pseudoDescriptorsBase,
-      pseudoPriorities: () => pseudoPriorities
-    });
-    module2.exports = __toCommonJS2(pseudoDescriptors_exports);
-    var pseudoDescriptorsBase = {
-      // order of keys here important! in priority order
-      hoverStyle: {
-        name: "hover",
-        priority: 1
-      },
-      pressStyle: {
-        name: "active",
-        stateKey: "press",
-        priority: 2
-      },
-      focusStyle: {
-        name: "focus",
-        priority: 3
-      }
-    }, pseudoPriorities = {
-      hover: 1,
-      press: 2,
-      focus: 3
-    }, pseudoDescriptors = {
-      ...pseudoDescriptorsBase,
-      enterStyle: {
-        name: "enter",
-        stateKey: "unmounted",
-        priority: 4
-      },
-      exitStyle: {
-        name: "exit",
-        priority: 5
-      }
-    };
-  }
-});
-
-// ../web/dist/cjs/helpers/expandStyles.native.js
-var require_expandStyles_native = __commonJS({
-  "../web/dist/cjs/helpers/expandStyles.native.js"(exports, module2) {
-    "use strict";
-    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
-      for (var name in all)
-        __defProp2(target, name, { get: all[name], enumerable: !0 });
-    }, __copyProps2 = (to, from, except, desc) => {
-      if (from && typeof from == "object" || typeof from == "function")
-        for (let key of __getOwnPropNames2(from))
-          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
-      return to;
-    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), expandStyles_exports = {};
-    __export2(expandStyles_exports, {
-      expandStylesAndRemoveNullishValues: () => expandStylesAndRemoveNullishValues,
-      fixStyles: () => fixStyles
-    });
-    module2.exports = __toCommonJS2(expandStyles_exports);
-    var import_constants2 = require_index_native2(), import_expandStyle = require_expandStyle_native(), import_normalizeShadow = require_normalizeShadow_native(), import_normalizeValueWithProperty = require_normalizeValueWithProperty_native(), import_pseudoDescriptors = require_pseudoDescriptors_native();
-    function expandStylesAndRemoveNullishValues(style) {
-      let res = {};
-      for (let key in style) {
-        let valIn = style[key];
-        if (valIn == null)
-          continue;
-        if (key in import_pseudoDescriptors.pseudoDescriptors) {
-          res[key] = expandStylesAndRemoveNullishValues(valIn);
-          continue;
-        }
-        let val = (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(valIn, key), out = (0, import_expandStyle.expandStyle)(key, val);
-        out ? Object.assign(res, Object.fromEntries(out)) : res[key] = val;
-      }
-      return fixStyles(res), res;
-    }
-    function fixStyles(style) {
-      "elevationAndroid" in style && (style.elevation = style.elevationAndroid, delete style.elevationAndroid), (style.shadowRadius || style.shadowColor || style.shadowOpacity || style.shadowOffset) && Object.assign(style, (0, import_normalizeShadow.normalizeShadow)(style));
-      for (let key in borderDefaults)
-        key in style && !style[borderDefaults[key]] && (style[borderDefaults[key]] = "solid");
-    }
-    var nativeStyle = import_constants2.isWeb ? null : "borderStyle", borderDefaults = {
-      borderWidth: "borderStyle",
-      borderBottomWidth: nativeStyle || "borderBottomStyle",
-      borderTopWidth: nativeStyle || "borderTopStyle",
-      borderLeftWidth: nativeStyle || "borderLeftStyle",
-      borderRightWidth: nativeStyle || "borderRightStyle"
-    };
-  }
-});
-
-// ../web/dist/cjs/helpers/getVariantExtras.native.js
-var require_getVariantExtras_native = __commonJS({
-  "../web/dist/cjs/helpers/getVariantExtras.native.js"(exports, module2) {
-    "use strict";
-    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
-      for (var name in all)
-        __defProp2(target, name, { get: all[name], enumerable: !0 });
-    }, __copyProps2 = (to, from, except, desc) => {
-      if (from && typeof from == "object" || typeof from == "function")
-        for (let key of __getOwnPropNames2(from))
-          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
-      return to;
-    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), getVariantExtras_exports = {};
-    __export2(getVariantExtras_exports, {
-      getFontsForLanguage: () => getFontsForLanguage,
-      getVariantExtras: () => getVariantExtras
-    });
-    module2.exports = __toCommonJS2(getVariantExtras_exports);
-    var import_createVariable = require_createVariable_native(), import_createProxy = require_createProxy_native();
-    function getVariantExtras(styleState) {
-      let { curProps, conf, context, theme } = styleState, fonts = conf.fontsParsed;
-      context != null && context.language && (fonts = getFontsForLanguage(conf.fontsParsed, context.language));
-      let fontFamily = (0, import_createVariable.getVariableValue)(
-        styleState.fontFamily || styleState.curProps.fontFamily || styleState.conf.defaultFont
-      );
-      return {
-        fonts,
-        tokens: conf.tokensParsed,
-        theme,
-        fontFamily,
-        font: fonts[fontFamily] || fonts[styleState.conf.defaultFont],
-        // TODO do this in splitstlye
-        // we avoid passing in default props for media queries because that would confuse things like SizableText.size:
-        props: (0, import_createProxy.createProxy)(curProps, {
-          // handles shorthands
-          get(target, key) {
-            let shorthand = conf.inverseShorthands[key];
-            if (shorthand && Reflect.has(target, shorthand))
-              return Reflect.get(target, shorthand);
-            if (Reflect.has(target, key))
-              return Reflect.get(target, key);
-          }
-        })
-      };
-    }
-    var fontLanguageCache = /* @__PURE__ */ new WeakMap();
-    function getFontsForLanguage(fonts, language) {
-      if (fontLanguageCache.has(language))
-        return fontLanguageCache.get(language);
-      let next = {
-        ...fonts,
-        ...Object.fromEntries(
-          Object.entries(language).map(([name, lang]) => {
-            if (lang === "default")
-              return [];
-            let langKey = `$${name}_${lang}`;
-            return [`$${name}`, fonts[langKey]];
-          })
-        )
-      };
-      return fontLanguageCache.set(language, next), next;
-    }
-  }
-});
-
-// ../web/dist/cjs/helpers/isObj.native.js
-var require_isObj_native = __commonJS({
-  "../web/dist/cjs/helpers/isObj.native.js"(exports, module2) {
-    "use strict";
-    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
-      for (var name in all)
-        __defProp2(target, name, { get: all[name], enumerable: !0 });
-    }, __copyProps2 = (to, from, except, desc) => {
-      if (from && typeof from == "object" || typeof from == "function")
-        for (let key of __getOwnPropNames2(from))
-          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
-      return to;
-    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), isObj_exports = {};
-    __export2(isObj_exports, {
-      isObj: () => isObj
-    });
-    module2.exports = __toCommonJS2(isObj_exports);
-    var isObj = (x) => x && !Array.isArray(x) && typeof x == "object";
-  }
-});
-
-// ../web/dist/cjs/helpers/propMapper.native.js
-var require_propMapper_native = __commonJS({
-  "../web/dist/cjs/helpers/propMapper.native.js"(exports, module2) {
-    "use strict";
-    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
-      for (var name in all)
-        __defProp2(target, name, { get: all[name], enumerable: !0 });
-    }, __copyProps2 = (to, from, except, desc) => {
-      if (from && typeof from == "object" || typeof from == "function")
-        for (let key of __getOwnPropNames2(from))
-          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
-      return to;
-    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), propMapper_exports = {};
-    __export2(propMapper_exports, {
-      getFontFamilyFromNameOrVariable: () => getFontFamilyFromNameOrVariable,
-      getPropMappedFontFamily: () => getPropMappedFontFamily,
-      getTokenForKey: () => getTokenForKey,
-      propMapper: () => propMapper
-    });
-    module2.exports = __toCommonJS2(propMapper_exports);
-    var import_constants2 = require_index_native2(), 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_expandStyles = require_expandStyles_native(), import_getVariantExtras = require_getVariantExtras_native(), import_isObj = require_isObj_native(), import_pseudoDescriptors = require_pseudoDescriptors_native(), propMapper = (key, value, styleStateIn, subPropsIn) => {
-      if (!import_constants2.isAndroid && key === "elevationAndroid")
-        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(
-          ", "
-        )}`
-      ), variants && key in variants) {
-        styleState.curProps[key] = value;
-        let variantValue = resolveVariants(key, value, styleProps, styleState, "");
-        if (variantValue)
-          return variantValue;
-      }
-      let shouldReturn = !1;
-      if (key in conf.shorthands && (shouldReturn = !0, key = conf.shorthands[key]), value && (value[0] === "$" ? value = getTokenForKey(key, value, styleProps.resolveVariablesAs, styleState) : (0, import_createVariable.isVariable)(value) && (value = resolveVariableValue(value, styleProps.resolveVariablesAs))), shouldReturn || value != null)
-        return (0, import_expandStyle.expandStyle)(key, value) || [[key, value]];
-    }, resolveVariants = (key, value, styleProps, styleState, parentVariantKey) => {
-      let { staticConfig, conf, debug } = styleState, { variants } = staticConfig;
-      if (!variants)
-        return;
-      let variantValue = getVariantDefinition(variants[key], key, value, conf);
-      if (process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupCollapsed(`\u2666\uFE0F\u2666\uFE0F\u2666\uFE0F resolve variant ${key}`), console.log({
-        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.log({ 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.log("   updating font family", fontFamilyResult)), variantValue = resolveTokensAndVariants(
-          key,
-          variantValue,
-          styleProps,
-          styleState,
-          parentVariantKey
-        );
-      }
-      if (variantValue) {
-        let expanded = (0, import_expandStyles.expandStylesAndRemoveNullishValues)(variantValue), 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.log("   - resolveTokensAndVariants", key, value);
-      for (let rKey in value) {
-        let fKey = conf.shorthands[rKey] || rKey, val = value[rKey];
-        if (variants && fKey in variants) {
-          if (styleState.curProps[fKey] = val, parentVariantKey && parentVariantKey === key)
-            res[fKey] = // SYNC WITH *1
-            val[0] === "$" ? getTokenForKey(fKey, val, styleProps.resolveVariablesAs, styleState) : val;
-          else {
-            let variantOut = resolveVariants(fKey, 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[fKey] = resolveVariableValue(val, styleProps.resolveVariablesAs);
-          continue;
-        }
-        if (typeof val == "string") {
-          let fVal = (
-            // SYNC WITH *1
-            val[0] === "$" ? getTokenForKey(fKey, val, styleProps.resolveVariablesAs, styleState) : val
-          );
-          res[fKey] = fVal;
-          continue;
-        }
-        if ((0, import_isObj.isObj)(val)) {
-          let subObject = resolveTokensAndVariants(fKey, val, styleProps, styleState, key);
-          process.env.NODE_ENV === "development" && debug === "verbose" && console.log("object", fKey, subObject), res[fKey] ??= {}, Object.assign(res[fKey], subObject);
-        } else
-          res[fKey] = val;
-        process.env.NODE_ENV === "development" && debug && ((_a = res[fKey]) == null ? void 0 : _a[0]) === "$" && console.warn(`\u26A0\uFE0F Missing token in theme ${theme.name}:`, fKey, res[fKey], theme);
-      }
-      return res;
-    }, tokenCats = ["size", "color", "radius", "space", "zIndex"].map((name) => ({
-      name,
-      spreadName: `...${name}`
-    }));
-    function getVariantDefinition(variant, key, value, conf) {
-      if (typeof variant == "function")
-        return variant;
-      if (variant[value])
-        return variant[value];
-      let { tokensParsed } = conf;
-      for (let { name, spreadName } of tokenCats)
-        if (spreadName in variant && value in tokensParsed[name])
-          return variant[spreadName];
-      let fontSizeVariant = variant["...fontSize"];
-      return fontSizeVariant && conf.fontSizeTokens.has(value) ? fontSizeVariant : variant[`:${typeof value}`] || variant["..."] || variant["...size"];
-    }
-    var fontShorthand = {
-      fontSize: "size",
-      fontWeight: "weight"
-    }, getTokenForKey = (key, value, resolveAs = "none", styleState) => {
-      var _a, _b;
-      if (resolveAs === "none")
-        return value;
-      let { theme, conf = (0, import_config.getConfig)(), context, fontFamily } = styleState, tokensParsed = conf.tokensParsed, valOrVar, hasSet = !1;
-      if (theme && value in theme)
-        process.env.NODE_ENV === "development" && styleState.debug === "verbose" && console.log(` - getting theme value for ${key} from ${value}`), valOrVar = theme[value], hasSet = !0;
-      else if (value in conf.specificTokens)
-        hasSet = !0, valOrVar = conf.specificTokens[value];
-      else {
-        switch (key) {
-          case "fontFamily": {
-            valOrVar = ((_a = (context != null && context.language ? (0, import_getVariantExtras.getFontsForLanguage)(conf.fontsParsed, context.language) : conf.fontsParsed)[value]) == null ? void 0 : _a.family) || 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 = ((_b = font == null ? void 0 : font[fontShorthand[key] || key]) == null ? void 0 : _b[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);
-        }
-      }
-      return hasSet ? resolveVariableValue(valOrVar, resolveAs) : (process.env.NODE_ENV === "development" && import_isDevTools.isDevTools && styleState.debug === "verbose" && (console.groupCollapsed("  \uFE52 propMap (val)", key, value), console.log({ valOrVar, theme, hasSet }, theme ? theme[key] : ""), console.groupEnd()), value);
-    };
-    function resolveVariableValue(valOrVar, resolveVariablesAs) {
-      return resolveVariablesAs === "none" ? valOrVar : (0, import_createVariable.isVariable)(valOrVar) ? !import_constants2.isWeb || resolveVariablesAs === "value" ? valOrVar.val : valOrVar.variable : valOrVar;
+    function useClientValue(value) {
+      return useDidFinishSSR() ? typeof value == "function" ? value() : value : void 0;
     }
   }
 });
@@ -2682,9 +1929,9 @@ var require_constants_native = __commonJS({
   }
 });
 
-// ../web/dist/cjs/helpers/ThemeManager.native.js
-var require_ThemeManager_native = __commonJS({
-  "../web/dist/cjs/helpers/ThemeManager.native.js"(exports, module2) {
+// ../web/dist/cjs/helpers/objectIdentityKey.native.js
+var require_objectIdentityKey_native = __commonJS({
+  "../web/dist/cjs/helpers/objectIdentityKey.native.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
       for (var name in all)
@@ -2694,160 +1941,77 @@ 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,
-      getNonComponentParentManager: () => getNonComponentParentManager
+    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), objectIdentityKey_exports = {};
+    __export2(objectIdentityKey_exports, {
+      objectIdentityKey: () => objectIdentityKey
     });
-    module2.exports = __toCommonJS2(ThemeManager_exports);
-    var import_constants2 = require_index_native2(), import_config = require_config_native(), import_constants22 = require_constants_native(), emptyState = { name: "" };
-    function getHasThemeUpdatingProps(props) {
-      return props.name || props.componentName || props.inverse || props.reset;
-    }
-    var uid = 0, ThemeManager = class {
-      constructor(props = {}, parentManagerIn) {
-        if (this.props = props, this.id = uid++, this.isComponent = !1, this.themeListeners = /* @__PURE__ */ new Set(), this.parentManager = null, this.state = emptyState, this.scheme = null, this._allKeys = null, parentManagerIn === "root") {
-          this.updateStateFromProps(props, !1);
-          return;
+    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")
+          k += type + arg;
+        else if (cache.has(arg))
+          k += cache.get(arg);
+        else {
+          let v = Math.random();
+          cache.set(arg, v), k += v;
         }
-        if (!parentManagerIn)
-          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 0";
-        if (this.parentManager = parentManagerIn, !this.updateStateFromProps(props, !1))
-          return parentManagerIn || this;
-      }
-      updateStateFromProps(props = this.props || {}, shouldNotify = !0) {
-        if (this.props = props, props.forceTheme)
-          return this.state.theme = props.forceTheme, this.state.name = props.name || "", !0;
-        let nextState = this.getStateIfChanged(props);
-        if (nextState)
-          return this.updateState(nextState, shouldNotify), nextState;
-      }
-      updateState(nextState, shouldNotify = !0) {
-        this.state = nextState;
-        let names = this.state.name.split("_"), lastName = names[names.length - 1][0];
-        this.isComponent = lastName[0] === lastName[0].toUpperCase(), this._allKeys = null, this.scheme = names[0] === "light" ? "light" : names[0] === "dark" ? "dark" : null, process.env.NODE_ENV === "development" && (this._numChangeEventsSent ??= 0, this._numChangeEventsSent++), shouldNotify && queueMicrotask(() => {
-          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 === "development" && debugId && (this._listeningIds ??= /* @__PURE__ */ new Set(), this._listeningIds.add(debugId)), this.themeListeners.add(cb), () => {
-          this.themeListeners.delete(cb);
-        };
       }
-    };
-    function getNextThemeClassName(name) {
-      return `t_sub_theme ${import_constants22.THEME_CLASSNAME_PREFIX}${name}`.replace("light_", "").replace("dark_", "");
+      return k;
     }
-    function getState(props, parentManager) {
-      var _a, _b, _c, _d, _e, _f;
-      let validManagerAndAllComponentThemes = getNonComponentParentManager(parentManager);
-      parentManager = validManagerAndAllComponentThemes[0];
-      let allComponentThemes = validManagerAndAllComponentThemes[1], themes = (0, import_config.getThemes)(), isDirectParentAComponentTheme = allComponentThemes.length > 0;
-      if (props.name && props.reset)
-        throw new Error("Cannot reset + set new name");
-      if (!props.name && !props.inverse && !props.reset && !props.componentName)
-        return null;
-      if (props.reset && !isDirectParentAComponentTheme && !(parentManager != null && parentManager.parentManager))
-        return process.env.NODE_ENV === "development" && console.warn("Cannot reset no grandparent exists"), null;
-      let result = null, nextName = props.reset ? isDirectParentAComponentTheme ? ((_a = parentManager == null ? void 0 : parentManager.state) == null ? void 0 : _a.name) || "" : ((_c = (_b = parentManager == null ? void 0 : parentManager.parentManager) == null ? void 0 : _b.state) == null ? void 0 : _c.name) || "" : props.name || "", { componentName } = props, parentName = props.reset ? isDirectParentAComponentTheme ? (
-        // here because parentManager already skipped componentTheme so we have to only go up once
-        ((_d = parentManager == null ? void 0 : parentManager.parentManager) == null ? void 0 : _d.state.name) || ""
-      ) : ((_f = (_e = parentManager == null ? void 0 : parentManager.parentManager) == null ? void 0 : _e.parentManager) == null ? void 0 : _f.state.name) || "" : isDirectParentAComponentTheme ? allComponentThemes[0] || "" : (parentManager == null ? void 0 : parentManager.state.name) || "";
-      props.reset && isDirectParentAComponentTheme && allComponentThemes.shift();
-      let base = parentName.split(import_constants22.THEME_NAME_SEPARATOR), lastSegment = base[base.length - 1], isParentComponentTheme = parentName && lastSegment[0].toUpperCase() === lastSegment[0];
-      isParentComponentTheme && base.pop();
-      let parentBaseTheme = isParentComponentTheme ? base.slice(0, base.length).join(import_constants22.THEME_NAME_SEPARATOR) : parentName, max = base.length, min = componentName && !nextName ? max : 0;
-      process.env.NODE_ENV === "development" && typeof props.debug == "string" && (console.groupCollapsed("ThemeManager.getState()"), console.log({
-        props,
-        parentName,
-        parentBaseTheme,
-        base,
-        min,
-        max,
-        isParentComponentTheme
-      }));
-      for (let i = max; i >= min; i--) {
-        let prefix = base.slice(0, i).join(import_constants22.THEME_NAME_SEPARATOR);
-        props.inverse && (prefix = inverseThemeName(prefix));
-        let potentials = [];
-        if (prefix && prefix !== parentBaseTheme && potentials.push(prefix), nextName && potentials.unshift(prefix ? `${prefix}_${nextName}` : nextName), i === 1) {
-          let lastSegment2 = potentials.findIndex((x) => !x.includes("_"));
-          lastSegment2 > 0 && potentials.splice(lastSegment2, 0, nextName);
-        }
-        if (componentName) {
-          let componentPotentials = [];
-          if (nextName) {
-            let beforeSeparator = prefix.slice(0, prefix.indexOf(import_constants22.THEME_NAME_SEPARATOR));
-            componentPotentials.push(`${beforeSeparator}_${nextName}_${componentName}`);
-          }
-          if (componentPotentials.push(`${prefix}_${componentName}`), nextName) {
-            let prefixLessOne = base.slice(0, i - 1).join(import_constants22.THEME_NAME_SEPARATOR);
-            if (prefixLessOne) {
-              let lessSpecific = `${prefixLessOne}_${nextName}_${componentName}`;
-              componentPotentials.unshift(lessSpecific);
-            }
-            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 === "development" && typeof props.debug == "string" && console.log(" - ", { found, potentials, parentManager }), found) {
-          result = {
-            name: found,
-            theme: themes[found],
-            className: import_constants2.isWeb ? getNextThemeClassName(found) : "",
-            parentName,
-            componentName,
-            inverse: props.inverse
-          };
-          break;
+    var cache = /* @__PURE__ */ new WeakMap();
+  }
+});
+
+// ../web/dist/cjs/helpers/createStyledContext.native.js
+var require_createStyledContext_native = __commonJS({
+  "../web/dist/cjs/helpers/createStyledContext.native.js"(exports, module2) {
+    "use strict";
+    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
+      for (var name in all)
+        __defProp2(target, name, { get: all[name], enumerable: !0 });
+    }, __copyProps2 = (to, from, except, desc) => {
+      if (from && typeof from == "object" || typeof from == "function")
+        for (let key of __getOwnPropNames2(from))
+          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
+      return to;
+    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), createStyledContext_exports = {};
+    __export2(createStyledContext_exports, {
+      createStyledContext: () => createStyledContext
+    });
+    module2.exports = __toCommonJS2(createStyledContext_exports);
+    var import_react = require("react"), import_objectIdentityKey = require_objectIdentityKey_native(), import_jsx_runtime = require("react/jsx-runtime");
+    function createStyledContext(defaultValues) {
+      let OGContext = (0, import_react.createContext)(defaultValues), OGProvider = OGContext.Provider, Context = OGContext, scopedContexts = /* @__PURE__ */ new Map(), Provider = ({
+        children,
+        scope,
+        ...values
+      }) => {
+        let value = (0, import_react.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_react.createContext)(defaultValues), scopedContexts.set(scope, ScopedContext)), Provider2 = ScopedContext.Provider;
         }
-      }
-      return process.env.NODE_ENV === "development" && typeof props.debug == "string" && typeof window < "u" && (console.warn("ThemeManager.getState():", {
-        result
-      }), console.trace(), console.groupEnd()), result;
-    }
-    var inverseThemeName = (themeName) => themeName.startsWith("light") ? themeName.replace(/^light/, "dark") : themeName.replace(/^dark/, "light");
-    function getNonComponentParentManager(themeManager) {
-      var _a;
-      let res = themeManager, componentThemeNames = [];
-      for (; res && res != null && res.isComponent; )
-        componentThemeNames.push((_a = res == null ? void 0 : res.state) == null ? void 0 : _a.name), res = res.parentManager;
-      return [res || null, componentThemeNames];
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Provider2, { value, children });
+      }, useStyledContext = (scope) => {
+        let context = scope ? scopedContexts.get(scope) : OGContext;
+        return (0, import_react.useContext)(context);
+      };
+      return Context.Provider = Provider, Context.props = defaultValues, Context.context = OGContext, Context.useStyledContext = useStyledContext, Context;
     }
   }
 });
 
-// ../web/dist/cjs/helpers/ThemeManagerContext.native.js
-var require_ThemeManagerContext_native = __commonJS({
-  "../web/dist/cjs/helpers/ThemeManagerContext.native.js"(exports, module2) {
+// ../web/dist/cjs/contexts/ComponentContext.native.js
+var require_ComponentContext_native = __commonJS({
+  "../web/dist/cjs/contexts/ComponentContext.native.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
       for (var name in all)
@@ -2857,18 +2021,33 @@ var require_ThemeManagerContext_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), ThemeManagerContext_exports = {};
-    __export2(ThemeManagerContext_exports, {
-      ThemeManagerContext: () => ThemeManagerContext
+    }, __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(), listeners = /* @__PURE__ */ new Set(), ComponentContext = (0, import_createStyledContext.createStyledContext)({
+      inText: !1,
+      language: null,
+      animationDriver: null,
+      groups: {
+        emit: (name, state) => {
+          listeners.forEach((l) => l(name, state));
+        },
+        subscribe(cb) {
+          return listeners.add(cb), () => {
+            listeners.delete(cb);
+          };
+        },
+        state: {}
+      }
     });
-    module2.exports = __toCommonJS2(ThemeManagerContext_exports);
-    var import_react = require("react"), ThemeManagerContext = (0, import_react.createContext)(null);
   }
 });
 
-// ../web/dist/cjs/hooks/getThemeUnwrapped.native.js
-var require_getThemeUnwrapped_native = __commonJS({
-  "../web/dist/cjs/hooks/getThemeUnwrapped.native.js"(exports, module2) {
+// ../web/dist/cjs/defaultComponentState.native.js
+var require_defaultComponentState_native = __commonJS({
+  "../web/dist/cjs/defaultComponentState.native.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
       for (var name in all)
@@ -2878,222 +2057,62 @@ var require_getThemeUnwrapped_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), getThemeUnwrapped_exports = {};
-    __export2(getThemeUnwrapped_exports, {
-      GetThemeUnwrapped: () => GetThemeUnwrapped,
-      getThemeUnwrapped: () => getThemeUnwrapped
+    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), defaultComponentState_exports = {};
+    __export2(defaultComponentState_exports, {
+      defaultComponentState: () => defaultComponentState,
+      defaultComponentStateMounted: () => defaultComponentStateMounted,
+      defaultComponentStateShouldEnter: () => defaultComponentStateShouldEnter
     });
-    module2.exports = __toCommonJS2(getThemeUnwrapped_exports);
-    var getThemeUnwrapped = (theme) => (theme == null ? void 0 : theme[GetThemeUnwrapped]) || theme, GetThemeUnwrapped = Symbol();
+    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/hooks/useTheme.native.js
-var require_useTheme_native = __commonJS({
-  "../web/dist/cjs/hooks/useTheme.native.js"(exports, module2) {
+// ../web/dist/cjs/helpers/createShallowSetState.native.js
+var require_createShallowSetState_native = __commonJS({
+  "../web/dist/cjs/helpers/createShallowSetState.native.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
       for (var name in all)
-        __defProp2(target, name, { get: all[name], enumerable: !0 });
-    }, __copyProps2 = (to, from, except, desc) => {
-      if (from && typeof from == "object" || typeof from == "function")
-        for (let key of __getOwnPropNames2(from))
-          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
-      return to;
-    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), useTheme_exports = {};
-    __export2(useTheme_exports, {
-      activeThemeManagers: () => activeThemeManagers,
-      getThemeProxied: () => getThemeProxied,
-      useChangeThemeEffect: () => useChangeThemeEffect,
-      useTheme: () => useTheme,
-      useThemeWithState: () => useThemeWithState
-    });
-    module2.exports = __toCommonJS2(useTheme_exports);
-    var import_constants2 = require_index_native2(), import_react = require("react"), import_config = require_config_native(), import_createVariable = require_createVariable_native(), import_createProxy = require_createProxy_native(), import_ThemeManager = require_ThemeManager_native(), import_ThemeManagerContext = require_ThemeManagerContext_native(), import_getThemeUnwrapped = require_getThemeUnwrapped_native(), emptyProps = { name: null }, cached;
-    function getDefaultThemeProxied() {
-      if (cached)
-        return cached;
-      let config = (0, import_config.getConfig)(), defaultTheme = config.themes.light ?? config.themes[Object.keys(config.themes)[0]];
-      return cached = getThemeProxied(defaultTheme), cached;
-    }
-    var useTheme = (props = emptyProps) => {
-      let [_, theme] = useThemeWithState(props);
-      return theme || getDefaultThemeProxied();
-    }, useThemeWithState = (props) => {
-      let keys = (0, import_react.useRef)([]), changedThemeState = useChangeThemeEffect(
-        props,
-        !1,
-        keys.current,
-        import_constants2.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" && props.debug && props.debug !== "profile" && console.log("  \u{1F3A8} useTheme() shouldUpdate?", next, {
-            shouldUpdateProp: (_b = props.shouldUpdate) == null ? void 0 : _b.call(props),
-            keys: [...keys.current]
-          }), next;
-        }
-      ), { themeManager, state } = changedThemeState, { theme, name, className } = state;
-      if (!theme)
-        throw process.env.NODE_ENV === "development" ? new Error(
-          `No theme found given props ${JSON.stringify(
-            props
-          )}. Themes given to tamagui are: ${Object.keys((0, import_config.getConfig)().themes)}`
-        ) : "\u274C 1";
-      let themeProxied = (0, import_react.useMemo)(() => getThemeProxied(theme, themeManager, keys.current, props.debug), [theme, name, className, themeManager]);
-      return process.env.NODE_ENV === "development" && props.debug === "verbose" && (console.groupCollapsed("  \u{1F539} useTheme =>", name), console.log("returning state", changedThemeState, "from props", props), console.groupEnd()), [changedThemeState, themeProxied];
-    };
-    function getThemeProxied(theme, themeManager, keys, debug) {
-      return (0, import_createProxy.createProxy)(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 (key === import_getThemeUnwrapped.GetThemeUnwrapped)
-            return theme;
-          if (
-            // dont ask me, idk why but on hermes you can see that useTheme()[undefined] passes in STRING undefined to proxy
-            // if someone is crazy enough to use "undefined" as a theme key then this not working is on them
-            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) {
-                  return keys && (subkey === "val" || subkey === "get" && !import_constants2.isWeb) && !keys.includes(keyString) && (keys.push(keyString), process.env.NODE_ENV === "development" && debug && console.log(` \u{1F3A8} useTheme() tracking new key: ${keyString}`)), subkey === "get" ? () => (0, import_createVariable.getVariable)(val) : Reflect.get(val, subkey);
-                }
-              });
-          }
-          return Reflect.get(_, key);
-        }
-      });
-    }
-    var activeThemeManagers = /* @__PURE__ */ new Set(), useChangeThemeEffect = (props, root = !1, keys, shouldUpdate) => {
-      let {
-        // @ts-expect-error internal use only
-        disable
-      } = props, parentManager = (0, import_react.useContext)(import_ThemeManagerContext.ThemeManagerContext);
-      if (disable) {
-        if (!parentManager)
-          throw "\u274C 2";
-        return {
-          isNewTheme: !1,
-          state: parentManager.state,
-          themeManager: parentManager
-        };
-      }
-      let [themeState, setThemeState] = (0, import_react.useState)(createState), { state, mounted, isNewTheme, themeManager } = themeState, isInversingOnMount = !!(!themeState.mounted && props.inverse);
-      function getShouldUpdateTheme(manager = themeManager, nextState, prevState = state, forceShouldChange = !1) {
-        let forceUpdate = shouldUpdate == null ? void 0 : shouldUpdate();
-        if (!forceShouldChange && forceUpdate === !1)
-          return;
-        let next = nextState || manager.getState(props, parentManager);
-        if (forceShouldChange || next && !(forceUpdate !== !0 && !manager.getStateShouldChange(next, prevState)))
-          return next;
-      }
-      if (import_constants2.isServer || ((0, import_react.useLayoutEffect)(() => {
-        if (props.inverse && !mounted) {
-          setThemeState({ ...themeState, mounted: !0 });
-          return;
-        }
-        isNewTheme && themeManager && activeThemeManagers.add(themeManager), (isNewTheme || getShouldUpdateTheme(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) => {
-          let force = shouldUpdate == null ? void 0 : shouldUpdate(), doUpdate = force ?? !!(keys != null && keys.length || isNewTheme);
-          process.env.NODE_ENV === "development" && props.debug && console.log(" \u{1F538} onChange", themeManager.id, {
-            force,
-            doUpdate,
-            props,
-            name,
-            manager,
-            keys
-          }), doUpdate && setThemeState(createState);
-        }, themeManager.id);
-        return () => {
-          selfListenerDispose(), disposeChangeListener == null || disposeChangeListener(), 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_react.useEffect)(() => (globalThis.TamaguiThemeManagers ??= /* @__PURE__ */ new Set(), globalThis.TamaguiThemeManagers.add(themeManager), () => {
-        globalThis.TamaguiThemeManagers.delete(themeManager);
-      }), [themeManager])), isInversingOnMount) {
-        if (!parentManager)
-          throw "\u274C 3";
-        return {
-          isNewTheme: !1,
-          themeManager: parentManager,
-          state: {
-            ...parentManager.state,
-            className: ""
-          }
-        };
-      }
-      return {
-        state,
-        isNewTheme,
-        themeManager
-      };
-      function createState(prev, force = !1) {
-        if (prev && (shouldUpdate == null ? void 0 : shouldUpdate()) === !1)
-          return prev;
-        let themeManager2 = parentManager, state2;
-        if ((0, import_ThemeManager.getHasThemeUpdatingProps)(props)) {
-          let getNewThemeManager = () => new import_ThemeManager.ThemeManager(props, root ? "root" : parentManager);
-          if (prev != null && prev.themeManager) {
-            themeManager2 = prev.themeManager;
-            let forceChange = !!(keys != null && keys.length), next = themeManager2.getState(props, parentManager), nextState = getShouldUpdateTheme(
-              themeManager2,
-              next,
-              prev.state,
-              forceChange
-            );
-            nextState ? (state2 = nextState, !prev.isNewTheme || !import_constants2.isWeb ? themeManager2 = getNewThemeManager() : themeManager2.updateState(nextState)) : prev.isNewTheme && parentManager && !next && (themeManager2 = parentManager);
-          } else
-            themeManager2 = getNewThemeManager(), state2 = { ...themeManager2.state };
-        }
-        let isNewTheme2 = !!(themeManager2 !== parentManager || props.inverse), mounted2 = props.inverse ? root || (prev == null ? void 0 : prev.mounted) : !0;
-        if (state2 || (isNewTheme2 ? state2 = themeManager2.state : (state2 = parentManager.state, themeManager2 = parentManager)), !force && state2.name === (prev == null ? void 0 : prev.state.name))
-          return prev;
-        let response = {
-          state: state2,
-          themeManager: themeManager2,
-          isNewTheme: isNewTheme2,
-          mounted: mounted2
-        };
-        if (process.env.NODE_ENV === "development" && props.debug && import_constants2.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.log({
-            props,
-            parentState,
-            parentId,
-            themeManager: themeManager2,
-            prev,
-            response,
-            themeManagerState
-          }), console.groupEnd();
-        }
-        return response;
-      }
-    };
+        __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,
+      mergeIfNotShallowEqual: () => mergeIfNotShallowEqual
+    });
+    module2.exports = __toCommonJS2(createShallowSetState_exports);
+    function createShallowSetState(setter) {
+      return (next) => setter((prev) => mergeIfNotShallowEqual(prev, next));
+    }
+    function mergeIfNotShallowEqual(prev, next) {
+      for (let key in next)
+        if (prev[key] !== next[key])
+          return { ...prev, ...next };
+      return prev;
+    }
   }
 });
 
-// ../web/dist/cjs/hooks/useMedia.native.js
-var require_useMedia_native = __commonJS({
-  "../web/dist/cjs/hooks/useMedia.native.js"(exports, module2) {
+// ../web/dist/cjs/constants/accessibilityDirectMap.native.js
+var require_accessibilityDirectMap_native = __commonJS({
+  "../web/dist/cjs/constants/accessibilityDirectMap.native.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
       for (var name in all)
@@ -3103,187 +2122,127 @@ var require_useMedia_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), useMedia_exports = {};
-    __export2(useMedia_exports, {
-      configureMedia: () => configureMedia2,
-      getInitialMediaState: () => getInitialMediaState,
-      getMedia: () => getMedia2,
-      getMediaImportanceIfMoreImportant: () => getMediaImportanceIfMoreImportant,
-      getMediaKeyImportance: () => getMediaKeyImportance,
-      isMediaKey: () => isMediaKey,
-      mediaKeyMatch: () => mediaKeyMatch,
-      mediaKeyToQuery: () => mediaKeyToQuery,
-      mediaKeys: () => mediaKeys,
-      mediaObjectToString: () => mediaObjectToString2,
-      mediaQueryConfig: () => mediaQueryConfig2,
-      mediaState: () => mediaState2,
-      mergeMediaByImportance: () => mergeMediaByImportance,
-      setMediaShouldUpdate: () => setMediaShouldUpdate,
-      setupMediaListeners: () => setupMediaListeners,
-      useMedia: () => useMedia2,
-      useMediaListeners: () => useMediaListeners,
-      useMediaPropsActive: () => useMediaPropsActive2
+    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), accessibilityDirectMap_native_exports = {};
+    __export2(accessibilityDirectMap_native_exports, {
+      accessibilityDirectMap: () => accessibilityDirectMap2,
+      accessibilityWebRoleToNativeRole: () => accessibilityWebRoleToNativeRole,
+      nativeAccessibilityState: () => nativeAccessibilityState,
+      nativeAccessibilityValue: () => nativeAccessibilityValue,
+      webToNativeAccessibilityDirectMap: () => webToNativeAccessibilityDirectMap
     });
-    module2.exports = __toCommonJS2(useMedia_exports);
-    var import_constants2 = require_index_native2(), import_react = require("react"), import_config = require_config_native(), import_createProxy = require_createProxy_native(), import_matchMedia = require_matchMedia_native(), import_propMapper = require_propMapper_native(), import_pseudoDescriptors = require_pseudoDescriptors_native(), import_useTheme = require_useTheme_native(), mediaState2 = (
-      // development only safeguard
-      process.env.NODE_ENV === "development" ? (0, import_createProxy.createProxy)(
-        {},
-        {
-          get(target, key) {
-            if (typeof key == "string" && key[0] === "$" && // dont error on $$typeof
-            key[1] !== "$")
-              throw new Error(`Access mediaState should not use "$": ${key}`);
-            return Reflect.get(target, key);
-          }
-        }
-      ) : {}
-    ), mediaQueryConfig2 = {}, getMedia2 = () => mediaState2, mediaKeys = /* @__PURE__ */ new Set(), isMediaKey = (key) => mediaKeys.has(key) || key[0] === "$" && (key.startsWith("$platform-") || key.startsWith("$theme-") || key.startsWith("$group-")), initState, getInitialMediaState = () => ((0, import_config.getConfig)().disableSSR ? mediaState2 : initState) || {}, defaultMediaImportance = Object.keys(import_pseudoDescriptors.pseudoDescriptors).length, mediaKeysOrdered, getMediaKeyImportance = (key) => {
-      if (process.env.NODE_ENV === "development" && key[0] === "$")
-        throw new Error("use short key");
-      return (0, import_config.getConfig)().settings.mediaPropOrder ? defaultMediaImportance : mediaKeysOrdered.indexOf(key) + 100;
-    }, dispose = /* @__PURE__ */ new Set(), mediaVersion = 0, configureMedia2 = (config) => {
-      let { media, mediaQueryDefaultActive } = config;
-      if (media) {
-        mediaVersion++;
-        for (let key in media)
-          mediaState2[key] = (mediaQueryDefaultActive == null ? void 0 : mediaQueryDefaultActive[key]) || !1, mediaKeys.add(`$${key}`);
-        Object.assign(mediaQueryConfig2, media), initState = { ...mediaState2 }, mediaKeysOrdered = Object.keys(media), config.disableSSR ? setupMediaListeners() : updateCurrentState();
-      }
+    module2.exports = __toCommonJS2(accessibilityDirectMap_native_exports);
+    var accessibilityDirectMap2 = {}, 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"
     };
-    function unlisten() {
-      dispose.forEach((cb) => cb()), dispose.clear();
-    }
-    var setupVersion = -1;
-    function setupMediaListeners() {
-      if (setupVersion !== mediaVersion) {
-        setupVersion = mediaVersion, unlisten();
-        for (let key in mediaQueryConfig2) {
-          let update2 = function() {
-            let next = !!getMatch().matches;
-            next !== mediaState2[key] && (mediaState2 = { ...mediaState2, [key]: next }, updateCurrentState());
-          };
-          var update = update2;
-          let str = mediaObjectToString2(mediaQueryConfig2[key], key), getMatch = () => (0, import_matchMedia.matchMedia)(str), match = getMatch();
-          if (!match)
-            throw new Error("\u26A0\uFE0F No match");
-          match.addListener(update2), dispose.add(() => {
-            match.removeListener(update2);
-          }), update2();
-        }
-      }
-    }
-    function useMediaListeners(config) {
-      config.disableSSR || (0, import_constants2.useIsomorphicLayoutEffect)(() => {
-        setupMediaListeners();
-      }, []);
-    }
-    var listeners = /* @__PURE__ */ new Set(), flushing = !1, flushVersion = -1;
-    function updateCurrentState() {
-      flushing && flushVersion === mediaVersion || (flushVersion = mediaVersion, flushing = !0, Promise.resolve().then(() => {
-        flushing = !1, listeners.forEach((cb) => cb(mediaState2));
-      }));
-    }
-    var shouldUpdate = /* @__PURE__ */ new WeakMap();
-    function setMediaShouldUpdate(ref, props) {
-      return shouldUpdate.set(ref, props);
-    }
-    function subscribe(subscriber) {
-      return listeners.add(subscriber), () => listeners.delete(subscriber);
-    }
-    function useMedia2(uid) {
-      let internal = (0, import_react.useRef)(), state = (0, import_react.useSyncExternalStore)(
-        subscribe,
-        () => {
-          if (!internal.current)
-            return initState;
-          let { touched, prev } = internal.current, componentState = uid ? shouldUpdate.get(uid) : void 0;
-          if (componentState && componentState.enabled === !1)
-            return prev;
-          let testKeys = (componentState == null ? void 0 : componentState.keys) ?? ((!componentState || componentState.enabled) && touched ? [...touched] : null);
-          return !testKeys || testKeys != null && testKeys.every((key) => mediaState2[key] === prev[key]) ? prev : (internal.current.prev = mediaState2, mediaState2);
-        },
-        () => initState
-      );
-      return new Proxy(state, {
-        get(_, key) {
-          return typeof key == "string" && (internal.current ||= { prev: initState }, internal.current.touched ||= /* @__PURE__ */ new Set(), internal.current.touched.add(key)), Reflect.get(state, key);
-        }
-      });
-    }
-    function useMediaPropsActive2(props, opts) {
-      let media = useMedia2(), resolveAs = (opts == null ? void 0 : opts.resolveValues) || "none", theme = resolveAs ? (0, import_useTheme.useTheme)() : null, styleState = { theme }, shouldExpandShorthands = opts == null ? void 0 : opts.expandShorthands;
-      return (0, import_react.useMemo)(() => {
-        let config = (0, import_config.getConfig)(), next = {}, importancesUsed = {}, propNames = Object.keys(props), len = propNames.length;
-        for (let i = 0; i < len; i++) {
-          let key = propNames[i], val = props[key];
-          if (key[0] === "$") {
-            let mediaKey = key.slice(1);
-            if (!media[mediaKey])
-              continue;
-            if (val && typeof val == "object") {
-              let subKeys = Object.keys(val);
-              for (let j = subKeys.length; j--; j >= 0) {
-                let subKey = subKeys[j], value = (0, import_propMapper.getTokenForKey)(subKey, val[subKey], resolveAs, styleState);
-                shouldExpandShorthands && (subKey = config.shorthands[subKey] || subKey), mergeMediaByImportance(next, mediaKey, subKey, value, importancesUsed, !0);
-              }
-            }
-          } else
-            shouldExpandShorthands && (key = config.shorthands[key] || key), mergeMediaByImportance(
-              next,
-              "",
-              key,
-              (0, import_propMapper.getTokenForKey)(key, val, resolveAs, styleState),
-              importancesUsed,
-              !0
-            );
+  }
+});
+
+// ../web/dist/cjs/constants/isDevTools.native.js
+var require_isDevTools_native = __commonJS({
+  "../web/dist/cjs/constants/isDevTools.native.js"(exports, module2) {
+    "use strict";
+    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
+      for (var name in all)
+        __defProp2(target, name, { get: all[name], enumerable: !0 });
+    }, __copyProps2 = (to, from, except, desc) => {
+      if (from && typeof from == "object" || typeof from == "function")
+        for (let key of __getOwnPropNames2(from))
+          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
+      return to;
+    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), 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 next;
-      }, [media, props, theme, resolveAs]);
-    }
-    var getMediaImportanceIfMoreImportant = (mediaKey, key, importancesUsed, isSizeMedia) => {
-      let conf = (0, import_config.getConfig)(), importance = isSizeMedia && !conf.settings.mediaPropOrder ? getMediaKeyImportance(mediaKey) : defaultMediaImportance;
-      return !importancesUsed[key] || importance > importancesUsed[key] ? importance : null;
-    };
-    function mergeMediaByImportance(onto, mediaKey, key, value, importancesUsed, isSizeMedia, importanceBump) {
-      let importance = getMediaImportanceIfMoreImportant(
-        mediaKey,
-        key,
-        importancesUsed,
-        isSizeMedia
-      );
-      return importanceBump && (importance = (importance || 0) + importanceBump), importance === null ? !1 : (importancesUsed[key] = importance, onto[key] = value, !0);
-    }
-    function camelToHyphen(str) {
-      return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`).toLowerCase();
-    }
-    var cache = /* @__PURE__ */ new WeakMap(), cachedMediaKeyToQuery = {};
-    function mediaObjectToString2(query, key) {
-      if (typeof query == "string")
-        return query;
-      if (cache.has(query))
-        return cache.get(query);
-      let res = Object.entries(query).map(([feature, value]) => (feature = camelToHyphen(feature), typeof value == "string" ? `(${feature}: ${value})` : (typeof value == "number" && /[height|width]$/.test(feature) && (value = `${value}px`), `(${feature}: ${value})`))).join(" and ");
-      return key && (cachedMediaKeyToQuery[key] = res), cache.set(query, res), res;
-    }
-    function mediaKeyToQuery(key) {
-      return cachedMediaKeyToQuery[key] || mediaObjectToString2(mediaQueryConfig2[key], key);
-    }
-    function mediaKeyMatch(key, dimensions) {
-      let mediaQueries = mediaQueryConfig2[key];
-      return Object.keys(mediaQueries).every((query) => {
-        let expectedVal = +mediaQueries[query], isMax = query.startsWith("max"), isWidth = query.endsWith("Width"), givenVal = dimensions[isWidth ? "width" : "height"];
-        return isMax ? givenVal < expectedVal : givenVal > expectedVal;
-      });
+      return !1;
+    })();
+  }
+});
+
+// ../web/dist/cjs/helpers/getGroupPropParts.native.js
+var require_getGroupPropParts_native = __commonJS({
+  "../web/dist/cjs/helpers/getGroupPropParts.native.js"(exports, module2) {
+    "use strict";
+    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
+      for (var name in all)
+        __defProp2(target, name, { get: all[name], enumerable: !0 });
+    }, __copyProps2 = (to, from, except, desc) => {
+      if (from && typeof from == "object" || typeof from == "function")
+        for (let key of __getOwnPropNames2(from))
+          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
+      return to;
+    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), getGroupPropParts_exports = {};
+    __export2(getGroupPropParts_exports, {
+      getGroupPropParts: () => getGroupPropParts
+    });
+    module2.exports = __toCommonJS2(getGroupPropParts_exports);
+    var import_useMedia = require_useMedia_native();
+    function getGroupPropParts(groupProp) {
+      let mediaQueries = (0, import_useMedia.getMedia)(), [_, name, part3, part4] = groupProp.split("-"), pseudo, media = part3 in mediaQueries ? part3 : void 0;
+      return media ? pseudo = part4 : pseudo = part3, { name, pseudo, media };
     }
   }
 });
 
-// ../web/dist/cjs/Tamagui.native.js
-var require_Tamagui_native = __commonJS({
-  "../web/dist/cjs/Tamagui.native.js"(exports, module2) {
+// ../web/dist/cjs/helpers/createMediaStyle.native.js
+var require_createMediaStyle_native = __commonJS({
+  "../web/dist/cjs/helpers/createMediaStyle.native.js"(exports, module2) {
     "use strict";
-    var __create2 = Object.create, __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __getProtoOf2 = Object.getPrototypeOf, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
+    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
       for (var name in all)
         __defProp2(target, name, { get: all[name], enumerable: !0 });
     }, __copyProps2 = (to, from, except, desc) => {
@@ -3291,51 +2250,558 @@ var require_Tamagui_native = __commonJS({
         for (let key of __getOwnPropNames2(from))
           !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
       return to;
-    }, __toESM2 = (mod, isNodeMode, target) => (target = mod != null ? __create2(__getProtoOf2(mod)) : {}, __copyProps2(
-      // If the importer is in node compatibility mode or this is not an ESM
-      // file that has been converted to a CommonJS file using a Babel-
-      // compatible transform (i.e. "__esModule" has not been set), then set
-      // "default" to the CommonJS "module.exports" for node compatibility.
-      isNodeMode || !mod || !mod.__esModule ? __defProp2(target, "default", { value: mod, enumerable: !0 }) : target,
-      mod
-    )), __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), Tamagui_exports = {};
-    __export2(Tamagui_exports, {
-      Tamagui: () => Tamagui,
-      getValueFromIdentifier: () => getValueFromIdentifier,
-      setIdentifierValue: () => setIdentifierValue
+    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), createMediaStyle_exports = {};
+    __export2(createMediaStyle_exports, {
+      MEDIA_SEP: () => MEDIA_SEP,
+      createMediaStyle: () => createMediaStyle
     });
-    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)();
+    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, negate, priority) => {
+      let { property, identifier, rules } = styleObject, conf = (0, import_config.getConfig)(), enableMediaPropOrder = conf.settings.mediaPropOrder, isThemeMedia = mediaKeyIn.startsWith("theme-"), isPlatformMedia = !isThemeMedia && mediaKeyIn.startsWith("platform-"), isGroup = !isThemeMedia && !isPlatformMedia && mediaKeyIn.startsWith("group-"), isNonWindowMedia = isThemeMedia || isPlatformMedia || 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 (isThemeMedia || 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 ? "" : " ", 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}`;
       }
-      get insertedRules() {
-        return (0, import_insertStyleRule.getAllRules)();
+      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} {`) : styleRule = `${prefix} ${mediaQuery}{${precedenceImportancePrefix}${styleInner}}`;
       }
-      get allSelectors() {
-        return (0, import_insertStyleRule.getAllSelectors)();
+      return {
+        property,
+        rules: [styleRule],
+        identifier: nextIdentifier
+      };
+    };
+  }
+});
+
+// ../web/dist/cjs/helpers/expandStyle.native.js
+var require_expandStyle_native = __commonJS({
+  "../web/dist/cjs/helpers/expandStyle.native.js"(exports, module2) {
+    "use strict";
+    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all2) => {
+      for (var name in all2)
+        __defProp2(target, name, { get: all2[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), expandStyle_exports = {};
+    __export2(expandStyle_exports, {
+      expandStyle: () => expandStyle
+    });
+    module2.exports = __toCommonJS2(expandStyle_exports);
+    var import_constants2 = require_index_native2();
+    function expandStyle(key, value) {
+      if (!1)
+        switch (key) {
+          case "textAlignVertical":
+          case "writingDirection":
+        }
+      if (import_constants2.isAndroid && key === "elevationAndroid")
+        return [["elevation", value]];
+      if (key in EXPANSIONS)
+        return EXPANSIONS[key].map((key2) => [key2, value]);
+    }
+    var all = ["Top", "Right", "Bottom", "Left"], horiz = ["Right", "Left"], vert = ["Top", "Bottom"], xy = ["X", "Y"], EXPANSIONS = {
+      borderColor: ["TopColor", "RightColor", "BottomColor", "LeftColor"],
+      borderRadius: [
+        "TopLeftRadius",
+        "TopRightRadius",
+        "BottomRightRadius",
+        "BottomLeftRadius"
+      ],
+      borderWidth: ["TopWidth", "RightWidth", "BottomWidth", "LeftWidth"],
+      margin: all,
+      marginHorizontal: horiz,
+      marginVertical: vert,
+      overscrollBehavior: xy,
+      padding: all,
+      paddingHorizontal: horiz,
+      paddingVertical: vert,
+      ...import_constants2.isWeb && {
+        // react-native only supports borderStyle
+        borderStyle: ["TopStyle", "RightStyle", "BottomStyle", "LeftStyle"],
+        // react-native doesn't support X / Y
+        overflow: xy
       }
-      get allTransforms() {
-        return (0, import_insertStyleRule.getAllTransforms)();
+    }, _a;
+    for (let parent in EXPANSIONS) {
+      let prefix = parent.slice(0, ((_a = /[A-Z]/.exec(parent)) == null ? void 0 : _a.index) ?? parent.length);
+      EXPANSIONS[parent] = EXPANSIONS[parent].map((k) => `${prefix}${k}`);
+    }
+  }
+});
+
+// ../../node_modules/@react-native/normalize-color/index.js
+var require_normalize_color = __commonJS({
+  "../../node_modules/@react-native/normalize-color/index.js"(exports, 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;
       }
-      get identifierToValue() {
-        return identifierToValue;
+      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})$/,
+        hex6: /^#([0-9a-fA-F]{6})$/,
+        hex8: /^#([0-9a-fA-F]{8})$/
+      }), cachedMatchers;
+    }
+    function parse255(str) {
+      let int = parseInt(str, 10);
+      return int < 0 ? 0 : int > 255 ? 255 : int;
+    }
+    function parse360(str) {
+      return (parseFloat(str) % 360 + 360) % 360 / 360;
+    }
+    function parse1(str) {
+      let num = parseFloat(str);
+      return num < 0 ? 0 : num > 1 ? 255 : Math.round(num * 255);
+    }
+    function parsePercentage(str) {
+      let int = parseFloat(str);
+      return int < 0 ? 0 : int > 100 ? 1 : int / 100;
+    }
+    function normalizeKeyword(name) {
+      switch (name) {
+        case "transparent":
+          return 0;
+        case "aliceblue":
+          return 4042850303;
+        case "antiquewhite":
+          return 4209760255;
+        case "aqua":
+          return 16777215;
+        case "aquamarine":
+          return 2147472639;
+        case "azure":
+          return 4043309055;
+        case "beige":
+          return 4126530815;
+        case "bisque":
+          return 4293182719;
+        case "black":
+          return 255;
+        case "blanchedalmond":
+          return 4293643775;
+        case "blue":
+          return 65535;
+        case "blueviolet":
+          return 2318131967;
+        case "brown":
+          return 2771004159;
+        case "burlywood":
+          return 3736635391;
+        case "burntsienna":
+          return 3934150143;
+        case "cadetblue":
+          return 1604231423;
+        case "chartreuse":
+          return 2147418367;
+        case "chocolate":
+          return 3530104575;
+        case "coral":
+          return 4286533887;
+        case "cornflowerblue":
+          return 1687547391;
+        case "cornsilk":
+          return 4294499583;
+        case "crimson":
+          return 3692313855;
+        case "cyan":
+          return 16777215;
+        case "darkblue":
+          return 35839;
+        case "darkcyan":
+          return 9145343;
+        case "darkgoldenrod":
+          return 3095792639;
+        case "darkgray":
+          return 2846468607;
+        case "darkgreen":
+          return 6553855;
+        case "darkgrey":
+          return 2846468607;
+        case "darkkhaki":
+          return 3182914559;
+        case "darkmagenta":
+          return 2332068863;
+        case "darkolivegreen":
+          return 1433087999;
+        case "darkorange":
+          return 4287365375;
+        case "darkorchid":
+          return 2570243327;
+        case "darkred":
+          return 2332033279;
+        case "darksalmon":
+          return 3918953215;
+        case "darkseagreen":
+          return 2411499519;
+        case "darkslateblue":
+          return 1211993087;
+        case "darkslategray":
+          return 793726975;
+        case "darkslategrey":
+          return 793726975;
+        case "darkturquoise":
+          return 13554175;
+        case "darkviolet":
+          return 2483082239;
+        case "deeppink":
+          return 4279538687;
+        case "deepskyblue":
+          return 12582911;
+        case "dimgray":
+          return 1768516095;
+        case "dimgrey":
+          return 1768516095;
+        case "dodgerblue":
+          return 512819199;
+        case "firebrick":
+          return 2988581631;
+        case "floralwhite":
+          return 4294635775;
+        case "forestgreen":
+          return 579543807;
+        case "fuchsia":
+          return 4278255615;
+        case "gainsboro":
+          return 3705462015;
+        case "ghostwhite":
+          return 4177068031;
+        case "gold":
+          return 4292280575;
+        case "goldenrod":
+          return 3668254975;
+        case "gray":
+          return 2155905279;
+        case "green":
+          return 8388863;
+        case "greenyellow":
+          return 2919182335;
+        case "grey":
+          return 2155905279;
+        case "honeydew":
+          return 4043305215;
+        case "hotpink":
+          return 4285117695;
+        case "indianred":
+          return 3445382399;
+        case "indigo":
+          return 1258324735;
+        case "ivory":
+          return 4294963455;
+        case "khaki":
+          return 4041641215;
+        case "lavender":
+          return 3873897215;
+        case "lavenderblush":
+          return 4293981695;
+        case "lawngreen":
+          return 2096890111;
+        case "lemonchiffon":
+          return 4294626815;
+        case "lightblue":
+          return 2916673279;
+        case "lightcoral":
+          return 4034953471;
+        case "lightcyan":
+          return 3774873599;
+        case "lightgoldenrodyellow":
+          return 4210742015;
+        case "lightgray":
+          return 3553874943;
+        case "lightgreen":
+          return 2431553791;
+        case "lightgrey":
+          return 3553874943;
+        case "lightpink":
+          return 4290167295;
+        case "lightsalmon":
+          return 4288707327;
+        case "lightseagreen":
+          return 548580095;
+        case "lightskyblue":
+          return 2278488831;
+        case "lightslategray":
+          return 2005441023;
+        case "lightslategrey":
+          return 2005441023;
+        case "lightsteelblue":
+          return 2965692159;
+        case "lightyellow":
+          return 4294959359;
+        case "lime":
+          return 16711935;
+        case "limegreen":
+          return 852308735;
+        case "linen":
+          return 4210091775;
+        case "magenta":
+          return 4278255615;
+        case "maroon":
+          return 2147483903;
+        case "mediumaquamarine":
+          return 1724754687;
+        case "mediumblue":
+          return 52735;
+        case "mediumorchid":
+          return 3126187007;
+        case "mediumpurple":
+          return 2473647103;
+        case "mediumseagreen":
+          return 1018393087;
+        case "mediumslateblue":
+          return 2070474495;
+        case "mediumspringgreen":
+          return 16423679;
+        case "mediumturquoise":
+          return 1221709055;
+        case "mediumvioletred":
+          return 3340076543;
+        case "midnightblue":
+          return 421097727;
+        case "mintcream":
+          return 4127193855;
+        case "mistyrose":
+          return 4293190143;
+        case "moccasin":
+          return 4293178879;
+        case "navajowhite":
+          return 4292783615;
+        case "navy":
+          return 33023;
+        case "oldlace":
+          return 4260751103;
+        case "olive":
+          return 2155872511;
+        case "olivedrab":
+          return 1804477439;
+        case "orange":
+          return 4289003775;
+        case "orangered":
+          return 4282712319;
+        case "orchid":
+          return 3664828159;
+        case "palegoldenrod":
+          return 4008225535;
+        case "palegreen":
+          return 2566625535;
+        case "paleturquoise":
+          return 2951671551;
+        case "palevioletred":
+          return 3681588223;
+        case "papayawhip":
+          return 4293907967;
+        case "peachpuff":
+          return 4292524543;
+        case "peru":
+          return 3448061951;
+        case "pink":
+          return 4290825215;
+        case "plum":
+          return 3718307327;
+        case "powderblue":
+          return 2967529215;
+        case "purple":
+          return 2147516671;
+        case "rebeccapurple":
+          return 1714657791;
+        case "red":
+          return 4278190335;
+        case "rosybrown":
+          return 3163525119;
+        case "royalblue":
+          return 1097458175;
+        case "saddlebrown":
+          return 2336560127;
+        case "salmon":
+          return 4202722047;
+        case "sandybrown":
+          return 4104413439;
+        case "seagreen":
+          return 780883967;
+        case "seashell":
+          return 4294307583;
+        case "sienna":
+          return 2689740287;
+        case "silver":
+          return 3233857791;
+        case "skyblue":
+          return 2278484991;
+        case "slateblue":
+          return 1784335871;
+        case "slategray":
+          return 1887473919;
+        case "slategrey":
+          return 1887473919;
+        case "snow":
+          return 4294638335;
+        case "springgreen":
+          return 16744447;
+        case "steelblue":
+          return 1182971135;
+        case "tan":
+          return 3535047935;
+        case "teal":
+          return 8421631;
+        case "thistle":
+          return 3636451583;
+        case "tomato":
+          return 4284696575;
+        case "turquoise":
+          return 1088475391;
+        case "violet":
+          return 4001558271;
+        case "wheat":
+          return 4125012991;
+        case "white":
+          return 4294967295;
+        case "whitesmoke":
+          return 4126537215;
+        case "yellow":
+          return 4294902015;
+        case "yellowgreen":
+          return 2597139199;
       }
-    }, Tamagui = new TamaguiManager(), identifierToValue = /* @__PURE__ */ new Map(), getValueFromIdentifier = (identifier) => identifierToValue.get(identifier), setIdentifierValue = (identifier, value) => {
-      identifierToValue.set(identifier, value);
-    };
+      return null;
+    }
+    module2.exports = normalizeColor;
   }
 });
 
-// ../compose-refs/dist/cjs/compose-refs.native.js
-var require_compose_refs_native = __commonJS({
-  "../compose-refs/dist/cjs/compose-refs.native.js"(exports, module2) {
+// ../normalize-css-color/dist/cjs/index.native.js
+var require_index_native7 = __commonJS({
+  "../normalize-css-color/dist/cjs/index.native.js"(exports, 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)
@@ -3352,43 +2818,30 @@ var require_compose_refs_native = __commonJS({
       // "default" to the CommonJS "module.exports" for node compatibility.
       isNodeMode || !mod || !mod.__esModule ? __defProp2(target, "default", { value: mod, enumerable: !0 }) : target,
       mod
-    )), __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), compose_refs_exports = {};
-    __export2(compose_refs_exports, {
-      composeRefs: () => composeRefs,
-      useComposedRefs: () => useComposedRefs
+    )), __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), src_exports2 = {};
+    __export2(src_exports2, {
+      default: () => src_default,
+      normalizeCSSColor: () => normalizeCSSColor,
+      rgba: () => rgba2
     });
-    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_native6 = __commonJS({
-  "../compose-refs/dist/cjs/index.native.js"(exports, 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);
+    var normalizeColor = __toESM2(require_normalize_color()), norm = normalizeColor.default || normalizeColor, normalizeCSSColor = norm;
+    function rgba2(colorInt) {
+      var r = Math.round((colorInt & 4278190080) >>> 24), g = Math.round((colorInt & 16711680) >>> 16), b = Math.round((colorInt & 65280) >>> 8), a = ((colorInt & 255) >>> 0) / 255;
+      return {
+        r,
+        g,
+        b,
+        a
+      };
+    }
+    var src_default = normalizeCSSColor;
   }
 });
 
-// ../use-did-finish-ssr/dist/cjs/index.native.js
-var require_index_native7 = __commonJS({
-  "../use-did-finish-ssr/dist/cjs/index.native.js"(exports, module2) {
+// ../web/dist/cjs/helpers/defaultOffset.native.js
+var require_defaultOffset_native = __commonJS({
+  "../web/dist/cjs/helpers/defaultOffset.native.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
       for (var name in all)
@@ -3398,25 +2851,18 @@ var require_index_native7 = __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), defaultOffset_exports = {};
+    __export2(defaultOffset_exports, {
+      defaultOffset: () => defaultOffset
     });
-    module2.exports = __toCommonJS2(src_exports2);
-    var import_react = require("react");
-    function useDidFinishSSR(value) {
-      return value ?? !0;
-    }
-    function useClientValue(value) {
-      return useDidFinishSSR() ? typeof value == "function" ? value() : value : void 0;
-    }
+    module2.exports = __toCommonJS2(defaultOffset_exports);
+    var defaultOffset = { height: 0, width: 0 };
   }
 });
 
-// ../web/dist/cjs/helpers/objectIdentityKey.native.js
-var require_objectIdentityKey_native = __commonJS({
-  "../web/dist/cjs/helpers/objectIdentityKey.native.js"(exports, module2) {
+// ../web/dist/cjs/helpers/normalizeColor.native.js
+var require_normalizeColor_native = __commonJS({
+  "../web/dist/cjs/helpers/normalizeColor.native.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
       for (var name in all)
@@ -3426,34 +2872,30 @@ 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), normalizeColor_exports = {};
+    __export2(normalizeColor_exports, {
+      normalizeColor: () => normalizeColor,
+      rgba: () => import_normalize_css_color2.rgba
     });
-    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")
-          k += type + arg;
-        else if (cache.has(arg))
-          k += cache.get(arg);
-        else {
-          let v = Math.random();
-          cache.set(arg, v), k += v;
-        }
+    module2.exports = __toCommonJS2(normalizeColor_exports);
+    var import_constants2 = require_index_native2(), import_normalize_css_color = require_index_native7(), import_normalize_css_color2 = require_index_native7(), normalizeColor = (color, opacity) => {
+      if (!color)
+        return;
+      if (color[0] === "$" || color[0] === "v" && color.startsWith("var(") || import_constants2.isWeb && opacity === 1)
+        return color;
+      let colorProcessed = (0, import_normalize_css_color.normalizeCSSColor)(color);
+      if (colorProcessed != null) {
+        let { r, g, b, a } = (0, import_normalize_css_color.rgba)(colorProcessed), alpha = (opacity ?? a ?? 1).toFixed(2);
+        return `rgba(${r},${g},${b},${alpha})`;
       }
-      return k;
-    }
-    var cache = /* @__PURE__ */ new WeakMap();
+      process.env.NODE_ENV === "development" && console.warn(`Unknown color value: ${color}`);
+    };
   }
 });
 
-// ../web/dist/cjs/helpers/createStyledContext.native.js
-var require_createStyledContext_native = __commonJS({
-  "../web/dist/cjs/helpers/createStyledContext.native.js"(exports, module2) {
+// ../web/dist/cjs/helpers/normalizeValueWithProperty.native.js
+var require_normalizeValueWithProperty_native = __commonJS({
+  "../web/dist/cjs/helpers/normalizeValueWithProperty.native.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
       for (var name in all)
@@ -3463,31 +2905,49 @@ var require_createStyledContext_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), createStyledContext_exports = {};
-    __export2(createStyledContext_exports, {
-      createStyledContext: () => createStyledContext
+    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), normalizeValueWithProperty_exports = {};
+    __export2(normalizeValueWithProperty_exports, {
+      normalizeValueWithProperty: () => normalizeValueWithProperty,
+      reverseMapClassNameToValue: () => reverseMapClassNameToValue
     });
-    module2.exports = __toCommonJS2(createStyledContext_exports);
-    var import_react = require("react"), import_objectIdentityKey = require_objectIdentityKey_native(), import_jsx_runtime = require("react/jsx-runtime");
-    function createStyledContext(props) {
-      let OGContext = (0, import_react.createContext)(props), OGProvider = OGContext.Provider, Context = OGContext, Provider = ({
-        children,
-        ...values
-      }) => {
-        let value = (0, import_react.useMemo)(() => ({
-          ...props,
-          ...values
-        }), [(0, import_objectIdentityKey.objectIdentityKey)(values)]);
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OGProvider, { value, children });
-      };
-      return Context.Provider = Provider, Context.props = props, Context.context = OGContext, Context;
+    module2.exports = __toCommonJS2(normalizeValueWithProperty_exports);
+    var import_constants2 = require_index_native2(), import_helpers = require_index_native4(), import_insertStyleRule = require_insertStyleRule_native(), stylePropsAllPlusTransforms = {
+      ...import_helpers.stylePropsAll,
+      translateX: !0,
+      translateY: !0
+    };
+    function normalizeValueWithProperty(value, property) {
+      if (!import_constants2.isWeb || typeof value == "boolean" || property && property in import_helpers.stylePropsUnitless || property && !(property in stylePropsAllPlusTransforms))
+        return value;
+      let res = value;
+      return value && typeof value == "object" ? value : (typeof value == "number" ? res = `${value}px` : property && (res = `${res}`), res);
+    }
+    var rcache = {};
+    function reverseMapClassNameToValue(key, className) {
+      let cssRule = (0, import_insertStyleRule.getAllSelectors)()[className];
+      if (rcache[cssRule])
+        return rcache[cssRule];
+      if (!cssRule) {
+        process.env.NODE_ENV === "development" && console.warn(
+          `No CSS rule found for ${key} looking for selector ".${className}", you may not be injecting extracted CSS`
+        );
+        return;
+      }
+      let cssVal = cssRule.replace(/.*:/, "").replace(/;.*/, "").trim(), res;
+      return cssVal.startsWith("var(") ? res = cssVal : import_helpers.stylePropsUnitless[key] ? res = +cssVal : cssVal.endsWith("px") ? res = +cssVal.replace("px", "") : res = cssVal, rcache[cssRule] = res, process.env.NODE_ENV === "development" && typeof res == "number" && isNaN(res) && console.log("Tamagui invalid parsed value, NaN:", {
+        res,
+        cssVal,
+        cssRule,
+        key,
+        className
+      }), res;
     }
   }
 });
 
-// ../web/dist/cjs/contexts/ComponentContext.native.js
-var require_ComponentContext_native = __commonJS({
-  "../web/dist/cjs/contexts/ComponentContext.native.js"(exports, module2) {
+// ../web/dist/cjs/helpers/normalizeShadow.native.js
+var require_normalizeShadow_native = __commonJS({
+  "../web/dist/cjs/helpers/normalizeShadow.native.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
       for (var name in all)
@@ -3497,33 +2957,38 @@ var require_ComponentContext_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), ComponentContext_exports = {};
-    __export2(ComponentContext_exports, {
-      ComponentContext: () => ComponentContext
+    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), normalizeShadow_native_exports = {};
+    __export2(normalizeShadow_native_exports, {
+      normalizeShadow: () => normalizeShadow
     });
-    module2.exports = __toCommonJS2(ComponentContext_exports);
-    var import_createStyledContext = require_createStyledContext_native(), listeners = /* @__PURE__ */ new Set(), ComponentContext = (0, import_createStyledContext.createStyledContext)({
-      inText: !1,
-      language: null,
-      animationDriver: null,
-      groups: {
-        emit: (name, state) => {
-          listeners.forEach((l) => l(name, state));
-        },
-        subscribe(cb) {
-          return listeners.add(cb), () => {
-            listeners.delete(cb);
-          };
+    module2.exports = __toCommonJS2(normalizeShadow_native_exports);
+    var import_normalize_css_color = require_index_native7(), import_defaultOffset = require_defaultOffset_native(), import_normalizeColor = require_normalizeColor_native(), import_normalizeValueWithProperty = require_normalizeValueWithProperty_native();
+    function normalizeShadow({
+      shadowColor,
+      shadowOffset,
+      shadowOpacity,
+      shadowRadius
+    }) {
+      let { height, width } = shadowOffset || import_defaultOffset.defaultOffset, colorStr = String(shadowColor || "black"), val = (0, import_normalize_css_color.normalizeCSSColor)(colorStr);
+      if (typeof val != "number")
+        throw new Error(`invalid shadow color ${colorStr}`);
+      let { r, g, b, a } = (0, import_normalizeColor.rgba)(val);
+      return {
+        shadowOffset: {
+          width: (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(width || 0),
+          height: (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(height || 0)
         },
-        state: {}
-      }
-    });
+        shadowRadius: (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(shadowRadius || 0),
+        shadowColor: `rgb(${r},${g},${b})`,
+        shadowOpacity: shadowOpacity ?? a
+      };
+    }
   }
 });
 
-// ../web/dist/cjs/defaultComponentState.native.js
-var require_defaultComponentState_native = __commonJS({
-  "../web/dist/cjs/defaultComponentState.native.js"(exports, module2) {
+// ../web/dist/cjs/helpers/expandStyles.native.js
+var require_expandStyles_native = __commonJS({
+  "../web/dist/cjs/helpers/expandStyles.native.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
       for (var name in all)
@@ -3533,32 +2998,46 @@ var require_defaultComponentState_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), defaultComponentState_exports = {};
-    __export2(defaultComponentState_exports, {
-      defaultComponentState: () => defaultComponentState,
-      defaultComponentStateMounted: () => defaultComponentStateMounted,
-      defaultComponentStateShouldEnter: () => defaultComponentStateShouldEnter
+    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), expandStyles_exports = {};
+    __export2(expandStyles_exports, {
+      expandStylesAndRemoveNullishValues: () => expandStylesAndRemoveNullishValues,
+      fixStyles: () => fixStyles
     });
-    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"
+    module2.exports = __toCommonJS2(expandStyles_exports);
+    var import_constants2 = require_index_native2(), import_expandStyle = require_expandStyle_native(), import_normalizeShadow = require_normalizeShadow_native(), import_normalizeValueWithProperty = require_normalizeValueWithProperty_native(), import_pseudoDescriptors = require_pseudoDescriptors_native();
+    function expandStylesAndRemoveNullishValues(style) {
+      let res = {};
+      for (let key in style) {
+        let valIn = style[key];
+        if (valIn == null)
+          continue;
+        if (key in import_pseudoDescriptors.pseudoDescriptors) {
+          res[key] = expandStylesAndRemoveNullishValues(valIn);
+          continue;
+        }
+        let val = (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(valIn, key), out = (0, import_expandStyle.expandStyle)(key, val);
+        out ? Object.assign(res, Object.fromEntries(out)) : res[key] = val;
+      }
+      return fixStyles(res), res;
+    }
+    function fixStyles(style) {
+      "elevationAndroid" in style && (style.elevation = style.elevationAndroid, delete style.elevationAndroid), (style.shadowRadius || style.shadowColor || style.shadowOpacity || style.shadowOffset) && Object.assign(style, (0, import_normalizeShadow.normalizeShadow)(style));
+      for (let key in borderDefaults)
+        key in style && !style[borderDefaults[key]] && (style[borderDefaults[key]] = "solid");
+    }
+    var nativeStyle = import_constants2.isWeb ? null : "borderStyle", borderDefaults = {
+      borderWidth: "borderStyle",
+      borderBottomWidth: nativeStyle || "borderBottomStyle",
+      borderTopWidth: nativeStyle || "borderTopStyle",
+      borderLeftWidth: nativeStyle || "borderLeftStyle",
+      borderRightWidth: nativeStyle || "borderRightStyle"
     };
   }
 });
 
-// ../web/dist/cjs/helpers/createShallowSetState.native.js
-var require_createShallowSetState_native = __commonJS({
-  "../web/dist/cjs/helpers/createShallowSetState.native.js"(exports, module2) {
+// ../web/dist/cjs/helpers/getStylesAtomic.native.js
+var require_getStylesAtomic_native = __commonJS({
+  "../web/dist/cjs/helpers/getStylesAtomic.native.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
       for (var name in all)
@@ -3568,27 +3047,23 @@ var require_createShallowSetState_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), createShallowSetState_exports = {};
-    __export2(createShallowSetState_exports, {
-      createShallowSetState: () => createShallowSetState,
-      mergeIfNotShallowEqual: () => mergeIfNotShallowEqual
+    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), getStylesAtomic_native_exports = {};
+    __export2(getStylesAtomic_native_exports, {
+      generateAtomicStyles: () => generateAtomicStyles,
+      getAtomicStyle: () => getAtomicStyle,
+      getStylesAtomic: () => getStylesAtomic,
+      styleToCSS: () => styleToCSS
     });
-    module2.exports = __toCommonJS2(createShallowSetState_exports);
-    function createShallowSetState(setter) {
-      return (next) => setter((prev) => mergeIfNotShallowEqual(prev, next));
-    }
-    function mergeIfNotShallowEqual(prev, next) {
-      for (let key in next)
-        if (prev[key] !== next[key])
-          return { ...prev, ...next };
-      return prev;
-    }
+    module2.exports = __toCommonJS2(getStylesAtomic_native_exports);
+    var empty = () => {
+      console.warn("no-op native");
+    }, getStylesAtomic = empty, generateAtomicStyles = empty, getAtomicStyle = empty, styleToCSS = empty;
   }
 });
 
-// ../web/dist/cjs/constants/accessibilityDirectMap.native.js
-var require_accessibilityDirectMap_native = __commonJS({
-  "../web/dist/cjs/constants/accessibilityDirectMap.native.js"(exports, module2) {
+// ../web/dist/cjs/helpers/getVariantExtras.native.js
+var require_getVariantExtras_native = __commonJS({
+  "../web/dist/cjs/helpers/getVariantExtras.native.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
       for (var name in all)
@@ -3598,72 +3073,62 @@ 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: () => accessibilityDirectMap2,
-      accessibilityWebRoleToNativeRole: () => accessibilityWebRoleToNativeRole,
-      nativeAccessibilityState: () => nativeAccessibilityState,
-      nativeAccessibilityValue: () => nativeAccessibilityValue,
-      webToNativeAccessibilityDirectMap: () => webToNativeAccessibilityDirectMap
+    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), getVariantExtras_exports = {};
+    __export2(getVariantExtras_exports, {
+      getFontsForLanguage: () => getFontsForLanguage,
+      getVariantExtras: () => getVariantExtras
     });
-    module2.exports = __toCommonJS2(accessibilityDirectMap_native_exports);
-    var accessibilityDirectMap2 = {}, 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(getVariantExtras_exports);
+    var import_createVariable = require_createVariable_native(), import_createProxy = require_createProxy_native();
+    function getVariantExtras(styleState) {
+      let { curProps, conf, context, theme } = styleState, fonts = conf.fontsParsed;
+      context != null && context.language && (fonts = getFontsForLanguage(conf.fontsParsed, context.language));
+      let fontFamily = (0, import_createVariable.getVariableValue)(
+        styleState.fontFamily || styleState.curProps.fontFamily || styleState.conf.defaultFont
+      );
+      return {
+        fonts,
+        tokens: conf.tokensParsed,
+        theme,
+        fontFamily,
+        font: fonts[fontFamily] || fonts[styleState.conf.defaultFont],
+        // TODO do this in splitstlye
+        // we avoid passing in default props for media queries because that would confuse things like SizableText.size:
+        props: (0, import_createProxy.createProxy)(curProps, {
+          // handles shorthands
+          get(target, key) {
+            let shorthand = conf.inverseShorthands[key];
+            if (shorthand && Reflect.has(target, shorthand))
+              return Reflect.get(target, shorthand);
+            if (Reflect.has(target, key))
+              return Reflect.get(target, key);
+          }
+        })
+      };
+    }
+    var fontLanguageCache = /* @__PURE__ */ new WeakMap();
+    function getFontsForLanguage(fonts, language) {
+      if (fontLanguageCache.has(language))
+        return fontLanguageCache.get(language);
+      let next = {
+        ...fonts,
+        ...Object.fromEntries(
+          Object.entries(language).map(([name, lang]) => {
+            if (lang === "default")
+              return [];
+            let langKey = `$${name}_${lang}`;
+            return [`$${name}`, fonts[langKey]];
+          })
+        )
+      };
+      return fontLanguageCache.set(language, next), next;
+    }
   }
 });
 
-// ../web/dist/cjs/helpers/getGroupPropParts.native.js
-var require_getGroupPropParts_native = __commonJS({
-  "../web/dist/cjs/helpers/getGroupPropParts.native.js"(exports, module2) {
+// ../web/dist/cjs/helpers/isObj.native.js
+var require_isObj_native = __commonJS({
+  "../web/dist/cjs/helpers/isObj.native.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
       for (var name in all)
@@ -3673,22 +3138,18 @@ 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
+    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), isObj_exports = {};
+    __export2(isObj_exports, {
+      isObj: () => isObj
     });
-    module2.exports = __toCommonJS2(getGroupPropParts_exports);
-    var import_useMedia = require_useMedia_native();
-    function getGroupPropParts(groupProp) {
-      let mediaQueries = (0, import_useMedia.getMedia)(), [_, name, part3, part4] = groupProp.split("-"), pseudo, media = part3 in mediaQueries ? part3 : void 0;
-      return media ? pseudo = part4 : pseudo = part3, { name, pseudo, media };
-    }
+    module2.exports = __toCommonJS2(isObj_exports);
+    var isObj = (x) => x && !Array.isArray(x) && typeof x == "object";
   }
 });
 
-// ../web/dist/cjs/helpers/createMediaStyle.native.js
-var require_createMediaStyle_native = __commonJS({
-  "../web/dist/cjs/helpers/createMediaStyle.native.js"(exports, module2) {
+// ../web/dist/cjs/helpers/propMapper.native.js
+var require_propMapper_native = __commonJS({
+  "../web/dist/cjs/helpers/propMapper.native.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
       for (var name in all)
@@ -3698,79 +3159,189 @@ 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), propMapper_exports = {};
+    __export2(propMapper_exports, {
+      getFontFamilyFromNameOrVariable: () => getFontFamilyFromNameOrVariable,
+      getPropMappedFontFamily: () => getPropMappedFontFamily,
+      getTokenForKey: () => getTokenForKey,
+      propMapper: () => propMapper
     });
-    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, negate, priority) => {
-      let { property, identifier, rules } = styleObject, conf = (0, import_config.getConfig)(), enableMediaPropOrder = conf.settings.mediaPropOrder, isThemeMedia = mediaKeyIn.startsWith("theme-"), isPlatformMedia = !isThemeMedia && mediaKeyIn.startsWith("platform-"), isGroup = !isThemeMedia && !isPlatformMedia && mediaKeyIn.startsWith("group-"), isNonWindowMedia = isThemeMedia || isPlatformMedia || 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 (isThemeMedia || 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 ? "" : " ", 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);
+    module2.exports = __toCommonJS2(propMapper_exports);
+    var import_constants2 = require_index_native2(), 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_expandStyles = require_expandStyles_native(), import_getVariantExtras = require_getVariantExtras_native(), import_isObj = require_isObj_native(), import_pseudoDescriptors = require_pseudoDescriptors_native(), propMapper = (key, value, styleStateIn, subPropsIn) => {
+      if (!import_constants2.isAndroid && key === "elevationAndroid")
+        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(value, styleProps.resolveValues))), shouldReturn || value != null)
+        return (styleProps.noExpand ? null : (0, import_expandStyle.expandStyle)(key, value)) || [[key, value]];
+    }, resolveVariants = (key, value, styleProps, styleState, parentVariantKey) => {
+      let { staticConfig, conf, debug } = styleState, { variants } = staticConfig;
+      if (!variants)
+        return;
+      let variantValue = getVariantDefinition(variants[key], key, value, conf);
+      if (process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupCollapsed(`\u2666\uFE0F\u2666\uFE0F\u2666\uFE0F resolve variant ${key}`), console.log({
+        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.log({ 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.log("   updating font family", fontFamilyResult)), variantValue = resolveTokensAndVariants(
+          key,
+          variantValue,
+          styleProps,
+          styleState,
+          parentVariantKey
+        );
+      }
+      if (variantValue) {
+        let expanded = (0, import_expandStyles.expandStylesAndRemoveNullishValues)(variantValue), 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.log("   - resolveTokensAndVariants", key, value);
+      for (let rKey in value) {
+        let fKey = conf.shorthands[rKey] || rKey, val = value[rKey];
+        if (styleProps.noExpand)
+          res[fKey] = val;
+        else if (variants && fKey in variants) {
+          if (styleState.curProps[fKey] = val, parentVariantKey && parentVariantKey === key)
+            res[fKey] = // SYNC WITH *1
+            val[0] === "$" ? getTokenForKey(fKey, val, styleProps.resolveValues, styleState) : val;
+          else {
+            let variantOut = resolveVariants(fKey, 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[fKey] = resolveVariableValue(val, styleProps.resolveValues);
+          continue;
+        }
+        if (typeof val == "string") {
+          let fVal = (
+            // SYNC WITH *1
+            val[0] === "$" ? getTokenForKey(fKey, val, styleProps.resolveValues, styleState) : val
+          );
+          res[fKey] = fVal;
+          continue;
+        }
+        if ((0, import_isObj.isObj)(val)) {
+          let subObject = resolveTokensAndVariants(fKey, val, styleProps, styleState, key);
+          process.env.NODE_ENV === "development" && debug === "verbose" && console.log("object", fKey, subObject), res[fKey] ??= {}, Object.assign(res[fKey], subObject);
         } else
-          styleRule = `${precedenceImportancePrefix}${styleInner}`;
+          res[fKey] = val;
+        process.env.NODE_ENV === "development" && debug && ((_a = res[fKey]) == null ? void 0 : _a[0]) === "$" && console.warn(`\u26A0\uFE0F Missing token in theme ${theme.name}:`, fKey, res[fKey], theme);
       }
-      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("")])
-          ));
+      return res;
+    }, tokenCats = ["size", "color", "radius", "space", "zIndex"].map((name) => ({
+      name,
+      spreadName: `...${name}`
+    }));
+    function getVariantDefinition(variant, key, value, conf) {
+      if (typeof variant == "function")
+        return variant;
+      if (variant[value])
+        return variant[value];
+      let { tokensParsed } = conf;
+      for (let { name, spreadName } of tokenCats)
+        if (spreadName in variant && value in tokensParsed[name])
+          return variant[spreadName];
+      let fontSizeVariant = variant["...fontSize"];
+      return fontSizeVariant && conf.fontSizeTokens.has(value) ? fontSizeVariant : variant[`:${typeof value}`] || variant["..."] || variant["...size"];
+    }
+    var fontShorthand = {
+      fontSize: "size",
+      fontWeight: "weight"
+    }, getTokenForKey = (key, value, resolveAs = "none", styleState) => {
+      var _a, _b;
+      if (resolveAs === "none")
+        return value;
+      let { theme, conf = (0, import_config.getConfig)(), context, fontFamily } = styleState, tokensParsed = conf.tokensParsed, valOrVar, hasSet = !1;
+      if (theme && value in theme)
+        process.env.NODE_ENV === "development" && styleState.debug === "verbose" && console.log(` - getting theme value for ${key} from ${value}`), valOrVar = theme[value], hasSet = !0;
+      else if (value in conf.specificTokens)
+        hasSet = !0, valOrVar = conf.specificTokens[value];
+      else {
+        switch (key) {
+          case "fontFamily": {
+            valOrVar = ((_a = (context != null && context.language ? (0, import_getVariantExtras.getFontsForLanguage)(conf.fontsParsed, context.language) : conf.fontsParsed)[value]) == null ? void 0 : _a.family) || 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 = ((_b = font == null ? void 0 : font[fontShorthand[key] || key]) == null ? void 0 : _b[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);
         }
-        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} {`) : styleRule = `${prefix} ${mediaQuery}{${precedenceImportancePrefix}${styleInner}}`;
       }
-      return {
-        property,
-        rules: [styleRule],
-        identifier: nextIdentifier
-      };
+      return hasSet ? resolveVariableValue(valOrVar, resolveAs) : (process.env.NODE_ENV === "development" && import_isDevTools.isDevTools && styleState.debug === "verbose" && (console.groupCollapsed("  \uFE52 propMap (val)", key, value), console.log({ valOrVar, theme, hasSet }, theme ? theme[key] : ""), console.groupEnd()), value);
     };
-  }
-});
-
-// ../web/dist/cjs/helpers/getStylesAtomic.native.js
-var require_getStylesAtomic_native = __commonJS({
-  "../web/dist/cjs/helpers/getStylesAtomic.native.js"(exports, module2) {
-    "use strict";
-    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
-      for (var name in all)
-        __defProp2(target, name, { get: all[name], enumerable: !0 });
-    }, __copyProps2 = (to, from, except, desc) => {
-      if (from && typeof from == "object" || typeof from == "function")
-        for (let key of __getOwnPropNames2(from))
-          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
-      return to;
-    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), getStylesAtomic_native_exports = {};
-    __export2(getStylesAtomic_native_exports, {
-      generateAtomicStyles: () => generateAtomicStyles,
-      getAtomicStyle: () => getAtomicStyle,
-      getStylesAtomic: () => getStylesAtomic,
-      styleToCSS: () => styleToCSS
-    });
-    module2.exports = __toCommonJS2(getStylesAtomic_native_exports);
-    var empty = () => {
-      console.warn("no-op native");
-    }, getStylesAtomic = empty, generateAtomicStyles = empty, getAtomicStyle = empty, styleToCSS = empty;
+    function resolveVariableValue(valOrVar, resolveValues) {
+      return resolveValues === "none" ? valOrVar : (0, import_createVariable.isVariable)(valOrVar) ? !import_constants2.isWeb || resolveValues === "value" ? valOrVar.val : valOrVar.variable : valOrVar;
+    }
   }
 });
 
@@ -3832,7 +3403,7 @@ var require_getSplitStyles_native = __commonJS({
       }), console.groupEnd());
       for (let keyOg in props) {
         let keyInit = keyOg, valInit = props[keyOg];
-        if (keyInit in shorthands && (keyInit = shorthands[keyInit]), keyInit === "className" || keyInit in usedKeys || keyInit in skipProps && !isHOC)
+        if (styleProps.disableExpandShorthands || keyInit in shorthands && (keyInit = shorthands[keyInit]), keyInit === "className" || keyInit in usedKeys || keyInit in skipProps && !isHOC)
           continue;
         let valInitType = typeof valInit;
         if (styleState.curProps[keyInit] = valInit, !import_constants2.isAndroid && keyInit === "elevationAndroid")
@@ -3884,7 +3455,7 @@ var require_getSplitStyles_native = __commonJS({
             default:
           }
         let isValidStyleKeyInit = keyInit in validStyleProps, 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 || isValidStyleKeyInit || isShorthand;
-        if (isStyleProp && props.asChild === "except-style")
+        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;
@@ -4011,7 +3582,14 @@ current`, {
                   // TODO try true like pseudo
                   !1
                 ), mediaKeyShort = key.slice(1);
-                process.env.NODE_ENV === "development" && debug === "verbose" && console.log(`  \u{1F4FA} ${key}`, { key, val, mediaStyle, props, shouldDoClasses, componentState });
+                process.env.NODE_ENV === "development" && debug === "verbose" && console.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])) {
@@ -4112,9 +3690,9 @@ current`, {
           }
         }
       }
-      if (props.style && mergeStyleProp(styleState, props.style), (0, import_expandStyles.fixStyles)(style), import_constants2.isWeb && !staticConfig.isReactNative && (0, import_getStylesAtomic.styleToCSS)(style), styleState.transforms && Object.entries(styleState.transforms).sort(([a], [b]) => a.localeCompare(b)).forEach(([key, val]) => {
+      if (props.style && mergeStyleProp(styleState, props.style), !styleProps.noNormalize && ((0, import_expandStyles.fixStyles)(style), import_constants2.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)
+      }), parentSplitStyles && !shouldDoClasses))
         for (let key in parentSplitStyles.style)
           key in classNames || key in style || (style[key] = parentSplitStyles.style[key]);
       let result = {
@@ -4160,27 +3738,27 @@ current`, {
       return result;
     };
     function mergeStyle(styleState, key, val) {
-      let { classNames, viewProps, style, usedKeys } = styleState;
+      let { classNames, viewProps, style, usedKeys, styleProps } = styleState;
       if (import_constants2.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_constants2.isWeb ? (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(val, key) : val;
+        let out = import_constants2.isWeb && !styleProps.noNormalize ? (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(val, key) : val;
         key in import_helpers.validStylesOnBaseProps ? viewProps[key] = out : style[key] = out;
       }
     }
     var getSubStyle = (styleState, subKey, styleIn, avoidMergeTransform) => {
-      let { staticConfig, props, conf: conf2 } = styleState, styleOut = {};
+      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))
           for (let [skey, sval] of expanded)
-            !avoidMergeTransform && skey in import_helpers.stylePropsTransform ? mergeTransform(styleOut, skey, sval) : styleOut[skey] = (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(sval, key);
+            !avoidMergeTransform && skey in import_helpers.stylePropsTransform ? mergeTransform(styleOut, skey, sval) : styleOut[skey] = styleProps.noNormalize ? sval : (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(sval, key);
       }
-      return (0, import_expandStyles.fixStyles)(styleOut), styleOut;
+      return styleProps.noNormalize || (0, import_expandStyles.fixStyles)(styleOut), styleOut;
     };
     function mergeStyleProp(styleState, val) {
       if (!val)
@@ -4323,12 +3901,421 @@ var require_proxyThemeVariables_native = __commonJS({
         has(target, key) {
           return Reflect.has(target, removeStarting$(key));
         },
-        get(target, key) {
-          return Reflect.get(target, removeStarting$(key));
+        get(target, key) {
+          return Reflect.get(target, removeStarting$(key));
+        }
+      });
+    }
+    var removeStarting$ = (str) => typeof str == "string" && str[0] === "$" ? str.slice(1) : str;
+  }
+});
+
+// ../web/dist/cjs/helpers/ThemeManagerContext.native.js
+var require_ThemeManagerContext_native = __commonJS({
+  "../web/dist/cjs/helpers/ThemeManagerContext.native.js"(exports, module2) {
+    "use strict";
+    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
+      for (var name in all)
+        __defProp2(target, name, { get: all[name], enumerable: !0 });
+    }, __copyProps2 = (to, from, except, desc) => {
+      if (from && typeof from == "object" || typeof from == "function")
+        for (let key of __getOwnPropNames2(from))
+          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
+      return to;
+    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), ThemeManagerContext_exports = {};
+    __export2(ThemeManagerContext_exports, {
+      ThemeManagerContext: () => ThemeManagerContext
+    });
+    module2.exports = __toCommonJS2(ThemeManagerContext_exports);
+    var import_react = require("react"), ThemeManagerContext = (0, import_react.createContext)(null);
+  }
+});
+
+// ../web/dist/cjs/helpers/ThemeManager.native.js
+var require_ThemeManager_native = __commonJS({
+  "../web/dist/cjs/helpers/ThemeManager.native.js"(exports, module2) {
+    "use strict";
+    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
+      for (var name in all)
+        __defProp2(target, name, { get: all[name], enumerable: !0 });
+    }, __copyProps2 = (to, from, except, desc) => {
+      if (from && typeof from == "object" || typeof from == "function")
+        for (let key of __getOwnPropNames2(from))
+          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
+      return to;
+    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), ThemeManager_exports = {};
+    __export2(ThemeManager_exports, {
+      ThemeManager: () => ThemeManager,
+      getHasThemeUpdatingProps: () => getHasThemeUpdatingProps,
+      getNonComponentParentManager: () => getNonComponentParentManager
+    });
+    module2.exports = __toCommonJS2(ThemeManager_exports);
+    var import_constants2 = require_index_native2(), import_config = require_config_native(), import_constants22 = require_constants_native(), emptyState = { name: "" };
+    function getHasThemeUpdatingProps(props) {
+      return props.name || props.componentName || props.inverse || props.reset;
+    }
+    var uid = 0, ThemeManager = class {
+      constructor(props = {}, parentManagerIn) {
+        if (this.props = props, this.id = uid++, this.isComponent = !1, this.themeListeners = /* @__PURE__ */ new Set(), this.parentManager = null, this.state = emptyState, this.scheme = null, this._allKeys = null, parentManagerIn === "root") {
+          this.updateStateFromProps(props, !1);
+          return;
+        }
+        if (!parentManagerIn)
+          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 0";
+        if (this.parentManager = parentManagerIn, !this.updateStateFromProps(props, !1))
+          return parentManagerIn || this;
+      }
+      updateStateFromProps(props = this.props || {}, shouldNotify = !0) {
+        if (this.props = props, props.forceTheme)
+          return this.state.theme = props.forceTheme, this.state.name = props.name || "", !0;
+        let nextState = this.getStateIfChanged(props);
+        if (nextState)
+          return this.updateState(nextState, shouldNotify), nextState;
+      }
+      updateState(nextState, shouldNotify = !0) {
+        this.state = nextState;
+        let names = this.state.name.split("_"), lastName = names[names.length - 1][0];
+        this.isComponent = lastName[0] === lastName[0].toUpperCase(), this._allKeys = null, this.scheme = names[0] === "light" ? "light" : names[0] === "dark" ? "dark" : null, process.env.NODE_ENV === "development" && (this._numChangeEventsSent ??= 0, this._numChangeEventsSent++), shouldNotify && queueMicrotask(() => {
+          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 === "development" && debugId && (this._listeningIds ??= /* @__PURE__ */ new Set(), this._listeningIds.add(debugId)), this.themeListeners.add(cb), () => {
+          this.themeListeners.delete(cb);
+        };
+      }
+    };
+    function getNextThemeClassName(name) {
+      return `t_sub_theme ${import_constants22.THEME_CLASSNAME_PREFIX}${name}`.replace("light_", "").replace("dark_", "");
+    }
+    function getState(props, parentManager) {
+      var _a, _b, _c, _d, _e, _f;
+      let validManagerAndAllComponentThemes = getNonComponentParentManager(parentManager);
+      parentManager = validManagerAndAllComponentThemes[0];
+      let allComponentThemes = validManagerAndAllComponentThemes[1], themes = (0, import_config.getThemes)(), isDirectParentAComponentTheme = allComponentThemes.length > 0;
+      if (props.name && props.reset)
+        throw new Error("Cannot reset + set new name");
+      if (!props.name && !props.inverse && !props.reset && !props.componentName)
+        return null;
+      if (props.reset && !isDirectParentAComponentTheme && !(parentManager != null && parentManager.parentManager))
+        return process.env.NODE_ENV === "development" && console.warn("Cannot reset no grandparent exists"), null;
+      let result = null, nextName = props.reset ? isDirectParentAComponentTheme ? ((_a = parentManager == null ? void 0 : parentManager.state) == null ? void 0 : _a.name) || "" : ((_c = (_b = parentManager == null ? void 0 : parentManager.parentManager) == null ? void 0 : _b.state) == null ? void 0 : _c.name) || "" : props.name || "", { componentName } = props, parentName = props.reset ? isDirectParentAComponentTheme ? (
+        // here because parentManager already skipped componentTheme so we have to only go up once
+        ((_d = parentManager == null ? void 0 : parentManager.parentManager) == null ? void 0 : _d.state.name) || ""
+      ) : ((_f = (_e = parentManager == null ? void 0 : parentManager.parentManager) == null ? void 0 : _e.parentManager) == null ? void 0 : _f.state.name) || "" : isDirectParentAComponentTheme ? allComponentThemes[0] || "" : (parentManager == null ? void 0 : parentManager.state.name) || "";
+      props.reset && isDirectParentAComponentTheme && allComponentThemes.shift();
+      let base = parentName.split(import_constants22.THEME_NAME_SEPARATOR), lastSegment = base[base.length - 1], isParentComponentTheme = parentName && lastSegment[0].toUpperCase() === lastSegment[0];
+      isParentComponentTheme && base.pop();
+      let parentBaseTheme = isParentComponentTheme ? base.slice(0, base.length).join(import_constants22.THEME_NAME_SEPARATOR) : parentName, max = base.length, min = componentName && !nextName ? max : 0;
+      process.env.NODE_ENV === "development" && typeof props.debug == "string" && (console.groupCollapsed("ThemeManager.getState()"), console.log({
+        props,
+        parentName,
+        parentBaseTheme,
+        base,
+        min,
+        max,
+        isParentComponentTheme
+      }));
+      for (let i = max; i >= min; i--) {
+        let prefix = base.slice(0, i).join(import_constants22.THEME_NAME_SEPARATOR);
+        props.inverse && (prefix = inverseThemeName(prefix));
+        let potentials = [];
+        if (prefix && prefix !== parentBaseTheme && potentials.push(prefix), nextName && potentials.unshift(prefix ? `${prefix}_${nextName}` : nextName), i === 1) {
+          let lastSegment2 = potentials.findIndex((x) => !x.includes("_"));
+          lastSegment2 > 0 && potentials.splice(lastSegment2, 0, nextName);
+        }
+        if (componentName) {
+          let componentPotentials = [];
+          if (nextName) {
+            let beforeSeparator = prefix.slice(0, prefix.indexOf(import_constants22.THEME_NAME_SEPARATOR));
+            componentPotentials.push(`${beforeSeparator}_${nextName}_${componentName}`);
+          }
+          if (componentPotentials.push(`${prefix}_${componentName}`), nextName) {
+            let prefixLessOne = base.slice(0, i - 1).join(import_constants22.THEME_NAME_SEPARATOR);
+            if (prefixLessOne) {
+              let lessSpecific = `${prefixLessOne}_${nextName}_${componentName}`;
+              componentPotentials.unshift(lessSpecific);
+            }
+            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 === "development" && typeof props.debug == "string" && console.log(" - ", { found, potentials, parentManager }), found) {
+          result = {
+            name: found,
+            theme: themes[found],
+            className: import_constants2.isWeb ? getNextThemeClassName(found) : "",
+            parentName,
+            componentName,
+            inverse: props.inverse
+          };
+          break;
+        }
+      }
+      return process.env.NODE_ENV === "development" && typeof props.debug == "string" && typeof window < "u" && (console.warn("ThemeManager.getState():", {
+        result
+      }), console.trace(), console.groupEnd()), result;
+    }
+    var inverseThemeName = (themeName) => themeName.startsWith("light") ? themeName.replace(/^light/, "dark") : themeName.replace(/^dark/, "light");
+    function getNonComponentParentManager(themeManager) {
+      var _a;
+      let res = themeManager, componentThemeNames = [];
+      for (; res && res != null && res.isComponent; )
+        componentThemeNames.push((_a = res == null ? void 0 : res.state) == null ? void 0 : _a.name), res = res.parentManager;
+      return [res || null, componentThemeNames];
+    }
+  }
+});
+
+// ../web/dist/cjs/hooks/getThemeUnwrapped.native.js
+var require_getThemeUnwrapped_native = __commonJS({
+  "../web/dist/cjs/hooks/getThemeUnwrapped.native.js"(exports, module2) {
+    "use strict";
+    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
+      for (var name in all)
+        __defProp2(target, name, { get: all[name], enumerable: !0 });
+    }, __copyProps2 = (to, from, except, desc) => {
+      if (from && typeof from == "object" || typeof from == "function")
+        for (let key of __getOwnPropNames2(from))
+          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
+      return to;
+    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), getThemeUnwrapped_exports = {};
+    __export2(getThemeUnwrapped_exports, {
+      GetThemeUnwrapped: () => GetThemeUnwrapped,
+      getThemeUnwrapped: () => getThemeUnwrapped
+    });
+    module2.exports = __toCommonJS2(getThemeUnwrapped_exports);
+    var getThemeUnwrapped = (theme) => (theme == null ? void 0 : theme[GetThemeUnwrapped]) || theme, GetThemeUnwrapped = Symbol();
+  }
+});
+
+// ../web/dist/cjs/hooks/useTheme.native.js
+var require_useTheme_native = __commonJS({
+  "../web/dist/cjs/hooks/useTheme.native.js"(exports, module2) {
+    "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,
+      getThemeProxied: () => getThemeProxied,
+      useChangeThemeEffect: () => useChangeThemeEffect,
+      useTheme: () => useTheme,
+      useThemeWithState: () => useThemeWithState
+    });
+    module2.exports = __toCommonJS2(useTheme_exports);
+    var import_constants2 = require_index_native2(), import_react = require("react"), import_config = require_config_native(), import_createVariable = require_createVariable_native(), import_createProxy = require_createProxy_native(), import_ThemeManager = require_ThemeManager_native(), import_ThemeManagerContext = require_ThemeManagerContext_native(), import_getThemeUnwrapped = require_getThemeUnwrapped_native(), emptyProps = { name: null }, cached;
+    function getDefaultThemeProxied() {
+      if (cached)
+        return cached;
+      let config = (0, import_config.getConfig)(), defaultTheme = config.themes.light ?? config.themes[Object.keys(config.themes)[0]];
+      return cached = getThemeProxied(defaultTheme), cached;
+    }
+    var useTheme = (props = emptyProps) => {
+      let [_, theme] = useThemeWithState(props);
+      return theme || getDefaultThemeProxied();
+    }, useThemeWithState = (props) => {
+      let keys = (0, import_react.useRef)([]), changedThemeState = useChangeThemeEffect(
+        props,
+        !1,
+        keys.current,
+        import_constants2.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" && props.debug && props.debug !== "profile" && console.log("  \u{1F3A8} useTheme() shouldUpdate?", next, {
+            shouldUpdateProp: (_b = props.shouldUpdate) == null ? void 0 : _b.call(props),
+            keys: [...keys.current]
+          }), next;
+        }
+      ), { themeManager, state } = changedThemeState, { theme, name, className } = state;
+      if (!theme)
+        throw process.env.NODE_ENV === "development" ? new Error(
+          `No theme found given props ${JSON.stringify(
+            props
+          )}. Themes given to tamagui are: ${Object.keys((0, import_config.getConfig)().themes)}`
+        ) : "\u274C 1";
+      let themeProxied = (0, import_react.useMemo)(() => getThemeProxied(theme, themeManager, keys.current, props.debug), [theme, name, className, themeManager]);
+      return process.env.NODE_ENV === "development" && props.debug === "verbose" && (console.groupCollapsed("  \u{1F539} useTheme =>", name), console.log("returning state", changedThemeState, "from props", props), console.groupEnd()), [changedThemeState, themeProxied];
+    };
+    function getThemeProxied(theme, themeManager, keys, debug) {
+      return (0, import_createProxy.createProxy)(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 (key === import_getThemeUnwrapped.GetThemeUnwrapped)
+            return theme;
+          if (
+            // dont ask me, idk why but on hermes you can see that useTheme()[undefined] passes in STRING undefined to proxy
+            // if someone is crazy enough to use "undefined" as a theme key then this not working is on them
+            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) {
+                  return keys && (subkey === "val" || subkey === "get" && !import_constants2.isWeb) && !keys.includes(keyString) && (keys.push(keyString), process.env.NODE_ENV === "development" && debug && console.log(` \u{1F3A8} useTheme() tracking new key: ${keyString}`)), subkey === "get" ? () => (0, import_createVariable.getVariable)(val) : Reflect.get(val, subkey);
+                }
+              });
+          }
+          return Reflect.get(_, key);
         }
       });
     }
-    var removeStarting$ = (str) => typeof str == "string" && str[0] === "$" ? str.slice(1) : str;
+    var activeThemeManagers = /* @__PURE__ */ new Set(), useChangeThemeEffect = (props, root = !1, keys, shouldUpdate) => {
+      let {
+        // @ts-expect-error internal use only
+        disable
+      } = props, parentManager = (0, import_react.useContext)(import_ThemeManagerContext.ThemeManagerContext);
+      if (disable) {
+        if (!parentManager)
+          throw "\u274C 2";
+        return {
+          isNewTheme: !1,
+          state: parentManager.state,
+          themeManager: parentManager
+        };
+      }
+      let [themeState, setThemeState] = (0, import_react.useState)(createState), { state, mounted, isNewTheme, themeManager } = themeState, isInversingOnMount = !!(!themeState.mounted && props.inverse);
+      function getShouldUpdateTheme(manager = themeManager, nextState, prevState = state, forceShouldChange = !1) {
+        let forceUpdate = shouldUpdate == null ? void 0 : shouldUpdate();
+        if (!forceShouldChange && forceUpdate === !1)
+          return;
+        let next = nextState || manager.getState(props, parentManager);
+        if (forceShouldChange || next && !(forceUpdate !== !0 && !manager.getStateShouldChange(next, prevState)))
+          return next;
+      }
+      if (import_constants2.isServer || ((0, import_react.useLayoutEffect)(() => {
+        if (props.inverse && !mounted) {
+          setThemeState({ ...themeState, mounted: !0 });
+          return;
+        }
+        isNewTheme && themeManager && activeThemeManagers.add(themeManager), (isNewTheme || getShouldUpdateTheme(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) => {
+          let force = shouldUpdate == null ? void 0 : shouldUpdate(), doUpdate = force ?? !!(keys != null && keys.length || isNewTheme);
+          process.env.NODE_ENV === "development" && props.debug && console.log(" \u{1F538} onChange", themeManager.id, {
+            force,
+            doUpdate,
+            props,
+            name,
+            manager,
+            keys
+          }), doUpdate && setThemeState(createState);
+        }, themeManager.id);
+        return () => {
+          selfListenerDispose(), disposeChangeListener == null || disposeChangeListener(), 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_react.useEffect)(() => (globalThis.TamaguiThemeManagers ??= /* @__PURE__ */ new Set(), globalThis.TamaguiThemeManagers.add(themeManager), () => {
+        globalThis.TamaguiThemeManagers.delete(themeManager);
+      }), [themeManager])), isInversingOnMount) {
+        if (!parentManager)
+          throw "\u274C 3";
+        return {
+          isNewTheme: !1,
+          themeManager: parentManager,
+          state: {
+            ...parentManager.state,
+            className: ""
+          }
+        };
+      }
+      return {
+        state,
+        isNewTheme,
+        themeManager
+      };
+      function createState(prev, force = !1) {
+        if (prev && (shouldUpdate == null ? void 0 : shouldUpdate()) === !1)
+          return prev;
+        let themeManager2 = parentManager, state2;
+        if ((0, import_ThemeManager.getHasThemeUpdatingProps)(props)) {
+          let getNewThemeManager = () => new import_ThemeManager.ThemeManager(props, root ? "root" : parentManager);
+          if (prev != null && prev.themeManager) {
+            themeManager2 = prev.themeManager;
+            let forceChange = !!(keys != null && keys.length), next = themeManager2.getState(props, parentManager), nextState = getShouldUpdateTheme(
+              themeManager2,
+              next,
+              prev.state,
+              forceChange
+            );
+            nextState ? (state2 = nextState, !prev.isNewTheme || !import_constants2.isWeb ? themeManager2 = getNewThemeManager() : themeManager2.updateState(nextState)) : prev.isNewTheme && parentManager && !next && (themeManager2 = parentManager);
+          } else
+            themeManager2 = getNewThemeManager(), state2 = { ...themeManager2.state };
+        }
+        let isNewTheme2 = !!(themeManager2 !== parentManager || props.inverse), mounted2 = props.inverse ? root || (prev == null ? void 0 : prev.mounted) : !0;
+        if (state2 || (isNewTheme2 ? state2 = themeManager2.state : (state2 = parentManager.state, themeManager2 = parentManager)), !force && state2.name === (prev == null ? void 0 : prev.state.name))
+          return prev;
+        let response = {
+          state: state2,
+          themeManager: themeManager2,
+          isNewTheme: isNewTheme2,
+          mounted: mounted2
+        };
+        if (process.env.NODE_ENV === "development" && props.debug && import_constants2.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.log({
+            props,
+            parentState,
+            parentId,
+            themeManager: themeManager2,
+            prev,
+            response,
+            themeManagerState
+          }), console.groupEnd();
+        }
+        return response;
+      }
+    };
   }
 });
 
@@ -4541,7 +4528,7 @@ var require_Slot_native = __commonJS({
       Slottable: () => Slottable
     });
     module2.exports = __toCommonJS2(Slot_exports);
-    var import_compose_refs = require_index_native6(), import_constants2 = require_index_native2(), import_helpers = require_index_native4(), import_react = require("react"), import_jsx_runtime = require("react/jsx-runtime"), Slot = (0, import_react.forwardRef)(function(props, forwardedRef) {
+    var import_compose_refs = require_index_native5(), import_constants2 = require_index_native2(), import_helpers = require_index_native4(), import_react = require("react"), import_jsx_runtime = require("react/jsx-runtime"), Slot = (0, import_react.forwardRef)(function(props, forwardedRef) {
       let { children, ...slotProps } = props;
       if ((0, import_react.isValidElement)(children)) {
         let mergedProps = mergeSlotProps(children, slotProps);
@@ -4602,7 +4589,7 @@ var require_createComponent_native = __commonJS({
       spacedChildren: () => spacedChildren
     });
     module2.exports = __toCommonJS2(createComponent_exports);
-    var import_compose_refs = require_index_native6(), import_constants2 = require_index_native2(), import_helpers = require_index_native4(), import_use_did_finish_ssr = require_index_native7(), import_react = __toESM2(require("react")), import_config = require_config_native(), import_constants22 = require_constants_native(), import_ComponentContext = require_ComponentContext_native(), import_createVariable = require_createVariable_native(), import_defaultComponentState = require_defaultComponentState_native(), import_createShallowSetState = require_createShallowSetState_native(), import_getSplitStyles = require_getSplitStyles_native(), import_mergeProps = require_mergeProps_native(), import_proxyThemeVariables = require_proxyThemeVariables_native(), import_themeable = require_themeable_native(), import_useMedia = require_useMedia_native(), import_useTheme = require_useTheme_native(), import_setupHooks = require_setupHooks_native(), import_Slot = require_Slot_native(), import_Theme = require_Theme_native(), import_ThemeDebug = require_ThemeDebug_native(), import_jsx_runtime = require("react/jsx-runtime"), tamaguiConfig, AnimatedText, AnimatedView, initialTheme, time, debugKeyListeners, startVisualizer, mouseUps = /* @__PURE__ */ new Set();
+    var import_compose_refs = require_index_native5(), import_constants2 = require_index_native2(), import_helpers = require_index_native4(), import_use_did_finish_ssr = require_index_native6(), import_react = __toESM2(require("react")), import_config = require_config_native(), import_constants22 = require_constants_native(), import_ComponentContext = require_ComponentContext_native(), import_createVariable = require_createVariable_native(), import_defaultComponentState = require_defaultComponentState_native(), import_createShallowSetState = require_createShallowSetState_native(), import_getSplitStyles = require_getSplitStyles_native(), import_mergeProps = require_mergeProps_native(), import_proxyThemeVariables = require_proxyThemeVariables_native(), import_themeable = require_themeable_native(), import_useMedia = require_useMedia_native(), import_useTheme = require_useTheme_native(), import_setupHooks = require_setupHooks_native(), import_Slot = require_Slot_native(), import_Theme = require_Theme_native(), import_ThemeDebug = require_ThemeDebug_native(), import_jsx_runtime = require("react/jsx-runtime"), tamaguiConfig, AnimatedText, AnimatedView, initialTheme, time, debugKeyListeners, startVisualizer, mouseUps = /* @__PURE__ */ new Set();
     if (typeof document < "u") {
       let cancelTouches = () => {
         mouseUps.forEach((x) => x()), mouseUps.clear();
@@ -4781,13 +4768,13 @@ var require_createComponent_native = __commonJS({
           stateRef
         );
         process.env.NODE_ENV === "development" && time && time`media`, (0, import_createVariable.setDidGetVariableValue)(!1);
-        let resolveVariablesAs = (
+        let resolveValues = (
           // if HOC + mounted + has animation prop, resolve as value so it passes non-variable to child
           isAnimated && !supportsCSSVars || isHOC && state.unmounted == !1 && hasAnimationProp ? "value" : "auto"
         ), keepStyleSSR = willBeAnimated && (animationsConfig == null ? void 0 : animationsConfig.keepStyleSSR), styleProps = {
           mediaState: mediaState2,
           noClassNames,
-          resolveVariablesAs,
+          resolveValues,
           isExiting,
           isAnimated,
           keepStyleSSR
@@ -4845,15 +4832,15 @@ var require_createComponent_native = __commonJS({
         let {
           asChild,
           children,
+          themeShallow,
+          spaceDirection: _spaceDirection,
+          disabled: disabledProp,
           onPress,
           onLongPress,
           onPressIn,
           onPressOut,
           onHoverIn,
           onHoverOut,
-          themeShallow,
-          spaceDirection: _spaceDirection,
-          disabled: disabledProp,
           onMouseUp,
           onMouseDown,
           onMouseEnter,
@@ -4941,24 +4928,24 @@ If you meant to do this, you can disable this warning - either change untilMeasu
         fontFamily && fontFamily[0] === "$" && (fontFamily = fontFamily.slice(1));
         let fontFamilyClassName = fontFamily ? `font_${fontFamily}` : "", style = avoidAnimationStyle ? splitStyles.style : animationStyles || splitStyles.style, className;
         viewProps.style = style;
-        let runtimePressStyle = !disabled && noClassNames && (pseudos == null ? void 0 : pseudos.pressStyle), attachPress = !!(groupName || runtimePressStyle || onPress || onPressOut || onPressIn || onLongPress || onClick), runtimeHoverStyle = !disabled && noClassNames && (pseudos == null ? void 0 : pseudos.hoverStyle), isHoverable = import_constants2.isWeb && !!(groupName || runtimeHoverStyle || onHoverIn || onHoverOut || onMouseEnter || onMouseLeave), handlesPressEvents = !(import_constants2.isWeb || asChild), shouldAttach = !!(attachPress || isHoverable || noClassNames && "pressStyle" in props || import_constants2.isWeb && noClassNames && "hoverStyle" in props);
+        let runtimePressStyle = !disabled && noClassNames && (pseudos == null ? void 0 : pseudos.pressStyle), attachPress = !!(groupName || runtimePressStyle || onPress || onPressOut || onPressIn || onLongPress || onClick), needsHoverState = !disabled && noClassNames && (pseudos == null ? void 0 : pseudos.hoverStyle) || onHoverIn || onHoverOut, isHoverable = import_constants2.isWeb && !!(groupName || needsHoverState || onMouseEnter || onMouseLeave), handlesPressEvents = !(import_constants2.isWeb || asChild), shouldAttach = !!(attachPress || isHoverable || noClassNames && "pressStyle" in props || import_constants2.isWeb && noClassNames && "hoverStyle" in props);
         process.env.NODE_ENV === "development" && time && time`events-setup`;
-        let events = shouldAttach && !isDisabled && !asChild ? {
+        let events = shouldAttach && !isDisabled && !props.asChild ? {
           onPressOut: attachPress ? (e) => {
             unPress(), onPressOut == null || onPressOut(e), onMouseUp == null || onMouseUp(e);
           } : void 0,
           ...(isHoverable || attachPress) && {
             onMouseEnter: (e) => {
               let next = {};
-              next.hover = !0, state.pressIn && (next.press = !0), setStateShallow(next), onHoverIn == null || onHoverIn(e), onMouseEnter == null || onMouseEnter(e);
+              needsHoverState && (next.hover = !0), runtimePressStyle && state.pressIn && (next.press = !0), setStateShallow(next), onHoverIn == null || onHoverIn(e), onMouseEnter == null || onMouseEnter(e);
             },
             onMouseLeave: (e) => {
               let next = {};
-              mouseUps.add(unPress), next.hover = !1, state.pressIn && (next.press = !1, next.pressIn = !1), setStateShallow(next), onHoverOut == null || onHoverOut(e), onMouseLeave == null || onMouseLeave(e);
+              mouseUps.add(unPress), needsHoverState && (next.hover = !1), runtimePressStyle && state.pressIn && (next.press = !1, next.pressIn = !1), setStateShallow(next), onHoverOut == null || onHoverOut(e), onMouseLeave == null || onMouseLeave(e);
             }
           },
           onPressIn: attachPress ? (e) => {
-            setStateShallow({
+            runtimePressStyle && setStateShallow({
               press: !0,
               pressIn: !0
             }), onPressIn == null || onPressIn(e), onMouseDown == null || onMouseDown(e), import_constants2.isWeb && mouseUps.add(unPress);
@@ -4970,7 +4957,7 @@ If you meant to do this, you can disable this warning - either change untilMeasu
             unPress(), onLongPress == null || onLongPress(e);
           } : void 0
         } : null;
-        events && Object.assign(events, {
+        events && !asChild && Object.assign(events, {
           cancelable: !viewProps.rejectResponderTermination,
           disabled: isDisabled,
           hitSlop: viewProps.hitSlop,
@@ -4990,12 +4977,7 @@ If you meant to do this, you can disable this warning - either change untilMeasu
           isZStack,
           debug: debugProp
         });
-        asChild && (elementType = import_Slot.Slot, Object.assign(viewProps, {
-          onPress,
-          onLongPress,
-          onPressIn,
-          onPressOut
-        })), process.env.NODE_ENV === "development" && time && time`spaced-as-child`, // in test mode disable perf unwrapping so react-testing-library finds Text properly
+        asChild && (elementType = import_Slot.Slot), process.env.NODE_ENV === "development" && time && time`spaced-as-child`, // in test mode disable perf unwrapping so react-testing-library finds Text properly
         process.env.NODE_ENV !== "test" && (elementType === BaseText || elementType === BaseView) ? (viewProps.children = content, content = elementType.render(viewProps, viewProps.ref)) : content = (0, import_react.createElement)(elementType, viewProps, content), process.env.NODE_ENV === "development" && time && time`create-element`;
         let subGroupContext = (0, import_react.useMemo)(() => {
           if (groupName)
@@ -6117,49 +6099,6 @@ var require_useThemeName_native = __commonJS({
   }
 });
 
-// ../web/dist/cjs/hooks/useStyle.native.js
-var require_useStyle_native = __commonJS({
-  "../web/dist/cjs/hooks/useStyle.native.js"(exports, module2) {
-    "use strict";
-    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
-      for (var name in all)
-        __defProp2(target, name, { get: all[name], enumerable: !0 });
-    }, __copyProps2 = (to, from, except, desc) => {
-      if (from && typeof from == "object" || typeof from == "function")
-        for (let key of __getOwnPropNames2(from))
-          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
-      return to;
-    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), useStyle_exports = {};
-    __export2(useStyle_exports, {
-      useStyle: () => useStyle
-    });
-    module2.exports = __toCommonJS2(useStyle_exports);
-    var import_react = require("react"), import_ComponentContext = require_ComponentContext_native(), import_defaultComponentState = require_defaultComponentState_native(), import_getSplitStyles = require_getSplitStyles_native(), import_useMedia = require_useMedia_native(), import_useTheme = require_useTheme_native();
-    function useStyle(base, style, options) {
-      let isText = base.staticConfig.isText, componentContext = (0, import_react.useContext)(import_ComponentContext.ComponentContext), [themeState] = (0, import_useTheme.useThemeWithState)({}), media = (0, import_useMedia.useMedia)(), out = (0, import_getSplitStyles.useSplitStyles)(
-        style,
-        base.staticConfig,
-        themeState.state.theme,
-        themeState.state.name,
-        import_defaultComponentState.defaultComponentState,
-        {
-          ...options,
-          mediaState: media,
-          resolveVariablesAs: "auto"
-        },
-        null,
-        componentContext,
-        isText ? "span" : "div",
-        options == null ? void 0 : options.debug
-      );
-      return {
-        style: Object.keys(out.style).length ? out.style : null,
-        classNames: out.classNames
-      };
-    }
-  }
-});
-
 // ../web/dist/cjs/hooks/useAnimationDriver.native.js
 var require_useAnimationDriver_native = __commonJS({
   "../web/dist/cjs/hooks/useAnimationDriver.native.js"(exports, module2) {
@@ -6198,13 +6137,13 @@ var require_useIsTouchDevice_native = __commonJS({
       useIsTouchDevice: () => useIsTouchDevice
     });
     module2.exports = __toCommonJS2(useIsTouchDevice_exports);
-    var import_constants2 = require_index_native2(), import_use_did_finish_ssr = require_index_native7(), useIsTouchDevice = () => import_constants2.isWeb ? (0, import_use_did_finish_ssr.useDidFinishSSR)() ? import_constants2.isTouchable : !1 : !0;
+    var import_constants2 = require_index_native2(), import_use_did_finish_ssr = require_index_native6(), useIsTouchDevice = () => import_constants2.isWeb ? (0, import_use_did_finish_ssr.useDidFinishSSR)() ? import_constants2.isTouchable : !1 : !0;
   }
 });
 
-// ../web/dist/cjs/hooks/useProps.native.js
-var require_useProps_native = __commonJS({
-  "../web/dist/cjs/hooks/useProps.native.js"(exports, module2) {
+// ../web/dist/cjs/views/Stack.native.js
+var require_Stack_native = __commonJS({
+  "../web/dist/cjs/views/Stack.native.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
       for (var name in all)
@@ -6214,24 +6153,22 @@ var require_useProps_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), useProps_exports = {};
-    __export2(useProps_exports, {
-      useProps: () => useProps
+    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), Stack_exports = {};
+    __export2(Stack_exports, {
+      Stack: () => Stack2
+    });
+    module2.exports = __toCommonJS2(Stack_exports);
+    var import_helpers = require_index_native4(), import_constants2 = require_constants_native(), import_createComponent = require_createComponent_native(), Stack2 = (0, import_createComponent.createComponent)({
+      acceptsClassName: !0,
+      defaultProps: import_constants2.stackDefaultStyles,
+      validStyles: import_helpers.validStyles
     });
-    module2.exports = __toCommonJS2(useProps_exports);
-    var import_useMedia = require_useMedia_native();
-    function useProps(props, opts) {
-      return (0, import_useMedia.useMediaPropsActive)(props, {
-        expandShorthands: !(opts != null && opts.disableExpandShorthands),
-        resolveValues: opts == null ? void 0 : opts.resolveValues
-      });
-    }
   }
 });
 
-// ../web/dist/cjs/views/Stack.native.js
-var require_Stack_native = __commonJS({
-  "../web/dist/cjs/views/Stack.native.js"(exports, module2) {
+// ../web/dist/cjs/hooks/useProps.native.js
+var require_useProps_native = __commonJS({
+  "../web/dist/cjs/hooks/useProps.native.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
       for (var name in all)
@@ -6241,16 +6178,50 @@ var require_Stack_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), Stack_exports = {};
-    __export2(Stack_exports, {
-      Stack: () => Stack2
-    });
-    module2.exports = __toCommonJS2(Stack_exports);
-    var import_helpers = require_index_native4(), import_constants2 = require_constants_native(), import_createComponent = require_createComponent_native(), Stack2 = (0, import_createComponent.createComponent)({
-      acceptsClassName: !0,
-      defaultProps: import_constants2.stackDefaultStyles,
-      validStyles: import_helpers.validStyles
+    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), useProps_exports = {};
+    __export2(useProps_exports, {
+      useProps: () => useProps,
+      usePropsAndStyle: () => usePropsAndStyle,
+      useStyle: () => useStyle
     });
+    module2.exports = __toCommonJS2(useProps_exports);
+    var import_react = require("react"), import_ComponentContext = require_ComponentContext_native(), import_defaultComponentState = require_defaultComponentState_native(), import_getSplitStyles = require_getSplitStyles_native(), import_Stack = require_Stack_native(), import_useMedia = require_useMedia_native(), import_useTheme = require_useTheme_native();
+    function useProps(props, opts) {
+      let [propsOut, styleOut] = usePropsAndStyle(props, {
+        ...opts,
+        noExpand: !0,
+        noNormalize: !0,
+        resolveValues: "none"
+      });
+      return {
+        ...propsOut,
+        ...styleOut
+      };
+    }
+    function useStyle(props, opts) {
+      return usePropsAndStyle(props, opts)[1];
+    }
+    function usePropsAndStyle(props, opts) {
+      var _a;
+      let staticConfig = ((_a = opts == null ? void 0 : opts.forComponent) == null ? void 0 : _a.staticConfig) ?? import_Stack.Stack.staticConfig, [themeState, theme] = (0, import_useTheme.useThemeWithState)({
+        componentName: staticConfig.componentName
+      }), componentContext = (0, import_react.useContext)(import_ComponentContext.ComponentContext), media = (0, import_useMedia.useMedia)(), splitStyles = (0, import_getSplitStyles.useSplitStyles)(
+        props,
+        staticConfig,
+        theme,
+        themeState.state.name,
+        import_defaultComponentState.defaultComponentStateMounted,
+        {
+          isAnimated: !1,
+          mediaState: media,
+          noClassNames: !0,
+          ...opts
+        },
+        null,
+        componentContext
+      );
+      return [splitStyles.viewProps, splitStyles.style];
+    }
   }
 });
 
@@ -6564,8 +6535,7 @@ var require_index_native9 = __commonJS({
       mediaState: () => import_useMedia.mediaState,
       setupDev: () => import_config.setupDev,
       updateConfig: () => import_config.updateConfig,
-      useMedia: () => import_useMedia.useMedia,
-      useMediaPropsActive: () => import_useMedia.useMediaPropsActive
+      useMedia: () => import_useMedia.useMedia
     });
     module2.exports = __toCommonJS2(src_exports2);
     __reExport2(src_exports2, require_Tamagui_native(), module2.exports);
@@ -6609,7 +6579,6 @@ var require_index_native9 = __commonJS({
     var import_useMedia = require_useMedia_native();
     __reExport2(src_exports2, require_useTheme_native(), module2.exports);
     __reExport2(src_exports2, require_useThemeName_native(), module2.exports);
-    __reExport2(src_exports2, require_useStyle_native(), module2.exports);
     __reExport2(src_exports2, require_useAnimationDriver_native(), module2.exports);
     __reExport2(src_exports2, require_useIsTouchDevice_native(), module2.exports);
     __reExport2(src_exports2, require_useProps_native(), module2.exports);
@@ -6622,9 +6591,9 @@ var require_index_native9 = __commonJS({
     __reExport2(src_exports2, require_FontLanguage_native(), module2.exports);
     __reExport2(src_exports2, require_TamaguiProvider_native(), module2.exports);
     __reExport2(src_exports2, require_AnimationDriverProvider_native(), module2.exports);
-    __reExport2(src_exports2, require_index_native7(), module2.exports);
-    __reExport2(src_exports2, require_index_native8(), module2.exports);
     __reExport2(src_exports2, require_index_native6(), module2.exports);
+    __reExport2(src_exports2, require_index_native8(), module2.exports);
+    __reExport2(src_exports2, require_index_native5(), module2.exports);
     __reExport2(src_exports2, require_index_native4(), module2.exports);
     __reExport2(src_exports2, require_index_native2(), module2.exports);
     __reExport2(src_exports2, require_setupHooks_native(), module2.exports);