@tamagui/web 3.0.0-beta.807.1 → 3.0.0-beta.881.1

package/dist/cjs/helpers/getSplitStyles.cjs

@@ -22,557 +22,244 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var getSplitStyles_exports = {};
 __export(getSplitStyles_exports, {
 	STYLE_TOKEN_PROVENANCE_KEY: () => import_styleProvenance2.STYLE_TOKEN_PROVENANCE_KEY,
-	clearDirectStyle: () => clearDirectStyle,
-	contributeStyleString: () => contributeStyleString,
-	directStyleSignature: () => import_directStyleCSS2.directStyleSignature,
-	flushDirectStyles: () => import_directStyleCSS2.flushDirectStyles,
-	getContextPropSet: () => getContextPropSet,
-	getDirectDynamicThemeAccess: () => getDirectDynamicThemeAccess,
+	emitVariantStyle: () => emitVariantStyle,
 	getFontFamilyFromNameOrVariable: () => getFontFamilyFromNameOrVariable,
 	getSplitStyles: () => getSplitStyles,
+	getStyleStaticConfig: () => import_styleStaticConfig.getStyleStaticConfig,
 	getStyleTokenProvenance: () => import_styleProvenance2.getStyleTokenProvenance,
 	isValidStyleKey: () => isValidStyleKey,
-	prepareStyleStaticConfig: () => prepareStyleStaticConfig,
-	styleOriginalValues: () => import_styleOriginalValues.styleOriginalValues
+	styleOriginalValues: () => import_styleOriginalValues.styleOriginalValues,
+	walkConditionalValue: () => walkConditionalValue
 });
 module.exports = __toCommonJS(getSplitStyles_exports);
 var import_constants = require("@tamagui/constants");
 var import_helpers = require("@tamagui/helpers");
+var import_runtime = require("@tamagui/style-grammar/runtime");
 var import_config = require("../config.cjs");
-var import_createVariable = require("../createVariable.cjs");
 var import_isDevTools = require("../constants/isDevTools.cjs");
-var import_mediaState = require("./mediaState.cjs");
+var import_defaultComponentState = require("../defaultComponentState.cjs");
+var import_createVariable = require("../createVariable.cjs");
 var import_types = require("../types.cjs");
-var import_runtime = require("@tamagui/style-grammar/runtime");
-var import_mediaState2 = require("./mediaState.cjs");
-var import_warnOnce = require("./warnOnce.cjs");
-var import_expandStyle = require("./expandStyle.cjs");
-var import_expandStyles = require("./expandStyles.cjs");
-var import_styleToCSS = require("./styleToCSS.cjs");
-var import_directStyleCSS = require("./directStyleCSS.cjs");
-var import_directStyleCSS2 = require("./directStyleCSS.cjs");
+var import_getCSSStylesAtomic = require("./getCSSStylesAtomic.cjs");
+require("./expandStyle.cjs");
+var import_borderComponents = require("./borderComponents.cjs");
+require("./expandStyles.cjs");
 var import_grammarConfig = require("./grammarConfig.cjs");
+var import_mediaState = require("./mediaState.cjs");
+var import_styleStaticConfig = require("./styleStaticConfig.cjs");
+require("./nativeStyleEngine.cjs");
+var import_warnOnce = require("./warnOnce.cjs");
 require("./getDynamicVal.cjs");
-var import_getDefaultProps = require("./getDefaultProps.cjs");
-require("./insertStyleRule.cjs");
-var import_isObj = require("./isObj.cjs");
-var import_isObj2 = require("./isObj.cjs");
+var import_styledDynamic = require("./styledDynamic.cjs");
+var import_insertStyleRule = require("./insertStyleRule.cjs");
 var import_log = require("./log.cjs");
-var import_normalizeStyle = require("./normalizeStyle.cjs");
 var import_normalizeColor = require("./normalizeColor.cjs");
 var import_normalizeValueWithProperty = require("./normalizeValueWithProperty.cjs");
 require("./parseNativeStyle.native.cjs");
 require("./parseNativeTransform.native.cjs");
-var import_getVariantExtras = require("./getVariantExtras.cjs");
-var import_resolveRem = require("./resolveRem.cjs");
-var import_resolveSafeArea = require("./resolveSafeArea.cjs");
-var import_resolveSafeAreaVariable = require("./resolveSafeAreaVariable.cjs");
 var import_resolveVariableValue = require("./resolveVariableValue.cjs");
-var import_themeRef = require("./themeRef.cjs");
-var import_tokenCategories = require("./tokenCategories.cjs");
 var import_skipProps = require("./skipProps.cjs");
 var import_styleOriginalValues = require("./styleOriginalValues.cjs");
 var import_styleProvenance = require("./styleProvenance.cjs");
+var import_themeRef = require("./themeRef.cjs");
 var import_transformsToString = require("./transformsToString.cjs");
+var import_style = require("../style.cjs");
 var import_styleProvenance2 = require("./styleProvenance.cjs");
 __reExport(getSplitStyles_exports, require("./tokenCategories.cjs"), module.exports);
-const TAMAGUI_CLASS_PROPS = "$$tamaguiClassProps";
 const shouldTrackStyleTokenProvenance = process.env.NODE_ENV === "development" && process.env.TAMAGUI_ENABLE_STYLE_TOKEN_PROVENANCE === "1";
-function compoundMatcherMatches(expected, actual) {
-	if (Array.isArray(expected)) {
-		for (let index = 0; index < expected.length; index++) if (expected[index] === actual) return true;
-		return false;
-	}
-	return expected === actual;
-}
-function compoundMatcherMatchesPayload(expected, source, start, end) {
-	if (Array.isArray(expected)) {
-		for (let index = 0; index < expected.length; index++) if (compoundMatcherMatchesPayload(expected[index], source, start, end)) return true;
-		return false;
-	}
-	const expectedValue = typeof expected === "string" ? expected : String(expected);
-	if (expectedValue.length !== end - start) return false;
-	for (let index = 0; index < expectedValue.length; index++) if (expectedValue.charCodeAt(index) !== source.charCodeAt(start + index)) return false;
-	return true;
-}
-const preparedCompoundsKey = /* @__PURE__ */ Symbol();
-function prepareStaticConfigCompounds(staticConfig) {
-	const compoundVariants = staticConfig.compoundVariants;
-	const preparedConfig = staticConfig;
-	if (!compoundVariants?.length) {
-		preparedConfig[preparedCompoundsKey] = null;
-		return;
-	}
-	const selectorCounts = [];
-	const indexesByKey = /* @__PURE__ */ Object.create(null);
-	indexesByKey[preparedCompoundsKey] = selectorCounts;
-	for (let index = 0; index < compoundVariants.length; index++) {
-		const compoundVariant = compoundVariants[index];
-		let selectorCount = 0;
-		for (const key in compoundVariant) {
-			if (key === "style") continue;
-			selectorCount++;
-			(indexesByKey[key] ||= []).push(index);
-		}
-		selectorCounts[index] = selectorCount;
-	}
-	preparedConfig[preparedCompoundsKey] = indexesByKey;
-}
-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 = conditionEmitFlag | 5;
-const conditionTextWidth = 5;
-const conditionKeyOffset = 0;
-const conditionSelectorOffset = 1;
-const conditionThemeOffset = 2;
-const conditionUnsupportedStateOffset = 3;
-const conditionUnresolvedNameOffset = 4;
-let conditionNumbers = 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 conditionWrapperCopy(cursor) {
-	const wrapper = conditionNumbers[cursor + conditionWrapperOffset];
-	const count = wrapper & 7;
-	if (!count) return void 0;
-	const start = wrapper >> 3;
-	const wrappers = new Array(count);
-	for (let index = 0; index < count; index++) wrappers[index] = conditionWrappers[start + index];
-	return wrappers;
-}
-function setConditionUnresolved(cursor, name = "") {
-	conditionNumbers[cursor + conditionFlagsOffset] &= ~conditionResolvedFlag;
-	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] &= ~conditionResolvedFlag;
+	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 = (0, import_grammarConfig.getConfigRevisionState)(state.conf).resolveCondition(authored);
+	if (!modifier) {
+		setConditionUnresolved(condition, authored);
+		return;
 	}
