/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
import { BUTTON_GAP_VAR, BUTTON_SCALE_EFFECT_HOVER, BUTTON_SCALE_EFFECT_PRESSED, BUTTON_SCALE_EFFECT_REST } from "../../../css-tokens/dist/index.js";
import { configurableProperties } from "../properties.js";
import { generateSchemaKey } from "./generateSchemaKey.js";
import { isVariantConfigWithComponentStates, isVariantConfigWithProperties } from "./variantConfigGuards.js";
import { findFixtureTypeForValue } from "./buildConfigSchema.js";
import { generateDefaultClassName } from "./generateDefaultClassName.js";
import { isFunction, mergeWith } from "lodash-es";
//#region ../tailwind-internal/dist/packages/automated-config/dist/utils/index.js
/*! © 2026 Yahoo, Inc. UDS Tailwind Internal v0.0.0-development */
/*! © 2026 Yahoo, Inc. UDS Default Config v0.0.0-development */
const CSS_GAP = "gap";
const CSS_LINE_HEIGHT = "line-height";
const CSS_BORDER_WIDTH = "border-width";
const CSS_BORDER_RADIUS = "border-radius";
const CSS_BORDER_COLOR = "border-color";
const NESTED_BORDER_RADIUS_SIZE_VAR = "--uds-nested-border-radius-size";
const NESTED_BORDER_RADIUS_WIDTH_VAR = "--uds-nested-border-radius-width";
const CSS_BOX_SHADOW = "box-shadow";
const CSS_BORDER_TOP_WIDTH = "border-top-width";
const CSS_BORDER_RIGHT_WIDTH = "border-right-width";
const CSS_BORDER_BOTTOM_WIDTH = "border-bottom-width";
const CSS_BORDER_LEFT_WIDTH = "border-left-width";
const CSS_BORDER_TOP_COLOR = "border-top-color";
const CSS_BORDER_RIGHT_COLOR = "border-right-color";
const CSS_BORDER_BOTTOM_COLOR = "border-bottom-color";
const CSS_BORDER_LEFT_COLOR = "border-left-color";
const CSS_TAB_UNDERLINE_WIDTH = "--uds-tab-underline-width";
const CSS_TAB_UNDERLINE_COLOR = "--uds-tab-underline-color";
function deepMerge(target, source) {
	return mergeWith({}, target, source);
}
const COMPONENTS_WITH_SHADOW_BORDERS = [
	{
		componentName: "button",
		layer: "root"
	},
	{
		componentName: "iconbutton",
		layer: "root"
	},
	{
		componentName: "chip",
		layer: "root"
	},
	{
		componentName: "tab",
		layer: "root"
	},
	{
		componentName: "tabs",
		layer: "root"
	}
];
/**
* Map our "states" to pseudo-classes (hover => :hover, pressed => :active, etc.).
* Adjust or extend as needed.
*/
const statePseudoMap = {
	rest: "",
	hover: ":hover:not(:active, :disabled, :has(:disabled))",
	pressed: ":active:not(:disabled, :has(:disabled))",
	disabled: ":is(:disabled, :has(:disabled))",
	visited: ":visited",
	focused: ":focus",
	"focus-within": ":focus-within",
	"focused-keyboard": ":focus-visible",
	readonly: ":has(input:read-only)",
	invalid: ":has(input[aria-invalid=\"true\"])",
	"invalid&hover": ":has(input[aria-invalid=\"true\"]):hover:not(:active, :disabled, :has(:disabled))",
	"invalid&pressed": ":has(input[aria-invalid=\"true\"]):active:not(:disabled, :has(:disabled))"
};
const statePseudoMapDocsMode = {
	rest: "",
	hover: "hover",
	pressed: "active",
	disabled: "has-disabled",
	visited: "visited",
	focused: "focus",
	"focus-within": "focus-within",
	"focused-keyboard": "focus-visible",
	readonly: "input-readonly",
	invalid: "has-input-invalid",
	"invalid&hover": "has-input-invalid-and-hover",
	"invalid&pressed": "has-input-invalid-and-active"
};
/**
* Generates button line-height with icon size minimum.
* Ensures button line-height is at least as tall as the icon to prevent clipping.
* @returns Enhanced line-height CSS value with max(), or original value if icon size unavailable
*/
function getButtonLineHeightWithIconMinimum({ lineHeight, schema, iconLayerKey, state, theme }) {
	const iconSizeValue = schema.variables?.[iconLayerKey]?.size?.[state]?.value;
	if (iconSizeValue) return `max(${lineHeight}, ${theme(configurableProperties.iconSize.twThemePath("iconSizes", iconSizeValue))})`;
	return lineHeight;
}
/**
* Forces button borders to use box-shadow instead of border properties.
* Converts border-width and border-color into an inset box-shadow layer.
*
* Why box-shadow for borders?
* - Respects border-radius (unlike outline which stays rectangular)
* - Allows layering multiple shadows in a single property
* - GPU-accelerated and performant
* - Works perfectly with rounded/circular buttons
*
* @param classStyles - The CSS declarations for a button class
* @returns Modified styles with box-shadow layers, or original if no border
*
* @example
* Input:  { border-width: '2px', border-color: 'red', box-shadow: '0 2px 4px rgba(0,0,0,0.1)' }
* Output: { box-shadow: 'inset 0 0 0 2px red, 0 2px 4px rgba(0,0,0,0.1)' }
* Renders borders using inset box-shadows instead of CSS border widths.
* This preserves visual borders without affecting layout dimensions.
*/
function applyBoxShadowBorder(classStyles) {
	const stripImportant = (value) => value.replace(/\s*!important\s*$/, "");
	const hasImportant = (value) => value?.includes("!important") ?? false;
	const isZeroWidth = (value) => !value || /^(0|0px|0rem|0em|0%)$/i.test(stripImportant(value).trim());
	const negateLength = (value) => {
		const normalized = stripImportant(value).trim();
		if (/^(0|0px|0rem|0em|0%)$/i.test(normalized)) return "0";
		return `calc(${normalized} * -1)`;
	};
	const borderWidth = classStyles[CSS_BORDER_WIDTH];
	const borderColor = classStyles[CSS_BORDER_COLOR];
	const topWidth = classStyles[CSS_BORDER_TOP_WIDTH] ?? borderWidth;
	const rightWidth = classStyles[CSS_BORDER_RIGHT_WIDTH] ?? borderWidth;
	const bottomWidth = classStyles[CSS_BORDER_BOTTOM_WIDTH] ?? borderWidth;
	const leftWidth = classStyles[CSS_BORDER_LEFT_WIDTH] ?? borderWidth;
	const topColor = classStyles[CSS_BORDER_TOP_COLOR] ?? borderColor;
	const rightColor = classStyles[CSS_BORDER_RIGHT_COLOR] ?? borderColor;
	const bottomColor = classStyles[CSS_BORDER_BOTTOM_COLOR] ?? borderColor;
	const leftColor = classStyles[CSS_BORDER_LEFT_COLOR] ?? borderColor;
	const borderLayers = [];
	if (!isZeroWidth(topWidth) && topColor) borderLayers.push(`inset 0 ${stripImportant(topWidth)} 0 0 ${stripImportant(topColor)}`);
	if (!isZeroWidth(rightWidth) && rightColor) borderLayers.push(`inset ${negateLength(rightWidth)} 0 0 0 ${stripImportant(rightColor)}`);
	if (!isZeroWidth(bottomWidth) && bottomColor) borderLayers.push(`inset 0 ${negateLength(bottomWidth)} 0 0 ${stripImportant(bottomColor)}`);
	if (!isZeroWidth(leftWidth) && leftColor) borderLayers.push(`inset ${stripImportant(leftWidth)} 0 0 0 ${stripImportant(leftColor)}`);
	if (borderLayers.length === 0) return classStyles;
	const layers = [...borderLayers, classStyles[CSS_BOX_SHADOW] && stripImportant(classStyles[CSS_BOX_SHADOW])].filter(Boolean);
	const needsImportant = hasImportant(topWidth) || hasImportant(rightWidth) || hasImportant(bottomWidth) || hasImportant(leftWidth) || hasImportant(topColor) || hasImportant(rightColor) || hasImportant(bottomColor) || hasImportant(leftColor) || hasImportant(borderWidth) || hasImportant(borderColor) || hasImportant(classStyles[CSS_BOX_SHADOW]);
	const newStyles = { ...classStyles };
	newStyles[CSS_BOX_SHADOW] = layers.join(", ") + (needsImportant ? " !important" : "");
	delete newStyles[CSS_BORDER_WIDTH];
	delete newStyles[CSS_BORDER_COLOR];
	delete newStyles[CSS_BORDER_TOP_WIDTH];
	delete newStyles[CSS_BORDER_RIGHT_WIDTH];
	delete newStyles[CSS_BORDER_BOTTOM_WIDTH];
	delete newStyles[CSS_BORDER_LEFT_WIDTH];
	delete newStyles[CSS_BORDER_TOP_COLOR];
	delete newStyles[CSS_BORDER_RIGHT_COLOR];
	delete newStyles[CSS_BORDER_BOTTOM_COLOR];
	delete newStyles[CSS_BORDER_LEFT_COLOR];
	return newStyles;
}
function generateClassName({ componentName, subComponentName, variantKey, variantValue, componentStateKey, componentStateValue, layer, layerOptionalPseudoSelector }) {
	let className = "";
	if (subComponentName) className = `uds-${componentName}-${subComponentName}-${variantKey}`.toLowerCase();
	else className = `uds-${componentName}-${variantKey}`.toLowerCase();
	if (variantValue) className = `${className}-${variantValue}`.toLowerCase();
	if (componentStateKey && componentStateValue) className = `${className}-${componentStateKey}-${componentStateValue}`.toLowerCase();
	className = `${className}-${layer}`.toLowerCase();
	if (layerOptionalPseudoSelector) className = `${className}${layerOptionalPseudoSelector}`;
	return className.replaceAll(/\s+/g, "-");
}
const getTheCssPropertyValue = (schema, theme, propertyName, schemaStateValue, existingValue, originalPropertyDefinition) => {
	const { value, type } = schemaStateValue;
	const propertyConfig = configurableProperties[propertyName];
	let newValue;
	if (propertyConfig.customValueRenderer) newValue = propertyConfig.customValueRenderer(schemaStateValue, schema, theme, originalPropertyDefinition);
	else {
		const safeTwThemePath = propertyConfig.twThemePath;
		newValue = theme(safeTwThemePath(originalPropertyDefinition ? findFixtureTypeForValue(originalPropertyDefinition, value) : type, String(value)));
	}
	if (propertyConfig.concatenate && existingValue) return `${existingValue}${propertyConfig.concatenationDelimiter || ", "}${newValue}`;
	return newValue;
};
function generateDeclaration({ componentName, subComponentName, variantKey, variantValue, layer, layerOptionalPseudoSelector, componentStateKey, componentStateValue, schema, propertyKey, originalPropertyDefinition, theme, currentStyles, previewOptions }) {
	const schemaKey = generateSchemaKey({
		variantKey,
		variantValue,
		layer,
		subComponentName,
		componentStateKey,
		componentStateValue
	});
	let className = generateClassName({
		componentName,
		variantKey,
		variantValue,
		layer,
		subComponentName,
		componentStateKey,
		componentStateValue
	});
	const propertyStateMap = schema.variables?.[schemaKey]?.[propertyKey];
	if (!propertyStateMap) throw new Error(`Prop definition (${componentName} - ${schemaKey} - ${propertyKey}) not found, this is not expected, please report the bug to the UDS team`);
	const styles = {};
	const skipRestForProperty = originalPropertyDefinition.skipRestState === true;
	const declaredPseudoStates = originalPropertyDefinition.pseudoStates ?? [];
	const declaredPropertyStates = new Set([...skipRestForProperty ? [] : ["rest"], ...declaredPseudoStates]);
	for (const propStateStr in propertyStateMap) {
		if (!declaredPropertyStates.has(propStateStr)) continue;
		const propertyState = propStateStr;
		const propertyStateSelector = statePseudoMap[propertyState] ?? "";
		const schemaValueForState = propertyStateMap[propertyState];
		let fullClassName = ``;
		if (layer === "root") if (componentStateKey && componentStateValue) {
			const rootVariantClass = generateClassName({
				componentName,
				variantKey,
				variantValue,
				layer,
				subComponentName
			});
			className = generateClassName({
				componentName,
				variantKey,
				layer,
				subComponentName,
				componentStateKey,
				componentStateValue
			});
			fullClassName = `.${rootVariantClass}${propertyStateSelector}.${className}`;
		} else fullClassName = `.${className}${propertyStateSelector}`;
		else {
			const rootVariantClassName = generateClassName({
				componentName,
				variantKey,
				variantValue,
				layer: "root",
				subComponentName
			});
			if (componentStateKey && componentStateValue) {
				const rootVariantClassNameWithComponentState = generateClassName({
					componentName,
					variantKey,
					layer: "root",
					subComponentName,
					componentStateKey,
					componentStateValue
				});
				className = generateClassName({
					componentName,
					variantKey,
					variantValue,
					layer,
					layerOptionalPseudoSelector,
					subComponentName
				});
				fullClassName = `.${rootVariantClassName}${propertyStateSelector}.${rootVariantClassNameWithComponentState} .${className}`;
			} else fullClassName = `.${rootVariantClassName}${propertyStateSelector} .${className}`;
		}
		const { cssProperties, extendedProperties: extendedPropertiesGetter } = configurableProperties[originalPropertyDefinition.name];
		const cssDeclarations = {};
		const isExtendedPropertiesFunction = isFunction(extendedPropertiesGetter);
		const extendedProperties = isExtendedPropertiesFunction ? extendedPropertiesGetter({
			componentName,
			subComponentName,
			layer,
			propertyKey
		}) : extendedPropertiesGetter;
		if (extendedProperties && extendedProperties.length) {
			if (!isExtendedPropertiesFunction && (typeof cssProperties === "string" || Array.isArray(cssProperties) && cssProperties.length > 0)) throw new Error("Invalid configuration: cssProperties should not be configured when extendedProperties are defined. Please update your property configuration accordingly.");
			for (const extendedProp of extendedProperties) {
				const cssPropertiesRef = configurableProperties[extendedProp].cssProperties;
				if (typeof cssPropertiesRef === "string") {
					const existingValue = currentStyles?.[fullClassName]?.[cssPropertiesRef];
					cssDeclarations[cssPropertiesRef] = getTheCssPropertyValue(schema, theme, extendedProp, schemaValueForState, existingValue);
				} else if (Array.isArray(cssPropertiesRef)) for (const cssProp of cssPropertiesRef) {
					const existingValue = currentStyles?.[fullClassName]?.[cssProp];
					cssDeclarations[cssProp] = getTheCssPropertyValue(schema, theme, extendedProp, schemaValueForState, existingValue);
				}
			}
		} else if (typeof cssProperties === "string") {
			const existingValue = currentStyles?.[fullClassName]?.[cssProperties];
			cssDeclarations[cssProperties] = getTheCssPropertyValue(schema, theme, originalPropertyDefinition.name, schemaValueForState, existingValue, originalPropertyDefinition);
		} else if (Array.isArray(cssProperties)) for (const cssProp of cssProperties) {
			const existingValue = currentStyles?.[fullClassName]?.[cssProp];
			cssDeclarations[cssProp] = getTheCssPropertyValue(schema, theme, originalPropertyDefinition.name, schemaValueForState, existingValue, originalPropertyDefinition);
		}
		/**
		* Button root layer workarounds & enhancements.
		* These handle Motion animation bridges and visual fixes until better config-to-component solutions exist.
		*/
		if (componentName === "button" && layer === "root") {
			if (propertyKey === CSS_GAP) cssDeclarations[BUTTON_GAP_VAR] = cssDeclarations[CSS_GAP];
			if (propertyKey === "scaleEffect" && propertyState === "hover") {
				const rootClassName = `.${className}`;
				const renderValue = (schemaValue) => configurableProperties.scaleEffect.customValueRenderer?.(schemaValue, schema, () => "") ?? "1";
				if (!styles[rootClassName]) styles[rootClassName] = {};
				styles[rootClassName][BUTTON_SCALE_EFFECT_REST] = "1";
				if (propertyStateMap.hover) styles[rootClassName][BUTTON_SCALE_EFFECT_HOVER] = renderValue(propertyStateMap.hover);
				if (propertyStateMap.pressed) styles[rootClassName][BUTTON_SCALE_EFFECT_PRESSED] = renderValue(propertyStateMap.pressed);
			}
			if (cssDeclarations[CSS_LINE_HEIGHT]) {
				const iconLayerKey = generateSchemaKey({
					variantKey,
					variantValue,
					layer: "icon",
					subComponentName
				});
				cssDeclarations[CSS_LINE_HEIGHT] = getButtonLineHeightWithIconMinimum({
					lineHeight: cssDeclarations[CSS_LINE_HEIGHT],
					schema,
					iconLayerKey,
					state: propertyState,
					theme
				});
			}
		}
		if (componentName === "paddlenav" && layer === "root") {
			if (propertyKey === "borderRadius" && cssDeclarations[CSS_BORDER_RADIUS]) cssDeclarations[NESTED_BORDER_RADIUS_SIZE_VAR] = cssDeclarations[CSS_BORDER_RADIUS];
			if (propertyKey === "borderWidth" && cssDeclarations[CSS_BORDER_WIDTH]) cssDeclarations[NESTED_BORDER_RADIUS_WIDTH_VAR] = cssDeclarations[CSS_BORDER_WIDTH];
		}
		if ((componentName === "tabs" || componentName === "tab") && layer === "root") {
			const schemaVariablesForKey = schema?.variables?.[schemaKey];
			if (propertyKey === "borderWidth" && schemaVariablesForKey?.underlineWidth) {
				const borderWidth = cssDeclarations[CSS_BORDER_WIDTH];
				if (borderWidth) {
					cssDeclarations[CSS_BORDER_TOP_WIDTH] = borderWidth;
					cssDeclarations[CSS_BORDER_RIGHT_WIDTH] = borderWidth;
					cssDeclarations[CSS_BORDER_BOTTOM_WIDTH] = borderWidth;
					cssDeclarations[CSS_BORDER_LEFT_WIDTH] = borderWidth;
					delete cssDeclarations[CSS_BORDER_WIDTH];
				}
			}
			if (propertyKey === "borderColor" && schemaVariablesForKey?.underlineColor) {
				const borderColor = cssDeclarations[CSS_BORDER_COLOR];
				if (borderColor) {
					cssDeclarations[CSS_BORDER_TOP_COLOR] = borderColor;
					cssDeclarations[CSS_BORDER_RIGHT_COLOR] = borderColor;
					cssDeclarations[CSS_BORDER_BOTTOM_COLOR] = borderColor;
					cssDeclarations[CSS_BORDER_LEFT_COLOR] = borderColor;
					delete cssDeclarations[CSS_BORDER_COLOR];
				}
			}
			if (propertyKey === "underlineWidth") {
				const underlineWidth = cssDeclarations[CSS_BORDER_BOTTOM_WIDTH];
				if (underlineWidth) {
					cssDeclarations[CSS_TAB_UNDERLINE_WIDTH] = underlineWidth;
					delete cssDeclarations[CSS_BORDER_BOTTOM_WIDTH];
				}
			}
			if (propertyKey === "underlineColor") {
				const underlineColor = cssDeclarations[CSS_BORDER_BOTTOM_COLOR];
				if (underlineColor) {
					cssDeclarations[CSS_TAB_UNDERLINE_COLOR] = underlineColor;
					delete cssDeclarations[CSS_BORDER_BOTTOM_COLOR];
				}
			}
		}
		if (!styles[fullClassName]) styles[fullClassName] = {
			...cssDeclarations,
			...styles[fullClassName]
		};
		if (previewOptions?.generatePseudoStateClassModifier) {
			const pseudoPrefixClass = statePseudoMapDocsMode[propertyState] ?? "";
			if (pseudoPrefixClass.length) {
				const importantCssDeclarations = Object.fromEntries(Object.entries(cssDeclarations).map(([prop, value]) => {
					const strValue = String(value).trimEnd().replace(/;$/, "");
					if (strValue.includes("!important")) return [prop, strValue];
					return [prop, `${strValue} !important`];
				}));
				styles[`.${pseudoPrefixClass}${fullClassName}`.replace(propertyStateSelector, "")] = {
					...importantCssDeclarations,
					...styles[`.${pseudoPrefixClass}${fullClassName}`.replace(propertyStateSelector, "")]
				};
			}
		}
	}
	return styles;
}
function generateConfigStyles(config, schema, theme, previewOptions) {
	const componentName = config.label.toLowerCase();
	let styles = {};
	for (const variantKey in config.variants) {
		const variantConfig = config.variants[variantKey];
		for (const variantOption of variantConfig.options) if (isVariantConfigWithComponentStates(variantConfig)) {
			const componentStates = variantConfig.componentStates;
			for (const componentStateKey in componentStates) {
				const componentState = componentStates[componentStateKey];
				for (const componentStateOption of componentState.options) for (const layerKey in componentState.layers) {
					const layer = componentState.layers[layerKey];
					for (const propertyKey in layer.properties) {
						const originalPropertyDefinition = layer.properties[propertyKey];
						const declarations = generateDeclaration({
							componentName,
							variantKey,
							variantValue: variantOption,
							componentStateKey,
							componentStateValue: componentStateOption,
							layer: layerKey,
							layerOptionalPseudoSelector: layer.pseudoSelector,
							propertyKey,
							originalPropertyDefinition,
							theme,
							schema,
							currentStyles: styles,
							previewOptions
						});
						styles = deepMerge(styles, declarations);
					}
				}
			}
		} else if (isVariantConfigWithProperties(variantConfig)) {
			const layers = variantConfig.layers;
			for (const layerKey in layers) {
				const layer = layers[layerKey];
				for (const propertyKey in layer.properties) {
					const originalPropertyDefinition = layer.properties[propertyKey];
					const declarations = generateDeclaration({
						componentName,
						variantKey,
						variantValue: variantOption,
						layer: layerKey,
						layerOptionalPseudoSelector: layer.pseudoSelector,
						propertyKey,
						originalPropertyDefinition,
						theme,
						schema,
						currentStyles: styles,
						previewOptions
					});
					styles = deepMerge(styles, declarations);
				}
			}
		}
	}
	if (config.subComponents) {
		const { subComponents } = config;
		for (const subComponentKey in subComponents) for (const variantKey in subComponents[subComponentKey].variants) {
			const variantConfig = subComponents[subComponentKey].variants[variantKey];
			for (const variantOption of variantConfig.options) if (isVariantConfigWithComponentStates(variantConfig)) {
				const componentStates = variantConfig.componentStates;
				for (const componentStateKey in componentStates) {
					const componentState = componentStates[componentStateKey];
					for (const componentStateOption of componentState.options) for (const layerKey in componentState.layers) {
						const layer = componentState.layers[layerKey];
						for (const propertyKey in layer.properties) {
							const originalPropertyDefinition = layer.properties[propertyKey];
							const declarations = generateDeclaration({
								componentName,
								variantKey,
								variantValue: variantOption,
								componentStateKey,
								componentStateValue: componentStateOption,
								subComponentName: subComponentKey,
								layer: layerKey,
								layerOptionalPseudoSelector: layer.pseudoSelector,
								propertyKey,
								originalPropertyDefinition,
								theme,
								schema,
								currentStyles: styles,
								previewOptions
							});
							styles = deepMerge(styles, declarations);
						}
					}
				}
			} else if (isVariantConfigWithProperties(variantConfig)) {
				const layers = variantConfig.layers;
				for (const layerKey in layers) {
					const layer = layers[layerKey];
					for (const propertyKey in layer.properties) {
						const originalPropertyDefinition = layer.properties[propertyKey];
						const declarations = generateDeclaration({
							componentName,
							subComponentName: subComponentKey,
							variantKey,
							variantValue: variantOption,
							layer: layerKey,
							layerOptionalPseudoSelector: layer.pseudoSelector,
							propertyKey,
							originalPropertyDefinition,
							theme,
							schema,
							currentStyles: styles,
							previewOptions
						});
						styles = deepMerge(styles, declarations);
					}
				}
			}
		}
	}
	/**
	* Post-process button/iconbutton styles to force box-shadow for borders.
	* This runs AFTER all properties have been processed and merged.
	*/
	const toApply = COMPONENTS_WITH_SHADOW_BORDERS.find((c) => c.componentName === componentName);
	if (toApply) {
		for (const className in styles) if (className.includes(`-${toApply.layer}`.toLowerCase())) {
			const raw = styles[className];
			if (toApply.componentName === "tab") {
				const tabUnderlineWidth = raw[CSS_TAB_UNDERLINE_WIDTH];
				const tabUnderlineColor = raw[CSS_TAB_UNDERLINE_COLOR];
				const withoutTabUnderline = { ...raw };
				delete withoutTabUnderline[CSS_TAB_UNDERLINE_WIDTH];
				delete withoutTabUnderline[CSS_TAB_UNDERLINE_COLOR];
				const merged = applyBoxShadowBorder(withoutTabUnderline);
				if (tabUnderlineWidth !== void 0) merged[CSS_TAB_UNDERLINE_WIDTH] = tabUnderlineWidth;
				if (tabUnderlineColor !== void 0) merged[CSS_TAB_UNDERLINE_COLOR] = tabUnderlineColor;
				styles[className] = merged;
			} else styles[className] = applyBoxShadowBorder(raw);
		}
	}
	return styles;
}
/**
* @param config - Component configuration (Button, IconButton, etc.)
* @param schema - Production schema with defaults and variables
* @param theme - Tailwind theme function to resolve design tokens
* @param previewOptions - Options for generating preview mode class modifiers
* @returns CSS styles object with grouped selectors for default aliases
*/
const generateStyles = (config, schema, theme, previewOptions) => {
	const styles = generateConfigStyles(config, schema, theme, previewOptions);
	if (!config.variants && !config.subComponents) return styles;
	const componentName = config.label.toLowerCase();
	if (componentName !== "button" && componentName !== "iconbutton") return styles;
	const replacementMap = /* @__PURE__ */ new Map();
	/**
	* Helper: Extract all layer keys from a variant configuration
	* Handles both simple variants (with direct layers) and variants with component states
	*/
	const getLayerKeys = (variantConfig) => {
		if (isVariantConfigWithProperties(variantConfig)) return Object.keys(variantConfig.layers);
		else if (isVariantConfigWithComponentStates(variantConfig)) {
			const layerKeysSet = /* @__PURE__ */ new Set();
			for (const componentStateConfig of Object.values(variantConfig.componentStates)) Object.keys(componentStateConfig.layers).forEach((key) => layerKeysSet.add(key));
			return Array.from(layerKeysSet);
		}
		return [];
	};
	/**
	* Helper: Build replacement map for default variant values
	* For each default variant + layer combination, creates an entry like:
	*   "uds-button-size-sm-root" → ".uds-button-size-sm-root, .uds-button-size-default-root"
	*/
	const buildReplacements = (variants, subComponentName) => {
		for (const [variantType, variantConfig] of Object.entries(variants)) {
			if (!isVariantConfigWithProperties(variantConfig) && !isVariantConfigWithComponentStates(variantConfig)) continue;
			const layerKeys = getLayerKeys(variantConfig);
			if (layerKeys.length) {
				const defaultValue = schema.defaults?.[variantType];
				if (defaultValue) for (const layerKey of layerKeys) {
					const baseClass = generateClassName({
						componentName,
						variantKey: variantType,
						variantValue: defaultValue,
						layer: layerKey,
						subComponentName
					});
					const defaultClass = generateDefaultClassName(componentName, variantType, layerKey, subComponentName);
					replacementMap.set(baseClass, `.${baseClass}, .${defaultClass}`);
				}
			}
		}
	};
	if (config.variants) buildReplacements(config.variants);
	if (config.subComponents) for (const [subComponentName, subComponentConfig] of Object.entries(config.subComponents)) buildReplacements(subComponentConfig.variants, subComponentName);
	const finalStyles = {};
	for (const [selector, declarations] of Object.entries(styles)) {
		let defaultsSelector = selector;
		let hasMatch = false;
		for (const [defaultVariantClass, replacement] of replacementMap.entries()) if (selector.includes(defaultVariantClass)) {
			hasMatch = true;
			const defaultMatch = replacement.match(/,\s*\.([a-z0-9-]+)/);
			if (defaultMatch) {
				const defaultClass = defaultMatch[1];
				defaultsSelector = defaultsSelector.replaceAll(defaultVariantClass, defaultClass);
			}
		}
		if (!hasMatch) {
			finalStyles[selector] = declarations;
			continue;
		}
		finalStyles[`${selector}, ${defaultsSelector}`] = declarations;
	}
	return finalStyles;
};
//#endregion
export { generateStyles };
