@tamagui/web 3.0.0-beta.924.1 → 3.0.0

package/dist/esm/helpers/getSplitStyles.native.js

@@ -1,28 +1,33 @@
+import { getTransitionResolver } from "@tamagui/animation-helpers/transitionResolver";
 import { isAndroid, isClient, supportsDynamicColorIOS } from "@tamagui/constants";
 import { nonAnimatableStyleProps, stylePropsAll, stylePropsInput, stylePropsText, stylePropsTransform, validStyles } from "@tamagui/helpers";
-import { addTransformValue, createTransformAccumulator, finalizeTransformAccumulator, getTransformPartKeys, removeTransformValue } from "@tamagui/style-grammar/runtime";
-import { getConfig, getFont } from "../config.native.js";
+import { addTransformValue, createTransformAccumulator, finalizeTransformAccumulator, getTransformPartKeys, grammarMaxNonPlatformDepth, namedCssColors, removeTransformValue } from "@tamagui/style-grammar/runtime";
+import { getConfig, getFont, getSetting } from "../config.native.js";
 import { isDevTools } from "../constants/isDevTools.native.js";
 import { defaultComponentStateMounted } from "../defaultComponentState.native.js";
 import { isVariable } from "../createVariable.native.js";
 import { stylePieceSymbol } from "../types.native.js";
 import { addComposition, canGenerateCSS, flushDirectStyles, registerAtomicSlot } from "./getCSSStylesAtomic.native.js";
-import { expandStyle } from "./expandStyle.native.js";
+import { expandStyle, nativeShorthandLogicals } from "./expandStyle.native.js";
 import { classifyBorderComponents, splitComponents, startsValueFunction } from "./borderComponents.native.js";
 import { fixStyles } from "./expandStyles.native.js";
 import { getConfigRevisionState } from "./grammarConfig.native.js";
 import { mediaKeyMatch, mediaState } from "./mediaState.native.js";
 import { getStyleStaticConfig } from "./styleStaticConfig.native.js";
+import { mergeFrontendCondition } from "./styleFrontend.native.js";
 import { nativeTextInputColorProps, normalizeNativeStyle } from "./nativeStyleEngine.native.js";
 import { warnOnce, warnRefusedValue } from "./warnOnce.native.js";
-import { isColorStyleKey } from "./getDynamicVal.native.js";
+import { extractValueFromDynamic, isColorStyleKey } from "./getDynamicVal.native.js";
 import { getDynamicEnv } from "./styledDynamic.native.js";
 import { getRulesForIdentifier } from "./insertStyleRule.native.js";
 import { log } from "./log.native.js";
 import { normalizeColor } from "./normalizeColor.native.js";
 import { normalizeValueWithProperty } from "./normalizeValueWithProperty.native.js";
+import { resolveTextMetrics } from "./nativeTextMetrics.native.js";
+import { isTamaguiElement } from "./isTamaguiElement.native.js";
 import { parseNativeStyle } from "./parseNativeStyle.native.js";
 import { parseNativeTransform } from "./parseNativeTransform.native.js";
+import { resolveNativeUnits } from "./resolveNativeUnits.native.js";
 import { resolveVariableValue } from "./resolveVariableValue.native.js";
 import { HOC_CLASSNAME_MARKER, skipProps } from "./skipProps.native.js";
 import { styleOriginalValues } from "./styleOriginalValues.native.js";