-	if (kind === import_runtime.modifierKindPlatform) {
-		const precedence2 = conditionNumbers[cursor + conditionPrecedenceOffset];
-		if (rank > precedence2 >>> 26) conditionNumbers[cursor + conditionPrecedenceOffset] = precedence2 & 67108863 | rank << 26;
-		if (!(0, import_constants.platformMatches)(name)) conditionNumbers[cursor + conditionFlagsOffset] &= ~(conditionActiveFlag | conditionEmitFlag);
+	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 === import_runtime.modifierKindMedia ? 0 : kind === 6 ? 1 : kind === import_runtime.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 buildCSS = import_directStyleCSS.canGenerateCSS && state.flatShouldDoClasses;
-	if (kind === import_runtime.modifierKindMedia) {
-		const query = (0, import_grammarConfig.getConfigRevisionState)(state.conf).mediaQueries[name];
-		if (!query) {
-			setConditionUnresolved(cursor, name);
-			return;
-		}
-		if (buildCSS) appendConditionWrapper(cursor, `@media ${query}`);
-		if (!state.flatMediaState?.[name]) conditionNumbers[cursor + conditionFlagsOffset] &= ~conditionActiveFlag;
+	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 = import_getCSSStylesAtomic.canGenerateCSS && state.flatShouldDoClasses;
+	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 === import_runtime.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] &= ~conditionActiveFlag;
-	} else if (kind === 5) {
-		const slash = name.indexOf("/");
-		const groupName = slash === -1 ? "true" : name.slice(slash + 1);
-		const stateSelector = import_runtime.stateModifierSelectors[rank];
-		const conditionStateName = import_runtime.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] &= ~conditionActiveFlag;
+		if (process.env.NODE_ENV === "development" && containerName && !component && !context && state.flatGroupContext?.[containerName]) (0, import_warnOnce.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 && (0, import_mediaState.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 = (0, import_grammarConfig.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]) (0, import_warnOnce.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 && (0, import_mediaState2.mediaKeyMatch)(containerSize, context.state.layout) : match)) conditionNumbers[cursor + conditionFlagsOffset] &= ~conditionActiveFlag;
-		(state.flatGroupKeys ||= /* @__PURE__ */ new Set()).add(groupKey);
-		(state.flatGroupMedia ||= /* @__PURE__ */ new Set()).add(containerSize);
-	} else {
-		const stateSelector = import_runtime.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] &= ~conditionActiveFlag;
-		if (stateSelector[0] === ":") (state.flatStateKeys ||= /* @__PURE__ */ new Set()).add(name);
-	}
-}
-function resolveConditionModifier(state, cursor, modifier) {
-	const compiled = (0, import_grammarConfig.getConfigRevisionState)(state.conf);
-	let code = compiled.modifiers[modifier];
-	let kind = code & 7;
-	let rank = code >> 3;
-	if (kind === import_runtime.modifierKindState) {
-		accumulateConditionAtom(state, cursor, kind, rank, import_runtime.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) === import_runtime.modifierKindState) {
-			rank = code >> 3;
-			const groupName = slash === -1 ? "true" : modifier.slice(slash + 1);
-			if (rank !== 6 && rank !== 7 && (slash === -1 || (0, import_runtime.isModifierName)(groupName, 0, groupName.length))) {
-				const stateName = import_runtime.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 ((0, import_runtime.isModifierName)(containerSize, 0, containerSize.length) && (slash === -1 || (0, import_runtime.isModifierName)(containerName, 0, containerName.length)) && ((code = compiled.modifiers[containerSize]) & 7) === import_runtime.modifierKindMedia && (containerQuery = compiled.mediaQueries[containerSize]) && (0, import_runtime.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);
-	}
-	return cursor;
-}
-function combineConditionKeys(state, first, second) {
-	if (!first) return second;
-	if (!second || first === second) return first;
-	const watermark = conditionCursorTop;
-	const target = acquireConditionKeyCursor(state, first);
-	resolveConditionText(state, target, second);
-	commitConditionCursor(state, target);
-	const key = conditionTexts[target + conditionKeyOffset] || "";
-	releaseConditionCursors(watermark);
-	return key;
-}
-function freshCompoundState() {
-	return {
-		seen: 0,
-		failed: false,
-		matchedBase: false,
-		scanned: false,
-		pending: null,
-		combinations: null
-	};
-}
-function beginCompoundEdges(indexes, states) {
-	if (!indexes) return;
-	for (let index = 0; index < indexes.length; index++) {
-		const state = states[indexes[index]] ||= freshCompoundState();
-		state.pending = null;
-		state.matchedBase = false;
-		state.scanned = false;
-	}
-}
-function feedCompoundSegment(state, source, start, end, isBase, valid, conditionKey) {
-	if (state.flatCompoundOutputDepth) return;
-	const pass = state.flatPass;
-	const indexes = pass[passCompoundIndexes];
-	const states = pass[passCompoundStates];
-	const key = pass[passCompoundKey];
-	if (!indexes || !states || !key) return;
-	const compoundVariants = state.staticConfig.compoundVariants;
-	for (let index = 0; index < indexes.length; index++) {
-		const compoundIndex = indexes[index];
-		const compoundState = states[compoundIndex] ||= freshCompoundState();
-		compoundState.scanned = true;
-		if (!valid || start === end || !compoundMatcherMatchesPayload(compoundVariants[compoundIndex][key], source, start, end)) continue;
-		if (isBase) compoundState.matchedBase = true;
-		else if (!compoundState.matchedBase) (compoundState.pending ||= []).push(conditionKey);
+	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;
 	}
+	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;
 }
-const compoundOnlyHandler = {
-	segment(state, start, end, isBase, valid, source, chainStart, chainEnd, chainValid) {
-		if (isBase) {
-			feedCompoundSegment(state, source, start, end, true, valid, "");
-			return;
-		}
-		const cursor = state.flatScanCursor;
-		if (!chainValid || !cursor || !(conditionNumbers[cursor + conditionFlagsOffset] & conditionResolvedFlag) || !conditionNumbers[cursor + conditionValueOffset]) {
-			feedCompoundSegment(state, source, start, end, false, false, "");
-			return;
-		}
-		feedCompoundSegment(state, source, start, end, false, valid, conditionTexts[cursor + conditionKeyOffset] || "");
-	},
-	modifier(state, start, end, valid, first, source) {
-		let cursor = state.flatScanCursor;
-		if (!cursor) cursor = state.flatScanCursor = acquireConditionCursor();
-		else if (first) resetConditionCursor(cursor, 0);
-		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;
-	}
-};
-function finishCompoundEdges(pass, key, value, indexes, states) {
-	if (!indexes) return;
-	const state = pass[passStyleState];
-	pass[passCompoundIndexes] = indexes;
-	pass[passCompoundKey] = key;
-	pass[passCompoundStates] = states;
-	let needsScan = false;
-	for (let index = 0; index < indexes.length; index++) if (!(states[indexes[index]] ||= freshCompoundState()).scanned) {
-		needsScan = true;
-		break;
-	}
-	if (needsScan) if (typeof value === "string") {
-		const watermark = conditionCursorTop;
-		const previousCursor = state.flatScanCursor;
-		state.flatScanCursor = null;
-		try {
-			(0, import_runtime.scanFlatValue)(value, compoundOnlyHandler, state);
-		} finally {
-			state.flatScanCursor = previousCursor;
-			releaseConditionCursors(watermark);
-		}
-	} else if (value && typeof value === "object" && !Array.isArray(value) && !(0, import_createVariable.isVariable)(value) && Object.prototype.hasOwnProperty.call(value, "default")) for (const conditionKey in value) {
-		const payload = value[conditionKey];
-		if (conditionKey === "default") {
-			const payloadString = String(payload);
-			feedCompoundSegment(state, payloadString, 0, payloadString.length, true, true, "");
-		} else {
-			const watermark = conditionCursorTop;
-			const cursor = acquireConditionCursor();
-			resolveConditionText(state, cursor, conditionKey);
-			const condition = commitConditionCursor(state, cursor);
-			const payloadString = String(payload);
-			feedCompoundSegment(state, payloadString, 0, payloadString.length, false, Boolean(condition), condition ? conditionTexts[cursor + conditionKeyOffset] || "" : "");
-			releaseConditionCursors(watermark);
-		}
-	}
-	else {
-		const variants2 = state.staticConfig.compoundVariants;
-		for (let index = 0; index < indexes.length; index++) {
-			const compoundIndex = indexes[index];
-			const compoundState = states[compoundIndex] ||= freshCompoundState();
-			compoundState.scanned = true;
-			if (compoundMatcherMatches(variants2[compoundIndex][key], value)) compoundState.matchedBase = true;
-		}
-	}
-	const variants = state.staticConfig.compoundVariants;
-	const selectorCounts = state.staticConfig[preparedCompoundsKey][preparedCompoundsKey];
-	for (let index = 0; index < indexes.length; index++) {
-		const compoundIndex = indexes[index];
-		const compoundState = states[compoundIndex];
-		if (compoundState.failed) continue;
-		const branches = compoundState.matchedBase ? [""] : compoundState.pending;
-		if (!branches || !branches.length) {
-			compoundState.failed = true;
-			continue;
-		}
-		if (!compoundState.seen) compoundState.combinations = branches;
-		else {
-			const previous = compoundState.combinations;
-			const next = [];
-			for (let left = 0; left < previous.length; left++) for (let right = 0; right < branches.length; right++) {
-				const conditionKey = combineConditionKeys(state, previous[left], branches[right]);
-				if (!next.includes(conditionKey)) next.push(conditionKey);
-			}
-			compoundState.combinations = next;
-		}
-		compoundState.seen++;
-		if (compoundState.seen !== selectorCounts[compoundIndex]) continue;
-		const style = variants[compoundIndex].style;
-		if (!(0, import_isObj.isPlainObject)(style)) continue;
-		const combinations = compoundState.combinations;
-		for (let combination = 0; combination < combinations.length; combination++) for (const styleKey in style) contributeProp(pass, styleKey, style[styleKey], void 0, states, combinations[combination]);
-	}
+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, firstCursor) {
-	if (Object.prototype.hasOwnProperty.call(value, "default")) return -1;
+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 passCompoundIndexes = 31;
-const passCompoundKey = 32;
-const passCompoundStates = 33;
-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;
@@ -581,102 +268,8 @@ const passHocFlag = 16;
 const passTextFlag = 32;
 const passInputFlag = 64;
 const passAsChildStyleFlag = 128;
-const styledDefaultsCache = /* @__PURE__ */ new WeakMap();
-function getStyledDefaults(staticConfig, shorthands) {
-	let prepared = styledDefaultsCache.get(staticConfig);
-	if (prepared === void 0) {
-		let entries = null;
-		const defaults = staticConfig.defaultProps;
-		if (defaults) for (const key in defaults) {
-			if (!(key in import_helpers.stylePropsAll || key in shorthands)) continue;
-			const value = defaults[key];
-			if (maybeStyleProgram(value)) (entries ||= []).push(key, value);
-		}
-		prepared = entries;
-		styledDefaultsCache.set(staticConfig, prepared);
-	}
-	return prepared;
-}
-const maybeStyleProgram = (value) => typeof value === "string" ? value.indexOf(":") !== -1 : !!value && typeof value === "object" && !Array.isArray(value) && !(0, import_createVariable.isVariable)(value);
-function contributeDisplacedStyledDefaults(styledDefaults, processedProps, pass) {
-	if (!styledDefaults) return;
-	for (let offset = 0; offset < styledDefaults.length; offset += 2) {
-		const key = styledDefaults[offset];
-		const value = styledDefaults[offset + 1];
-		const propValue = processedProps[key];
-		if (propValue !== void 0 && propValue !== value) contributeProp(pass, key, value);
-	}
-}
-function injectDisplacedStyledDefault(pass, key, value) {
-	const defaultValue = pass[4].defaultProps?.[key];
-	if (defaultValue === void 0 || value === void 0 || value === defaultValue || maybeStyleProgram(defaultValue)) return;
-	const state = pass[passStyleState];
-	state.flatWeakContribution = true;
-	try {
-		contributeProp(pass, key, defaultValue);
-	} finally {
-		state.flatWeakContribution = false;
-	}
-}
-function forEachPropInForwardOrder(pass) {
-	const styleState = pass[passStyleState];
-	const staticConfig = styleState.staticConfig;
-	const processedProps = styleState.props;
-	const shorthands = styleState.conf.shorthands;
-	const processedBaseStyle = staticConfig.baseStyle;
-	const styledDefaults = getStyledDefaults(staticConfig, shorthands);
-	const directState = styleState;
-	const preparedCompounds = staticConfig[preparedCompoundsKey];
-	if (preparedCompounds === void 0 && staticConfig.compoundVariants?.length) throw new Error("A component with compoundVariants reached style resolution before its static config was prepared.");
-	const conditionWrapperBase = conditionWrapperTop;
-	if (!preparedCompounds) {
-		try {
-			if (processedBaseStyle) for (const key in processedBaseStyle) contributeProp(pass, key, processedBaseStyle[key]);
-			contributeDisplacedStyledDefaults(styledDefaults, processedProps, pass);
-			for (const key in processedProps) {
-				const value = processedProps[key];
-				directState.flatPropSawCondition = false;
-				contributeProp(pass, key, value);
-				if (directState.flatPropSawCondition) injectDisplacedStyledDefault(pass, key, value);
-			}
-		} finally {
-			releaseConditionPayloads(conditionWrapperBase);
-		}
-		return;
-	}
-	const compoundVariants = staticConfig.compoundVariants;
-	const compoundStates = new Array(compoundVariants.length);
-	try {
-		if (processedBaseStyle) for (const key in processedBaseStyle) contributeProp(pass, key, processedBaseStyle[key]);
-		contributeDisplacedStyledDefaults(styledDefaults, processedProps, pass);
-		const selectorCounts = preparedCompounds[preparedCompoundsKey];
-		for (let compoundIndex = 0; compoundIndex < compoundVariants.length; compoundIndex++) {
-			if (selectorCounts[compoundIndex]) continue;
-			const style = compoundVariants[compoundIndex].style;
-			if (!(0, import_isObj.isPlainObject)(style)) continue;
-			for (const key in style) contributeProp(pass, key, style[key]);
-		}
-		for (const key in processedProps) {
-			const compoundIndexes = preparedCompounds[key];
-			const value = processedProps[key];
-			beginCompoundEdges(compoundIndexes, compoundStates);
-			directState.flatPropSawCondition = false;
-			contributeProp(pass, key, value, compoundIndexes, compoundStates);
-			if (directState.flatPropSawCondition) injectDisplacedStyledDefault(pass, key, value);
-			finishCompoundEdges(pass, key, value, compoundIndexes, compoundStates);
-		}
-	} finally {
-		releaseConditionPayloads(conditionWrapperBase);
-	}
-}
-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;
-	(0, import_directStyleCSS.completeStreamingCSS)(styleState);
-	(0, import_directStyleCSS.flushDirectStyles)(styleState, true);
+function isValidStyleKey(key, validStyles) {
+	return key in validStyles;
 }
 function effectiveLifecycleKeys(keys) {
 	if (!keys) return;
@@ -684,317 +277,254 @@ 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 import_helpers.stylePropsAll && !isValidStyleKey(key, validStyles, accept)) {
-			if (process.env.NODE_ENV === "development") console.warn(`[tamagui] "${key}" is a text style prop and this component is not text \u2014 it would render on neither platform. Use a Text-based component, or html.* for raw web elements.`);
-			return;
-		}
-		viewProps[key] = val;
-		return;
-	}
-	if (process.env.NODE_ENV === "development" && debug === "verbose") {
-		console.groupCollapsed("  💠 expanded", keyInit, "=>", key);
-		(0, import_log.log)(val);
-		console.groupEnd();
-	}
-	if (val == null) return;
-	if (accept && key in accept) {
-		viewProps[key] = val;
-		return;
-	}
-	const isHostStyleKey = 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}`);
-			(0, import_log.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 import_helpers.stylePropsAll && !isValidStyleKey(key, validStyles, accept)) {
-			if (process.env.NODE_ENV === "development") console.warn(`[tamagui] "${key}" is a text style prop and this component is not text \u2014 it would render on neither platform. Use a Text-based component, or html.* for raw web elements.`);
-			return;
-		}
-		viewProps[key] = val;
+	if (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, compoundIndexes, compoundStates, parentConditionKey) {
-	const parentWatermark = conditionCursorTop;
-	if (compoundIndexes) {
-		pass[passCompoundIndexes] = compoundIndexes;
-		pass[passCompoundKey] = keyOg;
-		pass[passCompoundStates] = compoundStates;
-	} else if (pass[passCompoundIndexes]) pass[passCompoundIndexes] = void 0;
-	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[import_skipProps.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") (0, import_warnOnce.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") (0, import_warnOnce.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);
+							(0, import_getCSSStylesAtomic.flushDirectStyles)(styleState, true);
 						}
+						pass[passShouldDoClasses] = false;
+						styleState.flatShouldDoClasses = false;
 					}
-					start = index + 1;
-				}
-				if (props[import_skipProps.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 = (0, import_normalizeStyle.normalizeStyle)(style, false, true);
-				const styleOriginals = shouldTrackStyleTokenProvenance ? import_styleOriginalValues.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" && typeof normalized[key] === "string" && normalized[key].indexOf(":") === -1) pass[passContainerName] = normalized[key];
-					if (key === "containerType" && typeof normalized[key] === "string" && normalized[key].indexOf(":") === -1) pass[passContainerType] = normalized[key];
-					contributeValue(styleState, key, normalized[key], mergeStyle, styleOriginals?.[key]);
-				}
+		return;
+	}
+	if (keyInit === import_skipProps.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 import_skipProps.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 ((0, import_style.isStylePiece)(style)) {
+				if (styleState.flatShouldDoClasses && applyStylePieceClasses(styleState, style, sourceLayerStyle)) continue;
+				const resolvedPiece = resolveStylePiece(styleState, style);
+				const pieceOriginals = shouldTrackStyleTokenProvenance ? import_styleOriginalValues.styleOriginalValues.get(style[import_types.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 ? import_styleOriginalValues.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]);
 			}
 		}
-		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 import_skipProps.skipProps));
-		const shouldPassThrough = shouldPassProp || isHOCShouldPassThrough;
-		if (process.env.NODE_ENV === "development" && debug === "verbose") {
-			console.groupCollapsed(`  \u{1F511} ${keyOg}${keyInit !== keyOg ? ` (shorthand for ${keyInit})` : ""} ${shouldPassThrough ? "(pass)" : ""}`);
-			(0, import_log.log)({
-				isVariant,
-				valInit,
-				shouldPassProp
-			});
-			if (import_constants.isClient) (0, import_log.log)({
-				variants,
-				variant: variants?.[keyInit],
-				isVariant,
-				isHOCShouldPassThrough,
-				parentStaticConfig
-			});
-		}
-		if (shouldPassThrough) {
-			passDownProp(viewProps, keyInit, valInit);
-			if (process.env.NODE_ENV === "development" && debug === "verbose") console.groupEnd();
-			if (!isVariant) return;
+		pass[passSourceLayer] = layerBeforeStyle;
+		return;
+	}
+	if (defaultProps) {
+		const defaultVal = defaultProps[keyOg] ?? defaultProps[keyInit];
+		if (defaultVal !== void 0 && valInit === defaultVal) return;
+	}
+	if (keyInit in import_skipProps.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 (shouldCheckSkipProps && !neverSkipProps?.[keyInit]) {
-			if (keyInit in import_skipProps.skipProps && !(keyInit === "transition" && typeof valInit === "string" && !driverAnimations?.[valInit])) {
-				if (process.env.NODE_ENV === "development" && debug === "verbose") console.groupEnd();
-				return;
-			}
+		if (keyInit === "testID") {
+			viewProps["data-testid"] = valInit;
+			return;
 		}
-		if (isTextOrInput) {
-			if (valInit && (keyInit === "fontFamily" || keyInit === shorthands["fontFamily"]) && valInit in conf.fontsParsed) styleState.fontFamily = valInit;
+		if (keyInit === "id") {
+			viewProps.id = valInit;
+			return;
 		}
-		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);
+	}
+	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 import_skipProps.skipProps));
+	const shouldPassThrough = shouldPassProp || isHOCShouldPassThrough;
+	if (process.env.NODE_ENV === "development" && debug === "verbose") {
+		console.groupCollapsed(`  \u{1F511} ${keyOg}${keyInit !== keyOg ? ` (shorthand for ${keyInit})` : ""} ${shouldPassThrough ? "(pass)" : ""}`);
+		(0, import_log.log)({
+			isVariant,
+			valInit,
+			shouldPassProp
+		});
+		if (import_constants.isClient) (0, import_log.log)({
+			variants,
+			variant: variants?.[keyInit],
+			isVariant,
+			isHOCShouldPassThrough,
+			parentStaticConfig: 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 import_skipProps.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;
+	}
+	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 {
-				(0, import_log.log)(` \u2714\uFE0F expand complete`, keyInit);
-				(0, import_log.log)("style", { ...styleState.style });
-				(0, import_log.log)("viewProps", { ...viewProps });
-				(0, import_log.log)("transforms", styleState.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 import_helpers.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 {
+			(0, import_log.log)(` \u2714\uFE0F expand complete`, keyInit);
+			(0, import_log.log)("style", { ...styleState.style });
+			(0, import_log.log)("viewProps", { ...viewProps });
+			(0, import_log.log)("transforms", styleState.transformAccumulator);
+		} catch {}
+		console.groupEnd();
 	}
 }
-const getSplitStyles = (props, staticConfig, theme, themeName, componentState, styleProps, parentSplitStyles, componentContext, groupContext, elementType, startedUnhydrated, debug, animationDriver) => {
+const getSplitStyles = (props, staticConfig, theme, themeName, componentState, styleProps, parentSplitStyles, componentContext, groupContext, elementType, startedUnhydrated, debug, animationDriver, styleStaticConfig) => {
 	const conf = (0, import_config.getConfig)();
-	if (staticConfig.styleFrontend?.normalizeStaticConfig) staticConfig = staticConfig.styleFrontend.normalizeStaticConfig(staticConfig, conf);
+	styleStaticConfig ||= (0, import_styleStaticConfig.getStyleStaticConfig)(staticConfig, conf);
 	const driver = animationDriver || componentContext?.animationDriver || conf.animations;
 	const driverAnimations = driver?.animations;
 	const driverInputStyle = driver?.inputStyle;
@@ -1002,7 +532,8 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
 	const resolvedDriver = driver?.isStub ? null : driver;
 	if (props.passThrough) return null;
 	const { shorthands } = conf;
-	const { isHOC, isText, isInput, variants, inlineProps, parentStaticConfig, acceptsClassName } = staticConfig;
+	const { isHOC, isText, isInput, inlineProps, parentStaticConfig, acceptsClassName } = staticConfig;
+	const variants = styleStaticConfig.variants;
 	const viewProps = {};
 	const mediaState = styleProps.mediaState || import_mediaState.mediaState;
 	let shouldDoClasses = !process.env.TAMAGUI_DID_OUTPUT_CSS && acceptsClassName && !styleProps.noClass;
@@ -1011,10 +542,10 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
 	let hasMedia = false;
 	let pseudoGroups;
 	let mediaGroups;
-	const staticPassthroughClassName = staticConfig.passthroughClassName || "";
+	const staticPassthroughClassName = styleStaticConfig.passthroughClassName || "";
 	let className = staticPassthroughClassName;
 	if (staticPassthroughClassName) shouldDoClasses = false;
-	const validStyles = staticConfig.validStyles || (staticConfig.isText || staticConfig.isInput ? import_helpers.stylePropsText : import_helpers.validStyles);
+	const validStyles = staticConfig.validStyles || (staticConfig.isInput ? import_helpers.stylePropsInput : staticConfig.isText ? import_helpers.stylePropsText : import_helpers.validStyles);
 	if (process.env.NODE_ENV === "development" && (debug === "profile" || globalThis.time)) time`split-styles-setup`;
 	const styleState = {
 		classNames,
@@ -1035,7 +566,7 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
 		flatGroupContext: groupContext,
 		animationDriver: resolvedDriver
 	};
-	if (import_directStyleCSS.canGenerateCSS && shouldDoClasses && styleProps.canPlatformPseudo) styleState.flatDeferCSS = true;
+	styleState.flatStyleStaticConfig = styleStaticConfig;
 	if (process.env.NODE_ENV === "development" && (debug === "profile" || globalThis.time)) time`style-state`;
 	if (process.env.NODE_ENV === "development" && debug === "verbose" && import_constants.isClient) {
 		if (import_isDevTools.isDevTools) {
@@ -1053,28 +584,22 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
 		}
 	}
 	const { asChild } = props;
-	const { accept, neverSkipProps } = staticConfig;
-	const { noSkip, disableExpandShorthands, noExpand, noClass, noMergeStyle, noNormalize, isAnimated, styledContext, styledContextKeys } = styleProps;
+	const { neverSkipProps } = staticConfig;
+	const { noSkip, disableExpandShorthands, noExpand, noClass, noMergeStyle, noNormalize, isAnimated, styledContext } = styleProps;
+	const styledContextKeys = styleStaticConfig.styledContextKeys;
 	const styleFrontend = staticConfig.styleFrontend;
 	let frontendGroup;
 	let frontendContainer;
 	let frontendContainerType;
 	const processedProps = props;
-	const parentVariants = parentStaticConfig?.variants;
-	const defaultProps = asChild ? (0, import_getDefaultProps.getDefaultProps)(staticConfig) : void 0;
+	const parentVariants = parentStaticConfig ? (0, import_styleStaticConfig.getStyleStaticConfig)(parentStaticConfig, conf).variants : void 0;
+	const defaultProps = asChild ? styleStaticConfig.defaultProps : void 0;
 	const asChildExceptStyleLike = asChild === "except-style" || asChild === "except-style-web";
 	let containerValue;
 	let containerName;
 	let containerType;
-	{
-		const authoredContainerName = processedProps.containerName;
-		const authoredContainerType = processedProps.containerType;
-		containerName = typeof authoredContainerName === "string" && authoredContainerName.indexOf(":") === -1 ? authoredContainerName : void 0;
-		containerType = typeof authoredContainerType === "string" && authoredContainerType.indexOf(":") === -1 ? authoredContainerType : void 0;
-	}
-	let hocMappedClassProperties;
-	let hocMappedClasses;
-	const stylePassFlags = (noSkip ? passNoSkipFlag : 0) | (disableExpandShorthands ? passDisableShorthandsFlag : 0) | (noExpand ? passNoExpandFlag : 0) | (noMergeStyle ? passNoMergeFlag : 0) | (isHOC ? passHocFlag : 0) | (isText ? passTextFlag : 0) | (isInput ? passInputFlag : 0) | (asChildExceptStyleLike ? passAsChildStyleFlag : 0);
+	containerName = processedProps.containerName;
+	containerType = processedProps.containerType;
 	const pass = [
 		styleState,
 		conf,
@@ -1082,7 +607,6 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
 		viewProps,
 		staticConfig,
 		validStyles,
-		accept,
 		neverSkipProps,
 		variants,
 		inlineProps,
@@ -1090,7 +614,7 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
 		styleFrontend,
 		styledContext,
 		styledContextKeys,
-		stylePassFlags,
+		(noSkip ? passNoSkipFlag : 0) | (disableExpandShorthands ? passDisableShorthandsFlag : 0) | (noExpand ? passNoExpandFlag : 0) | (noMergeStyle ? passNoMergeFlag : 0) | (isHOC ? passHocFlag : 0) | (isText ? passTextFlag : 0) | (isInput ? passInputFlag : 0) | (asChildExceptStyleLike ? passAsChildStyleFlag : 0),
 		debug,
 		parentStaticConfig,
 		defaultProps,
@@ -1104,50 +628,101 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
 		containerType,
 		frontendGroup,
 		frontendContainer,
-		frontendContainerType,
-		hocMappedClassProperties,
-		hocMappedClasses
+		frontendContainerType
 	];
 	styleState.flatPass = pass;
-	forEachPropInForwardOrder(pass);
-	[, , , , , , , , , , , , , , , , , , , , , className, shouldDoClasses, containerValue, containerName, containerType, frontendGroup, frontendContainer, frontendContainerType, hocMappedClassProperties, hocMappedClasses] = pass;
+	let conditionalStates = null;
+	let usesSafeArea = false;
+	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 = (0, import_styledDynamic.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]);
+			}
+		}
+		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, mergeStyle);
+		contributeValue(styleState, containerName ? "container" : "containerType", containerName ? `${containerName} / ${containerType}` : containerType);
 	}
 	if (process.env.NODE_ENV === "development" && (debug === "profile" || globalThis.time)) time`split-styles-propsend`;
-	const conditionalStates = styleState.flatStateKeys || null;
-	const usesSafeArea = !!styleState.flatUsesSafeArea;
-	if (styleState.flatMediaKeys?.size) {
-		if (!hasMedia) hasMedia = /* @__PURE__ */ new Set();
-		if (typeof hasMedia !== "boolean") for (const key of styleState.flatMediaKeys) hasMedia.add(key);
-	}
-	if (styleState.flatGroupKeys?.size) {
-		pseudoGroups ||= /* @__PURE__ */ new Set();
-		for (const key of styleState.flatGroupKeys) pseudoGroups.add(key);
-	}
-	if (styleState.flatGroupMedia?.size) {
-		mediaGroups ||= /* @__PURE__ */ new Set();
-		for (const key of styleState.flatGroupMedia) mediaGroups.add(key);
-	}
+	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", (0, import_runtime.finalizeTransformAccumulator)(styleState.transformAccumulator), 1, true);
+			mergeStyle(styleState, "transform", (0, import_runtime.finalizeTransformAccumulator)(styleState.transformAccumulator), true);
 			styleState.transformAccumulator = void 0;
 		}
-		convertDeferredInline(styleState, mergeStyle);
 	}
-	completeStreaming(styleState, mergeStyle);
+	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 = (0, import_insertStyleRule.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) {
-			(0, import_expandStyles.fixStyles)(styleState.style);
-			if (!noExpand && !noMergeStyle) (0, import_styleToCSS.styleToCSS)(styleState.style);
-		}
 		if (styleState.transformAccumulator && !styleState.flatShouldDoClasses) {
 			styleState.style ||= {};
 			styleState.style.transform = (0, import_runtime.finalizeTransformAccumulator)(styleState.transformAccumulator);
@@ -1166,7 +741,7 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
 		}
 	}
 	if (!noNormalize && !isHOC && (!isAnimated || driverInputStyle === "css") && Array.isArray(styleState.style?.transform)) styleState.style.transform = (0, import_transformsToString.transformsToString)(styleState.style.transform);
-	(0, import_directStyleCSS.flushDirectStyles)(styleState);
+	(0, import_getCSSStylesAtomic.flushDirectStyles)(styleState);
 	if (process.env.NODE_ENV === "development" && (debug === "profile" || globalThis.time)) time`split-styles-pre-result`;
 	if (shouldTrackStyleTokenProvenance && styleState.style && styleState.tokenProvenance) {
 		const provenance = {};
@@ -1194,7 +769,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)
@@ -1217,27 +792,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[import_skipProps.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[import_skipProps.HOC_CLASSNAME_MARKER] = classNames;
+				if (finalClassName) viewProps.className = finalClassName;
+				if (style) viewProps.style = style;
 			}
 		}
 	}
@@ -1263,9 +824,161 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
 	if (process.env.NODE_ENV === "development" && (debug === "profile" || globalThis.time)) time`split-styles-done`;
 	return result;
 };
-function mergeStyle(styleState, key, val, _importance, disableNormalize = false, originalVal) {
+const stylePieceStaticConfig = {
+	acceptsClassName: true,
+	isText: true,
+	validStyles: import_helpers.stylePropsAll
+};
+const compiledStylePieces = /* @__PURE__ */ new WeakMap();
+const compileStylePieceRuntime = (piece, layer) => {
+	const conf = (0, import_config.getConfigMaybe)();
+	if (!conf) return;
+	const themeName = Object.keys(conf.themes)[0] || "";
+	const theme = conf.themes[themeName] || {};
+	const definition = piece[import_types.stylePieceSymbol].styleObject;
+	const isBase = layer === "base";
+	const slots = {};
+	const split = getSplitStyles(isBase ? {} : { style: definition }, isBase ? {
+		...stylePieceStaticConfig,
+		baseStyle: definition,
+		disableBaseStylePiece: true
+	} : stylePieceStaticConfig, theme, themeName, import_defaultComponentState.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[import_types.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 (import_constants.isClient) (0, import_insertStyleRule.insertStyleRules)(split.rulesToInsert);
+};
+(0, import_style.setStylePieceCompiler)(compileStylePieceRuntime);
+(0, import_style.setStylePieceResolver)((piece, theme, themeName) => {
+	return getSplitStyles({ style: piece }, stylePieceStaticConfig, theme, themeName, import_defaultComponentState.defaultComponentStateMounted, {
+		isAnimated: false,
+		resolveValues: "value"
+	})?.style || {};
+});
+const resolvedStylePieceCache = /* @__PURE__ */ new WeakMap();
+function resolveStylePiece(styleState, piece) {
+	const definition = piece[import_types.stylePieceSymbol].styleObject;
+	if (!(0, import_style.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 && (0, import_config.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[import_types.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 = (0, import_insertStyleRule.getRulesForIdentifier)(identifier);
+		const shouldInsert = styleState.styleProps.isStatic || (0, import_insertStyleRule.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 (getContextPropSet(staticConfig)?.has(key)) {
+	if (styleState.flatStyleStaticConfig.styledContextKeys?.has(key)) {
 		styleState.overriddenContextProps ||= {};
 		const originalFromState = styleState.originalContextPropValues?.[key];
 		styleState.overriddenContextProps[key] = originalVal ?? originalFromState ?? val;
@@ -1275,12 +988,9 @@ function mergeStyle(styleState, key, val, _importance, disableNormalize = false,
 		(0, import_runtime.addTransformValue)(styleState.transformAccumulator, key, val);
 	} else {
 		const out = !disableNormalize && !styleProps.noNormalize ? (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(val, key) : val;
-		if (staticConfig.accept && key in staticConfig.accept) viewProps[key] = out;
-		else {
-			styleState.style ||= {};
-			styleState.style[key] = out;
-			if (shouldTrackStyleTokenProvenance) recordStyleTokenProvenance(styleState, key, originalVal);
-		}
+		styleState.style ||= {};
+		styleState.style[key] = out;
+		if (shouldTrackStyleTokenProvenance) recordStyleTokenProvenance(styleState, key, originalVal);
 	}
 }
 function recordStyleTokenProvenance(styleState, key, originalVal) {
@@ -1290,10 +1000,10 @@ function recordStyleTokenProvenance(styleState, key, originalVal) {
 		const opacity = slash === -1 ? NaN : Number(tokenName.slice(slash + 1));
 		if (Number.isInteger(opacity) && opacity >= 0 && opacity <= 100) tokenName = tokenName.slice(0, slash);
 	}
-	if (tokenName !== "" && (Object.prototype.hasOwnProperty.call(styleState.theme, tokenName) || Object.prototype.hasOwnProperty.call(styleState.conf.themes?.[styleState.flatThemeName || ""] || {}, tokenName) || Object.values(styleState.conf.tokensParsed).some((category) => Object.prototype.hasOwnProperty.call(category, tokenName)))) (styleState.tokenProvenance ||= {})[key] = originalVal;
+	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;
@@ -1306,13 +1016,10 @@ 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;
-	const mergeAccepted = (_state, key, value, _importance, disableNormalize, originalValue) => {
+	childState.flatPropertyLayers = void 0;
+	const mergeAccepted = (_state, key, value, disableNormalize, originalValue) => {
 		styleOut[key] = disableNormalize || styleProps.noNormalize ? value : (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(value, key);
 		const trackedOriginal = styleInOriginalValues?.[key] ?? originalValue;
 		if (trackedOriginal !== void 0) (originalValues ||= {})[key] = trackedOriginal;
@@ -1321,93 +1028,76 @@ const resolveAcceptedStyle = (styleState, styleIn) => {
 		const value = styleIn[key];
 		key = conf.shorthands[key] || key;
 		if (key in import_skipProps.skipProps || value == null) continue;
-		contributeValue(childState, key, value, mergeAccepted);
+		contributeValue(childState, key, value);
 	}
-	completeStreaming(childState, mergeAccepted);
+	completeResolvedStyles(childState, mergeAccepted);
 	if (childState.transformAccumulator) styleOut.transform = (0, import_runtime.finalizeTransformAccumulator)(childState.transformAccumulator);
-	if (!styleProps.noNormalize) (0, import_expandStyles.fixStyles)(styleOut);
 	if (originalValues) import_styleOriginalValues.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].property === property && transitions[index].identity === identity) {
-			transitions[index].value = value;
-			transitions[index].condition = condition;
-			return;
+	const slots = direct.flatSlots ||= /* @__PURE__ */ new Map();
+	const slot = import_getCSSStylesAtomic.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 & (recordInline | recordCSS)) !== (flags & (recordInline | recordCSS))) continue;
+		if (entry[0] !== property) continue;
+		if (flags & recordDefault) {
+			if (!(entryFlags & recordDefault) && (!entry[2] || entry[3] === identity)) return;
+		} else if (entryFlags & recordDefault && (!condition || entry[3] === identity)) {
+			list.splice(index--, 1);
+			continue;
+		}
+		if (entry[3] === identity) {
+			list.splice(index, 1);
+			break;
 		}
-		transitions.push({
-			property,
-			value,
-			condition,
-			identity,
-			selector: cursor ? conditionTexts[cursor + conditionSelectorOffset] || "" : "",
-			wrappers: cursor ? conditionWrapperCopy(cursor) : void 0
-		});
-		return;
 	}
-	(0, import_directStyleCSS.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, direct.flatWeakContribution === true, original);
+	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, 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) {
-		if (previous > importance) return;
-		if (direct.flatWeakContribution === true) return;
-	}
-	used[property] = importance;
-	merge(state, property, value, 1, !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 used = direct.flatUsed ||= {};
-	const consume = (entries) => {
-		for (let index = 0; index < entries.length; index++) {
-			const entry = entries[index];
-			const condition = entry.condition;
-			if (condition && !(condition & 1)) continue;
-			const importance = condition ? Math.floor(condition / 256) + 1 : 0;
-			const previous = used[entry.property];
-			if (previous !== void 0 && previous > importance) continue;
-			used[entry.property] = importance;
-			merge(state, entry.property, entry.value, 1, true, entry.original !== void 0 ? entry.original : entry.value);
-		}
-	};
-	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;
-}
-function completeStreaming(state, merge) {
+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 completeResolvedStyles(state, merge = mergeStyle) {
 	const direct = state;
 	const shadow = direct.flatWebShadow;
 	if (shadow && (direct.flatBoxShadowSequence || 0) <= shadow[4]) {
@@ -1418,275 +1108,83 @@ function completeStreaming(state, merge) {
 		const color = (0, import_normalizeColor.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;
 	}
-	(0, import_directStyleCSS.completeStreamingCSS)(state);
+	if (state.flatShouldDoClasses && state.transformAccumulator) {
+		const transform = (0, import_runtime.finalizeTransformAccumulator)(state.transformAccumulator);
+		state.transformAccumulator = void 0;
+		writeStyleRecord(state, "transform", Array.isArray(transform) ? (0, import_transformsToString.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) (0, import_getCSSStylesAtomic.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 (merge && property && condition) state.flatPropSawCondition = true;
-	if (!(conditionNumbers[cursor + conditionFlagsOffset] & conditionResolvedFlag)) {
-		if (warnMode && process.env.NODE_ENV === "development") (0, import_warnOnce.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") (0, import_warnOnce.warnRefusedValue)(property, warnSource, `unknown modifier "${cursor.problem}"`);
 		return 0;
 	}
-	const unsupportedState = conditionTexts[cursor + conditionUnsupportedStateOffset] || "";
-	if (warnMode && unsupportedState && process.env.NODE_ENV === "development") (0, import_warnOnce.warnOnce)(`${property}: "${unsupportedState}:" has no native component-state source; dropping the clause`);
-	if (merge && property && condition & 2 && (condition & 1 || import_directStyleCSS.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;
-			feedCompoundSegment(state, source, start, end, true, valid || failure === "invalid-character" || failure === "stray-comment-close", "");
-			if (!valid) {
-				if (failure === "invalid-character" || failure === "stray-comment-close") return 16;
-				if (process.env.NODE_ENV === "development") (0, import_warnOnce.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") (0, import_warnOnce.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") (0, import_warnOnce.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 directState = state;
-		const cursor = directState.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;
-		feedCompoundSegment(directState, source, start, end, false, valid && Boolean(condition), condition && directState.flatPass?.[passCompoundIndexes] ? conditionTexts[cursor + conditionKeyOffset] || "" : "");
-		if (!condition) return;
-		if (!valid) {
-			if (process.env.NODE_ENV === "development") (0, import_warnOnce.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") (0, import_warnOnce.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 import_helpers.tokenCategories.color || property in import_tokenCategories.tokenCategoryByProperty) && splitComponents(source.slice(lastPayloadStart)).length > 1) (0, import_warnOnce.warnOnce)(`${property}="${source}" has multiple values after its first conditional. Write the base value before the first conditional.`);
-		if ((!import_directStyleCSS.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 tokenLookup = {
-	value: void 0,
-	fromTheme: false,
-	themeKey: ""
+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") (0, import_warnOnce.warnRefusedValue)(property, source, formatScanFailure(failure, source, failureIndex));
 };
-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 = (0, import_tokenCategories.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);
-		for (const sibling of [
-			"color",
-			"space",
-			"size",
-			"radius",
-			"zIndex"
-		]) if (sibling !== category && state.conf.tokensParsed[sibling]?.[lookupName]) return;
-	} 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 = (0, import_grammarConfig.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 = (0, import_grammarConfig.getConfigRevisionState)(state.conf);
 	let name = raw;
 	let opacity;
 	const slash = raw.lastIndexOf("/");
@@ -1697,185 +1195,136 @@ function configuredValue(state, property, raw) {
 			opacity = amount;
 		}
 	}
-	const safeArea = (0, import_resolveSafeAreaVariable.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);
 	}
-	const lookup = tokenVariable(state, property, name);
-	if (!lookup || !(0, import_createVariable.isVariable)(lookup.value)) {
-		if (misses) misses.add(missKey);
-		if (process.env.NODE_ENV === "development" && import_tokenCategories.tokenCategoryByProperty[property] && state.conf.tokensParsed.color?.[name]) (0, import_warnOnce.warnOnce)(`"${name}" contributes to "color", not "${property}"; keeping it literal`);
-		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 `${import_themeRef.THEME_REF_PREFIX}${lookup.themeKey}${opacity !== void 0 ? `/${opacity}` : ""}`;
-	let value = (0, import_resolveVariableValue.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]) (0, import_warnOnce.warnOnce)(`"${name}" contributes to "color", not "${property}"`);
+	}
+	let out = raw;
+	if ((0, import_createVariable.isVariable)(value)) {
+		out = resolveValues === "except-theme" && fromTheme ? `${import_themeRef.THEME_REF_PREFIX}${lookupName}${opacity !== void 0 ? `/${opacity}` : ""}` : (0, import_resolveVariableValue.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) && !(import_getCSSStylesAtomic.canGenerateCSS && state.flatShouldDoClasses) && true)) return;
+	if (value === false && !condition) {
+		clearDirectStyle(state, property);
+		if (direct.flatStyleStaticConfig?.styledContextKeys?.has(property)) (state.overriddenContextProps ||= {})[property] = false;
+		return;
+	}
 	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;
 	}
-	if (import_directStyleCSS.canGenerateCSS && state.flatShouldDoClasses && !condition && property === "transform") {
+	if (import_getCSSStylesAtomic.canGenerateCSS && state.flatShouldDoClasses && !condition && property === "transform") {
 		if (process.env.NODE_ENV === "development" && state.transformAccumulator) for (const part of (0, import_runtime.getTransformPartKeys)(state.transformAccumulator)) (0, import_warnOnce.warnOnce)(`legacy transform part "${part}" is dropped because "transform" owns the property`);
 		state.transformAccumulator ||= (0, import_runtime.createTransformAccumulator)();
 		(0, import_runtime.addTransformValue)(state.transformAccumulator, property, value);
 		return;
 	}
-	const shouldPromoteAnimatedStyle = import_directStyleCSS.canGenerateCSS && !condition && !state.flatShouldDoClasses && !state.styleProps.noMergeStyle && state.styleProps.isAnimated && state.animationDriver?.inputStyle === "css" && property in import_helpers.nonAnimatableStyleProps;
-	if (import_directStyleCSS.canGenerateCSS && (state.flatShouldDoClasses || shouldPromoteAnimatedStyle)) {
-		if (!condition && state.style && direct.flatWeakContribution !== true && !(direct.flatUsed && direct.flatUsed[property])) delete state.style[property];
-		streamWriteCSS(state, property, value, cursor, originalValue);
+	const shouldPromoteAnimatedStyle = import_getCSSStylesAtomic.canGenerateCSS && !condition && !state.flatShouldDoClasses && !state.styleProps.noMergeStyle && state.styleProps.isAnimated && state.animationDriver?.inputStyle === "css" && property in import_helpers.nonAnimatableStyleProps;
+	if (import_getCSSStylesAtomic.canGenerateCSS && (state.flatShouldDoClasses || shouldPromoteAnimatedStyle)) {
+		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;
@@ -1883,126 +1332,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 (!import_directStyleCSS.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") (0, import_directStyleCSS.addComposition)(state, "translate");
-		else if (target.startsWith("--t-scale")) (0, import_directStyleCSS.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 || {
@@ -2010,613 +1352,246 @@ 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 = (0, import_grammarConfig.getConfigRevisionState)(state.conf);
+	property = webStyleProperty(property);
+	if (property === "backdropFilter") emitValue(state, "WebkitBackdropFilter", raw, cursor, originalValue, contextOnly);
 	if ((0, import_createVariable.isVariable)(raw)) raw = (0, import_resolveVariableValue.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:
-			(0, import_directStyleCSS.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 (import_directStyleCSS.canGenerateCSS && state.flatShouldDoClasses && !condition) {
-				state.transformAccumulator ||= (0, import_runtime.createTransformAccumulator)();
-				(0, import_runtime.addTransformValue)(state.transformAccumulator, property, value2);
-			} else if (condition && import_directStyleCSS.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 (import_getCSSStylesAtomic.canGenerateCSS && state.flatShouldDoClasses && !condition) {
+			state.transformAccumulator ||= (0, import_runtime.createTransformAccumulator)();
+			(0, import_runtime.addTransformValue)(state.transformAccumulator, property, value2);
+		} else if (condition && import_getCSSStylesAtomic.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 (import_directStyleCSS.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 (import_directStyleCSS.canGenerateCSS && state.flatShouldDoClasses) emitWebTextShadow(state, property, value2, merge, originalValue, contextOnly);
-			else streamWriteInline(state, property, value2, cursor, merge, originalValue, true);
+	}
+	if (property === "transform") {
+		if (import_getCSSStylesAtomic.canGenerateCSS && state.flatShouldDoClasses && Array.isArray(raw)) raw = (0, import_transformsToString.transformsToString)(raw);
+	}
+	if (typeof raw === "string" && property === "background") {
+		const parts = (0, import_borderComponents.splitComponents)(raw);
+		if (parts.length === 1 && !(0, import_borderComponents.startsValueFunction)(parts[0])) {
+			emitResolved(state, "backgroundColor", parts[0], cursor, originalValue, contextOnly);
 			return;
 		}
-		case emitKindTransform:
-			if (import_directStyleCSS.canGenerateCSS && state.flatShouldDoClasses && Array.isArray(raw)) raw = (0, import_transformsToString.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(import_themeRef.THEME_REF_PREFIX)) {
-				if (property === "rotate" && !Number.isFinite(numericUnitValue(value2, "deg", "rad"))) {
-					if (process.env.NODE_ENV === "development") (0, import_warnOnce.warnOnce)(`native transform "${property}" cannot represent "${value2}"; dropping it`);
-					if (condition & 1) {
-						(0, import_runtime.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(import_themeRef.THEME_REF_PREFIX)) {
+			if (property === "rotate" && !Number.isFinite(numericUnitValue(value2, "deg", "rad"))) {
+				if (process.env.NODE_ENV === "development") (0, import_warnOnce.warnOnce)(`native transform "${property}" cannot represent "${value2}"; dropping it`);
+				if (condition & 1) {
+					(0, import_runtime.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 (!import_getCSSStylesAtomic.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") (0, import_getCSSStylesAtomic.addComposition)(state, "translate");
+			else if (target.startsWith("--t-scale")) (0, import_getCSSStylesAtomic.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;
 		else if (value !== "" && Number.isFinite(Number(value))) value = Number(value);
 	}
-	if (import_directStyleCSS.canGenerateCSS && state.flatShouldDoClasses && property === "boxShadow" && !condition) {
+	if (import_getCSSStylesAtomic.canGenerateCSS && state.flatShouldDoClasses && property === "boxShadow" && !condition) {
 		state.flatBoxShadow = value;
 		state.flatBoxShadowSequence = frameSequence + 1;
 	}
-	const expanded = state.styleProps.noExpand ? null : (0, import_expandStyle.expandStyle)(property, value, state.conf.settings.styleCompat || "web");
-	if (!expanded) {
-		emitProperty(state, property, value, cursor, merge, originalValue, contextOnly);
-		return;
+	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`;
 	}
