@gravionlabs/helix-core 22.1.2 → 22.1.3

package/fesm2022/gravionlabs-helix-core-uix-styled.mjs

@@ -1,871 +1,885 @@
-import { deepMerge, EventBus, isString, isArray, isObject, isNumber, matchRegex, toKebabCase, isNotEmpty, getKeyValue, isEmpty, resolve, mergeKeys, minifyCSS, createStyleMarkup } from '@gravionlabs/helix-core/uix/utils';
-
+import { EventBus, createStyleMarkup, deepMerge, getKeyValue, isArray, isEmpty, isNotEmpty, isNumber, isObject, isString, matchRegex, mergeKeys, minifyCSS, resolve, toKebabCase } from "@gravionlabs/helix-core/uix/utils";
 function definePreset(...presets) {
-    return deepMerge(...presets);
+	return deepMerge(...presets);
 }
-
 const ThemeService = EventBus();
-
-const EXPR_REGEX = /{([^}]*)}/g; // Exp: '{a}', '{a.b}', '{a.b.c}' etc.
+const EXPR_REGEX = /{([^}]*)}/g;
 const CALC_REGEX = /(\d+\s+[\+\-\*\/]\s+\d+)/g;
 const VAR_REGEX = /var\([^)]+\)/g;
 function toTokenKey(str) {
-    return isString(str) ? str.replace(/[A-Z]/g, (c, i) => (i === 0 ? c : '.' + c.toLowerCase())).toLowerCase() : str;
+	return isString(str) ? str.replace(/[A-Z]/g, (c, i) => i === 0 ? c : "." + c.toLowerCase()).toLowerCase() : str;
 }
 function merge(value1, value2) {
-    if (isArray(value1)) {
-        value1.push(...(value2 || []));
-    }
-    else if (isObject(value1)) {
-        Object.assign(value1, value2);
-    }
+	if (isArray(value1)) value1.push(...value2 || []);
+	else if (isObject(value1)) Object.assign(value1, value2);
 }
 function toValue(value) {
-    // Check for Figma ($value-$type)
-    return isObject(value) && value.hasOwnProperty('$value') && value.hasOwnProperty('$type') ? value.$value : value;
+	return isObject(value) && value.hasOwnProperty("$value") && value.hasOwnProperty("$type") ? value.$value : value;
 }
