@tamagui/web 2.7.7 → 3.0.0-beta.643.1

package/dist/cjs/helpers/getSplitStyles.cjs

@@ -1,3 +1,4 @@
+
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -5,63 +6,53 @@ var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
-  for (var name in all) __defProp(target, name, {
-    get: all[name],
-    enumerable: true
-  });
+	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") {
-    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
-    });
-  }
-  return to;
+	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
+		});
+	}
+	return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-// If the importer is in node compatibility mode or this is not an ESM
-// file that has been converted to a CommonJS file using a Babel-
-// compatible transform (i.e. "__esModule" has not been set), then set
-// "default" to the CommonJS "module.exports" for node compatibility.
-isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-  value: mod,
-  enumerable: true
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
 }) : target, mod));
-var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: true
-}), mod);
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var getSplitStyles_exports = {};
 __export(getSplitStyles_exports, {
-  PROP_SPLIT: () => PROP_SPLIT,
-  STYLE_TOKEN_PROVENANCE_KEY: () => import_styleProvenance2.STYLE_TOKEN_PROVENANCE_KEY,
-  getSplitStyles: () => getSplitStyles,
-  getStyleTokenProvenance: () => import_styleProvenance2.getStyleTokenProvenance,
-  getSubStyle: () => getSubStyle,
-  styleOriginalValues: () => import_styleOriginalValues.styleOriginalValues,
-  useSplitStyles: () => useSplitStyles
+	STYLE_TOKEN_PROVENANCE_KEY: () => import_styleProvenance2.STYLE_TOKEN_PROVENANCE_KEY,
+	getSplitStyles: () => getSplitStyles,
+	getStyleTokenProvenance: () => import_styleProvenance2.getStyleTokenProvenance,
+	getSubStyle: () => getSubStyle,
+	isValidStyleKey: () => isValidStyleKey,
+	styleOriginalValues: () => import_styleOriginalValues.styleOriginalValues,
+	useSplitStyles: () => useSplitStyles
 });
 module.exports = __toCommonJS(getSplitStyles_exports);
 var import_constants = require("@tamagui/constants");
 var import_helpers = require("@tamagui/helpers");
 var import_react = __toESM(require("react"), 1);
+var import_styleFrontend = require("./styleFrontend.cjs");
 var import_config = require("../config.cjs");
 var import_isDevTools = require("../constants/isDevTools.cjs");
-var import_useMedia = require("../hooks/useMedia.cjs");
 var import_mediaState = require("./mediaState.cjs");
-var import_createMediaStyle = require("./createMediaStyle.cjs");
 var import_expandStyles = require("./expandStyles.cjs");
 var import_getCSSStylesAtomic = require("./getCSSStylesAtomic.cjs");
 var import_getDefaultProps = require("./getDefaultProps.cjs");
-require("./getDynamicVal.cjs");
-var import_getGroupPropParts = require("./getGroupPropParts.cjs");
 var import_insertStyleRule = require("./insertStyleRule.cjs");
-var import_isActivePlatform = require("./isActivePlatform.cjs");
-var import_isActiveTheme = require("./isActiveTheme.cjs");
+var import_isObj = require("./isObj.cjs");
 var import_log = require("./log.cjs");
 var import_normalizeValueWithProperty = require("./normalizeValueWithProperty.cjs");
 var import_propMapper = require("./propMapper.cjs");
-var import_pseudoDescriptors = require("./pseudoDescriptors.cjs");
+var import_directStyle = require("./directStyle.cjs");
+var import_frontendProgram = require("./frontendProgram.cjs");
 var import_skipProps = require("./skipProps.cjs");
 var import_sortString = require("./sortString.cjs");
 var import_styleOriginalValues = require("./styleOriginalValues.cjs");
@@ -69,884 +60,710 @@ var import_styleProvenance = require("./styleProvenance.cjs");
 var import_transformsToString = require("./transformsToString.cjs");
 var import_styleProvenance2 = require("./styleProvenance.cjs");
 const shouldTrackStyleTokenProvenance = process.env.NODE_ENV === "development" && process.env.TAMAGUI_ENABLE_STYLE_TOKEN_PROVENANCE === "1";
