@tamagui/core 2.0.0-rc.3 → 2.0.0-rc.30

package/dist/test.native.cjs

@@ -50,25 +50,6 @@ function _interopNamespaceDefault(e) {
   n.default = e;
   return Object.freeze(n);
 }
-function _mergeNamespaces(n, m) {
-  for (var i = 0; i < m.length; i++) {
-    const e = m[i];
-    if (typeof e !== "string" && !Array.isArray(e)) {
-      for (const k in e) {
-        if (k !== "default" && !(k in n)) {
-          const d = Object.getOwnPropertyDescriptor(e, k);
-          if (d) {
-            Object.defineProperty(n, k, d.get ? d : {
-              enumerable: true,
-              get: () => e[k]
-            });
-          }
-        }
-      }
-    }
-  }
-  return Object.freeze(Object.defineProperty(n, Symbol.toStringTag, { value: "Module" }));
-}
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
 var pseudoDescriptorsBase = {
   // order of keys here important! in priority order
@@ -167,9 +148,9 @@ function objectIdentityKey(obj) {
   return k;
 }
 var cache$5 = /* @__PURE__ */ new WeakMap();
-var createReactContext = React["createContext"];
-function createStyledContext(defaultValues) {
-  var namespace = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : "", OGContext = createReactContext(defaultValues), OGProvider = OGContext.Provider, Context = OGContext, scopedContexts = /* @__PURE__ */ new Map(), LastScopeInNamespace = createReactContext(namespace);
+var createStyledContext = function(defaultValues) {
+  "use no memo";
+  var namespace = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : "", createReactContext = React["createContext"], useReactMemo = React["useMemo"], useReactContext = React["useContext"], OGContext = createReactContext(defaultValues), OGProvider = OGContext.Provider, Context = OGContext, scopedContexts = /* @__PURE__ */ new Map(), LastScopeInNamespace = createReactContext(namespace);
   function getOrCreateScopedContext(scope) {
     var ScopedContext = scopedContexts.get(scope);
     return ScopedContext || (ScopedContext = createReactContext(defaultValues), scopedContexts.set(scope, ScopedContext)), ScopedContext;
@@ -186,7 +167,7 @@ function createStyledContext(defaultValues) {
       "scope",
       // performance: avoid creating objects
       "__disableMergeDefaultValues"
-    ]), scope = getNamespacedScope(scopeIn), next = React.useMemo(function() {
+    ]), scope = getNamespacedScope(scopeIn), next = useReactMemo(function() {
       return __disableMergeDefaultValues ? values : mergeProps(defaultValues, values);
     }, [objectIdentityKey(values)]), ScopedProvider = OGProvider;
     return scope && (ScopedProvider = getOrCreateScopedContext(scope).Provider), /* @__PURE__ */ jsxRuntime.jsx(LastScopeInNamespace.Provider, {
@@ -197,11 +178,11 @@ function createStyledContext(defaultValues) {
       })
     });
   }, useStyledContext = function() {
-    var scopeIn = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "", lastScopeInNamespace = React.useContext(LastScopeInNamespace), scope = namespace ? scopeIn ? getNamespacedScope(scopeIn) : lastScopeInNamespace : scopeIn, context = scope ? getOrCreateScopedContext(scope) : OGContext, value = React.useContext(context);
+    var scopeIn = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "", lastScopeInNamespace = useReactContext(LastScopeInNamespace), scope = namespace ? scopeIn ? getNamespacedScope(scopeIn) : lastScopeInNamespace : scopeIn, context = scope ? getOrCreateScopedContext(scope) : OGContext, value = useReactContext(context);
     return value;
   };
   return Context.Provider = Provider, Context.props = defaultValues, Context.context = OGContext, Context.useStyledContext = useStyledContext, Context;
-}
+};
 var ComponentContext = createStyledContext({
   disableSSR: void 0,
   inText: false,
@@ -228,20 +209,11 @@ function isEqualShallow(prev, next) {
   for (var key in next) if (prev[key] !== next[key]) return false;
   return true;
 }
-var isWeb = false, isBrowser = false, isServer = false, isClient = true, isWindowDefined = false, useIsomorphicLayoutEffect = React.useLayoutEffect, isChrome = false, isWebTouchable = false, isTouchable = true, isAndroid = reactNative.Platform.OS === "android" || process.env.TEST_NATIVE_PLATFORM === "android", isIos = reactNative.Platform.OS === "ios" || process.env.TEST_NATIVE_PLATFORM === "ios", platforms = {
+var isWeb = false, isBrowser = false, isServer$1 = false, isClient = true, isWindowDefined = false, useIsomorphicLayoutEffect = React.useLayoutEffect, isChrome = false, isWebTouchable = false, isTouchable = true, isAndroid = (reactNative.Platform === null || reactNative.Platform === void 0 ? void 0 : reactNative.Platform.OS) === "android" || process.env.TEST_NATIVE_PLATFORM === "android", isIos = (reactNative.Platform === null || reactNative.Platform === void 0 ? void 0 : reactNative.Platform.OS) === "ios" || process.env.TEST_NATIVE_PLATFORM === "ios", platforms = {
   ios: "ios",
   android: "android"
-}, currentPlatform = platforms[reactNative.Platform.OS] || "native";
-var THEME_NAME_SEPARATOR = "_", THEME_CLASSNAME_PREFIX = "t_", FONT_DATA_ATTRIBUTE_NAME = "data-tamagui-font", viewDefaultStyles = {}, webViewFlexCompatStyles = {
-  display: "flex",
-  alignItems: "stretch",
-  flexDirection: "column",
-  flexBasis: "auto",
-  boxSizing: "border-box",
-  minHeight: 0,
-  minWidth: 0,
-  flexShrink: 0
-}, MISSING_THEME_MESSAGE = "Missing theme.";
+}, currentPlatform = (!(reactNative.Platform === null || reactNative.Platform === void 0) && reactNative.Platform.OS ? platforms[reactNative.Platform.OS] : void 0) || "native";
+var THEME_NAME_SEPARATOR = "_", THEME_CLASSNAME_PREFIX = "t_", FONT_DATA_ATTRIBUTE_NAME = "data-tamagui-font", MISSING_THEME_MESSAGE = "Missing theme.";
 var conf$1, getConfigFromGlobalOrLocal = function() {
   return conf$1 || (globalThis.__tamaguiConfig ? globalThis.__tamaguiConfig : null);
 }, getSetting = function(key) {
@@ -316,6 +288,28 @@ function loadAnimationDriver(name, driver) {
     [name]: driver
   };
 }
+function camelToHyphen(str) {
+  return str.replace(/[A-Z]/g, function(m) {
+    return `-${m.toLowerCase()}`;
+  }).toLowerCase();
+}
+var cache$4 = /* @__PURE__ */ new WeakMap();
+function mediaObjectToString(query) {
+  if (typeof query == "string") return query;
+  if (cache$4.has(query)) return cache$4.get(query);
+  var res = Object.entries(query).map(function(param) {
+    var [feature, value] = param;
+    return feature = camelToHyphen(feature), typeof value == "string" ? `(${feature}: ${value})` : (typeof value == "number" && /[height|width]$/.test(feature) && (value = `${value}px`), `(${feature}: ${value})`);
+  }).join(" and ");
+  return cache$4.set(query, res), res;
+}
+exports.mediaState = // development only safeguard
+{};
+var setMediaState = function(next) {
+  exports.mediaState = next;
+}, mediaQueryConfig = {}, getMedia = function() {
+  return exports.mediaState;
+}, mediaKeys = /* @__PURE__ */ new Set();
 function kebabToCamel(str) {
   return str.replace(/-([a-z])/g, function(_2, c) {
     return c.toUpperCase();
@@ -340,7 +334,7 @@ var groupPseudoToPseudoCSSMap = {
   press: "active",
   focusVisible: "focus-visible",
   focusWithin: "focus-within"
-}, specificities = new Array(5).fill(0).map(function(_2, i) {
+}, specificities = new Array(12).fill(0).map(function(_2, i) {
   return new Array(i).fill(":root").join("");
 });
 function getThemeOrGroupSelector(name, styleInner, isGroup, groupParts) {
@@ -349,7 +343,7 @@ function getThemeOrGroupSelector(name, styleInner, isGroup, groupParts) {
 }
 var createMediaStyle = function(styleObject, mediaKeyIn, mediaQueries, type, negate, priority) {
   var [property, , identifier, pseudoIn, rules] = styleObject, isTheme = type === "theme", isPlatform = type === "platform", isGroup = type === "group", isNonWindowMedia = isTheme || isPlatform || isGroup, negKey = negate ? "0" : "", ogPrefix = identifier.slice(0, identifier.indexOf("-") + 1), id = `${ogPrefix}${MEDIA_SEP}${mediaKeyIn.replace("-", "")}${negKey}${MEDIA_SEP}`, styleRule = "", groupPriority = "", groupMediaKey, containerName, nextIdentifier = identifier.replace(ogPrefix, id), styleInner = rules.map(function(rule) {
-    return rule.replace(identifier, nextIdentifier);
+    return rule.replaceAll(identifier, nextIdentifier);
   }).join(";"), isHover = false;
   if (isNonWindowMedia) {
     var specificity = (priority || 0) + (isGroup || isPlatform ? 1 : 0);
@@ -362,7 +356,10 @@ var createMediaStyle = function(styleObject, mediaKeyIn, mediaQueries, type, neg
       groupMediaKey = media, isGroup && (containerName = name), (pseudo === "press" || pseudoIn === "active") && (specificity += 2), pseudo === "hover" && (isHover = true);
       var [selector, nextSelector] = getThemeOrGroupSelector(name, styleInner, isGroup, groupParts, isTheme, specificities[specificity]);
       styleRule = styleInner.replace(selector, nextSelector);
-    } else styleRule = `${specificities[specificity]}${styleInner}`;
+    } else {
+      var prefix = specificities[specificity];
+      styleRule = prefix && styleInner[0] === "@" ? styleInner.replace("{", `{${prefix}`) : `${prefix}${styleInner}`;
+    }
   }
   if (!isNonWindowMedia || groupMediaKey) {
     if (!selectors) {
@@ -373,8 +370,8 @@ var createMediaStyle = function(styleObject, mediaKeyIn, mediaQueries, type, neg
         return [k, new Array(index2 + 1).fill(":root").join("")];
       }));
     }
-    var mediaKey = groupMediaKey || mediaKeyIn, mediaSelector = selectors[mediaKey], screenStr = negate ? "not all and " : "", mediaQuery = `${screenStr}${mediaSelector}`, precedenceImportancePrefix = groupMediaKey ? groupPriority : prefixes[mediaKey], prefix = groupMediaKey ? `@container ${containerName}` : "@media";
-    groupMediaKey && (styleInner = styleRule), styleInner.includes(prefix) ? styleRule = styleInner.replace("{", ` and ${mediaQuery} {`).replace("and screen and", "and") : styleRule = `${prefix} ${mediaQuery}{${precedenceImportancePrefix}${styleInner}}`, groupMediaKey && (styleRule = `@supports (contain: ${getSetting("webContainerType") || "inline-size"}) {${styleRule}}`);
+    var mediaKey = groupMediaKey || mediaKeyIn, mediaSelector = selectors[mediaKey], screenStr = negate ? "not all and " : "", mediaQuery = `${screenStr}${mediaSelector}`, precedenceImportancePrefix = groupMediaKey ? groupPriority : prefixes[mediaKey], prefix1 = groupMediaKey ? `@container ${containerName}` : "@media";
+    groupMediaKey && (styleInner = styleRule), styleInner.includes(prefix1) ? styleRule = styleInner.replace("{", ` and ${mediaQuery} {`).replace("and screen and", "and") : styleRule = `${prefix1} ${mediaQuery}{${precedenceImportancePrefix}${styleInner}}`, groupMediaKey && (styleRule = `@supports (contain: ${getSetting("webContainerType") || "inline-size"}) {${styleRule}}`);
   }
   return isHover && (styleRule = `@media (hover:hover){${styleRule}}`), [property, void 0, nextIdentifier, void 0, [styleRule]];
 };
@@ -397,11 +394,7 @@ function matchMediaFallback(query) {
 function setupMatchMedia(_2) {
   matchMediaImpl = _2, globalThis.matchMedia = _2;
 }
-exports.mediaState = // development only safeguard
-{};
-var mediaQueryConfig = {}, getMedia = function() {
-  return exports.mediaState;
-}, mediaKeys = /* @__PURE__ */ new Set(), mediaKeyRegex = /\$(platform|theme|group)-/, getMediaKey = function(key) {
+var mediaKeyRegex = /\$(platform|theme|group)-/, getMediaKey = function(key) {
   if (key[0] !== "$") return false;
   if (mediaKeys.has(key)) return true;
   var match = key.match(mediaKeyRegex);
@@ -414,8 +407,8 @@ var mediaQueryConfig = {}, getMedia = function() {
   } = config, mediaQueryDefaultActive = getSetting("mediaQueryDefaultActive");
   if (media) {
     mediaVersion++, resetMediaStyleCache();
-    for (var key in media) exports.mediaState[key] = (mediaQueryDefaultActive == null ? void 0 : mediaQueryDefaultActive[key]) || false, mediaKeys.add(`$${key}`);
-    Object.assign(mediaQueryConfig, media), initState = __spreadValues({}, exports.mediaState), mediaKeysOrdered = Object.keys(media), setupMediaListeners();
+    for (var key in media) getMedia()[key] = (mediaQueryDefaultActive == null ? void 0 : mediaQueryDefaultActive[key]) || false, mediaKeys.add(`$${key}`);
+    Object.assign(mediaQueryConfig, media), initState = __spreadValues({}, getMedia()), mediaKeysOrdered = Object.keys(media), setupMediaListeners();
   }
 };
 function unlisten() {
@@ -435,9 +428,9 @@ function setupMediaListeners() {
     });
     function update() {
       var next = !!getMatch().matches;
-      next !== exports.mediaState[key2] && (exports.mediaState = __spreadProps(__spreadValues({}, exports.mediaState), {
+      next !== getMedia()[key2] && (setMediaState(__spreadProps(__spreadValues({}, getMedia()), {
         [key2]: next
-      }), updateMediaListeners());
+      })), updateMediaListeners());
     }
     update();
   };
@@ -449,7 +442,7 @@ function setupMediaListeners() {
 var listeners = /* @__PURE__ */ new Set();
 function updateMediaListeners() {
   listeners.forEach(function(cb) {
-    return cb(exports.mediaState);
+    return cb(getMedia());
   });
 }
 var States = /* @__PURE__ */ new WeakMap();
@@ -466,26 +459,27 @@ function subscribe(subscriber) {
   };
 }
 function useMedia(componentContext, debug) {
+  "use no memo";
   var componentState = componentContext ? States.get(componentContext) : null, internalRef = React.useRef(null);
   internalRef.current || (internalRef.current = {
     keys: /* @__PURE__ */ new Set(),
-    lastState: exports.mediaState
+    lastState: getMedia()
   }), internalRef.current.pendingState && (internalRef.current.lastState = internalRef.current.pendingState, internalRef.current.pendingState = void 0);
   var {
     keys
   } = internalRef.current;
   keys.size && keys.clear();
-  var state = React.useSyncExternalStore(subscribe, function() {
+  var state2 = React.useSyncExternalStore(subscribe, function() {
     var curKeys2 = (componentState == null ? void 0 : componentState.keys) || keys, {
       lastState,
       pendingState
     } = internalRef.current;
     if (!curKeys2.size) return lastState;
-    var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+    var ms = getMedia(), _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
     try {
       for (var _iterator = curKeys2[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
         var key = _step.value;
-        if (exports.mediaState[key] !== (pendingState || lastState)[key]) return false, (componentContext == null ? void 0 : componentContext.mediaEmit) ? (componentContext.mediaEmit(exports.mediaState), internalRef.current.pendingState = exports.mediaState, lastState) : (internalRef.current.lastState = exports.mediaState, exports.mediaState);
+        if (ms[key] !== (pendingState || lastState)[key]) return false, (componentContext == null ? void 0 : componentContext.mediaEmit) ? (componentContext.mediaEmit(ms), internalRef.current.pendingState = ms, lastState) : (internalRef.current.lastState = ms, ms);
       }
     } catch (err) {
       _didIteratorError = true, _iteratorError = err;
@@ -498,9 +492,9 @@ function useMedia(componentContext, debug) {
     }
     return lastState;
   }, getServerSnapshot);
-  return new Proxy(state, {
+  return new Proxy(state2, {
     get(_2, key) {
-      return !disableMediaTouch && typeof key == "string" && keys.add(key), Reflect.get(state, key);
+      return !disableMediaTouch && typeof key == "string" && keys.add(key), Reflect.get(state2, key);
     }
   });
 }
@@ -526,21 +520,6 @@ var getMediaImportanceIfMoreImportant = function(mediaKey, key, styleState, isSi
   var importance = isSizeMedia ? getMediaKeyImportance(mediaKey) : defaultMediaImportance, usedKeys = styleState.usedKeys;
   return !usedKeys[key] || importance > usedKeys[key] ? importance : null;
 };
-function camelToHyphen(str) {
-  return str.replace(/[A-Z]/g, function(m) {
-    return `-${m.toLowerCase()}`;
-  }).toLowerCase();
-}
-var cache$4 = /* @__PURE__ */ new WeakMap();
-function mediaObjectToString(query, key) {
-  if (typeof query == "string") return query;
-  if (cache$4.has(query)) return cache$4.get(query);
-  var res = Object.entries(query).map(function(param) {
-    var [feature, value] = param;
-    return feature = camelToHyphen(feature), typeof value == "string" ? `(${feature}: ${value})` : (typeof value == "number" && /[height|width]$/.test(feature) && (value = `${value}px`), `(${feature}: ${value})`);
-  }).join(" and ");
-  return cache$4.set(query, res), res;
-}
 function mediaKeyMatch(key, dimensions) {
   var mediaQueries = mediaQueryConfig[key], result = Object.keys(mediaQueries).every(function(query) {
     var expectedVal = +mediaQueries[query], isMax = query.startsWith("max"), isWidth = query.endsWith("Width"), givenVal = dimensions[isWidth ? "width" : "height"];
@@ -630,75 +609,29 @@ function resolvePlatformNames(nativeProp) {
   ) : Array.isArray(nativeProp) ? nativeProp : [nativeProp], set = new Set(platforms2);
   return set.has("mobile") && (set.add("android"), set.add("ios"), set.delete("mobile")), set;
 }
-var webOnlyStylePropsView = {
-  transition: true,
-  textWrap: true,
-  backdropFilter: true,
-  WebkitBackdropFilter: true,
-  background: true,
-  borderTop: true,
-  borderRight: true,
-  borderBottom: true,
-  borderLeft: true,
-  backgroundAttachment: true,
-  backgroundBlendMode: true,
-  backgroundClip: true,
-  backgroundOrigin: true,
-  backgroundPosition: true,
-  backgroundRepeat: true,
-  backgroundSize: true,
+var cssShorthandLonghands = {
+  // border longhands
+  borderWidth: true,
+  borderStyle: true,
+  borderColor: true,
+  borderTopWidth: true,
+  borderTopStyle: true,
+  borderTopColor: true,
+  borderRightWidth: true,
+  borderRightStyle: true,
+  borderRightColor: true,
+  borderBottomWidth: true,
   borderBottomStyle: true,
-  borderImage: true,
+  borderBottomColor: true,
+  borderLeftWidth: true,
   borderLeftStyle: true,
-  borderRightStyle: true,
-  borderTopStyle: true,
-  caretColor: true,
-  clipPath: true,
-  contain: true,
-  containerType: true,
-  content: true,
-  float: true,
-  mask: true,
-  maskBorder: true,
-  maskBorderMode: true,
-  maskBorderOutset: true,
-  maskBorderRepeat: true,
-  maskBorderSlice: true,
-  maskBorderSource: true,
-  maskBorderWidth: true,
-  maskClip: true,
-  maskComposite: true,
-  maskImage: true,
-  maskMode: true,
-  maskOrigin: true,
-  maskPosition: true,
-  maskRepeat: true,
-  maskSize: true,
-  maskType: true,
-  objectFit: true,
-  objectPosition: true,
-  overflowBlock: true,
-  overflowInline: true,
-  overflowX: true,
-  overflowY: true,
-  // NOTE: pointerEvents is NOT web-only - it's a core React Native View prop (not a style)
-  pointerEvents: true,
-  scrollbarWidth: true,
-  textEmphasis: true,
-  touchAction: true,
-  transformStyle: true,
-  userSelect: true,
-  willChange: true
-}, webOnlyStylePropsText = {
-  whiteSpace: true,
-  wordWrap: true,
-  textOverflow: true,
-  textDecorationDistance: true,
-  // cursor: now cross-platform - in stylePropsView
-  WebkitLineClamp: true,
-  WebkitBoxOrient: true
-};
-var textColors = {
+  borderLeftColor: true,
+  // outline longhands
+  outlineWidth: true,
+  outlineStyle: true,
+  outlineColor: true,
+  outlineOffset: true
+}, textColors = {
   color: true,
   textDecorationColor: true,
   textShadowColor: true
@@ -752,8 +685,47 @@ var textColors = {
     // outlineColor is supported on RN 0.77+ (New Architecture)
     outlineColor: true
   })
-}, stylePropsUnitless = {
+}, nonAnimatableViewProps = {
+  alignContent: true,
+  alignItems: true,
+  alignSelf: true,
+  backfaceVisibility: true,
+  borderCurve: true,
+  borderStyle: true,
+  borderBlockStyle: true,
+  borderBlockEndStyle: true,
+  borderBlockStartStyle: true,
+  borderInlineStyle: true,
+  borderInlineEndStyle: true,
+  borderInlineStartStyle: true,
+  boxSizing: true,
+  cursor: true,
+  direction: true,
+  display: true,
+  flexDirection: true,
+  flexWrap: true,
+  isolation: true,
+  justifyContent: true,
+  mixBlendMode: true,
+  outlineStyle: true,
+  overflow: true,
+  position: true
+}, nonAnimatableFontProps = {
+  fontFamily: true,
+  fontStyle: true,
+  fontVariant: true,
+  textTransform: true
+}, nonAnimatableTextOnlyProps = {
+  textAlign: true,
+  textDecorationLine: true,
+  textDecorationStyle: true,
+  userSelect: true
+}, nonAnimatableUnitlessProps = {
   WebkitLineClamp: true,
+  lineClamp: true,
+  gridTemplateColumns: true,
+  gridTemplateAreas: true
+}, nonAnimatableStyleProps = __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, nonAnimatableViewProps), nonAnimatableFontProps), nonAnimatableTextOnlyProps), nonAnimatableUnitlessProps), stylePropsUnitless = __spreadProps(__spreadValues({}, nonAnimatableUnitlessProps), {
   animationIterationCount: true,
   aspectRatio: true,
   borderImageOutset: true,
@@ -775,9 +747,6 @@ var textColors = {
   gridColumnEnd: true,
   gridColumnGap: true,
   gridColumnStart: true,
-  gridTemplateColumns: true,
-  gridTemplateAreas: true,
-  lineClamp: true,
   opacity: true,
   order: true,
   orphans: true,
@@ -790,7 +759,7 @@ var textColors = {
   scaleY: true,
   scaleZ: true,
   shadowOpacity: true
-}, stylePropsTransform = {
+}), stylePropsTransform = {
   x: true,
   y: true,
   scale: true,
@@ -804,10 +773,7 @@ var textColors = {
   rotateY: true,
   rotateX: true,
   rotateZ: true
-}, stylePropsView = __spreadProps(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({
-  backfaceVisibility: true,
-  borderCurve: true,
-  cursor: true,
+}, stylePropsView = __spreadProps(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadProps(__spreadValues({}, nonAnimatableViewProps), {
   borderBottomEndRadius: true,
   borderBottomStartRadius: true,
   borderBottomWidth: true,
@@ -819,34 +785,20 @@ var textColors = {
   borderInlineWidth: true,
   borderInlineEndWidth: true,
   borderInlineStartWidth: true,
-  borderStyle: true,
-  borderBlockStyle: true,
-  borderBlockEndStyle: true,
-  borderBlockStartStyle: true,
-  borderInlineStyle: true,
-  borderInlineEndStyle: true,
-  borderInlineStartStyle: true,
   borderTopEndRadius: true,
   borderTopStartRadius: true,
   borderTopWidth: true,
   borderWidth: true,
   transform: true,
   transformOrigin: true,
-  alignContent: true,
-  alignItems: true,
-  alignSelf: true,
   borderEndWidth: true,
   borderStartWidth: true,
   bottom: true,
-  display: true,
   end: true,
   flexBasis: true,
-  flexDirection: true,
-  flexWrap: true,
   gap: true,
   columnGap: true,
   rowGap: true,
-  justifyContent: true,
   left: true,
   margin: true,
   marginBlock: true,
@@ -863,7 +815,6 @@ var textColors = {
   marginStart: true,
   marginTop: true,
   marginVertical: true,
-  overflow: true,
   padding: true,
   paddingBottom: true,
   paddingInline: true,
@@ -878,7 +829,6 @@ var textColors = {
   paddingStart: true,
   paddingTop: true,
   paddingVertical: true,
-  position: true,
   right: true,
   start: true,
   top: true,
@@ -889,10 +839,9 @@ var textColors = {
   insetInline: true,
   insetInlineEnd: true,
   insetInlineStart: true,
-  direction: true,
   shadowOffset: true,
   shadowRadius: true
-}, tokenCategories.color), tokenCategories.radius), tokenCategories.size), tokenCategories.radius), stylePropsTransform), stylePropsUnitless), isAndroid ? {
+}), tokenCategories.color), tokenCategories.radius), tokenCategories.size), stylePropsTransform), stylePropsUnitless), isAndroid ? {
   elevationAndroid: true
 } : {}), {
   boxShadow: true,
@@ -903,31 +852,19 @@ var textColors = {
   // the actual RN 0.76+ prop name (backgroundImage expands to this on native)
   experimental_backgroundImage: true,
   // RN 0.76/0.77+ style props (New Architecture)
-  boxSizing: true,
-  mixBlendMode: true,
-  isolation: true,
+  outline: true,
   outlineColor: true,
   outlineOffset: true,
-  outlineStyle: true,
   outlineWidth: true
-}), stylePropsFont = {
-  fontFamily: true,
+}), stylePropsFont = __spreadProps(__spreadValues({}, nonAnimatableFontProps), {
   fontSize: true,
-  fontStyle: true,
   fontWeight: true,
-  fontVariant: true,
   letterSpacing: true,
-  lineHeight: true,
-  textTransform: true
-}, stylePropsTextOnly = __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, stylePropsFont), {
-  textAlign: true,
-  textDecorationLine: true,
-  textDecorationStyle: true
-}), textColors), {
+  lineHeight: true
+}), stylePropsTextOnly = __spreadProps(__spreadValues(__spreadValues(__spreadValues({}, stylePropsFont), nonAnimatableTextOnlyProps), textColors), {
   textShadow: true,
   textShadowOffset: true,
   textShadowRadius: true,
-  userSelect: true,
   verticalAlign: true
 }), stylePropsText = __spreadValues(__spreadValues({}, stylePropsView), stylePropsTextOnly), stylePropsAll = stylePropsText, validPseudoKeys = {
   enterStyle: true,
@@ -941,6 +878,76 @@ var textColors = {
 var Decorated = /* @__PURE__ */ Symbol(), withStaticProperties = function(component, staticProps) {
   return Object.assign(component, staticProps), component[Decorated] = true, component;
 };
+var nonAnimatableWebViewProps = {
+  backgroundAttachment: true,
+  backgroundBlendMode: true,
+  backgroundClip: true,
+  backgroundOrigin: true,
+  backgroundRepeat: true,
+  borderBottomStyle: true,
+  borderLeftStyle: true,
+  borderRightStyle: true,
+  borderTopStyle: true,
+  contain: true,
+  containerType: true,
+  content: true,
+  float: true,
+  maskBorderMode: true,
+  maskBorderRepeat: true,
+  maskClip: true,
+  maskComposite: true,
+  maskMode: true,
+  maskOrigin: true,
+  maskRepeat: true,
+  maskType: true,
+  objectFit: true,
+  overflowBlock: true,
+  overflowInline: true,
+  overflowX: true,
+  overflowY: true,
+  // NOTE: pointerEvents is NOT web-only - it's a core React Native View prop (not a style)
+  pointerEvents: true,
+  scrollbarWidth: true,
+  textWrap: true,
+  touchAction: true,
+  transformStyle: true,
+  willChange: true
+}, nonAnimatableWebTextProps = {
+  whiteSpace: true,
+  wordWrap: true,
+  textOverflow: true,
+  WebkitBoxOrient: true
+}, webOnlyStylePropsView = __spreadProps(__spreadValues({}, nonAnimatableWebViewProps), {
+  transition: true,
+  backdropFilter: true,
+  WebkitBackdropFilter: true,
+  background: true,
+  borderTop: true,
+  borderRight: true,
+  borderBottom: true,
+  borderLeft: true,
+  backgroundPosition: true,
+  backgroundSize: true,
+  borderImage: true,
+  caretColor: true,
+  clipPath: true,
+  mask: true,
+  maskBorder: true,
+  maskBorderOutset: true,
+  maskBorderSlice: true,
+  maskBorderSource: true,
+  maskBorderWidth: true,
+  maskImage: true,
+  maskPosition: true,
+  maskSize: true,
+  objectPosition: true,
+  textEmphasis: true,
+  userSelect: true
+}), webOnlyStylePropsText = __spreadProps(__spreadValues({}, nonAnimatableWebTextProps), {
+  textDecorationDistance: true,
+  // cursor: now cross-platform - in stylePropsView
+  WebkitLineClamp: true
+});
 function _type_of$6(obj) {
   "@swc/helpers - typeof";
   return obj && typeof Symbol < "u" && obj.constructor === Symbol ? "symbol" : typeof obj;
@@ -1047,16 +1054,17 @@ function extractValueFromDynamic(val, scheme) {
   return (val == null ? void 0 : val.dynamic) ? val.dynamic[scheme] : val;
 }
 var ThemeStateContext = React.createContext(""), allListeners = /* @__PURE__ */ new Map(), listenersByParent = {}, HasRenderedOnce = /* @__PURE__ */ new WeakMap(), HadTheme = /* @__PURE__ */ new WeakMap(), PendingUpdate = /* @__PURE__ */ new Map(), states = /* @__PURE__ */ new Map(), localStates = /* @__PURE__ */ new Map(), shouldForce = false, forceUpdateThemes = function() {
-  shouldForce = true, allListeners.forEach(function(cb) {
+  cacheVersion++, shouldForce = true, allListeners.forEach(function(cb) {
     return cb();
   });
 }, getThemeState = function(id) {
   return states.get(id);
-}, themes = null, rootThemeState = null, getRootThemeState = function() {
+}, cacheVersion = 0, themeNameCache = /* @__PURE__ */ new Map(), themeNameCacheVer = -1, themes = null, rootThemeState = null, getRootThemeState = function() {
   return rootThemeState;
 }, getThemeBaseName = function(name) {
   return name.replace(/^(light|dark)_/, "");
 }, useThemeState = function(props) {
+  "use no memo";
   var isRoot = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false, keys = arguments.length > 2 ? arguments[2] : void 0, schemeKeys = arguments.length > 3 ? arguments[3] : void 0, {
     disable
   } = props, parentId = React.useContext(ThemeStateContext);
@@ -1067,17 +1075,18 @@ var ThemeStateContext = React.createContext(""), allListeners = /* @__PURE__ */
     theme: getConfig().themes.light
   };
   var id = React.useId(), subscribe2 = React.useCallback(function(cb) {
-    var _listenersByParent, _parentId;
-    return (_listenersByParent = listenersByParent)[_parentId = parentId] || (_listenersByParent[_parentId] = /* @__PURE__ */ new Set()), listenersByParent[parentId].add(id), allListeners.set(id, function() {
+    return listenersByParent[parentId] = listenersByParent[parentId] || /* @__PURE__ */ new Set(), listenersByParent[parentId].add(id), allListeners.set(id, function() {
       PendingUpdate.set(id, shouldForce ? "force" : true), cb();
     }), function() {
       allListeners.delete(id), listenersByParent[parentId].delete(id), localStates.delete(id), states.delete(id), PendingUpdate.delete(id);
     };
   }, [id, parentId]), propsKey = getPropsKey(props), getSnapshot = function() {
-    var _keys_current, _schemeKeys_current, _keys_current1, _props_needsUpdate, local = localStates.get(id), parentState = states.get(parentId), isSchemeOnlyChange = isIos && getSetting("fastSchemeChange") && local && parentState && local.scheme !== parentState.scheme && getThemeBaseName(local.name) === getThemeBaseName(parentState.name), _keys_current_size, keysSize = (_keys_current_size = keys == null || (_keys_current = keys.current) === null || _keys_current === void 0 ? void 0 : _keys_current.size) !== null && _keys_current_size !== void 0 ? _keys_current_size : 0, _schemeKeys_current_size, schemeKeysSize = (_schemeKeys_current_size = schemeKeys == null || (_schemeKeys_current = schemeKeys.current) === null || _schemeKeys_current === void 0 ? void 0 : _schemeKeys_current.size) !== null && _schemeKeys_current_size !== void 0 ? _schemeKeys_current_size : 0, allKeysSchemeOptimized = schemeKeysSize === keysSize && keysSize > 0, canSkipForSchemeChange = isSchemeOnlyChange && allKeysSchemeOptimized, needsUpdate = props.passThrough ? false : isRoot || props.name === "light" || props.name === "dark" || props.name === null ? true : HasRenderedOnce.get(keys) ? canSkipForSchemeChange ? false : !(keys == null || (_keys_current1 = keys.current) === null || _keys_current1 === void 0) && _keys_current1.size ? true : (_props_needsUpdate = props.needsUpdate) === null || _props_needsUpdate === void 0 ? void 0 : _props_needsUpdate.call(props) : true, [rerender, next] = getNextState(local, props, propsKey, isRoot, id, parentId, needsUpdate, PendingUpdate.get(id));
-    return PendingUpdate.delete(id), (!local || rerender) && (local = __spreadValues({}, next), localStates.set(id, local)), Object.assign(local, next), local.id = id, states.set(id, next), local;
+    var _keys_current, _schemeKeys_current, _keys_current1, _props_needsUpdate, local = localStates.get(id), parentState = states.get(parentId);
+    if (local && !PendingUpdate.has(id) && parentState && local._parentName === parentState.name && local._propsKey === propsKey) return local;
+    var isSchemeOnlyChange = isIos && getSetting("fastSchemeChange") && local && parentState && local.scheme !== parentState.scheme && getThemeBaseName(local.name) === getThemeBaseName(parentState.name), _keys_current_size, keysSize = (_keys_current_size = keys == null || (_keys_current = keys.current) === null || _keys_current === void 0 ? void 0 : _keys_current.size) !== null && _keys_current_size !== void 0 ? _keys_current_size : 0, _schemeKeys_current_size, schemeKeysSize = (_schemeKeys_current_size = schemeKeys == null || (_schemeKeys_current = schemeKeys.current) === null || _schemeKeys_current === void 0 ? void 0 : _schemeKeys_current.size) !== null && _schemeKeys_current_size !== void 0 ? _schemeKeys_current_size : 0, allKeysSchemeOptimized = schemeKeysSize === keysSize && keysSize > 0, canSkipForSchemeChange = isSchemeOnlyChange && allKeysSchemeOptimized, needsUpdate = props.passThrough ? false : isRoot || props.name === "light" || props.name === "dark" || props.name === null ? true : HasRenderedOnce.get(keys) ? canSkipForSchemeChange ? false : !(keys == null || (_keys_current1 = keys.current) === null || _keys_current1 === void 0) && _keys_current1.size ? true : (_props_needsUpdate = props.needsUpdate) === null || _props_needsUpdate === void 0 ? void 0 : _props_needsUpdate.call(props) : true, [rerender, next] = getNextState(local, props, propsKey, isRoot, id, parentId, needsUpdate, PendingUpdate.get(id));
+    return PendingUpdate.delete(id), (!local || rerender) && (local = __spreadValues({}, next), localStates.set(id, local)), next !== local && (Object.assign(local, next), local.id = id), local._parentName = parentState == null ? void 0 : parentState.name, local._propsKey = propsKey, states.set(id, next), local;
   };
-  var state = React.useSyncExternalStore(subscribe2, getSnapshot, getSnapshot);
+  var state2 = React.useSyncExternalStore(subscribe2, getSnapshot, getSnapshot);
   return useIsomorphicLayoutEffect(function() {
     if (!HasRenderedOnce.get(keys)) {
       HasRenderedOnce.set(keys, true);
@@ -1088,7 +1097,7 @@ var ThemeStateContext = React.createContext(""), allListeners = /* @__PURE__ */
       return;
     }
     scheduleUpdate(id), HadTheme.set(keys, true);
-  }, [keys, propsKey]), state;
+  }, [keys, propsKey]), state2;
 }, getNextState = function(lastState, props, propsKey) {
   var isRoot = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : false, id = arguments.length > 4 ? arguments[4] : void 0, parentId = arguments.length > 5 ? arguments[5] : void 0, needsUpdate = arguments.length > 6 ? arguments[6] : void 0, pendingUpdate = arguments.length > 7 ? arguments[7] : void 0, {
     debug
@@ -1098,7 +1107,7 @@ var ThemeStateContext = React.createContext(""), allListeners = /* @__PURE__ */
   }];
   themes || (themes = getConfig().themes);
   var name = !propsKey && (!lastState || !(lastState == null ? void 0 : lastState.isNew)) ? null : getNewThemeName(parentState == null ? void 0 : parentState.name, props, pendingUpdate === "force" ? true : !!needsUpdate), isSameAsParent = parentState && (!name || name === parentState.name), shouldRerender = !!(pendingUpdate === "force" || needsUpdate && (pendingUpdate || (lastState == null ? void 0 : lastState.name) !== (parentState == null ? void 0 : parentState.name)));
-  if (isSameAsParent) return [shouldRerender, __spreadProps(__spreadValues({}, parentState), {
+  if (isSameAsParent) return !shouldRerender && lastState && lastState.name === parentState.name ? [false, lastState] : [shouldRerender, __spreadProps(__spreadValues({}, parentState), {
     isNew: false
   })];
   if (!name) {
@@ -1164,14 +1173,23 @@ function getNewThemeName() {
     reset
   } = props, componentName = props.unstyled ? void 0 : props.componentName;
   if (name && reset) throw new Error("Cannot reset and set a new name at the same time.");
+  var cacheKey = `${parentName}|${name || ""}|${componentName || ""}|${reset ? 1 : 0}|${forceUpdate ? 1 : 0}`;
+  if (themeNameCacheVer !== cacheVersion) themeNameCache.clear(), themeNameCacheVer = cacheVersion;
+  else {
+    var cached = themeNameCache.get(cacheKey);
+    if (cached !== void 0) return cached;
+  }
   var {
     themes: themes2
   } = getConfig();
   if (reset) {
     var isSchemeOnly = parentName === "light" || parentName === "dark";
-    if (isSchemeOnly) return parentName === "light" ? "dark" : "light";
-    var lastPartIndex = parentName.lastIndexOf("_"), name1 = lastPartIndex <= 0 ? parentName : parentName.slice(lastPartIndex), scheme = parentName.slice(0, lastPartIndex), result = themes2[name1] ? name1 : scheme;
-    return result;
+    if (isSchemeOnly) {
+      var result = parentName === "light" ? "dark" : "light";
+      return themeNameCache.set(cacheKey, result), result;
+    }
+    var lastPartIndex = parentName.lastIndexOf("_"), name1 = lastPartIndex <= 0 ? parentName : parentName.slice(lastPartIndex), scheme = parentName.slice(0, lastPartIndex), result1 = themes2[name1] ? name1 : scheme;
+    return themeNameCache.set(cacheKey, result1), result1;
   }
   var parentParts = parentName.split("_"), lastName = parentParts[parentParts.length - 1];
   lastName && lastName[0].toLowerCase() !== lastName[0] && parentParts.pop();
@@ -1262,7 +1280,7 @@ function getNewThemeName() {
   }
   return !forceUpdate && found === parentName && // if its a scheme only sub-theme, we always consider it "new" because it likely inverses
   // and we want to avoid reparenting
-  !validSchemes[found] ? null : found;
+  !validSchemes[found] ? (themeNameCache.set(cacheKey, null), null) : (themeNameCache.set(cacheKey, found), found);
 }
 var getPropsKey = function(param) {
   var {
@@ -1320,29 +1338,39 @@ function getThemeProxied(_props, _state, _keys, _schemeKeys) {
   return cache$2.set(_state.theme, proxied1), proxied1;
 }
 var EMPTY = {}, useTheme = function() {
+  "use no memo";
   var [theme] = useThemeWithState(EMPTY), res = theme;
   return res;
 }, useThemeWithState = function(props) {
+  "use no memo";
   var isRoot = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false, keys = React.useRef(null), schemeKeys = React.useRef(null), themeState = useThemeState(props, isRoot, keys, schemeKeys);
   var themeProxied = props.passThrough ? {} : getThemeProxied(props, themeState, keys, schemeKeys);
   return [themeProxied, themeState];
 };
-var _withStableStyle = function(Component, styleProvider) {
-  return /* @__PURE__ */ React.forwardRef(function(props, ref) {
+var _withStableStyle = function(Component, createStyle) {
+  return /* @__PURE__ */ React.memo(/* @__PURE__ */ React.forwardRef(function(props, ref) {
     var _a = props, {
       _expressions = []
     } = _a, rest = __objRest(_a, [
       "_expressions"
-    ]), theme = useTheme(), hasMediaKeys = _expressions.some(function(expr) {
+    ]), parentId = React.useContext(ThemeStateContext);
+    if (!parentId) {
+      var config = getConfigMaybe(), themes2 = config == null ? void 0 : config.themes, fallback = themes2 ? themes2.light || themes2.dark || Object.values(themes2)[0] : {};
+      return /* @__PURE__ */ jsxRuntime.jsx(Component, __spreadValues({
+        ref,
+        style: createStyle(fallback, _expressions)
+      }, rest));
+    }
+    var theme = useTheme(), hasMediaKeys = _expressions.some(function(expr) {
       return typeof expr == "string";
     }), media = hasMediaKeys ? useMedia() : null, resolvedExpressions = media ? _expressions.map(function(expr) {
       return typeof expr == "string" ? media[expr] : expr;
     }) : _expressions;
     return /* @__PURE__ */ jsxRuntime.jsx(Component, __spreadValues({
       ref,
-      style: styleProvider(theme, resolvedExpressions)
+      style: createStyle(theme, resolvedExpressions)
     }, rest));
-  });
+  }));
 };
 function setRef(ref, value) {
   typeof ref == "function" ? ref(value) : ref && (ref.current = value);
@@ -1359,50 +1387,44 @@ function useComposedRefs() {
   for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) refs[_key] = arguments[_key];
   return React__namespace.useCallback(composeRefs(...refs), refs);
 }
-var defaultComponentState = {
-  hover: false,
-  press: false,
-  pressIn: false,
-  focus: false,
-  focusVisible: false,
-  focusWithin: false,
-  unmounted: true,
-  disabled: false
-}, defaultComponentStateMounted = __spreadProps(__spreadValues({}, defaultComponentState), {
-  unmounted: false
-}), defaultComponentStateShouldEnter = __spreadProps(__spreadValues({}, defaultComponentState), {
-  unmounted: "should-enter"
-});
-var GLOBAL_KEY = "__tamagui_native_gesture_state__";
-function getGlobalState() {
-  var g = globalThis;
-  return g[GLOBAL_KEY] || (g[GLOBAL_KEY] = {
-    enabled: false,
-    Gesture: null,
-    GestureDetector: null,
-    ScrollView: null
-  }), g[GLOBAL_KEY];
+function createGlobalState(key, defaultValue2) {
+  var GLOBAL_KEY = `__tamagui_${key}__`;
+  function getGlobalState() {
+    var g = globalThis;
+    return g[GLOBAL_KEY] || (g[GLOBAL_KEY] = defaultValue2), g[GLOBAL_KEY];
+  }
+  function setGlobalState(newState) {
+    globalThis[GLOBAL_KEY] = newState;
+  }
+  return {
+    get: getGlobalState,
+    set: setGlobalState
+  };
 }
+var state = createGlobalState("gesture", {
+  enabled: false,
+  Gesture: null,
+  GestureDetector: null,
+  ScrollView: null
+});
 function getGestureHandler() {
   return {
     get isEnabled() {
-      return getGlobalState().enabled;
+      return state.get().enabled;
     },
     get state() {
-      return getGlobalState();
+      return state.get();
     },
     set(updates) {
-      var state = getGlobalState();
-      Object.assign(state, updates);
+      Object.assign(state.get(), updates);
     },
     disable() {
-      var state = getGlobalState();
-      state.enabled = false;
+      state.get().enabled = false;
     },
     createPressGesture(config) {
       var {
         Gesture
-      } = getGlobalState();
+      } = state.get();
       if (!Gesture) return null;
       var _config_delayLongPress, longPressDuration = (_config_delayLongPress = config.delayLongPress) !== null && _config_delayLongPress !== void 0 ? _config_delayLongPress : 500, tap = Gesture.Tap().runOnJS(true).maxDuration(1e4).onBegin(function(e) {
         var _config_onPressIn;
@@ -1429,13 +1451,28 @@ function getGestureHandler() {
     }
   };
 }
+var NativeMenuContext = React.createContext(false);
+var defaultComponentState = {
+  hover: false,
+  press: false,
+  pressIn: false,
+  focus: false,
+  focusVisible: false,
+  focusWithin: false,
+  unmounted: true,
+  disabled: false
+}, defaultComponentStateMounted = __spreadProps(__spreadValues({}, defaultComponentState), {
+  unmounted: false
+}), defaultComponentStateShouldEnter = __spreadProps(__spreadValues({}, defaultComponentState), {
+  unmounted: "should-enter"
+});
 var dontComposePressabilityKeys = {
   onBlur: true,
   onFocus: true
 }, emptyConfig = {}, usePressability = null;
 function useMainThreadPressEvents(events, viewProps) {
   var enabled = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : true;
-  usePressability || (usePressability = require("react-native/Libraries/Pressability/usePressability").default);
+  usePressability = usePressability || require("react-native/Libraries/Pressability/usePressability").default;
   var pressability = usePressability(enabled ? events : emptyConfig);
   if (enabled && pressability) {
     viewProps.hitSlop && events && (events.hitSlop = viewProps.hitSlop);
@@ -1445,64 +1482,89 @@ function useMainThreadPressEvents(events, viewProps) {
     }
   }
 }
-function useEvents(events, viewProps, stateRef, staticConfig, isHOC) {
-  if (events && (events.onFocus && (viewProps.onFocus = events.onFocus), events.onBlur && (viewProps.onBlur = events.onBlur)), staticConfig.isInput && events) {
-    var {
-      onPressIn,
-      onPressOut,
-      onPress
-    } = events, inputEvents = {
-      onPressIn,
-      onPressOut: onPressOut || onPress
-    };
-    return onPressOut && onPress && (inputEvents.onPressOut = composeEventHandlers(onPress, onPressOut)), Object.assign(viewProps, inputEvents), null;
-  }
-  if (isHOC && events) {
-    var {
-      onPressIn: onPressIn1,
-      onPressOut: onPressOut1,
-      onPress: onPress1,
-      onLongPress,
-      delayLongPress
-    } = events;
-    return Object.assign(viewProps, {
-      onPressIn: onPressIn1,
-      onPressOut: onPressOut1,
-      onPress: onPress1,
-      onLongPress,
-      delayLongPress
-    }), null;
-  }
+function useEvents(events, viewProps, stateRef, staticConfig, isHOC, isInsideNativeMenu) {
+  events && (events.onFocus && (viewProps.onFocus = events.onFocus), events.onBlur && (viewProps.onBlur = events.onBlur));
   var hasPressEvents = events == null ? void 0 : events.onPress, gh = getGestureHandler();
   hasPressEvents && (stateRef.current.hasHadEvents = true);
-  var everEnabled = !!(hasPressEvents || stateRef.current.hasHadEvents);
-  if (gh.isEnabled) {
-    var callbacksRef = React.useRef({}), gestureRef = React.useRef(null);
-    return everEnabled ? (callbacksRef.current = hasPressEvents ? {
-      onPressIn: events.onPressIn,
-      onPressOut: events.onPressOut,
-      onPress: events.onPress,
-      onLongPress: events.onLongPress
-    } : {}, gestureRef.current || (gestureRef.current = gh.createPressGesture({
-      onPressIn: function(e) {
-        var _callbacksRef_current_onPressIn, _callbacksRef_current;
-        return (_callbacksRef_current_onPressIn = (_callbacksRef_current = callbacksRef.current).onPressIn) === null || _callbacksRef_current_onPressIn === void 0 ? void 0 : _callbacksRef_current_onPressIn.call(_callbacksRef_current, e);
-      },
-      onPressOut: function(e) {
-        var _callbacksRef_current_onPressOut, _callbacksRef_current;
-        return (_callbacksRef_current_onPressOut = (_callbacksRef_current = callbacksRef.current).onPressOut) === null || _callbacksRef_current_onPressOut === void 0 ? void 0 : _callbacksRef_current_onPressOut.call(_callbacksRef_current, e);
-      },
-      onPress: function(e) {
-        var _callbacksRef_current_onPress, _callbacksRef_current;
-        return (_callbacksRef_current_onPress = (_callbacksRef_current = callbacksRef.current).onPress) === null || _callbacksRef_current_onPress === void 0 ? void 0 : _callbacksRef_current_onPress.call(_callbacksRef_current, e);
-      },
-      onLongPress: function(e) {
-        var _callbacksRef_current_onLongPress, _callbacksRef_current;
-        return (_callbacksRef_current_onLongPress = (_callbacksRef_current = callbacksRef.current).onLongPress) === null || _callbacksRef_current_onLongPress === void 0 ? void 0 : _callbacksRef_current_onLongPress.call(_callbacksRef_current, e);
-      },
-      delayLongPress: events.delayLongPress,
-      hitSlop: viewProps.hitSlop
-    })), gestureRef.current) : null;
+  var everEnabled = !!(hasPressEvents || stateRef.current.hasHadEvents), isUsingRNGH = gh.isEnabled;
+  if (staticConfig.isInput) {
+    if (events) {
+      var {
+        onPressIn,
+        onPressOut,
+        onPress
+      } = events, inputEvents = {
+        onPressIn,
+        onPressOut: onPressOut || onPress
+      };
+      onPressOut && onPress && (inputEvents.onPressOut = composeEventHandlers(onPress, onPressOut)), Object.assign(viewProps, inputEvents);
+    }
+    return null;
+  }
+  if (isHOC) {
+    if (events) {
+      var {
+        onPressIn: onPressIn1,
+        onPressOut: onPressOut1,
+        onPress: onPress1,
+        onLongPress,
+        delayLongPress
+      } = events;
+      Object.assign(viewProps, {
+        onPressIn: onPressIn1,
+        onPressOut: onPressOut1,
+        onPress: onPress1,
+        onLongPress,
+        delayLongPress
+      });
+    }
+    return null;
+  }
+  if (isUsingRNGH) {
+    var callbacksRef = React.useRef(isUsingRNGH ? {} : null), gestureRef = React.useRef(null);
+    if (everEnabled) {
+      if (callbacksRef.current = hasPressEvents ? {
+        onPressIn: events.onPressIn,
+        onPressOut: events.onPressOut,
+        onPress: events.onPress,
+        onLongPress: events.onLongPress
+      } : {}, !gestureRef.current) if (isInsideNativeMenu) {
+        var {
+          Gesture
+        } = gh.state, manual = Gesture.Manual().runOnJS(true).manualActivation(true).onTouchesDown(function() {
+          var _callbacksRef_current_onPressIn, _callbacksRef_current;
+          (_callbacksRef_current_onPressIn = (_callbacksRef_current = callbacksRef.current).onPressIn) === null || _callbacksRef_current_onPressIn === void 0 || _callbacksRef_current_onPressIn.call(_callbacksRef_current, {});
+        }).onTouchesUp(function() {
+          var _callbacksRef_current_onPress, _callbacksRef_current, _callbacksRef_current_onPressOut, _callbacksRef_current1;
+          (_callbacksRef_current_onPress = (_callbacksRef_current = callbacksRef.current).onPress) === null || _callbacksRef_current_onPress === void 0 || _callbacksRef_current_onPress.call(_callbacksRef_current, {}), (_callbacksRef_current_onPressOut = (_callbacksRef_current1 = callbacksRef.current).onPressOut) === null || _callbacksRef_current_onPressOut === void 0 || _callbacksRef_current_onPressOut.call(_callbacksRef_current1, {});
+        }).onTouchesCancelled(function() {
+          var _callbacksRef_current_onPressOut, _callbacksRef_current;
+          (_callbacksRef_current_onPressOut = (_callbacksRef_current = callbacksRef.current).onPressOut) === null || _callbacksRef_current_onPressOut === void 0 || _callbacksRef_current_onPressOut.call(_callbacksRef_current, {});
+        });
+        gestureRef.current = manual;
+      } else gestureRef.current = gh.createPressGesture({
+        onPressIn: function(e) {
+          var _callbacksRef_current_onPressIn, _callbacksRef_current;
+          return (_callbacksRef_current_onPressIn = (_callbacksRef_current = callbacksRef.current).onPressIn) === null || _callbacksRef_current_onPressIn === void 0 ? void 0 : _callbacksRef_current_onPressIn.call(_callbacksRef_current, e);
+        },
+        onPressOut: function(e) {
+          var _callbacksRef_current_onPressOut, _callbacksRef_current;
+          return (_callbacksRef_current_onPressOut = (_callbacksRef_current = callbacksRef.current).onPressOut) === null || _callbacksRef_current_onPressOut === void 0 ? void 0 : _callbacksRef_current_onPressOut.call(_callbacksRef_current, e);
+        },
+        onPress: function(e) {
+          var _callbacksRef_current_onPress, _callbacksRef_current;
+          return (_callbacksRef_current_onPress = (_callbacksRef_current = callbacksRef.current).onPress) === null || _callbacksRef_current_onPress === void 0 ? void 0 : _callbacksRef_current_onPress.call(_callbacksRef_current, e);
+        },
+        onLongPress: function(e) {
+          var _callbacksRef_current_onLongPress, _callbacksRef_current;
+          return (_callbacksRef_current_onLongPress = (_callbacksRef_current = callbacksRef.current).onLongPress) === null || _callbacksRef_current_onLongPress === void 0 ? void 0 : _callbacksRef_current_onLongPress.call(_callbacksRef_current, e);
+        },
+        delayLongPress: events == null ? void 0 : events.delayLongPress,
+        hitSlop: viewProps.hitSlop
+      });
+      return gestureRef.current;
+    }
+    return null;
   }
   return useMainThreadPressEvents(events, viewProps, hasPressEvents), null;
 }
@@ -1518,12 +1580,15 @@ function wrapWithGestureDetector(content, gesture, stateRef, isHOC) {
     gesture: gestureToUse
   }, content) : content;
 }
-var getDefaultProps = function(staticConfig, propsComponentName, isSubText) {
+var getDefaultProps = function(staticConfig, propsComponentName) {
   var _conf_defaultProps, defaultProps = staticConfig == null ? void 0 : staticConfig.defaultProps, conf2 = getConfig(), name = propsComponentName || (staticConfig == null ? void 0 : staticConfig.componentName) || // important: this is how we end up getting the defaultProps we set in createTamagui
   (staticConfig.isText ? "Text" : "View"), userDefaultProps = conf2 == null || (_conf_defaultProps = conf2.defaultProps) === null || _conf_defaultProps === void 0 ? void 0 : _conf_defaultProps[name];
-  if (userDefaultProps && (defaultProps = __spreadValues(__spreadValues({}, userDefaultProps), defaultProps)), 0) ;
-  return defaultProps;
+  return userDefaultProps && (defaultProps = defaultProps ? __spreadValues(__spreadValues({}, userDefaultProps), defaultProps) : userDefaultProps), defaultProps;
 };
+function resolveAnimationDriver(driver) {
+  var _driver_default;
+  return driver ? typeof driver.useAnimations == "function" ? driver : "default" in driver && typeof ((_driver_default = driver.default) === null || _driver_default === void 0 ? void 0 : _driver_default.useAnimations) == "function" ? driver.default : null : null;
+}
 var defaultOffset = {
   height: 0,
   width: 0
@@ -2058,10 +2123,10 @@ function requireNormalizeColor() {
 }
 var normalizeColorExports = requireNormalizeColor();
 const index = /* @__PURE__ */ getDefaultExportFromCjs(normalizeColorExports);
-const normalizeColor$1 = /* @__PURE__ */ _mergeNamespaces({
+const normalizeColor$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   default: index
-}, [normalizeColorExports]);
+}, Symbol.toStringTag, { value: "Module" }));
 var norm = index || normalizeColor$1, normalizeCSSColor = norm;
 function rgba(colorInt) {
   var r = Math.round((colorInt & 4278190080) >>> 24), g = Math.round((colorInt & 16711680) >>> 16), b = Math.round((colorInt & 65280) >>> 8), a = ((colorInt & 255) >>> 0) / 255;
@@ -2125,18 +2190,6 @@ var nativeStyle = "borderStyle", borderDefaults = {
 var empty = function() {
   console.warn("no-op native");
 }, getCSSStylesAtomic = empty, getStyleAtomic = empty, styleToCSS = empty;
-function scanAllSheets() {
-  if (!process.env.TAMAGUI_DID_OUTPUT_CSS) {
-    return;
-  }
-}
-process.env.TAMAGUI_BAIL_AFTER_SCANNING_X_CSS_RULES;
-function setNonce(_2) {
-}
-function insertStyleRules(rulesToInsert) {
-  return;
-}
-process.env.TAMAGUI_INSERT_SELECTOR_TRIES ? +process.env.TAMAGUI_INSERT_SELECTOR_TRIES : 1;
 function isActivePlatform(key) {
   if (!key.startsWith("$platform")) return true;
   var platform = key.slice(10);
@@ -2178,6 +2231,31 @@ function parseBorderShorthand(value) {
   var result = [];
   return borderWidth !== void 0 && (result.push(["borderTopWidth", borderWidth]), result.push(["borderRightWidth", borderWidth]), result.push(["borderBottomWidth", borderWidth]), result.push(["borderLeftWidth", borderWidth])), borderStyle !== void 0 && result.push(["borderStyle", borderStyle]), borderColor !== void 0 && (result.push(["borderTopColor", borderColor]), result.push(["borderRightColor", borderColor]), result.push(["borderBottomColor", borderColor]), result.push(["borderLeftColor", borderColor])), result.length > 0 ? result : void 0;
 }
+var outlineStyles = /* @__PURE__ */ new Set(["solid", "dashed", "dotted", "double", "groove", "ridge", "inset", "outset", "none", "hidden"]);
+function parseOutlineShorthand(value) {
+  if (value === "none" || value === "0") return [["outlineWidth", 0], ["outlineStyle", "none"]];
+  var parts = value.trim().split(/\s+/), outlineWidth, outlineStyle, outlineColor, _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+  try {
+    for (var _iterator = parts[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+      var part = _step.value;
+      if (outlineStyles.has(part)) outlineStyle = part;
+      else if (/^[\d.]+(?:px|em|rem|%|pt|vw|vh)?$/.test(part)) {
+        var num = parseFloat(part);
+        outlineWidth = part.endsWith("px") || !part.match(/[a-z%]/i) ? num : part;
+      } else outlineColor = part;
+    }
+  } catch (err) {
+    _didIteratorError = true, _iteratorError = err;
+  } finally {
+    try {
+      !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
+    } finally {
+      if (_didIteratorError) throw _iteratorError;
+    }
+  }
+  var result = [];
+  return outlineWidth !== void 0 && result.push(["outlineWidth", outlineWidth]), outlineStyle !== void 0 && result.push(["outlineStyle", outlineStyle]), outlineColor !== void 0 && result.push(["outlineColor", outlineColor]), result.length > 0 ? result : void 0;
+}
 var _loop = function(parent) {
   var _exec, _exec_index, prefix = parent.slice(0, (_exec_index = (_exec = /[A-Z]/.exec(parent)) === null || _exec === void 0 ? void 0 : _exec.index) !== null && _exec_index !== void 0 ? _exec_index : parent.length);
   EXPANSIONS[parent] = EXPANSIONS[parent].map(function(k) {
@@ -2204,6 +2282,13 @@ function expandStyle(key, value) {
       }
       return;
     }
+    case "outline": {
+      if (typeof value == "string") {
+        var parsed1 = parseOutlineShorthand(value);
+        if (parsed1) return parsed1;
+      }
+      return;
+    }
   }
   if (key in nativeExpansions) return nativeExpansions[key].map(function(k) {
     return [k, value];
@@ -2318,6 +2403,97 @@ function getFontsForLanguage(fonts, language) {
   })));
   return fontLanguageCache.set(language, next), next;
 }
+var fontShorthand = {
+  fontSize: "size",
+  fontWeight: "weight"
+}, colorKeys = tokenCategories.color, _lastFontFamilyToken = null;
+function getLastFontFamilyToken() {
+  return _lastFontFamilyToken;
+}
+function setLastFontFamilyToken(value) {
+  _lastFontFamilyToken = value;
+}
+var getTokenForKey = function(key, value, styleProps, styleState) {
+  var _staticConfig_accept, resolveAs = styleProps.resolveValues || "none";
+  if (resolveAs === "none") return value;
+  var opacityModifier;
+  if (key in colorKeys) {
+    var slashIdx = value.indexOf("/");
+    if (slashIdx > 0) {
+      var raw = value.slice(slashIdx + 1);
+      if (raw.length > 0) {
+        var num = Number(raw);
+        Number.isNaN(num) || (opacityModifier = Math.max(0, Math.min(1, num / 100)), value = value.slice(0, slashIdx));
+      }
+    }
+  }
+  var {
+    theme,
+    conf: conf2 = getConfig(),
+    context,
+    fontFamily,
+    staticConfig
+  } = styleState, themeValue = theme ? theme[value] || theme[value.slice(1)] : void 0, tokensParsed = conf2.tokensParsed, valOrVar, hasSet = false, customTokenAccept = staticConfig == null || (_staticConfig_accept = staticConfig.accept) === null || _staticConfig_accept === void 0 ? void 0 : _staticConfig_accept[key];
+  if (customTokenAccept) {
+    var _tokensParsed_customTokenAccept, val = themeValue != null ? themeValue : (_tokensParsed_customTokenAccept = tokensParsed[customTokenAccept]) === null || _tokensParsed_customTokenAccept === void 0 ? void 0 : _tokensParsed_customTokenAccept[value];
+    val != null && (resolveAs = "value", valOrVar = val, hasSet = true);
+  }
+  if (themeValue) {
+    if (resolveAs === "except-theme") return value;
+    valOrVar = themeValue, hasSet = true;
+  } else {
+    if (value in conf2.specificTokens) hasSet = true, valOrVar = conf2.specificTokens[value];
+    else {
+      switch (key) {
+        case "fontFamily": {
+          var _fontsParsed_value, fontsParsed = (context == null ? void 0 : context.language) ? getFontsForLanguage(conf2.fontsParsed, context.language) : conf2.fontsParsed;
+          valOrVar = ((_fontsParsed_value = fontsParsed[value]) === null || _fontsParsed_value === void 0 ? void 0 : _fontsParsed_value.family) || value, setLastFontFamilyToken(value), hasSet = true;
+          break;
+        }
+        case "fontSize":
+        case "lineHeight":
+        case "letterSpacing":
+        case "fontWeight": {
+          var fam = fontFamily || conf2.defaultFontToken;
+          if (fam) {
+            var _font_, fontsParsed1 = (context == null ? void 0 : context.language) ? getFontsForLanguage(conf2.fontsParsed, context.language) : conf2.fontsParsed, font = fontsParsed1[fam] || fontsParsed1[conf2.defaultFontToken];
+            valOrVar = (font == null || (_font_ = font[fontShorthand[key] || key]) === null || _font_ === void 0 ? void 0 : _font_[value]) || value, hasSet = true;
+          }
+          break;
+        }
+      }
+      for (var cat in tokenCategories) if (key in tokenCategories[cat]) {
+        var _tokensParsed_cat, res = (_tokensParsed_cat = tokensParsed[cat]) === null || _tokensParsed_cat === void 0 ? void 0 : _tokensParsed_cat[value];
+        res != null ? (valOrVar = res, hasSet = true) : false;
+      }
+    }
+    if (!hasSet) {
+      var spaceVar = tokensParsed.space[value];
+      spaceVar != null && (valOrVar = spaceVar, hasSet = true);
+    }
+  }
+  if (hasSet) {
+    var out = resolveVariableValue(key, valOrVar, resolveAs);
+    if (opacityModifier !== void 0 && opacityModifier < 1) {
+      var _normalizeColor;
+      out = (_normalizeColor = normalizeColor(String(out), opacityModifier)) !== null && _normalizeColor !== void 0 ? _normalizeColor : out;
+    }
+    return out;
+  }
+};
+function resolveVariableValue(key, valOrVar, resolveValues) {
+  if (resolveValues === "none") return valOrVar;
+  if (isVariable(valOrVar)) {
+    if (resolveValues === "value") return valOrVar.val;
+    var get = valOrVar == null ? void 0 : valOrVar.get;
+    if (key !== "shadowColor" && typeof get == "function") {
+      var resolveDynamicFor = resolveValues === "web" ? "web" : void 0;
+      return get(resolveDynamicFor);
+    }
+    return valOrVar.val;
+  }
+  return valOrVar;
+}
 function _type_of$5(obj) {
   "@swc/helpers - typeof";
   return obj && typeof Symbol < "u" && obj.constructor === Symbol ? "symbol" : typeof obj;
@@ -2341,6 +2517,152 @@ function normalizeStyle$1(style) {
   }
   return fixStyles(res), res;
 }
+function parseNativeStyle(key, cssString, tokenMap) {
+  switch (key) {
+    case "backgroundImage":
+      return parseBackgroundImage(cssString, tokenMap);
+    case "boxShadow":
+      return parseBoxShadow(cssString, tokenMap);
+    case "textShadow":
+      return parseTextShadow(cssString, tokenMap);
+    default:
+      return;
+  }
+}
+function resolveColor(raw, tokenMap) {
+  return tokenMap && tokenMap.has(raw) ? tokenMap.get(raw) : raw;
+}
+function parseBackgroundImage(css, tokenMap) {
+  var match = css.match(RegExp("^linear-gradient\\((.+)\\)$", "s"));
+  if (match) {
+    var inner = match[1], parts = splitOutsideParens(inner);
+    if (!(parts.length < 2)) {
+      var direction, startIdx = 0, firstPart = parts[0].trim();
+      (firstPart.startsWith("to ") || /^\d+(\.\d+)?(deg|rad|turn|grad)$/.test(firstPart)) && (direction = firstPart, startIdx = 1);
+      for (var colorStops = [], i = startIdx; i < parts.length; i++) {
+        var stopParts = parts[i].trim().match(/\S+\([^)]*\)|\S+/g);
+        if (stopParts) {
+          var colorRaw = stopParts[0], color = resolveColor(colorRaw, tokenMap), positions = stopParts.slice(1), stop = {
+            color
+          };
+          positions.length > 0 && (stop.positions = positions), colorStops.push(stop);
+        }
+      }
+      var gradient = {
+        type: "linear-gradient",
+        colorStops
+      };
+      return direction && (gradient.direction = direction), [gradient];
+    }
+  }
+}
+function parseBoxShadow(css, tokenMap) {
+  var shadowStrings = splitOutsideParens(css), shadows = [], _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+  try {
+    for (var _iterator = shadowStrings[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+      var raw = _step.value, s = raw.trim();
+      if (s) {
+        var tokens = s.split(/\s+/);
+        if (tokens.length < 2) return;
+        var startIdx = 0, inset = false;
+        tokens[0] === "inset" && (inset = true, startIdx = 1);
+        for (var numericParts = [], colorParts = [], i = startIdx; i < tokens.length; i++) {
+          var n = parseDimension(tokens[i]);
+          if (n !== void 0) numericParts.push(n);
+          else {
+            colorParts = tokens.slice(i);
+            break;
+          }
+        }
+        if (numericParts.length < 2) return;
+        var shadow = {
+          offsetX: numericParts[0],
+          offsetY: numericParts[1]
+        };
+        if (inset && (shadow.inset = true), numericParts.length >= 3 && (shadow.blurRadius = numericParts[2]), numericParts.length >= 4 && (shadow.spreadDistance = numericParts[3]), colorParts.length > 0) {
+          var colorStr = colorParts.join(" ");
+          shadow.color = resolveColor(colorStr, tokenMap);
+        }
+        shadows.push(shadow);
+      }
+    }
+  } catch (err) {
+    _didIteratorError = true, _iteratorError = err;
+  } finally {
+    try {
+      !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
+    } finally {
+      if (_didIteratorError) throw _iteratorError;
+    }
+  }
+  return shadows.length > 0 ? shadows : void 0;
+}
+function parseTextShadow(css, tokenMap) {
+  var tokens = css.trim().split(/\s+/);
+  if (!(tokens.length < 3)) {
+    var offsetX = parseDimension(tokens[0]), offsetY = parseDimension(tokens[1]), blur = parseDimension(tokens[2]);
+    if (!(offsetX === void 0 || offsetY === void 0 || blur === void 0)) {
+      var result = [["textShadowOffset", {
+        width: offsetX,
+        height: offsetY
+      }], ["textShadowRadius", blur]];
+      if (tokens.length >= 4) {
+        var colorStr = tokens.slice(3).join(" ");
+        result.push(["textShadowColor", resolveColor(colorStr, tokenMap)]);
+      }
+      return result;
+    }
+  }
+}
+function parseDimension(s) {
+  var cleaned = s.replace(/px$|dp$/, ""), n = Number(cleaned);
+  return Number.isFinite(n) ? n : void 0;
+}
+function splitOutsideParens(s) {
+  for (var parts = [], depth = 0, start = 0, i = 0; i < s.length; i++) {
+    var ch = s.charCodeAt(i);
+    ch === 40 ? depth++ : ch === 41 ? depth-- : ch === 44 && /* , */
+    depth === 0 && (parts.push(s.slice(start, i)), start = i + 1);
+  }
+  return parts.push(s.slice(start)), parts;
+}
+var tokenPattern = /(\$[\w.-]+)/g, nativeParseKeys = {
+  backgroundImage: true,
+  boxShadow: true,
+  textShadow: true
+};
+function replaceTokens(value, styleProps, styleState) {
+  return value.replace(tokenPattern, function(t) {
+    var r = getTokenForKey("size", t, styleProps, styleState);
+    return r == null && (r = getTokenForKey("color", t, styleProps, styleState)), r != null ? String(r) : t;
+  });
+}
+function platformResolveValue(key, value, styleProps, styleState) {
+  if (!nativeParseKeys[key]) return replaceTokens(value, styleProps, styleState);
+  var effectiveStyleProps = key === "backgroundImage" ? __spreadProps(__spreadValues({}, styleProps), {
+    resolveValues: "web"
+  }) : styleProps, tokenMap = /* @__PURE__ */ new Map(), placeholderIdx = 0, withPlaceholders = value.replace(tokenPattern, function(t) {
+    var r = getTokenForKey("size", t, effectiveStyleProps, styleState);
+    if (r == null && (r = getTokenForKey("color", t, effectiveStyleProps, styleState)), r == null) return t;
+    if (typeof r != "string" && typeof r != "number") {
+      var placeholder = `__tk${placeholderIdx++}__`;
+      return tokenMap.set(placeholder, r), placeholder;
+    }
+    return String(r);
+  }), parsed = parseNativeStyle(key, withPlaceholders, tokenMap);
+  return parsed || replaceTokens(value, styleProps, styleState);
+}
+var compoundKeys = {
+  boxShadow: true,
+  textShadow: true,
+  filter: true,
+  backgroundImage: true,
+  border: true,
+  outline: true
+};
+function resolveCompoundTokens(key, value, styleProps, styleState) {
+  return !value.includes("$") || !compoundKeys[key] ? value : platformResolveValue(key, value, styleProps, styleState);
+}
 var remRegex = /(-?[\d.]+)rem/g;
 function resolveRem(value) {
   var _config_settings, config = getConfig(), _config_settings_remBaseFontSize, baseFontSize = (_config_settings_remBaseFontSize = config == null || (_config_settings = config.settings) === null || _config_settings === void 0 ? void 0 : _config_settings.remBaseFontSize) !== null && _config_settings_remBaseFontSize !== void 0 ? _config_settings_remBaseFontSize : 16;
@@ -2406,6 +2728,7 @@ var skipProps = {
   transition: 1,
   space: 1,
   animateOnly: 1,
+  animatedBy: 1,
   disableClassName: 1,
   debug: 1,
   componentName: 1,
@@ -2424,7 +2747,7 @@ function _type_of$4(obj) {
 }
 var propMapper = function(key, value, styleState, disabled, map) {
   if (disabled) return map(key, value);
-  if (lastFontFamilyToken = null, !(!isAndroid && key === "elevationAndroid")) {
+  if (setLastFontFamilyToken(null), !(!isAndroid && key === "elevationAndroid")) {
     var {
       conf: conf2,
       styleProps,
@@ -2444,15 +2767,44 @@ var propMapper = function(key, value, styleState, disabled, map) {
     }
     styleProps.disableExpandShorthands || key in conf2.shorthands && (key = conf2.shorthands[key]);
     var originalValue = value;
-    if (value != null && (typeof value == "string" && value[0] === "$" ? value = getTokenForKey(key, value, styleProps, styleState) : (key === "boxShadow" || key === "textShadow" || key === "filter" || key === "backgroundImage" || key === "border") && typeof value == "string" && value.includes("$") ? value = value.replace(/(\$[\w.-]+)/g, function(t) {
-      var r = getTokenForKey("size", t, styleProps, styleState);
-      return r == null && (r = getTokenForKey("color", t, styleProps, styleState)), r != null ? String(r) : t;
-    }) : isVariable(value) ? value = resolveVariableValue(key, value, styleProps.resolveValues) : isRemValue(value) && (value = resolveRem(value))), value != null) {
-      key === "fontFamily" && lastFontFamilyToken && (styleState.fontFamily = lastFontFamilyToken);
+    if (value != null) if (typeof value == "string") {
+      if (value[0] === "$") value = getTokenForKey(key, value, styleProps, styleState);
+      else {
+        var resolved = resolveCompoundTokens(key, value, styleProps, styleState);
+        value = resolved !== value ? resolved : isRemValue(value) ? resolveRem(value) : value;
+      }
+    } else isVariable(value) ? value = resolveVariableValue(key, value, styleProps.resolveValues) : isRemValue(value) && (value = resolveRem(value));
+    if (value != null && typeof value == "string" && (key === "backgroundImage" || key === "boxShadow" || key === "textShadow")) {
+      var parsed = parseNativeStyle(key, value);
+      if (parsed) {
+        if (key === "textShadow" && Array.isArray(parsed) && Array.isArray(parsed[0])) {
+          var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+          try {
+            for (var _iterator = parsed[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+              var [nkey, nvalue] = _step.value;
+              map(nkey, nvalue, originalValue);
+            }
+          } catch (err) {
+            _didIteratorError = true, _iteratorError = err;
+          } finally {
+            try {
+              !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
+            } finally {
+              if (_didIteratorError) throw _iteratorError;
+            }
+          }
+          return;
+        }
+        value = parsed;
+      }
+    }
+    if (value != null) {
+      var fontToken = getLastFontFamilyToken();
+      key === "fontFamily" && fontToken && (styleState.fontFamily = fontToken);
       var expanded = styleProps.noExpand ? null : expandStyle(key, value);
       if (expanded) for (var max = expanded.length, i = 0; i < max; i++) {
-        var [nkey, nvalue] = expanded[i];
-        map(nkey, nvalue, originalValue);
+        var [nkey1, nvalue1] = expanded[i];
+        map(nkey1, nvalue1, originalValue);
       }
       else map(key, value, originalValue);
     }
@@ -2466,7 +2818,7 @@ var propMapper = function(key, value, styleState, disabled, map) {
     variants
   } = staticConfig;
   if (variants) {
-    var variantValue = getVariantDefinition(variants[key], value, conf2);
+    var variantValue = getVariantDefinition(variants[key], value, conf2, styleState);
     if (!variantValue) {
       if (process.env.TAMAGUI_WARN_ON_MISSING_VARIANT === "1" && typeof value != "boolean") {
         var name = staticConfig.componentName || "[UnnamedComponent]";
@@ -2486,7 +2838,7 @@ var propMapper = function(key, value, styleState, disabled, map) {
     if (variantValue) {
       var expanded = normalizeStyle$1(variantValue, !!styleProps.noNormalize);
       var next = Object.entries(expanded);
-      return fontFamilyResult && fontFamilyResult[0] === "$" && (lastFontFamilyToken = getVariableValue(fontFamilyResult)), next;
+      return fontFamilyResult && fontFamilyResult[0] === "$" && setLastFontFamilyToken(getVariableValue(fontFamilyResult)), next;
     }
   }
 };
@@ -2521,8 +2873,7 @@ var variableToFontNameCache = /* @__PURE__ */ new WeakMap(), resolveTokensAndVar
       }
       if (styleProps.noExpand) res[subKey] = val;
       else if (variants && subKey in variants) {
-        if (parentVariantKey && parentVariantKey === key) res[subKey] = // SYNC WITH *1
-        val[0] === "$" ? getTokenForKey(subKey, val, styleProps, styleState) : val;
+        if (parentVariantKey && parentVariantKey === key) res[subKey] = val[0] === "$" ? getTokenForKey(subKey, val, styleProps, styleState) : val;
         else {
           var variantOut = resolveVariants(subKey, val, styleProps, styleState, key);
           if (variantOut) {
@@ -2553,8 +2904,8 @@ var variableToFontNameCache = /* @__PURE__ */ new WeakMap(), resolveTokensAndVar
         continue;
       }
       if (typeof val == "string") {
-        var fVal = val[0] === "$" ? getTokenForKey(subKey, val, styleProps, styleState) : isRemValue(val) ? resolveRem(val) : val;
-        res[subKey] = fVal;
+        var fVal = val[0] === "$" ? getTokenForKey(subKey, val, styleProps, styleState) : resolveCompoundTokens(subKey, val, styleProps, styleState);
+        res[subKey] = fVal === val && isRemValue(val) ? resolveRem(val) : fVal;
         continue;
       }
       if (isObj(val)) {
@@ -2571,7 +2922,10 @@ var variableToFontNameCache = /* @__PURE__ */ new WeakMap(), resolveTokensAndVar
     spreadName: `...${name}`
   };
 });
-function getVariantDefinition(variant, value, conf2) {
+function getVariantDefinition(variant, value, conf2, param) {
+  var {
+    theme
+  } = param;
   if (variant) {
     if (typeof variant == "function") return variant;
     var exact = variant[value];
@@ -2586,7 +2940,13 @@ function getVariantDefinition(variant, value, conf2) {
             name,
             spreadName
           } = _step.value;
-          if (spreadName in variant && name in tokensParsed && value in tokensParsed[name]) return variant[spreadName];
+          if (spreadName in variant) {
+            if (name in tokensParsed && value in tokensParsed[name]) return variant[spreadName];
+            if (name === "color" && theme && typeof value == "string" && value[0] === "$") {
+              var themeKey = value.slice(1);
+              if (themeKey in theme) return variant[spreadName];
+            }
+          }
         }
       } catch (err) {
         _didIteratorError = true, _iteratorError = err;
@@ -2603,75 +2963,6 @@ function getVariantDefinition(variant, value, conf2) {
     return variant[`:${typeof value > "u" ? "undefined" : _type_of$4(value)}`] || variant["..."];
   }
 }
-var fontShorthand = {
-  fontSize: "size",
-  fontWeight: "weight"
-}, lastFontFamilyToken = null, getTokenForKey = function(key, value, styleProps, styleState) {
-  var _staticConfig_accept, resolveAs = styleProps.resolveValues || "none";
-  if (resolveAs === "none") return value;
-  var {
-    theme,
-    conf: conf2 = getConfig(),
-    context,
-    fontFamily,
-    staticConfig
-  } = styleState, themeValue = theme ? theme[value] || theme[value.slice(1)] : void 0, tokensParsed = conf2.tokensParsed, valOrVar, hasSet = false, customTokenAccept = staticConfig == null || (_staticConfig_accept = staticConfig.accept) === null || _staticConfig_accept === void 0 ? void 0 : _staticConfig_accept[key];
-  if (customTokenAccept) {
-    var val = themeValue != null ? themeValue : tokensParsed[customTokenAccept][value];
-    val != null && (resolveAs = "value", valOrVar = val, hasSet = true);
-  }
-  if (themeValue) {
-    if (resolveAs === "except-theme") return value;
-    valOrVar = themeValue, hasSet = true;
-  } else {
-    if (value in conf2.specificTokens) hasSet = true, valOrVar = conf2.specificTokens[value];
-    else {
-      switch (key) {
-        case "fontFamily": {
-          var _fontsParsed_value, fontsParsed = (context == null ? void 0 : context.language) ? getFontsForLanguage(conf2.fontsParsed, context.language) : conf2.fontsParsed;
-          valOrVar = ((_fontsParsed_value = fontsParsed[value]) === null || _fontsParsed_value === void 0 ? void 0 : _fontsParsed_value.family) || value, lastFontFamilyToken = value, hasSet = true;
-          break;
-        }
-        case "fontSize":
-        case "lineHeight":
-        case "letterSpacing":
-        case "fontWeight": {
-          var fam = fontFamily || conf2.defaultFontToken;
-          if (fam) {
-            var _font_, fontsParsed1 = (context == null ? void 0 : context.language) ? getFontsForLanguage(conf2.fontsParsed, context.language) : conf2.fontsParsed, font = fontsParsed1[fam] || fontsParsed1[conf2.defaultFontToken];
-            valOrVar = (font == null || (_font_ = font[fontShorthand[key] || key]) === null || _font_ === void 0 ? void 0 : _font_[value]) || value, hasSet = true;
-          }
-          break;
-        }
-      }
-      for (var cat in tokenCategories) if (key in tokenCategories[cat]) {
-        var _tokensParsed_cat, res = (_tokensParsed_cat = tokensParsed[cat]) === null || _tokensParsed_cat === void 0 ? void 0 : _tokensParsed_cat[value];
-        res != null ? (valOrVar = res, hasSet = true) : false;
-      }
-    }
-    if (!hasSet) {
-      var spaceVar = tokensParsed.space[value];
-      spaceVar != null && (valOrVar = spaceVar, hasSet = true);
-    }
-  }
-  if (hasSet) {
-    var out = resolveVariableValue(key, valOrVar, resolveAs);
-    return out;
-  }
-};
-function resolveVariableValue(key, valOrVar, resolveValues) {
-  if (resolveValues === "none") return valOrVar;
-  if (isVariable(valOrVar)) {
-    if (resolveValues === "value") return valOrVar.val;
-    var get = valOrVar == null ? void 0 : valOrVar.get;
-    if (key !== "shadowColor" && typeof get == "function") {
-      var resolveDynamicFor = resolveValues === "web" ? "web" : void 0;
-      return get(resolveDynamicFor);
-    }
-    return valOrVar.val;
-  }
-  return valOrVar;
-}
 var sortString = function(a, b) {
   return a < b ? -1 : a > b ? 1 : 0;
 };
@@ -2699,14 +2990,14 @@ function normalizeGroupKey(key, groupContext) {
     plen === 2 || plen === 3 && pseudoPriorities[parts[parts.length - 1]]
   ) {
     var name = parts[1];
-    if (groupContext && !groupContext[name]) return key.replace("$group-", "$group-true-");
+    if (name !== "true" && groupContext && !groupContext[name]) return key.replace("$group-", "$group-true-");
   }
   return key;
 }
 function isValidStyleKey(key, validStyles2, accept) {
   return key in validStyles2 ? true : accept && key in accept;
 }
-var getSplitStyles = function(props, staticConfig, theme, themeName, componentState, styleProps, parentSplitStyles, componentContext, groupContext, elementType, startedUnhydrated, debug) {
+var getSplitStyles = function(props, staticConfig, theme, themeName, componentState, styleProps, parentSplitStyles, componentContext, groupContext, elementType, startedUnhydrated, debug, animationDriver) {
   var _loop2 = function(keyOg2) {
     var keyInit = keyOg2, valInit = props[keyInit];
     if (keyInit === "children") return viewProps[keyInit] = valInit, "continue";
@@ -2742,45 +3033,47 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
     if (!noSkip && keyInit in skipProps) return "continue";
     (isText || isInput) && valInit && (keyInit === "fontFamily" || keyInit === shorthands.fontFamily) && valInit in conf.fontsParsed && (styleState.fontFamily = valInit);
     var disablePropMap = isMediaOrPseudo || !isStyleLikeKey;
-    if (propMapper(keyInit, valInit, styleState, disablePropMap, function(key4, val2, originalVal) {
-      var _parentStaticConfig_variants, isStyledContextProp = styledContext && key4 in styledContext;
+    if (propMapper(keyInit, valInit, styleState, disablePropMap, function(key5, val2, originalVal) {
+      var _parentStaticConfig_variants, isStyledContextProp = styledContext && key5 in styledContext;
       if (!isHOC && disablePropMap && !isStyledContextProp && !isMediaOrPseudo) {
-        viewProps[key4] = val2;
+        viewProps[key5] = val2;
         return;
       }
-      if (val2 != null) {
-        if (key4 === "pointerEvents") {
-          viewProps[key4] = val2;
+      if (false, val2 != null) {
+        if (key5 === "pointerEvents") {
+          viewProps[key5] = val2;
           return;
         }
-        if (!isHOC && isValidStyleKey(key4, validStyles$1, accept) || isAndroid && key4 === "elevation") {
-          mergeStyle(styleState, key4, val2, 1, false, originalVal);
+        if (!isHOC && isValidStyleKey(key5, validStyles$1, accept) || isAndroid && key5 === "elevation") {
+          mergeStyle(styleState, key5, val2, 1, false, originalVal);
           return;
         }
-        if (isPseudo = key4 in validPseudoKeys, isMedia = isPseudo ? false : getMediaKey(key4), isMediaOrPseudo = !!(isMedia || isPseudo), isVariant = variants && key4 in variants, isMedia === "group" && (key4 = normalizeGroupKey(key4, groupContext)), (inlineProps == null ? void 0 : inlineProps.has(key4)) || process.env.IS_STATIC === "is_static" && (inlineWhenUnflattened == null ? void 0 : inlineWhenUnflattened.has(key4))) {
+        if (isPseudo = key5 in validPseudoKeys, isMedia = isPseudo ? false : getMediaKey(key5), isMediaOrPseudo = !!(isMedia || isPseudo), isVariant = variants && key5 in variants, isMedia === "group" && (key5 = normalizeGroupKey(key5, groupContext)), (inlineProps == null ? void 0 : inlineProps.has(key5)) || process.env.IS_STATIC === "is_static" && (inlineWhenUnflattened == null ? void 0 : inlineWhenUnflattened.has(key5))) {
           var _props_key;
-          viewProps[key4] = (_props_key = props[key4]) !== null && _props_key !== void 0 ? _props_key : val2;
+          viewProps[key5] = (_props_key = props[key5]) !== null && _props_key !== void 0 ? _props_key : val2;
         }
         var shouldPassThrough2 = styleProps.noExpand && isPseudo || isHOC && (isMediaOrPseudo || (parentStaticConfig == null || (_parentStaticConfig_variants = parentStaticConfig.variants) === null || _parentStaticConfig_variants === void 0 ? void 0 : _parentStaticConfig_variants[keyInit]));
         if (shouldPassThrough2) {
-          passDownProp(viewProps, key4, val2, isMediaOrPseudo);
+          passDownProp(viewProps, key5, val2, isMediaOrPseudo), false;
           return;
         }
         if (isPseudo) {
           if (!val2) return;
-          var pseudoStyleObject = getSubStyle(styleState, key4, val2, styleProps.noClass && process.env.IS_STATIC !== "is_static");
-          {
+          var pseudoStyleObject = getSubStyle(styleState, key5, val2, styleProps.noClass && process.env.IS_STATIC !== "is_static");
+          if (!shouldDoClasses || process.env.IS_STATIC === "is_static") {
             var _pseudos, _key;
-            if (pseudos || (pseudos = {}), (_pseudos = pseudos)[_key = key4] || (_pseudos[_key] = {}), process.env.IS_STATIC === "is_static") {
-              Object.assign(pseudos[key4], pseudoStyleObject);
+            if (pseudos || (pseudos = {}), (_pseudos = pseudos)[_key = key5] || (_pseudos[_key] = {}), process.env.IS_STATIC === "is_static") {
+              Object.assign(pseudos[key5], pseudoStyleObject);
               return;
             }
           }
-          var descriptor = pseudoDescriptors[key4], isEnter = key4 === "enterStyle", isExit = key4 === "exitStyle";
+          var descriptor = pseudoDescriptors[key5], isEnter = key5 === "enterStyle", isExit = key5 === "exitStyle";
           if (!descriptor) return;
-          {
+          var pseudoStyles, _iteratorNormalCompletion3, _didIteratorError3, _iteratorError3, _iterator3, _step3, psuedoStyle, fullKey;
+          if (shouldDoClasses && !isExit) ;
+          if (!shouldDoClasses || isExit || isEnter) {
             var descriptorKey = descriptor.stateKey || descriptor.name, isDisabled2 = componentState[descriptorKey] === false;
-            isExit && (isDisabled2 = !styleProps.isExiting), isEnter && componentState.unmounted === false && (isDisabled2 = true);
+            isExit && (isDisabled2 = !styleProps.isExiting), isEnter && componentState.unmounted === false && (isDisabled2 = true), false;
             var importance = descriptor.priority, pseudoOriginalValues = styleOriginalValues.get(pseudoStyleObject);
             for (var pkey in pseudoStyleObject) {
               var _$val = pseudoStyleObject[pkey];
@@ -2790,7 +3083,7 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
                 if (shouldMerge) {
                   if (process.env.IS_STATIC === "is_static") {
                     var _pseudos1, _key1;
-                    pseudos || (pseudos = {}), (_pseudos1 = pseudos)[_key1 = key4] || (_pseudos1[_key1] = {}), pseudos[key4][pkey] = _$val;
+                    pseudos || (pseudos = {}), (_pseudos1 = pseudos)[_key1 = key5] || (_pseudos1[_key1] = {}), pseudos[key5][pkey] = _$val;
                   }
                   mergeStyle(styleState, pkey, _$val, importance, false, pseudoOriginalValues == null ? void 0 : pseudoOriginalValues[pkey]);
                 }
@@ -2805,48 +3098,27 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
         }
         if (isMedia) {
           if (!val2) return;
-          var mediaKeyShort = key4.slice(isMedia == "theme" ? 7 : 1);
+          var mediaKeyShort = key5.slice(isMedia == "theme" ? 7 : 1);
           hasMedia || (hasMedia = true);
-          val2.space;
-          if ((!hasMedia || typeof hasMedia == "boolean") && (hasMedia = /* @__PURE__ */ new Set()), hasMedia.add(mediaKeyShort), isMedia === "platform" && !isActivePlatform(key4)) return;
+          var hasSpace = val2.space;
+          if ((hasSpace || !shouldDoClasses || styleProps.willBeAnimated) && ((!hasMedia || typeof hasMedia == "boolean") && (hasMedia = /* @__PURE__ */ new Set()), hasMedia.add(mediaKeyShort)), isMedia === "platform" && !isActivePlatform(key5)) return;
           var priority = mediaStylesSeen;
-          mediaStylesSeen += 1;
-          var shouldDoClassesForThisMedia = isWeb;
-          if (shouldDoClassesForThisMedia) {
-            getSubStyle(styleState, key4, val2, false);
-            var mediaStyles = getCSSStylesAtomic(), _iteratorNormalCompletion12 = true, _didIteratorError12 = false, _iteratorError12 = void 0;
-            try {
-              for (var _iterator12 = mediaStyles[Symbol.iterator](), _step12; !(_iteratorNormalCompletion12 = (_step12 = _iterator12.next()).done); _iteratorNormalCompletion12 = true) {
-                var style3 = _step12.value, property = style3[StyleObjectProperty], isSubStyle = property[0] === "$";
-                if (!(isSubStyle && !isActivePlatform(property))) {
-                  var out = createMediaStyle(style3, mediaKeyShort, mediaQueryConfig, isMedia, false, priority);
-                  var subKey = isSubStyle ? style3[2] : "", fullKey1 = `${style3[StyleObjectProperty]}${subKey}${PROP_SPLIT}${mediaKeyShort}${style3[StyleObjectPseudo] || ""}`;
-                  addStyleToInsertRules(rulesToInsert, out), classNames[fullKey1] = out[StyleObjectIdentifier];
-                }
-              }
-            } catch (err) {
-              _didIteratorError12 = true, _iteratorError12 = err;
-            } finally {
-              try {
-                !_iteratorNormalCompletion12 && _iterator12.return != null && _iterator12.return();
-              } finally {
-                if (_didIteratorError12) throw _iteratorError12;
-              }
-            }
-          } else {
-            let mergeMediaStyle2 = function(key5, val3, originalVal2) {
+          var mediaStyle, mediaStyles, _iteratorNormalCompletion12, _didIteratorError12, _iteratorError12, _iterator12, _step12, style3, property, isSubStyle, out, subKey, fullKey1;
+          if (mediaStylesSeen += 1, shouldDoClasses) ;
+          else {
+            let mergeMediaStyle2 = function(key6, val3, originalVal2) {
               var _styleState4;
               (_styleState4 = styleState).style || (_styleState4.style = {});
-              var didMerge = mergeMediaByImportance(styleState, mediaKeyShort, key5, val3, mediaState[mediaKeyShort], importanceBump, debug, originalVal2);
-              didMerge && key5 === "fontFamily" && (styleState.fontFamily = mediaStyle1.fontFamily);
+              var didMerge = mergeMediaByImportance(styleState, mediaKeyShort, key6, val3, mediaState[mediaKeyShort], importanceBump, debug, originalVal2);
+              didMerge && key6 === "fontFamily" && (styleState.fontFamily = mediaStyle1.fontFamily);
             };
-            var isThemeMedia = isMedia === "theme", isGroupMedia = isMedia === "group", isPlatformMedia = isMedia === "platform";
+            var mergeMediaStyle = mergeMediaStyle2, isThemeMedia = isMedia === "theme", isGroupMedia = isMedia === "group", isPlatformMedia = isMedia === "platform";
             if (!isThemeMedia && !isPlatformMedia && !isGroupMedia) {
               if (!mediaState[mediaKeyShort]) {
                 return;
               }
             }
-            var mediaStyle1 = getSubStyle(styleState, key4, val2, true), importanceBump = 0;
+            var mediaStyle1 = getSubStyle(styleState, key5, val2, true), importanceBump = 0;
             if (isThemeMedia) {
               if (isIos && getSetting("fastSchemeChange")) {
                 var _styleState3;
@@ -2872,14 +3144,14 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
             } else if (isGroupMedia) {
               var _groupContext_groupName, _componentState_group, groupInfo = getGroupPropParts(mediaKeyShort), groupName = groupInfo.name, groupState = groupContext == null || (_groupContext_groupName = groupContext[groupName]) === null || _groupContext_groupName === void 0 ? void 0 : _groupContext_groupName.state, groupPseudoKey = groupInfo.pseudo, groupMediaKey = groupInfo.media;
               if (!groupState) {
-                pseudoGroups || (pseudoGroups = /* @__PURE__ */ new Set());
+                false, pseudoGroups || (pseudoGroups = /* @__PURE__ */ new Set());
                 return;
               }
               var componentGroupState = (_componentState_group = componentState.group) === null || _componentState_group === void 0 ? void 0 : _componentState_group[groupName];
               if (groupMediaKey) {
                 mediaGroups || (mediaGroups = /* @__PURE__ */ new Set()), mediaGroups.add(groupMediaKey);
                 var mediaState1 = componentGroupState == null ? void 0 : componentGroupState.media, isActive = mediaState1 == null ? void 0 : mediaState1[groupMediaKey];
-                if (!mediaState1 && groupState.layout && (isActive = mediaKeyMatch(groupMediaKey, groupState.layout)), !isActive) {
+                if (!mediaState1 && groupState.layout && (isActive = mediaKeyMatch(groupMediaKey, groupState.layout)), false, !isActive) {
                   for (var pkey1 in mediaStyle1) applyDefaultStyle(pkey1, styleState);
                   return;
                 }
@@ -2889,7 +3161,7 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
                 var _this;
                 pseudoGroups || (pseudoGroups = /* @__PURE__ */ new Set()), pseudoGroups.add(groupName);
                 var componentGroupPseudoState = (_this = componentGroupState || (groupContext == null ? void 0 : groupContext[groupName].state)) === null || _this === void 0 ? void 0 : _this.pseudo, isActive1 = componentGroupPseudoState == null ? void 0 : componentGroupPseudoState[groupPseudoKey], priority1 = pseudoPriorities[groupPseudoKey];
-                if (!isActive1) {
+                if (false, !isActive1) {
                   for (var pkey2 in mediaStyle1) applyDefaultStyle(pkey2, styleState);
                   return;
                 }
@@ -2897,6 +3169,10 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
               }
             }
             var mediaOriginalValues = styleOriginalValues.get(mediaStyle1);
+            if (isGroupMedia && mediaStyle1.transition) {
+              var _styleState12;
+              (_styleState12 = styleState).pseudoTransitions || (_styleState12.pseudoTransitions = {}), styleState.pseudoTransitions[`$${mediaKeyShort}`] = mediaStyle1.transition;
+            }
             for (var subKey2 in mediaStyle1) if (subKey2 !== "space") if (subKey2[0] === "$") {
               if (!isActivePlatform(subKey2) || !isActiveTheme(subKey2, themeName)) continue;
               var subOriginalValues = styleOriginalValues.get(mediaStyle1[subKey2]);
@@ -2907,13 +3183,13 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
         }
         if (!isVariant) {
           if (isStyledContextProp) return;
-          viewProps[key4] = val2;
+          viewProps[key5] = val2;
         }
       }
     }), false) ;
   };
   conf = conf || getConfig();
-  (componentContext == null ? void 0 : componentContext.animationDriver) || conf.animations;
+  var driver = animationDriver || (componentContext == null ? void 0 : componentContext.animationDriver) || conf.animations;
   if (props.passThrough) return null;
   var {
     shorthands
@@ -2927,7 +3203,7 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
     inlineWhenUnflattened,
     parentStaticConfig,
     acceptsClassName
-  } = staticConfig, viewProps = {}, mediaState = styleProps.mediaState || exports.mediaState, rulesToInsert = void 0, classNames = {};
+  } = staticConfig, viewProps = {}, mediaState = styleProps.mediaState || exports.mediaState, shouldDoClasses = acceptsClassName && isWeb, rulesToInsert = void 0, classNames = {};
   props.space;
   var pseudos = null, hasMedia = false, dynamicThemeAccess, pseudoGroups, mediaGroups;
   props.className || "";
@@ -2944,15 +3220,17 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
     usedKeys: {},
     viewProps,
     context: componentContext,
-    debug
+    debug,
+    // resolved animation driver (respects animatedBy prop)
+    animationDriver: driver
   };
   if (process.env.IS_STATIC === "is_static") {
     var {
       fallbackProps
     } = styleProps;
     fallbackProps && (styleState.props = new Proxy(props, {
-      get(_2, key4, val2) {
-        return Reflect.has(props, key4) ? Reflect.get(props, key4) : Reflect.get(fallbackProps, key4);
+      get(_2, key5, val2) {
+        return Reflect.has(props, key5) ? Reflect.get(props, key5) : Reflect.get(fallbackProps, key5);
       }
     }));
   }
@@ -3015,7 +3293,8 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
     dynamicThemeAccess,
     pseudoGroups,
     mediaGroups,
-    overriddenContextProps: styleState.overriddenContextProps
+    overriddenContextProps: styleState.overriddenContextProps,
+    pseudoTransitions: styleState.pseudoTransitions
   }, asChildExceptStyleLike = asChild === "except-style" || asChild === "except-style-web";
   if (!styleProps.noMergeStyle && !asChildExceptStyleLike) {
     var style2 = styleState.style;
@@ -3068,11 +3347,23 @@ function mergeStyle(styleState, key, val, importance) {
 var getSubStyle = function(styleState, subKey, styleIn, avoidMergeTransform) {
   var _loop2 = function(key1) {
     var val = styleIn[key1];
-    key1 = conf2.shorthands[key1] || key1;
+    if (key1 = conf2.shorthands[key1] || key1, key1 === "transition") {
+      var _styleState;
+      (_styleState = styleState).pseudoTransitions || (_styleState.pseudoTransitions = {}), styleState.pseudoTransitions[subKey] = val;
+      var driver = styleState.animationDriver;
+      if ((driver == null ? void 0 : driver.outputStyle) === "css") {
+        var _driver_animations, animationConfig = (_driver_animations = driver.animations) === null || _driver_animations === void 0 ? void 0 : _driver_animations[val];
+        if (animationConfig) {
+          var important = subKey[0] === "$" ? " !important" : "";
+          styleOut.transition = `all ${animationConfig}${important}`;
+        }
+      }
+      return key = key1, "continue";
+    }
     var shouldSkip = !staticConfig.isHOC && key1 in skipProps && !styleProps.noSkip;
     if (shouldSkip) return key = key1, "continue";
     propMapper(key1, val, styleState, false, function(skey, sval, originalVal) {
-      originalVal !== void 0 && (originalValues || (originalValues = {}), originalValues[skey] = originalVal), skey in validPseudoKeys && (sval = getSubStyle(styleState, skey, sval, avoidMergeTransform)), !avoidMergeTransform && skey in stylePropsTransform ? mergeTransform(styleOut, skey, sval) : styleOut[skey] = styleProps.noNormalize ? sval : normalizeValueWithProperty(sval);
+      originalVal !== void 0 && (originalValues || (originalValues = {}), originalValues[skey] = originalVal), skey in validPseudoKeys && (sval = getSubStyle(styleState, skey, sval, avoidMergeTransform)), !avoidMergeTransform && skey in stylePropsTransform ? mergeTransform(styleOut, skey, sval) : styleOut[skey] = styleProps.noNormalize ? sval : normalizeValueWithProperty(sval, key1);
     }), key = key1;
   }, {
     staticConfig,
@@ -3110,8 +3401,9 @@ var getSubStyle = function(styleState, subKey, styleIn, avoidMergeTransform) {
     } else flatTransforms && mergeFlatTransforms(styleOut, flatTransforms);
   }
   return styleProps.noNormalize || fixStyles(styleOut), originalValues && styleOriginalValues.set(styleOut, originalValues), styleOut;
-}, useSplitStyles = function(a, b, c, d, e, f, g, h, i, j, k, l) {
-  var res = getSplitStyles(a, b, c, d, e, f, g, h, i, j, k, l);
+}, useSplitStyles = function(a, b, c, d, e, f, g, h, i, j, k, l, m) {
+  "use no memo";
+  var res = getSplitStyles(a, b, c, d, e, f, g, h, i, j, k, l, m);
   return res;
 };
 function addStyleToInsertRules(rulesToInsert, styleObject) {
@@ -3173,6 +3465,18 @@ function applyDefaultStyle(pkey, styleState) {
   var defaultValues = animatableDefaults[pkey];
   defaultValues != null && !(pkey in styleState.usedKeys) && (!styleState.style || !(pkey in styleState.style)) && mergeStyle(styleState, pkey, defaultValues, 1);
 }
+var isEventHandler = /^on[A-Z]/;
+function mergeSlotStyleProps(base, overlay) {
+  for (var key in overlay) {
+    var baseVal = base[key], overlayVal = overlay[key];
+    overlayVal !== void 0 && (key === "style" ? base.style = baseVal && overlayVal ? __spreadValues(__spreadValues({}, baseVal), overlayVal) : overlayVal || baseVal : key === "className" ? base.className = baseVal && overlayVal ? `${baseVal} ${overlayVal}` : overlayVal || baseVal : key === "ref" ? base.ref = baseVal && overlayVal ? composeRefs(baseVal, overlayVal) : overlayVal || baseVal : isEventHandler.test(key) && typeof baseVal == "function" && typeof overlayVal == "function" ? base[key] = composeEventHandlers(baseVal, overlayVal) : base[key] = overlayVal);
+  }
+  return base;
+}
+function mergeRenderElementProps(elementProps, viewProps, children) {
+  var merged = mergeSlotStyleProps(__spreadValues({}, elementProps), viewProps);
+  return merged.children = children, merged;
+}
 function usePointerEvents(props, viewProps) {
   var {
     onPointerDown,
@@ -3251,17 +3555,41 @@ function usePointerEvents(props, viewProps) {
     }));
   }
 }
-var isEventHandler = /^on[A-Z]/;
-function mergeSlotStyleProps(base, overlay) {
-  for (var key in overlay) {
-    var baseVal = base[key], overlayVal = overlay[key];
-    overlayVal !== void 0 && (key === "style" ? base.style = baseVal && overlayVal ? __spreadValues(__spreadValues({}, baseVal), overlayVal) : overlayVal || baseVal : key === "className" ? base.className = baseVal && overlayVal ? `${baseVal} ${overlayVal}` : overlayVal || baseVal : key === "ref" ? base.ref = baseVal && overlayVal ? composeRefs(baseVal, overlayVal) : overlayVal || baseVal : isEventHandler.test(key) && typeof baseVal == "function" && typeof overlayVal == "function" ? base[key] = composeEventHandlers(baseVal, overlayVal) : base[key] = overlayVal);
+function resolveEffectivePseudoTransition(prev, next, pseudoTransitions, baseTransition) {
+  if (!pseudoTransitions) return baseTransition;
+  var prevState = prev || {
+    hover: false,
+    press: false,
+    focus: false,
+    groups: {}
+  };
+  if (next.press && !prevState.press && pseudoTransitions.pressStyle) return pseudoTransitions.pressStyle;
+  if (next.hover && !prevState.hover && pseudoTransitions.hoverStyle) return pseudoTransitions.hoverStyle;
+  if (next.focus && !prevState.focus && pseudoTransitions.focusStyle) return pseudoTransitions.focusStyle;
+  for (var key in pseudoTransitions) if (key.startsWith("$group-")) {
+    var _next_group_groupName, _next_group, _prevState_groups, match = key.match(/^\$group-(.+)-(hover|press|focus)$/);
+    if (!match) continue;
+    var groupName = match[1], pseudoType = match[2], nextGroupPseudo = (_next_group = next.group) === null || _next_group === void 0 || (_next_group_groupName = _next_group[groupName]) === null || _next_group_groupName === void 0 ? void 0 : _next_group_groupName.pseudo, prevGroupPseudo = (_prevState_groups = prevState.groups) === null || _prevState_groups === void 0 ? void 0 : _prevState_groups[groupName];
+    if ((nextGroupPseudo == null ? void 0 : nextGroupPseudo[pseudoType]) && !(prevGroupPseudo == null ? void 0 : prevGroupPseudo[pseudoType])) return pseudoTransitions[key];
   }
-  return base;
-}
-function mergeRenderElementProps(elementProps, viewProps, children) {
-  var merged = mergeSlotStyleProps(__spreadValues({}, elementProps), viewProps);
-  return merged.children = children, merged;
+  return baseTransition;
+}
+function extractPseudoState(state2) {
+  var groups = {};
+  if (state2.group) for (var groupName in state2.group) {
+    var _state_group_groupName, pseudo = (_state_group_groupName = state2.group[groupName]) === null || _state_group_groupName === void 0 ? void 0 : _state_group_groupName.pseudo;
+    pseudo && (groups[groupName] = {
+      hover: pseudo.hover,
+      press: pseudo.press,
+      focus: pseudo.focus
+    });
+  }
+  return {
+    hover: state2.hover,
+    press: state2.press,
+    focus: state2.focus,
+    groups
+  };
 }
 function setElementProps(element) {
   element && !element.getBoundingClientRect && (element.getBoundingClientRect = function() {
@@ -3360,6 +3688,7 @@ var subscribeToContextGroup = function(props) {
   };
 };
 var Theme = /* @__PURE__ */ React.forwardRef(function(props, ref) {
+  "use no memo";
   if (props.disable) return props.children;
   var {
     passThrough
@@ -3384,7 +3713,7 @@ function getThemedChildren(themeState, children, props) {
   var isRoot = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : false, stateRef = arguments.length > 4 ? arguments[4] : void 0, passThrough = arguments.length > 5 && arguments[5] !== void 0 ? arguments[5] : false, {
     shallow,
     forceClassName
-  } = props, state = stateRef.current, hasEverThemed = state.hasEverThemed, shouldRenderChildrenWithTheme = hasEverThemed || themeState.isNew || isRoot || hasThemeUpdatingProps(props);
+  } = props, state2 = stateRef.current, hasEverThemed = state2.hasEverThemed, shouldRenderChildrenWithTheme = hasEverThemed || themeState.isNew || isRoot || hasThemeUpdatingProps(props);
   if (!shouldRenderChildrenWithTheme) return children;
   children = /* @__PURE__ */ jsxRuntime.jsx(ThemeStateContext.Provider, {
     value: themeState.id,
@@ -3394,9 +3723,9 @@ function getThemedChildren(themeState, children, props) {
     isInverse,
     name
   } = themeState, requiresExtraWrapper = isInverse || forceClassName;
-  if (state.hasEverThemed || (state.hasEverThemed = true), (requiresExtraWrapper || // if the theme is exactly dark or light, its likely to change between dark/light
+  if (state2.hasEverThemed || (state2.hasEverThemed = true), (requiresExtraWrapper || // if the theme is exactly dark or light, its likely to change between dark/light
   // and that would require wrapping which would re-parent, so to avoid re-parenting do this
-  themeState.name === "dark" || themeState.name === "light") && (state.hasEverThemed = "wrapped"), shallow && themeState.parentId) {
+  themeState.name === "dark" || themeState.name === "light") && (state2.hasEverThemed = "wrapped"), shallow && themeState.parentId) {
     var parentState = getThemeState(themeState.isNew ? themeState.id : themeState.parentId);
     if (!parentState) throw new Error("‼️010");
     children = React.Children.toArray(children).map(function(child) {
@@ -3411,6 +3740,7 @@ function getThemedChildren(themeState, children, props) {
 }
 function themeable(Component, staticConfig) {
   var optimize = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : false, withThemeComponent = /* @__PURE__ */ React.forwardRef(function(props, ref) {
+    "use no memo";
     var userDefaults = getDefaultProps(staticConfig, props.componentName), defaultTheme = userDefaults == null ? void 0 : userDefaults.theme, defaultResetTheme = userDefaults == null ? void 0 : userDefaults.themeReset, _a = props, {
       theme,
       componentName,
@@ -3422,7 +3752,7 @@ function themeable(Component, staticConfig) {
     ]), overriddenContextProps, context = staticConfig == null ? void 0 : staticConfig.context;
     if (context) for (var key in context.props) {
       var val = props[key];
-      val !== void 0 && (overriddenContextProps || (overriddenContextProps = {}), overriddenContextProps[key] = val);
+      val !== void 0 && (overriddenContextProps = overriddenContextProps || {}, overriddenContextProps[key] = val);
     }
     var element = (
       // @ts-expect-error its ok
@@ -3432,7 +3762,7 @@ function themeable(Component, staticConfig) {
         "data-disable-theme": true
       }))
     ), filteredProps = null, compName = componentName || (staticConfig == null ? void 0 : staticConfig.componentName);
-    if (compName && (filteredProps || (filteredProps = {}), filteredProps.componentName = compName), "debug" in props && (filteredProps || (filteredProps = {}), filteredProps.debug = props.debug), ("theme" in props || defaultTheme) && (filteredProps || (filteredProps = {}), filteredProps.name = "theme" in props ? props.theme : defaultTheme), ("themeReset" in props || defaultResetTheme) && (filteredProps || (filteredProps = {}), filteredProps.reset = "themeReset" in props ? themeReset : defaultResetTheme), optimize && !filteredProps) return element;
+    if (compName && (filteredProps = filteredProps || {}, filteredProps.componentName = compName), "debug" in props && (filteredProps = filteredProps || {}, filteredProps.debug = props.debug), ("theme" in props || defaultTheme) && (filteredProps = filteredProps || {}, filteredProps.name = "theme" in props ? props.theme : defaultTheme), ("themeReset" in props || defaultResetTheme) && (filteredProps = filteredProps || {}, filteredProps.reset = "themeReset" in props ? themeReset : defaultResetTheme), optimize && !filteredProps) return element;
     var contents = /* @__PURE__ */ jsxRuntime.jsx(Theme, __spreadProps(__spreadValues({
       "disable-child-theme": true
     }, filteredProps), {
@@ -3448,8 +3778,6 @@ function themeable(Component, staticConfig) {
   }), withTheme = withThemeComponent;
   return withTheme.displayName = `Themed(${(Component == null ? void 0 : Component.displayName) || (Component == null ? void 0 : Component.name) || "Anonymous"})`, withTheme;
 }
-function getStyleTags(styles) {
-}
 var ClientOnlyContext = /* @__PURE__ */ React.createContext(false), ClientOnly = function(param) {
   var {
     children,
@@ -3476,6 +3804,7 @@ function _type_of$2(obj) {
   return obj && typeof Symbol < "u" && obj.constructor === Symbol ? "symbol" : typeof obj;
 }
 var useComponentState = function(props, animationDriver, staticConfig, config) {
+  "use no memo";
   var _animationDriver_usePresence, isHydrated = useDidFinishSSR(), needsHydration = !useIsClientOnly(), useAnimations = (animationDriver == null ? void 0 : animationDriver.isStub) ? void 0 : animationDriver == null ? void 0 : animationDriver.useAnimations, {
     isHOC
   } = staticConfig, stateRef = React.useRef(
@@ -3485,7 +3814,7 @@ var useComponentState = function(props, animationDriver, staticConfig, config) {
   stateRef.current || (stateRef.current = {
     startedUnhydrated: needsHydration && !isHydrated
   });
-  var hasAnimationProp = !!(!isHOC && "transition" in props || props.style && hasAnimatedStyleValue(props.style)), _animationDriver_inputStyle, inputStyle = (_animationDriver_inputStyle = animationDriver == null ? void 0 : animationDriver.inputStyle) !== null && _animationDriver_inputStyle !== void 0 ? _animationDriver_inputStyle : (animationDriver == null ? void 0 : animationDriver.supportsCSS) ? "css" : "inline", supportsCSS = inputStyle === "css", curStateRef = stateRef.current;
+  var hasAnimationProp = !!(!isHOC && "transition" in props || props.style && hasAnimatedStyleValue(props.style)), _animationDriver_inputStyle, inputStyle = (_animationDriver_inputStyle = animationDriver == null ? void 0 : animationDriver.inputStyle) !== null && _animationDriver_inputStyle !== void 0 ? _animationDriver_inputStyle : "css", _animationDriver_outputStyle, outputStyle = (_animationDriver_outputStyle = animationDriver == null ? void 0 : animationDriver.outputStyle) !== null && _animationDriver_outputStyle !== void 0 ? _animationDriver_outputStyle : "css", curStateRef = stateRef.current;
   !needsHydration && hasAnimationProp && (curStateRef.hasAnimated = true);
   var willBeAnimatedClient = (function() {
     var next = !!(hasAnimationProp && !isHOC && useAnimations);
@@ -3505,11 +3834,11 @@ var useComponentState = function(props, animationDriver, staticConfig, config) {
     canImmediatelyEnter ? defaultComponentStateShouldEnter : defaultComponentState
   ) : defaultComponentStateMounted, disabled = isDisabled(props);
   disabled != null && (initialState.disabled = disabled);
-  var states2 = React.useState(initialState), state = props.forceStyle ? __spreadProps(__spreadValues({}, states2[0]), {
+  var states2 = React.useState(initialState), state2 = props.forceStyle ? __spreadProps(__spreadValues({}, states2[0]), {
     [props.forceStyle]: true
   }) : states2[0], setState = states2[1], isAnimated = willBeAnimated;
-  disabled !== state.disabled && (disabled && Object.assign(state, defaultComponentStateMounted), state.disabled = disabled, setState(function(_2) {
-    return __spreadValues({}, state);
+  disabled !== state2.disabled && (disabled && Object.assign(state2, defaultComponentStateMounted), state2.disabled = disabled, setState(function(_2) {
+    return __spreadValues({}, state2);
   }));
   var groupName = props.group, setStateShallow = useCreateShallowSetState(setState, props.debug);
   if (presenceState && isAnimated && isHydrated && staticConfig.variants) {
@@ -3521,7 +3850,7 @@ var useComponentState = function(props, animationDriver, staticConfig, config) {
     } = presenceState;
     isObj(custom) && Object.assign(props, custom);
     var exv = exitVariant != null ? exitVariant : enterExitVariant, env = enterVariant != null ? enterVariant : enterExitVariant;
-    state.unmounted && env && staticConfig.variants[env] ? props[env] = true : isExiting && exv && (props[exv] = exitVariant !== enterExitVariant);
+    state2.unmounted && env && staticConfig.variants[env] ? props[env] = true : isExiting && exv && (props[exv] = exitVariant !== enterExitVariant);
   }
   var noClass = !isWeb;
   return {
@@ -3539,9 +3868,10 @@ var useComponentState = function(props, animationDriver, staticConfig, config) {
     setState,
     setStateShallow,
     noClass,
-    state,
+    state: state2,
     stateRef,
-    supportsCSS,
+    inputStyle,
+    outputStyle,
     willBeAnimated,
     willBeAnimatedClient
   };
@@ -3604,8 +3934,9 @@ function createComponent(staticConfig) {
     isText,
     isHOC
   } = staticConfig, component = /* @__PURE__ */ React.forwardRef(function(propsIn, forwardedRef) {
+    "use no memo";
     var _hooks_usePropsTransform;
-    config || (config = getConfig());
+    config = config || getConfig();
     if (!hasSetupBaseViews) {
       var _hooks_getBaseViews;
       hasSetupBaseViews = true;
@@ -3613,25 +3944,25 @@ function createComponent(staticConfig) {
       baseViews && (BaseText = baseViews.Text, BaseView = baseViews.View);
     }
     if (propsIn["data-test-renders"]) {
-      var _propsIn_datatestrenders, _current, _2;
-      (_2 = (_propsIn_datatestrenders = propsIn["data-test-renders"])[_current = "current"]) !== null && _2 !== void 0 || (_propsIn_datatestrenders[_current] = 0), propsIn["data-test-renders"].current += 1;
+      var _propsIn_datatestrenders_current;
+      propsIn["data-test-renders"].current = (_propsIn_datatestrenders_current = propsIn["data-test-renders"].current) !== null && _propsIn_datatestrenders_current !== void 0 ? _propsIn_datatestrenders_current : 0, propsIn["data-test-renders"].current += 1;
     }
     var {
       context,
       isReactNative
-    } = staticConfig, debugProp = propsIn.debug, styledContextValue = context ? React.useContext(context) : void 0, overriddenContextProps = null, componentContext = React.useContext(ComponentContext);
+    } = staticConfig, debugProp = propsIn.debug, styledContextValue = context ? React.useContext(context) : void 0, overriddenContextProps = null, componentContext = React.useContext(ComponentContext), isInsideNativeMenu = React.useContext(NativeMenuContext);
     var props = propsIn, componentName = props.componentName || staticConfig.componentName, defaultProps = getDefaultProps(staticConfig, props.componentName), [nextProps, overrides] = mergeComponentProps(defaultProps, styledContextValue, propsIn);
     props = nextProps, overriddenContextProps = overrides;
     var groupContextParent = React.useContext(GroupContext), animationDriver = (function() {
-      if (props.animatedBy && (config == null ? void 0 : config.animations)) {
-        var animations2 = config.animations;
-        if ("default" in animations2) {
-          var _animations_props_animatedBy;
-          return (_animations_props_animatedBy = animations2[props.animatedBy]) !== null && _animations_props_animatedBy !== void 0 ? _animations_props_animatedBy : animations2.default;
+      if (props.animatedBy && config) {
+        if (config.animationDrivers) {
+          var _config_animationDrivers_props_animatedBy;
+          return (_config_animationDrivers_props_animatedBy = config.animationDrivers[props.animatedBy]) !== null && _config_animationDrivers_props_animatedBy !== void 0 ? _config_animationDrivers_props_animatedBy : config.animations;
         }
-        return props.animatedBy === "default" ? animations2 : null;
+        return props.animatedBy === "default" ? config.animations : null;
       }
-      return componentContext.animationDriver;
+      var _resolveAnimationDriver, _ref;
+      return (_ref = (_resolveAnimationDriver = resolveAnimationDriver(componentContext.animationDriver)) !== null && _resolveAnimationDriver !== void 0 ? _resolveAnimationDriver : resolveAnimationDriver(config == null ? void 0 : config.animations)) !== null && _ref !== void 0 ? _ref : null;
     })(), useAnimations = animationDriver == null ? void 0 : animationDriver.useAnimations, componentState = useComponentState(props, (animationDriver == null ? void 0 : animationDriver.isStub) ? null : animationDriver, staticConfig), {
       disabled,
       groupName,
@@ -3644,9 +3975,10 @@ function createComponent(staticConfig) {
       presenceState,
       setState,
       noClass,
-      state,
+      state: state2,
       stateRef,
-      supportsCSS,
+      inputStyle,
+      outputStyle,
       willBeAnimated,
       willBeAnimatedClient,
       startedUnhydrated
@@ -3661,9 +3993,9 @@ function createComponent(staticConfig) {
       var listeners2 = /* @__PURE__ */ new Set();
       return (_stateRef_current_group = stateRef.current.group) === null || _stateRef_current_group === void 0 || (_stateRef_current_group_listeners = _stateRef_current_group.listeners) === null || _stateRef_current_group_listeners === void 0 || _stateRef_current_group_listeners.clear(), stateRef.current.group = {
         listeners: listeners2,
-        emit(state2) {
+        emit(state22) {
           listeners2.forEach(function(l) {
-            return l(state2);
+            return l(state22);
           });
         },
         subscribe(cb) {
@@ -3689,12 +4021,8 @@ function createComponent(staticConfig) {
         }
       });
     }, [stateRef, groupName, groupContextParent]), setStateShallow = componentState.setStateShallow;
-    var isTaggable = !Component || typeof Component == "string", renderProp = props.render, element = Component, BaseTextComponent = BaseText || element || "span", BaseViewComponent = BaseView || element || "div", elementType = isText ? BaseTextComponent : BaseViewComponent;
-    animationDriver && isAnimated && // this should really be behind another prop as it's not really related to
-    // "needsWebStyles" basically with motion we just animate a plain div, but
-    // we still have animated.View/Text for Sheet which wants to control
-    // things declaratively
-    !animationDriver.needsWebStyles && (elementType = animationDriver[isText ? "Text" : "View"] || elementType);
+    var renderProp = props.render, element = Component, BaseTextComponent = BaseText || element || "span", BaseViewComponent = BaseView || element || "div", BaseComponent = isText ? BaseTextComponent : BaseViewComponent, elementType = BaseComponent, isAnimatedCustomComponent = animationDriver && isAnimated && animationDriver.needsCustomComponent;
+    isAnimatedCustomComponent && (elementType = animationDriver[isText ? "Text" : "View"] || elementType);
     var disableTheme = isHOC;
     var themeStateProps = {
       componentName,
@@ -3712,7 +4040,7 @@ function createComponent(staticConfig) {
     setDidGetVariableValue(false);
     var resolveValues = (
       // if HOC + mounted + has animation prop, resolve as value so it passes non-variable to child
-      isAnimated && !supportsCSS || isHOC && state.unmounted == false && hasAnimationProp ? "value" : "auto"
+      isAnimated && inputStyle !== "css" || isHOC && state2.unmounted == false && hasAnimationProp ? "value" : "auto"
     ), styleProps = {
       mediaState,
       noClass,
@@ -3722,11 +4050,11 @@ function createComponent(staticConfig) {
       willBeAnimated,
       styledContext: styledContextValue
     }, themeName = (themeState == null ? void 0 : themeState.name) || "";
-    var splitStyles = useSplitStyles(props, staticConfig, theme, themeName, state, styleProps, null, componentContext, allGroupContexts, elementType, startedUnhydrated, debugProp), isPassthrough = !splitStyles, contextForOverride = staticConfig.context;
+    var splitStyles = useSplitStyles(props, staticConfig, theme, themeName, state2, styleProps, null, componentContext, allGroupContexts, elementType, startedUnhydrated, debugProp, animationDriver), isPassthrough = !splitStyles, contextForOverride = staticConfig.context;
     if (splitStyles == null ? void 0 : splitStyles.overriddenContextProps) {
       var _staticConfig_parentStaticConfig, contextForProps = staticConfig.context || ((_staticConfig_parentStaticConfig = staticConfig.parentStaticConfig) === null || _staticConfig_parentStaticConfig === void 0 ? void 0 : _staticConfig_parentStaticConfig.context);
       if (contextForProps) {
-        for (var key in splitStyles.overriddenContextProps) overriddenContextProps || (overriddenContextProps = {}), overriddenContextProps[key] = splitStyles.overriddenContextProps[key];
+        for (var key in splitStyles.overriddenContextProps) overriddenContextProps = overriddenContextProps || {}, overriddenContextProps[key] = splitStyles.overriddenContextProps[key];
         staticConfig.context || (contextForOverride = contextForProps);
       }
     }
@@ -3742,7 +4070,8 @@ function createComponent(staticConfig) {
         });
       }
     }
-    if (!isPassthrough && (hasAnimationProp || groupName) && (animationDriver == null ? void 0 : animationDriver.avoidReRenders)) {
+    var hasEnterExitTransition = props.transition && _type_of$1(props.transition) === "object" && !Array.isArray(props.transition) && ("enter" in props.transition || "exit" in props.transition);
+    if (!isPassthrough && (hasAnimationProp || groupName) && (animationDriver == null ? void 0 : animationDriver.avoidReRenders) && !hasEnterExitTransition) {
       let updateGroupListeners2 = function() {
         var updatedState = stateRef.current.nextState;
         if (groupContext) {
@@ -3760,7 +4089,7 @@ function createComponent(staticConfig) {
           notifyGroupSubscribers(groupContext, stateRef.current.group || null, childrenGroupState);
         }
       };
-      var _componentContext, _componentContext1, ogSetStateShallow = setStateShallow;
+      var ogSetStateShallow = setStateShallow;
       if (stateRef.current.updateStyleListener = function() {
         var useStyleListener = stateRef.current.useStyleListener;
         if (!useStyleListener) {
@@ -3768,11 +4097,11 @@ function createComponent(staticConfig) {
           pendingState && (stateRef.current.nextState = void 0, ogSetStateShallow(pendingState));
           return;
         }
-        var updatedState = stateRef.current.nextState || state, mediaState2 = stateRef.current.nextMedia, nextStyles = getSplitStyles(props, staticConfig, theme, themeName, updatedState, mediaState2 ? __spreadProps(__spreadValues({}, styleProps), {
+        var updatedState = stateRef.current.nextState || state2, mediaState2 = stateRef.current.nextMedia, nextStyles = getSplitStyles(props, staticConfig, theme, themeName, updatedState, mediaState2 ? __spreadProps(__spreadValues({}, styleProps), {
           mediaState: mediaState2
-        }) : styleProps, null, componentContext, allGroupContexts, elementType, startedUnhydrated, debugProp);
-        useStyleListener((nextStyles == null ? void 0 : nextStyles.style) || {});
-      }, (_componentContext = componentContext).mediaEmitListeners || (_componentContext.mediaEmitListeners = /* @__PURE__ */ new Set()), !stateRef.current.mediaEmitCleanup) {
+        }) : styleProps, null, componentContext, allGroupContexts, elementType, startedUnhydrated, debugProp, animationDriver), effectiveTransition2 = resolveEffectivePseudoTransition(stateRef.current.prevPseudoState, updatedState, nextStyles == null ? void 0 : nextStyles.pseudoTransitions, props.transition);
+        stateRef.current.prevPseudoState = extractPseudoState(updatedState), useStyleListener((nextStyles == null ? void 0 : nextStyles.style) || {}, effectiveTransition2);
+      }, componentContext.mediaEmitListeners = componentContext.mediaEmitListeners || /* @__PURE__ */ new Set(), !stateRef.current.mediaEmitCleanup) {
         var updateListener = function(next) {
           var _stateRef_current_updateStyleListener, _stateRef_current;
           stateRef.current.nextMedia = next, (_stateRef_current_updateStyleListener = (_stateRef_current = stateRef.current).updateStyleListener) === null || _stateRef_current_updateStyleListener === void 0 || _stateRef_current_updateStyleListener.call(_stateRef_current);
@@ -3782,7 +4111,7 @@ function createComponent(staticConfig) {
           (_componentContext_mediaEmitListeners = componentContext.mediaEmitListeners) === null || _componentContext_mediaEmitListeners === void 0 || _componentContext_mediaEmitListeners.delete(updateListener);
         };
       }
-      (_componentContext1 = componentContext).mediaEmit || (_componentContext1.mediaEmit = function(next) {
+      componentContext.mediaEmit = componentContext.mediaEmit || function(next) {
         var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
         try {
           for (var _iterator = componentContext.mediaEmitListeners[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
@@ -3798,8 +4127,8 @@ function createComponent(staticConfig) {
             if (_didIteratorError) throw _iteratorError;
           }
         }
-      }), stateRef.current.setStateShallow = function(nextOrGetNext) {
-        var prev = stateRef.current.nextState || state, next = typeof nextOrGetNext == "function" ? nextOrGetNext(prev) : nextOrGetNext;
+      }, stateRef.current.setStateShallow = function(nextOrGetNext) {
+        var prev = stateRef.current.nextState || state2, next = typeof nextOrGetNext == "function" ? nextOrGetNext(prev) : nextOrGetNext;
         if (!(next === prev || isEqualShallow(prev, next))) {
           var canAvoidReRender = Object.keys(next).every(function(key3) {
             return avoidReRenderKeys.has(key3);
@@ -3809,18 +4138,12 @@ function createComponent(staticConfig) {
             updateGroupListeners2(), (_stateRef_current_updateStyleListener = (_stateRef_current = stateRef.current).updateStyleListener) === null || _stateRef_current_updateStyleListener === void 0 || _stateRef_current_updateStyleListener.call(_stateRef_current);
           } else ogSetStateShallow(next);
         }
-      }, setStateShallow = function(state2) {
+      }, setStateShallow = function(state22) {
         var _stateRef_current_setStateShallow, _stateRef_current;
-        (_stateRef_current_setStateShallow = (_stateRef_current = stateRef.current).setStateShallow) === null || _stateRef_current_setStateShallow === void 0 || _stateRef_current_setStateShallow.call(_stateRef_current, state2);
+        (_stateRef_current_setStateShallow = (_stateRef_current = stateRef.current).setStateShallow) === null || _stateRef_current_setStateShallow === void 0 || _stateRef_current_setStateShallow.call(_stateRef_current, state22);
       };
     }
-    if (splitStyles) {
-      if (props.group && props.untilMeasured === "hide" && !stateRef.current.hasMeasured) {
-        var _splitStyles;
-        (_splitStyles = splitStyles).style || (_splitStyles.style = {}), splitStyles.style.opacity = 0;
-      }
-      splitStyles.dynamicThemeAccess != null && (stateRef.current.isListeningToTheme = splitStyles.dynamicThemeAccess);
-    }
+    splitStyles && (props.group && props.untilMeasured === "hide" && !stateRef.current.hasMeasured && (splitStyles.style = splitStyles.style || {}, splitStyles.style.opacity = 0), splitStyles.dynamicThemeAccess != null && (stateRef.current.isListeningToTheme = splitStyles.dynamicThemeAccess));
     var hasRuntimeMediaKeys = (splitStyles == null ? void 0 : splitStyles.hasMedia) && splitStyles.hasMedia !== true, shouldListenForMedia = didGetVariableValue() || hasRuntimeMediaKeys || noClass && (splitStyles == null ? void 0 : splitStyles.hasMedia) === true, mediaListeningKeys = hasRuntimeMediaKeys ? splitStyles.hasMedia : null;
     setMediaShouldUpdate(componentContext, shouldListenForMedia, mediaListeningKeys);
     var {
@@ -3877,23 +4200,26 @@ function createComponent(staticConfig) {
       "onClick",
       "theme"
     ]), viewProps = nonTamaguiProps;
-    !isTaggable && props.forceStyle && (viewProps.forceStyle = props.forceStyle), isHOC && (typeof _themeProp < "u" && (viewProps.theme = _themeProp), typeof passThrough < "u" && (viewProps.passThrough = passThrough)), renderProp && elementType.acceptTagProp && (viewProps.render = renderProp);
+    props.forceStyle && (viewProps.forceStyle = props.forceStyle), isHOC && (typeof _themeProp < "u" && (viewProps.theme = _themeProp), typeof passThrough < "u" && (viewProps.passThrough = passThrough));
     var animationStyles, shouldUseAnimation = (
       // if it supports css vars we run it on server too to get matching initial style
-      (supportsCSS ? willBeAnimatedClient : willBeAnimated) && useAnimations && !isHOC
+      (inputStyle === "css" ? willBeAnimatedClient : willBeAnimated) && useAnimations && !isHOC
     ), animatedRef;
     if (shouldUseAnimation) {
       var useStyleEmitter = (animationDriver == null ? void 0 : animationDriver.avoidReRenders) ? function(listener) {
         stateRef.current.useStyleListener = listener;
-      } : void 0, animations = useAnimations({
+      } : void 0, effectiveTransition = resolveEffectivePseudoTransition(stateRef.current.prevPseudoState, state2, splitStyles == null ? void 0 : splitStyles.pseudoTransitions, props.transition);
+      splitStyles && (splitStyles.effectiveTransition = effectiveTransition), stateRef.current.prevPseudoState = extractPseudoState(state2);
+      var animations = useAnimations({
         props: propsWithAnimation,
-        // if hydrating, send empty style
-        style: splitStylesStyle || {},
+        // clone style to prevent animation driver mutations from leaking to viewProps
+        // during SSR/pre-hydration (CSS driver mutates style.transition in place)
+        style: isHydrated ? splitStylesStyle || {} : __spreadValues({}, splitStylesStyle),
         // @ts-ignore
         styleState: splitStyles,
         useStyleEmitter,
         presence,
-        componentState: state,
+        componentState: state2,
         styleProps,
         theme,
         themeName,
@@ -3901,7 +4227,7 @@ function createComponent(staticConfig) {
         staticConfig,
         stateRef
       });
-      animations && (animations.ref && (animatedRef = animations.ref), isHydrated && animations && (animationStyles = animations.style, viewProps.style = animationStyles, animations.className && (viewProps.className = `${state.unmounted === "should-enter" ? "t_unmounted " : ""}${viewProps.className || ""} ${animations.className}`)));
+      animations && (animations.ref && (animatedRef = animations.ref), isHydrated && animations && (animationStyles = animations.style, viewProps.style = animationStyles, animations.className && (viewProps.className = `${state2.unmounted === "should-enter" ? "t_unmounted " : ""}${viewProps.className || ""} ${animations.className}`)));
     }
     !isPassthrough && groupContext && // avoids onLayout if we don't need it
     props.containerType !== "normal" && (nonTamaguiProps.onLayout = composeEventHandlers(nonTamaguiProps.onLayout, function(e) {
@@ -3921,14 +4247,14 @@ function createComponent(staticConfig) {
       });
     };
     useIsomorphicLayoutEffect(function() {
-      if (state.unmounted === true && hasEnterStyle) {
+      if (state2.unmounted === true && hasEnterStyle) {
         setStateShallow({
           unmounted: "should-enter"
         });
         return;
       }
-      if (state.unmounted) {
-        if (supportsCSS) {
+      if (state2.unmounted) {
+        if (inputStyle === "css") {
           var cancelled = false;
           return requestAnimationFrame(function() {
             cancelled || requestAnimationFrame(function() {
@@ -3948,7 +4274,7 @@ function createComponent(staticConfig) {
         var _stateRef_current_mediaEmitCleanup, _stateRef_current;
         componentSetStates.delete(setState), (_stateRef_current_mediaEmitCleanup = (_stateRef_current = stateRef.current).mediaEmitCleanup) === null || _stateRef_current_mediaEmitCleanup === void 0 || _stateRef_current_mediaEmitCleanup.call(_stateRef_current);
       };
-    }, [state.unmounted, supportsCSS]), useIsomorphicLayoutEffect(function() {
+    }, [state2.unmounted, inputStyle]), useIsomorphicLayoutEffect(function() {
       if (!disabled && !(!pseudoGroups && !mediaGroups) && allGroupContexts) return subscribeToContextGroup({
         groupContext: allGroupContexts,
         setStateShallow,
@@ -3958,9 +4284,9 @@ function createComponent(staticConfig) {
     }, [allGroupContexts, disabled, pseudoGroups ? objectIdentityKey(pseudoGroups) : 0, mediaGroups ? objectIdentityKey(mediaGroups) : 0]);
     var groupEmitter = stateRef.current.group;
     useIsomorphicLayoutEffect(function() {
-      !groupContext || !groupEmitter || notifyGroupSubscribers(groupContext, groupEmitter, state);
-    }, [groupContext, groupEmitter, state]);
-    var runtimePressStyle = !disabled && noClass && (pseudos == null ? void 0 : pseudos.pressStyle), runtimeFocusStyle = !disabled && noClass && (pseudos == null ? void 0 : pseudos.focusStyle), runtimeFocusVisibleStyle = !disabled && noClass && (pseudos == null ? void 0 : pseudos.focusVisibleStyle), attachFocus = !!(runtimePressStyle || runtimeFocusStyle || runtimeFocusVisibleStyle || onFocus || onBlur || componentContext.setParentFocusState), hasDynamicGroupChildren = !!(groupName && state.hasDynGroupChildren), attachPress = !!(hasDynamicGroupChildren || runtimePressStyle || onPress || onPressOut || onPressIn || onMouseDown || onMouseUp || onLongPress || onClick || (pseudos == null ? void 0 : pseudos.focusVisibleStyle)), runtimeHoverStyle = !disabled && noClass && (pseudos == null ? void 0 : pseudos.hoverStyle), needsHoverState = !!(hasDynamicGroupChildren || runtimeHoverStyle), attachHover = isWeb, shouldAttach = !disabled && !props.asChild && !!(attachFocus || attachPress || attachHover || runtimePressStyle || runtimeHoverStyle || runtimeFocusStyle), needsPressState = !!(hasDynamicGroupChildren || runtimePressStyle);
+      !groupContext || !groupEmitter || notifyGroupSubscribers(groupContext, groupEmitter, state2);
+    }, [groupContext, groupEmitter, state2]);
+    var runtimePressStyle = !disabled && noClass && (pseudos == null ? void 0 : pseudos.pressStyle), runtimeFocusStyle = !disabled && noClass && (pseudos == null ? void 0 : pseudos.focusStyle), runtimeFocusVisibleStyle = !disabled && noClass && (pseudos == null ? void 0 : pseudos.focusVisibleStyle), attachFocus = !!(runtimePressStyle || runtimeFocusStyle || runtimeFocusVisibleStyle || onFocus || onBlur || componentContext.setParentFocusState), hasDynamicGroupChildren = !!(groupName && state2.hasDynGroupChildren), attachPress = !!(hasDynamicGroupChildren || runtimePressStyle || onPress || onPressOut || onPressIn || onMouseDown || onMouseUp || onLongPress || onClick || (pseudos == null ? void 0 : pseudos.focusVisibleStyle)), runtimeHoverStyle = !disabled && noClass && (pseudos == null ? void 0 : pseudos.hoverStyle), needsHoverState = !!(hasDynamicGroupChildren || runtimeHoverStyle), attachHover = isWeb, shouldAttach = !disabled && !props.asChild && !!(attachFocus || attachPress || attachHover || runtimePressStyle || runtimeHoverStyle || runtimeFocusStyle), needsPressState = !!(hasDynamicGroupChildren || runtimePressStyle);
     var events = shouldAttach ? __spreadValues(__spreadValues(__spreadProps(__spreadValues({
       onPressOut: attachPress ? function(e) {
         unPress(), onPressOut == null ? void 0 : onPressOut(e), onMouseUp == null ? void 0 : onMouseUp(e);
@@ -3968,7 +4294,7 @@ function createComponent(staticConfig) {
     }, attachPress && {
       onMouseEnter: function(e) {
         var next = {};
-        needsHoverState && true && (next.hover = true), needsPressState && state.pressIn && (next.press = true), setStateShallow(next), onHoverIn == null ? void 0 : onHoverIn(e), onMouseEnter == null ? void 0 : onMouseEnter(e);
+        needsHoverState && true && (next.hover = true), needsPressState && state2.pressIn && (next.press = true), setStateShallow(next), onHoverIn == null ? void 0 : onHoverIn(e), onMouseEnter == null ? void 0 : onMouseEnter(e);
       },
       onMouseLeave: function(e) {
         var next = {};
@@ -3991,7 +4317,9 @@ function createComponent(staticConfig) {
     }), attachFocus && {
       onFocus: function(e) {
         var next = {};
-        componentContext.setParentFocusState && (next.focusWithin = true), (pseudos == null ? void 0 : pseudos.focusVisibleStyle) && lastInteractionWasKeyboard.value ? next.focusVisible = true : next.focus = true, setStateShallow(next), onFocus == null ? void 0 : onFocus(e);
+        componentContext.setParentFocusState && (componentContext.setParentFocusState({
+          focusWithin: true
+        }), next.focusWithin = true), (pseudos == null ? void 0 : pseudos.focusVisibleStyle) && lastInteractionWasKeyboard.value ? next.focusVisible = true : next.focus = true, setStateShallow(next), onFocus == null ? void 0 : onFocus(e);
       },
       onBlur: function(e) {
         componentContext.setParentFocusState && componentContext.setParentFocusState({
@@ -4016,29 +4344,27 @@ function createComponent(staticConfig) {
         minPressDuration: 0
       });
     }
-    var pressGesture = useEvents(events, viewProps, stateRef, staticConfig, isHOC);
-    var content = children;
+    var pressGesture = useEvents(events, viewProps, stateRef, staticConfig, isHOC, isInsideNativeMenu);
     if (asChild) if (elementType = Slot, 0) ;
     else Object.assign(viewProps, {
       onPress,
       onLongPress
     });
-    isPassthrough && (content = propsIn.children, elementType = BaseViewComponent, viewProps = {
+    var content;
+    if (isPassthrough) content = /* @__PURE__ */ React.createElement(BaseComponent, {
       style: {
         display: "contents"
       }
-    });
-    var useChildrenResult;
-    if (hooks.useChildren && (useChildrenResult = hooks.useChildren(elementType, content, viewProps)), useChildrenResult) content = useChildrenResult;
-    else if (typeof renderProp == "function") {
-      var renderProps = __spreadProps(__spreadValues({}, viewProps), {
-        children: content
-      });
-      content = renderProp(renderProps, state);
-    } else if (renderProp && (typeof renderProp > "u" ? "undefined" : _type_of$1(renderProp)) === "object" && /* @__PURE__ */ React.isValidElement(renderProp)) {
-      var elementProps = renderProp.props || {}, mergedProps = mergeRenderElementProps(elementProps, viewProps, content);
-      content = /* @__PURE__ */ React.cloneElement(renderProp, mergedProps);
-    } else content = /* @__PURE__ */ React.createElement(elementType, viewProps, content);
+    }, propsIn.children);
+    else {
+      hooks.useChildren && (content = hooks.useChildren(elementType, content || children, viewProps));
+      var isRenderPropString = typeof renderProp == "string";
+      if (renderProp && !isRenderPropString) {
+        var out = getCustomRender(renderProp, content || children, viewProps, componentState);
+        out && (viewProps = out.viewProps, elementType = out.elementType);
+      }
+      content || (isRenderPropString && viewProps.render, content = /* @__PURE__ */ React.createElement(elementType, viewProps, content || children));
+    }
     content = wrapWithGestureDetector(content, pressGesture, stateRef, isHOC);
     var ResetPresence = animationDriver == null ? void 0 : animationDriver.ResetPresence, needsReset = !!// not when passing down to child
     (!asChild && // not when passThrough
@@ -4049,7 +4375,7 @@ function createComponent(staticConfig) {
     if (renderReset && ResetPresence && (content = /* @__PURE__ */ jsxRuntime.jsx(ResetPresence, {
       disabled: !needsReset,
       children: content
-    })), "focusWithinStyle" in propsIn && (content = /* @__PURE__ */ jsxRuntime.jsx(ComponentContext.Provider, __spreadProps(__spreadValues({}, componentContext), {
+    })), ("focusWithinStyle" in propsIn || (pseudos == null ? void 0 : pseudos.focusWithinStyle)) && (content = /* @__PURE__ */ jsxRuntime.jsx(ComponentContext.Provider, __spreadProps(__spreadValues({}, componentContext), {
       setParentFocusState: setStateShallow,
       children: content
     }))), "group" in props && (content = /* @__PURE__ */ jsxRuntime.jsx(GroupContext.Provider, {
@@ -4092,7 +4418,28 @@ function createComponent(staticConfig) {
 }
 var fromPx = function(val) {
   return typeof val == "number" ? val : typeof val == "string" ? +val.replace("px", "") : 0;
+}, getCustomRender = function(renderProp, content, viewProps, state2) {
+  if (typeof renderProp == "function") {
+    var out = renderProp(viewProps, state2);
+    renderProp = getRenderElementForPlatform(out);
+  }
+  if (renderProp && (typeof renderProp > "u" ? "undefined" : _type_of$1(renderProp)) === "object" && /* @__PURE__ */ React.isValidElement(renderProp)) {
+    var renderElement = getRenderElementForPlatform(renderProp);
+    if (renderElement) {
+      var elementProps = renderProp.props, mergedProps = elementProps ? mergeRenderElementProps(elementProps, viewProps, content) : viewProps;
+      return {
+        elementType: renderProp.type,
+        viewProps: mergedProps
+      };
+    }
+  }
 };
+function getRenderElementForPlatform(potential) {
+  if (!isHTMLElement(potential)) return potential;
+}
+function isHTMLElement(el) {
+  return typeof el.type == "string" && el.type[0] === el.type[0].toLowerCase();
+}
 function getExpandedShorthands(props) {
   var shorthands = getConfig().shorthands;
   if (!shorthands) return props;
@@ -4118,6 +4465,18 @@ var registerCSSVariable = function(v) {
   var unitless = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false;
   return process.env.TAMAGUI_DID_OUTPUT_CSS ? "" : `--${process.env.TAMAGUI_CSS_VARIABLE_PREFIX || ""}${createCSSVariable(v.name, false)}:${!unitless && typeof v.val == "number" ? `${v.val}px` : v.val}`;
 }, tokensValueToVariable = /* @__PURE__ */ new Map(), autoVariables = [], mutatedAutoVariables = [];
+function scanAllSheets() {
+  if (!process.env.TAMAGUI_DID_OUTPUT_CSS) {
+    return;
+  }
+}
+process.env.TAMAGUI_BAIL_AFTER_SCANNING_X_CSS_RULES;
+function setNonce(_2) {
+}
+function insertStyleRules(rulesToInsert) {
+  return;
+}
+process.env.TAMAGUI_INSERT_SELECTOR_TRIES ? +process.env.TAMAGUI_INSERT_SELECTOR_TRIES : 1;
 function isTamaguiComponent(comp, name) {
   var config = comp == null ? void 0 : comp.staticConfig;
   return !!(config && (!name || name === config.componentName));
@@ -4236,6 +4595,8 @@ function ensureThemeVariable(theme, key) {
     val
   });
 }
+function getStyleTags(styles) {
+}
 var fontWeights = ["100", "200", "300", "400", "500", "600", "700", "800", "900"], processSection = function(section, keys, defaultValue2) {
   if (typeof section == "string") return section;
   var sectionKeys = Object.keys(section), fillValue = section[sectionKeys[0]];
@@ -4297,10 +4658,8 @@ var noAnimationDriver = function(method) {
 }, createEmptyAnimationDriver = function() {
   return {
     isReactNative: false,
-    supportsCSS: true,
     inputStyle: "css",
     outputStyle: "css",
-    classNameAnimation: true,
     isStub: true,
     animations: {},
     useAnimations: function() {
@@ -4323,6 +4682,19 @@ var noAnimationDriver = function(method) {
     }
   };
 }, defaultAnimationDriver = createEmptyAnimationDriver();
+function getFontPropertyDeclarations(fontParsed) {
+  var tokenKey = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : "$true", props = ["font-family: var(--f-family)"], getVarRef = function(obj) {
+    var val = obj == null ? void 0 : obj[tokenKey];
+    if (isVariable(val)) return getVariableVariable(val);
+  }, letterSpacing = getVarRef(fontParsed.letterSpacing);
+  letterSpacing && props.push(`letter-spacing: ${letterSpacing}`);
+  var lineHeight = getVarRef(fontParsed.lineHeight);
+  lineHeight && props.push(`line-height: ${lineHeight}`);
+  var fontStyle = getVarRef(fontParsed.style);
+  fontStyle && props.push(`font-style: ${fontStyle}`);
+  var fontWeight = getVarRef(fontParsed.weight);
+  return fontWeight && props.push(`font-weight: ${fontWeight}`), props;
+}
 function createTokenCSS(tokens, shouldTokenCategoryHaveUnits2) {
   if (!process.env.TAMAGUI_DID_OUTPUT_CSS) {
     var declarations = [], sortedTokenKeys = Object.keys(tokens).sort(), _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
@@ -4369,7 +4741,8 @@ function createFontCSS(fontsParsed, registerFontVariables2) {
         fontDeclarations[key] = {
           name: name.slice(1),
           declarations: fontVars,
-          language
+          language,
+          fontParsed
         };
       }
     } catch (err) {
@@ -4386,6 +4759,7 @@ function createFontCSS(fontsParsed, registerFontVariables2) {
   return {};
 }
 function buildCSSRuleSets(declarations, fontDeclarations) {
+  var defaultFontToken = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : "$true";
   if (!process.env.TAMAGUI_DID_OUTPUT_CSS) {
     let declarationsToRuleSet2 = function(decs) {
       var selector = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : "";
@@ -4394,14 +4768,16 @@ function buildCSSRuleSets(declarations, fontDeclarations) {
     };
     var cssRuleSets = [], sep = " ";
     declarations.length && cssRuleSets.push(declarationsToRuleSet2(declarations));
-    var sortedFontDeclarationKeys = Object.keys(fontDeclarations).sort(), _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+    var fontSelectors = [], sortedFontDeclarationKeys = Object.keys(fontDeclarations).sort(), _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
     try {
       for (var _iterator = sortedFontDeclarationKeys[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
         var key = _step.value, {
           name,
           declarations: _$declarations,
           language = "default"
-        } = fontDeclarations[key], fontSelector = `.font_${name}`, langSelector = `:root .t_lang-${name}-${language} ${fontSelector}`, selectors2 = language === "default" ? ` ${fontSelector}, ${langSelector}` : langSelector, specificRuleSet = declarationsToRuleSet2(_$declarations, selectors2);
+        } = fontDeclarations[key], fontSelector = `.font_${name}`;
+        fontSelectors.push(fontSelector);
+        var langSelector = `:root .t_lang-${name}-${language} ${fontSelector}`, selectors2 = language === "default" ? ` ${fontSelector}, ${langSelector}` : langSelector, specificRuleSet = declarationsToRuleSet2(_$declarations, selectors2);
         cssRuleSets.push(specificRuleSet);
       }
     } catch (err) {
@@ -4413,6 +4789,13 @@ function buildCSSRuleSets(declarations, fontDeclarations) {
         if (_didIteratorError) throw _iteratorError;
       }
     }
+    if (fontSelectors.length) {
+      var firstFont = fontDeclarations[sortedFontDeclarationKeys[0]];
+      if (firstFont == null ? void 0 : firstFont.fontParsed) {
+        var fontProps = getFontPropertyDeclarations(firstFont.fontParsed, defaultFontToken), sharedSelectors = [...fontSelectors, ".is_View"].join(", ");
+        cssRuleSets.push(`${sharedSelectors} {${fontProps.join("; ")}}`);
+      }
+    }
     return cssRuleSets;
   }
   return [];
@@ -4557,17 +4940,15 @@ function createTamagui$1(configIn) {
     return (val2 == null ? void 0 : val2[0]) === "$" && (val2 = val2.slice(1)), val2;
   })();
   ((_configIn_settings1 = configIn.settings) === null || _configIn_settings1 === void 0 ? void 0 : _configIn_settings1.defaultPosition) || "static";
-  var defaultProps = configIn.defaultProps || {}, defaultFontToken = defaultFont ? `$${defaultFont}` : "";
-  defaultFont && (defaultProps.Text = __spreadProps(__spreadValues({}, defaultProps.Text), {
-    fontFamily: defaultFontToken
-  }));
-  var config = __spreadProps(__spreadValues({
+  var defaultProps = configIn.defaultProps || {}, defaultFontToken = defaultFont ? `$${defaultFont}` : "", inputAnimations = configIn.animations, resolvedDriver = resolveAnimationDriver(inputAnimations), isMultiDriver = resolvedDriver !== null && resolvedDriver !== inputAnimations, resolvedAnimations = resolvedDriver != null ? resolvedDriver : inputAnimations, animationDrivers = isMultiDriver ? inputAnimations : void 0, config = __spreadProps(__spreadValues({
     fonts: {},
     onlyAllowShorthands: false,
     fontLanguages: [],
-    animations: defaultAnimationDriver,
     media: {}
   }, configIn), {
+    // normalized animations (resolved from multi-driver format if needed)
+    animations: resolvedAnimations != null ? resolvedAnimations : defaultAnimationDriver,
+    animationDrivers,
     defaultProps,
     settings: __spreadValues({
       webContainerType: "inline-size"
@@ -4791,7 +5172,6 @@ var useIsTouchDevice = function() {
 };
 var View$1 = createComponent({
   acceptsClassName: true,
-  defaultProps: viewDefaultStyles,
   validStyles
 });
 function useProps(props, opts) {
@@ -4813,13 +5193,13 @@ function usePropsAndStyle(props, opts) {
       return true;
     }
   }), componentContext = React.useContext(ComponentContext), groupContext = React.useContext(GroupContext), {
-    state,
+    state: state2,
     disabled,
     setStateShallow
   } = useComponentState(props, componentContext.animationDriver, staticConfig, getConfig()), mediaStateNow = (opts == null ? void 0 : opts.noMedia) ? (
     // not safe to use mediaState but really marginal to hit this
     exports.mediaState
-  ) : useMedia(), splitStyles = useSplitStyles(props, staticConfig, theme, (themeState == null ? void 0 : themeState.name) || "", state, __spreadValues({
+  ) : useMedia(), splitStyles = useSplitStyles(props, staticConfig, theme, (themeState == null ? void 0 : themeState.name) || "", state2, __spreadValues({
     isAnimated: false,
     mediaState: mediaStateNow,
     noSkip: true,
@@ -4832,7 +5212,7 @@ function usePropsAndStyle(props, opts) {
   } = splitStyles || {};
   return useIsomorphicLayoutEffect(function() {
     if (!disabled) {
-      if (state.unmounted) {
+      if (state2.unmounted) {
         setStateShallow({
           unmounted: false
         });
@@ -4867,6 +5247,9 @@ var Configuration = function(props) {
     children: /* @__PURE__ */ jsxRuntime.jsx(ComponentContext.Provider, __spreadValues(__spreadValues({}, current), props))
   });
 };
+function TamaguiRoot(props) {
+  return props.children;
+}
 function FontLanguage(param) {
   var _a = param, {
     children
@@ -4881,6 +5264,7 @@ function FontLanguage(param) {
   }));
 }
 var ThemeProvider = function(props) {
+  "use no memo";
   var addThemeClassName = getSetting("addThemeClassName"), forceClassName = addThemeClassName === void 0;
   return /* @__PURE__ */ jsxRuntime.jsx(Theme, {
     className: props.className,
@@ -4891,37 +5275,42 @@ var ThemeProvider = function(props) {
     children: props.children
   });
 };
+var _cachedFirstKey, _cachedConfig;
+function firstThemeKey(config) {
+  return config !== _cachedConfig && (_cachedConfig = config, _cachedFirstKey = (config == null ? void 0 : config.themes) ? Object.keys(config.themes)[0] : void 0), _cachedFirstKey;
+}
 function TamaguiProvider$1(param) {
   var {
     children,
     disableInjectCSS,
     config,
     className,
-    defaultTheme,
+    defaultTheme: defaultThemeProp,
     reset,
     insets
-  } = param;
+  } = param, defaultTheme = defaultThemeProp || firstThemeKey(config) || "light";
   useIsomorphicLayoutEffect(function() {
     updateMediaListeners();
   }, []);
   var memoizedInsets = React.useMemo(function() {
     return insets;
   }, [insets == null ? void 0 : insets.top, insets == null ? void 0 : insets.right, insets == null ? void 0 : insets.bottom, insets == null ? void 0 : insets.left]), defaultAnimationDriver2 = React.useMemo(function() {
-    var animations = config == null ? void 0 : config.animations;
-    return animations ? "default" in animations ? animations.default : animations : null;
+    return resolveAnimationDriver(config == null ? void 0 : config.animations);
   }, [config == null ? void 0 : config.animations]);
   React.useEffect(function() {
     var _defaultAnimationDriver_onMount;
     defaultAnimationDriver2 == null || (_defaultAnimationDriver_onMount = defaultAnimationDriver2.onMount) === null || _defaultAnimationDriver_onMount === void 0 || _defaultAnimationDriver_onMount.call(defaultAnimationDriver2);
   }, []);
-  var contents = /* @__PURE__ */ jsxRuntime.jsx(UnmountedClassName, {
-    children: /* @__PURE__ */ jsxRuntime.jsx(ComponentContext.Provider, {
-      animationDriver: defaultAnimationDriver2,
-      insets: memoizedInsets,
-      children: /* @__PURE__ */ jsxRuntime.jsx(ThemeProvider, {
-        defaultTheme,
-        reset,
-        className,
+  var contents = /* @__PURE__ */ jsxRuntime.jsx(ComponentContext.Provider, {
+    animationDriver: defaultAnimationDriver2,
+    insets: memoizedInsets,
+    children: /* @__PURE__ */ jsxRuntime.jsx(ThemeProvider, {
+      defaultTheme,
+      reset,
+      className,
+      children: /* @__PURE__ */ jsxRuntime.jsx(TamaguiRoot, {
+        theme: defaultTheme,
+        isRootRoot: true,
         children
       })
     })
@@ -4933,13 +5322,6 @@ function TamaguiProvider$1(param) {
     children: [contents, false]
   });
 }
-function UnmountedClassName(props) {
-  var [mounted, setMounted] = React.useState(false);
-  if (React.useEffect(function() {
-    setMounted(true);
-  }, []), !isWeb) return props.children;
-}
-TamaguiProvider$1.displayName = "TamaguiProvider";
 var ellipsisStyle = {
   numberOfLines: 1,
   lineBreakMode: "clip"
@@ -4958,10 +5340,10 @@ var ellipsisStyle = {
   },
   validStyles: __spreadValues(__spreadValues({}, validStyles), stylePropsTextOnly)
 });
-Text$1.displayName = "Text";
+var isServer = typeof window > "u", useIsomorphicInsertionEffect = isServer ? React__namespace.useEffect : React__namespace.useInsertionEffect || React__namespace.useLayoutEffect;
 function useGet(currentValue, initialValue, forwardToFunction) {
   var curRef = React__namespace.useRef(initialValue != null ? initialValue : currentValue);
-  return useIsomorphicLayoutEffect(function() {
+  return useIsomorphicInsertionEffect(function() {
     curRef.current = currentValue;
   }), React__namespace.useCallback(forwardToFunction ? function() {
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) args[_key] = arguments[_key];
@@ -5167,6 +5549,7 @@ var matchMedia = function(query) {
 function createMedia(media) {
   return setupMatchMedia(matchMedia), media;
 }
+var LayoutHandlers = /* @__PURE__ */ new WeakMap(), LayoutDisableKey = /* @__PURE__ */ new WeakMap(), Nodes = /* @__PURE__ */ new Set(), IntersectionState = /* @__PURE__ */ new WeakMap();
 var DisableLayoutContextKey = /* @__PURE__ */ React.createContext(""), LayoutMeasurementController = function(param) {
   var {
     disable,
@@ -5178,14 +5561,22 @@ var DisableLayoutContextKey = /* @__PURE__ */ React.createContext(""), LayoutMea
     children
   });
 };
-function setOnLayoutStrategy(state) {
+function setOnLayoutStrategy(state2) {
 }
-var avoidUpdates = true, queuedUpdates = /* @__PURE__ */ new Map();
+var NodeRectCache = /* @__PURE__ */ new WeakMap(), avoidUpdates = true, queuedUpdates = /* @__PURE__ */ new Map();
 function enable() {
   avoidUpdates && (avoidUpdates = false, queuedUpdates && (queuedUpdates.forEach(function(cb) {
     return cb();
   }), queuedUpdates.clear()));
 }
+function registerLayoutNode(node, onChange, disableKey) {
+  return Nodes.add(node), LayoutHandlers.set(node, onChange), disableKey && LayoutDisableKey.set(node, disableKey), function() {
+    return cleanupNode(node);
+  };
+}
+function cleanupNode(node) {
+  Nodes.delete(node), LayoutHandlers.delete(node), LayoutDisableKey.delete(node), NodeRectCache.delete(node), IntersectionState.delete(node);
+}
 function getBaseViews() {
   var _a, _b, _c, _d;
   const native = require("react-native");
@@ -5249,6 +5640,7 @@ exports.THEME_CLASSNAME_PREFIX = THEME_CLASSNAME_PREFIX;
 exports.THEME_NAME_SEPARATOR = THEME_NAME_SEPARATOR;
 exports.Tamagui = Tamagui;
 exports.TamaguiProvider = TamaguiProvider;
+exports.TamaguiRoot = TamaguiRoot;
 exports.Text = Text;
 exports.Theme = Theme;
 exports.ThemeProvider = ThemeProvider;
@@ -5271,10 +5663,12 @@ exports.createTamagui = createTamagui;
 exports.createTokens = createTokens;
 exports.createVariable = createVariable;
 exports.createVariables = createVariables;
+exports.cssShorthandLonghands = cssShorthandLonghands;
 exports.currentPlatform = currentPlatform;
 exports.defaultMediaImportance = defaultMediaImportance;
 exports.didGetVariableValue = didGetVariableValue;
 exports.ensureThemeVariable = ensureThemeVariable;
+exports.extractPseudoState = extractPseudoState;
 exports.fixStyles = fixStyles;
 exports.forceUpdateThemes = forceUpdateThemes;
 exports.getCSSStylesAtomic = getCSSStylesAtomic;
@@ -5315,7 +5709,7 @@ exports.isChrome = isChrome;
 exports.isClient = isClient;
 exports.isEqualShallow = isEqualShallow;
 exports.isIos = isIos;
-exports.isServer = isServer;
+exports.isServer = isServer$1;
 exports.isTamaguiComponent = isTamaguiComponent;
 exports.isTamaguiElement = isTamaguiElement;
 exports.isTouchable = isTouchable;
@@ -5333,6 +5727,9 @@ exports.mergeIfNotShallowEqual = mergeIfNotShallowEqual;
 exports.mergeProps = mergeProps;
 exports.mergeSlotStyleProps = mergeSlotStyleProps;
 exports.mutatedAutoVariables = mutatedAutoVariables;
+exports.nonAnimatableStyleProps = nonAnimatableStyleProps;
+exports.nonAnimatableWebTextProps = nonAnimatableWebTextProps;
+exports.nonAnimatableWebViewProps = nonAnimatableWebViewProps;
 exports.normalizeColor = normalizeColor;
 exports.normalizeStyle = normalizeStyle$1;
 exports.normalizeValueWithProperty = normalizeValueWithProperty;
@@ -5346,7 +5743,9 @@ exports.pseudoDescriptorsBase = pseudoDescriptorsBase;
 exports.pseudoPriorities = pseudoPriorities;
 exports.px = px;
 exports.registerFontVariables = registerFontVariables;
+exports.registerLayoutNode = registerLayoutNode;
 exports.resetMediaStyleCache = resetMediaStyleCache;
+exports.resolveEffectivePseudoTransition = resolveEffectivePseudoTransition;
 exports.rgba = rgba;
 exports.setConfig = setConfig;
 exports.setDidGetVariableValue = setDidGetVariableValue;
@@ -5395,8 +5794,6 @@ exports.useThemeWithState = useThemeWithState;
 exports.validPseudoKeys = validPseudoKeys;
 exports.validStyles = validStyles;
 exports.variableToString = variableToString;
-exports.viewDefaultStyles = viewDefaultStyles;
 exports.webOnlyStylePropsText = webOnlyStylePropsText;
 exports.webOnlyStylePropsView = webOnlyStylePropsView;
-exports.webViewFlexCompatStyles = webViewFlexCompatStyles;
 exports.withStaticProperties = withStaticProperties;