@yahoo/uds 3.162.0 → 3.162.2

package/dist/css/dist/purger/optimized/purgeFromCode.js

@@ -1,6 +1,8 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 import { isPerfEnabled } from "../../css/perf.js";
 import { extractStringLiterals } from "./ast/expressions.js";
+import { getParentComponentInfo } from "./ast/jsx.js";
+import { resolveSpreadFromUsages } from "./ast/spread.js";
 import { Node, Project, SyntaxKind } from "ts-morph";
 //#region ../css/dist/purger/optimized/purgeFromCode.mjs
 /*! © 2026 Yahoo, Inc. UDS CSS v0.0.0-development */
@@ -70,10 +72,10 @@ const normalizeComponentName = (name) => {
 	return name.replace(/\W/g, "").toLowerCase();
 };
 /**
-* Fallback: infer prop -> variant key mapping from autoVariants when the
-* generated component data misses it (e.g., helpers like buildAvatarRootClasses).
+* All autoVariants group keys belonging to a component (by normalized name
+* prefix, e.g. Button -> buttonVariantRoot, buttonSizeIcon, ...).
 */
-const getAutoVariantKeysForProp = (componentName, propName) => {
+const getComponentAutoVariantKeys = (componentName) => {
 	if (!autoVariantsCache) return [];
 	const segments = componentName.match(/[A-Z][a-z0-9]*/g) ?? [];
 	const candidates = new Set([normalizeComponentName(componentName)]);
@@ -81,12 +83,19 @@ const getAutoVariantKeysForProp = (componentName, propName) => {
 		const partial = segments.slice(0, i).join("");
 		candidates.add(normalizeComponentName(partial));
 	});
-	const propLower = propName.toLowerCase();
 	return Object.keys(autoVariantsCache).filter((key) => {
 		const keyLower = key.toLowerCase();
-		return Array.from(candidates).some((candidate) => keyLower.startsWith(candidate) && keyLower.includes(propLower));
+		return Array.from(candidates).some((candidate) => keyLower.startsWith(candidate));
 	});
 };
+/**
+* Fallback: infer prop -> variant key mapping from autoVariants when the
+* generated component data misses it (e.g., helpers like buildAvatarRootClasses).
+*/
+const getAutoVariantKeysForProp = (componentName, propName) => {
+	const propLower = propName.toLowerCase();
+	return getComponentAutoVariantKeys(componentName).filter((key) => key.toLowerCase().includes(propLower));
+};
 const getVariantKeysForProp = (componentInfo, propName) => {
 	const keys = new Set(componentInfo.propToVariantKeys?.[propName] ?? []);
 	getAutoVariantKeysForProp(componentInfo.name, propName).forEach((inferred) => keys.add(inferred));
@@ -168,19 +177,30 @@ const purgeFromCodeOptimized = async (code, options) => {
 			timeMs: 0,
 			classesGenerated: 0,
 			spreadsTraced: 0,
+			spreadsUnresolved: 0,
 			expressionsResolved: 0
-		}
+		},
+		unresolvedWrapperSpreads: []
 	};
 	const projectCreateStart = performance.now();
-	const sourceFile = new Project({ useInMemoryFileSystem: true }).createSourceFile(options.filePath ?? "input.tsx", code, { overwrite: true });
+	const project = new Project({ useInMemoryFileSystem: true });
+	const sourceFile = project.createSourceFile(options.filePath ?? "input.tsx", code, { overwrite: true });
 	const projectCreateMs = performance.now() - projectCreateStart;
 	const stats = {
 		filesScanned: 1,
 		timeMs: 0,
 		classesGenerated: 0,
 		spreadsTraced: 0,
+		spreadsUnresolved: 0,
 		expressionsResolved: 0
 	};
