@tamagui/web 3.0.0-beta.831.1 → 3.0.0-beta.889.1

package/dist/esm/helpers/getSplitStyles.mjs

@@ -1,329 +1,226 @@
-import { isClient, platformMatches } from "@tamagui/constants";
-import { nonAnimatableStyleProps, propToTokenCategoryCode, stylePropsAll, stylePropsText, stylePropsTransform, validStyles } from "@tamagui/helpers";
-import { addTransformValue, canonicalStateModifierNames, createTransformAccumulator, finalizeTransformAccumulator, getTransformPartKeys, isContainerSizeQueryText, isModifierName, modifierKindMedia, modifierKindPlatform, modifierKindState, modifierKindTheme, removeTransformValue, scanFlatValue, stateModifierSelectors } from "@tamagui/style-grammar/runtime";
-import { getConfig } from "../config.mjs";
+import { isClient } 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, getConfigMaybe } from "../config.mjs";
 import { isDevTools } from "../constants/isDevTools.mjs";
+import { defaultComponentStateMounted } from "../defaultComponentState.mjs";
 import { isVariable } from "../createVariable.mjs";
-import { addComposition, canGenerateCSS, clearFrameAtomic, completeStreamingCSS, directStyleSignature, flushDirectStyles, flushDirectStyles as flushDirectStyles2, requestBorderStyleDefault, streamAtomic } from "./directStyleCSS.mjs";
-import { expandStyle } from "./expandStyle.mjs";
-import { fixStyles } from "./expandStyles.mjs";
+import { stylePieceSymbol } from "../types.mjs";
+import { addComposition, canGenerateCSS, flushDirectStyles, registerAtomicSlot } from "./getCSSStylesAtomic.mjs";
+import { splitComponents, startsValueFunction } from "./borderComponents.mjs";
 import { getConfigRevisionState } from "./grammarConfig.mjs";
 import { mediaKeyMatch, mediaState } from "./mediaState.mjs";
 import { getStyleStaticConfig } from "./styleStaticConfig.mjs";
-import { styleToCSS } from "./styleToCSS.mjs";
-import { getVariantDefinition } from "./variantResolvers.mjs";
 import { warnOnce, warnRefusedValue } from "./warnOnce.mjs";
-import { getVariantExtras } from "./getVariantExtras.mjs";
-import { isObj } from "./isObj.mjs";
+import { getDynamicEnv } from "./styledDynamic.mjs";
+import { getRulesForIdentifier, insertStyleRules, shouldInsertStyleRules } from "./insertStyleRule.mjs";
 import { log } from "./log.mjs";
 import { normalizeColor } from "./normalizeColor.mjs";
-import { normalizeStyle } from "./normalizeStyle.mjs";
 import { normalizeValueWithProperty } from "./normalizeValueWithProperty.mjs";
-import { isRemValue, resolveRem } from "./resolveRem.mjs";
-import { expandSafeAreaValue, isSafeAreaKey } from "./resolveSafeArea.mjs";
-import { resolveSafeAreaVariable } from "./resolveSafeAreaVariable.mjs";
 import { resolveVariableValue } from "./resolveVariableValue.mjs";
 import { HOC_CLASSNAME_MARKER, skipProps } from "./skipProps.mjs";
 import { styleOriginalValues } from "./styleOriginalValues.mjs";
 import { STYLE_TOKEN_PROVENANCE_KEY, getStyleTokenProvenance, setStyleTokenProvenance } from "./styleProvenance.mjs";
 import { THEME_REF_PREFIX } from "./themeRef.mjs";
-import { getTokenCategoryForProperty } from "./tokenCategories.mjs";
 import { transformsToString } from "./transformsToString.mjs";
+import { isStylePiece, isStylePieceCacheable, setStylePieceCompiler, setStylePieceResolver } from "../style.mjs";
 
 export * from "./tokenCategories.mjs"
 
-const TAMAGUI_CLASS_PROPS = "$$tamaguiClassProps";
 const shouldTrackStyleTokenProvenance = process.env.NODE_ENV === "development" && process.env.TAMAGUI_ENABLE_STYLE_TOKEN_PROVENANCE === "1";
-const conditionWidth = 4;
-const conditionValueOffset = 0;
-const conditionFlagsOffset = 1;
-const conditionPrecedenceOffset = 2;
-const conditionWrapperOffset = 3;
-const conditionActiveFlag = 1;
-const conditionEmitFlag = 2;
-const conditionResolvedFlag = 4;
-const conditionEnterFlag = 8;
-const conditionExitFlag = 16;
+const conditionValue = 0;
+const conditionPlatform = 1;
+const conditionKey = 2;
+const conditionSelector = 3;
+const conditionTheme = 4;
+const conditionWrappers = 5;
+const conditionAtoms = 6;
+const conditionRanks = 7;
+const conditionResolvedFlag = 16;
 const conditionPlatformPseudoFlag = 32;
