@shohojdhara/atomix 0.3.15 → 0.4.1

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
@@ -2170,7 +2540,7 @@ 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, 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, children: children}) {
     // State
     const [isHovered, setIsHovered] = useState(!1), [isActive, setIsActive] = useState(!1), [glassSize, setGlassSize] = useState({
         width: 270,
@@ -2371,9 +2741,8 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
         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;
+                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 = {
@@ -2382,8 +2751,8 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
         };
         // 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 ]);
+        setInternalMouseOffset(newOffset), setInternalGlobalMousePosition(globalPos);
+    }), [ mouseContainer, glassRef, externalGlobalMousePosition, externalMouseOffset, effectiveDisableEffects ]);
     // Subscribe to shared mouse tracker
     useEffect((() => {
         if (externalGlobalMousePosition && externalMouseOffset) 
@@ -2823,7 +3192,69 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
     });
 }
 
-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 +3264,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 +3329,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",
@@ -3162,596 +3603,193 @@ const AtomixLogo = ({height: height = 24, width: width = 24, color: color = "cur
                     let dx = pos.x * w - x, dy = pos.y * h - y;
                     // Apply edge smoothing for Apple-like effect
                     const edgeX = 2 * Math.min(x / w, (w - x) / w), edgeY = 2 * Math.min(y / h, (h - y) / h), edgeFactor = Math.min(edgeX, edgeY);
-                    dx *= smoothStep(0, .2, edgeFactor), dy *= smoothStep(0, .2, edgeFactor), maxScale = Math.max(maxScale, Math.abs(dx), Math.abs(dy)), 
-                    rawValues.push(dx, dy);
-                }
-                // Improved normalization to prevent artifacts while maintaining intensity
-                                maxScale = Math.max(maxScale, 1);
-                // Create ImageData and fill it
-                const imageData = this.context.createImageData(w, h), data = imageData.data;
-                // Convert to image data with smoother normalization
-                let rawIndex = 0;
-                for (let y = 0; y < h; y++) for (let x = 0; x < w; x++) {
-                    const dx = rawValues[rawIndex++] || 0, dy = rawValues[rawIndex++] || 0, edgeDistance = Math.min(x, y, w - x - 1, h - y - 1), edgeFactor = Math.min(1, edgeDistance / 2), r = dx * edgeFactor / maxScale + .5, g = dy * edgeFactor / maxScale + .5, pixelIndex = 4 * (y * w + x);
-                    data[pixelIndex] = clampValue(255 * r, 0, 255), // Red channel (X displacement)
-                    data[pixelIndex + 1] = clampValue(255 * g, 0, 255), // Green channel (Y displacement)
-                    data[pixelIndex + 2] = clampValue(255 * g, 0, 255), // Blue channel (Y displacement for SVG filter compatibility)
-                    data[pixelIndex + 3] = 255;
-                }
-                return this.context.putImageData(imageData, 0, 0), this.canvas.toDataURL();
-            } catch (error) {
-                // Graceful fallback on error
-                return console.warn("ShaderDisplacementGenerator: Error generating shader map, using fallback", error), 
-                "";
- // Return empty string as fallback
-                        }
-        }
-        destroy() {
-            try {
-                // Clear canvas data to free memory
-                this.context && this.context.clearRect(0, 0, this.canvas.width, this.canvas.height), 
-                // Reduce memory footprint by setting dimensions to 0
-                this.canvas.width = 0, this.canvas.height = 0, 
-                // Remove from DOM
-                this.canvas.remove();
-            } catch (e) {
-                // Silently handle cleanup errors
-                console.warn("ShaderDisplacementGenerator: Error during cleanup", e);
-            }
-        }
-        getScale() {
-            return this.canvasDPI;
-        }
-    },
-    fragmentShaders: fragmentShaders
-}, Symbol.toStringTag, {
-    value: "Module"
-})), sizeMap = {
-    xs: 16,
-    sm: 20,
-    md: 24,
-    lg: 32,
-    xl: 40
-}, Icon = ({name: name, size: size = "md", weight: weight = "regular", color: color, className: className = "", style: style, alt: alt}) => {
-    // Get the icon component from Phosphor
-    const IconComponent = PhosphorIcons[name];
-    return IconComponent ? jsx("span", {
-        className: `c-icon c-icon--${size} ${className}`,
-        style: style,
-        "aria-hidden": !alt,
-        title: alt,
-        children: jsx(IconComponent, {
-            size: "string" == typeof size ? sizeMap[size] || 24 : size,
-            weight: weight,
-            color: color,
-            "aria-label": alt
-        })
-    }) : (console.warn(`Icon "${name}" not found in Phosphor Icons`), null);
-    // 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}) => {
-    const [imageError, setImageError] = useState(!1), avatarClasses = [ AVATAR.CLASSES.BASE, "md" !== size && `c-avatar--${size}`, circle && AVATAR.CLASSES.CIRCLE, disabled && "is-disabled", className ].filter(Boolean).join(" ");
-    return jsx("div", {
-        className: avatarClasses,
-        onClick: onClick ? e => {
-            !disabled && onClick && onClick(e);
-        } : void 0,
-        role: onClick ? "button" : void 0,
-        tabIndex: onClick && !disabled ? 0 : void 0,
-        "aria-disabled": disabled || void 0,
-        style: style,
-        children: src && !imageError ? jsx("img", {
-            src: src,
-            alt: alt,
-            className: "c-avatar__image",
-            onError: () => {
-                setImageError(!0);
-            }
-        }) : jsx("span", initials ? {
-            className: "c-avatar__initials",
-            children: initials
-        } : icon ? {
-            className: "c-avatar__icon",
-            children: icon
-        } : {
-            className: "c-avatar__icon",
-            children: jsx(Icon, {
-                name: "User",
-                size: "xs" === size ? "xs" : "sm" === size ? "sm" : "md"
-            })
-        })
-    });
-}));
-
-Avatar.displayName = "Avatar";
-
-const AvatarGroup = ({children: children, max: max, stacked: stacked = !1, className: className = "", style: style, moreText: moreText}) => {
-    // Generate CSS classes
-    const avatarGroupClasses = [ AVATAR_GROUP.CLASSES.BASE, stacked && AVATAR_GROUP.CLASSES.STACKED, className ].filter(Boolean).join(" "), avatarChildren = Children.toArray(children).filter((child =>  isValidElement(child) && child.type === Avatar)), showMoreIndicator = void 0 !== max && avatarChildren.length > max, visibleAvatars = showMoreIndicator ? avatarChildren.slice(0, max) : avatarChildren, hiddenAvatarCount = avatarChildren.length - (max || 0), firstAvatar =  isValidElement(avatarChildren[0]) ? avatarChildren[0].props : null, avatarSize = firstAvatar?.size || "md", isCircle = firstAvatar?.circle || !1, moreClasses = [ AVATAR.CLASSES.BASE, AVATAR_GROUP.CLASSES.MORE, "md" !== avatarSize && `c-avatar--${avatarSize}`, isCircle && "c-avatar--circle" ].filter(Boolean).join(" ");
-    // Get valid Avatar children
-        return jsxs("div", {
-        className: avatarGroupClasses,
-        style: style,
-        children: [ visibleAvatars.map(((child, index) =>  isValidElement(child) ?  cloneElement(child, {
-            key: index,
-            ...child.props
-        }) : null)), showMoreIndicator && jsx("div", {
-            className: moreClasses,
-            children: moreText || `+${hiddenAvatarCount}`
-        }) ]
-    });
-};
-
-/**
- * Badge state and functionality
- * @param initialProps - Initial badge properties
- * @returns Badge state and methods
- */
-function useBadge(initialProps) {
-    // Default badge properties
-    const defaultProps = {
-        variant: "primary",
-        size: "md",
-        disabled: !1,
-        ...initialProps
-    };
-    /**
-   * Generate badge class based on properties
-   * @param props - Badge properties
-   * @returns Class string
-   */    return {
-        defaultProps: defaultProps,
-        generateBadgeClass: props => {
-            const {variant: variant = defaultProps.variant, size: size = defaultProps.size, disabled: disabled = defaultProps.disabled, className: className = ""} = props;
-            return `${BADGE.BASE_CLASS} ${variant ? `${BADGE.VARIANT_PREFIX}${variant}` : ""} ${"md" === size ? "" : `${BADGE.SIZE_PREFIX}${size}`} ${disabled ? "c-badge--disabled" : ""} ${className}`.trim();
+                    dx *= smoothStep(0, .2, edgeFactor), dy *= smoothStep(0, .2, edgeFactor), maxScale = Math.max(maxScale, Math.abs(dx), Math.abs(dy)), 
+                    rawValues.push(dx, dy);
+                }
+                // Improved normalization to prevent artifacts while maintaining intensity
+                                maxScale = Math.max(maxScale, 1);
+                // Create ImageData and fill it
+                const imageData = this.context.createImageData(w, h), data = imageData.data;
+                // Convert to image data with smoother normalization
+                let rawIndex = 0;
+                for (let y = 0; y < h; y++) for (let x = 0; x < w; x++) {
+                    const dx = rawValues[rawIndex++] || 0, dy = rawValues[rawIndex++] || 0, edgeDistance = Math.min(x, y, w - x - 1, h - y - 1), edgeFactor = Math.min(1, edgeDistance / 2), r = dx * edgeFactor / maxScale + .5, g = dy * edgeFactor / maxScale + .5, pixelIndex = 4 * (y * w + x);
+                    data[pixelIndex] = clampValue(255 * r, 0, 255), // Red channel (X displacement)
+                    data[pixelIndex + 1] = clampValue(255 * g, 0, 255), // Green channel (Y displacement)
+                    data[pixelIndex + 2] = clampValue(255 * g, 0, 255), // Blue channel (Y displacement for SVG filter compatibility)
+                    data[pixelIndex + 3] = 255;
+                }
+                return this.context.putImageData(imageData, 0, 0), this.canvas.toDataURL();
+            } catch (error) {
+                // Graceful fallback on error
+                return console.warn("ShaderDisplacementGenerator: Error generating shader map, using fallback", error), 
+                "";
+ // Return empty string as fallback
+                        }
         }
