@shohojdhara/atomix 0.4.0 → 0.4.2

package/dist/index.esm.js

@@ -8,9 +8,379 @@ import { Pause, Play, SkipBack, SkipForward, SpeakerX, SpeakerHigh, Gear, Downlo
 
 import { createPortal } from "react-dom";
 
-/**
- * Default theme colors for components
- */ const THEME_COLORS = [ "primary", "secondary", "success", "info", "warning", "error", "light", "dark" ], SIZES = [ "sm", "md", "lg" ], CLASS_PREFIX = {
+var commonjsGlobal = "undefined" != typeof globalThis ? globalThis : "undefined" != typeof window ? window : "undefined" != typeof global ? global : "undefined" != typeof self ? self : {};
+
+function getDefaultExportFromCjs(x) {
+    return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x.default : x;
+}
+
+var 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);
+
+// `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;
+
+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]);
+
+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;
+    }
+    return value;
+}("__core-js_shared__", {});
+
+/* 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"
+});
+
+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;
+
+// `Object.defineProperty` method
+// https://tc39.es/ecma262/#sec-object.defineproperty
+objectDefineProperty.f = DESCRIPTORS$1 ? V8_PROTOTYPE_DEFINE_BUG ? function(O, P, Attributes) {
+    if (anObject(O), P = toPropertyKey(P), anObject(Attributes), "function" == typeof O && "prototype" === P && "value" in Attributes && "writable" in Attributes && !Attributes.writable) {
+        var current = $getOwnPropertyDescriptor(O, P);
+        current && current.writable && (O[P] = Attributes.value, Attributes = {
+            configurable: "configurable" in Attributes ? Attributes.configurable : current.configurable,
+            enumerable: "enumerable" in Attributes ? Attributes.enumerable : current.enumerable,
+            writable: !1
+        });
+    }
+    return $defineProperty(O, P, Attributes);
+} : $defineProperty : function(O, P, Attributes) {
+    if (anObject(O), P = toPropertyKey(P), anObject(Attributes), IE8_DOM_DEFINE) try {
+        return $defineProperty(O, P, Attributes);
+    } catch (error) {/* empty */}
+    if ("get" in Attributes || "set" in Attributes) throw new $TypeError$2("Accessors not supported");
+    return "value" in Attributes && (O[P] = Attributes.value), O;
+};
+
+var definePropertyModule = objectDefineProperty, createPropertyDescriptor = createPropertyDescriptor$2, createNonEnumerableProperty$1 = descriptors ? function(object, key, value) {
+    return definePropertyModule.f(object, key, createPropertyDescriptor(1, value));
+} : function(object, key, value) {
+    return object[key] = value, object;
+}, globalThis$3 = globalThis_1, apply = functionApply, uncurryThis$1 = functionUncurryThisClause, isCallable$1 = isCallable$8, getOwnPropertyDescriptor = objectGetOwnPropertyDescriptor.f, isForced = isForced_1, path$1 = path$3, bind = function(fn, that) {
+    return aCallable$1(fn), void 0 === that ? fn : NATIVE_BIND ? bind$1(fn, that) : function() {
+        return fn.apply(that, arguments);
+    };
+}, createNonEnumerableProperty = createNonEnumerableProperty$1, hasOwn = hasOwnProperty_1, wrapConstructor = function(NativeConstructor) {
+    var Wrapper = function(a, b, c) {
+        if (this instanceof Wrapper) {
+            switch (arguments.length) {
+              case 0:
+                return new NativeConstructor;
+
+              case 1:
+                return new NativeConstructor(a);
+
+              case 2:
+                return new NativeConstructor(a, b);
+            }
+            return new NativeConstructor(a, b, c);
+        }
+        return apply(NativeConstructor, this, arguments);
+    };
+    return Wrapper.prototype = NativeConstructor.prototype, Wrapper;
+}, _export = function(options, source) {
+    var FORCED, USE_NATIVE, VIRTUAL_PROTOTYPE, key, sourceProperty, targetProperty, nativeProperty, resultProperty, descriptor, TARGET = options.target, GLOBAL = options.global, STATIC = options.stat, PROTO = options.proto, nativeSource = GLOBAL ? globalThis$3 : STATIC ? globalThis$3[TARGET] : globalThis$3[TARGET] && globalThis$3[TARGET].prototype, target = GLOBAL ? path$1 : path$1[TARGET] || createNonEnumerableProperty(path$1, TARGET, {})[TARGET], targetPrototype = target.prototype;
+    for (key in source) 
+    // contains in native
+    USE_NATIVE = !(FORCED = isForced(GLOBAL ? key : TARGET + (STATIC ? "." : "#") + key, options.forced)) && nativeSource && hasOwn(nativeSource, key), 
+    targetProperty = target[key], USE_NATIVE && (nativeProperty = options.dontCallGetSet ? (descriptor = getOwnPropertyDescriptor(nativeSource, key)) && descriptor.value : nativeSource[key]), 
+    // export native or implementation
+    sourceProperty = USE_NATIVE && nativeProperty ? nativeProperty : source[key], (FORCED || PROTO || typeof targetProperty != typeof sourceProperty) && (
+    // bind methods to global for calling from export context
+    resultProperty = options.bind && USE_NATIVE ? bind(sourceProperty, globalThis$3) : options.wrap && USE_NATIVE ? wrapConstructor(sourceProperty) : PROTO && isCallable$1(sourceProperty) ? uncurryThis$1(sourceProperty) : sourceProperty, 
+    // add a flag to not completely full polyfills
+    (options.sham || sourceProperty && sourceProperty.sham || targetProperty && targetProperty.sham) && createNonEnumerableProperty(resultProperty, "sham", !0), 
+    createNonEnumerableProperty(target, key, resultProperty), PROTO && (hasOwn(path$1, VIRTUAL_PROTOTYPE = TARGET + "Prototype") || createNonEnumerableProperty(path$1, VIRTUAL_PROTOTYPE, {}), 
+    // export virtual prototype methods
+    createNonEnumerableProperty(path$1[VIRTUAL_PROTOTYPE], key, sourceProperty), 
+    // export real prototype methods
+    options.real && targetPrototype && (FORCED || !targetPrototype[key]) && createNonEnumerableProperty(targetPrototype, key, sourceProperty)));
+}, ceil = Math.ceil, floor = Math.floor, trunc = Math.trunc || function(x) {
+    var n = +x;
+    return (n > 0 ? floor : ceil)(n);
+}, toIntegerOrInfinity$2 = function(argument) {
+    var number = +argument;
+    // eslint-disable-next-line no-self-compare -- NaN check
+        return number != number || 0 === number ? 0 : trunc(number);
+}, toIntegerOrInfinity$1 = toIntegerOrInfinity$2, max = Math.max, min$1 = Math.min, toIntegerOrInfinity = toIntegerOrInfinity$2, min = Math.min, lengthOfArrayLike$2 = function(obj) {
+    return argument = obj.length, (len = toIntegerOrInfinity(argument)) > 0 ? min(len, 9007199254740991) : 0;
+    var argument, len;
+}, toIndexedObject = toIndexedObject$2, lengthOfArrayLike$1 = lengthOfArrayLike$2, createMethod$1 = function(IS_INCLUDES) {
+    return function($this, el, fromIndex) {
+        var O = toIndexedObject($this), length = lengthOfArrayLike$1(O);
+        if (0 === length) return !IS_INCLUDES && -1;
+        var value, index = function(index, length) {
+            var integer = toIntegerOrInfinity$1(index);
+            return integer < 0 ? max(integer + length, 0) : min$1(integer, length);
+        }(fromIndex, length);
+        // Array#includes uses SameValueZero equality algorithm
+        // eslint-disable-next-line no-self-compare -- NaN check
+        if (IS_INCLUDES && el != el) {
+            for (;length > index; ) 
+            // eslint-disable-next-line no-self-compare -- NaN check
+            if ((value = O[index++]) != value) return !0;
+            // Array#indexOf ignores holes, Array#includes - not
+                } else for (;length > index; index++) if ((IS_INCLUDES || index in O) && O[index] === el) return IS_INCLUDES || index || 0;
+        return !IS_INCLUDES && -1;
+    };
+}, $includes = [ createMethod$1(!0), createMethod$1(!1) ][0];
+
+// `Array.prototype.includes` method
+// https://tc39.es/ecma262/#sec-array.prototype.includes
+_export({
+    target: "Array",
+    proto: !0,
+    forced: fails$9((function() {
+        // eslint-disable-next-line es/no-array-prototype-includes -- detection
+        return !Array(1).includes();
+    }))
+}, {
+    includes: function(el /* , fromIndex = 0 */) {
+        return $includes(this, el, arguments.length > 1 ? arguments[1] : void 0);
+    }
+});
+
+var globalThis$2 = globalThis_1, path = path$3, getBuiltInPrototypeMethod$3 = function(CONSTRUCTOR, METHOD) {
+    var Namespace = path[CONSTRUCTOR + "Prototype"], pureMethod = Namespace && Namespace[METHOD];
+    if (pureMethod) return pureMethod;
+    var NativeConstructor = globalThis$2[CONSTRUCTOR], NativePrototype = NativeConstructor && NativeConstructor.prototype;
+    return NativePrototype && NativePrototype[METHOD];
+}, includes$4 = getBuiltInPrototypeMethod$3("Array", "includes"), isObject$1 = isObject$6, classof$3 = classofRaw$2, MATCH$1 = wellKnownSymbol$5("match"), $TypeError$1 = TypeError, test = {};
+
+test[wellKnownSymbol$5("toStringTag")] = "z";
+
+var TO_STRING_TAG_SUPPORT = "[object z]" === String(test), isCallable = isCallable$8, classofRaw = classofRaw$2, TO_STRING_TAG = wellKnownSymbol$5("toStringTag"), $Object = Object, CORRECT_ARGUMENTS = "Arguments" === classofRaw(function() {
+    return arguments;
+}()), classof$1 = TO_STRING_TAG_SUPPORT ? classofRaw : function(it) {
+    var O, tag, result;
+    return void 0 === it ? "Undefined" : null === it ? "Null" : "string" == typeof (tag = function(it, key) {
+        try {
+            return it[key];
+        } catch (error) {/* empty */}
+    }(O = $Object(it), TO_STRING_TAG)) ? tag : CORRECT_ARGUMENTS ? classofRaw(O) : "Object" === (result = classofRaw(O)) && isCallable(O.callee) ? "Arguments" : result;
+}, $String = String, MATCH = wellKnownSymbol$5("match"), $$1 = _export, notARegExp = function(it) {
+    if (function(it) {
+        var isRegExp;
+        return isObject$1(it) && (void 0 !== (isRegExp = it[MATCH$1]) ? !!isRegExp : "RegExp" === classof$3(it));
+    }(it)) throw new $TypeError$1("The method doesn't accept regular expressions");
+    return it;
+}, requireObjectCoercible = requireObjectCoercible$3, toString = function(argument) {
+    if ("Symbol" === classof$1(argument)) throw new TypeError("Cannot convert a Symbol value to a string");
+    return $String(argument);
+}, stringIndexOf = functionUncurryThis("".indexOf);
+
+// `String.prototype.includes` method
+// https://tc39.es/ecma262/#sec-string.prototype.includes
+$$1({
+    target: "String",
+    proto: !0,
+    forced: !function(METHOD_NAME) {
+        var regexp = /./;
+        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;
+})), THEME_COLORS = [ "primary", "secondary", "success", "info", "warning", "error", "light", "dark" ], SIZES = [ "sm", "md", "lg" ], CLASS_PREFIX = {
     COMPONENT: "c-",
     UTILITY: "u-",
     LAYOUT: "l-",
@@ -1523,7 +1893,7 @@ import { createPortal } from "react-dom";
 };
 
 /**
- * Default sizes for components
+ * Default theme colors for components
  */
 /**
  * Accordion functionality hook
@@ -1579,7 +1949,7 @@ function useAccordion(initialProps) {
     };
 }
 
-const {CONSTANTS: CONSTANTS$1} = ATOMIX_GLASS, calculateDistance = (pos1, pos2) => {
+const {CONSTANTS: CONSTANTS$2} = ATOMIX_GLASS, calculateDistance = (pos1, pos2) => {
     if (!pos1 || !pos2 || "number" != typeof pos1.x || "number" != typeof pos1.y || "number" != typeof pos2.x || "number" != typeof pos2.y) return 0;
     const deltaX = pos1.x - pos2.x, deltaY = pos1.y - pos2.y;
     return Math.sqrt(deltaX * deltaX + deltaY * deltaY);
@@ -1592,36 +1962,36 @@ const {CONSTANTS: CONSTANTS$1} = ATOMIX_GLASS, calculateDistance = (pos1, pos2)
 }, calculateMouseInfluence = mouseOffset => {
     if (!mouseOffset || "number" != typeof mouseOffset.x || "number" != typeof mouseOffset.y) return 0;
     // Bounded calculation — keeps the glass effect subtle and stable
-        const influence = Math.sqrt(mouseOffset.x * mouseOffset.x + mouseOffset.y * mouseOffset.y) / CONSTANTS$1.MOUSE_INFLUENCE_DIVISOR;
+        const influence = Math.sqrt(mouseOffset.x * mouseOffset.x + mouseOffset.y * mouseOffset.y) / CONSTANTS$2.MOUSE_INFLUENCE_DIVISOR;
     return Math.min(.8, influence);
  // Tighter cap to prevent blur/filter blow-out
-}, clampBlur = value => "number" != typeof value || isNaN(value) ? CONSTANTS$1.MIN_BLUR : Math.max(CONSTANTS$1.MIN_BLUR, Math.min(50, value)), validateGlassSize = size => size && "number" == typeof size.width && "number" == typeof size.height && size.width > 0 && size.height > 0 && size.width <= CONSTANTS$1.MAX_SIZE && size.height <= CONSTANTS$1.MAX_SIZE, parseBorderRadiusValue = value => {
+}, clampBlur = value => "number" != typeof value || isNaN(value) ? CONSTANTS$2.MIN_BLUR : Math.max(CONSTANTS$2.MIN_BLUR, Math.min(50, value)), validateGlassSize = size => size && "number" == typeof size.width && "number" == typeof size.height && size.width > 0 && size.height > 0 && size.width <= CONSTANTS$2.MAX_SIZE && size.height <= CONSTANTS$2.MAX_SIZE, parseBorderRadiusValue = value => {
     if ("number" == typeof value) return Math.max(0, value);
-    if ("string" != typeof value || !value.trim()) return CONSTANTS$1.DEFAULT_CORNER_RADIUS;
+    if ("string" != typeof value || !value.trim()) return CONSTANTS$2.DEFAULT_CORNER_RADIUS;
     const trimmedValue = value.trim();
     // Handle px values
         if (trimmedValue.endsWith("px")) {
         const parsed = parseFloat(trimmedValue);
-        return isNaN(parsed) ? CONSTANTS$1.DEFAULT_CORNER_RADIUS : Math.max(0, parsed);
+        return isNaN(parsed) ? CONSTANTS$2.DEFAULT_CORNER_RADIUS : Math.max(0, parsed);
     }
     // Handle rem values (assume 16px = 1rem)
         if (trimmedValue.endsWith("rem")) {
         const parsed = parseFloat(trimmedValue);
-        return isNaN(parsed) ? CONSTANTS$1.DEFAULT_CORNER_RADIUS : Math.max(0, 16 * parsed);
+        return isNaN(parsed) ? CONSTANTS$2.DEFAULT_CORNER_RADIUS : Math.max(0, 16 * parsed);
     }
     // Handle em values (assume 16px = 1em for simplicity)
         if (trimmedValue.endsWith("em")) {
         const parsed = parseFloat(trimmedValue);
-        return isNaN(parsed) ? CONSTANTS$1.DEFAULT_CORNER_RADIUS : Math.max(0, 16 * parsed);
+        return isNaN(parsed) ? CONSTANTS$2.DEFAULT_CORNER_RADIUS : Math.max(0, 16 * parsed);
     }
     // Handle percentage (convert to approximate px value, assuming 200px container)
         if (trimmedValue.endsWith("%")) {
         const parsed = parseFloat(trimmedValue);
-        return isNaN(parsed) ? CONSTANTS$1.DEFAULT_CORNER_RADIUS : Math.max(0, parsed / 100 * 200);
+        return isNaN(parsed) ? CONSTANTS$2.DEFAULT_CORNER_RADIUS : Math.max(0, parsed / 100 * 200);
     }
     // Handle unitless numbers
         const numValue = parseFloat(trimmedValue);
-    return isNaN(numValue) ? CONSTANTS$1.DEFAULT_CORNER_RADIUS : Math.max(0, numValue);
+    return isNaN(numValue) ? CONSTANTS$2.DEFAULT_CORNER_RADIUS : Math.max(0, numValue);
 }, extractBorderRadiusFromElement = element => {
     if (!element || !element.props) return null;
     // Check inline styles first (highest priority)
@@ -1637,11 +2007,11 @@ const {CONSTANTS: CONSTANTS$1} = ATOMIX_GLASS, calculateDistance = (pos1, pos2)
     // If element has children, recursively check them
         if (element.props.children) {
         const childRadius = extractBorderRadiusFromChildren(element.props.children);
-        if (childRadius > 0 && childRadius !== CONSTANTS$1.DEFAULT_CORNER_RADIUS) return childRadius;
+        if (childRadius > 0 && childRadius !== CONSTANTS$2.DEFAULT_CORNER_RADIUS) return childRadius;
     }
     return null;
 }, extractBorderRadiusFromChildren = children => {
-    if (!children) return CONSTANTS$1.DEFAULT_CORNER_RADIUS;
+    if (!children) return CONSTANTS$2.DEFAULT_CORNER_RADIUS;
     try {
         const childArray = React.Children.toArray(children);
         for (let i = 0; i < childArray.length; i++) {
@@ -1654,7 +2024,7 @@ const {CONSTANTS: CONSTANTS$1} = ATOMIX_GLASS, calculateDistance = (pos1, pos2)
     } catch (error) {
         // Silently handle errors
     }
-    return CONSTANTS$1.DEFAULT_CORNER_RADIUS;
+    return CONSTANTS$2.DEFAULT_CORNER_RADIUS;
 }, getDisplacementMap = (mode, displacementMap, polarDisplacementMap, prominentDisplacementMap, shaderMapUrl) => {
     switch (mode) {
       case "standard":
@@ -1825,10 +2195,10 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
 }, globalMousePosition: globalMousePosition = {
     x: 0,
     y: 0
-}, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseDown: onMouseDown, onMouseUp: onMouseUp, isHovered: isHovered = !1, isActive: isActive = !1, overLight: overLight = !1, overLightConfig: overLightConfig = {}, cornerRadius: cornerRadius = 0, padding: padding = "0 0", glassSize: glassSize = {
+}, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseDown: onMouseDown, onMouseUp: onMouseUp, isHovered: isHovered = !1, isActive: isActive = !1, overLight: overLight = !1, overLightConfig: overLightConfig = {}, borderRadius: borderRadius = 0, padding: padding = "0 0", glassSize: glassSize = {
     width: 0,
     height: 0
-}, onClick: onClick, mode: mode = "standard", effectiveDisableEffects: effectiveDisableEffects = !1, effectiveReducedMotion: effectiveReducedMotion = !1, shaderVariant: shaderVariant = "liquidGlass", enableLiquidBlur: enableLiquidBlur = !1, elasticity: elasticity = 0, contentRef: contentRef}, ref) => {
+}, onClick: onClick, mode: mode = "standard", effectiveWithoutEffects: effectiveWithoutEffects = !1, effectiveReducedMotion: effectiveReducedMotion = !1, shaderVariant: shaderVariant = "liquidGlass", withLiquidBlur: withLiquidBlur = !1, elasticity: elasticity = 0, contentRef: contentRef}, ref) => {
     // Generate a stable, deterministic ID for SSR compatibility
     // Use a module-level counter that's consistent across server and client
     const filterId = useMemo((() => "atomix-glass-filter-" + ++idCounter), []), [shaderMapUrl, setShaderMapUrl] = useState(""), shaderGeneratorRef = useRef(null), shaderUtilsRef = useRef(null), shaderDebounceTimeoutRef = useRef(null);
@@ -1938,7 +2308,7 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
             flowBlur: 1.2 * blurAmount
         };
         // Enhanced validation for liquid blur
-                if (!enableLiquidBlur || !rectCache || !mouseOffset || "number" != typeof mouseOffset.x || "number" != typeof mouseOffset.y || isNaN(mouseOffset.x) || isNaN(mouseOffset.y)) return defaultBlur;
+                if (!withLiquidBlur || !rectCache || !mouseOffset || "number" != typeof mouseOffset.x || "number" != typeof mouseOffset.y || isNaN(mouseOffset.x) || isNaN(mouseOffset.y)) return defaultBlur;
         try {
             const mouseInfluence = calculateMouseInfluence(mouseOffset), maxBlur = 2 * blurAmount, baseBlur = Math.min(maxBlur, blurAmount + mouseInfluence * blurAmount * .15), edgeIntensity = .15 * mouseInfluence, edgeBlur = Math.min(maxBlur, baseBlur * (.8 + .4 * edgeIntensity)), centerIntensity = .1 * mouseInfluence, centerBlur = Math.min(maxBlur, baseBlur * (.3 + .3 * centerIntensity)), flowBlur = Math.min(maxBlur, 1.2 * baseBlur);
             // NOTE: hover/active multipliers intentionally omitted here —
@@ -1953,14 +2323,14 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
             return console.warn("AtomixGlassContainer: Error calculating liquid blur", error), 
             defaultBlur;
         }
-    }), [ enableLiquidBlur, blurAmount, mouseOffset, rectCache ]), backdropStyle = useMemo((() => {
+    }), [ withLiquidBlur, blurAmount, mouseOffset, rectCache ]), backdropStyle = useMemo((() => {
         try {
             const dynamicSaturation = saturation + 20 * (liquidBlur.baseBlur || 0), validatedBaseBlur = "number" != typeof liquidBlur.baseBlur || isNaN(liquidBlur.baseBlur) ? 0 : liquidBlur.baseBlur, validatedEdgeBlur = "number" != typeof liquidBlur.edgeBlur || isNaN(liquidBlur.edgeBlur) ? 0 : liquidBlur.edgeBlur, validatedCenterBlur = "number" != typeof liquidBlur.centerBlur || isNaN(liquidBlur.centerBlur) ? 0 : liquidBlur.centerBlur, validatedFlowBlur = "number" != typeof liquidBlur.flowBlur || isNaN(liquidBlur.flowBlur) ? 0 : liquidBlur.flowBlur, area = rectCache ? rectCache.width * rectCache.height : 0;
             // Validate blur values before using them
-                        return !enableLiquidBlur || effectiveReducedMotion || effectiveDisableEffects || area > 18e4 ? {
+                        return !withLiquidBlur || effectiveReducedMotion || effectiveWithoutEffects || area > 18e4 ? {
                 backdropFilter: `blur(${clampBlur(Math.max(validatedBaseBlur, .8 * validatedEdgeBlur, 1.1 * validatedCenterBlur, .9 * validatedFlowBlur))}px) saturate(${Math.min(dynamicSaturation, 200)}%) contrast(${overLightConfig?.contrast || 1.05}) brightness(${overLightConfig?.brightness || 1.05})`
             } : {
-                backdropFilter: `blur(${clampBlur(.4 * validatedBaseBlur + .25 * validatedEdgeBlur + .15 * validatedCenterBlur + .2 * validatedFlowBlur)}px) saturate(${Math.min(dynamicSaturation, 200)}%) contrast(${overLightConfig?.contrast || 1.05}) brightness(${overLightConfig?.brightness || 1.05})`
+                backdropFilter: `blur(${clampBlur(.4 * validatedBaseBlur + .25 * validatedEdgeBlur + .15 * validatedCenterBlur + .2 * validatedFlowBlur)}px) saturate(${Math.min(dynamicSaturation, 200)}%) contrast(${overLightConfig?.contrast || 1}) brightness(${overLightConfig?.brightness || 1})`
             };
             // Single-pass fallback: stronger radius to match perceived blur of multi-pass
                 } catch (error) {
@@ -1969,7 +2339,7 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
                 backdropFilter: `blur(${blurAmount}px) saturate(${saturation}%) contrast(1.05) brightness(1.05)`
             };
         }
-    }), [ liquidBlur, saturation, blurAmount, rectCache, effectiveReducedMotion, effectiveDisableEffects, enableLiquidBlur ]), containerVars = useMemo((() => {
+    }), [ liquidBlur, saturation, blurAmount, rectCache, effectiveReducedMotion, effectiveWithoutEffects, withLiquidBlur ]), containerVars = useMemo((() => {
         try {
             // Safe extraction of mouse offset values
             const mx = mouseOffset && "number" == typeof mouseOffset.x && !isNaN(mouseOffset.x) ? mouseOffset.x : 0, my = mouseOffset && "number" == typeof mouseOffset.y && !isNaN(mouseOffset.y) ? mouseOffset.y : 0;
@@ -1977,10 +2347,10 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
                 "--atomix-glass-container-width": `${glassSize?.width}`,
                 "--atomix-glass-container-height": `${glassSize?.height}`,
                 "--atomix-glass-container-padding": padding || "0 0",
-                "--atomix-glass-container-radius": `${"number" != typeof cornerRadius || isNaN(cornerRadius) ? 0 : cornerRadius}px`,
+                "--atomix-glass-container-radius": `${"number" != typeof borderRadius || isNaN(borderRadius) ? 0 : borderRadius}px`,
                 "--atomix-glass-container-backdrop": backdropStyle?.backdropFilter || "none",
                 "--atomix-glass-container-shadow": overLight ? [ `inset 0 1px 0 rgba(255, 255, 255, ${(.4 + .002 * mx) * (overLightConfig?.shadowIntensity || 1)})`, `inset 0 -1px 0 rgba(0, 0, 0, ${(.2 + .001 * Math.abs(my)) * (overLightConfig?.shadowIntensity || 1)})`, `inset 0 0 20px rgba(0, 0, 0, ${(.08 + .001 * Math.abs(mx + my)) * (overLightConfig?.shadowIntensity || 1)})`, `0 2px 12px rgba(0, 0, 0, ${(.12 + .002 * Math.abs(my)) * (overLightConfig?.shadowIntensity || 1)})` ].join(", ") : "0 0 20px rgba(0, 0, 0, 0.15) inset, 0 4px 8px rgba(0, 0, 0, 0.08) inset",
-                "--atomix-glass-container-shadow-opacity": effectiveDisableEffects ? 0 : 1,
+                "--atomix-glass-container-shadow-opacity": effectiveWithoutEffects ? 0 : 1,
                 // Background and shadow values use design token-aligned RGB values
                 "--atomix-glass-container-bg": overLight ? `linear-gradient(${180 + .5 * mx}deg, rgba(255, 255, 255, 0.1) 0%, transparent 20%, transparent 80%, rgba(0, 0, 0, 0.05) 100%)` : "none",
                 "--atomix-glass-container-text-shadow": overLight ? "0px 2px 12px rgba(0, 0, 0, 0)" : "0px 2px 12px rgba(0, 0, 0, 0.4)",
@@ -1998,14 +2368,10 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
                 "--atomix-glass-container-text-shadow": "none"
             };
         }
-    }), [ glassSize, padding, cornerRadius, backdropStyle, mouseOffset, overLight, effectiveDisableEffects ]), setForceNoTransition = el => {
-        el && (el.style.setProperty("transition-duration", "0s", "important"), el.style.setProperty("animation-duration", "0s", "important"), 
-        el.style.setProperty("transition-delay", "0s", "important"));
-    };
+    }), [ glassSize, padding, borderRadius, backdropStyle, mouseOffset, overLight, effectiveWithoutEffects ]);
     return jsx("div", {
         ref: el => {
             // Apply force no-transition
-            setForceNoTransition(el), 
             // Handle forwarded ref
             "function" == typeof ref ? ref(el) : ref && (ref.current = el);
         },
@@ -2040,7 +2406,10 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  forwardRef((({childre
                     aberrationIntensity: "number" != typeof aberrationIntensity || isNaN(aberrationIntensity) ? 0 : aberrationIntensity,
                     shaderMapUrl: shaderMapUrl
                 }), jsx("div", {
-                    ref: setForceNoTransition,
+                    ref: el => {
+                        el && (el.style.setProperty("transition-duration", "0s", "important"), el.style.setProperty("animation-duration", "0s", "important"), 
+                        el.style.setProperty("transition-delay", "0s", "important"));
+                    },
                     className: ATOMIX_GLASS.FILTER_OVERLAY_CLASS,
                     style: {
                         filter: `url(#${filterId})`,
@@ -2157,7 +2526,128 @@ class {
    */    getSubscriberCount() {
         return this.listeners.size;
     }
