@yahoo/uds 3.66.1 → 3.67.0-beta.1

package/dist/scripts/utils/tsMorph.js

@@ -0,0 +1,129 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+import { variants } from "../../styles/variants.js";
+import { camelCase, isEmpty } from "lodash-es";
+import { Node, SyntaxKind } from "ts-morph";
+
+//#region scripts/utils/tsMorph.ts
+/** Determines if an expression is using React.forwardRef. */
+function isForwardRefExpression(node) {
+	if (Node.isCallExpression(node)) {
+		const expression = node.getExpression();
+		/**
+		* forwardRef(() => <Component />)
+		*/
+		if (Node.isIdentifier(expression) && expression.getText() === "forwardRef") return true;
+		/**
+		* React.forwardRef(() => <Component />)
+		*/
+		if (Node.isPropertyAccessExpression(expression) && expression.getText() === "React.forwardRef") return true;
+	}
+	return false;
+}
+/** Determines if a node is a JSX component. */
+function isJsxComponent(node) {
+	let name;
+	if (Node.isVariableDeclaration(node) || Node.isFunctionDeclaration(node) || Node.isClassDeclaration(node)) name = node.getName();
+	else if (Node.isFunctionExpression(node) || Node.isArrowFunction(node)) name = node.getFirstAncestorByKind(SyntaxKind.VariableDeclaration)?.getName();
+	return name ? /[A-Z]/.test(name.charAt(0)) : false;
+}
+/** Returns a functional component declaration, unwrapping forwardRef if needed. */
+function getReactFunctionDeclaration(declaration) {
+	if (isJsxComponent(declaration)) {
+		if (Node.isFunctionDeclaration(declaration)) return declaration;
+		if (Node.isVariableDeclaration(declaration)) {
+			const initializer = declaration.getInitializer();
+			if (initializer) {
+				if (isForwardRefExpression(initializer)) {
+					const [initializerDeclaration] = initializer.getArguments();
+					if (Node.isFunctionDeclaration(initializerDeclaration) || Node.isFunctionExpression(initializerDeclaration) || Node.isArrowFunction(initializerDeclaration)) return initializerDeclaration;
+				} else if (Node.isFunctionDeclaration(initializer) || Node.isFunctionExpression(initializer) || Node.isArrowFunction(initializer)) return initializer;
+			}
+		}
+	}
+	return null;
+}
+/** Get the first descendant JsxElement based on the identifier. */
+function getJsxElement(node, name) {
+	return getJsxElements(node).find((node$1) => node$1.getFirstDescendantByKindOrThrow(SyntaxKind.Identifier).getText() === name);
+}
+/** Get all descendant JsxElement nodes. */
+function getJsxElements(node) {
+	return node.getDescendants().filter((node$1) => Node.isJsxElement(node$1) || Node.isJsxSelfClosingElement(node$1));
+}
+/**
+* Traces component references.
+*
+* This is similar to `findReferencesAsNodes` but returns JsxSelfClosingElement and JsxElement nodes.
+* Note, this currently does not account for cases where the component is used as a prop or is renamed.
+*/
+function findReferencesAsJsxElements(identifer) {
+	const jsxElements = [];
+	for (const reference of identifer.findReferencesAsNodes()) {
+		const node = reference.getFirstAncestor((node$1) => {
+			return Node.isJsxOpeningElement(node$1) || Node.isJsxSelfClosingElement(node$1);
+		});
+		if (node) jsxElements.push(node);
+	}
+	return jsxElements;
+}
+/**
+* Given a Jsx Reference, this function finds the parent of that reference,
+* looks at the props, and returns the name used either for spread operator rest or
+* the prop name if there's no spread operator
+*/
+const getParentSpreadOrParamIdentifier = (reference) => {
+	const blockParent = reference.getParentWhile((parent) => {
+		return !getReactFunctionDeclaration(parent);
+	}).getParent();
+	if (!blockParent) return;
+	const reactComponent = getReactFunctionDeclaration(blockParent);
+	if (reactComponent) {
+		const parameters = reactComponent.getParameters();
+		for (let i = 0; i < parameters.length; i++) {
+			const parameter = parameters[i];
+			const objectBindingPattern = parameter.getChildrenOfKind(SyntaxKind.ObjectBindingPattern)[0];
+			const identifier = parameter.getChildrenOfKind(SyntaxKind.Identifier)[0];
+			if (objectBindingPattern) {
+				const dotDotToken = objectBindingPattern.getFirstDescendantByKind(SyntaxKind.DotDotDotToken);
+				if (dotDotToken !== void 0) return dotDotToken?.getParent()?.getFirstChildByKindOrThrow(SyntaxKind.Identifier).getText();
+			} else if (identifier) return identifier.getText();
+		}
+	}
+};
+/**
+* Get used props on a reference.
+*/
+const getUsedPropsInReference = (reference) => {
+	const attributes = reference.getAttributes();
+	const res = [];
+	attributes.forEach((attribute) => {
+		if (Node.isJsxAttribute(attribute)) {
+			const attributeName = attribute.getNameNode().getText();
+			const stringLiterals = attribute.getDescendantsOfKind(SyntaxKind.StringLiteral);
+			const values = [];
+			if (stringLiterals.length !== 0) stringLiterals.forEach((stringLiteral) => values.push(stringLiteral.getLiteralText()));
+			const typeName = attribute.getFirstChildByKindOrThrow(SyntaxKind.Identifier).getDefinitions().map((d) => d.getDeclarationNode()?.getChildrenOfKind(SyntaxKind.TypeReference).pop()?.getText()).pop();
+			if (!typeName && !isEmpty(attributeName)) res.push([attributeName, values]);
+			else if (variants[camelCase(typeName)] && !isEmpty(typeName)) res.push([camelCase(typeName), values]);
+			else if (!isEmpty(attributeName)) res.push([attributeName, values]);
+		}
+		if (Node.isJsxSpreadAttribute(attribute)) {
+			const componentPropsSpreadIdentifier = getParentSpreadOrParamIdentifier(reference);
+			const children = attribute.getExpression().getChildren();
+			const lastIdentifier = children.length === 0 ? attribute.getExpression() : children.pop();
+			if (!lastIdentifier || lastIdentifier?.getText() === componentPropsSpreadIdentifier) return [];
+			lastIdentifier.getType().getProperties().forEach((property) => {
+				const propertyNameFromType = property.getDeclarations().map((declaration) => {
+					return camelCase(declaration.getChildrenOfKind(SyntaxKind.TypeReference)[0]?.getText() ?? "");
+				})[0];
+				if (!isEmpty(property.getName())) res.push([property.getName(), []]);
+				if (!isEmpty(propertyNameFromType)) res.push([propertyNameFromType, []]);
+			});
+		}
+		return [];
+	});
+	return res;
+};
+
+//#endregion
+export { findReferencesAsJsxElements, getJsxElement, getJsxElements, getParentSpreadOrParamIdentifier, getReactFunctionDeclaration, getUsedPropsInReference, isForwardRefExpression, isJsxComponent };

