tamagui 1.138.2 → 1.138.4

package/dist/native.cjs

@@ -3115,6 +3115,10 @@ var variableToFontNameCache = /* @__PURE__ */ new WeakMap(), resolveTokensAndVar
   for (var _key in value) {
     var subKey = conf2.shorthands[_key] || _key, val = value[_key];
     if (!(!styleProps2.noSkip && subKey in skipProps)) {
+      if (staticConfig) {
+        var _staticConfig_context, _staticConfig_parentStaticConfig_context, _staticConfig_parentStaticConfig, contextProps = ((_staticConfig_context = staticConfig.context) === null || _staticConfig_context === void 0 ? void 0 : _staticConfig_context.props) || ((_staticConfig_parentStaticConfig = staticConfig.parentStaticConfig) === null || _staticConfig_parentStaticConfig === void 0 || (_staticConfig_parentStaticConfig_context = _staticConfig_parentStaticConfig.context) === null || _staticConfig_parentStaticConfig_context === void 0 ? void 0 : _staticConfig_parentStaticConfig_context.props);
+        contextProps && subKey in contextProps && (styleState.overriddenContextProps || (styleState.overriddenContextProps = {}), styleState.overriddenContextProps[subKey] = val);
+      }
       if (styleProps2.noExpand) res[subKey] = val;
       else if (variants2 && subKey in variants2) {
         if (parentVariantKey && parentVariantKey === key) res[subKey] = // SYNC WITH *1
@@ -3279,6 +3283,17 @@ function _type_of$5(obj) {
   return obj && typeof Symbol < "u" && obj.constructor === Symbol ? "symbol" : typeof obj;
 }
 var conf;
+function normalizeGroupKey(key, groupContext) {
+  var parts = key.split("-"), plen = parts.length;
+  if (
+    // check if its actually a simple group selector to avoid breaking selectors
+    plen === 2 || plen === 3 && pseudoPriorities[parts[parts.length - 1]]
+  ) {
+    var name = parts[1];
+    if (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;
 }
@@ -3305,16 +3320,7 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
       return "continue";
     }
     var isVariant = !isValidStyleKeyInit && variants2 && keyInit in variants2, isStyleLikeKey = isValidStyleKeyInit || isVariant, isPseudo = keyInit in validPseudoKeys, isMedia = !isStyleLikeKey && !isPseudo ? getMediaKey(keyInit) : false, isMediaOrPseudo = !!(isMedia || isPseudo);
-    if (isMediaOrPseudo && isMedia === "group") {
-      var parts = keyInit.split("-"), plen = parts.length;
-      if (
-        // check if its actually a simple group selector to avoid breaking selectors
-        plen === 2 || plen === 3 && pseudoPriorities[parts[parts.length - 1]]
-      ) {
-        var name2 = parts[1];
-        groupContext && !(groupContext == null ? void 0 : groupContext[name2]) && (keyInit = keyInit.replace("$group-", "$group-true-"));
-      }
-    }
+    isMediaOrPseudo && isMedia === "group" && (keyInit = normalizeGroupKey(keyInit, groupContext));
     var isStyleProp = isValidStyleKeyInit || isMediaOrPseudo || isVariant && !noExpand;
     if (isStyleProp && (asChild === "except-style" || asChild === "except-style-web")) return "continue";
     var shouldPassProp = !isStyleProp && isHOC || // is in parent variants
@@ -3338,7 +3344,7 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
           mergeStyle(styleState, key4, val2, 1);
           return;
         }
-        if (isPseudo = key4 in validPseudoKeys, isMedia = isPseudo ? false : getMediaKey(key4), isMediaOrPseudo = !!(isMedia || isPseudo), isVariant = variants2 && key4 in variants2, (inlineProps == null ? void 0 : inlineProps.has(key4)) || process.env.IS_STATIC === "is_static" && (inlineWhenUnflattened == null ? void 0 : inlineWhenUnflattened.has(key4))) {
+        if (isPseudo = key4 in validPseudoKeys, isMedia = isPseudo ? false : getMediaKey(key4), isMediaOrPseudo = !!(isMedia || isPseudo), isVariant = variants2 && key4 in variants2, 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))) {
           var _props_key;
           viewProps[key4] = (_props_key = props[key4]) !== null && _props_key !== void 0 ? _props_key : val2;
         }
@@ -3538,6 +3544,10 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
       (_styleState2 = styleState).style || (_styleState2.style = {}), Object.assign(styleState.style, normalizeStyle(style));
     }
   }
