@tamagui/core 1.88.17 → 1.88.19

package/dist/native.js

@@ -1694,7 +1694,7 @@ var require_useMedia_native = __commonJS({
       getMediaImportanceIfMoreImportant: () => getMediaImportanceIfMoreImportant,
       getMediaKeyImportance: () => getMediaKeyImportance,
       isMediaKey: () => isMediaKey,
-      mediaKeyMatch: () => mediaKeyMatch,
+      mediaKeyMatch: () => mediaKeyMatch2,
       mediaKeyToQuery: () => mediaKeyToQuery,
       mediaKeys: () => mediaKeys,
       mediaObjectToString: () => mediaObjectToString2,
@@ -1828,7 +1828,7 @@ var require_useMedia_native = __commonJS({
     function mediaKeyToQuery(key) {
       return cachedMediaKeyToQuery[key] || mediaObjectToString2(mediaQueryConfig2[key], key);
     }
-    function mediaKeyMatch(key, dimensions) {
+    function mediaKeyMatch2(key, dimensions) {
       let mediaQueries = mediaQueryConfig2[key];
       return Object.keys(mediaQueries).every((query) => {
         let expectedVal = +mediaQueries[query], isMax = query.startsWith("max"), isWidth = query.endsWith("Width"), givenVal = dimensions[isWidth ? "width" : "height"];
@@ -3675,7 +3675,7 @@ var require_getVariantExtras_native = __commonJS({
     module2.exports = __toCommonJS2(getVariantExtras_exports);
     var import_createVariable = require_createVariable_native();
     function getVariantExtras(styleState) {
-      let { curProps, conf, context, theme } = styleState, fonts = conf.fontsParsed;
+      let { curProps, props, conf, context, theme } = styleState, fonts = conf.fontsParsed;
       context != null && context.language && (fonts = getFontsForLanguage(conf.fontsParsed, context.language));
       let fontFamily = (0, import_createVariable.getVariableValue)(
         styleState.fontFamily || styleState.curProps.fontFamily || styleState.conf.defaultFont
@@ -3688,14 +3688,12 @@ var require_getVariantExtras_native = __commonJS({
         font: fonts[fontFamily] || fonts[styleState.conf.defaultFont],
         // TODO do this in splitstlye
         // we avoid passing in default props for media queries because that would confuse things like SizableText.size:
-        props: new Proxy(curProps, {
+        props: new Proxy(props, {
           // handles shorthands
           get(target, key) {
-            let shorthand = conf.inverseShorthands[key];
-            if (shorthand && Reflect.has(target, shorthand))
-              return Reflect.get(target, shorthand);
-            if (Reflect.has(target, key))
-              return Reflect.get(target, key);
+            for (let tryKey of [key, conf.inverseShorthands[key]])
+              if (tryKey)
+                return Reflect.has(curProps, tryKey) ? Reflect.get(curProps, tryKey) : Reflect.get(target, tryKey);
           }
         })
       };
@@ -3998,8 +3996,8 @@ var require_getSplitStyles_native = __commonJS({
         inlineWhenUnflattened,
         parentStaticConfig,
         acceptsClassName
-      } = staticConfig, viewProps = {}, mediaState2 = styleProps.mediaState || import_useMedia.mediaState, usedKeys = {}, shouldDoClasses = acceptsClassName && import_constants.isWeb && !styleProps.noClassNames, rulesToInsert = [], classNames = {}, transforms = {}, pseudos = null, space = props.space, hasMedia = !1, dynamicThemeAccess, pseudoGroups, mediaGroups, style = {}, className = props.className ?? "", mediaStylesSeen = 0, styleState = {
-        curProps: { ...props },
+      } = staticConfig, viewProps = {}, mediaState2 = styleProps.mediaState || import_useMedia.mediaState, usedKeys = {}, shouldDoClasses = acceptsClassName && import_constants.isWeb && !styleProps.noClassNames, rulesToInsert = void 0, classNames = {}, transforms = {}, pseudos = null, space = props.space, hasMedia = !1, dynamicThemeAccess, pseudoGroups, mediaGroups, style = {}, className = props.className || "", mediaStylesSeen = 0, styleState = {
+        curProps: {},
         classNames,
         conf,
         props,
@@ -4023,44 +4021,45 @@ var require_getSplitStyles_native = __commonJS({
         theme: { ...theme }
       }), console.groupEnd());
       for (let keyOg in props) {
-        process.env.NODE_ENV === "development" && console.groupEnd();
         let keyInit = keyOg, valInit = props[keyOg];
         if (styleProps.disableExpandShorthands || keyInit in shorthands && (keyInit = shorthands[keyInit]), keyInit === "className" || keyInit in usedKeys || keyInit in skipProps && !styleProps.noSkip && !isHOC)
           continue;
         let valInitType = typeof valInit, isValidStyleKeyInit = isValidStyleKey(keyInit, staticConfig);
-        if (styleState.curProps[keyInit] = valInit, !import_constants.isAndroid && keyInit === "elevationAndroid")
-          continue;
-        if (keyInit === "userSelect")
-          keyInit = "selectable", valInit = valInit !== "none";
-        else if (keyInit === "role") {
-          viewProps.accessibilityRole = import_accessibilityDirectMap.accessibilityWebRoleToNativeRole[valInit];
-          continue;
-        } else if (keyInit.startsWith("aria-")) {
-          if (import_accessibilityDirectMap.webToNativeAccessibilityDirectMap[keyInit]) {
-            let nativeA11yProp = import_accessibilityDirectMap.webToNativeAccessibilityDirectMap[keyInit];
-            keyInit === "aria-hidden" && (viewProps["aria-hidden"] = valInit), viewProps[nativeA11yProp] = valInit;
+        if (valInit !== props[keyInit] && (styleState.curProps[keyInit] = valInit), !isValidStyleKeyInit) {
+          if (!import_constants.isAndroid && keyInit === "elevationAndroid")
             continue;
-          }
-          if (import_accessibilityDirectMap.nativeAccessibilityValue[keyInit]) {
-            let field = import_accessibilityDirectMap.nativeAccessibilityValue[keyInit];
-            viewProps.accessibilityValue ? viewProps.accessibilityValue[field] = valInit : viewProps.accessibilityValue = {
-              [field]: valInit
-            };
-          } else if (import_accessibilityDirectMap.nativeAccessibilityState[keyInit]) {
-            let field = import_accessibilityDirectMap.nativeAccessibilityState[keyInit];
-            viewProps.accessibilityState ? viewProps.accessibilityState[field] = valInit : viewProps.accessibilityState = {
-              [field]: valInit
-            };
-          }
-          continue;
-        } else if (keyInit.startsWith("data-"))
-          continue;
+          if (keyInit === "userSelect")
+            keyInit = "selectable", valInit = valInit !== "none";
+          else if (keyInit === "role") {
+            viewProps.accessibilityRole = import_accessibilityDirectMap.accessibilityWebRoleToNativeRole[valInit];
+            continue;
+          } else if (keyInit.startsWith("aria-")) {
+            if (import_accessibilityDirectMap.webToNativeAccessibilityDirectMap[keyInit]) {
+              let nativeA11yProp = import_accessibilityDirectMap.webToNativeAccessibilityDirectMap[keyInit];
+              keyInit === "aria-hidden" && (viewProps["aria-hidden"] = valInit), viewProps[nativeA11yProp] = valInit;
+              continue;
+            }
+            if (import_accessibilityDirectMap.nativeAccessibilityValue[keyInit]) {
+              let field = import_accessibilityDirectMap.nativeAccessibilityValue[keyInit];
+              viewProps.accessibilityValue ? viewProps.accessibilityValue[field] = valInit : viewProps.accessibilityValue = {
+                [field]: valInit
+              };
+            } else if (import_accessibilityDirectMap.nativeAccessibilityState[keyInit]) {
+              let field = import_accessibilityDirectMap.nativeAccessibilityState[keyInit];
+              viewProps.accessibilityState ? viewProps.accessibilityState[field] = valInit : viewProps.accessibilityState = {
+                [field]: valInit
+              };
+            }
+            continue;
+          } else if (keyInit.startsWith("data-"))
+            continue;
+        }
         if (keyInit === "dataSet") {
           for (let keyInit2 in valInit)
             viewProps[`data-${hyphenate(keyInit2)}`] = valInit[keyInit2];
           continue;
         }
-        if (keyInit.startsWith("_style") && (0, import_isObj.isObj)(valInit)) {
+        if (!isValidStyleKeyInit && keyInit.startsWith("_style") && (0, import_isObj.isObj)(valInit)) {
           Object.assign(styleState.style, valInit);
           continue;
         }
@@ -4077,12 +4076,12 @@ var require_getSplitStyles_native = __commonJS({
             case "accessibilityRequired":
             default:
           }
-        let isShorthand = keyInit in shorthands, isVariant = !isValidStyleKeyInit && variants && keyInit in variants, isStyleLikeKey = isShorthand || isValidStyleKeyInit || isVariant, isPseudo = keyInit in import_helpers.validPseudoKeys, isMedia = !isStyleLikeKey && !isPseudo && (0, import_useMedia.isMediaKey)(keyInit), isMediaOrPseudo = !!(isMedia || isPseudo), isStyleProp = isMediaOrPseudo || isVariant && !styleProps.noExpand || isValidStyleKeyInit || isShorthand;
+        let isShorthand = keyInit in shorthands, isVariant = !isValidStyleKeyInit && variants && keyInit in variants, isStyleLikeKey = isShorthand || isValidStyleKeyInit || isVariant, isPseudo = keyInit in import_helpers.validPseudoKeys, isMedia = !isStyleLikeKey && !isPseudo && (0, import_useMedia.isMediaKey)(keyInit), isMediaOrPseudo = !!(isMedia || isPseudo), isStyleProp = isValidStyleKeyInit || isMediaOrPseudo || isVariant && !styleProps.noExpand || isShorthand;
         if (isStyleProp && (props.asChild === "except-style" || props.asChild === "except-style-web"))
           continue;
         let shouldPassProp = !isStyleProp || // is in parent variants
         isHOC && (parentStaticConfig == null ? void 0 : parentStaticConfig.variants) && keyInit in parentStaticConfig.variants || (inlineProps == null ? void 0 : inlineProps.has(keyInit)), parentVariant = (_a = parentStaticConfig == null ? void 0 : parentStaticConfig.variants) == null ? void 0 : _a[keyInit], isHOCShouldPassThrough = !!(isHOC && (isShorthand || isValidStyleKeyInit || isMediaOrPseudo || parentVariant || keyInit in skipProps)), shouldPassThrough = shouldPassProp || isHOCShouldPassThrough;
-        if (process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupEnd(), console.groupEnd(), console.groupCollapsed(
+        if (process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupCollapsed(
           `  \u{1F511} ${keyOg}${keyInit !== keyOg ? ` (shorthand for ${keyInit})` : ""} ${shouldPassThrough ? "(pass)" : ""}`
         ), (0, import_log.log)({ isVariant, valInit, shouldPassProp }), import_constants.isClient && (0, import_log.log)({
           variants,
@@ -4097,8 +4096,14 @@ var require_getSplitStyles_native = __commonJS({
           style[keyInit] = valInit;
           continue;
         }
-        let expanded = isMediaOrPseudo || !isVariant && !isValidStyleKeyInit ? [[keyInit, valInit]] : (0, import_propMapper.propMapper)(keyInit, valInit, styleState), next = (0, import_propMapper.getPropMappedFontFamily)(expanded);
-        if (next && (styleState.fontFamily = next), process.env.NODE_ENV === "development" && debug === "verbose") {
+        let avoidPropMap = isMediaOrPseudo || !isVariant && !isValidStyleKeyInit, expanded = avoidPropMap ? null : (0, import_propMapper.propMapper)(keyInit, valInit, styleState);
+        if (!avoidPropMap) {
+          if (!expanded)
+            continue;
+          let next = (0, import_propMapper.getPropMappedFontFamily)(expanded);
+          next && (styleState.fontFamily = next);
+        }
+        if (process.env.NODE_ENV === "development" && debug === "verbose") {
           console.groupCollapsed("  \u{1F4A0} expanded", keyInit, valInit);
           try {
             !import_constants.isServer && import_isDevTools.isDevTools && ((0, import_log.log)({
@@ -4121,192 +4126,195 @@ current`, {
           }
           console.groupEnd();
         }
-        if (expanded) {
-          for (let [key, val] of expanded)
-            if (!(val == null || key in usedKeys)) {
-              if (isPseudo = key in import_helpers.validPseudoKeys, isMedia = !isPseudo && !isValidStyleKeyInit && (0, import_useMedia.isMediaKey)(key), isMediaOrPseudo = !!(isMedia || isPseudo), isVariant = variants && key in variants, (inlineProps != null && inlineProps.has(key) || IS_STATIC && inlineWhenUnflattened != null && inlineWhenUnflattened.has(key)) && (viewProps[key] = props[key] ?? val), styleProps.noExpand && isPseudo || isHOC && (isMediaOrPseudo || ((_b = parentStaticConfig == null ? void 0 : parentStaticConfig.variants) == null ? void 0 : _b[keyInit]))) {
-                passDownProp(viewProps, key, val, isMediaOrPseudo), process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupCollapsed(` - passing down prop ${key}`), (0, import_log.log)({ val, after: { ...viewProps[key] } }), console.groupEnd());
+        let key = keyInit, val = valInit, max = expanded ? expanded.length : 1;
+        for (let i = 0; i < max; i++) {
+          if (expanded) {
+            let [k, v] = expanded[i];
+            key = k, val = v;
+          }
+          if (!(val == null || key in usedKeys)) {
+            if (isPseudo = key in import_helpers.validPseudoKeys, isMedia = !isPseudo && !isValidStyleKeyInit && (0, import_useMedia.isMediaKey)(key), isMediaOrPseudo = !!(isMedia || isPseudo), isVariant = variants && key in variants, (inlineProps != null && inlineProps.has(key) || IS_STATIC && inlineWhenUnflattened != null && inlineWhenUnflattened.has(key)) && (viewProps[key] = props[key] ?? val), styleProps.noExpand && isPseudo || isHOC && (isMediaOrPseudo || ((_b = parentStaticConfig == null ? void 0 : parentStaticConfig.variants) == null ? void 0 : _b[keyInit]))) {
+              passDownProp(viewProps, key, val, isMediaOrPseudo), process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupCollapsed(` - passing down prop ${key}`), (0, import_log.log)({ val, after: { ...viewProps[key] } }), console.groupEnd());
+              continue;
+            }
+            if (isPseudo) {
+              if (!val)
+                continue;
+              let pseudoStyleObject = getSubStyle(
+                styleState,
+                key,
+                val,
+                styleProps.noClassNames
+              ), descriptor = import_pseudoDescriptors.pseudoDescriptors[key], isEnter = key === "enterStyle", isExit = key === "exitStyle";
+              if (!descriptor)
+                continue;
+              if ((!shouldDoClasses || IS_STATIC) && (pseudos || (pseudos = {}), pseudos[key] || (pseudos[key] = {}), IS_STATIC)) {
+                Object.assign(pseudos[key], pseudoStyleObject);
                 continue;
               }
-              if (isPseudo) {
-                if (!val)
-                  continue;
-                let pseudoStyleObject = getSubStyle(
-                  styleState,
-                  key,
-                  val,
-                  styleProps.noClassNames
-                ), descriptor = import_pseudoDescriptors.pseudoDescriptors[key], isEnter = key === "enterStyle", isExit = key === "exitStyle";
-                if (!descriptor)
-                  continue;
-                if ((!shouldDoClasses || IS_STATIC) && (pseudos || (pseudos = {}), pseudos[key] || (pseudos[key] = {}), IS_STATIC)) {
-                  Object.assign(pseudos[key], pseudoStyleObject);
-                  continue;
-                }
-                if (shouldDoClasses && !isExit) {
-                  let pseudoStyles = (0, import_getStylesAtomic.generateAtomicStyles)(pseudoStyleObject, descriptor);
-                  process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupCollapsed("pseudo (classes)", key), (0, import_log.log)({ pseudoStyleObject, pseudoStyles }), console.groupEnd());
-                  for (let psuedoStyle of pseudoStyles)
-                    `${psuedoStyle.property}${PROP_SPLIT}${descriptor.name}` in usedKeys || psuedoStyle.identifier;
-                }
-                if (!shouldDoClasses || isExit || isEnter) {
-                  let descriptorKey = descriptor.stateKey || descriptor.name, isDisabled = componentState[descriptorKey] === !1;
-                  isExit && (isDisabled = !styleProps.isExiting), isEnter && (isDisabled = componentState.unmounted === "should-enter" ? !0 : !componentState.unmounted), process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupCollapsed("pseudo", key, { isDisabled }), (0, import_log.log)({ pseudoStyleObject, isDisabled, descriptor, componentState }), console.groupEnd());
-                  let importance = descriptor.priority;
-                  for (let pkey in pseudoStyleObject) {
-                    let val2 = pseudoStyleObject[pkey];
-                    if (isDisabled) {
-                      let defaultValues = animatableDefaults[pkey];
-                      defaultValues != null && !(pkey in usedKeys) && mergeStyle(styleState, pkey, defaultValues);
-                    } else {
-                      let curImportance = usedKeys[pkey] || 0, shouldMerge = importance >= curImportance;
-                      shouldMerge && (pseudos || (pseudos = {}), pseudos[key] || (pseudos[key] = {}), pseudos[key][pkey] = val2, mergeStyle(styleState, pkey, val2)), process.env.NODE_ENV === "development" && debug === "verbose" && (0, import_log.log)("    subKey", pkey, shouldMerge, {
-                        importance,
-                        curImportance,
-                        pkey,
-                        val: val2,
-                        transforms: { ...styleState.transforms }
-                      });
-                    }
+              if (shouldDoClasses && !isExit) {
+                let pseudoStyles = (0, import_getStylesAtomic.generateAtomicStyles)(pseudoStyleObject, descriptor);
+                process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupCollapsed("pseudo (classes)", key), (0, import_log.log)({ pseudoStyleObject, pseudoStyles }), console.groupEnd());
+                for (let psuedoStyle of pseudoStyles)
+                  `${psuedoStyle.property}${PROP_SPLIT}${descriptor.name}` in usedKeys || psuedoStyle.identifier;
+              }
+              if (!shouldDoClasses || isExit || isEnter) {
+                let descriptorKey = descriptor.stateKey || descriptor.name, isDisabled = componentState[descriptorKey] === !1;
+                isExit && (isDisabled = !styleProps.isExiting), isEnter && (isDisabled = componentState.unmounted === "should-enter" ? !0 : !componentState.unmounted), process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupCollapsed("pseudo", key, { isDisabled }), (0, import_log.log)({ pseudoStyleObject, isDisabled, descriptor, componentState }), console.groupEnd());
+                let importance = descriptor.priority;
+                for (let pkey in pseudoStyleObject) {
+                  let val2 = pseudoStyleObject[pkey];
+                  if (isDisabled) {
+                    let defaultValues = animatableDefaults[pkey];
+                    defaultValues != null && !(pkey in usedKeys) && !(pkey in styleState.style) && mergeStyle(styleState, pkey, defaultValues);
+                  } else {
+                    let curImportance = usedKeys[pkey] || 0, shouldMerge = importance >= curImportance;
+                    shouldMerge && (pseudos || (pseudos = {}), pseudos[key] || (pseudos[key] = {}), pseudos[key][pkey] = val2, mergeStyle(styleState, pkey, val2)), process.env.NODE_ENV === "development" && debug === "verbose" && (0, import_log.log)("    subKey", pkey, shouldMerge, {
+                      importance,
+                      curImportance,
+                      pkey,
+                      val: val2,
+                      transforms: { ...styleState.transforms }
+                    });
                   }
-                  if (!isDisabled)
-                    for (let key2 in val) {
-                      let k = shorthands[key2] || key2;
-                      usedKeys[k] = Math.max(importance, usedKeys[k] || 0);
-                    }
                 }
+                if (!isDisabled)
+                  for (let key2 in val) {
+                    let k = shorthands[key2] || key2;
+                    usedKeys[k] = Math.max(importance, usedKeys[k] || 0);
+                  }
+              }
+              continue;
+            }
+            if (isMedia) {
+              if (!val)
                 continue;
+              if (isMedia === "platform") {
+                let platform = key.slice(10);
+                if (
+                  // supports web, ios, android
+                  platform !== import_constants.currentPlatform && // supports web, native
+                  platform !== "native"
+                )
+                  continue;
               }
-              if (isMedia) {
-                if (!val)
+              hasMedia || (hasMedia = !0);
+              let mediaStyle = getSubStyle(
+                styleState,
+                key,
+                val,
+                // TODO try true like pseudo
+                !1
+              ), mediaKeyShort = key.slice(1);
+              process.env.NODE_ENV === "development" && debug === "verbose" && (0, import_log.log)(`  \u{1F4FA} ${key}`, {
+                key,
+                val,
+                mediaStyle,
+                props,
+                shouldDoClasses,
+                componentState
+              });
+              let hasSpace = val.space;
+              if ((hasSpace || !shouldDoClasses) && (Array.isArray(hasMedia) || (hasMedia = []), hasMedia.push(mediaKeyShort)), shouldDoClasses) {
+                if (hasSpace && (delete mediaStyle.space, mediaState2[mediaKeyShort])) {
+                  let importance = (0, import_useMedia.getMediaImportanceIfMoreImportant)(
+                    mediaKeyShort,
+                    "space",
+                    usedKeys,
+                    !0
+                  );
+                  importance && (space = val.space, usedKeys.space = importance, process.env.NODE_ENV === "development" && debug === "verbose" && (0, import_log.log)(
+                    `Found more important space for current media ${mediaKeyShort}: ${val} (importance: ${importance})`
+                  ));
+                }
+                let mediaStyles = (0, import_getStylesAtomic.getStylesAtomic)(mediaStyle, debug), priority = mediaStylesSeen;
+                mediaStylesSeen += 1;
+                for (let style2 of mediaStyles) {
+                  let out = (0, import_createMediaStyle.createMediaStyle)(
+                    style2,
+                    mediaKeyShort,
+                    import_useMedia.mediaQueryConfig,
+                    isMedia,
+                    !1,
+                    priority
+                  );
+                  process.env.NODE_ENV === "development" && debug === "verbose" && (0, import_log.log)("\u{1F4FA} media style:", out), `${style2.property}${PROP_SPLIT}${mediaKeyShort}` in usedKeys || out.identifier;
+                }
+              } else {
+                let isThemeMedia = isMedia === "theme", isGroupMedia = isMedia === "group";
+                if (!isThemeMedia && isMedia !== "platform" && !isGroupMedia && !mediaState2[mediaKeyShort])
                   continue;
-                if (isMedia === "platform") {
-                  let platform = key.slice(10);
-                  if (
-                    // supports web, ios, android
-                    platform !== import_constants.currentPlatform && // supports web, native
-                    platform !== "native"
-                  )
+                let importanceBump = 0;
+                if (isThemeMedia) {
+                  dynamicThemeAccess = !0;
+                  let mediaThemeName = mediaKeyShort.slice(6);
+                  if (!(themeName === mediaThemeName || themeName.startsWith(mediaThemeName)))
                     continue;
-                }
-                hasMedia || (hasMedia = !0);
-                let mediaStyle = getSubStyle(
-                  styleState,
-                  key,
-                  val,
-                  // TODO try true like pseudo
-                  !1
-                ), mediaKeyShort = key.slice(1);
-                process.env.NODE_ENV === "development" && debug === "verbose" && (0, import_log.log)(`  \u{1F4FA} ${key}`, {
-                  key,
-                  val,
-                  mediaStyle,
-                  props,
-                  shouldDoClasses,
-                  componentState
-                });
-                let hasSpace = val.space;
-                if ((hasSpace || !shouldDoClasses) && (Array.isArray(hasMedia) || (hasMedia = []), hasMedia.push(mediaKeyShort)), shouldDoClasses) {
-                  if (hasSpace && (delete mediaStyle.space, mediaState2[mediaKeyShort])) {
-                    let importance = (0, import_useMedia.getMediaImportanceIfMoreImportant)(
-                      mediaKeyShort,
-                      "space",
-                      usedKeys,
-                      !0
-                    );
-                    importance && (space = val.space, usedKeys.space = importance, process.env.NODE_ENV === "development" && debug === "verbose" && (0, import_log.log)(
-                      `Found more important space for current media ${mediaKeyShort}: ${val} (importance: ${importance})`
-                    ));
-                  }
-                  let mediaStyles = (0, import_getStylesAtomic.getStylesAtomic)(mediaStyle, debug), priority = mediaStylesSeen;
-                  mediaStylesSeen += 1;
-                  for (let style2 of mediaStyles) {
-                    let out = (0, import_createMediaStyle.createMediaStyle)(
-                      style2,
-                      mediaKeyShort,
-                      import_useMedia.mediaQueryConfig,
-                      isMedia,
-                      !1,
-                      priority
-                    );
-                    process.env.NODE_ENV === "development" && debug === "verbose" && (0, import_log.log)("\u{1F4FA} media style:", out), `${style2.property}${PROP_SPLIT}${mediaKeyShort}` in usedKeys || out.identifier;
-                  }
-                } else {
-                  let isThemeMedia = isMedia === "theme", isGroupMedia = isMedia === "group";
-                  if (!isThemeMedia && isMedia !== "platform" && !isGroupMedia && !mediaState2[mediaKeyShort])
+                } else if (isGroupMedia) {
+                  let groupInfo = (0, import_getGroupPropParts.getGroupPropParts)(mediaKeyShort), groupName = groupInfo.name, groupContext = context == null ? void 0 : context.groups.state[groupName];
+                  if (!groupContext) {
+                    process.env.NODE_ENV === "development" && debug && console.warn(`No parent with group prop, skipping styles: ${groupName}`);
                     continue;
-                  let importanceBump = 0;
-                  if (isThemeMedia) {
-                    dynamicThemeAccess = !0;
-                    let mediaThemeName = mediaKeyShort.slice(6);
-                    if (!(themeName === mediaThemeName || themeName.startsWith(mediaThemeName)))
-                      continue;
-                  } else if (isGroupMedia) {
-                    let groupInfo = (0, import_getGroupPropParts.getGroupPropParts)(mediaKeyShort), groupName = groupInfo.name, groupContext = context == null ? void 0 : context.groups.state[groupName];
-                    if (!groupContext) {
-                      process.env.NODE_ENV === "development" && debug && console.warn(`No parent with group prop, skipping styles: ${groupName}`);
+                  }
+                  let groupPseudoKey = groupInfo.pseudo, groupMediaKey = groupInfo.media, componentGroupState = (_c = componentState.group) == null ? void 0 : _c[groupName];
+                  if (groupMediaKey) {
+                    mediaGroups || (mediaGroups = /* @__PURE__ */ new Set()), mediaGroups.add(groupMediaKey);
+                    let mediaState22 = componentGroupState == null ? void 0 : componentGroupState.media, isActive = mediaState22 == null ? void 0 : mediaState22[groupMediaKey];
+                    if (!mediaState22 && groupContext.layout && (isActive = (0, import_useMedia.mediaKeyMatch)(groupMediaKey, groupContext.layout)), !isActive)
                       continue;
-                    }
-                    let groupPseudoKey = groupInfo.pseudo, groupMediaKey = groupInfo.media, componentGroupState = (_c = componentState.group) == null ? void 0 : _c[groupName];
-                    if (groupMediaKey) {
-                      mediaGroups || (mediaGroups = /* @__PURE__ */ new Set()), mediaGroups.add(groupMediaKey);
-                      let mediaState22 = componentGroupState == null ? void 0 : componentGroupState.media, isActive = mediaState22 == null ? void 0 : mediaState22[groupMediaKey];
-                      if (!mediaState22 && groupContext.layout && (isActive = (0, import_useMedia.mediaKeyMatch)(groupMediaKey, groupContext.layout)), !isActive)
-                        continue;
-                      importanceBump = 2;
-                    }
-                    if (groupPseudoKey) {
-                      pseudoGroups || (pseudoGroups = /* @__PURE__ */ new Set()), pseudoGroups.add(groupName);
-                      let componentGroupPseudoState = (componentGroupState || // fallback to context initially
-                      context.groups.state[groupName]).pseudo;
-                      if (!(componentGroupPseudoState != null && componentGroupPseudoState[groupPseudoKey]))
-                        continue;
-                      importanceBump = import_pseudoDescriptors.pseudoPriorities[groupPseudoKey];
-                    }
+                    importanceBump = 2;
                   }
-                  for (let subKey in mediaStyle) {
-                    if (subKey === "space") {
-                      space = valInit.space;
+                  if (groupPseudoKey) {
+                    pseudoGroups || (pseudoGroups = /* @__PURE__ */ new Set()), pseudoGroups.add(groupName);
+                    let componentGroupPseudoState = (componentGroupState || // fallback to context initially
+                    context.groups.state[groupName]).pseudo;
+                    if (!(componentGroupPseudoState != null && componentGroupPseudoState[groupPseudoKey]))
                       continue;
-                    }
-                    (0, import_useMedia.mergeMediaByImportance)(
-                      style,
-                      mediaKeyShort,
-                      subKey,
-                      mediaStyle[subKey],
-                      usedKeys,
-                      mediaState2[mediaKeyShort],
-                      importanceBump
-                    ), key === "fontFamily" && (styleState.fontFamily = mediaStyle.fontFamily);
+                    importanceBump = import_pseudoDescriptors.pseudoPriorities[groupPseudoKey];
                   }
                 }
-                continue;
-              }
-              if (key === "pointerEvents") {
-                viewProps[key] = val;
-                continue;
-              }
-              if (
-                // is HOC we can just pass through the styles as props
-                // this fixes issues where style prop got merged with wrong priority
-                !isHOC && (isValidStyleKey(key, staticConfig) || import_constants.isAndroid && key === "elevation")
-              ) {
-                mergeStyle(styleState, key, val);
-                continue;
+                for (let subKey in mediaStyle) {
+                  if (subKey === "space") {
+                    space = valInit.space;
+                    continue;
+                  }
+                  (0, import_useMedia.mergeMediaByImportance)(
+                    style,
+                    mediaKeyShort,
+                    subKey,
+                    mediaStyle[subKey],
+                    usedKeys,
+                    mediaState2[mediaKeyShort],
+                    importanceBump
+                  ), key === "fontFamily" && (styleState.fontFamily = mediaStyle.fontFamily);
+                }
               }
-              isVariant || (viewProps[key] = val);
+              continue;
             }
-          if (process.env.NODE_ENV === "development" && debug === "verbose") {
-            console.groupCollapsed(" \u2714\uFE0F expand complete", keyInit);
-            try {
-              (0, import_log.log)("style", { ...style }), (0, import_log.log)("transforms", { ...transforms }), (0, import_log.log)("viewProps", { ...viewProps });
-            } catch {
+            if (key === "pointerEvents") {
+              viewProps[key] = val;
+              continue;
             }
-            console.groupEnd();
+            if (
+              // is HOC we can just pass through the styles as props
+              // this fixes issues where style prop got merged with wrong priority
+              !isHOC && (isValidStyleKey(key, staticConfig) || import_constants.isAndroid && key === "elevation")
+            ) {
+              mergeStyle(styleState, key, val);
+              continue;
+            }
+            isVariant || (viewProps[key] = val);
+          }
+        }
+        if (process.env.NODE_ENV === "development" && debug === "verbose") {
+          try {
+            (0, import_log.log)(" \u2714\uFE0F expand complete", keyInit), (0, import_log.log)("style", { ...style }), (0, import_log.log)("transforms", { ...transforms }), (0, import_log.log)("viewProps", { ...viewProps });
+          } catch {
           }
+          console.groupEnd();
         }
       }
-      if (process.env.NODE_ENV === "development" && console.groupEnd(), props.style)
+      if (props.style)
         if (isHOC)
           viewProps.style = props.style;
         else
@@ -4382,13 +4390,7 @@ current`, {
             !avoidMergeTransform && skey in import_helpers.stylePropsTransform ? mergeTransform(styleOut, skey, sval) : styleOut[skey] = styleProps.noNormalize ? sval : (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(sval, key);
       }
       return styleProps.noNormalize || (0, import_expandStyles.fixStyles)(styleOut), styleOut;
-    }, useInsertEffectCompat = import_constants.isWeb ? import_react3.useInsertionEffect || import_constants.useIsomorphicLayoutEffect : () => {
-    }, useSplitStyles = (...args) => {
-      let res = getSplitStyles(...args);
-      return useInsertEffectCompat(() => {
-        (0, import_insertStyleRule.insertStyleRules)(res.rulesToInsert);
-      }, [res.rulesToInsert]), res;
-    }, animatableDefaults = {
+    }, useSplitStyles = (a, b, c, d, e, f, g, h, i, j) => getSplitStyles(a, b, c, d, e, f, g, h, i, j), animatableDefaults = {
       opacity: 1,
       scale: 1,
       rotate: "0deg",
@@ -4927,7 +4929,7 @@ var require_createComponent_native = __commonJS({
         let isStringElement = typeof elementType == "string";
         process.env.NODE_ENV === "development" && time && time`theme`;
         let mediaState2 = (0, import_useMedia.useMedia)(stateRef, componentContext);
-        process.env.NODE_ENV === "development" && time && time`media`, (0, import_createVariable.setDidGetVariableValue)(!1);
+        (0, import_createVariable.setDidGetVariableValue)(!1), process.env.NODE_ENV === "development" && time && time`media`;
         let resolveValues = (
           // if HOC + mounted + has animation prop, resolve as value so it passes non-variable to child
           isAnimated && !supportsCSSVars || isHOC && state.unmounted == !1 && hasAnimationProp ? "value" : "auto"
@@ -5221,8 +5223,9 @@ If you meant to do this, you can disable this warning - either change untilMeasu
                 willBeAnimated
               }));
             } catch {
+            } finally {
+              console.groupEnd();
             }
-            console.groupEnd();
           } else {
             (0, import_log.log)(title), (0, import_log.log)("final styles:");
             for (let key in splitStylesStyle)
@@ -6720,6 +6723,7 @@ var require_index_native9 = __commonJS({
       getToken: () => import_config.getToken,
       getTokenValue: () => import_config.getTokenValue,
       getTokens: () => import_config.getTokens,
+      mediaKeyMatch: () => import_useMedia.mediaKeyMatch,
       mediaObjectToString: () => import_useMedia.mediaObjectToString,
       mediaQueryConfig: () => import_useMedia.mediaQueryConfig,
       mediaState: () => import_useMedia.mediaState,