@shohojdhara/atomix 0.4.0 → 0.4.1

package/dist/index.js

@@ -28,7 +28,377 @@ function _interopNamespaceCompat(e) {
     })), n.default = e, Object.freeze(n);
 }
 
-var React__default =  _interopDefaultCompat(React), PhosphorIcons__namespace =  _interopNamespaceCompat(PhosphorIcons);
+var React__default =  _interopDefaultCompat(React), PhosphorIcons__namespace =  _interopNamespaceCompat(PhosphorIcons), 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, _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;
+}));
 
 /**
  * Default theme colors for components
@@ -2195,7 +2565,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] = React.useState(!1), [isActive, setIsActive] = React.useState(!1), [glassSize, setGlassSize] = React.useState({
         width: 270,
@@ -2396,9 +2766,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 = {
@@ -2407,8 +2776,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
     React.useEffect((() => {
         if (externalGlobalMousePosition && externalMouseOffset) 
@@ -2848,7 +3217,69 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, cornerRadiu
     });
 }
 
-const Accordion =  React.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 = () => jsxRuntime.jsx("i", {
+    className: "c-accordion__icon",
+    "aria-hidden": "true",
+    children: jsxRuntime.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: jsxRuntime.jsx("polyline", {
+            points: "6 9 12 15 18 9"
+        })
+    })
+}), AccordionHeader =  React.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 ? jsxRuntime.jsx(DefaultIcon, {}) : icon;
+    return jsxRuntime.jsxs("button", {
+        ref: ref,
+        type: "button",
+        className: className,
+        ...props,
+        children: [ title && jsxRuntime.jsx("span", {
+            className: "c-accordion__title",
+            children: title
+        }), children, iconElement ]
+    });
+}));
+
+AccordionHeader.displayName = "AccordionHeader";
+
+const AccordionBody =  React.forwardRef((({children: children, className: className = "", panelRef: panelRef, contentRef: contentRef, ...props}, ref) => {
+    const mergedPanelRef = React__default.default.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 jsxRuntime.jsx("div", {
+        ref: mergedPanelRef,
+        className: className,
+        role: "region",
+        ...props,
+        children: jsxRuntime.jsx("div", {
+            className: ACCORDION.SELECTORS.BODY.replace(".", ""),
+            ref: contentRef,
+            children: children
+        })
+    });
+}));
+
+AccordionBody.displayName = "AccordionBody";
+
+const AccordionImpl =  React.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 = React.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,
@@ -2858,53 +3289,59 @@ const Accordion =  React.memo((({title: title, children: children, defaultOpen:
         onOpenChange: onOpenChange,
         onOpen: onOpen,
         onClose: onClose
-    }), defaultIcon = jsxRuntime.jsx("i", {
-        className: "c-accordion__icon",
-        "aria-hidden": "true",
-        children: jsxRuntime.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: jsxRuntime.jsx("polyline", {
-                points: "6 9 12 15 18 9"
-            })
-        })
-    }), accordionContent = jsxRuntime.jsxs("div", {
+    }), headerClassNames = generateHeaderClassNames(), panelClassNames = ACCORDION.SELECTORS.PANEL.replace(".", ""), hasCompoundComponents = React__default.default.Children.toArray(children).some((child => {
+        var _context;
+        
+        return React__default.default.isValidElement(child) && _includesInstanceProperty(_context = [ "AccordionHeader", "AccordionBody" ]).call(_context, child.type.displayName);
+    })), content = jsxRuntime.jsx("div", {
         className: generateClassNames(className) + (glass ? " c-accordion--glass" : ""),
         style: style,
-        children: [ jsxRuntime.jsxs("button", {
-            id: buttonId,
-            className: generateHeaderClassNames(),
-            onClick: toggle,
-            "aria-expanded": state.isOpen,
-            "aria-controls": panelId,
-            "aria-disabled": disabled,
-            disabled: disabled,
-            type: "button",
-            children: [ jsxRuntime.jsx("span", {
-                className: "c-accordion__title",
-                children: title
-            }), icon || defaultIcon ]
-        }), jsxRuntime.jsx("div", {
-            id: panelId,
-            className: ACCORDION.SELECTORS.PANEL.replace(".", ""),
-            ref: panelRef,
-            role: "region",
-            "aria-labelledby": buttonId,
-            children: jsxRuntime.jsx("div", {
-                className: ACCORDION.SELECTORS.BODY.replace(".", ""),
-                ref: contentRef,
+        children: hasCompoundComponents ? React__default.default.Children.map(children, (child => {
+            if ( React__default.default.isValidElement(child)) {
+                if ("AccordionHeader" === child.type.displayName) 
+                return React__default.default.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__default.default.cloneElement(child, {
+                    id: panelId,
+                    className: `${panelClassNames} ${child.props.className || ""}`.trim(),
+                    "aria-labelledby": buttonId,
+                    panelRef: panelRef,
+                    contentRef: contentRef
+                });
+            }
+            return child;
+        })) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
+            children: [ jsxRuntime.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
+            }), jsxRuntime.jsx(AccordionBody, {
+                id: panelId,
+                className: panelClassNames,
+                "aria-labelledby": buttonId,
+                panelRef: panelRef,
+                contentRef: contentRef,
                 children: children
-            })
-        }) ]
+            }) ]
+        })
     });
     if (glass) {
         // Default glass settings for accordions
@@ -2917,16 +3354,20 @@ const Accordion =  React.memo((({title: title, children: children, defaultOpen:
         };
         return jsxRuntime.jsx(AtomixGlass, {
             ...glassProps,
-            children: accordionContent
+            children: content
         });
     }
-    return accordionContent;
+    return content;
 }));
 
-// Set display name for debugging
-Accordion.displayName = "Accordion";
+AccordionImpl.displayName = "Accordion";
 
-const AtomixLogo = ({height: height = 24, width: width = 24, color: color = "currentColor", ...props}) => jsxRuntime.jsxs("svg", {
+// Attach subcomponents
+const AccordionWithSubcomponents = AccordionImpl;
+
+AccordionWithSubcomponents.Header = AccordionHeader, AccordionWithSubcomponents.Body = AccordionBody;
+
+const Accordion = AccordionWithSubcomponents, AtomixLogo = ({height: height = 24, width: width = 24, color: color = "currentColor", ...props}) => jsxRuntime.jsxs("svg", {
     width: width,
     height: height,
     viewBox: "0 0 24 24",
@@ -3153,8 +3594,6 @@ const AtomixLogo = ({height: height = 24, width: width = 24, color: color = "cur
     noise: (uv, mousePosition) => fragmentShaders.appleFluid(uv, mousePosition)
 };
 
-// Adapted from https://github.com/shuding/liquid-glass
-// Constants
 var shaderUtils =  Object.freeze({
     __proto__: null,
     ShaderDisplacementGenerator: class {
@@ -3503,43 +3942,82 @@ const useBlock = () => ({
  * ```
  */ Block.displayName = "Block";
 