+  if (viewProps.tabIndex === 0) {
+    var _viewProps1, _accessible1;
+    (_accessible1 = (_viewProps1 = viewProps).accessible) !== null && _accessible1 !== void 0 || (_viewProps1.accessible = true);
+  }
   var style1 = styleState.style;
   if (style1 == null ? void 0 : style1.fontFamily) {
     var _getFont, faceInfo = (_getFont = getFont(style1.fontFamily)) === null || _getFont === void 0 ? void 0 : _getFont.face;
@@ -3557,7 +3567,8 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
     rulesToInsert,
     dynamicThemeAccess,
     pseudoGroups,
-    mediaGroups
+    mediaGroups,
+    overriddenContextProps: styleState.overriddenContextProps
   }, asChildExceptStyleLike = asChild === "except-style" || asChild === "except-style-web";
   if (!styleProps2.noMergeStyle && !asChildExceptStyleLike) {
     var style2 = styleState.style;
@@ -3575,26 +3586,33 @@ function mergeFlatTransforms(target, flatTransforms) {
   });
 }
 function mergeStyle(styleState, key, val, importance) {
-  var {
+  var _staticConfig_context, _staticConfig_parentStaticConfig_context, _staticConfig_parentStaticConfig, {
     viewProps,
     styleProps: styleProps2,
     staticConfig,
     usedKeys
   } = styleState, existingImportance = usedKeys[key] || 0;
-  if (!(existingImportance > importance)) if (key in stylePropsTransform) {
-    var _styleState;
-    (_styleState = styleState).flatTransforms || (_styleState.flatTransforms = {}), usedKeys[key] = importance, styleState.flatTransforms[key] = val;
-  } else {
-    var shouldNormalize = isWeb, out = shouldNormalize ? normalizeValueWithProperty$1(val) : val;
-    if (
-      // accept is for props not styles
-      staticConfig.accept && key in staticConfig.accept
-    ) viewProps[key] = out;
-    else {
+  if (!(existingImportance > importance)) {
+    var contextProps = ((_staticConfig_context = staticConfig.context) === null || _staticConfig_context === void 0 ? void 0 : _staticConfig_context.props) || ((_staticConfig_parentStaticConfig = staticConfig.parentStaticConfig) === null || _staticConfig_parentStaticConfig === void 0 || (_staticConfig_parentStaticConfig_context = _staticConfig_parentStaticConfig.context) === null || _staticConfig_parentStaticConfig_context === void 0 ? void 0 : _staticConfig_parentStaticConfig_context.props);
+    if (contextProps && key in contextProps) {
+      var _styleState;
+      (_styleState = styleState).overriddenContextProps || (_styleState.overriddenContextProps = {}), styleState.overriddenContextProps[key] = val;
+    }
+    if (key in stylePropsTransform) {
       var _styleState1;
-      (_styleState1 = styleState).style || (_styleState1.style = {}), usedKeys[key] = importance, styleState.style[key] = // if you dont do this you'll be passing props.transform arrays directly here and then mutating them
-      // if theres any flatTransforms later, causing issues (mutating props is bad, in strict mode styles get borked)
-      key === "transform" && Array.isArray(out) ? [...out] : out;
+      (_styleState1 = styleState).flatTransforms || (_styleState1.flatTransforms = {}), usedKeys[key] = importance, styleState.flatTransforms[key] = val;
+    } else {
+      var shouldNormalize = isWeb, out = shouldNormalize ? normalizeValueWithProperty$1(val) : val;
+      if (
+        // accept is for props not styles
+        staticConfig.accept && key in staticConfig.accept
+      ) viewProps[key] = out;
+      else {
+        var _styleState2;
+        (_styleState2 = styleState).style || (_styleState2.style = {}), usedKeys[key] = importance, styleState.style[key] = // if you dont do this you'll be passing props.transform arrays directly here and then mutating them
+        // if theres any flatTransforms later, causing issues (mutating props is bad, in strict mode styles get borked)
+        key === "transform" && Array.isArray(out) ? [...out] : out;
+      }
     }
   }
 }
@@ -3865,7 +3883,7 @@ function _type_of$4(obj) {
   return obj && typeof Symbol < "u" && obj.constructor === Symbol ? "symbol" : typeof obj;
 }
 var useComponentState = function(props, animationDriver, staticConfig, config) {
-  var _animationDriver_usePresence, isHydrated = useDidFinishSSR(), needsHydration = !useIsClientOnly(), useAnimations = animationDriver == null ? void 0 : animationDriver.useAnimations, {
+  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(
     // performance: avoid creating object every render
@@ -4022,7 +4040,7 @@ function createComponent(staticConfig) {
       nextProps && (props = nextProps), overriddenContextProps = overrides;
     }
     var componentName2 = props.componentName || staticConfig.componentName;
-    var componentContext = React.useContext(ComponentContext), groupContextParent = React.useContext(GroupContext), animationDriver = componentContext.animationDriver, useAnimations = animationDriver == null ? void 0 : animationDriver.useAnimations, componentState = useComponentState(props, animationDriver, staticConfig), {
+    var componentContext = React.useContext(ComponentContext), groupContextParent = React.useContext(GroupContext), animationDriver = componentContext.animationDriver, useAnimations = animationDriver == null ? void 0 : animationDriver.useAnimations, componentState = useComponentState(props, (animationDriver == null ? void 0 : animationDriver.isStub) ? null : animationDriver, staticConfig), {
       disabled,
       groupName,
       hasAnimationProp,
@@ -4112,7 +4130,15 @@ function createComponent(staticConfig) {
       willBeAnimated,
       styledContext: styledContextValue
     }, themeName = (themeState == null ? void 0 : themeState.name) || "";
-    var splitStyles = useSplitStyles(props, staticConfig, theme, themeName, state, styleProps2, null, componentContext, allGroupContexts, elementType, startedUnhydrated, debugProp), isPassthrough = !splitStyles, groupContext = groupName && (allGroupContexts == null ? void 0 : allGroupContexts[groupName]) || null;
+    var splitStyles = useSplitStyles(props, staticConfig, theme, themeName, state, styleProps2, null, componentContext, allGroupContexts, elementType, startedUnhydrated, debugProp), 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];
+        staticConfig.context || (contextForOverride = contextForProps);
+      }
+    }
+    var groupContext = groupName && (allGroupContexts == null ? void 0 : allGroupContexts[groupName]) || null;
     if (!isPassthrough && groupContext && // avoids onLayout if we don't need it
     props.containerType !== "normal") {
       var groupState = groupContext == null ? void 0 : groupContext.state;
@@ -4154,8 +4180,8 @@ function createComponent(staticConfig) {
       }), stateRef.current.setStateShallow = function(nextOrGetNext) {
         var prev = stateRef.current.nextState || state, next = typeof nextOrGetNext == "function" ? nextOrGetNext(prev) : nextOrGetNext;
         if (!(next === prev || isEqualShallow(prev, next))) {
-          var canAvoidReRender = Object.keys(next).every(function(key2) {
-            return avoidReRenderKeys.has(key2);
+          var canAvoidReRender = Object.keys(next).every(function(key3) {
+            return avoidReRenderKeys.has(key3);
           }), updatedState = __spreadValues(__spreadValues({}, prev), next);
           if (stateRef.current.nextState = updatedState, canAvoidReRender) {
             var _stateRef_current_updateStyleListener, _stateRef_current;
@@ -4401,9 +4427,9 @@ function createComponent(staticConfig) {
     }))), "group" in props && (content = /* @__PURE__ */ jsxRuntimeExports.jsx(GroupContext.Provider, {
       value: allGroupContexts,
       children: content
-    })), content = disableTheme || !splitStyles ? content : getThemedChildren(themeState, content, themeStateProps, false, stateRef), overriddenContextProps) {
-      var Provider = staticConfig.context.Provider;
-      for (var key in styledContextValue) key in overriddenContextProps || (overriddenContextProps[key] = styledContextValue[key]);
+    })), content = disableTheme || !splitStyles ? content : getThemedChildren(themeState, content, themeStateProps, false, stateRef), overriddenContextProps && contextForOverride) {
+      var Provider = contextForOverride.Provider;
+      for (var key1 in styledContextValue) key1 in overriddenContextProps || (overriddenContextProps[key1] = styledContextValue[key1]);
       debugProp && console.info("overriddenContextProps", overriddenContextProps), content = /* @__PURE__ */ jsxRuntimeExports.jsx(Provider, __spreadProps(__spreadValues({
         __disableMergeDefaultValues: true
       }, overriddenContextProps), {
@@ -4749,6 +4775,35 @@ var cache$1 = /* @__PURE__ */ new WeakMap(), createVariables = function(tokens)
   }
   return cache$1.set(res, true), res;
 };
+var noAnimationDriver = function(method) {
+  console.warn(`No animation driver configured. To use ${method}, you must pass \`animations\` to createTamagui. See: https://tamagui.dev/docs/core/animations`);
+}, createEmptyAnimationDriver = function() {
+  return {
+    isReactNative: false,
+    supportsCSS: true,
+    classNameAnimation: true,
+    isStub: true,
+    animations: {},
+    useAnimations: function() {
+      return noAnimationDriver("animations");
+    },
+    usePresence: function() {
+      return noAnimationDriver("usePresence");
+    },
+    ResetPresence: function() {
+      return noAnimationDriver("ResetPresence");
+    },
+    useAnimatedNumber: function() {
+      return noAnimationDriver("useAnimatedNumber");
+    },
+    useAnimatedNumberStyle: function() {
+      return noAnimationDriver("useAnimatedNumberStyle");
+    },
+    useAnimatedNumberReaction: function() {
+      return noAnimationDriver("useAnimatedNumberReaction");
+    }
+  };
+}, defaultAnimationDriver = createEmptyAnimationDriver();
 function insertFont(name, fontIn) {
   var font = createFont(fontIn), tokened = createVariables(font, name), parsed = parseFont(tokened);
   return setConfigFont(name, tokened, parsed), parsed;
@@ -4831,7 +4886,7 @@ function createTamagui$2(configIn) {
     fonts: {},
     onlyAllowShorthands: false,
     fontLanguages: [],
-    animations: {},
+    animations: defaultAnimationDriver,
     media: {}
   }, configIn), {
     unset,
@@ -4881,8 +4936,7 @@ function getThemesDeduped(themes2, colorTokens) {
       e2.names.push(themeName);
       continue;
     }
-    var theme = __spreadValues({}, rawTheme);
-    colorTokens && Object.assign(theme, colorTokens);
+    var theme = __spreadValues(__spreadValues({}, colorTokens), rawTheme);
     for (var key1 in theme) ensureThemeVariable(theme, key1);
     var deduped = {
       names: [themeName],
@@ -9812,11 +9866,18 @@ var hiddenSize = 10000.1, relativeDimensionTo = "screen", SheetImplementationCus
   })(), [isShowingInnerSheet, setIsShowingInnerSheet] = React.useState(false), shouldHideParentSheet = modal && isShowingInnerSheet && // if not using weird portal limitation we dont need to hide parent sheet
   USE_NATIVE_PORTAL, sheetInsideSheet = React.useContext(SheetInsideSheetContext), onInnerSheet = React.useCallback(function(hasChild) {
     setIsShowingInnerSheet(hasChild);
-  }, []), positions = React.useMemo(function() {
+  }, []), stableFrameSize = React.useRef(frameSize);
+  React.useEffect(function() {
+    open2 && frameSize && (stableFrameSize.current = frameSize);
+  }, [open2, frameSize]);
+  var positions = React.useMemo(function() {
     return snapPoints.map(function(point) {
-      return getYPositions(snapPointsMode, point, screenSize, frameSize);
+      return (
+        // FIX: Use stable frameSize when closing to prevent position jumps
+        getYPositions(snapPointsMode, point, screenSize, open2 ? frameSize : stableFrameSize.current)
+      );
     });
-  }, [screenSize, frameSize, snapPoints, snapPointsMode]), {
+  }, [screenSize, frameSize, snapPoints, snapPointsMode, open2]), {
     useAnimatedNumber,
     useAnimatedNumberStyle,
     useAnimatedNumberReaction
@@ -9931,9 +9992,12 @@ var hiddenSize = 10000.1, relativeDimensionTo = "screen", SheetImplementationCus
       onPanResponderRelease: finish
     });
   }, [disableDrag, isShowingInnerSheet, animateTo, frameSize, positions, setPosition]), handleAnimationViewLayout = React.useCallback(function(e2) {
-    var _e_nativeEvent, next = Math.min((_e_nativeEvent = e2.nativeEvent) === null || _e_nativeEvent === void 0 ? void 0 : _e_nativeEvent.layout.height, Dimensions.get(relativeDimensionTo).height);
-    next && setFrameSize(next);
-  }, []), handleMaxContentViewLayout = React.useCallback(function(e2) {
+    var _e_nativeEvent;
+    if (!(!open2 && stableFrameSize.current !== 0)) {
+      var next = Math.min((_e_nativeEvent = e2.nativeEvent) === null || _e_nativeEvent === void 0 ? void 0 : _e_nativeEvent.layout.height, Dimensions.get(relativeDimensionTo).height);
+      next && setFrameSize(next);
+    }
+  }, [open2]), handleMaxContentViewLayout = React.useCallback(function(e2) {
     var _e_nativeEvent, next = Math.min((_e_nativeEvent = e2.nativeEvent) === null || _e_nativeEvent === void 0 ? void 0 : _e_nativeEvent.layout.height, Dimensions.get(relativeDimensionTo).height);
     next && setMaxContentSize(next);
   }, []), animatedStyle = useAnimatedNumberStyle(animatedNumber, function(val) {
@@ -10281,13 +10345,18 @@ function createSheet(param) {
       frameSize,
       contentRef,
       open: open2
-    } = context2, composedContentRef = useComposedRefs(forwardedRef, contentRef), offscreenSize = useSheetOffscreenSize(context2), sheetContents = React.useMemo(function() {
+    } = context2, composedContentRef = useComposedRefs(forwardedRef, contentRef), offscreenSize = useSheetOffscreenSize(context2), stableFrameSize = React.useRef(frameSize);
+    React.useEffect(function() {
+      open2 && frameSize && (stableFrameSize.current = frameSize);
+    }, [open2, frameSize]);
+    var sheetContents = React.useMemo(function() {
+      var shouldUseFixedHeight = hasFit && !open2 && stableFrameSize.current;
       return (
         // @ts-expect-error
         /* @__PURE__ */ jsxRuntimeExports.jsxs(Frame2, __spreadProps(__spreadValues({
           ref: composedContentRef,
-          flex: hasFit ? 0 : 1,
-          height: hasFit ? void 0 : frameSize,
+          flex: hasFit && open2 ? 0 : 1,
+          height: shouldUseFixedHeight ? stableFrameSize.current : hasFit ? void 0 : frameSize,
           pointerEvents: open2 ? "auto" : "none"
         }, props), {
           children: [/* @__PURE__ */ jsxRuntimeExports.jsx(StackZIndexContext, {
@@ -10498,7 +10567,9 @@ var DialogContext = createStyledContext(
           height: "auto",
           // ensure always in frame and right height
           maxHeight: "100vh",
-          position: "fixed"
+          position: "fixed",
+          // ensure dialog inherits stacking context from portal wrapper
+          zIndex: 1
         }
       }
     }
@@ -11329,6 +11400,8 @@ var ButtonContext = createStyledContext({
   context: ButtonContext,
   role: "button",
   focusable: true,
+  // forces runtime pressStyle so it passes through context text colors
+  disableClassName: true,
   variants: {
     unstyled: {
       false: {
@@ -13938,7 +14011,7 @@ var needsRepropagation = isAndroid || isIos && !USE_NATIVE_PORTAL, PopoverContex
     virtualRef
   }), {
     scope,
-    asChild: rest.asChild,
+    asChild: true,
     children: trigger
   }));
 }), PopoverContentFrame = styled(PopperContentFrame, {

package/dist/test.cjs

@@ -3356,6 +3356,10 @@ var variableToFontNameCache = /* @__PURE__ */ new WeakMap(), resolveTokensAndVar
   for (var _key in value) {
     var subKey = conf2.shorthands[_key] || _key, val = value[_key];
     if (!(!styleProps2.noSkip && subKey in skipProps)) {
+      if (staticConfig) {
+        var _staticConfig_context, _staticConfig_parentStaticConfig_context, _staticConfig_parentStaticConfig, contextProps = ((_staticConfig_context = staticConfig.context) === null || _staticConfig_context === void 0 ? void 0 : _staticConfig_context.props) || ((_staticConfig_parentStaticConfig = staticConfig.parentStaticConfig) === null || _staticConfig_parentStaticConfig === void 0 || (_staticConfig_parentStaticConfig_context = _staticConfig_parentStaticConfig.context) === null || _staticConfig_parentStaticConfig_context === void 0 ? void 0 : _staticConfig_parentStaticConfig_context.props);
+        contextProps && subKey in contextProps && (styleState.overriddenContextProps || (styleState.overriddenContextProps = {}), styleState.overriddenContextProps[subKey] = val);
+      }
       if (styleProps2.noExpand) res[subKey] = val;
       else if (variants2 && subKey in variants2) {
         if (parentVariantKey && parentVariantKey === key) res[subKey] = // SYNC WITH *1
@@ -3520,6 +3524,17 @@ function _type_of$5(obj) {
   return obj && typeof Symbol < "u" && obj.constructor === Symbol ? "symbol" : typeof obj;
 }
 var conf;
+function normalizeGroupKey(key, groupContext) {
+  var parts = key.split("-"), plen = parts.length;
+  if (
+    // check if its actually a simple group selector to avoid breaking selectors
+    plen === 2 || plen === 3 && pseudoPriorities[parts[parts.length - 1]]
+  ) {
+    var name = parts[1];
+    if (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;
 }
@@ -3547,16 +3562,7 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
       return "continue";
     }
     var isVariant = !isValidStyleKeyInit && variants2 && keyInit in variants2, isStyleLikeKey = isValidStyleKeyInit || isVariant, isPseudo = keyInit in validPseudoKeys, isMedia = !isStyleLikeKey && !isPseudo ? getMediaKey(keyInit) : false, isMediaOrPseudo = !!(isMedia || isPseudo);
-    if (isMediaOrPseudo && isMedia === "group") {
-      var parts = keyInit.split("-"), plen = parts.length;
-      if (
-        // check if its actually a simple group selector to avoid breaking selectors
-        plen === 2 || plen === 3 && pseudoPriorities[parts[parts.length - 1]]
-      ) {
-        var name2 = parts[1];
-        groupContext && !(groupContext == null ? void 0 : groupContext[name2]) && (keyInit = keyInit.replace("$group-", "$group-true-"));
-      }
-    }
+    isMediaOrPseudo && isMedia === "group" && (keyInit = normalizeGroupKey(keyInit, groupContext));
     var isStyleProp = isValidStyleKeyInit || isMediaOrPseudo || isVariant && !noExpand;
     if (isStyleProp && (asChild === "except-style" || asChild === "except-style-web")) return "continue";
     var shouldPassProp = !isStyleProp && isHOC || // is in parent variants
@@ -3580,7 +3586,7 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
           mergeStyle(styleState, key4, val2, 1);
           return;
         }
-        if (isPseudo = key4 in validPseudoKeys, isMedia = isPseudo ? false : getMediaKey(key4), isMediaOrPseudo = !!(isMedia || isPseudo), isVariant = variants2 && key4 in variants2, (inlineProps == null ? void 0 : inlineProps.has(key4)) || process.env.IS_STATIC === "is_static" && (inlineWhenUnflattened == null ? void 0 : inlineWhenUnflattened.has(key4))) {
+        if (isPseudo = key4 in validPseudoKeys, isMedia = isPseudo ? false : getMediaKey(key4), isMediaOrPseudo = !!(isMedia || isPseudo), isVariant = variants2 && key4 in variants2, 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))) {
           var _props_key;
           viewProps[key4] = (_props_key = props[key4]) !== null && _props_key !== void 0 ? _props_key : val2;
         }
@@ -3780,6 +3786,10 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
       (_styleState2 = styleState).style || (_styleState2.style = {}), Object.assign(styleState.style, normalizeStyle(style));
     }
   }
+  if (viewProps.tabIndex === 0) {
+    var _viewProps1, _accessible1;
+    (_accessible1 = (_viewProps1 = viewProps).accessible) !== null && _accessible1 !== void 0 || (_viewProps1.accessible = true);
+  }
   var style1 = styleState.style;
   if (style1 == null ? void 0 : style1.fontFamily) {
     var _getFont, faceInfo = (_getFont = getFont(style1.fontFamily)) === null || _getFont === void 0 ? void 0 : _getFont.face;
@@ -3799,7 +3809,8 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
     rulesToInsert,
     dynamicThemeAccess,
     pseudoGroups,
-    mediaGroups
+    mediaGroups,
+    overriddenContextProps: styleState.overriddenContextProps
   }, asChildExceptStyleLike = asChild === "except-style" || asChild === "except-style-web";
   if (!styleProps2.noMergeStyle && !asChildExceptStyleLike) {
     var style2 = styleState.style;
@@ -3817,26 +3828,33 @@ function mergeFlatTransforms(target, flatTransforms) {
   });
 }
 function mergeStyle(styleState, key, val, importance) {
-  var {
+  var _staticConfig_context, _staticConfig_parentStaticConfig_context, _staticConfig_parentStaticConfig, {
     viewProps,
     styleProps: styleProps2,
     staticConfig,
     usedKeys
   } = styleState, existingImportance = usedKeys[key] || 0;
-  if (!(existingImportance > importance)) if (key in stylePropsTransform) {
-    var _styleState;
-    (_styleState = styleState).flatTransforms || (_styleState.flatTransforms = {}), usedKeys[key] = importance, styleState.flatTransforms[key] = val;
-  } else {
-    var shouldNormalize = isWeb, out = shouldNormalize ? normalizeValueWithProperty$1(val) : val;
-    if (
-      // accept is for props not styles
-      staticConfig.accept && key in staticConfig.accept
-    ) viewProps[key] = out;
-    else {
+  if (!(existingImportance > importance)) {
+    var contextProps = ((_staticConfig_context = staticConfig.context) === null || _staticConfig_context === void 0 ? void 0 : _staticConfig_context.props) || ((_staticConfig_parentStaticConfig = staticConfig.parentStaticConfig) === null || _staticConfig_parentStaticConfig === void 0 || (_staticConfig_parentStaticConfig_context = _staticConfig_parentStaticConfig.context) === null || _staticConfig_parentStaticConfig_context === void 0 ? void 0 : _staticConfig_parentStaticConfig_context.props);
+    if (contextProps && key in contextProps) {
+      var _styleState;
+      (_styleState = styleState).overriddenContextProps || (_styleState.overriddenContextProps = {}), styleState.overriddenContextProps[key] = val;
+    }
+    if (key in stylePropsTransform) {
       var _styleState1;
-      (_styleState1 = styleState).style || (_styleState1.style = {}), usedKeys[key] = importance, styleState.style[key] = // if you dont do this you'll be passing props.transform arrays directly here and then mutating them
-      // if theres any flatTransforms later, causing issues (mutating props is bad, in strict mode styles get borked)
-      key === "transform" && Array.isArray(out) ? [...out] : out;
+      (_styleState1 = styleState).flatTransforms || (_styleState1.flatTransforms = {}), usedKeys[key] = importance, styleState.flatTransforms[key] = val;
+    } else {
+      var shouldNormalize = isWeb, out = shouldNormalize ? normalizeValueWithProperty$1(val) : val;
+      if (
+        // accept is for props not styles
+        staticConfig.accept && key in staticConfig.accept
+      ) viewProps[key] = out;
+      else {
+        var _styleState2;
+        (_styleState2 = styleState).style || (_styleState2.style = {}), usedKeys[key] = importance, styleState.style[key] = // if you dont do this you'll be passing props.transform arrays directly here and then mutating them
+        // if theres any flatTransforms later, causing issues (mutating props is bad, in strict mode styles get borked)
+        key === "transform" && Array.isArray(out) ? [...out] : out;
+      }
     }
   }
 }
@@ -4107,7 +4125,7 @@ function _type_of$4(obj) {
   return obj && typeof Symbol < "u" && obj.constructor === Symbol ? "symbol" : typeof obj;
 }
 var useComponentState = function(props, animationDriver, staticConfig, config) {
-  var _animationDriver_usePresence, isHydrated = useDidFinishSSR(), needsHydration = !useIsClientOnly(), useAnimations = animationDriver == null ? void 0 : animationDriver.useAnimations, {
+  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(
     // performance: avoid creating object every render
@@ -4268,7 +4286,7 @@ function createComponent(staticConfig) {
       nextProps && (props = nextProps), overriddenContextProps = overrides;
     }
     var componentName2 = props.componentName || staticConfig.componentName;
-    var componentContext = React.useContext(ComponentContext), groupContextParent = React.useContext(GroupContext), animationDriver = componentContext.animationDriver, useAnimations = animationDriver == null ? void 0 : animationDriver.useAnimations, componentState = useComponentState(props, animationDriver, staticConfig), {
+    var componentContext = React.useContext(ComponentContext), groupContextParent = React.useContext(GroupContext), animationDriver = componentContext.animationDriver, useAnimations = animationDriver == null ? void 0 : animationDriver.useAnimations, componentState = useComponentState(props, (animationDriver == null ? void 0 : animationDriver.isStub) ? null : animationDriver, staticConfig), {
       disabled,
       groupName,
       hasAnimationProp,
@@ -4358,7 +4376,15 @@ function createComponent(staticConfig) {
       willBeAnimated,
       styledContext: styledContextValue
     }, themeName = (themeState == null ? void 0 : themeState.name) || "";
-    var splitStyles = useSplitStyles(props, staticConfig, theme, themeName, state, styleProps2, null, componentContext, allGroupContexts, elementType, startedUnhydrated, debugProp), isPassthrough = !splitStyles, groupContext = groupName && (allGroupContexts == null ? void 0 : allGroupContexts[groupName]) || null;
+    var splitStyles = useSplitStyles(props, staticConfig, theme, themeName, state, styleProps2, null, componentContext, allGroupContexts, elementType, startedUnhydrated, debugProp), 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];
+        staticConfig.context || (contextForOverride = contextForProps);
+      }
+    }
+    var groupContext = groupName && (allGroupContexts == null ? void 0 : allGroupContexts[groupName]) || null;
     if (!isPassthrough && groupContext && // avoids onLayout if we don't need it
     props.containerType !== "normal") {
       var groupState = groupContext == null ? void 0 : groupContext.state;
@@ -4400,8 +4426,8 @@ function createComponent(staticConfig) {
       }), stateRef.current.setStateShallow = function(nextOrGetNext) {
         var prev = stateRef.current.nextState || state, next = typeof nextOrGetNext == "function" ? nextOrGetNext(prev) : nextOrGetNext;
         if (!(next === prev || isEqualShallow(prev, next))) {
-          var canAvoidReRender = Object.keys(next).every(function(key2) {
-            return avoidReRenderKeys.has(key2);
+          var canAvoidReRender = Object.keys(next).every(function(key3) {
+            return avoidReRenderKeys.has(key3);
           }), updatedState = __spreadValues(__spreadValues({}, prev), next);
           if (stateRef.current.nextState = updatedState, canAvoidReRender) {
             var _stateRef_current_updateStyleListener, _stateRef_current;
@@ -4647,9 +4673,9 @@ function createComponent(staticConfig) {
     }))), "group" in props && (content = /* @__PURE__ */ jsxRuntimeExports.jsx(GroupContext.Provider, {
       value: allGroupContexts,
       children: content
-    })), content = disableTheme || !splitStyles ? content : getThemedChildren(themeState, content, themeStateProps, false, stateRef), overriddenContextProps) {
-      var Provider = staticConfig.context.Provider;
-      for (var key in styledContextValue) key in overriddenContextProps || (overriddenContextProps[key] = styledContextValue[key]);
+    })), content = disableTheme || !splitStyles ? content : getThemedChildren(themeState, content, themeStateProps, false, stateRef), overriddenContextProps && contextForOverride) {
+      var Provider = contextForOverride.Provider;
+      for (var key1 in styledContextValue) key1 in overriddenContextProps || (overriddenContextProps[key1] = styledContextValue[key1]);
       debugProp && console.info("overriddenContextProps", overriddenContextProps), content = /* @__PURE__ */ jsxRuntimeExports.jsx(Provider, __spreadProps(__spreadValues({
         __disableMergeDefaultValues: true
       }, overriddenContextProps), {
@@ -4995,6 +5021,35 @@ var cache$1 = /* @__PURE__ */ new WeakMap(), createVariables = function(tokens)
   }
   return cache$1.set(res, true), res;
 };
+var noAnimationDriver = function(method) {
+  console.warn(`No animation driver configured. To use ${method}, you must pass \`animations\` to createTamagui. See: https://tamagui.dev/docs/core/animations`);
+}, createEmptyAnimationDriver = function() {
+  return {
+    isReactNative: false,
+    supportsCSS: true,
+    classNameAnimation: true,
+    isStub: true,
+    animations: {},
+    useAnimations: function() {
+      return noAnimationDriver("animations");
+    },
+    usePresence: function() {
+      return noAnimationDriver("usePresence");
+    },
+    ResetPresence: function() {
+      return noAnimationDriver("ResetPresence");
+    },
+    useAnimatedNumber: function() {
+      return noAnimationDriver("useAnimatedNumber");
+    },
+    useAnimatedNumberStyle: function() {
+      return noAnimationDriver("useAnimatedNumberStyle");
+    },
+    useAnimatedNumberReaction: function() {
+      return noAnimationDriver("useAnimatedNumberReaction");
+    }
+  };
+}, defaultAnimationDriver = createEmptyAnimationDriver();
 function insertFont(name, fontIn) {
   var font = createFont(fontIn), tokened = createVariables(font, name), parsed = parseFont(tokened);
   return setConfigFont(name, tokened, parsed), parsed;
@@ -5078,7 +5133,7 @@ function createTamagui$2(configIn) {
     fonts: {},
     onlyAllowShorthands: false,
     fontLanguages: [],
-    animations: {},
+    animations: defaultAnimationDriver,
     media: {}
   }, configIn), {
     unset,
@@ -5128,8 +5183,7 @@ function getThemesDeduped(themes2, colorTokens) {
       e2.names.push(themeName);
       continue;
     }
-    var theme = __spreadValues({}, rawTheme);
-    colorTokens && Object.assign(theme, colorTokens);
+    var theme = __spreadValues(__spreadValues({}, colorTokens), rawTheme);
     for (var key1 in theme) ensureThemeVariable(theme, key1);
     var deduped = {
       names: [themeName],
@@ -9960,11 +10014,18 @@ var hiddenSize = 10000.1, relativeDimensionTo = "screen", SheetImplementationCus
   })(), [isShowingInnerSheet, setIsShowingInnerSheet] = React.useState(false), shouldHideParentSheet = modal && isShowingInnerSheet && // if not using weird portal limitation we dont need to hide parent sheet
   USE_NATIVE_PORTAL, sheetInsideSheet = React.useContext(SheetInsideSheetContext), onInnerSheet = React.useCallback(function(hasChild) {
     setIsShowingInnerSheet(hasChild);
-  }, []), positions = React.useMemo(function() {
+  }, []), stableFrameSize = React.useRef(frameSize);
+  React.useEffect(function() {
+    open2 && frameSize && (stableFrameSize.current = frameSize);
+  }, [open2, frameSize]);
+  var positions = React.useMemo(function() {
     return snapPoints.map(function(point) {
-      return getYPositions(snapPointsMode, point, screenSize, frameSize);
+      return (
+        // FIX: Use stable frameSize when closing to prevent position jumps
+        getYPositions(snapPointsMode, point, screenSize, open2 ? frameSize : stableFrameSize.current)
+      );
     });
-  }, [screenSize, frameSize, snapPoints, snapPointsMode]), {
+  }, [screenSize, frameSize, snapPoints, snapPointsMode, open2]), {
     useAnimatedNumber,
     useAnimatedNumberStyle,
     useAnimatedNumberReaction
@@ -10079,9 +10140,12 @@ var hiddenSize = 10000.1, relativeDimensionTo = "screen", SheetImplementationCus
       onPanResponderRelease: finish
     });
   }, [disableDrag, isShowingInnerSheet, animateTo, frameSize, positions, setPosition]), handleAnimationViewLayout = React.useCallback(function(e2) {
-    var _e_nativeEvent, next = Math.min((_e_nativeEvent = e2.nativeEvent) === null || _e_nativeEvent === void 0 ? void 0 : _e_nativeEvent.layout.height, Dimensions.get(relativeDimensionTo).height);
-    next && setFrameSize(next);
-  }, []), handleMaxContentViewLayout = React.useCallback(function(e2) {
+    var _e_nativeEvent;
+    if (!(!open2 && stableFrameSize.current !== 0)) {
+      var next = Math.min((_e_nativeEvent = e2.nativeEvent) === null || _e_nativeEvent === void 0 ? void 0 : _e_nativeEvent.layout.height, Dimensions.get(relativeDimensionTo).height);
+      next && setFrameSize(next);
+    }
+  }, [open2]), handleMaxContentViewLayout = React.useCallback(function(e2) {
     var _e_nativeEvent, next = Math.min((_e_nativeEvent = e2.nativeEvent) === null || _e_nativeEvent === void 0 ? void 0 : _e_nativeEvent.layout.height, Dimensions.get(relativeDimensionTo).height);
     next && setMaxContentSize(next);
   }, []), animatedStyle = useAnimatedNumberStyle(animatedNumber, function(val) {
@@ -10429,13 +10493,18 @@ function createSheet(param) {
       frameSize,
       contentRef,
       open: open2
-    } = context2, composedContentRef = useComposedRefs(forwardedRef, contentRef), offscreenSize = useSheetOffscreenSize(context2), sheetContents = React.useMemo(function() {
+    } = context2, composedContentRef = useComposedRefs(forwardedRef, contentRef), offscreenSize = useSheetOffscreenSize(context2), stableFrameSize = React.useRef(frameSize);
+    React.useEffect(function() {
+      open2 && frameSize && (stableFrameSize.current = frameSize);
+    }, [open2, frameSize]);
+    var sheetContents = React.useMemo(function() {
+      var shouldUseFixedHeight = hasFit && !open2 && stableFrameSize.current;
       return (
         // @ts-expect-error
         /* @__PURE__ */ jsxRuntimeExports.jsxs(Frame2, __spreadProps(__spreadValues({
           ref: composedContentRef,
-          flex: hasFit ? 0 : 1,
-          height: hasFit ? void 0 : frameSize,
+          flex: hasFit && open2 ? 0 : 1,
+          height: shouldUseFixedHeight ? stableFrameSize.current : hasFit ? void 0 : frameSize,
           pointerEvents: open2 ? "auto" : "none"
         }, props), {
           children: [/* @__PURE__ */ jsxRuntimeExports.jsx(StackZIndexContext, {
@@ -10646,7 +10715,9 @@ var DialogContext = createStyledContext(
           height: "auto",
           // ensure always in frame and right height
           maxHeight: "100vh",
-          position: "fixed"
+          position: "fixed",
+          // ensure dialog inherits stacking context from portal wrapper
+          zIndex: 1
         }
       }
     }
@@ -11477,6 +11548,8 @@ var ButtonContext = createStyledContext({
   context: ButtonContext,
   role: "button",
   focusable: true,
+  // forces runtime pressStyle so it passes through context text colors
+  disableClassName: true,
   variants: {
     unstyled: {
       false: {
@@ -14086,7 +14159,7 @@ var needsRepropagation = isAndroid || isIos && !USE_NATIVE_PORTAL, PopoverContex
     virtualRef
   }), {
     scope,
-    asChild: rest.asChild,
+    asChild: true,
     children: trigger
   }));
 }), PopoverContentFrame = styled(PopperContentFrame, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tamagui",
-  "version": "1.138.2",
+  "version": "1.138.4",
   "type": "module",
   "description": "Style and UI for React (web and native) meet an optimizing compiler",
   "removeSideEffects": true,
@@ -81,62 +81,62 @@
     }
   },
   "dependencies": {
-    "@tamagui/accordion": "1.138.2",
-    "@tamagui/adapt": "1.138.2",
-    "@tamagui/alert-dialog": "1.138.2",
-    "@tamagui/animate-presence": "1.138.2",
-    "@tamagui/avatar": "1.138.2",
-    "@tamagui/button": "1.138.2",
-    "@tamagui/card": "1.138.2",
-    "@tamagui/checkbox": "1.138.2",
-    "@tamagui/compose-refs": "1.138.2",
-    "@tamagui/constants": "1.138.2",
-    "@tamagui/core": "1.138.2",
-    "@tamagui/create-context": "1.138.2",
-    "@tamagui/dialog": "1.138.2",
-    "@tamagui/elements": "1.138.2",
-    "@tamagui/fake-react-native": "1.138.2",
-    "@tamagui/focusable": "1.138.2",
-    "@tamagui/font-size": "1.138.2",
-    "@tamagui/form": "1.138.2",
-    "@tamagui/get-button-sized": "1.138.2",
-    "@tamagui/get-font-sized": "1.138.2",
-    "@tamagui/get-token": "1.138.2",
-    "@tamagui/group": "1.138.2",
-    "@tamagui/helpers-tamagui": "1.138.2",
-    "@tamagui/image": "1.138.2",
-    "@tamagui/label": "1.138.2",
-    "@tamagui/linear-gradient": "1.138.2",
-    "@tamagui/list-item": "1.138.2",
-    "@tamagui/polyfill-dev": "1.138.2",
-    "@tamagui/popover": "1.138.2",
-    "@tamagui/popper": "1.138.2",
-    "@tamagui/portal": "1.138.2",
-    "@tamagui/progress": "1.138.2",
-    "@tamagui/radio-group": "1.138.2",
-    "@tamagui/react-native-media-driver": "1.138.2",
-    "@tamagui/scroll-view": "1.138.2",
-    "@tamagui/select": "1.138.2",
-    "@tamagui/separator": "1.138.2",
-    "@tamagui/shapes": "1.138.2",
-    "@tamagui/sheet": "1.138.2",
-    "@tamagui/slider": "1.138.2",
-    "@tamagui/stacks": "1.138.2",
-    "@tamagui/switch": "1.138.2",
-    "@tamagui/tabs": "1.138.2",
-    "@tamagui/text": "1.138.2",
-    "@tamagui/theme": "1.138.2",
-    "@tamagui/toggle-group": "1.138.2",
-    "@tamagui/tooltip": "1.138.2",
-    "@tamagui/use-controllable-state": "1.138.2",
-    "@tamagui/use-debounce": "1.138.2",
-    "@tamagui/use-force-update": "1.138.2",
-    "@tamagui/use-window-dimensions": "1.138.2",
-    "@tamagui/visually-hidden": "1.138.2",
-    "@tamagui/z-index-stack": "1.138.2"
+    "@tamagui/accordion": "1.138.4",
+    "@tamagui/adapt": "1.138.4",
+    "@tamagui/alert-dialog": "1.138.4",
+    "@tamagui/animate-presence": "1.138.4",
+    "@tamagui/avatar": "1.138.4",
+    "@tamagui/button": "1.138.4",
+    "@tamagui/card": "1.138.4",
+    "@tamagui/checkbox": "1.138.4",
+    "@tamagui/compose-refs": "1.138.4",
+    "@tamagui/constants": "1.138.4",
+    "@tamagui/core": "1.138.4",
+    "@tamagui/create-context": "1.138.4",
+    "@tamagui/dialog": "1.138.4",
+    "@tamagui/elements": "1.138.4",
+    "@tamagui/fake-react-native": "1.138.4",
+    "@tamagui/focusable": "1.138.4",
+    "@tamagui/font-size": "1.138.4",
+    "@tamagui/form": "1.138.4",
+    "@tamagui/get-button-sized": "1.138.4",
+    "@tamagui/get-font-sized": "1.138.4",
+    "@tamagui/get-token": "1.138.4",
+    "@tamagui/group": "1.138.4",
+    "@tamagui/helpers-tamagui": "1.138.4",
+    "@tamagui/image": "1.138.4",
+    "@tamagui/label": "1.138.4",
+    "@tamagui/linear-gradient": "1.138.4",
+    "@tamagui/list-item": "1.138.4",
+    "@tamagui/polyfill-dev": "1.138.4",
+    "@tamagui/popover": "1.138.4",
+    "@tamagui/popper": "1.138.4",
+    "@tamagui/portal": "1.138.4",
+    "@tamagui/progress": "1.138.4",
+    "@tamagui/radio-group": "1.138.4",
+    "@tamagui/react-native-media-driver": "1.138.4",
+    "@tamagui/scroll-view": "1.138.4",
+    "@tamagui/select": "1.138.4",
+    "@tamagui/separator": "1.138.4",
+    "@tamagui/shapes": "1.138.4",
+    "@tamagui/sheet": "1.138.4",
+    "@tamagui/slider": "1.138.4",
+    "@tamagui/stacks": "1.138.4",
+    "@tamagui/switch": "1.138.4",
+    "@tamagui/tabs": "1.138.4",
+    "@tamagui/text": "1.138.4",
+    "@tamagui/theme": "1.138.4",
+    "@tamagui/toggle-group": "1.138.4",
+    "@tamagui/tooltip": "1.138.4",
+    "@tamagui/use-controllable-state": "1.138.4",
+    "@tamagui/use-debounce": "1.138.4",
+    "@tamagui/use-force-update": "1.138.4",
+    "@tamagui/use-window-dimensions": "1.138.4",
+    "@tamagui/visually-hidden": "1.138.4",
+    "@tamagui/z-index-stack": "1.138.4"
   },
   "devDependencies": {
-    "@tamagui/build": "1.138.2",
+    "@tamagui/build": "1.138.4",
     "react": "*",
     "react-native": "0.81.5",
     "react-native-web": "^0.21.0"