@shohojdhara/atomix 0.3.7 → 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,1386 +385,1046 @@ 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);
+    // 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;
+    }
+    // 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 {
+            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"
+                };
             }
-            return new NativeConstructor(a, b, c);
+        } 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 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);
     }
-});
+    const allTokens = createTokens(tokens), prefix = options?.prefix ?? "atomix";
+    // Get prefix from options or use default
+        return generateCSSVariables$1(allTokens, {
+        ...options,
+        prefix: prefix
+    });
+}
 
-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 = {};
+/**
+ * Theme Composition Utilities
+ *
+ * Simplified utilities for composing and merging DesignTokens.
+ */
+// ============================================================================
+// Deep Merge Utility
+// ============================================================================
+/**
+ * Check if value is an object
+ */ function isObject$6(item) {
+    return item && "object" == typeof item && !Array.isArray(item) && "function" != typeof item;
+}
 
-test[wellKnownSymbol$5("toStringTag")] = "z";
+/**
+ * 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;
+}
 
-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 = /./;
-        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);
-    }
-});
-
-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;
-}));
+/**
+ * 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);
+}
 
 /**
- * Theme Utilities
+ * Extend DesignTokens with additional tokens
  *
- * Helper utilities for working with themes, including color manipulation,
- * spacing helpers, and theme value accessors.
- */
-// ============================================================================
-// Color Manipulation Utilities
-// ============================================================================
+ * @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);
+}
+
 /**
- * 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;
+ * Create a new theme registry
+ */ function createThemeRegistry() {
+    return {};
 }
 
 /**
- * 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)}`;
+ * Register a theme
+ * @param registry - Theme registry object
+ * @param id - Theme identifier
+ * @param metadata - Theme metadata
+ */ function registerTheme(registry, id, metadata) {
+    registry[id] = metadata;
 }
 
 /**
- * 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);
+ * 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;
 }
 
 /**
- * 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);
+ * Check if a theme is registered
+ * @param registry - Theme registry object
+ * @param id - Theme identifier
+ */ function hasTheme(registry, id) {
+    return id in registry;
 }
 
 /**
- * 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";
+ * Get theme metadata
+ * @param registry - Theme registry object
+ * @param id - Theme identifier
+ */ function getTheme(registry, id) {
+    return registry[id];
 }
 
 /**
- * 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));
+ * Get all registered theme metadata
+ * @param registry - Theme registry object
+ */ function getAllThemes(registry) {
+    return Object.values(registry);
 }
 
 /**
- * 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));
+ * Get all registered theme IDs
+ * @param registry - Theme registry object
+ */ function getThemeIds(registry) {
+    return Object.keys(registry);
 }
 
 /**
- * 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))})`;
+ * Clear all registered themes
+ * @param registry - Theme registry object
+ */ function clearThemes(registry) {
+    Object.keys(registry).forEach((key => delete registry[key]));
 }
 
 /**
- * Emphasize a color (lighten if dark, darken if light)
+ * Get the number of registered themes
+ * @param registry - Theme registry object
+ */ function getThemeCount(registry) {
+    return Object.keys(registry).length;
+}
+
+/**
+ * Core Theme Engine
  *
- * @param color - Hex color string
- * @param coefficient - Amount to emphasize (0-1), default 0.15
- * @returns Emphasized hex color
- */
+ * 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"
+}));
+
 /**
- * Theme Adapter
+ * CSS Injection Utilities
  *
- * Converts between Theme objects and DesignTokens.
+ * Inject CSS into HTML head via <style> element.
  */
 /**
- * Convert Theme object to DesignTokens
+ * Check if running in browser environment
+ */ function isBrowser$1() {
+    return "undefined" != typeof document;
+}
+
+/**
+ * Inject CSS into HTML head via <style> element
  *
- * Extracts values from a Theme object and converts them to flat DesignTokens format.
+ * Creates or updates a style element in the document head.
+ * If an element with the same ID exists, it will be updated.
  *
- * @param theme - Theme object to convert
- * @returns Partial DesignTokens object
+ * @param css - CSS string to inject
+ * @param id - Style element ID (default: 'atomix-theme')
  *
  * @example
  * ```typescript
- * const theme = createTheme({ palette: { primary: { main: '#7c3aed' } } });
- * const tokens = themeToDesignTokens(theme);
- * // Returns: { 'primary': '#7c3aed', ... }
+ * const css = ':root { --atomix-color-primary: #7AFFD7; }';
+ * injectCSS(css);
+ *
+ * // With custom ID
+ * injectCSS(css, 'my-custom-theme');
  * ```
- */
-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;
+ */ 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;
 }
 
 /**
- * Convert DesignTokens to Theme-compatible CSS variables
+ * Remove injected CSS from DOM
  *
- * @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;
-}
-
-/**
- * Create DesignTokens from Theme with defaults
+ * Removes the style element with the given ID from the document head.
  *
- * Converts a Theme to DesignTokens and merges with default tokens.
+ * @param id - Style element ID to remove (default: 'atomix-theme')
  *
- * @param theme - Theme object to convert
- * @returns Complete DesignTokens object
- */ function createDesignTokensFromTheme(theme) {
-    return createTokens(themeToDesignTokens(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();
 }
 
 /**
- * Create a minimal Theme object from DesignTokens
+ * Check if CSS is already injected
  *
- * @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
-    };
+ * @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);
 }
 
 /**
- * Core Theme Functions
+ * CSS File Utilities
  *
- * Simplified 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.
+ * 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) {
-    // Determine tokens based on input
-    let tokens;
-    if (input) 
-    // Use DesignTokens directly
-    tokens = 
-    // Helper functions to simplify main function
-    function(input) {
-        return !0 === input?.__isJSTheme || input?.palette && input?.typography;
-    }(input) ? themeToDesignTokens(input) : input;
-    // Merge with defaults and generate CSS
-     else {
-        // Check if we're in a browser environment
-        if ("undefined" != typeof window) throw new Error("createTheme: No input provided and config loading is not available in browser environment. Please provide tokens explicitly or use Node.js/SSR environment.");
-        // Load from config when no input provided
-        // Using dynamic import in a way that's more compatible with bundlers
-                let loadThemeFromConfigSync, loadAtomixConfig;
-        try {
-            // Use dynamic require but only in Node.js environments
-            // This approach allows bundlers to properly handle external dependencies
-            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 Error("createTheme: No input provided and config loading is not available in this environment. Please provide tokens explicitly.");
-        }
-    }
-    const allTokens = createTokens(tokens), prefix = options?.prefix ?? "atomix";
-    // Get prefix from options or use default
-        return generateCSSVariables$1(allTokens, {
-        ...options,
-        prefix: prefix
-    });
-}
+ */ var commonjsGlobal = "undefined" != typeof globalThis ? globalThis : "undefined" != typeof window ? window : "undefined" != typeof global ? global : "undefined" != typeof self ? self : {};
 
-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;
+function getDefaultExportFromCjs(x) {
+    return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x.default : x;
+}
 
-// `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
- *
- * Simplified 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);
-}
-
-/**
- * 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) {
-    return createThemeObject(mergeTheme(baseTheme.__isJSTheme ? {
-        ...baseTheme
-    } : baseTheme, extension));
-}
+/* 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 Theme Values
-// ============================================================================
-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
+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");
     }
-}, 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)"
+    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;
+
+// `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$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;
+
+// `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
+        });
     }
-}, 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"
+    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;
 };
 
-// ============================================================================
-// 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 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];
 
-/**
- * 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
+// `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);
+    }
+});
+
+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 = {};
+
+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(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 = /./;
+        try {
+            "/./"[METHOD_NAME](regexp);
+        } catch (error1) {
+            try {
+                return regexp[MATCH] = !1, "/./"[METHOD_NAME](regexp);
+            } catch (error2) {/* empty */}
         }