-    };
-}
-
-AvatarGroup.displayName = "AvatarGroup";
-
-const Badge =  memo((({label: label, variant: variant = "primary", size: size = "md", disabled: disabled = !1, icon: icon, onRemove: onRemove, "aria-label": ariaLabel, className: className = "", glass: glass, style: style}) => {
-    const {generateBadgeClass: generateBadgeClass} = useBadge({
-        variant: variant,
-        size: size,
-        disabled: disabled
-    }), ref = useRef(null), badgeClass = generateBadgeClass({
-        variant: variant,
-        size: size,
-        disabled: disabled,
-        className: `${className} ${glass ? "c-badge--glass" : ""}`.trim()
-    }), badgeElement = jsxs("span", {
-        className: badgeClass,
-        "aria-disabled": disabled,
-        "aria-label": ariaLabel,
-        ref: ref,
-        style: style,
-        children: [ icon && jsx("span", {
-            className: BADGE.ICON_CLASS,
-            children: icon
-        }), jsx("span", {
-            children: label
-        }), onRemove && jsx("button", {
-            type: "button",
-            className: "c-badge__close",
-            onClick: onRemove,
-            "aria-label": "Remove badge",
-            disabled: disabled,
-            children: "×"
-        }) ]
-    });
-    if (glass) {
-        // Default glass settings for badges
-        const defaultGlassProps = {
-            displacementScale: 20,
-            cornerRadius: ref.current?.getBoundingClientRect().width ? ref.current?.getBoundingClientRect().width / 2 : 16,
-            className: "c-badge--glass",
-            elasticity: 0
-        }, glassProps = !0 === glass ? defaultGlassProps : {
-            ...defaultGlassProps,
-            ...glass
-        };
-        return jsx(AtomixGlass, {
-            ...glassProps,
-            children: badgeElement
-        });
-    }
-    return badgeElement;
-}));
-
-Badge.displayName = "Badge";
-
-/**
- * Container component for creating responsive layouts.
- * Uses the CSS container classes defined in _objects.container.scss.
- *
- * @example
- * ```tsx
- * <Container>
- *   Content with responsive max-width
- * </Container>
- *
- * <Container type="fluid">
- *   Full width content
- * </Container>
- *
- * <Container type="md">
- *   Content with max-width at md breakpoint
- * </Container>
- * ```
- */
-const Container =  forwardRef((({children: children, className: className = "", type: type, ...props}, ref) => {
-    let containerClass = "o-container";
-    return type && (containerClass = `o-container-${type}`), jsx("div", {
-        ref: ref,
-        className: `${containerClass} ${className}`.trim(),
-        ...props,
-        children: children
-    });
-}));
-
-Container.displayName = "Container";
-
-/**
- * useBlock composable for Block component
- * Provides utility functions for generating consistent block styling
- */
-const useBlock = () => ({
-    generateBlockClass: ({spacing: spacing = BLOCK.SPACING.DEFAULT, background: background = "", fullWidth: fullWidth = !1, className: className = ""}) => {
-        const classes = [ BLOCK.BASE_CLASS ];
-        // Add spacing class
-                // Add background class
-        if (spacing && "none" !== spacing && classes.push(`${BLOCK.SPACING_PREFIX}${spacing}`), 
-        background) {
-            const bgClass = BLOCK.CLASSES[`BG_${background.toUpperCase()}`];
-            bgClass && classes.push(bgClass);
+        destroy() {
+            try {
+                // Clear canvas data to free memory
+                this.context && this.context.clearRect(0, 0, this.canvas.width, this.canvas.height), 
+                // Reduce memory footprint by setting dimensions to 0
+                this.canvas.width = 0, this.canvas.height = 0, 
+                // Remove from DOM
+                this.canvas.remove();
+            } catch (e) {
+                // Silently handle cleanup errors
+                console.warn("ShaderDisplacementGenerator: Error during cleanup", e);
+            }
         }
-        // Add full-width class
-                return fullWidth && classes.push(BLOCK.CLASSES.FULL_WIDTH), 
-        // Add custom className
-        className && classes.push(className), classes.filter(Boolean).join(" ");
-    }
-}), Block =  forwardRef((({children: children, as: Component = "section", spacing: spacing = "md", container: container = {}, fullWidth: fullWidth = !1, className: className = "", style: style, background: background = "", ...props}, ref) => {
-    const {generateBlockClass: generateBlockClass} = useBlock(), blockClasses = generateBlockClass({
-        spacing: spacing,
-        background: background,
-        fullWidth: fullWidth,
-        className: className
-    });
-    return jsx(Component, {
-        ref: ref,
-        className: blockClasses,
-        style: style,
-        ...props,
-        children: fullWidth ? children : jsx(Container, {
-            type: container.type,
-            className: container.className,
-            children: children
-        })
-    });
-}));
-
-/**
- * Block component for creating structured section layouts.
- * Provides consistent spacing, backgrounds, and container behavior for content sections.
- *
- * @example
- * ```tsx
- * // Basic usage
- * <Block>
- *   <h2>Section Title</h2>
- *   <p>Section content goes here...</p>
- * </Block>
- *
- * // With custom spacing and background
- * <Block spacing="lg" background="subtle">
- *   <h2>Featured Section</h2>
- *   <p>This section has extra padding and a subtle background.</p>
- * </Block>
- *
- * // Full-width with custom container
- * <Block fullWidth background="primary">
- *   <Container type="lg">
- *     <h2>Hero Section</h2>
- *     <p>Full-width section with centered content.</p>
- *   </Container>
- * </Block>
- *
- * // As article element
- * <Block as="article" spacing="xl" background="accent">
- *   <h1>Blog Post</h1>
- *   <p>Article content...</p>
- * </Block>
- * ```
- */ Block.displayName = "Block";
-
-const Breadcrumb =  memo((({items: items, divider: divider, className: className = "", "aria-label": ariaLabel = "Breadcrumb", LinkComponent: LinkComponent, style: style}) => {
-    const breadcrumbClasses = [ BREADCRUMB.CLASSES.BASE, className ].filter(Boolean).join(" ");
-    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);
-            }))
-        })
-    });
-}));
-
-/**
- * Spinner state and functionality
- * @param initialProps - Initial spinner properties
- * @returns Spinner state and methods
- */
-function useSpinner(initialProps) {
-    // Default spinner properties
-    const defaultProps = {
-        variant: "primary",
-        size: "md",
-        fullscreen: !1,
-        ...initialProps
-    };
-    /**
-   * Generate spinner class based on properties
-   * @param props - Spinner properties
-   * @returns Class string
-   */    return {
-        defaultProps: defaultProps,
-        generateSpinnerClass: props => {
-            const {variant: variant = defaultProps.variant, size: size = defaultProps.size, fullscreen: fullscreen = defaultProps.fullscreen, className: className = ""} = props;
-            return `c-spinner ${variant ? `c-spinner--${variant}` : ""} ${"md" !== size ? `c-spinner--${size}` : ""} ${fullscreen ? "c-spinner--fullscreen" : ""} ${className}`.trim();
+        getScale() {
+            return this.canvasDPI;
         }
-    };
-}
+    },
+    fragmentShaders: fragmentShaders
+}, Symbol.toStringTag, {
+    value: "Module"
+})), sizeMap = {
+    xs: 16,
+    sm: 20,
+    md: 24,
+    lg: 32,
+    xl: 40
+}, Icon = ({name: name, size: size = "md", weight: weight = "regular", color: color, className: className = "", style: style, alt: alt}) => {
+    // Get the icon component from Phosphor
+    const IconComponent = PhosphorIcons[name];
+    return IconComponent ? jsx("span", {
+        className: `c-icon c-icon--${size} ${className}`,
+        style: style,
+        "aria-hidden": !alt,
+        title: alt,
+        children: jsx(IconComponent, {
+            size: "string" == typeof size ? sizeMap[size] || 24 : size,
+            weight: weight,
+            color: color,
+            "aria-label": alt
+        })
+    }) : (console.warn(`Icon "${name}" not found in Phosphor Icons`), null);
+    // Convert string size to pixel value if needed
+};
 
-Breadcrumb.displayName = "Breadcrumb";
+Icon.displayName = "Icon";
 