-function toUnit(value, variable = '') {
-    const excludedProperties = ['opacity', 'z-index', 'line-height', 'font-weight', 'flex', 'flex-grow', 'flex-shrink', 'order'];
-    if (!excludedProperties.some((property) => variable.endsWith(property))) {
-        const val = `${value}`.trim();
-        const valArr = val.split(' ');
-        return valArr.map((v) => (isNumber(v) ? `${v}px` : v)).join(' ');
-    }
-    return value;
+function toUnit(value, variable = "") {
+	if (![
+		"opacity",
+		"z-index",
+		"line-height",
+		"font-weight",
+		"flex",
+		"flex-grow",
+		"flex-shrink",
+		"order"
+	].some((property) => variable.endsWith(property))) return `${value}`.trim().split(" ").map((v) => isNumber(v) ? `${v}px` : v).join(" ");
+	return value;
 }
 function toNormalizePrefix(prefix) {
-    return prefix.replaceAll(/ /g, '').replace(/[^\w]/g, '-');
+	return prefix.replaceAll(/ /g, "").replace(/[^\w]/g, "-");
 }
-function toNormalizeVariable(prefix = '', variable = '') {
-    return toNormalizePrefix(`${isString(prefix, false) && isString(variable, false) ? `${prefix}-` : prefix}${variable}`);
+function toNormalizeVariable(prefix = "", variable = "") {
+	return toNormalizePrefix(`${isString(prefix, false) && isString(variable, false) ? `${prefix}-` : prefix}${variable}`);
 }
-function getVariableName(prefix = '', variable = '') {
-    return `--${toNormalizeVariable(prefix, variable)}`;
+function getVariableName(prefix = "", variable = "") {
+	return `--${toNormalizeVariable(prefix, variable)}`;
 }
-function hasOddBraces(str = '') {
-    const openBraces = (str.match(/{/g) || []).length;
-    const closeBraces = (str.match(/}/g) || []).length;
-    return (openBraces + closeBraces) % 2 !== 0;
+function hasOddBraces(str = "") {
+	return ((str.match(/{/g) || []).length + (str.match(/}/g) || []).length) % 2 !== 0;
 }
-function getVariableValue(value, variable = '', prefix = '', excludedKeyRegexes = [], fallback) {
-    if (isString(value)) {
-        const val = value.trim();
-        if (hasOddBraces(val)) {
-            return undefined;
-        }
-        else if (matchRegex(val, EXPR_REGEX)) {
-            const _val = val.replaceAll(EXPR_REGEX, (v) => {
-                const path = v.replace(/{|}/g, '');
-                const keys = path.split('.').filter((_v) => !excludedKeyRegexes.some((_r) => matchRegex(_v, _r)));
-                return `var(${getVariableName(prefix, toKebabCase(keys.join('-')))}${isNotEmpty(fallback) ? `, ${fallback}` : ''})`;
-            });
-            return matchRegex(_val.replace(VAR_REGEX, '0'), CALC_REGEX) ? `calc(${_val})` : _val;
-        }
-        return val; //toUnit(val, variable);
-    }
-    else if (isNumber(value)) {
-        return value; //toUnit(value, variable);
-    }
-    return undefined;
+function getVariableValue(value, variable = "", prefix = "", excludedKeyRegexes = [], fallback) {
+	if (isString(value)) {
+		const val = value.trim();
+		if (hasOddBraces(val)) return;
+		else if (matchRegex(val, EXPR_REGEX)) {
+			const _val = val.replaceAll(EXPR_REGEX, (v) => {
+				return `var(${getVariableName(prefix, toKebabCase(v.replace(/{|}/g, "").split(".").filter((_v) => !excludedKeyRegexes.some((_r) => matchRegex(_v, _r))).join("-")))}${isNotEmpty(fallback) ? `, ${fallback}` : ""})`;
+			});
+			return matchRegex(_val.replace(VAR_REGEX, "0"), CALC_REGEX) ? `calc(${_val})` : _val;
+		}
+		return val;
+	} else if (isNumber(value)) return value;
 }
 function getComputedValue(obj = {}, value) {
-    if (isString(value)) {
-        const val = value.trim();
-        return matchRegex(val, EXPR_REGEX) ? val.replaceAll(EXPR_REGEX, (v) => getKeyValue(obj, v.replace(/{|}/g, ''))) : val;
-    }
-    else if (isNumber(value)) {
-        return value;
-    }
-    return undefined;
+	if (isString(value)) {
+		const val = value.trim();
+		return matchRegex(val, EXPR_REGEX) ? val.replaceAll(EXPR_REGEX, (v) => getKeyValue(obj, v.replace(/{|}/g, ""))) : val;
+	} else if (isNumber(value)) return value;
 }
 function setProperty(properties, key, value) {
-    if (isString(key, false)) {
-        properties.push(`${key}:${value};`);
-    }
+	if (isString(key, false)) properties.push(`${key}:${value};`);
 }
 function getRule(selector, properties) {
-    if (selector) {
-        return `${selector}{${properties}}`;
-    }
-    return '';
+	if (selector) return `${selector}{${properties}}`;
+	return "";
 }
 function evaluateDtExpressions(input, fn) {
-    if (input.indexOf('dt(') === -1)
-        return input;
-    function fastParseArgs(str, fn) {
-        const args = [];
-        let i = 0;
-        let current = '';
-        let quote = null;
-        let depth = 0;
-        while (i <= str.length) {
-            const c = str[i];
-            if ((c === '"' || c === "'" || c === '`') && str[i - 1] !== '\\') {
-                quote = quote === c ? null : c;
-            }
-            if (!quote) {
-                if (c === '(')
-                    depth++;
-                if (c === ')')
-                    depth--;
-                if ((c === ',' || i === str.length) && depth === 0) {
-                    const arg = current.trim();
-                    if (arg.startsWith('dt(')) {
-                        args.push(evaluateDtExpressions(arg, fn));
-                    }
-                    else {
-                        args.push(parseArg(arg));
-                    }
-                    current = '';
-                    i++;
-                    continue;
-                }
-            }
-            if (c !== undefined)
-                current += c;
-            i++;
-        }
-        return args;
-    }
-    function parseArg(arg) {
-        const q = arg[0];
-        if ((q === '"' || q === "'" || q === '`') && arg[arg.length - 1] === q) {
-            return arg.slice(1, -1);
-        }
-        const num = Number(arg);
-        return isNaN(num) ? arg : num;
-    }
-    const indices = [];
-    const stack = [];
-    for (let i = 0; i < input.length; i++) {
-        if (input[i] === 'd' && input.slice(i, i + 3) === 'dt(') {
-            stack.push(i);
-            i += 2;
-        }
-        else if (input[i] === ')' && stack.length > 0) {
-            const start = stack.pop();
-            if (stack.length === 0) {
-                indices.push([start, i]);
-            }
-        }
-    }
-    if (!indices.length)
-        return input;
-    for (let i = indices.length - 1; i >= 0; i--) {
-        const [start, end] = indices[i];
-        const inner = input.slice(start + 3, end);
-        const args = fastParseArgs(inner, fn);
-        const resolved = fn(...args);
-        input = input.slice(0, start) + resolved + input.slice(end + 1);
-    }
-    return input;
+	if (input.indexOf("dt(") === -1) return input;
+	function fastParseArgs(str, fn) {
+		const args = [];
+		let i = 0;
+		let current = "";
+		let quote = null;
+		let depth = 0;
+		while (i <= str.length) {
+			const c = str[i];
+			if ((c === "\"" || c === "'" || c === "`") && str[i - 1] !== "\\") quote = quote === c ? null : c;
+			if (!quote) {
+				if (c === "(") depth++;
+				if (c === ")") depth--;
+				if ((c === "," || i === str.length) && depth === 0) {
+					const arg = current.trim();
+					if (arg.startsWith("dt(")) args.push(evaluateDtExpressions(arg, fn));
+					else args.push(parseArg(arg));
+					current = "";
+					i++;
+					continue;
+				}
+			}
+			if (c !== void 0) current += c;
+			i++;
+		}
+		return args;
+	}
+	function parseArg(arg) {
+		const q = arg[0];
+		if ((q === "\"" || q === "'" || q === "`") && arg[arg.length - 1] === q) return arg.slice(1, -1);
+		const num = Number(arg);
+		return isNaN(num) ? arg : num;
+	}
+	const indices = [];
+	const stack = [];
+	for (let i = 0; i < input.length; i++) if (input[i] === "d" && input.slice(i, i + 3) === "dt(") {
+		stack.push(i);
+		i += 2;
+	} else if (input[i] === ")" && stack.length > 0) {
+		const start = stack.pop();
+		if (stack.length === 0) indices.push([start, i]);
+	}
+	if (!indices.length) return input;
+	for (let i = indices.length - 1; i >= 0; i--) {
+		const [start, end] = indices[i];
+		const resolved = fn(...fastParseArgs(input.slice(start + 3, end), fn));
+		input = input.slice(0, start) + resolved + input.slice(end + 1);
+	}
+	return input;
 }
-
 function normalizeColor(color) {
-    if (color.length === 4) {
-        return `#${color[1]}${color[1]}${color[2]}${color[2]}${color[3]}${color[3]}`;
-    }
-    return color;
+	if (color.length === 4) return `#${color[1]}${color[1]}${color[2]}${color[2]}${color[3]}${color[3]}`;
+	return color;
 }
 function hexToRgb(hex) {
-    const bigint = parseInt(hex.substring(1), 16);
-    const r = (bigint >> 16) & 255;
-    const g = (bigint >> 8) & 255;
-    const b = bigint & 255;
-    return { r, g, b };
+	const bigint = parseInt(hex.substring(1), 16);
+	return {
+		r: bigint >> 16 & 255,
+		g: bigint >> 8 & 255,
+		b: bigint & 255
+	};
 }
 function rgbToHex(r, g, b) {
-    return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
+	return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
 }
-var mix = (color1, color2, weight) => {
-    color1 = normalizeColor(color1);
-    color2 = normalizeColor(color2);
-    const p = weight / 100;
-    const w = p * 2 - 1;
-    const w1 = (w + 1) / 2.0;
-    const w2 = 1 - w1;
-    const rgb1 = hexToRgb(color1);
-    const rgb2 = hexToRgb(color2);
-    const r = Math.round(rgb1.r * w1 + rgb2.r * w2);
-    const g = Math.round(rgb1.g * w1 + rgb2.g * w2);
-    const b = Math.round(rgb1.b * w1 + rgb2.b * w2);
-    return rgbToHex(r, g, b);
+var mix_default = (color1, color2, weight) => {
+	color1 = normalizeColor(color1);
+	color2 = normalizeColor(color2);
+	const w1 = (weight / 100 * 2 - 1 + 1) / 2;
+	const w2 = 1 - w1;
+	const rgb1 = hexToRgb(color1);
+	const rgb2 = hexToRgb(color2);
+	return rgbToHex(Math.round(rgb1.r * w1 + rgb2.r * w2), Math.round(rgb1.g * w1 + rgb2.g * w2), Math.round(rgb1.b * w1 + rgb2.b * w2));
 };
-
-var shade = (color, percent) => mix('#000000', color, percent);
-
-var tint = (color, percent) => mix('#ffffff', color, percent);
-
-const scales = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
-var palette = (color) => {
-    if (matchRegex(color, EXPR_REGEX)) {
-        const token = color.replace(/{|}/g, '');
-        return scales.reduce((acc, scale) => {
-            acc[scale] = `{${token}.${scale}}`;
-            return acc;
-        }, {});
-    }
-    return typeof color === 'string'
-        ? scales.reduce((acc, scale, i) => {
-            acc[scale] = i <= 5 ? tint(color, (5 - i) * 19) : shade(color, (i - 5) * 15);
-            return acc;
-        }, {})
-        : color;
+var shade_default = (color, percent) => mix_default("#000000", color, percent);
+var tint_default = (color, percent) => mix_default("#ffffff", color, percent);
+const scales = [
+	50,
+	100,
+	200,
+	300,
+	400,
+	500,
+	600,
+	700,
+	800,
+	900,
+	950
+];
+var palette_default = (color) => {
+	if (matchRegex(color, EXPR_REGEX)) {
+		const token = color.replace(/{|}/g, "");
+		return scales.reduce((acc, scale) => {
+			acc[scale] = `{${token}.${scale}}`;
+			return acc;
+		}, {});
+	}
+	return typeof color === "string" ? scales.reduce((acc, scale, i) => {
+		acc[scale] = i <= 5 ? tint_default(color, (5 - i) * 19) : shade_default(color, (i - 5) * 15);
+		return acc;
+	}, {}) : color;
 };
-
 const $dt = (tokenPath) => {
-    const theme = Theme.getTheme();
-    const variable = dtwt(theme, tokenPath, undefined, 'variable');
-    const name = variable?.match(/--[\w-]+/g)?.[0];
-    const value = dtwt(theme, tokenPath, undefined, 'value');
-    return {
-        name,
-        variable,
-        value
-    };
+	const theme = config_default.getTheme();
+	const variable = dtwt(theme, tokenPath, void 0, "variable");
+	return {
+		name: variable?.match(/--[\w-]+/g)?.[0],
+		variable,
+		value: dtwt(theme, tokenPath, void 0, "value")
+	};
 };
 const dt = (...args) => {
-    return dtwt(Theme.getTheme(), ...args);
+	return dtwt(config_default.getTheme(), ...args);
 };
 const dtwt = (theme = {}, tokenPath, fallback, type) => {
-    if (tokenPath) {
-        const { variable: VARIABLE, options: OPTIONS } = Theme.defaults || {};
-        const { prefix, transform } = theme?.options || OPTIONS || {};
-        const token = matchRegex(tokenPath, EXPR_REGEX) ? tokenPath : `{${tokenPath}}`;
-        const isStrictTransform = type === 'value' || (isEmpty(type) && transform === 'strict'); // @todo - TRANSFORM: strict | lenient(default)
-        return isStrictTransform ? Theme.getTokenValue(tokenPath) : getVariableValue(token, undefined, prefix, [VARIABLE.excludedKeyRegex], fallback);
-    }
-    return '';
+	if (tokenPath) {
+		const { variable: VARIABLE, options: OPTIONS } = config_default.defaults || {};
+		const { prefix, transform } = theme?.options || OPTIONS || {};
+		const token = matchRegex(tokenPath, EXPR_REGEX) ? tokenPath : `{${tokenPath}}`;
+		return type === "value" || isEmpty(type) && transform === "strict" ? config_default.getTokenValue(tokenPath) : getVariableValue(token, void 0, prefix, [VARIABLE.excludedKeyRegex], fallback);
+	}
+	return "";
 };
-
 function css(strings, ...exprs) {
-    if (strings instanceof Array) {
-        const raw = strings.reduce((acc, str, i) => acc + str + (resolve(exprs[i], { dt }) ?? ''), '');
-        return evaluateDtExpressions(raw, dt);
-    }
-    return resolve(strings, { dt });
+	if (strings instanceof Array) return evaluateDtExpressions(strings.reduce((acc, str, i) => acc + str + (resolve(exprs[i], { dt }) ?? ""), ""), dt);
+	return resolve(strings, { dt });
 }
-
 const $t = (theme = {}) => {
-    let { preset: _preset, options: _options } = theme;
-    return {
-        preset(value) {
-            _preset = _preset ? mergeKeys(_preset, value) : value;
-            return this;
-        },
-        options(value) {
-            _options = _options ? { ..._options, ...value } : value;
-            return this;
-        },
-        // features
-        primaryPalette(primary) {
-            const { semantic } = _preset || {};
-            _preset = { ..._preset, semantic: { ...semantic, primary } };
-            return this;
-        },
-        surfacePalette(surface) {
-            const { semantic } = _preset || {};
-            const lightSurface = surface && Object.hasOwn(surface, 'light') ? surface.light : surface;
-            const darkSurface = surface && Object.hasOwn(surface, 'dark') ? surface.dark : surface;
-            const newColorScheme = {
-                colorScheme: {
-                    light: { ...semantic?.colorScheme?.light, ...(!!lightSurface && { surface: lightSurface }) },
-                    dark: { ...semantic?.colorScheme?.dark, ...(!!darkSurface && { surface: darkSurface }) }
-                }
-            };
-            _preset = { ..._preset, semantic: { ...semantic, ...newColorScheme } };
-            return this;
-        },
-        // actions
-        define({ useDefaultPreset = false, useDefaultOptions = false } = {}) {
-            return {
-                preset: useDefaultPreset ? Theme.getPreset() : _preset,
-                options: useDefaultOptions ? Theme.getOptions() : _options
-            };
-        },
-        update({ mergePresets = true, mergeOptions = true } = {}) {
-            const newTheme = {
-                preset: mergePresets ? mergeKeys(Theme.getPreset(), _preset) : _preset,
-                options: mergeOptions ? { ...Theme.getOptions(), ..._options } : _options
-            };
-            Theme.setTheme(newTheme);
-            return newTheme;
-        },
-        use(options) {
-            const newTheme = this.define(options);
-            Theme.setTheme(newTheme);
-            return newTheme;
-        }
-    };
+	let { preset: _preset, options: _options } = theme;
+	return {
+		preset(value) {
+			_preset = _preset ? mergeKeys(_preset, value) : value;
+			return this;
+		},
+		options(value) {
+			_options = _options ? {
+				..._options,
+				...value
+			} : value;
+			return this;
+		},
+		primaryPalette(primary) {
+			const { semantic } = _preset || {};
+			_preset = {
+				..._preset,
+				semantic: {
+					...semantic,
+					primary
+				}
+			};
+			return this;
+		},
+		surfacePalette(surface) {
+			const { semantic } = _preset || {};
+			const lightSurface = surface && Object.hasOwn(surface, "light") ? surface.light : surface;
+			const darkSurface = surface && Object.hasOwn(surface, "dark") ? surface.dark : surface;
+			const newColorScheme = { colorScheme: {
+				light: {
+					...semantic?.colorScheme?.light,
+					...!!lightSurface && { surface: lightSurface }
+				},
+				dark: {
+					...semantic?.colorScheme?.dark,
+					...!!darkSurface && { surface: darkSurface }
+				}
+			} };
+			_preset = {
+				..._preset,
+				semantic: {
+					...semantic,
+					...newColorScheme
+				}
+			};
+			return this;
+		},
+		define({ useDefaultPreset = false, useDefaultOptions = false } = {}) {
+			return {
+				preset: useDefaultPreset ? config_default.getPreset() : _preset,
+				options: useDefaultOptions ? config_default.getOptions() : _options
+			};
+		},
+		update({ mergePresets = true, mergeOptions = true } = {}) {
+			const newTheme = {
+				preset: mergePresets ? mergeKeys(config_default.getPreset(), _preset) : _preset,
+				options: mergeOptions ? {
+					...config_default.getOptions(),
+					..._options
+				} : _options
+			};
+			config_default.setTheme(newTheme);
+			return newTheme;
+		},
+		use(options) {
+			const newTheme = this.define(options);
+			config_default.setTheme(newTheme);
+			return newTheme;
+		}
+	};
 };
-
-function toVariables (theme, options = {}) {
-    const VARIABLE = Theme.defaults.variable;
-    const { prefix = VARIABLE.prefix, selector = VARIABLE.selector, excludedKeyRegex = VARIABLE.excludedKeyRegex } = options;
-    const tokens = [];
-    const variables = [];
-    const stack = [{ node: theme, path: prefix }];
-    while (stack.length) {
-        const { node, path } = stack.pop();
-        for (const key in node) {
-            const raw = node[key];
-            const val = toValue(raw);
-            const skipNormalize = matchRegex(key, excludedKeyRegex);
-            const variablePath = skipNormalize ? toNormalizeVariable(path) : toNormalizeVariable(path, toKebabCase(key));
-            if (isObject(val)) {
-                stack.push({ node: val, path: variablePath });
-            }
-            else {
-                const varName = getVariableName(variablePath);
-                const varValue = getVariableValue(val, variablePath, prefix, [excludedKeyRegex]);
-                setProperty(variables, varName, varValue);
-                let token = variablePath;
-                if (prefix && token.startsWith(prefix + '-')) {
-                    token = token.slice(prefix.length + 1);
-                }
-                tokens.push(token.replace(/-/g, '.'));
-            }
-        }
-    }
-    const declarations = variables.join('');
-    return {
-        value: variables,
-        tokens,
-        declarations,
-        css: getRule(selector, declarations)
-    };
+function toVariables_default(theme, options = {}) {
+	const VARIABLE = config_default.defaults.variable;
+	const { prefix = VARIABLE.prefix, selector = VARIABLE.selector, excludedKeyRegex = VARIABLE.excludedKeyRegex } = options;
+	const tokens = [];
+	const variables = [];
+	const stack = [{
+		node: theme,
+		path: prefix
+	}];
+	while (stack.length) {
+		const { node, path } = stack.pop();
+		for (const key in node) {
+			const raw = node[key];
+			const val = toValue(raw);
+			const variablePath = matchRegex(key, excludedKeyRegex) ? toNormalizeVariable(path) : toNormalizeVariable(path, toKebabCase(key));
+			if (isObject(val)) stack.push({
+				node: val,
+				path: variablePath
+			});
+			else {
+				setProperty(variables, getVariableName(variablePath), getVariableValue(val, variablePath, prefix, [excludedKeyRegex]));
+				let token = variablePath;
+				if (prefix && token.startsWith(prefix + "-")) token = token.slice(prefix.length + 1);
+				tokens.push(token.replace(/-/g, "."));
+			}
+		}
+	}
+	const declarations = variables.join("");
+	return {
+		value: variables,
+		tokens,
+		declarations,
+		css: getRule(selector, declarations)
+	};
 }
-
-var ThemeUtils = {
-    regex: {
-        rules: {
-            class: {
-                pattern: /^\.([a-zA-Z][\w-]*)$/,
-                resolve(value) {
-                    return { type: 'class', selector: value, matched: this.pattern.test(value.trim()) };
-                }
-            },
-            attr: {
-                pattern: /^\[(.*)\]$/,
-                resolve(value) {
-                    return { type: 'attr', selector: `:root${value},:host${value}`, matched: this.pattern.test(value.trim()) };
-                }
-            },
-            media: {
-                pattern: /^@media (.*)$/,
-                resolve(value) {
-                    return { type: 'media', selector: value, matched: this.pattern.test(value.trim()) };
-                }
-            },
-            system: {
-                pattern: /^system$/,
-                resolve(value) {
-                    return { type: 'system', selector: '@media (prefers-color-scheme: dark)', matched: this.pattern.test(value.trim()) };
-                }
-            },
-            custom: {
-                resolve(value) {
-                    return { type: 'custom', selector: value, matched: true };
-                }
-            }
-        },
-        resolve(value) {
-            const rules = Object.keys(this.rules)
-                .filter((k) => k !== 'custom')
-                .map((r) => this.rules[r]);
-            return [value].flat().map((v) => rules.map((r) => r.resolve(v)).find((rr) => rr.matched) ?? this.rules.custom.resolve(v));
-        }
-    },
-    _toVariables(theme, options) {
-        return toVariables(theme, { prefix: options?.prefix });
-    },
-    getCommon({ name = '', theme = {}, params, set, defaults }) {
-        const { preset, options } = theme;
-        let primitive_css, primitive_tokens, semantic_css, semantic_tokens, global_css, global_tokens, style;
-        // @todo - check if options is not empty
-        if (isNotEmpty(preset) && options.transform !== 'strict') {
-            const { primitive, semantic, extend } = preset;
-            const { colorScheme, ...sRest } = semantic || {};
-            const { colorScheme: eColorScheme, ...eRest } = extend || {};
-            const { dark, ...csRest } = colorScheme || {};
-            const { dark: eDark, ...ecsRest } = eColorScheme || {};
-            const prim_var = isNotEmpty(primitive) ? this._toVariables({ primitive }, options) : {};
-            const sRest_var = isNotEmpty(sRest) ? this._toVariables({ semantic: sRest }, options) : {};
-            const csRest_var = isNotEmpty(csRest) ? this._toVariables({ light: csRest }, options) : {};
-            const csDark_var = isNotEmpty(dark) ? this._toVariables({ dark }, options) : {};
-            const eRest_var = isNotEmpty(eRest) ? this._toVariables({ semantic: eRest }, options) : {};
-            const ecsRest_var = isNotEmpty(ecsRest) ? this._toVariables({ light: ecsRest }, options) : {};
-            const ecsDark_var = isNotEmpty(eDark) ? this._toVariables({ dark: eDark }, options) : {};
-            const [prim_css, prim_tokens] = [prim_var.declarations ?? '', prim_var.tokens];
-            const [sRest_css, sRest_tokens] = [sRest_var.declarations ?? '', sRest_var.tokens || []];
-            const [csRest_css, csRest_tokens] = [csRest_var.declarations ?? '', csRest_var.tokens || []];
-            const [csDark_css, csDark_tokens] = [csDark_var.declarations ?? '', csDark_var.tokens || []];
-            const [eRest_css, eRest_tokens] = [eRest_var.declarations ?? '', eRest_var.tokens || []];
-            const [ecsRest_css, ecsRest_tokens] = [ecsRest_var.declarations ?? '', ecsRest_var.tokens || []];
-            const [ecsDark_css, ecsDark_tokens] = [ecsDark_var.declarations ?? '', ecsDark_var.tokens || []];
-            primitive_css = this.transformCSS(name, prim_css, 'light', 'variable', options, set, defaults);
-            primitive_tokens = prim_tokens;
-            const semantic_light_css = this.transformCSS(name, `${sRest_css}${csRest_css}`, 'light', 'variable', options, set, defaults);
-            const semantic_dark_css = this.transformCSS(name, `${csDark_css}`, 'dark', 'variable', options, set, defaults);
-            semantic_css = `${semantic_light_css}${semantic_dark_css}`;
-            semantic_tokens = [...new Set([...sRest_tokens, ...csRest_tokens, ...csDark_tokens])];
-            const global_light_css = this.transformCSS(name, `${eRest_css}${ecsRest_css}color-scheme:light`, 'light', 'variable', options, set, defaults);
-            const global_dark_css = this.transformCSS(name, `${ecsDark_css}color-scheme:dark`, 'dark', 'variable', options, set, defaults);
-            global_css = `${global_light_css}${global_dark_css}`;
-            global_tokens = [...new Set([...eRest_tokens, ...ecsRest_tokens, ...ecsDark_tokens])];
-            style = resolve(preset.css, { dt });
-        }
-        return {
-            primitive: {
-                css: primitive_css,
-                tokens: primitive_tokens
-            },
-            semantic: {
-                css: semantic_css,
-                tokens: semantic_tokens
-            },
-            global: {
-                css: global_css,
-                tokens: global_tokens
-            },
-            style
-        };
-    },
-    getPreset({ name = '', preset = {}, options, params, set, defaults, selector }) {
-        let p_css, p_tokens, p_style;
-        if (isNotEmpty(preset) && options.transform !== 'strict') {
-            const _name = name.replace('-directive', '');
-            const { colorScheme, extend, css, ...vRest } = preset;
-            const { colorScheme: eColorScheme, ...evRest } = extend || {};
-            const { dark, ...csRest } = colorScheme || {};
-            const { dark: ecsDark, ...ecsRest } = eColorScheme || {};
-            const vRest_var = isNotEmpty(vRest) ? this._toVariables({ [_name]: { ...vRest, ...evRest } }, options) : {};
-            const csRest_var = isNotEmpty(csRest) ? this._toVariables({ [_name]: { ...csRest, ...ecsRest } }, options) : {};
-            const csDark_var = isNotEmpty(dark) ? this._toVariables({ [_name]: { ...dark, ...ecsDark } }, options) : {};
-            const [vRest_css, vRest_tokens] = [vRest_var.declarations ?? '', vRest_var.tokens || []];
-            const [csRest_css, csRest_tokens] = [csRest_var.declarations ?? '', csRest_var.tokens || []];
-            const [csDark_css, csDark_tokens] = [csDark_var.declarations ?? '', csDark_var.tokens || []];
-            const light_variable_css = this.transformCSS(_name, `${vRest_css}${csRest_css}`, 'light', 'variable', options, set, defaults, selector);
-            const dark_variable_css = this.transformCSS(_name, csDark_css, 'dark', 'variable', options, set, defaults, selector);
-            p_css = `${light_variable_css}${dark_variable_css}`;
-            p_tokens = [...new Set([...vRest_tokens, ...csRest_tokens, ...csDark_tokens])];
-            p_style = resolve(css, { dt });
-        }
-        return {
-            css: p_css,
-            tokens: p_tokens,
-            style: p_style
-        };
-    },
-    getPresetC({ name = '', theme = {}, params, set, defaults }) {
-        const { preset, options } = theme;
-        const cPreset = preset?.components?.[name];
-        return this.getPreset({ name, preset: cPreset, options, params, set, defaults });
-    },
-    // @deprecated - use getPresetC instead
-    getPresetD({ name = '', theme = {}, params, set, defaults }) {
-        const dName = name.replace('-directive', '');
-        const { preset, options } = theme;
-        const dPreset = preset?.components?.[dName] || preset?.directives?.[dName];
-        return this.getPreset({ name: dName, preset: dPreset, options, params, set, defaults });
-    },
-    applyDarkColorScheme(options) {
-        return !(options.darkModeSelector === 'none' || options.darkModeSelector === false);
-    },
-    getColorSchemeOption(options, defaults) {
-        return this.applyDarkColorScheme(options) ? this.regex.resolve(options.darkModeSelector === true ? defaults.options.darkModeSelector : (options.darkModeSelector ?? defaults.options.darkModeSelector)) : [];
-    },
-    getLayerOrder(name, options = {}, params, defaults) {
-        const { cssLayer } = options;
-        if (cssLayer) {
-            const order = resolve(cssLayer.order || cssLayer.name || 'primeui', params);
-            return `@layer ${order}`;
-        }
-        return '';
-    },
-    getCommonStyleSheet({ name = '', theme = {}, params, props = {}, set, defaults }) {
-        const common = this.getCommon({ name, theme, params, set, defaults });
-        const _props = Object.entries(props)
-            .reduce((acc, [k, v]) => acc.push(`${k}="${v}"`) && acc, [])
-            .join(' ');
-        return Object.entries(common || {})
-            .reduce((acc, [key, value]) => {
-            if (isObject(value) && Object.hasOwn(value, 'css')) {
-                const _css = minifyCSS(value.css);
-                const id = `${key}-variables`;
-                acc.push(`<style type="text/css" data-primevue-style-id="${id}" ${_props}>${_css}</style>`); // @todo data-primevue -> data-primeui check in primevue usestyle
-            }
-            return acc;
-        }, [])
-            .join('');
-    },
-    getStyleSheet({ name = '', theme = {}, params, props = {}, set, defaults }) {
-        const options = { name, theme, params, set, defaults };
-        const preset_css = (name.includes('-directive') ? this.getPresetD(options) : this.getPresetC(options))?.css;
-        const _props = Object.entries(props)
-            .reduce((acc, [k, v]) => acc.push(`${k}="${v}"`) && acc, [])
-            .join(' ');
-        return preset_css ? `<style type="text/css" data-primevue-style-id="${name}-variables" ${_props}>${minifyCSS(preset_css)}</style>` : ''; // @todo check
-    },
-    createTokens(obj = {}, defaults, parentKey = '', parentPath = '', tokens = {}) {
-        const computedFn = function (colorScheme, tokenPathMap = {}, stack = []) {
-            if (stack.includes(this.path)) {
-                console.warn(`Circular reference detected at ${this.path}`);
-                return {
-                    colorScheme,
-                    path: this.path,
-                    paths: tokenPathMap,
-                    value: undefined
-                };
-            }
-            stack.push(this.path);
-            tokenPathMap['name'] = this.path;
-            tokenPathMap['binding'] ||= {};
-            let computedValue = this.value;
-            if (typeof this.value === 'string' && EXPR_REGEX.test(this.value)) {
-                const val = this.value.trim();
-                const _val = val.replace(EXPR_REGEX, (v) => {
-                    const refPath = v.slice(1, -1);
-                    const refToken = this.tokens[refPath];
-                    if (!refToken) {
-                        console.warn(`Token not found for path: ${refPath}`);
-                        return `__UNRESOLVED__`;
-                    }
-                    const computed = refToken.computed(colorScheme, tokenPathMap, stack);
-                    if (Array.isArray(computed) && computed.length === 2) {
-                        return `light-dark(${computed[0].value},${computed[1].value})`;
-                    }
-                    else {
-                        return computed?.value ?? `__UNRESOLVED__`;
-                    }
-                });
-                computedValue = CALC_REGEX.test(_val.replace(VAR_REGEX, '0')) ? `calc(${_val})` : _val;
-            }
-            if (isEmpty(tokenPathMap['binding'])) {
-                delete tokenPathMap['binding'];
-            }
-            stack.pop();
-            return {
-                colorScheme,
-                path: this.path,
-                paths: tokenPathMap,
-                value: computedValue.includes('__UNRESOLVED__') ? undefined : computedValue
-            };
-        };
-        const traverse = (obj, parentKey, parentPath) => {
-            Object.entries(obj).forEach(([key, value]) => {
-                const currentKey = matchRegex(key, defaults.variable.excludedKeyRegex) ? parentKey : parentKey ? `${parentKey}.${toTokenKey(key)}` : toTokenKey(key);
-                const currentPath = parentPath ? `${parentPath}.${key}` : key;
-                if (isObject(value)) {
-                    traverse(value, currentKey, currentPath);
-                }
-                else {
-                    if (!tokens[currentKey]) {
-                        tokens[currentKey] = {
-                            paths: [],
-                            computed: (colorScheme, tokenPathMap = {}, stack = []) => {
-                                if (tokens[currentKey].paths.length === 1) {
-                                    return tokens[currentKey].paths[0].computed(tokens[currentKey].paths[0].scheme, tokenPathMap['binding'], stack);
-                                }
-                                else if (colorScheme && colorScheme !== 'none') {
-                                    for (let i = 0; i < tokens[currentKey].paths.length; i++) {
-                                        const p = tokens[currentKey].paths[i];
-                                        if (p.scheme === colorScheme) {
-                                            return p.computed(colorScheme, tokenPathMap['binding'], stack);
-                                        }
-                                    }
-                                }
-                                return tokens[currentKey].paths.map((p) => p.computed(p.scheme, tokenPathMap[p.scheme], stack));
-                            }
-                        };
-                    }
-                    tokens[currentKey].paths.push({
-                        path: currentPath,
-                        value,
-                        scheme: currentPath.includes('colorScheme.light') ? 'light' : currentPath.includes('colorScheme.dark') ? 'dark' : 'none',
-                        computed: computedFn,
-                        tokens
-                    });
-                }
-            });
-        };
-        traverse(obj, parentKey, parentPath);
-        return tokens;
-    },
-    getTokenValue(tokens, path, defaults) {
-        const normalizePath = (str) => {
-            const strArr = str.split('.');
-            return strArr.filter((s) => !matchRegex(s.toLowerCase(), defaults.variable.excludedKeyRegex)).join('.');
-        };
-        const token = normalizePath(path);
-        const colorScheme = path.includes('colorScheme.light') ? 'light' : path.includes('colorScheme.dark') ? 'dark' : undefined;
-        const computedValues = [tokens[token]?.computed(colorScheme)].flat().filter((computed) => computed);
-        return computedValues.length === 1
-            ? computedValues[0].value
-            : computedValues.reduce((acc = {}, computed) => {
-                const { colorScheme: cs, ...rest } = computed;
-                acc[cs] = rest;
-                return acc;
-            }, undefined);
-    },
-    getSelectorRule(selector1, selector2, type, css) {
-        return type === 'class' || type === 'attr' ? getRule(isNotEmpty(selector2) ? `${selector1}${selector2},${selector1} ${selector2}` : selector1, css) : getRule(selector1, getRule(selector2 ?? ':root,:host', css));
-    },
-    transformCSS(name, css, mode, type, options = {}, set, defaults, selector) {
-        if (isNotEmpty(css)) {
-            const { cssLayer } = options;
-            if (type !== 'style') {
-                const colorSchemeOption = this.getColorSchemeOption(options, defaults);
-                css =
-                    mode === 'dark'
-                        ? colorSchemeOption.reduce((acc, { type, selector: _selector }) => {
-                            if (isNotEmpty(_selector)) {
-                                acc += _selector.includes('[CSS]') ? _selector.replace('[CSS]', css) : this.getSelectorRule(_selector, selector, type, css);
-                            }
-                            return acc;
-                        }, '')
-                        : getRule(selector ?? ':root,:host', css);
-            }
-            if (cssLayer) {
-                const layerOptions = {
-                    name: 'primeui',
-                    order: 'primeui'
-                };
-                isObject(cssLayer) && (layerOptions.name = resolve(cssLayer.name, { name, type }));
-                if (isNotEmpty(layerOptions.name)) {
-                    css = getRule(`@layer ${layerOptions.name}`, css);
-                    set?.layerNames(layerOptions.name);
-                }
-            }
-            return css;
-        }
-        return '';
-    }
+var themeUtils_default = {
+	regex: {
+		rules: {
+			class: {
+				pattern: /^\.([a-zA-Z][\w-]*)$/,
+				resolve(value) {
+					return {
+						type: "class",
+						selector: value,
+						matched: this.pattern.test(value.trim())
+					};
+				}
+			},
+			attr: {
+				pattern: /^\[(.*)\]$/,
+				resolve(value) {
+					return {
+						type: "attr",
+						selector: `:root${value},:host${value}`,
+						matched: this.pattern.test(value.trim())
+					};
+				}
+			},
+			media: {
+				pattern: /^@media (.*)$/,
+				resolve(value) {
+					return {
+						type: "media",
+						selector: value,
+						matched: this.pattern.test(value.trim())
+					};
+				}
+			},
+			system: {
+				pattern: /^system$/,
+				resolve(value) {
+					return {
+						type: "system",
+						selector: "@media (prefers-color-scheme: dark)",
+						matched: this.pattern.test(value.trim())
+					};
+				}
+			},
+			custom: { resolve(value) {
+				return {
+					type: "custom",
+					selector: value,
+					matched: true
+				};
+			} }
+		},
+		resolve(value) {
+			const rules = Object.keys(this.rules).filter((k) => k !== "custom").map((r) => this.rules[r]);
+			return [value].flat().map((v) => rules.map((r) => r.resolve(v)).find((rr) => rr.matched) ?? this.rules.custom.resolve(v));
+		}
+	},
+	_toVariables(theme, options) {
+		return toVariables_default(theme, { prefix: options?.prefix });
+	},
+	getCommon({ name = "", theme = {}, params, set, defaults }) {
+		const { preset, options } = theme;
+		let primitive_css, primitive_tokens, semantic_css, semantic_tokens, global_css, global_tokens, style;
+		if (isNotEmpty(preset) && options.transform !== "strict") {
+			const { primitive, semantic, extend } = preset;
+			const { colorScheme, ...sRest } = semantic || {};
+			const { colorScheme: eColorScheme, ...eRest } = extend || {};
+			const { dark, ...csRest } = colorScheme || {};
+			const { dark: eDark, ...ecsRest } = eColorScheme || {};
+			const prim_var = isNotEmpty(primitive) ? this._toVariables({ primitive }, options) : {};
+			const sRest_var = isNotEmpty(sRest) ? this._toVariables({ semantic: sRest }, options) : {};
+			const csRest_var = isNotEmpty(csRest) ? this._toVariables({ light: csRest }, options) : {};
+			const csDark_var = isNotEmpty(dark) ? this._toVariables({ dark }, options) : {};
+			const eRest_var = isNotEmpty(eRest) ? this._toVariables({ semantic: eRest }, options) : {};
+			const ecsRest_var = isNotEmpty(ecsRest) ? this._toVariables({ light: ecsRest }, options) : {};
+			const ecsDark_var = isNotEmpty(eDark) ? this._toVariables({ dark: eDark }, options) : {};
+			const [prim_css, prim_tokens] = [prim_var.declarations ?? "", prim_var.tokens];
+			const [sRest_css, sRest_tokens] = [sRest_var.declarations ?? "", sRest_var.tokens || []];
+			const [csRest_css, csRest_tokens] = [csRest_var.declarations ?? "", csRest_var.tokens || []];
+			const [csDark_css, csDark_tokens] = [csDark_var.declarations ?? "", csDark_var.tokens || []];
+			const [eRest_css, eRest_tokens] = [eRest_var.declarations ?? "", eRest_var.tokens || []];
+			const [ecsRest_css, ecsRest_tokens] = [ecsRest_var.declarations ?? "", ecsRest_var.tokens || []];
+			const [ecsDark_css, ecsDark_tokens] = [ecsDark_var.declarations ?? "", ecsDark_var.tokens || []];
+			primitive_css = this.transformCSS(name, prim_css, "light", "variable", options, set, defaults);
+			primitive_tokens = prim_tokens;
+			semantic_css = `${this.transformCSS(name, `${sRest_css}${csRest_css}`, "light", "variable", options, set, defaults)}${this.transformCSS(name, `${csDark_css}`, "dark", "variable", options, set, defaults)}`;
+			semantic_tokens = [.../* @__PURE__ */ new Set([
+				...sRest_tokens,
+				...csRest_tokens,
+				...csDark_tokens
+			])];
+			global_css = `${this.transformCSS(name, `${eRest_css}${ecsRest_css}color-scheme:light`, "light", "variable", options, set, defaults)}${this.transformCSS(name, `${ecsDark_css}color-scheme:dark`, "dark", "variable", options, set, defaults)}`;
+			global_tokens = [.../* @__PURE__ */ new Set([
+				...eRest_tokens,
+				...ecsRest_tokens,
+				...ecsDark_tokens
+			])];
+			style = resolve(preset.css, { dt });
+		}
+		return {
+			primitive: {
+				css: primitive_css,
+				tokens: primitive_tokens
+			},
+			semantic: {
+				css: semantic_css,
+				tokens: semantic_tokens
+			},
+			global: {
+				css: global_css,
+				tokens: global_tokens
+			},
+			style
+		};
+	},
+	getPreset({ name = "", preset = {}, options, params, set, defaults, selector }) {
+		let p_css, p_tokens, p_style;
+		if (isNotEmpty(preset) && options.transform !== "strict") {
+			const _name = name.replace("-directive", "");
+			const { colorScheme, extend, css, ...vRest } = preset;
+			const { colorScheme: eColorScheme, ...evRest } = extend || {};
+			const { dark, ...csRest } = colorScheme || {};
+			const { dark: ecsDark, ...ecsRest } = eColorScheme || {};
+			const vRest_var = isNotEmpty(vRest) ? this._toVariables({ [_name]: {
+				...vRest,
+				...evRest
+			} }, options) : {};
+			const csRest_var = isNotEmpty(csRest) ? this._toVariables({ [_name]: {
+				...csRest,
+				...ecsRest
+			} }, options) : {};
+			const csDark_var = isNotEmpty(dark) ? this._toVariables({ [_name]: {
+				...dark,
+				...ecsDark
+			} }, options) : {};
+			const [vRest_css, vRest_tokens] = [vRest_var.declarations ?? "", vRest_var.tokens || []];
+			const [csRest_css, csRest_tokens] = [csRest_var.declarations ?? "", csRest_var.tokens || []];
+			const [csDark_css, csDark_tokens] = [csDark_var.declarations ?? "", csDark_var.tokens || []];
+			p_css = `${this.transformCSS(_name, `${vRest_css}${csRest_css}`, "light", "variable", options, set, defaults, selector)}${this.transformCSS(_name, csDark_css, "dark", "variable", options, set, defaults, selector)}`;
+			p_tokens = [.../* @__PURE__ */ new Set([
+				...vRest_tokens,
+				...csRest_tokens,
+				...csDark_tokens
+			])];
+			p_style = resolve(css, { dt });
+		}
+		return {
+			css: p_css,
+			tokens: p_tokens,
+			style: p_style
+		};
+	},
+	getPresetC({ name = "", theme = {}, params, set, defaults }) {
+		const { preset, options } = theme;
+		const cPreset = preset?.components?.[name];
+		return this.getPreset({
+			name,
+			preset: cPreset,
+			options,
+			params,
+			set,
+			defaults
+		});
+	},
+	getPresetD({ name = "", theme = {}, params, set, defaults }) {
+		const dName = name.replace("-directive", "");
+		const { preset, options } = theme;
+		const dPreset = preset?.components?.[dName] || preset?.directives?.[dName];
+		return this.getPreset({
+			name: dName,
+			preset: dPreset,
+			options,
+			params,
+			set,
+			defaults
+		});
+	},
+	applyDarkColorScheme(options) {
+		return !(options.darkModeSelector === "none" || options.darkModeSelector === false);
+	},
+	getColorSchemeOption(options, defaults) {
+		return this.applyDarkColorScheme(options) ? this.regex.resolve(options.darkModeSelector === true ? defaults.options.darkModeSelector : options.darkModeSelector ?? defaults.options.darkModeSelector) : [];
+	},
+	getLayerOrder(name, options = {}, params, defaults) {
+		const { cssLayer } = options;
+		if (cssLayer) return `@layer ${resolve(cssLayer.order || cssLayer.name || "primeui", params)}`;
+		return "";
+	},
+	getCommonStyleSheet({ name = "", theme = {}, params, props = {}, set, defaults }) {
+		const common = this.getCommon({
+			name,
+			theme,
+			params,
+			set,
+			defaults
+		});
+		const _props = Object.entries(props).reduce((acc, [k, v]) => acc.push(`${k}="${v}"`) && acc, []).join(" ");
+		return Object.entries(common || {}).reduce((acc, [key, value]) => {
+			if (isObject(value) && Object.hasOwn(value, "css")) {
+				const _css = minifyCSS(value.css);
+				const id = `${key}-variables`;
+				acc.push(`<style type="text/css" data-primevue-style-id="${id}" ${_props}>${_css}</style>`);
+			}
+			return acc;
+		}, []).join("");
+	},
+	getStyleSheet({ name = "", theme = {}, params, props = {}, set, defaults }) {
+		const options = {
+			name,
+			theme,
+			params,
+			set,
+			defaults
+		};
+		const preset_css = (name.includes("-directive") ? this.getPresetD(options) : this.getPresetC(options))?.css;
+		const _props = Object.entries(props).reduce((acc, [k, v]) => acc.push(`${k}="${v}"`) && acc, []).join(" ");
+		return preset_css ? `<style type="text/css" data-primevue-style-id="${name}-variables" ${_props}>${minifyCSS(preset_css)}</style>` : "";
+	},
+	createTokens(obj = {}, defaults, parentKey = "", parentPath = "", tokens = {}) {
+		const computedFn = function(colorScheme, tokenPathMap = {}, stack = []) {
+			if (stack.includes(this.path)) {
+				console.warn(`Circular reference detected at ${this.path}`);
+				return {
+					colorScheme,
+					path: this.path,
+					paths: tokenPathMap,
+					value: void 0
+				};
+			}
+			stack.push(this.path);
+			tokenPathMap["name"] = this.path;
+			tokenPathMap["binding"] ||= {};
+			let computedValue = this.value;
+			if (typeof this.value === "string" && EXPR_REGEX.test(this.value)) {
+				const _val = this.value.trim().replace(EXPR_REGEX, (v) => {
+					const refPath = v.slice(1, -1);
+					const refToken = this.tokens[refPath];
+					if (!refToken) {
+						console.warn(`Token not found for path: ${refPath}`);
+						return `__UNRESOLVED__`;
+					}
+					const computed = refToken.computed(colorScheme, tokenPathMap, stack);
+					if (Array.isArray(computed) && computed.length === 2) return `light-dark(${computed[0].value},${computed[1].value})`;
+					else return computed?.value ?? `__UNRESOLVED__`;
+				});
+				computedValue = CALC_REGEX.test(_val.replace(VAR_REGEX, "0")) ? `calc(${_val})` : _val;
+			}
+			if (isEmpty(tokenPathMap["binding"])) delete tokenPathMap["binding"];
+			stack.pop();
+			return {
+				colorScheme,
+				path: this.path,
+				paths: tokenPathMap,
+				value: computedValue.includes("__UNRESOLVED__") ? void 0 : computedValue
+			};
+		};
+		const traverse = (obj, parentKey, parentPath) => {
+			Object.entries(obj).forEach(([key, value]) => {
+				const currentKey = matchRegex(key, defaults.variable.excludedKeyRegex) ? parentKey : parentKey ? `${parentKey}.${toTokenKey(key)}` : toTokenKey(key);
+				const currentPath = parentPath ? `${parentPath}.${key}` : key;
+				if (isObject(value)) traverse(value, currentKey, currentPath);
+				else {
+					if (!tokens[currentKey]) tokens[currentKey] = {
+						paths: [],
+						computed: (colorScheme, tokenPathMap = {}, stack = []) => {
+							if (tokens[currentKey].paths.length === 1) return tokens[currentKey].paths[0].computed(tokens[currentKey].paths[0].scheme, tokenPathMap["binding"], stack);
+							else if (colorScheme && colorScheme !== "none") for (let i = 0; i < tokens[currentKey].paths.length; i++) {
+								const p = tokens[currentKey].paths[i];
+								if (p.scheme === colorScheme) return p.computed(colorScheme, tokenPathMap["binding"], stack);
+							}
+							return tokens[currentKey].paths.map((p) => p.computed(p.scheme, tokenPathMap[p.scheme], stack));
+						}
+					};
+					tokens[currentKey].paths.push({
+						path: currentPath,
+						value,
+						scheme: currentPath.includes("colorScheme.light") ? "light" : currentPath.includes("colorScheme.dark") ? "dark" : "none",
+						computed: computedFn,
+						tokens
+					});
+				}
+			});
+		};
+		traverse(obj, parentKey, parentPath);
+		return tokens;
+	},
+	getTokenValue(tokens, path, defaults) {
+		const normalizePath = (str) => {
+			return str.split(".").filter((s) => !matchRegex(s.toLowerCase(), defaults.variable.excludedKeyRegex)).join(".");
+		};
+		const token = normalizePath(path);
+		const colorScheme = path.includes("colorScheme.light") ? "light" : path.includes("colorScheme.dark") ? "dark" : void 0;
+		const computedValues = [tokens[token]?.computed(colorScheme)].flat().filter((computed) => computed);
+		return computedValues.length === 1 ? computedValues[0].value : computedValues.reduce((acc = {}, computed) => {
+			const { colorScheme: cs, ...rest } = computed;
+			acc[cs] = rest;
+			return acc;
+		}, void 0);
+	},
+	getSelectorRule(selector1, selector2, type, css) {
+		return type === "class" || type === "attr" ? getRule(isNotEmpty(selector2) ? `${selector1}${selector2},${selector1} ${selector2}` : selector1, css) : getRule(selector1, getRule(selector2 ?? ":root,:host", css));
+	},
+	transformCSS(name, css, mode, type, options = {}, set, defaults, selector) {
+		if (isNotEmpty(css)) {
+			const { cssLayer } = options;
+			if (type !== "style") {
+				const colorSchemeOption = this.getColorSchemeOption(options, defaults);
+				css = mode === "dark" ? colorSchemeOption.reduce((acc, { type, selector: _selector }) => {
+					if (isNotEmpty(_selector)) acc += _selector.includes("[CSS]") ? _selector.replace("[CSS]", css) : this.getSelectorRule(_selector, selector, type, css);
+					return acc;
+				}, "") : getRule(selector ?? ":root,:host", css);
+			}
+			if (cssLayer) {
+				const layerOptions = {
+					name: "primeui",
+					order: "primeui"
+				};
+				isObject(cssLayer) && (layerOptions.name = resolve(cssLayer.name, {
+					name,
+					type
+				}));
+				if (isNotEmpty(layerOptions.name)) {
+					css = getRule(`@layer ${layerOptions.name}`, css);
+					set?.layerNames(layerOptions.name);
+				}
+			}
+			return css;
+		}
+		return "";
+	}
 };
-
-var Theme = {
-    defaults: {
-        variable: {
-            prefix: 'h',
-            selector: ':root,:host',
-            excludedKeyRegex: /^(primitive|semantic|components|directives|variables|colorscheme|light|dark|common|root|states|extend|css)$/gi
-        },
-        options: {
-            prefix: 'h',
-            darkModeSelector: 'system',
-            cssLayer: false
-        }
-    },
-    _theme: undefined,
-    _layerNames: new Set(),
-    _loadedStyleNames: new Set(),
-    _loadingStyles: new Set(),
-    _tokens: {},
-    update(newValues = {}) {
-        const { theme } = newValues;
-        if (theme) {
-            this._theme = {
-                ...theme,
-                options: {
-                    ...this.defaults.options,
-                    ...theme.options
-                }
-            };
-            this._tokens = ThemeUtils.createTokens(this.preset, this.defaults);
-            this.clearLoadedStyleNames();
-        }
-    },
-    get theme() {
-        return this._theme;
-    },
-    get preset() {
-        return this.theme?.preset || {};
-    },
-    get options() {
-        return this.theme?.options || {};
-    },
-    get tokens() {
-        return this._tokens;
-    },
-    getTheme() {
-        return this.theme;
-    },
-    setTheme(newValue) {
-        this.update({ theme: newValue });
-        ThemeService.emit('theme:change', newValue);
-    },
-    getPreset() {
-        return this.preset;
-    },
-    setPreset(newValue) {
-        this._theme = { ...this.theme, preset: newValue };
-        this._tokens = ThemeUtils.createTokens(newValue, this.defaults);
-        this.clearLoadedStyleNames();
-        ThemeService.emit('preset:change', newValue);
-        ThemeService.emit('theme:change', this.theme);
-    },
-    getOptions() {
-        return this.options;
-    },
-    setOptions(newValue) {
-        this._theme = { ...this.theme, options: newValue };
-        this.clearLoadedStyleNames();
-        ThemeService.emit('options:change', newValue);
-        ThemeService.emit('theme:change', this.theme);
-    },
-    getLayerNames() {
-        return [...this._layerNames];
-    },
-    setLayerNames(layerName) {
-        this._layerNames.add(layerName);
-    },
-    getLoadedStyleNames() {
-        return this._loadedStyleNames;
-    },
-    isStyleNameLoaded(name) {
-        return this._loadedStyleNames.has(name);
-    },
-    setLoadedStyleName(name) {
-        this._loadedStyleNames.add(name);
-    },
-    deleteLoadedStyleName(name) {
-        this._loadedStyleNames.delete(name);
-    },
-    clearLoadedStyleNames() {
-        this._loadedStyleNames.clear();
-    },
-    getTokenValue(tokenPath) {
-        return ThemeUtils.getTokenValue(this.tokens, tokenPath, this.defaults);
-    },
-    getCommon(name = '', params) {
-        return ThemeUtils.getCommon({ name, theme: this.theme, params, defaults: this.defaults, set: { layerNames: this.setLayerNames.bind(this) } });
-    },
-    getComponent(name = '', params) {
-        const options = { name, theme: this.theme, params, defaults: this.defaults, set: { layerNames: this.setLayerNames.bind(this) } };
-        return ThemeUtils.getPresetC(options);
-    },
-    // @deprecated - use getComponent instead
-    getDirective(name = '', params) {
-        const options = { name, theme: this.theme, params, defaults: this.defaults, set: { layerNames: this.setLayerNames.bind(this) } };
-        return ThemeUtils.getPresetD(options);
-    },
-    getCustomPreset(name = '', preset, selector, params) {
-        const options = { name, preset, options: this.options, selector, params, defaults: this.defaults, set: { layerNames: this.setLayerNames.bind(this) } };
-        return ThemeUtils.getPreset(options);
-    },
-    getLayerOrderCSS(name = '') {
-        return ThemeUtils.getLayerOrder(name, this.options, { names: this.getLayerNames() }, this.defaults);
-    },
-    transformCSS(name = '', css, type = 'style', mode) {
-        return ThemeUtils.transformCSS(name, css, mode, type, this.options, { layerNames: this.setLayerNames.bind(this) }, this.defaults);
-    },
-    getCommonStyleSheet(name = '', params, props = {}) {
-        return ThemeUtils.getCommonStyleSheet({ name, theme: this.theme, params, props, defaults: this.defaults, set: { layerNames: this.setLayerNames.bind(this) } });
-    },
-    getStyleSheet(name, params, props = {}) {
-        return ThemeUtils.getStyleSheet({ name, theme: this.theme, params, props, defaults: this.defaults, set: { layerNames: this.setLayerNames.bind(this) } });
-    },
-    onStyleMounted(name) {
-        this._loadingStyles.add(name);
-    },
-    onStyleUpdated(name) {
-        this._loadingStyles.add(name);
-    },
-    onStyleLoaded(event, { name }) {
-        if (this._loadingStyles.size) {
-            this._loadingStyles.delete(name);
-            ThemeService.emit(`theme:${name}:load`, event); // Exp: ThemeService.emit('theme:panel-style:load', event)
-            !this._loadingStyles.size && ThemeService.emit('theme:load');
-        }
-    }
+var config_default = {
+	defaults: {
+		variable: {
+			prefix: "h",
+			selector: ":root,:host",
+			excludedKeyRegex: /^(primitive|semantic|components|directives|variables|colorscheme|light|dark|common|root|states|extend|css)$/gi
+		},
+		options: {
+			prefix: "h",
+			darkModeSelector: "system",
+			cssLayer: false
+		}
+	},
+	_theme: void 0,
+	_layerNames: /* @__PURE__ */ new Set(),
+	_loadedStyleNames: /* @__PURE__ */ new Set(),
+	_loadingStyles: /* @__PURE__ */ new Set(),
+	_tokens: {},
+	update(newValues = {}) {
+		const { theme } = newValues;
+		if (theme) {
+			this._theme = {
+				...theme,
+				options: {
+					...this.defaults.options,
+					...theme.options
+				}
+			};
+			this._tokens = themeUtils_default.createTokens(this.preset, this.defaults);
+			this.clearLoadedStyleNames();
+		}
+	},
+	get theme() {
+		return this._theme;
+	},
+	get preset() {
+		return this.theme?.preset || {};
+	},
+	get options() {
+		return this.theme?.options || {};
+	},
+	get tokens() {
+		return this._tokens;
+	},
+	getTheme() {
+		return this.theme;
+	},
+	setTheme(newValue) {
+		this.update({ theme: newValue });
+		ThemeService.emit("theme:change", newValue);
+	},
+	getPreset() {
+		return this.preset;
+	},
+	setPreset(newValue) {
+		this._theme = {
+			...this.theme,
+			preset: newValue
+		};
+		this._tokens = themeUtils_default.createTokens(newValue, this.defaults);
+		this.clearLoadedStyleNames();
+		ThemeService.emit("preset:change", newValue);
+		ThemeService.emit("theme:change", this.theme);
+	},
+	getOptions() {
+		return this.options;
+	},
+	setOptions(newValue) {
+		this._theme = {
+			...this.theme,
+			options: newValue
+		};
+		this.clearLoadedStyleNames();
+		ThemeService.emit("options:change", newValue);
+		ThemeService.emit("theme:change", this.theme);
+	},
+	getLayerNames() {
+		return [...this._layerNames];
+	},
+	setLayerNames(layerName) {
+		this._layerNames.add(layerName);
+	},
+	getLoadedStyleNames() {
+		return this._loadedStyleNames;
+	},
+	isStyleNameLoaded(name) {
+		return this._loadedStyleNames.has(name);
+	},
+	setLoadedStyleName(name) {
+		this._loadedStyleNames.add(name);
+	},
+	deleteLoadedStyleName(name) {
+		this._loadedStyleNames.delete(name);
+	},
+	clearLoadedStyleNames() {
+		this._loadedStyleNames.clear();
+	},
+	getTokenValue(tokenPath) {
+		return themeUtils_default.getTokenValue(this.tokens, tokenPath, this.defaults);
+	},
+	getCommon(name = "", params) {
+		return themeUtils_default.getCommon({
+			name,
+			theme: this.theme,
+			params,
+			defaults: this.defaults,
+			set: { layerNames: this.setLayerNames.bind(this) }
+		});
+	},
+	getComponent(name = "", params) {
+		const options = {
+			name,
+			theme: this.theme,
+			params,
+			defaults: this.defaults,
+			set: { layerNames: this.setLayerNames.bind(this) }
+		};
+		return themeUtils_default.getPresetC(options);
+	},
+	getDirective(name = "", params) {
+		const options = {
+			name,
+			theme: this.theme,
+			params,
+			defaults: this.defaults,
+			set: { layerNames: this.setLayerNames.bind(this) }
+		};
+		return themeUtils_default.getPresetD(options);
+	},
+	getCustomPreset(name = "", preset, selector, params) {
+		const options = {
+			name,
+			preset,
+			options: this.options,
+			selector,
+			params,
+			defaults: this.defaults,
+			set: { layerNames: this.setLayerNames.bind(this) }
+		};
+		return themeUtils_default.getPreset(options);
+	},
+	getLayerOrderCSS(name = "") {
+		return themeUtils_default.getLayerOrder(name, this.options, { names: this.getLayerNames() }, this.defaults);
+	},
+	transformCSS(name = "", css, type = "style", mode) {
+		return themeUtils_default.transformCSS(name, css, mode, type, this.options, { layerNames: this.setLayerNames.bind(this) }, this.defaults);
+	},
+	getCommonStyleSheet(name = "", params, props = {}) {
+		return themeUtils_default.getCommonStyleSheet({
+			name,
+			theme: this.theme,
+			params,
+			props,
+			defaults: this.defaults,
+			set: { layerNames: this.setLayerNames.bind(this) }
+		});
+	},
+	getStyleSheet(name, params, props = {}) {
+		return themeUtils_default.getStyleSheet({
+			name,
+			theme: this.theme,
+			params,
+			props,
+			defaults: this.defaults,
+			set: { layerNames: this.setLayerNames.bind(this) }
+		});
+	},
+	onStyleMounted(name) {
+		this._loadingStyles.add(name);
+	},
+	onStyleUpdated(name) {
+		this._loadingStyles.add(name);
+	},
+	onStyleLoaded(event, { name }) {
+		if (this._loadingStyles.size) {
+			this._loadingStyles.delete(name);
+			ThemeService.emit(`theme:${name}:load`, event);
+			!this._loadingStyles.size && ThemeService.emit("theme:load");
+		}
+	}
 };
-
 function updatePreset(...presets) {
-    const newPreset = deepMerge(Theme.getPreset(), ...presets);
-    Theme.setPreset(newPreset);
-    return newPreset;
+	const newPreset = deepMerge(config_default.getPreset(), ...presets);
+	config_default.setPreset(newPreset);
+	return newPreset;
 }
-
 function updatePrimaryPalette(palette) {
-    return $t().primaryPalette(palette).update().preset;
+	return $t().primaryPalette(palette).update().preset;
 }
-
 function updateSurfacePalette(palette) {
-    return $t().surfacePalette(palette).update().preset;
+	return $t().surfacePalette(palette).update().preset;
 }
-
 function usePreset(...presets) {
-    const newPreset = deepMerge(...presets);
-    Theme.setPreset(newPreset);
-    return newPreset;
+	const newPreset = deepMerge(...presets);
+	config_default.setPreset(newPreset);
+	return newPreset;
 }
-
 function useTheme(theme) {
-    return $t(theme).update({ mergePresets: false });
-}
-
-class StyleSheet {
-    _styles;
-    _attrs;
-    constructor({ attrs } = {}) {
-        this._styles = new Map();
-        this._attrs = attrs || {};
-    }
-    get(key) {
-        return this._styles.get(key);
-    }
-    has(key) {
-        return this._styles.has(key);
-    }
-    delete(key) {
-        this._styles.delete(key);
-    }
-    clear() {
-        this._styles.clear();
-    }
-    add(key, css) {
-        if (isNotEmpty(css)) {
-            const meta = {
-                name: key,
-                css,
-                attrs: this._attrs,
-                markup: createStyleMarkup(css, this._attrs)
-            };
-            this._styles.set(key, {
-                ...meta,
-                element: this.createStyleElement(meta)
-            });
-        }
-    }
-    update() {
-        // @todo
-    }
-    getStyles() {
-        return this._styles;
-    }
-    getAllCSS() {
-        return [...this._styles.values()].map((style) => style.css).filter(String);
-    }
-    getAllMarkup() {
-        return [...this._styles.values()].map((style) => style.markup).filter(String);
-    }
-    getAllElements() {
-        return [...this._styles.values()].map((style) => style.element);
-    }
-    /**
-     * Used to create a style element.
-     *
-     * @param {StyleMeta} meta
-     * @returns {HTMLStyleElement | undefined}
-     */
-    createStyleElement(meta = {}) {
-        return undefined;
-    }
+	return $t(theme).update({ mergePresets: false });
 }
+var StyleSheet = class {
+	_styles;
+	_attrs;
+	constructor({ attrs } = {}) {
+		this._styles = /* @__PURE__ */ new Map();
+		this._attrs = attrs || {};
+	}
+	get(key) {
+		return this._styles.get(key);
+	}
+	has(key) {
+		return this._styles.has(key);
+	}
+	delete(key) {
+		this._styles.delete(key);
+	}
+	clear() {
+		this._styles.clear();
+	}
+	add(key, css) {
+		if (isNotEmpty(css)) {
+			const meta = {
+				name: key,
+				css,
+				attrs: this._attrs,
+				markup: createStyleMarkup(css, this._attrs)
+			};
+			this._styles.set(key, {
+				...meta,
+				element: this.createStyleElement(meta)
+			});
+		}
+	}
+	update() {}
+	getStyles() {
+		return this._styles;
+	}
+	getAllCSS() {
+		return [...this._styles.values()].map((style) => style.css).filter(String);
+	}
+	getAllMarkup() {
+		return [...this._styles.values()].map((style) => style.markup).filter(String);
+	}
+	getAllElements() {
+		return [...this._styles.values()].map((style) => style.element);
+	}
+	createStyleElement(meta = {}) {}
+};
+export { $dt, $t, CALC_REGEX, EXPR_REGEX, StyleSheet, config_default as Theme, ThemeService, themeUtils_default as ThemeUtils, VAR_REGEX, css, definePreset, dt, dtwt, evaluateDtExpressions, getComputedValue, getRule, getVariableName, getVariableValue, hasOddBraces, merge, mix_default as mix, palette_default as palette, setProperty, shade_default as shade, tint_default as tint, toNormalizePrefix, toNormalizeVariable, toTokenKey, toUnit, toValue, toVariables_default as toVariables, updatePreset, updatePrimaryPalette, updateSurfacePalette, usePreset, useTheme };
 
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { $dt, $t, CALC_REGEX, EXPR_REGEX, StyleSheet, Theme, ThemeService, ThemeUtils, VAR_REGEX, css, definePreset, dt, dtwt, evaluateDtExpressions, getComputedValue, getRule, getVariableName, getVariableValue, hasOddBraces, merge, mix, palette, setProperty, shade, tint, toNormalizePrefix, toNormalizeVariable, toTokenKey, toUnit, toValue, toVariables, updatePreset, updatePrimaryPalette, updateSurfacePalette, usePreset, useTheme };
-//# sourceMappingURL=gravionlabs-helix-core-uix-styled.mjs.map
+//# sourceMappingURL=gravionlabs-helix-core-uix-styled.mjs.map