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

package/dist/transform.mjs

@@ -1,10 +1,11 @@
-import { t as createModuleResolver } from "./resolve-imports-BlxKezSJ.mjs";
+import { t as createModuleResolver } from "./resolve-imports-DgSAddIF.mjs";
 import { a as assertValidAdapter, i as isDirectionalResult, n as DEFAULT_THEME_HOOK, t as mergeMarkerDeclarations } from "./merge-markers-BC5YNB7D.mjs";
-import { a as Logger, i as resolveBarrelReExport, r as findImportSource } from "./extract-external-interface-CdHbvfxu.mjs";
+import { i as getReExportedSourceName, o as resolveBarrelReExportBinding, r as findImportSource, s as Logger, t as fileExports } from "./extract-external-interface-DbzIPO0Z.mjs";
 import { n as toRealPath, t as isRelativeSpecifier } from "./path-utils-BIpoL4Ue.mjs";
-import { a as isBackgroundImageValue, c as isSingleBackgroundComponent, d as kebabToCamelCase, f as looksLikeLength, h as sanitizeIdentifier, i as getCommentBody, l as isStyleSectionMarkerComment, m as normalizeWhitespace, n as capitalize, o as isJSDocBlockComment, p as lowerFirst, r as escapeRegex, s as isPrettierIgnoreComment, t as camelToKebabCase, u as isValidIdentifierName } from "./string-utils-DD9wdRHW.mjs";
+import { a as isBackgroundImageValue, c as isSingleBackgroundComponent, d as kebabToCamelCase, f as looksLikeLength, h as sanitizeIdentifier, i as getCommentBody, l as isStyleSectionMarkerComment, m as normalizeWhitespace, n as capitalize, o as isJSDocBlockComment, p as lowerFirst, r as escapeRegex, s as isPrettierIgnoreComment, t as camelToKebabCase, u as isValidIdentifierName$1 } from "./string-utils-DD9wdRHW.mjs";
 import { a as PLACEHOLDER_RE, i as readStaticJsxLiteral, n as createComponentPropUsageInfo, o as parseStyledTemplateLiteral, r as mergeComponentPropUsage, s as terminateStandaloneInterpolationStatements, t as KNOWN_NON_ELEMENT_PROPS } from "./prop-usage-D6ZiDfzz.mjs";
 import { t as isSelectorContext } from "./selector-context-heuristic-6_jSRGkZ.mjs";
+import { createRequire } from "node:module";
 import jscodeshift from "jscodeshift";
 import { basename, dirname, isAbsolute, join, relative, resolve, sep } from "node:path";
 import { existsSync, readFileSync, realpathSync } from "node:fs";