-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({
-        size: size,
-        variant: variant,
-        fullscreen: fullscreen
-    }), spinnerClass = generateSpinnerClass({
-        size: size,
-        variant: variant,
-        fullscreen: fullscreen,
-        className: `${className} ${glass ? "c-spinner--glass" : ""}`.trim()
-    }), spinnerContent = jsx("div", {
-        className: spinnerClass,
+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}) => {
+    const [imageError, setImageError] = useState(!1), avatarClasses = [ AVATAR.CLASSES.BASE, "md" !== size && `c-avatar--${size}`, circle && AVATAR.CLASSES.CIRCLE, disabled && "is-disabled", className ].filter(Boolean).join(" ");
+    return jsx("div", {
+        className: avatarClasses,
+        onClick: onClick ? e => {
+            !disabled && onClick && onClick(e);
+        } : void 0,
+        role: onClick ? "button" : void 0,
+        tabIndex: onClick && !disabled ? 0 : void 0,
+        "aria-disabled": disabled || void 0,
         style: style,
-        role: role,
-        "aria-label": ariaLabel || "Loading",
-        children: jsx("span", {
-            className: SPINNER.VISUALLY_HIDDEN,
-            children: ariaLabel || "Loading..."
+        children: src && !imageError ? jsx("img", {
+            src: src,
+            alt: alt,
+            className: "c-avatar__image",
+            onError: () => {
+                setImageError(!0);
+            }
+        }) : jsx("span", initials ? {
+            className: "c-avatar__initials",
+            children: initials
+        } : icon ? {
+            className: "c-avatar__icon",
+            children: icon
+        } : {
+            className: "c-avatar__icon",
+            children: jsx(Icon, {
+                name: "User",
+                size: "xs" === size ? "xs" : "sm" === size ? "sm" : "md"
+            })
         })
     });
-    if (glass) {
-        const defaultGlassProps = {
-            displacementScale: 20,
-            blurAmount: 1,
-            cornerRadius: 999,
-            mode: "shader"
-        }, glassProps = !0 === glass ? defaultGlassProps : {
-            ...defaultGlassProps,
-            ...glass
-        };
-        return jsx(AtomixGlass, {
-            ...glassProps,
-            children: spinnerContent
-        });
-    }
-    return spinnerContent;
 }));
 
-Spinner.displayName = "Spinner";
+Avatar.displayName = "Avatar";
+
+const AvatarGroup = ({children: children, max: max, stacked: stacked = !1, className: className = "", style: style, moreText: moreText}) => {
+    // Generate CSS classes
+    const avatarGroupClasses = [ AVATAR_GROUP.CLASSES.BASE, stacked && AVATAR_GROUP.CLASSES.STACKED, className ].filter(Boolean).join(" "), avatarChildren = Children.toArray(children).filter((child =>  isValidElement(child) && child.type === Avatar)), showMoreIndicator = void 0 !== max && avatarChildren.length > max, visibleAvatars = showMoreIndicator ? avatarChildren.slice(0, max) : avatarChildren, hiddenAvatarCount = avatarChildren.length - (max || 0), firstAvatar =  isValidElement(avatarChildren[0]) ? avatarChildren[0].props : null, avatarSize = firstAvatar?.size || "md", isCircle = firstAvatar?.circle || !1, moreClasses = [ AVATAR.CLASSES.BASE, AVATAR_GROUP.CLASSES.MORE, "md" !== avatarSize && `c-avatar--${avatarSize}`, isCircle && "c-avatar--circle" ].filter(Boolean).join(" ");
+    // Get valid Avatar children
+        return jsxs("div", {
+        className: avatarGroupClasses,
+        style: style,
+        children: [ visibleAvatars.map(((child, index) =>  isValidElement(child) ?  cloneElement(child, {
+            key: index,
+            ...child.props
+        }) : null)), showMoreIndicator && jsx("div", {
+            className: moreClasses,
+            children: moreText || `+${hiddenAvatarCount}`
+        }) ]
+    });
+};
 
 /**
- * Theme Naming Utility
- *
- * Provides consistent naming conventions for CSS classes, CSS variables,
- * and JavaScript properties throughout the theme system.
+ * Badge state and functionality
+ * @param initialProps - Initial badge properties
+ * @returns Badge state and methods
  */