-    }, 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(" ");
+        return !1;
+    }("includes")
+}, {
+    includes: function(searchString /* , position = 0 */) {
+        return !!~stringIndexOf(toString(requireObjectCoercible(this)), toString(notARegExp(searchString)), arguments.length > 1 ? arguments[1] : void 0);
     }
-    /**
- * Check if a theme is a JS theme (created with createTheme)
- */ (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
-    };
-}
+});
 
-/**
- * Create a new theme registry
- */ function createThemeRegistry() {
-    return {};
-}
+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;
+}));
 
 /**
- * Register a theme
- * @param registry - Theme registry object
- * @param id - Theme identifier
- * @param metadata - Theme metadata
- */ function registerTheme(registry, id, metadata) {
-    registry[id] = metadata;
-}
-
+ * Theme System Constants
+ *
+ * Centralized constants for the theme system to avoid magic numbers and strings.
+ */
 /**
- * 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;
-}
+ * Default storage key for theme persistence
+ */ "undefined" != typeof process && process.env;
 
 /**
- * Check if a theme is registered
- * @param registry - Theme registry object
- * @param id - Theme identifier
- */ function hasTheme(registry, id) {
-    return id in registry;
-}
+ * Check if code is running in a browser environment
+ */
+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"
+}));
 
 /**
- * Get theme metadata
- * @param registry - Theme registry object
- * @param id - Theme identifier
- */ function getTheme(registry, id) {
-    return registry[id];
-}
-
+ * Check if code is running on the server (SSR)
+ */
 /**
- * Get all registered theme metadata
- * @param registry - Theme registry object
- */ function getAllThemes(registry) {
-    return Object.values(registry);
-}
-
+ * Theme Utilities
+ *
+ * Helper utilities for working with themes, including color manipulation,
+ * spacing helpers, and theme value accessors.
+ */
+// ============================================================================
+// Color Manipulation Utilities
+// ============================================================================
 /**
- * Get all registered theme IDs
- * @param registry - Theme registry object
- */ function getThemeIds(registry) {
-    return Object.keys(registry);
+ * 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;
 }
 
 /**
- * Clear all registered themes
- * @param registry - Theme registry object
- */ function clearThemes(registry) {
-    Object.keys(registry).forEach((key => delete registry[key]));
+ * 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)}`;
 }
 
 /**
- * Get the number of registered themes
- * @param registry - Theme registry object
- */ function getThemeCount(registry) {
-    return Object.keys(registry).length;
+ * 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);
 }
 
 /**
- * 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 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);
 }
 
 /**
- * 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;
+ * 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";
 }
 
 /**
- * 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')
+ * Lighten a color by a given amount
  *
- * @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();
+ * @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));
 }
 
 /**
- * Check if CSS is already injected
+ * Darken 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 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));
 }
 
 /**
- * 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
+ * Add alpha (opacity) to a color
  *
- * @example
- * ```typescript
- * const css = ':root { --atomix-color-primary: #7AFFD7; }';
- * await saveCSSFile(css, './themes/custom.css');
- * ```
- */ "undefined" != typeof process && process.env;
-
-/**
- * Check if code is running in a browser environment
- */
-const isBrowser = () => "undefined" != typeof window && "undefined" != typeof document, isServer = () => !isBrowser(), 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
-}, isValidThemeName = themeName => !(!themeName || "string" != typeof themeName) && /^[a-z0-9]+(-[a-z0-9]+)*$/.test(themeName);
+ * @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 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
@@ -1818,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)
@@ -2163,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
@@ -2234,6 +1958,7 @@ function generateClassName(block, element, modifiers) {
  * Component Theming Utilities
  *
  * Provides consistent patterns for applying theme values to components
+ * using DesignTokens and CSS variables
  */
 /**
  * Get a theme value for a specific component using CSS variables
@@ -2247,33 +1972,28 @@ function generateClassName(block, element, modifiers) {
 }
 
 /**
- * Generate component-specific CSS variables from theme
- */ function generateComponentCSSVars(component, theme, variant, size) {
-    const vars = {}, prefixParts = [ "atomix", component ];
-    // This is a simplified implementation - in a real system you'd have more
-    // sophisticated logic to extract component-specific values from the theme
-        variant && prefixParts.push(variant), size && prefixParts.push(size);
+ * 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("-");
-    // Add common component properties
-        if (theme.palette && (vars[`--${prefix}-color`] = theme.palette.primary?.main || "#7c3aed", 
-    vars[`--${prefix}-color-hover`] = theme.palette.primary?.dark || "#5b21b6", vars[`--${prefix}-color-active`] = theme.palette.primary?.main || "#7c3aed", 
-    vars[`--${prefix}-color-disabled`] = theme.palette.text?.disabled || "#9ca3af"), 
-    theme.typography && (vars[`--${prefix}-font-family`] = theme.typography.fontFamily || "Inter, sans-serif", 
-    vars[`--${prefix}-font-size`] = theme.typography.fontSize ? `${theme.typography.fontSize}px` : "16px"), 
-    theme.spacing) {
-        const spacing = "function" == typeof theme.spacing ? theme.spacing : val => 8 * val;
-        vars[`--${prefix}-spacing-unit`] = `${spacing(1)}px`, vars[`--${prefix}-spacing-sm`] = `${spacing(.5)}px`, 
-        vars[`--${prefix}-spacing-md`] = `${spacing(1)}px`, vars[`--${prefix}-spacing-lg`] = `${spacing(2)}px`;
-    }
-    return vars;
+    // 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;
 }
 
 /**
- * Apply consistent theme to component style object
- */ function applyComponentTheme(component, style = {}, variant, size, theme) {
-    // If no theme provided, return original style
-    return theme ? {
-        ...generateComponentCSSVars(component, theme, variant, size),
+ * 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
@@ -2281,7 +2001,7 @@ function generateClassName(block, element, modifiers) {
 
 /**
  * Create a hook for consistent component theming
- */ function useComponentTheme(component, variant, size, theme) {
+ */ function useComponentTheme(component, variant, size, tokens) {
     return property => getComponentThemeValue(component, property, variant, size);
 }
 
@@ -2299,23 +2019,29 @@ function generateClassName(block, element, modifiers) {
  */ 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 dynamic import to load the config loader
-    // This allows bundlers to handle external dependencies properly
-        let loadAtomixConfig;
+    // Use static import - the function handles browser environment checks internally
+        let config;
     try {
-        // eslint-disable-next-line @typescript-eslint/no-var-requires
-        const {loadAtomixConfig: loader} = require("../../config/loader");
-        loadAtomixConfig = loader;
+        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({});
     }
-    const config = loadAtomixConfig({
-        configPath: options?.configPath || "atomix.config.ts",
-        required: !1 !== options?.required
-    });
-    return config?.theme ? isThemeObject$1(config.theme) ? createDesignTokensFromTheme(config.theme) : createTokens(config.theme) : 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
 }
 
 /**
@@ -2325,20 +2051,31 @@ function generateClassName(block, element, modifiers) {
  */ 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.");
-    // Dynamic import for config loader
-        const {loadAtomixConfig: loadAtomixConfig} = await import("../lib/config/loader"), config = await loadAtomixConfig({
-        configPath: options?.configPath || "atomix.config.ts",
-        required: !1 !== options?.required
-    });
-    return config?.theme ? isThemeObject$1(config.theme) ? createDesignTokensFromTheme(config.theme) : createTokens(config.theme) : createTokens({});
-}
-
-/**
- * Check if the provided object is a Theme object
- * @param theme - Object to check
- * @returns True if the object is a Theme object, false otherwise
- */ function isThemeObject$1(theme) {
-    return "object" == typeof theme && null !== theme;
+    // 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
 }
 
 /**
@@ -2358,7 +2095,7 @@ ThemeContext.displayName = "ThemeContext";
  * React context provider for theme management with separated concerns.
  * Simplified version focusing on core functionality:
  * - String-based themes (CSS files)
- * - JS Theme objects
+ * - DesignTokens (dynamic themes)
  * - Persistence via localStorage
  *
  * Falls back to 'default' theme if no configuration is found.
@@ -2375,39 +2112,7 @@ const ThemeProvider = ({children: children, defaultTheme: defaultTheme, themes:
         onThemeChangeRef.current?.(theme);
     }), []), handleError = useCallback(((error, themeName) => {
         onErrorRef.current?.(error, themeName);
-    }), []), 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;
-            }
-        }
-    })), []), initialDefaultTheme = useMemo((() => {
+    }), []), storageAdapter = useMemo((() => createLocalStorageAdapter()), []), initialDefaultTheme = useMemo((() => {
         // Check storage first
         if (enablePersistence && storageAdapter.isAvailable()) {
             const stored = storageAdapter.getItem(storageKey);
@@ -2424,72 +2129,126 @@ const ThemeProvider = ({children: children, defaultTheme: defaultTheme, themes:
             // For simplicity, we'll treat config tokens as a special theme name
             return "config-theme";
         } catch (error) {
-            console.warn("Failed to load theme from config, using default");
+            // Failed to load theme from config, using default
         }
         // Default fallback
                 return "default";
-    }), [ defaultTheme, enablePersistence, storageKey ]), [currentTheme, setCurrentTheme] = useState((() => initialDefaultTheme)), [activeTheme, setActiveTheme] = useState(null), [isLoading, setIsLoading] = useState(!1), [error, setError] = useState(null), loadedThemesRef = useRef(new Set), themePromisesRef = useRef({});
+    }), [ 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() || ((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));
-        })(String(currentTheme), dataAttribute);
+        isServer() || applyThemeAttributes(String(currentTheme), dataAttribute);
     }), [ currentTheme, dataAttribute ]), 
     // Handle theme persistence
     useEffect((() => {
         enablePersistence && storageAdapter.isAvailable() && storageAdapter.setItem(storageKey, String(currentTheme));
-    }), [ currentTheme, storageKey, enablePersistence ]);
+    }), [ 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) => {
-        setIsLoading(!0), setError(null);
+        // 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 {
-            let themeName, themeObj = null;
+            let themeName;
+            if ("string" != typeof theme) {
+                // 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 ("string" == typeof theme ? themeName = theme : 
-            // If it's a Theme object or DesignTokens, we need to process it
-            function(theme) {
-                return "object" == typeof theme && null !== theme && "__isJSTheme" in theme && !0 === theme.__isJSTheme;
-            }(theme) ? (themeObj = theme, 
-            // For JS themes, we use a generic name
-            themeName = "js-theme", setActiveTheme(themeObj)) : 
-            // For DesignTokens, we might create a theme from tokens
-            themeName = "tokens-theme", "string" == typeof theme && themes[theme]) {
+                        if (themeName = theme, "string" == typeof theme && themes[theme]) {
                 // Check if theme is already loading
-                if (themePromisesRef.current[theme]) return await themePromisesRef.current[theme], 
-                setCurrentTheme(theme), setActiveTheme(null), void handleThemeChange(theme);
+                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
+                }
                 // 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)}`), 
