@tamagui/web 3.0.0-beta.669.1 → 3.0.0-beta.728.1

package/dist/cjs/helpers/directStyle.cjs

@@ -1,4 +1,3 @@
-
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -28,9 +27,9 @@ __export(directStyle_exports, {
 	contributeVariantClauseValue: () => contributeVariantClauseValue,
 	directStyleSignature: () => directStyleSignature,
 	flushDirectStyles: () => flushDirectStyles,
-	getCondition: () => getCondition,
 	getDirectDynamicThemeAccess: () => getDirectDynamicThemeAccess,
-	platformMatches: () => platformMatches
+	platformMatches: () => platformMatches,
+	resolveClauseChain: () => resolveClauseChain
 });
 module.exports = __toCommonJS(directStyle_exports);
 var import_constants = require("@tamagui/constants");
@@ -41,9 +40,9 @@ var import_useMedia = require("../hooks/useMedia.cjs");
 var import_warnOnce = require("./warnOnce.cjs");
 var import_expandStyle = require("./expandStyle.cjs");
 var import_getCSSStylesAtomic = require("./getCSSStylesAtomic.cjs");
+var import_grammarConfig = require("./grammarConfig.cjs");
 var import_getDynamicVal = require("./getDynamicVal.cjs");
 var import_insertStyleRule = require("./insertStyleRule.cjs");
-var import_mediaObjectToString = require("./mediaObjectToString.cjs");
 var import_normalizeColor = require("./normalizeColor.cjs");
 require("./parseNativeStyle.native.cjs");
 require("./parseNativeTransform.native.cjs");
@@ -53,18 +52,54 @@ var import_resolveSafeArea = require("./resolveSafeArea.cjs");
 var import_resolveVariableValue = require("./resolveVariableValue.cjs");
 var import_themeRef = require("./themeRef.cjs");
 var import_transformsToString = require("./transformsToString.cjs");