@@ -33,10 +38,6 @@ import { isStylePiece, isStylePieceCacheable, setStylePieceCompiler, setStylePie
 
 export * from "./tokenCategories.native.js"
 
-function _type_of(obj) {
-	"@swc/helpers - typeof";
-	return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
-}
 var shouldTrackStyleTokenProvenance = process.env.NODE_ENV === "development" && process.env.TAMAGUI_ENABLE_STYLE_TOKEN_PROVENANCE === "1";
 var conditionValue = 0;
 var conditionPlatform = 1;
@@ -238,6 +239,7 @@ var passFrontendContainerType = 27;
 var passSourceLayer = 28;
 var passParentCursor = 29;
 var passMapSourceKey = 30;
+var passVariantOutput = 31;
 var passFlags = 13;
 var sourceLayerBase = 0;
 var sourceLayerVariant = 1;
@@ -252,6 +254,9 @@ var passHocFlag = 16;
 var passTextFlag = 32;
 var passInputFlag = 64;
 var passAsChildStyleFlag = 128;
+function isRemovedVendorStyleProp(property) {
+	return /^(Webkit|Moz|ms)[A-Z]/.test(property) && !(property in stylePropsAll);
+}
 function isValidStyleKey(key, validStyles) {
 	return key in validStyles;
 }
@@ -291,7 +296,6 @@ function contributeProp(pass, keyOg, valOg) {
 	var shouldCheckSkipProps = !noSkip;
 	var asChildExceptStyleLike = Boolean(flags & passAsChildStyleFlag);
 	var isTextOrInput = isText || isInput;
-	var hocParentVariants = isHOC ? parentVariants : void 0;
 	var keyInit = keyOg;
 	var valInit = valOg;
 	if (keyInit === "children") {
@@ -313,17 +317,24 @@ function contributeProp(pass, keyOg, valOg) {
 				return;
 			}
 			var resolveClassName = styleFrontend === null || styleFrontend === void 0 ? void 0 : styleFrontend.resolveClassName;
-			var sink = function(entry) {
-				var property2 = entry[0];
-				if (entry[2] !== void 0) {
-					if (isValidStyleKey(property2, validStyles)) contributeValue(styleState, property2, entry[1], void 0, false, entry[2]);
-					else if (process.env.NODE_ENV === "development") console.warn(`[tamagui] "${property2}" is not a valid style on this component; the frontend value is dropped.`);
-				} else {
-					if (property2 === "group") pass[passFrontendGroup] = entry[1];
-					else if (property2 === "container") pass[passFrontendContainer] = entry[1];
-					else if (property2 === "containerType") pass[passFrontendContainerType] = entry[1];
-					contributeProp(pass, property2, entry[1]);
+			var composedProps = null;
+			var sink = function(entry2) {
+				var property3 = entry2[0];
+				var condition2 = entry2[2];
+				if (property3.charCodeAt(0) === 95 && property3.charCodeAt(1) === 95) {
+					composedProps || (composedProps = {});
+					composedProps[property3] = mergeFrontendCondition(composedProps[property3], entry2[1], condition2);
+					return;
+				}
+				if (condition2 !== void 0) {
+					if (isValidStyleKey(property3, validStyles)) contributeValue(styleState, property3, entry2[1], void 0, false, condition2);
+					else if (process.env.NODE_ENV === "development") console.warn(`[tamagui] "${property3}" is not a valid style on this component; the frontend value is dropped.`);
+					return;
 				}
+				if (property3 === "group") pass[passFrontendGroup] = entry2[1];
+				else if (property3 === "container") pass[passFrontendContainer] = entry2[1];
+				else if (property3 === "containerType") pass[passFrontendContainerType] = entry2[1];
+				contributeProp(pass, property3, entry2[1]);
 			};
 			var start = 0;
 			for (var index = 0; index <= valInit.length; index++) {
@@ -349,17 +360,69 @@ function contributeProp(pass, keyOg, valOg) {
 				}
 				start = index + 1;
 			}
+			if (composedProps) {
+				var _styleFrontend_compose;
+				var composed = (_styleFrontend_compose = styleFrontend.compose) === null || _styleFrontend_compose === void 0 ? void 0 : _styleFrontend_compose.call(styleFrontend, composedProps);
+				for (var property in composed) contributeProp(pass, property, composed[property]);
+			}
 		}
 		return;
 	}
 	if (keyInit === HOC_CLASSNAME_MARKER) {
-		if (valInit && (typeof valInit === "undefined" ? "undefined" : _type_of(valInit)) === "object") {
+		if (valInit) {
 			var _direct;
-			var layers = (_direct = styleState).flatPropertyLayers || (_direct.flatPropertyLayers = /* @__PURE__ */ new Map());
-			for (var property in valInit) {
-				clearDirectStyle(styleState, property);
-				styleState.classNames[property] = valInit[property];
-				layers.set(property, pass[passSourceLayer]);
+			var [hocClassNames, hocSlots] = valInit;
+			var direct = styleState;
+			var layers = (_direct = direct).flatPropertyLayers || (_direct.flatPropertyLayers = /* @__PURE__ */ new Map());
+			for (var property1 in hocClassNames) {
+				if (hocSlots === null || hocSlots === void 0 ? void 0 : hocSlots.has(property1)) continue;
+				clearDirectStyle(styleState, property1);
+				styleState.classNames[property1] = hocClassNames[property1];
+				layers.set(property1, pass[passSourceLayer]);
+			}
+			if (hocSlots) {
+				var _direct1;
+				var slots = (_direct1 = direct).flatSlots || (_direct1.flatSlots = /* @__PURE__ */ new Map());
+				var markerLayer = pass[passSourceLayer];
+				var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+				try {
+					for (var _iterator = hocSlots[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+						var [slot, entries] = _step.value;
+						var _iteratorNormalCompletion1 = true, _didIteratorError1 = false, _iteratorError1 = void 0;
+						try {
+							for (var _iterator1 = entries[Symbol.iterator](), _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = true) {
+								var entry = _step1.value;
+								pass[passSourceLayer] = Math.max(entry[7] >> 5, sourceLayerResolver);
+								if (!ownsSourceLayer(styleState, entry[0], !!entry[2])) continue;
+								if (!isHOC && styleState.styleProps.isAnimated && (slot === "transition" || entry[8]) && !(entry[0] in nonAnimatableStyleProps)) {
+									var _styleState_animationDriver;
+									var property2 = entry[0] === "--t-x" ? "x" : entry[0] === "--t-y" ? "y" : entry[0] === "--t-scale-x" ? "scaleX" : entry[0] === "--t-scale-y" ? "scaleY" : entry[0];
+									var value = ((_styleState_animationDriver = styleState.animationDriver) === null || _styleState_animationDriver === void 0 ? void 0 : _styleState_animationDriver.inputStyle) === "value" ? entry[6] : entry[1];
+									entry[3] ? contributeValue(styleState, property2, value, entry[6], false, entry[3]) : emitValue(styleState, property2, value, null, entry[6], false);
+								} else writeStyleSlot(slots, slot, [...entry], pass[passSourceLayer]);
+							}
+						} catch (err) {
+							_didIteratorError1 = true;
+							_iteratorError1 = err;
+						} finally {
+							try {
+								if (!_iteratorNormalCompletion1 && _iterator1.return != null) _iterator1.return();
+							} finally {
+								if (_didIteratorError1) throw _iteratorError1;
+							}
+						}
+					}
+				} catch (err) {
+					_didIteratorError = true;
+					_iteratorError = err;
+				} finally {
+					try {
+						if (!_iteratorNormalCompletion && _iterator.return != null) _iterator.return();
+					} finally {
+						if (_didIteratorError) throw _iteratorError;
+					}
+				}
+				pass[passSourceLayer] = markerLayer;
 			}
 		}
 		return;
@@ -387,9 +450,23 @@ function contributeProp(pass, keyOg, valOg) {
 				continue;
 			}
 			var styleOriginals = shouldTrackStyleTokenProvenance ? styleOriginalValues.get(style) : void 0;
-			for (var key1 in style) {
-				if (style[key1] == null) continue;
-				contributeValue(styleState, key1, style[key1], styleOriginals === null || styleOriginals === void 0 ? void 0 : styleOriginals[key1]);
+			for (var authoredKey in style) {
+				var value1 = style[authoredKey];
+				if (value1 == null) continue;
+				var key1 = disableExpandShorthands ? authoredKey : shorthands[authoredKey] || authoredKey;
+				var inline = !styleState.styleProps.stylePieceEntries;
+				if (inline) {
+					if (typeof value1 === "string") {
+						var [segments] = getConfigRevisionState(conf).parseFlatValue(value1);
+						for (var index2 = 4; index2 < segments.length; index2 += 5) if (!(segments[index2] & 1)) {
+							inline = false;
+							break;
+						}
+					} else if (value1 && typeof value1 === "object" && !Array.isArray(value1) && !isVariable(value1) && classifyConditionalObject(value1, styleState) !== 0) inline = false;
+				}
+				styleState.flatInlineStyleProp = inline;
+				contributeValue(styleState, key1, value1, styleOriginals === null || styleOriginals === void 0 ? void 0 : styleOriginals[authoredKey]);
+				styleState.flatInlineStyleProp = false;
 			}
 		}
 		pass[passSourceLayer] = layerBeforeStyle;
@@ -400,18 +477,29 @@ function contributeProp(pass, keyOg, valOg) {
 		var defaultVal = (_defaultProps_keyOg = defaultProps[keyOg]) !== null && _defaultProps_keyOg !== void 0 ? _defaultProps_keyOg : defaultProps[keyInit];
 		if (defaultVal !== void 0 && valInit === defaultVal) return;
 	}
+	if (process.env.NODE_ENV === "development") {
+		if (!isValidStyleKey(keyInit, validStyles) && (keyInit === "animation" || !(keyInit in stylePropsAll)) && (!variants || !(keyInit in variants))) {
+			var replacement;
+			if (keyInit === "animation") replacement = "transition=";
+			else if (keyInit === "hoverStyle") replacement = "hover: clause";
+			else if (keyInit === "pressStyle") replacement = "press: clause";
+			else if (keyInit === "focusStyle") replacement = "focus: clause";
+			else if (keyInit === "enterStyle") replacement = "enter: clause";
+			else if (keyInit === "exitStyle") replacement = "exit: clause";
+			else if (keyInit.charCodeAt(0) === 36 && keyInit.length > 1) replacement = `${keyInit.slice(1)}: clause`;
+			if (replacement) warnOnce(`v2-prop:${keyInit}`, `prop "${keyInit}" was removed in v3; use ${replacement}`);
+		}
+	}
 	var isNativeInputColor = isInput && keyInit in nativeTextInputColorProps;
 	if (!isNativeInputColor && keyInit in skipProps && shouldSkipDirectProps && !(neverSkipProps === null || neverSkipProps === void 0 ? void 0 : neverSkipProps[keyInit])) if (keyInit === "transition" && typeof valInit === "string") return;
 	else return;
 	var isValidStyleKeyInit = isValidStyleKey(keyInit, validStyles);
+	if (keyInit === "userSelect") {
+		if (isText) viewProps.selectable = valInit !== "none";
+		return;
+	}
 	if (!isValidStyleKeyInit) {
-		if (!isAndroid) {
-			if (keyInit === "elevationAndroid") return;
-		}
-		if (keyInit === "userSelect") {
-			keyInit = "selectable";
-			valInit = valInit !== "none";
-		} else if (keyInit === "textOverflow") {
+		if (keyInit === "textOverflow") {
 			if (isText && valInit === "ellipsis") {
 				var _viewProps, _viewProps1;
 				var _numberOfLines;
@@ -422,12 +510,15 @@ function contributeProp(pass, keyOg, valOg) {
 			return;
 		} else if (keyInit.startsWith("data-")) return;
 	}
+	if (pass[passVariantOutput] && !isValidStyleKeyInit && !keyInit.startsWith("aria-") && !(keyInit in stylePropsAll) && !(keyInit in skipProps) && !(variants && keyInit in variants) && !(parentVariants && keyInit in parentVariants) && !(styledContextKeys === null || styledContextKeys === void 0 ? void 0 : styledContextKeys.has(keyInit)) && !(styledContext && keyInit in styledContext)) {
+		if (process.env.NODE_ENV === "development") warnOnce(`variant-non-style:${keyInit}`, `a variant set "${keyInit}", which is not a style. Variants hold styles and aria/data attributes only: set "${keyInit}" on the component one level up.`);
+		return;
+	}
 	var isVariant = !isValidStyleKeyInit && variants && keyInit in variants;
 	var isStyleProp = isValidStyleKeyInit || isVariant && !noExpand;
 	if (isStyleProp && asChildExceptStyleLike) return;
-	var shouldPassProp = !isStyleProp && isHOC || hocParentVariants && keyInit in hocParentVariants || (inlineProps === null || inlineProps === void 0 ? void 0 : inlineProps.has(keyInit));
-	var parentVariant = parentVariants === null || parentVariants === void 0 ? void 0 : parentVariants[keyInit];
-	var isHOCShouldPassThrough = Boolean(isHOC && (parentVariant || keyInit in skipProps));
+	var shouldPassProp = !isStyleProp && isHOC || isHOC && keyInit === "disabled" || parentVariants && keyInit in parentVariants || (inlineProps === null || inlineProps === void 0 ? void 0 : inlineProps.has(keyInit));
+	var isHOCShouldPassThrough = isHOC && keyInit in skipProps;
 	var shouldPassThrough = shouldPassProp || isHOCShouldPassThrough;
 	if (process.env.NODE_ENV === "development" && debug === "verbose") {
 		console.groupCollapsed(`  \u{1F511} ${keyOg}${keyInit !== keyOg ? ` (shorthand for ${keyInit})` : ""} ${shouldPassThrough ? "(pass)" : ""}`);
@@ -451,7 +542,8 @@ function contributeProp(pass, keyOg, valOg) {
 		if (!isVariant) return;
 	}
 	if (!isNativeInputColor && shouldCheckSkipProps && !(neverSkipProps === null || neverSkipProps === void 0 ? void 0 : neverSkipProps[keyInit])) {
-		if (keyInit in skipProps && !(keyInit === "transition" && typeof valInit === "string" && !(driverAnimations === null || driverAnimations === void 0 ? void 0 : driverAnimations[valInit]))) {
+		var _getTransitionResolver;
+		if (keyInit in skipProps && !(keyInit === "transition" && typeof valInit === "string" && !((_getTransitionResolver = getTransitionResolver()) === null || _getTransitionResolver === void 0 ? void 0 : _getTransitionResolver.resolve(valInit, { animations: driverAnimations }).fused))) {
 			if (process.env.NODE_ENV === "development" && debug === "verbose") console.groupEnd();
 			return;
 		}
@@ -484,22 +576,22 @@ function contributeProp(pass, keyOg, valOg) {
 		if (valInit === "unset") {
 			var expanded = expandStyle(keyInit, valInit, conf.settings.styleCompat || "web");
 			clearDirectStyle(styleState, keyInit);
-			if (expanded) for (var index2 = 0; index2 < expanded.length; index2++) clearDirectStyle(styleState, expanded[index2][0]);
-		} else contributeValue(styleState, keyInit, valInit, originalOg, !isHostStyleKey);
+			if (expanded) for (var index3 = 0; index3 < expanded.length; index3++) clearDirectStyle(styleState, expanded[index3][0]);
+		} else contributeValue(styleState, keyInit, valInit, originalOg, !isHostStyleKey || isStyledContextProp && typeof valInit === "boolean");
 		return;
 	}
 	var condition = pass[passParentCursor];
 	if (condition) {
 		if (isHOC) {
 			var previous = viewProps[keyInit];
-			var transport = previous && (typeof previous === "undefined" ? "undefined" : _type_of(previous)) === "object" && !Array.isArray(previous) && "default" in previous ? previous : { default: previous };
+			var transport = previous && typeof previous === "object" && !Array.isArray(previous) && "default" in previous ? previous : { default: previous };
 			transport[condition[conditionKey]] = valInit;
 			viewProps[keyInit] = transport;
 		} else if (process.env.NODE_ENV === "development") console.warn(`[tamagui] "${keyInit}" is not a valid style on this component; the conditional variant value is dropped.`);
 		return;
 	}
-	if (keyInit in stylePropsAll) {
-		if (process.env.NODE_ENV === "development") console.warn(`[tamagui] "${keyInit}" 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.`);
+	if (keyInit in stylePropsAll || isRemovedVendorStyleProp(keyInit)) {
+		if (process.env.NODE_ENV === "development" && false);
 		return;
 	}
 	viewProps[keyInit] = valInit;
@@ -514,7 +606,7 @@ function contributeProp(pass, keyOg, valOg) {
 	}
 }
 var getSplitStyles = function(props, staticConfig, theme, themeName, componentState, styleProps, parentSplitStyles, componentContext, groupContext, elementType, startedUnhydrated, debug, animationDriver, styleStaticConfig) {
-	var _styleState_flatMediaKeys, _styleState_flatGroupKeys, _styleState_flatGroupMedia, _styleState_style;
+	var _staticConfig_Component_staticConfig, _staticConfig_Component, _styleState_flatMediaKeys, _styleState_flatGroupKeys, _styleState_flatGroupMedia, _styleState_flatGroupKeys1, _styleState_flatGroupMedia1, _styleState_style;
 	var conf = getConfig();
 	styleStaticConfig || (styleStaticConfig = getStyleStaticConfig(staticConfig, conf));
 	var driver = animationDriver || (componentContext === null || componentContext === void 0 ? void 0 : componentContext.animationDriver) || conf.animations;
@@ -528,7 +620,7 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
 	var variants = styleStaticConfig.variants;
 	var viewProps = {};
 	var mediaState$1 = styleProps.mediaState || mediaState;
-	var shouldDoClasses = !process.env.TAMAGUI_DID_OUTPUT_CSS && acceptsClassName && false;
+	var shouldDoClasses = process.env.TAMAGUI_RUNTIME !== "island" && acceptsClassName && false;
 	var rulesToInsert = void 0;
 	var classNames = {};
 	var hasMedia = false;
@@ -559,6 +651,12 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
 		animationDriver: resolvedDriver
 	};
 	styleState.flatStyleStaticConfig = styleStaticConfig;
+	var prev = styleProps.prevStyle;
+	if (prev) {
+		styleState.flatPrevStyle = prev;
+		styleState.flatStyleChanged = false;
+		styleState.flatStyleKeyCount = 0;
+	}
 	if (process.env.NODE_ENV === "development" && (debug === "profile" || globalThis.time)) time`style-state`;
 	if (process.env.NODE_ENV === "development" && debug === "verbose" && isClient) {
 		if (isDevTools) {
@@ -584,7 +682,7 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
 	var frontendContainer;
 	var frontendContainerType;
 	var processedProps = props;
-	var parentVariants = parentStaticConfig ? getStyleStaticConfig(parentStaticConfig, conf).variants : void 0;
+	var parentVariants = isHOC ? (_staticConfig_Component = staticConfig.Component) === null || _staticConfig_Component === void 0 ? void 0 : (_staticConfig_Component_staticConfig = _staticConfig_Component.staticConfig) === null || _staticConfig_Component_staticConfig === void 0 ? void 0 : _staticConfig_Component_staticConfig.variants : void 0;
 	var defaultProps = asChild ? styleStaticConfig.defaultProps : void 0;
 	var asChildExceptStyleLike = asChild === "except-style" || asChild === "except-style-web";
 	var containerValue;
@@ -606,7 +704,7 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
 		styledContextKeys,
 		(noSkip ? passNoSkipFlag : 0) | (disableExpandShorthands ? passDisableShorthandsFlag : 0) | (noExpand ? passNoExpandFlag : 0) | (noMergeStyle ? passNoMergeFlag : 0) | (isHOC ? passHocFlag : 0) | (isText ? passTextFlag : 0) | (isInput ? passInputFlag : 0) | (asChildExceptStyleLike ? passAsChildStyleFlag : 0),
 		debug,
-		parentStaticConfig,
+		process.env.NODE_ENV === "development" ? parentStaticConfig : void 0,
 		defaultProps,
 		driverAnimations,
 		driverOutputStyle,
@@ -647,6 +745,7 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
 	}
 	var resolvers = staticConfig.resolvers;
 	if (resolvers && !noExpand) {
+		var prevSourceLayer = pass[passSourceLayer];
 		pass[passSourceLayer] = sourceLayerResolver;
 		var flagsBefore = pass[passFlags];
 		pass[passFlags] = flagsBefore | passNoExpandFlag;
@@ -659,6 +758,7 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
 			}
 		}
 		pass[passFlags] = flagsBefore;
+		pass[passSourceLayer] = prevSourceLayer;
 	}
 	className = pass[passClassName];
 	shouldDoClasses = pass[passShouldDoClasses];
@@ -704,6 +804,8 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
 		}
 	}
 	completeResolvedStyles(styleState);
+	if ((_styleState_flatGroupKeys1 = styleState.flatGroupKeys) === null || _styleState_flatGroupKeys1 === void 0 ? void 0 : _styleState_flatGroupKeys1.size) pseudoGroups = styleState.flatGroupKeys;
+	if ((_styleState_flatGroupMedia1 = styleState.flatGroupMedia) === null || _styleState_flatGroupMedia1 === void 0 ? void 0 : _styleState_flatGroupMedia1.size) mediaGroups = styleState.flatGroupMedia;
 	if (styleProps.isStatic) for (var property in classNames) {
 		var identifier = classNames[property];
 		if (rulesToInsert[identifier]) continue;
@@ -738,26 +840,47 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
 			}
 		}
 	}
+	var nativeTextMetrics;
+	var _styleState_style2;
 	if (viewProps.tabIndex === 0) {
 		var _viewProps;
 		var _accessible;
 		(_accessible = (_viewProps = viewProps).accessible) !== null && _accessible !== void 0 || (_viewProps.accessible = true);
 	}
-	var style = styleState.style;
-	if (style === null || style === void 0 ? void 0 : style.fontFamily) {
+	if ((isText || isInput || staticConfig.isDOM) && !isHOC && (styleState.nativeLineHeight !== void 0 || ((_styleState_style2 = styleState.style) === null || _styleState_style2 === void 0 ? void 0 : _styleState_style2.fontSize) !== void 0 || (componentContext === null || componentContext === void 0 ? void 0 : componentContext.parentFontSize) !== void 0 || (componentContext === null || componentContext === void 0 ? void 0 : componentContext.parentLineHeight) !== void 0)) {
+		var _parentSplitStyles_nativeTextMetrics;
+		var _styleState2;
+		var style = (_styleState2 = styleState).style || (_styleState2.style = {});
+		var _styleState_nativeLineHeight;
+		var lineHeight = (_styleState_nativeLineHeight = styleState.nativeLineHeight) !== null && _styleState_nativeLineHeight !== void 0 ? _styleState_nativeLineHeight : parentSplitStyles === null || parentSplitStyles === void 0 ? void 0 : (_parentSplitStyles_nativeTextMetrics = parentSplitStyles.nativeTextMetrics) === null || _parentSplitStyles_nativeTextMetrics === void 0 ? void 0 : _parentSplitStyles_nativeTextMetrics.lineHeight;
+		if (typeof lineHeight === "string") {
+			var length = resolveNativeUnits("lineHeight", lineHeight, styleState);
+			if (typeof length === "number") lineHeight = `${length}px`;
+		}
+		nativeTextMetrics = resolveTextMetrics(style, lineHeight, componentContext, styleProps.isStatic, !staticConfig.isDOM && !(processedProps.asChild && isTamaguiElement(processedProps.children)));
+		if (staticConfig.isDOM) viewProps.__textMetrics = nativeTextMetrics;
+		var directText = styleState;
+		var prevTextStyle = directText.flatPrevStyle;
+		if (prevTextStyle && !directText.flatStyleChanged) {
+			var resolvedTextStyle = styleState.style;
+			if (resolvedTextStyle && (resolvedTextStyle.fontSize !== prevTextStyle.fontSize || resolvedTextStyle.lineHeight !== prevTextStyle.lineHeight)) directText.flatStyleChanged = true;
+		}
+	}
+	var style1 = styleState.style;
+	if (style1 === null || style1 === void 0 ? void 0 : style1.fontFamily) {
 		var _getFont;
-		var faceInfo = (_getFont = getFont(style.fontFamily)) === null || _getFont === void 0 ? void 0 : _getFont.face;
+		var faceInfo = (_getFont = getFont(style1.fontFamily)) === null || _getFont === void 0 ? void 0 : _getFont.face;
 		if (faceInfo) {
 			var _faceInfo_style_fontWeight_, _faceInfo_style_fontWeight;
-			var overrideFace = (_faceInfo_style_fontWeight = faceInfo[style.fontWeight]) === null || _faceInfo_style_fontWeight === void 0 ? void 0 : (_faceInfo_style_fontWeight_ = _faceInfo_style_fontWeight[style.fontStyle || "normal"]) === null || _faceInfo_style_fontWeight_ === void 0 ? void 0 : _faceInfo_style_fontWeight_.val;
+			var overrideFace = (_faceInfo_style_fontWeight = faceInfo[style1.fontWeight]) === null || _faceInfo_style_fontWeight === void 0 ? void 0 : (_faceInfo_style_fontWeight_ = _faceInfo_style_fontWeight[style1.fontStyle || "normal"]) === null || _faceInfo_style_fontWeight_ === void 0 ? void 0 : _faceInfo_style_fontWeight_.val;
 			if (overrideFace) {
-				style.fontFamily = overrideFace;
+				style1.fontFamily = overrideFace;
 				styleState.fontFamily = overrideFace;
-				delete style.fontWeight;
-				delete style.fontStyle;
+				delete style1.fontWeight;
+				delete style1.fontStyle;
 			}
 		}
-		if (process.env.NODE_ENV === "development" && debug && debug !== "profile") log(`Found fontFamily native: ${style.fontFamily}`, faceInfo);
+		if (process.env.NODE_ENV === "development" && debug && debug !== "profile") log(`Found fontFamily native: ${style1.fontFamily}`, faceInfo);
 	}
 	if (styleState.style) styleState.style = normalizeNativeStyle(styleState.style);
 	if (process.env.NODE_ENV === "development" && (debug === "profile" || globalThis.time)) time`split-styles-pre-result`;
@@ -773,6 +896,56 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
 		}
 		if (hasProvenance) setStyleTokenProvenance(styleState.style, provenance);
 	}
+	var direct = styleState;
+	var prevStyle = direct.flatPrevStyle;
+	if (prevStyle && styleState.style && !direct.flatStyleChanged && Object.keys(prevStyle).length === Object.keys(styleState.style).length) {
+		var previousTransform = prevStyle.transform;
+		var nextTransform = styleState.style.transform;
+		var transformMatches = previousTransform === nextTransform;
+		if (!transformMatches && Array.isArray(previousTransform) && Array.isArray(nextTransform) && previousTransform.length === nextTransform.length) {
+			transformMatches = true;
+			for (var index1 = 0; index1 < nextTransform.length; index1++) {
+				var previousPart = previousTransform[index1];
+				var nextPart = nextTransform[index1];
+				if (previousPart === nextPart) continue;
+				if (!previousPart || !nextPart || typeof previousPart !== "object" || typeof nextPart !== "object") {
+					transformMatches = false;
+					break;
+				}
+				var keys = Object.keys(nextPart);
+				if (keys.length !== Object.keys(previousPart).length) {
+					transformMatches = false;
+					break;
+				}
+				var _iteratorNormalCompletion1 = true, _didIteratorError1 = false, _iteratorError1 = void 0;
+				try {
+					var _loop = function() {
+						var key9 = _step1.value;
+						var previousValue = previousPart[key9];
+						var nextValue = nextPart[key9];
+						if (previousValue !== nextValue && !(Array.isArray(previousValue) && Array.isArray(nextValue) && previousValue.length === nextValue.length && nextValue.every(function(value, valueIndex) {
+							return value === previousValue[valueIndex];
+						}))) {
+							transformMatches = false;
+							return "break";
+						}
+					};
+					for (var _iterator1 = keys[Symbol.iterator](), _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = true) if (_loop() === "break") break;
+				} catch (err) {
+					_didIteratorError1 = true;
+					_iteratorError1 = err;
+				} finally {
+					try {
+						if (!_iteratorNormalCompletion1 && _iterator1.return != null) _iterator1.return();
+					} finally {
+						if (_didIteratorError1) throw _iteratorError1;
+					}
+				}
+				if (!transformMatches) break;
+			}
+		}
+		if (transformMatches) styleState.style = prevStyle;
+	}
 	var result = {
 		hasMedia,
 		fontFamily: styleState.fontFamily,
@@ -784,6 +957,7 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
 		mediaGroups,
 		overriddenContextProps: styleState.overriddenContextProps
 	};
+	if (nativeTextMetrics) result.nativeTextMetrics = nativeTextMetrics;
 	if (effectiveTransition != null) result.effectiveTransition = effectiveTransition;
 	if (conditionalStates) result.programStates = conditionalStates;
 	if (usesSafeArea) result.usesSafeArea = true;
@@ -799,8 +973,8 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
 	if (frontendContainerType !== void 0) result.frontendContainerType = frontendContainerType;
 	if (!noMergeStyle) {
 		if (!asChildExceptStyleLike) {
-			var style1 = styleState.style;
-			if (style1) viewProps.style = style1;
+			var style2 = styleState.style;
+			if (style2) viewProps.style = style2;
 		}
 	}
 	if (process.env.NODE_ENV === "development" && debug === "verbose") {
@@ -828,7 +1002,7 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
 var stylePieceStaticConfig = {
 	acceptsClassName: true,
 	isText: true,
-	validStyles: stylePropsAll
+	validStyles: stylePropsInput
 };
 var compileStylePieceRuntime = function(piece, layer) {};
 setStylePieceCompiler(compileStylePieceRuntime);
@@ -855,6 +1029,34 @@ function resolveStylePiece(styleState, piece) {
 	themeCache.set(theme, resolved);
 	return resolved;
 }
+function writeStyleSlot(slots, slot, source, sourceLayer) {
+	var list = slots.get(slot);
+	if (!list) slots.set(slot, list = []);
+	var flags = source[7] & 31;
+	var identity = source[3];
+	var condition = source[2];
+	for (var index = 0; index < list.length; index++) {
+		var entry = list[index];
+		var entryFlags = entry[7] & 31;
+		if ((entryFlags & (recordInline | recordCSS)) !== (flags & (recordInline | recordCSS))) {
+			if (sourceLayer === sourceLayerStyle && entry[7] >> 5 === sourceLayerStyle && entry[0] === source[0] && !condition && !entry[2]) list.splice(index--, 1);
+			continue;
+		}
+		if (entry[0] !== source[0]) continue;
+		if (flags & recordDefault) {
+			if (!(entryFlags & recordDefault) && (!entry[2] || entry[3] === identity)) return;
+		} else if (entryFlags & recordDefault && (!condition || entry[3] === identity)) {
+			list.splice(index--, 1);
+			continue;
+		}
+		if (entry[3] === identity) {
+			list.splice(index, 1);
+			break;
+		}
+	}
+	source[7] = flags | sourceLayer << 5;
+	list.push(source);
+}
 function mergeStyle(styleState, key, val) {
 	arguments.length > 3 && arguments[3] !== void 0 && arguments[3];
 	var originalVal = arguments.length > 4 ? arguments[4] : void 0;
@@ -874,10 +1076,24 @@ function mergeStyle(styleState, key, val) {
 		addTransformValue(styleState.transformAccumulator, key, val);
 	} else {
 		var out = val;
+		if (key === "lineHeight") styleState.nativeLineHeight = typeof out === "number" && isVariable(originalVal) && typeof originalVal.val === "number" ? `${out}px` : out;
+		else if (typeof out === "string") {
+			if (out.includes("cqi") || out.includes("cqw")) {
+				var _styleState2, _styleState3;
+				((_styleState2 = styleState).flatGroupKeys || (_styleState2.flatGroupKeys = /* @__PURE__ */ new Set())).add("@");
+				((_styleState3 = styleState).flatGroupMedia || (_styleState3.flatGroupMedia = /* @__PURE__ */ new Set())).add("@");
+			}
+			out = resolveNativeUnits(key, out, styleState);
+		}
 		if (staticConfig.isInput && key in nativeTextInputColorProps) viewProps[nativeTextInputColorProps[key]] = out;
 		else {
-			var _styleState2;
-			(_styleState2 = styleState).style || (_styleState2.style = {});
+			var _styleState4;
+			var direct = styleState;
+			if (direct.flatPrevStyle) {
+				direct.flatStyleKeyCount = (direct.flatStyleKeyCount || 0) + 1;
+				if (!direct.flatStyleChanged && direct.flatPrevStyle[key] !== out) direct.flatStyleChanged = true;
+			}
+			(_styleState4 = styleState).style || (_styleState4.style = {});
 			styleState.style[key] = out;
 			if (shouldTrackStyleTokenProvenance) recordStyleTokenProvenance(styleState, key, originalVal);
 		}
@@ -888,8 +1104,8 @@ function recordStyleTokenProvenance(styleState, key, originalVal) {
 	var tokenName = typeof originalVal === "string" ? originalVal : "";
 	if (tokenName) {
 		var slash = tokenName.lastIndexOf("/");
-		var opacity = slash === -1 ? NaN : Number(tokenName.slice(slash + 1));
-		if (Number.isInteger(opacity) && opacity >= 0 && opacity <= 100) tokenName = tokenName.slice(0, slash);
+		var opacity = slash === -1 ? NaN : +tokenName.slice(slash + 1);
+		if (opacity % 1 === 0 && opacity >= 0 && opacity <= 100) tokenName = tokenName.slice(0, slash);
 	}
 	if (tokenName !== "" && (tokenName in styleState.theme || tokenName in (((_styleState_conf_themes = styleState.conf.themes) === null || _styleState_conf_themes === void 0 ? void 0 : _styleState_conf_themes[styleState.flatThemeName || ""]) || {}) || Object.values(styleState.conf.tokensParsed).some(function(category) {
 		return tokenName in category;
@@ -940,31 +1156,32 @@ var recordDefault = 8;
 var recordCSS = 16;
 function writeStyleRecord(state, property, value, cursor, original, flags) {
 	var conditionOverride = arguments.length > 6 && arguments[6] !== void 0 ? arguments[6] : -1;
-	var _state_flatPass;
+	var _direct_flatPass, _direct_flatPass1;
 	var _direct;
 	var condition = conditionOverride !== -1 ? conditionOverride : cursor ? cursor[conditionValue] : 0;
 	var identity = cursor ? cursor[conditionKey] : "";
-	var slots = (_direct = state).flatSlots || (_direct.flatSlots = /* @__PURE__ */ new Map());
-	var slot = property.startsWith("transition") ? "transition" : property;
+	if (value === "unset" && identity !== "") {
+		value = void 0;
+		original = void 0;
+		flags |= recordRetract;
+	}
+	var direct = state;
+	var slots = (_direct = direct).flatSlots || (_direct.flatSlots = /* @__PURE__ */ new Map());
+	var sourceLayer = ((_direct_flatPass = direct.flatPass) === null || _direct_flatPass === void 0 ? void 0 : _direct_flatPass[passSourceLayer]) || 0;
+	if (direct.flatInlineStyleProp) flags |= recordInline;
+	var cssSlot = property.startsWith("transition") ? "transition" : property;
+	var slot = flags & recordInline && cssSlot !== property ? property : cssSlot;
 	var list = slots.get(slot);
 	if (!list) slots.set(slot, list = []);
-	for (var index = 0; index < list.length; index++) {
-		var entry = list[index];
-		var entryFlags = entry[7];
-		if ((entryFlags & (recordInline | recordCSS)) !== (flags & (recordInline | recordCSS))) continue;
-		if (entry[0] !== property) continue;
-		if (flags & recordDefault) {
-			if (!(entryFlags & recordDefault) && (!entry[2] || entry[3] === identity)) return;
-		} else if (entryFlags & recordDefault && (!condition || entry[3] === identity)) {
-			list.splice(index--, 1);
-			continue;
-		}
-		if (entry[3] === identity) {
-			list.splice(index, 1);
-			break;
+	if (sourceLayer === sourceLayerStyle && !condition) {
+		var other = slot === cssSlot ? list : slots.get(flags & recordInline ? cssSlot : property);
+		if (other) for (var index = 0; index < other.length; index++) {
+			var entry = other[index];
+			var entryFlags = entry[7];
+			if (entry[0] === property && !entry[2] && entryFlags >> 5 === sourceLayerStyle && (entryFlags & (recordInline | recordCSS)) !== (flags & (recordInline | recordCSS))) other.splice(index--, 1);
 		}
 	}
-	list.push([
+	writeStyleSlot(slots, slot, [
 		property,
 		value,
 		condition,
@@ -972,8 +1189,10 @@ function writeStyleRecord(state, property, value, cursor, original, flags) {
 		cursor ? cursor[conditionSelector] : "",
 		cursor ? cursor[conditionWrappers] : void 0,
 		original,
-		flags | (((_state_flatPass = state.flatPass) === null || _state_flatPass === void 0 ? void 0 : _state_flatPass[passSourceLayer]) || 0) << 5
-	]);
+		flags,
+		void 0,
+		!sourceLayer && ((_direct_flatPass1 = direct.flatPass) === null || _direct_flatPass1 === void 0 ? void 0 : _direct_flatPass1[passVariantOutput])
+	], sourceLayer);
 }
 function streamWriteInline(state, property, value, cursor, original) {
 	var normalize = arguments.length > 5 && arguments[5] !== void 0 ? arguments[5] : property === "lineHeight", conditionOverride = arguments.length > 6 && arguments[6] !== void 0 ? arguments[6] : -1, force = arguments.length > 7 && arguments[7] !== void 0 ? arguments[7] : false;
@@ -981,6 +1200,7 @@ function streamWriteInline(state, property, value, cursor, original) {
 }
 function completeResolvedStyles(state) {
 	var merge = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : mergeStyle;
+	var _direct;
 	var direct = state;
 	var shadow = direct.flatWebShadow;
 	if (shadow && (direct.flatBoxShadowSequence || 0) <= shadow[4]) {
@@ -1003,6 +1223,7 @@ function completeResolvedStyles(state) {
 	}
 	var slots = direct.flatSlots;
 	if (!slots) return;
+	var capture = state.staticConfig.isHOC ? (_direct = direct).flatCapturedSlots || (_direct.flatCapturedSlots = /* @__PURE__ */ new Map()) : void 0;
 	var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
 	try {
 		for (var _iterator = slots[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
@@ -1034,7 +1255,45 @@ function completeResolvedStyles(state) {
 					}
 				}
 			}
-			if (cssEntries) registerAtomicSlot(direct, property, cssEntries);
+			if (cssEntries) {
+				registerAtomicSlot(direct, property, cssEntries);
+				if (capture) {
+					var _iteratorNormalCompletion1 = true, _didIteratorError1 = false, _iteratorError1 = void 0;
+					try {
+						for (var _iterator1 = cssEntries[Symbol.iterator](), _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = true) {
+							var entry1 = _step1.value;
+							entry1[7] = entry1[7] | recordCSS;
+							if (!(entry1[2] & 12)) continue;
+							var _iteratorNormalCompletion2 = true, _didIteratorError2 = false, _iteratorError2 = void 0;
+							try {
+								for (var _iterator2 = cssEntries[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
+									var sibling = _step2.value;
+									if (sibling[0] === entry1[0]) sibling[8] = true;
+								}
+							} catch (err) {
+								_didIteratorError2 = true;
+								_iteratorError2 = err;
+							} finally {
+								try {
+									if (!_iteratorNormalCompletion2 && _iterator2.return != null) _iterator2.return();
+								} finally {
+									if (_didIteratorError2) throw _iteratorError2;
+								}
+							}
+						}
+					} catch (err) {
+						_didIteratorError1 = true;
+						_iteratorError1 = err;
+					} finally {
+						try {
+							if (!_iteratorNormalCompletion1 && _iterator1.return != null) _iterator1.return();
+						} finally {
+							if (_didIteratorError1) throw _iteratorError1;
+						}
+					}
+					capture.set(property, cssEntries);
+				}
+			}
 			if (inlineWinner) if (inlineWinner[7] & recordRetract) {
 				if (state.style) delete state.style[inlineWinner[0]];
 			} else merge(state, inlineWinner[0], inlineWinner[1], !(inlineWinner[7] & recordNormalize), inlineWinner[6] !== void 0 ? inlineWinner[6] : inlineWinner[1]);
@@ -1071,7 +1330,7 @@ function emitUnderCondition(state, property, value, cursor, originalValue, conte
 	return condition;
 }
 var formatScanFailure = function(failure, source, failureIndex) {
-	return failure === "invalid-character" ? `"${source[failureIndex]}" would end the declaration or rule` : failure === "unterminated-string" ? "an unterminated string" : failure === "unterminated-comment" ? "an unterminated \"/*\" comment" : failure === "stray-comment-close" ? "a stray \"*/\"" : "an unterminated \"(\"";
+	return failure === "invalid-character" ? `"${source[failureIndex]}" would end the declaration or rule` : failure === "unterminated-string" ? "an unterminated string" : failure === "unterminated-comment" ? "an unterminated \"/*\" comment" : failure === "stray-comment-close" ? "a stray \"*/\"" : failure === "over-deep-clause" ? `a clause with more than ${grammarMaxNonPlatformDepth} non-platform conditions` : "an unterminated \"(\"";
 };
 var warnScanFailure = function(property, source, failure, failureIndex) {
 	if (process.env.NODE_ENV === "development") warnRefusedValue(property, source, formatScanFailure(failure, source, failureIndex));
@@ -1097,17 +1356,29 @@ var valueCaches = /* @__PURE__ */ new WeakMap();
 var valueCacheEntries = 0;
 var valueCacheRoot = {};
 var parsedSlices = /* @__PURE__ */ new WeakMap();
-var fontProperties = /* @__PURE__ */ new Map();
+var cssWideColorKeywords = /* @__PURE__ */ new Set([
+	"inherit",
+	"initial",
+	"unset",
+	"revert",
+	"revert-layer",
+	"currentcolor",
+	"transparent"
+]);
+var shadowRecipeProperties = /* @__PURE__ */ new Set([
+	"boxShadow",
+	"textShadow",
+	"filter"
+]);
 function configuredValue(state, property, raw) {
-	var embedded = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : false;
-	var _maps;
+	var embedded = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : false, nativeColors = arguments.length > 4 ? arguments[4] : void 0;
 	var grammar = getConfigRevisionState(state.conf);
 	var name = raw;
 	var opacity;
 	var slash = raw.lastIndexOf("/");
 	if (slash > 0) {
-		var amount = Number(raw.slice(slash + 1));
-		if (Number.isInteger(amount) && amount >= 0 && amount <= 100) {
+		var amount = +raw.slice(slash + 1);
+		if (amount % 1 === 0 && amount >= 0 && amount <= 100) {
 			name = raw.slice(0, slash);
 			opacity = amount;
 		}
@@ -1117,36 +1388,33 @@ function configuredValue(state, property, raw) {
 		state.flatUsesSafeArea = true;
 		return safeArea;
 	}
-	var fontProperty = fontProperties.get(property);
-	if (fontProperty === void 0) {
-		fontProperty = property.startsWith("font") || property === "lineHeight" || property === "letterSpacing";
-		fontProperties.set(property, fontProperty);
-	}
-	var revision = grammar.revision;
-	if (state.conf !== valueCacheConf || revision !== valueCacheRevision) {
-		valueCacheConf = state.conf;
-		valueCacheRevision = revision;
-		valueCaches = /* @__PURE__ */ new WeakMap();
-		valueCacheEntries = 0;
-		state.flatValueScope = void 0;
-	}
+	var fontProperty = property.startsWith("font") || property === "lineHeight" || property === "letterSpacing";
 	var resolveValues = state.styleProps.resolveValues;
-	var direct = state;
-	var scope = direct.flatValueScope;
-	if (scope === void 0 || direct.flatValueScopeKind !== resolveValues) {
-		var themeObject = state.theme && _type_of(state.theme) === "object" ? state.theme : valueCacheRoot;
-		var byScope = valueCaches.get(themeObject);
-		if (!byScope) valueCaches.set(themeObject, byScope = /* @__PURE__ */ new Map());
-		var scopeKey = `${state.flatThemeName || ""}${resolveValues}`;
-		scope = byScope.get(scopeKey);
-		if (!scope) byScope.set(scopeKey, scope = /* @__PURE__ */ new Map());
-		direct.flatValueScope = scope;
-		direct.flatValueScopeKind = resolveValues;
-	}
-	var maps = scope.get(property);
-	if (maps === void 0) scope.set(property, maps = { direct: /* @__PURE__ */ new Map() });
-	var byRaw = embedded ? (_maps = maps).embedded || (_maps.embedded = /* @__PURE__ */ new Map()) : maps.direct;
-	if (!fontProperty) {
+	var byRaw;
+	if (!fontProperty && !nativeColors) {
+		var _maps;
+		var revision = grammar.revision;
+		if (state.conf !== valueCacheConf || revision !== valueCacheRevision) {
+			valueCacheConf = state.conf;
+			valueCacheRevision = revision;
+			valueCaches = /* @__PURE__ */ new WeakMap();
+			valueCacheEntries = 0;
+			state.flatValueScope = void 0;
+		}
+		var direct = state;
+		var scope = direct.flatValueScope;
+		if (scope === void 0) {
+			var themeObject = state.theme && typeof state.theme === "object" ? state.theme : valueCacheRoot;
+			var byScope = valueCaches.get(themeObject);
+			if (!byScope) valueCaches.set(themeObject, byScope = /* @__PURE__ */ new Map());
+			var scopeKey = `${state.flatThemeName || ""}${resolveValues}`;
+			scope = byScope.get(scopeKey);
+			if (!scope) byScope.set(scopeKey, scope = /* @__PURE__ */ new Map());
+			direct.flatValueScope = scope;
+		}
+		var maps = scope.get(property);
+		if (maps === void 0) scope.set(property, maps = { direct: /* @__PURE__ */ new Map() });
+		byRaw = embedded ? (_maps = maps).embedded || (_maps.embedded = /* @__PURE__ */ new Map()) : maps.direct;
 		var known = byRaw.get(raw);
 		if (known !== void 0 || byRaw.has(raw)) return known;
 	}
@@ -1187,25 +1455,108 @@ function configuredValue(state, property, raw) {
 	}
 	if (process.env.NODE_ENV === "development") {
 		var _state_conf_tokensParsed_color1;
-		var category1 = grammar.tokenCategory(property);
-		if (category1 && category1 !== "color" && ((_state_conf_tokensParsed_color1 = state.conf.tokensParsed.color) === null || _state_conf_tokensParsed_color1 === void 0 ? void 0 : _state_conf_tokensParsed_color1[name])) warnOnce(`"${name}" contributes to "color", not "${property}"`);
+		var category1 = grammar.tokenCategory(property) || grammar.tokenCategory(state.conf.shorthands[property] || property);
+		if (category1 && category1 !== "color" && category1 !== "boxShadow" && category1 !== "textShadow" && ((_state_conf_tokensParsed_color1 = state.conf.tokensParsed.color) === null || _state_conf_tokensParsed_color1 === void 0 ? void 0 : _state_conf_tokensParsed_color1[name])) warnOnce(`"${name}" contributes to "color", not "${property}"`);
+		if (!value && !fontProperty) {
+			if (name.charCodeAt(0) === 36 || raw.charCodeAt(0) === 36) {
+				var suggested = name.charCodeAt(0) === 36 ? name.slice(1) : raw.slice(1);
+				warnOnce(`v2-token:${property}=${raw}`, `${property}="${raw}": v3 tokens have no "$" prefix, did you mean "${suggested}"?`);
+			} else if ((category1 === "size" || category1 === "space" || category1 === "radius" || category1 === "zIndex") && /^-?\d+(?:\.\d+)?$/.test(name)) {
+				var nearest;
+				var minDistance = Infinity;
+				var rawNum = Number(name);
+				var tokens = category1 ? state.conf.tokensParsed[category1] : void 0;
+				if (tokens && Number.isFinite(rawNum)) for (var key in tokens) {
+					var _tokens_key;
+					var val = (_tokens_key = tokens[key]) === null || _tokens_key === void 0 ? void 0 : _tokens_key.val;
+					var valNum = typeof val === "number" ? val : Number(val);
+					if (Number.isFinite(valNum)) {
+						var dist = Math.abs(valNum - rawNum);
+						if (dist < minDistance) {
+							minDistance = dist;
+							nearest = key;
+						}
+					}
+				}
+				if (nearest) warnOnce(`numeric-token:${property}=${raw}`, `${property}="${raw}" was passed to CSS as-is${category1 === "zIndex" ? "" : " with px units"}${nearest ? `; nearest token is "${nearest}"` : ""}`);
+			} else if (category1 === "color" && /^[a-zA-Z0-9-]+$/.test(name) && /[a-zA-Z]/.test(name)) {
+				var lower = name.toLowerCase();
+				if (!namedCssColors.has(lower) && !cssWideColorKeywords.has(lower)) {
+					var themeKeys = [];
+					if (state.theme && typeof state.theme === "object") for (var k in state.theme) themeKeys.push(k);
+					if (state.conf.themes) {
+						var active = state.conf.themes[state.flatThemeName || ""];
+						if (active) for (var k1 in active) themeKeys.push(k1);
+						else for (var t in state.conf.themes) for (var k2 in state.conf.themes[t]) themeKeys.push(k2);
+					}
+					var bestMatch;
+					var minDistance1 = 3;
+					var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+					try {
+						for (var _iterator = themeKeys[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+							var key1 = _step.value;
+							if (Math.abs(key1.length - name.length) > 2) continue;
+							var m = name.length;
+							var n = key1.length;
+							var d = [];
+							for (var i = 0; i <= m; i++) d[i] = i;
+							for (var j = 1; j <= n; j++) {
+								var prev = d[0];
+								d[0] = j;
+								for (var i1 = 1; i1 <= m; i1++) {
+									var temp = d[i1];
+									d[i1] = name[i1 - 1] === key1[j - 1] ? prev : Math.min(prev, d[i1], d[i1 - 1]) + 1;
+									prev = temp;
+								}
+							}
+							var dist1 = d[m];
+							if (dist1 <= 2 && dist1 < minDistance1) {
+								minDistance1 = dist1;
+								bestMatch = key1;
+							}
+						}
+					} catch (err) {
+						_didIteratorError = true;
+						_iteratorError = err;
+					} finally {
+						try {
+							if (!_iteratorNormalCompletion && _iterator.return != null) _iterator.return();
+						} finally {
+							if (_didIteratorError) throw _iteratorError;
+						}
+					}
+					warnOnce(`unknown-color:${property}=${raw}`, bestMatch ? `unknown color "${name}", did you mean "${bestMatch}"?` : `unknown color "${name}"`);
+				}
+			}
+		}
 	}
 	var out = raw;
 	if (isVariable(value)) {
-		out = resolveValues === "except-theme" && fromTheme ? `${THEME_REF_PREFIX}${lookupName}${opacity !== void 0 ? `/${opacity}` : ""}` : resolveVariableValue(property, value, resolveValues);
+		out = resolveValues === "except-theme" && fromTheme ? `${THEME_REF_PREFIX}${lookupName}${opacity !== void 0 ? `/${opacity}` : ""}` : resolveVariableValue(nativeColors ? "color" : property, value, resolveValues);
 		if (opacity !== void 0) {
 			var _normalizeColor;
 			out = (_normalizeColor = normalizeColor(out, opacity / 100)) !== null && _normalizeColor !== void 0 ? _normalizeColor : out;
 		}
 	}
+	if (nativeColors && out && typeof out === "object") {
+		var reference = `__tamagui_native_color_${nativeColors.size}`;
+		nativeColors.set(reference, out);
+		out = reference;
+	}
 	if (embedded && out === raw) {
 		var usedSafeArea = state.flatUsesSafeArea;
 		out = grammar.embeddedTokens(raw, function(word) {
-			return configuredValue(state, property, word);
+			var resolved = configuredValue(state, property, word, false, nativeColors);
+			if (resolved !== word || !shadowRecipeProperties.has(property) || !/^[a-z][\w-]*$/i.test(word)) return resolved;
+			if (word === "currentColor") {
+				var inherited = configuredValue(state, "color", "color", false, nativeColors);
+				return inherited === "color" ? word : inherited;
+			}
+			return configuredValue(state, "color", word, false, nativeColors);
 		});
 		if (!usedSafeArea && state.flatUsesSafeArea) return out;
 	}
-	if (!fontProperty && !fromTheme) if (valueCacheEntries > 8192) {
+	if (!fontProperty && !fromTheme && !nativeColors) if (valueCacheEntries > 8192) {
 		valueCaches = /* @__PURE__ */ new WeakMap();
 		valueCacheEntries = 0;
 	} else {
@@ -1216,19 +1567,22 @@ function configuredValue(state, property, raw) {
 }
 function ownsSourceLayer(state, property) {
 	var conditional = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : false;
-	var _direct_flatPass;
+	var _direct_flatPass, _direct_flatPass1;
 	var _direct;
 	var direct = state;
 	var layer = ((_direct_flatPass = direct.flatPass) === null || _direct_flatPass === void 0 ? void 0 : _direct_flatPass[passSourceLayer]) || 0;
 	var layers = (_direct = direct).flatPropertyLayers || (_direct.flatPropertyLayers = /* @__PURE__ */ new Map());
 	var previous = layers.get(property);
-	if (previous !== void 0) {
-		if (previous > layer) return false;
-		if (previous < layer) {
-			if (conditional) return true;
-			clearDirectStyle(state, property);
+	if (!layer && !conditional && !((_direct_flatPass1 = direct.flatPass) === null || _direct_flatPass1 === void 0 ? void 0 : _direct_flatPass1[passVariantOutput])) {
+		var _direct_flatSlots;
+		var entries = (_direct_flatSlots = direct.flatSlots) === null || _direct_flatSlots === void 0 ? void 0 : _direct_flatSlots.get(property);
+		if (entries) {
+			for (var index = entries.length; index--;) if (entries[index][0] === property && entries[index][9]) entries.splice(index, 1);
 		}
-	} else if (conditional) return true;
+	}
+	if (previous > layer) return false;
+	if (conditional && previous !== layer) return true;
+	if (previous < layer) clearDirectStyle(state, property);
 	layers.set(property, layer);
 	return true;
 }
@@ -1244,9 +1598,21 @@ function emitProperty(state, property, value, cursor, originalValue, contextOnly
 	var theme = cursor ? cursor[conditionTheme] : "";
 	if (theme) {
 		if (supportsDynamicColorIOS && isColorStyleKey(property)) {
-			var _direct, _ref, _property;
-			var schemes = (_ref = (_direct = direct).flatDynamicColors || (_direct.flatDynamicColors = {}))[_property = property] || (_ref[_property] = {});
-			schemes[theme] = typeof originalValue === "string" && /^[a-z]+$/i.test(originalValue) ? originalValue : value;
+			var _direct;
+			var colors = (_direct = direct).flatDynamicColors || (_direct.flatDynamicColors = {});
+			var schemes = colors[property];
+			if (!schemes) {
+				var _direct_flatSlots_get_find, _direct_flatSlots_get, _direct_flatSlots;
+				schemes = colors[property] = {};
+				var base = (_direct_flatSlots = direct.flatSlots) === null || _direct_flatSlots === void 0 ? void 0 : (_direct_flatSlots_get = _direct_flatSlots.get(property)) === null || _direct_flatSlots_get === void 0 ? void 0 : (_direct_flatSlots_get_find = _direct_flatSlots_get.find(function(entry) {
+					return !entry[2];
+				})) === null || _direct_flatSlots_get_find === void 0 ? void 0 : _direct_flatSlots_get_find[1];
+				if (base !== void 0) {
+					schemes.light = extractValueFromDynamic(base, "light");
+					schemes.dark = extractValueFromDynamic(base, "dark");
+				}
+			}
+			schemes[theme] = extractValueFromDynamic(value, theme);
 			streamWriteInline(state, property, { dynamic: { ...schemes } }, cursor, originalValue, true, condition & 1 ? condition : condition + 1);
 			return;
 		}
@@ -1283,6 +1649,10 @@ function emitProperty(state, property, value, cursor, originalValue, contextOnly
 		addTransformValue(state.transformAccumulator, property, value);
 		return;
 	}
+	if (property === "transition" && condition & 12 && !state.staticConfig.isHOC && state.styleProps.isAnimated) {
+		streamWriteInline(state, property, value, cursor, originalValue, false, -1, true);
+		return;
+	}
 	var shouldPromoteAnimatedStyle = canGenerateCSS && !condition && !state.flatShouldDoClasses && !state.styleProps.noMergeStyle && state.styleProps.isAnimated && ((_state_animationDriver = state.animationDriver) === null || _state_animationDriver === void 0 ? void 0 : _state_animationDriver.inputStyle) === "css" && property in nonAnimatableStyleProps;
 	if (canGenerateCSS && (state.flatShouldDoClasses || shouldPromoteAnimatedStyle)) {
 		writeStyleRecord(state, property, value, cursor, originalValue, shouldPromoteAnimatedStyle ? recordCSS : 0);
@@ -1291,10 +1661,11 @@ function emitProperty(state, property, value, cursor, originalValue, contextOnly
 	streamWriteInline(state, property, value, cursor, originalValue);
 }
 function numericUnitValue(value, first, second) {
-	var unitLength = value.endsWith(first) || second !== void 0 && value.endsWith(second) ? first.length : 0;
-	if (!unitLength || value.length === unitLength) return NaN;
-	var numeric = Number(value.slice(0, value.length - unitLength));
-	return Number.isFinite(numeric) ? numeric : NaN;
+	return value.length > first.length && (value.endsWith(first) || value.endsWith(second)) ? +value.slice(0, -first.length) : NaN;
+}
+function resolveNumericValue(value) {
+	var numeric = numericUnitValue(value, "px", "dp");
+	return isFinite(numeric) ? numeric : isFinite(numeric = +value) ? numeric : value;
 }
 function emitBorder(state, property, raw, cursor, originalValue, contextOnly) {
 	if (property === "borderBlock" || property === "borderInline") {
@@ -1349,13 +1720,12 @@ function emitTextDecoration(state, raw, cursor, originalValue, contextOnly) {
 	}
 }
 function emitResolved(state, property, raw, cursor, originalValue, contextOnly) {
-	var value = configuredValue(state, property, raw, true);
-	if (typeof value === "string") {
-		var unitValue = numericUnitValue(value, "px", "dp");
-		if (Number.isFinite(unitValue)) value = unitValue;
-		else if (value !== "" && Number.isFinite(Number(value))) value = Number(value);
-	}
-	emitProperty(state, property, value, cursor, originalValue, contextOnly);
+	emitProperty(state, property, resolveValue(state, property, raw), cursor, originalValue, contextOnly);
+}
+function resolveValue(state, property, raw, nativeColors) {
+	var value = typeof raw === "string" ? configuredValue(state, property, raw, true, nativeColors) : raw;
+	if (typeof value === "string" && value !== "" && property !== "lineHeight") value = resolveNumericValue(value);
+	return value;
 }
 function shadowUnit(part) {
 	return typeof part === "number" ? `${part}px` : part || "0px";
@@ -1363,7 +1733,13 @@ function shadowUnit(part) {
 function emitValue(state, property, raw, cursor, originalValue, contextOnly) {
 	var condition = cursor ? cursor[conditionValue] : 0;
 	var grammar = getConfigRevisionState(state.conf);
-	if (isVariable(raw)) raw = resolveVariableValue(property, raw, state.styleProps.resolveValues);
+	if (isVariable(raw)) {
+		raw = resolveVariableValue(property, raw, state.styleProps.resolveValues);
+		if (property === "lineHeight") {
+			emitProperty(state, property, raw, cursor, originalValue, contextOnly);
+			return;
+		}
+	}
 	if (typeof raw === "string" && (property === "transition" || property === "transitionProperty")) raw = grammar.normalizeTransition(raw);
 	if ((property === "borderWidth" || property === "borderTopWidth" || property === "borderRightWidth" || property === "borderBottomWidth" || property === "borderLeftWidth") && state.styleProps.noNormalize !== false) writeStyleRecord(state, "borderStyle", "solid", cursor, originalValue, recordDefault);
 	if (grammar.propertyKind(property) === 5) {
@@ -1378,7 +1754,7 @@ function emitValue(state, property, raw, cursor, originalValue, contextOnly) {
 	}
 	if (property === "transform") {
 		if (canGenerateCSS && state.flatShouldDoClasses && Array.isArray(raw)) raw = transformsToString(raw);
-		if (typeof raw === "string") {
+		if (typeof raw === "string" && true) {
 			var transform = parseNativeTransform(raw);
 			if (transform) {
 				emitProperty(state, property, transform, cursor, originalValue, contextOnly);
@@ -1396,7 +1772,7 @@ function emitValue(state, property, raw, cursor, originalValue, contextOnly) {
 	}
 	if (typeof raw === "string" && property === "background") {
 		var parts = splitComponents(raw);
-		if (parts.length === 1 && !startsValueFunction(parts[0])) {
+		if (parts.length === 1 && (!startsValueFunction(parts[0]) || classifyBorderComponents(parts[0]).color)) {
 			emitResolved(state, "backgroundColor", parts[0], cursor, originalValue, contextOnly);
 			return;
 		}
@@ -1406,7 +1782,7 @@ function emitValue(state, property, raw, cursor, originalValue, contextOnly) {
 	if (property === "x" || property === "y" || property === "scale" || property === "scaleX" || property === "scaleY" || property === "rotate") {
 		var value2 = typeof raw === "string" ? configuredValue(state, property, raw) : raw;
 		if (typeof value2 === "string" && !value2.startsWith(THEME_REF_PREFIX)) {
-			if (property === "rotate" && !Number.isFinite(numericUnitValue(value2, "deg", "rad"))) {
+			if (property === "rotate" && !isFinite(numericUnitValue(value2, "deg", "rad")) && true) {
 				if (process.env.NODE_ENV === "development") warnOnce(`native transform "${property}" cannot represent "${value2}"; dropping it`);
 				if (condition & 1) {
 					removeTransformValue(state.transformAccumulator, property);
@@ -1414,9 +1790,7 @@ function emitValue(state, property, raw, cursor, originalValue, contextOnly) {
 				}
 				return;
 			}
-			var unitValue = numericUnitValue(value2, "px", "dp");
-			if (Number.isFinite(unitValue)) value2 = unitValue;
-			else if (Number.isFinite(Number(value2))) value2 = Number(value2);
+			value2 = resolveNumericValue(value2);
 		}
 		if (!canGenerateCSS || !state.flatShouldDoClasses) {
 			emitProperty(state, property, value2, cursor, originalValue, contextOnly);
@@ -1448,19 +1822,14 @@ function emitValue(state, property, raw, cursor, originalValue, contextOnly) {
 		}
 		return;
 	}
-	var value3 = raw;
-	if (typeof raw === "string") value3 = configuredValue(state, property, raw, true);
-	if (typeof value3 === "string") {
-		var unitValue1 = numericUnitValue(value3, "px", "dp");
-		if (Number.isFinite(unitValue1)) value3 = unitValue1;
-		else if (value3 !== "" && Number.isFinite(Number(value3))) value3 = Number(value3);
-	}
+	var nativeColors = typeof raw === "string" && (property === "backgroundImage" || property === "boxShadow" || property === "textShadow") ? /* @__PURE__ */ new Map() : void 0;
+	var value3 = resolveValue(state, property, raw, nativeColors);
 	if (canGenerateCSS && state.flatShouldDoClasses && property === "boxShadow" && !condition) {
 		state.flatBoxShadow = value3;
 		state.flatBoxShadowSequence = frameSequence + 1;
 	}
 	if (typeof value3 === "string" && (property === "backgroundImage" || property === "boxShadow" || property === "textShadow")) {
-		var parsed = parseNativeStyle(property, value3);
+		var parsed = parseNativeStyle(property, value3, nativeColors);
 		if (parsed) {
 			if (property === "textShadow") {
 				var _iteratorNormalCompletion1 = true, _didIteratorError1 = false, _iteratorError1 = void 0;
@@ -1482,6 +1851,7 @@ function emitValue(state, property, raw, cursor, originalValue, contextOnly) {
 			} else emitProperty(state, property === "backgroundImage" ? "experimental_backgroundImage" : property, parsed, cursor, originalValue, contextOnly);
 			return;
 		}
+		if (property === "backgroundImage" || property === "textShadow") return;
 	}
 	if (property === "fontVariant" && typeof value3 === "string") {
 		var variants = [];
@@ -1494,25 +1864,42 @@ function emitValue(state, property, raw, cursor, originalValue, contextOnly) {
 		}
 		value3 = variants;
 	}
+	if (!cursor && !state.styleProps.noExpand) {
+		var logicals = nativeShorthandLogicals[property];
+		var slots = state.flatSlots;
+		if (logicals && slots) for (var index1 = 0; index1 < logicals.length; index1++) {
+			var list = slots.get(logicals[index1]);
+			if (!list) continue;
+			for (var entry = list.length; entry--;) if (list[entry][3] === "") list.splice(entry, 1);
+			if (!list.length) clearDirectStyle(state, logicals[index1]);
+		}
+	}
 	var expanded = !state.styleProps.noExpand ? expandStyle(property, value3, state.conf.settings.styleCompat || "web") : null;
 	if (!expanded) {
 		emitProperty(state, property, value3, cursor, originalValue, contextOnly);
 		return;
 	}
-	if (typeof raw === "string" && expanded.length > 1) {
+	if (typeof raw === "string" && expanded.length > 1 && expanded.every(function(entry2) {
+		return entry2[1] === expanded[0][1];
+	})) {
 		var parts1 = splitComponents(raw);
 		if (parts1.length > 0 && parts1.length <= (expanded.length === 4 ? 4 : 2)) {
-			for (var index1 = 0; index1 < expanded.length; index1++) {
-				var partIndex = index1 === 0 || parts1.length === 1 ? 0 : index1 === 1 || index1 === 3 && parts1.length < 4 ? 1 : index1 === 2 && parts1.length < 3 ? 0 : index1;
-				emitResolved(state, expanded[index1][0], parts1[partIndex], cursor, originalValue, contextOnly);
+			for (var index2 = 0; index2 < expanded.length; index2++) {
+				var partIndex = index2 === 0 || parts1.length === 1 ? 0 : index2 === 1 || index2 === 3 && parts1.length < 4 ? 1 : index2 === 2 && parts1.length < 3 ? 0 : index2;
+				emitResolved(state, expanded[index2][0], parts1[partIndex], cursor, originalValue, contextOnly);
 			}
 			return;
 		}
 	}
-	for (var index2 = 0; index2 < expanded.length; index2++) emitProperty(state, expanded[index2][0], expanded[index2][1], cursor, originalValue, contextOnly);
+	for (var index3 = 0; index3 < expanded.length; index3++) emitProperty(state, expanded[index3][0], expanded[index3][1], cursor, originalValue, contextOnly);
+}
+function emitConditionalValue(state, property, payload, condition, source, sink, mode, contextOnly) {
+	if (sink) sink(payload, condition, source);
+	else if (condition) emitUnderCondition(state, property, payload, condition, mode === 2 || state.staticConfig.isHOC || state.styleProps.stylePieceEntries ? payload : void 0, contextOnly, mode, source);
+	else emitValue(state, property, payload, null, payload, contextOnly);
 }
 function walkConditionalValue(state, property, value, parent, sink) {
-	var warnMode = arguments.length > 5 && arguments[5] !== void 0 ? arguments[5] : 0;
+	var warnMode = arguments.length > 5 && arguments[5] !== void 0 ? arguments[5] : 0, contextOnly = arguments.length > 6 && arguments[6] !== void 0 ? arguments[6] : false;
 	var parentCondition = parent || null;
 	var hasBase = false;
 	var conditions = 0;
@@ -1520,13 +1907,18 @@ function walkConditionalValue(state, property, value, parent, sink) {
 	if (typeof value === "string") {
 		var parsed = getConfigRevisionState(state.conf).parseFlatValue(value);
 		var [segments, failure, failureIndex] = parsed;
+		if (process.env.NODE_ENV === "development") {
+			if (getSetting("styleValueSyntax") === "object") {
+				if (segments.length > 5 || segments.length >= 5 && segments[2] !== -1 || value.includes(":")) warnOnce(`syntax:string:${property}=${value}`, `string syntax is disabled by config (styleValueSyntax: 'object'); received "${property}=${value}"`);
+			}
+		}
 		var slices = parsedSlices.get(parsed);
 		if (slices === void 0) parsedSlices.set(parsed, slices = []);
 		var chainCount = segments.length / 5 - 1;
 		if (property === "aspectRatio" && chainCount === 1) {
-			var left = Number(value.slice(segments[7], segments[8]));
-			var right = Number(value.slice(segments[5], segments[6]));
-			if (left > 0 && right > 0 && Number.isFinite(left) && Number.isFinite(right)) return false;
+			var left = +value.slice(segments[7], segments[8]);
+			var right = +value.slice(segments[5], segments[6]);
+			if (left > 0 && right > 0 && isFinite(left) && isFinite(right)) return false;
 		}
 		for (var index = 0; index < segments.length; index += 5) {
 			var start = segments[index];
@@ -1538,10 +1930,10 @@ function walkConditionalValue(state, property, value, parent, sink) {
 				var _slices, _index;
 				var _;
 				var payload = (_ = (_slices = slices)[_index = index]) !== null && _ !== void 0 ? _ : _slices[_index] = value.slice(start, end);
-				sink(payload, parentCondition, payload);
+				emitConditionalValue(state, property, payload, parentCondition, payload, sink, warnMode, contextOnly);
 				hasBase = true;
 			} else if (process.env.NODE_ENV !== "production" && warnMode && !chainCount && (failure === "invalid-character" || failure === "stray-comment-close")) {
-				sink(value, parentCondition, value);
+				emitConditionalValue(state, property, value, parentCondition, value, sink, warnMode, contextOnly);
 				hasBase = true;
 			} else if (warnMode) warnScanFailure(property, value, failure, failureIndex);
 		}
@@ -1567,34 +1959,40 @@ function walkConditionalValue(state, property, value, parent, sink) {
 			if (cursor[conditionValue] & conditionResolvedFlag || warnMode) {
 				var _slices2, _index1;
 				var _2;
-				sink((_2 = (_slices2 = slices)[_index1 = index1]) !== null && _2 !== void 0 ? _2 : _slices2[_index1] = value.slice(start1, end1), cursor, value);
+				emitConditionalValue(state, property, (_2 = (_slices2 = slices)[_index1 = index1]) !== null && _2 !== void 0 ? _2 : _slices2[_index1] = value.slice(start1, end1), cursor, value, sink, warnMode, contextOnly);
 			}
 		}
 		if (process.env.NODE_ENV !== "production") lastPayload = value.slice(lastPayloadStart);
 	} else {
-		if (!value || (typeof value === "undefined" ? "undefined" : _type_of(value)) !== "object" || Array.isArray(value) || isVariable(value) || !classifyConditionalObject(value, state)) return false;
+		if (!value || typeof value !== "object" || Array.isArray(value) || isVariable(value) || !classifyConditionalObject(value, state)) return false;
+		if (process.env.NODE_ENV === "development") {
+			if (getSetting("styleValueSyntax") === "string") warnOnce(`syntax:object:${property}=${JSON.stringify(value)}`, `object-form conditional syntax is disabled by config (styleValueSyntax: 'string'); received "${property}"`);
+		}
 		if (value.default != null) {
-			sink(value.default, parentCondition, value.default);
+			emitConditionalValue(state, property, value.default, parentCondition, value.default, sink, warnMode, contextOnly);
 			hasBase = true;
 		}
 		for (var key in value) {
 			if (key === "default" || value[key] == null) continue;
 			var cursor1 = conditionFromKey(state, key, parentCondition);
 			conditions |= cursor1[conditionValue];
-			if (cursor1[conditionValue] & conditionResolvedFlag || warnMode) sink(value[key], cursor1, value[key]);
+			if (cursor1[conditionValue] & conditionResolvedFlag || warnMode) emitConditionalValue(state, property, value[key], cursor1, value[key], sink, warnMode, contextOnly);
 		}
 	}
-	if (warnMode && process.env.NODE_ENV === "development" && typeof value === "string" && !hasBase && conditions && getConfigRevisionState(state.conf).tokenCategory(property) && splitComponents(lastPayload).length > 1) warnOnce(`${property}="${value}" has multiple values after its first conditional. Write the base value before the first conditional.`);
-	if (warnMode === 1 && (!canGenerateCSS || !state.flatShouldDoClasses) && conditions & 12 && !hasBase) {
-		var _state_flatPropertyLayers;
+	if (warnMode && process.env.NODE_ENV === "development" && typeof value === "string" && !hasBase && conditions && getConfigRevisionState(state.conf).tokenCategory(property) && getConfigRevisionState(state.conf).propertyKind(property) !== 8 && property !== "boxShadow" && property !== "textShadow" && property !== "fontFamily" && property !== "gap" && splitComponents(lastPayload).length > 1) warnOnce(`${property}="${value}" has multiple values after its first conditional. Write the base value before the first conditional.`);
+	if (warnMode === 1 && conditions & 12 && !hasBase) {
 		var resting = property === "opacity" || property.startsWith("scale") ? 1 : property === "rotate" ? "0deg" : property === "x" || property === "y" ? 0 : null;
-		if (resting !== null && !((_state_flatPropertyLayers = state.flatPropertyLayers) === null || _state_flatPropertyLayers === void 0 ? void 0 : _state_flatPropertyLayers.has(property))) sink(resting, parentCondition, resting);
+		var layers = state.flatPropertyLayers;
+		var owned = !canGenerateCSS || !state.flatShouldDoClasses ? layers === null || layers === void 0 ? void 0 : layers.has(property) : property === "scale" ? (layers === null || layers === void 0 ? void 0 : layers.has("--t-scale-x")) || (layers === null || layers === void 0 ? void 0 : layers.has("--t-scale-y")) : layers === null || layers === void 0 ? void 0 : layers.has(property === "x" ? "--t-x" : property === "y" ? "--t-y" : property === "scaleX" ? "--t-scale-x" : property === "scaleY" ? "--t-scale-y" : property);
+		if (resting !== null && !owned) emitConditionalValue(state, property, resting, parentCondition, resting, sink, warnMode, contextOnly);
 	}
 	return true;
 }
 function contributeValue(state, property, value, originalValue) {
 	var contextOnly = arguments.length > 4 && arguments[4] !== void 0 ? arguments[4] : false, condition = arguments.length > 5 ? arguments[5] : void 0;
 	var _state_flatPass;
+	if (!contextOnly && isRemovedVendorStyleProp(property) && !(state.staticConfig.validStyles && property in state.staticConfig.validStyles)) return;
+	if (!contextOnly && !(property in (state.staticConfig.validStyles || (state.staticConfig.isInput ? stylePropsInput : state.staticConfig.isText ? stylePropsText : validStyles))) && property in stylePropsAll) return;
 	if (condition !== void 0) {
 		var _directState_flatPass;
 		var parent = ((_directState_flatPass = state.flatPass) === null || _directState_flatPass === void 0 ? void 0 : _directState_flatPass[passParentCursor]) || null;
@@ -1605,14 +2003,12 @@ function contributeValue(state, property, value, originalValue) {
 			if (!(condition[conditionValue] & conditionResolvedFlag)) setConditionUnresolved(effective);
 			commitCondition(effective);
 		} else effective = condition;
-		if (typeof value !== "string" && walkConditionalValue(state, property, value, effective, function(payload, cursor, source) {
-			return emitUnderCondition(state, property, payload, cursor, payload, contextOnly, 2, source);
-		}, 2)) return true;
+		if (typeof value !== "string" && walkConditionalValue(state, property, value, effective, null, 2, contextOnly)) return true;
 		emitUnderCondition(state, property, value, effective, originalValue, contextOnly, 2, value);
 		return true;
 	}
 	var compositeKind = 0;
-	if (compositeKind > 0 && compositeKind < 6 && (typeof value === "string" && value.indexOf(":") !== -1 || value && (typeof value === "undefined" ? "undefined" : _type_of(value)) === "object" && !Array.isArray(value) && !isVariable(value) && classifyConditionalObject(value, state))) {
+	if (compositeKind > 0 && compositeKind < 6 && (typeof value === "string" && value.indexOf(":") !== -1 || value && typeof value === "object" && !Array.isArray(value) && !isVariable(value) && classifyConditionalObject(value, state))) {
 		if (process.env.NODE_ENV === "development") warnOnce(`conditional "${property}" needs its composite property; dropping it`);
 		return true;
 	}
@@ -1639,9 +2035,7 @@ function contributeValue(state, property, value, originalValue) {
 			return true;
 		}
 	}
-	if (walkConditionalValue(state, property, value, ((_state_flatPass = state.flatPass) === null || _state_flatPass === void 0 ? void 0 : _state_flatPass[passParentCursor]) || null, function(payload, cursor, source) {
-		return cursor ? emitUnderCondition(state, property, payload, cursor, void 0, contextOnly, 1, source) : emitValue(state, property, payload, null, payload, contextOnly);
-	}, 1)) return true;
+	if (walkConditionalValue(state, property, value, ((_state_flatPass = state.flatPass) === null || _state_flatPass === void 0 ? void 0 : _state_flatPass[passParentCursor]) || null, null, 1, contextOnly)) return true;
 	if (value != null) {
 		emitAtParentCondition(state, property, value, originalValue !== null && originalValue !== void 0 ? originalValue : value, contextOnly);
 		return true;
@@ -1650,19 +2044,22 @@ function contributeValue(state, property, value, originalValue) {
 }
 function clearDirectStyle(state, property) {
 	var _direct_flatAtomics;
+	if (property === "lineHeight") state.nativeLineHeight = void 0;
 	var direct = state;
+	if (direct.flatDynamicColors) delete direct.flatDynamicColors[property];
 	var propertyKind = getConfigRevisionState(state.conf).propertyKind(property);
 	var atomicKey = property.startsWith("transition") ? "transition" : propertyKind > 0 && propertyKind < 5 ? "boxShadow" : propertyKind === 6 ? "textShadow" : propertyKind === 5 ? "transform" : property;
 	var slot = atomicKey;
 	(_direct_flatAtomics = direct.flatAtomics) === null || _direct_flatAtomics === void 0 || _direct_flatAtomics.delete(slot);
 	if (direct.flatSlots) {
-		if (slot !== atomicKey) {
+		if (slot !== atomicKey || atomicKey === "flex") {
 			var entries = direct.flatSlots.get(slot);
 			if (entries) {
 				for (var index = entries.length; index--;) if (entries[index][0] === atomicKey) entries.splice(index, 1);
+				if (!entries.length) direct.flatSlots.delete(slot);
 			}
 		}
-		direct.flatSlots.delete(atomicKey);
+		if (atomicKey !== "flex") direct.flatSlots.delete(atomicKey);
 	}
 	if (atomicKey === "transform") state.transformAccumulator = void 0;
 	if (state.style) delete state.style[atomicKey];
@@ -1678,9 +2075,12 @@ function emitVariantStyle(state, key, value, original, condition, disabled) {
 		((_state = state).overriddenContextProps || (_state.overriddenContextProps = {}))[key] = ((_state1 = state).originalContextPropValues || (_state1.originalContextPropValues = {}))[key] = original;
 	}
 	var parent = pass[passParentCursor];
+	var parentVariantOutput = pass[passVariantOutput];
 	pass[passParentCursor] = condition;
+	pass[passVariantOutput] = true;
 	contributeProp(pass, key, value, original, disabled);
 	pass[passParentCursor] = parent;
+	pass[passVariantOutput] = parentVariantOutput;
 }
 function getFontFamilyFromNameOrVariable(input, conf) {
 	if (isVariable(input)) {