@tamagui/web 1.61.2 → 1.62.0

package/dist/cjs/helpers/getSplitStyles.js

@@ -1,21 +1,17 @@
-"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
+    __defProp(target, name, { get: all[name], enumerable: !0 });
+}, __copyProps = (to, from, except, desc) => {
+  if (from && typeof from == "object" || typeof from == "function")
     for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
+      !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   return to;
 };
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
 var getSplitStyles_exports = {};
 __export(getSplitStyles_exports, {
   PROP_SPLIT: () => PROP_SPLIT,
@@ -24,30 +20,12 @@ __export(getSplitStyles_exports, {
   useSplitStyles: () => useSplitStyles
 });
 module.exports = __toCommonJS(getSplitStyles_exports);
-var import_constants = require("@tamagui/constants");
-var import_helpers = require("@tamagui/helpers");
-var import_react = require("react");
-var import_config = require("../config");
-var import_accessibilityDirectMap = require("../constants/accessibilityDirectMap");
-var import_isDevTools = require("../constants/isDevTools");
-var import_useMedia = require("../hooks/useMedia");
-var import_createMediaStyle = require("./createMediaStyle");
-var import_expandStyles = require("./expandStyles");
-var import_getGroupPropParts = require("./getGroupPropParts");
-var import_getStylesAtomic = require("./getStylesAtomic");
-var import_insertStyleRule = require("./insertStyleRule");
-var import_normalizeValueWithProperty = require("./normalizeValueWithProperty");
-var import_propMapper = require("./propMapper");
-var import_pseudoDescriptors = require("./pseudoDescriptors");
-const fontFamilyKey = "fontFamily";
-const IS_STATIC = process.env.IS_STATIC === "is_static";
+var import_constants = require("@tamagui/constants"), import_helpers = require("@tamagui/helpers"), import_react = require("react"), import_config = require("../config"), import_accessibilityDirectMap = require("../constants/accessibilityDirectMap"), import_isDevTools = require("../constants/isDevTools"), import_useMedia = require("../hooks/useMedia"), import_createMediaStyle = require("./createMediaStyle"), import_expandStyles = require("./expandStyles"), import_getGroupPropParts = require("./getGroupPropParts"), import_getStylesAtomic = require("./getStylesAtomic"), import_insertStyleRule = require("./insertStyleRule"), import_normalizeValueWithProperty = require("./normalizeValueWithProperty"), import_propMapper = require("./propMapper"), import_pseudoDescriptors = require("./pseudoDescriptors");
+const fontFamilyKey = "fontFamily", IS_STATIC = process.env.IS_STATIC === "is_static";
 let conf;
-const PROP_SPLIT = "-";
-const getSplitStyles = (props, staticConfig, theme, themeName, componentState, styleProps, parentSplitStyles, context, elementType, debug) => {
-  var _a, _b, _c, _d, _e, _f, _g;
+const PROP_SPLIT = "-", getSplitStyles = (props, staticConfig, theme, themeName, componentState, styleProps, parentSplitStyles, context, elementType, debug) => {
   conf = conf || (0, import_config.getConfig)();
-  const { shorthands } = conf;
-  const {
+  const { shorthands } = conf, {
     isHOC,
     isText,
     variants,
@@ -56,24 +34,8 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
     inlineWhenUnflattened,
     parentStaticConfig,
     acceptsClassName
-  } = staticConfig;
-  const validStyleProps = isText ? import_helpers.stylePropsText : import_helpers.validStyles;
-  const viewProps = {};
-  const mediaState = styleProps.mediaState || import_useMedia.mediaState;
-  const usedKeys = {};
-  const shouldDoClasses = acceptsClassName && import_constants.isWeb && !styleProps.noClassNames;
-  const rulesToInsert = [];
-  const classNames = {};
-  const transforms = {};
-  let pseudos = null;
-  let space = props.space;
-  let hasMedia = false;
-  let dynamicThemeAccess;
-  let pseudoGroups;
-  let mediaGroups;
-  let style = {};
-  let className = "";
-  let mediaStylesSeen = 0;
+  } = staticConfig, validStyleProps = isText ? import_helpers.stylePropsText : import_helpers.validStyles, viewProps = {}, mediaState = styleProps.mediaState || import_useMedia.mediaState, usedKeys = {}, shouldDoClasses = acceptsClassName && import_constants.isWeb && !styleProps.noClassNames, rulesToInsert = [], classNames = {}, transforms = {};
+  let pseudos = null, space = props.space, hasMedia = !1, dynamicThemeAccess, pseudoGroups, mediaGroups, style = {}, className = "", mediaStylesSeen = 0;
   const styleState = {
     curProps: Object.assign({}, props),
     classNames,
@@ -89,432 +51,223 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
     context,
     debug
   };
-  if (process.env.NODE_ENV === "development" && debug && debug !== "profile" && import_constants.isClient) {
-    console.groupCollapsed("getSplitStyles (collapsed)");
-    console.log({
-      props,
-      staticConfig,
-      shouldDoClasses,
-      styleProps,
-      componentState,
-      styleState,
-      theme: { ...theme }
-    });
-    console.groupEnd();
-  }
-  if (process.env.TAMAGUI_TARGET === "web" && typeof props.className === "string") {
-    for (const cn of props.className.split(" ")) {
+  if (process.env.NODE_ENV === "development" && debug && debug !== "profile" && import_constants.isClient && (console.groupCollapsed("getSplitStyles (collapsed)"), console.log({
+    props,
+    staticConfig,
+    shouldDoClasses,
+    styleProps,
+    componentState,
+    styleState,
+    theme: { ...theme }
+  }), console.groupEnd()), typeof props.className == "string")
+    for (const cn of props.className.split(" "))
       if (cn[0] === "_") {
-        const [shorthand, mediaOrPseudo] = cn.slice(1).split("-");
-        const isMedia = mediaOrPseudo[0] === "_";
-        const isPseudo = mediaOrPseudo[0] === "0";
-        const isMediaOrPseudo = isMedia || isPseudo;
+        const [shorthand, mediaOrPseudo] = cn.slice(1).split("-"), isMedia = mediaOrPseudo[0] === "_", isPseudo = mediaOrPseudo[0] === "0", isMediaOrPseudo = isMedia || isPseudo;
         let fullKey = shorthands[shorthand];
         if (isMedia) {
           let mediaShortKey = mediaOrPseudo.slice(1);
-          mediaShortKey = mediaShortKey.slice(0, mediaShortKey.indexOf("_"));
-          fullKey += `${PROP_SPLIT}${mediaShortKey}`;
+          mediaShortKey = mediaShortKey.slice(0, mediaShortKey.indexOf("_")), fullKey += `${PROP_SPLIT}${mediaShortKey}`;
         } else if (isPseudo) {
           const pseudoShortKey = mediaOrPseudo.slice(1);
           fullKey += `${PROP_SPLIT}${pseudoShortKey}`;
         }
-        usedKeys[fullKey] = 1;
-        mergeClassName(transforms, classNames, fullKey, cn, isMediaOrPseudo);
-      } else if (cn) {
-        className += ` ${cn}`;
-      }
-    }
-  }
+        usedKeys[fullKey] = 1, mergeClassName(transforms, classNames, fullKey, cn, isMediaOrPseudo);
+      } else
+        cn && (className += ` ${cn}`);
   for (const keyOg in props) {
-    let keyInit = keyOg;
-    let valInit = props[keyOg];
-    if (keyInit in shorthands) {
-      keyInit = shorthands[keyInit];
-    }
-    if (keyInit === "className")
-      continue;
-    if (keyInit in usedKeys)
+    let keyInit = keyOg, valInit = props[keyOg];
+    if (keyInit in shorthands && (keyInit = shorthands[keyInit]), keyInit === "className" || keyInit in usedKeys)
       continue;
     if (keyInit in skipProps && !isHOC) {
       if (keyInit === "group") {
-        if (process.env.TAMAGUI_TARGET === "web") {
-          const identifier = `t_group_${valInit}`;
-          const containerCSS = {
-            identifier,
-            property: "container",
-            rules: [
-              `.${identifier} { container-name: ${valInit}; container-type: inline-size; }`
-            ]
-          };
-          addStyleToInsertRules(rulesToInsert, containerCSS);
-        }
+        const identifier = `t_group_${valInit}`, containerCSS = {
+          identifier,
+          property: "container",
+          rules: [
+            `.${identifier} { container-name: ${valInit}; container-type: inline-size; }`
+          ]
+        };
+        addStyleToInsertRules(rulesToInsert, containerCSS);
       }
       continue;
     }
     const valInitType = typeof valInit;
-    styleState.curProps[keyInit] = valInit;
-    if (process.env.TAMAGUI_TARGET === "web") {
-      if (valInitType === "string" && valInit[0] === "_") {
-        if (keyInit in validStyleProps || keyInit.includes("-")) {
-          if (process.env.NODE_ENV === "development" && debug) {
-            console.log(`Adding compiled style ${keyInit}: ${valInit}`);
-          }
-          if (shouldDoClasses) {
-            classNames[keyInit] = valInit;
-            delete style[keyInit];
-          } else {
-            style[keyInit] = (0, import_normalizeValueWithProperty.reverseMapClassNameToValue)(keyInit, valInit);
-            delete className[keyInit];
-          }
-          continue;
-        }
-      }
-    }
-    if (process.env.TAMAGUI_TARGET === "native") {
-      if (!import_constants.isAndroid) {
-        if (keyInit === "elevationAndroid")
-          continue;
-      }
-      if (keyInit === "userSelect") {
-        keyInit = "selectable";
-        valInit = valInit === "none" ? false : true;
-      } else if (keyInit === "role") {
-        viewProps["accessibilityRole"] = import_accessibilityDirectMap.accessibilityWebRoleToNativeRole[valInit];
-        continue;
-      } else if (keyInit.startsWith("aria-")) {
-        if (import_accessibilityDirectMap.webToNativeAccessibilityDirectMap[keyInit]) {
-          const nativeA11yProp = import_accessibilityDirectMap.webToNativeAccessibilityDirectMap[keyInit];
-          if (keyInit === "aria-hidden") {
-            viewProps["aria-hidden"] = valInit;
-          }
-          viewProps[nativeA11yProp] = valInit;
-          continue;
-        } else if (import_accessibilityDirectMap.nativeAccessibilityValue[keyInit]) {
-          let field = import_accessibilityDirectMap.nativeAccessibilityValue[keyInit];
-          if (viewProps["accessibilityValue"]) {
-            viewProps["accessibilityValue"][field] = valInit;
-          } else {
-            viewProps["accessibilityValue"] = {
-              [field]: valInit
-            };
-          }
-        } else if (import_accessibilityDirectMap.nativeAccessibilityState[keyInit]) {
-          let field = import_accessibilityDirectMap.nativeAccessibilityState[keyInit];
-          if (viewProps["accessibilityState"]) {
-            viewProps["accessibilityState"][field] = valInit;
-          } else {
-            viewProps["accessibilityState"] = {
-              [field]: valInit
-            };
-          }
-        }
-        continue;
-      } else if (keyInit.startsWith("data-")) {
-        continue;
-      }
+    if (styleState.curProps[keyInit] = valInit, valInitType === "string" && valInit[0] === "_" && (keyInit in validStyleProps || keyInit.includes("-"))) {
+      process.env.NODE_ENV === "development" && debug && console.log(`Adding compiled style ${keyInit}: ${valInit}`), shouldDoClasses ? (classNames[keyInit] = valInit, delete style[keyInit]) : (style[keyInit] = (0, import_normalizeValueWithProperty.reverseMapClassNameToValue)(keyInit, valInit), delete className[keyInit]);
+      continue;
     }
     if (keyInit === "dataSet") {
-      for (const keyInit2 in valInit) {
+      for (const keyInit2 in valInit)
         viewProps[`data-${hyphenate(keyInit2)}`] = valInit[keyInit2];
-      }
       continue;
     }
     if (keyInit[0] === "_" && keyInit.startsWith("_style")) {
       mergeStyleProp(styleState, valInit);
       continue;
     }
-    if (process.env.TAMAGUI_TARGET === "web") {
-      if (keyInit === "disabled" && valInit === true) {
-        viewProps["aria-disabled"] = true;
-        if (elementType === "button" || elementType === "form" || elementType === "input" || elementType === "select" || elementType === "textarea") {
-          viewProps.disabled = true;
-        }
-        if (!(variants == null ? void 0 : variants.disabled)) {
-          continue;
-        }
-      }
+    {
+      if (keyInit === "disabled" && valInit === !0 && (viewProps["aria-disabled"] = !0, (elementType === "button" || elementType === "form" || elementType === "input" || elementType === "select" || elementType === "textarea") && (viewProps.disabled = !0), !variants?.disabled))
+        continue;
       if (keyInit === "testID") {
         viewProps[isReactNative ? keyInit : "data-testid"] = valInit;
         continue;
       }
       if (keyInit === "id" || keyInit === "nativeID") {
-        if (isReactNative) {
-          viewProps.nativeID = valInit;
-        } else {
-          viewProps.id = valInit;
-        }
+        isReactNative ? viewProps.nativeID = valInit : viewProps.id = valInit;
         continue;
       }
-      let didUseKeyInit = false;
+      let didUseKeyInit = !1;
       if (isReactNative) {
         if (keyInit in import_accessibilityDirectMap.accessibilityDirectMap || keyInit.startsWith("accessibility")) {
           viewProps[keyInit] = valInit;
           continue;
         }
-      } else {
-        didUseKeyInit = true;
-        if (keyInit in import_accessibilityDirectMap.accessibilityDirectMap) {
-          viewProps[import_accessibilityDirectMap.accessibilityDirectMap[keyInit]] = valInit;
-          continue;
-        } else {
-          switch (keyInit) {
-            case "accessibilityRole": {
-              if (valInit === "none") {
-                viewProps.role = "presentation";
-              } else {
-                viewProps.role = accessibilityRoleToWebRole[valInit] || valInit;
-              }
-              continue;
-            }
-            case "accessibilityLabelledBy":
-            case "accessibilityFlowTo":
-            case "accessibilityControls":
-            case "accessibilityDescribedBy": {
-              viewProps[`aria-${keyInit.replace("accessibility", "").toLowerCase()}`] = processIDRefList(valInit);
-              continue;
-            }
-            case "accessibilityKeyShortcuts": {
-              if (Array.isArray(valInit)) {
-                viewProps["aria-keyshortcuts"] = valInit.join(" ");
-              }
-              continue;
-            }
-            case "accessibilityLiveRegion": {
-              viewProps["aria-live"] = valInit === "none" ? "off" : valInit;
-              continue;
-            }
-            case "accessibilityReadOnly": {
-              viewProps["aria-readonly"] = valInit;
-              if (elementType === "input" || elementType === "select" || elementType === "textarea") {
-                viewProps.readOnly = true;
-              }
-              continue;
-            }
-            case "accessibilityRequired": {
-              viewProps["aria-required"] = valInit;
-              if (elementType === "input" || elementType === "select" || elementType === "textarea") {
-                viewProps.required = valInit;
-              }
-              continue;
-            }
-            default: {
-              didUseKeyInit = false;
-            }
+      } else if (didUseKeyInit = !0, keyInit in import_accessibilityDirectMap.accessibilityDirectMap) {
+        viewProps[import_accessibilityDirectMap.accessibilityDirectMap[keyInit]] = valInit;
+        continue;
+      } else
+        switch (keyInit) {
+          case "accessibilityRole": {
+            valInit === "none" ? viewProps.role = "presentation" : viewProps.role = accessibilityRoleToWebRole[valInit] || valInit;
+            continue;
+          }
+          case "accessibilityLabelledBy":
+          case "accessibilityFlowTo":
+          case "accessibilityControls":
+          case "accessibilityDescribedBy": {
+            viewProps[`aria-${keyInit.replace("accessibility", "").toLowerCase()}`] = processIDRefList(valInit);
+            continue;
+          }
+          case "accessibilityKeyShortcuts": {
+            Array.isArray(valInit) && (viewProps["aria-keyshortcuts"] = valInit.join(" "));
+            continue;
+          }
+          case "accessibilityLiveRegion": {
+            viewProps["aria-live"] = valInit === "none" ? "off" : valInit;
+            continue;
+          }
+          case "accessibilityReadOnly": {
+            viewProps["aria-readonly"] = valInit, (elementType === "input" || elementType === "select" || elementType === "textarea") && (viewProps.readOnly = !0);
+            continue;
+          }
+          case "accessibilityRequired": {
+            viewProps["aria-required"] = valInit, (elementType === "input" || elementType === "select" || elementType === "textarea") && (viewProps.required = valInit);
+            continue;
           }
+          default:
+            didUseKeyInit = !1;
         }
-      }
-      if (didUseKeyInit) {
+      if (didUseKeyInit)
         continue;
-      }
       if (valInit && valInit[0] === "_") {
-        const isValidClassName = keyInit in import_helpers.validStyles;
-        const isMediaOrPseudo2 = !isValidClassName && keyInit.includes(PROP_SPLIT) && import_helpers.validStyles[keyInit.split(PROP_SPLIT)[0]];
+        const isValidClassName = keyInit in import_helpers.validStyles, isMediaOrPseudo2 = !isValidClassName && keyInit.includes(PROP_SPLIT) && import_helpers.validStyles[keyInit.split(PROP_SPLIT)[0]];
         if (isValidClassName || isMediaOrPseudo2) {
-          if (process.env.NODE_ENV === "development" && debug) {
-            console.log("tamagui classname prop", keyInit, valInit);
-          }
-          if (shouldDoClasses) {
-            mergeClassName(transforms, classNames, keyInit, valInit, isMediaOrPseudo2);
-            delete style[keyInit];
-          } else {
-            style[keyInit] = (0, import_normalizeValueWithProperty.reverseMapClassNameToValue)(keyInit, valInit);
-            delete className[keyInit];
-          }
+          process.env.NODE_ENV === "development" && debug && console.log("tamagui classname prop", keyInit, valInit), shouldDoClasses ? (mergeClassName(transforms, classNames, keyInit, valInit, isMediaOrPseudo2), delete style[keyInit]) : (style[keyInit] = (0, import_normalizeValueWithProperty.reverseMapClassNameToValue)(keyInit, valInit), delete className[keyInit]);
           continue;
         }
       }
     }
-    const isValidStyleKeyInit = keyInit in validStyleProps;
-    const isShorthand = keyInit in shorthands;
+    const isValidStyleKeyInit = keyInit in validStyleProps, isShorthand = keyInit in shorthands;
     let isVariant = !isValidStyleKeyInit && variants && keyInit in variants;
     const isStyleLikeKey = isShorthand || isValidStyleKeyInit || isVariant;
-    let isPseudo = keyInit in import_helpers.validPseudoKeys;
-    let isMedia = !isStyleLikeKey && !isPseudo && (0, import_useMedia.isMediaKey)(keyInit);
-    let isMediaOrPseudo = isMedia || isPseudo;
+    let isPseudo = keyInit in import_helpers.validPseudoKeys, isMedia = !isStyleLikeKey && !isPseudo && (0, import_useMedia.isMediaKey)(keyInit), isMediaOrPseudo = isMedia || isPseudo;
     const isStyleProp = isMediaOrPseudo || isVariant || isValidStyleKeyInit || isShorthand;
-    if (isStyleProp && props.asChild === "except-style") {
+    if (isStyleProp && props.asChild === "except-style")
       continue;
-    }
     const shouldPassProp = !isStyleProp || // is in parent variants
-    isHOC && (parentStaticConfig == null ? void 0 : parentStaticConfig.variants) && keyInit in parentStaticConfig.variants || (inlineProps == null ? void 0 : inlineProps.has(keyInit));
-    const isHOCShouldPassThrough = Boolean(
-      isHOC && (isShorthand || isValidStyleKeyInit || isMediaOrPseudo || ((_a = parentStaticConfig == null ? void 0 : parentStaticConfig.variants) == null ? void 0 : _a[keyInit]) || keyInit in skipProps)
-    );
-    const shouldPassThrough = shouldPassProp || isHOCShouldPassThrough;
-    if (process.env.NODE_ENV === "development" && debug === "verbose") {
-      console.groupCollapsed(
-        `\u{1F539}\u{1F539}\u{1F539}\u{1F539} ${keyOg}${keyInit !== keyOg ? ` (shorthand for ${keyInit})` : ""} ${shouldPassThrough ? "(pass)" : ""} \u{1F539}\u{1F539}\u{1F539}\u{1F539}`
-      );
-      console.log({ isVariant, valInit, shouldPassProp });
-      if (import_constants.isClient) {
-        console.log({
-          variants,
-          variant: variants == null ? void 0 : variants[keyInit],
-          isVariant,
-          isHOCShouldPassThrough,
-          curProps: { ...styleState.curProps },
-          parentStaticConfig
-        });
-      }
-      console.groupEnd();
-    }
-    if (shouldPassThrough) {
-      passDownProp(viewProps, keyInit, valInit, isMediaOrPseudo);
-      if (!isVariant) {
-        continue;
-      }
-    }
-    if (keyInit in skipProps)
-      continue;
-    if (isText) {
-      if (valInit && (keyInit === fontFamilyKey || keyInit === shorthands[fontFamilyKey]) && valInit in conf.fontsParsed) {
-        styleState.fontFamily = valInit;
-      }
-    }
-    if (process.env.TAMAGUI_TARGET === "native" && isValidStyleKeyInit && !variants && (valInitType === "number" || valInitType === "string" && valInit[0] !== "$")) {
-      style[keyInit] = valInit;
+    isHOC && parentStaticConfig?.variants && keyInit in parentStaticConfig.variants || inlineProps?.has(keyInit), isHOCShouldPassThrough = !!(isHOC && (isShorthand || isValidStyleKeyInit || isMediaOrPseudo || parentStaticConfig?.variants?.[keyInit] || keyInit in skipProps)), shouldPassThrough = shouldPassProp || isHOCShouldPassThrough;
+    if (process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupCollapsed(
+      `\u{1F539}\u{1F539}\u{1F539}\u{1F539} ${keyOg}${keyInit !== keyOg ? ` (shorthand for ${keyInit})` : ""} ${shouldPassThrough ? "(pass)" : ""} \u{1F539}\u{1F539}\u{1F539}\u{1F539}`
+    ), console.log({ isVariant, valInit, shouldPassProp }), import_constants.isClient && console.log({
+      variants,
+      variant: variants?.[keyInit],
+      isVariant,
+      isHOCShouldPassThrough,
+      curProps: { ...styleState.curProps },
+      parentStaticConfig
+    }), console.groupEnd()), shouldPassThrough && (passDownProp(viewProps, keyInit, valInit, isMediaOrPseudo), !isVariant) || keyInit in skipProps)
       continue;
-    }
-    const avoidPropMap = isMediaOrPseudo || !isVariant && !isValidStyleKeyInit;
-    const expanded = avoidPropMap ? [[keyInit, valInit]] : (0, import_propMapper.propMapper)(keyInit, valInit, styleState);
-    const next = (0, import_propMapper.getPropMappedFontFamily)(expanded);
-    if (next) {
-      styleState.fontFamily = next;
-    }
-    if (process.env.NODE_ENV === "development" && debug === "verbose") {
+    isText && valInit && (keyInit === fontFamilyKey || keyInit === shorthands[fontFamilyKey]) && valInit in conf.fontsParsed && (styleState.fontFamily = valInit);
+    const 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") {
       console.groupCollapsed("  \u{1F4A0} expanded", keyInit, valInit);
       try {
-        if (!import_constants.isServer && import_isDevTools.isDevTools) {
-          console.log({
-            expanded,
-            styleProps,
-            componentState,
-            isVariant,
-            variant: variants == null ? void 0 : variants[keyInit],
-            shouldPassProp,
-            isHOCShouldPassThrough,
-            theme,
-            usedKeys: { ...usedKeys },
-            curProps: { ...styleState.curProps }
-          });
-          console.log("expanded", expanded, "\nusedKeys", { ...usedKeys }, "\ncurrent", {
-            ...style
-          });
-        }
+        !import_constants.isServer && import_isDevTools.isDevTools && (console.log({
+          expanded,
+          styleProps,
+          componentState,
+          isVariant,
+          variant: variants?.[keyInit],
+          shouldPassProp,
+          isHOCShouldPassThrough,
+          theme,
+          usedKeys: { ...usedKeys },
+          curProps: { ...styleState.curProps }
+        }), console.log("expanded", expanded, `
+usedKeys`, { ...usedKeys }, `
+current`, {
+          ...style
+        }));
       } catch {
       }
       console.groupEnd();
     }
-    if (!expanded)
-      continue;
-    for (const [key, val] of expanded) {
-      if (val == null)
-        continue;
-      if (key in usedKeys)
-        continue;
-      isPseudo = key in import_helpers.validPseudoKeys;
-      isMedia = !isPseudo && !isValidStyleKeyInit && (0, import_useMedia.isMediaKey)(key);
-      isMediaOrPseudo = isMedia || isPseudo;
-      isVariant = variants && key in variants;
-      if ((inlineProps == null ? void 0 : inlineProps.has(key)) || IS_STATIC && (inlineWhenUnflattened == null ? void 0 : inlineWhenUnflattened.has(key))) {
-        viewProps[key] = props[key] ?? val;
-      }
-      const isHOCShouldPassThrough2 = isHOC && (isMediaOrPseudo || ((_b = parentStaticConfig == null ? void 0 : parentStaticConfig.variants) == null ? void 0 : _b[keyInit]));
-      if (isHOCShouldPassThrough2) {
-        passDownProp(viewProps, key, val, isMediaOrPseudo);
-        if (process.env.NODE_ENV === "development" && debug === "verbose") {
-          console.groupCollapsed(` - passing down prop ${key}`);
-          console.log({ val, after: { ...viewProps[key] } });
-          console.groupEnd();
-        }
-        continue;
-      }
-      if (isPseudo) {
-        if (!val)
+    if (expanded) {
+      for (const [key, val] of expanded) {
+        if (val == null || key in usedKeys)
           continue;
-        const pseudoStyleObject = getSubStyle(
-          styleState,
-          key,
-          val,
-          styleProps.noClassNames
-        );
-        const descriptor = import_pseudoDescriptors.pseudoDescriptors[key];
-        const isEnter = key === "enterStyle";
-        const isExit = key === "exitStyle";
-        if (process.env.NODE_ENV === "development" && !styleProps.isAnimated && !componentState.unmounted && (isEnter || isExit)) {
-          console.warn(
-            `No animation prop given to component ${staticConfig.componentName || ""} with enterStyle / exitStyle, these styles will be ignore.`
-          );
-        }
-        if (!descriptor || isExit && !styleProps.isExiting) {
+        if (isPseudo = key in import_helpers.validPseudoKeys, isMedia = !isPseudo && !isValidStyleKeyInit && (0, import_useMedia.isMediaKey)(key), isMediaOrPseudo = isMedia || isPseudo, isVariant = variants && key in variants, (inlineProps?.has(key) || IS_STATIC && inlineWhenUnflattened?.has(key)) && (viewProps[key] = props[key] ?? val), isHOC && (isMediaOrPseudo || parentStaticConfig?.variants?.[keyInit])) {
+          passDownProp(viewProps, key, val, isMediaOrPseudo), process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupCollapsed(` - passing down prop ${key}`), console.log({ val, after: { ...viewProps[key] } }), console.groupEnd());
           continue;
         }
-        if (!shouldDoClasses || IS_STATIC) {
-          pseudos || (pseudos = {});
-          pseudos[key] || (pseudos[key] = {});
-          if (IS_STATIC) {
-            Object.assign(pseudos[key], pseudoStyleObject);
-          }
-        }
-        if (shouldDoClasses && !isEnter && !isExit) {
-          const pseudoStyles = (0, import_getStylesAtomic.generateAtomicStyles)(pseudoStyleObject, descriptor);
-          if (process.env.NODE_ENV === "development" && debug === "verbose") {
-            console.groupCollapsed("pseudo (classes)", key);
-            console.log({ pseudoStyleObject, pseudoStyles });
-            console.groupEnd();
-          }
-          for (const psuedoStyle of pseudoStyles) {
-            const fullKey = `${psuedoStyle.property}${PROP_SPLIT}${descriptor.name}`;
-            if (fullKey in usedKeys)
-              continue;
-            addStyleToInsertRules(rulesToInsert, psuedoStyle);
-            mergeClassName(
-              transforms,
-              classNames,
-              fullKey,
-              psuedoStyle.identifier,
-              isMediaOrPseudo,
-              true
-            );
-          }
-        } else {
-          const descriptorKey = descriptor.stateKey || descriptor.name;
-          const pseudoState = componentState[descriptorKey];
-          let isDisabled = isExit ? !styleProps.isExiting : !pseudoState;
-          if (import_constants.isWeb && !import_constants.isClient && isEnter) {
-            isDisabled = false;
-          }
-          if (process.env.NODE_ENV === "development" && debug === "verbose") {
-            console.groupCollapsed("pseudo", key, { isDisabled });
-            console.log(pseudoStyleObject, {
+        if (isPseudo) {
+          if (!val)
+            continue;
+          const pseudoStyleObject = getSubStyle(
+            styleState,
+            key,
+            val,
+            styleProps.noClassNames
+          ), descriptor = import_pseudoDescriptors.pseudoDescriptors[key], isEnter = key === "enterStyle", isExit = key === "exitStyle";
+          if (process.env.NODE_ENV === "development" && !styleProps.isAnimated && !componentState.unmounted && (isEnter || isExit) && console.warn(
+            `No animation prop given to component ${staticConfig.componentName || ""} with enterStyle / exitStyle, these styles will be ignore.`
+          ), !descriptor || isExit && !styleProps.isExiting)
+            continue;
+          if ((!shouldDoClasses || IS_STATIC) && (pseudos ||= {}, pseudos[key] ||= {}, IS_STATIC && Object.assign(pseudos[key], pseudoStyleObject)), shouldDoClasses && !isEnter && !isExit) {
+            const pseudoStyles = (0, import_getStylesAtomic.generateAtomicStyles)(pseudoStyleObject, descriptor);
+            process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupCollapsed("pseudo (classes)", key), console.log({ pseudoStyleObject, pseudoStyles }), console.groupEnd());
+            for (const psuedoStyle of pseudoStyles) {
+              const fullKey = `${psuedoStyle.property}${PROP_SPLIT}${descriptor.name}`;
+              fullKey in usedKeys || (addStyleToInsertRules(rulesToInsert, psuedoStyle), mergeClassName(
+                transforms,
+                classNames,
+                fullKey,
+                psuedoStyle.identifier,
+                isMediaOrPseudo,
+                !0
+              ));
+            }
+          } else {
+            const descriptorKey = descriptor.stateKey || descriptor.name, pseudoState = componentState[descriptorKey];
+            let isDisabled = isExit ? !styleProps.isExiting : !pseudoState;
+            import_constants.isWeb && !import_constants.isClient && isEnter && (isDisabled = !1), process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupCollapsed("pseudo", key, { isDisabled }), console.log(pseudoStyleObject, {
               isDisabled,
               descriptorKey,
               descriptor,
               pseudoState,
               state: { ...componentState }
-            });
-            console.groupEnd();
-          }
-          const importance = descriptor.priority;
-          for (const pkey in pseudoStyleObject) {
-            const val2 = pseudoStyleObject[pkey];
-            if (isDisabled) {
-              if (pkey in animatableDefaults && !(pkey in usedKeys)) {
-                const defaultVal = animatableDefaults[pkey];
-                mergeStyle(styleState, pkey, defaultVal);
-              }
-            } else {
-              const curImportance = usedKeys[importance] || 0;
-              const shouldMerge = importance >= curImportance;
-              if (shouldMerge) {
-                pseudos || (pseudos = {});
-                pseudos[key] || (pseudos[key] = {});
-                pseudos[key][pkey] = val2;
-                mergeStyle(styleState, pkey, val2);
-                usedKeys[pkey] || (usedKeys[pkey] = 1);
-              }
-              if (process.env.NODE_ENV === "development" && debug === "verbose") {
-                console.log("    subKey", pkey, shouldMerge, {
+            }), console.groupEnd());
+            const importance = descriptor.priority;
+            for (const pkey in pseudoStyleObject) {
+              const val2 = pseudoStyleObject[pkey];
+              if (isDisabled) {
+                if (pkey in animatableDefaults && !(pkey in usedKeys)) {
+                  const defaultVal = animatableDefaults[pkey];
+                  mergeStyle(styleState, pkey, defaultVal);
+                }
+              } else {
+                const curImportance = usedKeys[importance] || 0, shouldMerge = importance >= curImportance;
+                shouldMerge && (pseudos ||= {}, pseudos[key] ||= {}, pseudos[key][pkey] = val2, mergeStyle(styleState, pkey, val2), usedKeys[pkey] ||= 1), process.env.NODE_ENV === "development" && debug === "verbose" && console.log("    subKey", pkey, shouldMerge, {
                   importance,
                   curImportance,
                   pkey,
@@ -522,306 +275,187 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
                 });
               }
             }
+            if (!isDisabled)
+              for (const key2 in val) {
+                const k = shorthands[key2] || key2;
+                usedKeys[k] = Math.max(importance, usedKeys[k] || 0);
+              }
           }
-          if (!isDisabled) {
-            for (const key2 in val) {
-              const k = shorthands[key2] || key2;
-              usedKeys[k] = Math.max(importance, usedKeys[k] || 0);
-            }
-          }
-        }
-        continue;
-      } else if (isMedia) {
-        if (!val)
           continue;
-        const isPlatformMedia = key.startsWith("$platform-");
-        if (isPlatformMedia) {
-          const platform = key.slice(10);
-          if (
-            // supports web, ios, android
-            platform !== import_constants.currentPlatform && // supports web, native
-            platform !== process.env.TAMAGUI_TARGET
-          ) {
+        } else if (isMedia) {
+          if (!val)
             continue;
+          const isPlatformMedia = key.startsWith("$platform-");
+          if (isPlatformMedia) {
+            const platform = key.slice(10);
+            if (
+              // supports web, ios, android
+              platform !== import_constants.currentPlatform && // supports web, native
+              platform !== "web"
+            )
+              continue;
           }
-        }
-        hasMedia || (hasMedia = true);
-        const mediaStyle = getSubStyle(
-          styleState,
-          key,
-          val,
-          // TODO try true like pseudo
-          false
-        );
-        const mediaKeyShort = key.slice(1);
-        if (process.env.NODE_ENV === "development" && debug === "verbose") {
-          console.log(`  \u{1F4FA} ${key}`, { key, val, mediaStyle, props, shouldDoClasses, componentState });
-        }
-        const hasSpace = val["space"];
-        if (hasSpace || !shouldDoClasses) {
-          if (!Array.isArray(hasMedia)) {
-            hasMedia = [];
-          }
-          hasMedia.push(mediaKeyShort);
-        }
-        if (shouldDoClasses) {
-          if (hasSpace) {
-            delete mediaStyle["space"];
-            if (mediaState[mediaKeyShort]) {
+          hasMedia ||= !0;
+          const mediaStyle = getSubStyle(
+            styleState,
+            key,
+            val,
+            // TODO try true like pseudo
+            !1
+          ), mediaKeyShort = key.slice(1);
+          process.env.NODE_ENV === "development" && debug === "verbose" && console.log(`  \u{1F4FA} ${key}`, { key, val, mediaStyle, props, shouldDoClasses, componentState });
+          const hasSpace = val.space;
+          if ((hasSpace || !shouldDoClasses) && (Array.isArray(hasMedia) || (hasMedia = []), hasMedia.push(mediaKeyShort)), shouldDoClasses) {
+            if (hasSpace && (delete mediaStyle.space, mediaState[mediaKeyShort])) {
               const importance = (0, import_useMedia.getMediaImportanceIfMoreImportant)(
                 mediaKeyShort,
                 "space",
                 usedKeys,
-                true
+                !0
               );
-              if (importance) {
-                space = val["space"];
-                usedKeys["space"] = importance;
-                if (process.env.NODE_ENV === "development" && debug === "verbose") {
-                  console.log(
-                    `Found more important space for current media ${mediaKeyShort}: ${val} (importance: ${importance})`
-                  );
-                }
-              }
+              importance && (space = val.space, usedKeys.space = importance, process.env.NODE_ENV === "development" && debug === "verbose" && console.log(
+                `Found more important space for current media ${mediaKeyShort}: ${val} (importance: ${importance})`
+              ));
             }
-          }
-          const mediaStyles = (0, import_getStylesAtomic.getStylesAtomic)(mediaStyle, debug);
-          const priority = mediaStylesSeen;
-          mediaStylesSeen += 1;
-          for (const style2 of mediaStyles) {
-            const out = (0, import_createMediaStyle.createMediaStyle)(
-              style2,
-              mediaKeyShort,
-              import_useMedia.mediaQueryConfig,
-              false,
-              priority
-            );
-            const fullKey = `${style2.property}${PROP_SPLIT}${mediaKeyShort}`;
-            if (fullKey in usedKeys)
-              continue;
-            addStyleToInsertRules(rulesToInsert, out);
-            mergeClassName(transforms, classNames, fullKey, out.identifier, true, true);
-          }
-        } else {
-          const isThemeMedia = !isPlatformMedia && mediaKeyShort.startsWith("theme-");
-          const isGroupMedia = !isPlatformMedia && !isThemeMedia && mediaKeyShort.startsWith("group-");
-          if (!isThemeMedia && !isPlatformMedia && !isGroupMedia) {
-            if (!mediaState[mediaKeyShort]) {
-              continue;
+            const mediaStyles = (0, import_getStylesAtomic.getStylesAtomic)(mediaStyle, debug), priority = mediaStylesSeen;
+            mediaStylesSeen += 1;
+            for (const style2 of mediaStyles) {
+              const out = (0, import_createMediaStyle.createMediaStyle)(
+                style2,
+                mediaKeyShort,
+                import_useMedia.mediaQueryConfig,
+                !1,
+                priority
+              ), fullKey = `${style2.property}${PROP_SPLIT}${mediaKeyShort}`;
+              fullKey in usedKeys || (addStyleToInsertRules(rulesToInsert, out), mergeClassName(transforms, classNames, fullKey, out.identifier, !0, !0));
             }
-          }
-          let importanceBump = 0;
-          if (isThemeMedia) {
-            dynamicThemeAccess = true;
-            const mediaThemeName = mediaKeyShort.slice(6);
-            if (!(themeName === mediaThemeName || themeName.startsWith(mediaThemeName))) {
+          } else {
+            const isThemeMedia = !isPlatformMedia && mediaKeyShort.startsWith("theme-"), isGroupMedia = !isPlatformMedia && !isThemeMedia && mediaKeyShort.startsWith("group-");
+            if (!isThemeMedia && !isPlatformMedia && !isGroupMedia && !mediaState[mediaKeyShort])
               continue;
-            }
-          } else if (isGroupMedia) {
-            const groupInfo = (0, import_getGroupPropParts.getGroupPropParts)(mediaKeyShort);
-            const groupName = groupInfo.name;
-            const groupContext = context == null ? void 0 : context.groups.state[groupName];
-            if (!groupContext) {
-              if (process.env.NODE_ENV === "development" && debug) {
-                console.warn(`No parent with group prop, skipping styles: ${groupName}`);
+            let importanceBump = 0;
+            if (isThemeMedia) {
+              dynamicThemeAccess = !0;
+              const mediaThemeName = mediaKeyShort.slice(6);
+              if (!(themeName === mediaThemeName || themeName.startsWith(mediaThemeName)))
+                continue;
+            } else if (isGroupMedia) {
+              const groupInfo = (0, import_getGroupPropParts.getGroupPropParts)(mediaKeyShort), groupName = groupInfo.name, groupContext = context?.groups.state[groupName];
+              if (!groupContext) {
+                process.env.NODE_ENV === "development" && debug && console.warn(`No parent with group prop, skipping styles: ${groupName}`);
+                continue;
               }
-              continue;
-            }
-            const groupPseudoKey = groupInfo.pseudo;
-            const groupMediaKey = groupInfo.media;
-            const componentGroupState = (_c = componentState.group) == null ? void 0 : _c[groupName];
-            if (groupMediaKey) {
-              mediaGroups || (mediaGroups = /* @__PURE__ */ new Set());
-              mediaGroups.add(groupMediaKey);
-              const mediaState2 = componentGroupState == null ? void 0 : componentGroupState.media;
-              let isActive = mediaState2 == null ? void 0 : mediaState2[groupMediaKey];
-              if (!mediaState2 && groupContext.layout) {
-                isActive = (0, import_useMedia.mediaKeyMatch)(groupMediaKey, groupContext.layout);
+              const groupPseudoKey = groupInfo.pseudo, groupMediaKey = groupInfo.media, componentGroupState = componentState.group?.[groupName];
+              if (groupMediaKey) {
+                mediaGroups ||= /* @__PURE__ */ new Set(), mediaGroups.add(groupMediaKey);
+                const mediaState2 = componentGroupState?.media;
+                let isActive = mediaState2?.[groupMediaKey];
+                if (!mediaState2 && groupContext.layout && (isActive = (0, import_useMedia.mediaKeyMatch)(groupMediaKey, groupContext.layout)), !isActive)
+                  continue;
+                importanceBump = 2;
+              }
+              if (groupPseudoKey) {
+                if (pseudoGroups ||= /* @__PURE__ */ new Set(), pseudoGroups.add(groupName), !(componentGroupState || // fallback to context initially
+                context.groups.state[groupName]).pseudo?.[groupPseudoKey])
+                  continue;
+                importanceBump = import_pseudoDescriptors.pseudoPriorities[groupPseudoKey];
               }
-              if (!isActive)
-                continue;
-              importanceBump = 2;
             }
-            if (groupPseudoKey) {
-              pseudoGroups || (pseudoGroups = /* @__PURE__ */ new Set());
-              pseudoGroups.add(groupName);
-              const componentGroupPseudoState = (componentGroupState || // fallback to context initially
-              context.groups.state[groupName]).pseudo;
-              const isActive = componentGroupPseudoState == null ? void 0 : componentGroupPseudoState[groupPseudoKey];
-              if (!isActive)
+            for (const subKey in mediaStyle) {
+              if (subKey === "space") {
+                space = valInit.space;
                 continue;
-              const priority = import_pseudoDescriptors.pseudoPriorities[groupPseudoKey];
-              importanceBump = priority;
-            }
-          }
-          for (const subKey in mediaStyle) {
-            if (subKey === "space") {
-              space = valInit.space;
-              continue;
-            }
-            (0, import_useMedia.mergeMediaByImportance)(
-              style,
-              mediaKeyShort,
-              subKey,
-              mediaStyle[subKey],
-              usedKeys,
-              mediaState[mediaKeyShort],
-              importanceBump
-            );
-            if (key === fontFamilyKey) {
-              styleState.fontFamily = mediaStyle.fontFamily;
+              }
+              (0, import_useMedia.mergeMediaByImportance)(
+                style,
+                mediaKeyShort,
+                subKey,
+                mediaStyle[subKey],
+                usedKeys,
+                mediaState[mediaKeyShort],
+                importanceBump
+              ), key === fontFamilyKey && (styleState.fontFamily = mediaStyle.fontFamily);
             }
           }
+          continue;
         }
-        continue;
-      }
-      if (process.env.TAMAGUI_TARGET === "native") {
-        if (key === "pointerEvents") {
-          viewProps[key] = val;
+        if (
+          // is HOC we can just pass through the styles as props
+          // this fixes issues where style prop got merged with wrong priority
+          !isHOC && key in validStyleProps
+        ) {
+          mergeStyle(styleState, key, val);
           continue;
         }
+        isVariant || (viewProps[key] = val);
       }
-      if (
-        // is HOC we can just pass through the styles as props
-        // this fixes issues where style prop got merged with wrong priority
-        !isHOC && (key in validStyleProps || process.env.TAMAGUI_TARGET === "native" && import_constants.isAndroid && key === "elevation")
-      ) {
-        mergeStyle(styleState, key, val);
-        continue;
-      }
-      if (!isVariant) {
-        viewProps[key] = val;
-      }
-    }
-    if (process.env.NODE_ENV === "development" && debug === "verbose") {
-      console.groupCollapsed(` \u2714\uFE0F expand complete`, keyInit);
-      try {
-        console.log("style", { ...style });
-        console.log("viewProps", { ...viewProps });
-      } catch {
+      if (process.env.NODE_ENV === "development" && debug === "verbose") {
+        console.groupCollapsed(" \u2714\uFE0F expand complete", keyInit);
+        try {
+          console.log("style", { ...style }), console.log("viewProps", { ...viewProps });
+        } catch {
+        }
+        console.groupEnd();
       }
-      console.groupEnd();
     }
   }
-  if (props.style) {
-    mergeStyleProp(styleState, props.style);
-  }
-  (0, import_expandStyles.fixStyles)(style);
-  if (import_constants.isWeb && !staticConfig.isReactNative) {
-    (0, import_getStylesAtomic.styleToCSS)(style);
+  if (props.style && mergeStyleProp(styleState, props.style), (0, import_expandStyles.fixStyles)(style), import_constants.isWeb && !staticConfig.isReactNative && (0, import_getStylesAtomic.styleToCSS)(style), styleState.transforms && Object.entries(styleState.transforms).sort(([a], [b]) => a.localeCompare(b)).forEach(([key, val]) => {
+    mergeTransform(style, key, val, !0);
+  }), parentSplitStyles) {
+    if (shouldDoClasses)
+      for (const key in parentSplitStyles.classNames) {
+        const val = parentSplitStyles.classNames[key];
+        key in style || key in classNames || (classNames[key] = val);
+      }
+    if (!shouldDoClasses)
+      for (const key in parentSplitStyles.style)
+        key in classNames || key in style || (style[key] = parentSplitStyles.style[key]);
   }
-  if (styleState.transforms) {
-    Object.entries(styleState.transforms).sort(([a], [b]) => a.localeCompare(b)).forEach(([key, val]) => {
-      mergeTransform(style, key, val, true);
-    });
-  }
-  if (parentSplitStyles) {
-    if (process.env.TAMAGUI_TARGET === "web") {
-      if (shouldDoClasses) {
-        for (const key in parentSplitStyles.classNames) {
-          const val = parentSplitStyles.classNames[key];
-          if (key in style || key in classNames)
-            continue;
-          classNames[key] = val;
-        }
-      }
-    }
-    if (!shouldDoClasses) {
-      for (const key in parentSplitStyles.style) {
-        if (key in classNames || key in style)
-          continue;
-        style[key] = parentSplitStyles.style[key];
+  if (shouldDoClasses) {
+    let retainedStyles, shouldRetain = !1;
+    if (!style.$$css) {
+      const atomic = (0, import_getStylesAtomic.getStylesAtomic)(style);
+      for (const atomicStyle of atomic) {
+        const key = atomicStyle.property, isAnimatedAndAnimateOnly = styleProps.isAnimated && styleProps.noClassNames && (!props.animateOnly || props.animateOnly.includes(key)), nonAnimatedAnimateOnly = !isAnimatedAndAnimateOnly && !styleProps.isAnimated && props.animateOnly?.includes(key);
+        isAnimatedAndAnimateOnly ? (retainedStyles ||= {}, retainedStyles[key] = style[key]) : nonAnimatedAnimateOnly ? (retainedStyles ||= {}, retainedStyles[key] = atomicStyle.value, shouldRetain = !0) : (addStyleToInsertRules(rulesToInsert, atomicStyle), mergeClassName(
+          transforms,
+          classNames,
+          key,
+          atomicStyle.identifier,
+          !1,
+          !0
+        ));
       }
+      (shouldRetain || !IS_STATIC && !styleProps.keepStyleSSR) && (style = retainedStyles || {});
     }
   }
-  if (process.env.TAMAGUI_TARGET === "web") {
-    if (shouldDoClasses) {
-      let retainedStyles;
-      let shouldRetain = false;
-      if (style["$$css"]) {
-      } else {
-        const atomic = (0, import_getStylesAtomic.getStylesAtomic)(style);
-        for (const atomicStyle of atomic) {
-          const key = atomicStyle.property;
-          const isAnimatedAndAnimateOnly = styleProps.isAnimated && styleProps.noClassNames && (!props.animateOnly || props.animateOnly.includes(key));
-          const nonAnimatedAnimateOnly = !isAnimatedAndAnimateOnly && !styleProps.isAnimated && ((_d = props.animateOnly) == null ? void 0 : _d.includes(key));
-          if (isAnimatedAndAnimateOnly) {
-            retainedStyles || (retainedStyles = {});
-            retainedStyles[key] = style[key];
-          } else if (nonAnimatedAnimateOnly) {
-            retainedStyles || (retainedStyles = {});
-            retainedStyles[key] = atomicStyle.value;
-            shouldRetain = true;
-          } else {
-            addStyleToInsertRules(rulesToInsert, atomicStyle);
-            mergeClassName(
-              transforms,
-              classNames,
-              key,
-              atomicStyle.identifier,
-              false,
-              true
-            );
-          }
-        }
-        if (shouldRetain || !IS_STATIC && !styleProps.keepStyleSSR) {
-          style = retainedStyles || {};
-        }
-      }
-    }
-    if (transforms) {
-      for (const namespace in transforms) {
-        if (!transforms[namespace]) {
-          if (process.env.NODE_ENV === "development") {
-            console.warn("Error no transform", transforms, namespace);
-          }
-          continue;
-        }
-        const [hash, val] = transforms[namespace];
-        const identifier = `_transform${hash}`;
-        if (import_constants.isClient && !import_insertStyleRule.insertedTransforms[identifier]) {
-          const rule = `.${identifier} { transform: ${val}; }`;
-          addStyleToInsertRules(rulesToInsert, {
-            identifier,
-            rules: [rule],
-            property: namespace
-          });
-        }
-        classNames[namespace] = identifier;
+  if (transforms)
+    for (const namespace in transforms) {
+      if (!transforms[namespace]) {
+        process.env.NODE_ENV === "development" && console.warn("Error no transform", transforms, namespace);
+        continue;
       }
-    }
-    if (import_constants.isWeb && !isReactNative) {
-      if (viewProps.tabIndex == null) {
-        const isFocusable = viewProps.focusable ?? viewProps.accessible;
-        if (viewProps.focusable) {
-          delete viewProps.focusable;
-        }
-        const role = viewProps.role;
-        if (isFocusable === false) {
-          viewProps.tabIndex = "-1";
-        }
-        if (
-          // These native elements are focusable by default
-          elementType === "a" || elementType === "button" || elementType === "input" || elementType === "select" || elementType === "textarea"
-        ) {
-          if (isFocusable === false || props.accessibilityDisabled === true) {
-            viewProps.tabIndex = "-1";
-          }
-        } else if (
-          // These roles are made focusable by default
-          role === "button" || role === "checkbox" || role === "link" || role === "radio" || // @ts-expect-error (consistent with RNW)
-          role === "textbox" || role === "switch"
-        ) {
-          if (isFocusable !== false) {
-            viewProps.tabIndex = "0";
-          }
-        }
-        if (isFocusable) {
-          viewProps.tabIndex = "0";
-          delete viewProps.focusable;
-        }
+      const [hash, val] = transforms[namespace], identifier = `_transform${hash}`;
+      if (import_constants.isClient && !import_insertStyleRule.insertedTransforms[identifier]) {
+        const rule = `.${identifier} { transform: ${val}; }`;
+        addStyleToInsertRules(rulesToInsert, {
+          identifier,
+          rules: [rule],
+          property: namespace
+        });
       }
+      classNames[namespace] = identifier;
     }
+  if (import_constants.isWeb && !isReactNative && viewProps.tabIndex == null) {
+    const isFocusable = viewProps.focusable ?? viewProps.accessible;
+    viewProps.focusable && delete viewProps.focusable;
+    const role = viewProps.role;
+    isFocusable === !1 && (viewProps.tabIndex = "-1"), // These native elements are focusable by default
+    elementType === "a" || elementType === "button" || elementType === "input" || elementType === "select" || elementType === "textarea" ? (isFocusable === !1 || props.accessibilityDisabled === !0) && (viewProps.tabIndex = "-1") : (
+      // These roles are made focusable by default
+      (role === "button" || role === "checkbox" || role === "link" || role === "radio" || // @ts-expect-error (consistent with RNW)
+      role === "textbox" || role === "switch") && isFocusable !== !1 && (viewProps.tabIndex = "0")
+    ), isFocusable && (viewProps.tabIndex = "0", delete viewProps.focusable);
   }
   const result = {
     space,
@@ -837,110 +471,57 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
     pseudoGroups,
     mediaGroups
   };
-  if (process.env.TAMAGUI_TARGET === "native") {
-    if (style.fontFamily) {
-      const faceInfo = (_e = (0, import_config.getFont)(style.fontFamily)) == null ? void 0 : _e.face;
-      if (faceInfo) {
-        const overrideFace = (_g = (_f = faceInfo[style.fontWeight]) == null ? void 0 : _f[style.fontStyle || "normal"]) == null ? void 0 : _g.val;
-        if (overrideFace) {
-          style.fontFamily = overrideFace;
-          styleState.fontFamily = overrideFace;
-          delete style.fontWeight;
-          delete style.fontStyle;
-        }
-      }
-      if (process.env.NODE_ENV === "development" && debug && debug !== "profile") {
-        console.log(`Found fontFamily native: ${style.fontFamily}`, faceInfo);
-      }
-    }
-  }
-  if (className) {
-    classNames.className = className;
-  }
-  if (process.env.NODE_ENV === "development" && debug === "verbose") {
-    if (import_isDevTools.isDevTools) {
-      console.groupCollapsed("  \u{1F539} ===>");
-      try {
-        const logs = {
-          ...result,
-          componentState,
-          transforms,
-          viewProps,
-          viewPropsOrder: Object.keys(viewProps),
-          rulesToInsert,
-          parentSplitStyles
-        };
-        for (const key in logs) {
-          console.log(key, logs[key]);
-        }
-      } catch {
-      }
-      console.groupEnd();
+  if (className && (classNames.className = className), process.env.NODE_ENV === "development" && debug === "verbose" && import_isDevTools.isDevTools) {
+    console.groupCollapsed("  \u{1F539} ===>");
+    try {
+      const logs = {
+        ...result,
+        componentState,
+        transforms,
+        viewProps,
+        viewPropsOrder: Object.keys(viewProps),
+        rulesToInsert,
+        parentSplitStyles
+      };
+      for (const key in logs)
+        console.log(key, logs[key]);
+    } catch {
     }
+    console.groupEnd();
   }
   return result;
 };
-function mergeClassName(transforms, classNames, key, val, isMediaOrPseudo = false, isInsertingNow = false) {
-  if (process.env.TAMAGUI_TARGET === "web") {
-    if (!val)
-      return;
+function mergeClassName(transforms, classNames, key, val, isMediaOrPseudo = !1, isInsertingNow = !1) {
+  if (val)
     if (!isInsertingNow && val[0] === "_" && val.startsWith("_transform-")) {
       const ns = isMediaOrPseudo ? key : "transform";
       let transform = import_insertStyleRule.insertedTransforms[val];
-      if (import_constants.isClient && !transform) {
-        (0, import_insertStyleRule.scanAllSheets)();
-        transform = import_insertStyleRule.insertedTransforms[val];
-        if (!transform && import_constants.isWeb && val[0] !== "_") {
-          transform = val;
-        }
-      }
-      transforms[ns] || (transforms[ns] = ["", ""]);
-      transforms[ns][0] += val.replace("_transform", "");
-      if (transform) {
-        transforms[ns][1] += transform;
-      }
-    } else {
+      import_constants.isClient && !transform && ((0, import_insertStyleRule.scanAllSheets)(), transform = import_insertStyleRule.insertedTransforms[val], !transform && import_constants.isWeb && val[0] !== "_" && (transform = val)), transforms[ns] ||= ["", ""], transforms[ns][0] += val.replace("_transform", ""), transform && (transforms[ns][1] += transform);
+    } else
       classNames[key] = val;
-    }
-  }
 }
 function mergeStyle(styleState, key, val) {
   const { classNames, viewProps, style, usedKeys } = styleState;
-  if (import_constants.isWeb && (val == null ? void 0 : val[0]) === "_") {
-    classNames[key] = val;
-    usedKeys[key] || (usedKeys[key] = 1);
-  } else if (key in import_helpers.stylePropsTransform) {
-    styleState.transforms || (styleState.transforms = {});
-    styleState.transforms[key] = val;
-  } else {
+  if (import_constants.isWeb && val?.[0] === "_")
+    classNames[key] = val, usedKeys[key] ||= 1;
+  else if (key in import_helpers.stylePropsTransform)
+    styleState.transforms ||= {}, styleState.transforms[key] = val;
+  else {
     const out = import_constants.isWeb ? (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(val, key) : val;
-    if (key in import_helpers.validStylesOnBaseProps) {
-      viewProps[key] = out;
-    } else {
-      style[key] = out;
-    }
+    key in import_helpers.validStylesOnBaseProps ? viewProps[key] = out : style[key] = out;
   }
 }
 const getSubStyle = (styleState, subKey, styleIn, avoidMergeTransform) => {
-  const { staticConfig, props, conf: conf2 } = styleState;
-  const styleOut = {};
+  const { staticConfig, props, conf: conf2 } = styleState, styleOut = {};
   for (let key in styleIn) {
     const val = styleIn[key];
     key = conf2.shorthands[key] || key;
     const expanded = (0, import_propMapper.propMapper)(key, val, styleState, { ...props, ...props[subKey] });
-    if (!expanded || !staticConfig.isHOC && key in skipProps) {
-      continue;
-    }
-    for (const [skey, sval] of expanded) {
-      if (!avoidMergeTransform && skey in import_helpers.stylePropsTransform) {
-        mergeTransform(styleOut, skey, sval);
-      } else {
-        styleOut[skey] = (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(sval, key);
-      }
-    }
+    if (!(!expanded || !staticConfig.isHOC && key in skipProps))
+      for (const [skey, sval] of expanded)
+        !avoidMergeTransform && skey in import_helpers.stylePropsTransform ? mergeTransform(styleOut, skey, sval) : styleOut[skey] = (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(sval, key);
   }
-  (0, import_expandStyles.fixStyles)(styleOut);
-  return styleOut;
+  return (0, import_expandStyles.fixStyles)(styleOut), styleOut;
 };
 function mergeStyleProp(styleState, val) {
   if (!val)
@@ -949,36 +530,22 @@ function mergeStyleProp(styleState, val) {
   for (const cur of styles) {
     if (!cur)
       continue;
-    const isRNW = cur["$$css"];
-    if (isRNW) {
+    if (cur.$$css)
       Object.assign(styleState.classNames, cur);
-    } else {
-      for (const key in cur) {
-        if (key in styleState.usedKeys) {
-          continue;
-        }
-        mergeStyle(styleState, key, cur[key]);
-      }
-    }
+    else
+      for (const key in cur)
+        key in styleState.usedKeys || mergeStyle(styleState, key, cur[key]);
   }
 }
 const useInsertEffectCompat = import_constants.isWeb ? import_react.useInsertionEffect || import_constants.useIsomorphicLayoutEffect : () => {
-};
-const useSplitStyles = (...args) => {
+}, useSplitStyles = (...args) => {
   const res = getSplitStyles(...args);
-  useInsertEffectCompat(() => {
+  return useInsertEffectCompat(() => {
     (0, import_insertStyleRule.insertStyleRules)(res.rulesToInsert);
-  }, [res.rulesToInsert]);
-  return res;
+  }, [res.rulesToInsert]), res;
 };
 function addStyleToInsertRules(rulesToInsert, styleObject) {
-  if (process.env.TAMAGUI_TARGET === "web") {
-    if (!(0, import_insertStyleRule.shouldInsertStyleRules)(styleObject.identifier)) {
-      return;
-    }
-    (0, import_insertStyleRule.updateRules)(styleObject.identifier, styleObject.rules);
-    rulesToInsert.push(styleObject);
-  }
+  (0, import_insertStyleRule.shouldInsertStyleRules)(styleObject.identifier) && ((0, import_insertStyleRule.updateRules)(styleObject.identifier, styleObject.rules), rulesToInsert.push(styleObject));
 }
 function processIDRefList(idRefList) {
   return Array.isArray(idRefList) ? idRefList.join(" ") : idRefList;
@@ -991,23 +558,14 @@ const animatableDefaults = {
   rotateX: "0deg",
   x: 0,
   y: 0
-};
-const lowercaseHyphenate = (match) => `-${match.toLowerCase()}`;
-const hyphenate = (str) => str.replace(/[A-Z]/g, lowercaseHyphenate);
-const mergeTransform = (obj, key, val, backwards = false) => {
-  if (typeof obj.transform === "string") {
-    return;
-  }
-  obj.transform || (obj.transform = []);
-  obj.transform[backwards ? "unshift" : "push"]({
+}, lowercaseHyphenate = (match) => `-${match.toLowerCase()}`, hyphenate = (str) => str.replace(/[A-Z]/g, lowercaseHyphenate), mergeTransform = (obj, key, val, backwards = !1) => {
+  typeof obj.transform != "string" && (obj.transform ||= [], obj.transform[backwards ? "unshift" : "push"]({
     [mapTransformKeys[key] || key]: val
-  });
-};
-const mapTransformKeys = {
+  }));
+}, mapTransformKeys = {
   x: "translateX",
   y: "translateY"
-};
-const skipProps = {
+}, skipProps = {
   untilMeasured: 1,
   animation: 1,
   space: 1,
@@ -1021,31 +579,12 @@ const skipProps = {
   // handled after loop so pseudos set usedKeys and override it if necessary
   group: 1
 };
-if (process.env.NODE_ENV === "test") {
-  skipProps["data-test-renders"] = 1;
-}
-if (process.env.TAMAGUI_TARGET === "native") {
-  Object.assign(skipProps, {
-    whiteSpace: 1,
-    wordWrap: 1,
-    textOverflow: 1,
-    textDecorationDistance: 1,
-    cursor: 1,
-    contain: 1,
-    boxSizing: 1,
-    boxShadow: 1,
-    outlineStyle: 1,
-    outlineOffset: 1,
-    outlineWidth: 1,
-    outlineColor: 1
-  });
-} else {
-  Object.assign(skipProps, {
-    elevationAndroid: 1,
-    allowFontScaling: true,
-    adjustsFontSizeToFit: true
-  });
-}
+process.env.NODE_ENV === "test" && (skipProps["data-test-renders"] = 1);
+Object.assign(skipProps, {
+  elevationAndroid: 1,
+  allowFontScaling: !0,
+  adjustsFontSizeToFit: !0
+});
 const accessibilityRoleToWebRole = {
   adjustable: "slider",
   header: "heading",
@@ -1054,17 +593,15 @@ const accessibilityRoleToWebRole = {
   none: "presentation",
   summary: "region"
 };
-function passDownProp(viewProps, key, val, shouldMergeObject = false) {
+function passDownProp(viewProps, key, val, shouldMergeObject = !1) {
   if (shouldMergeObject) {
     const next = {
       ...viewProps[key],
       ...val
     };
-    delete viewProps[key];
-    viewProps[key] = next;
-  } else {
+    delete viewProps[key], viewProps[key] = next;
+  } else
     viewProps[key] = val;
-  }
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {