@shohojdhara/atomix 0.4.0 → 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",
@@ -3230,8 +3671,6 @@ const AtomixLogo = ({height: height = 24, width: width = 24, color: color = "cur
     // Convert string size to pixel value if needed
 };
 
-// Adapted from https://github.com/shuding/liquid-glass
-// Constants
 Icon.displayName = "Icon";
 
 const Avatar =  memo((({src: src, alt: alt = "Avatar", initials: initials, icon: icon, size: size = "md", circle: circle = !1, className: className = "", disabled: disabled = !1, onClick: onClick, style: style, glass: glass}) => {
@@ -3470,37 +3909,75 @@ const useBlock = () => ({
  * ```
  */ Block.displayName = "Block";
 
-const Breadcrumb =  memo((({items: items, divider: divider, className: className = "", "aria-label": ariaLabel = "Breadcrumb", LinkComponent: LinkComponent, style: style}) => {
+const BreadcrumbItem =  forwardRef((({children: children, href: href, active: active, icon: icon, onClick: onClick, className: className = "", style: style, linkAs: 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
+    };
+    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
+        })
+    });
+}));
+
+BreadcrumbItem.displayName = "BreadcrumbItem";
+
+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: items.map(((item, index) => {
-                const isLast = index === items.length - 1, itemClasses = [ BREADCRUMB.CLASSES.ITEM, item.active || isLast ? BREADCRUMB.CLASSES.ACTIVE : "" ].filter(Boolean).join(" "), linkContent = jsxs(Fragment, {
-                    children: [ item.icon && jsx("span", {
-                        className: "c-breadcrumb__icon",
-                        children: item.icon
-                    }), item.label ]
-                }), linkProps = {
-                    href: item.href,
-                    className: BREADCRUMB.CLASSES.LINK,
-                    onClick: item.onClick,
-                    style: item.style
-                };
-                return jsx("li", {
-                    className: itemClasses,
-                    style: item.style,
-                    children: item.href && !item.active ? jsx(LinkComponent || "a", {
-                        ...linkProps,
-                        children: linkContent
-                    }) : jsx("span", {
-                        className: BREADCRUMB.CLASSES.LINK,
-                        children: linkContent
-                    })
-                }, index);
-            }))
+            children: content
         })
     });
 }));
@@ -3531,7 +4008,7 @@ function useSpinner(initialProps) {
     };
 }
 
-Breadcrumb.displayName = "Breadcrumb";
+Breadcrumb.displayName = "Breadcrumb", Breadcrumb.Item = BreadcrumbItem;
 
 const Spinner =  memo((({size: size = "md", variant: variant = "primary", fullscreen: fullscreen = !1, className: className = "", style: style, glass: glass, "aria-label": ariaLabel, role: role = "status"}) => {
     const {generateSpinnerClass: generateSpinnerClass} = useSpinner({
@@ -3596,7 +4073,7 @@ class ThemeNaming {
    * Convert camelCase to kebab-case for CSS variables
    * @param str - String to convert
    */    static camelToKebab(str) {
-        return str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
+        return str.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
     }
     /**
    * Convert kebab-case to camelCase for JavaScript properties
@@ -3800,379 +4277,77 @@ const ButtonGroup = ({children: children, className: className = "", style: styl
 
 ButtonGroup.displayName = "ButtonGroup";
 
-var commonjsGlobal = "undefined" != typeof globalThis ? globalThis : "undefined" != typeof window ? window : "undefined" != typeof global ? global : "undefined" != typeof self ? self : {};
-
-function getDefaultExportFromCjs(x) {
-    return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x.default : x;
-}
-
-var fails$9 = function(exec) {
-    try {
-        return !!exec();
-    } catch (error) {
-        return !0;
-    }
-}, functionBindNative = !fails$9((function() {
-    // eslint-disable-next-line es/no-function-prototype-bind -- safe
-    var test = function() {/* empty */}.bind();
-    // eslint-disable-next-line no-prototype-builtins -- safe
-        return "function" != typeof test || test.hasOwnProperty("prototype");
-})), NATIVE_BIND$3 = functionBindNative, FunctionPrototype$1 = Function.prototype, call$5 = FunctionPrototype$1.call, uncurryThisWithBind = NATIVE_BIND$3 && FunctionPrototype$1.bind.bind(call$5, call$5), functionUncurryThis = NATIVE_BIND$3 ? uncurryThisWithBind : function(fn) {
-    return function() {
-        return call$5.apply(fn, arguments);
-    };
-}, objectIsPrototypeOf = functionUncurryThis({}.isPrototypeOf), check = function(it) {
-    return it && it.Math === Math && it;
-}, globalThis_1 = 
-// eslint-disable-next-line es/no-global-this -- safe
-check("object" == typeof globalThis && globalThis) || check("object" == typeof window && window) || 
-// eslint-disable-next-line no-restricted-globals -- safe
-check("object" == typeof self && self) || check("object" == typeof commonjsGlobal && commonjsGlobal) || check("object" == typeof commonjsGlobal && commonjsGlobal) || 
-// eslint-disable-next-line no-new-func -- fallback
-function() {
-    return this;
-}() || Function("return this")(), NATIVE_BIND$2 = functionBindNative, FunctionPrototype = Function.prototype, apply$1 = FunctionPrototype.apply, call$4 = FunctionPrototype.call, functionApply = "object" == typeof Reflect && Reflect.apply || (NATIVE_BIND$2 ? call$4.bind(apply$1) : function() {
-    return call$4.apply(apply$1, arguments);
-}), uncurryThis$7 = functionUncurryThis, toString$3 = uncurryThis$7({}.toString), stringSlice = uncurryThis$7("".slice), classofRaw$2 = function(it) {
-    return stringSlice(toString$3(it), 8, -1);
-}, classofRaw$1 = classofRaw$2, uncurryThis$6 = functionUncurryThis, functionUncurryThisClause = function(fn) {
-    // Nashorn bug:
-    //   https://github.com/zloirock/core-js/issues/1128
-    //   https://github.com/zloirock/core-js/issues/1130
-    if ("Function" === classofRaw$1(fn)) return uncurryThis$6(fn);
-}, documentAll = "object" == typeof document && document.all, isCallable$8 = void 0 === documentAll && void 0 !== documentAll ? function(argument) {
-    return "function" == typeof argument || argument === documentAll;
-} : function(argument) {
-    return "function" == typeof argument;
-}, objectGetOwnPropertyDescriptor = {}, descriptors = !fails$9((function() {
-    // eslint-disable-next-line es/no-object-defineproperty -- required for testing
-    return 7 !== Object.defineProperty({}, 1, {
-        get: function() {
-            return 7;
-        }
-    })[1];
-})), NATIVE_BIND$1 = functionBindNative, call$3 = Function.prototype.call, functionCall = NATIVE_BIND$1 ? call$3.bind(call$3) : function() {
-    return call$3.apply(call$3, arguments);
-}, objectPropertyIsEnumerable = {}, $propertyIsEnumerable = {}.propertyIsEnumerable, getOwnPropertyDescriptor$1 = Object.getOwnPropertyDescriptor, NASHORN_BUG = getOwnPropertyDescriptor$1 && !$propertyIsEnumerable.call({
-    1: 2
-}, 1);
-
-// `Object.prototype.propertyIsEnumerable` method implementation
-// https://tc39.es/ecma262/#sec-object.prototype.propertyisenumerable
-objectPropertyIsEnumerable.f = NASHORN_BUG ? function(V) {
-    var descriptor = getOwnPropertyDescriptor$1(this, V);
-    return !!descriptor && descriptor.enumerable;
-} : $propertyIsEnumerable;
-
-var match, version, createPropertyDescriptor$2 = function(bitmap, value) {
-    return {
-        enumerable: !(1 & bitmap),
-        configurable: !(2 & bitmap),
-        writable: !(4 & bitmap),
-        value: value
-    };
-}, fails$6 = fails$9, classof$4 = classofRaw$2, $Object$3 = Object, split = functionUncurryThis("".split), indexedObject = fails$6((function() {
-    // throws an error in rhino, see https://github.com/mozilla/rhino/issues/346
-    // eslint-disable-next-line no-prototype-builtins -- safe
-    return !$Object$3("z").propertyIsEnumerable(0);
-})) ? function(it) {
-    return "String" === classof$4(it) ? split(it, "") : $Object$3(it);
-} : $Object$3, isNullOrUndefined$2 = function(it) {
-    return null == it;
-}, isNullOrUndefined$1 = isNullOrUndefined$2, $TypeError$7 = TypeError, requireObjectCoercible$3 = function(it) {
-    if (isNullOrUndefined$1(it)) throw new $TypeError$7("Can't call method on " + it);
-    return it;
-}, IndexedObject$1 = indexedObject, requireObjectCoercible$2 = requireObjectCoercible$3, toIndexedObject$2 = function(it) {
-    return IndexedObject$1(requireObjectCoercible$2(it));
-}, isCallable$7 = isCallable$8, isObject$6 = function(it) {
-    return "object" == typeof it ? null !== it : isCallable$7(it);
-}, path$3 = {}, path$2 = path$3, globalThis$b = globalThis_1, isCallable$6 = isCallable$8, aFunction = function(variable) {
-    return isCallable$6(variable) ? variable : void 0;
-}, navigator$1 = globalThis_1.navigator, userAgent$2 = navigator$1 && navigator$1.userAgent, environmentUserAgent = userAgent$2 ? String(userAgent$2) : "", globalThis$9 = globalThis_1, userAgent$1 = environmentUserAgent, process$1 = globalThis$9.process, Deno$1 = globalThis$9.Deno, versions = process$1 && process$1.versions || Deno$1 && Deno$1.version, v8 = versions && versions.v8;
-
-v8 && (
-// in old Chrome, versions of V8 isn't V8 = Chrome / 10
-// but their correct versions are not interesting for us
-version = (match = v8.split("."))[0] > 0 && match[0] < 4 ? 1 : +(match[0] + match[1])), 
-// BrowserFS NodeJS `process` polyfill incorrectly set `.v8` to `0.0`
-// so check `userAgent` even if `.v8` exists, but 0
-!version && userAgent$1 && (!(match = userAgent$1.match(/Edge\/(\d+)/)) || match[1] >= 74) && (match = userAgent$1.match(/Chrome\/(\d+)/)) && (version = +match[1]);
-
-var environmentV8Version = version, V8_VERSION = environmentV8Version, fails$5 = fails$9, $String$3 = globalThis_1.String, symbolConstructorDetection = !!Object.getOwnPropertySymbols && !fails$5((function() {
-    var symbol = Symbol("symbol detection");
-    // Chrome 38 Symbol has incorrect toString conversion
-    // `get-own-property-symbols` polyfill symbols converted to object are not Symbol instances
-    // nb: Do not call `String` directly to avoid this being optimized out to `symbol+''` which will,
-    // of course, fail.
-        return !$String$3(symbol) || !(Object(symbol) instanceof Symbol) || 
-    // Chrome 38-40 symbols are not inherited from DOM collections prototypes to instances
-    !Symbol.sham && V8_VERSION && V8_VERSION < 41;
-})), useSymbolAsUid = symbolConstructorDetection && !Symbol.sham && "symbol" == typeof Symbol.iterator, isCallable$5 = isCallable$8, isPrototypeOf$2 = objectIsPrototypeOf, $Object$2 = Object, isSymbol$2 = useSymbolAsUid ? function(it) {
-    return "symbol" == typeof it;
-} : function(it) {
-    var $Symbol = function(namespace, method) {
-        return arguments.length < 2 ? aFunction(path$2[namespace]) || aFunction(globalThis$b[namespace]) : path$2[namespace] && path$2[namespace][method] || globalThis$b[namespace] && globalThis$b[namespace][method];
-    }("Symbol");
-    return isCallable$5($Symbol) && isPrototypeOf$2($Symbol.prototype, $Object$2(it));
-}, $String$2 = String, isCallable$4 = isCallable$8, $TypeError$6 = TypeError, aCallable$3 = function(argument) {
-    if (isCallable$4(argument)) return argument;
-    throw new $TypeError$6(function(argument) {
-        try {
-            return $String$2(argument);
-        } catch (error) {
-            return "Object";
-        }
-    }(argument) + " is not a function");
-}, aCallable$2 = aCallable$3, isNullOrUndefined = isNullOrUndefined$2, call$2 = functionCall, isCallable$3 = isCallable$8, isObject$5 = isObject$6, $TypeError$5 = TypeError, sharedStore = {
-    exports: {}
-}, globalThis$7 = globalThis_1, defineProperty = Object.defineProperty, globalThis$6 = globalThis_1, store$1 = sharedStore.exports = globalThis$6["__core-js_shared__"] || function(key, value) {
-    try {
-        defineProperty(globalThis$7, key, {
-            value: value,
-            configurable: !0,
-            writable: !0
-        });
-    } catch (error) {
-        globalThis$7[key] = value;
-    }
-    return value;
-}("__core-js_shared__", {});
-
-/* eslint-disable es/no-symbol -- required for testing */ (store$1.versions || (store$1.versions = [])).push({
-    version: "3.43.0",
-    mode: "pure",
-    copyright: "© 2014-2025 Denis Pushkarev (zloirock.ru)",
-    license: "https://github.com/zloirock/core-js/blob/v3.43.0/LICENSE",
-    source: "https://github.com/zloirock/core-js"
-});
+// Subcomponents
+const CalloutIcon =  forwardRef((({children: children, className: className = "", ...props}, ref) => jsx("div", {
+    ref: ref,
+    className: `c-callout__icon ${className}`.trim(),
+    ...props,
+    children: children
+})));
 
-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;
+CalloutIcon.displayName = "CalloutIcon";
 
-// `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]);
-};
+const CalloutMessage =  forwardRef((({children: children, className: className = "", ...props}, ref) => jsx("div", {
+    ref: ref,
+    className: `c-callout__message ${className}`.trim(),
+    ...props,
+    children: children
+})));
 
-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;
+CalloutMessage.displayName = "CalloutMessage";
 
-// `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;
-};
+const CalloutTitle =  forwardRef((({children: children, className: className = "", ...props}, ref) => jsx("div", {
+    ref: ref,
+    className: `c-callout__title ${className}`.trim(),
+    ...props,
+    children: children
+})));
 
-var definePropertyModule = objectDefineProperty, createPropertyDescriptor = createPropertyDescriptor$2, createNonEnumerableProperty$1 = descriptors ? function(object, key, value) {
-    return definePropertyModule.f(object, key, createPropertyDescriptor(1, value));
-} : function(object, key, value) {
-    return object[key] = value, object;
-}, globalThis$3 = globalThis_1, apply = functionApply, uncurryThis$1 = functionUncurryThisClause, isCallable$1 = isCallable$8, getOwnPropertyDescriptor = objectGetOwnPropertyDescriptor.f, isForced = isForced_1, path$1 = path$3, bind = function(fn, that) {
-    return aCallable$1(fn), void 0 === that ? fn : NATIVE_BIND ? bind$1(fn, that) : function() {
-        return fn.apply(that, arguments);
-    };
-}, createNonEnumerableProperty = createNonEnumerableProperty$1, hasOwn = hasOwnProperty_1, wrapConstructor = function(NativeConstructor) {
-    var Wrapper = function(a, b, c) {
-        if (this instanceof Wrapper) {
-            switch (arguments.length) {
-              case 0:
-                return new NativeConstructor;
+CalloutTitle.displayName = "CalloutTitle";
 
-              case 1:
-                return new NativeConstructor(a);
+const CalloutText =  forwardRef((({children: children, className: className = "", ...props}, ref) => jsx("div", {
+    ref: ref,
+    className: `c-callout__text ${className}`.trim(),
+    ...props,
+    children: children
+})));
 
-              case 2:
-                return new NativeConstructor(a, b);
-            }
-            return new NativeConstructor(a, b, c);
-        }
-        return apply(NativeConstructor, this, arguments);
-    };
-    return Wrapper.prototype = NativeConstructor.prototype, Wrapper;
-}, _export = function(options, source) {
-    var FORCED, USE_NATIVE, VIRTUAL_PROTOTYPE, key, sourceProperty, targetProperty, nativeProperty, resultProperty, descriptor, TARGET = options.target, GLOBAL = options.global, STATIC = options.stat, PROTO = options.proto, nativeSource = GLOBAL ? globalThis$3 : STATIC ? globalThis$3[TARGET] : globalThis$3[TARGET] && globalThis$3[TARGET].prototype, target = GLOBAL ? path$1 : path$1[TARGET] || createNonEnumerableProperty(path$1, TARGET, {})[TARGET], targetPrototype = target.prototype;
-    for (key in source) 
-    // contains in native
-    USE_NATIVE = !(FORCED = isForced(GLOBAL ? key : TARGET + (STATIC ? "." : "#") + key, options.forced)) && nativeSource && hasOwn(nativeSource, key), 
-    targetProperty = target[key], USE_NATIVE && (nativeProperty = options.dontCallGetSet ? (descriptor = getOwnPropertyDescriptor(nativeSource, key)) && descriptor.value : nativeSource[key]), 
-    // export native or implementation
-    sourceProperty = USE_NATIVE && nativeProperty ? nativeProperty : source[key], (FORCED || PROTO || typeof targetProperty != typeof sourceProperty) && (
-    // bind methods to global for calling from export context
-    resultProperty = options.bind && USE_NATIVE ? bind(sourceProperty, globalThis$3) : options.wrap && USE_NATIVE ? wrapConstructor(sourceProperty) : PROTO && isCallable$1(sourceProperty) ? uncurryThis$1(sourceProperty) : sourceProperty, 
-    // add a flag to not completely full polyfills
-    (options.sham || sourceProperty && sourceProperty.sham || targetProperty && targetProperty.sham) && createNonEnumerableProperty(resultProperty, "sham", !0), 
-    createNonEnumerableProperty(target, key, resultProperty), PROTO && (hasOwn(path$1, VIRTUAL_PROTOTYPE = TARGET + "Prototype") || createNonEnumerableProperty(path$1, VIRTUAL_PROTOTYPE, {}), 
-    // export virtual prototype methods
-    createNonEnumerableProperty(path$1[VIRTUAL_PROTOTYPE], key, sourceProperty), 
-    // export real prototype methods
-    options.real && targetPrototype && (FORCED || !targetPrototype[key]) && createNonEnumerableProperty(targetPrototype, key, sourceProperty)));
-}, ceil = Math.ceil, floor = Math.floor, trunc = Math.trunc || function(x) {
-    var n = +x;
-    return (n > 0 ? floor : ceil)(n);
-}, toIntegerOrInfinity$2 = function(argument) {
-    var number = +argument;
-    // eslint-disable-next-line no-self-compare -- NaN check
-        return number != number || 0 === number ? 0 : trunc(number);
-}, toIntegerOrInfinity$1 = toIntegerOrInfinity$2, max = Math.max, min$1 = Math.min, toIntegerOrInfinity = toIntegerOrInfinity$2, min = Math.min, lengthOfArrayLike$2 = function(obj) {
-    return argument = obj.length, (len = toIntegerOrInfinity(argument)) > 0 ? min(len, 9007199254740991) : 0;
-    var argument, len;
-}, toIndexedObject = toIndexedObject$2, lengthOfArrayLike$1 = lengthOfArrayLike$2, createMethod$1 = function(IS_INCLUDES) {
-    return function($this, el, fromIndex) {
-        var O = toIndexedObject($this), length = lengthOfArrayLike$1(O);
-        if (0 === length) return !IS_INCLUDES && -1;
-        var value, index = function(index, length) {
-            var integer = toIntegerOrInfinity$1(index);
-            return integer < 0 ? max(integer + length, 0) : min$1(integer, length);
-        }(fromIndex, length);
-        // Array#includes uses SameValueZero equality algorithm
-        // eslint-disable-next-line no-self-compare -- NaN check
-        if (IS_INCLUDES && el != el) {
-            for (;length > index; ) 
-            // eslint-disable-next-line no-self-compare -- NaN check
-            if ((value = O[index++]) != value) return !0;
-            // Array#indexOf ignores holes, Array#includes - not
-                } else for (;length > index; index++) if ((IS_INCLUDES || index in O) && O[index] === el) return IS_INCLUDES || index || 0;
-        return !IS_INCLUDES && -1;
-    };
-}, $includes = [ createMethod$1(!0), createMethod$1(!1) ][0];
+CalloutText.displayName = "CalloutText";
 
-// `Array.prototype.includes` method
-// https://tc39.es/ecma262/#sec-array.prototype.includes
-_export({
-    target: "Array",
-    proto: !0,
-    forced: fails$9((function() {
-        // eslint-disable-next-line es/no-array-prototype-includes -- detection
-        return !Array(1).includes();
-    }))
-}, {
-    includes: function(el /* , fromIndex = 0 */) {
-        return $includes(this, el, arguments.length > 1 ? arguments[1] : void 0);
-    }
-});
+const CalloutActions =  forwardRef((({children: children, className: className = "", ...props}, ref) => jsx("div", {
+    ref: ref,
+    className: `c-callout__actions ${className}`.trim(),
+    ...props,
+    children: children
+})));
 
-var globalThis$2 = globalThis_1, path = path$3, getBuiltInPrototypeMethod$3 = function(CONSTRUCTOR, METHOD) {
-    var Namespace = path[CONSTRUCTOR + "Prototype"], pureMethod = Namespace && Namespace[METHOD];
-    if (pureMethod) return pureMethod;
-    var NativeConstructor = globalThis$2[CONSTRUCTOR], NativePrototype = NativeConstructor && NativeConstructor.prototype;
-    return NativePrototype && NativePrototype[METHOD];
-}, includes$4 = getBuiltInPrototypeMethod$3("Array", "includes"), isObject$1 = isObject$6, classof$3 = classofRaw$2, MATCH$1 = wellKnownSymbol$5("match"), $TypeError$1 = TypeError, test = {};
+CalloutActions.displayName = "CalloutActions";
 
-test[wellKnownSymbol$5("toStringTag")] = "z";
+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"
+    })
+})));
 
