styled-components-to-stylex-codemod 0.0.48 → 0.0.49

package/dist/transform.mjs

@@ -1,10 +1,10 @@
 import { t as createModuleResolver } from "./resolve-imports-DgSAddIF.mjs";
 import { a as isDirectionalResult, n as mergeMarkerDeclarations, o as assertValidAdapter, r as DEFAULT_THEME_HOOK, t as transformedComponentAcceptsSx } from "./sx-surface-BzqO3hcC.mjs";
-import { c as UNSUPPORTED_SHOULD_FORWARD_PROP_WARNING, i as getReExportedSourceName, o as resolveBarrelReExportBinding, r as findImportSource, s as Logger, t as fileExports } from "./extract-external-interface-CvkkJZb1.mjs";
+import { a as getReExportedSourceName, c as Logger, i as findImportSource, l as UNSUPPORTED_SHOULD_FORWARD_PROP_WARNING, n as fileExports, s as resolveBarrelReExportBinding, t as walkAst } from "./ast-walk-DigTJqU7.mjs";
 import { n as resolveExistingFilePath, r as toRealPath, t as isRelativeSpecifier } from "./path-utils-BC4U8X_q.mjs";
 import { a as isBackgroundImageValue, c as isSingleBackgroundComponent, d as kebabToCamelCase, f as looksLikeLength, h as sanitizeIdentifier, i as getCommentBody, l as isStyleSectionMarkerComment, m as normalizeWhitespace, n as capitalize, o as isJSDocBlockComment, p as lowerFirst, r as escapeRegex, s as isPrettierIgnoreComment, t as camelToKebabCase, u as isValidIdentifierName } from "./string-utils-DD9wdRHW.mjs";
 import { a as terminateStandaloneInterpolationStatements, i as parseStyledTemplateLiteral, n as isTemplatePlaceholderInSelectorContext, r as PLACEHOLDER_RE } from "./selector-context-heuristic-LVizWWOR.mjs";
-import { i as readStaticJsxLiteral, n as createComponentPropUsageInfo, r as mergeComponentPropUsage, t as KNOWN_NON_ELEMENT_PROPS } from "./prop-usage-Bz3z0V2F.mjs";
+import { a as mergeComponentPropUsage, i as getExhaustiveObservedStaticValues, n as createComponentPropUsageInfo, o as readStaticJsxLiteral, r as formatObservedVariantCondition, t as KNOWN_NON_ELEMENT_PROPS } from "./prop-usage-QtOSsKTr.mjs";
 import { createRequire } from "node:module";
 import jscodeshift from "jscodeshift";
 import { basename, dirname, isAbsolute, join, relative, resolve, sep } from "node:path";
@@ -251,6 +251,11 @@ const STYLEX_STRING_ONLY_CSS_PROPS = new Set([
 	"gridColumnEnd",
 	"outlineOffset"
 ]);