package/dist/styles/styler.cjs

@@ -0,0 +1,117 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_flags = require('../flags.cjs');
+const require_utils_falsyToString = require('../utils/falsyToString.cjs');
+const require_styles_variants = require('./variants.cjs');
+let __yahoo_uds_fixtures = require("@yahoo/uds/fixtures");
+let clsx = require("clsx");
+let tailwind_merge = require("tailwind-merge");
+
+//#region src/styles/styler.ts
+const createObjectWithoutPrototype = () => Object.create(null);
+const { useGetStylesCache, skipTailwindMerge } = require_flags.getFeatureFlags();
+/**
+* Prepare and object for memoization
+* Code uses old-school JS to hyper optimize component rendering hot paths.
+**/
+function normalizeObject(props) {
+	const sorted = createObjectWithoutPrototype();
+	const sortedKeys = Object.keys(props).sort();
+	for (let i = 0, len = sortedKeys.length; i < len; i++) {
+		const key = sortedKeys[i];
+		if (props[key] !== void 0) sorted[key] = props[key];
+	}
+	return sorted;
+}
+const twMerge = (0, tailwind_merge.extendTailwindMerge)({
+	extend: { theme: {
+		borderColor: __yahoo_uds_fixtures.lineColors,
+		borderWidth: __yahoo_uds_fixtures.borderWidthsWithElevation,
+		borderRadius: __yahoo_uds_fixtures.borderRadii
+	} },
+	override: {
+		classGroups: {
+			"text-color": [{ text: [...__yahoo_uds_fixtures.foregroundColors, ...__yahoo_uds_fixtures.spectrumColors] }],
+			"bg-color": [{ bg: __yahoo_uds_fixtures.backgroundColors }],
+			"font-family": [{ font: ["icons", ...__yahoo_uds_fixtures.textVariants] }],
+			leading: [{ leading: __yahoo_uds_fixtures.textVariants }]
+		},
+		conflictingClassGroups: {}
+	}
+});
+const cx = (...inputs) => {
+	const finalClassName = (0, clsx.clsx)(inputs);
+	return skipTailwindMerge ? finalClassName : twMerge(finalClassName);
+};
+const cva = (config) => {
+	const { base, variants: variants$1, defaultVariants, compoundVariants } = config;
+	/**
+	* !WARNING
+	* This is a VERY performance-sensitive function. Do not change it
+	* without benchmarking first.
+	*/
+	return (maybeProps) => {
+		if (!maybeProps) return cx(base);
+		const { className, ...props } = maybeProps;
+		if (!variants$1) return cx(base, className);
+		const variantClassNames = [];
+		for (const prop in defaultVariants) {
+			if (prop === void 0) continue;
+			if (props[prop] !== void 0) continue;
+			const defaultPropValue = defaultVariants[prop];
+			const variantKey = require_utils_falsyToString.falsyToString(defaultPropValue);
+			variantClassNames.push(variants$1[prop][variantKey]);
+		}
+		for (const prop in props) {
+			if (prop === void 0) continue;
+			const propValue = props[prop];
+			const variantKey = require_utils_falsyToString.falsyToString(propValue);
+			variantClassNames.push(variants$1[prop][variantKey]);
+		}
+		if (!compoundVariants) return cx(base, variantClassNames, className);
+		let compoundVariantClassNames = "";
+		for (const compoundConfig of compoundVariants) {
+			const { className: compoundClassname, ...compoundVariantConfig } = compoundConfig;
+			let allMatch = true;
+			for (const cvKey in compoundVariantConfig) {
+				const cvValue = compoundVariantConfig[cvKey];
+				if (!((props[cvKey] ?? defaultVariants?.[cvKey]) === cvValue)) {
+					allMatch = false;
+					break;
+				}
+			}
+			if (allMatch) compoundVariantClassNames = cx(compoundVariantClassNames, compoundClassname);
+		}
+		return cx(base, variantClassNames, compoundVariantClassNames, className);
+	};
+};
+const getStylesInternal = cva({ variants: require_styles_variants.variants });
+const styleCache = /* @__PURE__ */ new Map();
+const getStylesCacheKeySymbol = Symbol("getStylesCacheKey");
+const generateCacheKey = (props) => {
+	if (props[getStylesCacheKeySymbol]) return props[getStylesCacheKeySymbol];
+	const sorted = normalizeObject(props);
+	let cacheKey = "";
+	for (const key in sorted) cacheKey += `${key}:${sorted[key]}|`;
+	props[getStylesCacheKeySymbol] = cacheKey;
+	return cacheKey;
+};
+const cachedGetStyles = (props, onHit) => {
+	if (!useGetStylesCache) return getStylesInternal(props);
+	const cacheKey = generateCacheKey(props);
+	if (styleCache.has(cacheKey)) {
+		onHit?.();
+		return styleCache.get(cacheKey);
+	}
+	const styles = getStylesInternal(props);
+	styleCache.set(cacheKey, styles);
+	return styles;
+};
+const getStyles = cachedGetStyles;
+
+//#endregion
+exports.cva = cva;
+exports.cx = cx;
+exports.getStyles = getStyles;
+exports.getStylesCacheKeySymbol = getStylesCacheKeySymbol;
+exports.normalizeObject = normalizeObject;