-}, {CONSTANTS: CONSTANTS} = ATOMIX_GLASS, backgroundDetectionCache = new WeakMap, setCachedBackgroundDetection = (parentElement, overLightConfig, result, threshold) => {
+}, updateAtomixGlassStyles = (wrapperElement, containerElement, params) => {
+    if (!wrapperElement && !containerElement) return;
+    const {mouseOffset: mouseOffset, globalMousePosition: globalMousePosition, glassSize: glassSize, isHovered: isHovered, isActive: isActive, isOverLight: isOverLight, baseOverLightConfig: baseOverLightConfig, effectiveBorderRadius: effectiveBorderRadius, effectiveWithoutEffects: effectiveWithoutEffects, effectiveReducedMotion: effectiveReducedMotion, elasticity: elasticity, directionalScale: directionalScale, onClick: onClick, withLiquidBlur: withLiquidBlur, blurAmount: blurAmount = ATOMIX_GLASS.DEFAULTS.BLUR_AMOUNT, saturation: saturation = ATOMIX_GLASS.DEFAULTS.SATURATION, padding: padding = ATOMIX_GLASS.DEFAULTS.PADDING} = params, mouseInfluence = calculateMouseInfluence(mouseOffset), hoverIntensity = isHovered ? 1.4 : 1, activeIntensity = isActive ? 1.6 : 1, overLightConfig = {
+        opacity: baseOverLightConfig.opacity * hoverIntensity * activeIntensity,
+        contrast: Math.min(1.6, baseOverLightConfig.contrast + .1 * mouseInfluence),
+        brightness: Math.min(1.1, baseOverLightConfig.brightness + .05 * mouseInfluence),
+        shadowIntensity: Math.min(1.2, Math.max(.5, baseOverLightConfig.shadowIntensity + .2 * mouseInfluence)),
+        borderOpacity: Math.min(1, Math.max(.3, baseOverLightConfig.borderOpacity + .1 * mouseInfluence)),
+        saturationBoost: baseOverLightConfig.saturationBoost
+    };
+    // Calculate mouse influence
+        // Calculate elastic translation
+    let elasticTranslation = {
+        x: 0,
+        y: 0
+    };
+    if (!effectiveWithoutEffects && wrapperElement) {
+        const rect = wrapperElement.getBoundingClientRect(), center = calculateElementCenter(rect);
+        // Calculate fade in factor
+        let fadeInFactor = 0;
+        if (globalMousePosition.x && globalMousePosition.y && validateGlassSize(glassSize)) {
+            const edgeDistanceX = Math.max(0, Math.abs(globalMousePosition.x - center.x) - glassSize.width / 2), edgeDistanceY = Math.max(0, Math.abs(globalMousePosition.y - center.y) - glassSize.height / 2), edgeDistance = calculateDistance({
+                x: edgeDistanceX,
+                y: edgeDistanceY
+            }, {
+                x: 0,
+                y: 0
+            });
+            fadeInFactor = edgeDistance > ATOMIX_GLASS.CONSTANTS.ACTIVATION_ZONE ? 0 : 1 - edgeDistance / ATOMIX_GLASS.CONSTANTS.ACTIVATION_ZONE;
+        }
+        elasticTranslation = {
+            x: (globalMousePosition.x - center.x) * elasticity * .1 * fadeInFactor,
+            y: (globalMousePosition.y - center.y) * elasticity * .1 * fadeInFactor
+        };
+    }
+    const transformStyle = effectiveWithoutEffects ? isActive && Boolean(onClick) ? "scale(0.98)" : "scale(1)" : `translate(${elasticTranslation.x}px, ${elasticTranslation.y}px) ${isActive && Boolean(onClick) ? "scale(0.96)" : directionalScale}`;
+    // Update Wrapper Styles (glassVars)
+        if (wrapperElement) {
+        const mx = mouseOffset.x, my = mouseOffset.y, absMx = Math.abs(mx), absMy = Math.abs(my), GRADIENT = ATOMIX_GLASS.CONSTANTS.GRADIENT, borderGradientAngle = GRADIENT.BASE_ANGLE + mx * GRADIENT.ANGLE_MULTIPLIER, borderStop1 = Math.max(GRADIENT.BORDER_STOP_1.MIN, GRADIENT.BORDER_STOP_1.BASE + my * GRADIENT.BORDER_STOP_1.MULTIPLIER), borderStop2 = Math.min(GRADIENT.BORDER_STOP_2.MAX, GRADIENT.BORDER_STOP_2.BASE + my * GRADIENT.BORDER_STOP_2.MULTIPLIER), borderOpacities = [ GRADIENT.BORDER_OPACITY.BASE_1 + absMx * GRADIENT.BORDER_OPACITY.MULTIPLIER_LOW, GRADIENT.BORDER_OPACITY.BASE_2 + absMx * GRADIENT.BORDER_OPACITY.MULTIPLIER_HIGH, GRADIENT.BORDER_OPACITY.BASE_3 + absMx * GRADIENT.BORDER_OPACITY.MULTIPLIER_LOW, GRADIENT.BORDER_OPACITY.BASE_4 + absMx * GRADIENT.BORDER_OPACITY.MULTIPLIER_HIGH ], configBorderOpacity = overLightConfig.borderOpacity, whiteColor = ATOMIX_GLASS.CONSTANTS.PALETTE.WHITE, blackColor = ATOMIX_GLASS.CONSTANTS.PALETTE.BLACK, hoverPositions = {
+            hover1: {
+                x: GRADIENT.CENTER_POSITION + mx / GRADIENT.HOVER_POSITION.DIVISOR_1,
+                y: GRADIENT.CENTER_POSITION + my / GRADIENT.HOVER_POSITION.DIVISOR_1
+            },
+            hover2: {
+                x: GRADIENT.CENTER_POSITION + mx / GRADIENT.HOVER_POSITION.DIVISOR_2,
+                y: GRADIENT.CENTER_POSITION + my / GRADIENT.HOVER_POSITION.DIVISOR_2
+            },
+            hover3: {
+                x: GRADIENT.CENTER_POSITION + mx * GRADIENT.HOVER_POSITION.MULTIPLIER_3,
+                y: GRADIENT.CENTER_POSITION + my * GRADIENT.HOVER_POSITION.MULTIPLIER_3
+            }
+        }, basePosition = {
+            x: GRADIENT.CENTER_POSITION + mx * GRADIENT.BASE_LAYER_MULTIPLIER,
+            y: GRADIENT.CENTER_POSITION + my * GRADIENT.BASE_LAYER_MULTIPLIER
+        }, opacityValues = {
+            hover1: isHovered || isActive ? .5 : 0,
+            hover2: isActive ? .5 : 0,
+            hover3: isHovered ? .4 : isActive ? .8 : 0,
+            base: isOverLight ? overLightConfig.opacity : 0,
+            over: isOverLight ? 1.1 * overLightConfig.opacity : 0
+        }, style = wrapperElement.style;
+        style.setProperty("--atomix-glass-transform", transformStyle || "none"), 
+        // Gradients
+        style.setProperty("--atomix-glass-border-gradient-1", `linear-gradient(${borderGradientAngle}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${(borderOpacities[0] ?? 1) * configBorderOpacity}) ${borderStop1}%, rgba(${whiteColor}, ${(borderOpacities[1] ?? 1) * configBorderOpacity}) ${borderStop2}%, rgba(${whiteColor}, 0) 100%)`), 
+        style.setProperty("--atomix-glass-border-gradient-2", `linear-gradient(${borderGradientAngle}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${(borderOpacities[2] ?? 1) * configBorderOpacity}) ${borderStop1}%, rgba(${whiteColor}, ${(borderOpacities[3] ?? 1) * configBorderOpacity}) ${borderStop2}%, rgba(${whiteColor}, 0) 100%)`), 
+        // Hover gradients
+        style.setProperty("--atomix-glass-hover-1-gradient", isOverLight ? `radial-gradient(circle at ${hoverPositions.hover1.x}% ${hoverPositions.hover1.y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_START}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_STOP}%, rgba(${blackColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_END}%)` : `radial-gradient(circle at ${hoverPositions.hover1.x}% ${hoverPositions.hover1.y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.WHITE_STOP}%)`), 
+        style.setProperty("--atomix-glass-hover-2-gradient", isOverLight ? `radial-gradient(circle at ${hoverPositions.hover2.x}% ${hoverPositions.hover2.y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_START}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_STOP}%, rgba(${blackColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_END}%)` : `radial-gradient(circle at ${hoverPositions.hover2.x}% ${hoverPositions.hover2.y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.WHITE_STOP}%)`), 
+        style.setProperty("--atomix-glass-hover-3-gradient", isOverLight ? `radial-gradient(circle at ${hoverPositions.hover3.x}% ${hoverPositions.hover3.y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_START}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_STOP}%, rgba(${blackColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_END}%)` : `radial-gradient(circle at ${hoverPositions.hover3.x}% ${hoverPositions.hover3.y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.WHITE_STOP}%)`), 
+        style.setProperty("--atomix-glass-base-gradient", isOverLight ? `linear-gradient(${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.ANGLE}deg, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_START_BASE + mx * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_START_MULTIPLIER}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_BASE + my * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_MULTIPLIER}) ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_STOP}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_END_BASE + absMx * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_END_MULTIPLIER}) 100%)` : `rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.WHITE_OPACITY})`), 
+        style.setProperty("--atomix-glass-overlay-gradient", isOverLight ? `radial-gradient(circle at ${basePosition.x}% ${basePosition.y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_START_BASE + absMx * ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_START_MULTIPLIER}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_MID_STOP}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_END_BASE + absMy * ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_END_MULTIPLIER}) 100%)` : `rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.WHITE_OPACITY})`), 
+        // Opacities
+        style.setProperty("--atomix-glass-hover-1-opacity", opacityValues.hover1.toString()), 
+        style.setProperty("--atomix-glass-hover-2-opacity", opacityValues.hover2.toString()), 
+        style.setProperty("--atomix-glass-hover-3-opacity", opacityValues.hover3.toString()), 
+        style.setProperty("--atomix-glass-base-opacity", opacityValues.base.toString()), 
+        style.setProperty("--atomix-glass-overlay-opacity", opacityValues.over.toString()), 
+        style.setProperty("--atomix-glass-overlay-highlight-opacity", (opacityValues.over * ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.OPACITY_MULTIPLIER).toString()), 
+        // Other
+        style.setProperty("--atomix-glass-blend-mode", isOverLight ? "multiply" : "overlay"), 
+        style.setProperty("--atomix-glass-radius", `${effectiveBorderRadius}px`);
+    }
+    // Update Container Styles (containerVars)
+        if (containerElement) {
+        const mx = mouseOffset.x, my = mouseOffset.y, EDGE_BLUR_MULTIPLIER = 1.25, CENTER_BLUR_MULTIPLIER = 1.1, FLOW_BLUR_MULTIPLIER = 1.2, MOUSE_INFLUENCE_BLUR_FACTOR = .15, EDGE_INTENSITY_MOUSE_FACTOR = .15, CENTER_INTENSITY_MOUSE_FACTOR = .1, MAX_BLUR_RELATIVE = 2, rect = containerElement.getBoundingClientRect();
+        let liquidBlur = {
+            baseBlur: blurAmount,
+            edgeBlur: blurAmount * EDGE_BLUR_MULTIPLIER,
+            centerBlur: blurAmount * CENTER_BLUR_MULTIPLIER,
+            flowBlur: blurAmount * FLOW_BLUR_MULTIPLIER
+        };
+        if (withLiquidBlur && rect) {
+            const mouseInfluence = calculateMouseInfluence(mouseOffset), maxBlur = blurAmount * MAX_BLUR_RELATIVE, baseBlur = Math.min(maxBlur, blurAmount + mouseInfluence * blurAmount * MOUSE_INFLUENCE_BLUR_FACTOR), edgeIntensity = mouseInfluence * EDGE_INTENSITY_MOUSE_FACTOR, edgeBlur = Math.min(maxBlur, baseBlur * (.8 + .4 * edgeIntensity)), centerIntensity = mouseInfluence * CENTER_INTENSITY_MOUSE_FACTOR, centerBlur = Math.min(maxBlur, baseBlur * (.3 + .3 * centerIntensity)), flowBlur = Math.min(maxBlur, baseBlur * FLOW_BLUR_MULTIPLIER);
+            liquidBlur = {
+                baseBlur: clampBlur(baseBlur),
+                edgeBlur: clampBlur(edgeBlur),
+                centerBlur: clampBlur(centerBlur),
+                flowBlur: clampBlur(flowBlur)
+            };
+        }
+        // Backdrop filter
+                let backdropFilterString = `blur(${blurAmount}px) saturate(${saturation}%) contrast(1.05) brightness(1.05)`;
+        const dynamicSaturation = saturation + 20 * (liquidBlur.baseBlur || 0), area = rect ? rect.width * rect.height : 0;
+        backdropFilterString = !withLiquidBlur || effectiveReducedMotion || effectiveWithoutEffects || area > 18e4 ? `blur(${clampBlur(Math.max(liquidBlur.baseBlur, .8 * liquidBlur.edgeBlur, 1.1 * liquidBlur.centerBlur, .9 * liquidBlur.flowBlur))}px) saturate(${Math.min(dynamicSaturation, 200)}%) contrast(${overLightConfig.contrast}) brightness(${overLightConfig.brightness})` : `blur(${clampBlur(.4 * liquidBlur.baseBlur + .25 * liquidBlur.edgeBlur + .15 * liquidBlur.centerBlur + .2 * liquidBlur.flowBlur)}px) saturate(${Math.min(dynamicSaturation, 200)}%) contrast(${overLightConfig.contrast}) brightness(${overLightConfig.brightness})`;
+        // Container variables
+                const style = containerElement.style;
+        style.setProperty("--atomix-glass-container-width", `${glassSize.width}`), style.setProperty("--atomix-glass-container-height", `${glassSize.height}`), 
+        style.setProperty("--atomix-glass-container-padding", padding), style.setProperty("--atomix-glass-container-radius", `${effectiveBorderRadius}px`), 
+        style.setProperty("--atomix-glass-container-backdrop", backdropFilterString), 
+        // Shadows
+        style.setProperty("--atomix-glass-container-shadow", isOverLight ? [ `inset 0 1px 0 rgba(255, 255, 255, ${(.4 + .002 * mx) * (overLightConfig.shadowIntensity || 1)})`, `inset 0 -1px 0 rgba(0, 0, 0, ${(.2 + .001 * Math.abs(my)) * (overLightConfig.shadowIntensity || 1)})`, `inset 0 0 20px rgba(0, 0, 0, ${(.08 + .001 * Math.abs(mx + my)) * (overLightConfig.shadowIntensity || 1)})`, `0 2px 12px rgba(0, 0, 0, ${(.12 + .002 * Math.abs(my)) * (overLightConfig.shadowIntensity || 1)})` ].join(", ") : "0 0 20px rgba(0, 0, 0, 0.15) inset, 0 4px 8px rgba(0, 0, 0, 0.08) inset"), 
+        style.setProperty("--atomix-glass-container-shadow-opacity", effectiveWithoutEffects ? "0" : "1"), 
+        style.setProperty("--atomix-glass-container-bg", isOverLight ? `linear-gradient(${180 + .5 * mx}deg, rgba(255, 255, 255, 0.1) 0%, transparent 20%, transparent 80%, rgba(0, 0, 0, 0.05) 100%)` : "none"), 
+        style.setProperty("--atomix-glass-container-text-shadow", isOverLight ? "0px 2px 12px rgba(0, 0, 0, 0)" : "0px 2px 12px rgba(0, 0, 0, 0.4)"), 
+        style.setProperty("--atomix-glass-container-box-shadow", isOverLight ? "0px 16px 70px rgba(0, 0, 0, 0.75)" : "0px 12px 40px rgba(0, 0, 0, 0.25)");
+    }
+}, {CONSTANTS: CONSTANTS$1} = ATOMIX_GLASS;
+
+/**
+ * Updates the styles of the AtomixGlass wrapper and container elements imperatively
+ * to avoid React re-renders on mouse movement.
+ */ const {CONSTANTS: CONSTANTS} = ATOMIX_GLASS, backgroundDetectionCache = new WeakMap, setCachedBackgroundDetection = (parentElement, overLightConfig, result, threshold) => {
     parentElement && backgroundDetectionCache.set(parentElement, {
         result: result,
         timestamp: Date.now(),
@@ -2170,18 +2660,74 @@ class {
  * Composable hook for AtomixGlass component logic
  * Manages all state, calculations, and event handlers
  */
-function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadius: cornerRadius, globalMousePosition: externalGlobalMousePosition, mouseOffset: externalMouseOffset, mouseContainer: mouseContainer, overLight: overLight = ATOMIX_GLASS.DEFAULTS.OVER_LIGHT, reducedMotion: reducedMotion = !1, highContrast: highContrast = !1, disableEffects: disableEffects = !1, elasticity: elasticity = .05, onClick: onClick, debugCornerRadius: debugCornerRadius = !1, debugOverLight: debugOverLight = !1, enablePerformanceMonitoring: enablePerformanceMonitoring = !1, children: children}) {
+function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef: wrapperRef, borderRadius: borderRadius, globalMousePosition: externalGlobalMousePosition, mouseOffset: externalMouseOffset, mouseContainer: mouseContainer, overLight: overLight = ATOMIX_GLASS.DEFAULTS.OVER_LIGHT, reducedMotion: reducedMotion = !1, highContrast: highContrast = !1, withoutEffects: withoutEffects = !1, elasticity: elasticity = .05, onClick: onClick, debugBorderRadius: debugBorderRadius = !1, debugOverLight: debugOverLight = !1, debugPerformance: debugPerformance = !1, children: children, blurAmount: blurAmount, saturation: saturation, padding: padding, withLiquidBlur: withLiquidBlur}) {
     // State
-    const [isHovered, setIsHovered] = useState(!1), [isActive, setIsActive] = useState(!1), [glassSize, setGlassSize] = useState({
-        width: 270,
-        height: 69
-    }), [internalGlobalMousePosition, setInternalGlobalMousePosition] = useState({
+    const [isHovered, setIsHovered] = useState(!1), [isActive, setIsActive] = useState(!1), cachedRectRef = useRef(null), internalGlobalMousePositionRef = useRef({
         x: 0,
         y: 0
-    }), [internalMouseOffset, setInternalMouseOffset] = useState({
+    }), internalMouseOffsetRef = useRef({
         x: 0,
         y: 0
-    }), [dynamicCornerRadius, setDynamicCornerRadius] = useState(CONSTANTS.DEFAULT_CORNER_RADIUS), [userPrefersReducedMotion, setUserPrefersReducedMotion] = useState(!1), [userPrefersHighContrast, setUserPrefersHighContrast] = useState(!1), [detectedOverLight, setDetectedOverLight] = useState(!1), effectiveCornerRadius = useMemo((() => void 0 !== cornerRadius ? Math.max(0, cornerRadius) : Math.max(0, dynamicCornerRadius)), [ cornerRadius, dynamicCornerRadius ]), effectiveReducedMotion = useMemo((() => reducedMotion || userPrefersReducedMotion), [ reducedMotion, userPrefersReducedMotion ]), effectiveHighContrast = useMemo((() => highContrast || userPrefersHighContrast), [ highContrast, userPrefersHighContrast ]), effectiveDisableEffects = useMemo((() => disableEffects || effectiveReducedMotion), [ disableEffects, effectiveReducedMotion ]), globalMousePosition = useMemo((() => externalGlobalMousePosition || internalGlobalMousePosition), [ externalGlobalMousePosition, internalGlobalMousePosition ]), mouseOffset = useMemo((() => externalMouseOffset || internalMouseOffset), [ externalMouseOffset, internalMouseOffset ]);
+    }), [dynamicBorderRadius, setDynamicCornerRadius] = useState(CONSTANTS.DEFAULT_CORNER_RADIUS), [userPrefersReducedMotion, setUserPrefersReducedMotion] = useState(!1), [userPrefersHighContrast, setUserPrefersHighContrast] = useState(!1), [detectedOverLight, setDetectedOverLight] = useState(!1), effectiveBorderRadius = useMemo((() => void 0 !== borderRadius ? Math.max(0, borderRadius) : Math.max(0, dynamicBorderRadius)), [ borderRadius, dynamicBorderRadius ]), {glassSize: glassSize} = function({glassRef: glassRef, effectiveBorderRadius: effectiveBorderRadius, cachedRectRef: cachedRectRef}) {
+        const [glassSize, setGlassSize] = useState({
+            width: 270,
+            height: 69
+        });
+        return useEffect((() => {
+            const isValidElement = element => null !== element && element instanceof HTMLElement && element.isConnected;
+            let rafId = null, lastSize = {
+                width: 0,
+                height: 0
+            }, lastCornerRadius = effectiveBorderRadius;
+            const updateGlassSize = (forceUpdate = !1) => {
+                null !== rafId && cancelAnimationFrame(rafId), rafId = requestAnimationFrame((() => {
+                    if (!isValidElement(glassRef.current)) return void (rafId = null);
+                    const rect = glassRef.current.getBoundingClientRect();
+                    if (rect.width <= 0 || rect.height <= 0) return void (rafId = null);
+                    // Measure actual rendered size without artificial offsets to avoid feedback loops
+                                        const newSize = {
+                        width: Math.round(rect.width),
+                        height: Math.round(rect.height)
+                    }, cornerRadiusChanged = lastCornerRadius !== effectiveBorderRadius, dimensionsChanged = Math.abs(newSize.width - lastSize.width) > 1 || Math.abs(newSize.height - lastSize.height) > 1;
+                    var size;
+                    (forceUpdate || cornerRadiusChanged || dimensionsChanged) && validateGlassSize(size = newSize) && size.width <= CONSTANTS$1.MAX_SIZE && size.height <= CONSTANTS$1.MAX_SIZE && (lastSize = newSize, 
+                    lastCornerRadius = effectiveBorderRadius, setGlassSize(newSize)), rafId = null;
+                }));
+            };
+            let resizeTimeoutId = null;
+            const debouncedResizeHandler = () => {
+                resizeTimeoutId && clearTimeout(resizeTimeoutId), resizeTimeoutId = setTimeout((() => updateGlassSize(!1)), 16);
+            }, initialTimeoutId = setTimeout((() => updateGlassSize(!0)), 0);
+            let resizeObserver = null, resizeDebounceTimeout = null;
+            // ResizeObserver has 98%+ browser support, no need for fallback
+            if ("undefined" != typeof ResizeObserver && isValidElement(glassRef.current)) try {
+                resizeObserver = new ResizeObserver((entries => {
+                    for (const entry of entries) if (entry.target === glassRef.current) {
+                        // Update cached rect when size changes
+                        glassRef.current && cachedRectRef && (cachedRectRef.current = glassRef.current.getBoundingClientRect()), 
+                        // Debounce resize updates to match RAF timing (16ms)
+                        resizeDebounceTimeout && clearTimeout(resizeDebounceTimeout), resizeDebounceTimeout = setTimeout((() => updateGlassSize(!1)), 16);
+                        break;
+                    }
+                })), resizeObserver.observe(glassRef.current);
+            } catch (error) {
+                console.warn("AtomixGlass: ResizeObserver not available, using window resize only", error);
+            }
+            return window.addEventListener("resize", debouncedResizeHandler, {
+                passive: !0
+            }), () => {
+                clearTimeout(initialTimeoutId), null !== rafId && cancelAnimationFrame(rafId), resizeTimeoutId && clearTimeout(resizeTimeoutId), 
+                resizeDebounceTimeout && clearTimeout(resizeDebounceTimeout), window.removeEventListener("resize", debouncedResizeHandler), 
+                resizeObserver?.disconnect();
+            };
+        }), [ effectiveBorderRadius, glassRef, cachedRectRef ]), {
+            glassSize: glassSize
+        };
+    }({
+        glassRef: glassRef,
+        effectiveBorderRadius: effectiveBorderRadius,
+        cachedRectRef: cachedRectRef
+    }), effectiveReducedMotion = useMemo((() => reducedMotion || userPrefersReducedMotion), [ reducedMotion, userPrefersReducedMotion ]), effectiveHighContrast = useMemo((() => highContrast || userPrefersHighContrast), [ highContrast, userPrefersHighContrast ]), effectiveWithoutEffects = useMemo((() => withoutEffects || effectiveReducedMotion), [ withoutEffects, effectiveReducedMotion ]), globalMousePosition = externalGlobalMousePosition || internalGlobalMousePositionRef.current, mouseOffset = externalMouseOffset || internalMouseOffsetRef.current;
     // Extract border-radius from children
     useEffect((() => {
         const extractRadius = () => {
@@ -2212,13 +2758,13 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
                 }
                 null !== extractedRadius && extractedRadius > 0 && setDynamicCornerRadius(extractedRadius);
             } catch (error) {
-                "undefined" != typeof process && "production" === process.env?.NODE_ENV || !debugCornerRadius || console.error("[AtomixGlass] Error extracting corner radius:", error);
+                "undefined" != typeof process && "production" === process.env?.NODE_ENV || !debugBorderRadius || console.error("[AtomixGlass] Error extracting corner radius:", error);
             }
         };
         extractRadius();
         const timeoutId = setTimeout(extractRadius, 100);
         return () => clearTimeout(timeoutId);
-    }), [ children, debugCornerRadius, contentRef ]), 
+    }), [ children, debugBorderRadius, contentRef ]), 
     // Media query handlers and background detection
     useEffect((() => {
         if (("auto" === overLight || "object" == typeof overLight && null !== overLight) && glassRef.current) {
@@ -2274,72 +2820,52 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
                                 const rgb = bgColor.match(/\d+/g);
                                 if (rgb && rgb.length >= 3) {
                                     const r = Number(rgb[0]), g = Number(rgb[1]), b = Number(rgb[2]);
-                                    // Validate RGB values are valid numbers
-                                    if (!isNaN(r) && !isNaN(g) && !isNaN(b) && isFinite(r) && isFinite(g) && isFinite(b) && r >= 0 && r <= 255 && g >= 0 && g <= 255 && b >= 0 && b <= 255 && (r > 10 || g > 10 || b > 10)) {
+                                    if (!isNaN(r) && !isNaN(g) && !isNaN(b) && (r > 10 || g > 10 || b > 10)) {
                                         const luminance = (.299 * r + .587 * g + .114 * b) / 255;
                                         !isNaN(luminance) && isFinite(luminance) && (totalLuminance += luminance, validSamples++, 
                                         hasValidBackground = !0);
                                     }
                                 }
                             }
-                            // Check for image backgrounds
-                                                        bgImage && "none" !== bgImage && "initial" !== bgImage && (
-                            // For image backgrounds, assume medium luminance
-                            totalLuminance += .5, validSamples++, hasValidBackground = !0);
+                            bgImage && "none" !== bgImage && "initial" !== bgImage && (totalLuminance += .5, 
+                            validSamples++, hasValidBackground = !0);
                         } catch (styleError) {
-                            "undefined" == typeof process || process.env;
+                            // Silently continue
                         }
-                        // Move to parent element for next iteration
-                                                if (!currentElement) break;
- // Exit loop if currentElement becomes null
-                                                currentElement = currentElement.parentElement, depth++;
+                        if (!currentElement) break;
+                        currentElement = currentElement.parentElement, depth++;
                     }
-                    // More conservative detection with better error handling
-                                        if (hasValidBackground && validSamples > 0) {
+                    if (hasValidBackground && validSamples > 0) {
                         const avgLuminance = totalLuminance / validSamples;
                         if (!isNaN(avgLuminance) && isFinite(avgLuminance)) {
                             let threshold = .7;
- // Conservative threshold for overlight
-                            // If overLight is an object, use its threshold property with validation
-                                                        if ("object" == typeof overLight && null !== overLight) {
+                            if ("object" == typeof overLight && null !== overLight) {
                                 const objConfig = overLight;
                                 if (void 0 !== objConfig.threshold) {
-                                    const configThreshold = "number" == typeof objConfig.threshold && !isNaN(objConfig.threshold) && isFinite(objConfig.threshold) ? objConfig.threshold : .7;
+                                    const configThreshold = "number" != typeof objConfig.threshold || isNaN(objConfig.threshold) ? .7 : objConfig.threshold;
                                     threshold = Math.min(.9, Math.max(.1, configThreshold));
                                 }
                             }
                             const isOverLightDetected = avgLuminance > threshold;
-                            // Cache the result in shared cache
-                                                        setCachedBackgroundDetection(element.parentElement, overLight, isOverLightDetected, threshold), 
+                            setCachedBackgroundDetection(element.parentElement, overLight, isOverLightDetected, threshold), 
                             setDetectedOverLight(isOverLightDetected);
                         } else {
-                            // Invalid luminance calculation, default to false
                             const result = !1, threshold = "object" == typeof overLight && null !== overLight && overLight.threshold || .7;
                             setCachedBackgroundDetection(element.parentElement, overLight, result, threshold), 
                             setDetectedOverLight(result);
                         }
                     } else {
-                        // Default to false if no valid background found
                         const result = !1, threshold = "object" == typeof overLight && null !== overLight && overLight.threshold || .7;
                         setCachedBackgroundDetection(element.parentElement, overLight, result, threshold), 
                         setDetectedOverLight(result);
                     }
                 } catch (error) {
-                    // Enhanced error logging with context
-                    "undefined" != typeof process && "development" !== process.env?.NODE_ENV || console.warn("AtomixGlass: Error detecting background brightness:", error);
-                    const result = !1;
-                    if (element && element.parentElement) {
-                        const threshold = "object" == typeof overLight && null !== overLight && overLight.threshold || .7;
-                        setCachedBackgroundDetection(element.parentElement, overLight, result, threshold);
-                    }
-                    setDetectedOverLight(result);
+                    setDetectedOverLight(!1);
                 }
             }), 150);
             return () => clearTimeout(timeoutId);
         }
