tamagui 1.101.0 → 1.101.2

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);
@@ -3056,63 +3080,6 @@ var require_useDisableSSR_native = __commonJS({
   }
 });
 
-// ../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, {
-        get: all[name],
-        enumerable: !0
-      });
-    }, __copyProps2 = function(to, from, except, desc) {
-      var _iteratorNormalCompletion = !0, _didIteratorError = !1, _iteratorError = void 0;
-      if (from && typeof from == "object" || typeof from == "function") try {
-        for (var _loop = function() {
-          var key = _step.value;
-          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, {
-            get: function() {
-              return from[key];
-            },
-            enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable
-          });
-        }, _iterator = __getOwnPropNames2(from)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0) _loop();
-      } catch (err) {
-        _didIteratorError = !0, _iteratorError = err;
-      } finally {
-        try {
-          !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
-        } finally {
-          if (_didIteratorError)
-            throw _iteratorError;
-        }
-      }
-      return to;
-    }, __toCommonJS2 = function(mod) {
-      return __copyProps2(__defProp2({}, "__esModule", {
-        value: !0
-      }), mod);
-    }, useDidHydrateOnce_exports = {};
-    __export2(useDidHydrateOnce_exports, {
-      useDidHydrateOnce: function() {
-        return useDidHydrateOnce;
-      },
-      useDidHydrateOnceRoot: function() {
-        return useDidHydrateOnceRoot;
-      }
-    });
-    module2.exports = __toCommonJS2(useDidHydrateOnce_exports);
-    var import_react4 = require("react");
-    function useDidHydrateOnceRoot() {
-      return !0;
-    }
-    var last = Date.now();
-    function useDidHydrateOnce() {
-      return !0;
-    }
-  }
-});
-
 // ../web/dist/cjs/hooks/useMedia.native.js
 var require_useMedia_native = __commonJS({
   "../web/dist/cjs/hooks/useMedia.native.js"(exports2, module2) {
@@ -3199,7 +3166,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_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];
@@ -3208,9 +3175,6 @@ var require_useMedia_native = __commonJS({
     function _array_with_holes(arr) {
       if (Array.isArray(arr)) return arr;
     }
-    function _array_without_holes2(arr) {
-      if (Array.isArray(arr)) return _array_like_to_array2(arr);
-    }
     function _define_property9(obj, key, value) {
       return key in obj ? Object.defineProperty(obj, key, {
         value,
@@ -3219,9 +3183,6 @@ var require_useMedia_native = __commonJS({
         writable: !0
       }) : obj[key] = value, obj;
     }
-    function _iterable_to_array2(iter) {
-      if ((typeof Symbol > "u" ? "undefined" : _type_of(Symbol)) < "u" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
-    }
     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) {
@@ -3243,9 +3204,6 @@ var require_useMedia_native = __commonJS({
     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 _non_iterable_spread2() {
-      throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-    }
     function _object_spread9(target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i] != null ? arguments[i] : {}, ownKeys22 = Object.keys(source);
@@ -3275,9 +3233,6 @@ var require_useMedia_native = __commonJS({
     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 _to_consumable_array2(arr) {
-      return _array_without_holes2(arr) || _iterable_to_array2(arr) || _unsupported_iterable_to_array2(arr) || _non_iterable_spread2();
-    }
     function _unsupported_iterable_to_array2(o, minLen) {
       if (o) {
         if (typeof o == "string") return _array_like_to_array2(o, minLen);
@@ -3297,12 +3252,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) {
@@ -3337,7 +3291,7 @@ var require_useMedia_native = __commonJS({
         }), update();
       };
       if (!(import_constants4.isWeb && import_constants4.isServer) && setupVersion !== mediaVersion) {
-        setupVersion = mediaVersion, process.env.NODE_ENV === "development" && unlisten();
+        setupVersion = mediaVersion, unlisten();
         for (var key in mediaQueryConfig3) _loop(key);
       }
     }
@@ -3353,37 +3307,42 @@ var require_useMedia_native = __commonJS({
     function setMediaShouldUpdate(ref, props) {
       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) {
-        return mediaState3[key] === prev[key];
-      }));
-      return hasntUpdated ? prev : mediaState3;
+    function subscribe(subscriber) {
+      return listeners.add(subscriber), function() {
+        listeners.delete(subscriber);
+      };
     }
-    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);
+    function useMedia3(uidIn, componentContext, debug) {
+      var uid = uidIn ?? (0, import_react4.useRef)(), disableSSR = (0, import_useDisableSSR.getDisableSSR)(componentContext), initialState = (disableSSR || !import_constants4.isWeb ? mediaState3 : initState) || {}, componentState = States.get(uid);
       componentState || (componentState = {
         prev: initialState
-      }, States.set(uid, componentState)), componentState.touched = void 0;
-      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);
-            return next !== prev ? (componentState2.prev = next, next) : prev;
-          });
-        };
-        return update(), listeners.add(update), function() {
-          listeners.delete(update);
-        };
-      }, [
-        uid
-      ]), new Proxy(state, {
+      }, States.set(uid, componentState));
+      var getSnapshot = function() {
+        if (!componentState) return initialState;
+        var keys = componentState.keys, _componentState_prev = componentState.prev, prev = _componentState_prev === void 0 ? initialState : _componentState_prev;
+        if (componentState && componentState.enabled === !1) return prev;
+        var _componentState_keys, _ref, testKeys = (_ref = (_componentState_keys = componentState == null ? void 0 : componentState.keys) !== null && _componentState_keys !== void 0 ? _componentState_keys : (!componentState || componentState.enabled) && keys) !== null && _ref !== void 0 ? _ref : null, hasntUpdated = !testKeys || (testKeys == null ? void 0 : testKeys.every(function(key) {
+          return mediaState3[key] === prev[key];
+        }));
+        return hasntUpdated ? prev : (componentState.prev = mediaState3, mediaState3);
+      }, state;
+      if (process.env.TAMAGUI_SYNC_MEDIA_QUERY) state = (0, import_react4.useSyncExternalStore)(subscribe, getSnapshot, function() {
+        return initialState;
+      });
+      else {
+        var _useState = _sliced_to_array((0, import_react4.useState)(initialState), 2), internalState = _useState[0], setState = _useState[1];
+        state = internalState, (0, import_constants4.useIsomorphicLayoutEffect)(function() {
+          var update = function() {
+            setState(getSnapshot);
+          };
+          return update(), subscribe(update);
+        }, []);
+      }
+      return new Proxy(state, {
         get: function(_, key) {
           if (typeof key == "string") {
             var _componentState;
-            (_componentState = componentState).touched || (_componentState.touched = /* @__PURE__ */ new Set()), componentState.touched.add(key);
+            (_componentState = componentState).keys || (_componentState.keys = []), componentState.keys.includes(key) || componentState.keys.push(key), process.env.NODE_ENV === "development" && debug && console.info("useMedia() TOUCH", key);
           }
           return Reflect.get(state, key);
         }
@@ -5182,6 +5141,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 +5187,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 +5267,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 +7207,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 +7626,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 +7665,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 +7685,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 +7700,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 +7719,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 +7752,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 +7774,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 +7790,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 +7842,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 +7851,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 +7872,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 +7885,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 +7958,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 +7983,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 +7992,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 +8029,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) {
@@ -8617,6 +8637,63 @@ var require_themeable_native = __commonJS({
   }
 });
 
+// ../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, {
+        get: all[name],
+        enumerable: !0
+      });
+    }, __copyProps2 = function(to, from, except, desc) {
+      var _iteratorNormalCompletion = !0, _didIteratorError = !1, _iteratorError = void 0;
+      if (from && typeof from == "object" || typeof from == "function") try {
+        for (var _loop = function() {
+          var key = _step.value;
+          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, {
+            get: function() {
+              return from[key];
+            },
+            enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable
+          });
+        }, _iterator = __getOwnPropNames2(from)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0) _loop();
+      } catch (err) {
+        _didIteratorError = !0, _iteratorError = err;
+      } finally {
+        try {
+          !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
+        } finally {
+          if (_didIteratorError)
+            throw _iteratorError;
+        }
+      }
+      return to;
+    }, __toCommonJS2 = function(mod) {
+      return __copyProps2(__defProp2({}, "__esModule", {
+        value: !0
+      }), mod);
+    }, useDidHydrateOnce_exports = {};
+    __export2(useDidHydrateOnce_exports, {
+      useDidHydrateOnce: function() {
+        return useDidHydrateOnce;
+      },
+      useDidHydrateOnceRoot: function() {
+        return useDidHydrateOnceRoot;
+      }
+    });
+    module2.exports = __toCommonJS2(useDidHydrateOnce_exports);
+    var import_react4 = require("react");
+    function useDidHydrateOnceRoot() {
+      return !0;
+    }
+    var last = Date.now();
+    function useDidHydrateOnce() {
+      return !0;
+    }
+  }
+});
+
 // ../web/dist/cjs/setupHooks.native.js
 var require_setupHooks_native = __commonJS({
   "../web/dist/cjs/setupHooks.native.js"(exports2, module2) {
@@ -8889,7 +8966,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 +9287,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 +9486,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 +9496,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,7 +9505,7 @@ 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
         });
@@ -9657,14 +9737,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);
             })