-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);
+CalloutCloseButton.displayName = "CalloutCloseButton";
 
-// `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);
-    }
-});
+// 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
+})));
 
-var includes$3 = getBuiltInPrototypeMethod$3("String", "includes"), isPrototypeOf$1 = objectIsPrototypeOf, arrayMethod = includes$4, stringMethod = includes$3, ArrayPrototype$1 = Array.prototype, StringPrototype = String.prototype;
+CalloutContent.displayName = "CalloutContent";
 
-const _includesInstanceProperty =  getDefaultExportFromCjs((function(it) {
-    var own = it.includes;
-    return it === ArrayPrototype$1 || isPrototypeOf$1(ArrayPrototype$1, it) && own === ArrayPrototype$1.includes ? arrayMethod : "string" == typeof it || it === StringPrototype || isPrototypeOf$1(StringPrototype, it) && own === StringPrototype.includes ? stringMethod : own;
-})), Callout = ({title: title, children: children, icon: icon, variant: variant = "primary", onClose: onClose, actions: actions, compact: compact = !1, isToast: isToast = !1, glass: glass, className: className, style: style, ...props}) => {
+const 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
@@ -9405,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
@@ -9447,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);
@@ -9510,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
             })
         })
     });
@@ -9533,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" : ""}`,
@@ -9571,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
@@ -10662,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
+})));
+
+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"
+    })
+})));
 
