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

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

@@ -1,14 +1,14 @@
 import { isAndroid, isIos, isTV, isWeb, supportsDynamicColorIOS } from "@tamagui/constants";
 import { StyleObjectIdentifier, StyleObjectRules, nonAnimatableStyleProps, tokenCategories } from "@tamagui/helpers";
-import { canonicalClauseModifier, clauseConditionSetKey, clauseSubjectClassRepetitions, createClausePrecedenceOrder, getClausePrecedenceKeyFromKinds, isRootThemeName, scanFlatValue } from "@tamagui/style-grammar/runtime";
+import { canonicalStateModifierNames, isContainerSizeQueryText, isModifierName, modifierKindMedia, modifierKindPlatform, modifierKindState, modifierKindTheme, scanFlatValue, stateModifierSelectors } from "@tamagui/style-grammar/runtime";
 import { isVariable } from "../createVariable.native.js";
 import { mediaKeyMatch } from "../hooks/useMedia.native.js";
 import { warnOnce, warnRefusedValue } from "./warnOnce.native.js";
 import { expandStyle } from "./expandStyle.native.js";
 import { getCSSStyleAtomic } from "./getCSSStylesAtomic.native.js";
+import { getConfigRevisionState } from "./grammarConfig.native.js";
 import { isColorStyleKey } from "./getDynamicVal.native.js";
 import { shouldInsertStyleRules, updateRules } from "./insertStyleRule.native.js";
-import { mediaObjectToString } from "./mediaObjectToString.native.js";
 import { normalizeColor } from "./normalizeColor.native.js";
 import { parseNativeStyle } from "./parseNativeStyle.native.js";
 import { parseNativeTransform } from "./parseNativeTransform.native.js";
@@ -19,18 +19,54 @@ import { resolveVariableValue } from "./resolveVariableValue.native.js";
 import { THEME_REF_PREFIX } from "./themeRef.native.js";
 import { transformsToString } from "./transformsToString.native.js";
 