@@ -20986,9 +21066,7 @@ var require_Dialog_native = __commonJS({
           onPress: (0, import_helpers.composeEventHandlers)(props.onPress, context.onOpenToggle)
         }))
       });
-    });
-    DialogTrigger.displayName = TRIGGER_NAME;
-    var PORTAL_NAME = "DialogPortal", _createDialogContext1 = _sliced_to_array(createDialogContext(PORTAL_NAME, {
+    }), PORTAL_NAME = "DialogPortal", _createDialogContext1 = _sliced_to_array(createDialogContext(PORTAL_NAME, {
       forceMount: void 0
     }), 2), PortalProvider2 = _createDialogContext1[0], usePortalContext = _createDialogContext1[1], DialogPortalFrame = (0, import_core12.styled)(import_stacks3.YStack, {
       pointerEvents: "none",
@@ -21074,9 +21152,7 @@ var require_Dialog_native = __commonJS({
         });
       }
       return contents;
-    };
-    DialogPortal.displayName = PORTAL_NAME;
-    var PassthroughTheme = function(param) {
+    }, PassthroughTheme = function(param) {
       var children = param.children, themeName = (0, import_core12.useThemeName)();
       return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core12.Theme, {
         name: themeName,
@@ -21091,29 +21167,14 @@ var require_Dialog_native = __commonJS({
       ]), portalContext = usePortalContext(OVERLAY_NAME, __scopeDialog), _props_forceMount = props.forceMount, forceMount = _props_forceMount === void 0 ? portalContext.forceMount : _props_forceMount, overlayProps = _object_without_properties5(props, [
         "forceMount"
       ]), context = useDialogContext(OVERLAY_NAME, __scopeDialog), showSheet = useShowDialogSheet(context);
-      return !forceMount && (!context.modal || showSheet) ? null : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DialogOverlayImpl, _object_spread_props8(_object_spread9({
-        context
+      return !forceMount && (!context.modal || showSheet) ? null : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DialogOverlayFrame, _object_spread_props8(_object_spread9({
+        "data-state": getState(context.open),
+        // We re-enable pointer-events prevented by `Dialog.Content` to allow scrolling the overlay.
+        pointerEvents: context.open ? "auto" : "none"
       }, overlayProps), {
         ref: forwardedRef
       }));
-    }));
-    DialogOverlay.displayName = OVERLAY_NAME;
-    var DialogOverlayImpl = /* @__PURE__ */ React2.forwardRef(function(props, forwardedRef) {
-      var context = props.context, overlayProps = _object_without_properties5(props, [
-        "context"
-      ]);
-      return (
-        // Make sure `Content` is scrollable even when it doesn't live inside `RemoveScroll`
-        // ie. when `Overlay` and `Content` are siblings
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DialogOverlayFrame, _object_spread_props8(_object_spread9({
-          "data-state": getState(context.open),
-          // We re-enable pointer-events prevented by `Dialog.Content` to allow scrolling the overlay.
-          pointerEvents: context.open ? "auto" : "none"
-        }, overlayProps), {
-          ref: forwardedRef
-        }))
-      );
-    }), CONTENT_NAME = "DialogContent", DialogContentFrame = (0, import_core12.styled)(import_stacks3.ThemeableStack, {
+    })), CONTENT_NAME = "DialogContent", DialogContentFrame = (0, import_core12.styled)(import_stacks3.ThemeableStack, {
       name: CONTENT_NAME,
       tag: "dialog",
       variants: {
@@ -21166,9 +21227,7 @@ var require_Dialog_native = __commonJS({
           children: contents
         })
       });
-    }));
-    DialogContent.displayName = CONTENT_NAME;
-    var DialogContentModal = /* @__PURE__ */ React2.forwardRef(function(_param, forwardedRef) {
+    })), DialogContentModal = /* @__PURE__ */ React2.forwardRef(function(_param, forwardedRef) {
       var children = _param.children, context = _param.context, props = _object_without_properties5(_param, [
         "children",
         "context"
@@ -21290,20 +21349,18 @@ var require_Dialog_native = __commonJS({
           })
         ]
       }) : contents;
-    }), TITLE_NAME = "DialogTitle", DialogTitleFrame = (0, import_core12.styled)(import_text2.H2, {
-      name: TITLE_NAME
+    }), DialogTitleFrame = (0, import_core12.styled)(import_text2.H2, {
+      name: "DialogTitle"
     }), DialogTitle = DialogTitleFrame.styleable(function(props, forwardedRef) {
       var __scopeDialog = props.__scopeDialog, titleProps = _object_without_properties5(props, [
         "__scopeDialog"
-      ]), context = useDialogContext(TITLE_NAME, __scopeDialog);
+      ]), context = useDialogContext("DialogTitle", __scopeDialog);
       return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DialogTitleFrame, _object_spread_props8(_object_spread9({
         id: context.titleId
       }, titleProps), {
         ref: forwardedRef
       }));