-const Breadcrumb =  React.memo((({items: items, divider: divider, className: className = "", "aria-label": ariaLabel = "Breadcrumb", LinkComponent: LinkComponent, style: style}) => {
+const BreadcrumbItem =  React.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 = jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [ icon && jsxRuntime.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 jsxRuntime.jsx("li", {
+        ref: ref,
+        className: itemClasses,
+        style: style,
+        ...props,
+        children: href && !active ? LinkComponent ? (() => {
+            const Component = LinkComponent;
+            return jsxRuntime.jsx(Component, {
+                href: href,
+                ...commonLinkProps,
+                children: linkContent
+            });
+        })() : jsxRuntime.jsx("a", {
+            href: href,
+            ...commonLinkProps,
+            children: linkContent
+        }) : jsxRuntime.jsx("span", {
+            className: BREADCRUMB.CLASSES.LINK,
+            children: linkContent
+        })
+    });
+}));
+
+BreadcrumbItem.displayName = "BreadcrumbItem";
+
+const Breadcrumb =  React.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 jsxRuntime.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 = React.Children.count(children);
+        content = React.Children.map(children, ((child, index) => {
+            if ( React.isValidElement(child)) {
+                const isLast = index === childrenCount - 1, childProps = child.props;
+                
+                return React.cloneElement(child, {
+                    active: childProps.active ?? (!!isLast || void 0),
+                    linkAs: childProps.linkAs ?? LinkComponent
+                });
+            }
+            return child;
+        }));
+    }
     return jsxRuntime.jsx("nav", {
         "aria-label": ariaLabel,
         style: style,
         children: jsxRuntime.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 = jsxRuntime.jsxs(jsxRuntime.Fragment, {
-                    children: [ item.icon && jsxRuntime.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 jsxRuntime.jsx("li", {
-                    className: itemClasses,
-                    style: item.style,
-                    children: item.href && !item.active ? LinkComponent ? (() => {
-                        const Component = LinkComponent;
-                        return jsxRuntime.jsx(Component, {
-                            ...linkProps,
-                            children: linkContent
-                        });
-                    })() : jsxRuntime.jsx("a", {
-                        ...linkProps,
-                        children: linkContent
-                    }) : jsxRuntime.jsx("span", {
-                        className: BREADCRUMB.CLASSES.LINK,
-                        children: linkContent
-                    })
-                }, index);
-            }))
+            children: content
         })
     });
 }));
@@ -3570,7 +4048,7 @@ function useSpinner(initialProps) {
     };
 }
 
