styled-components-to-stylex-codemod 0.0.38 → 0.0.39

package/dist/transform.mjs

@@ -2,8 +2,8 @@ import { t as createModuleResolver } from "./resolve-imports-BlxKezSJ.mjs";
 import { a as assertValidAdapter, i as isDirectionalResult, n as DEFAULT_THEME_HOOK, t as mergeMarkerDeclarations } from "./merge-markers-BC5YNB7D.mjs";
 import { a as Logger, i as resolveBarrelReExport, r as findImportSource } from "./extract-external-interface-CdHbvfxu.mjs";
 import { n as toRealPath, t as isRelativeSpecifier } from "./path-utils-BIpoL4Ue.mjs";
-import { a as isPrettierIgnoreComment, c as kebabToCamelCase, d as normalizeWhitespace, f as sanitizeIdentifier, i as isBackgroundImageValue, l as looksLikeLength, n as capitalize, o as isSingleBackgroundComponent, r as escapeRegex, s as isValidIdentifierName, t as camelToKebabCase, u as lowerFirst } from "./string-utils-KggM5TNH.mjs";
-import { n as parseStyledTemplateLiteral, r as terminateStandaloneInterpolationStatements, t as PLACEHOLDER_RE } from "./styled-css-BVR82jN5.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 PLACEHOLDER_RE, i as readStaticJsxLiteral, n as createComponentPropUsageInfo, o as parseStyledTemplateLiteral, r as mergeComponentPropUsage, s as terminateStandaloneInterpolationStatements, t as KNOWN_NON_ELEMENT_PROPS } from "./prop-usage-D6ZiDfzz.mjs";
 import { t as isSelectorContext } from "./selector-context-heuristic-6_jSRGkZ.mjs";
 import jscodeshift from "jscodeshift";
 import { basename, dirname, isAbsolute, join, relative, resolve, sep } from "node:path";
@@ -2143,6 +2143,8 @@ var TransformContext = class {
 	crossFileSelectorUsages;
 	/** Component names in this file that need a global selector bridge className */
 	bridgeComponentNames;
+	/** Prepass prop usage inventory for styled components defined in this file. */
+	propUsageByComponent;
 	/** Marker variable names generated for cross-file parent components and sibling selectors (parentStyleKey → markerName) */
 	crossFileMarkers;
 	/** Style keys that use sibling markers (scoped marker replaces defaultMarker) */
@@ -2263,6 +2265,7 @@ var TransformContext = class {
 		if (options.crossFileInfo) {
 			this.crossFileSelectorUsages = options.crossFileInfo.selectorUsages;
 			this.bridgeComponentNames = options.crossFileInfo.bridgeComponentNames;
+			this.propUsageByComponent = options.crossFileInfo.propUsageByComponent;
 		}
 	}
 	markChanged() {
@@ -3282,6 +3285,15 @@ function resolveImportedHelperCall(callExpr, ctx, propsParamName, cssProperty, t
 		resolveCallResult: void 0
 	};
 }
+function resolveImportedCurriedHelperCall(callExpr, ctx, cssProperty) {
+	if (!isCallExpressionNode(callExpr.callee)) return null;
+	if ((callExpr.arguments ?? []).length !== 1) return null;
+	const innerCall = callExpr.callee;
+	return {
+		innerCall,
+		result: resolveImportedHelperCall(innerCall, ctx, void 0, cssProperty)
+	};
+}
 /**
 * Resolves a DynamicNode whose expression is a direct (non-arrow) call expression.
 * Handles both simple `helper(...)` and curried `helper(...)(props)` patterns.
@@ -3294,16 +3306,12 @@ function tryResolveCallExpression(node, ctx) {
 		resolveCallContext: simple.resolveCallContext,
 		resolveCallResult: simple.resolveCallResult
 	});
-	if (isCallExpressionNode(expr.callee)) {
-		if ((expr.arguments ?? []).length === 1) {
-			const innerCall = expr.callee;
-			const innerRes = resolveImportedHelperCall(innerCall, ctx, void 0, node.css.property);
-			if (innerRes.kind === "resolved") return buildResolvedHandlerResult(innerRes.result, node.css.property, {
-				resolveCallContext: innerRes.resolveCallContext,
-				resolveCallResult: innerRes.resolveCallResult
-			});
-		}
-	}
+	const curried = resolveImportedCurriedHelperCall(expr, ctx, node.css.property);
+	if (curried?.result.kind === "resolved") return buildResolvedHandlerResult(curried.result.result, node.css.property, {
+		resolveCallContext: curried.result.resolveCallContext,
+		resolveCallResult: curried.result.resolveCallResult
+	});
+	if (curried?.result.kind === "unresolved") return buildUnresolvedHelperResult(curried.innerCall.callee, ctx);
 	if (simple.kind === "unresolved") return buildUnresolvedHelperResult(expr.callee, ctx);
 	if (simple.kind === "keepOriginal" && node.css.property) {
 		const calleeIdent = getCalleeIdentName(expr.callee);
@@ -4268,7 +4276,7 @@ function analyzeBeforeEmitStep(ctx) {
 	for (const decl of styledDecls) {
 		if (decl.isDirectJsxResolution) continue;
 		if (root.find(j.Identifier, { name: decl.localName }).filter((p) => {
-			if (p.parentPath?.node?.type === "VariableDeclarator") return false;
+			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") {
@@ -7600,8 +7608,8 @@ function collectStyledDeclsImpl(args) {
 		return Array.isArray(arr) && arr.length > 0 ? arr[0] : void 0;
 	};
 	/**
-	* Extract leading comments from the parent VariableDeclaration if it has a single declarator.
-	* This captures JSDoc and line comments for preservation in the output.
+	* Extract preserved leading comments from the parent VariableDeclaration if it has a single
+	* declarator.
 	*/
 	const getLeadingComments = (declaratorPath) => {
 		const parentPath = declaratorPath.parentPath;
@@ -7622,7 +7630,7 @@ function collectStyledDeclsImpl(args) {
 			}
 		}
 		if (!comments || !Array.isArray(comments) || comments.length === 0) return;
-		const filtered = comments.filter((c) => c.leading !== false && !isPrettierIgnoreComment(String(c.value ?? "")));
+		const filtered = comments.filter((c) => !shouldDropStyledLeadingComment(c));
 		return filtered.length > 0 ? filtered : void 0;
 	};
 	/**
@@ -8221,6 +8229,14 @@ function extractDynamicStyleValue(value, attrsParamPropNames) {
 	}
 	return null;
 }
+function shouldDropStyledLeadingComment(comment) {
+	const body = getCommentBody(comment);
+	return hasLeadingFalse(comment) || isPrettierIgnoreComment(body) || isStyleSectionMarkerComment(body);
+}
+function hasLeadingFalse(comment) {
+	if (!comment || typeof comment !== "object") return false;
+	return comment.leading === false;
+}
 function extractPropName(value, attrsParamPropNames) {
 	if (value?.type === "Identifier" && typeof value.name === "string" && attrsParamPropNames.has(value.name)) return value.name;
 	if (value?.type === "MemberExpression" && value.object?.type === "Identifier" && (value.object.name === "props" || value.object.name === "p") && value.property?.type === "Identifier" && typeof value.property.name === "string") return value.property.name;
@@ -10852,27 +10868,6 @@ function getActiveStyledNames(styledDecls) {
 	return names;
 }
 //#endregion
-//#region src/internal/transform-steps/jsx-static-literal.ts
-function readStaticJsxLiteral(attr) {
-	if (!isObjectRecord(attr) || attr.type !== "JSXAttribute") return;
-	if (!("value" in attr) || attr.value == null) return true;
-	const directLiteral = readLiteralNodeValue(attr.value);
-	if (directLiteral !== void 0) return directLiteral;
-	if (!isObjectRecord(attr.value) || attr.value.type !== "JSXExpressionContainer") return;
-	return readLiteralNodeValue(attr.value.expression);
-}
-function readLiteralNodeValue(node) {
-	if (!isObjectRecord(node)) return;
-	if (node.type === "StringLiteral" || node.type === "NumericLiteral" || node.type === "BooleanLiteral") return isStaticLiteral$1(node.value) ? node.value : void 0;
-	if (node.type === "Literal") return isStaticLiteral$1(node.value) ? node.value : void 0;
-}
-function isObjectRecord(value) {
-	return typeof value === "object" && value !== null;
-}
-function isStaticLiteral$1(value) {
-	return typeof value === "string" || typeof value === "number" || typeof value === "boolean";
-}
-//#endregion
 //#region src/internal/transform-steps/resolve-base-components.ts
 /**
 * Step: resolve and inline eligible styled(ImportedComponent) bases.
@@ -12144,7 +12139,8 @@ function emitStylesAndImports(ctx) {
 		if (decl.skipTransform || decl.needsWrapperComponent) continue;
 		if (decl.leadingComments && decl.leadingComments.length > 0) {
 			const { property } = splitBugNarrativeLeadingComments(decl.leadingComments);
-			if (property.length > 0) styleKeyToComments.set(decl.styleKey, property);
+			const stylexCreateComments = property.filter((comment) => !isJSDocBlockComment(comment));
+			if (stylexCreateComments.length > 0) styleKeyToComments.set(decl.styleKey, stylexCreateComments);
 		}
 	}
 	normalizeShorthandLonghandConflicts(styledDecls, resolvedStyleObjects);
@@ -12753,6 +12749,15 @@ function emitStyleMerging(args) {
 		emitTypes
 	});
 	if (wrappedAcceptsSxProp && inlineStyleProps.length === 0 && !staticClassNameExpr) return buildSxOnlyResult(j, styleArgs, { normalizeOptionalEntries: true });
+	if (wrappedAcceptsSxProp && inlineStyleProps.length === 0 && staticClassNameExpr) return buildSxWithExternalPropsResult({
+		j,
+		styleArgs,
+		classNameId,
+		styleId,
+		allowClassNameProp,
+		allowStyleProp,
+		staticClassNameExpr
+	});
 	if (!allowClassNameProp && !allowStyleProp && inlineStyleProps.length === 0 && !staticClassNameExpr) {
 		const sid = emitter.stylesIdentifier;
 		const hasLocalRef = styleArgs.some((a) => j([a]).find(j.Identifier, { name: sid }).size() > 0);
@@ -12865,6 +12870,15 @@ function buildMergerClassNameArg(args) {
 	if (parts.length === 1) return parts[0] ?? null;
 	return j.arrayExpression(parts);
 }
+function buildClassNameAttributeExpr(args) {
+	const { j, classNameId, allowClassNameProp, staticClassNameExpr } = args;
+	const parts = [];
+	if (staticClassNameExpr) parts.push(staticClassNameExpr);
+	if (allowClassNameProp) parts.push(classNameId);
+	if (parts.length === 0) return null;
+	if (parts.length === 1) return parts[0] ?? null;
+	return j.callExpression(j.memberExpression(j.callExpression(j.memberExpression(j.arrayExpression(parts), j.identifier("filter")), [j.identifier("Boolean")]), j.identifier("join")), [j.literal(" ")]);
+}
 /**
 * Generates the verbose className/style merging pattern.
 */
@@ -12942,6 +12956,20 @@ function buildSxOnlyResult(j, styleArgs, options = {}) {
 		styleAttr: null
 	};
 }
