@shohojdhara/atomix 0.3.6 → 0.3.8

package/dist/theme.js

@@ -1,3 +1,5 @@
+import { loadAtomixConfig } from "../lib/config/loader";
+
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 
 import { createContext, useRef, useEffect, useCallback, useMemo, useState, useContext, Component } from "react";
@@ -319,6 +321,14 @@ import { createContext, useRef, useEffect, useCallback, useMemo, useState, useCo
     };
 }
 
+const tokens =  Object.freeze( Object.defineProperty({
+    __proto__: null,
+    createTokens: createTokens,
+    defaultTokens: defaultTokens
+}, Symbol.toStringTag, {
+    value: "Module"
+}));
+
 /**
  * CSS Variable Generator
  *
@@ -375,1521 +385,842 @@ import { createContext, useRef, useEffect, useCallback, useMemo, useState, useCo
     });
 }
 
-var commonjsGlobal = "undefined" != typeof globalThis ? globalThis : "undefined" != typeof window ? window : "undefined" != typeof global ? global : "undefined" != typeof self ? self : {};
+/**
+ * Theme System Error Handling
+ *
+ * Centralized error handling for the Atomix theme system.
+ * Provides custom error classes and logging utilities.
+ */
+/**
+ * Theme error codes
+ */ var ThemeErrorCode, LogLevel;
 
-function getDefaultExportFromCjs(x) {
-    return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x.default : x;
-}
+!function(ThemeErrorCode) {
+    /** Theme not found in registry */
+    ThemeErrorCode.THEME_NOT_FOUND = "THEME_NOT_FOUND", 
+    /** Theme failed to load */
+    ThemeErrorCode.THEME_LOAD_FAILED = "THEME_LOAD_FAILED", 
+    /** Theme validation failed */
+    ThemeErrorCode.THEME_VALIDATION_FAILED = "THEME_VALIDATION_FAILED", 
+    /** Configuration loading failed */
+    ThemeErrorCode.CONFIG_LOAD_FAILED = "CONFIG_LOAD_FAILED", 
+    /** Configuration validation failed */
+    ThemeErrorCode.CONFIG_VALIDATION_FAILED = "CONFIG_VALIDATION_FAILED", 
+    /** Circular dependency detected */
+    ThemeErrorCode.CIRCULAR_DEPENDENCY = "CIRCULAR_DEPENDENCY", 
+    /** Missing dependency */
+    ThemeErrorCode.MISSING_DEPENDENCY = "MISSING_DEPENDENCY", 
+    /** Storage operation failed */
+    ThemeErrorCode.STORAGE_ERROR = "STORAGE_ERROR", 
+    /** Invalid theme name */
+    ThemeErrorCode.INVALID_THEME_NAME = "INVALID_THEME_NAME", 
+    /** CSS injection failed */
+    ThemeErrorCode.CSS_INJECTION_FAILED = "CSS_INJECTION_FAILED", 
+    /** Unknown error */
+    ThemeErrorCode.UNKNOWN_ERROR = "UNKNOWN_ERROR";
+}(ThemeErrorCode || (ThemeErrorCode = {}));
 
