@shohojdhara/atomix 0.4.8 → 0.5.0

package/dist/index.js

@@ -413,6 +413,14 @@ const THEME_COLORS = [ "primary", "secondary", "success", "info", "warning", "er
     ICON_ELEMENT: "icon",
     LABEL_ELEMENT: "label",
     SPINNER_ELEMENT: "spinner"
+}, TYPEDBUTTON = {
+    BASE_CLASS: "c-typedbutton",
+    VARIANT_PREFIX: "c-typedbutton--",
+    CLASSES: {
+        BASE: "c-typedbutton",
+        DISABLED: "c-typedbutton--disabled",
+        GLASS: "c-typedbutton--glass"
+    }
 }, BUTTON = {
     BASE_CLASS: "c-btn",
     ICON_CLASS: "c-btn__icon",
@@ -1750,7 +1758,16 @@ const THEME_COLORS = [ "primary", "secondary", "success", "info", "warning", "er
         PADDING: "0",
         MODE: "standard",
         OVER_LIGHT: !1,
-        ENABLE_OVER_LIGHT_LAYERS: !0
+        ENABLE_OVER_LIGHT_LAYERS: !0,
+        // Phase 1: Time-Based Animation System defaults
+        WITH_TIME_ANIMATION: !0,
+        ANIMATION_SPEED: 1,
+        // Phase 1: Multi-Layer Distortion System defaults
+        WITH_MULTI_LAYER_DISTORTION: !1,
+        DISTORTION_OCTAVES: 5,
+        DISTORTION_LACUNARITY: 2,
+        DISTORTION_GAIN: .5,
+        DISTORTION_QUALITY: "high"
     },
     CONSTANTS: {
         ACTIVATION_ZONE: 200,
@@ -1913,6 +1930,44 @@ const THEME_COLORS = [ "primary", "secondary", "success", "info", "warning", "er
         // Saturation constants
         SATURATION: {
             HIGH_CONTRAST: 200
+        },
+        // Phase 1: Animation System Constants
+        ANIMATION: {
+            // Breathing effect timing (in milliseconds)
+            BREATHING_CYCLE: 2e3,
+            // 2-second breathing cycle
+            // Flow animation speed
+            FLOW_SPEED_X: .1,
+            // Horizontal flow speed
+            FLOW_SPEED_Y: .15,
+            // Vertical flow speed
+            // Wave propagation
+            WAVE_SPEED: .05,
+            // Radial wave speed
+            WAVE_AMPLITUDE: .02
+        },
+        // Phase 1: Multi-Layer Distortion Quality Presets
+        DISTORTION_QUALITY_PRESETS: {
+            low: {
+                octaves: 2,
+                lacunarity: 2,
+                gain: .5
+            },
+            medium: {
+                octaves: 4,
+                lacunarity: 2,
+                gain: .5
+            },
+            high: {
+                octaves: 5,
+                lacunarity: 2,
+                gain: .5
+            },
+            ultra: {
+                octaves: 7,
+                lacunarity: 2,
+                gain: .5
+            }
         }
     }
 };
@@ -1961,9 +2016,7 @@ function useAccordion(initialProps) {
         toggle: () => {
             if (!defaultProps.disabled) {
                 const nextOpen = !isOpen;
-                isControlled || setInternalOpen(nextOpen), defaultProps.onOpenChange?.(nextOpen), 
-                // Call legacy handlers
-                nextOpen ? defaultProps.onOpen?.() : defaultProps.onClose?.();
+                isControlled || setInternalOpen(nextOpen), defaultProps.onOpenChange?.(nextOpen);
             }
         },
         updatePanelHeight: updatePanelHeight,
@@ -2050,7 +2103,7 @@ const {CONSTANTS: CONSTANTS$2} = ATOMIX_GLASS, calculateDistance = (pos1, pos2)
         // Silently handle errors
     }
     return CONSTANTS$2.DEFAULT_CORNER_RADIUS;
-}, lerp = (a, b, t) => a + (b - a) * t, softClamp = (value, max) => max <= 0 ? 0 : max * (1 - Math.exp(-value / max)), getDisplacementMap = (mode, displacementMap, polarDisplacementMap, prominentDisplacementMap, shaderMapUrl) => {
+}, lerp$1 = (a, b, t) => a + (b - a) * t, softClamp = (value, max) => max <= 0 ? 0 : max * (1 - Math.exp(-value / max)), getDisplacementMap = (mode, displacementMap, polarDisplacementMap, prominentDisplacementMap, shaderMapUrl) => {
     switch (mode) {
       case "standard":
         return displacementMap;
@@ -2220,14 +2273,16 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  React.forwardRef((({c
 }, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseDown: onMouseDown, onMouseUp: onMouseUp, isActive: isActive = !1, overLight: overLight = !1, overLightConfig: overLightConfig = {}, borderRadius: borderRadius = 0, padding: padding = "0 0", glassSize: glassSize = {
     width: 0,
     height: 0
-}, onClick: onClick, mode: mode = "standard", effectiveWithoutEffects: effectiveWithoutEffects = !1, effectiveReducedMotion: effectiveReducedMotion = !1, shaderVariant: shaderVariant = "liquidGlass", withLiquidBlur: withLiquidBlur = !1, contentRef: contentRef}, ref) => {
+}, onClick: onClick, mode: mode = "standard", effectiveWithoutEffects: effectiveWithoutEffects = !1, effectiveReducedMotion: effectiveReducedMotion = !1, shaderVariant: shaderVariant = "liquidGlass", withLiquidBlur: withLiquidBlur = !1, 
+// Phase 1: Animation System props
+shaderTime: shaderTime, withTimeAnimation: withTimeAnimation = !1, animationSpeed: animationSpeed = 1, withMultiLayerDistortion: withMultiLayerDistortion = !1, distortionOctaves: distortionOctaves = 3, distortionLacunarity: distortionLacunarity = 2, distortionGain: distortionGain = .5, distortionQuality: distortionQuality = "medium", contentRef: contentRef}, ref) => {
     // Generate a stable, deterministic ID for SSR compatibility
     // Use a module-level counter that's consistent across server and client
-    const filterId = React.useMemo((() => "atomix-glass-filter-" + ++idCounter), []), [shaderMapUrl, setShaderMapUrl] = React.useState(""), shaderGeneratorRef = React.useRef(null), shaderUtilsRef = React.useRef(null), shaderDebounceTimeoutRef = React.useRef(null);
+    const filterId = React.useMemo((() => "atomix-glass-filter-" + ++idCounter), []), [shaderMapUrl, setShaderMapUrl] = React.useState(""), shaderGeneratorRef = React.useRef(null), shaderUtilsRef = React.useRef(null), shaderDebounceTimeoutRef = React.useRef(null), shaderUpdateTimeoutRef = React.useRef(null), animationFrameRef = React.useRef(null);
     // Lazy load shader utilities only when shader mode is needed
     React.useEffect((() => {
         "shader" === mode ? 
-        // Dynamic import shader utilities
+        // Dynamic import shader utilities with animation support
         Promise.resolve().then((function() {
             return shaderUtils;
         })).then((shaderUtils => {
@@ -2244,7 +2299,7 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  React.forwardRef((({c
     // Generate shader map with debouncing and caching
     React.useEffect((() => {
         // Enhanced validation for shader mode
-        if ("shader" === mode && glassSize && validateGlassSize(glassSize) && shaderUtilsRef.current) {
+        if ("shader" === mode && glassSize && validateGlassSize(glassSize)) {
             // Create cache key from size and variant
             const cacheKey = `${glassSize.width}x${glassSize.height}-${shaderVariant}`, cachedUrl = (key => {
                 const entry = sharedShaderCache.get(key);
@@ -2266,11 +2321,9 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  React.forwardRef((({c
                         width: glassSize.width,
                         height: glassSize.height,
                         fragment: selectedShader
-                    }), 
-                    // Defer shader generation with longer delay to avoid blocking
-                    setTimeout((() => {
+                    }), shaderUpdateTimeoutRef.current = setTimeout((() => {
                         const url = shaderGeneratorRef.current?.updateShader() || "";
-                        ((key, url) => {
+                        url && ((key, url) => {
                             // Evict oldest entries if at capacity
                             if (sharedShaderCache.size >= 15) {
                                 const entries = Array.from(sharedShaderCache.entries());
@@ -2302,7 +2355,8 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  React.forwardRef((({c
         // Cleanup function with error handling
                 return () => {
             shaderDebounceTimeoutRef.current && (clearTimeout(shaderDebounceTimeoutRef.current), 
-            shaderDebounceTimeoutRef.current = null);
+            shaderDebounceTimeoutRef.current = null), shaderUpdateTimeoutRef.current && (clearTimeout(shaderUpdateTimeoutRef.current), 
+            shaderUpdateTimeoutRef.current = null);
             try {
                 shaderGeneratorRef.current?.destroy();
             } catch (error) {
@@ -2311,7 +2365,37 @@ const sharedShaderCache = new Map, AtomixGlassContainer =  React.forwardRef((({c
                 shaderGeneratorRef.current = null;
             }
         };
-    }), [ mode, glassSize, shaderVariant ]);
+    }), [ mode, glassSize, shaderVariant ]), 
+    // Phase 1: Time-Based Animation Loop - Continuous shader regeneration
+    React.useEffect((() => {
+        // Only run animations in shader mode with time animation enabled
+        if ("shader" !== mode || !withTimeAnimation || effectiveReducedMotion || effectiveWithoutEffects) 
+        // Cancel any existing animation frame
+        return void (null !== animationFrameRef.current && (cancelAnimationFrame(animationFrameRef.current), 
+        animationFrameRef.current = null));
+        const baseFps = "ultra" === distortionQuality ? 60 : "high" === distortionQuality ? 30 : "medium" === distortionQuality ? 24 : 20, effectiveSpeed = Math.max(.5, Math.min(2, animationSpeed || 1)), complexity = withMultiLayerDistortion ? Math.max(1, (distortionOctaves || 3) / 3 + .25 * Math.max(0, (distortionLacunarity || 2) - 2) + Math.max(0, (distortionGain || .5) - .5)) : 1, frameInterval = 1e3 / Math.max(12, Math.min(60, Math.round(baseFps * effectiveSpeed / complexity)));
+        let lastUpdate = 0, isCancelled = !1;
+        const animate = currentTime => {
+            if (!isCancelled) {
+                if (currentTime - lastUpdate >= frameInterval && shaderGeneratorRef.current) {
+                    lastUpdate = currentTime;
+                    try {
+                        const animatedShaderUrl = shaderGeneratorRef.current.updateShader();
+                        animatedShaderUrl && setShaderMapUrl(animatedShaderUrl);
+                    } catch (error) {
+                        console.warn("AtomixGlassContainer: Error in animation loop", error);
+                    }
+                }
+                animationFrameRef.current = requestAnimationFrame(animate);
+            }
+        };
+        // Start animation loop
+                // Cleanup animation on unmount or dependency change
+        return animationFrameRef.current = requestAnimationFrame(animate), () => {
+            isCancelled = !0, null !== animationFrameRef.current && (cancelAnimationFrame(animationFrameRef.current), 
+            animationFrameRef.current = null);
+        };
+    }), [ mode, withTimeAnimation, animationSpeed, displacementScale, withMultiLayerDistortion, distortionOctaves, distortionLacunarity, distortionGain, distortionQuality, effectiveReducedMotion, effectiveWithoutEffects, glassSize ]);
     // Removed forced reflow to avoid layout thrash and potential feedback sizing loops
     const [rectCache, setRectCache] = React.useState(null);
     React.useEffect((() => {
@@ -2645,12 +2729,144 @@ class {
         style.setProperty("--atomix-glass-container-text-shadow", isOverLight ? "0px 1px 2px rgba(255, 255, 255, 0.15)" : "0px 2px 12px rgba(0, 0, 0, 0.4)"), 
         style.setProperty("--atomix-glass-container-box-shadow", isOverLight ? "0px 16px 70px rgba(0, 0, 0, 0.75)" : "0px 12px 40px rgba(0, 0, 0, 0.25)");
     }
-}, {CONSTANTS: CONSTANTS$1} = ATOMIX_GLASS;
+};
 
 /**
  * Updates the styles of the AtomixGlass wrapper and container elements imperatively
  * to avoid React re-renders on mouse movement.
- */ const {CONSTANTS: CONSTANTS} = ATOMIX_GLASS, backgroundDetectionCache = new WeakMap, setCachedBackgroundDetection = (parentElement, overLightConfig, result, threshold) => {
+ */
+/**
+ * Animation System for AtomixGlass Component
+ *
+ * Implements Phase 1 features from the AtomixGlass Feature Implementation Roadmap:
+ * - Feature 1.1: Time-Based Animation System
+ * - Feature 1.2: Multi-Layer Distortion System (FBM)
+ *
+ * @packageDocumentation
+ */
+// ============================================================================
+// Noise Functions for FBM (Feature 1.2)
+// ============================================================================
+/**
+ * Perlin noise implementation for smooth gradient noise
+ *
+ * @param x - X coordinate
+ * @param y - Y coordinate
+ * @returns Noise value in range [0, 1]
+ */
+function perlinNoise(x, y) {
+    // Simplified Perlin noise using pseudo-random gradients
+    const X = 255 & Math.floor(x), Y = 255 & Math.floor(y), xf = x - Math.floor(x), yf = y - Math.floor(y), u = fade(xf), v = fade(yf), A = p[X] + Y & 255, B = p[X + 1] + Y & 255, ga = grad(p[A], xf, yf), gb = grad(p[B], xf - 1, yf), gc = grad(p[A + 1 & 255], xf, yf - 1), gd = grad(p[B + 1 & 255], xf - 1, yf - 1), lerpX1 = lerp(ga, gb, u), lerpX2 = lerp(gc, gd, u);
+    // Scale to [0, 1] range
+    return (lerp(lerpX1, lerpX2, v) + 1) / 2;
+}
+
+// ============================================================================
+// Fractal Brownian Motion (FBM) Engine (Feature 1.2)
+// ============================================================================
+/**
+ * Creates an FBM engine with configurable parameters
+ *
+ * @param config - FBM configuration (octaves, lacunarity, gain)
+ * @returns Object with fbm function
+ *
+ * @example
+ * ```typescript
+ * const fbmEngine = createFBMEngine({ octaves: 5, lacunarity: 2, gain: 0.5 });
+ *
+ * // Generate noise at position (0.5, 0.5) with time animation
+ * const noiseValue = fbmEngine.fbm(0.5, 0.5, Date.now());
+ * ```
+ */ function createFBMEngine(config) {
+    /**
+   * Fractal Brownian Motion function
+   * Combines multiple octaves of noise for complex, natural patterns
+   *
+   * @param x - X coordinate
+   * @param y - Y coordinate
+   * @param time - Optional time value for animation
+   * @returns FBM noise value in range [0, 1]
+   */
+    const fbm = (x, y, time = 0) => {
+        let value = 0, amplitude = .5, frequency = 1, phase = .001 * time;
+        // Convert to seconds for reasonable animation speed
+        for (let i = 0; i < config.octaves; i++) 
+        // Apply time-based phase shift to all octaves
+        value += perlinNoise(x * frequency + phase, y * frequency + phase) * amplitude, 
+        frequency *= config.lacunarity, // Increase frequency
+        amplitude *= config.gain;
+        return value;
+    };
+    /**
+   * Get FBM with simple time factor
+   */    return {
+        fbm: fbm,
+        fbmWithTime: (x, y, time) => fbm(x, y, time)
+    };
+}
+
+/**
+ * Gets optimal FBM config based on quality preset
+ *
+ * @param quality - Quality preset level
+ * @returns FBM configuration for the quality level
+ */ const fbmEngineCache = new Map;
+
+// ============================================================================
+// Shader Utility Functions for Time-Based Effects
+// ============================================================================
+/**
+ * Liquid glass distortion with time-based animation
+ * Uses FBM to create organic, flowing liquid effects
+ *
+ * @param uv - UV coordinates (normalized 0-1)
+ * @param time - Elapsed time in milliseconds
+ * @param config - FBM configuration
+ * @returns Distorted UV coordinates
+ */ function liquidGlassWithTime(uv, time, config) {
+    const configKey = `${config.octaves}-${config.lacunarity}-${config.gain}`;
+    let fbmEngine = fbmEngineCache.get(configKey);
+    fbmEngine || (fbmEngine = createFBMEngine(config), fbmEngineCache.set(configKey, fbmEngine));
+    // Animate noise with time
+        const animatedNoise = fbmEngine.fbmWithTime(2 * uv.x + 1e-4 * time, 2 * uv.y + 15e-5 * time, time);
+    return {
+        x: uv.x + .04 * (animatedNoise - .5),
+        y: uv.y + .04 * (animatedNoise - .5)
+    };
+}
+
+// ============================================================================
+// Helper Functions
+// ============================================================================
+/**
+ * Fade curve for smooth interpolation (Perlin's fade function)
+ */ function fade(t) {
+    return t * t * t * (t * (6 * t - 15) + 10);
+}
+
+/**
+ * Linear interpolation
+ */ function lerp(a, b, t) {
+    return a + t * (b - a);
+}
+
+/**
+ * Gradient calculation for Perlin noise
+ */ function grad(hash, x, y) {
+    const h = 15 & hash, u = h < 8 ? x : y, v = h < 4 ? y : 12 === h || 14 === h ? x : 0;
+    return (1 & h ? -u : u) + (2 & h ? -v : v);
+}
+
+/**
+ * Permutation table for Perlin noise
+ */ const p = (() => {
+    const permutation = [];
+    for (let i = 0; i < 256; i++) permutation[i] = Math.floor(256 * Math.random());
+    // Duplicate for overflow handling
+        return [ ...permutation, ...permutation ];
+})(), {CONSTANTS: CONSTANTS$1} = ATOMIX_GLASS;
+
+const {CONSTANTS: CONSTANTS} = ATOMIX_GLASS, backgroundDetectionCache = new WeakMap, setCachedBackgroundDetection = (parentElement, overLightConfig, result, threshold) => {
     parentElement && backgroundDetectionCache.set(parentElement, {
         result: result,
         timestamp: Date.now(),
@@ -2663,7 +2879,9 @@ class {
  * Composable hook for AtomixGlass component logic
  * Manages all state, calculations, and event handlers
  */
-function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef: wrapperRef, borderRadius: borderRadius, globalMousePosition: externalGlobalMousePosition, mouseOffset: externalMouseOffset, mouseContainer: mouseContainer, overLight: overLight = ATOMIX_GLASS.DEFAULTS.OVER_LIGHT, reducedMotion: reducedMotion = !1, highContrast: highContrast = !1, withoutEffects: withoutEffects = !1, elasticity: elasticity = .05, onClick: onClick, debugBorderRadius: debugBorderRadius = !1, debugOverLight: debugOverLight = !1, children: children, blurAmount: blurAmount, saturation: saturation, padding: padding, withLiquidBlur: withLiquidBlur, isFixedOrSticky: isFixedOrSticky = !1}) {
+function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef: wrapperRef, borderRadius: borderRadius, globalMousePosition: externalGlobalMousePosition, mouseOffset: externalMouseOffset, mouseContainer: mouseContainer, overLight: overLight = ATOMIX_GLASS.DEFAULTS.OVER_LIGHT, reducedMotion: reducedMotion = !1, highContrast: highContrast = !1, withoutEffects: withoutEffects = !1, elasticity: elasticity = .05, onClick: onClick, debugBorderRadius: debugBorderRadius = !1, debugOverLight: debugOverLight = !1, children: children, blurAmount: blurAmount, saturation: saturation, padding: padding, withLiquidBlur: withLiquidBlur, isFixedOrSticky: isFixedOrSticky = !1, withTimeAnimation: 
+// Phase 1: Animation System Props
+withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION, animationSpeed: animationSpeed = ATOMIX_GLASS.DEFAULTS.ANIMATION_SPEED, withMultiLayerDistortion: withMultiLayerDistortion = ATOMIX_GLASS.DEFAULTS.WITH_MULTI_LAYER_DISTORTION, distortionOctaves: distortionOctaves = ATOMIX_GLASS.DEFAULTS.DISTORTION_OCTAVES, distortionLacunarity: distortionLacunarity = ATOMIX_GLASS.DEFAULTS.DISTORTION_LACUNARITY, distortionGain: distortionGain = ATOMIX_GLASS.DEFAULTS.DISTORTION_GAIN, distortionQuality: distortionQuality = ATOMIX_GLASS.DEFAULTS.DISTORTION_QUALITY}) {
     // State
     const [isHovered, setIsHovered] = React.useState(!1), [isActive, setIsActive] = React.useState(!1), cachedRectRef = React.useRef(null), internalGlobalMousePositionRef = React.useRef({
         x: 0,
@@ -2677,7 +2895,47 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
     }), targetGlobalMousePositionRef = React.useRef({
         x: 0,
         y: 0
-    }), lerpRafRef = React.useRef(null), lerpActiveRef = React.useRef(!1), [dynamicBorderRadius, setDynamicCornerRadius] = React.useState(CONSTANTS.DEFAULT_CORNER_RADIUS), [userPrefersReducedMotion, setUserPrefersReducedMotion] = React.useState(!1), [userPrefersHighContrast, setUserPrefersHighContrast] = React.useState(!1), [detectedOverLight, setDetectedOverLight] = React.useState(!1), effectiveBorderRadius = React.useMemo((() => void 0 !== borderRadius ? Math.max(0, borderRadius) : Math.max(0, dynamicBorderRadius)), [ borderRadius, dynamicBorderRadius ]), {glassSize: glassSize} = function({glassRef: glassRef, effectiveBorderRadius: effectiveBorderRadius, cachedRectRef: cachedRectRef}) {
+    }), lerpRafRef = React.useRef(null), lerpActiveRef = React.useRef(!1), [dynamicBorderRadius, setDynamicCornerRadius] = React.useState(CONSTANTS.DEFAULT_CORNER_RADIUS), [userPrefersReducedMotion, setUserPrefersReducedMotion] = React.useState(!1), [userPrefersHighContrast, setUserPrefersHighContrast] = React.useState(!1), [detectedOverLight, setDetectedOverLight] = React.useState(!1), animationFrameIdRef = React.useRef(null), animationStartTimeRef = React.useRef(0), elapsedTimeRef = React.useRef(0), shaderTimeRef = React.useRef(0), fbmConfig = React.useMemo((() => {
+        // If quality preset is provided, use it as base
+        const preset = (quality = distortionQuality, ATOMIX_GLASS.CONSTANTS.DISTORTION_QUALITY_PRESETS[quality]);
+        // Override with custom values if provided
+                var quality;
+        return {
+            octaves: distortionOctaves ?? preset.octaves,
+            lacunarity: distortionLacunarity ?? preset.lacunarity,
+            gain: distortionGain ?? preset.gain
+        };
+    }), [ distortionQuality, distortionOctaves, distortionLacunarity, distortionGain ]), fbmEngine = React.useMemo((() => withMultiLayerDistortion ? createFBMEngine(fbmConfig) : null), [ withMultiLayerDistortion, fbmConfig ]), effectiveReducedMotion = React.useMemo((() => reducedMotion || userPrefersReducedMotion), [ reducedMotion, userPrefersReducedMotion ]), effectiveWithTimeAnimation = React.useMemo((() => withTimeAnimation && !effectiveReducedMotion), [ withTimeAnimation, effectiveReducedMotion ]);
+    /**
+   * Animation loop for time-based effects
+   */
+    React.useEffect((() => {
+        if (!effectiveWithTimeAnimation || "undefined" == typeof window) return;
+        let lastFrameTime = performance.now();
+        /**
+     * Animation frame handler
+     */        const animate = currentTime => {
+            // Calculate delta time
+            const deltaTime = currentTime - lastFrameTime;
+            lastFrameTime = currentTime;
+            // Apply animation speed multiplier
+            const scaledDelta = deltaTime * animationSpeed;
+            elapsedTimeRef.current += scaledDelta, shaderTimeRef.current = elapsedTimeRef.current, 
+            // Continue animation loop
+            animationFrameIdRef.current = requestAnimationFrame(animate);
+        };
+        // Start animation
+                // Cleanup
+        return animationStartTimeRef.current = performance.now(), animationFrameIdRef.current = requestAnimationFrame(animate), 
+        () => {
+            null !== animationFrameIdRef.current && (cancelAnimationFrame(animationFrameIdRef.current), 
+            animationFrameIdRef.current = null);
+        };
+    }), [ effectiveWithTimeAnimation, animationSpeed ]);
+    /**
+   * Get current shader time for animations
+   */
+    const getShaderTime = React.useCallback((() => shaderTimeRef.current), []), applyTimeBasedDistortion = React.useCallback((uv => effectiveWithTimeAnimation && fbmEngine ? liquidGlassWithTime(uv, shaderTimeRef.current, fbmConfig) : uv), [ effectiveWithTimeAnimation, fbmEngine, fbmConfig ]), effectiveBorderRadius = React.useMemo((() => void 0 !== borderRadius ? Math.max(0, borderRadius) : Math.max(0, dynamicBorderRadius)), [ borderRadius, dynamicBorderRadius ]), {glassSize: glassSize} = function({glassRef: glassRef, effectiveBorderRadius: effectiveBorderRadius, cachedRectRef: cachedRectRef}) {
         const [glassSize, setGlassSize] = React.useState({
             width: 270,
             height: 69
@@ -2736,7 +2994,10 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
         glassRef: glassRef,
         effectiveBorderRadius: effectiveBorderRadius,
         cachedRectRef: cachedRectRef
-    }), effectiveReducedMotion = React.useMemo((() => reducedMotion || userPrefersReducedMotion), [ reducedMotion, userPrefersReducedMotion ]), effectiveHighContrast = React.useMemo((() => highContrast || userPrefersHighContrast), [ highContrast, userPrefersHighContrast ]), effectiveWithoutEffects = React.useMemo((() => withoutEffects || effectiveReducedMotion), [ withoutEffects, effectiveReducedMotion ]), globalMousePosition = externalGlobalMousePosition || internalGlobalMousePositionRef.current, mouseOffset = externalMouseOffset || internalMouseOffsetRef.current;
+    }), effectiveHighContrast = React.useMemo((() => highContrast || userPrefersHighContrast), [ highContrast, userPrefersHighContrast ]), effectiveWithoutEffects = React.useMemo((() => withoutEffects || effectiveReducedMotion), [ withoutEffects, effectiveReducedMotion ]), globalMousePosition = externalGlobalMousePosition || internalGlobalMousePositionRef.current, mouseOffset = externalMouseOffset || internalMouseOffsetRef.current;
+    /**
+   * Apply time-based distortion to UV coordinates
+   */    
     // Extract border-radius from children
     React.useEffect((() => {
         const extractRadius = () => {
@@ -2939,6 +3200,8 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
         lerpActiveRef.current = !0;
         const LERP_T = CONSTANTS.LERP_FACTOR, tick = () => {
             if (!lerpActiveRef.current) return;
+            // Add ref validity check to prevent memory leaks
+                        if (!glassRef.current || !wrapperRef?.current) return void (lerpActiveRef.current = !1);
             const cur = internalMouseOffsetRef.current, tgt = targetMouseOffsetRef.current, dx = tgt.x - cur.x, dy = tgt.y - cur.y;
             // If we're close enough, snap and park
             if (Math.abs(dx) < .05 && Math.abs(dy) < .05) internalMouseOffsetRef.current = {
@@ -2947,17 +3210,17 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
                 ...targetGlobalMousePositionRef.current
             }; else {
                 internalMouseOffsetRef.current = {
-                    x: lerp(cur.x, tgt.x, LERP_T),
-                    y: lerp(cur.y, tgt.y, LERP_T)
+                    x: lerp$1(cur.x, tgt.x, LERP_T),
+                    y: lerp$1(cur.y, tgt.y, LERP_T)
                 };
                 const curG = internalGlobalMousePositionRef.current, tgtG = targetGlobalMousePositionRef.current;
                 internalGlobalMousePositionRef.current = {
-                    x: lerp(curG.x, tgtG.x, LERP_T),
-                    y: lerp(curG.y, tgtG.y, LERP_T)
+                    x: lerp$1(curG.x, tgtG.x, LERP_T),
+                    y: lerp$1(curG.y, tgtG.y, LERP_T)
                 };
             }
             // Imperative style update with the smoothed values
-                        updateAtomixGlassStyles(wrapperRef?.current || null, glassRef.current, {
+                        updateAtomixGlassStyles(wrapperRef.current, glassRef.current, {
                 mouseOffset: internalMouseOffsetRef.current,
                 globalMousePosition: internalGlobalMousePositionRef.current,
                 glassSize: glassSize,
@@ -3048,6 +3311,8 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
         // This is now static (refs or props) unless prop changes
         overLightConfig: overLightConfig,
         transformStyle: transformStyle,
+        getShaderTime: getShaderTime,
+        applyTimeBasedDistortion: applyTimeBasedDistortion,
         handleMouseEnter: handleMouseEnter,
         handleMouseLeave: handleMouseLeave,
         handleMouseDown: handleMouseDown,
@@ -3056,6 +3321,800 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
     };
 }
 
+/**
+ * Default responsive breakpoints configuration
+ *
+ * These breakpoints are optimized for glass effect performance across device classes:
+ * - Mobile: Reduced complexity for 60 FPS target
+ * - Tablet: Balanced quality and performance
+ * - Desktop: Full fidelity effects
+ */ const DEFAULT_BREAKPOINTS = {
+    mobile: {
+        maxWidth: 640,
+        params: {
+            distortionOctaves: 3,
+            displacementScale: .7,
+            blurAmount: .8,
+            animationSpeed: .8,
+            chromaticIntensity: .5
+        }
+    },
+    tablet: {
+        minWidth: 641,
+        maxWidth: 1024,
+        params: {
+            distortionOctaves: 4,
+            displacementScale: .85,
+            blurAmount: .9,
+            animationSpeed: .9,
+            chromaticIntensity: .75
+        }
+    },
+    desktop: {
+        minWidth: 1025,
+        params: {
+            distortionOctaves: 5,
+            displacementScale: 1,
+            blurAmount: 1,
+            animationSpeed: 1,
+            chromaticIntensity: 1
+        }
+    }
+};
+
+/**
+ * Device performance tier detection
+ *
+ * Uses Device Memory API and Hardware Concurrency API to classify devices
+ * into performance tiers for automatic quality adjustment.
+ *
+ * @returns Performance tier classification
+ */
+/**
+ * Responsive Glass Parameters Hook
+ *
+ * Automatically adjusts glass effect parameters based on:
+ * 1. Screen size (mobile/tablet/desktop breakpoints)
+ * 2. Device performance (RAM and CPU detection)
+ * 3. Custom breakpoint configuration
+ *
+ * Features:
+ * - Debounced resize handling
+ * - Performance-based quality adjustment
+ * - Smooth parameter transitions
+ * - Debug mode for development
+ *
+ * @example
+ * ```typescript
+ * const { responsiveParams, currentBreakpoint } = useResponsiveGlass({
+ *   baseParams: {
+ *     distortionOctaves: 5,
+ *     displacementScale: 20,
+ *     blurAmount: 10,
+ *   },
+ *   debug: true,
+ * });
+ * ```
+ *
+ * @param options Hook configuration options
+ * @returns Responsive parameters and metadata
+ */
+function useResponsiveGlass({baseParams: baseParams, breakpoints: breakpoints = DEFAULT_BREAKPOINTS, enabled: enabled = !0, enablePerformanceAdjustment: enablePerformanceAdjustment = !0, debug: debug = !1}) {
+    const [responsiveParams, setResponsiveParams] = React.useState(baseParams), [currentBreakpoint, setCurrentBreakpoint] = React.useState("desktop"), [performanceTier, setPerformanceTier] = React.useState("high"), [isActive, setIsActive] = React.useState(enabled), baseParamsRef = React.useRef(baseParams), breakpointsRef = React.useRef(breakpoints);
+    // Update refs when props change
+    baseParamsRef.current = baseParams, breakpointsRef.current = breakpoints;
+    /**
+   * Calculate and apply responsive parameters
+   */
+    const calculateParams = React.useCallback((() => {
+        if (!enabled || "undefined" == typeof window) return setIsActive(!1), setResponsiveParams(baseParamsRef.current), 
+        void setCurrentBreakpoint("disabled");
+        setIsActive(!0);
+        // Get current screen width
+        const width = window.innerWidth, {name: name, params: breakpointParams} = ((width, breakpoints) => {
+            // Convert breakpoints to array and sort by minWidth descending
+            const sortedBreakpoints = Object.entries(breakpoints).filter((([_, bp]) => void 0 !== bp.minWidth)).sort(((a, b) => (b[1].minWidth || 0) - (a[1].minWidth || 0)));
+            // Find first breakpoint where width >= minWidth
+                        for (const [name, bp] of sortedBreakpoints) if (width >= (bp.minWidth || 0)) return {
+                name: name,
+                params: bp.params
+            };
+            // If no minWidth matched, check maxWidth breakpoints
+                        const maxWidthBreakpoints = Object.entries(breakpoints).filter((([_, bp]) => void 0 !== bp.maxWidth)).sort(((a, b) => (a[1].maxWidth || 1 / 0) - (b[1].maxWidth || 1 / 0)));
+            for (const [name, bp] of maxWidthBreakpoints) if (width <= (bp.maxWidth || 1 / 0)) return {
+                name: name,
+                params: bp.params
+            };
+            // Fallback to first available breakpoint
+                        const entries = Object.entries(breakpoints);
+            if (0 === entries.length) 
+            // Ultimate fallback - return sensible defaults
+            return {
+                name: "desktop",
+                params: {
+                    distortionOctaves: 5,
+                    displacementScale: 1,
+                    blurAmount: 1
+                }
+            };
+            const firstEntry = entries[0];
+            if (!firstEntry) return {
+                name: "desktop",
+                params: {
+                    distortionOctaves: 5,
+                    displacementScale: 1,
+                    blurAmount: 1
+                }
+            };
+            const [fallbackName, fallbackBreakpoint] = firstEntry;
+            return {
+                name: fallbackName,
+                params: fallbackBreakpoint.params
+            };
+        })(width, breakpointsRef.current);
+        // Determine current breakpoint
+                setCurrentBreakpoint(name);
+        // Merge base params with breakpoint params
+        let mergedParams = ((baseParams, breakpointParams) => {
+            const result = {
+                ...baseParams
+            }, scaleProperties = [ "displacementScale", "blurAmount", "saturation", "aberrationIntensity", "animationSpeed", "chromaticIntensity" ];
+            // Apply scaling for specific properties
+                        for (const prop of scaleProperties) void 0 !== breakpointParams[prop] && void 0 !== baseParams[prop] && (result[prop] = baseParams[prop] * breakpointParams[prop]);
+            // Override properties that should be set directly (not scaled)
+                        const overrideProperties = [ "distortionOctaves", "distortionLacunarity", "distortionGain" ];
+            for (const prop of overrideProperties) void 0 !== breakpointParams[prop] && (result[prop] = breakpointParams[prop]);
+            return result;
+        })(baseParamsRef.current, breakpointParams);
+        // Apply performance adjustments if enabled
+                if (enablePerformanceAdjustment) {
+            const tier = (() => {
+                // Check if we're in a browser environment
+                if ("undefined" == typeof window || "undefined" == typeof navigator) return "high"; // Default to high for SSR
+                // Device Memory API (Chrome, Edge, Opera)
+                // Returns RAM in GB: 0.25, 0.5, 1, 2, 4, 8
+                                const deviceMemory = navigator.deviceMemory || 4, hardwareConcurrency = navigator.hardwareConcurrency || 4;
+                // Hardware Concurrency API (logical CPU cores)
+                                // Low-end: ≤2GB RAM OR ≤2 CPU cores
+                return deviceMemory <= 2 || hardwareConcurrency <= 2 ? "low" : 
+                // High-end: ≥4GB RAM AND ≥4 CPU cores
+                deviceMemory >= 4 && hardwareConcurrency >= 4 ? "high" : "medium";
+            })();
+            setPerformanceTier(tier), mergedParams = ((baseParams, performanceTier) => {
+                if ("high" === performanceTier) return baseParams;
+ // No adjustment needed
+                                const multiplier = "low" === performanceTier ? .7 : .85;
+                return {
+                    ...baseParams,
+                    distortionOctaves: Math.max(2, Math.round((baseParams.distortionOctaves || 5) * multiplier)),
+                    displacementScale: (baseParams.displacementScale || 1) * multiplier,
+                    blurAmount: (baseParams.blurAmount || 1) * multiplier,
+                    animationSpeed: (baseParams.animationSpeed || 1) * multiplier,
+                    chromaticIntensity: (baseParams.chromaticIntensity || 1) * multiplier
+                };
+            })(mergedParams, tier);
+        }
+        setResponsiveParams(mergedParams);
+    }), [ enabled, enablePerformanceAdjustment, debug ]), debouncedCalculate = (func => {
+        const timeoutRef = React.useRef(null);
+        return React.useEffect((() => () => {
+            timeoutRef.current && clearTimeout(timeoutRef.current);
+        }), []), React.useCallback(((...args) => {
+            timeoutRef.current && clearTimeout(timeoutRef.current), timeoutRef.current = setTimeout((() => {
+                func(...args);
+            }), 200);
+        }), [ func, 200 ]);
+    })(calculateParams);
+    /**
+   * Debounced parameter calculation for resize events
+   */    
+    /**
+   * Handle window resize
+   */
+    return React.useEffect((() => {
+        if (enabled) 
+        // Cleanup
+        // Initial calculation
+        return calculateParams(), 
+        // Listen for resize events
+        window.addEventListener("resize", debouncedCalculate), () => {
+            window.removeEventListener("resize", debouncedCalculate);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        }), [ enabled ]), {
+        responsiveParams: responsiveParams,
+        currentBreakpoint: currentBreakpoint,
+        performanceTier: performanceTier,
+        isActive: isActive,
+        recalculate: React.useCallback((() => {
+            calculateParams();
+        }), [ calculateParams ])
+    };
+}
+
+/**
+ * Utility function to get default breakpoints
+ * Useful for documentation and debugging
+ */ function getDefaultBreakpoints() {
+    return {
+        ...DEFAULT_BREAKPOINTS
+    };
+}
+
+/**
+ * Utility function to create custom breakpoints
+ *
+ * @param customBreakpoints Partial breakpoint overrides
+ * @returns Complete breakpoint configuration
+ */ function createBreakpoints$1(customBreakpoints) {
+    return {
+        ...DEFAULT_BREAKPOINTS,
+        ...customBreakpoints
+    };
+}
+
+/**
+ * Get GPU memory info if available (Chrome DevTools only)
+ */
+/**
+ * Performance Monitor Hook
+ *
+ * Real-time performance tracking with automatic quality scaling.
+ * Monitors FPS, frame time, and GPU memory to optimize glass effects.
+ *
+ * Features:
+ * - Real-time FPS measurement
+ * - Frame timing analysis
+ * - Automatic quality scaling
+ * - Debug overlay option
+ * - Manual override capability
+ *
+ * @example
+ * ```typescript
+ * const { metrics, recommendedQuality, setQualityLevel } = usePerformanceMonitor({
+ *   targetFps: 60,
+ *   minFps: 45,
+ *   debug: true,
+ * });
+ * ```
+ *
+ * @param config Monitor configuration
+ * @returns Performance metrics and controls
+ */
+function usePerformanceMonitor(config = {}) {
+    const {enabled: enabled = !0, targetFps: targetFps = 60, minFps: minFps = 45, scaleUpThreshold: scaleUpThreshold = 58, lowFpsFrames: lowFpsFrames = 3, highFpsFrames: highFpsFrames = 10, debug: debug = !1, showOverlay: showOverlay = !1} = config, [metrics, setMetrics] = React.useState({
+        fps: 0,
+        frameTime: 0,
+        gpuMemory: null,
+        qualityLevel: "medium",
+        timestamp: 0,
+        isAutoScaling: !0,
+        lowFpsCount: 0
+    }), [manualOverride, setManualOverride] = React.useState(!1), [isEnabled, setIsEnabled] = React.useState(enabled), frameCountRef = React.useRef(0), lastFpsUpdateRef = React.useRef(0), lastFrameTimeRef = React.useRef(0), animationFrameRef = React.useRef(null), lowFpsCountRef = React.useRef(0), highFpsCountRef = React.useRef(0), qualityLevelRef = React.useRef("medium"), updateMetrics = React.useCallback((newMetrics => {
+        setMetrics((prev => ({
+            ...prev,
+            ...newMetrics,
+            timestamp: performance.now()
+        })));
+    }), []), applyAutoScaling = React.useCallback((currentFps => {
+        if (manualOverride) return;
+        const currentQuality = qualityLevelRef.current;
+        // Check for low FPS
+                if (currentFps < minFps) lowFpsCountRef.current++, highFpsCountRef.current = 0, 
+        // Scale down after N consecutive low-FPS frames
+        lowFpsCountRef.current >= lowFpsFrames && "low" !== currentQuality && (qualityLevelRef.current = "low", 
+        updateMetrics({
+            qualityLevel: "low",
+            lowFpsCount: lowFpsCountRef.current
+        })); else if (currentFps >= scaleUpThreshold) {
+            // Scale up after N consecutive high-FPS frames
+            if (highFpsCountRef.current++, lowFpsCountRef.current = 0, highFpsCountRef.current >= highFpsFrames) {
+                const newQuality = "low" === currentQuality ? "medium" : "high";
+                qualityLevelRef.current = newQuality, updateMetrics({
+                    qualityLevel: newQuality,
+                    lowFpsCount: 0
+                }), highFpsCountRef.current = 0;
+            }
+        } else 
+        // FPS in normal range, reset counters
+        lowFpsCountRef.current = 0, highFpsCountRef.current = 0;
+    }), [ manualOverride, minFps, scaleUpThreshold, lowFpsFrames, highFpsFrames, debug, updateMetrics ]), measureFrame = React.useCallback((currentTime => {
+        if (!isEnabled) return;
+        frameCountRef.current++;
+        // Calculate frame time
+        const frameTime = currentTime - lastFrameTimeRef.current;
+        // Update FPS every 100ms for responsiveness
+        if (lastFrameTimeRef.current = currentTime, currentTime - lastFpsUpdateRef.current >= 100) {
+            const elapsed = currentTime - lastFpsUpdateRef.current, fps = Math.round(1e3 * frameCountRef.current / elapsed);
+            // Apply auto-scaling
+            applyAutoScaling(fps), updateMetrics({
+                fps: fps,
+                frameTime: frameTime,
+                qualityLevel: qualityLevelRef.current,
+                lowFpsCount: lowFpsCountRef.current
+            }), 
+            // Reset for next measurement period
+            frameCountRef.current = 0, lastFpsUpdateRef.current = currentTime;
+        }
+        // Continue measurement loop
+                animationFrameRef.current = requestAnimationFrame(measureFrame);
+    }), [ isEnabled, applyAutoScaling, updateMetrics ]);
+    /**
+   * Initialize GPU memory tracking
+   */
+    React.useEffect((() => {
+        if (!isEnabled || "undefined" == typeof window) return;
+        let mounted = !0;
+        return (async () => {
+            const memory = await new Promise((resolve => {
+                // Check for WebGL debug renderer info
+                if ("undefined" != typeof window && "undefined" != typeof document) try {
+                    const canvas = document.createElement("canvas"), gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
+                    if (gl) {
+                        const debugInfo = gl.getExtension("WEBGL_debug_renderer_info");
+                        if (debugInfo) {
+                            var _context, _context2, _context3;
+                            // Note: Actual memory info is not directly available via WebGL
+                            // We estimate based on renderer
+                                                        const renderer = gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);
+                            // Rough estimation based on renderer type
+                            return void ((null == (_context = renderer) ? void 0 : Function.call.bind(_includesInstanceProperty(_context), _context))?.("Integrated") ? resolve(256) : (null == (_context2 = renderer) ? void 0 : Function.call.bind(_includesInstanceProperty(_context2), _context2))?.("AMD") || (null == (_context3 = renderer) ? void 0 : Function.call.bind(_includesInstanceProperty(_context3), _context3))?.("NVIDIA") ? resolve(512) : resolve(null));
+                        }
+                    }
+                } catch (e) {
+                    // WebGL not available or error occurred
+                }
+                resolve(null);
+            }));
+            mounted && updateMetrics({
+                gpuMemory: memory
+            });
+        })(), () => {
+            mounted = !1;
+        };
+    }), [ isEnabled, updateMetrics ]), 
+    /**
+   * Start/stop monitoring based on enabled state
+   */
+    React.useEffect((() => {
+        if (isEnabled) 
+        // Cleanup
+        // Initialize
+        return lastFpsUpdateRef.current = performance.now(), lastFrameTimeRef.current = performance.now(), 
+        animationFrameRef.current = requestAnimationFrame(measureFrame), () => {
+            null !== animationFrameRef.current && (cancelAnimationFrame(animationFrameRef.current), 
+            animationFrameRef.current = null);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+                null !== animationFrameRef.current && (cancelAnimationFrame(animationFrameRef.current), 
+        animationFrameRef.current = null);
+    }), [ isEnabled ]);
+    // measureFrame is stable via useCallback, avoid re-creating RAF loop
+    /**
+   * Manually set quality level (disables auto-scaling)
+   */
+    const setQualityLevel = React.useCallback((level => {
+        setManualOverride(!0), qualityLevelRef.current = level, updateMetrics({
+            qualityLevel: level,
+            isAutoScaling: !1
+        });
+    }), [ updateMetrics, debug ]), resetAutoScaling = React.useCallback((() => {
+        setManualOverride(!1), lowFpsCountRef.current = 0, highFpsCountRef.current = 0, 
+        updateMetrics({
+            isAutoScaling: !0,
+            lowFpsCount: 0
+        });
+    }), [ updateMetrics, debug ]), toggleMonitoring = React.useCallback((() => {
+        setIsEnabled((prev => !prev));
+    }), []);
+    /**
+   * Reset to auto-scaling mode
+   */    var fps, currentQuality;
+    return {
+        metrics: metrics,
+        recommendedQuality: (fps = metrics.fps, currentQuality = metrics.qualityLevel, fps >= 58 ? "high" : fps >= 45 ? "high" === currentQuality ? "high" : "medium" : "low"),
+        isUnderperforming: metrics.fps < minFps,
+        setQualityLevel: setQualityLevel,
+        resetAutoScaling: resetAutoScaling,
+        toggleMonitoring: toggleMonitoring
+    };
+}
+
+/**
+ * Debug Overlay Component (Optional)
+ *
+ * Shows real-time performance metrics on screen.
+ * Only rendered when showOverlay is enabled.
+ */ function PerformanceOverlay({metrics: metrics}) {
+    return null;
+    // Performance overlay removed - will be implemented as separate component
+}
+
+/**
+ * Utility to get quality multipliers for glass parameters
+ */ function getQualityMultipliers(quality) {
+    switch (quality) {
+      case "low":
+        return {
+            distortionOctaves: 2,
+            displacementScale: .6,
+            blurAmount: .7,
+            animationSpeed: .8,
+            chromaticIntensity: .5
+        };
+
+      case "medium":
+        return {
+            distortionOctaves: 4,
+            displacementScale: .85,
+            blurAmount: .9,
+            animationSpeed: .95,
+            chromaticIntensity: .75
+        };
+
+      case "high":
+        return {
+            distortionOctaves: 5,
+            displacementScale: 1,
+            blurAmount: 1,
+            animationSpeed: 1,
+            chromaticIntensity: 1
+        };
+    }
+}
+
+/**
+ * PerformanceDashboard - Real-time performance monitoring overlay
+ *
+ * Displays:
+ * - Current FPS with color coding
+ * - Frame time statistics
+ * - Quality level indicator
+ * - GPU memory usage (if available)
+ * - Auto-scaling status
+ */ const PerformanceDashboard = ({metrics: metrics, isVisible: isVisible = !0, onClose: onClose}) => {
+    // Get color for FPS display
+    const getFpsColor = fps => fps >= 58 ? "#4ade80" : // Green - good
+    fps >= 45 ? "#fbbf24" : "#ef4444" // Red - critical
+    , dashboardStyle = React.useMemo((() => ({
+        position: "fixed",
+        top: "16px",
+        right: "16px",
+        padding: "12px 16px",
+        backgroundColor: "rgba(17, 24, 39, 0.95)",
+        borderRadius: "8px",
+        boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+        fontFamily: "monospace",
+        fontSize: "12px",
+        color: "#fff",
+        zIndex: 9999,
+        minWidth: "200px",
+        backdropFilter: "blur(8px)",
+        border: "1px solid rgba(255, 255, 255, 0.1)",
+        transition: "opacity 0.3s ease",
+        opacity: isVisible ? 1 : 0,
+        pointerEvents: isVisible ? "auto" : "none"
+    })), [ isVisible ]), headerStyle = React.useMemo((() => ({
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        marginBottom: "8px",
+        paddingBottom: "8px",
+        borderBottom: "1px solid rgba(255, 255, 255, 0.1)"
+    })), []), titleStyle = React.useMemo((() => ({
+        fontWeight: "bold",
+        fontSize: "13px",
+        color: "#fff"
+    })), []), closeButtonStyle = React.useMemo((() => ({
+        background: "transparent",
+        border: "none",
+        color: "#9ca3af",
+        cursor: "pointer",
+        fontSize: "16px",
+        padding: "0",
+        lineHeight: "1"
+    })), []), metricRowStyle = React.useMemo((() => ({
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        marginBottom: "6px"
+    })), []), labelStyle = React.useMemo((() => ({
+        color: "#9ca3af",
+        marginRight: "12px"
+    })), []), valueStyle = React.useMemo((() => ({
+        fontWeight: "bold"
+    })), []);
+    // Get quality level badge color
+        return isVisible ? jsxRuntime.jsxs("div", {
+        style: dashboardStyle,
+        children: [ jsxRuntime.jsxs("div", {
+            style: headerStyle,
+            children: [ jsxRuntime.jsx("span", {
+                style: titleStyle,
+                children: "Performance Monitor"
+            }), onClose && jsxRuntime.jsx("button", {
+                style: closeButtonStyle,
+                onClick: onClose,
+                "aria-label": "Close performance dashboard",
+                children: "×"
+            }) ]
+        }), jsxRuntime.jsxs("div", {
+            style: metricRowStyle,
+            children: [ jsxRuntime.jsx("span", {
+                style: labelStyle,
+                children: "FPS"
+            }), jsxRuntime.jsx("span", {
+                style: {
+                    ...valueStyle,
+                    color: getFpsColor(metrics.fps)
+                },
+                children: Math.round(metrics.fps)
+            }) ]
+        }), jsxRuntime.jsxs("div", {
+            style: metricRowStyle,
+            children: [ jsxRuntime.jsx("span", {
+                style: labelStyle,
+                children: "Frame Time"
+            }), jsxRuntime.jsxs("span", {
+                style: valueStyle,
+                children: [ metrics.frameTime.toFixed(2), "ms" ]
+            }) ]
+        }), jsxRuntime.jsxs("div", {
+            style: metricRowStyle,
+            children: [ jsxRuntime.jsx("span", {
+                style: labelStyle,
+                children: "Quality"
+            }), jsxRuntime.jsx("span", {
+                style: {
+                    ...valueStyle,
+                    color: (quality => {
+                        switch (quality) {
+                          case "high":
+                            return "#4ade80";
+
+                          case "medium":
+                            return "#fbbf24";
+
+                          case "low":
+                            return "#ef4444";
+
+                          default:
+                            return "#9ca3af";
+                        }
+                    })(metrics.qualityLevel),
+                    textTransform: "uppercase",
+                    fontSize: "11px"
+                },
+                children: metrics.qualityLevel
+            }) ]
+        }), metrics.gpuMemory && jsxRuntime.jsxs("div", {
+            style: metricRowStyle,
+            children: [ jsxRuntime.jsx("span", {
+                style: labelStyle,
+                children: "GPU Memory"
+            }), jsxRuntime.jsxs("span", {
+                style: valueStyle,
+                children: [ "~", Math.round(metrics.gpuMemory / 1024), "MB" ]
+            }) ]
+        }), metrics.isAutoScaling && jsxRuntime.jsx("div", {
+            style: {
+                marginTop: "8px",
+                paddingTop: "8px",
+                borderTop: "1px solid rgba(255, 255, 255, 0.1)",
+                fontSize: "10px",
+                color: "#6b7280",
+                textAlign: "center"
+            },
+            children: "Auto-scaling active"
+        }), jsxRuntime.jsxs("div", {
+            style: {
+                marginTop: "8px",
+                paddingTop: "8px",
+                borderTop: "1px solid rgba(255, 255, 255, 0.1)",
+                display: "flex",
+                alignItems: "center",
+                gap: "6px"
+            },
+            children: [ jsxRuntime.jsx("div", {
+                style: {
+                    width: "8px",
+                    height: "8px",
+                    borderRadius: "50%",
+                    backgroundColor: getFpsColor(metrics.fps),
+                    animation: metrics.fps < 45 ? "pulse 1s infinite" : "none"
+                }
+            }), jsxRuntime.jsx("span", {
+                style: {
+                    fontSize: "10px",
+                    color: metrics.fps >= 58 ? "#4ade80" : metrics.fps >= 45 ? "#fbbf24" : "#ef4444"
+                },
+                children: metrics.fps >= 58 ? "Optimal" : metrics.fps >= 45 ? "Warning" : "Critical"
+            }) ]
+        }) ]
+    }) : null;
+};
+
+// Add pulse animation for critical FPS
+if ("undefined" != typeof document) {
+    const styleSheet = document.createElement("style");
+    styleSheet.textContent = "\n    @keyframes pulse {\n      0%, 100% { opacity: 1; }\n      50% { opacity: 0.5; }\n    }\n  ", 
+    document.head.appendChild(styleSheet);
+}
+
+/**
+ * Mobile optimization presets
+ *
+ * These presets adjust glass effect parameters based on device performance tier
+ * to ensure smooth animations and responsive interactions.
+ */
+/**
+ * Performance preset - Maximum FPS, reduced quality
+ * Best for low-end devices or when battery saving is priority
+ */ const PERFORMANCE_PRESET = {
+    distortionOctaves: 2,
+    // Minimal FBM layers
+    displacementScale: 50,
+    // Subtle displacement
+    blurAmount: 5,
+    // Light blur
+    saturation: 80,
+    // Reduced saturation
+    aberrationIntensity: .3,
+    // Minimal chromatic aberration
+    animationSpeed: .8,
+    // Slightly slower for performance
+    chromaticIntensity: .3,
+    // Low chromatic effect
+    distortionLacunarity: 1.5,
+    // Simpler noise pattern
+    distortionGain: .3
+}, BALANCED_PRESET = {
+    distortionOctaves: 3,
+    // Moderate FBM layers
+    displacementScale: 75,
+    // Medium displacement
+    blurAmount: 8,
+    // Moderate blur
+    saturation: 90,
+    // Near-full saturation
+    aberrationIntensity: .5,
+    // Moderate chromatic aberration
+    animationSpeed: 1,
+    // Normal speed
+    chromaticIntensity: .5,
+    // Moderate chromatic effect
+    distortionLacunarity: 2,
+    // Standard noise pattern
+    distortionGain: .4
+}, QUALITY_PRESET = {
+    distortionOctaves: 4,
+    // More FBM layers for detail
+    displacementScale: 100,
+    // Stronger displacement
+    blurAmount: 12,
+    // Smoother blur
+    saturation: 100,
+    // Full saturation
+    aberrationIntensity: .7,
+    // Pronounced chromatic aberration
+    animationSpeed: 1.2,
+    // Slightly faster for drama
+    chromaticIntensity: .7,
+    // Strong chromatic effect
+    distortionLacunarity: 2.2,
+    // Richer noise pattern
+    distortionGain: .5
+};
+
+/**
+ * Balanced preset - Good quality with reasonable performance
+ * Default preset for most mobile devices
+ */
+/**
+ * Get preset by name
+ */
+function getDevicePreset(presetName) {
+    switch (presetName) {
+      case "performance":
+        return PERFORMANCE_PRESET;
+
+      case "balanced":
+      default:
+        return BALANCED_PRESET;
+
+      case "quality":
+        return QUALITY_PRESET;
+    }
+}
+
+/**
+ * Mobile-optimized responsive breakpoints
+ * Automatically applies appropriate presets based on viewport size
+ */ const MOBILE_OPTIMIZED_BREAKPOINTS = {
+    /** Desktop - Full quality */
+    desktop: {
+        minWidth: 1024,
+        params: {
+            distortionOctaves: 6,
+            displacementScale: 150,
+            blurAmount: 15,
+            saturation: 100,
+            aberrationIntensity: 1,
+            animationSpeed: 1,
+            chromaticIntensity: 1,
+            distortionLacunarity: 2.5,
+            distortionGain: .6
+        }
+    },
+    /** Laptop - High quality */
+    laptop: {
+        minWidth: 768,
+        params: {
+            ...QUALITY_PRESET,
+            distortionOctaves: 5,
+            displacementScale: 120
+        }
+    },
+    /** Tablet - Balanced quality */
+    tablet: {
+        minWidth: 640,
+        params: {
+            ...BALANCED_PRESET,
+            distortionOctaves: 4,
+            displacementScale: 90
+        }
+    },
+    /** Mobile - Performance optimized */
+    mobile: {
+        maxWidth: 639,
+        params: {
+            ...PERFORMANCE_PRESET,
+            distortionOctaves: 3,
+            displacementScale: 75,
+            blurAmount: 6
+        }
+    },
+    /** Small mobile - Maximum performance */
+    mobileSmall: {
+        maxWidth: 375,
+        params: {
+            ...PERFORMANCE_PRESET,
+            distortionOctaves: 2,
+            displacementScale: 50,
+            blurAmount: 4,
+            saturation: 70
+        }
+    }
+};
+
+/**
+ * Get mobile-optimized parameters for current viewport
+ * Can be used standalone or with useResponsiveGlass hook
+ */ function getMobileOptimizedParams(viewportWidth) {
+    return viewportWidth >= 1024 ? MOBILE_OPTIMIZED_BREAKPOINTS.desktop?.params || BALANCED_PRESET : viewportWidth >= 768 ? MOBILE_OPTIMIZED_BREAKPOINTS.laptop?.params || BALANCED_PRESET : viewportWidth >= 640 ? MOBILE_OPTIMIZED_BREAKPOINTS.tablet?.params || BALANCED_PRESET : viewportWidth >= 375 ? MOBILE_OPTIMIZED_BREAKPOINTS.mobile?.params || PERFORMANCE_PRESET : MOBILE_OPTIMIZED_BREAKPOINTS.mobileSmall?.params || PERFORMANCE_PRESET;
+}
+
+/**
+ * Device detection utilities
+ */ const DeviceDetector = {
+    /** Check if device is mobile */
+    isMobile: () => "undefined" != typeof window && /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent),
+    /** Check if device is tablet */
+    isTablet() {
+        if ("undefined" == typeof window) return !1;
+        const width = window.innerWidth;
+        return width >= 640 && width < 1024 && this.isMobile();
+    },
+    /** Get recommended preset based on device type */
+    getRecommendedPreset() {
+        return this.isMobile() ? this.isTablet() ? "balanced" : "performance" : "quality";
+    },
+    /** Get device pixel ratio */
+    getPixelRatio: () => "undefined" == typeof window ? 1 : window.devicePixelRatio || 1,
+    /** Check if device has touch support */
+    hasTouchSupport: () => "undefined" != typeof window && ("ontouchstart" in window || navigator.maxTouchPoints > 0)
+};
+
 /**
  * AtomixGlass - A high-performance glass morphism component with liquid distortion effects
  *
@@ -3070,6 +4129,8 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
  * - Focus ring support for keyboard navigation
  * - Responsive breakpoints for mobile optimization
  * - Enhanced ARIA attributes for screen readers
+ * - Time-based animation system with FBM distortion
+ * - Device preset optimization for performance/quality balance
  *
  * Design System Compliance:
  * - Uses design tokens for opacity, spacing, and colors
@@ -3126,8 +4187,14 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
  * <AtomixGlass overLight="auto" debugOverLight={true}>
  *   <div>Content with debug logging enabled</div>
  * </AtomixGlass>
- */ function AtomixGlass({children: children, displacementScale: displacementScale = ATOMIX_GLASS.DEFAULTS.DISPLACEMENT_SCALE, blurAmount: blurAmount = ATOMIX_GLASS.DEFAULTS.BLUR_AMOUNT, saturation: saturation = ATOMIX_GLASS.DEFAULTS.SATURATION, aberrationIntensity: aberrationIntensity = ATOMIX_GLASS.DEFAULTS.ABERRATION_INTENSITY, elasticity: elasticity = ATOMIX_GLASS.DEFAULTS.ELASTICITY, borderRadius: borderRadius, globalMousePosition: externalGlobalMousePosition, mouseOffset: externalMouseOffset, mouseContainer: mouseContainer = null, className: className = "", padding: padding = ATOMIX_GLASS.DEFAULTS.PADDING, overLight: overLight = ATOMIX_GLASS.DEFAULTS.OVER_LIGHT, style: style = {}, mode: mode = ATOMIX_GLASS.DEFAULTS.MODE, onClick: onClick, shaderVariant: shaderVariant = "liquidGlass", "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, role: role, tabIndex: tabIndex, reducedMotion: reducedMotion = !1, highContrast: highContrast = !1, withoutEffects: withoutEffects = !1, withLiquidBlur: withLiquidBlur = !1, withBorder: withBorder = !0, withOverLightLayers: withOverLightLayers = ATOMIX_GLASS.DEFAULTS.ENABLE_OVER_LIGHT_LAYERS, debugPerformance: debugPerformance = !1, debugBorderRadius: debugBorderRadius = !1, debugOverLight: debugOverLight = !1, height: height, width: width, ...rest}) {
-    const glassRef = React.useRef(null), contentRef = React.useRef(null), {zIndex: customZIndex, ...restStyle} = style, isFixedOrSticky = "fixed" === restStyle.position || "sticky" === restStyle.position, {isHovered: isHovered, isActive: isActive, glassSize: glassSize, effectiveBorderRadius: effectiveBorderRadius, effectiveReducedMotion: effectiveReducedMotion, effectiveHighContrast: effectiveHighContrast, effectiveWithoutEffects: effectiveWithoutEffects, overLightConfig: overLightConfig, globalMousePosition: globalMousePosition, mouseOffset: mouseOffset, transformStyle: transformStyle, handleMouseEnter: handleMouseEnter, handleMouseLeave: handleMouseLeave, handleMouseDown: handleMouseDown, handleMouseUp: handleMouseUp, handleKeyDown: handleKeyDown} = useAtomixGlass({
+ *
+ * @example
+ * // Performance-optimized for mobile devices
+ * <AtomixGlass devicePreset="performance" disableResponsiveBreakpoints={false}>
+ *   <div>Mobile-optimized glass effect</div>
+ * </AtomixGlass>
+ */ function AtomixGlass({children: children, displacementScale: displacementScale = ATOMIX_GLASS.DEFAULTS.DISPLACEMENT_SCALE, blurAmount: blurAmount = ATOMIX_GLASS.DEFAULTS.BLUR_AMOUNT, saturation: saturation = ATOMIX_GLASS.DEFAULTS.SATURATION, aberrationIntensity: aberrationIntensity = ATOMIX_GLASS.DEFAULTS.ABERRATION_INTENSITY, elasticity: elasticity = ATOMIX_GLASS.DEFAULTS.ELASTICITY, borderRadius: borderRadius, globalMousePosition: externalGlobalMousePosition, mouseOffset: externalMouseOffset, mouseContainer: mouseContainer = null, className: className = "", padding: padding = ATOMIX_GLASS.DEFAULTS.PADDING, overLight: overLight = ATOMIX_GLASS.DEFAULTS.OVER_LIGHT, style: style = {}, mode: mode = ATOMIX_GLASS.DEFAULTS.MODE, onClick: onClick, shaderVariant: shaderVariant = "liquidGlass", "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, role: role, tabIndex: tabIndex, reducedMotion: reducedMotion = !1, highContrast: highContrast = !1, withoutEffects: withoutEffects = !1, withLiquidBlur: withLiquidBlur = !1, withBorder: withBorder = !0, withOverLightLayers: withOverLightLayers = ATOMIX_GLASS.DEFAULTS.ENABLE_OVER_LIGHT_LAYERS, debugPerformance: debugPerformance = !1, debugOverLight: debugOverLight = !1, height: height, width: width, withTimeAnimation: withTimeAnimation = !1, animationSpeed: animationSpeed = 1, withMultiLayerDistortion: withMultiLayerDistortion = !1, distortionOctaves: distortionOctaves = 3, distortionLacunarity: distortionLacunarity = 2, distortionGain: distortionGain = .5, distortionQuality: distortionQuality = "medium", devicePreset: devicePreset = "balanced", disableResponsiveBreakpoints: disableResponsiveBreakpoints = !1, ...rest}) {
+    const glassRef = React.useRef(null), contentRef = React.useRef(null), {zIndex: customZIndex, ...restStyle} = style, isFixedOrSticky = "fixed" === restStyle.position || "sticky" === restStyle.position, {isHovered: isHovered, isActive: isActive, glassSize: glassSize, effectiveBorderRadius: effectiveBorderRadius, effectiveReducedMotion: effectiveReducedMotion, effectiveHighContrast: effectiveHighContrast, effectiveWithoutEffects: effectiveWithoutEffects, overLightConfig: overLightConfig, globalMousePosition: globalMousePosition, mouseOffset: mouseOffset, transformStyle: transformStyle, getShaderTime: getShaderTime, applyTimeBasedDistortion: applyTimeBasedDistortion, handleMouseEnter: handleMouseEnter, handleMouseLeave: handleMouseLeave, handleMouseDown: handleMouseDown, handleMouseUp: handleMouseUp, handleKeyDown: handleKeyDown} = useAtomixGlass({
         glassRef: glassRef,
         contentRef: contentRef,
         borderRadius: borderRadius,
@@ -3140,7 +4207,6 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
         withoutEffects: withoutEffects,
         elasticity: elasticity,
         onClick: onClick,
-        debugBorderRadius: debugBorderRadius,
         debugOverLight: debugOverLight,
         debugPerformance: debugPerformance,
         children: children,
@@ -3149,8 +4215,48 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
         withLiquidBlur: withLiquidBlur,
         padding: padding,
         style: style,
-        isFixedOrSticky: isFixedOrSticky
-    }), isOverLight = React.useMemo((() => overLightConfig.isOverLight), [ overLightConfig.isOverLight ]), shouldRenderOverLightLayers = withOverLightLayers && isOverLight, rootLayoutStyle = React.useMemo((() => {
+        isFixedOrSticky: isFixedOrSticky,
+        // Phase 1: Animation System props
+        withTimeAnimation: withTimeAnimation,
+        animationSpeed: animationSpeed,
+        withMultiLayerDistortion: withMultiLayerDistortion,
+        distortionOctaves: distortionOctaves,
+        distortionLacunarity: distortionLacunarity,
+        distortionGain: distortionGain,
+        distortionQuality: distortionQuality
+    });
+    // Re-calculate only when devicePreset changes
+    // Responsive breakpoint system - automatically adjusts parameters based on viewport
+    useResponsiveGlass({
+        baseParams: {
+            ...React.useMemo((() => getDevicePreset(devicePreset)), [ devicePreset ]),
+            distortionOctaves: Math.round((displacementScale || ATOMIX_GLASS.DEFAULTS.DISPLACEMENT_SCALE) / 25),
+            displacementScale: displacementScale || ATOMIX_GLASS.DEFAULTS.DISPLACEMENT_SCALE,
+            blurAmount: blurAmount || ATOMIX_GLASS.DEFAULTS.BLUR_AMOUNT,
+            saturation: saturation || ATOMIX_GLASS.DEFAULTS.SATURATION,
+            aberrationIntensity: aberrationIntensity || ATOMIX_GLASS.DEFAULTS.ABERRATION_INTENSITY,
+            animationSpeed: 1,
+            chromaticIntensity: aberrationIntensity || ATOMIX_GLASS.DEFAULTS.ABERRATION_INTENSITY
+        },
+        breakpoints: MOBILE_OPTIMIZED_BREAKPOINTS,
+        enabled: !disableResponsiveBreakpoints && "undefined" != typeof window,
+        // Enable unless disabled
+        debug: !1
+    });
+    // Performance monitoring - tracks FPS, frame time, memory usage
+    const {metrics: performanceMetrics, recommendedQuality: recommendedQuality, isUnderperforming: isUnderperforming, setQualityLevel: setQualityLevel, toggleMonitoring: toggleMonitoring} = usePerformanceMonitor({
+        enabled: !1,
+        // We'll toggle manually based on prop
+        debug: !1,
+        showOverlay: !1
+    });
+    // Auto-start performance monitoring if enabled (only in development)
+        React__default.default.useEffect((() => {
+        "development" === process.env.NODE_ENV && window?.enablePerformanceMonitoring && toggleMonitoring();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        }), []);
+    // Only run once on mount
+    const isOverLight = React.useMemo((() => overLightConfig.isOverLight), [ overLightConfig.isOverLight ]), shouldRenderOverLightLayers = withOverLightLayers && isOverLight, rootLayoutStyle = React.useMemo((() => {
         if (!isFixedOrSticky) return {};
         const {position: p, top: t, left: l, right: r, bottom: b} = restStyle;
         return {
@@ -3336,6 +4442,15 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
             effectiveReducedMotion: effectiveReducedMotion,
             shaderVariant: shaderVariant,
             withLiquidBlur: withLiquidBlur,
+            // Phase 1: Animation System props
+            shaderTime: getShaderTime(),
+            withTimeAnimation: withTimeAnimation,
+            animationSpeed: animationSpeed,
+            withMultiLayerDistortion: withMultiLayerDistortion,
+            distortionOctaves: distortionOctaves,
+            distortionLacunarity: distortionLacunarity,
+            distortionGain: distortionGain,
+            distortionQuality: distortionQuality,
             children: children
         }), Boolean(onClick) && jsxRuntime.jsxs(jsxRuntime.Fragment, {
             children: [ jsxRuntime.jsx("div", {
@@ -3359,6 +4474,10 @@ function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef:
             }), jsxRuntime.jsx("span", {
                 className: ATOMIX_GLASS.BORDER_2_CLASS
             }) ]
+        }), debugPerformance && performanceMetrics && jsxRuntime.jsx(PerformanceDashboard, {
+            metrics: performanceMetrics,
+            isVisible: !0,
+            onClose: () => {}
         }) ]
     });
 }
@@ -3425,16 +4544,14 @@ const AccordionBody =  React.forwardRef((({children: children, className: classN
 
 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}) => {
+const AccordionImpl =  React.memo((({title: title, children: children, defaultOpen: defaultOpen = !1, isOpen: controlledOpen, onOpenChange: onOpenChange, 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,
         disabled: disabled,
         iconPosition: iconPosition,
         isOpen: controlledOpen,
-        onOpenChange: onOpenChange,
-        onOpen: onOpen,
-        onClose: onClose
+        onOpenChange: onOpenChange
     }), headerClassNames = generateHeaderClassNames(), panelClassNames = ACCORDION.SELECTORS.PANEL.replace(".", ""), hasCompoundComponents = React__default.default.Children.toArray(children).some((child => {
         var _context;
         
@@ -3817,7 +4934,9 @@ var shaderUtils =  Object.freeze({
             return this.canvasDPI;
         }
     },
-    fragmentShaders: fragmentShaders
+    createFBMEngine: createFBMEngine,
+    fragmentShaders: fragmentShaders,
+    liquidGlassWithTime: liquidGlassWithTime
 });
 
 // Map string sizes to pixel values
@@ -3852,7 +4971,7 @@ const sizeMap = {
  * Icon component that displays a Phosphor icon
  */ Icon.displayName = "Icon";
 
-const Avatar =  React.memo((({src: src, alt: alt = "Avatar", initials: initials, icon: icon, size: size = "md", circle: circle = !1, className: className = "", disabled: disabled = !1, onClick: onClick, style: style, glass: glass}) => {
+const Avatar =  React.memo((({src: src, alt: alt = "User avatar", initials: initials, icon: icon, size: size = "md", circle: circle = !1, className: className = "", disabled: disabled = !1, onClick: onClick, style: style, glass: glass}) => {
     const [imageError, setImageError] = React.useState(!1), avatarClasses = [ AVATAR.CLASSES.BASE, "md" !== size && `c-avatar--${size}`, circle && AVATAR.CLASSES.CIRCLE, disabled && "is-disabled", className ].filter(Boolean).join(" ");
     return jsxRuntime.jsx("div", {
         className: avatarClasses,
@@ -4325,7 +5444,7 @@ class ThemeNaming {
 ThemeNaming.prefix = "atomix";
 
 const Button =  React__default.default.memo( React.forwardRef((({label: label, children: children, onClick: onClick, variant: variant = "primary", size: size = "md", disabled: disabled = !1, loading: loading = !1, loadingText: loadingText, icon: icon, iconName: iconName, iconSize: iconSize = "sm", iconPosition: iconPosition = "start", iconOnly: iconOnly = !1, rounded: rounded = !1, fullWidth: fullWidth = !1, block: block = !1, active: active = !1, selected: selected = !1, type: type = "button", className: className = "", as: Component = "button", href: href, target: target, glass: glass, onHover: onHover, onFocus: onFocus, onBlur: onBlur, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-expanded": ariaExpanded, "aria-controls": ariaControls, tabIndex: tabIndex, style: style, linkComponent: linkComponent, ...props}, ref) => {
-    const isDisabled = disabled || loading, shouldRenderAsLink = Boolean(href && !isDisabled), iconElement = iconName ? jsxRuntime.jsx(Icon, {
+    const isDisabled = disabled || loading, shouldRenderAsLink = Boolean(href), iconElement = iconName ? jsxRuntime.jsx(Icon, {
         name: iconName,
         size: iconSize
     }) : icon, buttonClass = [ BUTTON.BASE_CLASS, ThemeNaming.variantClass(THEME_NAMING.BUTTON_PREFIX, variant), "md" !== size ? ThemeNaming.sizeClass(THEME_NAMING.BUTTON_PREFIX, size) : "", iconOnly ? ThemeNaming.stateClass(THEME_NAMING.BUTTON_PREFIX, THEME_NAMING.ICON_ELEMENT) : "", rounded ? ThemeNaming.stateClass(THEME_NAMING.BUTTON_PREFIX, "rounded") : "", isDisabled ? ThemeNaming.stateClass(THEME_NAMING.BUTTON_PREFIX, "disabled") : "", glass ? ThemeNaming.stateClass(THEME_NAMING.BUTTON_PREFIX, "glass") : "", loading ? BUTTON.CLASSES.LOADING : "", fullWidth ? BUTTON.CLASSES.FULL_WIDTH : "", block ? BUTTON.CLASSES.BLOCK : "", active ? BUTTON.CLASSES.ACTIVE : "", selected ? BUTTON.CLASSES.SELECTED : "", className ].filter(Boolean).join(" "), handleClickEvent = React.useCallback((event => {
@@ -4381,8 +5500,8 @@ const Button =  React__default.default.memo( React.forwardRef((({label: label, c
             ...buttonProps,
             ref: ref,
             // linkComponent usually forwards ref to anchor
-            href: href,
-            to: href,
+            href: isDisabled ? void 0 : href,
+            to: isDisabled ? void 0 : href,
             target: target,
             rel: "_blank" === target ? "noopener noreferrer" : void 0
         };
@@ -4395,7 +5514,7 @@ const Button =  React__default.default.memo( React.forwardRef((({label: label, c
     content = jsxRuntime.jsx("a", {
         ...buttonProps,
         ref: ref,
-        href: href,
+        href: isDisabled ? void 0 : href,
         target: target,
         rel: "_blank" === target ? "noopener noreferrer" : void 0,
         children: buttonContent
@@ -4674,7 +5793,7 @@ row: row = !1, flat: flat = !1,
 // States
 active: active = !1, disabled: disabled = !1, loading: loading = !1, selected: selected = !1, interactive: interactive = !1, 
 // Content
-header: header, image: image, imageAlt: imageAlt = "", title: title, text: text, actions: actions, icon: icon, footer: footer, children: children, 
+header: header, image: image, imageAlt: imageAlt = "Card image", title: title, text: text, actions: actions, icon: icon, footer: footer, children: children, 
 // Interaction
 onClick: onClick, onHover: onHover, onFocus: onFocus, href: href, target: target, 
 // Custom Link
@@ -4877,50 +5996,50 @@ Card.Header = CardHeader, Card.Body = CardBody, Card.Footer = CardFooter;
  * @param options - Configuration options for the card
  * @returns Card state and handlers
  */
-const useCard = (options = {}) => {
-    const {elevationEffect: elevationEffect = !1, elevationClass: elevationClass = CARD.CLASSES.ACTIVE, flipEffect: flipEffect = !1, flipTrigger: flipTrigger = "click", focusEffect: focusEffect = !1, clickable: clickable = !1, onClick: onClick} = options, cardRef = React.useRef(null), frontRef = React.useRef(null), backRef = React.useRef(null), [isFlipped, setIsFlipped] = React.useState(!1), [isElevated, setIsElevated] = React.useState(!1), [isFocused, setIsFocused] = React.useState(!1), [isHovered, setIsHovered] = React.useState(!1), handleClick = React.useCallback((event => {
-        flipEffect && "click" === flipTrigger && setIsFlipped((prev => !prev)), onClick && onClick(event);
-    }), [ flipEffect, flipTrigger, onClick ]), handleKeyDown = React.useCallback((event => {
-        "Enter" !== event.key && " " !== event.key || (event.preventDefault(), flipEffect && "click" === flipTrigger && setIsFlipped((prev => !prev)), 
-        onClick && onClick(event));
-    }), [ flipEffect, flipTrigger, onClick ]), handleMouseEnter = React.useCallback((() => {
-        setIsHovered(!0), elevationEffect && setIsElevated(!0), flipEffect && "hover" === flipTrigger && setIsFlipped(!0);
-    }), [ elevationEffect, flipEffect, flipTrigger ]), handleMouseLeave = React.useCallback((() => {
-        setIsHovered(!1), elevationEffect && setIsElevated(!1), flipEffect && "hover" === flipTrigger && setIsFlipped(!1);
-    }), [ elevationEffect, flipEffect, flipTrigger ]), handleFocus = React.useCallback((() => {
-        setIsFocused(!0);
-    }), []), handleBlur = React.useCallback((() => {
-        setIsFocused(!1);
-    }), []), getCardProps = React.useCallback((() => ({
-        className: [ CARD.CLASSES.BASE, isElevated ? elevationClass : "", isFlipped ? CARD.CLASSES.FLIPPED : "", isFocused && focusEffect ? CARD.CLASSES.FOCUSED : "", clickable ? CARD.CLASSES.CLICKABLE : "" ].filter(Boolean).join(" "),
-        ref: cardRef,
-        tabxwIndex: clickable || flipEffect ? 0 : -1,
-        role: clickable ? "button" : void 0,
-        onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave,
-        onFocus: handleFocus,
-        onBlur: handleBlur,
-        onClick: handleClick,
-        onKeyDown: handleKeyDown
-    })), [ isElevated, isFlipped, isFocused, elevationClass, focusEffect, clickable, handleMouseEnter, handleMouseLeave, handleFocus, handleBlur, handleClick, handleKeyDown, flipEffect ]);
-    return {
-        cardRef: cardRef,
-        frontRef: frontRef,
-        backRef: backRef,
-        isFlipped: isFlipped,
-        isElevated: isElevated,
-        isFocused: isFocused,
-        isHovered: isHovered,
-        handleClick: handleClick,
-        handleKeyDown: handleKeyDown,
-        handleMouseEnter: handleMouseEnter,
-        handleMouseLeave: handleMouseLeave,
-        handleFocus: handleFocus,
-        handleBlur: handleBlur,
-        getCardProps: getCardProps
-    };
-}, ElevationCard = ({elevationClass: elevationClass = "is-elevated", className: className = "", style: style, children: children, onClick: onClick, ...props}) => {
-    const {getCardProps: getCardProps} = useCard({
+const ElevationCard = ({elevationClass: elevationClass = "is-elevated", className: className = "", style: style, children: children, onClick: onClick, ...props}) => {
+    const {getCardProps: getCardProps} = ((options = {}) => {
+        const {elevationEffect: elevationEffect = !1, elevationClass: elevationClass = CARD.CLASSES.ACTIVE, flipEffect: flipEffect = !1, flipTrigger: flipTrigger = "click", focusEffect: focusEffect = !1, clickable: clickable = !1, onClick: onClick} = options, cardRef = React.useRef(null), frontRef = React.useRef(null), backRef = React.useRef(null), [isFlipped, setIsFlipped] = React.useState(!1), [isElevated, setIsElevated] = React.useState(!1), [isFocused, setIsFocused] = React.useState(!1), [isHovered, setIsHovered] = React.useState(!1), handleClick = React.useCallback((event => {
+            flipEffect && "click" === flipTrigger && setIsFlipped((prev => !prev)), onClick && onClick(event);
+        }), [ flipEffect, flipTrigger, onClick ]), handleKeyDown = React.useCallback((event => {
+            "Enter" !== event.key && " " !== event.key || (event.preventDefault(), flipEffect && "click" === flipTrigger && setIsFlipped((prev => !prev)), 
+            onClick && onClick(event));
+        }), [ flipEffect, flipTrigger, onClick ]), handleMouseEnter = React.useCallback((() => {
+            setIsHovered(!0), elevationEffect && setIsElevated(!0), flipEffect && "hover" === flipTrigger && setIsFlipped(!0);
+        }), [ elevationEffect, flipEffect, flipTrigger ]), handleMouseLeave = React.useCallback((() => {
+            setIsHovered(!1), elevationEffect && setIsElevated(!1), flipEffect && "hover" === flipTrigger && setIsFlipped(!1);
+        }), [ elevationEffect, flipEffect, flipTrigger ]), handleFocus = React.useCallback((() => {
+            setIsFocused(!0);
+        }), []), handleBlur = React.useCallback((() => {
+            setIsFocused(!1);
+        }), []), getCardProps = React.useCallback((() => ({
+            className: [ CARD.CLASSES.BASE, isElevated ? elevationClass : "", isFlipped ? CARD.CLASSES.FLIPPED : "", isFocused && focusEffect ? CARD.CLASSES.FOCUSED : "", clickable ? CARD.CLASSES.CLICKABLE : "" ].filter(Boolean).join(" "),
+            ref: cardRef,
+            tabxwIndex: clickable || flipEffect ? 0 : -1,
+            role: clickable ? "button" : void 0,
+            onMouseEnter: handleMouseEnter,
+            onMouseLeave: handleMouseLeave,
+            onFocus: handleFocus,
+            onBlur: handleBlur,
+            onClick: handleClick,
+            onKeyDown: handleKeyDown
+        })), [ isElevated, isFlipped, isFocused, elevationClass, focusEffect, clickable, handleMouseEnter, handleMouseLeave, handleFocus, handleBlur, handleClick, handleKeyDown, flipEffect ]);
+        return {
+            cardRef: cardRef,
+            frontRef: frontRef,
+            backRef: backRef,
+            isFlipped: isFlipped,
+            isElevated: isElevated,
+            isFocused: isFocused,
+            isHovered: isHovered,
+            handleClick: handleClick,
+            handleKeyDown: handleKeyDown,
+            handleMouseEnter: handleMouseEnter,
+            handleMouseLeave: handleMouseLeave,
+            handleFocus: handleFocus,
+            handleBlur: handleBlur,
+            getCardProps: getCardProps
+        };
+    })({
         elevationEffect: !0,
         elevationClass: elevationClass,
         clickable: Boolean(onClick),
@@ -9304,216 +10423,13 @@ function getRowId$1(row, rowKey) {
 
 /**
  * Hook for managing DataTable state and behavior
- */ function useDataTable({data: data = [], columns: columns = [], sortable: sortable = !1, paginated: paginated = !1, pageSize: pageSize = 10, onSort: onSort, initialSortConfig: initialSortConfig, selectionMode: selectionMode = "none", selectedRowIds: controlledSelectedRowIds, onSelectionChange: onSelectionChange, rowKey: rowKey, columnFilters: columnFilters = !1, reorderable: reorderable = !1, onColumnReorder: onColumnReorder, onColumnVisibilityChange: onColumnVisibilityChange}) {
-    // Sort state
-    const [sortConfig, setSortConfig] = React.useState(initialSortConfig || null), [currentPage, setCurrentPage] = React.useState(1), [searchQuery, setSearchQuery] = React.useState(""), [internalSelectedRowIds, setInternalSelectedRowIds] = React.useState([]), selectedRowIds = controlledSelectedRowIds ?? internalSelectedRowIds, [columnOrder, setColumnOrder] = React.useState((() => columns.map((col => col.key)))), [columnVisibility, setColumnVisibility] = React.useState((() => {
-        const visibility = {};
-        return columns.forEach((col => {
-            visibility[col.key] = !1 !== col.visible;
-        })), visibility;
-    })), [columnFilterValues, setColumnFilterValues] = React.useState({});
-    // Pagination state
-        // Update column order when columns prop changes
-    React.useEffect((() => {
-        const newOrder = columns.map((col => col.key)), currentOrderSet = new Set(columnOrder), newOrderSet = new Set(newOrder);
-        // Only update if there are actual differences
-        newOrder.length === columnOrder.length && newOrder.every((key => currentOrderSet.has(key))) && columnOrder.every((key => newOrderSet.has(key))) || setColumnOrder(newOrder);
-    }), [ columns ]), 
-    // Update column visibility when columns prop changes
-    React.useEffect((() => {
-        setColumnVisibility((prev => {
-            const updated = {
-                ...prev
-            };
-            return columns.forEach((col => {
-                col.key in updated || (updated[col.key] = !1 !== col.visible);
-            })), updated;
-        }));
-    }), [ columns ]);
-    // Visible columns based on order and visibility
-    const visibleColumns = React.useMemo((() => columnOrder.map((key => columns.find((col => col.key === key)))).filter((col => void 0 !== col && !1 !== columnVisibility[col.key]))), [ columns, columnOrder, columnVisibility ]), handleSort = React.useCallback((key => {
-        if (!sortable) return;
-        let direction = "asc";
-        sortConfig && sortConfig.key === key && "asc" === sortConfig.direction && (direction = "desc");
-        const newSortConfig = {
-            key: key,
-            direction: direction
-        };
-        setSortConfig(newSortConfig), onSort && onSort(newSortConfig);
-    }), [ sortable, sortConfig, onSort ]), handlePageChange = React.useCallback((page => {
-        page < 1 || setCurrentPage(page);
-    }), []), handleSearch = React.useCallback((query => {
-        setSearchQuery(query), setCurrentPage(1);
-    } // Reset to first page when searching
-    ), []), handleColumnFilterChange = React.useCallback(((columnKey, value) => {
-        setColumnFilterValues((prev => ({
-            ...prev,
-            [columnKey]: value
-        }))), setCurrentPage(1);
-    } // Reset to first page when filtering
-    ), []), clearColumnFilters = React.useCallback((() => {
-        setColumnFilterValues({}), setCurrentPage(1);
-    }), []), activeColumnFilters = React.useMemo((() => columnFilters ? Object.entries(columnFilterValues).filter((([, value]) => null != value && "" !== value)).map((([columnKey, value]) => {
-        const column = columns.find((col => col.key === columnKey));
-        return column && column.filterable ? {
-            key: columnKey,
-            value: value,
-            lowercaseValue: "string" == typeof value ? value.toLowerCase() : String(value).toLowerCase(),
-            column: column
-        } : null;
-    })).filter((f => null !== f)) : []), [ columnFilters, columnFilterValues, columns ]), filteredData = React.useMemo((() => {
-        if (!searchQuery && 0 === activeColumnFilters.length) return data;
-        const lowercaseQuery = searchQuery ? searchQuery.toLowerCase() : "";
-        return data.filter((row => {
-            // Apply global search
-            if (searchQuery && !visibleColumns.some((column => {
-                var _context;
-                const value = row[column.key];
-                return null != value && _includesInstanceProperty(_context = String(value).toLowerCase()).call(_context, lowercaseQuery);
-            }))) return !1;
-            // Apply column-specific filters
-                        for (let i = 0; i < activeColumnFilters.length; i++) {
-                const filter = activeColumnFilters[i];
-                if (!filter) continue;
-                const {key: key, value: value, lowercaseValue: lowercaseValue, column: column} = filter, cellValue = row[key];
-                if (null == cellValue) return !1;
-                // Use custom filter function if provided
-                                var _context2;
-                // Default text filter
-                                if (column.filterFunction) {
-                    if (!column.filterFunction(cellValue, value)) return !1;
-                } else if (!_includesInstanceProperty(_context2 = String(cellValue).toLowerCase()).call(_context2, lowercaseValue)) return !1;
-            }
-            return !0;
-        }));
-    }), [ data, visibleColumns, searchQuery, activeColumnFilters ]), sortedData = React.useMemo((() => sortConfig && sortable ? [ ...filteredData ].sort(((a, b) => {
-        const aValue = a[sortConfig.key], bValue = b[sortConfig.key];
-        return null == aValue ? "asc" === sortConfig.direction ? -1 : 1 : null == bValue ? "asc" === sortConfig.direction ? 1 : -1 : "string" == typeof aValue && "string" == typeof bValue ? "asc" === sortConfig.direction ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue) : "asc" === sortConfig.direction ? aValue > bValue ? 1 : -1 : aValue > bValue ? -1 : 1;
-    })) : filteredData), [ filteredData, sortConfig, sortable ]), paginatedData = React.useMemo((() => {
-        if (!paginated) return sortedData;
-        const startIndex = (currentPage - 1) * pageSize;
-        return sortedData.slice(startIndex, startIndex + pageSize);
-    }), [ sortedData, paginated, currentPage, pageSize ]), totalPages = React.useMemo((() => paginated ? Math.max(1, Math.ceil(sortedData.length / pageSize)) : 1), [ sortedData.length, paginated, pageSize ]), selectedRows = React.useMemo((() => "none" === selectionMode || 0 === selectedRowIds.length ? [] : sortedData.filter((row => _includesInstanceProperty(selectedRowIds).call(selectedRowIds, getRowId$1(row, rowKey))))), [ sortedData, selectedRowIds, selectionMode, rowKey ]), handleRowSelect = React.useCallback(((rowId, selected) => {
-        if ("none" === selectionMode) return;
-        let newSelectedIds;
-        if (newSelectedIds = "single" === selectionMode ? selected ? [ rowId ] : [] : 
-        // multiple
-        selected ? [ ...selectedRowIds, rowId ] : selectedRowIds.filter((id => id !== rowId)), 
-        controlledSelectedRowIds || setInternalSelectedRowIds(newSelectedIds), onSelectionChange) {
-            const selectedRowsData = sortedData.filter((row => _includesInstanceProperty(newSelectedIds).call(newSelectedIds, getRowId$1(row, rowKey))));
-            onSelectionChange(selectedRowsData, newSelectedIds);
-        }
-    }), [ selectionMode, selectedRowIds, controlledSelectedRowIds, onSelectionChange, sortedData, rowKey ]), handleSelectAll = React.useCallback((selected => {
-        if ("multiple" !== selectionMode) return;
-        const newSelectedIds = selected ? paginatedData.map((row => getRowId$1(row, rowKey))) : [];
-        if (controlledSelectedRowIds || setInternalSelectedRowIds(newSelectedIds), onSelectionChange) {
-            const selectedRowsData = sortedData.filter((row => _includesInstanceProperty(newSelectedIds).call(newSelectedIds, getRowId$1(row, rowKey))));
-            onSelectionChange(selectedRowsData, newSelectedIds);
-        }
-    }), [ selectionMode, paginatedData, sortedData, controlledSelectedRowIds, onSelectionChange, rowKey ]), isAllSelected = React.useMemo((() => "multiple" === selectionMode && 0 !== paginatedData.length && paginatedData.every((row => _includesInstanceProperty(selectedRowIds).call(selectedRowIds, getRowId$1(row, rowKey))))), [ selectionMode, paginatedData, selectedRowIds, rowKey ]), isIndeterminate = React.useMemo((() => {
-        if ("multiple" !== selectionMode || 0 === paginatedData.length) return !1;
-        const selectedCount = paginatedData.filter((row => _includesInstanceProperty(selectedRowIds).call(selectedRowIds, getRowId$1(row, rowKey)))).length;
-        return selectedCount > 0 && selectedCount < paginatedData.length;
-    }), [ selectionMode, paginatedData, selectedRowIds, rowKey ]), handleColumnVisibilityToggle = React.useCallback((columnKey => {
-        setColumnVisibility((prev => {
-            const updated = {
-                ...prev,
-                [columnKey]: !prev[columnKey]
-            };
-            if (onColumnVisibilityChange) {
-                const visibleKeys = Object.entries(updated).filter((([, visible]) => visible)).map((([key]) => key));
-                onColumnVisibilityChange(visibleKeys);
-            }
-            return updated;
-        }));
-    }), [ onColumnVisibilityChange ]);
-    // Handle sorting
-        // Handle column reorder
-    return React.useCallback(((fromIndex, toIndex) => {
-        const newOrder = [ ...columnOrder ], [removed] = newOrder.splice(fromIndex, 1);
-        removed && (newOrder.splice(toIndex, 0, removed), setColumnOrder(newOrder), onColumnReorder && onColumnReorder(newOrder));
-    }), [ columnOrder, onColumnReorder ]), 
-    // Reset to first page when data changes
-    React.useEffect((() => {
-        setCurrentPage(1);
-    }), [ data ]), 
-    // Reset current page if it's out of bounds
-    React.useEffect((() => {
-        currentPage > totalPages && totalPages > 0 && setCurrentPage(Math.max(1, totalPages));
-    }), [ currentPage, totalPages ]), {
-        displayData: paginatedData,
-        sortConfig: sortConfig,
-        currentPage: currentPage,
-        totalPages: totalPages,
-        handleSort: handleSort,
-        handlePageChange: handlePageChange,
-        handleSearch: handleSearch,
-        selectedRowIds: selectedRowIds,
-        selectedRows: selectedRows,
-        handleRowSelect: handleRowSelect,
-        handleSelectAll: handleSelectAll,
-        isAllSelected: isAllSelected,
-        isIndeterminate: isIndeterminate,
-        columnOrder: columnOrder,
-        visibleColumns: visibleColumns,
-        columnVisibility: columnVisibility,
-        handleColumnVisibilityToggle: handleColumnVisibilityToggle,
-        columnFilterValues: columnFilterValues,
-        handleColumnFilterChange: handleColumnFilterChange,
-        clearColumnFilters: clearColumnFilters
-    };
-}
-
-Countdown.displayName = "Countdown";
+ */ Countdown.displayName = "Countdown";
 
 const range = (start, end) => {
     const length = end - start + 1;
     return Array.from({
         length: length
     }, ((_, idx) => idx + start));
-}, usePagination = ({currentPage: currentPage, totalPages: totalPages, siblingCount: siblingCount = 1, onPageChange: onPageChange}) => {
-    const paginationRange = React.useMemo((() => {
-        // siblingCount + firstPage + lastPage + currentPage + 2*DOTS
-        /*
-      Case 1: If the number of pages is less than the page numbers we want to show in our
-      paginationComponent, we return the range [1..totalPages]
-    */
-        if (siblingCount + 5 >= totalPages) return range(1, totalPages);
-        const leftSiblingIndex = Math.max(currentPage - siblingCount, 1), rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages), shouldShowLeftDots = leftSiblingIndex > 2, shouldShowRightDots = rightSiblingIndex < totalPages - 2, lastPageIndex = totalPages;
-        /*
-        Case 2: No left dots to show, but rights dots to be shown
-    */
-        return !shouldShowLeftDots && shouldShowRightDots ? [ ...range(1, 3 + 2 * siblingCount), "...", totalPages ] : 
-        /*
-        Case 3: No right dots to show, but left dots to be shown
-    */
-        shouldShowLeftDots && !shouldShowRightDots ? [ 1, "...", ...range(totalPages - (3 + 2 * siblingCount) + 1, totalPages) ] : 
-        /*
-        Case 4: Both left and right dots to be shown
-    */
-        shouldShowLeftDots && shouldShowRightDots ? [ 1, "...", ...range(leftSiblingIndex, rightSiblingIndex), "...", lastPageIndex ] : [];
-    }), [ totalPages, siblingCount, currentPage ]), goToPage = page => {
-        page >= 1 && page <= totalPages && page !== currentPage && onPageChange(page);
-    };
-    return {
-        paginationRange: paginationRange,
-        currentPage: currentPage,
-        totalPages: totalPages,
-        goToPage: goToPage,
-        nextPage: () => {
-            goToPage(currentPage + 1);
-        },
-        prevPage: () => {
-            goToPage(currentPage - 1);
-        },
-        firstPage: () => {
-            goToPage(1);
-        },
-        lastPage: () => {
-            goToPage(totalPages);
-        },
-        DOTS: "..."
-    };
 }, PaginationNavButton =  React.memo((({type: type, onClick: onClick, disabled: disabled, label: label, iconName: iconName}) => jsxRuntime.jsx("li", {
     className: `c-pagination__item c-pagination__item--${type} ${disabled ? "is-disabled" : ""}`,
     "aria-disabled": disabled,
@@ -9530,7 +10446,50 @@ const range = (start, end) => {
         })
     })
 }))), Pagination =  React.memo((({currentPage: currentPage = PAGINATION_DEFAULTS.currentPage, totalPages: totalPages = PAGINATION_DEFAULTS.totalPages, onPageChange: onPageChange, siblingCount: siblingCount = PAGINATION_DEFAULTS.siblingCount, showFirstLastButtons: showFirstLastButtons = PAGINATION_DEFAULTS.showFirstLastButtons, showPrevNextButtons: showPrevNextButtons = PAGINATION_DEFAULTS.showPrevNextButtons, showSearch: showSearch = !1, searchPlaceholder: searchPlaceholder = "Go to page", size: size = PAGINATION_DEFAULTS.size, className: className = "", style: style, "aria-label": ariaLabel = "Pagination", glass: glass}) => {
-    const {paginationRange: paginationRange, goToPage: goToPage, nextPage: nextPage, prevPage: prevPage, firstPage: firstPage, lastPage: lastPage} = usePagination({
+    const {paginationRange: paginationRange, goToPage: goToPage, nextPage: nextPage, prevPage: prevPage, firstPage: firstPage, lastPage: lastPage} = (({currentPage: currentPage, totalPages: totalPages, siblingCount: siblingCount = 1, onPageChange: onPageChange}) => {
+        const paginationRange = React.useMemo((() => {
+            // siblingCount + firstPage + lastPage + currentPage + 2*DOTS
+            /*
+      Case 1: If the number of pages is less than the page numbers we want to show in our
+      paginationComponent, we return the range [1..totalPages]
+    */
+            if (siblingCount + 5 >= totalPages) return range(1, totalPages);
+            const leftSiblingIndex = Math.max(currentPage - siblingCount, 1), rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages), shouldShowLeftDots = leftSiblingIndex > 2, shouldShowRightDots = rightSiblingIndex < totalPages - 2, lastPageIndex = totalPages;
+            /*
+        Case 2: No left dots to show, but rights dots to be shown
+    */
+            return !shouldShowLeftDots && shouldShowRightDots ? [ ...range(1, 3 + 2 * siblingCount), "...", totalPages ] : 
+            /*
+        Case 3: No right dots to show, but left dots to be shown
+    */
+            shouldShowLeftDots && !shouldShowRightDots ? [ 1, "...", ...range(totalPages - (3 + 2 * siblingCount) + 1, totalPages) ] : 
+            /*
+        Case 4: Both left and right dots to be shown
+    */
+            shouldShowLeftDots && shouldShowRightDots ? [ 1, "...", ...range(leftSiblingIndex, rightSiblingIndex), "...", lastPageIndex ] : [];
+        }), [ totalPages, siblingCount, currentPage ]), goToPage = page => {
+            page >= 1 && page <= totalPages && page !== currentPage && onPageChange(page);
+        };
+        return {
+            paginationRange: paginationRange,
+            currentPage: currentPage,
+            totalPages: totalPages,
+            goToPage: goToPage,
+            nextPage: () => {
+                goToPage(currentPage + 1);
+            },
+            prevPage: () => {
+                goToPage(currentPage - 1);
+            },
+            firstPage: () => {
+                goToPage(1);
+            },
+            lastPage: () => {
+                goToPage(totalPages);
+            },
+            DOTS: "..."
+        };
+    })({
         currentPage: currentPage,
         totalPages: totalPages,
         siblingCount: siblingCount,
@@ -9742,14 +10701,13 @@ const DropdownContext =  React.createContext({
     id: "",
     trigger: "click"
 }), 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", {
+    const {glass: glass} = React.useContext(DropdownStyleContext), {id: id} = React.useContext(DropdownContext);
+    return jsxRuntime.jsx("ul", {
         ref: ref,
+        id: `${id}-menu`,
         className: `c-dropdown__menu ${glass ? "c-dropdown__menu--glass" : ""} ${className}`.trim(),
+        role: "menu",
+        "aria-labelledby": `${id}-trigger`,
         ...props,
         children: children
     });
@@ -9758,14 +10716,23 @@ const DropdownContext =  React.createContext({
 // 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
-})));
+const DropdownTrigger =  React.forwardRef((({children: children, className: className = "", onClick: onClick, onKeyDown: onKeyDown, ...props}, ref) => {
+    const {isOpen: isOpen, id: id} = React.useContext(DropdownContext);
+    return jsxRuntime.jsx("div", {
+        ref: ref,
+        id: `${id}-trigger`,
+        className: `c-dropdown__toggle ${className}`.trim(),
+        onClick: onClick,
+        onKeyDown: onKeyDown,
+        "aria-haspopup": "true",
+        "aria-expanded": isOpen,
+        "aria-controls": `${id}-menu`,
+        tabIndex: 0,
+        role: "button",
+        ...props,
+        children: children
+    });
+}));
 
 DropdownTrigger.displayName = "DropdownTrigger";
 
@@ -10014,7 +10981,165 @@ Dropdown.Item = DropdownItem, Dropdown.Divider = DropdownDivider, Dropdown.Heade
  * ```
  */
 const DataTable =  React.memo((({data: data, columns: columns, className: className, style: style, sortable: sortable = !1, filterable: filterable = !1, paginated: paginated = !1, pageSize: pageSize = 10, striped: striped = !1, bordered: bordered = !1, dense: dense = !1, loading: loading = !1, emptyMessage: emptyMessage = "No data available", onRowClick: onRowClick, onSort: onSort, selectionMode: selectionMode = "none", selectedRowIds: controlledSelectedRowIds, onSelectionChange: onSelectionChange, rowKey: rowKey, resizable: resizable = !1, reorderable: reorderable = !1, onColumnReorder: onColumnReorder, showColumnVisibility: showColumnVisibility = !1, onColumnVisibilityChange: onColumnVisibilityChange, stickyHeader: stickyHeader = !1, stickyHeaderOffset: stickyHeaderOffset = "0px", virtualScrolling: virtualScrolling = !1, estimatedRowHeight: estimatedRowHeight = 50, overscan: overscan = 5, exportable: exportable = !1, exportFormats: exportFormats = [ "csv", "excel", "json" ], exportFilename: exportFilename = "data-table", onExport: onExport, columnFilters: columnFilters = !1, ...props}) => {
-    const tableRef = React.useRef(null), headerRef = React.useRef(null), [resizingColumn, setResizingColumn] = React.useState(null), [columnWidths, setColumnWidths] = React.useState({}), [dragStartIndex, setDragStartIndex] = React.useState(null), [dragOverIndex, setDragOverIndex] = React.useState(null), {displayData: displayData, sortConfig: sortConfig, currentPage: currentPage, totalPages: totalPages, handleSort: handleSort, handlePageChange: handlePageChange, handleSearch: handleSearch, selectedRowIds: selectedRowIds, selectedRows: selectedRows, handleRowSelect: handleRowSelect, handleSelectAll: handleSelectAll, isAllSelected: isAllSelected, isIndeterminate: isIndeterminate, visibleColumns: visibleColumns, columnVisibility: columnVisibility, handleColumnVisibilityToggle: handleColumnVisibilityToggle, columnFilterValues: columnFilterValues, handleColumnFilterChange: handleColumnFilterChange, clearColumnFilters: clearColumnFilters} = useDataTable({
+    const tableRef = React.useRef(null), headerRef = React.useRef(null), [resizingColumn, setResizingColumn] = React.useState(null), [columnWidths, setColumnWidths] = React.useState({}), [dragStartIndex, setDragStartIndex] = React.useState(null), [dragOverIndex, setDragOverIndex] = React.useState(null), {displayData: displayData, sortConfig: sortConfig, currentPage: currentPage, totalPages: totalPages, handleSort: handleSort, handlePageChange: handlePageChange, handleSearch: handleSearch, selectedRowIds: selectedRowIds, selectedRows: selectedRows, handleRowSelect: handleRowSelect, handleSelectAll: handleSelectAll, isAllSelected: isAllSelected, isIndeterminate: isIndeterminate, visibleColumns: visibleColumns, columnVisibility: columnVisibility, handleColumnVisibilityToggle: handleColumnVisibilityToggle, columnFilterValues: columnFilterValues, handleColumnFilterChange: handleColumnFilterChange, clearColumnFilters: clearColumnFilters} = function({data: data = [], columns: columns = [], sortable: sortable = !1, paginated: paginated = !1, pageSize: pageSize = 10, onSort: onSort, initialSortConfig: initialSortConfig, selectionMode: selectionMode = "none", selectedRowIds: controlledSelectedRowIds, onSelectionChange: onSelectionChange, rowKey: rowKey, columnFilters: columnFilters = !1, reorderable: reorderable = !1, onColumnReorder: onColumnReorder, onColumnVisibilityChange: onColumnVisibilityChange}) {
+        // Sort state
+        const [sortConfig, setSortConfig] = React.useState(initialSortConfig || null), [currentPage, setCurrentPage] = React.useState(1), [searchQuery, setSearchQuery] = React.useState(""), [internalSelectedRowIds, setInternalSelectedRowIds] = React.useState([]), selectedRowIds = controlledSelectedRowIds ?? internalSelectedRowIds, [columnOrder, setColumnOrder] = React.useState((() => columns.map((col => col.key)))), [columnVisibility, setColumnVisibility] = React.useState((() => {
+            const visibility = {};
+            return columns.forEach((col => {
+                visibility[col.key] = !1 !== col.visible;
+            })), visibility;
+        })), [columnFilterValues, setColumnFilterValues] = React.useState({});
+        // Pagination state
+                // Update column order when columns prop changes
+        React.useEffect((() => {
+            const newOrder = columns.map((col => col.key)), currentOrderSet = new Set(columnOrder), newOrderSet = new Set(newOrder);
+            // Only update if there are actual differences
+            newOrder.length === columnOrder.length && newOrder.every((key => currentOrderSet.has(key))) && columnOrder.every((key => newOrderSet.has(key))) || setColumnOrder(newOrder);
+        }), [ columns ]), 
+        // Update column visibility when columns prop changes
+        React.useEffect((() => {
+            setColumnVisibility((prev => {
+                const updated = {
+                    ...prev
+                };
+                return columns.forEach((col => {
+                    col.key in updated || (updated[col.key] = !1 !== col.visible);
+                })), updated;
+            }));
+        }), [ columns ]);
+        // Visible columns based on order and visibility
+        const visibleColumns = React.useMemo((() => columnOrder.map((key => columns.find((col => col.key === key)))).filter((col => void 0 !== col && !1 !== columnVisibility[col.key]))), [ columns, columnOrder, columnVisibility ]), handleSort = React.useCallback((key => {
+            if (!sortable) return;
+            let direction = "asc";
+            sortConfig && sortConfig.key === key && "asc" === sortConfig.direction && (direction = "desc");
+            const newSortConfig = {
+                key: key,
+                direction: direction
+            };
+            setSortConfig(newSortConfig), onSort && onSort(newSortConfig);
+        }), [ sortable, sortConfig, onSort ]), handlePageChange = React.useCallback((page => {
+            page < 1 || setCurrentPage(page);
+        }), []), handleSearch = React.useCallback((query => {
+            setSearchQuery(query), setCurrentPage(1);
+        } // Reset to first page when searching
+        ), []), handleColumnFilterChange = React.useCallback(((columnKey, value) => {
+            setColumnFilterValues((prev => ({
+                ...prev,
+                [columnKey]: value
+            }))), setCurrentPage(1);
+        } // Reset to first page when filtering
+        ), []), clearColumnFilters = React.useCallback((() => {
+            setColumnFilterValues({}), setCurrentPage(1);
+        }), []), activeColumnFilters = React.useMemo((() => columnFilters ? Object.entries(columnFilterValues).filter((([, value]) => null != value && "" !== value)).map((([columnKey, value]) => {
+            const column = columns.find((col => col.key === columnKey));
+            return column && column.filterable ? {
+                key: columnKey,
+                value: value,
+                lowercaseValue: "string" == typeof value ? value.toLowerCase() : String(value).toLowerCase(),
+                column: column
+            } : null;
+        })).filter((f => null !== f)) : []), [ columnFilters, columnFilterValues, columns ]), filteredData = React.useMemo((() => {
+            if (!searchQuery && 0 === activeColumnFilters.length) return data;
+            const lowercaseQuery = searchQuery ? searchQuery.toLowerCase() : "";
+            return data.filter((row => {
+                // Apply global search
+                if (searchQuery && !visibleColumns.some((column => {
+                    var _context;
+                    const value = row[column.key];
+                    return null != value && _includesInstanceProperty(_context = String(value).toLowerCase()).call(_context, lowercaseQuery);
+                }))) return !1;
+                // Apply column-specific filters
+                                for (let i = 0; i < activeColumnFilters.length; i++) {
+                    const filter = activeColumnFilters[i];
+                    if (!filter) continue;
+                    const {key: key, value: value, lowercaseValue: lowercaseValue, column: column} = filter, cellValue = row[key];
+                    if (null == cellValue) return !1;
+                    // Use custom filter function if provided
+                                        var _context2;
+                    // Default text filter
+                                        if (column.filterFunction) {
+                        if (!column.filterFunction(cellValue, value)) return !1;
+                    } else if (!_includesInstanceProperty(_context2 = String(cellValue).toLowerCase()).call(_context2, lowercaseValue)) return !1;
+                }
+                return !0;
+            }));
+        }), [ data, visibleColumns, searchQuery, activeColumnFilters ]), sortedData = React.useMemo((() => sortConfig && sortable ? [ ...filteredData ].sort(((a, b) => {
+            const aValue = a[sortConfig.key], bValue = b[sortConfig.key];
+            return null == aValue ? "asc" === sortConfig.direction ? -1 : 1 : null == bValue ? "asc" === sortConfig.direction ? 1 : -1 : "string" == typeof aValue && "string" == typeof bValue ? "asc" === sortConfig.direction ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue) : "asc" === sortConfig.direction ? aValue > bValue ? 1 : -1 : aValue > bValue ? -1 : 1;
+        })) : filteredData), [ filteredData, sortConfig, sortable ]), paginatedData = React.useMemo((() => {
+            if (!paginated) return sortedData;
+            const startIndex = (currentPage - 1) * pageSize;
+            return sortedData.slice(startIndex, startIndex + pageSize);
+        }), [ sortedData, paginated, currentPage, pageSize ]), totalPages = React.useMemo((() => paginated ? Math.max(1, Math.ceil(sortedData.length / pageSize)) : 1), [ sortedData.length, paginated, pageSize ]), selectedRows = React.useMemo((() => "none" === selectionMode || 0 === selectedRowIds.length ? [] : sortedData.filter((row => _includesInstanceProperty(selectedRowIds).call(selectedRowIds, getRowId$1(row, rowKey))))), [ sortedData, selectedRowIds, selectionMode, rowKey ]), handleRowSelect = React.useCallback(((rowId, selected) => {
+            if ("none" === selectionMode) return;
+            let newSelectedIds;
+            if (newSelectedIds = "single" === selectionMode ? selected ? [ rowId ] : [] : 
+            // multiple
+            selected ? [ ...selectedRowIds, rowId ] : selectedRowIds.filter((id => id !== rowId)), 
+            controlledSelectedRowIds || setInternalSelectedRowIds(newSelectedIds), onSelectionChange) {
+                const selectedRowsData = sortedData.filter((row => _includesInstanceProperty(newSelectedIds).call(newSelectedIds, getRowId$1(row, rowKey))));
+                onSelectionChange(selectedRowsData, newSelectedIds);
+            }
+        }), [ selectionMode, selectedRowIds, controlledSelectedRowIds, onSelectionChange, sortedData, rowKey ]), handleSelectAll = React.useCallback((selected => {
+            if ("multiple" !== selectionMode) return;
+            const newSelectedIds = selected ? paginatedData.map((row => getRowId$1(row, rowKey))) : [];
+            if (controlledSelectedRowIds || setInternalSelectedRowIds(newSelectedIds), onSelectionChange) {
+                const selectedRowsData = sortedData.filter((row => _includesInstanceProperty(newSelectedIds).call(newSelectedIds, getRowId$1(row, rowKey))));
+                onSelectionChange(selectedRowsData, newSelectedIds);
+            }
+        }), [ selectionMode, paginatedData, sortedData, controlledSelectedRowIds, onSelectionChange, rowKey ]), isAllSelected = React.useMemo((() => "multiple" === selectionMode && 0 !== paginatedData.length && paginatedData.every((row => _includesInstanceProperty(selectedRowIds).call(selectedRowIds, getRowId$1(row, rowKey))))), [ selectionMode, paginatedData, selectedRowIds, rowKey ]), isIndeterminate = React.useMemo((() => {
+            if ("multiple" !== selectionMode || 0 === paginatedData.length) return !1;
+            const selectedCount = paginatedData.filter((row => _includesInstanceProperty(selectedRowIds).call(selectedRowIds, getRowId$1(row, rowKey)))).length;
+            return selectedCount > 0 && selectedCount < paginatedData.length;
+        }), [ selectionMode, paginatedData, selectedRowIds, rowKey ]), handleColumnVisibilityToggle = React.useCallback((columnKey => {
+            setColumnVisibility((prev => {
+                const updated = {
+                    ...prev,
+                    [columnKey]: !prev[columnKey]
+                };
+                if (onColumnVisibilityChange) {
+                    const visibleKeys = Object.entries(updated).filter((([, visible]) => visible)).map((([key]) => key));
+                    onColumnVisibilityChange(visibleKeys);
+                }
+                return updated;
+            }));
+        }), [ onColumnVisibilityChange ]);
+        // Handle sorting
+                // Handle column reorder
+        return React.useCallback(((fromIndex, toIndex) => {
+            const newOrder = [ ...columnOrder ], [removed] = newOrder.splice(fromIndex, 1);
+            removed && (newOrder.splice(toIndex, 0, removed), setColumnOrder(newOrder), onColumnReorder && onColumnReorder(newOrder));
+        }), [ columnOrder, onColumnReorder ]), 
+        // Reset to first page when data changes
+        React.useEffect((() => {
+            setCurrentPage(1);
+        }), [ data ]), 
+        // Reset current page if it's out of bounds
+        React.useEffect((() => {
+            currentPage > totalPages && totalPages > 0 && setCurrentPage(Math.max(1, totalPages));
+        }), [ currentPage, totalPages ]), {
+            displayData: paginatedData,
+            sortConfig: sortConfig,
+            currentPage: currentPage,
+            totalPages: totalPages,
+            handleSort: handleSort,
+            handlePageChange: handlePageChange,
+            handleSearch: handleSearch,
+            selectedRowIds: selectedRowIds,
+            selectedRows: selectedRows,
+            handleRowSelect: handleRowSelect,
+            handleSelectAll: handleSelectAll,
+            isAllSelected: isAllSelected,
+            isIndeterminate: isIndeterminate,
+            columnOrder: columnOrder,
+            visibleColumns: visibleColumns,
+            columnVisibility: columnVisibility,
+            handleColumnVisibilityToggle: handleColumnVisibilityToggle,
+            columnFilterValues: columnFilterValues,
+            handleColumnFilterChange: handleColumnFilterChange,
+            clearColumnFilters: clearColumnFilters
+        };
+    }({
         data: data,
         columns: columns,
         sortable: sortable,
@@ -12366,297 +13491,6 @@ const DEFAULT_ATOMIX_FONTS = [ {
     };
 }
 
-/**
- * Breadcrumb state and functionality
- * @param initialOptions - Initial breadcrumb options
- * @returns Breadcrumb state and methods
- */ function useBreadcrumb(initialOptions) {
-    return {
-        defaultOptions: {
-            items: [],
-            divider: BREADCRUMB.DEFAULTS.DIVIDER,
-            className: "",
-            "aria-label": "Breadcrumb",
-            ...initialOptions
-        },
-        generateBreadcrumbClass: options => {
-            const {className: className = ""} = options;
-            return [ BREADCRUMB.CLASSES.BASE, className ].filter(Boolean).join(" ").trim();
-        },
-        generateItemClass: (item, isLast) => [ BREADCRUMB.CLASSES.ITEM, item.active || isLast ? BREADCRUMB.CLASSES.ACTIVE : "" ].filter(Boolean).join(" ").trim(),
-        isItemLink: (item, isLast) => Boolean(item.href && !item.active && !isLast),
-        parseItemsFromJson: jsonString => {
-            try {
-                return JSON.parse(jsonString);
-            } catch (error) {
-                return console.error("Error parsing breadcrumb items:", error), [];
-            }
-        }
-    };
-}
-
-/**
- * Hook for managing modal state
- */ function useModal$1({isOpen: isOpenProp, onOpenChange: onOpenChange, onOpen: onOpen, onClose: onClose} = {}) {
-    // For uncontrolled usage
-    const [isOpenState, setIsOpenState] = React.useState(!1), isControlled = void 0 !== isOpenProp, isOpen = isControlled ? !!isOpenProp : isOpenState;
-    // Determine if we're in controlled or uncontrolled mode
-        // Update internal state when prop changes (for controlled mode)
-    React.useEffect((() => {
-        isControlled && setIsOpenState(!!isOpenProp);
-    }), [ isOpenProp, isControlled ]);
-    const updateOpen = React.useCallback((nextIsOpen => {
-        // For uncontrolled mode, update internal state
-        isControlled || setIsOpenState(nextIsOpen), 
-        // Call the change handler in either mode
-        onOpenChange && onOpenChange(nextIsOpen), 
-        // Call the specific handler
-        nextIsOpen && onOpen ? onOpen() : !nextIsOpen && onClose && onClose();
-    }), [ isControlled, onOpenChange, onOpen, onClose ]), open = React.useCallback((() => {
-        updateOpen(!0);
-    }), [ updateOpen ]), close = React.useCallback((() => {
-        updateOpen(!1);
-    }), [ updateOpen ]), toggle = React.useCallback((() => {
-        updateOpen(!isOpen);
-    }), [ isOpen, updateOpen ]);
-    return {
-        isOpen: isOpen,
-        open: open,
-        close: close,
-        toggle: toggle
-    };
-}
-
-function useSlider(options) {
-    const {slides: rawSlides, slidesToShow: slidesToShow = 1, spaceBetween: spaceBetween = 0, loop: loop = !1, initialSlide: initialSlide = 0, direction: direction = "horizontal", speed: speed = 300, allowTouchMove: allowTouchMove = !0, threshold: threshold = 50, autoplay: autoplay, onSlideChange: onSlideChange} = options, slides = Array.isArray(rawSlides) ? rawSlides : [], containerRef = React.useRef(null), wrapperRef = React.useRef(null), repositioningRef = React.useRef(!1), autoplayRef = React.useRef(null), [autoplayRunning, setAutoplayRunning] = React.useState(!1), sliderStateRef = React.useRef({
-        isTransitioning: !1,
-        loop: loop,
-        slides: slides,
-        slidesToShow: slidesToShow,
-        speed: speed,
-        onSlideChange: onSlideChange
-    }), [realIndex, setRealIndex] = React.useState(initialSlide), [internalIndex, setInternalIndex] = React.useState(0), [isTransitioning, setIsTransitioning] = React.useState(!1), [containerSize, setContainerSize] = React.useState(0), [touching, setTouching] = React.useState(!1), [touchStart, setTouchStart] = React.useState(0), [dragOffset, setDragOffset] = React.useState(0), slideWidth = React.useMemo((() => 0 === containerSize ? 0 : (containerSize - spaceBetween * (slidesToShow - 1)) / slidesToShow), [ containerSize, spaceBetween, slidesToShow ]), allSlides = React.useMemo((() => loop && 0 !== slides.length ? [ ...slides.map(((slide, i) => ({
-        ...slide,
-        id: `set1-${slide.id || i}`
-    }))), ...slides.map(((slide, i) => ({
-        ...slide,
-        id: `set2-${slide.id || i}`
-    }))), ...slides.map(((slide, i) => ({
-        ...slide,
-        id: `set3-${slide.id || i}`
-    }))) ] : slides), [ slides, loop ]), loopedSlides = slides.length, translateValue = React.useMemo((() => 0 === slideWidth ? 0 : -internalIndex * slideWidth + dragOffset), [ slideWidth, internalIndex, dragOffset ]);
-    // Update the ref whenever the relevant state/props change
-    React.useEffect((() => {
-        sliderStateRef.current = {
-            isTransitioning: isTransitioning,
-            loop: loop,
-            slides: slides,
-            slidesToShow: slidesToShow,
-            speed: speed,
-            onSlideChange: onSlideChange
-        };
-    }), [ isTransitioning, loop, slides, slidesToShow, speed, onSlideChange ]), 
-    // Autoplay effect
-    React.useEffect((() => {
-        if (!autoplay) return autoplayRef.current && (clearInterval(autoplayRef.current), 
-        autoplayRef.current = null), void setAutoplayRunning(!1);
-        const autoplayParams = "boolean" == typeof autoplay ? {
-            delay: 3e3
-        } : autoplay, {delay: delay = 3e3, pauseOnMouseEnter: pauseOnMouseEnter = !1, disableOnInteraction: disableOnInteraction = !1, reverseDirection: reverseDirection = !1} = autoplayParams;
-        // Clear any existing interval
-        autoplayRef.current && clearInterval(autoplayRef.current), 
-        // Create new interval
-        autoplayRef.current = setInterval((() => {
-            // Use ref to get the latest state without resetting the interval
-            const {isTransitioning: currentIsTransitioning, loop: currentLoop, slides: currentSlides, slidesToShow: currentSlidesToShow, speed: currentSpeed, onSlideChange: currentOnSlideChange} = sliderStateRef.current;
-            // We need to use a functional update to get the latest values
-                        setRealIndex((prevRealIndex => {
-                if (currentIsTransitioning) return prevRealIndex;
-                // Stop autoplay on interaction if disableOnInteraction is true
-                                let nextIndex;
-                // Trigger the slide change
-                if (disableOnInteraction && autoplayRef.current && (clearInterval(autoplayRef.current), 
-                autoplayRef.current = null, setAutoplayRunning(!1)), nextIndex = currentLoop ? (prevRealIndex + 1) % currentSlides.length : Math.min(prevRealIndex + 1, currentSlides.length - currentSlidesToShow), 
-                reverseDirection) {
-                    // For reverse direction, we would go to previous slide
-                    const prevIndex = currentLoop ? 0 === prevRealIndex ? currentSlides.length - 1 : prevRealIndex - 1 : Math.max(prevRealIndex - 1, 0);
-                    return setInternalIndex(currentLoop ? currentSlides.length + prevIndex : prevIndex), 
-                    setIsTransitioning(!0), setDragOffset(0), setTimeout((() => {
-                        setIsTransitioning(!1), currentOnSlideChange?.(prevIndex);
-                    }), currentSpeed), prevIndex;
-                }
-                // Normal direction
-                return setInternalIndex(currentLoop ? currentSlides.length + nextIndex : nextIndex), 
-                setIsTransitioning(!0), setDragOffset(0), setTimeout((() => {
-                    setIsTransitioning(!1), currentOnSlideChange?.(nextIndex), 
-                    // Reposition after transition ends for looped sliders
-                    currentLoop && nextIndex >= 2 * currentSlides.length && (repositioningRef.current = !0, 
-                    setInternalIndex(currentSlides.length + nextIndex), setTimeout((() => {
-                        repositioningRef.current = !1;
-                    }), 0));
-                }), currentSpeed), nextIndex;
-            }));
-        }), delay), setAutoplayRunning(!0);
-        // Handle pause on mouse enter/leave if enabled
-        let containerElement = null;
-        const handleMouseEnter = () => {
-            autoplayRef.current && (clearInterval(autoplayRef.current), autoplayRef.current = null, 
-            setAutoplayRunning(!1));
-        }, handleMouseLeave = () => {
-            // Restart autoplay
-            autoplayRef.current && clearInterval(autoplayRef.current), autoplayRef.current = setInterval((() => {
-                const {isTransitioning: currentIsTransitioning, loop: currentLoop, slides: currentSlides, slidesToShow: currentSlidesToShow, speed: currentSpeed, onSlideChange: currentOnSlideChange} = sliderStateRef.current;
-                setRealIndex((prevRealIndex => {
-                    if (currentIsTransitioning) return prevRealIndex;
-                    let nextIndex;
-                    return nextIndex = currentLoop ? (prevRealIndex + 1) % currentSlides.length : Math.min(prevRealIndex + 1, currentSlides.length - currentSlidesToShow), 
-                    setInternalIndex(currentLoop ? currentSlides.length + nextIndex : nextIndex), setIsTransitioning(!0), 
-                    setDragOffset(0), setTimeout((() => {
-                        setIsTransitioning(!1), currentOnSlideChange?.(nextIndex), currentLoop && nextIndex >= 2 * currentSlides.length && (repositioningRef.current = !0, 
-                        setInternalIndex(currentSlides.length + nextIndex), setTimeout((() => {
-                            repositioningRef.current = !1;
-                        }), 0));
-                    }), currentSpeed), nextIndex;
-                }));
-            }), delay), setAutoplayRunning(!0);
-        };
-        // Cleanup
-        return pauseOnMouseEnter && containerRef.current && (containerElement = containerRef.current, 
-        containerElement.addEventListener("mouseenter", handleMouseEnter), containerElement.addEventListener("mouseleave", handleMouseLeave)), 
-        () => {
-            autoplayRef.current && (clearInterval(autoplayRef.current), autoplayRef.current = null), 
-            containerElement && (containerElement.removeEventListener("mouseenter", handleMouseEnter), 
-            containerElement.removeEventListener("mouseleave", handleMouseLeave)), setAutoplayRunning(!1);
-        };
-    }), [ autoplay, repositioningRef ]), 
-    // Initialize
-    React.useEffect((() => {
-        setInternalIndex(loop ? slides.length + initialSlide : initialSlide);
-    }), [ loop, slides.length, initialSlide ]), React.useEffect((() => {
-        const updateSize = () => {
-            if (containerRef.current) {
-                const size = "horizontal" === direction ? containerRef.current.offsetWidth : containerRef.current.offsetHeight;
-                setContainerSize(size);
-            }
-        };
-        return updateSize(), window.addEventListener("resize", updateSize), () => window.removeEventListener("resize", updateSize);
-    }), [ direction ]);
-    const slideNext = React.useCallback((() => {
-        if (!isTransitioning) if (
-        // Stop autoplay on interaction if disableOnInteraction is true
-        autoplay && "object" == typeof autoplay && autoplay.disableOnInteraction && autoplayRef.current && (clearInterval(autoplayRef.current), 
-        autoplayRef.current = null, setAutoplayRunning(!1)), loop) {
-            const nextRealIndex = (realIndex + 1) % slides.length, nextInternalIndex = internalIndex + 1;
-            setRealIndex(nextRealIndex), setInternalIndex(nextInternalIndex), setIsTransitioning(!0), 
-            setDragOffset(0), setTimeout((() => {
-                setIsTransitioning(!1), onSlideChange?.(nextRealIndex), 
-                // Reposition after transition ends
-                nextInternalIndex >= 2 * slides.length && (repositioningRef.current = !0, setInternalIndex(slides.length + nextRealIndex), 
-                setTimeout((() => {
-                    repositioningRef.current = !1;
-                }), 0));
-            }), speed);
-        } else {
-            const nextIndex = Math.min(realIndex + 1, slides.length - slidesToShow);
-            setRealIndex(nextIndex), setInternalIndex(nextIndex), setIsTransitioning(!0), setDragOffset(0), 
-            setTimeout((() => {
-                setIsTransitioning(!1), onSlideChange?.(nextIndex);
-            }), speed);
-        }
-    }), [ realIndex, internalIndex, slides.length, slidesToShow, loop, isTransitioning, speed, onSlideChange, allSlides.length, loopedSlides, autoplay ]), slidePrev = React.useCallback((() => {
-        if (!isTransitioning) if (
-        // Stop autoplay on interaction if disableOnInteraction is true
-        autoplay && "object" == typeof autoplay && autoplay.disableOnInteraction && autoplayRef.current && (clearInterval(autoplayRef.current), 
-        autoplayRef.current = null, setAutoplayRunning(!1)), loop) {
-            const prevRealIndex = 0 === realIndex ? slides.length - 1 : realIndex - 1, prevInternalIndex = internalIndex - 1;
-            setRealIndex(prevRealIndex), setInternalIndex(prevInternalIndex), setIsTransitioning(!0), 
-            setDragOffset(0), setTimeout((() => {
-                setIsTransitioning(!1), onSlideChange?.(prevRealIndex), 
-                // Reposition after transition ends
-                prevInternalIndex < slides.length && (repositioningRef.current = !0, setInternalIndex(slides.length + prevRealIndex), 
-                setTimeout((() => {
-                    repositioningRef.current = !1;
-                }), 0));
-            }), speed);
-        } else {
-            const prevIndex = Math.max(realIndex - 1, 0);
-            setRealIndex(prevIndex), setInternalIndex(prevIndex), setIsTransitioning(!0), setDragOffset(0), 
-            setTimeout((() => {
-                setIsTransitioning(!1), onSlideChange?.(prevIndex);
-            }), speed);
-        }
-    }), [ realIndex, internalIndex, slides.length, loop, isTransitioning, speed, onSlideChange, allSlides.length, loopedSlides, autoplay ]), goToSlide = React.useCallback((index => {
-        isTransitioning || index === realIndex || (
-        // Stop autoplay on interaction if disableOnInteraction is true
-        autoplay && "object" == typeof autoplay && autoplay.disableOnInteraction && autoplayRef.current && (clearInterval(autoplayRef.current), 
-        autoplayRef.current = null, setAutoplayRunning(!1)), setIsTransitioning(!0), setDragOffset(0), 
-        setRealIndex(index), setInternalIndex(loop ? slides.length + index : index), setTimeout((() => {
-            setIsTransitioning(!1), onSlideChange?.(index);
-        }), speed));
-    }), [ realIndex, isTransitioning, speed, onSlideChange, loop, loopedSlides, autoplay ]), handleTouchStart = React.useCallback((e => {
-        if (!allowTouchMove) return;
-        // Stop autoplay on interaction if disableOnInteraction is true
-                autoplay && "object" == typeof autoplay && autoplay.disableOnInteraction && autoplayRef.current && (clearInterval(autoplayRef.current), 
-        autoplayRef.current = null, setAutoplayRunning(!1));
-        const client = "horizontal" === direction ? "touches" in e ? e.touches[0]?.clientX || 0 : e.clientX : "touches" in e ? e.touches[0]?.clientY || 0 : e.clientY;
-        setTouchStart(client), setTouching(!0), setDragOffset(0);
-    }), [ allowTouchMove, direction, autoplay ]), handleTouchMove = React.useCallback((e => {
-        if (!touching || !allowTouchMove) return;
-        const client = "horizontal" === direction ? "touches" in e ? e.touches[0]?.clientX || 0 : e.clientX : "touches" in e ? e.touches[0]?.clientY || 0 : e.clientY, diff = touchStart - client;
-        Math.abs(diff) > 10 && (e.preventDefault(), setDragOffset(.5 * -diff));
-    }), [ touching, touchStart, allowTouchMove, direction ]), handleTouchEnd = React.useCallback((e => {
-        if (!touching || !allowTouchMove) return;
-        const client = "horizontal" === direction ? "changedTouches" in e ? e.changedTouches[0]?.clientX || 0 : e.clientX : "changedTouches" in e ? e.changedTouches[0]?.clientY || 0 : e.clientY, diff = touchStart - client;
-        setTouching(!1), setDragOffset(0), Math.abs(diff) > threshold && (diff > 0 ? slideNext() : slidePrev());
-    }), [ touching, touchStart, threshold, slideNext, slidePrev, allowTouchMove, direction ]), canSlideNext = loop || realIndex < slides.length - slidesToShow, canSlidePrev = loop || realIndex > 0;
-    return {
-        activeIndex: realIndex,
-        realIndex: realIndex,
-        previousIndex: realIndex,
-        isBeginning: !loop && 0 === realIndex,
-        isEnd: !loop && realIndex >= slides.length - slidesToShow,
-        progress: slides.length > 0 ? realIndex / (slides.length - 1) : 0,
-        autoplayRunning: autoplayRunning,
-        transitioning: isTransitioning,
-        touching: touching,
-        translate: translateValue,
-        slidesPerView: slidesToShow,
-        slidesCount: slides.length,
-        isLocked: !1,
-        destroyed: !1,
-        size: containerSize,
-        touches: {
-            startX: 0,
-            startY: 0,
-            currentX: 0,
-            currentY: 0,
-            diff: 0
-        },
-        allowSlideNext: canSlideNext,
-        allowSlidePrev: canSlidePrev,
-        allowTouchMove: allowTouchMove,
-        animating: isTransitioning,
-        enabled: !0,
-        initialized: !0,
-        slideNext: slideNext,
-        slidePrev: slidePrev,
-        goToSlide: goToSlide,
-        canSlideNext: canSlideNext,
-        canSlidePrev: canSlidePrev,
-        containerRef: containerRef,
-        wrapperRef: wrapperRef,
-        handleTouchStart: handleTouchStart,
-        handleTouchMove: handleTouchMove,
-        handleTouchEnd: handleTouchEnd,
-        allSlides: allSlides,
-        translateValue: translateValue,
-        slideWidth: slideWidth,
-        currentSlidesToShow: slidesToShow,
-        loopedSlides: loopedSlides,
-        repositioningRef: repositioningRef
-    };
-}
-
 /**
  * Simplified hook for chart data processing
  */ function useChartData(data) {
@@ -12757,37 +13591,44 @@ function useSlider(options) {
 // Accordion composables
 var composablesImport =  Object.freeze({
     __proto__: null,
-    DOTS: "...",
+    BALANCED_PRESET: BALANCED_PRESET,
+    DEFAULT_BREAKPOINTS: DEFAULT_BREAKPOINTS,
+    DeviceDetector: DeviceDetector,
+    MOBILE_OPTIMIZED_BREAKPOINTS: MOBILE_OPTIMIZED_BREAKPOINTS,
+    PERFORMANCE_PRESET: PERFORMANCE_PRESET,
+    PerformanceOverlay: PerformanceOverlay,
+    QUALITY_PRESET: QUALITY_PRESET,
+    createBreakpoints: createBreakpoints$1,
+    getDefaultBreakpoints: getDefaultBreakpoints,
+    getDevicePreset: getDevicePreset,
+    getMobileOptimizedParams: getMobileOptimizedParams,
+    getQualityMultipliers: getQualityMultipliers,
     useAccordion: useAccordion,
     useAtomixGlass: useAtomixGlass,
     useBadge: useBadge,
     useBarChart: useBarChart,
     useBlock: useBlock,
-    useBreadcrumb: useBreadcrumb,
-    useCard: useCard,
     useChartData: useChartData,
     useChartInteraction: useChartInteraction,
     useChartScale: useChartScale,
-    useDataTable: useDataTable,
     useEdgePanel: useEdgePanel,
     useForm: useForm,
     useFormGroup: useFormGroup,
     useHero: useHero,
     useInput: useInput,
     useLineChart: useLineChart,
-    useModal: useModal$1,
     useNav: useNav,
     useNavDropdown: useNavDropdown,
     useNavItem: useNavItem,
     useNavbar: useNavbar,
-    usePagination: usePagination,
+    usePerformanceMonitor: usePerformanceMonitor,
     usePieChart: usePieChart,
     useRadio: useRadio,
+    useResponsiveGlass: useResponsiveGlass,
     useRiver: useRiver,
     useSelect: useSelect,
     useSideMenu: useSideMenu,
     useSideMenuItem: useSideMenuItem,
-    useSlider: useSlider,
     useSpinner: useSpinner,
     useTextarea: useTextarea,
     useTodo: useTodo
@@ -12878,7 +13719,10 @@ const Select =  React.memo((({options: options, value: value, onChange: onChange
         };
     }), []);
     // Toggle dropdown
-    const handleItemClick = React.useCallback((option => {
+    const handleToggle = () => {
+        disabled || (!isOpen && bodyRef.current && panelRef.current ? bodyRef.current.style.height = `${panelRef.current.clientHeight}px` : bodyRef.current && (bodyRef.current.style.height = "0px"), 
+        setIsOpen(!isOpen));
+    }, 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
@@ -12922,7 +13766,15 @@ const Select =  React.memo((({options: options, value: value, onChange: onChange
                 "aria-describedby": ariaDescribedBy,
                 "aria-invalid": invalid,
                 style: {
-                    display: "none"
+                    position: "absolute",
+                    width: "1px",
+                    height: "1px",
+                    padding: "0",
+                    margin: "-1px",
+                    overflow: "hidden",
+                    clip: "rect(0, 0, 0, 0)",
+                    whiteSpace: "nowrap",
+                    border: "0"
                 },
                 children: [ placeholder && jsxRuntime.jsx("option", {
                     value: "",
@@ -12935,11 +13787,29 @@ const Select =  React.memo((({options: options, value: value, onChange: onChange
                 }, 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));
+                onClick: handleToggle,
+                onKeyDown: event => {
+                    if (!disabled) switch (event.key) {
+                      case "Enter":
+                      case " ":
+                        event.preventDefault(), handleToggle();
+                        break;
+
+                      case "Escape":
+                        isOpen && (event.preventDefault(), setIsOpen(!1), bodyRef.current && (bodyRef.current.style.height = "0px"));
+                        break;
+
+                      case "ArrowDown":
+                      case "ArrowUp":
+                        isOpen || (event.preventDefault(), handleToggle());
+                    }
                 },
                 "aria-disabled": disabled,
+                tabIndex: disabled ? -1 : 0,
+                role: "combobox",
+                "aria-haspopup": "listbox",
+                "aria-expanded": isOpen,
+                "aria-controls": id ? `${id}-listbox` : void 0,
                 children: selectedLabel
             }), jsxRuntime.jsx("i", {
                 className: `${SELECT.CLASSES.ICON_CARET} ${SELECT.CLASSES.TOGGLE_ICON}`
@@ -12954,10 +13824,16 @@ const Select =  React.memo((({options: options, value: value, onChange: onChange
                     ref: panelRef,
                     children: jsxRuntime.jsx("ul", {
                         className: SELECT.CLASSES.SELECT_ITEMS,
+                        role: "listbox",
+                        id: id ? `${id}-listbox` : void 0,
+                        "aria-labelledby": id,
                         children: hasOptionsProp ? options.map(((option, index) => jsxRuntime.jsx("li", {
                             className: SELECT.CLASSES.SELECT_ITEM,
                             "data-value": option.value,
                             onClick: () => !option.disabled && handleItemClick(option),
+                            role: "option",
+                            "aria-selected": value === option.value,
+                            "aria-disabled": option.disabled,
                             children: jsxRuntime.jsxs("label", {
                                 htmlFor: `SelectItem${index}`,
                                 className: "c-checkbox",
@@ -14500,7 +15376,45 @@ const ModalImpl =  React.memo((({children: children, isOpen: isOpen = !1, onOpen
         onOpenChange: onOpenChange,
         onClose: onClose,
         onOpen: onOpen
-    });
+    }), contentRef = 
+    /**
+ * Hook to trap focus within an element
+ */
+    function(isOpen) {
+        const containerRef = React.useRef(null), previouslyFocusedElement = React.useRef(null), getFocusableElements = React.useCallback((() => containerRef.current ? Array.from(containerRef.current.querySelectorAll('a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])')).filter((el => {
+            // Check if visible
+            const style = window.getComputedStyle(el);
+            return "none" !== style.display && "hidden" !== style.visibility;
+        })) : []), []), handleKeyDown = React.useCallback((event => {
+            if ("Tab" !== event.key) return;
+            const focusableElements = getFocusableElements();
+            if (0 === focusableElements.length) return;
+            const firstElement = focusableElements[0], lastElement = focusableElements[focusableElements.length - 1];
+            event.shiftKey ? 
+            // Shift + Tab
+            document.activeElement === firstElement && (event.preventDefault(), lastElement.focus()) : 
+            // Tab
+            document.activeElement === lastElement && (event.preventDefault(), firstElement.focus());
+        }), [ getFocusableElements ]);
+        return React.useEffect((() => {
+            if (isOpen) {
+                previouslyFocusedElement.current = document.activeElement;
+                const focusableElements = getFocusableElements();
+                if (focusableElements.length > 0 && focusableElements[0]) {
+                    // Delay focus slightly to ensure element is rendered
+                    const firstEl = focusableElements[0];
+                    setTimeout((() => {
+                        firstEl.focus();
+                    }), 0);
+                }
+                document.addEventListener("keydown", handleKeyDown);
+            } else previouslyFocusedElement.current && previouslyFocusedElement.current.focus(), 
+            document.removeEventListener("keydown", handleKeyDown);
+            return () => {
+                document.removeEventListener("keydown", handleKeyDown);
+            };
+        }), [ isOpen, getFocusableElements, handleKeyDown ]), containerRef;
+    }(isOpenState), instanceId = React.useId(), titleId = `modal-title-${instanceId}`, descId = `modal-desc-${instanceId}`;
     // Handle keyboard events for Escape key
     React.useEffect((() => {
         if (!keyboard) return;
@@ -14518,15 +15432,19 @@ const ModalImpl =  React.memo((({children: children, isOpen: isOpen = !1, onOpen
         return React__default.default.isValidElement(child) && _includesInstanceProperty(_context = [ "ModalHeader", "ModalBody", "ModalFooter" ]).call(_context, child.type.displayName);
     })), modalContent = jsxRuntime.jsx("div", {
         className: "c-modal__content",
+        ref: contentRef,
         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
+            onClose: child.props.onClose || close,
+            id: titleId
         }) : child)) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
             children: [ (title || closeButton) && jsxRuntime.jsx(ModalHeader, {
+                id: titleId,
                 title: title,
                 subtitle: subtitle,
                 closeButton: closeButton,
                 onClose: close
             }), jsxRuntime.jsx(ModalBody, {
+                id: descId,
                 children: children
             }), footer && jsxRuntime.jsx(ModalFooter, {
                 children: footer
@@ -14544,6 +15462,8 @@ const ModalImpl =  React.memo((({children: children, isOpen: isOpen = !1, onOpen
         role: "dialog",
         "aria-modal": "true",
         "aria-hidden": !isOpenState,
+        "aria-labelledby": titleId,
+        "aria-describedby": descId,
         ...props,
         children: [ jsxRuntime.jsx("div", {
             ref: backdropRef,
@@ -14796,7 +15716,27 @@ const Navbar =  React.forwardRef((({brand: brand, children: children, variant: v
         return window.addEventListener("resize", handleResize), () => {
             window.removeEventListener("resize", handleResize);
         };
-    }), [ collapsible, expanded, onToggle ]);
+    }), [ collapsible, expanded, onToggle ]), 
+    // Handle Escape key to close mobile menu
+    React.useEffect((() => {
+        if (!navbarExpanded || !closeOnEscape) return;
+        const handleEscapeKey = event => {
+            "Escape" === event.key && ("function" == typeof onToggle ? onToggle(!1) : setNavbarExpanded(!1));
+        };
+        return document.addEventListener("keydown", handleEscapeKey), () => {
+            document.removeEventListener("keydown", handleEscapeKey);
+        };
+    }), [ navbarExpanded, closeOnEscape, onToggle ]), 
+    // Handle outside click to close mobile menu
+    React.useEffect((() => {
+        if (!navbarExpanded || !closeOnOutsideClick) return;
+        const handleClickOutside = event => {
+            !collapseRef.current || collapseRef.current.contains(event.target) || event.target.closest(".c-navbar__toggler") || ("function" == typeof onToggle ? onToggle(!1) : setNavbarExpanded(!1));
+        };
+        return document.addEventListener("mousedown", handleClickOutside), () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }), [ navbarExpanded, closeOnOutsideClick, onToggle ]);
     // Generate the navbar class
     const navbarClass = generateNavbarClass({
         position: position,
@@ -17404,7 +18344,235 @@ const SectionIntro = ({title: title, label: label, text: text, actions: actions,
 SectionIntro.displayName = "SectionIntro";
 
 const Slider =  React.forwardRef(((props, ref) => {
-    const {slides: slides = [], height: height = 300, width: width = "100%", slidesToShow: slidesToShow = 1, spaceBetween: spaceBetween = 0, loop: loop = !1, initialSlide: initialSlide = 0, direction: direction = "horizontal", speed: speed = 300, allowTouchMove: allowTouchMove = !0, threshold: threshold = 50, grabCursor: grabCursor = !0, autoplay: autoplay, navigation: navigation, pagination: pagination, className: className, style: style, onSlideChange: onSlideChange, ...rest} = props, validSlides = Array.isArray(slides) ? slides : [], slider = useSlider({
+    const {slides: slides = [], height: height = 300, width: width = "100%", slidesToShow: slidesToShow = 1, spaceBetween: spaceBetween = 0, loop: loop = !1, initialSlide: initialSlide = 0, direction: direction = "horizontal", speed: speed = 300, allowTouchMove: allowTouchMove = !0, threshold: threshold = 50, grabCursor: grabCursor = !0, autoplay: autoplay, navigation: navigation, pagination: pagination, className: className, style: style, onSlideChange: onSlideChange, ...rest} = props, validSlides = Array.isArray(slides) ? slides : [], slider = function(options) {
+        const {slides: rawSlides, slidesToShow: slidesToShow = 1, spaceBetween: spaceBetween = 0, loop: loop = !1, initialSlide: initialSlide = 0, direction: direction = "horizontal", speed: speed = 300, allowTouchMove: allowTouchMove = !0, threshold: threshold = 50, autoplay: autoplay, onSlideChange: onSlideChange} = options, slides = Array.isArray(rawSlides) ? rawSlides : [], containerRef = React.useRef(null), wrapperRef = React.useRef(null), repositioningRef = React.useRef(!1), autoplayRef = React.useRef(null), [autoplayRunning, setAutoplayRunning] = React.useState(!1), sliderStateRef = React.useRef({
+            isTransitioning: !1,
+            loop: loop,
+            slides: slides,
+            slidesToShow: slidesToShow,
+            speed: speed,
+            onSlideChange: onSlideChange
+        }), [realIndex, setRealIndex] = React.useState(initialSlide), [internalIndex, setInternalIndex] = React.useState(0), [isTransitioning, setIsTransitioning] = React.useState(!1), [containerSize, setContainerSize] = React.useState(0), [touching, setTouching] = React.useState(!1), [touchStart, setTouchStart] = React.useState(0), [dragOffset, setDragOffset] = React.useState(0), slideWidth = React.useMemo((() => 0 === containerSize ? 0 : (containerSize - spaceBetween * (slidesToShow - 1)) / slidesToShow), [ containerSize, spaceBetween, slidesToShow ]), allSlides = React.useMemo((() => loop && 0 !== slides.length ? [ ...slides.map(((slide, i) => ({
+            ...slide,
+            id: `set1-${slide.id || i}`
+        }))), ...slides.map(((slide, i) => ({
+            ...slide,
+            id: `set2-${slide.id || i}`
+        }))), ...slides.map(((slide, i) => ({
+            ...slide,
+            id: `set3-${slide.id || i}`
+        }))) ] : slides), [ slides, loop ]), loopedSlides = slides.length, translateValue = React.useMemo((() => 0 === slideWidth ? 0 : -internalIndex * slideWidth + dragOffset), [ slideWidth, internalIndex, dragOffset ]);
+        // Update the ref whenever the relevant state/props change
+        React.useEffect((() => {
+            sliderStateRef.current = {
+                isTransitioning: isTransitioning,
+                loop: loop,
+                slides: slides,
+                slidesToShow: slidesToShow,
+                speed: speed,
+                onSlideChange: onSlideChange
+            };
+        }), [ isTransitioning, loop, slides, slidesToShow, speed, onSlideChange ]), 
+        // Autoplay effect
+        React.useEffect((() => {
+            if (!autoplay) return autoplayRef.current && (clearInterval(autoplayRef.current), 
+            autoplayRef.current = null), void setAutoplayRunning(!1);
+            const autoplayParams = "boolean" == typeof autoplay ? {
+                delay: 3e3
+            } : autoplay, {delay: delay = 3e3, pauseOnMouseEnter: pauseOnMouseEnter = !1, disableOnInteraction: disableOnInteraction = !1, reverseDirection: reverseDirection = !1} = autoplayParams;
+            // Clear any existing interval
+            autoplayRef.current && clearInterval(autoplayRef.current), 
+            // Create new interval
+            autoplayRef.current = setInterval((() => {
+                // Use ref to get the latest state without resetting the interval
+                const {isTransitioning: currentIsTransitioning, loop: currentLoop, slides: currentSlides, slidesToShow: currentSlidesToShow, speed: currentSpeed, onSlideChange: currentOnSlideChange} = sliderStateRef.current;
+                // We need to use a functional update to get the latest values
+                                setRealIndex((prevRealIndex => {
+                    if (currentIsTransitioning) return prevRealIndex;
+                    // Stop autoplay on interaction if disableOnInteraction is true
+                                        let nextIndex;
+                    // Trigger the slide change
+                    if (disableOnInteraction && autoplayRef.current && (clearInterval(autoplayRef.current), 
+                    autoplayRef.current = null, setAutoplayRunning(!1)), nextIndex = currentLoop ? (prevRealIndex + 1) % currentSlides.length : Math.min(prevRealIndex + 1, currentSlides.length - currentSlidesToShow), 
+                    reverseDirection) {
+                        // For reverse direction, we would go to previous slide
+                        const prevIndex = currentLoop ? 0 === prevRealIndex ? currentSlides.length - 1 : prevRealIndex - 1 : Math.max(prevRealIndex - 1, 0);
+                        return setInternalIndex(currentLoop ? currentSlides.length + prevIndex : prevIndex), 
+                        setIsTransitioning(!0), setDragOffset(0), setTimeout((() => {
+                            setIsTransitioning(!1), currentOnSlideChange?.(prevIndex);
+                        }), currentSpeed), prevIndex;
+                    }
+                    // Normal direction
+                    return setInternalIndex(currentLoop ? currentSlides.length + nextIndex : nextIndex), 
+                    setIsTransitioning(!0), setDragOffset(0), setTimeout((() => {
+                        setIsTransitioning(!1), currentOnSlideChange?.(nextIndex), 
+                        // Reposition after transition ends for looped sliders
+                        currentLoop && nextIndex >= 2 * currentSlides.length && (repositioningRef.current = !0, 
+                        setInternalIndex(currentSlides.length + nextIndex), setTimeout((() => {
+                            repositioningRef.current = !1;
+                        }), 0));
+                    }), currentSpeed), nextIndex;
+                }));
+            }), delay), setAutoplayRunning(!0);
+            // Handle pause on mouse enter/leave if enabled
+            let containerElement = null;
+            const handleMouseEnter = () => {
+                autoplayRef.current && (clearInterval(autoplayRef.current), autoplayRef.current = null, 
+                setAutoplayRunning(!1));
+            }, handleMouseLeave = () => {
+                // Restart autoplay
+                autoplayRef.current && clearInterval(autoplayRef.current), autoplayRef.current = setInterval((() => {
+                    const {isTransitioning: currentIsTransitioning, loop: currentLoop, slides: currentSlides, slidesToShow: currentSlidesToShow, speed: currentSpeed, onSlideChange: currentOnSlideChange} = sliderStateRef.current;
+                    setRealIndex((prevRealIndex => {
+                        if (currentIsTransitioning) return prevRealIndex;
+                        let nextIndex;
+                        return nextIndex = currentLoop ? (prevRealIndex + 1) % currentSlides.length : Math.min(prevRealIndex + 1, currentSlides.length - currentSlidesToShow), 
+                        setInternalIndex(currentLoop ? currentSlides.length + nextIndex : nextIndex), setIsTransitioning(!0), 
+                        setDragOffset(0), setTimeout((() => {
+                            setIsTransitioning(!1), currentOnSlideChange?.(nextIndex), currentLoop && nextIndex >= 2 * currentSlides.length && (repositioningRef.current = !0, 
+                            setInternalIndex(currentSlides.length + nextIndex), setTimeout((() => {
+                                repositioningRef.current = !1;
+                            }), 0));
+                        }), currentSpeed), nextIndex;
+                    }));
+                }), delay), setAutoplayRunning(!0);
+            };
+            // Cleanup
+            return pauseOnMouseEnter && containerRef.current && (containerElement = containerRef.current, 
+            containerElement.addEventListener("mouseenter", handleMouseEnter), containerElement.addEventListener("mouseleave", handleMouseLeave)), 
+            () => {
+                autoplayRef.current && (clearInterval(autoplayRef.current), autoplayRef.current = null), 
+                containerElement && (containerElement.removeEventListener("mouseenter", handleMouseEnter), 
+                containerElement.removeEventListener("mouseleave", handleMouseLeave)), setAutoplayRunning(!1);
+            };
+        }), [ autoplay, repositioningRef ]), 
+        // Initialize
+        React.useEffect((() => {
+            setInternalIndex(loop ? slides.length + initialSlide : initialSlide);
+        }), [ loop, slides.length, initialSlide ]), React.useEffect((() => {
+            const updateSize = () => {
+                if (containerRef.current) {
+                    const size = "horizontal" === direction ? containerRef.current.offsetWidth : containerRef.current.offsetHeight;
+                    setContainerSize(size);
+                }
+            };
+            return updateSize(), window.addEventListener("resize", updateSize), () => window.removeEventListener("resize", updateSize);
+        }), [ direction ]);
+        const slideNext = React.useCallback((() => {
+            if (!isTransitioning) if (
+            // Stop autoplay on interaction if disableOnInteraction is true
+            autoplay && "object" == typeof autoplay && autoplay.disableOnInteraction && autoplayRef.current && (clearInterval(autoplayRef.current), 
+            autoplayRef.current = null, setAutoplayRunning(!1)), loop) {
+                const nextRealIndex = (realIndex + 1) % slides.length, nextInternalIndex = internalIndex + 1;
+                setRealIndex(nextRealIndex), setInternalIndex(nextInternalIndex), setIsTransitioning(!0), 
+                setDragOffset(0), setTimeout((() => {
+                    setIsTransitioning(!1), onSlideChange?.(nextRealIndex), 
+                    // Reposition after transition ends
+                    nextInternalIndex >= 2 * slides.length && (repositioningRef.current = !0, setInternalIndex(slides.length + nextRealIndex), 
+                    setTimeout((() => {
+                        repositioningRef.current = !1;
+                    }), 0));
+                }), speed);
+            } else {
+                const nextIndex = Math.min(realIndex + 1, slides.length - slidesToShow);
+                setRealIndex(nextIndex), setInternalIndex(nextIndex), setIsTransitioning(!0), setDragOffset(0), 
+                setTimeout((() => {
+                    setIsTransitioning(!1), onSlideChange?.(nextIndex);
+                }), speed);
+            }
+        }), [ realIndex, internalIndex, slides.length, slidesToShow, loop, isTransitioning, speed, onSlideChange, allSlides.length, loopedSlides, autoplay ]), slidePrev = React.useCallback((() => {
+            if (!isTransitioning) if (
+            // Stop autoplay on interaction if disableOnInteraction is true
+            autoplay && "object" == typeof autoplay && autoplay.disableOnInteraction && autoplayRef.current && (clearInterval(autoplayRef.current), 
+            autoplayRef.current = null, setAutoplayRunning(!1)), loop) {
+                const prevRealIndex = 0 === realIndex ? slides.length - 1 : realIndex - 1, prevInternalIndex = internalIndex - 1;
+                setRealIndex(prevRealIndex), setInternalIndex(prevInternalIndex), setIsTransitioning(!0), 
+                setDragOffset(0), setTimeout((() => {
+                    setIsTransitioning(!1), onSlideChange?.(prevRealIndex), 
+                    // Reposition after transition ends
+                    prevInternalIndex < slides.length && (repositioningRef.current = !0, setInternalIndex(slides.length + prevRealIndex), 
+                    setTimeout((() => {
+                        repositioningRef.current = !1;
+                    }), 0));
+                }), speed);
+            } else {
+                const prevIndex = Math.max(realIndex - 1, 0);
+                setRealIndex(prevIndex), setInternalIndex(prevIndex), setIsTransitioning(!0), setDragOffset(0), 
+                setTimeout((() => {
+                    setIsTransitioning(!1), onSlideChange?.(prevIndex);
+                }), speed);
+            }
+        }), [ realIndex, internalIndex, slides.length, loop, isTransitioning, speed, onSlideChange, allSlides.length, loopedSlides, autoplay ]), goToSlide = React.useCallback((index => {
+            isTransitioning || index === realIndex || (
+            // Stop autoplay on interaction if disableOnInteraction is true
+            autoplay && "object" == typeof autoplay && autoplay.disableOnInteraction && autoplayRef.current && (clearInterval(autoplayRef.current), 
+            autoplayRef.current = null, setAutoplayRunning(!1)), setIsTransitioning(!0), setDragOffset(0), 
+            setRealIndex(index), setInternalIndex(loop ? slides.length + index : index), setTimeout((() => {
+                setIsTransitioning(!1), onSlideChange?.(index);
+            }), speed));
+        }), [ realIndex, isTransitioning, speed, onSlideChange, loop, loopedSlides, autoplay ]), handleTouchStart = React.useCallback((e => {
+            if (!allowTouchMove) return;
+            // Stop autoplay on interaction if disableOnInteraction is true
+                        autoplay && "object" == typeof autoplay && autoplay.disableOnInteraction && autoplayRef.current && (clearInterval(autoplayRef.current), 
+            autoplayRef.current = null, setAutoplayRunning(!1));
+            const client = "horizontal" === direction ? "touches" in e ? e.touches[0]?.clientX || 0 : e.clientX : "touches" in e ? e.touches[0]?.clientY || 0 : e.clientY;
+            setTouchStart(client), setTouching(!0), setDragOffset(0);
+        }), [ allowTouchMove, direction, autoplay ]), handleTouchMove = React.useCallback((e => {
+            if (!touching || !allowTouchMove) return;
+            const client = "horizontal" === direction ? "touches" in e ? e.touches[0]?.clientX || 0 : e.clientX : "touches" in e ? e.touches[0]?.clientY || 0 : e.clientY, diff = touchStart - client;
+            Math.abs(diff) > 10 && (e.preventDefault(), setDragOffset(.5 * -diff));
+        }), [ touching, touchStart, allowTouchMove, direction ]), handleTouchEnd = React.useCallback((e => {
+            if (!touching || !allowTouchMove) return;
+            const client = "horizontal" === direction ? "changedTouches" in e ? e.changedTouches[0]?.clientX || 0 : e.clientX : "changedTouches" in e ? e.changedTouches[0]?.clientY || 0 : e.clientY, diff = touchStart - client;
+            setTouching(!1), setDragOffset(0), Math.abs(diff) > threshold && (diff > 0 ? slideNext() : slidePrev());
+        }), [ touching, touchStart, threshold, slideNext, slidePrev, allowTouchMove, direction ]), canSlideNext = loop || realIndex < slides.length - slidesToShow, canSlidePrev = loop || realIndex > 0;
+        return {
+            activeIndex: realIndex,
+            realIndex: realIndex,
+            previousIndex: realIndex,
+            isBeginning: !loop && 0 === realIndex,
+            isEnd: !loop && realIndex >= slides.length - slidesToShow,
+            progress: slides.length > 0 ? realIndex / (slides.length - 1) : 0,
+            autoplayRunning: autoplayRunning,
+            transitioning: isTransitioning,
+            touching: touching,
+            translate: translateValue,
+            slidesPerView: slidesToShow,
+            slidesCount: slides.length,
+            isLocked: !1,
+            destroyed: !1,
+            size: containerSize,
+            touches: {
+                startX: 0,
+                startY: 0,
+                currentX: 0,
+                currentY: 0,
+                diff: 0
+            },
+            allowSlideNext: canSlideNext,
+            allowSlidePrev: canSlidePrev,
+            allowTouchMove: allowTouchMove,
+            animating: isTransitioning,
+            enabled: !0,
+            initialized: !0,
+            slideNext: slideNext,
+            slidePrev: slidePrev,
+            goToSlide: goToSlide,
+            canSlideNext: canSlideNext,
+            canSlidePrev: canSlidePrev,
+            containerRef: containerRef,
+            wrapperRef: wrapperRef,
+            handleTouchStart: handleTouchStart,
+            handleTouchMove: handleTouchMove,
+            handleTouchEnd: handleTouchEnd,
+            allSlides: allSlides,
+            translateValue: translateValue,
+            slideWidth: slideWidth,
+            currentSlidesToShow: slidesToShow,
+            loopedSlides: loopedSlides,
+            repositioningRef: repositioningRef
+        };
+    }({
         slides: validSlides,
         slidesToShow: slidesToShow,
         spaceBetween: spaceBetween,
@@ -17431,7 +18599,8 @@ const Slider =  React.forwardRef(((props, ref) => {
         })
     });
     const containerClasses = [ "c-slider", "vertical" === direction && "c-slider--vertical", grabCursor && "c-slider--grab-cursor", touching && "c-slider--grabbing", loop && "c-slider--loop", className ].filter(Boolean).join(" ");
-    return jsxRuntime.jsxs("div", {
+    // Keyboard navigation
+        return jsxRuntime.jsxs("div", {
         ref: ref || containerRef,
         className: containerClasses,
         style: {
@@ -17449,9 +18618,32 @@ const Slider =  React.forwardRef(((props, ref) => {
         onMouseMove: handleTouchMove,
         onMouseUp: handleTouchEnd,
         onMouseLeave: handleTouchEnd,
+        onKeyDown: event => {
+            switch (event.key) {
+              case "ArrowLeft":
+                "horizontal" === direction && (event.preventDefault(), slidePrev());
+                break;
+
+              case "ArrowRight":
+                "horizontal" === direction && (event.preventDefault(), slideNext());
+                break;
+
+              case "ArrowUp":
+                "vertical" === direction && (event.preventDefault(), slidePrev());
+                break;
+
+              case "ArrowDown":
+                "vertical" === direction && (event.preventDefault(), slideNext());
+            }
+        },
+        role: "region",
+        "aria-roledescription": "carousel",
+        "aria-label": rest["aria-label"] || "Image slider",
+        tabIndex: 0,
         children: [ jsxRuntime.jsx("div", {
             ref: wrapperRef,
             className: "c-slider__wrapper",
+            "aria-live": autoplay ? "off" : "polite",
             style: {
                 display: "flex",
                 flexDirection: "vertical" === direction ? "column" : "row",
@@ -17629,15 +18821,24 @@ Steps.displayName = "Steps", Steps.Item = StepsItem, Steps.Step = StepsItem;
 // 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))
-})));
+    handleTabClick: () => {},
+    handleKeyDown: () => {},
+    totalTabs: 0
+}), TabsList =  React.forwardRef((({children: children, className: className = "", onKeyDown: onKeyDown, ...props}, ref) => {
+    const {handleKeyDown: contextHandleKeyDown} = React.useContext(TabsContext), totalTabs = React__default.default.Children.count(children);
+    return jsxRuntime.jsx("ul", {
+        ref: ref,
+        className: `c-tabs__nav ${className}`.trim(),
+        role: "tablist",
+        onKeyDown: e => {
+            contextHandleKeyDown(e, totalTabs), onKeyDown?.(e);
+        },
+        ...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";
@@ -17649,8 +18850,10 @@ const TabsTrigger =  React.forwardRef((({children: children, className: classNam
     const isActive = void 0 !== index && currentTab === index;
     return jsxRuntime.jsx("li", {
         className: "c-tabs__nav-item",
+        role: "presentation",
         children: jsxRuntime.jsx("button", {
             ref: ref,
+            id: `tab-nav-${index}`,
             className: `c-tabs__nav-btn ${isActive ? TAB.CLASSES.ACTIVE : ""} ${className}`.trim(),
             onClick: e => {
                 void 0 !== index && handleTabClick(index), onClick?.(e);
@@ -17659,6 +18862,7 @@ const TabsTrigger =  React.forwardRef((({children: children, className: classNam
             role: "tab",
             "aria-selected": isActive,
             "aria-controls": `tab-panel-${index}`,
+            tabIndex: isActive ? 0 : -1,
             type: "button",
             ...props,
             children: children
@@ -17708,24 +18912,59 @@ 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);
+    }, handleKeyDown = (event, totalTabs) => {
+        let newIndex = currentTab;
+        switch (event.key) {
+          case "ArrowRight":
+            newIndex = (currentTab + 1) % totalTabs;
+            break;
+
+          case "ArrowLeft":
+            newIndex = (currentTab - 1 + totalTabs) % totalTabs;
+            break;
+
+          case "Home":
+            newIndex = 0;
+            break;
+
+          case "End":
+            newIndex = totalTabs - 1;
+            break;
+
+          default:
+            return;
+        }
+        event.preventDefault(), handleTabClick(newIndex), 
+        // Focus the newly active tab after it renders
+        setTimeout((() => {
+            const tabElement = document.getElementById(`tab-nav-${newIndex}`);
+            tabElement && tabElement.focus();
+        }), 0);
     };
     // 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, {
+        if (items && items.length > 0) 
+    // Legacy mode
+    content = jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [ jsxRuntime.jsx("ul", {
             className: "c-tabs__nav",
+            role: "tablist",
+            onKeyDown: e => handleKeyDown(e, items.length),
             children: items.map(((item, index) => jsxRuntime.jsx("li", {
                 className: "c-tabs__nav-item",
+                role: "presentation",
                 children: jsxRuntime.jsx("button", {
+                    id: `tab-nav-${index}`,
                     className: `c-tabs__nav-btn ${index === currentTab ? TAB.CLASSES.ACTIVE : ""}`,
                     onClick: () => handleTabClick(index),
                     "data-tabindex": index,
                     role: "tab",
                     "aria-selected": index === currentTab,
                     "aria-controls": `tab-panel-${index}`,
+                    tabIndex: index === currentTab ? 0 : -1,
+                    type: "button",
                     children: item.label
                 })
             }, `tab-nav-${index}`)))
@@ -17749,13 +18988,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
-    });
+    }); else {
+        // Compound mode
+        const tabsList = React__default.default.Children.toArray(children).find((child =>  React__default.default.isValidElement(child) && "TabsList" === child.type.displayName)), totalTabsCount = tabsList ? React__default.default.Children.count(tabsList.props.children) : 0;
+        content = jsxRuntime.jsx(TabsContext.Provider, {
+            value: {
+                currentTab: currentTab,
+                handleTabClick: handleTabClick,
+                handleKeyDown: handleKeyDown,
+                totalTabs: totalTabsCount
+            },
+            children: children
+        });
+    }
     const wrapper = jsxRuntime.jsx("div", {
         className: `c-tabs js-atomix-tab ${className}`,
         style: style,
@@ -17846,7 +19091,7 @@ const Testimonial = ({quote: quote, author: author, size: size = "", skeleton: s
             className: "c-testimonial__author",
             children: [ author.avatarSrc && jsxRuntime.jsx("img", {
                 src: author.avatarSrc,
-                alt: author.avatarAlt || "",
+                alt: author.avatarAlt || `${author.name}'s avatar`,
                 className: "c-testimonial__author-avatar c-avatar c-avatar--xxl c-avatar--circle"
             }), jsxRuntime.jsxs("div", {
                 className: "c-testimonial__info",
@@ -18122,7 +19367,17 @@ const Tooltip =  React.memo((({content: content, children: children, position: p
                 cancelAnimationFrame(rafId), window.removeEventListener("resize", handleUpdate), 
                 window.removeEventListener("scroll", handleUpdate, !0);
             };
-        }), [ isVisible, updatePosition ]);
+        }), [ isVisible, updatePosition ]), 
+        // Handle Escape key to close tooltip
+        React.useEffect((() => {
+            if (!isVisible) return;
+            const handleKeyDown = event => {
+                "Escape" === event.key && hideTooltip();
+            };
+            return document.addEventListener("keydown", handleKeyDown), () => {
+                document.removeEventListener("keydown", handleKeyDown);
+            };
+        }), [ isVisible, hideTooltip ]);
         // Setup trigger props
         const triggerProps = {
             "aria-describedby": isVisible ? tooltipId : void 0
@@ -18811,9 +20066,15 @@ const VideoPlayer =  React.forwardRef((({src: src, type: type = "video", youtube
         const rect = e.currentTarget.getBoundingClientRect(), percent = (e.clientX - rect.left) / rect.width;
         setVolume(percent);
     }), [ setVolume ]), handleDownload = React.useCallback((() => {
-        if (src) {
-            const a = document.createElement("a");
-            a.href = src, a.download = "video", a.click();
+        if (src) try {
+            var _context;
+            const url = new URL(src, window.location.origin);
+            if (_includesInstanceProperty(_context = [ "http:", "https:", "blob:", "data:" ]).call(_context, url.protocol)) {
+                const a = document.createElement("a");
+                a.href = url.href, a.download = "video", a.click();
+            }
+        } catch (e) {
+            // Ignore invalid URLs
         }
     }), [ src ]), handleShare = React.useCallback((async () => {
         if (navigator.share) try {
@@ -19392,6 +20653,7 @@ var components =  Object.freeze({
     TODO: TODO,
     TOGGLE: TOGGLE,
     TOOLTIP: TOOLTIP,
+    TYPEDBUTTON: TYPEDBUTTON,
     UPLOAD: UPLOAD,
     VIDEO_PLAYER: VIDEO_PLAYER,
     sliderConstants: sliderConstants
@@ -25038,8 +26300,8 @@ exports.ACCORDION = ACCORDION, exports.ATOMIX_GLASS = ATOMIX_GLASS, exports.AVAT
 exports.AVATAR_GROUP = AVATAR_GROUP, exports.Accordion = Accordion, exports.AreaChart = AreaChart, 
 exports.AtomixGlass = AtomixGlass, exports.AtomixLogo = AtomixLogo, exports.Avatar = Avatar, 
 exports.AvatarGroup = AvatarGroup, exports.BADGE = BADGE, exports.BADGE_CSS_VARS = BADGE_CSS_VARS, 
-exports.BLOCK = BLOCK, exports.BREADCRUMB = BREADCRUMB, exports.BUTTON = BUTTON, 
-exports.BUTTON_CSS_VARS = BUTTON_CSS_VARS, exports.BUTTON_GROUP = BUTTON_GROUP, 
+exports.BALANCED_PRESET = BALANCED_PRESET, exports.BLOCK = BLOCK, exports.BREADCRUMB = BREADCRUMB, 
+exports.BUTTON = BUTTON, exports.BUTTON_CSS_VARS = BUTTON_CSS_VARS, exports.BUTTON_GROUP = BUTTON_GROUP, 
 exports.Badge = Badge, exports.BarChart = BarChart, exports.Block = Block, exports.Breadcrumb = Breadcrumb, 
 exports.BubbleChart = BubbleChart, exports.Button = Button, exports.ButtonGroup = ButtonGroup, 
 exports.CALLOUT = CALLOUT, exports.CARD = CARD, exports.CARD_CSS_VARS = CARD_CSS_VARS, 
@@ -25050,29 +26312,31 @@ exports.Card = Card, exports.Chart = Chart, exports.ChartRenderer = ChartRendere
 exports.Checkbox = Checkbox, exports.ColorModeToggle = ColorModeToggle, exports.Container = Container, 
 exports.Countdown = Countdown, exports.DATA_TABLE_CLASSES = DATA_TABLE_CLASSES, 
 exports.DATA_TABLE_SELECTORS = DATA_TABLE_SELECTORS, exports.DATEPICKER = DATEPICKER, 
-exports.DEFAULT_ATOMIX_FONTS = DEFAULT_ATOMIX_FONTS, exports.DOTS = "...", exports.DROPDOWN = DROPDOWN, 
-exports.DROPDOWN_CSS_VARS = DROPDOWN_CSS_VARS, exports.DataTable = DataTable, exports.DatePicker = DatePicker, 
-exports.DesignTokensCustomizer = DesignTokensCustomizer, exports.DonutChart = DonutChart, 
-exports.Dropdown = Dropdown, exports.EDGE_PANEL = EDGE_PANEL, exports.EdgePanel = EdgePanel, 
-exports.ElevationCard = ElevationCard, exports.FOOTER = FOOTER, exports.FORM = FORM, 
-exports.FORM_GROUP = FORM_GROUP, exports.Footer = Footer, exports.FooterLink = FooterLink, 
-exports.FooterSection = FooterSection, exports.FooterSocialLink = FooterSocialLink, 
+exports.DEFAULT_ATOMIX_FONTS = DEFAULT_ATOMIX_FONTS, exports.DEFAULT_BREAKPOINTS = DEFAULT_BREAKPOINTS, 
+exports.DROPDOWN = DROPDOWN, exports.DROPDOWN_CSS_VARS = DROPDOWN_CSS_VARS, exports.DataTable = DataTable, 
+exports.DatePicker = DatePicker, exports.DesignTokensCustomizer = DesignTokensCustomizer, 
+exports.DeviceDetector = DeviceDetector, exports.DonutChart = DonutChart, exports.Dropdown = Dropdown, 
+exports.EDGE_PANEL = EDGE_PANEL, exports.EdgePanel = EdgePanel, exports.ElevationCard = ElevationCard, 
+exports.FOOTER = FOOTER, exports.FORM = FORM, exports.FORM_GROUP = FORM_GROUP, exports.Footer = Footer, 
+exports.FooterLink = FooterLink, exports.FooterSection = FooterSection, exports.FooterSocialLink = FooterSocialLink, 
 exports.Form = Form, exports.FormGroup = FormGroup, exports.FunnelChart = FunnelChart, 
 exports.GaugeChart = GaugeChart, exports.Grid = Grid, exports.GridCol = GridCol, 
 exports.HERO = HERO, exports.HeatmapChart = HeatmapChart, exports.Hero = Hero, exports.INPUT = INPUT, 
 exports.INPUT_CSS_VARS = INPUT_CSS_VARS, exports.Icon = Icon, exports.Input = Input, 
 exports.LIST = LIST, exports.LIST_GROUP = LIST_GROUP, exports.LineChart = LineChart, 
 exports.List = List, exports.ListGroup = ListGroup, exports.MESSAGES = MESSAGES, 
-exports.MODAL = MODAL, exports.MODAL_CSS_VARS = MODAL_CSS_VARS, exports.MasonryGrid = MasonryGrid, 
-exports.MasonryGridItem = MasonryGridItem, exports.MegaMenu = MegaMenu, exports.MegaMenuColumn = MegaMenuColumn, 
-exports.MegaMenuLink = MegaMenuLink, exports.Menu = Menu, exports.MenuDivider = MenuDivider, 
-exports.MenuItem = MenuItem, exports.Messages = Messages, exports.Modal = Modal, 
-exports.MultiAxisChart = MultiAxisChart, exports.NAV = NAV, exports.NAVBAR = NAVBAR, 
-exports.Nav = Nav, exports.NavDropdown = NavDropdown, exports.NavItem = NavItem, 
-exports.Navbar = Navbar, exports.PAGINATION_DEFAULTS = PAGINATION_DEFAULTS, exports.PHOTOVIEWER = PHOTOVIEWER, 
+exports.MOBILE_OPTIMIZED_BREAKPOINTS = MOBILE_OPTIMIZED_BREAKPOINTS, exports.MODAL = MODAL, 
+exports.MODAL_CSS_VARS = MODAL_CSS_VARS, exports.MasonryGrid = MasonryGrid, exports.MasonryGridItem = MasonryGridItem, 
+exports.MegaMenu = MegaMenu, exports.MegaMenuColumn = MegaMenuColumn, exports.MegaMenuLink = MegaMenuLink, 
+exports.Menu = Menu, exports.MenuDivider = MenuDivider, exports.MenuItem = MenuItem, 
+exports.Messages = Messages, exports.Modal = Modal, exports.MultiAxisChart = MultiAxisChart, 
+exports.NAV = NAV, exports.NAVBAR = NAVBAR, exports.Nav = Nav, exports.NavDropdown = NavDropdown, 
+exports.NavItem = NavItem, exports.Navbar = Navbar, exports.PAGINATION_DEFAULTS = PAGINATION_DEFAULTS, 
+exports.PERFORMANCE_PRESET = PERFORMANCE_PRESET, exports.PHOTOVIEWER = PHOTOVIEWER, 
 exports.POPOVER = POPOVER, exports.PROGRESS = PROGRESS, exports.PROGRESS_CSS_VARS = PROGRESS_CSS_VARS, 
-exports.Pagination = Pagination, exports.PhotoViewer = PhotoViewer, exports.PieChart = PieChart, 
-exports.Popover = Popover, exports.ProductReview = ProductReview, exports.Progress = Progress, 
+exports.Pagination = Pagination, exports.PerformanceOverlay = PerformanceOverlay, 
+exports.PhotoViewer = PhotoViewer, exports.PieChart = PieChart, exports.Popover = Popover, 
+exports.ProductReview = ProductReview, exports.Progress = Progress, exports.QUALITY_PRESET = QUALITY_PRESET, 
 exports.RADIO = RADIO, exports.RADIO_CSS_VARS = RADIO_CSS_VARS, exports.RATING = RATING, 
 exports.RIVER = RIVER, exports.RTLManager = RTLManager, exports.RadarChart = RadarChart, 
 exports.Radio = Radio, exports.Rating = Rating, exports.River = River, exports.Row = Row, 
@@ -25084,8 +26348,8 @@ exports.Slider = Slider, exports.Spinner = Spinner, exports.Steps = Steps, expor
 exports.TABS_CSS_VARS = TABS_CSS_VARS, exports.TESTIMONIAL = TESTIMONIAL, exports.TEXTAREA = TEXTAREA, 
 exports.THEME_COLORS = THEME_COLORS, exports.THEME_NAMING = THEME_NAMING, exports.TODO = TODO, 
 exports.TOGGLE = TOGGLE, exports.TOOLTIP = TOOLTIP, exports.TOOLTIP_CSS_VARS = TOOLTIP_CSS_VARS, 
-exports.Tabs = Tabs, exports.Testimonial = Testimonial, exports.Textarea = Textarea, 
-exports.ThemeApplicator = ThemeApplicator, exports.ThemeComparator = ThemeComparator, 
+exports.TYPEDBUTTON = TYPEDBUTTON, exports.Tabs = Tabs, exports.Testimonial = Testimonial, 
+exports.Textarea = Textarea, exports.ThemeApplicator = ThemeApplicator, exports.ThemeComparator = ThemeComparator, 
 exports.ThemeContext = ThemeContext, exports.ThemeErrorBoundary = ThemeErrorBoundary, 
 exports.ThemeInspector = ThemeInspector, exports.ThemeLiveEditor = ThemeLiveEditor, 
 exports.ThemePreview = ThemePreview, exports.ThemeProvider = ThemeProvider, exports.ThemeValidator = ThemeValidator, 
@@ -25158,8 +26422,8 @@ function(cssVars, baseStyle) {
  * ```
  */ , exports.applyComponentTheme = applyComponentTheme, exports.applyPartStyles = applyPartStyles, 
 exports.applyTheme = applyTheme, exports.camelToKebab = camelToKebab, exports.clearThemes = clearThemes, 
-exports.composables = composables, exports.constants = constants, exports.createCSSVarStyle = createCSSVarStyle, 
-exports.createDarkVariant = 
+exports.composables = composables, exports.constants = constants, exports.createBreakpoints = createBreakpoints$1, 
+exports.createCSSVarStyle = createCSSVarStyle, exports.createDarkVariant = 
 /**
  * Create a dark theme variant from a light theme
  */
@@ -25277,7 +26541,9 @@ exports.getAllThemes = getAllThemes, exports.getCSSVariable = getCSSVariable, ex
  */
 function(component) {
     return COMPONENT_CSS_VARS[component];
-}, exports.getComponentThemeValue = getComponentThemeValue, exports.getPartStyles = getPartStyles, 
+}, exports.getComponentThemeValue = getComponentThemeValue, exports.getDefaultBreakpoints = getDefaultBreakpoints, 
+exports.getDevicePreset = getDevicePreset, exports.getMobileOptimizedParams = getMobileOptimizedParams, 
+exports.getPartStyles = getPartStyles, exports.getQualityMultipliers = getQualityMultipliers, 
 exports.getTheme = getTheme, exports.getThemeApplicator = getThemeApplicator, exports.getThemeCount = getThemeCount, 
 exports.getThemeIds = getThemeIds, exports.getThemeMetadata = 
 /**
@@ -25359,8 +26625,7 @@ function(theme, selector = ":root") {
     });
 }, exports.types = types, exports.unregisterTheme = unregisterTheme, exports.useAccordion = useAccordion, 
 exports.useAtomixGlass = useAtomixGlass, exports.useBadge = useBadge, exports.useBarChart = useBarChart, 
-exports.useBlock = useBlock, exports.useBreadcrumb = useBreadcrumb, exports.useCard = useCard, 
-exports.useChartData = useChartData, exports.useChartInteraction = useChartInteraction, 
+exports.useBlock = useBlock, exports.useChartData = useChartData, exports.useChartInteraction = useChartInteraction, 
 exports.useChartScale = useChartScale, exports.useComponentCustomization = 
 /**
  * Hook to merge theme overrides with component props
@@ -25409,19 +26674,19 @@ function(component, props) {
 }
 /**
  * Hook to merge default props with provided props
- */ , exports.useComponentTheme = useComponentTheme, exports.useDataTable = useDataTable, 
-exports.useEdgePanel = useEdgePanel, exports.useForm = useForm, exports.useFormGroup = useFormGroup, 
-exports.useHero = useHero, exports.useHistory = useHistory, exports.useInput = useInput, 
-exports.useLineChart = useLineChart, exports.useMergedProps = function(defaultProps, props) {
+ */ , exports.useComponentTheme = useComponentTheme, exports.useEdgePanel = useEdgePanel, 
+exports.useForm = useForm, exports.useFormGroup = useFormGroup, exports.useHero = useHero, 
+exports.useHistory = useHistory, exports.useInput = useInput, exports.useLineChart = useLineChart, 
+exports.useMergedProps = function(defaultProps, props) {
     return React.useMemo((() => ({
         ...defaultProps,
         ...props
     })), [ defaultProps, props ]);
-}, exports.useModal = useModal$1, exports.useNav = useNav, exports.useNavDropdown = useNavDropdown, 
-exports.useNavItem = useNavItem, exports.useNavbar = useNavbar, exports.usePagination = usePagination, 
-exports.usePieChart = usePieChart, exports.useRadio = useRadio, exports.useRiver = useRiver, 
-exports.useSelect = useSelect, exports.useSideMenu = useSideMenu, exports.useSideMenuItem = useSideMenuItem, 
-exports.useSlider = useSlider, exports.useSlot = function(slot, props, fallback) {
+}, exports.useNav = useNav, exports.useNavDropdown = useNavDropdown, exports.useNavItem = useNavItem, 
+exports.useNavbar = useNavbar, exports.usePerformanceMonitor = usePerformanceMonitor, 
+exports.usePieChart = usePieChart, exports.useRadio = useRadio, exports.useResponsiveGlass = useResponsiveGlass, 
+exports.useRiver = useRiver, exports.useSelect = useSelect, exports.useSideMenu = useSideMenu, 
+exports.useSideMenuItem = useSideMenuItem, exports.useSlot = function(slot, props, fallback) {
     return React__default.default.useMemo((() => renderSlot(slot, props, fallback)), [ slot, props, fallback ]);
 }, exports.useSpinner = useSpinner, exports.useTextarea = useTextarea, exports.useTheme = useTheme, 
 exports.useThemeTokens = useThemeTokens, exports.useTodo = useTodo, exports.utils = utils,