+function buildSxWithExternalPropsResult(args) {
+	const { j, styleArgs, classNameId, styleId, allowClassNameProp, allowStyleProp, staticClassNameExpr } = args;
+	return {
+		...buildSxOnlyResult(j, styleArgs, { normalizeOptionalEntries: true }),
+		classNameAttr: buildClassNameAttributeExpr({
+			j,
+			classNameId,
+			allowClassNameProp,
+			staticClassNameExpr
+		}),
+		styleAttr: allowStyleProp ? styleId : null,
+		externalAttrsBeforeSxProp: true
+	};
+}
 function flattenSxArrayArgs(j, styleArgs) {
 	const sxArgs = [];
 	for (const arg of styleArgs) appendSxArrayArg(j, sxArgs, arg);
@@ -13059,7 +13087,7 @@ function isWrappedComponentSxAware(args) {
 	const importInfo = importMap?.get(componentLocalName);
 	if (!importInfo) {
 		const source = readSourceOverride(filePath, sourceOverrides) ?? localSource;
-		return source ? computeDetectionFromSource(source, componentLocalName) : false;
+		return source ? computeDetectionFromSource(source, componentLocalName, filePath, sourceOverrides) : false;
 	}
 	const adapterResult = adapter.wrappedComponentInterface?.({
 		localName: componentLocalName,
@@ -13093,7 +13121,7 @@ function resolveWrappedComponentSource(source, filePath) {
 }
 function detectExportedSxProp(absolutePath, componentName, sourceOverrides) {
 	const sourceOverride = readSourceOverride(absolutePath, sourceOverrides);
-	if (sourceOverride !== void 0) return computeDetectionFromSource(sourceOverride, componentName);
+	if (sourceOverride !== void 0) return computeDetectionFromSource(sourceOverride, componentName, resolveSourcePath(absolutePath) ?? absolutePath, sourceOverrides);
 	const cacheKey = `${absolutePath}\u0000${componentName}`;
 	const cached = detectionCache.get(cacheKey);
 	if (cached !== void 0) return cached;
@@ -13110,21 +13138,33 @@ function computeDetection(absolutePath, componentName) {
 	} catch {
 		return false;
 	}
-	return computeDetectionFromSource(source, componentName);
+	return computeDetectionFromSource(source, componentName, resolved);
 }
-function computeDetectionFromSource(source, componentName) {
-	if (!source.includes(SX_PROP_NAME) || !source.includes(componentName)) return false;
-	let j;
-	let root;
+function computeDetectionFromSource(source, componentName, filePath, sourceOverrides) {
+	if (!source.includes(componentName)) return false;
+	const parsed = parseSource(source);
+	if (!parsed) return false;
+	const { j, root } = parsed;
+	const propsTypeNode = findComponentPropsType(root, componentName);
+	if (!propsTypeNode) return false;
+	return typeMentionsSxMember({
+		j,
+		root,
+		filePath,
+		sourceOverrides,
+		visitedTypeNames: /* @__PURE__ */ new Set()
+	}, propsTypeNode);
+}
+function parseSource(source) {
 	try {
-		j = jscodeshift.withParser("tsx");
-		root = j(source);
+		const j = jscodeshift.withParser("tsx");
+		return {
+			j,
+			root: j(source)
+		};
 	} catch {
-		return false;
+		return null;
 	}
-	const propsTypeNode = findComponentPropsType(root, componentName);
-	if (!propsTypeNode) return false;
-	return typeMentionsSxMember(j, root, propsTypeNode, /* @__PURE__ */ new Set());
 }
 function resolveSourcePath(absolutePath) {
 	for (const candidate of sourcePathCandidates(absolutePath)) if (existsSync(candidate)) return candidate;
@@ -13173,47 +13213,107 @@ function findComponentPropsType(root, componentName) {
 	}
 	return propsType;
 }
-/**
-* Walk a TS type AST node and return true iff any reachable member is
-* named `sx`. Resolves type references against same-file
-* `TSTypeAliasDeclaration` / `TSInterfaceDeclaration` declarations.
-*
-* Opaque utility types like `Omit`/`Pick`/`Partial`/`React.ComponentProps`
-* are skipped (we can't peek inside their structural result), which is fine:
-* the convention places `sx` on a sibling literal in the intersection.
-*/
-function typeMentionsSxMember(j, root, node, visitedTypeNames) {
+function typeMentionsSxMember(ctx, node) {
 	const n = node;
 	switch (n.type) {
 		case "TSTypeLiteral": return literalContainsSxMember(n.members);
 		case "TSIntersectionType":
 		case "TSUnionType":
-			for (const member of n.types ?? []) if (typeMentionsSxMember(j, root, member, visitedTypeNames)) return true;
+			for (const member of n.types ?? []) if (typeMentionsSxMember(ctx, member)) return true;
 			return false;
-		case "TSParenthesizedType": return n.typeAnnotation ? typeMentionsSxMember(j, root, n.typeAnnotation, visitedTypeNames) : false;
+		case "TSParenthesizedType": return n.typeAnnotation ? typeMentionsSxMember(ctx, n.typeAnnotation) : false;
 		case "TSTypeReference": {
 			const typeName = n.typeName?.name;
-			if (!typeName || visitedTypeNames.has(typeName)) return false;
-			visitedTypeNames.add(typeName);
-			const aliased = root.find(j.TSTypeAliasDeclaration).filter((p) => {
-				return p.node.id?.name === typeName;
-			});
-			if (aliased.size() > 0) {
-				const annotation = aliased.get().node.typeAnnotation;
-				if (annotation && typeMentionsSxMember(j, root, annotation, visitedTypeNames)) return true;
-			}
-			const iface = root.find(j.TSInterfaceDeclaration).filter((p) => {
-				return p.node.id?.name === typeName;
-			});
-			if (iface.size() > 0) {
-				const body = iface.get().node.body?.body;
-				if (literalContainsSxMember(body)) return true;
-			}
-			return false;
+			return typeName ? typeReferenceMentionsSx(ctx, typeName, { allowImported: false }) : false;
 		}
 		default: return false;
 	}
 }
+function typeReferenceMentionsSx(ctx, typeName, options) {
+	const visitedKey = `${ctx.filePath ?? "<memory>"}\u0000${typeName}`;
+	if (ctx.visitedTypeNames.has(visitedKey)) return false;
+	ctx.visitedTypeNames.add(visitedKey);
+	const aliased = ctx.root.find(ctx.j.TSTypeAliasDeclaration).filter((p) => {
+		return p.node.id?.name === typeName;
+	});
+	if (aliased.size() > 0) {
+		const annotation = aliased.get().node.typeAnnotation;
+		if (annotation && typeMentionsSxMember(ctx, annotation)) return true;
+	}
+	const iface = ctx.root.find(ctx.j.TSInterfaceDeclaration).filter((p) => {
+		return p.node.id?.name === typeName;
+	});
+	if (iface.size() > 0) {
+		const node = iface.get().node;
+		if (literalContainsSxMember(node.body?.body)) return true;
+		if (interfaceExtendsMentionSx(ctx, node.extends)) return true;
+	}
+	return options.allowImported ? importedTypeReferenceMentionsSx(ctx, typeName) : false;
+}
+function interfaceExtendsMentionSx(ctx, heritage) {
+	if (!Array.isArray(heritage)) return false;
+	for (const item of heritage) {
+		const typeName = getHeritageTypeName(item);
+		if (typeName && typeReferenceMentionsSx(ctx, typeName, { allowImported: true })) return true;
+	}
+	return false;
+}
+function getHeritageTypeName(node) {
+	if (!node || typeof node !== "object") return null;
+	const n = node;
+	if (n.expression?.type === "Identifier") return n.expression.name ?? null;
+	if (n.typeName?.type === "Identifier") return n.typeName.name ?? null;
+	return null;
+}
+function importedTypeReferenceMentionsSx(ctx, localTypeName) {
+	const importInfo = findTypeImport(ctx.root, localTypeName);
+	if (!importInfo || !ctx.filePath) return false;
+	const resolvedPath = moduleResolver.resolve(ctx.filePath, importInfo.source);
+	if (!resolvedPath) return false;
+	const source = readSourceOverride(resolvedPath, ctx.sourceOverrides) ?? readSource(resolvedPath);
+	if (!source) return false;
+	const parsed = parseSource(source);
+	if (!parsed) return false;
+	return typeReferenceMentionsSx({
+		...ctx,
+		j: parsed.j,
+		root: parsed.root,
+		filePath: resolvedPath
+	}, importInfo.importedName, { allowImported: true });
+}
+function findTypeImport(root, localTypeName) {
+	const body = root.get().node.program.body;
+	for (const statement of body) {
+		if (statement.type !== "ImportDeclaration") continue;
+		const source = statement.source.value;
+		if (typeof source !== "string") continue;
+		for (const specifier of statement.specifiers ?? []) {
+			const spec = specifier;
+			if (spec.local?.name !== localTypeName) continue;
+			if (spec.type === "ImportSpecifier") {
+				const importedName = spec.imported?.name ?? (typeof spec.imported?.value === "string" ? spec.imported.value : void 0);
+				return importedName ? {
+					importedName,
+					source
+				} : null;
+			}
+			if (spec.type === "ImportDefaultSpecifier") return {
+				importedName: "default",
+				source
+			};
+		}
+	}
+	return null;
+}
+function readSource(absolutePath) {
+	const resolved = resolveSourcePath(absolutePath);
+	if (!resolved) return null;
+	try {
+		return readFileSync(resolved, "utf8");
+	} catch {
+		return null;
+	}
+}
 function literalContainsSxMember(members) {
 	if (!Array.isArray(members)) return false;
 	for (const member of members) {
@@ -13224,6 +13324,229 @@ function literalContainsSxMember(members) {
 	return false;
 }
 //#endregion
+//#region src/internal/lower-rules/variants.ts
+function parseVariantCondition(when) {
+	const trimmed = when.trim();
+	if (trimmed.includes("&&")) 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 {
+			type: "boolean",
+			propName: inner,
+			negated: true
+		};
+		return { type: "unknown" };
+	}
+	const eqMatch = trimmed.match(/^([a-zA-Z_$][a-zA-Z0-9_$]*)\s*(===|!==)\s*"([^"]*)"$/);
+	if (eqMatch && eqMatch[1] && eqMatch[2] && eqMatch[3] !== void 0) {
+		const value = eqMatch[3];
+		return {
+			type: "equality",
+			propName: eqMatch[1],
+			operator: eqMatch[2],
+			value,
+			staticValue: value
+		};
+	}
+	const numberMatch = trimmed.match(/^([a-zA-Z_$][a-zA-Z0-9_$]*)\s*(===|!==)\s*(-?(?:0|[1-9]\d*)(?:\.\d+)?)$/);
+	if (numberMatch && numberMatch[1] && numberMatch[2] && numberMatch[3] !== void 0) {
+		const value = Number(numberMatch[3]);
+		if (Number.isFinite(value) && String(value) === numberMatch[3]) return {
+			type: "equality",
+			propName: numberMatch[1],
+			operator: numberMatch[2],
+			value: numberMatch[3],
+			staticValue: value
+		};
+	}
+	if (/^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(trimmed)) return {
+		type: "boolean",
+		propName: trimmed,
+		negated: false
+	};
+	return { type: "unknown" };
+}
+/**
+* Extract string literal values from a TypeScript union type.
+* Returns an array of literal values, or null if the type doesn't contain string literals.
+*/
+function extractUnionLiteralValues(tsType) {
+	if (!tsType || typeof tsType !== "object") return null;
+	const type = tsType;
+	if (type.type === "TSUnionType" && Array.isArray(type.types)) {
+		const values = [];
+		for (const t of type.types) {
+			const inner = t;
+			if (inner.type === "TSLiteralType" && typeof inner.literal?.value === "string") values.push(inner.literal.value);
+		}
+		return values.length > 0 ? values : null;
+	}
+	if (type.type === "TSLiteralType" && typeof type.literal?.value === "string") return [type.literal.value];
+	return null;
+}
+function hasFiniteNumericVariantKey(dimension) {
+	return Object.keys(dimension.variants).some((key) => {
+		if (key === "") return false;
+		const value = Number(key);
+		return Number.isFinite(value) && String(value) === key;
+	});
+}
+/**
+* Groups variant buckets into dimensions for the StyleX variants recipe pattern.
+*
+* A dimension is created when:
+* - Multiple conditions test the same prop with `===` against different string values
+* - OR a single `===` condition exists (the else branch becomes a default variant)
+*
+* 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) => {
+		if (propName === "variant") return suffix ? `${suffix.toLowerCase()}Variants` : "variants";
+		return suffix ? `${propName}${suffix}Variants` : `${propName}Variants`;
+	};
+	const propGroups = /* @__PURE__ */ new Map();
+	const remainingBuckets = /* @__PURE__ */ new Map();
+	const remainingStyleKeys = {};
+	const propsToStrip = /* @__PURE__ */ new Set();
+	for (const [when, styles] of variantBuckets.entries()) {
+		const parsed = parseVariantCondition(when);
+		if (parsed.type === "equality" && parsed.operator === "===") {
+			const existing = propGroups.get(parsed.propName) ?? [];
+			existing.push({
+				when,
+				value: parsed.value,
+				styles
+			});
+			propGroups.set(parsed.propName, existing);
+		} else {
+			remainingBuckets.set(when, styles);
+			if (variantStyleKeys[when]) remainingStyleKeys[when] = variantStyleKeys[when];
+		}
+	}
+	const dimensions = [];
+	const booleanBuckets = /* @__PURE__ */ new Map();
+	for (const [when, styles] of variantBuckets.entries()) {
+		const parsed = parseVariantCondition(when);
+		if (parsed.type === "boolean" && !parsed.negated) booleanBuckets.set(parsed.propName, {
+			cssProps: new Set(Object.keys(styles)),
+			styles
+		});
+	}
+	let isVariantsRecipePattern = false;
+	for (const [, variants] of propGroups.entries()) {
+		const variantCssProps = new Set(variants.flatMap((v) => Object.keys(v.styles)));
+		for (const [, boolData] of booleanBuckets) {
+			for (const cssProp of variantCssProps) if (boolData.cssProps.has(cssProp)) {
+				isVariantsRecipePattern = true;
+				break;
+			}
+			if (isVariantsRecipePattern) break;
+		}
+		if (isVariantsRecipePattern) break;
+	}
+	for (const [propName, variants] of propGroups.entries()) {
+		const propType = findJsxPropTsType?.(propName);
+		const unionValues = extractUnionLiteralValues(propType);
+		const firstVariant = variants[0];
+		if (variants.length === 1 && firstVariant) {
+			const explicitValue = firstVariant.value;
+			if (isVariantsRecipePattern && unionValues && unionValues.length === 2 && unionValues.includes(explicitValue)) {} else {
+				for (const v of variants) {
+					remainingBuckets.set(v.when, v.styles);
+					const styleKey = variantStyleKeys[v.when];
+					if (styleKey) remainingStyleKeys[v.when] = styleKey;
+				}
+				continue;
+			}
+		}
+		const variantMap = {};
+		const allOverriddenProps = /* @__PURE__ */ new Set();
+		for (const v of variants) {
+			variantMap[v.value] = v.styles;
+			for (const cssProp of Object.keys(v.styles)) allOverriddenProps.add(cssProp);
+		}
+		const defaultStyles = {};
+		for (const cssProp of allOverriddenProps) if (cssProp in baseStyles) defaultStyles[cssProp] = baseStyles[cssProp];
+		let defaultValue;
+		const propIsOptional = isJsxPropOptional?.(propName) ?? false;
+		if (Object.keys(defaultStyles).length > 0 && unionValues) {
+			const explicitValues = new Set(variants.map((v) => v.value));
+			const remainingValues = unionValues.map(String).filter((v) => !explicitValues.has(v));
+			if (remainingValues.length === 1 && remainingValues[0]) {
+				defaultValue = remainingValues[0];
+				variantMap[defaultValue] = defaultStyles;
+			} else {
+				defaultValue = "default";
+				variantMap["default"] = defaultStyles;
+			}
+		}
+		const firstVariantForProps = variants[0];
+		if (!firstVariantForProps) continue;
+		const variantCssProps = new Set(Object.keys(firstVariantForProps.styles));
+		let overlappingBoolProp;
+		let overlappingBoolStyles;
+		for (const [boolProp, boolData] of booleanBuckets) {
+			for (const cssProp of variantCssProps) if (boolData.cssProps.has(cssProp)) {
+				overlappingBoolProp = boolProp;
+				overlappingBoolStyles = boolData.styles;
+				break;
+			}
+			if (overlappingBoolProp) break;
+		}
+		if (overlappingBoolProp && overlappingBoolStyles) {
+			dimensions.push({
+				propName,
+				variantObjectName: getVariantObjectName(propName, "Enabled"),
+				variants: variantMap,
+				defaultValue,
+				namespaceBooleanProp: overlappingBoolProp,
+				isDisabledNamespace: false,
+				isOptional: propIsOptional
+			});
+			const disabledVariantMap = {};
+			for (const [variantValue, variantStyles] of Object.entries(variantMap)) {
+				const merged = { ...variantStyles };
+				for (const [cssProp, boolValue] of Object.entries(overlappingBoolStyles)) {
+					const variantValue2 = merged[cssProp];
+					if (typeof variantValue2 === "object" && variantValue2 !== null && typeof boolValue === "string") merged[cssProp] = {
+						...variantValue2,
+						default: boolValue
+					};
+					else merged[cssProp] = boolValue;
+				}
+				for (const [cssProp, boolValue] of Object.entries(overlappingBoolStyles)) if (!(cssProp in merged)) merged[cssProp] = boolValue;
+				disabledVariantMap[variantValue] = merged;
+			}
+			dimensions.push({
+				propName,
+				variantObjectName: getVariantObjectName(propName, "Disabled"),
+				variants: disabledVariantMap,
+				defaultValue,
+				namespaceBooleanProp: overlappingBoolProp,
+				isDisabledNamespace: true,
+				isOptional: propIsOptional
+			});
+			remainingBuckets.delete(overlappingBoolProp);
+			delete remainingStyleKeys[overlappingBoolProp];
+			for (const cssProp of variantCssProps) propsToStrip.add(cssProp);
+		} else dimensions.push({
+			propName,
+			variantObjectName: getVariantObjectName(propName),
+			variants: variantMap,
+			defaultValue,
+			isOptional: propIsOptional
+		});
+	}
+	return {
+		dimensions,
+		remainingBuckets,
+		remainingStyleKeys,
+		propsToStrip
+	};
+}
+//#endregion
 //#region src/internal/emit-wrappers/type-helpers.ts
 /**
 * Sorts variant style entries by condition specificity.
@@ -13308,7 +13631,7 @@ function buildStaticVariantPropTypes(d) {
 * all others get `keyof typeof <variantObjectName>`.
 */
 function buildVariantDimPropTypeMap(d) {
-	return new Map((d.variantDimensions ?? []).filter((dim) => dim.propTypeFromKeyof).map((dim) => {
+	return new Map((d.variantDimensions ?? []).filter((dim) => dim.propTypeFromKeyof || !dim.fallbackFnKey && hasFiniteNumericVariantKey(dim)).map((dim) => {
 		const typeText = dim.isBooleanProp ? "boolean" : `keyof typeof ${dim.variantObjectName}`;
 		return [dim.propName, typeText];
 	}));
@@ -13469,6 +13792,12 @@ function buildAttrsFromAttrsInfo(j, args) {
 	];
 }
 function appendMergingAttrs(j, attrs, merging) {
+	if (merging.externalAttrsBeforeSxProp && merging.sxPropExpr) {
+		if (merging.classNameAttr) attrs.push(j.jsxAttribute(j.jsxIdentifier("className"), j.jsxExpressionContainer(merging.classNameAttr)));
+		if (merging.styleAttr) attrs.push(j.jsxAttribute(j.jsxIdentifier("style"), j.jsxExpressionContainer(merging.styleAttr)));
+		attrs.push(j.jsxAttribute(j.jsxIdentifier("sx"), j.jsxExpressionContainer(merging.sxPropExpr)));
+		return;
+	}
 	if (merging.classNameBeforeSpread && merging.classNameAttr) attrs.push(j.jsxAttribute(j.jsxIdentifier("className"), j.jsxExpressionContainer(merging.classNameAttr)));
 	if (merging.sxPropExpr) attrs.push(j.jsxAttribute(j.jsxIdentifier("sx"), j.jsxExpressionContainer(merging.sxPropExpr)));
 	else if (merging.jsxSpreadExpr) attrs.push(j.jsxSpreadAttribute(merging.jsxSpreadExpr));
@@ -13783,6 +14112,13 @@ function buildVariantDimensionLookups(j, args) {
 		});
 		else styleArgs.push(expr);
 	};
+	const buildFallbackExpr = (dim, propId) => {
+		const castProp = buildKeyofTypeofCast(j, propId, dim.variantObjectName);
+		const lookup = j.memberExpression(j.identifier(dim.variantObjectName), castProp, true);
+		if (!dim.fallbackFnKey) return lookup;
+		const fallbackCall = j.callExpression(styleRef(j, args.stylesIdentifier, dim.fallbackFnKey), [propId]);
+		return j.logicalExpression("??", lookup, fallbackCall);
+	};
 	const namespacePairs = /* @__PURE__ */ new Map();
 	const regularDimensions = [];
 	for (const dim of dimensions) if (dim.namespaceBooleanProp) {
@@ -13808,7 +14144,7 @@ function buildVariantDimensionLookups(j, args) {
 			pushExpr(j.logicalExpression("??", lookup, defaultAccess), dim);
 		} else {
 			if (dim.defaultValue && dim.isOptional && propDefaults) propDefaults.set(dim.propName, dim.defaultValue);
-			const lookup = j.memberExpression(variantsId, propId, true);
+			const lookup = dim.fallbackFnKey ? buildFallbackExpr(dim, propId) : j.memberExpression(variantsId, propId, true);
 			if (dim.isOptional && !dim.defaultValue) {
 				const guard = j.binaryExpression("!=", j.identifier(dim.propName), j.literal(null));
 				pushExpr(j.logicalExpression("&&", guard, lookup), dim);
@@ -14218,6 +14554,7 @@ var WrapperEmitter = class {
 	jsxCallsitesCache = /* @__PURE__ */ new Map();
 	jsxChildrenUsageCache = /* @__PURE__ */ new Map();
 	usedAsValueCache = /* @__PURE__ */ new Map();
+	aliasedJsxSpreadUsageCache = /* @__PURE__ */ new Map();
 	forwardedAsUsageCache = /* @__PURE__ */ new Map();
 	constructor(args) {
 		this.root = args.root;
@@ -14357,20 +14694,51 @@ var WrapperEmitter = class {
 		this.usedAsValueCache.set(localName, inJsxExpr);
 		return inJsxExpr;
 	}
+	isUsedAsValue(d) {
+		return Boolean(d.usedAsValue) || this.isUsedAsValueInFile(d.localName);
+	}
+	requiresRestForValueUsage(d) {
+		return this.isUsedAsValueInFile(d.localName) || this.hasAliasedJsxSpreadUsage(d.localName);
+	}
+	hasAliasedJsxSpreadUsage(localName) {
+		const cached = this.aliasedJsxSpreadUsageCache.get(localName);
+		if (cached !== void 0) return cached;
+		const { root, j } = this;
+		const aliasNames = new Set([localName]);
+		let changed = true;
+		while (changed) {
+			changed = false;
+			root.find(j.VariableDeclarator).forEach((p) => {
+				const { id, init } = p.node;
+				if (id.type !== "Identifier" || aliasNames.has(id.name) || !init) return;
+				if (expressionReferencesComponentAlias(init, aliasNames)) {
+					aliasNames.add(id.name);
+					changed = true;
+				}
+			});
+		}
+		aliasNames.delete(localName);
+		const hasSpread = aliasNames.size > 0 && [...aliasNames].some((aliasName) => root.find(j.JSXElement, { openingElement: { name: {
+			type: "JSXIdentifier",
+			name: aliasName
+		} } }).filter((p) => (p.node.openingElement.attributes ?? []).some((attr) => attr.type === "JSXSpreadAttribute")).size() > 0);
+		this.aliasedJsxSpreadUsageCache.set(localName, hasSpread);
+		return hasSpread;
+	}
 	/**
 	* Decide whether a wrapper component should accept/merge external `className`/`style`.
 	*/
 	shouldAllowClassNameProp(d) {
 		if (d.consumerUsesClassName ?? d.supportsExternalStyles) return true;
 		if (d.consumerUsesSpread) return true;
-		if (d.usedAsValue) return true;
+		if (this.isUsedAsValue(d)) return true;
 		const used = this.getUsedAttrs(d.localName);
 		return used.has("*") || used.has("className");
 	}
 	shouldAllowStyleProp(d) {
 		if (d.consumerUsesStyle ?? d.supportsExternalStyles) return true;
 		if (d.consumerUsesSpread) return true;
-		if (d.usedAsValue) return true;
+		if (this.isUsedAsValue(d)) return true;
 		const used = this.getUsedAttrs(d.localName);
 		return used.has("*") || used.has("style");
 	}
@@ -14858,7 +15226,7 @@ var WrapperEmitter = class {
 	inferredIntrinsicPropsTypeText(args) {
 		const { d, tagName, allowClassNameProp, allowStyleProp, allowSxProp, skipProps, includeRef, forceNarrow } = args;
 		const used = this.getUsedAttrs(d.localName);
-		const needsBroadAttrs = used.has("*") || !!d.usedAsValue;
+		const needsBroadAttrs = used.has("*") || this.isUsedAsValue(d);
 		const lines = [];
 		const pickedAttrKeys = [];
 		if (!needsBroadAttrs) {
@@ -14898,28 +15266,24 @@ var WrapperEmitter = class {
 		}
 		const literal = lines.length > 1 ? `{\n  ${lines.join(",\n  ")}\n}` : lines.length === 1 ? `{ ${lines[0]} }` : "{}";
 		const intrinsicBase = `React.ComponentProps<"${tagName}">`;
+		const intrinsicBaseOmitted = [];
+		if (!allowClassNameProp) intrinsicBaseOmitted.push("\"className\"");
+		if (!allowStyleProp) intrinsicBaseOmitted.push("\"style\"");
+		const intrinsicBaseMaybeOmitted = intrinsicBaseOmitted.length ? `Omit<${intrinsicBase}, ${intrinsicBaseOmitted.join(" | ")}>` : intrinsicBase;
 		const pickExpr = pickedAttrKeys.length > 0 ? `Pick<${intrinsicBase}, ${pickedAttrKeys.map((k) => `"${k}"`).join(" | ")}>` : void 0;
 		if (!needsBroadAttrs) {
 			const narrowResult = this.joinIntersection(literal, pickExpr);
 			if (forceNarrow) {
-				if (hasElementSpecificPicks) return intrinsicBase;
+				if (hasElementSpecificPicks) return intrinsicBaseMaybeOmitted;
 				return narrowResult;
 			}
 			if (VOID_TAGS.has(tagName)) {
-				const omittedVoid = [];
-				if (!allowClassNameProp) omittedVoid.push("\"className\"");
-				if (!allowStyleProp) omittedVoid.push("\"style\"");
-				const baseType = omittedVoid.length ? `Omit<${intrinsicBase}, ${omittedVoid.join(" | ")}>` : intrinsicBase;
-				if (allowSxProp) return this.joinIntersection(baseType, `{ ${SX_PROP_TYPE_TEXT} }`);
-				return baseType;
+				if (allowSxProp) return this.joinIntersection(intrinsicBaseMaybeOmitted, `{ ${SX_PROP_TYPE_TEXT} }`);
+				return intrinsicBaseMaybeOmitted;
 			}
 			return narrowResult;
 		}
-		const omitted = [];
-		if (!allowClassNameProp) omitted.push("\"className\"");
-		if (!allowStyleProp) omitted.push("\"style\"");
-		const baseMaybeOmitted = omitted.length ? `Omit<${intrinsicBase}, ${omitted.join(" | ")}>` : intrinsicBase;
-		const composed = this.joinIntersection(literal, baseMaybeOmitted);
+		const composed = this.joinIntersection(literal, intrinsicBaseMaybeOmitted);
 		return VOID_TAGS.has(tagName) ? composed : this.withChildren(composed);
 	}
 	/**
@@ -15077,7 +15441,7 @@ var WrapperEmitter = class {
 		const isVoidTag = VOID_TAGS.has(tagName);
 		const allowForwardedAsProp = this.getUsedAttrs(localName).has("forwardedAs");
 		const propsParamId = j.identifier("props");
-		const needsPolymorphicTypeParams = this.emitTypes && (allowAsProp || Boolean(inlineTypeText?.includes("<C")));
+		const needsPolymorphicTypeParams = this.emitTypes && (allowAsProp || inlineTypeNeedsElementGeneric(inlineTypeText));
 		if (this.emitTypes) if (inlineTypeText) {
 			let typeNode = null;
 			try {
@@ -15241,7 +15605,10 @@ var WrapperEmitter = class {
 		return splitAttrsInfo(this.j, attrsInfo, bridgeClassVar, extraClassNames);
 	}
 	buildVariantDimensionLookups(args) {
-		buildVariantDimensionLookups(this.j, args);
+		buildVariantDimensionLookups(this.j, {
+			...args,
+			stylesIdentifier: this.stylesIdentifier
+		});
 	}
 	buildStyleFnExpressions(args) {
 		buildStyleFnExpressions(this, args);
@@ -15255,6 +15622,20 @@ const UNIVERSAL_PROP_TYPES = {
 	className: "className?: string",
 	style: "style?: React.CSSProperties"
 };
+function inlineTypeNeedsElementGeneric(typeText) {
+	if (!typeText) return false;
+	return /\bReact\.ComponentProps(?:WithRef)?<C\b/.test(typeText) || /\bas\??:\s*C\b/.test(typeText);
+}
+function expressionReferencesComponentAlias(node, aliasNames, seen = /* @__PURE__ */ new WeakSet()) {
+	if (!node || typeof node !== "object") return false;
+	if (seen.has(node)) return false;
+	seen.add(node);
+	const maybeNode = node;
+	if (maybeNode.type === "Identifier") return Boolean(maybeNode.name && aliasNames.has(maybeNode.name));
+	if (maybeNode.type === "ConditionalExpression" || maybeNode.type === "LogicalExpression" || maybeNode.type === "SequenceExpression") return Object.values(node).some((child) => expressionReferencesComponentAlias(child, aliasNames, seen));
+	if (maybeNode.type === "TSAsExpression" || maybeNode.type === "TSTypeAssertion" || maybeNode.type === "TSNonNullExpression" || maybeNode.type === "ParenthesizedExpression") return expressionReferencesComponentAlias(node.expression, aliasNames, seen);
+	return false;
+}
 /**
 * If `typeText` is a simple `{ prop?: type; … }` object literal, returns the
 * individual member strings.  Returns `null` for any other shape (Pick, Omit,
@@ -15722,7 +16103,7 @@ function emitComponentWrappers(emitter) {
 		} else jsxTagName = j.jsxIdentifier(renderedComponent);
 		const { attrsInfo, staticClassNameExpr } = emitter.splitAttrsInfo(d.attrsInfo, getBridgeClassVar(d), d.extraClassNames);
 		const defaultAttrs = attrsInfo?.defaultAttrs ?? [];
-		const staticAttrs = attrsInfo?.staticAttrs ?? {};
+		const staticAttrs = normalizeStaticForwardedAsAttr(attrsInfo?.staticAttrs ?? {}, shouldLowerForwardedAs);
 		const needsSxVar = allowClassNameProp || allowStyleProp || wrappedAcceptsSx || !!d.inlineStyleProps?.length || !!staticClassNameExpr;
 		const needsDestructure = destructureProps.length > 0 || needsSxVar || isPolymorphicComponentWrapper || defaultAttrs.length > 0 || shouldLowerForwardedAs || (d.supportsRefProp ?? false);
 		const includeChildren = !isPolymorphicComponentWrapper && emitter.hasJsxChildrenUsage(d.localName);
@@ -15777,11 +16158,12 @@ function emitComponentWrappers(emitter) {
 			if (needsUseTheme) stmts.push(buildUseThemeDeclaration(j, emitter.themeHookLocalName));
 			if (merging.sxDecl) stmts.push(merging.sxDecl);
 			const openingAttrs = [];
-			const hasStaticForwardedAsFallback = shouldLowerForwardedAs && Object.hasOwn(staticAttrs, "as");
-			const staticForwardedAsFallback = hasStaticForwardedAsFallback ? staticAttrs.as : void 0;
+			const staticForwardedAsFallbackKey = shouldLowerForwardedAs && Object.hasOwn(staticAttrs, "as") ? "as" : shouldLowerForwardedAs && Object.hasOwn(staticAttrs, "forwardedAs") ? "forwardedAs" : null;
+			const hasStaticForwardedAsFallback = staticForwardedAsFallbackKey !== null;
+			const staticForwardedAsFallback = hasStaticForwardedAsFallback ? staticAttrs[staticForwardedAsFallbackKey] : void 0;
 			const staticAttrsWithoutForwardedAsFallback = (() => {
 				if (!hasStaticForwardedAsFallback) return staticAttrs;
-				const { as: _omitAs, ...restStaticAttrs } = staticAttrs;
+				const { [staticForwardedAsFallbackKey]: _omitAs, ...restStaticAttrs } = staticAttrs;
 				return restStaticAttrs;
 			})();
 			openingAttrs.push(...emitter.buildDefaultAttrsFromProps({
@@ -15878,6 +16260,15 @@ function emitComponentWrappers(emitter) {
 function shouldKeepStylePropSeparate(componentName) {
 	return componentName.startsWith("motion.") || componentName.startsWith("animated.");
 }
+function normalizeStaticForwardedAsAttr(staticAttrs, shouldLowerForwardedAs) {
+	if (shouldLowerForwardedAs || !Object.hasOwn(staticAttrs, "forwardedAs")) return staticAttrs;
+	const { forwardedAs, ...restStaticAttrs } = staticAttrs;
+	if (Object.hasOwn(restStaticAttrs, "as")) return restStaticAttrs;
+	return {
+		...restStaticAttrs,
+		as: forwardedAs
+	};
+}
 function resolveRenderedAsProp(args) {
 	const { emitter, fallbackTypeName, propsType } = args;
 	if (!propsType) return null;
@@ -16900,7 +17291,7 @@ function emitShouldForwardPropWrappers(ctx) {
 		const forwardedAsId = j.identifier("forwardedAs");
 		const { hasAny: hasLocalUsage } = emitter.getJsxCallsites(d.localName);
 		const shouldIncludeRest = shouldIncludeRestForProps({
-			usedAsValue: emitter.isUsedAsValueInFile(d.localName),
+			usedAsValue: emitter.requiresRestForValueUsage(d),
 			hasLocalUsage,
 			usedAttrs,
 			destructureProps: destructureParts,
@@ -17079,6 +17470,8 @@ function emitSimpleWithConfigWrappers(ctx) {
 			}) : "{}";
 			const typeWithChildren = !explicit && !VOID_TAGS.has(tagName) && !shouldUseIntrinsicProps ? emitter.withChildren(baseTypeText) : baseTypeText;
 			const needsElementProps = hasElementPropsInDefaultAttrs(d);
+			const variantDimByProp = buildVariantDimPropTypeMap(d);
+			const variantPropOverrideTypeText = explicit && variantDimByProp.size > 0 ? `{\n${[...variantDimByProp.entries()].map(([propName, typeText]) => `  ${propName}?: ${typeText};`).join("\n")}\n}` : void 0;
 			const typeText = (() => {
 				if (explicit) {
 					if (needsElementProps) {
@@ -17091,9 +17484,9 @@ function emitSimpleWithConfigWrappers(ctx) {
 							includeRef: willForwardRef
 						});
 						ctx.markNeedsReactTypeImport();
-						return emitter.joinIntersection(explicit, intrinsicBaseType);
+						return emitter.joinIntersection(explicit, variantPropOverrideTypeText, intrinsicBaseType);
 					}
-					return explicit;
+					return emitter.joinIntersection(explicit, variantPropOverrideTypeText);
 				}
 				return typeWithChildren;
 			})();
@@ -17328,9 +17721,9 @@ function emitSimpleExportedIntrinsicWrappers(ctx) {
 				for (const sbv of d.staticBooleanVariants ?? []) keys.add(sbv.propName);
 				const compoundVariantWhenKeys = collectCompoundVariantKeys(d.compoundVariants, { syntheticOnly: true });
 				for (const k of compoundVariantWhenKeys) keys.delete(k);
-				const filtered = [...keys].filter((k) => k && isValidIdentifierName(k) && k !== "children" && k !== "className" && k !== "style" && k !== "as" && k !== "forwardedAs" && !explicitPropNames.has(k));
-				if (filtered.length === 0) return "{}";
 				const variantDimByProp = buildVariantDimPropTypeMap(d);
+				const filtered = [...keys].filter((k) => k && isValidIdentifierName(k) && k !== "children" && k !== "className" && k !== "style" && k !== "as" && k !== "forwardedAs" && (!explicitPropNames.has(k) || variantDimByProp.has(k)));
+				if (filtered.length === 0) return "{}";
 				const staticVariantPropTypes = buildStaticVariantPropTypes(d);
 				return `{\n${filtered.map((k) => {
 					const variantType = variantDimByProp.get(k);
@@ -17341,6 +17734,17 @@ function emitSimpleExportedIntrinsicWrappers(ctx) {
 				}).join("\n")}\n}`;
 			})();
 			const sxTypeIntersection = allowSxProp ? `{ ${SX_PROP_TYPE_TEXT} }` : void 0;
+			const explicitBaseText = explicit ? maybeOmitExternalStylePropsFromExplicitTypeText({
+				ctx,
+				propsType: d.propsType,
+				typeText: explicit,
+				allowClassNameProp,
+				allowStyleProp
+			}) : void 0;
+			const explicitTypeIncludesIntrinsicProps = !!d.propsType && explicitTypeMayContainExternalStyleProps({
+				ctx,
+				propsType: d.propsType
+			});
 			const typeTextWithForwardedAs = withForwardedAsType((() => {
 				if (!explicit) {
 					if (useSlimType) {
@@ -17351,16 +17755,16 @@ function emitSimpleExportedIntrinsicWrappers(ctx) {
 					return customStyleDrivingPropsTypeText !== "{}" ? emitter.joinIntersection(baseTypeText, customStyleDrivingPropsTypeText) : baseTypeText;
 				}
 				if (useSlimType) {
-					const combined = emitter.joinIntersection(explicit, customStyleDrivingPropsTypeText, baseTypeText, sxTypeIntersection);
+					const combined = emitter.joinIntersection(explicitBaseText, customStyleDrivingPropsTypeText, needsRestForType || explicitTypeIncludesIntrinsicProps ? extendBaseTypeText : baseTypeText, sxTypeIntersection);
 					return VOID_TAGS.has(tagName) ? combined : emitter.withChildren(combined);
 				}
-				if (VOID_TAGS.has(tagName)) return emitter.joinIntersection(explicit, customStyleDrivingPropsTypeText, extendBaseTypeText, sxTypeIntersection);
+				if (VOID_TAGS.has(tagName)) return emitter.joinIntersection(explicitBaseText, customStyleDrivingPropsTypeText, extendBaseTypeText, sxTypeIntersection);
 				if (needsRestForType) {
 					if (!supportsExternalStyles && canUseSimplePropsType({
 						isExported: d.isExported ?? false,
 						usedAttrs: usedAttrsForType
 					})) return emitter.withChildren(explicit);
-					return emitter.joinIntersection(explicit, customStyleDrivingPropsTypeText, extendBaseTypeText, sxTypeIntersection);
+					return emitter.joinIntersection(explicitBaseText, customStyleDrivingPropsTypeText, extendBaseTypeText, sxTypeIntersection);
 				}
 				if (allowClassNameProp || allowStyleProp) {
 					const extras = [];
@@ -17368,9 +17772,9 @@ function emitSimpleExportedIntrinsicWrappers(ctx) {
 					if (allowStyleProp) extras.push("style?: React.CSSProperties");
 					if (allowSxProp) extras.push(SX_PROP_TYPE_TEXT);
 					extras.push("children?: React.ReactNode");
-					return emitter.joinIntersection(explicit, `{ ${extras.join("; ")} }`);
+					return emitter.joinIntersection(explicitBaseText, `{ ${extras.join("; ")} }`);
 				}
-				return emitter.withChildren(explicit);
+				return emitter.withChildren(explicitBaseText ?? explicit);
 			})(), includesForwardedAs);
 			const hasNoCustomProps = !explicit && customStyleDrivingPropsTypeText === "{}";
 			const explicitIsExistingTypeRef = !!emitter.getExplicitTypeNameIfExists(d.propsType);
@@ -17414,7 +17818,7 @@ function emitSimpleExportedIntrinsicWrappers(ctx) {
 			}).typeExprText;
 			else inlineTypeText = `${emitter.propsTypeNameFor(d.localName)}<C>`;
 			else if (explicitIsExistingTypeRef && explicit) if (useSlimType) inlineTypeText = typeTextWithForwardedAs;
-			else inlineTypeText = withForwardedAsType(withSimpleAsPropType(emitter.joinIntersection(explicit, extendBaseTypeText, sxTypeIntersection), allowAsProp), includesForwardedAs);
+			else inlineTypeText = withForwardedAsType(withSimpleAsPropType(emitter.joinIntersection(explicitBaseText, extendBaseTypeText, sxTypeIntersection), allowAsProp), includesForwardedAs);
 			else inlineTypeText = withSimpleAsPropType(typeTextWithForwardedAs, allowAsProp);
 		}
 		const destructureProps = [];
@@ -17469,7 +17873,7 @@ function emitSimpleExportedIntrinsicWrappers(ctx) {
 			return !destructureProps.includes(n);
 		});
 		let shouldIncludeRest = shouldIncludeRestForProps({
-			usedAsValue: emitter.isUsedAsValueInFile(d.localName),
+			usedAsValue: emitter.requiresRestForValueUsage(d),
 			hasLocalUsage,
 			usedAttrs,
 			destructureProps,
@@ -17629,6 +18033,53 @@ function hasComplementaryVariantPairs(d) {
 	for (let i = 0; i < keys.length; i++) for (let k = i + 1; k < keys.length; k++) if (getPositiveWhen(keys[i], keys[k]) !== null) return true;
 	return false;
 }
+function maybeOmitExternalStylePropsFromExplicitTypeText(args) {
+	if (!explicitTypeMayContainExternalStyleProps({
+		ctx: args.ctx,
+		propsType: args.propsType
+	})) return args.typeText;
+	const omitted = [];
+	if (!args.allowClassNameProp) omitted.push("\"className\"");
+	if (!args.allowStyleProp) omitted.push("\"style\"");
+	return omitted.length > 0 ? `Omit<${args.typeText}, ${omitted.join(" | ")}>` : args.typeText;
+}
+function explicitTypeMayContainExternalStyleProps(args) {
+	const visit = (node, seen) => {
+		if (!node || typeof node !== "object") return false;
+		const typed = node;
+		if (typed.type === "TSIntersectionType" || typed.type === "TSUnionType") return (typed.types ?? []).some((member) => visit(member, seen));
+		if (typed.type === "TSParenthesizedType") return visit(typed.typeAnnotation, seen);
+		if (typed.type !== "TSTypeReference") return false;
+		if (isReactPropsUtilityType(typed.typeName)) return true;
+		const typeName = getIdentifierTypeName(typed.typeName);
+		if (!typeName || seen.has(typeName)) return false;
+		seen.add(typeName);
+		const typeAlias = args.ctx.emitter.root.find(args.ctx.j.TSTypeAliasDeclaration).filter((path) => path.node.id.name === typeName);
+		if (typeAlias.size() > 0) return visit(typeAlias.get().node.typeAnnotation, seen);
+		const iface = args.ctx.emitter.root.find(args.ctx.j.TSInterfaceDeclaration).filter((path) => path.node.id.name === typeName);
+		if (iface.size() === 0) return false;
+		return (iface.get().node.extends ?? []).some((extended) => visit(extended, seen));
+	};
+	return visit(args.propsType, /* @__PURE__ */ new Set());
+}
+function isReactPropsUtilityType(typeName) {
+	const name = getTypeNameText(typeName);
+	return name === "React.ComponentProps" || name === "React.ComponentPropsWithRef" || name === "React.HTMLAttributes" || name === "ComponentProps" || name === "ComponentPropsWithRef" || name === "HTMLAttributes";
+}
+function getIdentifierTypeName(typeName) {
+	return typeof typeName === "object" && typeName !== null && typeName.type === "Identifier" ? typeName.name ?? null : null;
+}
+function getTypeNameText(typeName) {
+	if (!typeName || typeof typeName !== "object") return null;
+	const node = typeName;
+	if (node.type === "Identifier") return node.name ?? null;
+	if (node.type === "TSQualifiedName") {
+		const left = getTypeNameText(node.left);
+		const right = getTypeNameText(node.right);
+		return left && right ? `${left}.${right}` : null;
+	}
+	return null;
+}
 function collectPropsUsedOutsideExtraStyleConditionals(j, d) {
 	const used = /* @__PURE__ */ new Set();
 	const add = (name) => {
@@ -19051,19 +19502,40 @@ function tryResolveConditionalValue(node, ctx) {
 			return null;
 		}
 		const themeInfo = resolveThemeFromMemberExpr(b);
-		if (!themeInfo) return null;
-		const res = ctx.resolveValue({
-			kind: "theme",
-			path: themeInfo.path,
-			filePath: ctx.filePath,
-			loc: getNodeLocStart(b) ?? void 0
-		});
-		if (!res) return null;
-		return {
-			usage: expectedUsage,
-			expr: res.expr,
-			imports: res.imports
-		};
+		if (themeInfo) {
+			const res = ctx.resolveValue({
+				kind: "theme",
+				path: themeInfo.path,
+				filePath: ctx.filePath,
+				loc: getNodeLocStart(b) ?? void 0
+			});
+			if (!res) return null;
+			return {
+				usage: expectedUsage,
+				expr: res.expr,
+				imports: res.imports
+			};
+		}
+		const importedInfo = extractRootAndPath(b);
+		if (importedInfo) {
+			const imp = ctx.resolveImport(importedInfo.rootName, importedInfo.rootNode);
+			if (imp) {
+				const res = ctx.resolveValue({
+					kind: "importedValue",
+					importedName: imp.importedName,
+					source: imp.source,
+					path: importedInfo.path.length > 0 ? importedInfo.path.join(".") : void 0,
+					filePath: ctx.filePath,
+					loc: getNodeLocStart(b) ?? void 0
+				});
+				if (res) return {
+					usage: expectedUsage,
+					expr: res.expr,
+					imports: res.imports
+				};
+			}
+		}
+		return null;
 	};
 	const getBranch = (value) => {
 		return branchToExpr(value);
@@ -19911,7 +20383,7 @@ function replaceThemeRefsWithHookVar(expr, paramName, info) {
 * Order matters: more-specific transforms first, then fall back to prop-access emission.
 */
 function resolveDynamicNode(node, ctx) {
-	return tryResolveThemeAccess(node, ctx) ?? tryResolveCallExpression(node, ctx) ?? tryResolveArrowFnHelperCallWithThemeArg(node, ctx) ?? tryResolveArrowFnPreservedRuntimeCall(node, ctx) ?? tryResolveArrowFnCallWithConditionalArgs(node, ctx) ?? tryResolveConditionalValue(node, ctx) ?? tryResolveIndexedThemeWithPropFallback(node, ctx) ?? tryResolveConditionalCssBlockTernary(node, ctx) ?? tryResolveConditionalCssBlock(node, ctx) ?? tryResolveArrowFnCallWithSinglePropArg(node, ctx) ?? tryResolveArrowFnCurriedHelperCallWithPropFallback(node, ctx) ?? tryResolveThemeDependentTemplateLiteral(node, ctx) ?? tryResolveStyleFunctionFromTemplateLiteral(node) ?? tryResolveInlineStyleValueForNestedPropAccess(node) ?? tryResolvePropAccess(node) ?? tryResolveConditionalPropStyleFunction(node) ?? tryResolveArrowFnPropExpression(node) ?? tryResolveInlineStyleValueForConditionalExpression(node) ?? tryResolveInlineStyleValueForLogicalExpression(node) ?? tryResolveInlineStyleValueFromArrowFn(node);
+	return tryResolveThemeAccess(node, ctx) ?? tryResolveCallExpression(node, ctx) ?? tryResolveArrowFnHelperCallWithThemeArg(node, ctx) ?? tryResolveArrowFnPreservedRuntimeCall(node, ctx) ?? tryResolveArrowFnCallWithConditionalArgs(node, ctx) ?? tryResolveConditionalValue(node, ctx) ?? tryResolveIndexedThemeWithPropFallback(node, ctx) ?? tryResolveConditionalCssBlockTernary(node, ctx) ?? tryResolveConditionalCssBlock(node, ctx) ?? tryResolveArrowFnCallWithSinglePropArg(node, ctx) ?? tryResolveArrowFnCurriedHelperCallWithPropFallback(node, ctx) ?? tryResolveArrowFnImportedCurriedHelperCallWithPropsArg(node, ctx) ?? tryResolveThemeDependentTemplateLiteral(node, ctx) ?? tryResolveStyleFunctionFromTemplateLiteral(node) ?? tryResolveInlineStyleValueForNestedPropAccess(node) ?? tryResolvePropAccess(node) ?? tryResolveConditionalPropStyleFunction(node) ?? tryResolveArrowFnPropExpression(node) ?? tryResolveInlineStyleValueForConditionalExpression(node) ?? tryResolveInlineStyleValueForLogicalExpression(node) ?? tryResolveInlineStyleValueFromArrowFn(node);
 }
 function tryResolveThemeAccess(node, ctx) {
 	const expr = node.expr;
@@ -20260,6 +20732,24 @@ function tryResolveArrowFnCurriedHelperCallWithPropFallback(node, ctx) {
 		props
 	};
 }
+function tryResolveArrowFnImportedCurriedHelperCallWithPropsArg(node, ctx) {
+	if (!node.css.property) return null;
+	const expr = node.expr;
+	if (!isArrowFunctionExpression(expr)) return null;
+	const paramName = getArrowFnSingleParamName(expr);
+	if (!paramName) return null;
+	const body = getFunctionBodyExpr(expr);
+	if (!isCallExpressionNode(body)) return null;
+	const outerArgs = body.arguments ?? [];
+	if (outerArgs.length !== 1 || outerArgs[0]?.type !== "Identifier" || outerArgs[0].name !== paramName) return null;
+	const curried = resolveImportedCurriedHelperCall(body, ctx, node.css.property);
+	if (curried?.result.kind === "resolved") return buildResolvedHandlerResult(curried.result.result, node.css.property, {
+		resolveCallContext: curried.result.resolveCallContext,
+		resolveCallResult: curried.result.resolveCallResult
+	});
+	if (curried?.result.kind === "unresolved") return buildUnresolvedHelperResult(curried.innerCall.callee, ctx);
+	return null;
+}
 /**
 * Attempts to resolve a callee identifier through the adapter's resolveCall hook.
 * Uses `resolveCallOptional` (non-bailing) so that an unhandled helper does NOT
@@ -22917,7 +23407,7 @@ function createCssHelperConditionalHandler(ctx) {
 				return entries;
 			};
 			const wrapValueWithResolvedPseudos = (prop, value, pseudoEntries) => {
-				const properties = styleObj[prop] !== void 0 ? [j.property("init", j.identifier("default"), styleValueToExpression(j, styleObj[prop]))] : [];
+				const properties = [j.property("init", j.identifier("default"), styleObj[prop] !== void 0 ? styleValueToExpression(j, styleObj[prop]) : j.literal(null))];
 				for (const entry of pseudoEntries) {
 					let entryValue = value;
 					if (entry.conditionExpr) entryValue = j.objectExpression([j.property("init", j.identifier("default"), j.literal(null)), (() => {
@@ -24657,6 +25147,7 @@ function createDeclProcessingState(state, decl) {
 	} });
 	const styleFnDecls = /* @__PURE__ */ new Map();
 	const attrBuckets = /* @__PURE__ */ new Map();
+	const observedVariantFallbackFns = /* @__PURE__ */ new Map();
 	const inlineStyleProps = [];
 	const localVarValues = /* @__PURE__ */ new Map();
 	const cssHelperPropValues = /* @__PURE__ */ new Map();
@@ -24852,6 +25343,7 @@ function createDeclProcessingState(state, decl) {
 		styleFnFromProps,
 		styleFnDecls,
 		attrBuckets,
+		observedVariantFallbackFns,
 		inlineStyleProps,
 		localVarValues,
 		cssHelperPropValues,
@@ -24903,214 +25395,13 @@ function createDeclProcessingState(state, decl) {
 	};
 }
 //#endregion
-//#region src/internal/lower-rules/variants.ts
-function parseVariantCondition(when) {
-	const trimmed = when.trim();
-	if (trimmed.includes("&&")) 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 {
-			type: "boolean",
-			propName: inner,
-			negated: true
-		};
-		return { type: "unknown" };
-	}
-	const eqMatch = trimmed.match(/^([a-zA-Z_$][a-zA-Z0-9_$]*)\s*(===|!==)\s*"([^"]*)"$/);
-	if (eqMatch && eqMatch[1] && eqMatch[2] && eqMatch[3] !== void 0) return {
-		type: "equality",
-		propName: eqMatch[1],
-		operator: eqMatch[2],
-		value: eqMatch[3]
-	};
-	if (/^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(trimmed)) return {
-		type: "boolean",
-		propName: trimmed,
-		negated: false
-	};
-	return { type: "unknown" };
-}
-/**
-* Extract string literal values from a TypeScript union type.
-* Returns an array of literal values, or null if the type doesn't contain string literals.
-*/
-function extractUnionLiteralValues(tsType) {
-	if (!tsType || typeof tsType !== "object") return null;
-	const type = tsType;
-	if (type.type === "TSUnionType" && Array.isArray(type.types)) {
-		const values = [];
-		for (const t of type.types) {
-			const inner = t;
-			if (inner.type === "TSLiteralType" && typeof inner.literal?.value === "string") values.push(inner.literal.value);
-		}
-		return values.length > 0 ? values : null;
-	}
-	if (type.type === "TSLiteralType" && typeof type.literal?.value === "string") return [type.literal.value];
-	return null;
-}
-/**
-* Groups variant buckets into dimensions for the StyleX variants recipe pattern.
-*
-* A dimension is created when:
-* - Multiple conditions test the same prop with `===` against different string values
-* - OR a single `===` condition exists (the else branch becomes a default variant)
-*
-* 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) => {
-		if (propName === "variant") return suffix ? `${suffix.toLowerCase()}Variants` : "variants";
-		return suffix ? `${propName}${suffix}Variants` : `${propName}Variants`;
-	};
-	const propGroups = /* @__PURE__ */ new Map();
-	const remainingBuckets = /* @__PURE__ */ new Map();
-	const remainingStyleKeys = {};
-	const propsToStrip = /* @__PURE__ */ new Set();
-	for (const [when, styles] of variantBuckets.entries()) {
-		const parsed = parseVariantCondition(when);
-		if (parsed.type === "equality" && parsed.operator === "===") {
-			const existing = propGroups.get(parsed.propName) ?? [];
-			existing.push({
-				when,
-				value: parsed.value,
-				styles
-			});
-			propGroups.set(parsed.propName, existing);
-		} else {
-			remainingBuckets.set(when, styles);
-			if (variantStyleKeys[when]) remainingStyleKeys[when] = variantStyleKeys[when];
-		}
-	}
-	const dimensions = [];
-	const booleanBuckets = /* @__PURE__ */ new Map();
-	for (const [when, styles] of variantBuckets.entries()) {
-		const parsed = parseVariantCondition(when);
-		if (parsed.type === "boolean" && !parsed.negated) booleanBuckets.set(parsed.propName, {
-			cssProps: new Set(Object.keys(styles)),
-			styles
-		});
-	}
-	let isVariantsRecipePattern = false;
-	for (const [, variants] of propGroups.entries()) {
-		const variantCssProps = new Set(variants.flatMap((v) => Object.keys(v.styles)));
-		for (const [, boolData] of booleanBuckets) {
-			for (const cssProp of variantCssProps) if (boolData.cssProps.has(cssProp)) {
-				isVariantsRecipePattern = true;
-				break;
-			}
-			if (isVariantsRecipePattern) break;
-		}
-		if (isVariantsRecipePattern) break;
-	}
-	for (const [propName, variants] of propGroups.entries()) {
-		const propType = findJsxPropTsType?.(propName);
-		const unionValues = extractUnionLiteralValues(propType);
-		const firstVariant = variants[0];
-		if (variants.length === 1 && firstVariant) {
-			const explicitValue = firstVariant.value;
-			if (isVariantsRecipePattern && unionValues && unionValues.length === 2 && unionValues.includes(explicitValue)) {} else {
-				for (const v of variants) {
-					remainingBuckets.set(v.when, v.styles);
-					const styleKey = variantStyleKeys[v.when];
-					if (styleKey) remainingStyleKeys[v.when] = styleKey;
-				}
-				continue;
-			}
-		}
-		const variantMap = {};
-		const allOverriddenProps = /* @__PURE__ */ new Set();
-		for (const v of variants) {
-			variantMap[v.value] = v.styles;
-			for (const cssProp of Object.keys(v.styles)) allOverriddenProps.add(cssProp);
-		}
-		const defaultStyles = {};
-		for (const cssProp of allOverriddenProps) if (cssProp in baseStyles) defaultStyles[cssProp] = baseStyles[cssProp];
-		let defaultValue;
-		const propIsOptional = isJsxPropOptional?.(propName) ?? false;
-		if (Object.keys(defaultStyles).length > 0 && unionValues) {
-			const explicitValues = new Set(variants.map((v) => v.value));
-			const remainingValues = unionValues.filter((v) => !explicitValues.has(v));
-			if (remainingValues.length === 1 && remainingValues[0]) {
-				defaultValue = remainingValues[0];
-				variantMap[defaultValue] = defaultStyles;
-			} else {
-				defaultValue = "default";
-				variantMap["default"] = defaultStyles;
-			}
-		}
-		const firstVariantForProps = variants[0];
-		if (!firstVariantForProps) continue;
-		const variantCssProps = new Set(Object.keys(firstVariantForProps.styles));
-		let overlappingBoolProp;
-		let overlappingBoolStyles;
-		for (const [boolProp, boolData] of booleanBuckets) {
-			for (const cssProp of variantCssProps) if (boolData.cssProps.has(cssProp)) {
-				overlappingBoolProp = boolProp;
-				overlappingBoolStyles = boolData.styles;
-				break;
-			}
-			if (overlappingBoolProp) break;
-		}
-		if (overlappingBoolProp && overlappingBoolStyles) {
-			dimensions.push({
-				propName,
-				variantObjectName: getVariantObjectName(propName, "Enabled"),
-				variants: variantMap,
-				defaultValue,
-				namespaceBooleanProp: overlappingBoolProp,
-				isDisabledNamespace: false,
-				isOptional: propIsOptional
-			});
-			const disabledVariantMap = {};
-			for (const [variantValue, variantStyles] of Object.entries(variantMap)) {
-				const merged = { ...variantStyles };
-				for (const [cssProp, boolValue] of Object.entries(overlappingBoolStyles)) {
-					const variantValue2 = merged[cssProp];
-					if (typeof variantValue2 === "object" && variantValue2 !== null && typeof boolValue === "string") merged[cssProp] = {
-						...variantValue2,
-						default: boolValue
-					};
-					else merged[cssProp] = boolValue;
-				}
-				for (const [cssProp, boolValue] of Object.entries(overlappingBoolStyles)) if (!(cssProp in merged)) merged[cssProp] = boolValue;
-				disabledVariantMap[variantValue] = merged;
-			}
-			dimensions.push({
-				propName,
-				variantObjectName: getVariantObjectName(propName, "Disabled"),
-				variants: disabledVariantMap,
-				defaultValue,
-				namespaceBooleanProp: overlappingBoolProp,
-				isDisabledNamespace: true,
-				isOptional: propIsOptional
-			});
-			remainingBuckets.delete(overlappingBoolProp);
-			delete remainingStyleKeys[overlappingBoolProp];
-			for (const cssProp of variantCssProps) propsToStrip.add(cssProp);
-		} else dimensions.push({
-			propName,
-			variantObjectName: getVariantObjectName(propName),
-			variants: variantMap,
-			defaultValue,
-			isOptional: propIsOptional
-		});
-	}
-	return {
-		dimensions,
-		remainingBuckets,
-		remainingStyleKeys,
-		propsToStrip
-	};
-}
-//#endregion
 //#region src/internal/lower-rules/finalize-decl.ts
 /**
 * Finalizes per-declaration style objects after rule processing.
 * Core concepts: merge pseudo/media buckets, rewrite CSS vars, and emit variants.
 */
 function finalizeDeclProcessing(ctx) {
-	const { state, decl, styleObj, perPropPseudo, perPropMedia, perPropComputedMedia, nestedSelectors, variantBuckets, variantStyleKeys, variantSourceOrder, extraStyleObjects, styleFnFromProps, styleFnDecls, attrBuckets, inlineStyleProps, localVarValues, cssHelperPropValues } = ctx;
+	const { state, decl, styleObj, perPropPseudo, perPropMedia, perPropComputedMedia, nestedSelectors, variantBuckets, variantStyleKeys, variantSourceOrder, extraStyleObjects, styleFnFromProps, styleFnDecls, attrBuckets, observedVariantFallbackFns, inlineStyleProps, localVarValues, cssHelperPropValues } = ctx;
 	const { rewriteCssVarsInStyleObject, rewriteCssVarsInAstNode, relationOverridePseudoBuckets, relationOverrides, ancestorSelectorParents, resolvedStyleObjects, warnings } = state;
 	mergeConditionBucket(styleObj, perPropPseudo);
 	mergeConditionBucket(styleObj, perPropMedia);
@@ -25159,7 +25450,7 @@ function finalizeDeclProcessing(ctx) {
 	}
 	for (const bucket of bucketsForVarRewrite) rewriteCssVarsInStyleObject(bucket, localVarValues, varsToDrop);
 	for (const name of varsToDrop) for (const bucket of bucketsForVarRewrite) dropCssVariableDefinitionsFromBucket(bucket, name);
-	moveUnsafeRawCssVarPropsToInlineStyles({
+	if (decl.base.kind !== "component") moveUnsafeRawCssVarPropsToInlineStyles({
 		styleObj,
 		inlineStyleProps,
 		staticInlineStyleProps,
@@ -25362,6 +25653,11 @@ function finalizeDeclProcessing(ctx) {
 			}
 			if (minOrder !== void 0) dim.sourceOrder = minOrder;
 		}
+		for (const dim of dimensions) {
+			const observedFallbackFnKey = observedVariantFallbackFns.get(dim.propName);
+			if (observedFallbackFnKey) dim.fallbackFnKey = observedFallbackFnKey;
+			if (!observedFallbackFnKey && hasFiniteNumericVariantKey(dim)) dim.propTypeFromKeyof = true;
+		}
 		decl.variantDimensions = mergeVariantDimensions(decl.variantDimensions, dimensions);
 		decl.needsWrapperComponent = true;
 		for (const prop of propsToStrip) delete styleObj[prop];
@@ -27551,7 +27847,7 @@ 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, extraStyleObjects, styleFnFromProps, styleFnDecls, inlineStyleProps, cssHelperPropValues, tryHandleMappedFunctionColor, tryHandleLogicalOrDefault, tryHandleConditionalPropCoalesceWithTheme, tryHandleEnumIfChainValue, tryHandleThemeIndexedLookup, handlerContext, componentInfo, tryHandlePropertyTernaryTemplateLiteral, tryHandleCssHelperFunctionSwitchBlock, tryHandleCssHelperConditionalBlock, findJsxPropTsType, findJsxPropTsTypeForVariantExtraction, annotateParamFromJsxProp, 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, applyVariant, notifyResolvedStylesArg } = ctx;
 	const { api, j, filePath, warnings, resolverImports, keyframesNames, parseExpr, resolveValue, resolveCall, importMap, cssHelperNames, cssHelperObjectMembers, declByLocalName, cssHelperValuesByKey, staticPropertyValues, warnPropInlineStyle, applyCssHelperMixin, hasLocalThemeBinding, resolveThemeValue, resolveThemeValueFromFn, getOrCreateLocalStylexVar, resolveImportInScope, resolveImportForExpr } = state;
 	const avoidNames = new Set(importMap.keys());
 	if (state.bail) return;
@@ -27575,6 +27871,16 @@ function handleInterpolatedDeclaration(args) {
 			if (cnExpr) decl.extraClassNames.push({ expr: cnExpr });
 		}
 	};
+	const getObservedStaticVariantValues = (jsxProp) => {
+		const usage = state.propUsageByComponent.get(decl.localName);
+		if (!usage) return null;
+		const propUsage = usage.props[jsxProp];
+		if (!propUsage || propUsage.values.length < 2) return null;
+		const values = propUsage.values.filter((value) => typeof value === "number");
+		if (values.length !== propUsage.values.length) return null;
+		return values;
+	};
+	const observedNumericCssTextProps = /* @__PURE__ */ new Set();
 	const tryHandleMultiSlotRuntimeValue = () => {
 		if (!d.property || d.value.kind !== "interpolated") return false;
 		const cssProperty = d.property.trim();
@@ -27668,18 +27974,50 @@ function handleInterpolatedDeclaration(args) {
 	*   and should be skipped in the variant buckets.
 	*/
 	const tryEmitIdentityVariantBuckets = (jsxProp, stylexProp, skipValue) => {
+		const staticParts = getSingleSlotStaticParts(d, decl);
+		if (!staticParts) return false;
 		const unionValues = extractUnionLiteralValues(findJsxPropTsTypeForVariantExtraction(jsxProp));
-		if (!unionValues || unionValues.length < 2 || unionValues.length > 20) return false;
-		for (const value of unionValues) {
+		const observedValues = unionValues ? null : getObservedStaticVariantValues(jsxProp);
+		const hasStaticText = staticParts.prefix !== "" || staticParts.suffix !== "";
+		if (observedValues && getNumericCssEmissionMode(stylexProp) === "cssText" && !hasStaticText) {
+			observedNumericCssTextProps.add(jsxProp);
+			return false;
+		}
+		const values = unionValues ?? observedValues;
+		if (!values || values.length < 2 || values.length > 20) return false;
+		for (const value of values) {
 			if (value === skipValue) continue;
 			applyVariant({
-				when: `${jsxProp} === "${value}"`,
+				when: `${jsxProp} === ${typeof value === "number" ? String(value) : JSON.stringify(value)}`,
 				propName: jsxProp
-			}, { [stylexProp]: value });
+			}, { [stylexProp]: emitStaticObservedValue(value, stylexProp, observedValues !== null, staticParts) });
 		}
+		if (observedValues) observedVariantFallbackFns.set(jsxProp, ensureObservedVariantFallbackFn(jsxProp, stylexProp, staticParts));
 		if (jsxProp.startsWith("$")) ensureShouldForwardPropDrop(decl, jsxProp);
 		return true;
 	};
+	const ensureObservedVariantFallbackFn = (jsxProp, stylexProp, staticParts) => {
+		const normalizedJsxProp = jsxProp.startsWith("$") ? jsxProp.slice(1) : jsxProp;
+		const fnKey = styleKeyWithSuffix(decl.styleKey, normalizedJsxProp);
+		const paramName = cssPropertyToIdentifier(normalizedJsxProp || stylexProp, avoidNames);
+		const valueExpr = buildRuntimeObservedValueExpr(j, stylexProp, j.identifier(paramName), staticParts);
+		const property = j.property("init", makeCssPropKey(j, stylexProp), valueExpr);
+		const existing = styleFnDecls.get(fnKey);
+		if (existing?.type === "ArrowFunctionExpression" && existing.body?.type === "ObjectExpression") {
+			existing.body.properties.push(property);
+			return fnKey;
+		}
+		if (!styleFnDecls.has(fnKey)) {
+			const param = j.identifier(paramName);
+			if (jsxProp !== "__props") annotateParamFromJsxProp(param, jsxProp);
+			const body = j.objectExpression([property]);
+			styleFnDecls.set(fnKey, j.arrowFunctionExpression([param], body));
+		}
+		return fnKey;
+	};
+	const shouldPreserveNumericCssTextForProp = (jsxProp, stylexProp) => {
+		return (observedNumericCssTextProps.has(jsxProp) || isNumberLikeTsType(findJsxPropTsType(jsxProp))) && getNumericCssEmissionMode(stylexProp) === "cssText";
+	};
 	const maybeEmitPreservedRuntimeCallOverride = (args) => {
 		const { resolveCallResult, originalExpr, loc } = args;
 		if (!resolveCallResult || !("preserveRuntimeCall" in resolveCallResult) || !resolveCallResult.preserveRuntimeCall) return "not-requested";
@@ -28932,7 +29270,16 @@ function handleInterpolatedDeclaration(args) {
 							const slotParts = parts.filter((p) => p?.kind === "slot");
 							if (slotParts.length !== 1) return transformedValue;
 							if (slotParts[0].slotId !== slotId) return transformedValue;
-							if (!parts.some((p) => p?.kind === "static" && p.value !== "")) return transformedValue;
+							if (!parts.some((p) => p?.kind === "static" && p.value !== "")) {
+								if (shouldPreserveNumericCssTextForProp(jsxProp, out.prop)) return j.templateLiteral([j.templateElement({
+									raw: "",
+									cooked: ""
+								}, false), j.templateElement({
+									raw: "",
+									cooked: ""
+								}, true)], [transformed]);
+								return transformedValue;
+							}
 							const quasis = [];
 							const exprs = [];
 							let q = "";
@@ -29308,11 +29655,86 @@ function tryResolveIndexedThemeForPseudoElement(expr, state) {
 	}
 }
 function isEntireInterpolatedValueSingleSlot(d, decl) {
-	if (d.value.kind !== "interpolated") return false;
-	const parts = d.value.parts ?? [];
-	if (parts.length !== 1 || parts[0]?.kind !== "slot") return false;
-	return decl.templateExpressions[parts[0].slotId] !== void 0;
+	return getSingleSlotStaticParts(d, decl) !== null;
+}
+function getSingleSlotStaticParts(d, decl) {
+	if (d.value.kind !== "interpolated") return null;
+	const slotParts = (d.value.parts ?? []).filter((part) => part.kind === "slot");
+	if (slotParts.length !== 1) return null;
+	const slot = slotParts[0];
+	if (decl.templateExpressions[slot.slotId] === void 0) return null;
+	return extractStaticPartsForDecl(d);
+}
+function getNumericCssEmissionMode(stylexProp) {
+	if (stylexProp.startsWith("--")) return "cssText";
+	return UNITLESS_NUMERIC_STYLEX_PROPS.has(stylexProp) ? "stylexNumber" : "cssText";
+}
+function emitStaticObservedValue(value, stylexProp, isObservedNumeric, staticParts) {
+	if (typeof value !== "number" || !isObservedNumeric) return value;
+	if (staticParts.prefix || staticParts.suffix) return `${staticParts.prefix}${value}${staticParts.suffix}`;
+	return getNumericCssEmissionMode(stylexProp) === "stylexNumber" ? value : String(value);
+}
+function buildRuntimeObservedValueExpr(j, stylexProp, valueExpr, staticParts) {
+	if (getNumericCssEmissionMode(stylexProp) === "stylexNumber" && !staticParts.prefix && !staticParts.suffix) return valueExpr;
+	return j.templateLiteral([j.templateElement({
+		raw: staticParts.prefix,
+		cooked: staticParts.prefix
+	}, false), j.templateElement({
+		raw: staticParts.suffix,
+		cooked: staticParts.suffix
+	}, true)], [valueExpr]);
 }
+function isNumberLikeTsType(tsType) {
+	if (!tsType || typeof tsType !== "object") return false;
+	const type = tsType;
+	if (type.type === "TSNumberKeyword") return true;
+	if (type.type === "TSLiteralType") return typeof type.literal?.value === "number";
+	if (type.type === "TSUnionType" && Array.isArray(type.types)) return type.types.length > 0 && type.types.every(isNumberLikeTsType);
+	return false;
+}
+const UNITLESS_NUMERIC_STYLEX_PROPS = new Set([
+	"animationIterationCount",
+	"aspectRatio",
+	"borderImageOutset",
+	"borderImageSlice",
+	"borderImageWidth",
+	"boxFlex",
+	"boxFlexGroup",
+	"boxOrdinalGroup",
+	"columnCount",
+	"columns",
+	"flex",
+	"flexGrow",
+	"flexPositive",
+	"flexShrink",
+	"flexNegative",
+	"flexOrder",
+	"fontWeight",
+	"gridArea",
+	"gridColumn",
+	"gridColumnEnd",
+	"gridColumnStart",
+	"gridRow",
+	"gridRowEnd",
+	"gridRowStart",
+	"lineClamp",
+	"lineHeight",
+	"opacity",
+	"order",
+	"orphans",
+	"tabSize",
+	"widows",
+	"zIndex",
+	"zoom",
+	"fillOpacity",
+	"floodOpacity",
+	"stopOpacity",
+	"strokeDasharray",
+	"strokeDashoffset",
+	"strokeMiterlimit",
+	"strokeOpacity",
+	"strokeWidth"
+]);
 function buildFullInterpolatedDeclarationValueExpr(j, decl, d) {
 	if (d.value.kind !== "interpolated") return null;
 	const parts = d.value.parts ?? [];
@@ -30557,6 +30979,15 @@ function processDeclRules(ctx) {
 				}
 				continue;
 			}
+			if (hasEnabledCompoundPseudoSelector(s)) {
+				state.markBail();
+				warnings.push({
+					severity: "warning",
+					type: "Unsupported selector: compound pseudo selector",
+					loc: computeSelectorWarningLoc(decl.loc, decl.rawCss, rule.selector)
+				});
+				break;
+			}
 			const selectorTrimmed = selectorForAnalysis.trim();
 			const isHandledComponentPattern = hasComponentExpr && (/^__SC_EXPR_\d+__:[a-z][a-z0-9()-]*\s+&\s*$/.test(selectorTrimmed) || isCommaGroupedReverseSelectorPattern(selectorTrimmed) || /^__SC_EXPR_\d+__\s+&\s*$/.test(selectorTrimmed) || selectorTrimmed.startsWith("&") || /^__SC_EXPR_\d+__\s*\{/.test(selectorTrimmed) || /^__SC_EXPR_\d+__:[a-z][a-z0-9()-]*\s*[+~]\s*&\s*$/.test(selectorTrimmed) || HAS_COMPONENT_SELECTOR_STRICT_RE.test(selectorTrimmed));
 			if (/&\s+:/.test(rule.selector)) {
@@ -30970,6 +31401,15 @@ function processDeclRules(ctx) {
 		const pseudos = parsedSelector.kind === "pseudo" ? parsedSelector.pseudos : parsedSelector.kind === "pseudoElementWithPseudo" ? parsedSelector.pseudos : null;
 		const pseudoElement = parsedSelector.kind === "pseudoElement" ? parsedSelector.element : parsedSelector.kind === "pseudoElementWithPseudo" ? parsedSelector.element : null;
 		const pseudoElementsList = parsedSelector.kind === "pseudoElements" ? parsedSelector.elements : null;
+		if ((pseudoElement ? [pseudoElement] : pseudoElementsList)?.some((pe) => !isStylexCompilerPseudoElement(pe))) {
+			state.markBail();
+			warnings.push({
+				severity: "warning",
+				type: "Unsupported selector: unsupported pseudo-element",
+				loc: computeSelectorWarningLoc(decl.loc, decl.rawCss, rule.selector)
+			});
+			break;
+		}
 		const attrSel = parsedSelector.kind === "attribute" ? {
 			kind: parsedSelector.attr.type,
 			suffix: parsedSelector.attr.suffix,
@@ -31530,9 +31970,29 @@ function tryResolveInterpolatedPseudo(slotExpr, rule, ctx, prefixPseudo) {
 		if (prefixPseudo) return "bail";
 		return handlePseudoAlias(selectorResult, rule, ctx);
 	}
-	if (selectorResult.kind === "pseudoExpand") return handlePseudoExpand(selectorResult, imp.importedName, rule, ctx, prefixPseudo);
+	if (selectorResult.kind === "pseudoExpand") {
+		if (prefixPseudo && containsPseudoToken(prefixPseudo, "enabled")) return "bail";
+		return handlePseudoExpand(selectorResult, imp.importedName, rule, ctx, prefixPseudo);
+	}
 	return "bail";
 }
+function hasEnabledCompoundPseudoSelector(selector) {
+	return selector.split(",").some((part) => {
+		const trimmed = part.trim();
+		if (!trimmed.startsWith("&")) return false;
+		const pseudoTokens = extractPseudoTokens(trimmed);
+		return pseudoTokens.includes("enabled") && pseudoTokens.length > 1;
+	});
+}
+function isStylexCompilerPseudoElement(selector) {
+	return selector.startsWith("::");
+}
+function containsPseudoToken(selector, token) {
+	return extractPseudoTokens(selector).includes(token);
+}
+function extractPseudoTokens(selector) {
+	return [...selector.matchAll(/:(?!:)([a-zA-Z][a-zA-Z0-9-]*)/g)].map((match) => match[1]).filter((value) => value !== void 0);
+}
 /**
 * Handles `pseudoAlias` result: builds N extra style objects (one per pseudo value)
 * and registers them on `decl.pseudoAliasSelectors` for the emit phase.
@@ -32382,6 +32842,7 @@ function createLowerRulesState(ctx) {
 		j
 	});
 	const enumValueMap = buildEnumValueMap(root, j);
+	const propUsageByComponent = collectPropUsageByComponent(ctx, styledDecls);
 	const crossFileSelectorsByLocal = /* @__PURE__ */ new Map();
 	if (ctx.crossFileSelectorUsages) for (const usage of ctx.crossFileSelectorUsages) crossFileSelectorsByLocal.set(usage.localName, usage);
 	const state = {
@@ -32437,6 +32898,7 @@ function createLowerRulesState(ctx) {
 		isIdentifierShadowed,
 		enumValueMap,
 		crossFileSelectorsByLocal,
+		propUsageByComponent,
 		inlineKeyframeNameMap: void 0,
 		/**
 		* File-level bail flag. Used only for bails that cannot be scoped to a single
@@ -32470,6 +32932,74 @@ function createLowerRulesState(ctx) {
 	};
 	return state;
 }
+function collectPropUsageByComponent(ctx, styledDecls) {
+	const byComponent = clonePropUsageByComponent(ctx.propUsageByComponent);
+	const localNames = new Set(styledDecls.map((decl) => decl.localName));
+	const recordOpening = (opening) => {
+		if (!opening || typeof opening !== "object") return;
+		const openingRecord = opening;
+		const name = getJsxIdentifierName(openingRecord.name);
+		if (!name || !localNames.has(name)) return;
+		const usage = collectOpeningPropUsage(openingRecord.attributes);
+		let info = byComponent.get(name);
+		if (!info) {
+			info = createComponentPropUsageInfo(name);
+			byComponent.set(name, info);
+		}
+		mergeComponentPropUsage(info, usage);
+	};
+	ctx.root.find(ctx.j.JSXElement).forEach((path) => {
+		recordOpening(path.node.openingElement);
+	});
+	ctx.root.find(ctx.j.JSXSelfClosingElement).forEach((path) => {
+		recordOpening(path.node);
+	});
+	return byComponent;
+}
+function clonePropUsageByComponent(source) {
+	const cloned = /* @__PURE__ */ new Map();
+	for (const [name, info] of source ?? []) cloned.set(name, {
+		componentName: info.componentName,
+		usageCount: info.usageCount,
+		hasUnknownUsage: info.hasUnknownUsage,
+		props: Object.fromEntries(Object.entries(info.props).map(([propName, propInfo]) => [propName, {
+			values: [...propInfo.values],
+			hasUnknown: propInfo.hasUnknown,
+			usageCount: propInfo.usageCount,
+			omittedCount: propInfo.omittedCount
+		}]))
+	});
+	return cloned;
+}
+function collectOpeningPropUsage(attributes) {
+	const props = {};
+	let hasSpread = false;
+	for (const attr of attributes ?? []) {
+		if (!attr || typeof attr !== "object") continue;
+		const attrRecord = attr;
+		if (attrRecord.type === "JSXSpreadAttribute") {
+			hasSpread = true;
+			continue;
+		}
+		if (attrRecord.type !== "JSXAttribute") continue;
+		const propName = getJsxIdentifierName(attrRecord.name);
+		if (!propName || KNOWN_NON_ELEMENT_PROPS.has(propName)) continue;
+		const value = readStaticJsxLiteral(attr);
+		props[propName] = value === void 0 ? { kind: "unknown" } : {
+			kind: "static",
+			value
+		};
+	}
+	return {
+		props,
+		hasSpread
+	};
+}
+function getJsxIdentifierName(node) {
+	if (!node || typeof node !== "object") return null;
+	const record = node;
+	return record.type === "JSXIdentifier" && typeof record.name === "string" ? record.name : null;
+}
 //#endregion
 //#region src/internal/transform-steps/lower-rules.ts
 /**
@@ -34289,13 +34819,16 @@ function extractCrossFileInfoForFile(filePath, options) {
 	const absPath = resolveToPrepassKey(filePath, prepass);
 	const selectorUsages = prepass.selectorUsages.get(absPath);
 	const bridgeComponentNames = prepass.componentsNeedingGlobalSelectorBridge?.get(absPath);
+	const propUsageByComponent = prepass.propUsageByFile?.get(absPath);
 	const hasStyledDefFiles = prepass.styledDefFiles && prepass.styledDefFiles.size > 0;
+	const hasPropUsage = propUsageByComponent && propUsageByComponent.size > 0;
 	const hasGlobalLeafKeys = prepass.globalLeafKeys && prepass.globalLeafKeys.size > 0;
 	const hasTransformedFiles = prepass.transformedFiles !== void 0;
-	if ((!selectorUsages || selectorUsages.length === 0) && !bridgeComponentNames && !hasStyledDefFiles && !hasGlobalLeafKeys && !hasTransformedFiles) return options;
+	if ((!selectorUsages || selectorUsages.length === 0) && !bridgeComponentNames && !hasPropUsage && !hasStyledDefFiles && !hasGlobalLeafKeys && !hasTransformedFiles) return options;
 	const crossFileInfo = {
 		selectorUsages: selectorUsages ?? [],
 		bridgeComponentNames,
+		propUsageByComponent,
 		styledDefFiles: prepass.styledDefFiles,
 		globalLeafKeys: prepass.globalLeafKeys,
 		transformedFiles: prepass.transformedFiles
@@ -34313,7 +34846,7 @@ function extractCrossFileInfoForFile(filePath, options) {
 */
 function resolveToPrepassKey(filePath, prepass) {
 	const resolved = resolve(filePath);
-	if (prepass.selectorUsages.has(resolved) || prepass.componentsNeedingGlobalSelectorBridge?.has(resolved)) return resolved;
+	if (prepass.selectorUsages.has(resolved) || prepass.componentsNeedingGlobalSelectorBridge?.has(resolved) || prepass.propUsageByFile?.has(resolved)) return resolved;
 	try {
 		const real = realpathSync(resolved);
 		if (real !== resolved) return real;