package/dist/styles/styler.d.cts

@@ -0,0 +1,200 @@
+import { CVA, CX } from "./stylerTypes.cjs";
+
+//#region src/styles/styler.d.ts
+
+/**
+ * Prepare and object for memoization
+ * Code uses old-school JS to hyper optimize component rendering hot paths.
+ **/
+declare function normalizeObject(props: Record<string, unknown>): Record<string, unknown>;
+declare const cx: CX<string>;
+declare const cva: CVA<string>;
+declare const getStylesInternal: (props?: ({
+  checkboxSizeRoot?: "sm" | "md" | undefined;
+  checkboxSizeCheckbox?: "sm" | "md" | undefined;
+  checkboxVariantValueRoot?: "checked" | "unchecked" | "indeterminate" | undefined;
+  checkboxVariantRoot?: "primary" | "secondary" | "alert-secondary" | "alert" | undefined;
+  checkboxVariantValueCheckbox?: "checked" | "unchecked" | "indeterminate" | undefined;
+  checkboxVariantCheckbox?: "primary" | "secondary" | "alert-secondary" | "alert" | undefined;
+  checkboxVariantValueCheckboxIcon?: "checked" | "unchecked" | "indeterminate" | undefined;
+  checkboxVariantCheckboxIcon?: "primary" | "secondary" | "alert-secondary" | "alert" | undefined;
+  dividerVariantRoot?: "primary" | "secondary" | "tertiary" | "muted" | undefined;
+  dividerVariantLine?: "primary" | "secondary" | "tertiary" | "muted" | undefined;
+  dividerVariantLabel?: "primary" | "secondary" | "tertiary" | "muted" | undefined;
+  switchVariantActiveRoot?: "off" | "on" | undefined;
+  switchVariantRoot?: "default" | undefined;
+  switchVariantActiveSwitch?: "off" | "on" | undefined;
+  switchVariantSwitch?: "default" | undefined;
+  switchVariantActiveHandle?: "off" | "on" | undefined;
+  switchVariantHandle?: "default" | undefined;
+  switchVariantActiveHandleIcon?: "off" | "on" | undefined;
+  switchVariantHandleIcon?: "default" | undefined;
+  switchSizeRoot?: "sm" | "md" | undefined;
+  switchSizeSwitch?: "sm" | "md" | undefined;
+  switchSizeHandle?: "sm" | "md" | undefined;
+  switchSizeHandleIcon?: "sm" | "md" | undefined;
+  buttonSizeRoot?: "sm" | "md" | "lg" | undefined;
+  buttonSizeIcon?: "sm" | "md" | "lg" | undefined;
+  buttonVariantRoot?: "primary" | "brand-secondary" | "brand" | "secondary" | "tertiary" | "alert-secondary" | "alert" | "warning-secondary" | "warning" | "positive-secondary" | "positive" | "info" | "info-secondary" | "brand-tertiary" | "alert-tertiary" | "warning-tertiary" | "positive-tertiary" | "info-tertiary" | undefined;
+  buttonVariantIcon?: "primary" | "brand-secondary" | "brand" | "secondary" | "tertiary" | "alert-secondary" | "alert" | "warning-secondary" | "warning" | "positive-secondary" | "positive" | "info" | "info-secondary" | "brand-tertiary" | "alert-tertiary" | "warning-tertiary" | "positive-tertiary" | "info-tertiary" | undefined;
+  chipSizeRoot?: "sm" | "md" | undefined;
+  chipSizeIcon?: "sm" | "md" | undefined;
+  chipToggleVariantActiveRoot?: "off" | "on" | undefined;
+  chipToggleVariantRoot?: "primary" | "brand-secondary" | "brand" | "secondary" | undefined;
+  chipToggleVariantActiveIcon?: "off" | "on" | undefined;
+  chipToggleVariantIcon?: "primary" | "brand-secondary" | "brand" | "secondary" | undefined;
+  chipDismissibleVariantRoot?: "primary" | "brand-secondary" | "brand" | "secondary" | undefined;
+  chipDismissibleVariantIcon?: "primary" | "brand-secondary" | "brand" | "secondary" | undefined;
+  chipLinkVariantRoot?: "primary" | "brand-secondary" | "brand" | "secondary" | undefined;
+  chipLinkVariantIcon?: "primary" | "brand-secondary" | "brand" | "secondary" | undefined;
+  radioVariantValueRoot?: "checked" | "unchecked" | undefined;
+  radioVariantRoot?: "primary" | "secondary" | "alert-secondary" | "alert" | undefined;
+  radioVariantValueRadio?: "checked" | "unchecked" | undefined;
+  radioVariantRadio?: "primary" | "secondary" | "alert-secondary" | "alert" | undefined;
+  radioVariantValueRadioCircle?: "checked" | "unchecked" | undefined;
+  radioVariantRadioCircle?: "primary" | "secondary" | "alert-secondary" | "alert" | undefined;
+  radioSizeRoot?: "sm" | "md" | undefined;
+  radioSizeRadio?: "sm" | "md" | undefined;
+  linkTextStyleRoot?: "ui1" | "title1" | "caption1" | "headline1" | "title4" | "caption2" | "title3" | "label2" | "label3" | "label1" | "ui4" | "ui2" | "ui3" | "label4" | "display1" | "display2" | "display3" | "title2" | "body1" | "legal1" | "ui5" | "ui6" | undefined;
+  linkTextStyleIcon?: "ui1" | "title1" | "caption1" | "headline1" | "title4" | "caption2" | "title3" | "label2" | "label3" | "label1" | "ui4" | "ui2" | "ui3" | "label4" | "display1" | "display2" | "display3" | "title2" | "body1" | "legal1" | "ui5" | "ui6" | undefined;
+  linkVariantRoot?: "primary" | "on-color" | "secondary" | "tertiary" | undefined;
+  linkVariantIconStart?: "primary" | "on-color" | "secondary" | "tertiary" | undefined;
+  linkVariantIconEnd?: "primary" | "on-color" | "secondary" | "tertiary" | undefined;
+  badgeSizeRoot?: "sm" | "md" | "lg" | "xs" | undefined;
+  badgeSizeIcon?: "sm" | "md" | "lg" | "xs" | undefined;
+  badgeVariantRoot?: "primary" | "brand-secondary" | "brand" | "secondary" | "alert-secondary" | "alert" | "warning-secondary" | "warning" | "positive-secondary" | "positive" | "info" | "info-secondary" | undefined;
+  badgeVariantIcon?: "primary" | "brand-secondary" | "brand" | "secondary" | "alert-secondary" | "alert" | "warning-secondary" | "warning" | "positive-secondary" | "positive" | "info" | "info-secondary" | undefined;
+  inputSizeRoot?: "md" | "lg" | undefined;
+  inputSizeInputWrapper?: "md" | "lg" | undefined;
+  inputSizeInput?: "md" | "lg" | undefined;
+  inputSizeStartIcon?: "md" | "lg" | undefined;
+  inputSizeEndIcon?: "md" | "lg" | undefined;
+  inputSizeLabel?: "md" | "lg" | undefined;
+  inputSizeHelperIcon?: "md" | "lg" | undefined;
+  inputSizeHelperText?: "md" | "lg" | undefined;
+  inputVariantValueRoot?: "filled" | "empty" | undefined;
+  inputVariantRoot?: "default" | undefined;
+  inputVariantValueInputWrapper?: "filled" | "empty" | undefined;
+  inputVariantInputWrapper?: "default" | undefined;
+  inputVariantValueInput?: "filled" | "empty" | undefined;
+  inputVariantInput?: "default" | undefined;
+  inputVariantValueInputPlaceholder?: "filled" | "empty" | undefined;
+  inputVariantInputPlaceholder?: "default" | undefined;
+  inputVariantValueStartIcon?: "filled" | "empty" | undefined;
+  inputVariantStartIcon?: "default" | undefined;
+  inputVariantValueEndIcon?: "filled" | "empty" | undefined;
+  inputVariantEndIcon?: "default" | undefined;
+  inputVariantValueLabel?: "filled" | "empty" | undefined;
+  inputVariantLabel?: "default" | undefined;
+  inputVariantValueLabelRequired?: "filled" | "empty" | undefined;
+  inputVariantLabelRequired?: "default" | undefined;
+  inputVariantValueHelperIcon?: "filled" | "empty" | undefined;
+  inputVariantHelperIcon?: "default" | undefined;
+  inputVariantValueHelperText?: "filled" | "empty" | undefined;
+  inputVariantHelperText?: "default" | undefined;
+  avatarSizeRoot?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
+  avatarSizeIcon?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
+  avatarTextVariantRoot?: "primary" | "secondary" | undefined;
+  avatarImageVariantRoot?: "primary" | "secondary" | undefined;
+  avatarIconVariantRoot?: "primary" | "secondary" | undefined;
+  iconbuttonSizeRoot?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
+  iconbuttonSizeIcon?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
+  menuSizeRoot?: "default" | undefined;
+  menuSizeStartIcon?: "default" | undefined;
+  menuSizeEndIcon?: "default" | undefined;
+  menuItemVariantActiveRoot?: "off" | "on" | undefined;
+  menuItemVariantRoot?: "default" | undefined;
+  menuItemVariantActiveText?: "off" | "on" | undefined;
+  menuItemVariantText?: "default" | undefined;
+  menuItemVariantActiveIcon?: "off" | "on" | undefined;
+  menuItemVariantIcon?: "default" | undefined;
+  menuItemCheckboxVariantActiveRoot?: "off" | "on" | undefined;
+  menuItemCheckboxVariantRoot?: "default" | undefined;
+  menuItemCheckboxVariantActiveText?: "off" | "on" | undefined;
+  menuItemCheckboxVariantText?: "default" | undefined;
+  menuItemCheckboxVariantActiveStartIcon?: "off" | "on" | undefined;
+  menuItemCheckboxVariantStartIcon?: "default" | undefined;
+  menuItemCheckboxVariantActiveEndIcon?: "off" | "on" | undefined;
+  menuItemCheckboxVariantEndIcon?: "default" | undefined;
+  menuDividerVariantRoot?: "default" | undefined;
+  menuDividerVariantText?: "default" | undefined;
+  menuDividerVariantLine?: "default" | undefined;
+  color?: "current" | "white" | "accent" | "primary" | "brand-secondary" | "brand" | "transparent" | "on-color" | "secondary" | "tertiary" | "muted" | "alert-secondary" | "alert" | "warning-secondary" | "warning" | "positive-secondary" | "positive" | "info" | "info-secondary" | "black" | undefined;
+  placeholderColor?: "current" | "white" | "accent" | "primary" | "brand-secondary" | "brand" | "transparent" | "on-color" | "secondary" | "tertiary" | "muted" | "alert-secondary" | "alert" | "warning-secondary" | "warning" | "positive-secondary" | "positive" | "info" | "info-secondary" | "black" | undefined;
+  fontFamily?: "sans" | "ui1" | "title1" | "caption1" | "headline1" | "title4" | "caption2" | "title3" | "label2" | "label3" | "label1" | "ui4" | "ui2" | "ui3" | "label4" | "sans-alt" | "serif" | "serif-alt" | "mono" | "display1" | "display2" | "display3" | "title2" | "body1" | "legal1" | "ui5" | "ui6" | "title1/emphasized" | "caption1/emphasized" | "headline1/emphasized" | "title4/emphasized" | "caption2/emphasized" | "title3/emphasized" | "label2/emphasized" | "label3/emphasized" | "label1/emphasized" | "label4/emphasized" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title2/emphasized" | "body1/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui4/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui5/emphasized" | "ui6/emphasized" | undefined;
+  fontSize?: "ui1" | "title1" | "caption1" | "headline1" | "title4" | "caption2" | "title3" | "label2" | "label3" | "label1" | "ui4" | "ui2" | "ui3" | "label4" | "display1" | "display2" | "display3" | "title2" | "body1" | "legal1" | "ui5" | "ui6" | "title1/emphasized" | "caption1/emphasized" | "headline1/emphasized" | "title4/emphasized" | "caption2/emphasized" | "title3/emphasized" | "label2/emphasized" | "label3/emphasized" | "label1/emphasized" | "label4/emphasized" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title2/emphasized" | "body1/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui4/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui5/emphasized" | "ui6/emphasized" | undefined;
+  fontWeight?: "thin" | "ui1" | "medium" | "title1" | "caption1" | "headline1" | "title4" | "caption2" | "title3" | "label2" | "label3" | "label1" | "ui4" | "ui2" | "ui3" | "label4" | "light" | "display1" | "display2" | "display3" | "title2" | "body1" | "legal1" | "ui5" | "ui6" | "title1/emphasized" | "caption1/emphasized" | "headline1/emphasized" | "title4/emphasized" | "caption2/emphasized" | "title3/emphasized" | "label2/emphasized" | "label3/emphasized" | "label1/emphasized" | "label4/emphasized" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title2/emphasized" | "body1/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui4/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui5/emphasized" | "ui6/emphasized" | "black" | "bold" | "extralight" | "regular" | "semibold" | "extrabold" | undefined;
+  lineHeight?: "ui1" | "title1" | "caption1" | "headline1" | "title4" | "caption2" | "title3" | "label2" | "label3" | "label1" | "ui4" | "ui2" | "ui3" | "label4" | "display1" | "display2" | "display3" | "title2" | "body1" | "legal1" | "ui5" | "ui6" | "title1/emphasized" | "caption1/emphasized" | "headline1/emphasized" | "title4/emphasized" | "caption2/emphasized" | "title3/emphasized" | "label2/emphasized" | "label3/emphasized" | "label1/emphasized" | "label4/emphasized" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title2/emphasized" | "body1/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui4/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui5/emphasized" | "ui6/emphasized" | undefined;
+  letterSpacing?: "ui1" | "title1" | "caption1" | "headline1" | "title4" | "caption2" | "title3" | "label2" | "label3" | "label1" | "ui4" | "ui2" | "ui3" | "label4" | "display1" | "display2" | "display3" | "title2" | "body1" | "legal1" | "ui5" | "ui6" | "title1/emphasized" | "caption1/emphasized" | "headline1/emphasized" | "title4/emphasized" | "caption2/emphasized" | "title3/emphasized" | "label2/emphasized" | "label3/emphasized" | "label1/emphasized" | "label4/emphasized" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title2/emphasized" | "body1/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui4/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui5/emphasized" | "ui6/emphasized" | undefined;
+  textAlign?: "start" | "end" | "center" | "justify" | undefined;
+  textTransform?: "none" | "ui1" | "title1" | "caption1" | "headline1" | "title4" | "caption2" | "title3" | "label2" | "label3" | "label1" | "ui4" | "ui2" | "ui3" | "label4" | "display1" | "display2" | "display3" | "title2" | "body1" | "legal1" | "ui5" | "ui6" | "title1/emphasized" | "caption1/emphasized" | "headline1/emphasized" | "title4/emphasized" | "caption2/emphasized" | "title3/emphasized" | "label2/emphasized" | "label3/emphasized" | "label1/emphasized" | "label4/emphasized" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title2/emphasized" | "body1/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui4/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui5/emphasized" | "ui6/emphasized" | "uppercase" | "lowercase" | "capitalize" | undefined;
+  spacing?: "0" | "20" | "4" | "6" | "8" | "10" | "44" | "12" | "48" | "px" | "3" | "1" | "2" | "1.5" | "2.5" | "5" | "0.5" | "3.5" | "14" | "9" | "7" | "11" | "16" | "4.5" | "5.5" | "24" | "28" | "32" | "36" | "40" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
+  spacingHorizontal?: "0" | "20" | "4" | "6" | "8" | "10" | "44" | "12" | "48" | "px" | "3" | "1" | "2" | "1.5" | "2.5" | "5" | "0.5" | "3.5" | "14" | "9" | "7" | "11" | "16" | "4.5" | "5.5" | "24" | "28" | "32" | "36" | "40" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
+  spacingVertical?: "0" | "20" | "4" | "6" | "8" | "10" | "44" | "12" | "48" | "px" | "3" | "1" | "2" | "1.5" | "2.5" | "5" | "0.5" | "3.5" | "14" | "9" | "7" | "11" | "16" | "4.5" | "5.5" | "24" | "28" | "32" | "36" | "40" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
+  spacingBottom?: "0" | "20" | "4" | "6" | "8" | "10" | "44" | "12" | "48" | "px" | "3" | "1" | "2" | "1.5" | "2.5" | "5" | "0.5" | "3.5" | "14" | "9" | "7" | "11" | "16" | "4.5" | "5.5" | "24" | "28" | "32" | "36" | "40" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
+  spacingEnd?: "0" | "20" | "4" | "6" | "8" | "10" | "44" | "12" | "48" | "px" | "3" | "1" | "2" | "1.5" | "2.5" | "5" | "0.5" | "3.5" | "14" | "9" | "7" | "11" | "16" | "4.5" | "5.5" | "24" | "28" | "32" | "36" | "40" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
+  spacingStart?: "0" | "20" | "4" | "6" | "8" | "10" | "44" | "12" | "48" | "px" | "3" | "1" | "2" | "1.5" | "2.5" | "5" | "0.5" | "3.5" | "14" | "9" | "7" | "11" | "16" | "4.5" | "5.5" | "24" | "28" | "32" | "36" | "40" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
+  spacingTop?: "0" | "20" | "4" | "6" | "8" | "10" | "44" | "12" | "48" | "px" | "3" | "1" | "2" | "1.5" | "2.5" | "5" | "0.5" | "3.5" | "14" | "9" | "7" | "11" | "16" | "4.5" | "5.5" | "24" | "28" | "32" | "36" | "40" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
+  offset?: "0" | "20" | "4" | "6" | "8" | "10" | "44" | "12" | "48" | "px" | "3" | "1" | "2" | "1.5" | "2.5" | "5" | "0.5" | "3.5" | "14" | "9" | "7" | "11" | "16" | "4.5" | "5.5" | "24" | "28" | "32" | "36" | "40" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
+  offsetVertical?: "0" | "20" | "4" | "6" | "8" | "10" | "44" | "12" | "48" | "px" | "3" | "1" | "2" | "1.5" | "2.5" | "5" | "0.5" | "3.5" | "14" | "9" | "7" | "11" | "16" | "4.5" | "5.5" | "24" | "28" | "32" | "36" | "40" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
+  offsetHorizontal?: "0" | "20" | "4" | "6" | "8" | "10" | "44" | "12" | "48" | "px" | "3" | "1" | "2" | "1.5" | "2.5" | "5" | "0.5" | "3.5" | "14" | "9" | "7" | "11" | "16" | "4.5" | "5.5" | "24" | "28" | "32" | "36" | "40" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
+  offsetBottom?: "0" | "20" | "4" | "6" | "8" | "10" | "44" | "12" | "48" | "px" | "3" | "1" | "2" | "1.5" | "2.5" | "5" | "0.5" | "3.5" | "14" | "9" | "7" | "11" | "16" | "4.5" | "5.5" | "24" | "28" | "32" | "36" | "40" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
+  offsetEnd?: "0" | "20" | "4" | "6" | "8" | "10" | "44" | "12" | "48" | "px" | "3" | "1" | "2" | "1.5" | "2.5" | "5" | "0.5" | "3.5" | "14" | "9" | "7" | "11" | "16" | "4.5" | "5.5" | "24" | "28" | "32" | "36" | "40" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
+  offsetStart?: "0" | "20" | "4" | "6" | "8" | "10" | "44" | "12" | "48" | "px" | "3" | "1" | "2" | "1.5" | "2.5" | "5" | "0.5" | "3.5" | "14" | "9" | "7" | "11" | "16" | "4.5" | "5.5" | "24" | "28" | "32" | "36" | "40" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
+  offsetTop?: "0" | "20" | "4" | "6" | "8" | "10" | "44" | "12" | "48" | "px" | "3" | "1" | "2" | "1.5" | "2.5" | "5" | "0.5" | "3.5" | "14" | "9" | "7" | "11" | "16" | "4.5" | "5.5" | "24" | "28" | "32" | "36" | "40" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
+  columnGap?: "0" | "20" | "4" | "6" | "8" | "10" | "44" | "12" | "48" | "px" | "3" | "1" | "2" | "1.5" | "2.5" | "5" | "0.5" | "3.5" | "14" | "9" | "7" | "11" | "16" | "4.5" | "5.5" | "24" | "28" | "32" | "36" | "40" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
+  rowGap?: "0" | "20" | "4" | "6" | "8" | "10" | "44" | "12" | "48" | "px" | "3" | "1" | "2" | "1.5" | "2.5" | "5" | "0.5" | "3.5" | "14" | "9" | "7" | "11" | "16" | "4.5" | "5.5" | "24" | "28" | "32" | "36" | "40" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
+  backgroundColor?: "current" | "white" | "accent" | "primary" | "brand-secondary" | "brand" | "transparent" | "secondary" | "alert-secondary" | "alert" | "warning-secondary" | "warning" | "positive-secondary" | "positive" | "info" | "info-secondary" | "black" | "elevation-0" | "elevation-4" | "elevation-3" | "elevation-1" | "elevation-2" | "elevation-5" | undefined;
+  borderColor?: "current" | "white" | "accent" | "primary" | "brand-secondary" | "brand" | "transparent" | "secondary" | "tertiary" | "muted" | "alert-secondary" | "alert" | "warning-secondary" | "warning" | "positive-secondary" | "positive" | "info" | "info-secondary" | "black" | "elevation-0" | "elevation-4" | "elevation-3" | "elevation-1" | "elevation-2" | "elevation-5" | undefined;
+  borderStartColor?: "current" | "white" | "accent" | "primary" | "brand-secondary" | "brand" | "transparent" | "secondary" | "tertiary" | "muted" | "alert-secondary" | "alert" | "warning-secondary" | "warning" | "positive-secondary" | "positive" | "info" | "info-secondary" | "black" | "elevation-0" | "elevation-4" | "elevation-3" | "elevation-1" | "elevation-2" | "elevation-5" | undefined;
+  borderEndColor?: "current" | "white" | "accent" | "primary" | "brand-secondary" | "brand" | "transparent" | "secondary" | "tertiary" | "muted" | "alert-secondary" | "alert" | "warning-secondary" | "warning" | "positive-secondary" | "positive" | "info" | "info-secondary" | "black" | "elevation-0" | "elevation-4" | "elevation-3" | "elevation-1" | "elevation-2" | "elevation-5" | undefined;
+  borderBottomColor?: "current" | "white" | "accent" | "primary" | "brand-secondary" | "brand" | "transparent" | "secondary" | "tertiary" | "muted" | "alert-secondary" | "alert" | "warning-secondary" | "warning" | "positive-secondary" | "positive" | "info" | "info-secondary" | "black" | "elevation-0" | "elevation-4" | "elevation-3" | "elevation-1" | "elevation-2" | "elevation-5" | undefined;
+  borderTopColor?: "current" | "white" | "accent" | "primary" | "brand-secondary" | "brand" | "transparent" | "secondary" | "tertiary" | "muted" | "alert-secondary" | "alert" | "warning-secondary" | "warning" | "positive-secondary" | "positive" | "info" | "info-secondary" | "black" | "elevation-0" | "elevation-4" | "elevation-3" | "elevation-1" | "elevation-2" | "elevation-5" | undefined;
+  borderRadius?: "none" | "sm" | "md" | "lg" | "xl" | "full" | "xs" | undefined;
+  borderTopStartRadius?: "none" | "sm" | "md" | "lg" | "xl" | "full" | "xs" | undefined;
+  borderTopEndRadius?: "none" | "sm" | "md" | "lg" | "xl" | "full" | "xs" | undefined;
+  borderBottomStartRadius?: "none" | "sm" | "md" | "lg" | "xl" | "full" | "xs" | undefined;
+  borderBottomEndRadius?: "none" | "sm" | "md" | "lg" | "xl" | "full" | "xs" | undefined;
+  borderWidth?: "none" | "thin" | "medium" | "elevation-0" | "elevation-4" | "elevation-3" | "elevation-1" | "elevation-2" | "elevation-5" | "thick" | undefined;
+  borderVerticalWidth?: "none" | "thin" | "medium" | "elevation-0" | "elevation-4" | "elevation-3" | "elevation-1" | "elevation-2" | "elevation-5" | "thick" | undefined;
+  borderHorizontalWidth?: "none" | "thin" | "medium" | "elevation-0" | "elevation-4" | "elevation-3" | "elevation-1" | "elevation-2" | "elevation-5" | "thick" | undefined;
+  borderStartWidth?: "none" | "thin" | "medium" | "elevation-0" | "elevation-4" | "elevation-3" | "elevation-1" | "elevation-2" | "elevation-5" | "thick" | undefined;
+  borderEndWidth?: "none" | "thin" | "medium" | "elevation-0" | "elevation-4" | "elevation-3" | "elevation-1" | "elevation-2" | "elevation-5" | "thick" | undefined;
+  borderTopWidth?: "none" | "thin" | "medium" | "elevation-0" | "elevation-4" | "elevation-3" | "elevation-1" | "elevation-2" | "elevation-5" | "thick" | undefined;
+  borderBottomWidth?: "none" | "thin" | "medium" | "elevation-0" | "elevation-4" | "elevation-3" | "elevation-1" | "elevation-2" | "elevation-5" | "thick" | undefined;
+  avatarSize?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
+  iconSize?: "sm" | "md" | "lg" | "xs" | undefined;
+  alignContent?: "center" | "flex-start" | "flex-end" | "stretch" | "space-between" | "space-around" | undefined;
+  alignItems?: "center" | "flex-start" | "flex-end" | "stretch" | "baseline" | undefined;
+  alignSelf?: "center" | "flex-start" | "flex-end" | "stretch" | "baseline" | "auto" | undefined;
+  flex?: "none" | "1" | "auto" | "initial" | undefined;
+  flexDirection?: "row" | "column" | "row-reverse" | "column-reverse" | undefined;
+  flexGrow?: "0" | "3" | "1" | "2" | 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?: "flex" | "table" | "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?: "none" | "fill" | "contain" | "cover" | "scale-down" | undefined;
+  colorMode?: "light" | "dark" | undefined;
+  scaleMode?: "medium" | "xSmall" | "small" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | undefined;
+  width?: "full" | "fit" | "screen" | undefined;
+  height?: "full" | "fit" | "screen" | undefined;
+  dropShadow?: "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | "elevation-0" | "elevation-4" | "elevation-3" | "elevation-1" | "elevation-2" | "elevation-5" | undefined;
+  insetShadow?: "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "xl-invert" | "lg-invert" | "md-invert" | "xs" | "2xl-invert" | "sm-invert" | "xs-invert" | undefined;
+  nestedBorderRadiusSize?: "none" | "sm" | "md" | "lg" | "xl" | "full" | "xs" | undefined;
+  nestedBorderRadiusWidth?: "none" | "thin" | "medium" | "elevation-0" | "elevation-4" | "elevation-3" | "elevation-1" | "elevation-2" | "elevation-5" | "thick" | undefined;
+  nestedBorderRadiusSpacing?: "0" | "20" | "4" | "6" | "8" | "10" | "44" | "12" | "48" | "px" | "3" | "1" | "2" | "1.5" | "2.5" | "5" | "0.5" | "3.5" | "14" | "9" | "7" | "11" | "16" | "4.5" | "5.5" | "24" | "28" | "32" | "36" | "40" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
+  nestedBorderRadius?: boolean | "first" | "last" | undefined;
+} & {
+  className?: string | undefined;
+}) | undefined) => string;
+type GetStylesInternalProps = Parameters<typeof getStylesInternal>[0];
+declare const getStylesCacheKeySymbol: unique symbol;
+declare const getStyles: (props: GetStylesInternalProps, onHit?: () => void) => string;
+//#endregion
+export { cva, cx, getStyles, getStylesCacheKeySymbol, normalizeObject };