-        if ("boolean" == typeof overLight && 
-        // For boolean values, disable auto-detection
-        setDetectedOverLight(!1), "function" == typeof window.matchMedia) try {
+        if ("boolean" == typeof overLight && setDetectedOverLight(!1), "function" == typeof window.matchMedia) try {
             const mediaQueryReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)"), mediaQueryHighContrast = window.matchMedia("(prefers-contrast: high)");
             setUserPrefersReducedMotion(mediaQueryReducedMotion.matches), setUserPrefersHighContrast(mediaQueryHighContrast.matches);
             const handleReducedMotionChange = e => {
@@ -2350,65 +2876,54 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
             return mediaQueryReducedMotion.addEventListener ? (mediaQueryReducedMotion.addEventListener("change", handleReducedMotionChange), 
             mediaQueryHighContrast.addEventListener("change", handleHighContrastChange)) : mediaQueryReducedMotion.addListener && (mediaQueryReducedMotion.addListener(handleReducedMotionChange), 
             mediaQueryHighContrast.addListener(handleHighContrastChange)), () => {
-                try {
-                    mediaQueryReducedMotion.removeEventListener ? (mediaQueryReducedMotion.removeEventListener("change", handleReducedMotionChange), 
-                    mediaQueryHighContrast.removeEventListener("change", handleHighContrastChange)) : mediaQueryReducedMotion.removeListener && (mediaQueryReducedMotion.removeListener(handleReducedMotionChange), 
-                    mediaQueryHighContrast.removeListener(handleHighContrastChange));
-                } catch (cleanupError) {
-                    console.error("AtomixGlass: Error cleaning up media query listeners:", cleanupError);
-                }
+                // ignore
             };
         } catch (error) {
-            return void console.error("AtomixGlass: Error setting up media queries:", error);
+            return;
         }
     }), [ overLight, glassRef, debugOverLight ]);