-var 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\"]"
+var 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") 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;
+			}
+			var 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") warnRefusedValue(property, source, failure === "invalid-character" ? `"${source[failureIndex]}" would end the declaration or rule` : failure === "unterminated-string" ? "an unterminated string" : failure === "unterminated-comment" ? "an unterminated \"/*\" comment" : failure === "stray-comment-close" ? "a stray \"*/\"" : "an unterminated \"(\"");
+			return;
+		}
+		if (start === end) {
+			if (process.env.NODE_ENV === "development") warnRefusedValue(property, source, "a conditional clause has no value");
+			return;
+		}
+		if (property === "aspectRatio" && chainCount === 1) {
+			var left = Number(source.slice(chainStart, chainEnd));
+			var right = Number(source.slice(start, end));
+			if (chainStart < chainEnd && Number.isFinite(left) && left > 0 && Number.isFinite(right) && right > 0) return 12;
+		}
+		var 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") 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) {
+		var hasBase = !!(result & 1);
+		if (result & 8 && chainCount === 1) {
+			emitValue(state, property, source, 0, "", void 0, "", "", merge, originalValue !== null && originalValue !== void 0 ? originalValue : source, contextOnly);
+			hasBase = true;
+		}
+		if (process.env.NODE_ENV === "development" && !hasBase && result & 4 && (property in tokenCategories.color || property in tokenCategoryByProperty) && splitComponents(source.slice(lastPayloadStart)).length > 1) warnOnce(`${property}="${source}" has multiple values after its first conditional. Write the base value before the first conditional.`);
+		if ((!isWeb || !state.flatShouldDoClasses) && result & 2 && !hasBase) {
+			var 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);
+		}
+	}
 };
 var legacyTransformParts = /* @__PURE__ */ new Set([
 	"matrix",
@@ -129,38 +165,6 @@ var borderStyleDefaults = {
 	borderBottomWidth: "borderBottomStyle",
 	borderLeftWidth: "borderLeftStyle"
 };
-var mediaQueries = /* @__PURE__ */ new WeakMap();
-var clausePrecedenceOrders = /* @__PURE__ */ new WeakMap();
-function queryFor(state, name) {
-	var queries = mediaQueries.get(state.conf);
-	if (!queries) {
-		queries = {};
-		var media = state.conf.media || {};
-		for (var key in media) queries[key] = mediaObjectToString(media[key]);
-		mediaQueries.set(state.conf, queries);
-	}
-	return queries[name];
-}
-function precedenceOrderFor(state) {
-	var order = clausePrecedenceOrders.get(state.conf);
-	if (!order) {
-		order = createClausePrecedenceOrder(state.conf.media);
-		clausePrecedenceOrders.set(state.conf, order);
-	}
-	return order;
-}
-function stateIsActive(state, name) {
-	var 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 isWeb;
 	if (name === "native") return !isWeb;
@@ -170,129 +174,172 @@ function platformMatches(name) {
 	if (name === "androidtv") return isAndroid && isTV;
 	return name === "tv" && isTV;
 }
-function groupCondition(state, modifier, out) {
-	var _state_componentState_group, _state_flatGroupContext, _this;
-	var _out, _out1, _state;
-	var slash = modifier.indexOf("/");
-	var stateName = modifier.slice(6, slash === -1 ? void 0 : slash);
-	var groupName = slash === -1 ? "true" : modifier.slice(slash + 1);
-	var selector = stateSelectors[stateName];
-	if (!selector || !groupName) return false;
-	out.selector += `:where(.t_group_${groupName}${selector} *)`;
-	if (stateName === "hover") ((_out = out).wrappers || (_out.wrappers = [])).push("@media (hover: hover)");
-	var component = (_state_componentState_group = state.componentState.group) === null || _state_componentState_group === void 0 ? void 0 : _state_componentState_group[groupName];
-	var context = (_state_flatGroupContext = state.flatGroupContext) === null || _state_flatGroupContext === void 0 ? void 0 : _state_flatGroupContext[groupName];
-	var _component_pseudo;
-	(_out1 = out).active && (_out1.active = !!((_this = (_component_pseudo = component === null || component === void 0 ? void 0 : component.pseudo) !== null && _component_pseudo !== void 0 ? _component_pseudo : context === null || context === void 0 ? void 0 : context.state.pseudo) === null || _this === void 0 ? void 0 : _this[stateName]));
-	((_state = state).flatGroupKeys || (_state.flatGroupKeys = /* @__PURE__ */ new Set())).add(groupName);
-	return true;
-}
-function containerCondition(state, modifier, out) {
-	var _state_componentState_group, _state_flatGroupContext, _component_media;
-	var _out, _out1, _state, _state1;
-	var slash = modifier.indexOf("/");
-	var size = modifier.slice(1, slash === -1 ? void 0 : slash);
-	var name = slash === -1 ? null : modifier.slice(slash + 1);
-	var query = queryFor(state, size);
-	if (!query || name !== null && !name) return false;
-	var key = name === null ? "@" : `@${name}`;
-	((_out = out).wrappers || (_out.wrappers = [])).push(name === null ? `@container ${query}` : `@container ${name} ${query}`);
-	var component = (_state_componentState_group = state.componentState.group) === null || _state_componentState_group === void 0 ? void 0 : _state_componentState_group[key];
-	var context = (_state_flatGroupContext = state.flatGroupContext) === null || _state_flatGroupContext === void 0 ? void 0 : _state_flatGroupContext[key];
-	var active = component === null || component === void 0 ? void 0 : (_component_media = component.media) === null || _component_media === void 0 ? void 0 : _component_media[size];
-	(_out1 = out).active && (_out1.active = active === void 0 ? !!((context === null || context === void 0 ? void 0 : context.state.layout) && mediaKeyMatch(size, context.state.layout)) : !!active);
-	((_state = state).flatGroupKeys || (_state.flatGroupKeys = /* @__PURE__ */ new Set())).add(key);
-	((_state1 = state).flatGroupMedia || (_state1.flatGroupMedia = /* @__PURE__ */ new Set())).add(size);
-	return true;
-}
-function getCondition(state, source) {
-	var out = {
-		key: "",
-		active: true,
-		emit: true,
-		selector: ""
-	};
-	var canonical = [];
-	var kinds = [];
-	var seenModifiers = /* @__PURE__ */ new Set();
+function resolveClauseChain(state, source, start, end, property, raw, merge, originalValue) {
+	var contextOnly = arguments.length > 8 && arguments[8] !== void 0 ? arguments[8] : false, payloadStart = arguments.length > 9 && arguments[9] !== void 0 ? arguments[9] : -1, payloadEnd = arguments.length > 10 && arguments[10] !== void 0 ? arguments[10] : -1, warning = arguments.length > 11 && arguments[11] !== void 0 ? arguments[11] : 0;
+	var compiled = getConfigRevisionState(state.conf);
+	var sourceStart = start;
+	var key = "";
+	var active = true;
+	var emit = true;
+	var selector = "";
+	var wrappers;
+	var theme = "";
+	var enter = false;
+	var exit = false;
+	var unsupportedState = "";
+	var platformRank = 0;
+	var depth = 0;
+	var categoryRank = 0;
+	var withinRank = 0;
 	var selfStateSpecificity = 0;
-	var start = 0;
-	for (var index = 0; index <= source.length; index++) {
-		if (index !== source.length && source.charCodeAt(index) !== 58) continue;
-		var modifier = canonicalClauseModifier(source.slice(start, index));
+	for (var index = start; index <= end; index++) {
+		if (index !== end && source.charCodeAt(index) !== 58) continue;
+		var 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;
+		var code = compiled.modifiers[modifier];
+		var kind = code & 7;
+		var rank = code >> 3;
+		var stateSelector = "";
+		var conditionStateName = "";
+		var groupName = "";
+		var containerSize = "";
+		var containerName = "";
+		var containerQuery = "";
+		if (kind === modifierKindState) {
+			modifier = canonicalStateModifierNames[rank];
+			stateSelector = stateModifierSelectors[rank];
+		} else if (!kind && modifier.startsWith("group-")) {
+			var slash = modifier.indexOf("/");
+			var authoredState = modifier.slice(6, slash === -1 ? void 0 : slash);
+			code = compiled.modifiers[authoredState];
+			if ((code & 7) !== modifierKindState) kind = 0;
+			else {
+				rank = code >> 3;
+				groupName = slash === -1 ? "true" : modifier.slice(slash + 1);
+				if (rank === 6 || rank === 7 || slash !== -1 && !isModifierName(groupName, 0, groupName.length)) kind = 0;
+				else {
+					kind = 5;
+					var stateName = canonicalStateModifierNames[rank];
+					conditionStateName = stateName;
+					stateSelector = stateModifierSelectors[rank];
+					modifier = `group-${stateName}${slash === -1 ? "" : modifier.slice(slash)}`;
+				}
+			}
+		} else if (!kind && modifier.charCodeAt(0) === 64) {
+			var slash1 = modifier.indexOf("/");
+			containerSize = modifier.slice(1, slash1 === -1 ? void 0 : slash1);
+			containerName = slash1 === -1 ? "" : modifier.slice(slash1 + 1);
+			if (isModifierName(containerSize, 0, containerSize.length) && (slash1 === -1 || isModifierName(containerName, 0, containerName.length)) && ((code = compiled.modifiers[containerSize]) & 7) === modifierKindMedia && (containerQuery = compiled.mediaQueries[containerSize]) && isContainerSizeQueryText(containerQuery)) {
+				kind = 6;
+				rank = code >> 3;
+			}
 		}
-		if (modifier.charCodeAt(0) === 64) {
-			if (!containerCondition(state, modifier, out)) return null;
-			canonical.push(modifier);
-			kinds.push("container");
-			continue;
+		if (!kind) {
+			if (warning && process.env.NODE_ENV === "development") warnRefusedValue(property, warning === 1 ? source : raw, `unknown modifier "${source.slice(sourceStart, end)}"`);
+			return 0;
 		}
-		if (modifier in stateSelectors || modifier === "enter" || modifier === "exit") {
-			var _out, _out1;
-			canonical.push(modifier);
-			kinds.push("state");
-			selfStateSpecificity++;
-			var selector = stateSelectors[modifier];
-			if (!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") {
-				var 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 = out).wrappers || (_out.wrappers = [])).push("@media (hover: hover)");
-			(_out1 = out).active && (_out1.active = stateIsActive(state, modifier));
-			if (modifier === "hover" || modifier === "press" || modifier === "focus" || modifier === "focus-visible" || modifier === "focus-within") {
-				var _state;
-				((_state = state).flatStateKeys || (_state.flatStateKeys = /* @__PURE__ */ new Set())).add(modifier);
+		var slotStart = 0;
+		var duplicate = false;
+		var inserted = !key;
+		if (!key) key = modifier;
+		else {
+			while (slotStart <= key.length) {
+				var slotEnd = key.indexOf(":", slotStart);
+				if (slotEnd === -1) slotEnd = key.length;
+				var order = 0;
+				var compareLength = Math.min(modifier.length, slotEnd - slotStart);
+				for (var offset = 0; offset < compareLength; offset++) {
+					order = modifier.charCodeAt(offset) - key.charCodeAt(slotStart + offset);
+					if (order) break;
+				}
+				order || (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;
 			}
-			continue;
+			if (!duplicate && !inserted) key += `:${modifier}`;
 		}
-		if (modifier in (state.conf.media || {})) {
-			var _state_flatMediaState;
-			var _out2, _out3, _state1;
-			var query = queryFor(state, modifier);
-			if (!query) return null;
-			canonical.push(modifier);
-			kinds.push("media");
-			((_out2 = out).wrappers || (_out2.wrappers = [])).push(`@media ${query}`);
-			(_out3 = out).active && (_out3.active = !!((_state_flatMediaState = state.flatMediaState) === null || _state_flatMediaState === void 0 ? void 0 : _state_flatMediaState[modifier]));
-			((_state1 = state).flatMediaKeys || (_state1.flatMediaKeys = /* @__PURE__ */ new Set())).add(modifier);
+		if (duplicate) continue;
+		if (kind === modifierKindPlatform) {
+			if (rank > platformRank) platformRank = rank;
+			var matches = platformMatches(modifier);
+			active && (active = matches);
+			emit && (emit = matches);
 			continue;
 		}
-		if (isRootThemeName(modifier) && modifier in (state.conf.themes || {})) {
+		depth++;
+		var nextCategory = kind === modifierKindMedia ? 0 : kind === 6 ? 1 : kind === modifierKindTheme ? 2 : kind === 5 ? 3 : 4;
+		if (nextCategory > categoryRank) {
+			categoryRank = nextCategory;
+			withinRank = rank;
+		} else if (nextCategory === categoryRank && rank > withinRank) withinRank = rank;
+		if (kind === modifierKindMedia) {
+			var _state_flatMediaState;
+			var _state;
+			var query = compiled.mediaQueries[modifier];
+			if (!query) return 0;
+			(wrappers || (wrappers = [])).push(`@media ${query}`);
+			active && (active = !!((_state_flatMediaState = state.flatMediaState) === null || _state_flatMediaState === void 0 ? void 0 : _state_flatMediaState[modifier]));
+			((_state = state).flatMediaKeys || (_state.flatMediaKeys = /* @__PURE__ */ new Set())).add(modifier);
+		} else if (kind === modifierKindTheme) {
 			var _state_flatThemeName;
-			var _out4;
-			canonical.push(modifier);
-			kinds.push("theme");
-			out.theme = modifier;
-			out.selector += `:where(.t_${modifier}, .t_${modifier} *)`;
-			(_out4 = out).active && (_out4.active = state.flatThemeName === modifier || ((_state_flatThemeName = state.flatThemeName) === null || _state_flatThemeName === void 0 ? void 0 : _state_flatThemeName.startsWith(`${modifier}_`)) === true);
-			continue;
-		}
-		if (modifier === "web" || modifier === "native" || modifier === "ios" || modifier === "android" || modifier === "tv" || modifier === "tvos" || modifier === "androidtv") {
-			var _out5, _out6;
-			canonical.push(modifier);
-			kinds.push("platform");
-			var matches = platformMatches(modifier);
-			(_out5 = out).active && (_out5.active = matches);
-			(_out6 = out).emit && (_out6.emit = matches);
-			continue;
+			theme = modifier;
+			selector += `:where(.t_${modifier}, .t_${modifier} *)`;
+			active && (active = state.flatThemeName === modifier || ((_state_flatThemeName = state.flatThemeName) === null || _state_flatThemeName === void 0 ? void 0 : _state_flatThemeName.startsWith(`${modifier}_`)) === true);
+		} else if (kind === 5) {
+			var _state_componentState_group, _state_flatGroupContext, _this;
+			var _state1;
+			selector += `:where(.t_group_${groupName}${stateSelector} *)`;
+			if (rank === 0) (wrappers || (wrappers = [])).push("@media (hover: hover)");
+			var component = (_state_componentState_group = state.componentState.group) === null || _state_componentState_group === void 0 ? void 0 : _state_componentState_group[groupName];
+			var context = (_state_flatGroupContext = state.flatGroupContext) === null || _state_flatGroupContext === void 0 ? void 0 : _state_flatGroupContext[groupName];
+			var _component_pseudo;
+			active && (active = !!((_this = (_component_pseudo = component === null || component === void 0 ? void 0 : component.pseudo) !== null && _component_pseudo !== void 0 ? _component_pseudo : context === null || context === void 0 ? void 0 : context.state.pseudo) === null || _this === void 0 ? void 0 : _this[conditionStateName]));
+			((_state1 = state).flatGroupKeys || (_state1.flatGroupKeys = /* @__PURE__ */ new Set())).add(groupName);
+		} else if (kind === 6) {
+			var _state_componentState_group1, _state_flatGroupContext1, _component_media;
+			var _state2, _state3;
+			var groupKey = `@${containerName}`;
+			(wrappers || (wrappers = [])).push(containerName ? `@container ${containerName} ${containerQuery}` : `@container ${containerQuery}`);
+			var component1 = (_state_componentState_group1 = state.componentState.group) === null || _state_componentState_group1 === void 0 ? void 0 : _state_componentState_group1[groupKey];
+			var context1 = (_state_flatGroupContext1 = state.flatGroupContext) === null || _state_flatGroupContext1 === void 0 ? void 0 : _state_flatGroupContext1[groupKey];
+			var match = component1 === null || component1 === void 0 ? void 0 : (_component_media = component1.media) === null || _component_media === void 0 ? void 0 : _component_media[containerSize];
+			active && (active = match === void 0 ? !!((context1 === null || context1 === void 0 ? void 0 : context1.state.layout) && mediaKeyMatch(containerSize, context1.state.layout)) : !!match);
+			((_state2 = state).flatGroupKeys || (_state2.flatGroupKeys = /* @__PURE__ */ new Set())).add(groupKey);
+			((_state3 = state).flatGroupMedia || (_state3.flatGroupMedia = /* @__PURE__ */ new Set())).add(containerSize);
+		} else {
+			selfStateSpecificity++;
+			if (!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 || (wrappers = [])).push("@media (hover: hover)");
+			var component2 = state.componentState;
+			active && (active = rank === 0 ? !!component2.hover : rank === 4 ? !!(component2.press || component2.pressIn) : rank === 2 ? !!component2.focus : rank === 3 ? !!component2.focusVisible : rank === 1 ? !!component2.focusWithin : rank === 5 ? !!(component2.disabled || state.props.disabled) : rank === 6 ? !!component2.unmounted : rank === 7 ? !!state.styleProps.isExiting : false);
+			if (stateSelector[0] === ":") {
+				var _state4;
+				((_state4 = state).flatStateKeys || (_state4.flatStateKeys = /* @__PURE__ */ new Set())).add(modifier);
+			}
 		}
-		return null;
 	}
-	out.key = clauseConditionSetKey(canonical);
-	out.precedence = getClausePrecedenceKeyFromKinds(canonical, kinds, precedenceOrderFor(state));
-	out.classRepetitions = clauseSubjectClassRepetitions(out.precedence, selfStateSpecificity);
-	return out;
+	if (depth > 5) throw new Error(`a flat value clause supports at most 5 non-platform conditions; received ${depth} in "${source.slice(sourceStart, end)}:"`);
+	var 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") warnOnce(`${property}: "${unsupportedState}:" has no native component-state source; dropping the clause`);
+	if (merge && property && condition & 2 && (condition & 1 || isWeb && state.flatShouldDoClasses || warning === 1 && !isWeb && theme && supportsDynamicColorIOS && isColorStyleKey(property))) {
+		var value = payloadStart === -1 ? raw : source.slice(payloadStart, payloadEnd);
+		emitValue(state, property, value, condition, key, wrappers, selector, theme, merge, warning === 2 ? originalValue : originalValue !== null && originalValue !== void 0 ? originalValue : value, contextOnly);
+	}
+	return condition;
 }
 var tokenLookup = {
 	value: void 0,
@@ -362,7 +409,7 @@ function configuredValue(state, property, raw) {
 			opacity = amount;
 		}
 	}
-	var safeArea = process.env.TAMAGUI_RUNTIME_SAFE_AREA === "disabled" ? void 0 : resolveSafeAreaVariable(name);
+	var safeArea = resolveSafeAreaVariable(name);
 	if (safeArea !== void 0) {
 		state.flatUsesSafeArea = true;
 		return safeArea;
@@ -443,15 +490,15 @@ function normalizeTransitionNames(state, raw) {
 function directStyleSignature(property, value) {
 	return `${property}${arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : ""}${String(value)}`;
 }
-function directAtomic(state, property, value, condition) {
-	var isDefault = arguments.length > 4 && arguments[4] !== void 0 ? arguments[4] : false;
+function directAtomic(state, property, value, condition, conditionKey, conditionWrappers, conditionSelector) {
+	var isDefault = arguments.length > 7 && arguments[7] !== void 0 ? arguments[7] : false;
 	var _state;
 	var atomics = (_state = state).flatAtomics || (_state.flatAtomics = {});
 	var atomicKey = property.startsWith("transition") ? "transition" : property;
 	var existing = atomics[atomicKey];
-	var contribution = directStyleSignature(property, value, (condition === null || condition === void 0 ? void 0 : condition.key) || "");
+	var contribution = directStyleSignature(property, value, conditionKey);
 	var signature = existing ? existing.signature + contribution : contribution;
-	var next = getCSSStyleAtomic(property, value, condition === null || condition === void 0 ? void 0 : condition.selector, condition === null || condition === void 0 ? void 0 : condition.wrappers, signature, true, atomicKey, condition === null || condition === void 0 ? void 0 : condition.classRepetitions);
+	var next = 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;
 	var identifier = next[StyleObjectIdentifier];
 	var nextRules = next[StyleObjectRules];
@@ -463,15 +510,12 @@ function directAtomic(state, property, value, condition) {
 			signature,
 			styleObject: next
 		};
-		if (slotted) {
-			var _condition_precedence;
-			atomic.conditions = { [atomicKey === "transition" ? `${(condition === null || condition === void 0 ? void 0 : condition.key) || ""}\0${property}` : condition.key]: {
-				count: nextRules.length,
-				index: 0,
-				precedence: (_condition_precedence = condition === null || condition === void 0 ? void 0 : condition.precedence) !== null && _condition_precedence !== void 0 ? _condition_precedence : 0,
-				default: isDefault
-			} };
-		}
+		if (slotted) atomic.conditions = { [atomicKey === "transition" ? `${conditionKey}\0${property}` : conditionKey]: {
+			count: nextRules.length,
+			index: 0,
+			precedence: condition ? Math.floor(condition / 256) : 0,
+			default: isDefault
+		} };
 		atomics[atomicKey] = atomic;
 	} else {
 		var previousIdentifier = existing.styleObject[StyleObjectIdentifier];
@@ -494,7 +538,7 @@ function directAtomic(state, property, value, condition) {
 		if (slotted) {
 			var _existing_conditions;
 			var _existing;
-			var slot = atomicKey === "transition" ? `${(condition === null || condition === void 0 ? void 0 : condition.key) || ""}\0${property}` : condition.key;
+			var slot = atomicKey === "transition" ? `${conditionKey}\0${property}` : conditionKey;
 			var previous = (_existing_conditions = existing.conditions) === null || _existing_conditions === void 0 ? void 0 : _existing_conditions[slot];
 			if (previous) {
 				rules.splice(previous.index, previous.count);
@@ -504,8 +548,7 @@ function directAtomic(state, property, value, condition) {
 				}
 				delete existing.conditions[slot];
 			}
-			var _condition_precedence1;
-			var precedence = (_condition_precedence1 = condition === null || condition === void 0 ? void 0 : condition.precedence) !== null && _condition_precedence1 !== void 0 ? _condition_precedence1 : 0;
+			var precedence = condition ? Math.floor(condition / 256) : 0;
 			var insertionIndex = rules.length;
 			if (existing.conditions) {
 				for (var key2 in existing.conditions) {
@@ -536,14 +579,14 @@ function directAtomic(state, property, value, condition) {
 	}
 	state.classNames[atomicKey] = identifier;
 }
-function emitBorderStyleDefault(state, property, condition) {
+function emitBorderStyleDefault(state, property, condition, conditionKey, conditionWrappers, conditionSelector) {
 	var _state_flatAtomics, _atomic_conditions;
 	if (!isWeb || !state.flatShouldDoClasses || state.styleProps.noNormalize === false) return;
 	var target = borderStyleDefaults[property];
 	if (!target) return;
 	var atomic = (_state_flatAtomics = state.flatAtomics) === null || _state_flatAtomics === void 0 ? void 0 : _state_flatAtomics[target];
-	if ((atomic === null || atomic === void 0 ? void 0 : atomic.baseRules) || state.classNames[target] && !atomic || condition && (atomic === null || atomic === void 0 ? void 0 : (_atomic_conditions = atomic.conditions) === null || _atomic_conditions === void 0 ? void 0 : _atomic_conditions[condition.key])) return;
-	directAtomic(state, target, "solid", condition, true);
+	if ((atomic === null || atomic === void 0 ? void 0 : atomic.baseRules) || state.classNames[target] && !atomic || condition && (atomic === null || atomic === void 0 ? void 0 : (_atomic_conditions = atomic.conditions) === null || _atomic_conditions === void 0 ? void 0 : _atomic_conditions[conditionKey])) return;
+	directAtomic(state, target, "solid", condition, conditionKey, conditionWrappers, conditionSelector, true);
 }
 function flushDirectStyles(state) {
 	var clear = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false;
@@ -563,24 +606,24 @@ function flushDirectStyles(state) {
 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) {
 	var _state_animationDriver, _state_flatActiveConditions;
 	var _state, _state1;
 	var direct = state;
-	if (condition === null || condition === void 0 ? void 0 : condition.enter) ((_state = state).flatEnterKeys || (_state.flatEnterKeys = /* @__PURE__ */ new Set())).add(property);
-	if (condition === null || condition === void 0 ? void 0 : condition.exit) ((_state1 = state).flatExitKeys || (_state1.flatExitKeys = /* @__PURE__ */ new Set())).add(property);
-	if (!isWeb && (condition === null || condition === void 0 ? void 0 : condition.theme)) {
+	if (condition & 4) ((_state = state).flatEnterKeys || (_state.flatEnterKeys = /* @__PURE__ */ new Set())).add(property);
+	if (condition & 8) ((_state1 = state).flatExitKeys || (_state1.flatExitKeys = /* @__PURE__ */ new Set())).add(property);
+	if (!isWeb && conditionTheme) {
 		if (supportsDynamicColorIOS && isColorStyleKey(property)) {
 			var _direct, _ref, _property;
 			var schemes = (_ref = (_direct = direct).flatDynamicColors || (_direct.flatDynamicColors = {}))[_property = property] || (_ref[_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) {
+		if (!condition || condition & 1) {
 			var _state2;
 			((_state2 = state).overriddenContextProps || (_state2.overriddenContextProps = {}))[property] = originalValue;
 		}
@@ -591,16 +634,17 @@ 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) {
 		var _direct_flatPrecedence;
 		var _direct1, _state3;
-		if (!condition.active) return;
+		if (!(condition & 1)) return;
+		var precedence = Math.floor(condition / 256);
 		var previous = (_direct_flatPrecedence = direct.flatPrecedence) === null || _direct_flatPrecedence === void 0 ? void 0 : _direct_flatPrecedence[property];
-		if (previous !== void 0 && condition.precedence < previous) return;
-		((_direct1 = direct).flatPrecedence || (_direct1.flatPrecedence = {}))[property] = condition.precedence;
+		if (previous !== void 0 && precedence < previous) return;
+		((_direct1 = direct).flatPrecedence || (_direct1.flatPrecedence = {}))[property] = precedence;
 		((_state3 = state).flatActiveConditions || (_state3.flatActiveConditions = {}))[property] = true;
 	} else if ((_state_flatActiveConditions = state.flatActiveConditions) === null || _state_flatActiveConditions === void 0 ? void 0 : _state_flatActiveConditions[property]) return;
 	merge(state, property, value, 1, true, originalValue);
@@ -627,7 +671,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 (!isWeb && (property === "borderBlock" || property === "borderInline")) {
 		if (process.env.NODE_ENV === "development") warnOnce(`RN has no logical border shorthand "${property}"; dropping it`);
 		return;
@@ -661,7 +705,7 @@ function emitBorder(state, property, raw, condition, merge, originalValue, conte
 		try {
 			for (var _iterator1 = targets.width[Symbol.iterator](), _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = true) {
 				var target = _step1.value;
-				emitResolved(state, target, width, condition, merge, originalValue, contextOnly);
+				emitResolved(state, target, width, condition, conditionKey, conditionWrappers, conditionSelector, conditionTheme, merge, originalValue, contextOnly);
 			}
 		} catch (err) {
 			_didIteratorError1 = true;
@@ -680,7 +724,7 @@ function emitBorder(state, property, raw, condition, merge, originalValue, conte
 		try {
 			for (var _iterator2 = styleTargets[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
 				var target1 = _step2.value;
-				emitProperty(state, target1, style, condition, merge, originalValue, contextOnly);
+				emitProperty(state, target1, style, condition, conditionKey, conditionWrappers, conditionSelector, conditionTheme, merge, originalValue, contextOnly);
 			}
 		} catch (err) {
 			_didIteratorError2 = true;
@@ -698,7 +742,7 @@ function emitBorder(state, property, raw, condition, merge, originalValue, conte
 		try {
 			for (var _iterator3 = targets.color[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {
 				var target2 = _step3.value;
-				emitResolved(state, target2, color, condition, merge, originalValue, contextOnly);
+				emitResolved(state, target2, color, condition, conditionKey, conditionWrappers, conditionSelector, conditionTheme, merge, originalValue, contextOnly);
 			}
 		} catch (err) {
 			_didIteratorError3 = true;
@@ -712,12 +756,12 @@ function emitBorder(state, property, raw, condition, merge, originalValue, conte
 		}
 	}
 }
-function emitTextDecoration(state, raw, condition, merge, originalValue, contextOnly) {
+function emitTextDecoration(state, raw, condition, conditionKey, conditionWrappers, conditionSelector, conditionTheme, merge, originalValue, contextOnly) {
 	var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
 	try {
 		for (var _iterator = splitComponents(raw)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
 			var part = _step.value;
-			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);
+			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);
 		}
 	} catch (err) {
 		_didIteratorError = true;
@@ -743,12 +787,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 (!isWeb || !state.flatShouldDoClasses) {
 		if (!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;
 	}
 	var 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"];
@@ -761,7 +805,7 @@ 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");
 		}
@@ -776,14 +820,14 @@ function emitTransform(state, property, value, condition, merge, originalValue,
 		}
 	}
 }
-function emitResolved(state, property, raw, condition, merge, originalValue, contextOnly) {
+function emitResolved(state, property, raw, condition, conditionKey, conditionWrappers, conditionSelector, conditionTheme, merge, originalValue, contextOnly) {
 	var value = configuredValue(state, property, raw);
 	if (value === raw && /[\s,(]/.test(raw)) value = resolveEmbeddedTokens(state, property, raw);
 	if ((!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";
@@ -800,7 +844,7 @@ function emitWebShadow(state, property, value, merge, originalValue, contextOnly
 	var color = normalizeColor(shadow.shadowColor, (_shadow_shadowOpacity = shadow.shadowOpacity) !== null && _shadow_shadowOpacity !== void 0 ? _shadow_shadowOpacity : 1);
 	if (!color) return;
 	var 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) {
 	var _state;
@@ -811,12 +855,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 (isVariable(raw)) raw = resolveVariableValue(property, raw, 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 (isWeb && state.flatShouldDoClasses && state.classNames.transform) {
@@ -830,8 +874,8 @@ function emitValue(state, property, raw, condition, merge, originalValue, contex
 			((_direct = direct).flatLegacyTransforms || (_direct.flatLegacyTransforms = {}))[property] = value;
 			emitProperty(state, "transform", transformsToString(Object.keys(direct.flatLegacyTransforms).sort().map(function(key2) {
 				return { [key2]: direct.flatLegacyTransforms[key2] };
-			})), null, merge, originalValue, contextOnly);
-		} else if (condition && isWeb && state.flatShouldDoClasses) emitProperty(state, "transform", `${property}(${value})`, condition, merge, originalValue, contextOnly);
+			})), 0, "", void 0, "", "", merge, originalValue, contextOnly);
+		} else if (condition && isWeb && state.flatShouldDoClasses) emitProperty(state, "transform", `${property}(${value})`, condition, conditionKey, conditionWrappers, conditionSelector, conditionTheme, merge, originalValue, contextOnly);
 		else merge(state, property, value, 1, false, originalValue);
 		return;
 	}
@@ -860,17 +904,17 @@ function emitValue(state, property, raw, condition, merge, originalValue, contex
 	}
 	if (isWeb && state.flatShouldDoClasses && property === "transform" && Array.isArray(raw)) raw = 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") {
 		var 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 (!isWeb) {
@@ -883,24 +927,24 @@ function emitValue(state, property, raw, condition, merge, originalValue, contex
 		if ((!isWeb || !state.flatShouldDoClasses) && typeof value3 === "string" && !value3.startsWith(THEME_REF_PREFIX)) {
 			if (property === "rotate" && !/^-?(?:\d+\.?\d*|\.\d+)(?:deg|rad)$/i.test(value3)) {
 				if (process.env.NODE_ENV === "development") warnOnce(`native transform "${property}" cannot represent "${value3}"; dropping it`);
-				if ((condition === null || condition === void 0 ? void 0 : 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(value3)) value3 = Number.parseFloat(value3);
 			else if (Number.isFinite(Number(value3))) value3 = Number(value3);
 		}
-		emitTransform(state, property, value3, condition, merge, originalValue, contextOnly);
+		emitTransform(state, property, value3, condition, conditionKey, conditionWrappers, conditionSelector, conditionTheme, merge, originalValue, contextOnly);
 		return;
 	}
 	if (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;
 	}
 	if (property === "transform" && typeof raw === "string") {
 		var transform = parseNativeTransform(raw);
 		if (transform) {
-			emitProperty(state, property, transform, condition, merge, originalValue, contextOnly);
+			emitProperty(state, property, transform, condition, conditionKey, conditionWrappers, conditionSelector, conditionTheme, merge, originalValue, contextOnly);
 			return;
 		}
 	}
@@ -922,7 +966,7 @@ function emitValue(state, property, raw, condition, merge, originalValue, contex
 				try {
 					for (var _iterator = parsed[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
 						var [key, parsedValue] = _step.value;
-						emitProperty(state, key, parsedValue, condition, merge, originalValue, contextOnly);
+						emitProperty(state, key, parsedValue, condition, conditionKey, conditionWrappers, conditionSelector, conditionTheme, merge, originalValue, contextOnly);
 					}
 				} catch (err) {
 					_didIteratorError = true;
@@ -934,14 +978,14 @@ function emitValue(state, property, raw, condition, merge, originalValue, contex
 						if (_didIteratorError) throw _iteratorError;
 					}
 				}
-			} else emitProperty(state, property === "backgroundImage" ? "experimental_backgroundImage" : property, parsed, condition, merge, originalValue, contextOnly);
+			} else emitProperty(state, property === "backgroundImage" ? "experimental_backgroundImage" : property, parsed, condition, conditionKey, conditionWrappers, conditionSelector, conditionTheme, merge, originalValue, contextOnly);
 			return;
 		}
 	}
 	if (!isWeb && property === "fontVariant" && typeof value4 === "string") value4 = value4.split(/[,\s]+/).filter(Boolean);
 	var expanded = state.styleProps.noExpand ? null : expandStyle(property, value4, state.conf.settings.styleCompat || "web");
 	if (!expanded) {
-		emitProperty(state, property, value4, condition, merge, originalValue, contextOnly);
+		emitProperty(state, property, value4, condition, conditionKey, conditionWrappers, conditionSelector, conditionTheme, merge, originalValue, contextOnly);
 		return;
 	}
 	if (typeof raw === "string" && expanded.length > 1) {
@@ -949,103 +993,35 @@ function emitValue(state, property, raw, condition, merge, originalValue, contex
 		if (parts1.length > 0 && parts1.length <= (expanded.length === 4 ? 4 : 2)) {
 			for (var index = 0; index < expanded.length; index++) {
 				var partIndex = index === 0 || parts1.length === 1 ? 0 : index === 1 || index === 3 && parts1.length < 4 ? 1 : index === 2 && parts1.length < 3 ? 0 : index;
-				emitResolved(state, expanded[index][0], parts1[partIndex], condition, merge, originalValue, contextOnly);
+				emitResolved(state, expanded[index][0], parts1[partIndex], condition, conditionKey, conditionWrappers, conditionSelector, conditionTheme, merge, originalValue, contextOnly);
 			}
 			return;
 		}
 	}
-	for (var index1 = 0; index1 < expanded.length; index1++) emitProperty(state, expanded[index1][0], expanded[index1][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 || isWeb && state.flatShouldDoClasses || !isWeb && condition.theme && supportsDynamicColorIOS && isColorStyleKey(property))) {
-		var value = source.slice(start, end);
-		emitValue(state, property, value, condition, merge, value, contextOnly);
-	}
-	return true;
+	for (var index1 = 0; index1 < expanded.length; index1++) emitProperty(state, expanded[index1][0], expanded[index1][1], condition, conditionKey, conditionWrappers, conditionSelector, conditionTheme, merge, originalValue, contextOnly);
 }
 function contributeStyleString(state, property, source, merge, originalValue) {
 	var contextOnly = arguments.length > 5 && arguments[5] !== void 0 ? arguments[5] : false;
-	if (process.env.TAMAGUI_RUNTIME_STYLE_VALUE_GRAMMAR === "disabled") {
-		emitValue(state, property, source, null, merge, originalValue !== null && originalValue !== void 0 ? originalValue : source, contextOnly);
-		return true;
-	}
 	if (isWeb && source.indexOf(":") !== -1 && (webShadowParts.has(property) || legacyTransformParts.has(property))) {
 		if (process.env.NODE_ENV === "development") warnOnce(`conditional "${property}" needs its composite property; dropping it`);
 		return true;
 	}
 	if (source.indexOf(":") === -1) {
-		emitValue(state, property, source, null, merge, originalValue !== null && originalValue !== void 0 ? originalValue : source, contextOnly);
-		return true;
-	}
-	var conditions = [];
-	var starts = [];
-	var ends = [];
-	var pending = null;
-	var refused = "";
-	var lifecycle = false;
-	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;
-			var 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) warnOnce(`${property}: "${next.unsupportedState}:" has no native component-state source; dropping the clause`);
-			pending = next;
-			lifecycle || (lifecycle = !!(next.enter || next.exit));
-			return true;
-		},
-		error(code, index2) {
-			if (refused) return;
-			refused = code === "invalid-character" ? `"${source[index2]}" 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 !== null && originalValue !== void 0 ? originalValue : source, contextOnly);
-			return true;
-		}
-		if (process.env.NODE_ENV === "development") warnRefusedValue(property, source, refused);
+		emitValue(state, property, source, 0, "", void 0, "", "", merge, originalValue !== null && originalValue !== void 0 ? originalValue : source, contextOnly);
 		return true;
 	}
-	var hasBase = false;
-	var lastPayloadStart = 0;
-	for (var index = 0; index < conditions.length; index++) {
-		var condition = conditions[index];
-		lastPayloadStart = starts[index];
-		var 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 tokenCategories.color || property in tokenCategoryByProperty) && splitComponents(source.slice(lastPayloadStart)).length > 1) warnOnce(`${property}="${source}" has multiple values after its first conditional. Write the base value before the first conditional.`);
-	if ((!isWeb || !state.flatShouldDoClasses) && lifecycle && !hasBase) {
-		var 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);
-	}
+	scanFlatValue(source, directStyleHandler, state, property, merge, originalValue, contextOnly);
 	return true;
 }
 function contributeFrontendValue(state, property, value, merge) {
 	var contextOnly = arguments.length > 4 && arguments[4] !== void 0 ? arguments[4] : 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);
 	var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
 	try {
 		for (var _iterator = value.clauses[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
 			var clause = _step.value;
-			var condition = getCondition(state, clause.modifiers.join(":"));
-			if (condition && condition.emit && (condition.active || isWeb && state.flatShouldDoClasses)) emitValue(state, property, clause.payload, condition, merge, clause.payload, contextOnly);
+			var source = clause.modifiers.join(":");
+			resolveClauseChain(state, source, 0, source.length, property, clause.payload, merge, clause.payload, contextOnly);
 		}
 	} catch (err) {
 		_didIteratorError = true;
@@ -1061,18 +1037,11 @@ function contributeFrontendValue(state, property, value, merge) {
 }
 function contributeVariantClauseValue(state, property, value, conditionSource, merge, originalValue) {
 	var contextOnly = arguments.length > 6 && arguments[6] !== void 0 ? arguments[6] : false;
-	if (process.env.TAMAGUI_RUNTIME_STYLE_VALUE_GRAMMAR === "disabled") return;
-	var condition = getCondition(state, conditionSource);
-	if (!condition) {
-		if (process.env.NODE_ENV === "development") warnRefusedValue(property, value, `unknown modifier "${conditionSource}"`);
-		return;
-	}
-	if (process.env.NODE_ENV === "development" && condition.unsupportedState) warnOnce(`${property}: "${condition.unsupportedState}:" has no native component-state source; dropping the clause`);
-	if (condition.emit && (condition.active || 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) {
 	var contextOnly = arguments.length > 5 && arguments[5] !== void 0 ? arguments[5] : false;
-	if (process.env.TAMAGUI_RUNTIME_SAFE_AREA !== "disabled" && value === "safe" && isSafeAreaKey(property)) {
+	if (value === "safe" && isSafeAreaKey(property)) {
 		var expanded = expandSafeAreaValue(property);
 		if (expanded) {
 			state.flatUsesSafeArea = true;
@@ -1080,7 +1049,7 @@ function contributeStyleValue(state, property, value, merge, originalValue) {
 			try {
 				for (var _iterator = expanded[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
 					var [key, resolved] = _step.value;
-					emitValue(state, key, resolved, null, merge, originalValue !== null && originalValue !== void 0 ? originalValue : value, contextOnly);
+					emitValue(state, key, resolved, 0, "", void 0, "", "", merge, originalValue !== null && originalValue !== void 0 ? originalValue : value, contextOnly);
 				}
 			} catch (err) {
 				_didIteratorError = true;
@@ -1097,7 +1066,7 @@ function contributeStyleValue(state, property, value, merge, originalValue) {
 	}
 	if (typeof value === "string") return contributeStyleString(state, property, value, merge, originalValue, contextOnly);
 	if (value != null) {
-		emitValue(state, property, value, null, merge, originalValue !== null && originalValue !== void 0 ? originalValue : value, contextOnly);
+		emitValue(state, property, value, 0, "", void 0, "", "", merge, originalValue !== null && originalValue !== void 0 ? originalValue : value, contextOnly);
 		return true;
 	}
 	return false;
@@ -1109,5 +1078,5 @@ function clearDirectStyle(state, property) {
 	delete state.classNames[atomicKey];
 }
 
-export { clearDirectStyle, contributeFrontendValue, contributeStyleString, contributeStyleValue, contributeVariantClauseValue, directStyleSignature, flushDirectStyles, getCondition, getDirectDynamicThemeAccess, platformMatches };
+export { clearDirectStyle, contributeFrontendValue, contributeStyleString, contributeStyleValue, contributeVariantClauseValue, directStyleSignature, flushDirectStyles, getDirectDynamicThemeAccess, platformMatches, resolveClauseChain };
 //# sourceMappingURL=directStyle.native.js.map