@tamagui/core 1.85.3 → 1.85.4

package/dist/native.js

@@ -42,7 +42,7 @@ var require_utils_native = __commonJS({
     }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), utils_exports = {};
     __export2(utils_exports, {
       canUseDOM: () => canUseDOM,
-      getBoundingClientRect: () => getBoundingClientRect2,
+      getBoundingClientRect: () => getBoundingClientRect,
       getLowestCommonAncestor: () => getLowestCommonAncestor,
       getResponderPaths: () => getResponderPaths,
       hasTargetTouches: () => hasTargetTouches,
@@ -52,7 +52,7 @@ var require_utils_native = __commonJS({
       setResponderId: () => setResponderId
     });
     module2.exports = __toCommonJS2(utils_exports);
-    var keyName = "__reactResponderId", canUseDOM = !!(typeof window < "u" && window.document && window.document.createElement), getBoundingClientRect2 = (node) => {
+    var keyName = "__reactResponderId", canUseDOM = !!(typeof window < "u" && window.document && window.document.createElement), getBoundingClientRect = (node) => {
       if (node && node.nodeType === 1 && node.getBoundingClientRect)
         return node.getBoundingClientRect();
     };
@@ -900,10 +900,10 @@ var require_constants_native = __commonJS({
       isWeb: () => isWeb,
       isWebTouchable: () => isWebTouchable,
       isWindowDefined: () => isWindowDefined,
-      useIsomorphicLayoutEffect: () => useIsomorphicLayoutEffect3
+      useIsomorphicLayoutEffect: () => useIsomorphicLayoutEffect
     });
     module2.exports = __toCommonJS2(constants_native_exports);
-    var import_react3 = require("react"), isWeb = !1, isWindowDefined = !1, isServer = !1, isClient = !1, useIsomorphicLayoutEffect3 = import_react3.useLayoutEffect, isChrome = !1, isWebTouchable = !1, isTouchable = !0, isAndroid = !1, isIos = !1, currentPlatform = "native";
+    var import_react3 = require("react"), isWeb = !1, isWindowDefined = !1, isServer = !1, isClient = !1, useIsomorphicLayoutEffect = import_react3.useLayoutEffect, isChrome = !1, isWebTouchable = !1, isTouchable = !0, isAndroid = !1, isIos = !1, currentPlatform = "native";
   }
 });
 
@@ -949,7 +949,7 @@ var require_validStyleProps_native = __commonJS({
       validStylesOnBaseProps: () => validStylesOnBaseProps
     });
     module2.exports = __toCommonJS2(validStyleProps_exports);