-Breadcrumb.displayName = "Breadcrumb";
+Breadcrumb.displayName = "Breadcrumb", Breadcrumb.Item = BreadcrumbItem;
 
 const Spinner =  React.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({
@@ -3635,7 +4113,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
@@ -3839,382 +4317,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 =  React.forwardRef((({children: children, className: className = "", ...props}, ref) => jsxRuntime.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 =  React.forwardRef((({children: children, className: className = "", ...props}, ref) => jsxRuntime.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 =  React.forwardRef((({children: children, className: className = "", ...props}, ref) => jsxRuntime.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 =  React.forwardRef((({children: children, className: className = "", ...props}, ref) => jsxRuntime.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 =  React.forwardRef((({children: children, className: className = "", ...props}, ref) => jsxRuntime.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 =  React.forwardRef((({onClick: onClick, className: className = "", ...props}, ref) => jsxRuntime.jsx("button", {
+    ref: ref,
+    className: `c-callout__close-btn ${className}`.trim(),
+    onClick: onClick,
+    "aria-label": "Close",
+    ...props,
+    children: jsxRuntime.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 =  React.forwardRef((({children: children, className: className = "", ...props}, ref) => jsxRuntime.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, _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;
-}));
+CalloutContent.displayName = "CalloutContent";
 
-/**
- * Callout component for displaying important messages, notifications, or alerts
- */
-const 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 =  React.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
@@ -4260,7 +4433,11 @@ const Callout = ({title: title, children: children, icon: icon, variant: variant
                 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 = jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    }, calloutContent = React__default.default.Children.toArray(children).some((child => {
+        var _context3;
+        
+        return React__default.default.isValidElement(child) && _includesInstanceProperty(_context3 = [ "CalloutIcon", "CalloutMessage", "CalloutTitle", "CalloutText", "CalloutActions", "CalloutContent" ]).call(_context3, child.type.displayName);
+    })) ? children : jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [ jsxRuntime.jsxs("div", {
             className: "c-callout__content",
             children: [ icon && jsxRuntime.jsx("div", {
@@ -4336,9 +4513,13 @@ const Callout = ({title: title, children: children, icon: icon, variant: variant
         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__default.default.memo( React.forwardRef((({
 // Variants
@@ -9455,7 +9636,38 @@ const DropdownContext =  React.createContext({
     close: () => {},
     id: "",
     trigger: "click"
-}), DropdownItem =  React.memo((({children: children, href: href, active: active = !1, disabled: disabled = !1, icon: icon, onClick: onClick, className: className = "", LinkComponent: LinkComponent, ...props}) => {
+}), DropdownMenu =  React.forwardRef((({children: children, className: className = "", ...props}, ref) => {
+    const {glass: glass} = React.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 jsxRuntime.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 =  React.forwardRef((({children: children, className: className = "", onClick: onClick, onKeyDown: onKeyDown, ...props}, ref) => jsxRuntime.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 =  React.memo((({children: children, href: href, active: active = !1, disabled: disabled = !1, icon: icon, onClick: onClick, className: className = "", LinkComponent: LinkComponent, ...props}) => {
     const {close: close} = React.useContext(DropdownContext), handleClick = e => {
         disabled ? e.preventDefault() : (onClick && onClick(e), 
         // Always close the dropdown when an item is clicked
@@ -9506,7 +9718,7 @@ const DropdownContext =  React.createContext({
 }))), DropdownHeader =  React.memo((({children: children, className: className = ""}) => jsxRuntime.jsx("li", {
     className: `c-dropdown__header ${className}`,
     children: children
-}))), Dropdown =  React.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 =  React.createContext({}), Dropdown =  React.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] = React.useState(!1), isControlled = void 0 !== controlledIsOpen, isOpen = isControlled ? controlledIsOpen : uncontrolledIsOpen, dropdownRef = React.useRef(null), toggleRef = React.useRef(null), menuRef = React.useRef(null), dropdownId = React.useRef(`dropdown-${Math.random().toString(36).substring(2, 9)}`).current, setIsOpen = React.useCallback((nextIsOpen => {
         isControlled || setUncontrolledIsOpen(nextIsOpen), onOpenChange && onOpenChange(nextIsOpen);
@@ -9569,20 +9781,59 @@ const DropdownContext =  React.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__default.default.Children.toArray(children).some((child => {
+        var _context;
+        
+        return React__default.default.isValidElement(child) && _includesInstanceProperty(_context = [ "DropdownTrigger", "DropdownMenu" ]).call(_context, child.type.displayName);
+    })) ? 
+    // Find Trigger and Menu in children
+    React__default.default.Children.forEach(children, (child => {
+         React__default.default.isValidElement(child) && ("DropdownTrigger" === child.type.displayName ? triggerContent =  React__default.default.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 = jsxRuntime.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 = jsxRuntime.jsx("ul", {
+        className: "c-dropdown__menu " + (glass ? "c-dropdown__menu--glass" : ""),
+        children: menu
+    }));
     const menuContent = jsxRuntime.jsx("div", {
         className: "c-dropdown__menu-inner",
         style: menuStyleProps,
-        children: jsxRuntime.jsx(DropdownContext.Provider, {
+        children: jsxRuntime.jsx(DropdownStyleContext.Provider, {
             value: {
-                isOpen: isOpen,
-                close: close,
-                id: dropdownId,
-                trigger: trigger
+                glass: glass
             },
-            children: jsxRuntime.jsx("ul", {
-                className: "c-dropdown__menu " + (glass ? "c-dropdown__menu--glass" : ""),
-                children: menu
+            children: jsxRuntime.jsx(DropdownContext.Provider, {
+                value: {
+                    isOpen: isOpen,
+                    close: close,
+                    id: dropdownId,
+                    trigger: trigger
+                },
+                children: menuContentNode
             })
         })
     });
@@ -9592,17 +9843,7 @@ const DropdownContext =  React.createContext({
         style: style,
         onMouseEnter: "hover" === trigger ? handleHoverOpen : void 0,
         ...props,
-        children: [ jsxRuntime.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
-        }), jsxRuntime.jsx("div", {
+        children: [ triggerContent, jsxRuntime.jsx("div", {
             ref: menuRef,
             id: dropdownId,
             className: `c-dropdown__menu-wrapper c-dropdown__menu-wrapper--${placement} ${isOpen ? "is-open" : ""} ${glass ? "is-glass" : ""}`,
@@ -9630,9 +9871,9 @@ const DropdownContext =  React.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
@@ -10721,53 +10962,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 =  React.forwardRef((({children: children, className: className = "", ...props}, ref) => jsxRuntime.jsx("div", {
+    ref: ref,
+    className: `c-edge-panel__header ${className}`.trim(),
+    ...props,
+    children: children
+})));
+
+EdgePanelHeader.displayName = "EdgePanelHeader";
+
+const EdgePanelBody =  React.forwardRef((({children: children, className: className = "", ...props}, ref) => jsxRuntime.jsx("div", {
+    ref: ref,
+    className: `c-edge-panel__body ${className}`.trim(),
+    ...props,
+    children: children
+})));
+
+EdgePanelBody.displayName = "EdgePanelBody";
+
+const EdgePanelFooter =  React.forwardRef((({children: children, className: className = "", ...props}, ref) => jsxRuntime.jsx("div", {
+    ref: ref,
+    className: `c-edge-panel__footer ${className}`.trim(),
+    ...props,
+    children: children
+})));
+
+EdgePanelFooter.displayName = "EdgePanelFooter";
+
+const EdgePanelCloseButton =  React.forwardRef((({className: className = "", onClick: onClick, ...props}, ref) => jsxRuntime.jsx("button", {
+    ref: ref,
+    className: `c-edge-panel__close c-btn c-btn--icon ${className}`.trim(),
+    onClick: onClick,
+    "aria-label": "Close panel",
+    ...props,
+    children: jsxRuntime.jsx(Icon, {
+        name: "X"
+    })
+})));
+
+EdgePanelCloseButton.displayName = "EdgePanelCloseButton";
 
-const EdgePanel = ({title: title, children: children, position: position = "start", mode: mode = "slide", isOpen: isOpen = !1, onOpenChange: onOpenChange, backdrop: backdrop = !0, closeOnBackdropClick: closeOnBackdropClick = !0, closeOnEscape: closeOnEscape = !0, className: className = "", style: style, glass: glass}) => {
+const EdgePanel =  React.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,
@@ -10784,13 +11022,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 = jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    }, panelContent = React__default.default.Children.toArray(children).some((child => {
+        var _context;
+        
+        return React__default.default.isValidElement(child) && _includesInstanceProperty(_context = [ "EdgePanelHeader", "EdgePanelBody", "EdgePanelFooter" ]).call(_context, child.type.displayName);
+    })) ? children : jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [ jsxRuntime.jsxs("div", {
             className: "c-edge-panel__header",
             children: [ jsxRuntime.jsx("h4", {
@@ -10833,7 +11081,7 @@ const EdgePanel = ({title: title, children: children, position: position = "star
             }) : panelContent
         }) ]
     });
-};
+}));
 
 /**
  * Form state and functionality
@@ -10867,7 +11115,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({
@@ -12438,8 +12687,6 @@ function useSlider(options) {
     };
 }
 
-// Button composables
-// export * from './useButton';
 // Accordion composables
 var composablesImport =  Object.freeze({
     __proto__: null,
@@ -12480,9 +12727,57 @@ var composablesImport =  Object.freeze({
     useTodo: useTodo
 });
 
+const SelectContext =  React.createContext(null), SelectOption =  React.memo((({value: value, children: children, disabled: disabled = !1, className: className = "", style: style}) => {
+    const context = React.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 (React.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 jsxRuntime.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: jsxRuntime.jsxs("label", {
+            className: "c-checkbox",
+            style: {
+                pointerEvents: "none"
+            },
+            children: [ jsxRuntime.jsx("input", {
+                type: "checkbox",
+                className: "c-checkbox__input c-select__item-input",
+                checked: isSelected,
+                readOnly: !0,
+                disabled: disabled,
+                tabIndex: -1
+            }), jsxRuntime.jsx("div", {
+                className: "c-select__item-label",
+                children: children
+            }) ]
+        })
+    });
+}));
+
+SelectOption.displayName = "SelectOption";
+
 /**
  * Select - A component for dropdown selection
- */ const Select =  React.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}) => {
+ */
+const Select =  React.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,
@@ -12494,14 +12789,18 @@ var composablesImport =  Object.freeze({
         disabled: disabled,
         invalid: invalid,
         valid: valid
-    }), [isOpen, setIsOpen] = React.useState(!1), [selectedLabel, setSelectedLabel] = React.useState(placeholder), dropdownRef = React.useRef(null), panelRef = React.useRef(null), bodyRef = React.useRef(null), nativeSelectRef = React.useRef(null);
+    }), [isOpen, setIsOpen] = React.useState(!1), [selectedLabel, setSelectedLabel] = React.useState(placeholder), dropdownRef = React.useRef(null), panelRef = React.useRef(null), bodyRef = React.useRef(null), nativeSelectRef = React.useRef(null), [registeredOptions, setRegisteredOptions] = React.useState([]), registerOption = React.useCallback((option => {
+        setRegisteredOptions((prev => prev.some((o => o.value === option.value)) ? prev : [ ...prev, option ]));
+    }), []), unregisterOption = React.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
     React.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
     React.useEffect((() => {
         const handleClickOutside = event => {
@@ -12513,93 +12812,106 @@ var composablesImport =  Object.freeze({
         };
     }), []);
     // Toggle dropdown
-    const selectContent = jsxRuntime.jsxs("div", {
-        className: `${selectClass} ${isOpen ? SELECT.CLASSES.IS_OPEN : ""}`,
-        ref: dropdownRef,
-        style: style,
-        "aria-expanded": isOpen,
-        children: [ jsxRuntime.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 && jsxRuntime.jsx("option", {
-                value: "",
-                disabled: !0,
-                children: placeholder
-            }), options.map((option => jsxRuntime.jsx("option", {
-                value: option.value,
-                disabled: option.disabled,
-                children: option.label
-            }, option.value))) ]
-        }), jsxRuntime.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
-        }), jsxRuntime.jsx("i", {
-            className: `${SELECT.CLASSES.ICON_CARET} ${SELECT.CLASSES.TOGGLE_ICON}`
-        }), jsxRuntime.jsx("div", {
-            className: SELECT.CLASSES.SELECT_BODY,
-            ref: bodyRef,
-            style: {
-                height: 0
-            },
-            children: jsxRuntime.jsx("div", {
-                className: SELECT.CLASSES.SELECT_PANEL,
-                ref: panelRef,
-                children: jsxRuntime.jsx("ul", {
-                    className: SELECT.CLASSES.SELECT_ITEMS,
-                    children: options.map(((option, index) => jsxRuntime.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: jsxRuntime.jsxs("label", {
-                            htmlFor: `SelectItem${index}`,
-                            className: "c-checkbox",
-                            children: [ jsxRuntime.jsx("input", {
-                                type: "checkbox",
-                                id: `SelectItem${index}`,
-                                className: "c-checkbox__input c-select__item-input",
-                                checked: value === option.value,
-                                readOnly: !0,
-                                disabled: option.disabled
-                            }), jsxRuntime.jsx("div", {
-                                className: "c-select__item-label",
-                                children: option.label
-                            }) ]
-                        })
-                    }, option.value)))
+    const handleItemClick = React.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 = React.useCallback(((val, label) => {
+        handleItemClick({
+            value: val,
+            label: label
+        });
+    }), [ handleItemClick ]), contextValue = React__default.default.useMemo((() => ({
+        registerOption: registerOption,
+        unregisterOption: unregisterOption,
+        selectedValue: value,
+        onSelect: onSelect
+    })), [ registerOption, unregisterOption, value, onSelect ]), selectContent = jsxRuntime.jsx(SelectContext.Provider, {
+        value: contextValue,
+        children: jsxRuntime.jsxs("div", {
+            className: `${selectClass} ${isOpen ? SELECT.CLASSES.IS_OPEN : ""}`,
+            ref: dropdownRef,
+            style: style,
+            "aria-expanded": isOpen,
+            children: [ jsxRuntime.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 && jsxRuntime.jsx("option", {
+                    value: "",
+                    disabled: !0,
+                    children: placeholder
+                }), activeOptions.map((option => jsxRuntime.jsx("option", {
+                    value: option.value,
+                    disabled: option.disabled,
+                    children: option.label
+                }, option.value))) ]
+            }), jsxRuntime.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
+            }), jsxRuntime.jsx("i", {
+                className: `${SELECT.CLASSES.ICON_CARET} ${SELECT.CLASSES.TOGGLE_ICON}`
+            }), jsxRuntime.jsx("div", {
+                className: SELECT.CLASSES.SELECT_BODY,
+                ref: bodyRef,
+                style: {
+                    height: 0
+                },
+                children: jsxRuntime.jsx("div", {
+                    className: SELECT.CLASSES.SELECT_PANEL,
+                    ref: panelRef,
+                    children: jsxRuntime.jsx("ul", {
+                        className: SELECT.CLASSES.SELECT_ITEMS,
+                        children: hasOptionsProp ? options.map(((option, index) => jsxRuntime.jsx("li", {
+                            className: SELECT.CLASSES.SELECT_ITEM,
+                            "data-value": option.value,
+                            onClick: () => !option.disabled && handleItemClick(option),
+                            children: jsxRuntime.jsxs("label", {
+                                htmlFor: `SelectItem${index}`,
+                                className: "c-checkbox",
+                                children: [ jsxRuntime.jsx("input", {
+                                    type: "checkbox",
+                                    id: `SelectItem${index}`,
+                                    className: "c-checkbox__input c-select__item-input",
+                                    checked: value === option.value,
+                                    readOnly: !0,
+                                    disabled: option.disabled
+                                }), jsxRuntime.jsx("div", {
+                                    className: "c-select__item-label",
+                                    children: option.label
+                                }) ]
+                            })
+                        }, option.value))) : children
+                    })
                 })
-            })
-        }) ]
+            }) ]
+        })
     });
     // Handle item selection
         if (glass) {
@@ -12623,7 +12935,7 @@ var composablesImport =  Object.freeze({
     return selectContent;
 }));
 
-Select.displayName = "Select";
+Select.displayName = "Select", Select.Option = SelectOption;
 
 /**
  * Radio - A component for radio button inputs
@@ -13501,7 +13813,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,
@@ -13660,7 +13972,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;
@@ -13755,7 +14067,84 @@ const Hero = ({title: title, subtitle: subtitle, text: text, imageSrc: imageSrc,
     });
 };
 
-Hero.displayName = "Hero";
+Hero.Title = ({children: children, className: className, level: level = "h1", ...props}) => {
+    const Tag = level;
+    return jsxRuntime.jsx(Tag, {
+        className: `${HERO.SELECTORS.TITLE.replace(".", "")} ${className || ""}`.trim(),
+        ...props,
+        children: children
+    });
+}, Hero.Subtitle = ({children: children, className: className, ...props}) => jsxRuntime.jsx("p", {
+    className: `${HERO.SELECTORS.SUBTITLE.replace(".", "")} ${className || ""}`.trim(),
+    ...props,
+    children: children
+}), Hero.Text = ({children: children, className: className, ...props}) => jsxRuntime.jsx("p", {
+    className: `${HERO.SELECTORS.TEXT.replace(".", "")} ${className || ""}`.trim(),
+    ...props,
+    children: children
+}), Hero.Actions = ({children: children, className: className, ...props}) => jsxRuntime.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 jsxRuntime.jsx("div", {
+            className: contentClass,
+            style: style,
+            ...props,
+            children: jsxRuntime.jsx(AtomixGlass, {
+                ...glassProps,
+                children: jsxRuntime.jsx("div", {
+                    className: "u-p-4",
+                    children: children
+                })
+            })
+        });
+    }
+    return jsxRuntime.jsx("div", {
+        className: contentClass,
+        style: style,
+        ...props,
+        children: children
+    });
+}, Hero.Image = ({src: src, alt: alt = "", className: className, wrapperClassName: wrapperClassName, wrapperStyle: wrapperStyle, ...props}) => jsxRuntime.jsx("div", {
+    className: `${HERO.SELECTORS.IMAGE_WRAPPER.replace(".", "")} ${wrapperClassName || ""}`.trim(),
+    style: wrapperStyle,
+    children: jsxRuntime.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}) => jsxRuntime.jsxs("div", {
+    className: `${HERO.SELECTORS.BG.replace(".", "")} ${className || ""}`.trim(),
+    style: style,
+    ...props,
+    children: [ src && jsxRuntime.jsx("img", {
+        src: src,
+        alt: "Background",
+        className: HERO.SELECTORS.BG_IMAGE.replace(".", "")
+    }), children ]
+}), Hero.displayName = "Hero";
+
+const ListItem =  React.forwardRef((({children: children, className: className = "", ...props}, ref) => jsxRuntime.jsx("li", {
+    ref: ref,
+    className: `${LIST.ITEM_CLASS} ${className}`.trim(),
+    ...props,
+    children: children
+})));
+
+ListItem.displayName = "ListItem";
 
 const List =  React.memo((({children: children, variant: variant = "default", className: className = "", style: style, ...props}) => {
     var _context;
@@ -13766,14 +14155,14 @@ const List =  React.memo((({children: children, variant: variant = "default", cl
         className: listClasses,
         style: style,
         ...props,
-        children: React__default.default.Children.map(children, (child => jsxRuntime.jsx("li", {
+        children: React__default.default.Children.map(children, (child =>  React__default.default.isValidElement(child) && child.type === ListItem ? child : jsxRuntime.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
@@ -13990,10 +14379,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 =  React.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 =  React.forwardRef((({title: title, subtitle: subtitle, closeButton: closeButton, onClose: onClose, children: children, className: className = "", ...props}, ref) => jsxRuntime.jsxs("div", {
+    ref: ref,
+    className: `c-modal__header ${className}`.trim(),
+    ...props,
+    children: [ jsxRuntime.jsxs("div", {
+        className: "c-modal__header-content",
+        children: [ title && jsxRuntime.jsx("h3", {
+            className: "c-modal__title",
+            children: title
+        }), subtitle && jsxRuntime.jsx("p", {
+            className: "c-modal__sub",
+            children: subtitle
+        }), children ]
+    }), closeButton && jsxRuntime.jsx("button", {
+        type: "button",
+        className: "c-modal__close c-btn js-modal-close",
+        onClick: onClose,
+        "aria-label": "Close modal",
+        children: jsxRuntime.jsx("svg", {
+            width: "20",
+            height: "20",
+            viewBox: "0 0 20 20",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            children: jsxRuntime.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 =  React.forwardRef((({children: children, className: className = "", ...props}, ref) => jsxRuntime.jsx("div", {
+    ref: ref,
+    className: `c-modal__body ${className}`.trim(),
+    ...props,
+    children: children
+})));
+
+ModalBody.displayName = "ModalBody";
+
+const ModalFooter =  React.forwardRef((({children: children, className: className = "", ...props}, ref) => jsxRuntime.jsx("div", {
+    ref: ref,
+    className: `c-modal__footer ${className}`.trim(),
+    ...props,
+    children: children
+})));
+
+ModalFooter.displayName = "ModalFooter";
+
+const ModalImpl =  React.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 = React.useRef(null), dialogRef = React.useRef(null), backdropRef = React.useRef(null), {isOpen: isOpenState, open: open, close: close} = 
     /**
  * Hook for managing modal state
@@ -14043,43 +14481,26 @@ const Modal =  React.memo((({children: children, isOpen: isOpen = !1, onOpenChan
         };
     }), [ 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 = jsxRuntime.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__default.default.Children.toArray(children).some((child => {
+        var _context;
+        
+        return React__default.default.isValidElement(child) && _includesInstanceProperty(_context = [ "ModalHeader", "ModalBody", "ModalFooter" ]).call(_context, child.type.displayName);
+    })), modalContent = jsxRuntime.jsx("div", {
         className: "c-modal__content",
-        children: [ (title || closeButton) && jsxRuntime.jsxs("div", {
-            className: "c-modal__header",
-            children: [ jsxRuntime.jsxs("div", {
-                className: "c-modal__header-content",
-                children: [ title && jsxRuntime.jsx("h3", {
-                    className: "c-modal__title",
-                    children: title
-                }), subtitle && jsxRuntime.jsx("p", {
-                    className: "c-modal__sub",
-                    children: subtitle
-                }) ]
-            }), closeButton && jsxRuntime.jsx("button", {
-                type: "button",
-                className: "c-modal__close c-btn js-modal-close",
-                onClick: close,
-                "aria-label": "Close modal",
-                children: jsxRuntime.jsx("svg", {
-                    width: "20",
-                    height: "20",
-                    viewBox: "0 0 20 20",
-                    fill: "none",
-                    xmlns: "http://www.w3.org/2000/svg",
-                    children: jsxRuntime.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__default.default.Children.map(children, (child =>  React__default.default.isValidElement(child) && "ModalHeader" === child.type.displayName ?  React__default.default.cloneElement(child, {
+            onClose: child.props.onClose || close
+        }) : child)) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
+            children: [ (title || closeButton) && jsxRuntime.jsx(ModalHeader, {
+                title: title,
+                subtitle: subtitle,
+                closeButton: closeButton,
+                onClose: close
+            }), jsxRuntime.jsx(ModalBody, {
+                children: children
+            }), footer && jsxRuntime.jsx(ModalFooter, {
+                children: footer
             }) ]
-        }), jsxRuntime.jsx("div", {
-            className: "c-modal__body",
-            children: children
-        }), footer && jsxRuntime.jsx("div", {
-            className: "c-modal__footer",
-            children: footer
-        }) ]
+        })
     });
     // Assemble classes
         return jsxRuntime.jsxs("div", {
@@ -14124,24 +14545,15 @@ const Modal =  React.memo((({children: children, isOpen: isOpen = !1, onOpenChan
     });
 }));
 
-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 =  React.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 =  React.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
@@ -14184,7 +14596,21 @@ const Nav =  React.forwardRef((({children: children, alignment: alignment = "sta
     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.
@@ -17072,39 +17498,72 @@ const Slider =  React.forwardRef(((props, ref) => {
 
 Slider.displayName = "Slider";
 
+const StepsItem =  React.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 jsxRuntime.jsxs("div", {
+        ref: ref,
+        className: itemClasses,
+        "aria-current": active ? "step" : void 0,
+        "data-index": index,
+        ...props,
+        children: [ jsxRuntime.jsx("div", {
+            className: "c-steps__line"
+        }), jsxRuntime.jsxs("div", {
+            className: "c-steps__content",
+            children: [ null != number && jsxRuntime.jsx("div", {
+                className: "c-steps__number",
+                children: number
+            }), title && jsxRuntime.jsx("div", {
+                className: "c-steps__text",
+                children: title
+            }), children && jsxRuntime.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] = React.useState(activeIndex);
     // Update steps when activeIndex prop changes
-        React.useEffect((() => {
+        let content;
+    React.useEffect((() => {
         currentStep !== activeIndex && setCurrentStep(activeIndex);
-    }), [ activeIndex ]);
+    }), [ activeIndex ]), 
+    // Legacy rendering
+    content = items && items.length > 0 ? items.map(((item, index) => jsxRuntime.jsx(StepsItem, {
+        index: index,
+        number: item.number,
+        title: item.text,
+        active: index <= currentStep,
+        completed: index < currentStep,
+        children: item.content
+    }, `step-${index}`))) : React.Children.map(children, ((child, index) => {
+        if ( React.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 React.cloneElement(child, {
+                index: index,
+                active: isActive,
+                completed: isCompleted,
+                number: number
+            });
+        }
+        return child;
+    }));
     const stepsContent = jsxRuntime.jsx("div", {
         className: `c-steps ${vertical ? STEPS.CLASSES.VERTICAL : ""} ${className}`,
         style: style,
         role: "navigation",
         "aria-label": "Steps",
-        children: items.map(((item, index) => jsxRuntime.jsxs("div", {
-            className: `c-steps__item ${index <= currentStep ? STEPS.CLASSES.ACTIVE : ""} ${index < currentStep ? STEPS.CLASSES.COMPLETED : ""}`,
-            "aria-current": index === currentStep ? "step" : void 0,
-            children: [ jsxRuntime.jsx("div", {
-                className: "c-steps__line"
-            }), jsxRuntime.jsxs("div", {
-                className: "c-steps__content",
-                children: [ jsxRuntime.jsx("div", {
-                    className: "c-steps__number",
-                    children: item.number
-                }), jsxRuntime.jsx("div", {
-                    className: "c-steps__text",
-                    children: item.text
-                }), item.content && jsxRuntime.jsx("div", {
-                    className: "c-steps__custom-content",
-                    children: item.content
-                }) ]
-            }) ]
-        }, `step-${index}`)))
+        children: content
     });
     if (glass) {
         // Default glass settings for steps
@@ -17127,24 +17586,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 =  React.memo((({items: items, activeIndex: activeIndex = TAB.DEFAULTS.ACTIVE_INDEX, onTabChange: onTabChange, className: className = "", style: style, glass: glass}) => {
-    const [currentTab, setCurrentTab] = React.useState(activeIndex), tabContent = jsxRuntime.jsxs("div", {
-        className: `c-tabs js-atomix-tab ${className}`,
-        style: style,
+// Context for compound usage
+const TabsContext =  React.createContext({
+    currentTab: 0,
+    handleTabClick: () => {}
+}), TabsList =  React.forwardRef((({children: children, className: className = "", ...props}, ref) => jsxRuntime.jsx("ul", {
+    ref: ref,
+    className: `c-tabs__nav ${className}`.trim(),
+    ...props,
+    children: React__default.default.Children.map(children, ((child, index) =>  React__default.default.isValidElement(child) ?  React__default.default.cloneElement(child, {
+        index: index
+    }) : child))
+})));
+
+// Compound components
+TabsList.displayName = "TabsList";
+
+const TabsTrigger =  React.forwardRef((({children: children, className: className = "", index: index, onClick: onClick, ...props}, ref) => {
+    const {currentTab: currentTab, handleTabClick: handleTabClick} = React.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 jsxRuntime.jsx("li", {
+        className: "c-tabs__nav-item",
+        children: jsxRuntime.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 =  React.forwardRef((({children: children, className: className = "", ...props}, ref) => jsxRuntime.jsx("div", {
+    ref: ref,
+    className: `c-tabs__panels ${className}`.trim(),
+    ...props,
+    children: React__default.default.Children.map(children, ((child, index) =>  React__default.default.isValidElement(child) ?  React__default.default.cloneElement(child, {
+        index: index
+    }) : child))
+})));
+
+TabsPanels.displayName = "TabsPanels";
+
+const TabsPanel =  React.forwardRef((({children: children, className: className = "", index: index, style: style, ...props}, ref) => {
+    const {currentTab: currentTab} = React.useContext(TabsContext), isActive = void 0 !== index && currentTab === index;
+    return jsxRuntime.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: jsxRuntime.jsx("div", {
+            className: "c-tabs__panel-body",
+            children: children
+        })
+    });
+}));
+
+TabsPanel.displayName = "TabsPanel";
+
+const Tabs =  React.memo((({items: items, activeIndex: activeIndex = TAB.DEFAULTS.ACTIVE_INDEX, onTabChange: onTabChange, className: className = "", style: style, glass: glass, children: children}) => {
+    const [currentTab, setCurrentTab] = React.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 ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [ jsxRuntime.jsx("ul", {
             className: "c-tabs__nav",
             children: items.map(((item, index) => jsxRuntime.jsx("li", {
                 className: "c-tabs__nav-item",
                 children: jsxRuntime.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,
@@ -17172,9 +17711,19 @@ const Tabs =  React.memo((({items: items, activeIndex: activeIndex = TAB.DEFAULT
                 })
             }, `tab-panel-${index}`)))
         }) ]
+    }) : jsxRuntime.jsx(TabsContext.Provider, {
+        value: {
+            currentTab: currentTab,
+            handleTabClick: handleTabClick
+        },
+        children: children
     });
-    // Handle tab change
-        if (glass) {
+    const wrapper = jsxRuntime.jsx("div", {
+        className: `c-tabs js-atomix-tab ${className}`,
+        style: style,
+        children: content
+    });
+    if (glass) {
         // Default glass settings for tabs
         const defaultGlassProps = {
             displacementScale: 60,
@@ -17189,13 +17738,14 @@ const Tabs =  React.memo((({items: items, activeIndex: activeIndex = TAB.DEFAULT
         };
         return jsxRuntime.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