@tamagui/core 1.101.0 → 1.101.2

package/dist/native.js

@@ -1273,7 +1273,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() {
@@ -1301,7 +1306,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;
   }
 });
 
@@ -2374,7 +2397,7 @@ var require_insertStyleRule_native = __commonJS({
       }
     });
     module2.exports = __toCommonJS2(insertStyleRule_exports);
-    var import_constants = require_index_native3(), import_createVariable = require_createVariable_native();
+    var import_constants = require_index_native3(), import_helpers = require_index_native4(), import_createVariable = require_createVariable_native();
     function _array_like_to_array(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];
@@ -2652,8 +2675,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;
@@ -2689,7 +2713,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);
@@ -2974,63 +2998,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_react3 = 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) {
@@ -3117,7 +3084,7 @@ var require_useMedia_native = __commonJS({
       }
     });
     module2.exports = __toCommonJS2(useMedia_exports);
-    var import_constants = require_index_native3(), import_react3 = 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_constants = require_index_native3(), import_react3 = 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_array(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];
@@ -3126,9 +3093,6 @@ var require_useMedia_native = __commonJS({
     function _array_with_holes(arr) {
       if (Array.isArray(arr)) return arr;
     }
-    function _array_without_holes(arr) {
-      if (Array.isArray(arr)) return _array_like_to_array(arr);
-    }
     function _define_property2(obj, key, value) {
       return key in obj ? Object.defineProperty(obj, key, {
         value,
@@ -3137,9 +3101,6 @@ var require_useMedia_native = __commonJS({
         writable: !0
       }) : obj[key] = value, obj;
     }
-    function _iterable_to_array(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) {
@@ -3161,9 +3122,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_spread() {
-      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_spread2(target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i] != null ? arguments[i] : {}, ownKeys2 = Object.keys(source);
@@ -3193,9 +3151,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_array(arr, i) || _non_iterable_rest();
     }
-    function _to_consumable_array(arr) {
-      return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
-    }
     function _unsupported_iterable_to_array(o, minLen) {
       if (o) {
         if (typeof o == "string") return _array_like_to_array(o, minLen);
@@ -3215,12 +3170,11 @@ var require_useMedia_native = __commonJS({
       }) : {}
     ), mediaQueryConfig2 = {}, getMedia2 = function() {
       return mediaState2;
-    }, 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) {
@@ -3255,7 +3209,7 @@ var require_useMedia_native = __commonJS({
         }), update();
       };
       if (!(import_constants.isWeb && import_constants.isServer) && setupVersion !== mediaVersion) {
-        setupVersion = mediaVersion, process.env.NODE_ENV === "development" && unlisten();
+        setupVersion = mediaVersion, unlisten();
         for (var key in mediaQueryConfig2) _loop(key);
       }
     }
@@ -3271,37 +3225,42 @@ var require_useMedia_native = __commonJS({
     function setMediaShouldUpdate(ref, props) {
       return States.set(ref, _object_spread2({}, 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_array(keys || []).concat(_to_consumable_array(touched || [])) : null, hasntUpdated = !testKeys || (testKeys == null ? void 0 : testKeys.every(function(key) {
-        return mediaState2[key] === prev[key];
-      }));
-      return hasntUpdated ? prev : mediaState2;
+    function subscribe(subscriber) {
+      return listeners.add(subscriber), function() {
+        listeners.delete(subscriber);
+      };
     }
-    function useMedia2(uidIn, componentContext) {
-      var uid = uidIn ?? (0, import_react3.useRef)(), hasHydrated = (0, import_useDidHydrateOnce.useDidHydrateOnce)(), isHydrated = !import_constants.isWeb || (0, import_useDisableSSR.getDisableSSR)(componentContext) || hasHydrated, initialState = isHydrated ? mediaState2 : initState, componentState = States.get(uid);
+    function useMedia2(uidIn, componentContext, debug) {
+      var uid = uidIn ?? (0, import_react3.useRef)(), disableSSR = (0, import_useDisableSSR.getDisableSSR)(componentContext), initialState = (disableSSR || !import_constants.isWeb ? mediaState2 : initState) || {}, componentState = States.get(uid);
       componentState || (componentState = {
         prev: initialState
-      }, States.set(uid, componentState)), componentState.touched = void 0;
-      var _useState = _sliced_to_array((0, import_react3.useState)(initialState), 2), state = _useState[0], setState = _useState[1];
-      return (0, import_constants.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 mediaState2[key] === prev[key];
+        }));
+        return hasntUpdated ? prev : (componentState.prev = mediaState2, mediaState2);
+      }, state;
+      if (process.env.TAMAGUI_SYNC_MEDIA_QUERY) state = (0, import_react3.useSyncExternalStore)(subscribe, getSnapshot, function() {
+        return initialState;
+      });
+      else {
+        var _useState = _sliced_to_array((0, import_react3.useState)(initialState), 2), internalState = _useState[0], setState = _useState[1];
+        state = internalState, (0, import_constants.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);
         }
@@ -5100,6 +5059,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],
@@ -5142,10 +5105,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_array(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_array(arr, i) || _non_iterable_rest();
+    }
+    function _unsupported_iterable_to_array(o, minLen) {
+      if (o) {
+        if (typeof o == "string") return _array_like_to_array(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_array(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) {
@@ -5181,13 +5185,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
-      };
+        ]
+      ];
     };
   }
 });
@@ -7119,7 +7125,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, "");
@@ -7538,15 +7544,22 @@ var require_getSplitStyles_native = __commonJS({
         if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(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_constants.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 = {}, mediaState2 = styleProps.mediaState || import_useMedia.mediaState, usedKeys = {}, shouldDoClasses = acceptsClassName && import_constants.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 = {}, mediaState2 = styleProps.mediaState || import_useMedia.mediaState, usedKeys = {}, shouldDoClasses = acceptsClassName && import_constants.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,
@@ -7570,15 +7583,18 @@ var require_getSplitStyles_native = __commonJS({
         styleState,
         theme: _object_spread2({}, 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;
           }
@@ -7587,7 +7603,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_constants.isAndroid && keyInit === "elevationAndroid") continue;
             if (keyInit === "userSelect") keyInit = "selectable", valInit = valInit !== "none";
             else if (keyInit.startsWith("data-")) continue;
@@ -7602,10 +7618,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,
@@ -7621,7 +7637,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;
             }
@@ -7654,17 +7670,17 @@ current`, _object_spread2({}, styleState.style)));
               console.groupEnd();
             }
             for (var key = keyInit, val = valInit, max = expanded ? expanded.length : 1, i = 0; i < max; 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,
@@ -7676,9 +7692,9 @@ current`, _object_spread2({}, 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;
                     }
@@ -7692,8 +7708,8 @@ current`, _object_spread2({}, 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;
@@ -7744,7 +7760,8 @@ current`, _object_spread2({}, 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
@@ -7752,18 +7769,15 @@ current`, _object_spread2({}, 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: mediaState2
+                  }), shouldDoClasses) {
                     var mediaStyle = getSubStyle(styleState, key, val, !1);
                     if (hasSpace && (delete mediaStyle.space, mediaState2[mediaKeyShort])) {
                       var importance1 = (0, import_useMedia.getMediaImportanceIfMoreImportant)(mediaKeyShort, "space", usedKeys, !0);
@@ -7776,8 +7790,8 @@ current`, _object_spread2({}, 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;
@@ -7789,9 +7803,15 @@ current`, _object_spread2({}, styleState.style)));
                       }
                     }
                   } else {
-                    var mediaStyle1 = getSubStyle(styleState, key, val, !0), isThemeMedia = isMedia === "theme", isGroupMedia = isMedia === "group", isPlatformMedia = isMedia === "platform";
-                    if (!isThemeMedia && !isPlatformMedia && !isGroupMedia && !mediaState2[mediaKeyShort]) continue;
-                    var importanceBump = 0;
+                    var isThemeMedia = isMedia === "theme", isGroupMedia = isMedia === "group", isPlatformMedia = isMedia === "platform";
+                    if (!isThemeMedia && !isPlatformMedia && !isGroupMedia) {
+                      if (!mediaState2[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);
@@ -7856,7 +7876,7 @@ current`, _object_spread2({}, styleState.style)));
       }
       var avoidNormalize = styleProps.noNormalize === !1;
       if (!avoidNormalize) {
-        if (styleState.style && ((0, import_expandStyles.fixStyles)(styleState.style), import_constants.isWeb && !staticConfig.isReactNative && (0, import_getStylesAtomic.styleToCSS)(styleState.style)), styleState.flatTransforms) {
+        if (styleState.style && ((0, import_expandStyles.fixStyles)(styleState.style), import_constants.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];
@@ -7881,7 +7901,7 @@ current`, _object_spread2({}, 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 {
@@ -7890,8 +7910,8 @@ current`, _object_spread2({}, styleState.style)));
             }
           }
           if (transforms) for (var namespace in transforms) {
-            var _transforms_namespace, hash, val3, identifier1;
-            if (import_constants.isClient && !insertedTransforms[identifier1]) var rule;
+            var _transforms_namespace, hash, val3, identifier2;
+            if (import_constants.isClient && !insertedTransforms[identifier2]) var rule;
           }
         }
         if (!isReactNative && viewProps.tabIndex == null) var _viewProps_focusable, isFocusable, role;
@@ -7927,7 +7947,7 @@ current`, _object_spread2({}, 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) {
@@ -8535,6 +8555,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_react3 = 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) {
@@ -8807,7 +8884,7 @@ var require_createComponent_native = __commonJS({
       }
     });
     module2.exports = __toCommonJS2(createComponent_exports);
-    var import_jsx_runtime = require("react/jsx-runtime"), import_compose_refs = require_index_native5(), import_constants = require_index_native3(), import_helpers = require_index_native4(), import_react3 = __toESM2(require("react")), import_config = require_config_native(), import_constants2 = 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_runtime = require("react/jsx-runtime"), import_compose_refs = require_index_native5(), import_constants = require_index_native3(), import_helpers = require_index_native4(), import_react3 = __toESM2(require("react")), import_config = require_config_native(), import_constants2 = 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_array(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];
@@ -9128,20 +9205,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_react3.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_react3.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_constants.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_constants.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_constants.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_react3.useState)(initialState), state = props.forceStyle ? _object_spread_props(_object_spread2({}, states[0]), _define_property2({}, props.forceStyle, !0)) : states[0], setState = states[1], isHydrated = state.unmounted === !1 || state.unmounted === "should-enter", isAnimated = willBeAnimated;
@@ -9325,7 +9404,7 @@ var require_createComponent_native = __commonJS({
         elementType = Component || elementType;
         var isStringElement = typeof elementType == "string";
         process.env.NODE_ENV === "development" && time && time(_templateObject8());
-        var mediaState2 = (0, import_useMedia.useMedia)(stateRef, componentContext);
+        var mediaState2 = (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
@@ -9335,7 +9414,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;
@@ -9343,7 +9423,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
         });
@@ -9575,14 +9655,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_runtime.jsx)("style", {
                 // @ts-ignore
                 href: "t_".concat(identifier),
                 // @ts-ignore
                 precedence: "default",
-                children: rules.join(`
+                children: styleObject[import_helpers.StyleObjectRules].join(`
 `)
               }, identifier);
             })