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

package/dist/transform.mjs

@@ -1,11 +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-DBy6tOUv.mjs";
-import { i as getReExportedSourceName, o as resolveBarrelReExportBinding, r as findImportSource, s as Logger, t as fileExports } from "./extract-external-interface-B61N1a6q.mjs";
-import { n as toRealPath, t as isRelativeSpecifier } from "./path-utils-BIpoL4Ue.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$1 } from "./string-utils-DD9wdRHW.mjs";
-import { n as findTypeScriptComponentMetadata, t as applyTypeScriptMetadataToDecl } from "./typescript-metadata-Dubr-x2i.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-B6z4WOPr.mjs";
-import { t as isSelectorContext } from "./selector-context-heuristic-CGggN74M.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 { 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 { createRequire } from "node:module";
 import jscodeshift from "jscodeshift";
 import { basename, dirname, isAbsolute, join, relative, resolve, sep } from "node:path";
@@ -252,6 +251,21 @@ const STYLEX_STRING_ONLY_CSS_PROPS = new Set([
 	"gridColumnEnd",
 	"outlineOffset"
 ]);
+const UNSUPPORTED_STYLEX_CSS_PROPS = new Set([
+	"all",
+	"scroll-margin-block",
+	"scroll-margin-block-start",
+	"scroll-margin-block-end",
+	"scroll-margin-inline",
+	"scroll-margin-inline-start",
+	"scroll-margin-inline-end",
+	"scroll-padding-block",
+	"scroll-padding-block-start",
+	"scroll-padding-block-end",
+	"scroll-padding-inline",
+	"scroll-padding-inline-start",
+	"scroll-padding-inline-end"
+]);
 /**
 * Returns true if the CSS property is a shorthand that StyleX cannot express directly
 * and requires expansion (e.g., `padding`, `margin`, `border`, `background`).
@@ -259,6 +273,9 @@ const STYLEX_STRING_ONLY_CSS_PROPS = new Set([
 function isCssShorthandProperty(cssProp) {
 	return cssProp in DIRECTIONAL_SHORTHAND_MAP || cssProp === "border" || /^border-(top|right|bottom|left)$/.test(cssProp) || cssProp === "background";
 }
+function isUnsupportedStylexProperty(cssProp) {
+	return UNSUPPORTED_STYLEX_CSS_PROPS.has(cssProp.trim());
+}
 function isUnsupportedBackgroundShorthandValue(rawValue) {
 	const value = rawValue.trim();
 	return value !== "none" && !isSingleBackgroundComponent(value);
@@ -929,7 +946,7 @@ function isAstNode(v) {
 /**
 * Type guard for function-like nodes including class/object methods.
 */