-	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);
+	emitProperty(state, property, value, cursor, 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 {
-		(0, import_runtime.scanFlatValue)(source, directStyleHandler, state, property, merge, originalValue, contextOnly);
-	} finally {
-		directState.flatScanCursor = previousCursor;
-		directState.flatExpectMulti = previousExpectMulti;
-		releaseConditionCursors(watermark);
-	}
-	return true;
-}
-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 directState = state;
-	const parent = directState.flatPass?.[passParentCursor] || null;
-	const hasDefault = Object.prototype.hasOwnProperty.call(value, "default");
+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) {
-		const baseString = String(base);
-		feedCompoundSegment(directState, baseString, 0, baseString.length, true, true, "");
-		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 = (0, import_grammarConfig.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") (0, import_warnOnce.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 (payload != null) {
-			conditions |= emitUnderCondition(state, property, payload, cursor, merge, payload, contextOnly, 1, payload);
-			const payloadString = String(payload);
-			feedCompoundSegment(directState, payloadString, 0, payloadString.length, false, Boolean(condition), condition && directState.flatPass?.[passCompoundIndexes] ? conditionTexts[cursor + conditionKeyOffset] || "" : "");
+		if (process.env.NODE_ENV !== "production") lastPayload = value.slice(lastPayloadStart);
+	} else {
+		if (!value || typeof value !== "object" || Array.isArray(value) || (0, import_createVariable.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]);
 		}
-		releaseConditionCursors(watermark);
 	}