-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}) => {
+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,
@@ -10725,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", {
@@ -10774,7 +11021,7 @@ const EdgePanel = ({title: title, children: children, position: position = "star
             }) : panelContent
         }) ]
     });
-};
+}));
 
 /**
  * Form state and functionality
@@ -10808,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({
@@ -12381,8 +12629,6 @@ function useSlider(options) {
     };
 }
 
-// Button composables
-// export * from './useButton';
 // Accordion composables
 const composablesImport =  Object.freeze( Object.defineProperty({
     __proto__: null,
@@ -12423,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,
@@ -12435,14 +12731,18 @@ 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 => {
@@ -12454,93 +12754,106 @@ const composablesImport =  Object.freeze( Object.defineProperty({
         };
     }), []);
     // 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)))
+    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) {
@@ -12564,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
@@ -13444,7 +13755,7 @@ const Hero = ({title: title, subtitle: subtitle, text: text, imageSrc: imageSrc,
     autoplay: !0,
     loop: !0,
     muted: !0
-}, backgroundSlider: backgroundSlider, headingLevel: headingLevel = "h1", reverseOnMobile: reverseOnMobile = !1, parts: parts, ...rest}) => {
+}, backgroundSlider: backgroundSlider, headingLevel: headingLevel = "h1", reverseOnMobile: reverseOnMobile = !1, parts: parts, backgroundElement: backgroundElement, ...rest}) => {
     // Define dynamic heading tag
     const HeadingTag = headingLevel, {generateHeroClassNames: generateHeroClassNames, generateImageColClass: generateImageColClass, generateContentColClass: generateContentColClass, hasBackgroundImage: hasBackgroundImage, hasForegroundImage: hasForegroundImage, useGridLayout: useGridLayout, heroRef: heroRef, videoRef: videoRef, backgroundSlider: sliderHook, hasBackgroundSlider: hasBackgroundSlider} = useHero({
         title: title,
@@ -13603,7 +13914,7 @@ const Hero = ({title: title, subtitle: subtitle, text: text, imageSrc: imageSrc,
         "data-parallax": parallax ? "true" : void 0,
         "data-parallax-intensity": parallax ? parallaxIntensity : void 0,
         ...rest,
-        children: [ (() => {
+        children: [ backgroundElement, (() => {
             // Render background slider if configured
             if (hasBackgroundSlider && backgroundSlider && sliderHook) {
                 const {slides: slides, transition: transition = "fade", transitionDuration: transitionDuration = 1e3} = backgroundSlider, {currentIndex: currentIndex, slideRefs: slideRefs, videoRefs: videoRefs} = sliderHook;
@@ -13698,7 +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;
@@ -13709,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
@@ -13933,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
@@ -13986,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", {
@@ -14067,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
@@ -14127,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.
@@ -17003,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
@@ -17058,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,
@@ -17103,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,
@@ -17120,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