-                            // Inject new theme CSS
-                            await injectCSS$1(cssPath, `theme-${theme}`), loadedThemesRef.current.add(theme), 
-                            setCurrentTheme(theme), setActiveTheme(null), handleThemeChange(theme), resolve();
+                                                        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, await themeLoadPromise;
-            } else themeObj ? (
-            // For JS themes, set them directly
-            setCurrentTheme(themeName), setActiveTheme(themeObj), handleThemeChange(themeObj)) : (
-            // For string theme that isn't in our themes record, just set the name
-            setCurrentTheme(themeName), setActiveTheme(null), handleThemeChange(themeName));
+                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);
+            }
         } catch (err) {
+            // Don't set error if aborted
+            if (abortController.signal.aborted) return;
             const error = err instanceof Error ? err : new Error(String(err));
             setError(error), handleError(error, String(theme));
         } finally {
-            setIsLoading(!1);
+            // Only update loading state if not aborted
+            abortController.signal.aborted || setIsLoading(!1);
         }
     }), [ themes, currentTheme, handleThemeChange, handleError, basePath, useMinified, cdnPath ]), isThemeLoaded = useCallback((themeName => loadedThemesRef.current.has(themeName)), []), preloadTheme = useCallback((async themeName => {
         if (themes[themeName] && !isThemeLoaded(themeName)) {
@@ -2506,19 +2265,22 @@ const ThemeProvider = ({children: children, defaultTheme: defaultTheme, themes:
                 setIsLoading(!1);
             }
         }
-    }), [ themes, isThemeLoaded, handleError, basePath, useMinified, cdnPath ]), themeManager = useMemo((() => ({})), []), contextValue = useMemo((() => ({
-        theme: "string" == typeof currentTheme ? currentTheme : "js-theme",
-        activeTheme: activeTheme,
+    }), [ themes, isThemeLoaded, handleError, basePath, useMinified, cdnPath ]), themeManager = useMemo((() => ({})), []), availableThemes = useMemo((() => Object.entries(themes).map((([name, metadata]) => ({
+        ...metadata,
+        name: name
+    })))), [ themes ]), contextValue = useMemo((() => ({
+        theme: currentTheme,
+        activeTokens: activeTokens,
         setTheme: setTheme,
-        availableThemes: Object.entries(themes).map((([name, metadata]) => ({
-            ...metadata
-        }))),
+        availableThemes: availableThemes,
         isLoading: isLoading,
         error: error,
         isThemeLoaded: isThemeLoaded,
         preloadTheme: preloadTheme,
         themeManager: themeManager
-    })), [ currentTheme, activeTheme, setTheme, themes, isLoading, error, isThemeLoaded, preloadTheme, themeManager ]);
+    })), [ currentTheme, activeTokens, setTheme, availableThemes, 
+    // Use memoized value
+    isLoading, error, isThemeLoaded, preloadTheme, themeManager ]);
     // Check if theme is loaded
         return jsx(ThemeContext.Provider, {
         value: contextValue,
@@ -2556,227 +2318,97 @@ const ThemeProvider = ({children: children, defaultTheme: defaultTheme, themes:
     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,
-        error: context.error,
-        isThemeLoaded: context.isThemeLoaded,
-        preloadTheme: context.preloadTheme
-    };
-}
-
-function useThemeTokens() {
-    const {theme: theme, activeTheme: activeTheme} = useTheme(), getToken = useCallback(((tokenName, fallback) => {
-        if ("undefined" == typeof window) return fallback || "";
-        const cssVarName = `--atomix-${tokenName}`;
-        return getComputedStyle(document.documentElement).getPropertyValue(cssVarName).trim() || fallback || "";
-    }), []), getThemeValue = useCallback(((path, fallback) => {
-        var _context;
-        return activeTheme && _reduceInstanceProperty(_context = path.split(".")).call(_context, ((obj, key) => obj?.[key]), activeTheme) || fallback;
-        // Navigate through nested theme object using dot notation
-        }), [ activeTheme ]);
-    // Helper function to get CSS variable value
-        // Return unified API for accessing theme values
-    return {
-        theme: theme,
-        activeTheme: activeTheme,
-        getToken: getToken,
-        getThemeValue: getThemeValue,
-        // 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")
-        }
-    };
-}
-
-/**
- * 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(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 = {}));
-
-/**
- * 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
-        };
-    }
-}
-
-/**
- * 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 = {}));
-
-/**
- * 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
-        };
-    }
-    /**
-   * 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));
-    }
+        error: context.error,
+        isThemeLoaded: context.isThemeLoaded,
+        preloadTheme: context.preloadTheme
+    };
 }
 
-/**
- * Default logger instance
- */ let defaultLogger = null;
-
-/**
- * Get or create default logger
- */ function getLogger() {
-    return defaultLogger || (defaultLogger = new ThemeLogger), defaultLogger;
+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")
+        }
+    };
 }
 
 /**
@@ -2940,29 +2572,13 @@ class ThemeLogger {
         this.styleId = "atomix-theme-applicator", this.root = root;
     }
     /**
-   * Apply a complete theme configuration
+   * Apply a complete theme configuration using DesignTokens
    *
-   * Uses the unified theme system to convert Theme to DesignTokens and inject CSS.
+   * Uses the unified theme system to generate and inject CSS.
    * Automatically respects atomix.config.ts when using DesignTokens.
-   */    applyTheme(theme) {
+   */    applyTheme(tokens) {
         // 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",
@@ -2970,51 +2586,13 @@ class ThemeLogger {
         }), 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)