-class ThemeNaming {
-    /**
-   * Set the global prefix for all theme tokens
-   * @param newPrefix - New prefix to use
-   */
-    static setPrefix(newPrefix) {
-        this.prefix = newPrefix;
-    }
-    /**
-   * Get the current prefix
-   */    static getPrefix() {
-        return this.prefix;
-    }
-    /**
-   * 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();
-    }
-    /**
-   * Convert kebab-case to camelCase for JavaScript properties
-   * @param str - String to convert
-   */    static kebabToCamel(str) {
-        return str.replace(/-([a-z])/g, (g => g[1]?.toUpperCase() ?? ""));
-    }
-    /**
-   * Create a CSS variable name
-   * @param token - Token name in camelCase
-   */    static cssVar(token) {
-        return `--${this.prefix}-${this.camelToKebab(token)}`;
-    }
-    /**
-   * Create a BEM CSS class name
-   * @param block - Block name
-   * @param element - Element name (optional)
-   * @param modifier - Modifier name (optional)
-   */    static bemClass(block, element, modifier) {
-        let className = `c-${block}`;
-        return element && (className += `__${element}`), modifier && (className += `--${modifier}`), 
-        className;
-    }
-    /**
-   * Create a variant class name
-   * @param component - Component name
-   * @param variant - Variant name
-   */    static variantClass(component, variant) {
-        return `c-${component}--${variant}`;
-    }
-    /**
-   * Create a size class name
-   * @param component - Component name
-   * @param size - Size name
-   */    static sizeClass(component, size) {
-        return `c-${component}--${size}`;
-    }
-    /**
-   * Create a state class name
-   * @param component - Component name
-   * @param state - State name
-   */    static stateClass(component, state) {
-        return `c-${component}--${state}`;
-    }
-    /**
-   * Create a utility class name
-   * @param utility - Utility name
-   */    static utilityClass(utility) {
-        return `u-${utility}`;
-    }
-    /**
-   * Create a layout class name
-   * @param layout - Layout name
-   */    static layoutClass(layout) {
-        return `l-${layout}`;
-    }
-    /**
-   * Create an object class name
-   * @param object - Object name
-   */    static objectClass(object) {
-        return `o-${object}`;
-    }
-}
-
-ThemeNaming.prefix = "atomix";
-
-const Button =  React.memo( forwardRef((({label: label, children: children, onClick: onClick, variant: variant = "primary", size: size = "md", disabled: disabled = !1, loading: loading = !1, loadingText: loadingText, icon: icon, iconName: iconName, iconSize: iconSize = "sm", iconPosition: iconPosition = "start", iconOnly: iconOnly = !1, rounded: rounded = !1, fullWidth: fullWidth = !1, block: block = !1, active: active = !1, selected: selected = !1, type: type = "button", className: className = "", as: Component = "button", href: href, target: target, glass: glass, onHover: onHover, onFocus: onFocus, onBlur: onBlur, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-expanded": ariaExpanded, "aria-controls": ariaControls, tabIndex: tabIndex, style: style, LinkComponent: LinkComponent, ...props}, ref) => {
-    const isDisabled = disabled || loading, shouldRenderAsLink = Boolean(href && !isDisabled), iconElement = iconName ? jsx(Icon, {
-        name: iconName,
-        size: iconSize
-    }) : icon, buttonClass = [ BUTTON.BASE_CLASS, ThemeNaming.variantClass(THEME_NAMING.BUTTON_PREFIX, variant), "md" !== size ? ThemeNaming.sizeClass(THEME_NAMING.BUTTON_PREFIX, size) : "", iconOnly ? ThemeNaming.stateClass(THEME_NAMING.BUTTON_PREFIX, THEME_NAMING.ICON_ELEMENT) : "", rounded ? ThemeNaming.stateClass(THEME_NAMING.BUTTON_PREFIX, "rounded") : "", isDisabled ? ThemeNaming.stateClass(THEME_NAMING.BUTTON_PREFIX, "disabled") : "", glass ? ThemeNaming.stateClass(THEME_NAMING.BUTTON_PREFIX, "glass") : "", loading ? BUTTON.CLASSES.LOADING : "", fullWidth ? BUTTON.CLASSES.FULL_WIDTH : "", block ? BUTTON.CLASSES.BLOCK : "", active ? BUTTON.CLASSES.ACTIVE : "", selected ? BUTTON.CLASSES.SELECTED : "", className ].filter(Boolean).join(" "), handleClickEvent = useCallback((event => {
-        isDisabled ? event.preventDefault() : onClick?.(event);
-    }), [ isDisabled, onClick ]), handleMouseEnter = useCallback((event => {
-        isDisabled || onHover?.(event);
-    }), [ isDisabled, onHover ]), handleFocusEvent = useCallback((event => {
-        isDisabled || onFocus?.(event);
-    }), [ isDisabled, onFocus ]), handleBlurEvent = useCallback((event => {
-        isDisabled || onBlur?.(event);
-    }), [ isDisabled, onBlur ]), buttonText = loading && loadingText ? loadingText : label || children, spinnerSize = "sm" === size ? "sm" : "lg" === size ? "md" : "sm", safeAriaLabel = ariaLabel || (iconOnly ? "string" == typeof label ? label : "string" == typeof children ? children : void 0 : void 0), buttonContent = jsxs(Fragment, {
-        children: [ loading && jsx("span", {
-            className: ThemeNaming.bemClass(THEME_NAMING.BUTTON_PREFIX, THEME_NAMING.SPINNER_ELEMENT),
-            "aria-hidden": "true",
-            children: jsx(Spinner, {
-                size: spinnerSize,
-                variant: "link" === variant || "string" == typeof variant && variant.startsWith("outline-") ? "primary" : "danger" === variant ? "error" : variant
-            })
-        }), iconElement && !loading && jsx("span", {
-            className: ThemeNaming.bemClass(THEME_NAMING.BUTTON_PREFIX, THEME_NAMING.ICON_ELEMENT),
-            "aria-hidden": "true",
-            children: iconElement
-        }), !iconOnly && buttonText && jsx("span", {
-            className: ThemeNaming.bemClass(THEME_NAMING.BUTTON_PREFIX, THEME_NAMING.LABEL_ELEMENT),
-            children: buttonText
-        }) ]
-    }), buttonProps = {
-        className: buttonClass,
-        onClick: handleClickEvent,
-        onMouseEnter: onHover ? handleMouseEnter : void 0,
-        onFocus: onFocus ? handleFocusEvent : void 0,
-        onBlur: onBlur ? handleBlurEvent : void 0,
-        "aria-disabled": isDisabled,
-        "aria-busy": loading,
-        "aria-label": safeAriaLabel,
-        "aria-describedby": ariaDescribedBy,
-        "aria-expanded": ariaExpanded,
-        "aria-controls": ariaControls,
-        tabIndex: void 0 !== tabIndex ? tabIndex : isDisabled ? -1 : 0,
-        style: style,
-        ...props
-    };
-    // Determine if we should render as a link
-    // If disabled, we still check href, but we might want to render as button or anchor with aria-disabled
-    // The previous logic was Boolean(href && !isDisabled). This meant if disabled, it renders as <button>.
-    // This is a safe fallback for disabled links.
-        let content;
-    // Render as anchor if href is provided
-        if (shouldRenderAsLink) 
-    // Use custom LinkComponent if provided (e.g., Next.js Link)
-    if (LinkComponent) {
-        const LinkComp = LinkComponent, linkProps = {
-            ...buttonProps,
-            ref: ref,
-            // LinkComponent usually forwards ref to anchor
-            href: href,
-            target: target,
-            rel: "_blank" === target ? "noopener noreferrer" : void 0
-        };
-        content = jsx(LinkComp, {
-            ...linkProps,
-            children: buttonContent
-        });
-    } else 
-    // Fallback to regular anchor tag
-    content = jsx("a", {
-        ...buttonProps,
-        ref: ref,
-        href: href,
-        target: target,
-        rel: "_blank" === target ? "noopener noreferrer" : void 0,
-        children: buttonContent
-    }); else 
-    // Default button rendering
-    content = jsx(Component, {
-        ...buttonProps,
+function useBadge(initialProps) {
+    // Default badge properties
+    const defaultProps = {
+        variant: "primary",
+        size: "md",
+        disabled: !1,
+        ...initialProps
+    };
+    /**
+   * Generate badge class based on properties
+   * @param props - Badge properties
+   * @returns Class string
+   */    return {
+        defaultProps: defaultProps,
+        generateBadgeClass: props => {
+            const {variant: variant = defaultProps.variant, size: size = defaultProps.size, disabled: disabled = defaultProps.disabled, className: className = ""} = props;
+            return `${BADGE.BASE_CLASS} ${variant ? `${BADGE.VARIANT_PREFIX}${variant}` : ""} ${"md" === size ? "" : `${BADGE.SIZE_PREFIX}${size}`} ${disabled ? "c-badge--disabled" : ""} ${className}`.trim();
+        }
+    };
+}
+
+AvatarGroup.displayName = "AvatarGroup";
+
+const Badge =  memo((({label: label, variant: variant = "primary", size: size = "md", disabled: disabled = !1, icon: icon, onRemove: onRemove, "aria-label": ariaLabel, className: className = "", glass: glass, style: style}) => {
+    const {generateBadgeClass: generateBadgeClass} = useBadge({
+        variant: variant,
+        size: size,
+        disabled: disabled
+    }), ref = useRef(null), badgeClass = generateBadgeClass({
+        variant: variant,
+        size: size,
+        disabled: disabled,
+        className: `${className} ${glass ? "c-badge--glass" : ""}`.trim()
+    }), badgeElement = jsxs("span", {
+        className: badgeClass,
+        "aria-disabled": disabled,
+        "aria-label": ariaLabel,
         ref: ref,
-        type: "button" === Component ? type : void 0,
-        disabled: isDisabled,
-        children: buttonContent
+        style: style,
+        children: [ icon && jsx("span", {
+            className: BADGE.ICON_CLASS,
+            children: icon
+        }), jsx("span", {
+            children: label
+        }), onRemove && jsx("button", {
+            type: "button",
+            className: "c-badge__close",
+            onClick: onRemove,
+            "aria-label": "Remove badge",
+            disabled: disabled,
+            children: "×"
+        }) ]
     });
     if (glass) {
-        // Default glass props
+        // Default glass settings for badges
         const defaultGlassProps = {
             displacementScale: 20,
-            blurAmount: 0,
-            saturation: 200,
+            cornerRadius: ref.current?.getBoundingClientRect().width ? ref.current?.getBoundingClientRect().width / 2 : 16,
+            className: "c-badge--glass",
             elasticity: 0
         }, glassProps = !0 === glass ? defaultGlassProps : {
             ...defaultGlassProps,
@@ -3759,420 +3797,557 @@ const Button =  React.memo( forwardRef((({label: label, children: children, onCl
         };
         return jsx(AtomixGlass, {
             ...glassProps,
-            children: content
+            children: badgeElement
         });
     }
-    return content;
-})));
+    return badgeElement;
+}));
 
-Button.displayName = "Button";
+Badge.displayName = "Badge";
 
 /**
- * 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.
+ * Container component for creating responsive layouts.
+ * Uses the CSS container classes defined in _objects.container.scss.
  *
  * @example
  * ```tsx
- * <ButtonGroup>
- *   <Button label="Left" />
- *   <Button label="Middle" />
- *   <Button label="Right" />
- * </ButtonGroup>
+ * <Container>
+ *   Content with responsive max-width
+ * </Container>
+ *
+ * <Container type="fluid">
+ *   Full width content
+ * </Container>
+ *
+ * <Container type="md">
+ *   Content with max-width at md breakpoint
+ * </Container>
  * ```
  */
-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))
+const Container =  forwardRef((({children: children, className: className = "", type: type, ...props}, ref) => {
+    let containerClass = "o-container";
+    return type && (containerClass = `o-container-${type}`), jsx("div", {
+        ref: ref,
+        className: `${containerClass} ${className}`.trim(),
+        ...props,
+        children: children
     });
-};
+}));
 
-ButtonGroup.displayName = "ButtonGroup";
+Container.displayName = "Container";
 
-var commonjsGlobal = "undefined" != typeof globalThis ? globalThis : "undefined" != typeof window ? window : "undefined" != typeof global ? global : "undefined" != typeof self ? self : {};
+/**
+ * useBlock composable for Block component
+ * Provides utility functions for generating consistent block styling
+ */
+const useBlock = () => ({
+    generateBlockClass: ({spacing: spacing = BLOCK.SPACING.DEFAULT, background: background = "", fullWidth: fullWidth = !1, className: className = ""}) => {
+        const classes = [ BLOCK.BASE_CLASS ];
+        // Add spacing class
+                // Add background class
+        if (spacing && "none" !== spacing && classes.push(`${BLOCK.SPACING_PREFIX}${spacing}`), 
+        background) {
+            const bgClass = BLOCK.CLASSES[`BG_${background.toUpperCase()}`];
+            bgClass && classes.push(bgClass);
+        }
+        // Add full-width class
+                return fullWidth && classes.push(BLOCK.CLASSES.FULL_WIDTH), 
+        // Add custom className
+        className && classes.push(className), classes.filter(Boolean).join(" ");
+    }
+}), Block =  forwardRef((({children: children, as: Component = "section", spacing: spacing = "md", container: container = {}, fullWidth: fullWidth = !1, className: className = "", style: style, background: background = "", ...props}, ref) => {
+    const {generateBlockClass: generateBlockClass} = useBlock(), blockClasses = generateBlockClass({
+        spacing: spacing,
+        background: background,
+        fullWidth: fullWidth,
+        className: className
+    });
+    return jsx(Component, {
+        ref: ref,
+        className: blockClasses,
+        style: style,
+        ...props,
+        children: fullWidth ? children : jsx(Container, {
+            type: container.type,
+            className: container.className,
+            children: children
+        })
+    });
+}));
 
-function getDefaultExportFromCjs(x) {
-    return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x.default : x;
-}
+/**
+ * Block component for creating structured section layouts.
+ * Provides consistent spacing, backgrounds, and container behavior for content sections.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Block>
+ *   <h2>Section Title</h2>
+ *   <p>Section content goes here...</p>
+ * </Block>
+ *
+ * // With custom spacing and background
+ * <Block spacing="lg" background="subtle">
+ *   <h2>Featured Section</h2>
+ *   <p>This section has extra padding and a subtle background.</p>
+ * </Block>
+ *
+ * // Full-width with custom container
+ * <Block fullWidth background="primary">
+ *   <Container type="lg">
+ *     <h2>Hero Section</h2>
+ *     <p>Full-width section with centered content.</p>
+ *   </Container>
+ * </Block>
+ *
+ * // As article element
+ * <Block as="article" spacing="xl" background="accent">
+ *   <h1>Blog Post</h1>
+ *   <p>Article content...</p>
+ * </Block>
+ * ```
+ */ Block.displayName = "Block";
 
-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);
+const BreadcrumbItem =  forwardRef((({children: children, href: href, active: active, icon: icon, onClick: onClick, className: className = "", style: style, linkAs: LinkComponent, 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
     };
-}, 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;
+    return jsx("li", {
+        ref: ref,
+        className: itemClasses,
+        style: style,
+        ...props,
+        children: href && !active ? jsx(LinkComponent || "a", {
+            href: href,
+            ...commonLinkProps,
+            children: linkContent
+        }) : jsx("span", {
+            className: BREADCRUMB.CLASSES.LINK,
+            children: linkContent
+        })
+    });
+}));
 
-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;
+BreadcrumbItem.displayName = "BreadcrumbItem";
 
-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]);
+const Breadcrumb =  memo((({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;
+                
+                return cloneElement(child, {
+                    active: childProps.active ?? (!!isLast || void 0),
+                    linkAs: childProps.linkAs ?? LinkComponent
+                });
+            }
+            return child;
+        }));
+    }
+    return jsx("nav", {
+        "aria-label": ariaLabel,
+        style: style,
+        children: jsx("ol", {
+            className: breadcrumbClasses,
+            children: content
+        })
+    });
+}));
 