+const GRID_LINE_STYLEX_PROPS = new Set([
+	"gridArea",
+	"gridColumn",
+	"gridRow"
+]);
 const UNSUPPORTED_STYLEX_CSS_PROPS = new Set([
 	"all",
 	"scroll-margin-block",
@@ -403,9 +408,10 @@ function cssDeclarationToStylexDeclarations(decl) {
 		if (decl.value.kind === "interpolated") return expandInterpolatedBorder(prop, directionCapitalized, decl.value);
 		return borderShorthandToStylex(raw, directionCapitalized);
 	}
+	const stylexProp = cssPropertyToStylexProp(prop);
 	return [{
-		prop: cssPropertyToStylexProp(prop),
-		value: decl.value
+		prop: stylexProp,
+		value: normalizeGridLineSlashSpacing(stylexProp, decl.value)
 	}];
 }
 function cssPropertyToStylexProp(prop) {
@@ -423,6 +429,32 @@ const BORDER_STYLES = new Set([
 	"inset",
 	"outset"
 ]);
+function normalizeGridLineSlashSpacing(stylexProp, value) {
+	if (!GRID_LINE_STYLEX_PROPS.has(stylexProp) || value.kind !== "static") return value;
+	return {
+		kind: "static",
+		value: normalizeUnescapedSlashSpacing(value.value)
+	};
+}
+function normalizeUnescapedSlashSpacing(value) {
+	let output = "";
+	for (let index = 0; index < value.length; index++) {
+		const char = value.charAt(index);
+		if (char === "/" && !isEscapedAt(value, index)) {
+			output = output.replace(/\s+$/g, "");
+			output += " / ";
+			while (index + 1 < value.length && /\s/.test(value.charAt(index + 1))) index++;
+			continue;
+		}
+		output += char;
+	}
+	return output;
+}
+function isEscapedAt(value, index) {
+	let backslashCount = 0;
+	for (let cursor = index - 1; cursor >= 0 && value.charAt(cursor) === "\\"; cursor--) backslashCount++;
+	return backslashCount % 2 === 1;
+}
 /**
 * Expands an interpolated border shorthand into separate width/style/color properties.
 * Extracts static width and style tokens from the value parts, leaving the interpolated
@@ -944,6 +976,13 @@ function isAstNode(v) {
 	return !!v && typeof v === "object" && !Array.isArray(v) && typeof v.type === "string";
 }
 /**
+* Generic type guard narrowing an unknown value to an AST node of a specific `type`.
+* Returns false for arrays and non-objects.
+*/
+function isNodeOfType(node, type) {
+	return isAstNode(node) && node.type === type;
+}
+/**
 * Type guard for function-like nodes including class/object methods.
 */
 function isFunctionNode$1(node) {
@@ -1140,6 +1179,26 @@ function collectIdentifiers(node, out) {
 	}
 }
 /**
+* Collects binding names introduced by an object/array destructuring pattern.
+*/
+function collectPatternBindingNames$2(node, names) {
+	if (!node || typeof node !== "object") return;
+	if (Array.isArray(node)) {
+		for (const child of node) collectPatternBindingNames$2(child, names);
+		return;
+	}
+	const typed = node;
+	if (typed.type === "Identifier" && typed.name) {
+		names.add(typed.name);
+		return;
+	}
+	if (typed.type === "MemberExpression" || typed.type === "OptionalMemberExpression" || typed.type === "TSQualifiedName") return;
+	for (const key of Object.keys(node)) {
+		if (key === "loc" || key === "comments" || key === "leadingComments") continue;
+		collectPatternBindingNames$2(node[key], names);
+	}
+}
+/**
 * Converts an AST literal node to its static JavaScript value.
 *
 * Supports:
@@ -2629,34 +2688,56 @@ function defaultExportMatches(component, names) {
 //#region src/internal/utilities/wrapped-component-interface.ts
 function wrappedComponentInterfaceFor(ctx, componentLocalName) {
 	if (!ctx.adapter.useSxProp) return;
-	const importInfo = ctx.importMap?.get(componentLocalName);
+	const [rootLocalName, ...memberPath] = componentLocalName.split(".");
+	if (!rootLocalName) return;
+	const importInfo = ctx.importMap?.get(rootLocalName);
 	if (importInfo) {
-		const typedInterface = importInfo.source.kind === "absolutePath" ? typedComponentInterfaceFor(ctx, importInfo.source.value, importInfo.importedName === "default" ? [componentLocalName, importInfo.importedName] : [importInfo.importedName]) : void 0;
+		const componentNames = memberPath.length > 0 ? memberComponentNames(rootLocalName, importInfo.importedName, memberPath) : importInfo.importedName === "default" ? [rootLocalName, importInfo.importedName] : [importInfo.importedName];
+		const typedInterface = importInfo.source.kind === "absolutePath" ? typedComponentInterfaceFor(ctx, importInfo.source.value, componentNames) : void 0;
 		const adapterResult = ctx.adapter.wrappedComponentInterface?.({
 			localName: componentLocalName,
 			importSource: importInfo.source.value,
 			importedName: importInfo.importedName,
+			...memberPath.length > 0 ? { memberPath } : {},
 			filePath: ctx.file.path
 		});
-		if (adapterResult !== void 0) {
-			if (adapterResult.acceptsSx && hasTypedSxConstraints(typedInterface)) return {
-				...adapterResult,
-				sxExcludedProperties: mergeUniqueStrings(adapterResult.sxExcludedProperties, typedInterface.sxExcludedProperties ?? []),
-				sxAllowedProperties: mergeAllowedPropertyLists(adapterResult.sxAllowedProperties, typedInterface.sxAllowedProperties)
-			};
-			return adapterResult;
-		}
+		if (adapterResult !== void 0) return mergeWrappedComponentInterface(adapterResult, typedInterface);
 		return typedInterface;
 	}
 	return typedComponentInterfaceFor(ctx, ctx.file.path, [componentLocalName]);
 }
-function hasTypedSxConstraints(typedInterface) {
-	return typedInterface !== void 0 && ((typedInterface.sxExcludedProperties?.length ?? 0) > 0 || typedInterface.sxAllowedProperties !== void 0);
+function memberComponentNames(rootLocalName, importedName, memberPath) {
+	const memberName = memberPath[memberPath.length - 1];
+	const dottedImportedName = importedName === "default" ? [rootLocalName, ...memberPath].join(".") : [importedName, ...memberPath].join(".");
+	return [...new Set([
+		dottedImportedName,
+		[rootLocalName, ...memberPath].join("."),
+		memberName
+	])].filter((name) => typeof name === "string" && name.length > 0);
+}
+function mergeWrappedComponentInterface(adapterResult, typedInterface) {
+	if (!adapterResult.acceptsSx || !hasTypedSxMetadata(typedInterface)) return adapterResult;
+	return {
+		...adapterResult,
+		...typedInterface.sxTarget ? { sxTarget: typedInterface.sxTarget } : {},
+		sxExcludedProperties: mergeUniqueStrings(adapterResult.sxExcludedProperties, typedInterface.sxExcludedProperties ?? []),
+		sxAllowedProperties: mergeAllowedPropertyLists(adapterResult.sxAllowedProperties, typedInterface.sxAllowedProperties)
+	};
+}
+/**
+* Checks if the typed interface has any sx metadata to merge with the adapter result.
+* This includes sxTarget (even without property constraints), property exclusions,
+* or allowed property lists.
+*/
+function hasTypedSxMetadata(typedInterface) {
+	if (!typedInterface) return false;
+	return typedInterface.sxTarget !== void 0 || (typedInterface.sxExcludedProperties?.length ?? 0) > 0 || typedInterface.sxAllowedProperties !== void 0;
 }
 function typedComponentInterfaceFor(ctx, filePath, componentNames) {
 	const typedComponent = findTypeScriptComponentMetadata(ctx.options.crossFileInfo?.typeScriptMetadata, filePath, componentNames);
 	if (typedComponent?.supportsSxProp) return {
 		acceptsSx: true,
+		...typedComponent.sxTarget ? { sxTarget: typedComponent.sxTarget } : {},
 		sxExcludedProperties: typedComponent.sxExcludedProperties,
 		sxAllowedProperties: typedComponent.sxAllowedProperties
 	};
@@ -2887,7 +2968,7 @@ function canInlineSingleUseSxAwareComponentWrapper(args) {
 	if (hasAttrsAsOverride(decl.attrsInfo) || hasAttrsPayload(decl.attrsInfo)) return false;
 	if (needsShouldForwardPropWrapper(decl) || decl.attrWrapper || decl.bridgeClassName || decl.enumVariant || (decl.inlineStyleProps?.length ?? 0) > 0 || (decl.styleFnFromProps?.length ?? 0) > 0 || (decl.variantDimensions?.length ?? 0) > 0 || Object.keys(decl.variantStyleKeys ?? {}).length > 0 || (decl.compoundVariants?.length ?? 0) > 0 || (decl.pseudoAliasSelectors?.length ?? 0) > 0 || (decl.pseudoExpandSelectors?.length ?? 0) > 0 || (decl.localElementOverrides?.length ?? 0) > 0 || (decl.needsUseThemeHook?.length ?? 0) > 0 || (decl.extraStylexPropsArgs?.some((arg) => arg.when) ?? false)) return false;
 	const componentInterface = wrappedComponentInterfaceFor(ctx, decl.base.ident);
-	return componentInterface?.acceptsSx === true && (componentInterface.sxExcludedProperties?.length ?? 0) === 0 && componentInterface.sxAllowedProperties === void 0;
+	return componentInterface?.acceptsSx === true && componentInterface.sxTarget !== "inner" && (componentInterface.sxExcludedProperties?.length ?? 0) === 0 && componentInterface.sxAllowedProperties === void 0;
 }
 function hasAttrsPayload(attrsInfo) {
 	return !!(Object.keys(attrsInfo?.staticAttrs ?? {}).length > 0 || (attrsInfo?.conditionalAttrs?.length ?? 0) > 0 || (attrsInfo?.defaultAttrs?.length ?? 0) > 0 || (attrsInfo?.dynamicAttrs?.length ?? 0) > 0 || (attrsInfo?.invertedBoolAttrs?.length ?? 0) > 0 || Object.keys(attrsInfo?.attrsStaticStyles ?? {}).length > 0 || attrsInfo?.attrsStaticStyleExpr || (attrsInfo?.attrsDynamicStyles?.length ?? 0) > 0);
@@ -3087,6 +3168,121 @@ function getBridgeClassVar(decl) {
 	return decl.bridgeClassName ? bridgeClassVarName(decl.localName) : void 0;
 }
 //#endregion
+//#region src/internal/utilities/element-type-host.ts
+function isStyleOnlyElementTypeHost(args) {
+	const { j, root, hostName, elementTypePropNames } = args;
+	const fnNode = findLocalComponentFunction(j, root, hostName);
+	if (!fnNode) return false;
+	const slots = collectElementTypeSlotBindings(j, fnNode, elementTypePropNames);
+	if (slots.size === 0) return false;
+	const fn = j(fnNode);
+	let renderedSlotCount = 0;
+	let forwardsClassName = false;
+	fn.find(j.JSXOpeningElement).forEach((path) => {
+		const node = path.node;
+		const tag = getRootJsxIdentifierName(node.name);
+		if (!tag || !slots.has(tag)) return;
+		renderedSlotCount += 1;
+		for (const attr of node.attributes ?? []) if (attr.type === "JSXSpreadAttribute") forwardsClassName = true;
+		else if (attr.type === "JSXAttribute" && attr.name?.type === "JSXIdentifier" && attr.name.name === "className") forwardsClassName = true;
+	});
+	if (forwardsClassName || renderedSlotCount === 0) return false;
+	let slotEscapes = false;
+	fn.find(j.Identifier).forEach((path) => {
+		const name = path.node.name;
+		if (!name || !slots.has(name)) return;
+		const parent = path.parentPath?.node;
+		if (!isSlotBindingOrJsxTagReference(path.node, parent)) slotEscapes = true;
+	});
+	return !slotEscapes;
+}
+function findLocalComponentFunction(j, root, hostName) {
+	let fnNode = null;
+	root.find(j.FunctionDeclaration).forEach((path) => {
+		const node = path.node;
+		if (node.id?.name === hostName) fnNode ??= node;
+	});
+	if (fnNode) return fnNode;
+	root.find(j.VariableDeclarator).forEach((path) => {
+		const node = path.node;
+		if (node.id?.name !== hostName) return;
+		const init = node.init;
+		if (init?.type === "ArrowFunctionExpression" || init?.type === "FunctionExpression") fnNode ??= init;
+	});
+	return fnNode;
+}
+function collectElementTypeSlotBindings(j, fnNode, elementTypePropNames) {
+	const slots = /* @__PURE__ */ new Set();
+	const first = (fnNode.params ?? [])[0];
+	if (first?.type === "ObjectPattern") for (const prop of first.properties ?? []) {
+		if (prop.type !== "ObjectProperty" && prop.type !== "Property") continue;
+		const key = prop.key;
+		if (key?.type !== "Identifier" || !key.name || !elementTypePropNames.has(key.name)) continue;
+		const value = prop.value;
+		if (value?.type === "Identifier") slots.add(value.name ?? "");
+		else if (value?.type === "AssignmentPattern" && value.left?.type === "Identifier") slots.add(value.left.name ?? "");
+	}
+	const propsName = first?.type === "Identifier" ? first.name : null;
+	if (propsName && fnNode.body) j(fnNode.body).find(j.VariableDeclarator).forEach((path) => {
+		const node = path.node;
+		const id = node.id;
+		if (id?.type === "Identifier" && id.name && initReferencesElementTypeProp(node.init, propsName, elementTypePropNames)) slots.add(id.name);
+	});
+	slots.delete("");
+	return slots;
+}
+function initReferencesElementTypeProp(init, propsName, elementTypePropNames) {
+	const node = init;
+	if (!node) return false;
+	if (node.type === "MemberExpression" && node.computed !== true && node.object?.type === "Identifier" && node.object.name === propsName && node.property?.type === "Identifier" && elementTypePropNames.has(node.property.name ?? "")) return true;
+	if (node.type === "LogicalExpression") return initReferencesElementTypeProp(node.left, propsName, elementTypePropNames);
+	return false;
+}
+function isSlotBindingOrJsxTagReference(idNode, parent) {
+	if (!parent) return false;
+	switch (parent.type) {
+		case "JSXOpeningElement":
+		case "JSXClosingElement": return parent.name === idNode;
+		case "VariableDeclarator": return parent.id === idNode;
+		case "ObjectProperty":
+		case "Property": return parent.value === idNode;
+		case "AssignmentPattern": return parent.left === idNode;
+		case "MemberExpression": return parent.property === idNode;
+		default: return false;
+	}
+}
+//#endregion
+//#region src/internal/utilities/component-value-references.ts
+/**
+* True when this Identifier path is a non-JSX value reference to a styled component (not its
+* declaration, not a JSX tag, not a `styled(...)` extension or tagged-template tag).
+*/
+function isNonJsxStyledValueReferencePath(path, styledDefaultImport) {
+	const parent = path.parentPath?.node;
+	if (parent?.type === "VariableDeclarator" && parent.id === path.node) return false;
+	if (parent?.type === "JSXOpeningElement" || parent?.type === "JSXClosingElement") return false;
+	if (parent?.type === "JSXMemberExpression" && parent.object === path.node) return false;
+	if (parent?.type === "CallExpression") {
+		const callee = parent.callee;
+		if (callee?.type === "Identifier" && callee.name === styledDefaultImport) return false;
+		if (callee?.type === "MemberExpression" && callee.object?.type === "CallExpression" && callee.object.callee?.type === "Identifier" && callee.object.callee.name === styledDefaultImport) return false;
+	}
+	if (parent?.type === "TaggedTemplateExpression") return false;
+	if (parent?.type === "CallExpression" && path.parentPath?.parentPath?.node?.type === "TaggedTemplateExpression") return false;
+	if (parent?.type === "TemplateLiteral") return false;
+	return true;
+}
+/** Returns the subset of `names` that appear as a non-JSX value reference anywhere in the file. */
+function componentsReferencedAsValue(root, j, names, styledDefaultImport) {
+	const referenced = /* @__PURE__ */ new Set();
+	if (names.size === 0) return referenced;
+	root.find(j.Identifier).forEach((path) => {
+		const name = path.node.name;
+		if (name && names.has(name) && !referenced.has(name) && isNonJsxStyledValueReferencePath(path, styledDefaultImport)) referenced.add(name);
+	});
+	return referenced;
+}
+//#endregion
 //#region src/internal/utilities/jsx-name-utils.ts
 function jsxNamePath(name) {
 	const node = name;
@@ -3179,7 +3375,7 @@ function specifierExportedName(spec) {
 * - Disjunction: `"a || b"` → `a || b`
 * - Grouped negation: `"!(a || b)"` → `!(a || b)`
 */
-function parseVariantWhenToAst(j, when, booleanProps) {
+function parseVariantWhenToAst(j, when, booleanProps, knownProps) {
 	const buildMemberExpr = (raw) => {
 		if (!raw.includes(".")) return null;
 		const parts = raw.split(".").map((part) => part.trim()).filter(Boolean);
@@ -3206,14 +3402,15 @@ function parseVariantWhenToAst(j, when, booleanProps) {
 					propName: null,
 					expr: j.identifier(trimmedRaw)
 				};
+				const expr = parts.slice(2).reduce((acc, part) => j.memberExpression(acc, j.identifier(part)), j.identifier(propRoot));
 				return {
-					propName: propRoot,
-					expr: parts.slice(2).reduce((acc, part) => j.memberExpression(acc, j.identifier(part)), j.identifier(propRoot))
+					propName: isConditionPropIdentifier(propRoot) ? propRoot : null,
+					expr
 				};
 			}
 			const memberExpr = buildMemberExpr(trimmedRaw);
 			if (memberExpr) return {
-				propName: root === "theme" ? null : root ?? null,
+				propName: root && root !== "theme" && isConditionPropIdentifier(root) ? root : null,
 				expr: memberExpr
 			};
 			return {
@@ -3222,7 +3419,7 @@ function parseVariantWhenToAst(j, when, booleanProps) {
 			};
 		}
 		return {
-			propName: trimmedRaw === "theme" ? null : trimmedRaw,
+			propName: trimmedRaw === "theme" || !isConditionPropIdentifier(trimmedRaw) ? null : trimmedRaw,
 			expr: j.identifier(trimmedRaw)
 		};
 	};
@@ -3233,7 +3430,7 @@ function parseVariantWhenToAst(j, when, booleanProps) {
 		isBoolean: true
 	};
 	if (trimmed.startsWith("!(") && trimmed.endsWith(")")) {
-		const innerParsed = parseVariantWhenToAst(j, trimmed.slice(2, -1).trim(), booleanProps);
+		const innerParsed = parseVariantWhenToAst(j, trimmed.slice(2, -1).trim(), booleanProps, knownProps);
 		return {
 			cond: j.unaryExpression("!", innerParsed.cond),
 			props: innerParsed.props,
@@ -3241,7 +3438,7 @@ function parseVariantWhenToAst(j, when, booleanProps) {
 		};
 	}
 	if (trimmed.includes("&&")) {
-		const parsed = trimmed.split("&&").map((s) => s.trim()).filter(Boolean).map((p) => parseVariantWhenToAst(j, p, booleanProps));
+		const parsed = trimmed.split("&&").map((s) => s.trim()).filter(Boolean).map((p) => parseVariantWhenToAst(j, p, booleanProps, knownProps));
 		const firstParsed = parsed[0];
 		if (!firstParsed) return {
 			cond: j.identifier("true"),
@@ -3255,7 +3452,7 @@ function parseVariantWhenToAst(j, when, booleanProps) {
 		};
 	}
 	if (trimmed.includes(" || ")) {
-		const parsed = trimmed.split(" || ").map((s) => s.trim()).filter(Boolean).map((p) => parseVariantWhenToAst(j, p, booleanProps));
+		const parsed = trimmed.split(" || ").map((s) => s.trim()).filter(Boolean).map((p) => parseVariantWhenToAst(j, p, booleanProps, knownProps));
 		const firstParsedOr = parsed[0];
 		if (!firstParsedOr) return {
 			cond: j.identifier("true"),
@@ -3269,7 +3466,7 @@ function parseVariantWhenToAst(j, when, booleanProps) {
 		};
 	}
 	if (trimmed.startsWith("!")) {
-		const innerParsed = parseVariantWhenToAst(j, trimmed.slice(1).trim(), booleanProps);
+		const innerParsed = parseVariantWhenToAst(j, trimmed.slice(1).trim(), booleanProps, knownProps);
 		return {
 			cond: j.unaryExpression("!", innerParsed.cond),
 			props: innerParsed.props,
@@ -3289,6 +3486,12 @@ function parseVariantWhenToAst(j, when, booleanProps) {
 			isBoolean: true
 		};
 	}
+	const expression = parseConditionExpression(j, trimmed);
+	if (expression) return {
+		cond: expression,
+		props: collectGuardExpressionPropNames(expression, knownProps),
+		isBoolean: true
+	};
 	const simple = parsePropRef(trimmed);
 	const propIsBoolean = !!(simple.propName && booleanProps?.has(simple.propName));
 	return {
@@ -3297,14 +3500,103 @@ function parseVariantWhenToAst(j, when, booleanProps) {
 		isBoolean: propIsBoolean
 	};
 }
+function parseConditionExpression(j, source) {
+	if (!source.includes("(") && !/[<>?[\]]/.test(source)) return null;
+	try {
+		const declarator = j(`const __condition = (${source});`).find(j.VariableDeclarator).nodes()[0];
+		return unwrapParenthesizedExpression(declarator?.init) ?? null;
+	} catch {
+		return null;
+	}
+}
+function unwrapParenthesizedExpression(expr) {
+	let current = expr;
+	while (current && current.type === "ParenthesizedExpression") current = current.expression;
+	return current ?? null;
+}
+function collectGuardExpressionPropNames(expr, knownProps) {
+	const props = /* @__PURE__ */ new Set();
+	collectGuardProps(expr, props, knownProps);
+	return [...props];
+}
+function collectGuardProps(node, props, knownProps) {
+	if (!node || typeof node !== "object") return;
+	const record = node;
+	const type = record.type;
+	if (type === "Identifier") {
+		const name = record.name;
+		if (typeof name === "string" && isConditionPropIdentifier(name, knownProps)) props.add(name);
+		return;
+	}
+	if (type === "CallExpression" || type === "OptionalCallExpression") {
+		if (isMemberExpressionRecord(record.callee)) collectMemberExpressionProp(record.callee, props, knownProps);
+		const args = record.arguments;
+		if (Array.isArray(args)) for (const arg of args) collectGuardProps(arg, props, knownProps);
+		return;
+	}
+	if (type === "MemberExpression" || type === "OptionalMemberExpression") {
+		collectMemberExpressionProp(record, props, knownProps);
+		return;
+	}
+	for (const [key, value] of Object.entries(record)) {
+		if (key === "type" || key === "loc" || key === "comments" || key === "leadingComments") continue;
+		if (Array.isArray(value)) for (const item of value) collectGuardProps(item, props, knownProps);
+		else collectGuardProps(value, props, knownProps);
+	}
+}
+function isMemberExpressionRecord(node) {
+	if (!node || typeof node !== "object") return false;
+	const type = node.type;
+	return type === "MemberExpression" || type === "OptionalMemberExpression";
+}
+function collectMemberExpressionProp(node, props, knownProps) {
+	const object = node.object;
+	const property = node.property;
+	const rootName = readMemberRootIdentifier(object);
+	if (rootName === "props" || rootName === "p") {
+		const propName = findPropsDirectProperty(node);
+		if (typeof propName === "string" && isConditionPropIdentifier(propName, knownProps)) props.add(propName);
+	} else if (typeof rootName === "string" && rootName !== "theme" && isConditionPropIdentifier(rootName, knownProps)) props.add(rootName);
+	if (node.computed) collectGuardProps(property, props, knownProps);
+}
+function readMemberRootIdentifier(node) {
+	if (!node) return null;
+	if (node.type === "Identifier" && typeof node.name === "string") return node.name;
+	if (node.type === "MemberExpression" || node.type === "OptionalMemberExpression") return readMemberRootIdentifier(node.object);
+	return null;
+}
+/**
+* For chained member expressions rooted at `props` or `p`, finds the property
+* directly on `props`. For `props.size.startsWith`, returns "size".
+* For `props.foo`, returns "foo".
+*/
+function findPropsDirectProperty(node) {
+	const object = node.object;
+	const property = node.property;
+	if (!object) return null;
+	if (object.type === "Identifier") {
+		const objName = object.name;
+		if (objName === "props" || objName === "p") return property?.type === "Identifier" ? property.name : null;
+		return null;
+	}
+	if (object.type === "MemberExpression" || object.type === "OptionalMemberExpression") return findPropsDirectProperty(object);
+	return null;
+}
+function isConditionPropIdentifier(name, knownProps) {
+	if (knownProps) return knownProps.has(name);
+	if (name === "undefined" || name === "NaN" || name === "Infinity") return false;
+	if (/^[A-Z][A-Z0-9_]*$/.test(name)) return false;
+	if (/^[A-Z][a-zA-Z0-9]*$/.test(name) && !name.includes("_")) return false;
+	return isValidIdentifierName(name);
+}
 /**
 * Parses a "when" string and optionally collects the referenced prop names
 * into a `destructureProps` array so they can be included in the wrapper
 * function's parameter destructuring.
 */
 function collectConditionProps(j, args) {
-	const { when, destructureProps, booleanProps } = args;
-	const parsed = parseVariantWhenToAst(j, when, booleanProps);
+	const { when, destructureProps, booleanProps, knownProps } = args;
+	const parsed = parseVariantWhenToAst(j, when, booleanProps, knownProps);
 	if (destructureProps) {
 		for (const p of parsed.props) if (p && !destructureProps.includes(p)) destructureProps.push(p);
 	}
@@ -3345,7 +3637,7 @@ function areEquivalentWhen(left, right) {
 * Two entries with `when: "prop"` and `when: "!prop"` are merged into
 * `prop ? trueExpr : falseExpr` instead of emitting separate conditionals.
 */
-function buildExtraStylexPropsExprs(j, args) {
+function buildExtraStylexPropsExprEntries(j, args) {
 	const { entries, destructureProps, booleanProps } = args;
 	const result = [];
 	const consumed = /* @__PURE__ */ new Set();
@@ -3353,7 +3645,12 @@ function buildExtraStylexPropsExprs(j, args) {
 		if (consumed.has(i)) continue;
 		const entry = entries[i];
 		if (!entry.when) {
-			result.push(entry.expr);
+			result.push({
+				expr: entry.expr,
+				conditional: false,
+				afterBase: entry.afterBase,
+				afterVariants: entry.afterVariants
+			});
 			continue;
 		}
 		const complementIndex = findComplementaryEntry(entries, i, consumed);
@@ -3368,7 +3665,12 @@ function buildExtraStylexPropsExprs(j, args) {
 			const isEntryPositive = areEquivalentWhen(entry.when, positiveWhenRaw);
 			const trueExpr = isEntryPositive ? entry.expr : other.expr;
 			const falseExpr = isEntryPositive ? other.expr : entry.expr;
-			result.push(j.conditionalExpression(cond, trueExpr, falseExpr));
+			result.push({
+				expr: j.conditionalExpression(cond, trueExpr, falseExpr),
+				conditional: true,
+				afterBase: entry.afterBase || other.afterBase,
+				afterVariants: entry.afterVariants || other.afterVariants
+			});
 			continue;
 		}
 		const { cond, isBoolean } = collectConditionProps(j, {
@@ -3376,14 +3678,22 @@ function buildExtraStylexPropsExprs(j, args) {
 			destructureProps,
 			booleanProps
 		});
-		result.push(makeConditionalStyleExpr(j, {
-			cond,
-			expr: entry.expr,
-			isBoolean
-		}));
+		result.push({
+			expr: makeConditionalStyleExpr(j, {
+				cond,
+				expr: entry.expr,
+				isBoolean
+			}),
+			conditional: true,
+			afterBase: entry.afterBase,
+			afterVariants: entry.afterVariants
+		});
 	}
 	return result;
 }
+function buildExtraStylexPropsExprs(j, args) {
+	return buildExtraStylexPropsExprEntries(j, args).map((entry) => entry.expr);
+}
 /**
 * Merges adjacent `cond && styleA, !cond && styleB` expressions into
 * `cond ? styleA : styleB` without reordering other style args.
@@ -4499,23 +4809,6 @@ function mapAst(root, replacer) {
 * Recursively walk an AST tree and call `visitor` on each node to collect data.
 * Skips `loc` and `comments` keys.
 */
-function walkAst(root, visitor) {
-	const visit = (node) => {
-		if (!node || typeof node !== "object") return;
-		if (Array.isArray(node)) {
-			for (const child of node) visit(child);
-			return;
-		}
-		const n = node;
-		visitor(n);
-		for (const key of Object.keys(n)) {
-			if (key === "loc" || key === "comments") continue;
-			const child = n[key];
-			if (child && typeof child === "object") visit(child);
-		}
-	};
-	visit(root);
-}
 //#endregion
 //#region src/internal/emit-wrappers/types.ts
 /**
@@ -4835,38 +5128,30 @@ function buildChildStyleObjectList(childKeys, resolvedStyleObjects) {
 //#region src/internal/utilities/style-composition-plan.ts
 function buildStyleKeySequence(ctx, decl, options) {
 	const entries = [];
-	const afterBase = new Set(decl.extraStyleKeysAfterBase ?? []);
+	const extraEntries = buildExtraStyleEntries(decl);
 	if (options?.includeLocalBase !== false) for (const styleKey of localBaseStyleKeys(ctx, decl)) entries.push({
 		styleKey,
 		patchable: false,
 		source: "base"
 	});
-	for (const styleKey of decl.extraStyleKeys ?? []) if (!afterBase.has(styleKey)) entries.push({
-		styleKey,
-		patchable: false,
-		source: "mixin"
-	});
+	entries.push(...extraEntries.beforeBase);
 	if (!decl.skipBaseStyleRef) entries.push({
 		styleKey: decl.styleKey,
 		patchable: true,
 		source: "base"
 	});
-	for (const styleKey of decl.extraStyleKeysAfterBase ?? []) entries.push({
-		styleKey,
-		patchable: true,
-		source: "mixin"
-	});
+	entries.push(...extraEntries.afterBase);
 	const variantAndStyleFnEntries = buildVariantAndStyleFnEntries(decl);
 	const variantDimensionEntries = buildVariantDimensionEntries(decl);
 	entries.push(...variantAndStyleFnEntries.immediate);
 	entries.push(...variantDimensionEntries.immediate);
-	entries.push(...buildExtraStylexPropsArgEntries(decl));
 	entries.push(...buildThemeEntries(decl));
 	entries.push(...buildAttrWrapperEntries(decl));
 	entries.push(...buildPseudoExpandEntries(decl));
 	entries.push(...buildPseudoAliasEntries(decl));
 	entries.push(...buildCompoundVariantEntries(decl));
 	entries.push(...mergeOrderedEntries$1([variantDimensionEntries.ordered, variantAndStyleFnEntries.ordered]));
+	entries.push(...extraEntries.afterVariants);
 	entries.push(...buildEnumVariantEntries(decl));
 	entries.push(...buildCallSiteCombinedEntries(decl));
 	entries.push(...buildPromotedStyleEntries(decl));
@@ -4877,13 +5162,89 @@ function buildStyleKeySequence(ctx, decl, options) {
 	});
 	return entries;
 }
-function buildExtraStylexPropsArgEntries(decl) {
-	return (decl.extraStylexPropsArgs ?? []).map((_, index) => ({
+function buildExtraStyleEntries(decl) {
+	const groups = {
+		beforeBase: [],
+		afterBase: [],
+		afterVariants: []
+	};
+	const mixinOrder = decl.mixinOrder;
+	const extraStyleKeys = decl.extraStyleKeys ?? [];
+	const propsArgs = (decl.extraStylexPropsArgs ?? []).map((arg, index) => ({
+		arg,
+		index
+	}));
+	const afterBaseKeys = new Set(decl.extraStyleKeysAfterBase ?? []);
+	if (!mixinOrder || mixinOrder.length === 0) {
+		for (const styleKey of extraStyleKeys) {
+			const entry = styleKeyEntry(styleKey, afterBaseKeys.has(styleKey));
+			if (afterBaseKeys.has(styleKey)) groups.afterBase.push(entry);
+			else groups.beforeBase.push(entry);
+		}
+		for (const propsArg of propsArgs) pushPropsArgEntry(groups, decl, propsArg.index, "afterBase");
+		return groups;
+	}
+	let styleKeyIndex = 0;
+	let propsArgIndex = 0;
+	for (const entryKind of mixinOrder) if (entryKind === "styleKey" && styleKeyIndex < extraStyleKeys.length) {
+		pushStyleKeyEntry(groups, extraStyleKeys[styleKeyIndex], afterBaseKeys);
+		styleKeyIndex += 1;
+	} else if (entryKind === "propsArg" && propsArgIndex < propsArgs.length) propsArgIndex = pushPropsArgsThroughNextUnconditional({
+		groups,
+		decl,
+		propsArgs,
+		propsArgIndex,
+		fallbackGroup: "beforeBase"
+	});
+	for (; styleKeyIndex < extraStyleKeys.length; styleKeyIndex++) pushStyleKeyEntry(groups, extraStyleKeys[styleKeyIndex], afterBaseKeys);
+	for (; propsArgIndex < propsArgs.length; propsArgIndex++) {
+		const propsArg = propsArgs[propsArgIndex];
+		if (propsArg) pushPropsArgEntry(groups, decl, propsArg.index, "afterBase");
+	}
+	return groups;
+}
+function pushPropsArgsThroughNextUnconditional(args) {
+	let propsArgIndex = args.propsArgIndex;
+	while (propsArgIndex < args.propsArgs.length) {
+		const propsArg = args.propsArgs[propsArgIndex];
+		if (!propsArg?.arg.when) break;
+		pushPropsArgEntry(args.groups, args.decl, propsArg.index, args.fallbackGroup);
+		propsArgIndex += 1;
+	}
+	const propsArg = args.propsArgs[propsArgIndex];
+	if (propsArg) {
+		pushPropsArgEntry(args.groups, args.decl, propsArg.index, args.fallbackGroup);
+		propsArgIndex += 1;
+	}
+	return propsArgIndex;
+}
+function pushStyleKeyEntry(groups, styleKey, afterBaseKeys) {
+	const afterBase = afterBaseKeys.has(styleKey);
+	const entry = styleKeyEntry(styleKey, afterBase);
+	if (afterBase) groups.afterBase.push(entry);
+	else groups.beforeBase.push(entry);
+}
+function pushPropsArgEntry(groups, decl, index, fallbackGroup) {
+	const arg = decl.extraStylexPropsArgs?.[index];
+	const entry = propsArgEntry(decl, index);
+	if (arg?.afterVariants) groups.afterVariants.push(entry);
+	else if (arg?.afterBase || fallbackGroup === "afterBase") groups.afterBase.push(entry);
+	else groups.beforeBase.push(entry);
+}
+function styleKeyEntry(styleKey, patchable) {
+	return {
+		styleKey,
+		patchable,
+		source: "mixin"
+	};
+}
+function propsArgEntry(decl, index) {
+	return {
 		styleKey: `${decl.styleKey}ExtraStylexPropsArg${index}`,
 		patchable: false,
 		contributesDynamic: true,
 		source: "propsArg"
-	}));
+	};
 }
 function localBaseStyleKeys(ctx, decl) {
 	if (decl.extendsStyleKey) return [decl.extendsStyleKey];
@@ -5869,16 +6230,7 @@ function walk(node, visit, seen = /* @__PURE__ */ new WeakSet()) {
 //#endregion
 //#region src/internal/transform-steps/analyze-before-emit.ts
 const INLINE_USAGE_THRESHOLD = 1;
-const REACT_WINDOW_SOURCE = "react-window";
-const REACT_WINDOW_ELEMENT_TYPE_PROPS = new Set(["innerElementType", "outerElementType"]);
-const REACT_WINDOW_COMPONENT_EXPORTS = new Set([
-	"FixedSizeGrid",
-	"FixedSizeList",
-	"Grid",
-	"List",
-	"VariableSizeGrid",
-	"VariableSizeList"
-]);
+const ELEMENT_TYPE_PROP_NAMES = new Set(["innerElementType", "outerElementType"]);
 /**
 * Analyzes declarations to determine wrappers, exports, usage patterns, and import aliasing before emit.
 */
@@ -5957,6 +6309,7 @@ function analyzeBeforeEmitStep(ctx) {
 	};
 	const isUsedInJsx = (name) => getJsxUsageCount(name) > 0;
 	const canInlineImportedComponentWrapper = (decl) => {
+		if (decl.base.kind === "component" && wrappedComponentInterfaceFor(ctx, decl.base.ident)?.sxTarget === "inner") return false;
 		if (decl.variantStyleKeys && Object.keys(decl.variantStyleKeys).length > 0) return false;
 		if (decl.variantDimensions && decl.variantDimensions.length > 0 && !decl.inlinedBaseComponent?.hasInlineJsxVariants) return false;
 		if (decl.inlineStyleProps && decl.inlineStyleProps.length > 0) return false;
@@ -6030,32 +6383,66 @@ function analyzeBeforeEmitStep(ctx) {
 		const { className, style, ref } = getJsxAttributeUsage(targetDecl.localName);
 		return targetDecl.base.kind === "intrinsic" && !targetDecl.isExported && !targetDecl.needsWrapperComponent && !className && !style && !ref && !hasSpreadInJsx(root, j, targetDecl.localName);
 	};
-	const nonJsxComponentValueReferences = (name) => root.find(j.Identifier, { name }).filter((p) => {
-		if (p.parentPath?.node?.type === "VariableDeclarator" && p.parentPath.node.id === p.node) return false;
-		if (p.parentPath?.node?.type === "JSXOpeningElement" || p.parentPath?.node?.type === "JSXClosingElement") return false;
-		if (p.parentPath?.node?.type === "JSXMemberExpression" && p.parentPath.node.object === p.node) return false;
-		if (p.parentPath?.node?.type === "CallExpression") {
-			const callee = p.parentPath.node.callee;
-			if (callee?.type === "Identifier" && callee.name === ctx.styledDefaultImport) return false;
-			if (callee?.type === "MemberExpression" && callee.object?.type === "CallExpression" && callee.object.callee?.type === "Identifier" && callee.object.callee.name === ctx.styledDefaultImport) return false;
-		}
-		if (p.parentPath?.node?.type === "TaggedTemplateExpression") return false;
-		if (p.parentPath?.node?.type === "CallExpression" && p.parentPath.parentPath?.node?.type === "TaggedTemplateExpression") return false;
-		if (p.parentPath?.node?.type === "TemplateLiteral") return false;
-		return true;
-	});
+	const nonJsxComponentValueReferences = (name) => root.find(j.Identifier, { name }).filter((p) => isNonJsxStyledValueReferencePath(p, ctx.styledDefaultImport));
 	const hasNonJsxComponentValueReference = (name) => nonJsxComponentValueReferences(name).size() > 0;
-	const hasOnlyVirtualListElementTypeValueReferences = (name) => {
+	const hasOnlyElementTypePropValueReferences = (name) => {
 		const refs = nonJsxComponentValueReferences(name);
 		if (refs.size() === 0) return false;
-		let onlyVirtualListElementType = true;
+		let onlyElementTypeProp = true;
 		refs.forEach((p) => {
-			const expressionContainer = p.parentPath?.node;
-			const attr = p.parentPath?.parentPath?.node;
-			const attrName = attr?.name;
-			if (expressionContainer?.type !== "JSXExpressionContainer" || attr?.type !== "JSXAttribute" || attrName?.type !== "JSXIdentifier" || !REACT_WINDOW_ELEMENT_TYPE_PROPS.has(attrName.name) || !isKnownReactWindowElementTypeAttribute(p.parentPath?.parentPath, ctx.importMap)) onlyVirtualListElementType = false;
+			const usage = findContainingJsxAttributeExpression(p);
+			const expressionContainer = usage?.expressionContainer;
+			const attr = usage?.attr;
+			if (!isNodeOfType(expressionContainer, "JSXExpressionContainer") || !isNodeOfType(attr, "JSXAttribute") || !isNodeOfType(attr.name, "JSXIdentifier") || typeof attr.name.name !== "string" || !ELEMENT_TYPE_PROP_NAMES.has(attr.name.name)) onlyElementTypeProp = false;
+		});
+		return onlyElementTypeProp;
+	};
+	const findContainingJsxAttributeExpression = (path) => {
+		let current = path.parentPath;
+		while (current) {
+			const node = current.node;
+			if (node?.type === "JSXExpressionContainer") {
+				const attrPath = current.parentPath;
+				return {
+					expressionContainer: node,
+					attr: attrPath?.node,
+					attrPath
+				};
+			}
+			if (node?.type === "JSXElement" || node?.type === "JSXOpeningElement" || node?.type === "Program") return null;
+			current = current.parentPath;
+		}
+		return null;
+	};
+	const styleOnlyElementTypeHostCache = /* @__PURE__ */ new Map();
+	const elementTypeHostsAreStyleOnly = (name) => {
+		const refs = nonJsxComponentValueReferences(name);
+		if (refs.size() === 0) return false;
+		let allStyleOnly = true;
+		refs.forEach((p) => {
+			const openingElement = (findContainingJsxAttributeExpression(p)?.attrPath)?.parentPath?.node;
+			if (!isNodeOfType(openingElement, "JSXOpeningElement")) {
+				allStyleOnly = false;
+				return;
+			}
+			const hostName = getRootJsxIdentifierName(openingElement.name);
+			if (!hostName) {
+				allStyleOnly = false;
+				return;
+			}
+			let styleOnly = styleOnlyElementTypeHostCache.get(hostName);
+			if (styleOnly === void 0) {
+				styleOnly = isStyleOnlyElementTypeHost({
+					j,
+					root,
+					hostName,
+					elementTypePropNames: ELEMENT_TYPE_PROP_NAMES
+				});
+				styleOnlyElementTypeHostCache.set(hostName, styleOnly);
+			}
+			if (!styleOnly) allStyleOnly = false;
 		});
-		return onlyVirtualListElementType;
+		return allStyleOnly;
 	};
 	for (const decl of styledDecls) {
 		if (!decl.adjacentSiblingStyleKey) continue;
@@ -6282,7 +6669,7 @@ function analyzeBeforeEmitStep(ctx) {
 			const declNamespaceName = getDeclNamespaceName(root, j, decl.localName);
 			if (collectReferencedTypeNames(decl.propsType).some((name) => isTypeNameUsedElsewhere(root, j, name, decl.localName, declNamespaceName) || !isTypeLocallyDefined(root, j, name))) continue;
 			const propsToSkip = [];
-			for (const prop of renames.keys()) if (isModuleScopeBinding(root, j, prop, decl.localName) || resolverImportNames.has(prop)) propsToSkip.push(prop);
+			for (const prop of renames.keys()) if ((isModuleScopeBinding(root, j, prop, decl.localName) || resolverImportNames.has(prop)) && (!transientRenameHasNormalizedPropUsage(decl, prop) || transientRenameWouldTouchExpressionIdentifier(decl, prop) || transientRenameWouldTouchResolvedStyleObject(decl, prop, ctx.resolvedStyleObjects))) propsToSkip.push(prop);
 			for (const prop of propsToSkip) renames.delete(prop);
 			if (renames.size === 0) continue;
 			decl.transientPropRenames = renames;
@@ -6324,13 +6711,35 @@ function analyzeBeforeEmitStep(ctx) {
 		}
 	}
 	for (const decl of styledDecls) {
+		if (canInlinePrivateMemberBaseJsx(decl)) {
+			decl.isDirectJsxResolution = true;
+			decl.needsWrapperComponent = false;
+			continue;
+		}
 		if (decl.isDirectJsxResolution) continue;
 		if (hasNonJsxComponentValueReference(decl.localName)) {
 			decl.usedAsValue = true;
-			if (hasOnlyVirtualListElementTypeValueReferences(decl.localName)) decl.valueUsageKind = "virtualListElementType";
+			if (hasOnlyElementTypePropValueReferences(decl.localName) && elementTypeHostsAreStyleOnly(decl.localName)) {
+				decl.valueUsageKind = "elementTypeProp";
+				if (!exportedComponents.has(decl.localName)) {
+					decl.supportsExternalStyles = false;
+					decl.consumerUsesClassName = false;
+					decl.consumerUsesStyle = false;
+					decl.consumerUsesElementProps = false;
+					decl.consumerUsesSpread = false;
+				}
+			}
 			decl.needsWrapperComponent = true;
 		}
 	}
+	function canInlinePrivateMemberBaseJsx(decl) {
+		if (decl.base.kind !== "component" || !decl.base.ident.includes(".") || decl.isExported || exportedComponents.has(decl.localName) || decl.propsType || decl.attrsInfo || decl.usedAsValue || hasNonJsxComponentValueReference(decl.localName) || decl.supportsExternalStyles || decl.supportsAsProp || decl.supportsRefProp || decl.consumerUsesSpread || decl.consumerUsesClassName || decl.consumerUsesStyle || decl.consumerUsesElementProps || decl.isCssHelper || decl.rules.some((rule) => rule.selector.trim() !== "&")) return false;
+		if (!canInlineImportedComponentWrapper(decl) || hasDynamicPropStyling(decl)) return false;
+		return getJsxUsageCount(decl.localName) === 1;
+	}
+	function hasDynamicPropStyling(decl) {
+		return !!((decl.styleFnFromProps?.length ?? 0) > 0 || (decl.variantDimensions?.length ?? 0) > 0 || (decl.compoundVariants?.length ?? 0) > 0 || (decl.transientPropRenames?.size ?? 0) > 0 || (decl.observedExpressionConditionDropProps?.size ?? 0) > 0 || (decl.styleValueVariantProps?.size ?? 0) > 0);
+	}
 	const jsxNamespaceRoots = /* @__PURE__ */ new Set();
 	root.find(j.JSXMemberExpression).forEach((p) => {
 		const rootName = getRootJsxIdentifierName(p.node);
@@ -7148,6 +7557,44 @@ function renameIdentifiersInAst(node, renames) {
 		else if (value && typeof value === "object") renameIdentifiersInAst(value, renames);
 	}
 }
+function transientRenameWouldTouchExpressionIdentifier(decl, propName) {
+	for (const styleFn of decl.styleFnFromProps ?? []) {
+		if (astContainsIdentifier(styleFn.callArg, propName)) return true;
+		for (const extra of styleFn.extraCallArgs ?? []) if (astContainsIdentifier(extra.callArg, propName)) return true;
+	}
+	for (const inlineStyle of decl.inlineStyleProps ?? []) if (astContainsIdentifier(inlineStyle.expr, propName)) return true;
+	return false;
+}
+function transientRenameWouldTouchResolvedStyleObject(decl, propName, resolvedStyleObjects) {
+	if (!resolvedStyleObjects) return false;
+	for (const styleKey of collectAllStyleKeysForDecl(decl)) {
+		const value = resolvedStyleObjects.get(styleKey);
+		if (value && typeof value === "object" && astContainsIdentifier(value, propName)) return true;
+	}
+	return false;
+}
+function transientRenameHasNormalizedPropUsage(decl, propName) {
+	const normalized = propName.startsWith("$") ? propName.slice(1) : propName;
+	for (const styleFn of decl.styleFnFromProps ?? []) {
+		if (astContainsIdentifier(styleFn.callArg, normalized)) return true;
+		for (const extra of styleFn.extraCallArgs ?? []) if (astContainsIdentifier(extra.callArg, normalized)) return true;
+	}
+	for (const inlineStyle of decl.inlineStyleProps ?? []) if (astContainsIdentifier(inlineStyle.expr, normalized)) return true;
+	return false;
+}
+function astContainsIdentifier(node, name) {
+	if (!node || typeof node !== "object") return false;
+	const n = node;
+	if (typeof n.type !== "string") return false;
+	if (n.type === "Identifier" && n.name === name) return true;
+	for (const [key, value] of Object.entries(n)) {
+		if (AST_METADATA_KEYS.has(key)) continue;
+		if (Array.isArray(value)) {
+			if (value.some((item) => astContainsIdentifier(item, name))) return true;
+		} else if (value && typeof value === "object" && astContainsIdentifier(value, name)) return true;
+	}
+	return false;
+}
 /**
 * Renames `$`-prefixed members in interface/type alias declarations
 * referenced by a propsType AST node.
@@ -8367,7 +8814,8 @@ function validateWrappedComponentStyleChannels(ctx, styledDecls) {
 		if (!importInfo && !isLocalNonStyledWrappedComponent) continue;
 		if (importInfo?.source.kind === "absolutePath" && ctx.options.transformedFileSources?.has(resolveExistingFilePath(importInfo.source.value))) continue;
 		if (!declHasEmittedStyle(ctx, decl)) continue;
-		if (wrappedComponentInterfaceFor(ctx, baseIdent)?.acceptsSx === true) continue;
+		const componentInterface = wrappedComponentInterfaceFor(ctx, baseIdent);
+		if (componentInterface?.acceptsSx === true && componentInterface.sxTarget !== "inner") continue;
 		const metadata = findWrappedComponentMetadata(ctx, baseIdent);
 		if (!metadata || componentAcceptsStylexClassName(metadata)) continue;
 		if (isLocalNonStyledWrappedComponent && !hasInlineObjectPropType(metadata)) continue;
@@ -8430,26 +8878,6 @@ function staticObjectPropertyName(prop) {
 	if (key.type === "Literal" || key.type === "StringLiteral") return typeof key.value === "string" ? key.value : null;
 	return null;
 }
-function isKnownReactWindowElementTypeAttribute(attrPath, importMap) {
-	const openingElement = attrPath?.parentPath?.node;
-	if (openingElement?.type !== "JSXOpeningElement") return false;
-	return jsxNameIsKnownReactWindowComponent(openingElement.name, importMap);
-}
-function jsxNameIsKnownReactWindowComponent(jsxName, importMap) {
-	const name = jsxName;
-	if (name.type === "JSXIdentifier") return localNameIsReactWindowComponent(name.name, importMap);
-	if (name.type !== "JSXMemberExpression") return false;
-	const namespace = name.object;
-	const member = name.property;
-	if (namespace?.type !== "JSXIdentifier" || member?.type !== "JSXIdentifier" || !REACT_WINDOW_COMPONENT_EXPORTS.has(member.name ?? "")) return false;
-	const importInfo = namespace.name ? importMap?.get(namespace.name) : void 0;
-	return importInfo?.source.value === REACT_WINDOW_SOURCE && importInfo.importedName === "*";
-}
-function localNameIsReactWindowComponent(localName, importMap) {
-	if (!localName) return false;
-	const importInfo = importMap?.get(localName);
-	return importInfo?.source.value === REACT_WINDOW_SOURCE && REACT_WINDOW_COMPONENT_EXPORTS.has(importInfo.importedName);
-}
 function isStylexConditionKey(key) {
 	return key === "default" || key === "__computedKeys" || key.startsWith(":") || key.startsWith("@") || key.startsWith("stylex.when");
 }
@@ -8678,7 +9106,9 @@ function normalizeStylisAstToIR(stylisAst, slots, options = {}) {
 	const rules = [];
 	const atRuleStack = [];
 	let pendingComment = null;
+	let pendingLineComment = null;
 	let lastDecl = null;
+	let lineCommentCursor = 0;
 	const stripBlockComment = (raw) => {
 		const trimmed = raw.trim();
 		if (trimmed.startsWith("/*") && trimmed.endsWith("*/")) return trimmed.slice(2, -2).trim();
@@ -8703,11 +9133,48 @@ function normalizeStylisAstToIR(stylisAst, slots, options = {}) {
 		}
 		return false;
 	};
+	const appendLineComment = (existing, next) => existing ? `${existing}\n${next}` : next;
+	const findRawLineCommentPlacement = (body) => {
+		if (!rawCss) return null;
+		let searchStart = lineCommentCursor;
+		while (searchStart < rawCss.length) {
+			const idx = rawCss.indexOf("//", searchStart);
+			if (idx === -1) return null;
+			const nextLf = rawCss.indexOf("\n", idx);
+			const nextCr = rawCss.indexOf("\r", idx);
+			const newlineIdx = nextLf === -1 ? nextCr : nextCr === -1 ? nextLf : Math.min(nextLf, nextCr);
+			const lineEnd = newlineIdx === -1 ? rawCss.length : newlineIdx;
+			if (rawCss.slice(idx + 2, lineEnd).trim() !== body.trim()) {
+				searchStart = idx + 2;
+				continue;
+			}
+			lineCommentCursor = lineEnd;
+			const previousLf = rawCss.lastIndexOf("\n", idx - 1);
+			const previousCr = rawCss.lastIndexOf("\r", idx - 1);
+			const lineStart = Math.max(previousLf, previousCr) + 1;
+			return rawCss.slice(lineStart, idx).trim() ? "trailing" : "leading";
+		}
+		return null;
+	};
+	const attachPendingComments = (decl) => {
+		if (pendingComment) {
+			decl.leadingComment = pendingComment;
+			pendingComment = null;
+		}
+		if (pendingLineComment) {
+			decl.leadingLineComment = appendLineComment(decl.leadingLineComment, pendingLineComment);
+			pendingLineComment = null;
+		}
+	};
 	const handleCommentNode = (raw) => {
 		const body = stripBlockComment(raw);
 		if (isPrettierIgnoreComment(body)) return;
-		if (lastDecl && isStylisConvertedLineComment(raw)) {
-			lastDecl.trailingLineComment = body;
+		if (isStylisConvertedLineComment(raw)) {
+			if (findRawLineCommentPlacement(body) === "leading" || !lastDecl) {
+				pendingLineComment = appendLineComment(pendingLineComment, body);
+				return;
+			}
+			lastDecl.trailingLineComment = appendLineComment(lastDecl.trailingLineComment, body);
 			return;
 		}
 		if (lastDecl && isInlineTrailingBlockCommentInRawCss(raw)) {
@@ -8741,10 +9208,7 @@ function normalizeStylisAstToIR(stylisAst, slots, options = {}) {
 			const decls = parseDeclarations(String(node.value ?? ""), slotByPlaceholder);
 			const firstDecl = decls[0];
 			if (decls.length && firstDecl) {
-				if (pendingComment) {
-					firstDecl.leadingComment = pendingComment;
-					pendingComment = null;
-				}
+				attachPendingComments(firstDecl);
 				ensureRule("&", atRuleStack).declarations.push(...decls);
 				lastDecl = decls[decls.length - 1] ?? null;
 			}
@@ -8752,8 +9216,10 @@ function normalizeStylisAstToIR(stylisAst, slots, options = {}) {
 		}
 		if (node.type === "rule") {
 			const prevPending = pendingComment;
+			const prevPendingLine = pendingLineComment;
 			const prevLastDecl = lastDecl;
 			pendingComment = null;
+			pendingLineComment = null;
 			lastDecl = null;
 			const selectorValue = String(node.value ?? "");
 			const selectorRaw = stripFormFeedInSelectors ? selectorValue.replaceAll("\f", "") : selectorValue;
@@ -8772,10 +9238,7 @@ function normalizeStylisAstToIR(stylisAst, slots, options = {}) {
 				const decls = parseDeclarations(String(child.value ?? ""), slotByPlaceholder);
 				const firstDeclInner = decls[0];
 				if (decls.length && firstDeclInner) {
-					if (pendingComment) {
-						firstDeclInner.leadingComment = pendingComment;
-						pendingComment = null;
-					}
+					attachPendingComments(firstDeclInner);
 					rule.declarations.push(...decls);
 					lastDecl = decls[decls.length - 1] ?? null;
 				}
@@ -8791,10 +9254,7 @@ function normalizeStylisAstToIR(stylisAst, slots, options = {}) {
 					const decls = parseDeclarations(String(atChild.value ?? ""), slotByPlaceholder);
 					const firstDeclInner = decls[0];
 					if (decls.length && firstDeclInner) {
-						if (pendingComment) {
-							firstDeclInner.leadingComment = pendingComment;
-							pendingComment = null;
-						}
+						attachPendingComments(firstDeclInner);
 						nestedRule.declarations.push(...decls);
 						lastDecl = decls[decls.length - 1] ?? null;
 					}
@@ -8805,6 +9265,7 @@ function normalizeStylisAstToIR(stylisAst, slots, options = {}) {
 			} else visit(child);
 			else visit(children);
 			pendingComment = prevPending;
+			pendingLineComment = prevPendingLine;
 			lastDecl = prevLastDecl;
 			return;
 		}
@@ -11368,56 +11829,102 @@ function styledTemplateKey(localName, loc) {
 }
 //#endregion
 //#region src/internal/utilities/format-output.ts
-/**
-* Remove blank lines inside stylex.create({...}) blocks.
-* Finds each `stylex.create({` and tracks brace depth to the matching `})`,
-* then removes blank lines between properties within that region.
-*/
-function removeBlankLinesInStylexCreate(code) {
-	const marker = "stylex.create({";
+const STYLEX_CREATE_MARKER = "stylex.create({";
+function findStylexCreateBlockEnd(code, blockStart) {
+	let depth = 1;
+	let blockEnd = blockStart;
+	let inString = null;
+	let escaped = false;
+	for (let i = blockStart; i < code.length && depth > 0; i++) {
+		const ch = code[i];
+		if (escaped) {
+			escaped = false;
+			continue;
+		}
+		if (ch === "\\") {
+			escaped = true;
+			continue;
+		}
+		if (inString) {
+			if (ch === inString) inString = null;
+			continue;
+		}
+		if (ch === "\"" || ch === "'" || ch === "`") {
+			inString = ch;
+			continue;
+		}
+		if (ch === "{") {
+			depth++;
+			continue;
+		}
+		if (ch === "}") {
+			depth--;
+			if (depth === 0) blockEnd = i;
+		}
+	}
+	return blockEnd;
+}
+function transformStylexCreateBlocks(code, transformBlock) {
 	let result = "";
 	let pos = 0;
 	while (pos < code.length) {
-		const markerIdx = code.indexOf(marker, pos);
+		const markerIdx = code.indexOf(STYLEX_CREATE_MARKER, pos);
 		if (markerIdx === -1) {
 			result += code.slice(pos);
 			break;
 		}
 		result += code.slice(pos, markerIdx);
-		const blockStart = markerIdx + 15;
-		let depth = 1;
-		let blockEnd = blockStart;
-		let inString = null;
-		let escaped = false;
-		for (let i = blockStart; i < code.length && depth > 0; i++) {
-			const ch = code[i];
-			if (escaped) {
-				escaped = false;
-				continue;
-			}
-			if (ch === "\\") {
-				escaped = true;
-				continue;
-			}
-			if (inString) {
-				if (ch === inString) inString = null;
-				continue;
-			}
-			if (ch === "\"" || ch === "'" || ch === "`") {
-				inString = ch;
+		const blockEnd = findStylexCreateBlockEnd(code, markerIdx + 15);
+		const blockContent = code.slice(markerIdx, blockEnd + 1);
+		result += transformBlock(blockContent);
+		pos = blockEnd + 1;
+	}
+	return result;
+}
+/**
+* Remove blank lines inside stylex.create({...}) blocks.
+* Finds each `stylex.create({` and tracks brace depth to the matching `})`,
+* then removes blank lines between properties within that region.
+*/
+function removeBlankLinesInStylexCreate(code) {
+	return transformStylexCreateBlocks(code, (blockContent) => blockContent.replace(/(\n\s*\},)\n\n+(\s+(?:[a-zA-Z_$][a-zA-Z0-9_$]*|["'].*?["']|\d+|::[a-zA-Z-]+|@[a-zA-Z-]+|:[a-zA-Z-]+)\s*:)/g, "$1\n$2").replace(/,\n\n+(\s+(?:[a-zA-Z_$"']|\/\/|\/\*))/g, ",\n$1").replace(/content:\s+"\\"([\s\S]*?)\\""/g, "content: '\"$1\"'").replace(/content:\s+"'\s*([\s\S]*?)\s*'"/g, "content: '\"$1\"'"));
+}
+/**
+* Indents lines inside multiline template literal object values so each continuation
+* line is two spaces deeper than the property line that opens the template.
+*/
+function indentMultilineTemplateLiterals(code) {
+	const lines = code.split("\n");
+	const result = [];
+	for (let i = 0; i < lines.length; i++) {
+		const line = lines[i] ?? "";
+		const openerMatch = line.match(/^(\s+).+:\s*`$/);
+		if (!openerMatch) {
+			result.push(line);
+			continue;
+		}
+		const continuationIndent = `${openerMatch[1]}  `;
+		result.push(line);
+		i++;
+		while (i < lines.length) {
+			const innerLine = lines[i] ?? "";
+			const closeIdx = innerLine.lastIndexOf("`");
+			if (closeIdx === -1) {
+				result.push(continuationIndent + innerLine.trimStart());
+				i++;
 				continue;
 			}
-			if (ch === "{") depth++;
-			else if (ch === "}") {
-				depth--;
-				if (depth === 0) blockEnd = i;
-			}
+			const content = innerLine.slice(0, closeIdx).trimStart();
+			const afterBacktick = innerLine.slice(closeIdx);
+			result.push(continuationIndent + content + afterBacktick);
+			break;
 		}
-		const cleaned = code.slice(markerIdx, blockEnd + 1).replace(/(\n\s*\},)\n\n+(\s+(?:[a-zA-Z_$][a-zA-Z0-9_$]*|["'].*?["']|\d+|::[a-zA-Z-]+|@[a-zA-Z-]+|:[a-zA-Z-]+)\s*:)/g, "$1\n$2").replace(/,\n\n+(\s+(?:[a-zA-Z_$"']|\/\/|\/\*))/g, ",\n$1").replace(/content:\s+"\\"([\s\S]*?)\\""/g, "content: '\"$1\"'").replace(/content:\s+"'\s*([\s\S]*?)\s*'"/g, "content: '\"$1\"'");
-		result += cleaned;
-		pos = blockEnd + 1;
 	}
-	return result;
+	return result.join("\n");
+}
+/** Applies multiline template literal indentation only inside `stylex.create({...})` blocks. */
+function indentMultilineTemplateLiteralsInStylexCreate(code) {
+	return transformStylexCreateBlocks(code, indentMultilineTemplateLiterals);
 }
 function formatOutput(code) {
 	let out = removeBlankLinesInStylexCreate(code);
@@ -11471,6 +11978,7 @@ function formatOutput(code) {
 		return lines.join("\n");
 	})();
 	out = out.replace(/(^\s+const\s+\{[^}]*\} = props;\n)\n(\s+)/gm, "$1$2");
+	out = indentMultilineTemplateLiteralsInStylexCreate(out);
 	return out.trimEnd() + "\n";
 }
 //#endregion
@@ -11584,18 +12092,172 @@ function collectStyledDeclsStep(ctx) {
 	return CONTINUE;
 }
 //#endregion
+//#region src/internal/utilities/css-authored-multiline.ts
+/** Extra indent for continuation lines relative to the property line that opens the template literal. */
+const MULTILINE_INDENT = "  ";
+function isTemplateLiteralNode(node) {
+	return isAstNode(node) && node.type === "TemplateLiteral";
+}
+function normalizeValueForMatch(value) {
+	return value.replace(/\s+/g, " ").replace(/\s*,\s*/g, ",").trim();
+}
+function extractCssValueFrom(rawCss, valueStart) {
+	let i = valueStart;
+	while (i < rawCss.length && /\s/.test(rawCss[i])) i++;
+	const start = i;
+	let depth = 0;
+	let inString = false;
+	let inComment = false;
+	for (; i < rawCss.length; i++) {
+		const ch = rawCss[i];
+		if (!inString && !inComment && ch === "/" && rawCss[i + 1] === "*") {
+			inComment = true;
+			i++;
+			continue;
+		}
+		if (inComment) {
+			if (ch === "*" && rawCss[i + 1] === "/") {
+				inComment = false;
+				i++;
+			}
+			continue;
+		}
+		if ((ch === "\"" || ch === "'") && rawCss[i - 1] !== "\\") {
+			if (!inString) inString = ch;
+			else if (inString === ch) inString = false;
+			continue;
+		}
+		if (inString) continue;
+		if (ch === "(") {
+			depth++;
+			continue;
+		}
+		if (ch === ")") {
+			depth = Math.max(0, depth - 1);
+			continue;
+		}
+		if (depth === 0 && ch === ";") return rawCss.slice(start, i);
+		if (depth === 0 && ch === "}") return rawCss.slice(start, i);
+	}
+	if (start < rawCss.length) return rawCss.slice(start);
+	return null;
+}
+function findAuthoredDeclarationValue(rawCss, property, stylisValueRaw) {
+	if (!rawCss?.trim()) return null;
+	const normalizedTarget = normalizeValueForMatch(stylisValueRaw);
+	const propRe = new RegExp(`(?:^|[\\s{])${escapeRegex(property)}\\s*:`, "gi");
+	let match;
+	while (match = propRe.exec(rawCss)) {
+		const value = extractCssValueFrom(rawCss, match.index + match[0].lastIndexOf(":") + 1);
+		if (value && normalizeValueForMatch(value) === normalizedTarget) return value;
+	}
+	return null;
+}
+function parseAuthoredValueParts(value) {
+	const parts = [];
+	const placeholderPattern = new RegExp(PLACEHOLDER_RE.source, "g");
+	let lastIndex = 0;
+	let match;
+	while (match = placeholderPattern.exec(value)) {
+		const start = match.index;
+		if (start > lastIndex) parts.push({
+			kind: "static",
+			value: value.slice(lastIndex, start)
+		});
+		parts.push({
+			kind: "slot",
+			slotId: Number(match[1])
+		});
+		lastIndex = start + match[0].length;
+	}
+	if (lastIndex < value.length) parts.push({
+		kind: "static",
+		value: value.slice(lastIndex)
+	});
+	return parts;
+}
+function normalizeStaticMultilineChunk(chunk, isFirst, isLast, beforeSlot) {
+	let text = chunk;
+	if (isFirst) text = text.replace(/^\s+/, "");
+	if (isLast) text = text.replace(/\s+$/, "");
+	else if (!beforeSlot) text = text.replace(/\s+$/, "");
+	return text.replace(/,\s*\r?\n\s*/g, `,\n${MULTILINE_INDENT}`);
+}
+function isAuthoredMultilineInterpolatedValue(authoredValue) {
+	if (!/\r?\n/.test(authoredValue)) return false;
+	return parseAuthoredValueParts(authoredValue).some((part) => part.kind === "slot");
+}
+function applyAuthoredMultilineTemplateFormatting(j, templateLiteral, authoredValue) {
+	if (!isAuthoredMultilineInterpolatedValue(authoredValue)) return templateLiteral;
+	const authoredParts = parseAuthoredValueParts(authoredValue);
+	if (authoredParts.filter((part) => part.kind === "slot").length !== templateLiteral.expressions.length) return templateLiteral;
+	const quasis = [];
+	let staticBuffer = "";
+	let slotIndex = 0;
+	for (const part of authoredParts) {
+		if (part.kind === "static") {
+			staticBuffer += part.value;
+			continue;
+		}
+		const isFirst = slotIndex === 0;
+		const quasiText = normalizeStaticMultilineChunk(staticBuffer, isFirst, false, true);
+		const raw = isFirst && quasiText ? `\n${MULTILINE_INDENT}${quasiText.replace(/^\s+/, "")}` : quasiText;
+		quasis.push(j.templateElement({
+			raw,
+			cooked: raw
+		}, false));
+		staticBuffer = "";
+		slotIndex++;
+	}
+	const trailing = normalizeStaticMultilineChunk(staticBuffer, slotIndex === 0, true, false);
+	quasis.push(j.templateElement({
+		raw: trailing,
+		cooked: trailing
+	}, true));
+	return j.templateLiteral(quasis, templateLiteral.expressions);
+}
+function maybeApplyAuthoredMultilineTemplateFormatting(args) {
+	const authoredValue = findAuthoredDeclarationValue(args.rawCss, args.property, args.stylisValueRaw);
+	if (!authoredValue) return args.templateLiteral;
+	return applyAuthoredMultilineTemplateFormatting(args.j, args.templateLiteral, authoredValue);
+}
+/** Applies multiline CSS formatting when `built` is a template literal. */
+function maybeApplyAuthoredMultilineToExpression(j, built, context) {
+	if (!isTemplateLiteralNode(built)) return built;
+	return maybeApplyAuthoredMultilineTemplateFormatting({
+		j,
+		templateLiteral: built,
+		...context
+	});
+}
+//#endregion
 //#region src/internal/lower-rules/inline-styles.ts
-function buildTemplateWithStaticParts(j, expr, prefix, suffix) {
+function getImportedStylexIdentifiers(importMap, resolverImports) {
+	const identifiers = /* @__PURE__ */ new Set();
+	for (const [localName, importEntry] of importMap) if (importEntry?.source?.value?.includes(".stylex")) identifiers.add(localName);
+	for (const importSpec of resolverImports.values()) {
+		if (!importSpec.from.value.includes(".stylex")) continue;
+		for (const name of importSpec.names) identifiers.add(name.local ?? name.imported);
+	}
+	return identifiers;
+}
+function buildTemplateWithStaticParts(j, expr, prefix, suffix, multilineContext) {
 	if (!prefix && !suffix) return expr;
 	const staticValue = literalToStaticValue(expr);
 	if (staticValue !== null) return j.stringLiteral(prefix + String(staticValue) + suffix);
-	return j.templateLiteral([j.templateElement({
+	const templateLiteral = j.templateLiteral([j.templateElement({
 		raw: prefix,
 		cooked: prefix
 	}, false), j.templateElement({
 		raw: suffix,
 		cooked: suffix
 	}, true)], [expr]);
+	if (!multilineContext) return templateLiteral;
+	return maybeApplyAuthoredMultilineTemplateFormatting({
+		j,
+		templateLiteral,
+		...multilineContext
+	});
 }
 /**
 * Rewrites `props.theme.X` member access to `theme.X` in a cloned AST node.
@@ -11674,6 +12336,14 @@ function collectPropsFromArrowFnDestructured(expr) {
 	});
 	return props;
 }
+function collectDollarParamBindingIdentifiers(expr) {
+	const identifiers = /* @__PURE__ */ new Set();
+	if (!expr || expr.type !== "ArrowFunctionExpression") return identifiers;
+	const bindings = getArrowFnParamBindings(expr);
+	if (!bindings || bindings.kind !== "destructured") return identifiers;
+	for (const localName of bindings.bindings.keys()) if (localName.startsWith("$")) identifiers.add(localName);
+	return identifiers;
+}
 function countConditionalExpressions(node) {
 	let count = 0;
 	walkAst(node, (n) => {
@@ -11796,7 +12466,7 @@ function collectPropsFromExpressions(expressions, propsUsed) {
 * - `props.$foo` -> `props.foo` (strip $ prefix)
 * - `props.foo` -> unchanged
 */
-function normalizeDollarProps(j, exprNode) {
+function normalizeDollarProps(j, exprNode, opts) {
 	return mapAst(cloneAstNode(exprNode), (n) => {
 		if (isMemberExpression(n) && n.object?.type === "Identifier" && n.object?.name === "props" && n.property?.type === "Identifier" && n.computed === false) {
 			const propName = n.property.name;
@@ -11805,7 +12475,8 @@ function normalizeDollarProps(j, exprNode) {
 		}
 		if (n.type === "Identifier") {
 			const identName = n.name;
-			if (identName?.startsWith("$")) return j.memberExpression(j.identifier("props"), j.identifier(identName.slice(1)));
+			const isLocalDollarIdentifier = !!identName && opts?.localDollarIdentifiers?.has(identName);
+			if (identName?.startsWith("$") && (isLocalDollarIdentifier || !opts?.skipIdentifiers?.has(identName))) return j.memberExpression(j.identifier("props"), j.identifier(identName.slice(1)));
 		}
 	});
 }
@@ -15204,14 +15875,21 @@ function emitStylesAndImports(ctx) {
 		const kfDecl = j.variableDeclaration("const", [j.variableDeclarator(j.identifier(name), j.callExpression(j.memberExpression(j.identifier("stylex"), j.identifier("keyframes")), [objectToAst(j, frames)]))]);
 		inlineKeyframeDecls.push(kfDecl);
 	}
-	emitLocalDefineVarsSidecars(ctx, [...nonEmptyStyleEntries.map(([, value]) => value), ...styledDecls.flatMap((decl) => (decl.inlineStyleProps ?? []).flatMap((prop) => [prop.expr, ...prop.keyExpr ? [prop.keyExpr] : []]))]);
+	emitLocalDefineVarsSidecars(ctx, [...nonEmptyStyleEntries.map(([, value]) => value), ...styledDecls.flatMap((decl) => (decl.inlineStyleProps ?? []).map((prop) => prop.expr))]);
 	const programBody = root.get().node.program.body;
-	const insertNodes = [...inlineKeyframeDecls, ...stylesDecl ? [stylesDecl] : []];
-	if (insertNodes.length > 0) if (stylesInsertPosition === "afterImports") {
-		const lastImportIdx = findLastImportIndex(programBody);
-		const insertAt = lastImportIdx >= 0 ? lastImportIdx + 1 : 0;
-		programBody.splice(insertAt, 0, ...insertNodes);
-	} else programBody.push(...insertNodes);
+	const { statements: relocatedKeyframes, insertIndex: keyframesInsertIndex } = extractModuleLevelStylexKeyframesStatements(programBody, resolveStylesAnchorIndex({
+		programBody,
+		stylesInsertPosition,
+		stylesIdentifier,
+		mergeTarget,
+		willInsertStylesDecl: stylesDecl != null
+	}), new Set(styledDecls.filter((decl) => !decl.skipTransform).map((decl) => decl.localName)));
+	const insertNodes = [
+		...relocatedKeyframes,
+		...inlineKeyframeDecls,
+		...stylesDecl ? [stylesDecl] : []
+	];
+	if (insertNodes.length > 0) programBody.splice(keyframesInsertIndex, 0, ...insertNodes);
 	const dimensionsByName = /* @__PURE__ */ new Map();
 	for (const decl of styledDecls) {
 		if (decl.skipTransform || !decl.variantDimensions) continue;
@@ -15531,6 +16209,186 @@ function groupLocalStylexVars(vars) {
 	}
 	return groups;
 }
+function isStylexKeyframesInit(init) {
+	if (!init || typeof init !== "object" || !("type" in init)) return false;
+	const call = init;
+	return call.type === "CallExpression" && call.callee?.type === "MemberExpression" && call.callee.object?.type === "Identifier" && call.callee.object.name === "stylex" && call.callee.property?.type === "Identifier" && call.callee.property.name === "keyframes";
+}
+function isStylexCreateInit(init) {
+	if (!init || typeof init !== "object" || !("type" in init)) return false;
+	const call = init;
+	return call.type === "CallExpression" && call.callee?.type === "MemberExpression" && call.callee.object?.type === "Identifier" && call.callee.object.name === "stylex" && call.callee.property?.type === "Identifier" && call.callee.property.name === "create";
+}
+function getVariableDeclarationFromStatement(statement) {
+	if (!statement || typeof statement !== "object" || !("type" in statement)) return null;
+	const typed = statement;
+	if (typed.type === "VariableDeclaration") return typed;
+	if (typed.type === "ExportNamedDeclaration" && typed.declaration?.type === "VariableDeclaration") return typed.declaration;
+	return null;
+}
+function variableDeclarationHasOnlyStylexKeyframes(decl) {
+	if (decl.type !== "VariableDeclaration" || !decl.declarations?.length) return false;
+	return decl.declarations.every((d) => isStylexKeyframesInit(d.init));
+}
+function getStylexKeyframesBindingNames(variableDecl) {
+	const names = /* @__PURE__ */ new Set();
+	for (const declarator of variableDecl.declarations ?? []) if (declarator.id?.type === "Identifier" && declarator.id.name && isStylexKeyframesInit(declarator.init)) names.add(declarator.id.name);
+	return names;
+}
+function statementReferencesAnyBinding(statement, bindingNames) {
+	if (bindingNames.size === 0) return false;
+	const identifiers = /* @__PURE__ */ new Set();
+	collectIdentifiers(statement, identifiers);
+	for (const name of identifiers) if (bindingNames.has(name)) return true;
+	return false;
+}
+function declaratorReferencesAnyBinding(declarator, bindingNames) {
+	const identifiers = /* @__PURE__ */ new Set();
+	collectIdentifiers(declarator.id, identifiers);
+	collectIdentifiers(declarator.init, identifiers);
+	for (const name of identifiers) if (bindingNames.has(name)) return true;
+	return false;
+}
+function statementReferencesKeyframesBindingFromSurvivingDeclarators(statement, bindingNames, removedStyledDeclNames) {
+	const variableDecl = getVariableDeclarationFromStatement(statement);
+	if (variableDecl?.declarations) {
+		for (const declarator of variableDecl.declarations) {
+			const id = declarator.id;
+			if (id?.type === "Identifier" && id.name != null && removedStyledDeclNames.has(id.name)) continue;
+			if (declaratorReferencesAnyBinding(declarator, bindingNames)) return true;
+		}
+		return false;
+	}
+	return statementReferencesAnyBinding(statement, bindingNames);
+}
+function interveningStatementUsesKeyframesBinding(statement, bindingNames, removedStyledDeclNames) {
+	return statementReferencesKeyframesBindingFromSurvivingDeclarators(statement, bindingNames, removedStyledDeclNames);
+}
+function getTopLevelDeclaredBindingNames(statement) {
+	const names = /* @__PURE__ */ new Set();
+	const variableDecl = getVariableDeclarationFromStatement(statement);
+	if (variableDecl?.declarations) {
+		for (const declarator of variableDecl.declarations) {
+			const id = declarator.id;
+			if (id?.type === "Identifier" && id.name) names.add(id.name);
+			else if (id) collectPatternBindingNames$2(id, names);
+		}
+		return names;
+	}
+	const typed = statement;
+	if (typed.type === "FunctionDeclaration" && typed.id?.type === "Identifier" && typed.id.name) names.add(typed.id.name);
+	return names;
+}
+function keyframesInitReferencesBindingsDeclaredBetween(variableDecl, programBody, rangeStart, rangeEnd) {
+	const referencedInInit = /* @__PURE__ */ new Set();
+	for (const declarator of variableDecl.declarations ?? []) collectIdentifiers(declarator.init, referencedInInit);
+	for (let index = rangeStart; index < rangeEnd; index++) {
+		const declared = getTopLevelDeclaredBindingNames(programBody[index]);
+		for (const name of declared) if (referencedInInit.has(name)) return true;
+	}
+	return false;
+}
+function getClassDeclarationFromStatement(statement) {
+	if (!statement || typeof statement !== "object" || !("type" in statement)) return null;
+	const typed = statement;
+	if (typed.type === "ClassDeclaration") return typed;
+	if (typed.type === "ExportNamedDeclaration" && typed.declaration?.type === "ClassDeclaration") return typed.declaration;
+	return null;
+}
+function classDeclarationCapturesKeyframes(classDecl, bindingNames) {
+	if (classDecl.id?.type !== "Identifier" || !classDecl.id.name) return null;
+	const members = classDecl.body?.body;
+	if (!Array.isArray(members)) return null;
+	for (const member of members) if (statementReferencesAnyBinding(member, bindingNames)) return classDecl.id.name;
+	return null;
+}
+function collectTopLevelBindingsCapturingKeyframes(programBody, beforeIndex, bindingNames, removedStyledDeclNames) {
+	const captures = /* @__PURE__ */ new Set();
+	for (let index = 0; index < beforeIndex; index++) {
+		const statement = programBody[index];
+		const classDecl = getClassDeclarationFromStatement(statement);
+		if (classDecl) {
+			const className = classDeclarationCapturesKeyframes(classDecl, bindingNames);
+			if (className) captures.add(className);
+			continue;
+		}
+		const variableDecl = getVariableDeclarationFromStatement(statement);
+		if (variableDecl?.declarations) {
+			for (const declarator of variableDecl.declarations) {
+				const id = declarator.id;
+				if (id?.type === "Identifier" && id.name != null && removedStyledDeclNames.has(id.name)) continue;
+				if (!declaratorReferencesAnyBinding(declarator, bindingNames)) continue;
+				if (id?.type === "Identifier" && id.name) captures.add(id.name);
+				else if (id) collectPatternBindingNames$2(id, captures);
+			}
+			continue;
+		}
+		const typed = statement;
+		if (typed.type === "FunctionDeclaration" && typed.id?.type === "Identifier" && typed.id.name) {
+			if (statementReferencesAnyBinding(typed.body, bindingNames)) captures.add(typed.id.name);
+		}
+	}
+	return captures;
+}
+function canSafelyRelocateKeyframesStatement(statementIndex, anchorIndex, programBody, variableDecl, removedStyledDeclNames) {
+	const bindingNames = getStylexKeyframesBindingNames(variableDecl);
+	const rangeStart = Math.min(statementIndex, anchorIndex);
+	const rangeEnd = Math.max(statementIndex, anchorIndex);
+	if (statementIndex > anchorIndex && keyframesInitReferencesBindingsDeclaredBetween(variableDecl, programBody, anchorIndex, statementIndex)) return false;
+	if (statementIndex < anchorIndex && keyframesInitReferencesBindingsDeclaredBetween(variableDecl, programBody, statementIndex + 1, anchorIndex)) return false;
+	const indirectCaptureNames = statementIndex < anchorIndex ? collectTopLevelBindingsCapturingKeyframes(programBody, statementIndex, bindingNames, removedStyledDeclNames) : /* @__PURE__ */ new Set();
+	for (let index = rangeStart; index < rangeEnd; index++) {
+		if (index === statementIndex) continue;
+		const statement = programBody[index];
+		if (interveningStatementUsesKeyframesBinding(statement, bindingNames, removedStyledDeclNames)) return false;
+		if (indirectCaptureNames.size > 0 && interveningStatementUsesKeyframesBinding(statement, indirectCaptureNames, removedStyledDeclNames)) return false;
+	}
+	return true;
+}
+function extractModuleLevelStylexKeyframesStatements(programBody, anchorIndex, removedStyledDeclNames) {
+	const extracted = [];
+	for (let index = 0; index < programBody.length; index++) {
+		const statement = programBody[index];
+		const variableDecl = getVariableDeclarationFromStatement(statement);
+		if (!variableDecl || !variableDeclarationHasOnlyStylexKeyframes(variableDecl)) continue;
+		if (!canSafelyRelocateKeyframesStatement(index, anchorIndex, programBody, variableDecl, removedStyledDeclNames)) continue;
+		extracted.push({
+			index,
+			statement
+		});
+	}
+	extracted.sort((a, b) => a.index - b.index);
+	let insertIndex = anchorIndex;
+	for (let i = extracted.length - 1; i >= 0; i--) {
+		const { index } = extracted[i];
+		if (index < insertIndex) insertIndex--;
+		programBody.splice(index, 1);
+	}
+	return {
+		statements: extracted.map((entry) => entry.statement),
+		insertIndex
+	};
+}
+function findMainStylexCreateStatementIndex(programBody, stylesIdentifier) {
+	for (let index = 0; index < programBody.length; index++) {
+		const variableDecl = getVariableDeclarationFromStatement(programBody[index]);
+		if (!variableDecl?.declarations) continue;
+		for (const declarator of variableDecl.declarations) if (declarator.id?.type === "Identifier" && declarator.id.name === stylesIdentifier && isStylexCreateInit(declarator.init)) return index;
+	}
+	return -1;
+}
+function resolveStylesAnchorIndex(args) {
+	const { programBody, stylesInsertPosition, stylesIdentifier, mergeTarget, willInsertStylesDecl } = args;
+	if (mergeTarget || !willInsertStylesDecl) {
+		const existingIndex = findMainStylexCreateStatementIndex(programBody, stylesIdentifier);
+		if (existingIndex >= 0) return existingIndex;
+	}
+	if (stylesInsertPosition === "afterImports") {
+		const lastImportIdx = findLastImportIndex(programBody);
+		return lastImportIdx >= 0 ? lastImportIdx + 1 : 0;
+	}
+	return programBody.length;
+}
 //#endregion
 //#region src/internal/transform-steps/emit-styles.ts
 /**
@@ -15943,7 +16801,8 @@ function isCustomPropertyKey(prop) {
 	return prop.startsWith("--") || prop.includes(".");
 }
 function inlineStyleProperty(j, prop) {
-	const property = j.property("init", prop.keyExpr ?? inlineStylePropKey(j, prop.prop), prop.expr);
+	const key = prop.keyExpr ?? inlineStylePropKey(j, prop.prop);
+	const property = j.property("init", key, prop.expr);
 	if (prop.keyExpr) property.computed = true;
 	return property;
 }
@@ -16099,7 +16958,21 @@ const withLeadingCommentsOnFirstFunction = (nodes, d) => {
 //#region src/internal/lower-rules/variants.ts
 function parseVariantCondition(when) {
 	const trimmed = when.trim();
-	if (trimmed.includes("&&")) return { type: "compound" };
+	if (trimmed.includes("&&")) {
+		const parts = trimmed.split("&&").map((part) => part.trim()).filter(Boolean);
+		const parsedParts = parts.map(parseVariantCondition);
+		const equalityParts = parsedParts.filter((part) => part.type === "equality");
+		if (equalityParts.length === 1) {
+			const equality = equalityParts[0];
+			const equalityIndex = parsedParts.findIndex((part) => part === equality);
+			const guardParts = parts.filter((_, index) => index !== equalityIndex);
+			if (guardParts.length > 0) return {
+				...equality,
+				conditionWhen: guardParts.join(" && ")
+			};
+		}
+		return { type: "compound" };
+	}
 	if (trimmed.startsWith("!")) {
 		const inner = trimmed.slice(1).trim().replace(/^\(|\)$/g, "");
 		if (/^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(inner)) return {
@@ -16173,10 +17046,11 @@ function hasFiniteNumericVariantKey(dimension) {
 * Compound conditions (e.g., `disabled && color === "primary"`) are kept separate
 * and not grouped into dimensions.
 */
-function groupVariantBucketsIntoDimensions(variantBuckets, variantStyleKeys, _baseStyleKey, baseStyles, findJsxPropTsType, isJsxPropOptional) {
-	const getVariantObjectName = (propName, suffix) => {
+function groupVariantBucketsIntoDimensions(variantBuckets, variantStyleKeys, baseStyleKey, baseStyles, findJsxPropTsType, isJsxPropOptional) {
+	const getVariantObjectName = (propName, suffix, useBaseStyleKey) => {
+		const baseName = useBaseStyleKey ? styleKeyWithSuffix(baseStyleKey, propName) : propName;
 		if (propName === "variant") return suffix ? `${suffix.toLowerCase()}Variants` : "variants";
-		return suffix ? `${propName}${suffix}Variants` : `${propName}Variants`;
+		return suffix ? `${baseName}${suffix}Variants` : `${baseName}Variants`;
 	};
 	const propGroups = /* @__PURE__ */ new Map();
 	const remainingBuckets = /* @__PURE__ */ new Map();
@@ -16189,7 +17063,8 @@ function groupVariantBucketsIntoDimensions(variantBuckets, variantStyleKeys, _ba
 			existing.push({
 				when,
 				value: parsed.value,
-				styles
+				styles,
+				conditionWhen: parsed.conditionWhen
 			});
 			propGroups.set(parsed.propName, existing);
 		} else {
@@ -16235,6 +17110,16 @@ function groupVariantBucketsIntoDimensions(variantBuckets, variantStyleKeys, _ba
 		}
 		const variantMap = {};
 		const allOverriddenProps = /* @__PURE__ */ new Set();
+		const conditionGroup = commonConditionWhen(variants);
+		if (!conditionGroup.canGroup) {
+			for (const v of variants) {
+				remainingBuckets.set(v.when, v.styles);
+				const styleKey = variantStyleKeys[v.when];
+				if (styleKey) remainingStyleKeys[v.when] = styleKey;
+			}
+			continue;
+		}
+		const { conditionWhen } = conditionGroup;
 		for (const v of variants) {
 			variantMap[v.value] = v.styles;
 			for (const cssProp of Object.keys(v.styles)) allOverriddenProps.add(cssProp);
@@ -16267,7 +17152,7 @@ function groupVariantBucketsIntoDimensions(variantBuckets, variantStyleKeys, _ba
 			}
 			if (overlappingBoolProp) break;
 		}
-		if (overlappingBoolProp && overlappingBoolStyles) {
+		if (overlappingBoolProp && overlappingBoolStyles && !conditionWhen) {
 			dimensions.push({
 				propName,
 				variantObjectName: getVariantObjectName(propName, "Enabled"),
@@ -16305,9 +17190,10 @@ function groupVariantBucketsIntoDimensions(variantBuckets, variantStyleKeys, _ba
 			for (const cssProp of variantCssProps) propsToStrip.add(cssProp);
 		} else dimensions.push({
 			propName,
-			variantObjectName: getVariantObjectName(propName),
+			variantObjectName: getVariantObjectName(propName, void 0, !!conditionWhen),
 			variants: variantMap,
 			defaultValue,
+			...conditionWhen ? { conditionWhen } : {},
 			isOptional: propIsOptional
 		});
 	}
@@ -16318,6 +17204,15 @@ function groupVariantBucketsIntoDimensions(variantBuckets, variantStyleKeys, _ba
 		propsToStrip
 	};
 }
+function commonConditionWhen(variants) {
+	const conditions = [...new Set(variants.map((variant) => variant.conditionWhen))];
+	if (conditions.length !== 1) return { canGroup: false };
+	const conditionWhen = conditions[0];
+	return conditionWhen ? {
+		canGroup: true,
+		conditionWhen
+	} : { canGroup: true };
+}
 //#endregion
 //#region src/internal/emit-wrappers/type-helpers.ts
 /**
@@ -16725,6 +17620,25 @@ function wrapCallArgForPropsObject(j, rawArg, propsObjectKey) {
 	if (rawArg.type === "Identifier" && rawArg.name === propsObjectKey) prop.shorthand = true;
 	return j.objectExpression([prop]);
 }
+function collectKnownConditionPropNames(emitter, d) {
+	const names = /* @__PURE__ */ new Set();
+	const add = (name) => {
+		if (name && name !== "__props" && name !== "__helper") names.add(name);
+	};
+	if (d.propsType) for (const name of emitter.getExplicitPropNames(d.propsType)) add(name);
+	for (const dim of d.variantDimensions ?? []) {
+		add(dim.propName);
+		add(dim.namespaceBooleanProp);
+	}
+	for (const entry of d.styleFnFromProps ?? []) {
+		add(entry.jsxProp);
+		for (const extra of entry.extraCallArgs ?? []) add(extra.jsxProp);
+	}
+	for (const prop of d.styleValueVariantProps ?? []) add(prop);
+	for (const prop of collectInlineStylePropNames(d.inlineStyleProps ?? [])) add(prop);
+	for (const prop of d.shouldForwardProp?.dropProps ?? []) add(prop);
+	return names.size > 0 ? names : void 0;
+}
 /**
 * Assembles the initial `styleArgs` array from extends, extra before/after base,
 * and the base style expression. This is the common pattern used by all emitters.
@@ -16769,12 +17683,12 @@ function buildInterleavedExtraStyleArgs(j, stylesIdentifier, d, propsArgExprs) {
 	const mixinOrder = d.mixinOrder;
 	const afterBaseKeys = new Set(d.extraStyleKeysAfterBase ?? []);
 	const extraStyleKeys = d.extraStyleKeys ?? [];
-	const propsArgs = d.extraStylexPropsArgs ?? [];
+	const propsArgs = propsArgExprs;
 	if (!mixinOrder || mixinOrder.length === 0) {
 		const { beforeBase, afterBase } = splitExtraStyleArgs(j, stylesIdentifier, d);
 		const afterVariants = [];
-		for (let i = 0; i < propsArgExprs.length; i++) if (propsArgs[i]?.afterVariants) afterVariants.push(propsArgExprs[i]);
-		else afterBase.push(propsArgExprs[i]);
+		for (const propsArg of propsArgExprs) if (propsArg.afterVariants) afterVariants.push(propsArg.expr);
+		else afterBase.push(propsArg.expr);
 		return {
 			beforeBase,
 			afterBase,
@@ -16786,28 +17700,37 @@ function buildInterleavedExtraStyleArgs(j, stylesIdentifier, d, propsArgExprs) {
 	const afterVariants = [];
 	let styleKeyIdx = 0;
 	let propsArgIdx = 0;
+	const pushPropsArg = (index, fallbackGroup) => {
+		const arg = propsArgs[index];
+		if (!arg) return;
+		if (arg.afterVariants) afterVariants.push(arg.expr);
+		else if (arg.afterBase || fallbackGroup === "afterBase") afterBase.push(arg.expr);
+		else beforeBase.push(arg.expr);
+	};
+	const pushPropsArgsThroughNextUnconditional = (fallbackGroup) => {
+		while (propsArgIdx < propsArgs.length && propsArgs[propsArgIdx]?.conditional) {
+			pushPropsArg(propsArgIdx, fallbackGroup);
+			propsArgIdx++;
+		}
+		if (propsArgIdx < propsArgs.length) {
+			pushPropsArg(propsArgIdx, fallbackGroup);
+			propsArgIdx++;
+		}
+	};
 	for (const entry of mixinOrder) if (entry === "styleKey" && styleKeyIdx < extraStyleKeys.length) {
 		const key = extraStyleKeys[styleKeyIdx];
 		styleKeyIdx++;
 		const expr = styleRef(j, stylesIdentifier, key);
 		if (afterBaseKeys.has(key)) afterBase.push(expr);
 		else beforeBase.push(expr);
-	} else if (entry === "propsArg" && propsArgIdx < propsArgExprs.length) {
-		const arg = propsArgs[propsArgIdx];
-		const argExpr = propsArgExprs[propsArgIdx];
-		propsArgIdx++;
-		if (arg?.afterVariants) afterVariants.push(argExpr);
-		else if (arg?.afterBase) afterBase.push(argExpr);
-		else beforeBase.push(argExpr);
-	}
+	} else if (entry === "propsArg" && propsArgIdx < propsArgs.length) pushPropsArgsThroughNextUnconditional("beforeBase");
 	for (; styleKeyIdx < extraStyleKeys.length; styleKeyIdx++) {
 		const key = extraStyleKeys[styleKeyIdx];
 		const expr = styleRef(j, stylesIdentifier, key);
 		if (afterBaseKeys.has(key)) afterBase.push(expr);
 		else beforeBase.push(expr);
 	}
-	for (; propsArgIdx < propsArgExprs.length; propsArgIdx++) if (propsArgs[propsArgIdx]?.afterVariants) afterVariants.push(propsArgExprs[propsArgIdx]);
-	else afterBase.push(propsArgExprs[propsArgIdx]);
+	for (; propsArgIdx < propsArgs.length; propsArgIdx++) pushPropsArg(propsArgIdx, "afterBase");
 	return {
 		beforeBase,
 		afterBase,
@@ -16953,7 +17876,7 @@ function isExpressionLike(value) {
 *   components
 */
 function buildVariantDimensionLookups(j, args) {
-	const { dimensions, styleArgs, destructureProps, propDefaults, namespaceBooleanProps } = args;
+	const { dimensions, styleArgs, destructureProps, propDefaults, namespaceBooleanProps, knownProps } = args;
 	/** Push a style expression to orderedEntries (if source order available) or styleArgs. */
 	const pushExpr = (expr, dim) => {
 		if (args.orderedEntries && dim.sourceOrder !== void 0) args.orderedEntries.push({
@@ -16969,6 +17892,21 @@ function buildVariantDimensionLookups(j, args) {
 		const fallbackCall = j.callExpression(styleRef(j, args.stylesIdentifier, dim.fallbackFnKey), [propId]);
 		return j.logicalExpression("??", lookup, fallbackCall);
 	};
+	const buildConditionallyGuardedLookup = (dim, lookup) => {
+		if (!dim.conditionWhen) return lookup;
+		const booleanProps = namespaceBooleanProps ? new Set(namespaceBooleanProps) : void 0;
+		const { cond, isBoolean } = collectConditionProps(j, {
+			when: dim.conditionWhen,
+			destructureProps,
+			...booleanProps ? { booleanProps } : {},
+			...knownProps ? { knownProps } : {}
+		});
+		return makeConditionalStyleExpr(j, {
+			cond,
+			expr: lookup,
+			isBoolean
+		});
+	};
 	const namespacePairs = /* @__PURE__ */ new Map();
 	const regularDimensions = [];
 	for (const dim of dimensions) if (dim.namespaceBooleanProp) {
@@ -16991,11 +17929,12 @@ function buildVariantDimensionLookups(j, args) {
 			const castProp = buildKeyofTypeofCast(j, propId, dim.variantObjectName);
 			const lookup = j.memberExpression(variantsId, castProp, true);
 			const defaultAccess = j.memberExpression(j.identifier(dim.variantObjectName), j.identifier("default"));
-			pushExpr(j.logicalExpression("??", lookup, defaultAccess), dim);
+			pushExpr(buildConditionallyGuardedLookup(dim, j.logicalExpression("??", lookup, defaultAccess)), dim);
 		} else {
 			if (dim.defaultValue && dim.isOptional && propDefaults) propDefaults.set(dim.propName, dim.defaultValue);
 			const lookup = dim.fallbackFnKey ? buildFallbackExpr(dim, propId) : j.memberExpression(variantsId, dim.forceKeyofLookupCast ? buildKeyofTypeofCast(j, propId, dim.variantObjectName) : propId, true);
-			if (dim.isOptional && !dim.defaultValue) {
+			if (dim.conditionWhen) pushExpr(buildConditionallyGuardedLookup(dim, lookup), dim);
+			else if (dim.isOptional && !dim.defaultValue) {
 				const guard = j.binaryExpression("!=", j.identifier(dim.propName), j.literal(null));
 				pushExpr(j.logicalExpression("&&", guard, lookup), dim);
 			} else pushExpr(lookup, dim);
@@ -17026,6 +17965,9 @@ function buildVariantDimensionLookups(j, args) {
 		pushExpr(j.conditionalExpression(boolPropId, disabledLookup, enabledLookup), enabled);
 	}
 }
+function hasStyleSourceOrder(d) {
+	return !!(d.variantSourceOrder && Object.keys(d.variantSourceOrder).length > 0) || (d.pseudoAliasSelectors ?? []).some((entry) => entry.sourceOrder !== void 0);
+}
 /**
 * Sort ordered entries by source order and append them to styleArgs.
 * Used to merge variant and styleFn entries while preserving CSS cascade order.
@@ -17056,6 +17998,7 @@ function buildStyleFnExpressions(emitter, args) {
 	const propExprBuilder = args.propExprBuilder ?? ((prop) => j.identifier(prop));
 	const styleFnPairs = d.styleFnFromProps ?? [];
 	const explicitPropNames = d.propsType ? emitter.getExplicitPropNames(d.propsType) : null;
+	const knownProps = collectKnownConditionPropNames(emitter, d);
 	const inferPropFromCallArg = (expr) => {
 		if (!expr || typeof expr !== "object") return null;
 		const unwrap = (node) => {
@@ -17125,7 +18068,8 @@ function buildStyleFnExpressions(emitter, args) {
 			const { cond, isBoolean } = collectConditionProps(j, {
 				when: p.conditionWhen,
 				destructureProps,
-				booleanProps
+				booleanProps,
+				...knownProps ? { knownProps } : {}
 			});
 			pushExpr(makeConditionalStyleExpr(j, {
 				cond,
@@ -17154,11 +18098,13 @@ function buildStyleFnExpressions(emitter, args) {
 function collectDestructurePropsFromStyleFns(emitter, args) {
 	const { j } = emitter;
 	const { d, styleArgs, destructureProps } = args;
+	const knownProps = collectKnownConditionPropNames(emitter, d);
 	for (const p of d.styleFnFromProps ?? []) {
 		if (p.jsxProp && p.jsxProp !== "__props" && p.jsxProp !== "__helper" && !destructureProps.includes(p.jsxProp)) destructureProps.push(p.jsxProp);
 		if (p.conditionWhen) collectConditionProps(j, {
 			when: p.conditionWhen,
-			destructureProps
+			destructureProps,
+			knownProps
 		});
 		for (const extra of p.extraCallArgs ?? []) if (extra.jsxProp && extra.jsxProp !== "__props" && extra.jsxProp !== "__helper" && !destructureProps.includes(extra.jsxProp)) destructureProps.push(extra.jsxProp);
 	}
@@ -17184,9 +18130,10 @@ function collectDestructurePropsFromStyleFns(emitter, args) {
 * Results are pushed to `styleArgs` (or `orderedEntries` when source order tracking is active).
 */
 function buildVariantStyleExprs(opts) {
-	const { d, emitter, j, stylesIdentifier, styleArgs, orderedEntries, hasSourceOrder, destructureProps, booleanProps, compoundVariantKeys, enableComplementaryMerging, onNewDestructureProp } = opts;
+	const { d, emitter, j, stylesIdentifier, styleArgs, orderedEntries, hasSourceOrder, destructureProps, booleanProps, knownProps: providedKnownProps, compoundVariantKeys, enableComplementaryMerging, onNewDestructureProp } = opts;
 	if (!d.variantStyleKeys) return;
 	const sortedEntries = sortVariantEntriesBySpecificity(Object.entries(d.variantStyleKeys));
+	const knownProps = providedKnownProps ?? collectKnownConditionPropNames(emitter, d);
 	/** Push an expression to orderedEntries (if source ordering) or directly to styleArgs. */
 	const pushExpr = (expr, when) => {
 		const order = d.variantSourceOrder?.[when];
@@ -17212,7 +18159,8 @@ function buildVariantStyleExprs(opts) {
 				const { cond } = emitter.collectConditionProps({
 					when: positiveWhen,
 					destructureProps,
-					booleanProps
+					booleanProps,
+					...knownProps ? { knownProps } : {}
 				});
 				if (onNewDestructureProp && prevLengthRef && destructureProps) for (let i = prevLengthRef.value; i < destructureProps.length; i++) onNewDestructureProp(destructureProps[i]);
 				const isCurrentPositive = areEquivalentWhen(when, positiveWhen);
@@ -17226,7 +18174,8 @@ function buildVariantStyleExprs(opts) {
 			const { cond, isBoolean } = emitter.collectConditionProps({
 				when,
 				destructureProps,
-				booleanProps
+				booleanProps,
+				...knownProps ? { knownProps } : {}
 			});
 			if (onNewDestructureProp && prevLengthRef && destructureProps) for (let i = prevLengthRef.value; i < destructureProps.length; i++) onNewDestructureProp(destructureProps[i]);
 			const styleExpr = styleRef(j, stylesIdentifier, variantKey);
@@ -17241,7 +18190,8 @@ function buildVariantStyleExprs(opts) {
 		const { cond, isBoolean } = emitter.collectConditionProps({
 			when,
 			destructureProps,
-			booleanProps
+			booleanProps,
+			...knownProps ? { knownProps } : {}
 		});
 		const styleExpr = styleRef(j, stylesIdentifier, variantKey);
 		pushExpr(emitter.makeConditionalStyleExpr({
@@ -17296,12 +18246,31 @@ function appendGuardedStyleArgs(entries, styleArgs, j, buildExpr, booleanProps)
 *
 * Returns the list of guard prop names that need destructuring.
 */
-function appendPseudoAliasStyleArgs(entries, styleArgs, j, stylesIdentifier) {
+function appendPseudoAliasStyleArgs(entries, styleArgs, j, stylesIdentifier, orderedEntries) {
 	if (!entries?.length) return [];
-	return appendGuardedStyleArgs(entries, styleArgs, j, (entry) => {
+	const guardProps = [];
+	const aliasExprs = [];
+	for (const entry of entries) {
 		const properties = entry.pseudoNames.map((name, i) => j.property("init", /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(name) ? j.identifier(name) : j.literal(name), styleRef(j, stylesIdentifier, entry.styleKeys[i])));
-		return j.callExpression(cloneAstNode(entry.styleSelectorExpr), [j.objectExpression(properties)]);
-	});
+		const expr = j.callExpression(cloneAstNode(entry.styleSelectorExpr), [j.objectExpression(properties)]);
+		let finalExpr = expr;
+		if (entry.guard) {
+			const parsed = parseVariantWhenToAst(j, entry.guard.when);
+			for (const p of parsed.props) if (p && !guardProps.includes(p)) guardProps.push(p);
+			finalExpr = makeConditionalStyleExpr(j, {
+				cond: parsed.cond,
+				expr,
+				isBoolean: parsed.isBoolean
+			});
+		}
+		if (orderedEntries && entry.sourceOrder !== void 0) orderedEntries.push({
+			order: entry.sourceOrder,
+			expr: finalExpr
+		});
+		else aliasExprs.push(finalExpr);
+	}
+	if (aliasExprs.length > 0) styleArgs.unshift(...aliasExprs);
+	return guardProps;
 }
 /**
 * Appends pseudo-expand style args as static `styles.key` references.
@@ -17317,8 +18286,8 @@ function appendPseudoExpandStyleArgs(entries, styleArgs, j, stylesIdentifier) {
 * Appends both pseudo-alias and pseudo-expand style args, deduplicating guard props.
 * Returns the combined list of guard prop names that need destructuring.
 */
-function appendAllPseudoStyleArgs(d, styleArgs, j, stylesIdentifier) {
-	const guardProps = appendPseudoAliasStyleArgs(d.pseudoAliasSelectors, styleArgs, j, stylesIdentifier);
+function appendAllPseudoStyleArgs(d, styleArgs, j, stylesIdentifier, orderedEntries) {
+	const guardProps = appendPseudoAliasStyleArgs(d.pseudoAliasSelectors, styleArgs, j, stylesIdentifier, orderedEntries);
 	for (const gp of appendPseudoExpandStyleArgs(d.pseudoExpandSelectors, styleArgs, j, stylesIdentifier)) if (!guardProps.includes(gp)) guardProps.push(gp);
 	return guardProps;
 }
@@ -17331,7 +18300,8 @@ function appendAllPseudoStyleArgs(d, styleArgs, j, stylesIdentifier) {
 function buildAllVariantAndStyleExprs(opts) {
 	const { d, emitter, j, stylesIdentifier, styleArgs, destructureProps, propDefaults, compoundVariantKeys, afterVariantStyleArgs, enableComplementaryMerging, buildCompoundVariantExpressions } = opts;
 	const booleanProps = collectBooleanPropNames(d);
-	const hasSourceOrder = !!(d.variantSourceOrder && Object.keys(d.variantSourceOrder).length > 0);
+	const knownProps = collectKnownConditionPropNames(emitter, d);
+	const hasSourceOrder = hasStyleSourceOrder(d);
 	const orderedEntries = [];
 	buildVariantStyleExprs({
 		d,
@@ -17343,6 +18313,7 @@ function buildAllVariantAndStyleExprs(opts) {
 		hasSourceOrder,
 		destructureProps,
 		booleanProps,
+		knownProps,
 		compoundVariantKeys,
 		enableComplementaryMerging
 	});
@@ -17351,10 +18322,11 @@ function buildAllVariantAndStyleExprs(opts) {
 		styleArgs,
 		destructureProps,
 		propDefaults,
-		orderedEntries: hasSourceOrder ? orderedEntries : void 0
+		orderedEntries: hasSourceOrder ? orderedEntries : void 0,
+		knownProps
 	});
 	if (d.compoundVariants) buildCompoundVariantExpressions(d.compoundVariants, styleArgs, destructureProps);
-	for (const gp of appendAllPseudoStyleArgs(d, styleArgs, j, stylesIdentifier)) if (!destructureProps.includes(gp)) destructureProps.push(gp);
+	for (const gp of appendAllPseudoStyleArgs(d, styleArgs, j, stylesIdentifier, hasSourceOrder ? orderedEntries : void 0)) if (!destructureProps.includes(gp)) destructureProps.push(gp);
 	for (const prop of collectInlineStylePropNames(d.inlineStyleProps ?? [])) if (!destructureProps.includes(prop)) destructureProps.push(prop);
 	emitter.buildStyleFnExpressions({
 		d,
@@ -17439,11 +18411,19 @@ var WrapperEmitter = class {
 	* configure the hook.
 	*/
 	wrappedComponentAcceptsSxProp(componentLocalName) {
-		return this.wrappedComponentInterfaceFor(componentLocalName)?.acceptsSx === true;
+		const componentInterface = this.wrappedComponentInterfaceFor(componentLocalName);
+		return componentInterface?.acceptsSx === true && componentInterface.sxTarget !== "inner";
 	}
 	wrappedComponentInterfaceFor(componentLocalName) {
 		if (!this.useSxProp) return;
 		const importInfo = this.importMap.get(componentLocalName);
+		const typedComponent = this.typeScriptComponentMetadataFor(componentLocalName);
+		const typedInterface = typedComponent?.supportsSxProp ? {
+			acceptsSx: true,
+			...typedComponent.sxTarget ? { sxTarget: typedComponent.sxTarget } : {},
+			sxExcludedProperties: typedComponent.sxExcludedProperties,
+			sxAllowedProperties: typedComponent.sxAllowedProperties
+		} : void 0;
 		if (importInfo) {
 			const adapterResult = this.wrappedComponentInterface?.({
 				localName: componentLocalName,
@@ -17451,15 +18431,10 @@ var WrapperEmitter = class {
 				importedName: importInfo.importedName,
 				filePath: this.filePath
 			});
-			if (adapterResult !== void 0) return adapterResult;
+			if (adapterResult !== void 0) return mergeWrappedComponentInterface(adapterResult, typedInterface);
 		}
-		const typedComponent = this.typeScriptComponentMetadataFor(componentLocalName);
 		if (typedComponent) {
-			if (typedComponent.supportsSxProp) return {
-				acceptsSx: true,
-				sxExcludedProperties: typedComponent.sxExcludedProperties,
-				sxAllowedProperties: typedComponent.sxAllowedProperties
-			};
+			if (typedInterface) return typedInterface;
 			if (!this.hasSourceOverrideFor(componentLocalName)) return { acceptsSx: false };
 		}
 		return importInfo?.source.kind === "absolutePath" && transformedComponentAcceptsSx({
@@ -17567,7 +18542,7 @@ var WrapperEmitter = class {
 		return Boolean(d.usedAsValue) || this.isUsedAsValueInFile(d.localName);
 	}
 	isBroadValueUsage(d) {
-		return this.isUsedAsValue(d) && d.valueUsageKind !== "virtualListElementType";
+		return this.isUsedAsValue(d) && d.valueUsageKind !== "elementTypeProp";
 	}
 	requiresRestForValueUsage(d) {
 		return this.isUsedAsValueInFile(d.localName) || this.hasAliasedJsxSpreadUsage(d.localName);
@@ -17610,13 +18585,13 @@ var WrapperEmitter = class {
 	shouldAllowStyleProp(d) {
 		if (d.consumerUsesStyle ?? d.supportsExternalStyles) return true;
 		if (d.consumerUsesSpread) return this.spreadMayContainProp(d, "style");
-		if (d.valueUsageKind === "virtualListElementType") return true;
+		if (d.valueUsageKind === "elementTypeProp") return true;
 		if (this.isBroadValueUsage(d)) return true;
 		const used = this.getUsedAttrs(d.localName);
 		return used.has("*") || used.has("style");
 	}
 	shouldAllowSxProp(d) {
-		if (d.valueUsageKind === "virtualListElementType") return (d.supportsExternalStyles ?? false) || d.typeScriptSupportsSxProp === true;
+		if (d.valueUsageKind === "elementTypeProp") return (d.supportsExternalStyles ?? false) || d.typeScriptSupportsSxProp === true;
 		return (d.supportsExternalStyles ?? false) || d.typeScriptSupportsSxProp === true || this.shouldAllowClassNameProp(d) || this.shouldAllowStyleProp(d);
 	}
 	typedComponentHasProp(componentLocalName, propName) {
@@ -18507,6 +19482,9 @@ var WrapperEmitter = class {
 	buildExtraStylexPropsExprs(args) {
 		return buildExtraStylexPropsExprs(this.j, args);
 	}
+	buildExtraStylexPropsExprEntries(args) {
+		return buildExtraStylexPropsExprEntries(this.j, args);
+	}
 	literalExpr(value) {
 		return literalExpr(this.j, value);
 	}
@@ -19203,18 +20181,20 @@ function emitComponentWrappers(emitter) {
 		const styleValueVariantProps = new Set(d.styleValueVariantProps ?? []);
 		const observedExpressionConditionDropProps = new Set(d.observedExpressionConditionDropProps ?? []);
 		for (const prop of styleValueVariantProps) styleFnValueProps.add(prop);
-		const propsArgExprs = d.extraStylexPropsArgs ? emitter.buildExtraStylexPropsExprs({
+		const propsArgExprs = d.extraStylexPropsArgs ? emitter.buildExtraStylexPropsExprEntries({
 			entries: d.extraStylexPropsArgs,
 			destructureProps
 		}) : [];
-		const { beforeBase: extraStyleArgs, afterBase: extraStyleArgsAfterBase } = emitter.buildInterleavedExtraStyleArgs(d, propsArgExprs);
+		const { beforeBase: extraStyleArgs, afterBase: extraStyleArgsAfterBase, afterVariants: afterVariantStyleArgs } = emitter.buildInterleavedExtraStyleArgs(d, propsArgExprs);
 		const styleArgs = [
 			...extraStyleArgs,
 			...emitter.baseStyleExpr(d),
 			...extraStyleArgsAfterBase
 		];
-		const hasSourceOrder = !!(d.variantSourceOrder && Object.keys(d.variantSourceOrder).length > 0);
+		const hasSourceOrder = hasStyleSourceOrder(d);
 		const orderedEntries = [];
+		const booleanProps = collectBooleanPropNames(d);
+		const knownProps = collectKnownConditionPropNames(emitter, d);
 		buildVariantStyleExprs({
 			d,
 			emitter,
@@ -19224,7 +20204,8 @@ function emitComponentWrappers(emitter) {
 			orderedEntries,
 			hasSourceOrder,
 			destructureProps,
-			booleanProps: collectBooleanPropNames(d),
+			booleanProps,
+			knownProps,
 			compoundVariantKeys: collectCompoundVariantKeys(d.compoundVariants),
 			enableComplementaryMerging: true,
 			onNewDestructureProp: (prop) => styleOnlyConditionProps.add(prop)
@@ -19235,7 +20216,8 @@ function emitComponentWrappers(emitter) {
 			destructureProps,
 			propDefaults,
 			namespaceBooleanProps,
-			orderedEntries: hasSourceOrder ? orderedEntries : void 0
+			orderedEntries: hasSourceOrder ? orderedEntries : void 0,
+			knownProps
 		});
 		if (d.compoundVariants) {
 			const prevLengthCompound = destructureProps.length;
@@ -19251,7 +20233,7 @@ function emitComponentWrappers(emitter) {
 		const needsUseTheme = appendThemeBooleanStyleArgs(d.needsUseThemeHook, styleArgs, j, stylesIdentifier, () => {
 			needsUseThemeImport = true;
 		});
-		for (const gp of appendAllPseudoStyleArgs(d, styleArgs, j, stylesIdentifier)) if (!destructureProps.includes(gp)) {
+		for (const gp of appendAllPseudoStyleArgs(d, styleArgs, j, stylesIdentifier, hasSourceOrder ? orderedEntries : void 0)) if (!destructureProps.includes(gp)) {
 			destructureProps.push(gp);
 			styleOnlyConditionProps.add(gp);
 		}
@@ -19275,6 +20257,7 @@ function emitComponentWrappers(emitter) {
 			styleFnValueProps.add(prop);
 		}
 		mergeOrderedEntries(orderedEntries, styleArgs);
+		if (afterVariantStyleArgs.length > 0) styleArgs.push(...afterVariantStyleArgs);
 		const filterOnlyTransientProps = [];
 		const wrapperOnlyTransientProps = [];
 		const wrapperExplicitPropNames = /* @__PURE__ */ new Set();
@@ -19414,7 +20397,11 @@ function emitComponentWrappers(emitter) {
 			if (!firstPart || memberParts.length === 0) jsxTagName = j.jsxIdentifier(renderedComponent);
 			else jsxTagName = memberParts.reduce((object, member) => j.jsxMemberExpression(object, j.jsxIdentifier(member)), j.jsxIdentifier(firstPart));
 		} else jsxTagName = j.jsxIdentifier(renderedComponent);
-		const { attrsInfo, staticClassNameExpr } = emitter.splitAttrsInfo(d.attrsInfo, getBridgeClassVar(d), d.extraClassNames);
+		const ownBridgeClassVar = getBridgeClassVar(d);
+		const inheritedBridgeClassVar = renderedComponent !== wrappedComponent && wrappedLocalDecl ? getBridgeClassVar(wrappedLocalDecl) : void 0;
+		const hasInheritedBridgeExtraClass = !!inheritedBridgeClassVar && (d.extraClassNames ?? []).some((entry) => entry.expr.type === "Identifier" && entry.expr.name === inheritedBridgeClassVar);
+		const inheritedBridgeClassNames = inheritedBridgeClassVar && inheritedBridgeClassVar !== ownBridgeClassVar && !hasInheritedBridgeExtraClass ? [{ expr: j.identifier(inheritedBridgeClassVar) }] : [];
+		const { attrsInfo, staticClassNameExpr } = emitter.splitAttrsInfo(d.attrsInfo, ownBridgeClassVar, inheritedBridgeClassNames.length > 0 ? [...inheritedBridgeClassNames, ...d.extraClassNames ?? []] : d.extraClassNames);
 		const defaultAttrs = attrsInfo?.defaultAttrs ?? [];
 		const dynamicAttrs = attrsInfo?.dynamicAttrs ?? [];
 		const staticAttrs = normalizeStaticForwardedAsAttr(attrsInfo?.staticAttrs ?? {}, shouldLowerForwardedAs);
@@ -20688,7 +21675,7 @@ function emitInputWrappers(ctx) {
 				}
 			])
 		];
-		const pseudoGuardProps = appendAllPseudoStyleArgs(d, styleArgs, j, stylesIdentifier);
+		const pseudoGuardProps = appendAllPseudoStyleArgs(d, styleArgs, j, stylesIdentifier, void 0);
 		const extraDestructureProps = ["type"];
 		if (aw.readonlyKey) extraDestructureProps.push("readOnly");
 		buildAttrWrapperBody(ctx, {
@@ -20752,7 +21739,7 @@ function emitLinkWrappers(ctx) {
 				}
 			])
 		];
-		const pseudoGuardProps = appendAllPseudoStyleArgs(d, styleArgs, j, stylesIdentifier);
+		const pseudoGuardProps = appendAllPseudoStyleArgs(d, styleArgs, j, stylesIdentifier, void 0);
 		const hrefId = j.identifier("href");
 		const targetId = j.identifier("target");
 		buildAttrWrapperBody(ctx, {
@@ -20833,7 +21820,7 @@ function emitEnumVariantWrappers(ctx) {
 			j.logicalExpression("&&", condPrimary, styleRef(j, stylesIdentifier, primary.styleKey)),
 			j.logicalExpression("&&", condSecondary, styleRef(j, stylesIdentifier, secondary.styleKey))
 		];
-		const pseudoGuardPropsEnum = appendAllPseudoStyleArgs(d, styleArgs, j, stylesIdentifier);
+		const pseudoGuardPropsEnum = appendAllPseudoStyleArgs(d, styleArgs, j, stylesIdentifier, void 0);
 		if (pseudoGuardPropsEnum.length > 0) injectDestructureProps(j, declStmt, pseudoGuardPropsEnum);
 		const sxDecl = j.variableDeclaration("const", [j.variableDeclarator(j.identifier("sx"), j.callExpression(j.memberExpression(j.identifier("stylex"), j.identifier("props")), styleArgs))]);
 		const openingEl = j.jsxOpeningElement(j.jsxIdentifier(allowAsProp ? "Component" : "div"), [j.jsxSpreadAttribute(j.identifier("sx")), ...includesForwardedAs ? [j.jsxAttribute(j.jsxIdentifier("as"), j.jsxExpressionContainer(forwardedAsId))] : []], false);
@@ -20951,11 +21938,11 @@ function emitIntrinsicPolymorphicWrappers(ctx) {
 		ctx.markNeedsReactTypeImport();
 		const destructureProps = [];
 		const propDefaults = /* @__PURE__ */ new Map();
-		const propsArgExprs = d.extraStylexPropsArgs ? emitter.buildExtraStylexPropsExprs({
+		const propsArgExprs = d.extraStylexPropsArgs ? emitter.buildExtraStylexPropsExprEntries({
 			entries: d.extraStylexPropsArgs,
 			destructureProps
 		}) : [];
-		const { beforeBase: extraStyleArgs, afterBase: extraStyleArgsAfterBase } = emitter.buildInterleavedExtraStyleArgs(d, propsArgExprs);
+		const { beforeBase: extraStyleArgs, afterBase: extraStyleArgsAfterBase, afterVariants: afterVariantStyleArgs } = emitter.buildInterleavedExtraStyleArgs(d, propsArgExprs);
 		const styleArgs = buildInitialStyleArgs(j, stylesIdentifier, d, extraStyleArgs, extraStyleArgsAfterBase);
 		buildAllVariantAndStyleExprs({
 			d,
@@ -20966,6 +21953,7 @@ function emitIntrinsicPolymorphicWrappers(ctx) {
 			destructureProps,
 			propDefaults,
 			compoundVariantKeys: collectCompoundVariantKeys(d.compoundVariants),
+			afterVariantStyleArgs,
 			buildCompoundVariantExpressions
 		});
 		const isVoidTag = VOID_TAGS.has(tagName);
@@ -21083,9 +22071,13 @@ function emitShouldForwardPropWrappers(ctx) {
 		const includesForwardedAs = hasForwardedAsUsage(d);
 		const allowAsProp = shouldAllowAsProp(d, tagName);
 		const extraProps = /* @__PURE__ */ new Set();
+		const knownConditionProps = collectKnownConditionPropNames(emitter, d);
 		for (const p of d.shouldForwardProp?.dropProps ?? []) if (p) extraProps.add(p);
 		for (const when of Object.keys(d.variantStyleKeys ?? {})) {
-			const { props } = emitter.collectConditionProps({ when });
+			const { props } = emitter.collectConditionProps({
+				when,
+				...knownConditionProps ? { knownProps: knownConditionProps } : {}
+			});
 			for (const p of props) if (p) extraProps.add(p);
 		}
 		for (const dim of d.variantDimensions ?? []) extraProps.add(dim.propName);
@@ -21203,15 +22195,16 @@ function emitShouldForwardPropWrappers(ctx) {
 		}
 		ctx.markNeedsReactTypeImport();
 		const propDefaults = /* @__PURE__ */ new Map();
-		const propsArgExprs = d.extraStylexPropsArgs ? emitter.buildExtraStylexPropsExprs({ entries: d.extraStylexPropsArgs }) : [];
+		const propsArgExprs = d.extraStylexPropsArgs ? emitter.buildExtraStylexPropsExprEntries({ entries: d.extraStylexPropsArgs }) : [];
 		const { beforeBase: extraStyleArgs, afterBase: extraStyleArgsAfterBase, afterVariants: afterVariantStyleArgs } = emitter.buildInterleavedExtraStyleArgs(d, propsArgExprs);
 		const styleArgs = buildInitialStyleArgs(j, stylesIdentifier, d, extraStyleArgs, extraStyleArgsAfterBase);
 		const needsUseTheme = appendThemeBooleanStyleArgs(d.needsUseThemeHook, styleArgs, j, stylesIdentifier, () => ctx.markNeedsUseThemeImport());
-		const pseudoGuardProps = appendAllPseudoStyleArgs(d, styleArgs, j, stylesIdentifier);
 		const compoundVariantKeys = collectCompoundVariantKeys(d.compoundVariants);
 		const booleanProps = collectBooleanPropNames(d);
-		const hasSourceOrder = !!(d.variantSourceOrder && Object.keys(d.variantSourceOrder).length > 0);
+		const knownProps = collectKnownConditionPropNames(emitter, d);
+		const hasSourceOrder = hasStyleSourceOrder(d);
 		const orderedEntries = [];
+		const pseudoGuardProps = appendAllPseudoStyleArgs(d, styleArgs, j, stylesIdentifier, hasSourceOrder ? orderedEntries : void 0);
 		buildVariantStyleExprs({
 			d,
 			emitter,
@@ -21221,12 +22214,16 @@ function emitShouldForwardPropWrappers(ctx) {
 			orderedEntries,
 			hasSourceOrder,
 			booleanProps,
+			knownProps,
 			compoundVariantKeys
 		});
 		const dropProps = d.shouldForwardProp?.dropProps ?? [];
 		if (d.variantStyleKeys) for (const when of Object.keys(d.variantStyleKeys)) {
 			if (compoundVariantKeys.has(when)) continue;
-			const { props } = emitter.collectConditionProps({ when });
+			const { props } = emitter.collectConditionProps({
+				when,
+				...knownProps ? { knownProps } : {}
+			});
 			for (const p of props) if (p && !dropProps.includes(p)) dropProps.push(p);
 		}
 		const dropPrefix = d.shouldForwardProp?.dropPrefix;
@@ -21234,7 +22231,10 @@ function emitShouldForwardPropWrappers(ctx) {
 		for (const p of dropProps) destructureParts.push(p);
 		if (d.extraStylexPropsArgs) {
 			for (const extra of d.extraStylexPropsArgs) if (extra.when) {
-				const { props } = emitter.collectConditionProps({ when: extra.when });
+				const { props } = emitter.collectConditionProps({
+					when: extra.when,
+					...knownProps ? { knownProps } : {}
+				});
 				for (const p of props) if (p && !destructureParts.includes(p)) destructureParts.push(p);
 			}
 		}
@@ -21244,7 +22244,8 @@ function emitShouldForwardPropWrappers(ctx) {
 			styleArgs,
 			destructureProps: destructureParts,
 			propDefaults,
-			orderedEntries: hasSourceOrder ? orderedEntries : void 0
+			orderedEntries: hasSourceOrder ? orderedEntries : void 0,
+			knownProps
 		});
 		if (d.compoundVariants) buildCompoundVariantExpressions(d.compoundVariants, styleArgs, destructureParts);
 		const styleFnPairs = d.styleFnFromProps ?? [];
@@ -21265,7 +22266,8 @@ function emitShouldForwardPropWrappers(ctx) {
 				const { cond, isBoolean } = emitter.collectConditionProps({
 					when: p.conditionWhen,
 					destructureProps: destructureParts,
-					booleanProps
+					booleanProps,
+					...knownProps ? { knownProps } : {}
 				});
 				expr = emitter.makeConditionalStyleExpr({
 					cond,
@@ -21499,7 +22501,7 @@ function emitSimpleWithConfigWrappers(ctx) {
 				if (d.consumerUsesSpread === true || d.consumerUsesElementProps === true || d.consumerUsesSpread === void 0 && d.consumerUsesElementProps === void 0 && supportsExternalStyles) return true;
 				if (allowClassNameProp || allowStyleProp || allowSxProp) return true;
 				const used = emitter.getUsedAttrs(d.localName);
-				if (used.has("*") || d.valueUsageKind === "virtualListElementType") return true;
+				if (used.has("*") || d.valueUsageKind === "elementTypeProp") return true;
 				return used.size > 0;
 			})();
 			const baseTypeText = shouldUseIntrinsicProps ? emitter.inferredIntrinsicPropsTypeText({
@@ -21546,7 +22548,7 @@ function emitSimpleWithConfigWrappers(ctx) {
 		const { beforeBase: extraStyleArgs, afterBase: extraStyleArgsAfterBase } = emitter.splitExtraStyleArgs(d);
 		const styleArgs = buildInitialStyleArgs(j, stylesIdentifier, d, extraStyleArgs, extraStyleArgsAfterBase);
 		const needsUseThemeWithConfig = appendThemeBooleanStyleArgs(d.needsUseThemeHook, styleArgs, j, stylesIdentifier, () => ctx.markNeedsUseThemeImport());
-		const pseudoGuardProps = appendAllPseudoStyleArgs(d, styleArgs, j, stylesIdentifier);
+		const pseudoGuardProps = appendAllPseudoStyleArgs(d, styleArgs, j, stylesIdentifier, void 0);
 		const propsParamId = j.identifier("props");
 		if (allowAsProp && emitTypes) emitter.annotatePropsParam(propsParamId, d.localName, `${emitter.propsTypeNameFor(d.localName)}<C>`);
 		else emitter.annotatePropsParam(propsParamId, d.localName);
@@ -21560,8 +22562,12 @@ function emitSimpleWithConfigWrappers(ctx) {
 			const usedAttrs = emitter.getUsedAttrs(d.localName);
 			const includeRest = usedAttrs.has("*") || emitter.isBroadValueUsage(d) || (d.isExported ?? false) || usedAttrs.size > 0 || hasElementPropsInDefaultAttrs(d);
 			const variantProps = /* @__PURE__ */ new Set();
+			const knownProps = collectKnownConditionPropNames(emitter, d);
 			if (d.variantStyleKeys) for (const [when] of Object.entries(d.variantStyleKeys)) {
-				const { props } = emitter.collectConditionProps({ when });
+				const { props } = emitter.collectConditionProps({
+					when,
+					...knownProps ? { knownProps } : {}
+				});
 				for (const p of props) if (p) variantProps.add(p);
 			}
 			for (const dim of d.variantDimensions ?? []) variantProps.add(dim.propName);
@@ -21572,7 +22578,10 @@ function emitSimpleWithConfigWrappers(ctx) {
 			const extraProps = /* @__PURE__ */ new Set();
 			if (d.extraStylexPropsArgs) for (const extra of d.extraStylexPropsArgs) {
 				if (!extra.when) continue;
-				const { props } = emitter.collectConditionProps({ when: extra.when });
+				const { props } = emitter.collectConditionProps({
+					when: extra.when,
+					...knownProps ? { knownProps } : {}
+				});
 				for (const p of props) if (p) extraProps.add(p);
 			}
 			const inlineProps = new Set(collectInlineStylePropNames(d.inlineStyleProps ?? []));
@@ -21715,7 +22724,7 @@ function emitSimpleExportedIntrinsicWrappers(ctx) {
 		let inlineTypeText;
 		const isExportedComponent = d.isExported ?? false;
 		const usePolymorphicPattern = allowAsProp && isExportedComponent;
-		const willForwardRef = (d.supportsRefProp ?? false) || isExportedComponent || d.valueUsageKind === "virtualListElementType" || hasComplementaryVariantPairs(d) || !!d.variantDimensions?.some((dim) => dim.namespaceBooleanProp);
+		const willForwardRef = (d.supportsRefProp ?? false) || isExportedComponent || d.valueUsageKind === "elementTypeProp" || hasComplementaryVariantPairs(d) || !!d.variantDimensions?.some((dim) => dim.namespaceBooleanProp);
 		const useSlimType = !isExportedComponent && !(d.supportsExternalStyles ?? false) && !emitter.isBroadValueUsage(d) && !hasElementPropsInDefaultAttrs(d);
 		{
 			const explicit = emitter.stringifyTsType(d.propsType);
@@ -21881,7 +22890,7 @@ function emitSimpleExportedIntrinsicWrappers(ctx) {
 		}
 		const destructureProps = [];
 		const propDefaults = /* @__PURE__ */ new Map();
-		const propsArgExprs = d.extraStylexPropsArgs ? emitter.buildExtraStylexPropsExprs({
+		const propsArgExprs = d.extraStylexPropsArgs ? emitter.buildExtraStylexPropsExprEntries({
 			entries: d.extraStylexPropsArgs,
 			destructureProps
 		}) : [];
@@ -22160,13 +23169,13 @@ function getTypeNameText(typeName) {
 	}
 	return null;
 }
-function collectPropsUsedOutsideExtraStyleConditionals(j, d) {
+function collectPropsUsedOutsideExtraStyleConditionals(j, d, knownProps) {
 	const used = /* @__PURE__ */ new Set();
 	const add = (name) => {
 		if (name) used.add(name);
 	};
 	for (const [when] of Object.entries(d.variantStyleKeys ?? {})) {
-		const parsed = parseVariantWhenToAst(j, when);
+		const parsed = parseVariantWhenToAst(j, when, void 0, knownProps);
 		for (const prop of parsed.props) add(prop);
 	}
 	for (const dim of d.variantDimensions ?? []) {
@@ -23588,6 +24597,18 @@ function tryResolveConditionalValue(node, ctx) {
 			};
 		}
 		if (!b || typeof b !== "object") return null;
+		if (b.type === "BinaryExpression") {
+			const binary = b;
+			if (isCssCalcOperator$1(binary.operator)) {
+				const left = branchToExpr(binary.left);
+				const right = branchToExpr(binary.right);
+				if (left && right && left.usage === expectedUsage && right.usage === expectedUsage && (left.imports.length > 0 || right.imports.length > 0) && isCssCalcSafeOperand(left) && isCssCalcSafeOperand(right)) return {
+					usage: expectedUsage,
+					expr: buildCssCalcExprSource(left, binary.operator, right),
+					imports: [...left.imports, ...right.imports]
+				};
+			}
+		}
 		const callHasThemeArg = (call) => (call.arguments ?? []).some((arg) => {
 			if (!arg || typeof arg !== "object" || arg.type !== "MemberExpression") return false;
 			if (propsParamName) {
@@ -24072,6 +25093,21 @@ function tryResolveConditionalValue(node, ctx) {
 	}
 	return buildRuntimeCallResult();
 }
+function isCssCalcOperator$1(operator) {
+	return operator === "+" || operator === "-" || operator === "*" || operator === "/";
+}
+function isCssCalcSafeOperand(branch) {
+	return branch.imports.length > 0 || isNumericExpressionSource(branch.expr);
+}
+function isNumericExpressionSource(expr) {
+	return /^-?(?:0|[1-9]\d*)(?:\.\d+)?$/.test(expr);
+}
+function buildCssCalcExprSource(left, operator, right) {
+	return `\`calc(${cssCalcOperandSource(left)} ${operator} ${cssCalcOperandSource(right)})\``;
+}
+function cssCalcOperandSource(branch) {
+	return branch.imports.length > 0 ? `\${${branch.expr}}` : branch.expr;
+}
 function tryResolveConditionalCssBlock(node, ctx) {
 	const expr = node.expr;
 	if (!isArrowFunctionExpression(expr)) return null;
@@ -26046,7 +27082,11 @@ function tryHandleInterpolatedStringValue(args) {
 		cssValue: d.value,
 		resolveCallExpr,
 		resolveImportedValueExpr,
-		addImport
+		addImport,
+		multiline: {
+			property: (d.property ?? "").trim(),
+			stylisValueRaw: d.valueRaw ?? ""
+		}
 	});
 	if (!tl) return false;
 	const outputs = cssDeclarationToStylexDeclarations(d);
@@ -26061,7 +27101,7 @@ function tryHandleInterpolatedStringValue(args) {
 	return true;
 }
 function buildInterpolatedTemplate(args) {
-	const { j, decl, cssValue, resolveCallExpr, resolveImportedValueExpr, addImport } = args;
+	const { j, decl, cssValue, resolveCallExpr, resolveImportedValueExpr, addImport, multiline } = args;
 	if (!cssValue || cssValue.kind !== "interpolated") return null;
 	const parts = cssValue.parts ?? [];
 	const exprs = [];
@@ -26149,7 +27189,13 @@ function buildInterpolatedTemplate(args) {
 		raw: q,
 		cooked: q
 	}, true));
-	return j.templateLiteral(quasis, exprs);
+	const templateLiteral = j.templateLiteral(quasis, exprs);
+	if (!multiline) return templateLiteral;
+	return maybeApplyAuthoredMultilineToExpression(j, templateLiteral, {
+		rawCss: decl.rawCss,
+		property: multiline.property,
+		stylisValueRaw: multiline.stylisValueRaw
+	});
 }
 function hasAdjacentUnitInParts(parts, slotIndex) {
 	const before = parts[slotIndex - 1]?.kind === "static" ? parts[slotIndex - 1]?.value ?? "" : "";
@@ -27399,6 +28445,57 @@ const createCssHelperHandlers = (ctx) => {
 	};
 };
 //#endregion
+//#region src/internal/lower-rules/observed-variant-buckets.ts
+/** Upper bound on observed values before bucketing is considered too broad to be worthwhile. */
+const MAX_OBSERVED_VARIANT_VALUES = 20;
+/**
+* Validates that `propName` is an optional prop whose consumer usage is exhaustively observed
+* (it is sometimes omitted and every supplied value is a static string/number), returning the
+* observed values when bucketing is viable or `null` to bail.
+*
+* These buckets carry no runtime fallback, so they are only sound when every call site is
+* observable. Both flags are required and force a bail when set:
+*  - `isExported`: callers outside the analyzed set can render the component with unseen values.
+*  - `escapesAsValue`: the component is passed as a value (innerElementType/as/HOC/alias), so an
+*    unobserved host may render it with unseen values.
+* In both cases callers fall back to dynamic styles instead.
+*/
+function resolveObservedVariantValues(args) {
+	if (args.isExported || args.escapesAsValue || !args.isOptional) return null;
+	if ((args.usage?.props[args.propName]?.omittedCount ?? 0) === 0) return null;
+	const values = getExhaustiveObservedStaticValues(args.usage, args.propName);
+	if (!values || values.length < (args.minValues ?? 1) || values.length > MAX_OBSERVED_VARIANT_VALUES) return null;
+	return values;
+}
+/**
+* Computes every bucket up front and emits atomically: if any value bails, nothing is emitted and
+* `false` is returned so the caller can fall back to its dynamic path. Returns `true` once at least
+* one variant has been emitted and the prop has been marked for lookup-cast + drop + wrapping.
+*/
+function emitObservedVariantBuckets(params) {
+	const buckets = [];
+	for (const propValue of params.observedValues) {
+		const result = params.buildBucket(propValue);
+		if (result.kind === "bail") return false;
+		if (result.kind === "skip" || Object.keys(result.style).length === 0) continue;
+		const condition = formatObservedVariantCondition(params.propName, propValue);
+		buckets.push({
+			when: result.whenPrefix ? `${result.whenPrefix} && ${condition}` : condition,
+			style: result.style
+		});
+	}
+	if (buckets.length === 0) return false;
+	for (const { when, style } of buckets) params.applyVariant({
+		when,
+		propName: params.propName
+	}, style);
+	params.decl.variantLookupCastProps ??= /* @__PURE__ */ new Set();
+	params.decl.variantLookupCastProps.add(params.propName);
+	params.ensurePropDrop(params.propName);
+	params.decl.needsWrapperComponent = true;
+	return true;
+}
+//#endregion
 //#region src/internal/lower-rules/static-evaluator.ts
 const MAX_STATIC_CALL_DEPTH = 20;
 function evaluateLocalCallValueTransform(args) {
@@ -27631,7 +28728,7 @@ function isStaticEvalValue(value) {
 //#endregion
 //#region src/internal/lower-rules/css-helper-conditional.ts
 function createCssHelperConditionalHandler(ctx) {
-	const { j, decl, filePath, warnings, parseExpr, resolveValue, resolveCall, resolveSelector, resolveImportInScope, resolverImports, componentInfo, handlerContext, styleObj, styleFnFromProps, styleFnDecls, inlineStyleProps, isCssHelperTaggedTemplate, resolveCssHelperTemplate, resolveStaticCssBlock, isPlainTemplateLiteral, isThemeAccessTest, applyVariant, dropAllTestInfoProps, annotateParamFromJsxProp, findJsxPropTsType, isJsxPropOptional, markBail, importMap, root, extraStyleObjects, resolvedStyleObjects } = ctx;
+	const { j, decl, filePath, warnings, parseExpr, resolveValue, resolveCall, resolveSelector, resolveImportInScope, resolverImports, componentInfo, handlerContext, styleObj, styleFnFromProps, styleFnDecls, inlineStyleProps, isCssHelperTaggedTemplate, resolveCssHelperTemplate, resolveStaticCssBlock, isPlainTemplateLiteral, isThemeAccessTest, applyVariant, dropAllTestInfoProps, annotateParamFromJsxProp, findJsxPropTsType, isJsxPropOptional, markBail, importMap, root, extraStyleObjects, resolvedStyleObjects, allocateSourceOrder } = ctx;
 	const avoidNames = new Set(importMap.keys());
 	const cssHelperTemplateOptions = { rejectStrippedSpecificity: decl.base.kind === "component" };
 	/**
@@ -27730,21 +28827,28 @@ function createCssHelperConditionalHandler(ctx) {
 			}
 			return null;
 		};
-		const replaceParamWithProps = (exprNode) => {
+		const replaceParamWithProps = (exprNode, localParamName, localBindings) => {
 			const cloned = cloneAstNode(exprNode);
 			const replace = (node, parent) => {
 				if (!node || typeof node !== "object") return node;
 				if (Array.isArray(node)) return node.map((child) => replace(child, parent));
 				const n = node;
-				if (bindings.kind === "simple" && isMemberExpression(n) && n.object?.type === "Identifier" && n.object?.name === bindings.paramName && n.property?.type === "Identifier" && (n.property?.name ?? "").startsWith("$") && n.computed === false) return j.identifier(n.property.name);
+				if ((bindings.kind === "simple" || localParamName || localBindings?.kind === "simple") && isMemberExpression(n) && n.object?.type === "Identifier" && (bindings.kind === "simple" && n.object?.name === bindings.paramName || localParamName && n.object?.name === localParamName || localBindings?.kind === "simple" && n.object?.name === localBindings.paramName) && n.property?.type === "Identifier" && (n.property?.name ?? "").startsWith("$") && n.computed === false) return j.identifier(n.property.name);
 				if (n.type === "Identifier") {
 					const nodeName = n.name ?? "";
-					if (bindings.kind === "simple" && nodeName === bindings.paramName) {
+					if (bindings.kind === "simple" && nodeName === bindings.paramName || localParamName && nodeName === localParamName || localBindings?.kind === "simple" && nodeName === localBindings.paramName) {
 						const p = parent;
 						const isMemberProp = p && isMemberExpression(p) && p.property === n && p.computed === false;
 						const isObjectKey = p && p.type === "Property" && p.key === n && p.shorthand !== true;
 						if (!isMemberProp && !isObjectKey) return j.identifier("props");
 					}
+					if (localBindings?.kind === "destructured" && localBindings.bindings.has(nodeName)) {
+						const propName = localBindings.bindings.get(nodeName);
+						const defaultValue = localBindings.defaults?.get(propName);
+						const base = propName.startsWith("$") ? j.identifier(propName) : j.memberExpression(j.identifier("props"), j.identifier(propName));
+						if (defaultValue) return j.logicalExpression("??", base, cloneAstNode(defaultValue));
+						return base;
+					}
 					if (bindings.kind === "destructured" && bindings.bindings.has(nodeName)) {
 						const propName = bindings.bindings.get(nodeName);
 						const defaultValue = bindings.defaults?.get(propName);
@@ -27777,6 +28881,11 @@ function createCssHelperConditionalHandler(ctx) {
 			};
 			return replace(cloned, void 0);
 		};
+		const getFunctionParamName = (node) => {
+			if (node.type !== "ArrowFunctionExpression" && node.type !== "FunctionExpression") return;
+			const firstParam = node.params?.[0];
+			return firstParam?.type === "Identifier" ? firstParam.name : void 0;
+		};
 		/** Apply conditional variants, composing with an outer condition, and inject useTheme() for theme refs. */
 		const applyConditionalVariantsInline = (conditionalVariants, outerCondition) => {
 			for (const cv of conditionalVariants) {
@@ -27802,14 +28911,18 @@ function createCssHelperConditionalHandler(ctx) {
 			if (!tpl || tpl.type !== "TemplateLiteral") return null;
 			const { rules, slotExprById } = parseCssTemplateToRules(tpl);
 			const out = /* @__PURE__ */ new Map();
+			const runtimePseudoAliases = [];
 			const mediaValues = /* @__PURE__ */ new Map();
 			const computedMediaValues = /* @__PURE__ */ new Map();
-			let sawResolvedPseudoSelector = false;
+			let sawInterpolatedPseudoSelector = false;
 			const setValueForProp = (prop, value, media, computedKey, pseudoEntries) => {
 				if (pseudoEntries?.length) {
 					if (media || computedKey) return false;
-					sawResolvedPseudoSelector = true;
-					out.set(prop, wrapValueWithResolvedPseudos(prop, value, pseudoEntries));
+					const localDefaultExpr = out.get(prop);
+					const defaultExpr = localDefaultExpr ?? (styleObj[prop] !== void 0 ? styleValueToExpression(j, styleObj[prop]) : j.literal(null));
+					const wrapped = localDefaultExpr?.type === "ObjectExpression" ? appendValueWithResolvedPseudos(localDefaultExpr, value, defaultExpr, pseudoEntries) : wrapValueWithResolvedPseudos(value, defaultExpr, pseudoEntries);
+					if (localDefaultExpr) inlineMapPseudoRootDefaults.set(wrapped, true);
+					out.set(prop, wrapped);
 					return true;
 				}
 				if (computedKey) {
@@ -27827,10 +28940,14 @@ function createCssHelperConditionalHandler(ctx) {
 			};
 			const resolveRulePseudoEntries = (selector) => {
 				if (selector === "&") return [];
-				const match = selector.match(/^&((?::[a-zA-Z][a-zA-Z0-9-]*(?:\([^)]*\))?)*):__SC_EXPR_(\d+)__\s*$/);
-				if (!match?.[2]) return null;
-				const prefixPseudo = match[1] || "";
-				const slotExpr = slotExprById.get(Number(match[2]));
+				const staticPseudo = selector.match(/^&((?::[a-zA-Z][a-zA-Z0-9-]*(?:\([^)]*\))?)+)$/);
+				if (staticPseudo?.[1]) return [{ pseudo: staticPseudo[1] }];
+				const placeholderMatch = selector.match(/__SC_EXPR_(\d+)__/);
+				const beforePlaceholder = placeholderMatch?.index === void 0 ? "" : selector.slice(0, placeholderMatch.index);
+				const normalizedAfterPlaceholder = (placeholderMatch?.index === void 0 ? "" : selector.slice(placeholderMatch.index + placeholderMatch[0].length)).trim();
+				const prefixPseudo = beforePlaceholder.replace(/^&/, "").replace(/:$/, "");
+				if (!placeholderMatch?.[1] || normalizedAfterPlaceholder !== "" && normalizedAfterPlaceholder !== "&" || !(prefixPseudo === "" || /^(?::[a-zA-Z][a-zA-Z0-9-]*(?:\([^)]*\))?)+$/.test(prefixPseudo))) return null;
+				const slotExpr = slotExprById.get(Number(placeholderMatch[1]));
 				if (!slotExpr || typeof slotExpr !== "object") return null;
 				let localName = null;
 				let path;
@@ -27861,8 +28978,24 @@ function createCssHelperConditionalHandler(ctx) {
 				});
 				if (!selectorResult) return null;
 				registerImports(selectorResult.imports, resolverImports);
-				if (selectorResult.kind === "pseudoAlias") return selectorResult.values.map((value) => ({ pseudo: `${prefixPseudo}:${value}` }));
+				if (selectorResult.kind === "pseudoAlias") {
+					const styleSelectorExpr = parseExpr(selectorResult.styleSelectorExpr);
+					if (!styleSelectorExpr) return null;
+					const pseudoKeys = selectorResult.values.map((value) => `${prefixPseudo}:${value}`);
+					const alias = {
+						pseudoNames: selectorResult.values,
+						pseudoKeys,
+						styleSelectorExpr
+					};
+					runtimePseudoAliases.push(alias);
+					sawInterpolatedPseudoSelector = true;
+					return pseudoKeys.map((pseudo) => ({
+						pseudo,
+						alias
+					}));
+				}
 				if (selectorResult.kind !== "pseudoExpand") return null;
+				sawInterpolatedPseudoSelector = true;
 				const entries = [];
 				for (const expansion of selectorResult.expansions) {
 					let conditionExpr;
@@ -27879,8 +29012,7 @@ function createCssHelperConditionalHandler(ctx) {
 				}
 				return entries;
 			};
-			const wrapValueWithResolvedPseudos = (prop, value, pseudoEntries) => {
-				const defaultExpr = styleObj[prop] !== void 0 ? styleValueToExpression(j, styleObj[prop]) : j.literal(null);
+			const wrapValueWithResolvedPseudos = (value, defaultExpr, pseudoEntries) => {
 				const properties = [j.property("init", j.identifier("default"), cloneAstNode(defaultExpr))];
 				for (const entry of pseudoEntries) {
 					let entryValue = value;
@@ -27893,6 +29025,19 @@ function createCssHelperConditionalHandler(ctx) {
 				}
 				return j.objectExpression(properties);
 			};
+			const appendValueWithResolvedPseudos = (existing, value, defaultExpr, pseudoEntries) => {
+				const properties = existing.type === "ObjectExpression" ? [...existing.properties] : [];
+				for (const entry of pseudoEntries) {
+					let entryValue = value;
+					if (entry.conditionExpr) entryValue = j.objectExpression([j.property("init", j.identifier("default"), cloneAstNode(defaultExpr)), (() => {
+						const p = j.property("init", entry.conditionExpr, value);
+						p.computed = true;
+						return p;
+					})()]);
+					properties.push(j.property("init", j.literal(entry.pseudo), entryValue));
+				}
+				return j.objectExpression(properties);
+			};
 			for (const rule of rules) {
 				const rawMedia = findSupportedAtRule(rule.atRuleStack);
 				if (hasUnsupportedAtRule(rule.atRuleStack)) return null;
@@ -27960,9 +29105,24 @@ function createCssHelperConditionalHandler(ctx) {
 					if (slotParts.length !== 1) return null;
 					const slotExpr = slotExprById.get(slotParts[0].slotId);
 					if (!slotExpr || typeof slotExpr !== "object") return null;
-					let resolvedExpr = replaceParamWithProps(slotExpr);
+					const slotExprNode = slotExpr;
+					const slotValueExpr = slotExprNode.type === "ArrowFunctionExpression" || slotExprNode.type === "FunctionExpression" ? getFunctionBodyExpr(slotExprNode) : slotExprNode;
+					if (!slotValueExpr) return null;
+					const localBindings = slotExprNode.type === "ArrowFunctionExpression" || slotExprNode.type === "FunctionExpression" ? getArrowFnParamBindings(slotExprNode) : void 0;
+					const rawExpr = replaceParamWithProps(slotValueExpr, getFunctionParamName(slotExprNode), localBindings ?? void 0);
+					let resolvedExpr = rawExpr;
+					if (rawExpr.type === "CallExpression") {
+						const resolvedCall = tryResolveAdapterCall(rawExpr, d.property, {
+							resolveCall,
+							resolveImportInScope,
+							parseExpr,
+							resolverImports,
+							filePath
+						});
+						if (resolvedCall) resolvedExpr = resolvedCall.ast;
+					}
 					const memberPath = paramName && isMemberExpression(slotExpr) ? getMemberPathFromIdentifier(slotExpr, paramName) : null;
-					if (memberPath?.[0] === "theme") {
+					if (rawExpr.type !== "CallExpression" && memberPath?.[0] === "theme") {
 						const resolved = resolveValue({
 							kind: "theme",
 							path: memberPath.slice(1).join("."),
@@ -27994,15 +29154,245 @@ function createCssHelperConditionalHandler(ctx) {
 				}
 				out.set(prop, j.objectExpression(properties));
 			}
-			if (opts?.requireResolvedPseudoSelector && !sawResolvedPseudoSelector) return null;
+			if (opts?.requireResolvedPseudoSelector && !sawInterpolatedPseudoSelector) return null;
+			if (runtimePseudoAliases.length > 0) inlineMapPseudoAliases.set(out, runtimePseudoAliases);
 			return out;
 		};
+		const inlineMapPseudoAliases = /* @__PURE__ */ new WeakMap();
+		const inlineMapPseudoRootDefaults = /* @__PURE__ */ new WeakMap();
+		const tryApplyObservedVariants = (testInfo, propName, buildStyle) => {
+			const observedValues = resolveObservedVariantValues({
+				usage: ctx.propUsageByComponent?.get(decl.localName),
+				propName,
+				isOptional: isJsxPropOptional(propName),
+				isExported: ctx.exportedComponentNames.has(decl.localName),
+				escapesAsValue: ctx.componentsUsedAsValue.has(decl.localName)
+			});
+			const testExpr = parseExpr(testInfo.when);
+			if (!observedValues || !testExpr) return false;
+			return emitObservedVariantBuckets({
+				decl,
+				propName,
+				observedValues,
+				applyVariant,
+				ensurePropDrop: (prop) => ensureShouldForwardPropDrop(decl, prop),
+				buildBucket: (propValue) => {
+					if (evaluateObservedDynamicExpression({
+						j,
+						root,
+						expression: testExpr,
+						propName,
+						propValue
+					}) !== true) return { kind: "skip" };
+					const style = buildStyle(propValue);
+					return style === null ? { kind: "bail" } : {
+						kind: "emit",
+						style
+					};
+				}
+			});
+		};
+		const tryApplyObservedDynamicPropVariants = (testInfo, dynamicProps) => {
+			if (dynamicProps.length === 0) return false;
+			const propNames = [...new Set(dynamicProps.map((entry) => entry.jsxProp))];
+			if (propNames.length !== 1) return false;
+			const propName = propNames[0];
+			return tryApplyObservedVariants(testInfo, propName, (propValue) => {
+				const style = {};
+				for (const dyn of dynamicProps) {
+					if (!dyn.callArg) return null;
+					const cssValue = evaluateObservedDynamicExpression({
+						j,
+						root,
+						expression: dyn.callArg,
+						propName,
+						propValue
+					});
+					if (typeof cssValue !== "string" && typeof cssValue !== "number") return null;
+					style[dyn.stylexProp] = cssValue;
+				}
+				return style;
+			});
+		};
+		const tryApplyObservedRuntimeStyleVariants = (testInfo, style, basePropNames) => {
+			if (Object.keys(style).length === 0 || basePropNames.size !== 1) return false;
+			const propName = [...basePropNames][0];
+			return tryApplyObservedVariants(testInfo, propName, (propValue) => {
+				const evaluatedStyle = {};
+				for (const [stylexProp, value] of Object.entries(style)) {
+					if (!value || typeof value !== "object") {
+						evaluatedStyle[stylexProp] = value;
+						continue;
+					}
+					const cssValue = evaluateObservedDynamicExpression({
+						j,
+						root,
+						expression: value,
+						propName,
+						propValue
+					});
+					if (typeof cssValue !== "string" && typeof cssValue !== "number") return null;
+					evaluatedStyle[stylexProp] = cssValue;
+				}
+				return evaluatedStyle;
+			});
+		};
+		const tryApplyRuntimeStyleFunction = (testInfo, style, opts) => {
+			const importedStylexIdentifiers = getImportedStylexIdentifiers(importMap, resolverImports);
+			const basePropNames = collectRuntimeStylePropNames(style, importMap, importedStylexIdentifiers);
+			const referencesTheme = styleReferencesRuntimeTheme(style);
+			const dynamicProps = opts?.dynamicProps ?? [];
+			if (basePropNames.size === 0 && dynamicProps.length === 0 && !referencesTheme) return false;
+			if (!referencesTheme && tryApplyObservedRuntimeStyleVariants(testInfo, style, basePropNames)) return true;
+			if (Object.keys(style).length === 0 && !referencesTheme && tryApplyObservedDynamicPropVariants(testInfo, dynamicProps)) return true;
+			if (Object.keys(style).length === 0 && dynamicProps.length > 0 && !referencesTheme) {
+				for (const dyn of dynamicProps) {
+					const fnKey = styleKeyWithSuffix(decl.styleKey, dyn.stylexProp);
+					const isGuardedBySameProp = normalizeTransientPropName(dyn.jsxProp) === normalizeTransientPropName(testInfo.propName);
+					const conditionWhen = isGuardedBySameProp ? void 0 : testInfo.when;
+					const condition = isGuardedBySameProp ? "truthy" : void 0;
+					if (!styleFnDecls.has(fnKey)) {
+						const dynParamName = cssPropertyToIdentifier(dyn.stylexProp, avoidNames);
+						const param = j.identifier(dynParamName);
+						annotateParamFromJsxProp(param, dyn.jsxProp);
+						const p = makeCssProperty(j, dyn.stylexProp, dynParamName);
+						const bodyExpr = j.objectExpression([p]);
+						styleFnDecls.set(fnKey, j.arrowFunctionExpression([param], bodyExpr));
+					}
+					if (!styleFnFromProps.some((p) => p.fnKey === fnKey && p.jsxProp === dyn.jsxProp && p.condition === condition && p.conditionWhen === conditionWhen)) styleFnFromProps.push({
+						fnKey,
+						jsxProp: dyn.jsxProp,
+						...condition ? { condition } : {},
+						...conditionWhen ? { conditionWhen } : {}
+					});
+					ensureShouldForwardPropDrop(decl, dyn.jsxProp);
+				}
+				for (const propName of testInfo.allPropNames ?? [testInfo.propName]) if (propName) ensureShouldForwardPropDrop(decl, propName);
+				decl.needsWrapperComponent = true;
+				return true;
+			}
+			const runtimeStyle = { ...style };
+			for (const dyn of dynamicProps) runtimeStyle[dyn.stylexProp] = j.memberExpression(j.identifier("props"), j.identifier(normalizeTransientPropName(dyn.jsxProp)));
+			const propNames = collectRuntimeStylePropNames(runtimeStyle, importMap, importedStylexIdentifiers);
+			for (const propName of testInfo.allPropNames ?? [testInfo.propName]) if (propName) propNames.add(normalizeTransientPropName(propName));
+			const fnKey = ensureUniqueKey([
+				styleFnDecls,
+				extraStyleObjects,
+				resolvedStyleObjects
+			], styleKeyWithSuffix(decl.styleKey, normalizeTransientPropName(testInfo.propName) || "dynamic"));
+			const params = [j.identifier("props")];
+			if (referencesTheme) params.push(j.identifier("theme"));
+			const callArg = j.objectExpression([...propNames].sort().map((propName) => {
+				const id = j.identifier(propName);
+				const prop = j.property("init", id, id);
+				prop.shorthand = true;
+				return prop;
+			}));
+			const addRuntimeStyleFn = (key, body) => {
+				styleFnDecls.set(key, j.arrowFunctionExpression(params.map((param) => cloneAstNode(param)), body));
+				styleFnFromProps.push({
+					fnKey: key,
+					jsxProp: "__props",
+					callArg: cloneAstNode(callArg),
+					conditionWhen: testInfo.when,
+					...referencesTheme ? { extraCallArgs: [{
+						jsxProp: "__helper",
+						callArg: j.identifier("theme")
+					}] } : {}
+				});
+			};
+			const styleProperties = Object.entries(runtimeStyle).flatMap(([prop, value]) => {
+				const { expression, customProps } = bridgeRuntimePseudoColorValues(j, fnKey, prop, toRuntimeStyleExpression(j, value, importedStylexIdentifiers));
+				return [...customProps, j.property("init", makeCssPropKey(j, prop), expression)];
+			});
+			addRuntimeStyleFn(fnKey, j.objectExpression(styleProperties));
+			for (const propName of propNames) ensureShouldForwardPropDrop(decl, propName);
+			if (referencesTheme) {
+				decl.needsUseThemeHook ??= [];
+				if (!decl.needsUseThemeHook.some((entry) => entry.themeProp === "__runtime")) decl.needsUseThemeHook.push({
+					themeProp: "__runtime",
+					trueStyleKey: null,
+					falseStyleKey: null
+				});
+			}
+			decl.needsWrapperComponent = true;
+			return true;
+		};
+		const applyStaticPseudoAliasVariants = (testInfo, style, pseudoAliases) => {
+			let rootStyle = style;
+			for (const pseudoAlias of pseudoAliases) {
+				const split = splitStaticPseudoAliasStyle(j, rootStyle, pseudoAlias.pseudoNames, pseudoAlias.pseudoKeys, inlineMapPseudoRootDefaults, (propName) => !hasPriorRootStyleFnForProps(styleFnFromProps, styleFnDecls, new Set([propName])));
+				const { pseudoAliasStyles } = split;
+				if (!pseudoAliasStyles) return false;
+				if (styleReferencesRuntimeTheme(Object.fromEntries(pseudoAliasStyles))) return false;
+				const importedStylexIdentifiers = getImportedStylexIdentifiers(importMap, resolverImports);
+				for (const pseudoStyle of pseudoAliasStyles.values()) if (collectRuntimeStylePropNames(pseudoStyle, importMap, importedStylexIdentifiers).size > 0) {
+					warnings.push({
+						severity: "warning",
+						type: "Conditional `css` block: runtime pseudo-alias styles are not supported",
+						loc: decl.loc
+					});
+					return false;
+				}
+				const styleKeys = [];
+				const guardBase = styleKeyWithSuffix(decl.styleKey, testInfo.when);
+				for (const pseudoName of pseudoAlias.pseudoNames) {
+					const styleKey = ensureUniqueKey([
+						styleFnDecls,
+						extraStyleObjects,
+						resolvedStyleObjects
+					], `${guardBase}Pseudo${capitalize(kebabToCamelCase(pseudoName))}`);
+					const pseudoStyle = pseudoAliasStyles.get(pseudoName);
+					if (!pseudoStyle) return false;
+					styleKeys.push(styleKey);
+					extraStyleObjects.set(styleKey, pseudoStyle);
+				}
+				const aliasPropNames = collectStylePropNames(pseudoAliasStyles.values());
+				const sourceOrder = !hasRootStyleForProps(styleObj, aliasPropNames) && !hasRootStyleForProps(split.rootStyle, aliasPropNames) && !hasPriorRootStyleFnForProps(styleFnFromProps, styleFnDecls, aliasPropNames) ? allocateSourceOrder() : void 0;
+				decl.pseudoAliasSelectors ??= [];
+				decl.pseudoAliasSelectors.push({
+					styleKeys,
+					styleSelectorExpr: cloneAstNode(pseudoAlias.styleSelectorExpr),
+					pseudoNames: pseudoAlias.pseudoNames,
+					guard: { when: testInfo.when },
+					...sourceOrder !== void 0 ? { sourceOrder } : {}
+				});
+				rootStyle = split.rootStyle;
+			}
+			if (Object.keys(rootStyle).length > 0) {
+				if (!tryApplyRuntimeStyleFunction(testInfo, rootStyle)) {
+					const rootStyleKey = ensureUniqueKey([
+						styleFnDecls,
+						extraStyleObjects,
+						resolvedStyleObjects
+					], `${styleKeyWithSuffix(decl.styleKey, testInfo.when)}Root`);
+					extraStyleObjects.set(rootStyleKey, rootStyle);
+					decl.pseudoExpandSelectors ??= [];
+					decl.pseudoExpandSelectors.push({
+						styleKey: rootStyleKey,
+						guard: { when: normalizeTransientWhen(testInfo.when) }
+					});
+				}
+			}
+			dropAllTestInfoProps(testInfo);
+			decl.needsWrapperComponent = true;
+			return true;
+		};
 		const body = expr.body;
 		if (body?.type === "LogicalExpression" && body.operator === "&&") {
 			if (pseudoElement && (isCssHelperTaggedTemplate(body.right) || body.right?.type === "TemplateLiteral" || body.right?.type === "StringLiteral" || body.right?.type === "Literal" && typeof body.right.value === "string")) return bailPseudoElementConditional();
 			const testInfo = parseChainedTestInfo(body.left);
 			if (!testInfo) return false;
 			if (isCssHelperTaggedTemplate(body.right)) {
+				const inlineMap = resolveCssBranchToInlineMap(body.right, { requireResolvedPseudoSelector: true });
+				if (inlineMap) {
+					const inlineStyle = Object.fromEntries(inlineMap);
+					const pseudoAliases = inlineMapPseudoAliases.get(inlineMap);
+					if (pseudoAliases) {
+						if (!applyStaticPseudoAliasVariants(testInfo, inlineStyle, pseudoAliases)) markBail();
+					} else if (!tryApplyRuntimeStyleFunction(testInfo, inlineStyle)) applyVariant(testInfo, inlineStyle);
+					return true;
+				}
 				const cssNode = body.right;
 				const resolved = resolveCssHelperTemplate(cssNode.quasi, paramName, decl.loc, cssHelperTemplateOptions);
 				if (!resolved) {
@@ -28010,13 +29400,18 @@ function createCssHelperConditionalHandler(ctx) {
 					return true;
 				}
 				const { style: consStyle, dynamicProps, conditionalVariants } = resolved;
+				if (tryApplyRuntimeStyleFunction(testInfo, consStyle, { dynamicProps })) {
+					applyConditionalVariantsInline(conditionalVariants, testInfo.when);
+					dropAllTestInfoProps(testInfo);
+					return true;
+				}
 				if (dynamicProps.length > 0) {
 					const propName = testInfo.propName;
-					const hasMismatchedProp = dynamicProps.some((p) => p.jsxProp !== propName);
 					const isComparison = testInfo.when.includes("===") || testInfo.when.includes("!==");
-					if (!propName || hasMismatchedProp || testInfo.when.startsWith("!") || isComparison) return false;
+					if (!propName || testInfo.when.startsWith("!") || isComparison) return false;
 					for (const dyn of dynamicProps) {
 						const fnKey = styleKeyWithSuffix(decl.styleKey, dyn.stylexProp);
+						const conditionWhen = normalizeTransientPropName(dyn.jsxProp) === normalizeTransientPropName(propName) ? void 0 : testInfo.when;
 						if (!styleFnDecls.has(fnKey)) {
 							const dynParamName = cssPropertyToIdentifier(dyn.stylexProp, avoidNames);
 							const param = j.identifier(dynParamName);
@@ -28025,10 +29420,11 @@ function createCssHelperConditionalHandler(ctx) {
 							const bodyExpr = j.objectExpression([p]);
 							styleFnDecls.set(fnKey, j.arrowFunctionExpression([param], bodyExpr));
 						}
-						if (!styleFnFromProps.some((p) => p.fnKey === fnKey && p.jsxProp === dyn.jsxProp && p.condition === "truthy")) styleFnFromProps.push({
+						if (!styleFnFromProps.some((p) => p.fnKey === fnKey && p.jsxProp === dyn.jsxProp && p.condition === "truthy" && p.conditionWhen === conditionWhen)) styleFnFromProps.push({
 							fnKey,
 							jsxProp: dyn.jsxProp,
-							condition: "truthy"
+							condition: "truthy",
+							...conditionWhen ? { conditionWhen } : {}
 						});
 						ensureShouldForwardPropDrop(decl, dyn.jsxProp);
 					}
@@ -28203,13 +29599,10 @@ function createCssHelperConditionalHandler(ctx) {
 				});
 			}
 			if (buckets.length === 0) return false;
-			for (const { propValue, style } of buckets) {
-				const propValueExpr = typeof propValue === "number" ? String(propValue) : JSON.stringify(propValue);
-				applyVariant({
-					when: `${args.propName} === ${propValueExpr}`,
-					propName: args.propName
-				}, style);
-			}
+			for (const { propValue, style } of buckets) applyVariant({
+				when: formatObservedVariantCondition(args.propName, propValue),
+				propName: args.propName
+			}, style);
 			decl.variantLookupCastProps ??= /* @__PURE__ */ new Set();
 			decl.variantLookupCastProps.add(args.propName);
 			ensureShouldForwardPropDrop(decl, args.propName);
@@ -28614,7 +30007,11 @@ function createCssHelperConditionalHandler(ctx) {
 		if (consIsCss && altIsEmpty) {
 			const consMap = resolveCssBranchToInlineMap(cons, { requireResolvedPseudoSelector: true });
 			if (consMap) {
-				applyVariant(testInfo, Object.fromEntries(consMap));
+				const consStyle = Object.fromEntries(consMap);
+				const pseudoAliases = inlineMapPseudoAliases.get(consMap);
+				if (pseudoAliases) {
+					if (!applyStaticPseudoAliasVariants(testInfo, consStyle, pseudoAliases)) markBail();
+				} else if (!tryApplyRuntimeStyleFunction(testInfo, consStyle)) applyVariant(testInfo, consStyle);
 				return true;
 			}
 			const consResolved = resolveCssBranch(cons);
@@ -28622,24 +30019,44 @@ function createCssHelperConditionalHandler(ctx) {
 				markBail();
 				return true;
 			}
+			if (tryApplyRuntimeStyleFunction(testInfo, consResolved.style, { dynamicProps: consResolved.dynamicProps })) {
+				applyConditionalVariants(consResolved.conditionalVariants, testInfo.when);
+				dropAllTestInfoProps(testInfo);
+				return true;
+			}
 			if (consResolved.dynamicProps.length > 0) return false;
-			applyVariant(testInfo, consResolved.style);
+			if (!tryApplyRuntimeStyleFunction(testInfo, consResolved.style)) applyVariant(testInfo, consResolved.style);
 			applyConditionalVariants(consResolved.conditionalVariants, testInfo.when);
 			return true;
 		}
 		if (consIsEmpty && altIsCss) {
+			const invertedWhen = invertWhen(testInfo.when);
+			if (!invertedWhen) return false;
+			const invertedTestInfo = {
+				...testInfo,
+				when: invertedWhen
+			};
+			const altMap = resolveCssBranchToInlineMap(alt, { requireResolvedPseudoSelector: true });
+			if (altMap) {
+				const altStyle = Object.fromEntries(altMap);
+				const pseudoAliases = inlineMapPseudoAliases.get(altMap);
+				if (pseudoAliases) {
+					if (!applyStaticPseudoAliasVariants(invertedTestInfo, altStyle, pseudoAliases)) markBail();
+				} else if (!tryApplyRuntimeStyleFunction(invertedTestInfo, altStyle)) applyVariant(invertedTestInfo, altStyle);
+				return true;
+			}
 			const altResolved = resolveCssBranch(alt);
 			if (!altResolved) {
 				markBail();
 				return true;
 			}
+			if (tryApplyRuntimeStyleFunction(invertedTestInfo, altResolved.style, { dynamicProps: altResolved.dynamicProps })) {
+				applyConditionalVariants(altResolved.conditionalVariants, invertedWhen);
+				dropAllTestInfoProps(testInfo);
+				return true;
+			}
 			if (altResolved.dynamicProps.length > 0) return false;
-			const invertedWhen = invertWhen(testInfo.when);
-			if (!invertedWhen) return false;
-			applyVariant({
-				...testInfo,
-				when: invertedWhen
-			}, altResolved.style);
+			if (!tryApplyRuntimeStyleFunction(invertedTestInfo, altResolved.style)) applyVariant(invertedTestInfo, altResolved.style);
 			applyConditionalVariants(altResolved.conditionalVariants, invertedWhen);
 			return true;
 		}
@@ -28938,9 +30355,224 @@ function tryResolveBlockLevelThemeConditional(args) {
 	return true;
 }
 function styleValueToExpression(j, value) {
+	if (value === null) return j.literal(null);
 	if (value !== null && typeof value === "object" && "type" in value) return cloneAstNode(value);
+	if (value !== null && typeof value === "object" && !Array.isArray(value)) return j.objectExpression(Object.entries(value).map(([key, nestedValue]) => j.property("init", /^[A-Za-z_$][A-Za-z0-9_$]*$/.test(key) ? j.identifier(key) : j.literal(key), styleValueToExpression(j, nestedValue))));
 	return staticValueToLiteral(j, value);
 }
+function toRuntimeStyleExpression(j, value, stylexTokenIdentifiers) {
+	return rewritePropsThemeToThemeVar(normalizeDollarProps(j, styleValueToExpression(j, value), { skipIdentifiers: stylexTokenIdentifiers }));
+}
+function splitStaticPseudoAliasStyle(j, style, pseudoNames, pseudoKeys, rootDefaultObjects, shouldPreserveAliasDefault) {
+	const rootStyle = {};
+	const pseudoAliasStyles = /* @__PURE__ */ new Map();
+	for (const pseudoName of pseudoNames) pseudoAliasStyles.set(pseudoName, {});
+	let hasAliasStyle = false;
+	for (const [prop, value] of Object.entries(style)) {
+		const split = splitPseudoObjectByAliasName(j, value, pseudoNames, pseudoKeys, rootDefaultObjects, shouldPreserveAliasDefault(prop));
+		if (!split) {
+			rootStyle[prop] = value;
+			continue;
+		}
+		hasAliasStyle = true;
+		if (split.rootValue) rootStyle[prop] = split.rootValue;
+		for (const [pseudoName, pseudoValue] of split.byPseudoName) {
+			const styleForPseudo = pseudoAliasStyles.get(pseudoName);
+			if (styleForPseudo) styleForPseudo[prop] = pseudoValue;
+		}
+	}
+	return {
+		rootStyle,
+		pseudoAliasStyles: hasAliasStyle ? pseudoAliasStyles : null
+	};
+}
+function splitPseudoObjectByAliasName(j, value, pseudoNames, pseudoKeys, rootDefaultObjects, preserveAliasDefault) {
+	if (!value || typeof value !== "object" || Array.isArray(value)) return null;
+	const node = value;
+	if (node.type !== "ObjectExpression") return null;
+	const properties = node.properties;
+	const byKey = /* @__PURE__ */ new Map();
+	const pseudoKeySet = new Set(pseudoKeys);
+	const rootValue = {};
+	let aliasDefaultValue = null;
+	for (const property of properties ?? []) {
+		if (!property || property.type !== "Property") continue;
+		const keyName = getStaticObjectPropertyKeyName(property);
+		if (keyName) {
+			byKey.set(keyName, property.value);
+			if (preserveAliasDefault && keyName === "default" && !rootDefaultObjects.has(node)) {
+				const staticDefault = staticValueFromExpression(property.value);
+				if (staticDefault !== null && staticDefault !== void 0) aliasDefaultValue = property.value;
+			}
+			if (!pseudoKeySet.has(keyName) && (keyName !== "default" || rootDefaultObjects.has(node))) if (keyName === "default" && property.value?.type === "ObjectExpression") copyObjectExpressionPropertiesToRootValue(rootValue, property.value);
+			else rootValue[keyName] = staticValueFromExpression(property.value) ?? cloneAstNode(property.value);
+		}
+	}
+	const byPseudoName = /* @__PURE__ */ new Map();
+	for (let index = 0; index < pseudoNames.length; index++) {
+		const pseudoName = pseudoNames[index];
+		const pseudoKey = pseudoKeys[index] ?? `:${pseudoName}`;
+		const pseudoValue = byKey.get(pseudoKey);
+		if (!pseudoValue) return null;
+		byPseudoName.set(pseudoName, j.objectExpression([...aliasDefaultValue ? [j.property("init", j.identifier("default"), cloneAstNode(aliasDefaultValue))] : [], j.property("init", j.literal(pseudoKey), cloneAstNode(pseudoValue))]));
+	}
+	return {
+		byPseudoName,
+		...Object.keys(rootValue).length > 0 ? { rootValue } : {}
+	};
+}
+function bridgeRuntimePseudoColorValues(j, styleKey, stylexProp, expression) {
+	if (!isColorLikeStylexProp(stylexProp) || expression.type !== "ObjectExpression") return {
+		expression,
+		customProps: []
+	};
+	const customProps = [];
+	for (const property of expression.properties ?? []) {
+		if (!property || property.type !== "Property") continue;
+		const keyName = getStaticObjectPropertyKeyName(property);
+		if (!keyName?.startsWith(":")) continue;
+		const value = property.value;
+		if (!referencesRuntimeValue(value)) continue;
+		const variableName = buildRuntimePseudoVariableName(styleKey, stylexProp, keyName);
+		customProps.push(j.property("init", j.literal(variableName), cloneAstNode(value)));
+		property.value = j.literal(`var(${variableName})`);
+	}
+	return {
+		expression,
+		customProps
+	};
+}
+function isColorLikeStylexProp(stylexProp) {
+	return stylexProp === "color" || stylexProp === "fill" || stylexProp === "stroke" || stylexProp.endsWith("Color");
+}
+function referencesRuntimeValue(value) {
+	return findInAst(value, (node) => {
+		if (node.type === "Identifier" && node.name === "theme") return true;
+		return isMemberExpression(node) && node.object?.type === "Identifier" && (node.object.name === "props" || node.object.name === "theme") && node.computed === false;
+	});
+}
+function getStaticObjectPropertyKeyName(property) {
+	const key = property.key;
+	if (!key) return null;
+	if (key.type === "Identifier") return key.name ?? null;
+	if (key.type === "Literal" || key.type === "StringLiteral") {
+		const value = key.value;
+		return typeof value === "string" ? value : null;
+	}
+	return null;
+}
+function buildRuntimePseudoVariableName(styleKey, stylexProp, pseudo) {
+	const pseudoSuffix = pseudo.replace(/^:+/, "").replace(/[^A-Za-z0-9]+/g, "-").replace(/^-|-$/g, "") || "state";
+	return `--${camelToKebabCase(styleKey)}-${camelToKebabCase(stylexProp)}-${pseudoSuffix}`;
+}
+function collectRuntimeStylePropNames(style, importMap, stylexTokenIdentifiers) {
+	const names = /* @__PURE__ */ new Set();
+	for (const value of Object.values(style)) collectRuntimePropNames(value, names, importMap, stylexTokenIdentifiers);
+	return names;
+}
+function collectRuntimePropNames(value, names, importMap, stylexTokenIdentifiers) {
+	if (!value || typeof value !== "object") return;
+	if (Array.isArray(value)) {
+		for (const item of value) collectRuntimePropNames(item, names, importMap, stylexTokenIdentifiers);
+		return;
+	}
+	const node = value;
+	if (node.type === "Identifier") {
+		const name = node.name;
+		if (name?.startsWith("$") && !importMap.has(name) && !stylexTokenIdentifiers.has(name)) names.add(normalizeTransientPropName(name));
+		return;
+	}
+	if (isMemberExpression(node)) {
+		const object = node.object;
+		const property = node.property;
+		if (object?.type === "Identifier" && object.name === "props" && property?.type === "Identifier" && node.computed === false) {
+			const propName = property.name;
+			if (propName && propName !== "theme") names.add(normalizeTransientPropName(propName));
+			if (propName === "theme") return;
+		}
+		collectRuntimePropNames(node.object, names, importMap, stylexTokenIdentifiers);
+		if (node.computed) collectRuntimePropNames(node.property, names, importMap, stylexTokenIdentifiers);
+		return;
+	}
+	if (node.type === "Property") {
+		if (node.computed) collectRuntimePropNames(node.key, names, importMap, stylexTokenIdentifiers);
+		collectRuntimePropNames(node.value, names, importMap, stylexTokenIdentifiers);
+		return;
+	}
+	for (const [key, child] of Object.entries(node)) {
+		if (key === "loc" || key === "comments" || key === "type") continue;
+		collectRuntimePropNames(child, names, importMap, stylexTokenIdentifiers);
+	}
+}
+function styleReferencesRuntimeTheme(style) {
+	return Object.values(style).some((value) => findInAst(value, (node) => isMemberExpression(node) && node.object?.type === "Identifier" && node.object.name === "props" && node.property?.type === "Identifier" && node.property.name === "theme" && node.computed === false));
+}
+function normalizeTransientPropName(propName) {
+	return propName.startsWith("$") ? propName.slice(1) : propName;
+}
+function normalizeTransientWhen(when) {
+	return when.replace(/\$([A-Za-z_][A-Za-z0-9_]*)/g, "$1");
+}
+function collectStylePropNames(styles) {
+	const propNames = /* @__PURE__ */ new Set();
+	for (const style of styles) for (const propName of Object.keys(style)) propNames.add(propName);
+	return propNames;
+}
+function hasRootStyleForProps(style, propNames) {
+	for (const propName of propNames) if (Object.prototype.hasOwnProperty.call(style, propName) && styleValueIncludesRootDefault(style[propName])) return true;
+	return false;
+}
+function hasPriorRootStyleFnForProps(styleFnFromProps, styleFnDecls, propNames) {
+	for (const entry of styleFnFromProps) {
+		const styleFn = styleFnDecls.get(entry.fnKey);
+		if (styleFn && typeof styleFn === "object" && styleFn.type === "ArrowFunctionExpression") {
+			const body = styleFn.body;
+			if (objectExpressionHasRootStyleForProps(body, propNames)) return true;
+		}
+	}
+	return false;
+}
+function objectExpressionHasRootStyleForProps(node, propNames) {
+	if (!node || typeof node !== "object" || node.type !== "ObjectExpression") return false;
+	const properties = node.properties;
+	for (const property of properties ?? []) {
+		if (!property || property.type !== "Property") continue;
+		const keyName = getStaticObjectPropertyKeyName(property);
+		if (keyName && propNames.has(keyName) && styleValueIncludesRootDefault(property.value)) return true;
+	}
+	return false;
+}
+function styleValueIncludesRootDefault(value) {
+	if (!value || typeof value !== "object" || Array.isArray(value)) return true;
+	if (value.type === "ObjectExpression") {
+		const properties = value.properties;
+		for (const property of properties ?? []) {
+			if (!property || property.type !== "Property") continue;
+			const keyName = getStaticObjectPropertyKeyName(property);
+			if (keyName && isRootStyleValueKey(keyName)) return true;
+		}
+		return false;
+	}
+	for (const keyName of Object.keys(value)) if (isRootStyleValueKey(keyName)) return true;
+	return false;
+}
+function isRootStyleValueKey(keyName) {
+	return keyName === "default" || !keyName.startsWith(":") && !keyName.startsWith("@");
+}
+function copyObjectExpressionPropertiesToRootValue(rootValue, objectExpression) {
+	const properties = objectExpression.properties;
+	for (const property of properties ?? []) {
+		if (!property || property.type !== "Property") continue;
+		const keyName = getStaticObjectPropertyKeyName(property);
+		if (!keyName) continue;
+		rootValue[keyName] = staticValueFromExpression(property.value) ?? cloneAstNode(property.value);
+	}
+}
+function staticValueFromExpression(node) {
+	if (node && typeof node === "object" && node.type === "Literal" && node.value === null) return null;
+	const value = literalToStaticValue(node);
+	return value === null ? void 0 : value;
+}
 /**
 * If the node is a `typeof x === "type"` expression (a TypeScript type guard),
 * returns the name of the narrowed identifier. Returns null otherwise.
@@ -29658,8 +31290,9 @@ function createDeclProcessingState(state, decl) {
 	const variantSourceOrder = {};
 	/** Monotonically increasing counter for tracking CSS source order of variants and styleFns. */
 	let dynamicSlotOrder = 0;
+	const allocateSourceOrder = () => dynamicSlotOrder++;
 	const variantStyleKeys = new Proxy({}, { set(target, prop, value) {
-		if (typeof prop === "string" && !(prop in target)) variantSourceOrder[prop] = dynamicSlotOrder++;
+		if (typeof prop === "string" && !(prop in target)) variantSourceOrder[prop] = allocateSourceOrder();
 		target[prop] = value;
 		return true;
 	} });
@@ -29667,7 +31300,7 @@ function createDeclProcessingState(state, decl) {
 	const styleFnFromProps = new Proxy([], { get(target, prop, receiver) {
 		if (prop === "push") return (...entries) => {
 			for (const entry of entries) {
-				if (entry.sourceOrder === void 0) entry.sourceOrder = dynamicSlotOrder++;
+				if (entry.sourceOrder === void 0) entry.sourceOrder = allocateSourceOrder();
 				target.push(entry);
 			}
 			return target.length;
@@ -29715,6 +31348,23 @@ function createDeclProcessingState(state, decl) {
 		return helperVal;
 	};
 	const getComposedDefaultValue = (propName) => resolveComposedDefaultValue(cssHelperPropValues.get(propName), propName);
+	const getWrappedComponentBaseDefaultValue = (propName) => {
+		if (decl.base.kind !== "component" || !state.resolveBaseComponent) return;
+		const importInfo = importMap.get(decl.base.ident);
+		if (!importInfo) return;
+		const staticProps = {};
+		for (const [key, value] of Object.entries(decl.attrsInfo?.staticAttrs ?? {})) if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") staticProps[key] = value;
+		try {
+			return state.resolveBaseComponent({
+				importSource: importInfo.source.value,
+				importedName: importInfo.importedName,
+				staticProps,
+				filePath
+			})?.sx?.[propName];
+		} catch {
+			return;
+		}
+	};
 	const { findJsxPropTsType, findJsxPropTsTypeForVariantExtraction, annotateParamFromJsxProp, isJsxPropOptional } = createTypeInferenceHelpers({
 		root,
 		j,
@@ -29868,6 +31518,7 @@ function createDeclProcessingState(state, decl) {
 		variantBuckets,
 		variantStyleKeys,
 		variantSourceOrder,
+		allocateSourceOrder,
 		extraStyleObjects,
 		styleFnFromProps,
 		styleFnDecls,
@@ -29878,6 +31529,7 @@ function createDeclProcessingState(state, decl) {
 		cssHelperPropValues,
 		resolveComposedDefaultValue,
 		getComposedDefaultValue,
+		getWrappedComponentBaseDefaultValue,
 		findJsxPropTsType,
 		findJsxPropTsTypeForVariantExtraction,
 		annotateParamFromJsxProp,
@@ -29915,10 +31567,13 @@ function createDeclProcessingState(state, decl) {
 			annotateParamFromJsxProp,
 			findJsxPropTsType,
 			isJsxPropOptional,
+			allocateSourceOrder,
 			extraStyleObjects,
 			resolvedStyleObjects: state.resolvedStyleObjects,
 			keyframesNames: state.keyframesNames,
-			inlineKeyframeNameMap: state.inlineKeyframeNameMap
+			inlineKeyframeNameMap: state.inlineKeyframeNameMap,
+			exportedComponentNames: state.exportedComponentNames,
+			componentsUsedAsValue: state.componentsUsedAsValue
 		}),
 		getBaseStyleTarget,
 		notifyResolvedStylesArg
@@ -29975,7 +31630,7 @@ function finalizeDeclProcessing(ctx) {
 		const defaultValue = findLocalCustomPropertyFallbackFromRules(prop, decl);
 		if (!defaultValue) continue;
 		const localVar = state.getOrCreateLocalStylexVar(prop, defaultValue);
-		inlineStyleProp.keyExpr = state.j.memberExpression(state.j.identifier(localVar.groupName), localVar.keyName.startsWith("--") ? state.j.literal(localVar.keyName) : state.j.identifier(localVar.keyName), localVar.keyName.startsWith("--"));
+		inlineStyleProp.keyExpr = stylexVarMemberExpression(state.j, localVar);
 		if (expr && typeof expr === "object" && isAstNode(expr)) rewriteCssVarsInAstNode(expr, localVarValues, varsToDrop);
 	}
 	for (const bucket of bucketsForVarRewrite) rewriteCssVarsInStyleObject(bucket, localVarValues, varsToDrop);
@@ -31243,8 +32898,8 @@ function resolveDirectionalConflicts(styleObj) {
 			startVal = hasStart ? computeMergedLonghand(styleObj[start], shorthandMap) : { ...shorthandMap };
 			endVal = hasEnd ? computeMergedLonghand(styleObj[end], shorthandMap) : { ...shorthandMap };
 		} else {
-			startVal = hasStart ? styleObj[start] : shorthandVal;
-			endVal = hasEnd ? styleObj[end] : shorthandVal;
+			startVal = hasStart ? mergeScalarDefaultIntoLonghand(styleObj[start], shorthandVal) : shorthandVal;
+			endVal = hasEnd ? mergeScalarDefaultIntoLonghand(styleObj[end], shorthandVal) : shorthandVal;
 		}
 		const entries = Object.entries(styleObj);
 		for (const key of Object.keys(styleObj)) delete styleObj[key];
@@ -31269,6 +32924,12 @@ function computeMergedLonghand(longhandVal, shorthandMap) {
 	for (const [key, val] of Object.entries(shorthandMap)) if (key !== "default") merged[key] = val;
 	return merged;
 }
+function mergeScalarDefaultIntoLonghand(longhandVal, scalarDefault) {
+	if (!isMediaOrPseudoMap(longhandVal)) return longhandVal;
+	const merged = { ...longhandVal };
+	if (merged.default === null || merged.default === void 0) merged.default = scalarDefault;
+	return merged;
+}
 /**
 * Full CSS shorthand properties that StyleX will expand to longhands.
 * If the value is an opaque AST node (e.g., a theme token), each longhand
@@ -31838,7 +33499,7 @@ function preScanCssHelperPlaceholders(ctx) {
 //#endregion
 //#region src/internal/lower-rules/borders.ts
 function tryHandleInterpolatedBorder(ctx, args) {
-	const { api, j, filePath, decl, extraStyleObjects, resolveValue, resolveCall, importMap, resolverImports, parseExpr, variantBuckets, variantStyleKeys, inlineStyleProps } = ctx;
+	const { api, j, filePath, decl, extraStyleObjects, resolveValue, resolveCall, importMap, resolverImports, parseExpr, variantBuckets, variantStyleKeys, inlineStyleProps, hasStaticPropsBeforeResolvedStylesArg, notifyResolvedStylesArg } = ctx;
 	const { hasLocalThemeBinding } = ctx;
 	const { d, selector, atRuleStack, applyResolvedPropValue, bailUnsupported, bailUnsupportedWithContext } = args;
 	const prop = (d.property ?? "").trim();
@@ -32164,7 +33825,14 @@ function tryHandleInterpolatedBorder(ctx, args) {
 					return true;
 				}
 				decl.extraStylexPropsArgs ??= [];
-				decl.extraStylexPropsArgs.push({ expr: resolved.exprAst });
+				const order = decl.mixinOrder ?? [];
+				order.push("propsArg");
+				decl.mixinOrder = order;
+				decl.extraStylexPropsArgs.push({
+					expr: resolved.exprAst,
+					afterBase: hasStaticPropsBeforeResolvedStylesArg()
+				});
+				notifyResolvedStylesArg();
 				decl.needsWrapperComponent = true;
 				return true;
 			}
@@ -32999,7 +34667,8 @@ function emitPseudoMediaStyleFnFromProps(args) {
 //#region src/internal/lower-rules/rule-interpolated-declaration.ts
 function handleInterpolatedDeclaration(args) {
 	const { ctx, rule, d, media, pseudos, pseudoElement, attrTarget, resolvedSelectorMedia, applyResolvedPropValue } = args;
-	const { state, decl, styleObj, perPropPseudo, variantBuckets, variantStyleKeys, variantSourceOrder, observedVariantFallbackFns, extraStyleObjects, styleFnFromProps, styleFnDecls, inlineStyleProps, cssHelperPropValues, tryHandleMappedFunctionColor, tryHandleLogicalOrDefault, tryHandleConditionalPropCoalesceWithTheme, tryHandleEnumIfChainValue, tryHandleThemeIndexedLookup, handlerContext, componentInfo, tryHandlePropertyTernaryTemplateLiteral, tryHandleCssHelperFunctionSwitchBlock, tryHandleCssHelperConditionalBlock, findJsxPropTsType, findJsxPropTsTypeForVariantExtraction, annotateParamFromJsxProp, isJsxPropOptional, applyVariant, notifyResolvedStylesArg } = ctx;
+	const { state, decl, styleObj, perPropPseudo, variantBuckets, variantStyleKeys, variantSourceOrder, observedVariantFallbackFns, extraStyleObjects, styleFnFromProps, styleFnDecls, inlineStyleProps, cssHelperPropValues, tryHandleMappedFunctionColor, tryHandleLogicalOrDefault, tryHandleConditionalPropCoalesceWithTheme, tryHandleEnumIfChainValue, tryHandleThemeIndexedLookup, handlerContext, componentInfo, tryHandlePropertyTernaryTemplateLiteral, tryHandleCssHelperFunctionSwitchBlock, tryHandleCssHelperConditionalBlock, findJsxPropTsType, findJsxPropTsTypeForVariantExtraction, annotateParamFromJsxProp, isJsxPropOptional, applyVariant, getBaseStyleTarget, notifyResolvedStylesArg } = ctx;
+	const hasStaticPropsBeforeResolvedStylesArg = () => Object.keys(styleObj).length > 0 || getBaseStyleTarget() !== styleObj;
 	const annotateScalarParams = (params, propNames) => {
 		if (!/\.(ts|tsx)$/.test(filePath)) return;
 		propNames.forEach((propName, paramIndex) => {
@@ -33037,9 +34706,7 @@ function handleInterpolatedDeclaration(args) {
 		}
 	};
 	const getObservedStaticVariantValues = (jsxProp) => {
-		const usage = state.propUsageByComponent.get(decl.localName);
-		if (!usage) return null;
-		const propUsage = usage.props[jsxProp];
+		const propUsage = state.propUsageByComponent.get(decl.localName)?.props[jsxProp];
 		if (!propUsage || propUsage.values.length < 2) return null;
 		const values = propUsage.values.filter((value) => typeof value === "string" || typeof value === "number");
 		if (values.length !== propUsage.values.length) return null;
@@ -33049,10 +34716,12 @@ function handleInterpolatedDeclaration(args) {
 	const tryHandleMultiSlotRuntimeValue = (resolveImportedValueExprArg) => {
 		if (!d.property || d.value.kind !== "interpolated") return false;
 		const cssProperty = d.property.trim();
-		if (cssProperty !== "background" && cssProperty !== "background-image") return false;
 		if (media || attrTarget || pseudos?.length || pseudoElement || resolvedSelectorMedia) return false;
 		const parts = d.value.parts ?? [];
 		if (parts.filter((part) => part.kind === "slot").length < 2) return false;
+		if (cssProperty !== "background" && cssProperty !== "background-image" && cssProperty !== "box-shadow" && cssProperty !== "transform") return false;
+		const stylexDecls = cssDeclarationToStylexDeclarations(d);
+		if (stylexDecls.length !== 1 || !stylexDecls[0]?.prop) return false;
 		if (cssProperty === "background" && isUnsupportedBackgroundShorthandValue(d.valueRaw ?? "")) {
 			state.bailUnsupported(decl, "Unsupported background shorthand: multiple components cannot be mapped to a single StyleX longhand");
 			return true;
@@ -33089,7 +34758,7 @@ function handleInterpolatedDeclaration(args) {
 				slotExpr = importedValueResolution.resolved;
 			}
 			if (rawExpr.type === "ArrowFunctionExpression") {
-				for (const propName of collectPropsFromArrowFn(rawExpr)) if (propName !== "theme") propsUsed.add(propName);
+				for (const propName of collectPropsFromArrowFnDestructured(rawExpr)) if (propName !== "theme") propsUsed.add(propName);
 				if (hasThemeAccessInArrowFn(rawExpr)) {
 					needsTheme = true;
 					slotExpr = rewritePropsThemeToThemeVar(slotExpr);
@@ -33100,15 +34769,18 @@ function handleInterpolatedDeclaration(args) {
 				cooked: currentStaticPart
 			}, false));
 			currentStaticPart = "";
-			expressions.push(normalizeDollarProps(j, slotExpr));
+			const importedStylexIdentifiers = getImportedStylexIdentifiers(importMap, resolverImports);
+			const localDollarIdentifiers = rawExpr.type === "ArrowFunctionExpression" ? collectDollarParamBindingIdentifiers(rawExpr) : void 0;
+			expressions.push(normalizeDollarProps(j, slotExpr, {
+				skipIdentifiers: importedStylexIdentifiers,
+				localDollarIdentifiers
+			}));
 		}
 		quasis.push(j.templateElement({
 			raw: currentStaticPart,
 			cooked: currentStaticPart
 		}, true));
 		const valueExpr = j.templateLiteral(quasis, expressions);
-		const stylexDecls = cssDeclarationToStylexDeclarations(d);
-		if (stylexDecls.length === 0) return false;
 		const normalizedPropNames = [...propsUsed].map((propName) => propName.startsWith("$") ? propName.slice(1) : propName);
 		const propsCallArg = normalizedPropNames.length > 0 ? j.objectExpression(normalizedPropNames.map((propName) => {
 			const id = j.identifier(propName);
@@ -33169,7 +34841,7 @@ function handleInterpolatedDeclaration(args) {
 		for (const value of values) {
 			if (value === skipValue) continue;
 			applyVariant({
-				when: `${jsxProp} === ${typeof value === "number" ? String(value) : JSON.stringify(value)}`,
+				when: formatObservedVariantCondition(jsxProp, value),
 				propName: jsxProp
 			}, { [stylexProp]: emitStaticObservedValue(value, stylexProp, observedValues !== null, staticParts) });
 		}
@@ -33202,7 +34874,7 @@ function handleInterpolatedDeclaration(args) {
 			});
 		}
 		for (const { propValue, cssValue } of transformedValues) applyVariant({
-			when: `${jsxProp} === ${typeof propValue === "number" ? String(propValue) : JSON.stringify(propValue)}`,
+			when: formatObservedVariantCondition(jsxProp, propValue),
 			propName: jsxProp
 		}, { [stylexProp]: cssValue });
 		const fallbackFnKey = ensureObservedVariantFallbackFn(jsxProp, stylexProp, (param) => j.callExpression(j.identifier(valueTransform.calleeIdent), [param]));
@@ -33249,7 +34921,7 @@ function handleInterpolatedDeclaration(args) {
 			conditionWhen
 		});
 		for (const { propValue, cssValue } of transformedValues) applyVariant({
-			when: `${conditionWhen} && ${jsxProp} === ${typeof propValue === "number" ? String(propValue) : JSON.stringify(propValue)}`,
+			when: `${conditionWhen} && ${formatObservedVariantCondition(jsxProp, propValue)}`,
 			propName: jsxProp,
 			allPropNames: [conditionProp, jsxProp]
 		}, { [stylexProp]: cssValue });
@@ -33257,6 +34929,63 @@ function handleInterpolatedDeclaration(args) {
 		ensureObservedVariantPropDrop(jsxProp);
 		return true;
 	};
+	const tryEmitObservedCssBlockVariantBuckets = (expr) => {
+		if (media || pseudos?.length || attrTarget || resolvedSelectorMedia || !expr || typeof expr !== "object" || expr.type !== "ArrowFunctionExpression" && expr.type !== "FunctionExpression") return false;
+		if (hasThemeAccessInArrowFn(expr)) return false;
+		const fnExpr = expr;
+		const paramName = getArrowFnSingleParamName(fnExpr);
+		const bodyExpr = getFunctionBodyExpr(fnExpr);
+		if (!paramName || !bodyExpr) return false;
+		const propsUsed = [...new Set([...collectPropsFromArrowFn(fnExpr), ...collectPropsFromArrowFnDestructured(fnExpr)])];
+		if (propsUsed.length !== 1) return false;
+		const jsxProp = propsUsed[0];
+		const observedValues = resolveObservedVariantValues({
+			usage: state.propUsageByComponent.get(decl.localName),
+			propName: jsxProp,
+			isOptional: isJsxPropOptional(jsxProp),
+			isExported: state.exportedComponentNames.has(decl.localName),
+			escapesAsValue: state.componentsUsedAsValue.has(decl.localName),
+			minValues: 2
+		});
+		if (!observedValues) return false;
+		const bindings = getArrowFnParamBindings(fnExpr);
+		const guarded = extractGuardedDynamicBranch(j, bodyExpr);
+		const conditionWhen = guarded ? printScalarizedExpression({
+			j,
+			expr: guarded.test,
+			paramName,
+			propNames: propsUsed,
+			...bindings ? { bindings } : {}
+		}) : null;
+		if (guarded && !conditionWhen) return false;
+		return emitObservedVariantBuckets({
+			decl,
+			propName: jsxProp,
+			observedValues,
+			applyVariant,
+			ensurePropDrop: ensureObservedVariantPropDrop,
+			buildBucket: (propValue) => {
+				const evaluatedValue = evaluateObservedDynamicExpression({
+					j,
+					root: state.root,
+					expression: bodyExpr,
+					propName: jsxProp,
+					propValue,
+					paramName
+				});
+				if (typeof evaluatedValue !== "string") return { kind: "bail" };
+				const cssText = evaluatedValue.trim();
+				if (!cssText) return { kind: "skip" };
+				const parsedStyle = parseCssDeclarationBlock(cssText);
+				if (!parsedStyle || Object.keys(parsedStyle).length === 0) return { kind: "bail" };
+				return {
+					kind: "emit",
+					style: parsedStyle,
+					...conditionWhen ? { whenPrefix: conditionWhen } : {}
+				};
+			}
+		});
+	};
 	const observedExpressionFallbackFnKey = (jsxProp, conditionWhen) => {
 		const normalizedJsxProp = jsxProp.startsWith("$") ? jsxProp.slice(1) : jsxProp;
 		const baseFnKey = styleKeyWithSuffix(decl.styleKey, normalizedJsxProp);
@@ -33405,7 +35134,9 @@ function handleInterpolatedDeclaration(args) {
 			parseExpr,
 			variantBuckets,
 			variantStyleKeys,
-			inlineStyleProps
+			inlineStyleProps,
+			hasStaticPropsBeforeResolvedStylesArg,
+			notifyResolvedStylesArg
 		}, {
 			d,
 			selector: rule.selector,
@@ -33431,7 +35162,11 @@ function handleInterpolatedDeclaration(args) {
 			const resolved = (expr?.type === "ArrowFunctionExpression" || expr?.type === "FunctionExpression" ? resolveThemeValueFromFn(expr) : resolveThemeValue(expr)) ?? null;
 			if (!resolved) return false;
 			const { prefix, suffix } = extractStaticPartsForDecl(d);
-			const finalValue = buildTemplateWithStaticParts(j, resolved, prefix, suffix);
+			const finalValue = buildTemplateWithStaticParts(j, resolved, prefix, suffix, {
+				rawCss: decl.rawCss,
+				property: (d.property ?? "").trim(),
+				stylisValueRaw: d.valueRaw ?? ""
+			});
 			if (pseudoElement) {
 				for (const out of cssDeclarationToStylexDeclarations(d)) applyResolvedPropValue(out.prop, finalValue, null);
 				return true;
@@ -33783,6 +35518,7 @@ function handleInterpolatedDeclaration(args) {
 			const slot = d.value.parts.find((p) => p.kind === "slot");
 			if (slot) {
 				const expr = decl.templateExpressions[slot.slotId];
+				if (tryEmitObservedCssBlockVariantBuckets(expr)) continue;
 				if (expr?.type === "Identifier" && cssHelperNames.has(expr.name)) {
 					const helperDecl = declByLocalName.get(expr.name);
 					if (helperDecl) {
@@ -34557,6 +36293,7 @@ function handleInterpolatedDeclaration(args) {
 				const fnKey = styleKeyWithSuffix(decl.styleKey, out.prop);
 				let helperCallArgs = [];
 				let scalarPropNames = null;
+				let guardedConditionWhenForScalar = null;
 				if (!styleFnDecls.has(fnKey)) {
 					const helperResolution = resolveHelperCallsInDynamicValue({
 						j,
@@ -34596,6 +36333,15 @@ function handleInterpolatedDeclaration(args) {
 					if (!scalarProps && needsOriginalParam) styleFnParamNames.unshift(paramName);
 					const { prefix, suffix } = extractStaticPartsForDecl(d);
 					const valueExpr = (d.property === "transition" ? buildFullInterpolatedDeclarationValueExpr(j, decl, d) : null) ?? (prefix || suffix ? buildTemplateWithStaticParts(j, scalarProps?.valueExpr ?? valueExprRaw, prefix, suffix) : scalarProps?.valueExpr ?? valueExprRaw);
+					const guardedDynamic = extractGuardedDynamicBranch(j, bodyExpr);
+					const guardedConditionWhen = guardedDynamic && scalarProps?.paramNames.length === 1 ? printScalarizedExpression({
+						j,
+						expr: guardedDynamic.test,
+						paramName,
+						propNames: scalarProps.paramNames,
+						bindings: bindings ?? void 0
+					}) : null;
+					guardedConditionWhenForScalar = guardedConditionWhen && isHelperCallGuard(guardedConditionWhen) ? guardedConditionWhen : null;
 					const params = styleFnParamNames.map((name) => j.identifier(name));
 					if (/\.(ts|tsx)$/.test(filePath)) {
 						const isNamedTypeRef = decl.propsType?.type === "TSTypeReference";
@@ -34633,7 +36379,8 @@ function handleInterpolatedDeclaration(args) {
 					const scalarEntry = scalarPropNames ? scalarStyleFnEntryFromProps({
 						j,
 						fnKey,
-						propNames: scalarPropNames
+						propNames: scalarPropNames,
+						...guardedConditionWhenForScalar ? { conditionWhen: guardedConditionWhenForScalar } : {}
 					}) : null;
 					styleFnFromProps.push(scalarEntry ?? {
 						fnKey,
@@ -35072,13 +36819,13 @@ function tryHandleLocalCustomPropertyDefinition(args) {
 	if (!customValue) return false;
 	const defaultValue = findLocalCustomPropertyFallback(customValue.cssName, decl);
 	if (!defaultValue) return false;
-	const ref = getOrCreateLocalStylexVar(customValue.cssName, defaultValue);
+	const localVar = getOrCreateLocalStylexVar(customValue.cssName, defaultValue);
 	const propName = conditionProp.startsWith("$") ? conditionProp.slice(1) : conditionProp;
 	const valueExpr = buildTemplateWithStaticParts(j, j.identifier(propName), customValue.prefix, customValue.suffix);
 	inlineStyleProps.push({
 		prop: customValue.cssName,
 		expr: j.conditionalExpression(j.identifier(propName), valueExpr, j.identifier("undefined")),
-		keyExpr: j.memberExpression(j.identifier(ref.groupName), j.literal(ref.keyName), true)
+		keyExpr: stylexVarMemberExpression(j, localVar)
 	});
 	if (conditionProp.startsWith("$")) ensureShouldForwardPropDrop(decl, conditionProp);
 	decl.needsWrapperComponent = true;
@@ -35617,6 +37364,38 @@ function scalarStyleFnEntryFromProps(args) {
 		})) } : {}
 	};
 }
+function extractGuardedDynamicBranch(j, expr) {
+	if (!expr || typeof expr !== "object" || expr.type !== "ConditionalExpression") return null;
+	const conditional = expr;
+	if (!conditional.test || !conditional.consequent || !conditional.alternate) return null;
+	const consequentEmpty = isEmptyRuntimeStyleBranch(conditional.consequent);
+	if (consequentEmpty === isEmptyRuntimeStyleBranch(conditional.alternate)) return null;
+	return {
+		test: consequentEmpty ? j.unaryExpression("!", conditional.test, true) : conditional.test,
+		value: consequentEmpty ? conditional.alternate : conditional.consequent
+	};
+}
+function isEmptyRuntimeStyleBranch(expr) {
+	const value = literalToStaticValue(expr);
+	return value === "" || value === null || value === false || value === void 0;
+}
+function isHelperCallGuard(conditionWhen) {
+	return conditionWhen.includes("(");
+}
+function printScalarizedExpression(args) {
+	const expr = scalarizePropsObjectDynamicValue({
+		j: args.j,
+		valueExpr: args.expr,
+		paramName: args.paramName,
+		propNames: args.propNames,
+		...args.bindings ? { bindings: args.bindings } : {}
+	})?.valueExpr ?? args.expr;
+	try {
+		return args.j(expr).toSource();
+	} catch {
+		return null;
+	}
+}
 function uniqueScalarPropNames(propNames) {
 	const seen = /* @__PURE__ */ new Set();
 	const result = [];
@@ -36858,6 +38637,7 @@ function resolveInterpolatedPropertyName(property, ctx) {
 function processDeclRules(ctx) {
 	const { state, decl, styleObj, perPropPseudo, perPropMedia, nestedSelectors, variantBuckets, styleFnDecls, attrBuckets, localVarValues, cssHelperPropValues, getComposedDefaultValue } = ctx;
 	const { j, root, warnings, resolverImports, resolveSelector, parseExpr, cssHelperNames, declByLocalName, relationOverridePseudoBuckets, relationOverrides, ancestorSelectorParents, resolveThemeValue, resolveThemeValueFromFn, resolveImportInScope } = state;
+	const getConditionDefaultValue = (propName) => cssHelperPropValues.has(propName) ? getComposedDefaultValue(propName) : ctx.getWrappedComponentBaseDefaultValue(propName) ?? null;
 	/**
 	* Attempts to resolve an element selector (e.g., `& svg`, `& > button`) to a
 	* styled component override. Returns "break" to bail, "continue" to skip to next
@@ -37468,12 +39248,12 @@ function processDeclRules(ctx) {
 			const current = target[prop];
 			if (current && typeof current === "object" && !Array.isArray(current) && !isAstNode(current)) {
 				const map = current;
-				if (!("default" in map)) map.default = null;
+				if (!("default" in map)) map.default = getConditionDefaultValue(prop);
 				map[conditionKey] = conditionValue;
 				return;
 			}
 			target[prop] = {
-				default: current ?? null,
+				default: current ?? getConditionDefaultValue(prop),
 				[conditionKey]: conditionValue
 			};
 		};
@@ -37538,12 +39318,10 @@ function processDeclRules(ctx) {
 					noteSourceCssProperty(existing);
 					if (!("default" in existing)) {
 						const existingVal = styleObj[prop];
-						if (existingVal !== void 0) existing.default = existingVal;
-						else if (cssHelperPropValues.has(prop)) existing.default = getComposedDefaultValue(prop);
-						else existing.default = null;
+						existing.default = existingVal !== void 0 ? existingVal : getConditionDefaultValue(prop);
 					}
 					const current = existing[media];
-					const mediaMap = current && typeof current === "object" && !Array.isArray(current) && !isAstNode(current) ? current : { default: current ?? null };
+					const mediaMap = current && typeof current === "object" && !Array.isArray(current) && !isAstNode(current) ? current : { default: current ?? getConditionDefaultValue(prop) };
 					for (const ps of pseudos) mediaMap[ps] = value;
 					existing[media] = mediaMap;
 				} else {
@@ -37552,16 +39330,14 @@ function processDeclRules(ctx) {
 					noteSourceCssProperty(existing);
 					if (!("default" in existing)) {
 						const existingVal = styleObj[prop];
-						if (existingVal !== void 0) existing.default = existingVal;
-						else if (cssHelperPropValues.has(prop)) existing.default = getComposedDefaultValue(prop);
-						else existing.default = null;
+						existing.default = existingVal !== void 0 ? existingVal : getConditionDefaultValue(prop);
 					}
 					for (const ps of pseudos) {
 						const current = existing[ps];
 						if (!current || typeof current !== "object") {
-							const fallbackDefault = cssHelperPropValues.has(prop) ? getComposedDefaultValue(prop) : null;
+							const fallbackDefault = getConditionDefaultValue(prop);
 							existing[ps] = { default: current !== void 0 ? current : fallbackDefault };
-						} else if (!("default" in current)) current.default = cssHelperPropValues.has(prop) ? getComposedDefaultValue(prop) : null;
+						} else if (!("default" in current)) current.default = getConditionDefaultValue(prop);
 						existing[ps][media] = value;
 					}
 				}
@@ -37609,7 +39385,7 @@ function processDeclRules(ctx) {
 					noteSourceCssProperty(peTarget);
 					const current = peTarget[prop];
 					if (!current || typeof current !== "object" || isAstNode(current)) peTarget[prop] = {
-						default: current ?? null,
+						default: current ?? getConditionDefaultValue(prop),
 						[media]: value
 					};
 					else {
@@ -37638,9 +39414,7 @@ function processDeclRules(ctx) {
 				noteSourceCssProperty(existing);
 				if (!("default" in existing)) {
 					const existingVal = styleObj[prop];
-					if (existingVal !== void 0) existing.default = existingVal;
-					else if (cssHelperPropValues.has(prop)) existing.default = getComposedDefaultValue(prop);
-					else existing.default = null;
+					existing.default = existingVal !== void 0 ? existingVal : getConditionDefaultValue(prop);
 				}
 				const currentMediaValue = existing[media];
 				if (currentMediaValue && typeof currentMediaValue === "object" && !Array.isArray(currentMediaValue) && !isAstNode(currentMediaValue)) currentMediaValue.default = value;
@@ -37662,7 +39436,7 @@ function processDeclRules(ctx) {
 				const existingVal = peTarget[prop];
 				if (typeof existingVal === "object" && existingVal !== null && "default" in existingVal) for (const ps of pseudos) existingVal[ps] = value;
 				else {
-					const pseudoMap = { default: existingVal ?? null };
+					const pseudoMap = { default: existingVal ?? getConditionDefaultValue(prop) };
 					for (const ps of pseudos) pseudoMap[ps] = value;
 					peTarget[prop] = pseudoMap;
 				}
@@ -37674,9 +39448,7 @@ function processDeclRules(ctx) {
 				noteSourceCssProperty(existing);
 				if (!("default" in existing)) {
 					const existingVal = styleObj[prop];
-					if (existingVal !== void 0) existing.default = existingVal;
-					else if (cssHelperPropValues.has(prop)) existing.default = getComposedDefaultValue(prop);
-					else existing.default = null;
+					existing.default = existingVal !== void 0 ? existingVal : getConditionDefaultValue(prop);
 				}
 				for (const ps of pseudos) existing[ps] = value;
 				return;
@@ -37827,7 +39599,14 @@ function writeResolvedDeclaration(d, bucket, j, decl, resolveThemeValue, resolve
 	if (!resolveResult || resolveResult === "bail") return "unresolved";
 	for (const out of cssDeclarationToStylexDeclarations(d)) {
 		if (out.value.kind === "static") bucket[out.prop] = cssValueToJs(out.value, d.important, out.prop);
-		else bucket[out.prop] = buildInterpolatedValue(j, { value: out.value }, resolveResult);
+		else {
+			const built = buildInterpolatedValue(j, { value: out.value }, resolveResult);
+			bucket[out.prop] = maybeApplyAuthoredMultilineToExpression(j, built, {
+				rawCss: decl.rawCss,
+				property: (d.property ?? "").trim(),
+				stylisValueRaw: d.valueRaw ?? ""
+			});
+		}
 		writtenProps.add(out.prop);
 	}
 	return "written";
@@ -38726,6 +40505,8 @@ function createLowerRulesState(ctx) {
 	const stringMappingFns = ctx.stringMappingFns ?? /* @__PURE__ */ new Map();
 	const resolvedStyleObjects = /* @__PURE__ */ new Map();
 	const declByLocalName = new Map(styledDecls.map((d) => [d.localName, d]));
+	const exportedComponentNames = new Set(collectExportedComponents(root, j, declByLocalName).keys());
+	const componentsUsedAsValue = componentsReferencedAsValue(root, j, new Set(declByLocalName.keys()), ctx.styledDefaultImport);
 	const relationOverrides = [];
 	const ancestorSelectorParents = /* @__PURE__ */ new Set();
 	const siblingMarkerParents = /* @__PURE__ */ new Set();
@@ -38754,7 +40535,8 @@ function createLowerRulesState(ctx) {
 		trackMixinPropertyValues(cssHelperValuesByKey.get(helperDecl.styleKey), cssHelperPropValues);
 		if (helperDecl.inlineStyleProps?.length) for (const p of helperDecl.inlineStyleProps) inlineStyleProps.push({
 			prop: p.prop,
-			expr: cloneAstNode(p.expr)
+			expr: cloneAstNode(p.expr),
+			...p.keyExpr ? { keyExpr: cloneAstNode(p.keyExpr) } : {}
 		});
 		if (helperDecl.extraStyleKeys?.length) for (const key of helperDecl.extraStyleKeys) {
 			addStyleKeyMixin(decl, key, { afterBase: helperDecl.extraStyleKeysAfterBase?.includes(key) ?? false });
@@ -38854,6 +40636,7 @@ function createLowerRulesState(ctx) {
 		resolveCall,
 		resolveCallOptional,
 		resolveThemeCall,
+		resolveBaseComponent: ctx.resolveBaseComponent,
 		resolveSelector,
 		localStylexVars,
 		getOrCreateLocalStylexVar,
@@ -38865,6 +40648,8 @@ function createLowerRulesState(ctx) {
 		stringMappingFns,
 		resolvedStyleObjects,
 		declByLocalName,
+		exportedComponentNames,
+		componentsUsedAsValue,
 		relationOverrides,
 		ancestorSelectorParents,
 		siblingMarkerParents,
@@ -40703,19 +42488,13 @@ function wrappedComponentAcceptsSxProp(ctx, componentLocalName, visiting = /* @_
 		visiting.delete(componentLocalName);
 		return true;
 	}
-	const importInfo = ctx.importMap?.get(componentLocalName);
-	if (importInfo) {
-		const adapterResult = ctx.adapter.wrappedComponentInterface?.({
-			localName: componentLocalName,
-			importSource: importInfo.source.value,
-			importedName: importInfo.importedName,
-			filePath: ctx.file.path
-		});
-		if (adapterResult !== void 0) {
-			visiting.delete(componentLocalName);
-			return adapterResult.acceptsSx === true;
-		}
+	const componentInterface = wrappedComponentInterfaceFor(ctx, componentLocalName);
+	if (componentInterface !== void 0) {
+		visiting.delete(componentLocalName);
+		return componentInterface.acceptsSx === true && componentInterface.sxTarget !== "inner";
 	}
+	const [rootLocalName] = componentLocalName.split(".");
+	const importInfo = rootLocalName ? ctx.importMap?.get(rootLocalName) : void 0;
 	const typedComponent = (() => {
 		if (importInfo?.source.kind === "absolutePath") {
 			const names = importInfo.importedName === "default" ? [componentLocalName, importInfo.importedName] : [importInfo.importedName];
@@ -40724,7 +42503,7 @@ function wrappedComponentAcceptsSxProp(ctx, componentLocalName, visiting = /* @_
 		return findTypeScriptComponentMetadata(ctx.options.crossFileInfo?.typeScriptMetadata, ctx.file.path, [componentLocalName]);
 	})();
 	if (typedComponent) {
-		if (typedComponent.supportsSxProp) {
+		if (typedComponent.supportsSxProp && typedComponent.sxTarget !== "inner") {
 			visiting.delete(componentLocalName);
 			return true;
 		}
@@ -40733,7 +42512,7 @@ function wrappedComponentAcceptsSxProp(ctx, componentLocalName, visiting = /* @_
 			return false;
 		}
 	}
-	const accepts = importInfo?.source.kind === "absolutePath" && transformedComponentAcceptsSx({
+	const accepts = rootLocalName === componentLocalName && importInfo?.source.kind === "absolutePath" && transformedComponentAcceptsSx({
 		absolutePath: importInfo.source.value,
 		componentNames: importInfo.importedName === "default" ? [componentLocalName, importInfo.importedName] : [importInfo.importedName],
 		sourceOverrides: ctx.options.transformedFileSources
@@ -40911,6 +42690,7 @@ function rewriteJsxStep(ctx) {
 			const afterBaseKeys = new Set(decl.extraStyleKeysAfterBase ?? []);
 			const extraMixinArgs = [];
 			const extraAfterBaseArgs = [];
+			const extraAfterVariantArgs = [];
 			if (mixinOrder && mixinOrder.length > 0) {
 				let styleKeyIdx = 0;
 				let propsArgIdx = 0;
@@ -40925,16 +42705,31 @@ function rewriteJsxStep(ctx) {
 				} else if (entry === "propsArg" && propsArgIdx < extraStylexPropsArgs.length) {
 					const arg = extraStylexPropsArgs[propsArgIdx];
 					propsArgIdx++;
-					if (arg) if (arg.afterBase) extraAfterBaseArgs.push(arg.expr);
+					if (arg) if (arg.afterVariants) extraAfterVariantArgs.push(arg.expr);
+					else if (arg.afterBase) extraAfterBaseArgs.push(arg.expr);
 					else extraMixinArgs.push(arg.expr);
 				}
+				for (; styleKeyIdx < extraStyleKeys.length; styleKeyIdx++) {
+					const key = extraStyleKeys[styleKeyIdx];
+					if (key) {
+						const expr = j.memberExpression(j.identifier(ctx.stylesIdentifier ?? "styles"), j.identifier(key));
+						if (afterBaseKeys.has(key)) extraAfterBaseArgs.push(expr);
+						else extraMixinArgs.push(expr);
+					}
+				}
+				for (; propsArgIdx < extraStylexPropsArgs.length; propsArgIdx++) {
+					const arg = extraStylexPropsArgs[propsArgIdx];
+					if (arg) if (arg.afterVariants) extraAfterVariantArgs.push(arg.expr);
+					else extraAfterBaseArgs.push(arg.expr);
+				}
 			} else {
-				for (const arg of extraStylexPropsArgs) extraMixinArgs.push(arg.expr);
 				for (const key of extraStyleKeys) {
 					const expr = j.memberExpression(j.identifier(ctx.stylesIdentifier ?? "styles"), j.identifier(key));
 					if (afterBaseKeys.has(key)) extraAfterBaseArgs.push(expr);
 					else extraMixinArgs.push(expr);
 				}
+				for (const arg of extraStylexPropsArgs) if (arg.afterVariants) extraAfterVariantArgs.push(arg.expr);
+				else extraAfterBaseArgs.push(arg.expr);
 			}
 			const baseStyleKey = matchedCombinedStyleKey ?? decl.styleKey;
 			const mergeArgs = matchedCombinedStyleKey ? void 0 : opening.__promotedMergeArgs;
@@ -41051,6 +42846,7 @@ function rewriteJsxStep(ctx) {
 			};
 			for (const attr of leading) processAttr(attr, keptLeadingAfterVariants);
 			for (const attr of rest) processAttr(attr, keptRestAfterVariants);
+			styleArgs.push(...extraAfterVariantArgs);
 			if (adjacentSiblingStyleKey && hasPreviousStaticSiblingWithName(p, decl.localName)) styleArgs.push(j.memberExpression(j.identifier(ctx.stylesIdentifier ?? "styles"), j.identifier(adjacentSiblingStyleKey)));
 			let finalInsertIndex = keptRestAfterVariants.length;
 			for (let i = keptRestAfterVariants.length - 1; i >= 0; i--) {