tamagui 1.101.0 → 1.101.1

package/dist/native.js

@@ -1040,7 +1040,12 @@ var require_concatClassName_native = __commonJS({
 var require_types_native2 = __commonJS({
   "../helpers/dist/cjs/types.native.js"(exports2, module2) {
     "use strict";
-    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __copyProps2 = function(to, from, except, desc) {
+    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = function(target, all) {
+      for (var name in all) __defProp2(target, name, {
+        get: all[name],
+        enumerable: !0
+      });
+    }, __copyProps2 = function(to, from, except, desc) {
       var _iteratorNormalCompletion = !0, _didIteratorError = !1, _iteratorError = void 0;
       if (from && typeof from == "object" || typeof from == "function") try {
         for (var _loop = function() {
@@ -1068,7 +1073,25 @@ var require_types_native2 = __commonJS({
         value: !0
       }), mod);
     }, types_exports = {};
+    __export2(types_exports, {
+      StyleObjectIdentifier: function() {
+        return StyleObjectIdentifier;
+      },
+      StyleObjectProperty: function() {
+        return StyleObjectProperty;
+      },
+      StyleObjectPseudo: function() {
+        return StyleObjectPseudo;
+      },
+      StyleObjectRules: function() {
+        return StyleObjectRules;
+      },
+      StyleObjectValue: function() {
+        return StyleObjectValue;
+      }
+    });
     module2.exports = __toCommonJS2(types_exports);
+    var StyleObjectProperty = 0, StyleObjectValue = 1, StyleObjectIdentifier = 2, StyleObjectPseudo = 3, StyleObjectRules = 4;
   }
 });
 
@@ -2456,7 +2479,7 @@ var require_insertStyleRule_native = __commonJS({
       }
     });
     module2.exports = __toCommonJS2(insertStyleRule_exports);
-    var import_constants4 = require_index_native6(), import_createVariable = require_createVariable_native();
+    var import_constants4 = require_index_native6(), import_helpers = require_index_native7(), import_createVariable = require_createVariable_native();
     function _array_like_to_array2(arr, len) {
       (len == null || len > arr.length) && (len = arr.length);
       for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
@@ -2734,8 +2757,9 @@ var require_insertStyleRule_native = __commonJS({
         var _iteratorNormalCompletion = !0, _didIteratorError = !1, _iteratorError = void 0;
         try {
           for (var _iterator = rulesToInsert[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0) {
-            var _step_value = _step.value, identifier = _step_value.identifier, rules = _step_value.rules;
+            var styleObject = _step.value, identifier = styleObject[import_helpers.StyleObjectIdentifier];
             if (shouldInsertStyleRules(identifier)) {
+              var rules = styleObject[import_helpers.StyleObjectRules];
               allSelectors[identifier] = rules.join(`
 `), track(identifier), updateRules(identifier, rules);
               var _iteratorNormalCompletion1 = !0, _didIteratorError1 = !1, _iteratorError1 = void 0;
@@ -2771,7 +2795,7 @@ var require_insertStyleRule_native = __commonJS({
         }
       }
     }
-    var minInsertAmt = process.env.TAMAGUI_INSERT_SELECTOR_TRIES ? +process.env.TAMAGUI_INSERT_SELECTOR_TRIES : 2;
+    var minInsertAmt = process.env.TAMAGUI_INSERT_SELECTOR_TRIES ? +process.env.TAMAGUI_INSERT_SELECTOR_TRIES : 1;
     function shouldInsertStyleRules(identifier) {
       if (process.env.TAMAGUI_REACT_19 || process.env.IS_STATIC === "is_static") return !0;
       var total = totalSelectorsInserted.get(identifier);
@@ -3005,9 +3029,9 @@ var require_pseudoDescriptors_native = __commonJS({
   }
 });
 
-// ../web/dist/cjs/hooks/useDisableSSR.native.js
-var require_useDisableSSR_native = __commonJS({
-  "../web/dist/cjs/hooks/useDisableSSR.native.js"(exports2, module2) {
+// ../web/dist/cjs/hooks/useDidHydrateOnce.native.js
+var require_useDidHydrateOnce_native = __commonJS({
+  "../web/dist/cjs/hooks/useDidHydrateOnce.native.js"(exports2, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = function(target, all) {
       for (var name in all) __defProp2(target, name, {
@@ -3041,24 +3065,30 @@ var require_useDisableSSR_native = __commonJS({
       return __copyProps2(__defProp2({}, "__esModule", {
         value: !0
       }), mod);
-    }, useDisableSSR_exports = {};
-    __export2(useDisableSSR_exports, {
-      getDisableSSR: function() {
-        return getDisableSSR;
+    }, useDidHydrateOnce_exports = {};
+    __export2(useDidHydrateOnce_exports, {
+      useDidHydrateOnce: function() {
+        return useDidHydrateOnce;
+      },
+      useDidHydrateOnceRoot: function() {
+        return useDidHydrateOnceRoot;
       }
     });
-    module2.exports = __toCommonJS2(useDisableSSR_exports);
-    var import_config = require_config_native();
-    function getDisableSSR(componentContext) {
-      var _componentContext_disableSSR;
-      return (_componentContext_disableSSR = componentContext == null ? void 0 : componentContext.disableSSR) !== null && _componentContext_disableSSR !== void 0 ? _componentContext_disableSSR : (0, import_config.getConfig)().disableSSR;
+    module2.exports = __toCommonJS2(useDidHydrateOnce_exports);
+    var import_react4 = require("react");
+    function useDidHydrateOnceRoot() {
+      return process.env.TAMAGUI_REACT_19, !0;
+    }
+    var last = Date.now();
+    function useDidHydrateOnce() {
+      return !0;
     }
   }
 });
 
-// ../web/dist/cjs/hooks/useDidHydrateOnce.native.js
-var require_useDidHydrateOnce_native = __commonJS({
-  "../web/dist/cjs/hooks/useDidHydrateOnce.native.js"(exports2, module2) {
+// ../web/dist/cjs/hooks/useDisableSSR.native.js
+var require_useDisableSSR_native = __commonJS({
+  "../web/dist/cjs/hooks/useDisableSSR.native.js"(exports2, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = function(target, all) {
       for (var name in all) __defProp2(target, name, {
@@ -3092,23 +3122,17 @@ var require_useDidHydrateOnce_native = __commonJS({
       return __copyProps2(__defProp2({}, "__esModule", {
         value: !0
       }), mod);
-    }, useDidHydrateOnce_exports = {};
-    __export2(useDidHydrateOnce_exports, {
-      useDidHydrateOnce: function() {
-        return useDidHydrateOnce;
-      },
-      useDidHydrateOnceRoot: function() {
-        return useDidHydrateOnceRoot;
+    }, useDisableSSR_exports = {};
+    __export2(useDisableSSR_exports, {
+      getDisableSSR: function() {
+        return getDisableSSR;
       }
     });
-    module2.exports = __toCommonJS2(useDidHydrateOnce_exports);
-    var import_react4 = require("react");
-    function useDidHydrateOnceRoot() {
-      return !0;
-    }
-    var last = Date.now();
-    function useDidHydrateOnce() {
-      return !0;
+    module2.exports = __toCommonJS2(useDisableSSR_exports);
+    var import_config = require_config_native();
+    function getDisableSSR(componentContext) {
+      var _componentContext_disableSSR;
+      return (_componentContext_disableSSR = componentContext == null ? void 0 : componentContext.disableSSR) !== null && _componentContext_disableSSR !== void 0 ? _componentContext_disableSSR : (0, import_config.getConfig)().disableSSR;
     }
   }
 });
@@ -3199,7 +3223,7 @@ var require_useMedia_native = __commonJS({
       }
     });
     module2.exports = __toCommonJS2(useMedia_exports);
-    var import_constants4 = require_index_native6(), import_react4 = require("react"), import_config = require_config_native(), import_matchMedia = require_matchMedia_native(), import_pseudoDescriptors = require_pseudoDescriptors_native(), import_useDisableSSR = require_useDisableSSR_native(), import_useDidHydrateOnce = require_useDidHydrateOnce_native();
+    var import_constants4 = require_index_native6(), import_react4 = require("react"), import_config = require_config_native(), import_matchMedia = require_matchMedia_native(), import_pseudoDescriptors = require_pseudoDescriptors_native(), import_useDidHydrateOnce = require_useDidHydrateOnce_native(), import_useDisableSSR = require_useDisableSSR_native();
     function _array_like_to_array2(arr, len) {
       (len == null || len > arr.length) && (len = arr.length);
       for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
@@ -3297,12 +3321,11 @@ var require_useMedia_native = __commonJS({
       }) : {}
     ), mediaQueryConfig3 = {}, getMedia3 = function() {
       return mediaState3;
-    }, mediaKeys = /* @__PURE__ */ new Set(), isMediaKey = function(key) {
+    }, mediaKeys = /* @__PURE__ */ new Set(), mediaKeyRegex = /\$(platform|theme|group)-/, isMediaKey = function(key) {
       if (mediaKeys.has(key)) return !0;
       if (key[0] === "$") {
-        if (key.startsWith("$platform-")) return "platform";
-        if (key.startsWith("$theme-")) return "theme";
-        if (key.startsWith("$group-")) return "group";
+        var match = key.match(mediaKeyRegex);
+        if (match) return match[1];
       }
       return !1;
     }, initState, defaultMediaImportance = Object.keys(import_pseudoDescriptors.pseudoDescriptors).length, mediaKeysOrdered, getMediaKeyImportance = function(key) {
@@ -3354,23 +3377,31 @@ var require_useMedia_native = __commonJS({
       return States.set(ref, _object_spread9({}, States.get(ref), props));
     }
     function getSnapshot(param) {
-      var touched = param.touched, prev = param.prev, enabled = param.enabled, keys = param.keys, isDisabled = enabled === !1;
-      if (isDisabled) return prev;
-      var testKeys = keys || touched ? _to_consumable_array2(keys || []).concat(_to_consumable_array2(touched || [])) : null, hasntUpdated = !testKeys || (testKeys == null ? void 0 : testKeys.every(function(key) {
+      var touched = param.touched, prev = param.prev, enabled = param.enabled;
+      if (enabled === !1) return prev;
+      var hasntUpdated = !touched || touched.every(function(key) {
         return mediaState3[key] === prev[key];
-      }));
+      });
       return hasntUpdated ? prev : mediaState3;
     }
     function useMedia3(uidIn, componentContext) {
-      var uid = uidIn ?? (0, import_react4.useRef)(), hasHydrated = (0, import_useDidHydrateOnce.useDidHydrateOnce)(), isHydrated = !import_constants4.isWeb || (0, import_useDisableSSR.getDisableSSR)(componentContext) || hasHydrated, initialState = isHydrated ? mediaState3 : initState, componentState = States.get(uid);
+      var debug = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : !1, uid = uidIn ?? (0, import_react4.useRef)(), hasHydrated = (0, import_useDidHydrateOnce.useDidHydrateOnce)(), isHydrated = !import_constants4.isWeb || (0, import_useDisableSSR.getDisableSSR)(componentContext) || hasHydrated, initialState = isHydrated ? mediaState3 : initState, componentState = States.get(uid);
       componentState || (componentState = {
         prev: initialState
-      }, States.set(uid, componentState)), componentState.touched = void 0;
+      }, States.set(uid, componentState));
       var _useState = _sliced_to_array((0, import_react4.useState)(initialState), 2), state = _useState[0], setState = _useState[1];
       return (0, import_constants4.useIsomorphicLayoutEffect)(function() {
         var update = function() {
           setState(function(prev) {
-            var componentState2 = States.get(uid), next = getSnapshot(componentState2);
+            var componentState2 = States.get(uid);
+            process.env.NODE_ENV === "development" && debug && console.info("useMedia() update?", getSnapshot(componentState2) !== prev, {
+              componentState: componentState2,
+              touched: _to_consumable_array2(componentState2.touched || []),
+              prev: _object_spread9({}, componentState2.prev),
+              next: getSnapshot(componentState2),
+              mediaState: _object_spread9({}, mediaState3)
+            });
+            var next = getSnapshot(componentState2);
             return next !== prev ? (componentState2.prev = next, next) : prev;
           });
         };
@@ -3383,7 +3414,7 @@ var require_useMedia_native = __commonJS({
         get: function(_, key) {
           if (typeof key == "string") {
             var _componentState;
-            (_componentState = componentState).touched || (_componentState.touched = /* @__PURE__ */ new Set()), componentState.touched.add(key);
+            (_componentState = componentState).touched || (_componentState.touched = []), componentState.touched.includes(key) || componentState.touched.push(key), process.env.NODE_ENV === "development" && debug && console.info("useMedia() TOUCH", key);
           }
           return Reflect.get(state, key);
         }
@@ -5182,6 +5213,10 @@ var require_getGroupPropParts_native = __commonJS({
 var require_createMediaStyle_native = __commonJS({
   "../web/dist/cjs/helpers/createMediaStyle.native.js"(exports2, module2) {
     "use strict";
+    function _type_of(obj) {
+      "@swc/helpers - typeof";
+      return obj && typeof Symbol < "u" && obj.constructor === Symbol ? "symbol" : typeof obj;
+    }
     var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = function(target, all) {
       for (var name in all) __defProp2(target, name, {
         get: all[name],
@@ -5224,10 +5259,51 @@ var require_createMediaStyle_native = __commonJS({
       }
     });
     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 = {
+    var import_config = require_config_native(), import_useMedia = require_useMedia_native(), import_getGroupPropParts = require_getGroupPropParts_native();
+    function _array_like_to_array2(arr, len) {
+      (len == null || len > arr.length) && (len = arr.length);
+      for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+      return arr2;
+    }
+    function _array_with_holes(arr) {
+      if (Array.isArray(arr)) return arr;
+    }
+    function _iterable_to_array_limit(arr, i) {
+      var _i = arr == null ? null : (typeof Symbol > "u" ? "undefined" : _type_of(Symbol)) < "u" && arr[Symbol.iterator] || arr["@@iterator"];
+      if (_i != null) {
+        var _arr = [], _n = !0, _d = !1, _s, _e;
+        try {
+          for (_i = _i.call(arr); !(_n = (_s = _i.next()).done) && (_arr.push(_s.value), !(i && _arr.length === i)); _n = !0) ;
+        } catch (err) {
+          _d = !0, _e = err;
+        } finally {
+          try {
+            !_n && _i.return != null && _i.return();
+          } finally {
+            if (_d) throw _e;
+          }
+        }
+        return _arr;
+      }
+    }
+    function _non_iterable_rest() {
+      throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+    }
+    function _sliced_to_array(arr, i) {
+      return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array2(arr, i) || _non_iterable_rest();
+    }
+    function _unsupported_iterable_to_array2(o, minLen) {
+      if (o) {
+        if (typeof o == "string") return _array_like_to_array2(o, minLen);
+        var n = Object.prototype.toString.call(o).slice(8, -1);
+        if (n === "Object" && o.constructor && (n = o.constructor.name), n === "Map" || n === "Set") return Array.from(n);
+        if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array2(o, minLen);
+      }
+    }
+    var MEDIA_SEP = "_", prefixes = null, selectors = null, groupPseudoToPseudoCSSMap = {
       press: "active"
     }, createMediaStyle = function(styleObject, mediaKeyIn, mediaQueries, type, negate, priority) {
-      var property = styleObject.property, identifier = styleObject.identifier, rules = styleObject.rules, conf = (0, import_config.getConfig)(), enableMediaPropOrder = conf.settings.mediaPropOrder, isTheme = type === "theme", isPlatform = type === "platform", isGroup = type === "group", isNonWindowMedia = isTheme || isPlatform || isGroup, negKey = negate ? "0" : "", ogPrefix = identifier.slice(0, identifier.indexOf("-") + 1), id = "".concat(ogPrefix).concat(MEDIA_SEP).concat(mediaKeyIn.replace("-", "")).concat(negKey).concat(MEDIA_SEP), styleRule = "", groupMediaKey, containerName, nextIdentifier = identifier.replace(ogPrefix, id), styleInner = rules.map(function(rule) {
+      var _styleObject = _sliced_to_array(styleObject, 5), property = _styleObject[0], _value = _styleObject[1], identifier = _styleObject[2], _pseudo = _styleObject[3], rules = _styleObject[4], conf = (0, import_config.getConfig)(), enableMediaPropOrder = conf.settings.mediaPropOrder, isTheme = type === "theme", isPlatform = type === "platform", isGroup = type === "group", isNonWindowMedia = isTheme || isPlatform || isGroup, negKey = negate ? "0" : "", ogPrefix = identifier.slice(0, identifier.indexOf("-") + 1), id = "".concat(ogPrefix).concat(MEDIA_SEP).concat(mediaKeyIn.replace("-", "")).concat(negKey).concat(MEDIA_SEP), styleRule = "", groupMediaKey, containerName, nextIdentifier = identifier.replace(ogPrefix, id), styleInner = rules.map(function(rule) {
         return rule.replace(identifier, nextIdentifier);
       }).join(";");
       if (isNonWindowMedia) {
@@ -5263,13 +5339,15 @@ var require_createMediaStyle_native = __commonJS({
         ), prefix = groupMediaKey ? "@container ".concat(containerName) : "@media";
         groupMediaKey && (styleInner = styleRule), styleInner.includes(prefix) ? styleRule = styleInner.replace("{", " and ".concat(mediaQuery, " {")).replace("and screen and", "and") : styleRule = "".concat(prefix, " ").concat(mediaQuery, "{").concat(precedenceImportancePrefix1).concat(styleInner, "}"), groupMediaKey && (styleRule = "@supports (contain: ".concat(conf.settings.webContainerType || "inline-size", ") {").concat(styleRule, "}"));
       }
-      return {
+      return [
         property,
-        rules: [
+        void 0,
+        nextIdentifier,
+        void 0,
+        [
           styleRule
-        ],
-        identifier: nextIdentifier
-      };
+        ]
+      ];
     };
   }
 });
@@ -7201,7 +7279,7 @@ var require_propMapper_native = __commonJS({
           get: function(_, k) {
             return k === "curProps" ? subProps : Reflect.get(_, k);
           }
-        }) : styleStateIn, conf = styleState.conf, styleProps = styleState.styleProps, fontFamily = styleState.fontFamily, staticConfig = styleState.staticConfig, skipThemeTokenResolution = styleState.skipThemeTokenResolution, variants = staticConfig.variants;
+        }) : styleStateIn, conf = styleState.conf, styleProps = styleState.styleProps, fontFamily = styleState.fontFamily, staticConfig = styleState.staticConfig, variants = staticConfig.variants;
         if (process.env.NODE_ENV === "development" && fontFamily && fontFamily[0] === "$" && !(fontFamily in conf.fontsParsed) && console.warn('Warning: no fontFamily "'.concat(fontFamily, '" found in config: ').concat(Object.keys(conf.fontsParsed).join(", "))), !styleProps.noExpand && variants && key in variants) {
           styleState.curProps[key] = value;
           var variantValue = resolveVariants(key, value, styleProps, styleState, "");
@@ -7620,15 +7698,22 @@ var require_getSplitStyles_native = __commonJS({
         if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array2(o, minLen);
       }
     }
-    var IS_STATIC = process.env.IS_STATIC === "is_static", conf, PROP_SPLIT = "-";
+    var conf, PROP_SPLIT = "-";
     function isValidStyleKey(key, staticConfig) {
       var _staticConfig_accept, validStyleProps = staticConfig.validStyles || (staticConfig.isText || staticConfig.isInput ? import_helpers.stylePropsText : import_helpers.validStyles);
       return validStyleProps[key] || ((_staticConfig_accept = staticConfig.accept) === null || _staticConfig_accept === void 0 ? void 0 : _staticConfig_accept[key]);
     }
     var getSplitStyles = function(props, staticConfig, theme, themeName, componentState, styleProps, parentSplitStyles, context, elementType, debug, skipThemeTokenResolution) {
       conf = conf || (0, import_config.getConfig)(), import_constants4.isWeb && styleProps.isAnimated && conf.animations.isReactNative && !styleProps.noNormalize && (styleProps.noNormalize = "values");
-      var shorthands = conf.shorthands, isHOC = staticConfig.isHOC, isText = staticConfig.isText, isInput = staticConfig.isInput, variants = staticConfig.variants, isReactNative = staticConfig.isReactNative, inlineProps = staticConfig.inlineProps, inlineWhenUnflattened = staticConfig.inlineWhenUnflattened, parentStaticConfig = staticConfig.parentStaticConfig, acceptsClassName = staticConfig.acceptsClassName, viewProps = {}, mediaState3 = styleProps.mediaState || import_useMedia.mediaState, usedKeys = {}, shouldDoClasses = acceptsClassName && import_constants4.isWeb && !styleProps.noClassNames, rulesToInsert = void 0, classNames = {}, transforms = {}, pseudos = null, space = props.space, hasMedia = !1, dynamicThemeAccess, pseudoGroups, mediaGroups, className = props.className || "", mediaStylesSeen = 0, styleState = {
-        curProps: {},
+      var shorthands = conf.shorthands, isHOC = staticConfig.isHOC, isText = staticConfig.isText, isInput = staticConfig.isInput, variants = staticConfig.variants, isReactNative = staticConfig.isReactNative, inlineProps = staticConfig.inlineProps, inlineWhenUnflattened = staticConfig.inlineWhenUnflattened, parentStaticConfig = staticConfig.parentStaticConfig, acceptsClassName = staticConfig.acceptsClassName, viewProps = {}, mediaState3 = styleProps.mediaState || import_useMedia.mediaState, usedKeys = {}, shouldDoClasses = acceptsClassName && import_constants4.isWeb && !styleProps.noClassNames, rulesToInsert = void 0, classNames = {}, transforms = {}, pseudos = null, space = props.space, hasMedia = !1, dynamicThemeAccess, pseudoGroups, mediaGroups, className = props.className || "", mediaStylesSeen = 0, curPropsState, styleState = {
+        // this should go away, right now we're doing really crazy cumulative props,
+        // as variants are resolved basically we go back and merge the results onto
+        // the curProps, so that each following variant function recieves the current
+        // "styles" with variants expanded. powerful, but i think too fancy
+        // there's some part of the ui kit that depends on it we'd have to find and fix
+        get curProps() {
+          return curPropsState || (curPropsState = {}), curPropsState;
+        },
         classNames,
         conf,
         props,
@@ -7652,15 +7737,18 @@ var require_getSplitStyles_native = __commonJS({
         styleState,
         theme: _object_spread9({}, theme)
       }), console.groupEnd());
+      var asChild = props.asChild, accept = staticConfig.accept, noSkip = styleProps.noSkip, disableExpandShorthands = styleProps.disableExpandShorthands, noExpand = styleProps.noExpand, webContainerType = conf.settings.webContainerType, parentVariants = parentStaticConfig == null ? void 0 : parentStaticConfig.variants;
       for (var keyOg in props) {
-        var _parentStaticConfig_variants, keyInit = keyOg, valInit = props[keyOg];
-        if (staticConfig.accept && (staticConfig.accept[keyInit] === "style" || staticConfig.accept[keyInit] === "textStyle") && typeof valInit == "object") {
-          var styleObject = getSubStyle(styleState, keyInit, valInit, styleProps.noClassNames);
-          viewProps[keyInit] = styleObject;
-          continue;
+        var keyInit = keyOg, valInit = props[keyInit];
+        if (accept) {
+          var accepted = accept[keyInit];
+          if ((accepted === "style" || accepted === "textStyle") && valInit && typeof valInit == "object") {
+            viewProps[keyInit] = getSubStyle(styleState, keyInit, valInit, styleProps.noClassNames);
+            continue;
+          }
         }
-        if (process.env.NODE_ENV === "development" && debug === "verbose" && console.groupEnd(), styleProps.disableExpandShorthands || keyInit in shorthands && (keyInit = shorthands[keyInit]), keyInit !== "className" && !(keyInit in usedKeys)) {
-          if (keyInit in import_skipProps.skipProps && !styleProps.noSkip && !isHOC) {
+        if (process.env.NODE_ENV === "development" && debug === "verbose" && console.groupEnd(), disableExpandShorthands || keyInit in shorthands && (keyInit = shorthands[keyInit]), keyInit !== "className" && !(keyInit in usedKeys)) {
+          if (keyInit in import_skipProps.skipProps && !noSkip && !isHOC) {
             if (keyInit === "group" && !1) var identifier, containerType, containerCSS;
             continue;
           }
@@ -7669,7 +7757,7 @@ var require_getSplitStyles_native = __commonJS({
             var isValidClassName, isMediaOrPseudo;
             if ((isValidClassName || isMediaOrPseudo) && !shouldDoClasses) var _styleState;
           }
-          if (valInit !== props[keyInit] && (styleState.curProps[keyInit] = valInit), !isValidStyleKeyInit) {
+          if (!isValidStyleKeyInit) {
             if (!import_constants4.isAndroid && keyInit === "elevationAndroid") continue;
             if (keyInit === "userSelect") keyInit = "selectable", valInit = valInit !== "none";
             else if (keyInit.startsWith("data-")) continue;
@@ -7684,10 +7772,10 @@ var require_getSplitStyles_native = __commonJS({
             var name = keyInit.split("-")[1];
             context != null && context.groups.subscribe && !(context != null && context.groups.state[name]) && (keyInit = keyInit.replace("$group-", "$group-true-"));
           }
-          var isStyleProp = isValidStyleKeyInit || isMediaOrPseudo1 || isVariant && !styleProps.noExpand || isShorthand;
-          if (!(isStyleProp && (props.asChild === "except-style" || props.asChild === "except-style-web"))) {
+          var isStyleProp = isValidStyleKeyInit || isMediaOrPseudo1 || isVariant && !noExpand || isShorthand;
+          if (!(isStyleProp && (asChild === "except-style" || asChild === "except-style-web"))) {
             var 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 = parentStaticConfig == null || (_parentStaticConfig_variants = parentStaticConfig.variants) === null || _parentStaticConfig_variants === void 0 ? void 0 : _parentStaticConfig_variants[keyInit], isHOCShouldPassThrough = !!(isHOC && (isShorthand || isValidStyleKeyInit || isMediaOrPseudo1 || parentVariant || keyInit in import_skipProps.skipProps)), shouldPassThrough = shouldPassProp || isHOCShouldPassThrough;
+            isHOC && parentVariants && keyInit in parentVariants || (inlineProps == null ? void 0 : inlineProps.has(keyInit)), parentVariant = parentVariants == null ? void 0 : parentVariants[keyInit], isHOCShouldPassThrough = !!(isHOC && (isShorthand || isValidStyleKeyInit || isMediaOrPseudo1 || parentVariant || keyInit in import_skipProps.skipProps)), shouldPassThrough = shouldPassProp || isHOCShouldPassThrough;
             if (process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupEnd(), console.groupEnd(), console.groupCollapsed("  \u{1F511} ".concat(keyOg).concat(keyInit !== keyOg ? " (shorthand for ".concat(keyInit, ")") : "", " ").concat(shouldPassThrough ? "(pass)" : "")), (0, import_log.log)({
               isVariant,
               valInit,
@@ -7703,7 +7791,7 @@ var require_getSplitStyles_native = __commonJS({
               process.env.NODE_ENV === "development" && debug === "verbose" && console.groupEnd();
               continue;
             }
-            if (!styleProps.noSkip && keyInit in import_skipProps.skipProps) {
+            if (!noSkip && keyInit in import_skipProps.skipProps) {
               process.env.NODE_ENV === "development" && debug === "verbose" && console.groupEnd();
               continue;
             }
@@ -7736,17 +7824,17 @@ current`, _object_spread9({}, styleState.style)));
               console.groupEnd();
             }
             for (var key = keyInit, val = valInit, max2 = expanded ? expanded.length : 1, i = 0; i < max2; i++) {
-              var _parentStaticConfig_variants1;
+              var _parentStaticConfig_variants;
               if (expanded) {
                 var _expanded_i = _sliced_to_array(expanded[i], 2), k = _expanded_i[0], v = _expanded_i[1];
                 key = k, val = v;
               }
               if (val != null && !(key in usedKeys)) {
-                if (isPseudo = key in import_helpers.validPseudoKeys, isMedia = !isPseudo && !isValidStyleKeyInit && (0, import_useMedia.isMediaKey)(key), isMediaOrPseudo1 = !!(isMedia || isPseudo), isVariant = variants && key in variants, inlineProps != null && inlineProps.has(key) || IS_STATIC && inlineWhenUnflattened != null && inlineWhenUnflattened.has(key)) {
+                if (isPseudo = key in import_helpers.validPseudoKeys, isMedia = !isPseudo && !isValidStyleKeyInit && (0, import_useMedia.isMediaKey)(key), isMediaOrPseudo1 = !!(isMedia || isPseudo), isVariant = variants && key in variants, inlineProps != null && inlineProps.has(key) || process.env.IS_STATIC === "is_static" && inlineWhenUnflattened != null && inlineWhenUnflattened.has(key)) {
                   var _props_key;
                   viewProps[key] = (_props_key = props[key]) !== null && _props_key !== void 0 ? _props_key : val;
                 }
-                var shouldPassThrough1 = styleProps.noExpand && isPseudo || isHOC && (isMediaOrPseudo1 || (parentStaticConfig == null || (_parentStaticConfig_variants1 = parentStaticConfig.variants) === null || _parentStaticConfig_variants1 === void 0 ? void 0 : _parentStaticConfig_variants1[keyInit]));
+                var shouldPassThrough1 = styleProps.noExpand && isPseudo || isHOC && (isMediaOrPseudo1 || (parentStaticConfig == null || (_parentStaticConfig_variants = parentStaticConfig.variants) === null || _parentStaticConfig_variants === void 0 ? void 0 : _parentStaticConfig_variants[keyInit]));
                 if (shouldPassThrough1) {
                   passDownProp(viewProps, key, val, isMediaOrPseudo1), process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupCollapsed(" - passing down prop ".concat(key)), (0, import_log.log)({
                     val,
@@ -7758,9 +7846,9 @@ current`, _object_spread9({}, styleState.style)));
                   if (!val) continue;
                   var pseudoStyleObject = getSubStyle(styleState, key, val, styleProps.noClassNames), descriptor = import_pseudoDescriptors.pseudoDescriptors[key], isEnter = key === "enterStyle", isExit = key === "exitStyle";
                   if (!descriptor) continue;
-                  if (!shouldDoClasses || IS_STATIC) {
+                  if (!shouldDoClasses || process.env.IS_STATIC === "is_static") {
                     var _pseudos, _key;
-                    if (pseudos || (pseudos = {}), (_pseudos = pseudos)[_key = key] || (_pseudos[_key] = {}), IS_STATIC) {
+                    if (pseudos || (pseudos = {}), (_pseudos = pseudos)[_key = key] || (_pseudos[_key] = {}), process.env.IS_STATIC === "is_static") {
                       Object.assign(pseudos[key], pseudoStyleObject);
                       continue;
                     }
@@ -7774,8 +7862,8 @@ current`, _object_spread9({}, styleState.style)));
                     var _iteratorNormalCompletion = !0, _didIteratorError = !1, _iteratorError = void 0;
                     try {
                       for (var _iterator = pseudoStyles[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0) {
-                        var psuedoStyle = _step.value, fullKey = "".concat(psuedoStyle.property).concat(PROP_SPLIT).concat(descriptor.name);
-                        fullKey in usedKeys || mergeClassName(transforms, classNames, fullKey, psuedoStyle.identifier, isMediaOrPseudo1, !0);
+                        var psuedoStyle = _step.value, fullKey = "".concat(psuedoStyle[import_helpers.StyleObjectProperty]).concat(PROP_SPLIT).concat(descriptor.name);
+                        fullKey in usedKeys || mergeClassName(transforms, classNames, fullKey, psuedoStyle[import_helpers.StyleObjectIdentifier], isMediaOrPseudo1, !0);
                       }
                     } catch (err) {
                       _didIteratorError = !0, _iteratorError = err;
@@ -7826,7 +7914,8 @@ current`, _object_spread9({}, styleState.style)));
                 }
                 if (isMedia) {
                   if (!val) continue;
-                  if (isMedia === "platform") {
+                  var hasSpace = val.space, mediaKeyShort = key.slice(1);
+                  if (hasMedia || (hasMedia = !0), (hasSpace || !shouldDoClasses || styleProps.willBeAnimated) && (Array.isArray(hasMedia) || (hasMedia = []), hasMedia.push(mediaKeyShort)), isMedia === "platform") {
                     var platform = key.slice(10);
                     if (
                       // supports web, ios, android
@@ -7834,18 +7923,15 @@ current`, _object_spread9({}, styleState.style)));
                       platform !== "native"
                     ) continue;
                   }
-                  hasMedia || (hasMedia = !0);
-                  var mediaKeyShort = key.slice(1);
-                  process.env.NODE_ENV === "development" && debug === "verbose" && (0, import_log.log)("  \u{1F4FA} ".concat(key), {
+                  if (process.env.NODE_ENV === "development" && debug === "verbose" && (0, import_log.log)("  \u{1F4FA} ".concat(key), {
                     key,
                     val,
                     props,
                     shouldDoClasses,
                     acceptsClassName,
-                    componentState
-                  });
-                  var hasSpace = val.space;
-                  if ((hasSpace || !shouldDoClasses) && (Array.isArray(hasMedia) || (hasMedia = []), hasMedia.push(mediaKeyShort)), shouldDoClasses) {
+                    componentState,
+                    mediaState: mediaState3
+                  }), shouldDoClasses) {
                     var mediaStyle = getSubStyle(styleState, key, val, !1);
                     if (hasSpace && (delete mediaStyle.space, mediaState3[mediaKeyShort])) {
                       var importance1 = (0, import_useMedia.getMediaImportanceIfMoreImportant)(mediaKeyShort, "space", usedKeys, !0);
@@ -7858,8 +7944,8 @@ current`, _object_spread9({}, styleState.style)));
                       for (var _iterator1 = mediaStyles[Symbol.iterator](), _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = !0) {
                         var style = _step1.value, out = (0, import_createMediaStyle.createMediaStyle)(style, mediaKeyShort, import_useMedia.mediaQueryConfig, isMedia, !1, priority);
                         process.env.NODE_ENV === "development" && debug === "verbose" && (0, import_log.log)("\u{1F4FA} media style:", out);
-                        var fullKey1 = "".concat(style.property).concat(PROP_SPLIT).concat(mediaKeyShort).concat(style.pseudo || "");
-                        fullKey1 in usedKeys || mergeClassName(transforms, classNames, fullKey1, out.identifier, !0, !0);
+                        var fullKey1 = "".concat(style[import_helpers.StyleObjectProperty]).concat(PROP_SPLIT).concat(mediaKeyShort).concat(style[import_helpers.StyleObjectPseudo] || "");
+                        fullKey1 in usedKeys || mergeClassName(transforms, classNames, fullKey1, out[import_helpers.StyleObjectIdentifier], !0, !0);
                       }
                     } catch (err) {
                       _didIteratorError1 = !0, _iteratorError1 = err;
@@ -7871,9 +7957,15 @@ current`, _object_spread9({}, styleState.style)));
                       }
                     }
                   } else {
-                    var mediaStyle1 = getSubStyle(styleState, key, val, !0), isThemeMedia = isMedia === "theme", isGroupMedia = isMedia === "group", isPlatformMedia = isMedia === "platform";
-                    if (!isThemeMedia && !isPlatformMedia && !isGroupMedia && !mediaState3[mediaKeyShort]) continue;
-                    var importanceBump = 0;
+                    var isThemeMedia = isMedia === "theme", isGroupMedia = isMedia === "group", isPlatformMedia = isMedia === "platform";
+                    if (!isThemeMedia && !isPlatformMedia && !isGroupMedia) {
+                      if (!mediaState3[mediaKeyShort]) {
+                        process.env.NODE_ENV === "development" && debug === "verbose" && (0, import_log.log)("  \u{1F4FA} \u274C DISABLED ".concat(mediaKeyShort));
+                        continue;
+                      }
+                      process.env.NODE_ENV === "development" && debug === "verbose" && (0, import_log.log)("  \u{1F4FA} \u2705 ENABLED ".concat(mediaKeyShort));
+                    }
+                    var mediaStyle1 = getSubStyle(styleState, key, val, !0), importanceBump = 0;
                     if (isThemeMedia) {
                       dynamicThemeAccess = !0;
                       var mediaThemeName = mediaKeyShort.slice(6);
@@ -7938,7 +8030,7 @@ current`, _object_spread9({}, styleState.style)));
       }
       var avoidNormalize = styleProps.noNormalize === !1;
       if (!avoidNormalize) {
-        if (styleState.style && ((0, import_expandStyles.fixStyles)(styleState.style), import_constants4.isWeb && !staticConfig.isReactNative && (0, import_getStylesAtomic.styleToCSS)(styleState.style)), styleState.flatTransforms) {
+        if (styleState.style && ((0, import_expandStyles.fixStyles)(styleState.style), import_constants4.isWeb && !isReactNative && (0, import_getStylesAtomic.styleToCSS)(styleState.style)), styleState.flatTransforms) {
           var _styleState2;
           (_styleState2 = styleState).style || (_styleState2.style = {}), Object.entries(styleState.flatTransforms).sort(function(param, param1) {
             var _param = _sliced_to_array(param, 1), a = _param[0], _param1 = _sliced_to_array(param1, 1), b = _param1[0];
@@ -7963,7 +8055,7 @@ current`, _object_spread9({}, styleState.style)));
           if (!styleState.style.$$css) {
             var atomic, _iteratorNormalCompletion2, _didIteratorError2, _iteratorError2;
             try {
-              for (var _iterator2, _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = !0) var atomicStyle, _props_animateOnly, key4, isAnimatedAndAnimateOnly, nonAnimatedAnimateOnly;
+              for (var _iterator2, _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = !0) var atomicStyle, _props_animateOnly, _atomicStyle, key4, value, identifier1, isAnimatedAndAnimateOnly, nonAnimatedAnimateOnly;
             } catch (err) {
             } finally {
               try {
@@ -7972,8 +8064,8 @@ current`, _object_spread9({}, styleState.style)));
             }
           }
           if (transforms) for (var namespace in transforms) {
-            var _transforms_namespace, hash, val3, identifier1;
-            if (import_constants4.isClient && !insertedTransforms[identifier1]) var rule;
+            var _transforms_namespace, hash, val3, identifier2;
+            if (import_constants4.isClient && !insertedTransforms[identifier2]) var rule;
           }
         }
         if (!isReactNative && viewProps.tabIndex == null) var _viewProps_focusable, isFocusable, role;
@@ -8009,7 +8101,7 @@ current`, _object_spread9({}, styleState.style)));
         dynamicThemeAccess,
         pseudoGroups,
         mediaGroups
-      }, asChild = props.asChild, asChildExceptStyleLike = asChild === "except-style" || asChild === "except-style-web";
+      }, asChildExceptStyleLike = asChild === "except-style" || asChild === "except-style-web";
       if (!asChildExceptStyleLike) {
         var style3 = styleState.style;
         if (0) {
@@ -8889,7 +8981,7 @@ var require_createComponent_native = __commonJS({
       }
     });
     module2.exports = __toCommonJS2(createComponent_exports);
-    var import_jsx_runtime6 = require("react/jsx-runtime"), import_compose_refs = require_index_native10(), import_constants4 = require_index_native6(), import_helpers = require_index_native7(), import_react4 = __toESM2(require("react")), import_config = require_config_native(), import_constants22 = require_constants_native2(), import_isDevTools = require_isDevTools_native(), import_ComponentContext = require_ComponentContext_native(), import_createVariable = require_createVariable_native(), import_defaultComponentState = require_defaultComponentState_native(), import_createShallowSetState = require_createShallowSetState_native(), import_getSplitStyles = require_getSplitStyles_native(), import_isObj = require_isObj_native(), import_log = require_log_native(), import_mergeProps = require_mergeProps_native(), import_setElementProps = require_setElementProps_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_useDidHydrateOnce = require_useDidHydrateOnce_native();
+    var import_jsx_runtime6 = require("react/jsx-runtime"), import_compose_refs = require_index_native10(), import_constants4 = require_index_native6(), import_helpers = require_index_native7(), import_react4 = __toESM2(require("react")), import_config = require_config_native(), import_constants22 = require_constants_native2(), import_isDevTools = require_isDevTools_native(), import_ComponentContext = require_ComponentContext_native(), import_createVariable = require_createVariable_native(), import_defaultComponentState = require_defaultComponentState_native(), import_createShallowSetState = require_createShallowSetState_native(), import_getSplitStyles = require_getSplitStyles_native(), import_isObj = require_isObj_native(), import_log = require_log_native(), import_mergeProps = require_mergeProps_native(), import_setElementProps = require_setElementProps_native(), import_themeable = require_themeable_native(), import_useDidHydrateOnce = require_useDidHydrateOnce_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();
     function _array_like_to_array2(arr, len) {
       (len == null || len > arr.length) && (len = arr.length);
       for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
@@ -9210,20 +9302,22 @@ var require_createComponent_native = __commonJS({
       }
     }));
     var cancelTouches, useComponentState = function(props, param, staticConfig, config) {
-      var animationDriver = param.animationDriver, groups = param.groups, _animationDriver_usePresence, useAnimations = animationDriver == null ? void 0 : animationDriver.useAnimations, stateRef = (0, import_react4.useRef)({}), hasAnimationProp = !!("animation" in props || props.style && hasAnimatedStyleValue(props.style)), supportsCSSVars = animationDriver == null ? void 0 : animationDriver.supportsCSSVars, curStateRef = stateRef.current, willBeAnimatedClient = function() {
+      var animationDriver = param.animationDriver, groups = param.groups, _animationDriver_usePresence, useAnimations = animationDriver == null ? void 0 : animationDriver.useAnimations, stateRef = (0, import_react4.useRef)(void 0);
+      stateRef.current || (stateRef.current = {});
+      var hasAnimationProp = !!("animation" in props || props.style && hasAnimatedStyleValue(props.style)), supportsCSSVars = animationDriver == null ? void 0 : animationDriver.supportsCSSVars, curStateRef = stateRef.current, willBeAnimatedClient = function() {
         var next = !!(hasAnimationProp && !staticConfig.isHOC && useAnimations);
         return !!(next || curStateRef.hasAnimated);
       }(), willBeAnimated = !import_constants4.isServer && willBeAnimatedClient;
       willBeAnimated && !curStateRef.hasAnimated && (curStateRef.hasAnimated = !0);
       var presence = willBeAnimated && props.animatePresence !== !1 && (animationDriver == null || (_animationDriver_usePresence = animationDriver.usePresence) === null || _animationDriver_usePresence === void 0 ? void 0 : _animationDriver_usePresence.call(animationDriver)) || null, presenceState = presence == null ? void 0 : presence[2], isExiting = (presenceState == null ? void 0 : presenceState.isPresent) === !1, isEntering = (presenceState == null ? void 0 : presenceState.isPresent) === !0 && presenceState.initial !== !1, hasEnterStyle = !!props.enterStyle, hasRNAnimation = hasAnimationProp && (animationDriver == null ? void 0 : animationDriver.isReactNative);
       process.env.NODE_ENV === "development" && time && time(_templateObject());
-      var hasEnterState = hasEnterStyle || isEntering, didHydrateOnce = (0, import_useDidHydrateOnce.useDidHydrateOnce)(), initialState = hasEnterState || !didHydrateOnce && hasRNAnimation ? (
+      var hasEnterState = hasEnterStyle || isEntering, didHydrateOnce = willBeAnimated ? (0, import_useDidHydrateOnce.useDidHydrateOnce)() : !0, shouldEnter = hasEnterState || !didHydrateOnce && hasRNAnimation, shouldEnterFromUnhydrated = import_constants4.isWeb && !didHydrateOnce, initialState = shouldEnter ? (
         // on the very first render we switch all spring animation drivers to css rendering
         // this is because we need to use css variables, which they don't support to do proper SSR
         // without flickers of the wrong colors.
         // but once we do that initial hydration and we are in client side rendering mode,
         // we can avoid the extra re-render on mount
-        import_constants4.isWeb && !didHydrateOnce ? import_defaultComponentState.defaultComponentState : import_defaultComponentState.defaultComponentStateShouldEnter
+        shouldEnterFromUnhydrated ? import_defaultComponentState.defaultComponentState : import_defaultComponentState.defaultComponentStateShouldEnter
       ) : import_defaultComponentState.defaultComponentStateMounted, disabled = isDisabled(props);
       disabled != null && (initialState.disabled = disabled);
       var states = (0, import_react4.useState)(initialState), state = props.forceStyle ? _object_spread_props8(_object_spread9({}, states[0]), _define_property9({}, props.forceStyle, !0)) : states[0], setState = states[1], isHydrated = state.unmounted === !1 || state.unmounted === "should-enter", isAnimated = willBeAnimated;
@@ -9407,7 +9501,7 @@ var require_createComponent_native = __commonJS({
         elementType = Component || elementType;
         var isStringElement = typeof elementType == "string";
         process.env.NODE_ENV === "development" && time && time(_templateObject8());
-        var mediaState3 = (0, import_useMedia.useMedia)(stateRef, componentContext);
+        var mediaState3 = (0, import_useMedia.useMedia)(stateRef, componentContext, debugProp);
         (0, import_createVariable.setDidGetVariableValue)(!1), process.env.NODE_ENV === "development" && time && time(_templateObject9());
         var resolveValues = (
           // if HOC + mounted + has animation prop, resolve as value so it passes non-variable to child
@@ -9417,7 +9511,8 @@ var require_createComponent_native = __commonJS({
           noClassNames,
           resolveValues,
           isExiting,
-          isAnimated
+          isAnimated,
+          willBeAnimated
         }, splitStyles = (0, import_getSplitStyles.useSplitStyles)(props, staticConfig, theme, (themeState == null || (_themeState_state = themeState.state) === null || _themeState_state === void 0 ? void 0 : _themeState_state.name) || "", state, styleProps, null, componentContext, elementType, debugProp);
         if (props.group && props.untilMeasured === "hide" && !curStateRef.hasMeasured) {
           var _splitStyles;
@@ -9425,9 +9520,9 @@ var require_createComponent_native = __commonJS({
         }
         process.env.NODE_ENV === "development" && time && time(_templateObject10()), curStateRef.isListeningToTheme = splitStyles.dynamicThemeAccess;
         var isMediaArray = splitStyles.hasMedia && Array.isArray(splitStyles.hasMedia), shouldListenForMedia = (0, import_createVariable.didGetVariableValue)() || isMediaArray || noClassNames && splitStyles.hasMedia === !0, mediaListeningKeys = isMediaArray ? splitStyles.hasMedia : null;
-        (0, import_useMedia.setMediaShouldUpdate)(stateRef, {
+        process.env.NODE_ENV === "development" && debugProp && console.info("useMedia() createComponent", shouldListenForMedia, mediaListeningKeys), (0, import_useMedia.setMediaShouldUpdate)(stateRef, {
           enabled: shouldListenForMedia,
-          keys: mediaListeningKeys
+          touched: mediaListeningKeys
         });
         var viewPropsIn = splitStyles.viewProps, pseudos = splitStyles.pseudos, splitStylesStyle = splitStyles.style, classNames = splitStyles.classNames, space = splitStyles.space, propsWithAnimation = props, asChild = viewPropsIn.asChild, children = viewPropsIn.children, themeShallow = viewPropsIn.themeShallow, _spaceDirection = viewPropsIn.spaceDirection, onPress = viewPropsIn.onPress, onLongPress = viewPropsIn.onLongPress, onPressIn = viewPropsIn.onPressIn, onPressOut = viewPropsIn.onPressOut, onHoverIn = viewPropsIn.onHoverIn, onHoverOut = viewPropsIn.onHoverOut, onMouseUp = viewPropsIn.onMouseUp, onMouseDown = viewPropsIn.onMouseDown, onMouseEnter = viewPropsIn.onMouseEnter, onMouseLeave = viewPropsIn.onMouseLeave, onFocus = viewPropsIn.onFocus, onBlur = viewPropsIn.onBlur, separator = viewPropsIn.separator, _forceStyle = viewPropsIn.forceStyle, onClick = viewPropsIn.onClick, _themeProp = viewPropsIn.theme, defaultVariants = viewPropsIn.defaultVariants, nonTamaguiProps = _object_without_properties5(viewPropsIn, [
           "asChild",
@@ -9657,14 +9752,14 @@ If you meant to do this, you can disable this warning - either change untilMeasu
           children: [
             content,
             /* lets see if we can put a single style tag per rule for optimal de-duping */
-            splitStyles.rulesToInsert.map(function(param) {
-              var rules = param.rules, identifier = param.identifier;
+            splitStyles.rulesToInsert.map(function(styleObject) {
+              var identifier = styleObject[import_helpers.StyleObjectIdentifier];
               return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("style", {
                 // @ts-ignore
                 href: "t_".concat(identifier),
                 // @ts-ignore
                 precedence: "default",
-                children: rules.join(`
+                children: styleObject[import_helpers.StyleObjectRules].join(`
 `)
               }, identifier);
             })
@@ -22007,7 +22102,7 @@ var require_Image_native = __commonJS({
       }
     });
     module2.exports = __toCommonJS2(Image_exports);
-    var import_jsx_runtime6 = require("react/jsx-runtime"), import_constants4 = require_index_native6(), import_core12 = require_index_native16(), import_react_native4 = require("react-native");
+    var import_jsx_runtime6 = require("react/jsx-runtime"), import_constants4 = require_index_native6(), import_core12 = require_index_native16(), import_react4 = require("react"), import_react_native4 = require("react-native");
     function _array_like_to_array2(arr, len) {
       (len == null || len > arr.length) && (len = arr.length);
       for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
@@ -22016,6 +22111,30 @@ var require_Image_native = __commonJS({
     function _array_with_holes(arr) {
       if (Array.isArray(arr)) return arr;
     }
+    function asyncGeneratorStep2(gen, resolve, reject, _next, _throw, key, arg) {
+      try {
+        var info = gen[key](arg), value = info.value;
+      } catch (error) {
+        reject(error);
+        return;
+      }
+      info.done ? resolve(value) : Promise.resolve(value).then(_next, _throw);
+    }
+    function _async_to_generator2(fn) {
+      return function() {
+        var self = this, args = arguments;
+        return new Promise(function(resolve, reject) {
+          var gen = fn.apply(self, args);
+          function _next(value) {
+            asyncGeneratorStep2(gen, resolve, reject, _next, _throw, "next", value);
+          }
+          function _throw(err) {
+            asyncGeneratorStep2(gen, resolve, reject, _next, _throw, "throw", err);
+          }
+          _next(void 0);
+        });
+      };
+    }
     function _define_property9(obj, key, value) {
       return key in obj ? Object.defineProperty(obj, key, {
         value,
@@ -22082,6 +22201,92 @@ var require_Image_native = __commonJS({
         if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array2(o, minLen);
       }
     }
+    function _ts_generator2(thisArg, body) {
+      var f, y, t, g, _ = {
+        label: 0,
+        sent: function() {
+          if (t[0] & 1) throw t[1];
+          return t[1];
+        },
+        trys: [],
+        ops: []
+      };
+      return g = {
+        next: verb(0),
+        throw: verb(1),
+        return: verb(2)
+      }, typeof Symbol == "function" && (g[Symbol.iterator] = function() {
+        return this;
+      }), g;
+      function verb(n) {
+        return function(v) {
+          return step([
+            n,
+            v
+          ]);
+        };
+      }
+      function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        for (; _; ) try {
+          if (f = 1, y && (t = op[0] & 2 ? y.return : op[0] ? y.throw || ((t = y.return) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+          switch (y = 0, t && (op = [
+            op[0] & 2,
+            t.value
+          ]), op[0]) {
+            case 0:
+            case 1:
+              t = op;
+              break;
+            case 4:
+              return _.label++, {
+                value: op[1],
+                done: !1
+              };
+            case 5:
+              _.label++, y = op[1], op = [
+                0
+              ];
+              continue;
+            case 7:
+              op = _.ops.pop(), _.trys.pop();
+              continue;
+            default:
+              if (t = _.trys, !(t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+                _ = 0;
+                continue;
+              }
+              if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
+                _.label = op[1];
+                break;
+              }
+              if (op[0] === 6 && _.label < t[1]) {
+                _.label = t[1], t = op;
+                break;
+              }
+              if (t && _.label < t[2]) {
+                _.label = t[2], _.ops.push(op);
+                break;
+              }
+              t[2] && _.ops.pop(), _.trys.pop();
+              continue;
+          }
+          op = body.call(thisArg, _);
+        } catch (e) {
+          op = [
+            6,
+            e
+          ], y = 0;
+        } finally {
+          f = t = 0;
+        }
+        if (op[0] & 5) throw op[1];
+        return {
+          value: op[0] ? op[1] : void 0,
+          done: !0
+        };
+      }
+    }
     var StyledImage = (0, import_core12.styled)(import_react_native4.Image, {
       name: "Image"
     }), hasWarned = !1, Image = StyledImage.styleable(function(inProps, ref) {
@@ -22093,8 +22298,8 @@ var require_Image_native = __commonJS({
       var finalSource = typeof src == "string" ? _object_spread9({
         uri: src
       }, import_constants4.isWeb && {
-        width: props.width,
-        height: props.height
+        width: props.width || (style == null ? void 0 : style.width),
+        height: props.height || (style == null ? void 0 : style.height)
       }) : source ?? src;
       if (finalSource && typeof finalSource == "object") {
         if (!Array.isArray(finalSource) && typeof finalSource.uri == "number" && (finalSource = finalSource.uri, source && typeof source == "object" && !Array.isArray(source))) {
@@ -22103,9 +22308,59 @@ var require_Image_native = __commonJS({
           var _height;
           (_height = (_style1 = style).height) !== null && _height !== void 0 || (_style1.height = source.height);
         }
-        finalSource.default && (finalSource = finalSource.default);
+        process.env.NODE_ENV === "development" && process.env.TAMAGUI_IMAGE_CHECK_ERROR && (0, import_react4.useEffect)(function() {
+          var run = function() {
+            return _run.apply(this, arguments);
+          };
+          function _run() {
+            return _run = _async_to_generator2(function() {
+              var err;
+              return _ts_generator2(this, function(_state) {
+                switch (_state.label) {
+                  case 0:
+                    if (typeof src != "string") return [
+                      3,
+                      4
+                    ];
+                    _state.label = 1;
+                  case 1:
+                    return _state.trys.push([
+                      1,
+                      3,
+                      ,
+                      4
+                    ]), [
+                      4,
+                      fetch(src).then(function(res) {
+                        return res.text();
+                      })
+                    ];
+                  case 2:
+                    return _state.sent(), [
+                      3,
+                      4
+                    ];
+                  case 3:
+                    return err = _state.sent(), console.error("Error loading image: ".concat(src), {
+                      props
+                    }), [
+                      3,
+                      4
+                    ];
+                  case 4:
+                    return [
+                      2
+                    ];
+                }
+              });
+            }), _run.apply(this, arguments);
+          }
+          run();
+        }, [
+          src
+        ]), finalSource.default && (finalSource = finalSource.default);
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(StyledImage, _object_spread9({
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native4.Image, _object_spread9({
         ref,
         source: finalSource,
         style
@@ -29733,37 +29988,26 @@ var require_Popper_native = __commonJS({
           (typeof offsetOptions > "u" ? "undefined" : _type_of(offsetOptions)) < "u" ? (0, import_floating.offset)(offsetOptions) : null,
           checkFloating
         ].filter(Boolean)
-      }), refs = floating.refs, middlewareData = floating.middlewareData, open = floating.open;
-      if (import_constants4.isWeb) (0, import_constants4.useIsomorphicLayoutEffect)(function() {
-        if (open && refs.reference.current && refs.floating.current) return floating.update(), (0, import_floating.autoUpdate)(refs.reference.current, refs.floating.current, floating.update);
+      }), refs = floating.refs, middlewareData = floating.middlewareData, open = floating.open, dimensions = (0, import_react_native4.useWindowDimensions)(), _React_useState2 = _sliced_to_array(React2.useState(!1), 2), keyboardOpen = _React_useState2[0], setKeyboardOpen = _React_useState2[1];
+      React2.useEffect(function() {
+        var showSubscription = import_react_native4.Keyboard.addListener("keyboardDidShow", function() {
+          React2.startTransition(function() {
+            setKeyboardOpen(!0);
+          });
+        }), hideSubscription = import_react_native4.Keyboard.addListener("keyboardDidHide", function() {
+          React2.startTransition(function() {
+            setKeyboardOpen(!1);
+          });
+        });
+        return function() {
+          showSubscription.remove(), hideSubscription.remove();
+        };
+      }, []), (0, import_constants4.useIsomorphicLayoutEffect)(function() {
+        floating.update();
       }, [
-        open,
-        floating.update,
-        refs.floating,
-        refs.reference
+        dimensions,
+        keyboardOpen
       ]);
-      else {
-        var dimensions = (0, import_react_native4.useWindowDimensions)(), _React_useState2 = _sliced_to_array(React2.useState(!1), 2), keyboardOpen = _React_useState2[0], setKeyboardOpen = _React_useState2[1];
-        React2.useEffect(function() {
-          var showSubscription = import_react_native4.Keyboard.addListener("keyboardDidShow", function() {
-            React2.startTransition(function() {
-              setKeyboardOpen(!0);
-            });
-          }), hideSubscription = import_react_native4.Keyboard.addListener("keyboardDidHide", function() {
-            React2.startTransition(function() {
-              setKeyboardOpen(!1);
-            });
-          });
-          return function() {
-            showSubscription.remove(), hideSubscription.remove();
-          };
-        }, []), (0, import_constants4.useIsomorphicLayoutEffect)(function() {
-          floating.update();
-        }, [
-          dimensions,
-          keyboardOpen
-        ]);
-      }
       var popperContext = _object_spread9({
         size: size3,
         arrowRef: setArrow,