styled-components-to-stylex-codemod 0.0.1 → 0.0.2

package/dist/transform.mjs

@@ -1,4 +1,4 @@
-import { r as logWarnings } from "./logger-D09HOyqF.mjs";
+import { i as assertValidAdapter, r as logWarnings } from "./logger-Ckk2VkqY.mjs";
 import path, { dirname, resolve } from "node:path";
 import { existsSync, readFileSync } from "node:fs";
 import { compile } from "stylis";
@@ -142,11 +142,67 @@ function normalizeStylisAstToIR(stylisAst, slots, options = {}) {
 		visit(node.children);
 	};
 	visit(stylisAst);
+	if (rawCss) {
+		const placeholderLineRe = /^__SC_EXPR_(\d+)__$/;
+		let depth = 0;
+		let line = "";
+		const flushLine = () => {
+			const trimmed = line.trim();
+			if (depth === 0) {
+				const m = trimmed.match(placeholderLineRe);
+				if (m) {
+					const placeholder = `__SC_EXPR_${Number(m[1])}__`;
+					const mapped = slotByPlaceholder.get(placeholder);
+					if (mapped !== void 0) {
+						const decl = {
+							property: "",
+							value: {
+								kind: "interpolated",
+								parts: [{
+									kind: "slot",
+									slotId: mapped
+								}]
+							},
+							important: false,
+							valueRaw: placeholder
+						};
+						ensureRule("&", []).declarations.push(decl);
+						lastDecl = decl;
+					}
+				}
+			}
+			line = "";
+		};
+		for (let i = 0; i < rawCss.length; i++) {
+			const ch = rawCss[i];
+			if (ch === "{") depth++;
+			else if (ch === "}") depth = Math.max(0, depth - 1);
+			if (ch === "\n") {
+				flushLine();
+				continue;
+			}
+			line += ch;
+		}
+		flushLine();
+	}
 	return rules;
 }
 function parseDeclarations(declValue, slotByPlaceholder) {
 	const trimmed = declValue.trim();
 	if (!trimmed) return [];
+	const directSlot = slotByPlaceholder.get(trimmed);
+	if (directSlot !== void 0) return [{
+		property: "",
+		value: {
+			kind: "interpolated",
+			parts: [{
+				kind: "slot",
+				slotId: directSlot
+			}]
+		},
+		important: false,
+		valueRaw: trimmed
+	}];
 	const leadingSlot = trimmed.match(/^(__SC_EXPR_(\d+)__)\s+([\s\S]+)$/);
 	if (leadingSlot) {
 		const slotId = Number(leadingSlot[2]);
@@ -303,6 +359,7 @@ function collectStyledDecls(args) {
 		if (!arg0) return;
 		const out = {
 			staticAttrs: {},
+			defaultAttrs: [],
 			conditionalAttrs: [],
 			invertedBoolAttrs: []
 		};
@@ -316,6 +373,18 @@ function collectStyledDecls(args) {
 					out.staticAttrs[key] = v.value;
 					continue;
 				}
+				if (v.type === "LogicalExpression" && v.operator === "??" || v.type === "TSNullishCoalescingExpression") {
+					const left = v.left;
+					const right = v.right;
+					if (left?.type === "MemberExpression" && left.object?.type === "Identifier" && (left.object.name === "props" || left.object.name === "p") && left.property?.type === "Identifier" && (right?.type === "StringLiteral" || right?.type === "NumericLiteral" || right?.type === "BooleanLiteral")) {
+						out.defaultAttrs.push({
+							jsxProp: left.property.name,
+							attrName: key,
+							value: right.value
+						});
+						continue;
+					}
+				}
 				if (v.type === "ConditionalExpression") {
 					const test = v.test;
 					const cons = v.consequent;
@@ -593,6 +662,7 @@ function collectStyledDecls(args) {
 				rawCss: parsed.rawCss,
 				...attrsInfo ? { attrsInfo } : {},
 				...shouldForwardProp ? { shouldForwardProp } : {},
+				...shouldForwardProp ? { shouldForwardPropFromWithConfig: true } : {},
 				...withConfigMeta ? { withConfig: withConfigMeta } : {},
 				...propsType ? { propsType } : {},
 				...leadingComments ? { leadingComments } : {}
@@ -742,6 +812,7 @@ function collectStyledDecls(args) {
 				templateExpressions: parsed.slots.map((s) => s.expression),
 				rawCss: parsed.rawCss,
 				...shouldForwardProp ? { shouldForwardProp } : {},
+				...shouldForwardProp ? { shouldForwardPropFromWithConfig: true } : {},
 				...withConfigMeta ? { withConfig: withConfigMeta } : {},
 				...propsType ? { propsType } : {},
 				...leadingComments ? { leadingComments } : {}
@@ -769,6 +840,7 @@ function collectStyledDecls(args) {
 				templateExpressions: parsed.slots.map((s) => s.expression),
 				rawCss: parsed.rawCss,
 				...shouldForwardProp ? { shouldForwardProp } : {},
+				...shouldForwardProp ? { shouldForwardPropFromWithConfig: true } : {},
 				...withConfigMeta ? { withConfig: withConfigMeta } : {},
 				...propsType ? { propsType } : {},
 				...leadingComments ? { leadingComments } : {}
@@ -788,6 +860,7 @@ function collectStyledDecls(args) {
 		if (init.callee.object.name !== styledDefaultImport) return;
 		if (init.callee.property.type !== "Identifier") return;
 		const tagName = init.callee.property.name;
+		const propsType = readFirstTypeArgFromNode(init) ?? readFirstTypeArgFromNode(init.callee);
 		const arg0 = init.arguments[0];
 		if (!arg0) return;
 		if (arg0.type !== "ObjectExpression" && arg0.type !== "ArrowFunctionExpression") return;
@@ -851,6 +924,7 @@ function collectStyledDecls(args) {
 			rules: [],
 			templateExpressions: [],
 			preResolvedStyle: styleObj,
+			...propsType ? { propsType } : {},
 			...Object.keys(preResolvedFnDecls).length ? { preResolvedFnDecls } : {},
 			...styleFnFromProps.length ? { styleFnFromProps } : {},
 			...wantsDollarStrip ? {
@@ -1635,6 +1709,7 @@ function lowerRules(args) {
 	let bail = false;
 	const ensureShouldForwardPropDrop = (decl, propName) => {
 		decl.needsWrapperComponent = true;
+		decl.shouldForwardPropFromWithConfig = false;
 		const existing = decl.shouldForwardProp ?? { dropProps: [] };
 		const dropProps = new Set(existing.dropProps ?? []);
 		dropProps.add(propName);
@@ -2146,6 +2221,22 @@ function lowerRules(args) {
 				resolvedStyleObjects.set(decl.siblingWrapper.afterKey, obj);
 				continue;
 			}
+			if (typeof rule.selector === "string") {
+				const s = rule.selector.trim();
+				const hasExprPlaceholder = s.includes("__SC_EXPR_");
+				if (s.includes(",")) bail = true;
+				else if (s.includes(":not(")) bail = true;
+				else if (!hasExprPlaceholder && /&\.[a-zA-Z0-9_-]+/.test(s)) bail = true;
+				else if (!hasExprPlaceholder && /\s+[a-zA-Z]/.test(s)) bail = true;
+				if (bail) {
+					warnings.push({
+						type: "unsupported-feature",
+						feature: "complex-selectors",
+						message: "Complex selectors (grouped selectors, descendant element selectors, class-conditioned selectors, or :not() chains) are not currently supported; skipping this file."
+					});
+					break;
+				}
+			}
 			if (typeof rule.selector === "string" && rule.selector.includes("__SC_EXPR_")) {
 				const slotMatch = rule.selector.match(/__SC_EXPR_(\d+)__/);
 				const slotId = slotMatch ? Number(slotMatch[1]) : null;
@@ -2410,7 +2501,21 @@ function lowerRules(args) {
 								jsxProp: indexPropName
 							});
 							if (!styleFnDecls.has(fnKey)) {
-								const indexedExprAst = parseExpr(`(${resolved.expr})[${indexPropName}]`);
+								const indexedExprAst = (() => {
+									const exprSource = `(${resolved.expr})[${indexPropName}]`;
+									try {
+										const jParse = api.jscodeshift.withParser("tsx");
+										let expr$1 = jParse(`(${exprSource});`).find(jParse.ExpressionStatement).nodes()[0]?.expression ?? null;
+										while (expr$1?.type === "ParenthesizedExpression") expr$1 = expr$1.expression;
+										if (expr$1?.extra?.parenthesized) {
+											delete expr$1.extra.parenthesized;
+											delete expr$1.extra.parenStart;
+										}
+										return expr$1;
+									} catch {
+										return null;
+									}
+								})();
 								if (!indexedExprAst) {
 									warnings.push({
 										type: "dynamic-node",
@@ -2609,6 +2714,15 @@ function lowerRules(args) {
 						const applyParsed = (target, parsed) => {
 							for (const imp of parsed.imports) resolverImports.set(JSON.stringify(imp), imp);
 							if (cssProp === "border" && expandBorderShorthand(target, parsed.exprAst)) return;
+							if (pseudo) {
+								const existing = target[stylexProp];
+								const isAstNode$1 = !!existing && typeof existing === "object" && !Array.isArray(existing) && "type" in existing && typeof existing.type === "string";
+								const map = existing && typeof existing === "object" && !Array.isArray(existing) && !isAstNode$1 ? existing : {};
+								if (!("default" in map)) map.default = existing ?? null;
+								map[pseudo] = parsed.exprAst;
+								target[stylexProp] = map;
+								return;
+							}
 							target[stylexProp] = parsed.exprAst;
 						};
 						const negParsed = neg ? parseResolved(neg.expr, neg.imports) : null;
@@ -2840,12 +2954,52 @@ function lowerRules(args) {
 			for (const c of cases) resolvedStyleObjects.set(c.styleKey, { backgroundColor: c.value });
 			decl.needsWrapperComponent = true;
 		} else resolvedStyleObjects.set(decl.styleKey, styleObj);
+		{
+			const isAstNode$1 = (v) => !!v && typeof v === "object" && !Array.isArray(v) && "type" in v && typeof v.type === "string";
+			const isPseudoOrMediaMap = (v) => {
+				if (!v || typeof v !== "object" || Array.isArray(v) || isAstNode$1(v)) return false;
+				const keys = Object.keys(v);
+				if (keys.length === 0) return false;
+				return keys.includes("default") || keys.some((k) => k.startsWith(":") || k.startsWith("@media") || k.startsWith("::"));
+			};
+			const disabledKey = "disabled";
+			const colorPrimaryKey = `color === "primary"`;
+			const disabledBucket = variantBuckets.get(disabledKey);
+			const colorPrimaryBucket = variantBuckets.get(colorPrimaryKey);
+			if (disabledBucket && styleObj.backgroundColor) {
+				const baseBg = styleObj.backgroundColor;
+				const primaryBg = colorPrimaryBucket?.backgroundColor ?? null;
+				const baseHover = isPseudoOrMediaMap(baseBg) ? baseBg[":hover"] : null;
+				const primaryHover = isPseudoOrMediaMap(primaryBg) ? primaryBg[":hover"] : null;
+				const disabledBg = disabledBucket.backgroundColor;
+				const disabledDefault = isPseudoOrMediaMap(disabledBg) ? disabledBg.default : disabledBg ?? null;
+				if (disabledDefault !== null && baseHover !== null && primaryHover !== null) {
+					delete disabledBucket.backgroundColor;
+					const disabledPrimaryWhen = `${disabledKey} && ${colorPrimaryKey}`;
+					const disabledNotPrimaryWhen = `${disabledKey} && color !== "primary"`;
+					const mkBucket = (hoverVal) => ({
+						...disabledBucket,
+						backgroundColor: {
+							default: disabledDefault,
+							":hover": hoverVal
+						}
+					});
+					variantBuckets.set(disabledPrimaryWhen, mkBucket(primaryHover));
+					variantStyleKeys[disabledPrimaryWhen] ??= `${decl.styleKey}${toSuffixFromProp$1(disabledPrimaryWhen)}`;
+					variantBuckets.set(disabledNotPrimaryWhen, mkBucket(baseHover));
+					variantStyleKeys[disabledNotPrimaryWhen] ??= `${decl.styleKey}${toSuffixFromProp$1(disabledNotPrimaryWhen)}`;
+				}
+			}
+		}
 		for (const [when, obj] of variantBuckets.entries()) {
 			const key = variantStyleKeys[when];
 			resolvedStyleObjects.set(key, obj);
 		}
 		for (const [k, v] of attrBuckets.entries()) resolvedStyleObjects.set(k, v);
-		if (Object.keys(variantStyleKeys).length) decl.variantStyleKeys = variantStyleKeys;
+		if (Object.keys(variantStyleKeys).length) {
+			decl.variantStyleKeys = variantStyleKeys;
+			decl.needsWrapperComponent = true;
+		}
 		if (styleFnFromProps.length) {
 			decl.styleFnFromProps = styleFnFromProps;
 			for (const [k, v] of styleFnDecls.entries()) resolvedStyleObjects.set(k, v);
@@ -3247,26 +3401,61 @@ const withLeadingCommentsOnFirstFunction = (nodes, d) => {
 * Uses props.children directly instead of destructuring it.
 */
 function emitMinimalWrapper(args) {
-	const { j, localName, tagName, propsTypeName, inlineTypeText, emitTypes = false, styleArgs, destructureProps, patternProp, staticAttrs = {} } = args;
+	const { j, localName, tagName, propsTypeName, inlineTypeText, emitTypes = false, styleArgs, destructureProps, allowClassNameProp = false, allowStyleProp = false, includeRest = true, patternProp, defaultAttrs = [], conditionalAttrs = [], invertedBoolAttrs = [], staticAttrs = {}, inlineStyleProps = [] } = args;
 	const isVoidTag = VOID_TAGS.has(tagName);
 	const propsParamId = j.identifier("props");
 	if (emitTypes) if (inlineTypeText) {
-		const typeNode = j(`const x: ${inlineTypeText} = null`).get().node.program.body[0].declarations[0].id.typeAnnotation.typeAnnotation;
+		let typeNode;
+		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?.message ?? String(e)}`
+			].join("\n"));
+		}
 		propsParamId.typeAnnotation = j.tsTypeAnnotation(typeNode);
 	} else propsParamId.typeAnnotation = j.tsTypeAnnotation(j.tsTypeReference(j.identifier(propsTypeName)));
 	const propsId = j.identifier("props");
 	const patternProps = [];
 	if (!isVoidTag) patternProps.push(patternProp("children"));
-	patternProps.push(patternProp("style"));
-	for (const name of destructureProps.filter(Boolean)) if (name !== "children" && name !== "style") patternProps.push(patternProp(name));
+	if (allowClassNameProp) patternProps.push(patternProp("className"));
+	if (allowStyleProp) patternProps.push(patternProp("style"));
+	for (const name of destructureProps.filter(Boolean)) if (name !== "children" && name !== "style" && name !== "className") patternProps.push(patternProp(name));
 	const restId = j.identifier("rest");
-	patternProps.push(j.restElement(restId));
+	if (includeRest) patternProps.push(j.restElement(restId));
+	const needsSxVar = allowClassNameProp || allowStyleProp || inlineStyleProps.length > 0;
 	const stylexPropsCall = j.callExpression(j.memberExpression(j.identifier("stylex"), j.identifier("props")), styleArgs);
 	const jsxAttrs = [];
+	for (const a of defaultAttrs) {
+		const propExpr = j.memberExpression(propsId, j.identifier(a.jsxProp));
+		const fallback = typeof a.value === "string" ? j.literal(a.value) : typeof a.value === "number" ? j.literal(a.value) : typeof a.value === "boolean" ? j.booleanLiteral(a.value) : j.literal(String(a.value));
+		jsxAttrs.push(j.jsxAttribute(j.jsxIdentifier(a.attrName), j.jsxExpressionContainer(j.logicalExpression("??", propExpr, fallback))));
+	}
+	for (const cond of conditionalAttrs) jsxAttrs.push(j.jsxAttribute(j.jsxIdentifier(cond.attrName), j.jsxExpressionContainer(j.conditionalExpression(j.identifier(cond.jsxProp), j.literal(cond.value), 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)))));
 	for (const [key, value] of Object.entries(staticAttrs)) if (typeof value === "string") jsxAttrs.push(j.jsxAttribute(j.jsxIdentifier(key), j.literal(value)));
 	else if (typeof value === "boolean") jsxAttrs.push(j.jsxAttribute(j.jsxIdentifier(key), value ? null : j.jsxExpressionContainer(j.literal(false))));
 	else if (typeof value === "number") jsxAttrs.push(j.jsxAttribute(j.jsxIdentifier(key), j.jsxExpressionContainer(j.literal(value))));
-	jsxAttrs.push(j.jsxSpreadAttribute(restId), j.jsxSpreadAttribute(stylexPropsCall), j.jsxAttribute(j.jsxIdentifier("style"), j.jsxExpressionContainer(j.identifier("style"))));
+	if (tagName === "button" && destructureProps.includes("disabled")) jsxAttrs.push(j.jsxAttribute(j.jsxIdentifier("disabled"), j.jsxExpressionContainer(j.identifier("disabled"))));
+	if (includeRest) jsxAttrs.push(j.jsxSpreadAttribute(restId));
+	if (!needsSxVar) jsxAttrs.push(j.jsxSpreadAttribute(stylexPropsCall));
+	else {
+		jsxAttrs.push(j.jsxSpreadAttribute(j.identifier("sx")));
+		if (allowClassNameProp) {
+			const mergedClassName = j.callExpression(j.memberExpression(j.callExpression(j.memberExpression(j.arrayExpression([j.memberExpression(j.identifier("sx"), j.identifier("className")), j.identifier("className")]), j.identifier("filter")), [j.identifier("Boolean")]), j.identifier("join")), [j.literal(" ")]);
+			jsxAttrs.push(j.jsxAttribute(j.jsxIdentifier("className"), j.jsxExpressionContainer(mergedClassName)));
+		}
+		if (allowStyleProp || inlineStyleProps.length > 0) {
+			const spreads = [
+				j.spreadElement(j.memberExpression(j.identifier("sx"), j.identifier("style"))),
+				...allowStyleProp ? [j.spreadElement(j.identifier("style"))] : [],
+				...inlineStyleProps.map((p) => j.property("init", j.identifier(p.prop), p.expr))
+			];
+			jsxAttrs.push(j.jsxAttribute(j.jsxIdentifier("style"), j.jsxExpressionContainer(j.objectExpression(spreads))));
+		}
+	}
 	const openingEl = j.jsxOpeningElement(j.jsxIdentifier(tagName), jsxAttrs, isVoidTag);
 	const jsx = isVoidTag ? {
 		type: "JSXElement",
@@ -3274,11 +3463,57 @@ function emitMinimalWrapper(args) {
 		closingElement: null,
 		children: []
 	} : j.jsxElement(openingEl, j.jsxClosingElement(j.jsxIdentifier(tagName)), [j.jsxExpressionContainer(j.identifier("children"))]);
-	const bodyStmts = [j.variableDeclaration("const", [j.variableDeclarator(j.objectPattern(patternProps), propsId)]), j.returnStatement(jsx)];
+	const bodyStmts = [];
+	bodyStmts.push(j.variableDeclaration("const", [j.variableDeclarator(j.objectPattern(patternProps), propsId)]));
+	if (needsSxVar) bodyStmts.push(j.variableDeclaration("const", [j.variableDeclarator(j.identifier("sx"), stylexPropsCall)]));
+	bodyStmts.push(j.returnStatement(jsx));
 	return [j.functionDeclaration(j.identifier(localName), [propsParamId], j.blockStatement(bodyStmts))];
 }
+function parseVariantWhenToAst(j, when) {
+	const trimmed = String(when ?? "").trim();
+	if (!trimmed) return {
+		cond: j.identifier("true"),
+		props: []
+	};
+	if (trimmed.includes("&&")) {
+		const parsed = trimmed.split("&&").map((s) => s.trim()).filter(Boolean).map((p) => parseVariantWhenToAst(j, p));
+		return {
+			cond: parsed.slice(1).reduce((acc, cur) => j.logicalExpression("&&", acc, cur.cond), parsed[0].cond),
+			props: [...new Set(parsed.flatMap((x) => x.props))]
+		};
+	}
+	if (trimmed.startsWith("!(") && trimmed.endsWith(")")) {
+		const innerParsed = parseVariantWhenToAst(j, trimmed.slice(2, -1).trim());
+		return {
+			cond: j.unaryExpression("!", innerParsed.cond),
+			props: innerParsed.props
+		};
+	}
+	if (trimmed.startsWith("!")) {
+		const innerParsed = parseVariantWhenToAst(j, trimmed.slice(1).trim());
+		return {
+			cond: j.unaryExpression("!", innerParsed.cond),
+			props: innerParsed.props
+		};
+	}
+	if (trimmed.includes("===") || trimmed.includes("!==")) {
+		const op = trimmed.includes("!==") ? "!==" : "===";
+		const [lhs, rhsRaw0] = trimmed.split(op).map((s) => s.trim());
+		const rhsRaw = rhsRaw0 ?? "";
+		const rhs = rhsRaw?.startsWith("\"") || rhsRaw?.startsWith("'") ? j.literal(JSON.parse(rhsRaw.replace(/^'/, "\"").replace(/'$/, "\""))) : /^-?\d+(\.\d+)?$/.test(rhsRaw) ? j.literal(Number(rhsRaw)) : j.identifier(rhsRaw);
+		const propName = lhs ?? "";
+		return {
+			cond: j.binaryExpression(op, j.identifier(propName), rhs),
+			props: propName ? [propName] : []
+		};
+	}
+	return {
+		cond: j.identifier(trimmed),
+		props: [trimmed]
+	};
+}
 function emitWrappers(args) {
-	const { root, j, filePath, styledDecls, wrapperNames, expressionAsWrapperNames, patternProp, exportedComponents, stylesIdentifier } = args;
+	const { root, j, filePath, styledDecls, wrapperNames, patternProp, exportedComponents, stylesIdentifier } = args;
 	const emitTypes = filePath.endsWith(".ts") || filePath.endsWith(".tsx");
 	const wrapperDecls = styledDecls.filter((d) => d.needsWrapperComponent);
 	if (wrapperDecls.length === 0) return;
@@ -3308,6 +3543,68 @@ function emitWrappers(args) {
 		usedAttrsCache.set(localName, attrs);
 		return attrs;
 	};
+	const jsxCallsitesCache = /* @__PURE__ */ new Map();
+	const getJsxCallsites = (localName) => {
+		const cached = jsxCallsitesCache.get(localName);
+		if (cached) return cached;
+		const out = { hasAny: root.find(j.JSXElement, { openingElement: { name: {
+			type: "JSXIdentifier",
+			name: localName
+		} } }).size() > 0 || root.find(j.JSXSelfClosingElement, { name: {
+			type: "JSXIdentifier",
+			name: localName
+		} }).size() > 0 };
+		jsxCallsitesCache.set(localName, out);
+		return out;
+	};
+	const jsxChildrenUsageCache = /* @__PURE__ */ new Map();
+	const hasJsxChildrenUsage = (localName) => {
+		const cached = jsxChildrenUsageCache.get(localName);
+		if (cached !== void 0) return cached;
+		const hasChildren = root.find(j.JSXElement, { openingElement: { name: {
+			type: "JSXIdentifier",
+			name: localName
+		} } }).filter((p) => {
+			return (p.node.children ?? []).some((c) => {
+				if (!c) return false;
+				if (c.type === "JSXText") return String(c.value ?? "").trim().length > 0;
+				if (c.type === "JSXExpressionContainer") return c.expression?.type !== "JSXEmptyExpression";
+				return true;
+			});
+		}).size() > 0;
+		jsxChildrenUsageCache.set(localName, hasChildren);
+		return hasChildren;
+	};
+	const usedAsValueCache = /* @__PURE__ */ new Map();
+	const isUsedAsValueInFile = (localName) => {
+		const cached = usedAsValueCache.get(localName);
+		if (cached !== void 0) return cached;
+		const inJsxExpr = root.find(j.JSXExpressionContainer, { expression: {
+			type: "Identifier",
+			name: localName
+		} }).size() > 0;
+		usedAsValueCache.set(localName, inJsxExpr);
+		return inJsxExpr;
+	};
+	/**
+	* Decide whether a wrapper component should accept/merge external `className`/`style`.
+	*
+	* - Exported components and components extended by other styled components set `supportsExternalStyles`.
+	* - Components used as values (passed around) may receive `className`/`style` even without direct JSX callsites.
+	* - For local-only components, only support these props if a callsite actually passes them (or spreads unknown props).
+	*/
+	const shouldAllowClassNameProp = (d) => {
+		if (d.supportsExternalStyles) return true;
+		if (d.usedAsValue) return true;
+		const used = getUsedAttrs(d.localName);
+		return used.has("*") || used.has("className");
+	};
+	const shouldAllowStyleProp = (d) => {
+		if (d.supportsExternalStyles) return true;
+		if (d.usedAsValue) return true;
+		const used = getUsedAttrs(d.localName);
+		return used.has("*") || used.has("style");
+	};
 	const inputWrapperDecls = wrapperDecls.filter((d) => d.base.kind === "intrinsic" && d.base.tagName === "input" && d.attrWrapper?.kind === "input");
 	const linkWrapperDecls = wrapperDecls.filter((d) => d.base.kind === "intrinsic" && d.base.tagName === "a" && d.attrWrapper?.kind === "link");
 	const intrinsicPolymorphicWrapperDecls = wrapperDecls.filter((d) => d.base.kind === "intrinsic" && wrapperNames.has(d.localName));
@@ -3458,7 +3755,18 @@ function emitWrappers(args) {
 		if (typeExistsInFile(typeName)) return false;
 		const typeNamePattern = /* @__PURE__ */ new RegExp(`\\b${typeName}\\b`);
 		if (typeExprText.trim() === typeName || typeNamePattern.test(typeExprText)) return false;
-		const stmt = j(`${`type ${genericParams ? `${typeName}<${genericParams}>` : typeName} = ${typeExprText};`}`).get().node.program.body[0];
+		const typeNameWithParams = genericParams ? `${typeName}<${genericParams}>` : typeName;
+		let stmt;
+		try {
+			stmt = j(`${`type ${typeNameWithParams} = ${typeExprText};`}`).get().node.program.body[0];
+		} catch (e) {
+			throw new Error([
+				`Failed to parse emitted props type for ${localName} (${filePath}).`,
+				`Type name: ${typeNameWithParams}`,
+				`Type expr: ${typeExprText}`,
+				`Error: ${e?.message ?? String(e)}`
+			].join("\n"));
+		}
 		emitted.push(stmt);
 		return true;
 	};
@@ -3469,14 +3777,23 @@ function emitWrappers(args) {
 	const annotatePropsParam = (propsId, localName, inlineTypeText) => {
 		if (!emitTypes) return;
 		if (inlineTypeText) {
-			const typeNode = j(`const x: ${inlineTypeText} = null`).get().node.program.body[0].declarations[0].id.typeAnnotation.typeAnnotation;
+			let typeNode;
+			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 props param type for ${localName} (${filePath}).`,
+					`Inline type: ${inlineTypeText}`,
+					`Error: ${e?.message ?? String(e)}`
+				].join("\n"));
+			}
 			propsId.typeAnnotation = j.tsTypeAnnotation(typeNode);
 		} else propsId.typeAnnotation = j.tsTypeAnnotation(j.tsTypeReference(j.identifier(propsTypeNameFor(localName))));
 	};
 	const withChildren = (innerTypeText) => {
 		const t = innerTypeText.trim();
 		if (t.startsWith("React.PropsWithChildren<")) return t;
-		if (t.startsWith("React.ComponentProps<") || t.startsWith("React.ComponentPropsWithoutRef<")) return t;
+		if (t.startsWith("React.ComponentProps<") || t.startsWith("React.ComponentPropsWithoutRef<") || t.startsWith("React.HTMLAttributes<") || t.startsWith("React.AnchorHTMLAttributes<") || t.startsWith("React.ButtonHTMLAttributes<") || t.startsWith("React.InputHTMLAttributes<") || t.startsWith("React.ImgHTMLAttributes<") || t.startsWith("React.LabelHTMLAttributes<") || t.startsWith("React.SelectHTMLAttributes<") || t.startsWith("React.TextareaHTMLAttributes<") || /^(Omit|Pick|Partial|Required|Readonly|ReadonlyArray|NonNullable|Extract|Exclude)<\s*React\.ComponentProps(?:WithoutRef)?</.test(t) || /^(Omit|Pick|Partial|Required|Readonly|ReadonlyArray|NonNullable|Extract|Exclude)<\s*React\..*HTMLAttributes</.test(t)) return t;
 		return `React.PropsWithChildren<${t}>`;
 	};
 	const joinIntersection = (...parts) => {
@@ -3485,19 +3802,152 @@ function emitWrappers(args) {
 		if (xs.length === 1) return xs[0];
 		return xs.join(" & ");
 	};
+	const isValidTypeKeyIdentifier = (name) => /^[$A-Z_][0-9A-Z_$]*$/i.test(name);
+	const toTypeKey = (name) => isValidTypeKeyIdentifier(name) ? name : JSON.stringify(name);
+	const reactIntrinsicAttrsType = (tagName) => {
+		switch (tagName) {
+			case "a": return "React.AnchorHTMLAttributes<HTMLAnchorElement>";
+			case "button": return "React.ButtonHTMLAttributes<HTMLButtonElement>";
+			case "div": return "React.HTMLAttributes<HTMLDivElement>";
+			case "input": return "React.InputHTMLAttributes<HTMLInputElement>";
+			case "img": return "React.ImgHTMLAttributes<HTMLImageElement>";
+			case "label": return "React.LabelHTMLAttributes<HTMLLabelElement>";
+			case "select": return "React.SelectHTMLAttributes<HTMLSelectElement>";
+			case "span": return "React.HTMLAttributes<HTMLSpanElement>";
+			case "textarea": return "React.TextareaHTMLAttributes<HTMLTextAreaElement>";
+			default: return "React.HTMLAttributes<HTMLElement>";
+		}
+	};
+	const getExplicitPropNames = (propsType) => {
+		const names = /* @__PURE__ */ new Set();
+		const extractFromLiteral = (literal) => {
+			if (!literal || literal.type !== "TSTypeLiteral") return;
+			for (const member of literal.members ?? []) {
+				if (member?.type !== "TSPropertySignature") continue;
+				const key = member.key;
+				const name = key?.type === "Identifier" ? key.name : key?.type === "StringLiteral" ? key.value : key?.type === "Literal" && typeof key.value === "string" ? key.value : null;
+				if (name) names.add(name);
+			}
+		};
+		const extractFromType = (type) => {
+			if (!type) return;
+			if (type.type === "TSTypeLiteral") extractFromLiteral(type);
+			else if (type.type === "TSIntersectionType") for (const t of type.types ?? []) extractFromType(t);
+			else if (type.type === "TSTypeReference" && type.typeName?.type === "Identifier") {
+				const typeName = type.typeName.name;
+				const interfaceDecl = root.find(j.TSInterfaceDeclaration).filter((p) => p.node.id?.name === typeName);
+				if (interfaceDecl.size() > 0) {
+					const body = interfaceDecl.get().node.body?.body ?? [];
+					for (const member of body) {
+						if (member?.type !== "TSPropertySignature") continue;
+						const key = member.key;
+						const name = key?.type === "Identifier" ? key.name : null;
+						if (name) names.add(name);
+					}
+				}
+				const typeAlias = root.find(j.TSTypeAliasDeclaration).filter((p) => p.node.id?.name === typeName);
+				if (typeAlias.size() > 0) extractFromType(typeAlias.get().node.typeAnnotation);
+			}
+		};
+		extractFromType(propsType);
+		return names;
+	};
+	const inferredIntrinsicPropsTypeText = (args$1) => {
+		const { d, tagName, allowClassNameProp, allowStyleProp, includeAsProp = false, skipProps } = args$1;
+		const used = getUsedAttrs(d.localName);
+		const needsBroadAttrs = used.has("*") || !!d.usedAsValue;
+		const lines = [];
+		if (includeAsProp) lines.push(`  as?: React.ElementType;`);
+		if (!needsBroadAttrs) {
+			if (allowClassNameProp) lines.push(`  className?: string;`);
+			if (allowStyleProp) lines.push(`  style?: React.CSSProperties;`);
+		}
+		for (const attr of [...used].sort()) {
+			if (attr === "*" || attr === "children") continue;
+			if (attr === "as" || attr === "forwardedAs") continue;
+			if (attr === "className" || attr === "style") continue;
+			if (skipProps?.has(attr)) continue;
+			lines.push(`  ${toTypeKey(attr)}?: any;`);
+		}
+		const literal = lines.length > 0 ? `{\n${lines.join("\n")}\n}` : "{}";
+		if (!needsBroadAttrs) {
+			if (VOID_TAGS.has(tagName)) {
+				const base$1 = reactIntrinsicAttrsType(tagName);
+				const omitted$1 = [];
+				if (!allowClassNameProp) omitted$1.push("\"className\"");
+				if (!allowStyleProp) omitted$1.push("\"style\"");
+				return omitted$1.length ? `Omit<${base$1}, ${omitted$1.join(" | ")}>` : base$1;
+			}
+			return withChildren(literal);
+		}
+		const base = reactIntrinsicAttrsType(tagName);
+		const omitted = [];
+		if (!allowClassNameProp) omitted.push("\"className\"");
+		if (!allowStyleProp) omitted.push("\"style\"");
+		const composed = joinIntersection(omitted.length ? `Omit<${base}, ${omitted.join(" | ")}>` : base, literal);
+		return VOID_TAGS.has(tagName) ? composed : withChildren(composed);
+	};
+	const inferredComponentWrapperPropsTypeText = (args$1) => {
+		const { d, allowClassNameProp, allowStyleProp, includeAsProp = false, includeChildren = true } = args$1;
+		const lines = [];
+		if (includeAsProp) lines.push(`  as?: React.ElementType;`);
+		const literal = lines.length > 0 ? `{\n${lines.join("\n")}\n}` : "{}";
+		const base = `React.ComponentProps<typeof ${d.base.ident}>`;
+		const omitted = [];
+		if (!includeChildren) omitted.push("\"children\"");
+		if (!allowClassNameProp) omitted.push("\"className\"");
+		if (!allowStyleProp) omitted.push("\"style\"");
+		const baseMaybeOmitted = omitted.length ? `Omit<${base}, ${omitted.join(" | ")}>` : base;
+		return includeChildren ? withChildren(joinIntersection(baseMaybeOmitted, literal)) : baseMaybeOmitted;
+	};
 	const isPropRequiredInPropsTypeLiteral = (propsType, propName) => {
-		if (!propsType || propsType.type !== "TSTypeLiteral") return false;
-		for (const m of propsType.members ?? []) {
-			if (!m || m.type !== "TSPropertySignature") continue;
-			const k = m.key;
-			if ((k?.type === "Identifier" ? k.name : k?.type === "StringLiteral" ? k.value : k?.type === "Literal" && typeof k.value === "string" ? k.value : null) !== propName) continue;
-			return m.optional !== true;
+		const checkInLiteral = (literal) => {
+			if (!literal || literal.type !== "TSTypeLiteral") return null;
+			for (const m of literal.members ?? []) {
+				if (!m || m.type !== "TSPropertySignature") continue;
+				const k = m.key;
+				if ((k?.type === "Identifier" ? k.name : k?.type === "StringLiteral" ? k.value : k?.type === "Literal" && typeof k.value === "string" ? k.value : null) !== propName) continue;
+				return m.optional !== true;
+			}
+			return null;
+		};
+		const checkInInterfaceBody = (body) => {
+			for (const member of body) {
+				if (member?.type !== "TSPropertySignature") continue;
+				const k = member.key;
+				if ((k?.type === "Identifier" ? k.name : null) !== propName) continue;
+				return member.optional !== true;
+			}
+			return null;
+		};
+		if (propsType?.type === "TSTypeLiteral") return checkInLiteral(propsType) === true;
+		if (propsType?.type === "TSTypeReference" && propsType.typeName?.type === "Identifier") {
+			const typeName = propsType.typeName.name;
+			const interfaceDecl = root.find(j.TSInterfaceDeclaration).filter((p) => p.node.id?.name === typeName);
+			if (interfaceDecl.size() > 0) {
+				const result = checkInInterfaceBody(interfaceDecl.get().node.body?.body ?? []);
+				if (result !== null) return result;
+			}
+			const typeAlias = root.find(j.TSTypeAliasDeclaration).filter((p) => p.node.id?.name === typeName);
+			if (typeAlias.size() > 0) {
+				const typeAnnotation = typeAlias.get().node.typeAnnotation;
+				const result = checkInLiteral(typeAnnotation);
+				if (result !== null) return result;
+			}
 		}
 		return false;
 	};
 	if (inputWrapperDecls.length > 0) for (const d of inputWrapperDecls) {
+		const allowClassNameProp = shouldAllowClassNameProp(d);
+		const allowStyleProp = shouldAllowStyleProp(d);
 		const explicit = stringifyTsType(d.propsType);
-		emitNamedPropsType(d.localName, explicit ?? "React.InputHTMLAttributes<HTMLInputElement>");
+		emitNamedPropsType(d.localName, explicit ?? (() => {
+			const base = "React.InputHTMLAttributes<HTMLInputElement>";
+			const omitted = [];
+			if (!allowClassNameProp) omitted.push("\"className\"");
+			if (!allowStyleProp) omitted.push("\"style\"");
+			return omitted.length > 0 ? `Omit<${base}, ${omitted.join(" | ")}>` : base;
+		})());
 		needsReactTypeImport = true;
 		const aw = d.attrWrapper;
 		const styleArgs = [
@@ -3505,21 +3955,8 @@ function emitWrappers(args) {
 			...aw.checkboxKey ? [j.logicalExpression("&&", j.binaryExpression("===", j.identifier("type"), j.literal("checkbox")), j.memberExpression(j.identifier(stylesIdentifier), j.identifier(aw.checkboxKey)))] : [],
 			...aw.radioKey ? [j.logicalExpression("&&", j.binaryExpression("===", j.identifier("type"), j.literal("radio")), j.memberExpression(j.identifier(stylesIdentifier), j.identifier(aw.radioKey)))] : []
 		];
-		emitted.push(emitTypes ? j.template.statement`
-              function ${j.identifier(d.localName)}(props: ${j.identifier(propsTypeNameFor(d.localName))}) {
-              const { type, className, ...rest } = props;
-              const sx = stylex.props(${styleArgs});
-              return (
-                <input
-                  {...sx}
-                  className={[sx.className, className].filter(Boolean).join(" ")}
-                  type={type}
-                  {...rest}
-                />
-              );
-            }
-            ` : j.template.statement`
-              function ${j.identifier(d.localName)}(props) {
+		emitted.push(allowClassNameProp ? emitTypes ? j.template.statement`
+                function ${j.identifier(d.localName)}(props: ${j.identifier(propsTypeNameFor(d.localName))}) {
                 const { type, className, ...rest } = props;
                 const sx = stylex.props(${styleArgs});
                 return (
@@ -3531,11 +3968,44 @@ function emitWrappers(args) {
                   />
                 );
               }
-            `);
+              ` : j.template.statement`
+                function ${j.identifier(d.localName)}(props) {
+                  const { type, className, ...rest } = props;
+                  const sx = stylex.props(${styleArgs});
+                  return (
+                    <input
+                      {...sx}
+                      className={[sx.className, className].filter(Boolean).join(" ")}
+                      type={type}
+                      {...rest}
+                    />
+                  );
+                }
+              ` : emitTypes ? j.template.statement`
+                function ${j.identifier(d.localName)}(props: ${j.identifier(propsTypeNameFor(d.localName))}) {
+                  const { type, ...rest } = props;
+                  const sx = stylex.props(${styleArgs});
+                  return <input type={type} {...rest} {...sx} />;
+                }
+              ` : j.template.statement`
+                function ${j.identifier(d.localName)}(props) {
+                  const { type, ...rest } = props;
+                  const sx = stylex.props(${styleArgs});
+                  return <input type={type} {...rest} {...sx} />;
+                }
+              `);
 	}
 	if (linkWrapperDecls.length > 0) for (const d of linkWrapperDecls) {
+		const allowClassNameProp = shouldAllowClassNameProp(d);
+		const allowStyleProp = shouldAllowStyleProp(d);
 		const explicit = stringifyTsType(d.propsType);
-		emitNamedPropsType(d.localName, explicit ?? withChildren("React.AnchorHTMLAttributes<HTMLAnchorElement>"));
+		emitNamedPropsType(d.localName, explicit ?? withChildren((() => {
+			const base = "React.AnchorHTMLAttributes<HTMLAnchorElement>";
+			const omitted = [];
+			if (!allowClassNameProp) omitted.push("\"className\"");
+			if (!allowStyleProp) omitted.push("\"style\"");
+			return omitted.length > 0 ? `Omit<${base}, ${omitted.join(" | ")}>` : base;
+		})()));
 		needsReactTypeImport = true;
 		const aw = d.attrWrapper;
 		const styleArgs = [
@@ -3544,28 +4014,9 @@ function emitWrappers(args) {
 			...aw.httpsKey ? [j.logicalExpression("&&", j.identifier("isHttps"), j.memberExpression(j.identifier(stylesIdentifier), j.identifier(aw.httpsKey)))] : [],
 			...aw.pdfKey ? [j.logicalExpression("&&", j.identifier("isPdf"), j.memberExpression(j.identifier(stylesIdentifier), j.identifier(aw.pdfKey)))] : []
 		];
-		emitted.push(emitTypes ? j.template.statement`
-              function ${j.identifier(d.localName)}(props: ${j.identifier(propsTypeNameFor(d.localName))}) {
-                const { href, target, className, children, ...rest } = props;
-              const isHttps = href?.startsWith("https");
-              const isPdf = href?.endsWith(".pdf");
-              const isExternal = target === "_blank";
-              const sx = stylex.props(${styleArgs});
-              return (
-                <a
-                  {...sx}
-                  className={[sx.className, className].filter(Boolean).join(" ")}
-                  href={href}
-                  target={target}
-                    {...rest}
-                >
-                  {children}
-                </a>
-              );
-            }
-            ` : j.template.statement`
-              function ${j.identifier(d.localName)}(props) {
-                const { href, target, className, children, ...rest } = props;
+		emitted.push(allowClassNameProp ? emitTypes ? j.template.statement`
+                function ${j.identifier(d.localName)}(props: ${j.identifier(propsTypeNameFor(d.localName))}) {
+                  const { href, target, className, children, ...rest } = props;
                 const isHttps = href?.startsWith("https");
                 const isPdf = href?.endsWith(".pdf");
                 const isExternal = target === "_blank";
@@ -3576,73 +4027,125 @@ function emitWrappers(args) {
                     className={[sx.className, className].filter(Boolean).join(" ")}
                     href={href}
                     target={target}
-                    {...rest}
+                      {...rest}
                   >
                     {children}
                   </a>
                 );
               }
-            `);
-	}
-	if (intrinsicPolymorphicWrapperDecls.length > 0) for (const d of intrinsicPolymorphicWrapperDecls) {
-		if (d.base.kind !== "intrinsic") continue;
-		const tagName = d.base.tagName;
-		const explicit = stringifyTsType(d.propsType);
-		const needsGenericPolymorphicType = expressionAsWrapperNames.has(d.localName);
-		if (needsGenericPolymorphicType) emitNamedPropsType(d.localName, explicit ?? `React.ComponentProps<C> & { as?: C }`, `C extends React.ElementType = ${JSON.stringify(tagName)}`);
-		else {
-			const hrefExtension = tagName === "button" ? "; href?: string" : "";
-			emitNamedPropsType(d.localName, explicit ?? `React.ComponentProps<${JSON.stringify(tagName)}> & { as?: React.ElementType${hrefExtension} }`);
-		}
-		needsReactTypeImport = true;
-		const styleArgs = [...d.extendsStyleKey ? [j.memberExpression(j.identifier(stylesIdentifier), j.identifier(d.extendsStyleKey))] : [], j.memberExpression(j.identifier(stylesIdentifier), j.identifier(d.styleKey))];
-		const stylexPropsCall = j.callExpression(j.memberExpression(j.identifier("stylex"), j.identifier("props")), styleArgs);
-		if (needsGenericPolymorphicType && emitTypes) {
-			const propsTypeName = propsTypeNameFor(d.localName);
-			const funcDecl = j.functionDeclaration(j.identifier(d.localName), [{
-				...j.identifier("props"),
-				typeAnnotation: j.tsTypeAnnotation(j.tsTypeReference(j.identifier(propsTypeName), j.tsTypeParameterInstantiation([j.tsTypeReference(j.identifier("C"))])))
-			}], j.blockStatement([j.variableDeclaration("const", [j.variableDeclarator(j.objectPattern([
-				j.property.from({
-					kind: "init",
-					key: j.identifier("as"),
-					value: j.assignmentPattern(j.identifier("Component"), j.tsAsExpression(j.literal(tagName), j.tsTypeReference(j.identifier("C")))),
-					shorthand: false
-				}),
-				patternProp("children"),
-				patternProp("style"),
-				j.restElement(j.identifier("rest"))
-			]), j.identifier("props"))]), j.returnStatement(j.jsxElement(j.jsxOpeningElement(j.jsxIdentifier("Component"), [
-				j.jsxSpreadAttribute(j.identifier("rest")),
-				j.jsxSpreadAttribute(stylexPropsCall),
-				j.jsxAttribute(j.jsxIdentifier("style"), j.jsxExpressionContainer(j.identifier("style")))
-			]), j.jsxClosingElement(j.jsxIdentifier("Component")), [j.jsxExpressionContainer(j.identifier("children"))]))]));
-			funcDecl.typeParameters = j.tsTypeParameterDeclaration([j.tsTypeParameter.from({
-				name: "C",
-				constraint: j.tsTypeReference(j.tsQualifiedName(j.identifier("React"), j.identifier("ElementType"))),
-				default: j.tsLiteralType(j.stringLiteral(tagName))
-			})]);
-			emitted.push(funcDecl);
-		} else emitted.push(emitTypes ? j.template.statement`
+              ` : j.template.statement`
+                function ${j.identifier(d.localName)}(props) {
+                  const { href, target, className, children, ...rest } = props;
+                  const isHttps = href?.startsWith("https");
+                  const isPdf = href?.endsWith(".pdf");
+                  const isExternal = target === "_blank";
+                  const sx = stylex.props(${styleArgs});
+                  return (
+                    <a
+                      {...sx}
+                      className={[sx.className, className].filter(Boolean).join(" ")}
+                      href={href}
+                      target={target}
+                      {...rest}
+                    >
+                      {children}
+                    </a>
+                  );
+                }
+              ` : emitTypes ? j.template.statement`
                 function ${j.identifier(d.localName)}(props: ${j.identifier(propsTypeNameFor(d.localName))}) {
-                  const { as: Component = ${j.literal(tagName)}, children, style, ...rest } = props;
+                  const { href, target, children, ...rest } = props;
+                  const isHttps = href?.startsWith("https");
+                  const isPdf = href?.endsWith(".pdf");
+                  const isExternal = target === "_blank";
+                  const sx = stylex.props(${styleArgs});
                   return (
-                    <Component {...rest} {...${stylexPropsCall}} style={style}>
-                    {children}
-                  </Component>
-                );
-              }
+                    <a href={href} target={target} {...rest} {...sx}>
+                      {children}
+                    </a>
+                  );
+                }
               ` : j.template.statement`
                 function ${j.identifier(d.localName)}(props) {
-                  const { as: Component = ${j.literal(tagName)}, children, style, ...rest } = props;
+                  const { href, target, children, ...rest } = props;
+                  const isHttps = href?.startsWith("https");
+                  const isPdf = href?.endsWith(".pdf");
+                  const isExternal = target === "_blank";
+                  const sx = stylex.props(${styleArgs});
                   return (
-                    <Component {...rest} {...${stylexPropsCall}} style={style}>
+                    <a href={href} target={target} {...rest} {...sx}>
                       {children}
-                    </Component>
+                    </a>
                   );
                 }
               `);
 	}
+	if (intrinsicPolymorphicWrapperDecls.length > 0) for (const d of intrinsicPolymorphicWrapperDecls) {
+		if (d.base.kind !== "intrinsic") continue;
+		const tagName = d.base.tagName;
+		const allowStyleProp = shouldAllowStyleProp(d);
+		const explicit = stringifyTsType(d.propsType);
+		const typeText = (() => {
+			if (explicit) return explicit;
+			const baseMaybeOmitted = `Omit<React.ComponentPropsWithoutRef<C>, "className" | "style">`;
+			const hasAsExpression = getUsedAttrs(d.localName).has("as") && (root.find(j.JSXElement, { openingElement: { name: {
+				type: "JSXIdentifier",
+				name: d.localName
+			} } }).filter((p) => {
+				return (p.node.openingElement?.attributes ?? []).some((a) => a?.type === "JSXAttribute" && a.name?.type === "JSXIdentifier" && a.name.name === "as" && a.value?.type === "JSXExpressionContainer");
+			}).size() > 0 || root.find(j.JSXSelfClosingElement, { name: {
+				type: "JSXIdentifier",
+				name: d.localName
+			} }).filter((p) => {
+				return (p.node.attributes ?? []).some((a) => a?.type === "JSXAttribute" && a.name?.type === "JSXIdentifier" && a.name.name === "as" && a.value?.type === "JSXExpressionContainer");
+			}).size() > 0);
+			return joinIntersection(baseMaybeOmitted, allowStyleProp && hasAsExpression ? "{ as?: C; style?: any }" : "{ as?: C }");
+		})();
+		emitNamedPropsType(d.localName, typeText, `C extends React.ElementType = "${tagName}"`);
+		needsReactTypeImport = true;
+		const styleArgs = [...d.extendsStyleKey ? [j.memberExpression(j.identifier(stylesIdentifier), j.identifier(d.extendsStyleKey))] : [], j.memberExpression(j.identifier(stylesIdentifier), j.identifier(d.styleKey))];
+		const stylexPropsCall = j.callExpression(j.memberExpression(j.identifier("stylex"), j.identifier("props")), styleArgs);
+		const isVoidTag = VOID_TAGS.has(tagName);
+		const propsParamId = j.identifier("props");
+		if (emitTypes) {
+			const tp = j(`function _<C extends React.ElementType = "${tagName}">() { return null }`).get().node.program.body[0].typeParameters;
+			propsParamId.typeAnnotation = j(`const x: ${propsTypeNameFor(d.localName)}<C> = null`).get().node.program.body[0].declarations[0].id.typeAnnotation;
+			propsParamId.typeParameters = tp;
+		}
+		const propsId = j.identifier("props");
+		const childrenId = j.identifier("children");
+		const restId = j.identifier("rest");
+		const styleId = j.identifier("style");
+		const declStmt = j.variableDeclaration("const", [j.variableDeclarator(j.objectPattern([
+			j.property.from({
+				kind: "init",
+				key: j.identifier("as"),
+				value: j.assignmentPattern(j.identifier("Component"), j.literal(tagName)),
+				shorthand: false
+			}),
+			...isVoidTag ? [] : [patternProp("children", childrenId)],
+			...allowStyleProp ? [patternProp("style", styleId)] : [],
+			j.restElement(restId)
+		]), propsId)]);
+		const attrs = [
+			j.jsxSpreadAttribute(restId),
+			j.jsxSpreadAttribute(stylexPropsCall),
+			...allowStyleProp ? [j.jsxAttribute(j.jsxIdentifier("style"), j.jsxExpressionContainer(styleId))] : []
+		];
+		const openingEl = j.jsxOpeningElement(j.jsxIdentifier("Component"), attrs, isVoidTag);
+		const jsx = isVoidTag ? {
+			type: "JSXElement",
+			openingElement: openingEl,
+			closingElement: null,
+			children: []
+		} : j.jsxElement(openingEl, j.jsxClosingElement(j.jsxIdentifier("Component")), [j.jsxExpressionContainer(childrenId)]);
+		const fn = j.functionDeclaration(j.identifier(d.localName), [propsParamId], j.blockStatement([declStmt, j.returnStatement(jsx)]));
+		if (propsParamId.typeParameters) {
+			fn.typeParameters = propsParamId.typeParameters;
+			propsParamId.typeParameters = void 0;
+		}
+		emitted.push(fn);
+	}
 	const enumVariantWrappers = wrapperDecls.filter((d) => d.enumVariant);
 	if (enumVariantWrappers.length > 0) for (const d of enumVariantWrappers) {
 		if (!d.enumVariant) continue;
@@ -3652,7 +4155,7 @@ function emitWrappers(args) {
 		if (!primary || !secondary) continue;
 		const explicit = stringifyTsType(d.propsType);
 		if (explicit) {
-			emitNamedPropsType(d.localName, explicit);
+			emitNamedPropsType(d.localName, withChildren(explicit));
 			needsReactTypeImport = true;
 		} else {
 			const hasNeq = cases.some((c) => c.kind === "neq");
@@ -3666,14 +4169,7 @@ function emitWrappers(args) {
 		const propsId = j.identifier("props");
 		const variantId = j.identifier(propName);
 		const childrenId = j.identifier("children");
-		const classNameId = j.identifier("className");
-		const restId = j.identifier("rest");
-		const declStmt = j.variableDeclaration("const", [j.variableDeclarator(j.objectPattern([
-			patternProp(propName, variantId),
-			patternProp("children", childrenId),
-			patternProp("className", classNameId),
-			j.restElement(restId)
-		]), propsId)]);
+		const declStmt = j.variableDeclaration("const", [j.variableDeclarator(j.objectPattern([patternProp(propName, variantId), patternProp("children", childrenId)]), propsId)]);
 		const base = j.memberExpression(j.identifier(stylesIdentifier), j.identifier(baseKey));
 		const condPrimary = j.binaryExpression("===", variantId, j.literal(primary.whenValue));
 		const condSecondary = secondary.kind === "neq" ? j.binaryExpression("!==", variantId, j.literal(secondary.whenValue)) : j.binaryExpression("===", variantId, j.literal(secondary.whenValue));
@@ -3682,12 +4178,7 @@ function emitWrappers(args) {
 			j.logicalExpression("&&", condPrimary, j.memberExpression(j.identifier(stylesIdentifier), j.identifier(primary.styleKey))),
 			j.logicalExpression("&&", condSecondary, j.memberExpression(j.identifier(stylesIdentifier), j.identifier(secondary.styleKey)))
 		]))]);
-		const mergedClassName = j.callExpression(j.memberExpression(j.callExpression(j.memberExpression(j.arrayExpression([j.memberExpression(j.identifier("sx"), j.identifier("className")), classNameId]), j.identifier("filter")), [j.identifier("Boolean")]), j.identifier("join")), [j.literal(" ")]);
-		const openingEl = j.jsxOpeningElement(j.jsxIdentifier("div"), [
-			j.jsxSpreadAttribute(j.identifier("sx")),
-			j.jsxAttribute(j.jsxIdentifier("className"), j.jsxExpressionContainer(mergedClassName)),
-			j.jsxSpreadAttribute(restId)
-		], false);
+		const openingEl = j.jsxOpeningElement(j.jsxIdentifier("div"), [j.jsxSpreadAttribute(j.identifier("sx"))], false);
 		const jsx = j.jsxElement(openingEl, j.jsxClosingElement(j.jsxIdentifier("div")), [j.jsxExpressionContainer(childrenId)]);
 		emitted.push(withLeadingComments(j.functionDeclaration(j.identifier(d.localName), [propsParamId], j.blockStatement([
 			declStmt,
@@ -3698,9 +4189,14 @@ function emitWrappers(args) {
 	for (const d of shouldForwardPropWrapperDecls) {
 		if (d.base.kind !== "intrinsic") continue;
 		const tagName = d.base.tagName;
-		const supportsExternalStyles = d.supportsExternalStyles ?? false;
+		const allowClassNameProp = shouldAllowClassNameProp(d);
+		const allowStyleProp = shouldAllowStyleProp(d);
 		const extraProps = /* @__PURE__ */ new Set();
 		for (const p of d.shouldForwardProp?.dropProps ?? []) if (p) extraProps.add(p);
+		for (const when of Object.keys(d.variantStyleKeys ?? {})) {
+			const { props } = parseVariantWhenToAst(j, when);
+			for (const p of props) if (p) extraProps.add(p);
+		}
 		for (const p of d.styleFnFromProps ?? []) if (p?.jsxProp) extraProps.add(p.jsxProp);
 		const dropPrefixFromFilter = d.shouldForwardProp?.dropPrefix;
 		const usedAttrs = getUsedAttrs(d.localName);
@@ -3709,6 +4205,7 @@ function emitWrappers(args) {
 		const knownPrefixProps = dropPrefixFromFilter ? [...extraProps].filter((p) => p.startsWith(dropPrefixFromFilter) && isValidIdentifier(p)) : [];
 		const knownPrefixPropsSet = new Set(knownPrefixProps);
 		const explicit = stringifyTsType(d.propsType);
+		const explicitPropNames = d.propsType ? getExplicitPropNames(d.propsType) : /* @__PURE__ */ new Set();
 		const extrasTypeText = (() => {
 			if (explicit && explicit.trim()) return dropPrefixFromFilter === "$" && shouldAllowAnyPrefixProps ? `${explicit} & { [K in \`$\${string}\`]?: any }` : explicit;
 			const lines = [];
@@ -3717,29 +4214,51 @@ function emitWrappers(args) {
 			if (dropPrefixFromFilter === "$") return `${literal} & { [K in \`$\${string}\`]?: any }`;
 			return literal;
 		})();
-		const rawBaseTypeText = `React.ComponentProps<${JSON.stringify(tagName)}>`;
-		const composedInner = joinIntersection(rawBaseTypeText, extrasTypeText);
-		const finalTypeText = VOID_TAGS.has(tagName) ? composedInner : withChildren(composedInner);
+		const finalTypeText = (() => {
+			if (explicit) {
+				if (VOID_TAGS.has(tagName)) {
+					const base$1 = reactIntrinsicAttrsType(tagName);
+					const omitted$1 = [];
+					if (!allowClassNameProp) omitted$1.push("\"className\"");
+					if (!allowStyleProp) omitted$1.push("\"style\"");
+					return joinIntersection(omitted$1.length ? `Omit<${base$1}, ${omitted$1.join(" | ")}>` : base$1, extrasTypeText);
+				}
+				if (!d.shouldForwardPropFromWithConfig) {
+					const supplementalLines = [];
+					if (allowClassNameProp) supplementalLines.push(`  className?: string;`);
+					if (allowStyleProp) supplementalLines.push(`  style?: React.CSSProperties;`);
+					return withChildren(joinIntersection(extrasTypeText, supplementalLines.length > 0 ? `{\n${supplementalLines.join("\n")}\n}` : "{}"));
+				}
+				const base = `React.ComponentProps<"${tagName}">`;
+				const omitted = [];
+				if (!allowClassNameProp) omitted.push("\"className\"");
+				if (!allowStyleProp) omitted.push("\"style\"");
+				return joinIntersection(omitted.length ? `Omit<${base}, ${omitted.join(" | ")}>` : base, extrasTypeText);
+			}
+			const inferred = inferredIntrinsicPropsTypeText({
+				d,
+				tagName,
+				allowClassNameProp,
+				allowStyleProp,
+				skipProps: explicitPropNames
+			});
+			return VOID_TAGS.has(tagName) ? inferred : withChildren(inferred);
+		})();
 		if (!emitNamedPropsType(d.localName, finalTypeText) && explicit) {
 			const propsTypeName = propsTypeNameFor(d.localName);
-			if (!extendExistingInterface(propsTypeName, rawBaseTypeText)) extendExistingTypeAlias(propsTypeName, rawBaseTypeText);
+			const extendBaseTypeText = (() => {
+				const base = reactIntrinsicAttrsType(tagName);
+				const omitted = [];
+				if (!allowClassNameProp) omitted.push("\"className\"");
+				if (!allowStyleProp) omitted.push("\"style\"");
+				return omitted.length ? `Omit<${base}, ${omitted.join(" | ")}>` : base;
+			})();
+			if (!extendExistingInterface(propsTypeName, extendBaseTypeText)) extendExistingTypeAlias(propsTypeName, extendBaseTypeText);
 		}
 		needsReactTypeImport = true;
 		const styleArgs = [...d.extendsStyleKey ? [j.memberExpression(j.identifier(stylesIdentifier), j.identifier(d.extendsStyleKey))] : [], j.memberExpression(j.identifier(stylesIdentifier), j.identifier(d.styleKey))];
 		if (d.variantStyleKeys) for (const [when, variantKey] of Object.entries(d.variantStyleKeys)) {
-			let cond = null;
-			const trimmed = when.trim();
-			if (trimmed.startsWith("!(") && trimmed.endsWith(")")) {
-				const inner = trimmed.slice(2, -1).trim();
-				cond = j.unaryExpression("!", j.identifier(inner));
-			} else if (trimmed.startsWith("!")) cond = j.unaryExpression("!", j.identifier(trimmed.slice(1)));
-			else if (trimmed.includes("===") || trimmed.includes("!==")) {
-				const op = trimmed.includes("!==") ? "!==" : "===";
-				const [lhs, rhsRaw0] = trimmed.split(op).map((s) => s.trim());
-				const rhsRaw = rhsRaw0 ?? "";
-				const rhs = rhsRaw?.startsWith("\"") || rhsRaw?.startsWith("'") ? j.literal(JSON.parse(rhsRaw.replace(/^'/, "\"").replace(/'$/, "\""))) : /^-?\d+(\.\d+)?$/.test(rhsRaw) ? j.literal(Number(rhsRaw)) : j.identifier(rhsRaw);
-				cond = j.binaryExpression(op, j.identifier(lhs ?? ""), rhs);
-			} else cond = j.identifier(trimmed);
+			const { cond } = parseVariantWhenToAst(j, when);
 			styleArgs.push(j.logicalExpression("&&", cond, j.memberExpression(j.identifier(stylesIdentifier), j.identifier(variantKey))));
 		}
 		const styleFnPairs = d.styleFnFromProps ?? [];
@@ -3763,31 +4282,25 @@ function emitWrappers(args) {
 		const styleId = j.identifier("style");
 		const restId = j.identifier("rest");
 		const isVoidTag = tagName === "input";
-		const shouldOmitRestSpread = !dropPrefix && dropProps.length > 0 && dropProps.every((p) => p.startsWith("$")) && !usedAttrs.has("*") && [...usedAttrs].every((n) => n === "children" || dropProps.includes(n));
-		if (!supportsExternalStyles) {
+		const { hasAny: hasLocalUsage } = getJsxCallsites(d.localName);
+		const shouldIncludeRest = isUsedAsValueInFile(d.localName) || hasLocalUsage && usedAttrs.has("*") || hasLocalUsage && [...usedAttrs].some((n) => {
+			if (n === "children" || n === "className" || n === "style" || n === "as" || n === "forwardedAs") return false;
+			return !destructureParts.includes(n);
+		});
+		const includeRest = !(!dropPrefix && dropProps.length > 0 && dropProps.every((p) => p.startsWith("$")) && !usedAttrs.has("*") && [...usedAttrs].every((n) => n === "children" || dropProps.includes(n))) && shouldIncludeRest;
+		if (!allowClassNameProp && !allowStyleProp) {
 			const isVoid = VOID_TAGS.has(tagName);
 			const patternProps$1 = [
 				...isVoid ? [] : [patternProp("children", childrenId)],
-				patternProp("className", classNameId),
-				patternProp("style", styleId),
 				...destructureParts.filter(Boolean).map((name) => patternProp(name)),
-				...shouldOmitRestSpread ? [] : [j.restElement(restId)]
+				...includeRest ? [j.restElement(restId)] : []
 			];
 			const declStmt$1 = j.variableDeclaration("const", [j.variableDeclarator(j.objectPattern(patternProps$1), propsId)]);
-			const cleanupPrefixStmt$1 = dropPrefix && shouldAllowAnyPrefixProps ? j.forOfStatement(j.variableDeclaration("const", [j.variableDeclarator(j.identifier("k"), null)]), j.callExpression(j.memberExpression(j.identifier("Object"), j.identifier("keys")), [restId]), j.blockStatement([j.ifStatement(j.callExpression(j.memberExpression(j.identifier("k"), j.identifier("startsWith")), [j.literal(dropPrefix)]), j.expressionStatement(j.unaryExpression("delete", j.memberExpression(restId, j.identifier("k"), true))))])) : null;
-			const stylexPropsCall = j.callExpression(j.memberExpression(j.identifier("stylex"), j.identifier("props")), styleArgs);
-			const sxDecl$1 = j.variableDeclaration("const", [j.variableDeclarator(j.identifier("sx"), stylexPropsCall)]);
-			const mergedClassName$1 = j.callExpression(j.memberExpression(j.callExpression(j.memberExpression(j.arrayExpression([j.memberExpression(j.identifier("sx"), j.identifier("className")), classNameId]), j.identifier("filter")), [j.identifier("Boolean")]), j.identifier("join")), [j.literal(" ")]);
-			const openingEl$1 = j.jsxOpeningElement(j.jsxIdentifier(tagName), [
-				j.jsxSpreadAttribute(j.identifier("sx")),
-				j.jsxAttribute(j.jsxIdentifier("className"), j.jsxExpressionContainer(mergedClassName$1)),
-				...d.inlineStyleProps && d.inlineStyleProps.length ? [j.jsxAttribute(j.jsxIdentifier("style"), j.jsxExpressionContainer(j.objectExpression([
-					j.spreadElement(j.memberExpression(j.identifier("sx"), j.identifier("style"))),
-					j.spreadElement(styleId),
-					...d.inlineStyleProps.map((p) => j.property("init", j.identifier(p.prop), p.expr))
-				])))] : [j.jsxAttribute(j.jsxIdentifier("style"), j.jsxExpressionContainer(j.objectExpression([j.spreadElement(j.memberExpression(j.identifier("sx"), j.identifier("style"))), j.spreadElement(styleId)])))],
-				...shouldOmitRestSpread ? [] : [j.jsxSpreadAttribute(restId)]
-			], false);
+			const cleanupPrefixStmt$1 = dropPrefix && shouldAllowAnyPrefixProps && includeRest ? j.forOfStatement(j.variableDeclaration("const", [j.variableDeclarator(j.identifier("k"), null)]), j.callExpression(j.memberExpression(j.identifier("Object"), j.identifier("keys")), [restId]), j.blockStatement([j.ifStatement(j.callExpression(j.memberExpression(j.identifier("k"), j.identifier("startsWith")), [j.literal(dropPrefix)]), j.expressionStatement(j.unaryExpression("delete", j.memberExpression(restId, j.identifier("k"), true))))])) : null;
+			const sxDecl$1 = j.variableDeclaration("const", [j.variableDeclarator(j.identifier("sx"), j.callExpression(j.memberExpression(j.identifier("stylex"), j.identifier("props")), styleArgs))]);
+			const openingAttrs$1 = [...includeRest ? [j.jsxSpreadAttribute(restId)] : [], j.jsxSpreadAttribute(j.identifier("sx"))];
+			if (d.inlineStyleProps && d.inlineStyleProps.length) openingAttrs$1.push(j.jsxAttribute(j.jsxIdentifier("style"), j.jsxExpressionContainer(j.objectExpression([j.spreadElement(j.memberExpression(j.identifier("sx"), j.identifier("style"))), ...d.inlineStyleProps.map((p) => j.property("init", j.identifier(p.prop), p.expr))]))));
+			const openingEl$1 = j.jsxOpeningElement(j.jsxIdentifier(tagName), openingAttrs$1, false);
 			const jsx$1 = isVoid ? {
 				type: "JSXElement",
 				openingElement: {
@@ -3805,26 +4318,27 @@ function emitWrappers(args) {
 			continue;
 		}
 		const patternProps = [
-			patternProp("className", classNameId),
+			...allowClassNameProp ? [patternProp("className", classNameId)] : [],
 			...isVoidTag ? [] : [patternProp("children", childrenId)],
-			patternProp("style", styleId),
+			...allowStyleProp ? [patternProp("style", styleId)] : [],
 			...destructureParts.filter(Boolean).map((name) => patternProp(name)),
-			...shouldOmitRestSpread ? [] : [j.restElement(restId)]
+			...includeRest ? [j.restElement(restId)] : []
 		];
 		const declStmt = j.variableDeclaration("const", [j.variableDeclarator(j.objectPattern(patternProps), propsId)]);
-		const cleanupPrefixStmt = dropPrefix && shouldAllowAnyPrefixProps ? j.forOfStatement(j.variableDeclaration("const", [j.variableDeclarator(j.identifier("k"), null)]), j.callExpression(j.memberExpression(j.identifier("Object"), j.identifier("keys")), [restId]), j.blockStatement([j.ifStatement(j.callExpression(j.memberExpression(j.identifier("k"), j.identifier("startsWith")), [j.literal(dropPrefix)]), j.expressionStatement(j.unaryExpression("delete", j.memberExpression(restId, j.identifier("k"), true))))])) : null;
+		const cleanupPrefixStmt = dropPrefix && shouldAllowAnyPrefixProps && includeRest ? j.forOfStatement(j.variableDeclaration("const", [j.variableDeclarator(j.identifier("k"), null)]), j.callExpression(j.memberExpression(j.identifier("Object"), j.identifier("keys")), [restId]), j.blockStatement([j.ifStatement(j.callExpression(j.memberExpression(j.identifier("k"), j.identifier("startsWith")), [j.literal(dropPrefix)]), j.expressionStatement(j.unaryExpression("delete", j.memberExpression(restId, j.identifier("k"), true))))])) : null;
 		const sxDecl = j.variableDeclaration("const", [j.variableDeclarator(j.identifier("sx"), j.callExpression(j.memberExpression(j.identifier("stylex"), j.identifier("props")), styleArgs))]);
-		const mergedClassName = j.callExpression(j.memberExpression(j.callExpression(j.memberExpression(j.arrayExpression([j.memberExpression(j.identifier("sx"), j.identifier("className")), classNameId]), j.identifier("filter")), [j.identifier("Boolean")]), j.identifier("join")), [j.literal(" ")]);
-		const openingEl = j.jsxOpeningElement(j.jsxIdentifier(tagName), [
-			j.jsxSpreadAttribute(j.identifier("sx")),
-			j.jsxAttribute(j.jsxIdentifier("className"), j.jsxExpressionContainer(mergedClassName)),
-			...d.inlineStyleProps && d.inlineStyleProps.length ? [j.jsxAttribute(j.jsxIdentifier("style"), j.jsxExpressionContainer(j.objectExpression([
-				j.spreadElement(j.memberExpression(j.identifier("sx"), j.identifier("style"))),
-				j.spreadElement(styleId),
-				...d.inlineStyleProps.map((p) => j.property("init", j.identifier(p.prop), p.expr))
-			])))] : [j.jsxAttribute(j.jsxIdentifier("style"), j.jsxExpressionContainer(j.objectExpression([j.spreadElement(j.memberExpression(j.identifier("sx"), j.identifier("style"))), j.spreadElement(styleId)])))],
-			...shouldOmitRestSpread ? [] : [j.jsxSpreadAttribute(restId)]
-		], false);
+		const openingAttrs = [j.jsxSpreadAttribute(j.identifier("sx"))];
+		if (allowClassNameProp) {
+			const mergedClassName = j.callExpression(j.memberExpression(j.callExpression(j.memberExpression(j.arrayExpression([j.memberExpression(j.identifier("sx"), j.identifier("className")), classNameId]), j.identifier("filter")), [j.identifier("Boolean")]), j.identifier("join")), [j.literal(" ")]);
+			openingAttrs.push(j.jsxAttribute(j.jsxIdentifier("className"), j.jsxExpressionContainer(mergedClassName)));
+		}
+		if (allowStyleProp || d.inlineStyleProps && d.inlineStyleProps.length) openingAttrs.push(j.jsxAttribute(j.jsxIdentifier("style"), j.jsxExpressionContainer(j.objectExpression([
+			j.spreadElement(j.memberExpression(j.identifier("sx"), j.identifier("style"))),
+			...allowStyleProp ? [j.spreadElement(styleId)] : [],
+			...d.inlineStyleProps && d.inlineStyleProps.length ? d.inlineStyleProps.map((p) => j.property("init", j.identifier(p.prop), p.expr)) : []
+		]))));
+		if (includeRest) openingAttrs.push(j.jsxSpreadAttribute(restId));
+		const openingEl = j.jsxOpeningElement(j.jsxIdentifier(tagName), openingAttrs, false);
 		const jsx = isVoidTag ? {
 			type: "JSXElement",
 			openingElement: {
@@ -3856,6 +4370,8 @@ function emitWrappers(args) {
 		if (d.base.kind !== "intrinsic") continue;
 		const tagName = d.base.tagName;
 		const supportsExternalStyles = d.supportsExternalStyles ?? false;
+		const allowClassNameProp = shouldAllowClassNameProp(d);
+		const allowStyleProp = shouldAllowStyleProp(d);
 		{
 			const explicit = stringifyTsType(d.propsType);
 			const baseTypeText = (() => {
@@ -3863,8 +4379,14 @@ function emitWrappers(args) {
 				const used = getUsedAttrs(d.localName);
 				if (used.has("*")) return true;
 				return used.size > 0;
-			})() ? `React.ComponentProps<${JSON.stringify(tagName)}>` : "{}";
-			emitNamedPropsType(d.localName, explicit ?? (VOID_TAGS.has(tagName) ? baseTypeText : withChildren(baseTypeText)));
+			})() ? inferredIntrinsicPropsTypeText({
+				d,
+				tagName,
+				allowClassNameProp,
+				allowStyleProp
+			}) : "{}";
+			const typeWithChildren = !explicit && !VOID_TAGS.has(tagName) ? withChildren(baseTypeText) : baseTypeText;
+			emitNamedPropsType(d.localName, explicit ?? typeWithChildren);
 			needsReactTypeImport = true;
 		}
 		const styleArgs = [...d.extendsStyleKey ? [j.memberExpression(j.identifier(stylesIdentifier), j.identifier(d.extendsStyleKey))] : [], j.memberExpression(j.identifier(stylesIdentifier), j.identifier(d.styleKey))];
@@ -3876,7 +4398,9 @@ function emitWrappers(args) {
 		const styleId = j.identifier("style");
 		const restId = j.identifier("rest");
 		const isVoidTag = VOID_TAGS.has(tagName);
-		if (!supportsExternalStyles) {
+		if (!allowClassNameProp && !allowStyleProp) {
+			const usedAttrs = getUsedAttrs(d.localName);
+			const includeRest = usedAttrs.has("*") || !!d.usedAsValue || usedAttrs.size > 0;
 			emitted.push(...withLeadingCommentsOnFirstFunction(emitMinimalWrapper({
 				j,
 				localName: d.localName,
@@ -3885,7 +4409,11 @@ function emitWrappers(args) {
 				emitTypes,
 				styleArgs,
 				destructureProps: [],
-				patternProp
+				allowClassNameProp: false,
+				allowStyleProp: false,
+				includeRest,
+				patternProp,
+				inlineStyleProps: d.inlineStyleProps ?? []
 			}), d));
 			continue;
 		}
@@ -3929,7 +4457,13 @@ function emitWrappers(args) {
 			extras.push(`${sw.propAdjacent}?: boolean;`);
 			if (sw.propAfter) extras.push(`${sw.propAfter}?: boolean;`);
 			const extraType = `{ ${extras.join(" ")} }`;
-			emitNamedPropsType(d.localName, explicit ?? joinIntersection(`React.ComponentProps<"div">`, extraType));
+			const baseTypeText = inferredIntrinsicPropsTypeText({
+				d,
+				tagName: "div",
+				allowClassNameProp: shouldAllowClassNameProp(d),
+				allowStyleProp: shouldAllowStyleProp(d)
+			});
+			emitNamedPropsType(d.localName, explicit ?? joinIntersection(baseTypeText, extraType));
 			needsReactTypeImport = true;
 		}
 		const propsParamId = j.identifier("props");
@@ -3978,16 +4512,30 @@ function emitWrappers(args) {
 	for (const d of simpleExportedIntrinsicWrappers) {
 		if (d.base.kind !== "intrinsic") continue;
 		const tagName = d.base.tagName;
-		const supportsExternalStyles = d.supportsExternalStyles ?? false;
+		const allowClassNameProp = shouldAllowClassNameProp(d);
+		const allowStyleProp = shouldAllowStyleProp(d);
 		let inlineTypeText;
 		{
 			const explicit = stringifyTsType(d.propsType);
-			const baseTypeText = `React.ComponentProps<${JSON.stringify(tagName)}>`;
-			const typeText = explicit ? `${baseTypeText} & ${explicit}` : baseTypeText;
+			const baseTypeText = inferredIntrinsicPropsTypeText({
+				d,
+				tagName,
+				allowClassNameProp,
+				allowStyleProp,
+				skipProps: d.propsType ? getExplicitPropNames(d.propsType) : /* @__PURE__ */ new Set()
+			});
+			const extendBaseTypeText = (() => {
+				const base = reactIntrinsicAttrsType(tagName);
+				const omitted = [];
+				if (!allowClassNameProp) omitted.push("\"className\"");
+				if (!allowStyleProp) omitted.push("\"style\"");
+				return omitted.length ? `Omit<${base}, ${omitted.join(" | ")}>` : base;
+			})();
+			const typeText = explicit ? VOID_TAGS.has(tagName) ? joinIntersection(extendBaseTypeText, explicit) : withChildren(explicit) : baseTypeText;
 			if (!emitNamedPropsType(d.localName, typeText) && explicit) {
 				const propsTypeName = propsTypeNameFor(d.localName);
-				if (!extendExistingInterface(propsTypeName, baseTypeText)) {
-					if (!extendExistingTypeAlias(propsTypeName, baseTypeText)) inlineTypeText = `React.PropsWithChildren<${explicit} & { style?: React.CSSProperties }>`;
+				if (!extendExistingInterface(propsTypeName, extendBaseTypeText)) {
+					if (!extendExistingTypeAlias(propsTypeName, extendBaseTypeText)) inlineTypeText = VOID_TAGS.has(tagName) ? explicit : withChildren(explicit);
 				}
 			}
 			needsReactTypeImport = true;
@@ -3995,28 +4543,8 @@ function emitWrappers(args) {
 		const styleArgs = [...d.extendsStyleKey ? [j.memberExpression(j.identifier(stylesIdentifier), j.identifier(d.extendsStyleKey))] : [], j.memberExpression(j.identifier(stylesIdentifier), j.identifier(d.styleKey))];
 		const destructureProps = [];
 		if (d.variantStyleKeys) for (const [when, variantKey] of Object.entries(d.variantStyleKeys)) {
-			let cond = null;
-			const trimmed = when.trim();
-			let propName = "";
-			if (trimmed.startsWith("!(") && trimmed.endsWith(")")) {
-				const inner = trimmed.slice(2, -1).trim();
-				cond = j.unaryExpression("!", j.identifier(inner));
-				propName = inner;
-			} else if (trimmed.startsWith("!")) {
-				propName = trimmed.slice(1);
-				cond = j.unaryExpression("!", j.identifier(propName));
-			} else if (trimmed.includes("===") || trimmed.includes("!==")) {
-				const op = trimmed.includes("!==") ? "!==" : "===";
-				const [lhs, rhsRaw0] = trimmed.split(op).map((s) => s.trim());
-				const rhsRaw = rhsRaw0 ?? "";
-				const rhs = rhsRaw?.startsWith("\"") || rhsRaw?.startsWith("'") ? j.literal(JSON.parse(rhsRaw.replace(/^'/, "\"").replace(/'$/, "\""))) : /^-?\d+(\.\d+)?$/.test(rhsRaw) ? j.literal(Number(rhsRaw)) : j.identifier(rhsRaw);
-				propName = lhs ?? "";
-				cond = j.binaryExpression(op, j.identifier(propName), rhs);
-			} else {
-				propName = trimmed;
-				cond = j.identifier(trimmed);
-			}
-			if (propName && !destructureProps.includes(propName)) destructureProps.push(propName);
+			const { cond, props } = parseVariantWhenToAst(j, when);
+			for (const p of props) if (p && !destructureProps.includes(p)) destructureProps.push(p);
 			styleArgs.push(j.logicalExpression("&&", cond, j.memberExpression(j.identifier(stylesIdentifier), j.identifier(variantKey))));
 		}
 		const styleFnPairs = d.styleFnFromProps ?? [];
@@ -4027,7 +4555,19 @@ function emitWrappers(args) {
 			if (isPropRequiredInPropsTypeLiteral(d.propsType, p.jsxProp)) styleArgs.push(call);
 			else styleArgs.push(j.logicalExpression("&&", j.binaryExpression("!=", propExpr, j.nullLiteral()), call));
 		}
-		if (supportsExternalStyles) {
+		if (d.attrsInfo?.conditionalAttrs?.length) {
+			for (const c of d.attrsInfo.conditionalAttrs) if (c?.jsxProp && !destructureProps.includes(c.jsxProp)) destructureProps.push(c.jsxProp);
+		}
+		if (d.attrsInfo?.invertedBoolAttrs?.length) {
+			for (const inv of d.attrsInfo.invertedBoolAttrs) if (inv?.jsxProp && !destructureProps.includes(inv.jsxProp)) destructureProps.push(inv.jsxProp);
+		}
+		const usedAttrs = getUsedAttrs(d.localName);
+		const { hasAny: hasLocalUsage } = getJsxCallsites(d.localName);
+		const shouldIncludeRest = isUsedAsValueInFile(d.localName) || hasLocalUsage && usedAttrs.has("*") || hasLocalUsage && [...usedAttrs].some((n) => {
+			if (n === "children" || n === "className" || n === "style" || n === "as" || n === "forwardedAs") return false;
+			return !destructureProps.includes(n);
+		});
+		if (allowClassNameProp || allowStyleProp) {
 			const isVoidTag = VOID_TAGS.has(tagName);
 			const propsParamId = j.identifier("props");
 			annotatePropsParam(propsParamId, d.localName, inlineTypeText);
@@ -4035,22 +4575,26 @@ function emitWrappers(args) {
 			const classNameId = j.identifier("className");
 			const childrenId = j.identifier("children");
 			const styleId = j.identifier("style");
-			const restId = j.identifier("rest");
+			const restId = shouldIncludeRest ? j.identifier("rest") : null;
 			const patternProps = [
-				patternProp("className", classNameId),
+				...allowClassNameProp ? [patternProp("className", classNameId)] : [],
 				...isVoidTag ? [] : [patternProp("children", childrenId)],
-				patternProp("style", styleId),
+				...allowStyleProp ? [patternProp("style", styleId)] : [],
 				...destructureProps.map((name) => patternProp(name)),
-				j.restElement(restId)
+				...restId ? [j.restElement(restId)] : []
 			];
 			const declStmt = j.variableDeclaration("const", [j.variableDeclarator(j.objectPattern(patternProps), propsId)]);
 			const sxDecl = j.variableDeclaration("const", [j.variableDeclarator(j.identifier("sx"), j.callExpression(j.memberExpression(j.identifier("stylex"), j.identifier("props")), styleArgs))]);
-			const mergedClassName = j.callExpression(j.memberExpression(j.callExpression(j.memberExpression(j.arrayExpression([j.memberExpression(j.identifier("sx"), j.identifier("className")), classNameId]), j.identifier("filter")), [j.identifier("Boolean")]), j.identifier("join")), [j.literal(" ")]);
+			const mergedClassName = allowClassNameProp ? j.callExpression(j.memberExpression(j.callExpression(j.memberExpression(j.arrayExpression([j.memberExpression(j.identifier("sx"), j.identifier("className")), classNameId]), j.identifier("filter")), [j.identifier("Boolean")]), j.identifier("join")), [j.literal(" ")]) : null;
 			const openingEl = j.jsxOpeningElement(j.jsxIdentifier(tagName), [
 				j.jsxSpreadAttribute(j.identifier("sx")),
-				j.jsxAttribute(j.jsxIdentifier("className"), j.jsxExpressionContainer(mergedClassName)),
-				j.jsxAttribute(j.jsxIdentifier("style"), j.jsxExpressionContainer(j.objectExpression([j.spreadElement(j.memberExpression(j.identifier("sx"), j.identifier("style"))), j.spreadElement(styleId)]))),
-				j.jsxSpreadAttribute(restId)
+				...allowClassNameProp ? [j.jsxAttribute(j.jsxIdentifier("className"), j.jsxExpressionContainer(mergedClassName))] : [],
+				...allowStyleProp || d.inlineStyleProps && d.inlineStyleProps.length ? [j.jsxAttribute(j.jsxIdentifier("style"), j.jsxExpressionContainer(j.objectExpression([
+					j.spreadElement(j.memberExpression(j.identifier("sx"), j.identifier("style"))),
+					...allowStyleProp ? [j.spreadElement(styleId)] : [],
+					...d.inlineStyleProps && d.inlineStyleProps.length ? d.inlineStyleProps.map((p) => j.property("init", j.identifier(p.prop), p.expr)) : []
+				])))] : [],
+				...restId ? [j.jsxSpreadAttribute(restId)] : []
 			], false);
 			const jsx = isVoidTag ? {
 				type: "JSXElement",
@@ -4078,37 +4622,61 @@ function emitWrappers(args) {
 			emitTypes,
 			styleArgs,
 			destructureProps,
+			allowClassNameProp: false,
+			allowStyleProp: false,
+			includeRest: shouldIncludeRest,
 			patternProp,
-			...d.attrsInfo?.staticAttrs ? { staticAttrs: d.attrsInfo.staticAttrs } : {}
+			...d.attrsInfo?.defaultAttrs ? { defaultAttrs: d.attrsInfo.defaultAttrs } : {},
+			...d.attrsInfo?.conditionalAttrs ? { conditionalAttrs: d.attrsInfo.conditionalAttrs } : {},
+			...d.attrsInfo?.invertedBoolAttrs ? { invertedBoolAttrs: d.attrsInfo.invertedBoolAttrs } : {},
+			...d.attrsInfo?.staticAttrs ? { staticAttrs: d.attrsInfo.staticAttrs } : {},
+			inlineStyleProps: d.inlineStyleProps ?? []
 		}), d));
 	}
 	const componentWrappers = wrapperDecls.filter((d) => d.base.kind === "component");
 	for (const d of componentWrappers) {
 		if (d.base.kind !== "component") continue;
 		const wrappedComponent = d.base.ident;
+		const wrappedComponentHasAs = wrapperNames.has(wrappedComponent);
+		const isPolymorphicComponentWrapper = wrapperNames.has(d.localName) && !wrappedComponentHasAs;
+		const allowClassNameProp = shouldAllowClassNameProp(d);
+		const allowStyleProp = shouldAllowStyleProp(d);
+		const propsIdForExpr = j.identifier("props");
 		let functionParamTypeName = null;
-		let needsGenericPolymorphicType = false;
 		{
 			const explicit = stringifyTsType(d.propsType);
-			const baseTypeText = `React.ComponentProps<typeof ${wrappedComponent}>`;
 			const explicitTypeName = d.propsType?.type === "TSTypeReference" && d.propsType?.typeName?.type === "Identifier" ? d.propsType?.typeName?.name : null;
-			if (explicitTypeName && typeExistsInFile(explicitTypeName) && explicit) {
+			if (explicitTypeName && typeExistsInFile(explicitTypeName) && explicit && explicitTypeName) {
+				const baseTypeText = (() => {
+					const base = `React.ComponentProps<typeof ${wrappedComponent}>`;
+					const omitted = [];
+					if (!allowClassNameProp) omitted.push("\"className\"");
+					if (!allowStyleProp) omitted.push("\"style\"");
+					return omitted.length ? `Omit<${base}, ${omitted.join(" | ")}>` : base;
+				})();
 				if (!extendExistingInterface(explicitTypeName, baseTypeText)) extendExistingTypeAlias(explicitTypeName, baseTypeText);
 				functionParamTypeName = explicitTypeName;
 			} else {
-				const wrappedComponentHasAs = wrapperNames.has(wrappedComponent);
-				if (wrapperNames.has(d.localName) && !wrappedComponentHasAs) {
-					needsGenericPolymorphicType = true;
-					const genericParams = `C extends React.ElementType = typeof ${wrappedComponent}`;
-					const omitType = `Omit<React.ComponentPropsWithoutRef<C>, keyof ${baseTypeText}>`;
-					const typeText = explicit ? `${baseTypeText} & ${omitType} & { as?: C } & ${explicit}` : `${baseTypeText} & ${omitType} & { as?: C }`;
-					emitNamedPropsType(d.localName, typeText, genericParams);
+				const explicitPropNames = d.propsType ? getExplicitPropNames(d.propsType) : /* @__PURE__ */ new Set();
+				if (isPolymorphicComponentWrapper) {
+					const baseProps = `React.ComponentProps<typeof ${wrappedComponent}>`;
+					const omitted = [];
+					if (!allowClassNameProp) omitted.push("\"className\"");
+					if (!allowStyleProp) omitted.push("\"style\"");
+					const typeText = joinIntersection(omitted.length ? `Omit<${baseProps}, ${omitted.join(" | ")}>` : baseProps, "{ as?: C }", `Omit<React.ComponentPropsWithoutRef<C>, keyof ${baseProps} | "as">`);
+					emitNamedPropsType(d.localName, typeText, `C extends React.ElementType = typeof ${wrappedComponent}`);
 				} else {
-					const typeText = explicit ? `${baseTypeText} & ${explicit}` : baseTypeText;
-					if (!emitNamedPropsType(d.localName, typeText) && explicit) {
-						const propsTypeName = propsTypeNameFor(d.localName);
-						if (!extendExistingInterface(propsTypeName, baseTypeText)) extendExistingTypeAlias(propsTypeName, baseTypeText);
-					}
+					const inferred = inferredComponentWrapperPropsTypeText({
+						d,
+						allowClassNameProp,
+						allowStyleProp,
+						includeAsProp: false,
+						includeChildren: hasJsxChildrenUsage(d.localName),
+						skipProps: explicitPropNames
+					});
+					const explicitWithChildren = explicit ? withChildren(explicit) : null;
+					const typeText = explicitWithChildren ? joinIntersection(inferred, explicitWithChildren) : inferred;
+					emitNamedPropsType(d.localName, typeText);
 				}
 			}
 			needsReactTypeImport = true;
@@ -4116,42 +4684,36 @@ function emitWrappers(args) {
 		const styleArgs = [j.memberExpression(j.identifier(stylesIdentifier), j.identifier(d.styleKey))];
 		const destructureProps = [];
 		if (d.variantStyleKeys) for (const [when, variantKey] of Object.entries(d.variantStyleKeys)) {
-			let cond = null;
-			const trimmed = when.trim();
-			let propName = "";
-			if (trimmed.startsWith("!(") && trimmed.endsWith(")")) {
-				const inner = trimmed.slice(2, -1).trim();
-				cond = j.unaryExpression("!", j.identifier(inner));
-				propName = inner;
-			} else if (trimmed.startsWith("!")) {
-				propName = trimmed.slice(1);
-				cond = j.unaryExpression("!", j.identifier(propName));
-			} else if (trimmed.includes("===") || trimmed.includes("!==")) {
-				const op = trimmed.includes("!==") ? "!==" : "===";
-				const [lhs, rhsRaw0] = trimmed.split(op).map((s) => s.trim());
-				const rhsRaw = rhsRaw0 ?? "";
-				const rhs = rhsRaw?.startsWith("\"") || rhsRaw?.startsWith("'") ? j.literal(JSON.parse(rhsRaw.replace(/^'/, "\"").replace(/'$/, "\""))) : /^-?\d+(\.\d+)?$/.test(rhsRaw) ? j.literal(Number(rhsRaw)) : j.identifier(rhsRaw);
-				propName = lhs ?? "";
-				cond = j.binaryExpression(op, j.identifier(propName), rhs);
-			} else {
-				propName = trimmed;
-				cond = j.identifier(trimmed);
-			}
-			if (propName && !destructureProps.includes(propName)) destructureProps.push(propName);
+			const { cond, props } = parseVariantWhenToAst(j, when);
+			for (const p of props) if (p && !destructureProps.includes(p)) destructureProps.push(p);
 			styleArgs.push(j.logicalExpression("&&", cond, j.memberExpression(j.identifier(stylesIdentifier), j.identifier(variantKey))));
 		}
 		const styleFnPairs = d.styleFnFromProps ?? [];
 		for (const p of styleFnPairs) {
-			const propExpr = j.identifier(p.jsxProp);
+			const propExpr = j.memberExpression(propsIdForExpr, j.identifier(p.jsxProp));
 			const call = j.callExpression(j.memberExpression(j.identifier(stylesIdentifier), j.identifier(p.fnKey)), [propExpr]);
-			if (!destructureProps.includes(p.jsxProp)) destructureProps.push(p.jsxProp);
 			if (isPropRequiredInPropsTypeLiteral(d.propsType, p.jsxProp)) styleArgs.push(call);
 			else styleArgs.push(j.logicalExpression("&&", j.binaryExpression("!=", propExpr, j.nullLiteral()), call));
 		}
 		const filterOnlyTransientProps = [];
+		const wrapperOnlyTransientProps = [];
 		{
 			const findTransientPropsInTypeName = (typeName) => {
 				const props = [];
+				const collectFromTypeNode = (typeNode) => {
+					if (!typeNode) return;
+					if (typeNode.type === "TSParenthesizedType") {
+						collectFromTypeNode(typeNode.typeAnnotation);
+						return;
+					}
+					if (typeNode.type === "TSIntersectionType") {
+						for (const t of typeNode.types ?? []) collectFromTypeNode(t);
+						return;
+					}
+					if (typeNode.type === "TSTypeLiteral" && typeNode.members) {
+						for (const member of typeNode.members) if (member.type === "TSPropertySignature" && member.key?.type === "Identifier" && member.key.name.startsWith("$")) props.push(member.key.name);
+					}
+				};
 				const interfaceDecl = root.find(j.TSInterfaceDeclaration).filter((p) => p.node.id?.name === typeName);
 				if (interfaceDecl.size() > 0) {
 					const body = interfaceDecl.get().node.body?.body ?? [];
@@ -4160,19 +4722,21 @@ function emitWrappers(args) {
 				const typeAlias = root.find(j.TSTypeAliasDeclaration).filter((p) => p.node.id?.name === typeName);
 				if (typeAlias.size() > 0) {
 					const typeAnnotation = typeAlias.get().node.typeAnnotation;
-					if (typeAnnotation?.type === "TSTypeLiteral" && typeAnnotation.members) {
-						for (const member of typeAnnotation.members) if (member.type === "TSPropertySignature" && member.key?.type === "Identifier" && member.key.name.startsWith("$")) props.push(member.key.name);
-					}
+					collectFromTypeNode(typeAnnotation);
 				}
 				return props;
 			};
 			const explicit = d.propsType;
 			let transientProps = [];
 			if (explicit?.type === "TSTypeLiteral" && explicit.members) {
-				for (const member of explicit.members) if (member.type === "TSPropertySignature" && member.key?.type === "Identifier" && member.key.name.startsWith("$")) transientProps.push(member.key.name);
+				for (const member of explicit.members) if (member.type === "TSPropertySignature" && member.key?.type === "Identifier" && member.key.name.startsWith("$")) {
+					transientProps.push(member.key.name);
+					wrapperOnlyTransientProps.push(member.key.name);
+				}
 			} else if (explicit?.type === "TSTypeReference" && explicit.typeName?.type === "Identifier") {
 				const typeName = explicit.typeName.name;
 				transientProps = findTransientPropsInTypeName(typeName);
+				wrapperOnlyTransientProps.push(...transientProps);
 			}
 			if (transientProps.length === 0) {
 				const funcDecls = root.find(j.FunctionDeclaration).filter((p) => p.node.id?.name === wrappedComponent);
@@ -4201,9 +4765,13 @@ function emitWrappers(args) {
 			}
 		}
 		const propsParamId = j.identifier("props");
-		if (functionParamTypeName && emitTypes) propsParamId.typeAnnotation = j.tsTypeAnnotation(j.tsTypeReference(j.identifier(functionParamTypeName)));
-		else if (needsGenericPolymorphicType && emitTypes) propsParamId.typeAnnotation = j.tsTypeAnnotation(j.tsTypeReference(j.identifier(propsTypeNameFor(d.localName)), j.tsTypeParameterInstantiation([j.tsTypeReference(j.identifier("C"))])));
-		else annotatePropsParam(propsParamId, d.localName);
+		let polymorphicFnTypeParams = null;
+		if (isPolymorphicComponentWrapper && emitTypes) {
+			polymorphicFnTypeParams = j(`function _<C extends React.ElementType = typeof ${wrappedComponent}>() { return null }`).get().node.program.body[0].typeParameters;
+			propsParamId.typeAnnotation = j(`const x: ${propsTypeNameFor(d.localName)}<C> = null`).get().node.program.body[0].declarations[0].id.typeAnnotation;
+		}
+		if (!isPolymorphicComponentWrapper && functionParamTypeName && emitTypes) propsParamId.typeAnnotation = j.tsTypeAnnotation(j.tsTypeReference(j.identifier(functionParamTypeName)));
+		else if (!isPolymorphicComponentWrapper) annotatePropsParam(propsParamId, d.localName);
 		const propsId = j.identifier("props");
 		const stylexPropsCall = j.callExpression(j.memberExpression(j.identifier("stylex"), j.identifier("props")), styleArgs);
 		let jsxTagName;
@@ -4211,42 +4779,70 @@ function emitWrappers(args) {
 			const parts = wrappedComponent.split(".");
 			jsxTagName = j.jsxMemberExpression(j.jsxIdentifier(parts[0]), j.jsxIdentifier(parts.slice(1).join(".")));
 		} else jsxTagName = j.jsxIdentifier(wrappedComponent);
-		if (destructureProps.length > 0) {
+		const defaultAttrs = d.attrsInfo?.defaultAttrs ?? [];
+		const staticAttrs = d.attrsInfo?.staticAttrs ?? {};
+		const needsSxVar = allowClassNameProp || allowStyleProp || !!d.inlineStyleProps?.length;
+		const needsDestructure = destructureProps.length > 0 || needsSxVar;
+		const includeChildren = hasJsxChildrenUsage(d.localName);
+		if (needsDestructure) {
+			const childrenId = j.identifier("children");
+			const classNameId = j.identifier("className");
 			const styleId = j.identifier("style");
 			const restId = j.identifier("rest");
-			const patternProps = destructureProps.map((name) => patternProp(name));
-			patternProps.push(patternProp("style", styleId));
-			patternProps.push(j.restElement(restId));
-			const declStmt = j.variableDeclaration("const", [j.variableDeclarator(j.objectPattern(patternProps), propsId)]);
-			const explicitPropAttrs = destructureProps.filter((name) => {
-				if (!name.startsWith("$")) return false;
-				if (filterOnlyTransientProps.includes(name)) return false;
-				return root.find(j.TSInterfaceDeclaration).filter((p) => {
-					return (p.node.body?.body ?? []).some((member) => member.type === "TSPropertySignature" && member.key?.type === "Identifier" && member.key.name === name);
-				}).size() > 0;
-			}).map((name) => j.jsxAttribute(j.jsxIdentifier(name), j.jsxExpressionContainer(j.identifier(name))));
-			const jsx = j.jsxElement(j.jsxOpeningElement(jsxTagName, [
-				...explicitPropAttrs,
-				j.jsxSpreadAttribute(restId),
-				j.jsxSpreadAttribute(stylexPropsCall),
-				j.jsxAttribute(j.jsxIdentifier("style"), j.jsxExpressionContainer(styleId))
-			], true), null, []);
-			const funcDecl = j.functionDeclaration(j.identifier(d.localName), [propsParamId], j.blockStatement([declStmt, j.returnStatement(jsx)]));
-			if (needsGenericPolymorphicType && emitTypes) funcDecl.typeParameters = j.tsTypeParameterDeclaration([j.tsTypeParameter.from({
-				name: "C",
-				constraint: j.tsTypeReference(j.tsQualifiedName(j.identifier("React"), j.identifier("ElementType"))),
-				default: j.tsTypeQuery(j.identifier(wrappedComponent))
-			})]);
-			emitted.push(funcDecl);
+			const patternProps = [
+				...allowClassNameProp ? [patternProp("className", classNameId)] : [],
+				...includeChildren ? [patternProp("children", childrenId)] : [],
+				...allowStyleProp ? [patternProp("style", styleId)] : [],
+				...destructureProps.filter(Boolean).map((name) => patternProp(name)),
+				j.restElement(restId)
+			];
+			const stmts = [j.variableDeclaration("const", [j.variableDeclarator(j.objectPattern(patternProps), propsId)])];
+			const sxId = j.identifier("sx");
+			if (needsSxVar) stmts.push(j.variableDeclaration("const", [j.variableDeclarator(sxId, stylexPropsCall)]));
+			const openingAttrs = [];
+			for (const a of defaultAttrs) if (typeof a.value === "string") openingAttrs.push(j.jsxAttribute(j.jsxIdentifier(a.attrName), j.literal(a.value)));
+			else if (typeof a.value === "number") openingAttrs.push(j.jsxAttribute(j.jsxIdentifier(a.attrName), j.jsxExpressionContainer(j.literal(a.value))));
+			else if (typeof a.value === "boolean") openingAttrs.push(j.jsxAttribute(j.jsxIdentifier(a.attrName), j.jsxExpressionContainer(j.booleanLiteral(a.value))));
+			for (const [key, value] of Object.entries(staticAttrs)) if (typeof value === "string") openingAttrs.push(j.jsxAttribute(j.jsxIdentifier(key), j.literal(value)));
+			else if (typeof value === "number") openingAttrs.push(j.jsxAttribute(j.jsxIdentifier(key), j.jsxExpressionContainer(j.literal(value))));
+			else if (typeof value === "boolean") openingAttrs.push(j.jsxAttribute(j.jsxIdentifier(key), j.jsxExpressionContainer(j.booleanLiteral(value))));
+			for (const propName of destructureProps) if (propName.startsWith("$") && !filterOnlyTransientProps.includes(propName) && !wrapperOnlyTransientProps.includes(propName)) openingAttrs.push(j.jsxAttribute(j.jsxIdentifier(propName), j.jsxExpressionContainer(j.identifier(propName))));
+			openingAttrs.push(j.jsxSpreadAttribute(restId));
+			openingAttrs.push(j.jsxSpreadAttribute(needsSxVar ? sxId : stylexPropsCall));
+			if (allowClassNameProp) {
+				const mergedClassName = 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(j.jsxAttribute(j.jsxIdentifier("className"), j.jsxExpressionContainer(mergedClassName)));
+			}
+			if (allowStyleProp || d.inlineStyleProps && d.inlineStyleProps.length) openingAttrs.push(j.jsxAttribute(j.jsxIdentifier("style"), j.jsxExpressionContainer(j.objectExpression([
+				j.spreadElement(j.memberExpression(sxId, j.identifier("style"))),
+				...allowStyleProp ? [j.spreadElement(styleId)] : [],
+				...d.inlineStyleProps && d.inlineStyleProps.length ? d.inlineStyleProps.map((p) => j.property("init", j.identifier(p.prop), p.expr)) : []
+			]))));
+			const openingEl = j.jsxOpeningElement(jsxTagName, openingAttrs, !includeChildren);
+			const jsx = includeChildren ? j.jsxElement(openingEl, j.jsxClosingElement(jsxTagName), [j.jsxExpressionContainer(childrenId)]) : {
+				type: "JSXElement",
+				openingElement: openingEl,
+				closingElement: null,
+				children: []
+			};
+			stmts.push(j.returnStatement(jsx));
+			const fn = j.functionDeclaration(j.identifier(d.localName), [propsParamId], j.blockStatement(stmts));
+			if (polymorphicFnTypeParams) fn.typeParameters = polymorphicFnTypeParams;
+			emitted.push(fn);
 		} else {
-			const jsx = j.jsxElement(j.jsxOpeningElement(jsxTagName, [j.jsxSpreadAttribute(propsId), j.jsxSpreadAttribute(stylexPropsCall)], true), null, []);
-			const funcDecl = j.functionDeclaration(j.identifier(d.localName), [propsParamId], j.blockStatement([j.returnStatement(jsx)]));
-			if (needsGenericPolymorphicType && emitTypes) funcDecl.typeParameters = j.tsTypeParameterDeclaration([j.tsTypeParameter.from({
-				name: "C",
-				constraint: j.tsTypeReference(j.tsQualifiedName(j.identifier("React"), j.identifier("ElementType"))),
-				default: j.tsTypeQuery(j.identifier(wrappedComponent))
-			})]);
-			emitted.push(funcDecl);
+			const openingAttrs = [];
+			for (const a of defaultAttrs) if (typeof a.value === "string") openingAttrs.push(j.jsxAttribute(j.jsxIdentifier(a.attrName), j.literal(a.value)));
+			else if (typeof a.value === "number") openingAttrs.push(j.jsxAttribute(j.jsxIdentifier(a.attrName), j.jsxExpressionContainer(j.literal(a.value))));
+			else if (typeof a.value === "boolean") openingAttrs.push(j.jsxAttribute(j.jsxIdentifier(a.attrName), j.jsxExpressionContainer(j.booleanLiteral(a.value))));
+			openingAttrs.push(j.jsxSpreadAttribute(propsId));
+			for (const [key, value] of Object.entries(staticAttrs)) if (typeof value === "string") openingAttrs.push(j.jsxAttribute(j.jsxIdentifier(key), j.literal(value)));
+			else if (typeof value === "number") openingAttrs.push(j.jsxAttribute(j.jsxIdentifier(key), j.jsxExpressionContainer(j.literal(value))));
+			else if (typeof value === "boolean") openingAttrs.push(j.jsxAttribute(j.jsxIdentifier(key), j.jsxExpressionContainer(j.booleanLiteral(value))));
+			openingAttrs.push(j.jsxSpreadAttribute(stylexPropsCall));
+			const jsx = j.jsxElement(j.jsxOpeningElement(jsxTagName, openingAttrs, true), null, []);
+			const fn = j.functionDeclaration(j.identifier(d.localName), [propsParamId], j.blockStatement([j.returnStatement(jsx)]));
+			if (polymorphicFnTypeParams) fn.typeParameters = polymorphicFnTypeParams;
+			emitted.push(fn);
 		}
 	}
 	if (emitted.length > 0) {
@@ -4588,6 +5184,55 @@ function universalSelectorUnsupportedWarning(loc) {
 	};
 }
 
+//#endregion
+//#region src/internal/dom-attrs.ts
+/**
+* DOM attribute filtering (inline-to-intrinsic only)
+*
+* When we inline a styled component into a native DOM/SVG element, we remove the component boundary.
+* That can turn "custom" props (which styled-components might have forwarded) into invalid DOM attrs.
+*
+* We keep a small allowlist here to avoid leaking obvious non-DOM props while preserving the props
+* commonly used in fixtures. This is intentionally conservative and centralized so it's easy to audit.
+*/
+const KNOWN_SAFE_DOM_ATTRS = new Set([
+	"className",
+	"style",
+	"ref",
+	"key",
+	"id",
+	"title",
+	"role",
+	"tabIndex",
+	"href",
+	"target",
+	"rel",
+	"type",
+	"name",
+	"value",
+	"placeholder",
+	"disabled",
+	"readOnly",
+	"htmlFor",
+	"src",
+	"alt",
+	"width",
+	"height",
+	"viewBox",
+	"d",
+	"x",
+	"y",
+	"rx",
+	"ry",
+	"fill"
+]);
+function isLikelyValidDomAttr(name) {
+	if (KNOWN_SAFE_DOM_ATTRS.has(name)) return true;
+	if (name.startsWith("data-") || name.startsWith("aria-")) return true;
+	if (/^on[A-Z]/.test(name)) return true;
+	return false;
+}
+
 //#endregion
 //#region src/transform.ts
 /**
@@ -4672,9 +5317,55 @@ function transformWithWarnings(file, api, options) {
 		}
 	};
 	const adapter = options.adapter;
-	if (!adapter || typeof adapter.resolveValue !== "function") throw new Error("Adapter must provide resolveValue(ctx) => { expr, imports } | null");
+	assertValidAdapter(adapter, "transform(options) - missing `adapter` (if you run the jscodeshift transform directly, pass options.adapter)");
 	const resolverImports = /* @__PURE__ */ new Map();
 	let hasChanges = false;
+	let bailDueToUndefinedResolveValue = false;
+	const formatResolveValueContext = (ctx) => {
+		const c = ctx;
+		const kind = c?.kind;
+		if (kind === "theme") return `kind=theme path=${JSON.stringify(String(c?.path ?? ""))}`;
+		if (kind === "cssVariable") {
+			const parts = [`kind=cssVariable name=${JSON.stringify(String(c?.name ?? ""))}`];
+			if (typeof c?.fallback === "string") parts.push(`fallback=${JSON.stringify(c.fallback)}`);
+			if (typeof c?.definedValue === "string") parts.push(`definedValue=${JSON.stringify(c.definedValue)}`);
+			return parts.join(" ");
+		}
+		if (kind === "call") {
+			const args = Array.isArray(c?.args) ? c.args : [];
+			return [
+				"kind=call",
+				`calleeImportedName=${JSON.stringify(String(c?.calleeImportedName ?? ""))}`,
+				`calleeSource=${JSON.stringify(c?.calleeSource ?? null)}`,
+				`callSiteFilePath=${JSON.stringify(String(c?.callSiteFilePath ?? ""))}`,
+				`args=${JSON.stringify(args)}`
+			].join(" ");
+		}
+		try {
+			return `ctx=${JSON.stringify(ctx)}`;
+		} catch {
+			return `ctx=${String(ctx)}`;
+		}
+	};
+	const resolveValueSafe = (ctx) => {
+		if (bailDueToUndefinedResolveValue) return null;
+		const res = adapter.resolveValue(ctx);
+		if (typeof res === "undefined") {
+			bailDueToUndefinedResolveValue = true;
+			warnings.push({
+				type: "dynamic-node",
+				feature: "adapter-resolveValue",
+				message: [
+					"Adapter.resolveValue returned undefined. This usually means your adapter forgot to return a value.",
+					"Return null to leave a value unresolved, or return { expr, imports } to resolve it.",
+					`Skipping transformation for this file to avoid producing incorrect output.`,
+					`resolveValue was called with: ${formatResolveValueContext(ctx)}`
+				].join(" ")
+			});
+			return null;
+		}
+		return res;
+	};
 	const styledImports = root.find(j.ImportDeclaration, { source: { value: "styled-components" } });
 	if (styledImports.length === 0) return {
 		code: null,
@@ -4710,7 +5401,8 @@ function transformWithWarnings(file, api, options) {
 	let keyframesNames = /* @__PURE__ */ new Set();
 	const parseExpr = (exprSource) => {
 		try {
-			let expr = j(`(${exprSource});`).find(j.ExpressionStatement).nodes()[0]?.expression ?? null;
+			const jParse = api.jscodeshift.withParser("tsx");
+			let expr = jParse(`(${exprSource});`).find(jParse.ExpressionStatement).nodes()[0]?.expression ?? null;
 			while (expr?.type === "ParenthesizedExpression") expr = expr.expression;
 			if (expr?.extra?.parenthesized) {
 				delete expr.extra.parenthesized;
@@ -4728,18 +5420,15 @@ function transformWithWarnings(file, api, options) {
 				rewriteCssVarsInStyleObject(v, definedVars, varsToDrop);
 				continue;
 			}
-			if (typeof v === "string") {
-				if (!adapter.resolveValue) continue;
-				obj[k] = rewriteCssVarsInString({
-					raw: v,
-					definedVars,
-					varsToDrop,
-					resolveValue: adapter.resolveValue,
-					addImport: (imp) => resolverImports.set(JSON.stringify(imp), imp),
-					parseExpr,
-					j
-				});
-			}
+			if (typeof v === "string") obj[k] = rewriteCssVarsInString({
+				raw: v,
+				definedVars,
+				varsToDrop,
+				resolveValue: resolveValueSafe,
+				addImport: (imp) => resolverImports.set(JSON.stringify(imp), imp),
+				parseExpr,
+				j
+			});
 		}
 	};
 	if (keyframesLocal) {
@@ -4908,6 +5597,10 @@ function transformWithWarnings(file, api, options) {
 			loc: componentSelectorLoc
 		});
 		else warnings.push(warning);
+		return {
+			code: null,
+			warnings
+		};
 	}
 	if (hasSpecificityHack) {
 		const warning = {
@@ -5009,7 +5702,7 @@ function transformWithWarnings(file, api, options) {
 		j,
 		root,
 		filePath: file.path,
-		resolveValue: adapter.resolveValue,
+		resolveValue: resolveValueSafe,
 		importMap,
 		warnings,
 		resolverImports,
@@ -5027,7 +5720,7 @@ function transformWithWarnings(file, api, options) {
 	const resolvedStyleObjects = lowered.resolvedStyleObjects;
 	const descendantOverrides = lowered.descendantOverrides;
 	const ancestorSelectorParents = lowered.ancestorSelectorParents;
-	if (lowered.bail) return {
+	if (lowered.bail || bailDueToUndefinedResolveValue) return {
 		code: null,
 		warnings
 	};
@@ -5094,6 +5787,7 @@ function transformWithWarnings(file, api, options) {
 		if (new Set(styledDecls.map((d) => d.localName)).has(obj.name)) componentsWithStaticProps.add(obj.name);
 	});
 	for (const decl of styledDecls) {
+		if (decl.base.kind === "intrinsic" && (decl.attrsInfo?.conditionalAttrs?.length ?? 0) > 0) decl.needsWrapperComponent = true;
 		if (decl.shouldForwardProp) 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;
@@ -5155,11 +5849,7 @@ function transformWithWarnings(file, api, options) {
 			decl.supportsExternalStyles = false;
 			continue;
 		}
-		if (!adapter.shouldSupportExternalStyles) {
-			decl.supportsExternalStyles = true;
-			continue;
-		}
-		decl.supportsExternalStyles = adapter.shouldSupportExternalStyles({
+		decl.supportsExternalStyles = adapter.shouldSupportExternalStyling({
 			filePath: file.path,
 			componentName: decl.localName,
 			exportName: exportInfo.exportName,
@@ -5258,7 +5948,10 @@ function transformWithWarnings(file, api, options) {
 			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) decl.needsWrapperComponent = true;
+		}).size() > 0) {
+			decl.usedAsValue = true;
+			decl.needsWrapperComponent = true;
+		}
 	}
 	for (const decl of styledDecls) if (decl.base.kind === "component") {
 		const baseDecl = declByLocal.get(decl.base.ident);
@@ -5295,7 +5988,7 @@ function transformWithWarnings(file, api, options) {
 			staticPropertyNames.set(componentName, names);
 		}
 		if (baseComponentNames.has(componentName)) return;
-		if (exportedComponents.has(componentName)) {
+		if (exportedComponents.has(componentName) || extendedBy.has(componentName)) {
 			const existing = staticPropertyAssignments.get(componentName) ?? [];
 			existing.push(p.node);
 			staticPropertyAssignments.set(componentName, existing);
@@ -5308,16 +6001,14 @@ function transformWithWarnings(file, api, options) {
 		const baseComponentName = 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 stmt = j.expressionStatement(j.assignmentExpression("=", j.memberExpression(j.identifier(decl.localName), j.identifier(propName)), j.memberExpression(j.identifier(baseComponentName), j.identifier(propName))));
+			const rhs = j(`const __x = (${baseComponentName} as any).${propName};`).get().node.program.body[0].declarations[0].init;
+			const stmt = j.expressionStatement(j.assignmentExpression("=", j.memberExpression(j.identifier(decl.localName), j.identifier(propName)), rhs));
 			inheritanceStatements.push(stmt);
 		}
-		if (inheritanceStatements.length > 0) {
-			const existing = staticPropertyAssignments.get(decl.localName) ?? [];
-			existing.push(...inheritanceStatements);
-			staticPropertyAssignments.set(decl.localName, existing);
-		}
+		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);
@@ -5528,6 +6219,9 @@ function transformWithWarnings(file, api, options) {
 				}
 				if (!variantProps.has(n)) {
 					if (n.startsWith("$")) continue;
+					if (decl.base.kind === "intrinsic") {
+						if (!isLikelyValidDomAttr(n)) continue;
+					}
 					keptAfterVariants.push(attr);
 					continue;
 				}
@@ -5554,7 +6248,6 @@ function transformWithWarnings(file, api, options) {
 		filePath: file.path,
 		styledDecls,
 		wrapperNames,
-		expressionAsWrapperNames,
 		patternProp,
 		exportedComponents,
 		stylesIdentifier
@@ -5693,6 +6386,10 @@ function toSuffixFromProp(propName) {
 	const raw = propName.startsWith("$") ? propName.slice(1) : propName;
 	if (!raw) return "Variant";
 	const trimmed = raw.trim();
+	if (trimmed.includes("&&")) {
+		const parts = trimmed.split("&&").map((s) => s.trim()).filter(Boolean);
+		if (parts.length) return parts.map((p) => toSuffixFromProp(p)).join("");
+	}
 	if (trimmed.startsWith("!")) return `Not${toSuffixFromProp(trimmed.slice(1).trim().replace(/^\(|\)$/g, ""))}`;
 	const eq = trimmed.includes("!==") ? "!==" : trimmed.includes("===") ? "===" : null;
 	if (eq) {