-    var import_constants3 = require_index_native3(), placeHolderTextColors = {
+    var import_constants = require_index_native3(), placeHolderTextColors = {
       placeholderTextColor: !0
     }, validStylesOnBaseProps = {
       ...placeHolderTextColors
@@ -1120,7 +1120,7 @@ var require_validStyleProps_native = __commonJS({
       ...validStylesOnBaseProps,
       ...stylePropsTransform,
       ...stylePropsUnitless,
-      ...import_constants3.isAndroid ? { elevationAndroid: !0 } : {}
+      ...import_constants.isAndroid ? { elevationAndroid: !0 } : {}
     }, stylePropsFont = {
       fontFamily: !0,
       fontSize: !0,
@@ -1241,7 +1241,7 @@ var require_config_native = __commonJS({
       useTokens: () => useTokens
     });
     module2.exports = __toCommonJS2(config_exports);
-    var import_constants3 = require_index_native3(), conf, setConfig = (next) => {
+    var import_constants = require_index_native3(), conf, setConfig = (next) => {
       conf = next;
     }, setConfigFont = (name, font, fontParsed) => {
       if (process.env.NODE_ENV === "development" && !conf)
@@ -1267,7 +1267,7 @@ var require_config_native = __commonJS({
     }, getTokenObject = (value, group) => {
       var _a, _b;
       return conf.specificTokens[value] ?? (group ? (_a = tokensMerged[group]) == null ? void 0 : _a[value] : (_b = tokensMerged[Object.keys(tokensMerged).find((cat) => tokensMerged[cat][value]) || ""]) == null ? void 0 : _b[value]);
-    }, getToken2 = (value, group, useVariable = import_constants3.isWeb) => {
+    }, getToken2 = (value, group, useVariable = import_constants.isWeb) => {
       let token = getTokenObject(value, group);
       return useVariable ? token == null ? void 0 : token.variable : token == null ? void 0 : token.val;
     }, getTokenValue2 = (value, group) => getToken2(value, group, !1), useTokens = getTokens2, getThemes2 = () => conf.themes, configListeners = /* @__PURE__ */ new Set(), onConfiguredOnce = (cb) => {
@@ -1316,7 +1316,7 @@ var require_createVariable_native = __commonJS({
       variableToString: () => variableToString
     });
     module2.exports = __toCommonJS2(createVariable_exports);
-    var import_constants3 = require_index_native3(), import_helpers = require_index_native4(), import_config = require_config_native(), IS_VAR = "isVar", createVariable = (props, skipHash = !1) => {
+    var import_constants = require_index_native3(), import_helpers = require_index_native4(), import_config = require_config_native(), IS_VAR = "isVar", createVariable = (props, skipHash = !1) => {
       if (!skipHash && isVariable(props))
         return props;
       let { key, name, val } = props;
@@ -1325,11 +1325,11 @@ var require_createVariable_native = __commonJS({
         key,
         name: skipHash ? "" : (0, import_helpers.simpleHash)(name, 40),
         val,
-        variable: import_constants3.isWeb ? skipHash ? `var(--${name})` : createCSSVariable(name) : ""
+        variable: import_constants.isWeb ? skipHash ? `var(--${name})` : createCSSVariable(name) : ""
       };
     };
     function variableToString(vrble, getValue = !1) {
-      return isVariable(vrble) ? !getValue && import_constants3.isWeb && vrble.variable ? vrble.variable : `${vrble.val}` : `${vrble || ""}`;
+      return isVariable(vrble) ? !getValue && import_constants.isWeb && vrble.variable ? vrble.variable : `${vrble.val}` : `${vrble || ""}`;
     }
     function isVariable(v) {
       return v && typeof v == "object" && IS_VAR in v;
@@ -1384,7 +1384,7 @@ var require_insertStyleRule_native = __commonJS({
       updateRules: () => updateRules
     });
     module2.exports = __toCommonJS2(insertStyleRule_exports);
-    var import_constants3 = require_index_native3(), import_createVariable = require_createVariable_native(), scannedCache = /* @__PURE__ */ new WeakMap(), totalSelectorsInserted = /* @__PURE__ */ new Map(), allSelectors = {}, allRules = {}, insertedTransforms = {}, getAllSelectors = () => allSelectors, getAllRules = () => Object.values(allRules), getAllTransforms = () => insertedTransforms;
+    var import_constants = require_index_native3(), import_createVariable = require_createVariable_native(), scannedCache = /* @__PURE__ */ new WeakMap(), totalSelectorsInserted = /* @__PURE__ */ new Map(), allSelectors = {}, allRules = {}, insertedTransforms = {}, getAllSelectors = () => allSelectors, getAllRules = () => Object.values(allRules), getAllTransforms = () => insertedTransforms;
     function addTransform(identifier, css, rule) {
       let s = css.indexOf("transform:");
       if (s === -1) {
@@ -1396,7 +1396,7 @@ var require_insertStyleRule_native = __commonJS({
         return insertedTransforms[identifier] = value, !0;
     }
     function listenForSheetChanges() {
-      import_constants3.isClient && new MutationObserver((entries) => {
+      import_constants.isClient && new MutationObserver((entries) => {
         for (let entry of entries)
           if (entry instanceof HTMLStyleElement && entry.sheet || entry instanceof HTMLLinkElement && entry.href.endsWith(".css")) {
             scanAllSheets();
@@ -1408,7 +1408,7 @@ var require_insertStyleRule_native = __commonJS({
     }
     var lastScannedSheets = null;
     function scanAllSheets(collectThemes = !1, tokens) {
-      if (process.env.NODE_ENV === "test" || !import_constants3.isClient)
+      if (process.env.NODE_ENV === "test" || !import_constants.isClient)
         return;
       let themes, sheets = document.styleSheets || [], prev = lastScannedSheets, current = new Set(sheets);
       if (document.styleSheets) {
@@ -1529,7 +1529,7 @@ var require_insertStyleRule_native = __commonJS({
     var getIdentifierFromTamaguiSelector = (selector) => {
       let res = selector.slice(7);
       return selector.includes(":") ? res.replace(/:[a-z]+$/, "") : res;
-    }, sheet = import_constants3.isClient ? document.head.appendChild(document.createElement("style")).sheet : null;
+    }, sheet = import_constants.isClient ? document.head.appendChild(document.createElement("style")).sheet : null;
     function updateRules(identifier, rules) {
       return identifier in allRules ? !1 : (allRules[identifier] = rules.join(" "), identifier.startsWith("_transform") ? addTransform(identifier, rules[0]) : !0);
     }
@@ -1642,7 +1642,7 @@ var require_pseudoDescriptors_native = __commonJS({
       ...pseudoDescriptorsBase,
       enterStyle: {
         name: "enter",
-        stateKey: "unmounted",
+        selector: ".t_unmounted",
         priority: 4
       },
       exitStyle: {
@@ -1708,7 +1708,7 @@ var require_useMedia_native = __commonJS({
       useMedia: () => useMedia2
     });
     module2.exports = __toCommonJS2(useMedia_exports);
-    var import_constants3 = 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(), mediaState2 = (
+    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(), mediaState2 = (
       // development only safeguard
       process.env.NODE_ENV === "development" ? new Proxy(
         {},
@@ -1751,7 +1751,7 @@ var require_useMedia_native = __commonJS({
     }
     var setupVersion = -1;
     function setupMediaListeners() {
-      if (!(import_constants3.isWeb && import_constants3.isServer) && setupVersion !== mediaVersion) {
+      if (!(import_constants.isWeb && import_constants.isServer) && setupVersion !== mediaVersion) {
         setupVersion = mediaVersion, unlisten();
         for (let key in mediaQueryConfig2) {
           let update2 = function() {
@@ -1782,7 +1782,7 @@ var require_useMedia_native = __commonJS({
       return listeners.add(subscriber), () => listeners.delete(subscriber);
     }
     function useMedia2(uid, componentContext) {
-      let internal = (0, import_react3.useRef)(), initialState = ((0, import_useDisableSSR.getDisableSSR)(componentContext) || !import_constants3.isWeb ? mediaState2 : initState) || {}, state = (0, import_react3.useSyncExternalStore)(
+      let internal = (0, import_react3.useRef)(), initialState = ((0, import_useDisableSSR.getDisableSSR)(componentContext) || !import_constants.isWeb ? mediaState2 : initState) || {}, state = (0, import_react3.useSyncExternalStore)(
         subscribe,
         () => {
           if (!internal.current)
@@ -2173,11 +2173,11 @@ var require_createShallowSetState_native = __commonJS({
       mergeIfNotShallowEqual: () => mergeIfNotShallowEqual
     });
     module2.exports = __toCommonJS2(createShallowSetState_exports);
-    function createShallowSetState(setter) {
-      return (next) => setter((prev) => mergeIfNotShallowEqual(prev, next));
+    function createShallowSetState(setter, debug) {
+      return (next) => setter((prev) => mergeIfNotShallowEqual(prev, next, debug));
     }
-    function mergeIfNotShallowEqual(prev, next) {
-      return isEqualShallow(prev, next) ? prev : { ...prev, ...next };
+    function mergeIfNotShallowEqual(prev, next, debug) {
+      return isEqualShallow(prev, next) ? prev : (process.env.NODE_ENV === "development" && debug && console.warn("setStateShallow CHANGE", { prev, next }), { ...prev, ...next });
     }
     function isEqualShallow(prev, next) {
       for (let key in next)
@@ -2930,13 +2930,13 @@ var require_normalizeValueWithProperty_native = __commonJS({
       reverseMapClassNameToValue: () => reverseMapClassNameToValue
     });
     module2.exports = __toCommonJS2(normalizeValueWithProperty_exports);
-    var import_constants3 = require_index_native3(), import_helpers = require_index_native4(), import_insertStyleRule = require_insertStyleRule_native(), stylePropsAllPlusTransforms = {
+    var import_constants = require_index_native3(), import_helpers = require_index_native4(), import_insertStyleRule = require_insertStyleRule_native(), stylePropsAllPlusTransforms = {
       ...import_helpers.stylePropsAll,
       translateX: !0,
       translateY: !0
     };
     function normalizeValueWithProperty(value, property) {
-      if (!import_constants3.isWeb || typeof value == "boolean" || property && property in import_helpers.stylePropsUnitless || property && !(property in stylePropsAllPlusTransforms))
+      if (!import_constants.isWeb || typeof value == "boolean" || property && property in import_helpers.stylePropsUnitless || property && !(property in stylePropsAllPlusTransforms))
         return value;
       let res = value;
       return value && typeof value == "object" ? value : (typeof value == "number" ? res = `${value}px` : property && (res = `${res}`), res);
@@ -3022,13 +3022,13 @@ var require_expandStyles_native = __commonJS({
       fixStyles: () => fixStyles
     });
     module2.exports = __toCommonJS2(expandStyles_exports);
-    var import_constants3 = require_index_native3(), import_normalizeShadow = require_normalizeShadow_native();
+    var import_constants = require_index_native3(), import_normalizeShadow = require_normalizeShadow_native();
     function fixStyles(style) {
       "elevationAndroid" in style && (style.elevation = style.elevationAndroid, delete style.elevationAndroid), (style.shadowRadius || style.shadowColor || style.shadowOpacity || style.shadowOffset) && Object.assign(style, (0, import_normalizeShadow.normalizeShadow)(style));
       for (let key in borderDefaults)
         key in style && (style[borderDefaults[key]] ||= "solid");
     }
-    var nativeStyle = import_constants3.isWeb ? null : "borderStyle", borderDefaults = {
+    var nativeStyle = import_constants.isWeb ? null : "borderStyle", borderDefaults = {
       borderWidth: "borderStyle",
       borderBottomWidth: nativeStyle || "borderBottomStyle",
       borderTopWidth: nativeStyle || "borderTopStyle",
@@ -3105,14 +3105,14 @@ var require_expandStyle_native = __commonJS({
       expandStyle: () => expandStyle
     });
     module2.exports = __toCommonJS2(expandStyle_exports);
-    var import_constants3 = require_index_native3();
+    var import_constants = require_index_native3();
     function expandStyle(key, value) {
       if (0)
         switch (key) {
           case "textAlignVertical":
           case "writingDirection":
         }
-      if (import_constants3.isAndroid && key === "elevationAndroid")
+      if (import_constants.isAndroid && key === "elevationAndroid")
         return [["elevation", value]];
       if (key in EXPANSIONS)
         return EXPANSIONS[key].map((key2) => [key2, value]);
@@ -3133,7 +3133,7 @@ var require_expandStyle_native = __commonJS({
       padding: all,
       paddingHorizontal: horiz,
       paddingVertical: vert,
-      ...import_constants3.isWeb && {
+      ...import_constants.isWeb && {
         // react-native only supports borderStyle
         borderStyle: ["TopStyle", "RightStyle", "BottomStyle", "LeftStyle"],
         // react-native doesn't support X / Y
@@ -3289,9 +3289,9 @@ var require_propMapper_native = __commonJS({
       propMapper: () => propMapper
     });
     module2.exports = __toCommonJS2(propMapper_exports);
-    var import_constants3 = require_index_native3(), import_helpers = require_index_native4(), import_config = require_config_native(), import_isDevTools = require_isDevTools_native(), import_createVariable = require_createVariable_native(), import_expandStyle = require_expandStyle_native(), import_expandStylesAndRemoveNullishValues = require_expandStylesAndRemoveNullishValues_native(), import_getVariantExtras = require_getVariantExtras_native(), import_isObj = require_isObj_native(), import_pseudoDescriptors = require_pseudoDescriptors_native(), propMapper = (key, value, styleStateIn, subPropsIn) => {
+    var import_constants = require_index_native3(), import_helpers = require_index_native4(), import_config = require_config_native(), import_isDevTools = require_isDevTools_native(), import_createVariable = require_createVariable_native(), import_expandStyle = require_expandStyle_native(), import_expandStylesAndRemoveNullishValues = require_expandStylesAndRemoveNullishValues_native(), import_getVariantExtras = require_getVariantExtras_native(), import_isObj = require_isObj_native(), import_pseudoDescriptors = require_pseudoDescriptors_native(), propMapper = (key, value, styleStateIn, subPropsIn) => {
       var _a;
-      if (lastFontFamilyToken = null, !import_constants3.isAndroid && key === "elevationAndroid")
+      if (lastFontFamilyToken = null, !import_constants.isAndroid && key === "elevationAndroid")
         return;
       if (value === "unset") {
         let unsetVal = (_a = styleStateIn.conf.unset) == null ? void 0 : _a[key];
@@ -3530,14 +3530,14 @@ var require_getSplitStyles_native = __commonJS({
       useSplitStyles: () => useSplitStyles
     });
     module2.exports = __toCommonJS2(getSplitStyles_exports);
-    var import_constants3 = require_index_native3(), import_helpers = require_index_native4(), import_react3 = require("react"), import_config = require_config_native(), import_accessibilityDirectMap = require_accessibilityDirectMap_native(), import_constants22 = require_constants_native2(), import_isDevTools = require_isDevTools_native(), import_useMedia = require_useMedia_native(), import_createMediaStyle = require_createMediaStyle_native(), import_expandStyles = require_expandStyles_native(), import_getGroupPropParts = require_getGroupPropParts_native(), import_getStylesAtomic = require_getStylesAtomic_native(), import_insertStyleRule = require_insertStyleRule_native(), import_log = require_log_native(), import_normalizeValueWithProperty = require_normalizeValueWithProperty_native(), import_propMapper = require_propMapper_native(), import_pseudoDescriptors = require_pseudoDescriptors_native(), IS_STATIC = process.env.IS_STATIC === "is_static", conf, PROP_SPLIT = "-";
+    var import_constants = require_index_native3(), import_helpers = require_index_native4(), import_react3 = require("react"), import_config = require_config_native(), import_accessibilityDirectMap = require_accessibilityDirectMap_native(), import_constants2 = require_constants_native2(), import_isDevTools = require_isDevTools_native(), import_useMedia = require_useMedia_native(), import_createMediaStyle = require_createMediaStyle_native(), import_expandStyles = require_expandStyles_native(), import_getGroupPropParts = require_getGroupPropParts_native(), import_getStylesAtomic = require_getStylesAtomic_native(), import_insertStyleRule = require_insertStyleRule_native(), import_log = require_log_native(), import_normalizeValueWithProperty = require_normalizeValueWithProperty_native(), import_propMapper = require_propMapper_native(), import_pseudoDescriptors = require_pseudoDescriptors_native(), IS_STATIC = process.env.IS_STATIC === "is_static", conf, PROP_SPLIT = "-";
     function isValidStyleKey(key, staticConfig) {
       let validStyleProps = staticConfig.validStyles ?? (staticConfig.isText ? import_helpers.stylePropsText : import_helpers.validStyles);
       return key in validStyleProps || staticConfig.acceptTokens && key in staticConfig.acceptTokens;
     }
     var getSplitStyles = (props, staticConfig, theme, themeName, componentState, styleProps, parentSplitStyles, context, elementType, debug) => {
       var _a, _b, _c, _e, _f, _g;
-      conf = conf || (0, import_config.getConfig)(), import_constants3.isWeb && styleProps.isAnimated && conf.animations.isReactNative && !styleProps.noNormalize && (styleProps.noNormalize = "values");
+      conf = conf || (0, import_config.getConfig)(), import_constants.isWeb && styleProps.isAnimated && conf.animations.isReactNative && !styleProps.noNormalize && (styleProps.noNormalize = "values");
       let { shorthands } = conf, {
         isHOC,
         isText,
@@ -3547,7 +3547,7 @@ var require_getSplitStyles_native = __commonJS({
         inlineWhenUnflattened,
         parentStaticConfig,
         acceptsClassName
-      } = staticConfig, viewProps = {}, mediaState2 = styleProps.mediaState || import_useMedia.mediaState, usedKeys = {}, shouldDoClasses = acceptsClassName && import_constants3.isWeb && !styleProps.noClassNames, rulesToInsert = [], classNames = {}, transforms = {}, pseudos = null, space = props.space, hasMedia = !1, dynamicThemeAccess, pseudoGroups, mediaGroups, style = {}, className = "", mediaStylesSeen = 0, styleState = {
+      } = staticConfig, viewProps = {}, mediaState2 = styleProps.mediaState || import_useMedia.mediaState, usedKeys = {}, shouldDoClasses = acceptsClassName && import_constants.isWeb && !styleProps.noClassNames, rulesToInsert = [], classNames = {}, transforms = {}, pseudos = null, space = props.space, hasMedia = !1, dynamicThemeAccess, pseudoGroups, mediaGroups, style = {}, className = props.className ?? "", mediaStylesSeen = 0, styleState = {
         curProps: { ...props },
         classNames,
         conf,
@@ -3562,7 +3562,7 @@ var require_getSplitStyles_native = __commonJS({
         context,
         debug
       };
-      process.env.NODE_ENV === "development" && debug && debug !== "profile" && import_constants3.isClient && (console.groupCollapsed("getSplitStyles (collapsed)"), (0, import_log.log)({
+      process.env.NODE_ENV === "development" && debug && debug !== "profile" && import_constants.isClient && (console.groupCollapsed("getSplitStyles (collapsed)"), (0, import_log.log)({
         props,
         staticConfig,
         shouldDoClasses,
@@ -3576,7 +3576,7 @@ var require_getSplitStyles_native = __commonJS({
         if (styleProps.disableExpandShorthands || keyInit in shorthands && (keyInit = shorthands[keyInit]), keyInit === "className" || keyInit in usedKeys || keyInit in skipProps && !styleProps.noSkip && !isHOC)
           continue;
         let valInitType = typeof valInit, isValidStyleKeyInit = isValidStyleKey(keyInit, staticConfig);
-        if (styleState.curProps[keyInit] = valInit, !import_constants3.isAndroid && keyInit === "elevationAndroid")
+        if (styleState.curProps[keyInit] = valInit, !import_constants.isAndroid && keyInit === "elevationAndroid")
           continue;
         if (keyInit === "userSelect")
           keyInit = "selectable", valInit = valInit !== "none";
@@ -3632,7 +3632,7 @@ var require_getSplitStyles_native = __commonJS({
         isHOC && (parentStaticConfig == null ? void 0 : parentStaticConfig.variants) && keyInit in parentStaticConfig.variants || (inlineProps == null ? void 0 : inlineProps.has(keyInit)), parentVariant = (_a = parentStaticConfig == null ? void 0 : parentStaticConfig.variants) == null ? void 0 : _a[keyInit], isHOCShouldPassThrough = !!(isHOC && (isShorthand || isValidStyleKeyInit || isMediaOrPseudo || parentVariant || keyInit in skipProps)), shouldPassThrough = shouldPassProp || isHOCShouldPassThrough;
         if (process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupCollapsed(
           `\u{1F539}\u{1F539}\u{1F539}\u{1F539} ${keyOg}${keyInit !== keyOg ? ` (shorthand for ${keyInit})` : ""} ${shouldPassThrough ? "(pass)" : ""} \u{1F539}\u{1F539}\u{1F539}\u{1F539}`
-        ), (0, import_log.log)({ isVariant, valInit, shouldPassProp }), import_constants3.isClient && (0, import_log.log)({
+        ), (0, import_log.log)({ isVariant, valInit, shouldPassProp }), import_constants.isClient && (0, import_log.log)({
           variants,
           variant: variants == null ? void 0 : variants[keyInit],
           isVariant,
@@ -3649,7 +3649,7 @@ var require_getSplitStyles_native = __commonJS({
         if (next && (styleState.fontFamily = next), process.env.NODE_ENV === "development" && debug === "verbose") {
           console.groupCollapsed("  \u{1F4A0} expanded", keyInit, valInit);
           try {
-            !import_constants3.isServer && import_isDevTools.isDevTools && ((0, import_log.log)({
+            !import_constants.isServer && import_isDevTools.isDevTools && ((0, import_log.log)({
               expanded,
               styleProps,
               componentState,
@@ -3691,20 +3691,15 @@ current`, {
                   Object.assign(pseudos[key], pseudoStyleObject);
                   continue;
                 }
-                if (shouldDoClasses && !isEnter && !isExit) {
+                if (shouldDoClasses && !isExit) {
                   let pseudoStyles = (0, import_getStylesAtomic.generateAtomicStyles)(pseudoStyleObject, descriptor);
                   process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupCollapsed("pseudo (classes)", key), (0, import_log.log)({ pseudoStyleObject, pseudoStyles }), console.groupEnd());
                   for (let psuedoStyle of pseudoStyles)
                     `${psuedoStyle.property}${PROP_SPLIT}${descriptor.name}` in usedKeys || psuedoStyle.identifier;
-                } else {
-                  let descriptorKey = descriptor.stateKey || descriptor.name, pseudoState = componentState[descriptorKey], isDisabled = isExit ? !styleProps.isExiting : !pseudoState;
-                  import_constants3.isWeb && !import_constants3.isClient && isEnter && (isDisabled = !1), process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupCollapsed("pseudo", key, { isDisabled }), (0, import_log.log)(pseudoStyleObject, {
-                    isDisabled,
-                    descriptorKey,
-                    descriptor,
-                    pseudoState,
-                    state: { ...componentState }
-                  }), console.groupEnd());
+                }
+                if (!shouldDoClasses || isExit || isEnter) {
+                  let descriptorKey = descriptor.stateKey || descriptor.name, isDisabled = componentState[descriptorKey] === !1;
+                  isExit && (isDisabled = !styleProps.isExiting), isEnter && (isDisabled = componentState.unmounted === "should-enter" ? !0 : !componentState.unmounted), process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupCollapsed("pseudo", key, { isDisabled }), (0, import_log.log)({ pseudoStyleObject, isDisabled, descriptor, componentState }), console.groupEnd());
                   let importance = descriptor.priority;
                   for (let pkey in pseudoStyleObject) {
                     let val2 = pseudoStyleObject[pkey];
@@ -3739,7 +3734,7 @@ current`, {
                   let platform = key.slice(10);
                   if (
                     // supports web, ios, android
-                    platform !== import_constants3.currentPlatform && // supports web, native
+                    platform !== import_constants.currentPlatform && // supports web, native
                     platform !== "native"
                   )
                     continue;
@@ -3844,7 +3839,7 @@ current`, {
               if (
                 // is HOC we can just pass through the styles as props
                 // this fixes issues where style prop got merged with wrong priority
-                !isHOC && (isValidStyleKey(key, staticConfig) || import_constants3.isAndroid && key === "elevation")
+                !isHOC && (isValidStyleKey(key, staticConfig) || import_constants.isAndroid && key === "elevation")
               ) {
                 mergeStyle(styleState, key, val);
                 continue;
@@ -3861,7 +3856,7 @@ current`, {
           }
         }
       }
-      if (props.style && mergeStylePropIntoStyle(styleState, props.style), styleProps.noNormalize !== !1 && ((0, import_expandStyles.fixStyles)(style), import_constants3.isWeb && !staticConfig.isReactNative && (0, import_getStylesAtomic.styleToCSS)(style), styleState.transforms && Object.entries(styleState.transforms).sort(([a], [b]) => a.localeCompare(b)).forEach(([key, val]) => {
+      if (props.style && mergeStylePropIntoStyle(styleState, props.style), styleProps.noNormalize !== !1 && ((0, import_expandStyles.fixStyles)(style), import_constants.isWeb && !staticConfig.isReactNative && (0, import_getStylesAtomic.styleToCSS)(style), styleState.transforms && Object.entries(styleState.transforms).sort(([a], [b]) => a.localeCompare(b)).forEach(([key, val]) => {
         mergeTransform(style, key, val, !0);
       }), parentSplitStyles && !shouldDoClasses))
         for (let key in parentSplitStyles.style)
@@ -3911,12 +3906,12 @@ current`, {
     };
     function mergeStyle(styleState, key, val, disableNormalize = !1) {
       let { classNames, viewProps, style, usedKeys, styleProps } = styleState;
-      if (import_constants3.isWeb && (val == null ? void 0 : val[0]) === "_")
+      if (import_constants.isWeb && (val == null ? void 0 : val[0]) === "_")
         classNames[key] = val, usedKeys[key] ||= 1;
       else if (key in import_helpers.stylePropsTransform)
         styleState.transforms ||= {}, styleState.transforms[key] = val;
       else {
-        let out = import_constants3.isWeb && !disableNormalize && !styleProps.noNormalize ? (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(val, key) : val;
+        let out = import_constants.isWeb && !disableNormalize && !styleProps.noNormalize ? (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(val, key) : val;
         key in import_helpers.validStylesOnBaseProps ? viewProps[key] = out : style[key] = out;
       }
     }
@@ -3943,7 +3938,7 @@ current`, {
         Object.assign(isRNW ? styleState.classNames : styleState.style, style);
       }
     }
-    var useInsertEffectCompat = import_constants3.isWeb ? import_react3.useInsertionEffect || import_constants3.useIsomorphicLayoutEffect : () => {
+    var useInsertEffectCompat = import_constants.isWeb ? import_react3.useInsertionEffect || import_constants.useIsomorphicLayoutEffect : () => {
     }, useSplitStyles = (...args) => {
       let res = getSplitStyles(...args);
       return useInsertEffectCompat(() => {
@@ -4046,37 +4041,6 @@ var require_mergeProps_native = __commonJS({
   }
 });
 
-// ../web/dist/cjs/helpers/proxyThemeVariables.native.js
-var require_proxyThemeVariables_native = __commonJS({
-  "../web/dist/cjs/helpers/proxyThemeVariables.native.js"(exports2, module2) {
-    "use strict";
-    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
-      for (var name in all)
-        __defProp2(target, name, { get: all[name], enumerable: !0 });
-    }, __copyProps2 = (to, from, except, desc) => {
-      if (from && typeof from == "object" || typeof from == "function")
-        for (let key of __getOwnPropNames2(from))
-          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
-      return to;
-    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), proxyThemeVariables_exports = {};
-    __export2(proxyThemeVariables_exports, {
-      proxyThemeVariables: () => proxyThemeVariables
-    });
-    module2.exports = __toCommonJS2(proxyThemeVariables_exports);
-    function proxyThemeVariables(obj) {
-      return new Proxy(obj || {}, {
-        has(target, key) {
-          return Reflect.has(target, removeStarting$(key));
-        },
-        get(target, key) {
-          return Reflect.get(target, removeStarting$(key));
-        }
-      });
-    }
-    var removeStarting$ = (str) => typeof str == "string" && str[0] === "$" ? str.slice(1) : str;
-  }
-});
-
 // ../web/dist/cjs/helpers/ThemeManagerContext.native.js
 var require_ThemeManagerContext_native = __commonJS({
   "../web/dist/cjs/helpers/ThemeManagerContext.native.js"(exports2, module2) {
@@ -4117,7 +4081,7 @@ var require_ThemeManager_native = __commonJS({
       getManagers: () => getManagers
     });
     module2.exports = __toCommonJS2(ThemeManager_exports);
-    var import_constants3 = require_index_native3(), import_config = require_config_native(), import_constants22 = require_constants_native2(), emptyState = { name: "" };
+    var import_constants = require_index_native3(), import_config = require_config_native(), import_constants2 = require_constants_native2(), emptyState = { name: "" };
     function getHasThemeUpdatingProps(props) {
       return !!(props.name || props.componentName || props.inverse || props.reset);
     }
@@ -4130,7 +4094,7 @@ var require_ThemeManager_native = __commonJS({
         if (!parentManager)
           throw process.env.NODE_ENV !== "production" ? new Error(
             "No parent manager given, this is likely due to duplicated Tamagui dependencies. Check your lockfile for mis-matched versions. It could also be from an error somewhere else in your stack causing Tamagui to recieve undefined context, you can try putting some ErrorBoundary components around other areas of your app, or a Suspense boundary."
-          ) : "\u274C 0";
+          ) : "\u274C 000";
         if (this.parentManager = parentManager, !this.updateStateFromProps(props, !1))
           return parentManager;
       }
@@ -4188,10 +4152,9 @@ var require_ThemeManager_native = __commonJS({
       baseManager != null && baseManager.state.isComponent && (baseName = baseName.replace(/_[A-Z][A-Za-z]+/, ""));
       let nextName = props.reset ? baseName : props.name || "", allComponentThemes = componentManagers.map((x) => (x == null ? void 0 : x.state.name) || "");
       isDirectParentAComponentTheme && allComponentThemes.shift();
-      let base = baseName.split(import_constants22.THEME_NAME_SEPARATOR), max = base.length, min = props.componentName && !nextName ? max : 0;
-      process.env.NODE_ENV !== "production" && props.debug && typeof window < "u" && (console.groupCollapsed("ThemeManager.getState()"), console.info({ props, baseName, base, min, max }));
+      let base = baseName.split(import_constants2.THEME_NAME_SEPARATOR), max = base.length, min = props.componentName && !nextName ? max : 0;
       for (let i = max; i >= min; i--) {
-        let prefix = base.slice(0, i).join(import_constants22.THEME_NAME_SEPARATOR);
+        let prefix = base.slice(0, i).join(import_constants2.THEME_NAME_SEPARATOR);
         props.inverse && (prefix = inverseThemeName(prefix));
         let potentials = [];
         if (prefix && prefix !== baseName && potentials.push(prefix), nextName && potentials.unshift(prefix ? `${prefix}_${nextName}` : nextName), i === 1) {
@@ -4206,7 +4169,7 @@ var require_ThemeManager_native = __commonJS({
           }
           if (componentPotentials.push(`${prefix}_${componentName}`), nextName) {
             if (i > baseLen) {
-              let prefixLessOne = base.slice(0, i - 1).join(import_constants22.THEME_NAME_SEPARATOR);
+              let prefixLessOne = base.slice(0, i - 1).join(import_constants2.THEME_NAME_SEPARATOR);
               if (prefixLessOne) {
                 let lessSpecific = `${prefixLessOne}_${nextName}_${componentName}`;
                 componentPotentials.unshift(lessSpecific);
@@ -4227,7 +4190,7 @@ var require_ThemeManager_native = __commonJS({
           baseName,
           prefix
         }), found) {
-          let names = found.split("_"), [firstName, ...restNames] = names, lastName = names[names.length - 1], isComponent = lastName[0] === lastName[0].toUpperCase(), scheme = firstName === "light" ? "light" : firstName === "dark" ? "dark" : void 0, pre = import_constants22.THEME_CLASSNAME_PREFIX, className = import_constants3.isWeb ? `${pre}sub_theme ${pre}${!scheme || !restNames.length ? firstName : restNames.join("_")}` : "", parentState = (_a = baseManager || parentManager) == null ? void 0 : _a.state, parentName = parentState == null ? void 0 : parentState.name;
+          let names = found.split("_"), [firstName, ...restNames] = names, lastName = names[names.length - 1], isComponent = lastName[0] === lastName[0].toUpperCase(), scheme = firstName === "light" ? "light" : firstName === "dark" ? "dark" : void 0, pre = import_constants2.THEME_CLASSNAME_PREFIX, className = import_constants.isWeb ? `${pre}sub_theme ${pre}${!scheme || !restNames.length ? firstName : restNames.join("_")}` : "", parentState = (_a = baseManager || parentManager) == null ? void 0 : _a.state, parentName = parentState == null ? void 0 : parentState.name;
           result = {
             name: found,
             parentName,
@@ -4239,7 +4202,7 @@ var require_ThemeManager_native = __commonJS({
           break;
         }
       }
-      return process.env.NODE_ENV !== "production" && typeof props.debug == "string" && typeof window < "u" && (console.warn("ThemeManager.getState():", { result }), console.trace(), console.groupEnd()), result;
+      return process.env.NODE_ENV !== "production" && props.debug === "verbose" && typeof window < "u" && (console.groupCollapsed("ThemeManager.getState()"), console.info({ props, baseName, base, min, max }), console.warn("result", { result }), console.trace(), console.groupEnd()), result;
     }
     var inverseThemeName = (themeName) => themeName.startsWith("light") ? themeName.replace(/^light/, "dark") : themeName.replace(/^dark/, "light");
     function getManagers(themeManager) {
@@ -4273,7 +4236,7 @@ var require_useTheme_native = __commonJS({
       useThemeWithState: () => useThemeWithState
     });
     module2.exports = __toCommonJS2(useTheme_exports);
-    var import_constants3 = require_index_native3(), import_react3 = require("react"), import_config = require_config_native(), import_createVariable = require_createVariable_native(), import_createShallowSetState = require_createShallowSetState_native(), import_ThemeManager = require_ThemeManager_native(), import_ThemeManagerContext = require_ThemeManagerContext_native(), emptyProps = { name: null }, cached;
+    var import_constants = require_index_native3(), import_react3 = require("react"), import_config = require_config_native(), import_createVariable = require_createVariable_native(), import_createShallowSetState = require_createShallowSetState_native(), import_ThemeManager = require_ThemeManager_native(), import_ThemeManagerContext = require_ThemeManagerContext_native(), emptyProps = { name: null }, cached;
     function getDefaultThemeProxied() {
       if (cached)
         return cached;
@@ -4288,10 +4251,10 @@ var require_useTheme_native = __commonJS({
         props,
         !1,
         keys.current,
-        import_constants3.isServer ? void 0 : () => {
+        import_constants.isServer ? void 0 : () => {
           var _a, _b;
           let next = ((_a = props.shouldUpdate) == null ? void 0 : _a.call(props)) ?? (keys.current.length > 0 ? !0 : void 0);
-          return process.env.NODE_ENV === "development" && props.debug && props.debug !== "profile" && console.info("  \u{1F3A8} useTheme() shouldUpdate?", next, {
+          return process.env.NODE_ENV === "development" && typeof props.debug == "string" && props.debug !== "profile" && console.info("  \u{1F3A8} useTheme() shouldUpdate?", next, {
             shouldUpdateProp: (_b = props.shouldUpdate) == null ? void 0 : _b.call(props),
             keys: [...keys.current]
           }), next;
@@ -4338,7 +4301,7 @@ If this is intended and you are using Tamagui without any themes, you can disabl
                   else if (subkey === "get")
                     return (platform) => {
                       let outVal = (0, import_createVariable.getVariable)(val);
-                      if (platform !== "web" && import_constants3.isIos && !deopt && config.settings.fastSchemeChange && !someParentIsInversed(themeManager) && scheme) {
+                      if (platform !== "web" && import_constants.isIos && !deopt && config.settings.fastSchemeChange && !someParentIsInversed(themeManager) && scheme) {
                         let oppositeThemeName = name.replace(
                           scheme === "dark" ? "dark" : "light",
                           scheme === "dark" ? "light" : "dark"
@@ -4403,7 +4366,7 @@ If this is intended and you are using Tamagui without any themes, you can disabl
         if (forceShouldChange || next && !(forceUpdate !== !0 && !manager.getStateShouldChange(next, prevState)))
           return next;
       }
-      if (import_constants3.isServer || ((0, import_react3.useEffect)(() => {
+      if (import_constants.isServer || ((0, import_react3.useEffect)(() => {
         if (!themeManager)
           return;
         if (props.inverse && !mounted) {
@@ -4493,7 +4456,7 @@ If this is intended and you are using Tamagui without any themes, you can disabl
         (0, import_createShallowSetState.isEqualShallow)(prev.state, state2);
         if (prev && shouldReturnPrev)
           return prev;
-        if (response.state = state2, process.env.NODE_ENV === "development" && props.debug && import_constants3.isClient) {
+        if (response.state = state2, process.env.NODE_ENV === "development" && props.debug && import_constants.isClient) {
           console.groupCollapsed(` \u{1F537} ${themeManager2.id} useChangeThemeEffect createState`);
           let parentState = { ...parentManager == null ? void 0 : parentManager.state }, parentId = parentManager == null ? void 0 : parentManager.id, themeManagerState = { ...themeManager2.state };
           console.info({
@@ -4565,7 +4528,7 @@ var require_Theme_native = __commonJS({
       getThemedChildren: () => getThemedChildren
     });
     module2.exports = __toCommonJS2(Theme_exports);
-    var import_constants3 = require_index_native3(), import_react3 = __toESM2(require("react")), import_createVariable = require_createVariable_native(), import_ThemeManagerContext = require_ThemeManagerContext_native(), import_useTheme = require_useTheme_native(), import_ThemeDebug = require_ThemeDebug_native(), import_jsx_runtime = require("react/jsx-runtime"), Theme = (0, import_react3.forwardRef)(function({ children, ...props }, ref) {
+    var import_constants = require_index_native3(), import_react3 = __toESM2(require("react")), import_createVariable = require_createVariable_native(), import_ThemeManagerContext = require_ThemeManagerContext_native(), import_useTheme = require_useTheme_native(), import_ThemeDebug = require_ThemeDebug_native(), import_jsx_runtime = require("react/jsx-runtime"), Theme = (0, import_react3.forwardRef)(function({ children, ...props }, ref) {
       if (props.disable)
         return children;
       let isRoot = !!props._isRoot, themeState = (0, import_useTheme.useChangeThemeEffect)(props, isRoot), finalChildren = props["disable-child-theme"] ? import_react3.Children.map(
@@ -4585,7 +4548,7 @@ var require_Theme_native = __commonJS({
       let { themeManager, isNewTheme } = themeState;
       if (!themeManager)
         throw new Error(
-          process.env.NODE_ENV === "development" ? "\u274C No theme found, either incorrect name, potential duplicate tamagui deps, or TamaguiProvider not providing themes." : "\u274C"
+          process.env.NODE_ENV === "development" ? "\u274C No theme found, either incorrect name, potential duplicate tamagui deps, or TamaguiProvider not providing themes." : "\u274C 005"
         );
       let { shallow, forceClassName } = props, hasEverThemed = (0, import_react3.useRef)(!1), shouldRenderChildrenWithTheme = isNewTheme || props.inverse || hasEverThemed.current || forceClassName || isRoot;
       if (shouldRenderChildrenWithTheme && (hasEverThemed.current = !0), !shouldRenderChildrenWithTheme)
@@ -4597,7 +4560,7 @@ var require_Theme_native = __commonJS({
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Theme, { name: themeManager.state.parentName, children: child.props.children })
       ) : child));
       let elementsWithContext = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ThemeManagerContext.ThemeManagerIDContext.Provider, { value: themeManager.id, children: next });
-      return forceClassName === !1 ? elementsWithContext : import_constants3.isWeb ? wrapThemeElements({
+      return forceClassName === !1 ? elementsWithContext : import_constants.isWeb ? wrapThemeElements({
         children: elementsWithContext,
         themeState,
         forceClassName,
@@ -4718,7 +4681,7 @@ var require_Slot_native = __commonJS({
       Slottable: () => Slottable
     });
     module2.exports = __toCommonJS2(Slot_exports);
-    var import_compose_refs = require_index_native5(), import_constants3 = require_index_native3(), import_helpers = require_index_native4(), import_react3 = require("react"), import_jsx_runtime = require("react/jsx-runtime"), Slot = (0, import_react3.forwardRef)(function(props, forwardedRef) {
+    var import_compose_refs = require_index_native5(), import_constants = require_index_native3(), import_helpers = require_index_native4(), import_react3 = require("react"), import_jsx_runtime = require("react/jsx-runtime"), Slot = (0, import_react3.forwardRef)(function(props, forwardedRef) {
       let { children, ...slotProps } = props;
       if ((0, import_react3.isValidElement)(children)) {
         let mergedProps = mergeSlotProps(children, slotProps);
@@ -4735,7 +4698,7 @@ var require_Slot_native = __commonJS({
     Slot.displayName = "Slot";
     var Slottable = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children });
     Slottable.displayName = "Slottable";
-    var pressMap = import_constants3.isWeb ? {
+    var pressMap = import_constants.isWeb ? {
       onPress: "onClick",
       onPressOut: "onMouseUp",
       onPressIn: "onMouseDown"
@@ -4783,7 +4746,7 @@ var require_createComponent_native = __commonJS({
       spacedChildren: () => spacedChildren
     });
     module2.exports = __toCommonJS2(createComponent_exports);
-    var import_compose_refs = require_index_native5(), import_constants3 = require_index_native3(), import_helpers = require_index_native4(), import_use_did_finish_ssr = require_index_native6(), import_react3 = __toESM2(require("react")), import_config = require_config_native(), import_constants22 = require_constants_native2(), 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_log = require_log_native(), import_mergeProps = require_mergeProps_native(), import_proxyThemeVariables = require_proxyThemeVariables_native(), import_themeable = require_themeable_native(), import_useMedia = require_useMedia_native(), import_useTheme = require_useTheme_native(), import_setupHooks = require_setupHooks_native(), import_Slot = require_Slot_native(), import_Theme = require_Theme_native(), import_ThemeDebug = require_ThemeDebug_native(), import_jsx_runtime = require("react/jsx-runtime"), tamaguiConfig, initialTheme, time, debugKeyListeners, startVisualizer, mouseUps = /* @__PURE__ */ new Set();
+    var import_compose_refs = require_index_native5(), import_constants = require_index_native3(), import_helpers = require_index_native4(), import_use_did_finish_ssr = require_index_native6(), import_react3 = __toESM2(require("react")), import_config = require_config_native(), import_constants2 = require_constants_native2(), 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_log = require_log_native(), import_mergeProps = require_mergeProps_native(), import_themeable = require_themeable_native(), import_useMedia = require_useMedia_native(), import_useTheme = require_useTheme_native(), import_setupHooks = require_setupHooks_native(), import_Slot = require_Slot_native(), import_Theme = require_Theme_native(), import_ThemeDebug = require_ThemeDebug_native(), import_jsx_runtime = require("react/jsx-runtime"), tamaguiConfig, time, debugKeyListeners, startVisualizer, mouseUps = /* @__PURE__ */ new Set();
     if (typeof document < "u") {
       let cancelTouches = () => {
         mouseUps.forEach((x) => x()), mouseUps.clear();
@@ -4813,17 +4776,13 @@ var require_createComponent_native = __commonJS({
     var BaseText, BaseView, hasSetupBaseViews = !1;
     function createComponent(staticConfig) {
       var _a;
-      let config = null, defaultProps = staticConfig.defaultProps;
+      let { componentName } = staticConfig, config = null, defaultProps = staticConfig.defaultProps;
       (0, import_config.onConfiguredOnce)((conf) => {
         var _a2;
-        if (config = conf, staticConfig.componentName) {
-          let defaultForComponent = (_a2 = conf.defaultProps) == null ? void 0 : _a2[staticConfig.componentName];
+        if (config = conf, componentName) {
+          let defaultForComponent = (_a2 = conf.defaultProps) == null ? void 0 : _a2[componentName];
           defaultForComponent && (defaultProps = { ...defaultForComponent, ...defaultProps });
         }
-        if (!tamaguiConfig && (tamaguiConfig = conf, !initialTheme)) {
-          let next = conf.themes[Object.keys(conf.themes)[0]];
-          initialTheme = (0, import_proxyThemeVariables.proxyThemeVariables)(next), process.env.NODE_ENV === "development" && (initialTheme || (0, import_log.log)("Warning: Missing theme"));
-        }
       });
       let {
         Component,
@@ -4832,14 +4791,14 @@ var require_createComponent_native = __commonJS({
         isHOC,
         validStyles: validStyles2 = {},
         variants = {}
-      } = staticConfig, defaultComponentClassName = `is_${staticConfig.componentName}`;
-      process.env.NODE_ENV === "development" && (_a = staticConfig.defaultProps) != null && _a.debug && process.env.IS_STATIC !== "is_static" && (0, import_log.log)(`\u{1F41B} [${staticConfig.componentName || "Component"}]`, {
+      } = staticConfig;
+      process.env.NODE_ENV === "development" && (_a = staticConfig.defaultProps) != null && _a.debug && process.env.IS_STATIC !== "is_static" && (0, import_log.log)(`\u{1F41B} [${componentName || "Component"}]`, {
         staticConfig,
         defaultProps,
         defaultPropsKeyOrder: defaultProps ? Object.keys(defaultProps) : []
       });
       let component = (0, import_react3.forwardRef)((propsIn, forwardedRef) => {
-        var _a2, _b, _c, _d, _e, _f, _i, _j, _k, _l, _m, _n;
+        var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
         let internalID = process.env.NODE_ENV === "development" ? (0, import_react3.useId)() : "";
         if (process.env.NODE_ENV === "development" && startVisualizer && (startVisualizer(), startVisualizer = void 0), !hasSetupBaseViews) {
           hasSetupBaseViews = !0;
@@ -4861,39 +4820,39 @@ var require_createComponent_native = __commonJS({
         }
         let curDefaultProps = styledContextProps ? { ...defaultProps, ...styledContextProps } : defaultProps, props = propsIn;
         curDefaultProps && (props = (0, import_mergeProps.mergeProps)(curDefaultProps, propsIn));
-        let debugProp = props.debug, componentName = props.componentName || staticConfig.componentName;
-        process.env.NODE_ENV === "development" && import_constants3.isClient && (0, import_react3.useEffect)(() => {
+        let debugProp = props.debug, componentName2 = props.componentName || staticConfig.componentName;
+        process.env.NODE_ENV === "development" && import_constants.isClient && (0, import_react3.useEffect)(() => {
           let overlay = null, debugVisualizerHandler = (show = !1) => {
             let node = hostRef.current;
             if (node)
               if (show) {
                 overlay = document.createElement("span"), overlay.style.inset = "0px", overlay.style.zIndex = "1000000", overlay.style.position = "absolute", overlay.style.borderColor = "red", overlay.style.borderWidth = "1px", overlay.style.borderStyle = "dotted";
                 let dataAt = node.getAttribute("data-at") || "", dataIn = node.getAttribute("data-in") || "", tooltip = document.createElement("span");
-                tooltip.style.position = "absolute", tooltip.style.top = "0px", tooltip.style.left = "0px", tooltip.style.padding = "3px", tooltip.style.background = "rgba(0,0,0,0.75)", tooltip.style.color = "rgba(255,255,255,1)", tooltip.style.fontSize = "12px", tooltip.style.lineHeight = "12px", tooltip.style.fontFamily = "monospace", tooltip.style.webkitFontSmoothing = "none", tooltip.innerText = `${componentName || ""} ${dataAt} ${dataIn}`.trim(), overlay.appendChild(tooltip), node.appendChild(overlay);
+                tooltip.style.position = "absolute", tooltip.style.top = "0px", tooltip.style.left = "0px", tooltip.style.padding = "3px", tooltip.style.background = "rgba(0,0,0,0.75)", tooltip.style.color = "rgba(255,255,255,1)", tooltip.style.fontSize = "12px", tooltip.style.lineHeight = "12px", tooltip.style.fontFamily = "monospace", tooltip.style.webkitFontSmoothing = "none", tooltip.innerText = `${componentName2 || ""} ${dataAt} ${dataIn}`.trim(), overlay.appendChild(tooltip), node.appendChild(overlay);
               } else
                 overlay && node.removeChild(overlay);
           };
           return debugKeyListeners ||= /* @__PURE__ */ new Set(), debugKeyListeners.add(debugVisualizerHandler), () => {
             debugKeyListeners == null || debugKeyListeners.delete(debugVisualizerHandler);
           };
-        }, [componentName]), process.env.NODE_ENV === "development" && time && time`start (ignore)`;
-        let isHydrated = config != null && config.disableSSR ? !0 : (0, import_use_did_finish_ssr.useDidFinishSSR)();
-        process.env.NODE_ENV === "development" && time && time`did-finish-ssr`;
+        }, [componentName2]), process.env.NODE_ENV === "development" && time && time`start (ignore)`, process.env.NODE_ENV === "development" && time && time`did-finish-ssr`;
         let stateRef = (0, import_react3.useRef)(
           {}
         );
         process.env.NODE_ENV === "development" && time && time`stateref`;
-        let hostRef = (0, import_react3.useRef)(null), animationsConfig = componentContext.animationDriver, useAnimations = animationsConfig == null ? void 0 : animationsConfig.useAnimations, hasAnimationProp = !!("animation" in props || props.style && hasAnimatedStyleValue(props.style)), supportsCSSVars = animationsConfig == null ? void 0 : animationsConfig.supportsCSSVars, willBeAnimated = (() => {
-          if (import_constants3.isServer && !supportsCSSVars)
-            return !1;
-          let curState = stateRef.current;
-          return !!(hasAnimationProp && !isHOC && useAnimations || curState.hasAnimated);
-        })(), usePresence = animationsConfig == null ? void 0 : animationsConfig.usePresence, presence = willBeAnimated && (usePresence == null ? void 0 : usePresence()) || null, hasEnterStyle = !!props.enterStyle, needsMount = !!((!import_constants3.isWeb || import_constants3.isClient) && willBeAnimated);
-        process.env.NODE_ENV === "development" && time && time`pre-use-state`;
-        let initialState = willBeAnimated ? supportsCSSVars ? import_defaultComponentState.defaultComponentStateShouldEnter : import_defaultComponentState.defaultComponentState : import_defaultComponentState.defaultComponentStateMounted, states = (0, import_react3.useState)(initialState), state = propsIn.forceStyle ? { ...states[0], [propsIn.forceStyle]: !0 } : states[0], setState = states[1], setStateShallow = (0, import_createShallowSetState.createShallowSetState)(setState), groupName = props.group, groupClassName = groupName ? `t_group_${props.group}` : "";
-        if (groupName && !stateRef.current.group) {
+        let hostRef = (0, import_react3.useRef)(null), animationsConfig = componentContext.animationDriver, useAnimations = animationsConfig == null ? void 0 : animationsConfig.useAnimations, hasAnimationProp = !!("animation" in props || props.style && hasAnimatedStyleValue(props.style)), supportsCSSVars = animationsConfig == null ? void 0 : animationsConfig.supportsCSSVars, curState = stateRef.current, willBeAnimatedClient = !!(hasAnimationProp && !isHOC && useAnimations || curState.hasAnimated), willBeAnimated = !import_constants.isServer && willBeAnimatedClient;
+        willBeAnimated && !curState.hasAnimated && (curState.hasAnimated = !0);
+        let isHydrated = config != null && config.disableSSR ? !0 : (0, import_use_did_finish_ssr.useDidFinishSSR)(), presence = willBeAnimated && ((_c = animationsConfig == null ? void 0 : animationsConfig.usePresence) == null ? void 0 : _c.call(animationsConfig)) || null, presenceState = presence == null ? void 0 : presence[2], enterExitVariant = presenceState == null ? void 0 : presenceState.enterExitVariant, enterVariant = enterExitVariant ?? (presenceState == null ? void 0 : presenceState.enterVariant), hasEnterStyle = !!props.enterStyle, hasRNAnimation = hasAnimationProp && (animationsConfig == null ? void 0 : animationsConfig.isReactNative), isReactNative = staticConfig.isReactNative, isAnimated = willBeAnimated;
+        !isReactNative && hasRNAnimation && !isHOC && !isHydrated && (isAnimated = !1, curState.willHydrate = !0), process.env.NODE_ENV === "development" && time && time`pre-use-state`;
+        let initialState = hasEnterStyle || enterVariant ? isHydrated ? import_defaultComponentState.defaultComponentState : import_defaultComponentState.defaultComponentStateShouldEnter : import_defaultComponentState.defaultComponentStateMounted, states = (0, import_react3.useState)(initialState), state = props.forceStyle ? { ...states[0], [props.forceStyle]: !0 } : states[0], setState = states[1], setStateShallow = (0, import_createShallowSetState.createShallowSetState)(setState, debugProp);
+        if (isHydrated && state.unmounted === "should-enter" && (state.unmounted = !0), presenceState && isAnimated && isHydrated) {
+          let isExiting2 = !presenceState.isPresent, exitVariant = enterExitVariant ?? presenceState.exitVariant;
+          state.unmounted && enterVariant ? (process.env.NODE_ENV === "development" && debugProp === "verbose" && console.warn(`Animating presence ENTER "${enterVariant}"`), props[enterVariant] = !0) : isExiting2 && exitVariant && (process.env.NODE_ENV === "development" && debugProp === "verbose" && console.warn(`Animating presence EXIT "${enterVariant}"`), props[exitVariant] = !enterExitVariant);
+        }
+        let shouldAvoidClasses = !!(!import_constants.isWeb || isAnimated && !supportsCSSVars || !staticConfig.acceptsClassName || propsIn.disableClassName), shouldForcePseudo = !!propsIn.forceStyle, noClassNames = shouldAvoidClasses || shouldForcePseudo, groupName = props.group, groupClassName = groupName ? `t_group_${props.group}` : "";
+        if (groupName && !curState.group) {
           let listeners = /* @__PURE__ */ new Set();
-          stateRef.current.group = {
+          curState.group = {
             listeners,
             emit(name, state2) {
               listeners.forEach((l) => l(name, state2));
@@ -4908,7 +4867,7 @@ var require_createComponent_native = __commonJS({
         if (groupName) {
           let groupContextState = componentContext.groups.state, og = setStateShallow;
           setStateShallow = (state2) => {
-            og(state2), stateRef.current.group.emit(groupName, {
+            og(state2), curState.group.emit(groupName, {
               pseudo: state2
             });
             let next = {
@@ -4919,53 +4878,30 @@ var require_createComponent_native = __commonJS({
           };
         }
         process.env.NODE_ENV === "development" && time && time`use-state`;
-        let isAnimated = willBeAnimated;
-        willBeAnimated && !supportsCSSVars && !presence && isHydrated && (import_constants3.isServer || state.unmounted === !0) && (isAnimated = !1), willBeAnimated && !stateRef.current.hasAnimated && (stateRef.current.hasAnimated = !0);
-        let componentClassName = props.asChild ? "" : props.componentName ? `is_${props.componentName}` : defaultComponentClassName, hasTextAncestor = !!(import_constants3.isWeb && isText && componentContext.inText), isDisabled = props.disabled ?? ((_c = props.accessibilityState) == null ? void 0 : _c.disabled);
+        let componentNameFinal = props.componentName || componentName2, componentClassName = props.asChild || !componentNameFinal ? "" : `is_${componentNameFinal}`, hasTextAncestor = !!(import_constants.isWeb && isText && componentContext.inText), isDisabled = props.disabled ?? ((_d = props.accessibilityState) == null ? void 0 : _d.disabled);
         process.env.NODE_ENV === "development" && time && time`use-context`;
-        let element = import_constants3.isWeb && (!Component || typeof Component == "string") && props.tag || Component, elementType = isText ? BaseText || element || "span" : BaseView || element || (hasTextAncestor ? "span" : "div");
-        if (animationsConfig && willBeAnimated && (elementType = animationsConfig[isText ? "Text" : "View"] || elementType), isAnimated && presence) {
-          let presenceState = presence[2];
-          if (presenceState) {
-            let isEntering = state.unmounted, isExiting2 = !presenceState.isPresent, enterExitVariant = presenceState.enterExitVariant, enterVariant = enterExitVariant ?? presenceState.enterVariant, exitVariant = enterExitVariant ?? presenceState.exitVariant;
-            isEntering && enterVariant ? (process.env.NODE_ENV === "development" && debugProp === "verbose" && console.warn(`Animating presence ENTER "${enterVariant}"`), props[enterVariant] = !0) : isExiting2 && exitVariant && (process.env.NODE_ENV === "development" && debugProp === "verbose" && console.warn(`Animating presence EXIT "${enterVariant}"`), props[exitVariant] = !enterExitVariant);
-          }
-        }
-        let isAnimatedReactNative = hasAnimationProp && (animationsConfig == null ? void 0 : animationsConfig.isReactNative), isReactNative = !!(staticConfig.isReactNative || isAnimatedReactNative), shouldAvoidClasses = !!(!import_constants3.isWeb || isAnimated || !staticConfig.acceptsClassName || propsIn.disableClassName), shouldForcePseudo = !!propsIn.forceStyle, noClassNames = shouldAvoidClasses || shouldForcePseudo, disableTheme = isHOC;
-        process.env.NODE_ENV === "development" && time && time`theme-props`, props.themeShallow && (stateRef.current.themeShallow = !0);
+        let element = import_constants.isWeb && (!Component || typeof Component == "string") && props.tag || Component, elementType = isText ? BaseText || element || "span" : BaseView || element || (hasTextAncestor ? "span" : "div");
+        animationsConfig && isAnimated && (elementType = animationsConfig[isText ? "Text" : "View"] || elementType);
+        let disableTheme = isHOC;
+        process.env.NODE_ENV === "development" && time && time`theme-props`, props.themeShallow && (curState.themeShallow = !0);
         let themeStateProps = {
           name: props.theme,
-          componentName,
+          componentName: componentName2,
           disable: disableTheme,
-          shallow: stateRef.current.themeShallow,
+          shallow: curState.themeShallow,
           inverse: props.themeInverse,
           debug: debugProp
         };
-        typeof stateRef.current.isListeningToTheme == "boolean" && (themeStateProps.shouldUpdate = () => stateRef.current.isListeningToTheme), themeStateProps.deopt = willBeAnimated;
+        typeof curState.isListeningToTheme == "boolean" && (themeStateProps.shouldUpdate = () => stateRef.current.isListeningToTheme), themeStateProps.deopt = willBeAnimated;
         let isExiting = !state.unmounted && (presence == null ? void 0 : presence[0]) === !1;
         if (process.env.NODE_ENV === "development" && debugProp && debugProp !== "profile") {
-          let name = `${componentName || (Component == null ? void 0 : Component.displayName) || (Component == null ? void 0 : Component.name) || "[Unnamed Component]"}`, type = isAnimatedReactNative ? "(animated)" : isReactNative ? "(rnw)" : "", dataIs = propsIn["data-is"] || "", banner = `${name}${dataIs ? ` ${dataIs}` : ""} ${type} id ${internalID}`;
+          let name = `${componentName2 || (Component == null ? void 0 : Component.displayName) || (Component == null ? void 0 : Component.name) || "[Unnamed Component]"}`, type = (hasEnterStyle ? "(hasEnter)" : "") + (isAnimated ? "(animated)" : "") + (isReactNative ? "(rnw)" : ""), dataIs = propsIn["data-is"] || "", banner = `${internalID} ${name}${dataIs ? ` ${dataIs}` : ""} ${type}`;
           console.group(
-            `%c ${banner} (unmounted: ${state.unmounted})${presence ? ` (presence: ${presence[0]})` : ""} ${isHydrated ? "\u{1F4A6}" : "\u{1F3DC}\uFE0F"}`,
+            `%c ${banner} (hydrated: ${isHydrated}) (unmounted: ${state.unmounted})`,
             "background: green; color: white;"
-          ), import_constants3.isServer || (console.groupCollapsed(
+          ), import_constants.isServer || (console.groupEnd(), console.groupEnd(), console.groupCollapsed(
             `Info (collapsed): ${state.press || state.pressIn ? "PRESSED " : ""}${state.hover ? "HOVERED " : ""}${state.focus ? "FOCUSED" : " "}`
-          ), (0, import_log.log)({
-            propsIn,
-            props,
-            state,
-            staticConfig,
-            elementType,
-            themeStateProps,
-            styledContext: { contextProps: styledContextProps, overriddenContextProps },
-            presence,
-            isAnimated,
-            isHOC,
-            hasAnimationProp,
-            useAnimations,
-            propsInOrder: Object.keys(propsIn),
-            propsOrder: Object.keys(props)
-          }), console.groupEnd());
+          ), (0, import_log.log)({ propsIn, props, state, staticConfig, elementType, themeStateProps }), (0, import_log.log)({ contextProps: styledContextProps, overriddenContextProps }), (0, import_log.log)({ presence, isAnimated, isHOC, hasAnimationProp, useAnimations }), console.groupEnd());
         }
         process.env.NODE_ENV === "development" && time && time`pre-theme-media`;
         let [themeState, theme] = (0, import_useTheme.useThemeWithState)(themeStateProps);
@@ -4977,18 +4913,17 @@ var require_createComponent_native = __commonJS({
         let resolveValues = (
           // if HOC + mounted + has animation prop, resolve as value so it passes non-variable to child
           isAnimated && !supportsCSSVars || isHOC && state.unmounted == !1 && hasAnimationProp ? "value" : "auto"
-        ), keepStyleSSR = willBeAnimated && (animationsConfig == null ? void 0 : animationsConfig.keepStyleSSR), styleProps = {
+        ), styleProps = {
           mediaState: mediaState2,
           noClassNames,
           resolveValues,
           isExiting,
-          isAnimated,
-          keepStyleSSR
+          isAnimated
         }, splitStyles = (0, import_getSplitStyles.useSplitStyles)(
           props,
           staticConfig,
           theme,
-          ((_d = themeState == null ? void 0 : themeState.state) == null ? void 0 : _d.name) || "",
+          ((_e = themeState == null ? void 0 : themeState.state) == null ? void 0 : _e.name) || "",
           state,
           styleProps,
           null,
@@ -4996,15 +4931,12 @@ var require_createComponent_native = __commonJS({
           elementType,
           debugProp
         );
-        props.group && props.untilMeasured === "hide" && !stateRef.current.hasMeasured && (splitStyles.style.opacity = 0), process.env.NODE_ENV === "development" && time && time`split-styles`, stateRef.current.isListeningToTheme = splitStyles.dynamicThemeAccess;
+        props.group && props.untilMeasured === "hide" && !curState.hasMeasured && (splitStyles.style.opacity = 0), process.env.NODE_ENV === "development" && time && time`split-styles`, curState.isListeningToTheme = splitStyles.dynamicThemeAccess;
         let 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, {
           enabled: shouldListenForMedia,
           keys: mediaListeningKeys
         });
-        let isAnimatedReactNativeWeb = hasAnimationProp && isReactNative;
-        if (process.env.NODE_ENV === "development" && debugProp && debugProp !== "profile" && (console.groupCollapsed(">>>"), (0, import_log.log)("props in", propsIn, "mapped to", props, "in order", Object.keys(props)), (0, import_log.log)("splitStyles", splitStyles), (0, import_log.log)("media", { shouldListenForMedia, isMediaArray, mediaListeningKeys }), (0, import_log.log)("className", Object.values(splitStyles.classNames)), import_constants3.isClient && (0, import_log.log)("ref", hostRef, "(click to view)"), console.groupEnd(), debugProp === "break"))
-          debugger;
         let {
           viewProps: viewPropsIn,
           pseudos,
@@ -5012,21 +4944,23 @@ var require_createComponent_native = __commonJS({
           classNames,
           space
         } = splitStyles, propsWithAnimation = props, animationStyles;
-        if (willBeAnimated && useAnimations && !isHOC) {
+        if (
+          // if it supports css vars we run it on server too to get matching initial style
+          (supportsCSSVars ? willBeAnimatedClient : willBeAnimated) && useAnimations && !isHOC
+        ) {
           let animations = useAnimations({
             props: propsWithAnimation,
             // if hydrating, send empty style
             style: splitStylesStyle,
-            // style: splitStylesStyle,
             presence,
             componentState: state,
             styleProps,
-            theme: (_e = themeState.state) == null ? void 0 : _e.theme,
+            theme: (_f = themeState.state) == null ? void 0 : _f.theme,
             pseudos: pseudos || null,
             hostRef,
             staticConfig
           });
-          isAnimated && animations && (animationStyles = animations.style), process.env.NODE_ENV === "development" && time && time`animations`;
+          (isAnimated || supportsCSSVars) && animations && (animationStyles = animations.style), process.env.NODE_ENV === "development" && time && time`animations`;
         }
         let {
           asChild,
@@ -5061,7 +4995,7 @@ var require_createComponent_native = __commonJS({
 
 If you meant to do this, you can disable this warning - either change untilMeasured and group at the same time, or do group={conditional ? 'name' : undefined}`
         ), process.env.NODE_ENV === "development" && time && time`destructure`;
-        let disabled = ((_f = props.accessibilityState) == null ? void 0 : _f.disabled) || // @ts-expect-error (comes from core)
+        let disabled = ((_g = props.accessibilityState) == null ? void 0 : _g.disabled) || // @ts-expect-error (comes from core)
         props.accessibilityDisabled, viewProps = nonTamaguiProps;
         hasAnimationProp && props.tag && !props.role && !props.accessibilityRole && (viewProps.role = props.tag), isHOC && _themeProp && (viewProps.theme = _themeProp), groupName && (nonTamaguiProps.onLayout = (0, import_helpers.composeEventHandlers)(
           nonTamaguiProps.onLayout,
@@ -5070,24 +5004,26 @@ If you meant to do this, you can disable this warning - either change untilMeasu
               layout: e.nativeEvent.layout
             }), !stateRef.current.hasMeasured && props.untilMeasured === "hide" && setState((prev) => ({ ...prev })), stateRef.current.hasMeasured = !0;
           }
-        )), viewProps = nonTamaguiProps;
+        )), viewProps = ((_i = (_h = import_setupHooks.hooks).usePropsTransform) == null ? void 0 : _i.call(
+          _h,
+          elementType,
+          nonTamaguiProps,
+          hostRef,
+          curState.willHydrate
+        )) ?? nonTamaguiProps;
         let composedRef = (0, import_compose_refs.useComposedRefs)(hostRef, forwardedRef);
-        viewProps.ref = composedRef, process.env.NODE_ENV === "development" && !isReactNative && !isText && import_constants3.isWeb && !isHOC && import_react3.Children.toArray(props.children).forEach((item) => {
+        viewProps.ref = composedRef, process.env.NODE_ENV === "development" && !isReactNative && !isText && import_constants.isWeb && !isHOC && import_react3.Children.toArray(props.children).forEach((item) => {
           typeof item == "string" && item !== `
 ` && console.error(
             `Unexpected text node: ${item}. A text node cannot be a child of a <View>.`
           );
         }), process.env.NODE_ENV === "development" && time && time`events-hooks`;
-        let unPress = () => setStateShallow({
-          press: !1,
-          pressIn: !1
-        }), shouldSetMounted = needsMount && state.unmounted, { pseudoGroups, mediaGroups } = splitStyles;
+        let { pseudoGroups, mediaGroups } = splitStyles;
+        curState.unPress || (curState.unPress = () => setStateShallow({ press: !1, pressIn: !1 }));
+        let unPress = curState.unPress, shouldEnter = state.unmounted;
         (0, import_react3.useEffect)(() => {
-          if (shouldSetMounted) {
-            let unmounted = state.unmounted === !0 && hasEnterStyle ? "should-enter" : !1;
-            setStateShallow({
-              unmounted
-            });
+          if (shouldEnter) {
+            setStateShallow({ unmounted: !1 });
             return;
           }
           let disposeGroupsListener;
@@ -5120,16 +5056,15 @@ If you meant to do this, you can disable this warning - either change untilMeasu
             disposeGroupsListener == null || disposeGroupsListener(), mouseUps.delete(unPress);
           };
         }, [
-          shouldSetMounted,
-          state.unmounted,
+          shouldEnter,
           pseudoGroups ? Object.keys([...pseudoGroups]).join("") : 0,
           mediaGroups ? Object.keys([...mediaGroups]).join("") : 0
         ]);
-        let avoidAnimationStyle = keepStyleSSR && state.unmounted === !0, fontFamily = isText ? splitStyles.fontFamily || ((_i = staticConfig.defaultProps) == null ? void 0 : _i.fontFamily) : null;
+        let fontFamily = isText ? splitStyles.fontFamily || ((_j = staticConfig.defaultProps) == null ? void 0 : _j.fontFamily) : null;
         fontFamily && fontFamily[0] === "$" && (fontFamily = fontFamily.slice(1));
-        let fontFamilyClassName = fontFamily ? `font_${fontFamily}` : "", style = avoidAnimationStyle ? splitStyles.style : animationStyles || splitStyles.style, className;
+        let fontFamilyClassName = fontFamily ? `font_${fontFamily}` : "", style = animationStyles || splitStyles.style, className;
         asChild === "except-style" || asChild === "except-style-web" || (viewProps.style = style);
-        let runtimePressStyle = !disabled && noClassNames && (pseudos == null ? void 0 : pseudos.pressStyle), runtimeFocusStyle = !disabled && noClassNames && (pseudos == null ? void 0 : pseudos.focusStyle), attachFocus = !!(runtimePressStyle || runtimeFocusStyle || onFocus || onBlur), attachPress = !!(groupName || runtimePressStyle || onPress || onPressOut || onPressIn || onLongPress || onClick), runtimeHoverStyle = !disabled && noClassNames && (pseudos == null ? void 0 : pseudos.hoverStyle), needsHoverState = runtimeHoverStyle || onHoverIn || onHoverOut, isHoverable = import_constants3.isWeb && !!(groupName || needsHoverState || onMouseEnter || onMouseLeave), shouldAttach = !!(attachFocus || attachPress || isHoverable || runtimePressStyle || runtimeHoverStyle || runtimeFocusStyle);
+        let runtimePressStyle = !disabled && noClassNames && (pseudos == null ? void 0 : pseudos.pressStyle), runtimeFocusStyle = !disabled && noClassNames && (pseudos == null ? void 0 : pseudos.focusStyle), attachFocus = !!(runtimePressStyle || runtimeFocusStyle || onFocus || onBlur), attachPress = !!(groupName || runtimePressStyle || onPress || onPressOut || onPressIn || onLongPress || onClick), runtimeHoverStyle = !disabled && noClassNames && (pseudos == null ? void 0 : pseudos.hoverStyle), needsHoverState = runtimeHoverStyle || onHoverIn || onHoverOut, isHoverable = import_constants.isWeb && !!(groupName || needsHoverState || onMouseEnter || onMouseLeave), shouldAttach = !!(attachFocus || attachPress || isHoverable || runtimePressStyle || runtimeHoverStyle || runtimeFocusStyle);
         process.env.NODE_ENV === "development" && time && time`events-setup`;
         let events = shouldAttach && !isDisabled && !props.asChild ? {
           onPressOut: attachPress ? (e) => {
@@ -5149,10 +5084,10 @@ If you meant to do this, you can disable this warning - either change untilMeasu
             runtimePressStyle && setStateShallow({
               press: !0,
               pressIn: !0
-            }), onPressIn == null || onPressIn(e), onMouseDown == null || onMouseDown(e), import_constants3.isWeb && mouseUps.add(unPress);
+            }), onPressIn == null || onPressIn(e), onMouseDown == null || onMouseDown(e), import_constants.isWeb && mouseUps.add(unPress);
           } : void 0,
           onPress: attachPress ? (e) => {
-            unPress(), import_constants3.isWeb && (onClick == null || onClick(e)), onPress == null || onPress(e);
+            unPress(), import_constants.isWeb && (onClick == null || onClick(e)), onPress == null || onPress(e);
           } : void 0,
           ...attachPress && onLongPress && {
             onLongPress: (e) => {
@@ -5181,7 +5116,7 @@ If you meant to do this, you can disable this warning - either change untilMeasu
           delayPressOut: viewProps.delayPressOut,
           focusable: viewProps.focusable ?? !0,
           minPressDuration: 0
-        }), process.env.NODE_ENV === "development" && time && time`events`, process.env.NODE_ENV === "development" && debugProp === "verbose" && (0, import_log.log)("events", { events, isHoverable, attachPress }), (_k = (_j = import_setupHooks.hooks).useEvents) == null || _k.call(_j, viewProps, events, splitStyles, setStateShallow, staticConfig);
+        }), process.env.NODE_ENV === "development" && time && time`events`, process.env.NODE_ENV === "development" && debugProp === "verbose" && (0, import_log.log)("events", { events, isHoverable, attachPress }), (_l = (_k = import_setupHooks.hooks).useEvents) == null || _l.call(_k, viewProps, events, splitStyles, setStateShallow, staticConfig);
         let direction = props.spaceDirection || "both";
         process.env.NODE_ENV === "development" && time && time`hooks`;
         let content = !children || asChild ? children : spacedChildren({
@@ -5201,9 +5136,9 @@ If you meant to do this, you can disable this warning - either change untilMeasu
           events,
           staticConfig
         )), useChildrenResult ? content = useChildrenResult : content = (0, import_react3.createElement)(elementType, viewProps, content);
-        let ResetPresence = (_l = config == null ? void 0 : config.animations) == null ? void 0 : _l.ResetPresence;
-        willBeAnimated && presence && ResetPresence && typeof content != "string" && (content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ResetPresence, { children: content })), process.env.NODE_ENV === "development" && time && time`create-element`;
-        let groupState = stateRef.current.group, subGroupContext = (0, import_react3.useMemo)(() => {
+        let ResetPresence = (_m = config == null ? void 0 : config.animations) == null ? void 0 : _m.ResetPresence;
+        willBeAnimated && hasEnterStyle && ResetPresence && content && typeof content != "string" && (content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ResetPresence, { children: content })), process.env.NODE_ENV === "development" && time && time`create-element`;
+        let groupState = curState.group, subGroupContext = (0, import_react3.useMemo)(() => {
           if (!(!groupState || !groupName))
             return groupState.listeners.clear(), {
               ...componentContext.groups,
@@ -5211,7 +5146,7 @@ If you meant to do this, you can disable this warning - either change untilMeasu
               state: {
                 ...componentContext.groups.state,
                 [groupName]: {
-                  pseudo: initialState,
+                  pseudo: import_defaultComponentState.defaultComponentStateMounted,
                   // capture just initial width and height if they exist
                   // will have top, left, width, height (not x, y)
                   layout: {
@@ -5236,23 +5171,23 @@ If you meant to do this, you can disable this warning - either change untilMeasu
         if (process.env.NODE_ENV === "development" && debugProp && debugProp !== "profile") {
           console.groupCollapsed(`render <${typeof elementType == "string" ? elementType : "Component"} /> (${internalID}) with props`);
           try {
-            (0, import_log.log)("viewProps", viewProps), (0, import_log.log)("viewPropsOrder", Object.keys(viewProps));
-            for (let key in viewProps)
-              (0, import_log.log)(" - ", key, viewProps[key]);
-            (0, import_log.log)("children", content), typeof window < "u" && (0, import_log.log)({
+            (0, import_log.log)("viewProps", viewProps), (0, import_log.log)("children", content), typeof window < "u" && ((0, import_log.log)("props in", propsIn, "mapped to", props, "in order", Object.keys(props)), (0, import_log.log)({
+              shouldListenForMedia,
+              mediaListeningKeys,
+              isMediaArray,
               viewProps,
+              hostRef,
               state,
               styleProps,
               themeState,
               isAnimated,
-              isAnimatedReactNativeWeb,
               defaultProps,
               splitStyles,
               animationStyles,
               willBeAnimated,
               isStringElement,
-              classNamesIn: (_m = props.className) == null ? void 0 : _m.split(" "),
-              classNamesOut: (_n = viewProps.className) == null ? void 0 : _n.split(" "),
+              classNamesIn: (_n = props.className) == null ? void 0 : _n.split(" "),
+              classNamesOut: (_o = viewProps.className) == null ? void 0 : _o.split(" "),
               events,
               shouldAttach,
               pseudos,
@@ -5266,10 +5201,11 @@ If you meant to do this, you can disable this warning - either change untilMeasu
               elementType,
               initialState,
               classNames
-            });
+            }));
           } catch {
           }
-          console.groupEnd(), console.groupEnd();
+          if (console.groupEnd(), debugProp === "break")
+            debugger;
         }
         return process.env.NODE_ENV === "development" && time && (time`rest`, globalThis.willPrint || (globalThis.willPrint = !0, setTimeout(() => {
           delete globalThis.willPrint, time.print(), time = null;
@@ -5316,7 +5252,7 @@ If you meant to do this, you can disable this warning - either change untilMeasu
       componentName: "Spacer",
       validStyles: import_helpers.validStyles,
       defaultProps: {
-        ...import_constants22.stackDefaultStyles,
+        ...import_constants2.stackDefaultStyles,
         // avoid nesting issues
         tag: "span",
         size: !0,
@@ -5411,7 +5347,7 @@ If you meant to do this, you can disable this warning - either change untilMeasu
     }
     var AbsoluteFill = createComponent({
       defaultProps: {
-        ...import_constants22.stackDefaultStyles,
+        ...import_constants2.stackDefaultStyles,
         flexDirection: "column",
         position: "absolute",
         top: 0,
@@ -5790,7 +5726,7 @@ var require_createTamagui_native = __commonJS({
       createTamagui: () => createTamagui
     });
     module2.exports = __toCommonJS2(createTamagui_exports);
-    var import_constants3 = require_index_native3(), import_config = require_config_native(), import_createVariables = require_createVariables_native(), import_getThemeCSSRules = require_getThemeCSSRules_native(), import_insertStyleRule = require_insertStyleRule_native(), import_proxyThemeToParents = require_proxyThemeToParents_native(), import_registerCSSVariable = require_registerCSSVariable_native(), import_themes = require_themes_native(), import_useMedia = require_useMedia_native(), import_insertFont = require_insertFont_native(), import_Tamagui = require_Tamagui_native(), createdConfigs = /* @__PURE__ */ new WeakMap();
+    var import_constants = require_index_native3(), import_config = require_config_native(), import_createVariables = require_createVariables_native(), import_getThemeCSSRules = require_getThemeCSSRules_native(), import_insertStyleRule = require_insertStyleRule_native(), import_proxyThemeToParents = require_proxyThemeToParents_native(), import_registerCSSVariable = require_registerCSSVariable_native(), import_themes = require_themes_native(), import_useMedia = require_useMedia_native(), import_insertFont = require_insertFont_native(), import_Tamagui = require_Tamagui_native(), createdConfigs = /* @__PURE__ */ new WeakMap();
     function createTamagui(configIn) {
       var _a;
       if (createdConfigs.has(configIn))
@@ -5845,9 +5781,9 @@ ${JSON.stringify(
                     2
                   )}`
                 );
-              import_constants3.isWeb && ((0, import_registerCSSVariable.registerCSSVariable)(variable), declarations.push((0, import_registerCSSVariable.variableToCSS)(variable, key === "zIndex")));
+              import_constants.isWeb && ((0, import_registerCSSVariable.registerCSSVariable)(variable), declarations.push((0, import_registerCSSVariable.variableToCSS)(variable, key === "zIndex")));
             }
-          if (import_constants3.isWeb) {
+          if (import_constants.isWeb) {
             let declarationsToRuleSet2 = function(decs, selector = "") {
               return `:root${selector} {${sep}${[...decs].join(`;${sep}`)}${sep}}`;
             };
@@ -5874,7 +5810,7 @@ ${JSON.stringify(
           cssRuleSets,
           getThemeRulesSets() {
             let themeRuleSets = [];
-            if (import_constants3.isWeb)
+            if (import_constants.isWeb)
               for (let { names, theme } of dedupedThemes) {
                 let nextRules = (0, import_getThemeCSSRules.getThemeCSSRules)({
                   config: configIn,
@@ -6239,6 +6175,37 @@ var require_isTamaguiElement_native = __commonJS({
   }
 });
 
+// ../web/dist/cjs/helpers/proxyThemeVariables.native.js
+var require_proxyThemeVariables_native = __commonJS({
+  "../web/dist/cjs/helpers/proxyThemeVariables.native.js"(exports2, module2) {
+    "use strict";
+    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
+      for (var name in all)
+        __defProp2(target, name, { get: all[name], enumerable: !0 });
+    }, __copyProps2 = (to, from, except, desc) => {
+      if (from && typeof from == "object" || typeof from == "function")
+        for (let key of __getOwnPropNames2(from))
+          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
+      return to;
+    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), proxyThemeVariables_exports = {};
+    __export2(proxyThemeVariables_exports, {
+      proxyThemeVariables: () => proxyThemeVariables
+    });
+    module2.exports = __toCommonJS2(proxyThemeVariables_exports);
+    function proxyThemeVariables(obj) {
+      return new Proxy(obj || {}, {
+        has(target, key) {
+          return Reflect.has(target, removeStarting$(key));
+        },
+        get(target, key) {
+          return Reflect.get(target, removeStarting$(key));
+        }
+      });
+    }
+    var removeStarting$ = (str) => typeof str == "string" && str[0] === "$" ? str.slice(1) : str;
+  }
+});
+
 // ../web/dist/cjs/internalWithTheme.native.js
 var require_internalWithTheme_native = __commonJS({
   "../web/dist/cjs/internalWithTheme.native.js"(exports2, module2) {
@@ -6280,10 +6247,10 @@ var require_useThemeName_native = __commonJS({
       useThemeName: () => useThemeName
     });
     module2.exports = __toCommonJS2(useThemeName_exports);
-    var import_constants3 = require_index_native3(), import_react3 = require("react"), import_ThemeManagerContext = require_ThemeManagerContext_native(), import_useTheme = require_useTheme_native();
+    var import_constants = require_index_native3(), import_react3 = require("react"), import_ThemeManagerContext = require_ThemeManagerContext_native(), import_useTheme = require_useTheme_native();
     function useThemeName(opts) {
       let manager = (0, import_useTheme.getThemeManager)((0, import_react3.useContext)(import_ThemeManagerContext.ThemeManagerIDContext)), [name, setName] = (0, import_react3.useState)((manager == null ? void 0 : manager.state.name) || "");
-      return (0, import_constants3.useIsomorphicLayoutEffect)(() => {
+      return (0, import_constants.useIsomorphicLayoutEffect)(() => {
         if (manager)
           return setName(manager.state.name), manager.onChangeTheme((next, manager2) => {
             let name2 = opts != null && opts.parent && manager2.state.parentName || next;
@@ -6339,7 +6306,7 @@ var require_useIsTouchDevice_native = __commonJS({
       useIsTouchDevice: () => useIsTouchDevice
     });
     module2.exports = __toCommonJS2(useIsTouchDevice_exports);
-    var import_constants3 = require_index_native3(), import_use_did_finish_ssr = require_index_native6(), useIsTouchDevice = () => import_constants3.isWeb ? (0, import_use_did_finish_ssr.useDidFinishSSR)() ? import_constants3.isTouchable : !1 : !0;
+    var import_constants = require_index_native3(), import_use_did_finish_ssr = require_index_native6(), useIsTouchDevice = () => import_constants.isWeb ? (0, import_use_did_finish_ssr.useDidFinishSSR)() ? import_constants.isTouchable : !1 : !0;
   }
 });
 
@@ -6360,9 +6327,9 @@ var require_Stack_native = __commonJS({
       Stack: () => Stack2
     });
     module2.exports = __toCommonJS2(Stack_exports);
-    var import_helpers = require_index_native4(), import_constants3 = require_constants_native2(), import_createComponent = require_createComponent_native(), Stack2 = (0, import_createComponent.createComponent)({
+    var import_helpers = require_index_native4(), import_constants = require_constants_native2(), import_createComponent = require_createComponent_native(), Stack2 = (0, import_createComponent.createComponent)({
       acceptsClassName: !0,
-      defaultProps: import_constants3.stackDefaultStyles,
+      defaultProps: import_constants.stackDefaultStyles,
       validStyles: import_helpers.validStyles
     });
     Stack2.displayName = "Stack";
@@ -6447,9 +6414,9 @@ var require_View_native = __commonJS({
       View: () => View2
     });
     module2.exports = __toCommonJS2(View_exports);
-    var import_helpers = require_index_native4(), import_constants3 = require_constants_native2(), import_createComponent = require_createComponent_native(), View2 = (0, import_createComponent.createComponent)({
+    var import_helpers = require_index_native4(), import_constants = require_constants_native2(), import_createComponent = require_createComponent_native(), View2 = (0, import_createComponent.createComponent)({
       acceptsClassName: !0,
-      defaultProps: import_constants3.stackDefaultStyles,
+      defaultProps: import_constants.stackDefaultStyles,
       validStyles: import_helpers.validStyles
     });
   }
@@ -6524,10 +6491,10 @@ var require_ThemeProvider_native = __commonJS({
       ThemeProvider: () => ThemeProvider
     });
     module2.exports = __toCommonJS2(ThemeProvider_exports);
-    var import_constants3 = require_index_native3(), import_react3 = require("react"), import_constants22 = require_constants_native2(), import_Theme = require_Theme_native(), import_jsx_runtime = require("react/jsx-runtime"), ThemeProvider = (props) => (import_constants3.isClient && (0, import_react3.useLayoutEffect)(() => {
+    var import_constants = require_index_native3(), import_react3 = require("react"), import_constants2 = require_constants_native2(), import_Theme = require_Theme_native(), import_jsx_runtime = require("react/jsx-runtime"), ThemeProvider = (props) => (import_constants.isClient && (0, import_react3.useLayoutEffect)(() => {
       if (props.disableRootThemeClass)
         return;
-      let cn = `${import_constants22.THEME_CLASSNAME_PREFIX}${props.defaultTheme}`, target = props.themeClassNameOnRoot ? document.documentElement : document.body;
+      let cn = `${import_constants2.THEME_CLASSNAME_PREFIX}${props.defaultTheme}`, target = props.themeClassNameOnRoot ? document.documentElement : document.body;
       return target.classList.add(cn), () => {
         target.classList.remove(cn);
       };
@@ -6593,20 +6560,20 @@ var require_TamaguiProvider_native = __commonJS({
       TamaguiProvider: () => TamaguiProvider
     });
     module2.exports = __toCommonJS2(TamaguiProvider_exports);
-    var import_constants3 = require_index_native3(), React = __toESM2(require("react")), import_ComponentContext = require_ComponentContext_native(), import_useMedia = require_useMedia_native(), import_ThemeProvider = require_ThemeProvider_native(), import_jsx_runtime = require("react/jsx-runtime");
+    var import_constants = require_index_native3(), React = __toESM2(require("react")), import_ComponentContext = require_ComponentContext_native(), import_useMedia = require_useMedia_native(), import_ThemeProvider = require_ThemeProvider_native(), import_jsx_runtime = require("react/jsx-runtime");
     function TamaguiProvider({
       children,
       disableInjectCSS,
       config,
       ...themePropsProvider
     }) {
-      return (0, import_useMedia.setupMediaListeners)(), import_constants3.isClient && React.useLayoutEffect(() => {
-        if (document.documentElement.classList.contains("t_unmounted") && document.documentElement.classList.remove("t_unmounted"), disableInjectCSS)
-          return;
-        let style = document.createElement("style");
-        return style.appendChild(document.createTextNode(config.getCSS())), document.head.appendChild(style), () => {
-          document.head.removeChild(style);
-        };
+      return (0, import_useMedia.setupMediaListeners)(), import_constants.isClient && React.useLayoutEffect(() => {
+        if (config.disableSSR || document.documentElement.classList.contains("t_unmounted") && document.documentElement.classList.remove("t_unmounted"), !disableInjectCSS) {
+          let style = document.createElement("style");
+          return style.appendChild(document.createTextNode(config.getCSS())), document.head.appendChild(style), () => {
+            document.head.removeChild(style);
+          };
+        }
       }, [config, disableInjectCSS]), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ComponentContext.ComponentContext.Provider, { animationDriver: config.animations, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_ThemeProvider.ThemeProvider,
         {
@@ -6664,10 +6631,10 @@ var require_useGet_native = __commonJS({
       useGet: () => useGet
     });
     module2.exports = __toCommonJS2(useGet_exports);
-    var import_constants3 = require_index_native3(), import_react3 = require("react");
+    var import_constants = require_index_native3(), import_react3 = require("react");
     function useGet(currentValue, initialValue, forwardToFunction) {
       let curRef = (0, import_react3.useRef)(initialValue ?? currentValue);
-      return (0, import_constants3.useIsomorphicLayoutEffect)(() => {
+      return (0, import_constants.useIsomorphicLayoutEffect)(() => {
         curRef.current = currentValue;
       }), (0, import_react3.useCallback)(
         forwardToFunction ? (...args) => {
@@ -7089,80 +7056,6 @@ function getBaseViews() {
   };
 }
 
-// src/hooks/useElementLayout.tsx
-var import_constants = __toESM(require_index_native3());
-
-// src/helpers/getBoundingClientRect.tsx
-var getBoundingClientRect = (node) => {
-  var _a;
-  if (!(!node || node.nodeType !== 1))
-    return (_a = node.getBoundingClientRect) == null ? void 0 : _a.call(node);
-};
-
-// src/helpers/getRect.tsx
-var getRect = (node) => {
-  let rect = getBoundingClientRect(node);
-  if (!rect)
-    return;
-  let { x, y, top, left } = rect;
-  return { x, y, width: node.offsetWidth, height: node.offsetHeight, top, left };
-};
-
-// src/hooks/useElementLayout.tsx
-var LayoutHandlers = /* @__PURE__ */ new WeakMap(), LayoutTimeouts = /* @__PURE__ */ new WeakMap(), resizeObserver = null;
-typeof window < "u" && "ResizeObserver" in window && (resizeObserver = new ResizeObserver((entries) => {
-  for (let { target } of entries) {
-    let onLayout = LayoutHandlers.get(target);
-    if (typeof onLayout != "function")
-      return;
-    measureLayout(target, null, (x, y, width, height, left, top) => {
-      onLayout({
-        nativeEvent: {
-          layout: { x, y, width, height, left, top },
-          target
-        },
-        timeStamp: Date.now()
-      });
-    });
-  }
-}));
-var measureLayout = (node, relativeTo, callback) => {
-  let relativeNode = relativeTo || (node == null ? void 0 : node.parentNode);
-  if (relativeNode instanceof HTMLElement) {
-    clearTimeout(LayoutTimeouts.get(relativeNode));
-    let tm = setTimeout(() => {
-      let relativeRect = getBoundingClientRect(relativeNode), { height, left, top, width } = getRect(node), x = left - relativeRect.left, y = top - relativeRect.top;
-      callback(x, y, width, height, left, top), LayoutTimeouts.delete(relativeNode);
-    }, 0);
-    LayoutTimeouts.set(relativeNode, tm);
-  }
-};
-function useElementLayout(ref, onLayout) {
-  (0, import_constants.useIsomorphicLayoutEffect)(() => {
-    if (!resizeObserver || !onLayout)
-      return;
-    let node = ref.current;
-    if (node)
-      return LayoutHandlers.set(node, onLayout), resizeObserver.observe(node), () => {
-        resizeObserver == null || resizeObserver.unobserve(node);
-      };
-  }, [ref, onLayout]);
-}
-
-// src/hooks/usePlatformMethods.ts
-var import_constants2 = __toESM(require_index_native3());
-function usePlatformMethods(hostRef) {
-  (0, import_constants2.useIsomorphicLayoutEffect)(() => {
-    let node = hostRef.current;
-    node && (node.measure = (callback) => measureLayout(node, null, callback), node.measureLayout = (relativeToNode, success) => measureLayout(node, relativeToNode, success), node.measureInWindow = (callback) => {
-      node && setTimeout(() => {
-        let { height, left, top, width } = getRect(node);
-        callback(left, top, width, height);
-      }, 0);
-    });
-  }, [hostRef]);
-}
-
 // src/vendor/Pressability.native.tsx
 var Pressability = require_fake_react_native().default, usePressability = (init_idFn(), __toCommonJS(idFn_exports)).default;
 
@@ -7171,57 +7064,7 @@ __reExport(src_exports, __toESM(require_index_native9()), module.exports);
 var baseViews = getBaseViews();
 (0, import_web.setupHooks)({
   getBaseViews,
-  usePropsTransform(elementType, propsIn, hostRef) {
-    let {
-      // event props
-      onMoveShouldSetResponder,
-      onMoveShouldSetResponderCapture,
-      onResponderEnd,
-      onResponderGrant,
-      onResponderMove,
-      onResponderReject,
-      onResponderRelease,
-      onResponderStart,
-      onResponderTerminate,
-      onResponderTerminationRequest,
-      onScrollShouldSetResponder,
-      onScrollShouldSetResponderCapture,
-      onSelectionChangeShouldSetResponder,
-      onSelectionChangeShouldSetResponderCapture,
-      onStartShouldSetResponder,
-      onStartShouldSetResponderCapture,
-      // android
-      collapsable,
-      focusable,
-      // deprecated,
-      accessible,
-      accessibilityDisabled,
-      onLayout,
-      hrefAttrs,
-      ...viewProps
-    } = propsIn;
-    if (usePlatformMethods(hostRef), useElementLayout(hostRef, onLayout), (0, import_react_native_use_responder_events.useResponderEvents)(hostRef, {
-      onMoveShouldSetResponder,
-      onMoveShouldSetResponderCapture,
-      onResponderEnd,
-      onResponderGrant,
-      onResponderMove,
-      onResponderReject,
-      onResponderRelease,
-      onResponderStart,
-      onResponderTerminate,
-      onResponderTerminationRequest,
-      onScrollShouldSetResponder,
-      onScrollShouldSetResponderCapture,
-      onSelectionChangeShouldSetResponder,
-      onSelectionChangeShouldSetResponderCapture,
-      onStartShouldSetResponder,
-      onStartShouldSetResponderCapture
-    }), viewProps.href && hrefAttrs) {
-      let { download, rel, target } = hrefAttrs;
-      download != null && (viewProps.download = download), rel && (viewProps.rel = rel), typeof target == "string" && (viewProps.target = target.charAt(0) !== "_" ? `_${target}` : target);
-    }
-    return viewProps;
+  usePropsTransform(elementType, propsIn, hostRef, willHydrate) {
   },
   useEvents(viewProps, events, { pseudos }, setStateShallow, staticConfig) {
     if (events && (events.onFocus && (viewProps.onFocus = events.onFocus), events.onBlur && (viewProps.onBlur = events.onBlur)), staticConfig.isInput) {