-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";
+/**
+ * Spinner state and functionality
+ * @param initialProps - Initial spinner properties
+ * @returns Spinner state and methods
+ */
+function useSpinner(initialProps) {
+    // Default spinner properties
+    const defaultProps = {
+        variant: "primary",
+        size: "md",
+        fullscreen: !1,
+        ...initialProps
+    };
+    /**
+   * Generate spinner class based on properties
+   * @param props - Spinner properties
+   * @returns Class string
+   */    return {
+        defaultProps: defaultProps,
+        generateSpinnerClass: props => {
+            const {variant: variant = defaultProps.variant, size: size = defaultProps.size, fullscreen: fullscreen = defaultProps.fullscreen, className: className = ""} = props;
+            return `c-spinner ${variant ? `c-spinner--${variant}` : ""} ${"md" !== size ? `c-spinner--${size}` : ""} ${fullscreen ? "c-spinner--fullscreen" : ""} ${className}`.trim();
         }
-    }(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
+    };
+}
+
+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({
+        size: size,
+        variant: variant,
+        fullscreen: fullscreen
+    }), spinnerClass = generateSpinnerClass({
+        size: size,
+        variant: variant,
+        fullscreen: fullscreen,
+        className: `${className} ${glass ? "c-spinner--glass" : ""}`.trim()
+    }), spinnerContent = jsx("div", {
+        className: spinnerClass,
+        style: style,
+        role: role,
+        "aria-label": ariaLabel || "Loading",
+        children: jsx("span", {
+            className: SPINNER.VISUALLY_HIDDEN,
+            children: ariaLabel || "Loading..."
+        })
+    });
+    if (glass) {
+        const defaultGlassProps = {
+            displacementScale: 20,
+            blurAmount: 1,
+            cornerRadius: 999,
+            mode: "shader"
+        }, glassProps = !0 === glass ? defaultGlassProps : {
+            ...defaultGlassProps,
+            ...glass
+        };
+        return jsx(AtomixGlass, {
+            ...glassProps,
+            children: spinnerContent
         });
-    } catch (error) {
-        globalThis$7[key] = value;
     }
-    return value;
-}("__core-js_shared__", {});
+    return spinnerContent;
+}));
 