+	const purgeContext = {
+		project,
+		componentUsageCache: /* @__PURE__ */ new Map(),
+		spreadCache: /* @__PURE__ */ new Map(),
+		udsImportingFiles: /* @__PURE__ */ new Set(),
+		stats
+	};
 	const importParseStart = performance.now();
 	const imports = [];
 	sourceFile.getImportDeclarations().forEach((importDecl) => {
@@ -191,6 +211,8 @@ const purgeFromCodeOptimized = async (code, options) => {
 	const importParseMs = performance.now() - importParseStart;
 	const componentProps = /* @__PURE__ */ new Map();
 	const componentUnresolvedSpreadProps = /* @__PURE__ */ new Map();
+	const componentsWithUnknownSpreads = /* @__PURE__ */ new Set();
+	const unresolvedWrapperSpreads = [];
 	const referencedComponents = /* @__PURE__ */ new Set();
 	const getStylesExtractStart = performance.now();
 	const getStylesProps = extractGetStylesCalls(sourceFile, stats, variants);
@@ -203,7 +225,8 @@ const purgeFromCodeOptimized = async (code, options) => {
 			referencedComponents.add(componentName);
 			const propsMap = componentProps.get(componentName) ?? /* @__PURE__ */ new Map();
 			const unresolvedSpreadProps = componentUnresolvedSpreadProps.get(componentName) ?? /* @__PURE__ */ new Set();
-			extractPropsFromReference(reference, stats, sourceFile).forEach(({ propName, values, fromSpread }) => {
+			const { props, unknownSpreadWrappers } = extractPropsFromReference(reference, stats, sourceFile, purgeContext);
+			props.forEach(({ propName, values, fromSpread }) => {
 				if (values.length > 0) {
 					const existing = propsMap.get(propName) ?? /* @__PURE__ */ new Set();
 					values.forEach((val) => existing.add(val));
@@ -212,6 +235,13 @@ const purgeFromCodeOptimized = async (code, options) => {
 				}
 				if (fromSpread) unresolvedSpreadProps.add(propName);
 			});
+			unknownSpreadWrappers.forEach((wrapperName) => {
+				if (wrapperName) unresolvedWrapperSpreads.push({
+					wrapperName,
+					targetComponent: componentName
+				});
+				if (!wrapperName || !options.deferWrapperSpreadResolution) componentsWithUnknownSpreads.add(componentName);
+			});
 			componentProps.set(componentName, propsMap);
 			componentUnresolvedSpreadProps.set(componentName, unresolvedSpreadProps);
 		});
@@ -241,6 +271,7 @@ const purgeFromCodeOptimized = async (code, options) => {
 	allComponents.forEach((componentInfo) => {
 		const userProps = componentProps.get(componentInfo.name) ?? /* @__PURE__ */ new Map();
 		const unresolvedSpreadProps = componentUnresolvedSpreadProps.get(componentInfo.name) ?? /* @__PURE__ */ new Set();
+		if (componentsWithUnknownSpreads.has(componentInfo.name)) collectUnknownSpreadClasses(componentInfo, variants, safelist);
 		Object.entries(componentInfo.defaultProps).forEach(([propName, propValue]) => {
 			if (userProps.has(propName)) return;
 			const variantGroup = variants[propName];
@@ -366,7 +397,8 @@ const purgeFromCodeOptimized = async (code, options) => {
 		safelist: finalSafelist,
 		imports,
 		components: [...seenComponents],
-		stats
+		stats,
+		unresolvedWrapperSpreads
 	};
 };
 /**
@@ -399,9 +431,16 @@ const findComponentReferences = (sourceFile, componentName, jsxElementsCache) =>
 };
 /**
 * Extract props from a JSX reference.
+*
+* Spread resolution order (UDS-2557):
+* 1. Same-file const object (`traceSpreadInFile`)
+* 2. Wrapper call sites within the project (`resolveSpreadFromUsages`)
+* 3. Otherwise the spread is unknown: reported via `unknownSpreadWrappers` so the
+*    caller can over-include variant classes and emit cross-file metadata.
 */
-const extractPropsFromReference = (reference, stats, sourceFile) => {
+const extractPropsFromReference = (reference, stats, sourceFile, purgeContext) => {
 	const props = [];
+	const unknownSpreadWrappers = [];
 	reference.getAttributes().forEach((attr) => {
 		if (attr.asKind(SyntaxKind.JsxAttribute)) {
 			const jsxAttr = attr.asKindOrThrow(SyntaxKind.JsxAttribute);
@@ -426,17 +465,40 @@ const extractPropsFromReference = (reference, stats, sourceFile) => {
 			});
 		}
 		if (attr.asKind(SyntaxKind.JsxSpreadAttribute)) {
-			stats.spreadsTraced++;
-			traceSpreadInFile(attr.asKindOrThrow(SyntaxKind.JsxSpreadAttribute).getExpression().getText(), sourceFile).forEach(([propName, values]) => {
-				props.push({
-					propName,
-					values,
-					fromSpread: true
+			const spreadName = attr.asKindOrThrow(SyntaxKind.JsxSpreadAttribute).getExpression().getText();
+			const resolvedSpreadProps = traceSpreadInFile(spreadName, sourceFile);
+			if (resolvedSpreadProps.length > 0) {
+				stats.spreadsTraced++;
+				resolvedSpreadProps.forEach(([propName, values]) => {
+					props.push({
+						propName,
+						values,
+						fromSpread: true
+					});
 				});
-			});
+				return;
+			}
+			const usageResolved = resolveSpreadFromUsages(reference, spreadName, purgeContext);
+			if (usageResolved) {
+				usageResolved.forEach((values, propName) => {
+					props.push({
+						propName,
+						values,
+						fromSpread: true
+					});
+				});
+				return;
+			}
+			stats.spreadsUnresolved++;
+			const parentInfo = getParentComponentInfo(reference);
+			const isWrapperParamSpread = parentInfo && (parentInfo.spreadRestIdentifier === spreadName || parentInfo.paramIdentifier === spreadName);
+			unknownSpreadWrappers.push(isWrapperParamSpread ? parentInfo.componentName : void 0);
 		}
 	});
-	return props;
+	return {
+		props,
+		unknownSpreadWrappers
+	};
 };
 /**
 * Trace spread props to their source within the same file.
@@ -513,5 +575,100 @@ const extractGetStylesCalls = (sourceFile, stats, variants) => {
 	});
 	return props;
 };
+/**
+* Over-include every variant-prop class for a component (and its internal deps).
+* Used when a spread's props are unknown: any variant prop could flow through it,
+* so accuracy demands including all of them (UDS-2557).
+*/
+const collectUnknownSpreadClasses = (componentInfo, variants, safelist) => {
+	getComponentWithDeps(componentInfo.name).forEach((comp) => {
+		Object.keys(comp.propToVariantKeys ?? {}).forEach((propName) => {
+			addVariantGroupClasses(variants[propName] ?? autoVariantsCache?.[propName], safelist);
+			getVariantKeysForProp(comp, propName).forEach((variantKey) => {
+				addVariantGroupClasses(variants[variantKey] ?? autoVariantsCache?.[variantKey], safelist);
+			});
+		});
+		getComponentAutoVariantKeys(comp.name).forEach((variantKey) => {
+			addVariantGroupClasses(autoVariantsCache?.[variantKey], safelist);
+		});
+	});
+};
+/**
+* Cross-file pass for UDS-2557: resolve wrapper rest-spread props from wrapper
+* call sites found in other scanned files.
+*
+* `purgeFromCodeOptimized` analyzes one file at a time, so when a consumer
+* wrapper (e.g. an i13n wrapper) spreads its props onto a UDS component, the
+* wrapper's call sites usually live in other files. Aggregators pass the
+* unresolved wrapper spreads plus the raw source of every scanned file; this
+* parses only the files that mention a wrapper and maps the explicit prop
+* values at each call site to the target UDS component's classes.
+*
+* Must be called after at least one `purgeFromCodeOptimized` run so the
+* module-level component/autoVariants caches are populated.
+*/
+const resolveWrapperSpreadSafelist = (wrapperSpreads, sources, variants) => {
+	if (wrapperSpreads.length === 0) return [];
+	const targetsByWrapper = /* @__PURE__ */ new Map();
+	wrapperSpreads.forEach(({ wrapperName, targetComponent }) => {
+		const targets = targetsByWrapper.get(wrapperName) ?? /* @__PURE__ */ new Set();
+		targets.add(targetComponent);
+		targetsByWrapper.set(wrapperName, targets);
+	});
+	const wrapperNames = [...targetsByWrapper.keys()];
+	const usageProps = /* @__PURE__ */ new Map();
+	sources.filter((code) => wrapperNames.some((name) => code.includes(`<${name}`))).forEach((code) => {
+		new Project({ useInMemoryFileSystem: true }).createSourceFile("wrapper-usage.tsx", code, { overwrite: true }).getDescendants().forEach((node) => {
+			if (!Node.isJsxOpeningElement(node) && !Node.isJsxSelfClosingElement(node)) return;
+			const tagName = node.getTagNameNode().getText();
+			if (!targetsByWrapper.has(tagName)) return;
+			const propsMap = usageProps.get(tagName) ?? /* @__PURE__ */ new Map();
+			node.getAttributes().forEach((attr) => {
+				const jsxAttr = attr.asKind(SyntaxKind.JsxAttribute);
+				if (!jsxAttr) return;
+				const propName = jsxAttr.getNameNode().getText();
+				const values = [];
+				const initializer = jsxAttr.getInitializer();
+				if (initializer && Node.isStringLiteral(initializer)) values.push(initializer.getLiteralText());
+				else if (initializer && Node.isJsxExpression(initializer)) {
+					const expression = initializer.getExpression();
+					if (expression) values.push(...extractStringLiterals(expression));
+				}
+				if (values.length === 0) return;
+				const existing = propsMap.get(propName) ?? /* @__PURE__ */ new Set();
+				values.forEach((value) => existing.add(value));
+				propsMap.set(propName, existing);
+			});
+			usageProps.set(tagName, propsMap);
+		});
+	});
+	const safelist = [];
+	const pushClass = (variantGroup, value) => {
+		const cls = variantGroup?.[value];
+		if (cls) safelist.push(cls.replaceAll("\\", ""));
+	};
+	targetsByWrapper.forEach((targets, wrapperName) => {
+		const propsMap = usageProps.get(wrapperName);
+		targets.forEach((targetComponent) => {
+			const componentInfo = resolveComponentInfo(targetComponent);
+			if (!componentInfo) return;
+			if (!propsMap || propsMap.size === 0) {
+				collectUnknownSpreadClasses(componentInfo, variants, safelist);
+				return;
+			}
+			propsMap.forEach((values, propName) => {
+				const variantGroup = variants[propName];
+				values.forEach((value) => pushClass(variantGroup, value));
+				getComponentWithDeps(componentInfo.name).forEach((comp) => {
+					getVariantKeysForProp(comp, propName).forEach((variantKey) => {
+						const mappedVariantGroup = variants[variantKey] ?? autoVariantsCache?.[variantKey];
+						values.forEach((value) => pushClass(mappedVariantGroup, value));
+					});
+				});
+			});
+		});
+	});
+	return safelist;
+};
 //#endregion
-export { purgeFromCodeOptimized };
+export { purgeFromCodeOptimized, resolveWrapperSpreadSafelist };

package/dist/css/dist/purger/optimized/utils/files.cjs

@@ -6,17 +6,35 @@ fast_glob = require_runtime.__toESM(fast_glob, 1);
 //#region ../css/dist/purger/optimized/utils/files.mjs
 /*! © 2026 Yahoo, Inc. UDS CSS v0.0.0-development */
 /**
+* Files that never ship in an app bundle (UDS-2557 over-safelisting fix):
+* scanning them safelists classes the app never renders — e.g. a Storybook-only
+* cheatsheet added ~39% dead classes to the Yahoo News safelist.
+*/
+const TEST_FILE_IGNORE_GLOBS = [
+	"**/*.test.*",
+	"**/*.spec.*",
+	"**/__tests__/**",
+	"**/__mocks__/**"
+];
+const STORY_FILE_IGNORE_GLOBS = ["**/*.stories.*"];
+const DEV_FILE_IGNORE_GLOBS = [...TEST_FILE_IGNORE_GLOBS, ...STORY_FILE_IGNORE_GLOBS];
+/**
 * Scan a directory for JSX/TSX files
 */
-const scanForFiles = async (entry) => {
+const scanForFiles = async (entry, ignoreDevFiles = true, extraIgnore = []) => {
 	const workspaceDir = process.env.PWD ?? process.cwd();
+	const ignore = [
+		"**/node_modules/**",
+		...ignoreDevFiles ? DEV_FILE_IGNORE_GLOBS : [],
+		...extraIgnore
+	];
 	try {
 		const fileGroups = await Promise.all(require_entryPoints.resolveEntryPaths(entry, workspaceDir, require_entryPoints.DEFAULT_ENTRY).map((entryPath) => {
 			if (entryPath.kind === "file") return [entryPath.absolutePath];
 			return (0, fast_glob.default)("**/*.{jsx,tsx}", {
 				cwd: entryPath.absolutePath,
 				absolute: true,
-				ignore: ["**/node_modules/**"]
+				ignore
 			});
 		}));
 		return [...new Set(fileGroups.flat())];
@@ -25,4 +43,6 @@ const scanForFiles = async (entry) => {
 	}
 };
 //#endregion
+exports.DEV_FILE_IGNORE_GLOBS = DEV_FILE_IGNORE_GLOBS;
+exports.TEST_FILE_IGNORE_GLOBS = TEST_FILE_IGNORE_GLOBS;
 exports.scanForFiles = scanForFiles;

package/dist/css/dist/purger/optimized/utils/files.js

@@ -4,17 +4,35 @@ import fg from "fast-glob";
 //#region ../css/dist/purger/optimized/utils/files.mjs
 /*! © 2026 Yahoo, Inc. UDS CSS v0.0.0-development */
 /**
+* Files that never ship in an app bundle (UDS-2557 over-safelisting fix):
+* scanning them safelists classes the app never renders — e.g. a Storybook-only
+* cheatsheet added ~39% dead classes to the Yahoo News safelist.
+*/
+const TEST_FILE_IGNORE_GLOBS = [
+	"**/*.test.*",
+	"**/*.spec.*",
+	"**/__tests__/**",
+	"**/__mocks__/**"
+];
+const STORY_FILE_IGNORE_GLOBS = ["**/*.stories.*"];
+const DEV_FILE_IGNORE_GLOBS = [...TEST_FILE_IGNORE_GLOBS, ...STORY_FILE_IGNORE_GLOBS];
+/**
 * Scan a directory for JSX/TSX files
 */
-const scanForFiles = async (entry) => {
+const scanForFiles = async (entry, ignoreDevFiles = true, extraIgnore = []) => {
 	const workspaceDir = process.env.PWD ?? process.cwd();
+	const ignore = [
+		"**/node_modules/**",
+		...ignoreDevFiles ? DEV_FILE_IGNORE_GLOBS : [],
+		...extraIgnore
+	];
 	try {
 		const fileGroups = await Promise.all(resolveEntryPaths(entry, workspaceDir, DEFAULT_ENTRY).map((entryPath) => {
 			if (entryPath.kind === "file") return [entryPath.absolutePath];
 			return fg("**/*.{jsx,tsx}", {
 				cwd: entryPath.absolutePath,
 				absolute: true,
-				ignore: ["**/node_modules/**"]
+				ignore
 			});
 		}));
 		return [...new Set(fileGroups.flat())];
@@ -23,4 +41,4 @@ const scanForFiles = async (entry) => {
 	}
 };
 //#endregion
-export { scanForFiles };
+export { DEV_FILE_IGNORE_GLOBS, TEST_FILE_IGNORE_GLOBS, scanForFiles };

package/dist/hooks/useRtl.cjs

@@ -28,18 +28,14 @@ const createDirectionObserver = (callback) => {
 * @default reads from document direction
 */
 const useRtl = (options) => {
-	const [isRtl, setIsRtl] = (0, react.useState)(getDocumentDirection);
+	const [detectedRtl, setDetectedRtl] = (0, react.useState)(getDocumentDirection);
 	(0, react.useEffect)(() => {
-		if (options?.explicit) {
-			setIsRtl(options.explicit);
-			return;
-		}
 		const observer = createDirectionObserver(() => {
-			setIsRtl(getDocumentDirection());
+			setDetectedRtl(getDocumentDirection());
 		});
 		return () => observer.disconnect();
-	}, [options?.explicit]);
-	return isRtl;
+	}, []);
+	return options?.explicit ?? detectedRtl;
 };
 //#endregion
 exports.createDirectionObserver = createDirectionObserver;

package/dist/hooks/useRtl.js

@@ -26,18 +26,14 @@ const createDirectionObserver = (callback) => {
 * @default reads from document direction
 */
 const useRtl = (options) => {
-	const [isRtl, setIsRtl] = useState(getDocumentDirection);
+	const [detectedRtl, setDetectedRtl] = useState(getDocumentDirection);
 	useEffect(() => {
-		if (options?.explicit) {
-			setIsRtl(options.explicit);
-			return;
-		}
 		const observer = createDirectionObserver(() => {
-			setIsRtl(getDocumentDirection());
+			setDetectedRtl(getDocumentDirection());
 		});
 		return () => observer.disconnect();
-	}, [options?.explicit]);
-	return isRtl;
+	}, []);
+	return options?.explicit ?? detectedRtl;
 };
 //#endregion
 export { createDirectionObserver, getDocumentDirection, useRtl };

package/dist/styles/styler.d.cts

@@ -33,8 +33,8 @@ declare const getStylesInternal: (props?: ({
   bottomsheetVariantRoot?: "default" | undefined;
   buttonSizeIcon?: "xs" | "sm" | "md" | "lg" | "default" | undefined;
   buttonSizeRoot?: "xs" | "sm" | "md" | "lg" | "default" | undefined;
-  buttonVariantIcon?: "primary" | "secondary" | "tertiary" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "default" | "alert-tertiary" | "brand-tertiary" | "contrast-high" | "contrast-low" | "contrast-medium" | "info-tertiary" | "positive-tertiary" | "warning-tertiary" | undefined;
-  buttonVariantRoot?: "primary" | "secondary" | "tertiary" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "default" | "alert-tertiary" | "brand-tertiary" | "contrast-high" | "contrast-low" | "contrast-medium" | "info-tertiary" | "positive-tertiary" | "warning-tertiary" | undefined;
+  buttonVariantIcon?: "primary" | "secondary" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "tertiary" | "default" | "contrast-high" | "contrast-medium" | "contrast-low" | "brand-tertiary" | "alert-tertiary" | "positive-tertiary" | "warning-tertiary" | "info-tertiary" | undefined;
+  buttonVariantRoot?: "primary" | "secondary" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "tertiary" | "default" | "contrast-high" | "contrast-medium" | "contrast-low" | "brand-tertiary" | "alert-tertiary" | "positive-tertiary" | "warning-tertiary" | "info-tertiary" | undefined;
   checkboxSizeCheckbox?: "sm" | "md" | "default" | undefined;
   checkboxSizeRoot?: "sm" | "md" | "default" | undefined;
   checkboxVariantCheckbox?: "primary" | "secondary" | "alert" | "alert-secondary" | "default" | undefined;
@@ -214,14 +214,14 @@ declare const getStylesInternal: (props?: ({
   tooltipVariantIcon?: "default" | undefined;
   tooltipVariantRoot?: "default" | undefined;
   tooltipVariantSvg?: "default" | undefined;
-  color?: "primary" | "secondary" | "tertiary" | "muted" | "on-color" | "accent" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "white" | "black" | "transparent" | "current" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | undefined;
-  placeholderColor?: "primary" | "secondary" | "tertiary" | "muted" | "on-color" | "accent" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "white" | "black" | "transparent" | "current" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | undefined;
+  color?: "primary" | "secondary" | "accent" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "white" | "black" | "transparent" | "current" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | "tertiary" | "muted" | "on-color" | undefined;
+  placeholderColor?: "primary" | "secondary" | "accent" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "white" | "black" | "transparent" | "current" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | "tertiary" | "muted" | "on-color" | undefined;
   fontFamily?: "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | "sans" | "sans-alt" | "serif" | "serif-alt" | "mono" | undefined;
   fontSize?: "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | undefined;
-  fontWeight?: "black" | "thin" | "medium" | "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "bold" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | "extralight" | "light" | "regular" | "semibold" | "extrabold" | undefined;
+  fontWeight?: "black" | "thin" | "medium" | "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | "bold" | "extralight" | "light" | "regular" | "semibold" | "extrabold" | undefined;
   lineHeight?: "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | undefined;
   letterSpacing?: "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | undefined;
-  textAlign?: "center" | "justify" | "start" | "end" | undefined;
+  textAlign?: "center" | "end" | "justify" | "start" | undefined;
   textTransform?: "none" | "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | "uppercase" | "lowercase" | "capitalize" | undefined;
   spacing?: "0" | "px" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "4.5" | "5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
   spacingHorizontal?: "0" | "px" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "4.5" | "5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
@@ -240,49 +240,49 @@ declare const getStylesInternal: (props?: ({
   columnGap?: "0" | "px" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "4.5" | "5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
   rowGap?: "0" | "px" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "4.5" | "5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
   backgroundColor?: "primary" | "secondary" | "accent" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "white" | "black" | "transparent" | "current" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | undefined;
-  borderColor?: "primary" | "secondary" | "tertiary" | "muted" | "accent" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "white" | "black" | "transparent" | "current" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | undefined;
-  borderStartColor?: "primary" | "secondary" | "tertiary" | "muted" | "accent" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "white" | "black" | "transparent" | "current" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | undefined;
-  borderEndColor?: "primary" | "secondary" | "tertiary" | "muted" | "accent" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "white" | "black" | "transparent" | "current" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | undefined;
-  borderBottomColor?: "primary" | "secondary" | "tertiary" | "muted" | "accent" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "white" | "black" | "transparent" | "current" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | undefined;
-  borderTopColor?: "primary" | "secondary" | "tertiary" | "muted" | "accent" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "white" | "black" | "transparent" | "current" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | undefined;
+  borderColor?: "primary" | "secondary" | "accent" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "white" | "black" | "transparent" | "current" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "tertiary" | "muted" | undefined;
+  borderStartColor?: "primary" | "secondary" | "accent" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "white" | "black" | "transparent" | "current" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "tertiary" | "muted" | undefined;
+  borderEndColor?: "primary" | "secondary" | "accent" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "white" | "black" | "transparent" | "current" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "tertiary" | "muted" | undefined;
+  borderBottomColor?: "primary" | "secondary" | "accent" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "white" | "black" | "transparent" | "current" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "tertiary" | "muted" | undefined;
+  borderTopColor?: "primary" | "secondary" | "accent" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "white" | "black" | "transparent" | "current" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "tertiary" | "muted" | undefined;
   borderRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
   borderTopStartRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
   borderTopEndRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
   borderBottomStartRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
   borderBottomEndRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
-  borderWidth?: "none" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "thin" | "medium" | "thick" | undefined;
-  borderVerticalWidth?: "none" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "thin" | "medium" | "thick" | undefined;
-  borderHorizontalWidth?: "none" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "thin" | "medium" | "thick" | undefined;
-  borderStartWidth?: "none" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "thin" | "medium" | "thick" | undefined;
-  borderEndWidth?: "none" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "thin" | "medium" | "thick" | undefined;
-  borderTopWidth?: "none" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "thin" | "medium" | "thick" | undefined;
-  borderBottomWidth?: "none" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "thin" | "medium" | "thick" | undefined;
+  borderWidth?: "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "thin" | "medium" | "thick" | undefined;
+  borderVerticalWidth?: "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "thin" | "medium" | "thick" | undefined;
+  borderHorizontalWidth?: "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "thin" | "medium" | "thick" | undefined;
+  borderStartWidth?: "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "thin" | "medium" | "thick" | undefined;
+  borderEndWidth?: "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "thin" | "medium" | "thick" | undefined;
+  borderTopWidth?: "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "thin" | "medium" | "thick" | undefined;
+  borderBottomWidth?: "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "thin" | "medium" | "thick" | undefined;
   avatarSize?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "2xs" | "3xl" | undefined;
   iconSize?: "xs" | "sm" | "md" | "lg" | undefined;
   alignContent?: "center" | "flex-start" | "flex-end" | "stretch" | "space-between" | "space-around" | undefined;
   alignItems?: "center" | "flex-start" | "flex-end" | "stretch" | "baseline" | undefined;
-  alignSelf?: "center" | "auto" | "flex-start" | "flex-end" | "stretch" | "baseline" | undefined;
-  flex?: "none" | "auto" | "1" | "initial" | undefined;
+  alignSelf?: "center" | "flex-start" | "flex-end" | "stretch" | "baseline" | "auto" | undefined;
+  flex?: "1" | "none" | "auto" | "initial" | undefined;
   flexDirection?: "row" | "column" | "row-reverse" | "column-reverse" | undefined;
   flexGrow?: "0" | "1" | "2" | "3" | undefined;
   flexShrink?: "0" | "1" | undefined;
   flexWrap?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
   justifyContent?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | undefined;
   flexBasis?: "min-content" | undefined;
-  display?: "table" | "none" | "grid" | "inline" | "flex" | "block" | "inline-block" | "inline-flex" | "inline-table" | "table-caption" | "table-cell" | "table-column" | "table-column-group" | "table-footer-group" | "table-header-group" | "table-row-group" | "table-row" | "flow-root" | "contents" | undefined;
+  display?: "flex" | "table" | "none" | "block" | "inline-block" | "inline" | "inline-flex" | "inline-table" | "table-caption" | "table-cell" | "table-column" | "table-column-group" | "table-footer-group" | "table-header-group" | "table-row-group" | "table-row" | "flow-root" | "grid" | "contents" | undefined;
   overflow?: "hidden" | "auto" | "clip" | "visible" | "scroll" | undefined;
   overflowX?: "hidden" | "auto" | "clip" | "visible" | "scroll" | undefined;
   overflowY?: "hidden" | "auto" | "clip" | "visible" | "scroll" | undefined;
   position?: "static" | "fixed" | "absolute" | "relative" | "sticky" | undefined;
-  contentFit?: "fill" | "none" | "cover" | "contain" | "scale-down" | undefined;
+  contentFit?: "none" | "fill" | "cover" | "contain" | "scale-down" | undefined;
   colorMode?: "light" | "dark" | undefined;
   scaleMode?: "small" | "medium" | "xSmall" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | undefined;
   width?: "full" | "fit" | "screen" | undefined;
   height?: "full" | "fit" | "screen" | undefined;
-  dropShadow?: "none" | "xs" | "sm" | "md" | "lg" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "xl" | "2xl" | undefined;
-  insetShadow?: "none" | "xs" | "sm" | "md" | "lg" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "xl" | "2xl" | "xs-invert" | "sm-invert" | "md-invert" | "lg-invert" | "xl-invert" | "2xl-invert" | undefined;
+  dropShadow?: "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | undefined;
+  insetShadow?: "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs-invert" | "sm-invert" | "md-invert" | "lg-invert" | "xl-invert" | "2xl-invert" | undefined;
   nestedBorderRadiusSize?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
-  nestedBorderRadiusWidth?: "none" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "thin" | "medium" | "thick" | undefined;
+  nestedBorderRadiusWidth?: "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "thin" | "medium" | "thick" | undefined;
   nestedBorderRadiusSpacing?: "0" | "px" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "4.5" | "5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
   nestedBorderRadius?: boolean | "first" | "last" | undefined;
 } & {