-let conf;
-const PROP_SPLIT = "-";
-function normalizeGroupKey(key, groupContext) {
-  const parts = key.split("-");
-  const plen = parts.length;
-  if (plen === 2 || plen === 3 && import_pseudoDescriptors.pseudoPriorities[parts[parts.length - 1]]) {
-    const name = parts[1];
-    if (name !== "true" && groupContext && !groupContext[name]) return key.replace("$group-", "$group-true-");
-  }
-  return key;
+const validComponentClassName = /^[A-Za-z_][A-Za-z0-9_-]*$/;
+function compoundMatcherMatches(expected, actual) {
+	if (Array.isArray(expected)) return expected.some((value) => Object.is(value, actual));
+	return Object.is(expected, actual);
 }
-function isValidStyleKey(key, validStyles, accept) {
-  return key in validStyles ? true : accept && key in accept;
+function compoundVariantMatches(compoundVariant, props) {
+	for (const key in compoundVariant) {
+		if (key === "style") continue;
+		if (!compoundMatcherMatches(compoundVariant[key], props[key])) return false;
+	}
+	return true;
+}
+const styledDefaultsCache = /* @__PURE__ */ new WeakMap();
+function getStyledDefaults(staticConfig) {
+	let entries = styledDefaultsCache.get(staticConfig);
+	if (entries === void 0) {
+		entries = null;
+		const defaults = staticConfig.defaultProps;
+		if (defaults) for (const key in defaults) (entries ||= []).push([key, defaults[key]]);
+		styledDefaultsCache.set(staticConfig, entries);
+	}
+	return entries;
 }
-function shouldSkipNativeHoverProp(key, isMedia) {
-  return false;
+function contributeDisplacedStyledDefaults(styledDefaults, processedProps, shorthands, contribute) {
+	if (!styledDefaults) return;
+	for (let index = 0; index < styledDefaults.length; index++) {
+		const key = styledDefaults[index][0];
+		const styledValue = styledDefaults[index][1];
+		const propValue = processedProps[key];
+		if (!(key in import_helpers.stylePropsAll) && !(key in shorthands)) continue;
+		if (propValue !== void 0 && propValue !== styledValue && (typeof styledValue === "string" && styledValue.includes(":") || typeof propValue === "string" && propValue.includes(":"))) contribute(key, styledValue);
+	}
+}
+function forEachPropInForwardOrder(processedProps, staticConfig, shorthands, contribute) {
+	const processedBaseStyle = staticConfig.baseStyle;
+	const compoundVariants = staticConfig.compoundVariants;
+	const styledDefaults = getStyledDefaults(staticConfig);
+	if (!compoundVariants?.length) {
+		if (processedBaseStyle) for (const key in processedBaseStyle) contribute(key, processedBaseStyle[key]);
+		contributeDisplacedStyledDefaults(styledDefaults, processedProps, shorthands, contribute);
+		for (const key in processedProps) contribute(key, processedProps[key]);
+		return;
+	}
+	const propEntries = Object.entries(processedProps);
+	const orderedEntries = processedBaseStyle ? Object.entries(processedBaseStyle) : [];
+	contributeDisplacedStyledDefaults(styledDefaults, processedProps, shorthands, (k, v) => orderedEntries.push([k, v]));
+	const compoundsByAnchor = /* @__PURE__ */ new Map();
+	for (const compoundVariant of compoundVariants) {
+		if (!compoundVariantMatches(compoundVariant, processedProps)) continue;
+		const { style } = compoundVariant;
+		if (!(0, import_isObj.isPlainObject)(style)) continue;
+		let anchor = -1;
+		for (const selectorKey in compoundVariant) {
+			if (selectorKey === "style") continue;
+			for (let index = propEntries.length - 1; index >= 0; index--) if (propEntries[index][0] === selectorKey) {
+				anchor = Math.max(anchor, index);
+				break;
+			}
+		}
+		const entries = compoundsByAnchor.get(anchor) || [];
+		for (const key in style) entries.push([key, style[key]]);
+		compoundsByAnchor.set(anchor, entries);
+	}
+	for (let index = 0; index < orderedEntries.length; index++) contribute(orderedEntries[index][0], orderedEntries[index][1]);
+	const beforeProps = compoundsByAnchor.get(-1);
+	if (beforeProps) for (let index = 0; index < beforeProps.length; index++) contribute(beforeProps[index][0], beforeProps[index][1]);
+	for (let index = 0; index < propEntries.length; index++) {
+		contribute(propEntries[index][0], propEntries[index][1]);
+		const compounds = compoundsByAnchor.get(index);
+		if (compounds) for (let i = 0; i < compounds.length; i++) contribute(compounds[i][0], compounds[i][1]);
+	}
+}
+function isValidStyleKey(key, validStyles, accept) {
+	return Boolean(key in validStyles || import_constants.isWeb && (key === "transitionProperty" || key === "transitionDuration" || key === "transitionTimingFunction" || key === "transitionDelay" || key === "transitionBehavior") || accept && key in accept);
 }
 const getSplitStyles = (props, staticConfig, theme, themeName, componentState, styleProps, parentSplitStyles, componentContext, groupContext, elementType, startedUnhydrated, debug, animationDriver) => {
-  conf = conf || (0, import_config.getConfig)();
-  const driver = animationDriver || componentContext?.animationDriver || conf.animations;
-  if (props.passThrough) return null;
-  if (import_constants.isWeb && styleProps.isAnimated && driver?.isReactNative && !styleProps.noNormalize) styleProps.noNormalize = "values";
-  const {
-    shorthands
-  } = conf;
-  const {
-    isHOC,
-    isText,
-    isInput,
-    variants,
-    isReactNative,
-    inlineProps,
-    inlineWhenUnflattened,
-    parentStaticConfig,
-    acceptsClassName
-  } = staticConfig;
-  const viewProps = {};
-  const mediaState = styleProps.mediaState || import_mediaState.mediaState;
-  const shouldDoClasses = acceptsClassName && import_constants.isWeb && !styleProps.noClass;
-  const rulesToInsert = {};
-  const classNames = {};
-  props.space;
-  let pseudos = null;
-  let hasMedia = false;
-  let dynamicThemeAccess;
-  let pseudoGroups;
-  let mediaGroups;
-  let className = props.className || "";
-  let mediaStylesSeen = 0;
-  const validStyles = staticConfig.validStyles || (staticConfig.isText || staticConfig.isInput ? import_helpers.stylePropsText : import_helpers.validStyles);
-  if (process.env.NODE_ENV === "development" && (debug === "profile" || globalThis.time)) time`split-styles-setup`;
-  const styleState = {
-    classNames,
-    conf,
-    props,
-    styleProps,
-    componentState,
-    staticConfig,
-    style: null,
-    theme,
-    usedKeys: {},
-    viewProps,
-    context: componentContext,
-    debug,
-    animationDriver: driver
-  };
-  if (process.env.IS_STATIC === "is_static") {
-    const {
-      fallbackProps
-    } = styleProps;
-    if (fallbackProps) styleState.props = new Proxy(props, {
-      get(_, key, val) {
-        if (!Reflect.has(props, key)) return Reflect.get(fallbackProps, key);
-        return Reflect.get(props, key);
-      }
-    });
-  }
-  if (process.env.NODE_ENV === "development" && (debug === "profile" || globalThis.time)) time`style-state`;
-  if (process.env.NODE_ENV === "development" && debug === "verbose" && import_constants.isClient) {
-    if (import_isDevTools.isDevTools) {
-      console.groupCollapsed("🔹 getSplitStyles 👇");
-      (0, import_log.log)({
-        props,
-        staticConfig,
-        shouldDoClasses,
-        styleProps,
-        rulesToInsert,
-        componentState,
-        styleState,
-        theme: {
-          ...theme
-        }
-      });
-    }
-  }
-  const {
-    asChild
-  } = props;
-  const {
-    accept
-  } = staticConfig;
-  const {
-    noSkip,
-    disableExpandShorthands,
-    noExpand,
-    styledContext
-  } = styleProps;
-  const {
-    webContainerType
-  } = conf.settings;
-  const parentVariants = parentStaticConfig?.variants;
-  for (const keyOg in props) {
-    let keyInit = keyOg;
-    let valInit = props[keyInit];
-    if (keyInit === "children") {
-      viewProps[keyInit] = valInit;
-      continue;
-    }
-    if (process.env.NODE_ENV === "development" && (debug === "profile" || globalThis.time)) time`before-prop-${keyInit}`;
-    if (process.env.NODE_ENV === "test" && keyInit === "jestAnimatedStyle") continue;
-    if (accept) {
-      const accepted = accept[keyInit];
-      if ((accepted === "style" || accepted === "textStyle") && valInit && typeof valInit === "object") {
-        viewProps[keyInit] = getSubStyle(styleState, keyInit, valInit, styleProps.noClass);
-        continue;
-      }
-    }
-    if (!disableExpandShorthands) {
-      if (keyInit in shorthands) keyInit = shorthands[keyInit];
-    }
-    if (keyInit === "className") continue;
-    if (asChild) {
-      const defaults = (0, import_getDefaultProps.getDefaultProps)(staticConfig);
-      if (defaults) {
-        const defaultVal = defaults[keyOg] ?? defaults[keyInit];
-        if (defaultVal !== void 0 && valInit === defaultVal) continue;
-      }
-    }
-    if (keyInit in import_skipProps.skipProps && !noSkip && !isHOC) {
-      if (keyInit === "group") {
-        const identifier = `t_group_${valInit}`;
-        addStyleToInsertRules(rulesToInsert, ["container", void 0, identifier, void 0, [`.${identifier} { container-name: ${valInit}; container-type: ${webContainerType || "inline-size"}; }`]]);
-      }
-      if (keyInit === "transition" && typeof valInit === "string") {
-        const animationConfig = driver?.animations?.[valInit];
-        if (animationConfig && driver?.outputStyle === "css" && process.env.IS_STATIC === "is_static") valInit = `all ${animationConfig}`;else if (animationConfig) continue;
-      } else continue;
-    }
-    let isValidStyleKeyInit = isValidStyleKey(keyInit, validStyles, accept);
-    if (staticConfig.isReactNative && keyInit.startsWith("data-")) {
-      keyInit = keyInit.replace("data-", "");
-      viewProps["dataSet"] ||= {};
-      viewProps["dataSet"][keyInit] = valInit;
-      continue;
-    }
-    if (!noExpand) {
-      if (keyInit === "disabled" && valInit === true) {
-        viewProps["aria-disabled"] = true;
-        if (isInput || elementType === "button" || elementType === "form" || elementType === "input" || elementType === "select" || elementType === "textarea") viewProps.disabled = true;
-        if (!variants?.disabled) continue;
-      }
-      if (keyInit === "testID") {
-        if (isReactNative) viewProps.testID = valInit;else {
-          viewProps["data-testid"] = valInit;
-          if (styleProps.isAnimated && driver?.isReactNative) viewProps.testID = valInit;
-        }
-        continue;
-      }
-      if (keyInit === "id") {
-        viewProps.id = valInit;
-        continue;
-      }
-    }
-    let isVariant = !isValidStyleKeyInit && variants && keyInit in variants;
-    const isStyleLikeKey = isValidStyleKeyInit || isVariant;
-    let isPseudo = keyInit in import_helpers.validPseudoKeys;
-    let isMedia = !isStyleLikeKey && !isPseudo ? (0, import_useMedia.getMediaKey)(keyInit) : false;
-    let isMediaOrPseudo = Boolean(isMedia || isPseudo);
-    if (isMediaOrPseudo && isMedia === "group") keyInit = normalizeGroupKey(keyInit, groupContext);
-    const isStyleProp = isValidStyleKeyInit || isMediaOrPseudo || isVariant && !noExpand;
-    if (shouldSkipNativeHoverProp(keyInit, isMedia)) continue;
-    if (isStyleProp && (asChild === "except-style" || asChild === "except-style-web")) continue;
-    const shouldPassProp = !isStyleProp && isHOC || isHOC && parentVariants && keyInit in parentVariants || inlineProps?.has(keyInit);
-    const parentVariant = parentVariants?.[keyInit];
-    const isHOCShouldPassThrough = Boolean(isHOC && (isValidStyleKeyInit || isMediaOrPseudo || parentVariant || keyInit in import_skipProps.skipProps));
-    const shouldPassThrough = shouldPassProp || isHOCShouldPassThrough;
-    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
-      });
-      if (import_constants.isClient) (0, import_log.log)({
-        variants,
-        variant: variants?.[keyInit],
-        isVariant,
-        isHOCShouldPassThrough,
-        usedKeys: {
-          ...styleState.usedKeys
-        },
-        parentStaticConfig
-      });
-    }
-    if (shouldPassThrough) {
-      passDownProp(viewProps, keyInit, valInit, isMediaOrPseudo);
-      if (process.env.NODE_ENV === "development" && debug === "verbose") console.groupEnd();
-      if (!isVariant) continue;
-    }
-    if (!noSkip) {
-      if (keyInit in import_skipProps.skipProps && !(keyInit === "transition" && typeof valInit === "string" && !driver?.animations?.[valInit])) {
-        if (process.env.NODE_ENV === "development" && debug === "verbose") console.groupEnd();
-        continue;
-      }
-    }
-    if (isText || isInput) {
-      if (valInit && (keyInit === "fontFamily" || keyInit === shorthands["fontFamily"]) && valInit in conf.fontsParsed) styleState.fontFamily = valInit;
-    }
-    const disablePropMap = isMediaOrPseudo || !isStyleLikeKey;
-    (0, import_propMapper.propMapper)(keyInit, valInit, styleState, disablePropMap, (key, val, originalVal) => {
-      const isStyledContextProp = styledContext && key in styledContext;
-      if (!isHOC && disablePropMap && !isStyledContextProp && !isMediaOrPseudo) {
-        viewProps[key] = val;
-        return;
-      }
-      if (process.env.NODE_ENV === "development" && debug === "verbose") {
-        console.groupCollapsed("  💠 expanded", keyInit, "=>", key);
-        (0, import_log.log)(val);
-        console.groupEnd();
-      }
-      if (val == null) return;
-      if (!isHOC && isValidStyleKey(key, validStyles, accept) || false) {
-        mergeStyle(styleState, key, val, 1, false, originalVal);
-        return;
-      }
-      isPseudo = key in import_helpers.validPseudoKeys;
-      isMedia = isPseudo ? false : (0, import_useMedia.getMediaKey)(key);
-      isMediaOrPseudo = Boolean(isMedia || isPseudo);
-      isVariant = variants && key in variants;
-      if (isMedia === "group") key = normalizeGroupKey(key, groupContext);
-      if (shouldSkipNativeHoverProp(key, isMedia)) return;
-      if (inlineProps?.has(key) || process.env.IS_STATIC === "is_static" && inlineWhenUnflattened?.has(key)) viewProps[key] = props[key] ?? val;
-      if (styleProps.noExpand && isPseudo || isHOC && (isMediaOrPseudo || parentStaticConfig?.variants?.[keyInit])) {
-        passDownProp(viewProps, key, val, isMediaOrPseudo);
-        if (process.env.NODE_ENV === "development" && debug === "verbose") {
-          console.groupCollapsed(` - passing down prop ${key}`);
-          (0, import_log.log)({
-            val,
-            after: {
-              ...viewProps[key]
-            }
-          });
-          console.groupEnd();
-        }
-        return;
-      }
-      if (isPseudo) {
-        if (!val) return;
-        const pseudoStyleObject = getSubStyle(styleState, key, val, styleProps.noClass && !(process.env.IS_STATIC === "is_static"));
-        if (!shouldDoClasses || process.env.IS_STATIC === "is_static") {
-          pseudos ||= {};
-          pseudos[key] ||= {};
-          if (process.env.IS_STATIC === "is_static") {
-            Object.assign(pseudos[key], pseudoStyleObject);
-            return;
-          }
-        }
-        const descriptor = import_pseudoDescriptors.pseudoDescriptors[key];
-        const isEnter = key === "enterStyle";
-        const isExit = key === "exitStyle";
-        if (!descriptor) return;
-        if (shouldDoClasses && !isExit) {
-          const pseudoStyles = (0, import_getCSSStylesAtomic.getStyleAtomic)(pseudoStyleObject, descriptor);
-          if (process.env.NODE_ENV === "development" && debug === "verbose") console.info("pseudo:", key, pseudoStyleObject, pseudoStyles);
-          for (const psuedoStyle of pseudoStyles) {
-            const fullKey = `${psuedoStyle[import_helpers.StyleObjectProperty]}${PROP_SPLIT}${descriptor.name}`;
-            addStyleToInsertRules(rulesToInsert, psuedoStyle);
-            classNames[fullKey] = psuedoStyle[import_helpers.StyleObjectIdentifier];
-          }
-        }
-        if (!shouldDoClasses || isExit || isEnter) {
-          let isDisabled = componentState[descriptor.stateKey || descriptor.name] === false;
-          if (isExit) isDisabled = !styleProps.isExiting;
-          if (isEnter && componentState.unmounted === false) isDisabled = true;
-          if (process.env.NODE_ENV === "development" && debug === "verbose") {
-            console.groupCollapsed("pseudo", key, {
-              isDisabled
-            });
-            (0, import_log.log)({
-              pseudoStyleObject,
-              isDisabled,
-              descriptor,
-              componentState
-            });
-            console.groupEnd();
-          }
-          const importance = descriptor.priority;
-          const pseudoOriginalValues = import_styleOriginalValues.styleOriginalValues.get(pseudoStyleObject);
-          for (const pkey in pseudoStyleObject) {
-            const val2 = pseudoStyleObject[pkey];
-            if (isDisabled) applyDefaultStyle(pkey, styleState);else {
-              const curImportance = styleState.usedKeys[pkey] || 0;
-              const shouldMerge = importance >= curImportance;
-              if (shouldMerge) {
-                if (process.env.IS_STATIC === "is_static") {
-                  pseudos ||= {};
-                  pseudos[key] ||= {};
-                  pseudos[key][pkey] = val2;
-                }
-                mergeStyle(styleState, pkey, val2, importance, false, pseudoOriginalValues?.[pkey]);
-              }
-              if (process.env.NODE_ENV === "development" && debug === "verbose") (0, import_log.log)("    subKey", pkey, shouldMerge, {
-                importance,
-                curImportance,
-                pkey,
-                val: val2
-              });
-            }
-          }
-          if (!isDisabled) for (const key2 in val) {
-            const k = shorthands[key2] || key2;
-            styleState.usedKeys[k] = Math.max(importance, styleState.usedKeys[k] || 0);
-          }
-        }
-        return;
-      }
-      if (isMedia) {
-        if (!val) return;
-        const mediaKeyShort = key.slice(isMedia == "theme" ? 7 : 1);
-        hasMedia ||= true;
-        if (val["space"] || !shouldDoClasses || styleProps.willBeAnimated) {
-          if (!hasMedia || typeof hasMedia === "boolean") hasMedia = /* @__PURE__ */new Set();
-          hasMedia.add(mediaKeyShort);
-        }
-        if (isMedia === "platform") {
-          if (!(0, import_isActivePlatform.isActivePlatform)(key)) return;
-        }
-        if (process.env.NODE_ENV === "development" && debug === "verbose") (0, import_log.log)(`  \u{1F4FA} ${key}`, {
-          key,
-          val,
-          props,
-          shouldDoClasses,
-          acceptsClassName,
-          componentState,
-          mediaState
-        });
-        const priority = mediaStylesSeen;
-        mediaStylesSeen += 1;
-        if (process.env.IS_STATIC === "is_static" && isMedia === true) {
-          const mediaStyle = getSubStyle(styleState, key, val, true);
-          styleState.style ||= {};
-          const existing = styleState.style[key];
-          styleState.style[key] = existing ? Object.assign(existing, mediaStyle) : mediaStyle;
-          return;
-        }
-        if (shouldDoClasses) {
-          const mediaStyle = getSubStyle(styleState, key, val, false);
-          const mediaStyles = (0, import_getCSSStylesAtomic.getCSSStylesAtomic)(mediaStyle);
-          for (const style of mediaStyles) {
-            const property = style[import_helpers.StyleObjectProperty];
-            const isSubStyle = property[0] === "$";
-            if (isSubStyle && !(0, import_isActivePlatform.isActivePlatform)(property)) continue;
-            const out = (0, import_createMediaStyle.createMediaStyle)(style, mediaKeyShort, import_mediaState.mediaQueryConfig, isMedia, false, priority);
-            if (process.env.NODE_ENV === "development" && debug === "verbose") (0, import_log.log)(`\u{1F4FA} media style:`, out);
-            const subKey = isSubStyle ? style[2] : "";
-            const fullKey = `${style[import_helpers.StyleObjectProperty]}${subKey}${PROP_SPLIT}${mediaKeyShort}${style[import_helpers.StyleObjectPseudo] || ""}`;
-            addStyleToInsertRules(rulesToInsert, out);
-            classNames[fullKey] = out[import_helpers.StyleObjectIdentifier];
-          }
-        } else {
-          let mergeMediaStyle = function (key2, val2, originalVal2) {
-            styleState.style ||= {};
-            if (mergeMediaByImportance(styleState, mediaKeyShort, key2, val2, mediaState[mediaKeyShort], importanceBump, debug, originalVal2) && key2 === "fontFamily") styleState.fontFamily = mediaStyle.fontFamily;
-          };
-          const isThemeMedia = isMedia === "theme";
-          const isGroupMedia = isMedia === "group";
-          const isPlatformMedia = isMedia === "platform";
-          if (!isThemeMedia && !isPlatformMedia && !isGroupMedia) {
-            if (!mediaState[mediaKeyShort]) {
-              if (process.env.NODE_ENV === "development" && debug === "verbose") (0, import_log.log)(`  \u{1F4FA} \u274C DISABLED ${mediaKeyShort}`);
-              return;
-            }
-            if (process.env.NODE_ENV === "development" && debug === "verbose") (0, import_log.log)(`  \u{1F4FA} \u2705 ENABLED ${mediaKeyShort}`);
-          }
-          const mediaStyle = getSubStyle(styleState, key, val, true);
-          let importanceBump = 0;
-          if (isThemeMedia) {
-            dynamicThemeAccess = true;
-            if (!(themeName === mediaKeyShort || themeName.startsWith(mediaKeyShort))) return;
-          } else if (isGroupMedia) {
-            const groupInfo = (0, import_getGroupPropParts.getGroupPropParts)(mediaKeyShort);
-            const groupName = groupInfo.name;
-            const groupState = groupContext?.[groupName]?.state;
-            const groupPseudoKey = groupInfo.pseudo;
-            const groupMediaKey = groupInfo.media;
-            if (!groupState) {
-              if (process.env.NODE_ENV === "development" && debug) (0, import_log.log)(`No parent with group prop, skipping styles: ${groupName}`);
-              pseudoGroups ||= /* @__PURE__ */new Set();
-              return;
-            }
-            const componentGroupState = componentState.group?.[groupName];
-            if (groupMediaKey) {
-              mediaGroups ||= /* @__PURE__ */new Set();
-              mediaGroups.add(groupMediaKey);
-              const mediaState2 = componentGroupState?.media;
-              let isActive = mediaState2?.[groupMediaKey];
-              if (!mediaState2 && groupState.layout) isActive = (0, import_useMedia.mediaKeyMatch)(groupMediaKey, groupState.layout);
-              if (process.env.NODE_ENV === "development" && debug === "verbose") (0, import_log.log)(` \u{1F3D8}\uFE0F GROUP media ${groupMediaKey} active? ${isActive}`, {
-                ...mediaState2,
-                usedKeys: {
-                  ...styleState.usedKeys
-                }
-              });
-              if (!isActive) {
-                for (const pkey in mediaStyle) applyDefaultStyle(pkey, styleState);
-                return;
-              }
-              importanceBump = 2;
-            }
-            if (groupPseudoKey) {
-              pseudoGroups ||= /* @__PURE__ */new Set();
-              pseudoGroups.add(groupName);
-              const componentGroupPseudoState = (componentGroupState || groupContext?.[groupName].state)?.pseudo;
-              const isActive = componentGroupPseudoState?.[groupPseudoKey];
-              const priority2 = import_pseudoDescriptors.pseudoPriorities[groupPseudoKey];
-              if (process.env.NODE_ENV === "development" && debug === "verbose") (0, import_log.log)(` \u{1F3D8}\uFE0F GROUP pseudo ${groupMediaKey} active? ${isActive}, priority ${priority2}`, {
-                componentGroupPseudoState: {
-                  ...componentGroupPseudoState
-                },
-                usedKeys: {
-                  ...styleState.usedKeys
-                }
-              });
-              if (!isActive) {
-                for (const pkey in mediaStyle) applyDefaultStyle(pkey, styleState);
-                return;
-              }
-              importanceBump = priority2;
-            }
-          } else if (isPlatformMedia) importanceBump = (0, import_isActivePlatform.getPlatformSpecificityBump)(mediaKeyShort);
-          const mediaOriginalValues = import_styleOriginalValues.styleOriginalValues.get(mediaStyle);
-          if (isGroupMedia && mediaStyle.transition) {
-            styleState.pseudoTransitions ||= {};
-            styleState.pseudoTransitions[`$${mediaKeyShort}`] = mediaStyle.transition;
-          }
-          for (const subKey in mediaStyle) {
-            if (subKey === "space") continue;
-            if (subKey[0] === "$") {
-              const subMediaType = (0, import_useMedia.getMediaKey)(subKey);
-              if (subMediaType === "platform") {
-                if (!(0, import_isActivePlatform.isActivePlatform)(subKey)) continue;
-              } else if (subMediaType === "theme") {
-                if (!(0, import_isActiveTheme.isActiveTheme)(subKey, themeName)) continue;
-              } else if (subMediaType === true) {
-                if (!mediaState[subKey.slice(1)]) continue;
-              }
-              const nestedVal = mediaStyle[subKey];
-              const subOriginalValues = import_styleOriginalValues.styleOriginalValues.get(nestedVal);
-              const outerBase = !!mediaState[mediaKeyShort] ? (0, import_useMedia.getMediaKeyImportance)(mediaKeyShort) : import_pseudoDescriptors.defaultMediaImportance;
-              let innerBase;
-              if (subMediaType === "platform") innerBase = import_pseudoDescriptors.defaultMediaImportance + (0, import_isActivePlatform.getPlatformSpecificityBump)(subKey.slice(1));else if (subMediaType === true) innerBase = (0, import_useMedia.getMediaKeyImportance)(subKey.slice(1));else innerBase = import_pseudoDescriptors.defaultMediaImportance;
-              const nestedImportance = outerBase + importanceBump + innerBase + 1;
-              for (const subSubKey in nestedVal) {
-                const expandedKey = shorthands[subSubKey] || subSubKey;
-                const {
-                  usedKeys
-                } = styleState;
-                if (usedKeys[expandedKey] && usedKeys[expandedKey] > nestedImportance) continue;
-                styleState.style ||= {};
-                mergeStyle(styleState, expandedKey, nestedVal[subSubKey], nestedImportance, false, subOriginalValues?.[subSubKey]);
-                if (expandedKey === "fontFamily") styleState.fontFamily = nestedVal[subSubKey];
-              }
-            } else mergeMediaStyle(subKey, mediaStyle[subKey], mediaOriginalValues?.[subKey]);
-          }
-        }
-        return;
-      }
-      if (!isVariant) {
-        if (isStyledContextProp) return;
-        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", {
-          ...styleState.style
-        });
-        (0, import_log.log)("viewProps", {
-          ...viewProps
-        });
-        (0, import_log.log)("transforms", {
-          ...styleState.flatTransforms
-        });
-      } catch {}
-      console.groupEnd();
-    }
-  }
-  if (process.env.NODE_ENV === "development" && (debug === "profile" || globalThis.time)) time`split-styles-propsend`;
-  if (!(styleProps.noNormalize === false)) {
-    if (styleState.style) {
-      (0, import_expandStyles.fixStyles)(styleState.style);
-      if (!styleProps.noExpand && !styleProps.noMergeStyle) {
-        if (import_constants.isWeb && (isReactNative ? driver?.inputStyle !== "css" : true)) (0, import_getCSSStylesAtomic.styleToCSS)(styleState.style);
-      }
-    }
-    if (styleState.flatTransforms) {
-      styleState.style ||= {};
-      mergeFlatTransforms(styleState.style, styleState.flatTransforms);
-    }
-    if (parentSplitStyles) {
-      if (shouldDoClasses) for (const key in parentSplitStyles.classNames) {
-        const val = parentSplitStyles.classNames[key];
-        if (styleState.style && key in styleState.style || key in classNames) continue;
-        classNames[key] = val;
-      }
-      if (!shouldDoClasses) for (const key in parentSplitStyles.style) {
-        if (key in classNames || styleState.style && key in styleState.style) continue;
-        styleState.style ||= {};
-        styleState.style[key] = parentSplitStyles.style[key];
-      }
-    }
-  }
-  if (!styleProps.noNormalize && !staticConfig.isReactNative && !staticConfig.isHOC && (!styleProps.isAnimated || driver?.inputStyle === "css") && Array.isArray(styleState.style?.transform)) styleState.style.transform = (0, import_transformsToString.transformsToString)(styleState.style.transform);
-  if (!styleProps.noMergeStyle && styleState.style && shouldDoClasses) {
-    let retainedStyles;
-    let shouldRetain = false;
-    if (styleState.style["$$css"]) {} else {
-      const atomic = (0, import_getCSSStylesAtomic.getCSSStylesAtomic)(styleState.style);
-      for (const atomicStyle of atomic) {
-        const [key, value, identifier] = atomicStyle;
-        const isAnimatedAndTransitionOnly = styleProps.isAnimated && styleProps.noClass && props.animateOnly?.includes(key);
-        const nonAnimatedTransitionOnly = !isAnimatedAndTransitionOnly && !styleProps.isAnimated && import_constants.isClient && driver?.outputStyle === "css" && props.animateOnly?.includes(key);
-        if (isAnimatedAndTransitionOnly) {
-          retainedStyles ||= {};
-          retainedStyles[key] = styleState.style[key];
-        } else if (nonAnimatedTransitionOnly) {
-          retainedStyles ||= {};
-          retainedStyles[key] = value;
-          shouldRetain = true;
-        } else {
-          addStyleToInsertRules(rulesToInsert, atomicStyle);
-          classNames[key] = identifier;
-        }
-      }
-      if (process.env.NODE_ENV === "development" && props.debug === "verbose") {
-        console.groupCollapsed(`\u{1F539} getSplitStyles final style object`);
-        console.info(styleState.style);
-        console.info(`retainedStyles`, retainedStyles);
-        console.groupEnd();
-      }
-      if (shouldRetain || !(process.env.IS_STATIC === "is_static")) styleState.style = retainedStyles || {};
-    }
-  }
-  if (!styleProps.noMergeStyle && styleState.style && !shouldDoClasses && styleProps.isAnimated && !driver?.isReactNative) {
-    if (!styleState.style["$$css"]) {
-      const toConvert = {};
-      let hasProps = false;
-      props.animateOnly;
-      for (const key in styleState.style) if (key in import_helpers.nonAnimatableStyleProps) {
-        toConvert[key] = styleState.style[key];
-        delete styleState.style[key];
-        hasProps = true;
-      }
-      if (hasProps) {
-        const atomic = (0, import_getCSSStylesAtomic.getCSSStylesAtomic)(toConvert);
-        for (const atomicStyle of atomic) {
-          addStyleToInsertRules(rulesToInsert, atomicStyle);
-          classNames[atomicStyle[import_helpers.StyleObjectProperty]] = atomicStyle[import_helpers.StyleObjectIdentifier];
-        }
-      }
-    }
-  }
-  const styleProp = props.style;
-  if (!styleProps.noMergeStyle && styleProp) if (isHOC) viewProps.style = normalizeStyle(styleProp);else {
-    const isArray = Array.isArray(styleProp);
-    const len = isArray ? styleProp.length : 1;
-    for (let i = 0; i < len; i++) {
-      const style = isArray ? styleProp[i] : styleProp;
-      if (style) if (style["$$css"]) Object.assign(styleState.classNames, style);else {
-        styleState.style ||= {};
-        const normalized = normalizeStyle(style);
-        Object.assign(styleState.style, normalized);
-        if (shouldTrackStyleTokenProvenance) {
-          const styleOriginals = import_styleOriginalValues.styleOriginalValues.get(normalized);
-          for (const k in normalized) recordStyleTokenProvenance(styleState, k, styleOriginals?.[k]);
-        }
-      }
-    }
-  }
-  if (process.env.NODE_ENV === "development" && (debug === "profile" || globalThis.time)) time`split-styles-pre-result`;
-  if (shouldTrackStyleTokenProvenance && styleState.style && styleState.tokenProvenance) {
-    const provenance = {};
-    let hasProvenance = false;
-    for (const key in styleState.tokenProvenance) {
-      provenance[key] = {
-        token: styleState.tokenProvenance[key],
-        theme: themeName
-      };
-      hasProvenance = true;
-    }
-    if (hasProvenance) (0, import_styleProvenance.setStyleTokenProvenance)(styleState.style, provenance);
-  }
-  const result = {
-    hasMedia,
-    fontFamily: styleState.fontFamily,
-    viewProps,
-    style: styleState.style,
-    pseudos,
-    classNames,
-    rulesToInsert,
-    dynamicThemeAccess,
-    pseudoGroups,
-    mediaGroups,
-    overriddenContextProps: styleState.overriddenContextProps,
-    pseudoTransitions: styleState.pseudoTransitions
-  };
-  const asChildExceptStyleLike = asChild === "except-style" || asChild === "except-style-web";
-  if (!styleProps.noMergeStyle) {
-    if (!asChildExceptStyleLike) {
-      const style = styleState.style;
-      {
-        let fontFamily = isText || isInput ? styleState.fontFamily : null;
-        if (fontFamily && fontFamily[0] === "$") fontFamily = fontFamily.slice(1);
-        const fontFamilyClassName = fontFamily ? `font_${fontFamily}` : "";
-        const groupClassName = props.group ? `t_group_${props.group}` : "";
-        const componentNameFinal = props.componentName || staticConfig.componentName;
-        const componentNameClassName = props.asChild || !componentNameFinal || componentNameFinal === "Text" ? "" : `is_${componentNameFinal}`;
-        let classList = [];
-        if (componentNameClassName) classList.push(componentNameClassName);
-        if (!isText) classList.push("is_View");else classList.push("is_Text");
-        if (fontFamilyClassName) classList.push(fontFamilyClassName);
-        if (classNames) classList.push(Object.values(classNames).join(" "));
-        if (groupClassName) classList.push(groupClassName);
-        if (props.className) classList.push(props.className);
-        const finalClassName = classList.join(" ");
-        const needsCssStyles = isReactNative || styleProps.isAnimated && driver?.isReactNative;
-        if (styleProps.isAnimated && driver?.inputStyle === "css") {
-          viewProps.className = finalClassName;
-          if (style) viewProps.style = style;
-        } else if (needsCssStyles) {
-          let cnStyles;
-          for (const name of finalClassName.split(" ")) {
-            cnStyles ||= {
-              $$css: true
-            };
-            cnStyles[name] = name;
-          }
-          viewProps.style = cnStyles ? [...(Array.isArray(style) ? style : [style]), cnStyles] : [style];
-        } else {
-          if (finalClassName) viewProps.className = finalClassName;
-          if (style) viewProps.style = style;
-        }
-      }
-    }
-  }
-  if (process.env.NODE_ENV === "development" && debug === "verbose") {
-    if (import_constants.isClient && import_isDevTools.isDevTools) {
-      console.groupEnd();
-      console.groupCollapsed("🔹 getSplitStyles ===>");
-      try {
-        const logs = {
-          ...result,
-          className,
-          componentState,
-          viewProps,
-          rulesToInsert,
-          parentSplitStyles
-        };
-        for (const key in logs) (0, import_log.log)(key, logs[key]);
-      } catch {}
-      console.groupEnd();
-    }
-  }
-  if (process.env.NODE_ENV === "development" && (debug === "profile" || globalThis.time)) time`split-styles-done`;
-  return result;
+	const conf = (0, import_config.getConfig)();
+	if (staticConfig.styleFrontend?.normalizeStaticConfig) staticConfig = staticConfig.styleFrontend.normalizeStaticConfig(staticConfig, conf);
+	const driver = animationDriver || componentContext?.animationDriver || conf.animations;
+	const resolvedDriver = driver?.isStub ? null : driver;
+	if (props.passThrough) return null;
+	if (import_constants.isWeb && styleProps.isAnimated && driver?.isReactNative && !styleProps.noNormalize) styleProps.noNormalize = "values";
+	const { shorthands } = conf;
+	const { isHOC, isText, isInput, variants, isReactNative, inlineProps, parentStaticConfig, acceptsClassName } = staticConfig;
+	const viewProps = {};
+	const mediaState = styleProps.mediaState || import_mediaState.mediaState;
+	let shouldDoClasses = acceptsClassName && import_constants.isWeb && !styleProps.noClass;
+	const rulesToInsert = {};
+	const classNames = {};
+	props.space;
+	let hasMedia = false;
+	let pseudoGroups;
+	let mediaGroups;
+	let className = staticConfig.passthroughClassName || "";
+	if (className) shouldDoClasses = false;
+	const validStyles = staticConfig.validStyles || (staticConfig.isText || staticConfig.isInput ? import_helpers.stylePropsText : import_helpers.validStyles);
+	if (process.env.NODE_ENV === "development" && (debug === "profile" || globalThis.time)) time`split-styles-setup`;
+	const styleState = {
+		classNames,
+		conf,
+		props,
+		styleProps,
+		componentState,
+		staticConfig,
+		style: null,
+		theme,
+		viewProps,
+		context: componentContext,
+		debug,
+		flatRulesToInsert: rulesToInsert,
+		flatShouldDoClasses: shouldDoClasses,
+		flatThemeName: themeName,
+		flatMediaState: mediaState,
+		flatGroupContext: groupContext,
+		animationDriver: resolvedDriver
+	};
+	if (process.env.IS_STATIC === "is_static") {
+		const { fallbackProps } = styleProps;
+		if (fallbackProps) styleState.props = new Proxy(props, { get(_, key, val) {
+			if (!Reflect.has(props, key)) return Reflect.get(fallbackProps, key);
+			return Reflect.get(props, key);
+		} });
+	}
+	if (process.env.NODE_ENV === "development" && (debug === "profile" || globalThis.time)) time`style-state`;
+	if (process.env.NODE_ENV === "development" && debug === "verbose" && import_constants.isClient) {
+		if (import_isDevTools.isDevTools) {
+			console.groupCollapsed("🔹 getSplitStyles 👇");
+			(0, import_log.log)({
+				props,
+				staticConfig,
+				shouldDoClasses,
+				styleProps,
+				rulesToInsert,
+				componentState,
+				styleState,
+				theme: { ...theme }
+			});
+		}
+	}
+	const { asChild } = props;
+	const { accept, neverSkipProps } = staticConfig;
+	const { noSkip, disableExpandShorthands, noExpand, styledContext } = styleProps;
+	let processedProps;
+	const styleFrontend = staticConfig.styleFrontend;
+	if (styleFrontend && !props[import_styleFrontend.STYLE_FRONTEND_PREPROCESSED]) processedProps = styleFrontend.preprocessProps(props, conf);
+	else processedProps = props;
+	const { webContainerType } = conf.settings;
+	const parentVariants = parentStaticConfig?.variants;
+	const mergeStylePropAtCurrentPosition = (styleProp) => {
+		if (styleProps.noMergeStyle || !styleProp) return;
+		if (isHOC) {
+			viewProps.style = normalizeStyle(styleProp);
+			return;
+		}
+		const isArray = Array.isArray(styleProp);
+		const length = isArray ? styleProp.length : 1;
+		for (let index = 0; index < length; index++) {
+			const style = isArray ? styleProp[index] : styleProp;
+			if (!style) continue;
+			if (style["$$css"]) {
+				for (const key in style) (0, import_directStyle.clearDirectStyle)(styleState, key);
+				Object.assign(styleState.classNames, style);
+				continue;
+			}
+			const normalized = normalizeStyle(style);
+			const styleOriginals = shouldTrackStyleTokenProvenance ? import_styleOriginalValues.styleOriginalValues.get(style) : void 0;
+			for (const key in normalized) {
+				if (normalized[key] == null) continue;
+				(0, import_directStyle.contributeStyleValue)(styleState, key, normalized[key], mergeStyle, styleOriginals?.[key]);
+			}
+		}
+	};
+	const flushForwardStylesToClasses = () => {
+		if (!shouldDoClasses) return;
+		(0, import_directStyle.flushDirectStyles)(styleState, true);
+	};
+	const contributeProp = (keyOg, valOg) => {
+		let keyInit = keyOg;
+		let valInit = valOg;
+		if (styleFrontend && keyInit.startsWith(import_styleFrontend.STYLE_FRONTEND_PASSTHROUGH_PREFIX)) keyInit = "className";
+		if (keyInit === "children") {
+			viewProps[keyInit] = valInit;
+			return;
+		}
+		if (keyInit === "ref") return;
+		if (process.env.NODE_ENV === "development" && (debug === "profile" || globalThis.time)) time`before-prop-${keyInit}`;
+		if (process.env.NODE_ENV === "test" && keyInit === "jestAnimatedStyle") return;
+		if (accept) {
+			const accepted = accept[keyInit];
+			if ((accepted === "style" || accepted === "textStyle") && valInit && typeof valInit === "object") {
+				viewProps[keyInit] = getSubStyle(styleState, keyInit, valInit, styleProps.noClass);
+				return;
+			}
+		}
+		if (!disableExpandShorthands) {
+			if (keyInit in shorthands) keyInit = shorthands[keyInit];
+		}
+		if (keyInit === "className") {
+			if (typeof valInit === "string" && valInit) {
+				className = `${className} ${valInit}`.trim();
+				if (styleFrontend) {
+					flushForwardStylesToClasses();
+					shouldDoClasses = false;
+					styleState.flatShouldDoClasses = false;
+				}
+			}
+			return;
+		}
+		if (keyInit === "style") {
+			mergeStylePropAtCurrentPosition(valInit);
+			return;
+		}
+		if (asChild) {
+			const defaults = (0, import_getDefaultProps.getDefaultProps)(staticConfig);
+			if (defaults) {
+				const defaultVal = defaults[keyOg] ?? defaults[keyInit];
+				if (defaultVal !== void 0 && valInit === defaultVal) return;
+			}
+		}
+		if (keyInit in import_skipProps.skipProps && !noSkip && !isHOC && !neverSkipProps?.[keyInit]) {
+			if (keyInit === "group") {
+				const identifier = `t_group_${valInit}`;
+				addStyleToInsertRules(rulesToInsert, [
+					"container",
+					void 0,
+					identifier,
+					void 0,
+					[`.${identifier} { container-name: ${valInit}; container-type: ${webContainerType || "inline-size"}; }`]
+				]);
+			}
+			if (keyInit === "container" && valInit) addStyleToInsertRules(rulesToInsert, [
+				"container",
+				void 0,
+				"t_container",
+				void 0,
+				[`.t_container { container-type: ${webContainerType || "inline-size"}; }`]
+			]);
+			if (keyInit === "transition" && typeof valInit === "string") {
+				const animationConfig = driver?.animations?.[valInit];
+				if (animationConfig && driver?.outputStyle === "css" && process.env.IS_STATIC === "is_static") valInit = `all ${animationConfig}`;
+				else if (animationConfig) return;
+			} else return;
+		}
+		if ((0, import_frontendProgram.isFrontendProgram)(valInit)) {
+			if (isValidStyleKey(valInit.property, validStyles, accept)) (0, import_frontendProgram.contributeFrontendProgram)(styleState, valInit, mergeStyle);
+			else if (process.env.NODE_ENV === "development") console.warn(`[tamagui] "${valInit.property}" is not a valid style on this component; the frontend value is dropped.`);
+			return;
+		}
+		let isValidStyleKeyInit = isValidStyleKey(keyInit, validStyles, accept);
+		if (import_constants.isWeb) {
+			if ((staticConfig.isReactNative || styleProps.isAnimated && driver?.isReactNative && !driver.View?.acceptRenderProp) && keyInit.startsWith("data-")) {
+				keyInit = keyInit.replace("data-", "");
+				viewProps["dataSet"] ||= {};
+				viewProps["dataSet"][keyInit] = valInit;
+				return;
+			}
+			if (keyInit.startsWith("data-")) {
+				viewProps[keyInit] = valInit;
+				return;
+			}
+		}
+		if (!noExpand) {
+			if (keyInit === "disabled" && valInit === true) {
+				viewProps["aria-disabled"] = true;
+				if (isInput || elementType === "button" || elementType === "form" || elementType === "input" || elementType === "select" || elementType === "textarea") viewProps.disabled = true;
+				if (!variants?.disabled) return;
+			}
+			if (keyInit === "testID") {
+				if (isReactNative) viewProps.testID = valInit;
+				else {
+					viewProps["data-testid"] = valInit;
+					if ((styleProps.isAnimated || staticConfig.isHOC) && driver?.isReactNative) viewProps.testID = valInit;
+				}
+				return;
+			}
+			if (keyInit === "id") {
+				viewProps.id = valInit;
+				return;
+			}
+		}
+		let isVariant = !isValidStyleKeyInit && variants && keyInit in variants;
+		const isStyleLikeKey = isValidStyleKeyInit || isVariant;
+		const isStyleProp = isValidStyleKeyInit || isVariant && !noExpand;
+		if (isStyleProp && (asChild === "except-style" || asChild === "except-style-web")) return;
+		const shouldPassProp = !isStyleProp && isHOC || isHOC && parentVariants && keyInit in parentVariants || inlineProps?.has(keyInit);
+		const parentVariant = parentVariants?.[keyInit];
+		const isHOCShouldPassThrough = Boolean(isHOC && (isValidStyleKeyInit || parentVariant || keyInit in import_skipProps.skipProps));
+		const shouldPassThrough = shouldPassProp || isHOCShouldPassThrough;
+		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
+			});
+			if (import_constants.isClient) (0, import_log.log)({
+				variants,
+				variant: variants?.[keyInit],
+				isVariant,
+				isHOCShouldPassThrough,
+				parentStaticConfig
+			});
+		}
+		if (shouldPassThrough) {
+			passDownProp(viewProps, keyInit, valInit);
+			if (process.env.NODE_ENV === "development" && debug === "verbose") console.groupEnd();
+			if (!isVariant) return;
+		}
+		if (!noSkip && !neverSkipProps?.[keyInit]) {
+			if (keyInit in import_skipProps.skipProps && !(keyInit === "transition" && typeof valInit === "string" && !driver?.animations?.[valInit])) {
+				if (process.env.NODE_ENV === "development" && debug === "verbose") console.groupEnd();
+				return;
+			}
+		}
+		if (isText || isInput) {
+			if (valInit && (keyInit === "fontFamily" || keyInit === shorthands["fontFamily"]) && valInit in conf.fontsParsed) styleState.fontFamily = valInit;
+		}
+		const disablePropMap = !isStyleLikeKey;
+		if (!isHOC && isValidStyleKeyInit && valInit != null && !(variants && keyInit in variants) && !(accept && keyInit in accept) && !(styledContext && keyInit in styledContext)) {
+			(0, import_directStyle.contributeStyleValue)(styleState, keyInit, valInit, mergeStyle);
+			return;
+		}
+		(0, import_propMapper.propMapper)(keyInit, valInit, styleState, disablePropMap, (key, val, originalVal, conditionSource) => {
+			const isStyledContextProp = styledContext && key in styledContext;
+			if (key === "className") {
+				if (typeof val === "string" && val) className = `${className} ${val}`.trim();
+				return;
+			}
+			if (!isHOC && disablePropMap && !isStyledContextProp) {
+				if (key in import_helpers.stylePropsAll && !isValidStyleKey(key, validStyles, accept)) {
+					if (process.env.NODE_ENV === "development") console.warn(`[tamagui] "${key}" is a text style prop and this component is not text \u2014 it would render on neither platform. Use a Text-based component, or html.* for raw web elements.`);
+					return;
+				}
+				viewProps[key] = val;
+				return;
+			}
+			if (process.env.NODE_ENV === "development" && debug === "verbose") {
+				console.groupCollapsed("  💠 expanded", keyInit, "=>", key);
+				(0, import_log.log)(val);
+				console.groupEnd();
+			}
+			if (val == null) return;
+			if (accept && key in accept) {
+				viewProps[key] = val;
+				return;
+			}
+			const isHostStyleKey = !isHOC && isValidStyleKey(key, validStyles, accept) || false;
+			const isContextProgramKey = !isHOC && Boolean(isStyledContextProp);
+			if (conditionSource !== void 0) {
+				if (isHostStyleKey || isContextProgramKey) (0, import_directStyle.contributeVariantClauseValue)(styleState, key, val, conditionSource, mergeStyle, originalVal, !isHostStyleKey);
+				else if (isHOC) {
+					const appended = (0, import_propMapper.appendFlatClause)(viewProps[key], conditionSource, val);
+					if (appended !== void 0) viewProps[key] = appended;
+					else if (process.env.NODE_ENV === "development") console.warn(`[tamagui] conditional variant value for "${key}" is not string-representable; dropping the clause`);
+				} else if (process.env.NODE_ENV === "development") console.warn(`[tamagui] "${key}" is not a valid style on this component; the conditional variant value is dropped.`);
+				return;
+			}
+			if (isHostStyleKey || isContextProgramKey) {
+				(0, import_directStyle.contributeStyleValue)(styleState, key, val, mergeStyle, originalVal, !isHostStyleKey);
+				return;
+			}
+			isVariant = variants && key in variants;
+			if (inlineProps?.has(key)) viewProps[key] = props[key] ?? val;
+			if (isHOC && Boolean(parentStaticConfig?.variants?.[keyInit])) {
+				passDownProp(viewProps, key, val);
+				if (process.env.NODE_ENV === "development" && debug === "verbose") {
+					console.groupCollapsed(` - passing down prop ${key}`);
+					(0, import_log.log)({
+						val,
+						after: { ...viewProps[key] }
+					});
+					console.groupEnd();
+				}
+				return;
+			}
+			if (!isVariant) {
+				if (isStyledContextProp) return;
+				if (key in import_helpers.stylePropsAll && !isValidStyleKey(key, validStyles, accept)) {
+					if (process.env.NODE_ENV === "development") console.warn(`[tamagui] "${key}" is a text style prop and this component is not text \u2014 it would render on neither platform. Use a Text-based component, or html.* for raw web elements.`);
+					return;
+				}
+				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", { ...styleState.style });
+				(0, import_log.log)("viewProps", { ...viewProps });
+				(0, import_log.log)("transforms", { ...styleState.flatTransforms });
+			} catch {}
+			console.groupEnd();
+		}
+	};
+	forEachPropInForwardOrder(processedProps, staticConfig, shorthands, contributeProp);
+	if (process.env.NODE_ENV === "development" && (debug === "profile" || globalThis.time)) time`split-styles-propsend`;
+	const conditionalStates = styleState.flatStateKeys || null;
+	const usesSafeArea = !!styleState.flatUsesSafeArea;
+	if (styleState.flatMediaKeys?.size) {
+		if (!hasMedia) hasMedia = /* @__PURE__ */ new Set();
+		if (typeof hasMedia !== "boolean") for (const key of styleState.flatMediaKeys) hasMedia.add(key);
+	}
+	if (styleState.flatGroupKeys?.size) {
+		pseudoGroups ||= /* @__PURE__ */ new Set();
+		for (const key of styleState.flatGroupKeys) pseudoGroups.add(key);
+	}
+	if (styleState.flatGroupMedia?.size) {
+		mediaGroups ||= /* @__PURE__ */ new Set();
+		for (const key of styleState.flatGroupMedia) mediaGroups.add(key);
+	}
+	const effectiveTransition = styleState.style?.transition;
+	if (effectiveTransition != null && styleState.style && driver?.outputStyle !== "css") delete styleState.style.transition;
+	if ((styleState.style?.containerName != null || classNames.containerName) && !(styleState.style && "containerType" in styleState.style) && !classNames.containerType) (0, import_directStyle.contributeStyleValue)(styleState, "containerType", webContainerType || "inline-size", mergeStyle);
+	if (!(styleProps.noNormalize === false)) {
+		if (styleState.style) {
+			(0, import_expandStyles.fixStyles)(styleState.style);
+			if (!styleProps.noExpand && !styleProps.noMergeStyle) {
+				if (import_constants.isWeb && (isReactNative ? driver?.inputStyle !== "css" : true)) (0, import_getCSSStylesAtomic.styleToCSS)(styleState.style);
+			}
+		}
+		if (styleState.flatTransforms) {
+			styleState.style ||= {};
+			mergeFlatTransforms(styleState.style, styleState.flatTransforms);
+		}
+		if (parentSplitStyles) {
+			if (shouldDoClasses) for (const key in parentSplitStyles.classNames) {
+				const val = parentSplitStyles.classNames[key];
+				if (styleState.style && key in styleState.style || key in classNames) continue;
+				classNames[key] = val;
+			}
+			if (!shouldDoClasses) for (const key in parentSplitStyles.style) {
+				if (key in classNames || styleState.style && key in styleState.style) continue;
+				styleState.style ||= {};
+				styleState.style[key] = parentSplitStyles.style[key];
+			}
+		}
+	}
+	if (!styleProps.noNormalize && !staticConfig.isReactNative && !staticConfig.isHOC && (!styleProps.isAnimated || driver?.inputStyle === "css") && Array.isArray(styleState.style?.transform)) styleState.style.transform = (0, import_transformsToString.transformsToString)(styleState.style.transform);
+	(0, import_directStyle.flushDirectStyles)(styleState);
+	if (!styleProps.noMergeStyle && styleState.style && !shouldDoClasses && styleProps.isAnimated && !driver?.isReactNative) {
+		if (!styleState.style["$$css"]) {
+			for (const key in styleState.style) if (key in import_helpers.nonAnimatableStyleProps) {
+				const atomicStyle = (0, import_getCSSStylesAtomic.getCSSStyleAtomic)(key, styleState.style[key], "", void 0, (0, import_directStyle.directStyleSignature)(key, styleState.style[key]), true);
+				delete styleState.style[key];
+				if (atomicStyle) {
+					addStyleToInsertRules(rulesToInsert, atomicStyle);
+					classNames[atomicStyle[import_helpers.StyleObjectProperty]] = atomicStyle[import_helpers.StyleObjectIdentifier];
+				}
+			}
+		}
+	}
+	if (process.env.NODE_ENV === "development" && (debug === "profile" || globalThis.time)) time`split-styles-pre-result`;
+	if (shouldTrackStyleTokenProvenance && styleState.style && styleState.tokenProvenance) {
+		const provenance = {};
+		let hasProvenance = false;
+		for (const key in styleState.tokenProvenance) {
+			provenance[key] = {
+				token: styleState.tokenProvenance[key],
+				theme: themeName
+			};
+			hasProvenance = true;
+		}
+		if (hasProvenance) (0, import_styleProvenance.setStyleTokenProvenance)(styleState.style, provenance);
+	}
+	const result = {
+		hasMedia,
+		fontFamily: styleState.fontFamily,
+		viewProps,
+		style: styleState.style,
+		classNames,
+		rulesToInsert,
+		pseudoGroups,
+		mediaGroups,
+		overriddenContextProps: styleState.overriddenContextProps
+	};
+	if (effectiveTransition != null) result.effectiveTransition = effectiveTransition;
+	if (conditionalStates) result.programStates = conditionalStates;
+	if (usesSafeArea) result.usesSafeArea = true;
+	if ((0, import_directStyle.getDirectDynamicThemeAccess)(styleState)) result.dynamicThemeAccess = true;
+	if (styleState.flatEnterKeys || styleState.flatExitKeys) {
+		const effectiveKeys = (keys) => {
+			if (!keys) return;
+			const out = /* @__PURE__ */ new Set();
+			for (const key of keys) out.add(key === "--t-x" || key === "--t-y" ? "translate" : key === "--t-scale-x" || key === "--t-scale-y" ? "scale" : key);
+			return out;
+		};
+		result.programLifecycleStyleKeys = {
+			enter: effectiveKeys(styleState.flatEnterKeys),
+			exit: effectiveKeys(styleState.flatExitKeys)
+		};
+	}
+	const asChildExceptStyleLike = asChild === "except-style" || asChild === "except-style-web";
+	if (!styleProps.noMergeStyle) {
+		if (!asChildExceptStyleLike) {
+			const style = styleState.style;
+			{
+				const fontFamily = isText || isInput ? styleState.fontFamily : null;
+				const fontFamilyClassName = fontFamily ? `font_${fontFamily}` : "";
+				const groupClassName = props.group ? `t_group_${props.group}` : "";
+				const containerClassName = props.container ? "t_container" : "";
+				const displayNameClassName = props.asChild || !styleProps.displayName || styleProps.displayName === "Text" || styleProps.displayName === "View" || !validComponentClassName.test(styleProps.displayName) ? "" : `is_${styleProps.displayName}`;
+				let classList = [];
+				if (displayNameClassName) classList.push(displayNameClassName);
+				if (!isText) classList.push("is_View");
+				else classList.push("is_Text");
+				if (fontFamilyClassName) classList.push(fontFamilyClassName);
+				if (classNames) for (const key in classNames) classList.push(classNames[key]);
+				if (groupClassName) classList.push(groupClassName);
+				if (containerClassName) classList.push(containerClassName);
+				if (className) classList.push(className);
+				const finalClassName = classList.join(" ");
+				const needsCssStyles = isReactNative || styleProps.isAnimated && driver?.isReactNative;
+				if (styleProps.isAnimated && driver?.inputStyle === "css") {
+					viewProps.className = finalClassName;
+					if (style) viewProps.style = style;
+				} else if (needsCssStyles) {
+					let cnStyles;
+					for (const name of finalClassName.split(" ")) {
+						cnStyles ||= { $$css: true };
+						cnStyles[name] = name;
+					}
+					viewProps.style = cnStyles ? [...Array.isArray(style) ? style : [style], cnStyles] : [style];
+				} else {
+					if (finalClassName) viewProps.className = finalClassName;
+					if (style) viewProps.style = style;
+				}
+			}
+		}
+	}
+	if (process.env.NODE_ENV === "development" && debug === "verbose") {
+		if (import_constants.isClient && import_isDevTools.isDevTools) {
+			console.groupEnd();
+			console.groupCollapsed("🔹 getSplitStyles ===>");
+			try {
+				const logs = {
+					...props.__tamaguiStyleDebugReceipt && { receipt: props.__tamaguiStyleDebugReceipt },
+					...result,
+					className,
+					componentState,
+					viewProps,
+					rulesToInsert,
+					parentSplitStyles
+				};
+				for (const key in logs) (0, import_log.log)(key, logs[key]);
+			} catch {}
+			console.groupEnd();
+		}
+	}
+	if (process.env.NODE_ENV === "development" && (debug === "profile" || globalThis.time)) time`split-styles-done`;
+	return result;
 };
 function mergeFlatTransforms(target, flatTransforms) {
-  Object.entries(flatTransforms).sort(([a], [b]) => (0, import_sortString.sortString)(a, b)).forEach(([key, val]) => {
-    mergeTransform(target, key, val, true);
-  });
+	const transform = [];
+	if ("x" in flatTransforms) transform.push({ translateX: flatTransforms.x });
+	if ("y" in flatTransforms) transform.push({ translateY: flatTransforms.y });
+	if ("rotate" in flatTransforms) transform.push({ rotate: flatTransforms.rotate });
+	const hasScaleX = "scaleX" in flatTransforms;
+	const hasScaleY = "scaleY" in flatTransforms;
+	if (hasScaleX && hasScaleY && Object.is(flatTransforms.scaleX, flatTransforms.scaleY)) transform.push({ scale: flatTransforms.scaleX });
+	else {
+		if (hasScaleX) transform.push({ scaleX: flatTransforms.scaleX });
+		if (hasScaleY) transform.push({ scaleY: flatTransforms.scaleY });
+		if (!hasScaleX && !hasScaleY && "scale" in flatTransforms) transform.push({ scale: flatTransforms.scale });
+	}
+	const keys = [];
+	for (const key in flatTransforms) if (key !== "x" && key !== "y" && key !== "rotate" && key !== "scale" && key !== "scaleX" && key !== "scaleY") keys.push(key);
+	keys.sort(import_sortString.sortString);
+	for (const key of keys) transform.push({ [mapTransformKeys[key] || key]: flatTransforms[key] });
+	if (Array.isArray(target.transform)) transform.push(...target.transform);
+	target.transform = transform;
 }