-	if (!hasDefault && firstCondition) return false;
-	if ((!import_directStyleCSS.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 && (0, import_grammarConfig.getConfigRevisionState)(state.conf).tokenCategory(property) && (0, import_borderComponents.splitComponents)(lastPayload).length > 1) (0, import_warnOnce.warnOnce)(`${property}="${value}" has multiple values after its first conditional. Write the base value before the first conditional.`);
+	if (warnMode === 1 && (!import_getCSSStylesAtomic.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.hasBase) contributeValue(state, property, value.base, merge, value.base, contextOnly);
-		for (let offset = 0; offset < value.entries.length;) {
-			const entryValue = value.entries[offset];
-			const watermark = conditionCursorTop;
-			try {
-				emitUnderCondition(state, property, entryValue, acquireTransportCursor(state, value.entries, 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) && !(0, import_createVariable.isVariable)(value);
-			const objectHasDefault = isObjectValue && Object.prototype.hasOwnProperty.call(value, "default");
-			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) && !(0, import_createVariable.isVariable)(value) && classifyConditionalObject(value, state))) {
+	const compositeKind = (0, import_grammarConfig.getConfigRevisionState)(state.conf).propertyKind(property);
+	if (compositeKind > 0 && compositeKind < 6 && (typeof value === "string" && value.indexOf(":") !== -1 || value && typeof value === "object" && !Array.isArray(value) && !(0, import_createVariable.isVariable)(value) && classifyConditionalObject(value, state))) {
 		if (process.env.NODE_ENV === "development") (0, import_warnOnce.warnOnce)(`conditional "${property}" needs its composite property; dropping it`);
 		return true;
 	}
-	if (value === "safe" && (0, import_resolveSafeArea.isSafeAreaKey)(property)) {
-		const expanded = (0, import_resolveSafeArea.expandSafeAreaValue)(property);
+	if (value === "safe") {
+		const expanded = (0, import_grammarConfig.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) && !(0, import_createVariable.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;
-	(0, import_directStyleCSS.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 conditionTransports = /* @__PURE__ */ new WeakSet();
-function isConditionTransport(value) {
-	return typeof value === "object" && value !== null && conditionTransports.has(value);
-}
-const transportEntryWidth = 2;
-function appendConditionEntry(entries, cursor, value) {
-	entries.push(value, conditionTexts[cursor + conditionKeyOffset] || "");
-}
-function acquireTransportCursor(state, entries, offset, parent) {
-	const cursor = acquireConditionCursor(parent);
-	const key = entries[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 = {
-			hasBase: false,
-			base: void 0,
-			entries: []
-		};
-		conditionTransports.add(transport);
-		if (prev != null) {
-			const isObjectValue = typeof prev === "object" && !Array.isArray(prev) && !(0, import_createVariable.isVariable)(prev);
-			const objectHasDefault = isObjectValue && Object.prototype.hasOwnProperty.call(prev, "default");
-			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.hasBase = true;
-							transport.base = payload;
-							continue;
-						}
-						const watermark = conditionCursorTop;
-						const keyCursor = useFirstCursor ? firstCursor : acquireConditionCursor();
-						if (useFirstCursor) useFirstCursor = false;
-						else {
-							resolveConditionText(state, keyCursor, key);
-							commitConditionCursor(state, keyCursor);
-						}
-						appendConditionEntry(transport.entries, keyCursor, payload);
-						if (keyCursor !== firstCursor) releaseConditionCursors(watermark);
-					}
-				} else {
-					transport.hasBase = true;
-					transport.base = prev;
-				}
-			} finally {
-				releaseConditionCursors(authoredWatermark);
+	property = webStyleProperty(property);
+	const propertyKind = (0, import_grammarConfig.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 = 0; offset < transport.entries.length; offset += transportEntryWidth) if (transport.entries[offset + 1] === cursorKey) {
-		transport.entries.splice(offset, transportEntryWidth);
-		break;
-	}
-	appendConditionEntry(transport.entries, cursor, value);
-	return transport;
-}
-const variantValueHandler = {
-	segment(ctx, start, end, isBase, valid, source, chainStart, chainEnd, chainValid) {
-		const state = ctx[0];
-		const directState = state;
-		if (start === end) return;
-		if (isBase) {
-			feedCompoundSegment(directState, source, start, end, true, valid, "");
-			if (!valid) return;
-			emitResolvedVariant(ctx[1], source.slice(start, end), state, ctx[2], null);
-			return;
-		}
-		if (!valid || !chainValid) return;
-		const cursor = directState.flatScanCursor;
-		const condition = cursor && conditionNumbers[cursor + conditionFlagsOffset] & conditionResolvedFlag ? conditionNumbers[cursor + conditionValueOffset] : 0;
-		feedCompoundSegment(directState, source, start, end, false, Boolean(condition), condition && directState.flatPass?.[passCompoundIndexes] ? conditionTexts[cursor + conditionKeyOffset] || "" : "");
-		if (!condition) 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;
-	}
-};
-const contextPropSets = /* @__PURE__ */ new WeakMap();
-function getContextPropSet(staticConfig) {
-	const cached = contextPropSets.get(staticConfig);
-	if (cached !== void 0) return cached;
-	const contextConfig = staticConfig.context || staticConfig.parentStaticConfig?.context;
-	const inheritedContextPropKeys = !staticConfig.context || staticConfig.context === staticConfig.parentStaticConfig?.context ? staticConfig.parentStaticConfig?.contextProps : void 0;
-	const contextPropKeys = staticConfig.contextProps || inheritedContextPropKeys;
-	let set = null;
-	if (contextConfig?.props) {
-		set ||= /* @__PURE__ */ new Set();
-		for (const key in contextConfig.props) set.add(key);
-	}
-	if (contextPropKeys) {
-		set ||= /* @__PURE__ */ new Set();
-		for (const key of contextPropKeys) set.add(key);
-	}
-	if (contextConfig?.propKeys) {
-		set ||= /* @__PURE__ */ new Set();
-		for (const key of contextConfig.propKeys) set.add(key);
-	}
-	const parentPropKeys = staticConfig.parentStaticConfig?.context?.propKeys;
-	if (parentPropKeys) {
-		set ||= /* @__PURE__ */ new Set();
-		for (const key of parentPropKeys) set.add(key);
-	}
-	contextPropSets.set(staticConfig, set);
-	return set;
-}
-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, staticConfig } = styleState;
-	const { variants } = staticConfig;
-	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" && (0, import_resolveSafeArea.isSafeAreaKey)(key)) {
-		const expanded = (0, import_resolveSafeArea.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 = (0, import_resolveRem.isRemValue)(value) ? (0, import_resolveRem.resolveRem)(value) : value;
-		else if ((0, import_createVariable.isVariable)(value)) value = (0, import_resolveVariableValue.resolveVariableValue)(key, value, resolveValues);
-		else if ((0, import_resolveRem.isRemValue)(value)) value = (0, import_resolveRem.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 : (0, import_expandStyle.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.staticConfig.variants?.[key];
-	if (isConditionTransport(value)) {
-		if (value.hasBase) emitResolvedVariant(key, value.base, styleState, parentVariantKey, null);
-		for (let offset = 0; offset < value.entries.length;) {
-			const entryValue = value.entries[offset];
-			const watermark = conditionCursorTop;
-			try {
-				emitResolvedVariant(key, entryValue, styleState, parentVariantKey, acquireTransportCursor(styleState, value.entries, 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 {
-			(0, import_runtime.scanFlatValue)(value, variantValueHandler, [
-				styleState,
-				key,
-				parentVariantKey
-			]);
-		} finally {
-			directState.flatScanCursor = previousCursor;
-			releaseConditionCursors(watermark);
-		}
-		return;
-	}
-	const isObjectValue = value && typeof value === "object" && !Array.isArray(value) && !(0, import_createVariable.isVariable)(value);
-	const objectHasDefault = isObjectValue && Object.prototype.hasOwnProperty.call(value, "default");
-	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;
-				const directState = styleState;
-				const payloadString = String(payload);
-				if (objKey === "default") {
-					feedCompoundSegment(directState, payloadString, 0, payloadString.length, true, true, "");
-					emitResolvedVariant(key, payload, styleState, parentVariantKey, null);
-					continue;
-				}
-				const watermark = conditionCursorTop;
-				const cursor = useFirstCursor ? firstCursor : acquireConditionCursor();
-				let condition = conditionNumbers[cursor + conditionValueOffset];
-				if (useFirstCursor) useFirstCursor = false;
-				else {
-					resolveConditionText(styleState, cursor, objKey);
-					condition = commitConditionCursor(styleState, cursor);
-				}
-				if (directState.flatPass?.[passCompoundIndexes]) feedCompoundSegment(directState, payloadString, 0, payloadString.length, false, Boolean(condition), condition ? conditionTexts[cursor + conditionKeyOffset] || "" : "");
-				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 { staticConfig, conf, debug } = styleState;
-	const styleProps = styleState.styleProps;
-	const { variants } = staticConfig;
-	if (!variants) return;
-	const variant = variants[key];
-	let variantValue = getVariantDefinition(variant, value, conf, styleState);
-	if (process.env.NODE_ENV === "development" && debug === "verbose") {
-		console.groupCollapsed(`\u2666\uFE0F\u2666\uFE0F\u2666\uFE0F resolve variant ${key}`);
-		console.info({
-			key,
-			value,
-			variantValue,
-			variants
-		});
-		console.groupEnd();
-	}
-	if (!variantValue) {
-		if (process.env.TAMAGUI_WARN_ON_MISSING_VARIANT === "1") {
-			if (typeof value !== "boolean") {
-				const name = styleState.styleProps.displayName || "[UnnamedComponent]";
-				console.warn(`No variant found: ${name} has variant "${key}", but no matching value "${value}"`);
-			}
-		}
-		return;
-	}
-	if (typeof variantValue === "function") {
-		const fn = variantValue;
-		const extras = (0, import_getVariantExtras.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 (!(0, import_isObj2.isObj)(variantValue)) return;
-	if (process.env.NODE_ENV === "development" && debug === "verbose") console.info(`   expanding styles from `, variantValue);
-	const { noSkip } = styleProps;
-	const originals = import_styleOriginalValues.styleOriginalValues.get(variantValue);
-	const directState = styleState;
-	directState.flatCompoundOutputDepth = (directState.flatCompoundOutputDepth || 0) + 1;
-	try {
-		for (const outputKey in variantValue) {
-			if (!noSkip && outputKey in import_skipProps.skipProps) continue;
-			const rawOutputValue = variantValue[outputKey];
-			const outputValue = styleProps.noNormalize ? rawOutputValue : (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(rawOutputValue, conf.shorthands[outputKey] || outputKey);
-			const originalValue = originals?.[outputKey] ?? rawOutputValue;
-			if (getContextPropSet(staticConfig)?.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);
-		}
-	} finally {
-		directState.flatCompoundOutputDepth--;
-	}
+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 ((0, import_createVariable.isVariable)(input)) {
@@ -2632,83 +1607,3 @@ function getFontFamilyFromNameOrVariable(input, conf) {
 	} else if (typeof input === "string" && input in conf.fontsParsed) return input;
 }
 const variableToFontNameCache = /* @__PURE__ */ new WeakMap();
-function getVariantDefinition(variant, value, conf, { theme }) {
-	if (!variant) return;
-	if (value === void 0) return;
-	if (typeof variant === "function") return variant;
-	if (Object.prototype.hasOwnProperty.call(variant, value)) return variant[value];
-	for (const { key, parts } of getCompiledVariantResolvers(variant)) for (const part of parts) if (matchesVariantResolver(part, value, conf, theme)) return variant[key];
-}
-const variantResolverNameSet = new Set(import_types.variantResolverNames);
-const variantResolverCache = /* @__PURE__ */ new WeakMap();
-const preparedStyleStaticConfigs = /* @__PURE__ */ new WeakSet();
-function prepareStyleStaticConfig(staticConfig) {
-	if (preparedStyleStaticConfigs.has(staticConfig)) return staticConfig;
-	preparedStyleStaticConfigs.add(staticConfig);
-	getContextPropSet(staticConfig);
-	prepareStaticConfigCompounds(staticConfig);
-	const variants = staticConfig.variants;
-	if (variants) for (const key in variants) {
-		const variant = variants[key];
-		if (variant && typeof variant === "object") getCompiledVariantResolvers(variant);
-	}
-	return staticConfig;
-}
-function getCompiledVariantResolvers(variant) {
-	let cached = variantResolverCache.get(variant);
-	if (cached) return cached;
-	const compiled = [];
-	for (const key in variant) {
-		const parts = parseVariantResolverKey(key);
-		if (parts) compiled.push({
-			key,
-			parts
-		});
-	}
-	variantResolverCache.set(variant, compiled);
-	return compiled;
-}
-function parseVariantResolverKey(key) {
-	if (!key) return null;
-	const parts = [];
-	let start = 0;
-	for (let index = 0; index <= key.length; index++) {
-		if (index !== key.length && key.charCodeAt(index) !== 124) continue;
-		let partStart = start;
-		let partEnd = index;
-		while (partStart < partEnd && key.charCodeAt(partStart) <= 32) partStart++;
-		while (partEnd > partStart && key.charCodeAt(partEnd - 1) <= 32) partEnd--;
-		if (partStart === partEnd) return null;
-		const part = key.slice(partStart, partEnd);
-		if (!variantResolverNameSet.has(part)) return null;
-		parts.push(part);
-		start = index + 1;
-	}
-	return parts;
-}
-function hasNumericPrefix(value, suffixLength) {
-	if (value.length <= suffixLength) return false;
-	return Number.isFinite(Number(value.slice(0, value.length - suffixLength)));
-}
-function matchesVariantResolver(resolverName, value, conf, theme) {
-	const string = typeof value === "string";
-	const number = typeof value === "number";
-	const rem = string && value.endsWith("rem") && hasNumericPrefix(value, 3);
-	switch (resolverName) {
-		case "Size":
-		case "Space":
-		case "Radius":
-		case "ZIndex": return value === true || number || string || resolverName !== "Size" && (0, import_createVariable.isVariable)(value);
-		case "Color": return value != null && value in conf.tokensParsed.color || string;
-		case "Theme": return string && !!theme && value in theme;
-		case "FontSize": return value === true || !!conf.fontsParsed.body?.size?.[value] || number || rem;
-		case "FontStyle": return !!conf.fontsParsed.body?.style?.[value] || value === "normal" || value === "italic";
-		case "FontTransform": return !!conf.fontsParsed.body?.transform?.[value] || value === "none" || value === "capitalize" || value === "uppercase" || value === "lowercase";
-		case "FontLineHeight": return !!conf.fontsParsed.body?.lineHeight?.[value] || number || rem;
-		case "FontLetterSpacing": return !!conf.fontsParsed.body?.letterSpacing?.[value] || number || rem;
-		case "number":
-		case "string":
-		case "boolean": return typeof value === resolverName;
-		case "any": return true;
-	}
-}