-/* 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"
-});
+Spinner.displayName = "Spinner";
 
-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");
+/**
+ * Theme Naming Utility
+ *
+ * Provides consistent naming conventions for CSS classes, CSS variables,
+ * and JavaScript properties throughout the theme system.
+ */
+class ThemeNaming {
+    /**
+   * Set the global prefix for all theme tokens
+   * @param newPrefix - New prefix to use
+   */
+    static setPrefix(newPrefix) {
+        this.prefix = newPrefix;
+    }
+    /**
+   * Get the current prefix
+   */    static getPrefix() {
+        return this.prefix;
+    }
+    /**
+   * Convert camelCase to kebab-case for CSS variables
+   * @param str - String to convert
+   */    static camelToKebab(str) {
+        return str.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+    }
+    /**
+   * Convert kebab-case to camelCase for JavaScript properties
+   * @param str - String to convert
+   */    static kebabToCamel(str) {
+        return str.replace(/-([a-z])/g, (g => g[1]?.toUpperCase() ?? ""));
+    }
+    /**
+   * Create a CSS variable name
+   * @param token - Token name in camelCase
+   */    static cssVar(token) {
+        return `--${this.prefix}-${this.camelToKebab(token)}`;
+    }
+    /**
+   * Create a BEM CSS class name
+   * @param block - Block name
+   * @param element - Element name (optional)
+   * @param modifier - Modifier name (optional)
+   */    static bemClass(block, element, modifier) {
+        let className = `c-${block}`;
+        return element && (className += `__${element}`), modifier && (className += `--${modifier}`), 
+        className;
+    }
+    /**
+   * Create a variant class name
+   * @param component - Component name
+   * @param variant - Variant name
+   */    static variantClass(component, variant) {
+        return `c-${component}--${variant}`;
+    }
+    /**
+   * Create a size class name
+   * @param component - Component name
+   * @param size - Size name
+   */    static sizeClass(component, size) {
+        return `c-${component}--${size}`;
+    }
+    /**
+   * Create a state class name
+   * @param component - Component name
+   * @param state - State name
+   */    static stateClass(component, state) {
+        return `c-${component}--${state}`;
+    }
+    /**
+   * Create a utility class name
+   * @param utility - Utility name
+   */    static utilityClass(utility) {
+        return `u-${utility}`;
+    }
+    /**
+   * Create a layout class name
+   * @param layout - Layout name
+   */    static layoutClass(layout) {
+        return `l-${layout}`;
+    }
+    /**
+   * Create an object class name
+   * @param object - Object name
+   */    static objectClass(object) {
+        return `o-${object}`;
     }
-    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;
+ThemeNaming.prefix = "atomix";
 
-// `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
+const Button =  React.memo( forwardRef((({label: label, children: children, onClick: onClick, variant: variant = "primary", size: size = "md", disabled: disabled = !1, loading: loading = !1, loadingText: loadingText, icon: icon, iconName: iconName, iconSize: iconSize = "sm", iconPosition: iconPosition = "start", iconOnly: iconOnly = !1, rounded: rounded = !1, fullWidth: fullWidth = !1, block: block = !1, active: active = !1, selected: selected = !1, type: type = "button", className: className = "", as: Component = "button", href: href, target: target, glass: glass, onHover: onHover, onFocus: onFocus, onBlur: onBlur, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-expanded": ariaExpanded, "aria-controls": ariaControls, tabIndex: tabIndex, style: style, LinkComponent: LinkComponent, ...props}, ref) => {
+    const isDisabled = disabled || loading, shouldRenderAsLink = Boolean(href && !isDisabled), iconElement = iconName ? jsx(Icon, {
+        name: iconName,
+        size: iconSize
+    }) : icon, buttonClass = [ BUTTON.BASE_CLASS, ThemeNaming.variantClass(THEME_NAMING.BUTTON_PREFIX, variant), "md" !== size ? ThemeNaming.sizeClass(THEME_NAMING.BUTTON_PREFIX, size) : "", iconOnly ? ThemeNaming.stateClass(THEME_NAMING.BUTTON_PREFIX, THEME_NAMING.ICON_ELEMENT) : "", rounded ? ThemeNaming.stateClass(THEME_NAMING.BUTTON_PREFIX, "rounded") : "", isDisabled ? ThemeNaming.stateClass(THEME_NAMING.BUTTON_PREFIX, "disabled") : "", glass ? ThemeNaming.stateClass(THEME_NAMING.BUTTON_PREFIX, "glass") : "", loading ? BUTTON.CLASSES.LOADING : "", fullWidth ? BUTTON.CLASSES.FULL_WIDTH : "", block ? BUTTON.CLASSES.BLOCK : "", active ? BUTTON.CLASSES.ACTIVE : "", selected ? BUTTON.CLASSES.SELECTED : "", className ].filter(Boolean).join(" "), handleClickEvent = useCallback((event => {
+        isDisabled ? event.preventDefault() : onClick?.(event);
+    }), [ isDisabled, onClick ]), handleMouseEnter = useCallback((event => {
+        isDisabled || onHover?.(event);
+    }), [ isDisabled, onHover ]), handleFocusEvent = useCallback((event => {
+        isDisabled || onFocus?.(event);
+    }), [ isDisabled, onFocus ]), handleBlurEvent = useCallback((event => {
+        isDisabled || onBlur?.(event);
+    }), [ isDisabled, onBlur ]), buttonText = loading && loadingText ? loadingText : label || children, spinnerSize = "sm" === size ? "sm" : "lg" === size ? "md" : "sm", safeAriaLabel = ariaLabel || (iconOnly ? "string" == typeof label ? label : "string" == typeof children ? children : void 0 : void 0), buttonContent = jsxs(Fragment, {
+        children: [ loading && jsx("span", {
+            className: ThemeNaming.bemClass(THEME_NAMING.BUTTON_PREFIX, THEME_NAMING.SPINNER_ELEMENT),
+            "aria-hidden": "true",
+            children: jsx(Spinner, {
+                size: spinnerSize,
+                variant: "link" === variant || "string" == typeof variant && variant.startsWith("outline-") ? "primary" : "danger" === variant ? "error" : variant
+            })
+        }), iconElement && !loading && jsx("span", {
+            className: ThemeNaming.bemClass(THEME_NAMING.BUTTON_PREFIX, THEME_NAMING.ICON_ELEMENT),
+            "aria-hidden": "true",
+            children: iconElement
+        }), !iconOnly && buttonText && jsx("span", {
+            className: ThemeNaming.bemClass(THEME_NAMING.BUTTON_PREFIX, THEME_NAMING.LABEL_ELEMENT),
+            children: buttonText
+        }) ]
+    }), buttonProps = {
+        className: buttonClass,
+        onClick: handleClickEvent,
+        onMouseEnter: onHover ? handleMouseEnter : void 0,
+        onFocus: onFocus ? handleFocusEvent : void 0,
+        onBlur: onBlur ? handleBlurEvent : void 0,
+        "aria-disabled": isDisabled,
+        "aria-busy": loading,
+        "aria-label": safeAriaLabel,
+        "aria-describedby": ariaDescribedBy,
+        "aria-expanded": ariaExpanded,
+        "aria-controls": ariaControls,
+        tabIndex: void 0 !== tabIndex ? tabIndex : isDisabled ? -1 : 0,
+        style: style,
+        ...props
+    };
+    // Determine if we should render as a link
+    // If disabled, we still check href, but we might want to render as button or anchor with aria-disabled
+    // The previous logic was Boolean(href && !isDisabled). This meant if disabled, it renders as <button>.
+    // This is a safe fallback for disabled links.
+        let content;
+    // Render as anchor if href is provided
+        if (shouldRenderAsLink) 
+    // Use custom LinkComponent if provided (e.g., Next.js Link)
+    if (LinkComponent) {
+        const LinkComp = LinkComponent, linkProps = {
+            ...buttonProps,
+            ref: ref,
+            // LinkComponent usually forwards ref to anchor
+            href: href,
+            target: target,
+            rel: "_blank" === target ? "noopener noreferrer" : void 0
+        };
+        content = jsx(LinkComp, {
+            ...linkProps,
+            children: buttonContent
+        });
+    } else 
+    // Fallback to regular anchor tag
+    content = jsx("a", {
+        ...buttonProps,
+        ref: ref,
+        href: href,
+        target: target,
+        rel: "_blank" === target ? "noopener noreferrer" : void 0,
+        children: buttonContent
+    }); else 
+    // Default button rendering
+    content = jsx(Component, {
+        ...buttonProps,
+        ref: ref,
+        type: "button" === Component ? type : void 0,
+        disabled: isDisabled,
+        children: buttonContent
+    });
+    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 $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;
+    return content;
+})));
 
-              case 1:
-                return new NativeConstructor(a);
+Button.displayName = "Button";
 
-              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];
+/**
+ * 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))
+    });
+};
 
-// `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);
-    }
-});
+ButtonGroup.displayName = "ButtonGroup";
 
-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 = {};
+// Subcomponents
+const CalloutIcon =  forwardRef((({children: children, className: className = "", ...props}, ref) => jsx("div", {
+    ref: ref,
+    className: `c-callout__icon ${className}`.trim(),
+    ...props,
+    children: children
+})));
 
-test[wellKnownSymbol$5("toStringTag")] = "z";
+CalloutIcon.displayName = "CalloutIcon";
 
-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);
+const CalloutMessage =  forwardRef((({children: children, className: className = "", ...props}, ref) => jsx("div", {
+    ref: ref,
+    className: `c-callout__message ${className}`.trim(),
+    ...props,
+    children: children
+})));
 
-// `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);
-    }
-});
+CalloutMessage.displayName = "CalloutMessage";
 
-var includes$3 = getBuiltInPrototypeMethod$3("String", "includes"), isPrototypeOf$1 = objectIsPrototypeOf, arrayMethod = includes$4, stringMethod = includes$3, ArrayPrototype$1 = Array.prototype, StringPrototype = String.prototype;
+const CalloutTitle =  forwardRef((({children: children, className: className = "", ...props}, ref) => jsx("div", {
+    ref: ref,
+    className: `c-callout__title ${className}`.trim(),
+    ...props,
+    children: children
+})));
 
-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}) => {
+CalloutTitle.displayName = "CalloutTitle";
+
+const CalloutText =  forwardRef((({children: children, className: className = "", ...props}, ref) => jsx("div", {
+    ref: ref,
+    className: `c-callout__text ${className}`.trim(),
+    ...props,
+    children: children
+})));
+
+CalloutText.displayName = "CalloutText";
+
+const CalloutActions =  forwardRef((({children: children, className: className = "", ...props}, ref) => jsx("div", {
+    ref: ref,
+    className: `c-callout__actions ${className}`.trim(),
+    ...props,
+    children: children
+})));
+
+CalloutActions.displayName = "CalloutActions";
+
+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 +4377,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 +4393,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", {
@@ -4297,9 +4473,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
@@ -9037,7 +9217,9 @@ function getRowId$1(row, rowKey) {
             }))) return !1;
             // Apply column-specific filters
                         for (let i = 0; i < activeColumnFilters.length; i++) {
-                const {key: key, value: value, lowercaseValue: lowercaseValue, column: column} = activeColumnFilters[i], cellValue = row[key];
+                const filter = activeColumnFilters[i];
+                if (!filter) continue;
+                const {key: key, value: value, lowercaseValue: lowercaseValue, column: column} = filter, cellValue = row[key];
                 if (null == cellValue) return !1;
                 // Use custom filter function if provided
                                 var _context2;
@@ -9403,7 +9585,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
@@ -9445,7 +9658,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);
@@ -9508,20 +9721,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
             })
         })
     });
@@ -9531,17 +9783,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" : ""}`,
@@ -9569,9 +9811,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
@@ -10660,53 +10902,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
+})));
 
-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}) => {
+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 =  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,
@@ -10723,13 +10962,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", {
@@ -10772,7 +11021,7 @@ const EdgePanel = ({title: title, children: children, position: position = "star
             }) : panelContent
         }) ]
     });
-};
+}));
 
 /**
  * Form state and functionality
@@ -10806,7 +11055,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({
@@ -11016,6 +11266,8 @@ function useHero(initialProps) {
         contentWidth: void 0,
         parallax: !1,
         parallaxIntensity: .5,
+        headingLevel: "h1",
+        reverseOnMobile: !1,
         ...initialProps
     }, hasBackgroundSlider = !!defaultProps.backgroundSlider, backgroundSliderResult = 
     /**
@@ -11096,7 +11348,9 @@ function useHero(initialProps) {
         autoplay: {
             delay: 5e3,
             pauseOnHover: !0
-        }
+        },
+        transition: "fade",
+        transitionDuration: 1e3
     }), backgroundSlider = hasBackgroundSlider && defaultProps.backgroundSlider ? backgroundSliderResult : void 0, hasBackgroundImage = !!hasBackgroundSlider || !!defaultProps.backgroundImageSrc || !!defaultProps.videoBackground, hasForegroundImage = !!defaultProps.imageSrc, useGridLayout = hasForegroundImage && "center" !== defaultProps.alignment, applyParallaxEffect = (element, intensity = .5) => {
         if (!element) return;
         // Ensure intensity is between 0 and 1
@@ -11147,13 +11401,20 @@ function useHero(initialProps) {
             defaultProps.videoBackground && classes.push("c-hero--video"), baseClassName && classes.push(baseClassName), 
             classes.join(" ");
         },
-        generateImageColClass: (size = defaultProps.imageColSize || 7) => {
+        generateImageColClass: (size = defaultProps.imageColSize || 7, customClass) => {
             const classes = [ `o-grid__col o-grid__col--md-${size}` ];
             // Add responsive margin if needed for mobile view
                         return "left" === defaultProps.alignment && classes.push("u-mt-5 u-mt-md-0"), 
-            classes.join(" ");
+            // Handle mobile stacking order
+            defaultProps.reverseOnMobile && ("right" === defaultProps.alignment || "center" === defaultProps.alignment ? classes.push("u-order-first u-order-md-last") : classes.push("u-order-last u-order-md-first")), 
+            customClass && classes.push(customClass), classes.join(" ");
+        },
+        generateContentColClass: (size = defaultProps.contentColSize || 5, customClass) => {
+            const classes = [ `o-grid__col o-grid__col--md-${size}` ];
+            // Handle mobile stacking order
+                        return defaultProps.reverseOnMobile && ("right" === defaultProps.alignment || "center" === defaultProps.alignment ? classes.push("u-order-last u-order-md-first") : classes.push("u-order-first u-order-md-last")), 
+            customClass && classes.push(customClass), classes.join(" ");
         },
-        generateContentColClass: (size = defaultProps.contentColSize || 5) => `o-grid__col o-grid__col--md-${size}`,
         hasBackgroundImage: hasBackgroundImage,
         hasForegroundImage: hasForegroundImage,
         useGridLayout: useGridLayout,
@@ -12368,8 +12629,6 @@ function useSlider(options) {
     };
 }
 
-// Button composables
-// export * from './useButton';
 // Accordion composables
 const composablesImport =  Object.freeze( Object.defineProperty({
     __proto__: null,
@@ -12410,7 +12669,57 @@ 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,
@@ -12422,112 +12731,129 @@ const composablesImport =  Object.freeze( Object.defineProperty({
         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);
+    }), [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 = options.find((opt => opt.value === value));
+            const selectedOption = activeOptions.find((opt => opt.value === value));
             selectedOption && setSelectedLabel(selectedOption.label);
         } else setSelectedLabel(placeholder);
-    }), [ value, options, 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 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)))
+    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) {
@@ -12551,9 +12877,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
@@ -13427,12 +13751,14 @@ const FooterLink =  forwardRef((({href: href, icon: icon, external: external = !
 
 FooterLink.displayName = "FooterLink";
 
-const Hero = ({title: title, subtitle: subtitle, text: text, imageSrc: imageSrc, imageAlt: imageAlt = "Hero image", alignment: alignment = "left", backgroundImageSrc: backgroundImageSrc, showOverlay: showOverlay = !0, fullViewportHeight: fullViewportHeight = !1, actions: actions, imageColSize: imageColSize = 7, contentColSize: contentColSize = 5, contentWidth: contentWidth, className: className = "", style: style, parallax: parallax = !1, parallaxIntensity: parallaxIntensity = .5, videoBackground: videoBackground, children: children, glass: glass, videoOptions: videoOptions = {
+const Hero = ({title: title, subtitle: subtitle, text: text, imageSrc: imageSrc, imageAlt: imageAlt = "Hero image", alignment: alignment = "left", backgroundImageSrc: backgroundImageSrc, showOverlay: showOverlay = !0, fullViewportHeight: fullViewportHeight = !1, actions: actions, imageColSize: imageColSize = 7, imageColClassName: imageColClassName, imageColStyle: imageColStyle, contentColSize: contentColSize = 5, contentColClassName: contentColClassName, contentColStyle: contentColStyle, contentWidth: contentWidth, className: className = "", style: style, parallax: parallax = !1, parallaxIntensity: parallaxIntensity = .5, videoBackground: videoBackground, children: children, glass: glass, videoOptions: videoOptions = {
     autoplay: !0,
     loop: !0,
     muted: !0
-}, backgroundSlider: backgroundSlider}) => {
-    const {generateHeroClassNames: generateHeroClassNames, generateImageColClass: generateImageColClass, generateContentColClass: generateContentColClass, hasBackgroundImage: hasBackgroundImage, hasForegroundImage: hasForegroundImage, useGridLayout: useGridLayout, heroRef: heroRef, videoRef: videoRef, backgroundSlider: sliderHook, hasBackgroundSlider: hasBackgroundSlider} = useHero({
+}, 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,
         alignment: alignment,
         imageColSize: imageColSize,
         contentColSize: contentColSize,
@@ -13444,7 +13770,8 @@ const Hero = ({title: title, subtitle: subtitle, text: text, imageSrc: imageSrc,
         parallax: parallax,
         parallaxIntensity: parallaxIntensity,
         videoBackground: videoBackground,
-        backgroundSlider: backgroundSlider
+        backgroundSlider: backgroundSlider,
+        reverseOnMobile: reverseOnMobile
     }), heroStyle = {
         ...contentWidth ? {
             "--atomix-hero-content-width": contentWidth
@@ -13468,18 +13795,23 @@ const Hero = ({title: title, subtitle: subtitle, text: text, imageSrc: imageSrc,
         });
     }, renderContent = () => {
         const content = jsxs("div", {
-            className: HERO.SELECTORS.CONTENT.replace(".", ""),
+            className: `${HERO.SELECTORS.CONTENT.replace(".", "")} ${parts?.content?.className || ""}`.trim(),
+            style: parts?.content?.style,
             children: [ subtitle && jsx("p", {
-                className: HERO.SELECTORS.SUBTITLE.replace(".", ""),
+                className: `${HERO.SELECTORS.SUBTITLE.replace(".", "")} ${parts?.subtitle?.className || ""}`.trim(),
+                style: parts?.subtitle?.style,
                 children: subtitle
-            }), jsx("h1", {
-                className: HERO.SELECTORS.TITLE.replace(".", ""),
+            }), jsx(HeadingTag, {
+                className: `${HERO.SELECTORS.TITLE.replace(".", "")} ${parts?.title?.className || ""}`.trim(),
+                style: parts?.title?.style,
                 children: title
             }), text && jsx("p", {
-                className: HERO.SELECTORS.TEXT.replace(".", ""),
+                className: `${HERO.SELECTORS.TEXT.replace(".", "")} ${parts?.text?.className || ""}`.trim(),
+                style: parts?.text?.style,
                 children: text
             }), actions && jsx("div", {
-                className: HERO.SELECTORS.ACTIONS.replace(".", ""),
+                className: `${HERO.SELECTORS.ACTIONS.replace(".", "")} ${parts?.actions?.className || ""}`.trim(),
+                style: parts?.actions?.style,
                 children: actions
             }) ]
         });
@@ -13489,7 +13821,8 @@ const Hero = ({title: title, subtitle: subtitle, text: text, imageSrc: imageSrc,
         glass ? jsx("div", 
         // If glass is true, use default glass props
         !0 === glass ? {
-            className: HERO.SELECTORS.CONTENT.replace(".", ""),
+            className: `${HERO.SELECTORS.CONTENT.replace(".", "")} ${parts?.content?.className || ""}`.trim(),
+            style: parts?.content?.style,
             children: jsx(AtomixGlass, {
                 displacementScale: 60,
                 blurAmount: 3,
@@ -13501,71 +13834,93 @@ const Hero = ({title: title, subtitle: subtitle, text: text, imageSrc: imageSrc,
                 children: jsxs("div", {
                     className: "u-p-4",
                     children: [ subtitle && jsx("p", {
-                        className: HERO.SELECTORS.SUBTITLE.replace(".", ""),
+                        className: `${HERO.SELECTORS.SUBTITLE.replace(".", "")} ${parts?.subtitle?.className || ""}`.trim(),
+                        style: parts?.subtitle?.style,
                         children: subtitle
-                    }), jsx("h1", {
-                        className: HERO.SELECTORS.TITLE.replace(".", ""),
+                    }), jsx(HeadingTag, {
+                        className: `${HERO.SELECTORS.TITLE.replace(".", "")} ${parts?.title?.className || ""}`.trim(),
+                        style: parts?.title?.style,
                         children: title
                     }), text && jsx("p", {
-                        className: HERO.SELECTORS.TEXT.replace(".", ""),
+                        className: `${HERO.SELECTORS.TEXT.replace(".", "")} ${parts?.text?.className || ""}`.trim(),
+                        style: parts?.text?.style,
                         children: text
                     }), actions && jsx("div", {
-                        className: HERO.SELECTORS.ACTIONS.replace(".", ""),
+                        className: `${HERO.SELECTORS.ACTIONS.replace(".", "")} ${parts?.actions?.className || ""}`.trim(),
+                        style: parts?.actions?.style,
                         children: actions
                     }) ]
                 })
             })
         } : {
-            className: HERO.SELECTORS.CONTENT.replace(".", ""),
+            className: `${HERO.SELECTORS.CONTENT.replace(".", "")} ${parts?.content?.className || ""}`.trim(),
+            style: parts?.content?.style,
             children: jsx(AtomixGlass, {
                 ...glass,
                 children: jsxs("div", {
                     className: "u-p-4",
                     children: [ subtitle && jsx("p", {
-                        className: HERO.SELECTORS.SUBTITLE.replace(".", ""),
+                        className: `${HERO.SELECTORS.SUBTITLE.replace(".", "")} ${parts?.subtitle?.className || ""}`.trim(),
+                        style: parts?.subtitle?.style,
                         children: subtitle
-                    }), jsx("h1", {
-                        className: HERO.SELECTORS.TITLE.replace(".", ""),
+                    }), jsx(HeadingTag, {
+                        className: `${HERO.SELECTORS.TITLE.replace(".", "")} ${parts?.title?.className || ""}`.trim(),
+                        style: parts?.title?.style,
                         children: title
                     }), text && jsx("p", {
-                        className: HERO.SELECTORS.TEXT.replace(".", ""),
+                        className: `${HERO.SELECTORS.TEXT.replace(".", "")} ${parts?.text?.className || ""}`.trim(),
+                        style: parts?.text?.style,
                         children: text
                     }), actions && jsx("div", {
-                        className: HERO.SELECTORS.ACTIONS.replace(".", ""),
+                        className: `${HERO.SELECTORS.ACTIONS.replace(".", "")} ${parts?.actions?.className || ""}`.trim(),
+                        style: parts?.actions?.style,
                         children: actions
                     }) ]
                 })
             })
         }) : content;
     }, renderForegroundImage = () => hasForegroundImage ? jsx("div", "center" === alignment ? {
-        className: HERO.SELECTORS.IMAGE_WRAPPER.replace(".", ""),
+        className: `${HERO.SELECTORS.IMAGE_WRAPPER.replace(".", "")} ${imageColClassName || ""} ${parts?.imageWrapper?.className || ""}`.trim(),
+        style: {
+            ...imageColStyle,
+            ...parts?.imageWrapper?.style
+        },
         children: jsx("img", {
             src: imageSrc,
             alt: imageAlt,
-            className: HERO.SELECTORS.IMAGE.replace(".", "")
+            className: `${HERO.SELECTORS.IMAGE.replace(".", "")} ${parts?.image?.className || ""}`.trim(),
+            style: parts?.image?.style
         })
     } : {
-        className: generateImageColClass(),
+        className: `${generateImageColClass(imageColSize, imageColClassName)} ${parts?.imageWrapper?.className || ""}`.trim(),
+        style: {
+            ...imageColStyle,
+            ...parts?.imageWrapper?.style
+        },
         children: jsx("img", {
             src: imageSrc,
             alt: imageAlt,
-            className: HERO.SELECTORS.IMAGE.replace(".", "")
+            className: `${HERO.SELECTORS.IMAGE.replace(".", "")} ${parts?.image?.className || ""}`.trim(),
+            style: parts?.image?.style
         })
     }) : null;
-    // Create custom style for hero element with content width if provided
-        return jsxs("div", {
+    return jsxs("div", {
         ref: heroRef,
-        className: generateHeroClassNames(className),
-        style: heroStyle,
+        className: `${generateHeroClassNames(className)} ${parts?.root?.className || ""}`.trim(),
+        style: {
+            ...heroStyle,
+            ...parts?.root?.style
+        },
         "data-parallax": parallax ? "true" : void 0,
         "data-parallax-intensity": parallax ? parallaxIntensity : void 0,
-        children: [ (() => {
+        ...rest,
+        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;
                 // Determine transition class
                 let transitionClass = HERO.CLASSES.SLIDER_FADE;
-                return "slide" === transition ? transitionClass = HERO.CLASSES.SLIDER_SLIDE : "custom" === transition && (transitionClass = HERO.CLASSES.SLIDER_CUSTOM), 
+                return "slide" === transition && (transitionClass = HERO.CLASSES.SLIDER_SLIDE), 
                 jsxs("div", {
                     className: `${HERO.SELECTORS.SLIDER.replace(".", "")} ${transitionClass}`,
                     style: {
@@ -13582,57 +13937,68 @@ const Hero = ({title: title, subtitle: subtitle, text: text, imageSrc: imageSrc,
                         return jsx("div", {
                             ref: slideRef,
                             className: `${HERO.SELECTORS.SLIDER_ITEM.replace(".", "")} ${isActive ? HERO.CLASSES.SLIDER_ITEM_ACTIVE : ""}`,
-                            children: "image" === slide.type ? jsx("img", {
-                                src: slide.src,
-                                alt: slide.alt || "Background slide",
-                                className: HERO.SELECTORS.BG_IMAGE.replace(".", "")
-                            }) : jsxs("video", {
+                            "aria-hidden": !isActive,
+                            children: "video" === slide.type ? jsxs("video", {
                                 ref: videoRef,
-                                className: "c-hero__video",
-                                autoPlay: !1 !== slide.videoOptions?.autoplay,
-                                loop: !1 !== slide.videoOptions?.loop,
-                                muted: !1 !== slide.videoOptions?.muted,
+                                className: "c-hero__bg-video",
+                                src: slide.src,
+                                poster: slide.videoOptions?.posterUrl || slide.alt,
+                                muted: slide.videoOptions?.muted ?? !0,
+                                loop: slide.videoOptions?.loop ?? !0,
                                 playsInline: !0,
-                                poster: slide.videoOptions?.posterUrl,
+                                "aria-hidden": "true",
+                                autoPlay: !1 !== slide.videoOptions?.autoplay,
                                 children: [ jsx("source", {
                                     src: slide.src,
                                     type: `video/${slide.src.split(".").pop() || "mp4"}`
                                 }), "Your browser does not support the video tag." ]
+                            }) : jsx("img", {
+                                src: slide.src,
+                                alt: slide.alt || "Background slide",
+                                className: HERO.SELECTORS.BG_IMAGE.replace(".", "")
                             })
                         }, index);
                     })), showOverlay && jsx("div", {
-                        className: HERO.SELECTORS.OVERLAY.replace(".", "")
+                        className: `${HERO.SELECTORS.OVERLAY.replace(".", "")} ${parts?.overlay?.className || ""}`.trim(),
+                        style: parts?.overlay?.style
                     }) ]
                 });
             }
             // Fall back to single background image/video
                         return hasBackgroundImage || videoBackground ? jsxs("div", {
-                className: HERO.SELECTORS.BG.replace(".", ""),
+                className: `${HERO.SELECTORS.BG.replace(".", "")} ${parts?.background?.className || ""}`.trim(),
+                style: parts?.background?.style,
                 children: [ backgroundImageSrc && jsx("img", {
                     src: backgroundImageSrc,
                     alt: "Background",
                     className: HERO.SELECTORS.BG_IMAGE.replace(".", "")
                 }), renderVideoBackground(), showOverlay && jsx("div", {
-                    className: HERO.SELECTORS.OVERLAY.replace(".", "")
+                    className: `${HERO.SELECTORS.OVERLAY.replace(".", "")} ${parts?.overlay?.className || ""}`.trim(),
+                    style: parts?.overlay?.style
                 }) ]
             }) : null;
         })(), jsx("div", {
-            className: `${HERO.SELECTORS.CONTAINER.replace(".", "")} o-container`,
+            className: `${HERO.SELECTORS.CONTAINER.replace(".", "")} o-container ${parts?.container?.className || ""}`.trim(),
+            style: parts?.container?.style,
             children: children ? jsx("div", {
-                className: HERO.SELECTORS.GRID.replace(".", ""),
+                className: `${HERO.SELECTORS.GRID.replace(".", "")} ${parts?.grid?.className || ""}`.trim(),
+                style: parts?.grid?.style,
                 children: children
             }) : useGridLayout ? jsx("div", {
-                className: `${HERO.SELECTORS.GRID.replace(".", "")} o-grid`,
+                className: `${HERO.SELECTORS.GRID.replace(".", "")} o-grid ${parts?.grid?.className || ""}`.trim(),
+                style: parts?.grid?.style,
                 children: jsxs(Fragment, 
                 // For left-aligned content, render content first then image
                 "left" === alignment ? {
                     children: [ jsx("div", {
-                        className: generateContentColClass(),
+                        className: generateContentColClass(contentColSize, contentColClassName),
+                        style: contentColStyle,
                         children: renderContent()
                     }), renderForegroundImage() ]
                 } : {
                     children: [ renderForegroundImage(), jsx("div", {
-                        className: generateContentColClass(),
+                        className: generateContentColClass(contentColSize, contentColClassName),
+                        style: contentColStyle,
                         children: renderContent()
                     }) ]
                 })
@@ -13643,7 +14009,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,
+            cornerRadius: 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;
@@ -13654,14 +14094,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
@@ -13878,10 +14318,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
@@ -13931,43 +14420,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", {
@@ -14012,24 +14484,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
@@ -14072,7 +14535,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.
@@ -16948,39 +17425,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
@@ -17003,24 +17513,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,
@@ -17048,9 +17638,19 @@ 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,
@@ -17065,13 +17665,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
@@ -17275,7 +17876,7 @@ const Toggle = ({checked: controlledChecked, defaultChecked: defaultChecked = !1
         if (disabled) return;
         const nextChecked = !isChecked;
         isControlled || setInternalChecked(nextChecked), onChange?.(nextChecked);
-    }), [ disabled, isChecked, isControlled, onChange ]), toggleClass = [ "c-toggle", isChecked && TOGGLE.CLASSES.IS_ON, disabled && "is-disabled", className ].filter(Boolean).join(" "), toggleContent = jsx("div", {
+    }), [ disabled, isChecked, isControlled, onChange ]), toggleClass = [ "c-toggle", isChecked && TOGGLE.CLASSES.IS_ON, disabled && "is-disabled", glass && "c-toggle--glass", className ].filter(Boolean).join(" "), toggleContent = jsx("div", {
         className: toggleClass,
         style: style,
         onClick: handleClick,