-function isFunctionNode(node) {
+function isFunctionNode$1(node) {
 	if (!node || typeof node !== "object") return false;
 	const type = node.type;
 	return type === "FunctionDeclaration" || type === "FunctionExpression" || type === "ArrowFunctionExpression" || type === "ObjectMethod" || type === "ClassMethod";
@@ -951,7 +968,7 @@ function getDeclaratorId(decl) {
 function getArrowFnSingleParamName(fn) {
 	if (fn.params.length !== 1) return null;
 	const p = fn.params[0];
-	return isIdentifier(p) ? p.name : null;
+	return isIdentifier$2(p) ? p.name : null;
 }
 /**
 * Extracts parameter binding information from an arrow function.
@@ -971,7 +988,7 @@ function getArrowFnSingleParamName(fn) {
 function getArrowFnParamBindings(fn) {
 	if (fn.params.length !== 1) return null;
 	const p = fn.params[0];
-	if (isIdentifier(p)) return {
+	if (isIdentifier$2(p)) return {
 		kind: "simple",
 		paramName: p.name
 	};
@@ -1130,6 +1147,7 @@ function collectIdentifiers(node, out) {
 * - Literal (ESTree/recast AST)
 * - TemplateLiteral without expressions (static template strings)
 * - TaggedTemplateExpression with css tag (styled-components css helper)
+* - TSAsExpression and TSSatisfiesExpression wrapping static values
 * - ArrowFunctionExpression with no params and a static body (e.g., `() => "value"` or `() => \`value\``)
 *
 * Returns null for non-literal or dynamic nodes.
@@ -1137,6 +1155,7 @@ function collectIdentifiers(node, out) {
 function literalToStaticValue(node) {
 	if (!node || typeof node !== "object") return null;
 	const type = node.type;
+	if (type === "TSAsExpression" || type === "TSSatisfiesExpression") return literalToStaticValue(node.expression);
 	if (type === "StringLiteral") return node.value;
 	if (type === "BooleanLiteral") return node.value;
 	if (type === "Literal") {
@@ -1420,7 +1439,7 @@ function buildStyleFnConditionExpr(args) {
 	if (condition === "always" || isRequired) return call;
 	return j.logicalExpression("&&", j.binaryExpression("!=", propExpr, j.nullLiteral()), call);
 }
-function isIdentifier(node, name) {
+function isIdentifier$2(node, name) {
 	return isIdentifierNode(node) && (name ? node.name === name : true);
 }
 function isJsxIdentifierNode(node) {
@@ -2397,6 +2416,17 @@ function hasInlineableStyleFnOnly(decl) {
 	return true;
 }
 /**
+* Returns true when `shouldForwardProp` must be preserved by a wrapper boundary.
+* Resolver-added drops for inlined base components are applied directly during JSX rewrite.
+*/
+function needsShouldForwardPropWrapper(decl) {
+	const resolverOnlyShouldForwardProp = !!decl.inlinedBaseComponent && !decl.shouldForwardPropFromWithConfig;
+	return !!decl.shouldForwardProp && !resolverOnlyShouldForwardProp;
+}
+function getEffectiveBaseIdent(decl) {
+	return decl.originalBaseIdent ?? (decl.base.kind === "component" ? decl.base.ident : null);
+}
+/**
 * Returns true if any JSX usage of a component has spread attributes
 * (e.g., `<Comp {...props} />`). The inline path can only consume explicit
 * JSX attributes, so spreads require a wrapper for prop extraction.
@@ -2575,8 +2605,76 @@ function typeContainsPolymorphicAs(args) {
 	return visit(args.typeNode);
 }
 //#endregion
+//#region src/internal/utilities/typescript-metadata.ts
+function findTypeScriptComponentMetadata(metadata, filePath, componentNames) {
+	if (!metadata) return;
+	const names = new Set(componentNames);
+	const resolvedFilePath = resolveExistingFilePath(filePath);
+	return metadata.files.find((file) => file.filePath === resolvedFilePath)?.components.find((component) => names.has(component.name) || defaultExportMatches(component, names));
+}
+function applyTypeScriptMetadataToDecl(ctx, decl, names) {
+	const typedComponent = findTypeScriptComponentMetadata(ctx.options.crossFileInfo?.typeScriptMetadata, ctx.file.path, names);
+	if (!typedComponent) return;
+	decl.typeScriptPropNames = new Set(typedComponent.props.map((prop) => prop.name));
+	decl.typeScriptExplicitPropNames = new Set(typedComponent.explicitPropNames);
+	decl.typeScriptPropTypes = new Map(typedComponent.props.map((prop) => [prop.name, prop.type]));
+	decl.typeScriptOptionalProps = new Set(typedComponent.props.filter((prop) => prop.optional).map((prop) => prop.name));
+	decl.typeScriptHasIndexSignature = typedComponent.hasIndexSignature;
+	decl.typeScriptSupportsSxProp = typedComponent.supportsSxProp;
+}
+function defaultExportMatches(component, names) {
+	return component.defaultExport && names.has("default");
+}
+//#endregion
+//#region src/internal/utilities/wrapped-component-interface.ts
+function wrappedComponentInterfaceFor(ctx, componentLocalName) {
+	if (!ctx.adapter.useSxProp) return;
+	const importInfo = ctx.importMap?.get(componentLocalName);
+	if (importInfo) {
+		const typedInterface = importInfo.source.kind === "absolutePath" ? typedComponentInterfaceFor(ctx, importInfo.source.value, importInfo.importedName === "default" ? [componentLocalName, importInfo.importedName] : [importInfo.importedName]) : void 0;
+		const adapterResult = ctx.adapter.wrappedComponentInterface?.({
+			localName: componentLocalName,
+			importSource: importInfo.source.value,
+			importedName: importInfo.importedName,
+			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;
+		}
+		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 typedComponentInterfaceFor(ctx, filePath, componentNames) {
+	const typedComponent = findTypeScriptComponentMetadata(ctx.options.crossFileInfo?.typeScriptMetadata, filePath, componentNames);
+	if (typedComponent?.supportsSxProp) return {
+		acceptsSx: true,
+		sxExcludedProperties: typedComponent.sxExcludedProperties,
+		sxAllowedProperties: typedComponent.sxAllowedProperties
+	};
+}
+function mergeAllowedPropertyLists(first, second) {
+	if (first === void 0) return second === void 0 ? void 0 : [...second];
+	if (second === void 0) return [...first];
+	const secondSet = new Set(second);
+	return first.filter((name) => secondSet.has(name));
+}
+function mergeUniqueStrings(first, second) {
+	return [...new Set([...first ?? [], ...second])];
+}
+//#endregion
 //#region src/internal/transform-steps/analyze-after-emit.ts
 const INLINE_USAGE_THRESHOLD$1 = 1;
+const AS_ATTR = new Set(["as"]);
+const FORWARDED_AS_ATTR = new Set(["forwardedAs"]);
 /**
 * Finalizes wrapper decisions, polymorphic handling, and base flattening after style emission.
 */
@@ -2630,8 +2728,7 @@ function analyzeAfterEmitStep(ctx) {
 			decl.needsWrapperComponent = true;
 			if (decl.base.kind === "intrinsic") decl.isPolymorphicIntrinsicWrapper = true;
 		}
-		const resolverOnlyShouldForwardProp = !!decl.inlinedBaseComponent && !decl.shouldForwardPropFromWithConfig;
-		if (decl.shouldForwardProp && !resolverOnlyShouldForwardProp) decl.needsWrapperComponent = true;
+		if (needsShouldForwardPropWrapper(decl)) decl.needsWrapperComponent = true;
 		if (decl.base.kind === "component") {
 			const baseDecl = declByLocal.get(decl.base.ident);
 			if (baseDecl) {
@@ -2661,8 +2758,7 @@ function analyzeAfterEmitStep(ctx) {
 	});
 	const hasWrapperSemantics = (d) => {
 		if (hasAttrsAsOverride(d.attrsInfo)) return true;
-		const resolverOnlyShouldForwardProp = !!d.inlinedBaseComponent && !d.shouldForwardPropFromWithConfig;
-		if (d.shouldForwardProp && !resolverOnlyShouldForwardProp) return true;
+		if (needsShouldForwardPropWrapper(d)) return true;
 		if (d.isPolymorphicIntrinsicWrapper) return true;
 		return false;
 	};
@@ -2734,6 +2830,16 @@ function analyzeAfterEmitStep(ctx) {
 		if (!canDowngradeStyleFnIntrinsicWrapper(decl, exportedComponents, extendedBy, root, j)) continue;
 		decl.needsWrapperComponent = false;
 	}
+	for (const decl of styledDecls) {
+		if (!canInlineSingleUseSxAwareComponentWrapper({
+			ctx,
+			decl,
+			exportedComponents,
+			extendedBy,
+			wrapperNames
+		})) continue;
+		decl.needsWrapperComponent = false;
+	}
 	ctx.wrapperNames = wrapperNames;
 	return CONTINUE;
 }
@@ -2767,6 +2873,60 @@ function canDowngradeStyleFnIntrinsicWrapper(decl, exportedComponents, extendedB
 	if (decl.receivesClassNameOrStyleInJsx) return false;
 	return true;
 }
+function canInlineSingleUseSxAwareComponentWrapper(args) {
+	const { ctx, decl, exportedComponents, extendedBy, wrapperNames } = args;
+	const { root, j } = ctx;
+	if (!decl.needsWrapperComponent || decl.isCssHelper || decl.isDirectJsxResolution) return false;
+	if (decl.base.kind !== "component") return false;
+	if (exportedComponents.has(decl.localName)) return false;
+	if (wrapperNames.has(decl.localName) && !hasOnlyForwardedAsPolymorphicUsage(root, j, decl)) return false;
+	if (extendedBy.has(decl.localName) || decl.usedAsValue) return false;
+	if (countComponentJsxUsages(root, j, decl.localName) !== INLINE_USAGE_THRESHOLD$1) return false;
+	if (hasJsxNamespaceUsage(root, j, decl.localName)) return false;
+	if (hasSpreadInJsx(root, j, decl.localName)) return false;
+	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;
+}
+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);
+}
+function hasOnlyForwardedAsPolymorphicUsage(root, j, decl) {
+	return decl.base.kind === "component" && hasAnyJsxAttribute(root, j, decl.localName, FORWARDED_AS_ATTR) && !hasAnyJsxAttribute(root, j, decl.localName, AS_ATTR);
+}
+function hasJsxNamespaceUsage(root, j, localName) {
+	let found = false;
+	root.find(j.JSXMemberExpression).forEach((p) => {
+		if (getRootJsxIdentifierName(p.node) === localName) found = true;
+	});
+	return found;
+}
+function hasAnyJsxAttribute(root, j, name, attrNames) {
+	let found = false;
+	const checkOpening = (opening) => {
+		for (const attr of opening.attributes ?? []) {
+			const attrName = attr.name?.name;
+			if (attr.type === "JSXAttribute" && attrName && attrNames.has(attrName)) {
+				found = true;
+				return;
+			}
+		}
+	};
+	root.find(j.JSXElement, { openingElement: { name: {
+		type: "JSXIdentifier",
+		name
+	} } }).forEach((p) => {
+		if (!found) checkOpening(p.node.openingElement);
+	});
+	root.find(j.JSXSelfClosingElement, { name: {
+		type: "JSXIdentifier",
+		name
+	} }).forEach((p) => {
+		if (!found) checkOpening(p.node);
+	});
+	return found;
+}
 //#endregion
 //#region src/internal/analyze-before-emit/exported-components.ts
 function collectExportedComponents(root, j, declByLocal) {
@@ -3023,7 +3183,7 @@ function parseVariantWhenToAst(j, when, booleanProps) {
 	const buildMemberExpr = (raw) => {
 		if (!raw.includes(".")) return null;
 		const parts = raw.split(".").map((part) => part.trim()).filter(Boolean);
-		if (parts.length < 2 || parts.some((part) => !isValidIdentifierName$1(part))) return null;
+		if (parts.length < 2 || parts.some((part) => !isValidIdentifierName(part))) return null;
 		return parts.slice(1).reduce((acc, part) => j.memberExpression(acc, j.identifier(part)), j.identifier(parts[0]));
 	};
 	const parsePropRef = (raw) => {
@@ -3035,14 +3195,14 @@ function parseVariantWhenToAst(j, when, booleanProps) {
 		if (trimmedRaw.includes(".")) {
 			const parts = trimmedRaw.split(".").map((part) => part.trim()).filter(Boolean);
 			const last = parts[parts.length - 1];
-			if (!last || !isValidIdentifierName$1(last)) return {
+			if (!last || !isValidIdentifierName(last)) return {
 				propName: null,
 				expr: j.identifier(trimmedRaw)
 			};
 			const root = parts[0];
 			if (root === "props" || root === "p") {
 				const propRoot = parts[1];
-				if (!propRoot || !isValidIdentifierName$1(propRoot)) return {
+				if (!propRoot || !isValidIdentifierName(propRoot)) return {
 					propName: null,
 					expr: j.identifier(trimmedRaw)
 				};
@@ -3225,6 +3385,27 @@ function buildExtraStylexPropsExprs(j, args) {
 	return result;
 }
 /**
+* Merges adjacent `cond && styleA, !cond && styleB` expressions into
+* `cond ? styleA : styleB` without reordering other style args.
+*/
+function mergeAdjacentComplementaryStyleExprs(j, styleArgs) {
+	const result = [];
+	for (let i = 0; i < styleArgs.length; i++) {
+		const current = styleArgs[i];
+		const next = styleArgs[i + 1];
+		if (next) {
+			const merged = mergeComplementaryLogicalPair(j, current, next);
+			if (merged) {
+				result.push(merged);
+				i++;
+				continue;
+			}
+		}
+		result.push(current);
+	}
+	return result;
+}
+/**
 * Finds the next unconsumed entry in sorted variant entries (as `[when, key]` tuples)
 * that has a complementary "when" condition to the entry at `index`.
 * Used by both intrinsic-simple and component emitters for ternary merging.
@@ -3255,6 +3436,33 @@ function findComplementaryEntry(entries, index, consumed) {
 	if (otherWhen && getPositiveWhen(when, otherWhen) !== null) return next;
 	return null;
 }
+function mergeComplementaryLogicalPair(j, leftExpr, rightExpr) {
+	const left = getConditionalStyleParts(j, leftExpr);
+	const right = getConditionalStyleParts(j, rightExpr);
+	if (!left || !right) return null;
+	const positiveWhen = getPositiveWhen(left.when, right.when);
+	if (!positiveWhen) return null;
+	const isLeftPositive = areEquivalentWhen(left.when, positiveWhen);
+	return j.conditionalExpression(isLeftPositive ? left.cond : right.cond, isLeftPositive ? left.style : right.style, isLeftPositive ? right.style : left.style);
+}
+function getConditionalStyleParts(j, expr) {
+	if (expr.type !== "LogicalExpression" || expr.operator !== "&&") return null;
+	const cond = expr.left;
+	const when = printCondition(j, cond);
+	if (!when) return null;
+	return {
+		when,
+		cond,
+		style: expr.right
+	};
+}
+function printCondition(j, cond) {
+	try {
+		return j(cond).toSource();
+	} catch {
+		return null;
+	}
+}
 /**
 * Detects if two "when" strings differ only in === vs !==.
 * Returns the "===" variant (the positive one) or null if they're not inverses.
@@ -3262,20 +3470,61 @@ function findComplementaryEntry(entries, index, consumed) {
 function areComparisonInverses(a, b) {
 	const aNorm = normalizeWhenForComparison(a);
 	const bNorm = normalizeWhenForComparison(b);
-	const eqOp = "===";
-	const neqOp = "!==";
-	const aHasNeq = aNorm.includes(neqOp);
-	const aHasEq = !aHasNeq && aNorm.includes(eqOp);
-	const bHasNeq = bNorm.includes(neqOp);
-	const bHasEq = !bHasNeq && bNorm.includes(eqOp);
-	if (aHasEq && !aHasNeq && bHasNeq && !bHasEq) {
-		if (aNorm.replace(eqOp, neqOp) === bNorm) return a.trim();
-	}
-	if (bHasEq && !bHasNeq && aHasNeq && !aHasEq) {
-		if (bNorm.replace(eqOp, neqOp) === aNorm) return b.trim();
-	}
+	const aComparison = parseSingleComparison(aNorm);
+	const bComparison = parseSingleComparison(bNorm);
+	if (!aComparison || !bComparison) return null;
+	if (aComparison.left !== bComparison.left || aComparison.right !== bComparison.right) return null;
+	if (aComparison.operator === "===" && bComparison.operator === "!==") return a.trim();
+	if (aComparison.operator === "!==" && bComparison.operator === "===") return b.trim();
 	return null;
 }
+function parseSingleComparison(expr) {
+	const neqIndex = findTopLevelOperator(expr, "!==");
+	const eqIndex = findTopLevelOperator(expr, "===");
+	if (neqIndex >= 0 && eqIndex >= 0 || neqIndex < 0 && eqIndex < 0) return null;
+	const operator = neqIndex >= 0 ? "!==" : "===";
+	const index = neqIndex >= 0 ? neqIndex : eqIndex;
+	const left = expr.slice(0, index);
+	const right = expr.slice(index + operator.length);
+	if (!left || !right || hasTopLevelLogicalOperator(left) || hasTopLevelLogicalOperator(right)) return null;
+	return {
+		left,
+		operator,
+		right
+	};
+}
+function hasTopLevelLogicalOperator(expr) {
+	return findTopLevelOperator(expr, "&&") >= 0 || findTopLevelOperator(expr, "||") >= 0;
+}
+function findTopLevelOperator(expr, operator) {
+	let depth = 0;
+	let quote = null;
+	for (let i = 0; i <= expr.length - operator.length; i++) {
+		const ch = expr[i];
+		if (quote) {
+			if (ch === "\\") {
+				i++;
+				continue;
+			}
+			if (ch === quote) quote = null;
+			continue;
+		}
+		if (ch === "\"" || ch === "'" || ch === "`") {
+			quote = ch;
+			continue;
+		}
+		if (ch === "(") {
+			depth++;
+			continue;
+		}
+		if (ch === ")") {
+			depth--;
+			continue;
+		}
+		if (depth === 0 && expr.slice(i, i + operator.length) === operator) return i;
+	}
+	return -1;
+}
 function isNegationOf(candidate, base) {
 	const candidateNormalized = normalizeWhenForComparison(candidate);
 	const baseNormalized = normalizeWhenForComparison(base);
@@ -3285,7 +3534,34 @@ function isNegationOf(candidate, base) {
 	return normalizeWhenForComparison(candidateNormalized.slice(2, -1)) === baseNormalized;
 }
 function normalizeWhenForComparison(when) {
-	return stripOuterParens(String(when ?? "").replace(/\s+/g, ""));
+	return stripOuterParens(removeWhitespaceOutsideLiterals(String(when ?? "")));
+}
+function removeWhitespaceOutsideLiterals(expr) {
+	let result = "";
+	let quote = null;
+	for (let i = 0; i < expr.length; i++) {
+		const ch = expr[i];
+		if (quote) {
+			result += ch;
+			if (ch === "\\") {
+				const next = expr[i + 1];
+				if (next !== void 0) {
+					result += next;
+					i++;
+				}
+				continue;
+			}
+			if (ch === quote) quote = null;
+			continue;
+		}
+		if (ch === "\"" || ch === "'" || ch === "`") {
+			quote = ch;
+			result += ch;
+			continue;
+		}
+		if (!/\s/.test(ch)) result += ch;
+	}
+	return result;
 }
 function stripOuterParens(expr) {
 	let current = expr;
@@ -3962,17 +4238,17 @@ function registerImports(imports, resolverImports) {
 function isMemberExpression(node) {
 	return isMemberExpressionNode(node);
 }
-/** Returns true for at-rules the codemod can transform (`@media`, `@container`). */
+/** Returns true for at-rules the codemod can transform as StyleX condition keys. */
 function isSupportedAtRule(atRule) {
-	return atRule.startsWith("@media") || atRule.startsWith("@container");
+	return atRule.startsWith("@media") || atRule.startsWith("@container") || atRule.startsWith("@supports");
 }
-/** Finds the first supported at-rule (`@media` or `@container`) in the stack, if any. */
+/** Finds the supported StyleX condition key for an at-rule stack, if representable. */
 function findSupportedAtRule(atRuleStack) {
-	return atRuleStack.find(isSupportedAtRule);
+	return resolveSupportedAtRule(atRuleStack) ?? void 0;
 }
 /** Returns true when any at-rule in the stack cannot be represented by StyleX. */
 function hasUnsupportedAtRule(atRuleStack) {
-	return atRuleStack.some((atRule) => !isSupportedAtRule(atRule));
+	return resolveSupportedAtRule(atRuleStack) === null;
 }
 /**
 * Resolves a media/container at-rule string that may contain `__SC_EXPR_N__` placeholders.
@@ -4048,8 +4324,8 @@ function getMediaFeatureContext(before, after) {
 	} };
 }
 /** Returns true if the key looks like a StyleX style condition (pseudo, media, container). */
-function isStyleConditionKey(key) {
-	return key.startsWith(":") || key.startsWith("::") || key.startsWith("@media") || key.startsWith("@container");
+function isStyleConditionKey$1(key) {
+	return key.startsWith(":") || key.startsWith("::") || key.startsWith("@media") || key.startsWith("@container") || key.startsWith("@supports");
 }
 /**
 * Merges tracked @media values into a base style object as nested StyleX objects.
@@ -4156,6 +4432,20 @@ function parseStaticExprString(expr) {
 	if (trimmed.startsWith("\"") && trimmed.endsWith("\"") || trimmed.startsWith("'") && trimmed.endsWith("'")) return trimmed.slice(1, -1);
 	return null;
 }
+function resolveSupportedAtRule(atRuleStack) {
+	if (atRuleStack.length === 0) return;
+	if (atRuleStack.some((atRule) => !isSupportedAtRule(atRule))) return null;
+	if (atRuleStack.length === 1) return atRuleStack[0];
+	if (atRuleStack.every((atRule) => atRule.startsWith("@supports"))) return combineSupportsAtRules(atRuleStack);
+	return null;
+}
+function combineSupportsAtRules(atRuleStack) {
+	return `@supports ${atRuleStack.map((atRule) => parenthesizeSupportsCondition(atRule.slice(9).trim())).join(" and ")}`;
+}
+function parenthesizeSupportsCondition(condition) {
+	if (condition.includes(" and ") || condition.includes(" or ")) return `(${condition})`;
+	return condition.startsWith("(") && condition.endsWith(")") ? condition : `(${condition})`;
+}
 /**
 * Recursively walk an AST tree and return `true` if the predicate matches any node.
 * Skips `loc` and `comments` keys. Short-circuits on first match.
@@ -4542,42 +4832,1053 @@ function buildChildStyleObjectList(childKeys, resolvedStyleObjects) {
 	return childStyleObjects;
 }
 //#endregion
-//#region src/internal/utilities/wrapped-component-interface.ts
-function wrappedComponentInterfaceFor(ctx, componentLocalName) {
-	if (!ctx.adapter.useSxProp) return;
+//#region src/internal/utilities/style-composition-plan.ts
+function buildStyleKeySequence(ctx, decl, options) {
+	const entries = [];
+	const afterBase = new Set(decl.extraStyleKeysAfterBase ?? []);
+	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"
+	});
+	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"
+	});
+	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(...buildEnumVariantEntries(decl));
+	entries.push(...buildCallSiteCombinedEntries(decl));
+	entries.push(...buildPromotedStyleEntries(decl));
+	if (decl.adjacentSiblingStyleKey) entries.push({
+		styleKey: decl.adjacentSiblingStyleKey,
+		patchable: true,
+		source: "adjacent"
+	});
+	return entries;
+}
+function buildExtraStylexPropsArgEntries(decl) {
+	return (decl.extraStylexPropsArgs ?? []).map((_, index) => ({
+		styleKey: `${decl.styleKey}ExtraStylexPropsArg${index}`,
+		patchable: false,
+		contributesDynamic: true,
+		source: "propsArg"
+	}));
+}
+function localBaseStyleKeys(ctx, decl) {
+	if (decl.extendsStyleKey) return [decl.extendsStyleKey];
+	const keys = [];
+	const visited = new Set([decl.localName]);
+	let currentBase = decl.base;
+	while (currentBase.kind === "component") {
+		if (visited.has(currentBase.ident)) break;
+		visited.add(currentBase.ident);
+		const baseDecl = ctx.declByLocal?.get(currentBase.ident);
+		if (!baseDecl || baseDecl.skipTransform) break;
+		keys.push(baseDecl.styleKey);
+		currentBase = baseDecl.base;
+	}
+	return keys.reverse();
+}
+function buildVariantAndStyleFnEntries(decl) {
+	const variantEntries = Object.entries(decl.variantStyleKeys ?? {}).map(([when, styleKey]) => ({
+		when,
+		entry: {
+			styleKey,
+			patchable: true,
+			contributes: false,
+			source: "variant"
+		}
+	}));
+	const styleFnEntries = (decl.styleFnFromProps ?? []).map((styleFn) => ({
+		sourceOrder: styleFn.sourceOrder,
+		entry: {
+			styleKey: styleFn.fnKey,
+			patchable: true,
+			source: "styleFn"
+		}
+	}));
+	if (!(Object.keys(decl.variantSourceOrder ?? {}).length > 0 || styleFnEntries.some((entry) => entry.sourceOrder !== void 0))) return {
+		immediate: [...variantEntries.map((entry) => entry.entry), ...styleFnEntries.map((entry) => entry.entry)],
+		ordered: []
+	};
+	const immediate = [...variantEntries.filter((entry) => decl.variantSourceOrder?.[entry.when] === void 0).map((entry) => entry.entry), ...styleFnEntries.filter((entry) => entry.sourceOrder === void 0).map((entry) => entry.entry)];
+	const ordered = [];
+	let index = 0;
+	for (const variant of variantEntries) {
+		const order = decl.variantSourceOrder?.[variant.when];
+		if (order === void 0) continue;
+		ordered.push({
+			order,
+			index,
+			entry: variant.entry
+		});
+		index += 1;
+	}
+	for (const styleFn of styleFnEntries) {
+		if (styleFn.sourceOrder === void 0) continue;
+		ordered.push({
+			order: styleFn.sourceOrder,
+			index,
+			entry: styleFn.entry
+		});
+		index += 1;
+	}
+	return {
+		immediate,
+		ordered
+	};
+}
+function buildVariantDimensionEntries(decl) {
+	const immediate = [];
+	const ordered = [];
+	let index = 0;
+	for (const dimension of decl.variantDimensions ?? []) {
+		const entries = Object.entries(dimension.variants).map(([variantKey, styleObj]) => ({
+			styleKey: `${dimension.variantObjectName}.${variantKey}`,
+			styleObj,
+			patchable: true,
+			contributes: false,
+			source: "variant"
+		}));
+		if (dimension.fallbackFnKey) entries.push({
+			styleKey: dimension.fallbackFnKey,
+			patchable: true,
+			source: "styleFn"
+		});
+		if (dimension.sourceOrder === void 0) {
+			immediate.push(...entries);
+			continue;
+		}
+		for (const entry of entries) {
+			ordered.push({
+				order: dimension.sourceOrder,
+				index,
+				entry
+			});
+			index += 1;
+		}
+	}
+	return {
+		immediate,
+		ordered
+	};
+}
+function mergeOrderedEntries$1(groups) {
+	return groups.flat().sort((a, b) => a.order - b.order || a.index - b.index).map((orderedEntry) => orderedEntry.entry);
+}
+function buildPseudoExpandEntries(decl) {
+	return (decl.pseudoExpandSelectors ?? []).map((entry) => ({
+		styleKey: entry.styleKey,
+		patchable: true,
+		source: "pseudo"
+	}));
+}
+function buildThemeEntries(decl) {
+	const entries = [];
+	for (const hook of decl.needsUseThemeHook ?? []) {
+		if (hook.trueStyleKey) entries.push({
+			styleKey: hook.trueStyleKey,
+			patchable: true,
+			contributes: false,
+			source: "theme"
+		});
+		if (hook.falseStyleKey) entries.push({
+			styleKey: hook.falseStyleKey,
+			patchable: true,
+			contributes: false,
+			source: "theme"
+		});
+	}
+	return entries;
+}
+function buildPseudoAliasEntries(decl) {
+	return (decl.pseudoAliasSelectors ?? []).flatMap((entry) => entry.styleKeys.map((styleKey) => ({
+		styleKey,
+		patchable: true,
+		contributes: false,
+		source: "pseudo"
+	})));
+}
+function buildCompoundVariantEntries(decl) {
+	return (decl.compoundVariants ?? []).flatMap((entry) => {
+		if (entry.kind === "3branch") return [
+			entry.outerTruthyKey,
+			entry.innerTruthyKey,
+			entry.innerFalsyKey
+		].map((styleKey) => ({
+			styleKey,
+			patchable: true,
+			contributes: false,
+			source: "variant"
+		}));
+		return [
+			entry.outerTruthyInnerTruthyKey,
+			entry.outerTruthyInnerFalsyKey,
+			entry.outerFalsyInnerTruthyKey,
+			entry.outerFalsyInnerFalsyKey
+		].map((styleKey) => ({
+			styleKey,
+			patchable: true,
+			contributes: false,
+			source: "variant"
+		}));
+	});
+}
+function buildAttrWrapperEntries(decl) {
+	const attrWrapper = decl.attrWrapper;
+	if (!attrWrapper) return [];
+	return [
+		attrWrapper.checkboxKey,
+		attrWrapper.radioKey,
+		attrWrapper.readonlyKey,
+		attrWrapper.externalKey,
+		attrWrapper.httpsKey,
+		attrWrapper.pdfKey
+	].filter((styleKey) => typeof styleKey === "string").map((styleKey) => ({
+		styleKey,
+		patchable: true,
+		source: "attr"
+	}));
+}
+function buildCallSiteCombinedEntries(decl) {
+	return (decl.callSiteCombinedStyles ?? []).map((entry) => ({
+		styleKey: entry.styleKey,
+		patchable: true,
+		source: "combined"
+	}));
+}
+function buildPromotedStyleEntries(decl) {
+	return (decl.promotedStyleProps ?? []).filter((entry) => !entry.mergeIntoBase).map((entry) => ({
+		styleKey: entry.styleKey,
+		patchable: true,
+		source: "promoted"
+	}));
+}
+function buildEnumVariantEntries(decl) {
+	const enumVariant = decl.enumVariant;
+	if (!enumVariant) return [];
+	return [{
+		styleKey: enumVariant.baseKey,
+		patchable: true,
+		source: "enum"
+	}, ...enumVariant.cases.map((entry) => ({
+		styleKey: entry.styleKey,
+		patchable: true,
+		source: "enum"
+	}))];
+}
+//#endregion
+//#region src/internal/utilities/conditional-style-defaults.ts
+const CONDITIONAL_DEFAULT_WARNING = "Conditional StyleX default would override an unproven earlier style for the same property";
+function guardGeneratedConditionalDefaults(ctx, styledDecls) {
+	if (!ctx.resolvedStyleObjects) return "ok";
+	for (const decl of styledDecls) {
+		if (decl.skipTransform || decl.isCssHelper) continue;
+		if (patchConditionalDefaultsForSequence({
+			ctx,
+			decl,
+			entries: buildStyleKeySequence(ctx, decl)
+		}) === "bail") return "bail";
+	}
+	return "ok";
+}
+function propertiesWithNullConditionalDefault(styleObj) {
+	const props = [];
+	for (const [prop, value] of Object.entries(styleObj)) {
+		if (isMetadataOrConditionKey(prop) || !isPlainStyleObject$1(value)) continue;
+		if (isConditionalStyleMap(value) && value.default === null) props.push(prop);
+	}
+	return props;
+}
+function propertiesWithUnsafeNullConditionalDefault(styleObj) {
+	const props = new Set(propertiesWithNullConditionalDefault(styleObj));
+	for (const [prop, value] of Object.entries(styleObj)) {
+		if (isMetadataOrConditionKey(prop) || !isPlainStyleObject$1(value)) continue;
+		if (hasNestedNullConditionalDefault(value)) props.add(prop);
+	}
+	return [...props];
+}
+function patchNullConditionalDefaultsForProp(styleObj, prop, earlier) {
+	const value = styleObj[prop];
+	if (!isPlainStyleObject$1(value) || !isConditionalStyleMap(value)) return "safe";
+	let inheritedDefault = inferDefaultFromValue(value);
+	if (value.default === null && earlier.kind === "static" && earlier.value !== null) {
+		value.default = earlier.value;
+		inheritedDefault = earlier;
+	} else if (value.default === null && earlier.kind === "dynamic") return "bail";
+	else if (value.default === null) inheritedDefault = earlier;
+	if (!hasNestedNullConditionalDefault(value)) return "safe";
+	if (inheritedDefault.kind === "static" && inheritedDefault.value !== null) {
+		patchNestedNullConditionalDefaults(value, inheritedDefault.value);
+		return "patched";
+	}
+	return inheritedDefault.kind === "dynamic" ? "bail" : "safe";
+}
+function patchConditionalDefaultsForSequence(args) {
+	const { ctx, decl, entries } = args;
+	const defaults = /* @__PURE__ */ new Map();
+	let hasDynamicUnknownContributor = false;
+	for (const entry of entries) {
+		const source = entry.styleObj ?? ctx.resolvedStyleObjects?.get(entry.styleKey);
+		if (entry.patchable && isPlainStyleObject$1(source)) for (const prop of propertiesWithUnsafeNullConditionalDefault(source)) {
+			const patchResult = patchNullConditionalDefaultsForProp(source, prop, hasDynamicUnknownContributor ? { kind: "dynamic" } : defaults.get(prop) ?? { kind: "absent" });
+			if (patchResult === "patched" || patchResult === "safe") continue;
+			ctx.warnings.push({
+				severity: "warning",
+				type: CONDITIONAL_DEFAULT_WARNING,
+				loc: decl.loc,
+				context: {
+					component: decl.localName,
+					styleKey: entry.styleKey,
+					property: prop,
+					source: entry.source,
+					reason: "an earlier generated style for this property can vary at runtime",
+					todo: `TODO: make the ${prop} default explicit in ${entry.styleKey}, or keep the conditional override in the same dynamic style function as the base value.`
+				}
+			});
+			return "bail";
+		}
+		else if (entry.patchable) for (const prop of functionPropertiesWithNullConditionalDefault$1(source)) {
+			if ((defaults.get(prop) ?? { kind: "absent" }).kind === "absent") continue;
+			ctx.warnings.push({
+				severity: "warning",
+				type: CONDITIONAL_DEFAULT_WARNING,
+				loc: decl.loc,
+				context: {
+					component: decl.localName,
+					styleKey: entry.styleKey,
+					property: prop,
+					source: entry.source,
+					reason: "a generated dynamic style function would clear an earlier default",
+					todo: `TODO: merge the ${prop} base value into ${entry.styleKey}'s dynamic conditional default.`
+				}
+			});
+			return "bail";
+		}
+		if (entry.contributesDynamic) {
+			hasDynamicUnknownContributor = true;
+			continue;
+		}
+		if (entry.contributes !== false) for (const [prop, inference] of inferDefaultContributions(source)) if (inference.kind === "absent") defaults.delete(prop);
+		else defaults.set(prop, inference);
+	}
+	return "ok";
+}
+function inferDefaultContributions(source) {
+	if (isPlainStyleObject$1(source)) return inferStyleObjectContributions(source);
+	return inferStyleFunctionContributions(source);
+}
+function inferStyleObjectContributions(styleObj) {
+	const contributions = /* @__PURE__ */ new Map();
+	for (const [prop, value] of Object.entries(styleObj)) {
+		if (isMetadataOrConditionKey(prop)) continue;
+		contributions.set(prop, inferDefaultFromValue(value));
+	}
+	return contributions;
+}
+function inferStyleFunctionContributions(source) {
+	const returnedObject = readFunctionReturnedObject$1(source);
+	const contributions = /* @__PURE__ */ new Map();
+	if (!returnedObject) return contributions;
+	for (const property of getObjectProperties$1(returnedObject)) {
+		const key = readPropertyKey$1(property);
+		if (!key || isMetadataOrConditionKey(key)) continue;
+		contributions.set(key, { kind: "dynamic" });
+	}
+	return contributions;
+}
+function functionPropertiesWithNullConditionalDefault$1(source) {
+	const returnedObject = readFunctionReturnedObject$1(source);
+	if (!returnedObject) return [];
+	const props = [];
+	for (const property of getObjectProperties$1(returnedObject)) {
+		const key = readPropertyKey$1(property);
+		if (!key || isMetadataOrConditionKey(key)) continue;
+		if (astObjectHasNullConditionalDefault(property.value)) props.push(key);
+	}
+	return props;
+}
+function inferDefaultFromValue(value) {
+	if (isStaticStyleValue(value)) return value === null ? { kind: "absent" } : {
+		kind: "static",
+		value
+	};
+	if (isPlainStyleObject$1(value) && isConditionalStyleMap(value)) {
+		const defaultValue = value.default;
+		return isStaticStyleValue(defaultValue) ? defaultValue === null ? { kind: "absent" } : {
+			kind: "static",
+			value: defaultValue
+		} : { kind: "dynamic" };
+	}
+	return { kind: "dynamic" };
+}
+function isConditionalStyleMap(value) {
+	return Object.keys(value).some((key) => key === "default" || isStyleConditionKey(key));
+}
+function astObjectHasNullConditionalDefault(value) {
+	if (!isObjectExpression$2(value)) return false;
+	let hasCondition = false;
+	let hasNullDefault = false;
+	for (const property of getObjectProperties$1(value)) {
+		const key = readPropertyKey$1(property);
+		if (!key) continue;
+		hasCondition ||= key === "default" || isStyleConditionKey(key);
+		if (key === "default" && isNullLiteral$2(property.value)) hasNullDefault = true;
+		if (isObjectExpression$2(property.value) && astObjectHasNullConditionalDefault(property.value)) return true;
+	}
+	return hasCondition && hasNullDefault;
+}
+function hasNestedNullConditionalDefault(value) {
+	for (const [key, nested] of Object.entries(value)) {
+		if (key === "__computedKeys" && computedEntriesHaveNullConditionalDefault(nested)) return true;
+		if (key === "default" || !isPlainStyleObject$1(nested)) continue;
+		if (isConditionalStyleMap(nested) && nested.default === null) return true;
+		if (hasNestedNullConditionalDefault(nested)) return true;
+	}
+	return false;
+}
+function patchNestedNullConditionalDefaults(value, inheritedDefault) {
+	for (const [key, nested] of Object.entries(value)) {
+		if (key === "__computedKeys") {
+			patchComputedEntryDefaults(nested, inheritedDefault);
+			continue;
+		}
+		if (key === "default" || !isPlainStyleObject$1(nested)) continue;
+		let nextDefault = inheritedDefault;
+		if (isConditionalStyleMap(nested)) if (nested.default === null) nested.default = inheritedDefault;
+		else {
+			const nestedDefault = inferDefaultFromValue(nested);
+			if (nestedDefault.kind === "static" && nestedDefault.value !== null) nextDefault = nestedDefault.value;
+		}
+		patchNestedNullConditionalDefaults(nested, nextDefault);
+	}
+}
+function computedEntriesHaveNullConditionalDefault(value) {
+	return getComputedEntryValues(value).some((entryValue) => isPlainStyleObject$1(entryValue) && (isConditionalStyleMap(entryValue) && entryValue.default === null || hasNestedNullConditionalDefault(entryValue)) || astObjectHasNullConditionalDefault(entryValue));
+}
+function patchComputedEntryDefaults(value, inheritedDefault) {
+	for (const entryValue of getComputedEntryValues(value)) {
+		if (isObjectExpression$2(entryValue)) {
+			patchAstObjectNullConditionalDefaults(entryValue, inheritedDefault);
+			continue;
+		}
+		if (!isPlainStyleObject$1(entryValue)) continue;
+		let nextDefault = inheritedDefault;
+		if (isConditionalStyleMap(entryValue)) if (entryValue.default === null) entryValue.default = inheritedDefault;
+		else {
+			const entryDefault = inferDefaultFromValue(entryValue);
+			if (entryDefault.kind === "static" && entryDefault.value !== null) nextDefault = entryDefault.value;
+		}
+		patchNestedNullConditionalDefaults(entryValue, nextDefault);
+	}
+}
+function getComputedEntryValues(value) {
+	if (!Array.isArray(value)) return [];
+	return value.map((entry) => isAstRecord(entry) ? entry.value : void 0);
+}
+function patchAstObjectNullConditionalDefaults(value, inheritedDefault) {
+	let nextDefault = inheritedDefault;
+	for (const property of getObjectProperties$1(value)) {
+		if (readPropertyKey$1(property) === "default") {
+			if (isNullLiteral$2(property.value)) property.value = astLiteral(inheritedDefault);
+			else {
+				const staticDefault = readStaticAstLiteral(property.value);
+				if (staticDefault !== void 0 && staticDefault !== null) nextDefault = staticDefault;
+			}
+			continue;
+		}
+		if (isObjectExpression$2(property.value)) patchAstObjectNullConditionalDefaults(property.value, nextDefault);
+	}
+}
+function astLiteral(value) {
+	return {
+		type: "Literal",
+		value
+	};
+}
+function readStaticAstLiteral(value) {
+	if (!isAstRecord(value)) return;
+	if (value.type === "StringLiteral" || value.type === "NumericLiteral" || value.type === "BooleanLiteral" || value.type === "Literal") return typeof value.value === "string" || typeof value.value === "number" || typeof value.value === "boolean" || value.value === null ? value.value : void 0;
+	if (value.type === "NullLiteral") return null;
+}
+function isStyleConditionKey(key) {
+	return key.startsWith(":") || key.startsWith("@");
+}
+function isMetadataOrConditionKey(key) {
+	return key.startsWith("__") || isStyleConditionKey(key);
+}
+function isStaticStyleValue(value) {
+	return typeof value === "string" || typeof value === "number" || typeof value === "boolean" || value === null;
+}
+function isPlainStyleObject$1(value) {
+	return !!value && typeof value === "object" && !Array.isArray(value) && !isAstNode(value);
+}
+function readFunctionReturnedObject$1(node) {
+	if (!isAstRecord(node)) return null;
+	if (node.type !== "ArrowFunctionExpression" && node.type !== "FunctionExpression" && node.type !== "FunctionDeclaration") return null;
+	const body = node.body;
+	if (isObjectExpression$2(body)) return body;
+	if (!isAstRecord(body) || body.type !== "BlockStatement") return null;
+	for (const statement of Array.isArray(body.body) ? body.body : []) if (isAstRecord(statement) && statement.type === "ReturnStatement" && isObjectExpression$2(statement.argument)) return statement.argument;
+	return null;
+}
+function getObjectProperties$1(node) {
+	return Array.isArray(node.properties) ? node.properties.filter(isAstRecord) : [];
+}
+function readPropertyKey$1(property) {
+	const key = property.key;
+	if (isIdentifier$1(key)) return key.name;
+	if (isAstRecord(key) && (key.type === "StringLiteral" || key.type === "Literal")) return typeof key.value === "string" ? key.value : null;
+	return null;
+}
+function isObjectExpression$2(node) {
+	return isAstRecord(node) && node.type === "ObjectExpression";
+}
+function isIdentifier$1(node) {
+	return isAstRecord(node) && node.type === "Identifier" && typeof node.name === "string";
+}
+function isNullLiteral$2(node) {
+	return isAstRecord(node) && (node.type === "NullLiteral" || node.type === "Literal" && node.value === null);
+}
+function isAstRecord(value) {
+	return !!value && typeof value === "object";
+}
+//#endregion
+//#region src/internal/utilities/forwarded-sx-defaults.ts
+/**
+* Guards conditional StyleX defaults forwarded through wrapped component `sx`.
+* Core concepts: sx composition, conditional defaults, and static base proofs.
+*/
+function guardForwardedSxConditionalDefaults(ctx, styledDecls) {
+	if (!ctx.adapter.useSxProp || !ctx.resolvedStyleObjects) return "ok";
+	for (const decl of styledDecls) {
+		if (decl.base.kind !== "component" || !wrappedComponentForwardsSx(ctx, decl.base.ident)) continue;
+		for (const entry of buildStyleKeySequence(ctx, decl, { includeLocalBase: false })) {
+			const styleObj = entry.styleObj ?? ctx.resolvedStyleObjects.get(entry.styleKey);
+			if (!isRecord(styleObj)) continue;
+			if (guardForwardedSxStyleObject(ctx, decl, styleObj) === "bail") return "bail";
+			for (const prop of functionPropertiesWithNullConditionalDefault(styleObj)) {
+				if (applyForwardedSxDefault({
+					ctx,
+					decl,
+					prop,
+					applyInference: (inferred) => {
+						if (inferred.kind === "static") {
+							setFunctionConditionalDefault(styleObj, prop, inferred.value);
+							return "patched";
+						}
+						return inferred.kind === "absent" ? "safe" : "bail";
+					}
+				}) === "ok") continue;
+				return "bail";
+			}
+		}
+	}
+	return "ok";
+}
+function guardForwardedSxStyleObject(ctx, decl, styleObj) {
+	for (const prop of propertiesWithUnsafeNullConditionalDefault(styleObj)) if (applyForwardedSxDefault({
+		ctx,
+		decl,
+		prop,
+		applyInference: (inferred) => {
+			if (inferred.kind !== "static" && inferred.kind !== "absent") return "bail";
+			return patchNullConditionalDefaultsForProp(styleObj, prop, toDefaultInference(inferred));
+		}
+	}) !== "ok") return "bail";
+	return "ok";
+}
+function applyForwardedSxDefault(args) {
+	const { ctx, decl, prop, applyInference } = args;
+	const wrappedComponent = decl.base.kind === "component" ? decl.base.ident : "";
+	const inferred = inferWrappedComponentSxProperty(ctx, wrappedComponent, prop);
+	const applied = applyInference(inferred);
+	if (applied === "patched" || applied === "safe") return "ok";
+	ctx.warnings.push({
+		severity: "warning",
+		type: FORWARDED_SX_DEFAULT_WARNING,
+		loc: decl.loc,
+		context: {
+			localName: decl.localName,
+			wrappedComponent,
+			property: prop,
+			reason: inferred.kind === "variable" ? "wrapped component base property can vary before sx is applied" : "wrapped component base default could not be proven",
+			todo: `TODO: set an explicit default for ${prop} or avoid forwarding this conditional override through sx.`
+		}
+	});
+	return "bail";
+}
+function toDefaultInference(inferred) {
+	if (inferred.kind === "static") return inferred;
+	if (inferred.kind === "absent") return inferred;
+	return { kind: "dynamic" };
+}
+const FORWARDED_SX_DEFAULT_WARNING = "Forwarded sx conditional default would override an unproven wrapped component base style";
+function wrappedComponentForwardsSx(ctx, componentLocalName) {
+	return wrappedComponentInterfaceFor(ctx, componentLocalName)?.acceptsSx === true;
+}
+function inferWrappedComponentSxProperty(ctx, componentLocalName, prop) {
+	const source = readComponentSource(ctx, componentLocalName);
+	if (!source) return { kind: "unknown" };
+	const root = parseSource(ctx.api.jscodeshift, source.source);
+	if (!root) return { kind: "unknown" };
+	const styleMaps = collectStylexCreateMaps(root.ast);
+	const component = findComponentFunction(root.ast, source.componentNames);
+	if (!component) return { kind: "unknown" };
+	const observations = collectSxCompositionObservations(component, collectSxBindings(component), styleMaps, prop);
+	if (observations.length === 0) return { kind: "unknown" };
+	return mergePropertyInferences(observations);
+}
+function readComponentSource(ctx, componentLocalName) {
 	const importInfo = ctx.importMap?.get(componentLocalName);
-	if (importInfo) {
-		const typedInterface = importInfo.source.kind === "absolutePath" ? typedComponentInterfaceFor(ctx, importInfo.source.value, importInfo.importedName === "default" ? [componentLocalName, importInfo.importedName] : [importInfo.importedName]) : void 0;
-		const adapterResult = ctx.adapter.wrappedComponentInterface?.({
-			localName: componentLocalName,
-			importSource: importInfo.source.value,
-			importedName: importInfo.importedName,
-			filePath: ctx.file.path
+	if (!importInfo) return {
+		source: ctx.file.source,
+		componentNames: [componentLocalName]
+	};
+	const absolutePath = importInfo.source.kind === "absolutePath" ? importInfo.source.value : isRelativeSpecifier(importInfo.source.value) ? resolve(dirname(ctx.file.path), importInfo.source.value) : null;
+	if (!absolutePath) return null;
+	const source = readSourceFile(ctx, absolutePath);
+	if (!source) return null;
+	return {
+		source,
+		componentNames: importInfo.importedName === "default" ? [componentLocalName, importInfo.importedName] : [importInfo.importedName]
+	};
+}
+function readSourceFile(ctx, absolutePath) {
+	for (const candidate of sourcePathCandidates(absolutePath)) {
+		const override = ctx.options.transformedFileSources?.get(toRealPath(candidate));
+		if (override !== void 0) return override;
+		if (existsSync(candidate)) try {
+			return readFileSync(candidate, "utf8");
+		} catch {
+			continue;
+		}
+	}
+	return null;
+}
+function sourcePathCandidates(absolutePath) {
+	return [
+		"",
+		".tsx",
+		".ts",
+		".jsx",
+		".js",
+		"/index.tsx",
+		"/index.ts",
+		"/index.jsx",
+		"/index.js"
+	].map((ext) => absolutePath + ext);
+}
+function parseSource(jscodeshift, source) {
+	try {
+		return { ast: jscodeshift.withParser("tsx")(source).get().node };
+	} catch {
+		return null;
+	}
+}
+function collectStylexCreateMaps(ast) {
+	const maps = /* @__PURE__ */ new Map();
+	walk(ast, (node) => {
+		if (node.type !== "VariableDeclarator") return;
+		const id = node.id;
+		const init = node.init;
+		if (!isIdentifier(id) || !isRecord(init) || !isStylexCreateCall$1(init)) return;
+		const stylesArg = getCallArguments(init)[0];
+		if (!isObjectExpression$1(stylesArg)) return;
+		maps.set(id.name, readStyleEntries(stylesArg));
+	});
+	return maps;
+}
+function readStyleEntries(stylexCreateArg) {
+	const entries = /* @__PURE__ */ new Map();
+	for (const property of getObjectProperties(stylexCreateArg)) {
+		const key = readPropertyKey(property);
+		const value = property.value;
+		if (!key || !value) continue;
+		if (isObjectExpression$1(value)) {
+			entries.set(key, {
+				kind: "object",
+				props: readStyleObjectProps(value)
+			});
+			continue;
+		}
+		const returnedObject = readFunctionReturnedObject(value);
+		if (returnedObject) entries.set(key, {
+			kind: "function",
+			props: new Set(readStyleObjectProps(returnedObject).keys())
 		});
-		if (adapterResult !== void 0) {
-			if (adapterResult.acceptsSx && typedInterface?.sxExcludedProperties?.length) return {
-				...adapterResult,
-				sxExcludedProperties: mergeUniqueStrings(adapterResult.sxExcludedProperties, typedInterface.sxExcludedProperties)
-			};
-			return adapterResult;
+	}
+	return entries;
+}
+function readStyleObjectProps(styleObject) {
+	const props = /* @__PURE__ */ new Map();
+	for (const property of getObjectProperties(styleObject)) {
+		const key = readPropertyKey(property);
+		if (!key || !property.value) continue;
+		const value = readStaticStyleValue(property.value);
+		props.set(key, value.found ? {
+			kind: "static",
+			value: value.value
+		} : { kind: "dynamic" });
+	}
+	return props;
+}
+function readStaticStyleValue(node) {
+	if (!isRecord(node)) return { found: false };
+	if (node.type === "StringLiteral" || node.type === "NumericLiteral" || node.type === "BooleanLiteral") return {
+		found: true,
+		value: node.value
+	};
+	if (node.type === "Literal") {
+		const value = node.value;
+		return typeof value === "string" || typeof value === "number" || typeof value === "boolean" || value === null ? {
+			found: true,
+			value
+		} : { found: false };
+	}
+	if (node.type === "NullLiteral") return {
+		found: true,
+		value: null
+	};
+	if (isObjectExpression$1(node)) {
+		const defaultProp = getObjectProperties(node).find((prop) => readPropertyKey(prop) === "default");
+		return defaultProp?.value ? readStaticStyleValue(defaultProp.value) : { found: false };
+	}
+	return { found: false };
+}
+function readFunctionReturnedObject(node) {
+	if (!isRecord(node)) return null;
+	if (node.type !== "ArrowFunctionExpression" && node.type !== "FunctionExpression" && node.type !== "FunctionDeclaration") return null;
+	const body = node.body;
+	if (isObjectExpression$1(body)) return body;
+	if (!isRecord(body) || body.type !== "BlockStatement") return null;
+	const statements = Array.isArray(body.body) ? body.body : [];
+	for (const statement of statements) if (isRecord(statement) && statement.type === "ReturnStatement" && isObjectExpression$1(statement.argument)) return statement.argument;
+	return null;
+}
+function functionPropertiesWithNullConditionalDefault(node) {
+	const returnedObject = readFunctionReturnedObject(node);
+	if (!returnedObject) return [];
+	const props = [];
+	for (const property of getObjectProperties(returnedObject)) {
+		const key = readPropertyKey(property);
+		if (!key || !isObjectExpression$1(property.value)) continue;
+		if (objectExpressionHasNullDefault(property.value)) props.push(key);
+	}
+	return props;
+}
+function setFunctionConditionalDefault(node, propName, value) {
+	const returnedObject = readFunctionReturnedObject(node);
+	if (!returnedObject) return;
+	for (const property of getObjectProperties(returnedObject)) {
+		if (readPropertyKey(property) !== propName || !isObjectExpression$1(property.value)) continue;
+		setObjectExpressionDefault(property.value, value);
+	}
+}
+function objectExpressionHasNullDefault(node) {
+	return getObjectProperties(node).some((property) => {
+		if (readPropertyKey(property) !== "default") return false;
+		return isNullLiteral$1(property.value);
+	});
+}
+function setObjectExpressionDefault(node, value) {
+	for (const property of getObjectProperties(node)) if (readPropertyKey(property) === "default") property.value = staticStyleValueToAst(value);
+}
+function staticStyleValueToAst(value) {
+	return value === null ? {
+		type: "Literal",
+		value: null
+	} : {
+		type: "Literal",
+		value
+	};
+}
+function findComponentFunction(ast, componentNames) {
+	const names = new Set([...componentNames, ...defaultExportedIdentifierNames(ast)]);
+	let found = null;
+	walk(ast, (node) => {
+		if (found) return;
+		if (node.type === "ExportDefaultDeclaration") {
+			const declaration = node.declaration;
+			if (isFunctionLike$1(declaration)) {
+				const declarationId = declaration.id;
+				if (names.has("default") || isIdentifier(declarationId) && names.has(declarationId.name)) found = declaration;
+				return;
+			}
+			if (isIdentifier(declaration)) names.add(declaration.name);
+			return;
 		}
-		return typedInterface;
+		if (node.type === "FunctionDeclaration" && isIdentifier(node.id) && names.has(node.id.name)) {
+			found = node;
+			return;
+		}
+		if (node.type !== "VariableDeclarator" || !isIdentifier(node.id) || !names.has(node.id.name)) return;
+		if (isFunctionLike$1(node.init)) found = node.init;
+	});
+	return found;
+}
+function defaultExportedIdentifierNames(ast) {
+	const names = [];
+	walk(ast, (node) => {
+		if (node.type !== "ExportDefaultDeclaration") return;
+		const declaration = node.declaration;
+		if (isIdentifier(declaration)) names.push(declaration.name);
+	});
+	return names;
+}
+function collectSxBindings(component) {
+	const localNames = new Set(["sx"]);
+	const propsNames = /* @__PURE__ */ new Set();
+	for (const param of getFunctionParams(component)) if (isIdentifier(param)) propsNames.add(param.name);
+	else if (isObjectPattern(param)) collectObjectPatternBinding(param, "sx", localNames);
+	walk(component.body, (node) => {
+		if (node.type !== "VariableDeclarator" || !isObjectPattern(node.id) || !isIdentifier(node.init)) return;
+		if (propsNames.has(node.init.name)) collectObjectPatternBinding(node.id, "sx", localNames);
+	});
+	return {
+		localNames,
+		propsNames
+	};
+}
+function collectObjectPatternBinding(pattern, propName, out) {
+	const properties = Array.isArray(pattern.properties) ? pattern.properties : [];
+	for (const property of properties) {
+		if (!isRecord(property) || property.type !== "Property") continue;
+		if (readPropertyKey(property) !== propName) continue;
+		const value = unwrapAssignmentPattern(property.value);
+		if (isIdentifier(value)) out.add(value.name);
 	}
-	return typedComponentInterfaceFor(ctx, ctx.file.path, [componentLocalName]);
 }
-function typedComponentInterfaceFor(ctx, filePath, componentNames) {
-	const typedComponent = findTypeScriptComponentMetadata(ctx.options.crossFileInfo?.typeScriptMetadata, filePath, componentNames);
-	if (typedComponent?.supportsSxProp) return {
-		acceptsSx: true,
-		sxExcludedProperties: typedComponent.sxExcludedProperties
+function collectSxCompositionObservations(component, sxBindings, styleMaps, prop) {
+	const observations = [];
+	walkTopLevelComponentBody(component.body, (node) => {
+		if (node.type === "CallExpression" && isStylexPropsCall(node)) {
+			const beforeSx = argsBeforeSx(getCallArguments(node), sxBindings);
+			if (beforeSx) observations.push(analyzeStyleSequence(beforeSx, styleMaps, prop));
+			return;
+		}
+		if (node.type === "CallExpression" && isMergedSxCall(node)) {
+			const firstArg = getCallArguments(node)[0];
+			const beforeSx = argsBeforeSx(isArrayExpression(firstArg) ? getArrayElements(firstArg) : [], sxBindings);
+			if (beforeSx) observations.push(analyzeStyleSequence(beforeSx, styleMaps, prop));
+			return;
+		}
+		if (node.type === "JSXAttribute" && getJsxAttributeName(node) === "sx") {
+			const expression = readJsxExpression(node.value);
+			const beforeSx = argsBeforeSx(isArrayExpression(expression) ? getArrayElements(expression) : [expression], sxBindings);
+			if (beforeSx) observations.push(analyzeStyleSequence(beforeSx, styleMaps, prop));
+		}
+	});
+	return observations;
+}
+function walkTopLevelComponentBody(node, visit) {
+	walk(node, (current) => {
+		if (current !== node && isFunctionLike$1(current)) return "skip";
+		visit(current);
+	});
+}
+function argsBeforeSx(args, sxBindings) {
+	const index = args.findIndex((arg) => isSxExpression(arg, sxBindings));
+	return index === -1 ? null : args.slice(0, index);
+}
+function analyzeStyleSequence(styleArgs, styleMaps, prop) {
+	let current = { kind: "absent" };
+	for (const arg of styleArgs) {
+		const next = analyzeStyleArg(arg, styleMaps, prop);
+		if (next.kind === "absent") continue;
+		if (next.kind === "unknown" || next.kind === "variable") return next;
+		current = next;
+	}
+	return current;
+}
+function analyzeStyleArg(arg, styleMaps, prop) {
+	const node = unwrapExpression(arg);
+	if (!isRecord(node)) return { kind: "absent" };
+	if (isNullishOrBooleanFalse(node)) return { kind: "absent" };
+	const styleRef = readStyleReference(node);
+	if (styleRef) return analyzeStyleReference(styleRef, styleMaps, prop, false);
+	if (node.type === "LogicalExpression" && node.operator === "&&") {
+		const right = analyzeStyleArg(node.right, styleMaps, prop);
+		return right.kind === "absent" ? right : { kind: "variable" };
+	}
+	if (node.type === "ConditionalExpression") {
+		const consequent = analyzeStyleArg(node.consequent, styleMaps, prop);
+		const alternate = analyzeStyleArg(node.alternate, styleMaps, prop);
+		return consequent.kind === "absent" && alternate.kind === "absent" ? { kind: "absent" } : { kind: "variable" };
+	}
+	if (isArrayExpression(node)) return analyzeStyleSequence(getArrayElements(node), styleMaps, prop);
+	if (node.type === "CallExpression") {
+		const callNode = node;
+		const calleeRef = readStyleReference(callNode.callee);
+		if (calleeRef) return analyzeStyleReference(calleeRef, styleMaps, prop, true);
+		if (isStylexDefaultMarkerCall(callNode)) return { kind: "absent" };
+	}
+	return { kind: "unknown" };
+}
+function analyzeStyleReference(ref, styleMaps, prop, called) {
+	const styleEntry = styleMaps.get(ref.objectName)?.get(ref.styleKey);
+	if (!styleEntry) return { kind: "unknown" };
+	if (styleEntry.kind === "function") return styleEntry.props.has(prop) ? { kind: "variable" } : { kind: "absent" };
+	const value = styleEntry.props.get(prop);
+	if (!value) return { kind: "absent" };
+	if (called || value.kind === "dynamic") return { kind: "variable" };
+	return {
+		kind: "static",
+		value: value.value
+	};
+}
+function mergePropertyInferences(inferences) {
+	let merged = { kind: "absent" };
+	let sawAbsent = false;
+	let sawStatic = false;
+	for (const inference of inferences) {
+		if (inference.kind === "unknown" || inference.kind === "variable") return inference;
+		if (inference.kind === "absent") {
+			if (sawStatic) return { kind: "variable" };
+			sawAbsent = true;
+			continue;
+		}
+		if (sawAbsent) return { kind: "variable" };
+		if (merged.kind === "static" && merged.value !== inference.value) return { kind: "variable" };
+		sawStatic = true;
+		merged = inference;
+	}
+	return merged;
+}
+function isStylexCreateCall$1(node) {
+	return isMemberCall(node, "stylex", "create");
+}
+function isStylexPropsCall(node) {
+	return isMemberCall(node, "stylex", "props");
+}
+function isStylexDefaultMarkerCall(node) {
+	return isMemberCall(node, "stylex", "defaultMarker");
+}
+function isMergedSxCall(node) {
+	const callee = isRecord(node) ? node.callee : null;
+	return isIdentifier(callee) && callee.name === "mergedSx";
+}
+function isMemberCall(node, objectName, propertyName) {
+	if (!isRecord(node) || node.type !== "CallExpression") return false;
+	const callee = node.callee;
+	return isRecord(callee) && callee.type === "MemberExpression" && isIdentifier(callee.object) && callee.object.name === objectName && isIdentifier(callee.property) && callee.property.name === propertyName;
+}
+function readStyleReference(node) {
+	const unwrapped = unwrapExpression(node);
+	if (!isRecord(unwrapped) || unwrapped.type !== "MemberExpression" || unwrapped.computed === true) return null;
+	if (!isIdentifier(unwrapped.object) || !isIdentifier(unwrapped.property)) return null;
+	return {
+		objectName: unwrapped.object.name,
+		styleKey: unwrapped.property.name
 	};
 }
-function mergeUniqueStrings(first, second) {
-	return [...new Set([...first ?? [], ...second])];
+function isSxExpression(node, sxBindings) {
+	const unwrapped = unwrapExpression(node);
+	if (isIdentifier(unwrapped)) return sxBindings.localNames.has(unwrapped.name);
+	return isRecord(unwrapped) && unwrapped.type === "MemberExpression" && isIdentifier(unwrapped.object) && sxBindings.propsNames.has(unwrapped.object.name) && isIdentifier(unwrapped.property) && unwrapped.property.name === "sx";
+}
+function unwrapExpression(node) {
+	let current = node;
+	while (isRecord(current) && (current.type === "TSAsExpression" || current.type === "TSTypeAssertion" || current.type === "ParenthesizedExpression")) current = current.expression;
+	return current;
+}
+function unwrapAssignmentPattern(node) {
+	return isRecord(node) && node.type === "AssignmentPattern" ? node.left : node;
+}
+function isNullishOrBooleanFalse(node) {
+	return node.type === "NullLiteral" || node.type === "Identifier" && node.name === "undefined" || node.type === "BooleanLiteral" && node.value === false || node.type === "Literal" && (node.value === null || node.value === false);
+}
+function isNullLiteral$1(node) {
+	return isRecord(node) && (node.type === "NullLiteral" || node.type === "Literal" && node.value === null);
+}
+function isFunctionLike$1(node) {
+	return isRecord(node) && (node.type === "FunctionDeclaration" || node.type === "FunctionExpression" || node.type === "ArrowFunctionExpression");
+}
+function isObjectPattern(node) {
+	return isRecord(node) && node.type === "ObjectPattern";
+}
+function isObjectExpression$1(node) {
+	return isRecord(node) && node.type === "ObjectExpression";
+}
+function isArrayExpression(node) {
+	return isRecord(node) && node.type === "ArrayExpression";
+}
+function isIdentifier(node) {
+	return isRecord(node) && node.type === "Identifier" && typeof node.name === "string";
+}
+function isRecord(value) {
+	return !!value && typeof value === "object";
+}
+function getCallArguments(node) {
+	return Array.isArray(node.arguments) ? node.arguments : [];
+}
+function getArrayElements(node) {
+	return Array.isArray(node.elements) ? node.elements.filter((element) => element != null) : [];
+}
+function getObjectProperties(node) {
+	return Array.isArray(node.properties) ? node.properties.filter(isRecord) : [];
+}
+function getFunctionParams(node) {
+	return Array.isArray(node.params) ? node.params : [];
+}
+function readPropertyKey(property) {
+	const key = property.key;
+	if (isIdentifier(key)) return key.name;
+	if (isRecord(key) && (key.type === "StringLiteral" || key.type === "Literal")) return typeof key.value === "string" ? key.value : null;
+	return null;
+}
+function getJsxAttributeName(node) {
+	const name = node.name;
+	return isRecord(name) && name.type === "JSXIdentifier" && typeof name.name === "string" ? name.name : null;
+}
+function readJsxExpression(value) {
+	return isRecord(value) && value.type === "JSXExpressionContainer" ? value.expression : value;
+}
+function walk(node, visit, seen = /* @__PURE__ */ new WeakSet()) {
+	if (!isRecord(node)) return;
+	if (seen.has(node)) return;
+	seen.add(node);
+	if (visit(node) === "skip") return;
+	for (const [key, value] of Object.entries(node)) {
+		if (key === "loc" || key === "comments" || key === "tokens") continue;
+		if (Array.isArray(value)) for (const child of value) walk(child, visit, seen);
+		else if (isRecord(value)) walk(value, visit, seen);
+	}
 }
 //#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"
+]);
 /**
 * Analyzes declarations to determine wrappers, exports, usage patterns, and import aliasing before emit.
 */
@@ -4625,8 +5926,7 @@ function analyzeBeforeEmitStep(ctx) {
 		if (decl.base.kind === "intrinsic" && (decl.attrsInfo?.conditionalAttrs?.length ?? 0) > 0) decl.needsWrapperComponent = true;
 		if (decl.base.kind === "intrinsic" && (decl.attrsInfo?.defaultAttrs?.length ?? 0) > 0) decl.needsWrapperComponent = true;
 		if (decl.base.kind === "intrinsic" && (decl.attrsInfo?.dynamicAttrs?.length ?? 0) > 0) decl.needsWrapperComponent = true;
-		const resolverOnlyShouldForwardProp = !!decl.inlinedBaseComponent && !decl.shouldForwardPropFromWithConfig;
-		if (decl.shouldForwardProp && !resolverOnlyShouldForwardProp) decl.needsWrapperComponent = true;
+		if (needsShouldForwardPropWrapper(decl)) decl.needsWrapperComponent = true;
 		if (decl.base.kind === "intrinsic" && decl.withConfig?.componentId) decl.needsWrapperComponent = true;
 		if (extendedBy.has(decl.localName) && componentsWithStaticProps.has(decl.localName)) decl.needsWrapperComponent = true;
 		if (exportedComponents.has(decl.localName)) decl.needsWrapperComponent = true;
@@ -4730,7 +6030,7 @@ 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 hasNonJsxComponentValueReference = (name) => root.find(j.Identifier, { name }).filter((p) => {
+	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;
@@ -4743,7 +6043,20 @@ function analyzeBeforeEmitStep(ctx) {
 		if (p.parentPath?.node?.type === "CallExpression" && p.parentPath.parentPath?.node?.type === "TaggedTemplateExpression") return false;
 		if (p.parentPath?.node?.type === "TemplateLiteral") return false;
 		return true;
-	}).size() > 0;
+	});
+	const hasNonJsxComponentValueReference = (name) => nonJsxComponentValueReferences(name).size() > 0;
+	const hasOnlyVirtualListElementTypeValueReferences = (name) => {
+		const refs = nonJsxComponentValueReferences(name);
+		if (refs.size() === 0) return false;
+		let onlyVirtualListElementType = 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;
+		});
+		return onlyVirtualListElementType;
+	};
 	for (const decl of styledDecls) {
 		if (!decl.adjacentSiblingStyleKey) continue;
 		const { className, style, ref } = getJsxAttributeUsage(decl.localName);
@@ -5014,6 +6327,7 @@ function analyzeBeforeEmitStep(ctx) {
 		if (decl.isDirectJsxResolution) continue;
 		if (hasNonJsxComponentValueReference(decl.localName)) {
 			decl.usedAsValue = true;
+			if (hasOnlyVirtualListElementTypeValueReferences(decl.localName)) decl.valueUsageKind = "virtualListElementType";
 			decl.needsWrapperComponent = true;
 		}
 	}
@@ -5110,7 +6424,7 @@ function analyzeBeforeEmitStep(ctx) {
 			let cur = p.parentPath;
 			while (cur) {
 				const node = cur.node;
-				if (isFunctionNode(node) || node?.type === "MethodDefinition") return true;
+				if (isFunctionNode$1(node) || node?.type === "MethodDefinition") return true;
 				cur = cur.parentPath;
 			}
 			return false;
@@ -5151,6 +6465,18 @@ function analyzeBeforeEmitStep(ctx) {
 		code: null,
 		warnings: ctx.warnings
 	}, "bail");
+	if (!validateWrappedComponentStyleChannels(ctx, styledDecls)) return returnResult({
+		code: null,
+		warnings: ctx.warnings
+	}, "bail");
+	if (guardGeneratedConditionalDefaults(ctx, styledDecls) === "bail") return returnResult({
+		code: null,
+		warnings: ctx.warnings
+	}, "bail");
+	if (guardForwardedSxConditionalDefaults(ctx, styledDecls) === "bail") return returnResult({
+		code: null,
+		warnings: ctx.warnings
+	}, "bail");
 	const existingStylexTarget = findExistingStylexStylesTarget({
 		ctx,
 		styledDeclNames,
@@ -6088,6 +7414,11 @@ function coerceToStringForStyleX(cssProp, value) {
 */
 function inferTypeForCssProp(cssProp, expr) {
 	if (isStylexStringOnlyCssProp(cssProp)) return "string";
+	const conditionalType = inferTypeFromConditionalBranches(expr);
+	if (conditionalType) {
+		if (conditionalType === "number" && LENGTH_LIKE_CSS_PROP_RE.test(cssProp)) return "numberOrString";
+		return conditionalType;
+	}
 	const staticVal = literalToStaticValue(expr);
 	if (typeof staticVal === "number") return "number";
 	if (typeof staticVal === "string") return "string";
@@ -6095,6 +7426,25 @@ function inferTypeForCssProp(cssProp, expr) {
 	if (LENGTH_LIKE_CSS_PROP_RE.test(cssProp)) return "numberOrString";
 	return "string";
 }
+function inferTypeFromConditionalBranches(expr) {
+	if (!expr || typeof expr !== "object") return null;
+	const node = expr;
+	if (node.type !== "ConditionalExpression") return null;
+	const consequent = inferTypeFromExpressionValue(node.consequent);
+	const alternate = inferTypeFromExpressionValue(node.alternate);
+	if (!consequent || !alternate) return null;
+	if (consequent === alternate) return consequent;
+	return "numberOrString";
+}
+function inferTypeFromExpressionValue(expr) {
+	const nested = inferTypeFromConditionalBranches(expr);
+	if (nested) return nested;
+	if (expr && typeof expr === "object" && expr.type === "TemplateLiteral") return "string";
+	const value = literalToStaticValue(expr);
+	if (typeof value === "string") return "string";
+	if (typeof value === "number") return "number";
+	return null;
+}
 /**
 * Analyzes JSX call-site `style={{ ... }}` objects for all intrinsic styled components
 * and promotes analyzable style objects to proper `stylex.create` entries.
@@ -6182,7 +7532,7 @@ function analyzePromotableStyleProps(root, j, styledDecls, allStyledDecls, declB
 					siteBail = true;
 					break;
 				}
-				if (!isValidIdentifierName$1(keyName)) {
+				if (!isValidIdentifierName(keyName)) {
 					siteBail = true;
 					break;
 				}
@@ -6949,13 +8299,47 @@ function validateSxRestrictedWrappedComponentStyles(ctx, styledDecls) {
 		if (decl.skipTransform || decl.base.kind !== "component") continue;
 		const componentInterface = wrappedComponentInterfaceFor(ctx, decl.base.ident);
 		const excludedProperties = componentInterface?.sxExcludedProperties;
-		if (componentInterface?.acceptsSx !== true || !excludedProperties?.length) continue;
-		const excluded = new Set(excludedProperties);
+		const allowedProperties = componentInterface?.sxAllowedProperties;
+		const hasAllowedProperties = allowedProperties !== void 0;
+		if (componentInterface?.acceptsSx !== true || !excludedProperties?.length && !hasAllowedProperties && !componentInterface.rootOnlyProperties?.length) continue;
+		const excluded = new Set(excludedProperties ?? []);
+		const allowed = hasAllowedProperties ? new Set(allowedProperties) : null;
+		const rootOnly = componentInterface.sxTarget === "inner" && componentInterface.rootOnlyProperties?.length ? new Set(componentInterface.rootOnlyProperties) : null;
 		for (const styleKey of collectAllStyleKeysForDecl(decl)) {
 			const style = ctx.resolvedStyleObjects.get(styleKey);
 			if (!style || typeof style !== "object") continue;
-			const rejectedProperty = findSxExcludedStyleProperty(style, excluded);
-			if (!rejectedProperty) continue;
+			const rootOnlyProperty = rootOnly ? findSxExcludedStyleProperty(style, rootOnly) : null;
+			if (rootOnlyProperty) {
+				ctx.warnings.push({
+					severity: "error",
+					type: "Wrapped component sx prop targets an inner element for a root style property",
+					loc: decl.loc,
+					context: {
+						localName: decl.localName,
+						wrappedComponent: decl.base.ident,
+						styleKey,
+						property: rootOnlyProperty
+					}
+				});
+				return false;
+			}
+			const rejectedProperty = excluded.size > 0 ? findSxExcludedStyleProperty(style, excluded) : null;
+			if (!rejectedProperty) {
+				const disallowedProperty = allowed ? findSxDisallowedStyleProperty(style, allowed) : null;
+				if (!disallowedProperty) continue;
+				ctx.warnings.push({
+					severity: "error",
+					type: "Wrapped component sx prop does not accept generated StyleX property",
+					loc: decl.loc,
+					context: {
+						localName: decl.localName,
+						wrappedComponent: decl.base.ident,
+						styleKey,
+						property: disallowedProperty
+					}
+				});
+				return false;
+			}
 			ctx.warnings.push({
 				severity: "error",
 				type: "Wrapped component sx prop rejects logical CSS properties that cannot be preserved losslessly",
@@ -6972,6 +8356,70 @@ function validateSxRestrictedWrappedComponentStyles(ctx, styledDecls) {
 	}
 	return true;
 }
+function validateWrappedComponentStyleChannels(ctx, styledDecls) {
+	if (!ctx.resolvedStyleObjects) return true;
+	for (const decl of styledDecls) {
+		if (decl.skipTransform || decl.base.kind !== "component") continue;
+		const baseIdent = decl.base.ident;
+		if (styledDecls.some((candidate) => candidate.localName === baseIdent)) continue;
+		const importInfo = ctx.importMap?.get(baseIdent);
+		const isLocalNonStyledWrappedComponent = !importInfo && isLocalFunctionComponent(ctx.root, ctx.j, baseIdent);
+		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 metadata = findWrappedComponentMetadata(ctx, baseIdent);
+		if (!metadata || componentAcceptsStylexClassName(metadata)) continue;
+		if (isLocalNonStyledWrappedComponent && !hasInlineObjectPropType(metadata)) continue;
+		ctx.warnings.push({
+			severity: "error",
+			type: "Wrapped component does not accept className or sx for generated StyleX styles",
+			loc: decl.loc,
+			context: {
+				localName: decl.localName,
+				wrappedComponent: decl.base.ident
+			}
+		});
+		return false;
+	}
+	return true;
+}
+function declHasEmittedStyle(ctx, decl) {
+	for (const styleKey of collectAllStyleKeysForDecl(decl)) if (ctx.resolvedStyleObjects?.has(styleKey)) return true;
+	return false;
+}
+function findWrappedComponentMetadata(ctx, componentLocalName) {
+	const metadata = ctx.options.crossFileInfo?.typeScriptMetadata;
+	const importInfo = ctx.importMap?.get(componentLocalName);
+	if (importInfo?.source.kind === "absolutePath") return findTypeScriptComponentMetadata(metadata, importInfo.source.value, [importInfo.importedName, componentLocalName]);
+	return findTypeScriptComponentMetadata(metadata, ctx.file.path, [componentLocalName]);
+}
+function componentAcceptsStylexClassName(metadata) {
+	if (metadata.propType && isIntrinsicReactPropsTypeText(metadata.propType.text)) return true;
+	if (metadata.hasIndexSignature) return true;
+	if (metadata.explicitPropNames.includes("className")) return true;
+	return metadata.props.some((prop) => prop.name === "className");
+}
+function isIntrinsicReactPropsTypeText(typeText) {
+	return /^(?:[$A-Z_a-z][$\w]*\.)*ComponentProps(?:WithRef|WithoutRef)?\s*<\s*(['"])[^'"]+\1\s*>$/.test(typeText.trim());
+}
+function hasInlineObjectPropType(metadata) {
+	return metadata.propType?.text.trim().startsWith("{") === true;
+}
+function findSxDisallowedStyleProperty(style, allowedProperties) {
+	if (isAstNode(style)) return findSxDisallowedStylePropertyInAstNode(style, allowedProperties);
+	for (const [key, value] of Object.entries(style)) {
+		if (isStylexConditionKey(key)) {
+			if (value && typeof value === "object") {
+				const nested = findSxDisallowedStyleProperty(value, allowedProperties);
+				if (nested) return nested;
+			}
+			continue;
+		}
+		if (!allowedProperties.has(key)) return key;
+	}
+	return null;
+}
 function staticObjectPropertyName(prop) {
 	if (!prop || typeof prop !== "object") return null;
 	const p = prop;
@@ -6982,6 +8430,29 @@ 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");
+}
 function findSxExcludedStyleProperty(style, excludedProperties) {
 	if (isAstNode(style)) return findSxExcludedStylePropertyInAstNode(style, excludedProperties);
 	for (const [key, value] of Object.entries(style)) {
@@ -7017,6 +8488,34 @@ function findSxExcludedStylePropertyInAstNode(node, excludedProperties) {
 	}
 	return null;
 }
+function findSxDisallowedStylePropertyInAstNode(node, allowedProperties) {
+	const n = node;
+	if (n.type === "ObjectExpression") {
+		for (const prop of n.properties ?? []) {
+			const name = staticObjectPropertyName(prop);
+			const value = prop.value;
+			if (!name) {
+				if (value && typeof value === "object") {
+					const nested = findSxDisallowedStylePropertyInAstNode(value, allowedProperties);
+					if (nested) return nested;
+				}
+				continue;
+			}
+			if (isStylexConditionKey(name)) {
+				if (value && typeof value === "object") {
+					const nested = findSxDisallowedStylePropertyInAstNode(value, allowedProperties);
+					if (nested) return nested;
+				}
+				continue;
+			}
+			if (!allowedProperties.has(name)) return name;
+		}
+		return null;
+	}
+	if (n.type === "ArrowFunctionExpression" && n.body && typeof n.body === "object") return findSxDisallowedStylePropertyInAstNode(n.body, allowedProperties);
+	if (n.type === "ParenthesizedExpression" && n.expression && typeof n.expression === "object") return findSxDisallowedStylePropertyInAstNode(n.expression, allowedProperties);
+	return null;
+}
 //#endregion
 //#region src/internal/policy.ts
 function collectCreateGlobalStyleWarnings(styledImports) {
@@ -7955,6 +9454,32 @@ function findEnclosingFunction(path) {
 	}
 	return null;
 }
+function collectStyledComponentLocalNames(root, j, styledLocalNames) {
+	const names = /* @__PURE__ */ new Set();
+	root.find(j.VariableDeclarator).forEach((path) => {
+		if (path.node.id?.type !== "Identifier") return;
+		const init = path.node.init;
+		if (!init) return;
+		if (init.type === "TaggedTemplateExpression" && isStyledTag(styledLocalNames, init.tag)) {
+			names.add(path.node.id.name);
+			return;
+		}
+		if (init.type === "CallExpression" && init.callee?.type === "TaggedTemplateExpression" && isStyledTag(styledLocalNames, init.callee.tag)) names.add(path.node.id.name);
+	});
+	return names;
+}
+function templateReferencesStyledComponentSelector(template, styledLocalNames) {
+	const parsed = parseStyledTemplateLiteral(template);
+	for (const slot of parsed.slots) {
+		const expr = slot.expression;
+		if (expr.type !== "Identifier" || !expr.name || !styledLocalNames.has(expr.name)) continue;
+		const after = parsed.rawCss.slice(slot.endOffset);
+		const nextBlockStart = after.indexOf("{");
+		const nextDeclarationEnd = after.indexOf(";");
+		if (nextBlockStart >= 0 && (nextDeclarationEnd < 0 || nextBlockStart < nextDeclarationEnd)) return true;
+	}
+	return false;
+}
 /**
 * Checks a CSS template for closure variable references and returns an UnsupportedCssUsage
 * if any are found. Returns null if no closure variables are detected.
@@ -8100,8 +9625,11 @@ function detectUnsupportedCssHelperUsage(args) {
 	return unsupportedUsages;
 }
 function extractAndRemoveCssHelpers(args) {
-	const { root, j, styledImports, cssLocal, toStyleKey, preserveDeclarationOnlyNames } = args;
+	const { root, j, styledImports, cssLocal, toStyleKey, preserveDeclarationOnlyNames, preservedStyledComponentSelectorNames } = args;
 	const styledLocalNames = collectStyledDefaultImportLocalNames(styledImports);
+	const styledComponentLocalNames = collectStyledComponentLocalNames(root, j, styledLocalNames);
+	const preservedSelectorNames = preservedStyledComponentSelectorNames ?? /* @__PURE__ */ new Set();
+	const rewrittenStyledComponentLocalNames = new Set([...styledComponentLocalNames].filter((name) => !preservedSelectorNames.has(name)));
 	const exportedLocalNames = buildExportedLocalNames(root, j);
 	const cssHelperFunctions = /* @__PURE__ */ new Map();
 	const cssHelperNames = /* @__PURE__ */ new Set();
@@ -8157,12 +9685,20 @@ function extractAndRemoveCssHelpers(args) {
 		const styleKey = toStyleKey(localName);
 		const placementHints = getCssHelperPlacementHints(root, p);
 		const isExported = exportedLocalNames.has(localName);
-		const preserveDeclarationOnly = preserveDeclarationOnlyNames?.has(localName) ?? false;
 		const template = init.quasi;
 		const { rules, rawCss, templateExpressions } = parseCssHelperTemplate({
 			template,
 			noteUniversalSelector: noteCssHelperUniversalSelector
 		});
+		if (isExported && templateReferencesStyledComponentSelector(template, rewrittenStyledComponentLocalNames)) {
+			unsupportedCssUsages.push({
+				loc: getNodeLocStart(template),
+				reason: "outside-styled-template"
+			});
+			return;
+		}
+		if (isExported && templateReferencesStyledComponentSelector(template, preservedSelectorNames)) return;
+		const preserveDeclarationOnly = preserveDeclarationOnlyNames?.has(localName) ?? false;
 		cssHelperDecls.push({
 			...placementHints,
 			localName,
@@ -8205,6 +9741,18 @@ function extractAndRemoveCssHelpers(args) {
 		}
 		changed = true;
 	});
+	if (unsupportedCssUsages.length > 0) return {
+		unsupportedCssUsages,
+		cssHelperFunctions,
+		cssHelperNames,
+		cssHelperObjectMembers,
+		cssHelperDecls,
+		cssHelperHasUniversalSelectors,
+		cssHelperUniversalSelectorLoc,
+		cssHelperReplacements,
+		cssHelperTemplateReplacements,
+		changed
+	};
 	root.find(j.VariableDeclarator, { init: { type: "ArrowFunctionExpression" } }).forEach((p) => {
 		if (p.node.id.type !== "Identifier") return;
 		const name = p.node.id.name;
@@ -8456,10 +10004,6 @@ function cleanupCssImportStep(ctx) {
 //#endregion
 //#region src/internal/transform-steps/collect-static-props.ts
 /**
-* Step: collect static property assignments on styled components.
-* Core concepts: static metadata capture and inheritance generation.
-*/
-/**
 * Collects static property assignments and generates inheritance statements.
 */
 function collectStaticPropsStep(ctx) {
@@ -8470,9 +10014,10 @@ function collectStaticPropsStep(ctx) {
 	const staticPropertyAssignments = /* @__PURE__ */ new Map();
 	const staticPropertyNames = /* @__PURE__ */ new Map();
 	const styledNames = new Set(styledDecls.map((d) => d.localName));
+	const objectExpressionByName = collectObjectExpressionVariables(root, j);
 	const baseComponentNames = /* @__PURE__ */ new Set();
 	for (const decl of styledDecls) {
-		const baseIdent = decl.originalBaseIdent ?? (decl.base.kind === "component" ? decl.base.ident : null);
+		const baseIdent = getEffectiveBaseIdent(decl);
 		if (baseIdent && !styledNames.has(baseIdent)) baseComponentNames.add(baseIdent);
 	}
 	root.find(j.ExpressionStatement).filter((p) => {
@@ -8486,12 +10031,8 @@ function collectStaticPropsStep(ctx) {
 	}).forEach((p) => {
 		const expr = p.node.expression;
 		const componentName = expr.left.object.name;
-		const propName = expr.left.property?.name ?? expr.left.property?.value;
-		if (propName) {
-			const names = staticPropertyNames.get(componentName) ?? [];
-			names.push(propName);
-			staticPropertyNames.set(componentName, names);
-		}
+		const propName = getStaticPropertyNameFromMemberExpression(expr.left);
+		if (propName) addStaticPropertyName(staticPropertyNames, componentName, propName);
 		if (baseComponentNames.has(componentName)) return;
 		if (ctx.exportedComponents?.has(componentName) || ctx.extendedBy?.has(componentName)) {
 			const existing = staticPropertyAssignments.get(componentName) ?? [];
@@ -8500,23 +10041,37 @@ function collectStaticPropsStep(ctx) {
 		}
 		j(p).remove();
 	});
+	root.find(j.CallExpression).forEach((path) => {
+		const callee = path.node.callee;
+		if (callee?.type !== "MemberExpression" || callee.object?.type !== "Identifier" || callee.object.name !== "Object" || callee.property?.type !== "Identifier" || callee.property.name !== "assign") return;
+		const parent = path.parentPath?.node;
+		const assignedName = parent?.type === "VariableDeclarator" && parent.id?.type === "Identifier" ? parent.id.name : null;
+		const target = path.node.arguments?.[0];
+		if (target?.type !== "Identifier") return;
+		const componentNames = [target.name, ...assignedName ? [assignedName] : []].filter((name, index, names) => names.indexOf(name) === index && baseComponentNames.has(name));
+		if (componentNames.length === 0) return;
+		for (const componentName of componentNames) for (const source of path.node.arguments.slice(1)) {
+			const statics = getObjectAssignStaticSource(source, objectExpressionByName);
+			if (!statics) continue;
+			for (const prop of statics.properties ?? []) {
+				const propName = getStaticPropertyNameFromObjectProperty(prop);
+				if (propName) addStaticPropertyName(staticPropertyNames, componentName, propName);
+			}
+		}
+	});
 	for (const decl of styledDecls) {
-		const baseIdent = decl.originalBaseIdent ?? (decl.base.kind === "component" ? decl.base.ident : null);
+		const baseIdent = getEffectiveBaseIdent(decl);
 		if (!baseIdent) continue;
 		const baseComponentName = ctx.declByLocal.get(baseIdent)?.localName ?? baseIdent;
 		const baseProps = staticPropertyNames.get(baseComponentName);
 		if (!baseProps || baseProps.length === 0) continue;
 		if ((staticPropertyAssignments.get(decl.localName) ?? []).length > 0) continue;
 		const inheritanceStatements = [];
-		for (const propName of baseProps) {
-			const rhs = ctx.j(`const __x = (${baseComponentName} as any).${propName};`).get().node.program.body[0].declarations[0].init;
-			const stmt = ctx.j.expressionStatement(ctx.j.assignmentExpression("=", ctx.j.memberExpression(ctx.j.identifier(decl.localName), ctx.j.identifier(propName)), rhs));
-			inheritanceStatements.push(stmt);
-		}
+		for (const propName of baseProps) inheritanceStatements.push(buildStaticInheritanceStatement(ctx.j, decl.localName, baseComponentName, propName));
 		if (inheritanceStatements.length > 0) staticPropertyAssignments.set(decl.localName, inheritanceStatements);
 	}
 	for (const decl of styledDecls) {
-		const baseIdent = decl.originalBaseIdent ?? (decl.base.kind === "component" ? decl.base.ident : null);
+		const baseIdent = getEffectiveBaseIdent(decl);
 		if (!baseIdent) continue;
 		if (ctx.declByLocal.has(baseIdent)) continue;
 		if (staticPropertyNames.has(baseIdent)) continue;
@@ -8558,6 +10113,46 @@ function collectStaticPropsStep(ctx) {
 	ctx.staticPropertyNames = staticPropertyNames;
 	return CONTINUE;
 }
+function collectObjectExpressionVariables(root, j) {
+	const objectExpressionByName = /* @__PURE__ */ new Map();
+	root.find(j.VariableDeclarator).forEach((path) => {
+		if (path.node.id?.type === "Identifier" && path.node.init?.type === "ObjectExpression") objectExpressionByName.set(path.node.id.name, path.node.init);
+	});
+	return objectExpressionByName;
+}
+function getObjectAssignStaticSource(source, objectExpressionByName) {
+	if (source?.type === "ObjectExpression") return source;
+	if (source?.type === "Identifier" && source.name) return objectExpressionByName.get(source.name) ?? null;
+	return null;
+}
+function addStaticPropertyName(staticPropertyNames, componentName, propName) {
+	const names = staticPropertyNames.get(componentName) ?? [];
+	if (!names.includes(propName)) {
+		names.push(propName);
+		staticPropertyNames.set(componentName, names);
+	}
+}
+function getStaticPropertyNameFromMemberExpression(memberExpression) {
+	const property = memberExpression.property;
+	if (!memberExpression.computed && property?.type === "Identifier") return property.name ?? null;
+	if ((property?.type === "Literal" || property?.type === "StringLiteral") && typeof property.value === "string") return property.value;
+	return null;
+}
+function getStaticPropertyNameFromObjectProperty(prop) {
+	if (!prop || typeof prop !== "object") return null;
+	const property = prop;
+	if (property.type === "SpreadElement" || property.type === "SpreadProperty") return null;
+	const key = property.key;
+	if (!property.computed && key?.type === "Identifier") return key.name ?? null;
+	if ((key?.type === "Literal" || key?.type === "StringLiteral") && typeof key.value === "string") return key.value;
+	return null;
+}
+function buildStaticInheritanceStatement(j, componentName, baseComponentName, propName) {
+	return j(`${isIdentifierPropertyName(propName) ? `${componentName}.${propName}` : `(${componentName} as any)[${JSON.stringify(propName)}]`} = ${isIdentifierPropertyName(propName) ? `(${baseComponentName} as any).${propName}` : `(${baseComponentName} as any)[${JSON.stringify(propName)}]`};`).get().node.program.body[0];
+}
+function isIdentifierPropertyName(propName) {
+	return /^[$A-Z_a-z][$\w]*$/.test(propName);
+}
 //#endregion
 //#region src/internal/utilities/ast-safety.ts
 /**
@@ -9603,10 +11198,12 @@ function getAttrsParamInfo(params) {
 	};
 }
 function literalStaticValueFromNode(node) {
-	if (node?.type === "StringLiteral" || node?.type === "NumericLiteral") return node.value;
-	if (node?.type === "BooleanLiteral") return node.value;
-	if (node?.type === "Literal" && (typeof node.value === "string" || typeof node.value === "number" || typeof node.value === "boolean")) return node.value;
-	if (node?.type === "TSAsExpression" || node?.type === "TSSatisfiesExpression") return literalStaticValueFromNode(node.expression);
+	if (!node || typeof node !== "object") return;
+	const typed = node;
+	if (typed.type === "StringLiteral" || typed.type === "NumericLiteral") return typeof typed.value === "string" || typeof typed.value === "number" ? typed.value : void 0;
+	if (typed.type === "BooleanLiteral") return typeof typed.value === "boolean" ? typed.value : void 0;
+	if (typed.type === "Literal" && (typeof typed.value === "string" || typeof typed.value === "number" || typeof typed.value === "boolean")) return typed.value;
+	if (typed.type === "TSAsExpression" || typed.type === "TSSatisfiesExpression") return literalStaticValueFromNode(typed.expression);
 }
 function isStaticAttrExpression$1(node, attrsParamInfo) {
 	if (!node || typeof node !== "object") return false;
@@ -9620,9 +11217,6 @@ function getStaticAttrExpressionRootName(node) {
 	if (node.property?.type !== "Identifier" && node.property?.type !== "PrivateName") return null;
 	return getStaticAttrExpressionRootName(node.object);
 }
-function isValidIdentifierName(name) {
-	return /^[$A-Z_a-z][$\w]*$/.test(name);
-}
 function staticAttrExpressionToReference(node, attrsParamInfo) {
 	if (!isStaticAttrExpression$1(node, attrsParamInfo)) return null;
 	if (node?.type === "TSAsExpression" || node?.type === "TSSatisfiesExpression") return staticAttrExpressionToReference(node.expression, attrsParamInfo);
@@ -9942,7 +11536,7 @@ function collectStyledDeclsStep(ctx) {
 	if (unparseableSfpDecl && ctx.options.transformMode !== "leavesOnly") {
 		ctx.warnings.push({
 			severity: "warning",
-			type: "Unsupported shouldForwardProp pattern (only !prop.startsWith(), ![].includes(prop), and prop !== are supported)",
+			type: UNSUPPORTED_SHOULD_FORWARD_PROP_WARNING,
 			loc: unparseableSfpDecl.loc
 		});
 		return returnResult({
@@ -11150,7 +12744,7 @@ function evaluateStaticKeyframesExpression(expr, scopePath, seenIdentifiers = /*
 		if (expr.operator === "+") return value;
 		return null;
 	}
-	if (expr.type === "BinaryExpression") return evaluateStaticBinaryExpression(expr, scopePath, seenIdentifiers);
+	if (expr.type === "BinaryExpression") return evaluateStaticBinaryExpression$1(expr, scopePath, seenIdentifiers);
 	if (expr.type === "LogicalExpression") {
 		const left = evaluateStaticKeyframesExpression(expr.left, scopePath, seenIdentifiers);
 		if (expr.operator === "&&") return left ? evaluateStaticKeyframesExpression(expr.right, scopePath) : left;
@@ -11180,7 +12774,7 @@ function evaluateStaticKeyframesExpression(expr, scopePath, seenIdentifiers = /*
 	if (expr.type === "TSAsExpression" || expr.type === "TSTypeAssertion" || expr.type === "TSSatisfiesExpression") return evaluateStaticKeyframesExpression(expr.expression, scopePath, seenIdentifiers);
 	return null;
 }
-function evaluateStaticBinaryExpression(expr, scopePath, seenIdentifiers) {
+function evaluateStaticBinaryExpression$1(expr, scopePath, seenIdentifiers) {
 	if (expr.type !== "BinaryExpression") return null;
 	const left = evaluateStaticKeyframesExpression(expr.left, scopePath, seenIdentifiers);
 	const right = evaluateStaticKeyframesExpression(expr.right, scopePath, seenIdentifiers);
@@ -12103,7 +13697,7 @@ function detectUnsupportedPatternsStep(ctx) {
 			const parent = cur.parentPath.node;
 			if (parent?.type === "VariableDeclarator" && parent.init === cur.node) return true;
 			if (parent?.type === "AssignmentExpression" && parent.right === cur.node) return true;
-			if (isFunctionNode(parent)) break;
+			if (isFunctionNode$1(parent)) break;
 			cur = cur.parentPath;
 		}
 		return false;
@@ -12112,7 +13706,7 @@ function detectUnsupportedPatternsStep(ctx) {
 		let cur = path;
 		while (cur?.parentPath) {
 			cur = cur.parentPath;
-			if (isFunctionNode(cur?.node)) return true;
+			if (isFunctionNode$1(cur?.node)) return true;
 		}
 		return false;
 	};
@@ -12938,7 +14532,7 @@ function resolveDirectJsxUsages(ctx, styledDecls) {
 	for (const name of jsxComponentNames) {
 		if (styledDeclNames.has(name)) continue;
 		if (isUsedAsNonJsxValue(ctx, name)) continue;
-		if (hasSpreadInJsxForComponent(ctx, name)) continue;
+		if (hasSpreadInJsx(ctx.root, ctx.j, name)) continue;
 		const importInfo = importMap.get(name);
 		if (!importInfo) continue;
 		const importSourceStr = importSourceToString(importInfo.source);
@@ -13035,27 +14629,6 @@ function isUsedAsNonJsxValue(ctx, localName) {
 		return true;
 	}).size() > 0;
 }
-/** Returns true if any JSX call site of `localName` has a spread attribute. */
-function hasSpreadInJsxForComponent(ctx, localName) {
-	const { root, j } = ctx;
-	let found = false;
-	const checkAttrs = (attributes) => {
-		if (found) return;
-		for (const attr of attributes ?? []) if (attr.type === "JSXSpreadAttribute") {
-			found = true;
-			return;
-		}
-	};
-	root.find(j.JSXElement, { openingElement: { name: {
-		type: "JSXIdentifier",
-		name: localName
-	} } }).forEach((p) => checkAttrs(p.node.openingElement?.attributes));
-	root.find(j.JSXSelfClosingElement, { name: {
-		type: "JSXIdentifier",
-		name: localName
-	} }).forEach((p) => checkAttrs(p.node.attributes));
-	return found;
-}
 /** Returns a styleKey that doesn't collide with existing keys. */
 function deduplicateStyleKey(base, usedKeys) {
 	if (!usedKeys.has(base)) return base;
@@ -13092,7 +14665,7 @@ function applyLeavesOnlyPolicyStep(ctx) {
 			decl.skipTransform = true;
 			ctx.warnings.push({
 				severity: "warning",
-				type: "Unsupported shouldForwardProp pattern (only !prop.startsWith(), ![].includes(prop), and prop !== are supported)",
+				type: UNSUPPORTED_SHOULD_FORWARD_PROP_WARNING,
 				loc: decl.loc
 			});
 			continue;
@@ -13631,7 +15204,7 @@ 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);
+	emitLocalDefineVarsSidecars(ctx, [...nonEmptyStyleEntries.map(([, value]) => value), ...styledDecls.flatMap((decl) => (decl.inlineStyleProps ?? []).flatMap((prop) => [prop.expr, ...prop.keyExpr ? [prop.keyExpr] : []]))]);
 	const programBody = root.get().node.program.body;
 	const insertNodes = [...inlineKeyframeDecls, ...stylesDecl ? [stylesDecl] : []];
 	if (insertNodes.length > 0) if (stylesInsertPosition === "afterImports") {
@@ -13917,9 +15490,9 @@ function tokenizeShorthandValue(value) {
 	if (current.trim()) tokens.push(current.trim());
 	return tokens;
 }
-function emitLocalDefineVarsSidecars(ctx) {
+function emitLocalDefineVarsSidecars(ctx, emittedStyleValues) {
 	const j = ctx.j;
-	const vars = [...ctx.localStylexVars?.values() ?? []].sort((a, b) => a.sourceOrder - b.sourceOrder);
+	const vars = [...ctx.localStylexVars?.values() ?? []].filter((ref) => emittedStyleValues.some((value) => containsLocalStylexVarRef(value, ref))).sort((a, b) => a.sourceOrder - b.sourceOrder);
 	if (vars.length === 0) return;
 	ctx.sidecarFiles ??= [];
 	const groups = groupLocalStylexVars(vars);
@@ -13930,6 +15503,25 @@ function emitLocalDefineVarsSidecars(ctx) {
 	const specifiers = [...groups.keys()].map((groupName) => j.importSpecifier(j.identifier(groupName)));
 	insertImportDeclarationNearStylex(ctx.root, j.importDeclaration(specifiers, j.literal(`./${vars[0]?.sidecarFileName ?? "vars.stylex"}`)));
 }
+function containsLocalStylexVarRef(value, ref) {
+	if (!value || typeof value !== "object") return false;
+	if (Array.isArray(value)) return value.some((item) => containsLocalStylexVarRef(item, ref));
+	const record = value;
+	if (record.type === "MemberExpression") {
+		const object = record.object;
+		const property = record.property;
+		if (object?.type === "Identifier" && object.name === ref.groupName) {
+			if (property?.type === "Identifier" && property.name === ref.keyName) return true;
+			if (property?.type === "Literal" && property.value === ref.keyName) return true;
+			if (property?.type === "StringLiteral" && property.value === ref.keyName) return true;
+		}
+	}
+	for (const [key, child] of Object.entries(record)) {
+		if (key === "loc" || key === "comments") continue;
+		if (containsLocalStylexVarRef(child, ref)) return true;
+	}
+	return false;
+}
 function groupLocalStylexVars(vars) {
 	const groups = /* @__PURE__ */ new Map();
 	for (const ref of vars) {
@@ -14107,12 +15699,12 @@ function emitBridgeExportsStep(ctx) {
 function emitStyleMerging(args) {
 	const { j, emitter, styleArgs: rawStyleArgs, classNameId, styleId, allowClassNameProp, allowStyleProp, allowSxProp, inlineStyleProps = [], staticStyleExpr, staticClassNameExpr, isIntrinsicElement = true, wrappedAcceptsSxProp = false, keepStylePropSeparate = false } = args;
 	const { styleMerger, emptyStyleKeys, stylesIdentifier, ancestorSelectorParents, crossFileMarkers, parentsNeedingDefaultMarker, emitTypes } = emitter;
-	const styleArgs = filterEmptyStyleArgs({
+	const styleArgs = mergeAdjacentComplementaryStyleExprs(j, filterEmptyStyleArgs({
 		styleArgs: rawStyleArgs,
 		emptyStyleKeys,
 		stylesIdentifier,
 		ancestorSelectorParents
-	});
+	}));
 	if (ancestorSelectorParents && ancestorSelectorParents.size > 0) {
 		let needsDefaultMarker = false;
 		const pendingMarkers = [];
@@ -15060,6 +16652,13 @@ function buildShorthandDefaultPatternProp(j, name, defaultVal) {
 		shorthand: true
 	});
 }
+function shouldPassChildrenThroughRest(args) {
+	const { includeChildren, includeRest = false, restId, destructureProps = [], defaultAttrs = [], dynamicAttrs = [], staticAttrs = {} } = args;
+	if (!includeChildren || !includeRest || !restId) return false;
+	if (destructureProps.some((name) => name === "children")) return false;
+	if ([...defaultAttrs, ...dynamicAttrs].some((attr) => attr.attrName === "children" || attr.jsxProp === "children")) return false;
+	return !Object.hasOwn(staticAttrs, "children");
+}
 function buildDestructurePatternProps(j, patternProp, args) {
 	const { baseProps, destructureProps, propDefaults, includeRest = false, restId } = args;
 	const patternProps = [...baseProps];
@@ -15395,7 +16994,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 = dim.fallbackFnKey ? buildFallbackExpr(dim, propId) : j.memberExpression(variantsId, propId, true);
+			const lookup = dim.fallbackFnKey ? buildFallbackExpr(dim, propId) : j.memberExpression(variantsId, dim.forceKeyofLookupCast ? buildKeyofTypeofCast(j, propId, dim.variantObjectName) : propId, true);
 			if (dim.isOptional && !dim.defaultValue) {
 				const guard = j.binaryExpression("!=", j.identifier(dim.propName), j.literal(null));
 				pushExpr(j.logicalExpression("&&", guard, lookup), dim);
@@ -15858,7 +17457,8 @@ var WrapperEmitter = class {
 		if (typedComponent) {
 			if (typedComponent.supportsSxProp) return {
 				acceptsSx: true,
-				sxExcludedProperties: typedComponent.sxExcludedProperties
+				sxExcludedProperties: typedComponent.sxExcludedProperties,
+				sxAllowedProperties: typedComponent.sxAllowedProperties
 			};
 			if (!this.hasSourceOverrideFor(componentLocalName)) return { acceptsSx: false };
 		}
@@ -15966,6 +17566,9 @@ var WrapperEmitter = class {
 	isUsedAsValue(d) {
 		return Boolean(d.usedAsValue) || this.isUsedAsValueInFile(d.localName);
 	}
+	isBroadValueUsage(d) {
+		return this.isUsedAsValue(d) && d.valueUsageKind !== "virtualListElementType";
+	}
 	requiresRestForValueUsage(d) {
 		return this.isUsedAsValueInFile(d.localName) || this.hasAliasedJsxSpreadUsage(d.localName);
 	}
@@ -16000,18 +17603,20 @@ var WrapperEmitter = class {
 	shouldAllowClassNameProp(d) {
 		if (d.consumerUsesClassName ?? d.supportsExternalStyles) return true;
 		if (d.consumerUsesSpread) return this.spreadMayContainProp(d, "className");
-		if (this.isUsedAsValue(d)) return true;
+		if (this.isBroadValueUsage(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 this.spreadMayContainProp(d, "style");
-		if (this.isUsedAsValue(d)) return true;
+		if (d.valueUsageKind === "virtualListElementType") 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;
 		return (d.supportsExternalStyles ?? false) || d.typeScriptSupportsSxProp === true || this.shouldAllowClassNameProp(d) || this.shouldAllowStyleProp(d);
 	}
 	typedComponentHasProp(componentLocalName, propName) {
@@ -16059,7 +17664,7 @@ var WrapperEmitter = class {
 	}
 	hasSourceOverrideFor(componentLocalName) {
 		const importInfo = this.importMap.get(componentLocalName);
-		return importInfo?.source.kind === "absolutePath" && this.sourceOverrides?.has(toRealPath(importInfo.source.value)) === true;
+		return importInfo?.source.kind === "absolutePath" && this.sourceOverrides?.has(resolveExistingFilePath(importInfo.source.value)) === true;
 	}
 	typeScriptComponentMetadataFor(componentLocalName) {
 		const importInfo = this.importMap.get(componentLocalName);
@@ -16319,7 +17924,7 @@ var WrapperEmitter = class {
 		emitted.push(stmt);
 		return true;
 	}
-	annotatePropsParam(propsId, localName, inlineTypeText) {
+	annotatePropsParam(propsParam, localName, inlineTypeText) {
 		const { j } = this;
 		if (!this.emitTypes) return;
 		if (inlineTypeText) {
@@ -16334,11 +17939,12 @@ var WrapperEmitter = class {
 				].join("\n"));
 			}
 			if (!typeNode) throw new Error(`Failed to parse inline props param type for ${localName} (${this.filePath}).`);
-			propsId.typeAnnotation = j.tsTypeAnnotation(typeNode);
-		} else propsId.typeAnnotation = j.tsTypeAnnotation(j.tsTypeReference(j.identifier(this.propsTypeNameFor(localName))));
+			propsParam.typeAnnotation = j.tsTypeAnnotation(typeNode);
+		} else propsParam.typeAnnotation = j.tsTypeAnnotation(j.tsTypeReference(j.identifier(this.propsTypeNameFor(localName))));
 	}
 	withChildren(innerTypeText) {
 		const t = innerTypeText.trim();
+		if (t === "{}") return "{ children?: React.ReactNode }";
 		if (t.startsWith("React.PropsWithChildren<")) return t;
 		if (/(?:^|&\s*)(?:React\.ComponentProps(?:WithRef)?<|(?:Omit|Pick|Partial|Required|Readonly|ReadonlyArray|NonNullable|Extract|Exclude)<\s*React\.ComponentProps(?:WithRef)?<)/.test(t)) return t;
 		return `React.PropsWithChildren<${t}>`;
@@ -16561,7 +18167,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("*") || this.isUsedAsValue(d);
+		const needsBroadAttrs = used.has("*") || this.isBroadValueUsage(d);
 		const lines = [];
 		const pickedAttrKeys = [];
 		if (!needsBroadAttrs) {
@@ -16604,6 +18210,7 @@ var WrapperEmitter = class {
 		const intrinsicBaseOmitted = [];
 		if (!allowClassNameProp) intrinsicBaseOmitted.push("\"className\"");
 		if (!allowStyleProp) intrinsicBaseOmitted.push("\"style\"");
+		if (!allowSxProp) intrinsicBaseOmitted.push("\"sx\"");
 		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) {
@@ -16781,27 +18388,18 @@ var WrapperEmitter = class {
 		for (const arg of styleArgs) if (arg?.type === "LogicalExpression" && arg.operator === "&&") collectCondIdentifiers(arg.left);
 		const isVoidTag = VOID_TAGS.has(tagName);
 		const allowForwardedAsProp = this.getUsedAttrs(localName).has("forwardedAs");
-		const propsParamId = j.identifier("props");
 		const needsPolymorphicTypeParams = this.emitTypes && (allowAsProp || inlineTypeNeedsElementGeneric(inlineTypeText));
-		if (this.emitTypes) if (inlineTypeText) {
-			let typeNode = null;
-			try {
-				typeNode = j(`const x: ${inlineTypeText} = null`).get().node.program.body[0].declarations[0].id.typeAnnotation.typeAnnotation;
-			} catch (e) {
-				throw new Error([
-					`Failed to parse inline wrapper props type for ${localName} (${tagName}).`,
-					`Inline type: ${inlineTypeText}`,
-					`Error: ${e instanceof Error ? e.message : String(e)}`
-				].join("\n"));
-			}
-			if (!typeNode) throw new Error(`Failed to parse inline wrapper props type for ${localName} (${tagName}).`);
-			propsParamId.typeAnnotation = j.tsTypeAnnotation(typeNode);
-		} else {
-			if (!propsTypeName) throw new Error(`Missing propsTypeName for ${localName} (${tagName}).`);
-			if (needsPolymorphicTypeParams) propsParamId.typeAnnotation = j(`const x: ${propsTypeName}<C> = null`).get().node.program.body[0].declarations[0].id.typeAnnotation;
-			else propsParamId.typeAnnotation = j.tsTypeAnnotation(j.tsTypeReference(j.identifier(propsTypeName)));
-		}
 		const propsId = j.identifier("props");
+		let restId = includeRest ? j.identifier("rest") : null;
+		const passChildrenThroughRest = shouldPassChildrenThroughRest({
+			includeChildren: !isVoidTag,
+			includeRest,
+			restId,
+			destructureProps,
+			defaultAttrs,
+			dynamicAttrs,
+			staticAttrs
+		});
 		const patternProps = [];
 		if (allowAsProp) patternProps.push(j.property.from({
 			kind: "init",
@@ -16810,8 +18408,9 @@ var WrapperEmitter = class {
 			shorthand: false
 		}));
 		if (allowForwardedAsProp) patternProps.push(this.patternProp("forwardedAs"));
-		if (!isVoidTag) patternProps.push(this.patternProp("children"));
-		if (includeRefProp) patternProps.push(this.patternProp("ref"));
+		if (!isVoidTag && !passChildrenThroughRest) patternProps.push(this.patternProp("children"));
+		const shouldForwardRefExplicitly = includeRefProp && !includeRest;
+		if (shouldForwardRefExplicitly) patternProps.push(this.patternProp("ref"));
 		if (allowClassNameProp) patternProps.push(this.patternProp("className"));
 		if (allowStyleProp) patternProps.push(this.patternProp("style"));
 		for (const name of expandedDestructureProps) if (name !== "children" && name !== "style" && name !== "className" && name !== "forwardedAs" && name !== "ref") {
@@ -16821,11 +18420,18 @@ var WrapperEmitter = class {
 		}
 		for (const a of defaultAttrs) if (!expandedDestructureProps.has(a.jsxProp)) patternProps.push(this.patternProp(a.jsxProp));
 		for (const attr of dynamicAttrs) if (!expandedDestructureProps.has(attr.jsxProp)) patternProps.push(this.patternProp(attr.jsxProp));
-		let restId = includeRest ? j.identifier("rest") : null;
 		if (includeRest && restId) patternProps.push(j.restElement(restId));
 		const usePropsDirectlyForRest = includeRest && patternProps.length === 1 && patternProps[0]?.type === "RestElement";
-		const usePropsChildrenDirectly = this.isChildrenOnlyDestructurePattern(patternProps);
+		const useChildrenParamDestructure = this.isChildrenOnlyDestructurePattern(patternProps);
 		if (usePropsDirectlyForRest) restId = propsId;
+		const propsParam = useChildrenParamDestructure ? this.buildChildrenOnlyParam(inlineTypeText ?? (propsTypeName ? `${propsTypeName}${needsPolymorphicTypeParams ? "<C>" : ""}` : void 0)) : j.identifier("props");
+		if (!useChildrenParamDestructure) this.annotateMinimalWrapperParam(propsParam, {
+			localName,
+			tagName,
+			inlineTypeText,
+			propsTypeName,
+			needsPolymorphicTypeParams
+		});
 		const classNameId = j.identifier("className");
 		const styleId = j.identifier("style");
 		const staticClassName = staticAttrs.className;
@@ -16860,7 +18466,7 @@ var WrapperEmitter = class {
 			jsxAttrs.push(j.jsxAttribute(j.jsxIdentifier(cond.attrName), j.jsxExpressionContainer(j.conditionalExpression(j.identifier(cond.jsxProp), typeof literalValue === "boolean" ? j.booleanLiteral(literalValue) : j.literal(literalValue), j.identifier("undefined")))));
 		}
 		for (const inv of invertedBoolAttrs) jsxAttrs.push(j.jsxAttribute(j.jsxIdentifier(inv.attrName), j.jsxExpressionContainer(j.binaryExpression("!==", j.identifier(inv.jsxProp), j.booleanLiteral(true)))));
-		if (includeRefProp) jsxAttrs.push(j.jsxAttribute(j.jsxIdentifier("ref"), j.jsxExpressionContainer(j.identifier("ref"))));
+		if (shouldForwardRefExplicitly) jsxAttrs.push(j.jsxAttribute(j.jsxIdentifier("ref"), j.jsxExpressionContainer(j.identifier("ref"))));
 		if (includeRest && restId) jsxAttrs.push(j.jsxSpreadAttribute(restId));
 		jsxAttrs.push(...buildDynamicAttrsFromProps(j, {
 			dynamicAttrs,
@@ -16877,15 +18483,15 @@ var WrapperEmitter = class {
 		if (merging.classNameAttr) jsxAttrs.push(j.jsxAttribute(j.jsxIdentifier("className"), j.jsxExpressionContainer(merging.classNameAttr)));
 		if (merging.styleAttr) jsxAttrs.push(j.jsxAttribute(j.jsxIdentifier("style"), j.jsxExpressionContainer(merging.styleAttr)));
 		const renderedJsxName = jsxNameFromString(j, allowAsProp ? "Component" : attrsAsTag ?? tagName);
-		const openingEl = j.jsxOpeningElement(renderedJsxName, jsxAttrs, isVoidTag);
-		const childrenExpr = usePropsChildrenDirectly ? j.memberExpression(propsId, j.identifier("children")) : j.identifier("children");
-		const jsx = j.jsxElement(openingEl, isVoidTag ? null : j.jsxClosingElement(renderedJsxName), isVoidTag ? [] : [j.jsxExpressionContainer(childrenExpr)]);
+		const openingEl = j.jsxOpeningElement(renderedJsxName, jsxAttrs, isVoidTag || passChildrenThroughRest);
+		const childrenExpr = j.identifier("children");
+		const jsx = j.jsxElement(openingEl, isVoidTag || passChildrenThroughRest ? null : j.jsxClosingElement(renderedJsxName), isVoidTag || passChildrenThroughRest ? [] : [j.jsxExpressionContainer(childrenExpr)]);
 		const bodyStmts = [];
-		if (!usePropsDirectlyForRest && !usePropsChildrenDirectly) bodyStmts.push(j.variableDeclaration("const", [j.variableDeclarator(j.objectPattern(patternProps), propsId)]));
+		if (!usePropsDirectlyForRest && !useChildrenParamDestructure) bodyStmts.push(j.variableDeclaration("const", [j.variableDeclarator(j.objectPattern(patternProps), propsId)]));
 		if (merging.sxDecl) bodyStmts.push(merging.sxDecl);
 		bodyStmts.push(j.returnStatement(jsx));
 		const filteredBody = bodyStmts.filter((stmt) => stmt && stmt.type !== "EmptyStatement");
-		const fn = j.functionDeclaration(j.identifier(localName), [propsParamId], j.blockStatement(filteredBody));
+		const fn = j.functionDeclaration(j.identifier(localName), [propsParam], j.blockStatement(filteredBody));
 		if (needsPolymorphicTypeParams) fn.typeParameters = buildPolymorphicTypeParams(j, tagName);
 		return [fn];
 	}
@@ -16934,9 +18540,42 @@ var WrapperEmitter = class {
 	buildWrapperFunction(args) {
 		return buildWrapperFunction(this.j, args);
 	}
+	buildChildrenOnlyParam(typeText) {
+		if (!this.emitTypes) return this.j.objectPattern([this.patternProp("children")]);
+		if (!typeText) throw new Error("Missing props type for children-only wrapper parameter.");
+		return this.j(`function _({ children }: ${typeText}) {}`).get().node.program.body[0].params[0];
+	}
+	annotateMinimalWrapperParam(propsParam, args) {
+		const { localName, tagName, inlineTypeText, propsTypeName, needsPolymorphicTypeParams } = args;
+		if (!this.emitTypes) return;
+		if (inlineTypeText) {
+			let typeNode = null;
+			try {
+				typeNode = this.j(`const x: ${inlineTypeText} = null`).get().node.program.body[0].declarations[0].id.typeAnnotation.typeAnnotation;
+			} catch (e) {
+				throw new Error([
+					`Failed to parse inline wrapper props type for ${localName} (${tagName}).`,
+					`Inline type: ${inlineTypeText}`,
+					`Error: ${e instanceof Error ? e.message : String(e)}`
+				].join("\n"));
+			}
+			if (!typeNode) throw new Error(`Failed to parse inline wrapper props type for ${localName} (${tagName}).`);
+			propsParam.typeAnnotation = this.j.tsTypeAnnotation(typeNode);
+			return;
+		}
+		if (!propsTypeName) throw new Error(`Missing propsTypeName for ${localName} (${tagName}).`);
+		if (needsPolymorphicTypeParams) {
+			propsParam.typeAnnotation = this.j(`const x: ${propsTypeName}<C> = null`).get().node.program.body[0].declarations[0].id.typeAnnotation;
+			return;
+		}
+		propsParam.typeAnnotation = this.j.tsTypeAnnotation(this.j.tsTypeReference(this.j.identifier(propsTypeName)));
+	}
 	buildDestructurePatternProps(args) {
 		return buildDestructurePatternProps(this.j, this.patternProp, args);
 	}
+	shouldPassChildrenThroughRest(args) {
+		return shouldPassChildrenThroughRest(args);
+	}
 	isChildrenOnlyDestructurePattern(patternProps) {
 		return isChildrenOnlyDestructurePattern(patternProps);
 	}
@@ -17297,7 +18936,7 @@ function emitComponentWrappers(emitter) {
 		});
 		if (varDecl.size() > 0) {
 			const init = varDecl.get().node.init;
-			if (isFunctionNode(init)) return firstParamType(init);
+			if (isFunctionNode$1(init)) return firstParamType(init);
 		}
 		return null;
 	};
@@ -17561,6 +19200,9 @@ function emitComponentWrappers(emitter) {
 		const namespaceBooleanProps = [];
 		const styleOnlyConditionProps = /* @__PURE__ */ new Set();
 		const styleFnValueProps = /* @__PURE__ */ new Set();
+		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({
 			entries: d.extraStylexPropsArgs,
 			destructureProps
@@ -17735,6 +19377,19 @@ function emitComponentWrappers(emitter) {
 			node: arg,
 			propNames: splicedStyleFnProps
 		});
+		const localOnlyPropsTypeText = localOnlyComponentWrapperPropsTypeText({
+			d,
+			emitter,
+			allowClassNameProp,
+			allowStyleProp,
+			exposeSxProp,
+			forceClassNameOptional,
+			forceStyleOptional,
+			functionParamTypeName,
+			isPolymorphicComponentWrapper,
+			shouldLowerForwardedAs
+		});
+		if (localOnlyPropsTypeText) inlineTypeText = localOnlyPropsTypeText;
 		const propsParamId = j.identifier("props");
 		let polymorphicFnTypeParams = null;
 		if (isPolymorphicComponentWrapper && emitTypes) {
@@ -17767,15 +19422,14 @@ function emitComponentWrappers(emitter) {
 		const staticAttrsForJsx = attrsSxExpr ? omitStaticAttr(staticAttrs, "sx") : staticAttrs;
 		const attrsStaticStyleExpr = attrsInfo?.attrsStaticStyleExpr;
 		const needsSxVar = allowClassNameProp || allowStyleProp || wrappedAcceptsSx || !!d.inlineStyleProps?.length || !!attrsStaticStyleExpr || !!staticClassNameExpr;
-		const needsDestructure = destructureProps.length > 0 || needsSxVar || isPolymorphicComponentWrapper || defaultAttrs.length > 0 || dynamicAttrs.length > 0 || shouldLowerForwardedAs || (d.supportsRefProp ?? false);
+		const needsDestructure = destructureProps.length > 0 || needsSxVar || isPolymorphicComponentWrapper || defaultAttrs.length > 0 || dynamicAttrs.length > 0 || shouldLowerForwardedAs;
 		const includeChildren = !isPolymorphicComponentWrapper && emitter.hasJsxChildrenUsage(d.localName);
 		if (needsDestructure) {
 			const childrenId = j.identifier("children");
 			const classNameId = j.identifier("className");
 			const styleId = j.identifier("style");
 			const sxId = j.identifier("sx");
-			const refId = j.identifier("ref");
-			const restId = j.identifier("rest");
+			let restId = j.identifier("rest");
 			const componentId = j.identifier("Component");
 			const forwardedAsId = j.identifier("forwardedAs");
 			const wrappedComponentExpr = buildWrappedComponentExpr();
@@ -17788,14 +19442,22 @@ function emitComponentWrappers(emitter) {
 			const destructureStyle = allowStyleProp && !canForwardClassNameStyleThroughRest;
 			const destructureSx = exposeSxProp;
 			const destructurePropsForPattern = needsUseTheme ? destructureProps.filter((name) => name !== "theme") : destructureProps;
+			const passChildrenThroughRest = emitter.shouldPassChildrenThroughRest({
+				includeChildren,
+				includeRest: true,
+				restId,
+				destructureProps: destructurePropsForPattern,
+				defaultAttrs,
+				dynamicAttrs,
+				staticAttrs: staticAttrsForJsx
+			});
 			const patternProps = emitter.buildDestructurePatternProps({
 				baseProps: [
 					...isPolymorphicComponentWrapper ? [j.property("init", j.identifier("as"), j.assignmentPattern(componentId, wrappedComponentExpr))] : [],
 					...destructureClassName ? [patternProp("className", classNameId)] : [],
-					...includeChildren ? [patternProp("children", childrenId)] : [],
+					...includeChildren && !passChildrenThroughRest ? [patternProp("children", childrenId)] : [],
 					...destructureStyle ? [patternProp("style", styleId)] : [],
 					...destructureSx ? [patternProp("sx", sxId)] : [],
-					...d.supportsRefProp ?? false ? [patternProp("ref", refId)] : [],
 					...shouldLowerForwardedAs ? [patternProp("forwardedAs", forwardedAsId)] : []
 				],
 				destructureProps: destructurePropsForPattern,
@@ -17803,7 +19465,9 @@ function emitComponentWrappers(emitter) {
 				includeRest: true,
 				restId
 			});
-			const declStmt = j.variableDeclaration("const", [j.variableDeclarator(j.objectPattern(patternProps), propsId)]);
+			const usePropsDirectlyForRest = patternProps.length === 1 && patternProps[0]?.type === "RestElement";
+			if (usePropsDirectlyForRest) restId = propsId;
+			const declStmt = usePropsDirectlyForRest ? null : j.variableDeclaration("const", [j.variableDeclarator(j.objectPattern(patternProps), propsId)]);
 			const merging = emitStyleMerging({
 				j,
 				emitter,
@@ -17820,7 +19484,8 @@ function emitComponentWrappers(emitter) {
 				wrappedAcceptsSxProp: wrappedAcceptsSx,
 				keepStylePropSeparate: shouldKeepStylePropSeparate(renderedComponent)
 			});
-			const stmts = [declStmt];
+			const stmts = [];
+			if (declStmt) stmts.push(declStmt);
 			if (needsUseTheme) stmts.push(buildUseThemeDeclaration(j, emitter.themeHookLocalName));
 			if (merging.sxDecl) stmts.push(merging.sxDecl);
 			const openingAttrs = [];
@@ -17836,7 +19501,6 @@ function emitComponentWrappers(emitter) {
 				defaultAttrs,
 				propExprFor: (prop) => j.identifier(prop)
 			}));
-			if (d.supportsRefProp ?? false) openingAttrs.push(j.jsxAttribute(j.jsxIdentifier("ref"), j.jsxExpressionContainer(refId)));
 			const forwardedProps = /* @__PURE__ */ new Set();
 			for (const attr of defaultAttrs) forwardedProps.add(attr.attrName);
 			for (const attr of dynamicAttrs) forwardedProps.add(attr.attrName);
@@ -17864,6 +19528,7 @@ function emitComponentWrappers(emitter) {
 			}
 			const baseExplicitProps = baseComponentPropsType ? emitter.getExplicitPropNames(baseComponentPropsType) : null;
 			for (const propName of destructureProps) if (propName && propName !== "children" && !propName.startsWith("$") && !renamedFromTransient.has(propName)) {
+				if (observedExpressionConditionDropProps.has(propName) && !baseExplicitProps?.has(propName)) continue;
 				if (styleOnlyConditionProps.has(propName)) {
 					if (!baseExplicitProps || baseExplicitProps.has(propName)) pushForwardedProp(propName);
 					continue;
@@ -17890,7 +19555,7 @@ function emitComponentWrappers(emitter) {
 			const jsx = emitter.buildJsxElement({
 				tagName: jsxTagName,
 				attrs: openingAttrs,
-				includeChildren,
+				includeChildren: includeChildren && !passChildrenThroughRest,
 				childrenExpr: childrenId
 			});
 			stmts.push(j.returnStatement(jsx));
@@ -17936,6 +19601,24 @@ function emitComponentWrappers(emitter) {
 function shouldKeepStylePropSeparate(componentName) {
 	return componentName.startsWith("motion.") || componentName.startsWith("animated.");
 }
+function localOnlyComponentWrapperPropsTypeText(args) {
+	const { d, emitter, allowClassNameProp, allowStyleProp, exposeSxProp, forceClassNameOptional, forceStyleOptional, functionParamTypeName, isPolymorphicComponentWrapper, shouldLowerForwardedAs } = args;
+	if (!emitter.emitTypes || d.isExported || emitter.exportedComponents.has(d.localName) || d.propsType || d.consumerUsesSpread || emitter.isBroadValueUsage(d) || functionParamTypeName || isPolymorphicComponentWrapper || allowClassNameProp || allowStyleProp || exposeSxProp || forceClassNameOptional || forceStyleOptional || shouldLowerForwardedAs || !hasStaticComponentAttrs(d) || hasPropDrivenComponentWrapperBehavior(d) || hasRuntimeAttrsProps(d)) return null;
+	const usedAttrs = emitter.getUsedAttrs(d.localName);
+	if (usedAttrs.has("*") || [...usedAttrs].some((attr) => attr !== "children")) return null;
+	if (!usedAttrs.has("children") && !emitter.hasJsxChildrenUsage(d.localName)) return null;
+	return "{ children?: React.ReactNode }";
+}
+function hasStaticComponentAttrs(d) {
+	return Object.keys(d.attrsInfo?.staticAttrs ?? {}).length > 0;
+}
+function hasRuntimeAttrsProps(d) {
+	const attrsInfo = d.attrsInfo;
+	return !!((attrsInfo?.defaultAttrs?.length ?? 0) > 0 || (attrsInfo?.dynamicAttrs?.length ?? 0) > 0 || (attrsInfo?.conditionalAttrs?.length ?? 0) > 0 || (attrsInfo?.invertedBoolAttrs?.length ?? 0) > 0 || (attrsInfo?.attrsDynamicStyles?.length ?? 0) > 0 || attrsInfo?.attrsStaticStyleExpr);
+}
+function hasPropDrivenComponentWrapperBehavior(d) {
+	return !!(d.enumVariant || d.shouldForwardProp || (d.inlineStyleProps?.length ?? 0) > 0 || (d.styleFnFromProps?.length ?? 0) > 0 || (d.variantDimensions?.length ?? 0) > 0 || (d.compoundVariants?.length ?? 0) > 0 || Object.keys(d.variantStyleKeys ?? {}).length > 0 || (d.transientPropRenames?.size ?? 0) > 0 || (d.observedExpressionConditionDropProps?.size ?? 0) > 0 || (d.styleValueVariantProps?.size ?? 0) > 0);
+}
 function getExplicitAttrsOmitUnion(args) {
 	const { attrsProvidedPropNames, emitter, propsType } = args;
 	if (!propsType || attrsProvidedPropNames.size === 0) return null;
@@ -18786,6 +20469,7 @@ function createEmitIntrinsicHelpers(env) {
 		const omitted = [];
 		if (!allowClassNameProp) omitted.push("\"className\"");
 		if (!allowStyleProp) omitted.push("\"style\"");
+		if (!allowSxProp) omitted.push("\"sx\"");
 		const base = omitted.length > 0 ? `Omit<React.ComponentPropsWithRef<C>, ${omitted.join(" | ")}>` : "React.ComponentPropsWithRef<C>";
 		const forwardedAsPart = includeForwardedAs ? ` & ${FORWARDED_AS_TYPE}` : "";
 		const sxPropPart = allowSxProp ? `${SX_PROP_TYPE_TEXT}; ` : "";
@@ -18893,11 +20577,16 @@ function buildAttrWrapperBody(ctx, args) {
 	const { d, tagName, allowClassNameProp, allowAsProp, includesForwardedAs, includeChildren, styleArgs, extraDestructureProps, extraBodyStatements, extraJsxAttrs, pseudoGuardProps } = args;
 	const classNameId = j.identifier("className");
 	const childrenId = j.identifier("children");
-	const refId = j.identifier("ref");
 	const restId = j.identifier("rest");
 	const forwardedAsId = j.identifier("forwardedAs");
 	const componentId = j.identifier("Component");
 	const sxId = j.identifier("sx");
+	const passChildrenThroughRest = emitter.shouldPassChildrenThroughRest({
+		includeChildren,
+		includeRest: true,
+		restId,
+		destructureProps: [...extraDestructureProps, ...pseudoGuardProps]
+	});
 	const baseProps = [
 		...allowAsProp ? [j.property.from({
 			kind: "init",
@@ -18908,8 +20597,7 @@ function buildAttrWrapperBody(ctx, args) {
 		...includesForwardedAs ? [ctx.patternProp("forwardedAs", forwardedAsId)] : [],
 		...extraDestructureProps.map((name) => ctx.patternProp(name, j.identifier(name))),
 		...allowClassNameProp ? [ctx.patternProp("className", classNameId)] : [],
-		...includeChildren ? [ctx.patternProp("children", childrenId)] : [],
-		...d.supportsRefProp ?? false ? [ctx.patternProp("ref", refId)] : []
+		...includeChildren && !passChildrenThroughRest ? [ctx.patternProp("children", childrenId)] : []
 	];
 	const patternProps = emitter.buildDestructurePatternProps({
 		baseProps,
@@ -18925,10 +20613,8 @@ function buildAttrWrapperBody(ctx, args) {
 		openingAttrs.push(j.jsxSpreadAttribute(sxId));
 		openingAttrs.push(j.jsxAttribute(j.jsxIdentifier("className"), j.jsxExpressionContainer(j.callExpression(j.memberExpression(j.callExpression(j.memberExpression(j.arrayExpression([j.memberExpression(sxId, j.identifier("className")), classNameId]), j.identifier("filter")), [j.identifier("Boolean")]), j.identifier("join")), [j.literal(" ")]))));
 		openingAttrs.push(...extraJsxAttrs);
-		if (d.supportsRefProp ?? false) openingAttrs.push(j.jsxAttribute(j.jsxIdentifier("ref"), j.jsxExpressionContainer(refId)));
 		openingAttrs.push(j.jsxSpreadAttribute(restId));
 	} else {
-		if (d.supportsRefProp ?? false) openingAttrs.push(j.jsxAttribute(j.jsxIdentifier("ref"), j.jsxExpressionContainer(refId)));
 		openingAttrs.push(...extraJsxAttrs);
 		openingAttrs.push(j.jsxSpreadAttribute(restId));
 		openingAttrs.push(j.jsxSpreadAttribute(sxId));
@@ -18937,7 +20623,7 @@ function buildAttrWrapperBody(ctx, args) {
 	const jsx = emitter.buildJsxElement({
 		tagName: jsxTag,
 		attrs: openingAttrs,
-		includeChildren,
+		includeChildren: includeChildren && !passChildrenThroughRest,
 		childrenExpr: childrenId
 	});
 	const fnBodyStmts = [
@@ -18970,6 +20656,7 @@ function emitInputWrappers(ctx) {
 			const omitted = [];
 			if (!allowClassNameProp) omitted.push("\"className\"");
 			if (!allowStyleProp) omitted.push("\"style\"");
+			omitted.push("\"sx\"");
 			return omitted.length > 0 ? `Omit<${base}, ${omitted.join(" | ")}>` : base;
 		})(), includesForwardedAs);
 		emitPropsType({
@@ -19033,6 +20720,7 @@ function emitLinkWrappers(ctx) {
 			const omitted = [];
 			if (!allowClassNameProp) omitted.push("\"className\"");
 			if (!allowStyleProp) omitted.push("\"style\"");
+			omitted.push("\"sx\"");
 			return omitted.length > 0 ? `Omit<${base}, ${omitted.join(" | ")}>` : base;
 		})()), includesForwardedAs);
 		emitPropsType({
@@ -19114,7 +20802,7 @@ function emitEnumVariantWrappers(ctx) {
 			const hasNeq = cases.some((c) => c.kind === "neq");
 			const values = [...new Set(cases.map((c) => c.whenValue))].filter(Boolean);
 			const union = hasNeq ? "string" : values.length > 0 ? values.map((v) => JSON.stringify(v)).join(" | ") : "string";
-			const typeText = emitter.withChildren(`React.HTMLAttributes<HTMLDivElement> & { ${propName}?: ${union} }`);
+			const typeText = emitter.withChildren(`Omit<React.HTMLAttributes<HTMLDivElement>, "sx"> & { ${propName}?: ${union} }`);
 			emitPropsType({
 				localName: d.localName,
 				tagName,
@@ -19245,6 +20933,7 @@ function emitIntrinsicPolymorphicWrappers(ctx) {
 			const omitted = [];
 			if (!allowClassNameProp) omitted.push("\"className\"");
 			if (!allowStyleProp) omitted.push("\"style\"");
+			if (!allowSxProp) omitted.push("\"sx\"");
 			if (explicit) {
 				const keyofExpr = emitter.keyofExprForType(d.propsType, explicit);
 				if (keyofExpr) omitted.push(keyofExpr);
@@ -19291,6 +20980,15 @@ function emitIntrinsicPolymorphicWrappers(ctx) {
 		const sxId = j.identifier("sx");
 		const forwardedAsId = j.identifier("forwardedAs");
 		if (allowSxProp) styleArgs.push(sxId);
+		const passChildrenThroughRest = emitter.shouldPassChildrenThroughRest({
+			includeChildren,
+			includeRest: true,
+			restId,
+			destructureProps,
+			defaultAttrs: d.attrsInfo?.defaultAttrs ?? [],
+			dynamicAttrs: d.attrsInfo?.dynamicAttrs ?? [],
+			staticAttrs: d.attrsInfo?.staticAttrs ?? {}
+		});
 		const patternProps = emitter.buildDestructurePatternProps({
 			baseProps: [
 				...allowAsProp ? [j.property.from({
@@ -19301,7 +20999,7 @@ function emitIntrinsicPolymorphicWrappers(ctx) {
 				})] : [],
 				...includesForwardedAs ? [ctx.patternProp("forwardedAs", forwardedAsId)] : [],
 				...allowClassNameProp ? [ctx.patternProp("className", classNameId)] : [],
-				...includeChildren ? [ctx.patternProp("children", childrenId)] : [],
+				...includeChildren && !passChildrenThroughRest ? [ctx.patternProp("children", childrenId)] : [],
 				...allowStyleProp ? [ctx.patternProp("style", styleId)] : [],
 				...allowSxProp ? [ctx.patternProp("sx", sxId)] : []
 			],
@@ -19346,7 +21044,7 @@ function emitIntrinsicPolymorphicWrappers(ctx) {
 		const jsx = emitter.buildJsxElement({
 			tagName: allowAsProp ? "Component" : tagName,
 			attrs,
-			includeChildren,
+			includeChildren: includeChildren && !passChildrenThroughRest,
 			childrenExpr: childrenId
 		});
 		const fnBodyStmts = [declStmt];
@@ -19405,10 +21103,10 @@ function emitShouldForwardPropWrappers(ctx) {
 		const dropPrefixFromFilter = d.shouldForwardProp?.dropPrefix;
 		const usedAttrs = emitter.getUsedAttrs(d.localName);
 		const shouldAllowAnyPrefixProps = !!dropPrefixFromFilter && (usedAttrs.has("*") || [...usedAttrs].some((n) => n.startsWith(dropPrefixFromFilter) && !extraProps.has(n)));
-		const knownPrefixProps = dropPrefixFromFilter ? [...extraProps].filter((p) => p.startsWith(dropPrefixFromFilter) && isValidIdentifierName$1(p)) : [];
+		const knownPrefixProps = dropPrefixFromFilter ? [...extraProps].filter((p) => p.startsWith(dropPrefixFromFilter) && isValidIdentifierName(p)) : [];
 		const knownPrefixPropsSet = new Set(knownPrefixProps);
 		const isExportedComponent = d.isExported ?? false;
-		const useSlimType = !isExportedComponent && !(d.supportsExternalStyles ?? false) && !d.usedAsValue;
+		const useSlimType = !isExportedComponent && !(d.supportsExternalStyles ?? false) && !emitter.isBroadValueUsage(d);
 		const explicit = emitter.stringifyTsType(d.propsType);
 		const explicitPropNames = d.propsType ? emitter.getExplicitPropNames(d.propsType) : /* @__PURE__ */ new Set();
 		const skipProps = new Set([...explicitPropNames, ...extraProps]);
@@ -19448,6 +21146,7 @@ function emitShouldForwardPropWrappers(ctx) {
 				const omitted = [];
 				if (!allowClassNameProp) omitted.push("\"className\"");
 				if (!allowStyleProp) omitted.push("\"style\"");
+				if (!allowSxProp) omitted.push("\"sx\"");
 				const baseWithOmit = omitted.length ? `Omit<${base}, ${omitted.join(" | ")}>` : base;
 				return emitter.joinIntersection(extrasTypeText, consumedPropsTypeText, baseWithOmit);
 			}
@@ -19488,6 +21187,7 @@ function emitShouldForwardPropWrappers(ctx) {
 				const omitted = [];
 				if (!allowClassNameProp) omitted.push("\"className\"");
 				if (!allowStyleProp) omitted.push("\"style\"");
+				if (!allowSxProp) omitted.push("\"sx\"");
 				return omitted.length ? `Omit<${base}, ${omitted.join(" | ")}>` : base;
 			})();
 			if (explicitIsExistingTypeRef) if (useSlimType) sfpInlineTypeText = finalTypeTextWithForwardedAs;
@@ -19625,19 +21325,29 @@ function emitShouldForwardPropWrappers(ctx) {
 		});
 		const shouldOmitRestSpread = !isExportedComponent && !dropPrefix && dropProps.length > 0 && dropProps.every((p) => p.startsWith("$")) && !usedAttrs.has("*") && [...usedAttrs].every((n) => n === "children" || dropProps.includes(n));
 		const includeRest = d.shouldForwardPropFromWithConfig || d.variantDimensions?.some((dim) => dim.namespaceBooleanProp) || isExportedComponent || (d.supportsExternalStyles ?? false) || !shouldOmitRestSpread && shouldIncludeRest;
+		const shouldForwardRefExplicitly = (d.supportsRefProp ?? false) && !includeRest;
 		const isVoid = VOID_TAGS.has(tagName);
 		const includeChildren = allowAsProp || !isVoid;
 		const sxId = j.identifier("sx");
 		if (allowSxProp) styleArgs.push(sxId);
 		const destructurePartsForPattern = needsUseTheme ? destructureParts.filter((name) => name !== "theme") : destructureParts;
+		const passChildrenThroughRest = emitter.shouldPassChildrenThroughRest({
+			includeChildren,
+			includeRest,
+			restId,
+			destructureProps: destructurePartsForPattern,
+			defaultAttrs: d.attrsInfo?.defaultAttrs ?? [],
+			dynamicAttrs: d.attrsInfo?.dynamicAttrs ?? [],
+			staticAttrs: d.attrsInfo?.staticAttrs ?? {}
+		});
 		const patternProps = emitter.buildDestructurePatternProps({
 			baseProps: [
 				...allowAsProp ? [asDestructureProp(tagName)] : [],
 				...includesForwardedAs ? [ctx.patternProp("forwardedAs", forwardedAsId)] : [],
 				...allowClassNameProp ? [ctx.patternProp("className", classNameId)] : [],
-				...includeChildren ? [ctx.patternProp("children", childrenId)] : [],
+				...includeChildren && !passChildrenThroughRest ? [ctx.patternProp("children", childrenId)] : [],
 				...allowStyleProp ? [ctx.patternProp("style", styleId)] : [],
-				...d.supportsRefProp ?? false ? [ctx.patternProp("ref", refId)] : [],
+				...shouldForwardRefExplicitly ? [ctx.patternProp("ref", refId)] : [],
 				...allowSxProp ? [ctx.patternProp("sx", sxId)] : []
 			],
 			destructureProps: destructurePartsForPattern,
@@ -19677,7 +21387,7 @@ function emitShouldForwardPropWrappers(ctx) {
 				attrsInfo: attrsInfoForJsx,
 				propExprFor: (prop) => j.identifier(prop)
 			}) : [],
-			...d.supportsRefProp ?? false ? [j.jsxAttribute(j.jsxIdentifier("ref"), j.jsxExpressionContainer(refId))] : [],
+			...shouldForwardRefExplicitly ? [j.jsxAttribute(j.jsxIdentifier("ref"), j.jsxExpressionContainer(refId))] : [],
 			...includeRest ? [j.jsxSpreadAttribute(restId)] : [],
 			...emitter.buildDynamicAttrsFromProps({
 				dynamicAttrs: attrsInfoForJsx?.dynamicAttrs ?? [],
@@ -19689,7 +21399,7 @@ function emitShouldForwardPropWrappers(ctx) {
 		const jsx = emitter.buildJsxElement({
 			tagName: allowAsProp ? "Component" : tagName,
 			attrs: openingAttrs,
-			includeChildren,
+			includeChildren: includeChildren && !passChildrenThroughRest,
 			childrenExpr: childrenId
 		});
 		const fnBodyStmts = [declStmt];
@@ -19738,7 +21448,7 @@ function buildExtraPropTypeLines(d, extraProps, skip) {
 	const staticVariantPropTypes = buildStaticVariantPropTypes(d);
 	const lines = [];
 	for (const p of extraProps) {
-		if (!isValidIdentifierName$1(p) || skip?.(p)) continue;
+		if (!isValidIdentifierName(p) || skip?.(p)) continue;
 		const variantType = variantDimByProp.get(p);
 		if (variantType) {
 			lines.push(`  ${p}?: ${variantType};`);
@@ -19778,7 +21488,7 @@ function emitSimpleWithConfigWrappers(ctx) {
 		const allowStyleProp = emitter.shouldAllowStyleProp(d);
 		const allowSxProp = emitter.shouldAllowSxProp(d);
 		const allowAsProp = shouldAllowAsProp(d, tagName);
-		const useSlimType = !(d.isExported ?? false) && !supportsExternalStyles && !d.usedAsValue;
+		const useSlimType = !(d.isExported ?? false) && !supportsExternalStyles && !emitter.isBroadValueUsage(d);
 		const willForwardRef = (d.supportsRefProp ?? false) || allowClassNameProp || allowStyleProp || (() => {
 			const used = emitter.getUsedAttrs(d.localName);
 			return used.has("*") || !!d.usedAsValue || (d.isExported ?? false) || used.size > 0 || hasElementPropsInDefaultAttrs(d);
@@ -19789,7 +21499,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("*")) return true;
+				if (used.has("*") || d.valueUsageKind === "virtualListElementType") return true;
 				return used.size > 0;
 			})();
 			const baseTypeText = shouldUseIntrinsicProps ? emitter.inferredIntrinsicPropsTypeText({
@@ -19844,12 +21554,11 @@ function emitSimpleWithConfigWrappers(ctx) {
 		const classNameId = j.identifier("className");
 		const childrenId = j.identifier("children");
 		const styleId = j.identifier("style");
-		const refId = j.identifier("ref");
 		const restId = j.identifier("rest");
 		const isVoidTag = VOID_TAGS.has(tagName);
 		if (!allowClassNameProp && !allowStyleProp && !needsUseThemeWithConfig) {
 			const usedAttrs = emitter.getUsedAttrs(d.localName);
-			const includeRest = usedAttrs.has("*") || !!d.usedAsValue || (d.isExported ?? false) || usedAttrs.size > 0 || hasElementPropsInDefaultAttrs(d);
+			const includeRest = usedAttrs.has("*") || emitter.isBroadValueUsage(d) || (d.isExported ?? false) || usedAttrs.size > 0 || hasElementPropsInDefaultAttrs(d);
 			const variantProps = /* @__PURE__ */ new Set();
 			if (d.variantStyleKeys) for (const [when] of Object.entries(d.variantStyleKeys)) {
 				const { props } = emitter.collectConditionProps({ when });
@@ -19905,13 +21614,21 @@ function emitSimpleWithConfigWrappers(ctx) {
 		}
 		const sxId = j.identifier("sx");
 		if (allowSxProp) styleArgs.push(sxId);
+		const passChildrenThroughRest = emitter.shouldPassChildrenThroughRest({
+			includeChildren: !isVoidTag,
+			includeRest: true,
+			restId,
+			destructureProps: [...pseudoGuardProps],
+			defaultAttrs: d.attrsInfo?.defaultAttrs ?? [],
+			dynamicAttrs: d.attrsInfo?.dynamicAttrs ?? [],
+			staticAttrs: d.attrsInfo?.staticAttrs ?? {}
+		});
 		const patternProps = emitter.buildDestructurePatternProps({
 			baseProps: [
 				...allowAsProp ? [asDestructureProp(tagName)] : [],
 				emitter.patternProp("className", classNameId),
-				...isVoidTag ? [] : [emitter.patternProp("children", childrenId)],
+				...!isVoidTag && !passChildrenThroughRest ? [emitter.patternProp("children", childrenId)] : [],
 				emitter.patternProp("style", styleId),
-				...d.supportsRefProp ?? false ? [emitter.patternProp("ref", refId)] : [],
 				...allowSxProp ? [emitter.patternProp("sx", sxId)] : []
 			],
 			destructureProps: [...pseudoGuardProps],
@@ -19939,7 +21656,6 @@ function emitSimpleWithConfigWrappers(ctx) {
 				attrsInfo,
 				propExprFor: (prop) => j.identifier(prop)
 			}),
-			...d.supportsRefProp ?? false ? [j.jsxAttribute(j.jsxIdentifier("ref"), j.jsxExpressionContainer(refId))] : [],
 			j.jsxSpreadAttribute(restId),
 			...emitter.buildDynamicAttrsFromProps({
 				dynamicAttrs: attrsInfo?.dynamicAttrs ?? [],
@@ -19947,8 +21663,8 @@ function emitSimpleWithConfigWrappers(ctx) {
 			})
 		];
 		emitter.appendMergingAttrs(openingAttrs, merging);
-		const openingEl = j.jsxOpeningElement(j.jsxIdentifier(allowAsProp ? "Component" : tagName), openingAttrs, false);
-		const jsx = isVoidTag ? {
+		const openingEl = j.jsxOpeningElement(j.jsxIdentifier(allowAsProp ? "Component" : tagName), openingAttrs, isVoidTag || passChildrenThroughRest);
+		const jsx = isVoidTag || passChildrenThroughRest ? {
 			type: "JSXElement",
 			openingElement: {
 				...openingEl,
@@ -19999,8 +21715,8 @@ function emitSimpleExportedIntrinsicWrappers(ctx) {
 		let inlineTypeText;
 		const isExportedComponent = d.isExported ?? false;
 		const usePolymorphicPattern = allowAsProp && isExportedComponent;
-		const willForwardRef = (d.supportsRefProp ?? false) || isExportedComponent || hasComplementaryVariantPairs(d) || !!d.variantDimensions?.some((dim) => dim.namespaceBooleanProp);
-		const useSlimType = !isExportedComponent && !(d.supportsExternalStyles ?? false) && !d.usedAsValue && !hasElementPropsInDefaultAttrs(d);
+		const willForwardRef = (d.supportsRefProp ?? false) || isExportedComponent || d.valueUsageKind === "virtualListElementType" || 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);
 			const explicitPropNames = d.propsType ? emitter.getExplicitPropNames(d.propsType) : /* @__PURE__ */ new Set();
@@ -20038,7 +21754,7 @@ function emitSimpleExportedIntrinsicWrappers(ctx) {
 				forceNarrow: useSlimType
 			});
 			const supportsExternalStyles = d.supportsExternalStyles ?? false;
-			const needsRestForType = !!d.usedAsValue || usedAttrsForType.has("*") || d.consumerUsesSpread === true || d.consumerUsesElementProps === true || d.consumerUsesSpread === void 0 && d.consumerUsesElementProps === void 0 && supportsExternalStyles || hasElementPropsInDefaultAttrs(d) || [...usedAttrsForType].some((n) => {
+			const needsRestForType = emitter.isBroadValueUsage(d) || usedAttrsForType.has("*") || d.consumerUsesSpread === true || d.consumerUsesElementProps === true || d.consumerUsesSpread === void 0 && d.consumerUsesElementProps === void 0 && supportsExternalStyles || hasElementPropsInDefaultAttrs(d) || [...usedAttrsForType].some((n) => {
 				if (n === "children" || n === "className" || n === "style" || n === "as" || n === "forwardedAs" || n.startsWith("$")) return false;
 				return !handledProps.has(n);
 			});
@@ -20047,6 +21763,7 @@ function emitSimpleExportedIntrinsicWrappers(ctx) {
 				const omitted = [];
 				if (!allowClassNameProp) omitted.push("\"className\"");
 				if (!allowStyleProp) omitted.push("\"style\"");
+				if (!allowSxProp) omitted.push("\"sx\"");
 				return omitted.length ? `Omit<${base}, ${omitted.join(" | ")}>` : base;
 			})();
 			const customStyleDrivingPropsTypeText = (() => {
@@ -20062,7 +21779,7 @@ function emitSimpleExportedIntrinsicWrappers(ctx) {
 				const compoundVariantWhenKeys = collectCompoundVariantKeys(d.compoundVariants, { syntheticOnly: true });
 				for (const k of compoundVariantWhenKeys) keys.delete(k);
 				const variantDimByProp = buildVariantDimPropTypeMap(d);
-				const filtered = [...keys].filter((k) => k && isValidIdentifierName$1(k) && k !== "children" && k !== "className" && k !== "style" && k !== "as" && k !== "forwardedAs" && (!explicitPropNames.has(k) || variantDimByProp.has(k) && !d.typeScriptPropTypes?.has(k)));
+				const filtered = [...keys].filter((k) => k && isValidIdentifierName(k) && k !== "children" && k !== "className" && k !== "style" && k !== "as" && k !== "forwardedAs" && (!explicitPropNames.has(k) || variantDimByProp.has(k) && !d.typeScriptPropTypes?.has(k)));
 				if (filtered.length === 0) return "{}";
 				const staticVariantPropTypes = buildStaticVariantPropTypes(d);
 				return `{\n${filtered.map((k) => {
@@ -20079,7 +21796,8 @@ function emitSimpleExportedIntrinsicWrappers(ctx) {
 				propsType: d.propsType,
 				typeText: explicit,
 				allowClassNameProp,
-				allowStyleProp
+				allowStyleProp,
+				allowSxProp
 			}) : void 0;
 			const explicitTypeIncludesIntrinsicProps = !!d.propsType && explicitTypeMayContainExternalStyleProps({
 				ctx,
@@ -20231,8 +21949,6 @@ function emitSimpleExportedIntrinsicWrappers(ctx) {
 		if (useAsProp || allowClassNameProp || allowStyleProp || needsUseTheme) {
 			const isVoidTag = VOID_TAGS.has(tagName);
 			const includeChildren = useAsProp || !isVoidTag;
-			const propsParamId = j.identifier("props");
-			emitter.annotatePropsParam(propsParamId, d.localName, inlineTypeText);
 			const propsId = j.identifier("props");
 			const componentId = j.identifier("Component");
 			const classNameId = j.identifier("className");
@@ -20240,12 +21956,22 @@ function emitSimpleExportedIntrinsicWrappers(ctx) {
 			const styleId = j.identifier("style");
 			const sxId = j.identifier("sx");
 			const refId = j.identifier("ref");
-			const restId = shouldIncludeRest ? j.identifier("rest") : null;
+			let restId = shouldIncludeRest ? j.identifier("rest") : null;
+			const shouldForwardRefExplicitly = !restId && ((d.supportsRefProp ?? false) || willForwardRef);
 			const forwardedAsId = j.identifier("forwardedAs");
 			if (allowSxProp) styleArgs.push(sxId);
 			for (const attr of d.attrsInfo?.defaultAttrs ?? []) if (!destructureProps.includes(attr.jsxProp)) destructureProps.push(attr.jsxProp);
 			for (const attr of d.attrsInfo?.dynamicAttrs ?? []) if (!destructureProps.includes(attr.jsxProp)) destructureProps.push(attr.jsxProp);
 			const destructurePropsForPattern = needsUseTheme ? destructureProps.filter((name) => name !== "theme") : destructureProps;
+			const passChildrenThroughRest = emitter.shouldPassChildrenThroughRest({
+				includeChildren,
+				includeRest: Boolean(restId),
+				restId,
+				destructureProps: destructurePropsForPattern,
+				defaultAttrs: d.attrsInfo?.defaultAttrs ?? [],
+				dynamicAttrs: d.attrsInfo?.dynamicAttrs ?? [],
+				staticAttrs: d.attrsInfo?.staticAttrs ?? {}
+			});
 			const patternProps = emitter.buildDestructurePatternProps({
 				baseProps: [
 					...useAsProp ? [j.property.from({
@@ -20256,9 +21982,9 @@ function emitSimpleExportedIntrinsicWrappers(ctx) {
 					})] : [],
 					...includesForwardedAs ? [ctx.patternProp("forwardedAs", forwardedAsId)] : [],
 					...allowClassNameProp ? [ctx.patternProp("className", classNameId)] : [],
-					...includeChildren ? [ctx.patternProp("children", childrenId)] : [],
+					...includeChildren && !passChildrenThroughRest ? [ctx.patternProp("children", childrenId)] : [],
 					...allowStyleProp ? [ctx.patternProp("style", styleId)] : [],
-					...(d.supportsRefProp ?? false) || !restId && willForwardRef ? [ctx.patternProp("ref", refId)] : [],
+					...shouldForwardRefExplicitly ? [ctx.patternProp("ref", refId)] : [],
 					...allowSxProp ? [ctx.patternProp("sx", sxId)] : []
 				],
 				destructureProps: destructurePropsForPattern,
@@ -20266,8 +21992,12 @@ function emitSimpleExportedIntrinsicWrappers(ctx) {
 				includeRest: Boolean(restId),
 				restId: restId ?? void 0
 			});
+			const usePropsDirectlyForRest = Boolean(restId) && patternProps.length === 1 && patternProps[0]?.type === "RestElement";
+			if (usePropsDirectlyForRest) restId = propsId;
 			const usePropsChildrenDirectly = emitter.isChildrenOnlyDestructurePattern(patternProps);
-			const declStmt = usePropsChildrenDirectly ? null : j.variableDeclaration("const", [j.variableDeclarator(j.objectPattern(patternProps), propsId)]);
+			const propsParam = usePropsChildrenDirectly ? emitter.buildChildrenOnlyParam(inlineTypeText ?? emitter.propsTypeNameFor(d.localName)) : j.identifier("props");
+			if (!usePropsChildrenDirectly) emitter.annotatePropsParam(propsParam, d.localName, inlineTypeText);
+			const declStmt = usePropsChildrenDirectly || usePropsDirectlyForRest ? null : j.variableDeclaration("const", [j.variableDeclarator(j.objectPattern(patternProps), propsId)]);
 			const { attrsInfo, staticClassNameExpr } = emitter.splitAttrsInfo(d.attrsInfo, getBridgeClassVar(d), d.extraClassNames);
 			const { attrsInfo: attrsInfoWithoutForwardedAsStatic, forwardedAsStaticFallback } = splitForwardedAsStaticAttrs({
 				attrsInfo,
@@ -20292,7 +22022,7 @@ function emitSimpleExportedIntrinsicWrappers(ctx) {
 					attrsInfo: attrsInfoWithoutForwardedAsStatic,
 					propExprFor: (prop) => j.identifier(prop)
 				}),
-				...(d.supportsRefProp ?? false) || !restId && willForwardRef ? [j.jsxAttribute(j.jsxIdentifier("ref"), j.jsxExpressionContainer(refId))] : [],
+				...shouldForwardRefExplicitly ? [j.jsxAttribute(j.jsxIdentifier("ref"), j.jsxExpressionContainer(refId))] : [],
 				...restId ? [j.jsxSpreadAttribute(restId)] : [],
 				...emitter.buildDynamicAttrsFromProps({
 					dynamicAttrs: attrsInfoWithoutForwardedAsStatic?.dynamicAttrs ?? [],
@@ -20304,8 +22034,8 @@ function emitSimpleExportedIntrinsicWrappers(ctx) {
 			const jsx = emitter.buildJsxElement({
 				tagName: useAsProp ? "Component" : tagName,
 				attrs: openingAttrs,
-				includeChildren,
-				childrenExpr: usePropsChildrenDirectly ? j.memberExpression(propsId, j.identifier("children")) : childrenId
+				includeChildren: includeChildren && !passChildrenThroughRest,
+				childrenExpr: childrenId
 			});
 			const bodyStmts = [];
 			if (declStmt) bodyStmts.push(declStmt);
@@ -20315,7 +22045,7 @@ function emitSimpleExportedIntrinsicWrappers(ctx) {
 			const shouldAddTypeParams = allowAsProp && emitTypes;
 			emitted.push(...withLeadingCommentsOnFirstFunction([emitter.buildWrapperFunction({
 				localName: d.localName,
-				params: [propsParamId],
+				params: [propsParam],
 				bodyStmts,
 				typeParameters: shouldAddTypeParams ? buildPolymorphicTypeParams(j, tagName) : void 0
 			})], d));
@@ -20390,6 +22120,7 @@ function maybeOmitExternalStylePropsFromExplicitTypeText(args) {
 	const omitted = [];
 	if (!args.allowClassNameProp) omitted.push("\"className\"");
 	if (!args.allowStyleProp) omitted.push("\"style\"");
+	if (!args.allowSxProp) omitted.push("\"sx\"");
 	return omitted.length > 0 ? `Omit<${args.typeText}, ${omitted.join(" | ")}>` : args.typeText;
 }
 function explicitTypeMayContainExternalStyleProps(args) {
@@ -20955,7 +22686,8 @@ function extractCssHelpersStep(ctx) {
 		styledImports,
 		cssLocal,
 		toStyleKey,
-		preserveDeclarationOnlyNames: collectCssHelpersUsedBySkippedImportedRoots(ctx)
+		preserveDeclarationOnlyNames: collectCssHelpersUsedBySkippedImportedRoots(ctx),
+		preservedStyledComponentSelectorNames: collectSkippedImportedRootStyledComponentNames(ctx)
 	});
 	if (cssHelpers.unsupportedCssUsages.length > 0) return returnResult({
 		code: null,
@@ -20965,6 +22697,26 @@ function extractCssHelpersStep(ctx) {
 	if (cssHelpers.changed) ctx.markChanged();
 	return CONTINUE;
 }
+function collectSkippedImportedRootStyledComponentNames(ctx) {
+	if (ctx.options.allowPartialMigration !== true || ctx.options.transformMode === "leavesOnly") return /* @__PURE__ */ new Set();
+	const names = /* @__PURE__ */ new Set();
+	ctx.root.find(ctx.j.VariableDeclarator).forEach((path) => {
+		const id = path.node.id;
+		if (id.type !== "Identifier") return;
+		if (initializerWrapsImportedComponent(ctx, path.node.init)) names.add(id.name);
+	});
+	return names;
+}
+function initializerWrapsImportedComponent(ctx, init) {
+	const node = init;
+	if (!node) return false;
+	if (node.type === "TaggedTemplateExpression") return tagWrapsImportedComponent(ctx, node.tag);
+	if (node.type === "CallExpression") {
+		const callee = node.callee;
+		return callee?.type === "TaggedTemplateExpression" && tagWrapsImportedComponent(ctx, callee.tag);
+	}
+	return false;
+}
 function collectCssHelpersUsedBySkippedImportedRoots(ctx) {
 	if (ctx.options.allowPartialMigration !== true || ctx.options.transformMode === "leavesOnly") return /* @__PURE__ */ new Set();
 	if ((ctx.importMap ?? /* @__PURE__ */ new Map()).size === 0) return /* @__PURE__ */ new Set();
@@ -23443,6 +25195,7 @@ function tryDecomposeConditionalBranches(condBody, paramName) {
 		conditionProp,
 		staticValue,
 		dynamicBranchExpr: dynamicBranch,
+		paramName,
 		dynamicProps,
 		isStaticWhenFalse
 	};
@@ -24586,7 +26339,7 @@ function createCssHelperResolver(args) {
 		const path = getMemberPathFromIdentifier(test, paramName);
 		return path && path[0] === "theme" && path.length > 1 ? path.slice(1).join(".") : null;
 	};
-	const resolveCssHelperTemplate = (template, paramName, loc) => {
+	const resolveCssHelperTemplate = (template, paramName, loc, options) => {
 		const bail = (type, context, exprLoc) => {
 			warnings.push({
 				severity: "warning",
@@ -24605,7 +26358,7 @@ function createCssHelperResolver(args) {
 		const lookupImport = (localName) => importMap.get(localName) ?? null;
 		for (const rule of rules) {
 			const rawMedia = findSupportedAtRule(rule.atRuleStack);
-			if (hasUnsupportedAtRule(rule.atRuleStack)) return bail("Conditional `css` block: @-rules (e.g., @media, @supports) are not supported");
+			if (hasUnsupportedAtRule(rule.atRuleStack)) return bail("Conditional `css` block: unsupported or mixed @-rules require manual handling");
 			let media = rawMedia;
 			let computedMediaKey = null;
 			if (rawMedia) {
@@ -24627,6 +26380,7 @@ function createCssHelperResolver(args) {
 			const rawSelector = (rule.selector ?? "").trim();
 			const specificityResult = normalizeSpecificityHacks(rawSelector);
 			if (specificityResult.hasHigherTier) return bail("Styled-components specificity hacks like `&&` / `&&&` are not representable in StyleX");
+			if (specificityResult.wasStripped && options?.rejectStrippedSpecificity) return bail("Styled-components specificity hacks like `&&` / `&&&` are not representable in StyleX", void 0, computeSelectorWarningLoc(templateLoc ?? void 0, rawCss, rawSelector) ?? templateLoc);
 			const selector = specificityResult.normalized.trim();
 			const specificityStripped = specificityResult.wasStripped;
 			const allowDynamicValues = selector === "&";
@@ -24765,6 +26519,17 @@ function createCssHelperResolver(args) {
 				if (!resolved && hasThemeAccessInExpr(expr, paramName)) return bail("Conditional `css` block: failed to parse expression", { property: d.property }, exprLoc);
 				if (resolved) if (hasStaticParts) {
 					const { prefix, suffix } = extractPrefixSuffix(parts);
+					const borderParts = parseInterpolatedBorderStaticParts({
+						prop: d.property.trim(),
+						prefix,
+						suffix
+					});
+					if (borderParts) {
+						if (borderParts.width) target[borderParts.widthProp] = mergeIntoContext(borderParts.width, borderParts.widthProp, target);
+						if (borderParts.style) target[borderParts.styleProp] = mergeIntoContext(borderParts.style, borderParts.styleProp, target);
+						target[borderParts.colorProp] = mergeIntoContext(resolved.ast, borderParts.colorProp, target);
+						continue;
+					}
 					const templateAst = parseExpr(wrapExprWithStaticParts(resolved.exprString, prefix, suffix));
 					if (templateAst) {
 						for (const mapped of cssDeclarationToStylexDeclarations(d)) target[mapped.prop] = mergeIntoContext(templateAst, mapped.prop, target);
@@ -24869,7 +26634,7 @@ function resolveTemplateLiteralBranch(ctx, args) {
 		if (hasUnsupportedAtRule(rule.atRuleStack)) {
 			ctx.warnings?.push({
 				severity: "warning",
-				type: "CSS block contains unsupported at-rule (only @media and @container are supported; @supports, etc. require manual handling)",
+				type: "CSS block contains unsupported at-rule (only @media, @container, and @supports are supported; mixed nested at-rules require manual handling)",
 				loc: null
 			});
 			return null;
@@ -25380,7 +27145,7 @@ function resolveStaticTemplateExpressionAst(args) {
 	return null;
 }
 function buildPropAccessExpr(j, propName, defaultValue) {
-	const baseExpr = isValidIdentifierName$1(propName) ? j.identifier(propName) : j.memberExpression(j.identifier("props"), j.literal(propName), true);
+	const baseExpr = isValidIdentifierName(propName) ? j.identifier(propName) : j.memberExpression(j.identifier("props"), j.literal(propName), true);
 	if (defaultValue !== void 0) return j.logicalExpression("??", baseExpr, cloneAstNode(defaultValue));
 	return baseExpr;
 }
@@ -25388,6 +27153,7 @@ function buildPropAccessExpr(j, propName, defaultValue) {
 //#region src/internal/lower-rules/css-helper-handlers.ts
 const createCssHelperHandlers = (ctx) => {
 	const { j, filePath, decl, warnings, styleObj, variantBuckets, variantStyleKeys, cssHelperFunctions, usedCssHelperFunctions, parseExpr, resolveValue, resolveCall, resolveImportInScope, resolverImports, isCssHelperTaggedTemplate, resolveCssHelperTemplate, applyVariant, dropAllTestInfoProps, componentInfo, handlerContext, markBail } = ctx;
+	const cssHelperTemplateOptions = { rejectStrippedSpecificity: decl.base.kind === "component" };
 	const tplCtx = {
 		j,
 		filePath,
@@ -25584,7 +27350,7 @@ const createCssHelperHandlers = (ctx) => {
 					markBail();
 					return true;
 				}
-				const defaultResolved = resolveCssHelperTemplate(parsed.defaultCssTemplate.quasi, null, helperFn.loc ?? decl.loc);
+				const defaultResolved = resolveCssHelperTemplate(parsed.defaultCssTemplate.quasi, null, helperFn.loc ?? decl.loc, cssHelperTemplateOptions);
 				if (!defaultResolved || defaultResolved.dynamicProps.length > 0) {
 					warnings.push({
 						severity: "warning",
@@ -25597,7 +27363,7 @@ const createCssHelperHandlers = (ctx) => {
 				}
 				mergeStyleObjects(baseFromHelper, defaultResolved.style);
 				for (const [caseValue, tpl] of parsed.caseCssTemplates.entries()) {
-					const res = resolveCssHelperTemplate(tpl.quasi, null, helperFn.loc ?? decl.loc);
+					const res = resolveCssHelperTemplate(tpl.quasi, null, helperFn.loc ?? decl.loc, cssHelperTemplateOptions);
 					if (!res || res.dynamicProps.length > 0) {
 						warnings.push({
 							severity: "warning",
@@ -25633,10 +27399,241 @@ const createCssHelperHandlers = (ctx) => {
 	};
 };
 //#endregion
+//#region src/internal/lower-rules/static-evaluator.ts
+const MAX_STATIC_CALL_DEPTH = 20;
+function evaluateLocalCallValueTransform(args) {
+	const callStack = args.callStack ?? /* @__PURE__ */ new Set();
+	if (callStack.has(args.calleeName) || callStack.size >= MAX_STATIC_CALL_DEPTH) return null;
+	const fn = findLocalSingleParamFunction(args);
+	if (!fn) return null;
+	const nextCallStack = new Set(callStack);
+	nextCallStack.add(args.calleeName);
+	const result = evaluateFunctionBody(fn.body, fn.paramName, args.argValue, {
+		j: args.j,
+		root: args.root,
+		callStack: nextCallStack
+	});
+	return result.supported && result.returned ? result.value : null;
+}
+function evaluateObservedDynamicExpression(args) {
+	const result = evaluateStaticExpression(args.expression, args.propName, args.propValue, {
+		j: args.j,
+		root: args.root,
+		paramName: args.paramName ?? null,
+		callStack: /* @__PURE__ */ new Set()
+	});
+	return result.supported ? result.value : null;
+}
+function findLocalSingleParamFunction(args) {
+	const { j, root, calleeName } = args;
+	const candidates = [];
+	let matchingBindings = 0;
+	root.find(j.FunctionDeclaration, { id: { name: calleeName } }).forEach((path) => {
+		matchingBindings += 1;
+		const fnNode = path.node;
+		const paramName = getSingleIdentifierParamName(fnNode.params);
+		if (paramName) candidates.push({
+			paramName,
+			body: fnNode.body
+		});
+	});
+	root.find(j.VariableDeclarator, { id: { name: calleeName } }).forEach((path) => {
+		matchingBindings += 1;
+		const init = path.node.init;
+		if (!init || init.type !== "ArrowFunctionExpression" && init.type !== "FunctionExpression") return;
+		const paramName = getSingleIdentifierParamName(init.params);
+		if (paramName) candidates.push({
+			paramName,
+			body: init.body
+		});
+	});
+	const [candidate] = candidates;
+	return matchingBindings === 1 && candidate ? candidate : null;
+}
+function getSingleIdentifierParamName(params) {
+	if (!params || params.length !== 1) return null;
+	const param = params[0];
+	return param.type === "Identifier" && param.name ? param.name : null;
+}
+function evaluateFunctionBody(body, propName, propValue, ctx) {
+	const bodyNode = body;
+	if (!bodyNode) return { supported: false };
+	if (bodyNode.type !== "BlockStatement") {
+		const result = evaluateStaticExpression(bodyNode, propName, propValue, ctx);
+		return result.supported ? {
+			supported: true,
+			returned: true,
+			value: result.value
+		} : { supported: false };
+	}
+	const statements = bodyNode.body;
+	if (!Array.isArray(statements)) return { supported: false };
+	for (const statement of statements) {
+		const result = evaluateStaticStatement(statement, propName, propValue, ctx);
+		if (!result.supported || result.returned) return result;
+	}
+	return {
+		supported: true,
+		returned: false
+	};
+}
+function evaluateStaticStatement(statement, propName, propValue, ctx) {
+	const node = statement;
+	if (!node) return { supported: false };
+	if (node.type === "ReturnStatement") {
+		if (node.argument === null || node.argument === void 0) return {
+			supported: true,
+			returned: true,
+			value: void 0
+		};
+		const result = evaluateStaticExpression(node.argument, propName, propValue, ctx);
+		return result.supported ? {
+			supported: true,
+			returned: true,
+			value: result.value
+		} : { supported: false };
+	}
+	if (node.type === "IfStatement") {
+		const test = evaluateStaticExpression(node.test, propName, propValue, ctx);
+		if (!test.supported || typeof test.value !== "boolean") return { supported: false };
+		if (test.value) return evaluateStaticBranch(node.consequent, propName, propValue, ctx);
+		return node.alternate ? evaluateStaticBranch(node.alternate, propName, propValue, ctx) : {
+			supported: true,
+			returned: false
+		};
+	}
+	return { supported: false };
+}
+function evaluateStaticBranch(branch, propName, propValue, ctx) {
+	const node = branch;
+	if (node?.type === "BlockStatement") return evaluateFunctionBody(node, propName, propValue, ctx);
+	return evaluateStaticStatement(branch, propName, propValue, ctx);
+}
+function evaluateStaticExpression(expression, propName, propValue, ctx) {
+	const node = expression;
+	if (!node) return { supported: false };
+	if (node.type === "Identifier") return node.name === propName ? {
+		supported: true,
+		value: propValue
+	} : { supported: false };
+	if (node.type === "MemberExpression" || node.type === "OptionalMemberExpression") {
+		const info = extractRootAndPath(node);
+		if (info && ctx.paramName && info.rootName === ctx.paramName && info.path[0] === propName) return info.path.length === 1 ? {
+			supported: true,
+			value: propValue
+		} : { supported: false };
+		return { supported: false };
+	}
+	if (node.type === "CallExpression") {
+		const callee = node.callee;
+		if (callee?.type !== "Identifier" || !callee.name || (node.arguments?.length ?? 0) !== 1) return { supported: false };
+		const callArg = evaluateStaticExpression(node.arguments?.[0], propName, propValue, ctx);
+		if (!callArg.supported) return { supported: false };
+		const value = evaluateLocalCallValueTransform({
+			j: ctx.j,
+			root: ctx.root,
+			calleeName: callee.name,
+			argValue: callArg.value,
+			callStack: ctx.callStack
+		});
+		return isStaticEvalValue(value) ? {
+			supported: true,
+			value
+		} : { supported: false };
+	}
+	if (node.type === "Literal") return isStaticEvalValue(node.value) ? {
+		supported: true,
+		value: node.value
+	} : { supported: false };
+	if (node.type === "StringLiteral" || node.type === "NumericLiteral" || node.type === "BooleanLiteral") return isStaticEvalValue(node.value) ? {
+		supported: true,
+		value: node.value
+	} : { supported: false };
+	if (node.type === "NullLiteral") return {
+		supported: true,
+		value: null
+	};
+	if (node.type === "ParenthesizedExpression" || node.type === "TSAsExpression" || node.type === "TSTypeAssertion") return evaluateStaticExpression(node.expression, propName, propValue, ctx);
+	if (node.type === "UnaryExpression") {
+		const argument = evaluateStaticExpression(node.argument, propName, propValue, ctx);
+		if (!argument.supported) return { supported: false };
+		if (node.operator === "!") return {
+			supported: true,
+			value: !argument.value
+		};
+		if (node.operator === "typeof") return {
+			supported: true,
+			value: typeof argument.value
+		};
+		return { supported: false };
+	}
+	if (node.type === "LogicalExpression") {
+		const left = evaluateStaticExpression(node.left, propName, propValue, ctx);
+		if (!left.supported) return { supported: false };
+		if (node.operator === "||") return left.value ? left : evaluateStaticExpression(node.right, propName, propValue, ctx);
+		if (node.operator === "&&") return left.value ? evaluateStaticExpression(node.right, propName, propValue, ctx) : left;
+		if (node.operator === "??") return left.value === null || left.value === void 0 ? evaluateStaticExpression(node.right, propName, propValue, ctx) : left;
+		return { supported: false };
+	}
+	if (node.type === "BinaryExpression") return evaluateStaticBinaryExpression(node, propName, propValue, ctx);
+	if (node.type === "ConditionalExpression") {
+		const test = evaluateStaticExpression(node.test, propName, propValue, ctx);
+		if (!test.supported || typeof test.value !== "boolean") return { supported: false };
+		return evaluateStaticExpression(test.value ? node.consequent : node.alternate, propName, propValue, ctx);
+	}
+	if (node.type === "TemplateLiteral" && node.quasis && node.expressions) return evaluateStaticTemplateLiteral({
+		quasis: node.quasis,
+		expressions: node.expressions
+	}, propName, propValue, ctx);
+	return { supported: false };
+}
+function evaluateStaticBinaryExpression(node, propName, propValue, ctx) {
+	const left = evaluateStaticExpression(node.left, propName, propValue, ctx);
+	const right = evaluateStaticExpression(node.right, propName, propValue, ctx);
+	if (!left.supported || !right.supported) return { supported: false };
+	switch (node.operator) {
+		case "===": return {
+			supported: true,
+			value: left.value === right.value
+		};
+		case "!==": return {
+			supported: true,
+			value: left.value !== right.value
+		};
+		case "+": return typeof left.value === "number" && typeof right.value === "number" ? {
+			supported: true,
+			value: left.value + right.value
+		} : {
+			supported: true,
+			value: `${String(left.value)}${String(right.value)}`
+		};
+		default: return { supported: false };
+	}
+}
+function evaluateStaticTemplateLiteral(node, propName, propValue, ctx) {
+	let value = "";
+	for (let i = 0; i < node.quasis.length; i++) {
+		value += node.quasis[i]?.value?.cooked ?? node.quasis[i]?.value?.raw ?? "";
+		if (i < node.expressions.length) {
+			const expressionValue = evaluateStaticExpression(node.expressions[i], propName, propValue, ctx);
+			if (!expressionValue.supported) return { supported: false };
+			value += String(expressionValue.value);
+		}
+	}
+	return {
+		supported: true,
+		value
+	};
+}
+function isStaticEvalValue(value) {
+	return typeof value === "string" || typeof value === "number" || typeof value === "boolean" || value === null || value === void 0;
+}
+//#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, 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 } = ctx;
 	const avoidNames = new Set(importMap.keys());
+	const cssHelperTemplateOptions = { rejectStrippedSpecificity: decl.base.kind === "component" };
 	/**
 	* Resolve the TS type node for a prop used in a style function parameter.
 	* Uses the component's type annotation to infer the correct type (e.g. `number | string`).
@@ -25883,10 +27880,11 @@ function createCssHelperConditionalHandler(ctx) {
 				return entries;
 			};
 			const wrapValueWithResolvedPseudos = (prop, value, pseudoEntries) => {
-				const properties = [j.property("init", j.identifier("default"), styleObj[prop] !== void 0 ? styleValueToExpression(j, styleObj[prop]) : j.literal(null))];
+				const defaultExpr = styleObj[prop] !== void 0 ? styleValueToExpression(j, styleObj[prop]) : j.literal(null);
+				const properties = [j.property("init", j.identifier("default"), cloneAstNode(defaultExpr))];
 				for (const entry of pseudoEntries) {
 					let entryValue = value;
-					if (entry.conditionExpr) entryValue = j.objectExpression([j.property("init", j.identifier("default"), j.literal(null)), (() => {
+					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;
@@ -26006,7 +28004,7 @@ function createCssHelperConditionalHandler(ctx) {
 			if (!testInfo) return false;
 			if (isCssHelperTaggedTemplate(body.right)) {
 				const cssNode = body.right;
-				const resolved = resolveCssHelperTemplate(cssNode.quasi, paramName, decl.loc);
+				const resolved = resolveCssHelperTemplate(cssNode.quasi, paramName, decl.loc, cssHelperTemplateOptions);
 				if (!resolved) {
 					markBail();
 					return true;
@@ -26171,6 +28169,52 @@ function createCssHelperConditionalHandler(ctx) {
 			}
 			if (entries.length > 0) decl.needsWrapperComponent = true;
 		};
+		const tryApplyFiniteUnionStaticMap = (args) => {
+			const unionValues = extractUnionLiteralValues(findJsxPropTsType(args.propName));
+			if (!unionValues || unionValues.length < 2 || unionValues.length > 20) return false;
+			const buckets = [];
+			for (const propValue of unionValues) {
+				const testValue = evaluateObservedDynamicExpression({
+					j,
+					root,
+					expression: args.test,
+					propName: args.propName,
+					propValue,
+					paramName: args.paramName
+				});
+				if (typeof testValue !== "boolean") return false;
+				if (!testValue) continue;
+				const style = {};
+				for (const [stylexProp, valueExpr] of args.map) {
+					const cssValue = evaluateObservedDynamicExpression({
+						j,
+						root,
+						expression: valueExpr,
+						propName: args.propName,
+						propValue,
+						paramName: args.paramName
+					});
+					if (typeof cssValue !== "string" && typeof cssValue !== "number") return false;
+					style[stylexProp] = cssValue;
+				}
+				if (Object.keys(style).length > 0) buckets.push({
+					propValue,
+					style
+				});
+			}
+			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);
+			}
+			decl.variantLookupCastProps ??= /* @__PURE__ */ new Set();
+			decl.variantLookupCastProps.add(args.propName);
+			ensureShouldForwardPropDrop(decl, args.propName);
+			return true;
+		};
 		if (body?.type === "TemplateLiteral") {
 			const resolved = resolveTemplateLiteralBranch(tplCtx, {
 				node: body,
@@ -26434,6 +28478,15 @@ function createCssHelperConditionalHandler(ctx) {
 			collectPropsFromExpressions([...consMap.values(), ...altMap.values()], propsUsed);
 			const valuePropParams = Array.from(propsUsed);
 			if (consMap.size === 0 && altMap.size === 0) return true;
+			if (valuePropParams.length === 1 && consMap.size > 0 && altMap.size === 0 && tryApplyFiniteUnionStaticMap({
+				map: consMap,
+				test: conditional.test,
+				propName: valuePropParams[0],
+				paramName
+			})) {
+				decl.needsWrapperComponent = true;
+				return true;
+			}
 			const useSingleParam = valuePropParams.length === 1;
 			const singlePropName = useSingleParam ? valuePropParams[0] : "";
 			const singleParamName = useSingleParam ? singlePropName.startsWith("$") ? singlePropName.slice(1) : singlePropName : "";
@@ -26494,7 +28547,7 @@ function createCssHelperConditionalHandler(ctx) {
 		if (!(consIsCss || altIsCss || consIsTpl || altIsTpl || consIsCall || altIsCall || consIsStr || altIsStr)) return false;
 		const resolveCssBranch = (node) => {
 			if (!isCssHelperTaggedTemplate(node)) return null;
-			return resolveCssHelperTemplate(node.quasi, paramName, decl.loc);
+			return resolveCssHelperTemplate(node.quasi, paramName, decl.loc, cssHelperTemplateOptions);
 		};
 		const applyConditionalVariants = applyConditionalVariantsInline;
 		const resolveTplBranch = (node) => resolveTemplateLiteralBranch(tplCtx, {
@@ -26930,7 +28983,7 @@ function buildFallbackPropSuffix(consMap, altMap) {
 //#endregion
 //#region src/internal/lower-rules/import-resolution.ts
 const buildSafeIndexedParamName = (preferred, containerExpr) => {
-	if (!isValidIdentifierName$1(preferred)) return "propValue";
+	if (!isValidIdentifierName(preferred)) return "propValue";
 	if (containerExpr?.type === "Identifier" && containerExpr.name === preferred) return `${preferred}Value`;
 	return preferred;
 };
@@ -26978,7 +29031,7 @@ const createImportResolver = (args) => {
 	const getNearestFunctionNode = (path) => {
 		let cur = path;
 		while (cur) {
-			if (isFunctionNode(cur.node)) return cur.node;
+			if (isFunctionNode$1(cur.node)) return cur.node;
 			cur = cur.parentPath ?? null;
 		}
 		return null;
@@ -27049,7 +29102,7 @@ const createImportResolver = (args) => {
 		let cur = path;
 		while (cur) {
 			const node = cur.node;
-			if (isFunctionNode(node) && functionDeclaresName(node, name)) {
+			if (isFunctionNode$1(node) && functionDeclaresName(node, name)) {
 				shadowedIdentCache.set(identNode, true);
 				return true;
 			}
@@ -27258,7 +29311,7 @@ const createValuePatternHandlers = (ctx) => {
 		const consTheme = resolveThemeAst(body.consequent);
 		const altTheme = resolveThemeAst(body.alternate);
 		const buildPropAccess = (prop) => {
-			return isValidIdentifierName$1(prop) ? j.memberExpression(j.identifier("props"), j.identifier(prop)) : j.memberExpression(j.identifier("props"), j.literal(prop), true);
+			return isValidIdentifierName(prop) ? j.memberExpression(j.identifier("props"), j.identifier(prop)) : j.memberExpression(j.identifier("props"), j.literal(prop), true);
 		};
 		let nullishPropName = null;
 		let baseTheme = null;
@@ -27294,7 +29347,7 @@ const createValuePatternHandlers = (ctx) => {
 				styleFnDecls.set(fnKey, j.arrowFunctionExpression([param], bodyExpr));
 			}
 			if (!styleFnFromProps.some((p) => p.fnKey === fnKey)) {
-				const baseArg = isValidIdentifierName$1(nullishPropName) ? j.identifier(nullishPropName) : buildPropAccess(nullishPropName);
+				const baseArg = isValidIdentifierName(nullishPropName) ? j.identifier(nullishPropName) : buildPropAccess(nullishPropName);
 				const callArg = j.logicalExpression("??", baseArg, fallbackTheme);
 				styleFnFromProps.push({
 					fnKey,
@@ -27757,7 +29810,7 @@ function createDeclProcessingState(state, decl) {
 			if (hasUnsupportedAtRule(rule.atRuleStack)) {
 				warnings.push({
 					severity: "warning",
-					type: "CSS block contains unsupported at-rule (only @media and @container are supported; @supports, etc. require manual handling)",
+					type: "CSS block contains unsupported at-rule (only @media, @container, and @supports are supported; mixed nested at-rules require manual handling)",
 					loc: decl.loc
 				});
 				return null;
@@ -27846,6 +29899,7 @@ function createDeclProcessingState(state, decl) {
 		tryHandleCssHelperConditionalBlock: createCssHelperConditionalHandler({
 			...sharedFromState,
 			importMap,
+			root,
 			decl,
 			componentInfo,
 			handlerContext,
@@ -28088,7 +30142,7 @@ function finalizeDeclProcessing(ctx) {
 			if (!v || typeof v !== "object" || Array.isArray(v) || isAstNode(v)) return false;
 			const keys = Object.keys(v);
 			if (keys.length === 0) return false;
-			return keys.includes("default") || keys.some(isStyleConditionKey);
+			return keys.includes("default") || keys.some(isStyleConditionKey$1);
 		};
 		if (!(() => {
 			const disabledBucket = variantBuckets.get("disabled");
@@ -28150,6 +30204,7 @@ function finalizeDeclProcessing(ctx) {
 			const observedFallbackFnKey = observedVariantFallbackFns.get(dim.propName);
 			if (observedFallbackFnKey) dim.fallbackFnKey = observedFallbackFnKey;
 			if (!observedFallbackFnKey && hasFiniteNumericVariantKey(dim)) dim.propTypeFromKeyof = true;
+			if (decl.variantLookupCastProps?.has(dim.propName)) dim.forceKeyofLookupCast = true;
 		}
 		decl.variantDimensions = mergeVariantDimensions(decl.variantDimensions, dimensions);
 		decl.needsWrapperComponent = true;
@@ -28738,7 +30793,7 @@ function expressionContainsStyleConditionKey(expr) {
 				return;
 			}
 			const key = p.key?.type === "Identifier" ? p.key.name : (p.key?.type === "StringLiteral" || p.key?.type === "Literal") && typeof p.key.value === "string" ? p.key.value : null;
-			if (key && isStyleConditionKey(key)) {
+			if (key && isStyleConditionKey$1(key)) {
 				found = true;
 				return;
 			}
@@ -29100,7 +31155,7 @@ function liftFlatVariantsToPseudoMaps(variantBuckets) {
 				const compoundValue = compoundBucket[cssProp];
 				if (!isMediaOrPseudoMap(compoundValue)) continue;
 				const liftedMap = { default: flatValue };
-				for (const condKey of Object.keys(compoundValue)) if (condKey !== "default" && isStyleConditionKey(condKey)) liftedMap[condKey] = flatValue;
+				for (const condKey of Object.keys(compoundValue)) if (condKey !== "default" && isStyleConditionKey$1(condKey)) liftedMap[condKey] = flatValue;
 				simpleBucket[cssProp] = liftedMap;
 				compoundValue.default = flatValue;
 				break;
@@ -30116,26 +32171,23 @@ function tryHandleInterpolatedBorder(ctx, args) {
 			if (!hasStaticWidthOrStyle) {
 				const parsedTpl = parseTemplateLiteralBorderShorthand(resolved.exprAst);
 				if (parsedTpl) {
-					if (selector.trim() !== "&" || (atRuleStack ?? []).length > 0) {
-						if (parsedTpl.width) applyResolvedPropValue(widthProp, parsedTpl.width);
-						if (parsedTpl.style) applyResolvedPropValue(styleProp, parsedTpl.style);
-						applyResolvedPropValue(colorProp, parsedTpl.colorExpr);
-						return true;
-					}
-					const fullProp = direction ? `border${direction}` : "border";
-					const extraKey = styleKeyWithSuffix(decl.styleKey, fullProp);
-					const bucket = extraStyleObjects.get(extraKey) ?? {};
-					if (parsedTpl.width) bucket[widthProp] = parsedTpl.width;
-					if (parsedTpl.style) bucket[styleProp] = parsedTpl.style;
-					bucket[colorProp] = parsedTpl.colorExpr;
-					extraStyleObjects.set(extraKey, bucket);
-					decl.extraStylexPropsArgs ??= [];
-					const afterVariants = Object.keys(variantStyleKeys).length > 0;
-					decl.extraStylexPropsArgs.push({
-						expr: j.memberExpression(j.identifier("styles"), j.identifier(extraKey)),
-						...afterVariants ? { afterVariants } : {}
-					});
-					decl.needsWrapperComponent = true;
+					const expandedBorderEntries = [];
+					if (parsedTpl.width) expandedBorderEntries.push([widthProp, parsedTpl.width]);
+					if (parsedTpl.style) expandedBorderEntries.push([styleProp, parsedTpl.style]);
+					expandedBorderEntries.push([colorProp, parsedTpl.colorExpr]);
+					if (selector.trim() === "&" && (atRuleStack ?? []).length === 0 && hasConflictingEarlierVariant(Array.from(variantBuckets.values()), expandedBorderEntries)) {
+						const fullProp = direction ? `border${direction}` : "border";
+						const extraKey = styleKeyWithSuffix(decl.styleKey, fullProp);
+						const bucket = extraStyleObjects.get(extraKey) ?? {};
+						for (const [entryProp, entryValue] of expandedBorderEntries) bucket[entryProp] = entryValue;
+						extraStyleObjects.set(extraKey, bucket);
+						decl.extraStylexPropsArgs ??= [];
+						decl.extraStylexPropsArgs.push({
+							expr: j.memberExpression(j.identifier("styles"), j.identifier(extraKey)),
+							afterVariants: true
+						});
+						decl.needsWrapperComponent = true;
+					} else for (const [entryProp, entryValue] of expandedBorderEntries) applyResolvedPropValue(entryProp, entryValue);
 					bumpResolverImportToEnd((spec) => {
 						const from = spec?.from;
 						const names = spec?.names;
@@ -30219,6 +32271,25 @@ function classifyBorderSlotRole(ast) {
 	if ((node.type === "StringLiteral" || node.type === "Literal") && typeof node.value === "string") return looksLikeLength(node.value) ? "width" : "color";
 	return null;
 }
+function hasConflictingEarlierVariant(variantBuckets, borderEntries) {
+	const borderProps = borderEntries.map(([prop]) => prop);
+	return variantBuckets.some((bucket) => Object.keys(bucket).some((variantProp) => borderProps.some((borderProp) => borderLonghandsConflict(variantProp, borderProp))));
+}
+function borderLonghandsConflict(left, right) {
+	if (left === right) return true;
+	const leftParts = parseBorderLonghand(left);
+	const rightParts = parseBorderLonghand(right);
+	if (!leftParts || !rightParts || leftParts.aspect !== rightParts.aspect) return false;
+	return leftParts.side === null || rightParts.side === null || leftParts.side === rightParts.side;
+}
+function parseBorderLonghand(prop) {
+	const match = prop.match(/^border(?:(Top|Right|Bottom|Left))?(Width|Style|Color)$/);
+	if (!match) return null;
+	return {
+		side: match[1] ?? null,
+		aspect: match[2]
+	};
+}
 //#endregion
 //#region src/internal/lower-rules/interpolated-variant-resolvers.ts
 function handleSplitVariantsResolvedValue(ctx) {
@@ -30766,14 +32837,14 @@ function handleInlineStyleValueFromProps(ctx) {
 		const valueExpr = prefix || suffix ? buildTemplateWithStaticParts(j, baseExpr, prefix, suffix) : baseExpr;
 		const outs = cssDeclarationToStylexDeclarations(d);
 		if (outs.every((out) => out.prop && !isStylexShorthandCamelCase(out.prop))) {
-			const baseKeyAvailable = outs.length === 1 && Object.keys(styleObj).length === 0 && !styleFnDecls.has(decl.styleKey);
+			const baseKeyAvailable = outs.length === 1 && Object.keys(styleObj).length === 0 && !declarationHasFollowingStaticBaseStyles(decl, d) && !styleFnDecls.has(decl.styleKey);
 			for (const out of outs) {
 				if (!out.prop) continue;
 				const fnKey = baseKeyAvailable ? decl.styleKey : styleKeyWithSuffix(decl.styleKey, out.prop);
 				if (!styleFnDecls.has(fnKey)) {
 					const paramName = cssPropertyToIdentifier(out.prop, ctx.avoidNames);
 					const param = j.identifier(paramName);
-					if (/\.(ts|tsx)$/.test(filePath)) param.typeAnnotation = j.tsTypeAnnotation(j.tsUnionType([j.tsStringKeyword(), j.tsUndefinedKeyword()]));
+					if (/\.(ts|tsx)$/.test(filePath)) param.typeAnnotation = j.tsTypeAnnotation(inferStyleFnParamType(j, out.prop, valueExpr));
 					const propKey = makeCssPropKey(j, out.prop);
 					const p = j.property("init", propKey, j.identifier(paramName));
 					p.shorthand = propKey.type === "Identifier" && paramName === out.prop;
@@ -30842,6 +32913,54 @@ function handleInlineStyleValueFromProps(ctx) {
 function hasSimpleIdentifierParam(expr) {
 	return expr.params?.length === 1 && expr.params[0]?.type === "Identifier";
 }
+function declarationHasFollowingStaticBaseStyles(decl, current) {
+	for (const rule of decl.rules ?? []) {
+		const index = rule.declarations.indexOf(current);
+		if (index < 0) continue;
+		return rule.declarations.slice(index + 1).some((next) => next.value.kind === "static");
+	}
+	return false;
+}
+function inferStyleFnParamType(j, stylexProp, callArg) {
+	if (callArg.type === "TemplateLiteral" && expressionHasNullishFallback(callArg)) return j.tsStringKeyword();
+	if (expressionHasNullishFallback(callArg) && NUMERIC_STYLEX_PROPS.has(stylexProp)) {
+		if (getNullishFallbackType(callArg) !== "number") return j.tsUnionType([j.tsNumberKeyword(), j.tsStringKeyword()]);
+		return j.tsNumberKeyword();
+	}
+	return j.tsUnionType([j.tsStringKeyword(), j.tsUndefinedKeyword()]);
+}
+const NUMERIC_STYLEX_PROPS = new Set([
+	"zIndex",
+	"opacity",
+	"flexGrow",
+	"flexShrink",
+	"order"
+]);
+function getNullishFallbackType(expr) {
+	if (!expr || typeof expr !== "object") return null;
+	const node = expr;
+	if (node.type === "LogicalExpression" && node.operator === "??") return getExpressionPrimitiveType(node.right);
+	if (node.type === "TemplateLiteral") for (const templateExpr of node.expressions ?? []) {
+		const fallbackType = getNullishFallbackType(templateExpr);
+		if (fallbackType) return fallbackType;
+	}
+	return null;
+}
+function getExpressionPrimitiveType(expr) {
+	if (!expr || typeof expr !== "object") return "unknown";
+	const node = expr;
+	if (node.type === "NumericLiteral" || node.type === "Literal" && typeof node.value === "number") return "number";
+	if (node.type === "StringLiteral" || node.type === "Literal" && typeof node.value === "string") return "string";
+	if (node.type === "TemplateLiteral") return "string";
+	return "unknown";
+}
+function expressionHasNullishFallback(expr) {
+	if (!expr || typeof expr !== "object") return false;
+	const node = expr;
+	if (node.type === "LogicalExpression" && node.operator === "??") return true;
+	if (node.type === "TemplateLiteral") return (node.expressions ?? []).some(expressionHasNullishFallback);
+	return false;
+}
 /**
 * Emit one `${key}FromProps` style function entry per longhand expansion of
 * `d`, keyed by the StyleX prop name and wrapped in pseudo/media buckets.
@@ -30894,6 +33013,10 @@ function handleInterpolatedDeclaration(args) {
 	const avoidNames = new Set(importMap.keys());
 	if (state.bail) return;
 	if (d.value.kind !== "interpolated") return;
+	if (d.property && isUnsupportedStylexProperty(d.property)) {
+		state.bailUnsupported(decl, `Unsupported CSS property "${d.property}" cannot be emitted in StyleX`);
+		return;
+	}
 	let bail = false;
 	const getRootIdentifierInfo = extractRootAndPath;
 	const bailUnsupportedLocal = (declArg, type) => {
@@ -30918,7 +33041,7 @@ function handleInterpolatedDeclaration(args) {
 		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");
+		const values = propUsage.values.filter((value) => typeof value === "string" || typeof value === "number");
 		if (values.length !== propUsage.values.length) return null;
 		return values;
 	};
@@ -31037,7 +33160,7 @@ function handleInterpolatedDeclaration(args) {
 		const unionValues = extractUnionLiteralValues(findJsxPropTsTypeForVariantExtraction(jsxProp));
 		const observedValues = unionValues ? null : getObservedStaticVariantValues(jsxProp);
 		const hasStaticText = staticParts.prefix !== "" || staticParts.suffix !== "";
-		if (observedValues && getNumericCssEmissionMode(stylexProp) === "cssText" && !hasStaticText) {
+		if (observedValues && observedValues.some((value) => typeof value === "number") && getNumericCssEmissionMode(stylexProp) === "cssText" && !hasStaticText) {
 			observedNumericCssTextProps.add(jsxProp);
 			return false;
 		}
@@ -31050,15 +33173,110 @@ function handleInterpolatedDeclaration(args) {
 				propName: jsxProp
 			}, { [stylexProp]: emitStaticObservedValue(value, stylexProp, observedValues !== null, staticParts) });
 		}
-		if (observedValues) observedVariantFallbackFns.set(jsxProp, ensureObservedVariantFallbackFn(jsxProp, stylexProp, staticParts));
-		if (jsxProp.startsWith("$")) ensureShouldForwardPropDrop(decl, jsxProp);
+		if (observedValues) {
+			const fallbackFnKey = ensureObservedVariantFallbackFn(jsxProp, stylexProp, (param) => buildRuntimeObservedValueExpr(j, stylexProp, param, staticParts));
+			if (fallbackFnKey) {
+				observedVariantFallbackFns.set(jsxProp, fallbackFnKey);
+				markStyleValueVariantProp(jsxProp);
+			}
+		}
+		ensureObservedVariantPropDrop(jsxProp);
+		return true;
+	};
+	const tryEmitTransformedObservedVariantBuckets = (jsxProp, stylexProp, valueTransform) => {
+		if (!valueTransform || valueTransform.kind !== "call" || valueTransform.resolvedExpr || valueTransform.resolvedUsage || media || pseudos?.length) return false;
+		const observedValues = getObservedStaticVariantValues(jsxProp);
+		if (!observedValues || observedValues.length < 2 || observedValues.length > 20) return false;
+		const transformedValues = [];
+		for (const propValue of observedValues) {
+			const cssValue = evaluateLocalCallValueTransform({
+				j,
+				root: state.root,
+				calleeName: valueTransform.calleeIdent,
+				argValue: propValue
+			});
+			if (typeof cssValue !== "string" && typeof cssValue !== "number") return false;
+			transformedValues.push({
+				propValue,
+				cssValue
+			});
+		}
+		for (const { propValue, cssValue } of transformedValues) applyVariant({
+			when: `${jsxProp} === ${typeof propValue === "number" ? String(propValue) : JSON.stringify(propValue)}`,
+			propName: jsxProp
+		}, { [stylexProp]: cssValue });
+		const fallbackFnKey = ensureObservedVariantFallbackFn(jsxProp, stylexProp, (param) => j.callExpression(j.identifier(valueTransform.calleeIdent), [param]));
+		if (!fallbackFnKey) return false;
+		observedVariantFallbackFns.set(jsxProp, fallbackFnKey);
+		markStyleValueVariantProp(jsxProp);
+		ensureObservedVariantPropDrop(jsxProp);
 		return true;
 	};
-	const ensureObservedVariantFallbackFn = (jsxProp, stylexProp, staticParts) => {
+	const tryEmitObservedExpressionVariantBuckets = (jsxProp, stylexProp, expression, paramName, conditionWhen, conditionProp, prefix, suffix) => {
+		if (media || pseudos?.length) return false;
+		const observedValues = getObservedStaticVariantValues(jsxProp);
+		if (!observedValues || observedValues.length < 2 || observedValues.length > 20) return false;
+		const transformedValues = [];
+		for (const propValue of observedValues) {
+			const evaluatedValue = evaluateObservedDynamicExpression({
+				j,
+				root: state.root,
+				expression,
+				propName: jsxProp,
+				propValue,
+				paramName
+			});
+			if (typeof evaluatedValue !== "string" && typeof evaluatedValue !== "number") return false;
+			const cssValue = prefix || suffix ? `${prefix}${String(evaluatedValue)}${suffix}` : evaluatedValue;
+			transformedValues.push({
+				propValue,
+				cssValue
+			});
+		}
+		const ensuredFallbackFnKey = ensureObservedVariantFallbackFn(jsxProp, stylexProp, (param) => buildObservedExpressionFallbackValueExpr({
+			j,
+			expression,
+			jsxProp,
+			paramName,
+			param,
+			prefix,
+			suffix
+		}), observedExpressionFallbackFnKey(jsxProp, conditionWhen));
+		if (!ensuredFallbackFnKey) return false;
+		if (!styleFnFromProps.some((entry) => entry.fnKey === ensuredFallbackFnKey && entry.jsxProp === jsxProp && entry.conditionWhen === conditionWhen)) styleFnFromProps.push({
+			fnKey: ensuredFallbackFnKey,
+			jsxProp,
+			conditionWhen
+		});
+		for (const { propValue, cssValue } of transformedValues) applyVariant({
+			when: `${conditionWhen} && ${jsxProp} === ${typeof propValue === "number" ? String(propValue) : JSON.stringify(propValue)}`,
+			propName: jsxProp,
+			allPropNames: [conditionProp, jsxProp]
+		}, { [stylexProp]: cssValue });
+		markStyleValueVariantProp(jsxProp);
+		ensureObservedVariantPropDrop(jsxProp);
+		return true;
+	};
+	const observedExpressionFallbackFnKey = (jsxProp, conditionWhen) => {
+		const normalizedJsxProp = jsxProp.startsWith("$") ? jsxProp.slice(1) : jsxProp;
+		const baseFnKey = styleKeyWithSuffix(decl.styleKey, normalizedJsxProp);
+		const existingForCondition = styleFnFromProps.find((entry) => entry.jsxProp === jsxProp && entry.conditionWhen === conditionWhen);
+		if (existingForCondition) return existingForCondition.fnKey;
+		return styleFnFromProps.some((entry) => entry.fnKey === baseFnKey && entry.jsxProp === jsxProp && entry.conditionWhen !== conditionWhen) ? styleKeyWithSuffix(baseFnKey, conditionWhen) : baseFnKey;
+	};
+	const ensureObservedVariantPropDrop = (jsxProp) => {
+		if (jsxProp.startsWith("$") || decl.base.kind !== "component") ensureShouldForwardPropDrop(decl, jsxProp);
+	};
+	const markStyleValueVariantProp = (jsxProp) => {
+		decl.styleValueVariantProps ??= /* @__PURE__ */ new Set();
+		decl.styleValueVariantProps.add(jsxProp);
+	};
+	const ensureObservedVariantFallbackFn = (jsxProp, stylexProp, buildValueExpr, fnKeyOverride) => {
 		const normalizedJsxProp = jsxProp.startsWith("$") ? jsxProp.slice(1) : jsxProp;
-		const fnKey = styleKeyWithSuffix(decl.styleKey, normalizedJsxProp);
+		const fnKey = fnKeyOverride ?? styleKeyWithSuffix(decl.styleKey, normalizedJsxProp);
 		const paramName = cssPropertyToIdentifier(normalizedJsxProp || stylexProp, avoidNames);
-		const valueExpr = buildRuntimeObservedValueExpr(j, stylexProp, j.identifier(paramName), staticParts);
+		const valueExpr = buildValueExpr(j.identifier(paramName), paramName);
+		if (!valueExpr) return null;
 		const property = j.property("init", makeCssPropKey(j, stylexProp), valueExpr);
 		const existing = styleFnDecls.get(fnKey);
 		if (existing?.type === "ArrowFunctionExpression" && existing.body?.type === "ObjectExpression") {
@@ -32205,15 +34423,27 @@ function handleInterpolatedDeclaration(args) {
 			continue;
 		}
 		if (res && res.type === "splitConditionalWithDynamicBranch") if (!d.property) {} else {
-			const { conditionProp, staticValue, dynamicBranchExpr, dynamicProps, isStaticWhenFalse } = res;
+			const { conditionProp, staticValue, dynamicBranchExpr, paramName, dynamicProps, isStaticWhenFalse } = res;
 			const { prefix, suffix } = extractStaticPartsForDecl(d);
 			const cssValueStr = `${prefix}${staticValue}${suffix}`;
 			for (const out of cssDeclarationToStylexDeclarations(d)) styleObj[out.prop] = cssValueStr;
+			const conditionWhen = isStaticWhenFalse ? conditionProp : `!${conditionProp}`;
 			const clonedDynamic = cloneAstNode(dynamicBranchExpr);
 			const dynamicValueExpr = prefix || suffix ? buildTemplateWithStaticParts(j, clonedDynamic, prefix, suffix) : clonedDynamic;
+			const existingBucket = variantBuckets.get(conditionProp);
+			if (!existingBucket && dynamicProps.length === 1) {
+				const out = cssDeclarationToStylexDeclarations(d)[0];
+				const dynamicProp = dynamicProps[0];
+				if (out && dynamicProp && tryEmitObservedExpressionVariantBuckets(dynamicProp, out.prop, clonedDynamic, paramName, conditionWhen, conditionProp, prefix, suffix)) {
+					ensureShouldForwardPropDrop(decl, conditionProp);
+					decl.observedExpressionConditionDropProps ??= /* @__PURE__ */ new Set();
+					decl.observedExpressionConditionDropProps.add(conditionProp);
+					decl.needsWrapperComponent = true;
+					continue;
+				}
+			}
 			for (const propName of dynamicProps) ensureShouldForwardPropDrop(decl, propName);
 			ensureShouldForwardPropDrop(decl, conditionProp);
-			const conditionWhen = isStaticWhenFalse ? conditionProp : `!${conditionProp}`;
 			const scalarDynamic = shouldUseScalarDynamicArgs(d.property, d.valueRaw) && dynamicProps.length > 0 ? scalarizePropsObjectDynamicValue({
 				j,
 				valueExpr: dynamicValueExpr,
@@ -32228,7 +34458,6 @@ function handleInterpolatedDeclaration(args) {
 				prop.shorthand = true;
 				return prop;
 			}));
-			const existingBucket = variantBuckets.get(conditionProp);
 			if (existingBucket) {
 				const existingFnKey = variantStyleKeys[conditionProp];
 				if (!existingFnKey) break;
@@ -32478,134 +34707,132 @@ function handleInterpolatedDeclaration(args) {
 		}
 		if (res && res.type === "emitStyleFunction") {
 			const jsxProp = res.call;
+			const outs = cssDeclarationToStylexDeclarations(d);
+			const valueTransform = res.valueTransform;
 			if (!res.valueTransform && !res.wrapValueInTemplateLiteral && !media && (!pseudos || pseudos.length === 0)) {
-				const outs = cssDeclarationToStylexDeclarations(d);
 				if (outs.length === 1 && tryEmitIdentityVariantBuckets(jsxProp, outs[0].prop)) continue;
 			}
-			{
-				const outs = cssDeclarationToStylexDeclarations(d);
-				for (let i = 0; i < outs.length; i++) {
-					const out = outs[i];
-					const fnKey = styleKeyWithSuffix(decl.styleKey, out.prop);
-					const valueTransform = res.valueTransform;
-					const resolvedCallArg = buildResolvedValueTransformCallArg({
-						j,
-						jsxProp,
-						valueTransform,
-						parseExpr,
-						addResolverImports
-					});
-					const outParamName = resolvedCallArg || valueTransform ? cssPropertyToIdentifier(out.prop, avoidNames) : styleFnParamNameForJsxProp(jsxProp, out.prop, avoidNames);
-					const scalarCallArg = valueTransform ? void 0 : scalarCallArgForParamName(j, jsxProp, outParamName, decl.transientPropRenames?.get(jsxProp));
-					const callArg = resolvedCallArg ?? scalarCallArg;
-					const hasExplicitType = !!decl.propsType;
-					const isOptional = ctx.isJsxPropOptional(jsxProp);
-					styleFnFromProps.push({
-						fnKey,
-						jsxProp,
-						...callArg ? { callArg } : {},
-						...hasExplicitType && !isOptional ? { condition: "always" } : {}
-					});
-					if (!styleFnDecls.has(fnKey)) {
-						const param = j.identifier(outParamName);
-						const valueId = j.identifier(outParamName);
-						if (jsxProp !== "__props") annotateParamFromJsxProp(param, jsxProp);
-						if (resolvedCallArg && /\.(ts|tsx)$/.test(filePath)) param.typeAnnotation = j.tsTypeAnnotation(j.tsStringKeyword());
-						if (jsxProp?.startsWith?.("$")) ensureShouldForwardPropDrop(decl, jsxProp);
-						const buildValueExpr = () => {
-							const transformed = (() => {
-								const vt = callArg ? void 0 : valueTransform;
-								if (vt?.kind === "call" && typeof vt.calleeIdent === "string") {
-									addResolverImports(vt.resolvedImports);
-									if (vt.resolvedExpr) {
-										const resolvedCallee = parseExpr(vt.resolvedExpr);
-										if (vt.resolvedUsage === "memberAccess") return j.memberExpression(resolvedCallee, valueId, true);
-										return j.callExpression(resolvedCallee, [valueId]);
-									}
-									return j.callExpression(j.identifier(vt.calleeIdent), [valueId]);
+			if (!res.wrapValueInTemplateLiteral && outs.length === 1 && tryEmitTransformedObservedVariantBuckets(jsxProp, outs[0].prop, valueTransform)) continue;
+			for (let i = 0; i < outs.length; i++) {
+				const out = outs[i];
+				const fnKey = styleKeyWithSuffix(decl.styleKey, out.prop);
+				const resolvedCallArg = buildResolvedValueTransformCallArg({
+					j,
+					jsxProp,
+					valueTransform,
+					parseExpr,
+					addResolverImports
+				});
+				const outParamName = resolvedCallArg || valueTransform ? cssPropertyToIdentifier(out.prop, avoidNames) : styleFnParamNameForJsxProp(jsxProp, out.prop, avoidNames);
+				const scalarCallArg = valueTransform ? void 0 : scalarCallArgForParamName(j, jsxProp, outParamName, decl.transientPropRenames?.get(jsxProp));
+				const callArg = resolvedCallArg ?? scalarCallArg;
+				const hasExplicitType = !!decl.propsType;
+				const isOptional = ctx.isJsxPropOptional(jsxProp);
+				styleFnFromProps.push({
+					fnKey,
+					jsxProp,
+					...callArg ? { callArg } : {},
+					...hasExplicitType && !isOptional ? { condition: "always" } : {}
+				});
+				if (!styleFnDecls.has(fnKey)) {
+					const param = j.identifier(outParamName);
+					const valueId = j.identifier(outParamName);
+					if (jsxProp !== "__props") annotateParamFromJsxProp(param, jsxProp);
+					if (resolvedCallArg && /\.(ts|tsx)$/.test(filePath)) param.typeAnnotation = j.tsTypeAnnotation(j.tsStringKeyword());
+					if (jsxProp?.startsWith?.("$")) ensureShouldForwardPropDrop(decl, jsxProp);
+					const buildValueExpr = () => {
+						const transformed = (() => {
+							const vt = callArg ? void 0 : valueTransform;
+							if (vt?.kind === "call" && typeof vt.calleeIdent === "string") {
+								addResolverImports(vt.resolvedImports);
+								if (vt.resolvedExpr) {
+									const resolvedCallee = parseExpr(vt.resolvedExpr);
+									if (vt.resolvedUsage === "memberAccess") return j.memberExpression(resolvedCallee, valueId, true);
+									return j.callExpression(resolvedCallee, [valueId]);
 								}
-								return valueId;
-							})();
-							const transformedValue = !!res.wrapValueInTemplateLiteral ? j.templateLiteral([j.templateElement({
+								return j.callExpression(j.identifier(vt.calleeIdent), [valueId]);
+							}
+							return valueId;
+						})();
+						const transformedValue = !!res.wrapValueInTemplateLiteral ? j.templateLiteral([j.templateElement({
+							raw: "",
+							cooked: ""
+						}, false), j.templateElement({
+							raw: "",
+							cooked: ""
+						}, true)], [transformed]) : transformed;
+						const v = d.value;
+						if (!v || v.kind !== "interpolated") return transformedValue;
+						const parts = v.parts ?? [];
+						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 !== "")) {
+							if (shouldPreserveNumericCssTextForProp(jsxProp, out.prop)) return j.templateLiteral([j.templateElement({
 								raw: "",
 								cooked: ""
 							}, false), j.templateElement({
 								raw: "",
 								cooked: ""
-							}, true)], [transformed]) : transformed;
-							const v = d.value;
-							if (!v || v.kind !== "interpolated") return transformedValue;
-							const parts = v.parts ?? [];
-							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 !== "")) {
-								if (shouldPreserveNumericCssTextForProp(jsxProp, out.prop)) return j.templateLiteral([j.templateElement({
-									raw: "",
-									cooked: ""
-								}, false), j.templateElement({
-									raw: "",
-									cooked: ""
-								}, true)], [transformed]);
-								return transformedValue;
+							}, true)], [transformed]);
+							return transformedValue;
+						}
+						const quasis = [];
+						const exprs = [];
+						let q = "";
+						for (const part of parts) {
+							if (part?.kind === "static") {
+								q += String(part.value ?? "");
+								continue;
 							}
-							const quasis = [];
-							const exprs = [];
-							let q = "";
-							for (const part of parts) {
-								if (part?.kind === "static") {
-									q += String(part.value ?? "");
-									continue;
-								}
-								if (part?.kind === "slot") {
-									quasis.push(j.templateElement({
-										raw: q,
-										cooked: q
-									}, false));
-									q = "";
-									exprs.push(transformed);
-									continue;
-								}
+							if (part?.kind === "slot") {
+								quasis.push(j.templateElement({
+									raw: q,
+									cooked: q
+								}, false));
+								q = "";
+								exprs.push(transformed);
+								continue;
 							}
-							quasis.push(j.templateElement({
-								raw: q,
-								cooked: q
-							}, true));
-							return j.templateLiteral(quasis, exprs);
-						};
-						const valueExpr = buildValueExpr();
-						const getPropValue = () => {
-							if (!media) return valueExpr;
-							const existingFn = styleFnDecls.get(fnKey);
-							let existingValue = null;
-							if (existingFn?.type === "ArrowFunctionExpression") {
-								const body = existingFn.body;
-								if (body?.type === "ObjectExpression") {
-									const prop = body.properties.find((propNode) => {
-										if (!propNode || typeof propNode !== "object") return false;
-										if (propNode.type !== "Property") return false;
-										const key = propNode.key;
-										if (!key || typeof key !== "object") return false;
-										const keyType = key.type;
-										if (keyType === "Identifier") return key.name === out.prop;
-										if (keyType === "Literal") return key.value === out.prop;
-										return false;
-									});
-									if (prop && prop.type === "Property") existingValue = prop.value;
-								}
+						}
+						quasis.push(j.templateElement({
+							raw: q,
+							cooked: q
+						}, true));
+						return j.templateLiteral(quasis, exprs);
+					};
+					const valueExpr = buildValueExpr();
+					const getPropValue = () => {
+						if (!media) return valueExpr;
+						const existingFn = styleFnDecls.get(fnKey);
+						let existingValue = null;
+						if (existingFn?.type === "ArrowFunctionExpression") {
+							const body = existingFn.body;
+							if (body?.type === "ObjectExpression") {
+								const prop = body.properties.find((propNode) => {
+									if (!propNode || typeof propNode !== "object") return false;
+									if (propNode.type !== "Property") return false;
+									const key = propNode.key;
+									if (!key || typeof key !== "object") return false;
+									const keyType = key.type;
+									if (keyType === "Identifier") return key.name === out.prop;
+									if (keyType === "Literal") return key.value === out.prop;
+									return false;
+								});
+								if (prop && prop.type === "Property") existingValue = prop.value;
 							}
-							const defaultValue = existingValue ?? j.literal(null);
-							return j.objectExpression([j.property("init", j.identifier("default"), defaultValue), j.property("init", j.literal(media), valueExpr)]);
-						};
-						const propKey = makeCssPropKey(j, out.prop);
-						const p = j.property("init", propKey, getPropValue());
-						const paramName = outParamName;
-						p.shorthand = propKey.type === "Identifier" && valueExpr?.type === "Identifier" && valueExpr.name === paramName;
-						const body = j.objectExpression([p]);
-						styleFnDecls.set(fnKey, j.arrowFunctionExpression([param], body));
-					}
-					if (i === 0) {}
+						}
+						const defaultValue = existingValue ?? j.literal(null);
+						return j.objectExpression([j.property("init", j.identifier("default"), defaultValue), j.property("init", j.literal(media), valueExpr)]);
+					};
+					const propKey = makeCssPropKey(j, out.prop);
+					const p = j.property("init", propKey, getPropValue());
+					const paramName = outParamName;
+					p.shorthand = propKey.type === "Identifier" && valueExpr?.type === "Identifier" && valueExpr.name === paramName;
+					const body = j.objectExpression([p]);
+					styleFnDecls.set(fnKey, j.arrowFunctionExpression([param], body));
 				}
+				if (i === 0) {}
 			}
 			continue;
 		}
@@ -32958,9 +35185,40 @@ function isUnchangedImportedHelperStyleCall(res, exprAst, originalExpr) {
 	const resolveResult = res.resolveCallResult;
 	const resolveContext = res.resolveCallContext;
 	const typedResult = resolveResult && typeof resolveResult === "object" ? resolveResult : null;
-	if (!typedResult || !resolveContext || typedResult.cssText || (typedResult.imports?.length ?? 0) > 0) return false;
+	if (!typedResult || !resolveContext || typedResult.cssText) return false;
 	if (!isCallExpressionLike(exprAst) || !isCallExpressionLike(originalExpr)) return false;
-	return calleeKey(exprAst.callee) === calleeKey(originalExpr.callee);
+	if (calleeKey(exprAst.callee) !== calleeKey(originalExpr.callee)) return false;
+	return !redirectsOriginalCalleeToDifferentSource(res, resolveContext);
+}
+function redirectsOriginalCalleeToDifferentSource(res, resolveContext) {
+	const matchingImport = (res.imports ?? (res.resolveCallResult && typeof res.resolveCallResult === "object" ? res.resolveCallResult.imports : void 0) ?? []).find((importSpec) => importSpec.names.some((name) => name.imported === resolveContext.calleeImportedName || name.local === resolveContext.calleeImportedName));
+	return Boolean(matchingImport && !sourcesReferToSameImport(matchingImport.from, resolveContext));
+}
+function sourcesReferToSameImport(left, resolveContext) {
+	const right = resolveContext.calleeSource;
+	if (left.value === right.value) return true;
+	return specifierMatchesAbsolutePath(left, right, resolveContext.callSiteFilePath) || specifierMatchesAbsolutePath(right, left, resolveContext.callSiteFilePath);
+}
+function specifierMatchesAbsolutePath(maybeSpecifier, maybeAbsolute, callSiteFilePath) {
+	if (maybeSpecifier.kind !== "specifier" || maybeAbsolute.kind !== "absolutePath") return false;
+	const specifier = maybeSpecifier.value.replace(/\\/g, "/");
+	if (!isRelativeSpecifier(specifier)) return false;
+	const resolvedSpecifier = resolve(dirname(callSiteFilePath), specifier).replace(/\\/g, "/");
+	const absolutePath = maybeAbsolute.value.replace(/\\/g, "/");
+	return importPathCandidates(resolvedSpecifier).some((candidate) => absolutePath === candidate);
+}
+function importPathCandidates(resolvedSpecifier) {
+	return [
+		"",
+		".ts",
+		".tsx",
+		".js",
+		".jsx",
+		".mts",
+		".mjs",
+		".cts",
+		".cjs"
+	].flatMap((extension) => [`${resolvedSpecifier}${extension}`, `${resolvedSpecifier}/index${extension}`]);
 }
 function isCallExpressionLike(node) {
 	return !!node && typeof node === "object" && node.type === "CallExpression";
@@ -32989,6 +35247,28 @@ function buildRuntimeObservedValueExpr(j, stylexProp, valueExpr, staticParts) {
 		cooked: staticParts.suffix
 	}, true)], [valueExpr]);
 }
+function buildObservedExpressionFallbackValueExpr(args) {
+	const { j, expression, jsxProp, paramName, param, prefix, suffix } = args;
+	const propNames = new Set([jsxProp, jsxProp.startsWith("$") ? jsxProp.slice(1) : jsxProp]);
+	let replaced = false;
+	const rewritten = mapAst(cloneAstNode(expression), (node) => {
+		if (isMemberExpression(node)) {
+			const memberPath = extractRootAndPath(node);
+			const propName = memberPath?.path[0];
+			if (memberPath?.rootName === paramName && memberPath.path.length === 1 && propName && propNames.has(propName)) {
+				replaced = true;
+				return cloneAstNode(param);
+			}
+			return;
+		}
+		if (node.type === "Identifier" && propNames.has(node.name)) {
+			replaced = true;
+			return cloneAstNode(param);
+		}
+	});
+	if (!replaced) return null;
+	return prefix || suffix ? buildTemplateWithStaticParts(j, rewritten, prefix, suffix) : rewritten;
+}
 function isNumberLikeTsType(tsType) {
 	if (!tsType || typeof tsType !== "object") return false;
 	const type = tsType;
@@ -33942,6 +36222,9 @@ function resolveExpressionToStaticString(expr, state) {
 	const direct = literalToStaticValue(expr);
 	if (typeof direct === "string") return direct;
 	if (!isIdentifierNode(expr)) return null;
+	const scoped = resolveScopedConstStringInit(expr, state);
+	if (scoped?.kind === "found") return scoped.value;
+	if (scoped?.kind === "blocked") return null;
 	if (state.isIdentifierShadowed(expr, expr.name)) return null;
 	const fromImport = resolveImportedConstStringInit(expr.name, state);
 	if (fromImport !== null) return fromImport;
@@ -34138,6 +36421,203 @@ function findTopLevelConstStringInit(name, state) {
 	});
 	return resolved;
 }
+function resolveScopedConstStringInit(expr, state) {
+	const identPath = findIdentifierPath(expr, state);
+	const exprStart = getNodeStart(expr);
+	if (!identPath || exprStart === null) return null;
+	const ancestorScopes = getAncestorScopeNodes(identPath);
+	let best = null;
+	state.root.find(state.j.VariableDeclarator).forEach((p) => {
+		const declarator = p.node;
+		if (declarator.id?.type !== "Identifier" || declarator.id.name !== expr.name) return;
+		const start = getNodeStart(declarator);
+		if (start === null || start >= exprStart) return;
+		const path = p;
+		const scopeNode = getDeclarationScopeNode(path, getVariableDeclarationKind(path));
+		if (!scopeNode || !ancestorScopes.has(scopeNode)) return;
+		if (isProgramNode(scopeNode) || hasInnerBindingBetween(identPath, scopeNode, expr.name)) return;
+		const value = getVariableDeclarationKind(path) === "const" ? literalToStaticValue(declarator.init) : null;
+		const candidate = {
+			start,
+			value: typeof value === "string" ? value : null
+		};
+		if (!best || candidate.start > best.start) best = candidate;
+	});
+	const resolved = best;
+	if (!resolved) return null;
+	return resolved.value === null ? { kind: "blocked" } : {
+		kind: "found",
+		value: resolved.value
+	};
+}
+function findIdentifierPath(expr, state) {
+	return state.root.find(state.j.Identifier).filter((p) => p.node === expr).paths()[0] ?? null;
+}
+function getNodeStart(node) {
+	const start = node.start;
+	return typeof start === "number" ? start : null;
+}
+function getAncestorScopeNodes(path) {
+	const scopes = /* @__PURE__ */ new Set();
+	let cur = path;
+	while (cur) {
+		if (isScopeNode(cur.node)) scopes.add(cur.node);
+		cur = cur.parentPath ?? null;
+	}
+	return scopes;
+}
+function getDeclarationScopeNode(path, declarationKind) {
+	const declarationParent = path.parentPath?.parentPath;
+	if (declarationKind !== "var" && declarationParent && isLoopNode(declarationParent.node)) return declarationParent.node;
+	let cur = path.parentPath;
+	while (cur) {
+		if (declarationKind === "var" && isFunctionOrProgramNode(cur.node)) return cur.node;
+		if (declarationKind !== "var" && isLoopNode(cur.node)) return cur.node;
+		if (declarationKind !== "var" && isScopeNode(cur.node)) return cur.node;
+		cur = cur.parentPath ?? null;
+	}
+	return null;
+}
+function hasInnerBindingBetween(identPath, outerScopeNode, name) {
+	let cur = identPath.parentPath;
+	while (cur && cur.node !== outerScopeNode) {
+		if (isFunctionNode(cur.node) && functionDeclaresName(cur.node, name)) return true;
+		if (isCatchClauseNode(cur.node) && catchClauseDeclaresName(cur.node, name)) return true;
+		if (isBlockStatementNode(cur.node) && blockDeclaresName(cur.node, name)) return true;
+		if (isSwitchStatementNode(cur.node) && switchStatementDeclaresName(cur.node, name)) return true;
+		if (isLoopNode(cur.node) && loopDeclaresName(cur.node, name)) return true;
+		cur = cur.parentPath ?? null;
+	}
+	return false;
+}
+function functionDeclaresName(node, name) {
+	const fn = node;
+	const ids = /* @__PURE__ */ new Set();
+	collectPatternIdentifiers(fn.id, ids);
+	for (const param of fn.params ?? []) collectPatternIdentifiers(param, ids);
+	collectFunctionVarBindings(node, ids);
+	return ids.has(name);
+}
+function collectFunctionVarBindings(node, out) {
+	const visit = (current, isRoot = false) => {
+		if (!current || typeof current !== "object") return;
+		if (Array.isArray(current)) {
+			for (const child of current) visit(child);
+			return;
+		}
+		if (!isRoot && isFunctionNode(current)) return;
+		const astNode = current;
+		if (astNode.type === "VariableDeclaration" && astNode.kind === "var") {
+			for (const declarator of astNode.declarations ?? []) collectPatternIdentifiers(declarator.id, out);
+			return;
+		}
+		for (const key of Object.keys(astNode)) {
+			if (key === "loc" || key === "comments") continue;
+			visit(astNode[key]);
+		}
+	};
+	visit(node, true);
+}
+function catchClauseDeclaresName(node, name) {
+	const catchClause = node;
+	const ids = /* @__PURE__ */ new Set();
+	collectPatternIdentifiers(catchClause.param, ids);
+	return ids.has(name);
+}
+function blockDeclaresName(node, name) {
+	const block = node;
+	for (const statement of block.body ?? []) {
+		if (!statement || typeof statement !== "object") continue;
+		const stmt = statement;
+		if (stmt.type === "VariableDeclaration" && (stmt.kind === "let" || stmt.kind === "const")) for (const declarator of stmt.declarations ?? []) {
+			const ids = /* @__PURE__ */ new Set();
+			collectPatternIdentifiers(declarator.id, ids);
+			if (ids.has(name)) return true;
+		}
+		if (stmt.type === "FunctionDeclaration" || stmt.type === "ClassDeclaration") {
+			const ids = /* @__PURE__ */ new Set();
+			collectPatternIdentifiers(stmt.id, ids);
+			if (ids.has(name)) return true;
+		}
+	}
+	return false;
+}
+function switchStatementDeclaresName(node, name) {
+	const switchStatement = node;
+	for (const switchCase of switchStatement.cases ?? []) if (blockDeclaresName({ body: switchCase.consequent ?? [] }, name)) return true;
+	return false;
+}
+function loopDeclaresName(node, name) {
+	const loop = node;
+	const binding = loop.init ?? loop.left;
+	if (!binding || typeof binding !== "object") return false;
+	const declaration = binding;
+	if (declaration.type !== "VariableDeclaration" || declaration.kind !== "let" && declaration.kind !== "const") return false;
+	for (const declarator of declaration.declarations ?? []) {
+		const ids = /* @__PURE__ */ new Set();
+		collectPatternIdentifiers(declarator.id, ids);
+		if (ids.has(name)) return true;
+	}
+	return false;
+}
+function collectPatternIdentifiers(pattern, out) {
+	if (!pattern || typeof pattern !== "object") return;
+	const node = pattern;
+	switch (node.type) {
+		case "Identifier":
+			if (node.name) out.add(node.name);
+			return;
+		case "RestElement":
+			collectPatternIdentifiers(node.argument, out);
+			return;
+		case "AssignmentPattern":
+			collectPatternIdentifiers(node.left, out);
+			return;
+		case "ObjectPattern":
+			for (const prop of node.properties ?? []) {
+				const property = prop;
+				collectPatternIdentifiers(property?.type === "RestElement" ? property.argument : property?.value, out);
+			}
+			return;
+		case "ArrayPattern":
+			for (const element of node.elements ?? []) collectPatternIdentifiers(element, out);
+			return;
+		case "TSParameterProperty":
+			collectPatternIdentifiers(node.parameter, out);
+			return;
+		default: return;
+	}
+}
+function getVariableDeclarationKind(path) {
+	const parentNode = path.parentPath?.node;
+	return parentNode?.type === "VariableDeclaration" && typeof parentNode.kind === "string" ? parentNode.kind : null;
+}
+function isScopeNode(node) {
+	return isProgramNode(node) || isBlockStatementNode(node);
+}
+function isProgramNode(node) {
+	return node.type === "Program";
+}
+function isFunctionOrProgramNode(node) {
+	return isProgramNode(node) || isFunctionNode(node);
+}
+function isFunctionNode(node) {
+	const type = node.type;
+	return type === "FunctionDeclaration" || type === "FunctionExpression" || type === "ArrowFunctionExpression";
+}
+function isCatchClauseNode(node) {
+	return node.type === "CatchClause";
+}
+function isBlockStatementNode(node) {
+	return node.type === "BlockStatement";
+}
+function isSwitchStatementNode(node) {
+	return node.type === "SwitchStatement";
+}
+function isLoopNode(node) {
+	const type = node.type;
+	return type === "ForStatement" || type === "ForInStatement" || type === "ForOfStatement";
+}
 /**
 * Tries to follow re-exports for `<exportedName>` from `<program>`:
 *   - `export { exportedName } from "./other"` (direct)
@@ -34324,6 +36804,12 @@ function processRuleDeclarations(args) {
 			state.bail = true;
 			break;
 		}
+		if (d.property && isUnsupportedStylexProperty(d.property)) {
+			state.bailUnsupported(ctx.decl, `Unsupported CSS property "${d.property}" cannot be emitted in StyleX`);
+			if (state.currentDecl === ctx.decl) break;
+			state.bail = true;
+			break;
+		}
 		const outs = cssDeclarationToStylexDeclarations(d);
 		for (let i = 0; i < outs.length; i++) {
 			const out = outs[i];
@@ -34477,6 +36963,15 @@ function processDeclRules(ctx) {
 				});
 				break;
 			}
+			if (specificityResult.wasStripped && decl.base.kind === "component") {
+				state.markBail();
+				warnings.push({
+					severity: "warning",
+					type: "Styled-components specificity hacks like `&&` / `&&&` are not representable in StyleX",
+					loc: computeSelectorWarningLoc(decl.loc, decl.rawCss, rule.selector)
+				});
+				break;
+			}
 			const selectorForAnalysis = specificityResult.normalized;
 			const s = normalizeInterpolatedSelector(selectorForAnalysis).trim();
 			const hasComponentExpr = rule.selector.includes("__SC_EXPR_");
@@ -34856,7 +37351,7 @@ function processDeclRules(ctx) {
 			state.markBail();
 			warnings.push({
 				severity: "warning",
-				type: "CSS block contains unsupported at-rule (only @media and @container are supported; @supports, etc. require manual handling)",
+				type: "CSS block contains unsupported at-rule (only @media, @container, and @supports are supported; mixed nested at-rules require manual handling)",
 				loc: computeSelectorWarningLoc(decl.loc, decl.rawCss, rule.selector)
 			});
 			break;
@@ -35037,22 +37532,38 @@ function processDeclRules(ctx) {
 			}
 			if (prop && prop.startsWith("--") && typeof value === "string") localVarValues.set(prop, value);
 			if (media && pseudos?.length) {
-				perPropPseudo[prop] ??= {};
-				const existing = perPropPseudo[prop];
-				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;
-				}
-				for (const ps of pseudos) {
-					const current = existing[ps];
-					if (!current || typeof current !== "object") {
-						const fallbackDefault = cssHelperPropValues.has(prop) ? getComposedDefaultValue(prop) : null;
-						existing[ps] = { default: current !== void 0 ? current : fallbackDefault };
-					} else if (!("default" in current)) current.default = cssHelperPropValues.has(prop) ? getComposedDefaultValue(prop) : null;
-					existing[ps][media] = value;
+				if (media.startsWith("@supports")) {
+					perPropMedia[prop] ??= {};
+					const existing = perPropMedia[prop];
+					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;
+					}
+					const current = existing[media];
+					const mediaMap = current && typeof current === "object" && !Array.isArray(current) && !isAstNode(current) ? current : { default: current ?? null };
+					for (const ps of pseudos) mediaMap[ps] = value;
+					existing[media] = mediaMap;
+				} else {
+					perPropPseudo[prop] ??= {};
+					const existing = perPropPseudo[prop];
+					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;
+					}
+					for (const ps of pseudos) {
+						const current = existing[ps];
+						if (!current || typeof current !== "object") {
+							const fallbackDefault = cssHelperPropValues.has(prop) ? getComposedDefaultValue(prop) : null;
+							existing[ps] = { default: current !== void 0 ? current : fallbackDefault };
+						} else if (!("default" in current)) current.default = cssHelperPropValues.has(prop) ? getComposedDefaultValue(prop) : null;
+						existing[ps][media] = value;
+					}
 				}
 				return;
 			}
@@ -35131,7 +37642,9 @@ function processDeclRules(ctx) {
 					else if (cssHelperPropValues.has(prop)) existing.default = getComposedDefaultValue(prop);
 					else existing.default = null;
 				}
-				existing[media] = value;
+				const currentMediaValue = existing[media];
+				if (currentMediaValue && typeof currentMediaValue === "object" && !Array.isArray(currentMediaValue) && !isAstNode(currentMediaValue)) currentMediaValue.default = value;
+				else existing[media] = value;
 				patchEarlierDynamicConditionValues(prop, media, value);
 				return;
 			}
@@ -35570,7 +38083,7 @@ function handlePseudoExpand(result, importedName, rule, ctx, prefixPseudo) {
 				const existing = target[pseudo];
 				if (existing && typeof existing === "object" && "__computedKeys" in existing) existing.__computedKeys.push(newEntry);
 				else target[pseudo] = {
-					default: null,
+					default: target.default ?? null,
 					__computedKeys: [newEntry]
 				};
 			} else target[pseudo] = cloneAstNode(value);
@@ -35840,6 +38353,15 @@ function registerReferencedMarker(styleKey, localName, state, ancestorSelectorPa
 function resolveMediaAndEmitComputedKeys(bucket, makeKeyExpr, rule, ctx, computedMediaWarningType, entryExtra) {
 	const { state, decl } = ctx;
 	const { warnings } = state;
+	if (hasUnsupportedAtRule(rule.atRuleStack)) {
+		state.markBail();
+		warnings.push({
+			severity: "warning",
+			type: "CSS block contains unsupported at-rule (only @media, @container, and @supports are supported; mixed nested at-rules require manual handling)",
+			loc: computeSelectorWarningLoc(decl.loc, decl.rawCss, rule.selector)
+		});
+		return "break";
+	}
 	let media = findSupportedAtRule(rule.atRuleStack);
 	if (media) {
 		const resolved = resolveMediaAtRulePlaceholders(media, (slotId) => decl.templateExpressions[slotId], {
@@ -35940,6 +38462,15 @@ function handleAdjacentSiblingSelector(rule, ctx) {
 		});
 		return "break";
 	}
+	if (hasUnsupportedAtRule(rule.atRuleStack)) {
+		state.markBail();
+		state.warnings.push({
+			severity: "warning",
+			type: "CSS block contains unsupported at-rule (only @media, @container, and @supports are supported; mixed nested at-rules require manual handling)",
+			loc: computeSelectorWarningLoc(decl.loc, decl.rawCss, rule.selector)
+		});
+		return "break";
+	}
 	let media = findSupportedAtRule(rule.atRuleStack);
 	if (media) {
 		const resolved = resolveMediaAtRulePlaceholders(media, (slotId) => decl.templateExpressions[slotId], {
@@ -36804,10 +39335,6 @@ function collectTemplateSelectorIdentifiers(decl) {
 	}
 	return identifiers;
 }
-function isTemplatePlaceholderInSelectorContext(rawCss, pos, length) {
-	const after = rawCss.slice(pos + length).trimStart();
-	return isSelectorContext(rawCss.slice(0, pos).trimEnd().replace(PLACEHOLDER_RE_G, "hover"), after);
-}
 function collectCssHelperFunctionSelectorIdentifiers(state, cssLocal) {
 	const selectorIdentifiers = /* @__PURE__ */ new Map();
 	for (const [name, helperFn] of state.cssHelperFunctions) selectorIdentifiers.set(name, collectTemplateSelectorIdentifiersFromParts(helperFn.rawCss, helperFn.templateExpressions));
@@ -38167,8 +40694,15 @@ function substituteStyleFnCallArg(callArg, propNames, valueExpr) {
 	};
 	return visit(cloneAstNode(callArg));
 }
-function wrappedComponentAcceptsSxProp(ctx, componentLocalName) {
+function wrappedComponentAcceptsSxProp(ctx, componentLocalName, visiting = /* @__PURE__ */ new Set()) {
 	if (!ctx.adapter.useSxProp) return false;
+	if (visiting.has(componentLocalName)) return false;
+	visiting.add(componentLocalName);
+	const localStyledDecl = ctx.styledDecls?.find((decl) => decl.localName === componentLocalName);
+	if (localStyledDecl?.needsWrapperComponent && localStyledDecl.base.kind === "component" && wrappedComponentAcceptsSxProp(ctx, localStyledDecl.base.ident, visiting)) {
+		visiting.delete(componentLocalName);
+		return true;
+	}
 	const importInfo = ctx.importMap?.get(componentLocalName);
 	if (importInfo) {
 		const adapterResult = ctx.adapter.wrappedComponentInterface?.({
@@ -38177,7 +40711,10 @@ function wrappedComponentAcceptsSxProp(ctx, componentLocalName) {
 			importedName: importInfo.importedName,
 			filePath: ctx.file.path
 		});
-		if (adapterResult !== void 0) return adapterResult.acceptsSx === true;
+		if (adapterResult !== void 0) {
+			visiting.delete(componentLocalName);
+			return adapterResult.acceptsSx === true;
+		}
 	}
 	const typedComponent = (() => {
 		if (importInfo?.source.kind === "absolutePath") {
@@ -38187,14 +40724,22 @@ function wrappedComponentAcceptsSxProp(ctx, componentLocalName) {
 		return findTypeScriptComponentMetadata(ctx.options.crossFileInfo?.typeScriptMetadata, ctx.file.path, [componentLocalName]);
 	})();
 	if (typedComponent) {
-		if (typedComponent.supportsSxProp) return true;
-		if (importInfo?.source.kind !== "absolutePath" || ctx.options.transformedFileSources?.has(toRealPath(importInfo.source.value)) !== true) return false;
+		if (typedComponent.supportsSxProp) {
+			visiting.delete(componentLocalName);
+			return true;
+		}
+		if (importInfo?.source.kind !== "absolutePath" || ctx.options.transformedFileSources?.has(resolveExistingFilePath(importInfo.source.value)) !== true) {
+			visiting.delete(componentLocalName);
+			return false;
+		}
 	}
-	return importInfo?.source.kind === "absolutePath" && transformedComponentAcceptsSx({
+	const accepts = importInfo?.source.kind === "absolutePath" && transformedComponentAcceptsSx({
 		absolutePath: importInfo.source.value,
 		componentNames: importInfo.importedName === "default" ? [componentLocalName, importInfo.importedName] : [importInfo.importedName],
 		sourceOverrides: ctx.options.transformedFileSources
 	});
+	visiting.delete(componentLocalName);
+	return accepts;
 }
 /**
 * Rewrites JSX usages and removes styled declarations when wrappers are not required.
@@ -38542,15 +41087,16 @@ function rewriteJsxStep(ctx) {
 			const hasRestSpreadAttr = keptRestAfterVariants.some((attr) => attr.type === "JSXSpreadAttribute");
 			const needsMerge = effectiveClassNameAttr !== null || styleAttr !== null && !(staticInlineStyleExpr !== null && styleAttr !== null && effectiveClassNameAttr === null && !hasCallerStyleAttr && !hasRestSpreadAttr);
 			const stylesId = ctx.stylesIdentifier ?? "styles";
-			const hasLocalStyleRef = styleArgs.some((arg) => j([arg]).find(j.Identifier, { name: stylesId }).size() > 0);
+			const mergedStyleArgs = mergeAdjacentComplementaryStyleExprs(j, styleArgs);
+			const hasLocalStyleRef = mergedStyleArgs.some((arg) => j([arg]).find(j.Identifier, { name: stylesId }).size() > 0);
 			const useSxPropForWrapped = ctx.adapter.useSxProp && wrappedAcceptsSxProp && hasLocalStyleRef;
 			const useSxProp = useSxPropForWrapped || ctx.adapter.useSxProp && !needsMerge && isIntrinsicTag && hasLocalStyleRef;
 			const callerSxExpr = sxAttr && sxAttr.type === "JSXAttribute" && sxAttr.value?.type === "JSXExpressionContainer" ? sxAttr.value.expression : null;
 			const stylexAttr = useSxProp ? (() => {
-				const allArgs = callerSxExpr ? [...styleArgs, callerSxExpr] : [...styleArgs];
+				const allArgs = callerSxExpr ? [...mergedStyleArgs, callerSxExpr] : [...mergedStyleArgs];
 				const sxExpr = allArgs.length === 1 && allArgs[0] ? allArgs[0] : j.arrayExpression(allArgs);
 				return j.jsxAttribute(j.jsxIdentifier("sx"), j.jsxExpressionContainer(sxExpr));
-			})() : j.jsxSpreadAttribute(needsMerge ? buildInlineMergeCall(j, styleArgs, effectiveClassNameAttr, styleAttr, ctx.adapter.styleMerger?.functionName) : j.callExpression(j.memberExpression(j.identifier("stylex"), j.identifier("props")), [...styleArgs]));
+			})() : j.jsxSpreadAttribute(needsMerge ? buildInlineMergeCall(j, mergedStyleArgs, effectiveClassNameAttr, styleAttr, ctx.adapter.styleMerger?.functionName) : j.callExpression(j.memberExpression(j.identifier("stylex"), j.identifier("props")), [...mergedStyleArgs]));
 			const extraClassNameAttrs = [];
 			if (extraClassNameExpr && useSxProp) extraClassNameAttrs.push(j.jsxAttribute(j.jsxIdentifier("className"), j.jsxExpressionContainer(extraClassNameExpr)));
 			const passThroughClassName = useSxPropForWrapped && classNameAttr ? [classNameAttr] : [];