-const conditionInitialFlags = 7;
-const conditionTextWidth = 5;
-const conditionKeyOffset = 0;
-const conditionSelectorOffset = 1;
-const conditionThemeOffset = 2;
-const conditionUnsupportedStateOffset = 3;
-const conditionUnresolvedNameOffset = 4;
-let conditionNumbers = /* @__PURE__ */ new Float64Array(2048);
-const conditionTexts = [];
-const conditionWrappers = [];
-let conditionWrapperTop = 0;
-let conditionCursorTop = conditionWidth;
-function reserveConditionCursor(cursor) {
-	const required = cursor + conditionWidth;
-	if (required > conditionTexts.length) {
-		const previous2 = conditionTexts.length;
-		conditionTexts.length = required;
-		conditionTexts.fill("", previous2);
-	}
-	if (required <= conditionNumbers.length) return;
-	let length = conditionNumbers.length * 2;
-	while (length < required) length *= 2;
-	const previous = conditionNumbers;
-	conditionNumbers = new Float64Array(length);
-	conditionNumbers.set(previous);
-}
-function setConditionUnresolved(cursor, name = "") {
-	conditionNumbers[cursor + conditionFlagsOffset] &= -5;
-	if (name) {
-		const text = cursor + conditionUnresolvedNameOffset;
-		conditionTexts[text] ||= name;
-	}
-}
-function appendConditionWrapper(cursor, wrapper) {
-	conditionWrappers[conditionWrapperTop++] = wrapper;
-	conditionNumbers[cursor + conditionWrapperOffset]++;
-}
-function copyConditionCursor(target, source) {
-	for (let offset = 0; offset <= conditionPrecedenceOffset; offset++) conditionNumbers[target + offset] = conditionNumbers[source + offset];
-	for (let offset = 0; offset < conditionTextWidth; offset++) conditionTexts[target + offset] = conditionTexts[source + offset] || "";
-	const wrapper = conditionNumbers[source + conditionWrapperOffset];
-	const wrapperStart = wrapper >> 3;
-	const wrapperCount = wrapper & 7;
-	for (let index = 0; index < wrapperCount; index++) conditionWrappers[conditionWrapperTop++] = conditionWrappers[wrapperStart + index];
-	conditionNumbers[target + conditionWrapperOffset] += wrapperCount;
-}
-function resetConditionCursor(cursor, parent) {
-	conditionNumbers[cursor + conditionValueOffset] = 0;
-	conditionNumbers[cursor + conditionFlagsOffset] = conditionInitialFlags;
-	conditionNumbers[cursor + conditionPrecedenceOffset] = 0;
-	conditionNumbers[cursor + conditionWrapperOffset] = conditionWrapperTop << 3;
-	conditionTexts.fill("", cursor, cursor + conditionTextWidth);
-	if (parent) copyConditionCursor(cursor, parent);
-}
-function acquireConditionCursor(parent = 0) {
-	const cursor = conditionCursorTop;
-	conditionCursorTop += conditionWidth;
-	reserveConditionCursor(cursor);
-	resetConditionCursor(cursor, parent);
-	return cursor;
+function createCondition(parent) {
+	return parent ? [
+		parent[conditionValue] & 63,
+		parent[conditionPlatform],
+		"",
+		parent[conditionSelector],
+		parent[conditionTheme],
+		parent[conditionWrappers].slice(),
+		parent[conditionAtoms].slice(),
+		parent[conditionRanks].slice()
+	] : [
+		19,
+		0,
+		"",
+		"",
+		"",
+		[],
+		[],
+		[]
+	];
 }
-function releaseConditionCursors(watermark) {
-	if (watermark >= conditionCursorTop) return;
-	conditionTexts.fill("", watermark, conditionCursorTop);
-	conditionCursorTop = watermark;
+function setConditionUnresolved(condition, name = "") {
+	condition[conditionValue] &= -17;
+	if (process.env.NODE_ENV !== "production") condition.problem ||= name;
 }
-function releaseConditionPayloads(wrapperBase) {
-	conditionWrappers.fill("", wrapperBase, conditionWrapperTop);
-	conditionWrapperTop = wrapperBase;
+function appendConditionWrapper(condition, wrapper) {
+	const wrappers = condition[conditionWrappers];
+	if (!wrappers.includes(wrapper)) wrappers.push(wrapper);
 }
-function accumulateConditionAtom(state, cursor, kind, rank, name) {
-	const keySlot = cursor + conditionKeyOffset;
-	const key = conditionTexts[keySlot];
-	if (!key) conditionTexts[keySlot] = name;
-	else {
-		let slotStart = 0;
-		let inserted = false;
-		while (slotStart <= key.length) {
-			let slotEnd = key.indexOf(":", slotStart);
-			if (slotEnd === -1) slotEnd = key.length;
-			let order = 0;
-			const compareLength = Math.min(name.length, slotEnd - slotStart);
-			for (let offset = 0; offset < compareLength; offset++) {
-				order = name.charCodeAt(offset) - key.charCodeAt(slotStart + offset);
-				if (order) break;
-			}
-			order ||= name.length - (slotEnd - slotStart);
-			if (!order) return;
-			if (order < 0) {
-				conditionTexts[keySlot] = `${key.slice(0, slotStart)}${name}:${key.slice(slotStart)}`;
-				inserted = true;
-				break;
-			}
-			if (slotEnd === key.length) break;
-			slotStart = slotEnd + 1;
-		}
-		if (!inserted) conditionTexts[keySlot] = `${key}:${name}`;
+function resolveConditionModifier(state, condition, authored) {
+	const modifier = getConfigRevisionState(state.conf).resolveCondition(authored);
+	if (!modifier) {
+		setConditionUnresolved(condition, authored);
+		return;
 	}
-	if (kind === modifierKindPlatform) {
-		const precedence2 = conditionNumbers[cursor + conditionPrecedenceOffset];
-		if (rank > precedence2 >>> 26) conditionNumbers[cursor + conditionPrecedenceOffset] = precedence2 & 67108863 | rank << 26;
-		if (!platformMatches(name)) conditionNumbers[cursor + conditionFlagsOffset] &= -4;
+	const [name, kind, rank] = modifier;
+	const atoms = condition[conditionAtoms];
+	let atomIndex = 0;
+	while (atomIndex < atoms.length && atoms[atomIndex] < name) atomIndex++;
+	if (atoms[atomIndex] === name) return;
+	for (let index = atoms.length; index > atomIndex; index--) atoms[index] = atoms[index - 1];
+	atoms[atomIndex] = name;
+	if (kind === 3) {
+		condition[conditionPlatform] = Math.max(condition[conditionPlatform], rank);
+		if (!modifier[6]) condition[conditionValue] &= -4;
 		return;
 	}
-	let precedence = conditionNumbers[cursor + conditionPrecedenceOffset];
-	const depth = Math.min((precedence >> 23 & 7) + 1, 7);
-	const nextCategory = kind === modifierKindMedia ? 0 : kind === 6 ? 1 : kind === modifierKindTheme ? 2 : kind === 5 ? 3 : 4;
-	let categoryRank = precedence >> 20 & 7;
-	let withinRank = precedence & 1048575;
-	if (nextCategory > categoryRank) {
-		categoryRank = nextCategory;
-		withinRank = rank;
-	} else if (nextCategory === categoryRank && rank > withinRank) withinRank = rank;
-	precedence = precedence & -67108864 | depth << 23 | categoryRank << 20 | withinRank;
-	conditionNumbers[cursor + conditionPrecedenceOffset] = precedence;
+	const precedence = kind === 2 ? 1 + Math.min(rank, 63) : kind === 6 ? 65 + Math.min(rank, 63) : kind === 4 ? 129 : kind === 5 ? 161 + rank : 225 + rank;
+	const ranks = condition[conditionRanks];
+	let rankIndex = 0;
+	while (rankIndex < ranks.length && ranks[rankIndex] >= precedence) rankIndex++;
+	for (let index = ranks.length; index > rankIndex; index--) ranks[index] = ranks[index - 1];
+	ranks[rankIndex] = precedence;
 	const buildCSS = canGenerateCSS && state.flatShouldDoClasses;
-	if (kind === modifierKindMedia) {
-		const query = getConfigRevisionState(state.conf).mediaQueries[name];
-		if (!query) {
-			setConditionUnresolved(cursor, name);
-			return;
-		}
-		if (buildCSS) appendConditionWrapper(cursor, `@media ${query}`);
-		if (!state.flatMediaState?.[name]) conditionNumbers[cursor + conditionFlagsOffset] &= -2;
+	if (kind === 2) {
+		const query = modifier[3];
+		if (!query) return setConditionUnresolved(condition, name);
+		if (buildCSS) appendConditionWrapper(condition, `@media ${query}`);
+		if (!state.flatMediaState?.[name]) condition[conditionValue] &= -2;
 		(state.flatMediaKeys ||= /* @__PURE__ */ new Set()).add(name);
-	} else if (kind === modifierKindTheme) {
-		conditionTexts[cursor + conditionThemeOffset] = name;
-		if (buildCSS) {
-			const selector = cursor + conditionSelectorOffset;
-			conditionTexts[selector] += `:where(.t_${name}, .t_${name} *)`;
-		}
-		if (state.flatThemeName !== name && state.flatThemeName?.startsWith(`${name}_`) !== true) conditionNumbers[cursor + conditionFlagsOffset] &= -2;
-	} else if (kind === 5) {
-		const slash = name.indexOf("/");
-		const groupName = slash === -1 ? "true" : name.slice(slash + 1);
-		const stateSelector = stateModifierSelectors[rank];
-		const conditionStateName = canonicalStateModifierNames[rank];
+		return;
+	}
+	if (kind === 4) {
+		if (buildCSS) condition[conditionSelector] += `:where(.t_${name}, .t_${name} *)`;
+		if (state.flatThemeName !== name && state.flatThemeName?.startsWith(`${name}_`) !== true) condition[conditionValue] &= -2;
+		return;
+	}
+	if (kind === 6) {
+		const size = modifier[4];
+		const containerName = modifier[5];
+		const groupName = `@${containerName}`;
 		if (buildCSS) {
-			const selector = cursor + conditionSelectorOffset;
-			conditionTexts[selector] += `:where(.t_group_${groupName}${stateSelector} *)`;
-			if (rank === 0) appendConditionWrapper(cursor, "@media (hover: hover)");
+			const query = modifier[3];
+			appendConditionWrapper(condition, containerName ? `@container ${containerName} ${query}` : `@container ${query}`);
 		}
 		const component = state.componentState.group?.[groupName];
 		const context = state.flatGroupContext?.[groupName];
-		if (!(component?.pseudo ?? context?.state.pseudo)?.[conditionStateName]) conditionNumbers[cursor + conditionFlagsOffset] &= -2;
+		if (process.env.NODE_ENV === "development" && containerName && !component && !context && state.flatGroupContext?.[containerName]) warnOnce(`group-container:${containerName}`, `@${size}/${containerName}: targets group="${containerName}", but groups no longer establish query containers. Add container="${containerName}" to that group.`);
+		if (!(component?.media?.[size] ?? (context?.state.layout && mediaKeyMatch(size, context.state.layout)))) condition[conditionValue] &= -2;
 		(state.flatGroupKeys ||= /* @__PURE__ */ new Set()).add(groupName);
-	} else if (kind === 6) {
-		const slash = name.indexOf("/");
-		const containerSize = name.slice(1, slash === -1 ? name.length : slash);
-		const containerName = slash === -1 ? "" : name.slice(slash + 1);
-		const containerQuery = getConfigRevisionState(state.conf).mediaQueries[containerSize];
-		const groupKey = `@${containerName}`;
-		if (buildCSS) appendConditionWrapper(cursor, containerName ? `@container ${containerName} ${containerQuery}` : `@container ${containerQuery}`);
-		const component = state.componentState.group?.[groupKey];
-		const context = state.flatGroupContext?.[groupKey];
-		if (process.env.NODE_ENV === "development" && containerName && !component && !context && state.flatGroupContext?.[containerName]) warnOnce(`group-container:${containerName}`, `@${containerSize}/${containerName}: targets group="${containerName}", but groups no longer establish query containers. Add container="${containerName}" to that group.`);
-		const match = component?.media?.[containerSize];
-		if (!(match === void 0 ? context?.state.layout && mediaKeyMatch(containerSize, context.state.layout) : match)) conditionNumbers[cursor + conditionFlagsOffset] &= -2;
-		(state.flatGroupKeys ||= /* @__PURE__ */ new Set()).add(groupKey);
-		(state.flatGroupMedia ||= /* @__PURE__ */ new Set()).add(containerSize);
-	} else {
-		const stateSelector = stateModifierSelectors[rank];
-		conditionNumbers[cursor + conditionFlagsOffset] += 64;
-		if (rank === 6) conditionNumbers[cursor + conditionFlagsOffset] |= conditionEnterFlag;
-		else if (rank === 7) conditionNumbers[cursor + conditionFlagsOffset] |= conditionExitFlag;
-		else if (rank === 0 || rank === 2 || rank === 4) conditionNumbers[cursor + conditionFlagsOffset] |= conditionPlatformPseudoFlag;
-		if (buildCSS) {
-			const selector = cursor + conditionSelectorOffset;
-			if (stateSelector[0] === ".") conditionTexts[selector] += `:is(${stateSelector}, ${stateSelector} *)`;
-			else conditionTexts[selector] += stateSelector;
-			if (rank === 0) appendConditionWrapper(cursor, "@media (hover: hover)");
-		}
-		const component = state.componentState;
-		if (!(rank === 0 ? !!component.hover : rank === 4 ? !!(component.press || component.pressIn) : rank === 2 ? !!component.focus : rank === 3 ? !!component.focusVisible : rank === 1 ? !!component.focusWithin : rank === 5 ? !!(component.disabled || state.props.disabled) : rank === 6 ? !!component.unmounted : rank === 7 ? !!state.styleProps.isExiting : false)) conditionNumbers[cursor + conditionFlagsOffset] &= -2;
-		if (stateSelector[0] === ":") (state.flatStateKeys ||= /* @__PURE__ */ new Set()).add(name);
-	}
-}
-function resolveConditionModifier(state, cursor, modifier) {
-	const compiled = getConfigRevisionState(state.conf);
-	let code = compiled.modifiers[modifier];
-	let kind = code & 7;
-	let rank = code >> 3;
-	if (kind === modifierKindState) {
-		accumulateConditionAtom(state, cursor, kind, rank, canonicalStateModifierNames[rank]);
+		(state.flatGroupMedia ||= /* @__PURE__ */ new Set()).add(size);
 		return;
 	}
-	if (!kind && modifier.startsWith("group-")) {
-		const slash = modifier.indexOf("/");
-		const authoredState = modifier.slice(6, slash === -1 ? void 0 : slash);
-		code = compiled.modifiers[authoredState];
-		if ((code & 7) === modifierKindState) {
-			rank = code >> 3;
-			const groupName = slash === -1 ? "true" : modifier.slice(slash + 1);
-			if (rank !== 6 && rank !== 7 && (slash === -1 || isModifierName(groupName, 0, groupName.length))) {
-				const stateName = canonicalStateModifierNames[rank];
-				accumulateConditionAtom(state, cursor, 5, rank, `group-${stateName}${slash === -1 ? "" : modifier.slice(slash)}`);
-				return;
-			}
-		}
-	} else if (!kind && modifier.charCodeAt(0) === 64) {
-		const slash = modifier.indexOf("/");
-		const containerSize = modifier.slice(1, slash === -1 ? void 0 : slash);
-		const containerName = slash === -1 ? "" : modifier.slice(slash + 1);
-		let containerQuery = "";
-		if (isModifierName(containerSize, 0, containerSize.length) && (slash === -1 || isModifierName(containerName, 0, containerName.length)) && ((code = compiled.modifiers[containerSize]) & 7) === modifierKindMedia && (containerQuery = compiled.mediaQueries[containerSize]) && isContainerSizeQueryText(containerQuery)) {
-			accumulateConditionAtom(state, cursor, 6, code >> 3, modifier);
-			return;
-		}
-	} else if (kind) {
-		accumulateConditionAtom(state, cursor, kind, rank, modifier);
-		return;
+	const selector = modifier[3];
+	if (kind === 5) {
+		const groupName = modifier[4];
+		if (buildCSS) condition[conditionSelector] += `:where(.t_group_${groupName}${selector} *)`;
+		const component = state.componentState.group?.[groupName];
+		const context = state.flatGroupContext?.[groupName];
+		if (!(component?.pseudo ?? context?.state.pseudo)?.[modifier[5]]) condition[conditionValue] &= -2;
+		(state.flatGroupKeys ||= /* @__PURE__ */ new Set()).add(groupName);
+	} else {
+		if (rank === 0 || rank === 2 || rank === 4) condition[conditionValue] |= conditionPlatformPseudoFlag;
+		else if (rank === 6) condition[conditionValue] |= 4;
+		else if (rank === 7) condition[conditionValue] |= 8;
+		if (buildCSS) condition[conditionSelector] += `:where(${selector}${selector[0] === "." ? `, ${selector} *` : ""})`;
+		const component = state.componentState;
+		if (!(rank === 1 ? component.focusWithin : rank === 3 ? component.focusVisible : rank === 4 ? component.press || component.pressIn : rank === 5 ? component.disabled || state.props.disabled : rank === 6 ? component.unmounted : rank === 7 ? state.styleProps.isExiting : component[name])) condition[conditionValue] &= -2;
+		if (selector[0] === ":") (state.flatStateKeys ||= /* @__PURE__ */ new Set()).add(name);
 	}
-	setConditionUnresolved(cursor, modifier);
+	if (rank === 0 && buildCSS) appendConditionWrapper(condition, "@media (hover: hover)");
 }
-function resolveConditionText(state, cursor, text) {
+function resolveConditionText(state, condition, text) {
 	let start = 0;
 	for (let index = 0; index <= text.length; index++) {
 		if (index !== text.length && text.charCodeAt(index) !== 58) continue;
 		if (index === start) {
-			setConditionUnresolved(cursor);
+			setConditionUnresolved(condition);
 			return;
 		}
-		if (!(conditionNumbers[cursor + conditionFlagsOffset] & conditionResolvedFlag)) return;
-		resolveConditionModifier(state, cursor, text.slice(start, index));
+		if (!(condition[conditionValue] & conditionResolvedFlag)) return;
+		resolveConditionModifier(state, condition, text.slice(start, index));
 		start = index + 1;
 	}
 }
-function commitConditionCursor(state, cursor) {
-	if (!(conditionNumbers[cursor + conditionFlagsOffset] & conditionResolvedFlag)) {
-		conditionNumbers[cursor + conditionValueOffset] = 0;
+function commitCondition(condition) {
+	if (!(condition[conditionValue] & conditionResolvedFlag)) {
+		condition[conditionValue] = 0;
 		return 0;
 	}
-	const key = conditionTexts[cursor + conditionKeyOffset] || "";
-	const precedence = conditionNumbers[cursor + conditionPrecedenceOffset];
-	const depth = precedence >> 23 & 7;
-	if (depth > 5) throw new Error(`a flat value clause supports at most 5 non-platform conditions; received ${depth} in "${key}:"`);
-	const flags = conditionNumbers[cursor + conditionFlagsOffset];
-	const condition = precedence * 256 + (flags >> 6) * 32 + 16 + (flags & conditionActiveFlag ? 1 : 0) + (flags & conditionEmitFlag ? 2 : 0) + (flags & conditionEnterFlag ? 4 : 0) + (flags & conditionExitFlag ? 8 : 0);
-	conditionNumbers[cursor + conditionValueOffset] = condition;
-	return condition;
-}
-function acquireConditionKeyCursor(state, key) {
-	const cursor = acquireConditionCursor();
-	if (key) {
-		resolveConditionText(state, cursor, key);
-		commitConditionCursor(state, cursor);
+	condition[conditionKey] = condition[conditionAtoms].join(":");
+	const ranks = condition[conditionRanks];
+	const depth = ranks.length;
+	if (depth > 5) {
+		if (process.env.NODE_ENV !== "production") throw new Error(`a flat value clause supports at most 5 non-platform conditions; received ${depth} in "${condition[conditionKey]}:"`);
+		return 0;
 	}
-	return cursor;
+	let precedence = condition[conditionPlatform] * 6 + depth;
+	for (let index = 0; index < 5; index++) precedence = precedence * 256 + (ranks[index] || 0);
+	const value = precedence * 256 + condition[conditionValue];
+	condition[conditionValue] = value;
+	return value;
 }
-function classifyConditionalObject(value, state, isChain, firstCursor) {
+function conditionFromKey(state, key, parent) {
+	if (!key) return createCondition(parent);
+	if (!parent) {
+		const direct = state;
+		let cache = direct.flatConditions;
+		if (cache === void 0 || direct.flatConditionsClassed !== state.flatShouldDoClasses) {
+			cache = direct.flatConditions = /* @__PURE__ */ new Map();
+			direct.flatConditionsClassed = state.flatShouldDoClasses;
+		}
+		const known = cache.get(key);
+		if (known !== void 0) return known;
+		const resolved = createCondition(null);
+		resolveConditionText(state, resolved, key);
+		commitCondition(resolved);
+		cache.set(key, resolved);
+		return resolved;
+	}
+	const condition = createCondition(parent);
+	resolveConditionText(state, condition, key);
+	commitCondition(condition);
+	return condition;
+}
+function classifyConditionalObject(value, state, isChain, firstCondition) {
 	if ("default" in value) return -1;
 	for (const key in value) {
 		if (!key.length) return 0;
 		if (!state) return isChain?.(key) ? 1 : 0;
-		const watermark = conditionCursorTop;
-		const cursor = firstCursor || acquireConditionCursor();
-		try {
-			resolveConditionText(state, cursor, key);
-			return commitConditionCursor(state, cursor);
-		} finally {
-			if (!firstCursor) releaseConditionCursors(watermark);
-		}
+		const condition = firstCondition || createCondition();
+		resolveConditionText(state, condition, key);
+		return commitCondition(condition);
 	}
 	return 0;
 }
-const passStyleState = 0;
-const passClassName = 21;
-const passShouldDoClasses = 22;
-const passContainerValue = 23;
-const passContainerName = 24;
-const passContainerType = 25;
-const passFrontendGroup = 26;
-const passFrontendContainer = 27;
-const passFrontendContainerType = 28;
-const passHocMappedProperties = 29;
-const passHocMappedClasses = 30;
-const passParentCursor = 35;
-const passMapSourceKey = 36;
-const passMapFlags = 37;
+const passClassName = 20;
+const passShouldDoClasses = 21;
+const passContainerValue = 22;
+const passContainerName = 23;
+const passContainerType = 24;
+const passFrontendGroup = 25;
+const passFrontendContainer = 26;
+const passFrontendContainerType = 27;
+const passSourceLayer = 28;
+const passParentCursor = 29;
+const passMapSourceKey = 30;
+const passFlags = 13;
+const sourceLayerBase = 0;
+const sourceLayerVariant = 1;
+const sourceLayerResolver = 2;
+const sourceLayerProps = 3;
+const sourceLayerStyle = 4;
 const passNoSkipFlag = 1;
 const passDisableShorthandsFlag = 2;
 const passNoExpandFlag = 4;
@@ -332,33 +229,8 @@ const passHocFlag = 16;
 const passTextFlag = 32;
 const passInputFlag = 64;
 const passAsChildStyleFlag = 128;
-function forEachPropInForwardOrder(pass) {
-	const styleState = pass[passStyleState];
-	const processedProps = styleState.props;
-	const styleStaticConfig = styleState.flatStyleStaticConfig;
-	const baseStyle = styleStaticConfig.baseStyle;
-	const baseVariantProps = styleStaticConfig.baseVariantProps;
-	const conditionWrapperBase = conditionWrapperTop;
-	try {
-		const appliesBaseStyle = baseStyle && !processedProps.asChild;
-		if (appliesBaseStyle) for (const key in baseStyle) contributeProp(pass, key, baseVariantProps && Object.hasOwn(baseVariantProps, key) && Object.hasOwn(processedProps, key) ? processedProps[key] : baseStyle[key]);
-		for (const key in processedProps) {
-			if (appliesBaseStyle && baseVariantProps && Object.hasOwn(baseVariantProps, key)) continue;
-			contributeProp(pass, key, processedProps[key]);
-		}
-	} catch (error) {
-		releaseConditionPayloads(conditionWrapperBase);
-		throw error;
-	}
-}
-function isValidStyleKey(key, validStyles, accept) {
-	return Boolean(key in validStyles || accept && key in accept);
-}
-function flushForwardStylesToClasses(pass) {
-	const styleState = pass[passStyleState];
-	if (!pass[passShouldDoClasses]) return;
-	completeStreamingCSS(styleState);
-	flushDirectStyles(styleState, true);
+function isValidStyleKey(key, validStyles) {
+	return key in validStyles;
 }
 function effectiveLifecycleKeys(keys) {
 	if (!keys) return;
@@ -366,312 +238,249 @@ function effectiveLifecycleKeys(keys) {
 	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;
 }
-function mapContributedProp(styleState, key, val, originalVal, condition) {
-	const pass = styleState.flatPass;
-	const keyInit = pass[passMapSourceKey];
-	const disablePropMap = Boolean(pass[passMapFlags]);
-	const [, conf, props, viewProps, , validStyles, accept, , variants, inlineProps, parentVariants, , styledContext, styledContextKeys, flags, debug] = pass;
+function contributeProp(pass, keyOg, valOg, originalOg = valOg, disabled = false) {
+	const [styleState, conf, props, viewProps, , validStyles, neverSkipProps, variants, inlineProps, parentVariants, styleFrontend, styledContext, styledContextKeys, flags, debug, , defaultProps, driverAnimations, driverOutputStyle, elementType] = pass;
+	const noSkip = Boolean(flags & passNoSkipFlag);
+	const disableExpandShorthands = Boolean(flags & passDisableShorthandsFlag);
+	const noExpand = Boolean(flags & passNoExpandFlag);
+	const noMergeStyle = Boolean(flags & passNoMergeFlag);
 	const isHOC = Boolean(flags & passHocFlag);
+	const isText = Boolean(flags & passTextFlag);
+	const isInput = Boolean(flags & passInputFlag);
+	const shorthands = conf.shorthands;
+	const shouldSkipDirectProps = !noSkip && !isHOC;
+	const shouldCheckSkipProps = !noSkip;
+	const asChildExceptStyleLike = Boolean(flags & passAsChildStyleFlag);
+	const isTextOrInput = isText || isInput;
 	const hocParentVariants = isHOC ? parentVariants : void 0;
-	const canResolveContextPrograms = !isHOC;
-	const isStyledContextProp = styledContextKeys?.has(key) || styledContext && key in styledContext;
-	if (key === "className") {
-		if (typeof val === "string" && val) pass[passClassName] = `${pass[passClassName]} ${val}`.trim();
-		return;
-	}
-	if (canResolveContextPrograms && disablePropMap && !isStyledContextProp) {
-		if (key in 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);
-		log(val);
-		console.groupEnd();
-	}
-	if (val == null) return;
-	if (accept && key in accept) {
-		viewProps[key] = val;
-		return;
-	}
-	const isHostStyleKey = isValidStyleKey(key, validStyles, accept) || false;
-	const isContextProgramKey = canResolveContextPrograms && Boolean(isStyledContextProp);
-	if (condition !== void 0) {
-		const conditionCursor = condition;
-		if (isHostStyleKey || isContextProgramKey) contributeValue(styleState, key, val, mergeStyle, originalVal, !isHostStyleKey, conditionCursor);
-		else if (isHOC) {
-			const structured = mergeConditionTransport(styleState, viewProps[key], conditionCursor, val);
-			if (key in viewProps) delete viewProps[key];
-			viewProps[key] = structured;
-		} 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) {
-		contributeValue(styleState, key, val, mergeStyle, originalVal, !isHostStyleKey);
-		return;
-	}
-	const isVariant = Boolean(variants && key in variants);
-	if (inlineProps?.has(key)) viewProps[key] = props[key] ?? val;
-	if (Boolean(hocParentVariants && hocParentVariants[keyInit])) {
-		passDownProp(viewProps, key, val);
-		if (process.env.NODE_ENV === "development" && debug === "verbose") {
-			console.groupCollapsed(` - passing down prop ${key}`);
-			log({
-				val,
-				after: { ...viewProps[key] }
-			});
-			console.groupEnd();
-		}
+	let keyInit = keyOg;
+	let valInit = valOg;
+	if (keyInit === "children") {
+		viewProps[keyInit] = valInit;
 		return;
 	}
-	if (!isVariant) {
-		if (isStyledContextProp) return;
-		if (key in 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 (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 (!disableExpandShorthands) {
+		if (keyInit in shorthands) keyInit = shorthands[keyInit];
 	}
-}
-function contributeProp(pass, keyOg, valOg, parentConditionKey) {
-	const parentWatermark = conditionCursorTop;
-	if (parentConditionKey) pass[passParentCursor] = acquireConditionKeyCursor(pass[passStyleState], parentConditionKey);
-	try {
-		const [styleState, conf, props, viewProps, staticConfig, validStyles, accept, neverSkipProps, variants, inlineProps, parentVariants, styleFrontend, styledContext, styledContextKeys, flags, debug, parentStaticConfig, defaultProps, driverAnimations, driverOutputStyle, elementType] = pass;
-		const noSkip = Boolean(flags & passNoSkipFlag);
-		const disableExpandShorthands = Boolean(flags & passDisableShorthandsFlag);
-		const noExpand = Boolean(flags & passNoExpandFlag);
-		const noMergeStyle = Boolean(flags & passNoMergeFlag);
-		const isHOC = Boolean(flags & passHocFlag);
-		const isText = Boolean(flags & passTextFlag);
-		const isInput = Boolean(flags & passInputFlag);
-		const shorthands = conf.shorthands;
-		const shouldSkipDirectProps = !noSkip && !isHOC;
-		const shouldCheckSkipProps = !noSkip;
-		const asChildExceptStyleLike = Boolean(flags & passAsChildStyleFlag);
-		const isTextOrInput = isText || isInput;
-		const hocParentVariants = isHOC ? parentVariants : void 0;
-		let keyInit = keyOg;
-		let valInit = valOg;
-		if (keyInit === "children") {
-			viewProps[keyInit] = valInit;
+	if (keyInit === "className") {
+		if (pass[passParentCursor]) {
+			if (typeof valInit === "string") pass[passClassName] = `${pass[passClassName]} ${valInit}`.trim();
 			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] = resolveAcceptedStyle(styleState, valInit);
+		if (typeof valInit === "string" && valInit && true) {
+			if (noMergeStyle) {
+				viewProps.className = valInit;
 				return;
 			}
-		}
-		if (!disableExpandShorthands) {
-			if (keyInit in shorthands) keyInit = shorthands[keyInit];
-		}
-		if (keyInit === "className") {
-			if (typeof valInit === "string" && valInit && true) {
-				if (noMergeStyle) {
-					viewProps.className = valInit;
-					return;
+			const resolveClassName = styleFrontend?.resolveClassName;
+			const sink = (entry) => {
+				const property = entry[0];
+				if (entry[2] !== void 0) {
+					if (isValidStyleKey(property, validStyles)) contributeValue(styleState, property, entry[1], void 0, false, entry[2]);
+					else if (process.env.NODE_ENV === "development") console.warn(`[tamagui] "${property}" is not a valid style on this component; the frontend value is dropped.`);
+				} else {
+					if (property === "group") pass[passFrontendGroup] = entry[1];
+					else if (property === "container") pass[passFrontendContainer] = entry[1];
+					else if (property === "containerType") pass[passFrontendContainerType] = entry[1];
+					contributeProp(pass, property, entry[1]);
 				}
-				const hocClassNames = props[HOC_CLASSNAME_MARKER];
-				if (hocClassNames && typeof hocClassNames === "object") {
-					flushForwardStylesToClasses(pass);
-					for (const property in hocClassNames) {
-						const generatedClass = hocClassNames[property];
-						if (typeof generatedClass !== "string") continue;
-						clearDirectStyle(styleState, property);
-						styleState.classNames[property] = generatedClass;
-						(pass[passHocMappedProperties] ||= /* @__PURE__ */ new Set()).add(property);
-						(pass[passHocMappedClasses] ||= /* @__PURE__ */ new Set()).add(generatedClass);
-					}
+			};
+			let start = 0;
+			for (let index = 0; index <= valInit.length; index++) {
+				if (index !== valInit.length && valInit.charCodeAt(index) > 32) continue;
+				if (index === start) {
+					start = index + 1;
+					continue;
 				}
-				const getClassPlan = styleFrontend?.getClassPlan;
-				let start = 0;
-				for (let index = 0; index <= valInit.length; index++) {
-					if (index !== valInit.length && valInit.charCodeAt(index) > 32) continue;
-					if (index === start) {
-						start = index + 1;
-						continue;
-					}
-					const candidate = valInit.slice(start, index);
-					if (pass[passHocMappedClasses]?.has(candidate)) {
-						start = index + 1;
-						continue;
-					}
-					const plan = getClassPlan ? getClassPlan(candidate, conf) : "raw";
-					if (plan === null) {
-						if (process.env.NODE_ENV === "development") warnOnce(`[tamagui] frontend candidate "${candidate}" is unavailable on this platform and was dropped.`);
-					} else if (plan === "raw") {
-						pass[passClassName] = pass[passClassName] ? `${pass[passClassName]} ${candidate}` : candidate;
-						if (getClassPlan) {
-							flushForwardStylesToClasses(pass);
-							pass[passShouldDoClasses] = false;
-							styleState.flatShouldDoClasses = false;
-						}
-					} else {
-						const parentPlan = plan;
-						if (!Array.isArray(plan) && parentPlan.preserveRawClass) {
-							pass[passClassName] = pass[passClassName] ? `${pass[passClassName]} ${candidate}` : candidate;
-							flushForwardStylesToClasses(pass);
-							pass[passShouldDoClasses] = false;
-							styleState.flatShouldDoClasses = false;
-						}
-						const entries = Array.isArray(plan) ? plan : parentPlan.entries;
-						for (let entryIndex = 0; entryIndex < entries.length; entryIndex++) {
-							const entry = entries[entryIndex];
-							if (entry[2] !== void 0) {
-								if (isValidStyleKey(entry[0], validStyles, accept)) contributeValue(styleState, entry[0], entry[1], mergeStyle, void 0, false, entry[2]);
-								else if (process.env.NODE_ENV === "development") console.warn(`[tamagui] "${entry[0]}" is not a valid style on this component; the frontend value is dropped.`);
-							} else {
-								if (entry[0] === "group") pass[passFrontendGroup] = entry[1];
-								else if (entry[0] === "container") pass[passFrontendContainer] = entry[1];
-								else if (entry[0] === "containerType") pass[passFrontendContainerType] = entry[1];
-								contributeProp(pass, entry[0], entry[1]);
-							}
+				const candidate = valInit.slice(start, index);
+				const preserveRaw = resolveClassName ? resolveClassName(candidate, conf, sink) : true;
+				if (preserveRaw === null) {
+					if (process.env.NODE_ENV === "development") warnOnce(`[tamagui] frontend candidate "${candidate}" is unavailable on this platform and was dropped.`);
+				} else if (preserveRaw) {
+					pass[passClassName] = pass[passClassName] ? `${pass[passClassName]} ${candidate}` : candidate;
+					if (resolveClassName) {
+						if (pass[passShouldDoClasses]) {
+							completeResolvedStyles(styleState);
+							flushDirectStyles(styleState, true);
 						}
+						pass[passShouldDoClasses] = false;
+						styleState.flatShouldDoClasses = false;
 					}
-					start = index + 1;
-				}
-				if (props[HOC_CLASSNAME_MARKER] !== void 0) {
-					flushForwardStylesToClasses(pass);
-					pass[passShouldDoClasses] = false;
-					styleState.flatShouldDoClasses = false;
 				}
+				start = index + 1;
 			}
-			return;
 		}
-		if (keyInit === "style") {
-			if (!valInit) return;
-			if (noMergeStyle) {
-				viewProps.style = valInit;
-				return;
-			}
-			const isArray = Array.isArray(valInit);
-			const length = isArray ? valInit.length : 1;
-			for (let index = 0; index < length; index++) {
-				const style = isArray ? valInit[index] : valInit;
-				if (!style) continue;
-				const hocClassNames = style[TAMAGUI_CLASS_PROPS];
-				if (hocClassNames) {
-					for (const property in hocClassNames) {
-						clearDirectStyle(styleState, property);
-						styleState.classNames[property] = hocClassNames[property];
-						(pass[passHocMappedProperties] ||= /* @__PURE__ */ new Set()).add(property);
-					}
-					continue;
-				}
-				const normalized = normalizeStyle(style, false, true);
-				const styleOriginals = shouldTrackStyleTokenProvenance ? styleOriginalValues.get(style) : void 0;
-				for (const key in normalized) {
-					if (normalized[key] == null) continue;
-					if (pass[passHocMappedProperties]?.delete(key)) clearDirectStyle(styleState, key);
-					if (key === "containerName") pass[passContainerName] = normalized[key];
-					else if (key === "containerType") pass[passContainerType] = normalized[key];
-					contributeValue(styleState, key, normalized[key], mergeStyle, styleOriginals?.[key]);
-				}
+		return;
+	}
+	if (keyInit === HOC_CLASSNAME_MARKER) {
+		if (valInit && typeof valInit === "object") {
+			const direct = styleState;
+			const layers = direct.flatPropertyLayers ||= /* @__PURE__ */ new Map();
+			for (const property in valInit) {
+				clearDirectStyle(styleState, property);
+				styleState.classNames[property] = valInit[property];
+				layers.set(property, pass[passSourceLayer]);
 			}
-			return;
 		}
-		if (defaultProps) {
-			const defaultVal = defaultProps[keyOg] ?? defaultProps[keyInit];
-			if (defaultVal !== void 0 && valInit === defaultVal) return;
-		}
-		if (keyInit in skipProps && shouldSkipDirectProps && !neverSkipProps?.[keyInit]) {
-			if (keyInit === "container") pass[passContainerValue] = valInit;
-			if (keyInit === "transition" && typeof valInit === "string") {
-				const animationConfig = driverAnimations?.[valInit];
-				if (animationConfig && driverOutputStyle === "css" && process.env.IS_STATIC === "is_static") valInit = `all ${animationConfig}`;
-				else if (animationConfig) return;
-			} else return;
-		}
-		let isValidStyleKeyInit = isValidStyleKey(keyInit, validStyles, accept);
-		if (keyInit.startsWith("data-")) {
-			viewProps[keyInit] = valInit;
+		return;
+	}
+	if (keyInit === "style") {
+		if (!valInit) return;
+		if (noMergeStyle) {
+			viewProps.style = 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") {
-				viewProps["data-testid"] = valInit;
-				return;
+		const layerBeforeStyle = pass[passSourceLayer];
+		pass[passSourceLayer] = sourceLayerStyle;
+		const isArray = Array.isArray(valInit);
+		const length = isArray ? valInit.length : 1;
+		for (let index = 0; index < length; index++) {
+			const style = isArray ? valInit[index] : valInit;
+			if (!style) continue;
+			if (isStylePiece(style)) {
+				if (styleState.flatShouldDoClasses && applyStylePieceClasses(styleState, style, sourceLayerStyle)) continue;
+				const resolvedPiece = resolveStylePiece(styleState, style);
+				const pieceOriginals = shouldTrackStyleTokenProvenance ? styleOriginalValues.get(style[stylePieceSymbol].styleObject) : void 0;
+				for (const key in resolvedPiece) {
+					if (resolvedPiece[key] == null) continue;
+					contributeValue(styleState, key, resolvedPiece[key], pieceOriginals?.[key]);
+				}
+				continue;
 			}
-			if (keyInit === "id") {
-				viewProps.id = valInit;
-				return;
+			const styleOriginals = shouldTrackStyleTokenProvenance ? styleOriginalValues.get(style) : void 0;
+			for (const key in style) {
+				if (style[key] == null) continue;
+				if (key === "containerName") pass[passContainerName] = style[key];
+				else if (key === "containerType") pass[passContainerType] = style[key];
+				contributeValue(styleState, key, style[key], styleOriginals?.[key]);
 			}
 		}
-		if (isValidStyleKeyInit && valInit == null && keyOg in props) {
-			clearDirectStyle(styleState, keyInit);
-			if (styledContextKeys?.has(keyInit)) (styleState.overriddenContextProps ||= {})[keyInit] = valInit;
+		pass[passSourceLayer] = layerBeforeStyle;
+		return;
+	}
+	if (defaultProps) {
+		const defaultVal = defaultProps[keyOg] ?? defaultProps[keyInit];
+		if (defaultVal !== void 0 && valInit === defaultVal) return;
+	}
+	if (keyInit in skipProps && shouldSkipDirectProps && !neverSkipProps?.[keyInit]) {
+		if (keyInit === "container") pass[passContainerValue] = valInit;
+		if (keyInit === "transition" && typeof valInit === "string") {
+			const animationConfig = driverAnimations?.[valInit];
+			if (animationConfig && driverOutputStyle === "css" && process.env.IS_STATIC === "is_static") valInit = `all ${animationConfig}`;
+			else if (animationConfig) return;
+		} else return;
+	}
+	let isValidStyleKeyInit = isValidStyleKey(keyInit, validStyles);
+	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") {
+			viewProps["data-testid"] = valInit;
 			return;
 		}
-		let isVariant = !isValidStyleKeyInit && variants && keyInit in variants;
-		const isStyleLikeKey = isValidStyleKeyInit || isVariant;
-		const isStyleProp = isValidStyleKeyInit || isVariant && !noExpand;
-		if (isStyleProp && asChildExceptStyleLike) return;
-		const shouldPassProp = !isStyleProp && isHOC || hocParentVariants && keyInit in hocParentVariants || inlineProps?.has(keyInit);
-		const parentVariant = parentVariants?.[keyInit];
-		const isHOCShouldPassThrough = Boolean(isHOC && (parentVariant || keyInit in 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)" : ""}`);
-			log({
-				isVariant,
-				valInit,
-				shouldPassProp
-			});
-			if (isClient) log({
-				variants,
-				variant: variants?.[keyInit],
-				isVariant,
-				isHOCShouldPassThrough,
-				parentStaticConfig
-			});
+		if (keyInit === "id") {
+			viewProps.id = valInit;
+			return;
 		}
-		if (shouldPassThrough) {
-			passDownProp(viewProps, keyInit, valInit);
+	}
+	if (isValidStyleKeyInit && valInit == null && keyOg in props) {
+		clearDirectStyle(styleState, keyInit);
+		if (styledContextKeys?.has(keyInit)) (styleState.overriddenContextProps ||= {})[keyInit] = valInit;
+		return;
+	}
+	let isVariant = !isValidStyleKeyInit && variants && keyInit in variants;
+	const isStyleProp = isValidStyleKeyInit || isVariant && !noExpand;
+	if (isStyleProp && asChildExceptStyleLike) return;
+	const shouldPassProp = !isStyleProp && isHOC || hocParentVariants && keyInit in hocParentVariants || inlineProps?.has(keyInit);
+	const parentVariant = parentVariants?.[keyInit];
+	const isHOCShouldPassThrough = Boolean(isHOC && (parentVariant || keyInit in 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)" : ""}`);
+		log({
+			isVariant,
+			valInit,
+			shouldPassProp
+		});
+		if (isClient) log({
+			variants,
+			variant: variants?.[keyInit],
+			isVariant,
+			isHOCShouldPassThrough,
+			parentStaticConfig: pass[15]
+		});
+	}
+	if (shouldPassThrough) {
+		if (keyInit in viewProps) delete viewProps[keyInit];
+		viewProps[keyInit] = valInit;
+		if (process.env.NODE_ENV === "development" && debug === "verbose") console.groupEnd();
+		if (!isVariant) return;
+	}
+	if (shouldCheckSkipProps && !neverSkipProps?.[keyInit]) {
+		if (keyInit in skipProps && !(keyInit === "transition" && typeof valInit === "string" && !driverAnimations?.[valInit])) {
 			if (process.env.NODE_ENV === "development" && debug === "verbose") console.groupEnd();
-			if (!isVariant) return;
-		}
-		if (shouldCheckSkipProps && !neverSkipProps?.[keyInit]) {
-			if (keyInit in skipProps && !(keyInit === "transition" && typeof valInit === "string" && !driverAnimations?.[valInit])) {
-				if (process.env.NODE_ENV === "development" && debug === "verbose") console.groupEnd();
-				return;
-			}
-		}
-		if (isTextOrInput) {
-			if (valInit && (keyInit === "fontFamily" || keyInit === shorthands["fontFamily"]) && valInit in conf.fontsParsed) styleState.fontFamily = valInit;
-		}
-		const disablePropMap = !isStyleLikeKey;
-		if (isValidStyleKeyInit && valInit != null && !(variants && keyInit in variants) && !(accept && keyInit in accept) && !(styledContextKeys?.has(keyInit) || styledContext && keyInit in styledContext)) {
-			contributeValue(styleState, keyInit, valInit, mergeStyle);
 			return;
 		}
+	}
+	if (isTextOrInput) {
+		if (valInit && (keyInit === "fontFamily" || keyInit === shorthands["fontFamily"]) && valInit in conf.fontsParsed) styleState.fontFamily = valInit;
+	}
+	if (isValidStyleKeyInit && valInit != null && !(variants && keyInit in variants) && !(styledContextKeys?.has(keyInit) || styledContext && keyInit in styledContext)) {
+		contributeValue(styleState, keyInit, valInit, originalOg);
+		return;
+	}
+	if (variants && keyInit in variants && !noExpand && !disabled) {
+		const previousLayer = pass[passSourceLayer];
+		pass[passSourceLayer] = previousLayer ? sourceLayerVariant : sourceLayerBase;
 		pass[passMapSourceKey] = keyInit;
-		pass[passMapFlags] = disablePropMap ? 1 : 0;
-		contributeMappedValue(keyInit, valInit, styleState, disablePropMap);
-		if (process.env.NODE_ENV === "development" && debug === "verbose") {
-			try {
-				log(` \u2714\uFE0F expand complete`, keyInit);
-				log("style", { ...styleState.style });
-				log("viewProps", { ...viewProps });
-				log("transforms", styleState.transformAccumulator);
-			} catch {}
-			console.groupEnd();
-		}
-	} finally {
-		if (parentConditionKey) pass[passParentCursor] = null;
-		releaseConditionCursors(parentWatermark);
+		const variantConfig = styleState.flatStyleStaticConfig;
+		variantConfig.variantStyleResolver?.(styleState, variantConfig.variants, keyInit, valInit, keyInit, pass[passParentCursor]);
+		pass[passSourceLayer] = previousLayer;
+		return;
+	}
+	const isStyledContextProp = !isHOC && (styledContextKeys?.has(keyInit) || styledContext && keyInit in styledContext);
+	if (isStyledContextProp) {
+		(styleState.overriddenContextProps ||= {})[keyInit] = originalOg;
+		(styleState.originalContextPropValues ||= {})[keyInit] = originalOg;
+	}
+	const isHostStyleKey = isValidStyleKeyInit || false;
+	if (isHostStyleKey || isStyledContextProp) {
+		contributeValue(styleState, keyInit, valInit, originalOg, !isHostStyleKey);
+		return;
+	}
+	const condition = pass[passParentCursor];
+	if (condition) {
+		if (isHOC) {
+			const previous = viewProps[keyInit];
+			const 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.`);
+		return;
+	}
+	viewProps[keyInit] = valInit;
+	if (process.env.NODE_ENV === "development" && debug === "verbose") {
+		try {
+			log(` \u2714\uFE0F expand complete`, keyInit);
+			log("style", { ...styleState.style });
+			log("viewProps", { ...viewProps });
+			log("transforms", styleState.transformAccumulator);
+		} catch {}
+		console.groupEnd();
 	}
 }
 const getSplitStyles = (props, staticConfig, theme, themeName, componentState, styleProps, parentSplitStyles, componentContext, groupContext, elementType, startedUnhydrated, debug, animationDriver, styleStaticConfig) => {
@@ -697,7 +506,7 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
 	const staticPassthroughClassName = styleStaticConfig.passthroughClassName || "";
 	let className = staticPassthroughClassName;
 	if (staticPassthroughClassName) shouldDoClasses = false;
-	const validStyles$1 = staticConfig.validStyles || (staticConfig.isText || staticConfig.isInput ? stylePropsText : validStyles);
+	const validStyles$1 = staticConfig.validStyles || (staticConfig.isInput ? stylePropsInput : staticConfig.isText ? stylePropsText : validStyles);
 	if (process.env.NODE_ENV === "development" && (debug === "profile" || globalThis.time)) time`split-styles-setup`;
 	const styleState = {
 		classNames,
@@ -719,7 +528,6 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
 		animationDriver: resolvedDriver
 	};
 	styleState.flatStyleStaticConfig = styleStaticConfig;
-	if (canGenerateCSS && shouldDoClasses && styleProps.canPlatformPseudo) styleState.flatDeferCSS = true;
 	if (process.env.NODE_ENV === "development" && (debug === "profile" || globalThis.time)) time`style-state`;
 	if (process.env.NODE_ENV === "development" && debug === "verbose" && isClient) {
 		if (isDevTools) {
@@ -737,7 +545,7 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
 		}
 	}
 	const { asChild } = props;
-	const { accept, neverSkipProps } = staticConfig;
+	const { neverSkipProps } = staticConfig;
 	const { noSkip, disableExpandShorthands, noExpand, noClass, noMergeStyle, noNormalize, isAnimated, styledContext } = styleProps;
 	const styledContextKeys = styleStaticConfig.styledContextKeys;
 	const styleFrontend = staticConfig.styleFrontend;
@@ -753,8 +561,6 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
 	let containerType;
 	containerName = processedProps.containerName;
 	containerType = processedProps.containerType;
-	let hocMappedClassProperties;
-	let hocMappedClasses;
 	const pass = [
 		styleState,
 		conf,
@@ -762,7 +568,6 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
 		viewProps,
 		staticConfig,
 		validStyles$1,
-		accept,
 		neverSkipProps,
 		variants,
 		inlineProps,
@@ -784,48 +589,101 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
 		containerType,
 		frontendGroup,
 		frontendContainer,
-		frontendContainerType,
-		hocMappedClassProperties,
-		hocMappedClasses
+		frontendContainerType
 	];
 	styleState.flatPass = pass;
 	let conditionalStates = null;
 	let usesSafeArea = false;
-	const conditionWrapperBase = conditionWrapperTop;
-	try {
-		forEachPropInForwardOrder(pass);
-		[, , , , , , , , , , , , , , , , , , , , , className, shouldDoClasses, containerValue, containerName, containerType, frontendGroup, frontendContainer, frontendContainerType, hocMappedClassProperties, hocMappedClasses] = pass;
-		if (containerValue) {
-			containerName ??= typeof containerValue === "string" ? containerValue : void 0;
-			containerType ??= "inline-size";
-			contributeValue(styleState, containerName ? "container" : "containerType", containerName ? `${containerName} / ${containerType}` : containerType, mergeStyle);
-		}
-		if (process.env.NODE_ENV === "development" && (debug === "profile" || globalThis.time)) time`split-styles-propsend`;
-		conditionalStates = styleState.flatStateKeys || null;
-		usesSafeArea = !!styleState.flatUsesSafeArea;
-		hasMedia = styleState.flatMediaKeys?.size ? styleState.flatMediaKeys : false;
-		pseudoGroups = styleState.flatGroupKeys?.size ? styleState.flatGroupKeys : void 0;
-		mediaGroups = styleState.flatGroupMedia?.size ? styleState.flatGroupMedia : void 0;
-		if (styleProps.canPlatformPseudo && styleState.flatHasPlatformPseudo) {
-			shouldDoClasses = false;
-			styleState.flatShouldDoClasses = false;
-			if (styleState.transformAccumulator) {
-				mergeStyle(styleState, "transform", finalizeTransformAccumulator(styleState.transformAccumulator), true);
-				styleState.transformAccumulator = void 0;
+	const baseStyle = styleStaticConfig.baseStyle;
+	const baseVariantProps = styleStaticConfig.baseVariantProps;
+	const appliesBaseStyle = baseStyle && !processedProps.asChild;
+	pass[passSourceLayer] = sourceLayerBase;
+	let appliedBaseStylePieces;
+	if (appliesBaseStyle && baseVariantProps) {
+		let callerKeys;
+		for (const key in baseVariantProps) if (Object.hasOwn(processedProps, key) && processedProps[key] !== baseVariantProps[key]) (callerKeys ||= /* @__PURE__ */ new Set()).add(key);
+		styleState.flatCallerVariantKeys = callerKeys;
+	}
+	if (appliesBaseStyle) for (const key in baseStyle) {
+		const baseValue = baseVariantProps && Object.hasOwn(baseVariantProps, key) && Object.hasOwn(processedProps, key) ? processedProps[key] : baseStyle[key];
+		const expandedKey = shorthands[key] || key;
+		if ((isText || isInput) && baseValue && expandedKey === "fontFamily" && baseValue in conf.fontsParsed) styleState.fontFamily = baseValue;
+		const piece = styleStaticConfig.baseStylePieces?.[key];
+		if (piece && styleState.flatShouldDoClasses) {
+			if (!appliedBaseStylePieces?.has(piece)) {
+				if (applyStylePieceClasses(styleState, piece, sourceLayerBase)) (appliedBaseStylePieces ||= /* @__PURE__ */ new Set()).add(piece);
+			}
+			if (appliedBaseStylePieces?.has(piece)) continue;
+		}
+		contributeProp(pass, key, baseValue);
+	}
+	pass[passSourceLayer] = sourceLayerProps;
+	for (const key in processedProps) {
+		if (appliesBaseStyle && baseVariantProps && Object.hasOwn(baseVariantProps, key)) continue;
+		contributeProp(pass, key, processedProps[key]);
+	}
+	const resolvers = staticConfig.resolvers;
+	if (resolvers && !noExpand) {
+		pass[passSourceLayer] = sourceLayerResolver;
+		const flagsBefore = pass[passFlags];
+		pass[passFlags] = flagsBefore | passNoExpandFlag;
+		const env = getDynamicEnv(styleState);
+		for (let index = 0; index < resolvers.length; index++) {
+			const resolved = resolvers[index](processedProps, env);
+			if (resolved) for (const key in resolved) {
+				if (resolved[key] == null) continue;
+				contributeProp(pass, key, resolved[key]);
 			}
-			convertDeferredInline(styleState, mergeStyle);
 		}
-		completeStreaming(styleState, mergeStyle);
-	} finally {
-		releaseConditionPayloads(conditionWrapperBase);
+		pass[passFlags] = flagsBefore;
+	}
+	className = pass[passClassName];
+	shouldDoClasses = pass[passShouldDoClasses];
+	containerValue = pass[passContainerValue];
+	containerName = pass[passContainerName];
+	containerType = pass[passContainerType];
+	frontendGroup = pass[passFrontendGroup];
+	frontendContainer = pass[passFrontendContainer];
+	frontendContainerType = pass[passFrontendContainerType];
+	if (containerValue) {
+		containerName ??= typeof containerValue === "string" ? containerValue : void 0;
+		containerType ??= "inline-size";
+		contributeValue(styleState, containerName ? "container" : "containerType", containerName ? `${containerName} / ${containerType}` : containerType);
+	}
+	if (process.env.NODE_ENV === "development" && (debug === "profile" || globalThis.time)) time`split-styles-propsend`;
+	conditionalStates = styleState.flatStateKeys || null;
+	usesSafeArea = !!styleState.flatUsesSafeArea;
+	hasMedia = styleState.flatMediaKeys?.size ? styleState.flatMediaKeys : false;
+	pseudoGroups = styleState.flatGroupKeys?.size ? styleState.flatGroupKeys : void 0;
+	mediaGroups = styleState.flatGroupMedia?.size ? styleState.flatGroupMedia : void 0;
+	if (styleProps.canPlatformPseudo && styleState.flatHasPlatformPseudo) {
+		shouldDoClasses = false;
+		styleState.flatShouldDoClasses = false;
+		if (styleState.transformAccumulator) {
+			mergeStyle(styleState, "transform", finalizeTransformAccumulator(styleState.transformAccumulator), true);
+			styleState.transformAccumulator = void 0;
+		}
+	}
+	if (styleProps.stylePieceEntries) {
+		const slots = styleState.flatSlots;
+		if (slots) for (const [slot, entries] of slots) styleProps.stylePieceEntries[slot] = entries;
+	}
+	completeResolvedStyles(styleState);
+	if (styleProps.isStatic) for (const property in classNames) {
+		const identifier = classNames[property];
+		if (rulesToInsert[identifier]) continue;
+		const rules = getRulesForIdentifier(identifier);
+		if (rules) rulesToInsert[identifier] = [
+			property,
+			"",
+			identifier,
+			void 0,
+			rules
+		];
 	}
 	const effectiveTransition = styleState.style?.transition;
 	if (effectiveTransition != null && styleState.style && driverOutputStyle !== "css") delete styleState.style.transition;
 	if (!(noNormalize === false)) {
-		if (styleState.style) {
-			fixStyles(styleState.style);
-			if (!noExpand && !noMergeStyle) styleToCSS(styleState.style);
-		}
 		if (styleState.transformAccumulator && !styleState.flatShouldDoClasses) {
 			styleState.style ||= {};
 			styleState.style.transform = finalizeTransformAccumulator(styleState.transformAccumulator);
@@ -872,7 +730,7 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
 	if (effectiveTransition != null) result.effectiveTransition = effectiveTransition;
 	if (conditionalStates) result.programStates = conditionalStates;
 	if (usesSafeArea) result.usesSafeArea = true;
-	if (getDirectDynamicThemeAccess(styleState)) result.dynamicThemeAccess = true;
+	if (styleState.flatDynamicThemeAccess) result.dynamicThemeAccess = true;
 	if (styleState.flatEnterKeys || styleState.flatExitKeys) result.programLifecycleStyleKeys = {
 		enter: effectiveLifecycleKeys(styleState.flatEnterKeys),
 		exit: effectiveLifecycleKeys(styleState.flatExitKeys)
@@ -895,27 +753,13 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
 				let hasPropertyClassNames = false;
 				if (classNames) for (const key in classNames) {
 					hasPropertyClassNames = true;
-					finalClassName += ` ${classNames[key]}`;
+					if (!isHOC) finalClassName += ` ${classNames[key]}`;
 				}
 				if (groupClassName) finalClassName += ` ${groupClassName}`;
 				if (className) finalClassName += ` ${className}`;
-				if (isAnimated && driverInputStyle === "css") {
-					viewProps.className = finalClassName;
-					if (style) viewProps.style = style;
-				} else {
-					if (finalClassName) {
-						if (isHOC) viewProps[HOC_CLASSNAME_MARKER] = classNames;
-						viewProps.className = finalClassName;
-					}
-					if (isHOC && hasPropertyClassNames) {
-						const classStyle = {};
-						Object.defineProperty(classStyle, TAMAGUI_CLASS_PROPS, {
-							value: classNames,
-							enumerable: false
-						});
-						viewProps.style = style ? [classStyle, style] : classStyle;
-					} else if (style) viewProps.style = style;
-				}
+				if (isHOC && hasPropertyClassNames) viewProps[HOC_CLASSNAME_MARKER] = classNames;
+				if (finalClassName) viewProps.className = finalClassName;
+				if (style) viewProps.style = style;
 			}
 		}
 	}
@@ -941,6 +785,158 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
 	if (process.env.NODE_ENV === "development" && (debug === "profile" || globalThis.time)) time`split-styles-done`;
 	return result;
 };
+const stylePieceStaticConfig = {
+	acceptsClassName: true,
+	isText: true,
+	validStyles: stylePropsAll
+};
+const compiledStylePieces = /* @__PURE__ */ new WeakMap();
+const compileStylePieceRuntime = (piece, layer) => {
+	const conf = getConfigMaybe();
+	if (!conf) return;
+	const themeName = Object.keys(conf.themes)[0] || "";
+	const theme = conf.themes[themeName] || {};
+	const definition = piece[stylePieceSymbol].styleObject;
+	const isBase = layer === "base";
+	const slots = {};
+	const split = getSplitStyles(isBase ? {} : { style: definition }, isBase ? {
+		...stylePieceStaticConfig,
+		baseStyle: definition,
+		disableBaseStylePiece: true
+	} : stylePieceStaticConfig, theme, themeName, defaultComponentStateMounted, {
+		isAnimated: false,
+		resolveValues: "variable",
+		stylePieceEntries: slots
+	});
+	if (!split) return;
+	const directClassNames = {};
+	for (const key in split.classNames) if (!(key in slots)) directClassNames[key] = split.classNames[key];
+	compiledStylePieces.set(piece, {
+		slots,
+		directClassNames,
+		programStates: split.programStates,
+		mediaKeys: split.hasMedia instanceof Set ? split.hasMedia : void 0,
+		pseudoGroups: split.pseudoGroups,
+		mediaGroups: split.mediaGroups,
+		dynamicThemeAccess: split.dynamicThemeAccess
+	});
+	const byKey = piece[stylePieceSymbol].byKey;
+	let className = "";
+	for (const key in split.classNames) {
+		const identifier = split.classNames[key];
+		byKey[key] = identifier;
+		className = className ? `${className} ${identifier}` : identifier;
+	}
+	piece.className = className;
+	if (isClient) insertStyleRules(split.rulesToInsert);
+};
+setStylePieceCompiler(compileStylePieceRuntime);
+setStylePieceResolver((piece, theme, themeName) => {
+	return getSplitStyles({ style: piece }, stylePieceStaticConfig, theme, themeName, defaultComponentStateMounted, {
+		isAnimated: false,
+		resolveValues: "value"
+	})?.style || {};
+});
+const resolvedStylePieceCache = /* @__PURE__ */ new WeakMap();
+function resolveStylePiece(styleState, piece) {
+	const definition = piece[stylePieceSymbol].styleObject;
+	if (!isStylePieceCacheable(piece)) return resolveStyleObject(styleState, definition);
+	let themeCache = resolvedStylePieceCache.get(piece);
+	if (!themeCache) {
+		themeCache = /* @__PURE__ */ new WeakMap();
+		resolvedStylePieceCache.set(piece, themeCache);
+	}
+	const theme = styleState.theme;
+	const cached = themeCache.get(theme);
+	if (cached) return cached;
+	const resolved = resolveStyleObject(styleState, definition);
+	themeCache.set(theme, resolved);
+	return resolved;
+}
+function applyStylePieceClasses(styleState, piece, sourceLayer) {
+	let compiled = compiledStylePieces.get(piece);
+	if (!compiled && getConfigMaybe()) {
+		compileStylePieceRuntime(piece, "style");
+		compiled = compiledStylePieces.get(piece);
+	}
+	if (compiled) {
+		const direct2 = styleState;
+		const slots = direct2.flatSlots ||= /* @__PURE__ */ new Map();
+		for (const slot in compiled.slots) for (const entry of compiled.slots[slot]) {
+			const property = entry[0];
+			if (!ownsSourceLayer(styleState, property, !!entry[2])) continue;
+			writeCapturedStyleRecord(slots, slot, entry, sourceLayer);
+		}
+		if (compiled.programStates) {
+			const target = styleState.flatStateKeys ||= /* @__PURE__ */ new Set();
+			for (const key of compiled.programStates) target.add(key);
+		}
+		if (compiled.mediaKeys) {
+			const target = styleState.flatMediaKeys ||= /* @__PURE__ */ new Set();
+			for (const key of compiled.mediaKeys) target.add(key);
+		}
+		if (compiled.pseudoGroups) {
+			const target = styleState.flatGroupKeys ||= /* @__PURE__ */ new Set();
+			for (const key of compiled.pseudoGroups) target.add(key);
+		}
+		if (compiled.mediaGroups) {
+			const target = styleState.flatGroupMedia ||= /* @__PURE__ */ new Set();
+			for (const key of compiled.mediaGroups) target.add(key);
+		}
+		if (compiled.dynamicThemeAccess) direct2.flatDynamicThemeAccess = true;
+		for (const property in compiled.directClassNames) styleState.classNames[property] = compiled.directClassNames[property];
+		return true;
+	}
+	const byKey = piece[stylePieceSymbol].byKey;
+	const direct = styleState;
+	const layers = direct.flatPropertyLayers ||= /* @__PURE__ */ new Map();
+	let applied = false;
+	for (const property in byKey) {
+		const previousLayer = layers.get(property);
+		if (previousLayer !== void 0 && previousLayer > sourceLayer) continue;
+		clearDirectStyle(styleState, property);
+		styleState.classNames[property] = byKey[property];
+		layers.set(property, sourceLayer);
+		const identifier = byKey[property];
+		const fallbackRules = getRulesForIdentifier(identifier);
+		const shouldInsert = styleState.styleProps.isStatic || shouldInsertStyleRules(identifier);
+		if (fallbackRules && shouldInsert) styleState.flatRulesToInsert[identifier] = [
+			property,
+			"",
+			identifier,
+			void 0,
+			fallbackRules
+		];
+		applied = true;
+	}
+	return applied;
+}
+function writeCapturedStyleRecord(slots, slot, source, sourceLayer) {
+	let list = slots.get(slot);
+	if (!list) slots.set(slot, list = []);
+	const flags = source[7] & 31;
+	const identity = source[3];
+	const condition = source[2];
+	for (let index = 0; index < list.length; index++) {
+		const entry = list[index];
+		const entryFlags = entry[7] & 31;
+		if ((entryFlags & (recordInline | recordCSS)) !== (flags & (recordInline | recordCSS))) 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;
+		}
+	}
+	const next = [...source];
+	next[7] = flags | sourceLayer << 5;
+	list.push(next);
+}
 function mergeStyle(styleState, key, val, disableNormalize = false, originalVal) {
 	const { viewProps, styleProps, staticConfig } = styleState;
 	if (styleState.flatStyleStaticConfig.styledContextKeys?.has(key)) {
@@ -953,12 +949,9 @@ function mergeStyle(styleState, key, val, disableNormalize = false, originalVal)
 		addTransformValue(styleState.transformAccumulator, key, val);
 	} else {
 		const out = !disableNormalize && !styleProps.noNormalize ? normalizeValueWithProperty(val, key) : val;
-		if (staticConfig.accept && key in staticConfig.accept) viewProps[key] = out;
-		else {
-			styleState.style ||= {};
-			styleState.style[key] = out;
-			if (shouldTrackStyleTokenProvenance) recordStyleTokenProvenance(styleState, key, originalVal);
-		}
+		styleState.style ||= {};
+		styleState.style[key] = out;
+		if (shouldTrackStyleTokenProvenance) recordStyleTokenProvenance(styleState, key, originalVal);
 	}
 }
 function recordStyleTokenProvenance(styleState, key, originalVal) {
@@ -971,7 +964,7 @@ function recordStyleTokenProvenance(styleState, key, originalVal) {
 	if (tokenName !== "" && (tokenName in styleState.theme || tokenName in (styleState.conf.themes?.[styleState.flatThemeName || ""] || {}) || Object.values(styleState.conf.tokensParsed).some((category) => tokenName in category))) (styleState.tokenProvenance ||= {})[key] = originalVal;
 	else if (styleState.tokenProvenance && key in styleState.tokenProvenance) delete styleState.tokenProvenance[key];
 }
-const resolveAcceptedStyle = (styleState, styleIn) => {
+const resolveStyleObject = (styleState, styleIn) => {
 	const { conf, styleProps } = styleState;
 	const styleOut = {};
 	let originalValues;
@@ -984,12 +977,9 @@ const resolveAcceptedStyle = (styleState, styleIn) => {
 		style: styleOut,
 		transformAccumulator: void 0
 	};
-	childState.flatUsed = void 0;
-	childState.flatTransitions = void 0;
 	childState.flatAtomics = void 0;
-	childState.flatSingleEntries = void 0;
 	childState.flatSlots = void 0;
-	childState.flatBorderDefaultRequests = void 0;
+	childState.flatPropertyLayers = void 0;
 	const mergeAccepted = (_state, key, value, disableNormalize, originalValue) => {
 		styleOut[key] = disableNormalize || styleProps.noNormalize ? value : normalizeValueWithProperty(value, key);
 		const trackedOriginal = styleInOriginalValues?.[key] ?? originalValue;
@@ -999,87 +989,76 @@ const resolveAcceptedStyle = (styleState, styleIn) => {
 		const value = styleIn[key];
 		key = conf.shorthands[key] || key;
 		if (key in skipProps || value == null) continue;
-		contributeValue(childState, key, value, mergeAccepted);
+		contributeValue(childState, key, value);
 	}
-	completeStreaming(childState, mergeAccepted);
+	completeResolvedStyles(childState, mergeAccepted);
 	if (childState.transformAccumulator) styleOut.transform = finalizeTransformAccumulator(childState.transformAccumulator);
-	if (!styleProps.noNormalize) fixStyles(styleOut);
 	if (originalValues) styleOriginalValues.set(styleOut, originalValues);
 	return styleOut;
 };
-function passDownProp(viewProps, key, val) {
-	if (key in viewProps) delete viewProps[key];
-	viewProps[key] = val;
-}
 let frameSequence = 0;
-function streamWriteCSS(state, property, value, cursor, original, conditionOverride = -1) {
+const recordInline = 1;
+const recordNormalize = 2;
+const recordRetract = 4;
+const recordDefault = 8;
+const recordCSS = 16;
+const webStyleProperties = /* @__PURE__ */ new Map();
+function webStyleProperty(property) {
+	let web = webStyleProperties.get(property);
+	if (web === void 0) {
+		web = property === "writingDirection" ? "direction" : property.endsWith("Horizontal") ? `${property.slice(0, -10)}Inline` : property.endsWith("Vertical") ? `${property.slice(0, -8)}Block` : property;
+		webStyleProperties.set(property, web);
+	}
+	return web;
+}
+const styleSlots = /* @__PURE__ */ new Map();
+function styleSlot(property) {
+	let slot = styleSlots.get(property);
+	if (slot === void 0) styleSlots.set(property, slot = classifyStyleSlot(property));
+	return slot;
+}
+function classifyStyleSlot(property) {
+	return property.startsWith("border") ? property.includes("Radius") ? "borderRadius" : "border" : property.startsWith("margin") ? "margin" : property.startsWith("padding") ? "padding" : property.startsWith("background") ? "background" : property.startsWith("textDecoration") ? "textDecoration" : property.includes("flex") ? "flex" : property.startsWith("transition") ? "transition" : property.startsWith("overflow") ? "overflow" : property === "top" || property === "right" || property === "bottom" || property === "left" || property.startsWith("inset") ? "inset" : property;
+}
+function writeStyleRecord(state, property, value, cursor, original, flags, conditionOverride = -1) {
+	const condition = conditionOverride !== -1 ? conditionOverride : cursor ? cursor[conditionValue] : 0;
+	const identity = cursor ? cursor[conditionKey] : "";
 	const direct = state;
-	const condition = conditionOverride !== -1 ? conditionOverride : cursor ? conditionNumbers[cursor + conditionValueOffset] : 0;
-	const identity = cursor ? conditionTexts[cursor + conditionKeyOffset] || "" : "";
-	if (property.charCodeAt(0) === 116 && property.startsWith("transition")) {
-		const transitions = direct.flatTransitions ||= [];
-		for (let index = 0; index < transitions.length; index++) if (transitions[index][0] === property && transitions[index][3] === identity) {
-			transitions[index][1] = value;
-			transitions[index][2] = condition;
-			return;
+	const slots = direct.flatSlots ||= /* @__PURE__ */ new Map();
+	const slot = canGenerateCSS && (state.flatShouldDoClasses || flags & recordCSS) ? styleSlot(property) : property.startsWith("transition") ? "transition" : property;
+	let list = slots.get(slot);
+	if (!list) slots.set(slot, list = []);
+	for (let index = 0; index < list.length; index++) {
+		const entry = list[index];
+		const entryFlags = entry[7];
+		if ((entryFlags & 17) !== (flags & 17)) 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;
 		}
-		transitions.push([
-			property,
-			value,
-			condition,
-			identity,
-			cursor ? conditionTexts[cursor + conditionSelectorOffset] || "" : "",
-			cursor ? conditionWrappers : void 0,
-			cursor ? conditionNumbers[cursor + conditionWrapperOffset] >> 3 : 0,
-			cursor ? conditionNumbers[cursor + conditionWrapperOffset] & 7 : 0
-		]);
-		return;
-	}
-	streamAtomic(state, property, value, condition, identity, cursor ? conditionTexts[cursor + conditionSelectorOffset] || "" : "", cursor ? conditionWrappers : void 0, cursor ? conditionNumbers[cursor + conditionWrapperOffset] >> 3 : 0, cursor ? conditionNumbers[cursor + conditionWrapperOffset] & 7 : 0, false, original);
-}
-function streamWriteInline(state, property, value, cursor, merge, original, normalize = false, conditionOverride = -1) {
-	const direct = state;
-	const condition = conditionOverride !== -1 ? conditionOverride : cursor ? conditionNumbers[cursor + conditionValueOffset] : 0;
-	const importance = condition ? Math.floor(condition / 256) + 1 : 0;
-	const used = direct.flatUsed ||= {};
-	const previous = used[property];
-	if (previous !== void 0 && previous > importance) return;
-	used[property] = importance;
-	merge(state, property, value, !normalize, original);
-}
-function streamRetractInline(state, property, cursor) {
-	const direct = state;
-	const condition = cursor ? conditionNumbers[cursor + conditionValueOffset] : 0;
-	const importance = condition ? Math.floor(condition / 256) + 1 : 0;
-	const used = direct.flatUsed ||= {};
-	const previous = used[property];
-	if (previous !== void 0 && previous > importance) return;
-	used[property] = importance;
-	if (state.style) delete state.style[property];
-}
-function convertDeferredInline(state, merge) {
-	const direct = state;
-	const consume = (entries) => {
-		for (let index = 0; index < entries.length; index++) {
-			const entry = entries[index];
-			const condition = entry[2];
-			if (condition && !(condition & 1)) continue;
-			streamWriteInline(state, entry[0], entry[1], null, merge, entry[8] !== void 0 ? entry[8] : entry[1], false, condition);
+		if (entry[3] === identity) {
+			list.splice(index, 1);
+			break;
 		}
-	};
-	const slots = direct.flatSlots;
-	if (slots) {
-		direct.flatSlots = void 0;
-		for (const property in slots) consume(slots[property]);
-	}
-	const transitions = direct.flatTransitions;
-	if (transitions) {
-		direct.flatTransitions = void 0;
-		consume(transitions);
 	}
-	direct.flatBorderDefaultRequests = void 0;
+	list.push([
+		property,
+		value,
+		condition,
+		identity,
+		cursor ? cursor[conditionSelector] : "",
+		cursor ? cursor[conditionWrappers] : void 0,
+		original,
+		flags | (state.flatPass?.[passSourceLayer] || 0) << 5
+	]);
+}
+function streamWriteInline(state, property, value, cursor, original, normalize = property === "lineHeight", conditionOverride = -1, force = false) {
+	writeStyleRecord(state, property, value, cursor, original, (normalize ? recordNormalize : 0) | (force ? recordInline : 0), conditionOverride);
 }
-function completeStreaming(state, merge) {
+function completeResolvedStyles(state, merge = mergeStyle) {
 	const direct = state;
 	const shadow = direct.flatWebShadow;
 	if (shadow && (direct.flatBoxShadowSequence || 0) <= shadow[4]) {
@@ -1090,264 +1069,83 @@ function completeStreaming(state, merge) {
 		const color = normalizeColor(shadow[0], shadow[2] ?? 1);
 		if (color) {
 			const next = `${shadowUnit(offset.width)} ${shadowUnit(offset.height)} ${shadowUnit(shadow[3])} ${color}`;
-			emitProperty(state, "boxShadow", direct.flatBoxShadow ? `${direct.flatBoxShadow}, ${next}` : next, null, merge, shadow[5], shadow[6]);
+			emitProperty(state, "boxShadow", direct.flatBoxShadow ? `${direct.flatBoxShadow}, ${next}` : next, null, shadow[5], shadow[6]);
 		}
+		direct.flatWebShadow = void 0;
 	}
-	completeStreamingCSS(state);
+	if (state.flatShouldDoClasses && state.transformAccumulator) {
+		const transform = finalizeTransformAccumulator(state.transformAccumulator);
+		state.transformAccumulator = void 0;
+		writeStyleRecord(state, "transform", Array.isArray(transform) ? transformsToString(transform) : transform, null, transform, 0);
+	}
+	const slots = direct.flatSlots;
+	if (!slots) return;
+	for (const [property, entries] of slots) {
+		let cssEntries;
+		let inlineWinner;
+		let importance = -1;
+		for (let index = 0; index < entries.length; index++) {
+			const entry = entries[index];
+			const flags = entry[7];
+			if (flags & recordCSS || state.flatShouldDoClasses && !(flags & recordInline)) {
+				cssEntries ||= [];
+				const precedence = entry[2] ? Math.floor(entry[2] / 256) : -1;
+				const layer = flags >> 5;
+				let index2 = cssEntries.length;
+				while (index2 > 0) {
+					const before = cssEntries[index2 - 1];
+					const beforeLayer = before[7] >> 5;
+					if (beforeLayer < layer || beforeLayer === layer && (before[2] ? Math.floor(before[2] / 256) : -1) <= precedence) break;
+					index2--;
+				}
+				if (index2 === cssEntries.length) cssEntries.push(entry);
+				else cssEntries.splice(index2, 0, entry);
+			} else if (!entry[2] || entry[2] & 1) {
+				const next = entry[2] ? Math.floor(entry[2] / 256) : 0;
+				if (next >= importance) {
+					importance = next;
+					inlineWinner = entry;
+				}
+			}
+		}
+		if (cssEntries) registerAtomicSlot(direct, 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]);
+	}
+	direct.flatSlots = void 0;
 }
-function emitAtParentCondition(state, property, value, merge, originalValue, contextOnly) {
-	emitValue(state, property, value, state.flatPass?.[passParentCursor] || null, merge, originalValue, contextOnly);
+function emitAtParentCondition(state, property, value, originalValue, contextOnly) {
+	const cursor = state.flatPass?.[passParentCursor];
+	if (cursor) emitUnderCondition(state, property, value, cursor, originalValue, contextOnly, 0, value);
+	else emitValue(state, property, value, null, originalValue, contextOnly);
 }
-function emitUnderCondition(state, property, value, cursor, merge, originalValue, contextOnly, warnMode, warnSource) {
-	const condition = conditionNumbers[cursor + conditionValueOffset];
-	if (!(conditionNumbers[cursor + conditionFlagsOffset] & conditionResolvedFlag)) {
-		if (warnMode && process.env.NODE_ENV === "development") warnRefusedValue(property, warnSource, `unknown modifier "${conditionTexts[cursor + conditionUnresolvedNameOffset] || ""}"`);
+function emitUnderCondition(state, property, value, cursor, originalValue, contextOnly, warnMode, warnSource) {
+	const condition = cursor[conditionValue];
+	if (!(condition & conditionResolvedFlag)) {
+		if (warnMode && process.env.NODE_ENV !== "production") warnRefusedValue(property, warnSource, `unknown modifier "${cursor.problem}"`);
 		return 0;
 	}
-	const unsupportedState = conditionTexts[cursor + conditionUnsupportedStateOffset] || "";
-	if (warnMode && unsupportedState && process.env.NODE_ENV === "development") warnOnce(`${property}: "${unsupportedState}:" has no native component-state source; dropping the clause`);
-	if (merge && property && condition & 2 && (condition & 1 || canGenerateCSS && state.flatShouldDoClasses || warnMode === 1 && false)) {
-		emitValue(state, property, value, cursor, merge, warnMode === 2 ? originalValue : originalValue ?? value, contextOnly);
-		const flags = conditionNumbers[cursor + conditionFlagsOffset];
-		if (flags & conditionEnterFlag) state.flatHasEnterStyle = true;
-		if (flags & conditionPlatformPseudoFlag) state.flatHasPlatformPseudo = true;
-	} else if (merge && property && condition & 2) {
-		const flags = conditionNumbers[cursor + conditionFlagsOffset];
-		if (flags & conditionEnterFlag) state.flatHasEnterStyle = true;
-		if (flags & conditionPlatformPseudoFlag) state.flatHasPlatformPseudo = true;
+	emitValue(state, property, value, cursor, warnMode === 2 ? originalValue : originalValue ?? value, contextOnly);
+	if (condition & 2) {
+		if (condition & 4) state.flatHasEnterStyle = true;
+		if (condition & conditionPlatformPseudoFlag) state.flatHasPlatformPseudo = true;
 	}
 	return condition;
 }
-const directStyleHandler = {
-	segment(state, start, end, isBase, valid, source, chainStart, chainEnd, chainValid, chainCount, _result, failure, failureIndex, property, merge, originalValue, contextOnly) {
-		if (isBase) {
-			if (start === end) return;
-			if (!valid) {
-				if (failure === "invalid-character" || failure === "stray-comment-close") return 16;
-				if (process.env.NODE_ENV === "development") warnRefusedValue(property, source, failure === "unterminated-string" ? "an unterminated string" : failure === "unterminated-comment" ? "an unterminated \"/*\" comment" : "an unterminated \"(\"");
-				return;
-			}
-			const value = source.slice(start, end);
-			emitAtParentCondition(state, property, value, merge, value, contextOnly);
-			return 5;
-		}
-		if (!chainValid) {
-			if (process.env.NODE_ENV === "development") warnRefusedValue(property, source, 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;
-		}
-		if (start === end) {
-			if (process.env.NODE_ENV === "development") warnRefusedValue(property, source, "a conditional clause has no value");
-			return;
-		}
-		if (property === "aspectRatio" && chainCount === 1) {
-			const left = Number(source.slice(chainStart, chainEnd));
-			const right = Number(source.slice(start, end));
-			if (chainStart < chainEnd && Number.isFinite(left) && left > 0 && Number.isFinite(right) && right > 0) return 12;
-		}
-		const cursor = state.flatScanCursor;
-		const condition = valid ? emitUnderCondition(state, property, source.slice(start, end), cursor, merge, void 0, contextOnly, 1, source) : conditionNumbers[cursor + conditionFlagsOffset] & conditionResolvedFlag ? conditionNumbers[cursor + conditionValueOffset] : 0;
-		if (!condition) return;
-		if (!valid) {
-			if (process.env.NODE_ENV === "development") warnRefusedValue(property, source, 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;
-		}
-		return 4 | (condition & 12 ? 2 : 0);
-	},
-	modifier(state, start, end, valid, first, source) {
-		const directState = state;
-		let cursor = directState.flatScanCursor;
-		if (!cursor) cursor = directState.flatScanCursor = acquireConditionCursor(directState.flatPass?.[passParentCursor] || null);
-		else if (first) resetConditionCursor(cursor, directState.flatPass?.[passParentCursor] || null);
-		if (!valid) {
-			setConditionUnresolved(cursor);
-			return;
-		}
-		if (conditionNumbers[cursor + conditionFlagsOffset] & conditionResolvedFlag) resolveConditionModifier(state, cursor, source.slice(start, end));
-	},
-	chain(state, _start, _end, valid) {
-		const cursor = state.flatScanCursor;
-		if (cursor) {
-			if (!valid) setConditionUnresolved(cursor);
-			if (conditionNumbers[cursor + conditionFlagsOffset] & conditionResolvedFlag) commitConditionCursor(state, cursor);
-		}
-		return true;
-	},
-	end(state, source, result, lastPayloadStart, chainCount, property, merge, originalValue, contextOnly, failure, failureIndex) {
-		let hasBase = !!(result & 1);
-		if (result & 16) {
-			if (chainCount === 0) {
-				emitAtParentCondition(state, property, source, merge, originalValue ?? source, contextOnly);
-				hasBase = true;
-			} else if (process.env.NODE_ENV === "development") warnRefusedValue(property, source, 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 \"(\"");
-		}
-		if (result & 8 && chainCount === 1) {
-			emitAtParentCondition(state, property, source, merge, originalValue ?? source, contextOnly);
-			hasBase = true;
-		}
-		if (process.env.NODE_ENV === "development" && !hasBase && result & 4 && property in propToTokenCategoryCode && splitComponents(source.slice(lastPayloadStart)).length > 1) warnOnce(`${property}="${source}" has multiple values after its first conditional. Write the base value before the first conditional.`);
-		if ((!canGenerateCSS || !state.flatShouldDoClasses) && result & 2 && !hasBase) {
-			const value = implicitLifecycleBase(property);
-			if (value !== null) emitAtParentCondition(state, property, value, merge, value, contextOnly);
-		}
-	}
-};
-function implicitLifecycleBase(property) {
-	return property === "opacity" || property === "scale" || property === "scaleX" || property === "scaleY" ? 1 : property === "rotate" ? "0deg" : property === "x" || property === "y" ? 0 : null;
-}
-const legacyTransformParts = /* @__PURE__ */ new Set([
-	"matrix",
-	"perspective",
-	"rotateX",
-	"rotateY",
-	"rotateZ",
-	"scaleZ",
-	"skewX",
-	"skewY"
-]);
-const webShadowParts = {
-	shadowColor: 1,
-	shadowOffset: 2,
-	shadowOpacity: 3,
-	shadowRadius: 4
-};
-const webTextShadowParts = /* @__PURE__ */ new Set([
-	"textShadowColor",
-	"textShadowOffset",
-	"textShadowRadius"
-]);
-const lineStyles = /* @__PURE__ */ new Set([
-	"none",
-	"hidden",
-	"dotted",
-	"dashed",
-	"solid",
-	"double",
-	"groove",
-	"ridge",
-	"inset",
-	"outset"
-]);
-const borderTargets = {
-	border: {
-		width: [
-			"borderTopWidth",
-			"borderRightWidth",
-			"borderBottomWidth",
-			"borderLeftWidth"
-		],
-		style: [
-			"borderTopStyle",
-			"borderRightStyle",
-			"borderBottomStyle",
-			"borderLeftStyle"
-		],
-		color: [
-			"borderTopColor",
-			"borderRightColor",
-			"borderBottomColor",
-			"borderLeftColor"
-		]
-	},
-	borderTop: {
-		width: ["borderTopWidth"],
-		style: ["borderTopStyle"],
-		color: ["borderTopColor"]
-	},
-	borderRight: {
-		width: ["borderRightWidth"],
-		style: ["borderRightStyle"],
-		color: ["borderRightColor"]
-	},
-	borderBottom: {
-		width: ["borderBottomWidth"],
-		style: ["borderBottomStyle"],
-		color: ["borderBottomColor"]
-	},
-	borderLeft: {
-		width: ["borderLeftWidth"],
-		style: ["borderLeftStyle"],
-		color: ["borderLeftColor"]
-	},
-	outline: {
-		width: ["outlineWidth"],
-		style: ["outlineStyle"],
-		color: ["outlineColor"]
-	},
-	borderBlock: {
-		width: ["borderBlockStartWidth", "borderBlockEndWidth"],
-		style: ["borderBlockStartStyle", "borderBlockEndStyle"],
-		color: ["borderBlockStartColor", "borderBlockEndColor"]
-	},
-	borderInline: {
-		width: ["borderInlineStartWidth", "borderInlineEndWidth"],
-		style: ["borderInlineStartStyle", "borderInlineEndStyle"],
-		color: ["borderInlineStartColor", "borderInlineEndColor"]
-	}
+const formatScanFailure = (failure, source, failureIndex) => 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 \"(\"";
+const warnScanFailure = (property, source, failure, failureIndex) => {
+	if (process.env.NODE_ENV === "development") warnRefusedValue(property, source, formatScanFailure(failure, source, failureIndex));
 };
-const tokenLookup = {
-	value: void 0,
-	fromTheme: false,
-	themeKey: ""
-};
-function fillTokenLookup(value, fromTheme, themeKey) {
-	tokenLookup.value = value;
-	tokenLookup.fromTheme = fromTheme;
-	tokenLookup.themeKey = themeKey;
-	return tokenLookup;
-}
-function tokenVariable(state, property, name) {
-	let lookupName = name.charCodeAt(0) === 36 ? name.slice(1) : name;
-	if (property === "fontFamily") {
-		const family = state.conf.fontsParsed[lookupName]?.family;
-		return family ? fillTokenLookup(family, false, lookupName) : void 0;
-	}
-	const fontKey = property === "fontSize" ? "size" : property === "fontWeight" ? "weight" : property === "lineHeight" || property === "letterSpacing" ? property : void 0;
-	if (fontKey) {
-		const value = (state.conf.fontsParsed[state.fontFamily || state.conf.defaultFontToken] || state.conf.fontsParsed[state.conf.defaultFontToken])?.[fontKey]?.[lookupName];
-		return value ? fillTokenLookup(value, false, lookupName) : void 0;
-	}
-	const category = getTokenCategoryForProperty(property);
-	const dot = lookupName.indexOf(".");
-	if (dot !== -1) {
-		const prefix = lookupName.slice(0, dot);
-		if (!category || prefix === category || prefix === "color") lookupName = lookupName.slice(dot + 1);
-	}
-	if (category) {
-		const own = state.conf.tokensParsed[category]?.[lookupName];
-		if (own) return fillTokenLookup(own, false, lookupName);
-	} else {
-		const first = lookupName.charCodeAt(0);
-		if (first >= 48 && first <= 57 || first === 43 || first === 45 || first === 46) return;
-	}
-	const theme = state.theme?.[lookupName] || state.conf.themes?.[state.flatThemeName || ""]?.[lookupName];
-	if (theme) return fillTokenLookup(theme, true, lookupName);
-	if (category) return;
-	const token = state.conf.tokensParsed.space?.[lookupName] || state.conf.tokensParsed.color?.[lookupName];
-	return token ? fillTokenLookup(token, false, lookupName) : void 0;
-}
-let literalMissConf = null;
-let literalMissRevision = -1;
-let literalMisses = /* @__PURE__ */ new WeakMap();
-const literalMissRootTheme = {};
-function isFontKeyedProperty(property) {
-	return property === "fontFamily" || property === "fontSize" || property === "fontWeight" || property === "lineHeight" || property === "letterSpacing";
-}
-function literalMissSet(state) {
-	const revision = getConfigRevisionState(state.conf).revision;
-	if (state.conf !== literalMissConf || revision !== literalMissRevision) {
-		literalMissConf = state.conf;
-		literalMissRevision = revision;
-		literalMisses = /* @__PURE__ */ new WeakMap();
-	}
-	const themeKey = state.theme && typeof state.theme === "object" ? state.theme : literalMissRootTheme;
-	let set = literalMisses.get(themeKey);
-	if (!set) {
-		set = /* @__PURE__ */ new Set();
-		literalMisses.set(themeKey, set);
-	}
-	return set;
-}
-function configuredValue(state, property, raw) {
+let valueCacheConf;
+let valueCacheRevision = -1;
+let valueCaches = /* @__PURE__ */ new WeakMap();
+let valueCacheEntries = 0;
+const valueCacheRoot = {};
+const parsedSlices = /* @__PURE__ */ new WeakMap();
+const fontProperties = /* @__PURE__ */ new Map();
+function configuredValue(state, property, raw, embedded = false) {
+	const grammar = getConfigRevisionState(state.conf);
 	let name = raw;
 	let opacity;
 	const slash = raw.lastIndexOf("/");
@@ -1358,145 +1156,112 @@ function configuredValue(state, property, raw) {
 			opacity = amount;
 		}
 	}
-	const safeArea = resolveSafeAreaVariable(name);
+	const safeArea = grammar.safeAreaVariable(name);
 	if (safeArea !== void 0) {
 		state.flatUsesSafeArea = true;
 		return safeArea;
 	}
-	const cacheable = !isFontKeyedProperty(property);
-	let misses;
-	let missKey = "";
-	if (cacheable) {
-		misses = literalMissSet(state);
-		missKey = `${state.flatThemeName || ""}${property}${name}`;
-		if (misses.has(missKey)) return raw;
+	let fontProperty = fontProperties.get(property);
+	if (fontProperty === void 0) {
+		fontProperty = property.startsWith("font") || property === "lineHeight" || property === "letterSpacing";
+		fontProperties.set(property, fontProperty);
 	}
-	if (process.env.NODE_ENV === "development") {
-		const category = getTokenCategoryForProperty(property);
-		if (category && category !== "color" && state.conf.tokensParsed.color?.[name]) warnOnce(`"${name}" contributes to "color", not "${property}"`);
-	}
-	const lookup = tokenVariable(state, property, name);
-	if (!lookup || !isVariable(lookup.value)) {
-		if (misses) misses.add(missKey);
-		return raw;
+	const revision = grammar.revision;
+	if (state.conf !== valueCacheConf || revision !== valueCacheRevision) {
+		valueCacheConf = state.conf;
+		valueCacheRevision = revision;
+		valueCaches = /* @__PURE__ */ new WeakMap();
+		valueCacheEntries = 0;
+		state.flatValueScope = void 0;
 	}
 	const resolveValues = !state.flatShouldDoClasses && state.styleProps.resolveValues === "auto" ? "value" : state.styleProps.resolveValues;
-	if (resolveValues === "except-theme" && lookup.fromTheme) return `${THEME_REF_PREFIX}${lookup.themeKey}${opacity !== void 0 ? `/${opacity}` : ""}`;
-	let value = resolveVariableValue(property, lookup.value, resolveValues);
-	if (opacity !== void 0) value = `color-mix(in srgb, ${value} ${opacity}%, transparent)`;
-	return value;
-}
-function resolveEmbeddedTokens(state, property, raw) {
-	let copyFrom = 0;
-	let out = "";
-	let quote = 0;
-	for (let index = 0; index < raw.length; index++) {
-		const code = raw.charCodeAt(index);
-		if (quote) {
-			if (code === 92) index++;
-			else if (code === quote) quote = 0;
-			continue;
-		}
-		if (code === 34 || code === 39) {
-			quote = code;
-			continue;
-		}
-		if (!(code === 36 || code === 95 || code >= 65 && code <= 90 || code >= 97 && code <= 122)) continue;
-		let end = index + 1;
-		while (end < raw.length) {
-			const next = raw.charCodeAt(end);
-			if (next === 36 || next === 45 || next === 46 || next === 95 || next >= 48 && next <= 57 || next >= 65 && next <= 90 || next >= 97 && next <= 122) end++;
-			else break;
-		}
-		if (raw.charCodeAt(end) === 47) {
-			let suffix = end + 1;
-			while (suffix < raw.length) {
-				const next = raw.charCodeAt(suffix);
-				if (next < 48 || next > 57) break;
-				suffix++;
-			}
-			if (suffix > end + 1) end = suffix;
-		}
-		const before = raw.charCodeAt(index - 1);
-		if (code !== 36 && (before >= 48 && before <= 57 || before === 35 || before === 45 && raw.charCodeAt(index - 2) === 45 || raw.charCodeAt(end) === 40)) {
-			index = end - 1;
-			continue;
-		}
-		const word = raw.slice(index, end);
-		const value = configuredValue(state, property, word);
-		if (value !== word) {
-			out += raw.slice(copyFrom, index);
-			out += String(value);
-			copyFrom = end;
-		}
-		index = end - 1;
+	const direct = state;
+	let scope = direct.flatValueScope;
+	if (scope === void 0 || direct.flatValueScopeKind !== resolveValues) {
+		const themeObject = state.theme && typeof state.theme === "object" ? state.theme : valueCacheRoot;
+		let byScope = valueCaches.get(themeObject);
+		if (!byScope) valueCaches.set(themeObject, byScope = /* @__PURE__ */ new Map());
+		const scopeKey = `${state.flatThemeName || ""}${resolveValues}`;
+		scope = byScope.get(scopeKey);
+		if (!scope) byScope.set(scopeKey, scope = /* @__PURE__ */ new Map());
+		direct.flatValueScope = scope;
+		direct.flatValueScopeKind = resolveValues;
+	}
+	let maps = scope.get(property);
+	if (maps === void 0) scope.set(property, maps = { direct: /* @__PURE__ */ new Map() });
+	const byRaw = embedded ? maps.embedded ||= /* @__PURE__ */ new Map() : maps.direct;
+	if (!fontProperty) {
+		const known = byRaw.get(raw);
+		if (known !== void 0 || byRaw.has(raw)) return known;
 	}
-	return copyFrom ? out + raw.slice(copyFrom) : raw;
-}
-function normalizeTransitionNames(state, raw) {
-	let quote = 0;
-	let depth = 0;
-	let copyFrom = 0;
-	let out = "";
-	for (let index = 0; index < raw.length; index++) {
-		const code = raw.charCodeAt(index);
-		if (quote) {
-			if (code === 92) index++;
-			else if (code === quote) quote = 0;
-			continue;
-		}
-		if (code === 34 || code === 39) {
-			quote = code;
-			continue;
-		}
-		if (code === 40) {
-			depth++;
-			continue;
-		}
-		if (code === 41) {
-			depth--;
-			continue;
-		}
-		if (depth || !(code >= 65 && code <= 90 || code >= 97 && code <= 122 || code === 95) || index > 1 && raw.charCodeAt(index - 1) === 45 && raw.charCodeAt(index - 2) === 45) continue;
-		let end = index + 1;
-		while (end < raw.length) {
-			const next = raw.charCodeAt(end);
-			if (next >= 48 && next <= 57 || next >= 65 && next <= 90 || next >= 97 && next <= 122 || next === 45 || next === 95) end++;
-			else break;
-		}
-		if (raw.charCodeAt(end) !== 40) {
-			const authored = raw.slice(index, end);
-			let property = state.conf.shorthands[authored] || authored;
-			if (property === "x" || property === "y") property = "translate";
-			else if (property === "scaleX" || property === "scaleY") property = "scale";
-			else if (legacyTransformParts.has(property)) property = "transform";
-			let hasUpper = false;
-			for (let offset = 0; offset < property.length; offset++) {
-				const letter = property.charCodeAt(offset);
-				if (letter >= 65 && letter <= 90) {
-					hasUpper = true;
-					break;
-				}
+	let lookupName = name.charCodeAt(0) === 36 ? name.slice(1) : name;
+	let value;
+	let fromTheme = false;
+	if (property === "fontFamily") value = state.conf.fontsParsed[lookupName]?.family;
+	else {
+		const fontKey = property === "fontSize" ? "size" : property === "fontWeight" ? "weight" : property === "lineHeight" || property === "letterSpacing" ? property : "";
+		if (fontKey) value = (state.conf.fontsParsed[state.fontFamily || state.conf.defaultFontToken] || state.conf.fontsParsed[state.conf.defaultFontToken])?.[fontKey]?.[lookupName];
+		else {
+			const category = grammar.tokenCategory(property);
+			const dot = lookupName.indexOf(".");
+			if (dot !== -1) {
+				const prefix = lookupName.slice(0, dot);
+				if (!category || prefix === category || prefix === "color") lookupName = lookupName.slice(dot + 1);
 			}
-			if (property !== authored || hasUpper) {
-				out += raw.slice(copyFrom, index);
-				for (let offset = 0; offset < property.length; offset++) {
-					const letter = property.charCodeAt(offset);
-					out += letter >= 65 && letter <= 90 ? `-${String.fromCharCode(letter + 32)}` : property[offset];
+			value = category ? state.conf.tokensParsed[category]?.[lookupName] : void 0;
+			if (!value) {
+				const first = lookupName.charCodeAt(0);
+				if (category || !(first >= 48 && first <= 57 || first === 43 || first === 45 || first === 46)) {
+					value = state.theme?.[lookupName] || state.conf.themes?.[state.flatThemeName || ""]?.[lookupName];
+					fromTheme = !!value;
+					if (!value && !category) value = state.conf.tokensParsed.space?.[lookupName] || state.conf.tokensParsed.color?.[lookupName];
 				}
-				copyFrom = end;
 			}
 		}
-		index = end - 1;
 	}
-	return copyFrom ? out + raw.slice(copyFrom) : raw;
+	if (process.env.NODE_ENV === "development") {
+		const category = grammar.tokenCategory(property);
+		if (category && category !== "color" && state.conf.tokensParsed.color?.[name]) warnOnce(`"${name}" contributes to "color", not "${property}"`);
+	}
+	let out = raw;
+	if (isVariable(value)) {
+		out = resolveValues === "except-theme" && fromTheme ? `${THEME_REF_PREFIX}${lookupName}${opacity !== void 0 ? `/${opacity}` : ""}` : resolveVariableValue(property, value, resolveValues);
+		if (opacity !== void 0) out = `color-mix(in srgb, ${out} ${opacity}%, transparent)`;
+	}
+	if (embedded && out === raw) {
+		const usedSafeArea = state.flatUsesSafeArea;
+		out = grammar.embeddedTokens(raw, (word) => configuredValue(state, property, word));
+		if (!usedSafeArea && state.flatUsesSafeArea) return out;
+	}
+	if (!fontProperty && !fromTheme) if (valueCacheEntries > 8192) {
+		valueCaches = /* @__PURE__ */ new WeakMap();
+		valueCacheEntries = 0;
+	} else {
+		valueCacheEntries++;
+		byRaw.set(raw, out);
+	}
+	return out;
 }
-function getDirectDynamicThemeAccess(state) {
-	return state.flatDynamicThemeAccess;
+function ownsSourceLayer(state, property, conditional = false) {
+	const direct = state;
+	const layer = direct.flatPass?.[passSourceLayer] || 0;
+	const layers = direct.flatPropertyLayers ||= /* @__PURE__ */ new Map();
+	const previous = layers.get(property);
+	if (previous !== void 0) {
+		if (previous > layer) return false;
+		if (previous < layer) {
+			if (conditional) return true;
+			clearDirectStyle(state, property);
+		}
+	} else if (conditional) return true;
+	layers.set(property, layer);
+	return true;
 }
-function emitProperty(state, property, value, cursor, merge, originalValue, contextOnly) {
+function emitProperty(state, property, value, cursor, originalValue, contextOnly) {
+	if (!ownsSourceLayer(state, property, cursor !== null)) return;
 	const direct = state;
-	const condition = cursor ? conditionNumbers[cursor + conditionValueOffset] : 0;
+	const condition = cursor ? cursor[conditionValue] : 0;
+	if (condition && (!(condition & 2) || !(condition & 1) && !(canGenerateCSS && state.flatShouldDoClasses) && true)) return;
 	if (value === false && !condition) {
 		clearDirectStyle(state, property);
 		if (direct.flatStyleStaticConfig?.styledContextKeys?.has(property)) (state.overriddenContextProps ||= {})[property] = false;
@@ -1504,7 +1269,7 @@ function emitProperty(state, property, value, cursor, merge, originalValue, cont
 	}
 	if (condition & 4) (state.flatEnterKeys ||= /* @__PURE__ */ new Set()).add(property);
 	if (condition & 8) (state.flatExitKeys ||= /* @__PURE__ */ new Set()).add(property);
-	cursor && conditionTexts[cursor + conditionThemeOffset];
+	cursor && cursor[conditionTheme];
 	if (contextOnly) {
 		if (!condition || condition & 1) (state.overriddenContextProps ||= {})[property] = originalValue;
 		return;
@@ -1517,34 +1282,10 @@ function emitProperty(state, property, value, cursor, merge, originalValue, cont
 	}
 	const shouldPromoteAnimatedStyle = canGenerateCSS && !condition && !state.flatShouldDoClasses && !state.styleProps.noMergeStyle && state.styleProps.isAnimated && state.animationDriver?.inputStyle === "css" && property in nonAnimatableStyleProps;
 	if (canGenerateCSS && (state.flatShouldDoClasses || shouldPromoteAnimatedStyle)) {
-		if (!condition && state.style && !(direct.flatUsed && direct.flatUsed[property])) delete state.style[property];
-		streamWriteCSS(state, property, value, cursor, originalValue);
+		writeStyleRecord(state, property, value, cursor, originalValue, shouldPromoteAnimatedStyle ? recordCSS : 0);
 		return;
 	}
-	if (condition && !(condition & 1)) return;
-	streamWriteInline(state, property, value, cursor, merge, originalValue);
-}
-function splitComponents(value) {
-	const parts = [];
-	let start = 0;
-	let quote = 0;
-	let depth = 0;
-	for (let index = 0; index <= value.length; index++) {
-		const code = index === value.length ? 32 : value.charCodeAt(index);
-		if (quote) {
-			if (code === 92) index++;
-			else if (code === quote) quote = 0;
-			continue;
-		}
-		if (code === 34 || code === 39) quote = code;
-		else if (code === 40) depth++;
-		else if (code === 41) depth--;
-		else if (!depth && code <= 32) {
-			if (index > start) parts.push(value.slice(start, index));
-			start = index + 1;
-		}
-	}
-	return parts;
+	streamWriteInline(state, property, value, cursor, originalValue);
 }
 function numericUnitValue(value, first, second) {
 	const unitLength = value.endsWith(first) || second !== void 0 && value.endsWith(second) ? first.length : 0;
@@ -1552,126 +1293,19 @@ function numericUnitValue(value, first, second) {
 	const numeric = Number(value.slice(0, value.length - unitLength));
 	return Number.isFinite(numeric) ? numeric : NaN;
 }
-function isNumericCSSComponent(value) {
-	let index = 0;
-	if (value.charCodeAt(index) === 43 || value.charCodeAt(index) === 45) index++;
-	let digits = 0;
-	let dot = false;
-	for (; index < value.length; index++) {
-		const code = value.charCodeAt(index);
-		if (code >= 48 && code <= 57) {
-			digits++;
-			continue;
-		}
-		if (code === 46 && !dot) {
-			dot = true;
-			continue;
-		}
-		break;
-	}
-	if (!digits) return false;
-	for (; index < value.length; index++) {
-		const code = value.charCodeAt(index);
-		if (code !== 37 && (code < 97 || code > 122)) return false;
-	}
-	return true;
-}
-function startsValueFunction(value) {
-	let index = 0;
-	while (index < value.length) {
-		const code = value.charCodeAt(index);
-		if (code === 45 || code >= 97 && code <= 122) {
-			index++;
-			continue;
-		}
-		break;
-	}
-	return index > 0 && value.charCodeAt(index) === 40;
-}
-function emitBorder(state, property, raw, cursor, merge, originalValue, contextOnly) {
-	let width;
-	let style;
-	let color;
-	for (const part of splitComponents(raw)) if (lineStyles.has(part) || property === "outline" && part === "auto") style = part;
-	else if (part === "thin" || part === "medium" || part === "thick" || isNumericCSSComponent(part) || startsValueFunction(part)) width = part;
-	else color = part;
-	if (style === "none" && width === void 0) width = "0";
-	const targets = borderTargets[property];
-	if (width !== void 0) for (const target of targets.width) emitResolved(state, target, width, cursor, merge, originalValue, contextOnly);
-	if (style !== void 0) {
-		const styleTargets = targets.style;
-		for (const target of styleTargets) emitProperty(state, target, style, cursor, merge, originalValue, contextOnly);
-	}
-	if (color !== void 0) for (const target of targets.color) emitResolved(state, target, color, cursor, merge, originalValue, contextOnly);
-}
-function emitTextDecoration(state, raw, cursor, merge, originalValue, contextOnly) {
-	for (const part of splitComponents(raw)) emitResolved(state, part === "solid" || part === "double" || part === "dotted" || part === "dashed" || part === "wavy" ? "textDecorationStyle" : part === "underline" || part === "overline" || part === "line-through" || part === "none" ? "textDecorationLine" : "textDecorationColor", part, cursor, merge, originalValue, contextOnly);
-}
-function emitTransform(state, property, value, cursor, merge, originalValue, contextOnly) {
-	if (!canGenerateCSS || !state.flatShouldDoClasses) {
-		emitProperty(state, property, value, cursor, merge, originalValue, contextOnly);
-		return;
-	}
-	const targets = property === "scale" ? ["--t-scale-x", "--t-scale-y"] : [property === "x" ? "--t-x" : property === "y" ? "--t-y" : property === "scaleX" ? "--t-scale-x" : property === "scaleY" ? "--t-scale-y" : "rotate"];
-	for (const target of targets) {
-		let targetValue = value;
-		if (typeof targetValue === "number") {
-			if (target === "--t-x" || target === "--t-y") targetValue = `${targetValue}px`;
-			else if (target === "rotate") targetValue = `${targetValue}deg`;
-		}
-		emitProperty(state, target, targetValue, cursor, merge, originalValue, contextOnly);
-		if (target === "--t-x" || target === "--t-y") addComposition(state, "translate");
-		else if (target.startsWith("--t-scale")) addComposition(state, "scale");
-	}
-}
-function emitResolved(state, property, raw, cursor, merge, originalValue, contextOnly) {
-	let value = configuredValue(state, property, raw);
-	if (value === raw) value = resolveEmbeddedTokens(state, property, raw);
+function emitResolved(state, property, raw, cursor, originalValue, contextOnly) {
+	let value = configuredValue(state, property, raw, true);
 	if (!state.flatShouldDoClasses && typeof value === "string") {
 		const 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, merge, originalValue, contextOnly);
+	emitProperty(state, property, value, cursor, originalValue, contextOnly);
 }
-const emitKindTransition = 1;
-const emitKindTransformPart = 2;
-const emitKindWebShadow = 3;
-const emitKindWebTextShadow = 4;
-const emitKindTransform = 5;
-const emitKindBorder = 6;
-const emitKindTextDecoration = 7;
-const emitKindBackground = 8;
-const emitKindAxis = 9;
-const emitKindBorderRadius = 10;
-const emitKindBorderWidth = 11;
-const emitValueKinds = {
-	transition: emitKindTransition,
-	transitionProperty: emitKindTransition,
-	transform: emitKindTransform,
-	textDecoration: emitKindTextDecoration,
-	background: emitKindBackground,
-	x: emitKindAxis,
-	y: emitKindAxis,
-	scale: emitKindAxis,
-	scaleX: emitKindAxis,
-	scaleY: emitKindAxis,
-	rotate: emitKindAxis,
-	borderRadius: emitKindBorderRadius,
-	borderWidth: emitKindBorderWidth,
-	borderTopWidth: emitKindBorderWidth,
-	borderRightWidth: emitKindBorderWidth,
-	borderBottomWidth: emitKindBorderWidth,
-	borderLeftWidth: emitKindBorderWidth
-};
-for (const part of legacyTransformParts) emitValueKinds[part] = emitKindTransformPart;
-for (const part in webShadowParts) emitValueKinds[part] = emitKindWebShadow;
-for (const part of webTextShadowParts) emitValueKinds[part] = emitKindWebTextShadow;
-for (const target in borderTargets) emitValueKinds[target] = emitKindBorder;
 function shadowUnit(part) {
 	return typeof part === "number" ? `${part}px` : part || "0px";
 }
-function emitWebTextShadow(state, property, value, merge, originalValue, contextOnly) {
+function emitWebTextShadow(state, property, value, originalValue, contextOnly) {
 	const shadow = state.flatTextShadow ||= {};
 	shadow[property] = value;
 	const offset = shadow.textShadowOffset || {
@@ -1679,100 +1313,97 @@ function emitWebTextShadow(state, property, value, merge, originalValue, context
 		height: 0
 	};
 	if (!shadow.textShadowColor) return;
-	emitProperty(state, "textShadow", `${shadowUnit(offset.width)} ${shadowUnit(offset.height)} ${shadowUnit(shadow.textShadowRadius)} ${shadow.textShadowColor}`, null, merge, originalValue, contextOnly);
+	emitProperty(state, "textShadow", `${shadowUnit(offset.width)} ${shadowUnit(offset.height)} ${shadowUnit(shadow.textShadowRadius)} ${shadow.textShadowColor}`, null, originalValue, contextOnly);
 }
-function emitValue(state, property, raw, cursor, merge, originalValue, contextOnly) {
-	const condition = cursor ? conditionNumbers[cursor + conditionValueOffset] : 0;
+function emitValue(state, property, raw, cursor, originalValue, contextOnly) {
+	const condition = cursor ? cursor[conditionValue] : 0;
+	const grammar = getConfigRevisionState(state.conf);
+	property = webStyleProperty(property);
+	if (property === "backdropFilter") emitValue(state, "WebkitBackdropFilter", raw, cursor, originalValue, contextOnly);
 	if (isVariable(raw)) raw = resolveVariableValue(property, raw, !state.flatShouldDoClasses && state.styleProps.resolveValues === "auto" ? "value" : state.styleProps.resolveValues);
-	const emitKind = emitValueKinds[property];
-	if (emitKind !== void 0) switch (emitKind) {
-		case emitKindTransition:
-			if (typeof raw === "string") raw = normalizeTransitionNames(state, raw);
-			break;
-		case emitKindBorderWidth:
-			requestBorderStyleDefault(state, property, condition, cursor ? conditionTexts[cursor + conditionKeyOffset] || "" : "", cursor ? conditionTexts[cursor + conditionSelectorOffset] || "" : "", cursor ? conditionWrappers : void 0, cursor ? conditionNumbers[cursor + conditionWrapperOffset] >> 3 : 0, cursor ? conditionNumbers[cursor + conditionWrapperOffset] & 7 : 0);
-			break;
-		case emitKindTransformPart: {
-			const value2 = typeof raw === "string" ? configuredValue(state, property, raw) : raw;
-			if (canGenerateCSS && state.flatShouldDoClasses && !condition) {
-				state.transformAccumulator ||= createTransformAccumulator();
-				addTransformValue(state.transformAccumulator, property, value2);
-			} else if (condition && canGenerateCSS && state.flatShouldDoClasses) emitProperty(state, "transform", `${property}(${value2})`, cursor, merge, originalValue, contextOnly);
-			else streamWriteInline(state, property, value2, cursor, merge, originalValue, true);
+	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, property.slice(0, -5) + "Style", "solid", cursor, originalValue, recordDefault);
+	const propertyKind = grammar.propertyKind(property);
+	if (propertyKind >= 7 && typeof raw === "string") {
+		const composite = grammar.compositeValue(property, raw, state, configuredValue);
+		if (composite !== void 0) {
+			emitProperty(state, property, composite, cursor, originalValue, contextOnly);
 			return;
 		}
-		case emitKindWebShadow: {
+	}
+	if (propertyKind === 5) {
+		const value2 = typeof raw === "string" ? configuredValue(state, property, raw) : raw;
+		if (canGenerateCSS && state.flatShouldDoClasses && !condition) {
+			state.transformAccumulator ||= createTransformAccumulator();
+			addTransformValue(state.transformAccumulator, property, value2);
+		} else if (condition && canGenerateCSS && state.flatShouldDoClasses) emitProperty(state, "transform", `${property}(${value2})`, cursor, originalValue, contextOnly);
+		else streamWriteInline(state, property, value2, cursor, originalValue, true);
+		return;
+	}
+	{
+		const webShadowPart = propertyKind < 5 ? propertyKind : 0;
+		if (webShadowPart || propertyKind === 6) {
 			const value2 = typeof raw === "string" ? configuredValue(state, property, raw) : raw;
-			if (canGenerateCSS && state.flatShouldDoClasses) {
+			if (state.styleProps.noNormalize !== false) if (webShadowPart) {
 				const shadow = state.flatWebShadow ||= [];
-				shadow[webShadowParts[property] - 1] = value2;
+				shadow[webShadowPart - 1] = value2;
 				shadow[4] = ++frameSequence;
 				shadow[5] = originalValue;
 				shadow[6] = contextOnly;
-			} else streamWriteInline(state, property, value2, cursor, merge, originalValue, true);
+			} else emitWebTextShadow(state, property, value2, originalValue, contextOnly);
+			else streamWriteInline(state, property, value2, cursor, originalValue, true, -1, true);
 			return;
 		}
-		case emitKindWebTextShadow: {
-			const value2 = typeof raw === "string" ? configuredValue(state, property, raw) : raw;
-			if (canGenerateCSS && state.flatShouldDoClasses) emitWebTextShadow(state, property, value2, merge, originalValue, contextOnly);
-			else streamWriteInline(state, property, value2, cursor, merge, originalValue, true);
+	}
+	if (property === "transform") {
+		if (canGenerateCSS && state.flatShouldDoClasses && Array.isArray(raw)) raw = transformsToString(raw);
+	}
+	if (typeof raw === "string" && property === "background") {
+		const parts = splitComponents(raw);
+		if (parts.length === 1 && !startsValueFunction(parts[0])) {
+			emitResolved(state, "backgroundColor", parts[0], cursor, originalValue, contextOnly);
 			return;
 		}
-		case emitKindTransform:
-			if (canGenerateCSS && state.flatShouldDoClasses && Array.isArray(raw)) raw = transformsToString(raw);
-			break;
-		case emitKindBorder:
-			if (typeof raw === "string") {
-				emitBorder(state, property, raw, cursor, merge, originalValue, contextOnly);
-				return;
-			}
-			break;
-		case emitKindTextDecoration:
-			if (typeof raw === "string") {
-				emitTextDecoration(state, raw, cursor, merge, originalValue, contextOnly);
-				return;
-			}
-			break;
-		case emitKindBackground:
-			if (typeof raw === "string") {
-				const parts = splitComponents(raw);
-				if (parts.length === 1 && !startsValueFunction(parts[0])) {
-					emitResolved(state, "backgroundColor", parts[0], cursor, merge, originalValue, contextOnly);
-					return;
-				}
-			}
-			break;
-		case emitKindAxis: {
-			let value2 = typeof raw === "string" ? configuredValue(state, property, raw) : raw;
-			if (!state.flatShouldDoClasses && typeof value2 === "string" && !value2.startsWith(THEME_REF_PREFIX)) {
-				if (property === "rotate" && !Number.isFinite(numericUnitValue(value2, "deg", "rad"))) {
-					if (process.env.NODE_ENV === "development") warnOnce(`native transform "${property}" cannot represent "${value2}"; dropping it`);
-					if (condition & 1) {
-						removeTransformValue(state.transformAccumulator, property);
-						streamRetractInline(state, property, cursor);
-					}
-					return;
+	}
+	if (property === "x" || property === "y" || property === "scale" || property === "scaleX" || property === "scaleY" || property === "rotate") {
+		let value2 = typeof raw === "string" ? configuredValue(state, property, raw) : raw;
+		if (!state.flatShouldDoClasses && typeof value2 === "string" && !value2.startsWith(THEME_REF_PREFIX)) {
+			if (property === "rotate" && !Number.isFinite(numericUnitValue(value2, "deg", "rad"))) {
+				if (process.env.NODE_ENV === "development") warnOnce(`native transform "${property}" cannot represent "${value2}"; dropping it`);
+				if (condition & 1) {
+					removeTransformValue(state.transformAccumulator, property);
+					writeStyleRecord(state, property, void 0, cursor, void 0, recordRetract);
 				}
-				const unitValue = numericUnitValue(value2, "px", "dp");
-				if (Number.isFinite(unitValue)) value2 = unitValue;
-				else if (Number.isFinite(Number(value2))) value2 = Number(value2);
+				return;
 			}
-			emitTransform(state, property, value2, cursor, merge, originalValue, contextOnly);
+			const unitValue = numericUnitValue(value2, "px", "dp");
+			if (Number.isFinite(unitValue)) value2 = unitValue;
+			else if (Number.isFinite(Number(value2))) value2 = Number(value2);
+		}
+		if (!canGenerateCSS || !state.flatShouldDoClasses) {
+			emitProperty(state, property, value2, cursor, originalValue, contextOnly);
 			return;
 		}
-		case emitKindBorderRadius:
-			if (!state.flatShouldDoClasses && !condition) {
-				if (typeof raw === "string") emitResolved(state, property, raw, cursor, merge, originalValue, contextOnly);
-				else emitProperty(state, property, raw, cursor, merge, originalValue, contextOnly);
-				return;
+		const targets = property === "scale" ? ["--t-scale-x", "--t-scale-y"] : [property === "x" ? "--t-x" : property === "y" ? "--t-y" : property === "scaleX" ? "--t-scale-x" : property === "scaleY" ? "--t-scale-y" : "rotate"];
+		for (const target of targets) {
+			let targetValue = value2;
+			if (typeof targetValue === "number") {
+				if (target === "--t-x" || target === "--t-y") targetValue = `${targetValue}px`;
+				else if (target === "rotate") targetValue = `${targetValue}deg`;
 			}
-			break;
+			emitProperty(state, target, targetValue, cursor, originalValue, contextOnly);
+			if (target === "--t-x" || target === "--t-y") addComposition(state, "translate");
+			else if (target.startsWith("--t-scale")) addComposition(state, "scale");
+		}
+		return;
 	}
-	let value = raw;
-	if (typeof raw === "string") {
-		value = configuredValue(state, property, raw);
-		if (value === raw) value = resolveEmbeddedTokens(state, property, raw);
+	if (property === "borderRadius" && !state.flatShouldDoClasses && !condition) {
+		if (typeof raw === "string") emitResolved(state, property, raw, cursor, originalValue, contextOnly);
+		else emitProperty(state, property, raw, cursor, originalValue, contextOnly);
+		return;
 	}
+	let value = raw;
+	if (typeof raw === "string") value = configuredValue(state, property, raw, true);
 	if (!state.flatShouldDoClasses && typeof value === "string") {
 		const unitValue = numericUnitValue(value, "px", "dp");
 		if (Number.isFinite(unitValue)) value = unitValue;
@@ -1782,448 +1413,146 @@ function emitValue(state, property, raw, cursor, merge, originalValue, contextOn
 		state.flatBoxShadow = value;
 		state.flatBoxShadowSequence = frameSequence + 1;
 	}
-	const expanded = state.styleProps.noExpand ? null : expandStyle(property, value, state.conf.settings.styleCompat || "web");
-	if (!expanded) {
-		emitProperty(state, property, value, cursor, merge, originalValue, contextOnly);
-		return;
-	}
-	if (typeof raw === "string" && expanded.length > 1) {
-		const parts = splitComponents(raw);
-		if (parts.length > 0 && parts.length <= (expanded.length === 4 ? 4 : 2)) {
-			for (let index = 0; index < expanded.length; index++) {
-				const partIndex = index === 0 || parts.length === 1 ? 0 : index === 1 || index === 3 && parts.length < 4 ? 1 : index === 2 && parts.length < 3 ? 0 : index;
-				emitResolved(state, expanded[index][0], parts[partIndex], cursor, merge, originalValue, contextOnly);
-			}
-			return;
-		}
-	}
-	for (let index = 0; index < expanded.length; index++) emitProperty(state, expanded[index][0], expanded[index][1], cursor, merge, originalValue, contextOnly);
-}
-function contributeStyleString(state, property, source, merge, originalValue, contextOnly = false) {
-	const directState = state;
-	const watermark = conditionCursorTop;
-	const previousCursor = directState.flatScanCursor;
-	const previousExpectMulti = directState.flatExpectMulti;
-	directState.flatScanCursor = null;
-	directState.flatExpectMulti = source.indexOf(":") !== -1;
-	try {
-		scanFlatValue(source, directStyleHandler, state, property, merge, originalValue, contextOnly);
-	} finally {
-		directState.flatScanCursor = previousCursor;
-		directState.flatExpectMulti = previousExpectMulti;
-		releaseConditionCursors(watermark);
+	if (!state.styleProps.noExpand && property === "flex" && typeof value === "number") {
+		const compat = state.conf.settings.styleCompat;
+		value = value === -1 ? "0 auto" : compat === "legacy" ? `${value} auto` : compat && compat !== "web" ? value > 0 ? `${value} 0 0` : `0 ${-value} auto` : value < 0 ? value : `${value} 0px`;
 	}
-	return true;
+	emitProperty(state, property, value, cursor, originalValue, contextOnly);
 }
-function contributeStyleObject(state, property, value, merge, contextOnly) {
-	const outerState = state;
-	const previousExpectMulti = outerState.flatExpectMulti;
-	outerState.flatExpectMulti = true;
-	try {
-		return contributeStyleObjectInner(state, property, value, merge, contextOnly);
-	} finally {
-		outerState.flatExpectMulti = previousExpectMulti;
-	}
-}
-function contributeStyleObjectInner(state, property, value, merge, contextOnly) {
-	const parent = state.flatPass?.[passParentCursor] || null;
-	const hasDefault = "default" in value;
+function walkConditionalValue(state, property, value, parent, sink, warnMode = 0) {
+	const parentCondition = parent || null;
 	let hasBase = false;
-	const base = hasDefault ? value.default : void 0;
-	if (base != null) {
-		emitAtParentCondition(state, property, base, merge, base, contextOnly);
-		hasBase = true;
-	}
 	let conditions = 0;
-	let firstCondition = !hasDefault;
-	for (const key in value) {
-		if (key === "default") continue;
-		const payload = value[key];
-		const watermark = conditionCursorTop;
-		const cursor = acquireConditionCursor(parent);
-		resolveConditionText(state, cursor, key);
-		const condition = commitConditionCursor(state, cursor);
-		if (firstCondition) {
-			firstCondition = false;
-			if (!condition) {
-				releaseConditionCursors(watermark);
-				return false;
+	let lastPayload = "";
+	if (typeof value === "string") {
+		const parsed = getConfigRevisionState(state.conf).parseFlatValue(value);
+		const [segments, failure, failureIndex] = parsed;
+		let slices = parsedSlices.get(parsed);
+		if (slices === void 0) parsedSlices.set(parsed, slices = []);
+		const chainCount = segments.length / 5 - 1;
+		if (property === "aspectRatio" && chainCount === 1) {
+			const left = Number(value.slice(segments[7], segments[8]));
+			const right = Number(value.slice(segments[5], segments[6]));
+			if (left > 0 && right > 0 && Number.isFinite(left) && Number.isFinite(right)) return false;
+		}
+		for (let index = 0; index < segments.length; index += 5) {
+			const start = segments[index];
+			const end = segments[index + 1];
+			const flags = segments[index + 4];
+			if (!(flags & 1)) continue;
+			if (start === end) continue;
+			if (flags & 2) {
+				const payload = slices[index] ??= value.slice(start, end);
+				sink(payload, parentCondition, payload);
+				hasBase = true;
+			} else if (process.env.NODE_ENV !== "production" && warnMode && !chainCount && (failure === "invalid-character" || failure === "stray-comment-close")) {
+				sink(value, parentCondition, value);
+				hasBase = true;
+			} else if (warnMode) warnScanFailure(property, value, failure, failureIndex);
+		}
+		let lastPayloadStart = 0;
+		for (let index = 0; index < segments.length; index += 5) {
+			const start = segments[index];
+			const end = segments[index + 1];
+			const flags = segments[index + 4];
+			if (flags & 1) continue;
+			if (!(flags & 4) || !(flags & 2)) {
+				if (warnMode) warnScanFailure(property, value, failure, failureIndex);
+				continue;
+			}
+			lastPayloadStart = start;
+			if (start === end) {
+				if (warnMode && process.env.NODE_ENV === "development") warnRefusedValue(property, value, "a conditional clause has no value");
+				continue;
 			}
+			const cursor = conditionFromKey(state, slices[index + 2] ??= value.slice(segments[index + 2], segments[index + 3]), parentCondition);
+			conditions |= cursor[conditionValue];
+			if (cursor[conditionValue] & conditionResolvedFlag || warnMode) sink(slices[index] ??= value.slice(start, end), cursor, value);
+		}
+		if (process.env.NODE_ENV !== "production") lastPayload = value.slice(lastPayloadStart);
+	} else {
+		if (!value || typeof value !== "object" || Array.isArray(value) || isVariable(value) || !classifyConditionalObject(value, state)) return false;
+		if (value.default != null) {
+			sink(value.default, parentCondition, value.default);
+			hasBase = true;
+		}
+		for (const key in value) {
+			if (key === "default" || value[key] == null) continue;
+			const cursor = conditionFromKey(state, key, parentCondition);
+			conditions |= cursor[conditionValue];
+			if (cursor[conditionValue] & conditionResolvedFlag || warnMode) sink(value[key], cursor, value[key]);
 		}
-		if (payload != null) conditions |= emitUnderCondition(state, property, payload, cursor, merge, payload, contextOnly, 1, payload);
-		releaseConditionCursors(watermark);
 	}
-	if (!hasDefault && firstCondition) return false;
-	if ((!canGenerateCSS || !state.flatShouldDoClasses) && conditions & 12 && !hasBase) {
-		const resting = implicitLifecycleBase(property);
-		if (resting !== null) emitAtParentCondition(state, property, resting, merge, resting, 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) {
+		const resting = property === "opacity" || property.startsWith("scale") ? 1 : property === "rotate" ? "0deg" : property === "x" || property === "y" ? 0 : null;
+		if (resting !== null && !state.flatPropertyLayers?.has(property)) sink(resting, parentCondition, resting);
 	}
 	return true;
 }
-function contributeValue(state, property, value, merge, originalValue, contextOnly = false, condition) {
-	if (isConditionTransport(value)) {
-		if (value[transportHasBase]) {
-			const base = value[transportBase];
-			contributeValue(state, property, base, merge, base, contextOnly);
-		}
-		for (let offset = transportEntries; offset < value.length;) {
-			const entryValue = value[offset];
-			const watermark = conditionCursorTop;
-			try {
-				emitUnderCondition(state, property, entryValue, acquireTransportCursor(state, value, offset, state.flatPass?.[passParentCursor] || null), merge, entryValue, contextOnly, 2, entryValue);
-			} finally {
-				releaseConditionCursors(watermark);
-			}
-			offset += transportEntryWidth;
-		}
-		return true;
-	}
+function contributeValue(state, property, value, originalValue, contextOnly = false, condition) {
 	if (condition !== void 0) {
-		const parent = state.flatPass?.[passParentCursor] || null;
-		const watermark = conditionCursorTop;
-		try {
-			let effective;
-			if (typeof condition === "string") {
-				effective = acquireConditionCursor(parent);
-				resolveConditionText(state, effective, condition);
-				commitConditionCursor(state, effective);
-			} else if (parent) {
-				effective = acquireConditionCursor(parent);
-				const conditionKey = conditionTexts[condition + conditionKeyOffset] || "";
-				if (conditionKey) resolveConditionText(state, effective, conditionKey);
-				if (!(conditionNumbers[condition + conditionFlagsOffset] & conditionResolvedFlag)) setConditionUnresolved(effective);
-				commitConditionCursor(state, effective);
-			} else effective = condition;
-			const isObjectValue = value && typeof value === "object" && !Array.isArray(value) && !isVariable(value);
-			const objectHasDefault = isObjectValue && "default" in value;
-			const firstChild = isObjectValue && !objectHasDefault ? acquireConditionCursor(effective) : null;
-			if (isObjectValue && classifyConditionalObject(value, state, void 0, firstChild || void 0)) {
-				let useFirstChild = firstChild !== null;
-				for (const key in value) {
-					const payload = value[key];
-					if (payload == null) continue;
-					if (key === "default") emitUnderCondition(state, property, payload, effective, merge, payload, contextOnly, 2, payload);
-					else {
-						const keyWatermark = conditionCursorTop;
-						const child = useFirstChild ? firstChild : acquireConditionCursor(effective);
-						if (useFirstChild) useFirstChild = false;
-						else {
-							resolveConditionText(state, child, key);
-							commitConditionCursor(state, child);
-						}
-						emitUnderCondition(state, property, payload, child, merge, payload, contextOnly, 2, payload);
-						if (child !== firstChild) releaseConditionCursors(keyWatermark);
-					}
-				}
-				return true;
-			}
-			emitUnderCondition(state, property, value, effective, merge, originalValue, contextOnly, 2, value);
-			return true;
-		} finally {
-			releaseConditionCursors(watermark);
-		}
+		const parent2 = state.flatPass?.[passParentCursor] || null;
+		let effective;
+		if (typeof condition === "string") effective = conditionFromKey(state, condition, parent2);
+		else if (parent2) {
+			effective = conditionFromKey(state, condition[conditionKey], parent2);
+			if (!(condition[conditionValue] & conditionResolvedFlag)) setConditionUnresolved(effective);
+			commitCondition(effective);
+		} else effective = condition;
+		if (typeof value !== "string" && walkConditionalValue(state, property, value, effective, (payload, cursor, source) => emitUnderCondition(state, property, payload, cursor, payload, contextOnly, 2, source), 2)) return true;
+		emitUnderCondition(state, property, value, effective, originalValue, contextOnly, 2, value);
+		return true;
 	}
-	if ((webShadowParts[property] || legacyTransformParts.has(property)) && (typeof value === "string" && value.indexOf(":") !== -1 || value && typeof value === "object" && !Array.isArray(value) && !isVariable(value) && classifyConditionalObject(value, state))) {
+	const compositeKind = getConfigRevisionState(state.conf).propertyKind(property);
+	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;
 	}
-	if (value === "safe" && isSafeAreaKey(property)) {
-		const expanded = expandSafeAreaValue(property);
+	if (value === "safe") {
+		const expanded = getConfigRevisionState(state.conf).expandSafeArea(property);
 		if (expanded) {
 			state.flatUsesSafeArea = true;
-			for (const [key, resolved] of expanded) emitAtParentCondition(state, key, resolved, merge, originalValue ?? value, contextOnly);
+			for (const [key, resolved] of expanded) emitAtParentCondition(state, key, resolved, originalValue ?? value, contextOnly);
 			return true;
 		}
 	}
-	if (typeof value === "string") return contributeStyleString(state, property, value, merge, originalValue, contextOnly);
-	if (value && typeof value === "object" && !Array.isArray(value) && !isVariable(value) && contributeStyleObject(state, property, value, merge, contextOnly)) return true;
+	if (walkConditionalValue(state, property, value, state.flatPass?.[passParentCursor] || null, (payload, cursor, source) => cursor ? emitUnderCondition(state, property, payload, cursor, void 0, contextOnly, 1, source) : emitValue(state, property, payload, null, payload, contextOnly), 1)) return true;
 	if (value != null) {
-		emitAtParentCondition(state, property, value, merge, originalValue ?? value, contextOnly);
+		emitAtParentCondition(state, property, value, originalValue ?? value, contextOnly);
 		return true;
 	}
 	return false;
 }
 function clearDirectStyle(state, property) {
 	const direct = state;
-	const atomicKey = property.startsWith("transition") ? "transition" : webShadowParts[property] ? "boxShadow" : webTextShadowParts.has(property) ? "textShadow" : legacyTransformParts.has(property) ? "transform" : property;
-	clearFrameAtomic(state, atomicKey);
-	const used = direct.flatUsed;
-	if (used) delete used[atomicKey];
-	if (atomicKey === "transform") state.transformAccumulator = void 0;
-	if (state.style) delete state.style[atomicKey];
-	delete state.classNames[atomicKey];
-}
-const conditionTransportTag = /* @__PURE__ */ Symbol();
-const transportHasBase = 1;
-const transportBase = 2;
-const transportEntries = 3;
-const transportEntryWidth = 2;
-function isConditionTransport(value) {
-	return Array.isArray(value) && value[0] === conditionTransportTag;
-}
-function appendConditionEntry(transport, cursor, value) {
-	transport.push(value, conditionTexts[cursor + conditionKeyOffset] || "");
-}
-function acquireTransportCursor(state, transport, offset, parent) {
-	const cursor = acquireConditionCursor(parent);
-	const key = transport[offset + 1];
-	if (key) resolveConditionText(state, cursor, key);
-	commitConditionCursor(state, cursor);
-	return cursor;
-}
-function mergeConditionTransport(state, prev, cursor, value) {
-	let transport;
-	if (isConditionTransport(prev)) transport = prev;
-	else {
-		transport = [
-			conditionTransportTag,
-			false,
-			void 0
-		];
-		if (prev != null) {
-			const isObjectValue = typeof prev === "object" && !Array.isArray(prev) && !isVariable(prev);
-			const objectHasDefault = isObjectValue && "default" in prev;
-			const authoredWatermark = conditionCursorTop;
-			try {
-				const firstCursor = isObjectValue && !objectHasDefault ? acquireConditionCursor() : null;
-				if (isObjectValue && classifyConditionalObject(prev, state, void 0, firstCursor || void 0)) {
-					let useFirstCursor = firstCursor !== null;
-					for (const key in prev) {
-						const payload = prev[key];
-						if (payload == null) continue;
-						if (key === "default") {
-							transport[transportHasBase] = true;
-							transport[transportBase] = payload;
-							continue;
-						}
-						const watermark = conditionCursorTop;
-						const keyCursor = useFirstCursor ? firstCursor : acquireConditionCursor();
-						if (useFirstCursor) useFirstCursor = false;
-						else {
-							resolveConditionText(state, keyCursor, key);
-							commitConditionCursor(state, keyCursor);
-						}
-						appendConditionEntry(transport, keyCursor, payload);
-						if (keyCursor !== firstCursor) releaseConditionCursors(watermark);
-					}
-				} else {
-					transport[transportHasBase] = true;
-					transport[transportBase] = prev;
-				}
-			} finally {
-				releaseConditionCursors(authoredWatermark);
+	property = webStyleProperty(property);
+	const propertyKind = getConfigRevisionState(state.conf).propertyKind(property);
+	const atomicKey = property.startsWith("transition") ? "transition" : propertyKind > 0 && propertyKind < 5 ? "boxShadow" : propertyKind === 6 ? "textShadow" : propertyKind === 5 ? "transform" : property;
+	const slot = styleSlot(atomicKey);
+	direct.flatAtomics?.delete(slot);
+	if (direct.flatSlots) {
+		if (slot !== atomicKey) {
+			const entries = direct.flatSlots.get(slot);
+			if (entries) {
+				for (let index = entries.length; index--;) if (entries[index][0] === atomicKey) entries.splice(index, 1);
 			}
 		}
+		direct.flatSlots.delete(atomicKey);
 	}
-	const cursorKey = conditionTexts[cursor + conditionKeyOffset] || "";
-	for (let offset = transportEntries; offset < transport.length; offset += transportEntryWidth) if (transport[offset + 1] === cursorKey) {
-		transport.splice(offset, transportEntryWidth);
-		break;
-	}
-	appendConditionEntry(transport, cursor, value);
-	return transport;
-}
-const variantValueHandler = {
-	segment(ctx, start, end, isBase, valid, source, chainStart, chainEnd, chainValid) {
-		const state = ctx[0];
-		if (start === end) return;
-		if (isBase) {
-			if (!valid) return;
-			emitResolvedVariant(ctx[1], source.slice(start, end), state, ctx[2], null);
-			return;
-		}
-		if (!valid || !chainValid) return;
-		const cursor = state.flatScanCursor;
-		if (!(cursor && conditionNumbers[cursor + conditionFlagsOffset] & conditionResolvedFlag ? conditionNumbers[cursor + conditionValueOffset] : 0)) return;
-		emitResolvedVariant(ctx[1], source.slice(start, end), state, ctx[2], cursor);
-	},
-	modifier(ctx, start, end, valid, first, source) {
-		const directState = ctx[0];
-		let cursor = directState.flatScanCursor;
-		if (!cursor) cursor = directState.flatScanCursor = acquireConditionCursor();
-		else if (first) resetConditionCursor(cursor, 0);
-		if (!valid) {
-			setConditionUnresolved(cursor);
-			return;
-		}
-		if (conditionNumbers[cursor + conditionFlagsOffset] & conditionResolvedFlag) resolveConditionModifier(ctx[0], cursor, source.slice(start, end));
-	},
-	chain(ctx, _start, _end, valid) {
-		const cursor = ctx[0].flatScanCursor;
-		if (cursor) {
-			if (!valid) setConditionUnresolved(cursor);
-			if (conditionNumbers[cursor + conditionFlagsOffset] & conditionResolvedFlag) commitConditionCursor(ctx[0], cursor);
-		}
-		return true;
-	}
-};
-function emitMappedValue(styleState, key, value, originalValue, nestedCondition, parentCondition, fallbackOriginal) {
-	const nested = nestedCondition;
-	const parent = parentCondition;
-	let resolvedCondition = nested ?? parent;
-	const watermark = conditionCursorTop;
-	if (nested && parent) {
-		const composed = acquireConditionCursor(parent);
-		const nestedKey = conditionTexts[nested + conditionKeyOffset] || "";
-		if (nestedKey) resolveConditionText(styleState, composed, nestedKey);
-		if (!(conditionNumbers[nested + conditionFlagsOffset] & conditionResolvedFlag)) setConditionUnresolved(composed);
-		commitConditionCursor(styleState, composed);
-		resolvedCondition = composed;
-	}
-	const conf = styleState.conf;
-	if (key === "fontFamily" || key === conf.inverseShorthands.fontFamily) styleState.fontFamily = getFontFamilyFromNameOrVariable(value, conf);
-	mapContributedProp(styleState, key, value, originalValue ?? fallbackOriginal, resolvedCondition);
-	releaseConditionCursors(watermark);
-}
-const contributeMappedValue = (key, value, styleState, disabled, parentCondition, fallbackOriginal) => {
-	if (disabled) return emitMappedValue(styleState, key, value, void 0, void 0, parentCondition, fallbackOriginal);
-	const { conf, styleProps } = styleState;
-	const variants = styleState.flatStyleStaticConfig.variants;
-	const { disableExpandShorthands, noExpand, resolveValues } = styleProps;
-	const shorthands = conf.shorthands;
-	if (!noExpand) {
-		if (variants && key in variants) {
-			resolveVariants(key, value, styleProps, styleState, key);
-			return;
-		}
-	}
-	if (!disableExpandShorthands) {
-		if (key in shorthands) key = shorthands[key];
-	}
-	const originalValue = value;
-	if (value === "safe" && isSafeAreaKey(key)) {
-		const expanded = expandSafeAreaValue(key);
-		if (expanded) {
-			for (let i = 0; i < expanded.length; i++) {
-				const [nkey, nvalue] = expanded[i];
-				emitMappedValue(styleState, nkey, nvalue, originalValue, void 0, parentCondition, fallbackOriginal);
-			}
-			return;
-		}
-	}
-	if (value != null) {
-		if (typeof value === "string") value = isRemValue(value) ? resolveRem(value) : value;
-		else if (isVariable(value)) value = resolveVariableValue(key, value, resolveValues);
-		else if (isRemValue(value)) value = resolveRem(value);
-	}
-	if (value != null) {
-		if (key === "fontFamily" && typeof originalValue === "string") {
-			if (originalValue in conf.fontsParsed) styleState.fontFamily = originalValue;
-		}
-		const expanded = noExpand || typeof value === "string" ? null : expandStyle(key, value, conf.settings.styleCompat || "web");
-		if (expanded) {
-			const max = expanded.length;
-			for (let i = 0; i < max; i++) {
-				const [nkey, nvalue, noriginalValue] = expanded[i];
-				emitMappedValue(styleState, nkey, nvalue, noriginalValue ?? originalValue, void 0, parentCondition, fallbackOriginal);
-			}
-		} else emitMappedValue(styleState, key, value, originalValue, void 0, parentCondition, fallbackOriginal);
-	}
-};
-function resolveVariants(key, value, styleProps, styleState, parentVariantKey) {
-	const variantDefinition = styleState.flatStyleStaticConfig.variants?.[key];
-	if (isConditionTransport(value)) {
-		if (value[transportHasBase]) emitResolvedVariant(key, value[transportBase], styleState, parentVariantKey, null);
-		for (let offset = transportEntries; offset < value.length;) {
-			const entryValue = value[offset];
-			const watermark = conditionCursorTop;
-			try {
-				emitResolvedVariant(key, entryValue, styleState, parentVariantKey, acquireTransportCursor(styleState, value, offset, null));
-			} finally {
-				releaseConditionCursors(watermark);
-			}
-			offset += transportEntryWidth;
-		}
-		return;
-	}
-	if (typeof value === "string" && !(variantDefinition && typeof variantDefinition === "object" && value in variantDefinition)) {
-		const directState = styleState;
-		const watermark = conditionCursorTop;
-		const previousCursor = directState.flatScanCursor;
-		directState.flatScanCursor = null;
-		try {
-			scanFlatValue(value, variantValueHandler, [
-				styleState,
-				key,
-				parentVariantKey
-			]);
-		} finally {
-			directState.flatScanCursor = previousCursor;
-			releaseConditionCursors(watermark);
-		}
-		return;
-	}
-	const isObjectValue = value && typeof value === "object" && !Array.isArray(value) && !isVariable(value);
-	const objectHasDefault = isObjectValue && "default" in value;
-	const objectWatermark = conditionCursorTop;
-	try {
-		const firstCursor = isObjectValue && !objectHasDefault ? acquireConditionCursor() : null;
-		if (isObjectValue && classifyConditionalObject(value, styleState, void 0, firstCursor || void 0)) {
-			let useFirstCursor = firstCursor !== null;
-			for (const objKey in value) {
-				const payload = value[objKey];
-				if (payload == null) continue;
-				if (objKey === "default") {
-					emitResolvedVariant(key, payload, styleState, parentVariantKey, null);
-					continue;
-				}
-				const watermark = conditionCursorTop;
-				const cursor = useFirstCursor ? firstCursor : acquireConditionCursor();
-				conditionNumbers[cursor + conditionValueOffset];
-				if (useFirstCursor) useFirstCursor = false;
-				else {
-					resolveConditionText(styleState, cursor, objKey);
-					commitConditionCursor(styleState, cursor);
-				}
-				emitResolvedVariant(key, payload, styleState, parentVariantKey, cursor);
-				if (cursor !== firstCursor) releaseConditionCursors(watermark);
-			}
-			return;
-		}
-	} finally {
-		releaseConditionCursors(objectWatermark);
-	}
-	emitResolvedVariant(key, value, styleState, parentVariantKey, null);
+	if (atomicKey === "transform") state.transformAccumulator = void 0;
+	if (state.style) delete state.style[atomicKey];
+	delete state.classNames[atomicKey];
+	delete state.classNames[slot];
 }
-function emitResolvedVariant(key, value, styleState, parentVariantKey, conditionCursor) {
-	const { conf, debug } = styleState;
-	const styleProps = styleState.styleProps;
-	const variants = styleState.flatStyleStaticConfig.variants;
-	if (!variants) return;
-	const variant = variants[key];
-	let variantValue = getVariantDefinition(variant, value, conf, styleState);
-	if (!variantValue) return;
-	if (typeof variantValue === "function") {
-		const fn = variantValue;
-		const extras = getVariantExtras(styleState);
-		variantValue = fn(value, extras);
-		if (process.env.NODE_ENV === "development" && debug === "verbose" && true) {
-			console.groupCollapsed("   expanded functional variant", key);
-			console.info({
-				fn,
-				variantValue,
-				extras
-			});
-			console.groupEnd();
-		}
-	}
-	if (!isObj(variantValue)) return;
-	if (process.env.NODE_ENV === "development" && debug === "verbose") console.info(`   expanding styles from `, variantValue);
-	const { noSkip } = styleProps;
-	const originals = styleOriginalValues.get(variantValue);
-	for (const outputKey in variantValue) {
-		if (!noSkip && outputKey in skipProps) continue;
-		const rawOutputValue = variantValue[outputKey];
-		const outputValue = styleProps.noNormalize ? rawOutputValue : normalizeValueWithProperty(rawOutputValue, conf.shorthands[outputKey] || outputKey);
-		const originalValue = originals?.[outputKey] ?? rawOutputValue;
-		if (styleState.flatStyleStaticConfig.styledContextKeys?.has(outputKey)) {
-			styleState.overriddenContextProps ||= {};
-			styleState.overriddenContextProps[outputKey] = originalValue;
-			styleState.originalContextPropValues ||= {};
-			styleState.originalContextPropValues[outputKey] = originalValue;
-		}
-		contributeMappedValue(outputKey, outputValue, styleState, parentVariantKey === key && outputKey === key, conditionCursor || void 0, originalValue);
-	}
+function emitVariantStyle(state, key, value, original, condition, disabled) {
+	const pass = state.flatPass;
+	if (key !== pass[passMapSourceKey] && state.flatCallerVariantKeys?.has(key)) return;
+	if (state.flatStyleStaticConfig.styledContextKeys?.has(key)) (state.overriddenContextProps ||= {})[key] = (state.originalContextPropValues ||= {})[key] = original;
+	const parent = pass[passParentCursor];
+	pass[passParentCursor] = condition;
+	contributeProp(pass, key, value, original, disabled);
+	pass[passParentCursor] = parent;
 }
 function getFontFamilyFromNameOrVariable(input, conf) {
 	if (isVariable(input)) {
@@ -2240,5 +1569,5 @@ function getFontFamilyFromNameOrVariable(input, conf) {
 }
 const variableToFontNameCache = /* @__PURE__ */ new WeakMap();
 
-export { STYLE_TOKEN_PROVENANCE_KEY, clearDirectStyle, contributeStyleString, directStyleSignature, flushDirectStyles2 as flushDirectStyles, getDirectDynamicThemeAccess, getFontFamilyFromNameOrVariable, getSplitStyles, getStyleStaticConfig, getStyleTokenProvenance, isValidStyleKey, styleOriginalValues };
+export { STYLE_TOKEN_PROVENANCE_KEY, emitVariantStyle, getFontFamilyFromNameOrVariable, getSplitStyles, getStyleStaticConfig, getStyleTokenProvenance, isValidStyleKey, styleOriginalValues, walkConditionalValue };
 //# sourceMappingURL=getSplitStyles.mjs.map