@@ -749,23 +750,21 @@ function rewriteCssVarsInStringImpl(args) {
 */
 function extractRootAndPath(node) {
 	if (!node || typeof node !== "object") return null;
-	const typed = node;
 	if (isIdentifierNode(node)) return {
 		rootName: node.name,
 		rootNode: node,
 		path: []
 	};
-	if (typed.type !== "MemberExpression" && typed.type !== "OptionalMemberExpression") return null;
+	if (!isMemberExpressionNode(node)) return null;
 	const parts = [];
 	let cur = node;
 	while (cur && typeof cur === "object") {
-		const curTyped = cur;
-		if (curTyped.type !== "MemberExpression" && curTyped.type !== "OptionalMemberExpression") break;
-		if (curTyped.computed) return null;
-		const prop = curTyped.property;
+		if (!isMemberExpressionNode(cur)) break;
+		if (cur.computed) return null;
+		const prop = cur.property;
 		if (!isIdentifierNode(prop)) return null;
 		parts.unshift(prop.name);
-		cur = curTyped.object;
+		cur = cur.object;
 	}
 	if (!cur || typeof cur !== "object") return null;
 	if (!isIdentifierNode(cur)) return null;
@@ -849,6 +848,26 @@ function isIdentifierNode(node) {
 function isCallExpressionNode(node) {
 	return !!node && typeof node === "object" && node.type === "CallExpression";
 }
+/** Type guard for `MemberExpression` and `OptionalMemberExpression` nodes. */
+function isMemberExpressionNode(node) {
+	if (!node || typeof node !== "object") return false;
+	const type = node.type;
+	return type === "MemberExpression" || type === "OptionalMemberExpression";
+}
+/**
+* Reads `object.property` when both sides are identifiers and the property is
+* non-optional and non-computed. Returns null for optional/computed paths the
+* caller cannot safely treat as a static member reference.
+*/
+function getIdentifierMemberPropertyName(node, objectName) {
+	if (!isMemberExpressionNode(node) || node.type !== "MemberExpression" || node.computed) return null;
+	if (!isIdentifierNode(node.object) || node.object.name !== objectName) return null;
+	return isIdentifierNode(node.property) ? node.property.name : null;
+}
+/** Matches a static `objectName.propertyName` member reference. */
+function isIdentifierMemberExpression(node, objectName, propertyName) {
+	return getIdentifierMemberPropertyName(node, objectName) === propertyName;
+}
 /**
 * Type guard for AstPath objects (jscodeshift path wrappers).
 */
@@ -1312,7 +1331,7 @@ function isLogicalExpressionNode(node) {
 * responsible for re-wrapping the resolved value with the original fallback.
 */
 function unwrapLogicalFallback(expr) {
-	if (isLogicalExpressionNode(expr) && (expr.operator === "??" || expr.operator === "||") && isMemberOrOptionalMemberExpression(expr.left)) return expr.left;
+	if (isLogicalExpressionNode(expr) && (expr.operator === "??" || expr.operator === "||") && isMemberExpressionNode(expr.left)) return expr.left;
 	return null;
 }
 /**
@@ -1364,11 +1383,6 @@ function isJsxIdentifierNode(node) {
 	const typed = node;
 	return typed.type === "JSXIdentifier" && typeof typed.name === "string";
 }
-function isMemberOrOptionalMemberExpression(node) {
-	if (!node || typeof node !== "object") return false;
-	const t = node.type;
-	return t === "MemberExpression" || t === "OptionalMemberExpression";
-}
 /** Allow `void 0`, `void null`, `void ""`, `void 1`, `void false` as empty. */
 function isTriviallyPureVoidArg(arg) {
 	if (!arg || typeof arg !== "object") return false;
@@ -2155,6 +2169,8 @@ var TransformContext = class {
 	ancestorAttrsByStyleKey;
 	/** Adjacent-sibling selectors (`& + &`) deferred for same-file JSX adjacency analysis. */
 	deferredAdjacentSiblingWarnings;
+	/** Same-file element-selector overrides deferred for local JSX topology proof. */
+	deferredLocalElementWarnings;
 	/** Sidecar .stylex.ts files (defineMarker declarations), populated by emitStylesStep */
 	sidecarFiles;
 	/** Bridge components emitted for unconverted consumer selectors. */
@@ -2692,6 +2708,116 @@ function canDowngradeStyleFnIntrinsicWrapper(decl, exportedComponents, extendedB
 	return true;
 }
 //#endregion
+//#region src/internal/analyze-before-emit/exported-components.ts
+function collectExportedComponents(root, j, declByLocal) {
+	const exportedComponents = /* @__PURE__ */ new Map();
+	root.find(j.ExportNamedDeclaration).forEach((p) => {
+		const decl = p.node.declaration;
+		if (decl?.type === "VariableDeclaration") for (const d of decl.declarations) {
+			if (d.type !== "VariableDeclarator") continue;
+			const name = getIdentifierName(d.id);
+			if (name && declByLocal.has(name)) exportedComponents.set(name, {
+				exportName: name,
+				isDefault: false,
+				isSpecifier: false
+			});
+		}
+		for (const spec of p.node.specifiers ?? []) {
+			if (spec.type !== "ExportSpecifier") continue;
+			const localName = getIdentifierName(spec.local);
+			if (localName && declByLocal.has(localName)) {
+				const exportName = getIdentifierName(spec.exported) ?? localName;
+				exportedComponents.set(localName, {
+					exportName,
+					isDefault: false,
+					isSpecifier: true
+				});
+			}
+		}
+	});
+	collectDottedExportedComponents(root, j, declByLocal, exportedComponents);
+	root.find(j.ExportDefaultDeclaration).forEach((p) => {
+		const name = getIdentifierName(p.node.declaration);
+		if (name && declByLocal.has(name)) exportedComponents.set(name, {
+			exportName: "default",
+			isDefault: true,
+			isSpecifier: false
+		});
+	});
+	return exportedComponents;
+}
+function collectDottedExportedComponents(root, j, declByLocal, exportedComponents) {
+	const setDottedExport = (localName, exportName) => {
+		if (!declByLocal.has(localName)) return;
+		const existing = exportedComponents.get(localName)?.exportName;
+		if (existing && existing.split(".").length > exportName.split(".").length) return;
+		exportedComponents.set(localName, {
+			exportName,
+			isDefault: false,
+			isSpecifier: false
+		});
+	};
+	const collectObjectProperties = (objectExpression, prefix) => {
+		const objectNode = objectExpression;
+		if (objectNode?.type !== "ObjectExpression" || !Array.isArray(objectNode.properties)) return;
+		for (const property of objectNode.properties) {
+			if (property?.type !== "Property" && property?.type !== "ObjectProperty") continue;
+			const keyName = getIdentifierName(property.key);
+			if (!keyName) continue;
+			const valueName = getIdentifierName(property.value);
+			if (valueName) {
+				setDottedExport(valueName, `${prefix}.${keyName}`);
+				continue;
+			}
+			collectObjectProperties(property.value, `${prefix}.${keyName}`);
+		}
+	};
+	root.find(j.ExportNamedDeclaration).forEach((p) => {
+		const declaration = p.node.declaration;
+		if (declaration?.type !== "VariableDeclaration") return;
+		for (const declarator of declaration.declarations) {
+			if (declarator.type !== "VariableDeclarator") continue;
+			const exportName = getIdentifierName(declarator.id);
+			if (exportName) collectObjectProperties(declarator.init, exportName);
+		}
+	});
+	const collectNamespaceExports = (node, namespacePath) => {
+		const current = node;
+		if (!current) return;
+		if (current.type === "TSModuleDeclaration") {
+			const namespaceName = getIdentifierName(current.id);
+			if (!namespaceName) return;
+			const nextPath = [...namespacePath, namespaceName];
+			if (current.body?.type === "TSModuleBlock") for (const statement of current.body.body ?? []) collectNamespaceExports(statement, nextPath);
+			else collectNamespaceExports(current.body, nextPath);
+			return;
+		}
+		if (current.type !== "ExportNamedDeclaration") return;
+		const declaration = current.declaration;
+		if (!declaration) return;
+		if (declaration.type === "TSModuleDeclaration") {
+			collectNamespaceExports(declaration, namespacePath);
+			return;
+		}
+		if (declaration.type === "FunctionDeclaration") {
+			const localName = getIdentifierName(declaration.id);
+			if (localName) setDottedExport(localName, [...namespacePath, localName].join("."));
+			return;
+		}
+		if (declaration.type === "VariableDeclaration" && Array.isArray(declaration.declarations)) for (const declarator of declaration.declarations) {
+			const localName = getIdentifierName(declarator.id);
+			if (localName) setDottedExport(localName, [...namespacePath, localName].join("."));
+		}
+	};
+	root.find(j.TSModuleDeclaration).forEach((p) => {
+		collectNamespaceExports(p.node, []);
+	});
+}
+function getIdentifierName(node) {
+	const n = node;
+	return n?.type === "Identifier" && n.name ? n.name : null;
+}
+//#endregion
 //#region src/internal/utilities/bridge-classname.ts
 /**
 * Utilities for generating deterministic bridge classNames and export names.
@@ -2757,7 +2883,7 @@ function parseVariantWhenToAst(j, when, booleanProps) {
 	const buildMemberExpr = (raw) => {
 		if (!raw.includes(".")) return null;
 		const parts = raw.split(".").map((part) => part.trim()).filter(Boolean);
-		if (parts.length < 2 || parts.some((part) => !isValidIdentifierName(part))) return null;
+		if (parts.length < 2 || parts.some((part) => !isValidIdentifierName$1(part))) return null;
 		return parts.slice(1).reduce((acc, part) => j.memberExpression(acc, j.identifier(part)), j.identifier(parts[0]));
 	};
 	const parsePropRef = (raw) => {
@@ -2769,14 +2895,14 @@ function parseVariantWhenToAst(j, when, booleanProps) {
 		if (trimmedRaw.includes(".")) {
 			const parts = trimmedRaw.split(".").map((part) => part.trim()).filter(Boolean);
 			const last = parts[parts.length - 1];
-			if (!last || !isValidIdentifierName(last)) return {
+			if (!last || !isValidIdentifierName$1(last)) return {
 				propName: null,
 				expr: j.identifier(trimmedRaw)
 			};
 			const root = parts[0];
 			if (root === "props" || root === "p") {
 				const propRoot = parts[1];
-				if (!propRoot || !isValidIdentifierName(propRoot)) return {
+				if (!propRoot || !isValidIdentifierName$1(propRoot)) return {
 					propName: null,
 					expr: j.identifier(trimmedRaw)
 				};
@@ -3625,7 +3751,7 @@ function registerImports(imports, resolverImports) {
 }
 /** Returns true if the AST node is a `MemberExpression` or `OptionalMemberExpression`. */
 function isMemberExpression(node) {
-	return node?.type === "MemberExpression" || node?.type === "OptionalMemberExpression";
+	return isMemberExpressionNode(node);
 }
 /** Returns true for at-rules the codemod can transform (`@media`, `@container`). */
 function isSupportedAtRule(atRule) {
@@ -3936,6 +4062,255 @@ function collectInlineStylePropNames(inlineStyleProps) {
 	return [...names];
 }
 //#endregion
+//#region src/internal/lower-rules/shared.ts
+function findPlaceholderBlock(rawCss, placeholder) {
+	let searchFrom = 0;
+	while (true) {
+		const start = rawCss.indexOf(placeholder, searchFrom);
+		if (start < 0) return null;
+		const blockOpen = readNextNonWhitespace(rawCss, start + placeholder.length);
+		if (blockOpen?.value !== "{") {
+			searchFrom = start + placeholder.length;
+			continue;
+		}
+		return {
+			start,
+			end: blockOpen.index
+		};
+	}
+}
+function findPreviousOpeningBraceBeforeSelector(rawCss, position) {
+	let depth = 0;
+	for (let i = position - 1; i >= 0; i--) {
+		const ch = rawCss[i];
+		if (ch === ";") continue;
+		if (ch === "}") {
+			depth++;
+			continue;
+		}
+		if (ch === "{") {
+			if (depth > 0) {
+				depth--;
+				continue;
+			}
+			return i;
+		}
+	}
+	return null;
+}
+function readSelectorBeforeBlock(rawCss, blockStart) {
+	let selectorStart = blockStart - 1;
+	while (selectorStart >= 0) {
+		const ch = rawCss[selectorStart];
+		if (ch === "}" || ch === "{" || ch === ";") break;
+		selectorStart--;
+	}
+	return rawCss.slice(selectorStart + 1, blockStart).trim();
+}
+function readPrefixSinceLastBlockBoundary(rawCss, position) {
+	let start = position - 1;
+	while (start >= 0) {
+		const ch = rawCss[start];
+		if (ch === "{" || ch === "}") break;
+		start--;
+	}
+	return rawCss.slice(start + 1, position);
+}
+function parseSimpleParentPseudoSelectorList(selectorText) {
+	const parts = selectorText.split(",").map((part) => part.trim()).filter(Boolean);
+	if (parts.length === 0) return null;
+	const pseudos = [];
+	for (const part of parts) {
+		const match = part.match(/^&(:[a-z-]+(?:\([^)]*\))?)$/i);
+		if (!match?.[1]) return null;
+		pseudos.push(match[1]);
+	}
+	return pseudos;
+}
+/**
+* Builds a `stylex.when.ancestor(pseudo, marker?)` AST call expression.
+*/
+function makeAncestorKeyExpr(j, pseudo, markerVarName) {
+	const callArgs = [j.literal(pseudo)];
+	if (markerVarName) callArgs.push(j.identifier(markerVarName));
+	return j.callExpression(j.memberExpression(j.memberExpression(j.identifier("stylex"), j.identifier("when")), j.identifier("ancestor")), callArgs);
+}
+/**
+* Builds a `stylex.when.descendant(":is(*)", marker)` AST call expression.
+* Used for `&:has(${Component})` selectors where styles apply to self
+* when a descendant matching the marker is present.
+* Uses `:is(*)` as a required pseudo argument (StyleX API mandates a pseudo string).
+*/
+function makeDescendantKeyExpr(j, markerVarName) {
+	return j.callExpression(j.memberExpression(j.memberExpression(j.identifier("stylex"), j.identifier("when")), j.identifier("descendant")), [j.literal(":is(*)"), j.identifier(markerVarName)]);
+}
+/**
+* Creates an AST key node for a CSS property name.
+* For CSS variables (e.g., --component-width), returns a string literal.
+* For regular property names (e.g., backgroundColor), returns an identifier.
+*/
+function makeCssPropKey(j, prop) {
+	if (!prop.match(/^[a-zA-Z_$][a-zA-Z0-9_$]*$/)) return j.literal(prop);
+	return j.identifier(prop);
+}
+/**
+* Converts a CSS property name to a valid JavaScript identifier.
+* For CSS variables (e.g., --component-width), converts to camelCase (componentWidth).
+* For regular property names (e.g., backgroundColor), returns as-is.
+*
+* When `avoidNames` is provided, appends "Value" to the result if it would
+* conflict with an existing binding (e.g., a top-level import). This prevents
+* `no-shadow` lint errors when the generated identifier becomes a function
+* parameter name.
+*/
+function cssPropertyToIdentifier(prop, avoidNames) {
+	let name;
+	if (prop.startsWith("--")) name = prop.slice(2).replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+	else name = prop;
+	if (avoidNames?.has(name)) return `${name}Value`;
+	return name;
+}
+/**
+* Get or create a pseudo bucket for a relation override style key.
+* Registers the override in `relationOverrides` if not already present.
+*/
+function getOrCreateRelationOverrideBucket(overrideStyleKey, parentStyleKey, childStyleKey, ancestorPseudo, relationOverrides, relationOverridePseudoBuckets, childExtraStyleKeys) {
+	if (!relationOverridePseudoBuckets.has(overrideStyleKey)) relationOverrides.push({
+		parentStyleKey,
+		childStyleKey,
+		overrideStyleKey,
+		childExtraStyleKeys
+	});
+	else if (childExtraStyleKeys?.length) {
+		const existing = relationOverrides.find((o) => o.overrideStyleKey === overrideStyleKey);
+		if (existing && !existing.childExtraStyleKeys?.length) existing.childExtraStyleKeys = childExtraStyleKeys;
+	}
+	let pseudoBuckets = relationOverridePseudoBuckets.get(overrideStyleKey);
+	if (!pseudoBuckets) {
+		pseudoBuckets = /* @__PURE__ */ new Map();
+		relationOverridePseudoBuckets.set(overrideStyleKey, pseudoBuckets);
+	}
+	let bucket = pseudoBuckets.get(ancestorPseudo);
+	if (!bucket) {
+		bucket = {};
+		pseudoBuckets.set(ancestorPseudo, bucket);
+	}
+	return bucket;
+}
+function readNextNonWhitespace(rawCss, position) {
+	for (let i = position; i < rawCss.length; i++) {
+		const ch = rawCss[i];
+		if (!/\s/.test(ch)) return {
+			index: i,
+			value: ch
+		};
+	}
+	return null;
+}
+/**
+* Creates an object property for a CSS property with shorthand support.
+* Uses shorthand ({ color }) for regular properties when key matches value,
+* but never for CSS variables (which need string literal keys).
+*/
+function makeCssProperty(j, cssProp, valueIdentifierName) {
+	const key = makeCssPropKey(j, cssProp);
+	const p = j.property("init", key, j.identifier(valueIdentifierName));
+	if (key.type === "Identifier" && key.name === valueIdentifierName) p.shorthand = true;
+	return p;
+}
+//#endregion
+//#region src/internal/lower-rules/relation-overrides.ts
+const finalizeRelationOverrides = (args) => {
+	const { j, relationOverridePseudoBuckets, relationOverrides, resolvedStyleObjects, makeCssPropKey, childPseudoMarkers } = args;
+	if (relationOverridePseudoBuckets.size === 0) return;
+	const overrideToChildKeys = /* @__PURE__ */ new Map();
+	const overrideToMarker = /* @__PURE__ */ new Map();
+	for (const o of relationOverrides) {
+		overrideToChildKeys.set(o.overrideStyleKey, [o.childStyleKey, ...o.childExtraStyleKeys ?? []]);
+		if (o.markerVarName) overrideToMarker.set(o.overrideStyleKey, o.markerVarName);
+	}
+	for (const [overrideKey, pseudoBuckets] of relationOverridePseudoBuckets.entries()) {
+		const props = buildRelationOverrideProperties({
+			j,
+			pseudoBuckets,
+			childStyleObjects: buildChildStyleObjectList(overrideToChildKeys.get(overrideKey) ?? [], resolvedStyleObjects),
+			makeCssPropKey,
+			childPseudos: childPseudoMarkers.get(overrideKey),
+			markerVarName: overrideToMarker.get(overrideKey)
+		});
+		if (props.length > 0) resolvedStyleObjects.set(overrideKey, j.objectExpression(props));
+	}
+};
+function buildRelationOverrideProperties(args) {
+	const { j, pseudoBuckets, childStyleObjects = [], makeCssPropKey, childPseudos, markerVarName } = args;
+	const props = [];
+	const baseBucket = pseudoBuckets.get(null) ?? {};
+	const isExpressionNode = (v) => isAstNode(v);
+	const allPropNames = /* @__PURE__ */ new Set();
+	for (const bucket of pseudoBuckets.values()) for (const prop of Object.keys(bucket)) allPropNames.add(prop);
+	for (const prop of allPropNames) {
+		let baseVal = baseBucket[prop];
+		if (baseVal === void 0) for (const childStyle of childStyleObjects) {
+			const val = childStyle[prop];
+			if (val !== void 0) {
+				baseVal = val;
+				break;
+			}
+		}
+		baseVal = extractScalarDefault$1(baseVal);
+		const pseudoValues = [];
+		for (const [pseudo, bucket] of pseudoBuckets.entries()) {
+			if (pseudo === null) continue;
+			const val = bucket[prop];
+			if (val !== void 0) pseudoValues.push({
+				pseudo,
+				value: val
+			});
+		}
+		if (pseudoValues.length > 0) {
+			const objProps = [j.property("init", j.identifier("default"), isExpressionNode(baseVal) ? baseVal : literalToAst(j, baseVal ?? null))];
+			for (const { pseudo, value } of pseudoValues) {
+				const valExpr = isExpressionNode(value) ? value : literalToAst(j, value);
+				if (childPseudos?.has(pseudo)) objProps.push(j.property("init", j.literal(pseudo), valExpr));
+				else {
+					const ancestorKey = makeAncestorKeyExpr(j, pseudo, markerVarName);
+					const propNode = Object.assign(j.property("init", ancestorKey, valExpr), { computed: true });
+					objProps.push(propNode);
+				}
+			}
+			props.push(j.property("init", makeCssPropKey(j, prop), j.objectExpression(objProps)));
+		} else if (baseVal !== void 0) props.push(j.property("init", makeCssPropKey(j, prop), isExpressionNode(baseVal) ? baseVal : literalToAst(j, baseVal)));
+	}
+	return props;
+}
+/**
+* If a value is a pseudo/media map (e.g., `{ default: "gray", ":focus": "orange" }`),
+* extracts its scalar `default` property. AST nodes and non-map values pass through.
+*/
+function extractScalarDefault$1(value) {
+	if (!value || typeof value !== "object" || Array.isArray(value) || isAstNode(value)) {
+		if (isAstNode(value) && value.type === "ObjectExpression") {
+			const objectExpression = value;
+			for (const property of objectExpression.properties ?? []) {
+				if (property.type !== "Property") continue;
+				if ((property.key?.type === "Identifier" ? property.key.name : property.key?.type === "Literal" || property.key?.type === "StringLiteral" ? String(property.key.value) : null) === "default") return property.value;
+			}
+		}
+		return value;
+	}
+	const map = value;
+	if ("default" in map) return map.default;
+	return value;
+}
+function buildChildStyleObjectList(childKeys, resolvedStyleObjects) {
+	const childStyleObjects = [];
+	for (const key of childKeys) {
+		const obj = resolvedStyleObjects.get(key);
+		if (obj && typeof obj === "object" && !isAstNode(obj)) childStyleObjects.push(obj);
+	}
+	return childStyleObjects;
+}
+//#endregion
 //#region src/internal/transform-steps/analyze-before-emit.ts
 const INLINE_USAGE_THRESHOLD = 1;
 /**
@@ -3959,44 +4334,7 @@ function analyzeBeforeEmitStep(ctx) {
 	}
 	ctx.declByLocal = declByLocal;
 	ctx.extendedBy = extendedBy;
-	const getIdentifierName = (node) => {
-		const n = node;
-		return n?.type === "Identifier" && n.name ? n.name : null;
-	};
-	const exportedComponents = /* @__PURE__ */ new Map();
-	root.find(j.ExportNamedDeclaration).forEach((p) => {
-		const decl = p.node.declaration;
-		if (decl?.type === "VariableDeclaration") for (const d of decl.declarations) {
-			if (d.type !== "VariableDeclarator") continue;
-			const name = getIdentifierName(d.id);
-			if (name && declByLocal.has(name)) exportedComponents.set(name, {
-				exportName: name,
-				isDefault: false,
-				isSpecifier: false
-			});
-		}
-		for (const spec of p.node.specifiers ?? []) {
-			if (spec.type !== "ExportSpecifier") continue;
-			const localName = getIdentifierName(spec.local);
-			if (localName && declByLocal.has(localName)) {
-				const exportName = getIdentifierName(spec.exported) ?? localName;
-				exportedComponents.set(localName, {
-					exportName,
-					isDefault: false,
-					isSpecifier: true
-				});
-			}
-		}
-	});
-	collectDottedExportedComponents(root, j, declByLocal, exportedComponents);
-	root.find(j.ExportDefaultDeclaration).forEach((p) => {
-		const name = getIdentifierName(p.node.declaration);
-		if (name && declByLocal.has(name)) exportedComponents.set(name, {
-			exportName: "default",
-			isDefault: true,
-			isSpecifier: false
-		});
-	});
+	const exportedComponents = collectExportedComponents(root, j, declByLocal);
 	for (const decl of styledDecls) decl.isExported = exportedComponents.has(decl.localName);
 	ctx.exportedComponents = exportedComponents;
 	const componentsWithStaticProps = /* @__PURE__ */ new Set();
@@ -4016,11 +4354,12 @@ function analyzeBeforeEmitStep(ctx) {
 		if (decl.base.kind === "component") {
 			const baseDecl = declByLocal.get(decl.base.ident);
 			if (baseDecl?.attrsInfo) decl.attrsInfo = mergeInheritedAttrsInfo(baseDecl.attrsInfo, decl.attrsInfo);
-			if (decl.attrsInfo && ((decl.attrsInfo.defaultAttrs?.length ?? 0) > 0 || Object.keys(decl.attrsInfo.staticAttrs ?? {}).length > 0 || (decl.attrsInfo.attrsDynamicStyles?.length ?? 0) > 0 || decl.attrsInfo.attrsStaticStyles && Object.keys(decl.attrsInfo.attrsStaticStyles).length > 0)) decl.needsWrapperComponent = true;
+			if (decl.attrsInfo && ((decl.attrsInfo.defaultAttrs?.length ?? 0) > 0 || (decl.attrsInfo.dynamicAttrs?.length ?? 0) > 0 || Object.keys(decl.attrsInfo.staticAttrs ?? {}).length > 0 || !!decl.attrsInfo.attrsStaticStyleExpr || (decl.attrsInfo.attrsDynamicStyles?.length ?? 0) > 0 || decl.attrsInfo.attrsStaticStyles && Object.keys(decl.attrsInfo.attrsStaticStyles).length > 0)) decl.needsWrapperComponent = true;
 		}
 		const hadWrapperBeforePrepass = decl.needsWrapperComponent;
 		if (decl.base.kind === "intrinsic" && (decl.attrsInfo?.conditionalAttrs?.length ?? 0) > 0) decl.needsWrapperComponent = true;
 		if (decl.base.kind === "intrinsic" && (decl.attrsInfo?.defaultAttrs?.length ?? 0) > 0) decl.needsWrapperComponent = true;
+		if (decl.base.kind === "intrinsic" && (decl.attrsInfo?.dynamicAttrs?.length ?? 0) > 0) decl.needsWrapperComponent = true;
 		const resolverOnlyShouldForwardProp = !!decl.inlinedBaseComponent && !decl.shouldForwardPropFromWithConfig;
 		if (decl.shouldForwardProp && !resolverOnlyShouldForwardProp) decl.needsWrapperComponent = true;
 		if (decl.base.kind === "intrinsic" && decl.withConfig?.componentId) decl.needsWrapperComponent = true;
@@ -4030,7 +4369,7 @@ function analyzeBeforeEmitStep(ctx) {
 		if (!hadWrapperBeforePrepass && decl.needsWrapperComponent) wrapperForcedByPrepass.add(decl.localName);
 		if (ctx.bridgeComponentNames?.has(decl.localName) || ctx.bridgeComponentNames?.has("default") && exportedComponents.get(decl.localName)?.isDefault) decl.bridgeClassName = generateBridgeClassName(resolve(file.path), decl.localName);
 	}
-	for (const decl of styledDecls) if (decl.needsWrapperComponent && !wrapperForcedByPrepass.has(decl.localName) && !decl.isCssHelper && !decl.isDirectJsxResolution && decl.base.kind === "intrinsic" && !decl.bridgeClassName && !decl.attrWrapper && (decl.styleFnFromProps ?? []).length === 0 && !decl.needsUseThemeHook?.length && Object.keys(decl.variantStyleKeys ?? {}).length === 0 && !decl.enumVariant && !decl.inlineStyleProps?.length && (decl.attrsInfo?.conditionalAttrs?.length ?? 0) === 0 && (decl.attrsInfo?.defaultAttrs?.length ?? 0) === 0 && (decl.attrsInfo?.invertedBoolAttrs?.length ?? 0) === 0 && !(decl.extraStylexPropsArgs ?? []).some((arg) => arg.when) && ((decl.extraStylexPropsArgs ?? []).length > 0 || (decl.extraStyleKeys ?? []).length > 0 || (decl.extraClassNames ?? []).length > 0)) decl.needsWrapperComponent = false;
+	for (const decl of styledDecls) if (decl.needsWrapperComponent && !wrapperForcedByPrepass.has(decl.localName) && !decl.isCssHelper && !decl.isDirectJsxResolution && decl.base.kind === "intrinsic" && !decl.bridgeClassName && !decl.attrWrapper && (decl.styleFnFromProps ?? []).length === 0 && !decl.needsUseThemeHook?.length && Object.keys(decl.variantStyleKeys ?? {}).length === 0 && !decl.enumVariant && !decl.inlineStyleProps?.length && (decl.attrsInfo?.conditionalAttrs?.length ?? 0) === 0 && (decl.attrsInfo?.defaultAttrs?.length ?? 0) === 0 && (decl.attrsInfo?.dynamicAttrs?.length ?? 0) === 0 && (decl.attrsInfo?.invertedBoolAttrs?.length ?? 0) === 0 && !(decl.extraStylexPropsArgs ?? []).some((arg) => arg.when) && ((decl.extraStylexPropsArgs ?? []).length > 0 || (decl.extraStyleKeys ?? []).length > 0 || (decl.extraClassNames ?? []).length > 0)) decl.needsWrapperComponent = false;
 	for (const decl of styledDecls) {
 		if (!canDowngradeStyleFnOnlyWrapper(decl, wrapperForcedByPrepass)) continue;
 		decl.needsWrapperComponent = false;
@@ -4057,6 +4396,7 @@ function analyzeBeforeEmitStep(ctx) {
 		if (decl.attrsInfo) {
 			if (decl.attrsInfo.conditionalAttrs?.length) return false;
 			if (decl.attrsInfo.defaultAttrs?.length) return false;
+			if (decl.attrsInfo.dynamicAttrs?.length) return false;
 			if (decl.attrsInfo.invertedBoolAttrs?.length) return false;
 		}
 		return true;
@@ -4114,6 +4454,24 @@ function analyzeBeforeEmitStep(ctx) {
 			ref: foundRef
 		};
 	};
+	const isInlineableLocalElementTarget = (targetDecl) => {
+		const { className, style, ref } = getJsxAttributeUsage(targetDecl.localName);
+		return targetDecl.base.kind === "intrinsic" && !targetDecl.isExported && !targetDecl.needsWrapperComponent && !className && !style && !ref && !hasSpreadInJsx(root, j, targetDecl.localName);
+	};
+	const hasNonJsxComponentValueReference = (name) => root.find(j.Identifier, { name }).filter((p) => {
+		if (p.parentPath?.node?.type === "VariableDeclarator" && p.parentPath.node.id === p.node) return false;
+		if (p.parentPath?.node?.type === "JSXOpeningElement" || p.parentPath?.node?.type === "JSXClosingElement") return false;
+		if (p.parentPath?.node?.type === "JSXMemberExpression" && p.parentPath.node.object === p.node) return false;
+		if (p.parentPath?.node?.type === "CallExpression") {
+			const callee = p.parentPath.node.callee;
+			if (callee?.type === "Identifier" && callee.name === ctx.styledDefaultImport) return false;
+			if (callee?.type === "MemberExpression" && callee.object?.type === "CallExpression" && callee.object.callee?.type === "Identifier" && callee.object.callee.name === ctx.styledDefaultImport) return false;
+		}
+		if (p.parentPath?.node?.type === "TaggedTemplateExpression") return false;
+		if (p.parentPath?.node?.type === "CallExpression" && p.parentPath.parentPath?.node?.type === "TaggedTemplateExpression") return false;
+		if (p.parentPath?.node?.type === "TemplateLiteral") return false;
+		return true;
+	}).size() > 0;
 	for (const decl of styledDecls) {
 		if (!decl.adjacentSiblingStyleKey) continue;
 		const { className, style, ref } = getJsxAttributeUsage(decl.localName);
@@ -4130,7 +4488,22 @@ function analyzeBeforeEmitStep(ctx) {
 			warnings: ctx.warnings
 		}, "bail");
 	}
+	const reservedStyleKeys = collectReservedStyleKeys(ctx.resolvedStyleObjects ?? /* @__PURE__ */ new Map(), styledDecls);
+	const usedLocalElementStyleKeys = /* @__PURE__ */ new Set();
+	const localElementTargetStyleKeys = /* @__PURE__ */ new Set();
+	const localElementProofs = /* @__PURE__ */ new Map();
+	for (const decl of styledDecls) {
+		if (!decl.localElementOverrides?.length) continue;
+		const { className, style, ref } = getJsxAttributeUsage(decl.localName);
+		const proof = proveLocalElementOverrideUsages(root, j, decl.localName, decl.localElementOverrides, declByLocal);
+		const unsupportedReason = decl.isExported ? "exported-parent" : decl.base.kind !== "intrinsic" || decl.needsWrapperComponent || className || style || ref || extendedBy.has(decl.localName) || hasNonJsxComponentValueReference(decl.localName) || hasSpreadInJsx(root, j, decl.localName) ? "dynamic" : proof.safe ? "none" : proof.reason;
+		localElementProofs.set(decl.localName, {
+			proof,
+			unsupportedReason
+		});
+	}
 	analyzePromotableStyleProps(root, j, styledDecls, allStyledDecls, declByLocal, getJsxUsageCount, ctx.resolvedStyleObjects ?? /* @__PURE__ */ new Map());
+	for (const decl of styledDecls) for (const entry of decl.promotedStyleProps ?? []) if (!entry.mergeIntoBase) reservedStyleKeys.add(entry.styleKey);
 	for (const decl of styledDecls) {
 		if (decl.isDirectJsxResolution) continue;
 		const { className, style } = getJsxAttributeUsage(decl.localName);
@@ -4141,11 +4514,101 @@ function analyzeBeforeEmitStep(ctx) {
 			if (!decl.needsWrapperComponent) decl.needsWrapperComponent = true;
 		}
 	}
+	for (const decl of styledDecls) {
+		if (!decl.localElementOverrides?.length) continue;
+		const proofInfo = localElementProofs.get(decl.localName);
+		if (!proofInfo) continue;
+		const localElementUnsupportedReason = proofInfo.unsupportedReason;
+		if (localElementUnsupportedReason !== "none") {
+			for (const override of decl.localElementOverrides) ctx.warnings.push({
+				severity: "warning",
+				type: getLocalElementWarningType(override, localElementUnsupportedReason),
+				loc: override.loc
+			});
+			return returnResult({
+				code: null,
+				warnings: ctx.warnings
+			}, "bail");
+		}
+		const nextOverrides = [];
+		for (const override of decl.localElementOverrides) {
+			const targetIds = proofInfo.proof.targetsByStyleKey.get(override.styleKey) ?? /* @__PURE__ */ new Set();
+			const styleKeysByTargetId = {};
+			for (const targetId of [...targetIds].sort()) {
+				if (hasOverlappingPseudoOnlyLocalOverride(nextOverrides, override, targetId)) {
+					ctx.warnings.push({
+						severity: "warning",
+						type: "Unsupported selector: ambiguous element selector",
+						loc: override.loc
+					});
+					return returnResult({
+						code: null,
+						warnings: ctx.warnings
+					}, "bail");
+				}
+				const targetDecl = targetId.startsWith("styled:") ? declByLocal.get(targetId.slice(7)) : void 0;
+				if (targetDecl) {
+					const childInlineable = isInlineableLocalElementTarget(targetDecl);
+					if (!childInlineable) {
+						ctx.warnings.push({
+							severity: "warning",
+							type: "Unsupported selector: ambiguous element selector",
+							loc: override.loc
+						});
+						return returnResult({
+							code: null,
+							warnings: ctx.warnings
+						}, "bail");
+					}
+					if (hasPseudoLocalElementOverride(override) && hasRuntimeStyleEntriesForLocalElementTarget(targetDecl)) {
+						ctx.warnings.push({
+							severity: "warning",
+							type: "Unsupported selector: ambiguous element selector",
+							loc: override.loc
+						});
+						return returnResult({
+							code: null,
+							warnings: ctx.warnings
+						}, "bail");
+					}
+					targetDecl.localElementTargetProofs ??= [];
+					targetDecl.localElementTargetProofs.push({
+						targetId,
+						wasInlineableAtProofTime: childInlineable,
+						loc: override.loc
+					});
+					localElementTargetStyleKeys.add(targetDecl.styleKey);
+				}
+				const emittedStyleKey = ensureUniqueKey$1(makeLocalElementTargetStyleKey(override, targetId), usedLocalElementStyleKeys, reservedStyleKeys);
+				usedLocalElementStyleKeys.add(emittedStyleKey);
+				reservedStyleKeys.add(emittedStyleKey);
+				styleKeysByTargetId[targetId] = emittedStyleKey;
+				const resolvedStyleObjects = ctx.resolvedStyleObjects;
+				const props = buildLocalElementOverrideProperties({
+					j,
+					override,
+					childStyleObjects: [...resolvedStyleObjects ? nextOverrides.slice().reverse().map((priorOverride) => priorOverride.styleKeysByTargetId?.[targetId]).filter((key) => !!key).map((key) => resolvedStyleObjects.get(key)).flatMap(getPlainStyleObjectsFromResolvedValue) : [], ...targetDecl && resolvedStyleObjects ? buildResolvedStyleObjectList(targetDecl, resolvedStyleObjects) : []]
+				});
+				if (props.length > 0) ctx.resolvedStyleObjects?.set(emittedStyleKey, j.objectExpression(props));
+			}
+			nextOverrides.push({
+				...override,
+				styleKeysByTargetId
+			});
+			if (override.ancestorPseudo) {
+				ctx.ancestorSelectorParents ??= /* @__PURE__ */ new Set();
+				ctx.ancestorSelectorParents.add(decl.styleKey);
+				ctx.parentsNeedingDefaultMarker ??= /* @__PURE__ */ new Set();
+				ctx.parentsNeedingDefaultMarker.add(decl.styleKey);
+			}
+		}
+		decl.localElementOverrides = nextOverrides;
+	}
 	for (const decl of styledDecls) {
 		if (decl.isCssHelper || decl.needsWrapperComponent) continue;
 		if (decl.isDirectJsxResolution) continue;
 		if (decl.base.kind !== "intrinsic") continue;
-		if (relationChildStyleKeys.has(decl.styleKey)) continue;
+		if (relationChildStyleKeys.has(decl.styleKey) || localElementTargetStyleKeys.has(decl.styleKey)) continue;
 		const usageCount = getJsxUsageCount(decl.localName);
 		if (decl.promotedStyleProps?.length && decl.promotedStyleProps.length >= usageCount) continue;
 		const { ref } = getJsxAttributeUsage(decl.localName);
@@ -4275,20 +4738,7 @@ function analyzeBeforeEmitStep(ctx) {
 	}
 	for (const decl of styledDecls) {
 		if (decl.isDirectJsxResolution) continue;
-		if (root.find(j.Identifier, { name: decl.localName }).filter((p) => {
-			if (p.parentPath?.node?.type === "VariableDeclarator" && p.parentPath.node.id === p.node) return false;
-			if (p.parentPath?.node?.type === "JSXOpeningElement" || p.parentPath?.node?.type === "JSXClosingElement") return false;
-			if (p.parentPath?.node?.type === "JSXMemberExpression" && p.parentPath.node.object === p.node) return false;
-			if (p.parentPath?.node?.type === "CallExpression") {
-				const callee = p.parentPath.node.callee;
-				if (callee?.type === "Identifier" && callee.name === ctx.styledDefaultImport) return false;
-				if (callee?.type === "MemberExpression" && callee.object?.type === "CallExpression" && callee.object.callee?.type === "Identifier" && callee.object.callee.name === ctx.styledDefaultImport) return false;
-			}
-			if (p.parentPath?.node?.type === "TaggedTemplateExpression") return false;
-			if (p.parentPath?.node?.type === "CallExpression" && p.parentPath.parentPath?.node?.type === "TaggedTemplateExpression") return false;
-			if (p.parentPath?.node?.type === "TemplateLiteral") return false;
-			return true;
-		}).size() > 0) {
+		if (hasNonJsxComponentValueReference(decl.localName)) {
 			decl.usedAsValue = true;
 			decl.needsWrapperComponent = true;
 		}
@@ -4328,6 +4778,21 @@ function analyzeBeforeEmitStep(ctx) {
 		});
 		if (hasAs || hasForwardedAs || propsTypeHasAs) decl.isPolymorphicIntrinsicWrapper = true;
 	}
+	for (const decl of styledDecls) {
+		if (!decl.localElementTargetProofs?.length) continue;
+		const isInlineableNow = isInlineableLocalElementTarget(decl);
+		if (decl.localElementTargetProofs.some((proof) => proof.wasInlineableAtProofTime) && !isInlineableNow) {
+			ctx.warnings.push({
+				severity: "warning",
+				type: "Unsupported selector: ambiguous element selector",
+				loc: decl.localElementTargetProofs.find((proof) => proof.wasInlineableAtProofTime)?.loc
+			});
+			return returnResult({
+				code: null,
+				warnings: ctx.warnings
+			}, "bail");
+		}
+	}
 	const isUsedOutsideStyledTemplates = (localName) => root.find(j.Identifier, { name: localName }).filter((p) => {
 		if (j(p).closest(j.ImportDeclaration).size() > 0) return false;
 		if (j(p).closest(j.TaggedTemplateExpression).filter((tp) => ctx.isStyledTag(tp.node.tag)).size() > 0) return false;
@@ -4888,6 +5353,10 @@ function applyTransientPropRenames(decl, renames) {
 		attr.jsxProp = renames.get(attr.jsxProp) ?? attr.jsxProp;
 		attr.attrName = renames.get(attr.attrName) ?? attr.attrName;
 	}
+	if (decl.attrsInfo?.dynamicAttrs) for (const attr of decl.attrsInfo.dynamicAttrs) {
+		attr.jsxProp = renames.get(attr.jsxProp) ?? attr.jsxProp;
+		attr.attrName = renames.get(attr.attrName) ?? attr.attrName;
+	}
 	if (decl.attrsInfo?.staticAttrs) decl.attrsInfo.staticAttrs = renameStaticAttrKeys(decl.attrsInfo.staticAttrs, renames);
 	if (decl.attrsInfo?.attrsDynamicStyles) for (const ds of decl.attrsInfo.attrsDynamicStyles) {
 		ds.jsxProp = renames.get(ds.jsxProp) ?? ds.jsxProp;
@@ -5054,77 +5523,6 @@ function emitTransientPropRenameWarning(ctx, decl, renames, exportedComponents)
 		renames: renameRecord
 	});
 }
-function collectDottedExportedComponents(root, j, declByLocal, exportedComponents) {
-	const getIdentifierName = (node) => {
-		const n = node;
-		return n?.type === "Identifier" && n.name ? n.name : null;
-	};
-	const setDottedExport = (localName, exportName) => {
-		if (!declByLocal.has(localName)) return;
-		const existing = exportedComponents.get(localName)?.exportName;
-		if (existing && existing.split(".").length > exportName.split(".").length) return;
-		exportedComponents.set(localName, {
-			exportName,
-			isDefault: false,
-			isSpecifier: false
-		});
-	};
-	const collectObjectProperties = (objectExpression, prefix) => {
-		const objectNode = objectExpression;
-		if (objectNode?.type !== "ObjectExpression" || !Array.isArray(objectNode.properties)) return;
-		for (const property of objectNode.properties) {
-			if (property?.type !== "Property" && property?.type !== "ObjectProperty") continue;
-			const keyName = getIdentifierName(property.key);
-			if (!keyName) continue;
-			const valueName = getIdentifierName(property.value);
-			if (valueName) {
-				setDottedExport(valueName, `${prefix}.${keyName}`);
-				continue;
-			}
-			collectObjectProperties(property.value, `${prefix}.${keyName}`);
-		}
-	};
-	root.find(j.ExportNamedDeclaration).forEach((p) => {
-		const declaration = p.node.declaration;
-		if (declaration?.type !== "VariableDeclaration") return;
-		for (const declarator of declaration.declarations) {
-			if (declarator.type !== "VariableDeclarator") continue;
-			const exportName = getIdentifierName(declarator.id);
-			if (exportName) collectObjectProperties(declarator.init, exportName);
-		}
-	});
-	const collectNamespaceExports = (node, namespacePath) => {
-		const current = node;
-		if (!current) return;
-		if (current.type === "TSModuleDeclaration") {
-			const namespaceName = getIdentifierName(current.id);
-			if (!namespaceName) return;
-			const nextPath = [...namespacePath, namespaceName];
-			if (current.body?.type === "TSModuleBlock") for (const statement of current.body.body ?? []) collectNamespaceExports(statement, nextPath);
-			else collectNamespaceExports(current.body, nextPath);
-			return;
-		}
-		if (current.type !== "ExportNamedDeclaration") return;
-		const declaration = current.declaration;
-		if (!declaration) return;
-		if (declaration.type === "TSModuleDeclaration") {
-			collectNamespaceExports(declaration, namespacePath);
-			return;
-		}
-		if (declaration.type === "FunctionDeclaration") {
-			const localName = getIdentifierName(declaration.id);
-			if (localName) setDottedExport(localName, [...namespacePath, localName].join("."));
-			return;
-		}
-		if (declaration.type === "VariableDeclaration" && Array.isArray(declaration.declarations)) for (const declarator of declaration.declarations) {
-			const localName = getIdentifierName(declarator.id);
-			if (localName) setDottedExport(localName, [...namespacePath, localName].join("."));
-		}
-	};
-	root.find(j.TSModuleDeclaration).forEach((p) => {
-		collectNamespaceExports(p.node, []);
-	});
-}
 /** Recursively check if a pattern (Identifier, ArrayPattern, ObjectPattern, etc.) contains a binding with the given name. */
 function patternContainsName(node, name) {
 	if (!node || typeof node !== "object") return false;
@@ -5375,7 +5773,7 @@ function analyzePromotableStyleProps(root, j, styledDecls, allStyledDecls, declB
 					siteBail = true;
 					break;
 				}
-				if (!isValidIdentifierName(keyName)) {
+				if (!isValidIdentifierName$1(keyName)) {
 					siteBail = true;
 					break;
 				}
@@ -5798,28 +6196,225 @@ function classifyAdjacentSiblingChild(child, componentName) {
 	}
 	return { kind: "other" };
 }
+function proveLocalElementOverrideUsages(root, j, componentName, overrides, declByLocal) {
+	const targetsByStyleKey = new Map(overrides.map((override) => [override.styleKey, /* @__PURE__ */ new Set()]));
+	let sawUsage = false;
+	let sawCandidateMatch = false;
+	let reason = "ok";
+	const inspectChildren = (children, relation, tagName) => {
+		const matches = /* @__PURE__ */ new Set();
+		let failureReason;
+		const visitChild = (child, isDirectChild) => {
+			if (!child || typeof child !== "object") return true;
+			const node = child;
+			if (node.type === "JSXText") return true;
+			if (node.type === "JSXFragment") return false;
+			if (node.type === "JSXExpressionContainer") {
+				const exprType = node.expression?.type;
+				return exprType === "JSXEmptyExpression" || exprType === "Literal" || exprType === "StringLiteral" || exprType === "TemplateLiteral";
+			}
+			if (node.type !== "JSXElement") return false;
+			const name = getRootJsxIdentifierName(node.openingElement?.name);
+			if (!name) return false;
+			const decl = declByLocal.get(name);
+			const isIntrinsicTagName = /^[a-z]/.test(name);
+			const isIntrinsicMatch = isIntrinsicTagName && name === tagName;
+			const staticAsTag = typeof decl?.attrsInfo?.staticAttrs?.as === "string" ? decl.attrsInfo.staticAttrs.as : void 0;
+			const renderedTagName = decl?.attrsInfo?.attrsAsTag ?? staticAsTag ?? (decl?.base.kind === "intrinsic" ? decl.base.tagName : void 0);
+			const isStyledIntrinsicMatch = !!decl && decl.base.kind === "intrinsic" && renderedTagName === tagName;
+			const isUnknownWrapperBoundary = !isIntrinsicMatch && !isStyledIntrinsicMatch && (!!decl || !isIntrinsicTagName);
+			if ((relation === "child" ? isDirectChild : true) && (isIntrinsicMatch || isStyledIntrinsicMatch)) {
+				sawCandidateMatch = true;
+				matches.add(isStyledIntrinsicMatch ? `styled:${name}` : `intrinsic:${tagName}`);
+			}
+			if (relation === "descendant") {
+				if (isUnknownWrapperBoundary) {
+					failureReason = "unsupported-wrapper";
+					return false;
+				}
+				for (const grandchild of node.children ?? []) if (!visitChild(grandchild, false)) return false;
+			}
+			if (relation === "child" && isDirectChild && isUnknownWrapperBoundary) {
+				failureReason = "unsupported-wrapper";
+				return false;
+			}
+			return true;
+		};
+		for (const child of children) if (!visitChild(child, true)) return {
+			safe: false,
+			matches,
+			...failureReason ? { reason: failureReason } : {}
+		};
+		return {
+			safe: true,
+			matches
+		};
+	};
+	root.find(j.JSXElement, { openingElement: { name: {
+		type: "JSXIdentifier",
+		name: componentName
+	} } }).forEach((path) => {
+		sawUsage = true;
+		for (const override of overrides) {
+			const inspected = inspectChildren(path.node.children ?? [], override.relation, override.tagName);
+			if (!inspected.safe) {
+				reason = inspected.reason ?? "dynamic-usage";
+				return;
+			}
+			const targetSet = targetsByStyleKey.get(override.styleKey);
+			for (const match of inspected.matches) targetSet.add(match);
+		}
+	});
+	if (reason !== "ok") return {
+		safe: false,
+		reason,
+		targetsByStyleKey,
+		sawCandidateMatch
+	};
+	if (!sawUsage) return {
+		safe: false,
+		reason: "no-usage",
+		targetsByStyleKey,
+		sawCandidateMatch
+	};
+	if ([...targetsByStyleKey.values()].some((set) => set.size === 0)) return {
+		safe: false,
+		reason: sawCandidateMatch ? "dynamic-usage" : "no-usage",
+		targetsByStyleKey,
+		sawCandidateMatch
+	};
+	return {
+		safe: true,
+		reason: "ok",
+		targetsByStyleKey,
+		sawCandidateMatch
+	};
+}
+function getLocalElementWarningType(override, reason) {
+	if (reason === "no-usage") return "Unsupported selector: descendant/child/sibling selector";
+	if (reason === "dynamic-usage" || reason === "unsupported-wrapper") return "Unsupported selector: element selector with dynamic children";
+	if (reason === "child-not-inlineable" || reason === "non-jsx-usage") return "Unsupported selector: ambiguous element selector";
+	return override.tagName === "svg" || override.tagName === "button" ? "Unsupported selector: element selector with plain intrinsic children" : "Unsupported selector: ambiguous element selector";
+}
+function makeLocalElementTargetStyleKey(override, targetId) {
+	const targetName = targetId.startsWith("styled:") ? targetId.slice(7) : targetId.slice(10);
+	const normalizedTargetName = targetName[0]?.toLowerCase() === targetName[0] ? targetName : `${targetName[0]?.toLowerCase() ?? ""}${targetName.slice(1)}`;
+	const relationPrefix = override.relation === "child" ? "child" : "descendant";
+	const targetSuffix = camelToKebabCase(normalizedTargetName).replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+	return `${relationPrefix}${targetSuffix[0]?.toUpperCase() ?? ""}${targetSuffix.slice(1)}`;
+}
+function buildLocalElementOverrideProperties(args) {
+	const { j, override, childStyleObjects } = args;
+	return buildRelationOverrideProperties({
+		j,
+		pseudoBuckets: override.pseudoBuckets,
+		childStyleObjects,
+		makeCssPropKey,
+		childPseudos: override.childPseudo ? new Set([override.childPseudo]) : void 0,
+		markerVarName: void 0
+	});
+}
+function hasPseudoLocalElementOverride(override) {
+	return [...override.pseudoBuckets.keys()].some((pseudo) => pseudo !== null);
+}
+function hasPseudoOnlyLocalElementOverride(override) {
+	return override.pseudoBuckets.size > 0 && !override.pseudoBuckets.has(null);
+}
+function hasOverlappingPseudoOnlyLocalOverride(priorOverrides, nextOverride, targetId) {
+	if (!hasPseudoOnlyLocalElementOverride(nextOverride)) return false;
+	const nextProps = new Set(getLocalElementOverridePropNames(nextOverride));
+	return priorOverrides.some((priorOverride) => {
+		if (!hasPseudoOnlyLocalElementOverride(priorOverride)) return false;
+		if (!priorOverride.styleKeysByTargetId?.[targetId]) return false;
+		return getLocalElementOverridePropNames(priorOverride).some((prop) => nextProps.has(prop));
+	});
+}
+function getLocalElementOverridePropNames(override) {
+	return [...override.pseudoBuckets.values()].flatMap((bucket) => Object.keys(bucket));
+}
+function hasRuntimeStyleEntriesForLocalElementTarget(decl) {
+	return Object.keys(decl.variantStyleKeys ?? {}).length > 0 || (decl.variantDimensions?.length ?? 0) > 0 || (decl.staticBooleanVariants?.length ?? 0) > 0 || (decl.callSiteCombinedStyles?.length ?? 0) > 0 || (decl.styleFnFromProps?.length ?? 0) > 0 || (decl.extraStylexPropsArgs?.length ?? 0) > 0;
+}
+function buildResolvedStyleObjectList(decl, resolvedStyleObjects) {
+	const afterBaseKeys = new Set(decl.extraStyleKeysAfterBase ?? []);
+	const beforeBaseKeys = [];
+	const afterBaseKeysInOrder = [];
+	for (const key of decl.extraStyleKeys ?? []) if (afterBaseKeys.has(key)) afterBaseKeysInOrder.push(key);
+	else beforeBaseKeys.push(key);
+	const keys = [
+		...afterBaseKeysInOrder.reverse(),
+		decl.styleKey,
+		...beforeBaseKeys.reverse(),
+		...decl.extendsStyleKey ? [decl.extendsStyleKey] : []
+	];
+	const results = [];
+	for (const key of keys) {
+		const value = resolvedStyleObjects.get(key);
+		results.push(...getPlainStyleObjectsFromResolvedValue(value));
+	}
+	return results;
+}
+function getPlainStyleObjectsFromResolvedValue(value) {
+	if (isPlainStyleObject(value)) return [value];
+	if (isAstNode(value) && value.type === "ObjectExpression") {
+		const converted = objectExpressionToPlainStyleObject(value);
+		return converted ? [converted] : [];
+	}
+	return [];
+}
+function objectExpressionToPlainStyleObject(node) {
+	const result = {};
+	for (const property of node.properties ?? []) {
+		if (property.type !== "Property") return null;
+		const key = property.key?.type === "Identifier" ? property.key.name : property.key?.type === "Literal" || property.key?.type === "StringLiteral" ? String(property.key.value) : null;
+		if (!key) return null;
+		result[key] = property.value;
+	}
+	return result;
+}
 function isPlainStyleObject(value) {
 	return !!value && typeof value === "object" && !Array.isArray(value) && !isAstNode(value) && Object.values(value).every((v) => typeof v === "string" || typeof v === "number" || typeof v === "boolean" || isAstNode(v));
 }
 function mergeInheritedAttrsInfo(baseAttrsInfo, ownAttrsInfo) {
+	const ownAttrNames = collectAttrsInfoAttrNames(ownAttrsInfo);
 	return {
 		staticAttrs: {
-			...baseAttrsInfo.staticAttrs,
+			...Object.fromEntries(Object.entries(baseAttrsInfo.staticAttrs ?? {}).filter(([key]) => !ownAttrNames.has(key))),
 			...ownAttrsInfo?.staticAttrs
 		},
 		sourceKind: ownAttrsInfo?.sourceKind ?? baseAttrsInfo.sourceKind,
 		hasUnsupportedValues: (baseAttrsInfo.hasUnsupportedValues ?? false) || (ownAttrsInfo?.hasUnsupportedValues ?? false),
 		attrsAsTag: ownAttrsInfo?.attrsAsTag ?? baseAttrsInfo.attrsAsTag,
-		defaultAttrs: [...baseAttrsInfo.defaultAttrs ?? [], ...ownAttrsInfo?.defaultAttrs ?? []],
-		conditionalAttrs: [...baseAttrsInfo.conditionalAttrs ?? [], ...ownAttrsInfo?.conditionalAttrs ?? []],
-		invertedBoolAttrs: [...baseAttrsInfo.invertedBoolAttrs ?? [], ...ownAttrsInfo?.invertedBoolAttrs ?? []],
+		defaultAttrs: mergeAttrEntriesByAttrName(filterAttrEntriesByAttrName(baseAttrsInfo.defaultAttrs, ownAttrNames), ownAttrsInfo?.defaultAttrs),
+		conditionalAttrs: [...filterAttrEntriesByAttrName(baseAttrsInfo.conditionalAttrs, ownAttrNames), ...ownAttrsInfo?.conditionalAttrs ?? []],
+		invertedBoolAttrs: [...filterAttrEntriesByAttrName(baseAttrsInfo.invertedBoolAttrs, ownAttrNames), ...ownAttrsInfo?.invertedBoolAttrs ?? []],
+		dynamicAttrs: mergeAttrEntriesByAttrName(filterAttrEntriesByAttrName(baseAttrsInfo.dynamicAttrs, ownAttrNames), ownAttrsInfo?.dynamicAttrs),
 		attrsStaticStyles: {
 			...baseAttrsInfo.attrsStaticStyles,
 			...ownAttrsInfo?.attrsStaticStyles
 		},
+		attrsStaticStyleExpr: ownAttrsInfo?.attrsStaticStyleExpr ?? baseAttrsInfo.attrsStaticStyleExpr,
 		attrsDynamicStyles: [...baseAttrsInfo.attrsDynamicStyles ?? [], ...ownAttrsInfo?.attrsDynamicStyles ?? []]
 	};
 }
+function collectAttrsInfoAttrNames(attrsInfo) {
+	const names = /* @__PURE__ */ new Set();
+	for (const key of Object.keys(attrsInfo?.staticAttrs ?? {})) names.add(key);
+	for (const entry of attrsInfo?.defaultAttrs ?? []) names.add(entry.attrName);
+	for (const entry of attrsInfo?.dynamicAttrs ?? []) names.add(entry.attrName);
+	for (const entry of attrsInfo?.conditionalAttrs ?? []) names.add(entry.attrName);
+	for (const entry of attrsInfo?.invertedBoolAttrs ?? []) names.add(entry.attrName);
+	return names;
+}
+function filterAttrEntriesByAttrName(entries, names) {
+	return (entries ?? []).filter((entry) => !names.has(entry.attrName));
+}
+function mergeAttrEntriesByAttrName(baseEntries, ownEntries) {
+	const byAttrName = /* @__PURE__ */ new Map();
+	for (const entry of baseEntries ?? []) byAttrName.set(entry.attrName, entry);
+	for (const entry of ownEntries ?? []) byAttrName.set(entry.attrName, entry);
+	return [...byAttrName.values()];
+}
 //#endregion
 //#region src/internal/policy.ts
 function collectCreateGlobalStyleWarnings(styledImports) {
@@ -5880,18 +6475,19 @@ function buildImportMapStep(ctx) {
 	ctx.importMap = buildImportMap({
 		root: ctx.root,
 		j: ctx.j,
-		filePath: ctx.file.path
+		filePath: ctx.file.path,
+		resolveModule: ctx.options.resolveModule
 	});
 	return CONTINUE;
 }
 function buildImportMap(args) {
-	const { root, j, filePath } = args;
+	const { root, j, filePath, resolveModule } = args;
 	const importMap = /* @__PURE__ */ new Map();
 	const baseDir = dirname(filePath);
 	root.find(j.ImportDeclaration).forEach((p) => {
 		const source = p.node.source?.value;
 		if (typeof source !== "string") return;
-		const resolvedSource = resolveImportSource(source, baseDir);
+		const resolvedSource = resolveImportSource(source, baseDir, filePath, resolveModule);
 		for (const s of p.node.specifiers ?? []) {
 			if (!s) continue;
 			if (s.type === "ImportDefaultSpecifier") {
@@ -5915,20 +6511,53 @@ function buildImportMap(args) {
 	});
 	return importMap;
 }
-/**
-* Deterministic resolution: relative specifiers resolve against the current
-* file's directory. This intentionally does NOT probe extensions, consult
-* tsconfig paths, or use Node resolution.
-*/
-function resolveImportSource(specifier, baseDir) {
-	return isRelativeSpecifier(specifier) ? {
+function resolveImportSource(specifier, baseDir, filePath, resolveModule) {
+	if (!isRelativeSpecifier(specifier)) {
+		if (isResolvablePackageSpecifier(specifier, filePath)) return {
+			kind: "specifier",
+			value: specifier
+		};
+		const resolved = resolveModule?.(filePath, specifier);
+		return resolved ? {
+			kind: "absolutePath",
+			value: resolved
+		} : {
+			kind: "specifier",
+			value: specifier
+		};
+	}
+	return {
 		kind: "absolutePath",
-		value: resolve(baseDir, specifier)
-	} : {
-		kind: "specifier",
-		value: specifier
+		value: resolveModule?.(filePath, specifier) ?? resolve(baseDir, specifier)
 	};
 }
+function isResolvablePackageSpecifier(specifier, filePath) {
+	const packageName = packageNameFromSpecifier(specifier);
+	if (!packageName) return false;
+	const requireFromFile = createRequire(resolve(filePath));
+	try {
+		requireFromFile.resolve(`${packageName}/package.json`);
+		return true;
+	} catch {
+		try {
+			requireFromFile.resolve(packageName);
+			return true;
+		} catch {
+			return false;
+		}
+	}
+}
+function packageNameFromSpecifier(specifier) {
+	if (specifier.startsWith("#")) return null;
+	const parts = specifier.split("/");
+	const first = parts[0];
+	if (!first) return null;
+	if (first.startsWith("@")) {
+		const second = parts[1];
+		return second ? `${first}/${second}` : null;
+	}
+	return first;
+}
 //#endregion
 //#region src/internal/css-ir.ts
 function normalizeStylisAstToIR(stylisAst, slots, options = {}) {
@@ -7379,10 +8008,11 @@ function collectStyledDeclsImpl(args) {
 			sourceKind: "unknown",
 			hasUnsupportedValues: false,
 			defaultAttrs: [],
+			dynamicAttrs: [],
 			conditionalAttrs: [],
 			invertedBoolAttrs: []
 		};
-		const fillFromObject = (obj, attrsParamPropNames = /* @__PURE__ */ new Set()) => {
+		const fillFromObject = (obj, attrsParamInfo = emptyAttrsParamInfo()) => {
 			for (const prop of obj.properties ?? []) {
 				if (!prop || prop.type !== "ObjectProperty" && prop.type !== "Property") continue;
 				const key = prop.key.type === "Identifier" ? prop.key.name : prop.key.type === "StringLiteral" ? prop.key.value : null;
@@ -7396,6 +8026,31 @@ function collectStyledDeclsImpl(args) {
 					out.attrsAsTag = v.name;
 					continue;
 				}
+				if (key === "as") {
+					const asTag = staticAttrExpressionToReference(v, attrsParamInfo);
+					if (asTag) {
+						out.attrsAsTag = asTag;
+						continue;
+					}
+				}
+				if (key === "style" && isStaticAttrExpression$1(v, attrsParamInfo)) {
+					out.attrsStaticStyleExpr = cloneAstNode(v);
+					continue;
+				}
+				const dynamicAttrProp = extractPropName(v, attrsParamInfo);
+				if (dynamicAttrProp) {
+					const dynamicAttrDefault = extractPropDefault(v, attrsParamInfo);
+					out.dynamicAttrs.push({
+						jsxProp: dynamicAttrProp,
+						attrName: key,
+						...dynamicAttrDefault !== void 0 ? { defaultValue: dynamicAttrDefault } : {}
+					});
+					continue;
+				}
+				if (isStaticAttrExpression$1(v, attrsParamInfo)) {
+					out.staticAttrs[key] = cloneAstNode(v);
+					continue;
+				}
 				if (v.type === "Identifier" && v.name === "undefined" || v.type === "NullLiteral") {
 					out.staticAttrs[key] = v.type === "NullLiteral" ? null : void 0;
 					continue;
@@ -7403,9 +8058,10 @@ function collectStyledDeclsImpl(args) {
 				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")) {
+					const leftPropName = extractPropName(left, attrsParamInfo);
+					if (leftPropName && (right?.type === "StringLiteral" || right?.type === "NumericLiteral" || right?.type === "BooleanLiteral")) {
 						out.defaultAttrs.push({
-							jsxProp: left.property.name,
+							jsxProp: leftPropName,
 							attrName: key,
 							value: right.value
 						});
@@ -7432,7 +8088,7 @@ function collectStyledDeclsImpl(args) {
 					});
 					continue;
 				}
-				if (key === "style" && v.type === "ObjectExpression" && tryExtractStyleObject(v, out, attrsParamPropNames, resolveModuleScopeStaticValue)) continue;
+				if (key === "style" && v.type === "ObjectExpression" && tryExtractStyleObject(v, out, attrsParamInfo.propNames, resolveModuleScopeStaticValue)) continue;
 				out.hasUnsupportedValues = true;
 			}
 		};
@@ -7443,16 +8099,19 @@ function collectStyledDeclsImpl(args) {
 		}
 		if (arg0.type === "ArrowFunctionExpression") {
 			out.sourceKind = "function";
-			const attrsParamPropNames = getAttrsParamPropNames(arg0.params);
+			const attrsParamInfo = getAttrsParamInfo(arg0.params);
 			const body = arg0.body;
 			if (body?.type === "ObjectExpression") {
-				fillFromObject(body, attrsParamPropNames);
+				fillFromObject(body, attrsParamInfo);
 				return out;
 			}
 			if (body?.type === "BlockStatement") {
 				const ret = body.body.find((s) => s.type === "ReturnStatement");
 				if (ret?.argument?.type === "ObjectExpression") {
-					fillFromObject(ret.argument, attrsParamPropNames);
+					fillFromObject(ret.argument, {
+						...attrsParamInfo,
+						localNames: collectBlockLocalNames(body)
+					});
 					return out;
 				}
 			}
@@ -7485,7 +8144,8 @@ function collectStyledDeclsImpl(args) {
 			return isModuleScopeDeclarator(path);
 		});
 		if (decls.length !== 1) return;
-		return literalStaticValueFromNode(decls.get().node.init);
+		const value = literalStaticValueFromNode(decls.get().node.init);
+		return typeof value === "string" || typeof value === "number" ? value : void 0;
 	};
 	const parseShouldForwardProp = (arg0) => {
 		if (!arg0 || arg0.type !== "ObjectExpression") return;
@@ -8211,13 +8871,20 @@ function extractTernaryJsxProp(ternary, attrsParamPropNames) {
 	return null;
 }
 function extractDynamicStyleValue(value, attrsParamPropNames) {
-	const propName = extractPropName(value, attrsParamPropNames);
+	const attrsParamInfo = {
+		propNames: attrsParamPropNames,
+		propByLocalName: /* @__PURE__ */ new Map(),
+		defaultsByPropName: /* @__PURE__ */ new Map(),
+		rootNames: new Set(["props", "p"]),
+		localNames: /* @__PURE__ */ new Set()
+	};
+	const propName = extractPropName(value, attrsParamInfo);
 	if (propName) return {
 		jsxProp: propName,
 		callArgExpr: identifierNode(propName)
 	};
 	if (value?.type === "LogicalExpression" && value.operator === "??" || value?.type === "TSNullishCoalescingExpression") {
-		const leftPropName = extractPropName(value.left, attrsParamPropNames);
+		const leftPropName = extractPropName(value.left, attrsParamInfo);
 		if (leftPropName) return {
 			jsxProp: leftPropName,
 			callArgExpr: {
@@ -8237,31 +8904,142 @@ function hasLeadingFalse(comment) {
 	if (!comment || typeof comment !== "object") return false;
 	return comment.leading === false;
 }
-function extractPropName(value, attrsParamPropNames) {
-	if (value?.type === "Identifier" && typeof value.name === "string" && attrsParamPropNames.has(value.name)) return value.name;
-	if (value?.type === "MemberExpression" && value.object?.type === "Identifier" && (value.object.name === "props" || value.object.name === "p") && value.property?.type === "Identifier" && typeof value.property.name === "string") return value.property.name;
+function emptyAttrsParamInfo() {
+	return {
+		propNames: /* @__PURE__ */ new Set(),
+		propByLocalName: /* @__PURE__ */ new Map(),
+		defaultsByPropName: /* @__PURE__ */ new Map(),
+		rootNames: /* @__PURE__ */ new Set(),
+		localNames: /* @__PURE__ */ new Set()
+	};
+}
+function extractPropName(value, attrsParamInfo) {
+	if (value?.type === "Identifier" && typeof value.name === "string" && attrsParamInfo.propNames.has(value.name)) return attrsParamInfo.propByLocalName.get(value.name) ?? value.name;
+	if (value?.type === "MemberExpression" && value.object?.type === "Identifier" && attrsParamInfo.rootNames.has(value.object.name) && value.property?.type === "Identifier" && typeof value.property.name === "string") return value.property.name;
 	return null;
 }
-function getAttrsParamPropNames(params) {
+function extractPropDefault(value, attrsParamInfo) {
+	const propName = extractPropName(value, attrsParamInfo);
+	return propName ? attrsParamInfo.defaultsByPropName.get(propName) : void 0;
+}
+function getAttrsParamInfo(params) {
 	const names = /* @__PURE__ */ new Set();
-	const firstParam = params?.[0];
-	if (firstParam?.type !== "ObjectPattern") return names;
+	const propByLocalName = /* @__PURE__ */ new Map();
+	const defaultsByPropName = /* @__PURE__ */ new Map();
+	const rootNames = /* @__PURE__ */ new Set();
+	const localNames = /* @__PURE__ */ new Set();
+	const firstParamRaw = params?.[0];
+	const firstParam = firstParamRaw?.type === "AssignmentPattern" ? firstParamRaw.left : firstParamRaw;
+	if (firstParam?.type === "Identifier" && typeof firstParam.name === "string") {
+		rootNames.add(firstParam.name);
+		return {
+			propNames: names,
+			propByLocalName,
+			defaultsByPropName,
+			rootNames,
+			localNames
+		};
+	}
+	if (firstParam?.type !== "ObjectPattern") return {
+		propNames: names,
+		propByLocalName,
+		defaultsByPropName,
+		rootNames,
+		localNames
+	};
 	for (const prop of firstParam.properties ?? []) {
-		if (!prop || prop.type === "RestElement") continue;
+		if (!prop) continue;
+		if (prop.type === "RestElement") {
+			if (prop.argument?.type === "Identifier" && typeof prop.argument.name === "string") if ((firstParam.properties ?? []).length === 1) rootNames.add(prop.argument.name);
+			else localNames.add(prop.argument.name);
+			continue;
+		}
+		const propName = prop.key?.type === "Identifier" ? prop.key.name : prop.key?.type === "StringLiteral" ? prop.key.value : null;
+		if (!propName) continue;
 		const value = prop.value ?? prop.argument;
+		if (!isValidIdentifierName(propName)) {
+			collectPatternNames(value, localNames);
+			continue;
+		}
 		if (value?.type === "Identifier" && typeof value.name === "string") {
 			names.add(value.name);
+			propByLocalName.set(value.name, propName);
 			continue;
 		}
-		if (value?.type === "AssignmentPattern" && value.left?.type === "Identifier" && typeof value.left.name === "string") names.add(value.left.name);
+		if (value?.type === "AssignmentPattern" && value.left?.type === "Identifier" && typeof value.left.name === "string") {
+			names.add(value.left.name);
+			propByLocalName.set(value.left.name, propName);
+			const defaultValue = literalStaticValueFromNode(value.right);
+			if (defaultValue !== void 0) defaultsByPropName.set(propName, defaultValue);
+		}
 	}
-	return names;
+	return {
+		propNames: names,
+		propByLocalName,
+		defaultsByPropName,
+		rootNames,
+		localNames
+	};
 }
 function literalStaticValueFromNode(node) {
 	if (node?.type === "StringLiteral" || node?.type === "NumericLiteral") return node.value;
-	if (node?.type === "Literal" && (typeof node.value === "string" || typeof node.value === "number")) return node.value;
+	if (node?.type === "BooleanLiteral") return node.value;
+	if (node?.type === "Literal" && (typeof node.value === "string" || typeof node.value === "number" || typeof node.value === "boolean")) return node.value;
 	if (node?.type === "TSAsExpression" || node?.type === "TSSatisfiesExpression") return literalStaticValueFromNode(node.expression);
 }
+function isStaticAttrExpression$1(node, attrsParamInfo) {
+	if (!node || typeof node !== "object") return false;
+	if (node.type === "TSAsExpression" || node.type === "TSSatisfiesExpression") return isStaticAttrExpression$1(node.expression, attrsParamInfo);
+	const rootName = getStaticAttrExpressionRootName(node);
+	return rootName != null && !attrsParamInfo.propNames.has(rootName) && !attrsParamInfo.rootNames.has(rootName) && !attrsParamInfo.localNames.has(rootName);
+}
+function getStaticAttrExpressionRootName(node) {
+	if (node?.type === "Identifier" && node.name !== "undefined") return node.name;
+	if (node?.type !== "MemberExpression" || node.computed) return null;
+	if (node.property?.type !== "Identifier" && node.property?.type !== "PrivateName") return null;
+	return getStaticAttrExpressionRootName(node.object);
+}
+function isValidIdentifierName(name) {
+	return /^[$A-Z_a-z][$\w]*$/.test(name);
+}
+function staticAttrExpressionToReference(node, attrsParamInfo) {
+	if (!isStaticAttrExpression$1(node, attrsParamInfo)) return null;
+	if (node?.type === "TSAsExpression" || node?.type === "TSSatisfiesExpression") return staticAttrExpressionToReference(node.expression, attrsParamInfo);
+	if (node?.type === "Identifier" && node.name !== "undefined") return node.name;
+	if (node?.type === "MemberExpression" && !node.computed) {
+		const objectRef = staticAttrExpressionToReference(node.object, attrsParamInfo);
+		if (objectRef && node.property?.type === "Identifier") return `${objectRef}.${node.property.name}`;
+	}
+	return null;
+}
+function collectBlockLocalNames(block) {
+	const names = /* @__PURE__ */ new Set();
+	for (const stmt of block.body ?? []) {
+		if (stmt?.type === "FunctionDeclaration" || stmt?.type === "ClassDeclaration") {
+			if (stmt.id?.type === "Identifier") names.add(stmt.id.name);
+			continue;
+		}
+		if (stmt?.type !== "VariableDeclaration") continue;
+		for (const decl of stmt.declarations ?? []) collectPatternNames(decl?.id, names);
+	}
+	return names;
+}
+function collectPatternNames(pattern, names) {
+	if (!pattern) return;
+	if (pattern.type === "Identifier") {
+		names.add(pattern.name);
+		return;
+	}
+	if (pattern.type === "ObjectPattern") {
+		for (const prop of pattern.properties ?? []) collectPatternNames(prop?.value ?? prop?.argument, names);
+		return;
+	}
+	if (pattern.type === "ArrayPattern") {
+		for (const element of pattern.elements ?? []) collectPatternNames(element, names);
+		return;
+	}
+	if (pattern.type === "AssignmentPattern" || pattern.type === "RestElement") collectPatternNames(pattern.left ?? pattern.argument, names);
+}
 function identifierNode(name) {
 	return {
 		type: "Identifier",
@@ -8550,6 +9328,18 @@ function collectStyledDeclsStep(ctx) {
 			warnings: ctx.warnings
 		}, "bail");
 	}
+	const unsupportedFunctionAttrsDecl = styledDecls.find((d) => !d.skipTransform && d.attrsInfo?.sourceKind === "function" && d.attrsInfo.hasUnsupportedValues);
+	if (unsupportedFunctionAttrsDecl && ctx.options.transformMode !== "leavesOnly") {
+		ctx.warnings.push({
+			severity: "warning",
+			type: "Unsupported .attrs() callback pattern",
+			loc: unsupportedFunctionAttrsDecl.loc
+		});
+		return returnResult({
+			code: null,
+			warnings: ctx.warnings
+		}, "bail");
+	}
 	if (styledDecls.length === 0) return returnResult({
 		code: ctx.hasChanges ? formatOutput((assertNoNullNodesInArrays(root.get().node), root.toSource({
 			quote: "double",
@@ -8882,163 +9672,6 @@ function isAstMetadataKey(key) {
 	return key === "comments" || key === "end" || key === "extra" || key === "leadingComments" || key === "loc" || key === "start" || key === "trailingComments";
 }
 //#endregion
-//#region src/internal/lower-rules/shared.ts
-function findPlaceholderBlock(rawCss, placeholder) {
-	let searchFrom = 0;
-	while (true) {
-		const start = rawCss.indexOf(placeholder, searchFrom);
-		if (start < 0) return null;
-		const blockOpen = readNextNonWhitespace(rawCss, start + placeholder.length);
-		if (blockOpen?.value !== "{") {
-			searchFrom = start + placeholder.length;
-			continue;
-		}
-		return {
-			start,
-			end: blockOpen.index
-		};
-	}
-}
-function findPreviousOpeningBraceBeforeSelector(rawCss, position) {
-	let depth = 0;
-	for (let i = position - 1; i >= 0; i--) {
-		const ch = rawCss[i];
-		if (ch === ";") continue;
-		if (ch === "}") {
-			depth++;
-			continue;
-		}
-		if (ch === "{") {
-			if (depth > 0) {
-				depth--;
-				continue;
-			}
-			return i;
-		}
-	}
-	return null;
-}
-function readSelectorBeforeBlock(rawCss, blockStart) {
-	let selectorStart = blockStart - 1;
-	while (selectorStart >= 0) {
-		const ch = rawCss[selectorStart];
-		if (ch === "}" || ch === "{" || ch === ";") break;
-		selectorStart--;
-	}
-	return rawCss.slice(selectorStart + 1, blockStart).trim();
-}
-function readPrefixSinceLastBlockBoundary(rawCss, position) {
-	let start = position - 1;
-	while (start >= 0) {
-		const ch = rawCss[start];
-		if (ch === "{" || ch === "}") break;
-		start--;
-	}
-	return rawCss.slice(start + 1, position);
-}
-function parseSimpleParentPseudoSelectorList(selectorText) {
-	const parts = selectorText.split(",").map((part) => part.trim()).filter(Boolean);
-	if (parts.length === 0) return null;
-	const pseudos = [];
-	for (const part of parts) {
-		const match = part.match(/^&(:[a-z-]+(?:\([^)]*\))?)$/i);
-		if (!match?.[1]) return null;
-		pseudos.push(match[1]);
-	}
-	return pseudos;
-}
-/**
-* Builds a `stylex.when.ancestor(pseudo, marker?)` AST call expression.
-*/
-function makeAncestorKeyExpr(j, pseudo, markerVarName) {
-	const callArgs = [j.literal(pseudo)];
-	if (markerVarName) callArgs.push(j.identifier(markerVarName));
-	return j.callExpression(j.memberExpression(j.memberExpression(j.identifier("stylex"), j.identifier("when")), j.identifier("ancestor")), callArgs);
-}
-/**
-* Builds a `stylex.when.descendant(":is(*)", marker)` AST call expression.
-* Used for `&:has(${Component})` selectors where styles apply to self
-* when a descendant matching the marker is present.
-* Uses `:is(*)` as a required pseudo argument (StyleX API mandates a pseudo string).
-*/
-function makeDescendantKeyExpr(j, markerVarName) {
-	return j.callExpression(j.memberExpression(j.memberExpression(j.identifier("stylex"), j.identifier("when")), j.identifier("descendant")), [j.literal(":is(*)"), j.identifier(markerVarName)]);
-}
-/**
-* Creates an AST key node for a CSS property name.
-* For CSS variables (e.g., --component-width), returns a string literal.
-* For regular property names (e.g., backgroundColor), returns an identifier.
-*/
-function makeCssPropKey(j, prop) {
-	if (!prop.match(/^[a-zA-Z_$][a-zA-Z0-9_$]*$/)) return j.literal(prop);
-	return j.identifier(prop);
-}
-/**
-* Converts a CSS property name to a valid JavaScript identifier.
-* For CSS variables (e.g., --component-width), converts to camelCase (componentWidth).
-* For regular property names (e.g., backgroundColor), returns as-is.
-*
-* When `avoidNames` is provided, appends "Value" to the result if it would
-* conflict with an existing binding (e.g., a top-level import). This prevents
-* `no-shadow` lint errors when the generated identifier becomes a function
-* parameter name.
-*/
-function cssPropertyToIdentifier(prop, avoidNames) {
-	let name;
-	if (prop.startsWith("--")) name = prop.slice(2).replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
-	else name = prop;
-	if (avoidNames?.has(name)) return `${name}Value`;
-	return name;
-}
-/**
-* Get or create a pseudo bucket for a relation override style key.
-* Registers the override in `relationOverrides` if not already present.
-*/
-function getOrCreateRelationOverrideBucket(overrideStyleKey, parentStyleKey, childStyleKey, ancestorPseudo, relationOverrides, relationOverridePseudoBuckets, childExtraStyleKeys) {
-	if (!relationOverridePseudoBuckets.has(overrideStyleKey)) relationOverrides.push({
-		parentStyleKey,
-		childStyleKey,
-		overrideStyleKey,
-		childExtraStyleKeys
-	});
-	else if (childExtraStyleKeys?.length) {
-		const existing = relationOverrides.find((o) => o.overrideStyleKey === overrideStyleKey);
-		if (existing && !existing.childExtraStyleKeys?.length) existing.childExtraStyleKeys = childExtraStyleKeys;
-	}
-	let pseudoBuckets = relationOverridePseudoBuckets.get(overrideStyleKey);
-	if (!pseudoBuckets) {
-		pseudoBuckets = /* @__PURE__ */ new Map();
-		relationOverridePseudoBuckets.set(overrideStyleKey, pseudoBuckets);
-	}
-	let bucket = pseudoBuckets.get(ancestorPseudo);
-	if (!bucket) {
-		bucket = {};
-		pseudoBuckets.set(ancestorPseudo, bucket);
-	}
-	return bucket;
-}
-function readNextNonWhitespace(rawCss, position) {
-	for (let i = position; i < rawCss.length; i++) {
-		const ch = rawCss[i];
-		if (!/\s/.test(ch)) return {
-			index: i,
-			value: ch
-		};
-	}
-	return null;
-}
-/**
-* Creates an object property for a CSS property with shorthand support.
-* Uses shorthand ({ color }) for regular properties when key matches value,
-* but never for CSS variables (which need string literal keys).
-*/
-function makeCssProperty(j, cssProp, valueIdentifierName) {
-	const key = makeCssPropKey(j, cssProp);
-	const p = j.property("init", key, j.identifier(valueIdentifierName));
-	if (key.type === "Identifier" && key.name === valueIdentifierName) p.shorthand = true;
-	return p;
-}
-//#endregion
 //#region src/internal/lower-rules/animation.ts
 /**
 * Handles animation declarations that reference keyframes.
@@ -10405,18 +11038,24 @@ function detectCascadeConflictStep(ctx) {
 		const importEntry = importMap.get(baseIdent);
 		if (!importEntry || importEntry.source.kind !== "absolutePath") continue;
 		const importedPath = importEntry.source.value;
-		if (transformedFiles && pathSetContainsWithExtensionFallback(importedPath, transformedFiles)) continue;
+		const definition = resolveImportedDefinition(ctx, importedPath, importEntry.importedName) ?? {
+			path: importedPath,
+			importedName: importEntry.importedName
+		};
+		if (transformedFiles && (pathSetContainsWithExtensionFallback(importedPath, transformedFiles) || pathSetContainsWithExtensionFallback(definition.path, transformedFiles))) continue;
 		if (ctx.options.transformMode === "leavesOnly" && ctx.options.globalLeafKeys?.size) {
-			if (globalLeafKeyExists(ctx.options.globalLeafKeys, importedPath, importEntry.importedName, importEntry.importedName === "default")) continue;
+			if (globalLeafKeyExists(ctx.options.globalLeafKeys, definition.path, definition.importedName, definition.importedName === "default")) continue;
 		}
-		if (!(styledDefFiles && resolveStyledDefFile(importedPath, styledDefFiles) || scanFileForStyledDefs(importedPath))) continue;
+		if (!(styledDefFiles && resolveStyledDefFile(definition.path, styledDefFiles) || scanFileForStyledDefs(definition.path, definition.importedName, ctx.options.resolveModule))) continue;
 		ctx.warnings.push({
 			severity: "warning",
 			type: "styled(ImportedComponent) wraps a component whose file uses styled-components — convert the base component's file first to avoid CSS cascade conflicts",
 			loc: decl.loc,
 			context: {
 				component: decl.localName,
-				base: baseIdent
+				base: baseIdent,
+				importedPath,
+				definitionPath: definition.path
 			}
 		});
 		return returnResult({
@@ -10426,6 +11065,15 @@ function detectCascadeConflictStep(ctx) {
 	}
 	return CONTINUE;
 }
+function resolveImportedDefinition(ctx, importedPath, importedName) {
+	const resolve$2 = ctx.options.resolveModule;
+	if (!resolve$2) return null;
+	const resolved = resolveBarrelReExportBinding(resolve(importedPath), importedName, (specifier, fromFile) => resolve$2(fromFile, specifier) ?? null, readResolvedFile);
+	return resolved ? {
+		path: resolved.filePath,
+		importedName: resolved.exportedName
+	} : null;
+}
 /** Common TypeScript/JavaScript file extensions to try when matching import paths to styledDefFiles keys. */
 const EXTENSIONS = [
 	".tsx",
@@ -10496,23 +11144,91 @@ function pathCandidates(filePath) {
 * Fallback: read an imported file and scan for styled-component definitions.
 * Used when styledDefFiles is not available (single-file mode, tests without prepass).
 */
-function scanFileForStyledDefs(importedPath) {
-	const source = tryReadFile(importedPath);
-	if (!source || !source.includes("styled-components")) return;
+function scanFileForStyledDefs(importedPath, importedName, resolveModule, visited = /* @__PURE__ */ new Set()) {
+	const file = tryReadFileWithPath(importedPath);
+	if (!file || visited.has(file.path)) return;
+	visited.add(file.path);
+	const source = file.source;
 	const names = /* @__PURE__ */ new Set();
-	STYLED_DEF_RE.lastIndex = 0;
-	for (const m of source.matchAll(STYLED_DEF_RE)) if (m[1]) names.add(m[1]);
-	return names.size > 0 ? names : void 0;
+	if (source.includes("styled-components")) {
+		STYLED_DEF_RE.lastIndex = 0;
+		for (const m of source.matchAll(STYLED_DEF_RE)) if (m[1]) names.add(m[1]);
+	}
+	if (names.size > 0) return names;
+	if (!importedName) return;
+	for (const reExport of reExportPaths(source, file.path, importedName, resolveModule)) {
+		const nested = scanFileForStyledDefs(reExport.path, reExport.importedName, resolveModule, visited);
+		if (nested) return nested;
+	}
 }
 /**
 * Try reading a file at the given path, with extension fallback.
 * Import paths may lack extensions; tries exact match then common extensions.
 */
 function tryReadFile(importedPath) {
+	return tryReadFileWithPath(importedPath)?.source;
+}
+function tryReadFileWithPath(importedPath) {
 	for (const candidate of pathCandidates(importedPath)) try {
-		return readFileSync(candidate, "utf-8");
+		return {
+			path: toRealPath(candidate),
+			source: readFileSync(candidate, "utf-8")
+		};
 	} catch {}
 }
+function reExportPaths(source, filePath, importedName, resolveModule) {
+	const paths = [];
+	for (const match of source.matchAll(/export\s*\{([^}]+)\}\s*from\s*["']([^"']+)["']/g)) {
+		const specifiers = match[1] ?? "";
+		const specifier = match[2];
+		if (!specifier) continue;
+		const nextImportedName = getReExportedSourceName(specifiers, importedName);
+		if (!nextImportedName) continue;
+		const resolved = resolveReExportSpecifier(filePath, specifier, resolveModule);
+		if (resolved) paths.push({
+			path: resolved,
+			importedName: nextImportedName
+		});
+	}
+	for (const match of source.matchAll(/export\s*\*\s*from\s*["']([^"']+)["']/g)) {
+		const specifier = match[1];
+		if (!specifier || importedName === "default") continue;
+		const resolved = resolveReExportSpecifier(filePath, specifier, resolveModule);
+		if (resolved && fileExportsNameThroughReExports(resolved, importedName, resolveModule)) paths.push({
+			path: resolved,
+			importedName
+		});
+	}
+	return paths;
+}
+function resolveReExportSpecifier(fromFile, specifier, resolveModule) {
+	if (isRelativeSpecifier(specifier)) return resolve(dirname(fromFile), specifier);
+	return resolveModule?.(fromFile, specifier);
+}
+function fileExportsNameThroughReExports(importedPath, importedName, resolveModule, visited = /* @__PURE__ */ new Set()) {
+	const file = tryReadFileWithPath(importedPath);
+	if (!file || visited.has(file.path)) return false;
+	visited.add(file.path);
+	if (fileExports(file.source, importedName)) return true;
+	for (const match of file.source.matchAll(/export\s*\{([^}]+)\}\s*from\s*["']([^"']+)["']/g)) {
+		const specifiers = match[1] ?? "";
+		const specifier = match[2];
+		if (!specifier || !getReExportedSourceName(specifiers, importedName)) continue;
+		if (resolveReExportSpecifier(file.path, specifier, resolveModule)) return true;
+	}
+	for (const match of file.source.matchAll(/export\s*\*\s*from\s*["']([^"']+)["']/g)) {
+		const specifier = match[1];
+		if (!specifier) continue;
+		const resolved = resolveReExportSpecifier(file.path, specifier, resolveModule);
+		if (resolved && fileExportsNameThroughReExports(resolved, importedName, resolveModule, visited)) return true;
+	}
+	return false;
+}
+function readResolvedFile(importedPath) {
+	const source = tryReadFile(importedPath);
+	if (source === void 0) throw new Error(`Unable to read ${importedPath}`);
+	return source;
+}
 //#endregion
 //#region src/internal/transform-steps/detect-partial-cascade-conflict.ts
 /**
@@ -11008,7 +11724,9 @@ function canResolveBaseFromAttrs(attrsInfo) {
 	if (attrsInfo.sourceKind === "function") return false;
 	if (attrsInfo.sourceKind !== "object") return false;
 	if (attrsInfo.hasUnsupportedValues) return false;
+	if (Object.values(attrsInfo.staticAttrs).some((value) => !isStaticLiteral(value))) return false;
 	if ((attrsInfo.defaultAttrs?.length ?? 0) > 0) return false;
+	if ((attrsInfo.dynamicAttrs?.length ?? 0) > 0) return false;
 	if ((attrsInfo.conditionalAttrs?.length ?? 0) > 0) return false;
 	if ((attrsInfo.invertedBoolAttrs?.length ?? 0) > 0) return false;
 	return true;
@@ -11730,7 +12448,10 @@ function isImportedLeafBinding(source, ident, globalLeafKeys, resolveModule, abs
 	const initialDefFile = resolve$1(importInfo.source, absFile);
 	if (!initialDefFile) return false;
 	const cachedRead = (p) => readFileSync(p, "utf-8");
-	return importedLeafKeyExists(globalLeafKeys, toRealPath(resolveBarrelReExport(initialDefFile, importInfo.isDefault ? "default" : importInfo.exportedName, resolve$1, cachedRead) ?? initialDefFile), importInfo.exportedName, importInfo.isDefault, cachedRead);
+	const reExport = resolveBarrelReExportBinding(initialDefFile, importInfo.isDefault ? "default" : importInfo.exportedName, resolve$1, cachedRead);
+	const defFile = reExport?.filePath ?? initialDefFile;
+	const exportedName = reExport?.exportedName ?? importInfo.exportedName;
+	return importedLeafKeyExists(globalLeafKeys, toRealPath(defFile), exportedName, exportedName === "default" || importInfo.isDefault, cachedRead);
 }
 function importedLeafKeyExists(globalLeafKeys, defFile, exportedName, allowDefaultFallback, cachedRead) {
 	if (globalLeafKeys.has(`${defFile}:${exportedName}`)) return true;
@@ -12705,7 +13426,7 @@ function emitBridgeExportsStep(ctx) {
 *   ```
 */
 function emitStyleMerging(args) {
-	const { j, emitter, styleArgs: rawStyleArgs, classNameId, styleId, allowClassNameProp, allowStyleProp, allowSxProp, inlineStyleProps = [], staticClassNameExpr, isIntrinsicElement = true, wrappedAcceptsSxProp = false, keepStylePropSeparate = false } = args;
+	const { j, emitter, styleArgs: rawStyleArgs, classNameId, styleId, allowClassNameProp, allowStyleProp, allowSxProp, inlineStyleProps = [], staticStyleExpr, staticClassNameExpr, isIntrinsicElement = true, wrappedAcceptsSxProp = false, keepStylePropSeparate = false } = args;
 	const { styleMerger, emptyStyleKeys, stylesIdentifier, ancestorSelectorParents, crossFileMarkers, parentsNeedingDefaultMarker, emitTypes } = emitter;
 	const styleArgs = filterEmptyStyleArgs({
 		styleArgs: rawStyleArgs,
@@ -12733,10 +13454,11 @@ function emitStyleMerging(args) {
 		allowClassNameProp,
 		allowStyleProp,
 		inlineStyleProps,
+		staticStyleExpr,
 		staticClassNameExpr,
 		emitTypes
 	});
-	if (keepStylePropSeparate && allowStyleProp && !wrappedAcceptsSxProp && inlineStyleProps.length === 0) return emitVerbosePattern({
+	if (keepStylePropSeparate && allowStyleProp && !wrappedAcceptsSxProp && inlineStyleProps.length === 0 && !staticStyleExpr) return emitVerbosePattern({
 		j,
 		styleArgs,
 		classNameId,
@@ -12748,8 +13470,8 @@ function emitStyleMerging(args) {
 		staticClassNameExpr,
 		emitTypes
 	});
-	if (wrappedAcceptsSxProp && inlineStyleProps.length === 0 && !staticClassNameExpr) return buildSxOnlyResult(j, styleArgs, { normalizeOptionalEntries: true });
-	if (wrappedAcceptsSxProp && inlineStyleProps.length === 0 && staticClassNameExpr) return buildSxWithExternalPropsResult({
+	if (wrappedAcceptsSxProp && inlineStyleProps.length === 0 && !staticStyleExpr && !staticClassNameExpr) return buildSxOnlyResult(j, styleArgs, { normalizeOptionalEntries: true });
+	if (wrappedAcceptsSxProp && inlineStyleProps.length === 0 && !staticStyleExpr && staticClassNameExpr) return buildSxWithExternalPropsResult({
 		j,
 		styleArgs,
 		classNameId,
@@ -12758,7 +13480,7 @@ function emitStyleMerging(args) {
 		allowStyleProp,
 		staticClassNameExpr
 	});
-	if (!allowClassNameProp && !allowStyleProp && inlineStyleProps.length === 0 && !staticClassNameExpr) {
+	if (!allowClassNameProp && !allowStyleProp && inlineStyleProps.length === 0 && !staticStyleExpr && !staticClassNameExpr) {
 		const sid = emitter.stylesIdentifier;
 		const hasLocalRef = styleArgs.some((a) => j([a]).find(j.Identifier, { name: sid }).size() > 0);
 		if (emitter.useSxProp && isIntrinsicElement && hasLocalRef) return buildSxOnlyResult(j, styleArgs);
@@ -12772,7 +13494,7 @@ function emitStyleMerging(args) {
 			styleAttr: null
 		};
 	}
-	if (styleMerger && (allowClassNameProp || allowStyleProp)) return emitWithMerger({
+	if (styleMerger && (allowClassNameProp || allowStyleProp || staticStyleExpr)) return emitWithMerger({
 		j,
 		styleMerger,
 		styleArgs,
@@ -12781,6 +13503,7 @@ function emitStyleMerging(args) {
 		allowClassNameProp,
 		allowStyleProp,
 		inlineStyleProps,
+		staticStyleExpr,
 		staticClassNameExpr,
 		emitTypes
 	});
@@ -12793,6 +13516,7 @@ function emitStyleMerging(args) {
 		allowStyleProp,
 		allowSxProp: allowSxProp || wrappedAcceptsSxProp,
 		inlineStyleProps,
+		staticStyleExpr,
 		staticClassNameExpr,
 		emitTypes
 	});
@@ -12812,12 +13536,16 @@ function filterEmptyStyleArgs(args) {
 	return styleArgs.filter((arg) => !isEmptyStyleArg(arg));
 }
 function emitWithoutStylex(args) {
-	const { j, classNameId, styleId, allowClassNameProp, allowStyleProp, inlineStyleProps, staticClassNameExpr, emitTypes } = args;
+	const { j, classNameId, styleId, allowClassNameProp, allowStyleProp, inlineStyleProps, staticStyleExpr, staticClassNameExpr, emitTypes } = args;
 	const classNameAttr = allowClassNameProp ? classNameId : staticClassNameExpr ?? null;
 	let styleAttr = null;
-	if (allowStyleProp) if (inlineStyleProps.length > 0) styleAttr = maybeCastStyleForCustomProps(j, j.objectExpression([...inlineStyleProps.map((p) => inlineStyleProperty(j, p)), j.spreadElement(styleId)]), inlineStyleProps, emitTypes);
+	if (allowStyleProp) if (inlineStyleProps.length > 0 || staticStyleExpr) styleAttr = maybeCastStyleForCustomProps(j, j.objectExpression([
+		...staticStyleExpr ? [j.spreadElement(staticStyleExpr)] : [],
+		...inlineStyleProps.map((p) => inlineStyleProperty(j, p)),
+		j.spreadElement(styleId)
+	]), inlineStyleProps, emitTypes);
 	else styleAttr = styleId;
-	else if (inlineStyleProps.length > 0) styleAttr = maybeCastStyleForCustomProps(j, j.objectExpression(inlineStyleProps.map((p) => inlineStyleProperty(j, p))), inlineStyleProps, emitTypes);
+	else if (inlineStyleProps.length > 0 || staticStyleExpr) styleAttr = maybeCastStyleForCustomProps(j, staticStyleExpr && inlineStyleProps.length === 0 ? staticStyleExpr : j.objectExpression([...staticStyleExpr ? [j.spreadElement(staticStyleExpr)] : [], ...inlineStyleProps.map((p) => inlineStyleProperty(j, p))]), inlineStyleProps, emitTypes);
 	return {
 		needsSxVar: false,
 		sxDecl: null,
@@ -12832,7 +13560,7 @@ function emitWithoutStylex(args) {
 * Generates the merger function call pattern.
 */
 function emitWithMerger(args) {
-	const { j, styleMerger, styleArgs, classNameId, styleId, allowClassNameProp, allowStyleProp, inlineStyleProps, staticClassNameExpr, emitTypes } = args;
+	const { j, styleMerger, styleArgs, classNameId, styleId, allowClassNameProp, allowStyleProp, inlineStyleProps, staticStyleExpr, staticClassNameExpr, emitTypes } = args;
 	const firstStyleArg = styleArgs[0];
 	const mergerArgs = [styleArgs.length === 1 && firstStyleArg ? firstStyleArg : j.arrayExpression(styleArgs)];
 	const classNameArg = buildMergerClassNameArg({
@@ -12841,15 +13569,16 @@ function emitWithMerger(args) {
 		allowClassNameProp,
 		staticClassNameExpr
 	});
-	if (allowClassNameProp || allowStyleProp || classNameArg) {
+	if (allowClassNameProp || allowStyleProp || classNameArg || staticStyleExpr) {
 		if (classNameArg) mergerArgs.push(classNameArg);
-		else if (allowStyleProp) mergerArgs.push(j.identifier("undefined"));
-		if (allowStyleProp) if (inlineStyleProps.length > 0) mergerArgs.push(maybeCastStyleForCustomProps(j, j.objectExpression([...inlineStyleProps.map((p) => inlineStyleProperty(j, p)), j.spreadElement(styleId)]), inlineStyleProps, emitTypes));
+		else if (allowStyleProp || staticStyleExpr || inlineStyleProps.length > 0) mergerArgs.push(j.identifier("undefined"));
+		if (allowStyleProp) if (inlineStyleProps.length > 0 || staticStyleExpr) mergerArgs.push(maybeCastStyleForCustomProps(j, j.objectExpression([
+			...staticStyleExpr ? [j.spreadElement(staticStyleExpr)] : [],
+			...inlineStyleProps.map((p) => inlineStyleProperty(j, p)),
+			j.spreadElement(styleId)
+		]), inlineStyleProps, emitTypes));
 		else mergerArgs.push(styleId);
-		else if (inlineStyleProps.length > 0) {
-			mergerArgs.push(j.identifier("undefined"));
-			mergerArgs.push(maybeCastStyleForCustomProps(j, j.objectExpression(inlineStyleProps.map((p) => inlineStyleProperty(j, p))), inlineStyleProps, emitTypes));
-		}
+		else if (inlineStyleProps.length > 0 || staticStyleExpr) mergerArgs.push(maybeCastStyleForCustomProps(j, staticStyleExpr && inlineStyleProps.length === 0 ? staticStyleExpr : j.objectExpression([...staticStyleExpr ? [j.spreadElement(staticStyleExpr)] : [], ...inlineStyleProps.map((p) => inlineStyleProperty(j, p))]), inlineStyleProps, emitTypes));
 	}
 	return {
 		needsSxVar: false,
@@ -12883,7 +13612,7 @@ function buildClassNameAttributeExpr(args) {
 * Generates the verbose className/style merging pattern.
 */
 function emitVerbosePattern(args) {
-	const { j, styleArgs, classNameId, styleId, allowClassNameProp, allowStyleProp, allowSxProp, inlineStyleProps, staticClassNameExpr, emitTypes } = args;
+	const { j, styleArgs, classNameId, styleId, allowClassNameProp, allowStyleProp, allowSxProp, inlineStyleProps, staticStyleExpr, staticClassNameExpr, emitTypes } = args;
 	const sxVarName = allowSxProp ? "_sx" : "sx";
 	const stylexPropsCall = j.callExpression(j.memberExpression(j.identifier("stylex"), j.identifier("props")), styleArgs);
 	const sxDecl = j.variableDeclaration("const", [j.variableDeclarator(j.identifier(sxVarName), stylexPropsCall)]);
@@ -12897,9 +13626,10 @@ function emitVerbosePattern(args) {
 		classNameAttr = j.callExpression(j.memberExpression(j.callExpression(j.memberExpression(j.arrayExpression(parts), j.identifier("filter")), [j.identifier("Boolean")]), j.identifier("join")), [j.literal(" ")]);
 	}
 	let styleAttr = null;
-	if (allowStyleProp || inlineStyleProps.length > 0) {
+	if (allowStyleProp || inlineStyleProps.length > 0 || staticStyleExpr) {
 		const spreads = [
 			j.spreadElement(j.memberExpression(j.identifier(sxVarName), j.identifier("style"))),
+			...staticStyleExpr ? [j.spreadElement(staticStyleExpr)] : [],
 			...inlineStyleProps.map((p) => inlineStyleProperty(j, p)),
 			...allowStyleProp ? [j.spreadElement(styleId)] : []
 		];
@@ -13757,17 +14487,40 @@ function buildInvertedBoolAttrs(j, args) {
 	const { invertedBoolAttrs, testExprFor } = args;
 	return invertedBoolAttrs.map((inv) => j.jsxAttribute(j.jsxIdentifier(inv.attrName), j.jsxExpressionContainer(j.binaryExpression("!==", testExprFor(inv.jsxProp), j.booleanLiteral(true)))));
 }
+function buildDynamicAttrsFromProps(j, args) {
+	const { dynamicAttrs, propExprFor } = args;
+	return dynamicAttrs.map((attr) => {
+		const propExpr = propExprFor(attr.jsxProp);
+		const valueExpr = attr.defaultValue === void 0 ? propExpr : j.conditionalExpression(j.binaryExpression("===", propExpr, j.identifier("undefined")), literalExprForAttrDefault(j, attr.defaultValue), propExpr);
+		return j.jsxAttribute(j.jsxIdentifier(attr.attrName), j.jsxExpressionContainer(valueExpr));
+	});
+}
+function literalExprForAttrDefault(j, value) {
+	if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") return j.literal(value);
+	if (value === null) return j.literal(null);
+	return j.identifier("undefined");
+}
 function buildStaticAttrsFromRecord(j, staticAttrs, options) {
-	const booleanTrueAsShorthand = options?.booleanTrueAsShorthand ?? true;
 	const attrs = [];
-	for (const [key, value] of Object.entries(staticAttrs)) if (typeof value === "string") attrs.push(j.jsxAttribute(j.jsxIdentifier(key), j.literal(value)));
-	else if (typeof value === "boolean") if (value) attrs.push(j.jsxAttribute(j.jsxIdentifier(key), booleanTrueAsShorthand ? null : j.jsxExpressionContainer(j.booleanLiteral(true))));
-	else attrs.push(j.jsxAttribute(j.jsxIdentifier(key), j.jsxExpressionContainer(j.literal(false))));
-	else if (typeof value === "number") attrs.push(j.jsxAttribute(j.jsxIdentifier(key), j.jsxExpressionContainer(j.literal(value))));
-	else if (value === void 0) attrs.push(j.jsxAttribute(j.jsxIdentifier(key), j.jsxExpressionContainer(j.identifier("undefined"))));
-	else if (value === null) attrs.push(j.jsxAttribute(j.jsxIdentifier(key), j.jsxExpressionContainer(j.literal(null))));
+	for (const [key, value] of Object.entries(staticAttrs)) {
+		const attr = buildStaticAttrFromValue(j, key, value, options);
+		if (attr) attrs.push(attr);
+	}
 	return attrs;
 }
+function buildStaticAttrFromValue(j, key, value, options) {
+	const booleanTrueAsShorthand = options?.booleanTrueAsShorthand ?? true;
+	if (typeof value === "string") return j.jsxAttribute(j.jsxIdentifier(key), j.literal(value));
+	if (typeof value === "boolean") return j.jsxAttribute(j.jsxIdentifier(key), value && booleanTrueAsShorthand ? null : j.jsxExpressionContainer(j.booleanLiteral(value)));
+	if (typeof value === "number") return j.jsxAttribute(j.jsxIdentifier(key), j.jsxExpressionContainer(j.literal(value)));
+	if (value === void 0) return j.jsxAttribute(j.jsxIdentifier(key), j.jsxExpressionContainer(j.identifier("undefined")));
+	if (value === null) return j.jsxAttribute(j.jsxIdentifier(key), j.jsxExpressionContainer(j.literal(null)));
+	if (isStaticAttrExpression(value)) return j.jsxAttribute(j.jsxIdentifier(key), j.jsxExpressionContainer(cloneAstNode(value)));
+	return null;
+}
+function isStaticAttrExpression(value) {
+	return !!value && typeof value === "object" && typeof value.type === "string";
+}
 /**
 * Build all attrs from attrsInfo in the correct order:
 * defaultAttrs, conditionalAttrs, invertedBoolAttrs, staticAttrs
@@ -13997,8 +14750,11 @@ function escapeTemplateRaw(s) {
 	return s.replace(/\\|`|\$\{/g, "\\$&");
 }
 function buildStaticClassNameExpr(j, staticClassName, bridgeClassVar, extraClassNames) {
-	if (!(extraClassNames && extraClassNames.length > 0)) {
-		if (staticClassName && bridgeClassVar) {
+	const hasExtra = extraClassNames && extraClassNames.length > 0;
+	const staticClassNameExpr = typeof staticClassName === "string" ? void 0 : isExpressionLike(staticClassName) ? cloneAstNode(staticClassName) : void 0;
+	if (!hasExtra) {
+		if (staticClassNameExpr && bridgeClassVar) return j.callExpression(j.memberExpression(j.callExpression(j.memberExpression(j.arrayExpression([staticClassNameExpr, j.identifier(bridgeClassVar)]), j.identifier("filter")), [j.identifier("Boolean")]), j.identifier("join")), [j.literal(" ")]);
+		if (typeof staticClassName === "string" && bridgeClassVar) {
 			const raw = escapeTemplateRaw(`${staticClassName} `);
 			return j.templateLiteral([j.templateElement({
 				raw,
@@ -14009,16 +14765,29 @@ function buildStaticClassNameExpr(j, staticClassName, bridgeClassVar, extraClass
 			}, true)], [j.identifier(bridgeClassVar)]);
 		}
 		if (bridgeClassVar) return j.identifier(bridgeClassVar);
-		if (staticClassName) return j.literal(staticClassName);
+		if (staticClassNameExpr) return staticClassNameExpr;
+		if (typeof staticClassName === "string" && staticClassName) return j.literal(staticClassName);
 		return;
 	}
+	if (staticClassNameExpr) return buildClassNameJoinExpr$1(j, [
+		staticClassNameExpr,
+		...bridgeClassVar ? [j.identifier(bridgeClassVar)] : [],
+		...(extraClassNames ?? []).map((extra) => extra.expr)
+	]);
 	const expressions = [];
 	const quasis = [];
-	const leadingText = staticClassName ? `${escapeTemplateRaw(staticClassName)} ` : "";
+	const leadingText = typeof staticClassName === "string" && staticClassName ? `${escapeTemplateRaw(staticClassName)} ` : "";
 	quasis.push(j.templateElement({
 		raw: leadingText,
-		cooked: staticClassName ? `${staticClassName} ` : ""
+		cooked: typeof staticClassName === "string" && staticClassName ? `${staticClassName} ` : ""
 	}, false));
+	if (staticClassNameExpr) {
+		expressions.push(staticClassNameExpr);
+		quasis.push(j.templateElement({
+			raw: " ",
+			cooked: " "
+		}, false));
+	}
 	if (bridgeClassVar) {
 		expressions.push(j.identifier(bridgeClassVar));
 		quasis.push(j.templateElement({
@@ -14038,15 +14807,18 @@ function buildStaticClassNameExpr(j, staticClassName, bridgeClassVar, extraClass
 		}, false));
 	}
 	if (expressions.length === 0) {
-		if (staticClassName) return j.literal(staticClassName);
+		if (typeof staticClassName === "string" && staticClassName) return j.literal(staticClassName);
 		return;
 	}
-	if (!staticClassName && !bridgeClassVar) quasis[0] = j.templateElement({
+	if (!staticClassName && !staticClassNameExpr && !bridgeClassVar) quasis[0] = j.templateElement({
 		raw: "",
 		cooked: ""
 	}, false);
 	return j.templateLiteral(quasis, expressions);
 }
+function buildClassNameJoinExpr$1(j, parts) {
+	return j.callExpression(j.memberExpression(j.callExpression(j.memberExpression(j.arrayExpression(parts), j.identifier("filter")), [j.identifier("Boolean")]), j.identifier("join")), [j.literal(" ")]);
+}
 /**
 * Extracts a static className value (if present) from attrsInfo.staticAttrs
 * so it can be passed to the style merger separately, and returns the
@@ -14070,7 +14842,7 @@ function splitAttrsInfo(j, attrsInfo, bridgeClassVar, extraClassNames) {
 		staticAttrs: attrsInfo.staticAttrs ?? {},
 		conditionalAttrs: attrsInfo.conditionalAttrs ?? []
 	};
-	const hasStaticClassName = typeof className === "string";
+	const hasStaticClassName = typeof className === "string" || isExpressionLike(className);
 	const hasExtraClassNames = extraClassNames && extraClassNames.length > 0;
 	if (!hasStaticClassName && !bridgeClassVar && !hasExtraClassNames) return {
 		attrsInfo: normalized,
@@ -14087,6 +14859,9 @@ function splitAttrsInfo(j, attrsInfo, bridgeClassVar, extraClassNames) {
 		staticClassNameExpr: buildStaticClassNameExpr(j, hasStaticClassName ? className : void 0, bridgeClassVar, extraClassNames)
 	};
 }
+function isExpressionLike(value) {
+	return !!value && typeof value === "object" && typeof value.type === "string";
+}
 /**
 * Build variant dimension lookup expressions for StyleX variants recipe
 * pattern.
@@ -15417,7 +16192,7 @@ var WrapperEmitter = class {
 		return false;
 	}
 	emitMinimalWrapper(args) {
-		const { localName, tagName, propsTypeName, inlineTypeText, styleArgs, destructureProps, propDefaults, allowClassNameProp = false, allowStyleProp = false, allowAsProp = false, includeRefProp = false, includeRest = true, defaultAttrs = [], conditionalAttrs = [], invertedBoolAttrs = [], staticAttrs = {}, inlineStyleProps = [], attrsAsTag, bridgeClassVar } = args;
+		const { localName, tagName, propsTypeName, inlineTypeText, styleArgs, destructureProps, propDefaults, allowClassNameProp = false, allowStyleProp = false, allowAsProp = false, includeRefProp = false, includeRest = true, defaultAttrs = [], dynamicAttrs = [], conditionalAttrs = [], invertedBoolAttrs = [], staticAttrs = {}, attrsStaticStyleExpr, inlineStyleProps = [], attrsAsTag, bridgeClassVar } = args;
 		const { j } = this;
 		const expandedDestructureProps = new Set(destructureProps.filter(Boolean));
 		const collectCondIdentifiers = (node) => {
@@ -15479,6 +16254,7 @@ var WrapperEmitter = class {
 			else patternProps.push(this.patternProp(name));
 		}
 		for (const a of defaultAttrs) if (!expandedDestructureProps.has(a.jsxProp)) patternProps.push(this.patternProp(a.jsxProp));
+		for (const attr of dynamicAttrs) if (!expandedDestructureProps.has(attr.jsxProp)) patternProps.push(this.patternProp(attr.jsxProp));
 		let restId = includeRest ? j.identifier("rest") : null;
 		if (includeRest && restId) patternProps.push(j.restElement(restId));
 		const usePropsDirectlyForRest = includeRest && patternProps.length === 1 && patternProps[0]?.type === "RestElement";
@@ -15486,7 +16262,7 @@ var WrapperEmitter = class {
 		if (usePropsDirectlyForRest) restId = propsId;
 		const classNameId = j.identifier("className");
 		const styleId = j.identifier("style");
-		const staticClassName = typeof staticAttrs.className === "string" ? staticAttrs.className : void 0;
+		const staticClassName = staticAttrs.className;
 		const hasStaticAsFallback = allowForwardedAsProp && Object.hasOwn(staticAttrs, "as");
 		const staticAsFallback = hasStaticAsFallback ? staticAttrs.as : void 0;
 		const filteredStaticAttrs = (() => {
@@ -15507,6 +16283,7 @@ var WrapperEmitter = class {
 			allowClassNameProp,
 			allowStyleProp,
 			inlineStyleProps,
+			staticStyleExpr: attrsStaticStyleExpr,
 			staticClassNameExpr,
 			isIntrinsicElement: !allowAsProp
 		});
@@ -15519,9 +16296,11 @@ var WrapperEmitter = class {
 		for (const inv of invertedBoolAttrs) jsxAttrs.push(j.jsxAttribute(j.jsxIdentifier(inv.attrName), j.jsxExpressionContainer(j.binaryExpression("!==", j.identifier(inv.jsxProp), j.booleanLiteral(true)))));
 		if (includeRefProp) jsxAttrs.push(j.jsxAttribute(j.jsxIdentifier("ref"), j.jsxExpressionContainer(j.identifier("ref"))));
 		if (includeRest && restId) jsxAttrs.push(j.jsxSpreadAttribute(restId));
-		for (const [key, value] of Object.entries(filteredStaticAttrs)) 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(...buildDynamicAttrsFromProps(j, {
+			dynamicAttrs,
+			propExprFor: (prop) => j.identifier(prop)
+		}));
+		jsxAttrs.push(...buildStaticAttrsFromRecord(j, filteredStaticAttrs));
 		if (allowForwardedAsProp) {
 			const forwardedAsValueExpr = hasStaticAsFallback ? j.logicalExpression("??", j.identifier("forwardedAs"), this.literalExpr(staticAsFallback)) : j.identifier("forwardedAs");
 			jsxAttrs.push(j.jsxAttribute(j.jsxIdentifier("as"), j.jsxExpressionContainer(forwardedAsValueExpr)));
@@ -15531,10 +16310,10 @@ var WrapperEmitter = class {
 		else if (merging.jsxSpreadExpr) jsxAttrs.push(j.jsxSpreadAttribute(merging.jsxSpreadExpr));
 		if (merging.classNameAttr) jsxAttrs.push(j.jsxAttribute(j.jsxIdentifier("className"), j.jsxExpressionContainer(merging.classNameAttr)));
 		if (merging.styleAttr) jsxAttrs.push(j.jsxAttribute(j.jsxIdentifier("style"), j.jsxExpressionContainer(merging.styleAttr)));
-		const renderedTagName = allowAsProp ? "Component" : attrsAsTag ?? tagName;
-		const openingEl = j.jsxOpeningElement(j.jsxIdentifier(renderedTagName), jsxAttrs, isVoidTag);
+		const renderedJsxName = jsxNameFromString(j, allowAsProp ? "Component" : attrsAsTag ?? tagName);
+		const openingEl = j.jsxOpeningElement(renderedJsxName, jsxAttrs, isVoidTag);
 		const childrenExpr = usePropsChildrenDirectly ? j.memberExpression(propsId, j.identifier("children")) : j.identifier("children");
-		const jsx = j.jsxElement(openingEl, isVoidTag ? null : j.jsxClosingElement(j.jsxIdentifier(renderedTagName)), isVoidTag ? [] : [j.jsxExpressionContainer(childrenExpr)]);
+		const jsx = j.jsxElement(openingEl, isVoidTag ? null : j.jsxClosingElement(renderedJsxName), isVoidTag ? [] : [j.jsxExpressionContainer(childrenExpr)]);
 		const bodyStmts = [];
 		if (!usePropsDirectlyForRest && !usePropsChildrenDirectly) bodyStmts.push(j.variableDeclaration("const", [j.variableDeclarator(j.objectPattern(patternProps), propsId)]));
 		if (merging.sxDecl) bodyStmts.push(merging.sxDecl);
@@ -15571,6 +16350,9 @@ var WrapperEmitter = class {
 	buildInvertedBoolAttrs(args) {
 		return buildInvertedBoolAttrs(this.j, args);
 	}
+	buildDynamicAttrsFromProps(args) {
+		return buildDynamicAttrsFromProps(this.j, args);
+	}
 	buildStaticAttrsFromRecord(staticAttrs, options) {
 		return buildStaticAttrsFromRecord(this.j, staticAttrs, options);
 	}
@@ -15673,6 +16455,12 @@ function extractObjectLiteralMembers(typeText) {
 	if (last) members.push(last);
 	return members.length > 0 ? members : null;
 }
+function jsxNameFromString(j, name) {
+	if (!name.includes(".")) return j.jsxIdentifier(name);
+	const [root, ...members] = name.split(".");
+	if (!root || members.length === 0) return j.jsxIdentifier(name);
+	return members.reduce((object, member) => j.jsxMemberExpression(object, j.jsxIdentifier(member)), j.jsxIdentifier(root));
+}
 //#endregion
 //#region src/internal/emit-wrappers/compound-variants.ts
 function collectCompoundVariantKeys(compoundVariants, opts) {
@@ -16096,16 +16884,17 @@ function emitComponentWrappers(emitter) {
 		let jsxTagName;
 		if (isPolymorphicComponentWrapper) jsxTagName = j.jsxIdentifier("Component");
 		else if (renderedComponent.includes(".")) {
-			const parts = renderedComponent.split(".");
-			const firstPart = parts[0];
-			if (!firstPart) jsxTagName = j.jsxIdentifier(renderedComponent);
-			else jsxTagName = j.jsxMemberExpression(j.jsxIdentifier(firstPart), j.jsxIdentifier(parts.slice(1).join(".")));
+			const [firstPart, ...memberParts] = renderedComponent.split(".");
+			if (!firstPart || memberParts.length === 0) jsxTagName = j.jsxIdentifier(renderedComponent);
+			else jsxTagName = memberParts.reduce((object, member) => j.jsxMemberExpression(object, j.jsxIdentifier(member)), j.jsxIdentifier(firstPart));
 		} else jsxTagName = j.jsxIdentifier(renderedComponent);
 		const { attrsInfo, staticClassNameExpr } = emitter.splitAttrsInfo(d.attrsInfo, getBridgeClassVar(d), d.extraClassNames);
 		const defaultAttrs = attrsInfo?.defaultAttrs ?? [];
+		const dynamicAttrs = attrsInfo?.dynamicAttrs ?? [];
 		const staticAttrs = normalizeStaticForwardedAsAttr(attrsInfo?.staticAttrs ?? {}, shouldLowerForwardedAs);
-		const needsSxVar = allowClassNameProp || allowStyleProp || wrappedAcceptsSx || !!d.inlineStyleProps?.length || !!staticClassNameExpr;
-		const needsDestructure = destructureProps.length > 0 || needsSxVar || isPolymorphicComponentWrapper || defaultAttrs.length > 0 || shouldLowerForwardedAs || (d.supportsRefProp ?? false);
+		const attrsStaticStyleExpr = attrsInfo?.attrsStaticStyleExpr;
+		const needsSxVar = allowClassNameProp || allowStyleProp || wrappedAcceptsSx || !!d.inlineStyleProps?.length || !!attrsStaticStyleExpr || !!staticClassNameExpr;
+		const needsDestructure = destructureProps.length > 0 || needsSxVar || isPolymorphicComponentWrapper || defaultAttrs.length > 0 || dynamicAttrs.length > 0 || shouldLowerForwardedAs || (d.supportsRefProp ?? false);
 		const includeChildren = !isPolymorphicComponentWrapper && emitter.hasJsxChildrenUsage(d.localName);
 		if (needsDestructure) {
 			const childrenId = j.identifier("children");
@@ -16119,7 +16908,8 @@ function emitComponentWrappers(emitter) {
 			const wrappedComponentExpr = buildWrappedComponentExpr();
 			if (allowSxProp || wrappedAcceptsSx) styleArgs.push(sxId);
 			for (const attr of defaultAttrs) if (!destructureProps.includes(attr.jsxProp)) destructureProps.push(attr.jsxProp);
-			const canForwardClassNameStyleThroughRest = wrappedAcceptsSx && !(staticClassNameExpr || d.inlineStyleProps?.length);
+			for (const attr of dynamicAttrs) if (!destructureProps.includes(attr.jsxProp)) destructureProps.push(attr.jsxProp);
+			const canForwardClassNameStyleThroughRest = wrappedAcceptsSx && !(staticClassNameExpr || attrsStaticStyleExpr || d.inlineStyleProps?.length);
 			const destructureClassName = allowClassNameProp && !canForwardClassNameStyleThroughRest;
 			const destructureStyle = allowStyleProp && !canForwardClassNameStyleThroughRest;
 			const destructureSx = allowSxProp || wrappedAcceptsSx;
@@ -16149,6 +16939,7 @@ function emitComponentWrappers(emitter) {
 				allowStyleProp,
 				allowSxProp,
 				inlineStyleProps: d.inlineStyleProps ?? [],
+				staticStyleExpr: attrsStaticStyleExpr,
 				staticClassNameExpr,
 				isIntrinsicElement: false,
 				wrappedAcceptsSxProp: wrappedAcceptsSx,
@@ -16173,6 +16964,7 @@ function emitComponentWrappers(emitter) {
 			if (d.supportsRefProp ?? false) openingAttrs.push(j.jsxAttribute(j.jsxIdentifier("ref"), j.jsxExpressionContainer(refId)));
 			const forwardedProps = /* @__PURE__ */ new Set();
 			for (const attr of defaultAttrs) forwardedProps.add(attr.attrName);
+			for (const attr of dynamicAttrs) forwardedProps.add(attr.attrName);
 			for (const key of Object.keys(staticAttrsWithoutForwardedAsFallback)) forwardedProps.add(key);
 			const pushForwardedProp = (propName) => {
 				if (forwardedProps.has(propName)) return;
@@ -16204,8 +16996,13 @@ function emitComponentWrappers(emitter) {
 				if (!baseExplicitProps || baseExplicitProps.has(propName)) pushForwardedProp(propName);
 			}
 			for (const attr of defaultAttrs) if (attr.jsxProp !== attr.attrName && !attr.jsxProp.startsWith("$")) pushForwardedProp(attr.jsxProp);
+			for (const attr of dynamicAttrs) if (attr.jsxProp !== attr.attrName && !attr.jsxProp.startsWith("$")) pushForwardedProp(attr.jsxProp);
 			for (const propName of namespaceBooleanProps) pushForwardedProp(propName);
 			openingAttrs.push(j.jsxSpreadAttribute(restId));
+			openingAttrs.push(...emitter.buildDynamicAttrsFromProps({
+				dynamicAttrs,
+				propExprFor: (prop) => j.identifier(prop)
+			}));
 			openingAttrs.push(...emitter.buildStaticAttrsFromRecord(staticAttrsWithoutForwardedAsFallback, { booleanTrueAsShorthand: false }));
 			if (shouldLowerForwardedAs) {
 				let forwardedAsValueExpr = forwardedAsId;
@@ -16232,6 +17029,10 @@ function emitComponentWrappers(emitter) {
 			const openingAttrs = [];
 			openingAttrs.push(...emitter.buildStaticValueAttrs({ attrs: defaultAttrs }));
 			openingAttrs.push(j.jsxSpreadAttribute(propsId));
+			openingAttrs.push(...emitter.buildDynamicAttrsFromProps({
+				dynamicAttrs,
+				propExprFor: (prop) => j.memberExpression(propsId, j.identifier(prop))
+			}));
 			openingAttrs.push(...emitter.buildStaticAttrsFromRecord(staticAttrs, { booleanTrueAsShorthand: false }));
 			if (wrappedAcceptsSx) {
 				const composedStyleArgs = [...styleArgs, j.memberExpression(propsId, j.identifier("sx"))];
@@ -17005,6 +17806,7 @@ function emitIntrinsicPolymorphicWrappers(ctx) {
 			allowStyleProp,
 			allowSxProp,
 			inlineStyleProps: [],
+			staticStyleExpr: attrsInfoWithoutForwardedAsStatic?.attrsStaticStyleExpr,
 			staticClassNameExpr,
 			isIntrinsicElement: false
 		});
@@ -17014,6 +17816,10 @@ function emitIntrinsicPolymorphicWrappers(ctx) {
 				propExprFor: (prop) => j.identifier(prop)
 			}),
 			j.jsxSpreadAttribute(restId),
+			...emitter.buildDynamicAttrsFromProps({
+				dynamicAttrs: attrsInfoWithoutForwardedAsStatic?.dynamicAttrs ?? [],
+				propExprFor: (prop) => j.identifier(prop)
+			}),
 			...includesForwardedAs ? [j.jsxAttribute(j.jsxIdentifier("as"), j.jsxExpressionContainer(buildForwardedAsValueExpr(forwardedAsId, forwardedAsStaticFallback)))] : []
 		];
 		emitter.appendMergingAttrs(attrs, merging);
@@ -17079,7 +17885,7 @@ function emitShouldForwardPropWrappers(ctx) {
 		const dropPrefixFromFilter = d.shouldForwardProp?.dropPrefix;
 		const usedAttrs = emitter.getUsedAttrs(d.localName);
 		const shouldAllowAnyPrefixProps = !!dropPrefixFromFilter && (usedAttrs.has("*") || [...usedAttrs].some((n) => n.startsWith(dropPrefixFromFilter) && !extraProps.has(n)));
-		const knownPrefixProps = dropPrefixFromFilter ? [...extraProps].filter((p) => p.startsWith(dropPrefixFromFilter) && isValidIdentifierName(p)) : [];
+		const knownPrefixProps = dropPrefixFromFilter ? [...extraProps].filter((p) => p.startsWith(dropPrefixFromFilter) && isValidIdentifierName$1(p)) : [];
 		const knownPrefixPropsSet = new Set(knownPrefixProps);
 		const isExportedComponent = d.isExported ?? false;
 		const useSlimType = !isExportedComponent && !(d.supportsExternalStyles ?? false) && !d.usedAsValue;
@@ -17341,6 +18147,7 @@ function emitShouldForwardPropWrappers(ctx) {
 			allowStyleProp,
 			allowSxProp,
 			inlineStyleProps: d.inlineStyleProps ?? [],
+			staticStyleExpr: attrsInfoForJsx?.attrsStaticStyleExpr,
 			staticClassNameExpr,
 			isIntrinsicElement: !allowAsProp
 		});
@@ -17351,6 +18158,10 @@ function emitShouldForwardPropWrappers(ctx) {
 			}) : [],
 			...d.supportsRefProp ?? false ? [j.jsxAttribute(j.jsxIdentifier("ref"), j.jsxExpressionContainer(refId))] : [],
 			...includeRest ? [j.jsxSpreadAttribute(restId)] : [],
+			...emitter.buildDynamicAttrsFromProps({
+				dynamicAttrs: attrsInfoForJsx?.dynamicAttrs ?? [],
+				propExprFor: (prop) => j.identifier(prop)
+			}),
 			...includesForwardedAs ? [j.jsxAttribute(j.jsxIdentifier("as"), j.jsxExpressionContainer(buildForwardedAsValueExpr(forwardedAsId, forwardedAsStaticFallback)))] : []
 		];
 		emitter.appendMergingAttrs(openingAttrs, merging);
@@ -17383,10 +18194,11 @@ function filterAttrsForShouldForwardProp(attrsInfo, sfp) {
 	const dropSet = new Set(sfp.dropProps);
 	const dropPrefix = sfp.dropPrefix;
 	const shouldDrop = (name) => dropSet.has(name) || dropPrefix != null && name.startsWith(dropPrefix);
-	if (!((attrsInfo.defaultAttrs ?? []).some((a) => shouldDrop(a.attrName)) || attrsInfo.conditionalAttrs.some((a) => shouldDrop(a.attrName)) || (attrsInfo.invertedBoolAttrs ?? []).some((a) => shouldDrop(a.attrName)) || Object.keys(attrsInfo.staticAttrs).some(shouldDrop))) return attrsInfo;
+	if (!((attrsInfo.defaultAttrs ?? []).some((a) => shouldDrop(a.attrName)) || (attrsInfo.dynamicAttrs ?? []).some((a) => shouldDrop(a.attrName)) || attrsInfo.conditionalAttrs.some((a) => shouldDrop(a.attrName)) || (attrsInfo.invertedBoolAttrs ?? []).some((a) => shouldDrop(a.attrName)) || Object.keys(attrsInfo.staticAttrs).some(shouldDrop))) return attrsInfo;
 	return {
 		...attrsInfo,
 		defaultAttrs: (attrsInfo.defaultAttrs ?? []).filter((a) => !shouldDrop(a.attrName)),
+		dynamicAttrs: (attrsInfo.dynamicAttrs ?? []).filter((a) => !shouldDrop(a.attrName)),
 		conditionalAttrs: attrsInfo.conditionalAttrs.filter((a) => !shouldDrop(a.attrName)),
 		invertedBoolAttrs: (attrsInfo.invertedBoolAttrs ?? []).filter((a) => !shouldDrop(a.attrName)),
 		staticAttrs: Object.fromEntries(Object.entries(attrsInfo.staticAttrs).filter(([key]) => !shouldDrop(key)))
@@ -17405,7 +18217,7 @@ function buildExtraPropTypeLines(d, extraProps, skip) {
 	const staticVariantPropTypes = buildStaticVariantPropTypes(d);
 	const lines = [];
 	for (const p of extraProps) {
-		if (!isValidIdentifierName(p) || skip?.(p)) continue;
+		if (!isValidIdentifierName$1(p) || skip?.(p)) continue;
 		const variantType = variantDimByProp.get(p);
 		if (variantType) {
 			lines.push(`  ${p}?: ${variantType};`);
@@ -17559,9 +18371,11 @@ function emitSimpleWithConfigWrappers(ctx) {
 				includeRefProp: (d.supportsRefProp ?? false) || !includeRest && willForwardRef,
 				includeRest,
 				defaultAttrs: d.attrsInfo?.defaultAttrs ?? [],
+				dynamicAttrs: d.attrsInfo?.dynamicAttrs ?? [],
 				conditionalAttrs: d.attrsInfo?.conditionalAttrs ?? [],
 				invertedBoolAttrs: d.attrsInfo?.invertedBoolAttrs ?? [],
 				staticAttrs: d.attrsInfo?.staticAttrs ?? {},
+				attrsStaticStyleExpr: d.attrsInfo?.attrsStaticStyleExpr,
 				inlineStyleProps: d.inlineStyleProps ?? [],
 				attrsAsTag: d.attrsInfo?.attrsAsTag,
 				bridgeClassVar: getBridgeClassVar(d)
@@ -17595,6 +18409,7 @@ function emitSimpleWithConfigWrappers(ctx) {
 			allowStyleProp,
 			allowSxProp,
 			inlineStyleProps: [],
+			staticStyleExpr: attrsInfo?.attrsStaticStyleExpr,
 			staticClassNameExpr,
 			isIntrinsicElement: !allowAsProp
 		});
@@ -17604,7 +18419,11 @@ function emitSimpleWithConfigWrappers(ctx) {
 				propExprFor: (prop) => j.identifier(prop)
 			}),
 			...d.supportsRefProp ?? false ? [j.jsxAttribute(j.jsxIdentifier("ref"), j.jsxExpressionContainer(refId))] : [],
-			j.jsxSpreadAttribute(restId)
+			j.jsxSpreadAttribute(restId),
+			...emitter.buildDynamicAttrsFromProps({
+				dynamicAttrs: attrsInfo?.dynamicAttrs ?? [],
+				propExprFor: (prop) => j.identifier(prop)
+			})
 		];
 		emitter.appendMergingAttrs(openingAttrs, merging);
 		const openingEl = j.jsxOpeningElement(j.jsxIdentifier(allowAsProp ? "Component" : tagName), openingAttrs, false);
@@ -17722,7 +18541,7 @@ function emitSimpleExportedIntrinsicWrappers(ctx) {
 				const compoundVariantWhenKeys = collectCompoundVariantKeys(d.compoundVariants, { syntheticOnly: true });
 				for (const k of compoundVariantWhenKeys) keys.delete(k);
 				const variantDimByProp = buildVariantDimPropTypeMap(d);
-				const filtered = [...keys].filter((k) => k && isValidIdentifierName(k) && k !== "children" && k !== "className" && k !== "style" && k !== "as" && k !== "forwardedAs" && (!explicitPropNames.has(k) || variantDimByProp.has(k)));
+				const filtered = [...keys].filter((k) => k && isValidIdentifierName$1(k) && k !== "children" && k !== "className" && k !== "style" && k !== "as" && k !== "forwardedAs" && (!explicitPropNames.has(k) || variantDimByProp.has(k)));
 				if (filtered.length === 0) return "{}";
 				const staticVariantPropTypes = buildStaticVariantPropTypes(d);
 				return `{\n${filtered.map((k) => {
@@ -17904,6 +18723,7 @@ function emitSimpleExportedIntrinsicWrappers(ctx) {
 			const forwardedAsId = j.identifier("forwardedAs");
 			if (allowSxProp) styleArgs.push(sxId);
 			for (const attr of d.attrsInfo?.defaultAttrs ?? []) if (!destructureProps.includes(attr.jsxProp)) destructureProps.push(attr.jsxProp);
+			for (const attr of d.attrsInfo?.dynamicAttrs ?? []) if (!destructureProps.includes(attr.jsxProp)) destructureProps.push(attr.jsxProp);
 			const patternProps = emitter.buildDestructurePatternProps({
 				baseProps: [
 					...useAsProp ? [j.property.from({
@@ -17941,6 +18761,7 @@ function emitSimpleExportedIntrinsicWrappers(ctx) {
 				allowStyleProp,
 				allowSxProp,
 				inlineStyleProps: d.inlineStyleProps ?? [],
+				staticStyleExpr: attrsInfoWithoutForwardedAsStatic?.attrsStaticStyleExpr,
 				staticClassNameExpr,
 				isIntrinsicElement: !useAsProp
 			});
@@ -17951,6 +18772,10 @@ function emitSimpleExportedIntrinsicWrappers(ctx) {
 				}),
 				...(d.supportsRefProp ?? false) || !restId && willForwardRef ? [j.jsxAttribute(j.jsxIdentifier("ref"), j.jsxExpressionContainer(refId))] : [],
 				...restId ? [j.jsxSpreadAttribute(restId)] : [],
+				...emitter.buildDynamicAttrsFromProps({
+					dynamicAttrs: attrsInfoWithoutForwardedAsStatic?.dynamicAttrs ?? [],
+					propExprFor: (prop) => j.identifier(prop)
+				}),
 				...includesForwardedAs ? [j.jsxAttribute(j.jsxIdentifier("as"), j.jsxExpressionContainer(buildForwardedAsValueExpr(forwardedAsId, forwardedAsStaticFallback)))] : []
 			];
 			emitter.appendMergingAttrs(openingAttrs, merging);
@@ -17988,9 +18813,11 @@ function emitSimpleExportedIntrinsicWrappers(ctx) {
 			includeRefProp: (d.supportsRefProp ?? false) || !shouldIncludeRest && willForwardRef,
 			includeRest: shouldIncludeRest,
 			defaultAttrs: d.attrsInfo?.defaultAttrs ?? [],
+			dynamicAttrs: d.attrsInfo?.dynamicAttrs ?? [],
 			conditionalAttrs: d.attrsInfo?.conditionalAttrs ?? [],
 			invertedBoolAttrs: d.attrsInfo?.invertedBoolAttrs ?? [],
 			staticAttrs: d.attrsInfo?.staticAttrs ?? {},
+			attrsStaticStyleExpr: d.attrsInfo?.attrsStaticStyleExpr,
 			inlineStyleProps: d.inlineStyleProps ?? [],
 			attrsAsTag: d.attrsInfo?.attrsAsTag,
 			bridgeClassVar: getBridgeClassVar(d)
@@ -20383,7 +21210,7 @@ function replaceThemeRefsWithHookVar(expr, paramName, info) {
 * Order matters: more-specific transforms first, then fall back to prop-access emission.
 */
 function resolveDynamicNode(node, ctx) {
-	return tryResolveThemeAccess(node, ctx) ?? tryResolveCallExpression(node, ctx) ?? tryResolveArrowFnHelperCallWithThemeArg(node, ctx) ?? tryResolveArrowFnPreservedRuntimeCall(node, ctx) ?? tryResolveArrowFnCallWithConditionalArgs(node, ctx) ?? tryResolveConditionalValue(node, ctx) ?? tryResolveIndexedThemeWithPropFallback(node, ctx) ?? tryResolveConditionalCssBlockTernary(node, ctx) ?? tryResolveConditionalCssBlock(node, ctx) ?? tryResolveArrowFnCallWithSinglePropArg(node, ctx) ?? tryResolveArrowFnCurriedHelperCallWithPropFallback(node, ctx) ?? tryResolveArrowFnImportedCurriedHelperCallWithPropsArg(node, ctx) ?? tryResolveThemeDependentTemplateLiteral(node, ctx) ?? tryResolveStyleFunctionFromTemplateLiteral(node) ?? tryResolveInlineStyleValueForNestedPropAccess(node) ?? tryResolvePropAccess(node) ?? tryResolveConditionalPropStyleFunction(node) ?? tryResolveArrowFnPropExpression(node) ?? tryResolveInlineStyleValueForConditionalExpression(node) ?? tryResolveInlineStyleValueForLogicalExpression(node) ?? tryResolveInlineStyleValueFromArrowFn(node);
+	return tryResolveThemeAccess(node, ctx) ?? tryResolveCallExpression(node, ctx) ?? tryResolveArrowFnHelperCallWithThemeArg(node, ctx) ?? tryResolveArrowFnPreservedRuntimeCall(node, ctx) ?? tryResolveArrowFnCallWithConditionalArgs(node, ctx) ?? tryResolveConditionalValue(node, ctx) ?? tryResolveIndexedThemeWithPropFallback(node, ctx) ?? tryResolveConditionalCssBlockTernary(node, ctx) ?? tryResolveConditionalCssBlock(node, ctx) ?? tryResolveArrowFnCallWithSinglePropArg(node, ctx) ?? tryResolveArrowFnCurriedHelperCallWithPropFallback(node, ctx) ?? tryResolveArrowFnImportedCurriedHelperCallWithPropsArg(node, ctx) ?? tryResolveArrowFnImportedHelperCall(node, ctx) ?? tryResolveThemeDependentTemplateLiteral(node, ctx) ?? tryResolveStyleFunctionFromTemplateLiteral(node) ?? tryResolveInlineStyleValueForNestedPropAccess(node) ?? tryResolvePropAccess(node) ?? tryResolveConditionalPropStyleFunction(node) ?? tryResolveArrowFnPropExpression(node) ?? tryResolveInlineStyleValueForConditionalExpression(node) ?? tryResolveInlineStyleValueForLogicalExpression(node) ?? tryResolveInlineStyleValueFromArrowFn(node);
 }
 function tryResolveThemeAccess(node, ctx) {
 	const expr = node.expr;
@@ -20750,6 +21577,24 @@ function tryResolveArrowFnImportedCurriedHelperCallWithPropsArg(node, ctx) {
 	if (curried?.result.kind === "unresolved") return buildUnresolvedHelperResult(curried.innerCall.callee, ctx);
 	return null;
 }
+function tryResolveArrowFnImportedHelperCall(node, ctx) {
+	if (!node.css.property) return null;
+	const expr = node.expr;
+	if (!isArrowFunctionExpression(expr)) return null;
+	const body = getFunctionBodyExpr(expr);
+	if (!isCallExpressionNode(body)) return null;
+	const callee = body.callee;
+	const calleeInfo = extractRootAndPath(callee);
+	if (!(calleeInfo ? ctx.resolveImport(calleeInfo.rootName, calleeInfo.rootNode) : null)) return null;
+	if ((body.arguments ?? []).some((arg) => literalToStaticValue(arg) === null)) return { type: "emitInlineStyleValueFromProps" };
+	const resolved = resolveImportedHelperCall(body, ctx, getArrowFnSingleParamName(expr) ?? void 0, node.css.property);
+	if (resolved.kind === "resolved") return buildResolvedHandlerResult(resolved.result, node.css.property, {
+		resolveCallContext: resolved.resolveCallContext,
+		resolveCallResult: resolved.resolveCallResult
+	});
+	if (resolved.kind === "unresolved") return { type: "emitInlineStyleValueFromProps" };
+	return null;
+}
 /**
 * Attempts to resolve a callee identifier through the adapter's resolveCall hook.
 * Uses `resolveCallOptional` (non-bailing) so that an unhandled helper does NOT
@@ -21418,10 +22263,6 @@ function mapAttributeToPseudo(attr, tagName) {
 * Parses selectors like "& svg", "& > button", "&:hover svg", "& svg:hover",
 * "&:focus > button:disabled", "& > button[disabled]".
 *
-* Both descendant (space) and child (>) combinators are mapped the same way
-* because `stylex.when.ancestor()` matches ANY ancestor, not just a direct parent.
-* The child combinator is therefore less strict in the output than the original CSS.
-*
 * Attribute selectors on child elements (e.g., `button[disabled]`) are mapped to
 * their pseudo-class equivalents (`:disabled`) for StyleX compatibility.
 *
@@ -21432,6 +22273,7 @@ function parseElementSelectorPattern(selector) {
 	const m = trimmed.match(/^&((?::[\w-]+(?:\([^)]*\))?)*)\s*(>?\s*)([a-zA-Z][a-zA-Z0-9]*)((?:\[[^\]]+\])?)((?::[\w-]+(?:\([^)]*\))?)*)$/);
 	if (m) {
 		const ancestorPseudoRaw = m[1] ?? "";
+		const combinatorRaw = m[2] ?? "";
 		const tagName = m[3];
 		const attrRaw = m[4] ?? "";
 		const childPseudo = resolveChildPseudoWithAttr(m[5] ?? "", attrRaw, tagName);
@@ -21440,7 +22282,7 @@ function parseElementSelectorPattern(selector) {
 			tagName,
 			ancestorPseudo: ancestorPseudoRaw || null,
 			childPseudo,
-			usesChildCombinator: (m[2] ?? "").includes(">")
+			directOnly: combinatorRaw.includes(">")
 		};
 	}
 	const bareM = trimmed.match(/^([a-zA-Z][a-zA-Z0-9]*)((?:\[[^\]]+\])?)((?::[\w-]+(?:\([^)]*\))?)*)$/);
@@ -21453,7 +22295,7 @@ function parseElementSelectorPattern(selector) {
 			tagName: bareTagName,
 			ancestorPseudo: null,
 			childPseudo,
-			usesChildCombinator: false
+			directOnly: false
 		};
 	}
 	const childCombM = trimmed.match(/^>\s*([a-zA-Z][a-zA-Z0-9]*)((?:\[[^\]]+\])?)((?::[\w-]+(?:\([^)]*\))?)*)$/);
@@ -21466,7 +22308,7 @@ function parseElementSelectorPattern(selector) {
 			tagName: combTagName,
 			ancestorPseudo: null,
 			childPseudo,
-			usesChildCombinator: true
+			directOnly: true
 		};
 	}
 	return null;
@@ -21874,7 +22716,8 @@ function buildInterpolatedTemplate(args) {
 	let allStatic = true;
 	const quasis = [];
 	let q = "";
-	for (const part of parts) {
+	for (let partIndex = 0; partIndex < parts.length; partIndex++) {
+		const part = parts[partIndex];
 		if (part.kind === "static") {
 			q += part.value;
 			fullStaticValue += part.value;
@@ -21886,6 +22729,7 @@ function buildInterpolatedTemplate(args) {
 			if (expr.type === "CallExpression" && resolveCallExpr) {
 				const resolved = resolveCallExpr(expr);
 				if (resolved) {
+					if (hasAdjacentUnitInParts(parts, partIndex)) return null;
 					if (resolved.resolved?.type === "StringLiteral" || resolved.resolved?.type === "Literal" && typeof resolved.resolved.value === "string") {
 						const strValue = resolved.resolved.value;
 						q += strValue;
@@ -21908,6 +22752,11 @@ function buildInterpolatedTemplate(args) {
 			if (importedResolved) {
 				if ("bail" in importedResolved) return null;
 				const resolved = importedResolved;
+				if (resolved.skipStaticWrap && hasSingleSlotUnitSuffix(cssValue)) {
+					for (const imp of resolved.imports ?? []) addImport?.(imp);
+					return resolved.resolved;
+				}
+				if (hasAdjacentUnitInParts(parts, partIndex)) return null;
 				if (resolved.resolved?.type === "StringLiteral" || resolved.resolved?.type === "Literal" && typeof resolved.resolved.value === "string") {
 					const strValue = resolved.resolved.value;
 					q += strValue;
@@ -21949,6 +22798,28 @@ function buildInterpolatedTemplate(args) {
 	}, true));
 	return j.templateLiteral(quasis, exprs);
 }
+function hasAdjacentUnitInParts(parts, slotIndex) {
+	const before = parts[slotIndex - 1]?.kind === "static" ? parts[slotIndex - 1]?.value ?? "" : "";
+	const after = parts[slotIndex + 1]?.kind === "static" ? parts[slotIndex + 1]?.value ?? "" : "";
+	return /[a-zA-Z%]$/.test(before) || /^[a-zA-Z%]/.test(after);
+}
+function hasSingleSlotUnitSuffix(cssValue) {
+	const parts = cssValue?.parts ?? [];
+	const slotCount = parts.filter((part) => part?.kind === "slot").length;
+	let prefix = "";
+	let suffix = "";
+	let foundSlot = false;
+	for (const part of parts) {
+		if (part?.kind === "slot") {
+			foundSlot = true;
+			continue;
+		}
+		if (part?.kind !== "static") continue;
+		if (foundSlot) suffix += part.value ?? "";
+		else prefix += part.value ?? "";
+	}
+	return slotCount === 1 && prefix === "" && suffix !== "" && /^-?(?:[a-zA-Z%]+)$/.test(suffix);
+}
 //#endregion
 //#region src/internal/lower-rules/css-helper.ts
 /**
@@ -22904,7 +23775,7 @@ function resolveStaticTemplateExpressionAst(args) {
 	return null;
 }
 function buildPropAccessExpr(j, propName, defaultValue) {
-	const baseExpr = isValidIdentifierName(propName) ? j.identifier(propName) : j.memberExpression(j.identifier("props"), j.literal(propName), true);
+	const baseExpr = isValidIdentifierName$1(propName) ? j.identifier(propName) : j.memberExpression(j.identifier("props"), j.literal(propName), true);
 	if (defaultValue !== void 0) return j.logicalExpression("??", baseExpr, cloneAstNode(defaultValue));
 	return baseExpr;
 }
@@ -24454,7 +25325,7 @@ function buildFallbackPropSuffix(consMap, altMap) {
 //#endregion
 //#region src/internal/lower-rules/import-resolution.ts
 const buildSafeIndexedParamName = (preferred, containerExpr) => {
-	if (!isValidIdentifierName(preferred)) return "propValue";
+	if (!isValidIdentifierName$1(preferred)) return "propValue";
 	if (containerExpr?.type === "Identifier" && containerExpr.name === preferred) return `${preferred}Value`;
 	return preferred;
 };
@@ -24782,7 +25653,7 @@ const createValuePatternHandlers = (ctx) => {
 		const consTheme = resolveThemeAst(body.consequent);
 		const altTheme = resolveThemeAst(body.alternate);
 		const buildPropAccess = (prop) => {
-			return isValidIdentifierName(prop) ? j.memberExpression(j.identifier("props"), j.identifier(prop)) : j.memberExpression(j.identifier("props"), j.literal(prop), true);
+			return isValidIdentifierName$1(prop) ? j.memberExpression(j.identifier("props"), j.identifier(prop)) : j.memberExpression(j.identifier("props"), j.literal(prop), true);
 		};
 		let nullishPropName = null;
 		let baseTheme = null;
@@ -24818,7 +25689,7 @@ const createValuePatternHandlers = (ctx) => {
 				styleFnDecls.set(fnKey, j.arrowFunctionExpression([param], bodyExpr));
 			}
 			if (!styleFnFromProps.some((p) => p.fnKey === fnKey)) {
-				const baseArg = isValidIdentifierName(nullishPropName) ? j.identifier(nullishPropName) : buildPropAccess(nullishPropName);
+				const baseArg = isValidIdentifierName$1(nullishPropName) ? j.identifier(nullishPropName) : buildPropAccess(nullishPropName);
 				const callArg = j.logicalExpression("??", baseArg, fallbackTheme);
 				styleFnFromProps.push({
 					fnKey,
@@ -26216,7 +27087,7 @@ function warnOpaqueShorthands(styleObj, decl, warnings) {
 * returns its `.default` property to avoid nesting maps which produces invalid StyleX values.
 * Otherwise returns the value as-is (string, number, or null).
 */
-function extractScalarDefault$1(value) {
+function extractScalarDefault(value) {
 	if (value && typeof value === "object" && !Array.isArray(value) && !isAstNode(value)) {
 		const map = value;
 		return "default" in map ? map.default : null;
@@ -26349,7 +27220,7 @@ function tryResolveConditionalHelperCallInPseudo(ctx, expr, pseudo) {
 		const helperRaw = cssHelperPropValues.has(prop) ? resolveComposedDefaultValue(cssHelperPropValues.get(prop), prop) : void 0;
 		const sourceMap = raw !== void 0 ? raw : helperRaw;
 		const propMap = {
-			default: extractScalarDefault$1(sourceMap ?? null),
+			default: extractScalarDefault(sourceMap ?? null),
 			[pseudo]: value
 		};
 		mergeExistingPseudoEntries(propMap, sourceMap);
@@ -27881,7 +28752,7 @@ function handleInterpolatedDeclaration(args) {
 		return values;
 	};
 	const observedNumericCssTextProps = /* @__PURE__ */ new Set();
-	const tryHandleMultiSlotRuntimeValue = () => {
+	const tryHandleMultiSlotRuntimeValue = (resolveImportedValueExprArg) => {
 		if (!d.property || d.value.kind !== "interpolated") return false;
 		const cssProperty = d.property.trim();
 		if (cssProperty !== "background" && cssProperty !== "background-image") return false;
@@ -27897,7 +28768,8 @@ function handleInterpolatedDeclaration(args) {
 		const quasis = [];
 		let currentStaticPart = "";
 		let needsTheme = false;
-		for (const part of parts) {
+		for (let partIndex = 0; partIndex < parts.length; partIndex++) {
+			const part = parts[partIndex];
 			if (part.kind === "static") {
 				currentStaticPart += part.value ?? "";
 				continue;
@@ -27907,6 +28779,21 @@ function handleInterpolatedDeclaration(args) {
 			if (!rawExpr || rawExpr.type === "FunctionExpression") return false;
 			let slotExpr = rawExpr.type === "ArrowFunctionExpression" ? inlineArrowFunctionBody(j, rawExpr) : cloneAstNode(rawExpr);
 			if (!slotExpr) return false;
+			const importedValueResolution = resolveImportedValueExprArg(slotExpr);
+			if (importedValueResolution && "bail" in importedValueResolution) return true;
+			if (importedValueResolution) {
+				if (hasAdjacentUnitInInterpolatedParts(parts, partIndex)) {
+					warnings.push({
+						severity: "warning",
+						type: "Unsupported interpolation: call expression",
+						loc: getNodeLocStart(slotExpr) ?? decl.loc
+					});
+					bail = true;
+					return true;
+				}
+				addResolverImports(importedValueResolution.imports);
+				slotExpr = importedValueResolution.resolved;
+			}
 			if (rawExpr.type === "ArrowFunctionExpression") {
 				for (const propName of collectPropsFromArrowFn(rawExpr)) if (propName !== "theme") propsUsed.add(propName);
 				if (hasThemeAccessInArrowFn(rawExpr)) {
@@ -28183,21 +29070,87 @@ function handleInterpolatedDeclaration(args) {
 			return true;
 		};
 		if (tryHandleThemeValueInPseudo()) continue;
+		const resolveCallExpr = (expr) => {
+			if (expr?.type !== "CallExpression") return null;
+			const res = resolveDynamicNode({
+				slotId: 0,
+				expr,
+				css: {
+					kind: "declaration",
+					selector: rule.selector,
+					atRuleStack: rule.atRuleStack,
+					...d.property ? { property: d.property } : {},
+					valueRaw: d.valueRaw
+				},
+				component: componentInfo,
+				usage: {
+					jsxUsages: 0,
+					hasPropsSpread: false
+				}
+			}, {
+				...handlerContext,
+				resolveImport: (localName, identNode) => resolveImportInScope(localName, identNode)
+			});
+			if (res && res.type === "resolvedValue") {
+				const exprAst = parseExpr(res.expr);
+				if (exprAst) return {
+					resolved: exprAst,
+					imports: res.imports
+				};
+			}
+			return null;
+		};
 		const allowCssCalcForImportedArithmetic = isEntireInterpolatedValueSingleSlot(d, decl);
 		const resolveImportedValueExpr = (expr, allowCssCalc = allowCssCalcForImportedArithmetic) => {
+			const resolveChildExpression = (child) => resolveImportedValueExpr(child, false);
+			const isBailResolution = (result) => Boolean(result && "bail" in result);
+			const resolvedOrOriginal = (result, original) => result && !isBailResolution(result) ? result.resolved : original;
+			const skipStaticWrap = (...results) => results.some((result) => result && !isBailResolution(result) && result.skipStaticWrap);
+			const mergeImports = (...results) => results.flatMap((result) => result && !isBailResolution(result) ? result.imports ?? [] : []);
+			const bailResolvedUnitExpression = (exprArg) => {
+				warnings.push({
+					severity: "warning",
+					type: "Unsupported interpolation: call expression",
+					loc: getNodeLocStart(exprArg) ?? decl.loc
+				});
+				bail = true;
+				return { bail: true };
+			};
+			const singleSlotStaticParts = getSingleSlotStaticParts(d, decl);
+			const canFoldUnitSuffix = !!singleSlotStaticParts && singleSlotStaticParts.prefix === "" && singleSlotStaticParts.suffix !== "" && /^-?(?:[a-zA-Z%]+)$/.test(singleSlotStaticParts.suffix);
+			const resolveUnitBranch = (result, original) => {
+				if (result && !isBailResolution(result)) return result.resolved;
+				const staticValue = literalToStaticValue(original);
+				if (typeof staticValue === "number" && singleSlotStaticParts) return j.literal(`${staticValue}${singleSlotStaticParts.suffix}`);
+				return null;
+			};
 			if (expr?.type === "BinaryExpression") {
-				const leftResult = resolveImportedValueExpr(expr.left, false);
-				const rightResult = resolveImportedValueExpr(expr.right, false);
+				const leftResult = resolveChildExpression(expr.left);
+				const rightResult = resolveChildExpression(expr.right);
 				if (!leftResult && !rightResult) return null;
-				if (leftResult && "bail" in leftResult) return leftResult;
-				if (rightResult && "bail" in rightResult) return rightResult;
-				const resolvedLeft = leftResult ? leftResult.resolved : expr.left;
-				const resolvedRight = rightResult ? rightResult.resolved : expr.right;
-				const imports = [...leftResult?.imports ?? [], ...rightResult?.imports ?? []];
+				if (isBailResolution(leftResult)) return leftResult;
+				if (isBailResolution(rightResult)) return rightResult;
+				const resolvedLeft = resolvedOrOriginal(leftResult, expr.left);
+				const resolvedRight = resolvedOrOriginal(rightResult, expr.right);
+				const imports = mergeImports(leftResult, rightResult);
 				if (allowCssCalc && isCssCalcOperator(expr.operator)) {
+					const staticParts = singleSlotStaticParts ?? {
+						prefix: "",
+						suffix: ""
+					};
+					if (staticParts.prefix) {
+						warnings.push({
+							severity: "warning",
+							type: "Unsupported interpolation: call expression",
+							loc: getNodeLocStart(expr) ?? decl.loc
+						});
+						bail = true;
+						return { bail: true };
+					}
 					const calcExpr = buildCssCalcTemplateExpression({
 						j,
 						operator: expr.operator,
+						unit: expr.operator === "+" || expr.operator === "-" ? staticParts.suffix : "",
 						left: {
 							node: resolvedLeft,
 							allowExpression: Boolean(leftResult)
@@ -28209,14 +29162,131 @@ function handleInterpolatedDeclaration(args) {
 					});
 					if (calcExpr) return {
 						resolved: calcExpr,
-						imports
+						imports,
+						skipStaticWrap: staticParts.suffix !== ""
 					};
+					if (staticParts.suffix && imports.length > 0) return bailResolvedUnitExpression(expr);
 				}
 				return {
 					resolved: j.binaryExpression(expr.operator, resolvedLeft, resolvedRight),
 					imports
 				};
 			}
+			if (expr?.type === "UnaryExpression") {
+				const argumentResult = resolveChildExpression(expr.argument);
+				if (!argumentResult) return null;
+				if (isBailResolution(argumentResult)) return argumentResult;
+				if (canFoldUnitSuffix) {
+					if (expr.operator !== "-") return bailResolvedUnitExpression(expr);
+					return {
+						resolved: j.templateLiteral([j.templateElement({
+							raw: "calc(-1 * ",
+							cooked: "calc(-1 * "
+						}, false), j.templateElement({
+							raw: ")",
+							cooked: ")"
+						}, true)], [argumentResult.resolved]),
+						imports: argumentResult.imports,
+						skipStaticWrap: true
+					};
+				}
+				return {
+					resolved: j.unaryExpression(expr.operator, argumentResult.resolved, expr.prefix),
+					imports: argumentResult.imports,
+					skipStaticWrap: argumentResult.skipStaticWrap
+				};
+			}
+			if (expr?.type === "ConditionalExpression") {
+				const testResult = resolveChildExpression(expr.test);
+				const consequentResult = resolveImportedValueExpr(expr.consequent, canFoldUnitSuffix);
+				const alternateResult = resolveImportedValueExpr(expr.alternate, canFoldUnitSuffix);
+				if (!testResult && !consequentResult && !alternateResult) return null;
+				if (isBailResolution(testResult)) return testResult;
+				if (isBailResolution(consequentResult)) return consequentResult;
+				if (isBailResolution(alternateResult)) return alternateResult;
+				if (testResult) return bailResolvedUnitExpression(expr.test);
+				if (canFoldUnitSuffix) {
+					const consequent = resolveUnitBranch(consequentResult, expr.consequent);
+					const alternate = resolveUnitBranch(alternateResult, expr.alternate);
+					if (!consequent || !alternate) return bailResolvedUnitExpression(expr);
+					return {
+						resolved: j.conditionalExpression(resolvedOrOriginal(testResult, expr.test), consequent, alternate),
+						imports: mergeImports(testResult, consequentResult, alternateResult),
+						skipStaticWrap: true
+					};
+				}
+				return {
+					resolved: j.conditionalExpression(resolvedOrOriginal(testResult, expr.test), resolvedOrOriginal(consequentResult, expr.consequent), resolvedOrOriginal(alternateResult, expr.alternate)),
+					imports: mergeImports(testResult, consequentResult, alternateResult),
+					skipStaticWrap: canFoldUnitSuffix || skipStaticWrap(testResult, consequentResult, alternateResult)
+				};
+			}
+			if (expr?.type === "LogicalExpression") {
+				const leftResult = resolveChildExpression(expr.left);
+				const rightResult = resolveImportedValueExpr(expr.right, canFoldUnitSuffix);
+				if (!leftResult && !rightResult) return null;
+				if (isBailResolution(leftResult)) return leftResult;
+				if (isBailResolution(rightResult)) return rightResult;
+				if (canFoldUnitSuffix) {
+					const left = resolveUnitBranch(leftResult, expr.left);
+					const right = resolveUnitBranch(rightResult, expr.right);
+					if (!left || !right) return bailResolvedUnitExpression(expr);
+					return {
+						resolved: j.logicalExpression(expr.operator, left, right),
+						imports: mergeImports(leftResult, rightResult),
+						skipStaticWrap: true
+					};
+				}
+				return {
+					resolved: j.logicalExpression(expr.operator, resolvedOrOriginal(leftResult, expr.left), resolvedOrOriginal(rightResult, expr.right)),
+					imports: mergeImports(leftResult, rightResult),
+					skipStaticWrap: canFoldUnitSuffix || skipStaticWrap(leftResult, rightResult)
+				};
+			}
+			if (expr?.type === "TemplateLiteral") {
+				let didResolve = false;
+				const imports = [];
+				const expressions = [];
+				const expressionResults = [];
+				const templateExpressions = expr.expressions ?? [];
+				for (let index = 0; index < templateExpressions.length; index++) {
+					const templateExpr = templateExpressions[index];
+					const expressionResult = resolveChildExpression(templateExpr);
+					expressionResults.push(expressionResult);
+					if (isBailResolution(expressionResult)) return expressionResult;
+					if (expressionResult) {
+						if (hasAdjacentTemplateUnit(expr.quasis ?? [], index)) return bailResolvedUnitExpression(templateExpr);
+						didResolve = true;
+						imports.push(...expressionResult.imports ?? []);
+						expressions.push(expressionResult.resolved);
+					} else expressions.push(templateExpr);
+				}
+				if (!didResolve) return null;
+				return {
+					resolved: j.templateLiteral(expr.quasis, expressions),
+					imports,
+					skipStaticWrap: skipStaticWrap(...expressionResults)
+				};
+			}
+			if (expr?.type === "CallExpression") {
+				const calleeInfo = extractRootAndPath(expr.callee);
+				const imp = calleeInfo ? resolveImportInScope(calleeInfo.rootName, calleeInfo.rootNode) : null;
+				if (!imp) return null;
+				const resolvedCall = resolveCallExpr(expr);
+				if (resolvedCall) return resolvedCall;
+				warnings.push({
+					severity: "warning",
+					type: "Adapter resolveCall returned undefined for helper call",
+					loc: getNodeLocStart(expr) ?? decl.loc,
+					context: {
+						localName: decl.localName,
+						importedName: imp.importedName,
+						source: imp.source.value
+					}
+				});
+				bail = true;
+				return { bail: true };
+			}
 			const info = getRootIdentifierInfo(expr);
 			if (!info) return null;
 			const imp = resolveImportInScope(info.rootName, info.rootNode);
@@ -28264,36 +29334,6 @@ function handleInterpolatedDeclaration(args) {
 				imports: resolveValueResult.imports
 			};
 		};
-		const resolveCallExpr = (expr) => {
-			if (expr?.type !== "CallExpression") return null;
-			const res = resolveDynamicNode({
-				slotId: 0,
-				expr,
-				css: {
-					kind: "declaration",
-					selector: rule.selector,
-					atRuleStack: rule.atRuleStack,
-					...d.property ? { property: d.property } : {},
-					valueRaw: d.valueRaw
-				},
-				component: componentInfo,
-				usage: {
-					jsxUsages: 0,
-					hasPropsSpread: false
-				}
-			}, {
-				...handlerContext,
-				resolveImport: (localName) => resolveImportForExpr(expr, localName)
-			});
-			if (res && res.type === "resolvedValue") {
-				const exprAst = parseExpr(res.expr);
-				if (exprAst) return {
-					resolved: exprAst,
-					imports: res.imports
-				};
-			}
-			return null;
-		};
 		const addImport = (imp) => {
 			addResolverImports([imp]);
 		};
@@ -28496,7 +29536,7 @@ function handleInterpolatedDeclaration(args) {
 			pseudoElement
 		})) continue;
 		if (d.property && d.value.kind === "interpolated" && tryHandleMultiSlotTernary(ctx, d)) continue;
-		if (tryHandleMultiSlotRuntimeValue()) continue;
+		if (tryHandleMultiSlotRuntimeValue(resolveImportedValueExpr)) continue;
 		const slotPart = d.value.parts.find((p) => p.kind === "slot");
 		const slotId = slotPart && slotPart.kind === "slot" ? slotPart.slotId : 0;
 		const expr = decl.templateExpressions[slotId];
@@ -29085,6 +30125,7 @@ function handleInterpolatedDeclaration(args) {
 						cssProperty: out.prop,
 						paramName,
 						resolveImportForExpr,
+						resolveImportInScope,
 						resolveCall,
 						parseExpr,
 						filePath,
@@ -29773,7 +30814,7 @@ function buildCssCalcTemplateExpression(args) {
 	const quasis = [];
 	let currentQuasi = "calc(";
 	const appendOperand = (operand) => {
-		const staticText = expressionToCalcStaticText(operand.node);
+		const staticText = expressionToCalcStaticText(operand.node, args.unit);
 		if (staticText !== null) {
 			currentQuasi += staticText;
 			return true;
@@ -29796,11 +30837,21 @@ function buildCssCalcTemplateExpression(args) {
 		cooked: raw
 	}, index === quasis.length - 1)), expressions);
 }
-function expressionToCalcStaticText(node) {
+function expressionToCalcStaticText(node, unit = "") {
 	const staticValue = literalToStaticValue(node);
-	if (typeof staticValue === "number") return String(staticValue);
+	if (typeof staticValue === "number") return `${staticValue}${unit}`;
 	return null;
 }
+function hasAdjacentTemplateUnit(quasis, expressionIndex) {
+	const before = quasis[expressionIndex]?.value?.raw ?? quasis[expressionIndex]?.value?.cooked ?? "";
+	const after = quasis[expressionIndex + 1]?.value?.raw ?? quasis[expressionIndex + 1]?.value?.cooked ?? "";
+	return /[a-zA-Z%]$/.test(before) || /^[a-zA-Z%]/.test(after);
+}
+function hasAdjacentUnitInInterpolatedParts(parts, slotIndex) {
+	const before = parts[slotIndex - 1]?.kind === "static" ? parts[slotIndex - 1]?.value ?? "" : "";
+	const after = parts[slotIndex + 1]?.kind === "static" ? parts[slotIndex + 1]?.value ?? "" : "";
+	return /[a-zA-Z%]$/.test(before) || /^[a-zA-Z%]/.test(after);
+}
 function isStylexCalcExpression(node) {
 	if (!node || typeof node !== "object") return false;
 	const n = node;
@@ -29826,7 +30877,7 @@ function isStylexCalcExpression(node) {
 function tryHandleDynamicPseudoElementStyleFunction(args) {
 	const { ctx, d, pseudoElement, pseudos, media } = args;
 	const { state, decl, styleFnDecls, styleFnFromProps } = ctx;
-	const { j, filePath, parseExpr, resolveCall, resolveImportForExpr, resolverImports } = state;
+	const { j, filePath, parseExpr, resolveCall, resolveImportForExpr, resolveImportInScope, resolverImports } = state;
 	const avoidNames = new Set(state.importMap.keys());
 	const addResolverImports = (imports) => {
 		if (!imports) return;
@@ -29881,6 +30932,7 @@ function tryHandleDynamicPseudoElementStyleFunction(args) {
 					bindings,
 					allowedPropIdentifiers: propsUsed,
 					resolveImportForExpr,
+					resolveImportInScope,
 					resolveCall,
 					parseExpr,
 					filePath,
@@ -30040,7 +31092,7 @@ function isUnsupportedCurriedHelperCall(callExpr, ctx) {
 	const innerCall = callExpr.callee;
 	const calleeInfo = extractRootAndPath(innerCall.callee);
 	if (!calleeInfo) return false;
-	if (!ctx.resolveImportForExpr(innerCall, calleeInfo.rootName)) return false;
+	if (!ctx.resolveImportInScope(calleeInfo.rootName, calleeInfo.rootNode)) return false;
 	const innerArgs = innerCall.arguments ?? [];
 	const outerArgs = callExpr.arguments ?? [];
 	return innerArgs.length !== 1 || outerArgs.length !== 1 || !isIdentifierNamed(outerArgs[0], ctx.paramName);
@@ -30052,20 +31104,20 @@ function tryResolveDynamicHelperCall(callExpr, ctx) {
 	const { innerCall, dynamicArg } = helperCall;
 	const calleeInfo = extractRootAndPath(innerCall.callee);
 	if (!calleeInfo) return false;
-	const imp = ctx.resolveImportForExpr(innerCall, calleeInfo.rootName);
+	const imp = ctx.resolveImportInScope(calleeInfo.rootName, calleeInfo.rootNode);
 	if (!imp) return false;
-	const dynamicProp = unwrapParamMemberArg(ctx.j, dynamicArg, ctx.paramName, ctx.bindings, ctx.allowedPropIdentifiers);
-	if (!dynamicProp) return false;
 	const result = ctx.resolveCall({
 		callSiteFilePath: ctx.filePath,
 		calleeImportedName: imp.importedName,
 		calleeSource: imp.source,
-		args: [{ kind: "unknown" }],
+		args: callArgsFromNode(innerCall.arguments),
 		...calleeInfo.path.length > 0 ? { calleeMemberPath: calleeInfo.path } : {},
 		...ctx.loc ? { loc: ctx.loc } : {},
 		cssProperty: ctx.cssProperty
 	});
 	if (!result || !("expr" in result)) return false;
+	const dynamicProp = unwrapParamMemberArg(ctx.j, dynamicArg, ctx.paramName, ctx.bindings, ctx.allowedPropIdentifiers);
+	if (!dynamicProp) return false;
 	const resolvedExpr = ctx.parseExpr(result.expr);
 	if (!resolvedExpr) return null;
 	ctx.addResolverImports(result.imports);
@@ -30082,22 +31134,22 @@ function tryResolveDynamicHelperCall(callExpr, ctx) {
 function tryResolveDirectHelperCall(callExpr, ctx) {
 	const calleeInfo = extractRootAndPath(callExpr.callee);
 	if (!calleeInfo) return false;
-	const imp = ctx.resolveImportForExpr(callExpr, calleeInfo.rootName);
+	const imp = ctx.resolveImportInScope(calleeInfo.rootName, calleeInfo.rootNode);
 	if (!imp) return false;
-	const args = callExpr.arguments ?? [];
-	if (args.length !== 1) return false;
-	const dynamicProp = unwrapParamMemberArg(ctx.j, args[0], ctx.paramName, ctx.bindings, ctx.allowedPropIdentifiers);
-	if (!dynamicProp) return false;
 	const result = ctx.resolveCall({
 		callSiteFilePath: ctx.filePath,
 		calleeImportedName: imp.importedName,
 		calleeSource: imp.source,
-		args: [{ kind: "unknown" }],
+		args: callArgsFromNode(callExpr.arguments),
 		...calleeInfo.path.length > 0 ? { calleeMemberPath: calleeInfo.path } : {},
 		...ctx.loc ? { loc: ctx.loc } : {},
 		cssProperty: ctx.cssProperty
 	});
 	if (!result || !("expr" in result)) return false;
+	const args = callExpr.arguments ?? [];
+	if (args.length !== 1) return false;
+	const dynamicProp = unwrapParamMemberArg(ctx.j, args[0], ctx.paramName, ctx.bindings, ctx.allowedPropIdentifiers);
+	if (!dynamicProp) return false;
 	const resolvedExpr = ctx.parseExpr(result.expr);
 	if (!resolvedExpr) return null;
 	ctx.addResolverImports(result.imports);
@@ -30420,6 +31472,15 @@ function markThemeHookForVariants(decl, variants) {
 * `import + export {}`) are walked transitively up to a small depth limit
 * with a per-resolution visit set to guard against cycles.
 */
+function resolveExpressionToStaticString(expr, state) {
+	const direct = literalToStaticValue(expr);
+	if (typeof direct === "string") return direct;
+	if (!isIdentifierNode(expr)) return null;
+	if (state.isIdentifierShadowed(expr, expr.name)) return null;
+	const fromImport = resolveImportedConstStringInit(expr.name, state);
+	if (fromImport !== null) return fromImport;
+	return findTopLevelConstStringInit(expr.name, state);
+}
 function resolveImportedConstStringInit(localName, state) {
 	const importEntry = state.importMap.get(localName);
 	if (!importEntry || importEntry.source.kind !== "absolutePath") return null;
@@ -30598,6 +31659,19 @@ function findTopLevelLocalConstString(program, name, state) {
 		return (p.parent?.node)?.type === "Program";
 	}), (p) => findConstDeclaratorString(p.node.declarations, name));
 }
+function findTopLevelConstStringInit(name, state) {
+	const { root, j } = state;
+	let resolved = null;
+	root.find(j.VariableDeclaration, { kind: "const" }).filter((p) => {
+		const parentType = (p.parent?.node)?.type;
+		return parentType === "Program" || parentType === "ExportNamedDeclaration";
+	}).forEach((p) => {
+		if (resolved !== null) return;
+		const found = findConstDeclaratorString(p.node.declarations, name);
+		if (found !== null) resolved = found;
+	});
+	return resolved;
+}
 /**
 * Tries to follow re-exports for `<exportedName>` from `<program>`:
 *   - `export { exportedName } from "./other"` (direct)
@@ -30824,58 +31898,18 @@ function resolveInterpolatedPropertyName(property, ctx) {
 	if (!resolved.startsWith("--")) return null;
 	return resolved;
 }
-/**
-* Resolves an AST expression to a static string. Handles direct string
-* literals and identifiers bound to:
-*   - a top-level `const NAME = "..."` declaration in the file being
-*     transformed, or
-*   - an imported binding whose source file declares a top-level
-*     `export const NAME = "..."`.
-*
-* Identifiers that are shadowed by an enclosing scope (e.g. a local `const
-* NAME = "..."` inside the function containing the styled template) are not
-* resolved — bailing is safer than substituting the wrong value.
-*/
-function resolveExpressionToStaticString(expr, state) {
-	const direct = literalToStaticValue(expr);
-	if (typeof direct === "string") return direct;
-	if (!isIdentifierNode(expr)) return null;
-	if (state.isIdentifierShadowed(expr, expr.name)) return null;
-	const fromImport = resolveImportedConstStringInit(expr.name, state);
-	if (fromImport !== null) return fromImport;
-	return findTopLevelConstStringInit(expr.name, state);
-}
-/**
-* Finds a top-level `const <name> = <literal>` declaration in the current file
-* and returns its initializer when it resolves to a static string. Skips
-* non-`const` declarations and declarators whose initializer is not a static
-* literal so we never substitute a value that could change at runtime.
-*/
-function findTopLevelConstStringInit(name, state) {
-	const { root, j } = state;
-	let resolved = null;
-	root.find(j.VariableDeclaration, { kind: "const" }).filter((p) => {
-		const parentType = (p.parent?.node)?.type;
-		return parentType === "Program" || parentType === "ExportNamedDeclaration";
-	}).forEach((p) => {
-		if (resolved !== null) return;
-		const found = findConstDeclaratorString(p.node.declarations, name);
-		if (found !== null) resolved = found;
-	});
-	return resolved;
-}
 //#endregion
 //#region src/internal/lower-rules/process-rules.ts
 function processDeclRules(ctx) {
 	const { state, decl, styleObj, perPropPseudo, perPropMedia, nestedSelectors, variantBuckets, styleFnDecls, attrBuckets, localVarValues, cssHelperPropValues, getComposedDefaultValue } = ctx;
-	const { j, root, warnings, resolverImports, resolveSelector, parseExpr, cssHelperNames, declByLocalName, styledDecls, relationOverridePseudoBuckets, relationOverrides, ancestorSelectorParents, childPseudoMarkers, resolveThemeValue, resolveThemeValueFromFn, resolveImportInScope } = state;
+	const { j, root, warnings, resolverImports, resolveSelector, parseExpr, cssHelperNames, declByLocalName, relationOverridePseudoBuckets, relationOverrides, ancestorSelectorParents, resolveThemeValue, resolveThemeValueFromFn, resolveImportInScope } = state;
 	/**
 	* Attempts to resolve an element selector (e.g., `& svg`, `& > button`) to a
 	* styled component override. Returns "break" to bail, "continue" to skip to next
 	* rule, or null if the selector isn't an element pattern.
 	*/
 	const tryHandleElementSelector = (selectorStr, rule, parentDecl) => {
-		const elementResult = resolveElementSelectorTarget(selectorStr, parentDecl, styledDecls, root, j);
+		const elementResult = resolveElementSelectorTarget(selectorStr, parentDecl, root, j);
 		if (typeof elementResult === "string") {
 			state.markBail();
 			warnings.push({
@@ -30886,38 +31920,38 @@ function processDeclRules(ctx) {
 			return "break";
 		}
 		if (!elementResult) return null;
-		const { childDecl, ancestorPseudo, childPseudo, directChildOnly } = elementResult;
-		const overrideStyleKey = directChildOnly ? `${toStyleKey(childDecl.localName)}DirectChildIn${parentDecl.localName}` : `${toStyleKey(childDecl.localName)}In${parentDecl.localName}`;
-		ancestorSelectorParents.add(parentDecl.styleKey);
-		const pseudoForBucket = childPseudo ?? ancestorPseudo;
-		if (pseudoForBucket) {
-			const existingChildPseudos = childPseudoMarkers.get(overrideStyleKey);
-			const existingBuckets = relationOverridePseudoBuckets.get(overrideStyleKey);
-			const isAlreadyUsedAsAncestor = !childPseudo && existingChildPseudos?.has(pseudoForBucket);
-			const isAlreadyUsedAsChild = childPseudo && existingBuckets?.has(pseudoForBucket) && !existingChildPseudos?.has(pseudoForBucket);
-			if (isAlreadyUsedAsAncestor || isAlreadyUsedAsChild) {
-				state.markBail();
-				warnings.push({
-					severity: "warning",
-					type: ELEMENT_BAIL_WARNING_MAP["bail-pseudo-collision"],
-					loc: computeSelectorWarningLoc(parentDecl.loc, parentDecl.rawCss, rule.selector)
-				});
-				return "break";
-			}
+		const { tagName, ancestorPseudo, childPseudo, directOnly } = elementResult;
+		if (rule.atRuleStack.length > 0) {
+			state.markBail();
+			warnings.push({
+				severity: "warning",
+				type: "Unsupported selector: descendant/child/sibling selector",
+				loc: computeSelectorWarningLoc(parentDecl.loc, parentDecl.rawCss, rule.selector)
+			});
+			return "break";
 		}
-		if (childPseudo) {
-			let markers = childPseudoMarkers.get(overrideStyleKey);
-			if (!markers) {
-				markers = /* @__PURE__ */ new Set();
-				childPseudoMarkers.set(overrideStyleKey, markers);
-			}
-			markers.add(childPseudo);
+		if (hasDynamicJsxChildren(parentDecl.localName, root, j)) {
+			state.markBail();
+			warnings.push({
+				severity: "warning",
+				type: ELEMENT_BAIL_WARNING_MAP["bail-dynamic"],
+				loc: computeSelectorWarningLoc(parentDecl.loc, parentDecl.rawCss, rule.selector)
+			});
+			return "break";
 		}
-		const bucket = getOrCreateRelationOverrideBucket(overrideStyleKey, parentDecl.styleKey, childDecl.styleKey, pseudoForBucket, relationOverrides, relationOverridePseudoBuckets, childDecl.extraStyleKeys);
-		if (directChildOnly) {
-			const override = relationOverrides.find((o) => o.overrideStyleKey === overrideStyleKey);
-			if (override) override.directChildOnly = true;
+		if (hasLocalElementPseudoCollision(parentDecl.localElementOverrides ?? [], tagName, ancestorPseudo, childPseudo)) {
+			state.markBail();
+			warnings.push({
+				severity: "warning",
+				type: ELEMENT_BAIL_WARNING_MAP["bail-pseudo-collision"],
+				loc: computeSelectorWarningLoc(parentDecl.loc, parentDecl.rawCss, rule.selector)
+			});
+			return "break";
 		}
+		const overrideIndex = (parentDecl.localElementOverrides?.length ?? 0) + 1;
+		const overrideStyleKey = `${parentDecl.styleKey}Element${overrideIndex}`;
+		const pseudoForBucket = childPseudo ?? ancestorPseudo;
+		const bucket = {};
 		if (processDeclarationsIntoBucket(rule, bucket, j, parentDecl, resolveThemeValue, resolveThemeValueFromFn, { bailOnUnresolved: true }) === "bail") {
 			state.markBail();
 			warnings.push({
@@ -30927,6 +31961,18 @@ function processDeclRules(ctx) {
 			});
 			return "break";
 		}
+		const pseudoBuckets = /* @__PURE__ */ new Map();
+		pseudoBuckets.set(pseudoForBucket, bucket);
+		parentDecl.localElementOverrides ??= [];
+		parentDecl.localElementOverrides.push({
+			styleKey: overrideStyleKey,
+			tagName,
+			relation: directOnly ? "child" : "descendant",
+			ancestorPseudo,
+			childPseudo,
+			pseudoBuckets,
+			loc: computeSelectorWarningLoc(parentDecl.loc, parentDecl.rawCss, rule.selector)
+		});
 		return "continue";
 	};
 	const ancestorAttrEntryByKey = /* @__PURE__ */ new Map();
@@ -30938,6 +31984,19 @@ function processDeclRules(ctx) {
 			if (state.keyframesNames.has(kfName)) continue;
 		}
 		let resolvedSelectorMedia = null;
+		if (typeof rule.selector === "string") {
+			const selectorWithStaticAttrs = resolveStaticAttributeSelectorPlaceholders(rule.selector, decl, state);
+			if (selectorWithStaticAttrs === null) {
+				state.markBail();
+				warnings.push({
+					severity: "warning",
+					type: "Unsupported selector: unresolved interpolation in attribute selector",
+					loc: computeSelectorWarningLoc(decl.loc, decl.rawCss, rule.selector)
+				});
+				break;
+			}
+			rule.selector = selectorWithStaticAttrs;
+		}
 		if (typeof rule.selector === "string") {
 			const specificityResult = normalizeSpecificityHacks(rule.selector);
 			if (specificityResult.hasHigherTier) {
@@ -31868,22 +32927,17 @@ const ELEMENT_BAIL_WARNING_MAP = {
 * the resolved child declaration + pseudo info, a bail reason, or null if not an
 * element selector pattern.
 */
-function resolveElementSelectorTarget(selector, parentDecl, styledDecls, root, j) {
+function resolveElementSelectorTarget(selector, parentDecl, root, j) {
 	const parsed = parseElementSelectorPattern(selector);
 	if (!parsed) return null;
-	const { tagName, ancestorPseudo, childPseudo } = parsed;
+	const { tagName, ancestorPseudo, childPseudo, directOnly } = parsed;
 	if (ancestorPseudo && childPseudo) return "bail-combined-pseudo";
 	if (isComponentExported(parentDecl.localName, root, j)) return "bail-exported";
-	const matches = styledDecls.filter((d) => !d.isCssHelper && d.localName !== parentDecl.localName && d.base.kind === "intrinsic" && d.base.tagName === tagName);
-	if (matches.length === 0) return null;
-	if (matches.length > 1) return "bail-ambiguous";
-	if (hasDynamicJsxChildren(parentDecl.localName, root, j)) return "bail-dynamic";
-	if (hasPlainIntrinsicDescendant(parentDecl.localName, tagName, matches[0].localName, root, j)) return "bail-plain-intrinsic";
 	return {
-		childDecl: matches[0],
+		tagName,
 		ancestorPseudo,
 		childPseudo,
-		directChildOnly: parsed.usesChildCombinator
+		directOnly
 	};
 }
 /**
@@ -31902,30 +32956,6 @@ function isComponentExported(name, root, j) {
 		return decl?.type === "Identifier" && decl.name === name;
 	}).size() > 0;
 }
-/**
-* Checks whether any JSX usage of the given parent component contains a plain
-* intrinsic element matching `tagName` that is NOT the styled component. For example,
-* if parent renders both `<Icon />` (styled.svg) and a plain `<svg>`, returns true.
-*/
-function hasPlainIntrinsicDescendant(parentName, tagName, styledChildName, root, j) {
-	let found = false;
-	root.find(j.JSXElement, { openingElement: { name: {
-		type: "JSXIdentifier",
-		name: parentName
-	} } }).forEach((path) => {
-		if (found) return;
-		for (const child of path.node.children ?? []) if (child.type === "JSXElement" && child.openingElement.name.type === "JSXIdentifier" && child.openingElement.name.name === tagName && child.openingElement.name.name !== styledChildName) {
-			found = true;
-			return;
-		}
-	});
-	return found;
-}
-/**
-* Checks whether any JSX usage of the given component has dynamic children
-* ({children}, {props.children}, or non-empty JSXExpressionContainers).
-* Static JSX children (<Icon />, <div>text</div>) are OK.
-*/
 function hasDynamicJsxChildren(componentName, root, j) {
 	let hasDynamic = false;
 	root.find(j.JSXElement, { openingElement: { name: {
@@ -31941,6 +32971,14 @@ function hasDynamicJsxChildren(componentName, root, j) {
 	});
 	return hasDynamic;
 }
+function hasLocalElementPseudoCollision(overrides, tagName, ancestorPseudo, childPseudo) {
+	const nextPseudo = childPseudo ?? ancestorPseudo;
+	if (!nextPseudo) return false;
+	return overrides.some((override) => {
+		if (override.tagName !== tagName) return false;
+		return (override.childPseudo ?? override.ancestorPseudo) === nextPseudo && override.childPseudo !== childPseudo;
+	});
+}
 /**
 * Attempts to resolve an interpolated pseudo-class selector (`&:${expr}`) via the
 * adapter's `resolveSelector`. Handles `pseudoAlias` (builds N separate style
@@ -32215,10 +33253,32 @@ function extractCssTextFromNode(node) {
 	if (n.type === "TemplateLiteral" && (!n.expressions || n.expressions.length === 0)) return (n.quasis ?? []).map((q) => q.value?.raw ?? "").join("");
 	return null;
 }
+function resolveStaticAttributeSelectorPlaceholders(selector, decl, state) {
+	if (!selector.includes("__SC_EXPR_")) return selector;
+	let failed = false;
+	const resolvedSelector = selector.replace(ATTRIBUTE_SELECTOR_WITH_PLACEHOLDER_RE, (attributeSelector) => {
+		const match = attributeSelector.match(ATTRIBUTE_NAME_PLACEHOLDER_RE);
+		if (!match?.[1]) {
+			failed = true;
+			return attributeSelector;
+		}
+		const slotId = Number(match[1]);
+		const value = resolveExpressionToStaticString(decl.templateExpressions[slotId], state);
+		if (value === null || !CSS_ATTRIBUTE_NAME_RE.test(value)) {
+			failed = true;
+			return attributeSelector;
+		}
+		return `[${value}${match[2] ?? ""}]`;
+	});
+	return failed ? null : resolvedSelector;
+}
 /** Descendant-has pattern (full selector match): exactly `&:has(__SC_EXPR_N__)` */
 const HAS_COMPONENT_SELECTOR_STRICT_RE = /^&:has\(__SC_EXPR_\d+__\)\s*$/;
 /** Reverse selector pattern for a single part: `__SC_EXPR_N__:pseudo &` */
 const REVERSE_SELECTOR_PART_RE = /^__SC_EXPR_\d+__:[a-z][a-z0-9()-]*\s+&$/;
+const ATTRIBUTE_SELECTOR_WITH_PLACEHOLDER_RE = /\[[^\][]*__SC_EXPR_\d+__[^\][]*\]/g;
+const ATTRIBUTE_NAME_PLACEHOLDER_RE = /^\[\s*__SC_EXPR_(\d+)__(\s*(?:(?:[~|^$*]?=)\s*(?:"[^"]*"|'[^']*'|[^\]\s]+)\s*(?:[iIsS]\s*)?)?)\]$/;
+const CSS_ATTRIBUTE_NAME_RE = /^(?:-?[_a-zA-Z]|--)[-_a-zA-Z0-9:.]*$/;
 function extractParentPseudosForNestedComponentBlock(rawCss, slotId) {
 	if (!rawCss) return null;
 	const placeholder = `__SC_EXPR_${slotId}__`;
@@ -32629,81 +33689,6 @@ function isDirectAttrsPropValue(entry) {
 	return node.type === "Identifier" && node.name === entry.jsxProp;
 }
 //#endregion
-//#region src/internal/lower-rules/relation-overrides.ts
-const finalizeRelationOverrides = (args) => {
-	const { j, relationOverridePseudoBuckets, relationOverrides, resolvedStyleObjects, makeCssPropKey, childPseudoMarkers } = args;
-	if (relationOverridePseudoBuckets.size === 0) return;
-	const overrideToChildKeys = /* @__PURE__ */ new Map();
-	const overrideToMarker = /* @__PURE__ */ new Map();
-	for (const o of relationOverrides) {
-		overrideToChildKeys.set(o.overrideStyleKey, [o.childStyleKey, ...o.childExtraStyleKeys ?? []]);
-		if (o.markerVarName) overrideToMarker.set(o.overrideStyleKey, o.markerVarName);
-	}
-	const isExpressionNode = (v) => isAstNode(v);
-	for (const [overrideKey, pseudoBuckets] of relationOverridePseudoBuckets.entries()) {
-		const baseBucket = pseudoBuckets.get(null) ?? {};
-		const props = [];
-		const markerVarName = overrideToMarker.get(overrideKey);
-		const childStyleObjects = buildChildStyleObjectList(overrideToChildKeys.get(overrideKey) ?? [], resolvedStyleObjects);
-		const allPropNames = /* @__PURE__ */ new Set();
-		for (const bucket of pseudoBuckets.values()) for (const prop of Object.keys(bucket)) allPropNames.add(prop);
-		for (const prop of allPropNames) {
-			let baseVal = baseBucket[prop];
-			if (baseVal === void 0) for (const childStyle of childStyleObjects) {
-				const val = childStyle[prop];
-				if (val !== void 0) {
-					baseVal = val;
-					break;
-				}
-			}
-			baseVal = extractScalarDefault(baseVal);
-			const pseudoValues = [];
-			for (const [pseudo, bucket] of pseudoBuckets.entries()) {
-				if (pseudo === null) continue;
-				const val = bucket[prop];
-				if (val !== void 0) pseudoValues.push({
-					pseudo,
-					value: val
-				});
-			}
-			if (pseudoValues.length > 0) {
-				const objProps = [j.property("init", j.identifier("default"), isExpressionNode(baseVal) ? baseVal : literalToAst(j, baseVal ?? null))];
-				const childPseudos = childPseudoMarkers.get(overrideKey);
-				for (const { pseudo, value } of pseudoValues) {
-					const valExpr = isExpressionNode(value) ? value : literalToAst(j, value);
-					if (childPseudos?.has(pseudo)) objProps.push(j.property("init", j.literal(pseudo), valExpr));
-					else {
-						const ancestorKey = makeAncestorKeyExpr(j, pseudo, markerVarName);
-						const propNode = Object.assign(j.property("init", ancestorKey, valExpr), { computed: true });
-						objProps.push(propNode);
-					}
-				}
-				const mapExpr = j.objectExpression(objProps);
-				props.push(j.property("init", makeCssPropKey(j, prop), mapExpr));
-			} else if (baseVal !== void 0) props.push(j.property("init", makeCssPropKey(j, prop), isExpressionNode(baseVal) ? baseVal : literalToAst(j, baseVal)));
-		}
-		if (props.length > 0) resolvedStyleObjects.set(overrideKey, j.objectExpression(props));
-	}
-};
-/**
-* If a value is a pseudo/media map (e.g., `{ default: "gray", ":focus": "orange" }`),
-* extracts its scalar `default` property. AST nodes and non-map values pass through.
-*/
-function extractScalarDefault(value) {
-	if (!value || typeof value !== "object" || Array.isArray(value) || isAstNode(value)) return value;
-	const map = value;
-	if ("default" in map) return map.default;
-	return value;
-}
-function buildChildStyleObjectList(childKeys, resolvedStyleObjects) {
-	const childStyleObjects = [];
-	for (const key of childKeys) {
-		const obj = resolvedStyleObjects.get(key);
-		if (obj && typeof obj === "object" && !isAstNode(obj)) childStyleObjects.push(obj);
-	}
-	return childStyleObjects;
-}
-//#endregion
 //#region src/internal/lower-rules/state.ts
 /**
 * Builds shared state for the lower-rules pipeline.
@@ -33374,9 +34359,196 @@ function collectTemplateSelectorIdentifiersFromParts(rawCss, templateExpressions
 	return identifiers;
 }
 //#endregion
+//#region src/internal/post-process-consumed-helpers.ts
+function cleanupConsumedLocalHelpers(ctx, styledDecls) {
+	const { root, j } = ctx;
+	for (const decl of styledDecls) for (const helperName of decl.consumedLocalHelpers ?? []) {
+		const fnPaths = root.find(j.FunctionDeclaration, { id: { name: helperName } });
+		if (fnPaths.size() === 0) continue;
+		if (isExportedFunction(fnPaths)) continue;
+		if (root.find(j.Identifier, { name: helperName }).filter((idPath) => {
+			const parent = idPath.parentPath?.node;
+			if (parent?.type === "FunctionDeclaration" && parent.id === idPath.node) return false;
+			return true;
+		}).size() === 0) fnPaths.forEach((p) => p.prune());
+	}
+}
+function isExportedFunction(fnPaths) {
+	return fnPaths.some((p) => p.parentPath?.node?.type === "ExportNamedDeclaration" || p.parentPath?.node?.type === "ExportDefaultDeclaration");
+}
+//#endregion
+//#region src/internal/post-process-empty-style-references.ts
+function cleanupEmptyStyleReferences(args) {
+	const { root, j, emptyStyleKeys, stylesIdentifier } = args;
+	if (!emptyStyleKeys || emptyStyleKeys.size === 0) return false;
+	let changed = false;
+	const isEmptyStyleRef = (a) => {
+		const propertyName = getIdentifierMemberPropertyName(a, stylesIdentifier);
+		return propertyName !== null && emptyStyleKeys.has(propertyName);
+	};
+	root.find(j.CallExpression).forEach((p) => {
+		const call = p.node;
+		if (isIdentifierMemberExpression(call?.callee, "stylex", "props")) {
+			const originalLength = (call.arguments ?? []).length;
+			call.arguments = (call.arguments ?? []).filter((a) => !isEmptyStyleRef(a));
+			if (call.arguments.length !== originalLength) changed = true;
+			if (call.arguments.length === 0) {
+				const parentNode = p.parentPath?.node;
+				if (parentNode?.type === "JSXSpreadAttribute") {
+					const jsxOpening = p.parentPath?.parentPath?.node;
+					if (jsxOpening?.type === "JSXOpeningElement" && Array.isArray(jsxOpening.attributes)) {
+						jsxOpening.attributes = jsxOpening.attributes.filter((attr) => attr !== parentNode);
+						changed = true;
+					}
+				}
+			}
+		}
+		if (call?.callee?.type === "Identifier") {
+			const firstArg = call.arguments?.[0];
+			if (firstArg?.type === "ArrayExpression") {
+				const arr = firstArg;
+				const originalLength = (arr.elements ?? []).length;
+				arr.elements = (arr.elements ?? []).filter((e) => !isEmptyStyleRef(e));
+				if (arr.elements.length !== originalLength) changed = true;
+			}
+			if (isEmptyStyleRef(firstArg)) {
+				call.arguments[0] = j.identifier("undefined");
+				changed = true;
+			}
+		}
+	});
+	root.find(j.JSXAttribute, { name: { name: "sx" } }).forEach((p) => {
+		const val = p.node.value;
+		if (!val || val.type !== "JSXExpressionContainer") return;
+		const expr = val.expression;
+		if (expr?.type === "ArrayExpression") {
+			const orig = (expr.elements ?? []).length;
+			expr.elements = (expr.elements ?? []).filter((e) => !isEmptyStyleRef(e));
+			if (expr.elements.length !== orig) changed = true;
+			if (expr.elements.length === 1) {
+				val.expression = expr.elements[0];
+				changed = true;
+			}
+			if (expr.elements.length === 0) {
+				const opening = p.parentPath?.node;
+				if (opening?.type === "JSXOpeningElement" && Array.isArray(opening.attributes)) {
+					opening.attributes = opening.attributes.filter((attr) => attr !== p.node);
+					changed = true;
+				}
+			}
+		} else if (isEmptyStyleRef(expr)) {
+			const opening = p.parentPath?.node;
+			if (opening?.type === "JSXOpeningElement" && Array.isArray(opening.attributes)) {
+				opening.attributes = opening.attributes.filter((attr) => attr !== p.node);
+				changed = true;
+			}
+		}
+	});
+	return changed;
+}
+//#endregion
+//#region src/internal/post-process-imports.ts
+function cleanupPostProcessImports(args) {
+	const { root, j, preserveReactImport, newImportLocalNames, newImportSourcesByLocal } = args;
+	let changed = false;
+	root.find(j.ImportDeclaration, { source: { value: "@emotion/is-prop-valid" } }).forEach((p) => {
+		const spec = p.node.specifiers?.find((s) => s.type === "ImportDefaultSpecifier");
+		const local = spec?.local?.type === "Identifier" ? spec.local.name : null;
+		if (!local) return;
+		if (!(root.find(j.Identifier, { name: local }).filter((idPath) => j(idPath).closest(j.ImportDeclaration).size() === 0).size() > 0)) {
+			j(p).remove();
+			changed = true;
+		}
+	});
+	root.find(j.ImportDeclaration).forEach((p) => {
+		if (preserveReactImport && (p.node?.source)?.value === "react") {
+			if ((p.node.specifiers ?? []).some((s) => (s.type === "ImportDefaultSpecifier" || s.type === "ImportNamespaceSpecifier") && s.local?.type === "Identifier" && s.local.name === "React")) return;
+		}
+		const specs = p.node.specifiers ?? [];
+		if (specs.length === 0) return;
+		if (p.node.importKind === "type") return;
+		const nextSpecs = specs.filter((s) => {
+			if (s?.importKind === "type") return true;
+			const local = s?.local?.type === "Identifier" ? s.local.name : s?.type === "ImportDefaultSpecifier" && s.local?.type === "Identifier" ? s.local.name : s?.type === "ImportNamespaceSpecifier" && s.local?.type === "Identifier" ? s.local.name : null;
+			if (!local) return true;
+			if (newImportLocalNames?.has(local)) {
+				const sourceValue = (p.node?.source)?.value;
+				const allowedSources = newImportSourcesByLocal?.get(local);
+				if (!allowedSources || !allowedSources.has(sourceValue)) return false;
+			}
+			return usedOutsideImports(root, j, local, s.local?.type === "Identifier" ? s.local : null);
+		});
+		if (nextSpecs.length !== specs.length) {
+			p.node.specifiers = nextSpecs;
+			changed = true;
+		}
+		if ((p.node.specifiers?.length ?? 0) === 0) {
+			j(p).remove();
+			changed = true;
+		}
+	});
+	return {
+		changed,
+		needsReactImport: usesReactIdentifierWithoutImport(root, j)
+	};
+}
+function collectNewImportMetadata(resolverImports, filePath) {
+	const newImportLocalNames = /* @__PURE__ */ new Set();
+	const newImportSourcesByLocal = /* @__PURE__ */ new Map();
+	for (const imp of resolverImports.values()) {
+		const source = importSourceToModuleSpecifier(imp.from, filePath);
+		for (const n of imp.names ?? []) {
+			const local = n.local ?? n.imported;
+			if (local) {
+				newImportLocalNames.add(local);
+				const sources = newImportSourcesByLocal.get(local) ?? /* @__PURE__ */ new Set();
+				sources.add(source);
+				newImportSourcesByLocal.set(local, sources);
+			}
+		}
+	}
+	return {
+		newImportLocalNames,
+		newImportSourcesByLocal
+	};
+}
+function usedOutsideImports(root, j, localName, importLocalNode) {
+	const usedByIdentifier = root.find(j.Identifier, { name: localName }).filter((idPath) => {
+		if (j(idPath).closest(j.ImportDeclaration).size() > 0) return false;
+		const parent = idPath.parent?.node;
+		if (parent && isMemberExpression(parent) && parent.property === idPath.node && parent.computed === false) return false;
+		if (parent && parent.type === "Property" && parent.key === idPath.node && parent.shorthand !== true) return false;
+		if (parent?.type === "TSPropertySignature" && parent.key === idPath.node) return false;
+		if (parent?.type === "JSXAttribute" && parent.name === idPath.node) return false;
+		return resolvesToImportBinding(idPath, localName, importLocalNode);
+	}).size() > 0;
+	const usedByJsxIdentifier = isProbablyJsxBindingName(localName) && root.find(j.JSXIdentifier, { name: localName }).filter((jsxPath) => {
+		if (j(jsxPath).closest(j.ImportDeclaration).size() > 0) return false;
+		return true;
+	}).size() > 0;
+	return usedByIdentifier || usedByJsxIdentifier;
+}
+function isProbablyJsxBindingName(name) {
+	const first = name[0] ?? "";
+	return first.toUpperCase() === first && first.toLowerCase() !== first;
+}
+function resolvesToImportBinding(idPath, localName, importLocalNode) {
+	try {
+		const bindings = (idPath.scope?.lookup?.(localName))?.getBindings?.()?.[localName];
+		if (!Array.isArray(bindings)) return true;
+		return bindings.some((bindingPath) => bindingPath?.node === importLocalNode);
+	} catch {
+		return true;
+	}
+}
+function usesReactIdentifierWithoutImport(root, j) {
+	const hasReactImport = root.find(j.ImportDeclaration).filter((p) => (p.node?.source)?.value === "react").filter((p) => (p.node.specifiers ?? []).some((s) => (s.type === "ImportDefaultSpecifier" || s.type === "ImportNamespaceSpecifier") && s.local?.type === "Identifier" && s.local.name === "React")).size() > 0;
+	return root.find(j.Identifier, { name: "React" }).size() > 0 && !hasReactImport;
+}
+//#endregion
 //#region src/internal/rewrite-jsx.ts
 function postProcessTransformedAst(args) {
-	const { root, j, relationOverrides, ancestorSelectorParents, componentNameToStyleKey, emptyStyleKeys, preserveReactImport, newImportLocalNames, newImportSourcesByLocal, stylesIdentifier = "styles", crossFileMarkers, parentsNeedingDefaultMarker, ancestorAttrsByStyleKey } = args;
+	const { root, j, relationOverrides, ancestorSelectorParents, styledDecls, localElementOverridesByParent = /* @__PURE__ */ new Map(), componentNameToStyleKey, emptyStyleKeys, preserveReactImport, newImportLocalNames, newImportSourcesByLocal, stylesIdentifier = "styles", crossFileMarkers, parentsNeedingDefaultMarker, ancestorAttrsByStyleKey } = args;
 	let changed = false;
 	root.find(j.VariableDeclaration).forEach((p) => {
 		if (p.node.declarations.length === 0) {
@@ -33384,7 +34556,7 @@ function postProcessTransformedAst(args) {
 			changed = true;
 		}
 	});
-	if (relationOverrides.length > 0 || ancestorSelectorParents.size > 0 || ancestorAttrsByStyleKey && ancestorAttrsByStyleKey.size > 0) {
+	if (relationOverrides.length > 0 || ancestorSelectorParents.size > 0 || localElementOverridesByParent.size > 0 || ancestorAttrsByStyleKey && ancestorAttrsByStyleKey.size > 0) {
 		const makeDefaultMarkerCall = () => j.callExpression(j.memberExpression(j.identifier("stylex"), j.identifier("defaultMarker")), []);
 		const crossFileChildOverrides = /* @__PURE__ */ new Map();
 		const crossFileParentMarkers = /* @__PURE__ */ new Map();
@@ -33392,7 +34564,7 @@ function postProcessTransformedAst(args) {
 			if (!o.crossFile || !o.crossFileComponentLocalName) continue;
 			appendToMapList(componentNameToStyleKey?.get(o.crossFileComponentLocalName) === o.parentStyleKey || o.parentStyleKey === toStyleKey(o.crossFileComponentLocalName) ? crossFileParentMarkers : crossFileChildOverrides, o.crossFileComponentLocalName, o);
 		}
-		const isStylexPropsCall = (n) => n?.type === "CallExpression" && n.callee?.type === "MemberExpression" && n.callee.object?.type === "Identifier" && n.callee.object.name === "stylex" && n.callee.property?.type === "Identifier" && n.callee.property.name === "props";
+		const isStylexPropsCall = (n) => n?.type === "CallExpression" && isIdentifierMemberExpression(n.callee, "stylex", "props");
 		const getStylexPropsCallFromAttrs = (attrs) => {
 			for (const a of attrs ?? []) {
 				if (a.type !== "JSXSpreadAttribute") continue;
@@ -33410,7 +34582,7 @@ function postProcessTransformedAst(args) {
 			for (const a of attrs ?? []) if (a.type === "JSXAttribute" && a.name?.type === "JSXIdentifier" && a.name.name === "sx" && a.value?.type === "JSXExpressionContainer") return a;
 		};
 		const isStyleKeyRef = (node, key) => {
-			if (node?.type === "MemberExpression" && node.object?.type === "Identifier" && node.object.name === stylesIdentifier && node.property?.type === "Identifier" && node.property.name === key) return true;
+			if (isIdentifierMemberExpression(node, stylesIdentifier, key)) return true;
 			if (node?.type === "CallExpression") return isStyleKeyRef(node.callee, key);
 			return false;
 		};
@@ -33433,22 +34605,27 @@ function postProcessTransformedAst(args) {
 			else container.expression = j.arrayExpression([expr, ...newArgs]);
 		};
 		const isIdentifierNamed = (a, name) => a?.type === "Identifier" && a.name === name;
-		const isDefaultMarkerCall = (a) => a?.type === "CallExpression" && a.callee?.type === "MemberExpression" && a.callee.object?.type === "Identifier" && a.callee.object.name === "stylex" && a.callee.property?.type === "Identifier" && a.callee.property.name === "defaultMarker";
+		const isDefaultMarkerCall = (a) => a?.type === "CallExpression" && isIdentifierMemberExpression(a.callee, "stylex", "defaultMarker");
 		const hasIdentifierArg = (call, name) => (call.arguments ?? []).some((a) => isIdentifierNamed(a, name));
 		const hasIdentifierInSxArgs = (sxAttr, name) => getSxAttrArgs(sxAttr.value.expression).some((a) => isIdentifierNamed(a, name));
 		const hasDefaultMarker = (call) => (call.arguments ?? []).some(isDefaultMarkerCall);
 		const hasDefaultMarkerInSxArgs = (sxAttr) => getSxAttrArgs(sxAttr.value.expression).some(isDefaultMarkerCall);
 		const overridesByChild = /* @__PURE__ */ new Map();
 		for (const o of relationOverrides) overridesByChild.set(o.childStyleKey, [...overridesByChild.get(o.childStyleKey) ?? [], o]);
+		const componentNameToDecl = /* @__PURE__ */ new Map();
+		for (const decl of styledDecls ?? []) componentNameToDecl.set(decl.localName, decl);
+		const ancestorEntryHasParentKey = (ancestor, parentStyleKey) => {
+			const markerVarName = crossFileMarkers?.get(parentStyleKey);
+			return ancestor?.call && hasStyleKeyArg(ancestor.call, parentStyleKey) || ancestor?.sxAttr && getSxAttrArgs(ancestor.sxAttr.value.expression).some((arg) => isStyleKeyRef(arg, parentStyleKey)) || ancestor?.elementStyleKey && ancestor.elementStyleKey === parentStyleKey || markerVarName && ancestor?.markerVarName === markerVarName;
+		};
 		/** Check if any ancestor in the JSX tree contains the given parent style key. */
 		const ancestorHasParentKey = (ancestors, parentStyleKey) => {
-			const markerVarName = crossFileMarkers?.get(parentStyleKey);
-			return ancestors.some((a) => a?.call && hasStyleKeyArg(a.call, parentStyleKey) || a?.sxAttr && getSxAttrArgs(a.sxAttr.value.expression).some((arg) => isStyleKeyRef(arg, parentStyleKey)) || a?.elementStyleKey && a.elementStyleKey === parentStyleKey || markerVarName && a?.markerVarName === markerVarName);
+			return ancestors.some((a) => ancestorEntryHasParentKey(a, parentStyleKey));
 		};
 		const directParentHasParentKey = (ancestors, parentStyleKey) => {
 			const directParent = ancestors.at(-1);
 			if (!directParent) return false;
-			return directParent.call && hasStyleKeyArg(directParent.call, parentStyleKey) || directParent.sxAttr && getSxAttrArgs(directParent.sxAttr.value.expression).some((arg) => isStyleKeyRef(arg, parentStyleKey)) || directParent.elementStyleKey === parentStyleKey;
+			return ancestorEntryHasParentKey(directParent, parentStyleKey);
 		};
 		const pendingEmptyKeyRemovals = [];
 		const visit = (node, ancestors) => {
@@ -33459,6 +34636,7 @@ function postProcessTransformedAst(args) {
 			const sxAttr = getSxAttrFromAttrs(attrs);
 			const elementName = getJsxElementName(opening?.name, { allowMemberExpression: false });
 			const elementStyleKey = elementName ? componentNameToStyleKey?.get(elementName) : null;
+			const originalStyledName = opening.__styledComponentLocalName;
 			if (call) {
 				for (const parentKey of ancestorSelectorParents) if (hasStyleKeyArg(call, parentKey)) {
 					if (emptyStyleKeys?.has(parentKey)) pendingEmptyKeyRemovals.push({
@@ -33503,6 +34681,35 @@ function postProcessTransformedAst(args) {
 					changed = true;
 				}
 			}
+			const nearestAncestor = ancestors[ancestors.length - 1];
+			const targetId = getLocalElementTargetId(opening, elementName ?? null, originalStyledName);
+			if (targetId || localElementOverridesByParent.size > 0) for (const [parentStyleKey, localOverrides] of localElementOverridesByParent.entries()) {
+				if (!ancestorHasParentKey(ancestors, parentStyleKey)) continue;
+				for (const override of localOverrides) {
+					if (override.relation === "child" && (!nearestAncestor || !ancestorEntryHasParentKey(nearestAncestor, parentStyleKey))) continue;
+					const resolvedTargetId = resolveLocalElementTargetForNode({
+						targetId,
+						override,
+						attrs,
+						opening,
+						componentNameToDecl,
+						hasStyleKeyInAttrs
+					});
+					if (!resolvedTargetId) continue;
+					const localStyleKey = override.styleKeysByTargetId?.[resolvedTargetId];
+					if (!localStyleKey) continue;
+					if (call ? hasStyleKeyArg(call, localStyleKey) : hasStyleKeyInAttrs(attrs, localStyleKey)) continue;
+					const overrideArg = j.memberExpression(j.identifier(stylesIdentifier), j.identifier(localStyleKey));
+					if (call) call.arguments = [...call.arguments ?? [], overrideArg];
+					else if (sxAttr) addArgsToSxAttr(sxAttr, [overrideArg]);
+					else {
+						const existingSxAttr = getSxAttrFromAttrs(opening.attributes ?? []);
+						if (existingSxAttr) addArgsToSxAttr(existingSxAttr, [overrideArg]);
+						else opening.attributes = [...opening.attributes ?? [], j.jsxAttribute(j.jsxIdentifier("sx"), j.jsxExpressionContainer(overrideArg))];
+					}
+					changed = true;
+				}
+			}
 			const childOverrides = elementName ? crossFileChildOverrides.get(elementName) : void 0;
 			if (childOverrides) {
 				const overrideArgs = [];
@@ -33635,148 +34842,35 @@ function postProcessTransformedAst(args) {
 		});
 		for (const { call, key } of pendingEmptyKeyRemovals) {
 			const originalLength = (call.arguments ?? []).length;
-			call.arguments = (call.arguments ?? []).filter((a) => !(a?.type === "MemberExpression" && a.object?.type === "Identifier" && a.object.name === stylesIdentifier && a.property?.type === "Identifier" && a.property.name === key));
+			call.arguments = (call.arguments ?? []).filter((a) => !isIdentifierMemberExpression(a, stylesIdentifier, key));
 			if ((call.arguments ?? []).length !== originalLength) changed = true;
 		}
 	}
-	if (emptyStyleKeys && emptyStyleKeys.size > 0) {
-		const isEmptyStyleRef = (a) => a?.type === "MemberExpression" && a.object?.type === "Identifier" && a.object.name === stylesIdentifier && a.property?.type === "Identifier" && emptyStyleKeys.has(a.property.name);
-		root.find(j.CallExpression).forEach((p) => {
-			const call = p.node;
-			if (call?.callee?.type === "MemberExpression" && call.callee.object?.type === "Identifier" && call.callee.object.name === "stylex" && call.callee.property?.type === "Identifier" && call.callee.property.name === "props") {
-				const originalLength = (call.arguments ?? []).length;
-				call.arguments = (call.arguments ?? []).filter((a) => !isEmptyStyleRef(a));
-				if (call.arguments.length !== originalLength) changed = true;
-				if (call.arguments.length === 0) {
-					const parentNode = p.parentPath?.node;
-					if (parentNode?.type === "JSXSpreadAttribute") {
-						const jsxOpening = p.parentPath?.parentPath?.node;
-						if (jsxOpening?.type === "JSXOpeningElement" && Array.isArray(jsxOpening.attributes)) {
-							jsxOpening.attributes = jsxOpening.attributes.filter((attr) => attr !== parentNode);
-							changed = true;
-						}
-					}
-				}
-			}
-			if (call?.callee?.type === "Identifier") {
-				const firstArg = call.arguments?.[0];
-				if (firstArg?.type === "ArrayExpression") {
-					const arr = firstArg;
-					const originalLength = (arr.elements ?? []).length;
-					arr.elements = (arr.elements ?? []).filter((e) => !isEmptyStyleRef(e));
-					if (arr.elements.length !== originalLength) changed = true;
-				}
-				if (isEmptyStyleRef(firstArg)) {
-					call.arguments[0] = j.identifier("undefined");
-					changed = true;
-				}
-			}
-		});
-		root.find(j.JSXAttribute, { name: { name: "sx" } }).forEach((p) => {
-			const val = p.node.value;
-			if (!val || val.type !== "JSXExpressionContainer") return;
-			const expr = val.expression;
-			if (expr?.type === "ArrayExpression") {
-				const orig = (expr.elements ?? []).length;
-				expr.elements = (expr.elements ?? []).filter((e) => !isEmptyStyleRef(e));
-				if (expr.elements.length !== orig) changed = true;
-				if (expr.elements.length === 1) {
-					val.expression = expr.elements[0];
-					changed = true;
-				}
-				if (expr.elements.length === 0) {
-					const opening = p.parentPath?.node;
-					if (opening?.type === "JSXOpeningElement" && Array.isArray(opening.attributes)) {
-						opening.attributes = opening.attributes.filter((attr) => attr !== p.node);
-						changed = true;
-					}
-				}
-			} else if (isEmptyStyleRef(expr)) {
-				const opening = p.parentPath?.node;
-				if (opening?.type === "JSXOpeningElement" && Array.isArray(opening.attributes)) {
-					opening.attributes = opening.attributes.filter((attr) => attr !== p.node);
-					changed = true;
-				}
-			}
-		});
-	}
-	root.find(j.ImportDeclaration, { source: { value: "@emotion/is-prop-valid" } }).forEach((p) => {
-		const spec = p.node.specifiers?.find((s) => s.type === "ImportDefaultSpecifier");
-		const local = spec?.local?.type === "Identifier" ? spec.local.name : null;
-		if (!local) return;
-		if (!(root.find(j.Identifier, { name: local }).filter((idPath) => j(idPath).closest(j.ImportDeclaration).size() === 0).size() > 0)) {
-			j(p).remove();
-			changed = true;
-		}
-	});
-	root.find(j.ImportDeclaration).forEach((p) => {
-		if (preserveReactImport && (p.node?.source)?.value === "react") {
-			if ((p.node.specifiers ?? []).some((s) => (s.type === "ImportDefaultSpecifier" || s.type === "ImportNamespaceSpecifier") && s.local?.type === "Identifier" && s.local.name === "React")) return;
-		}
-		const specs = p.node.specifiers ?? [];
-		if (specs.length === 0) return;
-		const usedOutsideImports = (localName, importLocalNode) => {
-			const isProbablyJsxBindingName = (name) => {
-				const first = name[0] ?? "";
-				return first.toUpperCase() === first && first.toLowerCase() !== first;
-			};
-			const resolvesToImportBinding = (idPath) => {
-				try {
-					const bindings = (idPath.scope?.lookup?.(localName))?.getBindings?.()?.[localName];
-					if (!Array.isArray(bindings)) return true;
-					return bindings.some((bindingPath) => bindingPath?.node === importLocalNode);
-				} catch {
-					return true;
-				}
-			};
-			const usedByIdentifier = root.find(j.Identifier, { name: localName }).filter((idPath) => {
-				if (j(idPath).closest(j.ImportDeclaration).size() > 0) return false;
-				const parent = idPath.parent?.node;
-				if (parent && isMemberExpression(parent) && parent.property === idPath.node && parent.computed === false) return false;
-				if (parent && parent.type === "Property" && parent.key === idPath.node && parent.shorthand !== true) return false;
-				if (parent?.type === "TSPropertySignature" && parent.key === idPath.node) return false;
-				if (parent?.type === "JSXAttribute" && parent.name === idPath.node) return false;
-				return resolvesToImportBinding(idPath);
-			}).size() > 0;
-			const usedByJsxIdentifier = isProbablyJsxBindingName(localName) && root.find(j.JSXIdentifier, { name: localName }).filter((jsxPath) => {
-				if (j(jsxPath).closest(j.ImportDeclaration).size() > 0) return false;
-				return true;
-			}).size() > 0;
-			return usedByIdentifier || usedByJsxIdentifier;
-		};
-		if (p.node.importKind === "type") return;
-		const nextSpecs = specs.filter((s) => {
-			if (s?.importKind === "type") return true;
-			const local = s?.local?.type === "Identifier" ? s.local.name : s?.type === "ImportDefaultSpecifier" && s.local?.type === "Identifier" ? s.local.name : s?.type === "ImportNamespaceSpecifier" && s.local?.type === "Identifier" ? s.local.name : null;
-			if (!local) return true;
-			if (newImportLocalNames?.has(local)) {
-				const sourceValue = (p.node?.source)?.value;
-				const allowedSources = newImportSourcesByLocal?.get(local);
-				if (!allowedSources || !allowedSources.has(sourceValue)) return false;
-			}
-			return usedOutsideImports(local, s.local?.type === "Identifier" ? s.local : null);
-		});
-		if (nextSpecs.length !== specs.length) {
-			p.node.specifiers = nextSpecs;
-			changed = true;
-		}
-		if ((p.node.specifiers?.length ?? 0) === 0) {
-			j(p).remove();
-			changed = true;
-		}
+	if (cleanupEmptyStyleReferences({
+		root,
+		j,
+		emptyStyleKeys,
+		stylesIdentifier
+	})) changed = true;
+	const importCleanup = cleanupPostProcessImports({
+		root,
+		j,
+		preserveReactImport,
+		newImportLocalNames,
+		newImportSourcesByLocal
 	});
-	const hasReactImport = root.find(j.ImportDeclaration).filter((p) => (p.node?.source)?.value === "react").filter((p) => (p.node.specifiers ?? []).some((s) => (s.type === "ImportDefaultSpecifier" || s.type === "ImportNamespaceSpecifier") && s.local?.type === "Identifier" && s.local.name === "React")).size() > 0;
-	const usesReactIdent = root.find(j.Identifier, { name: "React" }).size() > 0;
+	if (importCleanup.changed) changed = true;
 	return {
 		changed,
-		needsReactImport: usesReactIdent && !hasReactImport
+		needsReactImport: importCleanup.needsReactImport
 	};
 }
 /** Extracts style key names referenced in a stylex.props() call or sx attribute. */
 function getUsedStyleKeys(call, sxAttr, stylesIdentifier) {
 	const keys = [];
 	const extractKey = (node) => {
-		if (node?.type === "MemberExpression" && node.object?.type === "Identifier" && node.object.name === stylesIdentifier && node.property?.type === "Identifier") keys.push(node.property.name);
+		const propertyName = getIdentifierMemberPropertyName(node, stylesIdentifier);
+		if (propertyName) keys.push(propertyName);
 		if (node?.type === "CallExpression") extractKey(node.callee);
 	};
 	if (call) for (const arg of call.arguments ?? []) extractKey(arg);
@@ -33803,6 +34897,27 @@ function appendToMapList(map, key, value) {
 	if (list) list.push(value);
 	else map.set(key, [value]);
 }
+function getLocalElementTargetId(opening, _elementName, originalStyledName) {
+	if (!opening?.name) return null;
+	if (originalStyledName) return `styled:${originalStyledName}`;
+	if (opening.name.type === "JSXIdentifier" && /^[a-z]/.test(opening.name.name)) return `intrinsic:${opening.name.name}`;
+	return null;
+}
+function resolveLocalElementTargetForNode(args) {
+	const { targetId, override, attrs, opening, componentNameToDecl, hasStyleKeyInAttrs } = args;
+	if (targetId && override.styleKeysByTargetId?.[targetId]) return targetId;
+	for (const candidateId of Object.keys(override.styleKeysByTargetId ?? {})) {
+		if (!candidateId.startsWith("styled:")) continue;
+		const localName = candidateId.slice(7);
+		const decl = componentNameToDecl.get(localName);
+		if (decl && hasStyleKeyInAttrs(attrs, decl.styleKey)) return candidateId;
+	}
+	if (opening?.name?.type === "JSXIdentifier" && /^[a-z]/.test(opening.name.name)) {
+		const intrinsicId = `intrinsic:${opening.name.name}`;
+		if (override.styleKeysByTargetId?.[intrinsicId]) return intrinsicId;
+	}
+	return null;
+}
 //#endregion
 //#region src/internal/transform-steps/post-process.ts
 /**
@@ -33817,20 +34932,7 @@ function postProcessStep(ctx) {
 	const allStyledDecls = ctx.styledDecls;
 	if (!allStyledDecls) return CONTINUE;
 	const styledDecls = getActiveStyledDecls(allStyledDecls) ?? [];
-	const newImportLocalNames = /* @__PURE__ */ new Set();
-	const newImportSourcesByLocal = /* @__PURE__ */ new Map();
-	for (const imp of ctx.resolverImports.values()) {
-		const source = importSourceToModuleSpecifier(imp.from, String(file.path));
-		for (const n of imp.names ?? []) {
-			const local = n.local ?? n.imported;
-			if (local) {
-				newImportLocalNames.add(local);
-				const sources = newImportSourcesByLocal.get(local) ?? /* @__PURE__ */ new Set();
-				sources.add(source);
-				newImportSourcesByLocal.set(local, sources);
-			}
-		}
-	}
+	const { newImportLocalNames, newImportSourcesByLocal } = collectNewImportMetadata(ctx.resolverImports, String(file.path));
 	ctx.newImportLocalNames = newImportLocalNames;
 	ctx.newImportSourcesByLocal = newImportSourcesByLocal;
 	const componentNameToStyleKey = /* @__PURE__ */ new Map();
@@ -33840,6 +34942,7 @@ function postProcessStep(ctx) {
 		j,
 		relationOverrides: ctx.relationOverrides ?? [],
 		ancestorSelectorParents: ctx.ancestorSelectorParents ?? /* @__PURE__ */ new Set(),
+		localElementOverridesByParent: new Map(styledDecls.filter((decl) => decl.localElementOverrides?.length).map((decl) => [decl.styleKey, decl.localElementOverrides ?? []])),
 		componentNameToStyleKey,
 		emptyStyleKeys: ctx.emptyStyleKeys ?? /* @__PURE__ */ new Set(),
 		preserveReactImport: ctx.preserveReactImport,
@@ -33852,17 +34955,7 @@ function postProcessStep(ctx) {
 	});
 	if (post.changed) ctx.markChanged();
 	ctx.needsReactImport = post.needsReactImport;
-	for (const decl of styledDecls) for (const helperName of decl.consumedLocalHelpers ?? []) {
-		const fnPaths = root.find(j.FunctionDeclaration, { id: { name: helperName } });
-		if (fnPaths.size() === 0) continue;
-		if (fnPaths.some((p) => p.parentPath?.node?.type === "ExportNamedDeclaration" || p.parentPath?.node?.type === "ExportDefaultDeclaration")) continue;
-		if (root.find(j.Identifier, { name: helperName }).filter((idPath) => {
-			const parent = idPath.parentPath?.node;
-			if (parent?.type === "FunctionDeclaration" && parent.id === idPath.node) return false;
-			return true;
-		}).size() === 0) fnPaths.forEach((p) => p.prune());
-	}
-	if (/\.(ts|tsx)$/.test(file.path)) {}
+	cleanupConsumedLocalHelpers(ctx, styledDecls);
 	return CONTINUE;
 }
 //#endregion
@@ -33919,6 +35012,25 @@ function reinsertStaticPropsStep(ctx) {
 	return CONTINUE;
 }
 //#endregion
+//#region src/internal/utilities/jsx-children.ts
+function findContainingJsxChildrenOwner(path) {
+	const currentNode = path.node;
+	let cursor = path.parentPath;
+	while (cursor) {
+		const candidate = cursor.node;
+		if (candidate && (candidate.type === "JSXElement" || candidate.type === "JSXFragment") && Array.isArray(candidate.children) && candidate.children.includes(currentNode)) return candidate;
+		cursor = cursor.parentPath;
+	}
+}
+function isJsxTextChild(child) {
+	return typeof child === "object" && child !== null && child.type === "JSXText" && typeof child.value === "string";
+}
+function isJsxEmptyExpressionContainer(child) {
+	if (typeof child !== "object" || child === null) return false;
+	const maybeExpression = child;
+	return maybeExpression.type === "JSXExpressionContainer" && maybeExpression.expression?.type === "JSXEmptyExpression";
+}
+//#endregion
 //#region src/internal/transform-steps/rewrite-jsx.ts
 /**
 * Step: rewrite JSX usage and remove unused styled declarations.
@@ -33988,7 +35100,7 @@ function rewriteJsxStep(ctx) {
 			}
 			const closing = p.node.closingElement;
 			opening.__styledComponentLocalName = decl.localName;
-			let finalTag = decl.base.kind === "intrinsic" ? decl.base.tagName : decl.base.ident;
+			let finalTag = decl.attrsInfo?.attrsAsTag ?? (decl.base.kind === "intrinsic" ? decl.base.tagName : decl.base.ident);
 			const inlineVariantDimensions = decl.inlinedBaseComponent?.hasInlineJsxVariants ? decl.variantDimensions ?? [] : [];
 			const inlineVariantByProp = new Map(inlineVariantDimensions.map((dimension) => [dimension.propName, dimension]));
 			const inlineVariantProps = new Set(inlineVariantDimensions.map((dimension) => dimension.propName));
@@ -34006,10 +35118,9 @@ function rewriteJsxStep(ctx) {
 			}
 			const createJsxName = (tag) => {
 				if (tag.includes(".")) {
-					const parts = tag.split(".");
-					const firstPart = parts[0];
-					if (!firstPart) return j.jsxIdentifier(tag);
-					return j.jsxMemberExpression(j.jsxIdentifier(firstPart), j.jsxIdentifier(parts.slice(1).join(".")));
+					const [firstPart, ...memberParts] = tag.split(".");
+					if (!firstPart || memberParts.length === 0) return j.jsxIdentifier(tag);
+					return memberParts.reduce((object, member) => j.jsxMemberExpression(object, j.jsxIdentifier(member)), j.jsxIdentifier(firstPart));
 				}
 				return j.jsxIdentifier(tag);
 			};
@@ -34041,7 +35152,7 @@ function rewriteJsxStep(ctx) {
 				return true;
 			});
 			if (decl.attrsInfo) {
-				const { staticAttrs, conditionalAttrs, invertedBoolAttrs } = decl.attrsInfo;
+				const { staticAttrs, dynamicAttrs, conditionalAttrs, invertedBoolAttrs, attrsStaticStyleExpr } = decl.attrsInfo;
 				const hasAttr = (name) => keptAttrs.some((a) => a.type === "JSXAttribute" && a.name.type === "JSXIdentifier" && a.name.name === name);
 				for (const cond of conditionalAttrs) {
 					const idx = keptAttrs.findIndex((a) => a.type === "JSXAttribute" && a.name.type === "JSXIdentifier" && a.name.name === cond.jsxProp);
@@ -34063,11 +35174,31 @@ function rewriteJsxStep(ctx) {
 						if (!hasAttr(inv.attrName)) keptAttrs.unshift(j.jsxAttribute(j.jsxIdentifier(inv.attrName), j.jsxExpressionContainer(j.literal(!isTrue))));
 					} else if (!hasAttr(inv.attrName)) keptAttrs.unshift(j.jsxAttribute(j.jsxIdentifier(inv.attrName), j.jsxExpressionContainer(j.literal(true))));
 				}
+				for (const dyn of dynamicAttrs ?? []) {
+					const idx = keptAttrs.findIndex((a) => a.type === "JSXAttribute" && a.name.type === "JSXIdentifier" && a.name.name === dyn.jsxProp);
+					if (idx !== -1) {
+						const propAttr = keptAttrs[idx];
+						const valueExpr = extractJsxAttrValueExpr(j, propAttr);
+						if (valueExpr) {
+							removeJsxAttrsByName(keptAttrs, dyn.attrName);
+							keptAttrs.unshift(j.jsxAttribute(j.jsxIdentifier(dyn.attrName), j.jsxExpressionContainer(dyn.defaultValue === void 0 ? valueExpr : j.conditionalExpression(j.binaryExpression("===", valueExpr, j.identifier("undefined")), literalExprForDynamicAttrDefault(j, dyn.defaultValue), valueExpr))));
+						}
+					} else if (dyn.defaultValue !== void 0) {
+						removeJsxAttrsByName(keptAttrs, dyn.attrName);
+						keptAttrs.unshift(j.jsxAttribute(j.jsxIdentifier(dyn.attrName), j.jsxExpressionContainer(literalExprForDynamicAttrDefault(j, dyn.defaultValue))));
+					}
+				}
 				for (const [k, v] of Object.entries(staticAttrs)) {
+					if (k === "className") continue;
 					if (hasAttr(k)) continue;
-					const valNode = typeof v === "string" ? j.literal(v) : typeof v === "number" || typeof v === "boolean" ? j.jsxExpressionContainer(j.literal(v)) : v === void 0 ? j.jsxExpressionContainer(j.identifier("undefined")) : v === null ? j.jsxExpressionContainer(j.literal(null)) : j.literal(String(v));
-					keptAttrs.unshift(j.jsxAttribute(j.jsxIdentifier(k), valNode));
+					const attr = buildStaticAttrFromValue(j, k, v, { booleanTrueAsShorthand: false });
+					if (attr) keptAttrs.unshift(attr);
+				}
+				if (staticAttrs.className !== void 0) {
+					const attr = buildStaticAttrFromValue(j, "className", staticAttrs.className, { booleanTrueAsShorthand: false });
+					if (attr) keptAttrs.unshift(attr);
 				}
+				if (attrsStaticStyleExpr) keptAttrs.unshift(j.jsxAttribute(j.jsxIdentifier("style"), j.jsxExpressionContainer(cloneAstNode(attrsStaticStyleExpr))));
 			}
 			const leading = [];
 			const rest = [];
@@ -34078,11 +35209,15 @@ function rewriteJsxStep(ctx) {
 			let seenSpread = false;
 			for (const attr of keptAttrs) if (attr.type === "JSXAttribute" && attr.name.type === "JSXIdentifier" && attr.name.name === "style") {
 				hasCallerStyleAttr = true;
-				if (staticInlineStyleExpr) {
-					const callerStyleExpr = extractJsxAttrValueExpr(j, attr);
-					styleAttr = j.jsxAttribute(j.jsxIdentifier("style"), j.jsxExpressionContainer(callerStyleExpr ? j.objectExpression([j.spreadElement(staticInlineStyleExpr), j.spreadElement(callerStyleExpr)]) : staticInlineStyleExpr));
-				} else styleAttr = attr;
-			} else if (attr.type === "JSXAttribute" && attr.name.type === "JSXIdentifier" && attr.name.name === "className") classNameAttr = attr;
+				const callerStyleExpr = extractJsxAttrValueExpr(j, attr);
+				const existingStyleExpr = extractJsxAttrValueExpr(j, styleAttr);
+				if (existingStyleExpr || staticInlineStyleExpr) styleAttr = j.jsxAttribute(j.jsxIdentifier("style"), j.jsxExpressionContainer(callerStyleExpr ? j.objectExpression([
+					...staticInlineStyleExpr ? [j.spreadElement(staticInlineStyleExpr)] : [],
+					...existingStyleExpr ? [j.spreadElement(existingStyleExpr)] : [],
+					j.spreadElement(callerStyleExpr)
+				]) : existingStyleExpr ?? staticInlineStyleExpr));
+				else styleAttr = attr;
+			} else if (attr.type === "JSXAttribute" && attr.name.type === "JSXIdentifier" && attr.name.name === "className") classNameAttr = mergeClassNameAttrs(j, classNameAttr, attr);
 			else if (attr.type === "JSXAttribute" && attr.name.type === "JSXIdentifier" && attr.name.name === "sx") sxAttr = attr;
 			else if (attr.type === "JSXSpreadAttribute") {
 				rest.push(attr);
@@ -34260,6 +35395,7 @@ function rewriteJsxStep(ctx) {
 				styleArgs.push(j.logicalExpression("&&", promotedConditionalVariant.conditionExpr, j.memberExpression(j.identifier(stylesId), j.identifier(promotedConditionalVariant.styleKey))));
 			}
 			const extraClassNameExpr = decl.extraClassNames && decl.extraClassNames.length > 0 ? buildExtraClassNameExpr(j, decl.extraClassNames) : void 0;
+			if (!styleAttr && decl.attrsInfo?.attrsStaticStyleExpr) styleAttr = j.jsxAttribute(j.jsxIdentifier("style"), j.jsxExpressionContainer(cloneAstNode(decl.attrsInfo.attrsStaticStyleExpr)));
 			if (staticInlineStyleExpr && !styleAttr) styleAttr = j.jsxAttribute(j.jsxIdentifier("style"), j.jsxExpressionContainer(staticInlineStyleExpr));
 			const wrappedAcceptsSxProp = !isIntrinsicTag && isWrappedComponentSxAware({
 				adapter: ctx.adapter,
@@ -34270,7 +35406,10 @@ function rewriteJsxStep(ctx) {
 				sourceOverrides: ctx.options.transformedFileSources
 			});
 			let effectiveClassNameAttr = classNameAttr;
-			if (extraClassNameExpr && !ctx.adapter.useSxProp) effectiveClassNameAttr = j.jsxAttribute(j.jsxIdentifier("className"), j.jsxExpressionContainer(extraClassNameExpr));
+			if (extraClassNameExpr && !ctx.adapter.useSxProp) {
+				const extraClassNameAttr = j.jsxAttribute(j.jsxIdentifier("className"), j.jsxExpressionContainer(extraClassNameExpr));
+				effectiveClassNameAttr = effectiveClassNameAttr ? mergeClassNameAttrs(j, effectiveClassNameAttr, extraClassNameAttr) : extraClassNameAttr;
+			}
 			const hasRestSpreadAttr = keptRestAfterVariants.some((attr) => attr.type === "JSXSpreadAttribute");
 			const needsMerge = effectiveClassNameAttr !== null || styleAttr !== null && !(staticInlineStyleExpr !== null && styleAttr !== null && effectiveClassNameAttr === null && !hasCallerStyleAttr && !hasRestSpreadAttr);
 			const stylesId = ctx.stylesIdentifier ?? "styles";
@@ -34302,6 +35441,7 @@ function rewriteJsxStep(ctx) {
 				...finalRest,
 				...styleAttr && !needsMerge && !useSxPropForWrapped ? [styleAttr] : []
 			];
+			preserveInlineJsxTextWhitespace(ctx, p, styledDecls);
 		});
 	}
 	return CONTINUE;
@@ -34330,14 +35470,36 @@ function buildInlineMergeCall(j, styleArgs, classNameAttr, styleAttr, styleMerge
 	]);
 	return buildInlineVerboseMergeFallback(j, stylesArg, classNameExpr, styleExpr);
 }
+function mergeClassNameAttrs(j, first, second) {
+	const parts = [extractJsxAttrValueExpr(j, first), extractJsxAttrValueExpr(j, second)].filter((expr) => !!expr);
+	const expr = parts.length === 1 ? parts[0] : buildClassNameJoinExpr(j, parts);
+	return j.jsxAttribute(j.jsxIdentifier("className"), j.jsxExpressionContainer(expr));
+}
+function removeJsxAttrsByName(attrs, name) {
+	for (let i = attrs.length - 1; i >= 0; i--) {
+		const attr = attrs[i];
+		if (attr?.type === "JSXAttribute" && attr.name?.type === "JSXIdentifier" && attr.name.name === name) attrs.splice(i, 1);
+	}
+}
+function literalExprForDynamicAttrDefault(j, value) {
+	if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") return j.literal(value);
+	if (value === null) return j.literal(null);
+	return j.identifier("undefined");
+}
 function buildInlineVerboseMergeFallback(j, stylesArg, classNameExpr, styleExpr) {
 	const sxIdentifier = j.identifier("sx");
 	const sxClassName = j.memberExpression(sxIdentifier, j.identifier("className"));
 	const sxStyle = j.memberExpression(sxIdentifier, j.identifier("style"));
-	const classNameValue = classNameExpr ? j.callExpression(j.memberExpression(j.callExpression(j.memberExpression(j.arrayExpression([sxClassName, classNameExpr]), j.identifier("filter")), [j.identifier("Boolean")]), j.identifier("join")), [j.literal(" ")]) : sxClassName;
+	const classNameValue = classNameExpr ? j.callExpression(j.memberExpression(j.callExpression(j.memberExpression(j.arrayExpression([sxClassName, ...flattenClassNameExpr(classNameExpr)]), j.identifier("filter")), [j.identifier("Boolean")]), j.identifier("join")), [j.literal(" ")]) : sxClassName;
 	const styleValue = styleExpr ? j.conditionalExpression(sxStyle, j.objectExpression([j.spreadElement(sxStyle), j.spreadElement(styleExpr)]), styleExpr) : sxStyle;
 	return j.callExpression(j.arrowFunctionExpression([], j.blockStatement([j.variableDeclaration("const", [j.variableDeclarator(sxIdentifier, j.callExpression(j.memberExpression(j.identifier("stylex"), j.identifier("props")), [stylesArg]))]), j.returnStatement(j.objectExpression([j.property("init", j.identifier("className"), classNameValue), j.property("init", j.identifier("style"), styleValue)]))])), []);
 }
+function flattenClassNameExpr(classNameExpr) {
+	return classNameExpr.type === "ArrayExpression" && classNameExpr.elements.every((element) => !!element) ? [...classNameExpr.elements] : [classNameExpr];
+}
+function buildClassNameJoinExpr(j, parts) {
+	return j.callExpression(j.memberExpression(j.callExpression(j.memberExpression(j.arrayExpression(parts), j.identifier("filter")), [j.identifier("Boolean")]), j.identifier("join")), [j.literal(" ")]);
+}
 /** Extracts the value expression from a JSX attribute node. */
 function extractJsxAttrValueExpr(j, attr) {
 	if (!attr) return;
@@ -34348,16 +35510,7 @@ function extractJsxAttrValueExpr(j, attr) {
 }
 function hasPreviousStaticSiblingWithName(path, componentName) {
 	const currentNode = path.node;
-	let cursor = path.parentPath;
-	let parentNode;
-	while (cursor) {
-		const candidate = cursor.node;
-		if (candidate && (candidate.type === "JSXElement" || candidate.type === "JSXFragment") && Array.isArray(candidate.children) && candidate.children.includes(currentNode)) {
-			parentNode = candidate;
-			break;
-		}
-		cursor = cursor.parentPath;
-	}
+	const parentNode = findContainingJsxChildrenOwner(path);
 	if (!parentNode?.children) return false;
 	const siblings = parentNode.children;
 	const currentIndex = siblings.indexOf(currentNode);
@@ -34382,6 +35535,83 @@ function hasPreviousStaticSiblingWithName(path, componentName) {
 	}
 	return false;
 }
+function preserveInlineJsxTextWhitespace(ctx, path, styledDecls) {
+	const { j } = ctx;
+	const parentNode = findContainingJsxChildrenOwner(path);
+	const children = parentNode?.children;
+	if (!children || isCustomComponentJsxElement(ctx, parentNode, styledDecls)) return;
+	for (let i = 0; i < children.length; i++) {
+		const child = children[i];
+		if (!isJsxTextChild(child)) continue;
+		if (!child.value.trim()) {
+			if (/^[ \t]+$/.test(child.value) && hasRenderableJsxSibling(children, i - 1, -1) && hasRenderableJsxSibling(children, i + 1, 1)) children.splice(i, 1, createJsxSpaceExpression(j, child.value));
+			continue;
+		}
+		const leading = child.value.match(/^[ \t]+(?=\S)/)?.[0];
+		if (leading && hasRenderableJsxSibling(children, i - 1, -1)) {
+			child.value = child.value.slice(leading.length);
+			children.splice(i, 0, createJsxSpaceExpression(j, leading));
+			i++;
+		}
+		const trailing = child.value.match(/\S([ \t]+)$/)?.[1];
+		if (trailing && hasRenderableJsxSibling(children, i + 1, 1)) {
+			child.value = child.value.slice(0, -trailing.length);
+			children.splice(i + 1, 0, createJsxSpaceExpression(j, trailing));
+			i++;
+		}
+	}
+}
+function isCustomComponentJsxElement(ctx, parentNode, styledDecls) {
+	const parentName = parentNode.openingElement?.name;
+	if (isReactFragmentJsxName(ctx, parentName)) return false;
+	if (isInlineStyledParent(parentName, styledDecls)) return false;
+	if (isCustomElementJsxName(parentName)) return true;
+	if (isJsxIdentifierName(parentName)) return !parentName.name || !/^[a-z]/.test(parentName.name);
+	return parentNode.type === "JSXElement";
+}
+function isInlineStyledParent(name, styledDecls) {
+	if (!isJsxIdentifierName(name)) return false;
+	return styledDecls.some((decl) => decl.localName === name.name && decl.base.kind === "intrinsic" && !decl.skipTransform && !decl.needsWrapperComponent && !decl.isCssHelper);
+}
+function isReactFragmentJsxName(ctx, name) {
+	if (isJsxIdentifierName(name)) {
+		const importInfo = ctx.importMap?.get(name.name);
+		return importInfo?.importedName === "Fragment" && isReactImportSource(importInfo.source);
+	}
+	if (!isJsxMemberExpressionName(name)) return false;
+	return isJsxIdentifierName(name.object) && isReactNamespaceBinding(ctx, name.object.name) && isJsxIdentifierName(name.property) && name.property.name === "Fragment";
+}
+function isReactImportSource(source) {
+	return typeof source === "object" && source !== null && source.kind === "specifier" && source.value === "react";
+}
+function isReactNamespaceBinding(ctx, localName) {
+	const { root, j } = ctx;
+	return root.find(j.ImportDeclaration).filter((path) => path.node.source?.value === "react").filter((path) => (path.node.specifiers ?? []).some((specifier) => (specifier.type === "ImportDefaultSpecifier" || specifier.type === "ImportNamespaceSpecifier") && specifier.local?.type === "Identifier" && specifier.local.name === localName)).size() > 0;
+}
+function isCustomElementJsxName(name) {
+	return isJsxIdentifierName(name) && name.name.includes("-");
+}
+function isJsxIdentifierName(name) {
+	return typeof name === "object" && name !== null && name.type === "JSXIdentifier" && typeof name.name === "string";
+}
+function isJsxMemberExpressionName(name) {
+	return typeof name === "object" && name !== null && name.type === "JSXMemberExpression";
+}
+function hasRenderableJsxSibling(children, startIndex, step) {
+	for (let i = startIndex; i >= 0 && i < children.length; i += step) {
+		const sibling = children[i];
+		if (isJsxTextChild(sibling)) {
+			if (sibling.value.trim()) return true;
+			continue;
+		}
+		if (isJsxEmptyExpressionContainer(sibling)) continue;
+		if (sibling) return true;
+	}
+	return false;
+}
+function createJsxSpaceExpression(j, value) {
+	return j.jsxExpressionContainer(j.literal(value));
+}
 /**
 * Builds a single expression from extra className entries (CSS module classes).
 * Single entry: returns the expression directly.