-var fails$9 = function(exec) {
-    try {
-        return !!exec();
-    } catch (error) {
-        return !0;
+/**
+ * Custom error class for theme-related errors
+ */
+class ThemeError extends Error {
+    constructor(message, code = ThemeErrorCode.UNKNOWN_ERROR, context) {
+        super(message), this.name = "ThemeError", this.code = code, this.context = context, 
+        this.timestamp = Date.now(), 
+        // Maintains proper stack trace for where our error was thrown (only available on V8)
+        Error.captureStackTrace && Error.captureStackTrace(this, ThemeError);
     }
-}, functionBindNative = !fails$9((function() {
-    // eslint-disable-next-line es/no-function-prototype-bind -- safe
-    var test = function() {/* empty */}.bind();
-    // eslint-disable-next-line no-prototype-builtins -- safe
-        return "function" != typeof test || test.hasOwnProperty("prototype");
-})), NATIVE_BIND$3 = functionBindNative, FunctionPrototype$1 = Function.prototype, call$5 = FunctionPrototype$1.call, uncurryThisWithBind = NATIVE_BIND$3 && FunctionPrototype$1.bind.bind(call$5, call$5), functionUncurryThis = NATIVE_BIND$3 ? uncurryThisWithBind : function(fn) {
-    return function() {
-        return call$5.apply(fn, arguments);
-    };
-}, objectIsPrototypeOf = functionUncurryThis({}.isPrototypeOf), check = function(it) {
-    return it && it.Math === Math && it;
-}, globalThis_1 = 
-// eslint-disable-next-line es/no-global-this -- safe
-check("object" == typeof globalThis && globalThis) || check("object" == typeof window && window) || 
-// eslint-disable-next-line no-restricted-globals -- safe
-check("object" == typeof self && self) || check("object" == typeof commonjsGlobal && commonjsGlobal) || check("object" == typeof commonjsGlobal && commonjsGlobal) || 
-// eslint-disable-next-line no-new-func -- fallback
-function() {
-    return this;
-}() || Function("return this")(), NATIVE_BIND$2 = functionBindNative, FunctionPrototype = Function.prototype, apply$1 = FunctionPrototype.apply, call$4 = FunctionPrototype.call, functionApply = "object" == typeof Reflect && Reflect.apply || (NATIVE_BIND$2 ? call$4.bind(apply$1) : function() {
-    return call$4.apply(apply$1, arguments);
-}), uncurryThis$7 = functionUncurryThis, toString$3 = uncurryThis$7({}.toString), stringSlice = uncurryThis$7("".slice), classofRaw$2 = function(it) {
-    return stringSlice(toString$3(it), 8, -1);
-}, classofRaw$1 = classofRaw$2, uncurryThis$6 = functionUncurryThis, functionUncurryThisClause = function(fn) {
-    // Nashorn bug:
-    //   https://github.com/zloirock/core-js/issues/1128
-    //   https://github.com/zloirock/core-js/issues/1130
-    if ("Function" === classofRaw$1(fn)) return uncurryThis$6(fn);
-}, documentAll = "object" == typeof document && document.all, isCallable$8 = void 0 === documentAll && void 0 !== documentAll ? function(argument) {
-    return "function" == typeof argument || argument === documentAll;
-} : function(argument) {
-    return "function" == typeof argument;
-}, objectGetOwnPropertyDescriptor = {}, descriptors = !fails$9((function() {
-    // eslint-disable-next-line es/no-object-defineproperty -- required for testing
-    return 7 !== Object.defineProperty({}, 1, {
-        get: function() {
-            return 7;
-        }
-    })[1];
-})), NATIVE_BIND$1 = functionBindNative, call$3 = Function.prototype.call, functionCall = NATIVE_BIND$1 ? call$3.bind(call$3) : function() {
-    return call$3.apply(call$3, arguments);
-}, objectPropertyIsEnumerable = {}, $propertyIsEnumerable = {}.propertyIsEnumerable, getOwnPropertyDescriptor$1 = Object.getOwnPropertyDescriptor, NASHORN_BUG = getOwnPropertyDescriptor$1 && !$propertyIsEnumerable.call({
-    1: 2
-}, 1);
-
-// `Object.prototype.propertyIsEnumerable` method implementation
-// https://tc39.es/ecma262/#sec-object.prototype.propertyisenumerable
-objectPropertyIsEnumerable.f = NASHORN_BUG ? function(V) {
-    var descriptor = getOwnPropertyDescriptor$1(this, V);
-    return !!descriptor && descriptor.enumerable;
-} : $propertyIsEnumerable;
-
-var match, version, createPropertyDescriptor$2 = function(bitmap, value) {
-    return {
-        enumerable: !(1 & bitmap),
-        configurable: !(2 & bitmap),
-        writable: !(4 & bitmap),
-        value: value
-    };
-}, fails$6 = fails$9, classof$4 = classofRaw$2, $Object$3 = Object, split = functionUncurryThis("".split), indexedObject = fails$6((function() {
-    // throws an error in rhino, see https://github.com/mozilla/rhino/issues/346
-    // eslint-disable-next-line no-prototype-builtins -- safe
-    return !$Object$3("z").propertyIsEnumerable(0);
-})) ? function(it) {
-    return "String" === classof$4(it) ? split(it, "") : $Object$3(it);
-} : $Object$3, isNullOrUndefined$2 = function(it) {
-    return null == it;
-}, isNullOrUndefined$1 = isNullOrUndefined$2, $TypeError$7 = TypeError, requireObjectCoercible$3 = function(it) {
-    if (isNullOrUndefined$1(it)) throw new $TypeError$7("Can't call method on " + it);
-    return it;
-}, IndexedObject$1 = indexedObject, requireObjectCoercible$2 = requireObjectCoercible$3, toIndexedObject$2 = function(it) {
-    return IndexedObject$1(requireObjectCoercible$2(it));
-}, isCallable$7 = isCallable$8, isObject$6 = function(it) {
-    return "object" == typeof it ? null !== it : isCallable$7(it);
-}, path$3 = {}, path$2 = path$3, globalThis$b = globalThis_1, isCallable$6 = isCallable$8, aFunction = function(variable) {
-    return isCallable$6(variable) ? variable : void 0;
-}, navigator$1 = globalThis_1.navigator, userAgent$2 = navigator$1 && navigator$1.userAgent, environmentUserAgent = userAgent$2 ? String(userAgent$2) : "", globalThis$9 = globalThis_1, userAgent$1 = environmentUserAgent, process$1 = globalThis$9.process, Deno$1 = globalThis$9.Deno, versions = process$1 && process$1.versions || Deno$1 && Deno$1.version, v8 = versions && versions.v8;
+    /**
+   * Convert error to JSON for logging
+   */    toJSON() {
+        return {
+            name: this.name,
+            message: this.message,
+            code: this.code,
+            context: this.context,
+            timestamp: this.timestamp,
+            stack: this.stack
+        };
+    }
+}
 
-v8 && (
-// in old Chrome, versions of V8 isn't V8 = Chrome / 10
-// but their correct versions are not interesting for us
-version = (match = v8.split("."))[0] > 0 && match[0] < 4 ? 1 : +(match[0] + match[1])), 
-// BrowserFS NodeJS `process` polyfill incorrectly set `.v8` to `0.0`
-// so check `userAgent` even if `.v8` exists, but 0
-!version && userAgent$1 && (!(match = userAgent$1.match(/Edge\/(\d+)/)) || match[1] >= 74) && (match = userAgent$1.match(/Chrome\/(\d+)/)) && (version = +match[1]);
+/**
+ * Log level
+ */ !function(LogLevel) {
+    LogLevel[LogLevel.ERROR = 0] = "ERROR", LogLevel[LogLevel.WARN = 1] = "WARN", LogLevel[LogLevel.INFO = 2] = "INFO", 
+    LogLevel[LogLevel.DEBUG = 3] = "DEBUG";
+}(LogLevel || (LogLevel = {}));
 
-var environmentV8Version = version, V8_VERSION = environmentV8Version, fails$5 = fails$9, $String$3 = globalThis_1.String, symbolConstructorDetection = !!Object.getOwnPropertySymbols && !fails$5((function() {
-    var symbol = Symbol("symbol detection");
-    // Chrome 38 Symbol has incorrect toString conversion
-    // `get-own-property-symbols` polyfill symbols converted to object are not Symbol instances
-    // nb: Do not call `String` directly to avoid this being optimized out to `symbol+''` which will,
-    // of course, fail.
-        return !$String$3(symbol) || !(Object(symbol) instanceof Symbol) || 
-    // Chrome 38-40 symbols are not inherited from DOM collections prototypes to instances
-    !Symbol.sham && V8_VERSION && V8_VERSION < 41;
-})), useSymbolAsUid = symbolConstructorDetection && !Symbol.sham && "symbol" == typeof Symbol.iterator, isCallable$5 = isCallable$8, isPrototypeOf$2 = objectIsPrototypeOf, $Object$2 = Object, isSymbol$2 = useSymbolAsUid ? function(it) {
-    return "symbol" == typeof it;
-} : function(it) {
-    var $Symbol = function(namespace, method) {
-        return arguments.length < 2 ? aFunction(path$2[namespace]) || aFunction(globalThis$b[namespace]) : path$2[namespace] && path$2[namespace][method] || globalThis$b[namespace] && globalThis$b[namespace][method];
-    }("Symbol");
-    return isCallable$5($Symbol) && isPrototypeOf$2($Symbol.prototype, $Object$2(it));
-}, $String$2 = String, isCallable$4 = isCallable$8, $TypeError$6 = TypeError, aCallable$3 = function(argument) {
-    if (isCallable$4(argument)) return argument;
-    throw new $TypeError$6(function(argument) {
-        try {
-            return $String$2(argument);
-        } catch (error) {
-            return "Object";
-        }
-    }(argument) + " is not a function");
-}, aCallable$2 = aCallable$3, isNullOrUndefined = isNullOrUndefined$2, call$2 = functionCall, isCallable$3 = isCallable$8, isObject$5 = isObject$6, $TypeError$5 = TypeError, sharedStore = {
-    exports: {}
-}, globalThis$7 = globalThis_1, defineProperty = Object.defineProperty, globalThis$6 = globalThis_1, store$1 = sharedStore.exports = globalThis$6["__core-js_shared__"] || function(key, value) {
-    try {
-        defineProperty(globalThis$7, key, {
-            value: value,
-            configurable: !0,
-            writable: !0
-        });
-    } catch (error) {
-        globalThis$7[key] = value;
+/**
+ * Theme Logger
+ *
+ * Centralized logging for the theme system.
+ * Replaces console statements with structured logging.
+ */
+class ThemeLogger {
+    constructor(config = {}) {
+        this.config = {
+            level: config.level ?? ("undefined" != typeof process && "production" === process.env?.NODE_ENV ? LogLevel.WARN : LogLevel.INFO),
+            enableConsole: config.enableConsole ?? !0,
+            onError: config.onError,
+            onWarn: config.onWarn,
+            onInfo: config.onInfo,
+            onDebug: config.onDebug
+        };
     }
-    return value;
-}("__core-js_shared__", {});
+    /**
+   * Log an error
+   */    error(message, error, context) {
+        if (this.config.level < LogLevel.ERROR) return;
+        const errorObj = error instanceof Error ? error : new Error(message), themeError = error instanceof ThemeError ? error : new ThemeError(message, ThemeErrorCode.UNKNOWN_ERROR, context);
+        this.config.enableConsole && console.error(`[ThemeError] ${message}`, {
+            error: errorObj,
+            context: {
+                ...context,
+                ...themeError.context
+            },
+            code: themeError.code
+        }), this.config.onError?.(themeError, context);
+    }
+    /**
+   * Log a warning
+   */    warn(message, context) {
+        this.config.level < LogLevel.WARN || (this.config.enableConsole && console.warn(`[ThemeWarning] ${message}`, context || {}), 
+        this.config.onWarn?.(message, context));
+    }
+    /**
+   * Log an info message
+   */    info(message, context) {
+        this.config.level < LogLevel.INFO || (this.config.enableConsole && console.info(`[ThemeInfo] ${message}`, context || {}), 
+        this.config.onInfo?.(message, context));
+    }
+    /**
+   * Log a debug message
+   */    debug(message, context) {
+        this.config.level < LogLevel.DEBUG || (this.config.enableConsole, this.config.onDebug?.(message, context));
+    }
+}
 
-/* eslint-disable es/no-symbol -- required for testing */ (store$1.versions || (store$1.versions = [])).push({
-    version: "3.43.0",
-    mode: "pure",
-    copyright: "© 2014-2025 Denis Pushkarev (zloirock.ru)",
-    license: "https://github.com/zloirock/core-js/blob/v3.43.0/LICENSE",
-    source: "https://github.com/zloirock/core-js"
-});
+/**
+ * Default logger instance
+ */ let defaultLogger = null;
 
-var key, value, store = sharedStore.exports, requireObjectCoercible$1 = requireObjectCoercible$3, $Object$1 = Object, toObject$2 = function(argument) {
-    return $Object$1(requireObjectCoercible$1(argument));
-}, toObject$1 = toObject$2, hasOwnProperty = functionUncurryThis({}.hasOwnProperty), hasOwnProperty_1 = Object.hasOwn || function(it, key) {
-    return hasOwnProperty(toObject$1(it), key);
-}, uncurryThis$3 = functionUncurryThis, id = 0, postfix = Math.random(), toString$2 = uncurryThis$3(1.1.toString), hasOwn$2 = hasOwnProperty_1, NATIVE_SYMBOL = symbolConstructorDetection, USE_SYMBOL_AS_UID = useSymbolAsUid, Symbol$1 = globalThis_1.Symbol, WellKnownSymbolsStore = store[key = "wks"] || (store[key] = value || {}), createWellKnownSymbol = USE_SYMBOL_AS_UID ? Symbol$1.for || Symbol$1 : Symbol$1 && Symbol$1.withoutSetter || function(key) {
-    return "Symbol(" + (void 0 === key ? "" : key) + ")_" + toString$2(++id + postfix, 36);
-}, wellKnownSymbol$5 = function(name) {
-    return hasOwn$2(WellKnownSymbolsStore, name) || (WellKnownSymbolsStore[name] = NATIVE_SYMBOL && hasOwn$2(Symbol$1, name) ? Symbol$1[name] : createWellKnownSymbol("Symbol." + name)), 
-    WellKnownSymbolsStore[name];
-}, call$1 = functionCall, isObject$4 = isObject$6, isSymbol$1 = isSymbol$2, $TypeError$4 = TypeError, TO_PRIMITIVE = wellKnownSymbol$5("toPrimitive"), toPrimitive = function(input, pref) {
-    if (!isObject$4(input) || isSymbol$1(input)) return input;
-    var result, func, exoticToPrim = (func = input[TO_PRIMITIVE], isNullOrUndefined(func) ? void 0 : aCallable$2(func));
-    if (exoticToPrim) {
-        if (void 0 === pref && (pref = "default"), result = call$1(exoticToPrim, input, pref), 
-        !isObject$4(result) || isSymbol$1(result)) return result;
-        throw new $TypeError$4("Can't convert object to primitive value");
-    }
-    return void 0 === pref && (pref = "number"), function(input, pref) {
-        var fn, val;
-        if ("string" === pref && isCallable$3(fn = input.toString) && !isObject$5(val = call$2(fn, input))) return val;
-        if (isCallable$3(fn = input.valueOf) && !isObject$5(val = call$2(fn, input))) return val;
-        if ("string" !== pref && isCallable$3(fn = input.toString) && !isObject$5(val = call$2(fn, input))) return val;
-        throw new $TypeError$5("Can't convert object to primitive value");
-    }(input, pref);
-}, isSymbol = isSymbol$2, toPropertyKey$2 = function(argument) {
-    var key = toPrimitive(argument, "string");
-    return isSymbol(key) ? key : key + "";
-}, isObject$3 = isObject$6, document$1 = globalThis_1.document, EXISTS = isObject$3(document$1) && isObject$3(document$1.createElement), ie8DomDefine = !descriptors && !fails$9((function() {
-    // eslint-disable-next-line es/no-object-defineproperty -- required for testing
-    return 7 !== Object.defineProperty((it = "div", EXISTS ? document$1.createElement(it) : {}), "a", {
-        get: function() {
-            return 7;
-        }
-    }).a;
-    var it;
-})), DESCRIPTORS$3 = descriptors, call = functionCall, propertyIsEnumerableModule = objectPropertyIsEnumerable, createPropertyDescriptor$1 = createPropertyDescriptor$2, toIndexedObject$1 = toIndexedObject$2, toPropertyKey$1 = toPropertyKey$2, hasOwn$1 = hasOwnProperty_1, IE8_DOM_DEFINE$1 = ie8DomDefine, $getOwnPropertyDescriptor$1 = Object.getOwnPropertyDescriptor;
-
-// `Object.getOwnPropertyDescriptor` method
-// https://tc39.es/ecma262/#sec-object.getownpropertydescriptor
-objectGetOwnPropertyDescriptor.f = DESCRIPTORS$3 ? $getOwnPropertyDescriptor$1 : function(O, P) {
-    if (O = toIndexedObject$1(O), P = toPropertyKey$1(P), IE8_DOM_DEFINE$1) try {
-        return $getOwnPropertyDescriptor$1(O, P);
-    } catch (error) {/* empty */}
-    if (hasOwn$1(O, P)) return createPropertyDescriptor$1(!call(propertyIsEnumerableModule.f, O, P), O[P]);
-};
-
-var fails$3 = fails$9, isCallable$2 = isCallable$8, replacement = /#|\.prototype\./, isForced$1 = function(feature, detection) {
-    var value = data[normalize(feature)];
-    return value === POLYFILL || value !== NATIVE && (isCallable$2(detection) ? fails$3(detection) : !!detection);
-}, normalize = isForced$1.normalize = function(string) {
-    return String(string).replace(replacement, ".").toLowerCase();
-}, data = isForced$1.data = {}, NATIVE = isForced$1.NATIVE = "N", POLYFILL = isForced$1.POLYFILL = "P", isForced_1 = isForced$1, aCallable$1 = aCallable$3, NATIVE_BIND = functionBindNative, bind$1 = functionUncurryThisClause(functionUncurryThisClause.bind), objectDefineProperty = {}, v8PrototypeDefineBug = descriptors && fails$9((function() {
-    // eslint-disable-next-line es/no-object-defineproperty -- required for testing
-    return 42 !== Object.defineProperty((function() {/* empty */}), "prototype", {
-        value: 42,
-        writable: !1
-    }).prototype;
-})), isObject$2 = isObject$6, $String$1 = String, $TypeError$3 = TypeError, DESCRIPTORS$1 = descriptors, IE8_DOM_DEFINE = ie8DomDefine, V8_PROTOTYPE_DEFINE_BUG = v8PrototypeDefineBug, anObject = function(argument) {
-    if (isObject$2(argument)) return argument;
-    throw new $TypeError$3($String$1(argument) + " is not an object");
-}, toPropertyKey = toPropertyKey$2, $TypeError$2 = TypeError, $defineProperty = Object.defineProperty, $getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;
+/**
+ * Get or create default logger
+ */ function getLogger() {
+    return defaultLogger || (defaultLogger = new ThemeLogger), defaultLogger;
+}
 
-// `Object.defineProperty` method
-// https://tc39.es/ecma262/#sec-object.defineproperty
-objectDefineProperty.f = DESCRIPTORS$1 ? V8_PROTOTYPE_DEFINE_BUG ? function(O, P, Attributes) {
-    if (anObject(O), P = toPropertyKey(P), anObject(Attributes), "function" == typeof O && "prototype" === P && "value" in Attributes && "writable" in Attributes && !Attributes.writable) {
-        var current = $getOwnPropertyDescriptor(O, P);
-        current && current.writable && (O[P] = Attributes.value, Attributes = {
-            configurable: "configurable" in Attributes ? Attributes.configurable : current.configurable,
-            enumerable: "enumerable" in Attributes ? Attributes.enumerable : current.enumerable,
-            writable: !1
+/**
+ * Core Theme Functions
+ *
+ * Simplified theme system using DesignTokens only.
+ * Config-first approach: loads from atomix.config.ts when no input is provided.
+ */
+/**
+ * Create theme CSS from DesignTokens
+ *
+ * **Config-First Approach**: If no input is provided, loads from `atomix.config.ts`.
+ *
+ * @param input - DesignTokens (partial) or undefined (loads from config)
+ * @param options - CSS generation options (prefix is automatically read from config if not provided)
+ * @returns CSS string with custom properties
+ * @throws Error if config loading fails when no input is provided
+ *
+ * @example
+ * ```typescript
+ * // Loads from atomix.config.ts
+ * const css = createTheme();
+ *
+ * // Using DesignTokens
+ * const css = createTheme({
+ *   'primary': '#7c3aed',
+ *   'spacing-4': '1rem',
+ * });
+ *
+ * // With custom options
+ * const css = createTheme(undefined, { prefix: 'myapp', selector: ':root' });
+ * ```
+ */ function createTheme(input, options) {
+    // Validate options if provided
+    if (options?.prefix) {
+        const prefixPattern = /^[a-z][a-z0-9-]*$/;
+        if (!prefixPattern.test(options.prefix)) throw new ThemeError(`Invalid CSS variable prefix: "${options.prefix}". Prefix must start with a lowercase letter and contain only lowercase letters, numbers, and hyphens (e.g., "atomix", "my-app").`, ThemeErrorCode.THEME_VALIDATION_FAILED, {
+            prefix: options.prefix,
+            pattern: prefixPattern.toString()
         });
     }
-    return $defineProperty(O, P, Attributes);
-} : $defineProperty : function(O, P, Attributes) {
-    if (anObject(O), P = toPropertyKey(P), anObject(Attributes), IE8_DOM_DEFINE) try {
-        return $defineProperty(O, P, Attributes);
-    } catch (error) {/* empty */}
-    if ("get" in Attributes || "set" in Attributes) throw new $TypeError$2("Accessors not supported");
-    return "value" in Attributes && (O[P] = Attributes.value), O;
-};
-
-var definePropertyModule = objectDefineProperty, createPropertyDescriptor = createPropertyDescriptor$2, createNonEnumerableProperty$1 = descriptors ? function(object, key, value) {
-    return definePropertyModule.f(object, key, createPropertyDescriptor(1, value));
-} : function(object, key, value) {
-    return object[key] = value, object;
-}, globalThis$3 = globalThis_1, apply = functionApply, uncurryThis$1 = functionUncurryThisClause, isCallable$1 = isCallable$8, getOwnPropertyDescriptor = objectGetOwnPropertyDescriptor.f, isForced = isForced_1, path$1 = path$3, bind = function(fn, that) {
-    return aCallable$1(fn), void 0 === that ? fn : NATIVE_BIND ? bind$1(fn, that) : function() {
-        return fn.apply(that, arguments);
-    };
-}, createNonEnumerableProperty = createNonEnumerableProperty$1, hasOwn = hasOwnProperty_1, wrapConstructor = function(NativeConstructor) {
-    var Wrapper = function(a, b, c) {
-        if (this instanceof Wrapper) {
-            switch (arguments.length) {
-              case 0:
-                return new NativeConstructor;
-
-              case 1:
-                return new NativeConstructor(a);
-
-              case 2:
-                return new NativeConstructor(a, b);
-            }
-            return new NativeConstructor(a, b, c);
-        }
-        return apply(NativeConstructor, this, arguments);
-    };
-    return Wrapper.prototype = NativeConstructor.prototype, Wrapper;
-}, _export = function(options, source) {
-    var FORCED, USE_NATIVE, VIRTUAL_PROTOTYPE, key, sourceProperty, targetProperty, nativeProperty, resultProperty, descriptor, TARGET = options.target, GLOBAL = options.global, STATIC = options.stat, PROTO = options.proto, nativeSource = GLOBAL ? globalThis$3 : STATIC ? globalThis$3[TARGET] : globalThis$3[TARGET] && globalThis$3[TARGET].prototype, target = GLOBAL ? path$1 : path$1[TARGET] || createNonEnumerableProperty(path$1, TARGET, {})[TARGET], targetPrototype = target.prototype;
-    for (key in source) 
-    // contains in native
-    USE_NATIVE = !(FORCED = isForced(GLOBAL ? key : TARGET + (STATIC ? "." : "#") + key, options.forced)) && nativeSource && hasOwn(nativeSource, key), 
-    targetProperty = target[key], USE_NATIVE && (nativeProperty = options.dontCallGetSet ? (descriptor = getOwnPropertyDescriptor(nativeSource, key)) && descriptor.value : nativeSource[key]), 
-    // export native or implementation
-    sourceProperty = USE_NATIVE && nativeProperty ? nativeProperty : source[key], (FORCED || PROTO || typeof targetProperty != typeof sourceProperty) && (
-    // bind methods to global for calling from export context
-    resultProperty = options.bind && USE_NATIVE ? bind(sourceProperty, globalThis$3) : options.wrap && USE_NATIVE ? wrapConstructor(sourceProperty) : PROTO && isCallable$1(sourceProperty) ? uncurryThis$1(sourceProperty) : sourceProperty, 
-    // add a flag to not completely full polyfills
-    (options.sham || sourceProperty && sourceProperty.sham || targetProperty && targetProperty.sham) && createNonEnumerableProperty(resultProperty, "sham", !0), 
-    createNonEnumerableProperty(target, key, resultProperty), PROTO && (hasOwn(path$1, VIRTUAL_PROTOTYPE = TARGET + "Prototype") || createNonEnumerableProperty(path$1, VIRTUAL_PROTOTYPE, {}), 
-    // export virtual prototype methods
-    createNonEnumerableProperty(path$1[VIRTUAL_PROTOTYPE], key, sourceProperty), 
-    // export real prototype methods
-    options.real && targetPrototype && (FORCED || !targetPrototype[key]) && createNonEnumerableProperty(targetPrototype, key, sourceProperty)));
-}, ceil = Math.ceil, floor = Math.floor, trunc = Math.trunc || function(x) {
-    var n = +x;
-    return (n > 0 ? floor : ceil)(n);
-}, toIntegerOrInfinity$2 = function(argument) {
-    var number = +argument;
-    // eslint-disable-next-line no-self-compare -- NaN check
-        return number != number || 0 === number ? 0 : trunc(number);
-}, toIntegerOrInfinity$1 = toIntegerOrInfinity$2, max = Math.max, min$1 = Math.min, toIntegerOrInfinity = toIntegerOrInfinity$2, min = Math.min, lengthOfArrayLike$2 = function(obj) {
-    return argument = obj.length, (len = toIntegerOrInfinity(argument)) > 0 ? min(len, 9007199254740991) : 0;
-    var argument, len;
-}, toIndexedObject = toIndexedObject$2, lengthOfArrayLike$1 = lengthOfArrayLike$2, createMethod$1 = function(IS_INCLUDES) {
-    return function($this, el, fromIndex) {
-        var O = toIndexedObject($this), length = lengthOfArrayLike$1(O);
-        if (0 === length) return !IS_INCLUDES && -1;
-        var value, index = function(index, length) {
-            var integer = toIntegerOrInfinity$1(index);
-            return integer < 0 ? max(integer + length, 0) : min$1(integer, length);
-        }(fromIndex, length);
-        // Array#includes uses SameValueZero equality algorithm
-        // eslint-disable-next-line no-self-compare -- NaN check
-        if (IS_INCLUDES && el != el) {
-            for (;length > index; ) 
-            // eslint-disable-next-line no-self-compare -- NaN check
-            if ((value = O[index++]) != value) return !0;
-            // Array#indexOf ignores holes, Array#includes - not
-                } else for (;length > index; index++) if ((IS_INCLUDES || index in O) && O[index] === el) return IS_INCLUDES || index || 0;
-        return !IS_INCLUDES && -1;
-    };
-}, $includes = [ createMethod$1(!0), createMethod$1(!1) ][0];
-
-// `Array.prototype.includes` method
-// https://tc39.es/ecma262/#sec-array.prototype.includes
-_export({
-    target: "Array",
-    proto: !0,
-    forced: fails$9((function() {
-        // eslint-disable-next-line es/no-array-prototype-includes -- detection
-        return !Array(1).includes();
-    }))
-}, {
-    includes: function(el /* , fromIndex = 0 */) {
-        return $includes(this, el, arguments.length > 1 ? arguments[1] : void 0);
+    // Validate selector if provided
+        if (options?.selector && ("string" != typeof options.selector || 0 === options.selector.trim().length)) throw new ThemeError(`Invalid CSS selector: "${options.selector}". Selector must be a non-empty string (e.g., ":root", ".my-theme").`, ThemeErrorCode.THEME_VALIDATION_FAILED, {
+        selector: options.selector
+    });
+    // Determine tokens based on input
+        let tokens;
+    if (input) {
+        // Validate input tokens structure
+        if ("object" != typeof input || null === input || Array.isArray(input)) throw new ThemeError(`Invalid tokens input. Expected an object with DesignTokens, but received: ${typeof input}.`, ThemeErrorCode.THEME_VALIDATION_FAILED, {
+            inputType: typeof input
+        });
+        // Use DesignTokens directly
+                tokens = input;
     }
-});
-
-var globalThis$2 = globalThis_1, path = path$3, getBuiltInPrototypeMethod$3 = function(CONSTRUCTOR, METHOD) {
-    var Namespace = path[CONSTRUCTOR + "Prototype"], pureMethod = Namespace && Namespace[METHOD];
-    if (pureMethod) return pureMethod;
-    var NativeConstructor = globalThis$2[CONSTRUCTOR], NativePrototype = NativeConstructor && NativeConstructor.prototype;
-    return NativePrototype && NativePrototype[METHOD];
-}, includes$4 = getBuiltInPrototypeMethod$3("Array", "includes"), isObject$1 = isObject$6, classof$3 = classofRaw$2, MATCH$1 = wellKnownSymbol$5("match"), $TypeError$1 = TypeError, test = {};
-
-test[wellKnownSymbol$5("toStringTag")] = "z";
-
-var TO_STRING_TAG_SUPPORT = "[object z]" === String(test), isCallable = isCallable$8, classofRaw = classofRaw$2, TO_STRING_TAG = wellKnownSymbol$5("toStringTag"), $Object = Object, CORRECT_ARGUMENTS = "Arguments" === classofRaw(function() {
-    return arguments;
-}()), classof$1 = TO_STRING_TAG_SUPPORT ? classofRaw : function(it) {
-    var O, tag, result;
-    return void 0 === it ? "Undefined" : null === it ? "Null" : "string" == typeof (tag = function(it, key) {
-        try {
-            return it[key];
-        } catch (error) {/* empty */}
-    }(O = $Object(it), TO_STRING_TAG)) ? tag : CORRECT_ARGUMENTS ? classofRaw(O) : "Object" === (result = classofRaw(O)) && isCallable(O.callee) ? "Arguments" : result;
-}, $String = String, MATCH = wellKnownSymbol$5("match"), $$1 = _export, notARegExp = function(it) {
-    if (function(it) {
-        var isRegExp;
-        return isObject$1(it) && (void 0 !== (isRegExp = it[MATCH$1]) ? !!isRegExp : "RegExp" === classof$3(it));
-    }(it)) throw new $TypeError$1("The method doesn't accept regular expressions");
-    return it;
-}, requireObjectCoercible = requireObjectCoercible$3, toString = function(argument) {
-    if ("Symbol" === classof$1(argument)) throw new TypeError("Cannot convert a Symbol value to a string");
-    return $String(argument);
-}, stringIndexOf = functionUncurryThis("".indexOf);
-
-// `String.prototype.includes` method
-// https://tc39.es/ecma262/#sec-string.prototype.includes
-$$1({
-    target: "String",
-    proto: !0,
-    forced: !function(METHOD_NAME) {
-        var regexp = /./;
+    // Merge with defaults and generate CSS
+     else {
+        // Check if we're in a browser environment
+        if ("undefined" != typeof window) throw new ThemeError("No input provided and config loading is not available in browser environment. Please provide tokens explicitly or use Node.js/SSR environment.", ThemeErrorCode.CONFIG_LOAD_FAILED, {
+            environment: "browser"
+        });
+        // Load from config when no input provided
+                let loadThemeFromConfigSync, loadAtomixConfig;
         try {
-            "/./"[METHOD_NAME](regexp);
-        } catch (error1) {
-            try {
-                return regexp[MATCH] = !1, "/./"[METHOD_NAME](regexp);
-            } catch (error2) {/* empty */}
+            const configLoaderModule = require("../config/configLoader"), loaderModule = require("../../config/loader");
+            // Get prefix from config if needed
+            if (loadThemeFromConfigSync = configLoaderModule.loadThemeFromConfigSync, loadAtomixConfig = loaderModule.loadAtomixConfig, 
+            tokens = loadThemeFromConfigSync(), !options?.prefix) try {
+                const config = loadAtomixConfig({
+                    configPath: "atomix.config.ts",
+                    required: !1
+                });
+                options = {
+                    ...options,
+                    prefix: config?.prefix || "atomix"
+                };
+            } catch (error) {
+                // If config loading fails, use default prefix
+                options = {
+                    ...options,
+                    prefix: "atomix"
+                };
+            }
+        } catch (error) {
+            throw new ThemeError("No input provided and config loading is not available in this environment. Please provide tokens explicitly.", ThemeErrorCode.CONFIG_LOAD_FAILED, {
+                error: error instanceof Error ? error.message : String(error)
+            });
         }
-        return !1;
-    }("includes")
-}, {
-    includes: function(searchString /* , position = 0 */) {
-        return !!~stringIndexOf(toString(requireObjectCoercible(this)), toString(notARegExp(searchString)), arguments.length > 1 ? arguments[1] : void 0);
     }
-});
-
-var includes$3 = getBuiltInPrototypeMethod$3("String", "includes"), isPrototypeOf$1 = objectIsPrototypeOf, arrayMethod = includes$4, stringMethod = includes$3, ArrayPrototype$1 = Array.prototype, StringPrototype = String.prototype;
-
-const _includesInstanceProperty =  getDefaultExportFromCjs((function(it) {
-    var own = it.includes;
-    return it === ArrayPrototype$1 || isPrototypeOf$1(ArrayPrototype$1, it) && own === ArrayPrototype$1.includes ? arrayMethod : "string" == typeof it || it === StringPrototype || isPrototypeOf$1(StringPrototype, it) && own === StringPrototype.includes ? stringMethod : own;
-}));
+    const allTokens = createTokens(tokens), prefix = options?.prefix ?? "atomix";
+    // Get prefix from options or use default
+        return generateCSSVariables$1(allTokens, {
+        ...options,
+        prefix: prefix
+    });
+}
 
 /**
- * Theme Utilities
+ * Theme Composition Utilities
  *
- * Helper utilities for working with themes, including color manipulation,
- * spacing helpers, and theme value accessors.
+ * Simplified utilities for composing and merging DesignTokens.
  */
 // ============================================================================
-// Color Manipulation Utilities
+// Deep Merge Utility
 // ============================================================================
 /**
- * Convert hex color to RGB object
- */ function hexToRgb(hex) {
-    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-    return result ? {
-        r: parseInt(result[1], 16),
-        g: parseInt(result[2], 16),
-        b: parseInt(result[3], 16)
-    } : null;
+ * Check if value is an object
+ */ function isObject$6(item) {
+    return item && "object" == typeof item && !Array.isArray(item) && "function" != typeof item;
 }
 
 /**
- * Convert RGB to hex color
- */ function rgbToHex(r, g, b) {
-    const toHex = val => Math.round(Math.max(0, Math.min(255, val))).toString(16).padStart(2, "0");
-    return `#${toHex(r ?? 0)}${toHex(g ?? 0)}${toHex(b ?? 0)}`;
+ * Deep merge multiple objects
+ * Later objects override earlier ones
+ */ function deepMerge(...objects) {
+    if (0 === objects.length) return {};
+    if (1 === objects.length) return objects[0];
+    const [target, ...sources] = objects, result = {
+        ...target
+    };
+    for (const source of sources) if (source) for (const key in source) {
+        if (!Object.prototype.hasOwnProperty.call(source, key)) continue;
+        const targetValue = result[key], sourceValue = source[key];
+        isObject$6(targetValue) && isObject$6(sourceValue) ? 
+        // Recursively merge objects
+        result[key] = deepMerge(targetValue, sourceValue) : 
+        // Override with source value
+        result[key] = sourceValue;
+    }
+    return result;
 }
 
 /**
- * Calculate relative luminance of a color
- * Used for determining contrast ratios
- */ function getLuminance(color) {
-    const rgb = hexToRgb(color);
-    if (!rgb) return 0;
-    const {r: r, g: g, b: b} = rgb, [rs, gs, bs] = [ r ?? 0, g ?? 0, b ?? 0 ].map((c => {
-        const val = c / 255;
-        return val <= .03928 ? val / 12.92 : Math.pow((val + .055) / 1.055, 2.4);
-    }));
-    return .2126 * (rs ?? 0) + .7152 * (gs ?? 0) + .0722 * (bs ?? 0);
+ * Merge multiple DesignTokens objects into a single DesignTokens object
+ *
+ * @param tokens - DesignTokens objects to merge
+ * @returns Merged DesignTokens object
+ *
+ * @example
+ * ```typescript
+ * const baseTokens = { 'primary': '#000', 'spacing-4': '1rem' };
+ * const customTokens = { 'secondary': '#fff', 'spacing-4': '1.5rem' };
+ * const merged = mergeTheme(baseTokens, customTokens);
+ * // Returns: { 'primary': '#000', 'secondary': '#fff', 'spacing-4': '1.5rem' }
+ * ```
+ */ function mergeTheme(...tokens) {
+    return deepMerge({}, ...tokens);
 }
 
 /**
- * Calculate contrast ratio between two colors
- */ function getContrastRatio(foreground, background) {
-    const lumA = getLuminance(foreground), lumB = getLuminance(background);
-    return (Math.max(lumA, lumB) + .05) / (Math.min(lumA, lumB) + .05);
+ * Extend DesignTokens with additional tokens
+ *
+ * @param baseTokens - Base DesignTokens to extend
+ * @param extension - Additional DesignTokens to merge
+ * @returns Extended DesignTokens object
+ *
+ * @example
+ * ```typescript
+ * const base = { 'primary': '#000' };
+ * const extended = extendTheme(base, { 'secondary': '#fff' });
+ * // Returns: { 'primary': '#000', 'secondary': '#fff' }
+ * ```
+ */ function extendTheme(baseTokens, extension) {
+    return mergeTheme(baseTokens, extension);
 }
 
 /**
- * Get appropriate contrast text color (black or white) for a background color
- */ function getContrastText(background, threshold = 3) {
-    const contrastWithWhite = getContrastRatio("#FFFFFF", background), contrastWithBlack = getContrastRatio("#000000", background);
-    return contrastWithWhite >= threshold ? "#FFFFFF" : contrastWithBlack >= threshold ? "#000000" : contrastWithWhite > contrastWithBlack ? "#FFFFFF" : "#000000";
+ * Create a new theme registry
+ */ function createThemeRegistry() {
+    return {};
 }
 
 /**
- * Lighten a color by a given amount
- *
- * @param color - Hex color string
- * @param amount - Amount to lighten (0-1), default 0.2
- * @returns Lightened hex color
- */ function lighten(color, amount = .2) {
-    const rgb = hexToRgb(color);
-    if (!rgb) return color;
-    const {r: r, g: g, b: b} = rgb, lightenValue = val => Math.min(255, Math.round(val + (255 - val) * amount));
-    return rgbToHex(lightenValue(r), lightenValue(g), lightenValue(b));
+ * Register a theme
+ * @param registry - Theme registry object
+ * @param id - Theme identifier
+ * @param metadata - Theme metadata
+ */ function registerTheme(registry, id, metadata) {
+    registry[id] = metadata;
 }
 
 /**
- * Darken a color by a given amount
- *
- * @param color - Hex color string
- * @param amount - Amount to darken (0-1), default 0.2
- * @returns Darkened hex color
- */ function darken(color, amount = .2) {
-    const rgb = hexToRgb(color);
-    if (!rgb) return color;
-    const {r: r, g: g, b: b} = rgb, darkenValue = val => Math.max(0, Math.round(val * (1 - amount)));
-    return rgbToHex(darkenValue(r), darkenValue(g), darkenValue(b));
+ * Unregister a theme
+ * @param registry - Theme registry object
+ * @param id - Theme identifier
+ */ function unregisterTheme(registry, id) {
+    const exists = id in registry;
+    return delete registry[id], exists;
 }
 
 /**
- * Add alpha (opacity) to a color
- *
- * @param color - Hex color string
- * @param opacity - Opacity value (0-1)
- * @returns RGBA color string
- */ function alpha(color, opacity) {
-    const rgb = hexToRgb(color);
-    if (!rgb) return color;
-    const {r: r, g: g, b: b} = rgb;
-    return `rgba(${r}, ${g}, ${b}, ${Math.max(0, Math.min(1, opacity))})`;
+ * Check if a theme is registered
+ * @param registry - Theme registry object
+ * @param id - Theme identifier
+ */ function hasTheme(registry, id) {
+    return id in registry;
 }
 
 /**
- * Emphasize a color (lighten if dark, darken if light)
- *
- * @param color - Hex color string
- * @param coefficient - Amount to emphasize (0-1), default 0.15
- * @returns Emphasized hex color
- */
-/**
- * Check if a theme is a JS theme (created with createTheme)
- */
-function isJSTheme(theme) {
-    return theme && "object" == typeof theme && !0 === theme.__isJSTheme;
+ * Get theme metadata
+ * @param registry - Theme registry object
+ * @param id - Theme identifier
+ */ function getTheme(registry, id) {
+    return registry[id];
 }
 
 /**
- * Theme Adapter
- *
- * Converts between Theme objects and DesignTokens.
- */
+ * Get all registered theme metadata
+ * @param registry - Theme registry object
+ */ function getAllThemes(registry) {
+    return Object.values(registry);
+}
+
 /**
- * Convert Theme object to DesignTokens
- *
- * Extracts values from a Theme object and converts them to flat DesignTokens format.
- *
- * @param theme - Theme object to convert
- * @returns Partial DesignTokens object
- *
- * @example
- * ```typescript
- * const theme = createTheme({ palette: { primary: { main: '#7c3aed' } } });
- * const tokens = themeToDesignTokens(theme);
- * // Returns: { 'primary': '#7c3aed', ... }
- * ```
- */ function themeToDesignTokens(theme) {
-    const tokens = {};
-    // Convert palette colors
-        if (theme.palette) {
-        // Primary colors
-        if (theme.palette.primary && (tokens.primary = theme.palette.primary.main, theme.palette.primary.light && (tokens["primary-3"] = theme.palette.primary.light), 
-        theme.palette.primary.dark && (tokens["primary-9"] = theme.palette.primary.dark), 
-        theme.palette.primary.main)) {
-            const rgb = hexToRgb(theme.palette.primary.main);
-            rgb && (tokens["primary-rgb"] = `${rgb.r}, ${rgb.g}, ${rgb.b}`);
-        }
-        // Secondary colors
-                if (theme.palette.secondary) {
-            tokens.secondary = theme.palette.secondary.main, theme.palette.secondary.light && (tokens["gray-1"] = theme.palette.secondary.light), 
-            theme.palette.secondary.dark && (tokens["gray-3"] = theme.palette.secondary.dark);
-            const rgb = hexToRgb(theme.palette.secondary.main);
-            rgb && (tokens["secondary-rgb"] = `${rgb.r}, ${rgb.g}, ${rgb.b}`);
-        }
-        // Error colors
-                if (theme.palette.error) {
-            tokens.error = theme.palette.error.main, tokens["red-6"] = theme.palette.error.main, 
-            theme.palette.error.light && (tokens["red-4"] = theme.palette.error.light), theme.palette.error.dark && (tokens["red-9"] = theme.palette.error.dark);
-            const rgb = hexToRgb(theme.palette.error.main);
-            rgb && (tokens["error-rgb"] = `${rgb.r}, ${rgb.g}, ${rgb.b}`);
-        }
-        // Success colors
-                if (theme.palette.success) {
-            tokens.success = theme.palette.success.main, tokens["green-6"] = theme.palette.success.main, 
-            theme.palette.success.light && (tokens["green-4"] = theme.palette.success.light), 
-            theme.palette.success.dark && (tokens["green-9"] = theme.palette.success.dark);
-            const rgb = hexToRgb(theme.palette.success.main);
-            rgb && (tokens["success-rgb"] = `${rgb.r}, ${rgb.g}, ${rgb.b}`);
-        }
-        // Warning colors
-                if (theme.palette.warning) {
-            tokens.warning = theme.palette.warning.main, tokens["yellow-6"] = theme.palette.warning.main, 
-            theme.palette.warning.light && (tokens["yellow-4"] = theme.palette.warning.light), 
-            theme.palette.warning.dark && (tokens["yellow-9"] = theme.palette.warning.dark);
-            const rgb = hexToRgb(theme.palette.warning.main);
-            rgb && (tokens["warning-rgb"] = `${rgb.r}, ${rgb.g}, ${rgb.b}`);
-        }
-        // Info colors
-                if (theme.palette.info) {
-            tokens.info = theme.palette.info.main, tokens["blue-6"] = theme.palette.info.main, 
-            theme.palette.info.light && (tokens["blue-4"] = theme.palette.info.light), theme.palette.info.dark && (tokens["blue-9"] = theme.palette.info.dark);
-            const rgb = hexToRgb(theme.palette.info.main);
-            rgb && (tokens["info-rgb"] = `${rgb.r}, ${rgb.g}, ${rgb.b}`);
-        }
-        // Background colors
-                theme.palette.background && (tokens["body-bg"] = theme.palette.background.default, 
-        tokens["primary-bg-subtle"] = theme.palette.background.default, tokens["secondary-bg-subtle"] = theme.palette.background.paper, 
-        tokens["tertiary-bg-subtle"] = theme.palette.background.subtle), 
-        // Text colors
-        theme.palette.text && (tokens["body-color"] = theme.palette.text.primary, tokens["heading-color"] = theme.palette.text.primary, 
-        tokens["primary-text-emphasis"] = theme.palette.text.primary, tokens["secondary-text-emphasis"] = theme.palette.text.secondary, 
-        tokens["disabled-text-emphasis"] = theme.palette.text.disabled);
-    }
-    // Convert typography
-        // Convert spacing (if available as object)
-    if (theme.typography && (tokens["body-font-family"] = theme.typography.fontFamily, 
-    tokens["font-sans-serif"] = theme.typography.fontFamily, tokens["body-font-size"] = `${theme.typography.fontSize}px`, 
-    tokens["body-font-weight"] = String(theme.typography.fontWeightRegular), 
-    // Font weights
-    tokens["font-weight-light"] = String(theme.typography.fontWeightLight), tokens["font-weight-normal"] = String(theme.typography.fontWeightRegular), 
-    tokens["font-weight-medium"] = String(theme.typography.fontWeightMedium), tokens["font-weight-semibold"] = String(theme.typography.fontWeightSemiBold), 
-    tokens["font-weight-bold"] = String(theme.typography.fontWeightBold), 
-    // Line heights
-    theme.typography.h1?.lineHeight && (tokens["line-height-base"] = String(theme.typography.h1.lineHeight))), 
-    theme.spacing && "object" == typeof theme.spacing && !("__isSpacingFunction" in theme.spacing)) {
-        const spacing = theme.spacing;
-        Object.entries(spacing).forEach((([key, value]) => {
-            tokens[`spacing-${key}`] = String(value);
-        }));
-    }
-    // Convert border radius
-        return theme.borderRadius && Object.entries(theme.borderRadius).forEach((([key, value]) => {
-        tokens["sm" === key ? "border-radius-sm" : "md" === key ? "border-radius" : "lg" === key ? "border-radius-lg" : "xl" === key ? "border-radius-xl" : "xxl" === key ? "border-radius-xxl" : `border-radius-${key}`] = String(value);
-    })), 
-    // Convert shadows
-    theme.shadows && Object.entries(theme.shadows).forEach((([key, value]) => {
-        tokens["xs" === key ? "box-shadow-xs" : "sm" === key ? "box-shadow-sm" : "md" === key ? "box-shadow" : "lg" === key ? "box-shadow-lg" : "xl" === key ? "box-shadow-xl" : `box-shadow-${key}`] = String(value);
-    })), 
-    // Convert z-index
-    theme.zIndex && Object.entries(theme.zIndex).forEach((([key, value]) => {
-        tokens[`z-${key}`] = String(value);
-    })), 
-    // Convert transitions
-    theme.transitions && (theme.transitions.duration && Object.entries(theme.transitions.duration).forEach((([key, value]) => {
-        tokens[`transition-duration-${key}`] = String(value);
-    })), theme.transitions.easing && Object.entries(theme.transitions.easing).forEach((([key, value]) => {
-        tokens[`easing-${key}`] = String(value);
-    }))), 
-    // Convert breakpoints
-    theme.breakpoints?.values && Object.entries(theme.breakpoints.values).forEach((([key, value]) => {
-        tokens[`breakpoint-${key}`] = String(value);
-    })), 
-    // Merge any existing cssVars from theme
-    theme.cssVars && Object.entries(theme.cssVars).forEach((([key, value]) => {
-        // Remove --atomix- prefix if present
-        const cleanKey = key.replace(/^--atomix-/, "").replace(/^--/, "");
-        tokens[cleanKey] = String(value);
-    })), tokens;
+ * Get all registered theme IDs
+ * @param registry - Theme registry object
+ */ function getThemeIds(registry) {
+    return Object.keys(registry);
 }
 
 /**
- * Convert DesignTokens to Theme-compatible CSS variables
- *
- * @param tokens - DesignTokens object
- * @returns CSS variables object compatible with Theme.cssVars
- */ function designTokensToCSSVars(tokens) {
-    const cssVars = {};
-    return Object.entries(tokens).forEach((([key, value]) => {
-        void 0 !== value && (cssVars[`--atomix-${key}`] = String(value));
-    })), cssVars;
+ * Clear all registered themes
+ * @param registry - Theme registry object
+ */ function clearThemes(registry) {
+    Object.keys(registry).forEach((key => delete registry[key]));
 }
 
 /**
- * Create DesignTokens from Theme with defaults
- *
- * Converts a Theme to DesignTokens and merges with default tokens.
- *
- * @param theme - Theme object to convert
- * @returns Complete DesignTokens object
- */ function createDesignTokensFromTheme(theme) {
-    return createTokens(themeToDesignTokens(theme));
+ * Get the number of registered themes
+ * @param registry - Theme registry object
+ */ function getThemeCount(registry) {
+    return Object.keys(registry).length;
 }
 
 /**
- * Create a minimal Theme object from DesignTokens
+ * Core Theme Engine
  *
- * @param tokens - DesignTokens to convert
- * @returns Minimal Theme object with cssVars populated
- */ function designTokensToTheme(tokens) {
-    return {
-        name: "Design Tokens Theme",
-        cssVars: designTokensToCSSVars(tokens),
-        __isJSTheme: !0
-    };
-}
+ * Core theme creation, composition, and registry functionality
+ */ const index =  Object.freeze( Object.defineProperty({
+    __proto__: null,
+    clearThemes: clearThemes,
+    createTheme: createTheme,
+    createThemeRegistry: createThemeRegistry,
+    deepMerge: deepMerge,
+    extendTheme: extendTheme,
+    getAllThemes: getAllThemes,
+    getTheme: getTheme,
+    getThemeCount: getThemeCount,
+    getThemeIds: getThemeIds,
+    hasTheme: hasTheme,
+    mergeTheme: mergeTheme,
+    registerTheme: registerTheme,
+    unregisterTheme: unregisterTheme
+}, Symbol.toStringTag, {
+    value: "Module"
+}));
 
 /**
- * Config Loader
+ * CSS Injection Utilities
  *
- * Load design tokens from atomix.config.ts and convert to flat token format.
+ * Inject CSS into HTML head via <style> element.
  */
 /**
- * Convert nested config tokens to flat DesignTokens format
- *
- * Handles conversion from atomix.config.ts structure to flat tokens.
- * Maps config structure to actual DesignTokens key names.
- */ function flattenConfigTokens(tokens, prefix = "atomix") {
-    const flat = {};
-    // Colors
-        return tokens.colors && Object.entries(tokens.colors).forEach((([key, value]) => {
-        var _context;
-        // Simple color: 'primary': '#7AFFD7'
-        // Map directly to DesignTokens keys (e.g., 'primary', 'secondary', 'error')
-        // Only map if it's a valid semantic color key
-                if ("string" == typeof value) _includesInstanceProperty(_context = [ "primary", "secondary", "success", "info", "warning", "error", "light", "dark" ]).call(_context, key) && (flat[key] = value); else if (value && "object" == typeof value) 
-        // Color scale or palette
-        if ("main" in value) {
-            var _context2;
-            // PaletteColorOptions: { main: '#7AFFD7', light?: '#...', dark?: '#...' }
-                        const palette = value, baseKey = key;
-            // Map main to base color (e.g., primary, secondary, error)
-            _includesInstanceProperty(_context2 = [ "primary", "secondary", "success", "info", "warning", "error", "light", "dark" ]).call(_context2, key) && (flat[baseKey] = palette.main, 
-            // Map light/dark to appropriate scale values
-            // light typically maps to step 3, dark to step 9
-            palette.light && (flat[`${key}-3`] = palette.light), palette.dark && (flat[`${key}-9`] = palette.dark));
-        } else 
-        // Color scale: { 1: '#fff', 2: '#eee', ..., 6: '#main', ... }
-        // Or full scale: { 1: '#...', 2: '#...', ..., 10: '#...' }
-        Object.entries(value).forEach((([scaleKey, scaleValue]) => {
-            if ("string" == typeof scaleValue) 
-            // Map scale keys to DesignTokens format
-            if ("main" === scaleKey || "6" === scaleKey) {
-                var _context3, _context4;
-                // Main color maps to base key (e.g., 'primary')
-                                _includesInstanceProperty(_context3 = [ "primary", "secondary", "success", "info", "warning", "error", "light", "dark" ]).call(_context3, key) && (flat[key] = scaleValue), 
-                // Also map to step 6 if it's a scale color
-                _includesInstanceProperty(_context4 = [ "primary", "red", "green", "blue", "yellow", "gray" ]).call(_context4, key) && (flat[`${key}-6`] = scaleValue);
-            } else {
-                // Map scale numbers (1-10) to DesignTokens format
-                const scaleNum = parseInt(scaleKey, 10);
-                !isNaN(scaleNum) && scaleNum >= 1 && scaleNum <= 10 && (flat[`${key}-${scaleKey}`] = scaleValue);
-            }
-        }));
-    })), 
-    // Spacing
-    tokens.spacing && Object.entries(tokens.spacing).forEach((([key, value]) => {
-        flat[`spacing-${key}`] = String(value);
-    })), 
-    // Border Radius
-    tokens.borderRadius && Object.entries(tokens.borderRadius).forEach((([key, value]) => {
-        // Map to DesignTokens format
-        "sm" === key || "base" === key || "" === key ? flat["border-radius-sm"] = String(value) : "md" === key || "default" === key ? flat["border-radius"] = String(value) : "lg" === key ? flat["border-radius-lg"] = String(value) : flat[`border-radius-${key}`] = String(value);
-    })), 
-    // Typography
-    tokens.typography && (
-    // Font Families
-    tokens.typography.fontFamilies && Object.entries(tokens.typography.fontFamilies).forEach((([key, value]) => {
-        // Map to DesignTokens format
-        "sans" === key || "base" === key ? (flat["font-sans-serif"] = String(value), flat["body-font-family"] = String(value)) : "mono" === key ? flat["font-monospace"] = String(value) : flat[`font-family-${key}`] = String(value);
-    })), 
-    // Font Sizes
-    tokens.typography.fontSizes && Object.entries(tokens.typography.fontSizes).forEach((([key, value]) => {
-        flat[`font-size-${key}`] = String(value);
-    })), 
-    // Font Weights
-    tokens.typography.fontWeights && Object.entries(tokens.typography.fontWeights).forEach((([key, value]) => {
-        flat[`font-weight-${key}`] = String(value);
-    })), 
-    // Line Heights
-    tokens.typography.lineHeights && Object.entries(tokens.typography.lineHeights).forEach((([key, value]) => {
-        "base" === key || "default" === key ? flat["line-height-base"] = String(value) : flat[`line-height-${key}`] = String(value);
-    }))), 
-    // Shadows
-    tokens.shadows && Object.entries(tokens.shadows).forEach((([key, value]) => {
-        flat[`shadow-${key}`] = String(value);
-    })), 
-    // Z-Index
-    tokens.zIndex && Object.entries(tokens.zIndex).forEach((([key, value]) => {
-        flat[`z-index-${key}`] = String(value);
-    })), 
-    // Transitions
-    tokens.transitions && tokens.transitions.durations && Object.entries(tokens.transitions.durations).forEach((([key, value]) => {
-        flat[`transition-${key}`] = String(value);
-    })), flat;
+ * Check if running in browser environment
+ */ function isBrowser$1() {
+    return "undefined" != typeof document;
 }
 
 /**
- * Load theme tokens from atomix.config.ts
+ * Inject CSS into HTML head via <style> element
  *
- * Loads atomix.config.ts and extracts theme tokens.
- * Config file is required - throws error if not found.
+ * Creates or updates a style element in the document head.
+ * If an element with the same ID exists, it will be updated.
  *
- * @param configPath - Optional custom config path (default: 'atomix.config.ts')
- * @returns Partial DesignTokens from config
- * @throws Error if config file is not found or cannot be loaded
+ * @param css - CSS string to inject
+ * @param id - Style element ID (default: 'atomix-theme')
  *
  * @example
  * ```typescript
- * const tokens = await loadThemeFromConfig();
- * const css = createTheme(tokens);
- * injectTheme(css);
+ * const css = ':root { --atomix-color-primary: #7AFFD7; }';
+ * injectCSS(css);
+ *
+ * // With custom ID
+ * injectCSS(css, 'my-custom-theme');
  * ```
- */ async function loadThemeFromConfig(configPath = "atomix.config.ts") {
-    // In browser environments, config loading is not supported
-    if ("undefined" != typeof window) throw new Error("loadThemeFromConfig: Not available in browser environment. Config loading requires Node.js/SSR environment.");
-    // Load config using the existing loader (required)
-        const {loadAtomixConfig: loadAtomixConfig} = await Promise.resolve().then((() => loader)), config = loadAtomixConfig({
-        configPath: configPath,
-        required: !0
-    });
-    if (!config || !config.theme) throw new Error(`Config file ${configPath} does not contain theme configuration.`);
-    // Extract tokens from config
-        const tokens = config.theme.tokens || config.theme.extend || {};
-    if (0 === Object.keys(tokens).length) throw new Error(`Config file ${configPath} has empty theme configuration.`);
-    // Convert nested structure to flat tokens
-        return flattenConfigTokens(tokens, config.prefix || "atomix");
+ */ function injectCSS$1(css, id = "atomix-theme") {
+    if (!isBrowser$1()) return;
+    let styleElement = document.getElementById(id);
+    styleElement || (styleElement = document.createElement("style"), styleElement.id = id, 
+    styleElement.setAttribute("data-atomix-theme", "true"), document.head.appendChild(styleElement)), 
+    styleElement.textContent = css;
 }
 
 /**
- * Load theme tokens from atomix.config.ts (synchronous version)
+ * Remove injected CSS from DOM
+ *
+ * Removes the style element with the given ID from the document head.
  *
- * Synchronous version that uses require() instead of dynamic import.
- * Only works in Node.js environment.
- * Config file is required - throws error if not found.
+ * @param id - Style element ID to remove (default: 'atomix-theme')
  *
- * @param configPath - Optional custom config path
- * @returns Partial DesignTokens from config
- * @throws Error if config file is not found or cannot be loaded
- */ function loadThemeFromConfigSync(configPath = "atomix.config.ts") {
-    // In browser environments, config loading is not supported
-    if ("undefined" != typeof window) throw new Error("loadThemeFromConfigSync: Not available in browser environment. Config loading requires Node.js/SSR environment.");
-    // eslint-disable-next-line @typescript-eslint/no-require-imports
-        const {loadAtomixConfig: loadAtomixConfig} = require("../../config/loader"), config = loadAtomixConfig({
-        configPath: configPath,
-        required: !0
-    });
-    if (!config || !config.theme) throw new Error(`Config file ${configPath} does not contain theme configuration.`);
-    // Extract tokens from config
-        const tokens = config.theme.tokens || config.theme.extend || {};
-    if (0 === Object.keys(tokens).length) throw new Error(`Config file ${configPath} has empty theme configuration.`);
-    // Convert nested structure to flat tokens
-        return flattenConfigTokens(tokens, config.prefix || "atomix");
+ * @example
+ * ```typescript
+ * removeCSS(); // Removes default 'atomix-theme'
+ * removeCSS('my-custom-theme'); // Removes custom ID
+ * ```
+ */ function removeCSS(id = "atomix-theme") {
+    if (!isBrowser$1()) return;
+    const styleElement = document.getElementById(id);
+    styleElement && styleElement.remove();
 }
 
 /**
- * Core Theme Functions
+ * Check if CSS is already injected
  *
- * Unified theme system that handles both DesignTokens and Theme objects.
- * Config-first approach: loads from atomix.config.ts when no input is provided.
- * Config file is required for automatic loading.
+ * @param id - Style element ID to check (default: 'atomix-theme')
+ * @returns True if style element exists
+ */ function isCSSInjected(id = "atomix-theme") {
+    return !!isBrowser$1() && null !== document.getElementById(id);
+}
+
+/**
+ * CSS File Utilities
+ *
+ * Save CSS to file system (Node.js only).
  */
 /**
- * Create theme CSS from tokens or Theme object
+ * Save CSS to file
  *
- * **Config-First Approach**: If no input is provided, loads from `atomix.config.ts`.
- * Config file is required for automatic loading.
+ * Writes CSS string to a file. Only works in Node.js environment.
  *
- * @param input - DesignTokens (partial), Theme object, or undefined (loads from config)
- * @param options - CSS generation options (prefix is automatically read from config if not provided)
- * @returns CSS string with custom properties
- * @throws Error if config loading fails when no input is provided
+ * @param css - CSS string to save
+ * @param filePath - Output file path
+ * @throws Error if called in browser environment
  *
  * @example
  * ```typescript
- * // Loads from atomix.config.ts (config file required)
- * const css = createTheme();
- *
- * // Using DesignTokens
- * const css = createTheme({
- *   'primary': '#7c3aed',
- *   'spacing-4': '1rem',
- * });
- *
- * // Using Theme object
- * const theme = createThemeObject({ palette: { primary: { main: '#7c3aed' } } });
- * const css = createTheme(theme);
- *
- * // With custom options
- * const css = createTheme(undefined, { prefix: 'myapp', selector: ':root' });
+ * const css = ':root { --atomix-color-primary: #7AFFD7; }';
+ * await saveCSSFile(css, './themes/custom.css');
  * ```
- */ function createTheme(input, options) {
-    let tokens, configPrefix;
-    // If no input provided, load from config (required)
-    if (input) 
-    // Convert Theme to DesignTokens
-    tokens = !0 === input.__isJSTheme || input.palette && input.typography ? themeToDesignTokens(input) : input; else {
-        const configTokens = loadThemeFromConfigSync();
-        // Get prefix from config
-                try {
-            // eslint-disable-next-line @typescript-eslint/no-require-imports
-            const {loadAtomixConfig: loadAtomixConfig} = require("../../config/loader"), config = loadAtomixConfig({
-                configPath: "atomix.config.ts",
-                required: !0
-            });
-            configPrefix = config?.prefix;
-        } catch (error) {
-            // Prefix loading failed, but tokens were loaded, so continue
-        }
-        tokens = configTokens;
-    }
-    // Merge with defaults and generate CSS
-        return generateCSSVariables$1(createTokens(tokens), {
-        ...options,
-        prefix: options?.prefix ?? configPrefix ?? "atomix"
-    });
+ */ var commonjsGlobal = "undefined" != typeof globalThis ? globalThis : "undefined" != typeof window ? window : "undefined" != typeof global ? global : "undefined" != typeof self ? self : {};
+
+function getDefaultExportFromCjs(x) {
+    return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x.default : x;
 }
 
-var aCallable = aCallable$3, toObject = toObject$2, IndexedObject = indexedObject, lengthOfArrayLike = lengthOfArrayLike$2, $TypeError = TypeError, REDUCE_EMPTY = "Reduce of empty array with no initial value", createMethod = function(IS_RIGHT) {
-    return function(that, callbackfn, argumentsLength, memo) {
-        var O = toObject(that), self = IndexedObject(O), length = lengthOfArrayLike(O);
-        if (aCallable(callbackfn), 0 === length && argumentsLength < 2) throw new $TypeError(REDUCE_EMPTY);
-        var index = IS_RIGHT ? length - 1 : 0, i = IS_RIGHT ? -1 : 1;
-        if (argumentsLength < 2) for (;;) {
-            if (index in self) {
-                memo = self[index], index += i;
-                break;
-            }
-            if (index += i, IS_RIGHT ? index < 0 : length <= index) throw new $TypeError(REDUCE_EMPTY);
-        }
-        for (;IS_RIGHT ? index >= 0 : length > index; index += i) index in self && (memo = callbackfn(memo, self[index], index, O));
-        return memo;
-    };
-}, arrayReduce = {
-    // `Array.prototype.reduce` method
-    // https://tc39.es/ecma262/#sec-array.prototype.reduce
-    left: createMethod(!1),
-    // `Array.prototype.reduceRight` method
-    // https://tc39.es/ecma262/#sec-array.prototype.reduceright
-    right: createMethod(!0)
-}, fails = fails$9, globalThis$1 = globalThis_1, userAgent = environmentUserAgent, classof = classofRaw$2, userAgentStartsWith = function(string) {
-    return userAgent.slice(0, string.length) === string;
-}, environment = userAgentStartsWith("Bun/") ? "BUN" : userAgentStartsWith("Cloudflare-Workers") ? "CLOUDFLARE" : userAgentStartsWith("Deno/") ? "DENO" : userAgentStartsWith("Node.js/") ? "NODE" : globalThis$1.Bun && "string" == typeof Bun.version ? "BUN" : globalThis$1.Deno && "object" == typeof Deno.version ? "DENO" : "process" === classof(globalThis$1.process) ? "NODE" : globalThis$1.window && globalThis$1.document ? "BROWSER" : "REST", $reduce = arrayReduce.left;
-
-// `Array.prototype.reduce` method
-// https://tc39.es/ecma262/#sec-array.prototype.reduce
-_export({
-    target: "Array",
-    proto: !0,
-    forced: !("NODE" === environment) && environmentV8Version > 79 && environmentV8Version < 83 || !function(METHOD_NAME, argument) {
-        var method = [][METHOD_NAME];
-        return !!method && fails((function() {
-            // eslint-disable-next-line no-useless-call -- required for testing
-            method.call(null, argument || function() {
-                return 1;
-            }, 1);
-        }));
-    }("reduce")
-}, {
-    reduce: function(callbackfn /* , initialValue */) {
-        var length = arguments.length;
-        return $reduce(this, callbackfn, length, length > 1 ? arguments[1] : void 0);
+var fails$9 = function(exec) {
+    try {
+        return !!exec();
+    } catch (error) {
+        return !0;
     }
-});
+}, functionBindNative = !fails$9((function() {
+    // eslint-disable-next-line es/no-function-prototype-bind -- safe
+    var test = function() {/* empty */}.bind();
+    // eslint-disable-next-line no-prototype-builtins -- safe
+        return "function" != typeof test || test.hasOwnProperty("prototype");
+})), NATIVE_BIND$3 = functionBindNative, FunctionPrototype$1 = Function.prototype, call$5 = FunctionPrototype$1.call, uncurryThisWithBind = NATIVE_BIND$3 && FunctionPrototype$1.bind.bind(call$5, call$5), functionUncurryThis = NATIVE_BIND$3 ? uncurryThisWithBind : function(fn) {
+    return function() {
+        return call$5.apply(fn, arguments);
+    };
+}, objectIsPrototypeOf = functionUncurryThis({}.isPrototypeOf), check = function(it) {
+    return it && it.Math === Math && it;
+}, globalThis_1 = 
+// eslint-disable-next-line es/no-global-this -- safe
+check("object" == typeof globalThis && globalThis) || check("object" == typeof window && window) || 
+// eslint-disable-next-line no-restricted-globals -- safe
+check("object" == typeof self && self) || check("object" == typeof commonjsGlobal && commonjsGlobal) || check("object" == typeof commonjsGlobal && commonjsGlobal) || 
+// eslint-disable-next-line no-new-func -- fallback
+function() {
+    return this;
+}() || Function("return this")(), NATIVE_BIND$2 = functionBindNative, FunctionPrototype = Function.prototype, apply$1 = FunctionPrototype.apply, call$4 = FunctionPrototype.call, functionApply = "object" == typeof Reflect && Reflect.apply || (NATIVE_BIND$2 ? call$4.bind(apply$1) : function() {
+    return call$4.apply(apply$1, arguments);
+}), uncurryThis$7 = functionUncurryThis, toString$3 = uncurryThis$7({}.toString), stringSlice = uncurryThis$7("".slice), classofRaw$2 = function(it) {
+    return stringSlice(toString$3(it), 8, -1);
+}, classofRaw$1 = classofRaw$2, uncurryThis$6 = functionUncurryThis, functionUncurryThisClause = function(fn) {
+    // Nashorn bug:
+    //   https://github.com/zloirock/core-js/issues/1128
+    //   https://github.com/zloirock/core-js/issues/1130
+    if ("Function" === classofRaw$1(fn)) return uncurryThis$6(fn);
+}, documentAll = "object" == typeof document && document.all, isCallable$8 = void 0 === documentAll && void 0 !== documentAll ? function(argument) {
+    return "function" == typeof argument || argument === documentAll;
+} : function(argument) {
+    return "function" == typeof argument;
+}, objectGetOwnPropertyDescriptor = {}, descriptors = !fails$9((function() {
+    // eslint-disable-next-line es/no-object-defineproperty -- required for testing
+    return 7 !== Object.defineProperty({}, 1, {
+        get: function() {
+            return 7;
+        }
+    })[1];
+})), NATIVE_BIND$1 = functionBindNative, call$3 = Function.prototype.call, functionCall = NATIVE_BIND$1 ? call$3.bind(call$3) : function() {
+    return call$3.apply(call$3, arguments);
+}, objectPropertyIsEnumerable = {}, $propertyIsEnumerable = {}.propertyIsEnumerable, getOwnPropertyDescriptor$1 = Object.getOwnPropertyDescriptor, NASHORN_BUG = getOwnPropertyDescriptor$1 && !$propertyIsEnumerable.call({
+    1: 2
+}, 1);
 
-var reduce$3 = getBuiltInPrototypeMethod$3("Array", "reduce"), isPrototypeOf = objectIsPrototypeOf, method = reduce$3, ArrayPrototype = Array.prototype;
+// `Object.prototype.propertyIsEnumerable` method implementation
+// https://tc39.es/ecma262/#sec-object.prototype.propertyisenumerable
+objectPropertyIsEnumerable.f = NASHORN_BUG ? function(V) {
+    var descriptor = getOwnPropertyDescriptor$1(this, V);
+    return !!descriptor && descriptor.enumerable;
+} : $propertyIsEnumerable;
 
-const _reduceInstanceProperty =  getDefaultExportFromCjs((function(it) {
-    var own = it.reduce;
-    return it === ArrayPrototype || isPrototypeOf(ArrayPrototype, it) && own === ArrayPrototype.reduce ? method : own;
-}));
+var match, version, createPropertyDescriptor$2 = function(bitmap, value) {
+    return {
+        enumerable: !(1 & bitmap),
+        configurable: !(2 & bitmap),
+        writable: !(4 & bitmap),
+        value: value
+    };
+}, fails$6 = fails$9, classof$4 = classofRaw$2, $Object$3 = Object, split = functionUncurryThis("".split), indexedObject = fails$6((function() {
+    // throws an error in rhino, see https://github.com/mozilla/rhino/issues/346
+    // eslint-disable-next-line no-prototype-builtins -- safe
+    return !$Object$3("z").propertyIsEnumerable(0);
+})) ? function(it) {
+    return "String" === classof$4(it) ? split(it, "") : $Object$3(it);
+} : $Object$3, isNullOrUndefined$2 = function(it) {
+    return null == it;
+}, isNullOrUndefined$1 = isNullOrUndefined$2, $TypeError$7 = TypeError, requireObjectCoercible$3 = function(it) {
+    if (isNullOrUndefined$1(it)) throw new $TypeError$7("Can't call method on " + it);
+    return it;
+}, IndexedObject$1 = indexedObject, requireObjectCoercible$2 = requireObjectCoercible$3, toIndexedObject$2 = function(it) {
+    return IndexedObject$1(requireObjectCoercible$2(it));
+}, isCallable$7 = isCallable$8, isObject$5 = function(it) {
+    return "object" == typeof it ? null !== it : isCallable$7(it);
+}, path$3 = {}, path$2 = path$3, globalThis$b = globalThis_1, isCallable$6 = isCallable$8, aFunction = function(variable) {
+    return isCallable$6(variable) ? variable : void 0;
+}, navigator$1 = globalThis_1.navigator, userAgent$2 = navigator$1 && navigator$1.userAgent, environmentUserAgent = userAgent$2 ? String(userAgent$2) : "", globalThis$9 = globalThis_1, userAgent$1 = environmentUserAgent, process$1 = globalThis$9.process, Deno$1 = globalThis$9.Deno, versions = process$1 && process$1.versions || Deno$1 && Deno$1.version, v8 = versions && versions.v8;
 
-/**
- * Theme Composition Utilities
- *
- * Utilities for composing, merging, and extending themes.
- */
-// ============================================================================
-// Deep Merge Utility
-// ============================================================================
-/**
- * Check if value is an object
- */ function isObject(item) {
-    return item && "object" == typeof item && !Array.isArray(item) && "function" != typeof item;
-}
+v8 && (
+// in old Chrome, versions of V8 isn't V8 = Chrome / 10
+// but their correct versions are not interesting for us
+version = (match = v8.split("."))[0] > 0 && match[0] < 4 ? 1 : +(match[0] + match[1])), 
+// BrowserFS NodeJS `process` polyfill incorrectly set `.v8` to `0.0`
+// so check `userAgent` even if `.v8` exists, but 0
+!version && userAgent$1 && (!(match = userAgent$1.match(/Edge\/(\d+)/)) || match[1] >= 74) && (match = userAgent$1.match(/Chrome\/(\d+)/)) && (version = +match[1]);
 
-/**
- * Deep merge multiple objects
- * Later objects override earlier ones
- */ function deepMerge(...objects) {
-    if (0 === objects.length) return {};
-    if (1 === objects.length) return objects[0];
-    const [target, ...sources] = objects, result = {
-        ...target
-    };
-    for (const source of sources) if (source) for (const key in source) {
-        if (!Object.prototype.hasOwnProperty.call(source, key)) continue;
-        const targetValue = result[key], sourceValue = source[key];
-        isObject(targetValue) && isObject(sourceValue) ? 
-        // Recursively merge objects
-        result[key] = deepMerge(targetValue, sourceValue) : 
-        // Override with source value
-        result[key] = sourceValue;
+var environmentV8Version = version, V8_VERSION = environmentV8Version, fails$5 = fails$9, $String$3 = globalThis_1.String, symbolConstructorDetection = !!Object.getOwnPropertySymbols && !fails$5((function() {
+    var symbol = Symbol("symbol detection");
+    // Chrome 38 Symbol has incorrect toString conversion
+    // `get-own-property-symbols` polyfill symbols converted to object are not Symbol instances
+    // nb: Do not call `String` directly to avoid this being optimized out to `symbol+''` which will,
+    // of course, fail.
+        return !$String$3(symbol) || !(Object(symbol) instanceof Symbol) || 
+    // Chrome 38-40 symbols are not inherited from DOM collections prototypes to instances
+    !Symbol.sham && V8_VERSION && V8_VERSION < 41;
+})), useSymbolAsUid = symbolConstructorDetection && !Symbol.sham && "symbol" == typeof Symbol.iterator, isCallable$5 = isCallable$8, isPrototypeOf$2 = objectIsPrototypeOf, $Object$2 = Object, isSymbol$2 = useSymbolAsUid ? function(it) {
+    return "symbol" == typeof it;
+} : function(it) {
+    var $Symbol = function(namespace, method) {
+        return arguments.length < 2 ? aFunction(path$2[namespace]) || aFunction(globalThis$b[namespace]) : path$2[namespace] && path$2[namespace][method] || globalThis$b[namespace] && globalThis$b[namespace][method];
+    }("Symbol");
+    return isCallable$5($Symbol) && isPrototypeOf$2($Symbol.prototype, $Object$2(it));
+}, $String$2 = String, isCallable$4 = isCallable$8, $TypeError$6 = TypeError, aCallable$3 = function(argument) {
+    if (isCallable$4(argument)) return argument;
+    throw new $TypeError$6(function(argument) {
+        try {
+            return $String$2(argument);
+        } catch (error) {
+            return "Object";
+        }
+    }(argument) + " is not a function");
+}, aCallable$2 = aCallable$3, isNullOrUndefined = isNullOrUndefined$2, call$2 = functionCall, isCallable$3 = isCallable$8, isObject$4 = isObject$5, $TypeError$5 = TypeError, sharedStore = {
+    exports: {}
+}, globalThis$7 = globalThis_1, defineProperty = Object.defineProperty, globalThis$6 = globalThis_1, store$1 = sharedStore.exports = globalThis$6["__core-js_shared__"] || function(key, value) {
+    try {
+        defineProperty(globalThis$7, key, {
+            value: value,
+            configurable: !0,
+            writable: !0
+        });
+    } catch (error) {
+        globalThis$7[key] = value;
     }
-    return result;
-}
+    return value;
+}("__core-js_shared__", {});
 
-// ============================================================================
-// Theme Merging
-// ============================================================================
-/**
- * Merge multiple theme options into a single theme options object
- *
- * @param themes - Theme options to merge
- * @returns Merged theme options
- *
- * @example
- * ```typescript
- * const baseTheme = { palette: { primary: { main: '#000' } } };
- * const customTheme = { palette: { secondary: { main: '#fff' } } };
- * const merged = mergeTheme(baseTheme, customTheme);
- * ```
- */ function mergeTheme(...themes) {
-    return deepMerge({}, ...themes);
-}
+/* eslint-disable es/no-symbol -- required for testing */ (store$1.versions || (store$1.versions = [])).push({
+    version: "3.43.0",
+    mode: "pure",
+    copyright: "© 2014-2025 Denis Pushkarev (zloirock.ru)",
+    license: "https://github.com/zloirock/core-js/blob/v3.43.0/LICENSE",
+    source: "https://github.com/zloirock/core-js"
+});
 
-/**
- * Extend an existing theme with new options
- *
- * @param baseTheme - Base theme to extend (can be Theme or ThemeOptions)
- * @param extension - Theme options to extend with
- * @returns New theme with extended options
- *
- * @example
- * ```typescript
- * const base = createTheme({ palette: { primary: { main: '#000' } } });
- * const extended = extendTheme(base, {
- *   palette: { secondary: { main: '#fff' } }
- * });
- * ```
- */ function extendTheme(baseTheme, extension) {
-    /**
- * Extract theme options from a complete Theme object
- */
-    var theme;
-    // ============================================================================
-    // Default Theme Values
-    // ============================================================================
-        return createThemeObject(mergeTheme(baseTheme.__isJSTheme ? {
-        name: (theme = baseTheme).name,
-        class: theme.class,
-        description: theme.description,
-        author: theme.author,
-        version: theme.version,
-        tags: theme.tags,
-        supportsDarkMode: theme.supportsDarkMode,
-        status: theme.status,
-        a11y: theme.a11y,
-        color: theme.color,
-        features: theme.features,
-        dependencies: theme.dependencies,
-        palette: {
-            primary: theme.palette.primary,
-            secondary: theme.palette.secondary,
-            error: theme.palette.error,
-            warning: theme.palette.warning,
-            info: theme.palette.info,
-            success: theme.palette.success,
-            background: theme.palette.background,
-            text: theme.palette.text
-        },
-        typography: {
-            fontFamily: theme.typography.fontFamily,
-            fontSize: theme.typography.fontSize,
-            fontWeightLight: theme.typography.fontWeightLight,
-            fontWeightRegular: theme.typography.fontWeightRegular,
-            fontWeightMedium: theme.typography.fontWeightMedium,
-            fontWeightSemiBold: theme.typography.fontWeightSemiBold,
-            fontWeightBold: theme.typography.fontWeightBold,
-            h1: theme.typography.h1,
-            h2: theme.typography.h2,
-            h3: theme.typography.h3,
-            h4: theme.typography.h4,
-            h5: theme.typography.h5,
-            h6: theme.typography.h6,
-            body1: theme.typography.body1,
-            body2: theme.typography.body2
-        },
-        shadows: theme.shadows,
-        transitions: theme.transitions,
-        zIndex: theme.zIndex,
-        custom: theme.custom
-    } : baseTheme, extension));
-}
+var key, value, store = sharedStore.exports, requireObjectCoercible$1 = requireObjectCoercible$3, $Object$1 = Object, toObject$2 = function(argument) {
+    return $Object$1(requireObjectCoercible$1(argument));
+}, toObject$1 = toObject$2, hasOwnProperty = functionUncurryThis({}.hasOwnProperty), hasOwnProperty_1 = Object.hasOwn || function(it, key) {
+    return hasOwnProperty(toObject$1(it), key);
+}, uncurryThis$3 = functionUncurryThis, id = 0, postfix = Math.random(), toString$2 = uncurryThis$3(1.1.toString), hasOwn$2 = hasOwnProperty_1, NATIVE_SYMBOL = symbolConstructorDetection, USE_SYMBOL_AS_UID = useSymbolAsUid, Symbol$1 = globalThis_1.Symbol, WellKnownSymbolsStore = store[key = "wks"] || (store[key] = value || {}), createWellKnownSymbol = USE_SYMBOL_AS_UID ? Symbol$1.for || Symbol$1 : Symbol$1 && Symbol$1.withoutSetter || function(key) {
+    return "Symbol(" + (void 0 === key ? "" : key) + ")_" + toString$2(++id + postfix, 36);
+}, wellKnownSymbol$5 = function(name) {
+    return hasOwn$2(WellKnownSymbolsStore, name) || (WellKnownSymbolsStore[name] = NATIVE_SYMBOL && hasOwn$2(Symbol$1, name) ? Symbol$1[name] : createWellKnownSymbol("Symbol." + name)), 
+    WellKnownSymbolsStore[name];
+}, call$1 = functionCall, isObject$3 = isObject$5, isSymbol$1 = isSymbol$2, $TypeError$4 = TypeError, TO_PRIMITIVE = wellKnownSymbol$5("toPrimitive"), toPrimitive = function(input, pref) {
+    if (!isObject$3(input) || isSymbol$1(input)) return input;
+    var result, func, exoticToPrim = (func = input[TO_PRIMITIVE], isNullOrUndefined(func) ? void 0 : aCallable$2(func));
+    if (exoticToPrim) {
+        if (void 0 === pref && (pref = "default"), result = call$1(exoticToPrim, input, pref), 
+        !isObject$3(result) || isSymbol$1(result)) return result;
+        throw new $TypeError$4("Can't convert object to primitive value");
+    }
+    return void 0 === pref && (pref = "number"), function(input, pref) {
+        var fn, val;
+        if ("string" === pref && isCallable$3(fn = input.toString) && !isObject$4(val = call$2(fn, input))) return val;
+        if (isCallable$3(fn = input.valueOf) && !isObject$4(val = call$2(fn, input))) return val;
+        if ("string" !== pref && isCallable$3(fn = input.toString) && !isObject$4(val = call$2(fn, input))) return val;
+        throw new $TypeError$5("Can't convert object to primitive value");
+    }(input, pref);
+}, isSymbol = isSymbol$2, toPropertyKey$2 = function(argument) {
+    var key = toPrimitive(argument, "string");
+    return isSymbol(key) ? key : key + "";
+}, isObject$2 = isObject$5, document$1 = globalThis_1.document, EXISTS = isObject$2(document$1) && isObject$2(document$1.createElement), ie8DomDefine = !descriptors && !fails$9((function() {
+    // eslint-disable-next-line es/no-object-defineproperty -- required for testing
+    return 7 !== Object.defineProperty((it = "div", EXISTS ? document$1.createElement(it) : {}), "a", {
+        get: function() {
+            return 7;
+        }
+    }).a;
+    var it;
+})), DESCRIPTORS$3 = descriptors, call = functionCall, propertyIsEnumerableModule = objectPropertyIsEnumerable, createPropertyDescriptor$1 = createPropertyDescriptor$2, toIndexedObject$1 = toIndexedObject$2, toPropertyKey$1 = toPropertyKey$2, hasOwn$1 = hasOwnProperty_1, IE8_DOM_DEFINE$1 = ie8DomDefine, $getOwnPropertyDescriptor$1 = Object.getOwnPropertyDescriptor;
 
-const DEFAULT_PALETTE = {
-    primary: {
-        main: "#7c3aed",
-        // Primary-6
-        light: "#d0b2f5",
-        // Primary-3
-        dark: "#3c1583",
-        // Primary-9
-        contrastText: "#ffffff"
-    },
-    secondary: {
-        main: "#f3f4f6",
-        // Gray-2
-        light: "#ffffff",
-        // Gray-1
-        dark: "#e5e7eb",
-        // Gray-3
-        contrastText: "#1f2937"
-    },
-    error: {
-        main: "#ef4444",
-        // Red-6
-        light: "#fca5a5",
-        // Red-4
-        dark: "#991b1b",
-        // Red-9
-        contrastText: "#ffffff"
-    },
-    warning: {
-        main: "#eab308",
-        // Yellow-6
-        light: "#fde047",
-        // Yellow-4
-        dark: "#854d0e",
-        // Yellow-9
-        contrastText: "#000000"
-    },
-    info: {
-        main: "#3b82f6",
-        // Blue-6
-        light: "#93c5fd",
-        // Blue-4
-        dark: "#1e40af",
-        // Blue-9
-        contrastText: "#ffffff"
-    },
-    success: {
-        main: "#22c55e",
-        // Green-6
-        light: "#86efac",
-        // Green-4
-        dark: "#166534",
-        // Green-9
-        contrastText: "#ffffff"
-    },
-    background: {
-        default: "#ffffff",
-        // Primary-bg
-        paper: "#f3f4f6",
-        // Secondary-bg
-        subtle: "#d1d5db"
-    },
-    text: {
-        primary: "#111827",
-        // Gray-10
-        secondary: "#374151",
-        // Gray-8
-        disabled: "#9ca3af"
-    }
-}, DEFAULT_TYPOGRAPHY = {
-    fontFamily: '"Roboto", "Helvetica Neue", "Helvetica", "Arial", sans-serif',
-    fontSize: 16,
-    // 1rem
-    fontWeightLight: 300,
-    fontWeightRegular: 400,
-    fontWeightMedium: 500,
-    fontWeightSemiBold: 600,
-    fontWeightBold: 700,
-    fontWeightHeavy: 800,
-    fontWeightBlack: 900,
-    h1: {
-        fontSize: "2.5rem",
-        // 40px
-        fontWeight: 700,
-        lineHeight: 1.3,
-        letterSpacing: "-1px"
-    },
-    h2: {
-        fontSize: "2rem",
-        // 32px
-        fontWeight: 700,
-        lineHeight: 1.3,
-        letterSpacing: "-1px"
-    },
-    h3: {
-        fontSize: "1.5rem",
-        // 24px
-        fontWeight: 700,
-        lineHeight: 1.3,
-        letterSpacing: "-1px"
-    },
-    h4: {
-        fontSize: "1.25rem",
-        // 20px
-        fontWeight: 700,
-        lineHeight: 1.3,
-        letterSpacing: "-0.5px"
-    },
-    h5: {
-        fontSize: "1.125rem",
-        // 18px
-        fontWeight: 700,
-        lineHeight: 1.3,
-        letterSpacing: "-0.5px"
-    },
-    h6: {
-        fontSize: "1rem",
-        // 16px
-        fontWeight: 700,
-        lineHeight: 1.3,
-        letterSpacing: "-0.5px"
-    },
-    body1: {
-        fontSize: "1rem",
-        // 16px
-        fontWeight: 400,
-        lineHeight: 1.2
-    },
-    body2: {
-        fontSize: "0.875rem",
-        // 14px
-        fontWeight: 400,
-        lineHeight: 1.2
-    }
-}, DEFAULT_SHADOWS = {
-    xs: "0px 1px 2px 0px rgba(45, 54, 67, 0.04), 0px 2px 4px 0px rgba(45, 54, 67, 0.08)",
-    sm: "0 2px 4px rgba(0, 0, 0, 0.075)",
-    md: "0 4px 8px rgba(0, 0, 0, 0.1)",
-    lg: "0 16px 48px rgba(0, 0, 0, 0.175)",
-    xl: "0px 16px 64px -8px rgba(45, 54, 67, 0.14)",
-    inset: "inset 0 1px 2px rgba(0, 0, 0, 0.075)"
-}, DEFAULT_TRANSITIONS = {
-    duration: {
-        shortest: 150,
-        shorter: 200,
-        short: 250,
-        standard: 300,
-        complex: 375,
-        enteringScreen: 225,
-        leavingScreen: 195
-    },
-    easing: {
-        easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)",
-        easeOut: "cubic-bezier(0.0, 0, 0.2, 1)",
-        easeIn: "cubic-bezier(0.4, 0, 1, 1)",
-        sharp: "cubic-bezier(0.4, 0, 0.6, 1)"
-    }
-}, DEFAULT_ZINDEX = {
-    mobileStepper: 1e3,
-    speedDial: 1050,
-    appBar: 1020,
-    drawer: 1070,
-    modal: 1040,
-    snackbar: 1080,
-    tooltip: 1060
-}, DEFAULT_BORDER_RADIUS = {
-    base: "0.5rem",
-    // 8px (spacing-2)
-    sm: "0.25rem",
-    // 4px (spacing-1)
-    md: "0.25rem",
-    // 4px (spacing-1)
-    lg: "0.625rem",
-    // 10px (spacing-2.5)
-    xl: "0.75rem",
-    // 12px (spacing-3)
-    xxl: "1rem",
-    // 16px (spacing-4)
-    "3xl": "1.5rem",
-    // 24px (spacing-6)
-    "4xl": "2rem",
-    // 32px (spacing-8)
-    pill: "50rem"
+// `Object.getOwnPropertyDescriptor` method
+// https://tc39.es/ecma262/#sec-object.getownpropertydescriptor
+objectGetOwnPropertyDescriptor.f = DESCRIPTORS$3 ? $getOwnPropertyDescriptor$1 : function(O, P) {
+    if (O = toIndexedObject$1(O), P = toPropertyKey$1(P), IE8_DOM_DEFINE$1) try {
+        return $getOwnPropertyDescriptor$1(O, P);
+    } catch (error) {/* empty */}
+    if (hasOwn$1(O, P)) return createPropertyDescriptor$1(!call(propertyIsEnumerableModule.f, O, P), O[P]);
 };
 
-// ============================================================================
-// Helper Functions
-// ============================================================================
-/**
- * Create a complete palette color from partial configuration
- */
-function createPaletteColor(color) {
-    return "string" == typeof color ? {
-        main: color,
-        light: lighten(color),
-        dark: darken(color),
-        contrastText: getContrastText(color)
-    } : {
-        main: color.main || "#000000",
-        light: color.light || lighten(color.main || "#000000"),
-        dark: color.dark || darken(color.main || "#000000"),
-        contrastText: color.contrastText || getContrastText(color.main || "#000000")
-    };
-}
+var fails$3 = fails$9, isCallable$2 = isCallable$8, replacement = /#|\.prototype\./, isForced$1 = function(feature, detection) {
+    var value = data[normalize(feature)];
+    return value === POLYFILL || value !== NATIVE && (isCallable$2(detection) ? fails$3(detection) : !!detection);
+}, normalize = isForced$1.normalize = function(string) {
+    return String(string).replace(replacement, ".").toLowerCase();
+}, data = isForced$1.data = {}, NATIVE = isForced$1.NATIVE = "N", POLYFILL = isForced$1.POLYFILL = "P", isForced_1 = isForced$1, aCallable$1 = aCallable$3, NATIVE_BIND = functionBindNative, bind$1 = functionUncurryThisClause(functionUncurryThisClause.bind), objectDefineProperty = {}, v8PrototypeDefineBug = descriptors && fails$9((function() {
+    // eslint-disable-next-line es/no-object-defineproperty -- required for testing
+    return 42 !== Object.defineProperty((function() {/* empty */}), "prototype", {
+        value: 42,
+        writable: !1
+    }).prototype;
+})), isObject$1 = isObject$5, $String$1 = String, $TypeError$3 = TypeError, DESCRIPTORS$1 = descriptors, IE8_DOM_DEFINE = ie8DomDefine, V8_PROTOTYPE_DEFINE_BUG = v8PrototypeDefineBug, anObject = function(argument) {
+    if (isObject$1(argument)) return argument;
+    throw new $TypeError$3($String$1(argument) + " is not an object");
+}, toPropertyKey = toPropertyKey$2, $TypeError$2 = TypeError, $defineProperty = Object.defineProperty, $getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;
 
-/**
- * Create breakpoints object
- */
-// ============================================================================
-// Main createTheme Function
-// ============================================================================
-/**
- * Create a theme object with computed values
- *
- * @param options - Theme configuration options
- * @returns Complete theme object
- */
-function createThemeObject(...options) {
-    // Merge all options
-    const mergedOptions = _reduceInstanceProperty(options).call(options, ((acc, option) => deepMerge(acc, option)), {}), palette = {
-        primary: createPaletteColor(mergedOptions.palette?.primary || DEFAULT_PALETTE.primary),
-        secondary: createPaletteColor(mergedOptions.palette?.secondary || DEFAULT_PALETTE.secondary),
-        error: createPaletteColor(mergedOptions.palette?.error || DEFAULT_PALETTE.error),
-        warning: createPaletteColor(mergedOptions.palette?.warning || DEFAULT_PALETTE.warning),
-        info: createPaletteColor(mergedOptions.palette?.info || DEFAULT_PALETTE.info),
-        success: createPaletteColor(mergedOptions.palette?.success || DEFAULT_PALETTE.success),
-        // Handle light and dark colors if provided
-        ...mergedOptions.palette?.light && {
-            light: createPaletteColor(mergedOptions.palette.light)
-        },
-        ...mergedOptions.palette?.dark && {
-            dark: createPaletteColor(mergedOptions.palette.dark)
-        },
-        background: {
-            default: mergedOptions.palette?.background?.default || DEFAULT_PALETTE.background.default,
-            subtle: mergedOptions.palette?.background?.subtle || DEFAULT_PALETTE.background.subtle
-        },
-        text: {
-            primary: mergedOptions.palette?.text?.primary || DEFAULT_PALETTE.text.primary,
-            secondary: mergedOptions.palette?.text?.secondary || DEFAULT_PALETTE.text.secondary,
-            disabled: mergedOptions.palette?.text?.disabled || DEFAULT_PALETTE.text.disabled
-        }
-    }, typography = deepMerge({
-        ...DEFAULT_TYPOGRAPHY
-    }, mergedOptions.typography || {}), spacing = 
-    // ============================================================================
-    // Spacing Utilities
-    // ============================================================================
-    /**
- * Create a spacing function from various input types
- *
- * @param spacingInput - Spacing configuration (number, array, or function), default 4
- * @returns Spacing function
- */
-    function(spacingInput = 4) {
-        // If it's already a function, return it
-        return "function" == typeof spacingInput ? spacingInput : 
-        // If it's a number, create a function that multiplies by that number
-        "number" == typeof spacingInput ? (...values) => 0 === values.length ? "0px" : values.map((value => value * spacingInput + "px")).join(" ") : 
-        // If it's an array, use it as a scale
-        Array.isArray(spacingInput) ? (...values) => 0 === values.length ? "0px" : values.map((value => `${spacingInput[value] || value}px`)).join(" ") : (...values) => 0 === values.length ? "0px" : values.map((value => 4 * value + "px")).join(" ");
-    }(mergedOptions.spacing), breakpoints = function(breakpointsInput) {
-        const values = {
-            xs: 0,
-            sm: 576,
-            md: 768,
-            lg: 992,
-            xl: 1200,
-            xxl: 1440,
-            ...breakpointsInput?.values
-        }, unit = breakpointsInput?.unit || "px";
-        return {
-            values: values,
-            unit: unit,
-            up: key => `@media (min-width:${"number" == typeof key ? key : values[key] ?? 0}${unit})`,
-            down: key => `@media (max-width:${("number" == typeof key ? key : values[key] ?? 0) - .05}${unit})`,
-            between: (start, end) => {
-                const startValue = "number" == typeof start ? start : values[start] ?? 0, endValue = "number" == typeof end ? end : values[end] ?? 0;
-                return `@media (min-width:${startValue}${unit}) and (max-width:${endValue - .05}${unit})`;
-            }
-        };
-    }(mergedOptions.breakpoints), shadows = deepMerge({
-        ...DEFAULT_SHADOWS
-    }, mergedOptions.shadows || {}), transitions = deepMerge({
-        ...DEFAULT_TRANSITIONS
-    }, mergedOptions.transitions || {}), zIndex = deepMerge({
-        ...DEFAULT_ZINDEX
-    }, mergedOptions.zIndex || {}), borderRadius = deepMerge({
-        ...DEFAULT_BORDER_RADIUS
-    }, mergedOptions.borderRadius || {});
-    // Create palette
-        return {
-        // Metadata
-        name: mergedOptions.name || "Custom Theme",
-        class: mergedOptions.class,
-        description: mergedOptions.description,
-        author: mergedOptions.author,
-        version: mergedOptions.version || "1.0.0",
-        tags: mergedOptions.tags,
-        supportsDarkMode: mergedOptions.supportsDarkMode,
-        status: mergedOptions.status || "experimental",
-        a11y: mergedOptions.a11y,
-        color: mergedOptions.color || palette.primary.main,
-        features: mergedOptions.features,
-        dependencies: mergedOptions.dependencies,
-        // Theme configuration
-        palette: palette,
-        typography: typography,
-        spacing: spacing,
-        breakpoints: breakpoints,
-        shadows: shadows,
-        transitions: transitions,
-        zIndex: zIndex,
-        borderRadius: borderRadius,
-        custom: mergedOptions.custom || {},
-        // Mark as JS theme
-        __isJSTheme: !0
-    };
-}
+// `Object.defineProperty` method
+// https://tc39.es/ecma262/#sec-object.defineproperty
+objectDefineProperty.f = DESCRIPTORS$1 ? V8_PROTOTYPE_DEFINE_BUG ? function(O, P, Attributes) {
+    if (anObject(O), P = toPropertyKey(P), anObject(Attributes), "function" == typeof O && "prototype" === P && "value" in Attributes && "writable" in Attributes && !Attributes.writable) {
+        var current = $getOwnPropertyDescriptor(O, P);
+        current && current.writable && (O[P] = Attributes.value, Attributes = {
+            configurable: "configurable" in Attributes ? Attributes.configurable : current.configurable,
+            enumerable: "enumerable" in Attributes ? Attributes.enumerable : current.enumerable,
+            writable: !1
+        });
+    }
+    return $defineProperty(O, P, Attributes);
+} : $defineProperty : function(O, P, Attributes) {
+    if (anObject(O), P = toPropertyKey(P), anObject(Attributes), IE8_DOM_DEFINE) try {
+        return $defineProperty(O, P, Attributes);
+    } catch (error) {/* empty */}
+    if ("get" in Attributes || "set" in Attributes) throw new $TypeError$2("Accessors not supported");
+    return "value" in Attributes && (O[P] = Attributes.value), O;
+};
 
-/**
- * Theme Configuration Validator
- *
- * Validates theme configuration structure and values
- */
-/**
- * Validate theme configuration
- *
- * @param config - Configuration to validate
- * @returns Validation result with errors and warnings
- */
-/**
- * Validate CSS theme
- */
-function validateCSSTheme(themeId, theme) {
-    const errors = [];
-    // CSS themes don't require createTheme function
-    // But can have optional cssPath
-    return {
-        valid: 0 === errors.length,
-        errors: errors,
-        warnings: []
+var definePropertyModule = objectDefineProperty, createPropertyDescriptor = createPropertyDescriptor$2, createNonEnumerableProperty$1 = descriptors ? function(object, key, value) {
+    return definePropertyModule.f(object, key, createPropertyDescriptor(1, value));
+} : function(object, key, value) {
+    return object[key] = value, object;
+}, globalThis$3 = globalThis_1, apply = functionApply, uncurryThis$1 = functionUncurryThisClause, isCallable$1 = isCallable$8, getOwnPropertyDescriptor = objectGetOwnPropertyDescriptor.f, isForced = isForced_1, path$1 = path$3, bind = function(fn, that) {
+    return aCallable$1(fn), void 0 === that ? fn : NATIVE_BIND ? bind$1(fn, that) : function() {
+        return fn.apply(that, arguments);
     };
-}
+}, createNonEnumerableProperty = createNonEnumerableProperty$1, hasOwn = hasOwnProperty_1, wrapConstructor = function(NativeConstructor) {
+    var Wrapper = function(a, b, c) {
+        if (this instanceof Wrapper) {
+            switch (arguments.length) {
+              case 0:
+                return new NativeConstructor;
 
-/**
- * Validate JS theme
- */ function validateJSTheme(themeId, theme) {
-    const errors = [];
-    // JS themes must have createTheme function
-    return theme.createTheme && "function" == typeof theme.createTheme || errors.push(`JS theme "${themeId}" must have a "createTheme" function`), 
-    {
-        valid: 0 === errors.length,
-        errors: errors,
-        warnings: []
+              case 1:
+                return new NativeConstructor(a);
+
+              case 2:
+                return new NativeConstructor(a, b);
+            }
+            return new NativeConstructor(a, b, c);
+        }
+        return apply(NativeConstructor, this, arguments);
     };
-}
+    return Wrapper.prototype = NativeConstructor.prototype, Wrapper;
+}, _export = function(options, source) {
+    var FORCED, USE_NATIVE, VIRTUAL_PROTOTYPE, key, sourceProperty, targetProperty, nativeProperty, resultProperty, descriptor, TARGET = options.target, GLOBAL = options.global, STATIC = options.stat, PROTO = options.proto, nativeSource = GLOBAL ? globalThis$3 : STATIC ? globalThis$3[TARGET] : globalThis$3[TARGET] && globalThis$3[TARGET].prototype, target = GLOBAL ? path$1 : path$1[TARGET] || createNonEnumerableProperty(path$1, TARGET, {})[TARGET], targetPrototype = target.prototype;
+    for (key in source) 
+    // contains in native
+    USE_NATIVE = !(FORCED = isForced(GLOBAL ? key : TARGET + (STATIC ? "." : "#") + key, options.forced)) && nativeSource && hasOwn(nativeSource, key), 
+    targetProperty = target[key], USE_NATIVE && (nativeProperty = options.dontCallGetSet ? (descriptor = getOwnPropertyDescriptor(nativeSource, key)) && descriptor.value : nativeSource[key]), 
+    // export native or implementation
+    sourceProperty = USE_NATIVE && nativeProperty ? nativeProperty : source[key], (FORCED || PROTO || typeof targetProperty != typeof sourceProperty) && (
+    // bind methods to global for calling from export context
+    resultProperty = options.bind && USE_NATIVE ? bind(sourceProperty, globalThis$3) : options.wrap && USE_NATIVE ? wrapConstructor(sourceProperty) : PROTO && isCallable$1(sourceProperty) ? uncurryThis$1(sourceProperty) : sourceProperty, 
+    // add a flag to not completely full polyfills
+    (options.sham || sourceProperty && sourceProperty.sham || targetProperty && targetProperty.sham) && createNonEnumerableProperty(resultProperty, "sham", !0), 
+    createNonEnumerableProperty(target, key, resultProperty), PROTO && (hasOwn(path$1, VIRTUAL_PROTOTYPE = TARGET + "Prototype") || createNonEnumerableProperty(path$1, VIRTUAL_PROTOTYPE, {}), 
+    // export virtual prototype methods
+    createNonEnumerableProperty(path$1[VIRTUAL_PROTOTYPE], key, sourceProperty), 
+    // export real prototype methods
+    options.real && targetPrototype && (FORCED || !targetPrototype[key]) && createNonEnumerableProperty(targetPrototype, key, sourceProperty)));
+}, ceil = Math.ceil, floor = Math.floor, trunc = Math.trunc || function(x) {
+    var n = +x;
+    return (n > 0 ? floor : ceil)(n);
+}, toIntegerOrInfinity$2 = function(argument) {
+    var number = +argument;
+    // eslint-disable-next-line no-self-compare -- NaN check
+        return number != number || 0 === number ? 0 : trunc(number);
+}, toIntegerOrInfinity$1 = toIntegerOrInfinity$2, max = Math.max, min$1 = Math.min, toIntegerOrInfinity = toIntegerOrInfinity$2, min = Math.min, lengthOfArrayLike$2 = function(obj) {
+    return argument = obj.length, (len = toIntegerOrInfinity(argument)) > 0 ? min(len, 9007199254740991) : 0;
+    var argument, len;
+}, toIndexedObject = toIndexedObject$2, lengthOfArrayLike$1 = lengthOfArrayLike$2, createMethod$1 = function(IS_INCLUDES) {
+    return function($this, el, fromIndex) {
+        var O = toIndexedObject($this), length = lengthOfArrayLike$1(O);
+        if (0 === length) return !IS_INCLUDES && -1;
+        var value, index = function(index, length) {
+            var integer = toIntegerOrInfinity$1(index);
+            return integer < 0 ? max(integer + length, 0) : min$1(integer, length);
+        }(fromIndex, length);
+        // Array#includes uses SameValueZero equality algorithm
+        // eslint-disable-next-line no-self-compare -- NaN check
+        if (IS_INCLUDES && el != el) {
+            for (;length > index; ) 
+            // eslint-disable-next-line no-self-compare -- NaN check
+            if ((value = O[index++]) != value) return !0;
+            // Array#indexOf ignores holes, Array#includes - not
+                } else for (;length > index; index++) if ((IS_INCLUDES || index in O) && O[index] === el) return IS_INCLUDES || index || 0;
+        return !IS_INCLUDES && -1;
+    };
+}, $includes = [ createMethod$1(!0), createMethod$1(!1) ][0];
 
-/**
- * Validate build configuration
- */
-/**
- * Theme System Error Handling
- *
- * Centralized error handling for the Atomix theme system.
- * Provides custom error classes and logging utilities.
- */
-/**
- * Theme error codes
- */
-var ThemeErrorCode, LogLevel;
+// `Array.prototype.includes` method
+// https://tc39.es/ecma262/#sec-array.prototype.includes
+_export({
+    target: "Array",
+    proto: !0,
+    forced: fails$9((function() {
+        // eslint-disable-next-line es/no-array-prototype-includes -- detection
+        return !Array(1).includes();
+    }))
+}, {
+    includes: function(el /* , fromIndex = 0 */) {
+        return $includes(this, el, arguments.length > 1 ? arguments[1] : void 0);
+    }
+});
 
-!function(ThemeErrorCode) {
-    /** Theme not found in registry */
-    ThemeErrorCode.THEME_NOT_FOUND = "THEME_NOT_FOUND", 
-    /** Theme failed to load */
-    ThemeErrorCode.THEME_LOAD_FAILED = "THEME_LOAD_FAILED", 
-    /** Theme validation failed */
-    ThemeErrorCode.THEME_VALIDATION_FAILED = "THEME_VALIDATION_FAILED", 
-    /** Configuration loading failed */
-    ThemeErrorCode.CONFIG_LOAD_FAILED = "CONFIG_LOAD_FAILED", 
-    /** Configuration validation failed */
-    ThemeErrorCode.CONFIG_VALIDATION_FAILED = "CONFIG_VALIDATION_FAILED", 
-    /** Circular dependency detected */
-    ThemeErrorCode.CIRCULAR_DEPENDENCY = "CIRCULAR_DEPENDENCY", 
-    /** Missing dependency */
-    ThemeErrorCode.MISSING_DEPENDENCY = "MISSING_DEPENDENCY", 
-    /** Storage operation failed */
-    ThemeErrorCode.STORAGE_ERROR = "STORAGE_ERROR", 
-    /** Invalid theme name */
-    ThemeErrorCode.INVALID_THEME_NAME = "INVALID_THEME_NAME", 
-    /** CSS injection failed */
-    ThemeErrorCode.CSS_INJECTION_FAILED = "CSS_INJECTION_FAILED", 
-    /** Unknown error */
-    ThemeErrorCode.UNKNOWN_ERROR = "UNKNOWN_ERROR";
-}(ThemeErrorCode || (ThemeErrorCode = {}));
+var globalThis$2 = globalThis_1, path = path$3, getBuiltInPrototypeMethod$3 = function(CONSTRUCTOR, METHOD) {
+    var Namespace = path[CONSTRUCTOR + "Prototype"], pureMethod = Namespace && Namespace[METHOD];
+    if (pureMethod) return pureMethod;
+    var NativeConstructor = globalThis$2[CONSTRUCTOR], NativePrototype = NativeConstructor && NativeConstructor.prototype;
+    return NativePrototype && NativePrototype[METHOD];
+}, includes$4 = getBuiltInPrototypeMethod$3("Array", "includes"), isObject = isObject$5, classof$3 = classofRaw$2, MATCH$1 = wellKnownSymbol$5("match"), $TypeError$1 = TypeError, test = {};
 
-/**
- * Custom error class for theme-related errors
- */
-class ThemeError extends Error {
-    constructor(message, code = ThemeErrorCode.UNKNOWN_ERROR, context) {
-        super(message), this.name = "ThemeError", this.code = code, this.context = context, 
-        this.timestamp = Date.now(), 
-        // Maintains proper stack trace for where our error was thrown (only available on V8)
-        Error.captureStackTrace && Error.captureStackTrace(this, ThemeError);
-    }
-    /**
-   * Convert error to JSON for logging
-   */    toJSON() {
-        return {
-            name: this.name,
-            message: this.message,
-            code: this.code,
-            context: this.context,
-            timestamp: this.timestamp,
-            stack: this.stack
-        };
-    }
-}
+test[wellKnownSymbol$5("toStringTag")] = "z";
 
-/**
- * Log level
- */ !function(LogLevel) {
-    LogLevel[LogLevel.ERROR = 0] = "ERROR", LogLevel[LogLevel.WARN = 1] = "WARN", LogLevel[LogLevel.INFO = 2] = "INFO", 
-    LogLevel[LogLevel.DEBUG = 3] = "DEBUG";
-}(LogLevel || (LogLevel = {}));
+var TO_STRING_TAG_SUPPORT = "[object z]" === String(test), isCallable = isCallable$8, classofRaw = classofRaw$2, TO_STRING_TAG = wellKnownSymbol$5("toStringTag"), $Object = Object, CORRECT_ARGUMENTS = "Arguments" === classofRaw(function() {
+    return arguments;
+}()), classof$1 = TO_STRING_TAG_SUPPORT ? classofRaw : function(it) {
+    var O, tag, result;
+    return void 0 === it ? "Undefined" : null === it ? "Null" : "string" == typeof (tag = function(it, key) {
+        try {
+            return it[key];
+        } catch (error) {/* empty */}
+    }(O = $Object(it), TO_STRING_TAG)) ? tag : CORRECT_ARGUMENTS ? classofRaw(O) : "Object" === (result = classofRaw(O)) && isCallable(O.callee) ? "Arguments" : result;
+}, $String = String, MATCH = wellKnownSymbol$5("match"), $$1 = _export, notARegExp = function(it) {
+    if (function(it) {
+        var isRegExp;
+        return isObject(it) && (void 0 !== (isRegExp = it[MATCH$1]) ? !!isRegExp : "RegExp" === classof$3(it));
+    }(it)) throw new $TypeError$1("The method doesn't accept regular expressions");
+    return it;
+}, requireObjectCoercible = requireObjectCoercible$3, toString = function(argument) {
+    if ("Symbol" === classof$1(argument)) throw new TypeError("Cannot convert a Symbol value to a string");
+    return $String(argument);
+}, stringIndexOf = functionUncurryThis("".indexOf);
 
-/**
- * Theme Logger
- *
- * Centralized logging for the theme system.
- * Replaces console statements with structured logging.
- */
-class ThemeLogger {
-    constructor(config = {}) {
-        this.config = {
-            level: config.level ?? ("production" === process.env.NODE_ENV ? LogLevel.WARN : LogLevel.INFO),
-            enableConsole: config.enableConsole ?? !0,
-            onError: config.onError,
-            onWarn: config.onWarn,
-            onInfo: config.onInfo,
-            onDebug: config.onDebug
-        };
-    }
-    /**
-   * Log an error
-   */    error(message, error, context) {
-        if (this.config.level < LogLevel.ERROR) return;
-        const errorObj = error instanceof Error ? error : new Error(message), themeError = error instanceof ThemeError ? error : new ThemeError(message, ThemeErrorCode.UNKNOWN_ERROR, context);
-        this.config.enableConsole && console.error(`[ThemeError] ${message}`, {
-            error: errorObj,
-            context: {
-                ...context,
-                ...themeError.context
-            },
-            code: themeError.code
-        }), this.config.onError?.(themeError, context);
-    }
-    /**
-   * Log a warning
-   */    warn(message, context) {
-        this.config.level < LogLevel.WARN || (this.config.enableConsole && console.warn(`[ThemeWarning] ${message}`, context || {}), 
-        this.config.onWarn?.(message, context));
-    }
-    /**
-   * Log an info message
-   */    info(message, context) {
-        this.config.level < LogLevel.INFO || (this.config.enableConsole && console.info(`[ThemeInfo] ${message}`, context || {}), 
-        this.config.onInfo?.(message, context));
-    }
-    /**
-   * Log a debug message
-   */    debug(message, context) {
-        this.config.level < LogLevel.DEBUG || (this.config.enableConsole, this.config.onDebug?.(message, context));
+// `String.prototype.includes` method
+// https://tc39.es/ecma262/#sec-string.prototype.includes
+$$1({
+    target: "String",
+    proto: !0,
+    forced: !function(METHOD_NAME) {
+        var regexp = /./;
+        try {
+            "/./"[METHOD_NAME](regexp);
+        } catch (error1) {
+            try {
+                return regexp[MATCH] = !1, "/./"[METHOD_NAME](regexp);
+            } catch (error2) {/* empty */}
+        }
+        return !1;
+    }("includes")
+}, {
+    includes: function(searchString /* , position = 0 */) {
+        return !!~stringIndexOf(toString(requireObjectCoercible(this)), toString(notARegExp(searchString)), arguments.length > 1 ? arguments[1] : void 0);
     }
-}
+});
 
-/**
- * Default logger instance
- */ let defaultLogger = null;
+var includes$3 = getBuiltInPrototypeMethod$3("String", "includes"), isPrototypeOf$1 = objectIsPrototypeOf, arrayMethod = includes$4, stringMethod = includes$3, ArrayPrototype$1 = Array.prototype, StringPrototype = String.prototype;
 
-/**
- * Get or create default logger
- */ function getLogger() {
-    return defaultLogger || (defaultLogger = new ThemeLogger), defaultLogger;
-}
+const _includesInstanceProperty =  getDefaultExportFromCjs((function(it) {
+    var own = it.includes;
+    return it === ArrayPrototype$1 || isPrototypeOf$1(ArrayPrototype$1, it) && own === ArrayPrototype$1.includes ? arrayMethod : "string" == typeof it || it === StringPrototype || isPrototypeOf$1(StringPrototype, it) && own === StringPrototype.includes ? stringMethod : own;
+}));
 
 /**
  * Theme System Constants
@@ -1898,712 +1229,202 @@ class ThemeLogger {
  */
 /**
  * Default storage key for theme persistence
- */ const DEFAULT_ATOMIX_CONFIG_PATH = "atomix.config.ts";
-
-/**
- * Default data attribute name for theme
- */ process.env.NODE_ENV;
+ */ "undefined" != typeof process && process.env;
 
 /**
- * Integration default class names
+ * Check if code is running in a browser environment
  */
-const DEFAULT_INTEGRATION_CLASS_NAMES = {
-    theme: "data-theme",
-    colorMode: "data-atomix-color-mode"
-}, DEFAULT_INTEGRATION_CSS_VARIABLES = {
-    colorMode: "--storybook-color-mode"
-}, DEFAULT_SASS_CONFIG = {
-    style: "expanded",
-    sourceMap: !0,
-    loadPaths: [ "src" ]
-};
+const isBrowser = () => "undefined" != typeof window && "undefined" != typeof document, isServer = () => !isBrowser(), sanitizePath = path => path.replace(/[<>"']/g, "").replace(/\.\./g, "").replace(/\/+/g, "/").replace(/^\/+|\/+$/g, "") // Trim leading/trailing slashes
+, buildThemePath = (themeName, basePath = "/themes", useMinified = !1, cdnPath = null) => {
+    // Validate theme name to prevent path injection
+    if (!isValidThemeName(themeName)) throw new ThemeError(`Invalid theme name: "${themeName}". Theme names must be lowercase alphanumeric with hyphens (e.g., "my-theme").`, ThemeErrorCode.INVALID_THEME_NAME, {
+        themeName: themeName,
+        pattern: /^[a-z0-9]+(-[a-z0-9]+)*$/
+    });
+    const fileName = `${themeName}${useMinified ? ".min.css" : ".css"}`;
+    return cdnPath ? `${sanitizePath(cdnPath)}/${fileName}` : `${sanitizePath(basePath)}/${fileName.replace(/^\//, "")}`;
+    // Sanitize basePath to prevent path injection
+}, applyThemeAttributes = (dataAttribute, themeName) => {
+    isServer() || (
+    // Set data attribute on body (with null check)
+    document.body && document.body.setAttribute(dataAttribute, themeName), 
+    // Also set on documentElement for broader compatibility
+    document.documentElement.setAttribute(dataAttribute, themeName));
+}, isValidThemeName = themeName => !(!themeName || "string" != typeof themeName) && /^[a-z0-9]+(-[a-z0-9]+)*$/.test(themeName), createLocalStorageAdapter = () => ({
+    getItem: key => {
+        if (isServer()) return null;
+        try {
+            return localStorage.getItem(key);
+        } catch {
+            return null;
+        }
+    },
+    setItem: (key, value) => {
+        if (!isServer()) try {
+            localStorage.setItem(key, value);
+        } catch {
+            // Silently fail if localStorage is not available
+        }
+    },
+    removeItem: key => {
+        if (!isServer()) try {
+            localStorage.removeItem(key);
+        } catch {
+            // Silently fail
+        }
+    },
+    isAvailable: () => {
+        if (isServer()) return !1;
+        try {
+            const test = "__atomix_storage_test__";
+            return localStorage.setItem(test, test), localStorage.removeItem(test), !0;
+        } catch {
+            return !1;
+        }
+    }
+}), domUtils =  Object.freeze( Object.defineProperty({
+    __proto__: null,
+    applyThemeAttributes: applyThemeAttributes,
+    buildThemePath: buildThemePath,
+    createLocalStorageAdapter: createLocalStorageAdapter,
+    isBrowser: isBrowser,
+    isServer: isServer,
+    isValidThemeName: isValidThemeName,
+    loadThemeCSS: (fullPath, linkId) => isServer() ? Promise.resolve() : new Promise(((resolve, reject) => {
+        if (document.getElementById(linkId)) return void resolve();
+        // Create link element
+                const link = document.createElement("link");
+        link.id = linkId, link.rel = "stylesheet", link.type = "text/css", link.href = fullPath, 
+        // Add data attribute for tracking
+        link.setAttribute("data-atomix-theme", "true"), 
+        // Handle load success
+        link.onload = () => {
+            resolve();
+        }, 
+        // Handle load error
+        link.onerror = () => {
+            // Remove failed link element
+            link.remove(), reject(new ThemeError(`Failed to load theme CSS from: ${fullPath}. Please check that the file exists and is accessible.`, ThemeErrorCode.THEME_LOAD_FAILED, {
+                fullPath: fullPath,
+                linkId: linkId
+            }));
+        }, 
+        // Append to head
+        document.head.appendChild(link);
+    }))
+}, Symbol.toStringTag, {
+    value: "Module"
+}));
 
 /**
- * Integration default CSS variables
+ * Check if code is running on the server (SSR)
  */
 /**
- * Theme Configuration Loader
+ * Theme Utilities
  *
- * Loads and validates the theme configuration from atomix.config.ts
+ * Helper utilities for working with themes, including color manipulation,
+ * spacing helpers, and theme value accessors.
  */
+// ============================================================================
+// Color Manipulation Utilities
+// ============================================================================
 /**
- * Cache for loaded configuration
+ * Convert hex color to RGB object
  */
-let cachedConfig = null;
-
-/**
- * Logger instance
- */ const logger = getLogger();
+function hexToRgb(hex) {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result ? {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16)
+    } : null;
+}
 
 /**
- * Load theme configuration from atomix.config.ts
- *
- * @param options - Loader options
- * @returns Loaded and validated theme configuration
- *
- * @example
- * ```typescript
- * import { loadThemeConfig } from '@shohojdhara/atomix/theme/config';
- * const config = loadThemeConfig();
- * ```
- */
-/**
- * Theme Registry
- *
- * Manages theme registration, discovery, and dependency resolution
- */
-class ThemeRegistry {
-    constructor() {
-        this.entries = new Map, this.config = null, this.initialized = !1;
-    }
-    /**
-   * Initialize registry from config
-   */    async initialize(config) {
-        if (!this.initialized) {
-            // Load config if not provided
-            if (config) this.config = config; else try {
-                this.config = function(options = {}) {
-                    const {configPath: configPath = DEFAULT_ATOMIX_CONFIG_PATH, validate: validate = !0, env: env = ("undefined" != typeof process && process.env && "production" === process.env.NODE_ENV ? "production" : "development")} = options;
-                    // Return cached config if available
-                                        if (cachedConfig) return cachedConfig;
-                    // Try to load config dynamically
-                                        let config;
-                    try {
-                        // In browser/Vite environment, we can't load config dynamically
-                        if ("undefined" != typeof window) throw new Error("Theme config loading not supported in browser environment");
-                        // In ESM environments, require might be undefined.
-                                                let nodeRequire, configModule;
-                        try {
-                            nodeRequire = require;
-                        } catch {
-                            // require is not defined
-                        }
-                        if (!nodeRequire) throw new Error("Theme config loading not supported in this environment (require is undefined)");
-                        // Try require (Node.js/CommonJS)
-                        try {
-                            // Try relative path first
-                            try {
-                                configModule = nodeRequire("../../../../atomix.config");
-                            } catch {
-                                // If relative path fails, try to resolve from process.cwd()
-                                const path = nodeRequire("path"), fs = nodeRequire("fs");
-                                let configFilePath = path.resolve(process.cwd(), configPath);
-                                // If atomix.config.ts not found at the root, use the default path
-                                                                if (fs.existsSync(configFilePath) || configPath !== DEFAULT_ATOMIX_CONFIG_PATH || (configFilePath = path.resolve(process.cwd(), DEFAULT_ATOMIX_CONFIG_PATH)), 
-                                !fs.existsSync(configFilePath)) throw new Error(`Config file not found: ${configFilePath}`);
-                                {
-                                    const resolvedPath = nodeRequire.resolve(configFilePath);
-                                    nodeRequire.cache && nodeRequire.cache[resolvedPath] && delete nodeRequire.cache[resolvedPath], 
-                                    configModule = nodeRequire(configFilePath);
-                                }
-                            }
-                        } catch (requireError) {
-                            const errorMessage = requireError instanceof Error ? requireError.message : String(requireError);
-                            throw new ThemeError(`Cannot load config: ${errorMessage}`, ThemeErrorCode.CONFIG_LOAD_FAILED, {
-                                configPath: configPath,
-                                error: errorMessage
-                            });
-                        }
-                        const rawConfig = configModule.default || configModule, finalConfig = 
-                        /**
- * Apply environment-specific overrides to configuration
- *
- * @param config - Base configuration
- * @param env - Environment name
- * @returns Configuration with environment overrides applied
- */
-                        function(config, env) {
-                            const overridden = {
-                                ...config
-                            };
-                            // Production overrides
-                                                        return "production" === env && overridden.runtime && (overridden.runtime = {
-                                ...overridden.runtime,
-                                useMinified: !0,
-                                lazy: !0
-                            }), 
-                            // Development overrides
-                            "development" === env && (overridden.runtime && (overridden.runtime = {
-                                ...overridden.runtime,
-                                useMinified: !1,
-                                lazy: !1
-                            }), overridden.build && (overridden.build = {
-                                ...overridden.build,
-                                sass: {
-                                    ...overridden.build.sass,
-                                    sourceMap: !0
-                                }
-                            })), 
-                            // Test overrides
-                            "test" === env && overridden.runtime && (overridden.runtime = {
-                                ...overridden.runtime,
-                                enablePersistence: !1,
-                                preload: []
-                            }), overridden;
-                        }({
-                            themes: rawConfig.theme?.themes || {},
-                            build: rawConfig.build || {},
-                            runtime: rawConfig.runtime || {},
-                            integration: rawConfig.integration || {},
-                            dependencies: rawConfig.dependencies || {},
-                            validated: !1,
-                            // Will be set after validation
-                            // Store tokens for generator
-                            __tokens: rawConfig.theme?.tokens,
-                            __extend: rawConfig.theme?.extend
-                        }, env);
-                        // Process the AtomixConfig structure
-                                                // Validate if requested
-                        let validationResult = null;
-                        validate && (validationResult = function(config) {
-                            const errors = [], warnings = [];
-                            // Validate top-level structure
-                            if (!config || "object" != typeof config) return errors.push("Configuration must be an object"), 
-                            {
-                                valid: !1,
-                                errors: errors,
-                                warnings: warnings
-                            };
-                            // Validate themes
-                                                        if (config.themes && "object" == typeof config.themes) {
-                                const themeErrors = 
-                                /**
- * Validate themes object
- */
-                                function(themes) {
-                                    const errors = [], warnings = [];
-                                    0 === Object.keys(themes).length && warnings.push("No themes defined in configuration");
-                                    for (const [themeId, theme] of Object.entries(themes)) 
-                                    // Validate theme ID
-                                    if (themeId && "string" == typeof themeId) 
-                                    // Validate theme object
-                                    if (theme && "object" == typeof theme) 
-                                    // Validate theme type
-                                    if (!theme.type || "css" !== theme.type && "js" !== theme.type) errors.push(`Theme "${themeId}" must have type "css" or "js"`); else {
-                                        // Validate CSS theme
-                                        if (
-                                        // Validate required fields
-                                        theme.name && "string" == typeof theme.name || errors.push(`Theme "${themeId}" must have a "name" string`), 
-                                        "css" === theme.type) {
-                                            const cssErrors = validateCSSTheme();
-                                            errors.push(...cssErrors.errors), warnings.push(...cssErrors.warnings);
-                                        }
-                                        // Validate JS theme
-                                                                                if ("js" === theme.type) {
-                                            const jsErrors = validateJSTheme(themeId, theme);
-                                            errors.push(...jsErrors.errors), warnings.push(...jsErrors.warnings);
-                                        }
-                                        // Validate accessibility (only critical checks)
-                                                                                theme.a11y?.contrastTarget && ("number" != typeof theme.a11y.contrastTarget || theme.a11y.contrastTarget < 1 || theme.a11y.contrastTarget > 21) && warnings.push(`Theme "${themeId}" has invalid contrast target: ${theme.a11y.contrastTarget}`);
-                                    } else errors.push(`Theme "${themeId}" must be an object`); else errors.push(`Invalid theme ID: ${themeId}`);
-                                    return {
-                                        valid: 0 === errors.length,
-                                        errors: errors,
-                                        warnings: warnings
-                                    };
-                                }(config.themes);
-                                errors.push(...themeErrors.errors), warnings.push(...themeErrors.warnings);
-                            }
-                            // Validate build config (only if provided)
-                             else errors.push('Configuration must have a "themes" object');
-                            if (config.build) {
-                                const buildErrors = function(build) {
-                                    const errors = [];
-                                    // Only validate structure if provided
-                                    return build.output && "object" != typeof build.output && errors.push("Build output must be an object"), 
-                                    build.sass && "object" != typeof build.sass && errors.push("Build sass config must be an object"), 
-                                    {
-                                        valid: 0 === errors.length,
-                                        errors: errors,
-                                        warnings: []
-                                    };
-                                }
-                                /**
- * Validate runtime configuration
- */ (config.build);
-                                errors.push(...buildErrors.errors), warnings.push(...buildErrors.warnings);
-                            }
-                            // Validate runtime config (only if provided)
-                                                        if (config.runtime) {
-                                const runtimeErrors = function(runtime) {
-                                    const errors = [];
-                                    return runtime.basePath && "string" != typeof runtime.basePath && errors.push("Runtime basePath must be a string"), 
-                                    runtime.defaultTheme && "string" != typeof runtime.defaultTheme && errors.push("Runtime defaultTheme must be a string"), 
-                                    runtime.preload && !Array.isArray(runtime.preload) && errors.push("Runtime preload must be an array"), 
-                                    runtime.storageKey && "string" != typeof runtime.storageKey && errors.push("Runtime storageKey must be a string"), 
-                                    {
-                                        valid: 0 === errors.length,
-                                        errors: errors,
-                                        warnings: []
-                                    };
-                                }
-                                /**
- * Validate integration configuration
- */ (config.runtime);
-                                errors.push(...runtimeErrors.errors), warnings.push(...runtimeErrors.warnings);
-                            }
-                            // Validate integration config (only if provided)
-                                                        if (config.integration) {
-                                const integrationErrors = function(integration) {
-                                    const errors = [];
-                                    // Only validate structure if provided
-                                    return integration.classNames && "object" != typeof integration.classNames && errors.push("Integration classNames must be an object"), 
-                                    {
-                                        valid: 0 === errors.length,
-                                        errors: errors,
-                                        warnings: []
-                                    };
-                                }
-                                /**
- * Validate dependencies
- */ (config.integration);
-                                errors.push(...integrationErrors.errors), warnings.push(...integrationErrors.warnings);
-                            }
-                            // Validate dependencies
-                                                        if (config.dependencies) {
-                                const depErrors = function(dependencies, themes) {
-                                    const errors = [], warnings = [];
-                                    for (const [themeId, deps] of Object.entries(dependencies)) 
-                                    // Check if theme exists
-                                    if (themes[themeId]) 
-                                    // Validate dependencies array
-                                    if (Array.isArray(deps)) 
-                                    // Check if all dependencies exist
-                                    for (const dep of deps) themes[dep] || errors.push(`Theme "${themeId}" depends on non-existent theme: ${dep}`); else errors.push(`Dependencies for "${themeId}" must be an array`); else warnings.push(`Dependencies defined for non-existent theme: ${themeId}`);
-                                    return {
-                                        valid: 0 === errors.length,
-                                        errors: errors,
-                                        warnings: warnings
-                                    };
-                                }(config.dependencies, config.themes || {});
-                                errors.push(...depErrors.errors), warnings.push(...depErrors.warnings);
-                            }
-                            return {
-                                valid: 0 === errors.length,
-                                errors: errors,
-                                warnings: warnings
-                            };
-                        }(finalConfig)), config = {
-                            ...finalConfig,
-                            validated: validate,
-                            errors: validationResult?.errors,
-                            warnings: validationResult?.warnings
-                        };
-                    } catch (error) {
-                        // Fallback: return default config structure
-                        const errorMessage = error instanceof Error ? error.message : String(error);
-                        logger.warn(`Failed to load theme config from ${configPath}`, {
-                            configPath: configPath,
-                            error: errorMessage
-                        }), config = {
-                            themes: {},
-                            build: {
-                                output: {
-                                    directory: "themes",
-                                    formats: {
-                                        expanded: ".css",
-                                        compressed: ".min.css"
-                                    }
-                                },
-                                sass: {
-                                    ...DEFAULT_SASS_CONFIG,
-                                    loadPaths: [ ...DEFAULT_SASS_CONFIG.loadPaths ]
-                                }
-                            },
-                            runtime: {
-                                basePath: "/themes",
-                                cdnPath: null,
-                                preload: [],
-                                lazy: !0,
-                                defaultTheme: "",
-                                // No default - use built-in styles (empty string instead of undefined)
-                                storageKey: "atomix-theme",
-                                dataAttribute: "data-theme",
-                                enablePersistence: !0,
-                                useMinified: "production" === env
-                            },
-                            integration: {
-                                cssVariables: DEFAULT_INTEGRATION_CSS_VARIABLES,
-                                classNames: DEFAULT_INTEGRATION_CLASS_NAMES
-                            },
-                            dependencies: {},
-                            validated: !1,
-                            errors: [ `Failed to load config: ${error instanceof Error ? error.message : String(error)}` ],
-                            warnings: [],
-                            __tokens: {},
-                            __extend: {}
-                        };
-                    }
-                    // Cache the loaded config
-                                        return cachedConfig = config, config;
-                }();
-            } catch (error) {
-                // In browser environments, config loading will fail
-                // Use empty config as fallback
-                this.config = {
-                    themes: {},
-                    build: {
-                        output: {
-                            directory: "themes",
-                            formats: {
-                                expanded: ".css",
-                                compressed: ".min.css"
-                            }
-                        },
-                        sass: {
-                            style: "expanded",
-                            sourceMap: !0,
-                            loadPaths: [ "src" ]
-                        }
-                    },
-                    runtime: {
-                        basePath: "",
-                        defaultTheme: void 0
-                    },
-                    integration: {
-                        cssVariables: {
-                            colorMode: "--color-mode"
-                        },
-                        classNames: {
-                            theme: "data-theme",
-                            colorMode: "data-color-mode"
-                        }
-                    },
-                    dependencies: {},
-                    validated: !1,
-                    errors: [],
-                    warnings: [],
-                    __tokens: {},
-                    __extend: {}
-                };
-            }
-            // Register all themes from config
-                        for (const [themeId, definition] of Object.entries(this.config.themes)) this.register(themeId, definition);
-            // Resolve dependencies
-                        this.resolveDependencies(), this.initialized = !0;
-        }
-    }
-    /**
-   * Register a theme
-   */    register(themeId, definition) {
-        // Get dependencies from config or definition
-        const entry = {
-            id: themeId,
-            definition: definition,
-            loaded: !1,
-            dependencies: [ ...this.config?.dependencies?.[themeId] || definition.dependencies || [] ],
-            dependents: []
-        };
-        this.entries.set(themeId, entry);
-    }
-    /**
-   * Get theme entry
-   */    get(themeId) {
-        return this.entries.get(themeId);
-    }
-    /**
-   * Check if theme exists
-   */    has(themeId) {
-        return this.entries.has(themeId);
-    }
-    /**
-   * Get all theme IDs
-   */    getAllIds() {
-        return Array.from(this.entries.keys());
-    }
-    /**
-   * Get all theme metadata
-   */    getAllMetadata() {
-        return Array.from(this.entries.values()).map((entry => ({
-            id: entry.id,
-            name: entry.definition.name,
-            type: entry.definition.type,
-            class: entry.definition.class,
-            description: entry.definition.description,
-            author: entry.definition.author,
-            version: entry.definition.version,
-            tags: entry.definition.tags,
-            supportsDarkMode: entry.definition.supportsDarkMode,
-            status: entry.definition.status,
-            a11y: entry.definition.a11y,
-            color: entry.definition.color,
-            features: entry.definition.features,
-            dependencies: entry.dependencies
-        })));
-    }
-    /**
-   * Get theme definition
-   */    getDefinition(themeId) {
-        return this.entries.get(themeId)?.definition;
-    }
-    /**
-   * Check if a theme is loaded
-   */    isThemeLoaded(themeId) {
-        const entry = this.entries.get(themeId);
-        return !!entry && entry.loaded;
-    }
-    /**
-   * Mark a theme as loaded
-   */    markLoaded(themeId, theme) {
-        const entry = this.entries.get(themeId);
-        entry && (entry.loaded = !0, theme && (entry.theme = theme));
-    }
-    /**
-   * Get theme object (for JS themes)
-   */    getTheme(themeId) {
-        const entry = this.entries.get(themeId);
-        return entry?.loaded ? entry.theme : void 0;
-    }
-    /**
-   * Get dependencies for a theme
-   */    getDependencies(themeId) {
-        return this.entries.get(themeId)?.dependencies || [];
-    }
-    /**
-   * Get dependents for a theme (themes that depend on this one)
-   */    getDependents(themeId) {
-        return this.entries.get(themeId)?.dependents || [];
-    }
-    /**
-   * Resolve all dependencies in correct order
-   */    resolveDependencyOrder(themeId) {
-        const resolved = [], visited = new Set, visiting = new Set, visit = id => {
-            if (visiting.has(id)) throw new Error(`Circular dependency detected involving theme: ${id}`);
-            if (visited.has(id)) return;
-            visiting.add(id);
-            const entry = this.entries.get(id);
-            if (entry) for (const dep of entry.dependencies) {
-                if (!this.has(dep)) throw new Error(`Theme "${id}" depends on non-existent theme: ${dep}`);
-                visit(dep);
-            }
-            visiting.delete(id), visited.add(id), resolved.push(id);
-        };
-        return visit(themeId), resolved;
-    }
-    /**
-   * Resolve dependencies and build dependency graph
-   */    resolveDependencies() {
-        // Build dependents map
-        for (const entry of this.entries.values()) for (const dep of entry.dependencies) {
-            const depEntry = this.entries.get(dep);
-            var _context;
-            depEntry && (_includesInstanceProperty(_context = depEntry.dependents).call(_context, entry.id) || depEntry.dependents.push(entry.id));
-        }
-    }
-    /**
-   * Validate all themes
-   */    validate() {
-        const errors = [];
-        // Check for circular dependencies
-                for (const themeId of this.entries.keys()) try {
-            this.resolveDependencyOrder(themeId);
-        } catch (error) {
-            errors.push(error instanceof Error ? error.message : String(error));
-        }
-        // Check for missing dependencies
-                for (const [themeId, entry] of this.entries.entries()) for (const dep of entry.dependencies) this.has(dep) || errors.push(`Theme "${themeId}" depends on non-existent theme: ${dep}`);
-        return {
-            valid: 0 === errors.length,
-            errors: errors
-        };
-    }
-    /**
-   * Clear registry
-   */    clear() {
-        this.entries.clear(), this.config = null, this.initialized = !1;
-    }
+ * Convert RGB to hex color
+ */ function rgbToHex(r, g, b) {
+    const toHex = val => Math.round(Math.max(0, Math.min(255, val))).toString(16).padStart(2, "0");
+    return `#${toHex(r ?? 0)}${toHex(g ?? 0)}${toHex(b ?? 0)}`;
 }
 
 /**
- * CSS Injection Utilities
- *
- * Inject CSS into HTML head via <style> element.
- */
-/**
- * Check if running in browser environment
- */ function isBrowser$1() {
-    return "undefined" != typeof document;
+ * Calculate relative luminance of a color
+ * Used for determining contrast ratios
+ */ function getLuminance(color) {
+    const rgb = hexToRgb(color);
+    if (!rgb) return 0;
+    const {r: r, g: g, b: b} = rgb, [rs, gs, bs] = [ r ?? 0, g ?? 0, b ?? 0 ].map((c => {
+        const val = c / 255;
+        return val <= .03928 ? val / 12.92 : Math.pow((val + .055) / 1.055, 2.4);
+    }));
+    return .2126 * (rs ?? 0) + .7152 * (gs ?? 0) + .0722 * (bs ?? 0);
 }
 
 /**
- * Inject CSS into HTML head via <style> element
- *
- * Creates or updates a style element in the document head.
- * If an element with the same ID exists, it will be updated.
- *
- * @param css - CSS string to inject
- * @param id - Style element ID (default: 'atomix-theme')
- *
- * @example
- * ```typescript
- * const css = ':root { --atomix-color-primary: #7AFFD7; }';
- * injectCSS(css);
- *
- * // With custom ID
- * injectCSS(css, 'my-custom-theme');
- * ```
- */ function injectCSS$1(css, id = "atomix-theme") {
-    if (!isBrowser$1()) return void console.warn("injectCSS: Not in browser environment, CSS not injected");
-    let styleElement = document.getElementById(id);
-    styleElement || (styleElement = document.createElement("style"), styleElement.id = id, 
-    styleElement.setAttribute("data-atomix-theme", "true"), document.head.appendChild(styleElement)), 
-    styleElement.textContent = css;
+ * Calculate contrast ratio between two colors
+ */ function getContrastRatio(foreground, background) {
+    const lumA = getLuminance(foreground), lumB = getLuminance(background);
+    return (Math.max(lumA, lumB) + .05) / (Math.min(lumA, lumB) + .05);
 }
 
 /**
- * Remove injected CSS from DOM
- *
- * Removes the style element with the given ID from the document head.
- *
- * @param id - Style element ID to remove (default: 'atomix-theme')
- *
- * @example
- * ```typescript
- * removeCSS(); // Removes default 'atomix-theme'
- * removeCSS('my-custom-theme'); // Removes custom ID
- * ```
- */ function removeCSS(id = "atomix-theme") {
-    if (!isBrowser$1()) return;
-    const styleElement = document.getElementById(id);
-    styleElement && styleElement.remove();
+ * Get appropriate contrast text color (black or white) for a background color
+ */ function getContrastText(background, threshold = 3) {
+    const contrastWithWhite = getContrastRatio("#FFFFFF", background), contrastWithBlack = getContrastRatio("#000000", background);
+    return contrastWithWhite >= threshold ? "#FFFFFF" : contrastWithBlack >= threshold ? "#000000" : contrastWithWhite > contrastWithBlack ? "#FFFFFF" : "#000000";
 }
 
 /**
- * Check if CSS is already injected
+ * Lighten a color by a given amount
  *
- * @param id - Style element ID to check (default: 'atomix-theme')
- * @returns True if style element exists
- */ function isCSSInjected(id = "atomix-theme") {
-    return !!isBrowser$1() && null !== document.getElementById(id);
+ * @param color - Hex color string
+ * @param amount - Amount to lighten (0-1), default 0.2
+ * @returns Lightened hex color
+ */ function lighten(color, amount = .2) {
+    const rgb = hexToRgb(color);
+    if (!rgb) return color;
+    const {r: r, g: g, b: b} = rgb, lightenValue = val => Math.min(255, Math.round(val + (255 - val) * amount));
+    return rgbToHex(lightenValue(r), lightenValue(g), lightenValue(b));
 }
 
 /**
- * CSS File Utilities
- *
- * Save CSS to file system (Node.js only).
- */
-/**
- * Save CSS to file
- *
- * Writes CSS string to a file. Only works in Node.js environment.
- *
- * @param css - CSS string to save
- * @param filePath - Output file path
- * @throws Error if called in browser environment
+ * Darken a color by a given amount
  *
- * @example
- * ```typescript
- * const css = ':root { --atomix-color-primary: #7AFFD7; }';
- * await saveCSSFile(css, './themes/custom.css');
- * ```
- */ async function saveCSSFile(css, filePath) {
-    // Check if in browser environment
-    if ("undefined" != typeof window) throw new Error("saveCSSFile can only be used in Node.js environment. Use injectCSS() for browser environments.");
-    // Dynamic import to avoid bundling Node.js modules in browser builds
-        const fs = await import("fs/promises"), dir = (await import("path")).dirname(filePath);
-    await fs.mkdir(dir, {
-        recursive: !0
-    }), 
-    // Write file
-    await fs.writeFile(filePath, css, "utf8");
+ * @param color - Hex color string
+ * @param amount - Amount to darken (0-1), default 0.2
+ * @returns Darkened hex color
+ */ function darken(color, amount = .2) {
+    const rgb = hexToRgb(color);
+    if (!rgb) return color;
+    const {r: r, g: g, b: b} = rgb, darkenValue = val => Math.max(0, Math.round(val * (1 - amount)));
+    return rgbToHex(darkenValue(r), darkenValue(g), darkenValue(b));
 }
 
 /**
- * Save CSS to file (synchronous version)
- *
- * Synchronous version of saveCSSFile. Only works in Node.js environment.
+ * Add alpha (opacity) to a color
  *
- * @param css - CSS string to save
- * @param filePath - Output file path
- * @throws Error if called in browser environment
- */ function saveCSSFileSync(css, filePath) {
-    // Check if in browser environment
-    if ("undefined" != typeof window) throw new Error("saveCSSFileSync can only be used in Node.js environment. Use injectCSS() for browser environments.");
-    // Use require for synchronous file operations
-    // eslint-disable-next-line @typescript-eslint/no-require-imports
-        const fs = require("fs"), dir = require("path").dirname(filePath);
-    // eslint-disable-next-line @typescript-eslint/no-require-imports
-        fs.existsSync(dir) || fs.mkdirSync(dir, {
-        recursive: !0
-    }), 
-    // Write file
-    fs.writeFileSync(filePath, css, "utf8");
+ * @param color - Hex color string
+ * @param opacity - Opacity value (0-1)
+ * @returns RGBA color string
+ */ function alpha(color, opacity) {
+    const rgb = hexToRgb(color);
+    if (!rgb) return color;
+    const {r: r, g: g, b: b} = rgb;
+    return `rgba(${r}, ${g}, ${b}, ${Math.max(0, Math.min(1, opacity))})`;
 }
 
 /**
- * Check if code is running in a browser environment
- */ const isBrowser = () => "undefined" != typeof window && "undefined" != typeof document, isServer = () => !isBrowser(), getThemeLinkId = themeName => `atomix-theme-${themeName}`, buildThemePath = (themeName, basePath = "/themes", useMinified = !1, cdnPath = null) => {
-    // Validate theme name to prevent path injection
-    if (!isValidThemeName(themeName)) throw new Error(`Invalid theme name: "${themeName}". Theme names must be lowercase alphanumeric with hyphens.`);
-    const fileName = `${themeName}${useMinified ? ".min.css" : ".css"}`;
-    return cdnPath ? `${cdnPath.replace(/[<>"']/g, "")}/${fileName}` : `${basePath.replace(/\/$/, "").replace(/[<>"']/g, "")}/${fileName.replace(/^\//, "")}`;
-    // Ensure basePath doesn't end with slash and fileName doesn't start with slash
-    // Also sanitize basePath to prevent path injection
-}, loadThemeCSS = (fullPath, linkId) => isServer() ? Promise.resolve() : new Promise(((resolve, reject) => {
-    if (document.getElementById(linkId)) return void resolve();
-    // Create link element
-        const link = document.createElement("link");
-    link.id = linkId, link.rel = "stylesheet", link.type = "text/css", link.href = fullPath, 
-    // Add data attribute for tracking
-    link.setAttribute("data-atomix-theme", "true"), 
-    // Handle load success
-    link.onload = () => {
-        resolve();
-    }, 
-    // Handle load error
-    link.onerror = () => {
-        // Remove failed link element
-        link.remove(), reject(new Error(`Failed to load theme CSS: ${fullPath}`));
-    }, 
-    // Append to head
-    document.head.appendChild(link);
-})), isThemeLoaded = themeName => {
-    if (isServer()) return !1;
-    const linkId = getThemeLinkId(themeName);
-    return null !== document.getElementById(linkId);
-}, isValidThemeName = themeName => !(!themeName || "string" != typeof themeName) && /^[a-z0-9]+(-[a-z0-9]+)*$/.test(themeName);
-
-/**
- * Check if code is running on the server (SSR)
- */
-/**
- * CSS Variable Generator
- *
- * Generates CSS custom properties from theme objects and injects them into the DOM.
- *
- * **Token Naming Alignment:**
- * This generator produces CSS variables that match the SCSS token naming pattern exactly:
- * - Colors: --atomix-primary, --atomix-primary-1 through --atomix-primary-10
- * - Spacing: --atomix-spacing-1, --atomix-spacing-4, etc.
- * - Typography: --atomix-font-size-base, --atomix-font-weight-normal, etc.
- * - Shadows: --atomix-box-shadow, --atomix-box-shadow-sm, etc.
- *
- * All tokens follow the flat structure pattern used in SCSS (not nested like --atomix-palette-primary-main).
- * This ensures compatibility between SCSS themes and JavaScript themes.
+ * Emphasize a color (lighten if dark, darken if light)
  *
- * @see src/styles/03-generic/_generic.root.scss for SCSS token definitions
- */
-/**
- * Convert a nested object to flat CSS variable declarations
+ * @param color - Hex color string
+ * @param coefficient - Amount to emphasize (0-1), default 0.15
+ * @returns Emphasized hex color
  */
-function flattenObject(obj, prefix = "", result = {}) {
-    for (const key in obj) {
-        if (!Object.prototype.hasOwnProperty.call(obj, key)) continue;
-        const value = obj[key], newKey = prefix ? `${prefix}-${key}` : key;
-        if (value && "object" == typeof value && !Array.isArray(value)) {
-            // Skip special objects like functions
-            if ("function" == typeof value) continue;
-            // Recursively flatten nested objects
-                        flattenObject(value, newKey, result);
-        } else "string" != typeof value && "number" != typeof value || (result[newKey.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase()] = String(value));
-    }
-    return result;
-}
-
 /**
  * Generate a color scale from a base color (1-10 steps)
  * Creates lighter to darker variations
- */ function generateColorScale(baseColor, prefix, colorName) {
+ */
+function generateColorScale(baseColor, prefix, colorName) {
     const vars = {};
     if (!hexToRgb(baseColor)) return vars;
     // Generate 10-step scale
@@ -2667,7 +1488,16 @@ function generateCSSVariables(theme, options = {}) {
                 // Text emphasis: emphasized version of the color for text (--atomix-primary-text-emphasis)
                 vars[`${prefix}-${key}-text-emphasis`] = function(color, coefficient = .15) {
                     return getLuminance(color) > .5 ? darken(color, coefficient) : lighten(color, coefficient);
-                }(color.main, .15), 
+                }
+                // ============================================================================
+                // Spacing Utilities
+                // ============================================================================
+                /**
+ * Create a spacing function from various input types
+ *
+ * @param spacingInput - Spacing configuration (number, array, or function), default 4
+ * @returns Spacing function
+ */ (color.main, .15), 
                 // Background subtle: very light version for backgrounds (--atomix-primary-bg-subtle)
                 vars[`${prefix}-${key}-bg-subtle`] = alpha(color.main, .1), 
                 // Border subtle: light version for borders (--atomix-primary-border-subtle)
@@ -3012,7 +1842,52 @@ function generateCSSVariables(theme, options = {}) {
                 return vars[`${prefix}-focus-ring-width`] = "3px", vars[`${prefix}-focus-ring-offset`] = "2px", 
         vars[`${prefix}-focus-ring-opacity`] = "0.25", vars;
     }(theme.palette, prefix)), theme.custom && Object.keys(theme.custom).length > 0) {
-        const customVars = flattenObject(theme.custom, `${prefix}-custom`);
+        const customVars = 
+        /**
+ * CSS Variable Generator
+ *
+ * Generates CSS custom properties from theme objects and injects them into the DOM.
+ *
+ * **Token Naming Alignment:**
+ * This generator produces CSS variables that match the SCSS token naming pattern exactly:
+ * - Colors: --atomix-primary, --atomix-primary-1 through --atomix-primary-10
+ * - Spacing: --atomix-spacing-1, --atomix-spacing-4, etc.
+ * - Typography: --atomix-font-size-base, --atomix-font-weight-normal, etc.
+ * - Shadows: --atomix-box-shadow, --atomix-box-shadow-sm, etc.
+ *
+ * All tokens follow the flat structure pattern used in SCSS (not nested like --atomix-palette-primary-main).
+ * This ensures compatibility between SCSS themes and JavaScript themes.
+ *
+ * @see src/styles/03-generic/_generic.root.scss for SCSS token definitions
+ */
+        /**
+ * Convert a nested object to flat CSS variable declarations
+ * Uses iterative approach for better performance with large objects
+ */
+        function(obj, prefix = "", result = {}) {
+            // Use iterative approach with stack to avoid deep recursion
+            const stack = [ {
+                obj: obj,
+                prefix: prefix
+            } ];
+            for (;stack.length > 0; ) {
+                const {obj: currentObj, prefix: currentPrefix} = stack.pop();
+                for (const key in currentObj) {
+                    if (!Object.prototype.hasOwnProperty.call(currentObj, key)) continue;
+                    const value = currentObj[key], newKey = currentPrefix ? `${currentPrefix}-${key}` : key;
+                    if (value && "object" == typeof value && !Array.isArray(value)) {
+                        // Skip special objects like functions
+                        if ("function" == typeof value) continue;
+                        // Add to stack for iterative processing
+                                                stack.push({
+                            obj: value,
+                            prefix: newKey
+                        });
+                    } else "string" != typeof value && "number" != typeof value || (result[newKey.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase()] = String(value));
+                }
+            }
+            return result;
+        }(theme.custom, `${prefix}-custom`);
         Object.assign(variables, customVars);
     }
     // Convert to CSS string
@@ -3033,243 +1908,211 @@ function generateCSSVariables(theme, options = {}) {
         styleElement.textContent = css;
     }
     /**
- * Theme Context
+ * Naming Utilities
  *
- * React context for theme management
+ * Provides consistent naming conventions across the theme system
  */
     /**
- * Theme context with default values
+ * Generate consistent CSS class names following BEM methodology
  */ (css, styleId), css;
 }
 
-const ThemeContext =  createContext(null);
+function generateClassName(block, element, modifiers) {
+    let className = block;
+    return element && (className += `__${element}`), modifiers && Object.entries(modifiers).forEach((([key, value]) => {
+        value && (className += `--${key}`, "string" == typeof value && value !== key && (className += `-${value}`));
+    })), className;
+}
 
-ThemeContext.displayName = "ThemeContext";
+/**
+ * Generate consistent CSS variable names
+ */ function generateCSSVariableName(property, options = {}) {
+    const {prefix: prefix = "atomix", component: component, variant: variant, state: state} = options, parts = [ prefix ];
+    return component && parts.push(component), variant && parts.push(variant), state && parts.push(state), 
+    parts.push(property), `--${parts.join("-")}`;
+}
 
 /**
- * Theme Applicator
- *
- * Applies theme configurations to the DOM, including CSS variables,
- * component overrides, typography, spacing, and color palettes.
- *
- * Uses the unified theme system for CSS generation and injection.
- */
+ * Normalize theme tokens to consistent naming convention
+ */ function normalizeThemeTokens(tokens) {
+    const normalized = {};
+    for (const [key, value] of Object.entries(tokens)) 
+    // Recursively normalize nested objects
+    normalized[key] = "object" == typeof value && null !== value ? normalizeThemeTokens(value) : value;
+    return normalized;
+}
+
 /**
- * Theme applicator class for runtime theme application
+ * Convert camelCase to kebab-case for CSS custom properties
+ */ function camelToKebab(str) {
+    return str.replace(/[A-Z]/g, (match => `-${match.toLowerCase()}`));
+}
+
+/**
+ * Convert theme property to CSS variable name
+ */ function themePropertyToCSSVar(propertyPath, prefix = "atomix") {
+    return `--${prefix}-${propertyPath.split(".").map((part => camelToKebab(part))).join("-")}`;
+}
+
+/**
+ * Component Theming Utilities
  *
- * Uses the unified theme system for efficient CSS variable generation and injection.
+ * Provides consistent patterns for applying theme values to components
+ * using DesignTokens and CSS variables
  */
-class ThemeApplicator {
-    constructor(root = document.documentElement) {
-        this.styleId = "atomix-theme-applicator", this.root = root;
-    }
-    /**
-   * Apply a complete theme configuration
-   *
-   * Uses the unified theme system to convert Theme to DesignTokens and inject CSS.
-   * Automatically respects atomix.config.ts when using DesignTokens.
-   */    applyTheme(theme) {
-        // Clear previously applied variables
-        this.clearAppliedVars(), 
-        // Check if it's DesignTokens
-        this.isDesignTokens(theme) ? 
-        // Direct DesignTokens - use unified theme system (with config support)
-        this.applyDesignTokens(theme) : injectCSS$1(createTheme(theme, {
-            selector: ":root",
-            prefix: "atomix"
-        }), this.styleId), 
-        // Apply component overrides (only for Theme objects)
-        !this.isDesignTokens(theme) && theme.components && this.applyComponentOverrides(theme.components);
-    }
-    /**
-   * Apply DesignTokens using unified theme system
-   *
-   * Uses createTheme() which automatically loads from atomix.config.ts
-   * if no tokens are provided, ensuring config is always respected.
-   */    applyDesignTokens(tokens) {
-        // Inject CSS into DOM
-        injectCSS$1(createTheme(tokens, {
-            selector: ":root",
-            prefix: "atomix"
-        }), this.styleId);
-    }
-    /**
-   * Check if object is DesignTokens
-   */    isDesignTokens(obj) {
-        // DesignTokens is a flat object with string keys, no nested structures
-        return null !== obj && "object" == typeof obj && !("palette" in obj) && !("typography" in obj) && !("__isJSTheme" in obj);
-    }
-    /**
-   * Apply global CSS variables (for component overrides)
-   */    applyGlobalCSSVars(vars) {
-        Object.entries(vars).forEach((([key, value]) => {
-            this.root.style.setProperty(key, String(value));
-        }));
-    }
-    /**
-   * Apply component-level overrides
-   */    applyComponentOverrides(overrides) {
-        Object.entries(overrides).forEach((([componentName, override]) => {
-            override && this.applyComponentOverride(componentName, override);
-        }));
-    }
-    /**
-   * Apply override for a specific component
-   */    applyComponentOverride(componentName, override) {
-        const vars = {}, componentKey = componentName.toLowerCase();
-        // Apply component-level CSS variables
-        override.cssVars && Object.entries(override.cssVars).forEach((([key, value]) => {
-            // If key doesn't start with --, add component prefix
-            const varKey = key.startsWith("--") ? key : `--atomix-${componentKey}-${key}`;
-            vars[varKey] = value;
-        })), 
-        // Apply part-specific CSS variables
-        override.parts && Object.entries(override.parts).forEach((([partName, partOverride]) => {
-            partOverride.cssVars && Object.entries(partOverride.cssVars).forEach((([key, value]) => {
-                const varKey = key.startsWith("--") ? key : `--atomix-${componentKey}-${partName}-${key}`;
-                vars[varKey] = value;
-            }));
-        })), 
-        // Apply variant-specific CSS variables
-        override.variants && Object.entries(override.variants).forEach((([variantName, variantOverride]) => {
-            variantOverride.cssVars && Object.entries(variantOverride.cssVars).forEach((([key, value]) => {
-                const varKey = key.startsWith("--") ? key : `--atomix-${componentKey}-${variantName}-${key}`;
-                vars[varKey] = value;
-            }));
-        })), this.applyGlobalCSSVars(vars);
-    }
-    /**
-   * Clear all applied CSS variables
-   */    clearAppliedVars() {
-        removeCSS(this.styleId);
-    }
-    /**
-   * Remove theme application
-   */    removeTheme() {
-        this.clearAppliedVars(), removeCSS(this.styleId);
-    }
-    /**
-   * Update specific CSS variables without clearing all
-   */    updateCSSVars(vars) {
-        this.applyGlobalCSSVars(vars);
-    }
+/**
+ * Get a theme value for a specific component using CSS variables
+ * This ensures all components access theme values consistently
+ */ function getComponentThemeValue(component, property, variant, size) {
+    // Build CSS variable name following consistent pattern
+    const parts = [ "atomix", component ];
+    // Return CSS variable reference with fallback
+    return variant && parts.push(variant), size && parts.push(size), parts.push(property), 
+    `var(--${parts.join("-")}, var(--atomix-${property}, initial))`;
 }
 
 /**
- * Global theme applicator instance
- */ let globalApplicator = null;
+ * Generate component-specific CSS variables from DesignTokens
+ */ function generateComponentCSSVars(component, tokens, variant, size) {
+    const vars = {};
+    if (!tokens) return vars;
+    const prefixParts = [ "atomix", component ];
+    variant && prefixParts.push(variant), size && prefixParts.push(size);
+    const prefix = prefixParts.join("-");
+    // Map common DesignTokens to component-specific CSS variables
+        return tokens.primary && (vars[`--${prefix}-color`] = tokens.primary), tokens["primary-9"] && (vars[`--${prefix}-color-hover`] = tokens["primary-9"]), 
+    tokens["body-color"] && (vars[`--${prefix}-color-disabled`] = tokens["body-color"]), 
+    tokens["body-font-family"] && (vars[`--${prefix}-font-family`] = tokens["body-font-family"]), 
+    tokens["body-font-size"] && (vars[`--${prefix}-font-size`] = tokens["body-font-size"]), 
+    tokens["spacing-1"] && (vars[`--${prefix}-spacing-sm`] = tokens["spacing-1"]), tokens["spacing-2"] && (vars[`--${prefix}-spacing-md`] = tokens["spacing-2"]), 
+    tokens["spacing-4"] && (vars[`--${prefix}-spacing-lg`] = tokens["spacing-4"]), vars;
+}
 
 /**
- * Get or create global theme applicator
- */ function getThemeApplicator() {
-    return globalApplicator || (globalApplicator = new ThemeApplicator), globalApplicator;
+ * Apply consistent theme to component style object using DesignTokens
+ */ function applyComponentTheme(component, style = {}, variant, size, tokens) {
+    // If no tokens provided, return original style
+    return tokens ? {
+        ...generateComponentCSSVars(component, tokens, variant, size),
+        ...style
+    } : style;
+    // Generate component-specific CSS variables
 }
 
 /**
- * Apply theme using global applicator
- */ function applyTheme(theme) {
-    getThemeApplicator().applyTheme(theme);
+ * Create a hook for consistent component theming
+ */ function useComponentTheme(component, variant, size, tokens) {
+    return property => getComponentThemeValue(component, property, variant, size);
 }
 
 /**
- * ThemeProvider component
- *
- * Provides theme context to child components and manages theme state.
+ * Theme Configuration Loader
  *
- * **Config-First Approach**: If `defaultTheme` is not provided, loads from `atomix.config.ts`.
- * Config file is required when `defaultTheme` is not provided.
+ * Provides functions to load theme configurations from atomix.config.ts
+ * Includes both sync and async versions, with automatic fallbacks
+ */
+/**
+ * Load theme from config file (synchronous, Node.js only)
+ * @param configPath - Path to config file (default: atomix.config.ts)
+ * @returns DesignTokens from theme configuration
+ * @throws Error if config loading is not available in browser environment
+ */ function loadThemeFromConfigSync(options) {
+    // Check if we're in a browser environment
+    if ("undefined" != typeof window) throw new Error("loadThemeFromConfigSync: Not available in browser environment. Config loading requires Node.js/SSR environment.");
+    // Use static import - the function handles browser environment checks internally
+        let config;
+    try {
+        config = loadAtomixConfig({
+            configPath: options?.configPath || "atomix.config.ts",
+            required: !1 !== options?.required
+        });
+    } catch (error) {
+        if (!1 !== options?.required) throw new Error("Config loader module not available");
+        // Return empty tokens if config is not required
+                return createTokens({});
+    }
+    if (!config?.theme) return createTokens({});
+    // Extract tokens from config.theme structure
+    // config.theme can have: { extend?: ThemeTokens, tokens?: ThemeTokens, themes?: ... }
+    // We need to extract the actual DesignTokens (flat structure)
+        const themeConfig = config.theme;
+    // Check if theme is directly a flat object (DesignTokens format)
+    // This handles the case where config.theme might be passed as DesignTokens directly
+        return createTokens(!themeConfig || "object" != typeof themeConfig || "extend" in themeConfig || "tokens" in themeConfig || "themes" in themeConfig ? {} : themeConfig);
+    // If theme has nested structure (extend/tokens/themes), we can't directly use it
+    // Return empty tokens - the theme system will use defaults
+    // TODO: Add proper conversion from ThemeTokens to DesignTokens if needed
+}
+
+/**
+ * Load theme from config file (asynchronous)
+ * @param configPath - Path to config file (default: atomix.config.ts)
+ * @returns Promise resolving to DesignTokens from theme configuration
+ */ async function loadThemeFromConfig(options) {
+    // Check if we're in a browser environment
+    if ("undefined" != typeof window) throw new Error("loadThemeFromConfig: Not available in browser environment. Config loading requires Node.js/SSR environment.");
+    // Use static import with runtime check
+    // The function will handle browser environment checks internally
+        let config;
+    try {
+        // loadAtomixConfig is synchronous, not async
+        config = loadAtomixConfig({
+            configPath: options?.configPath || "atomix.config.ts",
+            required: !1 !== options?.required
+        });
+    } catch (error) {
+        if (!1 !== options?.required) throw new Error("Config loader module not available");
+        // Return empty tokens if config is not required
+                return createTokens({});
+    }
+    if (!config?.theme) return createTokens({});
+    // Extract tokens from config.theme structure
+    // config.theme can have: { extend?: ThemeTokens, tokens?: ThemeTokens, themes?: ... }
+    // We need to extract the actual DesignTokens (flat structure)
+        const themeConfig = config.theme;
+    // Check if theme is directly a flat object (DesignTokens format)
+    // This handles the case where config.theme might be passed as DesignTokens directly
+        return createTokens(!themeConfig || "object" != typeof themeConfig || "extend" in themeConfig || "tokens" in themeConfig || "themes" in themeConfig ? {} : themeConfig);
+    // If theme has nested structure (extend/tokens/themes), we can't directly use it
+    // Return empty tokens - the theme system will use defaults
+    // TODO: Add proper conversion from ThemeTokens to DesignTokens if needed
+}
+
+/**
+ * Theme Context
  *
- * @example
- * ```tsx
- * import { ThemeProvider } from '@shohojdhara/atomix/theme';
+ * React context for theme management
+ */
+/**
+ * Theme context with default values
+ */ const ThemeContext =  createContext(null);
+
+ThemeContext.displayName = "ThemeContext";
+
+/**
+ * Theme Provider
  *
- * // Loads from atomix.config.ts (config file required)
- * function App() {
- *   return (
- *     <ThemeProvider>
- *       <YourApp />
- *     </ThemeProvider>
- *   );
- * }
+ * React context provider for theme management with separated concerns.
+ * Simplified version focusing on core functionality:
+ * - String-based themes (CSS files)
+ * - DesignTokens (dynamic themes)
+ * - Persistence via localStorage
  *
- * // Provide explicit theme (bypasses config)
- * function App() {
- *   return (
- *     <ThemeProvider defaultTheme="dark">
- *       <YourApp />
- *     </ThemeProvider>
- *   );
- * }
- * ```
- */ const ThemeProvider = ({children: children, defaultTheme: defaultTheme, themes: themes = {}, basePath: basePath = "/themes", cdnPath: cdnPath = null, preload: preload = [], lazy: lazy = !0, storageKey: storageKey = "atomix-theme", dataAttribute: dataAttribute = "data-theme", enablePersistence: enablePersistence = !0, useMinified: useMinified = !1, onThemeChange: onThemeChange, onError: onError}) => {
+ * Falls back to 'default' theme if no configuration is found.
+ */
+const ThemeProvider = ({children: children, defaultTheme: defaultTheme, themes: themes = {}, basePath: basePath = "/themes", cdnPath: cdnPath = null, useMinified: useMinified = !1, storageKey: storageKey = "atomix-theme", dataAttribute: dataAttribute = "data-theme", enablePersistence: enablePersistence = !0, onThemeChange: onThemeChange, onError: onError}) => {
     // Store callbacks in refs to avoid recreating when they change
     const onThemeChangeRef = useRef(onThemeChange), onErrorRef = useRef(onError);
-    // Update refs when callbacks change
+    // Update ref when callback changes
     useEffect((() => {
         onThemeChangeRef.current = onThemeChange, onErrorRef.current = onError;
     }), [ onThemeChange, onError ]);
-    // Create stable wrapper functions that read from refs
+    // Create stable wrapper functions that read from ref
     const handleThemeChange = useCallback((theme => {
         onThemeChangeRef.current?.(theme);
     }), []), handleError = useCallback(((error, themeName) => {
         onErrorRef.current?.(error, themeName);
-    }), []), themesRef = useRef(themes), themesStable = useMemo((() => {
-        // Only update if themes object actually changed (shallow comparison)
-        const currentKeys = Object.keys(themes), prevKeys = Object.keys(themesRef.current);
-        return currentKeys.length !== prevKeys.length || currentKeys.some((key => themes[key] !== themesRef.current[key])) ? (themesRef.current = themes, 
-        themes) : themesRef.current;
-    }), [ themes ]), logger = useMemo((() => getLogger()), []), registry = useMemo((() => {
-        const reg = new ThemeRegistry;
-        // Register themes from props
-                if (themesStable && Object.keys(themesStable).length > 0) for (const [themeId, metadata] of Object.entries(themesStable)) reg.has(themeId) || reg.register(themeId, {
-            type: "css",
-            name: metadata.name,
-            class: metadata.class || themeId,
-            description: metadata.description,
-            author: metadata.author,
-            version: metadata.version,
-            tags: metadata.tags,
-            supportsDarkMode: metadata.supportsDarkMode,
-            status: metadata.status,
-            a11y: metadata.a11y,
-            color: metadata.color,
-            features: metadata.features,
-            dependencies: metadata.dependencies
-        });
-        return reg;
-    }), [ themesStable ]), storageAdapter = useMemo((() => ({
-        getItem: key => {
-            if (isServer()) return null;
-            try {
-                return localStorage.getItem(key);
-            } catch {
-                return null;
-            }
-        },
-        setItem: (key, value) => {
-            if (!isServer()) try {
-                localStorage.setItem(key, value);
-            } catch {
-                // Silently fail if localStorage is not available
-            }
-        },
-        removeItem: key => {
-            if (!isServer()) try {
-                localStorage.removeItem(key);
-            } catch {
-                // Silently fail
-            }
-        },
-        isAvailable: () => {
-            if (isServer()) return !1;
-            try {
-                const test = "__atomix_storage_test__";
-                return localStorage.setItem(test, test), localStorage.removeItem(test), !0;
-            } catch {
-                return !1;
-            }
-        }
-    })), []), themeApplicator = useMemo((() => isServer() ? null : new ThemeApplicator), []), initialDefaultTheme = useMemo((() => {
+    }), []), storageAdapter = useMemo((() => createLocalStorageAdapter()), []), initialDefaultTheme = useMemo((() => {
         // Check storage first
         if (enablePersistence && storageAdapter.isAvailable()) {
             const stored = storageAdapter.getItem(storageKey);
@@ -3277,193 +2120,169 @@ class ThemeApplicator {
         }
         // If defaultTheme is provided, use it
                 if (null != defaultTheme) return defaultTheme;
-        // Load from atomix.config.ts (required)
-                const configTokens = loadThemeFromConfigSync();
-        return configTokens && Object.keys(configTokens).length > 0 ? configTokens : null;
-        // Config is required - this will be caught in useEffect
-        }), [ enablePersistence, storageAdapter, storageKey, defaultTheme ]), [currentTheme, setCurrentTheme] = useState((() => "string" == typeof initialDefaultTheme ? initialDefaultTheme : isJSTheme(initialDefaultTheme) ? initialDefaultTheme.name || "js-theme" : initialDefaultTheme && "object" == typeof initialDefaultTheme && !isJSTheme(initialDefaultTheme) ? "config-theme" : "" // No default theme - use built-in styles
-    )), [activeTheme, setActiveTheme] = useState((() => isJSTheme(initialDefaultTheme) ? initialDefaultTheme : null)), [availableThemes, setAvailableThemes] = useState((() => registry.getAllMetadata().map((meta => ({
-        name: meta.name || "",
-        class: meta.class,
-        description: meta.description,
-        author: meta.author,
-        version: meta.version,
-        tags: meta.tags,
-        supportsDarkMode: meta.supportsDarkMode,
-        status: meta.status,
-        a11y: meta.a11y,
-        color: meta.color,
-        features: meta.features,
-        dependencies: meta.dependencies
-    }))))), [isLoading, setIsLoading] = useState(!1), [error, setError] = useState(null), loadedThemesRef = useRef(new Set), previousThemeRef = useRef(null);
-    // Get default theme (with automatic config loading)
-    useCallback((() => {
-        // Check storage first
-        if (enablePersistence && storageAdapter.isAvailable()) {
-            const stored = storageAdapter.getItem(storageKey);
-            if (stored) return stored;
+        // Try to load from atomix.config.ts as fallback, but only in Node.js/SSR environments
+                if ("undefined" == typeof window) try {
+            // Dynamically import the config loader to avoid bundling issues in browser
+            // eslint-disable-next-line @typescript-eslint/no-var-requires
+            const {loadThemeFromConfigSync: loadThemeFromConfigSync} = require("../config/configLoader"), configTokens = loadThemeFromConfigSync();
+            if (configTokens && Object.keys(configTokens).length > 0) 
+            // For simplicity, we'll treat config tokens as a special theme name
+            return "config-theme";
+        } catch (error) {
+            // Failed to load theme from config, using default
         }
-        // If defaultTheme is provided, use it
-                if (null != defaultTheme) return defaultTheme;
-        // Load from atomix.config.ts (required)
-        // Config file must exist - throws error if not found
-                const configTokens = loadThemeFromConfigSync();
-        if (configTokens && Object.keys(configTokens).length > 0) 
-        // Return config tokens as Partial<DesignTokens>
-        return configTokens;
-        throw new Error("ThemeProvider: atomix.config.ts is required when defaultTheme is not provided.");
-    }), [ enablePersistence, storageAdapter, storageKey, defaultTheme ]);
-    // Apply JS theme (supports both Theme and DesignTokens)
-    const applyJSTheme = useCallback((async (theme, removePrevious = !0) => {
-        !isServer() && themeApplicator && (removePrevious && (
-        // Remove previous theme
-        removeCSS("atomix-theme"), 
-        // Also remove any existing CSS variables
-        activeTheme && activeTheme.cssVars && Object.keys(activeTheme.cssVars).forEach((key => {
-            document.documentElement.style.removeProperty(key);
-        }))), null === theme || "object" != typeof theme || "palette" in theme || "typography" in theme || "__isJSTheme" in theme ? 
-        // Use ThemeApplicator for Theme objects
-        themeApplicator?.applyTheme(theme) : injectCSS$1(createTheme(theme), "atomix-theme"));
-    }), [ activeTheme, themeApplicator ]), setTheme = useCallback((async (theme, options) => {
-        const {removePrevious: removePrevious = !0, fallbackOnError: fallbackOnError = !0, customPath: customPath} = options || {};
-        setIsLoading(!0), setError(null);
+        // Default fallback
+                return "default";
+    }), [ defaultTheme, enablePersistence, storageKey ]), [currentTheme, setCurrentTheme] = useState((() => "string" == typeof initialDefaultTheme ? initialDefaultTheme : "tokens-theme")), [activeTokens, setActiveTokens] = useState((() => {
+        // If defaultTheme is DesignTokens, store them
+        if (defaultTheme && "string" != typeof defaultTheme) {
+            const {createTokens: createTokens} = require("../tokens/tokens");
+            return createTokens(defaultTheme);
+        }
+        return null;
+    })), [isLoading, setIsLoading] = useState(!1), [error, setError] = useState(null), loadedThemesRef = useRef(new Set), themePromisesRef = useRef({}), abortControllerRef = useRef(null);
+    // Handle initial DesignTokens defaultTheme
+    useEffect((() => {
+        defaultTheme && "string" != typeof defaultTheme && activeTokens && !isServer() && injectCSS$1(createTheme(defaultTheme), "theme-tokens-theme");
+    }), [ defaultTheme, activeTokens ]), // Run when defaultTheme or activeTokens change
+    // Apply initial theme attributes to document element
+    useEffect((() => {
+        isServer() || applyThemeAttributes(String(currentTheme), dataAttribute);
+    }), [ currentTheme, dataAttribute ]), 
+    // Handle theme persistence
+    useEffect((() => {
+        enablePersistence && storageAdapter.isAvailable() && storageAdapter.setItem(storageKey, String(currentTheme));
+    }), [ currentTheme, storageKey, enablePersistence, storageAdapter ]), 
+    // Cleanup: Remove completed promises and abort controllers on unmount
+    useEffect((() => () => {
+        // Cancel any in-flight theme loads
+        abortControllerRef.current && (abortControllerRef.current.abort(), abortControllerRef.current = null), 
+        Object.entries(themePromisesRef.current).forEach((([key, promise]) => {})), 
+        // Clear all on unmount
+        themePromisesRef.current = {};
+    }), []);
+    // Function to set theme with proper type handling
+    const setTheme = useCallback((async (theme, options) => {
+        // Cancel previous theme load if in progress
+        abortControllerRef.current && abortControllerRef.current.abort();
+        // Create new AbortController for this theme load
+                const abortController = new AbortController;
+        abortControllerRef.current = abortController, setIsLoading(!0), setError(null);
         try {
-            // Handle Theme or DesignTokens object directly
+            let themeName;
             if ("string" != typeof theme) {
-                if (null !== theme && "object" == typeof theme && !("palette" in theme) && !("typography" in theme) && !("__isJSTheme" in theme)) {
-                    // Handle DesignTokens using unified theme system
-                    await applyJSTheme(theme, removePrevious);
-                    const themeName = "design-tokens-theme";
-                    return previousThemeRef.current = currentTheme, setCurrentTheme(themeName), setActiveTheme(null), 
-                    previousThemeRef.current, Date.now(), handleThemeChange(themeName), 
-                    // Persist to storage
-                    enablePersistence && storageAdapter.isAvailable() && storageAdapter.setItem(storageKey, themeName), 
-                    void setIsLoading(!1);
-                }
-                if (isJSTheme(theme)) {
-                    // Handle Theme object
-                    await applyJSTheme(theme, removePrevious);
-                    const themeName = theme.name || "js-theme";
-                    return previousThemeRef.current = currentTheme, setCurrentTheme(themeName), setActiveTheme(theme), 
-                    previousThemeRef.current, Date.now(), handleThemeChange(theme), 
-                    // Persist to storage
-                    enablePersistence && storageAdapter.isAvailable() && storageAdapter.setItem(storageKey, themeName), 
+                // Check if aborted before processing
+                if (abortController.signal.aborted) return;
+                // For DesignTokens, create CSS and inject it
+                                const {createTheme: createTheme} = await Promise.resolve().then((() => index)), css = createTheme(theme), themeId = "tokens-theme";
+                // Check if aborted after async operation
+                if (abortController.signal.aborted) return;
+                // Remove any previously loaded theme CSS
+                                removeCSS(`theme-${currentTheme}`), 
+                // Inject new theme CSS
+                injectCSS$1(css, `theme-${themeId}`);
+                // Store tokens for reference
+                const {createTokens: createTokens} = await Promise.resolve().then((() => tokens)), fullTokens = createTokens(theme);
+                // Check if aborted before state update
+                if (abortController.signal.aborted) return;
+                return setActiveTokens(fullTokens), setCurrentTheme(themeId), handleThemeChange(fullTokens), 
+                void setIsLoading(!1);
+            }
+            // If it's a string theme name, load the associated CSS
+                        if (themeName = theme, "string" == typeof theme && themes[theme]) {
+                // Check if theme is already loading
+                if (themePromisesRef.current[theme]) try {
+                    // Check if aborted
+                    if (await themePromisesRef.current[theme], abortController.signal.aborted) return;
+                    return setCurrentTheme(theme), setActiveTokens(null), handleThemeChange(theme), 
                     void setIsLoading(!1);
+                } catch {
+                    // If previous load failed, continue with new load
                 }
-                {
-                    const error = new Error("Invalid theme object provided");
-                    throw handleError(error, "js-theme"), setError(error), setIsLoading(!1), error;
+                // Load CSS theme
+                                const themeLoadPromise = new Promise((async (resolve, reject) => {
+                    try {
+                        // Check if aborted
+                        if (abortController.signal.aborted) return void resolve();
+                        if (!themes[theme]) throw new Error(`Theme metadata not found for theme: ${theme}`);
+                        {
+                            // Build CSS path using utility function
+                            const cssPath = buildThemePath(theme, basePath, useMinified, cdnPath);
+                            // Check if aborted
+                                                        if (abortController.signal.aborted) return void resolve();
+                            // Load CSS file (using loadThemeCSS from domUtils)
+                                                        const {loadThemeCSS: loadThemeCSS} = await Promise.resolve().then((() => domUtils));
+                            // Check if aborted after async operation
+                            if (await loadThemeCSS(cssPath, `theme-${theme}`), abortController.signal.aborted) return void resolve();
+                            // Remove any previously loaded theme CSS
+                                                        removeCSS(`theme-${String(currentTheme)}`), loadedThemesRef.current.add(theme), 
+                            setCurrentTheme(theme), setActiveTokens(null), handleThemeChange(theme), resolve();
+                        }
+                    } catch (err) {
+                        // Don't reject if aborted
+                        if (abortController.signal.aborted) return void resolve();
+                        const error = err instanceof Error ? err : new Error(String(err));
+                        setError(error), handleError(error, String(theme)), reject(error);
+                    }
+                }));
+                themePromisesRef.current[theme] = themeLoadPromise;
+                try {
+                    await themeLoadPromise;
+                } catch {
+                    // Error already handled in promise
                 }
+                // Clean up completed promise after a delay to prevent memory leak
+                                setTimeout((() => {
+                    themePromisesRef.current[theme] === themeLoadPromise && delete themePromisesRef.current[theme];
+                }), 1e3);
+            } else {
+                // Check if aborted
+                if (abortController.signal.aborted) return;
+                // For string theme that isn't in our themes record, just set the name
+                                setCurrentTheme(themeName), setActiveTokens(null), handleThemeChange(themeName);
             }
-            // Check if theme exists
-                        if (!registry.has(theme)) {
-                const error = new Error(`Theme "${theme}" not found in registry`);
-                if (handleError(error, theme), setError(error), fallbackOnError && currentTheme) return void setIsLoading(!1);
-                throw setIsLoading(!1), error;
-            }
-            // Load theme CSS if needed
-                        const themePath = customPath || buildThemePath(theme, basePath, useMinified, cdnPath || void 0), linkId = getThemeLinkId(theme);
-            // Remove previous theme if requested
-            removePrevious && previousThemeRef.current && previousThemeRef.current !== theme && (themeNameOrLinkId => {
-                if (isServer()) return;
-                // Try as link ID first, then as theme name
-                                let link = document.getElementById(themeNameOrLinkId);
-                if (!link) {
-                    const linkId = getThemeLinkId(themeNameOrLinkId);
-                    link = document.getElementById(linkId);
-                }
-                link && link.remove();
-            })(previousThemeRef.current), 
-            // Load CSS if not already loaded
-            isThemeLoaded(theme) || (await loadThemeCSS(themePath, linkId), loadedThemesRef.current.add(theme)), 
-            // Apply theme attributes
-            ((dataAttribute, themeName) => {
-                isServer() || (
-                // Set data attribute on body
-                document.body.setAttribute(dataAttribute, themeName), 
-                // Also set on documentElement for broader compatibility
-                document.documentElement.setAttribute(dataAttribute, themeName));
-            })(dataAttribute, theme), 
-            // Update state
-            previousThemeRef.current = currentTheme, setCurrentTheme(theme), setActiveTheme(null), 
-            previousThemeRef.current, Date.now(), handleThemeChange(theme), 
-            // Persist to storage
-            enablePersistence && storageAdapter.isAvailable() && storageAdapter.setItem(storageKey, theme), 
-            setIsLoading(!1);
         } catch (err) {
+            // Don't set error if aborted
+            if (abortController.signal.aborted) return;
             const error = err instanceof Error ? err : new Error(String(err));
-            throw handleError(error, "string" == typeof theme ? theme : "js-theme"), setError(error), 
-            setIsLoading(!1), err;
-        }
-    }), [ registry, basePath, cdnPath, useMinified, dataAttribute, enablePersistence, storageAdapter, storageKey, currentTheme, activeTheme, applyJSTheme, handleThemeChange, handleError ]), preloadTheme = useCallback((async themeName => {
-        if (!isServer() && !isThemeLoaded(themeName)) {
-            setIsLoading(!0);
-            try {
-                if (!registry.has(themeName)) throw new Error(`Theme "${themeName}" not found in registry`);
-                const themePath = buildThemePath(themeName, basePath, useMinified, cdnPath || void 0), linkId = getThemeLinkId(themeName);
-                await loadThemeCSS(themePath, linkId), loadedThemesRef.current.add(themeName);
-            } catch (err) {
-                const error = err instanceof Error ? err : new Error(String(err));
-                handleError(error, themeName), setError(error);
-            } finally {
-                setIsLoading(!1);
-            }
+            setError(error), handleError(error, String(theme));
+        } finally {
+            // Only update loading state if not aborted
+            abortController.signal.aborted || setIsLoading(!1);
         }
-    }), [ registry, basePath, cdnPath, useMinified, handleError ]), isThemeLoaded$1 = useCallback((themeName => isThemeLoaded(themeName)), []);
-    // Set theme function (supports string, Theme, or DesignTokens)
-        // Initialize default theme on mount
-    useEffect((() => {
-        isServer() || (async () => {
-            // Use the initial default theme we computed
-            const defaultThemeValue = initialDefaultTheme;
-            if (defaultThemeValue) try {
-                null === defaultThemeValue || "object" != typeof defaultThemeValue || "palette" in defaultThemeValue || "typography" in defaultThemeValue || "__isJSTheme" in defaultThemeValue || "string" == typeof defaultThemeValue ? 
-                // Handle string or Theme object
-                await setTheme(defaultThemeValue, {
-                    removePrevious: !1,
-                    fallbackOnError: !0
-                }) : (
-                // Apply config tokens directly
-                await applyJSTheme(defaultThemeValue, !1), 
-                // Update state and emit events
-                setCurrentTheme("config-theme"), setActiveTheme(null), Date.now(), handleThemeChange("config-theme"), 
-                // Persist to storage
-                enablePersistence && storageAdapter.isAvailable() && storageAdapter.setItem(storageKey, "config-theme"));
-            } catch (err) {
-                const error = err instanceof Error ? err : new Error(String(err));
-                throw logger.error("Failed to load theme from config", error, {
-                    theme: defaultThemeValue
-                }), handleError(error, "config-theme"), setError(error), error;
-            }
-        })();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    ), []), // Only run once on mount - initialDefaultTheme is stable
-    // Preload themes
-    useEffect((() => {
-        !isServer() && preload && 0 !== preload.length && (async () => {
-            for (const themeName of preload) if (!isThemeLoaded(themeName)) try {
-                await preloadTheme(themeName);
+    }), [ themes, currentTheme, handleThemeChange, handleError, basePath, useMinified, cdnPath ]), isThemeLoaded = useCallback((themeName => loadedThemesRef.current.has(themeName)), []), preloadTheme = useCallback((async themeName => {
+        if (themes[themeName] && !isThemeLoaded(themeName)) {
+            setIsLoading(!0);
+            try {
+                // Build CSS path using utility function
+                const cssPath = buildThemePath(themeName, basePath, useMinified, cdnPath);
+                // Preload CSS by fetching it
+                                await fetch(cssPath), loadedThemesRef.current.add(themeName);
             } catch (err) {
-                // Silently fail for preload
-                logger.warn(`Failed to preload theme "${themeName}"`, {
-                    error: err instanceof Error ? err.message : String(err)
-                });
+                const error = err instanceof Error ? err : new Error(String(err));
+                setError(error), handleError(error, themeName);
+            } finally {
+                setIsLoading(!1);
             }
-        })();
-    }), [ preload, preloadTheme, logger ]);
-    // Context value
-    const contextValue = useMemo((() => ({
+        }
+    }), [ themes, isThemeLoaded, handleError, basePath, useMinified, cdnPath ]), themeManager = useMemo((() => ({})), []), availableThemes = useMemo((() => Object.entries(themes).map((([name, metadata]) => ({
+        ...metadata,
+        name: name
+    })))), [ themes ]), contextValue = useMemo((() => ({
         theme: currentTheme,
-        activeTheme: activeTheme,
+        activeTokens: activeTokens,
         setTheme: setTheme,
         availableThemes: availableThemes,
         isLoading: isLoading,
         error: error,
-        isThemeLoaded: isThemeLoaded$1,
-        preloadTheme: preloadTheme
-    })), [ currentTheme, activeTheme, setTheme, availableThemes, isLoading, error, isThemeLoaded$1, preloadTheme ]);
-    return jsx(ThemeContext.Provider, {
+        isThemeLoaded: isThemeLoaded,
+        preloadTheme: preloadTheme,
+        themeManager: themeManager
+    })), [ currentTheme, activeTokens, setTheme, availableThemes, 
+    // Use memoized value
+    isLoading, error, isThemeLoaded, preloadTheme, themeManager ]);
+    // Check if theme is loaded
+        return jsx(ThemeContext.Provider, {
         value: contextValue,
         children: children
     });
@@ -3499,7 +2318,7 @@ class ThemeApplicator {
     if (!context) throw new Error("useTheme must be used within a ThemeProvider");
     return {
         theme: context.theme,
-        activeTheme: context.activeTheme,
+        activeTokens: context.activeTokens,
         setTheme: context.setTheme,
         availableThemes: context.availableThemes,
         isLoading: context.isLoading,
@@ -3509,6 +2328,89 @@ class ThemeApplicator {
     };
 }
 
+function useThemeTokens() {
+    const {theme: theme, activeTokens: activeTokens} = useTheme(), getToken = useCallback(((tokenName, fallback) => {
+        if ("undefined" == typeof window) return fallback || "";
+        const cssVarName = `--atomix-${tokenName}`;
+        return getComputedStyle(document.documentElement).getPropertyValue(cssVarName).trim() || fallback || "";
+    }), []);
+    // Helper function to get CSS variable value
+        // Return unified API for accessing theme values
+    // Note: For SSR or direct token access, use activeTokens directly
+    return {
+        theme: theme,
+        activeTokens: activeTokens,
+        getToken: getToken,
+        // Commonly used tokens with fallbacks
+        colors: {
+            primary: getToken("primary", "#3b82f6"),
+            secondary: getToken("secondary", "#10b981"),
+            error: getToken("error", "#ef4444"),
+            success: getToken("success", "#22c55e"),
+            warning: getToken("warning", "#eab308"),
+            info: getToken("info", "#3b82f6"),
+            light: getToken("light", "#f9fafb"),
+            dark: getToken("dark", "#111827")
+        },
+        spacing: {
+            1: getToken("spacing-1", "0.25rem"),
+            2: getToken("spacing-2", "0.5rem"),
+            3: getToken("spacing-3", "0.75rem"),
+            4: getToken("spacing-4", "1rem"),
+            5: getToken("spacing-5", "1.25rem"),
+            6: getToken("spacing-6", "1.5rem"),
+            8: getToken("spacing-8", "2rem"),
+            10: getToken("spacing-10", "2.5rem"),
+            12: getToken("spacing-12", "3rem"),
+            16: getToken("spacing-16", "4rem"),
+            20: getToken("spacing-20", "5rem")
+        },
+        borderRadius: {
+            sm: getToken("border-radius-sm", "0.25rem"),
+            md: getToken("border-radius-md", "0.5rem"),
+            lg: getToken("border-radius-lg", "0.75rem"),
+            xl: getToken("border-radius-xl", "1rem"),
+            full: getToken("border-radius-full", "9999px")
+        },
+        typography: {
+            fontFamily: {
+                sans: getToken("font-sans-serif", "Inter, system-ui, sans-serif"),
+                serif: getToken("font-serif", "Georgia, serif"),
+                mono: getToken("font-monospace", "Fira Code, monospace")
+            },
+            fontSize: {
+                xs: getToken("font-size-xs", "0.75rem"),
+                sm: getToken("font-size-sm", "0.875rem"),
+                md: getToken("font-size-md", "1rem"),
+                lg: getToken("font-size-lg", "1.125rem"),
+                xl: getToken("font-size-xl", "1.25rem"),
+                "2xl": getToken("font-size-2xl", "1.5rem"),
+                "3xl": getToken("font-size-3xl", "1.875rem"),
+                "4xl": getToken("font-size-4xl", "2.25rem")
+            },
+            fontWeight: {
+                light: getToken("font-weight-light", "300"),
+                normal: getToken("font-weight-normal", "400"),
+                medium: getToken("font-weight-medium", "500"),
+                semibold: getToken("font-weight-semibold", "600"),
+                bold: getToken("font-weight-bold", "700")
+            }
+        },
+        shadows: {
+            sm: getToken("box-shadow-sm", "0 1px 2px 0 rgba(0, 0, 0, 0.05)"),
+            md: getToken("box-shadow-md", "0 4px 6px -1px rgba(0, 0, 0, 0.1)"),
+            lg: getToken("box-shadow-lg", "0 10px 15px -3px rgba(0, 0, 0, 0.1)"),
+            xl: getToken("box-shadow-xl", "0 20px 25px -5px rgba(0, 0, 0, 0.1)"),
+            inset: getToken("box-shadow-inset", "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)")
+        },
+        transitions: {
+            fast: getToken("transition-fast", "150ms"),
+            base: getToken("transition-base", "200ms"),
+            slow: getToken("transition-slow", "300ms")
+        }
+    };
+}
+
 /**
  * Default fallback UI
  */ const DefaultFallback = ({error: error, errorInfo: errorInfo}) => {
@@ -3557,7 +2459,7 @@ class ThemeApplicator {
                 },
                 children: JSON.stringify(context, null, 2)
             }) ]
-        }), "development" === process.env.NODE_ENV && errorInfo && jsxs("details", {
+        }), ("undefined" == typeof process || "development" === process.env?.NODE_ENV) && errorInfo && jsxs("details", {
             style: {
                 marginTop: "1rem"
             },
@@ -3653,6 +2555,76 @@ class ThemeApplicator {
     }
 }
 
+/**
+ * Theme Applicator
+ *
+ * Applies theme configurations to the DOM, including CSS variables,
+ * component overrides, typography, spacing, and color palettes.
+ *
+ * Uses the unified theme system for CSS generation and injection.
+ */
+/**
+ * Theme applicator class for runtime theme application
+ *
+ * Uses the unified theme system for efficient CSS variable generation and injection.
+ */ class ThemeApplicator {
+    constructor(root = document.documentElement) {
+        this.styleId = "atomix-theme-applicator", this.root = root;
+    }
+    /**
+   * Apply a complete theme configuration using DesignTokens
+   *
+   * Uses the unified theme system to generate and inject CSS.
+   * Automatically respects atomix.config.ts when using DesignTokens.
+   */    applyTheme(tokens) {
+        // Clear previously applied variables
+        this.clearAppliedVars(), 
+        // Inject CSS into DOM
+        injectCSS$1(createTheme(tokens, {
+            selector: ":root",
+            prefix: "atomix"
+        }), this.styleId);
+    }
+    /**
+   * Apply global CSS variables
+   */    applyGlobalCSSVars(vars) {
+        Object.entries(vars).forEach((([key, value]) => {
+            this.root.style.setProperty(key, String(value));
+        }));
+    }
+    /**
+   * Clear all applied CSS variables
+   */    clearAppliedVars() {
+        removeCSS(this.styleId);
+    }
+    /**
+   * Remove theme application
+   */    removeTheme() {
+        this.clearAppliedVars(), removeCSS(this.styleId);
+    }
+    /**
+   * Update specific CSS variables without clearing all
+   */    updateCSSVars(vars) {
+        this.applyGlobalCSSVars(vars);
+    }
+}
+
+/**
+ * Global theme applicator instance
+ */ let globalApplicator = null;
+
+/**
+ * Get or create global theme applicator
+ */ function getThemeApplicator() {
+    return globalApplicator || (globalApplicator = new ThemeApplicator), globalApplicator;
+}
+
+/**
+ * Apply theme using global applicator
+ */ function applyTheme(tokens) {
+    getThemeApplicator().applyTheme(tokens);
+}
+
 const VIEWPORT_PRESETS = {
     mobile: {
         width: 375,
@@ -5138,10 +4110,374 @@ class ThemeValidator {
 };
 
 /**
- * Theme Comparator Component
+ * Theme Comparator Component
+ *
+ * Compares two themes and highlights differences
+ */ var aCallable = aCallable$3, toObject = toObject$2, IndexedObject = indexedObject, lengthOfArrayLike = lengthOfArrayLike$2, $TypeError = TypeError, REDUCE_EMPTY = "Reduce of empty array with no initial value", createMethod = function(IS_RIGHT) {
+    return function(that, callbackfn, argumentsLength, memo) {
+        var O = toObject(that), self = IndexedObject(O), length = lengthOfArrayLike(O);
+        if (aCallable(callbackfn), 0 === length && argumentsLength < 2) throw new $TypeError(REDUCE_EMPTY);
+        var index = IS_RIGHT ? length - 1 : 0, i = IS_RIGHT ? -1 : 1;
+        if (argumentsLength < 2) for (;;) {
+            if (index in self) {
+                memo = self[index], index += i;
+                break;
+            }
+            if (index += i, IS_RIGHT ? index < 0 : length <= index) throw new $TypeError(REDUCE_EMPTY);
+        }
+        for (;IS_RIGHT ? index >= 0 : length > index; index += i) index in self && (memo = callbackfn(memo, self[index], index, O));
+        return memo;
+    };
+}, arrayReduce = {
+    // `Array.prototype.reduce` method
+    // https://tc39.es/ecma262/#sec-array.prototype.reduce
+    left: createMethod(!1),
+    // `Array.prototype.reduceRight` method
+    // https://tc39.es/ecma262/#sec-array.prototype.reduceright
+    right: createMethod(!0)
+}, fails = fails$9, globalThis$1 = globalThis_1, userAgent = environmentUserAgent, classof = classofRaw$2, userAgentStartsWith = function(string) {
+    return userAgent.slice(0, string.length) === string;
+}, environment = userAgentStartsWith("Bun/") ? "BUN" : userAgentStartsWith("Cloudflare-Workers") ? "CLOUDFLARE" : userAgentStartsWith("Deno/") ? "DENO" : userAgentStartsWith("Node.js/") ? "NODE" : globalThis$1.Bun && "string" == typeof Bun.version ? "BUN" : globalThis$1.Deno && "object" == typeof Deno.version ? "DENO" : "process" === classof(globalThis$1.process) ? "NODE" : globalThis$1.window && globalThis$1.document ? "BROWSER" : "REST", $reduce = arrayReduce.left;
+
+// `Array.prototype.reduce` method
+// https://tc39.es/ecma262/#sec-array.prototype.reduce
+_export({
+    target: "Array",
+    proto: !0,
+    forced: !("NODE" === environment) && environmentV8Version > 79 && environmentV8Version < 83 || !function(METHOD_NAME, argument) {
+        var method = [][METHOD_NAME];
+        return !!method && fails((function() {
+            // eslint-disable-next-line no-useless-call -- required for testing
+            method.call(null, argument || function() {
+                return 1;
+            }, 1);
+        }));
+    }("reduce")
+}, {
+    reduce: function(callbackfn /* , initialValue */) {
+        var length = arguments.length;
+        return $reduce(this, callbackfn, length, length > 1 ? arguments[1] : void 0);
+    }
+});
+
+var reduce$3 = getBuiltInPrototypeMethod$3("Array", "reduce"), isPrototypeOf = objectIsPrototypeOf, method = reduce$3, ArrayPrototype = Array.prototype;
+
+const _reduceInstanceProperty =  getDefaultExportFromCjs((function(it) {
+    var own = it.reduce;
+    return it === ArrayPrototype || isPrototypeOf(ArrayPrototype, it) && own === ArrayPrototype.reduce ? method : own;
+})), DEFAULT_PALETTE = {
+    primary: {
+        main: "#7c3aed",
+        // Primary-6
+        light: "#d0b2f5",
+        // Primary-3
+        dark: "#3c1583",
+        // Primary-9
+        contrastText: "#ffffff"
+    },
+    secondary: {
+        main: "#f3f4f6",
+        // Gray-2
+        light: "#ffffff",
+        // Gray-1
+        dark: "#e5e7eb",
+        // Gray-3
+        contrastText: "#1f2937"
+    },
+    error: {
+        main: "#ef4444",
+        // Red-6
+        light: "#fca5a5",
+        // Red-4
+        dark: "#991b1b",
+        // Red-9
+        contrastText: "#ffffff"
+    },
+    warning: {
+        main: "#eab308",
+        // Yellow-6
+        light: "#fde047",
+        // Yellow-4
+        dark: "#854d0e",
+        // Yellow-9
+        contrastText: "#000000"
+    },
+    info: {
+        main: "#3b82f6",
+        // Blue-6
+        light: "#93c5fd",
+        // Blue-4
+        dark: "#1e40af",
+        // Blue-9
+        contrastText: "#ffffff"
+    },
+    success: {
+        main: "#22c55e",
+        // Green-6
+        light: "#86efac",
+        // Green-4
+        dark: "#166534",
+        // Green-9
+        contrastText: "#ffffff"
+    },
+    background: {
+        default: "#ffffff",
+        // Primary-bg
+        paper: "#f3f4f6",
+        // Secondary-bg
+        subtle: "#d1d5db"
+    },
+    text: {
+        primary: "#111827",
+        // Gray-10
+        secondary: "#374151",
+        // Gray-8
+        disabled: "#9ca3af"
+    }
+}, DEFAULT_TYPOGRAPHY = {
+    fontFamily: '"Roboto", "Helvetica Neue", "Helvetica", "Arial", sans-serif',
+    fontSize: 16,
+    // 1rem
+    fontWeightLight: 300,
+    fontWeightRegular: 400,
+    fontWeightMedium: 500,
+    fontWeightSemiBold: 600,
+    fontWeightBold: 700,
+    fontWeightHeavy: 800,
+    fontWeightBlack: 900,
+    h1: {
+        fontSize: "2.5rem",
+        // 40px
+        fontWeight: 700,
+        lineHeight: 1.3,
+        letterSpacing: "-1px"
+    },
+    h2: {
+        fontSize: "2rem",
+        // 32px
+        fontWeight: 700,
+        lineHeight: 1.3,
+        letterSpacing: "-1px"
+    },
+    h3: {
+        fontSize: "1.5rem",
+        // 24px
+        fontWeight: 700,
+        lineHeight: 1.3,
+        letterSpacing: "-1px"
+    },
+    h4: {
+        fontSize: "1.25rem",
+        // 20px
+        fontWeight: 700,
+        lineHeight: 1.3,
+        letterSpacing: "-0.5px"
+    },
+    h5: {
+        fontSize: "1.125rem",
+        // 18px
+        fontWeight: 700,
+        lineHeight: 1.3,
+        letterSpacing: "-0.5px"
+    },
+    h6: {
+        fontSize: "1rem",
+        // 16px
+        fontWeight: 700,
+        lineHeight: 1.3,
+        letterSpacing: "-0.5px"
+    },
+    body1: {
+        fontSize: "1rem",
+        // 16px
+        fontWeight: 400,
+        lineHeight: 1.2
+    },
+    body2: {
+        fontSize: "0.875rem",
+        // 14px
+        fontWeight: 400,
+        lineHeight: 1.2
+    }
+}, DEFAULT_SHADOWS = {
+    xs: "0px 1px 2px 0px rgba(45, 54, 67, 0.04), 0px 2px 4px 0px rgba(45, 54, 67, 0.08)",
+    sm: "0 2px 4px rgba(0, 0, 0, 0.075)",
+    md: "0 4px 8px rgba(0, 0, 0, 0.1)",
+    lg: "0 16px 48px rgba(0, 0, 0, 0.175)",
+    xl: "0px 16px 64px -8px rgba(45, 54, 67, 0.14)",
+    inset: "inset 0 1px 2px rgba(0, 0, 0, 0.075)"
+}, DEFAULT_TRANSITIONS = {
+    duration: {
+        shortest: 150,
+        shorter: 200,
+        short: 250,
+        standard: 300,
+        complex: 375,
+        enteringScreen: 225,
+        leavingScreen: 195
+    },
+    easing: {
+        easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)",
+        easeOut: "cubic-bezier(0.0, 0, 0.2, 1)",
+        easeIn: "cubic-bezier(0.4, 0, 1, 1)",
+        sharp: "cubic-bezier(0.4, 0, 0.6, 1)"
+    }
+}, DEFAULT_ZINDEX = {
+    mobileStepper: 1e3,
+    speedDial: 1050,
+    appBar: 1020,
+    drawer: 1070,
+    modal: 1040,
+    snackbar: 1080,
+    tooltip: 1060
+}, DEFAULT_BORDER_RADIUS = {
+    base: "0.5rem",
+    // 8px (spacing-2)
+    sm: "0.25rem",
+    // 4px (spacing-1)
+    md: "0.25rem",
+    // 4px (spacing-1)
+    lg: "0.625rem",
+    // 10px (spacing-2.5)
+    xl: "0.75rem",
+    // 12px (spacing-3)
+    xxl: "1rem",
+    // 16px (spacing-4)
+    "3xl": "1.5rem",
+    // 24px (spacing-6)
+    "4xl": "2rem",
+    // 32px (spacing-8)
+    pill: "50rem"
+};
+
+// ============================================================================
+// Default Theme Values
+// ============================================================================
+// ============================================================================
+// Helper Functions
+// ============================================================================
+/**
+ * Create a complete palette color from partial configuration
+ */
+function createPaletteColor(color) {
+    return "string" == typeof color ? {
+        main: color,
+        light: lighten(color),
+        dark: darken(color),
+        contrastText: getContrastText(color)
+    } : {
+        main: color.main || "#000000",
+        light: color.light || lighten(color.main || "#000000"),
+        dark: color.dark || darken(color.main || "#000000"),
+        contrastText: color.contrastText || getContrastText(color.main || "#000000")
+    };
+}
+
+/**
+ * Create breakpoints object
+ */
+// ============================================================================
+// Main createTheme Function
+// ============================================================================
+/**
+ * Create a theme object with computed values
  *
- * Compares two themes and highlights differences
+ * @param options - Theme configuration options
+ * @returns Complete theme object
  */
+function createThemeObject(...options) {
+    // Merge all options
+    const mergedOptions = _reduceInstanceProperty(options).call(options, ((acc, option) => deepMerge(acc, option)), {}), palette = {
+        primary: createPaletteColor(mergedOptions.palette?.primary || DEFAULT_PALETTE.primary),
+        secondary: createPaletteColor(mergedOptions.palette?.secondary || DEFAULT_PALETTE.secondary),
+        error: createPaletteColor(mergedOptions.palette?.error || DEFAULT_PALETTE.error),
+        warning: createPaletteColor(mergedOptions.palette?.warning || DEFAULT_PALETTE.warning),
+        info: createPaletteColor(mergedOptions.palette?.info || DEFAULT_PALETTE.info),
+        success: createPaletteColor(mergedOptions.palette?.success || DEFAULT_PALETTE.success),
+        // Handle light and dark colors if provided
+        ...mergedOptions.palette?.light && {
+            light: createPaletteColor(mergedOptions.palette.light)
+        },
+        ...mergedOptions.palette?.dark && {
+            dark: createPaletteColor(mergedOptions.palette.dark)
+        },
+        background: {
+            default: mergedOptions.palette?.background?.default || DEFAULT_PALETTE.background.default,
+            subtle: mergedOptions.palette?.background?.subtle || DEFAULT_PALETTE.background.subtle
+        },
+        text: {
+            primary: mergedOptions.palette?.text?.primary || DEFAULT_PALETTE.text.primary,
+            secondary: mergedOptions.palette?.text?.secondary || DEFAULT_PALETTE.text.secondary,
+            disabled: mergedOptions.palette?.text?.disabled || DEFAULT_PALETTE.text.disabled
+        }
+    }, typography = deepMerge({
+        ...DEFAULT_TYPOGRAPHY
+    }, mergedOptions.typography || {}), spacing = function(spacingInput = 4) {
+        // If it's already a function, return it
+        return "function" == typeof spacingInput ? spacingInput : 
+        // If it's a number, create a function that multiplies by that number
+        "number" == typeof spacingInput ? (...values) => 0 === values.length ? "0px" : values.map((value => value * spacingInput + "px")).join(" ") : 
+        // If it's an array, use it as a scale
+        Array.isArray(spacingInput) ? (...values) => 0 === values.length ? "0px" : values.map((value => `${spacingInput[value] || value}px`)).join(" ") : (...values) => 0 === values.length ? "0px" : values.map((value => 4 * value + "px")).join(" ");
+    }(mergedOptions.spacing), breakpoints = function(breakpointsInput) {
+        const values = {
+            xs: 0,
+            sm: 576,
+            md: 768,
+            lg: 992,
+            xl: 1200,
+            xxl: 1440,
+            ...breakpointsInput?.values
+        }, unit = breakpointsInput?.unit || "px";
+        return {
+            values: values,
+            unit: unit,
+            up: key => `@media (min-width:${"number" == typeof key ? key : values[key] ?? 0}${unit})`,
+            down: key => `@media (max-width:${("number" == typeof key ? key : values[key] ?? 0) - .05}${unit})`,
+            between: (start, end) => {
+                const startValue = "number" == typeof start ? start : values[start] ?? 0, endValue = "number" == typeof end ? end : values[end] ?? 0;
+                return `@media (min-width:${startValue}${unit}) and (max-width:${endValue - .05}${unit})`;
+            }
+        };
+    }(mergedOptions.breakpoints), shadows = deepMerge({
+        ...DEFAULT_SHADOWS
+    }, mergedOptions.shadows || {}), transitions = deepMerge({
+        ...DEFAULT_TRANSITIONS
+    }, mergedOptions.transitions || {}), zIndex = deepMerge({
+        ...DEFAULT_ZINDEX
+    }, mergedOptions.zIndex || {}), borderRadius = deepMerge({
+        ...DEFAULT_BORDER_RADIUS
+    }, mergedOptions.borderRadius || {});
+    // Create palette
+        return {
+        // Metadata
+        name: mergedOptions.name || "Custom Theme",
+        class: mergedOptions.class,
+        description: mergedOptions.description,
+        author: mergedOptions.author,
+        version: mergedOptions.version || "1.0.0",
+        tags: mergedOptions.tags,
+        supportsDarkMode: mergedOptions.supportsDarkMode,
+        status: mergedOptions.status || "experimental",
+        a11y: mergedOptions.a11y,
+        color: mergedOptions.color || palette.primary.main,
+        features: mergedOptions.features,
+        dependencies: mergedOptions.dependencies,
+        // Theme configuration
+        palette: palette,
+        typography: typography,
+        spacing: spacing,
+        breakpoints: breakpoints,
+        shadows: shadows,
+        transitions: transitions,
+        zIndex: zIndex,
+        borderRadius: borderRadius,
+        custom: mergedOptions.custom || {},
+        // Mark as JS theme
+        __isJSTheme: !0
+    };
+}
+
 /**
  * useHistory Hook
  *
@@ -5159,8 +4495,7 @@ class ThemeValidator {
  *   maxHistorySize: 50
  * });
  * ```
- */
-function useHistory(options = {}) {
+ */ function useHistory(options = {}) {
     const {maxHistorySize: maxHistorySize = 50, initialState: initialState} = options, [state, setStateInternal] = useState(initialState), historyRef = useRef([ initialState ]), currentIndexRef = useRef(0), [canUndo, setCanUndo] = useState(!1), [canRedo, setCanRedo] = useState(!1), updateHistoryState = useCallback((() => {
         setCanUndo(currentIndexRef.current > 0), setCanRedo(currentIndexRef.current < historyRef.current.length - 1);
     }), []), setState = useCallback((newState => {
@@ -5602,59 +4937,20 @@ const ThemeLiveEditor = ({initialTheme: initialTheme, onChange: onChange, classN
 };
 
 /**
- * CSS Variable Mapper
+ * Theme Adapter
  *
- * Utilities for generating and managing CSS custom properties from SCSS tokens
- * and component configurations.
+ * Converts between Theme objects and DesignTokens.
  */
 /**
- * Generate CSS variable name from parts
- *
- * @example
- * generateCSSVariableName('button', 'bg', { prefix: 'atomix' })
- * // Returns: '--atomix-button-bg'
- */ function generateCSSVariableName(component, property, options = {}) {
-    const {prefix: prefix = "atomix", separator: separator = "-", includeComponent: includeComponent = !0} = options, parts = [ prefix ];
-    return includeComponent && parts.push(component), parts.push(property), `--${parts.join(separator)}`;
-}
-
-/**
- * Generate CSS variables object from configuration
+ * Convert DesignTokens to Theme-compatible CSS variables
  *
- * @example
- * const vars = generateComponentCSSVars({
- *   component: 'button',
- *   properties: { bg: '#000', color: '#fff' }
- * })
- * // Returns: { '--atomix-button-bg': '#000', '--atomix-button-color': '#fff' }
- */ function generateComponentCSSVars(config, options = {}) {
-    const vars = {}, {component: component, properties: properties, parts: parts, states: states, variants: variants} = config;
-    // Base properties
-    return Object.entries(properties).forEach((([key, value]) => {
-        const varName = generateCSSVariableName(component, key, options);
-        vars[varName] = String(value);
-    })), 
-    // Part properties
-    parts && Object.entries(parts).forEach((([partName, partProps]) => {
-        Object.entries(partProps).forEach((([key, value]) => {
-            const varName = generateCSSVariableName(component, `${partName}-${key}`, options);
-            vars[varName] = String(value);
-        }));
-    })), 
-    // State properties
-    states && Object.entries(states).forEach((([stateName, stateProps]) => {
-        Object.entries(stateProps).forEach((([key, value]) => {
-            const varName = generateCSSVariableName(component, `${stateName}-${key}`, options);
-            vars[varName] = String(value);
-        }));
-    })), 
-    // Variant properties
-    variants && Object.entries(variants).forEach((([variantName, variantProps]) => {
-        Object.entries(variantProps).forEach((([key, value]) => {
-            const varName = generateCSSVariableName(component, `${variantName}-${key}`, options);
-            vars[varName] = String(value);
-        }));
-    })), vars;
+ * @param tokens - DesignTokens object
+ * @returns CSS variables object compatible with Theme.cssVars
+ */ function designTokensToCSSVars(tokens) {
+    const cssVars = {};
+    return Object.entries(tokens).forEach((([key, value]) => {
+        void 0 !== value && (cssVars[`--atomix-${key}`] = String(value));
+    })), cssVars;
 }
 
 /**
@@ -5677,11 +4973,14 @@ const ThemeLiveEditor = ({initialTheme: initialTheme, onChange: onChange, classN
 /**
  * Apply CSS variables to an element
  *
- * @param element - Target element (defaults to document.documentElement)
  * @param vars - CSS variables to apply
- */ function applyCSSVariables(vars, element = document.documentElement) {
+ * @param element - Target element (defaults to document.documentElement)
+ */ function applyCSSVariables(vars, element) {
+    if ("undefined" == typeof window) return;
+ // SSR safety
+        const target = element || document.documentElement;
     Object.entries(vars).forEach((([key, value]) => {
-        element.style.setProperty(key, String(value));
+        target.style.setProperty(key, String(value));
     }));
 }
 
@@ -5690,9 +4989,12 @@ const ThemeLiveEditor = ({initialTheme: initialTheme, onChange: onChange, classN
  *
  * @param varNames - Variable names to remove
  * @param element - Target element (defaults to document.documentElement)
- */ function removeCSSVariables(varNames, element = document.documentElement) {
+ */ function removeCSSVariables(varNames, element) {
+    if ("undefined" == typeof window) return;
+ // SSR safety
+        const target = element || document.documentElement;
     varNames.forEach((varName => {
-        element.style.removeProperty(varName);
+        target.style.removeProperty(varName);
     }));
 }
 
@@ -5702,8 +5004,11 @@ const ThemeLiveEditor = ({initialTheme: initialTheme, onChange: onChange, classN
  * @param varName - Variable name to get
  * @param element - Target element (defaults to document.documentElement)
  * @returns Variable value or null if not found
- */ function getCSSVariable(varName, element = document.documentElement) {
-    return getComputedStyle(element).getPropertyValue(varName).trim() || null;
+ */ function getCSSVariable(varName, element) {
+    if ("undefined" == typeof window) return null;
+ // SSR safety
+        const target = element || document.documentElement;
+    return getComputedStyle(target).getPropertyValue(varName).trim() || null;
 }
 
 /**
@@ -5747,28 +5052,8 @@ const ThemeLiveEditor = ({initialTheme: initialTheme, onChange: onChange, classN
 /**
  * Theme Helper Functions
  *
- * Utility functions for working with themes and DesignTokens
+ * Utility functions for working with DesignTokens
  */
-/**
- * Get DesignTokens from current theme
- *
- * Converts a Theme object to DesignTokens. Useful when you need to
- * work with DesignTokens but have a Theme object.
- *
- * @param theme - Theme object to convert
- * @returns DesignTokens object
- *
- * @example
- * ```typescript
- * // If you have a Theme object, convert it to DesignTokens
- * const tokens = getDesignTokensFromTheme(theme);
- * // Now you can use tokens with unified theme system
- * const css = createTheme(tokens);
- * ```
- */ function getDesignTokensFromTheme(theme) {
-    return theme ? createDesignTokensFromTheme(theme) : null;
-}
-
 /**
  * Check if a value is DesignTokens
  *
@@ -5788,17 +5073,6 @@ const ThemeLiveEditor = ({initialTheme: initialTheme, onChange: onChange, classN
     // Check if keys look like DesignTokens (kebab-case, no nesting)
 }
 
-/**
- * Check if a value is a Theme object
- *
- * Type guard to check if an object is a Theme.
- *
- * @param value - Value to check
- * @returns True if value is Theme
- */ function isThemeObject(value) {
-    return !(!value || "object" != typeof value) && ("__isJSTheme" in value || "palette" in value && "typography" in value);
-}
-
 /**
  * RTL (Right-to-Left) Support Utilities
  *
@@ -5987,13 +5261,13 @@ class RTLManager {
 /**
  * Theme System Exports
  *
- * Unified theme system - handles both DesignTokens and Theme objects.
+ * Simplified theme system using DesignTokens only.
  *
  * @example
  * ```typescript
  * import { createTheme, injectTheme } from '@shohojdhara/atomix/theme';
  *
- * // Using DesignTokens (recommended - flat structure)
+ * // Using DesignTokens
  * const css = createTheme({ 'primary': '#7AFFD7', 'spacing-4': '1rem' });
  * injectTheme(css);
  *
@@ -6006,7 +5280,7 @@ class RTLManager {
 // ============================================================================
 // Core Theme Functions
 // ============================================================================
-// Unified createTheme (handles both DesignTokens and Theme objects)
+// Create theme CSS from DesignTokens
 /**
  * Inject theme CSS into DOM
  */ function injectTheme(css, id = "atomix-theme") {
@@ -6022,63 +5296,18 @@ class RTLManager {
 /**
  * Save theme to CSS file
  */ async function saveTheme(css, filePath) {
-    await saveCSSFile(css, filePath);
+    await async function(css, filePath) {
+        // Check if in browser environment
+        if ("undefined" != typeof window) throw new Error("saveCSSFile can only be used in Node.js environment. Use injectCSS() for browser environments.");
+        // Dynamic import to avoid bundling Node.js modules in browser builds
+                const fs = await import("fs/promises"), dir = (await import("path")).dirname(filePath);
+        await fs.mkdir(dir, {
+            recursive: !0
+        }), 
+        // Write file
+        await fs.writeFile(filePath, css, "utf8");
+    }(css, filePath);
 }
 
-/**
- * Atomix Config Loader
- *
- * Helper functions to load atomix.config.ts from external projects.
- * Similar to how Tailwind loads tailwind.config.js
- */
-/**
- * Load Atomix configuration from project root
- *
- * Attempts to load atomix.config.ts from the current working directory.
- * Falls back to default config if file doesn't exist.
- *
- * @param options - Loader options
- * @returns Loaded configuration or default
- *
- * @example
- * ```typescript
- * import { loadAtomixConfig } from '@shohojdhara/atomix/config';
- * import { createTheme } from '@shohojdhara/atomix/theme';
- *
- * const config = loadAtomixConfig();
- * const theme = createTheme(config.theme?.tokens || {});
- * ```
- */ const loader =  Object.freeze( Object.defineProperty({
-    __proto__: null,
-    loadAtomixConfig: function(options = {}) {
-        const {configPath: configPath = "atomix.config.ts", required: required = !1} = options, defaultConfig = {
-            prefix: "atomix",
-            theme: {
-                extend: {}
-            }
-        };
-        // Default config
-                // In browser environments, config loading is not supported
-        if ("undefined" != typeof window) {
-            if (required) throw new Error("Config loading not supported in browser environment");
-            return defaultConfig;
-        }
-        // Try to load config file
-                try {
-            // Use dynamic import for ESM compatibility
-            const configModule = require(configPath), config = configModule.default || configModule;
-            // Validate it's an AtomixConfig
-            if (config && "object" == typeof config) return config;
-            throw new Error("Invalid config format");
-        } catch (error) {
-            if (required) throw new Error(`Failed to load config from ${configPath}: ${error.message}`);
-            // Return default config if not required
-                        return defaultConfig;
-        }
-    }
-}, Symbol.toStringTag, {
-    value: "Module"
-}));
-
-export { RTLManager, ThemeApplicator, ThemeComparator, ThemeContext, ThemeErrorBoundary, ThemeInspector, ThemeLiveEditor, ThemePreview, ThemeProvider, ThemeRegistry, ThemeValidator, applyCSSVariables, applyTheme, createDesignTokensFromTheme, createTheme, createThemeObject, createTokens, cssVarsToStyle, deepMerge, defaultTokens, designTokensToCSSVars, designTokensToTheme, extendTheme, extractComponentName, generateCSSVariableName, generateCSSVariables$1 as generateCSSVariables, generateCSSVariablesForSelector, generateComponentCSSVars, getCSSVariable, getDesignTokensFromTheme, getThemeApplicator, injectCSS$1 as injectCSS, injectTheme, isCSSInjected, isDesignTokens, isThemeObject, isValidCSSVariableName, loadThemeFromConfig, loadThemeFromConfigSync, mapSCSSTokensToCSSVars, mergeCSSVars, mergeTheme, removeCSS, removeCSSVariables, removeTheme, saveCSSFile, saveCSSFileSync, saveTheme, themeToDesignTokens, useHistory, useTheme };
+export { RTLManager, ThemeApplicator, ThemeComparator, ThemeContext, ThemeErrorBoundary, ThemeInspector, ThemeLiveEditor, ThemePreview, ThemeProvider, ThemeValidator, applyCSSVariables, applyComponentTheme, applyTheme, camelToKebab, clearThemes, createTheme, createThemeRegistry, createTokens, cssVarsToStyle, deepMerge, defaultTokens, designTokensToCSSVars, extendTheme, extractComponentName, generateCSSVariableName, generateCSSVariables$1 as generateCSSVariables, generateCSSVariablesForSelector, generateClassName, generateComponentCSSVars, getAllThemes, getCSSVariable, getComponentThemeValue, getTheme, getThemeApplicator, getThemeCount, getThemeIds, hasTheme, injectCSS$1 as injectCSS, injectTheme, isCSSInjected, isDesignTokens, isValidCSSVariableName, loadThemeFromConfig, loadThemeFromConfigSync, mapSCSSTokensToCSSVars, mergeCSSVars, mergeTheme, normalizeThemeTokens, registerTheme, removeCSS, removeCSSVariables, removeTheme, saveTheme, themePropertyToCSSVar, unregisterTheme, useComponentTheme, useHistory, useTheme, useThemeTokens };
 //# sourceMappingURL=theme.js.map