-function mergeStyle(styleState, key, val, importance, disableNormalize = false, originalVal) {
-  const {
-    viewProps,
-    styleProps,
-    staticConfig,
-    usedKeys
-  } = styleState;
-  if ((usedKeys[key] || 0) > importance) return;
-  const contextProps = staticConfig.context?.props || staticConfig.parentStaticConfig?.context?.props;
-  if (contextProps && key in contextProps) {
-    styleState.overriddenContextProps ||= {};
-    const originalFromState = styleState.originalContextPropValues?.[key];
-    styleState.overriddenContextProps[key] = originalVal ?? originalFromState ?? val;
-  }
-  if (key in import_helpers.stylePropsTransform) {
-    styleState.flatTransforms ||= {};
-    usedKeys[key] = importance;
-    styleState.flatTransforms[key] = val;
-  } else {
-    const out = import_constants.isWeb && !disableNormalize && !styleProps.noNormalize ? (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(val, key) : val;
-    if (staticConfig.accept && key in staticConfig.accept) viewProps[key] = out;else {
-      styleState.style ||= {};
-      usedKeys[key] = importance;
-      styleState.style[key] = key === "transform" && Array.isArray(out) ? [...out] : out;
-      if (shouldTrackStyleTokenProvenance) recordStyleTokenProvenance(styleState, key, originalVal);
-    }
-  }
+function mergeStyle(styleState, key, val, _importance, disableNormalize = false, originalVal) {
+	const { viewProps, styleProps, staticConfig } = styleState;
+	const contextConfig = staticConfig.context || staticConfig.parentStaticConfig?.context;
+	const contextProps = contextConfig?.props;
+	const inheritedContextPropKeys = !staticConfig.context || staticConfig.context === staticConfig.parentStaticConfig?.context ? staticConfig.parentStaticConfig?.contextProps : void 0;
+	const contextPropKeys = staticConfig.contextProps || inheritedContextPropKeys;
+	if (contextProps && key in contextProps || contextPropKeys?.includes(key) || contextConfig?.propKeys?.includes(key)) {
+		styleState.overriddenContextProps ||= {};
+		const originalFromState = styleState.originalContextPropValues?.[key];
+		styleState.overriddenContextProps[key] = originalVal ?? originalFromState ?? val;
+	}
+	if (key in import_helpers.stylePropsTransform) {
+		styleState.flatTransforms ||= {};
+		styleState.flatTransforms[key] = val;
+	} else {
+		const out = import_constants.isWeb && !disableNormalize && !styleProps.noNormalize ? (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(val, key) : val;
+		if (staticConfig.accept && key in staticConfig.accept) viewProps[key] = out;
+		else {
+			styleState.style ||= {};
+			styleState.style[key] = key === "transform" && Array.isArray(out) ? [...out] : out;
+			if (shouldTrackStyleTokenProvenance) recordStyleTokenProvenance(styleState, key, originalVal);
+		}
+	}
 }
 function recordStyleTokenProvenance(styleState, key, originalVal) {
-  if (typeof originalVal === "string" && originalVal[0] === "$") (styleState.tokenProvenance ||= {})[key] = originalVal;else if (styleState.tokenProvenance && key in styleState.tokenProvenance) delete styleState.tokenProvenance[key];
+	let tokenName = typeof originalVal === "string" ? originalVal : "";
+	if (tokenName) {
+		const slash = tokenName.lastIndexOf("/");
+		const opacity = slash === -1 ? NaN : Number(tokenName.slice(slash + 1));
+		if (Number.isInteger(opacity) && opacity >= 0 && opacity <= 100) tokenName = tokenName.slice(0, slash);
+	}
+	if (tokenName !== "" && (Object.prototype.hasOwnProperty.call(styleState.theme, tokenName) || Object.prototype.hasOwnProperty.call(styleState.conf.themes?.[styleState.flatThemeName || ""] || {}, tokenName) || Object.values(styleState.conf.tokensParsed).some((category) => Object.prototype.hasOwnProperty.call(category, tokenName)))) (styleState.tokenProvenance ||= {})[key] = originalVal;
+	else if (styleState.tokenProvenance && key in styleState.tokenProvenance) delete styleState.tokenProvenance[key];
 }
-const getSubStyle = (styleState, subKey, styleIn, avoidMergeTransform) => {
-  const {
-    staticConfig,
-    conf: conf2,
-    styleProps
-  } = styleState;
-  const styleOut = {};
-  let originalValues;
-  const styleInOriginalValues = import_styleOriginalValues.styleOriginalValues.get(styleIn);
-  const parentProps = styleState.props;
-  styleState.props = {
-    ...parentProps,
-    ...styleIn
-  };
-  try {
-    for (let key in styleIn) {
-      const val = styleIn[key];
-      key = conf2.shorthands[key] || key;
-      if (key === "transition") {
-        styleState.pseudoTransitions ||= {};
-        styleState.pseudoTransitions[subKey] = val;
-        const driver = styleState.animationDriver;
-        if (driver?.outputStyle === "css") {
-          const animationConfig = driver.animations?.[val];
-          if (animationConfig) styleOut["transition"] = `all ${animationConfig}${subKey[0] === "$" ? " !important" : ""}`;
-        }
-        if (!styleOut["transition"] && typeof val === "string" && !driver?.animations?.[val]) styleOut["transition"] = val;
-        continue;
-      }
-      if (!staticConfig.isHOC && key in import_skipProps.skipProps && !styleProps.noSkip) continue;
-      (0, import_propMapper.propMapper)(key, val, styleState, false, (skey, sval, originalVal) => {
-        const trackedOriginalVal = styleInOriginalValues?.[skey] ?? originalVal;
-        if (trackedOriginalVal !== void 0) {
-          originalValues ||= {};
-          originalValues[skey] = trackedOriginalVal;
-        }
-        if (skey in import_helpers.validPseudoKeys) sval = getSubStyle(styleState, skey, sval, avoidMergeTransform);
-        if (!avoidMergeTransform && skey in import_helpers.stylePropsTransform) mergeTransform(styleOut, skey, sval);else styleOut[skey] = styleProps.noNormalize ? sval : (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(sval, key);
-      });
-    }
-  } finally {
-    styleState.props = parentProps;
-  }
-  if (!avoidMergeTransform) {
-    const parentTransform = styleState.style?.transform;
-    const flatTransforms = styleState.flatTransforms;
-    const styleOutTransform = styleOut.transform;
-    if (Array.isArray(styleOutTransform) && styleOutTransform.length) {
-      const len = styleOutTransform.length;
-      if (Array.isArray(parentTransform)) {
-        const merged = [];
-        outer: for (let i = 0; i < parentTransform.length; i++) {
-          const pt = parentTransform[i];
-          for (const pk in pt) {
-            for (let j = 0; j < len; j++) for (const sk in styleOutTransform[j]) {
-              if (pk === sk) continue outer;
-              break;
-            }
-            merged.push(pt);
-            break;
-          }
-        }
-        for (let i = 0; i < len; i++) merged.push(styleOutTransform[i]);
-        styleOut.transform = merged;
-      }
-      if (flatTransforms) outer: for (const fk in flatTransforms) {
-        const ck = fk === "x" ? "translateX" : fk === "y" ? "translateY" : fk;
-        for (let j = 0; j < len; j++) for (const sk in styleOutTransform[j]) {
-          if (ck === sk) continue outer;
-          break;
-        }
-        mergeTransform(styleOut, fk, flatTransforms[fk]);
-      }
-    } else if (flatTransforms) mergeFlatTransforms(styleOut, flatTransforms);
-  }
-  if (!styleProps.noNormalize) (0, import_expandStyles.fixStyles)(styleOut);
-  if (originalValues && Object.keys(originalValues).length) import_styleOriginalValues.styleOriginalValues.set(styleOut, originalValues);
-  return styleOut;
+const getSubStyle = (styleState, _subKey, styleIn, avoidMergeTransform) => {
+	const { staticConfig, conf, styleProps } = styleState;
+	const styleOut = {};
+	let originalValues;
+	const styleInOriginalValues = import_styleOriginalValues.styleOriginalValues.get(styleIn);
+	const parentProps = styleState.props;
+	styleState.props = Object.create(parentProps, Object.getOwnPropertyDescriptors(styleIn));
+	try {
+		for (let key in styleIn) {
+			const val = styleIn[key];
+			key = conf.shorthands[key] || key;
+			if (!staticConfig.isHOC && key in import_skipProps.skipProps && !styleProps.noSkip) continue;
+			(0, import_propMapper.propMapper)(key, val, styleState, false, (skey, sval, originalVal) => {
+				const trackedOriginalVal = styleInOriginalValues?.[skey] ?? originalVal;
+				if (trackedOriginalVal !== void 0) {
+					originalValues ||= {};
+					originalValues[skey] = trackedOriginalVal;
+				}
+				if (!avoidMergeTransform && skey in import_helpers.stylePropsTransform) mergeTransform(styleOut, skey, sval);
+				else styleOut[skey] = styleProps.noNormalize ? sval : (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(sval, key);
+			});
+		}
+	} finally {
+		styleState.props = parentProps;
+	}
+	if (!avoidMergeTransform) {
+		const parentTransform = styleState.style?.transform;
+		const flatTransforms = styleState.flatTransforms;
+		const styleOutTransform = styleOut.transform;
+		if (Array.isArray(styleOutTransform) && styleOutTransform.length) {
+			const len = styleOutTransform.length;
+			if (Array.isArray(parentTransform)) {
+				const merged = [];
+				outer: for (let i = 0; i < parentTransform.length; i++) {
+					const pt = parentTransform[i];
+					for (const pk in pt) {
+						for (let j = 0; j < len; j++) for (const sk in styleOutTransform[j]) {
+							if (pk === sk) continue outer;
+							break;
+						}
+						merged.push(pt);
+						break;
+					}
+				}
+				for (let i = 0; i < len; i++) merged.push(styleOutTransform[i]);
+				styleOut.transform = merged;
+			}
+			if (flatTransforms) outer: for (const fk in flatTransforms) {
+				const ck = fk === "x" ? "translateX" : fk === "y" ? "translateY" : fk;
+				for (let j = 0; j < len; j++) for (const sk in styleOutTransform[j]) {
+					if (ck === sk) continue outer;
+					break;
+				}
+				mergeTransform(styleOut, fk, flatTransforms[fk]);
+			}
+		} else if (flatTransforms) mergeFlatTransforms(styleOut, flatTransforms);
+	}
+	if (!styleProps.noNormalize) (0, import_expandStyles.fixStyles)(styleOut);
+	if (originalValues) import_styleOriginalValues.styleOriginalValues.set(styleOut, originalValues);
+	return styleOut;
 };
 const useInsertEffectCompat = import_constants.isWeb ? import_react.default.useInsertionEffect || import_constants.useIsomorphicLayoutEffect : () => {};
 const useSplitStyles = (a, b, c, d, e, f, g, h, i, j, k, l, m) => {
-  "use no memo";
-
-  const res = getSplitStyles(a, b, c, d, e, f, g, h, i, j, k, l, m);
-  useInsertEffectCompat(() => {
-    if (res) (0, import_insertStyleRule.insertStyleRules)(res.rulesToInsert);
-  }, [res?.rulesToInsert]);
-  return res;
+	"use no memo";
+	const res = getSplitStyles(a, b, c, d, e, f, g, h, i, j, k, l, m);
+	useInsertEffectCompat(() => {
+		if (res) (0, import_insertStyleRule.insertStyleRules)(res.rulesToInsert);
+	}, [res?.rulesToInsert]);
+	return res;
 };
 function addStyleToInsertRules(rulesToInsert, styleObject) {
-  {
-    const identifier = styleObject[import_helpers.StyleObjectIdentifier];
-    if ((0, import_insertStyleRule.shouldInsertStyleRules)(identifier)) {
-      (0, import_insertStyleRule.updateRules)(identifier, styleObject[import_helpers.StyleObjectRules]);
-      rulesToInsert[identifier] = styleObject;
-    }
-  }
+	{
+		const identifier = styleObject[import_helpers.StyleObjectIdentifier];
+		if ((0, import_insertStyleRule.shouldInsertStyleRules)(identifier)) {
+			(0, import_insertStyleRule.updateRules)(identifier, styleObject[import_helpers.StyleObjectRules]);
+			rulesToInsert[identifier] = styleObject;
+		}
+	}
 }
-const defaultColor = process.env.TAMAGUI_DEFAULT_COLOR || "rgba(0,0,0,0)";
-const animatableDefaults = {
-  ...Object.fromEntries(Object.entries(import_helpers.tokenCategories.color).map(([k, v]) => [k, defaultColor])),
-  opacity: 1,
-  scale: 1,
-  scaleX: 1,
-  scaleY: 1,
-  rotate: "0deg",
-  rotateX: "0deg",
-  rotateY: "0deg",
-  rotateZ: "0deg",
-  skewX: "0deg",
-  skewY: "0deg",
-  x: 0,
-  y: 0,
-  borderRadius: 0
-};
 const mergeTransform = (obj, key, val, backwards = false) => {
-  if (typeof obj.transform === "string") return;
-  obj.transform ||= [];
-  obj.transform[backwards ? "unshift" : "push"]({
-    [mapTransformKeys[key] || key]: val
-  });
+	if (typeof obj.transform === "string") return;
+	obj.transform ||= [];
+	obj.transform[backwards ? "unshift" : "push"]({ [mapTransformKeys[key] || key]: val });
 };
 const mapTransformKeys = {
-  x: "translateX",
-  y: "translateY"
+	x: "translateX",
+	y: "translateY"
 };
-function passDownProp(viewProps, key, val, shouldMergeObject = false) {
-  if (shouldMergeObject) {
-    const next = {
-      ...viewProps[key],
-      ...val
-    };
-    delete viewProps[key];
-    viewProps[key] = next;
-  } else viewProps[key] = val;
-}
-function mergeMediaByImportance(styleState, mediaKey, key, value, isSizeMedia, importanceBump, debugProp, originalVal) {
-  const usedKeys = styleState.usedKeys;
-  let importance = (0, import_useMedia.getMediaImportanceIfMoreImportant)(mediaKey, key, styleState, isSizeMedia);
-  if (importanceBump) {
-    const bumpedImportance = import_pseudoDescriptors.defaultMediaImportance + importanceBump;
-    importance = !usedKeys[key] || bumpedImportance > usedKeys[key] ? bumpedImportance : null;
-  }
-  if (process.env.NODE_ENV === "development" && debugProp === "verbose") (0, import_log.log)(`mergeMediaByImportance ${key} importance usedKey ${usedKeys[key]} next ${importance}`);
-  if (importance === null) return false;
-  if (key in import_pseudoDescriptors.pseudoDescriptors) {
-    const descriptor = import_pseudoDescriptors.pseudoDescriptors[key];
-    const descriptorKey = descriptor.stateKey || descriptor.name;
-    if (styleState.componentState[descriptorKey] === false) return false;
-    const pseudoOriginalValues = import_styleOriginalValues.styleOriginalValues.get(value);
-    for (const subKey in value) mergeStyle(styleState, subKey, value[subKey], importance, false, pseudoOriginalValues?.[subKey]);
-  } else mergeStyle(styleState, key, value, importance, false, originalVal);
-  return true;
+function passDownProp(viewProps, key, val) {
+	viewProps[key] = val;
 }
 function normalizeStyle(style) {
-  const out = {};
-  for (const key in style) {
-    const val = style[key];
-    if (key in import_helpers.stylePropsTransform) mergeTransform(out, key, val);else out[key] = (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(val, key);
-  }
-  if (import_constants.isWeb && Array.isArray(out.transform)) out.transform = (0, import_transformsToString.transformsToString)(out.transform);
-  (0, import_expandStyles.fixStyles)(out);
-  return out;
+	const out = {};
+	for (const key in style) {
+		const val = style[key];
+		if (key in import_helpers.stylePropsTransform) mergeTransform(out, key, val);
+		else out[key] = (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(val, key);
+	}
+	if (import_constants.isWeb && Array.isArray(out.transform)) out.transform = (0, import_transformsToString.transformsToString)(out.transform);
+	(0, import_expandStyles.fixStyles)(out);
+	return out;
 }
-function applyDefaultStyle(pkey, styleState) {
-  const defaultValues = animatableDefaults[pkey];
-  if (defaultValues != null && !(pkey in styleState.usedKeys) && (!styleState.style || !(pkey in styleState.style))) mergeStyle(styleState, pkey, defaultValues, 1);
-}