-    // Mouse tracking using shared global tracker
-    // Cache bounding rect to avoid repeated getBoundingClientRect calls
-    const cachedRectRef = useRef(null), updateRectRef = useRef(null), handleGlobalMousePosition = useCallback((globalPos => {
-        if (externalGlobalMousePosition && externalMouseOffset) 
-        // External mouse position provided, skip internal tracking
-        return;
-        if (effectiveDisableEffects) return;
-        const container = mouseContainer?.current || glassRef.current;
-        if (!container) return;
-        enablePerformanceMonitoring && performance.now();
-        // Use cached rect if available, otherwise get new one
-        let rect = cachedRectRef.current;
-        if (rect && 0 !== rect.width && 0 !== rect.height || (rect = container.getBoundingClientRect(), 
-        cachedRectRef.current = rect), 0 === rect.width || 0 === rect.height) return;
-        const center = calculateElementCenter(rect), newOffset = {
-            x: (globalPos.x - center.x) / rect.width * 100,
-            y: (globalPos.y - center.y) / rect.height * 100
+    /**
+   * Get effective overLight value based on configuration
+   */
+    const getEffectiveOverLight = useCallback((() => "boolean" == typeof overLight ? overLight : ("auto" === overLight || "object" == typeof overLight && null !== overLight) && detectedOverLight), [ overLight, detectedOverLight ]), validateConfigValue = useCallback(((value, min, max, defaultValue) => "number" != typeof value || isNaN(value) || !isFinite(value) ? defaultValue : Math.min(max, Math.max(min, value))), []), baseOverLightConfig = useMemo((() => {
+        const isOverLight = getEffectiveOverLight(), baseConfig = {
+            isOverLight: isOverLight,
+            threshold: .7,
+            opacity: isOverLight ? Math.min(.6, Math.max(.2, .5)) : 0,
+            contrast: 1,
+            // Base contrast
+            brightness: 1,
+            // Base brightness
+            saturationBoost: 1.3,
+            shadowIntensity: .9,
+            borderOpacity: .7
         };
-        // Calculate offset relative to this container
-                // React 18 automatically batches these updates
-        setInternalMouseOffset(newOffset), setInternalGlobalMousePosition(globalPos), "undefined" != typeof process && "production" === process.env?.NODE_ENV || !enablePerformanceMonitoring || performance.now();
-    }), [ mouseContainer, glassRef, externalGlobalMousePosition, externalMouseOffset, effectiveDisableEffects, enablePerformanceMonitoring ]);
-    // Subscribe to shared mouse tracker
-    useEffect((() => {
-        if (externalGlobalMousePosition && externalMouseOffset) 
-        // External mouse position provided, don't subscribe
-        return;
-        if (effectiveDisableEffects) 
-        // Effects disabled, don't subscribe
-        return;
-        // Subscribe to shared tracker
-                const unsubscribe = globalMouseTracker.subscribe(handleGlobalMousePosition), container = mouseContainer?.current || glassRef.current;
-        // Update cached rect when container size changes
-                let resizeObserver = null;
-        return container && "undefined" != typeof ResizeObserver && (resizeObserver = new ResizeObserver((() => {
-            null !== updateRectRef.current && cancelAnimationFrame(updateRectRef.current), updateRectRef.current = requestAnimationFrame((() => {
-                const container = mouseContainer?.current || glassRef.current;
-                container && (cachedRectRef.current = container.getBoundingClientRect()), updateRectRef.current = null;
-            }));
-        })), resizeObserver.observe(container)), () => {
-            unsubscribe(), null !== updateRectRef.current && (cancelAnimationFrame(updateRectRef.current), 
-            updateRectRef.current = null), resizeObserver && resizeObserver.disconnect();
+        if ("object" == typeof overLight && null !== overLight) {
+            const objConfig = overLight, validatedThreshold = validateConfigValue(objConfig.threshold, .1, 1, baseConfig.threshold), validatedOpacity = validateConfigValue(objConfig.opacity, .1, 1, baseConfig.opacity), validatedContrast = validateConfigValue(objConfig.contrast, .5, 2.5, baseConfig.contrast), validatedBrightness = validateConfigValue(objConfig.brightness, .5, 2, baseConfig.brightness), validatedSaturationBoost = validateConfigValue(objConfig.saturationBoost, .5, 3, baseConfig.saturationBoost);
+            return {
+                ...baseConfig,
+                threshold: validatedThreshold,
+                opacity: validatedOpacity,
+                contrast: validatedContrast,
+                brightness: validatedBrightness,
+                saturationBoost: validatedSaturationBoost
+            };
+        }
+        return baseConfig;
+    }), [ overLight, getEffectiveOverLight, validateConfigValue ]), overLightConfig = useMemo((() => {
+        const mouseInfluence = calculateMouseInfluence(mouseOffset), hoverIntensity = isHovered ? 1.4 : 1, activeIntensity = isActive ? 1.6 : 1;
+        return {
+            isOverLight: baseOverLightConfig.isOverLight,
+            threshold: baseOverLightConfig.threshold,
+            opacity: baseOverLightConfig.opacity * hoverIntensity * activeIntensity,
+            contrast: Math.min(1.6, baseOverLightConfig.contrast + .1 * mouseInfluence),
+            brightness: Math.min(1.1, baseOverLightConfig.brightness + .05 * mouseInfluence),
+            saturationBoost: baseOverLightConfig.saturationBoost,
+            shadowIntensity: Math.min(1.2, Math.max(.5, baseOverLightConfig.shadowIntensity + .2 * mouseInfluence)),
+            borderOpacity: Math.min(1, Math.max(.3, baseOverLightConfig.borderOpacity + .1 * mouseInfluence))
         };
-    }), [ handleGlobalMousePosition, mouseContainer, glassRef, externalGlobalMousePosition, externalMouseOffset, effectiveDisableEffects ]);
-    // Transform calculations
-    const calculateDirectionalScale = useCallback((() => {
-        if (!0 === overLight || "auto" === overLight && detectedOverLight || "object" == typeof overLight && null !== overLight && detectedOverLight) return "scale(1)";
+    }), [ baseOverLightConfig, mouseOffset, isHovered, isActive ]), updateRectRef = useRef(null), calculateDirectionalScale = useCallback((() => {
+        if (baseOverLightConfig.isOverLight) return "scale(1)";
         if (!(globalMousePosition.x && globalMousePosition.y && glassRef.current && validateGlassSize(glassSize))) return "scale(1)";
         const rect = glassRef.current.getBoundingClientRect(), center = calculateElementCenter(rect), deltaX = globalMousePosition.x - center.x, deltaY = globalMousePosition.y - center.y, edgeDistanceX = Math.max(0, Math.abs(deltaX) - glassSize.width / 2), edgeDistanceY = Math.max(0, Math.abs(deltaY) - glassSize.height / 2), edgeDistance = calculateDistance({
             x: edgeDistanceX,
@@ -2422,7 +2937,7 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
         if (0 === centerDistance) return "scale(1)";
         const normalizedX = deltaX / centerDistance, normalizedY = deltaY / centerDistance, stretchIntensity = Math.min(centerDistance / 300, 1) * elasticity * fadeInFactor, scaleX = 1 + Math.abs(normalizedX) * stretchIntensity * .3 - Math.abs(normalizedY) * stretchIntensity * .15, scaleY = 1 + Math.abs(normalizedY) * stretchIntensity * .3 - Math.abs(normalizedX) * stretchIntensity * .15;
         return `scaleX(${Math.max(.8, scaleX)}) scaleY(${Math.max(.8, scaleY)})`;
-    }), [ globalMousePosition, elasticity, glassSize, glassRef, overLight, detectedOverLight ]), calculateFadeInFactor = useCallback((() => {
+    }), [ globalMousePosition, elasticity, glassSize, glassRef, baseOverLightConfig ]), calculateFadeInFactor = useCallback((() => {
         if (!(globalMousePosition.x && globalMousePosition.y && glassRef.current && validateGlassSize(glassSize))) return 0;
         const rect = glassRef.current.getBoundingClientRect(), center = calculateElementCenter(rect), edgeDistanceX = Math.max(0, Math.abs(globalMousePosition.x - center.x) - glassSize.width / 2), edgeDistanceY = Math.max(0, Math.abs(globalMousePosition.y - center.y) - glassSize.height / 2), edgeDistance = calculateDistance({
             x: edgeDistanceX,
@@ -2442,122 +2957,110 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
             x: (globalMousePosition.x - center.x) * elasticity * .1 * fadeInFactor,
             y: (globalMousePosition.y - center.y) * elasticity * .1 * fadeInFactor
         };
-    }), [ globalMousePosition, elasticity, calculateFadeInFactor, glassRef ]), elasticTranslation = useMemo((() => effectiveDisableEffects ? {
+    }), [ globalMousePosition, elasticity, calculateFadeInFactor, glassRef ]), elasticTranslation = useMemo((() => effectiveWithoutEffects ? {
         x: 0,
         y: 0
-    } : calculateElasticTranslation()), [ calculateElasticTranslation, effectiveDisableEffects ]), directionalScale = useMemo((() => effectiveDisableEffects ? "scale(1)" : calculateDirectionalScale()), [ calculateDirectionalScale, effectiveDisableEffects ]), transformStyle = useMemo((() => effectiveDisableEffects ? isActive && Boolean(onClick) ? "scale(0.98)" : "scale(1)" : `translate(${elasticTranslation.x}px, ${elasticTranslation.y}px) ${isActive && Boolean(onClick) ? "scale(0.96)" : directionalScale}`), [ elasticTranslation, isActive, onClick, directionalScale, effectiveDisableEffects ]);
-    // Size management
-    useEffect((() => {
-        const isValidElement = element => null !== element && element instanceof HTMLElement && element.isConnected;
-        let rafId = null, lastSize = {
-            width: 0,
-            height: 0
-        }, lastCornerRadius = effectiveCornerRadius;
-        const updateGlassSize = (forceUpdate = !1) => {
-            null !== rafId && cancelAnimationFrame(rafId), rafId = requestAnimationFrame((() => {
-                if (!isValidElement(glassRef.current)) return void (rafId = null);
-                const rect = glassRef.current.getBoundingClientRect();
-                if (rect.width <= 0 || rect.height <= 0) return void (rafId = null);
-                // Measure actual rendered size without artificial offsets to avoid feedback loops
-                                const newSize = {
-                    width: Math.round(rect.width),
-                    height: Math.round(rect.height)
-                }, cornerRadiusChanged = lastCornerRadius !== effectiveCornerRadius, dimensionsChanged = Math.abs(newSize.width - lastSize.width) > 1 || Math.abs(newSize.height - lastSize.height) > 1;
-                var size;
-                (forceUpdate || cornerRadiusChanged || dimensionsChanged) && validateGlassSize(size = newSize) && size.width <= CONSTANTS.MAX_SIZE && size.height <= CONSTANTS.MAX_SIZE && (lastSize = newSize, 
-                lastCornerRadius = effectiveCornerRadius, setGlassSize(newSize)), rafId = null;
-            }));
-        };
-        let resizeTimeoutId = null;
-        const debouncedResizeHandler = () => {
-            resizeTimeoutId && clearTimeout(resizeTimeoutId), resizeTimeoutId = setTimeout((() => updateGlassSize(!1)), 16);
-        }, initialTimeoutId = setTimeout((() => updateGlassSize(!0)), 0);
-        let resizeObserver = null, resizeDebounceTimeout = null;
-        // ResizeObserver has 98%+ browser support, no need for fallback
-        if ("undefined" != typeof ResizeObserver && isValidElement(glassRef.current)) try {
-            resizeObserver = new ResizeObserver((entries => {
-                for (const entry of entries) if (entry.target === glassRef.current) {
-                    // Update cached rect when size changes
-                    glassRef.current && (cachedRectRef.current = glassRef.current.getBoundingClientRect()), 
-                    // Debounce resize updates to match RAF timing (16ms)
-                    resizeDebounceTimeout && clearTimeout(resizeDebounceTimeout), resizeDebounceTimeout = setTimeout((() => updateGlassSize(!1)), 16);
-                    break;
-                }
-            })), resizeObserver.observe(glassRef.current);
-        } catch (error) {
-            console.warn("AtomixGlass: ResizeObserver not available, using window resize only", error);
-        }
-        return window.addEventListener("resize", debouncedResizeHandler, {
-            passive: !0
-        }), () => {
-            clearTimeout(initialTimeoutId), null !== rafId && cancelAnimationFrame(rafId), resizeTimeoutId && clearTimeout(resizeTimeoutId), 
-            resizeDebounceTimeout && clearTimeout(resizeDebounceTimeout), window.removeEventListener("resize", debouncedResizeHandler), 
-            resizeObserver?.disconnect();
+    } : calculateElasticTranslation()), [ calculateElasticTranslation, effectiveWithoutEffects ]), directionalScale = useMemo((() => effectiveWithoutEffects ? "scale(1)" : calculateDirectionalScale()), [ calculateDirectionalScale, effectiveWithoutEffects ]), transformStyle = useMemo((() => effectiveWithoutEffects ? isActive && Boolean(onClick) ? "scale(0.98)" : "scale(1)" : `translate(${elasticTranslation.x}px, ${elasticTranslation.y}px) ${isActive && Boolean(onClick) ? "scale(0.96)" : directionalScale}`), [ elasticTranslation, isActive, onClick, directionalScale, effectiveWithoutEffects ]), handleGlobalMousePosition = useCallback((globalPos => {
+        if (externalGlobalMousePosition && externalMouseOffset) return;
+        if (effectiveWithoutEffects) return;
+        const container = mouseContainer?.current || glassRef.current;
+        if (!container) return;
+        // Use cached rect if available, otherwise get new one
+                let rect = cachedRectRef.current;
+        if (rect && 0 !== rect.width && 0 !== rect.height || (rect = container.getBoundingClientRect(), 
+        cachedRectRef.current = rect), 0 === rect.width || 0 === rect.height) return;
+        const center = calculateElementCenter(rect), newOffset = {
+            x: (globalPos.x - center.x) / rect.width * 100,
+            y: (globalPos.y - center.y) / rect.height * 100
         };
-    }), [ effectiveCornerRadius, glassRef ]);
-    // OverLight config
+        // Calculate offset relative to this container
+                // Store in refs instead of state
+        internalMouseOffsetRef.current = newOffset, internalGlobalMousePositionRef.current = globalPos, 
+        // Imperative style update
+        updateAtomixGlassStyles(wrapperRef?.current || null, glassRef.current, {
+            mouseOffset: newOffset,
+            globalMousePosition: globalPos,
+            glassSize: glassSize,
+            isHovered: isHovered,
+            isActive: isActive,
+            isOverLight: baseOverLightConfig.isOverLight,
+            baseOverLightConfig: baseOverLightConfig,
+            effectiveBorderRadius: effectiveBorderRadius,
+            effectiveWithoutEffects: effectiveWithoutEffects,
+            effectiveReducedMotion: effectiveReducedMotion,
+            elasticity: elasticity,
+            directionalScale: isActive && Boolean(onClick) ? "scale(0.96)" : "scale(1)",
+            // Simplified directional scale for fast path
+            onClick: onClick,
+            withLiquidBlur: withLiquidBlur,
+            blurAmount: blurAmount,
+            saturation: saturation,
+            padding: padding
+        });
+    }), [ mouseContainer, glassRef, wrapperRef, externalGlobalMousePosition, externalMouseOffset, effectiveWithoutEffects, glassSize, isHovered, isActive, baseOverLightConfig, effectiveBorderRadius, effectiveReducedMotion, elasticity, onClick, withLiquidBlur, blurAmount, saturation, padding ]);
     /**
-   * Get effective overLight value based on configuration
-   * - boolean: returns the boolean value directly
-   * - 'auto': returns detectedOverLight (auto-detected from background)
-   * - object: returns detectedOverLight (auto-detected, but config object provides customization)
-   */
-    const getEffectiveOverLight = useCallback((() => "boolean" == typeof overLight ? overLight : ("auto" === overLight || "object" == typeof overLight && null !== overLight) && detectedOverLight), [ overLight, detectedOverLight ]), validateConfigValue = useCallback(((value, min, max, defaultValue) => "number" != typeof value || isNaN(value) || !isFinite(value) ? defaultValue : Math.min(max, Math.max(min, value))), []), overLightConfig = useMemo((() => {
-        const isOverLight = getEffectiveOverLight(), mouseInfluence = calculateMouseInfluence(mouseOffset), hoverIntensity = isHovered ? 1.4 : 1, activeIntensity = isActive ? 1.6 : 1, baseConfig = {
-            isOverLight: isOverLight,
-            threshold: .7,
-            opacity: isOverLight ? Math.min(.6, Math.max(.2, .5 * hoverIntensity * activeIntensity)) : 0,
-            contrast: Math.min(1.6, Math.max(1, 1.4 + .1 * mouseInfluence)),
-            brightness: Math.min(1.1, Math.max(.8, .9 + .05 * mouseInfluence)),
-            saturationBoost: 1.3,
-            // Fixed value — dynamic saturation amplifies perceived displacement
-            shadowIntensity: Math.min(1.2, Math.max(.5, .9 + .2 * mouseInfluence)),
-            borderOpacity: Math.min(1, Math.max(.3, .7 + .1 * mouseInfluence))
+   * Validate and clamp a numeric config value
+   */    
+    // Subscribe to shared mouse tracker
+    useEffect((() => {
+        if (externalGlobalMousePosition && externalMouseOffset) return;
+        if (effectiveWithoutEffects) return;
+        const unsubscribe = globalMouseTracker.subscribe(handleGlobalMousePosition), container = mouseContainer?.current || glassRef.current;
+        let resizeObserver = null;
+        return container && "undefined" != typeof ResizeObserver && (resizeObserver = new ResizeObserver((() => {
+            null !== updateRectRef.current && cancelAnimationFrame(updateRectRef.current), updateRectRef.current = requestAnimationFrame((() => {
+                const container = mouseContainer?.current || glassRef.current;
+                container && (cachedRectRef.current = container.getBoundingClientRect()), updateRectRef.current = null;
+            }));
+        })), resizeObserver.observe(container)), () => {
+            unsubscribe(), null !== updateRectRef.current && (cancelAnimationFrame(updateRectRef.current), 
+            updateRectRef.current = null), resizeObserver && resizeObserver.disconnect();
         };
-        if ("object" == typeof overLight && null !== overLight) {
-            const objConfig = overLight, validatedThreshold = validateConfigValue(objConfig.threshold, .1, 1, baseConfig.threshold), validatedOpacity = validateConfigValue(objConfig.opacity, .1, 1, baseConfig.opacity), validatedContrast = validateConfigValue(objConfig.contrast, .5, 2.5, baseConfig.contrast), validatedBrightness = validateConfigValue(objConfig.brightness, .5, 2, baseConfig.brightness), validatedSaturationBoost = validateConfigValue(objConfig.saturationBoost, .5, 3, baseConfig.saturationBoost), finalConfig = {
-                ...baseConfig,
-                threshold: validatedThreshold,
-                opacity: validatedOpacity * hoverIntensity * activeIntensity,
-                contrast: Math.min(1.6, validatedContrast + .1 * mouseInfluence),
-                brightness: Math.min(1.1, validatedBrightness + .05 * mouseInfluence),
-                saturationBoost: validatedSaturationBoost
-            };
-            // Validate and apply object config values with proper clamping
-                        return "undefined" == typeof process || process.env, finalConfig;
-        }
-        // Debug logging for non-object configs
-                return "undefined" == typeof process || process.env, baseConfig;
-    }), [ overLight, getEffectiveOverLight, mouseOffset, isHovered, isActive, validateConfigValue, debugOverLight ]), handleMouseEnter = useCallback((() => setIsHovered(!0)), []), handleMouseLeave = useCallback((() => setIsHovered(!1)), []), handleMouseDown = useCallback((() => setIsActive(!0)), []), handleMouseUp = useCallback((() => setIsActive(!1)), []), handleKeyDown = useCallback((e => {
+    }), [ handleGlobalMousePosition, mouseContainer, glassRef, externalGlobalMousePosition, externalMouseOffset, effectiveWithoutEffects ]), 
+    // Also call updateStyles on other state changes (hover, active, etc)
+    useEffect((() => {
+        updateAtomixGlassStyles(wrapperRef?.current || null, glassRef.current, {
+            mouseOffset: externalMouseOffset || internalMouseOffsetRef.current,
+            globalMousePosition: externalGlobalMousePosition || internalGlobalMousePositionRef.current,
+            glassSize: glassSize,
+            isHovered: isHovered,
+            isActive: isActive,
+            isOverLight: baseOverLightConfig.isOverLight,
+            baseOverLightConfig: baseOverLightConfig,
+            effectiveBorderRadius: effectiveBorderRadius,
+            effectiveWithoutEffects: effectiveWithoutEffects,
+            effectiveReducedMotion: effectiveReducedMotion,
+            elasticity: elasticity,
+            directionalScale: directionalScale,
+            onClick: onClick,
+            withLiquidBlur: withLiquidBlur,
+            blurAmount: blurAmount,
+            saturation: saturation,
+            padding: padding
+        });
+    }), [ isHovered, isActive, glassSize, baseOverLightConfig, effectiveBorderRadius, effectiveWithoutEffects, effectiveReducedMotion, elasticity, directionalScale, wrapperRef, glassRef, externalMouseOffset, externalGlobalMousePosition, withLiquidBlur, blurAmount, saturation, padding, onClick ]);
+    // Event handlers
+    const handleMouseEnter = useCallback((() => setIsHovered(!0)), []), handleMouseLeave = useCallback((() => setIsHovered(!1)), []), handleMouseDown = useCallback((() => setIsActive(!0)), []), handleMouseUp = useCallback((() => setIsActive(!1)), []), handleMouseMove = useCallback((_e => {}), []), handleKeyDown = useCallback((e => {
         !onClick || "Enter" !== e.key && " " !== e.key || (e.preventDefault(), onClick());
-    }), [ onClick ]), handleMouseMove = useCallback((_e => {}), []);
-    /**
-   * Validate and clamp a numeric config value
-   * @param value - The value to validate
-   * @param min - Minimum allowed value
-   * @param max - Maximum allowed value
-   * @param defaultValue - Default value if validation fails
-   * @returns Validated and clamped value
-   */    return {
-        // State
+    }), [ onClick ]);
+    return {
         isHovered: isHovered,
         isActive: isActive,
         glassSize: glassSize,
-        dynamicCornerRadius: dynamicCornerRadius,
-        effectiveCornerRadius: effectiveCornerRadius,
+        dynamicBorderRadius: dynamicBorderRadius,
+        effectiveBorderRadius: effectiveBorderRadius,
         effectiveReducedMotion: effectiveReducedMotion,
         effectiveHighContrast: effectiveHighContrast,
-        effectiveDisableEffects: effectiveDisableEffects,
+        effectiveWithoutEffects: effectiveWithoutEffects,
         detectedOverLight: detectedOverLight,
         globalMousePosition: globalMousePosition,
+        // This is now static (refs or props) unless prop changes
         mouseOffset: mouseOffset,
-        // OverLight config
+        // This is now static (refs or props) unless prop changes
         overLightConfig: overLightConfig,
-        // Transform calculations
         elasticTranslation: elasticTranslation,
         directionalScale: directionalScale,
         transformStyle: transformStyle,
-        // Event handlers
         handleMouseEnter: handleMouseEnter,
         handleMouseLeave: handleMouseLeave,
         handleMouseDown: handleMouseDown,
@@ -2596,7 +3099,7 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
  *
  * @example
  * // Manual border-radius override
- * <AtomixGlass cornerRadius={20}>
+ * <AtomixGlass borderRadius={20}>
  *   <div>Content with 20px glass radius</div>
  * </AtomixGlass>
  *
@@ -2637,37 +3140,48 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
  * <AtomixGlass overLight="auto" debugOverLight={true}>
  *   <div>Content with debug logging enabled</div>
  * </AtomixGlass>
- */ function AtomixGlass({children: children, displacementScale: displacementScale = ATOMIX_GLASS.DEFAULTS.DISPLACEMENT_SCALE, blurAmount: blurAmount = ATOMIX_GLASS.DEFAULTS.BLUR_AMOUNT, saturation: saturation = ATOMIX_GLASS.DEFAULTS.SATURATION, aberrationIntensity: aberrationIntensity = ATOMIX_GLASS.DEFAULTS.ABERRATION_INTENSITY, elasticity: elasticity = ATOMIX_GLASS.DEFAULTS.ELASTICITY, cornerRadius: cornerRadius, globalMousePosition: externalGlobalMousePosition, mouseOffset: externalMouseOffset, mouseContainer: mouseContainer = null, className: className = "", padding: padding = ATOMIX_GLASS.DEFAULTS.PADDING, overLight: overLight = ATOMIX_GLASS.DEFAULTS.OVER_LIGHT, style: style = {}, mode: mode = ATOMIX_GLASS.DEFAULTS.MODE, onClick: onClick, shaderVariant: shaderVariant = "liquidGlass", "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, role: role, tabIndex: tabIndex, reducedMotion: reducedMotion = !1, highContrast: highContrast = !1, disableEffects: disableEffects = !1, enableLiquidBlur: enableLiquidBlur = !1, enableBorderEffect: enableBorderEffect = !0, enableOverLightLayers: enableOverLightLayers = ATOMIX_GLASS.DEFAULTS.ENABLE_OVER_LIGHT_LAYERS, enablePerformanceMonitoring: enablePerformanceMonitoring = !1, debugCornerRadius: debugCornerRadius = !1, debugOverLight: debugOverLight = !1}) {
-    const glassRef = useRef(null), contentRef = useRef(null), {isHovered: isHovered, isActive: isActive, glassSize: glassSize, effectiveCornerRadius: effectiveCornerRadius, effectiveReducedMotion: effectiveReducedMotion, effectiveHighContrast: effectiveHighContrast, effectiveDisableEffects: effectiveDisableEffects, overLightConfig: overLightConfig, globalMousePosition: globalMousePosition, mouseOffset: mouseOffset, transformStyle: transformStyle, handleMouseEnter: handleMouseEnter, handleMouseLeave: handleMouseLeave, handleMouseDown: handleMouseDown, handleMouseUp: handleMouseUp, handleKeyDown: handleKeyDown} = useAtomixGlass({
+ */ function AtomixGlass({children: children, displacementScale: displacementScale = ATOMIX_GLASS.DEFAULTS.DISPLACEMENT_SCALE, blurAmount: blurAmount = ATOMIX_GLASS.DEFAULTS.BLUR_AMOUNT, saturation: saturation = ATOMIX_GLASS.DEFAULTS.SATURATION, aberrationIntensity: aberrationIntensity = ATOMIX_GLASS.DEFAULTS.ABERRATION_INTENSITY, elasticity: elasticity = ATOMIX_GLASS.DEFAULTS.ELASTICITY, borderRadius: borderRadius, globalMousePosition: externalGlobalMousePosition, mouseOffset: externalMouseOffset, mouseContainer: mouseContainer = null, className: className = "", padding: padding = ATOMIX_GLASS.DEFAULTS.PADDING, overLight: overLight = ATOMIX_GLASS.DEFAULTS.OVER_LIGHT, style: style = {}, mode: mode = ATOMIX_GLASS.DEFAULTS.MODE, onClick: onClick, shaderVariant: shaderVariant = "liquidGlass", "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, role: role, tabIndex: tabIndex, reducedMotion: reducedMotion = !1, highContrast: highContrast = !1, withoutEffects: withoutEffects = !1, withLiquidBlur: withLiquidBlur = !1, withBorder: withBorder = !0, withOverLightLayers: withOverLightLayers = ATOMIX_GLASS.DEFAULTS.ENABLE_OVER_LIGHT_LAYERS, debugPerformance: debugPerformance = !1, debugBorderRadius: debugBorderRadius = !1, debugOverLight: debugOverLight = !1, height: height, width: width, ...rest}) {
+    const glassRef = useRef(null), contentRef = useRef(null), {isHovered: isHovered, isActive: isActive, glassSize: glassSize, effectiveBorderRadius: effectiveBorderRadius, effectiveReducedMotion: effectiveReducedMotion, effectiveHighContrast: effectiveHighContrast, effectiveWithoutEffects: effectiveWithoutEffects, overLightConfig: overLightConfig, globalMousePosition: globalMousePosition, mouseOffset: mouseOffset, transformStyle: transformStyle, handleMouseEnter: handleMouseEnter, handleMouseLeave: handleMouseLeave, handleMouseDown: handleMouseDown, handleMouseUp: handleMouseUp, handleKeyDown: handleKeyDown} = useAtomixGlass({
         glassRef: glassRef,
         contentRef: contentRef,
-        cornerRadius: cornerRadius,
+        borderRadius: borderRadius,
         globalMousePosition: externalGlobalMousePosition,
         mouseOffset: externalMouseOffset,
         mouseContainer: mouseContainer,
         overLight: overLight,
         reducedMotion: reducedMotion,
         highContrast: highContrast,
-        disableEffects: disableEffects,
+        withoutEffects: withoutEffects,
         elasticity: elasticity,
         onClick: onClick,
-        debugCornerRadius: debugCornerRadius,
+        debugBorderRadius: debugBorderRadius,
         debugOverLight: debugOverLight,
-        enablePerformanceMonitoring: enablePerformanceMonitoring,
-        children: children
-    }), isOverLight = useMemo((() => overLightConfig?.isOverLight), [ overLight ]), shouldRenderOverLightLayers = enableOverLightLayers && isOverLight, baseStyle = {
+        debugPerformance: debugPerformance,
+        children: children,
+        blurAmount: blurAmount,
+        saturation: saturation,
+        withLiquidBlur: withLiquidBlur,
+        padding: padding,
+        style: style
+    }), isOverLight = useMemo((() => overLightConfig?.isOverLight), [ overLight ]), shouldRenderOverLightLayers = withOverLightLayers && isOverLight, baseStyle = {
         ...style,
-        ...!effectiveDisableEffects && {
+        ...!effectiveWithoutEffects && {
             transform: transformStyle
         }
-    }, componentClassName = [ ATOMIX_GLASS.BASE_CLASS, effectiveReducedMotion && `${ATOMIX_GLASS.BASE_CLASS}--reduced-motion`, effectiveHighContrast && `${ATOMIX_GLASS.BASE_CLASS}--high-contrast`, effectiveDisableEffects && `${ATOMIX_GLASS.BASE_CLASS}--disabled-effects`, className ].filter(Boolean).join(" "), positionStyles = useMemo((() => ({
+    }, componentClassName = [ ATOMIX_GLASS.BASE_CLASS, effectiveReducedMotion && `${ATOMIX_GLASS.BASE_CLASS}--reduced-motion`, effectiveHighContrast && `${ATOMIX_GLASS.BASE_CLASS}--high-contrast`, effectiveWithoutEffects && `${ATOMIX_GLASS.BASE_CLASS}--disabled-effects`, className ].filter(Boolean).join(" "), positionStyles = useMemo((() => ({
         position: style.position || "absolute",
         top: style.top || 0,
         left: style.left || 0
-    })), [ style.position, style.top, style.left ]), adjustedSize = useMemo((() => ({
-        width: "fixed" !== style.position ? "100%" : style.width ? style.width : Math.max(glassSize.width, 0),
-        height: "fixed" !== style.position ? "100%" : style.height ? style.height : Math.max(glassSize.height, 0)
-    })), [ style.position, style.width, style.height, glassSize.width, glassSize.height ]), gradientValues = useMemo((() => {
+    })), [ style.position, style.top, style.left ]), adjustedSize = useMemo((() => {
+        const resolveSize = (propValue, styleValue, measuredSize) => {
+            const explicitSize = propValue ?? styleValue;
+            return void 0 !== explicitSize ? "number" == typeof explicitSize ? `${explicitSize}px` : explicitSize : "fixed" === positionStyles.position ? `${Math.max(measuredSize, 0)}px` : "100%";
+        };
+        return {
+            width: resolveSize(width, style.width, glassSize.width),
+            height: resolveSize(height, style.height, glassSize.height)
+        };
+    }), [ width, height, style.width, style.height, positionStyles.position, glassSize.width, glassSize.height ]), gradientValues = useMemo((() => {
         const mx = mouseOffset.x, my = mouseOffset.y, absMx = Math.abs(mx), absMy = Math.abs(my), GRADIENT = ATOMIX_GLASS.CONSTANTS.GRADIENT;
         return {
             borderGradientAngle: GRADIENT.BASE_ANGLE + mx * GRADIENT.ANGLE_MULTIPLIER,
@@ -2709,13 +3223,13 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
     }), [ isHovered, isActive, isOverLight, overLightConfig.opacity ]), glassVars = useMemo((() => {
         const whiteColor = ATOMIX_GLASS.CONSTANTS.PALETTE.WHITE, blackColor = ATOMIX_GLASS.CONSTANTS.PALETTE.BLACK, {borderGradientAngle: borderGradientAngle, borderStop1: borderStop1, borderStop2: borderStop2, borderOpacities: borderOpacities, hoverPositions: hoverPositions, basePosition: basePosition, mx: mx, my: my, absMx: absMx, absMy: absMy} = gradientValues, configBorderOpacity = overLightConfig?.borderOpacity ?? 1;
         return {
-            "--atomix-glass-radius": `${effectiveCornerRadius}px`,
+            "--atomix-glass-radius": `${effectiveBorderRadius}px`,
             "--atomix-glass-transform": transformStyle || "none",
             "--atomix-glass-position": positionStyles.position,
             "--atomix-glass-top": "fixed" !== positionStyles.top ? `${positionStyles.top}px` : "0",
             "--atomix-glass-left": "fixed" !== positionStyles.left ? `${positionStyles.left}px` : "0",
-            "--atomix-glass-width": "fixed" !== style.position ? adjustedSize.width : `${adjustedSize.width}px`,
-            "--atomix-glass-height": "fixed" !== style.position ? adjustedSize.height : `${adjustedSize.height}px`,
+            "--atomix-glass-width": adjustedSize.width,
+            "--atomix-glass-height": adjustedSize.height,
             "--atomix-glass-border-width": "var(--atomix-spacing-0-5, 0.09375rem)",
             "--atomix-glass-blend-mode": isOverLight ? "multiply" : "overlay",
             "--atomix-glass-border-gradient-1": `linear-gradient(${borderGradientAngle}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${(borderOpacities[0] ?? 1) * configBorderOpacity}) ${borderStop1}%, rgba(${whiteColor}, ${(borderOpacities[1] ?? 1) * configBorderOpacity}) ${borderStop2}%, rgba(${whiteColor}, 0) 100%)`,
@@ -2731,24 +3245,25 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
             "--atomix-glass-overlay-opacity": opacityValues.over,
             "--atomix-glass-overlay-gradient": isOverLight ? `radial-gradient(circle at ${basePosition.x}% ${basePosition.y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_START_BASE + absMx * ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_START_MULTIPLIER}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_MID_STOP}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_END_BASE + absMy * ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_END_MULTIPLIER}) 100%)` : `rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.WHITE_OPACITY})`
         };
-    }), [ gradientValues, opacityValues, effectiveCornerRadius, transformStyle, positionStyles, adjustedSize, style.position, isOverLight, overLightConfig.borderOpacity ]), renderBackgroundLayer = layerType => jsx("div", {
+    }), [ gradientValues, opacityValues, effectiveBorderRadius, transformStyle, positionStyles, adjustedSize, isOverLight, overLightConfig.borderOpacity ]), renderBackgroundLayer = layerType => jsx("div", {
         className: [ ATOMIX_GLASS.BACKGROUND_LAYER_CLASS, "dark" === layerType ? ATOMIX_GLASS.BACKGROUND_LAYER_DARK_CLASS : ATOMIX_GLASS.BACKGROUND_LAYER_BLACK_CLASS, isOverLight ? ATOMIX_GLASS.BACKGROUND_LAYER_OVER_LIGHT_CLASS : ATOMIX_GLASS.BACKGROUND_LAYER_HIDDEN_CLASS ].filter(Boolean).join(" "),
         style: {
             ...positionStyles,
             height: adjustedSize.height,
             width: adjustedSize.width,
-            borderRadius: `${effectiveCornerRadius}px`,
+            borderRadius: `${effectiveBorderRadius}px`,
             transform: baseStyle.transform
         }
     });
     return jsxs("div", {
+        ...rest,
         className: componentClassName,
         style: glassVars,
         role: role || (onClick ? "button" : void 0),
         tabIndex: onClick ? tabIndex ?? 0 : tabIndex,
         "aria-label": ariaLabel,
         "aria-describedby": ariaDescribedBy,
-        "aria-disabled": !(!onClick || !effectiveDisableEffects) || !onClick && void 0,
+        "aria-disabled": !(!onClick || !effectiveWithoutEffects) || !onClick && void 0,
         "aria-pressed": !(!onClick || !isActive) || !onClick && void 0,
         onKeyDown: onClick ? handleKeyDown : void 0,
         children: [ jsx(AtomixGlassContainer, {
@@ -2756,18 +3271,18 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
             contentRef: contentRef,
             className: className,
             style: baseStyle,
-            cornerRadius: effectiveCornerRadius,
-            displacementScale: effectiveDisableEffects ? 0 : "shader" === mode ? displacementScale * ATOMIX_GLASS.CONSTANTS.MULTIPLIERS.SHADER_DISPLACEMENT : isOverLight ? displacementScale * ATOMIX_GLASS.CONSTANTS.MULTIPLIERS.OVER_LIGHT_DISPLACEMENT : displacementScale,
-            blurAmount: effectiveDisableEffects ? 0 : blurAmount,
+            borderRadius: effectiveBorderRadius,
+            displacementScale: effectiveWithoutEffects ? 0 : "shader" === mode ? displacementScale * ATOMIX_GLASS.CONSTANTS.MULTIPLIERS.SHADER_DISPLACEMENT : isOverLight ? displacementScale * ATOMIX_GLASS.CONSTANTS.MULTIPLIERS.OVER_LIGHT_DISPLACEMENT : displacementScale,
+            blurAmount: effectiveWithoutEffects ? 0 : blurAmount,
             saturation: effectiveHighContrast ? ATOMIX_GLASS.CONSTANTS.SATURATION.HIGH_CONTRAST : isOverLight ? saturation * overLightConfig.saturationBoost : saturation,
-            aberrationIntensity: effectiveDisableEffects ? 0 : "shader" === mode ? aberrationIntensity * ATOMIX_GLASS.CONSTANTS.MULTIPLIERS.SHADER_ABERRATION : aberrationIntensity,
+            aberrationIntensity: effectiveWithoutEffects ? 0 : "shader" === mode ? aberrationIntensity * ATOMIX_GLASS.CONSTANTS.MULTIPLIERS.SHADER_ABERRATION : aberrationIntensity,
             glassSize: glassSize,
             padding: padding,
-            mouseOffset: effectiveDisableEffects ? {
+            mouseOffset: effectiveWithoutEffects ? {
                 x: 0,
                 y: 0
             } : mouseOffset,
-            globalMousePosition: effectiveDisableEffects ? {
+            globalMousePosition: effectiveWithoutEffects ? {
                 x: 0,
                 y: 0
             } : globalMousePosition,
@@ -2787,11 +3302,11 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
             onClick: onClick,
             mode: mode,
             transform: baseStyle.transform,
-            effectiveDisableEffects: effectiveDisableEffects,
+            effectiveWithoutEffects: effectiveWithoutEffects,
             effectiveReducedMotion: effectiveReducedMotion,
             shaderVariant: shaderVariant,
             elasticity: elasticity,
-            enableLiquidBlur: enableLiquidBlur,
+            withLiquidBlur: withLiquidBlur,
             children: children
         }), Boolean(onClick) && jsxs(Fragment, {
             children: [ jsx("div", {
@@ -2813,17 +3328,87 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
                     background: `radial-gradient(circle at ${ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.POSITION_X}% ${ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.POSITION_Y}%, rgba(255, 255, 255, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.WHITE_OPACITY}) 0%, transparent ${ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.STOP}%)`
                 }
             }) ]
-        }), enableBorderEffect && jsxs(Fragment, {
+        }), withBorder && jsxs(Fragment, {
             children: [ jsx("span", {
-                className: ATOMIX_GLASS.BORDER_1_CLASS
+                className: ATOMIX_GLASS.BORDER_1_CLASS,
+                style: {
+                    width: glassSize.width,
+                    height: glassSize.height
+                }
             }), jsx("span", {
-                className: ATOMIX_GLASS.BORDER_2_CLASS
+                className: ATOMIX_GLASS.BORDER_2_CLASS,
+                style: {
+                    width: glassSize.width,
+                    height: glassSize.height
+                }
             }) ]
         }) ]
     });
 }
 
-const Accordion =  memo((({title: title, children: children, defaultOpen: defaultOpen = !1, isOpen: controlledOpen, onOpenChange: onOpenChange, onOpen: onOpen, onClose: onClose, disabled: disabled = !1, iconPosition: iconPosition = "right", icon: icon, className: className = "", style: style, glass: glass}) => {
+// Default icon
+const DefaultIcon = () => jsx("i", {
+    className: "c-accordion__icon",
+    "aria-hidden": "true",
+    children: jsx("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": "true",
+        focusable: "false",
+        children: jsx("polyline", {
+            points: "6 9 12 15 18 9"
+        })
+    })
+}), AccordionHeader =  forwardRef((({title: title, icon: icon, iconPosition: iconPosition = "right", isOpen: isOpen, children: children, className: className = "", ...props}, ref) => {
+    // Determine icon to render. Explicit check for undefined to allow null/false to hide icon.
+    const iconElement = void 0 === icon ? jsx(DefaultIcon, {}) : icon;
+    return jsxs("button", {
+        ref: ref,
+        type: "button",
+        className: className,
+        ...props,
+        children: [ title && jsx("span", {
+            className: "c-accordion__title",
+            children: title
+        }), children, iconElement ]
+    });
+}));
+
+AccordionHeader.displayName = "AccordionHeader";
+
+const AccordionBody =  forwardRef((({children: children, className: className = "", panelRef: panelRef, contentRef: contentRef, ...props}, ref) => {
+    const mergedPanelRef = React.useMemo((() => 
+    // Helper to merge refs
+    function(...refs) {
+        return node => {
+            refs.forEach((ref => {
+                "function" == typeof ref ? ref(node) : null != ref && (ref.current = node);
+            }));
+        };
+    }(ref, panelRef)), [ ref, panelRef ]);
+    return jsx("div", {
+        ref: mergedPanelRef,
+        className: className,
+        role: "region",
+        ...props,
+        children: jsx("div", {
+            className: ACCORDION.SELECTORS.BODY.replace(".", ""),
+            ref: contentRef,
+            children: children
+        })
+    });
+}));
+
+AccordionBody.displayName = "AccordionBody";
+
+const AccordionImpl =  memo((({title: title, children: children, defaultOpen: defaultOpen = !1, isOpen: controlledOpen, onOpenChange: onOpenChange, onOpen: onOpen, onClose: onClose, disabled: disabled = !1, iconPosition: iconPosition = "right", icon: icon, className: className = "", style: style, glass: glass}) => {
     // Generate unique IDs for accessibility
     const instanceId = useId(), buttonId = `accordion-header-${instanceId}`, panelId = `accordion-panel-${instanceId}`, {state: state, toggle: toggle, updatePanelHeight: updatePanelHeight, panelRef: panelRef, contentRef: contentRef, generateClassNames: generateClassNames, generateHeaderClassNames: generateHeaderClassNames} = useAccordion({
         defaultOpen: defaultOpen,
@@ -2833,53 +3418,59 @@ const Accordion =  memo((({title: title, children: children, defaultOpen: defaul
         onOpenChange: onOpenChange,
         onOpen: onOpen,
         onClose: onClose
-    }), defaultIcon = jsx("i", {
-        className: "c-accordion__icon",
-        "aria-hidden": "true",
-        children: jsx("svg", {
-            xmlns: "http://www.w3.org/2000/svg",
-            width: "24",
-            height: "24",
-            viewBox: "0 0 24 24",
-            fill: "none",
-            stroke: "currentColor",
-            strokeWidth: "2",
-            strokeLinecap: "round",
-            strokeLinejoin: "round",
-            "aria-hidden": "true",
-            focusable: "false",
-            children: jsx("polyline", {
-                points: "6 9 12 15 18 9"
-            })
-        })
-    }), accordionContent = jsxs("div", {
+    }), headerClassNames = generateHeaderClassNames(), panelClassNames = ACCORDION.SELECTORS.PANEL.replace(".", ""), hasCompoundComponents = React.Children.toArray(children).some((child => {
+        var _context;
+        
+        return React.isValidElement(child) && _includesInstanceProperty(_context = [ "AccordionHeader", "AccordionBody" ]).call(_context, child.type.displayName);
+    })), content = jsx("div", {
         className: generateClassNames(className) + (glass ? " c-accordion--glass" : ""),
         style: style,
-        children: [ jsxs("button", {
-            id: buttonId,
-            className: generateHeaderClassNames(),
-            onClick: toggle,
-            "aria-expanded": state.isOpen,
-            "aria-controls": panelId,
-            "aria-disabled": disabled,
-            disabled: disabled,
-            type: "button",
-            children: [ jsx("span", {
-                className: "c-accordion__title",
-                children: title
-            }), icon || defaultIcon ]
-        }), jsx("div", {
-            id: panelId,
-            className: ACCORDION.SELECTORS.PANEL.replace(".", ""),
-            ref: panelRef,
-            role: "region",
-            "aria-labelledby": buttonId,
-            children: jsx("div", {
-                className: ACCORDION.SELECTORS.BODY.replace(".", ""),
-                ref: contentRef,
+        children: hasCompoundComponents ? React.Children.map(children, (child => {
+            if ( React.isValidElement(child)) {
+                if ("AccordionHeader" === child.type.displayName) 
+                return React.cloneElement(child, {
+                    id: buttonId,
+                    className: `${headerClassNames} ${child.props.className || ""}`.trim(),
+                    onClick: e => {
+                        toggle(), child.props.onClick?.(e);
+                    },
+                    "aria-expanded": state.isOpen,
+                    "aria-controls": panelId,
+                    "aria-disabled": disabled,
+                    disabled: disabled,
+                    iconPosition: child.props.iconPosition || iconPosition
+                });
+                if ("AccordionBody" === child.type.displayName) 
+                return React.cloneElement(child, {
+                    id: panelId,
+                    className: `${panelClassNames} ${child.props.className || ""}`.trim(),
+                    "aria-labelledby": buttonId,
+                    panelRef: panelRef,
+                    contentRef: contentRef
+                });
+            }
+            return child;
+        })) : jsxs(Fragment, {
+            children: [ jsx(AccordionHeader, {
+                id: buttonId,
+                className: headerClassNames,
+                onClick: toggle,
+                "aria-expanded": state.isOpen,
+                "aria-controls": panelId,
+                "aria-disabled": disabled,
+                disabled: disabled,
+                title: title,
+                icon: icon,
+                iconPosition: iconPosition
+            }), jsx(AccordionBody, {
+                id: panelId,
+                className: panelClassNames,
+                "aria-labelledby": buttonId,
+                panelRef: panelRef,
+                contentRef: contentRef,
                 children: children
-            })
-        }) ]
+            }) ]
+        })
     });
     if (glass) {
         // Default glass settings for accordions
@@ -2892,16 +3483,20 @@ const Accordion =  memo((({title: title, children: children, defaultOpen: defaul
         };
         return jsx(AtomixGlass, {
             ...glassProps,
-            children: accordionContent
+            children: content
         });
     }
-    return accordionContent;
+    return content;
 }));
 
-// Set display name for debugging
-Accordion.displayName = "Accordion";
+AccordionImpl.displayName = "Accordion";
+
+// Attach subcomponents
+const AccordionWithSubcomponents = AccordionImpl;
 
-const AtomixLogo = ({height: height = 24, width: width = 24, color: color = "currentColor", ...props}) => jsxs("svg", {
+AccordionWithSubcomponents.Header = AccordionHeader, AccordionWithSubcomponents.Body = AccordionBody;
+
+const Accordion = AccordionWithSubcomponents, AtomixLogo = ({height: height = 24, width: width = 24, color: color = "currentColor", ...props}) => jsxs("svg", {
     width: width,
     height: height,
     viewBox: "0 0 24 24",
@@ -3230,8 +3825,6 @@ const AtomixLogo = ({height: height = 24, width: width = 24, color: color = "cur
     // Convert string size to pixel value if needed
 };
 
-// Adapted from https://github.com/shuding/liquid-glass
-// Constants
 Icon.displayName = "Icon";
 
 const Avatar =  memo((({src: src, alt: alt = "Avatar", initials: initials, icon: icon, size: size = "md", circle: circle = !1, className: className = "", disabled: disabled = !1, onClick: onClick, style: style, glass: glass}) => {
@@ -3349,7 +3942,7 @@ const Badge =  memo((({label: label, variant: variant = "primary", size: size =
         // Default glass settings for badges
         const defaultGlassProps = {
             displacementScale: 20,
-            cornerRadius: ref.current?.getBoundingClientRect().width ? ref.current?.getBoundingClientRect().width / 2 : 16,
+            borderRadius: ref.current?.getBoundingClientRect().width ? ref.current?.getBoundingClientRect().width / 2 : 16,
             className: "c-badge--glass",
             elasticity: 0
         }, glassProps = !0 === glass ? defaultGlassProps : {
@@ -3470,37 +4063,77 @@ const useBlock = () => ({
  * ```
  */ Block.displayName = "Block";
 
-const Breadcrumb =  memo((({items: items, divider: divider, className: className = "", "aria-label": ariaLabel = "Breadcrumb", LinkComponent: LinkComponent, style: style}) => {
+const BreadcrumbItem =  forwardRef((({children: children, href: href, active: active, icon: icon, onClick: onClick, className: className = "", style: style, linkAs: linkAs, linkProps: linkProps = {}, ...props}, ref) => {
+    const itemClasses = [ BREADCRUMB.CLASSES.ITEM, active ? BREADCRUMB.CLASSES.ACTIVE : "", className ].filter(Boolean).join(" "), linkContent = jsxs(Fragment, {
+        children: [ icon && jsx("span", {
+            className: "c-breadcrumb__icon",
+            children: icon
+        }), children ]
+    }), commonLinkProps = {
+        className: BREADCRUMB.CLASSES.LINK,
+        onClick: onClick,
+        style: style,
+        // Apply style to the link as per legacy behavior
+        ...linkProps
+    };
+    return jsx("li", {
+        ref: ref,
+        className: itemClasses,
+        style: style,
+        ...props,
+        children: href && !active ? 
+        // @ts-ignore - Dynamic components are tricky in TS without stricter types
+        jsx(linkAs || "a", {
+            href: href,
+            ...commonLinkProps,
+            children: linkContent
+        }) : jsx("span", {
+            className: BREADCRUMB.CLASSES.LINK,
+            children: linkContent
+        })
+    });
+}));
+
+BreadcrumbItem.displayName = "BreadcrumbItem";
+
+const Breadcrumb =  memo((function({items: items, divider: divider, className: className = "", "aria-label": ariaLabel = "Breadcrumb", LinkComponent: LinkComponent, style: style, children: children}) {
     const breadcrumbClasses = [ BREADCRUMB.CLASSES.BASE, className ].filter(Boolean).join(" ");
+    let content;
+    if (items && items.length > 0) 
+    // Legacy rendering
+    content = items.map(((item, index) => {
+        const isLast = index === items.length - 1;
+        return jsx(BreadcrumbItem, {
+            href: item.href,
+            active: item.active || isLast,
+            icon: item.icon,
+            onClick: item.onClick,
+            className: item.className,
+            style: item.style,
+            linkAs: LinkComponent,
+            children: item.label
+        }, index);
+    })); else {
+        // Compound rendering
+        const childrenCount = Children.count(children);
+        content = Children.map(children, ((child, index) => {
+            if ( isValidElement(child)) {
+                const isLast = index === childrenCount - 1, childProps = child.props, {active: active, linkAs: linkAs, ...otherProps} = childProps;
+                
+                return cloneElement(child, {
+                    active: active ?? (!!isLast || void 0),
+                    linkAs: linkAs ?? LinkComponent
+                });
+            }
+            return child;
+        }));
+    }
     return jsx("nav", {
         "aria-label": ariaLabel,
         style: style,
         children: jsx("ol", {
             className: breadcrumbClasses,
-            children: items.map(((item, index) => {
-                const isLast = index === items.length - 1, itemClasses = [ BREADCRUMB.CLASSES.ITEM, item.active || isLast ? BREADCRUMB.CLASSES.ACTIVE : "" ].filter(Boolean).join(" "), linkContent = jsxs(Fragment, {
-                    children: [ item.icon && jsx("span", {
-                        className: "c-breadcrumb__icon",
-                        children: item.icon
-                    }), item.label ]
-                }), linkProps = {
-                    href: item.href,
-                    className: BREADCRUMB.CLASSES.LINK,
-                    onClick: item.onClick,
-                    style: item.style
-                };
-                return jsx("li", {
-                    className: itemClasses,
-                    style: item.style,
-                    children: item.href && !item.active ? jsx(LinkComponent || "a", {
-                        ...linkProps,
-                        children: linkContent
-                    }) : jsx("span", {
-                        className: BREADCRUMB.CLASSES.LINK,
-                        children: linkContent
-                    })
-                }, index);
-            }))
+            children: content
         })
     });
 }));
@@ -3531,7 +4164,7 @@ function useSpinner(initialProps) {
     };
 }
 
-Breadcrumb.displayName = "Breadcrumb";
+Breadcrumb.displayName = "Breadcrumb", Breadcrumb.Item = BreadcrumbItem;
 
 const Spinner =  memo((({size: size = "md", variant: variant = "primary", fullscreen: fullscreen = !1, className: className = "", style: style, glass: glass, "aria-label": ariaLabel, role: role = "status"}) => {
     const {generateSpinnerClass: generateSpinnerClass} = useSpinner({
@@ -3557,7 +4190,7 @@ const Spinner =  memo((({size: size = "md", variant: variant = "primary", fullsc
         const defaultGlassProps = {
             displacementScale: 20,
             blurAmount: 1,
-            cornerRadius: 999,
+            borderRadius: 999,
             mode: "shader"
         }, glassProps = !0 === glass ? defaultGlassProps : {
             ...defaultGlassProps,
@@ -3596,7 +4229,7 @@ class ThemeNaming {
    * Convert camelCase to kebab-case for CSS variables
    * @param str - String to convert
    */    static camelToKebab(str) {
-        return str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
+        return str.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
     }
     /**
    * Convert kebab-case to camelCase for JavaScript properties
@@ -3748,431 +4381,129 @@ const Button =  React.memo( forwardRef((({label: label, children: children, onCl
     });
     if (glass) {
         // Default glass props
-        const defaultGlassProps = {
-            displacementScale: 20,
-            blurAmount: 0,
-            saturation: 200,
-            elasticity: 0
-        }, glassProps = !0 === glass ? defaultGlassProps : {
-            ...defaultGlassProps,
-            ...glass
-        };
-        return jsx(AtomixGlass, {
-            ...glassProps,
-            children: content
-        });
-    }
-    return content;
-})));
-
-Button.displayName = "Button";
-
-/**
- * ButtonGroup - A component for grouping buttons together
- *
- * Groups buttons together with proper border radius handling and spacing.
- * The buttons will be visually connected with shared borders.
- *
- * @example
- * ```tsx
- * <ButtonGroup>
- *   <Button label="Left" />
- *   <Button label="Middle" />
- *   <Button label="Right" />
- * </ButtonGroup>
- * ```
- */
-const ButtonGroup = ({children: children, className: className = "", style: style, "aria-label": ariaLabel, role: role = "group"}) => {
-    // Generate CSS classes
-    const buttonGroupClasses = [ BUTTON_GROUP.CLASSES.BASE, className ].filter(Boolean).join(" "), buttonChildren = Children.toArray(children).filter((child =>  isValidElement(child) && child.type === Button));
-    // Get valid Button children
-        return jsx("div", {
-        className: buttonGroupClasses,
-        style: style,
-        role: role,
-        "aria-label": ariaLabel,
-        children: buttonChildren.map(((child, index) =>  isValidElement(child) ?  cloneElement(child, {
-            key: index,
-            ...child.props
-        }) : null))
-    });
-};
-
-ButtonGroup.displayName = "ButtonGroup";
-
-var commonjsGlobal = "undefined" != typeof globalThis ? globalThis : "undefined" != typeof window ? window : "undefined" != typeof global ? global : "undefined" != typeof self ? self : {};
-
-function getDefaultExportFromCjs(x) {
-    return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x.default : x;
-}
-
-var 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);
-
-// `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;
-
-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]);
-
-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;
-    }
-    return value;
-}("__core-js_shared__", {});
-
-/* 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"
-});
-
-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");
+        const defaultGlassProps = {
+            displacementScale: 20,
+            blurAmount: 0,
+            saturation: 200,
+            elasticity: 0
+        }, glassProps = !0 === glass ? defaultGlassProps : {
+            ...defaultGlassProps,
+            ...glass
+        };
+        return jsx(AtomixGlass, {
+            ...glassProps,
+            children: content
+        });
     }
-    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;
+    return content;
+})));
 
-// `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]);
+Button.displayName = "Button";
+
+/**
+ * ButtonGroup - A component for grouping buttons together
+ *
+ * Groups buttons together with proper border radius handling and spacing.
+ * The buttons will be visually connected with shared borders.
+ *
+ * @example
+ * ```tsx
+ * <ButtonGroup>
+ *   <Button label="Left" />
+ *   <Button label="Middle" />
+ *   <Button label="Right" />
+ * </ButtonGroup>
+ * ```
+ */
+const ButtonGroup = ({children: children, className: className = "", style: style, "aria-label": ariaLabel, role: role = "group"}) => {
+    // Generate CSS classes
+    const buttonGroupClasses = [ BUTTON_GROUP.CLASSES.BASE, className ].filter(Boolean).join(" "), buttonChildren = Children.toArray(children).filter((child =>  isValidElement(child) && child.type === Button));
+    // Get valid Button children
+        return jsx("div", {
+        className: buttonGroupClasses,
+        style: style,
+        role: role,
+        "aria-label": ariaLabel,
+        children: buttonChildren.map(((child, index) =>  isValidElement(child) ?  cloneElement(child, {
+            key: index,
+            ...child.props
+        }) : null))
+    });
 };
 
-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;
+ButtonGroup.displayName = "ButtonGroup";
 
-// `Object.defineProperty` method
-// https://tc39.es/ecma262/#sec-object.defineproperty
-objectDefineProperty.f = DESCRIPTORS$1 ? V8_PROTOTYPE_DEFINE_BUG ? function(O, P, Attributes) {
-    if (anObject(O), P = toPropertyKey(P), anObject(Attributes), "function" == typeof O && "prototype" === P && "value" in Attributes && "writable" in Attributes && !Attributes.writable) {
-        var current = $getOwnPropertyDescriptor(O, P);
-        current && current.writable && (O[P] = Attributes.value, Attributes = {
-            configurable: "configurable" in Attributes ? Attributes.configurable : current.configurable,
-            enumerable: "enumerable" in Attributes ? Attributes.enumerable : current.enumerable,
-            writable: !1
-        });
-    }
-    return $defineProperty(O, P, Attributes);
-} : $defineProperty : function(O, P, Attributes) {
-    if (anObject(O), P = toPropertyKey(P), anObject(Attributes), IE8_DOM_DEFINE) try {
-        return $defineProperty(O, P, Attributes);
-    } catch (error) {/* empty */}
-    if ("get" in Attributes || "set" in Attributes) throw new $TypeError$2("Accessors not supported");
-    return "value" in Attributes && (O[P] = Attributes.value), O;
-};
+// Subcomponents
+const CalloutIcon =  forwardRef((({children: children, className: className = "", ...props}, ref) => jsx("div", {
+    ref: ref,
+    className: `c-callout__icon ${className}`.trim(),
+    ...props,
+    children: children
+})));
 
-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;
+CalloutIcon.displayName = "CalloutIcon";
 
-              case 1:
-                return new NativeConstructor(a);
+const CalloutMessage =  forwardRef((({children: children, className: className = "", ...props}, ref) => jsx("div", {
+    ref: ref,
+    className: `c-callout__message ${className}`.trim(),
+    ...props,
+    children: children
+})));
 
-              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];
+CalloutMessage.displayName = "CalloutMessage";
 
-// `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 CalloutTitle =  forwardRef((({children: children, className: className = "", ...props}, ref) => jsx("div", {
+    ref: ref,
+    className: `c-callout__title ${className}`.trim(),
+    ...props,
+    children: children
+})));
 
-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 = {};
+CalloutTitle.displayName = "CalloutTitle";
 
-test[wellKnownSymbol$5("toStringTag")] = "z";
+const CalloutText =  forwardRef((({children: children, className: className = "", ...props}, ref) => jsx("div", {
+    ref: ref,
+    className: `c-callout__text ${className}`.trim(),
+    ...props,
+    children: children
+})));
 
-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);
+CalloutText.displayName = "CalloutText";
 
-// `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);
-    }
-});
+const CalloutActions =  forwardRef((({children: children, className: className = "", ...props}, ref) => jsx("div", {
+    ref: ref,
+    className: `c-callout__actions ${className}`.trim(),
+    ...props,
+    children: children
+})));
 
-var includes$3 = getBuiltInPrototypeMethod$3("String", "includes"), isPrototypeOf$1 = objectIsPrototypeOf, arrayMethod = includes$4, stringMethod = includes$3, ArrayPrototype$1 = Array.prototype, StringPrototype = String.prototype;
+CalloutActions.displayName = "CalloutActions";
 
-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;
-})), Callout = ({title: title, children: children, icon: icon, variant: variant = "primary", onClose: onClose, actions: actions, compact: compact = !1, isToast: isToast = !1, glass: glass, className: className, style: style, ...props}) => {
+const CalloutCloseButton =  forwardRef((({onClick: onClick, className: className = "", ...props}, ref) => jsx("button", {
+    ref: ref,
+    className: `c-callout__close-btn ${className}`.trim(),
+    onClick: onClick,
+    "aria-label": "Close",
+    ...props,
+    children: jsx(Icon, {
+        name: "X",
+        size: "md"
+    })
+})));
+
+CalloutCloseButton.displayName = "CalloutCloseButton";
+
+// Wrapper for content (icon + message)
+const CalloutContent =  forwardRef((({children: children, className: className = "", ...props}, ref) => jsx("div", {
+    ref: ref,
+    className: `c-callout__content ${className}`.trim(),
+    ...props,
+    children: children
+})));
+
+CalloutContent.displayName = "CalloutContent";
+
+const Callout =  memo((({title: title, children: children, icon: icon, variant: variant = "primary", onClose: onClose, actions: actions, compact: compact = !1, isToast: isToast = !1, glass: glass, className: className, style: style, ...props}) => {
     const {generateCalloutClass: generateCalloutClass, handleClose: handleClose} = 
     /**
  * Callout state and functionality
@@ -4202,10 +4533,7 @@ const _includesInstanceProperty =  getDefaultExportFromCjs((function(it) {
                 handler && handler();
             }
         };
-    }
-    /**
- * Callout component for displaying important messages, notifications, or alerts
- */ ({
+    }({
         variant: variant,
         compact: compact,
         isToast: isToast,
@@ -4221,7 +4549,11 @@ const _includesInstanceProperty =  getDefaultExportFromCjs((function(it) {
                 return isToast ? (baseAttributes.role = "alert", baseAttributes["aria-live"] = "polite") : _includesInstanceProperty(_context = [ "warning", "error" ]).call(_context, variant) ? (baseAttributes.role = "alert", 
         baseAttributes["aria-live"] = "assertive") : _includesInstanceProperty(_context2 = [ "info", "success" ]).call(_context2, variant) && (baseAttributes.role = "status", 
         baseAttributes["aria-live"] = "polite"), baseAttributes;
-    }, calloutContent = jsxs(Fragment, {
+    }, calloutContent = React.Children.toArray(children).some((child => {
+        var _context3;
+        
+        return React.isValidElement(child) && _includesInstanceProperty(_context3 = [ "CalloutIcon", "CalloutMessage", "CalloutTitle", "CalloutText", "CalloutActions", "CalloutContent" ]).call(_context3, child.type.displayName);
+    })) ? children : jsxs(Fragment, {
         children: [ jsxs("div", {
             className: "c-callout__content",
             children: [ icon && jsx("div", {
@@ -4255,7 +4587,7 @@ const _includesInstanceProperty =  getDefaultExportFromCjs((function(it) {
         // Default glass settings for callouts
         const defaultGlassProps = {
             displacementScale: 30,
-            cornerRadius: 8,
+            borderRadius: 8,
             elasticity: 0
         }, glassProps = !0 === glass ? defaultGlassProps : {
             ...defaultGlassProps,
@@ -4277,7 +4609,7 @@ const _includesInstanceProperty =  getDefaultExportFromCjs((function(it) {
                 children: jsx("div", {
                     className: "c-callout__glass-content",
                     style: {
-                        borderRadius: glassProps.cornerRadius
+                        borderRadius: glassProps.borderRadius
                     },
                     children: calloutContent
                 })
@@ -4297,9 +4629,13 @@ const _includesInstanceProperty =  getDefaultExportFromCjs((function(it) {
         style: style,
         children: calloutContent
     });
-};
+}));
 
-Callout.displayName = "Callout";
+Callout.displayName = "Callout", 
+// Attach subcomponents
+Callout.Icon = CalloutIcon, Callout.Message = CalloutMessage, Callout.Title = CalloutTitle, 
+Callout.Text = CalloutText, Callout.Actions = CalloutActions, Callout.CloseButton = CalloutCloseButton, 
+Callout.Content = CalloutContent;
 
 const Card =  React.memo( forwardRef((({
 // Variants
@@ -4952,12 +5288,22 @@ const _reduceInstanceProperty =  getDefaultExportFromCjs((function(it) {
         left: 40
     }, config) => {
         if (!datasets || 0 === datasets.length) return null;
-        // Flatten all data points to find min/max values
-                const allDataPoints = datasets.flatMap((dataset => dataset.data));
-        if (0 === allDataPoints.length) return null;
-        const minValue = Math.min(...allDataPoints.map((point => point.value))), maxValue = Math.max(...allDataPoints.map((point => point.value))), valueRange = maxValue - minValue || 1, innerWidth = width - padding.left - padding.right, innerHeight = height - padding.top - padding.bottom;
-        return {
-            xScale: (index, dataLength = allDataPoints.length) => dataLength <= 1 ? padding.left + innerWidth / 2 : padding.left + index / (dataLength - 1) * innerWidth,
+        // Calculate total points and min/max values efficiently avoiding spread operator
+                let totalPoints = 0, minValue = 1 / 0, maxValue = -1 / 0, hasValidData = !1;
+        for (const dataset of datasets) if (dataset.data) {
+            totalPoints += dataset.data.length;
+            const {min: min, max: max, hasValid: hasValid} = getDatasetBounds(dataset.data);
+            hasValid && (min < minValue && (minValue = min), max > maxValue && (maxValue = max), 
+            hasValidData = !0);
+        }
+        if (0 === totalPoints) return null;
+        // Handle case with no valid numeric data
+                hasValidData || (minValue = 0, maxValue = 0);
+        const valueRange = maxValue - minValue || 1, innerWidth = width - padding.left - padding.right, innerHeight = height - padding.top - padding.bottom;
+ // Avoid division by zero
+        // Apply padding
+                return {
+            xScale: (index, dataLength = totalPoints) => dataLength <= 1 ? padding.left + innerWidth / 2 : padding.left + index / (dataLength - 1) * innerWidth,
             yScale: value => padding.top + innerHeight - (value - minValue) / valueRange * innerHeight,
             minValue: minValue,
             maxValue: maxValue,
@@ -5012,6 +5358,29 @@ const _reduceInstanceProperty =  getDefaultExportFromCjs((function(it) {
 
 /**
  * Hook for chart data processing and transformation
+ */
+/**
+ * Helper to calculate min/max values from a dataset efficiently
+ * avoiding spread operator which can cause stack overflow on large arrays
+ */
+function getDatasetBounds(data) {
+    let min = 1 / 0, max = -1 / 0, hasValid = !1;
+    if (data && data.length > 0) for (let i = 0; i < data.length; i++) {
+        const point = data[i];
+        if (point && "number" == typeof point.value) {
+            const val = point.value;
+            val < min && (min = val), val > max && (max = val), hasValid = !0;
+        }
+    }
+    return {
+        min: min,
+        max: max,
+        hasValid: hasValid
+    };
+}
+
+/**
+ * Hook for managing chart toolbar state and generating chart-specific configurations
  */ const ChartToolbar =  memo( forwardRef((({chartType: chartType = "line", groups: groups = [], enableDefaults: enableDefaults = !0, defaults: defaults = {
     refresh: !0,
     export: !0,
@@ -5432,11 +5801,7 @@ toolbarConfig: toolbarConfig, customToolbarActions: customToolbarActions, custom
         onZoomReset: handleZoomReset,
         onPanToggle: handlePanToggle,
         onReset: handleReset
-    })), [ onRefresh, onExport, handleFullscreenChange, handleZoomIn, handleZoomOut, handleZoomReset, handlePanToggle, handleReset ]), {state: toolbarState, handlers: toolbarHandlers, toolbarGroups: toolbarGroups} = 
-    /**
- * Hook for managing chart toolbar state and generating chart-specific configurations
- */
-    function(chartType, config = {}, handlers = {}) {
+    })), [ onRefresh, onExport, handleFullscreenChange, handleZoomIn, handleZoomOut, handleZoomReset, handlePanToggle, handleReset ]), {state: toolbarState, handlers: toolbarHandlers, toolbarGroups: toolbarGroups} = function(chartType, config = {}, handlers = {}) {
         const [state, setState] = useState({
             isFullscreen: !1,
             isExporting: !1,
@@ -5821,16 +6186,16 @@ toolbarConfig: toolbarConfig, customToolbarActions: customToolbarActions, custom
         aberrationIntensity: 1.5,
         elasticity: 0,
         // No elastic effect for charts
-        enableLiquidBlur: !1,
+        withLiquidBlur: !1,
         // Keep it simple
-        enableBorderEffect: !0,
+        withBorder: !0,
         mode: "standard",
         mouseContainer: chartContainerRef,
         reducedMotion: !1
     })), []), glassProps = useMemo((() => glass ? !0 === glass ? defaultChartGlassProps : {
         ...defaultChartGlassProps,
         ...glass
-    } : null), [ glass, defaultChartGlassProps ]), chartBorderRadius = useMemo((() => glassProps?.cornerRadius || void 0), [ glassProps?.cornerRadius ]), chartContextValue = useMemo((() => ({
+    } : null), [ glass, defaultChartGlassProps ]), chartBorderRadius = useMemo((() => glassProps?.borderRadius || void 0), [ glassProps?.borderRadius ]), chartContextValue = useMemo((() => ({
         zoomLevel: zoomLevel,
         panOffset: panOffset,
         panEnabled: panEnabled,
@@ -5961,7 +6326,7 @@ toolbarConfig: toolbarConfig, customToolbarActions: customToolbarActions, custom
         }) ]
     }), wrappedChart = glassProps ? jsx(AtomixGlass, {
         ...glassProps,
-        cornerRadius: chartBorderRadius,
+        borderRadius: chartBorderRadius,
         style: {
             width: "100%",
             height: "100%",
@@ -6014,7 +6379,13 @@ const ChartRenderer =  memo( forwardRef((({datasets: datasets = [], config: conf
     // Get chart context (zoom/pan state from toolbar) - optional
     // Always call useContext to maintain consistent hook order
     const chartContext = useContext(ChartContext), {calculateScales: calculateScales, getChartColors: getChartColors} = useChart(), {processedData: processedData, isProcessing: isProcessing} = function(datasets, options) {
-        const [processedData, setProcessedData] = useState(datasets), [isProcessing, setIsProcessing] = useState(!1), {enableDecimation: enableDecimation = !1, maxDataPoints: maxDataPoints = 1e3, enableRealTime: enableRealTime = !1, realTimeInterval: realTimeInterval = 1e3} = options || {}, decimateData = useCallback(((data, maxPoints) => {
+        const [processedData, setProcessedData] = useState(datasets), [isProcessing, setIsProcessing] = useState(!1), {enableDecimation: enableDecimation = !1, maxDataPoints: maxDataPoints = 1e3, enableRealTime: enableRealTime = !1, realTimeInterval: realTimeInterval = 1e3} = options || {}, lastDataSignature = useRef(""), getDatasetSignature = useCallback((data => data.map((d => `${d.label}:${JSON.stringify(d.data)}`)).join("|")), []);
+        // Update signature when processedData changes (e.g. via props)
+        useEffect((() => {
+            lastDataSignature.current = getDatasetSignature(processedData);
+        }), [ processedData, getDatasetSignature ]);
+        // Data decimation for performance
+        const decimateData = useCallback(((data, maxPoints) => {
             if (!enableDecimation || !data.length) return data;
             const dataLength = data[0]?.data?.length || 0;
             if (dataLength <= maxPoints) return data;
@@ -6034,10 +6405,17 @@ const ChartRenderer =  memo( forwardRef((({datasets: datasets = [], config: conf
         }), []), calculateTrendLine = useCallback((values => {
             const n = values.length;
             if (n < 2) return values.map((() => null));
-            const xSum = _reduceInstanceProperty(values).call(values, ((sum, _, i) => sum + i), 0), ySum = _reduceInstanceProperty(values).call(values, ((sum, val) => sum + val), 0), slope = (n * _reduceInstanceProperty(values).call(values, ((sum, val, i) => sum + i * val), 0) - xSum * ySum) / (n * _reduceInstanceProperty(values).call(values, ((sum, _, i) => sum + i * i), 0) - xSum * xSum), intercept = (ySum - slope * xSum) / n;
+            let xSum = 0, ySum = 0, xySum = 0, x2Sum = 0;
+            for (let i = 0; i < n; i++) {
+                const val = values[i], safeVal = "number" == typeof val ? val : 0;
+                // Treat null/undefined as 0 to match original reduce behavior
+                                xSum += i, ySum += safeVal, xySum += i * safeVal, x2Sum += i * i;
+            }
+            const slope = (n * xySum - xSum * ySum) / (n * x2Sum - xSum * xSum), intercept = (ySum - slope * xSum) / n;
             return values.map(((_, i) => slope * i + intercept));
         }), []);
-        // Process data when datasets change
+        // Moving average calculation
+                // Process data when datasets change
         return useEffect((() => {
             setIsProcessing(!0), (async () => {
                 let processed = [ ...datasets ];
@@ -6049,11 +6427,12 @@ const ChartRenderer =  memo( forwardRef((({datasets: datasets = [], config: conf
         useEffect((() => {
             if (!enableRealTime) return;
             const interval = setInterval((() => {
-                setProcessedData((prev => [ ...prev ]));
- // Trigger re-render for real-time updates
-                        }), realTimeInterval);
+                setProcessedData((prev => 
+                // Only trigger update if signature changed
+                getDatasetSignature(prev) === lastDataSignature.current ? prev : [ ...prev ]));
+            }), realTimeInterval);
             return () => clearInterval(interval);
-        }), [ enableRealTime, realTimeInterval ]), {
+        }), [ enableRealTime, realTimeInterval, getDatasetSignature ]), {
             processedData: processedData,
             isProcessing: isProcessing,
             decimateData: decimateData,
@@ -6074,12 +6453,12 @@ const ChartRenderer =  memo( forwardRef((({datasets: datasets = [], config: conf
  */
     function(datasets, options) {
         const {enableVirtualization: enableVirtualization = !1, enableMemoization: enableMemoization = !0, debounceMs: debounceMs = 100} = options || {}, [isOptimizing, setIsOptimizing] = useState(!1), debounceRef = useRef(null), memoizedScales = useMemo((() => enableMemoization ? datasets.map((dataset => {
-            const values = dataset.data?.map((d => d.value)).filter((v => "number" == typeof v)) || [], validValues = values.length > 0 ? values : [ 0 ];
+            const {min: min, max: max, hasValid: hasValid} = getDatasetBounds(dataset.data);
             return {
                 label: dataset.label,
                 dataLength: dataset.data?.length || 0,
-                minValue: Math.min(...validValues),
-                maxValue: Math.max(...validValues)
+                minValue: hasValid ? min : 0,
+                maxValue: hasValid ? max : 0
             };
         })) : null), [ datasets, enableMemoization ]), debouncedUpdate = useCallback((callback => {
             debounceRef.current && clearTimeout(debounceRef.current), debounceRef.current = setTimeout((() => {
@@ -6178,8 +6557,8 @@ const ChartRenderer =  memo( forwardRef((({datasets: datasets = [], config: conf
         const getAccessibleDescription = useCallback((() => {
             if (!datasets.length) return "Empty chart";
             const datasetDescriptions = datasets.map(((dataset, i) => {
-                const dataCount = dataset.data?.length || 0, values = dataset.data?.map((d => d.value)).filter((v => "number" == typeof v)) || [], min = values.length > 0 ? Math.min(...values) : 0, max = values.length > 0 ? Math.max(...values) : 0;
-                return `Dataset ${i + 1}: ${dataset.label}, ${dataCount} points, range ${min} to ${max}`;
+                const dataCount = dataset.data?.length || 0, {min: min, max: max, hasValid: hasValid} = getDatasetBounds(dataset.data), minVal = hasValid ? min : 0, maxVal = hasValid ? max : 0;
+                return `Dataset ${i + 1}: ${dataset.label}, ${dataCount} points, range ${minVal} to ${maxVal}`;
             })).join(". ");
             return `Chart with ${datasets.length} datasets. ${datasetDescriptions}`;
         }), [ datasets ]);
@@ -8425,14 +8804,14 @@ const ScatterChart =  memo( forwardRef((({datasets: datasets = [], config: confi
 
 ScatterChart.displayName = "ScatterChart";
 
-const TreemapChart =  memo( forwardRef((({data: data = [], algorithm: algorithm = "squarified", colorConfig: colorConfig = {
+const DEFAULT_COLOR_CONFIG = {
     scheme: "category"
-}, labelConfig: labelConfig = {
+}, DEFAULT_LABEL_CONFIG = {
     showLabels: !0,
     minSize: 1e3,
     fontSize: 12,
     textColor: "white"
-}, onDataPointClick: onDataPointClick, config: config = {}, ...props}, ref) => {
+}, DEFAULT_CONFIG = {}, TreemapChart =  memo( forwardRef((({data: data = [], algorithm: algorithm = "squarified", colorConfig: colorConfig = DEFAULT_COLOR_CONFIG, labelConfig: labelConfig = DEFAULT_LABEL_CONFIG, onDataPointClick: onDataPointClick, config: config = DEFAULT_CONFIG, ...props}, ref) => {
     const [hoveredNode, setHoveredNode] = useState(null), [selectedNode, setSelectedNode] = useState(null);
     useState({
         x: 0,
@@ -8544,87 +8923,87 @@ const TreemapChart =  memo( forwardRef((({data: data = [], algorithm: algorithm
                 remainingHeight -= rowHeight), currentRow = [];
             }
         }
-    }), []);
+    }), []), renderContent = useCallback((({scales: scales, colors: colors, datasets: renderedDatasets, handlers: handlers, hoveredPoint: hoveredPoint}) => {
+        if (!data.length) return null;
+        // Calculate available space with padding
+                const availableWidth = scales.width - 40, availableHeight = scales.height - 40, leafNodes = data.filter((item => !item.children || 0 === item.children.length));
+        if (!leafNodes.length) return null;
+        const totalValue = _reduceInstanceProperty(leafNodes).call(leafNodes, ((sum, node) => sum + node.value), 0), treemapNodes = leafNodes.map(((item, index) => ({
+            id: item.id,
+            label: item.label,
+            value: item.value,
+            color: generateColor(item, 0, index) || "transparent",
+            x: 0,
+            // Will be calculated by squarify
+            y: 0,
+            // Will be calculated by squarify
+            width: 0,
+            // Will be calculated by squarify
+            height: 0,
+            // Will be calculated by squarify
+            depth: 0,
+            children: [],
+            originalData: item
+        })));
+        // Create treemap nodes with proper dimensions
+                // Apply squarified algorithm to layout nodes proportionally by value
+        if ("squarified" === algorithm && totalValue > 0) squarify(treemapNodes, 20, 20, availableWidth, availableHeight); else {
+            // Fallback: simple grid layout (equal sizes)
+            const cols = Math.ceil(Math.sqrt(leafNodes.length)), rows = Math.ceil(leafNodes.length / cols), nodeWidth = availableWidth / cols, nodeHeight = availableHeight / rows;
+            treemapNodes.forEach(((node, index) => {
+                const col = index % cols, row = Math.floor(index / cols);
+                node.x = 20 + col * nodeWidth, node.y = 20 + row * nodeHeight, node.width = nodeWidth, 
+                node.height = nodeHeight;
+            }));
+        }
+        return jsx(Fragment, {
+            children: treemapNodes.map((node => {
+                const isHovered = hoveredNode === node, isSelected = selectedNode === node, area = node.width * node.height, showLabel = labelConfig.showLabels && area >= (labelConfig.minSize || 1e3);
+                return jsxs("g", {
+                    children: [ jsx("rect", {
+                        x: node.x,
+                        y: node.y,
+                        width: node.width,
+                        height: node.height,
+                        fill: node.color,
+                        className: `c-chart__treemap-node ${isHovered ? "c-chart__treemap-node--hovered" : ""} ${isSelected ? "c-chart__treemap-node--selected" : ""}`,
+                        onClick: () => {
+                            setSelectedNode(node), handlers.onDataPointClick?.(node.originalData, 0, 0);
+                        },
+                        onMouseEnter: e => {
+                            setHoveredNode(node);
+                            const rect = e.currentTarget.getBoundingClientRect();
+                            handlers.onPointHover(0, 0, node.x, node.y, rect.left + rect.width / 2, rect.top + rect.height / 2);
+                        },
+                        onMouseLeave: () => {
+                            setHoveredNode(null), handlers.onPointLeave();
+                        }
+                    }), showLabel && jsx("text", {
+                        x: node.x + node.width / 2,
+                        y: node.y + node.height / 2,
+                        textAnchor: "middle",
+                        dominantBaseline: "middle",
+                        className: "c-chart__treemap-label",
+                        style: {
+                            fontSize: labelConfig.fontSize,
+                            fill: labelConfig.textColor
+                        },
+                        children: node.label
+                    }) ]
+                }, node.id);
+            }))
+        });
+    }), [ data, algorithm, generateColor, squarify, labelConfig, hoveredNode, selectedNode ]), datasets = useMemo((() => [ {
+        label: "Treemap Data",
+        data: data
+    } ]), [ data ]);
     // Squarified treemap algorithm
         return jsx(BaseChart, {
         ref: ref,
         type: "treemap",
-        datasets: [ {
-            label: "Treemap Data",
-            data: data
-        } ],
+        datasets: datasets,
         config: config,
-        renderContent: ({scales: scales, colors: colors, datasets: renderedDatasets, handlers: handlers, hoveredPoint: hoveredPoint}) => {
-            if (!data.length) return null;
-            // Calculate available space with padding
-                        const availableWidth = scales.width - 40, availableHeight = scales.height - 40, leafNodes = data.filter((item => !item.children || 0 === item.children.length));
-            if (!leafNodes.length) return null;
-            const totalValue = _reduceInstanceProperty(leafNodes).call(leafNodes, ((sum, node) => sum + node.value), 0), treemapNodes = leafNodes.map(((item, index) => ({
-                id: item.id,
-                label: item.label,
-                value: item.value,
-                color: generateColor(item, 0, index) || "transparent",
-                x: 0,
-                // Will be calculated by squarify
-                y: 0,
-                // Will be calculated by squarify
-                width: 0,
-                // Will be calculated by squarify
-                height: 0,
-                // Will be calculated by squarify
-                depth: 0,
-                children: [],
-                originalData: item
-            })));
-            // Create treemap nodes with proper dimensions
-                        // Apply squarified algorithm to layout nodes proportionally by value
-            if ("squarified" === algorithm && totalValue > 0) squarify(treemapNodes, 20, 20, availableWidth, availableHeight); else {
-                // Fallback: simple grid layout (equal sizes)
-                const cols = Math.ceil(Math.sqrt(leafNodes.length)), rows = Math.ceil(leafNodes.length / cols), nodeWidth = availableWidth / cols, nodeHeight = availableHeight / rows;
-                treemapNodes.forEach(((node, index) => {
-                    const col = index % cols, row = Math.floor(index / cols);
-                    node.x = 20 + col * nodeWidth, node.y = 20 + row * nodeHeight, node.width = nodeWidth, 
-                    node.height = nodeHeight;
-                }));
-            }
-            return jsx(Fragment, {
-                children: treemapNodes.map((node => {
-                    const isHovered = hoveredNode === node, isSelected = selectedNode === node, area = node.width * node.height, showLabel = labelConfig.showLabels && area >= (labelConfig.minSize || 1e3);
-                    return jsxs("g", {
-                        children: [ jsx("rect", {
-                            x: node.x,
-                            y: node.y,
-                            width: node.width,
-                            height: node.height,
-                            fill: node.color,
-                            className: `c-chart__treemap-node ${isHovered ? "c-chart__treemap-node--hovered" : ""} ${isSelected ? "c-chart__treemap-node--selected" : ""}`,
-                            onClick: () => {
-                                setSelectedNode(node), handlers.onDataPointClick?.(node.originalData, 0, 0);
-                            },
-                            onMouseEnter: e => {
-                                setHoveredNode(node);
-                                const rect = e.currentTarget.getBoundingClientRect();
-                                handlers.onPointHover(0, 0, node.x, node.y, rect.left + rect.width / 2, rect.top + rect.height / 2);
-                            },
-                            onMouseLeave: () => {
-                                setHoveredNode(null), handlers.onPointLeave();
-                            }
-                        }), showLabel && jsx("text", {
-                            x: node.x + node.width / 2,
-                            y: node.y + node.height / 2,
-                            textAnchor: "middle",
-                            dominantBaseline: "middle",
-                            className: "c-chart__treemap-label",
-                            style: {
-                                fontSize: labelConfig.fontSize,
-                                fill: labelConfig.textColor
-                            },
-                            children: node.label
-                        }) ]
-                    }, node.id);
-                }))
-            });
-        },
+        renderContent: renderContent,
         onDataPointClick: onDataPointClick,
         interactive: !0,
         ...props
@@ -9312,7 +9691,7 @@ const DOTS = "...", range = (start, end) => {
             blurAmount: 1,
             saturation: 160,
             aberrationIntensity: .5,
-            cornerRadius: 8,
+            borderRadius: 8,
             mode: "shader"
         }, glassProps = !0 === glass ? defaultGlassProps : {
             ...defaultGlassProps,
@@ -9383,7 +9762,7 @@ const Checkbox =  React.memo( forwardRef((({label: label, checked: checked, onCh
             blurAmount: 1,
             saturation: 160,
             aberrationIntensity: .3,
-            cornerRadius: 6,
+            borderRadius: 6,
             mode: "shader"
         }, glassProps = !0 === glass ? defaultGlassProps : {
             ...defaultGlassProps,
@@ -9405,7 +9784,38 @@ const DropdownContext =  createContext({
     close: () => {},
     id: "",
     trigger: "click"
-}), DropdownItem =  memo((({children: children, href: href, active: active = !1, disabled: disabled = !1, icon: icon, onClick: onClick, className: className = "", LinkComponent: LinkComponent, ...props}) => {
+}), DropdownMenu =  forwardRef((({children: children, className: className = "", ...props}, ref) => {
+    const {glass: glass} = useContext(DropdownStyleContext);
+ // We need to access glass prop here?
+    // Wait, the original code wrapped <ul> in Context Provider.
+    // And applied glass wrapper around <ul>.
+    // If we use Compound Component, DropdownMenu should be the list.
+        return jsx("ul", {
+        ref: ref,
+        className: `c-dropdown__menu ${glass ? "c-dropdown__menu--glass" : ""} ${className}`.trim(),
+        ...props,
+        children: children
+    });
+}));
+
+// Compound Components
+DropdownMenu.displayName = "DropdownMenu";
+
+const DropdownTrigger =  forwardRef((({children: children, className: className = "", onClick: onClick, onKeyDown: onKeyDown, ...props}, ref) => jsx("div", {
+    ref: ref,
+    className: `c-dropdown__toggle ${className}`.trim(),
+    onClick: onClick,
+    onKeyDown: onKeyDown,
+    ...props,
+    children: children
+})));
+
+DropdownTrigger.displayName = "DropdownTrigger";
+
+/**
+ * DropdownItem component for menu items
+ */
+const DropdownItem =  memo((({children: children, href: href, active: active = !1, disabled: disabled = !1, icon: icon, onClick: onClick, className: className = "", LinkComponent: LinkComponent, ...props}) => {
     const {close: close} = useContext(DropdownContext), handleClick = e => {
         disabled ? e.preventDefault() : (onClick && onClick(e), 
         // Always close the dropdown when an item is clicked
@@ -9447,7 +9857,7 @@ const DropdownContext =  createContext({
 }))), DropdownHeader =  memo((({children: children, className: className = ""}) => jsx("li", {
     className: `c-dropdown__header ${className}`,
     children: children
-}))), Dropdown =  memo((({children: children, menu: menu, placement: placement = "bottom-start", trigger: trigger = "click", offset: offset = DROPDOWN.DEFAULTS.OFFSET, isOpen: controlledIsOpen, onOpenChange: onOpenChange, closeOnClickOutside: closeOnClickOutside = !0, closeOnEscape: closeOnEscape = !0, maxHeight: maxHeight, minWidth: minWidth = DROPDOWN.DEFAULTS.MIN_WIDTH, variant: variant, className: className = "", style: style, glass: glass, ...props}) => {
+}))), DropdownStyleContext =  createContext({}), Dropdown =  memo((({children: children, menu: menu, placement: placement = "bottom-start", trigger: trigger = "click", offset: offset = DROPDOWN.DEFAULTS.OFFSET, isOpen: controlledIsOpen, onOpenChange: onOpenChange, closeOnClickOutside: closeOnClickOutside = !0, closeOnEscape: closeOnEscape = !0, maxHeight: maxHeight, minWidth: minWidth = DROPDOWN.DEFAULTS.MIN_WIDTH, variant: variant, className: className = "", style: style, glass: glass, ...props}) => {
     // Set up controlled vs uncontrolled state
     const [uncontrolledIsOpen, setUncontrolledIsOpen] = useState(!1), isControlled = void 0 !== controlledIsOpen, isOpen = isControlled ? controlledIsOpen : uncontrolledIsOpen, dropdownRef = useRef(null), toggleRef = useRef(null), menuRef = useRef(null), dropdownId = useRef(`dropdown-${Math.random().toString(36).substring(2, 9)}`).current, setIsOpen = useCallback((nextIsOpen => {
         isControlled || setUncontrolledIsOpen(nextIsOpen), onOpenChange && onOpenChange(nextIsOpen);
@@ -9510,20 +9920,59 @@ const DropdownContext =  createContext({
         "hover" === trigger && setIsOpen(!0);
     }), [ trigger, setIsOpen ]), dropdownClasses = [ "c-dropdown", "click" === trigger ? "c-dropdown--onclick" : "", variant ? `c-dropdown--${variant}` : "", isOpen ? "is-open" : "", glass ? "c-dropdown--glass" : "", className ].filter(Boolean).join(" "), menuStyleProps = {};
     // Event handlers
-        maxHeight && (menuStyleProps.maxHeight = maxHeight), void 0 !== minWidth && (menuStyleProps.minWidth = "number" == typeof minWidth ? `${minWidth}px` : minWidth);
+        let triggerContent, menuContentNode;
+    maxHeight && (menuStyleProps.maxHeight = maxHeight), void 0 !== minWidth && (menuStyleProps.minWidth = "number" == typeof minWidth ? `${minWidth}px` : minWidth), 
+    React.Children.toArray(children).some((child => {
+        var _context;
+        
+        return React.isValidElement(child) && _includesInstanceProperty(_context = [ "DropdownTrigger", "DropdownMenu" ]).call(_context, child.type.displayName);
+    })) ? 
+    // Find Trigger and Menu in children
+    React.Children.forEach(children, (child => {
+         React.isValidElement(child) && ("DropdownTrigger" === child.type.displayName ? triggerContent =  React.cloneElement(child, {
+            ref: toggleRef,
+            onClick: e => {
+                handleToggleClick(e), child.props.onClick?.(e);
+            },
+            onKeyDown: e => {
+                handleToggleKeyDown(e), child.props.onKeyDown?.(e);
+            },
+            "aria-haspopup": "menu",
+            "aria-expanded": isOpen,
+            "aria-controls": dropdownId,
+            tabIndex: 0
+        }) : "DropdownMenu" === child.type.displayName && (menuContentNode = child));
+    })) : (
+    // Legacy mode
+    triggerContent = jsx("div", {
+        ref: toggleRef,
+        className: "c-dropdown__toggle",
+        onClick: handleToggleClick,
+        onKeyDown: handleToggleKeyDown,
+        "aria-haspopup": "menu",
+        "aria-expanded": isOpen,
+        "aria-controls": dropdownId,
+        tabIndex: 0,
+        children: children
+    }), menuContentNode = jsx("ul", {
+        className: "c-dropdown__menu " + (glass ? "c-dropdown__menu--glass" : ""),
+        children: menu
+    }));
     const menuContent = jsx("div", {
         className: "c-dropdown__menu-inner",
         style: menuStyleProps,
-        children: jsx(DropdownContext.Provider, {
+        children: jsx(DropdownStyleContext.Provider, {
             value: {
-                isOpen: isOpen,
-                close: close,
-                id: dropdownId,
-                trigger: trigger
+                glass: glass
             },
-            children: jsx("ul", {
-                className: "c-dropdown__menu " + (glass ? "c-dropdown__menu--glass" : ""),
-                children: menu
+            children: jsx(DropdownContext.Provider, {
+                value: {
+                    isOpen: isOpen,
+                    close: close,
+                    id: dropdownId,
+                    trigger: trigger
+                },
+                children: menuContentNode
             })
         })
     });
@@ -9533,17 +9982,7 @@ const DropdownContext =  createContext({
         style: style,
         onMouseEnter: "hover" === trigger ? handleHoverOpen : void 0,
         ...props,
-        children: [ jsx("div", {
-            ref: toggleRef,
-            className: "c-dropdown__toggle",
-            onClick: handleToggleClick,
-            onKeyDown: handleToggleKeyDown,
-            "aria-haspopup": "menu",
-            "aria-expanded": isOpen,
-            "aria-controls": dropdownId,
-            tabIndex: 0,
-            children: children
-        }), jsx("div", {
+        children: [ triggerContent, jsx("div", {
             ref: menuRef,
             id: dropdownId,
             className: `c-dropdown__menu-wrapper c-dropdown__menu-wrapper--${placement} ${isOpen ? "is-open" : ""} ${glass ? "is-glass" : ""}`,
@@ -9571,9 +10010,9 @@ const DropdownContext =  createContext({
 }));
 
 /**
- * DropdownItem component for menu items
- */ Dropdown.displayName = "Dropdown", DropdownItem.displayName = "DropdownItem", 
-DropdownDivider.displayName = "DropdownDivider", DropdownHeader.displayName = "DropdownHeader";
+ * DropdownDivider component for separating groups of items
+ */ Dropdown.displayName = "Dropdown", Dropdown.Trigger = DropdownTrigger, Dropdown.Menu = DropdownMenu, 
+Dropdown.Item = DropdownItem, Dropdown.Divider = DropdownDivider, Dropdown.Header = DropdownHeader;
 
 /**
  * DataTable - A flexible and accessible data table component with advanced features
@@ -10662,53 +11101,50 @@ function useEdgePanel(initialProps) {
     };
 }
 
-/**
- * EdgePanel - A sliding panel component that appears from any screen edge
- *
- * @component
- * @example
- * ```tsx
- * // Basic usage
- * <EdgePanel
- *   title="My Panel"
- *   isOpen={isOpen}
- *   onOpenChange={setIsOpen}
- *   position="start"
- * >
- *   <p>Panel content</p>
- * </EdgePanel>
- *
- * // With glass effect
- * <EdgePanel
- *   title="Glass Panel"
- *   isOpen={isOpen}
- *   onOpenChange={setIsOpen}
- *   position="end"
- *   glass={true}
- * >
- *   <p>Panel with glass morphism</p>
- * </EdgePanel>
- *
- * // With custom glass configuration
- * <EdgePanel
- *   title="Custom Glass"
- *   isOpen={isOpen}
- *   onOpenChange={setIsOpen}
- *   position="start"
- *   glass={{
- *     mode: 'shader',
- *     shaderVariant: 'liquidGlass',
- *     displacementScale: 70,
- *     blurAmount: 1.8,
- *     saturation: 170,
- *   }}
- * >
- *   <p>Panel with custom glass effect</p>
- * </EdgePanel>
- * ```
- */ DatePicker.displayName = "DatePicker";
+// Subcomponents
+DatePicker.displayName = "DatePicker";
+
+const EdgePanelHeader =  forwardRef((({children: children, className: className = "", ...props}, ref) => jsx("div", {
+    ref: ref,
+    className: `c-edge-panel__header ${className}`.trim(),
+    ...props,
+    children: children
+})));
+
+EdgePanelHeader.displayName = "EdgePanelHeader";
+
+const EdgePanelBody =  forwardRef((({children: children, className: className = "", ...props}, ref) => jsx("div", {
+    ref: ref,
+    className: `c-edge-panel__body ${className}`.trim(),
+    ...props,
+    children: children
+})));
+
+EdgePanelBody.displayName = "EdgePanelBody";
+
+const EdgePanelFooter =  forwardRef((({children: children, className: className = "", ...props}, ref) => jsx("div", {
+    ref: ref,
+    className: `c-edge-panel__footer ${className}`.trim(),
+    ...props,
+    children: children
+})));
+
+EdgePanelFooter.displayName = "EdgePanelFooter";
+
+const EdgePanelCloseButton =  forwardRef((({className: className = "", onClick: onClick, ...props}, ref) => jsx("button", {
+    ref: ref,
+    className: `c-edge-panel__close c-btn c-btn--icon ${className}`.trim(),
+    onClick: onClick,
+    "aria-label": "Close panel",
+    ...props,
+    children: jsx(Icon, {
+        name: "X"
+    })
+})));
+
+EdgePanelCloseButton.displayName = "EdgePanelCloseButton";
 
-const EdgePanel = ({title: title, children: children, position: position = "start", mode: mode = "slide", isOpen: isOpen = !1, onOpenChange: onOpenChange, backdrop: backdrop = !0, closeOnBackdropClick: closeOnBackdropClick = !0, closeOnEscape: closeOnEscape = !0, className: className = "", style: style, glass: glass}) => {
+const EdgePanel =  memo((({title: title, children: children, position: position = "start", mode: mode = "slide", isOpen: isOpen = !1, onOpenChange: onOpenChange, backdrop: backdrop = !0, closeOnBackdropClick: closeOnBackdropClick = !0, closeOnEscape: closeOnEscape = !0, className: className = "", style: style, glass: glass}) => {
     const {isOpen: isOpenState, containerRef: containerRef, backdropRef: backdropRef, generateEdgePanelClass: generateEdgePanelClass, closePanel: closePanel, handleBackdropClick: handleBackdropClick} = useEdgePanel({
         position: position,
         mode: mode,
@@ -10725,13 +11161,23 @@ const EdgePanel = ({title: title, children: children, position: position = "star
     });
     // Moved useRef outside of conditional rendering to fix hook order issue
         // If not open and not controlled by parent, don't render
+    // Note: useEdgePanel manages internal state if onOpenChange is not provided?
+    // Looking at useEdgePanel (implied): it seems to return isOpenState.
+    // If we return null here, animations might be cut off.
+    // Usually EdgePanel/Drawer should stay mounted but hidden or conditionally mounted.
+    // The original code returned null if !isOpenState && isOpen === false.
+    // Let's keep that logic.
     if (!isOpenState && !1 === isOpen) return null;
     const defaultGlassProps = {
         elasticity: 0
     }, glassProps = !0 === glass ? defaultGlassProps : {
         ...defaultGlassProps,
         ...glass
-    }, panelContent = jsxs(Fragment, {
+    }, panelContent = React.Children.toArray(children).some((child => {
+        var _context;
+        
+        return React.isValidElement(child) && _includesInstanceProperty(_context = [ "EdgePanelHeader", "EdgePanelBody", "EdgePanelFooter" ]).call(_context, child.type.displayName);
+    })) ? children : jsxs(Fragment, {
         children: [ jsxs("div", {
             className: "c-edge-panel__header",
             children: [ jsx("h4", {
@@ -10774,7 +11220,7 @@ const EdgePanel = ({title: title, children: children, position: position = "star
             }) : panelContent
         }) ]
     });
-};
+}));
 
 /**
  * Form state and functionality
@@ -10808,7 +11254,8 @@ function useForm(initialProps) {
 
 /**
  * Form - A component for creating form layouts
- */ EdgePanel.displayName = "EdgePanel";
+ */ EdgePanel.displayName = "EdgePanel", EdgePanel.Header = EdgePanelHeader, EdgePanel.Body = EdgePanelBody, 
+EdgePanel.Footer = EdgePanelFooter, EdgePanel.CloseButton = EdgePanelCloseButton;
 
 const Form = ({children: children, onSubmit: onSubmit, onReset: onReset, className: className = "", style: style, disabled: disabled = !1, id: id, method: method = "post", encType: encType, noValidate: noValidate = !1, autoComplete: autoComplete = "on"}) => {
     const {generateFormClass: generateFormClass, handleSubmit: handleSubmit, handleReset: handleReset} = useForm({
@@ -10988,7 +11435,7 @@ const Input =  memo( forwardRef((({type: type = "text", value: value, defaultVal
             blurAmount: 1,
             saturation: 180,
             aberrationIntensity: .2,
-            cornerRadius: 12,
+            borderRadius: 12,
             mode: "shader"
         }, glassProps = !0 === glass ? defaultGlassProps : {
             ...defaultGlassProps,
@@ -11028,7 +11475,7 @@ function useHero(initialProps) {
  * @returns Slider state and methods
  */
     function(config) {
-        const {slides: slides, autoplay: autoplay, loop: loop = !0, transition: transition = "fade", transitionDuration: transitionDuration = 1e3} = config, [currentIndex, setCurrentIndex] = useState(0), [isTransitioning, setIsTransitioning] = useState(!1), autoplayRef = useRef(null), isPausedRef = useRef(!1), slideRefs = useMemo((() => slides.map((() =>  React.createRef()))), [ slides.length ]), videoRefs = useMemo((() => slides.map((() =>  React.createRef()))), [ slides.length ]), handleSlideTransition = useCallback((nextIndex => {
+        const {slides: slides, autoplay: autoplay, loop: loop = !0, transition: transition = "fade", transitionDuration: transitionDuration = 1e3} = config, [currentIndex, setCurrentIndex] = useState(0), [isTransitioning, setIsTransitioning] = useState(!1), autoplayRef = useRef(null), isPausedRef = useRef(!1), callbackRef = useRef(), slideRefs = useMemo((() => slides.map((() =>  React.createRef()))), [ slides.length ]), videoRefs = useMemo((() => slides.map((() =>  React.createRef()))), [ slides.length ]), handleSlideTransition = useCallback((nextIndex => {
             if (nextIndex === currentIndex || isTransitioning) return;
             if (nextIndex < 0 || nextIndex >= slides.length) return;
             setIsTransitioning(!0), 
@@ -11049,7 +11496,17 @@ function useHero(initialProps) {
             let nextIndex;
             nextIndex = loop ? (currentIndex + 1) % slides.length : Math.min(currentIndex + 1, slides.length - 1), 
             handleSlideTransition(nextIndex);
-        }), [ currentIndex, slides.length, loop, handleSlideTransition ]), pauseAutoplay = useCallback((() => {
+        }), [ currentIndex, slides.length, loop, handleSlideTransition ]);
+        // Update callbackRef whenever nextSlide or isTransitioning changes
+        useEffect((() => {
+            callbackRef.current = () => {
+                isPausedRef.current || isTransitioning || nextSlide();
+            };
+        }), [ nextSlide, isTransitioning ]);
+        /**
+   * Pause autoplay
+   */
+        const pauseAutoplay = useCallback((() => {
             isPausedRef.current = !0, autoplayRef.current && (clearInterval(autoplayRef.current), 
             autoplayRef.current = null);
         }), []), resumeAutoplay = useCallback((() => {
@@ -11058,24 +11515,26 @@ function useHero(initialProps) {
                 const delay = "object" == typeof autoplay ? autoplay.delay : 3e3;
                 // Restart autoplay
                                 autoplayRef.current || (autoplayRef.current = setInterval((() => {
-                    isPausedRef.current || isTransitioning || nextSlide();
+                    callbackRef.current && callbackRef.current();
                 }), delay));
             }
-        }), [ autoplay, slides.length, nextSlide, isTransitioning ]);
+        }), [ autoplay, slides.length ]);
+        /**
+   * Resume autoplay
+   */        
         // Autoplay effect
         return useEffect((() => {
             if (!autoplay || slides.length <= 1) return;
             const delay = "object" == typeof autoplay ? autoplay.delay : 3e3;
-            return "object" == typeof autoplay && autoplay.pauseOnHover, 
             // Clear any existing interval
-            autoplayRef.current && (clearInterval(autoplayRef.current), autoplayRef.current = null), 
+                        return autoplayRef.current && (clearInterval(autoplayRef.current), autoplayRef.current = null), 
             // Start autoplay if not paused
             isPausedRef.current || (autoplayRef.current = setInterval((() => {
-                isPausedRef.current || isTransitioning || nextSlide();
+                callbackRef.current && callbackRef.current();
             }), delay)), () => {
                 autoplayRef.current && (clearInterval(autoplayRef.current), autoplayRef.current = null);
             };
-        }), [ autoplay, slides.length, nextSlide, isTransitioning ]), 
+        }), [ autoplay, slides.length ]), 
         // Initialize first video if needed
         useEffect((() => {
             if (slides.length > 0 && "video" === slides[currentIndex]?.type) {
@@ -12076,7 +12535,14 @@ function useTodo(initialProps) {
 }
 
 function useSlider(options) {
-    const {slides: slides, slidesToShow: slidesToShow = 1, spaceBetween: spaceBetween = 0, loop: loop = !1, initialSlide: initialSlide = 0, direction: direction = "horizontal", speed: speed = 300, allowTouchMove: allowTouchMove = !0, threshold: threshold = 50, autoplay: autoplay, onSlideChange: onSlideChange} = options, containerRef = useRef(null), wrapperRef = useRef(null), repositioningRef = useRef(!1), autoplayRef = useRef(null), [autoplayRunning, setAutoplayRunning] = useState(!1), [realIndex, setRealIndex] = useState(initialSlide), [internalIndex, setInternalIndex] = useState(0), [isTransitioning, setIsTransitioning] = useState(!1), [containerSize, setContainerSize] = useState(0), [touching, setTouching] = useState(!1), [touchStart, setTouchStart] = useState(0), [dragOffset, setDragOffset] = useState(0), slideWidth = useMemo((() => 0 === containerSize ? 0 : (containerSize - spaceBetween * (slidesToShow - 1)) / slidesToShow), [ containerSize, spaceBetween, slidesToShow ]), allSlides = useMemo((() => loop && 0 !== slides.length ? [ ...slides.map(((slide, i) => ({
+    const {slides: slides, slidesToShow: slidesToShow = 1, spaceBetween: spaceBetween = 0, loop: loop = !1, initialSlide: initialSlide = 0, direction: direction = "horizontal", speed: speed = 300, allowTouchMove: allowTouchMove = !0, threshold: threshold = 50, autoplay: autoplay, onSlideChange: onSlideChange} = options, containerRef = useRef(null), wrapperRef = useRef(null), repositioningRef = useRef(!1), autoplayRef = useRef(null), [autoplayRunning, setAutoplayRunning] = useState(!1), sliderStateRef = useRef({
+        isTransitioning: !1,
+        loop: loop,
+        slides: slides,
+        slidesToShow: slidesToShow,
+        speed: speed,
+        onSlideChange: onSlideChange
+    }), [realIndex, setRealIndex] = useState(initialSlide), [internalIndex, setInternalIndex] = useState(0), [isTransitioning, setIsTransitioning] = useState(!1), [containerSize, setContainerSize] = useState(0), [touching, setTouching] = useState(!1), [touchStart, setTouchStart] = useState(0), [dragOffset, setDragOffset] = useState(0), slideWidth = useMemo((() => 0 === containerSize ? 0 : (containerSize - spaceBetween * (slidesToShow - 1)) / slidesToShow), [ containerSize, spaceBetween, slidesToShow ]), allSlides = useMemo((() => loop && 0 !== slides.length ? [ ...slides.map(((slide, i) => ({
         ...slide,
         id: `set1-${slide.id || i}`
     }))), ...slides.map(((slide, i) => ({
@@ -12086,6 +12552,17 @@ function useSlider(options) {
         ...slide,
         id: `set3-${slide.id || i}`
     }))) ] : slides), [ slides, loop ]), loopedSlides = slides.length, translateValue = useMemo((() => 0 === slideWidth ? 0 : -internalIndex * slideWidth + dragOffset), [ slideWidth, internalIndex, dragOffset ]);
+    // Update the ref whenever the relevant state/props change
+    useEffect((() => {
+        sliderStateRef.current = {
+            isTransitioning: isTransitioning,
+            loop: loop,
+            slides: slides,
+            slidesToShow: slidesToShow,
+            speed: speed,
+            onSlideChange: onSlideChange
+        };
+    }), [ isTransitioning, loop, slides, slidesToShow, speed, onSlideChange ]), 
     // Autoplay effect
     useEffect((() => {
         if (!autoplay) return autoplayRef.current && (clearInterval(autoplayRef.current), 
@@ -12097,32 +12574,34 @@ function useSlider(options) {
         autoplayRef.current && clearInterval(autoplayRef.current), 
         // Create new interval
         autoplayRef.current = setInterval((() => {
+            // Use ref to get the latest state without resetting the interval
+            const {isTransitioning: currentIsTransitioning, loop: currentLoop, slides: currentSlides, slidesToShow: currentSlidesToShow, speed: currentSpeed, onSlideChange: currentOnSlideChange} = sliderStateRef.current;
             // We need to use a functional update to get the latest values
-            setRealIndex((prevRealIndex => {
-                if (isTransitioning) return prevRealIndex;
+                        setRealIndex((prevRealIndex => {
+                if (currentIsTransitioning) return prevRealIndex;
                 // Stop autoplay on interaction if disableOnInteraction is true
                                 let nextIndex;
                 // Trigger the slide change
                 if (disableOnInteraction && autoplayRef.current && (clearInterval(autoplayRef.current), 
-                autoplayRef.current = null, setAutoplayRunning(!1)), nextIndex = loop ? (prevRealIndex + 1) % slides.length : Math.min(prevRealIndex + 1, slides.length - slidesToShow), 
+                autoplayRef.current = null, setAutoplayRunning(!1)), nextIndex = currentLoop ? (prevRealIndex + 1) % currentSlides.length : Math.min(prevRealIndex + 1, currentSlides.length - currentSlidesToShow), 
                 reverseDirection) {
                     // For reverse direction, we would go to previous slide
-                    const prevIndex = loop ? 0 === prevRealIndex ? slides.length - 1 : prevRealIndex - 1 : Math.max(prevRealIndex - 1, 0);
-                    return setInternalIndex(loop ? slides.length + prevIndex : prevIndex), setIsTransitioning(!0), 
-                    setDragOffset(0), setTimeout((() => {
-                        setIsTransitioning(!1), onSlideChange?.(prevIndex);
-                    }), speed), prevIndex;
+                    const prevIndex = currentLoop ? 0 === prevRealIndex ? currentSlides.length - 1 : prevRealIndex - 1 : Math.max(prevRealIndex - 1, 0);
+                    return setInternalIndex(currentLoop ? currentSlides.length + prevIndex : prevIndex), 
+                    setIsTransitioning(!0), setDragOffset(0), setTimeout((() => {
+                        setIsTransitioning(!1), currentOnSlideChange?.(prevIndex);
+                    }), currentSpeed), prevIndex;
                 }
                 // Normal direction
-                return setInternalIndex(loop ? slides.length + nextIndex : nextIndex), setIsTransitioning(!0), 
-                setDragOffset(0), setTimeout((() => {
-                    setIsTransitioning(!1), onSlideChange?.(nextIndex), 
+                return setInternalIndex(currentLoop ? currentSlides.length + nextIndex : nextIndex), 
+                setIsTransitioning(!0), setDragOffset(0), setTimeout((() => {
+                    setIsTransitioning(!1), currentOnSlideChange?.(nextIndex), 
                     // Reposition after transition ends for looped sliders
-                    loop && nextIndex >= 2 * slides.length && (repositioningRef.current = !0, setInternalIndex(slides.length + nextIndex), 
-                    setTimeout((() => {
+                    currentLoop && nextIndex >= 2 * currentSlides.length && (repositioningRef.current = !0, 
+                    setInternalIndex(currentSlides.length + nextIndex), setTimeout((() => {
                         repositioningRef.current = !1;
                     }), 0));
-                }), speed), nextIndex;
+                }), currentSpeed), nextIndex;
             }));
         }), delay), setAutoplayRunning(!0);
         // Handle pause on mouse enter/leave if enabled
@@ -12133,17 +12612,18 @@ function useSlider(options) {
         }, handleMouseLeave = () => {
             // Restart autoplay
             autoplayRef.current && clearInterval(autoplayRef.current), autoplayRef.current = setInterval((() => {
+                const {isTransitioning: currentIsTransitioning, loop: currentLoop, slides: currentSlides, slidesToShow: currentSlidesToShow, speed: currentSpeed, onSlideChange: currentOnSlideChange} = sliderStateRef.current;
                 setRealIndex((prevRealIndex => {
-                    if (isTransitioning) return prevRealIndex;
+                    if (currentIsTransitioning) return prevRealIndex;
                     let nextIndex;
-                    return nextIndex = loop ? (prevRealIndex + 1) % slides.length : Math.min(prevRealIndex + 1, slides.length - slidesToShow), 
-                    setInternalIndex(loop ? slides.length + nextIndex : nextIndex), setIsTransitioning(!0), 
+                    return nextIndex = currentLoop ? (prevRealIndex + 1) % currentSlides.length : Math.min(prevRealIndex + 1, currentSlides.length - currentSlidesToShow), 
+                    setInternalIndex(currentLoop ? currentSlides.length + nextIndex : nextIndex), setIsTransitioning(!0), 
                     setDragOffset(0), setTimeout((() => {
-                        setIsTransitioning(!1), onSlideChange?.(nextIndex), loop && nextIndex >= 2 * slides.length && (repositioningRef.current = !0, 
-                        setInternalIndex(slides.length + nextIndex), setTimeout((() => {
+                        setIsTransitioning(!1), currentOnSlideChange?.(nextIndex), currentLoop && nextIndex >= 2 * currentSlides.length && (repositioningRef.current = !0, 
+                        setInternalIndex(currentSlides.length + nextIndex), setTimeout((() => {
                             repositioningRef.current = !1;
                         }), 0));
-                    }), speed), nextIndex;
+                    }), currentSpeed), nextIndex;
                 }));
             }), delay), setAutoplayRunning(!0);
         };
@@ -12155,7 +12635,7 @@ function useSlider(options) {
             containerElement && (containerElement.removeEventListener("mouseenter", handleMouseEnter), 
             containerElement.removeEventListener("mouseleave", handleMouseLeave)), setAutoplayRunning(!1);
         };
-    }), [ autoplay, slides.length, loop, slidesToShow, isTransitioning, speed, onSlideChange, repositioningRef ]), 
+    }), [ autoplay, repositioningRef ]), 
     // Initialize
     useEffect((() => {
         setInternalIndex(loop ? slides.length + initialSlide : initialSlide);
@@ -12381,8 +12861,6 @@ function useSlider(options) {
     };
 }
 
-// Button composables
-// export * from './useButton';
 // Accordion composables
 const composablesImport =  Object.freeze( Object.defineProperty({
     __proto__: null,
@@ -12423,124 +12901,191 @@ const composablesImport =  Object.freeze( Object.defineProperty({
     useTodo: useTodo
 }, Symbol.toStringTag, {
     value: "Module"
-})), Select =  memo((({options: options = [], value: value, onChange: onChange, onBlur: onBlur, onFocus: onFocus, placeholder: placeholder = "Select an option", className: className = "", style: style, disabled: disabled = !1, required: required = !1, id: id, name: name, size: size = "md", invalid: invalid = !1, valid: valid = !1, multiple: multiple = !1, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, glass: glass}) => {
+})), SelectContext =  createContext(null), SelectOption =  memo((({value: value, children: children, disabled: disabled = !1, className: className = "", style: style}) => {
+    const context = useContext(SelectContext), label = "string" == typeof children ? children : value;
+    // We assume children is the label if it's a string, or we need a way to get label.
+    // For simplicity, we use children as label for registration if it's a string.
+        if (useEffect((() => {
+        if (context) return context.registerOption({
+            value: value,
+            label: label,
+            disabled: disabled
+        }), () => {
+            context.unregisterOption(value);
+        };
+    }), [ context, value, label, disabled ]), !context) return console.warn("SelectOption must be used within a Select component"), 
+    null;
+    const {selectedValue: selectedValue, onSelect: onSelect} = context, isSelected = Array.isArray(selectedValue) ? _includesInstanceProperty(selectedValue).call(selectedValue, value) : selectedValue === value;
+    return jsx("li", {
+        className: `${SELECT.CLASSES.SELECT_ITEM} ${className}`.trim(),
+        "data-value": value,
+        onClick: e => {
+            e.preventDefault(), e.stopPropagation(), disabled || onSelect(value, label);
+        },
+        style: style,
+        role: "option",
+        "aria-selected": isSelected,
+        "aria-disabled": disabled,
+        children: jsxs("label", {
+            className: "c-checkbox",
+            style: {
+                pointerEvents: "none"
+            },
+            children: [ jsx("input", {
+                type: "checkbox",
+                className: "c-checkbox__input c-select__item-input",
+                checked: isSelected,
+                readOnly: !0,
+                disabled: disabled,
+                tabIndex: -1
+            }), jsx("div", {
+                className: "c-select__item-label",
+                children: children
+            }) ]
+        })
+    });
+}));
+
+SelectOption.displayName = "SelectOption";
+
+/**
+ * Select - A component for dropdown selection
+ */
+const Select =  memo((({options: options, value: value, onChange: onChange, onBlur: onBlur, onFocus: onFocus, placeholder: placeholder = "Select an option", className: className = "", style: style, disabled: disabled = !1, required: required = !1, id: id, name: name, size: size = "md", invalid: invalid = !1, valid: valid = !1, multiple: multiple = !1, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, glass: glass, children: children}) => {
     const {generateSelectClass: generateSelectClass} = useSelect({
         size: size,
         disabled: disabled,
         invalid: invalid,
         valid: valid
     }), selectClass = generateSelectClass({
-        className: `${className} ${glass ? "c-select--glass" : ""}`.trim(),
-        size: size,
-        disabled: disabled,
-        invalid: invalid,
-        valid: valid
-    }), [isOpen, setIsOpen] = useState(!1), [selectedLabel, setSelectedLabel] = useState(placeholder), dropdownRef = useRef(null), panelRef = useRef(null), bodyRef = useRef(null), nativeSelectRef = useRef(null);
-    // Update selected label when value changes
-    useEffect((() => {
-        if (value) {
-            const selectedOption = options.find((opt => opt.value === value));
-            selectedOption && setSelectedLabel(selectedOption.label);
-        } else setSelectedLabel(placeholder);
-    }), [ value, options, placeholder ]), 
-    // Handle click outside to close dropdown
-    useEffect((() => {
-        const handleClickOutside = event => {
-            dropdownRef.current && !dropdownRef.current.contains(event.target) && (setIsOpen(!1), 
-            bodyRef.current && (bodyRef.current.style.height = "0px"));
-        };
-        return document.addEventListener("mousedown", handleClickOutside), () => {
-            document.removeEventListener("mousedown", handleClickOutside);
-        };
-    }), []);
-    // Toggle dropdown
-    const selectContent = jsxs("div", {
-        className: `${selectClass} ${isOpen ? SELECT.CLASSES.IS_OPEN : ""}`,
-        ref: dropdownRef,
-        style: style,
-        "aria-expanded": isOpen,
-        children: [ jsxs("select", {
-            ref: nativeSelectRef,
-            value: value,
-            onChange: onChange,
-            onBlur: onBlur,
-            onFocus: onFocus,
-            disabled: disabled,
-            required: required,
-            id: id,
-            name: name,
-            multiple: multiple,
-            "aria-label": ariaLabel,
-            "aria-describedby": ariaDescribedBy,
-            "aria-invalid": invalid,
-            style: {
-                display: "none"
-            },
-            children: [ placeholder && jsx("option", {
-                value: "",
-                disabled: !0,
-                children: placeholder
-            }), options.map((option => jsx("option", {
-                value: option.value,
-                disabled: option.disabled,
-                children: option.label
-            }, option.value))) ]
-        }), jsx("div", {
-            className: SELECT.CLASSES.SELECTED,
-            onClick: () => {
-                disabled || (!isOpen && bodyRef.current && panelRef.current ? bodyRef.current.style.height = `${panelRef.current.clientHeight}px` : bodyRef.current && (bodyRef.current.style.height = "0px"), 
-                setIsOpen(!isOpen));
-            },
-            "aria-disabled": disabled,
-            children: selectedLabel
-        }), jsx("i", {
-            className: `${SELECT.CLASSES.ICON_CARET} ${SELECT.CLASSES.TOGGLE_ICON}`
-        }), jsx("div", {
-            className: SELECT.CLASSES.SELECT_BODY,
-            ref: bodyRef,
-            style: {
-                height: 0
-            },
-            children: jsx("div", {
-                className: SELECT.CLASSES.SELECT_PANEL,
-                ref: panelRef,
-                children: jsx("ul", {
-                    className: SELECT.CLASSES.SELECT_ITEMS,
-                    children: options.map(((option, index) => jsx("li", {
-                        className: SELECT.CLASSES.SELECT_ITEM,
-                        "data-value": option.value,
-                        onClick: () => !option.disabled && (option => {
-                            if (setSelectedLabel(option.label), setIsOpen(!1), bodyRef.current && (bodyRef.current.style.height = "0px"), 
-                            nativeSelectRef.current && (nativeSelectRef.current.value = option.value), onChange) {
-                                // Create a synthetic event
-                                const event = {
-                                    target: {
-                                        name: name,
-                                        value: option.value
-                                    }
-                                };
-                                onChange(event);
-                            }
-                        })(option),
-                        children: jsxs("label", {
-                            htmlFor: `SelectItem${index}`,
-                            className: "c-checkbox",
-                            children: [ jsx("input", {
-                                type: "checkbox",
-                                id: `SelectItem${index}`,
-                                className: "c-checkbox__input c-select__item-input",
-                                checked: value === option.value,
-                                readOnly: !0,
-                                disabled: option.disabled
-                            }), jsx("div", {
-                                className: "c-select__item-label",
-                                children: option.label
-                            }) ]
-                        })
-                    }, option.value)))
+        className: `${className} ${glass ? "c-select--glass" : ""}`.trim(),
+        size: size,
+        disabled: disabled,
+        invalid: invalid,
+        valid: valid
+    }), [isOpen, setIsOpen] = useState(!1), [selectedLabel, setSelectedLabel] = useState(placeholder), dropdownRef = useRef(null), panelRef = useRef(null), bodyRef = useRef(null), nativeSelectRef = useRef(null), [registeredOptions, setRegisteredOptions] = useState([]), registerOption = useCallback((option => {
+        setRegisteredOptions((prev => prev.some((o => o.value === option.value)) ? prev : [ ...prev, option ]));
+    }), []), unregisterOption = useCallback((value => {
+        setRegisteredOptions((prev => prev.filter((o => o.value !== value))));
+    }), []), hasOptionsProp = options && options.length > 0, activeOptions = hasOptionsProp ? options : registeredOptions;
+    // Update selected label when value changes
+    useEffect((() => {
+        if (value) {
+            const selectedOption = activeOptions.find((opt => opt.value === value));
+            selectedOption && setSelectedLabel(selectedOption.label);
+        } else setSelectedLabel(placeholder);
+    }), [ value, activeOptions, placeholder ]), 
+    // Handle click outside to close dropdown
+    useEffect((() => {
+        const handleClickOutside = event => {
+            dropdownRef.current && !dropdownRef.current.contains(event.target) && (setIsOpen(!1), 
+            bodyRef.current && (bodyRef.current.style.height = "0px"));
+        };
+        return document.addEventListener("mousedown", handleClickOutside), () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }), []);
+    // Toggle dropdown
+    const handleItemClick = useCallback((option => {
+        if (setSelectedLabel(option.label), setIsOpen(!1), bodyRef.current && (bodyRef.current.style.height = "0px"), 
+        nativeSelectRef.current && (nativeSelectRef.current.value = option.value), onChange) {
+            // Create a synthetic event
+            const event = {
+                target: {
+                    name: name,
+                    value: option.value
+                }
+            };
+            onChange(event);
+        }
+    }), [ onChange, name ]), onSelect = useCallback(((val, label) => {
+        handleItemClick({
+            value: val,
+            label: label
+        });
+    }), [ handleItemClick ]), contextValue = React.useMemo((() => ({
+        registerOption: registerOption,
+        unregisterOption: unregisterOption,
+        selectedValue: value,
+        onSelect: onSelect
+    })), [ registerOption, unregisterOption, value, onSelect ]), selectContent = jsx(SelectContext.Provider, {
+        value: contextValue,
+        children: jsxs("div", {
+            className: `${selectClass} ${isOpen ? SELECT.CLASSES.IS_OPEN : ""}`,
+            ref: dropdownRef,
+            style: style,
+            "aria-expanded": isOpen,
+            children: [ jsxs("select", {
+                ref: nativeSelectRef,
+                value: value,
+                onChange: onChange,
+                onBlur: onBlur,
+                onFocus: onFocus,
+                disabled: disabled,
+                required: required,
+                id: id,
+                name: name,
+                multiple: multiple,
+                "aria-label": ariaLabel,
+                "aria-describedby": ariaDescribedBy,
+                "aria-invalid": invalid,
+                style: {
+                    display: "none"
+                },
+                children: [ placeholder && jsx("option", {
+                    value: "",
+                    disabled: !0,
+                    children: placeholder
+                }), activeOptions.map((option => jsx("option", {
+                    value: option.value,
+                    disabled: option.disabled,
+                    children: option.label
+                }, option.value))) ]
+            }), jsx("div", {
+                className: SELECT.CLASSES.SELECTED,
+                onClick: () => {
+                    disabled || (!isOpen && bodyRef.current && panelRef.current ? bodyRef.current.style.height = `${panelRef.current.clientHeight}px` : bodyRef.current && (bodyRef.current.style.height = "0px"), 
+                    setIsOpen(!isOpen));
+                },
+                "aria-disabled": disabled,
+                children: selectedLabel
+            }), jsx("i", {
+                className: `${SELECT.CLASSES.ICON_CARET} ${SELECT.CLASSES.TOGGLE_ICON}`
+            }), jsx("div", {
+                className: SELECT.CLASSES.SELECT_BODY,
+                ref: bodyRef,
+                style: {
+                    height: 0
+                },
+                children: jsx("div", {
+                    className: SELECT.CLASSES.SELECT_PANEL,
+                    ref: panelRef,
+                    children: jsx("ul", {
+                        className: SELECT.CLASSES.SELECT_ITEMS,
+                        children: hasOptionsProp ? options.map(((option, index) => jsx("li", {
+                            className: SELECT.CLASSES.SELECT_ITEM,
+                            "data-value": option.value,
+                            onClick: () => !option.disabled && handleItemClick(option),
+                            children: jsxs("label", {
+                                htmlFor: `SelectItem${index}`,
+                                className: "c-checkbox",
+                                children: [ jsx("input", {
+                                    type: "checkbox",
+                                    id: `SelectItem${index}`,
+                                    className: "c-checkbox__input c-select__item-input",
+                                    checked: value === option.value,
+                                    readOnly: !0,
+                                    disabled: option.disabled
+                                }), jsx("div", {
+                                    className: "c-select__item-label",
+                                    children: option.label
+                                }) ]
+                            })
+                        }, option.value))) : children
+                    })
                 })
-            })
-        }) ]
+            }) ]
+        })
     });
     // Handle item selection
         if (glass) {
@@ -12550,7 +13095,7 @@ const composablesImport =  Object.freeze( Object.defineProperty({
             blurAmount: 1,
             saturation: 180,
             aberrationIntensity: .2,
-            cornerRadius: 12,
+            borderRadius: 12,
             mode: "shader"
         }, glassProps = !0 === glass ? defaultGlassProps : {
             ...defaultGlassProps,
@@ -12564,9 +13109,7 @@ const composablesImport =  Object.freeze( Object.defineProperty({
     return selectContent;
 }));
 
-/**
- * Select - A component for dropdown selection
- */ Select.displayName = "Select";
+Select.displayName = "Select", Select.Option = SelectOption;
 
 /**
  * Radio - A component for radio button inputs
@@ -12610,7 +13153,7 @@ const Radio =  memo((({label: label, checked: checked = !1, onChange: onChange,
             blurAmount: 1,
             saturation: 160,
             aberrationIntensity: .3,
-            cornerRadius: 6,
+            borderRadius: 6,
             mode: "shader"
         }, glassProps = !0 === glass ? defaultGlassProps : {
             ...defaultGlassProps,
@@ -12676,7 +13219,7 @@ const Textarea =  memo( forwardRef((({value: value, defaultValue: defaultValue,
             blurAmount: 1,
             saturation: 180,
             aberrationIntensity: 1,
-            cornerRadius: 8,
+            borderRadius: 8,
             mode: "shader"
         }, glassProps = !0 === glass ? defaultGlassProps : {
             ...defaultGlassProps,
@@ -13444,7 +13987,7 @@ const Hero = ({title: title, subtitle: subtitle, text: text, imageSrc: imageSrc,
     autoplay: !0,
     loop: !0,
     muted: !0
-}, backgroundSlider: backgroundSlider, headingLevel: headingLevel = "h1", reverseOnMobile: reverseOnMobile = !1, parts: parts, ...rest}) => {
+}, backgroundSlider: backgroundSlider, headingLevel: headingLevel = "h1", reverseOnMobile: reverseOnMobile = !1, parts: parts, backgroundElement: backgroundElement, ...rest}) => {
     // Define dynamic heading tag
     const HeadingTag = headingLevel, {generateHeroClassNames: generateHeroClassNames, generateImageColClass: generateImageColClass, generateContentColClass: generateContentColClass, hasBackgroundImage: hasBackgroundImage, hasForegroundImage: hasForegroundImage, useGridLayout: useGridLayout, heroRef: heroRef, videoRef: videoRef, backgroundSlider: sliderHook, hasBackgroundSlider: hasBackgroundSlider} = useHero({
         title: title,
@@ -13517,7 +14060,7 @@ const Hero = ({title: title, subtitle: subtitle, text: text, imageSrc: imageSrc,
                 blurAmount: 3,
                 saturation: 180,
                 aberrationIntensity: 0,
-                cornerRadius: 8,
+                borderRadius: 8,
                 overLight: !1,
                 mode: "standard",
                 children: jsxs("div", {
@@ -13603,7 +14146,7 @@ const Hero = ({title: title, subtitle: subtitle, text: text, imageSrc: imageSrc,
         "data-parallax": parallax ? "true" : void 0,
         "data-parallax-intensity": parallax ? parallaxIntensity : void 0,
         ...rest,
-        children: [ (() => {
+        children: [ backgroundElement, (() => {
             // Render background slider if configured
             if (hasBackgroundSlider && backgroundSlider && sliderHook) {
                 const {slides: slides, transition: transition = "fade", transitionDuration: transitionDuration = 1e3} = backgroundSlider, {currentIndex: currentIndex, slideRefs: slideRefs, videoRefs: videoRefs} = sliderHook;
@@ -13698,7 +14241,81 @@ const Hero = ({title: title, subtitle: subtitle, text: text, imageSrc: imageSrc,
     });
 };
 
-Hero.displayName = "Hero";
+Hero.Title = ({children: children, className: className, level: level = "h1", ...props}) => jsx(level, {
+    className: `${HERO.SELECTORS.TITLE.replace(".", "")} ${className || ""}`.trim(),
+    ...props,
+    children: children
+}), Hero.Subtitle = ({children: children, className: className, ...props}) => jsx("p", {
+    className: `${HERO.SELECTORS.SUBTITLE.replace(".", "")} ${className || ""}`.trim(),
+    ...props,
+    children: children
+}), Hero.Text = ({children: children, className: className, ...props}) => jsx("p", {
+    className: `${HERO.SELECTORS.TEXT.replace(".", "")} ${className || ""}`.trim(),
+    ...props,
+    children: children
+}), Hero.Actions = ({children: children, className: className, ...props}) => jsx("div", {
+    className: `${HERO.SELECTORS.ACTIONS.replace(".", "")} ${className || ""}`.trim(),
+    ...props,
+    children: children
+}), Hero.Content = ({children: children, className: className, style: style, glass: glass, ...props}) => {
+    const contentClass = `${HERO.SELECTORS.CONTENT.replace(".", "")} ${className || ""}`.trim();
+    if (glass) {
+        const glassProps = "boolean" == typeof glass ? {
+            displacementScale: 60,
+            blurAmount: 3,
+            saturation: 180,
+            aberrationIntensity: 0,
+            borderRadius: 8,
+            overLight: !1,
+            mode: "standard"
+        } : glass;
+        return jsx("div", {
+            className: contentClass,
+            style: style,
+            ...props,
+            children: jsx(AtomixGlass, {
+                ...glassProps,
+                children: jsx("div", {
+                    className: "u-p-4",
+                    children: children
+                })
+            })
+        });
+    }
+    return jsx("div", {
+        className: contentClass,
+        style: style,
+        ...props,
+        children: children
+    });
+}, Hero.Image = ({src: src, alt: alt = "", className: className, wrapperClassName: wrapperClassName, wrapperStyle: wrapperStyle, ...props}) => jsx("div", {
+    className: `${HERO.SELECTORS.IMAGE_WRAPPER.replace(".", "")} ${wrapperClassName || ""}`.trim(),
+    style: wrapperStyle,
+    children: jsx("img", {
+        src: src,
+        alt: alt,
+        className: `${HERO.SELECTORS.IMAGE.replace(".", "")} ${className || ""}`.trim(),
+        ...props
+    })
+}), Hero.Background = ({className: className, style: style, src: src, children: children, ...props}) => jsxs("div", {
+    className: `${HERO.SELECTORS.BG.replace(".", "")} ${className || ""}`.trim(),
+    style: style,
+    ...props,
+    children: [ src && jsx("img", {
+        src: src,
+        alt: "Background",
+        className: HERO.SELECTORS.BG_IMAGE.replace(".", "")
+    }), children ]
+}), Hero.displayName = "Hero";
+
+const ListItem =  forwardRef((({children: children, className: className = "", ...props}, ref) => jsx("li", {
+    ref: ref,
+    className: `${LIST.ITEM_CLASS} ${className}`.trim(),
+    ...props,
+    children: children
+})));
+
+ListItem.displayName = "ListItem";
 
 const List =  memo((({children: children, variant: variant = "default", className: className = "", style: style, ...props}) => {
     var _context;
@@ -13709,14 +14326,14 @@ const List =  memo((({children: children, variant: variant = "default", classNam
         className: listClasses,
         style: style,
         ...props,
-        children: React.Children.map(children, (child => jsx("li", {
+        children: React.Children.map(children, (child =>  React.isValidElement(child) && child.type === ListItem ? child : jsx("li", {
             className: "c-list__item",
             children: child
         })))
     });
 }));
 
-List.displayName = "List";
+List.displayName = "List", List.Item = ListItem;
 
 const ListGroup = ({children: children, className: className = "", style: style, variant: variant = "default"}) => {
     // Generate CSS classes
@@ -13762,7 +14379,7 @@ const Messages = ({messages: messages = [], otherAvatar: otherAvatar, selfAvatar
         onSendMessage: onSendMessage
     }), messagesId = id || `messages-${Math.random().toString(36).substr(2, 9)}`, inputId = `${messagesId}-input`, defaultGlassProps = {
         displacementScale: 150,
-        cornerRadius: 12,
+        borderRadius: 12,
         elasticity: 0,
         aberrationIntensity: 2
     }, messagesClasses = `${MESSAGES.CLASSES.BASE} ${glass ? "c-messages--glass" : ""} ${disabled ? "is-disabled" : ""} ${className}`, messagesContent = jsxs(Fragment, {
@@ -13908,7 +14525,7 @@ const Messages = ({messages: messages = [], otherAvatar: otherAvatar, selfAvatar
                 children: jsx("div", {
                     className: "c-messages__glass-content",
                     style: {
-                        borderRadius: glassProps.cornerRadius
+                        borderRadius: glassProps.borderRadius
                     },
                     children: messagesContent
                 })
@@ -13933,10 +14550,59 @@ const Messages = ({messages: messages = [], otherAvatar: otherAvatar, selfAvatar
  * Messages component for displaying a chat interface with messages, images, and file attachments
  */ Messages.displayName = "Messages";
 
-/**
- * Modal component for displaying overlay content
- */
-const Modal =  memo((({children: children, isOpen: isOpen = !1, onOpenChange: onOpenChange, onClose: onClose, onOpen: onOpen, title: title, subtitle: subtitle, size: size = "md", backdrop: backdrop = !0, keyboard: keyboard = !0, className: className = "", style: style, closeButton: closeButton = !0, footer: footer, glass: glass, ...props}) => {
+const ModalHeader =  forwardRef((({title: title, subtitle: subtitle, closeButton: closeButton, onClose: onClose, children: children, className: className = "", ...props}, ref) => jsxs("div", {
+    ref: ref,
+    className: `c-modal__header ${className}`.trim(),
+    ...props,
+    children: [ jsxs("div", {
+        className: "c-modal__header-content",
+        children: [ title && jsx("h3", {
+            className: "c-modal__title",
+            children: title
+        }), subtitle && jsx("p", {
+            className: "c-modal__sub",
+            children: subtitle
+        }), children ]
+    }), closeButton && jsx("button", {
+        type: "button",
+        className: "c-modal__close c-btn js-modal-close",
+        onClick: onClose,
+        "aria-label": "Close modal",
+        children: jsx("svg", {
+            width: "20",
+            height: "20",
+            viewBox: "0 0 20 20",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            children: jsx("path", {
+                d: "M16.0672 15.1828C16.1253 15.2409 16.1713 15.3098 16.2028 15.3857C16.2342 15.4615 16.2504 15.5429 16.2504 15.625C16.2504 15.7071 16.2342 15.7884 16.2028 15.8643C16.1713 15.9402 16.1253 16.0091 16.0672 16.0672C16.0091 16.1252 15.9402 16.1713 15.8643 16.2027C15.7885 16.2342 15.7071 16.2503 15.625 16.2503C15.5429 16.2503 15.4616 16.2342 15.3857 16.2027C15.3098 16.1713 15.2409 16.1252 15.1828 16.0672L10 10.8836L4.8172 16.0672C4.69992 16.1844 4.54086 16.2503 4.37501 16.2503C4.20916 16.2503 4.0501 16.1844 3.93282 16.0672C3.81555 15.9499 3.74966 15.7908 3.74966 15.625C3.74966 15.4591 3.81555 15.3001 3.93282 15.1828L9.11642 9.99998L3.93282 4.81717C3.81555 4.69989 3.74966 4.54083 3.74966 4.37498C3.74966 4.20913 3.81555 4.05007 3.93282 3.93279C4.0501 3.81552 4.20916 3.74963 4.37501 3.74963C4.54086 3.74963 4.69992 3.81552 4.8172 3.93279L10 9.11639L15.1828 3.93279C15.3001 3.81552 15.4592 3.74963 15.625 3.74963C15.7909 3.74963 15.9499 3.81552 16.0672 3.93279C16.1845 4.05007 16.2504 4.20913 16.2504 4.37498C16.2504 4.54083 16.1845 4.69989 16.0672 4.81717L10.8836 9.99998L16.0672 15.1828Z",
+                fill: "#141414"
+            })
+        })
+    }) ]
+})));
+
+ModalHeader.displayName = "ModalHeader";
+
+const ModalBody =  forwardRef((({children: children, className: className = "", ...props}, ref) => jsx("div", {
+    ref: ref,
+    className: `c-modal__body ${className}`.trim(),
+    ...props,
+    children: children
+})));
+
+ModalBody.displayName = "ModalBody";
+
+const ModalFooter =  forwardRef((({children: children, className: className = "", ...props}, ref) => jsx("div", {
+    ref: ref,
+    className: `c-modal__footer ${className}`.trim(),
+    ...props,
+    children: children
+})));
+
+ModalFooter.displayName = "ModalFooter";
+
+const ModalImpl =  memo((({children: children, isOpen: isOpen = !1, onOpenChange: onOpenChange, onClose: onClose, onOpen: onOpen, title: title, subtitle: subtitle, size: size = "md", backdrop: backdrop = !0, keyboard: keyboard = !0, className: className = "", style: style, closeButton: closeButton = !0, footer: footer, glass: glass, ...props}) => {
     const modalRef = useRef(null), dialogRef = useRef(null), backdropRef = useRef(null), {isOpen: isOpenState, open: open, close: close} = 
     /**
  * Hook for managing modal state
@@ -13986,43 +14652,26 @@ const Modal =  memo((({children: children, isOpen: isOpen = !1, onOpenChange: on
         };
     }), [ isOpenState, close, keyboard ]);
     // Handle backdrop click
-    const modalClasses = [ "c-modal", isOpenState ? MODAL.CLASSES.IS_OPEN : "", size ? `c-modal--${size}` : "", glass ? "c-modal--glass" : "", className ].filter(Boolean).join(" "), modalContent = jsxs("div", {
+    const modalClasses = [ "c-modal", isOpenState ? MODAL.CLASSES.IS_OPEN : "", size ? `c-modal--${size}` : "", glass ? "c-modal--glass" : "", className ].filter(Boolean).join(" "), hasCompoundComponents = React.Children.toArray(children).some((child => {
+        var _context;
+        
+        return React.isValidElement(child) && _includesInstanceProperty(_context = [ "ModalHeader", "ModalBody", "ModalFooter" ]).call(_context, child.type.displayName);
+    })), modalContent = jsx("div", {
         className: "c-modal__content",
-        children: [ (title || closeButton) && jsxs("div", {
-            className: "c-modal__header",
-            children: [ jsxs("div", {
-                className: "c-modal__header-content",
-                children: [ title && jsx("h3", {
-                    className: "c-modal__title",
-                    children: title
-                }), subtitle && jsx("p", {
-                    className: "c-modal__sub",
-                    children: subtitle
-                }) ]
-            }), closeButton && jsx("button", {
-                type: "button",
-                className: "c-modal__close c-btn js-modal-close",
-                onClick: close,
-                "aria-label": "Close modal",
-                children: jsx("svg", {
-                    width: "20",
-                    height: "20",
-                    viewBox: "0 0 20 20",
-                    fill: "none",
-                    xmlns: "http://www.w3.org/2000/svg",
-                    children: jsx("path", {
-                        d: "M16.0672 15.1828C16.1253 15.2409 16.1713 15.3098 16.2028 15.3857C16.2342 15.4615 16.2504 15.5429 16.2504 15.625C16.2504 15.7071 16.2342 15.7884 16.2028 15.8643C16.1713 15.9402 16.1253 16.0091 16.0672 16.0672C16.0091 16.1252 15.9402 16.1713 15.8643 16.2027C15.7885 16.2342 15.7071 16.2503 15.625 16.2503C15.5429 16.2503 15.4616 16.2342 15.3857 16.2027C15.3098 16.1713 15.2409 16.1252 15.1828 16.0672L10 10.8836L4.8172 16.0672C4.69992 16.1844 4.54086 16.2503 4.37501 16.2503C4.20916 16.2503 4.0501 16.1844 3.93282 16.0672C3.81555 15.9499 3.74966 15.7908 3.74966 15.625C3.74966 15.4591 3.81555 15.3001 3.93282 15.1828L9.11642 9.99998L3.93282 4.81717C3.81555 4.69989 3.74966 4.54083 3.74966 4.37498C3.74966 4.20913 3.81555 4.05007 3.93282 3.93279C4.0501 3.81552 4.20916 3.74963 4.37501 3.74963C4.54086 3.74963 4.69992 3.81552 4.8172 3.93279L10 9.11639L15.1828 3.93279C15.3001 3.81552 15.4592 3.74963 15.625 3.74963C15.7909 3.74963 15.9499 3.81552 16.0672 3.93279C16.1845 4.05007 16.2504 4.20913 16.2504 4.37498C16.2504 4.54083 16.1845 4.69989 16.0672 4.81717L10.8836 9.99998L16.0672 15.1828Z",
-                        fill: "#141414"
-                    })
-                })
+        children: hasCompoundComponents ? React.Children.map(children, (child =>  React.isValidElement(child) && "ModalHeader" === child.type.displayName ?  React.cloneElement(child, {
+            onClose: child.props.onClose || close
+        }) : child)) : jsxs(Fragment, {
+            children: [ (title || closeButton) && jsx(ModalHeader, {
+                title: title,
+                subtitle: subtitle,
+                closeButton: closeButton,
+                onClose: close
+            }), jsx(ModalBody, {
+                children: children
+            }), footer && jsx(ModalFooter, {
+                children: footer
             }) ]
-        }), jsx("div", {
-            className: "c-modal__body",
-            children: children
-        }), footer && jsx("div", {
-            className: "c-modal__footer",
-            children: footer
-        }) ]
+        })
     });
     // Assemble classes
         return jsxs("div", {
@@ -14067,24 +14716,15 @@ const Modal =  memo((({children: children, isOpen: isOpen = !1, onOpenChange: on
     });
 }));
 
-Modal.displayName = "Modal";
+ModalImpl.displayName = "Modal";
 
-/**
- * Nav component provides a container for navigation items with proper alignment and accessibility.
- *
- * @example
- * ```tsx
- * <Nav alignment="center">
- *   <NavItem href="/">Home</NavItem>
- *   <NavItem href="/about">About</NavItem>
- *   <NavDropdown title="Services">
- *     <MenuItem href="/web">Web Design</MenuItem>
- *     <MenuItem href="/mobile">Mobile Apps</MenuItem>
- *   </NavDropdown>
- * </Nav>
- * ```
- */
-const Nav =  forwardRef((({children: children, alignment: alignment = "start", variant: variant = "default", className: className = "", disabled: disabled = !1, glass: glass}, ref) => {
+// Attach subcomponents
+const ModalWithSubcomponents = ModalImpl;
+
+ModalWithSubcomponents.Header = ModalHeader, ModalWithSubcomponents.Body = ModalBody, 
+ModalWithSubcomponents.Footer = ModalFooter;
+
+const Modal = ModalWithSubcomponents, Nav =  forwardRef((({children: children, alignment: alignment = "start", variant: variant = "default", className: className = "", disabled: disabled = !1, glass: glass}, ref) => {
     const {generateNavClass: generateNavClass} = useNav({
         alignment: alignment,
         variant: variant
@@ -14113,7 +14753,7 @@ const Nav =  forwardRef((({children: children, alignment: alignment = "start", v
         const defaultGlassProps = {
             displacementScale: 60,
             blurAmount: 1.5,
-            cornerRadius: 8,
+            borderRadius: 8,
             mode: "shader"
         }, glassProps = !0 === glass ? defaultGlassProps : {
             ...defaultGlassProps,
@@ -14127,7 +14767,21 @@ const Nav =  forwardRef((({children: children, alignment: alignment = "start", v
     return navContent;
 }));
 
-Nav.displayName = "Nav";
+/**
+ * Nav component provides a container for navigation items with proper alignment and accessibility.
+ *
+ * @example
+ * ```tsx
+ * <Nav alignment="center">
+ *   <NavItem href="/">Home</NavItem>
+ *   <NavItem href="/about">About</NavItem>
+ *   <NavDropdown title="Services">
+ *     <MenuItem href="/web">Web Design</MenuItem>
+ *     <MenuItem href="/mobile">Mobile Apps</MenuItem>
+ *   </NavDropdown>
+ * </Nav>
+ * ```
+ */ Nav.displayName = "Nav";
 
 /**
  * NavItem component represents a single navigation item that can be a link, dropdown trigger, or mega menu trigger.
@@ -14305,7 +14959,7 @@ const Navbar =  forwardRef((({brand: brand, children: children, variant: variant
         const defaultGlassProps = {
             displacementScale: 30,
             blurAmount: 2,
-            cornerRadius: 0,
+            borderRadius: 0,
             elasticity: 0,
             mode: "shader",
             shaderVariant: "premiumGlass"
@@ -14686,7 +15340,7 @@ const SideMenu =  forwardRef((({title: title, children: children, menuItems: men
         const defaultGlassProps = {
             displacementScale: 70,
             blurAmount: 2,
-            cornerRadius: 12,
+            borderRadius: 12,
             mode: "shader"
         }, glassProps = !0 === glass ? defaultGlassProps : {
             ...defaultGlassProps,
@@ -16259,7 +16913,7 @@ const PopoverContext =  createContext({
                     blurAmount: 1,
                     saturation: 160,
                     aberrationIntensity: .5,
-                    cornerRadius: 8,
+                    borderRadius: 8,
                     mode: "shader"
                 }, glassProps = !0 === glass ? defaultGlassProps : {
                     ...defaultGlassProps,
@@ -16310,7 +16964,14 @@ const PopoverContext =  createContext({
 /**
  * Hook for managing rating component state and interactions
  */
-const Rating =  forwardRef((({value: valueProp = 0, defaultValue: defaultValue, maxValue: maxValue = 5, allowHalf: allowHalf = !1, readOnly: readOnly = !1, size: size = "md", variant: variant, onChange: onChange, className: className = "", style: style, label: label, id: id, useVanillaJS: useVanillaJS = !1, glass: glass, ...restProps}, ref) => {
+const calculateStarValue = (e, starValue, allowHalf) => {
+    if (!allowHalf) return starValue;
+    // Get the star element's bounding rectangle
+        const starRect = e.currentTarget.getBoundingClientRect(), starCenterX = starRect.left + starRect.width / 2, adjustedValue = e.clientX < starCenterX ? starValue - .5 : starValue;
+    // Calculate the x position within the star
+        return Math.max(.5, adjustedValue);
+ // Ensure minimum of 0.5
+}, Rating =  forwardRef((({value: valueProp = 0, defaultValue: defaultValue, maxValue: maxValue = 5, allowHalf: allowHalf = !1, readOnly: readOnly = !1, size: size = "md", variant: variant, onChange: onChange, className: className = "", style: style, label: label, id: id, useVanillaJS: useVanillaJS = !1, glass: glass, ...restProps}, ref) => {
     const internalRef = useRef(null), ratingInstance = useRef(null), {currentValue: currentValue, hoverValue: hoverValue, focusedIndex: focusedIndex, setHoverValue: setHoverValue, setFocused: setFocused, handleKeyDown: handleKeyDown} = (({value: value = 0, maxValue: maxValue = 5, allowHalf: allowHalf = !1, readOnly: readOnly = !1, onChange: onChange}) => {
         // Determine if component is in controlled mode
         const isControlled = void 0 !== onChange, [internalValue, setInternalValue] = useState(value), [hoverValue, setHoverValue] = useState(null), [focusedIndex, setFocusedIndex] = useState(null), currentValue = isControlled ? value : internalValue, handleMouseEnter = useCallback((starValue => {
@@ -16372,30 +17033,14 @@ const Rating =  forwardRef((({value: valueProp = 0, defaultValue: defaultValue,
         readOnly: readOnly,
         onChange: onChange
     }), forkedRef = useForkRef(internalRef, ref), handleMouseEnter = useCallback(((e, starValue) => {
-        if (!readOnly) if (allowHalf) {
-            // Get the star element's bounding rectangle
-            const starRect = e.currentTarget.getBoundingClientRect(), starCenterX = starRect.left + starRect.width / 2, adjustedValue = e.clientX < starCenterX ? starValue - .5 : starValue;
-            // Calculate the x position within the star
-                        setHoverValue(Math.max(.5, adjustedValue));
-        } else setHoverValue(starValue);
+        readOnly || setHoverValue(calculateStarValue(e, starValue, !!allowHalf));
     }), [ readOnly, allowHalf, setHoverValue ]), handleMouseMove = useCallback(((e, starValue) => {
-        if (readOnly || !allowHalf) return;
-        // Get the star element's bounding rectangle
-                const starRect = e.currentTarget.getBoundingClientRect(), starCenterX = starRect.left + starRect.width / 2, adjustedValue = e.clientX < starCenterX ? starValue - .5 : starValue;
-        // Calculate the x position within the star
-                setHoverValue(Math.max(.5, adjustedValue));
-    } // Ensure minimum of 0.5
-    ), [ readOnly, allowHalf, setHoverValue ]), handleMouseLeave = useCallback((() => {
+        !readOnly && allowHalf && setHoverValue(calculateStarValue(e, starValue, !!allowHalf));
+    }), [ readOnly, allowHalf, setHoverValue ]), handleMouseLeave = useCallback((() => {
         readOnly || setHoverValue(null);
     }), [ readOnly, setHoverValue ]), handleClick = useCallback(((e, starValue) => {
         if (readOnly) return;
-        let newValue = starValue;
-        if (allowHalf) {
-            // Get the star element's bounding rectangle
-            const starRect = e.currentTarget.getBoundingClientRect(), starCenterX = starRect.left + starRect.width / 2;
-            // Calculate the x position within the star
-                        newValue = e.clientX < starCenterX ? starValue - .5 : starValue, newValue = Math.max(.5, newValue);
-        }
+        const newValue = calculateStarValue(e, starValue, !!allowHalf);
         onChange?.(newValue);
     }), [ readOnly, onChange, allowHalf ]);
     // Use vanilla JS implementation if specified
@@ -16500,7 +17145,7 @@ const Rating =  forwardRef((({value: valueProp = 0, defaultValue: defaultValue,
             blurAmount: 1,
             saturation: 160,
             aberrationIntensity: .5,
-            cornerRadius: 8,
+            borderRadius: 8,
             mode: "shader"
         }, glassProps = !0 === glass ? defaultGlassProps : {
             ...defaultGlassProps,
@@ -16514,21 +17159,8 @@ const Rating =  forwardRef((({value: valueProp = 0, defaultValue: defaultValue,
     return ratingContent;
 }));
 
-/**
- * Rating component for displaying and collecting star ratings
- *
- * @example
- * // Basic usage
- * <Rating value={3} onChange={handleRatingChange} />
- *
- * @example
- * // Read-only with custom variant
- * <Rating value={4.5} readOnly variant="warning" />
- *
- * @example
- * // With half-star support
- * <Rating value={3.5} allowHalf maxValue={5} />
- */ Rating.displayName = "Rating";
+// Helper function to calculate star value based on mouse position
+Rating.displayName = "Rating";
 
 /**
  * ProductReview component for collecting user ratings and feedback
@@ -16673,7 +17305,7 @@ const Progress =  memo( forwardRef((({value: value, variant: variant = "primary"
         const defaultGlassProps = {
             displacementScale: 30,
             blurAmount: .5,
-            cornerRadius: 8,
+            borderRadius: 8,
             mode: "shader"
         }, glassProps = !0 === glass ? defaultGlassProps : {
             ...defaultGlassProps,
@@ -17003,39 +17635,72 @@ const Slider =  forwardRef(((props, ref) => {
 
 Slider.displayName = "Slider";
 
+const StepsItem =  forwardRef((({children: children, className: className = "", number: number, title: title, active: active, completed: completed, index: index, ...props}, ref) => {
+    const itemClasses = [ "c-steps__item", active ? STEPS.CLASSES.ACTIVE : "", completed ? STEPS.CLASSES.COMPLETED : "", className ].filter(Boolean).join(" ");
+    return jsxs("div", {
+        ref: ref,
+        className: itemClasses,
+        "aria-current": active ? "step" : void 0,
+        "data-index": index,
+        ...props,
+        children: [ jsx("div", {
+            className: "c-steps__line"
+        }), jsxs("div", {
+            className: "c-steps__content",
+            children: [ null != number && jsx("div", {
+                className: "c-steps__number",
+                children: number
+            }), title && jsx("div", {
+                className: "c-steps__text",
+                children: title
+            }), children && jsx("div", {
+                className: "c-steps__custom-content",
+                children: children
+            }) ]
+        }) ]
+    });
+}));
+
+StepsItem.displayName = "StepsItem";
+
 /**
  * Steps component for displaying a sequence of steps
  */
-const Steps = ({items: items, activeIndex: activeIndex = 0, vertical: vertical = !1, onStepChange: onStepChange, className: className = "", style: style, glass: glass}) => {
+const Steps = ({items: items, activeIndex: activeIndex = 0, vertical: vertical = !1, onStepChange: onStepChange, className: className = "", style: style, glass: glass, children: children}) => {
     const [currentStep, setCurrentStep] = useState(activeIndex);
     // Update steps when activeIndex prop changes
-        useEffect((() => {
+        let content;
+    useEffect((() => {
         currentStep !== activeIndex && setCurrentStep(activeIndex);
-    }), [ activeIndex ]);
+    }), [ activeIndex ]), 
+    // Legacy rendering
+    content = items && items.length > 0 ? items.map(((item, index) => jsx(StepsItem, {
+        index: index,
+        number: item.number,
+        title: item.text,
+        active: index <= currentStep,
+        completed: index < currentStep,
+        children: item.content
+    }, `step-${index}`))) : Children.map(children, ((child, index) => {
+        if ( isValidElement(child)) {
+            const childProps = child.props, isActive = childProps.active ?? index <= currentStep, isCompleted = childProps.completed ?? index < currentStep, number = childProps.number ?? index + 1;
+            // Inject active/completed based on index if not explicitly provided
+                        
+            return cloneElement(child, {
+                index: index,
+                active: isActive,
+                completed: isCompleted,
+                number: number
+            });
+        }
+        return child;
+    }));
     const stepsContent = jsx("div", {
         className: `c-steps ${vertical ? STEPS.CLASSES.VERTICAL : ""} ${className}`,
         style: style,
         role: "navigation",
         "aria-label": "Steps",
-        children: items.map(((item, index) => jsxs("div", {
-            className: `c-steps__item ${index <= currentStep ? STEPS.CLASSES.ACTIVE : ""} ${index < currentStep ? STEPS.CLASSES.COMPLETED : ""}`,
-            "aria-current": index === currentStep ? "step" : void 0,
-            children: [ jsx("div", {
-                className: "c-steps__line"
-            }), jsxs("div", {
-                className: "c-steps__content",
-                children: [ jsx("div", {
-                    className: "c-steps__number",
-                    children: item.number
-                }), jsx("div", {
-                    className: "c-steps__text",
-                    children: item.text
-                }), item.content && jsx("div", {
-                    className: "c-steps__custom-content",
-                    children: item.content
-                }) ]
-            }) ]
-        }, `step-${index}`)))
+        children: content
     });
     if (glass) {
         // Default glass settings for steps
@@ -17044,7 +17709,7 @@ const Steps = ({items: items, activeIndex: activeIndex = 0, vertical: vertical =
             blurAmount: 1,
             saturation: 160,
             aberrationIntensity: .5,
-            cornerRadius: 8,
+            borderRadius: 8,
             mode: "shader"
         }, glassProps = !0 === glass ? defaultGlassProps : {
             ...defaultGlassProps,
@@ -17058,24 +17723,104 @@ const Steps = ({items: items, activeIndex: activeIndex = 0, vertical: vertical =
     return stepsContent;
 };
 
-Steps.displayName = "Steps";
+Steps.displayName = "Steps", Steps.Item = StepsItem, Steps.Step = StepsItem;
 
-/**
- * Tabs component for switching between different content panels
- */
-const Tabs =  memo((({items: items, activeIndex: activeIndex = TAB.DEFAULTS.ACTIVE_INDEX, onTabChange: onTabChange, className: className = "", style: style, glass: glass}) => {
-    const [currentTab, setCurrentTab] = useState(activeIndex), tabContent = jsxs("div", {
-        className: `c-tabs js-atomix-tab ${className}`,
-        style: style,
+// Context for compound usage
+const TabsContext =  createContext({
+    currentTab: 0,
+    handleTabClick: () => {}
+}), TabsList =  forwardRef((({children: children, className: className = "", ...props}, ref) => jsx("ul", {
+    ref: ref,
+    className: `c-tabs__nav ${className}`.trim(),
+    ...props,
+    children: React.Children.map(children, ((child, index) =>  React.isValidElement(child) ?  React.cloneElement(child, {
+        index: index
+    }) : child))
+})));
+
+// Compound components
+TabsList.displayName = "TabsList";
+
+const TabsTrigger =  forwardRef((({children: children, className: className = "", index: index, onClick: onClick, ...props}, ref) => {
+    const {currentTab: currentTab, handleTabClick: handleTabClick} = useContext(TabsContext);
+    // Safety check if used outside context or without index
+        void 0 === index && console.warn("TabsTrigger requires an index prop or must be a direct child of TabsList");
+    const isActive = void 0 !== index && currentTab === index;
+    return jsx("li", {
+        className: "c-tabs__nav-item",
+        children: jsx("button", {
+            ref: ref,
+            className: `c-tabs__nav-btn ${isActive ? TAB.CLASSES.ACTIVE : ""} ${className}`.trim(),
+            onClick: e => {
+                void 0 !== index && handleTabClick(index), onClick?.(e);
+            },
+            "data-tabindex": index,
+            role: "tab",
+            "aria-selected": isActive,
+            "aria-controls": `tab-panel-${index}`,
+            type: "button",
+            ...props,
+            children: children
+        })
+    });
+}));
+
+TabsTrigger.displayName = "TabsTrigger";
+
+const TabsPanels =  forwardRef((({children: children, className: className = "", ...props}, ref) => jsx("div", {
+    ref: ref,
+    className: `c-tabs__panels ${className}`.trim(),
+    ...props,
+    children: React.Children.map(children, ((child, index) =>  React.isValidElement(child) ?  React.cloneElement(child, {
+        index: index
+    }) : child))
+})));
+
+TabsPanels.displayName = "TabsPanels";
+
+const TabsPanel =  forwardRef((({children: children, className: className = "", index: index, style: style, ...props}, ref) => {
+    const {currentTab: currentTab} = useContext(TabsContext), isActive = void 0 !== index && currentTab === index;
+    return jsx("div", {
+        ref: ref,
+        className: `c-tabs__panel ${isActive ? TAB.CLASSES.ACTIVE : ""} ${className}`.trim(),
+        "data-tabindex": index,
+        id: `tab-panel-${index}`,
+        role: "tabpanel",
+        "aria-labelledby": `tab-nav-${index}`,
+        style: {
+            height: isActive ? "auto" : "0px",
+            opacity: isActive ? 1 : 0,
+            overflow: "hidden",
+            transition: "height 0.3s ease, opacity 0.3s ease",
+            ...style
+        },
+        ...props,
+        children: jsx("div", {
+            className: "c-tabs__panel-body",
+            children: children
+        })
+    });
+}));
+
+TabsPanel.displayName = "TabsPanel";
+
+const Tabs =  memo((({items: items, activeIndex: activeIndex = TAB.DEFAULTS.ACTIVE_INDEX, onTabChange: onTabChange, className: className = "", style: style, glass: glass, children: children}) => {
+    const [currentTab, setCurrentTab] = useState(activeIndex), handleTabClick = index => {
+        setCurrentTab(index), onTabChange && onTabChange(index);
+    };
+    // Handle tab change
+        // Determine content based on mode (legacy items vs compound children)
+    let content;
+    // Use items prop if provided
+        // Legacy mode
+    content = items && items.length > 0 ? jsxs(Fragment, {
         children: [ jsx("ul", {
             className: "c-tabs__nav",
             children: items.map(((item, index) => jsx("li", {
                 className: "c-tabs__nav-item",
                 children: jsx("button", {
                     className: `c-tabs__nav-btn ${index === currentTab ? TAB.CLASSES.ACTIVE : ""}`,
-                    onClick: () => (index => {
-                        setCurrentTab(index), onTabChange && onTabChange(index);
-                    })(index),
+                    onClick: () => handleTabClick(index),
                     "data-tabindex": index,
                     role: "tab",
                     "aria-selected": index === currentTab,
@@ -17103,16 +17848,26 @@ const Tabs =  memo((({items: items, activeIndex: activeIndex = TAB.DEFAULTS.ACTI
                 })
             }, `tab-panel-${index}`)))
         }) ]
+    }) : jsx(TabsContext.Provider, {
+        value: {
+            currentTab: currentTab,
+            handleTabClick: handleTabClick
+        },
+        children: children
     });
-    // Handle tab change
-        if (glass) {
+    const wrapper = jsx("div", {
+        className: `c-tabs js-atomix-tab ${className}`,
+        style: style,
+        children: content
+    });
+    if (glass) {
         // Default glass settings for tabs
         const defaultGlassProps = {
             displacementScale: 60,
             blurAmount: 1,
             saturation: 160,
             aberrationIntensity: .5,
-            cornerRadius: 8,
+            borderRadius: 8,
             mode: "shader"
         }, glassProps = !0 === glass ? defaultGlassProps : {
             ...defaultGlassProps,
@@ -17120,13 +17875,14 @@ const Tabs =  memo((({items: items, activeIndex: activeIndex = TAB.DEFAULTS.ACTI
         };
         return jsx(AtomixGlass, {
             ...glassProps,
-            children: tabContent
+            children: wrapper
         });
     }
-    return tabContent;
+    return wrapper;
 }));
 
-Tabs.displayName = "Tabs";
+Tabs.displayName = "Tabs", Tabs.List = TabsList, Tabs.Trigger = TabsTrigger, Tabs.Panels = TabsPanels, 
+Tabs.Panel = TabsPanel;
 
 /**
  * Testimonial component for displaying customer quotes and feedback
@@ -17354,7 +18110,7 @@ const Toggle = ({checked: controlledChecked, defaultChecked: defaultChecked = !1
             blurAmount: 1,
             saturation: 160,
             aberrationIntensity: .5,
-            cornerRadius: 8,
+            borderRadius: 8,
             mode: "shader"
         }, glassProps = !0 === glass ? defaultGlassProps : {
             ...defaultGlassProps,