-    });
-    DialogTitle.displayName = TITLE_NAME;
-    var DialogDescriptionFrame = (0, import_core12.styled)(import_text2.Paragraph, {
+    }), DialogDescriptionFrame = (0, import_core12.styled)(import_text2.Paragraph, {
       name: "DialogDescription"
     }), DESCRIPTION_NAME = "DialogDescription", DialogDescription = DialogDescriptionFrame.styleable(function(props, forwardedRef) {
       var __scopeDialog = props.__scopeDialog, descriptionProps = _object_without_properties5(props, [
@@ -21314,9 +21371,7 @@ var require_Dialog_native = __commonJS({
       }, descriptionProps), {
         ref: forwardedRef
       }));
-    });
-    DialogDescription.displayName = DESCRIPTION_NAME;
-    var CLOSE_NAME = "DialogClose", DialogCloseFrame = (0, import_core12.styled)(import_core12.View, {
+    }), CLOSE_NAME = "DialogClose", DialogCloseFrame = (0, import_core12.styled)(import_core12.View, {
       name: CLOSE_NAME,
       tag: "button"
     }), DialogClose = DialogCloseFrame.styleable(function(props, forwardedRef) {
@@ -21342,7 +21397,7 @@ var require_Dialog_native = __commonJS({
     }
     var TITLE_WARNING_NAME = "DialogTitleWarning", _createContext = _sliced_to_array((0, import_create_context.createContext)(TITLE_WARNING_NAME, {
       contentName: CONTENT_NAME,
-      titleName: TITLE_NAME,
+      titleName: "DialogTitle",
       docsSlug: "dialog"
     }), 2), DialogWarningProvider = _createContext[0], useWarningContext = _createContext[1], TitleWarning = function(param) {
       var titleId = param.titleId;
@@ -21445,7 +21500,7 @@ var require_Dialog_native = __commonJS({
       Close: DialogClose,
       Sheet: import_sheet.Sheet.Controlled,
       Adapt: import_adapt.Adapt
-    }), SHEET_CONTENTS_NAME = "DialogSheetContents", DialogSheetContents = function(_param) {
+    }), DialogSheetContents = function(_param) {
       var name = _param.name, props = _object_without_properties5(_param, [
         "name"
       ]);
@@ -21453,9 +21508,7 @@ var require_Dialog_native = __commonJS({
         forwardProps: props,
         name
       });
-    };
-    DialogSheetContents.displayName = SHEET_CONTENTS_NAME;
-    var getSheetContentsName = function(param) {
+    }, getSheetContentsName = function(param) {
       var scopeKey = param.scopeKey, contentId = param.contentId;
       return "".concat(scopeKey || contentId, "SheetContents");
     }, DialogSheetController = function(props) {
@@ -22007,7 +22060,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 +22069,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 +22159,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 +22256,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 +22266,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 +29946,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,