-const stateSelectors = {
-	hover: ":hover",
-	press: ":active",
-	focus: ":focus",
-	"focus-visible": ":focus-visible",
-	"focus-within": ":focus-within",
-	disabled: "[aria-disabled]",
-	open: "[data-state=\"open\"]",
-	checked: "[data-state=\"checked\"]",
-	highlighted: "[data-highlighted]",
-	selected: "[data-state=\"active\"]",
-	invalid: "[aria-invalid=\"true\"]"
+const directStyleHandler = {
+	segment(state, start, end, isBase, valid, source, chainStart, chainEnd, chainValid, chainCount, _result, failure, failureIndex, property, merge, originalValue, contextOnly) {
+		if (isBase) {
+			if (start === end) return;
+			if (!valid) {
+				if (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;
+			}
+			const value = source.slice(start, end);
+			emitValue(state, property, value, 0, "", void 0, "", "", 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 condition = resolveClauseChain(state, source, chainStart, chainEnd, property, void 0, valid ? merge : void 0, void 0, contextOnly, start, end, 1);
+		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);
+	},
+	chain() {
+		return true;
+	},
+	end(state, source, result, lastPayloadStart, chainCount, property, merge, originalValue, contextOnly) {
+		let hasBase = !!(result & 1);
+		if (result & 8 && chainCount === 1) {
+			emitValue(state, property, source, 0, "", void 0, "", "", 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_constants.isWeb || !state.flatShouldDoClasses) && result & 2 && !hasBase) {
+			const value = property === "opacity" ? 1 : property === "scale" || property === "scaleX" || property === "scaleY" ? 1 : property === "rotate" ? "0deg" : property === "x" || property === "y" ? 0 : null;
+			if (value !== null) emitValue(state, property, value, 0, "", void 0, "", "", merge, value, contextOnly);
+		}
+	}
 };
 const legacyTransformParts = /* @__PURE__ */ new Set([
 	"matrix",
@@ -163,38 +198,6 @@ const borderStyleDefaults = {
 	borderBottomWidth: "borderBottomStyle",
 	borderLeftWidth: "borderLeftStyle"
 };
-const mediaQueries = /* @__PURE__ */ new WeakMap();
-const clausePrecedenceOrders = /* @__PURE__ */ new WeakMap();
-function queryFor(state, name) {
-	let queries = mediaQueries.get(state.conf);
-	if (!queries) {
-		queries = {};
-		const media = state.conf.media || {};
-		for (const key in media) queries[key] = (0, import_mediaObjectToString.mediaObjectToString)(media[key]);
-		mediaQueries.set(state.conf, queries);
-	}
-	return queries[name];
-}
-function precedenceOrderFor(state) {
-	let order = clausePrecedenceOrders.get(state.conf);
-	if (!order) {
-		order = (0, import_runtime.createClausePrecedenceOrder)(state.conf.media);
-		clausePrecedenceOrders.set(state.conf, order);
-	}
-	return order;
-}
-function stateIsActive(state, name) {
-	const component = state.componentState;
-	if (name === "hover") return !!component.hover;
-	if (name === "press") return !!(component.press || component.pressIn);
-	if (name === "focus") return !!component.focus;
-	if (name === "focus-visible") return !!component.focusVisible;
-	if (name === "focus-within") return !!component.focusWithin;
-	if (name === "disabled") return !!(component.disabled || state.props.disabled);
-	if (name === "enter") return !!component.unmounted;
-	if (name === "exit") return !!state.styleProps.isExiting;
-	return false;
-}
 function platformMatches(name) {
 	if (name === "web") return import_constants.isWeb;
 	if (name === "native") return !import_constants.isWeb;
@@ -204,115 +207,160 @@ function platformMatches(name) {
 	if (name === "androidtv") return import_constants.isAndroid && import_constants.isTV;
 	return name === "tv" && import_constants.isTV;
 }
-function groupCondition(state, modifier, out) {
-	const slash = modifier.indexOf("/");
-	const stateName = modifier.slice(6, slash === -1 ? void 0 : slash);
-	const groupName = slash === -1 ? "true" : modifier.slice(slash + 1);
-	const selector = stateSelectors[stateName];
-	if (!selector || !groupName) return false;
-	out.selector += `:where(.t_group_${groupName}${selector} *)`;
-	if (stateName === "hover") (out.wrappers ||= []).push("@media (hover: hover)");
-	const component = state.componentState.group?.[groupName];
-	const context = state.flatGroupContext?.[groupName];
-	out.active &&= !!(component?.pseudo ?? context?.state.pseudo)?.[stateName];
-	(state.flatGroupKeys ||= /* @__PURE__ */ new Set()).add(groupName);
-	return true;
-}
-function containerCondition(state, modifier, out) {
-	const slash = modifier.indexOf("/");
-	const size = modifier.slice(1, slash === -1 ? void 0 : slash);
-	const name = slash === -1 ? null : modifier.slice(slash + 1);
-	const query = queryFor(state, size);
-	if (!query || name !== null && !name) return false;
-	const key = name === null ? "@" : `@${name}`;
-	(out.wrappers ||= []).push(name === null ? `@container ${query}` : `@container ${name} ${query}`);
-	const component = state.componentState.group?.[key];
-	const context = state.flatGroupContext?.[key];
-	const active = component?.media?.[size];
-	out.active &&= active === void 0 ? !!(context?.state.layout && (0, import_useMedia.mediaKeyMatch)(size, context.state.layout)) : !!active;
-	(state.flatGroupKeys ||= /* @__PURE__ */ new Set()).add(key);
-	(state.flatGroupMedia ||= /* @__PURE__ */ new Set()).add(size);
-	return true;
-}
-function getCondition(state, source) {
-	const out = {
-		key: "",
-		active: true,
-		emit: true,
-		selector: ""
-	};
-	const canonical = [];
-	const kinds = [];
-	const seenModifiers = /* @__PURE__ */ new Set();
+function resolveClauseChain(state, source, start, end, property, raw, merge, originalValue, contextOnly = false, payloadStart = -1, payloadEnd = -1, warning = 0) {
+	const compiled = (0, import_grammarConfig.getConfigRevisionState)(state.conf);
+	const sourceStart = start;
+	let key = "";
+	let active = true;
+	let emit = true;
+	let selector = "";
+	let wrappers;
+	let theme = "";
+	let enter = false;
+	let exit = false;
+	let unsupportedState = "";
+	let platformRank = 0;
+	let depth = 0;
+	let categoryRank = 0;
+	let withinRank = 0;
 	let selfStateSpecificity = 0;
-	let start = 0;
-	for (let index = 0; index <= source.length; index++) {
-		if (index !== source.length && source.charCodeAt(index) !== 58) continue;
-		let modifier = (0, import_runtime.canonicalClauseModifier)(source.slice(start, index));
+	for (let index = start; index <= end; index++) {
+		if (index !== end && source.charCodeAt(index) !== 58) continue;
+		let modifier = source.slice(start, index);
 		start = index + 1;
-		if (!modifier) return null;
-		if (seenModifiers.has(modifier)) continue;
-		seenModifiers.add(modifier);
-		if (modifier.startsWith("group-")) {
-			if (!groupCondition(state, modifier, out)) return null;
-			canonical.push(modifier);
-			kinds.push("group");
-			continue;
-		}
-		if (modifier.charCodeAt(0) === 64) {
-			if (!containerCondition(state, modifier, out)) return null;
-			canonical.push(modifier);
-			kinds.push("container");
-			continue;
-		}
-		if (modifier in stateSelectors || modifier === "enter" || modifier === "exit") {
-			canonical.push(modifier);
-			kinds.push("state");
-			selfStateSpecificity++;
-			const selector = stateSelectors[modifier];
-			if (!import_constants.isWeb && modifier !== "hover" && modifier !== "press" && modifier !== "focus" && modifier !== "focus-visible" && modifier !== "focus-within" && modifier !== "disabled" && modifier !== "enter" && modifier !== "exit") out.unsupportedState = modifier;
-			if (modifier === "enter" || modifier === "exit") {
-				const cls = modifier === "enter" ? ".t_unmounted" : ".t_exiting";
-				out.selector += `:is(${cls}, ${cls} *)`;
-				out[modifier] = true;
-			} else if (selector) out.selector += selector;
-			if (modifier === "hover") (out.wrappers ||= []).push("@media (hover: hover)");
-			out.active &&= stateIsActive(state, modifier);
-			if (modifier === "hover" || modifier === "press" || modifier === "focus" || modifier === "focus-visible" || modifier === "focus-within") (state.flatStateKeys ||= /* @__PURE__ */ new Set()).add(modifier);
-			continue;
-		}
-		if (modifier in (state.conf.media || {})) {
-			const query = queryFor(state, modifier);
-			if (!query) return null;
-			canonical.push(modifier);
-			kinds.push("media");
-			(out.wrappers ||= []).push(`@media ${query}`);
-			out.active &&= !!state.flatMediaState?.[modifier];
-			(state.flatMediaKeys ||= /* @__PURE__ */ new Set()).add(modifier);
-			continue;
+		let code = compiled.modifiers[modifier];
+		let kind = code & 7;
+		let rank = code >> 3;
+		let stateSelector = "";
+		let conditionStateName = "";
+		let groupName = "";
+		let containerSize = "";
+		let containerName = "";
+		let containerQuery = "";
+		if (kind === import_runtime.modifierKindState) {
+			modifier = import_runtime.canonicalStateModifierNames[rank];
+			stateSelector = import_runtime.stateModifierSelectors[rank];
+		} else 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) kind = 0;
+			else {
+				rank = code >> 3;
+				groupName = slash === -1 ? "true" : modifier.slice(slash + 1);
+				if (rank === 6 || rank === 7 || slash !== -1 && !(0, import_runtime.isModifierName)(groupName, 0, groupName.length)) kind = 0;
+				else {
+					kind = 5;
+					const stateName = import_runtime.canonicalStateModifierNames[rank];
+					conditionStateName = stateName;
+					stateSelector = import_runtime.stateModifierSelectors[rank];
+					modifier = `group-${stateName}${slash === -1 ? "" : modifier.slice(slash)}`;
+				}
+			}
+		} else if (!kind && modifier.charCodeAt(0) === 64) {
+			const slash = modifier.indexOf("/");
+			containerSize = modifier.slice(1, slash === -1 ? void 0 : slash);
+			containerName = slash === -1 ? "" : modifier.slice(slash + 1);
+			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)) {
+				kind = 6;
+				rank = code >> 3;
+			}
 		}
-		if ((0, import_runtime.isRootThemeName)(modifier) && modifier in (state.conf.themes || {})) {
-			canonical.push(modifier);
-			kinds.push("theme");
-			out.theme = modifier;
-			out.selector += `:where(.t_${modifier}, .t_${modifier} *)`;
-			out.active &&= state.flatThemeName === modifier || state.flatThemeName?.startsWith(`${modifier}_`) === true;
-			continue;
+		if (!kind) {
+			if (warning && process.env.NODE_ENV === "development") (0, import_warnOnce.warnRefusedValue)(property, warning === 1 ? source : raw, `unknown modifier "${source.slice(sourceStart, end)}"`);
+			return 0;
+		}
+		let slotStart = 0;
+		let duplicate = false;
+		let inserted = !key;
+		if (!key) key = modifier;
+		else {
+			while (slotStart <= key.length) {
+				let slotEnd = key.indexOf(":", slotStart);
+				if (slotEnd === -1) slotEnd = key.length;
+				let order = 0;
+				const compareLength = Math.min(modifier.length, slotEnd - slotStart);
+				for (let offset = 0; offset < compareLength; offset++) {
+					order = modifier.charCodeAt(offset) - key.charCodeAt(slotStart + offset);
+					if (order) break;
+				}
+				order ||= modifier.length - (slotEnd - slotStart);
+				if (!order) {
+					duplicate = true;
+					break;
+				}
+				if (order < 0) {
+					key = `${key.slice(0, slotStart)}${modifier}:${key.slice(slotStart)}`;
+					inserted = true;
+					break;
+				}
+				if (slotEnd === key.length) break;
+				slotStart = slotEnd + 1;
+			}
+			if (!duplicate && !inserted) key += `:${modifier}`;
 		}
-		if (modifier === "web" || modifier === "native" || modifier === "ios" || modifier === "android" || modifier === "tv" || modifier === "tvos" || modifier === "androidtv") {
-			canonical.push(modifier);
-			kinds.push("platform");
+		if (duplicate) continue;
+		if (kind === import_runtime.modifierKindPlatform) {
+			if (rank > platformRank) platformRank = rank;
 			const matches = platformMatches(modifier);
-			out.active &&= matches;
-			out.emit &&= matches;
+			active &&= matches;
+			emit &&= matches;
 			continue;
 		}
-		return null;
-	}
-	out.key = (0, import_runtime.clauseConditionSetKey)(canonical);
-	out.precedence = (0, import_runtime.getClausePrecedenceKeyFromKinds)(canonical, kinds, precedenceOrderFor(state));
-	out.classRepetitions = (0, import_runtime.clauseSubjectClassRepetitions)(out.precedence, selfStateSpecificity);
-	return out;
+		depth++;
+		const nextCategory = kind === import_runtime.modifierKindMedia ? 0 : kind === 6 ? 1 : kind === import_runtime.modifierKindTheme ? 2 : kind === 5 ? 3 : 4;
+		if (nextCategory > categoryRank) {
+			categoryRank = nextCategory;
+			withinRank = rank;
+		} else if (nextCategory === categoryRank && rank > withinRank) withinRank = rank;
+		if (kind === import_runtime.modifierKindMedia) {
+			const query = compiled.mediaQueries[modifier];
+			if (!query) return 0;
+			(wrappers ||= []).push(`@media ${query}`);
+			active &&= !!state.flatMediaState?.[modifier];
+			(state.flatMediaKeys ||= /* @__PURE__ */ new Set()).add(modifier);
+		} else if (kind === import_runtime.modifierKindTheme) {
+			theme = modifier;
+			selector += `:where(.t_${modifier}, .t_${modifier} *)`;
+			active &&= state.flatThemeName === modifier || state.flatThemeName?.startsWith(`${modifier}_`) === true;
+		} else if (kind === 5) {
+			selector += `:where(.t_group_${groupName}${stateSelector} *)`;
+			if (rank === 0) (wrappers ||= []).push("@media (hover: hover)");
+			const component = state.componentState.group?.[groupName];
+			const context = state.flatGroupContext?.[groupName];
+			active &&= !!(component?.pseudo ?? context?.state.pseudo)?.[conditionStateName];
+			(state.flatGroupKeys ||= /* @__PURE__ */ new Set()).add(groupName);
+		} else if (kind === 6) {
+			const groupKey = `@${containerName}`;
+			(wrappers ||= []).push(containerName ? `@container ${containerName} ${containerQuery}` : `@container ${containerQuery}`);
+			const component = state.componentState.group?.[groupKey];
+			const context = state.flatGroupContext?.[groupKey];
+			const match = component?.media?.[containerSize];
+			active &&= match === void 0 ? !!(context?.state.layout && (0, import_useMedia.mediaKeyMatch)(containerSize, context.state.layout)) : !!match;
+			(state.flatGroupKeys ||= /* @__PURE__ */ new Set()).add(groupKey);
+			(state.flatGroupMedia ||= /* @__PURE__ */ new Set()).add(containerSize);
+		} else {
+			selfStateSpecificity++;
+			if (!import_constants.isWeb && stateSelector[0] === "[" && modifier !== "disabled") unsupportedState = modifier;
+			if (stateSelector[0] === ".") {
+				selector += `:is(${stateSelector}, ${stateSelector} *)`;
+				if (rank === 6) enter = true;
+				else exit = true;
+			} else selector += stateSelector;
+			if (rank === 0) (wrappers ||= []).push("@media (hover: hover)");
+			const component = state.componentState;
+			active &&= 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;
+			if (stateSelector[0] === ":") (state.flatStateKeys ||= /* @__PURE__ */ new Set()).add(modifier);
+		}
+	}
+	if (depth > 5) throw new Error(`a flat value clause supports at most 5 non-platform conditions; received ${depth} in "${source.slice(sourceStart, end)}:"`);
+	const condition = (platformRank << 26 | depth << 23 | categoryRank << 20 | withinRank) * 256 + selfStateSpecificity * 32 + 16 + (active ? 1 : 0) + (emit ? 2 : 0) + (enter ? 4 : 0) + (exit ? 8 : 0);
+	if (warning && 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_constants.isWeb && state.flatShouldDoClasses || warning === 1 && !import_constants.isWeb && theme && import_constants.supportsDynamicColorIOS && (0, import_getDynamicVal.isColorStyleKey)(property))) {
+		const value = payloadStart === -1 ? raw : source.slice(payloadStart, payloadEnd);
+		emitValue(state, property, value, condition, key, wrappers, selector, theme, merge, warning === 2 ? originalValue : originalValue ?? value, contextOnly);
+	}
+	return condition;
 }
 const tokenLookup = {
 	value: void 0,
@@ -373,7 +421,7 @@ function configuredValue(state, property, raw) {
 			opacity = amount;
 		}
 	}
-	const safeArea = process.env.TAMAGUI_RUNTIME_SAFE_AREA === "disabled" ? void 0 : (0, import_resolveSafeAreaVariable.resolveSafeAreaVariable)(name);
+	const safeArea = (0, import_resolveSafeAreaVariable.resolveSafeAreaVariable)(name);
 	if (safeArea !== void 0) {
 		state.flatUsesSafeArea = true;
 		return safeArea;
@@ -451,13 +499,13 @@ function normalizeTransitionNames(state, raw) {
 function directStyleSignature(property, value, conditionKey = "") {
 	return `${property}${conditionKey}${String(value)}`;
 }
-function directAtomic(state, property, value, condition, isDefault = false) {
+function directAtomic(state, property, value, condition, conditionKey, conditionWrappers, conditionSelector, isDefault = false) {
 	const atomics = state.flatAtomics ||= {};
 	const atomicKey = property.startsWith("transition") ? "transition" : property;
 	const existing = atomics[atomicKey];
-	const contribution = directStyleSignature(property, value, condition?.key || "");
+	const contribution = directStyleSignature(property, value, conditionKey);
 	const signature = existing ? existing.signature + contribution : contribution;
-	const next = (0, import_getCSSStylesAtomic.getCSSStyleAtomic)(property, value, condition?.selector, condition?.wrappers, signature, true, atomicKey, condition?.classRepetitions);
+	const next = (0, import_getCSSStylesAtomic.getCSSStyleAtomic)(property, value, conditionSelector, conditionWrappers, signature, true, atomicKey, condition ? 1 + (Math.floor(condition / 256) >>> 23 & 7) + (Math.floor(condition / 256) >>> 26) * 6 - (condition >>> 5 & 7) : void 0);
 	if (!next) return;
 	const identifier = next[import_helpers.StyleObjectIdentifier];
 	const nextRules = next[import_helpers.StyleObjectRules];
@@ -469,10 +517,10 @@ function directAtomic(state, property, value, condition, isDefault = false) {
 			signature,
 			styleObject: next
 		};
-		if (slotted) atomic.conditions = { [atomicKey === "transition" ? `${condition?.key || ""}\0${property}` : condition.key]: {
+		if (slotted) atomic.conditions = { [atomicKey === "transition" ? `${conditionKey}\0${property}` : conditionKey]: {
 			count: nextRules.length,
 			index: 0,
-			precedence: condition?.precedence ?? 0,
+			precedence: condition ? Math.floor(condition / 256) : 0,
 			default: isDefault
 		} };
 		atomics[atomicKey] = atomic;
@@ -495,7 +543,7 @@ function directAtomic(state, property, value, condition, isDefault = false) {
 			for (let index = 0; index < rules.length; index++) rules[index] = rules[index].replaceAll(oldSelector, newSelector);
 		}
 		if (slotted) {
-			const slot = atomicKey === "transition" ? `${condition?.key || ""}\0${property}` : condition.key;
+			const slot = atomicKey === "transition" ? `${conditionKey}\0${property}` : conditionKey;
 			const previous = existing.conditions?.[slot];
 			if (previous) {
 				rules.splice(previous.index, previous.count);
@@ -505,7 +553,7 @@ function directAtomic(state, property, value, condition, isDefault = false) {
 				}
 				delete existing.conditions[slot];
 			}
-			const precedence = condition?.precedence ?? 0;
+			const precedence = condition ? Math.floor(condition / 256) : 0;
 			let insertionIndex = rules.length;
 			if (existing.conditions) {
 				for (const key in existing.conditions) {
@@ -536,13 +584,13 @@ function directAtomic(state, property, value, condition, isDefault = false) {
 	}
 	state.classNames[atomicKey] = identifier;
 }
-function emitBorderStyleDefault(state, property, condition) {
+function emitBorderStyleDefault(state, property, condition, conditionKey, conditionWrappers, conditionSelector) {
 	if (!import_constants.isWeb || !state.flatShouldDoClasses || state.styleProps.noNormalize === false) return;
 	const target = borderStyleDefaults[property];
 	if (!target) return;
 	const atomic = state.flatAtomics?.[target];
-	if (atomic?.baseRules || state.classNames[target] && !atomic || condition && atomic?.conditions?.[condition.key]) return;
-	directAtomic(state, target, "solid", condition, true);
+	if (atomic?.baseRules || state.classNames[target] && !atomic || condition && atomic?.conditions?.[conditionKey]) return;
+	directAtomic(state, target, "solid", condition, conditionKey, conditionWrappers, conditionSelector, true);
 }
 function flushDirectStyles(state, clear = false) {
 	const direct = state;
@@ -561,21 +609,21 @@ function flushDirectStyles(state, clear = false) {
 function getDirectDynamicThemeAccess(state) {
 	return state.flatDynamicThemeAccess;
 }
-function emitProperty(state, property, value, condition, merge, originalValue, contextOnly) {
+function emitProperty(state, property, value, condition, conditionKey, conditionWrappers, conditionSelector, conditionTheme, merge, originalValue, contextOnly) {
 	const direct = state;
-	if (condition?.enter) (state.flatEnterKeys ||= /* @__PURE__ */ new Set()).add(property);
-	if (condition?.exit) (state.flatExitKeys ||= /* @__PURE__ */ new Set()).add(property);
-	if (!import_constants.isWeb && condition?.theme) {
+	if (condition & 4) (state.flatEnterKeys ||= /* @__PURE__ */ new Set()).add(property);
+	if (condition & 8) (state.flatExitKeys ||= /* @__PURE__ */ new Set()).add(property);
+	if (!import_constants.isWeb && conditionTheme) {
 		if (import_constants.supportsDynamicColorIOS && (0, import_getDynamicVal.isColorStyleKey)(property)) {
 			const schemes = (direct.flatDynamicColors ||= {})[property] ||= {};
-			schemes[condition.theme] = typeof originalValue === "string" && /^[a-z]+$/i.test(originalValue) ? originalValue : value;
+			schemes[conditionTheme] = typeof originalValue === "string" && /^[a-z]+$/i.test(originalValue) ? originalValue : value;
 			merge(state, property, { dynamic: { ...schemes } }, 1, false, originalValue);
 			return;
 		}
 		direct.flatDynamicThemeAccess = true;
 	}
 	if (contextOnly) {
-		if (!condition || condition.active) (state.overriddenContextProps ||= {})[property] = originalValue;
+		if (!condition || condition & 1) (state.overriddenContextProps ||= {})[property] = originalValue;
 		return;
 	}
 	const shouldPromoteAnimatedStyle = import_constants.isWeb && !condition && !state.flatShouldDoClasses && !state.styleProps.noMergeStyle && state.styleProps.isAnimated && !state.animationDriver?.isReactNative && property in import_helpers.nonAnimatableStyleProps;
@@ -583,14 +631,15 @@ function emitProperty(state, property, value, condition, merge, originalValue, c
 		if (!condition) {
 			if (state.style) delete state.style[property];
 		}
-		directAtomic(state, property, value, condition);
+		directAtomic(state, property, value, condition, conditionKey, conditionWrappers, conditionSelector);
 		return;
 	}
 	if (condition) {
-		if (!condition.active) return;
+		if (!(condition & 1)) return;
+		const precedence = Math.floor(condition / 256);
 		const previous = direct.flatPrecedence?.[property];
-		if (previous !== void 0 && condition.precedence < previous) return;
-		(direct.flatPrecedence ||= {})[property] = condition.precedence;
+		if (previous !== void 0 && precedence < previous) return;
+		(direct.flatPrecedence ||= {})[property] = precedence;
 		(state.flatActiveConditions ||= {})[property] = true;
 	} else if (state.flatActiveConditions?.[property]) return;
 	merge(state, property, value, 1, true, originalValue);
@@ -617,7 +666,7 @@ function splitComponents(value) {
 	}
 	return parts;
 }
-function emitBorder(state, property, raw, condition, merge, originalValue, contextOnly) {
+function emitBorder(state, property, raw, condition, conditionKey, conditionWrappers, conditionSelector, conditionTheme, merge, originalValue, contextOnly) {
 	if (!import_constants.isWeb && (property === "borderBlock" || property === "borderInline")) {
 		if (process.env.NODE_ENV === "development") (0, import_warnOnce.warnOnce)(`RN has no logical border shorthand "${property}"; dropping it`);
 		return;
@@ -633,15 +682,15 @@ function emitBorder(state, property, raw, condition, merge, originalValue, conte
 		else color = part;
 	}
 	if (style === "none" && width === void 0) width = "0";
-	if (width !== void 0) for (const target of targets.width) emitResolved(state, target, width, condition, merge, originalValue, contextOnly);
+	if (width !== void 0) for (const target of targets.width) emitResolved(state, target, width, condition, conditionKey, conditionWrappers, conditionSelector, conditionTheme, merge, originalValue, contextOnly);
 	if (style !== void 0) {
 		const styleTargets = !import_constants.isWeb && property === "border" ? ["borderStyle"] : targets.style;
-		for (const target of styleTargets) emitProperty(state, target, style, condition, merge, originalValue, contextOnly);
+		for (const target of styleTargets) emitProperty(state, target, style, condition, conditionKey, conditionWrappers, conditionSelector, conditionTheme, merge, originalValue, contextOnly);
 	}
-	if (color !== void 0) for (const target of targets.color) emitResolved(state, target, color, condition, merge, originalValue, contextOnly);
+	if (color !== void 0) for (const target of targets.color) emitResolved(state, target, color, condition, conditionKey, conditionWrappers, conditionSelector, conditionTheme, merge, originalValue, contextOnly);
 }
-function emitTextDecoration(state, raw, condition, 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, condition, merge, originalValue, contextOnly);
+function emitTextDecoration(state, raw, condition, conditionKey, conditionWrappers, conditionSelector, conditionTheme, 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, condition, conditionKey, conditionWrappers, conditionSelector, conditionTheme, merge, originalValue, contextOnly);
 }
 function addComposition(state, property) {
 	if (state.classNames[property]) return;
@@ -656,12 +705,12 @@ function addComposition(state, property) {
 	}
 	state.classNames[property] = identifier;
 }
-function emitTransform(state, property, value, condition, merge, originalValue, contextOnly) {
+function emitTransform(state, property, value, condition, conditionKey, conditionWrappers, conditionSelector, conditionTheme, merge, originalValue, contextOnly) {
 	if (!import_constants.isWeb || !state.flatShouldDoClasses) {
 		if (!import_constants.isWeb && property === "scale") {
-			emitProperty(state, "scaleX", value, condition, merge, originalValue, contextOnly);
-			emitProperty(state, "scaleY", value, condition, merge, originalValue, contextOnly);
-		} else emitProperty(state, property, value, condition, merge, originalValue, contextOnly);
+			emitProperty(state, "scaleX", value, condition, conditionKey, conditionWrappers, conditionSelector, conditionTheme, merge, originalValue, contextOnly);
+			emitProperty(state, "scaleY", value, condition, conditionKey, conditionWrappers, conditionSelector, conditionTheme, merge, originalValue, contextOnly);
+		} else emitProperty(state, property, value, condition, conditionKey, conditionWrappers, conditionSelector, conditionTheme, 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"];
@@ -671,19 +720,19 @@ function emitTransform(state, property, value, condition, merge, originalValue,
 			if (target === "--t-x" || target === "--t-y") targetValue = `${targetValue}px`;
 			else if (target === "rotate") targetValue = `${targetValue}deg`;
 		}
-		emitProperty(state, target, targetValue, condition, merge, originalValue, contextOnly);
+		emitProperty(state, target, targetValue, condition, conditionKey, conditionWrappers, conditionSelector, conditionTheme, merge, originalValue, contextOnly);
 		if (target === "--t-x" || target === "--t-y") addComposition(state, "translate");
 		else if (target.startsWith("--t-scale")) addComposition(state, "scale");
 	}
 }
-function emitResolved(state, property, raw, condition, merge, originalValue, contextOnly) {
+function emitResolved(state, property, raw, condition, conditionKey, conditionWrappers, conditionSelector, conditionTheme, merge, originalValue, contextOnly) {
 	let value = configuredValue(state, property, raw);
 	if (value === raw && /[\s,(]/.test(raw)) value = resolveEmbeddedTokens(state, property, raw);
 	if ((!import_constants.isWeb || !state.flatShouldDoClasses) && typeof value === "string") {
 		if (/^-?(?:\d+\.?\d*|\.\d+)(?:px|dp)$/i.test(value)) value = Number.parseFloat(value);
 		else if (value !== "" && Number.isFinite(Number(value))) value = Number(value);
 	}
-	emitProperty(state, property, value, condition, merge, originalValue, contextOnly);
+	emitProperty(state, property, value, condition, conditionKey, conditionWrappers, conditionSelector, conditionTheme, merge, originalValue, contextOnly);
 }
 function shadowUnit(part) {
 	return typeof part === "number" ? `${part}px` : part || "0px";
@@ -698,7 +747,7 @@ function emitWebShadow(state, property, value, merge, originalValue, contextOnly
 	const color = (0, import_normalizeColor.normalizeColor)(shadow.shadowColor, shadow.shadowOpacity ?? 1);
 	if (!color) return;
 	const next = `${shadowUnit(offset.width)} ${shadowUnit(offset.height)} ${shadowUnit(shadow.shadowRadius)} ${color}`;
-	emitProperty(state, "boxShadow", state.flatBoxShadow ? `${state.flatBoxShadow}, ${next}` : next, null, merge, originalValue, contextOnly);
+	emitProperty(state, "boxShadow", state.flatBoxShadow ? `${state.flatBoxShadow}, ${next}` : next, 0, "", void 0, "", "", merge, originalValue, contextOnly);
 }
 function emitWebTextShadow(state, property, value, merge, originalValue, contextOnly) {
 	const shadow = state.flatTextShadow ||= {};
@@ -708,12 +757,12 @@ 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}`, 0, "", void 0, "", "", merge, originalValue, contextOnly);
 }
-function emitValue(state, property, raw, condition, merge, originalValue, contextOnly) {
+function emitValue(state, property, raw, condition, conditionKey, conditionWrappers, conditionSelector, conditionTheme, merge, originalValue, contextOnly) {
 	if (typeof raw === "string") raw = raw.trim();
 	if ((0, import_createVariable.isVariable)(raw)) raw = (0, import_resolveVariableValue.resolveVariableValue)(property, raw, import_constants.isWeb && !state.flatShouldDoClasses && state.styleProps.resolveValues === "auto" ? "value" : state.styleProps.resolveValues);
-	emitBorderStyleDefault(state, property, condition);
+	emitBorderStyleDefault(state, property, condition, conditionKey, conditionWrappers, conditionSelector);
 	if (typeof raw === "string" && (property === "transition" || property === "transitionProperty")) raw = normalizeTransitionNames(state, raw);
 	if (legacyTransformParts.has(property)) {
 		if (import_constants.isWeb && state.flatShouldDoClasses && state.classNames.transform) {
@@ -724,8 +773,8 @@ function emitValue(state, property, raw, condition, merge, originalValue, contex
 		if (import_constants.isWeb && state.flatShouldDoClasses && !condition) {
 			const direct = state;
 			(direct.flatLegacyTransforms ||= {})[property] = value2;
-			emitProperty(state, "transform", (0, import_transformsToString.transformsToString)(Object.keys(direct.flatLegacyTransforms).sort().map((key) => ({ [key]: direct.flatLegacyTransforms[key] }))), null, merge, originalValue, contextOnly);
-		} else if (condition && import_constants.isWeb && state.flatShouldDoClasses) emitProperty(state, "transform", `${property}(${value2})`, condition, merge, originalValue, contextOnly);
+			emitProperty(state, "transform", (0, import_transformsToString.transformsToString)(Object.keys(direct.flatLegacyTransforms).sort().map((key) => ({ [key]: direct.flatLegacyTransforms[key] }))), 0, "", void 0, "", "", merge, originalValue, contextOnly);
+		} else if (condition && import_constants.isWeb && state.flatShouldDoClasses) emitProperty(state, "transform", `${property}(${value2})`, condition, conditionKey, conditionWrappers, conditionSelector, conditionTheme, merge, originalValue, contextOnly);
 		else merge(state, property, value2, 1, false, originalValue);
 		return;
 	}
@@ -754,17 +803,17 @@ function emitValue(state, property, raw, condition, merge, originalValue, contex
 	}
 	if (import_constants.isWeb && state.flatShouldDoClasses && property === "transform" && Array.isArray(raw)) raw = (0, import_transformsToString.transformsToString)(raw);
 	if (typeof raw === "string" && property in borderTargets) {
-		emitBorder(state, property, raw, condition, merge, originalValue, contextOnly);
+		emitBorder(state, property, raw, condition, conditionKey, conditionWrappers, conditionSelector, conditionTheme, merge, originalValue, contextOnly);
 		return;
 	}
 	if (typeof raw === "string" && property === "textDecoration") {
-		emitTextDecoration(state, raw, condition, merge, originalValue, contextOnly);
+		emitTextDecoration(state, raw, condition, conditionKey, conditionWrappers, conditionSelector, conditionTheme, merge, originalValue, contextOnly);
 		return;
 	}
 	if (typeof raw === "string" && property === "background") {
 		const parts = splitComponents(raw);
 		if (parts.length === 1 && !/^(?:url|image-set|.*gradient)\(/i.test(parts[0])) {
-			emitResolved(state, "backgroundColor", parts[0], condition, merge, originalValue, contextOnly);
+			emitResolved(state, "backgroundColor", parts[0], condition, conditionKey, conditionWrappers, conditionSelector, conditionTheme, merge, originalValue, contextOnly);
 			return;
 		}
 		if (!import_constants.isWeb) {
@@ -777,18 +826,18 @@ function emitValue(state, property, raw, condition, merge, originalValue, contex
 		if ((!import_constants.isWeb || !state.flatShouldDoClasses) && typeof value2 === "string" && !value2.startsWith(import_themeRef.THEME_REF_PREFIX)) {
 			if (property === "rotate" && !/^-?(?:\d+\.?\d*|\.\d+)(?:deg|rad)$/i.test(value2)) {
 				if (process.env.NODE_ENV === "development") (0, import_warnOnce.warnOnce)(`native transform "${property}" cannot represent "${value2}"; dropping it`);
-				if (condition?.active && state.flatTransforms) delete state.flatTransforms[property];
+				if (condition & 1 && state.flatTransforms) delete state.flatTransforms[property];
 				return;
 			}
 			if (/^-?(?:\d+\.?\d*|\.\d+)(?:px|dp)$/i.test(value2)) value2 = Number.parseFloat(value2);
 			else if (Number.isFinite(Number(value2))) value2 = Number(value2);
 		}
-		emitTransform(state, property, value2, condition, merge, originalValue, contextOnly);
+		emitTransform(state, property, value2, condition, conditionKey, conditionWrappers, conditionSelector, conditionTheme, merge, originalValue, contextOnly);
 		return;
 	}
 	if (import_constants.isWeb && !state.flatShouldDoClasses && !condition && property === "borderRadius") {
-		if (typeof raw === "string") emitResolved(state, property, raw, condition, merge, originalValue, contextOnly);
-		else emitProperty(state, property, raw, condition, merge, originalValue, contextOnly);
+		if (typeof raw === "string") emitResolved(state, property, raw, condition, conditionKey, conditionWrappers, conditionSelector, conditionTheme, merge, originalValue, contextOnly);
+		else emitProperty(state, property, raw, condition, conditionKey, conditionWrappers, conditionSelector, conditionTheme, merge, originalValue, contextOnly);
 		return;
 	}
 	let value = raw;
@@ -804,7 +853,7 @@ function emitValue(state, property, raw, condition, merge, originalValue, contex
 	if (!import_constants.isWeb && property === "fontVariant" && typeof value === "string") value = value.split(/[,\s]+/).filter(Boolean);
 	const expanded = state.styleProps.noExpand ? null : (0, import_expandStyle.expandStyle)(property, value, state.conf.settings.styleCompat || "web");
 	if (!expanded) {
-		emitProperty(state, property, value, condition, merge, originalValue, contextOnly);
+		emitProperty(state, property, value, condition, conditionKey, conditionWrappers, conditionSelector, conditionTheme, merge, originalValue, contextOnly);
 		return;
 	}
 	if (typeof raw === "string" && expanded.length > 1) {
@@ -812,123 +861,48 @@ function emitValue(state, property, raw, condition, merge, originalValue, contex
 		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], condition, merge, originalValue, contextOnly);
+				emitResolved(state, expanded[index][0], parts[partIndex], condition, conditionKey, conditionWrappers, conditionSelector, conditionTheme, merge, originalValue, contextOnly);
 			}
 			return;
 		}
 	}
-	for (let index = 0; index < expanded.length; index++) emitProperty(state, expanded[index][0], expanded[index][1], condition, merge, originalValue, contextOnly);
-}
-function emitSegment(state, property, source, start, end, condition, merge, originalValue, contextOnly) {
-	while (start < end && source.charCodeAt(start) <= 32) start++;
-	while (end > start && source.charCodeAt(end - 1) <= 32) end--;
-	if (start === end) return false;
-	if (!condition || condition.emit && (condition.active || import_constants.isWeb && state.flatShouldDoClasses || !import_constants.isWeb && condition.theme && import_constants.supportsDynamicColorIOS && (0, import_getDynamicVal.isColorStyleKey)(property))) {
-		const value = source.slice(start, end);
-		emitValue(state, property, value, condition, merge, value, contextOnly);
-	}
-	return true;
+	for (let index = 0; index < expanded.length; index++) emitProperty(state, expanded[index][0], expanded[index][1], condition, conditionKey, conditionWrappers, conditionSelector, conditionTheme, merge, originalValue, contextOnly);
 }
 function contributeStyleString(state, property, source, merge, originalValue, contextOnly = false) {
-	if (process.env.TAMAGUI_RUNTIME_STYLE_VALUE_GRAMMAR === "disabled") {
-		emitValue(state, property, source, null, merge, originalValue ?? source, contextOnly);
-		return true;
-	}
 	if (import_constants.isWeb && source.indexOf(":") !== -1 && (webShadowParts.has(property) || legacyTransformParts.has(property))) {
 		if (process.env.NODE_ENV === "development") (0, import_warnOnce.warnOnce)(`conditional "${property}" needs its composite property; dropping it`);
 		return true;
 	}
 	if (source.indexOf(":") === -1) {
-		emitValue(state, property, source, null, merge, originalValue ?? source, contextOnly);
+		emitValue(state, property, source, 0, "", void 0, "", "", merge, originalValue ?? source, contextOnly);
 		return true;
 	}
-	const conditions = [];
-	const starts = [];
-	const ends = [];
-	let pending = null;
-	let refused = "";
-	let lifecycle = false;
-	(0, import_runtime.scanFlatValue)(source, {
-		segment(start, end, isBase) {
-			if (start === end) {
-				if (!isBase && !refused) refused = "a conditional clause has no value";
-				return;
-			}
-			conditions.push(pending);
-			starts.push(start);
-			ends.push(end);
-		},
-		chain(start, end) {
-			if (refused) return false;
-			const next = getCondition(state, source.slice(start, end));
-			if (!next) {
-				refused = `unknown modifier "${source.slice(start, end)}"`;
-				return false;
-			}
-			if (process.env.NODE_ENV === "development" && next.unsupportedState) (0, import_warnOnce.warnOnce)(`${property}: "${next.unsupportedState}:" has no native component-state source; dropping the clause`);
-			pending = next;
-			lifecycle ||= !!(next.enter || next.exit);
-			return true;
-		},
-		error(code, index) {
-			if (refused) return;
-			refused = code === "invalid-character" ? `"${source[index]}" would end the declaration or rule` : code === "unterminated-string" ? "an unterminated string" : code === "unterminated-comment" ? "an unterminated \"/*\" comment" : code === "stray-comment-close" ? "a stray \"*/\"" : "an unterminated \"(\"";
-		}
-	});
-	if (refused) {
-		if (property === "aspectRatio") {
-			emitValue(state, property, source, null, merge, originalValue ?? source, contextOnly);
-			return true;
-		}
-		if (process.env.NODE_ENV === "development") (0, import_warnOnce.warnRefusedValue)(property, source, refused);
-		return true;
-	}
-	let hasBase = false;
-	let lastPayloadStart = 0;
-	for (let index = 0; index < conditions.length; index++) {
-		const condition = conditions[index];
-		lastPayloadStart = starts[index];
-		const emitted = emitSegment(state, property, source, starts[index], ends[index], condition, merge, originalValue, contextOnly);
-		if (!condition && emitted) hasBase = true;
-	}
-	if (process.env.NODE_ENV === "development" && !hasBase && conditions.length > 0 && (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_constants.isWeb || !state.flatShouldDoClasses) && lifecycle && !hasBase) {
-		const value = property === "opacity" ? 1 : property === "scale" || property === "scaleX" || property === "scaleY" ? 1 : property === "rotate" ? "0deg" : property === "x" || property === "y" ? 0 : null;
-		if (value !== null) emitValue(state, property, value, null, merge, value, contextOnly);
-	}
+	(0, import_runtime.scanFlatValue)(source, directStyleHandler, state, property, merge, originalValue, contextOnly);
 	return true;
 }
 function contributeFrontendValue(state, property, value, merge, contextOnly = false) {
-	if (process.env.TAMAGUI_RUNTIME_STYLE_VALUE_GRAMMAR === "disabled") return false;
-	if (value.base !== null) emitValue(state, property, value.base, null, merge, value.base, contextOnly);
+	if (value.base !== null) emitValue(state, property, value.base, 0, "", void 0, "", "", merge, value.base, contextOnly);
 	for (const clause of value.clauses) {
-		const condition = getCondition(state, clause.modifiers.join(":"));
-		if (condition && condition.emit && (condition.active || import_constants.isWeb && state.flatShouldDoClasses)) emitValue(state, property, clause.payload, condition, merge, clause.payload, contextOnly);
+		const source = clause.modifiers.join(":");
+		resolveClauseChain(state, source, 0, source.length, property, clause.payload, merge, clause.payload, contextOnly);
 	}
 	return true;
 }
 function contributeVariantClauseValue(state, property, value, conditionSource, merge, originalValue, contextOnly = false) {
-	if (process.env.TAMAGUI_RUNTIME_STYLE_VALUE_GRAMMAR === "disabled") return;
-	const condition = getCondition(state, conditionSource);
-	if (!condition) {
-		if (process.env.NODE_ENV === "development") (0, import_warnOnce.warnRefusedValue)(property, value, `unknown modifier "${conditionSource}"`);
-		return;
-	}
-	if (process.env.NODE_ENV === "development" && condition.unsupportedState) (0, import_warnOnce.warnOnce)(`${property}: "${condition.unsupportedState}:" has no native component-state source; dropping the clause`);
-	if (condition.emit && (condition.active || import_constants.isWeb && state.flatShouldDoClasses)) emitValue(state, property, value, condition, merge, originalValue, contextOnly);
+	resolveClauseChain(state, conditionSource, 0, conditionSource.length, property, value, merge, originalValue, contextOnly, -1, -1, 2);
 }
 function contributeStyleValue(state, property, value, merge, originalValue, contextOnly = false) {
-	if (process.env.TAMAGUI_RUNTIME_SAFE_AREA !== "disabled" && value === "safe" && (0, import_resolveSafeArea.isSafeAreaKey)(property)) {
+	if (value === "safe" && (0, import_resolveSafeArea.isSafeAreaKey)(property)) {
 		const expanded = (0, import_resolveSafeArea.expandSafeAreaValue)(property);
 		if (expanded) {
 			state.flatUsesSafeArea = true;
-			for (const [key, resolved] of expanded) emitValue(state, key, resolved, null, merge, originalValue ?? value, contextOnly);
+			for (const [key, resolved] of expanded) emitValue(state, key, resolved, 0, "", void 0, "", "", merge, originalValue ?? value, contextOnly);
 			return true;
 		}
 	}
 	if (typeof value === "string") return contributeStyleString(state, property, value, merge, originalValue, contextOnly);
 	if (value != null) {
-		emitValue(state, property, value, null, merge, originalValue ?? value, contextOnly);
+		emitValue(state, property, value, 0, "", void 0, "", "", merge, originalValue ?? value, contextOnly);
 		return true;
 	}
 	return false;