+   * Apply global CSS variables
    */    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);
@@ -3043,8 +2621,8 @@ class ThemeLogger {
 
 /**
  * Apply theme using global applicator
- */ function applyTheme(theme) {
-    getThemeApplicator().applyTheme(theme);
+ */ function applyTheme(tokens) {
+    getThemeApplicator().applyTheme(tokens);
 }
 
 const VIEWPORT_PRESETS = {
@@ -4532,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
  *
@@ -4553,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 => {
@@ -4995,6 +4936,23 @@ const ThemeLiveEditor = ({initialTheme: initialTheme, onChange: onChange, classN
     });
 };
 
+/**
+ * Theme Adapter
+ *
+ * Converts between Theme objects and DesignTokens.
+ */
+/**
+ * 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;
+}
+
 /**
  * Map SCSS tokens to CSS custom properties
  *
@@ -5015,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));
     }));
 }
 
@@ -5028,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);
     }));
 }
 
@@ -5040,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;
 }
 
 /**
@@ -5085,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
  *
@@ -5126,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
  *
@@ -5325,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);
  *
@@ -5344,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") {
@@ -5370,16 +5306,8 @@ class RTLManager {
         }), 
         // Write file
         await fs.writeFile(filePath, css, "utf8");
-    }
-    /**
- * Theme System Constants
- *
- * Centralized constants for the theme system to avoid magic numbers and strings.
- */
-    /**
- * Default storage key for theme persistence
- */ (css, filePath);
+    }(css, filePath);
 }
 
-export { RTLManager, ThemeApplicator, ThemeComparator, ThemeContext, ThemeErrorBoundary, ThemeInspector, ThemeLiveEditor, ThemePreview, ThemeProvider, ThemeValidator, applyCSSVariables, applyComponentTheme, applyTheme, camelToKebab, clearThemes, createDesignTokensFromTheme, createTheme, createThemeObject, createThemeRegistry, createTokens, cssVarsToStyle, deepMerge, defaultTokens, designTokensToCSSVars, designTokensToTheme, extendTheme, extractComponentName, generateCSSVariableName, generateCSSVariables$1 as generateCSSVariables, generateCSSVariablesForSelector, generateClassName, generateComponentCSSVars, getAllThemes, getCSSVariable, getComponentThemeValue, getDesignTokensFromTheme, getTheme, getThemeApplicator, getThemeCount, getThemeIds, hasTheme, injectCSS$1 as injectCSS, injectTheme, isCSSInjected, isDesignTokens, isThemeObject, isValidCSSVariableName, loadThemeFromConfig, loadThemeFromConfigSync, mapSCSSTokensToCSSVars, mergeCSSVars, mergeTheme, normalizeThemeTokens, registerTheme, removeCSS, removeCSSVariables, removeTheme, saveTheme, themePropertyToCSSVar, themeToDesignTokens, unregisterTheme, useComponentTheme, useHistory, useTheme, useThemeTokens };
+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